html,
body {
height: 100%;
}
@font-face {
font-family: "Logo Light";
src: url("/assets/fonts/Oxanium-ExtraLight.woff2") format("woff2");
}
@font-face {
font-family: "Logo Heavy";
src: url("/assets/fonts/Oxanium-Bold.woff2") format("woff2");
}
/* Theme tokens; data-bs-theme is set on by an inline script.
The dark values match the QR app's dark palette. */
:root {
--bs-body-bg: #f5f5f5;
--xorra-card-bg: #ffffff;
--xorra-card-border: #dee2e6;
--xorra-card-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.08);
--xorra-accent: #0d6efd;
}
html[data-bs-theme="dark"] {
--bs-body-bg: #101418;
--bs-body-color: #e8edf2;
--bs-secondary-color: #93a1af;
--bs-border-color: #2c3540;
--bs-dark-rgb: 22, 25, 29; /* bg-dark navbar matches the QR app's dark brand bar */
--xorra-card-bg: #1a2027;
--xorra-card-border: #2c3540;
--xorra-card-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.4);
--xorra-accent: #3ea0ff;
}
body {
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
font-family: Logo Light;
}
.logo-minor {
font-family: Logo Heavy;
}
/* Shared brand size across the hub and every tool navbar (Bootstrap's
.navbar-brand default is smaller); the font-family keeps the wordmark's
line box — and so its vertical position — Oxanium-metric like the tools'. */
.navbar-brand {
font-size: 1.4rem;
font-family: "Logo Heavy", sans-serif;
padding-block: 0;
}
/* Bar geometry matching the tools' headers (see docs/TOOLS-STYLE-GUIDE.md):
0.9rem vertical padding, 1.2rem side insets. Bootstrap's defaults are
tighter, which left the wordmark closer to the viewport edge — and the
bar shorter — than the tool pages. */
.navbar {
padding: calc(0.9rem + env(safe-area-inset-top)) 0 0.9rem;
}
.navbar > .container-fluid {
padding-inline: 1.2rem;
}
@media (max-width: 480px) {
.navbar {
padding-block: 0.7rem;
}
.navbar > .container-fluid {
padding-inline: 0.9rem;
}
}
/* Tool cards on the home page */
.tool-grid {
max-width: 720px;
}
.tool-card {
display: block;
height: 100%;
padding: 1.75rem 1.5rem;
background-color: var(--xorra-card-bg);
border: 1px solid var(--xorra-card-border);
border-radius: 0.75rem;
color: var(--bs-body-color);
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.tool-card:hover,
.tool-card:focus-visible {
color: var(--bs-body-color);
border-color: var(--xorra-accent);
box-shadow: var(--xorra-card-shadow);
}
.tool-icon {
width: 48px;
height: 48px;
color: var(--xorra-accent);
margin-bottom: 0.75rem;
}
.tool-name {
font-size: 1.5rem;
font-weight: normal;
margin-bottom: 0.5rem;
}
.tool-desc {
color: var(--bs-secondary-color);
font-size: 0.95rem;
margin: 0;
}
/* Inline flag in the footer: size with the text and pin the bottom at the
descender line so it sits optically centered on the text band. */
.footer-flag {
height: 1.2em;
width: auto;
vertical-align: -0.24em;
}