/* Salience PPC hero: the page inside the window. * * The window holds ports of Sean's Dawnbreaker components (app-responsive), with their Tailwind * classes copied unchanged and compiled by `npm run css` into dawnbreaker.css: AiShare (the study), * MetricsTable, WhySalience, ReportRationale, Benchmark, LogosMarquee, TrafficLeaders, * TestimonialSingle, TestimonialSlider, TopThree, the StateOfSearch byline card, ResourcesCarousel, * Faq and IndexGate, with two sections of our own after the study: the waterfall and the quiz * intro, a white version of the IndexGate card (Sean, 29 and 30 Oct 2026). SiteFooter follows the window. page.js runs their * motion. This file holds only what is not a Tailwind class: the hero's start form, the study's £ * waffle, the waterfall, the closing card and its white version, and the window's own base, which takes Dawnbreaker's * body type (globals.css body) so the ported sections set as they do there. */ /* ---------------------------------------------------------------- the hero's start form The form is Dawnbreaker's EmailSignup, with its own classes (dawnbreaker.css). */ .start { margin-top: 22px; display: grid; justify-items: center; gap: 10px; width: 100%; } .start .email-signup { margin: 0 auto; } .start-note { margin: 0; font-size: 14px; line-height: 1.3; letter-spacing: 0.02em; } .sub .start-note { color: var(--bone); } /* ---------------------------------------------------------------- the £ waffle (study section) Sean, 29 Oct 2026 (idea 16 of the mockups): 100 £ signs in place of the pie, 34 in the pie's "lost money" colour and 66 in navy (Sean, 29 Oct 2026). The pie's footprint: 230px on phones, 400px from 640px. */ .waffle { --cell: 23px; display: grid; grid-template-columns: repeat(10, var(--cell)); grid-auto-rows: var(--cell); } @media (min-width: 640px) { .waffle { --cell: 40px; } } .waffle span { display: grid; place-items: center; font-weight: 600; font-size: calc(var(--cell) * 0.86); line-height: 1; color: #162840; } .waffle span.lost { color: #E92681; } /* ---------------------------------------------------------------- the waterfall section Sean, 29 Oct 2026 (opening option C, mockup 32; idea 15): its own section after the study, under the line "ROAS looks good. Profit feels good." £1 of ad spend becomes £4.50 of revenue, then each cost drops off to profit. Each column's bar runs from --lo to --hi on a £0 to £5 scale. Totals grow up from the axis (page.js "col"); costs grow down from the level before them (page.js "drop"). Under 640px the bars run across, one row per step. */ .wfv { --max: 5; --gap: 14px; --ph: clamp(260px, 30vw, 340px); width: 100%; display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); column-gap: var(--gap); } /* --cols: set by the CMS template when the costs change */ .wfv-col { display: grid; grid-template-rows: auto auto; row-gap: 12px; min-width: 0; } .wfv-plot { grid-row: 1; grid-column: 1; position: relative; height: var(--ph); } .wfv-bar { position: absolute; left: 14%; right: 14%; border-radius: 4px; background: #162840; bottom: calc(var(--lo) / var(--max) * 100%); height: calc((var(--hi) - var(--lo)) / var(--max) * 100%); } .wfv-col.cost .wfv-bar { background: #E92681; } .wfv-val { grid-row: 1; grid-column: 1; align-self: end; justify-self: center; margin-bottom: calc(var(--hi) / var(--max) * var(--ph) + 8px); font-weight: 600; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } /* the step line from the bar before: from its right edge to this bar's left edge, at this bar's top */ .wfv-step { position: absolute; right: 86%; width: calc(28% + var(--gap)); height: 2px; margin-bottom: -1px; bottom: calc(var(--hi) / var(--max) * 100%); background: rgb(22 40 64 / 0.35); } .wfv-lab { grid-row: 2; grid-column: 1; font-size: 13px; line-height: 1.3; text-wrap: balance; } @media (max-width: 639px) { .wfv { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } .wfv-col { grid-template-columns: 92px minmax(0, 1fr) 52px; grid-template-rows: none; column-gap: 10px; align-items: center; } .wfv-lab { grid-column: 1; grid-row: 1; text-align: left; } .wfv-plot { grid-column: 2; grid-row: 1; height: 26px; } .wfv-bar { left: calc(var(--lo) / var(--max) * 100%); right: auto; top: 0; bottom: 0; height: auto; width: calc((var(--hi) - var(--lo)) / var(--max) * 100%); } .wfv-val { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin: 0; font-size: 14px; } .wfv-step { display: none; } } /* ---------------------------------------------------------------- the closing card (IndexGate) Sean, 30 Oct 2026: more in the card. What the questions cover, what you get (a list with the kit's Tick, overview-comps/kit/ui.tsx, mint with a navy tick on the navy card), and an image in the right column, as Dawnbreaker's IndexGate has its sector image (max 400px wide there). The image is the hero's cash hand at rest, rendered from hero.js without its background glyphs. */ .go-lead { margin-top: 24px; } .go-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; justify-content: center; gap: 10px; text-align: left; } @media (min-width: 1024px) { .go-list { justify-content: start; } } .go-list li { display: flex; align-items: flex-start; gap: 12px; color: #FFFFFF; } .go-tick { flex: none; width: 22px; height: 22px; margin-top: 0.12em; } .go-tick circle { fill: #00E9A6; } .go-tick path { fill: none; stroke: #162840; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .go-fig { margin: 12px auto 0; width: 100%; max-width: 400px; min-width: 0; display: flex; align-items: center; justify-content: center; } @media (min-width: 1024px) { .go-fig { margin: 0; max-width: 560px; justify-self: end; } } .go-fig img { display: block; width: 100%; height: auto; } /* Sean, 2 Nov 2026: a team photo in both CTA cards, with the rounded corners of the page's other photos. */ .go-fig img[src$=".jpg"] { border-radius: 24px; aspect-ratio: 1; object-fit: cover; } /* The square photo fills the card's right column on wide screens. */ @media (min-width: 1024px) { .go-fig:has(img[src$=".jpg"]) { max-width: none; justify-self: stretch; } } /* the badge: 160px wide on phones (Dawnbreaker's size), 200px from 640px (Sean, 30 Oct 2026: "the shape itself could do with being larger"), with the overhang above the card scaled to match */ .go-badge { position: absolute; top: -66px; right: 20px; width: 160px; transform: rotate(7deg); z-index: 3; } @media (min-width: 640px) { .go-badge { top: -82px; width: 200px; } } /* under 640px the badge reaches about 112px into the card, past the card's 56px top padding, and covered the heading's first line (both cards). The card's top padding clears it there. */ @media (max-width: 639px) { .shell-content > :has(> .go-badge) { padding-top: 124px; } } /* the white card (the quiz intro, Sean, 30 Oct 2026): what is mint on the navy card is hot pink here, the starburst's #E80080. The email field takes the bone ground, so it shows on the white card. */ .go-light .email-signup { background-color: #F2F0E9; } .go-light .go-list li { color: #162840; } .go-light .go-tick circle { fill: #E80080; } .go-light .go-tick path { stroke: #FFFFFF; } /* ---------------------------------------------------------------- .shell, restored tw/globals.css (Dawnbreaker's own globals.css) has three bare declarations inside @layer base (--ease-out, --dur-base, --auto-text). In this build Tailwind writes them straight in front of the .shell rule, so the browser reads "--ease-out:...;.shell" as one invalid selector and drops the rule: .shell lost its gutter and width under 640px. Dawnbreaker's build puts other rules in between, so the rule survives there. This is that rule, as Dawnbreaker serves it. */ .shell { margin-left: auto; margin-right: auto; width: 100%; max-width: 1600px; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width: 640px) { .shell { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .shell { padding-left: 2.5rem; padding-right: 2.5rem; } } /* ---------------------------------------------------------------- the window page.js publishes the window's ground on the window itself: its colour, --sb (for sb-fill) and --auto-text (for AUTO_TEXT). The defaults here are the first section's, so nothing shows in the page's own colours before page.js runs. */ .window { --sb: #FFFFFF; --auto-text: #162840; --auto-muted: #162840; --auto-label: #162840; color: var(--auto-text); font-family: "TT Hoves Pro", "Manrope", system-ui, sans-serif; font-weight: 500; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; letter-spacing: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--sb-ms, 400ms) ease-in-out; /* IndexGate's pattern keeps its full height and overflows its section as it does in Dawnbreaker (overflow-x clip only). The closing card is the window's last section, so the window clips that overflow at its own edge, where the page ends. clip, not hidden: no scroll container, so MetricsTable's sticky rows still pin to the screen. */ overflow: clip; } /* ---------------------------------------------------------------- the site footer SiteFooter.tsx's own