/* ═══════════════════════════════════════════════════════════════════════════ BRADFORD CARLTON — "THE EVERYDAY AVERAGE OFFICE" · CORE Aesthetic: PRESTIGE ARCADE. A 16-bit world shot like a film, with editorial type that takes itself seriously. Dark, warm, cinematic, loud. SELF-CONTAINED — does not depend on funnel.css or tailwind.css. Those two are the old Cornerstone system and their tokens COLLIDE with these (--pine, --ink, --line and --amber-deep all exist in both with different values). A page loads one system or the other, never both. There is no half-converted state that merely looks slightly off — it looks subtly wrong, which is harder to catch. Load order: office.css every page office-world.css homepage only — rooms, cast, hero, ROI console office-app.css app shells only — /live/, /replay/, /book/, /p/ Type: Playfair Display (poster serif) / JetBrains Mono (HUD) / Outfit (body) Ground: deep warm charcoal-green, lit by amber interior light ── CONTENTS ────────────────────────────────────────────────────────────── TOKENS · BASE · TYPE · SHELL · BUTTONS · NAV · UTILITIES · BANDS FORMS · CARDS & PANELS · PROOF · DOORS · ARCHETYPES (masthead, prose, capture, sales, thank-you, article) · CAMEO · REVEAL · SIGNATURE MOTION MOTION STATES · FOCUS · FOOTER · RESPONSIVE ── HOUSE RULES (they are what keep this file editable by hand) ──────────── · No new !important. The only ones live in office-world.css, quarantined. · No inline style= for anything used twice — promote it to a class here. · Element selectors are permitted ONLY inside .prose and .field. · Resist re-implementing Tailwind. If the utility list below grows past ~15 classes, the answer is a new component, not a new utility. ═══════════════════════════════════════════════════════════════════════════ */ /* ══ TOKENS ════════════════════════════════════════════════════════════════ */ :root { --void: #0B110E; --deep: #101A15; --surface: #16231C; --raised: #1D2E25; --line: rgba(240, 232, 214, 0.14); --line-hot: rgba(232, 163, 61, 0.34); --cream: #F5EFE1; --cream-dim: rgba(245, 239, 225, 0.74); --cream-faint: rgba(245, 239, 225, 0.52); /* His brand DNA, pushed for a dark ground. */ --amber: #F0A93C; --amber-hot: #FFC66B; --amber-deep: #B97318; --pine: #2F7A5C; --ink: #14100B; --ink-soft: #514835; /* Room colours. Only office-world.css consumes these, but they live here so there is exactly one :root block to reason about. */ --wall: #22322A; --wall-deep: #18261F; --floor: #6E4F31; --floor-dark: #4E3722; /* Pixel scale — INTEGER ONLY. Fractional scaling makes 32x48 art shimmer. */ --px: 4; --u: calc(32px * var(--px)); --v: calc(48px * var(--px)); --shell: min(1280px, 92vw); } /* ══ BASE ══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { /* No smooth-scroll: on a very tall page a stray click on a jump link starts a long animated scroll that fights the wheel and reads as the page "sticking". */ scroll-behavior: auto; background: var(--void); } body { margin: 0; background: var(--void); color: var(--cream); font-family: 'Outfit', system-ui, sans-serif; font-size: 17.5px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* on , never an inner wrapper */ } img { max-width: 100%; display: block; } a { color: inherit; } /* ══ TYPE ══════════════════════════════════════════════════════════════════ */ h1, h2, h3, .display { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; margin: 0; text-wrap: balance; } .hud { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .lede { font-size: clamp(1.05rem, 1.55vw, 1.28rem); color: var(--cream-dim); } .dim { color: var(--cream-dim); } /* .faint is 4.48:1 on --raised, a hair under the 4.5:1 AA floor. Use .dim on any raised or surface plate; keep .faint for the --void and --deep grounds. */ .faint { color: var(--cream-faint); } /* The signature headline: poster-scale serif with an amber italic payoff line. Used three times only, so it keeps its force. */ .poster { font-size: clamp(2.7rem, 7.2vw, 6.4rem); } .poster em { font-style: italic; color: var(--amber); } /* Interior pages get the poster voice at a size that does not eat the fold. */ .poster--sm { font-size: clamp(2.1rem, 4.6vw, 3.5rem); } /* ══ SHELL ═════════════════════════════════════════════════════════════════ */ .wrap { width: var(--shell); margin-inline: auto; } section { position: relative; } .chapter { display: inline-flex; align-items: center; gap: .7rem; color: var(--amber); margin-bottom: 1.5rem; } .chapter::before { content: ''; width: 34px; height: 2px; background: var(--amber); } /* ══ BUTTONS — chunky arcade offset, no gradient soup ══════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 1.1rem 2.3rem; border: 0; border-radius: 2px; text-decoration: none; cursor: pointer; transition: transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .16s ease, background .16s ease, color .16s ease; } .btn-primary { background: var(--amber); color: #1A1206; box-shadow: 5px 5px 0 var(--amber-deep); } .btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--amber-deep); } .btn-primary:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--amber-deep); } .btn-ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--line); } .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--amber); color: var(--amber); } .btn-ink { background: var(--ink); color: var(--cream); box-shadow: 5px 5px 0 rgba(0,0,0,.32); } .btn-ink:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(0,0,0,.32); } /* Both hero buttons are filled. The audit is the high-intent ask so it takes the amber; the quiz is low-friction and takes the cream. A ghost outline made the most valuable action look like the optional one. */ .btn-cream { background: var(--cream); color: var(--ink); box-shadow: 5px 5px 0 rgba(0,0,0,.32); } .btn-cream:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(0,0,0,.32); } .btn-block { display: flex; width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } /* ══ NAV ═══════════════════════════════════════════════════════════════════ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 90; padding: .85rem 0; transition: background .3s ease, box-shadow .3s ease; } .nav.stuck { background: rgba(11,17,14,.94); box-shadow: 0 1px 0 var(--line); } .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; } .brand { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.26rem; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; } .brand b { color: var(--amber); } .nav-links { display: flex; align-items: center; gap: 1rem; } .nav-links a.hud { color: var(--cream-dim); text-decoration: none; transition: color .2s; } .nav-links a.hud:hover { color: var(--amber); } .nav-links a.hud[aria-current="page"] { color: var(--amber); } @media (max-width: 1000px) { .hide-sm { display: none !important; } } /* WCAG 2.2.2 (Level A) wants an on-page mechanism to stop motion running >5s alongside content. prefers-reduced-motion alone is not sufficient. Site-wide, not homepage-only. The state it sets IS site-wide — bc-office.js writes html[data-office] and persists it to localStorage — so a visitor who turned motion off on the homepage stays off everywhere and must be able to turn it back on from wherever they are. Keeping it everywhere also means the nav bar is identical on every page, which is the point of the shared partial. */ .switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 2px; } .switch button { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .36rem .58rem; border: 0; border-radius: 1px; background: transparent; color: var(--cream-faint); cursor: pointer; transition: background .18s, color .18s; } .switch button:hover { color: var(--cream); } .switch button[aria-pressed="true"] { background: var(--amber); color: #1A1206; } /* ══ MOBILE NAV ════════════════════════════════════════════════════════════ A
drawer, not a JS menu: native keyboard and screen-reader support, no inline handlers (so it is clean under the strict CSP on /webinar and /challenge, where script-src has no 'unsafe-inline'), it closes by itself on navigation because the page reloads, and with CSS gone it degrades to a working expand/collapse list. The motion switch must NOT be a desktop-only control: WCAG 2.2.2 asks for an on-page way to stop motion, and mobile is where motion costs the most battery. It stays, just smaller. The CTA loses its label instead. */ .navdrawer { display: none; position: relative; } .navdrawer > summary { list-style: none; cursor: pointer; width: 40px; height: 34px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 2px; } .navdrawer > summary::-webkit-details-marker { display: none; } .navdrawer > summary::before, .navdrawer > summary::after, .navdrawer > summary > i { content: ''; display: block; width: 18px; height: 2px; background: var(--cream); } .navdrawer[open] > summary { border-color: var(--amber); } .navpanel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 95; min-width: 210px; padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .1rem; background: rgba(11,17,14,.98); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 22px 50px rgba(0,0,0,.55); } .navpanel a { display: block; padding: .62rem 0; text-decoration: none; color: var(--cream-dim); } .navpanel a:hover, .navpanel a[aria-current="page"] { color: var(--amber); } .navpanel a + a { border-top: 1px solid var(--line); } /* The switch must NOT be a desktop-only control: WCAG 2.2.2 asks for an on-page way to stop motion, and mobile is where the motion costs the most battery. It stays, just smaller; the CTA drops its label instead. .hide-sm hides everything else in the nav below 1000px, hence the !important to beat it. */ @media (max-width: 1000px) { .navdrawer { display: block; } .nav-links { gap: .7rem; } .switch.hide-sm { display: inline-flex !important; } .switch button { padding: .3rem .42rem; font-size: 9px; letter-spacing: .06em; } .nav .btn-primary { padding: .7rem .9rem !important; font-size: 10px !important; box-shadow: 3px 3px 0 var(--amber-deep); } } /* The nav CTA carries two labels — "Book a call" and a "Call" fallback for very narrow screens — and only one may ever be visible. The homepage hides the short one with an inline style="display:none", which meant the shared nav partial rendered "BOOK A CALL CALL" until this rule existed. Hiding it here instead makes the markup work with or without that inline style. */ .nav .btn-primary span + span { display: none; } /* The homepage sets this same padding inline. Declaring it here means the shared nav partial matches without repeating an inline style, and the homepage's inline copy is a harmless duplicate of identical values. */ .nav .btn-primary { padding: .78rem 1.35rem; font-size: 11.5px; } @media (max-width: 430px) { .nav .btn-primary .full { display: none; } .nav .btn-primary span:last-child { display: inline !important; } .brand { font-size: 1.05rem; } } /* ══ UTILITIES ═════════════════════════════════════════════════════════════ Deliberately short. These replace the Tailwind spacing/layout utilities the old pages used; they are not an attempt to rebuild Tailwind. */ /* Load-bearing: bc-magnet-form.js toggles .hidden on #magnetDone, #magnetFormWrap and #mgError across 13 capture pages. It came from Tailwind and did not exist in this file — without it the success card and the error text render on top of the live form the moment a page drops tailwind.css. */ .hidden { display: none !important; } .measure { max-width: 68ch; } .center { text-align: center; margin-inline: auto; } .stack > * + * { margin-top: 1.15rem; } .stack--tight > * + * { margin-top: .6rem; } .stack--loose > * + * { margin-top: 2.1rem; } .cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } @media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } } .link { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; } .link:hover { color: var(--amber-hot); } .fineprint { font-size: .8rem; color: var(--cream-faint); line-height: 1.5; } .hide-mob { } @media (max-width: 980px) { .hide-mob { display: none !important; } } /* ══ BANDS ═════════════════════════════════════════════════════════════════ What an interior page uses INSTEAD of .scene, and .pad instead of the inline padding-bottom the rooms carry. A band is a flat full-width plate with no floor, no cast and no mobile clearance debt. */ .band { position: relative; } .band--raised { background: var(--deep); border-block: 1px solid var(--line); } .band--surface { background: var(--surface); } .band--cream { background: var(--cream); color: var(--ink); } .band--cream h1, .band--cream h2, .band--cream h3 { color: var(--ink); } .band--cream .dim, .band--cream .faint { color: var(--ink-soft); } .pad { padding: clamp(3.5rem, 8vw, 6.5rem) 0; } .pad--sm { padding: clamp(2rem, 4vw, 3.2rem) 0; } .pad--lg { padding: clamp(5rem, 11vw, 9rem) 0; } /* ══ FORMS ═════════════════════════════════════════════════════════════════ This file previously had NO input, textarea, label or select rules at all, while 25 of the 44 pages are form pages. Native controls on a dark ground inherit the browser's light chrome and look broken, so this is not polish. */ .field { display: block; margin-bottom: 1.1rem; } .field > label { display: block; margin-bottom: .45rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--cream-dim); } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="number"], .field input[type="password"], .field select, .field textarea { width: 100%; display: block; font-family: 'Outfit', system-ui, sans-serif; font-size: 1rem; line-height: 1.5; color: var(--cream); background: rgba(0,0,0,.26); border: 1px solid var(--line); border-radius: 2px; padding: .85rem 1rem; transition: border-color .18s ease, background .18s ease; } .field textarea { min-height: 8rem; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--cream-faint); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-hot); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); background: rgba(0,0,0,.4); box-shadow: 0 0 0 3px rgba(240,169,60,.18); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #E2685B; } .field-hint { margin: .4rem 0 0; font-size: .82rem; color: var(--cream-faint); } .field-error { margin: .4rem 0 0; font-size: .85rem; color: #F09A8E; } /* On the cream plate the same controls need ink, not cream. Sales and offer pages put their form on .card-cream because a light ground needs far less bespoke input CSS than a dark one. */ .card-cream .field > label, .band--cream .field > label { color: var(--ink-soft); } .card-cream .field input, .card-cream .field select, .card-cream .field textarea, .band--cream .field input, .band--cream .field select, .band--cream .field textarea { color: var(--ink); background: rgba(255,255,255,.72); border: 2px solid rgba(20,16,11,.22); } .card-cream .field input:focus, .card-cream .field textarea:focus, .band--cream .field input:focus, .band--cream .field textarea:focus { border-color: var(--amber-deep); background: #fff; box-shadow: 0 0 0 3px rgba(185,115,24,.22); } .card-cream .field input::placeholder, .band--cream .field input::placeholder { color: rgba(81,72,53,.7); } /* The honeypot. Never display:none — some bots skip hidden inputs, and a screen reader should not announce it either. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ══ CARDS & PANELS ════════════════════════════════════════════════════════ */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 2.3rem; position: relative; transition: transform .28s cubic-bezier(.3,1,.4,1), border-color .28s, box-shadow .28s; } .panel:hover { transform: translateY(-6px); border-color: var(--line-hot); box-shadow: 0 22px 50px rgba(0,0,0,.45); } .panel h3 { font-size: 1.85rem; margin-bottom: .8rem; } .panel .k { color: var(--amber); } .card-cream { background: var(--cream); color: var(--ink); border-radius: 3px; padding: 2rem; box-shadow: 6px 6px 0 rgba(0,0,0,.26); } .card-cream h2, .card-cream h3 { color: var(--ink); } /* ══ STAT SLAB ═════════════════════════════════════════════════════════════ */ .slabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } .slab { padding: 2.5rem 1.6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .slab:last-child { border-right: 0; } .slab .n { font-family: 'Playfair Display', serif; font-weight: 800; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: .9; color: var(--amber); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .slab p { margin: .7rem 0 0; color: var(--cream-dim); font-size: .95rem; } @media (max-width: 760px) { .slabs { grid-template-columns: 1fr; } .slab { border-right: 0; padding: 1.7rem 0; } } /* ══ PROOF ═════════════════════════════════════════════════════════════════ The highest-value content on the page. Cream on the dark ground reads as prestige. No character may share a frame with a real client's face, words or logo — enforced by a layout assertion in the verifier, not by intentions. */ .marquee { background: var(--cream); color: var(--ink); border-radius: 3px; padding: clamp(2rem, 5vw, 3.8rem); text-align: center; box-shadow: 10px 10px 0 var(--amber-deep); } .marquee .q { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.35rem, 3vw, 2.3rem); line-height: 1.22; letter-spacing: -.02em; } .marquee .hi { color: var(--pine); font-style: italic; } .marquee .who-said { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 1.5rem; } .marquee .fine { font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; max-width: 64ch; margin-inline: auto; line-height: 1.5; } .marquee .fine a { color: var(--ink); } .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.15rem; } .quote { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 3px; padding: 1.65rem; transition: transform .24s ease, border-color .24s ease, opacity .24s ease; } .quote:hover { transform: translateY(-4px); border-left-color: var(--amber-hot); } .quote p { margin: 0 0 1.05rem; font-size: 1rem; } .quote .by { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); } .quote .org { font-size: .8rem; color: var(--cream-faint); margin-top: .2rem; } .faces { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; } .face { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.1); border: 2px solid var(--line); transition: filter .3s, border-color .3s, transform .3s, opacity .24s; cursor: pointer; } .face:hover, .face.linked { filter: none; border-color: var(--amber); transform: scale(1.08); } /* Client marks shown in their OWN colours, which needs a light plate — inverting dark logos onto a dark ground turned them to mush. Bigger cells, fewer columns. */ .ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(20,16,11,.10); background-color: #FFFFFF; border-radius: 3px; overflow: hidden; box-shadow: 8px 8px 0 rgba(0,0,0,.3); } @media (max-width: 900px) { .ledger { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .ledger { grid-template-columns: repeat(2, 1fr); } } .ledger div { background: #FFFFFF; display: flex; align-items: center; justify-content: center; min-height: 128px; padding: 1.2rem 1rem; } .ledger img { max-height: 84px; width: auto; transition: transform .3s ease; } .ledger div:hover img { transform: scale(1.06); } .ledger .more { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .plaques { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; } @media (max-width: 720px) { .plaques { grid-template-columns: repeat(2, 1fr); } } .plaque { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 74px; padding: .7rem; background: linear-gradient(150deg, var(--raised), var(--surface)); border: 1px solid var(--line); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: transform .3s ease, border-color .3s ease; } .plaque span { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.12rem; letter-spacing: .04em; color: var(--cream-dim); } .plaque::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,214,150,.2) 50%, transparent 60%); transform: translateX(-130%); } .plaque:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--line-hot); } .plaque:hover::after { animation: sweep .9s ease-out 1 both; } .reveal.in .plaque::after { animation: sweep 1.2s ease-out .15s 1 both; } @keyframes sweep { to { transform: translateX(130%); } } .coda { background: var(--raised); border-block: 1px solid var(--line); } /* ══ DOORS ═════════════════════════════════════════════════════════════════ */ .doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; max-width: 1000px; } @media (max-width: 900px) { .doors { grid-template-columns: 1fr; } } .door { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--amber-deep); border-radius: 3px; padding: 2.1rem; position: relative; transition: transform .3s cubic-bezier(.3,1,.4,1), border-color .3s, box-shadow .3s, background .3s; } .door:hover, .door:focus-visible { transform: translateY(-8px); border-top-color: var(--amber-hot); background: var(--raised); box-shadow: 0 24px 55px rgba(0,0,0,.5); } .door.featured { border-top-color: var(--amber); box-shadow: 0 0 0 1px var(--line-hot); } .door .price { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--amber); } .door h3 { font-size: 1.65rem; margin: .7rem 0 .8rem; } .door .go { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin-top: 1.3rem; display: inline-block; } /* ══ SHOW CTA ══════════════════════════════════════════════════════════════ The roster earns attention; this is where it goes. Deliberately NOT styled as another business door — it must not compete with the doors section. */ .showcta { margin-top: 1.6rem; border: 1px solid var(--line-hot); border-radius: 3px; background: linear-gradient(120deg, rgba(240,169,60,.10), rgba(240,169,60,.02)); padding: 1.8rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; } .showcta p { margin: 0; } .showcta .big { font-family: 'Playfair Display', serif; font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: -.02em; } /* ══ WHY THIS CALL ═════════════════════════════════════════════════════════ */ .why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; } @media (max-width: 900px) { .why { grid-template-columns: 1fr; } } .why-item { border-left: 3px solid var(--amber); padding: .3rem 0 .3rem 1.3rem; } .why-item h4 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em; margin: 0 0 .5rem; } .why-item p { margin: 0; color: var(--cream-dim); font-size: .97rem; } /* ══ NAME WALL — the credentials, at the scale they deserve ════════════════ */ .namewall { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin: 2.2rem 0 0; } .namewall span { font-family: 'Playfair Display', serif; font-weight: 800; font-size: clamp(1.05rem, 2.3vw, 1.9rem); letter-spacing: -.02em; color: var(--cream); } .namewall i { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; flex-shrink: 0; } /* ══ LAYOUT HELPERS ════════════════════════════════════════════════════════ */ /* Two-column story split. Collapses to one column with the image first. */ .split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; } .split > *:first-child { min-width: 0; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2rem; } } /* ══ ARCHETYPE — MASTHEAD ══════════════════════════════════════════════════ The top of every interior page. Clears the fixed nav; no hero, no room. */ .masthead { padding: clamp(7rem, 13vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem); } .masthead--center { text-align: center; } .masthead--center .lede, .masthead--center .measure { margin-inline: auto; } /* ══ ARCHETYPE — PROSE (legal, agreements, articles) ═══════════════════════ The ONE place element selectors are allowed. That restriction is what stops base styles leaking onto marketing pages. */ .prose { max-width: 72ch; color: var(--cream-dim); } /* Strip the UA margins on the CHILD selector, not on `p`/`ul` directly. A `.prose p { margin-block: 0 }` rule has specificity (0,1,1) and beats the (0,1,0) flow rule below, which silently removes every paragraph gap and renders the whole policy as one solid block of text. Both rules here are (0,1,0), so the later `+` rule wins, which is what we want. */ .prose > * { margin-block: 0; } .prose > * + * { margin-top: 1.15rem; } .prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--cream); margin-top: 2.6rem; } .prose h3 { font-size: 1.25rem; color: var(--cream); margin-top: 2rem; } .prose ul, .prose ol { padding-left: 1.35rem; } .prose li + li { margin-top: .5rem; } .prose li::marker { color: var(--amber); } .prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; } .prose strong { color: var(--cream); font-weight: 600; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); } .prose th { color: var(--cream); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .prose--legal { font-size: .97rem; } .updated { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--cream-faint); } /* ══ ARCHETYPE — CAPTURE PAGE ══════════════════════════════════════════════ */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: clamp(1.5rem, 3.4vw, 2.3rem); } .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { position: relative; padding-left: 1.85rem; } .checklist li + li { margin-top: .75rem; } .checklist li::before { content: ''; position: absolute; left: 0; top: .52em; width: 9px; height: 16px; border: solid var(--amber); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-50%); } .band--cream .checklist li::before, .card-cream .checklist li::before { border-color: var(--amber-deep); } /* Shown by bc-magnet-form.js after a successful submit, with .hidden removed. */ .done-card { background: var(--surface); border: 1px solid var(--line-hot); border-radius: 3px; padding: clamp(2rem, 5vw, 3.2rem); text-align: center; } .seal { width: 64px; height: 64px; margin: 0 auto 1.4rem; display: grid; place-content: center; border-radius: 50%; background: var(--amber); color: #1A1206; font-size: 1.9rem; line-height: 1; } .magnet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1.15rem; } .magnet-tile { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 3px; padding: 1.6rem; transition: transform .26s cubic-bezier(.3,1,.4,1), border-color .26s, box-shadow .26s, background .26s; } .magnet-tile:hover, .magnet-tile:focus-visible { transform: translateY(-5px); background: var(--raised); border-left-color: var(--amber-hot); box-shadow: 0 18px 40px rgba(0,0,0,.42); } .magnet-tile h3 { font-size: 1.3rem; margin-bottom: .5rem; } .magnet-tile p { margin: 0; color: var(--cream-dim); font-size: .95rem; } /* ══ ARCHETYPE — SALES PAGE ════════════════════════════════════════════════ */ .pricebox { background: var(--cream); color: var(--ink); border-radius: 3px; padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center; box-shadow: 10px 10px 0 var(--amber-deep); } .price { font-family: 'Playfair Display', serif; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .price .amt { font-size: clamp(2.6rem, 6vw, 4.2rem); } .price .per { font-size: 1rem; color: var(--ink-soft); font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; } .price-note { font-size: .85rem; color: var(--ink-soft); margin-top: .8rem; } .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.4rem 1.25rem 0; position: relative; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.16rem; letter-spacing: -.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); color: var(--amber); font-size: 1.4rem; line-height: 1; } .faq details[open] summary::after { content: '\2212'; } .faq details > *:not(summary) { margin: 0 0 1.3rem; color: var(--cream-dim); max-width: 72ch; } .guarantee { border: 1px solid var(--line-hot); border-radius: 3px; background: linear-gradient(120deg, rgba(240,169,60,.10), rgba(240,169,60,.02)); padding: 1.8rem 2rem; } .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } @media (max-width: 780px) { .fit { grid-template-columns: 1fr; } } .fit--yes { border-left: 3px solid var(--pine); padding-left: 1.3rem; } .fit--no { border-left: 3px solid var(--line); padding-left: 1.3rem; } /* Sticky mobile buy bar: on a long sales page the CTA is otherwise a scroll away. */ .checkout-bar { display: none; } @media (max-width: 780px) { .checkout-bar { display: block; position: fixed; inset: auto 0 0 0; z-index: 80; padding: .7rem 4vw calc(.7rem + env(safe-area-inset-bottom)); background: rgba(11,17,14,.97); border-top: 1px solid var(--line); } } /* ══ ARCHETYPE — THANK-YOU ═════════════════════════════════════════════════ */ .solo { min-height: 76svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8rem 0 4rem; } .next-step { margin-top: 2.4rem; border-top: 1px solid var(--line); padding-top: 2rem; } /* ══ ARCHETYPE — ARTICLE / NOTES ═══════════════════════════════════════════ */ .article-head { border-bottom: 1px solid var(--line); padding-bottom: 1.6rem; margin-bottom: 2.2rem; } .postlist { list-style: none; padding: 0; margin: 0; } .post-row { border-bottom: 1px solid var(--line); } .post-row a { display: block; padding: 1.35rem 0; text-decoration: none; transition: padding-left .22s ease, color .22s ease; } .post-row a:hover { padding-left: .6rem; color: var(--amber); } .post-row .when { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-faint); } .post-row h3 { font-size: 1.28rem; margin-top: .35rem; } /* ══ CAMEO ═════════════════════════════════════════════════════════════════ How an interior page gets a character. One sprite in NORMAL FLOW — no .scene, no .stage, no absolute positioning, no floor clearance. This is .coda-orc generalized, and it is the ONLY sanctioned way to use the cast off the homepage. It carries its own minimal sprite rules so office-world.css is not needed: .sprite itself lives in the world layer. .scene / .cast / .stage / .prop are BANNED outside the homepage. */ .cameo { display: flex; align-items: center; gap: 1.5rem; --px: 3; } .cameo > .sprite { flex-shrink: 0; display: block; width: var(--u); height: var(--v); background-image: var(--sheet); background-repeat: no-repeat; background-size: calc(var(--frames, 8) * var(--u)) var(--v); background-position-x: calc(var(--from, 0) * var(--u) * -1); image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.32)); } .cameo p { margin: 0; } @media (max-width: 620px) { .cameo > .sprite { display: none; } } /* ══ REVEAL ════════════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); } .reveal.in { opacity: 1; transform: none; } .d1 { transition-delay: .09s; } .d2 { transition-delay: .18s; } .d3 { transition-delay: .27s; } .d4 { transition-delay: .36s; } /* ══ SIGNATURE MOTION ══════════════════════════════════════════════════════ One fade-up everywhere is what made the page feel flat; each of these is a DIFFERENT mechanic so no two sections resolve the same way. All of it is transform/opacity only (compositor-friendly) and all of it stops dead under prefers-reduced-motion and the Calm switch. */ /* a. Poster headlines rise line-by-line from behind a mask, like a title card. */ .poster .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .poster .ln span { display: block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16,1,.3,1); } .poster .ln em { display: block; font-style: italic; color: var(--amber); } .poster.in .ln span { transform: none; } .poster .ln:nth-child(2) span { transition-delay: .08s; } .poster .ln:nth-child(3) span { transition-delay: .16s; } .poster .ln:nth-child(4) span { transition-delay: .24s; } /* b. Chapter rules draw themselves in — scoped to .reveal chapters only, so a marker that never gets .in (the hero's) is not left collapsed forever. */ .chapter.reveal::before { transform-origin: left center; transform: scaleX(0); transition: transform .7s cubic-bezier(.16,1,.3,1) .1s; } .chapter.reveal.in::before { transform: none; } /* c. Stat slabs count up behind a wiping amber underline. */ .slab { position: relative; } .slab::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left center; transition: transform 1.5s cubic-bezier(.16,1,.3,1); } .slab.in::after { transform: none; } /* d. Panels lift in on a slight 3D tilt rather than a flat slide. */ .panel.reveal { transform: translateY(28px) rotateX(6deg); transform-origin: 50% 100%; } .panel.reveal.in { transform: none; } /* e. Name wall: each credential snaps in, dot first. */ .namewall span, .namewall i { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,1.5,.4,1); } .namewall.in span, .namewall.in i { opacity: 1; transform: none; } .namewall.in > *:nth-child(1) { transition-delay: .05s; } .namewall.in > *:nth-child(2) { transition-delay: .14s; } .namewall.in > *:nth-child(3) { transition-delay: .23s; } .namewall.in > *:nth-child(4) { transition-delay: .32s; } .namewall.in > *:nth-child(5) { transition-delay: .41s; } .namewall.in > *:nth-child(6) { transition-delay: .5s; } .namewall.in > *:nth-child(7) { transition-delay: .59s; } /* g. Quotes fan in from alternating sides — the wall assembles itself. */ .quote.reveal { transform: translateY(26px) translateX(-14px); } .quote.reveal:nth-child(even) { transform: translateY(26px) translateX(14px); } .quote.reveal.in { transform: none; } /* h. The doors swing open a few degrees as they arrive. */ .door.reveal { transform: translateY(26px) perspective(1400px) rotateY(-7deg); transform-origin: left center; } .door.reveal.in { transform: none; } /* i. The marquee testimonial lands with its shadow snapping into place. */ .marquee.reveal { box-shadow: 0 0 0 var(--amber-deep); } .marquee.reveal.in { box-shadow: 10px 10px 0 var(--amber-deep); transition: box-shadow .7s cubic-bezier(.2,1.4,.4,1) .25s, opacity .75s, transform .75s; } /* j. Why-items draw their amber rule downward. */ .why-item { border-left-color: transparent; transition: border-left-color .01s; position: relative; } .why-item::before { content: ''; position: absolute; left: -3px; top: 0; width: 3px; height: 100%; background: var(--amber); transform: scaleY(0); transform-origin: top center; transition: transform .8s cubic-bezier(.16,1,.3,1); } .why.in .why-item::before { transform: none; } .why.in .why-item:nth-child(2)::before { transition-delay: .12s; } .why.in .why-item:nth-child(3)::before { transition-delay: .24s; } /* ══ MOTION STATES ═════════════════════════════════════════════════════════ */ html[data-office="calm"] .plaque::after { display: none; } html[data-office="calm"] .poster .ln > span, html[data-office="calm"] .slab::after, html[data-office="calm"] .why-item::before { transition: none !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .plaque::after { animation: none !important; } .btn, .panel, .door, .quote, .face, .magnet-tile, .post-row a { transition: none; } .poster .ln > span, .chapter::before, .slab::after, .namewall span, .namewall i, .why-item::before { transform: none !important; opacity: 1 !important; transition: none !important; } .panel.reveal, .quote.reveal, .door.reveal, .marquee.reveal { transform: none !important; } } /* ══ FOCUS ═════════════════════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible, .face:focus-visible, .door:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .magnet-tile:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; } /* ══ FOOTER ════════════════════════════════════════════════════════════════ Must keep a link whose href contains "privacy": bc-consent.js finds `footer a[href*="privacy"]`, clones it, and injects the "Privacy choices" control the Privacy Policy promises appears in the footer of every page. It copies that anchor's className, so styling the privacy link differently from its siblings changes the injected control too. Losing this is a compliance gap, not a cosmetic one. */ .foot { border-top: 1px solid var(--line); padding: 3.4rem 0 2.4rem; text-align: center; } .foot a { color: var(--cream-dim); } .foot a:hover { color: var(--amber); } .foot .brandline { font-size: 1.5rem; } .foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; margin-bottom: 1.6rem; } .foot-links a { text-decoration: none; } /* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 620px) { body { font-size: 16.5px; } .plaque span { font-size: .95rem; } }