/* ============================================================ FAMOUS REGISTRAR — DESIGN TOKENS ------------------------------------------------------------ THIS IS THE ONLY FILE YOU NEED TO EDIT TO RE-SKIN THE SITE. Change the hex values below and the entire site updates. Brand palette: "Deep Emerald + Warm Amber on Ink" ============================================================ */ :root { /* ---------- Neutrals: Ink (dark) ------------------------- */ --ink-950: #060B14; --ink-900: #0A1220; /* headings, dark section backgrounds */ --ink-800: #131E33; --ink-700: #1F2C45; --ink-600: #2E3D5C; /* ---------- Neutrals: Slate (text + borders) ------------ */ --slate-700: #344054; /* body text */ --slate-600: #475467; /* secondary body text */ --slate-500: #667085; /* muted / meta text */ --slate-400: #98A2B3; /* icons on light */ --slate-300: #D0D5DD; /* borders on light */ --slate-200: #E4E7EC; /* dividers */ --slate-100: #F2F4F7; /* subtle fill */ /* ---------- Neutrals: Cloud + white --------------------- */ --white: #FFFFFF; --cloud-50: #FCFDFE; --cloud-100: #F7F9FB; /* alternating section band */ --cloud-200: #EFF3F7; --mesh-blue-base: #EEF3FA; /* pale steel-blue mesh surface (products-geo-blue.svg) */ --indigo-50: #F5F7FF; /* faintest indigo wash */ --indigo-100: #EEF2FF; /* add-on icon tile; "Good to Know" notice surface */ --indigo-200: #C7D2FE; /* indigo notice border */ --indigo-600: #4F46E5; /* add-on icons and ticks; 6.3:1 on white, 6.1:1 on indigo-100 */ --mesh-navy-base: #0B1322; /* deep navy mesh surface (products-geo-navy.svg), sits beside --ink-950 footer */ /* ---------- Brand: Emerald (your legacy green) ---------- */ --brand-800: #06553A; --brand-700: #076B4A; --brand-600: #0A8158; /* links + filled buttons (4.9:1 white) */ --brand-500: #12A66F; /* icons, large text, accents */ --brand-400: #34C48A; --brand-300: #7CDCB3; --brand-100: #D9F2E7; --brand-50: #F1FAF6; --scan-line: rgba(10, 129, 88, 0.045); /* 1px horizontal scan-lines on .section--wash bands */ /* ---------- Accent: Amber (your legacy orange) ---------- * * USE SPARINGLY — badges, highlights, underlines only. * Never place amber and emerald at full strength side by side. */ --amber-700: #92400E; --amber-600: #B45309; --amber-500: #F59E0B; --amber-400: #FBBF24; --amber-100: #FEF3C7; --amber-50: #FFFBEB; /* ---------- Support: teal (gradient partner) ----------- */ --teal-500: #0EA5A5; --teal-600: #0C8C8C; /* ---------- Status -------------------------------------- */ --danger-600: #B42318; --danger-50: #FEF3F2; --success-600: #067647; --success-50: #ECFDF3; --info-600: #175CD3; --info-50: #EFF8FF; /* ---------- Typography ---------------------------------- */ /* System font stack — NO webfont is downloaded. "Inter" is used if the visitor already has it installed, otherwise the OS UI font takes over. This means zero font requests, no FOUT, no third-party connection and no cookie consent implications. To self-host Inter later: drop the .woff2 files into assets/fonts/, add an @font-face block, and leave this stack as the fallback. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Inter", var(--font-sans); --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Fluid type scale — clamp(min, preferred, max) */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.4375rem); --fs-2xl: clamp(1.5rem, 1vw + 1.25rem, 1.875rem); --fs-3xl: clamp(1.875rem, 1.8vw + 1.4rem, 2.5rem); --fs-4xl: clamp(2.25rem, 3vw + 1.5rem, 3.5rem); --fs-5xl: clamp(2.75rem, 4.2vw + 1.6rem, 4.5rem); /* 44px -> 84px. The centred product title on a product page's hero; see `.page-hero .page-hero__title` in components.css. */ --fs-6xl: clamp(2.75rem, 5.2vw + 1.6rem, 5.25rem); --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.55; --lh-relaxed: 1.7; --tracking-tighter: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.12em; /* Two label tracks the scale above did not cover. Uppercase micro-labels come in exactly two weights: "sticker" (badges, flags, tags) and "caption" (field labels, card eyebrows). Both were written as bare em values at a dozen call sites, which is how four treatments of the same pill drifted apart while each one still looked deliberate on its own. */ --tracking-flag: 0.08em; --tracking-label: 0.06em; /* ---------- Spacing scale (4px base) -------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* ---------- Chip metrics (the one deliberate sub-grid) ------ Fixed-height inline chips — badges, flags, tags, WHOIS pills — cannot use the 4px grid for their vertical padding without changing their height, because their height comes from the type's line box, not from a box model. So their metrics live here, in one place, instead of being re-typed as `3px 10px` / `3px 9px` / `2px 9px` at a dozen call sites. Chips are the only place in the system that is allowed to be off the grid, and the whole point of naming the exception is that everything else stays on it. */ --chip-pad-y: 3px; --chip-pad-x: 10px; --chip-pad-y-sm: 2px; --chip-pad-x-sm: 9px; --chip-gap: 5px; /* Section rhythm */ --section-y: clamp(3.5rem, 7vw, 6.5rem); --section-y-sm: clamp(2.5rem, 4.5vw, 4rem); /* Section-flow primitives — see EXPERIENCE-PLAN.md §3. The curved-band-edge token `--arch` is gone with the curve itself; band cards (`.section--card`, base.css) use `--r-2xl` and a flat margin instead. */ /* ---------- Layout ------------------------------------- */ --container: 1200px; --container-narrow: 780px; --container-wide: 1360px; --gutter: clamp(1rem, 4vw, 2rem); --header-h: 68px; --topbar-h: 38px; /* ---------- Radii -------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px; /* ---------- Shadows (layered, low-opacity craft) ------- */ --sh-xs: 0 1px 2px rgba(10, 18, 32, 0.05); --sh-sm: 0 1px 3px rgba(10, 18, 32, 0.07), 0 1px 2px rgba(10, 18, 32, 0.04); --sh-md: 0 4px 10px -2px rgba(10, 18, 32, 0.08), 0 2px 4px -2px rgba(10, 18, 32, 0.05); --sh-lg: 0 14px 28px -8px rgba(10, 18, 32, 0.13), 0 6px 12px -6px rgba(10, 18, 32, 0.06); --sh-xl: 0 28px 56px -16px rgba(10, 18, 32, 0.2), 0 10px 20px -12px rgba(10, 18, 32, 0.08); --sh-brand: 0 8px 24px -8px rgba(10, 129, 88, 0.42); /* ---------- Motion ------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 380ms; /* Default for the per-element stagger used by [data-reveal]. Pages override it inline, e.g. style="--reveal-delay:110ms". */ --reveal-delay: 0ms; /* Position of an element within a set, used to stagger a CSS-only entrance. `.cat-mark` sets it inline (`style="--i:0"` … `--i:5`) and its `animation-delay` is `calc(var(--i) * 70ms)`. Declared here so it is a real token rather than a loose custom property: _build/_verify.mjs fails the build on a `var()` that is not defined in this file. The value of 0 means an element that forgets to set its own index simply appears first in the sequence rather than inheriting somebody else's delay. */ --i: 0; /* ---------- Runtime-written custom properties ----------- These three are not authored in any stylesheet. They are written onto an element by assets/js/site.js at runtime, and every one of them has a fallback baked into its own `var()` so that a visitor with no JavaScript — or a script that threw before it got here — still gets a correct, static page. They are declared here for the same reason `--i` is: _verify.mjs fails the build on any `var()` that is not defined in this file. A runtime-written property is still a dependency, and the build is the right place to notice one going missing. */ /* Distance the TLD marquee travels, in px. Measured from the first `.tld-drift__set` rather than hardcoded, because chip width depends on the loaded font. The `50%` fallback in the keyframe is half the track, which is exactly one set's width for a two-set track — so the loop is seamless even before the script has measured anything. */ --tld-set-w: 50%; /* Pointer tilt, in degrees, for the bare cut-outs (the laptops and the terminal). Written on the wrapper, read by the img's transform. Zero is the correct resting state, so "never written" and "pointer gone" are the same thing. */ --tilt-x: 0deg; --tilt-y: 0deg; /* ---------- Gradients ---------------------------------- */ --grad-brand: linear-gradient(135deg, #0A8158 0%, #0EA5A5 100%); --grad-ink: linear-gradient(160deg, #0A1220 0%, #16213A 62%, #0B2B2B 100%); --grad-amber: linear-gradient(135deg, #F59E0B 0%, #FB923C 100%); /* Brand button gradient — both stops stay at or below the brand-600 contrast floor (4.6:1 on white), so the fill can be a gradient without the text ever sitting on a lighter stop. */ --grad-btn-brand: linear-gradient(135deg, #0D9268 0%, #076B4A 100%); --grad-btn-brand-hover: linear-gradient(135deg, #0A8158 0%, #06553A 100%); /* Aurora glows — the homepage hero's drifting light fields. Pure radial fades to transparent, painted on huge blurred discs; zero image bytes. */ --aurora-brand: radial-gradient(circle at center, rgba(18, 166, 111, 0.5) 0%, rgba(18, 166, 111, 0) 68%); --aurora-teal: radial-gradient(circle at center, rgba(14, 165, 165, 0.42) 0%, rgba(14, 165, 165, 0) 70%); --aurora-blue: radial-gradient(circle at center, rgba(42, 118, 232, 0.32) 0%, rgba(42, 118, 232, 0) 70%); --aurora-amber: radial-gradient(circle at center, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0) 70%); /* A bigger brand shadow for the lifted hover state on buy buttons. */ --sh-brand-lg: 0 14px 34px -10px rgba(10, 129, 88, 0.5), 0 4px 10px -4px rgba(10, 129, 88, 0.3); /* Soft dot-grid used on light page heroes — the "graph paper" texture that keeps a pale band from reading as an empty white slab. */ --dot-grid: radial-gradient(circle, rgba(10, 18, 32, 0.055) 1px, transparent 1px); --grad-hero-glow: radial-gradient( 58% 62% at 78% 12%, rgba(18, 166, 111, 0.34) 0%, rgba(18, 166, 111, 0) 68% ), radial-gradient( 46% 54% at 12% 88%, rgba(14, 165, 165, 0.24) 0%, rgba(14, 165, 165, 0) 70% ); /* ---------- Product accent system ------------------------- One layout, six products. `data-product` on the product hero swaps these seven tokens and the whole band recolours with them: label, checks, price, CTAs and the background glow. The dashboard artwork is per product too — one master composition, one accent each. The DEFAULTS below are WordPress on purpose. WordPress maps to the house emerald — the mock and the brand are literally the same green — so on that hero nothing is recoloured at all and the brand identity survives untouched. Every other product overrides the block. Two gradient tokens rather than one, for the same reason `--grad-btn-brand` has two stops chosen against a contrast floor: the light stop of each product ramp must still carry white button text at 4.5:1, so the ramps are hand-picked per product instead of being composed from `--product-accent` (which is allowed to be lighter, because it never carries small white text). */ --product-accent: var(--brand-600); --product-accent-strong: var(--brand-700); --product-accent-soft: var(--brand-100); --product-accent-wash: var(--brand-50); --product-accent-rgb: 10, 129, 88; --product-grad-btn: var(--grad-btn-brand); --product-grad-btn-hover: var(--grad-btn-brand-hover); /* ---------- The hero trust strip's two layers ---------- The strip (components.css) is deliberately TWO colours, not one, and the pair is the same on every page: --hero-strip-icon the 30px glyph, bright orange on all fourteen product pages. The strip is one component, so it gets one signature: orange means "this is a feature", the same way a tick means "included". --product-accent-rgb the hairlines the strip is ruled with, which DOES follow the product. So the rule carries the page's identity and the icon carries the component's. A page that wants its product tint back on the glyph overrides `--hero-strip-icon` in its own `[data-product]` block; nothing else has to change. #EA580C was the first pick and it FAILED: measured against all ten bands the strip lands on, it came in at 2.81 on the Email Marketing teal and 2.84 on the Professional Email mint — the two most saturated bands on the site, and the two where a pale glyph is most obvious. That is the trap: an orange checked against white and one cream band looks fine and is not. #E0450A is the brightest tone on this ramp that clears 3:1 on EVERY band (min 3.30, on the teal), so the glyph is as bright as it can be and still a graphic element rather than a smudge. It is also not `--amber-500` (#F59E0B, 2.15 on white), which stays clear of the §6.3 rule about full-strength amber beside emerald. If this value changes, re-run the check against all ten — not just white. */ --hero-strip-icon: #E0450A; /* ---------- The headline accent gradient ---------- The pair `.accent` (components.css) paints the headline's payoff words with. Two stops, hand-picked per product and declared as LITERALS — never as a `var()` chain off `--product-accent`. That is not a style preference. `:root` is the element while `[data-product]` is the product hero
, so a default written here as `var(--product-accent)` resolves against 's accent and then INHERITS down already-frozen; the product's own value is never read and every page paints house green. Literals here are fine (they reference :root-level palette tokens), literals in a product block are fine, and a var() chain from root to child is not. Both stops must clear 3:1 on the band they land on (display type), and they are checked per product, not approximated — --product-accent is NOT reused as a stop because it is allowed to be light enough to fail: amber 2.08, cyan 2.33 and cPanel's orange 2.48. */ --product-accent-from: var(--brand-600); --product-accent-to: var(--brand-800); /* The dashboard composition's scale and horizontal shift inside its grid slot. Defaults are WordPress's; a product that sells depth of control (cPanel) widens both. `--product-price-color` is optional and deliberately has NO default here: product.css falls back to `--product-accent-strong` at the use site, and a var() default declared on :root would pre-resolve to the emerald and ignore every product override. `--product-wallpaper` / `--product-wallpaper-base` are the band's faceted-mesh surface (the same system the email heroes use) and the flat colour behind it, which doubles as the no-SVG fallback. `--product-wallpaper-fade` is the white ramp that dissolves the band's foot into the page, and `--product-hero-foot` switches off the hairline that would otherwise cut across it. Like `--product-price-color` these are declared ONLY on the products that want one: product.css falls back to the plain white-to-wash gradient, no fade and the standard hairline, so a product without a wallpaper (the two transfer pages) keeps exactly the band it has today. */ --product-dash-scale: 1.4; --product-dash-shift: -10%; /* ---------- Z-index ------------------------------------ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; } /* ---------- Product accents, one block per product ---------- The layout never changes between these — see product.css. Only the seven tokens above change hands. Values are paired so every ramp has a text-safe `strong` (≥ 4.5:1 on white), a light `soft`/`wash` for tiles and band tints, an `rgb` triple for rgba() glows, and two button gradients whose light stop still carries white text. When a new product page is built, it gets its `data-product` value here and one dashboard artwork file — nothing else is product specific. */ [data-product="wordpress"] { /* WordPress wears the logo blue (#21759B — the classic mark colour), with the conversion anchors kept house green exactly as cPanel and Hosting Plus do them: the identity layer (label, WordPress mark, checks, chips, dot clusters, glow and the wallpaper) goes blue while the Pick a Plan button and the price stay the brand green. Before this the page inherited the emerald defaults, which left WordPress as the only hosting hero whose identity was the house colour rather than its own — the opposite of the consistency this is for. `strong` at #175A78 clears 7.5:1 on white, for the small bold label text; #21759B is itself a comfortable 5.1:1 and carries the display use. */ --product-accent: #21759B; --product-accent-strong: #175A78; --product-accent-soft: #D6EAF2; --product-accent-wash: #F2F9FB; --product-accent-rgb: 33, 117, 155; /* The headline gradient. The mid accent IS a legal stop here (4.53 on the band), so the ramp runs mid → a deep navy that keeps the gradient travelling rather than stalling on one hue. */ --product-accent-from: #21759B; --product-accent-to: #123F55; --product-grad-btn: var(--grad-btn-brand); --product-grad-btn-hover: var(--grad-btn-brand-hover); --product-price-color: var(--brand-700); --product-wallpaper: url("../img/hero/wordpress-geo.svg"); --product-wallpaper-base: #e8f2f8; /* The band dissolves into page white at its foot instead of stopping on a ruled edge, so the wallpaper runs into the white gap around the next `section--card` band without a seam. Paired with the foot hairline switch below. */ --product-wallpaper-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff 100%); --product-hero-foot: 0; } [data-product="cpanel"] { /* cPanel's identity is the orange — labels, checks, icons, cards and the glow — while its conversion anchors (the CTA and the price) stay house green, exactly as the reference mock has them. `strong` is the text-safe orange: #C2410C clears 4.5:1 on the warm base where the label sits, #F97316 does not. The wash is warm cream to match the mock's warm base — the glow CSS floating around suggested a cool mint base, but the mock it came with is warm. */ --product-accent: #F97316; --product-accent-strong: #C2410C; --product-accent-soft: #FFEDD5; --product-accent-wash: #F7EEE6; --product-accent-rgb: 249, 115, 22; /* The bright orange is NOT a legal stop (2.48 on the warm base), so the gradient opens one step deeper at the text-safe `strong` and travels to a burnt umber. Both are measured on the band, not on white. */ --product-accent-from: #C2410C; --product-accent-to: #9A3412; --product-grad-btn: var(--grad-btn-brand); --product-grad-btn-hover: var(--grad-btn-brand-hover); --product-price-color: var(--brand-700); /* "Control and flexibility" reads wider than "managed simplicity": same composition system, bigger dashboard. */ --product-dash-scale: 1.5; --product-dash-shift: -12%; --product-wallpaper: url("../img/hero/cpanel-geo.svg"); --product-wallpaper-base: #fbefe4; --product-wallpaper-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff 100%); --product-hero-foot: 0; } [data-product="hosting-plus"] { /* The upgrade path between cPanel and VPS wears amber: warmer than cPanel's orange, brighter than reseller's dark gold. The mock keeps the conversion anchors house green (the Pick a Plan button and the price), exactly like the cPanel hero, so only the identity layer — label, checks, icons, chips and the glow — goes amber. The warm cream wash (`#FFFBEB`) is deliberate: the band must read warm, not mint. `strong` at #D97706 is the spec value; it carries the large amber line of the headline comfortably (3:1 is all display type needs) but sits at ~3.2:1 on the label's small bold text, which is noted in the page's handoff. */ --product-accent: #F59E0B; --product-accent-strong: #D97706; --product-accent-soft: #FEF3C7; --product-accent-wash: #FFFBEB; --product-accent-rgb: 245, 158, 11; /* Amber is the lightest accent on the site (2.08 on this band) so it is not a legal stop; the ramp opens at the text-safe `strong` — which also avoids putting a token from the `--amber-*` ramp into the headline, per the §6.3 rule about amber at full strength beside the emerald. */ --product-accent-from: #D97706; --product-accent-to: #B45309; --product-grad-btn: var(--grad-btn-brand); --product-grad-btn-hover: var(--grad-btn-brand-hover); --product-price-color: var(--brand-700); --product-wallpaper: url("../img/hero/hosting-plus-geo.svg"); /* Kept deliberately pale. #D97706 on the previous #FFFBEB wash measured ~3.1:1 on the label's small bold text — already under the 4.5:1 floor and noted in this page's handoff — so the wallpaper must not make it worse. This base measures ~3.1:1, i.e. the wallpaper is contrast- neutral here and the existing issue is neither fixed nor worsened. */ --product-wallpaper-base: #fefbf2; --product-wallpaper-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff 100%); --product-hero-foot: 0; } [data-product="vps"] { /* VPS is the deep end of the hosting ladder, so it wears the deepest blue of the three blue heroes (the SSL pages borrow this same accent). Unlike cPanel, WordPress and Hosting Plus, VPS keeps its conversion anchors in ITS OWN blue rather than dropping to house green: the Pick a Plan ramp and the price are the accent, not the brand emerald, because a root-access server is the one product on the ladder that is sold as power rather than as convenience. `strong` at #1849A9 carries the small bold label text and measures 6.36:1 on the wallpaper base below. */ --product-accent: #175CD3; --product-accent-strong: #1849A9; --product-accent-soft: #D1E9FF; --product-accent-wash: #EFF8FF; --product-accent-rgb: 23, 92, 211; /* The headline gradient. The mid accent IS a legal stop on this base (4.65:1, measured), so the ramp opens at #175CD3 and travels to the deep navy #102F6E — the two ends of the product's own blue identity. */ --product-accent-from: #175CD3; --product-accent-to: #102F6E; --product-grad-btn: linear-gradient(135deg, #1D63D8 0%, #1849A9 100%); --product-grad-btn-hover: linear-gradient(135deg, #1849A9 0%, #102F6E 100%); /* A product price in its own accent, matching how the CTA is treated here, rather than the house green the other hosting heroes use. */ --product-price-color: var(--product-accent-strong); --product-wallpaper: url("../img/hero/vps-geo.svg"); /* Pale on the copy side on purpose: the label, headline, lead, price and checks are all read against it. #1849A9 measures 6.36:1 here, slate-600 lead 5.97:1 and slate-900 headline 13.8:1 — see the wallpaper notes in _wallpaper-gen.ps1. The DEEP blue lives in the bloom behind the artwork, where nothing is ever read against it. */ --product-wallpaper-base: #d6e4f8; /* The band dissolves into page white at its foot instead of stopping on a ruled edge, so the wallpaper runs into the white gap around the next `section--card` band without a seam. Paired with the foot hairline switch below. */ --product-wallpaper-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff 100%); --product-hero-foot: 0; } [data-product="dedicated"] { --product-accent: #6941C6; --product-accent-strong: #53389E; --product-accent-soft: #E9D7FE; --product-accent-wash: #F4F3FF; --product-accent-rgb: 105, 65, 198; --product-accent-from: #6941C6; --product-accent-to: #4C1D95; --product-grad-btn: linear-gradient(135deg, #6D45CC 0%, #53389E 100%); --product-grad-btn-hover: linear-gradient(135deg, #53389E 0%, #3D2872 100%); } [data-product="email"] { --product-accent: #0E9A9A; --product-accent-strong: #0B6E6E; --product-accent-soft: #CFF3F3; --product-accent-wash: #EFF9F9; --product-accent-rgb: 14, 154, 154; --product-accent-from: #0B6E6E; --product-accent-to: #054B4B; --product-grad-btn: linear-gradient(135deg, #0C8080 0%, #075F5F 100%); --product-grad-btn-hover: linear-gradient(135deg, #0B6E6E 0%, #054B4B 100%); } [data-product="reseller"] { --product-accent: #D97706; --product-accent-strong: #92400E; --product-accent-soft: #FEF3C7; --product-accent-wash: #FFFBEB; --product-accent-rgb: 217, 119, 6; --product-accent-from: #D97706; --product-accent-to: #92400E; --product-grad-btn: linear-gradient(135deg, #B45309 0%, #92400E 100%); --product-grad-btn-hover: linear-gradient(135deg, #92400E 0%, #6C2F08 100%); } /* ---------- The transfer family wears cyan ---------- Shared by both transfer pages (`domains/transfer` and `domains/bulk-transfer`) — one product accent, two stories: move ONE domain (the van) or move a WHOLE portfolio (the truck). Cyan is deliberately outside the hosting ramp (emerald / orange / amber / blue): a transfer is a movement, not a plan you buy, and the cool colour reads as transit rather than purchase. The four values the brief specified are accent / strong / soft / rgb. The wash and the button ramp are derived here because the hero system needs all seven tokens: - wash #ECFEFF is cyan-50: the band must read cool, never mint, so the warm emerald house wash is wrong here. - the BUTTON ramp is darkened to cyan-700→800. A button filled at #06B6D4 would put white label text at about 2.6:1 — under the 4.5:1 floor — so the CTA rides the same deep end of the ramp the other products use while the bright #06B6D4 stays for labels, checks, icons and the dot matrix, where it is never asked to hold white body text. */ [data-product="transfer"] { --product-accent: #06B6D4; --product-accent-strong: #0891B2; --product-accent-soft: #CFFAFE; --product-accent-wash: #ECFEFF; --product-accent-rgb: 6, 182, 212; /* The bright cyan is NOT a legal stop (2.33 on the cool base); the ramp opens at the text-safe `strong` and travels to cyan-700. */ --product-accent-from: #0891B2; --product-accent-to: #0E7490; --product-grad-btn: linear-gradient(135deg, #0E7490 0%, #155E75 100%); --product-grad-btn-hover: linear-gradient(135deg, #155E75 0%, #164E63 100%); } /* ---------- Website Backup wears the SAME bright cyan as the transfer family, and that is on purpose. Cyan already means one thing on this site — the cool, moving, "second copy of something you already own" hue — and a backup is the second case of exactly that idea: a copy of your site, kept safely, moved back into place when you need it. Reusing the ramp keeps the palette honest instead of inventing a fourth blue for a page that is an argument about copies, not about hosting. The one difference from the transfer pages: this hero has a WALLPAPER, not a flat band, so every text stop is measured against `#D8F1FB` (the wallpaper base) rather than against the cyan-50 wash. That base is what moved `strong` down to `#0E7490` — the transfer block's `#0891B2` measures only 3.14:1 on this base and would have shipped under the 4.5:1 floor. The bright `#06B6D4` stays exactly where the transfer comment puts it: fills, icons, the dot matrix and the bloom behind the artwork, never small white-text. Verified numbers (see the wallpaper section of PROJECT-BRIEF.md): strong #0E7490 on base 4.57:1 (floor 4.5) gradient #0E7490 / #155E75 on base 4.57 / 6.19 (floor 3) CTA light stop #0E7490 on white 5.36:1 (floor 4.5) strip orange #E0450A on base 3.56:1 (floor 3) */ [data-product="backup"] { --product-accent: #06B6D4; --product-accent-strong: #0E7490; --product-accent-soft: #CFFAFE; --product-accent-wash: #ECFEFF; --product-accent-rgb: 6, 182, 212; /* The bright cyan is NOT a legal stop on this base (2.07, measured); the ramp opens at the text-safe `strong` and travels to cyan-800, which is the same journey the transfer block makes from its own `strong`. */ --product-accent-from: #0E7490; --product-accent-to: #155E75; --product-grad-btn: linear-gradient(135deg, #0E7490 0%, #155E75 100%); --product-grad-btn-hover: linear-gradient(135deg, #155E75 0%, #164E63 100%); /* Price in the product's own cyan, like VPS: this page sells the plan itself, not the free add-on, so its number belongs in its accent. */ --product-price-color: var(--product-accent-strong); --product-wallpaper: url("../img/hero/backup-geo.svg"); /* Pale on the copy side on purpose: label, headline, lead, price and checks are all read against it. #0E7490 measures 4.57:1 here, slate-600 lead 6.46:1 and slate-900 headline 15.21:1. The saturated cyan lives in the bloom behind the artwork, where nothing is ever read against it. */ --product-wallpaper-base: #D8F1FB; /* The band dissolves into page white at its foot instead of stopping on a ruled edge, so the wallpaper runs into the white gap around the next `section--card` band without a seam. Paired with the foot hairline switch below. */ --product-wallpaper-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff 100%); --product-hero-foot: 0; } /* The two CATEGORY HUBS (hosting/index). The range pages wear the house emerald rather than any one product's colour, so they read as the tier ABOVE the four product identities instead of borrowing one of them. Every accent value here is the brand ramp (the same anchors cPanel and Web Hosting Plus keep for their conversion buttons and prices); the only real override is the shared `hubs-geo.svg` wallpaper. Base #F0F8F4 measured: brand-700 label 6.05:1, slate-500 strip text 4.60:1, slate-600 lead 7.12:1, slate-900 headline 17.35:1 and the headline stops #0A8158 / #06553A at 4.53 / 8.21 - every text token clears its floor on the pale base. security/index wears the same surface through `.page-hero--hub` in split-hero.css (it runs the split hero, not this system). */ [data-product="hub"] { --product-accent: #0A8158; --product-accent-strong: #076B4A; --product-accent-soft: #D9F2E7; --product-accent-wash: #F1FAF6; --product-accent-rgb: 10, 129, 88; --product-accent-from: #0A8158; --product-accent-to: #06553A; --product-grad-btn: var(--grad-btn-brand); --product-grad-btn-hover: var(--grad-btn-brand-hover); --product-price-color: var(--brand-700); --product-wallpaper: url("../img/hero/hubs-geo.svg"); --product-wallpaper-base: #F0F8F4; --product-wallpaper-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff 100%); --product-hero-foot: 0; } /* Respect the OS reduced-motion preference everywhere. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* Mobile type steps up to a 16px base. Two reasons, and the second is the one that matters: iOS Safari auto-zooms any input whose font-size is under 16px, so focusing the domain search box — the site's primary action — used to throw a phone viewport into a zoomed state the visitor then had to pinch out of. Buttons and inputs both inherit --fs-base, so this one override fixes the zoom and the reading size together. The reading size matters too: every registrar this site is compared against sets its mobile body copy at 16px, and 15px on a phone is the one place the site's deliberately tight desktop density reads as smallness rather than as composure. Desktop keeps 15px. */ @media (max-width: 640px) { :root { --fs-base: 1rem; } }