/* ────────────────────────────────────────────────────────────────── POWERUS · WEB · v1 Editorial system. Bone-dominant. Ember at <5%. One mark per page. The product earns the noun. ────────────────────────────────────────────────────────────────── */ /* Webfonts are loaded with tags in each page head, not @import: the import was failing intermittently and dropping all mono type to the system fallback. */ /* ─── Tokens ─────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bone: #FDFAF3; --bone-2: #F7F2E6; --bone-3: #EFE9D9; --char: #161616; --char-2: #232321; --graphite: #3A3A38; --stone: #9A938A; --dust: #C2B5A0; --basalt: #2B2925; /* Hairlines */ --hairline: rgba(22, 22, 22, 0.12); --hairline-soft: rgba(22, 22, 22, 0.06); --hairline-inv: rgba(253, 250, 243, 0.16); --hairline-inv-soft: rgba(253, 250, 243, 0.08); /* Text ON imagery (mission tiles, page heroes, video covers). The photo beneath never inverts, so this must NOT flip with the theme — it is deliberately absent from the dark block below. */ --on-media: #FDFAF3; --on-media-2: rgba(253, 250, 243, 0.82); --on-media-3: rgba(253, 250, 243, 0.7); --on-media-4: rgba(253, 250, 243, 0.5); /* Text on an inverse (dark-by-design) surface: footer, closers, CTA blocks. Tokenised so they can flip — in dark mode those surfaces become light. */ --on-inv-hi: #F2ECDF; --on-inv: #D8D5CF; --on-inv-2: #B8B5AF; --on-inv-3: #7A766F; /* Grid substrate */ --grid-fixed: rgba(22, 22, 22, 0.022); --grid: rgba(22, 22, 22, 0.025); --grid-strong: rgba(22, 22, 22, 0.06); --grid-inv: rgba(253, 250, 243, 0.045); /* Ember, the single accent */ --ember: #FF6200; --ember-deep: #E64600; /* Semantic */ --bg: var(--bone); --bg-2: var(--bone-2); --bg-3: var(--bone-3); --bg-inv: var(--char); --fg: var(--char); --fg-2: var(--graphite); --fg-3: var(--stone); --fg-inv: var(--bone); --accent: var(--ember); --border: var(--hairline); --border-soft: var(--hairline-soft); /* Type */ --sans: 'Manrope', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Spacing */ --pad: 64px; --pad-mobile: 24px; --module: 48px; --max: 1480px; --max-narrow: 1240px; /* Z */ --z-util: 60; --z-nav: 50; --z-overlay: 80; } /* ─── Dark theme ────────────────────────────────────────────────────── Set via data-theme="dark" on (see the inline no-flash script in each page head, and the nav toggle in v2-chrome.js). The whole UI flips by redefining --bone (surface) and --char (ink), which the rest of the stylesheet already uses for exactly those two roles; the semantic tokens below them inherit the change. Sections that are dark by design (footer, closers, CTA blocks) therefore become light, which keeps the page's light/dark rhythm instead of flattening it. */ :root[data-theme="dark"] { --bone: #121211 !important; --bone-2: #1A1A18 !important; --bone-3: #232320 !important; --char: #FDFAF3 !important; --char-2: #EFE9D9 !important; --graphite: #BDB7A9 !important; --stone: #8D8779 !important; --dust: #6E685C !important; /* Deliberately still dark: --basalt sits BEHIND imagery (.band, .video-cover, .page-hero-media), so it must stay a dark plate or media flashes light while loading. */ --basalt: #1E1D1B !important; --hairline: rgba(253, 250, 243, 0.14) !important; --hairline-soft: rgba(253, 250, 243, 0.07) !important; --hairline-inv: rgba(18, 18, 17, 0.20) !important; --hairline-inv-soft: rgba(18, 18, 17, 0.10) !important; --grid-fixed: rgba(253, 250, 243, 0.030) !important; --grid: rgba(253, 250, 243, 0.035) !important; --grid-strong: rgba(253, 250, 243, 0.075) !important; --grid-inv: rgba(18, 18, 17, 0.05) !important; /* Inverse surfaces are light here, so their text has to go dark. */ --on-inv-hi: #1A1917 !important; --on-inv: #2A2823 !important; --on-inv-2: #4C473F !important; --on-inv-3: #6E6759 !important; color-scheme: dark; } /* Monochrome brand artwork is charcoal-on-transparent PNG, so it disappears on a dark surface. Inverting the luminance is exact for one-color art and avoids shipping a second set of files. Scoped deliberately — the Blue UAS and NDAA badges are full-color and must not be touched. */ :root[data-theme="dark"] .barnav .brand img, :root[data-theme="dark"] footer.footer .brand img { filter: invert(1) sepia(0.16) saturate(0.55) brightness(1.02); } /* multiply blends product cut-outs into a light page; on a dark surface it erases them. */ :root[data-theme="dark"] .sol-ph img, :root[data-theme="dark"] .sw-thumb img, :root[data-theme="dark"] .rt-img img, :root[data-theme="dark"] .pcard .pmedia img, :root[data-theme="dark"] .fig img, :root[data-theme="dark"] .pdp-shot, :root[data-theme="dark"] .icon img { mix-blend-mode: normal; } /* ─── Reset + base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); overflow-x: hidden; } /* ─── Fixed background grid ────────────────────────────────────────── The grid was painted as a body background-image. A body background scrolls with the document, and background-attachment: fixed — the usual remedy — is ignored by most mobile browsers (notably iOS Safari), so the grid slid with the page there. A position: fixed layer is pinned by every browser. carries the page color so it paints to the canvas, body is transparent, and z-index: -1 puts the grid above that canvas but below all page content. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--grid-fixed) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-fixed) 1px, transparent 1px); background-size: var(--module) var(--module); } body { background: transparent; color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "ss02", "cv11", "tnum"; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: 0; } /* ─── Type system ────────────────────────────────────────────────── */ .h1, h1 { font-family: var(--sans); font-weight: 400; font-size: clamp(56px, 9.6vw, 168px); letter-spacing: -0.05em; line-height: 0.86; text-wrap: balance; margin: 0; } .h2, h2 { font-family: var(--sans); font-weight: 400; font-size: clamp(40px, 5.6vw, 92px); letter-spacing: -0.045em; line-height: 0.98; margin: 0; } .h3, h3 { font-family: var(--sans); font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1.05; margin: 0; } .h4, h4 { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.012em; line-height: 1.25; margin: 0; } p { margin: 0 0 14px; text-wrap: pretty; max-width: 68ch; } .lede { font-family: var(--sans); font-weight: 400; font-size: clamp(20px, 1.5vw, 26px); line-height: 1.36; letter-spacing: -0.015em; color: var(--fg-2); text-wrap: pretty; max-width: 56ch; } .mono { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); font-feature-settings: "tnum"; } .mono.sm { font-size: 10px; letter-spacing: 0.24em; } .mono.md { font-size: 12px; letter-spacing: 0.18em; } .mono.lg { font-size: 13px; letter-spacing: 0.16em; } .label { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); } .eyebrow { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); display: inline-flex; align-items: center; gap: 8px; } .eyebrow .bracket { color: var(--fg-3); } .eyebrow .dot { width: 5px; height: 5px; background: var(--ember); border-radius: 50%; display: inline-block; } .em, .accent { color: var(--accent); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } /* ─── Layout ─────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .wrap.narrow { max-width: var(--max-narrow); } .gridbg { position: relative; } .gridbg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: var(--module) var(--module); background-position: 0 0; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0.4)); } .gridbg.strong::before { background-image: linear-gradient(to right, var(--grid-strong) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-strong) 1px, transparent 1px); } .gridbg > * { position: relative; z-index: 1; } /* Inverse surface */ .inverse { background: var(--char); color: var(--bone); --fg: var(--bone); --fg-2: var(--on-inv-2); --fg-3: var(--on-inv-3); --border: var(--hairline-inv); --border-soft: var(--hairline-inv-soft); --grid: var(--grid-inv); --bg: var(--char); } /* ─── Utility bar (top) ──────────────────────────────────────────── */ .util { background: var(--char); color: var(--bone); height: 30px; display: flex; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; position: relative; z-index: var(--z-util); overflow: hidden; } .util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .util .l, .util .r { display: flex; gap: 24px; align-items: center; color: var(--stone); } .util .r { color: var(--dust); } .util b { color: var(--bone); font-weight: 500; } .util .live::before { content: ""; width: 5px; height: 5px; background: var(--ember); border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; animation: pulse 2.4s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Live ticker for util bar */ .tickerwrap { overflow: hidden; flex: 1; max-width: 540px; mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); } .ticker { display: flex; gap: 48px; white-space: nowrap; animation: tick 48s linear infinite; color: var(--dust); } .ticker span { display: inline-flex; gap: 8px; align-items: center; } .ticker span b { color: var(--bone); } .ticker span .em { color: var(--ember); } @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── Nav ────────────────────────────────────────────────────────── */ .nav { background: var(--bone); height: 72px; position: sticky; top: 0; z-index: var(--z-nav); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } .nav .wrap { display: flex; align-items: center; height: 100%; gap: 48px; } .nav .brand { display: flex; align-items: center; gap: 10px; } .nav .brand img { height: 22px; width: auto; } .nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 36px; flex: 1; } .nav ul a { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); padding: 28px 0; display: inline-flex; align-items: center; gap: 6px; position: relative; transition: color 120ms ease; } .nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; } .nav ul a:hover::after, .nav ul a.current::after { transform: scaleX(1); } .nav ul a.current { color: var(--fg); } .nav .right { display: flex; align-items: center; gap: 16px; } .nav .right .meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); } .nav .cta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); background: var(--char); padding: 12px 18px; display: inline-flex; align-items: center; gap: 10px; transition: background 120ms ease; } .nav .cta::after { content: "→"; font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: 0; } .nav .cta:hover { background: var(--ember); } /* Mega menu (Solutions) */ .nav li.has-mega { position: static; } .nav li.has-mega > a .caret { display: inline-block; font-size: 9px; margin-left: 4px; opacity: 0.55; transform: translateY(-1px); transition: transform 200ms ease, opacity 200ms ease; } .nav li.has-mega:hover > a .caret, .nav li.has-mega.open > a .caret { opacity: 1; transform: translateY(-1px) rotate(-180deg); } .nav .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bone); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: 0 32px 80px -40px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 200ms ease, transform 200ms ease; z-index: 60; } .nav li.has-mega:hover .mega, .nav li.has-mega:focus-within .mega, .nav li.has-mega.open .mega { opacity: 1; pointer-events: auto; transform: translateY(0); } .mega-inner { max-width: var(--max); margin: 0 auto; padding: 36px var(--pad) 32px; display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: stretch; } .mega-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; } .mega-col h5 { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .mega-link { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--fg); gap: 8px; position: relative; } .mega-link .label { position: relative; display: inline-block; } .mega-link .label::after { content: ""; position: absolute; top: 0.4em; bottom: 0.36em; left: 0; right: 0; background: var(--char); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 130ms steps(5, end); } .mega-link:hover .label::after { transform: scaleX(1); transition: transform 180ms steps(6, end); } .mega-link .meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .mega-link.em { color: var(--ember); } .mega-link.em::before { content: ""; position: absolute; left: -10px; top: 12px; width: 4px; height: 4px; background: var(--ember); border-radius: 50%; } .mega-feature { display: flex; flex-direction: column; gap: 16px; padding-left: 32px; border-left: 1px solid var(--border-soft); } .mega-feature-img { position: relative; background: var(--basalt); aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; } .mega-feature-img::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 18px, rgba(253,250,243,0.06) 18px, rgba(253,250,243,0.06) 19px ); } .mega-feature-img img { position: relative; z-index: 1; max-width: 84%; max-height: 80%; object-fit: contain; transition: opacity 180ms ease; } .mega-feature-reticle { position: absolute; inset: 10px; pointer-events: none; } .mega-feature-reticle::before, .mega-feature-reticle::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid rgba(253,250,243,0.55); } .mega-feature-reticle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; } .mega-feature-reticle::after { bottom: 0; right: 0; border-left: 0; border-top: 0; } .mega-feature-coords { position: absolute; font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(253,250,243,0.7); z-index: 2; } .mega-feature-coords.tl { top: 16px; left: 16px; } .mega-feature-coords.br { bottom: 16px; right: 16px; } .mega-feature-meta { display: flex; flex-direction: column; gap: 6px; } .mega-feature-meta .mega-feature-eye { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); } .mega-feature-meta h4 { font-family: var(--sans); font-weight: 400; font-size: 24px; letter-spacing: -0.025em; line-height: 1.0; margin: 0; color: var(--fg); } .mega-feature-meta h4 .em { color: var(--ember); } .mega-feature-meta p { font-size: 13px; color: var(--fg-2); margin: 0 0 4px; } .mega-feature-meta .mega-feature-link { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); border-bottom: 1px solid var(--fg); padding-bottom: 2px; align-self: flex-start; } /* Backdrop scrim when mega is open (subtle) */ .nav li.has-mega:hover ~ * { /* no-op */ } @media (max-width: 1100px) { .mega-inner { grid-template-columns: 1fr; gap: 24px; } .mega-feature { padding: 0; border: 0; } .mega-cols { grid-template-columns: repeat(3, 1fr); } .nav .mega { position: fixed; left: 0; right: 0; top: 72px; max-height: calc(100vh - 102px); overflow-y: auto; } } /* ─── Flyout nav (v2): mega (Solutions/Missions) + dropdowns (Media/Company) ─── */ .barnav .links { position: relative; } .navitem { position: relative; display: inline-flex; align-items: center; } .navitem > a { display: inline-flex; align-items: center; gap: 7px; color: var(--char); text-decoration: none; transition: color 140ms ease; } .navitem > a:hover { color: var(--ember); } .navitem .caret { font-size: 9px; color: var(--fg-3); transition: transform 240ms cubic-bezier(.16,1,.3,1), color 160ms ease; } .navitem.has-flyout:hover .caret { transform: rotate(180deg); color: var(--ember); } .flyout { position: fixed; z-index: 1002; top: var(--nav-h, 72px); background: var(--bone); border-bottom: 1px solid var(--hairline); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 260ms cubic-bezier(.16,1,.3,1), visibility 0s linear 200ms; } /* Only reveal once positionFlyouts() has actually run and written `top` for this open — the plain :hover rule alone shows the panel immediately, racing the JS that sets its position and causing a snap/glitch when the cursor moves quickly from the trigger down into the panel. */ .navitem.has-flyout.flyout-ready:hover .flyout, .navitem.has-flyout.flyout-ready:focus-within .flyout, .navitem.has-flyout.flyout-ready .flyout { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 200ms ease, transform 300ms cubic-bezier(.16,1,.3,1), visibility 0s; } .flyout.mega { left: 0; right: 0; } /* Flyouts are nested inside the nav's mono top-level items, so they reset their own type — a leak here shows up as uppercase mono product links and overlapping mission captions. */ .flyout, .flyout * { text-transform: none; } .flyout { font-family: var(--sans); letter-spacing: normal; } .flyout .mega-col h5, .flyout .mega-miss .ms, .flyout .mega-head span, .flyout .mega-head a { font-family: var(--mono); } /* The `a` needs naming explicitly: the `.flyout *` reset above sets text-transform: none on it, which beats the uppercase inherited from h5. */ .flyout .mega-col h5, .flyout .mega-col h5 a { text-transform: uppercase; letter-spacing: 0.2em; } .flyout .mega-miss .ms { text-transform: uppercase; letter-spacing: 0.14em; } .flyout .mega-head span, .flyout .mega-head a { text-transform: uppercase; letter-spacing: 0.2em; } .flyout.drop { min-width: max-content; border: 1px solid var(--hairline); border-top: 0; } /* minimal / Swiss mega: whitespace + hairlines + type, no imagery. Scoped under .flyout so it can't collide with the legacy chrome.js .mega-* rules. */ .flyout .mega-inner { display: block; max-width: var(--max); margin: 0 auto; padding: clamp(30px,3.4vh,46px) var(--pad) clamp(40px,5vh,64px); } .flyout .mega-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; margin-bottom: clamp(26px,3vh,40px); border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-3); } .flyout .mega-head a { color: var(--char); text-decoration: none; transition: color 140ms; } .flyout .mega-head a:hover { color: var(--ember); } .flyout .mega-cols { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(18px,2vw,44px); } .flyout .mega-col { min-width: 0; } .flyout .mega-col h5 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 16px; padding: 0; border: 0; font-weight: 500; } .flyout .mega-col h5 a { color: inherit; text-decoration: none; transition: color 140ms; } .flyout .mega-col h5 a:hover { color: var(--ember); } /* Shared hover redact: a thin dark bar wipes left-to-right under the label on the same steps() timing as the top-level nav links, instead of an ember color change. Used by mega-panel links, Company, and the CTA button. */ .rdx { position: relative; display: inline-block; } .rdx::after { content: ""; position: absolute; top: 0.4em; bottom: 0.36em; left: 0; right: 0; background: var(--char); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 130ms steps(5, end); } .rdx:hover::after { transform: scaleX(1); transition: transform 180ms steps(6, end); } .flyout .mega-col a.ml { display: block; text-decoration: none; color: var(--char); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; padding: 8px 0; position: relative; } .flyout .mega-col a.ml span.lbl { position: relative; display: inline-block; } .flyout .mega-col a.ml span.lbl::after { content: ""; position: absolute; top: 0.4em; bottom: 0.36em; left: 0; right: 0; background: var(--char); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 130ms steps(5, end); } .flyout .mega-col a.ml:hover span.lbl::after { transform: scaleX(1); transition: transform 180ms steps(6, end); } .flyout .mega-cols.miss { grid-template-columns: repeat(6, minmax(0,1fr)); gap: clamp(18px,2vw,34px); } .flyout .mega-miss { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--char); padding: 0; } .flyout .mega-miss .mm-img { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--basalt); } .flyout .mega-miss .mm-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .flyout .mega-miss .mt { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; position: relative; display: inline-block; } .flyout .mega-miss .mt::after { content: ""; position: absolute; top: 0.4em; bottom: 0.36em; left: 0; right: 0; background: var(--char); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 130ms steps(5, end); } .flyout .mega-miss:hover .mt::after { transform: scaleX(1); transition: transform 180ms steps(6, end); } .flyout .mega-miss .mb { font-family: var(--mono); font-size: 10px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); } .flyout .mega-miss:hover .mb { color: var(--fg-2); } @media (max-width: 1180px) { .flyout .mega-cols.miss { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 26px; } } .drop-inner { padding: 10px 0; display: flex; flex-direction: column; } .drop-inner a { text-decoration: none; color: var(--char); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; padding: 9px 26px 9px 20px; white-space: nowrap; } .drop-inner a span.lbl { position: relative; display: inline-block; } .drop-inner a span.lbl::after { content: ""; position: absolute; top: 0.4em; bottom: 0.36em; left: 0; right: 0; background: var(--char); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 130ms steps(5, end); } .drop-inner a:hover span.lbl::after { transform: scaleX(1); transition: transform 180ms steps(6, end); } @media (max-width: 1180px) { .flyout .mega-cols { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } } @media (max-width: 900px) { .flyout { display: none !important; } .navitem .caret { display: none; } } /* ─── v2 footer (shared, dark, full sitemap) + wrap ─── */ .v2-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .v2-foot { background: var(--char); color: var(--bone); padding: clamp(60px,9vh,108px) 0 36px; } .v2-foot .foot-top { display: grid; grid-template-columns: 1.15fr 3fr; gap: clamp(36px,6vw,96px); } .v2-foot .foot-brand img { height: 26px; width: auto; } .v2-foot .foot-brand p { color: var(--on-inv-2); font-size: 14px; line-height: 1.55; max-width: 30ch; margin: 22px 0 0; } .v2-foot .foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px,3vw,44px); } .v2-foot .foot-col h5 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-inv-3); margin: 0 0 16px; font-weight: 500; } .v2-foot .foot-col a { display: block; color: var(--on-inv); text-decoration: none; font-size: 14px; letter-spacing: -0.005em; padding: 6px 0; transition: color 140ms; } .v2-foot .foot-col a:hover { color: var(--ember); } .v2-foot .foot-legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: clamp(48px,7vh,84px); padding-top: 24px; border-top: 1px solid rgba(253,250,243,0.12); font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-inv-3); } .v2-foot .foot-legal .l { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } .v2-foot .foot-legal .r { display: flex; gap: 24px; align-items: center; } .v2-foot .foot-legal a { color: var(--on-inv-3); text-decoration: none; transition: color 140ms; } .v2-foot .foot-legal a:hover { color: var(--ember); } /* The footer is a dark plate in BOTH schemes, so its text can't use --bone — that token flips to the dark surface color in dark mode. */ /* Compliance line carries a small US flag: the claim is about American manufacture, so the mark belongs with it rather than floating alone. Drawn in currentColor, not flag colors — full color at 18px reads as a sticker against a mono legal line. */ .v2-foot .foot-legal .us-mark { display: inline-flex; align-items: center; gap: 8px; } .v2-foot .foot-legal .us-mark svg { width: 20px; height: auto; display: block; flex: none; color: var(--on-inv-2); } .v2-foot .foot-legal .wm { color: var(--on-inv-hi); letter-spacing: 0.12em; } @media (max-width: 900px) { .v2-foot .foot-top { grid-template-columns: 1fr; gap: 40px; } .v2-foot .foot-cols { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 34px; } } /* Stays two-up on a phone rather than collapsing to one: four stacked lists is a long scroll past a lot of empty gutter. Tighter type and padding buy the room the second column needs. */ @media (max-width: 620px) { .v2-foot .foot-cols { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 30px; } .v2-foot .foot-col h5 { margin-bottom: 10px; } .v2-foot .foot-col a { font-size: 13px; padding: 5px 0; } } /* ─── Footer ─────────────────────────────────────────────────────── */ footer.footer { background: var(--char); color: var(--bone); --fg: var(--bone); --fg-2: var(--on-inv-2); --fg-3: var(--on-inv-3); --border: var(--hairline-inv); padding: 80px 0 40px; position: relative; overflow: hidden; } footer.footer .wrap { position: relative; z-index: 1; } footer.footer .row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 56px; border-bottom: 1px solid var(--hairline-inv); } footer.footer .brand img { height: 26px; width: auto; } footer.footer .brand p { margin-top: 18px; font-size: 14px; max-width: 36ch; color: var(--on-inv-2); } footer.footer h5 { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-inv-3); margin: 0 0 16px; } footer.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } footer.footer ul a { font-size: 13.5px; color: var(--on-inv); letter-spacing: -0.005em; } footer.footer ul a:hover { color: var(--ember); } footer.footer .legal { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-inv-3); } footer.footer .legal .l { display: flex; gap: 28px; } footer.footer .legal .r { display: flex; gap: 28px; align-items: center; } footer.footer .legal a:hover { color: var(--bone); } footer.footer .grid-art { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-inv) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-inv) 1px, transparent 1px); background-size: var(--module) var(--module); mask-image: radial-gradient(circle at 80% 20%, black, transparent 70%); } /* ─── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; background: var(--char); color: var(--bone); transition: background 160ms ease, color 160ms ease, transform 160ms ease; } .btn::after { content: "→"; font-family: var(--sans); font-size: 14px; letter-spacing: 0; } .btn:hover { background: var(--ember); } .btn.outline { background: transparent; color: var(--fg); border: 1px solid var(--fg); } .btn.outline:hover { background: var(--fg); color: var(--bg); } .btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); } .btn.ghost:hover { color: var(--ember); border-color: var(--ember); } .linkout { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--fg); } .linkout::after { content: "→"; font-family: var(--sans); letter-spacing: 0; font-size: 13px; } .linkout:hover { color: var(--ember); } /* ─── Section header ─────────────────────────────────────────────── */ .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 56px; align-items: end; } .section-head .l .eyebrow { margin-bottom: 24px; } .section-head .l h2 { max-width: 18ch; } .section-head .r { padding-bottom: 8px; } .section-head .r p { font-size: 16px; color: var(--fg-2); max-width: 44ch; } /* ─── Media placeholder slot ─────────────────────────────────────── */ .media { position: relative; background: var(--bg-3); overflow: hidden; display: flex; align-items: center; justify-content: center; } .media::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 22px, rgba(22,22,22,0.04) 22px, rgba(22,22,22,0.04) 23px ); } .media .reticle { position: absolute; inset: 16px; pointer-events: none; } .media .reticle::before, .media .reticle::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid rgba(22,22,22,0.5); } .media .reticle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; } .media .reticle::after { bottom: 0; right: 0; border-left: 0; border-top: 0; } .media .reticle-2::before, .media .reticle-2::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid rgba(22,22,22,0.5); } .media .reticle-2 { position: absolute; inset: 16px; pointer-events: none; } .media .reticle-2::before { top: 0; right: 0; border-left: 0; border-bottom: 0; } .media .reticle-2::after { bottom: 0; left: 0; border-right: 0; border-top: 0; } .media .stamp { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(22,22,22,0.55); text-align: center; padding: 12px 16px; background: rgba(253,250,243,0.85); border: 1px solid rgba(22,22,22,0.18); } .media .stamp .dot { display: inline-block; width: 6px; height: 6px; background: var(--ember); border-radius: 50%; vertical-align: middle; margin-right: 8px; } .media .coords { position: absolute; font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; color: rgba(22,22,22,0.55); text-transform: uppercase; } .media .coords.tl { top: 18px; left: 22px; } .media .coords.tr { top: 18px; right: 22px; } .media .coords.bl { bottom: 18px; left: 22px; } .media .coords.br { bottom: 18px; right: 22px; } .media.inv { background: var(--basalt); } /* Product photo: dropped into a media slot. Sized to fit, framed by chrome. */ .media .photo { position: relative; z-index: 1; max-width: 78%; max-height: 82%; width: auto; height: auto; object-fit: contain; /* default placement (center) */ margin: auto; } .media .photo.lg { max-width: 86%; max-height: 92%; } .media .photo.contain-h { max-height: 90%; } .media .photo.center { display: block; } /* When a photo is present, lower the stamp so it stays at the bottom and chip-like */ .media.has-photo .stamp { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); } .media.has-photo { align-items: center; justify-content: center; } .media.inv::before { background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 22px, rgba(253,250,243,0.04) 22px, rgba(253,250,243,0.04) 23px ); } .media.inv .stamp { color: var(--on-media-3); background: rgba(22,22,22,0.65); border-color: rgba(253,250,243,0.18); } .media.inv .coords { color: var(--on-media-4); } .media.inv .reticle::before, .media.inv .reticle::after, .media.inv .reticle-2::before, .media.inv .reticle-2::after { border-color: var(--on-media-4); } /* ─── Cards (system) ─────────────────────────────────────────────── */ .cardgrid { display: grid; gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .cardgrid.cols-3 { grid-template-columns: repeat(3, 1fr); } .cardgrid.cols-2 { grid-template-columns: repeat(2, 1fr); } .cardgrid.cols-4 { grid-template-columns: repeat(4, 1fr); } .cardgrid > .card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 32px; background: transparent; transition: background 200ms ease; position: relative; } .cardgrid > .card:hover { background: var(--bg-2); } .cardgrid > .card .eyebrow { margin-bottom: 28px; display: flex; } .cardgrid > .card h4 { margin: 0 0 12px; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; } .cardgrid > .card p { font-size: 14px; color: var(--fg-2); margin: 0; } .cardgrid > .card .row-meta { display: flex; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fg-3); text-transform: uppercase; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border-soft); } .cardgrid > .card.tall { min-height: 320px; display: flex; flex-direction: column; } .cardgrid > .card.tall .row-meta { margin-top: auto; } /* ─── Stat readout ───────────────────────────────────────────────── */ .stat { border-top: 1px solid var(--border); padding-top: 18px; } .stat .label { display: block; margin-bottom: 12px; color: var(--fg-3); } .stat .v { font-family: var(--sans); font-weight: 400; font-size: clamp(36px, 4vw, 60px); letter-spacing: -0.04em; line-height: 1; color: var(--fg); font-feature-settings: "tnum"; } .stat .u { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-left: 6px; } /* ─── Chips ──────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border: 1px solid var(--border); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); background: var(--bg); } .chip .dot { width: 5px; height: 5px; background: var(--ember); border-radius: 50%; } .chip.solid { background: var(--char); color: var(--bone); border-color: var(--char); } .chip.ember { background: var(--ember); color: var(--bone); border-color: var(--ember); } /* ─── Util ───────────────────────────────────────────────────────── */ .spacer-xl { height: 160px; } .spacer-l { height: 120px; } .spacer-m { height: 80px; } .spacer-s { height: 48px; } .no-wrap { white-space: nowrap; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ─── Inner-page hero ────────────────────────────────────────────── */ .page-hero { padding: 80px 0 0; background: var(--bone); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .page-hero .crumb { display: flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 32px; } .page-hero .crumb a { color: var(--fg-3); } .page-hero .crumb a:hover { color: var(--ember); } .page-hero .crumb .sep { color: var(--fg-3); opacity: 0.5; } .page-hero .crumb .current { color: var(--fg); } .page-hero .ribbon { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 56px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); } .page-hero .ribbon .l, .page-hero .ribbon .r { display: flex; gap: 28px; } .page-hero .ribbon b { color: var(--fg); font-weight: 500; } .page-hero .ribbon .em { color: var(--ember); } .page-hero .body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; align-items: end; padding-bottom: 56px; } .page-hero .body .l .eyebrow { margin-bottom: 32px; } .page-hero .body .l h1 { font-size: clamp(56px, 8vw, 140px); line-height: 0.9; letter-spacing: -0.05em; font-weight: 400; margin: 0; text-wrap: balance; } .page-hero .body .l h1 .em { color: var(--ember); } .page-hero .body .r .lede { max-width: 42ch; } .page-hero .body .r .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .page-hero-media { height: 480px; position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--basalt); } .page-hero-media .media { position: absolute; inset: 0; background: var(--basalt); } .page-hero-media .media::before { background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 28px, rgba(253,250,243,0.04) 28px, rgba(253,250,243,0.04) 29px ); } .page-hero-media .media .stamp { color: var(--on-media-3); background: rgba(22,22,22,0.65); border-color: rgba(253,250,243,0.22); padding: 16px 22px; } .page-hero-media .media .coords { color: var(--on-media-4); } .page-hero-media .media .reticle::before, .page-hero-media .media .reticle::after, .page-hero-media .media .reticle-2::before, .page-hero-media .media .reticle-2::after { border-color: rgba(253,250,243,0.5); } /* ─── Subnav / pill tabs ─────────────────────────────────────────── */ .subnav { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border); background: var(--bone); position: sticky; top: 72px; z-index: 40; overflow-x: auto; } .subnav .wrap { display: flex; align-items: center; gap: 32px; min-height: 56px; } .subnav a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); padding: 18px 0; position: relative; white-space: nowrap; } .subnav a.current { color: var(--fg); } .subnav a.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ember); } .subnav a:hover { color: var(--ember); } .subnav .end { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fg-3); text-transform: uppercase; } /* ─── Spec table ─────────────────────────────────────────────────── */ .spec-table { width: 100%; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 13px; text-transform: uppercase; } .spec-table .row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); padding: 14px 0; align-items: baseline; } .spec-table .label { text-transform: uppercase; letter-spacing: 0.2em; color: var(--fg-3); font-size: 10px; } .spec-table .v { font-family: var(--sans); font-size: 18px; letter-spacing: -0.015em; text-align: right; color: var(--fg); } .spec-table .v .u { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-left: 6px; } /* ─── Section header (alt, single column) ──────────────────────── */ .section-strap { padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); } .section-strap b { color: var(--fg); font-weight: 500; } .section-strap .em { color: var(--ember); } /* ─── Numbered list (axioms etc) ─────────────────────────────────── */ .numbered { border-top: 1px solid var(--border); } .numbered .item { border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 120px 1fr 1.5fr; gap: 32px; padding: 36px 0; align-items: start; } .numbered .item .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fg-3); text-transform: uppercase; } .numbered .item h4 { font-family: var(--sans); font-weight: 400; font-size: 30px; letter-spacing: -0.03em; line-height: 1.05; margin: 0; max-width: 16ch; } .numbered .item p { margin: 0; font-size: 16px; color: var(--fg-2); max-width: 56ch; } .numbered .item:hover { background: var(--bg-2); } /* ─── Form ──────────────────────────────────────────────────────── */ .form .field { margin-bottom: 24px; } .form .field .label { display: block; margin-bottom: 8px; } .form .field input, .form .field textarea, .form .field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 12px 0; font: 400 17px var(--sans); letter-spacing: -0.01em; color: var(--fg); outline: none; transition: border-color 160ms ease; } .form .field input:focus, .form .field textarea:focus, .form .field select:focus { border-bottom-color: var(--ember); } .form .field textarea { min-height: 120px; resize: vertical; } .form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; } @media (max-width: 720px) { .form .row2, .form .row3 { grid-template-columns: 1fr; } } /* ─── Long-form article body ────────────────────────────────────── */ .prose { max-width: 64ch; margin: 0 auto; font-size: 18px; line-height: 1.6; color: var(--fg); } .prose p { margin: 0 0 22px; max-width: none; } .prose h2 { font-size: 36px; letter-spacing: -0.03em; line-height: 1.1; margin: 56px 0 18px; font-weight: 400; } .prose h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; margin: 40px 0 14px; font-weight: 600; } .prose blockquote { border-left: 2px solid var(--ember); padding: 4px 0 4px 28px; margin: 32px 0; font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; color: var(--fg); font-weight: 400; } .prose ul, .prose ol { padding-left: 22px; margin: 18px 0; } .prose li { margin-bottom: 10px; } .prose a { color: var(--ember); border-bottom: 1px solid currentColor; } .prose hr { margin: 56px 0; } .prose code { font-family: var(--mono); font-size: 14px; background: var(--bg-2); padding: 2px 6px; } /* ─── Reveal animation (subtle) ──────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; } [data-reveal].revealed { opacity: 1; transform: none; } /* ─── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 1100px) { :root { --pad: 28px; } .nav ul { gap: 22px; } .nav ul a { font-size: 10px; } .section-head { grid-template-columns: 1fr; gap: 32px; } .cardgrid.cols-3 { grid-template-columns: repeat(2, 1fr); } .cardgrid.cols-4 { grid-template-columns: repeat(2, 1fr); } footer.footer .row { grid-template-columns: 1fr 1fr; } .page-hero .body { grid-template-columns: 1fr; gap: 32px; } .numbered .item { grid-template-columns: 80px 1fr; } .numbered .item p { grid-column: 1 / -1; } } @media (max-width: 720px) { :root { --pad: 20px; } .nav ul { display: none; } .util .tickerwrap { display: none; } .cardgrid.cols-3, .cardgrid.cols-4, .cardgrid.cols-2 { grid-template-columns: 1fr; } footer.footer .row { grid-template-columns: 1fr; } .util .r .stretch-hide { display: none; } } /* Site-wide: no orphaned words on headline breaks */ h1, h2, h3, h4, .dh1, .dh2, .dh3, .pdp-name, .pdp-lede, .sec-head, .hero h1, .page-hero h1, blockquote, figcaption, .lede, .pg-note, .t, .k, .cta, .card h3, .pc-h { text-wrap: balance; } p, li, .d, .body p { text-wrap: pretty; } /* Mono type is always uppercase */ .spectable .k, .spectable .v, .pvar-specs .r .k, .procure-grid .pr .k, .combat-stats .cs .l, .pp-tag, .kick, .chip, .pvar-status, .pvar-price .per, .prod-cta .eyebrow, .prod-cta .meta, .pdp-fam-head .kick, .pdp-creds .cred, .ix, .stat, .dom { text-transform: uppercase; } /* ─── Divided cell rows (site-wide) ────────────────────────────────── Wherever cells are separated by a border rather than a gap, cells after the first need left padding or their text sits on the divider. --cell-pad is the single knob; .divided-row applies it to any new row. */ :root { --cell-pad: clamp(20px,2.4vw,34px); } .divided-row > * { padding-left: var(--cell-pad); padding-right: var(--cell-pad); } .divided-row > *:first-child { padding-left: 0; } .divided-row > *:last-child { padding-right: 0; } /* ─── Line iconography ─────────────────────────────────────────────── Icons were drawn in a 120x150 box at stroke-width 2, then displayed at 82px, so lines landed near 1.35px and read loose and airy. Tighten: render smaller, and pin the stroke to a real pixel weight with non-scaling-stroke so it no longer thins out as the icon scales. */ :root { --icon-stroke: 1.7; } .cap-row .cap-ic svg, .licon svg, .cell .cico svg, .mr-ic svg, .sw-m .ic svg, .sw-thumb svg { stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .cap-row .cap-ic svg *, .licon svg *, .mr-ic svg *, .sw-m .ic svg *, .sw-thumb svg * { vector-effect: non-scaling-stroke; } /* ─── Nav color-scheme toggle ──────────────────────────────────────── Lives here, not v2.css: the homepage links site.css only, and the button is injected into every page's nav by v2-chrome.js. The glyph is a circle with one half filled — the same square-cap 24-grid language as the capability icons — rotating 180° so the filled half tracks the active scheme. */ .barnav-end { justify-self: end; display: inline-flex; align-items: center; gap: 18px; } /* ─── Nav CTA ───────────────────────────────────────────────────────── The right-hand cluster carries Company, the color-scheme toggle, and the one action the nav is asking for. "Start an inquiry" over "Contact": it names what happens next, and matches the closer's wording. */ .navcta { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 12px 20px; border: 1px solid var(--char); color: var(--char); background: transparent; position: relative; overflow: hidden; transition: border-color 180ms ease; } .navcta .lbl { position: relative; display: inline-block; } .navcta .lbl::after { content: ""; position: absolute; top: 0.4em; bottom: 0.36em; left: 0; right: 0; background: var(--char); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 130ms steps(5, end); } .navcta:hover .lbl::after { transform: scaleX(1); transition: transform 180ms steps(6, end); } .navcta:hover { border-color: color-mix(in srgb, var(--char) 40%, transparent); }/* Company sits in the right cluster, so it needs the links' type treatment, which only applied inside .links. */ .barnav-end .navitem > a { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--char); text-decoration: none; position: relative; display: inline-block; padding: 2px 4px; } .barnav-end .navitem > a::after { content: ""; position: absolute; top: 0.4em; bottom: 0.36em; left: 0; right: 0; background: var(--char); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 130ms steps(5, end); } .barnav-end .navitem > a:hover::after { transform: scaleX(1); transition: transform 180ms steps(6, end); } .barnav-end .navitem { position: relative; } /* The stamp reads as a credential under the tagline rather than a second logo: same bone artwork, held back so the lockup above stays dominant. */ /* The stamp file is charcoal artwork and the footer is always a dark plate, so the invert is unconditional — not scoped to dark mode. Landed on bone rather than pure white to match the lockup above it. */ /* Scoped to .foot-brand img.foot-stamp so it beats `.v2-foot .foot-brand img` (which also styles the Powerus lockup above at 26px) — a plain .foot-stamp rule loses on specificity. */ .v2-foot .foot-brand img.foot-stamp { display: block; width: 130px; height: 30px; margin: clamp(22px,3vh,32px) 0 0; opacity: 0.62; filter: invert(1) sepia(0.16) saturate(0.55) brightness(1.02); } @media (max-width: 900px) { .navcta { padding: 10px 15px; font-size: 10px; } } /* ─── Footer color-scheme toggle ────────────────────────────────────── Site-wide display settings belong at the foot of the page, not in the primary nav. On its own row above the legal line: that row is space-between with exactly two children, and adding a third wrapped it. The label names the destination ("Dark mode"), not the current state. */ .v2-foot .foot-utility { display: flex; justify-content: flex-end; padding: clamp(28px,4vh,48px) 0 0; } .v2-foot .foot-theme { appearance: none; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-inv-2); transition: color 160ms ease; } .v2-foot .foot-theme svg { width: 15px; height: 15px; flex: none; transition: transform 420ms cubic-bezier(.16,1,.3,1); } .v2-foot .foot-theme.is-dark svg { transform: rotate(180deg); } .v2-foot .foot-theme:hover { color: var(--on-inv-hi); } @media (max-width: 720px) { .v2-foot .foot-utility { justify-content: flex-start; } } /* ─── Media mega panel ──────────────────────────────────────────────── Two feature cards rather than a text dropdown: each stream leads with its own most recent item, so the menu shows what is there instead of naming it. Same photo-and-caption register as the missions panel. */ .flyout.mega.med .mega-inner { padding-bottom: clamp(26px,3vh,40px); } .flyout .mega-meds { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px,2.4vw,44px); } /* Cards stretch to the tallest of the pair; the image stretches with them so its bottom edge lands on the "View all" baseline. The 16:9 ratio becomes a minimum rather than a fixed box — a wider column just crops a little more. */ .flyout .mega-med { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: clamp(16px,1.8vw,28px); align-items: stretch; text-decoration: none; color: var(--char); transition: color 140ms; } .flyout .mega-med .med-body { display: flex; flex-direction: column; /* Optical: the display face carries internal leading above its cap, so the label reads a touch low against a hard image edge without this. */ margin-top: -3px; } /* Card images are 16:9 across the menu and both index pages, so a hydrated thumbnail crops identically wherever it appears. The img is absolutely positioned so it cannot feed its own intrinsic size back into the box — a 100%-height child inside an aspect-ratio box is a cyclic dependency, and browsers resolve it from the image's natural ratio instead, which is why two different sources rendered at two different heights. */ .flyout .mega-med .med-img { display: block; position: relative; height: 100%; min-height: 0; overflow: hidden; background: var(--basalt); } .flyout .mega-med .med-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 620ms cubic-bezier(.16,1,.3,1); } .flyout .mega-med:hover .med-img img { transform: scale(1.04); } /* Stretches with the card, so its bottom edge lands on the "View all" baseline (see the .med-img sizing rule above). */ .flyout .mega-med .med-img { align-self: stretch; } .flyout .mega-med .med-lbl { font-family: var(--display, var(--sans)); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -0.03em; color: var(--char); } .flyout .mega-med:hover .med-lbl { color: var(--ember); } .flyout .mega-med .med-blurb { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-top: 8px; } /* The latest item sits under a rule, so it reads as a sample of the stream rather than a second link. */ .flyout .mega-med .med-latest { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); display: block; } .flyout .mega-med .med-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-3); } .flyout .mega-med .med-title { display: block; margin-top: 7px; font-size: 14px; line-height: 1.35; color: var(--fg-2); /* Two lines reserved: a 1-line and a 2-line headline would otherwise put the two cards' "View all" at different heights. Clamped to 2 for the same reason. */ min-height: calc(2 * 1.35em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Sits a fixed distance under the copy, not pushed to the card floor — with the title height reserved above, both cards land on the same line and stay tight to the text. */ .flyout .mega-med .med-go { margin-top: 0; padding-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--char); } .flyout .mega-med .med-go span { display: inline-block; margin-left: 6px; transition: transform 240ms cubic-bezier(.16,1,.3,1); } .flyout .mega-med:hover .med-go span { transform: translateX(4px); } @media (max-width: 1180px) { .flyout .mega-med { grid-template-columns: 168px minmax(0,1fr); } } @media (max-width: 940px) { .flyout .mega-meds { grid-template-columns: 1fr; gap: 22px; } } /* ─── Dark-by-design closers and footers stay dark ──────────────────── These sections paint their background from --char, which flips to the light surface in dark mode — so every bottom CTA and footer inverted to bone. They are the page's full stop; flipping them removes the contrast the whole layout ends on. Pinned here (site.css, loaded by every page) rather than in the homepage's inline styles, which is where an earlier pin only reached. */ :root[data-theme="dark"] .prod-cta, :root[data-theme="dark"] .closer, :root[data-theme="dark"] .closer-dark, :root[data-theme="dark"] .closer-band, :root[data-theme="dark"] .xfilter, :root[data-theme="dark"] .util, :root[data-theme="dark"] footer.footer, :root[data-theme="dark"] .v2-foot { background: #121211; color: #FDFAF3; /* Text tokens flip back with the plate, so copy on these surfaces stays light. */ --on-inv-hi: #FDFAF3; --on-inv: #D8D5CF; --on-inv-2: #B8B5AF; --on-inv-3: #8D8779; --hairline-inv: rgba(253, 250, 243, 0.18); --hairline-inv-soft: rgba(253, 250, 243, 0.09); } /* Anything inside them that paints off --bone needs the same treatment. */ :root[data-theme="dark"] .prod-cta .redact-ml, :root[data-theme="dark"] .prod-cta h2, :root[data-theme="dark"] .closer-dark .dh2, :root[data-theme="dark"] .closer .dh2 { color: #FDFAF3; } :root[data-theme="dark"] .prod-cta .redact-ml .rl .rd { background: #FDFAF3; } /* Buttons on a dark plate: outline, bone label, redact-bar hover (no fill). */ :root[data-theme="dark"] .prod-cta .btn-primary, :root[data-theme="dark"] .closer-dark .btn-primary, :root[data-theme="dark"] .closer .btn-primary { background: transparent !important; color: #FDFAF3; border-color: #FDFAF3; } :root[data-theme="dark"] .prod-cta .btn-primary .lbl::after, :root[data-theme="dark"] .closer-dark .btn-primary .lbl::after, :root[data-theme="dark"] .closer .btn-primary .lbl::after, :root[data-theme="dark"] .prod-cta .btn-primary:hover .lbl::after, :root[data-theme="dark"] .closer-dark .btn-primary:hover .lbl::after, :root[data-theme="dark"] .closer .btn-primary:hover .lbl::after { background: #FDFAF3 !important; } :root[data-theme="dark"] .prod-cta .btn-primary:hover, :root[data-theme="dark"] .closer-dark .btn-primary:hover, :root[data-theme="dark"] .closer .btn-primary:hover { background: transparent !important; border-color: #FDFAF3; color: #FDFAF3; } :root[data-theme="dark"] .prod-cta .btn-ghost, :root[data-theme="dark"] .closer-dark .btn-ghost, :root[data-theme="dark"] .closer .btn-ghost { color: #FDFAF3; border-color: rgba(253,250,243,0.42); } /* The footer lockup is already bone artwork, so it must not be inverted — but the APC stamp is charcoal-only and REQUIRES the invert on a dark plate, so exclude it here rather than fighting specificity on its own rule. */ :root[data-theme="dark"] .v2-foot .foot-brand img:not(.foot-stamp), :root[data-theme="dark"] footer.footer .brand img:not(.foot-stamp) { filter: none; } /* ─── Footer social ─────────────────────────────────────────────────── Sits with the brand block, under the tagline and stamp. Glyphs are drawn in the same square-cap 24-grid language as the capability icons rather than pulled from a brand icon set, so they sit with the rest of the system. */ .v2-foot .foot-social { display: flex; align-items: center; gap: 14px; margin: clamp(20px,2.6vh,28px) 0 0; } .v2-foot .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--hairline-inv); color: var(--on-inv); transition: color 160ms ease, border-color 160ms ease; } .v2-foot .foot-social a:hover { color: var(--ember); border-color: var(--ember); } .v2-foot .foot-social svg { width: 17px; height: 17px; display: block; } /* Mobile-menu mission cards sit on a photograph in both color schemes, so their caption can't ride --bone (which flips to the dark surface in dark mode). */ .navmenu .mm-card-cap, .navmenu .mm-card-cap b { color: var(--on-media, #FDFAF3) !important; } .navmenu .mm-card-cap span { color: var(--on-media-2, rgba(253,250,243,0.72)) !important; } /* Compliance footnote above the legal row. The Blue UAS badge, the per-product spec row, and the compliance strip all carry an asterisk; this is the definition they resolve to, and it ships in the shared footer so every page carrying a mention has it. */ .v2-foot .foot-note { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.04em; color: var(--on-inv-3); max-width: 92ch; margin: clamp(26px,3.4vh,44px) 0 0; padding-top: clamp(18px,2.4vh,26px); border-top: 1px solid var(--hairline-inv); } /* Citation footnote for a specific figure on the page (the Guardian threat- reduction assessment). Lives in site.css because it appears on both a product page and a mission page, which load different stylesheets. Held back to secondary weight: it qualifies a claim, it is not a claim itself. */ .claim-note { font-family: var(--mono); font-size: 11px; line-height: 1.55; letter-spacing: 0.04em; color: var(--fg-3); max-width: 88ch; margin: clamp(22px,2.8vh,34px) 0 0; }