/* ╔══════════════════════════════════════════════════════════════════════╗ ║ חוסך — landing site styles. Brand: white glass + black ink. ║ ║ Ink #111827 (CTAs/accents/borders), charcoal #374151, light-grey ║ ║ highlight #E5E7EB, glass-white #F5F7F8. Formal, editorial, mono. ║ ║ Fonts: Rubik (display) + Assistant (body). RTL. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ :root { --green: #111827; /* ink black — CTAs / accents / borders */ --green-2: #374151; /* slate charcoal */ --green-d: #000000; /* deepest ink for gradients */ --lime: #E5E7EB; /* light-grey highlight (DARK text on this) */ --mint: #F0F2F4; /* subtle grey tint surface */ --sage: #6B7280; /* muted slate accent */ --sand: #fbf3e0; /* warm tint */ --cream: #F5F7F8; /* glass white */ --ink: #0B0F14; /* near-black text */ --muted: #4B5563; --white: #ffffff; --line: #E4E8EC; /* formal hairline */ /* Ink scale — a calibrated monochrome ramp the whole system tunes against. */ --ink-900: #0B0F14; --ink-800: #111827; --ink-700: #1F2733; --ink-600: #374151; --ink-500: #4B5563; --ink-400: #6B7280; --ink-300: #9CA3AF; --ink-200: #CBD2D9; --ink-100: #E4E8EC; --ink-050: #F0F2F4; /* Refined accent system — color used with intent over the ink/glass base. Green = action (CTAs, links, active, focus), matching the Switchy logo. Amber = value/savings. */ --accent: #16A34A; /* brand green — primary action (fills/CTAs/borders/icons) */ --accent-d: #15803D; /* deep green for gradient depth + hover */ --accent-t: #DCFCE7; /* light green surface tint */ --value: #F59E0B; /* amber — savings / value emphasis (fills/badges/icons) */ --value-t: #FEF3C7; /* light amber surface tint — "best value" table row */ --value-d: #D97706; /* On-light TEXT tiers — the same brand hues, darkened so green/amber used as small text clear WCAG AA (≥4.5:1) on white/glass. --accent (3.3:1 on white) is fine for fills, borders, icons and large display, but fails for label- sized text; these are the values to use whenever the colour IS the ink. In dark mode the lifted --accent/--value already pass, so these alias back. */ --accent-ink: #15803D; /* green text on light — 4.6:1 on white */ --value-ink: #B45309; /* amber text on light — 5.9:1 on white */ /* Semantic status colours — driven from one place so toasts / field-errors / callouts stop hand-coding raw hex. Light surfaces (--*-t) for tinted ground. */ --error: #DC2626; --error-t: #FEE2E2; --warning: #D97706; --warning-t: #FEF3C7; --info: #2563EB; --info-t: #DBEAFE; --radius-xs: 8px; /* chips, tight tablets, inner controls */ --radius-sm: 12px; --radius: 20px; /* friendlier rounding */ --radius-lg: 26px; /* Layered elevation — a soft ambient wash + a tighter key shadow, so cards read as lifted glass rather than a flat drop. Cool ink-tinted, never black. An explicit elevation SCALE (--elev-0…3) names the same ramp by depth, so components can request a tier rather than reach for a raw shadow token. */ --shadow-sm: 0 1px 2px rgba(15,27,34,.04), 0 4px 14px rgba(15,27,34,.05); --shadow: 0 2px 6px rgba(15,27,34,.05), 0 14px 38px rgba(15,27,34,.09); --shadow-lg: 0 6px 16px rgba(15,27,34,.08), 0 30px 70px rgba(15,27,34,.16); --shadow-ink: 0 10px 24px rgba(17,24,39,.26), 0 2px 6px rgba(17,24,39,.18); --elev-0: none; --elev-1: var(--shadow-sm); --elev-2: var(--shadow); --elev-3: var(--shadow-lg); /* Glass-glint — the signature 1px top-edge light that makes a surface read as lifted glass. Layer it FIRST in a box-shadow list, before the elevation. */ --glint: inset 0 1px 0 rgba(255,255,255,.7); /* Focus rings — a two-layer ring (white inner gap + green halo) so the outline reads cleanly on both light glass and the dark ink bands. The value variant is for amber "best/value" controls. */ --ring: 0 0 0 2px #fff, 0 0 0 5px rgba(22,163,74,.42); /* focus ring (green) */ --ring-value: 0 0 0 2px #fff, 0 0 0 5px rgba(245,158,11,.45); --ring-flush: 0 0 0 3px rgba(22,163,74,.34); /* no white gap — for borderless/dark contexts */ /* Spacing scale — a single rhythm the whole system can tune against, so gaps/padding share one cadence instead of drifting magic numbers. */ --space-xs: 8px; --space-sm: 16px; --space-md: 28px; --space-lg: 56px; --space-xl: 86px; --maxw: 1140px; /* Fluid type scale — one clamp() ramp the headings tune against, so display sizes breathe between phone and desktop without per-component media queries. min / preferred (vw) / max are hand-tuned to the existing hero & section sizes. */ --fs-h1: clamp(40px, 6.4vw, 76px); --fs-h2: clamp(30px, 4.4vw, 50px); --fs-h3: clamp(20px, 2.4vw, 25px); --fs-lead: clamp(16px, 2vw, 19px); --fs-body: clamp(15px, 1.2vw, 17px); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* ── Dark theme ─────────────────────────────────────────────────────────── A refined dark mode that re-skins the SAME token names, so every component below inherits it without per-rule overrides. Surfaces become dark ink, text lifts to light; the green ACTION and amber VALUE accents are nudged brighter so they stay legible (and clear WCAG AA) against the dark glass. */ /* ===== DARK THEME ===== Driven by [data-theme="dark"] on . A tiny inline guard (emitted by build.js head() and present in index.html) sets data-theme from localStorage or the system preference BEFORE first paint — so system users still get dark with no flash, and the header toggle has full manual control. Light is the default :root above. */ :root[data-theme="dark"] { --green: #E5E7EB; /* "ink" inverts to light for text/structure */ --green-2: #C5CBD3; --green-d: #F3F5F7; /* deepest "ink" → brightest text on dark */ --lime: #2A3340; /* highlight surface (LIGHT text now sits on it) */ --mint: #1B232E; /* subtle tint surface */ --sage: #9AA4B2; --cream: #11161C; /* page background — dark ink, not pure black */ --ink: #E8EBEF; /* primary body text */ --muted: #AEB6C2; /* ≥4.5:1 on the dark surfaces */ --white: #161C24; /* "white" cards become raised dark panels */ --line: #2A3340; /* hairline on dark */ --ink-900: #F3F5F7; --ink-800: #E5E7EB; --ink-700: #CBD2D9; --ink-600: #AEB6C2; --ink-500: #9AA4B2; --ink-400: #828B98; /* lifted: timestamps/eyebrow labels now clear AA (>=4.5:1) on dark cards */ --ink-300: #5A6573; --ink-200: #3A4452; --ink-100: #2A3340; --ink-050: #1B232E; --accent: #4ADE80; /* green lifted for contrast on dark glass */ --accent-d: #22C55E; --accent-t: #0B2A18; /* tinted green surface */ --value: #FBBF24; /* amber lifted */ --value-d: #F59E0B; --value-t: #2A2410; /* dark amber tint — "best value" table row */ /* On dark glass the lifted accents already clear AA (10:1+), so the on-light text tiers alias back to them — green/amber text stays bright, not dark. */ --accent-ink: #4ADE80; --value-ink: #FBBF24; /* Semantic status — lifted hues + dark tinted grounds so callouts/toasts stay legible on dark glass (the light --*-t tints would glare). */ --error: #F87171; --error-t: #2A1416; --warning: #FBBF24; --warning-t: #2A2110; --info: #60A5FA; --info-t: #11233A; /* Glass-glint softens on dark surfaces (a bright white edge would shout). */ --glint: inset 0 1px 0 rgba(255,255,255,.08); --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45); --shadow: 0 2px 6px rgba(0,0,0,.45), 0 14px 38px rgba(0,0,0,.55); --shadow-lg: 0 6px 16px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.6); --shadow-ink: 0 10px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5); --shadow-glass: 0 2px 6px rgba(0,0,0,.45), 0 14px 38px rgba(0,0,0,.55); --ring: 0 0 0 2px var(--cream), 0 0 0 5px rgba(129,140,248,.5); --ring-value: 0 0 0 2px var(--cream), 0 0 0 5px rgba(251,191,36,.5); --ring-flush: 0 0 0 3px rgba(129,140,248,.45); } /* Glass utility adapts to a dark frosted panel rather than translucent white. */ :root[data-theme="dark"] .glass { background: rgba(28,36,46,.6); border-color: rgba(255,255,255,.08); } @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { :root[data-theme="dark"] .glass { background: var(--white); } } :root[data-theme="dark"] .nav { background: rgba(17,22,28,.82); } :root[data-theme="dark"] .nav.scrolled { background: rgba(17,22,28,.95); } :root[data-theme="dark"] .feature, :root[data-theme="dark"] .guide-card, :root[data-theme="dark"] .plan, :root[data-theme="dark"] .post-card { background: rgba(28,36,46,.6); border-color: rgba(255,255,255,.08); } @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { :root[data-theme="dark"] .feature, :root[data-theme="dark"] .guide-card, :root[data-theme="dark"] .plan, :root[data-theme="dark"] .post-card { background: var(--white); } } :root[data-theme="dark"] .plogo--img, :root[data-theme="dark"] .pchip { background: var(--white); } /* Surfaces with a HARD-CODED light background (#fff) and NO token to re-skin: in dark mode their text flips light → light-on-light. Re-skin them to dark so contrast holds. (.feature/.plan/etc. already covered above via their own overrides; these are the remaining hand-coded whites.) */ :root[data-theme="dark"] .trust { background: #161C24; } :root[data-theme="dark"] .section--alt { background: #0E141A; } :root[data-theme="dark"] .chip { background: #161C24; border-color: rgba(255,255,255,.10); color: var(--green-d); } :root[data-theme="dark"] a.chip:hover { background: #1F2733; border-color: rgba(255,255,255,.18); } :root[data-theme="dark"] .faq__list details[open] { background: rgba(28,36,46,.6); border-color: rgba(255,255,255,.12); } /* Hero phone is a device MOCKUP — its screen stays a light glass panel in both themes, so pin its inner text to dark ink (it would otherwise inherit the light-flipped tokens and vanish on the white screen). */ :root[data-theme="dark"] .phone__screen .card { background: #fff; } :root[data-theme="dark"] .phone__screen .card__text b { color: #111827; } :root[data-theme="dark"] .phone__screen .card__text small { color: #4B5563; } :root[data-theme="dark"] .phone__screen .tag { color: #111827; } /* Community + booking: re-skin the few surfaces that carry their own light-mode tints so they read on dark glass; the rest inherit the re-skinned tokens. */ :root[data-theme="dark"] .post-card:hover { border-color: rgba(255,255,255,.14); } :root[data-theme="dark"] .stars-row { color: var(--ink-200); } :root[data-theme="dark"] .booking__note.is-error { color: #f87171; } :root[data-theme="dark"] .booking__consent label, :root[data-theme="dark"] .post-card__body, :root[data-theme="dark"] .review-card__body { color: var(--ink); } /* The green "join the app" panel keeps its tint but on dark it must stay legible. */ :root[data-theme="dark"] .community__join { color: var(--ink); } :root[data-theme="dark"] .community__join small { color: var(--muted); } :root[data-theme="dark"] .slot[disabled], :root[data-theme="dark"] .slot:disabled, :root[data-theme="dark"] .slot--taken { color: var(--ink-400); } /* Premium INK bands — the dark hero cards, CTA, footer, calc card, compare header and the "me" chat bubble are built on var(--green-d)/var(--green), which INVERT to light in dark mode (turning these into near-white bands with hardcoded white text → ~1:1 contrast). Pin them to a fixed dark ink so they stay dark-on-light-text in BOTH themes, per the brand's "big dark cards stay ink, not coloured" rule. Fixed hexes (not tokens) so theme inversion can't reach them. */ :root[data-theme="dark"] .cta, :root[data-theme="dark"] .calc__card, :root[data-theme="dark"] .article-cta, :root[data-theme="dark"] .card--save { background: linear-gradient(140deg, #0B0F14, #1F2733); } :root[data-theme="dark"] .footer { background: #0B0F14; } :root[data-theme="dark"] .cmp-table thead th { background: #1F2733; } :root[data-theme="dark"] .ai-bubble--me { background: #1F2733; color: #fff; } /* Text that sits ON these fixed-dark bands uses --lime (a LIGHT highlight in light mode, but a DARK surface token in dark mode) — pin it light so the note / consent links stay legible on the dark CTA band. */ :root[data-theme="dark"] .cta__note, :root[data-theme="dark"] .consent__row a, :root[data-theme="dark"] .cta__form .consent__row input[type="checkbox"] { color: #E5E7EB; } :root[data-theme="dark"] .calc__row output { color: #E5E7EB; } /* Active/selected green fills carry WHITE text in light mode, but the dark theme lifts --accent/--accent-d to BRIGHT green (#4ADE80/#22C55E) where white is only 1.7–2.3:1. Flip the label to dark ink (8–11:1) on every solid green fill. */ :root[data-theme="dark"] .filter-btn.active, :root[data-theme="dark"] .community__chan--active, :root[data-theme="dark"] .community__chan[aria-pressed="true"], :root[data-theme="dark"] .community__chip[aria-pressed="true"], :root[data-theme="dark"] .booking__providers .provider-pick[aria-pressed="true"], :root[data-theme="dark"] .booking__providers .provider-pick.is-chosen, :root[data-theme="dark"] .booking__providers .booking__provider[aria-pressed="true"], :root[data-theme="dark"] .booking__providers .booking__provider.is-chosen, :root[data-theme="dark"] .slot--chosen, :root[data-theme="dark"] .slot[aria-pressed="true"], :root[data-theme="dark"] .step__num, :root[data-theme="dark"] .wa-fab { color: #0B0F14; } /* The calc card's range track + result figures already read on the dark ink. */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: 'Assistant', system-ui, sans-serif; color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } /* Fine film grain over the whole page — adds tactile, premium depth without any colour. Pointer-transparent, fixed, and very subtle. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: var(--grain); background-size: 160px; opacity: .022; } ::selection { background: var(--ink-800); color: #fff; } h1, h2, h3, .brand__name { font-family: 'Rubik', sans-serif; line-height: 1.12; } /* Display headings get balanced wrapping so multi-line titles break evenly (no lonely orphan word on the last line) — a quiet editorial polish. */ h1, h2 { text-wrap: balance; } .prose p, .hero__sub, .section__head p, .lead-hero p { text-wrap: pretty; } /* Ink-gradient headings — a whisper of dimensionality on big display type (ink → charcoal), still strictly monochrome. Applied to hero & section h2. */ .hero h1, .section__head h2, .lead-hero h1, .cta h2 { background: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-700) 60%, var(--ink-500) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ink-900); } .cta h2 { background: linear-gradient(160deg, #fff 0%, #fff 55%, #c9ced6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Global focus ring — keyboard users get a crisp, on-brand outline. The box-shadow follows each element's OWN radius (no geometry rewrite — a 6px override used to visibly reshape pills and buttons on focus); bare inline links opt into a small radius so the ring hugs the text. */ :focus-visible { outline: none; box-shadow: var(--ring); } /* Bare inline links: a flush ring (no white gap) hugs the text tightly. */ a:not([class]):focus-visible { border-radius: 6px; box-shadow: var(--ring-flush); } /* ── Scroll progress bar (injected by script.js) ─────────────────────────── */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; transform-origin: right center; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--ink-800), var(--ink-500)); will-change: transform; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } a { color: inherit; text-decoration: none; } /* Bare inline links carry a persistent underline (not hover-only) so they're distinguishable from body text without relying on colour alone — an AA must. Classed links (nav, buttons, chips, cards) keep their own affordances. */ a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* ── Glass surface ─────────────────────────────────────────────────────── Frosted white-glass utility for cards/panels. Falls back to opaque white where backdrop-filter is unsupported, so text stays readable. */ .glass { background: rgba(255, 255, 255, .62); backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-sm); } @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { .glass { background: #fff; } } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 16px; border: 0; cursor: pointer; transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease), background .18s; white-space: nowrap; isolation: isolate; } /* A diagonal light sheen that sweeps across on hover — a quiet premium tell. */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(120%); transition: transform .6s var(--ease); } .btn:hover::before, .btn:focus-visible::before { transform: translateX(-120%); } /* Inset top highlight = the glass edge that makes the gradient read dimensional. */ /* Fixed deep-green gradient (theme-independent) so WHITE label text clears AA (≥5:1) in BOTH themes — white on the brighter --accent (#16A34A) is only 3.3:1, and the dark theme would lift --accent to #4ADE80 (1.7:1). The vivid brand green still reads through the green glow/halo shadows below. */ .btn--primary { background: linear-gradient(165deg, #15803D, #126C34); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(22,163,74,.32), 0 2px 6px rgba(21,128,61,.24); } .btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 36px rgba(22,163,74,.4), 0 3px 8px rgba(21,128,61,.26); } /* Keyboard focus keeps the button's depth AND adds the ring halo, so the CTA never goes flat when tabbed to (a bare box-shadow would erase its lift). */ .btn--primary:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(22,163,74,.32), var(--ring); } .btn--ghost:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-200), var(--ring); } .btn--inverse:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--ring-value); } .btn--primary:active { transform: translateY(0) scale(.97); filter: brightness(.97); box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 6px 14px rgba(22,163,74,.3); } .btn--ghost { background: var(--mint); color: var(--green); box-shadow: inset 0 0 0 1px var(--line); } .btn--ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ink-200), var(--shadow-sm); } .btn--ghost:active { transform: translateY(0) scale(.985); } /* White-on-ink — the dark .article-cta bands (was inline-styled, stateless). */ .btn--inverse { background: #fff; color: var(--ink-800); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px rgba(0,0,0,.28); } .btn--inverse:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px rgba(0,0,0,.36); } .btn--inverse:active { transform: translateY(0) scale(.985); } .btn--lg { padding: 16px 30px; font-size: 16px; border-radius: 18px; } .btn--sm { padding: 8px 16px; font-size: 13px; } .btn--block { width: 100%; } /* Disabled + async-send states — a disabled button must LOOK disabled. */ .btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; filter: none !important; } .btn.is-loading { pointer-events: none; } .btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-start-color: transparent; animation: btn-spin .7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .pill { display: inline-block; background: var(--accent-t); color: var(--accent-ink); font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: 999px; margin-bottom: 18px; } .eyebrow { display: inline-block; color: var(--accent-ink); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; } /* ── Navbar ──────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(246,248,249,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s, background .25s; } .nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(15,27,34,.05); background: rgba(246,248,249,.95); } .nav__inner { display: flex; align-items: center; gap: 18px; height: 68px; } .brand { display: flex; align-items: center; gap: 9px; } .brand__mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--lime); color: var(--green-d); border-radius: 9px; font-size: 17px; font-weight: 900; } .brand__name { font-size: 22px; font-weight: 800; color: var(--green-d); } .brand--light .brand__name { color: #fff; } .nav__links { display: flex; gap: 26px; margin-inline-start: auto; } .nav__links a { position: relative; font-weight: 600; color: var(--muted); transition: color .15s; padding-bottom: 2px; border-radius: 6px; } .nav__links a:focus-visible { box-shadow: var(--ring-flush); } .nav__links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); } .nav__links a:hover { color: var(--accent-ink); } .nav__links a:hover::after { transform: scaleX(1); } /* Current page — stamped by script.js as aria-current="page". */ .nav__links a[aria-current="page"] { color: var(--accent-ink); font-weight: 700; } .nav__links a[aria-current="page"]::after { transform: scaleX(1); } .nav__mobile a[aria-current="page"] { color: var(--accent-ink); font-weight: 700; } /* Compact, quieter nav CTA — it lives on EVERY viewport, so it must not compete with the page-level primaries below it. */ .nav__cta { margin-inline-start: 6px; padding: 9px 16px; font-size: 14px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(22,163,74,.24); } .nav__wa { display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#25d366;color:#fff;flex-shrink:0;transition:transform .15s,box-shadow .15s; } @media (hover: hover) and (pointer: fine) { .nav__wa:hover { transform:scale(1.1);box-shadow:0 4px 14px rgba(37,211,102,.4); } } .nav__wa svg { width:20px;height:20px; } .nav__zoom-link { display:flex;align-items:center;gap:4px; } .nav__zoom-icon { width:14px;height:14px;flex-shrink:0; } /* ── Theme toggle (light/dark) ─────────────────────────────────────────────── An icon-only control (sun in dark mode → switch to light; moon in light mode → switch to dark). 44px hit area, a quiet glass hover, and the standard focus ring. Only ONE glyph shows per theme; the other is hidden from layout AND from assistive tech so the accessible name (button aria-label) stays unambiguous. */ .theme-toggle { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--green-d); border-radius: 12px; transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--mint); color: var(--accent-ink); } .theme-toggle .ico { width: 20px; height: 20px; } .theme-toggle__sun, .theme-toggle__moon { display: grid; place-items: center; } /* Light theme shows the moon (go-dark); dark theme shows the sun (go-light). */ .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: grid; } .nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 10px; } .nav__toggle span { display: block; height: 2.5px; background: var(--green-d); border-radius: 2px; margin: 4px 0; transition: .25s var(--ease); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 20px 18px; } .nav__mobile a { padding: 13px 6px; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); } .nav__mobile .btn { margin-top: 10px; } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { padding: 56px 0 40px; position: relative; } /* Parallax-ready: script.js may set --parallax (px) on .hero from scrollY; the ambient light + dot-grid layers ride it at different rates for layered depth. Defaults to 0 and is fully inert under reduced-motion (rules below). */ .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1; background: radial-gradient(820px 420px at 82% -12%, rgba(17,24,39,.07), transparent 60%), radial-gradient(620px 380px at 8% 4%, rgba(55,65,81,.05), transparent 62%); transform: translate3d(0, calc(var(--parallax, 0px) * .35), 0); will-change: transform; } /* A fine ink dot-grid that fades out downward — engineered, formal texture. */ .hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(17,24,39,.10) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%); mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%); transform: translate3d(0, calc(var(--parallax, 0px) * .6), 0); will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { transform: none; } } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .hero h1 { font-size: var(--fs-h1); font-weight: 900; color: var(--green-d); letter-spacing: -2px; line-height: 1.02; } .hero .hl { color: var(--accent); position: relative; -webkit-text-fill-color: var(--accent); } .hero .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6%; height: 26%; background: var(--accent); opacity: .16; border-radius: 6px; z-index: -1; } .hero__sub { font-size: var(--fs-lead); color: var(--muted); margin: 20px 0 28px; max-width: 30em; } .hero__sub strong { color: var(--green); font-weight: 700; } .hero__fineprint { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-600); margin-top: 10px; } .hero__fineprint a { color: inherit; text-decoration: underline; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero__social { margin-top: 14px; font-size: 13px; color: var(--muted); } .hero__social strong { color: var(--ink); } .hero__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; } .hero__stats li { display: flex; flex-direction: column; } .hero__stats b { font-family: 'Rubik'; font-size: 26px; font-weight: 800; color: var(--green-d); } .hero__stats span { font-size: 13px; color: var(--muted); } /* Hero robot video — framed to match the site (rounded, soft shadow, accent glow) */ .hero__video { position: relative; margin: 0; width: 100%; max-width: 420px; isolation: isolate; } /* Accent glow puddle behind the framed video. */ .hero__video::before { content: ""; position: absolute; inset: -8% -6% -12%; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); filter: blur(26px); } .hero__video-el { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.10); background: linear-gradient(155deg, #1b232f, #000); } :root[data-theme="dark"] .hero__video-el { box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.06); } /* ── Hero with full-bleed background video — the robot becomes part of the UI ── */ .hero--video { overflow: hidden; isolation: isolate; } .hero--video::before, .hero--video::after { display: none; } /* drop the dot-grid/parallax under the video */ .hero--video .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero--video .hero__bg-el { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 32% 50%; /* Feather the white-background character into the page → borderless, seamless in both themes. */ -webkit-mask-image: radial-gradient(125% 118% at 31% 47%, #000 40%, transparent 80%); mask-image: radial-gradient(125% 118% at 31% 47%, #000 40%, transparent 80%); } /* Legibility scrim: solid on the text side (physical right = RTL start), clears toward the robot. Theme-aware via --cream. */ .hero--video .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, var(--cream) 0%, var(--cream) 27%, color-mix(in srgb, var(--cream) 72%, transparent) 45%, transparent 67%); } .hero--video .hero__inner--overlay { position: relative; z-index: 2; grid-template-columns: minmax(0, 580px); justify-content: start; min-height: clamp(440px, 56vh, 620px); align-content: center; } @media (max-width: 760px) { .hero--video .hero__bg-el { object-position: 50% 12%; -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 74%); mask-image: linear-gradient(to bottom, #000 34%, transparent 74%); } .hero--video .hero__bg::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--cream) 22%, transparent) 0%, var(--cream) 50%); } .hero--video .hero__inner--overlay { min-height: auto; grid-template-columns: 1fr; } } /* Phone mockup */ .hero__visual { display: grid; place-items: center; } .phone { width: 290px; background: linear-gradient(155deg, #1b232f, #000); border-radius: 42px; padding: 14px; box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.08); position: relative; animation: float 4.5s ease-in-out infinite; } /* Soft specular highlight raking across the phone glass. */ .phone::before { content: ""; position: absolute; inset: 0; border-radius: 42px; pointer-events: none; background: linear-gradient(150deg, rgba(255,255,255,.12), transparent 38%); } /* Reflected glow puddle beneath the floating device. */ .phone::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -34px; height: 44px; z-index: -1; background: radial-gradient(closest-side, rgba(17,24,39,.22), transparent 78%); filter: blur(2px); animation: floatShadow 4.5s ease-in-out infinite; } .phone__notch { width: 120px; height: 22px; background: #000; border-radius: 0 0 14px 14px; margin: 0 auto 8px; } .phone__screen { background: var(--cream); border-radius: 28px; padding: 16px; display: grid; gap: 12px; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes floatShadow { 0%,100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.86); opacity: .35; } } .card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); } .card--save { background: linear-gradient(135deg, var(--green-d), var(--green)); color: #fff; text-align: center; padding: 18px; } .card__label { font-size: 12px; opacity: .8; } .card__big { display: block; font-family: 'Rubik'; font-size: 38px; font-weight: 900; color: var(--value); margin: 4px 0; } .card__hint { font-size: 11px; opacity: .7; } .card--row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; } .card--row.best { border: 2px solid var(--green); } .card__text { display: flex; flex-direction: column; line-height: 1.25; } .card__text b { font-size: 14px; } .card__text small { font-size: 11px; color: var(--muted); } .logo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: 'Rubik'; font-weight: 800; font-size: 13px; flex: none; } .logo--cel { background: #ece7fb; color: #4527a0; } .logo--par { background: #e6f3e8; color: #2e7d32; } .logo--gol { background: #e0f1ee; color: #00695c; } .tag { margin-inline-start: auto; font-family: 'Rubik'; font-weight: 800; color: var(--green); font-size: 15px; } .tag--win { background: var(--value); color: #3a2900; font-weight: 800; padding: 4px 9px; border-radius: 9px; font-size: 12px; } /* ── Providers strip ─────────────────────────────────────────────────── */ .providers { padding: 22px 0 8px; } .providers__title { text-align: center; color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 16px; } .providers__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .chip { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); color: var(--green-d); font-weight: 700; font-size: 14px; padding: 9px 16px; min-height: 40px; border-radius: 999px; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; } /* Only LINK chips lift — decorative span.chip must not pretend to be a button. */ a.chip:hover { transform: translateY(-2px); border-color: var(--green-2); box-shadow: 0 8px 18px rgba(17,24,39,.10); color: var(--green); } .providers__more { text-align: center; margin-top: 16px; } .providers__more a { color: var(--green); font-weight: 700; text-decoration: none; } .providers__more a:hover { text-decoration: underline; } /* ── Trust strip (honest process signals, just below the hero) ─────────── */ .trust { padding: 16px 0; background: #fff; border-block: 1px solid var(--line); } .trust__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; } .trust__item { display: inline-flex; align-items: center; gap: 8px; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink-700); } .trust__item .ico { width: 18px; height: 18px; color: var(--accent); flex: none; } @media (max-width: 560px) { .trust__row { gap: 10px 18px; } .trust__item { font-size: 12.5px; } } /* ── Sections ────────────────────────────────────────────────────────── */ .section { padding: 86px 0; } .section--alt { background: #fff; } .section__head { text-align: center; max-width: 640px; margin: 0 auto 52px; } .section__head h2 { font-size: var(--fs-h2); font-weight: 900; color: var(--green-d); letter-spacing: -1.4px; line-height: 1.05; } .section__head p { color: var(--muted); margin-top: 14px; font-size: var(--fs-lead); line-height: 1.65; } /* Steps */ .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; position: relative; } /* Numbered step rail — a faint hairline connects the three numbered nodes so the sequence reads as one guided path, not three loose cards. Sits behind the badges, fades at both ends, and disappears once the grid stacks (≤900px). */ .steps::before { content: ""; position: absolute; z-index: 0; top: calc(28px + 22px); height: 2px; inset-inline: 16%; background: linear-gradient(90deg, transparent, var(--accent-t) 12%, var(--accent-t) 88%, transparent); pointer-events: none; } .step { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; position: relative; z-index: 1; } .section--alt .step { background: var(--cream); } .step { box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; } /* .step:hover lift moved under @media (hover:hover) and (pointer:fine) — see card-hover block */ .step__num { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), var(--accent-d)); color: #fff; font-family: 'Rubik'; font-weight: 800; border-radius: 14px; font-size: 19px; margin-bottom: 16px; box-shadow: var(--glint), 0 6px 16px rgba(22,163,74,.32); } @media (max-width: 900px) { .steps::before { display: none; } } .step h3 { font-size: 19px; color: var(--green-d); margin-bottom: 8px; } .step p { color: var(--muted); } /* Categories */ .cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .cat { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 16px; text-align: center; transition: transform .2s var(--ease), box-shadow .2s; } .section--alt .cat { background: var(--cream); } /* .cat:hover lift moved under @media (hover:hover) and (pointer:fine) — see card-hover block */ .cat:focus-visible { transform: translateY(-5px); box-shadow: var(--ring), var(--shadow); border-color: var(--accent); } .cat:focus-visible .cat__go { opacity: 1; } .cat { display: block; color: inherit; } .cat__icon { font-size: 38px; display: block; margin-bottom: 10px; } .cat h3 { font-size: 17px; color: var(--green-d); } .cat p { color: var(--muted); font-size: 14px; margin-top: 3px; } /* Category cards are links to their landing pages — a quiet action cue that is always visible (so it reads as tappable on touch, where there is no hover) and nudges its arrow on hover. */ .cat__go { display: block; margin-top: 12px; color: var(--accent-ink); font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 13px; opacity: 1; transition: letter-spacing .18s var(--ease); } .cat:hover .cat__go { letter-spacing: .01em; } /* Calculator */ .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .calc__copy h2 { font-size: clamp(26px, 3.5vw, 38px); color: var(--green-d); font-weight: 800; } .calc__copy p { color: var(--muted); margin-top: 14px; font-size: 16px; } .calc__card { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--green-d), var(--green)); border-radius: 24px; padding: 30px; color: #fff; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08); } /* Raking specular light across the dark calculator glass. */ .calc__card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 240px at 80% -20%, rgba(255,255,255,.10), transparent 65%); } .calc__card > * { position: relative; } .calc__row { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 12px; } .calc__row output { font-family: 'Rubik'; font-weight: 800; font-size: 22px; color: var(--lime); } .calc__card input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); outline: none; } .calc__card input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); } .calc__card input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); cursor: pointer; } /* Keyboard focus on the slider — a ring around the thumb (the bare outline:none above left arrow-key users with no focus cue on the dark calc card). */ .calc__card input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--green-d), 0 0 0 6px #fff; } .calc__card input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--green-d), 0 0 0 6px #fff; } .calc__result { text-align: center; margin: 26px 0 22px; } .calc__resultLabel { display: block; font-size: 14px; opacity: .8; } .calc__resultBig { display: block; font-family: 'Rubik'; font-size: 52px; font-weight: 900; color: var(--value); letter-spacing: -1px; } .calc__resultUnit { font-size: 14px; opacity: .8; } .calc__fine { font-size: 12px; opacity: .65; text-align: center; margin-top: 12px; } /* Features */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature { background: rgba(255,255,255,.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; } @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { .feature { background: #fff; } } /* .feature:hover lift moved under @media (hover:hover) and (pointer:fine) — see card-hover block */ .feature__icon { font-size: 30px; display: grid; place-items: center; width: 56px; height: 56px; background: var(--mint); border-radius: 16px; margin-bottom: 16px; } .feature h3 { font-size: 18px; color: var(--green-d); margin-bottom: 6px; } .feature p { color: var(--muted); } .feature em { color: var(--accent-ink); font-style: normal; font-weight: 700; } /* Testimonials */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .quote { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .section--alt .quote { background: var(--cream); } /* Rating stars — amber VALUE, darkened to clear the 3:1 graphical bar on white (the bright #f5a623 fill sat at ~2.3:1). Still reads as warm gold. */ .stars { color: var(--value-ink); letter-spacing: 2px; margin-bottom: 12px; } .quote blockquote { font-size: 17px; font-weight: 600; color: var(--green-d); line-height: 1.5; } .quote figcaption { color: var(--muted); font-size: 14px; margin-top: 12px; } .quote figcaption span { font-size: 12px; opacity: .7; } /* FAQ */ .faq__list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; } .faq__list details { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; transition: box-shadow .2s var(--ease), border-color .2s, background .2s; } .faq__list details:hover { border-color: var(--ink-200); } .faq__list details[open] { box-shadow: var(--shadow); background: #fff; border-color: var(--ink-100); } .faq__list summary { font-family: 'Rubik'; font-weight: 700; font-size: 17px; color: var(--green-d); padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color .15s; border-radius: 8px; } .faq__list summary::-webkit-details-marker { display: none; } .faq__list summary:focus-visible { outline: none; box-shadow: var(--ring-flush); } .faq__list details:not([open]) summary:hover { color: var(--accent-ink); } /* The toggle marker as a soft ink chip — rotates to an × when the panel opens. */ .faq__list summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--ink-600); background: var(--mint); border-radius: 9px; transition: transform .25s var(--ease), color .15s, background .15s; } .faq__list details:not([open]) summary:hover::after { color: var(--accent-ink); background: var(--accent-t); } .faq__list details[open] summary::after { transform: rotate(45deg); color: var(--accent-ink); background: var(--accent-t); } .faq__list details p { color: var(--muted); padding: 0 0 18px; } /* CTA band */ .cta { background: linear-gradient(140deg, var(--green-d), var(--green)); color: #fff; padding: 72px 0; position: relative; overflow: hidden; } /* Premium ink surface: a soft overhead light pool + a top edge highlight, so the dark band reads as a lit object rather than a flat fill. */ .cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 360px at 50% -30%, rgba(255,255,255,.10), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%); } .cta .container { position: relative; z-index: 1; } .cta__inner { text-align: center; max-width: 640px; margin: 0 auto; } .cta h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 900; letter-spacing: -1.4px; line-height: 1.04; } .cta p { opacity: .85; margin-top: 12px; font-size: 18px; } .cta__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 12px; } .cta__form input { flex: 1 1 220px; min-width: 0; padding: 14px 16px; border: 0; border-radius: 14px; font-family: 'Assistant'; font-size: 16px; background: rgba(255,255,255,.95); color: var(--ink); } /* Offset white ring — a flush light-grey outline vanished against the white input itself; the offset lets it read against the dark band. */ .cta__form input:focus { outline: 3px solid #fff; outline-offset: 2px; } .cta__form .btn { flex: 0 0 auto; } .cta__note { min-height: 22px; font-weight: 700; color: var(--lime); } .cta__wa { display: inline-block; margin-top: 8px; color: #fff; font-weight: 700; opacity: .9; border-bottom: 1px dashed rgba(255,255,255,.5); padding-bottom: 2px; } .cta__wa:hover { opacity: 1; } .cta__wa .ico { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 4px; } /* Legal consent (terms / privacy mandatory, marketing optional) — RTL, sits above the submit button on the dark CTA band. Real