/* BEACON — F3 "a straight answer" design system. Phase B port of the Phase A mockups: context/beacon/client-data/beacon/site-mockup-beacon-site.html (home) context/beacon/client-data/beacon/mockup-ai.html context/beacon/client-data/beacon/mockup-google-ads.html Replicated, not reinterpreted (site-contract.md §2). Any visual divergence from those three files is a build bug. DESIGN LOCK (rebuild-scope.md, A/B'd and settled 2026-08-21): The hero breaker (.hero-rule) is the page's ONLY rule. There are no section framing devices anywhere else. Do not reintroduce them. CTA LOCK (content-spec.md §6.5): The header is sticky on every page and that is load-bearing, not decoration. No reader should ever be more than roughly two screens from a way to act. No rules or borders on the CTA bands — spacing does the separating. Served from /public so it loads after global.css and after Layout.astro's inline brand-bridge override block. The palette below reads THROUGH the brand-bridge custom properties, so brand.md stays canonical: change a colour in context/beacon/brand.md, mirror it to client-data/beacon/brand.md, re-run the bridge, and this file follows. The literals are fallbacks only. */ /* ---------- Inter, self-hosted ---------- PSI mobile measured FCP == LCP == 2.6s: nothing painted until the Google Fonts stylesheet resolved, which costs two extra DNS+TLS handshakes (fonts.googleapis.com, then fonts.gstatic.com) before a single glyph exists. The fallback-to-Inter swap also drove CLS to 0.146. One preloaded, same-origin variable woff2 removes both. Latin subset only — UK English site. Preload lives in BeaconLayout.astro's head slot. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --purple: var(--color-primary, #3D2C6B); --pink: var(--color-accent, #E91E8C); --teal: var(--color-secondary, #5BBFBA); --ink: var(--color-foreground, #333333); --paper: var(--color-muted, #faf9f7); --white: #ffffff; /* Not a brand token. Damien, 2026-08-21: full #E91E8C read too stark as a full-bleed field, so the field colour is deepened one step. The pink brand token is unchanged and still used for buttons, rules and accents. */ --pink-field: #cf137e; --radius-card: 12px; --radius-btn: 8px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 104px; --measure: 34em; } .bcn, .bcn *, .bcn *::before, .bcn *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--paper); } /* The design's page-level styles live on a wrapper div, not on . Layout.astro is injector-generated (GTM, consent, brand-bridge overrides all land in it), so it is left untouched — a body class would be a local override on a factory file and the next injector run could clobber it. */ .bcn { font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } .bcn img { max-width: 100%; display: block; } .bcn h1, .bcn h2, .bcn h3 { font-family: var(--font-display, inherit); } .wrap { max-width: 1160px; margin: 0 auto; padding-left: var(--space-3); padding-right: var(--space-3); } .narrow { max-width: 860px; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--purple); color: var(--white); padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--radius-btn) 0; } .skip-link:focus { left: 0; } /* ---------- Buttons ---------- 19px, not 18px, and that one pixel is load-bearing. White on Beacon pink (#E91E8C) is 3.37:1, below the 4.5:1 WCAG asks of normal-size text. At 19px bold the label qualifies as LARGE text, which needs 3:1, so the primary CTA passes with the brand colour untouched. Damien's call, 2026-08-22: keep the pink, move the type. Do not drop any pink button below 19px. */ .btn { display: inline-block; font-size: 19px; font-weight: 700; line-height: 1; padding: 18px 32px; border-radius: var(--radius-btn); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; border: 0; cursor: pointer; font-family: inherit; } .btn:hover { transform: translateY(-2px); } .btn-pink { background: var(--pink); color: var(--white); } .btn-white { background: var(--white); color: var(--purple); } .btn-purple { background: var(--purple); color: var(--white); } /* ---------- Header ---------- Sticky, so a CTA is never more than a glance away. Measured 2026-08-22: with a static header the worst gap between CTAs ran to 7.5 screens on desktop and 10.4 on mobile, because the only CTA scrolled off and nothing replaced it. */ .bcn-header { background: var(--paper); padding: var(--space-2) 0; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(61,44,107,0.10); } /* anchored sections must clear the sticky header */ .bcn section[id] { scroll-margin-top: 88px; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .header-inner img { height: 44px; width: auto; } .bcn-header nav { display: flex; align-items: center; gap: var(--space-4); } .bcn-header nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; } .bcn-header nav a:hover { color: var(--purple); } .bcn-header nav a.here { color: var(--purple); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--pink); text-decoration-thickness: 2px; } /* font-weight is explicit here because `.bcn-header nav a` (0,2,0) outranks `.btn` (0,1,0) and was quietly dragging the header CTA down to 600 — which took it back out of WCAG "large text" and failed the contrast check the 19px was there to pass. */ .bcn-header nav .btn { padding: 12px 20px; font-size: 19px; font-weight: 700; } /* ---------- Hero ---------- */ .hero { background: var(--purple); color: var(--white); padding: var(--space-6) 0; position: relative; overflow: hidden; } .hero .kicker { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--teal); margin-bottom: var(--space-3); } .hero h1 { font-size: clamp(52px, 8.5vw, 118px); font-weight: 900; line-height: 0.98; letter-spacing: -0.03em; max-width: 11ch; margin-bottom: var(--space-4); } /* Product-page heroes carry a longer headline than the home page's five words. */ .hero-sub h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.0; max-width: 15ch; } .hero .sub { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; max-width: var(--measure); margin-bottom: var(--space-4); color: rgba(255,255,255,0.92); } .hero .sub strong { color: var(--white); font-weight: 700; } .hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .hero-ctas .quiet { color: var(--white); font-weight: 600; font-size: 17px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--teal); text-decoration-thickness: 2px; } /* THE page's only rule. */ .hero-rule { height: 10px; background: linear-gradient(to right, var(--pink) 0 34%, var(--teal) 34% 67%, var(--white) 67% 100%); } /* ---------- Section furniture ---------- */ .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); } .sec { padding: var(--space-6) 0; } .sec-paper { background: var(--paper); } .sec-teal { background: var(--teal); color: var(--purple); } .sec-purple { background: var(--purple); color: var(--white); } .sec-teal .tag { color: var(--purple); opacity: 0.75; } .sec-purple .tag { color: var(--teal); } .sec-purple .lede { color: rgba(255,255,255,0.9); } .sec-purple .lede strong { color: var(--white); } h2.big { font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--space-3); } .sec-paper h2.big { color: var(--purple); } .lede { font-size: 18px; max-width: var(--measure); } .lede + .lede { margin-top: var(--space-2); } .kicker-line { margin-top: var(--space-4); font-size: 20px; font-weight: 700; max-width: var(--measure); border-left: 4px solid var(--purple); padding-left: var(--space-2); } /* ---------- Job ticket ---------- */ .proof { background: var(--teal); color: var(--purple); padding: var(--space-6) 0; } .proof-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; } .proof .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); opacity: 0.75; margin-bottom: var(--space-2); } .proof h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-3); } .proof .lede { font-size: 18px; max-width: var(--measure); } .proof .lede + .lede { margin-top: var(--space-2); } .ticket { background: var(--white); border-radius: var(--radius-card); box-shadow: 0 14px 40px rgba(61,44,107,0.22); position: relative; transform: rotate(-1deg); } .ticket-head { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 2px dashed rgba(61,44,107,0.25); } .ticket-head .tno { font-weight: 800; font-size: 15px; letter-spacing: 0.12em; color: var(--purple); } .ticket-head .tco { font-weight: 600; font-size: 14px; color: rgba(51,51,51,0.6); } .ticket-body { padding: var(--space-3) var(--space-4) var(--space-4); } .ticket-row { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-2); padding: 13px 0; border-bottom: 1px solid rgba(51,51,51,0.1); font-size: 16px; } .ticket-row:last-child { border-bottom: 0; } .ticket-row dt { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(51,51,51,0.55); padding-top: 3px; } .ticket-row dd { font-weight: 600; color: var(--ink); } .ticket-row dd .big { font-size: 22px; font-weight: 800; color: var(--purple); display: block; line-height: 1.2; } .stamp { position: absolute; top: -26px; right: 26px; transform: rotate(6deg); border: 3px solid var(--pink); color: var(--pink); border-radius: var(--radius-btn); padding: 8px 16px; font-weight: 800; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--white); } .proof .kicker-line { margin-top: var(--space-4); } /* ---------- Two things (home) ---------- */ .products { padding: var(--space-6) 0; background: var(--paper); } .products h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--purple); margin-bottom: var(--space-2); } .products .intro { font-size: 18px; max-width: var(--measure); margin-bottom: var(--space-5); } .product-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-3); align-items: stretch; } .product { border-radius: var(--radius-card); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; } .product .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); } .product h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: var(--space-2); } .product p { font-size: 17px; margin-bottom: var(--space-3); max-width: 32em; } .product ul { list-style: none; margin-top: auto; } .product li { padding: 12px 0 12px 30px; position: relative; font-size: 16px; font-weight: 500; border-top: 1px solid; } .product li::before { content: ""; position: absolute; left: 0; top: 20px; width: 14px; height: 4px; border-radius: 2px; } .product .more { margin-top: var(--space-3); font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; display: inline-block; } .product-ai { background: var(--purple); color: var(--white); } .product-ai .tag { color: var(--teal); } .product-ai li { border-color: rgba(255,255,255,0.16); } .product-ai li::before { background: var(--teal); } .product-ai .more { color: var(--white); text-decoration-color: var(--teal); } .product-ads { background: var(--white); color: var(--ink); border: 2px solid var(--purple); } .product-ads .tag { color: var(--pink); } .product-ads h3 { color: var(--purple); } .product-ads li { border-color: rgba(61,44,107,0.14); } .product-ads li::before { background: var(--pink); } .product-ads .more { color: var(--purple); text-decoration-color: var(--pink); } .price-line { font-size: 22px; font-weight: 800; } .product-ai .price-line { color: var(--white); } .product-ads .price-line { color: var(--purple); } /* ---------- Pink strip ---------- */ .no-contracts { background: var(--pink-field); color: var(--white); padding: var(--space-5) 0; } .no-contracts .row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .no-contracts h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; } .no-contracts p { font-size: 19px; font-weight: 600; max-width: 26em; } .no-contracts .row .btn { flex-shrink: 0; } .no-contracts .btn-white { background: var(--white); color: var(--pink-field); } /* ---------- About (home) ---------- */ .about { padding: var(--space-6) 0; background: var(--paper); } .about-grid { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-5); align-items: center; } .about .photo-frame { border-radius: var(--radius-card); overflow: hidden; background: var(--purple); box-shadow: 0 14px 40px rgba(61,44,107,0.18); } .about .photo-frame img { width: 100%; height: auto; } .about .photo-cap { font-size: 14px; font-weight: 600; color: rgba(51,51,51,0.6); margin-top: var(--space-2); } .about .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin-bottom: var(--space-2); } .about h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--purple); margin-bottom: var(--space-3); } .about p { font-size: 18px; max-width: var(--measure); margin-bottom: var(--space-2); } .about p strong { color: var(--purple); } /* ---------- The hours counter (/ai) ---------- White object on a teal field, matching the job ticket's language. */ .counter-head { max-width: var(--measure); margin-bottom: var(--space-4); } .counter-head .tag { color: var(--purple); opacity: 0.75; } .counter-card { background: var(--white); border-radius: var(--radius-card); box-shadow: 0 14px 40px rgba(61,44,107,0.22); overflow: hidden; } .counter-grid { display: grid; grid-template-columns: 7fr 5fr; } .counter-jobs { padding: var(--space-4); } .job { display: grid; grid-template-columns: 26px 1fr 92px; gap: var(--space-2); align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(51,51,51,0.1); } .job:last-of-type { border-bottom: 0; } .job input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--pink); cursor: pointer; } .job label { font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; } .job .hrs { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; } .job input[type="number"] { width: 56px; font-family: inherit; font-size: 16px; font-weight: 700; text-align: right; padding: 7px 8px; color: var(--purple); border: 1px solid rgba(61,44,107,0.28); border-radius: 6px; background: var(--white); } .job input[type="number"]:focus { outline: 2px solid var(--purple); } .job .unit { font-size: 13px; font-weight: 600; color: rgba(51,51,51,0.5); } .job.off label, .job.off .unit { opacity: 0.45; } .job.off input[type="number"] { opacity: 0.45; } .rate-row { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 2px dashed rgba(61,44,107,0.25); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .rate-row label { font-size: 16px; font-weight: 600; } .rate-row .money { display: flex; align-items: baseline; gap: 4px; } .rate-row .money span { font-weight: 700; color: var(--purple); } .rate-row input { width: 72px; font-family: inherit; font-size: 16px; font-weight: 700; padding: 7px 8px; color: var(--purple); border: 1px solid rgba(61,44,107,0.28); border-radius: 6px; } .counter-out { background: var(--purple); color: var(--white); padding: var(--space-4); display: flex; flex-direction: column; justify-content: center; } .counter-out .out-tag { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--space-3); } .counter-out .num { font-size: clamp(44px, 5vw, 68px); font-weight: 900; line-height: 1.0; letter-spacing: -0.03em; } .counter-out .num-label { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: var(--space-3); } .counter-out .num-2 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; line-height: 1.1; color: var(--teal); } .counter-out .money-line { margin-top: var(--space-3); font-size: 19px; font-weight: 700; } .counter-out .fine { margin-top: var(--space-3); font-size: 14px; color: rgba(255,255,255,0.6); } .counter-payoff { margin-top: var(--space-4); font-size: 22px; font-weight: 700; max-width: var(--measure); border-left: 4px solid var(--purple); padding-left: var(--space-2); } .counter-cta { margin-top: var(--space-4); } /* ---------- Beyond ChatGPT (/ai) ---------- Bare columns with a pink rule, so it reads differently from the bordered build cards sitting on the same paper field. */ .past { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); } .past .col { border-top: 3px solid var(--pink); padding-top: var(--space-3); } .past .n { font-size: 15px; font-weight: 900; letter-spacing: 0.1em; color: var(--pink); margin-bottom: 6px; } .past h3 { font-size: 24px; font-weight: 800; color: var(--purple); line-height: 1.15; margin-bottom: var(--space-2); } .past p { font-size: 16px; } .stack { margin-top: var(--space-5); background: var(--white); border: 2px solid rgba(61,44,107,0.14); border-radius: var(--radius-card); padding: var(--space-4); } .stack p { font-size: 18px; max-width: 60em; } .stack p + p { margin-top: var(--space-2); } .stack strong { color: var(--purple); } /* ---------- Numbered builds (/ai) ---------- */ .builds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); } .build { background: var(--white); border: 2px solid rgba(61,44,107,0.14); border-radius: var(--radius-card); padding: var(--space-4); } .build .n { font-size: 15px; font-weight: 900; letter-spacing: 0.1em; color: var(--pink); margin-bottom: var(--space-2); } .build h3 { font-size: 24px; font-weight: 800; color: var(--purple); line-height: 1.15; margin-bottom: var(--space-2); } .build p { font-size: 16px; } .build p + p { margin-top: var(--space-2); } .sec-purple h2.big { max-width: 18ch; } /* ---------- Need-from-you (/ai) ---------- */ .needs { list-style: none; margin-top: var(--space-4); } .needs li { padding: var(--space-3) 0 var(--space-3) 34px; position: relative; border-top: 1px solid rgba(61,44,107,0.14); font-size: 18px; max-width: 46em; } .needs li::before { content: ""; position: absolute; left: 0; top: 32px; width: 18px; height: 4px; border-radius: 2px; background: var(--pink); } .needs li strong { color: var(--purple); } /* ---------- Tenure roster (/google-ads) ---------- White objects on the teal field. */ .roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: var(--space-5); } .ten { background: var(--white); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgba(61,44,107,0.18); padding: var(--space-3); display: flex; flex-direction: column; justify-content: space-between; } .ten .who { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; } .ten .since { margin-top: var(--space-3); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(51,51,51,0.5); } .ten .date { font-size: 21px; font-weight: 900; color: var(--purple); line-height: 1.15; letter-spacing: -0.01em; } /* ---------- Differentiators (/google-ads) ---------- */ .diffs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); margin-top: var(--space-5); } .diff { border-top: 3px solid var(--pink); padding-top: var(--space-3); } .diff h3 { font-size: 23px; font-weight: 800; color: var(--purple); line-height: 1.2; margin-bottom: var(--space-2); } .diff p { font-size: 17px; } /* ---------- Steps (/google-ads) ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-5); } .step { background: var(--white); border: 2px solid rgba(61,44,107,0.14); border-radius: var(--radius-card); padding: var(--space-4) var(--space-3); } .step .n { font-size: 15px; font-weight: 900; letter-spacing: 0.1em; color: var(--pink); margin-bottom: var(--space-2); } .step h3 { font-size: 21px; font-weight: 800; color: var(--purple); margin-bottom: var(--space-2); } .step p { font-size: 16px; } .step p + p { margin-top: var(--space-2); } .step em { font-style: normal; font-weight: 700; color: var(--purple); } /* ---------- Price panel (/google-ads) ---------- */ .price-panel { background: var(--purple); color: var(--white); border-radius: var(--radius-card); padding: var(--space-5) var(--space-4); margin-top: var(--space-4); display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: center; } .price-panel .amount { font-size: clamp(44px, 5.2vw, 74px); font-weight: 900; line-height: 1.0; letter-spacing: -0.03em; } .price-panel .amount span { display: block; font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--teal); margin-top: var(--space-2); } .price-panel p { font-size: 18px; color: rgba(255,255,255,0.92); } .price-panel ul { list-style: none; margin-top: var(--space-3); } .price-panel li { padding: 12px 0 12px 30px; position: relative; font-weight: 600; border-top: 1px solid rgba(255,255,255,0.16); } .price-panel li::before { content: ""; position: absolute; left: 0; top: 20px; width: 14px; height: 4px; border-radius: 2px; background: var(--teal); } /* ---------- Fit lists (/google-ads) ---------- */ .fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-4); } .fit h3 { font-size: 22px; font-weight: 800; color: var(--purple); margin-bottom: var(--space-3); } .fit ul { list-style: none; } .fit li { padding: 12px 0 12px 30px; position: relative; border-top: 1px solid rgba(61,44,107,0.14); font-size: 17px; } .fit li::before { content: ""; position: absolute; left: 0; top: 20px; width: 14px; height: 4px; border-radius: 2px; } .fit .yes li::before { background: var(--teal); } .fit .no li::before { background: rgba(51,51,51,0.28); } /* ---------- FAQ ---------- */ .faq { margin-top: var(--space-4); max-width: 48em; } .faq details { border-top: 1px solid rgba(61,44,107,0.16); padding: var(--space-3) 0; } .faq details:last-child { border-bottom: 1px solid rgba(61,44,107,0.16); } .faq summary { font-size: 19px; font-weight: 700; color: var(--purple); cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; font-weight: 800; color: var(--pink); } .faq details[open] summary::after { content: "\2212"; } .faq p { margin-top: var(--space-2); font-size: 17px; } /* ---------- Prose (/privacy) ---------- */ .prose { max-width: 46em; } .prose h2 { font-size: 28px; font-weight: 800; color: var(--purple); margin-top: var(--space-5); margin-bottom: var(--space-2); line-height: 1.2; } .prose h3 { font-size: 21px; font-weight: 700; color: var(--purple); margin-top: var(--space-4); margin-bottom: var(--space-1); } .prose p { font-size: 17px; margin-bottom: var(--space-2); } .prose ul { margin: 0 0 var(--space-2) 0; list-style: none; } .prose li { padding: 8px 0 8px 26px; position: relative; font-size: 17px; } .prose li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 3px; border-radius: 2px; background: var(--teal); } .prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pink); } .prose strong { color: var(--purple); } .prose .updated { font-size: 15px; color: rgba(51,51,51,0.6); font-weight: 600; } .prose table { border-collapse: collapse; width: 100%; margin-bottom: var(--space-3); font-size: 16px; } .prose th, .prose td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid rgba(61,44,107,0.14); vertical-align: top; } .prose th { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(51,51,51,0.55); } .prose td code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: var(--purple); font-weight: 600; } .table-scroll { overflow-x: auto; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-5); align-items: start; } .form-card { background: var(--white); border-radius: var(--radius-card); box-shadow: 0 14px 40px rgba(61,44,107,0.14); padding: var(--space-4); } .next-list { list-style: none; counter-reset: nxt; margin-top: var(--space-3); } .next-list li { counter-increment: nxt; position: relative; padding: var(--space-3) 0 var(--space-3) 46px; border-top: 1px solid rgba(61,44,107,0.14); font-size: 17px; max-width: 40em; } .next-list li::before { content: counter(nxt); position: absolute; left: 0; top: var(--space-3); width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: var(--white); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; } .next-list li strong { color: var(--purple); } .who-card { background: var(--white); border: 2px solid rgba(61,44,107,0.14); border-radius: var(--radius-card); padding: var(--space-4); margin-top: var(--space-4); } .who-card p { font-size: 17px; } .who-card p + p { margin-top: var(--space-2); } .who-card strong { color: var(--purple); } /* ---------- Final CTA ---------- */ .final { background: var(--purple); color: var(--white); padding: var(--space-6) 0; } .final h2 { font-size: clamp(40px, 6vw, 82px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.0; max-width: 14ch; margin-bottom: var(--space-3); } .final p { font-size: 20px; max-width: var(--measure); margin-bottom: var(--space-4); color: rgba(255,255,255,0.92); } .final .place { margin-top: var(--space-4); font-size: 16px; color: rgba(255,255,255,0.65); font-weight: 500; margin-bottom: 0; } /* ---------- Footer ---------- */ .bcn-footer { background: var(--paper); padding: var(--space-4) 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .footer-inner img { height: 34px; width: auto; } .bcn-footer p { font-size: 14px; color: rgba(51,51,51,0.65); } .bcn-footer a { color: rgba(51,51,51,0.65); } /* ---------- Mid-page CTA ---------- Placed where an argument has just landed, never scattered. Always the same ask ("Book a call") so the page keeps one goal. No rules or borders here: the hero breaker stays the page's only rule. */ .cta-band { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); } .cta-band p { font-size: 18px; font-weight: 600; color: var(--purple); max-width: 34em; margin: 0; } .sec-teal .cta-band p, .proof .cta-band p { color: var(--purple); } /* ---------- Focus visibility (a11y) ---------- */ .bcn a:focus-visible, .bcn button:focus-visible, .bcn summary:focus-visible, .bcn input:focus-visible, .bcn textarea:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .roster { grid-template-columns: repeat(3, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .builds { grid-template-columns: 1fr; } .past { grid-template-columns: 1fr; gap: var(--space-3); } } @media (max-width: 900px) { .bcn-header nav a:not(.btn) { display: none; } .header-inner img { height: 34px; } .bcn-header { padding: 10px 0; } .bcn section[id] { scroll-margin-top: 68px; } .proof-grid, .product-grid, .about-grid, .counter-grid, .contact-grid { grid-template-columns: 1fr; } .proof-grid { gap: var(--space-4); } .ticket { transform: none; margin-top: var(--space-2); } .stamp { top: -18px; right: 16px; } .about-grid { gap: var(--space-4); } .about .photo-frame { max-width: 420px; } .diffs, .fit, .price-panel { grid-template-columns: 1fr; } .price-panel { gap: var(--space-4); } .no-contracts .row { flex-direction: column; align-items: flex-start; gap: var(--space-2); } :root { --space-6: 72px; --space-5: 48px; } } @media (max-width: 620px) { .roster, .steps { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ticket-row { grid-template-columns: 1fr; gap: 4px; } .hero h1 { font-size: 15vw; } .job { grid-template-columns: 24px 1fr; row-gap: 4px; } .job .hrs { grid-column: 2; justify-content: flex-start; } } /* ---------- Contact form, brought into the design language ---------- The wrapper's ContactForm.astro ships its own