/* ========================================================================== CAPITAL CITY COMPUTING — CRITICAL CSS (above-the-fold) Tallahassee, Florida · 30°26'N 84°16'W -------------------------------------------------------------------------- Sections 00–07b only: fonts, tokens, reset, layout primitives, ticker, header/nav, buttons, hero, page-hero. Loaded RENDER-BLOCKING in on every page so the first screen paints without waiting for the full sheet. Defines the :root design tokens + @font-face used by BOTH files. MAINTENANCE: edit above-the-fold styles HERE (not in style.css). Everything below the hero lives in style.css, which loads async. On change, bump the ?v= query on the in all 7 HTML pages so visitors get the update. ========================================================================== */ /* -------------------------------------------------------------------------- 00 · FONTS (self-hosted, latin subset, variable woff2) Pulled from Google Fonts once and served from /fonts so first paint needs no third-party origin. swap = text shows immediately in the fallback. -------------------------------------------------------------------------- */ @font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/big-shoulders-display.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/jetbrains-mono.woff2') format('woff2'); } /* -------------------------------------------------------------------------- 01 · TOKENS -------------------------------------------------------------------------- */ :root { /* Surfaces — the page is bone (drafting paper) by default */ --ink: #0C0C0A; --ink-2: #1A1A17; --ink-3: #25251F; --bone: #EFE7D6; --bone-2: #E5DCC7; --paper: #F7F1E2; --line: rgba(12, 12, 10, 0.18); --line-soft: rgba(12, 12, 10, 0.10); --line-bone: rgba(239, 231, 214, 0.18); /* The single chromatic accent — safety/highway orange. --hi is tuned so dark-ink text on orange fills clears AA (4.5:1). --hi-text is darker for small orange text on cream to also clear AA. */ --hi: #DC4810; --hi-text: #BA3D0D; --hi-2: #B83C0C; --hi-ink: #2A1306; /* Typography */ --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --f-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Fluid type ramp */ --t-mono: 0.78rem; --t-eyebrow: 0.72rem; --t-body: 1.0625rem; --t-lead: clamp(1.125rem, 1vw + 0.95rem, 1.375rem); --t-h3: clamp(1.5rem, 1.8vw + 1rem, 2rem); --t-h2: clamp(2.25rem, 4vw + 1rem, 4rem); --t-display: clamp(3rem, 8vw + 0.25rem, 7rem); --t-mega: clamp(4rem, 14vw, 14rem); /* Spacing — 8px base */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; /* Layout */ --w-page: 1360px; --gutter: 1.25rem; /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-snap: cubic-bezier(0.7, 0, 0.2, 1); --t-fast: 180ms; --t-med: 280ms; --bg: var(--bone); --fg: var(--ink); --fg-mute: rgba(12, 12, 10, 0.62); --surface: var(--paper); --hover: rgba(18, 16, 10, 0.06); } [data-theme="dark"] { --bg: var(--ink); --fg: var(--bone); --fg-mute: rgba(239, 231, 214, 0.62); --surface: var(--ink-2); --hi-text: var(--hi); /* the "paper" alternate surface must darken in dark mode, otherwise every .section--paper renders light-cream with invisible light text */ --paper: #17150F; --bone-2: #211F16; --line: rgba(239, 231, 214, 0.18); --line-soft: rgba(239, 231, 214, 0.08); --hover: rgba(239, 231, 214, 0.07); } @media (min-width: 48em) { :root { --gutter: 2rem; } } @media (min-width: 64em) { :root { --gutter: 3rem; } } /* 4K / ultra-wide — scale up container, type, and spacing so content doesn't swim in a sea of whitespace on 2560px+ displays. */ @media (min-width: 120em) { :root { --w-page: 1680px; --gutter: 4rem; --t-mono: 0.9rem; --t-eyebrow: 0.82rem; --t-body: 1.1875rem; --t-lead: 1.5rem; --t-h3: 2.25rem; --t-h2: 4.5rem; --t-display: 7.5rem; --t-mega: 15rem; --s-5: 2rem; --s-6: 2.75rem; --s-7: 4rem; --s-8: 5.5rem; --s-9: 8rem; --s-10: 10rem; } .foot { font-size: 1.0625rem; } .foot__bottom { font-size: 0.8rem; } .btn { font-size: 0.875rem; } .btn--lg { font-size: 0.9375rem; } .board__cell::before { font-size: 0.75rem; } .compare { font-size: 1rem; } .compare thead th { font-size: 0.85rem; } .arg__sub { font-size: 1.0625rem; } .guarantee__sig { font-size: 0.9375rem; } .guarantee__sig strong { font-size: 1.0625rem; } .guarantee__sig small { font-size: 0.8rem; } .faq summary { font-size: 1.125rem; } .faq__a { font-size: 1.0625rem; } .section__head { grid-template-columns: 18rem 1fr; } } @media (min-width: 160em) { :root { --w-page: 2000px; --gutter: 5rem; --t-mono: 1rem; --t-eyebrow: 0.9rem; --t-body: 1.3125rem; --t-lead: 1.625rem; --t-h3: 2.5rem; --t-h2: 5rem; --t-display: 8rem; --s-5: 2.25rem; --s-6: 3rem; --s-7: 4.5rem; --s-8: 6rem; --s-9: 9rem; } .foot { font-size: 1.125rem; } .foot__bottom { font-size: 0.85rem; } .btn { font-size: 0.9375rem; } .btn--lg { font-size: 1rem; } .board__cell::before { font-size: 0.8rem; } .arg__sub { font-size: 1.125rem; } .section__head { grid-template-columns: 22rem 1fr; } } /* -------------------------------------------------------------------------- 02 · RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.55; color: var(--fg); background: var(--bg); overflow-x: hidden; font-feature-settings: "ss01" on, "cv11" on; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--hi); color: var(--hi-ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bone); padding: var(--s-3) var(--s-5); font-family: var(--f-mono); font-size: var(--t-mono); z-index: 999; } .skip-link:focus { left: var(--s-4); top: var(--s-4); } :focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; } /* -------------------------------------------------------------------------- 03 · LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); } .rule { border: 0; border-top: 1px solid var(--line); width: 100%; } .rule--bone { border-color: var(--line-bone); } .rule--hi { border-top: 2px solid var(--hi); } .eye { font-family: var(--f-mono); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-mute); display: inline-flex; align-items: center; gap: var(--s-2); } .eye::before { content: ""; width: 12px; height: 1px; background: currentColor; } .eye--hi { color: var(--hi-text); } .eye--hi::before { background: var(--hi-text); } /* Universal section frame */ .section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; } .section--ink { background: var(--ink); color: var(--bone); --fg: var(--bone); --bg: var(--ink); --line: var(--line-bone); --fg-mute: rgba(239, 231, 214, 0.62); --hover: rgba(239, 231, 214, 0.08); /* Orange accent text on this dark bg needs a brighter orange: the cream-tuned --hi-text (#BA3D0D) is only ~3.4:1 here. #F2691E clears AA (>4.5:1). */ --hi-text: #F2691E; } .section--paper { background: var(--paper); } .section__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); grid-template-columns: 1fr; } @media (min-width: 64em) { .section__head { grid-template-columns: 14rem 1fr; gap: var(--s-9); } } .section__index { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); border-top: 2px solid var(--hi); padding-top: var(--s-3); align-self: start; } .section__index strong, .section__index h2 { color: var(--fg); display: block; margin-top: var(--s-1); font-size: inherit; font-weight: 700; line-height: inherit; letter-spacing: inherit; } .section__title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h2); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; max-width: 22ch; } .section__title em { font-style: normal; color: var(--hi); font-family: var(--f-display); } .section__lede { font-size: var(--t-lead); color: var(--fg-mute); max-width: 50ch; margin-top: var(--s-5); line-height: 1.45; } /* -------------------------------------------------------------------------- 04 · TICKER / TOP BAR -------------------------------------------------------------------------- */ .ticker { background: var(--ink); color: var(--bone); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.08em; text-transform: uppercase; padding-block: var(--s-2); border-bottom: 1px solid var(--line-bone); overflow: hidden; position: relative; } .ticker__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; } .ticker__pulse { width: 8px; height: 8px; background: var(--hi); border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.7); animation: pulse 2s var(--ease) infinite; flex-shrink: 0; } .ticker__line { display: inline-flex; align-items: center; gap: var(--s-3); } .ticker__line a { color: var(--hi); border-bottom: 1px solid currentColor; padding-bottom: 1px; } .ticker__line a:hover { color: var(--bone); } .ticker__sep { opacity: 0.4; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(255, 90, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0); } } @media (max-width: 47.99em) { .ticker__line--hide-mobile { display: none; } } /* -------------------------------------------------------------------------- 05 · HEADER / NAV -------------------------------------------------------------------------- */ .head { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } .head__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); } .brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-display); font-weight: 800; font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1; } .brand__mark { width: 32px; height: 32px; flex-shrink: 0; } .brand__mark rect { fill: var(--ink); } [data-theme="dark"] .brand__mark rect { fill: var(--bone); } .brand__mark .hi { fill: var(--hi); } [data-theme="dark"] .brand__mark .hi { fill: var(--hi); } .brand__txt { display: flex; flex-direction: column; line-height: 0.95; } .brand__txt span:first-child { font-size: 0.85em; } .brand__txt span:last-child { font-size: 0.85em; color: var(--hi-text); } .nav { display: none; } .nav__list { display: flex; gap: var(--s-6); list-style: none; } .nav__link { font-family: var(--f-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-mute); padding: var(--s-2) 0; position: relative; transition: color var(--t-fast) var(--ease); } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); } .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--hi); } @media (min-width: 64em) { .nav { display: flex; } } .head__cta { display: flex; align-items: center; gap: var(--s-3); } .btn-tog { width: 40px; height: 40px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .btn-tog:hover { background: var(--ink); color: var(--bone); } [data-theme="dark"] .btn-tog:hover { background: var(--bone); color: var(--ink); } .btn-tog .ic-sun { display: none; } [data-theme="dark"] .btn-tog .ic-sun { display: block; } [data-theme="dark"] .btn-tog .ic-moon { display: none; } .menu-tog { width: 40px; height: 40px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; } .menu-tog span { width: 16px; height: 1.5px; background: currentColor; position: relative; } .menu-tog span::before, .menu-tog span::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; } .menu-tog span::before { top: -5px; } .menu-tog span::after { top: 5px; } @media (min-width: 64em) { .menu-tog { display: none; } } /* Mobile drawer */ .nav-overlay { position: fixed; inset: 0; background: rgba(12, 12, 10, 0.6); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); z-index: 90; } .nav-overlay.is-open { opacity: 1; pointer-events: auto; } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); background: var(--ink); color: var(--bone); --fg: var(--bone); --bg: var(--ink); padding: var(--s-7) var(--s-6) var(--s-6); transform: translateX(100%); transition: transform var(--t-med) var(--ease-snap); z-index: 95; display: flex; flex-direction: column; border-left: 2px solid var(--hi); } .nav-drawer.is-open { transform: translateX(0); } .nav-drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line-bone); font-family: var(--f-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(239, 231, 214, 0.62); } .nav-drawer__close { width: 36px; height: 36px; border: 1px solid var(--line-bone); display: inline-flex; align-items: center; justify-content: center; } .nav-drawer__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); } .nav-drawer__link { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-display); font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-bone); } .nav-drawer__link span:last-child { font-family: var(--f-mono); font-size: 0.65rem; opacity: 0.5; letter-spacing: 0.1em; } .nav-drawer__link:hover, .nav-drawer__link:focus { color: var(--hi); } .nav-drawer__cta { margin-top: auto; padding-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); } @media (min-width: 64em) { .nav-drawer, .nav-overlay { display: none; } } /* -------------------------------------------------------------------------- 06 · BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); font-family: var(--f-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.1em; border: 1.5px solid currentColor; background: transparent; color: var(--fg); transition: all var(--t-fast) var(--ease); position: relative; overflow: hidden; line-height: 1; white-space: nowrap; } .btn::before { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateY(101%); transition: transform var(--t-med) var(--ease-snap); z-index: 0; } .btn:hover::before { transform: translateY(0); } .btn span, .btn svg { position: relative; z-index: 1; transition: color var(--t-med) var(--ease-snap); } .btn:hover span, .btn:hover svg { color: var(--bg); } .btn--hi { background: var(--hi); border-color: var(--hi); color: var(--ink); } .btn--hi::before { background: var(--ink); } .btn--hi:hover span, .btn--hi:hover svg { color: var(--hi); } .btn--ghost-bone { color: var(--bone); border-color: var(--bone); } .btn--ghost-bone:hover span, .btn--ghost-bone:hover svg { color: var(--ink); } .btn--ghost-bone::before { background: var(--bone); } .btn--full { display: flex; justify-content: center; width: 100%; } .btn--lg { padding: var(--s-4) var(--s-6); font-size: 0.8125rem; } .btn .arr { display: inline-block; transition: transform var(--t-med) var(--ease-snap); } .btn:hover .arr { transform: translateX(4px); } /* -------------------------------------------------------------------------- 07 · HERO -------------------------------------------------------------------------- */ .hero { background: var(--ink); color: var(--bone); --fg: var(--bone); --bg: var(--ink); position: relative; overflow: hidden; padding-block: var(--s-6) var(--s-7); border-bottom: 2px solid var(--hi); --line: var(--line-bone); --fg-mute: rgba(239, 231, 214, 0.62); } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-bone) 1px, transparent 1px), linear-gradient(90deg, var(--line-bone) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; pointer-events: none; opacity: 0.5; mask-image: radial-gradient(ellipse at top right, transparent 0%, #000 70%); } .hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); position: relative; z-index: 1; } @media (min-width: 64em) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; } /* Pin each headline line to one row on desktop so the display-font swap can't re-wrap the title and change the hero column height — that re- centered the right column (align-items: center) and caused desktop CLS. The title is authored to fit on one line per phrase in Big Shoulders; any brief fallback overflow is clipped by .hero { overflow: hidden }. */ .hero__title .lh-1, .hero__title .lh-2, .hero__title .lh-3 { white-space: nowrap; } } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-5); font-family: var(--f-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(239, 231, 214, 0.62); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-bone); margin-bottom: var(--s-5); } .hero__meta strong { color: var(--bone); font-weight: 500; } .hero__meta-item { display: inline-flex; align-items: center; gap: var(--s-2); } .hero__meta-dot { width: 6px; height: 6px; background: var(--hi); border-radius: 50%; } .hero__title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-display); line-height: 0.86; letter-spacing: -0.015em; text-transform: uppercase; margin-bottom: var(--s-5); } .hero__title .lh-1 { display: block; } .hero__title .lh-2 { display: block; color: var(--hi); } .hero__title .lh-3 { display: block; } .hero__title em { font-style: normal; color: var(--hi); font-family: var(--f-display); position: relative; } .hero__lede { font-size: var(--t-lead); line-height: 1.45; color: rgba(239, 231, 214, 0.78); max-width: 48ch; margin-bottom: var(--s-5); } .hero__lede strong { color: var(--bone); font-weight: 500; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); } .hero__trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); border-top: 1px solid var(--line-bone); padding-top: var(--s-5); } @media (min-width: 30em) { .hero__trust { grid-template-columns: repeat(4, 1fr); } } .hero__trust-item { font-family: var(--f-mono); font-size: var(--t-mono); line-height: 1.4; } .hero__trust-num { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; color: var(--bone); letter-spacing: -0.01em; margin-bottom: 2px; } .hero__trust-label { color: rgba(239, 231, 214, 0.55); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.65rem; } /* Hero load-race — a live, looping demonstration of the core claim: a Capital City build paints in well under a second while a typical page-builder site is still loading several seconds in. Decorative (aria-hidden); styling only — the timing is driven by a tiny inline rAF loop in index.html that sets the fill widths/labels each frame, respects prefers-reduced-motion, and runs only while the widget is on screen. Replaces the old static sample-site mockup. */ .hero__race { position: relative; z-index: 1; } .race { background: var(--ink-2); border: 1px solid var(--line-bone); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); padding: var(--s-5); } @media (min-width: 48em) { .race { padding: var(--s-6); } } .race__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line-bone); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(239, 231, 214, 0.5); } /* nowrap so a cramped card drops the net label to its own line rather than breaking either phrase mid-word */ .race__head-label { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--bone); white-space: nowrap; } .race__head-net { white-space: nowrap; } .race__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--hi); flex: none; animation: race-rec 1.6s var(--ease) infinite; } @keyframes race-rec { 0% { box-shadow: 0 0 0 0 rgba(220, 72, 16, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(220, 72, 16, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 72, 16, 0); } } .race__lane { margin-bottom: var(--s-5); } .race__lane:last-of-type { margin-bottom: 0; } .race__lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); } .race__lane-name { font-family: var(--f-display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.01em; color: var(--bone); } .race__lane--them .race__lane-name { color: rgba(239, 231, 214, 0.6); } .race__lane-time { font-family: var(--f-mono); font-weight: 600; font-size: 1.4rem; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; } .race__lane--them .race__lane-time { color: rgba(239, 231, 214, 0.78); } .race__track { position: relative; height: 10px; overflow: hidden; background: rgba(239, 231, 214, 0.08); border: 1px solid var(--line-bone); } .race__fill { display: block; height: 100%; width: 0; } /* width set by JS each frame */ .race__fill--us { background: var(--hi); } .race__fill--them { background-color: rgba(239, 231, 214, 0.3); /* moving stripe while it loads — goes solid once the bar finishes */ background-image: repeating-linear-gradient(-45deg, rgba(239, 231, 214, 0) 0, rgba(239, 231, 214, 0) 8px, rgba(239, 231, 214, 0.16) 8px, rgba(239, 231, 214, 0.16) 16px); background-size: 22px 100%; animation: race-stripe 0.55s linear infinite; } @keyframes race-stripe { to { background-position: 22px 0; } } /* The competitor does finish — just several seconds later: stop the stripe. */ .race__lane--them.is-done .race__fill--them { animation: none; background-image: none; background-color: rgba(239, 231, 214, 0.45); } /* When our lane finishes, crisp orange outline marks "complete" */ .race__lane--us.is-done .race__track { box-shadow: 0 0 0 1px var(--hi); } .race__tag { display: inline-block; margin-top: var(--s-3); font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(239, 231, 214, 0.45); } .race__lane--us.is-done .race__tag { color: var(--hi); } .race__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-bone); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.03em; color: rgba(239, 231, 214, 0.5); } /* -------------------------------------------------------------------------- 07b · PAGE HEROES — schematic "window" visuals Two-column hero (copy left, a stylized window right) for the inner pages. Decorative (aria-hidden), pure CSS + mono. Each window mirrors its page: Services = a monthly statement, Method = a code editor, Contact = a terminal log. Reuses the homepage hero grid + window-chrome language. -------------------------------------------------------------------------- */ .page-hero { position: relative; overflow: hidden; } .page-hero::before { /* same faint grid field as the homepage hero */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-bone) 1px, transparent 1px), linear-gradient(90deg, var(--line-bone) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; pointer-events: none; opacity: 0.5; mask-image: radial-gradient(ellipse at top right, transparent 0%, #000 70%); } .page-hero__visual { position: relative; z-index: 1; width: 100%; max-width: 460px; margin-inline: auto; } @media (min-width: 64em) { .page-hero__visual { max-width: 480px; margin-inline: 0; margin-left: auto; } } /* The services hero headline shares .hero__title with the homepage, but its longest line ("priced like a utility.") is far wider than the others. Between 64em and the 120em page-width bump the page caps at --w-page (1360px), so the left grid column is only ~640px while that line renders ~800px at the pinned 7rem size. With the desktop white-space:nowrap rule it overflowed its column and slid UNDER the right-aligned statement card (which paints on top). Size the headline against its OWN column width so the longest line always clears the card, capped by the normal display size so wide screens are unchanged. Keeps nowrap (one line per phrase) → no font-swap re-wrap / CLS regression. */ @media (min-width: 64em) { .page-hero .hero__copy { container-type: inline-size; } .page-hero .hero__title { font-size: min(var(--t-display), 15cqw); } } .page-hero__cap { margin-top: var(--s-4); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(239, 231, 214, 0.5); } /* Shared window shell + title bar */ .schematic { border: 1px solid var(--line-bone); background: var(--ink-2); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); overflow: hidden; font-family: var(--f-mono); } .schematic__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--ink-3); border-bottom: 1px solid var(--line-bone); } .schematic__dots { display: inline-flex; gap: 5px; flex: none; } .schematic__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(239, 231, 214, 0.22); } .schematic__dots i:first-child { background: var(--hi); } .schematic__name { flex: 1; text-align: center; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(239, 231, 214, 0.5); } /* — Services: monthly statement / receipt (light paper body) — */ /* hardcoded light tone so the "paper" stays light in dark mode too */ .schematic--statement .schematic__body { background: #f4f1e9; color: #14130f; padding: var(--s-6) var(--s-6); } .stmt__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6b6b63; padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid rgba(12, 12, 10, 0.14); } .stmt__li { display: flex; align-items: baseline; font-size: 0.82rem; margin-bottom: var(--s-4); color: #2a2a24; } .stmt__li b { font-weight: 600; } .stmt__lead { flex: 1; border-bottom: 1px dotted rgba(12, 12, 10, 0.32); transform: translateY(-3px); margin: 0 8px; } .stmt__li i { font-style: normal; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b63; } .stmt__total { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 2px solid #14130f; } .stmt__total span { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #14130f; } .stmt__total b { font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -0.01em; color: var(--hi-text); } .stmt__foot { margin-top: var(--s-4); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a80; } /* — Method: code editor (dark body, line-number gutter) — */ .schematic--code .schematic__body { padding: 0; } .code { display: grid; grid-template-columns: auto 1fr; font-size: clamp(0.68rem, 2.6vw, 0.76rem); } .code__gutter, .code__src { padding-block: var(--s-5); } .code__gutter { display: flex; flex-direction: column; text-align: right; padding-inline: var(--s-4) var(--s-3); color: rgba(239, 231, 214, 0.28); background: rgba(0, 0, 0, 0.2); border-right: 1px solid var(--line-bone); user-select: none; } .code__src { display: flex; flex-direction: column; padding-inline: var(--s-5); color: rgba(239, 231, 214, 0.85); overflow-x: auto; } .code__gutter span, .code__row { display: block; line-height: 1.85; height: 1.85em; white-space: nowrap; } .code__row--i1 { padding-left: 2ch; } .code .t { color: var(--hi); } /* tags / punctuation */ .code .k { color: rgba(239, 231, 214, 0.55); } /* attribute names */ .code .c { color: rgba(239, 231, 214, 0.38); font-style: italic; } /* comments */ /* — Contact: terminal / reply log (dark body) — */ .schematic--terminal .schematic__body { padding: var(--s-5) var(--s-5) var(--s-6); } .term { display: flex; flex-direction: column; font-size: clamp(0.7rem, 2.7vw, 0.78rem); line-height: 1.95; color: rgba(239, 231, 214, 0.85); } .term__row { display: block; white-space: nowrap; } .term__p { color: var(--hi); } .term .ok { color: var(--hi); } .term__mut { color: rgba(239, 231, 214, 0.42); } .term__cursor { display: inline-block; width: 8px; height: 1em; background: var(--hi); vertical-align: -2px; animation: blink 1.1s steps(1, end) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .term__cursor { animation: none; } }