/* ========================================================================== Defender Hub — V2 design system Served at /static/ocs/css/v2.css (STATICFILES_DIRS maps "ocs" -> static_assets/ocs). Extracted from the original standalone index_v2.html so every V2 page shares one stylesheet. EVERY colour is a token: dark mode is nothing more than a second set of values for the same names, so a hardcoded hex anywhere in here is a bug that will show up as a light patch on a dark page. Theme is switched by [data-theme] on , set before first paint by the inline script in layouts/v2_base.html. The accent is blue in both themes but not the same blue: light is navy, dark is the Transcal azure taken from the /MANUFACTURE slash in the lockup (navy at azure's brightness would glare on a near-black page, azure at navy's would vanish on white). That is why these tokens are named --accent and not by a hue. Success keeps its own --ok tokens so a confirmation stays green in both themes — a blue "added to your order" reads as information, not as success. ONE GREEN SURFACE REMAINS in light mode, deliberately: the hero banner is a green-graded photograph and --hero-fill is sampled from it. Also note frontend/main.html hardcodes the sub-page strip as #99b9a1, which is NOT a token and will not follow anything here. ========================================================================== */ :root { /* brand — navy. Green is no longer the accent in EITHER theme; it survives only as --ok below. Worth knowing before "restoring" it somewhere: the Transcal lockup is orange, blue and red slashes with no green in it, so the green was never brand-derived. */ --accent: #1e3a5f; --accent-deep: #16304f; --accent-soft: #e8edf4; --accent-on: #fff; /* text on a solid accent fill */ /* Accent for anything sitting ON photography. Pinned to Transcal azure in BOTH themes because the light accent is navy, and navy on a scrimmed photo is a dark shape on a dark ground. */ --on-image: #1e9ad6; /* Label ink for the collection tiles, which carry no scrim. Light mode's plates are pale sage, so the ink is the page's own dark; the halo is a white bloom that lifts it off linework and shadow. */ --tile-ink: #172130; --tile-ink-soft: rgba(31, 39, 51, .74); --tile-halo: 0 1px 10px rgba(255, 255, 255, .8); /* A soft bloom behind the label, not a panel-wide wash: it fades out well before the card edge so the photograph keeps its corners. Sized by measurement — the darkest 12% of the pixels behind the label on the leather plate give 1.9:1 against this ink bare, and 6:1 under this. */ --tile-veil: radial-gradient(ellipse 82% 48% at 50% 50%, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .30) 52%, rgba(255, 255, 255, 0) 100%); /* success. Green in BOTH themes now, and no longer equal to the light accent: a navy confirmation reads as information, the same reason dark keeps it. */ --ok: #5f7a45; --ok-deep: #42552f; --ok-soft: #eef2e9; /* surfaces — cooled off the old green-tinted paper to sit under navy */ --bg: #f2f4f7; --surface: #fff; --surface-sunk: #f2f4f7; /* image wells, code pills */ --line: #e2e6ec; /* text */ --text: #1f2733; --text-strong: #172130; --text-soft: #48525f; --text-dim: #6a7482; --muted: #868f9c; --nav-link: #33404f; --brand-word: #172130; /* top utility bar */ --ink: #16233a; --ink-text: #c6d1e0; --ink-text-dim: #98a6ba; /* hero. --hero-fill is sampled from the left edge of hero-defender.jpg so the flat fill and the image's own padding are indistinguishable. It stays SAGE on purpose: the light banner is still a green-graded photograph, so this must keep matching the artwork, not the navy palette. Change it only when a navy-graded hero-defender.jpg replaces the current one, and resample it from that file rather than picking a colour. */ --hero-fill: #ced8cd; --crumb-sep: #a9b4c2; /* effects */ --shadow-card: 0 .55rem 1.3rem rgba(23,33,48,.10); --shadow-row: 0 .35rem .9rem rgba(23,33,48,.07); --shadow-pop: 0 .6rem 1.6rem rgba(23,33,48,.14); --shadow-float: 0 .8rem 2.2rem rgba(23,33,48,.10); --code-chip-bg: rgba(255,255,255,.94); --sk-base: #e8ebf0; --sk-shine: #f4f6f9; --font-display: "Saira Condensed", "Saira", sans-serif; --font-body: "Saira", system-ui, sans-serif; } [data-theme="dark"] { /* Transcal azure, lifted off the brand hex (#1e9ad6) far enough to hold up against a near-black page. --accent-deep is the LIGHT tint used in the text role; --accent-on is dark because the accent fill itself is bright. */ --accent: #43abe2; --accent-deep: #93d2f1; --accent-soft: #15242f; --accent-on: #08131a; --on-image: #43abe2; /* same lift as --accent: photos here are dark too */ --tile-ink: #fff; /* dark plates, so the tile ink flips with them */ --tile-ink-soft: rgba(255, 255, 255, .76); --tile-halo: 0 1px 12px rgba(4, 8, 12, .9); /* Mirrored, and needed for one plate in particular: the order sheet is bright white exactly where the label sits, giving white-on-white at 2.2:1 bare. 5.4:1 under this. */ --tile-veil: radial-gradient(ellipse 82% 48% at 50% 50%, rgba(8, 12, 16, .44) 0%, rgba(8, 12, 16, .28) 52%, rgba(8, 12, 16, 0) 100%); /* Success stays green on dark — these are the accent values this theme used before it went blue. */ --ok: #86a862; --ok-deep: #b3cd93; --ok-soft: #1f2a19; /* The neutrals are graded blue-black rather than the green-black they were under the green accent, so nothing reads as an olive cast next to azure. This also settles the page against --hero-fill, which was already blue: it is sampled from the dark banner artwork and did not change. */ --bg: #0c1014; --surface: #141a20; --surface-sunk: #1a222a; --line: #28323c; --text: #dfe6ed; --text-strong: #eef3f8; --text-soft: #b2bdc8; --text-dim: #929daa; --muted: #85909c; --nav-link: #c7d2dd; --brand-word: #e9eff5; --ink: #070a0d; --ink-text: #b4bfca; --ink-text-dim: #8a95a1; /* A properly dark-graded banner, not the light one dimmed by a filter: a filter crushes the sky and the vehicle together, where the real grade keeps the headlights and chrome alive. --hero-fill is sampled from THIS image's left edge so the padded region and the CSS fill still match exactly. */ --hero-fill: #0d1518; --crumb-sep: #5a6672; --shadow-card: 0 .55rem 1.3rem rgba(0,0,0,.45); --shadow-row: 0 .35rem .9rem rgba(0,0,0,.38); --shadow-pop: 0 .6rem 1.6rem rgba(0,0,0,.55); --shadow-float: 0 .8rem 2.2rem rgba(0,0,0,.5); --code-chip-bg: rgba(20,26,32,.92); --sk-base: #1b222a; --sk-shine: #262f38; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); } a { color: inherit; text-decoration: none; } /* Sections are full-bleed (backgrounds reach the viewport edges); only the inner content is capped + centred via .container-x. */ .v2-wrap { width: 100%; display: flex; flex-direction: column; min-height: 100vh; } .v2-main { flex: 1; } /* width:100% is load-bearing, not belt-and-braces. .v2-wrap is a column flex container (sticky footer), and `margin-inline: auto` on a FLEX ITEM makes it shrink to its content and centre, rather than fill. Without this every direct-child container renders narrower than the page. */ .container-x { width: 100%; max-width: 1760px; margin-left: auto; margin-right: auto; padding-left: clamp(1rem, 4vw, 3.5rem); padding-right: clamp(1rem, 4vw, 3.5rem); } /* --- utility top bar --------------------------------------------------- */ .v2-topbar { background: var(--ink); color: var(--ink-text); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; } .v2-topbar .container-x { display: flex; justify-content: space-between; align-items: center; height: 36px; } .v2-topbar .dot { color: var(--accent); margin: 0 .5rem; } .v2-topbar .right { color: var(--ink-text-dim); } /* --- navbar ------------------------------------------------------------ */ .v2-nav { background: var(--surface); border-bottom: 1px solid var(--line); } .v2-nav .container-x { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 1rem; } /* Brand lockup, left-aligned. The DESIGN/ENGINEER/MANUFACTURE line is cropped out of the artwork (the topbar already says it), leaving TRANSCAL over DEFENDER HUB. The gap between the two lines is opened up to 139px in the artwork (from the original 69px) rather than done with CSS, since it's one image. Aspect is 4.543:1, so the width below is derived from the height rather than guessed — changing one without the other would squash it. */ .v2-brand { display: block; flex: none; height: 42px; width: 191px; background-image: var(--logo); background-position: left center; background-size: contain; background-repeat: no-repeat; } [data-theme="dark"] .v2-brand { background-image: var(--logo-dark); } @media (max-width: 900px) { .v2-brand { height: 33px; width: 150px; } } .v2-nav-links { display: flex; align-items: center; gap: .4rem; } .v2-nav-links a { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--nav-link); } .v2-nav-links a:hover { background: var(--accent-soft); } .v2-nav-links a.active { background: var(--accent-soft); color: var(--accent-deep); } /* Collections dropdown. The trigger is a