/* SvarKlar homepage - clean hand-built, Voyage layout values (01a-site/voyage-spec.md). Font: headline + body = Schibsted Grotesk, wordmark = Tanker. Palette = warm amber/stone (accent #b45309), LOCKED 2026-06-08. Brand mark = inline SVG, recolored via --logo-mark. All colors tokenized in :root for palette swaps. No Tailwind, no JS. Decisions: 01a-site/rebuild-spec.md. */ /* Fonts (Schibsted Grotesk variable + Tanker) are self-hosted via @font-face in chrome.css, the one stylesheet on every page, so the whole site self-hosts from a single source. Each page preloads the latin woff2. Self-hosted 2026-06-23, moved to chrome.css 2026-06-27. */ :root { /* Shared palette, fonts + effects live in chrome.css, the SINGLE source, injected on every page (incl /resources, which omit styles.css). Edit chrome.css to reskin. This sheet defines only the tokens unique to the main pages: the homepage inline-SVG icon shades + the real social brand colors. 2026-06-25 */ /* placeholder icon shades, amber to match the palette (homepage inline-SVG icons) */ --icon-dark: #92400e; --icon-light: #fcd34d; --icon-ink: #3b2a16; --icon-ink-2: #2b1d0e; --icon-deep: #b45309; /* real social brand colors (works-with social card); NOT palette-bound, never reskin */ --brand-facebook: #1877f2; --brand-whatsapp: #25d366; --brand-tiktok: #010101; --brand-linkedin: #0a66c2; --brand-x: #000000; --brand-nextdoor: #1a8751; --brand-nextdoor-fg: #ffffff; --brand-telegram: #26a5e4; --brand-signal: #3b45fd; --brand-ig-a: #fdf497; --brand-ig-b: #fd5949; --brand-ig-c: #d6249f; --brand-ig-d: #285aeb; --brand-msgr-a: #0099ff; --brand-msgr-b: #a033ff; --brand-msgr-c: #ff5280; --brand-msgr-d: #ff7061; --ease: cubic-bezier(0.4, 0, 0.2, 1); --header-shadow: 0 8px 16px rgba(27, 24, 24, 0.03); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--body-font); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font: inherit; border: none; background: none; } /* logical line breaks on desktop; mobile reflows naturally (copy.md § Line Break Rule) */ .desktop-break { display: inline; } @media (max-width: 640px) { .desktop-break { display: none; } } /* ---------- a11y ---------- */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* skip-link + the shared dark CTA pill (.btn-pill / .btn-label / .btn-bg / .btn-circle) live in chrome.css now, the single source loaded on every page. The duplicate copies were removed here at the go-live dedupe (t9). The win-form keeps its own .win-form .btn-pill overrides below. 2026-06-25 */ /* ---------- header + footer chrome: moved to chrome.css (one source, loaded on every page via build-preview.py). The header/footer markup is the {{partial:header|footer}} partial; chrome.css styles it on the main pages AND the resource pages. Do not re-add it here. 2026-06-23 ---------- */ /* ---------- hero (centered) ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--color-surface); /* no viewport min-height: Voyage's hero is content-driven; a vh floor stretched the hero and floated the contest badge with a big gap below it. The gap is now pure padding (Fred 2026-06-23). */ padding: 20px 16px 0; } /* hero corner nebula = our sunset art (oval 5), both corners, behind content */ /* wraps each hero nebula (AVIF with webp fallback). display:contents removes the wrapper box so the inner .hero-art img keeps its absolute positioning exactly as before. */ .hero picture { display: contents; } .hero-art { position: absolute; z-index: -10; width: 775px; height: 517px; max-width: none; object-fit: contain; pointer-events: none; } .hero-art-top { top: -250px; left: -300px; } .hero-art-bottom { bottom: -250px; right: -300px; transform: rotate(180deg); } /* mobile: scale the nebula down so it stays a corner accent, not an overpowering wash */ @media (max-width: 639px) { .hero-art { width: 360px; height: 240px; } .hero-art-top { top: -110px; left: -150px; } .hero-art-bottom { bottom: -110px; right: -150px; } } /* ipad only (640-1023): pull the corner nebula further into the corners so it stops covering the H1 (top-left) and the badge (bottom-right). mobile + desktop are fine (Fred 2026-06-23) */ @media (min-width: 640px) and (max-width: 1100px) { .hero-art-top { top: -370px; left: -290px; } .hero-art-bottom { bottom: -370px; right: -290px; } } .hero-inner { position: relative; z-index: 0; /* bottom pad = the space under the contest badge. Tuned so badge -> next-section heading is ~100px (Voyage), given the how-it-works section's own top padding (64 to 767px, 96 from 768). <768: 36 + 64 = 100. The >=768 override drops it to 4 (4 + 96 = 100). */ padding: 112px 8px 36px; } .hero-title { max-width: 672px; margin: 0 auto 16px; text-align: center; font-family: var(--headline-font); font-size: 38px; font-weight: var(--headline-weight); line-height: 1.25; letter-spacing: -0.025em; color: var(--color-heading); overflow-wrap: break-word; } .hero-title .accent { color: var(--color-accent); } .hero-sub { max-width: 600px; margin: 0 auto 40px; text-align: center; font-family: var(--body-font); font-size: 20px; font-weight: 400; line-height: 1.4; } .hero-cta { display: flex; justify-content: center; } .hero-badge-wrap { display: flex; justify-content: center; /* match Voyage's hero-CTA -> news-pill gap: mobile/desktop 144px, ipad 160px (measured, Fred 2026-06-23) */ margin-top: 144px; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; /* sized to Voyage's news pill: 16px text, 24px icon, 16px vertical pad (~56px tall) (Fred 2026-06-23) */ padding: 16px 22px 16px 18px; background: var(--color-bg); border-radius: 9999px; box-shadow: var(--header-shadow); font-family: var(--body-font); font-size: 16px; font-weight: 500; color: var(--color-text); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); } .hero-badge:hover { box-shadow: 0 10px 24px rgba(27, 24, 24, 0.08); transform: translateY(-1px); } .hero-badge-icon { display: inline-flex; flex: 0 0 auto; } .hero-badge-text { white-space: nowrap; } .hero-badge-arrow { flex: 0 0 auto; color: var(--color-accent); transition: transform 0.3s var(--ease); } .hero-badge:hover .hero-badge-arrow { transform: translateX(3px); } @media (min-width: 640px) { .hero { padding-left: 56px; padding-right: 56px; } .hero-inner { padding-left: 24px; padding-right: 24px; } .hero-title { font-size: 56px; } .hero-badge-wrap { margin-top: 160px; } } @media (min-width: 1101px) { .hero-title { font-size: 64px; } .hero-sub { font-size: 24px; margin-bottom: 24px; } /* iPad + desktop: ~144px air under the contest badge (48 + the hiw 96px top pad). More than the mobile 100px (Fred wants the roomier feel back on iPad too, 2026-06-23) */ .hero-inner { padding-bottom: 48px; } } @media (min-width: 1101px) { .hero-inner { padding-top: 192px; /* desktop hero top air, restored to the pre-refactor wide-desktop value (Fred 2026-06-25) */ /* padding-bottom 48 inherited from the >=1101 block above: ~144px under the badge */ } .hero-badge-wrap { margin-top: 144px; } } /* one desktop tier only: the >=1280 hero-padding step (pt 192) was removed for breakpoint uniformity */ /* ===== section: how-it-works (4-node diagram, our CSS grid + inline-SVG flow line) ===== */ .hiw{ background:var(--color-bg); padding:64px 0; } .hiw-inner{ max-width:1280px; margin:0 auto; padding:0 16px; } .hiw-h2{ margin:0 0 40px; max-width:740px; font-family:var(--headline-font); font-size:28px; font-weight:var(--headline-weight); line-height:1.25; letter-spacing:-0.02em; color:var(--color-heading); } /* full width box */ .hiw-diagram{ position:relative; width:100%; aspect-ratio:1280 / 450; border:var(--border-pop); border-radius:16px; box-shadow:var(--shadow-pop); background-color:var(--color-surface); /* our own graph-paper grid + soft amber glow (replaces Voyage flow-bg.png), palette-tokenized */ background-image: radial-gradient(120% 85% at 50% -8%, color-mix(in srgb, var(--color-pop) 14%, transparent) 0%, transparent 58%), linear-gradient(color-mix(in srgb, var(--color-accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 7%, transparent) 1px, transparent 1px); background-size:100% 100%, 64px 64px, 64px 64px; background-position:center; overflow:hidden; } .hiw-flow{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } /* all 4 nodes share one width; labels break at natural points via hard
*/ .hiw-node{ position:absolute; z-index:2; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px; width:224px; text-align:center; } .hiw-icon{ width:88px; height:88px; display:block; } .hiw-label{ font-family:var(--body-font); font-size:14px; font-weight:500; line-height:1.3; color:var(--color-text); max-width:204px; } .hiw-node.is-hl{ background:var(--color-card-soft); border:var(--border-pop); border-radius:12px; box-shadow:var(--shadow-pop-sm); padding:16px 14px; min-height:158px; justify-content:center; box-sizing:border-box; } /* B wave, full width: n1 low, n2 high, n3 low, n4 high. cards on 2+3. */ .hiw-n1{ left:11%; top:70%; } .hiw-n2{ left:37%; top:26%; } .hiw-n3{ left:63%; top:70%; } .hiw-n4{ left:89%; top:26%; } /* flow connectors reuse the desktop line+arrowhead treatment (an accent curve with a gradient fade into each node + a small curved arrowhead). Mobile = 3 vertical connectors bowing left/right/left between the stacked nodes. iPad = one overlay over a reading-order 2x2. Desktop = the .hiw-flow wave above, untouched. Fred 2026-06-24. */ /* glued just outside the CENTERED node, not to the container edge: align-self centre + a fixed shift of half the node (100) + a small gap. Stays close to the node at any viewport width. */ .hiw-conn{ display:none; width:56px; height:100px; align-self:center; transform:translateX(-118px); margin:-18px 0; } /* taller curve; negative margin overlaps the node rows so the gap stays small */ .hiw-conn--r{ transform:translateX(118px) scaleX(-1); } /* mirror -> glued just right of the node */ .hiw-flow-ipad{ display:none; } @media (max-width:640px){ /* mobile: voyageai.com phone layout. Narrow centered nodes leave a wide gutter; the curve is a tall narrow element edge-aligned into that OUTER gutter, alternating left/right/left. Labels reflow (the desktop
are dropped so the text fits the narrower node). */ .hiw-diagram{ aspect-ratio:auto; padding:28px 16px; overflow:visible; display:flex; flex-direction:column; align-items:center; gap:0; } .hiw-flow{ display:none; } .hiw-node{ position:static; transform:none; width:100%; max-width:200px; margin:0; } .hiw-node.is-hl{ width:100%; max-width:200px; } .hiw-label br{ display:none; } .hiw-conn{ display:block; } } /* iPad portrait (768-1023): reading-order 2x2 (1 TL, 2 TR, 3 BL, 4 BR) with the desktop-style flow line laid over it (Fred 2026-06-24). The box aspect-ratio equals the overlay viewBox aspect, so preserveAspectRatio="none" scales it without distorting the arrowheads (same trick as desktop). */ @media (min-width:641px) and (max-width:1100px){ .hiw-diagram{ aspect-ratio:880/680; padding:0; overflow:hidden; } .hiw-flow{ display:none; } .hiw-conn{ display:none; } .hiw-flow-ipad{ display:block; position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } .hiw-node{ position:absolute; transform:translate(-50%,-50%); width:210px; } .hiw-n1{ left:27%; top:30%; } .hiw-n2{ left:73%; top:30%; } .hiw-n3{ left:27%; top:73%; } .hiw-n4{ left:73%; top:73%; } } @media (min-width:640px){ .hiw{ padding:96px 0; } .hiw-h2{ font-size:48px; } .hiw-inner{ padding:0 24px; } } /* ===== section: ai-hires ===== */ /* ===== ai-hires (Voyage use-case cards treatment) prefix hire- ===== */ .hire-section { background: var(--color-surface); padding-top: 64px; padding-bottom: 64px; } .hire-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; } .hire-h2 { max-width: 580px; margin: 0 0 40px; font-family: var(--headline-font); font-size: 28px; font-weight: var(--headline-weight); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-heading); } .hire-row { display: flex; flex-direction: column; gap: 24px; } .hire-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background-color: var(--color-paper); background-image: linear-gradient(color-mix(in srgb, var(--color-accent) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 1px, transparent 1px); background-size: 26px 26px; padding: 32px; border: var(--border-pop); border-radius: 24px; box-shadow: var(--shadow-pop); overflow: hidden; } .hire-top { display: flex; width: 100%; align-items: center; justify-content: space-between; } .hire-icon { width: 56px; height: 56px; flex: 0 0 auto; } .hire-body { display: flex; flex: 0 0 auto; flex-direction: column; margin-top: 24px; } .hire-h3 { margin: 0 0 10px; font-family: var(--headline-font); font-size: 20px; font-weight: var(--headline-weight); line-height: 1.25; letter-spacing: -0.02em; color: var(--color-heading); } .hire-text { margin: 0; font-family: var(--body-font); font-size: 16px; line-height: 24px; font-weight: 400; color: var(--color-text); } /* bullet list variant of the card body (Account Manager) */ .hire-list { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--body-font); font-size: 16px; line-height: 24px; font-weight: 400; color: var(--color-text); } .hire-list li { position: relative; padding-left: 18px; } .hire-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 9999px; background: var(--color-accent); } /* CTA button: full pill on every card. Mobile + iPad = always visible (Fred 2026-06-24, the small corner arrow was not enough). Desktop (>=1024) = reserved + hover-reveal (Voyage use-case treatment). */ .hire-cta-wrap { display: block; margin-top: 20px; } @media (min-width: 640px) { .hire-h2 { font-size: 48px; line-height: 1; } .hire-h3 { font-size: 28px; line-height: 31px; margin-bottom: 16px; } } @media (min-width: 640px) { .hire-section { padding-top: 96px; padding-bottom: 96px; } .hire-inner { padding: 0 24px; } } /* iPad: 2 columns, third card centered on its own row (Fred 2026-06-24). One full-width column made each card too long; 3 across is too cramped at this width. */ @media (min-width: 641px) and (max-width: 1100px) { .hire-row { flex-direction: row; flex-wrap: wrap; justify-content: center; } .hire-card { flex: 0 1 calc(50% - 12px); max-width: calc(50% - 12px); } } /* desktop only: 3 across + hover-reveal CTA */ @media (min-width: 1101px) { .hire-row { flex-direction: row; } /* our take, not Voyage's: shorter card + content vertically centered = less idle whitespace. min-height (not fixed) so a bullet-list card can grow without clipping its icon */ .hire-card { flex: 1; min-height: 320px; justify-content: center; } /* idle: content nudged down over the reserved CTA space; settles up on hover */ .hire-body { transform: translateY(24px); transition: transform 0.6s var(--ease); } .hire-card:hover .hire-body { transform: translateY(0); } /* CTA reserves its height; fades + slides in on hover */ .hire-cta-wrap { transform: translateY(16px); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); } .hire-card:hover .hire-cta-wrap { transform: translateY(0); opacity: 1; } } /* ===== section: why-it-works ===== */ /* ===== why-it-works (Voyage features-list treatment) prefix why- ===== */ .why-sec{ padding:64px 0; background:var(--color-bg); } .why-wrap{ max-width:1280px; margin:0 auto; padding:0 16px; display:flex; flex-direction:column; gap:32px 70px; align-items:flex-start; } /* left: sticky placeholder brand graphic */ .why-media{ width:100%; align-self:stretch; } /* placeholder brand graphic: decorative gradient, not tokenized (replaced in the graphic step) */ .why-art{ position:relative; width:100%; aspect-ratio:5/6; background: radial-gradient(140% 120% at 75% 8%, #ffffff 0%, var(--color-surface) 38%, #f3e8d6 100%); border:1px solid var(--color-dark); border-radius:16px; overflow:hidden; } /* real graphic: tall portrait image fills the panel, crops its empty top/bottom margins. .why-art keeps a warm-cream gradient bg as the load fallback behind the image. */ .why-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* right: heading + feature list */ .why-body{ width:100%; } .why-h2{ margin:0 0 40px; font-family:var(--headline-font); font-size:28px; font-weight:var(--headline-weight); line-height:1.19; letter-spacing:-0.02em; color:var(--color-heading); } .why-list{ display:flex; flex-direction:column; } .why-item{ display:flex; align-items:flex-start; gap:14px; padding:24px 0; border-bottom:2px solid var(--color-dark); } .why-item:first-child{ padding-top:0; } .why-item:last-child{ border-bottom:none; } .why-ico{ flex:0 0 auto; width:32px; height:32px; margin-top:2px; } .why-itxt h3{ margin:0 0 6px; font-family:var(--headline-font); font-size:20px; font-weight:var(--headline-weight); line-height:1.17; letter-spacing:-0.02em; color:var(--color-heading); } .why-itxt p{ margin:0; font-family:var(--body-font); font-size:16px; font-weight:400; line-height:1.5; color:var(--color-text); } /* phone + iPad: a WIDE, short crop of the portrait art (Voyage-style feature strip, Fred 2026-06-24). object-fit:cover on a landscape box keeps a horizontal band through the knot; object-position tuned to frame it. The >=1024 sticky portrait column is untouched. */ @media (max-width:639px){ .why-media{ width:100%; max-width:none; margin:0; } .why-art{ aspect-ratio:16/9; } .why-art img{ object-position:center 46%; } } @media (min-width:640px) and (max-width:1100px){ .why-media{ width:100%; max-width:none; margin:0; } .why-art{ aspect-ratio:21/9; } .why-art img{ object-position:center 46%; } } @media (min-width:640px){ .why-sec{padding:96px 0;} .why-h2{font-size:48px;} } @media (min-width:1101px){ .why-wrap{ flex-direction:row; } .why-media{ width:41.6667%; position:sticky; top:96px; align-self:flex-start; } .why-art{ aspect-ratio:auto; height:620px; } .why-body{ width:58.3333%; } .why-h2{ font-size:48px; margin-bottom:40px; max-width:520px; } .why-item{ padding:30px 0; } .why-itxt h3{font-size:24px;} } @media (min-width:640px){ .why-wrap{padding:0 24px;} } /* ===== section: works-with ===== */ /* ======================= works-with (Voyage "Deploy Anywhere") ======================= */ .tools-section { position: relative; overflow: hidden; max-width: 1280px; margin: 0 auto; padding: 64px 16px; } /* faint converging-burst field behind the section (our take on Voyage's deploy-bg.png) */ .tools-bg { position: absolute; z-index: 0; top: 50%; left: 0; width: 720px; height: 720px; transform: translate(-44%, -50%); color: var(--color-accent); opacity: 0.06; pointer-events: none; } .tools-layout { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; } .tools-head { flex: none; } .tools-h2 { margin: 0 0 40px; font-family: var(--headline-font); font-size: 28px; font-weight: var(--headline-weight); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-heading); max-width: 360px; } .tools-grid { display: flex; flex-direction: column; gap: 24px; } .tools-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; background: var(--color-surface); border: var(--border-pop); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 22px; min-height: 208px; } /* whole card opens the booking popup (Fred 2026-06-24: the cards read as clickable; now they are). Stretched transparent link over the card; the corner arrow already signals the affordance. */ .tools-link { position: absolute; inset: 0; z-index: 5; border-radius: 14px; } /* faint line pattern, fades in toward the bottom-right corner (Voyage deploy-card treatment) */ .tools-pattern { position: absolute; inset: 0; z-index: 0; color: var(--color-accent); opacity: 0.5; pointer-events: none; -webkit-mask-image: linear-gradient(135deg, transparent 42%, #000 104%); mask-image: linear-gradient(135deg, transparent 42%, #000 104%); } .tools-pattern svg { display: block; width: 100%; height: 100%; } /* keep icon + copy above the pattern */ .tools-card .tools-icon, .tools-card .tools-text { position: relative; z-index: 1; } /* text anchors to the card bottom (icon top, text bottom, like Voyage) */ .tools-card .tools-text { margin-top: auto; } .tools-icon { width: 40px; height: 40px; display: block; } /* social card: compact brand-logo strip under the copy (the card also has a normal icon) */ .tools-social-row { position: relative; z-index: 1; order: 9; /* flex order: icon, copy, then this strip at the bottom */ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } .tools-social-row svg { width: 20px; height: 20px; display: block; } .tools-more { font-family: var(--body-font); font-size: 11px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; } .tools-h3 { margin: 0 0 8px; font-family: var(--headline-font); font-size: 20px; font-weight: var(--headline-weight); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-heading); } .tools-body { margin: 0; max-width: 320px; font-family: var(--body-font); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-text); } /* white backing triangle (slightly larger, behind mint) for a crisp diagonal edge */ .tools-corner-bg { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 85px solid var(--color-bg); border-left: 85px solid transparent; z-index: 1; } /* mint corner triangle, top-right */ .tools-corner { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 80px solid var(--color-pop); border-left: 80px solid transparent; z-index: 2; } /* arrow glyph sitting inside the triangle near the corner */ .tools-arrow { position: absolute; top: 12px; right: 12px; z-index: 3; color: var(--color-on-pop); transition: transform 0.3s var(--ease); } .tools-card:hover .tools-arrow { transform: rotate(-45deg); } @media (min-width: 640px) { .tools-card { padding: 32px; } .tools-icon { width: 56px; height: 56px; } .tools-social-row { gap: 7px; } .tools-social-row svg { width: 21px; height: 21px; } .tools-h3 { margin-bottom: 16px; } } @media (min-width: 640px) { .tools-section { padding: 96px 24px; } .tools-h2 { font-size: 48px; } } /* iPad portrait (768-1023): head on top, cards in a 2x2 grid (4 stacked was too much; Fred 2026-06-24) */ @media (min-width: 641px) and (max-width: 1100px) { .tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .tools-card { min-height: 240px; } } /* desktop only: head left (1/3), 2x2 card grid right (2/3) */ @media (min-width: 1101px) { .tools-layout { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; } .tools-head { width: 33.333%; } .tools-h2 { font-size: 48px; } .tools-grid { width: 66.666%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; } .tools-card { min-height: 284px; } .tools-h3 { font-size: 28px; } } /* ===== section: founder ===== */ /* ===== founder section (prefix founder-) ===== */ .founder{ background:var(--color-surface); padding:64px 16px; } .founder-inner{ max-width:1280px; margin:0 auto; } /* no section header (dropped 2026-06-09): the card speaks for itself */ .founder-card{ max-width:760px; margin:0 auto; background:var(--color-bg); border:var(--border-pop); border-radius:20px; box-shadow:var(--shadow-pop); padding:32px 24px; display:flex; flex-direction:column; gap:24px; } .founder-top{ display:flex; justify-content:center; align-items:center; gap:20px; } .founder-portrait{ flex:0 0 auto; width:80px; height:80px; border-radius:9999px; object-fit:cover; object-position:50% 18%; } .founder-meta{ display:flex; flex-direction:column; gap:2px; } .founder-name{ font-family:var(--body-font); font-size:18px; font-weight:500; line-height:1.3; color:var(--color-heading); } .founder-role{ font-family:var(--body-font); font-size:15px; font-weight:400; line-height:1.4; color:var(--color-text-muted); } .founder-body{ margin:0 auto; font-family:var(--body-font); font-size:18px; font-weight:400; line-height:1.6; color:var(--color-text); max-width:680px; text-align:center; } .founder-links{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; } .founder-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body-font); font-size:15px; font-weight:600; color:var(--color-on-dark); background:var(--color-accent); border:2px solid var(--color-dark); border-radius:9999px; padding:9px 20px; box-shadow:3px 3px 0 var(--color-dark); transition:transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s var(--ease); } /* hierarchy: Call now stays orange (primary); Email + WhatsApp are white outline (secondary) */ .founder-link:nth-child(n+2){ background:var(--color-bg); color:var(--color-dark); } .founder-link:nth-child(n+2) svg{ color:var(--color-accent); } .founder-link svg{ width:16px; height:16px; } /* WhatsApp icon in the real brand green wherever the link appears (overrides the accent-orange) */ .founder-links .founder-link[href*="wa.me"] svg, .bk-alt-links .bk-alt-link[href*="wa.me"] svg{ color:var(--brand-whatsapp); } .founder-link:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--color-dark); } @media (min-width:640px){ .founder{padding:96px 24px;} .founder-card{padding:40px;} } @media (min-width:641px){ .founder-portrait{width:88px;height:88px;} .founder-name{font-size:20px;} } /* ===== section: faq ===== */ /* ===== § faq (prefix faq-) ===== */ .faq-section { background: var(--color-surface-2); padding: 64px 16px; } .faq-inner { max-width: 780px; margin: 0 auto; } .faq-title { font-family: var(--headline-font); font-size: 28px; font-weight: var(--headline-weight); line-height: 1.25; letter-spacing: -0.02em; color: var(--color-heading); margin: 0 0 40px; text-align: center; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { border: var(--border-pop); border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow-pop-sm); padding: 0 20px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); } .faq-item:hover { border-color: var(--color-accent); box-shadow: 3px 3px 0 var(--color-accent); } .faq-item[open] { border-color: var(--color-accent); background: var(--color-surface-accent); box-shadow: 4px 4px 0 var(--color-accent); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--headline-font); font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-heading); } .faq-q::-webkit-details-marker { display: none; } .faq-chevron { flex: 0 0 auto; color: var(--color-accent); transition: transform 0.25s var(--ease); } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-a { font-family: var(--body-font); font-size: 16px; font-weight: 400; line-height: 24px; color: var(--color-text); margin: 0 0 20px; max-width: 620px; } @media (min-width: 640px) { .faq-section { padding: 96px 24px; } .faq-title { font-size: 48px; margin-bottom: 40px; } .faq-q { font-size: 20px; } } /* ===== section: final-cta ===== */ /* ===== final-cta (dark closing band, M2 art LOCKED 2026-06-11) ===== */ .cta-band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%); padding: 96px 16px; } /* soft sunrise glow across the band (black png, screen blend) */ .cta-glow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; } /* keyed ember arcs, hero-corner placement: top-left + bottom-right rotated */ .cta-art { position: absolute; z-index: 1; width: 560px; height: auto; max-width: none; pointer-events: none; } .cta-art-top { top: 0; left: 0; transform: translate(-28%, -34%); } .cta-art-bottom { bottom: 0; right: 0; transform: translate(28%, 34%) rotate(180deg); } /* mobile: keep the arcs corner accents, not a wash (same move as the hero nebula) */ @media (max-width: 639px) { .cta-art { width: 300px; } } .cta-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; } /* band button: same dark pill, accent outline so it reads on the dark band */ .cta-band .btn-pill { border: 2px solid var(--color-accent); } .cta-title { max-width: 820px; margin: 0 0 20px; font-family: var(--headline-font); font-size: 40px; font-weight: var(--headline-weight); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-bg); } .cta-sub { max-width: 560px; margin: 0 0 40px; font-family: var(--body-font); font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--color-on-dark); } @media (min-width: 640px) { .cta-band { padding-top: 128px; padding-bottom: 128px; padding-left: 24px; padding-right: 24px; } .cta-title { font-size: 56px; } .cta-sub { font-size: 20px; } } /* ===== section: footer ===== */ /* ===== footer (Voyage sec 9 treatment, prefix ftr-) ===== */ /* .ftr footer chrome moved to chrome.css (see the header note above). 2026-06-23 */ /* ===== /win giveaway page (prefix win-) ===== */ /* hero reuses .hero/.hero-inner/.hero-title/.hero-sub: SAME font sizes + spacing as the homepage. */ /* H1: phone + tablet keep it in a narrow centered column so the lines stay clear of the gift decor (the long nowrap line ran under the top-right gift across 768-1099). The locked 2-line nowrap is a wide-desktop design, released only at >=1100 where there is room for it. */ .win-hero .hero-title { max-width: 540px; } .win-hero .hero-title .hl-line { display: block; } @media (min-width: 1100px) { .win-hero .hero-title { max-width: none; } .win-hero .hero-title .hl-line { white-space: nowrap; } } /* floating gift decor: ONLY on the plain #FAF7F2 bg, never over the corner nebula art (Fred 2026-06-14) */ .win-gifts { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .win-gift { position: absolute; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(40, 25, 10, 0.12)); } /* right cluster (top-right cream zone, clear of the bottom-right nebula) */ .win-gift[data-gift="gift-box-bow"] { top: 41%; right: 17%; width: 100px; transform: rotate(-8deg); } .win-gift[data-gift="gift-open-glow"] { top: 25%; right: 9%; width: 92px; transform: rotate(6deg); } .win-gift[data-gift="sparkle-star"] { top: 12%; right: 27%; width: 54px; } /* left cluster (bottom-left cream zone, clear of the top-left nebula) */ .win-gift[data-gift="gift-stack"] { bottom: 12%; left: 7%; width: 100px; transform: rotate(6deg); } .win-gift[data-gift="sparkle-left"] { top: 50%; left: 16%; width: 54px; } /* mobile: hide the decor until the responsive pass places it on the scaled-down nebula bg */ @media (max-width: 639px) { .win-gifts { display: none; } } /* the clear + conspicuous disclosure lines, sit right under the CTA (FTC near-CTA rule) */ .win-microcopy { max-width: 480px; margin: 18px auto 0; text-align: center; font-family: var(--body-font); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--color-text); } .win-microcopy span { display: block; } .win-microcopy .win-mc-strong { margin-bottom: 2px; } /* mobile + iPad: lift the disclosure onto a solid chip so the corner nebula art behind it does not kill legibility (Fred 2026-06-24). Desktop sits in clear space, left unchanged. */ @media (max-width: 1100px) { .win-microcopy { position: relative; z-index: 2; background: var(--color-bg); border: 1px solid rgba(40, 25, 10, 0.12); border-radius: 14px; padding: 12px 18px; box-shadow: 0 6px 18px rgba(40, 25, 10, 0.10); } } /* festive confetti for the giveaway hero: decorative, above the nebula, behind the text */ .win-confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .win-confetti i { position: absolute; width: 9px; height: 16px; border-radius: 2px; opacity: 0.85; } /* colours cycle: amber accent, warm orange, gold, rust */ .win-confetti i:nth-child(4n + 1) { background: var(--color-accent); } .win-confetti i:nth-child(4n + 2) { background: #e8915a; } .win-confetti i:nth-child(4n + 3) { background: #e3b23c; } .win-confetti i:nth-child(4n + 4) { background: #b1442a; } /* every third piece is a round dot for variety */ .win-confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; } /* scatter: top corners + sides dense, centre column left clear for the text */ .win-confetti i:nth-child(1) { top: 8%; left: 6%; transform: rotate(18deg); } .win-confetti i:nth-child(2) { top: 14%; left: 13%; transform: rotate(-22deg); } .win-confetti i:nth-child(3) { top: 22%; left: 4%; transform: rotate(40deg); } .win-confetti i:nth-child(4) { top: 6%; left: 21%; transform: rotate(-12deg); } .win-confetti i:nth-child(5) { top: 31%; left: 9%; transform: rotate(8deg); } .win-confetti i:nth-child(6) { top: 7%; left: 90%; transform: rotate(-28deg); } .win-confetti i:nth-child(7) { top: 13%; left: 82%; transform: rotate(20deg); } .win-confetti i:nth-child(8) { top: 22%; left: 93%; transform: rotate(-44deg); } .win-confetti i:nth-child(9) { top: 9%; left: 74%; transform: rotate(12deg); } .win-confetti i:nth-child(10) { top: 30%; left: 88%; transform: rotate(-8deg); } .win-confetti i:nth-child(11) { top: 44%; left: 3%; transform: rotate(30deg); } .win-confetti i:nth-child(12) { top: 46%; left: 95%; transform: rotate(-18deg); } .win-confetti i:nth-child(13) { top: 70%; left: 7%; transform: rotate(-20deg); } .win-confetti i:nth-child(14) { top: 82%; left: 12%; transform: rotate(36deg); } .win-confetti i:nth-child(15) { top: 89%; left: 5%; transform: rotate(-40deg); } .win-confetti i:nth-child(16) { top: 74%; left: 90%; transform: rotate(24deg); } .win-confetti i:nth-child(17) { top: 84%; left: 84%; transform: rotate(-30deg); } .win-confetti i:nth-child(18) { top: 90%; left: 93%; transform: rotate(14deg); } /* shared content section wrapper */ .win-sec { padding: 64px 16px; } .win-sec.is-surface { background: var(--color-surface); } .win-inner { max-width: 1280px; margin: 0 auto; } .win-h2 { margin: 0 0 40px; font-family: var(--headline-font); font-size: 28px; font-weight: var(--headline-weight); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-heading); text-align: center; } .win-lead { max-width: 620px; margin: 0 auto 16px; text-align: center; font-family: var(--body-font); font-size: 18px; line-height: 1.6; color: var(--color-text); } .win-lead:last-child { margin-bottom: 0; } /* ===== prize section: homepage tools-card style + faint prize burst ===== */ .win-prize { position: relative; overflow: hidden; } .win-prize-bg { position: absolute; z-index: 0; top: 50%; left: 50%; width: 460px; height: 460px; transform: translate(-50%, -50%); color: var(--color-accent); opacity: 0.06; pointer-events: none; } .win-prize .win-inner { position: relative; z-index: 1; } .win-prize-grid { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; } .win-prize-cell { display: flex; flex-direction: column; gap: 10px; } /* win prize cards: top-align text under the icon (override the homepage bottom-anchor) */ .win-prize-cell { align-items: stretch; } .win-prize-cell .tools-card { width: 100%; flex: 1; } .win-prize-cell .tools-card .tools-text { margin-top: 28px; } @media (min-width: 641px) { .win-prize-grid { flex-direction: row; align-items: stretch; } .win-prize-cell { flex: 1; min-width: 0; } } /* entry form */ .win-form { max-width: 560px; margin: 40px auto 0; background: var(--color-surface); border: var(--border-pop); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 28px 22px; display: flex; flex-direction: column; gap: 18px; } .win-field { display: flex; flex-direction: column; gap: 6px; } .win-field label { font-family: var(--body-font); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-heading); } .win-field .opt { background: var(--color-pop); color: var(--color-dark); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--color-accent); border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; } .win-field input, .win-field textarea { font-family: var(--body-font); font-size: 16px; color: var(--color-dark); background: var(--color-bg); border: 1.5px solid var(--color-dark); border-radius: 12px; box-shadow: 2px 2px 0 rgba(28, 25, 23, 0.18); padding: 12px 14px; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .win-field input:hover, .win-field textarea:hover { border-color: var(--color-text-muted); } .win-field textarea { min-height: 84px; resize: vertical; } .win-field input:focus, .win-field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 3px 3px 0 var(--color-accent); } .win-check { display: flex; align-items: flex-start; gap: 10px; font-family: var(--body-font); font-size: 14px; line-height: 1.5; color: var(--color-text); } .win-check input { appearance: none; -webkit-appearance: none; margin: 1px 0 0; flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--color-dark); border-radius: 5px; background: var(--color-bg); cursor: pointer; display: grid; place-content: center; transition: background 0.15s ease; } .win-check input::before { content: ""; width: 11px; height: 11px; background: var(--color-bg); transform: scale(0); transition: transform 0.12s ease; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); } .win-check input:checked { background: var(--color-accent); } .win-check input:checked::before { transform: scale(1); } .win-check input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .win-check a { color: var(--color-accent); text-decoration: underline; } .win-form .btn-pill { width: 100%; justify-content: center; padding: 14px 24px; margin-top: 4px; } .win-form .btn-pill .btn-circle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } .win-form-micro { margin: 0; font-family: var(--body-font); font-size: 13px; line-height: 1.5; color: var(--color-text); } .win-pool { max-width: 680px; margin: 20px auto 0; text-align: center; font-family: var(--body-font); font-size: 14px; line-height: 1.5; color: var(--color-text); } /* official rules: a single accordion, reuses the faq-item box */ .win-rules { background: var(--color-surface-2); padding: 64px 16px; } .win-rules-inner { max-width: 780px; margin: 0 auto; } .win-rules-text { padding: 0 0 20px; font-family: var(--body-font); font-size: 15px; line-height: 1.6; color: var(--color-text); } .win-rules-text h4 { margin: 16px 0 4px; font-family: var(--headline-font); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--color-heading); } .win-rules-text p { margin: 0; } .win-rules-text p + h4 { margin-top: 16px; } .win-rules-text a { color: var(--color-accent); text-decoration: underline; } @media (min-width: 640px) { .win-sec { padding: 96px 24px; } .win-h2 { font-size: 48px; } .win-rules { padding: 96px 24px; } .win-form { max-width: 680px; padding: 36px 32px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 20px; align-items: start; } .win-form .win-field--full, .win-form .win-check, .win-form .win-form-micro, .win-form .btn-pill { grid-column: 1 / -1; } } /* ===== /about page (prefix about-) ===== */ /* why-me (founder story: overview list. Locked 2026-06-18). Photo left, body right, heading + accent rule + lead + career list with the homepage "What you get" 2px dividers. */ .about-why { background: var(--color-surface); padding: 64px 16px; } .about-why-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 36px; } .about-why-photo { flex: 0 0 auto; } .about-why-photo img { width: 200px; height: 250px; object-fit: cover; object-position: 50% 16%; border-radius: 16px; border: var(--border-pop); box-shadow: var(--shadow-pop); } .about-why-body { width: 100%; max-width: 640px; } .about-why-h2 { margin: 0 0 40px; font-family: var(--headline-font); font-size: 28px; font-weight: var(--headline-weight); line-height: 1.1; letter-spacing: -0.03em; color: var(--color-heading); } .about-why-rule { display: block; width: 48px; height: 3px; background: var(--color-accent); border-radius: 2px; margin: 0 0 24px; } .about-why-lead { margin: 0 0 22px; font-family: var(--headline-font); font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-heading); } .about-why-list { margin: 0; padding: 0; display: flex; flex-direction: column; } .about-why-li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 2px solid var(--color-dark); font-family: var(--body-font); font-size: 17px; line-height: 1.45; color: var(--color-text); } .about-why-li:first-child { padding-top: 0; } .about-why-li:last-child { border-bottom: none; } .about-why-mk { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 6px; border-radius: 50%; background: var(--color-bg); border: var(--border-pop); } .about-why-li--now { font-weight: 600; color: var(--color-heading); } .about-why-li--now .about-why-mk { background: var(--color-accent); } /* mobile: photo sits UNDER the "Why me" heading, not above it (Fred 2026-06-24). display:contents promotes the body's children into the inner flex so the photo can be ordered between header + text. Only mobile; the >=768 two-column layout is untouched. */ @media (max-width: 640px) { .about-why-inner { align-items: stretch; gap: 0; } .about-why-body { display: contents; } .about-why-h2 { order: 1; } .about-why-rule { order: 2; } .about-why-photo { order: 3; align-self: flex-start; margin: 8px 0 28px; } .about-why-lead { order: 4; } .about-why-list { order: 5; } } @media (min-width: 640px) { .about-why { padding: 96px 24px; } .about-why-h2 { font-size: 48px; } } @media (min-width: 641px) { .about-why-inner { flex-direction: row; align-items: flex-start; gap: 64px; } .about-why-photo { position: sticky; top: 96px; } .about-why-photo img { width: 240px; height: 300px; } .about-why-body { flex: 1; } } /* testimonials: 2-up sticker-pop quote cards */ .about-quotes { background: var(--color-bg); padding: 64px 16px; } .about-quotes-inner { max-width: 1280px; margin: 0 auto; } .about-quotes-h2 { margin: 0 0 40px; text-align: center; font-family: var(--headline-font); font-size: 28px; font-weight: var(--headline-weight); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-heading); } .about-quotes-grid { display: flex; flex-direction: column; gap: 24px; } .about-quote { display: flex; flex-direction: column; gap: 16px; margin: 0; background: var(--color-surface); border: var(--border-pop); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 28px 24px; } .about-quote-text { margin: 0; font-family: var(--body-font); font-size: 18px; line-height: 1.55; color: var(--color-text); } .about-quote-by { display: flex; align-items: center; gap: 12px; } .about-quote-avatar { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: var(--border-pop); } .about-quote-avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--color-pop); color: var(--color-dark); font-family: var(--headline-font); font-size: 20px; font-weight: 400; line-height: 1; } .about-quote-byline { display: flex; flex-direction: column; gap: 2px; } .about-quote-name { font-family: var(--body-font); font-size: 16px; font-weight: 600; color: var(--color-heading); } .about-quote-meta { font-family: var(--body-font); font-size: 14px; color: var(--color-text-muted); } @media (min-width: 640px) { .about-quotes { padding: 96px 24px; } .about-quotes-h2 { font-size: 48px; margin-bottom: 40px; } } @media (min-width: 641px) { .about-quotes-grid { flex-direction: row; align-items: stretch; } .about-quote { flex: 1; min-width: 0; } } /* /about hero: dark, centered, two embers, no eyebrow (C2 locked 2026-06-17). */ .about-hero-c { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%); padding: 132px 16px 80px; } .ah-c-wrap { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; } .ah-c-title { margin: 0 0 20px; font-family: var(--headline-font); font-size: 40px; font-weight: var(--headline-weight); line-height: 1.1; letter-spacing: -0.03em; color: var(--color-bg); text-wrap: balance; } .ah-c-title .accent { color: var(--color-pop); } .ah-c-sub { margin: 0 0 36px; max-width: 540px; font-family: var(--body-font); font-size: 19px; line-height: 1.5; color: var(--color-on-dark); text-wrap: pretty; } .about-hero-c .btn-pill { border: 2px solid var(--color-accent); } @media (min-width: 641px) { .about-hero-c { padding: 212px 24px 120px; } .ah-c-title { font-size: 60px; } .ah-c-sub { font-size: 21px; } } /* ===== /about roles section: my career mapped to the 3 AI hires (compact cards) ===== */ .about-roles { background: var(--color-surface); padding: 64px 0; } .about-roles-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; } .about-roles-h2 { max-width: none; margin: 0 0 40px; font-family: var(--headline-font); font-size: 28px; font-weight: var(--headline-weight); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-heading); } .about-roles-grid { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .about-role { background: var(--color-bg); border: var(--border-pop); border-radius: 14px; box-shadow: var(--shadow-pop-sm); padding: 22px; } .about-role-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .about-role-icon { width: 40px; height: 40px; flex: 0 0 auto; } .about-role-name { margin: 0; font-family: var(--headline-font); font-size: 20px; font-weight: var(--headline-weight); letter-spacing: -0.02em; color: var(--color-heading); } .about-role-text { margin: 0; font-family: var(--body-font); font-size: 15px; line-height: 1.55; color: var(--color-text); } @media (min-width: 640px) { .about-roles-h2 { font-size: 48px; line-height: 1; } } @media (min-width: 640px) { .about-roles { padding: 96px 0; } .about-roles-inner { padding: 0 24px; } } @media (min-width: 641px) and (max-width: 1100px) { /* iPad: 2 across, third card centers on its own row (mirrors the homepage hires; 3 across is too cramped below 1101) */ .about-roles-grid { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; align-items: stretch; } .about-role { flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); min-width: 0; } } @media (min-width: 1101px) { /* desktop: 3 across, equal height (Fred 2026-06-18) */ .about-roles-grid { flex-direction: row; gap: 20px; align-items: stretch; } .about-role { flex: 1; min-width: 0; } } /* closing line + book CTA under the 3 role cards */ .about-roles-cta { margin-top: 40px; text-align: center; } .about-roles-cta-line { max-width: 640px; margin: 0 auto 20px; font-family: var(--body-font); font-size: 18px; line-height: 1.4; color: var(--color-heading); } .about-roles-cta .btn-pill { display: inline-flex; } /* honor reduced-motion: drop transitions + animations on the main pages (a11y; chrome.css scopes its own for the shared header/footer). 2026-06-25 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }