/* ==========================================================================
css/site.css — LIGHT MODE for the MAIN SITE (Website 2.0 Part Three)
--------------------------------------------------------------------------
The ad funnels went light first (funnel.css section 21) and are the guide:
same palette, same tokens, same mechanism, so a visitor moving from an ad to
valiant.app does not change companies.
HOW A PAGE IS LIT. Two classes, both in the page's own markup:
the funnel's light switch. Reusing it is
what makes the Calendly widget theme
(script.js), the Calendly shell, the
light buttons (funnel.css 21o) and the
html ground apply with no second copy.
marks a MAIN-SITE page. Every rule here
requires it, so nothing in this file can
reach the 200 ad funnels (fnl-page--ad),
the 13 industry funnels or the plan
modals, which all share style.css.
A page gets both classes only in the PR that lights EVERY one of its
surfaces (the per-page completeness gate): a half-lit page reads as broken.
RULES OF THE FILE
· css/style.css is never edited. Everything here is one class more
specific than the dark rule it replaces, so no !important is needed
except where style.css itself uses one.
· No new colours: the funnel tokens below, and the literals section 21
already uses. #00FF8A stays a FILL (with black on it) and the brand V;
readable green text/rules/icons are #007D45 (--fnl-green).
· A dark rule that lives inside a media query is overridden inside the
same query, so a responsive decision is never undone at another width.
Load order on a lit page: style.css, funnel.css, site.css.
========================================================================== */
/* --- 0. Dark palette on every main page ---------------------------------- */
/* Every main page carries the site marker, lit or not. Components borrowed from
the funnels (the trust pill, the Trustpilot badge) read the funnel palette
tokens, which funnel.css declares on .fnl-page only; the pages without that
class would resolve them to nothing (the pill's ink would fall back to the
body's black on a dark page). These are funnel.css section 1's DARK values,
copied; the light block below overrides them on lit pages. */
.fnl-page--site {
--fnl-green: #00FF8A;
--fnl-green-solid: #00FF8A;
--fnl-on-solid: #000;
--fnl-white: #fff;
--fnl-sub: #A9CDBB;
--fnl-muted: #83B59F;
--fnl-dim: #5E8272;
}
/* --- 0b. Header social proof (Part Two #1) -------------------------------- */
/* The funnel hero's "Trusted by 500+ businesses" pill above the heading and
its Trustpilot badge under the CTA, wrapped in a row that follows the
header's alignment: centred headers get a centred row. The components keep
their funnel.css styling (and their light variants on lit pages). */
.fnl-page--site .fnl-sp {
display: flex;
width: 100%;
}
.fnl-page--site .fnl-sp--center {
justify-content: center;
}
.fnl-page--site .fnl-sp--start {
justify-content: flex-start;
}
.fnl-page--site .fnl-sp--pill .fnl-trustpill {
margin: 0 0 24px;
}
.fnl-page--site .fnl-sp--tp .fnl-tp {
margin-top: 18px;
}
/* Heroes lift their own copy above decorative layers (the industry pages'
.inline-ellipse is absolute and sits over everything else in .desc), so the
rows join that stack: without this the badge painted under the ellipse and
could not be clicked. */
.fnl-page--site .fnl-sp {
position: relative;
z-index: 2;
}
/* /how-it-works sizes its hero for the old copy height, with an
absolutely-positioned illustration at the bottom. The two rows add about
100px, which at tablet widths ran into it. Same queries as style.css. */
@media (max-width: 1200px) {
.fnl-page--site .hero__resources .outer__resources {
min-height: 840px;
}
}
@media (max-width: 991px) {
.fnl-page--site .hero__resources .outer__resources {
min-height: 750px;
}
}
/* Case-study heroes rise in (style.css csHeroRise): heading at 1.15s, copy at
1.55s. The rows ride with the element they belong to instead of sitting
still while the copy moves through them. The legal pages' plain hero does
not animate, and neither do its rows. */
@media (prefers-reduced-motion: no-preference) {
.fnl-page--site .case__hero:not(.plain) .fnl-sp--pill {
animation: csHeroRise 0.8s cubic-bezier(.22, .61, .36, 1) 1.15s both;
}
.fnl-page--site .case__hero:not(.plain) .fnl-sp--tp {
animation: csHeroRise 0.8s cubic-bezier(.22, .61, .36, 1) 1.55s both;
}
}
/* --- 0c. Header drawer between 992px and 1200px (every main page) ------- */
/* style.css's nav-centring block (`@media (min-width: 992px)`, "Header nav
centring") turns .right into `display: contents` and makes .menu a centred
flex row. Its own comment says the mobile drawer relies on .right being a
real box, but the drawer runs to 1200px (style.css `@media (max-width:
1200px)`), so from 992 to 1200 the open drawer had no panel: its links and
buttons painted loose over the page (landscape tablets, small laptops).
Give .right its box back in exactly that range, and let .menu behave as it
does in the drawer below 992. */
@media (min-width: 992px) and (max-width: 1200px) {
.fnl-page--site header .outer__header > .right {
display: flex;
}
.fnl-page--site header .outer__header > .right > .menu {
flex: 0 0 auto;
display: block;
}
}
/* --- 0d. Pricing headline on phones (Part Two #17) ----------------------- */
/* "Pay less. Grow more." (the /pricing header and the product pages'
pricing sections) is two clean lines on a phone, like the funnels' pricing
headline (funnel.css, next to the Pro-card gap fix). */
@media (max-width: 767px) {
.fnl-page--site .hero__plans .outer__hero > h1 span.colored {
display: block;
}
}
/* --- 0e. The "Process" section pill (Part Two #24) ------------------------ */
/* style.css styles `.process__wrapper .outer__process > span` as a centred
block from before that span became a funnel pill, which drops the pill's
flex centring: the label sat 7.5 to 8.5px above centre inside its border
(email, funnel, graphic-design, strategy, video). Restore the pill's own
box, still centred in the section. */
.fnl-page--site .process__wrapper .outer__process > span.fnl-pill {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
/* --- 0f. /reviews (Part Two #13) ----------------------------------------- */
/* The header rotator: style.css sets touch-action:none on the card, so a
finger that lands on it cannot scroll the page (the drag turns into a tap).
It has no swipe handling, so the browser default is restored. */
.fnl-page--site .single__review--wrapper .single__review--slider {
touch-action: auto;
}
/* Wall of Love cards added from the funnels carry their funnel rating:
a dim star for a missing point, and a lit copy clipped to the fraction. */
.fnl-page--site .quote__wall .elem .top__quote>.list>ul>li.rv-star {
position: relative;
}
.fnl-page--site .quote__wall .elem .top__quote>.list>ul>li.rv-star>img {
opacity: .25;
}
.fnl-page--site .quote__wall li.rv-star--part>.rv-star__lit {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: calc(var(--f) * 100%);
overflow: hidden;
display: flex;
align-items: center;
}
.fnl-page--site .quote__wall li.rv-star--part>.rv-star__lit>img {
flex: none;
max-width: none;
}
/* A reviewer with no published photo gets a monogram, as on the funnels. */
.fnl-page--site .quote__wall .elem .author>.media.rv-mono {
background: rgba(0, 255, 138, .12);
color: #00FF8A;
font-size: 13px;
font-weight: 600;
line-height: 1;
}
/* --- 0g. /case-studies hero legibility (Part Two #8) --------------------- */
/* The hero video (doors.mp4, used only here) is bright green with a glowing
pale gap in the middle. On phones and tablets the frame is cropped to its
centre, so "Brands into" sat white on pale yellow (1.05:1); at every width
the sub-line and the trust pill text were below 3:1, and on desktop the nav
links sat on bright cloud. A veil in the site's own ground colour sits
between the video and the text: from the left on desktop, where the copy is,
and from the bottom on phones and tablets, plus a band under the header. */
.fnl-page--site .case__hero--video::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(to bottom, rgba(9, 24, 17, .72) 0, rgba(9, 24, 17, .6) 80px, rgba(9, 24, 17, 0) 190px),
linear-gradient(90deg, rgba(9, 24, 17, .82) 0%, rgba(9, 24, 17, .62) 38%, rgba(9, 24, 17, 0) 64%);
}
@media (max-width: 991px) {
.fnl-page--site .case__hero--video::before {
background:
linear-gradient(to bottom, rgba(9, 24, 17, .55) 0, rgba(9, 24, 17, 0) 120px),
linear-gradient(to top, rgba(9, 24, 17, .92) 0%, rgba(9, 24, 17, .82) 58%, rgba(9, 24, 17, 0) 88%);
}
}
/* --- 1. Tokens and ground ------------------------------------------------ */
/* The funnel declares its light tokens on .fnl-page. Main pages that do not
carry .fnl-page (the legal pages, contact, about, ...) still use components
that read them (the light .regular-btn reads --fnl-white/--fnl-green), so
the same values are declared on the site marker. Values are copied from
funnel.css 21a, not invented; keep the two equal. */
html.fnl-light .fnl-page--site {
--fnl-bg: #F7FAF8;
--fnl-rail: #EDF3EF;
--fnl-stage: #FFFFFF;
--fnl-card-bg: linear-gradient(180deg, #FFFFFF 0%, #F1F7F3 100%);
--fnl-border: 1px solid rgba(9, 24, 17, .10);
--fnl-border-hover: rgba(9, 24, 17, .24);
--fnl-divider: 1px solid rgba(9, 24, 17, .08);
--fnl-green: #007D45;
--fnl-green-solid: #00FF8A;
--fnl-on-solid: #000;
--fnl-white: #0B1F16;
--fnl-sub: #33574A;
--fnl-muted: #4A6A5D;
--fnl-dim: #5A7568;
background-color: var(--fnl-bg);
color-scheme: light;
}
/* style.css paints a 40% black sheet over every main page (.overlay, the full
body height). On a light ground it would turn the page grey. */
html.fnl-light .fnl-page--site .overlay {
background-color: transparent;
}
/* Headings borrowed from style.css: #fff and #00FF8A are 1.05:1 and 1.28:1 on
the light ground (funnel.css 21c made the same flip for .fnl-page). */
html.fnl-light .fnl-page--site .h2-title {
color: var(--fnl-white);
}
html.fnl-light .fnl-page--site .h2-title span.colored {
color: var(--fnl-green);
}
/* --- 2. Header ----------------------------------------------------------- */
/* The wordmark is a separate light asset (img/head-logo-light.svg: ink
wordmark and chip, the literal #00FF8A V, as funnel.css 22m rules for the
funnel header). The white glow on hover has nothing to glow against. */
html.fnl-light .fnl-page--site header .outer__header .left a:hover img {
filter: none;
}
html.fnl-light .fnl-page--site header .outer__header .menu>ul>li>a,
html.fnl-light .fnl-page--site header.secondary .outer__header .menu>ul>li>a,
html.fnl-light .fnl-page--site header .outer__header .right>.btns>.sign-in,
html.fnl-light .fnl-page--site header.secondary .outer__header .right>.btns>.sign-in {
color: var(--fnl-sub);
}
html.fnl-light .fnl-page--site header .outer__header .menu>ul>li:hover>a,
html.fnl-light .fnl-page--site header.secondary .outer__header .menu>ul>li:hover>a,
html.fnl-light .fnl-page--site header .outer__header .right>.btns>.sign-in:hover {
color: var(--fnl-white);
}
/* Muted-green arrow and menu icons: the funnel precedent for monochrome marks
is brightness(0) at partial opacity (never the dark theme's invert chain). */
html.fnl-light .fnl-page--site header .outer__header .menu>ul>li>a span img,
html.fnl-light .fnl-page--site header.secondary .outer__header .menu>ul>li>a span img,
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown ul>li>a span img,
html.fnl-light .fnl-page--site header.secondary .right .menu>ul>li .header__dropdown ul>li>a span img {
filter: brightness(0);
opacity: .55;
}
html.fnl-light .fnl-page--site header:not(.secondary) .outer__header .menu>ul>li:hover>a>span>img,
html.fnl-light .fnl-page--site header:not(.secondary) .right .menu>ul>li .header__dropdown ul>li>a:hover>span>img,
html.fnl-light .fnl-page--site header.secondary .right .menu>ul>li .header__dropdown ul>li>a:hover span img {
filter: brightness(0);
opacity: .85;
}
/* Dropdown panel: a white card on a hairline, the funnel's floating-panel
shadow instead of the dark theme's 160px black halo. */
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown {
background: #FFFFFF;
border: 1px solid rgba(9, 24, 17, .10);
box-shadow: 0 24px 60px -24px rgba(9, 24, 17, .28);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown ul>li:before {
background: linear-gradient(to right, rgba(9, 24, 17, .04), rgba(9, 24, 17, .08));
}
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown.complex .grid>ul {
border-right-color: rgba(9, 24, 17, .08);
}
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown ul>li>a,
html.fnl-light .fnl-page--site header.secondary .right .menu>ul>li .header__dropdown ul>li>a {
color: var(--fnl-sub);
}
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown ul>li>a:hover,
html.fnl-light .fnl-page--site header.secondary .right .menu>ul>li .header__dropdown ul>li>a:hover {
background-color: rgba(0, 125, 69, .06);
color: var(--fnl-white);
}
/* The header CTA's label carries its own white glow in style.css. */
html.fnl-light .fnl-page--site .regular-btn p,
html.fnl-light .fnl-page--site .regular-btn:hover {
text-shadow: none;
}
/* Cursor halos: `screen` vanishes on white. Normal blending, lighter wash. */
html.fnl-light .fnl-page--site .regular-btn > .btn-halo {
mix-blend-mode: normal;
background: radial-gradient(150px circle at var(--mx) var(--my), rgba(0, 255, 138, .30), rgba(0, 255, 138, .10) 42%, rgba(0, 255, 138, 0) 72%);
}
html.fnl-light .fnl-page--site .outline-btn > .btn-halo {
background: radial-gradient(140px circle at var(--mx) var(--my), rgba(0, 125, 69, .12), rgba(0, 125, 69, .04) 46%, rgba(0, 125, 69, 0) 74%);
}
html.fnl-light .fnl-page--site .outline-btn:before {
background: linear-gradient(to top right, rgba(9, 24, 17, 0), rgba(9, 24, 17, .05));
}
html.fnl-light .fnl-page--site .outline-btn:hover {
color: var(--fnl-white);
}
/* Mobile drawer (style.css ≤1200: a near-black glass panel over a 50% black
backdrop). Same geometry, light materials. */
@media (max-width: 1200px) {
html.fnl-light .fnl-page--site .menu-btn {
border: 1px solid rgba(9, 24, 17, .14);
background: #FFFFFF;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html.fnl-light .fnl-page--site .menu-btn span {
background: var(--fnl-white);
}
html.fnl-light .fnl-page--site header .outer__header .right {
background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 248, .98));
border-left: 1px solid rgba(9, 24, 17, .10);
box-shadow: -40px 0 120px rgba(9, 24, 17, .18);
}
html.fnl-light .fnl-page--site header .nav-backdrop {
background: rgba(9, 24, 17, .28);
}
html.fnl-light .fnl-page--site header .right .menu>ul>li {
border-bottom-color: rgba(9, 24, 17, .08);
}
/* Inside the drawer the dropdowns are static lists: no card. */
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown,
html.fnl-light .fnl-page--site header .right .menu>ul>li .header__dropdown.complex {
background: transparent;
border: 0;
box-shadow: none;
}
html.fnl-light .fnl-page--site header .outer__header .right>.btns>.sign-in {
border-color: rgba(9, 24, 17, .16);
}
}
/* --- 3. Footer ----------------------------------------------------------- */
/* The footer has no ground of its own; it sits on the page. Muted green was
the body ink (#5E8272 ~4.1:1, #83B59F ~2.2:1 on light), remapped by role. */
html.fnl-light .fnl-page--site footer .top__footer>.left-col>p,
html.fnl-light .fnl-page--site footer .bottom__footer>p,
html.fnl-light .fnl-page--site footer .right-col>.el>ul>li>a {
color: var(--fnl-muted);
}
html.fnl-light .fnl-page--site footer .right-col>.el>p,
html.fnl-light .fnl-page--site footer .right-col>.el>ul>li>a:hover {
color: var(--fnl-white);
}
html.fnl-light .fnl-page--site footer .bottom__footer {
border-top-color: rgba(9, 24, 17, .08);
}
/* Social chips: white marks by construction (brightness(0) invert(1)); drop
the invert so they read as ink, on a hairline ring. */
html.fnl-light .fnl-page--site .footer__socials a {
border-color: rgba(9, 24, 17, .16);
background: #FFFFFF;
}
html.fnl-light .fnl-page--site .footer__socials a:hover {
border-color: rgba(0, 125, 69, .45);
background: rgba(0, 255, 138, .10);
}
html.fnl-light .fnl-page--site .footer__socials img {
filter: brightness(0) opacity(.8);
}
/* --- 4. Legal pages (cookie, privacy, terms) ----------------------------- */
/* Long-form reading: body copy takes --fnl-sub (7.7:1), not the lighter
--fnl-muted, because these are the pages people actually read line by line. */
html.fnl-light .fnl-page--site .case__hero.plain,
html.fnl-light .fnl-page--site .legal__wrapper {
background-color: var(--fnl-bg);
}
html.fnl-light .fnl-page--site .case__hero .outer__case .desc>p {
color: var(--fnl-muted);
}
html.fnl-light .fnl-page--site .legal__content h2,
html.fnl-light .fnl-page--site .legal__content h3 {
color: var(--fnl-white);
}
html.fnl-light .fnl-page--site .legal__content h4,
html.fnl-light .fnl-page--site .legal__content h5,
html.fnl-light .fnl-page--site .legal__content strong {
color: var(--fnl-white);
}
html.fnl-light .fnl-page--site .legal__content p,
html.fnl-light .fnl-page--site .legal__content li {
color: var(--fnl-sub);
}
html.fnl-light .fnl-page--site .legal__content em {
color: var(--fnl-muted);
}
html.fnl-light .fnl-page--site .legal__content a {
color: var(--fnl-green);
}
html.fnl-light .fnl-page--site .legal__content a:hover {
color: var(--fnl-white);
}
/* --- 5. Campaign carousels (Part One, Part Two #3 and #14) --------------- */
/* The .shorts-portfolio sliders on the homepage, /video, /email,
/graphic-design, /funnel and the eleven industry pages.
Before slick starts (Part Two #14). Nothing in style.css lays the slides out
until slick has run, so each one was a full-height block and the homepage
Examples column measured 14,240px at 390px wide before collapsing under the
reader's finger. One row, clipped, from the first paint. */
.fnl-page--site .slider-shorts:not(.slick-initialized) {
display: flex;
flex-wrap: nowrap;
align-items: center;
overflow: hidden;
}
.fnl-page--site .slider-shorts:not(.slick-initialized) > .elem {
flex: 0 0 auto;
}
/* Arrows (Part Two #3). js/script.js wraps each slider in .shorts-stage and
adds the feature carousels' .fnl-fs__arrow pair (funnel.css 12b supplies the
glass disc and the chevrons, light mode included). Here: centred on the
slides rather than the 132px caption stack the feature sections have, over
the content edges at every width, never under 44px, and a visible focus
ring (the component paints none on its own). */
.fnl-page--site .shorts-stage {
position: relative;
}
.fnl-page--site .shorts-stage > .shorts-arrow {
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
z-index: 6;
}
.fnl-page--site .shorts-stage > .shorts-arrow--prev {
left: 0;
}
.fnl-page--site .shorts-stage > .shorts-arrow--next {
right: 0;
}
.fnl-page--site .shorts-stage > .shorts-arrow:focus-visible {
outline: 2px solid var(--fnl-green);
outline-offset: 3px;
}
@media (max-width: 767px) {
.fnl-page--site .shorts-stage > .shorts-arrow {
width: 44px;
height: 44px;
}
.fnl-page--site .shorts-stage > .shorts-arrow--prev {
left: -4px;
}
.fnl-page--site .shorts-stage > .shorts-arrow--next {
right: -4px;
}
}
/* A still slide (graphic, email) opens the preview modal like a video slide
does; this full-cover link is what a keyboard reaches and activates. */
.fnl-page--site .shorts-portfolio .slider-shorts .inn .fnl-slide-open {
position: absolute;
inset: 0;
z-index: 4;
border-radius: 12px;
}
.fnl-page--site .shorts-portfolio .slider-shorts .inn .fnl-slide-open:focus-visible,
.fnl-page--site .shorts-portfolio .slider-shorts .inn .play-btn:focus-visible {
outline: 2px solid var(--fnl-green);
outline-offset: -2px;
}
/* --- 6. /pricing (Website 2.0 Part Five) --------------------------------- */
/* The pricing page: the funnels' pricing band (a generated fnl-site:pricing
region), then the Compare Pricing table (fnl-site:comparison), both from
tools/funnels/build.mjs. Lit in the same PR (html.fnl-light), so every
surface on it is re-declared below; the band itself is lit by funnel.css
section 21, because the page carries .fnl-page like the product pages. */
/* 6a. The FOUR-column table. The modal's copy of these rules is scoped to
html.fnl-cmp-4 .fnl-modal-page (funnel.css, Part Three); this page shares
the table but not the document, so the same geometry is restated here:
fixed right-anchored cells above 991px (header and rows share one right
edge), a four-way split below it. style.css lays out three columns. */
body.fnl-page--site .compare__plans .plans {
max-width: none;
grid-template-columns: repeat(4, 190px);
justify-content: end;
}
body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el {
width: 190px;
min-width: 190px;
flex: 0 0 190px;
}
body.fnl-page--site .compare__plans .bottom__part > .list .elem > .sub__el:nth-child(4) {
margin-right: 32px;
}
@media (max-width: 1200px) {
body.fnl-page--site .compare__plans .plans {
grid-template-columns: repeat(4, 150px);
}
body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el {
width: 150px;
min-width: 150px;
flex: 0 0 150px;
}
body.fnl-page--site .compare__plans .bottom__part > .list .elem > .sub__el:nth-child(4) {
margin-right: 25px;
}
}
@media (max-width: 991px) {
body.fnl-page--site .compare__plans .plans {
width: 100%;
max-width: none;
min-width: 0;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
justify-content: stretch;
}
body.fnl-page--site .compare__plans .bottom__part > .list .elem {
gap: 8px;
}
body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el,
body.fnl-page--site .compare__plans .bottom__part > .list .elem > .sub__el:nth-child(4) {
width: calc((100% - 24px) / 4 - 1px);
min-width: 0;
flex: 0 0 calc((100% - 24px) / 4 - 1px);
margin: 0;
}
}
@media (max-width: 480px) {
/* Four columns in 350px leave ~80px a cell: the header buttons wrap to two
short lines. A fee like "$37.25/campaign" breaks after its slash, and a
word breaks inside itself only when nothing else fits (break-word, not the
modal's `anywhere`, which split "campaig|n"; the modal switches to one
plan at a time on a phone instead). */
body.fnl-page--site .compare__plans .plans .elem > .top .btn > a {
min-width: 0;
max-width: none;
width: 100%;
white-space: normal;
line-height: 1.15;
font-size: 11px;
padding: 9px 6px;
}
body.fnl-page--site .compare__plans .plans .elem > .top > p {
font-size: 13px;
}
body.fnl-page--site .compare__plans .top-absolute .plans .elem .top > span {
font-size: 13px !important;
}
body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el > p,
body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el > span {
font-size: 11px !important;
overflow-wrap: break-word;
}
}
/* 6b. The hero keeps its own photograph (brief 5.1: the /pricing header image
stays, on this page only). The light theme lays ONE white veil over it, the
funnels' final-CTA precedent (funnel.css 21n): stacked veils multiply into a
blank panel, a single .84-.9 layer still reads as a picture and puts every
pixel behind the copy above 10:1 for the ink. The dotted canvas is drawn
light-on-dark by a script with no light palette: decoration, hidden. */
html.fnl-light body.fnl-page--site .hero__plans {
background-color: var(--fnl-bg);
}
html.fnl-light body.fnl-page--site .hero__plans > .media {
height: 100%;
}
html.fnl-light body.fnl-page--site .hero__plans > .media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(247, 250, 248, .86) 0%,
rgba(247, 250, 248, .84) 55%,
rgba(247, 250, 248, 1) 100%);
pointer-events: none;
}
html.fnl-light body.fnl-page--site .hero__plans > .ascii-ero {
display: none;
}
html.fnl-light body.fnl-page--site .hero__plans .outer__hero > p {
color: var(--fnl-sub);
}
/* 6c. The client logo rail is the funnels' own since Website 2.0 Part Four
(fnl-site:logos); its light theme is funnel.css 21e, as on the ad funnels.
The old .trusted__wrapper rules that lived here are gone with the rail. */
/* 6d. The Compare Pricing table: the light modal's palette (funnel.css 21t),
restated for this page. style.css paints labels #83B59F, values #5E8272 and
category headings #FFFFFF, and grounds the sticky header and category bars
near-black; on the light ground those measure 2.2:1, 4.1:1 and 1.05:1. */
html.fnl-light body.fnl-page--site .compare__plans {
border-bottom-color: rgba(9, 24, 17, .08);
}
html.fnl-light body.fnl-page--site .compare__plans .plans .elem > .top > p,
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .list .elem > p,
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .list .elem > p > span {
color: var(--fnl-sub);
}
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el p,
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el span,
html.fnl-light body.fnl-page--site .compare__plans .bottom__part .list .elem .sub__el > p,
html.fnl-light body.fnl-page--site .compare__plans .bottom__part .list .elem .sub__el > span,
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el > .el > p,
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .list .elem .sub__el > .el > span {
color: var(--fnl-muted);
}
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .subtitle > p,
html.fnl-light body.fnl-page--site .compare__plans .compare-cat-fixed > p {
color: var(--fnl-white);
}
html.fnl-light body.fnl-page--site .compare__plans .compare-cat-fixed,
html.fnl-light body.fnl-page--site .compare__plans .top-absolute > .inner,
html.fnl-light body.fnl-page--site .compare__plans .plans {
background-color: var(--fnl-bg);
}
html.fnl-light body.fnl-page--site .compare__plans .compare-cat-fixed {
border-bottom: 1px solid rgba(9, 24, 17, .08);
}
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .subtitle {
background-color: var(--fnl-bg);
border-top: 1px solid rgba(9, 24, 17, .08);
}
html.fnl-light body.fnl-page--site .compare__plans .bottom__part > .list .elem::before {
background: linear-gradient(to right, rgba(9, 24, 17, 0), rgba(9, 24, 17, .10) 30%);
}
html.fnl-light body.fnl-page--site .compare__plans .top-absolute > .inner .plans::before {
background: linear-gradient(to right, rgba(9, 24, 17, 0), rgba(9, 24, 17, .14), rgba(9, 24, 17, 0));
}
/* The plan price is gradient-clipped text: this gradient IS its colour
(background-image, never the shorthand, which resets the clip). */
html.fnl-light body.fnl-page--site .compare__plans .plans .elem > .top > span {
background-image: linear-gradient(to right, #0B1F16, #33574A);
}
/* The ticks and crosses are pale-green on dark by construction. */
html.fnl-light body.fnl-page--site .compare__plans .sub__el img[src*="check-green"],
html.fnl-light body.fnl-page--site .compare__plans .sub__el img[src*="close-green"] {
filter: brightness(0);
opacity: .6;
}
/* The ellipse glow behind the plan heads is a light-on-dark decoration. */
html.fnl-light body.fnl-page--site .compare__plans .plans > img {
display: none;
}
/* 6e. FAQ. style.css paints the band #050E0A with a light-on-dark dotted
field; the funnels' light FAQ (funnel.css 21m) is the model. */
html.fnl-light body.fnl-page--site .faq__wrapper {
background-color: var(--fnl-bg);
border-bottom-color: rgba(9, 24, 17, .08);
}
html.fnl-light body.fnl-page--site .faq__wrapper::before,
html.fnl-light body.fnl-page--site .faq__wrapper > .faq-field {
display: none;
}
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq > .top > p,
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem .content-faq > p {
color: var(--fnl-sub);
}
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem .content-faq > p a {
color: var(--fnl-green);
}
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem .head-faq > p {
color: var(--fnl-white);
}
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem .head-faq > span > .vertical,
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem .head-faq > span > .horizontal {
background-color: var(--fnl-white);
}
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem.opened .head-faq > span > .vertical,
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem.opened .head-faq > span > .horizontal {
background-color: var(--fnl-green);
}
html.fnl-light body.fnl-page--site .faq__wrapper .outer__faq .content > .elem::before {
background: linear-gradient(to left, rgba(9, 24, 17, 0), rgba(9, 24, 17, .10));
}
/* 6f. The closing CTA sits on a fixed dark photograph (img/cta-back.webp)
under a 25% black sheet. Same single-veil treatment as the hero. */
html.fnl-light body.fnl-page--site .cta__wrapper {
background-color: #EDF3EF;
}
html.fnl-light body.fnl-page--site .cta__wrapper::before {
background: linear-gradient(180deg,
rgba(247, 250, 248, .86) 0%,
rgba(247, 250, 248, .82) 45%,
rgba(247, 250, 248, .88) 100%);
}
html.fnl-light body.fnl-page--site .cta__wrapper .outer__cta > p {
color: var(--fnl-sub);
}
html.fnl-light body.fnl-page--site .cta__wrapper .info__small {
border-color: rgba(9, 24, 17, .16);
background: rgba(255, 255, 255, .7);
}
html.fnl-light body.fnl-page--site .cta__wrapper .info__small > p {
color: var(--fnl-sub);
}
html.fnl-light body.fnl-page--site .cta__wrapper .info__small > span > img {
filter: brightness(0);
opacity: .6;
}
/* --- W6-0. The How It Works section heading keeps its own casing ------------
style.css capitalises every .h2-title; funnel.css undoes that under .fnl-page,
which /how-it-works (body.fnl-page--site only) does not carry, so the same
source read "Into" there and "into" on /analytics. Same text on both pages. */
body.fnl-page--site:not(.fnl-page) .how__works--graph .h2-title {
text-transform: none;
}
/* --- W6-1. The How It Works graph on phones (Part Four) ------------------ */
/* One section on /analytics and /how-it-works, generated from
tools/funnels/partials/site-hiw-graph.html. style.css (<= 767px) hid the
graph column and script.js returns before the animation there, so phones
saw five paragraphs and no graph. Phones now get each step's own slice of
the same graph under its copy: instance is blank when its source is display:none, so the desktop
column stays RENDERED on phones, as a zero-size clipped box (never
display:none).
The slices show the animation's END state. A instance does not match
selectors through its ancestors, but it inherits custom properties from
the , so the partial's tagged elements read these variables (their
fallbacks are the authored values, which the desktop original keeps):
--hiw-final shows the baked end state (.hiw-final: the three
published discs and the full green trunk)
--hiw-authored hides the node art the animation hides
--hiw-act the colour the animation turns the step lines to
Tablet and desktop (>= 768) are unchanged: no slices, the baked groups
hidden by their own fallback, the animation draws its own end state. */
body.fnl-page--site .how__works--graph .hiw-slice {
display: none;
--hiw-final: inline;
--hiw-authored: none;
--hiw-act: #00FF8A;
}
@media (max-width: 767px) {
body.fnl-page--site .how__works--graph .outer__how--works .inner {
position: relative;
}
body.fnl-page--site .how__works--graph .outer__how--works .inner > .right {
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
body.fnl-page--site .how__works--graph .hiw-slice {
display: block;
width: 100%;
height: auto;
margin-top: 24px;
}
body.fnl-page--site .how__works--graph .outer__how--works .inner > .left .el {
margin-bottom: 64px;
}
body.fnl-page--site .how__works--graph .outer__how--works .inner > .left .el:last-child {
margin-bottom: 0;
}
}
/* --- W3b-1. The AI Brain on phones (Part Two #6) ------------------------- */
/* style.css (<= 767px) hid the whole stage and listed the nine cards instead.
Phones now get the desktop stage as a mini version: the brain image, the
nine-icon orbit and js/brain.js's glyph field, pointer hole and card popups,
all scaled from the desktop proportions (the orbit spans 56.25% of the image
width, as 1080 of 1920 does on desktop). The nine .elem__card stay in the
DOM, visually hidden: brain.js clones them as the popups, and screen readers
still read the list. Tablet (768-991) keeps style.css's 1200px stage. */
@media (max-width: 767px) {
body.fnl-page--site .brain__wrapper {
background-color: #000;
}
/* The heading sits over the image's empty top, as on desktop. */
body.fnl-page--site .brain__wrapper .top {
position: relative;
left: auto;
top: auto;
z-index: 3;
}
body.fnl-page--site .brain__wrapper .media {
display: flex;
margin-top: -64px;
margin-bottom: -56px;
}
/* While a card is open the bottom box steps down out of the stage, so the
card (under the icon ring) never lies over its paragraph. */
body.fnl-page--site .brain__wrapper.brain--card-open .media {
margin-bottom: 0;
}
body.fnl-page--site .brain__wrapper .media > img {
flex: none;
width: calc(min(100% - 20px, 600px) * 1.7778);
min-width: 0;
max-width: none;
height: auto;
/* The image is wider than the phone, so its side fades are off-screen;
fade its top and bottom edges into the ground instead. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
}
body.fnl-page--site .brain__wrapper .media .icons__wrapper {
display: block;
width: min(calc(100% - 20px), 600px);
max-width: none;
height: auto;
aspect-ratio: 1080 / 790;
}
body.fnl-page--site .brain__wrapper .media .icons__wrapper .icon {
width: 36px;
height: 36px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
body.fnl-page--site .brain__wrapper .media .icons__wrapper .icon > img {
width: 15px;
height: 15px;
}
/* The fog is a 96px canvas stretched over the image and blurred; 160px of
blur on a ~650px stage would wash it out, so it scales with the stage. */
body.fnl-page--site .brain__wrapper .media > .brain-fog {
filter: blur(56px) saturate(1.1);
}
body.fnl-page--site .brain__wrapper .mobile-cards {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
body.fnl-page--site .brain__wrapper .media .brain-card.brain-card--wide {
width: auto;
padding: 16px;
}
body.fnl-page--site .brain__wrapper .media .brain-card.brain-card--wide > span {
margin-bottom: 14px;
}
body.fnl-page--site .brain__wrapper > .dots {
display: block;
height: 296px;
}
body.fnl-page--site .brain__wrapper .bottom__box {
position: relative;
left: auto;
z-index: 2;
}
}
@media (prefers-reduced-motion: reduce) {
body.fnl-page--site .brain__wrapper .media .brain-card {
transition: none;
}
}
/* --- W3b-2. Background videos never show a play glyph (Part Two #27) ----- */
/* Some phones (iOS Low Power Mode, data savers, in-app browsers) refuse muted
autoplay and draw their own play button over the poster. The funnels'
pattern cannot show one: the video stays transparent until it is actually
playing (js/script.js adds .is-playing), and the poster is a plain s now; same look as style.css's
`.group__input>p`. Status and confirmation copy is set by js/contact-form.js. */
body.fnl-page--site .hero__contact .outer__contact form .group__input > label {
display: block;
margin-top: 0;
margin-bottom: 15px;
font-size: 12px;
line-height: 90%;
color: #5E8272;
font-weight: 500;
letter-spacing: -0.03em;
}
body.fnl-page--site .hero__contact .outer__contact form .group__input > input:focus-visible,
body.fnl-page--site .hero__contact .outer__contact form .group__input > textarea:focus-visible {
border-color: rgba(0, 255, 138, .45);
}
body.fnl-page--site .hero__contact .outer__contact form .group__input > [aria-invalid="true"] {
border-color: rgba(255, 120, 110, .75);
}
/* The honeypot: off-screen, out of the tab order, hidden from assistive tech. */
body.fnl-page--site .contact-form__hp {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
body.fnl-page--site .contact-form__status {
margin: 20px 0 0;
padding: 14px 16px;
border-radius: 12px;
font-size: 14px;
line-height: 150%;
letter-spacing: -0.02em;
color: #C9E3D6;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1);
}
body.fnl-page--site .contact-form__status[hidden] {
display: none;
}
body.fnl-page--site .contact-form__status--error {
color: #F3D4D1;
background: rgba(255, 90, 80, .08);
border-color: rgba(255, 120, 110, .35);
}
body.fnl-page--site .contact-form__status a,
body.fnl-page--site .contact-form__done a {
color: #00FF8A;
text-decoration: underline;
text-underline-offset: 2px;
}
body.fnl-page--site .hero__contact form .group__submit > button:disabled {
opacity: .6;
cursor: progress;
}
body.fnl-page--site .contact-form__done {
position: relative;
z-index: 1;
padding: 10px 0;
outline: none;
}
body.fnl-page--site .contact-form__done > p {
margin: 0 0 12px;
font-size: 15px;
line-height: 150%;
letter-spacing: -0.02em;
color: #C9E3D6;
}
body.fnl-page--site .contact-form__done > p:last-child {
margin-bottom: 0;
}
body.fnl-page--site .contact-form__done > .contact-form__done-title {
font-size: 20px;
line-height: 130%;
font-weight: 600;
color: #fff;
}
body.fnl-page--site .contact-form__done strong {
color: #00FF8A;
font-weight: 600;
letter-spacing: .02em;
}
/* Once sent, the fields give way to the confirmation (style.css displays
.double and .group__submit, which would override the hidden attribute). */
body.fnl-page--site .contact-form.is-sent > :not(.float):not(.contact-form__done) {
display: none;
}
/* --- W3b-4. "Why Loves Us" on phones and tablets (Part Two #14) - */
/* The 11 industry pages pinned this section for ~3.4 screens at 390px while
four captions took turns. At <= 991px js/script.js no longer pins it, and
the four cards sit in document flow, each with its image and caption. */
@media (max-width: 991px) {
body.fnl-page--site .why__us .why__pin {
position: static;
height: auto;
overflow: visible;
padding-bottom: 40px;
}
body.fnl-page--site .why__us .why__grid {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 28px;
padding-left: 15px;
padding-right: 15px;
}
body.fnl-page--site .why__us .why__grid > .elem,
body.fnl-page--site .why__us .why__grid > .elem.active,
body.fnl-page--site .why__us .why__grid > .elem.is-past {
height: auto;
min-height: 0;
margin-top: 0;
opacity: 1;
aspect-ratio: 16 / 10;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 18px;
}
body.fnl-page--site .why__us .why__grid > .elem > .media {
opacity: 1;
}
body.fnl-page--site .why__us .why__grid > .elem .desc,
body.fnl-page--site .why__us .why__grid > .elem.active .desc {
left: 0;
transform: none;
bottom: 18px;
padding-left: 18px;
padding-right: 18px;
}
body.fnl-page--site .why__us .why__grid > .elem .desc > p {
opacity: 1;
font-size: 18px;
line-height: 125%;
color: #C9E3D6;
}
body.fnl-page--site .why__us .why__grid > .elem .desc > p span {
flex: none;
margin-right: 12px;
opacity: .8;
}
}
/* --- 7. The shared sections on pages without the funnel base (Part Four) --
aboutus, team and reviews carry body.fnl-page--site without .fnl-page, so
funnel.css's base resets (".fnl-page ul", ".fnl-page :where(li)") never
reach the logo rail there: the took the browser's 40px indent and 16px
margins, which pushed the marks down into the rail's clip. The resets are
restated for the rail on those pages only; every value equals the base
rule's, so a page that has .fnl-page renders exactly as before. */
body.fnl-page--site:not(.fnl-page) .fnl-logos ul {
list-style: none;
margin: 0;
padding: 0;
}
body.fnl-page--site:not(.fnl-page) .fnl-logorail li {
font-size: 16px;
letter-spacing: -0.03em;
}
/* --- W3c-1. Headlines and subheads on the ad funnels' ladder (Part Two #4) --
Brief: headlines, subheadlines and copy match the ad funnels' boldness and
sizing across every section and header. The reference is the measured ad
ladder (funnel.css 22a hero, 22c section headlines, 22n cards, 24b(2) hero
sub), restated here for the main site's own roles; every size below is an
ad size at the ad's own breakpoint. Colour is NOT part of this section: the
ad reference is light, and its role colours arrive by token when each page
is lit (W10); on the dark pages the role colours stay the dark baseline.
Role map (from the W3c role census, before/after in the PR):
hero h1.h2-title.bigger and the five hero h2.bigger
-> 22a (63/60/56/51/45/42/38; --flow 41 at <=575), 800,
-0.035em, 92% with a 1.04 floor at <=767
section .h2-title, .fnl-h2 -> 22c (60/45/41/39/34)
column .fnl-h2--col and the legacy headings that sit in a text
column beside media or a form -> 45/40/38/36/34/31
final CTA .fnl-h2--final, .cta__wrapper .h2-title -> 76/63/54/47/43/38
FAQ .faq__wrapper .h2-title -> 54/45/41/39/34
hero sub the paragraph after a hero heading
-> 400, 18/145%, 17 at <=1200, 15 at <=767
sub the paragraph after a section heading -> the .fnl-sub
ladder, 300, 18/150%, 17 at <=1200, 16 at <=575
eyebrow .pre-title takes the .fnl-pill tracking (0.10em)
article the case studies' long-form paragraphs and bullets take the
cards' body copy, 16/400 (was 14/300, 12 on phones); their
160% leading stays, the ad pages have no long-form role
Card titles and support already carry the ad rule (funnel.css 22n twin).
The 13 generated industry funnels carry .fnl-page--site but do not load
this file, so none of this reaches them (flagged in the PR).
style.css sets weight 500 and the .bigger size on the SPANS inside a
heading, so the spans inherit here or a coloured phrase would stay 500.
Line breaking: every heading balances its lines (the ad --flow rule,
applied to all of them because below 768 the hand pages hide their instances of #hiwGraphAll (W6-1):
a shadow tree matches document rules only from inside the instance
(from the cloned #hiwGraphAll down), never through the html class, so
these rules cannot carry the theme prefix. They are theme-neutral
instead: each restates its own presentation attribute as the fallback of
a --hiw-c-* property that only the light rule above sets (custom
properties do inherit through the host). With nothing set they
paint exactly the attribute. #hiwGraph covers the discs script.js adds. */
:is(#hiwGraph, #hiwGraphAll) [fill="#091811"] {
fill: var(--hiw-c-disc, #091811);
}
:is(#hiwGraph, #hiwGraphAll) path[fill="white"]:not([fill-opacity]) {
fill: var(--hiw-c-ink, white);
}
:is(#hiwGraph, #hiwGraphAll) [fill="#83B59F"] {
fill: var(--hiw-c-sub, #83B59F);
}
:is(#hiwGraph, #hiwGraphAll) [fill="#5E8272"] {
fill: var(--hiw-c-muted, #5E8272);
}
:is(#hiwGraph, #hiwGraphAll) [fill="#33503e"] {
fill: var(--hiw-c-spine, #33503e);
}
:is(#hiwGraph, #hiwGraphAll) [stroke="#5f8473"] {
stroke: var(--hiw-c-frame, #5f8473);
}
:is(#hiwGraph, #hiwGraphAll) rect[width="3"][fill="#00FF8A"] {
fill: var(--hiw-c-line, #00FF8A);
}
:is(#hiwGraph, #hiwGraphAll) .hiw-final-trunk path[stroke="#00FF8A"] {
stroke: var(--hiw-c-line, #00FF8A);
}
#hiwGraph stop[stop-color="#5f8473"] {
stop-color: var(--hiw-c-frame, #5f8473);
}
#hiwGraph stop[stop-color="#00FF8A"] {
stop-color: var(--hiw-c-line, #00FF8A);
}
/* The live trace (style.css #00FF8A / #6effb3 with glows). */
html.fnl-light .fnl-page--site .how__works--graph .hiw-trunk-persist,
html.fnl-light .fnl-page--site .how__works--graph .hiw-trunk-tip {
stroke: #007D45;
filter: none;
}
html.fnl-light .fnl-page--site .how__works--graph .hiw-trunk-head {
fill: #007D45;
filter: drop-shadow(0 0 5px rgba(0, 255, 138, .45));
}
html.fnl-light .fnl-page--site .how__works--graph .hiw-shutter {
fill: var(--fnl-bg);
}
html.fnl-light .fnl-page--site .how__works--graph .outer__how--works .inner>.right .dots {
display: none;
}
/* W10e-7 inks and hairlines: .how__works--graph (style.css, rule for rule) */
html.fnl-light .fnl-page--site .how__works--graph .outer__how--works .inner>.left .el>span {
color: var(--fnl-muted);
}
html.fnl-light .fnl-page--site .how__works--graph .outer__how--works .inner>.left .el>p {
color: var(--fnl-sub);
}
html.fnl-light .fnl-page--site .how__works--graph .outer__how--works>.top>p {
color: var(--fnl-sub);
}
/* --- W10e-8. /how-it-works: the hero's floating chips ---------------------
The chips were dark pills (resources-back-btn.svg, #091811) with white
glowing labels over the landscape; on light they are the funnel's white
chips on a hairline with ink labels and readable-green icons
(brightness(.49) of their #00FF8A-only files). The connectors between them
are a canvas drawn in #00FF8A with white pulses (js/resources-rays.js,
`lighter`): the same brightness(.49) turns the lines to the readable
green and the pulses to a mid grey on the light ground. */
html.fnl-light .fnl-page--site .hero__resources .outer__resources .bottom__float>.float-el {
background: #FFFFFF;
border: 1px solid rgba(9, 24, 17, .12);
border-radius: 999px;
box-shadow: 0 12px 28px -18px rgba(9, 24, 17, .35);
}
html.fnl-light .fnl-page--site .hero__resources .outer__resources .bottom__float>.float-el>p {
text-shadow: none;
}
html.fnl-light .fnl-page--site .hero__resources .outer__resources .bottom__float>.float-el>span img,
html.fnl-light .fnl-page--site .hero__resources .outer__resources .bottom__float>.rays-canvas {
filter: brightness(.49);
}
/* W10e-8 inks and hairlines: .hero__resources (style.css, rule for rule) */
html.fnl-light .fnl-page--site .hero__resources .outer__resources>p {
color: var(--fnl-sub);
}
html.fnl-light .fnl-page--site .hero__resources .outer__resources .bottom__float>.float-el>p {
color: var(--fnl-white);
}
/* The landscape (home-resources.webp, a watercolour) carries the headline,
the sub, the nav and the chips. One veil in the page ground, the funnel
21n idiom, strongest behind the copy and the nav and easing off over the
chips (white cards that need no veil), so the painting still reads. */
html.fnl-light .fnl-page--site .hero__resources::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(247, 250, 248, .86) 0%, rgba(247, 250, 248, .82) 62%, rgba(247, 250, 248, .45) 82%, rgba(247, 250, 248, .30) 100%);
}
html.fnl-light .fnl-page--site .hero__resources>.container {
position: relative;
z-index: 1;
}
/* /ai-brain's stage: the glass brain sits behind the headline and, on
phones, behind the whole copy block, so the copy is laid over the
render's brightest highlights (1.1:1 in places, dark theme included). A
scrim in the stage's own black on the copy side, above the render and
under the copy; the render is otherwise untouched. */
html.fnl-light .fnl-page--site .hero__brain::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to right, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, 0) 52%);
}
@media (max-width: 767px) {
html.fnl-light .fnl-page--site .hero__brain::after {
background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .62) 38%, rgba(0, 0, 0, .7) 100%);
}
}
/* --- W10e-9. The campaign studio and the process wheel on these pages -----
W10d-3's treatment (scoped there to the product pages), repeated for the
four pages here that carry the same families; the heroes are direct
children of the body and unique to these pages. The open step's photo
card (every card on tablets and phones): one stage-white veil over the
photo, ink copy, ink step icons. The studio's back-layer dots: hidden.
/strategy's process rocket (the wheel's only picture) inked by filter. */
html.fnl-light .fnl-page--site:has(> :is(.hero__brain, .hero__middle, .workflows__hero, .hero__bottom)) .campaign__wrapper .inner__steps>.elem>.media__full:before {
background: rgba(255, 255, 255, .88);
}
html.fnl-light .fnl-page--site:has(> :is(.hero__brain, .hero__middle, .workflows__hero, .hero__bottom)) .campaign__wrapper .inner__steps>.elem>.desc>.desc-inner>span {
color: var(--fnl-sub);
}
html.fnl-light .fnl-page--site:has(> :is(.hero__brain, .hero__middle, .workflows__hero, .hero__bottom)) .campaign__wrapper .inner__steps>.elem>p>span img {
filter: brightness(0);
opacity: .62;
}
html.fnl-light .fnl-page--site:has(> :is(.hero__brain, .hero__middle, .workflows__hero, .hero__bottom)) .campaign__wrapper .float__back > .dots {
display: none;
}
html.fnl-light .fnl-page--site:has(> .hero__middle) .process__wrapper .circle__process .ascii-dots {
filter: brightness(0) opacity(.5);
}
/* ==========================================================================
W10c. Light mode on the homepage and the 11 industry pages (Website 2.0
Part Three)
--------------------------------------------------------------------------
Page-unique rules only: the shared families (headings, CTA band, hero
video veil, integrations, workflows, matrix, industry tags, CEO demo, AI
Brain stage) are W10b-1. The platform screenshots on these pages are
swapped for their -light twins in the markup (hero-media, campaign-memory,
workflow-1-1..3, the S5-S9 carousel shots; s7-4-reports has no twin and
stays as it is). Photographs stay photographs: where copy sits on one, ONE
veil in the page ground carries it (funnel.css 21d / 21n).
========================================================================== */
/* --- W10c-1. Homepage "Recent Campaigns" collage --------------------------
The fade that sinks the campaign tiles into the section was a #030A07
radial; it sinks them into the page ground instead (same stops). The
tiles are client creative and keep their own paint. */
html.fnl-light .fnl-page--site .portfolio__wrapper {
border-bottom-color: rgba(9, 24, 17, .08);
}
html.fnl-light .fnl-page--site .portfolio--box:after {
background: radial-gradient(circle at 50% 50%,
rgba(247, 250, 248, 0) 14%,
rgba(247, 250, 248, .40) 46%,
rgba(247, 250, 248, .86) 74%,
rgba(247, 250, 248, .98) 100%);
}
/* --- W10c-2. Industry hero (.hero__template) -----------------------------
The industry photograph under the copy. The dark theme laid a 25% black
wash on it; here it takes the funnel hero's scrim (funnel.css 21d, same
curve): the copy column sits on the page ground, the right-hand side
lets the photograph through, the top edge carries the header. On tablets
and phones the copy spans the whole width, so the scrim is the single
final-CTA veil (21n). The eight floating photos around the pinned card
are photographs and keep their paint. */
html.fnl-light .fnl-page--site .hero__template .inn:before {
z-index: 1;
opacity: 1;
background:
linear-gradient(90deg,
#F7FAF8 0%,
#F7FAF8 26%,
rgba(247, 250, 248, .90) 50%,
rgba(247, 250, 248, .74) 78%,
rgba(247, 250, 248, .84) 100%),
linear-gradient(0deg,
rgba(247, 250, 248, .88) 0%,
rgba(247, 250, 248, 0) 22%,
rgba(247, 250, 248, 0) 80%,
rgba(247, 250, 248, .78) 100%);
}
html.fnl-light .fnl-page--site .hero__template .inn > .container {
position: relative;
z-index: 2;
}
html.fnl-light .fnl-page--site .hero__template .inn .desc>p {
color: var(--fnl-sub);
}
@media (max-width: 991px) {
html.fnl-light .fnl-page--site .hero__template .inn:before {
background: linear-gradient(180deg,
rgba(247, 250, 248, .86) 0%,
rgba(247, 250, 248, .82) 45%,
rgba(247, 250, 248, .88) 100%);
}
}
/* As the pinned photograph shrinks into its card, js/script.js fades the
copy out (progress .02 to .10 of the section's height: 260vh, 200vh at
1200px and below); the scrim exists for the copy, so it fades out over
the same scroll, and the card shows its photograph as the dark theme
does. Where scroll-driven animations are unsupported the scrim simply
stays (the card reads as a pale photograph). */
@keyframes w10c-hero-scrim {
to {
opacity: 0;
}
}
@supports (animation-timeline: scroll()) {
html.fnl-light .fnl-page--site .hero__template .inn:before {
animation: w10c-hero-scrim linear both;
animation-timeline: scroll(root);
animation-range: 5vh 26vh;
}
@media (max-width: 1200px) {
html.fnl-light .fnl-page--site .hero__template .inn:before {
animation-range: 4vh 20vh;
}
}
}
/* --- W10c-3. "Why Loves Us" (.why__us) ------------------------
Four photographs, each with a caption laid on it (pinned panels on
desktop, cards on phones: W3b-4). The photographs stay; one page-ground
veil (21n's stops) sits on each, so the caption and, on desktop, the
section heading that the active panel slides under read as ink on the
ground. The captions keep their inactive/active opacity step; the icons
are the sage marks, drawn in ink at partial opacity (the tag-icon
precedent, W10b-1e). */
html.fnl-light .fnl-page--site .why__us {
border-bottom-color: rgba(9, 24, 17, .08);
}
html.fnl-light .fnl-page--site .why__us .why__grid>.elem {
border-top-color: rgba(9, 24, 17, .08);
}
html.fnl-light .fnl-page--site .why__us .why__grid>.elem>.media:before {
display: block;
z-index: 1;
opacity: 1;
background: linear-gradient(180deg,
rgba(247, 250, 248, .86) 0%,
rgba(247, 250, 248, .82) 45%,
rgba(247, 250, 248, .88) 100%);
}
html.fnl-light .fnl-page--site .why__us .why__grid>.elem .desc>p {
color: var(--fnl-white);
}
html.fnl-light .fnl-page--site .why__us .why__grid>.elem .desc>p span img {
filter: brightness(0);
opacity: .62;
}
@media (max-width: 991px) {
html.fnl-light .fnl-page--site .why__us .why__grid > .elem,
html.fnl-light .fnl-page--site .why__us .why__grid > .elem.active,
html.fnl-light .fnl-page--site .why__us .why__grid > .elem.is-past {
border-color: rgba(9, 24, 17, .10);
}
html.fnl-light .fnl-page--site .why__us .why__grid > .elem .desc > p {
color: var(--fnl-white);
}
}
/* --- W10c-4. The AI Brain stage card: the copy stays on the card ---------
W10b-1e makes the render a card inset in the light section (40px of
section ground above and below it, 30px each side). style.css positions
the heading and the note against the SECTION's edges, so the inset moved
the card out from under them: on tablets the heading's pill sat on the
card's top edge, and between 768px and about 820px the note (756px wide,
centred on the section) ran past the card's sides onto the ground, on
every lit page (W10d found it on the product pages and patched its four;
this is the site-wide rule, the same max-width). Here each offset is the
dark theme's plus the 40px inset, so the composition inside the card is
the dark one, and the note keeps the card's side inset. Two tablet
defects of the dark layout are fixed on lit pages while here: the heading
is absolute at left:50%, so it shrank to half the section's width and
wrapped (three lines on /video, and the sub ran into the icon ring at
768-991px, 1.1:1): it takes its own width, capped at the card's; and on
tablets it starts 24px inside the card (not the dark 40px), which clears
the ring on every lit page measured (768, 820, 900, 991). The note's
near-clear glass sits on the render's bright floor at 768px (4.50:1): a
30% black tint inside the stage, where the dark palette applies. Phones
(767px and below) lay the heading and the note out in flow: W3b-1,
untouched. */
@media (min-width: 768px) {
html.fnl-light .fnl-page--site .brain__wrapper .top {
top: 140px;
width: max-content;
max-width: calc(100% - 90px);
}
html.fnl-light .fnl-page--site .brain__wrapper .bottom__box {
bottom: 120px;
max-width: min(756px, calc(100% - 90px));
background-color: rgba(0, 0, 0, .30);
}
}
@media (min-width: 768px) and (max-width: 1200px) {
html.fnl-light .fnl-page--site .brain__wrapper .bottom__box {
bottom: 85px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
html.fnl-light .fnl-page--site .brain__wrapper .top {
top: 64px;
}
}
/* W10c-final. The examples slider on every lit page: its dot field is drawn
white by script.js (no light palette), so it is hidden, and the mint ellipse
keeps the funnel's .06 peak (as W10d-3b/3c do for the product pages). */
html.fnl-light .fnl-page--site .shorts-portfolio > .dots-float {
display: none;
}
html.fnl-light .fnl-page--site .shorts-portfolio > img.ellipses-float {
opacity: .4;
}
/* ===== R1-G2: pricing, compare table and CTAs (Ben review 2026-09-28) ===== */
/* R1-G2 C6a. The Compare table's header buttons on /pricing: never wrap
("Start Subscription" broke onto two lines on the Pro column, whose filled
button lacked the tracking the outlined ones have), -0.42px tracking like
the platform's buttons. The phone rule in 6a above (under 481px, four
80px columns) still lets them wrap, deliberately, so this starts at 481px. */
@media (min-width: 481px) {
body.fnl-page--site .compare__plans .plans .elem > .top .btn > a {
white-space: nowrap;
letter-spacing: -0.42px;
}
}
/* The Pro button's hover arrow (.fb-in, style.css 842 at left:27px) ended 1px
before "Get Started" began; 20px gives it 8px of air. */
body.fnl-page--site .compare__plans .plans .filled-btn .fb-in {
left: 20px;
}
@media (min-width: 992px) {
/* R1-G2 C6b. "Compare The Plans / That Fits You" on two lines: the header
grid took width:100% and squeezed the title column to ~280px, which
broke "Compare The Plans" in two. The grid now takes only its four
columns and the title column the rest. */
body.fnl-page--site .compare__plans .top-absolute > .inner > .plans {
width: auto;
flex: 0 0 auto;
}
body.fnl-page--site .compare__plans .top-absolute > .inner > .left {
flex: 1 1 auto;
min-width: 0;
container-type: inline-size;
}
/* The title has an explicit sits on the text baseline), so the
preserveAspectRatio=none trace was stretched past the pill top, plus a
round cap. The graph is a block (no baseline gap, so the trace maps 1:1),
and the caps are square, so the trunk ends on the pill top (y=2095). */
.how__works--graph #hiwGraph {
display: block;
}
.how__works--graph .hiw-trunk-persist,
.how__works--graph .hiw-trunk-tip {
stroke-linecap: butt;
}
/* C20 item 52. /how-it-works on phones: the rays canvas fills the chip box
and its lines run to the box bottom, but style.css (<= 767px) left 70px of
padding under the box, and the tablet min-height above can add more, so
the lines stopped short of the bottom of the hero landscape. On phones the
box is in flow and is the last thing in the hero, so the hero now ends
where the box (and the lines) end. */
@media (max-width: 767px) {
.fnl-page--site .hero__resources .outer__resources {
min-height: 0;
padding-bottom: 0;
}
}
/* ===== R1-G1: hand-page layout and light fixes (Ben review 2026-09-28) ===== */
/* Items C1 to C5, C11 to C13, C16, C18, C19 and C21 of the resolution plan.
Overrides only; nothing above this marker is edited. */
/* C1 (items 1, 2). The homepage headline returns to the old homepage's 80px
(style.css 304), keeping the W3c weight and tracking, and steps down on the
old homepage's ladder at this file's breakpoints. 575 keeps the shared 42px
so phones read as they do today. */
.fnl-page--site .hero__main h1.h2-title.bigger { font-size: 80px; }
@media (max-width: 1400px) { .fnl-page--site .hero__main h1.h2-title.bigger { font-size: 72px; } }
@media (max-width: 1200px) { .fnl-page--site .hero__main h1.h2-title.bigger { font-size: 64px; } }
@media (max-width: 991px) { .fnl-page--site .hero__main h1.h2-title.bigger { font-size: 52px; } }
@media (max-width: 767px) { .fnl-page--site .hero__main h1.h2-title.bigger { font-size: 44px; } }
@media (max-width: 575px) { .fnl-page--site .hero__main h1.h2-title.bigger { font-size: 42px; } }
@media (max-width: 390px) { .fnl-page--site .hero__main h1.h2-title.bigger { font-size: 36px; } }
/* The hero subs hide their hand