/* * Web Hosting Ninja — violet homepage overlay (tokens only). * * Loaded by mod_index_dashboard.html.twig AFTER custom/marketing.css, and * scoped under `.whn-marketing.whn-home` — the body class only the guest * homepage carries. The five navy marketing pages (hosting, domains, * migration, about, contact) never load this file and keep the navy system * in marketing.css untouched. * * Design direction — see .design/homepage-violet/DESIGN_BRIEF.md: * "Confident modern SaaS": deep violet-to-indigo gradient statement bands * alternating with bright content bands, generous display type, soft-glow * depth on elevated objects, photography as structural content. Loud where * it earns attention (hero, CTA bands, migration), quiet where it earns * trust (plans, prices, FAQ). * * Mechanism: this file REMAPS the semantic --whn-* tokens marketing.css * defines, so every existing component (header, footer, plan cards, domain * search, CTA band) re-skins automatically inside the scope. It also ADDS * the tokens the violet direction needs: the hero gradient, a solid violet * CTA band, glow shadows, one larger display step, wide/full-bleed shells, * a photo scrim, on-ink status hues for the domain search on the dark hero, * and an on-brand text token (dark-mode buttons are light violet, so their * label flips to ink — white would fail contrast). * * Dark mode: keyed to `data-bs-theme` on exactly like marketing.css. * Not an inversion — the page ground goes violet-tinted near-black, the two * gradient inks (#1A0B3D / #0D0A2C) are PERMANENT in both themes, and the * brand flips to a lighter violet that carries contrast on dark grounds. * * Contrast (WCAG 2.1 AA, computed 2026-09-01 — every text pair ≥ 4.5:1 * unless marked "large/UI only"): * light #1D1440 on #ffffff 17.12 · #1D1440 on #F4F1FE 15.38 * #554E75 on #ffffff 7.68 · #554E75 on #F4F1FE 6.90 * #673DE6 on #ffffff 6.20 · #673DE6 on #F4F1FE 5.57 * #ffffff on #673DE6 6.20 · #ffffff on #5B2EDC 7.32 * #ffffff on #4F24C8 8.68 * ink #ffffff on #1A0B3D 18.12 · #CBC0EC on #1A0B3D 10.60 * #ffffff on #2A1A5E 14.92 · #CBC0EC on #2A1A5E 8.73 * #B5A3F5 on #1A0B3D 8.21 · #B5A3F5 on #2A1A5E 6.76 * #7FD99A on #1A0B3D 10.61 · #FF9BA3 on #1A0B3D 9.03 * #FFC46B on #1A0B3D 11.53 * dark #E9E6F5 on #131022 15.20 · #E9E6F5 on #1B1731 14.09 * #A49CC4 on #131022 7.23 · #A49CC4 on #1B1731 6.70 * #A78BFA on #131022 6.86 · #A78BFA on #1B1731 6.36 * #1A0B3D on #A78BFA 6.66 · #1A0B3D on #BCA7FB 8.68 * #1A0B3D on #9271F1 5.05 * scrim #ffffff on rgba(13,10,44,.78) over a WHITE photo (worst case) * composites to #42405A → 9.94 * * ⚠ Gradient rule: #CBC0EC (soft text) on the gradient END #673DE6 is only * 3.63:1. Muted/soft copy may sit ONLY on the dark upper two-thirds of the * gradient; anything that can reach the violet end must be #ffffff (6.20). * * ⚠ Focus rule: the violet focus ring vanishes on violet grounds. On the * gradient, the ink bands and the solid CTA band, use --whn-focus-ring-on-ink * (white ring) instead of --whn-focus-ring. */ /* ===================================================================== * Light theme — semantic remaps * ================================================================== */ .whn-marketing.whn-home { /* --- Brand: navy retired, violet in ------------------------------- */ --whn-brand: #673DE6; --whn-brand-rgb: 103, 61, 230; --whn-brand-hover: #5B2EDC; --whn-brand-active: #4F24C8; --whn-brand-on-ink: #B5A3F5; /* links on ink bands, 8.21:1 */ --whn-on-brand: #ffffff; /* label on solid-brand controls */ /* --- Section bands ------------------------------------------------- * band plain content (white — unchanged) * band-tint alternating content (violet-tinted near-white) * band-ink statement sections (gradient origin ink, permanent) * band-violet CTA bands #7 / #10 (solid saturated violet) */ --whn-band-tint: #F4F1FE; --whn-band-ink: #1A0B3D; --whn-band-ink-2: #2A1A5E; /* raised card on ink band */ --whn-band-violet: #673DE6; /* white text on it: 6.20:1 */ /* --- Text ----------------------------------------------------------- */ --whn-text: #1D1440; --whn-text-muted: #554E75; --whn-text-soft-on-ink: #CBC0EC; /* ink bands only — NOT gradient end */ /* --- Borders & focus ------------------------------------------------ */ --whn-border: #E2DCF5; --whn-border-strong: #C4B8E8; --whn-border-on-ink: rgba(255, 255, 255, .18); --whn-focus: #673DE6; /* On violet/ink grounds the violet ring disappears — use this instead. */ --whn-focus-ring-on-ink: 0 0 0 2px var(--whn-band-ink), 0 0 0 4px #ffffff; /* --- Statement gradient --------------------------------------------- * Hero (#1) and closing CTA (#12) only. Permanent in both themes. * Origin ink at the top where the header overlays; saturated violet * only reaches the lower third (see the gradient rule above). */ --whn-gradient-hero: linear-gradient(168deg, #0D0A2C 0%, #1A0B3D 42%, #673DE6 125%); --whn-gradient-vignette: radial-gradient(80rem 40rem at 80% -10%, rgba(103, 61, 230, .35), transparent 60%); /* --- Depth: violet-tinted shadows + glow ---------------------------- */ --whn-shadow-sm: 0 1px 2px rgba(29, 20, 64, .07); --whn-shadow-md: 0 4px 16px rgba(29, 20, 64, .10); --whn-shadow-lg: 0 12px 40px rgba(29, 20, 64, .16); /* Elevated objects on the gradient (search card) and featured card. */ --whn-glow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 48px rgba(103, 61, 230, .45); --whn-shadow-lift: 0 10px 28px rgba(103, 61, 230, .22); /* card hover */ /* --- Photography ---------------------------------------------------- * Text over photos sits on this scrim; contrast is measured against * the composite over a white photo (#42405A → white text 9.94:1). */ --whn-scrim: linear-gradient(180deg, rgba(13, 10, 44, 0) 30%, rgba(13, 10, 44, .78) 100%); --whn-photo-radius: var(--whn-radius-lg); /* --- Domain search states on the dark hero -------------------------- * The widget moves onto the gradient; its status hues need on-ink * variants (the light-band hues vanish on #1A0B3D). */ --whn-ok-on-ink: #7FD99A; /* available — 10.61:1 */ --whn-bad-on-ink: #FF9BA3; /* taken — 9.03:1 */ --whn-warn-on-ink: #FFC46B; /* limited — 11.53:1 */ /* --- Tinted chips / stat pills (design-1 reference) ----------------- */ --whn-tint-brand: #EFEAFD; /* violet pill ground; brand text 5.4:1 */ --whn-tint-ok: #E7F3EB; /* --whn-ok on it ≥ 5.2:1 */ /* --- Type: one new display step for the hero ------------------------ */ --whn-fs-4xl: clamp(2.5rem, 1.9rem + 3.2vw, 4.25rem); /* hero display */ /* --- Layout: wide + full-bleed variants ----------------------------- * shell-wide constrains the edge-to-edge photo grid / rail interiors; * true full-bleed sections simply omit the shell. */ --whn-shell-wide: 87.5rem; /* 1400px */ } /* ===================================================================== * Dark theme — deliberate, not inverted. Page ground is violet-tinted * near-black; the gradient inks stay put; brand lightens to keep AA. * Buttons on solid brand flip their label to ink (white fails on #A78BFA). * ================================================================== */ [data-bs-theme="dark"] .whn-marketing.whn-home { --whn-brand: #A78BFA; --whn-brand-rgb: 167, 139, 250; --whn-brand-hover: #BCA7FB; --whn-brand-active: #9271F1; --whn-brand-on-ink: #B5A3F5; --whn-on-brand: #1A0B3D; /* 6.66:1 on #A78BFA */ --whn-band: #131022; --whn-band-tint: #1B1731; --whn-band-ink: #0D0A2C; /* deeper than the page: statement */ --whn-band-ink-2: #241B47; --whn-band-violet: #673DE6; /* permanent — white label 6.20:1 */ --whn-text: #E9E6F5; --whn-text-muted: #A49CC4; --whn-text-soft-on-ink: #CBC0EC; --whn-link: #A78BFA; --whn-card: #1B1731; --whn-border: #2E2650; --whn-border-strong: #453A73; --whn-border-on-ink: rgba(255, 255, 255, .14); --whn-focus: #A78BFA; --whn-focus-ring-on-ink: 0 0 0 2px var(--whn-band-ink), 0 0 0 4px #ffffff; --whn-price: #A78BFA; /* Gradient and scrim are permanent — restated for clarity. */ --whn-gradient-hero: linear-gradient(168deg, #0D0A2C 0%, #1A0B3D 42%, #673DE6 125%); --whn-gradient-vignette: radial-gradient(80rem 40rem at 80% -10%, rgba(103, 61, 230, .30), transparent 60%); --whn-scrim: linear-gradient(180deg, rgba(13, 10, 44, 0) 30%, rgba(13, 10, 44, .82) 100%); /* Shadows recede; glow carries elevation instead. */ --whn-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --whn-shadow-md: 0 4px 16px rgba(0, 0, 0, .45); --whn-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55); --whn-glow: 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 48px rgba(103, 61, 230, .38); --whn-shadow-lift: 0 10px 28px rgba(0, 0, 0, .45); /* Status hues inherited from marketing.css dark block (verified there); * on-ink variants are shared with light because the ink is permanent. */ --whn-tint-brand: #241B47; --whn-tint-ok: #17301F; } /* ===================================================================== * Component layer — homepage only. Order follows the page top-to-bottom. * Existing components (header, footer, plans, search, CTA) restyle * through the token remap above; rules here are only where the violet * direction changes STRUCTURE (new sections, new silhouettes) or where * a remap alone cannot express the change (dark featured card, chips). * ================================================================== */ /* --- Statement bands ------------------------------------------------- * gradient: hero (§1) and the close (§12). violet: CTA bands (§7, §10). * Both get the white on-ink focus ring — the violet ring vanishes here. */ .whn-home .whn-band--gradient { background-color: var(--whn-band-ink); background-image: var(--whn-gradient-vignette), var(--whn-gradient-hero); color: var(--whn-text-soft-on-ink); } .whn-home .whn-band--gradient h1, .whn-home .whn-band--gradient h2, .whn-home .whn-band--gradient h3 { color: var(--whn-text-on-ink); } .whn-home .whn-band--gradient a:not(.whn-btn) { color: var(--whn-brand-on-ink); } .whn-home .whn-band--gradient :focus-visible, .whn-home .whn-band--violet :focus-visible { box-shadow: var(--whn-focus-ring-on-ink); } .whn-home .whn-band--violet { background: var(--whn-band-violet); color: #fff; } .whn-home .whn-band--violet h2, .whn-home .whn-band--violet h3 { color: #fff; } .whn-home .whn-band--violet .whn-cta-lead { color: rgba(255, 255, 255, .85); } .whn-home .whn-band--violet .whn-btn--inverse { color: var(--whn-band-violet); } .whn-home .whn-band--violet .whn-btn--inverse:hover { color: var(--whn-brand-hover); } /* --- Header: transparent over the hero, ink once scrolled ------------- * The homepage header overlays the gradient (fixed, transparent) and * gains the ink ground + border + shadow once past the 80px sentinel * (marketing.js toggles .is-solid). It always sits on a dark ground in * both states, so link color and logo never need to flip mid-scroll. */ .whn-home .whn-header--hero { position: fixed; inset-inline: 0; inset-block-start: 0; background: transparent; border-block-end-color: transparent; transition: background-color var(--whn-dur-normal) var(--whn-ease), border-color var(--whn-dur-normal) var(--whn-ease), box-shadow var(--whn-dur-normal) var(--whn-ease); } .whn-home .whn-header--hero.is-solid { background: var(--whn-band-ink); border-block-end-color: var(--whn-border-on-ink); box-shadow: var(--whn-shadow-md); } .whn-home .whn-header--hero .whn-nav-link { color: rgba(255, 255, 255, .92); } .whn-home .whn-header--hero .whn-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .10); } .whn-home .whn-header--hero .whn-util-btn { color: var(--whn-text-soft-on-ink); } .whn-home .whn-header--hero .whn-util-btn:hover { color: #fff; background: rgba(255, 255, 255, .10); } .whn-home .whn-header--hero .whn-menu-btn { color: #fff; } .whn-home .whn-header--hero .whn-menu-btn:hover { background: rgba(255, 255, 255, .10); } .whn-home .whn-header--hero :focus-visible { box-shadow: var(--whn-focus-ring-on-ink); } /* --- Hero (§1) -------------------------------------------------------- * Split retained; register raised: 4xl display, glow behind the search * card, photo rail beneath. Fixed header needs the top padding bump. */ .whn-home .whn-hero { padding-block-start: calc(clamp(var(--whn-sp-7), 5vw + 1rem, var(--whn-sp-9)) + 72px); } .whn-home .whn-hero-title { font-size: var(--whn-fs-4xl); } .whn-home .whn-hero-eyebrow { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; } /* Muted hero copy sits high on the gradient (dark region) — see the gradient rule in the header comment. */ .whn-home .whn-hero-lead { color: var(--whn-text-soft-on-ink); } .whn-home .whn-search--card { border-color: rgba(255, 255, 255, .14); box-shadow: var(--whn-glow); } /* Hero photo rail — 4-up strip inside the gradient band. Static row on * desktop with a gentle stagger; scroll-snap carousel below 768px. */ .whn-home .whn-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(62%, 240px); gap: var(--whn-sp-4); margin-block-start: clamp(var(--whn-sp-7), 6vw, var(--whn-sp-8)); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--whn-sp-3); scrollbar-width: none; } .whn-home .whn-rail::-webkit-scrollbar { display: none; } .whn-home .whn-rail > * { scroll-snap-align: center; } @media (min-width: 768px) { .whn-home .whn-rail { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(4, 1fr); overflow-x: visible; scroll-snap-type: none; } .whn-home .whn-rail > :nth-child(even) { translate: 0 var(--whn-sp-4); } } .whn-home .whn-rail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--whn-photo-radius); border: 1px solid rgba(255, 255, 255, .14); } /* --- Trust chips (§2) — strip becomes pills, migration first ---------- */ .whn-home .whn-trust-strip { border-block-end: 0; padding-block: var(--whn-sp-5); } .whn-home .whn-trust { gap: var(--whn-sp-3); } .whn-home .whn-trust li { padding: var(--whn-sp-2) var(--whn-sp-4); background: var(--whn-tint-brand); border-radius: var(--whn-radius-full); color: var(--whn-text); } /* Source order is shared with the navy pages; the switcher-first order is a homepage concern, so flex order does it here. */ .whn-home .whn-trust li:nth-child(2) { order: -1; } /* --- Showcase photo grid (§3) — edge-to-edge, first faces ------------- */ .whn-home .whn-showcase { padding-block-end: 0; } .whn-home .whn-showcase-grid { display: grid; grid-template-columns: 1fr; gap: var(--whn-sp-2); max-width: var(--whn-shell-wide); margin-inline: auto; } @media (min-width: 576px) { .whn-home .whn-showcase-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .whn-home .whn-showcase-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1400px) { .whn-home .whn-showcase-grid { padding-inline: var(--whn-shell-pad); } .whn-home .whn-showcase-grid figure, .whn-home .whn-showcase-grid img { border-radius: var(--whn-photo-radius); } } .whn-home .whn-showcase-grid figure { position: relative; margin: 0; overflow: hidden; } .whn-home .whn-showcase-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .whn-home .whn-showcase-grid figcaption { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--whn-sp-4); background: var(--whn-scrim); color: #fff; font-weight: var(--whn-fw-semibold); } /* --- Feature grid (§4) — 6-up matrix, switcher-first ------------------ */ .whn-home .whn-features { display: grid; grid-template-columns: 1fr; gap: var(--whn-sp-4); } @media (min-width: 768px) { .whn-home .whn-features { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .whn-home .whn-features { grid-template-columns: repeat(3, 1fr); gap: var(--whn-sp-5); } } .whn-home .whn-feature { display: flex; flex-direction: column; gap: var(--whn-sp-3); padding: var(--whn-sp-5); background: var(--whn-card); border: 1px solid var(--whn-border); border-radius: var(--whn-radius-lg); transition: box-shadow var(--whn-dur-fast) var(--whn-ease), transform var(--whn-dur-fast) var(--whn-ease); } .whn-home .whn-feature:hover { box-shadow: var(--whn-shadow-lift); transform: translateY(-2px); } .whn-home .whn-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--whn-tint-brand); color: var(--whn-brand); border-radius: var(--whn-radius-md); } .whn-home .whn-feature-icon svg { width: 24px; height: 24px; } .whn-home .whn-feature h3 { margin: 0; font-size: var(--whn-fs-md); color: var(--whn-text); } .whn-home .whn-feature p { margin: 0; color: var(--whn-text-muted); font-size: var(--whn-fs-sm); } /* --- Migration statement (§5) — asymmetric split + photograph --------- */ .whn-home .whn-migrate-teaser { grid-template-columns: 1fr; } @media (min-width: 992px) { .whn-home .whn-migrate-teaser { grid-template-columns: 1.1fr 1fr; } } .whn-home .whn-migrate-photo { position: relative; } .whn-home .whn-migrate-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--whn-photo-radius); border: 1px solid var(--whn-border-on-ink); box-shadow: var(--whn-glow); } .whn-home .whn-migrate-badge { position: absolute; inset-block-end: var(--whn-sp-4); inset-inline-start: var(--whn-sp-4); padding: var(--whn-sp-2) var(--whn-sp-4); background: #fff; color: var(--whn-band-ink); border-radius: var(--whn-radius-full); font-size: var(--whn-fs-sm); font-weight: var(--whn-fw-bold); box-shadow: var(--whn-shadow-md); } /* Compact steps under the copy instead of a second column of cards. */ .whn-home .whn-migrate-steps { margin-block-start: var(--whn-sp-5); gap: var(--whn-sp-3); } .whn-home .whn-migrate-steps li { padding-block: var(--whn-sp-3); } /* --- Stats band (§6) — tinted pills, real numbers --------------------- */ .whn-home .whn-statband { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--whn-sp-4); } .whn-home .whn-stat-pill { display: flex; flex-direction: column; align-items: center; gap: var(--whn-sp-1); min-width: 150px; padding: var(--whn-sp-5) var(--whn-sp-6); background: var(--whn-card); border: 1px solid var(--whn-border); border-radius: var(--whn-radius-lg); text-align: center; } .whn-home .whn-stat-pill:nth-child(odd) { background: var(--whn-tint-brand); border-color: transparent; } .whn-home .whn-stat-value { font-size: var(--whn-fs-xl); font-weight: var(--whn-fw-display); letter-spacing: var(--whn-ls-tight); color: var(--whn-brand); } .whn-home .whn-stat-label { color: var(--whn-text-muted); font-size: var(--whn-fs-sm); } /* --- Plans (§8) — featured card goes dark, cards lift on hover -------- */ .whn-home .whn-plan { transition: transform var(--whn-dur-fast) var(--whn-ease), box-shadow var(--whn-dur-fast) var(--whn-ease); } .whn-home .whn-plan:hover { transform: translateY(-4px); box-shadow: var(--whn-shadow-lift); } .whn-home .whn-plan--featured { background: var(--whn-band-ink); border-color: transparent; box-shadow: var(--whn-glow); } .whn-home .whn-plan--featured .whn-plan-name { color: #fff; } .whn-home .whn-plan--featured .whn-plan-price-value { color: var(--whn-brand-on-ink); } .whn-home .whn-plan--featured .whn-plan-price-unit, .whn-home .whn-plan--featured .whn-plan-sub { color: var(--whn-text-soft-on-ink); } .whn-home .whn-plan--featured .whn-plan-specs { border-block-start-color: var(--whn-border-on-ink); color: var(--whn-text-soft-on-ink); } .whn-home .whn-plan--featured .whn-plan-specs svg { color: var(--whn-ok-on-ink); } .whn-home .whn-plan--featured .whn-plan-flag { background: #fff; color: var(--whn-band-ink); } .whn-home .whn-plan--featured :focus-visible { box-shadow: var(--whn-focus-ring-on-ink); } /* --- Quotes + FAQ (§11) — quotes shrink, FAQ goes 2-col --------------- */ /* Unsourced 5-star rows are exactly the fake proof the brief forbids. */ .whn-home .whn-quote-stars { display: none; } .whn-home .whn-quote { padding: var(--whn-sp-4); gap: var(--whn-sp-2); } .whn-home .whn-quote blockquote { font-size: var(--whn-fs-sm); } .whn-home .whn-quote-name { font-size: var(--whn-fs-sm); } .whn-home .whn-quote-role { font-size: var(--whn-fs-xs); } @media (min-width: 768px) { .whn-home .whn-faq { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--whn-sp-3) var(--whn-sp-4); } }