/* ============================================================ Splash page (landing/templates/landing/splash.html) ------------------------------------------------------------ Ported from the approved synthesis mockup (assets/dna-coachassist-splash-synthesis.html). Two deliberate deviations from the mockup: - typography uses the app faces (Fraunces display / Archivo body) rather than the mockup's Georgia / Calibri; - the colour story (navy / teal / gold on warm paper) lives in --splash-* custom properties declared on .splash itself, NOT in tokens.css. That keeps the page fixed-light: theme.js flipping data-bs-theme on cannot reach these values. Layout scale: every card shares --splash-card-pad / --splash-radius, every grid shares --splash-gap. Breakpoints: 1000px (steps re-flow), 860px (grids stack), 767.98px (Bootstrap md: mobile type scale + the sticky CTA bar appears). Background rhythm: NO two adjacent sections share a background. The page alternates white (#fff, always with hairline top/bottom borders) and paper (--splash-paper, the body default, set by omitting any background), with navy used three times as punctuation: the hero, the creed, and pricing. In DOM order: hero NAVY / trust PAPER / market WHITE / steps PAPER / deliv WHITE / workflow PAPER / cat WHITE / creed NAVY / credpath PAPER / testi WHITE / pricing NAVY / team PAPER / final WHITE Cards invert against their section: paper cards on white sections (.qcard, .dcard), white cards on paper sections (.workflow .dcard, .credpath .dcard). If you reorder or insert a section, re-check both this list and the card backgrounds. Every rule is scoped under .splash so nothing leaks into custom.css, which still serves the legal and imprint pages. ============================================================ */ .splash { --splash-navy: #0c1b35; --splash-navy-2: #1b2a5e; --splash-teal: #00c4bd; --splash-teal-2: #00c9a7; --splash-gold: #c9952a; --splash-ink: #1a2333; --splash-muted: #5b6577; --splash-paper: #faf8f4; --splash-line: #e6e2d9; --splash-radius: 10px; --splash-card-pad: 28px; --splash-gap: 24px; color: var(--splash-ink); background: var(--splash-paper); line-height: 1.55; font-size: 17px; font-family: var(--bs-body-font-family); } .splash h1, .splash h2, .splash h3, .splash .serif { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; margin: 0; line-height: 1.2; /* Balance headline line lengths instead of leaving one-word last lines */ text-wrap: balance; /* German compounds are longer than a phone column - "Zusammenfassungs- maschine" in the creed heading needs 396px against the 304px a 360px screen has, and an unbreakable word does not stretch its own box, so it silently scrolled the whole page sideways. Hyphenate where the language has rules for it, and break mid-word only as the last resort. */ -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* Same safety net for body copy: the cards are narrow columns on a phone. */ .splash p, .splash li { overflow-wrap: break-word; } .splash p, .splash ul { margin: 0; } /* Avoid orphan words (a lone word wrapping onto its own final line) in prose */ .splash p { text-wrap: pretty; } .splash a { text-decoration: none; color: inherit; } .splash .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; } .splash section { padding: 88px 0; } /* Anchor targets land below the sticky nav (62px) with breathing room */ .splash section[id] { scroll-margin-top: 78px; } .splash .kicker { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--splash-gold); margin-bottom: 14px; font-weight: 700; } /* ---- CENTERED SECTION INTROS ---- Each content section leads with a centered column (kicker + heading + supporting paragraph) above a full-width card grid. text-align is set on the intro elements only, never on the grids, so card internals stay left-aligned. Constrained (max-width) paragraphs also get auto side margins so the block itself centers, not just its text. Hero, market and the transcript demo keep their asymmetric two-column layouts. */ .splash .steps .kicker, .splash .steps h2, .splash .deliv .kicker, .splash .deliv h2, .splash .deliv .sub, .splash .workflow .kicker, .splash .workflow h2, .splash .workflow .sub, .splash .cat .kicker, .splash .cat h2, .splash .cat .sub, .splash .cat .more, .splash .cat .catmore, .splash .credpath .kicker, .splash .credpath h2, .splash .credpath .sub, .splash .creed .kicker, .splash .creed h2, .splash .creed .lead, .splash .team .kicker, .splash .team h2, .splash .team .sub { text-align: center; } .splash .steps h2, .splash .deliv .sub, .splash .workflow .sub, .splash .cat .sub, .splash .cat .more, .splash .credpath .sub, .splash .creed .lead, .splash .team .sub { margin-left: auto; margin-right: auto; } /* Small gold card label (deliverable/workflow cards, team creds strip) */ .splash .tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--splash-gold); font-weight: 700; margin-bottom: 10px; } .splash .btn { display: inline-block; padding: 14px 28px; border-radius: 6px; font-weight: 700; font-size: 16px; border: 0; transition: opacity 0.15s; } .splash .btn:hover { opacity: 0.88; } .splash .btn-primary, .splash .btn-primary:hover, .splash .btn-primary:focus, .splash .btn-primary:active { background: var(--splash-teal); color: var(--splash-navy); border-color: var(--splash-teal); } .splash .btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.4); color: #fff; } .splash .btn-outline-navy { border: 1.5px solid rgba(12, 27, 53, 0.35); color: var(--splash-navy); } /* ---- NAV ---- */ .splash-nav { position: sticky; top: 0; background: var(--splash-navy); z-index: 50; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } /* Wider than the page's 1080px content wrap on purpose - the nav is chrome, not reading content, so it can use more of the available width. */ .splash-nav .wrap { display: flex; align-items: center; justify-content: space-between; /* A floor on the logo-to-links distance. space-between on its own gives no floor: once the links overflow it collapses to zero and the first link sits on the wordmark, which is exactly how the long DE/ES/FR labels used to fail. */ gap: 24px; height: 62px; max-width: 1160px; } .splash-nav .logo { display: flex; align-items: center; gap: 9px; /* Never surrender width to the links: the wordmark is one unbreakable word, so shrinking its box can only push it underneath them. */ flex-shrink: 0; font-family: var(--font-display); color: #fff; font-size: 19px; } /* SIZING (measured against the real Archivo/Fraunces metrics - re-measure before loosening any of it). The 1160px wrap leaves 1104px of content and the logo block takes 196px. English needs 640px of link ink (six anchors + sign-in + the padded CTA), so the seven gaps carry all the slack: at 26px the row lands ~840px wide, and it still fits down to a ~990px viewport once the gap has shrunk to 14px. Below the breakpoint at the end of this block the section links are hidden outright. Every translated row must therefore stay at or under the English width, which is why the nav has its own short `context "splash nav"` strings instead of reusing the longer section kickers: the literal DE/ES/FR translations ran 39px/158px/296px over the old 1080px wrap. */ .splash-nav .navlinks { display: flex; gap: clamp(14px, 1.9vw, 26px); align-items: center; font-size: 15px; } .splash-nav .navlinks a { color: rgba(255, 255, 255, 0.82); /* Wrapping is never the right answer here - a two-line link grows the row, which eats the gap above it and drives the links into the wordmark. */ white-space: nowrap; } .splash-nav .navlinks a:hover { color: #fff; } /* BASELINE ALIGNMENT (do not remove without re-measuring). The wrap centres each item's line box, which leaves the 19px serif logo and the 15px sans links sitting on two different baselines 2px apart. That gap is what reads as "the logo is not centred", not the helix (its artwork is centred in its own canvas to within 0.04px at this size). Dropping the text links 2px puts both on one baseline AND happens to keep the combined ink block centred in the 62px bar (off by 0.5px, versus 2.5px high if the logo is raised to meet the links instead). The CTA is excluded on purpose: it is a padded box, so it stays centred on its own geometry rather than baseline-aligning with body text. */ .splash-nav .navlinks a:not(.btn) { position: relative; top: 2px; } /* Sign in is an account action, not a section anchor, so it is teal rather than white and sits after the CTA. */ .splash-nav .navlinks a.nav-signin { color: var(--splash-teal); } .splash-nav .navlinks a.nav-signin:hover { color: #fff; } .splash-nav .navlinks .btn { padding: 9px 18px; font-size: 14px; } /* The nav CTA is the same teal button as the in-page CTAs, but the nav sits outside .splash, so `.splash .btn-primary` never reaches it and the white `.splash-nav .navlinks a` link colour wins instead - which is how it ended up white-on-teal while the hero button was navy-on-teal. Restated here with the class on the anchor so it beats that link rule. */ .splash-nav .navlinks a.btn-primary, .splash-nav .navlinks a.btn-primary:hover, .splash-nav .navlinks a.btn-primary:focus, .splash-nav .navlinks a.btn-primary:active { background: var(--splash-teal); color: var(--splash-navy); border-color: var(--splash-teal); } /* Was 860px, which left a band where the links neither fitted nor were hidden, so they wrapped onto a second line. The English row needs ~990px of viewport at its tightest gap; 1080 keeps a margin for the classic scrollbar and for translations sitting a little over English. */ @media (max-width: 1080px) { .splash-nav .navlinks a:not(.btn):not(.nav-signin) { display: none; } } /* PHONES. Hiding the section links is not enough: what is left (the 192px logo block, a 24px gap, the CTA and sign-in) still needs 401px in English and 480px in DE/ES, so on a 360px phone the nav - and only the nav - was wider than the viewport and the whole page scrolled sideways, sliding the navy bands off the right edge. The CTA is the widest piece and the most redundant one: signup is already carried by the hero, the pricing cards, the closing section and the sticky bottom bar, while sign-in has nowhere else to live. So the phone bar is the wordmark plus sign-in, which lands at ~300px in the worst language (DE), leaving headroom on a 320px screen and for translations that run over English. Re-measure at 360px before adding anything back to this row. */ @media (max-width: 560px) { .splash-nav .wrap { gap: 12px; padding: 0 16px; } .splash-nav .navlinks a.btn-primary { display: none; } .splash-nav .navlinks { gap: 10px; font-size: 14px; } } /* ---- HERO ---- */ .splash .hero { background: linear-gradient(160deg, var(--splash-navy) 0%, var(--splash-navy-2) 100%); color: #fff; padding: 80px 0 64px; } .splash .hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .splash .hero h1 { font-size: 46px; line-height: 1.12; margin-bottom: 22px; } .splash .hero h1 em { font-style: normal; color: var(--splash-teal); } .splash .hero p.lead { font-size: 19px; color: rgba(255, 255, 255, 0.85); max-width: 520px; margin-bottom: 30px; } .splash .hero .fine { font-size: 14px; color: rgba(255, 255, 255, 0.55); margin-top: 16px; } .splash .heroctas { display: flex; gap: 14px; flex-wrap: wrap; } /* transcript card */ .splash .tcard-col { min-width: 0; } .splash .tcard { background: #fff; border-radius: var(--splash-radius); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); overflow: hidden; color: var(--splash-ink); } .splash .tcard-disclaimer { margin: 6px 0 0; text-align: left; font-size: 11px; color: #9099ab; } .splash .tcard .thead { background: #f2f0ea; padding: 10px 18px; font-size: 13px; color: var(--splash-muted); letter-spacing: 0.04em; } /* The excerpts are longer than the card, on purpose: the session should look like it carries on past the window rather than stopping at a tidy six turns. --tcard-window is the visible height, and the only number to tune if the card wants to be taller or shorter; the panel drifts up through it (see splash-panel-scroll). */ .splash .tcard .tbody { --tcard-window: 420px; padding: 20px 22px; font-size: 15px; height: var(--tcard-window); overflow: hidden; /* soft top and bottom edges, so entries drift in and out of the window instead of being sliced off by it. The top fade sits inside the padding, so the opening entry is not dimmed before the scroll starts. */ -webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 20px, #000 calc(100% - 34px), transparent 100% ); mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 34px), transparent 100%); } .splash .turn { margin-bottom: 14px; } .splash .turn .who { font-size: 11px; letter-spacing: 0.12em; font-weight: 700; color: var(--splash-muted); } .splash .turn.coach .who { color: var(--splash-navy-2); } .splash .anno { border-left: 3px solid var(--splash-teal); background: #f0fbfa; padding: 10px 14px; font-size: 13.5px; color: #20504d; margin: 10px 0 16px; border-radius: 0 6px 6px 0; } .splash .anno b { color: var(--splash-navy); } .splash .anno.gold { border-color: var(--splash-gold); background: #fdf6ea; color: #6b5320; } /* the current question, shown as a single prominent line above the transcript excerpt; all four stack in one grid cell and crossfade quickly into one another as the card cycles sessions */ .splash .tcard .qstrip { display: grid; padding: 14px 18px; background: #faf9f6; border-bottom: 1px solid var(--splash-line); } .splash .tquestion { grid-area: 1 / 1; margin: 0; font-size: 17px; font-weight: 700; color: var(--splash-navy); visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .splash .tquestion.on { visibility: visible; opacity: 1; transition: opacity 0.25s ease; } /* All four session excerpts share one grid cell, so the card is as tall as the longest of them and switching question cannot shift the page. visibility:hidden also keeps the three dormant sessions out of the a11y tree. The session id in the header stacks the same way. */ .splash .tcard .thead, .splash .tcard .tbody { display: grid; } .splash .tsession, .splash .tpanel { grid-area: 1 / 1; visibility: hidden; } /* content height, not the window's: the scroll distance below is worked out from how far the panel overruns the window */ .splash .tpanel { align-self: start; } .splash .tsession.on, .splash .tpanel.on { visibility: visible; } /* The live session plays itself in: each entry, and each finding under it, fades up in turn, so a new question reads as an analysis being written rather than a block of text swapping out. Once the opening entries have arrived, the whole panel drifts up at reading pace to bring in the rest. splash.js sets the duration from the card's dwell, so the drift finishes exactly as the session changes. */ .splash .tpanel.on { /* duration is a fallback; splash.js overrides it with the card's dwell */ animation: splash-panel-scroll 10s linear both; } .splash .tpanel.on > * { animation: splash-entry-in 0.5s ease both; } @keyframes splash-panel-scroll { /* holds until the staggered entries have all landed (~3.9s of a 12s dwell), so the panel never starts moving while it is still being written in */ 0%, 35% { transform: translateY(0); } /* the drift finishes early and the last entries sit for a couple of seconds before the session changes, so the panel never swaps mid-movement */ 80%, 100% { /* how far the panel overruns its window. min() keeps a panel that fits inside the window still, instead of scrolling it downwards. */ transform: translateY(min(0px, calc(var(--tcard-window) - 100%))); } } .splash .tsession.on { animation: splash-entry-in 0.4s ease both; } .splash .tpanel.on > :nth-child(1) { animation-delay: 0.15s; } .splash .tpanel.on > :nth-child(2) { animation-delay: 0.55s; } .splash .tpanel.on > :nth-child(3) { animation-delay: 1s; } .splash .tpanel.on > :nth-child(4) { animation-delay: 1.5s; } .splash .tpanel.on > :nth-child(5) { animation-delay: 1.95s; } .splash .tpanel.on > :nth-child(6) { animation-delay: 2.45s; } /* these two start out below the window and arrive as the panel drifts up */ .splash .tpanel.on > :nth-child(7) { animation-delay: 2.9s; } .splash .tpanel.on > :nth-child(8) { animation-delay: 3.35s; } @keyframes splash-entry-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .splash .tsession.on, .splash .tpanel.on, .splash .tpanel.on > * { animation: none; } /* nothing scrolls or cycles here, so the window would simply crop the session with no way to reach the rest of it: show the panel in full */ .splash .tcard .tbody { height: auto; overflow: visible; } } /* ---- SWEEP TIMER (shared: hero card + "what you get" card) ---- Two cards on this page rotate their own content, and nothing else on them says so. This ring's hand sweeps round once per dwell, like a second hand, so a reader can see another one is coming. Markup: landing/snippets/ sweep_timer.html. splash.js sets the duration from that card's own dwell and only adds .running while the card is on screen, so the ring can never run ahead of the text it is timing. Size and position are set per card. */ .splash .sweep-timer-btn { padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; } .splash .sweep-timer-btn:focus-visible { outline: 2px solid var(--splash-teal); outline-offset: 4px; border-radius: 50%; } .splash .sweep-timer { display: block; width: 100%; height: 100%; transform: rotate(-90deg); /* start the sweep at 12 o'clock */ } /* held: the hand stops where it stands (splash.js freezes the animation) and the whole ring dims, so a stopped card looks stopped rather than broken */ .splash .is-paused .sweep-timer { opacity: 0.45; } .splash .sweep-timer circle { fill: none; stroke-width: 2.5; } .splash .sweep-timer-track { stroke: rgba(26, 35, 51, 0.13); } .splash .sweep-timer-hand { stroke: var(--splash-teal); stroke-linecap: round; /* r=10 -> circumference 62.83; offset by the whole of it = empty ring */ stroke-dasharray: 62.83; stroke-dashoffset: 62.83; } /* the duration here is only a fallback: splash.js overrides it with the cycler's actual dwell, so that dwell stays the single source of truth */ .splash .sweep-timer-hand.running { animation: splash-sweep 7s linear infinite; } @keyframes splash-sweep { from { stroke-dashoffset: 62.83; } to { stroke-dashoffset: 0; } } /* Click a card to hold it where it is, click again to continue (splash.js). The freeze has to reach every animation inside the card - the sweep ring, the panel's slow drift and any entry still fading in - or the card would carry on moving under a reader who has just asked it to stop. */ /* The only !important in this file, and it is load-bearing. Every animation in these cards is declared with the `animation` shorthand, which resets animation-play-state to `running` - and those rules (.splash .tpanel.on, .splash .sweep-timer-hand.running) carry three classes to this rule's two, so without it they outrank the freeze and the panel keeps scrolling under a reader who has just clicked to stop it. Enumerating them at higher specificity instead would silently miss the next animation added to a card. */ .splash .is-paused, .splash .is-paused * { animation-play-state: paused !important; } /* Since the whole card is the hold control, it has to look touchable: it lifts under the pointer. Motion-safe only - under reduced motion nothing cycles, so there is nothing to hold and the card should not pretend otherwise. */ @media (prefers-reduced-motion: no-preference) { .splash .tcard, .splash .cbox.good { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; } .splash .tcard:hover, .splash .cbox.good:hover { transform: translateY(-4px); } .splash .tcard:hover { box-shadow: 0 28px 62px rgba(0, 0, 0, 0.42); } .splash .cbox.good:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22); } } /* nothing rotates under reduced motion, so there is nothing to time or hold */ @media (prefers-reduced-motion: reduce) { .splash .sweep-timer-btn { display: none; } } /* Hero card: on the right of the session-id bar, reading as one more piece of session status. .thead is a grid with all four session ids stacked in cell 1/1, so the ring has to claim that cell too rather than open a second row. */ .splash .tcard .thead .sweep-timer-btn { grid-area: 1 / 1; justify-self: end; align-self: center; width: 15px; height: 15px; } /* ---- MARKET / WHY ---- */ .splash .market { background: #fff; border-top: 1px solid var(--splash-line); border-bottom: 1px solid var(--splash-line); } /* This heading runs the full wrap, matching the width of the prose + research-box pair below it: no max-width, and text-wrap:wrap so it fills each line instead of letting the global `balance` even the lines out. */ .splash .market h2 { font-size: 36px; line-height: 1.15; margin-bottom: 24px; text-wrap: wrap; } .splash .market h2 em { font-style: normal; color: var(--splash-gold); } .splash .market .cols { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: start; } .splash .market p { margin-bottom: 16px; } .splash .market p:last-child { margin-bottom: 0; } .splash .research { background: var(--splash-navy); color: #fff; border-radius: var(--splash-radius); padding: var(--splash-card-pad); } .splash .research .kicker { color: var(--splash-teal); } .splash .research p { color: rgba(255, 255, 255, 0.88); font-size: 15.5px; margin-bottom: 12px; } .splash .research .src { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-bottom: 0; } /* ---- STEPS ---- */ .splash .steps h2 { font-size: 34px; margin-bottom: 44px; max-width: 640px; } .splash .steprow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .splash .step .num { font-family: var(--font-display); font-size: 15px; color: var(--splash-gold); margin-bottom: 8px; } .splash .step h3 { font-size: 19px; margin-bottom: 8px; } .splash .step p { font-size: 14.5px; color: var(--splash-muted); } /* ---- DELIVERABLES / WORKFLOW CARDS ---- */ .splash .deliv { background: #fff; border-top: 1px solid var(--splash-line); border-bottom: 1px solid var(--splash-line); } .splash .deliv h2, .splash .workflow h2 { font-size: 34px; margin-bottom: 14px; } .splash .deliv .sub, .splash .workflow .sub { color: var(--splash-muted); max-width: 680px; margin-bottom: 44px; } .splash .dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--splash-gap); } .splash .dcard { border: 1px solid var(--splash-line); border-radius: var(--splash-radius); padding: var(--splash-card-pad); background: var(--splash-paper); } .splash .workflow .dcard { background: #fff; } .splash .dcard h3 { font-size: 21px; margin-bottom: 10px; } .splash .dcard p { font-size: 15px; color: var(--splash-muted); margin-bottom: 14px; } .splash .dcard ul { list-style: none; font-size: 14px; padding-left: 0; } .splash .dcard li { padding-left: 18px; position: relative; margin-bottom: 6px; color: var(--splash-ink); } .splash .dcard li:before { content: "·"; color: var(--splash-teal); position: absolute; left: 4px; font-weight: 900; } /* Card body copy sometimes embeds a real link (e.g. the legal page's document list); give it visible affordance since .splash a resets to inherit/none. */ .splash .dcard a { color: var(--splash-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--splash-line); } .splash .dcard a:hover { color: var(--splash-teal); text-decoration-color: currentColor; } /* ---- CATALOGUE ---- */ /* White: the workflow section above is paper. See the background-alternation note at the top of this file. */ .splash .cat { background: #fff; border-top: 1px solid var(--splash-line); border-bottom: 1px solid var(--splash-line); } .splash .cat h2 { font-size: 34px; margin-bottom: 14px; } .splash .cat .sub { color: var(--splash-muted); max-width: 680px; margin-bottom: 44px; } .splash .qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .splash .qcard { background: var(--splash-paper); border: 1px solid var(--splash-line); border-radius: var(--splash-radius); padding: 24px; } .splash .qcard .q { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--splash-navy); margin-bottom: 8px; min-height: 2.6em; } .splash .qcard .name { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--splash-teal); font-weight: 700; margin-bottom: 8px; } .splash .qcard p { font-size: 14px; color: var(--splash-muted); } .splash .cat .more { margin-top: 24px; max-width: 780px; font-size: 15px; color: var(--splash-muted); } /* Lead-in ("33 analyses in the catalogue") carries the weight of the claim, so it steps up to full ink against the muted rest of the sentence. */ .splash .cat .more b { color: var(--splash-ink); } .splash .cat .catmore { margin-top: 14px; } /* Modal trigger that has to read as a link, not a third button competing with the pricing CTAs. Navy rather than teal: teal fails contrast on the paper background, and .dcard a already sets ink + hairline underline as the light-background link treatment. */ .splash .cat .catlink { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--splash-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(12, 27, 53, 0.3); cursor: pointer; } .splash .cat .catlink:hover { text-decoration-color: currentColor; } /* ---- THE CREDENTIAL PATH ---- Sits between the catalogue (paper) and the coachbot creed (navy), so it takes the white treatment for alternation. Cards are the shared .dgrid/.dcard components; only the section chrome and the closing caveat are new. */ /* Paper, with white cards: the navy creed sits above and the white testimonials below, so this band has to be the middle tone. */ .splash .credpath .dcard { background: #fff; } .splash .credpath h2 { font-size: 34px; margin-bottom: 14px; } /* 56px rather than the 44px used by the other section intros: this section's grid is bracketed by copy on both sides, so it needs matching air above and below to read as one block. */ .splash .credpath .sub { color: var(--splash-muted); max-width: 700px; margin-bottom: 56px; } /* The "this is not mentor coaching" caveat: gold rule marks it as the honest qualifier rather than another claim. */ .splash .credpath .credfoot { margin: 56px auto 0; max-width: 820px; font-size: 15px; color: var(--splash-ink); border-left: 3px solid var(--splash-gold); padding-left: 18px; } /* ---- NOT A COACHBOT ---- */ .splash .creed { background: var(--splash-navy); color: #fff; } .splash .creed h2 { font-size: 36px; margin-bottom: 18px; } .splash .creed .lead { color: rgba(255, 255, 255, 0.8); max-width: 680px; margin-bottom: 44px; font-size: 18px; } .splash .contrast { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--splash-gap); row-gap: 0; } .splash .cgood-disclaimer { grid-column: 2; } .splash .cbox { border-radius: var(--splash-radius); padding: var(--splash-card-pad); } .splash .cbox h3 { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--bs-body-font-family); font-weight: 700; margin-bottom: 14px; } .splash .cbox.bad { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); } .splash .cbox.bad h3 { color: rgba(255, 255, 255, 0.5); } .splash .cbox.bad p { color: rgba(255, 255, 255, 0.55); font-style: italic; font-size: 15.5px; margin-bottom: 12px; } .splash .cbox.bad .verdict { font-style: normal; font-size: 14px; color: rgba(255, 255, 255, 0.4); } .splash .cbox.good { background: #fff; color: var(--splash-ink); } .splash .cbox.good h3 { color: var(--splash-teal); } .splash .cbox.good p { font-size: 15.5px; margin-bottom: 12px; } .splash .cbox.good .verdict { font-size: 14px; color: var(--splash-muted); } /* four findings take turns in the same spot, crossfading between one another; all four share one grid cell so the box never resizes as the example (and its length) changes */ .splash .cgood-examples { display: grid; } .splash .cgood-example { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } /* The incoming example waits for the outgoing one to clear before it fades in. Overlapping the two fades superimposed two paragraphs of different lengths in the same grid cell, which read as a rendering fault. */ .splash .cgood-example.on { visibility: visible; opacity: 1; transition: opacity 0.25s ease 0.25s, visibility 0s; } /* the ring is positioned per card; the component itself lives further down */ .splash .cbox.good { position: relative; } .splash .cbox.good h3 { /* keep the heading clear of the ring */ padding-right: 30px; } .splash .cbox.good .sweep-timer-btn { position: absolute; top: var(--splash-card-pad); right: var(--splash-card-pad); /* 18px = the h3 line box, so ring and heading share a centre line */ width: 18px; height: 18px; } .splash .creed .rule { margin-top: 36px; font-family: var(--font-display); font-size: 21px; color: var(--splash-teal-2); text-align: center; } /* ---- TESTIMONIALS ---- */ .splash .testi { background: #fff; border-top: 1px solid var(--splash-line); border-bottom: 1px solid var(--splash-line); } .splash .testi .head { text-align: center; max-width: 680px; margin: 0 auto 44px; } .splash .testi .head h2 { font-size: 34px; } .splash .tqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--splash-gap); max-width: 900px; margin: 0 auto; } /* Odd card count: last quote sits alone on its row at one-column width, centered */ .splash .tqgrid .tq:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - var(--splash-gap)) / 2); justify-self: center; } .splash .tq { background: var(--splash-paper); border: 1px solid var(--splash-line); border-radius: var(--splash-radius); padding: var(--splash-card-pad); } .splash .tq .mark { font-family: var(--font-display); font-size: 44px; margin-bottom: 12px; line-height: 0.5; color: var(--splash-gold); /* .mark also matches Bootstrap's highlight utility; kill its yellow box + padding */ background: none; padding: 0; } .splash .tq blockquote { font-family: var(--font-display); font-size: 17.5px; line-height: 1.5; color: var(--splash-navy); margin: 0 0 18px; } .splash .tq .who { font-size: 14px; color: var(--splash-ink); font-weight: 700; } .splash .tq .who span { display: block; font-weight: 400; color: var(--splash-muted); font-size: 13px; } .splash .testi .provenance { text-align: center; margin-top: 24px; font-size: 13.5px; color: var(--splash-muted); } /* ---- TEAM ---- */ .splash .team h2 { font-size: 34px; margin-bottom: 14px; } .splash .team .sub { color: var(--splash-muted); max-width: 680px; margin-bottom: 44px; } .splash .tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--splash-gap); max-width: 820px; margin: 0 auto; } .splash .person { background: #fff; border: 1px solid var(--splash-line); border-radius: var(--splash-radius); padding: var(--splash-card-pad); } .splash .person img.photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: center top; margin-bottom: 16px; box-shadow: 0 0 0 1px var(--splash-line); } .splash .person h3 { font-size: 20px; margin-bottom: 4px; } .splash .person .role { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--splash-gold); font-weight: 700; margin-bottom: 12px; } .splash .person p { font-size: 14.5px; color: var(--splash-muted); } /* Horizontal credibility strip under the founder cards */ .splash .team .creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--splash-gap); max-width: 820px; margin: 44px auto 0; border-top: 1px solid var(--splash-line); padding-top: 28px; } .splash .cred p { font-size: 14.5px; color: var(--splash-muted); } /* ---- TRUST ---- */ /* Thin proof bar sitting directly under the hero, answering "what happens to my client's data" in the first scroll. Deliberately has NO kicker/h2/sub: these are reassurances, not an argument, and a heading here would give them the same weight as the real sections. Paper, because the navy hero is above it and the white market section below. */ .splash .trust { padding: 34px 0; } .splash .trustgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .splash .tstat .big { font-family: var(--font-display); font-size: 40px; color: var(--splash-navy); } .splash .tstat p { font-size: 14px; color: var(--splash-muted); max-width: 200px; margin: 6px auto 0; } /* ---- PRICING ---- */ .splash .pricing { background: var(--splash-navy); color: #fff; } /* The pricing section is fully centered: the plan cards sit centered, so the heading, sub, billing toggle, extras row and fair-use note follow suit. .plans is reset to left below so the card internals stay left-aligned. */ .splash .pricing .wrap { text-align: center; } .splash .pricing h2 { font-size: 34px; margin-bottom: 12px; } .splash .pricing .sub { color: rgba(255, 255, 255, 0.7); margin: 0 auto 28px; max-width: 720px; } .splash .period-toggle { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; } .splash .period-toggle .btn-check + label { border: 1.5px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); background: transparent; border-radius: 6px; padding: 9px 20px; font-size: 14.5px; font-weight: 700; cursor: pointer; } .splash .period-toggle .btn-check:checked + label { background: #fff; color: var(--splash-navy); border-color: #fff; } .splash .period-toggle .save-badge { background: var(--splash-teal); color: var(--splash-navy); border-radius: 20px; padding: 1px 8px; font-size: 12px; margin-left: 6px; } .splash .plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--splash-gap); max-width: 820px; margin: 0 auto; /* Reset the pricing wrap's centering - card content stays left-aligned */ text-align: left; } /* Plans get a touch more padding than the standard card - flagship offer */ .splash .plan { background: #fff; color: var(--splash-ink); border-radius: var(--splash-radius); padding: 32px; position: relative; display: flex; flex-direction: column; } .splash .plan.pro { border: 2px solid var(--splash-teal); } .splash .plan .flag { position: absolute; top: -13px; left: 28px; background: var(--splash-teal); color: var(--splash-navy); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; } .splash .plan h3 { font-size: 24px; margin-bottom: 4px; } .splash .plan .desc { font-size: 14.5px; color: var(--splash-muted); margin-bottom: 18px; } .splash .plan .price { font-family: var(--font-display); font-size: 38px; color: var(--splash-navy); } .splash .plan .per { font-size: 15px; color: var(--splash-muted); } .splash .plan ul { list-style: none; margin: 20px 0 24px; padding-left: 0; flex-grow: 1; } .splash .plan li { padding-left: 22px; position: relative; margin-bottom: 9px; font-size: 15px; } .splash .plan li:before { content: "✓"; color: var(--splash-teal); position: absolute; left: 0; font-weight: 900; } .splash .plan .btn { width: 100%; text-align: center; background: var(--splash-navy); color: #fff; } .splash .plan.pro .btn { background: var(--splash-teal); color: var(--splash-navy); } .splash .pricing .extras { margin-top: 28px; display: flex; justify-content: center; gap: 16px; align-items: center; flex-wrap: wrap; } .splash .pricing .btn-compare { border: 1.5px solid rgba(255, 255, 255, 0.4); color: #fff; background: transparent; padding: 11px 22px; } .splash .pricing .fair { font-size: 14px; color: rgba(255, 255, 255, 0.6); max-width: 720px; margin-left: auto; margin-right: auto; margin-top: 20px; } .splash .pricing .fair a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; } /* The compare-plans modal is Bootstrap-styled; keep it off the splash's 17px body scale and away from the oversized .splash .btn padding. */ .splash .modal { font-size: 15px; line-height: 1.5; } .splash .modal .btn { padding: 8px 16px; font-size: 15px; font-weight: 500; } /* ---- FINAL CTA + FOOTER ---- */ /* White: team above is paper, and the trust bar that used to break up the run at this end of the page has moved to the top. */ .splash .final { text-align: center; padding: 96px 0; background: #fff; border-top: 1px solid var(--splash-line); } .splash .final h2 { font-size: 38px; max-width: 720px; margin: 0 auto 28px; } .splash .final .btn { background: var(--splash-navy); color: #fff; } .splash .final .fine { margin-top: 16px; font-size: 14px; color: var(--splash-muted); } .splash footer { background: var(--splash-navy); color: rgba(255, 255, 255, 0.55); padding: 32px 0; font-size: 14px; } .splash footer .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .splash footer a { color: rgba(255, 255, 255, 0.8); } .splash footer a:hover { color: #fff; } /* Sticky mobile CTA (carried over from the previous splash) */ .splash .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; /* A fixed bar is anchored to the LARGE viewport, so on Android its last ~20px sit under the browser's own bottom chrome and the button was being cut off (pinch-zooming out was the only way to see all of it). Hence the deep bottom pad: what the chrome swallows is navy padding, never the button. env() adds the iOS home-indicator inset on top of that. */ padding: 10px 14px calc(32px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--splash-navy) 94%, transparent); box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.25); } .splash .mobile-sticky-cta .btn { display: block; width: 100%; text-align: center; } /* ---- RESPONSIVE ---- */ /* 5-across steps get cramped before the grids need to stack */ @media (max-width: 1000px) { .splash .steprow { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .splash .hero .wrap, .splash .market .cols, .splash .dgrid, .splash .qgrid, .splash .contrast, .splash .tgrid, .splash .team .creds { grid-template-columns: 1fr; } .splash .steprow, .splash .trustgrid { grid-template-columns: 1fr 1fr; } .splash .cgood-disclaimer { grid-column: 1; } } /* Bootstrap md: the d-md-none sticky CTA appears below this width */ @media (max-width: 767.98px) { .splash .plans { grid-template-columns: 1fr; } .splash .tqgrid { grid-template-columns: 1fr; } /* the card is full width here, so a shorter window keeps it off the fold */ .splash .tcard .tbody { --tcard-window: 340px; } .splash .tqgrid .tq:last-child:nth-child(odd) { width: auto; } .splash section { padding: 60px 0; } .splash .hero { padding: 52px 0 44px; } .splash .hero h1 { font-size: 34px; } .splash .hero p.lead, .splash .creed .lead { font-size: 17px; } .splash .market h2, .splash .creed h2, .splash .final h2 { font-size: 28px; } .splash .steps h2, .splash .deliv h2, .splash .workflow h2, .splash .cat h2, .splash .credpath h2, .splash .team h2, .splash .pricing h2, .splash .testi .head h2 { font-size: 26px; } .splash .heroctas .btn { width: 100%; text-align: center; } /* leave room for the sticky CTA bar (which now carries a deeper bottom pad) */ .splash footer { padding-bottom: 112px; } }