/* Page chrome: the bits _Layout.cshtml renders on every page.
Header/nav/theme toggle, the speed-bar motif, footer, the .page read column, the
theme-swapped logo artwork, and the handful of Bootstrap overrides the Identity pages
need. Must stay after bootstrap.min.css in _Layout - that is what .page .btn-primary
and .page .form-control are for. */
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background-color: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 1.7rem; width: auto; }
.nav-links {
display: flex; gap: 1.75rem; align-items: center;
font-family: var(--font-display); font-weight: 600; font-size: .82rem;
letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); list-style: none; padding: 0;
/* .site-nav is space-between with three children now; the auto left margin eats the free
space before justify-content sees it, so the links stay against the actions group on
the right instead of drifting to the middle. */
margin: 0 0 0 auto;
}
.nav-links a { position: relative; transition: color .15s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
/* Current page: ink text with a red underscore. */
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -.55rem;
height: 3px; background: var(--red);
}
.nav-links form { margin: 0; }
.nav-links button {
background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
text-transform: uppercase; letter-spacing: .06em;
}
.nav-links button:hover { color: var(--ink); }
/* ---------- Bar controls: theme toggle + hamburger ---------- */
.nav-actions { display: flex; align-items: center; gap: .6rem; }
/* One pill for both buttons. The toggle used to be an in .nav-links, where
`.nav-links button` (0,1,1) out-specified `.theme-toggle` (0,1,0) and stripped the
border and background off it; out here it renders as designed. */
.theme-toggle, .nav-toggle {
display: inline-grid; place-items: center;
width: 2rem; height: 2rem; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface); color: var(--ink);
cursor: pointer; font-size: .95rem; line-height: 1; transition: border-color .15s, background .15s;
}
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--blue); }
.theme-toggle:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Cart: same pill as the buttons, with a count badge pinned to its corner. */
.cart-link {
position: relative; display: inline-grid; place-items: center;
width: 2rem; height: 2rem; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface); color: var(--ink);
transition: border-color .15s;
}
.cart-link:hover, .cart-link[aria-current] { border-color: var(--blue); color: var(--ink); }
/* A signed-in driver's badge (car number or initials) - her way back to My videos. Same pill. */
.me-link {
display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .45rem;
border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: var(--red-ink);
transition: border-color .15s;
}
.me-link:hover, .me-link[aria-current] { border-color: var(--blue); }
.me-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* The admin's pill: same shape as a driver's, spelled out, small caps like the admin bar's mark. */
.admin-link { padding: 0 .7rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.cart-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cart-badge {
position: absolute; top: -.35rem; right: -.4rem;
min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px;
display: grid; place-items: center;
background: var(--red); color: #fff;
font-family: var(--font-display); font-weight: 700; font-size: .65rem; line-height: 1;
}
/* The hamburger only exists below the breakpoint; display:none also keeps it out of the
desktop tab order. Its icon is the two paths in the SVG, one shown at a time. */
.nav-toggle { display: none; padding: 0; }
.nav-toggle .ex, .nav-toggle[aria-expanded="true"] .bars { display: none; }
.nav-toggle[aria-expanded="true"] .ex { display: inline; }
/* ---------- Mobile nav ----------
Below 40rem the same stops being a row and becomes a panel hanging off the bottom
of the (sticky) header. Hidden state is visibility, not display, so it animates and so
the links stay out of the tab order while closed. site.js flips data-nav-open. */
@media (max-width: 40rem) {
.site-nav { position: relative; }
.nav-toggle { display: inline-grid; }
.nav-links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
margin: 0; padding: .25rem var(--gutter) .75rem;
background: var(--surface); border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-.4rem);
/* visibility is stepped, not eased: delayed to the end of the fade on the way out so
the panel doesn't blink away mid-animation, and applied immediately on the way in
so the links are focusable the moment the button is pressed. */
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.site-nav[data-nav-open] .nav-links {
opacity: 1; visibility: visible; transform: none;
transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.nav-links li + li { border-top: 1px solid var(--border); }
.nav-links a, .nav-links button { display: block; width: 100%; text-align: left; padding: .9rem 0 .9rem .9rem; }
/* The current-page marker turns from an underscore into a rail down the left edge -
full-bleed across a stacked row it would read as a divider, not as "you are here". */
.nav-links a.active::after { inset: 0 auto 0 0; width: 3px; height: auto; }
}
/* ---------- Speed bar (header + footer motif) ---------- */
/* Red/white/blue speed bar motif */
.speedbar { display: flex; gap: 5px; height: 7px; width: 180px; margin: 1rem auto 0; transform: skewX(-18deg); }
.speedbar span { flex: 1; border: 1px solid var(--border); }
/* ---------- Footer ---------- */
/* Sticky footer: body is a flex column (base.css), so main absorbs the free space on short
pages and pushes the footer down to the bottom of the viewport. flex-grow never shrinks
content, and header/footer stay at their natural height as flex defaults. */
main { flex: 1 0 auto; }
.site-footer { border-top: 1px solid var(--border); background-color: var(--surface); padding-block: 2rem 1.5rem; font-size: .82rem; color: var(--muted); }
.site-footer a { transition: color .15s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ink); }
/* Brand block left, link groups right; stacks on narrow screens. */
.footer-top { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; }
.footer-tagline { margin: 1rem 0 0; max-width: 22rem; }
.footer-links { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.footer-group h3 {
font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
font-weight: 600; color: var(--ink);
}
.footer-group ul { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.footer-bottom {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.footer-social { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; order: 2; }
.footer-social svg { width: 1.25rem; height: 1.25rem; display: block; }
.footer-copy { margin: 0; order: 1; }
/* Trademark notices: full width under the copyright row, quieter than the links above it. */
.footer-legal { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.footer-legal p { margin: 0; max-width: 62rem; font-size: .72rem; line-height: 1.6; color: var(--muted); }
@media (min-width: 64rem) {
.footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; }
}
/* ---------- Interior pages (Identity, Privacy, Error) ---------- */
.page { max-width: var(--shell); margin-inline: auto; padding: 3rem var(--gutter) 5rem; }
.page h1, .page h2 { color: var(--ink); }
/* The prose-link convention. Card links (a whole roster card) are excluded rather than
overridden afterwards - an override would have to out-specify this selector forever. */
.page:not(.shop-page):not(.admin-page):not(.me-page):not(.watch-page):not(.about-page) a:not(.btn):not(.driver-card) { color: var(--blue); text-decoration: underline; }
.page .form-control, .page .form-select { background-color: var(--surface); border-color: var(--border); color: var(--ink); }
.page .form-control:focus, .page .form-select:focus { background-color: var(--surface); border-color: var(--blue); color: var(--ink); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--blue) 25%, transparent); }
.page .btn-primary { background-color: var(--red); border-color: var(--red); }
.page .btn-primary:hover, .page .btn-primary:focus { background-color: color-mix(in srgb, var(--red) 85%, #000); border-color: color-mix(in srgb, var(--red) 85%, #000); }
/* ---------- Theme-swapped logos (light vs dark artwork) ---------- */
.logo-light, .logo-dark { display: block; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .logo-light { display: none; }
:root:not([data-theme="light"]) .logo-dark { display: block; }
}