/* ═══════════════════════════════════════════════════════════════════ MABEL — shared design system · "ISSUE Nº 01" NYC Art Deco × golden-age comic book. Aged newsprint, Gotham-navy night, printed vermillion, deco brass. Limelight (marquee display) · Bangers (action lettering) · Archivo (body) · Space Mono (captions, figures, code). Used by index.html + all subsystem pages. ═══════════════════════════════════════════════════════════════════ */ /* ─── Reset & root ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { overflow-x: hidden; } :root { /* aged comic newsprint */ --bone: #F4EAD2; --paper: #ECDFBC; --paper-2: #E0D0A6; --panel: #FDF6E2; /* the white of a comic panel */ /* Gotham night */ --ink: #151820; --ink-soft: #2A2E3A; --ash: #6D6551; --ash-light: #A99F87; /* ── printed colour ────────────────────────────────────────────────── THREE voices, and every element on the site picks one of them: --hi the HIGHLIGHT. A warm comic red. Primary buttons, live links, accents, the letter that starts a lede. It replaced an apple orange; a warmer red sits better against the newsprint and reads as ink rather than as a highlighter. --pop the SHOUT. Saturated cab yellow, and there is at most one of these in view — the BUILD ONE NOW! star. If two things shout, neither does. --rust the DEEP voice. Bursts, seals, error states, the hover of --hi. Everything else is support: --yellow narrates (step cards, panel notes), --blue and --green label, --gold is deco brass on dark sections. Full guidance: STYLE.md. */ --hi: #E4442A; /* warm comic red — THE highlight */ --hi-deep: #B92E17; /* its hover / its shadow */ --pop: #FFCE0A; /* saturated cab yellow — the one thing that shouts */ --pop-deep: #E0A800; /* `--orange` is kept as an alias so nothing has to be renamed in one pass; new code should say --hi. */ --orange: #E4442A; --orange-dim: #B92E17; --yellow: #F2C94C; /* NYC taxi yellow — narration, step cards */ --nyc: #FFCE0A; /* alias of --pop */ --rust: #C6301A; /* vermillion — the LOUD voice: bursts, seals */ --rust-dim: #93220F; --clay: #8B5A3C; --gold: #D9A13F; /* deco brass */ --gold-deep: #B77E1E; --blue: #23577E; /* process blue */ --green: #2E7D4F; /* pub tag green, tuned to print */ --font-display: 'Limelight', 'Arial Narrow', 'Impact', sans-serif; --font-comic: 'Bangers', 'Arial Black', 'Impact', sans-serif; --font-head: 'Jost', -apple-system, 'Helvetica Neue', sans-serif; --font-sans: 'Jost', -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'Space Mono', 'SFMono-Regular', Menlo, monospace; --max: 1320px; --max-narrow: 920px; --gutter: clamp(20px, 4vw, 56px); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — snap */ /* Comic-panel recipe: what used to be liquid glass is now flat print. Solid panel fills, ink line-work, hard offset shadows — every component that consumed the --glass-* tokens re-themes through here. */ --line-w: 2px; --glass-blur: none; --glass-bg: var(--panel); --glass-bg-2: #FFFDF0; /* hover / denser */ --glass-border: rgba(21, 24, 32, 0.85); --glass-hi: inset 0 0 0 0 transparent; --glass-sh: 6px 6px 0 rgba(21, 24, 32, 0.9); /* Dark-surface variant — night panels with brass line-work */ --glass-bg-d: rgba(253, 246, 226, 0.045); --glass-bg-d-2: rgba(253, 246, 226, 0.09); --glass-border-d: rgba(217, 161, 63, 0.5); --glass-hi-d: inset 0 0 0 0 transparent; --glass-sh-d: 6px 6px 0 rgba(0, 0, 0, 0.6); /* Halftone dot screens (comic print texture) */ --dots-ink: radial-gradient(rgba(21,24,32,0.13) 1px, transparent 1.6px); --dots-red: radial-gradient(rgba(198,48,26,0.16) 1px, transparent 1.6px); --dots-gold: radial-gradient(rgba(217,161,63,0.20) 1px, transparent 1.6px); --dots-cream: radial-gradient(rgba(244,234,210,0.10) 1px, transparent 1.6px); } body { background: var(--bone); color: var(--ink); font-family: var(--font-sans); font-weight: 400; font-size: 16.5px; line-height: 1.58; letter-spacing: 0.004em; } ::selection { background: var(--orange); color: #FFF9F0; } img, video { max-width: 100%; display: block; } a { color: inherit; } /* ─── Typography scale — deco marquee display ─────────────────────── */ .display-xl { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 12vw, 190px); line-height: 0.95; letter-spacing: 0.01em; } .display-lg { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 7vw, 104px); line-height: 1.0; letter-spacing: 0.01em; } .display-md { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.06; letter-spacing: 0.01em; } .display-sm { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.14; letter-spacing: 0.01em; } /* Limelight has no italic — inside display type, .italic reads as the marquee's lit-up word instead: upright + vermillion. */ .italic { font-style: italic; } .display-xl .italic, .display-lg .italic, .display-md .italic, .display-sm .italic { font-style: normal; color: var(--orange); } .dark-sec .display-xl .italic, .dark-sec .display-lg .italic, .dark-sec .display-md .italic, .dark-sec .display-sm .italic, .page-hero .display-xl .italic, .page-hero .display-lg .italic, .page-hero .display-md .italic { color: var(--gold); } .accent { color: var(--orange); } /* kickers become action lettering */ .eyebrow { font-family: var(--font-comic); font-size: clamp(15px, 1.3vw, 18px); text-transform: uppercase; letter-spacing: 0.14em; color: var(--orange); font-weight: 400; } .lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-soft); letter-spacing: -0.008em; max-width: 58ch; } .body-lg { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--ink-soft); } .body { font-size: 16px; line-height: 1.72; color: var(--ink-soft); } /* ─── Layout primitives ───────────────────────────────────────────── */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--gutter); } section { position: relative; } .pad-y { padding: clamp(56px, 8vh, 96px) 0; } .pad-y-sm { padding: clamp(40px, 6vh, 68px) 0; } /* deco rule: double line with a center diamond */ .divider { height: 7px; width: 100%; position: relative; background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat; opacity: 0.85; } .divider::after { content: '◆'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-size: 11px; line-height: 1; color: var(--rust); background: inherit; padding: 0 10px; background: var(--bone); } .soft-sec .divider::after { background: var(--paper); } /* night sections: Gotham navy with a faint cream halftone screen and a brass double-rule across the top edge */ .dark-sec { background: var(--ink); color: var(--bone); position: relative; } .dark-sec::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; pointer-events: none; background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--gold), var(--gold)) 0 5px / 100% 1px no-repeat; opacity: 0.75; } .dark-sec::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--dots-cream); background-size: 22px 22px; opacity: 0.28; mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 70%); } .dark-sec > * { position: relative; z-index: 1; } .dark-sec .lede, .dark-sec .body, .dark-sec .body-lg { color: var(--ash-light); } .dark-sec .eyebrow { color: var(--gold); } .soft-sec { background: var(--paper); } /* ─── Progress bar ────────────────────────────────────────────────── */ #progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--orange); z-index: 9999; transition: width 0.1s linear; box-shadow: 0 1px 0 rgba(21,24,32,0.4); } /* ─── Nav — a floating masthead sticker: solid print, ink line, hard shadow ── */ .nav { position: fixed; z-index: 100; top: 12px; left: 50%; transform: translateX(-50%); width: -moz-fit-content; width: fit-content; max-width: min(calc(100% - 20px), var(--max)); padding: 8px 16px; gap: clamp(16px, 3vw, 38px); display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--panel); border: var(--line-w) solid var(--ink); box-shadow: 4px 4px 0 rgba(21, 24, 32, 0.9); transition: box-shadow 0.35s var(--ease-out), top 0.35s var(--ease-out); } .nav.scrolled { top: 8px; box-shadow: 5px 6px 0 rgba(21, 24, 32, 0.9); } .nav-logo { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px; margin-right: clamp(10px, 2vw, 22px); /* keep the wordmark clear of the first nav item */ } /* the marquee bulb */ .nav-logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); border: 1.5px solid var(--ink); display: inline-block; animation: pulse 2.4s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(198,48,26,0.18); } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.65; } } .nav-links { display: flex; gap: 2px; font-size: 13.5px; font-weight: 600; align-items: center; } .nav-links a { color: var(--ink); text-decoration: none; opacity: 0.72; transition: opacity 0.2s ease, background 0.3s var(--ease-out), color 0.2s ease; padding: 7px 12px; border-radius: 8px; white-space: nowrap; } .nav-links a:hover { opacity: 1; background: rgba(21, 24, 32, 0.07); } .nav-links a.on { opacity: 1; background: var(--ink); color: var(--bone); } .nav-links a.ext { color: var(--orange); opacity: 1; font-weight: 700; } .nav-links a.ext:hover { opacity: 1; background: rgba(198, 48, 26, 0.12); } /* hamburger / mobile */ .hbg { display: none; width: 38px; height: 38px; border: none; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; } .hbg span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease-out); } .mob { display: none; position: fixed; top: 8px; left: 10px; right: 10px; z-index: 95; background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 12px; padding: 62px 14px 12px; box-shadow: 6px 6px 0 rgba(21, 24, 32, 0.9); transform: translateY(calc(-100% - 22px)); transition: transform 0.4s var(--ease-out); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mob a { display: block; padding: 8px 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; border-radius: 8px; } .mob a.ext { color: var(--rust); margin-top: 4px; } .mob-grp { display: block; padding: 12px 8px 3px; font-family: var(--font-comic); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 400; } .mob a.sub { padding: 6px 8px 6px 18px; font-size: 13px; font-weight: 400; opacity: 0.82; } /* The bar is 1245 px at full size. Below 1500 px it tightens (smaller type, closer items) so the store dock at the top right has room; below 1400 px it hugs the left edge instead of centring; below 1260 px the burger takes over. scripts/navfit.py measures all three. */ @media (max-width: 1500px) { .nav { gap: 14px; padding: 8px 12px; } .nav-logo { margin-right: 18px; font-size: 20px; } /* Limelight overhangs its box; less than this and the wordmark paints over the first link */ .nav-links { font-size: 13px; gap: 0; } .nav-links a, .nav-grp-btn { padding: 7px 8px; font-size: 13px; } .nav-cta { font-size: 13px; padding: 6px 10px 5px !important; } } @media (max-width: 1400px) { .nav { left: 12px; transform: none; max-width: calc(100% - 140px); } } @media (max-width: 1260px) { .nav { left: 50%; transform: translateX(-50%); max-width: min(calc(100% - 20px), var(--max)); } .nav-links { display: none; } .hbg { display: flex; } .mob { display: block; } /* mobile: full-width bar again so the logo sits left and the burger sits right */ .nav { width: min(calc(100% - 20px), var(--max)); justify-content: space-between; gap: 0; padding: 10px 14px 10px 22px; } } /* ── Dropdown nav groups ── */ .nav-group { position: relative; display: inline-flex; } .nav-grp-btn { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); opacity: 0.72; background: none; border: none; cursor: pointer; padding: 7px 12px; border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.2s ease, background 0.3s var(--ease-out); } .nav-grp-btn:hover { opacity: 1; background: rgba(21,24,32,0.07); } .nav-group.on .nav-grp-btn { opacity: 1; background: var(--ink); color: var(--bone); } .nav-caret { font-size: 9px; opacity: 0.7; transition: transform 0.25s var(--ease-out); } .nav-group:hover .nav-caret, .nav-group.open .nav-caret { transform: rotate(180deg); } .nav-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 218px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 rgba(21,24,32,0.9); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.22s var(--ease-out); z-index: 200; } .nav-group:hover .nav-menu, .nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-menu a { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); opacity: 0.85; white-space: nowrap; text-decoration: none; transition: opacity 0.15s, background 0.15s; } .nav-menu a:hover { opacity: 1; background: rgba(21,24,32,0.07); } .nav-menu a.on { opacity: 1; background: rgba(198,48,26,0.12); color: var(--rust); } /* invisible bridge so moving from the button to the menu doesn't drop :hover */ .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; } /* ── Left in-section sidebar ── */ .sidenav { display: none; } .sidenav-title { font-family: var(--font-comic); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 400; padding: 2px 12px 12px; } .sidenav a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink); opacity: 0.7; text-decoration: none; transition: opacity 0.15s, background 0.15s; white-space: nowrap; } .sidenav a:hover { opacity: 1; background: rgba(21,24,32,0.06); } .sidenav a.on { opacity: 1; color: var(--rust); background: rgba(198,48,26,0.10); font-weight: 600; } @media (min-width: 1780px) { /* floating index card. Only shown when the viewport leaves a genuinely free left column beside the 1320px content wrap — the old translucent glass card could overlay text; solid print can't. */ .sidenav { display: flex; flex-direction: column; gap: 1px; position: fixed; top: 50%; left: 22px; transform: translateY(-50%); width: 192px; z-index: 95; max-height: calc(100vh - 140px); overflow-y: auto; padding: 14px 10px; background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 rgba(21,24,32,0.9); } } /* ─── Buttons — action lettering, ink line, hard shadow ───────────── */ .btn { font-family: var(--font-comic); font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; padding: 11px 22px 10px; border-radius: 10px; text-decoration: none; position: relative; transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s var(--ease-out); display: inline-flex; align-items: center; gap: 9px; cursor: pointer; border: var(--line-w) solid var(--ink); white-space: nowrap; } .btn:hover { transform: translate(-2px, -2px); } /* primary — vermillion plate */ /* ONE button recipe, three roles. Primary carries the highlight, ghost is the paper itself, and the shout (.nav-build) is the only --pop on a page. Every other button on the site — .cl-btn, .hs-more, .wt-btn, .tl-reset, .hs-arrow — inherits these colours through the tokens rather than naming its own, so "make the buttons consistent" is one edit and not thirty. */ .btn-primary { background: var(--hi); color: #FFF9F0; box-shadow: 4px 4px 0 rgba(21,24,32,0.9); } .btn-primary:hover { background: var(--hi-deep); color: #FFF9F0; box-shadow: 6px 6px 0 rgba(21,24,32,0.9); } /* ghost — paper plate */ .btn-ghost { color: var(--ink); background: var(--panel); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(21,24,32,0.9); } .btn-ghost:hover { background: #FFFDF0; box-shadow: 6px 6px 0 rgba(21,24,32,0.9); } /* on dark backgrounds — brass line-work, gold plate primary */ .dark-sec .btn-primary, .page-hero .btn-primary { background: var(--pop); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,0.85); } .dark-sec .btn-primary:hover, .page-hero .btn-primary:hover { background: var(--hi); color: #FFF6E4; box-shadow: 6px 6px 0 rgba(0,0,0,0.85); } .dark-sec .btn-ghost, .page-hero .btn-ghost { color: var(--bone); background: transparent; border-color: rgba(217,161,63,0.75); box-shadow: 4px 4px 0 rgba(0,0,0,0.85); } .dark-sec .btn-ghost:hover, .page-hero .btn-ghost:hover { background: rgba(253,246,226,0.08); border-color: var(--gold); box-shadow: 6px 6px 0 rgba(0,0,0,0.85); } /* ─── Section header ──────────────────────────────────────────────── */ .sec-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 90px); align-items: end; margin-bottom: clamp(30px, 4.5vh, 52px); } @media (max-width: 880px) { .sec-head { grid-template-columns: 1fr; gap: 22px; } } .sec-head .eyebrow { margin-bottom: 16px; display: block; } .sec-head .title { margin-bottom: 0; } .sec-head-center { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vh, 48px); } .sec-head-center .eyebrow { display: block; margin-bottom: 16px; } /* ─── Hero: home — the Issue Nº 01 cover ──────────────────────────── */ .hero-home { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) clamp(56px, 9vh, 100px); background: linear-gradient(180deg, var(--paper) 0%, var(--bone) 70%); position: relative; overflow: hidden; } /* deco sunburst radiating from behind the wordmark */ .hero-home::before { content: ''; position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 38% 78%, rgba(198,48,26,0.07) 0deg 5deg, transparent 5deg 12deg); mask-image: radial-gradient(ellipse at 38% 78%, black 15%, transparent 62%); -webkit-mask-image: radial-gradient(ellipse at 38% 78%, black 15%, transparent 62%); } /* halftone screen over the burst */ .hero-home::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--dots-ink); background-size: 22px 22px; opacity: 0.4; mask-image: radial-gradient(ellipse at 62% 30%, black 12%, transparent 66%); -webkit-mask-image: radial-gradient(ellipse at 62% 30%, black 12%, transparent 66%); } .hero-home-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; } .hero-eyebrow { display: inline-block; margin-bottom: 22px; } .hero-title { margin-bottom: 26px; text-shadow: 5px 5px 0 rgba(21,24,32,0.12); } .hero-title .line { display: block; } .hero-sub { font-family: var(--font-comic); font-size: clamp(26px, 3.6vw, 52px); line-height: 1.05; color: var(--ink-soft); letter-spacing: 0.03em; } .hero-tag { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-soft); max-width: 52ch; line-height: 1.5; margin-bottom: 14px; } .hero-authors { font-family: var(--font-mono); font-size: 12px; color: var(--ash); letter-spacing: 0.04em; margin-bottom: 32px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* The build CTA gets its own line and its own size: it is the one thing on the home page a reader is meant to DO, and sitting fourth in a row of four equal buttons it read as a footnote to "GitHub". Not --pop, though — the nav starburst is the single --pop on this screen and stays that way. */ .hero-build { margin-top: 14px; } .btn-xl { font-size: 21px; letter-spacing: 0.09em; padding: 17px 34px 15px; border-radius: 13px; border-width: 3px; box-shadow: 6px 6px 0 var(--ink); } .btn-xl:hover { box-shadow: 9px 9px 0 var(--ink); } @media (max-width: 560px) { .btn-xl { font-size: 18px; padding: 14px 24px 12px; } } .hero-coord-row { position: absolute; top: clamp(80px, 12vh, 120px); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; z-index: 2; gap: 24px; } .hero-coord { font-family: var(--font-mono); font-size: 11px; color: var(--ash); letter-spacing: 0.04em; line-height: 1.7; } .hero-coord b { color: var(--ink-soft); font-weight: 700; } .hero-coord.r { text-align: right; } @media (max-width: 600px) { .hero-coord-row { display: none; } } /* ─── Hero: subsystem pages — deco night marquee ──────────────────── */ .page-hero { background: linear-gradient(180deg, #1B2030 0%, var(--ink) 100%); color: var(--bone); padding: clamp(104px, 15vh, 150px) var(--gutter) clamp(44px, 7vh, 72px); position: relative; overflow: hidden; } /* brass sunburst out of the bottom-left, screened with halftone */ .page-hero::before { content: ''; position: absolute; inset: -30% -10%; background: repeating-conic-gradient(from 0deg at 18% 100%, rgba(217,161,63,0.08) 0deg 4deg, transparent 4deg 11deg); mask-image: radial-gradient(ellipse at 18% 100%, black 12%, transparent 58%); -webkit-mask-image: radial-gradient(ellipse at 18% 100%, black 12%, transparent 58%); } .page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--dots-cream); background-size: 20px 20px; opacity: 0.35; mask-image: radial-gradient(ellipse at 78% 20%, black 10%, transparent 62%); -webkit-mask-image: radial-gradient(ellipse at 78% 20%, black 10%, transparent 62%); } .page-hero-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; } .page-hero .eyebrow { color: var(--gold); display: block; margin-bottom: 18px; } .page-hero h1 { color: var(--bone); margin-bottom: 22px; text-shadow: 4px 4px 0 rgba(0,0,0,0.55); } .page-hero .lede { color: var(--ash-light); } .page-hero .crumbs { font-family: var(--font-mono); font-size: 11px; color: var(--ash-light); letter-spacing: 0.1em; margin-bottom: 28px; text-transform: uppercase; } .page-hero .crumbs a { color: var(--ash-light); text-decoration: none; } .page-hero .crumbs a:hover { color: var(--gold); } /* ─── Stats strip ─────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 56px); } @media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } } .stat { border-top: 3px solid var(--ink); padding-top: 20px; position: relative; } .stat::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--ink); opacity: 0.8; } .dark-sec .stat { border-top-color: var(--gold); } .dark-sec .stat::before { background: var(--gold); } .stat-num { font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 84px); line-height: 1; letter-spacing: 0.01em; margin-bottom: 12px; display: flex; align-items: baseline; color: var(--rust); } .dark-sec .stat-num { color: var(--gold); } .stat-num .unit { font-family: var(--font-comic); font-size: 0.34em; color: var(--ash); margin-left: 8px; letter-spacing: 0.06em; } .dark-sec .stat-num .unit { color: var(--ash-light); } .stat-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ash); line-height: 1.5; } .dark-sec .stat-label { color: var(--ash-light); } /* ─── Contribution grid ───────────────────────────────────────────── */ .contrib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 640px) { .contrib-grid { grid-template-columns: 1fr; } } .contrib-cell { background: var(--glass-bg); border: var(--line-w) solid var(--ink); border-radius: 12px; padding: 22px 20px; box-shadow: var(--glass-sh); transition: background 0.45s var(--ease-out), transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); } .contrib-cell:hover { background: var(--glass-bg-2); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(21,24,32,0.9); } .contrib-cell h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em; margin-bottom: 10px; } .contrib-cell p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; } /* ─── Resource / navigation cards (link to subpages) ──────────────── */ .res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .res-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } } .res-card { background: var(--glass-bg); border: var(--line-w) solid var(--ink); border-radius: 12px; padding: 28px 26px; text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 200px; box-shadow: var(--glass-sh); transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), background 0.3s ease; } .res-card:hover { background: var(--glass-bg-2); box-shadow: 9px 9px 0 rgba(21,24,32,0.9); transform: translate(-3px, -3px); } .res-tag { font-family: var(--font-comic); font-size: 14px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .res-card h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.1; } .res-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; } .res-arrow { font-family: var(--font-comic); font-size: 14px; color: var(--rust); margin-top: 18px; text-transform: uppercase; letter-spacing: 0.1em; transition: transform 0.3s var(--ease-out); } .res-card:hover .res-arrow { transform: translateX(5px); } /* ─── Demo tabs — action lettering with a brass baseline ──────────── */ .tab-bar { display: flex; gap: 2px; border-bottom: 2px solid rgba(217,161,63,0.5); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { flex-shrink: 0; padding: 11px 18px 9px; font-family: var(--font-comic); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,234,210,0.45); background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color 0.2s, border-color 0.2s; white-space: nowrap; } .tab-btn.on { color: var(--gold); border-bottom-color: var(--gold); } /* light variant */ .tab-bar.light { border-bottom-color: rgba(21,24,32,0.4); } .tab-bar.light .tab-btn { color: var(--ash); } .tab-bar.light .tab-btn.on { color: var(--orange); border-bottom-color: var(--orange); } .tab-panel { display: none; } .tab-panel.on { display: block; animation: tabIn 0.5s var(--ease-out); } @keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .demo-media { border-radius: 12px; overflow: hidden; background: #0B0E15; border: var(--line-w) solid rgba(217,161,63,0.55); box-shadow: 6px 6px 0 rgba(0,0,0,0.6); } .demo-media img, .demo-media video { width: 100%; display: block; max-height: 560px; object-fit: cover; } .demo-caption { font-family: var(--font-mono); font-size: 11px; color: rgba(244,234,210,0.42); margin-top: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } /* ─── Media placeholder (drop real assets later) ──────────────────── */ .ph { width: 100%; height: 100%; position: relative; background: radial-gradient(ellipse at 30% 35%, rgba(198,48,26,0.08), transparent 58%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); } .ph.dark { background: radial-gradient(ellipse at 50% 35%, rgba(217,161,63,0.10), transparent 62%), linear-gradient(180deg, #1B2030 0%, #0B0E15 100%); } .ph::before { content: ''; position: absolute; inset: 0; background-image: var(--dots-ink); background-size: 20px 20px; opacity: 0.6; mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%); } .ph.dark::before { background-image: var(--dots-cream); opacity: 0.5; } .ph-label { position: absolute; bottom: 16px; left: 16px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); padding: 6px 10px; border: 1.5px solid rgba(21,24,32,0.4); border-radius: 4px; background: rgba(244,234,210,0.8); } .ph.dark .ph-label { color: var(--ash-light); border-color: rgba(217,161,63,0.4); background: rgba(11,14,21,0.75); } .media-frame { border-radius: 12px; overflow: hidden; border: var(--line-w) solid var(--ink); position: relative; box-shadow: 6px 6px 0 rgba(21,24,32,0.9); } .media-frame.r-43 { aspect-ratio: 4 / 3; } .media-frame.r-169 { aspect-ratio: 16 / 9; } .media-frame.r-11 { aspect-ratio: 1 / 1; } .media-frame.r-45 { aspect-ratio: 4 / 5; } .media-frame > video, .media-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .media-frame.gui { background: #000; border-color: rgba(244,234,210,0.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7); } .media-frame.gui > img { object-fit: contain; } .gui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; } @media (max-width: 820px) { .gui-grid { grid-template-columns: 1fr; } } /* topic / interface contract table */ .tt { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; } .tt th { text-align: left; color: var(--ash); font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 12px 12px 0; border-bottom: 1px solid rgba(21,24,32,0.12); } .tt td { padding: 12px 12px 12px 0; border-bottom: 1px solid rgba(21,24,32,0.07); color: var(--ink-soft); vertical-align: top; } .tt td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; } .tt .pub { color: var(--green); font-weight: 700; } .tt .sub { color: var(--blue); font-weight: 700; } .dark-sec .tt th { color: var(--ash-light); border-color: rgba(244,234,210,0.16); } .dark-sec .tt td { color: var(--bone); border-color: rgba(244,234,210,0.10); } .dark-sec .tt td:first-child { color: var(--bone); } .dark-sec .tt .pub { color: #43c463; } .dark-sec .tt .sub { color: #6aa6ff; } .dark-sec .bib { background: rgba(8,7,6,0.5); border-color: rgba(244,234,210,0.12); color: var(--bone); box-shadow: none; } .dark-sec .bib-copy { background: rgba(244,234,210,0.14); color: var(--bone); } .dark-sec .bib-copy:hover { background: var(--rust); } /* anchor targets clear the fixed nav */ section[id], .sub-block[id] { scroll-margin-top: 92px; } /* hardware subsystem blocks */ .sub-block { display: grid; grid-template-columns: 230px 1fr; gap: 34px; padding: 34px 0; border-top: 1px solid rgba(21,24,32,0.10); } .sub-block:first-of-type { border-top: none; } .sb-name { font-family: var(--font-display); font-size: 26px; line-height: 1.05; color: var(--ink); letter-spacing: 0.01em; } .sb-stat { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ash); margin-top: 10px; } .sb-body p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; max-width: 64ch; } @media (max-width: 760px) { .sub-block { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; } } /* iPhone app mockups */ .phone-media { display: flex; justify-content: center; align-items: center; } .phone-shot { display: block; width: 100%; max-width: 290px; border-radius: 38px; filter: drop-shadow(0 50px 70px rgba(21,24,32,0.38)); } .phone-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .phone-row .phone-shot { max-width: 208px; } /* real device screen captures (no bezel) */ .app-shot { display: block; width: 100%; max-width: 270px; border-radius: 26px; border: 1px solid rgba(21,24,32,0.10); filter: drop-shadow(0 44px 64px rgba(21,24,32,0.34)); } .app-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; } .app-row .app-shot { max-width: 230px; } /* on-brand figure (its own bg/border baked into the SVG) */ .device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .device-card { display: flex; flex-direction: column; } @media (max-width: 820px) { .device-grid { grid-template-columns: 1fr; } } .arch-fig { display: block; width: 100%; border-radius: 12px; box-shadow: 0 34px 64px -40px rgba(21,24,32,0.30); } .arch-d, .arch-m { border-radius: 12px; overflow: hidden; box-shadow: 0 34px 64px -40px rgba(21,24,32,0.30); } .arch-d svg, .arch-m svg { width: 100%; height: auto; display: block; } .arch-m { display: none; } @media (max-width: 760px) { .arch-d { display: none; } .arch-m { display: block; } } .media-frame.sim-dark { background: #0A0D14; border-color: rgba(244,234,210,0.10); } /* caption chip over a sim clip */ .sim-cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--mono, 'Space Mono', monospace); letter-spacing: 0.02em; color: var(--bone, #F4EAD2); padding: 7px 11px; border-radius: 999px; background: rgba(8,7,6,0.52); border: 1px solid rgba(244,234,210,0.16); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } .sim-cap .dot { width: 6px; height: 6px; border-radius: 50%; background: #43c463; box-shadow: 0 0 0 3px rgba(67,196,99,0.22); } /* ─── Spec pills ──────────────────────────────────────────────────── */ .spec { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; } .spec span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; background: rgba(255,255,255,0.42); -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(21,24,32,0.04); } .dark-sec .spec span, .page-hero .spec span { color: var(--ash-light); border-color: rgba(244,234,210,0.16); background: rgba(244,234,210,0.06); box-shadow: inset 0 1px 0 rgba(244,234,210,0.10); } /* ─── Feature rows (alternating media + copy) ─────────────────────── */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(40px, 6vh, 72px); } .feature:last-child { margin-bottom: 0; } .feature.flip .feature-media { order: 2; } @media (max-width: 880px) { .feature, .feature.flip { grid-template-columns: 1fr; gap: 28px; } .feature.flip .feature-media { order: 0; } } .feature-copy .eyebrow { color: var(--rust); display: block; margin-bottom: 16px; } .dark-sec .feature-copy .eyebrow { color: var(--gold); } .feature-copy h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 42px); line-height: 1.08; letter-spacing: 0.01em; margin-bottom: 18px; } .feature-copy p { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--ink-soft); } .dark-sec .feature-copy p { color: var(--ash-light); } /* ─── Card grid (generic) ─────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } @media (max-width: 880px) { .card-grid { grid-template-columns: 1fr; } } .dark-sec .card-grid { background: transparent; border: 0; } .card { background: var(--glass-bg); border: var(--line-w) solid var(--ink); border-radius: 12px; padding: 24px 22px; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--glass-sh); transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .card:hover { background: var(--glass-bg-2); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(21,24,32,0.9); } .dark-sec .card { background: var(--glass-bg-d); border-color: var(--glass-border-d); box-shadow: var(--glass-sh-d); } .dark-sec .card:hover { background: var(--glass-bg-d-2); box-shadow: 8px 8px 0 rgba(0,0,0,0.6); } .card-num { font-family: var(--font-comic); font-size: 14px; color: var(--orange); letter-spacing: 0.12em; } .dark-sec .card-num { color: var(--gold); } .card h4 { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.12; letter-spacing: -0.02em; margin: 22px 0 10px; } .card p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .dark-sec .card p { color: var(--ash-light); } /* ─── Stack visualization (software) ──────────────────────────────── */ .stack-vis { border: var(--line-w) solid var(--glass-border-d); border-radius: 12px; overflow: hidden; background: var(--glass-bg-d); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi-d), var(--glass-sh-d); } .stack-row { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; padding: 20px 26px; border-bottom: 1px solid rgba(244,234,210,0.08); gap: 22px; transition: background 0.3s ease; } .stack-row:last-child { border-bottom: 0; } .stack-row:hover { background: rgba(244,234,210,0.03); } .stack-layer { font-family: var(--font-comic); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); } .stack-name { font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -0.015em; line-height: 1.15; color: var(--bone); } .stack-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .stack-tags span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash-light); padding: 5px 9px; border: 1px solid rgba(244,234,210,0.18); border-radius: 999px; } @media (max-width: 720px) { .stack-row { grid-template-columns: 1fr; gap: 8px; } .stack-tags { justify-content: flex-start; } } .compute-card { margin-top: 36px; border: var(--line-w) solid var(--glass-border-d); border-radius: 12px; padding: 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; background: var(--glass-bg-d); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi-d), var(--glass-sh-d); } @media (max-width: 720px) { .compute-card { grid-template-columns: 1fr; } } .compute-chip { width: 86px; height: 86px; border-radius: 14px; background: linear-gradient(135deg, #2E3448 0%, #191E2C 100%); position: relative; border: 1px solid rgba(244,234,210,0.15); display: flex; align-items: center; justify-content: center; } .compute-chip-core { font-family: var(--font-mono); font-size: 9px; color: var(--ash-light); letter-spacing: 0.16em; transform: rotate(-90deg); white-space: nowrap; } .compute-title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); letter-spacing: 0.01em; line-height: 1.08; color: var(--gold); } .compute-sub { color: var(--ash-light); margin-top: 6px; font-size: 14px; } .compute-stat { font-family: var(--font-mono); color: var(--ash-light); font-size: 12px; text-align: right; line-height: 1.7; } .compute-stat b { color: var(--gold); font-family: var(--font-display); font-size: 24px; display: block; font-weight: 400; } /* ─── Numbered points list ────────────────────────────────────────── */ .points { border-top: 1px solid rgba(21,24,32,0.12); } .dark-sec .points { border-top-color: rgba(244,234,210,0.14); } .point { display: grid; grid-template-columns: 46px 1fr; gap: 13px; padding: 14px 0; border-bottom: 1px solid rgba(21,24,32,0.12); } .dark-sec .point { border-bottom-color: rgba(244,234,210,0.10); } .point .num { font-family: var(--font-comic); font-size: 15px; color: var(--orange); letter-spacing: 0.1em; padding-top: 2px; } .dark-sec .point .num { color: var(--gold); } .point h5 { font-family: var(--font-head); font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; letter-spacing: -0.015em; margin-bottom: 6px; } .point p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; } .dark-sec .point p { color: var(--ash-light); } /* ─── App screen galleries: horizontal scroll-snap of device screens ─── */ .appgal-wrap { position: relative; } .appgal-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--ash); letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; } .dark-sec .appgal-hint { color: var(--ash-light); } .appgal-hint svg { width: 26px; height: 12px; opacity: 0.7; } .appgal { display: flex; gap: clamp(14px, 1.8vw, 22px); align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* bounded to the .wrap content column — cards align with the captions below and never bleed past the section boundary */ padding: 2px 1px 16px; scroll-padding-left: 1px; } .appgal::-webkit-scrollbar { display: none; } .appgal figure { scroll-snap-align: start; flex: 0 0 auto; margin: 0; } .appgal img { display: block; width: 100%; height: auto; } .appgal figcaption { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; } .appgal figcaption b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px; } .appgal figcaption b .ix { font-family: var(--font-mono); font-size: 11px; color: var(--rust); margin-right: 8px; font-weight: 500; } .dark-sec .appgal figcaption { color: var(--ash-light); } .dark-sec .appgal figcaption b { color: var(--bone); } /* iPhone — portrait phones */ .appgal.ios figure { width: clamp(186px, 23vw, 242px); } .appgal.ios img { border-radius: 30px; filter: drop-shadow(0 34px 54px rgba(21,24,32,0.30)); } .dark-sec .appgal.ios img { filter: drop-shadow(0 34px 58px rgba(0,0,0,0.6)); } /* Vision Pro — landscape glass windows */ .appgal.vp figure { width: clamp(440px, 66vw, 720px); } .appgal.vp img { border-radius: 12px; border: 1px solid rgba(244,234,210,0.10); background: #060505; box-shadow: 0 44px 84px -36px rgba(0,0,0,0.72); } /* right edge fade hints there's more to scroll (sits at the content boundary) */ .appgal-wrap::after { content: ""; position: absolute; top: 2px; bottom: 70px; right: 0; width: clamp(16px, 2.4vw, 38px); z-index: 3; pointer-events: none; background: linear-gradient(270deg, var(--bone), transparent); } .soft-sec .appgal-wrap::after { background: linear-gradient(270deg, var(--paper), transparent); } .dark-sec .appgal-wrap::after { background: linear-gradient(270deg, var(--ink), transparent); } /* ─── Five-tab explainer cards ─────────────────────────────────────── */ .tabcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 960px) { .tabcards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .tabcards { grid-template-columns: 1fr; } } .tabcard { padding: 20px 18px; border-radius: 12px; background: var(--glass-bg); border: var(--line-w) solid var(--glass-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out); } .tabcard:hover { transform: translateY(-3px); background: var(--glass-bg-2); } .tabcard .tc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(198,48,26,0.12); color: var(--rust); margin-bottom: 14px; } .tabcard .tc-ic svg { width: 19px; height: 19px; } .tabcard h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; } .tabcard p { font-size: 13px; line-height: 1.55; color: var(--ink-soft); } .tabcard .tc-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--ash); letter-spacing: 0.1em; float: right; } /* ─── First-principles "control knobs" ─────────────────────────────── */ .knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); } @media (max-width: 860px) { .knobs { grid-template-columns: 1fr; } } .knob { padding: clamp(22px, 2.4vw, 30px); border-radius: 12px; background: var(--glass-bg); border: var(--line-w) solid var(--glass-border); } .knob .knob-k { font-family: var(--font-comic); font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rust); display: block; margin-bottom: 10px; } .knob h4 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 12px; } .knob > p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px; } .knob .chips { display: flex; flex-wrap: wrap; gap: 7px; } .knob .chips span { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(21,24,32,0.05); border: 1px solid rgba(21,24,32,0.1); color: var(--ink); } .knob .chips span.hl { background: rgba(198,48,26,0.12); border-color: rgba(198,48,26,0.3); color: var(--rust); } /* ─── BOM / spec table ────────────────────────────────────────────── */ .spec-table { border-top: 1px solid rgba(21,24,32,0.20); } .spec-table .row { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(21,24,32,0.12); align-items: baseline; transition: padding-left 0.4s var(--ease-out); } .spec-table .row:hover { padding-left: 8px; } .spec-table .num { font-family: var(--font-comic); font-size: 14px; color: var(--rust); } .spec-table .name { font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.015em; line-height: 1.15; } .spec-table .sub { font-size: 13px; color: var(--ash); margin-top: 4px; } .spec-table .val { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 500; white-space: nowrap; } .spec-total { margin-top: 32px; display: flex; align-items: baseline; justify-content: space-between; border-top: 3px solid var(--ink); padding-top: 22px; } .spec-total .label { font-family: var(--font-comic); font-size: 16px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); } .spec-total .big { font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); letter-spacing: 0.01em; line-height: 1; color: var(--orange); } /* ─── Data table ──────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th { text-align: center; padding: 12px 14px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ash); border-bottom: 1px solid rgba(21,24,32,0.2); letter-spacing: 0.1em; text-transform: uppercase; } .data-table th:first-child { text-align: left; } .data-table td { padding: 14px 14px; border-bottom: 1px solid rgba(21,24,32,0.10); text-align: center; color: var(--ink); } .data-table td:first-child { text-align: left; } .data-table tr:last-child td { border-bottom: none; } .data-table tr.best td { background: rgba(198,48,26,0.06); } .data-table tr.best td:first-child { color: var(--rust); font-weight: 600; } .data-table .hi { color: var(--rust); font-weight: 600; } .table-note { font-family: var(--font-mono); font-size: 11px; color: var(--ash); margin-top: 12px; letter-spacing: 0.02em; } /* ─── Build / steps list ──────────────────────────────────────────── */ .steps { counter-reset: step; } .step { display: grid; grid-template-columns: 56px 1fr 1.2fr; gap: clamp(16px, 2.5vw, 30px); padding: clamp(16px, 2.5vh, 26px) 0; border-bottom: 1px solid rgba(21,24,32,0.14); counter-increment: step; align-items: start; } .step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-comic); font-size: 20px; color: var(--orange); letter-spacing: 0.08em; padding-top: 2px; } .step h4 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.9vw, 26px); letter-spacing: -0.02em; line-height: 1.12; } .step .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ash); margin-top: 6px; letter-spacing: 0.06em; } .step p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; } @media (max-width: 720px) { .step { grid-template-columns: 1fr; gap: 12px; } .step::before { padding-top: 0; } } /* ─── BibTeX ──────────────────────────────────────────────────────── */ .bib { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: var(--line-w) solid var(--glass-border); border-radius: 12px; padding: 24px 26px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: var(--ink-soft); position: relative; box-shadow: var(--glass-hi), var(--glass-sh); } .bib pre { white-space: pre-wrap; margin: 0; } @media (max-width: 700px) { .bib { padding: 14px; font-size: 10.5px; line-height: 1.6; } .bib pre { white-space: pre; overflow-x: auto; } .bib-copy { top: 8px; right: 8px; } } .bib-copy { position: absolute; top: 14px; right: 14px; padding: 6px 14px; border-radius: 8px; background: var(--ink); color: var(--bone); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; } .bib-copy:hover { background: var(--rust); } /* ─── 3D model viewer (hardware) ──────────────────────────────────── */ .viewer-3d { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid rgba(21,24,32,0.08); background: radial-gradient(ellipse at 50% 30%, rgba(198,48,26,0.08), transparent 60%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); box-shadow: 0 30px 70px -36px rgba(21,24,32,0.32); } .viewer-3d model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; } .viewer-3d .ph { position: absolute; inset: 0; } .viewer-hint { position: absolute; left: 18px; bottom: 16px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); display: flex; align-items: center; gap: 10px; background: rgba(244,234,210,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 8px 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } .viewer-hint .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 3px rgba(198,48,26,0.18); } .viewer-fs { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(244,234,210,0.55); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: 1px solid rgba(255,255,255,0.5); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px -8px rgba(21,24,32,0.3); transition: transform 0.3s var(--ease-out), background 0.3s ease; } .viewer-fs:hover { transform: scale(1.06); background: rgba(244,234,210,0.78); } .viewer-fs svg { width: 17px; height: 17px; } .viewer-3d:fullscreen { border-radius: 0; aspect-ratio: auto; } .viewer-3d:fullscreen model-viewer { background: var(--bone); } #robotCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } .viewer-loading { transition: opacity 0.6s var(--ease-out); } .viewer-3d.loaded .viewer-loading { opacity: 0; pointer-events: none; } /* wrapper that lets the joint panel overlay on desktop, stack on mobile */ .viewer-wrap { position: relative; } /* ── joint control panel ── */ .jp { position: absolute; top: 14px; right: 14px; z-index: 4; width: clamp(230px, 24vw, 290px); max-height: calc(100% - 28px); display: flex; flex-direction: column; background: rgba(244,234,210,0.62); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid rgba(255,255,255,0.5); border-radius: 12px; box-shadow: var(--glass-hi), 0 18px 44px -22px rgba(21,24,32,0.4); opacity: 0; transform: translateY(-6px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); overflow: hidden; } .jp.ready { opacity: 1; transform: none; } .jp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(21,24,32,0.10); } .jp-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .jp-head-actions { display: flex; align-items: center; gap: 6px; } .jp-reset { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: rgba(21,24,32,0.06); border: 1px solid rgba(21,24,32,0.12); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background 0.2s ease; } .jp-reset:hover { background: var(--rust); color: var(--bone); border-color: var(--rust); } .jp-toggle { width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: var(--ash); font-size: 12px; transition: transform 0.3s var(--ease-out); } .jp.collapsed .jp-toggle { transform: rotate(-90deg); } .jp.collapsed .jp-tabs, .jp.collapsed .jp-list { display: none; } .jp-tabs { display: flex; gap: 4px; padding: 10px 12px 8px; flex-wrap: wrap; } .jp-tab { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); background: rgba(21,24,32,0.05); border: 1px solid transparent; border-radius: 999px; padding: 6px 4px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .jp-tab:hover { color: var(--ink); } .jp-tab.on { color: var(--bone); background: var(--ink); } .jp-list { overflow-y: auto; padding: 4px 14px 14px; } .jp-list::-webkit-scrollbar { width: 7px; } .jp-list::-webkit-scrollbar-thumb { background: rgba(21,24,32,0.18); border-radius: 4px; } .jp-pane { display: none; } .jp-pane.on { display: block; } .jp-row { padding: 9px 0; border-bottom: 1px solid rgba(21,24,32,0.07); } .jp-row:last-child { border-bottom: none; } .jp-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .jp-name { font-size: 11.5px; color: var(--ink-soft); letter-spacing: -0.01em; } .jp-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--rust); } .jp-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: rgba(21,24,32,0.16); outline: none; cursor: pointer; } .jp-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); box-shadow: 0 1px 4px rgba(21,24,32,0.3); cursor: pointer; } .jp-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); cursor: pointer; } /* phones: tall full-width 3D view, joint panel drops BELOW it (no overlay) */ @media (max-width: 760px) { .viewer-wrap { display: flex; flex-direction: column; gap: 12px; } #robot3d { aspect-ratio: auto; height: 60vh; min-height: 360px; } .jp { position: static; top: auto; right: auto; left: auto; bottom: auto; z-index: auto; width: auto; max-height: none; } .jp-list { max-height: 44vh; } .jp-tabs { padding: 12px 12px 8px; } .jp-tab { padding: 11px 4px; font-size: 11px; } .jp-row { padding: 12px 0; } .jp-name { font-size: 13px; } .jp-slider { height: 5px; } .jp-slider::-webkit-slider-thumb { width: 24px; height: 24px; } .jp-slider::-moz-range-thumb { width: 24px; height: 24px; } .jp-reset { padding: 9px 15px; font-size: 11px; } } /* ── WBC interactive viewers (compliance + operating modes) ── */ .wbc-block { position: relative; } .wbc-stage { aspect-ratio: 16 / 10; cursor: grab; } .wbc-stage.grabbing { cursor: grabbing; } .wbc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } .wbc-stage .viewer-loading { position: absolute; inset: 0; } .wbc-stage.loaded .viewer-loading { opacity: 0; pointer-events: none; } .wbc-ctl { position: absolute; top: 14px; right: 14px; z-index: 4; width: clamp(214px, 23vw, 268px); display: flex; flex-direction: column; gap: 12px; padding: 14px; background: rgba(244,234,210,0.64); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid rgba(255,255,255,0.5); border-radius: 12px; box-shadow: var(--glass-hi), 0 18px 44px -22px rgba(21,24,32,0.4); } .wbc-ctl-head { display: flex; align-items: center; justify-content: space-between; } .wbc-ctl-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .wbc-seg { display: flex; gap: 4px; } .wbc-seg button { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ash); background: rgba(21,24,32,0.05); border: 1px solid transparent; border-radius: 999px; padding: 7px 4px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .wbc-seg button:hover { color: var(--ink); } .wbc-seg button.on { color: var(--bone); background: var(--ink); } .wbc-row { padding: 2px 0; } .wbc-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .wbc-row-top .lab { font-size: 11.5px; color: var(--ink-soft); letter-spacing: -0.01em; } .wbc-row-top .out { font-family: var(--font-mono); font-size: 10.5px; color: var(--rust); } .wbc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: rgba(21,24,32,0.16); outline: none; cursor: pointer; } .wbc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); box-shadow: 0 1px 4px rgba(21,24,32,0.3); cursor: pointer; } .wbc-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); cursor: pointer; } .wbc-pad-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; } .wbc-pad { position: relative; width: 132px; height: 132px; border-radius: 12px; background: radial-gradient(circle at 50% 50%, rgba(63,181,107,0.14), transparent 70%), rgba(21,24,32,0.06); border: 1px solid rgba(21,24,32,0.14); touch-action: none; cursor: grab; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); } .wbc-pad::before, .wbc-pad::after { content: ""; position: absolute; background: rgba(21,24,32,0.1); } .wbc-pad::before { left: 50%; top: 8px; bottom: 8px; width: 1px; transform: translateX(-0.5px); } .wbc-pad::after { top: 50%; left: 8px; right: 8px; height: 1px; transform: translateY(-0.5px); } .wbc-pad:active { cursor: grabbing; } .wbc-knob { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: #3FB56B; border: 2px solid var(--bone); box-shadow: 0 2px 10px rgba(21,24,32,0.4), 0 0 0 4px rgba(63,181,107,0.18); pointer-events: none; } .wbc-pad-axes { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ash); } .wbc-pad-axes b { color: #2e9457; font-weight: 500; } .wbc-note { font-size: 11px; line-height: 1.5; color: var(--ash); } .wbc-note .green { color: #2e9457; font-weight: 500; } .wbc-reset { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: rgba(21,24,32,0.06); border: 1px solid rgba(21,24,32,0.12); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background 0.2s ease; } .wbc-reset:hover { background: var(--rust); color: var(--bone); border-color: var(--rust); } /* phones / narrow: give the 3D view a tall full-width stage and drop the controls BELOW it in normal flow — no overlay, big tappable targets. */ @media (max-width: 760px) { .wbc-block { display: flex; flex-direction: column; gap: 12px; } .wbc-stage { aspect-ratio: auto; height: 60vh; min-height: 360px; } .wbc-ctl { position: static; top: auto; right: auto; z-index: auto; width: auto; max-width: none; padding: 16px; gap: 14px; } .wbc-seg { gap: 6px; } .wbc-seg button { padding: 12px 6px; font-size: 11px; } .wbc-row-top .lab { font-size: 13px; } .wbc-row-top .out { font-size: 11.5px; } .wbc-slider { height: 5px; } .wbc-slider::-webkit-slider-thumb { width: 24px; height: 24px; } .wbc-slider::-moz-range-thumb { width: 24px; height: 24px; } .wbc-pad { width: 168px; height: 168px; } .wbc-knob { width: 42px; height: 42px; } .wbc-reset { padding: 9px 16px; font-size: 11px; } .wbc-note { font-size: 12.5px; } /* keep the fullscreen + hint chips clear of the rounded corners */ .wbc-stage .viewer-hint { left: 12px; bottom: 12px; } } /* ── exploded view (scroll-driven) ── */ .explode-scroll { position: relative; height: 320vh; } .explode-stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; } .explode-grid { display: grid; grid-template-columns: 2.4fr 0.95fr; gap: clamp(16px, 3vw, 44px); align-items: center; width: 100%; } .explode-stage { aspect-ratio: auto; height: 82vh; } #explodeCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; } .xp-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; } .xp-label { position: absolute; top: 0; left: 0; pointer-events: auto; opacity: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--ink); background: rgba(244,234,210,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 5px 11px 5px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px -8px rgba(21,24,32,0.35); transition: opacity 0.25s var(--ease-out), background 0.2s ease, color 0.2s ease; } .xp-label .xp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 3px rgba(198,48,26,0.18); flex: none; } .xp-label:hover, .xp-label.on { background: var(--ink); color: var(--bone); } .xp-label.on .xp-dot, .xp-label:hover .xp-dot { background: var(--bone); box-shadow: 0 0 0 3px rgba(244,234,210,0.18); } .xp-progress { position: absolute; left: 18px; bottom: 16px; z-index: 4; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); display: flex; align-items: center; gap: 9px; background: rgba(244,234,210,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 7px 12px; } .xp-progress b { color: var(--rust); font-weight: 500; } .explode-copy .eyebrow { color: var(--rust); display: block; margin-bottom: 14px; } .explode-copy h3 { margin-bottom: 14px; transition: opacity 0.3s var(--ease-out); } .explode-copy p { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--ink-soft); min-height: 5.5em; } @media (max-width: 860px) { .explode-grid { grid-template-columns: 1fr; gap: 16px; } .explode-stage { height: 60vh; } .explode-scroll { height: 300vh; } .explode-copy { order: -1; } .explode-copy p { min-height: 0; } } /* ── AR · view in your room (model-viewer) ── */ .ar-stage model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; } .ar-btn { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; } .ar-stage .viewer-hint { z-index: 2; } @media (max-width: 640px) { .ar-stage { aspect-ratio: 4 / 5; } } /* ── interactive BOM cost donut ── */ .bom-donut { position: relative; width: min(280px, 78%); margin: 0 auto 30px; } .bom-donut-svg { width: 100%; height: auto; display: block; } .bom-seg { transition: opacity 0.25s ease, stroke-width 0.2s ease; } .bom-seg.dim { opacity: 0.26; } .bom-seg.hot { stroke-width: 17; } .bom-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .bom-c-val { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1; color: var(--ink); transition: color 0.2s ease; } .bom-c-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-top: 6px; text-align: center; max-width: 76%; line-height: 1.4; } .spec-table .row.bom-row-hot { padding-left: 8px; background: linear-gradient(90deg, rgba(198,48,26,0.07), transparent 70%); } /* ── swerve velocity playground ── */ .swerve-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; } .swerve-stage { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: grab; touch-action: none; background: radial-gradient(ellipse at 50% 42%, rgba(198,48,26,0.06), transparent 60%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border: 1px solid rgba(21,24,32,0.08); box-shadow: 0 30px 60px -36px rgba(21,24,32,0.28); } .swerve-stage:active { cursor: grabbing; } #swerveCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .swerve-hint { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); display: flex; align-items: center; gap: 9px; background: rgba(244,234,210,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 7px 12px; } .swerve-panel { display: flex; flex-direction: column; gap: 16px; } .swerve-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; } .sw-cell { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid rgba(21,24,32,0.10); } .sw-cell .k { font-size: 12px; color: var(--ink-soft); } .sw-cell .v { font-family: var(--font-mono); font-size: 15px; color: var(--rust); } .swerve-steers { display: flex; gap: 8px; } .sw-mod { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 12px; background: rgba(21,24,32,0.05); } .sw-mod span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ash); } .sw-mod b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink); } @media (max-width: 760px) { .swerve-wrap { grid-template-columns: 1fr; } } /* ─── Connect / links hub ─────────────────────────────────────────── */ .links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 760px) { .links-grid { grid-template-columns: 1fr; } } .link-col { border: var(--line-w) solid var(--glass-border); border-radius: 12px; padding: 30px 28px 12px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), var(--glass-sh); transition: box-shadow 0.4s var(--ease-out), border-color 0.4s ease, background 0.4s ease, transform 0.4s var(--ease-out); } .link-col:hover { background: var(--glass-bg-2); border-color: rgba(255,255,255,0.85); transform: translateY(-3px); } .link-col h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em; margin-bottom: 6px; } .link-col .col-sub { font-size: 13px; color: var(--ash); margin-bottom: 14px; } .link-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(21,24,32,0.10); text-decoration: none; color: var(--ink); transition: padding-left 0.35s var(--ease-out); } .link-row:hover { padding-left: 6px; } .link-row .lr-title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; } .link-row .lr-meta { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ash); margin-top: 3px; } .link-row .lr-arrow { font-family: var(--font-sans); font-size: 16px; color: var(--ash); opacity: 0.6; transition: transform 0.35s var(--ease-out), color 0.3s ease, opacity 0.3s ease; } .link-row:hover .lr-arrow { transform: translate(3px,-3px); color: var(--rust); opacity: 1; } /* ─── Callout / note box — comic narration strip ──────────────────── */ .callout { border-left: 4px solid var(--rust); background: rgba(217,161,63,0.10); padding: 12px 18px 12px 22px; margin: 8px 0; border-radius: 0 8px 8px 0; } .callout p { color: var(--ink-soft); } .dark-sec .callout { background: rgba(217,161,63,0.08); } .dark-sec .callout p { color: var(--ash-light); } /* ─── Footer — the city at night ──────────────────────────────────── */ /* A deco skyline (stepped setbacks + a Chrysler-style spire) is baked in as an inline-SVG border band, so every page gets the skyline with zero HTML changes. */ /* body > footer, NOT a bare `footer`. The bare selector claimed EVERY