/* cssiivous — DEV color-scheme switcher (schemes + corner widget).
* Remove this file + the _footer.php widget block before go-live, or keep the
* winning scheme by copying its overrides into tokens.css and deleting the rest.
*
* HOW TO ADD A SCHEME
* 1. Add a `html[data-scheme="name"] { ... }` block below overriding the raw
* palette tokens from tokens.css (--dark-green, --green, --lime, etc. are
* ROLE names now, not colors: --green = solid brand surface under white
* text, --lime = bright accent under dark text, --dark-green = dark
* section bg + headings, --soft-mint = soft accent wash,
* --accent-on-light = accent TEXT on light surfaces, must hit 4.5:1 on
* --neutral-01 and white).
* 2. Add the scheme to the $cs_schemes array in templates/_footer.php
* (slug => label + two swatch hexes).
* The DEFAULT is data-scheme="lovable-light", set on in _header.php. The
* Cleanora palette is still the :root one in tokens.css, so the "cleanora"
* slug needs no block here — it just overrides nothing.
* Unlayered attribute selectors beat the @layer tokens :root, no !important
* needed. Semantic aliases + focus ring follow automatically.
*/
/* GoClean (Webflow template, ASSETS/goclean) — blue primary, yellow accent.
* "goclean-hero" = same palette + the GoClean home-1 hero layout below.
* "goclean-solo" = the same scheme 1:1, only the hero differs: one cleaner
* (Kristel), cut out and overflowing the yellow arch. Both are kept so the
* two headers can be compared side by side. */
html[data-scheme="goclean"],
html[data-scheme="goclean-hero"],
html[data-scheme="goclean-solo"] {
--neutral-01: #f9f9f9; /* page bg */
--dark-green: #071536; /* navy: dark sections, headings */
--green: #2680eb; /* primary blue: buttons, solid cards */
--light-green: #2680eb; /* dots + icon fills (no contrast duty) */
--lime: #fee579; /* yellow accent, dark text on it */
--soft-mint: #cff3ff; /* light-blue wash */
--accent-on-light: #1d6ad8; /* blue text on light, 5.1:1 on white */
}
/* Yellow — yellow-led light iteration: cream page, navy solids, amber links */
html[data-scheme="yellow"] {
--neutral-01: #fbf7ea; /* warm cream page bg */
--dark-green: #071536; /* navy: dark sections, headings */
--green: #14264d; /* navy solid: buttons, cards (white text ok) */
--light-green: #f6c915; /* strong yellow: dots + icon fills */
--lime: #fee579; /* yellow accent, dark text on it */
--soft-mint: #fdf3c9; /* pale yellow wash */
--accent-on-light: #8f6b00; /* dark amber text on light, 4.6:1 on white */
}
/* Lovable (Kristel's example, content/lovable/) — orange accent, slate dark,
* warm off-white page. Orange sampled from the CTA button (#fa6e1f), slate
* from the serif headings (#202830). The default scheme (see _header.php).
* "lovable-light" is the same palette 1:1, only the hero differs: a light card
* instead of the slate one (block further down). */
html[data-scheme="lovable"],
html[data-scheme="lovable-light"] {
--neutral-01: #f7f7f5; /* warm off-white page bg */
--dark-green: #202830; /* slate: dark sections, headings */
--green: #313b49; /* lighter slate: buttons, solid cards */
--light-green: #ef751f; /* logo-dot orange: dots + icon fills */
--lime: #fa6e1f; /* CTA orange */
--on-lime: #ffffff; /* white CTA label on the orange pill (Sten's call) */
--soft-mint: #f5ede3; /* warm sand wash */
--accent-on-light: #b34706; /* burnt orange text on light, ~5:1 on white */
}
/* ------ light hero variant (scheme "lovable-light") ------
* Same orange palette, same hero layout and copy; the slate card under the
* headline becomes a light one. Not flat white: white top under the nav warming
* down to a soft peach at the bottom edge, so the card hands off to the warm
* page (#f7f7f5) and the trust strip below instead of stopping dead. A pure
* white card on a near-white page loses its silhouette altogether, which is the
* "too unison" failure mode; the peach foot and the hairline keep the edge
* readable while the whole thing still reads as light.
* Everything the dark hero printed in white has to be re-toned below — the
* .heading-1--inverse / .hero__lead / .stat__* rules all assume a dark card. */
html[data-scheme="lovable-light"] .section--hero .section__bg--dark {
background-color: var(--white);
background-image: linear-gradient(178deg, #ffffff 0%, #fff6ee 52%, #ffe7d4 100%);
box-shadow: inset 0 0 0 1px rgb(250 110 31 / 0.12);
}
/* the watermark O is a 10%-opacity wash tuned against the slate card; on white
* it all but vanishes, so it gets a little more presence */
html[data-scheme="lovable-light"] .section--hero .hero-o { opacity: 0.16; }
html[data-scheme="lovable-light"] .section--hero .heading-1--inverse { color: var(--text-heading); }
/* the CTA orange only reaches 2.98:1 on white — under the 3:1 large-text floor.
* The burnt-orange accent token is the one built for light surfaces. */
html[data-scheme="lovable-light"] .section--hero .accent,
html[data-scheme="lovable-light"] .section--hero .arrow-link__text,
html[data-scheme="lovable-light"] .section--hero .stat__unit { color: var(--accent-on-light); }
html[data-scheme="lovable-light"] .section--hero .arrow-link__underline { background: var(--accent-on-light); }
html[data-scheme="lovable-light"] .section--hero .arrow-link__caret { border-color: var(--accent-on-light); }
html[data-scheme="lovable-light"] .section--hero .hero__lead,
html[data-scheme="lovable-light"] .section--hero .stat__label { color: var(--text-main); }
html[data-scheme="lovable-light"] .section--hero .stat__num,
html[data-scheme="lovable-light"] .section--hero .stat__digit,
html[data-scheme="lovable-light"] .section--hero .hero__rating-text { color: var(--text-heading); }
/* ------ GoClean home-1 hero variant (scheme "goclean-hero") ------
* Rebuilt from ASSETS/goclean home-1.html: wavy light bg, text left, yellow
* arch with cleaner cutout center, stat column right.
* Markup lives in templates/home.php (.hero-gc); hidden unless the scheme
* is active, and the Cleanora hero hides in its place. */
.hero-gc { display: none; }
html[data-scheme="goclean-hero"] .section--hero { display: none; }
html[data-scheme="goclean-hero"] .hero-gc {
display: block;
background: url("../img/goclean/hero-bg.png") 50% 0 / cover no-repeat;
padding-top: var(--space-8);
overflow: hidden;
}
.hero-gc__grid { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(2.8125rem, 1.5rem + 3vw, 5rem); }
.hero-gc__text { width: 40%; }
/* font-family explicitly: this is a , not an
(the home page may only
* have one), so it does not inherit the heading face */
.hero-gc__title { font-family: var(--font-secondary); color: var(--text-heading); font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-medium); }
.hero-gc__lead { margin-top: var(--space-4); max-width: 25rem; color: var(--text-main); font-size: var(--text-md); line-height: var(--lh-md); }
.hero-gc__actions { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.hero-gc__btn {
padding: 1rem 2.875rem; border: 1px solid var(--accent-on-light);
color: var(--accent-on-light); letter-spacing: 0.0625rem; line-height: 1;
border-radius: var(--radius-pill); transition: background var(--dur-fast), color var(--dur-fast);
}
.hero-gc__btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.hero-gc__link { color: var(--accent-on-light); font-weight: var(--fw-medium); letter-spacing: 0.0625rem; }
.hero-gc__link:hover { text-decoration: underline; text-underline-offset: 0.375rem; }
/* Short and wide on purpose: the arch is a backdrop the pair stand in front of,
* not a box they sit inside. Filling a tall arch with a landscape cutout left
* them parked on the bottom edge under a slab of empty yellow. */
.hero-gc__media {
position: relative; align-self: flex-end;
width: 38%; min-height: clamp(16rem, 7rem + 15vw, 25rem);
background: var(--lime); border-radius: 6.25rem 6.25rem 0 0;
}
/* wider and taller than the arch: heads clear the top curve, the spray bottle
* and the duster break the sides. -53% not -50% so the right-hand duster keeps
* clear of the stat column. height:auto or the HTML height attribute pins the
* ratio and squishes the cutout. */
.hero-gc__img {
position: absolute; bottom: 0; left: 50%; transform: translateX(-53%);
display: block; width: calc(100% + 3rem); max-width: none; height: auto;
}
.hero-gc__stats { display: flex; flex-direction: column; gap: var(--space-5); width: 17%; }
.hero-gc__num { color: var(--green); font-family: var(--font-secondary); font-size: clamp(2.25rem, 1.9rem + 1vw, 3.25rem); font-weight: var(--fw-medium); line-height: 1; }
.hero-gc__unit { margin-left: 0.4rem; color: var(--text-heading); font-family: var(--font-primary); font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: 0; }
.hero-gc__stat-label { margin-top: 0.5rem; color: var(--text-main); font-size: var(--text-base); }
@media (max-width: 61.99rem) { /* 991 — stack like the template's tablet step */
/* the wavy bg's interest is off-frame at narrow widths, so the top reads as
* empty; tighten the lead-in */
html[data-scheme="goclean-hero"] .hero-gc { padding-top: var(--space-6); }
.hero-gc__grid { flex-flow: wrap; justify-content: center; row-gap: var(--space-6); }
.hero-gc__text { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-gc__actions { justify-content: center; }
/* stacked, the arch sits under the stats, so the heads need their own room.
* aspect-ratio, not a fixed height: against a %-width arch a fixed height
* makes the overflow swing wildly across the range. */
.hero-gc__media { order: 3; width: 60%; min-height: 0; aspect-ratio: 1.5; margin-top: 5rem; align-self: auto; }
.hero-gc__img { transform: translateX(-50%); }
.hero-gc__stats { order: 2; flex-flow: row wrap; justify-content: center; column-gap: var(--space-7); width: 100%; text-align: center; }
}
@media (max-width: 47.99rem) { /* 767 */
.hero-gc__media { width: 85%; }
.hero-gc__stats { column-gap: var(--space-6); }
}
/* ------ solo hero variant (scheme "goclean-solo") ------
* Same GoClean palette and the same three-column banner, but the arch is a
* backdrop rather than a frame: one cutout cleaner, bottom flush with the
* section edge, breaking past the arch at the top and on both sides. Measured
* against the template's own home-1 (arch 443x600, figure 408x570 overhanging
* the left edge by 35px) and pushed further, which is the point of the variant.
* Markup: .hero-solo in templates/home.php. */
.hero-solo { display: none; }
html[data-scheme="goclean-solo"] .section--hero { display: none; }
html[data-scheme="goclean-solo"] .hero-solo {
display: block;
background: url("../img/goclean/hero-bg.png") 50% 0 / cover no-repeat;
/* room above the arch for the head to break out (the overflow is ~120px at
* 1440, so the lead-in has to clear that plus breathing space) */
padding-top: clamp(3.5rem, 1rem + 9.5vw, 10.5rem);
overflow: hidden;
}
.hero-solo__grid { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(2.8125rem, 1.5rem + 3vw, 5rem); }
.hero-solo__text { width: 40%; }
/* a
, not an
: the page already has one and this variant ships in the
* same DOM as the others */
.hero-solo__title { font-family: var(--font-secondary); color: var(--text-heading); font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-medium); }
.hero-solo__lead { margin-top: var(--space-4); max-width: 25rem; color: var(--text-main); font-size: var(--text-md); line-height: var(--lh-md); }
.hero-solo__actions { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.hero-solo__btn {
padding: 1rem 2.875rem; border: 1px solid var(--accent-on-light);
color: var(--accent-on-light); letter-spacing: 0.0625rem; line-height: 1;
border-radius: var(--radius-pill); transition: background var(--dur-fast), color var(--dur-fast);
}
.hero-solo__btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.hero-solo__link { color: var(--accent-on-light); font-weight: var(--fw-medium); letter-spacing: 0.0625rem; }
.hero-solo__link:hover { text-decoration: underline; text-underline-offset: 0.375rem; }
.hero-solo__media {
position: relative; align-self: flex-end;
width: 36%; min-height: clamp(24rem, 12rem + 21vw, 37.5rem);
background: var(--lime); border-radius: 6.25rem 6.25rem 0 0;
}
/* Taller than the arch and offset left of it: the head clears the curve, the
* spray bottle and gloved hand break the left edge, and the apron runs off the
* bottom of the section (.hero-solo clips it) exactly like the template crops
* its own cutout. -56% rather than -50% because her mass sits right of centre
* in the cutout — the bottle takes up the left third — so a true centre would
* park her against the stats column. */
.hero-solo__img {
position: absolute; bottom: 0; left: 50%; transform: translateX(-56%);
width: calc(100% + 2.5rem); max-width: none;
/* height:auto or the HTML height attribute pins 1339px and aspect-ratio
* never gets a say (same trap as .hero-gc__img) */
height: auto; aspect-ratio: 0.86; object-fit: cover; object-position: 50% 0;
}
.hero-solo__stats { display: flex; flex-direction: column; gap: var(--space-5); width: 17%; }
.hero-solo__num { color: var(--green); font-family: var(--font-secondary); font-size: clamp(2.25rem, 1.9rem + 1vw, 3.25rem); font-weight: var(--fw-medium); line-height: 1; }
.hero-solo__unit { margin-left: 0.4rem; color: var(--text-heading); font-family: var(--font-primary); font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: 0; }
.hero-solo__stat-label { margin-top: 0.5rem; color: var(--text-main); font-size: var(--text-base); }
@media (max-width: 61.99rem) { /* 991 — stack like the template's tablet step */
html[data-scheme="goclean-solo"] .hero-solo { padding-top: var(--space-6); }
.hero-solo__grid { flex-flow: wrap; justify-content: center; row-gap: var(--space-6); }
.hero-solo__text { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-solo__actions { justify-content: center; }
/* stacked, the arch sits under the stats, so the head has to be given its own
* room or it lands on the last stat label. aspect-ratio instead of a fixed
* min-height keeps the overflow at a steady ~80px across the whole range —
* a fixed height against a %-width arch ran it up to 300px at 991. */
.hero-solo__media { order: 3; width: 58%; min-height: 0; aspect-ratio: 0.9; margin-top: 6rem; align-self: auto; }
.hero-solo__stats { order: 2; flex-flow: row wrap; justify-content: center; column-gap: var(--space-7); width: 100%; text-align: center; }
}
@media (max-width: 47.99rem) { /* 767 */
.hero-solo__media { width: 74%; }
.hero-solo__stats { column-gap: var(--space-6); }
}
@media (max-width: 29.99rem) { /* 479 */
.hero-solo__media { width: 84%; }
.hero-solo__img { width: calc(100% + 3rem); }
}
/* ------ corner widget ------ */
.scheme-switch {
position: fixed; right: 0.75rem; bottom: 0.75rem; z-index: 200;
display: flex; gap: 0.375rem; padding: 0.375rem;
background: rgb(255 255 255 / 0.92);
border: 1px solid rgb(0 0 0 / 0.12); border-radius: var(--radius-pill);
box-shadow: 0 2px 12px rgb(0 0 0 / 0.15);
}
.scheme-switch__btn {
display: flex; width: 1.5rem; height: 1.5rem; padding: 0;
border: 2px solid transparent; border-radius: 50%;
overflow: hidden; cursor: pointer; background: none;
transition: transform var(--dur-fast) var(--ease-out);
}
.scheme-switch__btn:hover { transform: scale(1.15); }
.scheme-switch__btn[aria-pressed="true"] { border-color: var(--neutral-09); }
.scheme-switch__btn span { flex: 1; pointer-events: none; }