:root { /* Default = dark. A FOUC-preventing inline script flips [data-theme="light"] before paint when the user has chosen light (or when prefers-color-scheme: light is set and the user is in Auto mode). Both schemes share the same custom-property names — the dark/light branches just supply different values. */ color-scheme: dark; --bg: #050816; --bg-elev: #0b1226; --bg-alt: #0a1024; --card: var(--surface-elevated); --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .22); --text: #f8fafc; --text-muted: #cbd5e1; --text-dim: #94a3b8; --accent: #67e8f9; --accent-strong: #22d3ee; --good: #34d399; --warn: #fbbf24; --danger: #f87171; --premium: #c084fc; /* Accent washes — replace the historical hardcoded rgba(34,211,238,α) literals. --accent-wash-base is deliberately the SAME in dark and light for the pay tenant (the old literals were un-scoped and rendered #22d3ee-tinted in both modes), so pay keeps pixel parity. Tenants re-tint every wash at once by overriding the base. color-mix(in srgb, C N%, transparent) === rgba(C, N/100). */ --accent-wash-base: #22d3ee; --accent-wash-04: color-mix(in srgb, var(--accent-wash-base) 4%, transparent); --accent-wash-05: color-mix(in srgb, var(--accent-wash-base) 5%, transparent); --accent-wash-06: color-mix(in srgb, var(--accent-wash-base) 6%, transparent); --accent-wash-07: color-mix(in srgb, var(--accent-wash-base) 7%, transparent); --accent-wash-08: color-mix(in srgb, var(--accent-wash-base) 8%, transparent); --accent-wash-10: color-mix(in srgb, var(--accent-wash-base) 10%, transparent); --accent-wash-12: color-mix(in srgb, var(--accent-wash-base) 12%, transparent); --accent-wash-15: color-mix(in srgb, var(--accent-wash-base) 15%, transparent); --accent-wash-18: color-mix(in srgb, var(--accent-wash-base) 18%, transparent); --accent-wash-25: color-mix(in srgb, var(--accent-wash-base) 25%, transparent); --accent-wash-30: color-mix(in srgb, var(--accent-wash-base) 30%, transparent); --accent-wash-35: color-mix(in srgb, var(--accent-wash-base) 35%, transparent); --accent-wash-45: color-mix(in srgb, var(--accent-wash-base) 45%, transparent); /* Fixed accent-family swatches. These replace literals that rendered the SAME value in both dark and light mode for pay (ink on accent fills, the light-styled referral components, pager, source badges), so they are declared once here and NOT re-declared in the light block. Tenants override them per-tenant. */ --accent-contrast: #03131a; /* ink on --accent / --accent-strong fills */ --accent-solid: #0891b2; /* solid accent fill (white ink) / accent link on card */ --accent-ink: #0e7490; /* deep accent text/border on pale tint */ --accent-tint: #ecfeff; /* palest accent surface (chips, badges) */ --accent-tint-2: #f0fdfa; /* referral-modal gradient second stop */ --accent-tint-strong: #a5f3fc; /* pale accent border / text on deep bg */ --accent-tint-ink: #e6fbff; /* near-white accent text on deep bg */ --accent-deep: #0b2933; /* deep accent-tinted surface (dark modal) */ --accent-deep-2: #07212a; /* Surface tokens — used in place of hardcoded rgba(15,23,42,…) so light-mode can override them in one place. */ --surface-faint: rgba(15, 23, 42, .35); --surface-card: rgba(15, 23, 42, .40); --surface-mid: rgba(15, 23, 42, .55); --surface-strong: rgba(15, 23, 42, .65); --surface-elevated: rgba(15, 23, 42, .68); --surface-deep: rgba(11, 18, 38, .65); --header-bg: rgba(5, 8, 22, .72); --mobile-cta-bg: rgba(5, 8, 22, .65); /* Soft surface tint used on form inputs / message bubbles — white on dark in dark mode, near-black on white in light mode. */ --surface-tint: rgba(255, 255, 255, .04); --surface-tint-2: rgba(255, 255, 255, .03); --radius: 16px; --radius-lg: 28px; --shadow: 0 24px 80px rgba(0, 0, 0, .35); --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Body copy family. Defaults to --font; tenants that pair a display face with a separate text face (latino) override just this one. */ --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Body backdrop — split into its own var so light mode can soften the cyan tints. */ --body-bg-gradient: radial-gradient(circle at top left, rgba(56, 189, 248, .18), transparent 36rem), radial-gradient(circle at bottom right, rgba(34, 211, 238, .12), transparent 32rem); font-family: var(--font); background: var(--bg); color: var(--text); } /* Light theme overrides. Selector is :root[data-theme="light"] so a missing data-theme (JS off) falls through to dark, matching the color-scheme default declared above. */ :root[data-theme="light"] { color-scheme: light; --bg: #f5f7fb; --bg-elev: #ffffff; --bg-alt: #eef2f7; --card: rgba(255, 255, 255, .92); --border: rgba(15, 23, 42, .10); --border-strong: rgba(15, 23, 42, .18); --text: #0b1226; --text-muted: #334155; --text-dim: #64748b; /* Slightly darker cyan in light mode for AA contrast on white. */ --accent: #0891b2; --accent-strong: #0e7490; --good: #059669; --warn: #b45309; --danger: #b91c1c; --premium: #7c3aed; --surface-faint: rgba(255, 255, 255, .70); --surface-card: rgba(255, 255, 255, .85); --surface-mid: rgba(255, 255, 255, .90); --surface-strong: rgba(255, 255, 255, .95); --surface-elevated: #ffffff; --surface-deep: #ffffff; --header-bg: rgba(255, 255, 255, .85); --mobile-cta-bg: rgba(255, 255, 255, .92); --surface-tint: rgba(15, 23, 42, .045); --surface-tint-2: rgba(15, 23, 42, .03); --shadow: 0 12px 40px rgba(15, 23, 42, .08); /* Softer accent washes on light backgrounds so they don't read as "tinted gray". */ --body-bg-gradient: radial-gradient(circle at top left, rgba(8, 145, 178, .08), transparent 36rem), radial-gradient(circle at bottom right, rgba(124, 58, 237, .05), transparent 32rem); } /* ====================== TENANT: domain.latino ========================= Warm, sun-lit, editorial (MULTI_TLD_PLAN.md §8): terracotta/coral primaries, sand neutrals, sun-yellow reserved for --warn highlights, tropical green for --good. Only tokens change here — components inherit via the cascade. Latino defaults to LIGHT (warm sand) when data-theme is missing; [data-theme="dark"] switches to warm night. The double selector on the light block is required: html[a][b] = (0,2,1) must beat :root[data-theme="light"] = (0,2,0), while the bare html[data-tenant] = (0,1,1) beats :root = (0,1,0). All ratios AA-checked: body-text pairs >= 4.5:1 (see P3 report). */ html[data-tenant="latino"], html[data-tenant="latino"][data-theme="light"] { color-scheme: light; --bg: #fbf6ef; /* warm sand */ --bg-elev: #ffffff; --bg-alt: #f5ebdd; --card: #ffffff; --border: rgba(43, 29, 22, .12); --border-strong: rgba(43, 29, 22, .22); --text: #2b1d16; /* warm black — 15.1:1 on sand */ --text-muted: #5b463b; /* 8.2:1 */ --text-dim: #7a6152; /* 5.3:1 */ --accent: #c4402f; /* terracotta — 4.7:1 on sand, 5.1:1 on card */ --accent-strong: #9e3223; /* darker terracotta (hover) — 6.7:1 */ --good: #227249; /* tropical green, darkened for AA — 5.5:1 */ --warn: #96610c; /* sun-amber ink — 4.9:1 */ --danger: #b91c1c; --premium: #7c3aed; --surface-faint: rgba(255, 255, 255, .70); --surface-card: rgba(255, 255, 255, .85); --surface-mid: rgba(255, 255, 255, .90); --surface-strong: rgba(255, 255, 255, .95); --surface-elevated: #ffffff; --surface-deep: #ffffff; --header-bg: rgba(251, 246, 239, .85); --mobile-cta-bg: rgba(251, 246, 239, .92); --surface-tint: rgba(43, 29, 22, .045); --surface-tint-2: rgba(43, 29, 22, .03); --shadow: 0 12px 40px rgba(43, 29, 22, .10); --body-bg-gradient: radial-gradient(circle at top left, rgba(196, 64, 47, .07), transparent 36rem), radial-gradient(circle at bottom right, rgba(244, 185, 66, .08), transparent 32rem); /* Every --accent-wash-NN re-tints automatically off this base. */ --accent-wash-base: #c4402f; --accent-contrast: #fff8f2; /* cream ink on terracotta — 4.8:1 */ /* Mode-invariant accent family (not re-declared in the dark block, mirroring pay, where these render identically in both modes). */ --accent-solid: #c4402f; /* white ink on it: 5.1:1 */ --accent-ink: #8c2f1f; /* 7.1:1 on --accent-tint */ --accent-tint: #fbeae4; /* pale terracotta */ --accent-tint-2: #fdf4e8; /* pale sand-yellow */ --accent-tint-strong: #f0bcad; --accent-tint-ink: #ffefe8; /* 13.8:1 on --accent-deep */ --accent-deep: #332016; /* deep warm-brown surface */ --accent-deep-2: #29180f; /* Editorial display + humanist body (design zip 2026-07-24), self hosted in the TRACKED assets/webfonts/ dir. Mode-invariant, so it lives in the default-mode block only. */ --font: 'Bricolage Grotesque', 'Instrument Sans', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body: 'Instrument Sans', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; /* Serape accents — the four-colour textile band + diamond bullets. Secondary to --accent, and NOT part of the shared token set, so no other tenant inherits them. */ --lat-gold: #dfa03a; --lat-teal: #2f7f74; --lat-rose: #c04f7c; --lat-band: #29180e; /* inverted cultural band */ --lat-band-ink: #f7ead8; } /* Latino warm night. Must re-declare every mode-sensitive token the latino light block sets, because that block also matches when data-theme="dark" and outranks plain :root. */ html[data-tenant="latino"][data-theme="dark"] { color-scheme: dark; --bg: #1a120e; /* warm night */ --bg-elev: #241812; --bg-alt: #20150f; --card: #241812; --border: rgba(255, 236, 224, .12); --border-strong: rgba(255, 236, 224, .24); --text: #f5ede4; /* 15.9:1 on bg */ --text-muted: #d9c6b8; /* 11.2:1 */ --text-dim: #ae9484; /* 6.5:1, 6.1:1 on card */ --accent: #ff7f66; /* coral — 7.5:1 on bg */ --accent-strong: #e2725b; /* deeper coral (hover) — 6.0:1 */ --good: #3d9e68; /* brightened tropical green — 5.5:1 */ --warn: #f4b942; /* sun yellow — 10.4:1 */ --danger: #f87171; --premium: #c084fc; --surface-faint: rgba(36, 24, 18, .35); --surface-card: rgba(36, 24, 18, .40); --surface-mid: rgba(36, 24, 18, .55); --surface-strong: rgba(36, 24, 18, .65); --surface-elevated: rgba(36, 24, 18, .68); --surface-deep: rgba(26, 18, 14, .65); --header-bg: rgba(26, 18, 14, .72); --mobile-cta-bg: rgba(26, 18, 14, .65); --surface-tint: rgba(255, 236, 224, .04); --surface-tint-2: rgba(255, 236, 224, .03); --shadow: 0 24px 80px rgba(0, 0, 0, .35); --body-bg-gradient: radial-gradient(circle at top left, rgba(255, 127, 102, .13), transparent 36rem), radial-gradient(circle at bottom right, rgba(244, 185, 66, .07), transparent 32rem); --accent-wash-base: #ff7f66; --accent-contrast: #2b1208; /* near-black warm ink on coral — 7.1:1 */ /* Serape accents, brightened for the warm night (latino's default is LIGHT, so this block must re-declare every mode-sensitive token). */ --lat-gold: #f4b942; --lat-teal: #4bb3a4; --lat-rose: #e87fa6; --lat-band: #150d09; --lat-band-ink: #f7ead8; } /* ======================= TENANT: domain.dot =========================== Green "developer namespace" brand (operator design zip 2026-07-24): near-black green night default, neon-mint accent, gold premium, Space Grotesk display + JetBrains Mono eyebrows. Only tokens change — components inherit via the cascade. Dot defaults to DARK; the light block must re-declare every mode-sensitive token because :root[data-theme="light"] (0,2,0) outranks the bare tenant selector (0,1,1). The double selector on the dark block keeps explicit data-theme="dark" at (0,2,1) for future-proofing. */ html[data-tenant="dot"], html[data-tenant="dot"][data-theme="dark"] { color-scheme: dark; --bg: #060a08; /* green-black night */ --bg-elev: #0b120e; --bg-alt: #081009; --card: #0b120e; --border: rgba(159, 187, 170, .12); --border-strong: rgba(159, 187, 170, .24); --text: #f2f7f4; /* 17.4:1 on bg */ --text-muted: #b9c9c0; /* 10.6:1 */ --text-dim: #8fa89b; /* 6.3:1 */ --accent: #6ef7a0; /* neon mint — 12.9:1 on bg */ --accent-strong: #4ade80; /* deeper mint (hover) — 9.9:1 */ --good: #34d399; --warn: #ffd66e; /* design gold */ --danger: #f87171; --premium: #ffd66e; /* premium = gold in the dot brand */ --surface-faint: rgba(11, 18, 14, .35); --surface-card: rgba(11, 18, 14, .40); --surface-mid: rgba(11, 18, 14, .55); --surface-strong: rgba(11, 18, 14, .65); --surface-elevated: rgba(11, 18, 14, .68); --surface-deep: rgba(6, 10, 8, .65); --header-bg: rgba(6, 10, 8, .85); --mobile-cta-bg: rgba(6, 10, 8, .65); --surface-tint: rgba(226, 242, 232, .04); --surface-tint-2: rgba(226, 242, 232, .03); --shadow: 0 24px 80px rgba(0, 0, 0, .45); --body-bg-gradient: radial-gradient(circle at top left, rgba(110, 247, 160, .09), transparent 36rem), radial-gradient(circle at bottom right, rgba(12, 143, 78, .10), transparent 32rem); /* Every --accent-wash-NN re-tints automatically off this base. */ --accent-wash-base: #6ef7a0; --accent-contrast: #04110a; /* near-black green ink on mint — 12.3:1 */ /* Mode-invariant accent family (mirrors pay/latino: not re-declared in the light block). */ --accent-solid: #0c8f4e; /* white ink on it: 4.7:1 */ --accent-ink: #0a7a42; --accent-tint: #e7f8ee; /* pale mint */ --accent-tint-2: #f0fbf4; --accent-tint-strong: #a9ecc4; --accent-tint-ink: #eafff2; --accent-deep: #0d2a1b; /* deep green surface */ --accent-deep-2: #092014; --font: 'Space Grotesk', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Dot daylight. Re-declares every mode-sensitive token the dark block or pay's :root[data-theme="light"] sets. */ html[data-tenant="dot"][data-theme="light"] { color-scheme: light; --bg: #f3f7f4; /* mint-tinted paper */ --bg-elev: #ffffff; --bg-alt: #e9f0eb; --card: #ffffff; --border: rgba(12, 20, 16, .10); --border-strong: rgba(12, 20, 16, .18); --text: #0c1410; /* 17.9:1 on bg */ --text-muted: #3d5246; /* 9.1:1 */ --text-dim: #5f7568; /* 5.5:1 */ --accent: #0c8f4e; /* forest mint — 4.6:1 on bg */ --accent-strong: #0a7a42; /* hover — 5.6:1 */ --good: #059669; --warn: #a67a00; --danger: #b91c1c; --premium: #a67a00; /* gold ink for light mode — 4.9:1 */ --surface-faint: rgba(255, 255, 255, .70); --surface-card: rgba(255, 255, 255, .85); --surface-mid: rgba(255, 255, 255, .90); --surface-strong: rgba(255, 255, 255, .95); --surface-elevated: #ffffff; --surface-deep: #ffffff; --header-bg: rgba(243, 247, 244, .88); --mobile-cta-bg: rgba(243, 247, 244, .92); --surface-tint: rgba(12, 20, 16, .045); --surface-tint-2: rgba(12, 20, 16, .03); --shadow: 0 12px 40px rgba(12, 20, 16, .08); --body-bg-gradient: radial-gradient(circle at top left, rgba(12, 143, 78, .07), transparent 36rem), radial-gradient(circle at bottom right, rgba(110, 247, 160, .08), transparent 32rem); --accent-wash-base: #0c8f4e; --accent-contrast: #ffffff; /* white ink on forest mint — 4.7:1 */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--body-bg-gradient), var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover, a:focus-visible { color: var(--accent-strong); text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } /* -------- Themed form controls (base) -------- Low-specificity defaults so any control NOT covered by a component class (settings rename, API-key environment, profile language, communication, admin filters, …) still matches the dark theme instead of the browser's system chrome. Placed early + element/attr specificity, so the richer component rules (.form, .form-field, .account-form, .apply-field, .search …) still win on ties. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], textarea, select { background-color: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; padding: .55rem .75rem; transition: border-color .15s ease, box-shadow .15s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus, select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-15); } input::placeholder, textarea::placeholder { color: var(--text-dim); } /* Custom caret so selects don't show the heavy native chrome. */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: .7rem; } /* The .select-wrap component overlays its own ::after caret — drop ours. */ .select-wrap select { background-image: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; } /* HEADER */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); background: var(--header-bg); } .brand { color: var(--text); font-weight: 700; letter-spacing: -.02em; font-size: 1.15rem; } .brand-dot { color: var(--accent); } .brand:hover { color: var(--text); text-decoration: none; } .primary-nav { display: flex; gap: 1.5rem; align-items: center; } .primary-nav a { color: var(--text-muted); font-size: .95rem; font-weight: 500; } .primary-nav a:hover { color: var(--text); text-decoration: none; } .nav-cta { border: 1px solid var(--border-strong); padding: .55rem 1rem; border-radius: 999px; color: var(--text) !important; } .nav-cta:hover { border-color: var(--accent); } @media (max-width: 720px) { /* Mobile: hide the secondary nav (Registered / Pricing / How / FAQ) — only the right-aligned "Domain ideas" CTA button stays, plus the new hamburger button. The `>` combinator scopes this to direct children so the same labels rendered inside #nav-mobile-panel are not hidden. */ .primary-nav > a:not(.nav-cta) { display: none; } } /* ====================== MOBILE HAMBURGER MENU ====================== Visible only ≤720px. Tap reveals a sibling-of-
drop panel with the full primary nav + account state + locale picker + theme toggle. Companion JS: /assets/js/nav-mobile.js. */ .nav-hamburger { display: inline-flex; /* unified: visible on desktop AND mobile */ background: transparent; border: 1px solid var(--border-strong); border-radius: 10px; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; margin-inline-start: .25rem; -webkit-tap-highlight-color: transparent; } .nav-hamburger:hover { color: var(--text); border-color: var(--accent); } .nav-hamburger[aria-expanded="true"] { color: var(--text); border-color: var(--accent); } .nav-hamburger-icon-bars, .nav-hamburger-icon-close { display: none; } .nav-hamburger[aria-expanded="false"] .nav-hamburger-icon-bars { display: block; } .nav-hamburger[aria-expanded="true"] .nav-hamburger-icon-close { display: block; } /* Drop-panel. CRITICAL BUG FIX (commit after 299f586): the panel is `position: fixed` covering most of the viewport (top:64px → bottom). The earlier version relied on `display: block` (set by the ≤720px media query below) plus `opacity: 0` to be "hidden". But opacity:0 does NOT disable clicks — so on mobile the invisible panel was eating every tap on FAQ summaries, hero search, etc. below the header. Fix: combine `visibility: hidden + pointer-events: none` for the off state so the panel is not in the accessibility tree and does not capture clicks. visibility transitions in via 0s delay; out via 0s delay AFTER the opacity transition finishes, so the slide-up animation still plays cleanly. */ .nav-mobile-panel { position: fixed; top: 64px; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 16px 32px rgba(0, 0, 0, .35); padding: 1rem 1.25rem 1.5rem; max-height: calc(100dvh - 64px); overflow-y: auto; z-index: 60; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s; } .nav-mobile-panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .18s ease, opacity .18s ease, visibility 0s; } /* No-JS fallback: keep the panel fully out of layout until JS removes the `hidden` attr. (User-agent rule for [hidden] would normally handle this, but author rules can shadow it; this is defensive.) */ .nav-mobile-panel[hidden] { display: none; } /* Desktop (≥721px): the hamburger opens a COMPACT right-anchored dropdown (the account menu) instead of a full-width sheet. The inline marketing links already show in the bar, so hide the panel's duplicate link list. */ @media (min-width: 721px) { .nav-mobile-panel { position: fixed; /* viewport-anchored — header is sticky, panel stays put on scroll */ left: auto; right: clamp(1rem, 4vw, 3rem); top: 60px; width: min(340px, calc(100vw - 2rem)); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 20px 48px rgba(0, 0, 0, .45); background: var(--surface-elevated); backdrop-filter: blur(14px); max-height: calc(100dvh - 80px); } .nav-mobile-panel .nav-mobile-links { display: none; } } .nav-mobile-links { list-style: none; padding: 0; margin: 0 0 1rem; } .nav-mobile-links li { margin: 0; } .nav-mobile-links a { display: block; padding: .85rem .25rem; /* ≥44px tap target */ border-bottom: 1px solid var(--border); font-size: 1.05rem; color: var(--text); } .nav-mobile-links a[aria-current="page"] { color: var(--accent); } .nav-mobile-cta { margin-top: .5rem; border-bottom: none !important; font-weight: 600; } .nav-mobile-section { margin-top: 1.25rem; } .nav-mobile-section h3 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 0 0 .6rem; } .nav-mobile-section a { display: block; padding: .55rem 0; font-size: .98rem; color: var(--text); } .nav-mobile-account-chip { font-size: .85rem; color: var(--text-muted); padding: .25rem 0 .5rem; word-break: break-all; } /* Locale switcher rendered inside the panel — let the existing
markup keep its own styles but ensure it doesn't pick up the section-link padding rule above (which would double-pad). */ .nav-mobile-section .locale-switcher, .nav-mobile-section details { padding: 0; } .nav-mobile-section .locale-switcher a, .nav-mobile-section details a { padding: .45rem 0; } /* Inside the nav dropdown the locale list must flow IN-LINE, not as an absolute popover — otherwise it escapes the panel and gets clipped by its overflow (the desktop compact dropdown showed the languages cut off on the right and unclickable). Render the options stacked below the summary so they're always reachable. */ .nav-mobile-section .locale-menu { position: static; inset: auto; margin-top: .35rem; min-width: 0; padding: 0; border: none; background: transparent; box-shadow: none; } .nav-mobile-section .locale-menu a { white-space: normal; padding: .5rem .25rem; } .nav-mobile-theme { display: flex; gap: .5rem; } .nav-mobile-theme button { flex: 1; padding: .6rem .75rem; border-radius: 10px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); font-size: .92rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-mobile-theme button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: rgba(96, 165, 250, .08); } @media (max-width: 720px) { .nav-hamburger { display: inline-flex; } /* Panel visibility is driven by visibility + opacity above, NOT by display:block in a media query — see the bug-fix comment in the .nav-mobile-panel rule. */ } /* ==================== /MOBILE HAMBURGER MENU ===================== */ /* ====================== ACCOUNT-AREA UX OVERHAUL =================== Sidebar nav (role-aware) + orders card/table view toggle + filter chips + notifications list. Used across /account/*. Companion JS: /assets/js/account-view.js. */ /* ---- Shell: sidebar + main side-by-side on desktop, stacked ≤720 ---- */ .account-shell { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; width: min(100%, 1240px); margin: 0 auto; /* Outer padding matches what .account-main used to apply on its own — since we override main's padding to 0 inside the shell (next rule), the visual rhythm stays identical to pre-shell pages. */ padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) 3rem; } .account-shell-nosidebar { grid-template-columns: 1fr; } /* Critical override: the existing .account-main rule (around line 2395) was written for a single-column 980px-centered page and would double- pad inside the new grid cell and clamp width awkwardly. Reset to stretch-and-flow within the grid; .account-card siblings still stack with gap thanks to the inherited display:grid + gap:1.25rem below. */ .account-shell .account-main { max-width: none; margin: 0; padding: 0; min-width: 0; /* prevent grid overflow blowout */ display: grid; gap: 1.25rem; /* preserved from original .account-main rule */ } /* Without a sidebar (login/magic pages), restore the centered 980px feel so those flows don't suddenly look full-width. */ .account-shell-nosidebar .account-main { max-width: 980px; margin: 0 auto; } .account-sidebar { display: flex; flex-direction: column; gap: .25rem; align-self: start; position: sticky; top: 1rem; padding: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } /* Staff My-account / Admin mode toggle — segmented control at the top of the sidebar (and inside the mobile hamburger panel). */ .account-mode-toggle { display: flex; gap: .2rem; padding: .2rem; margin-bottom: .4rem; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; } .account-mode-seg { flex: 1 1 0; text-align: center; padding: .35rem .5rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; } .account-mode-seg:hover { color: var(--text); } .account-mode-seg.is-active { background: var(--accent); color: var(--accent-contrast); } .nav-mobile-mode { margin: 0 0 .75rem; max-width: 22rem; } .account-sidebar-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .85rem; border-radius: 8px; color: var(--text-muted); font-size: .95rem; text-decoration: none; } .account-sidebar-link:hover { background: rgba(96, 165, 250, .06); color: var(--text); text-decoration: none; } .account-sidebar-link.is-active { background: rgba(96, 165, 250, .1); color: var(--text); font-weight: 600; } .account-sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 .45rem; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: .75rem; font-weight: 700; line-height: 1; } /* On mobile the sidebar becomes a horizontal scroll-strip pinned to the top of the content. Tap-target ≥44px. */ @media (max-width: 720px) { .account-shell { grid-template-columns: 1fr; gap: .75rem; padding: .75rem .75rem 1rem; } .account-sidebar { flex-direction: row; position: static; overflow-x: auto; padding: .4rem; gap: .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .account-sidebar-link { flex-shrink: 0; padding: .55rem .75rem; min-height: 44px; white-space: nowrap; } } /* ---- Orders toolbar: filter chips + view toggle ---- */ .orders-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; } .orders-toolbar-side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .orders-filter-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .orders-filter-chip { display: inline-flex; align-items: center; padding: .45rem .85rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .9rem; color: var(--text-muted); background: transparent; text-decoration: none; } .orders-filter-chip:hover { color: var(--text); border-color: var(--accent); text-decoration: none; } .orders-filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; } .orders-filter-chip-attn { /* "Needs attention" — slight warning hue */ border-color: rgba(245, 158, 11, .4); color: #f59e0b; } .orders-filter-chip-attn.is-active { background: #f59e0b; border-color: #f59e0b; color: #1c1410; } .orders-view-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; } .orders-view-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .75rem; background: transparent; border: none; border-right: 1px solid var(--border-strong); color: var(--text-muted); font-size: .85rem; cursor: pointer; } .orders-view-btn:last-child { border-right: none; } .orders-view-btn:hover { color: var(--text); } .orders-view-btn[aria-pressed="true"] { background: rgba(96, 165, 250, .12); color: var(--text); } .orders-view-label { display: inline; } @media (max-width: 520px) { /* Hide labels on very narrow phones — icons alone are enough. */ .orders-view-label { display: none; } } /* ---- Filter bar collapse on mobile (admin page) ---- */ .account-filter-bar-wrap { margin: 0; } .account-filter-bar-wrap > .account-filter-bar { margin-top: .5rem; } .account-filter-bar-summary { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; font-size: .9rem; color: var(--text-muted); list-style: none; } .account-filter-bar-summary::-webkit-details-marker { display: none; } .account-filter-bar-summary:hover { color: var(--text); border-color: var(--accent); } /* ---- Orders container: cards vs table via data-view attr ---- */ .orders-container > .orders-card-list, .orders-container > .account-orders { display: none; } .orders-container[data-view="cards"] > .orders-card-list { display: flex; } .orders-container[data-view="table"] > .account-orders { display: table; } .orders-card-list { list-style: none; padding: 0; margin: 0; flex-direction: column; gap: .65rem; } .orders-card { position: relative; /* anchor for the stretched "Open" link */ border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: .85rem 1rem; color: var(--text); transition: border-color .12s ease, transform .12s ease; } .orders-card:hover { border-color: var(--accent); } .orders-card.has-unread { border-left: 3px solid var(--accent); } .orders-card-row1 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; } .orders-card-domain { font-size: 1.05rem; } .orders-card-row2, .orders-card-row3 { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .88rem; color: var(--text-muted); } .orders-card-row2 { margin-bottom: .2rem; } .orders-card-amount { color: var(--text); font-weight: 600; } .orders-card-appraised { color: var(--text-dim); } /* Footer actions: Pay now (real button) + Open (stretched over the card). */ .orders-card-actions { display: flex; align-items: center; gap: .65rem; margin-top: .7rem; } .orders-card-open { color: var(--accent); text-decoration: none; font-weight: 600; } .orders-card-open::after { content: ""; position: absolute; inset: 0; border-radius: 10px; } .orders-card .order-pay-now { position: relative; z-index: 1; } /* above the stretched link */ /* ---- Notifications list ---- */ .notifications-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .notifications-item { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .notifications-item.is-critical { border-left: 3px solid #ef4444; } .notifications-item.is-warn { border-left: 3px solid #f59e0b; } .notifications-item.is-info { border-left: 3px solid var(--accent); } .notifications-item-link { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; color: var(--text); text-decoration: none; } .notifications-item-link:hover { background: rgba(96, 165, 250, .04); text-decoration: none; } .notifications-item-message { flex: 1; } .notifications-item-time { font-size: .8rem; color: var(--text-muted); white-space: nowrap; } .notifications-item-cta { color: var(--text-muted); font-size: 1.2rem; } .notifications-actions { margin-top: 1rem; } /* ---- Profile form ---- */ .profile-form { margin: 0; } .profile-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; } .profile-form-actions { margin-top: 1.25rem; } .form-field-hint { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .25rem; } @media (max-width: 720px) { .profile-form-grid { grid-template-columns: 1fr; } } /* ---- /account/settings.php — API keys + (future) sections ---- */ .settings-section { margin-top: 1.75rem; } .settings-section > h2 { margin: 0 0 .4rem; font-size: 1.15rem; } .settings-section-intro { color: var(--text-muted); font-size: .9rem; margin: 0 0 1rem; } .settings-section-intro code, .settings-table code, .api-key-reveal-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; } .settings-empty { color: var(--text-muted); font-style: italic; } /* Reveal block — the just-created key, shown once. */ .api-key-reveal { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 12px; padding: .85rem 1rem; margin: 0 0 1.25rem; } .api-key-reveal-label { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; } .api-key-reveal-value { display: block; word-break: break-all; background: var(--surface-2, rgba(0,0,0,.25)); padding: .55rem .7rem; border-radius: 8px; user-select: all; } /* Keys table */ .settings-table-wrap { overflow-x: auto; } .settings-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .settings-table th, .settings-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); vertical-align: top; } .settings-table th { font-weight: 600; color: var(--text-muted); font-size: .8rem; } .settings-table tr.is-revoked { opacity: .55; } .settings-muted { color: var(--text-muted); } .settings-scopes-cell { max-width: 320px; } .scope-chip { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; padding: .12rem .45rem; margin: .1rem .2rem .1rem 0; border-radius: 999px; background: var(--surface-2, rgba(255,255,255,.08)); color: var(--text, #e7ecf3); } .scope-chip-restricted { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #f8d488; } .settings-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; } .settings-badge-on { background: color-mix(in srgb, #22c55e 22%, transparent); color: #86efac; } .settings-badge-off { background: color-mix(in srgb, #ef4444 18%, transparent); color: #fca5a5; } .settings-badge-pending { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #f8d488; } .settings-inline-form { display: inline; margin: 0; } .btn-link-danger { background: none; border: 0; padding: 0; cursor: pointer; color: #fca5a5; font-size: .85rem; text-decoration: underline; } .btn-link-danger:hover { color: #f87171; } /* Create-key disclosure */ .settings-create { margin-top: 1.5rem; } .settings-create > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; } .settings-create-form { margin-top: .75rem; max-width: 640px; } /* Give the submit button breathing room under the field (2FA "Verify & turn on" / API "Create key" were sitting flush against the input). */ .settings-create-form .btn { margin-top: 1rem; } .settings-scope-picker { border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 12px; padding: .85rem 1rem; margin: 1rem 0; } .settings-scope-picker legend { font-weight: 600; padding: 0 .35rem; } .settings-scope-option { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .5rem; padding: .35rem 0; } .settings-scope-desc { color: var(--text-muted); font-size: .82rem; } .settings-scope-grouphead { margin: 1rem 0 .35rem; font-size: .82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .settings-scope-note { color: var(--text-muted); font-size: .8rem; margin: .75rem 0 0; } .settings-create-actions { margin-top: 1rem; } @media (max-width: 720px) { .settings-scope-option { grid-template-columns: auto 1fr; } .settings-scope-option .settings-scope-desc { grid-column: 1 / -1; } } /* Saved payment methods (Phase 4) */ .pm-add { margin-top: 1.25rem; } .pm-add-form { margin-top: 1rem; max-width: 480px; } .pm-card-element { border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 10px; padding: .8rem .9rem; background: var(--surface-2, rgba(255,255,255,.04)); } .pm-add-actions { display: flex; gap: .6rem; margin-top: .85rem; } .pm-add-status { margin: .6rem 0 0; font-size: .85rem; color: var(--text-muted); min-height: 1.2em; } /* ---- Hamburger badge (cross-cuts with the mobile-nav block above) ---- */ .nav-hamburger { position: relative; } .nav-hamburger-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #ef4444; /* red — "act on this" */ color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; pointer-events: none; } /* ==================== /ACCOUNT-AREA UX OVERHAUL ================== */ /* HERO */ .hero { width: min(100%, 1080px); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) 2rem; text-align: center; } .hero-2col { text-align: left; } .hero-2col .eyebrow { margin: 0 0 1rem; } .hero-2col h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); } .hero-2col .lede { margin: 1rem 0 0; max-width: none; } .hero-2col .trust-line { margin: 1rem 0 0; max-width: none; color: var(--text-muted); } .hero-2col .deadline-line { margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid rgba(251, 191, 36, .25); background: rgba(251, 191, 36, .06); border-radius: 14px; font-size: .9rem; color: var(--text-muted); } .hero-2col .deadline-line strong { color: var(--text); } .deadline-sep { opacity: .5; margin: 0 .35rem; } /* ---------- HERO SEARCH CARD (clean, single-container) ---------- */ .hero-search-card { /* align-self: start lives in the ≥880px grid rule ONLY. In the mobile flex column it made the card shrink to content width — invisible on sunrise .pay (the long pre-pay note stretches it) but the GA homepage hides those lines, so domain.latino's card collapsed to placeholder width (operator bug report 2026-07-10). */ background: linear-gradient(180deg, var(--surface-strong), var(--surface-card)); border: 1px solid var(--border-strong); border-radius: 22px; padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--shadow); margin: 0; max-width: none; display: flex; flex-direction: column; gap: .9rem; } .hero-search-label { display: block; font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: -.005em; } /* Single input field; .pay suffix overlays inside via absolute. */ .hero-search-field { position: relative; } .hero-search-field input { width: 100%; background: var(--mobile-cta-bg); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 1rem 4.25rem 1rem 1.1rem; font-size: 1.05rem; line-height: 1.2; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; } .hero-search-field input::placeholder { color: var(--text-dim); } .hero-search-field input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-18); } .hero-search-suffix { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 700; font-size: 1.05rem; pointer-events: none; letter-spacing: .01em; } .hero-search-submit { width: 100%; padding: 1rem 1.25rem; border-radius: 12px; font-size: 1rem; margin: 0; } .hero-search-note { color: var(--text-dim); font-size: .85rem; line-height: 1.55; margin: 0; } /* Secondary "Browse all curated .PAY names →" link inside the hero search card. Important on mobile, where the header's non-CTA nav links are hidden and this is the explicit explore affordance. */ .hero-search-browse { margin: .25rem 0 0; font-size: .9rem; text-align: center; } .hero-search-browse a { color: var(--accent); font-weight: 600; text-decoration: none; } .hero-search-browse a:hover { text-decoration: underline; } .hero-search-meta { color: var(--text-dim); font-size: .85rem; margin: 0; min-height: 1.15rem; } .hero-search-meta .countdown { font-variant-numeric: tabular-nums; } .hero-search-meta.is-final { color: var(--warn); } .hero-search-meta.is-closed { color: var(--text-muted); } @media (min-width: 880px) { .hero-2col { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .hero-2col .hero-search-card { align-self: start; } } /* Mobile: reorder so the search card appears between subhead and price/deadline */ @media (max-width: 879px) { .hero-2col { display: flex; flex-direction: column; gap: 1rem; } .hero-2col .hero-copy { display: contents; } .hero-2col .eyebrow { order: 1; margin: 0; } .hero-2col h1 { order: 2; margin: 0; } .hero-2col .lede { order: 3; margin: 0; } .hero-2col .hero-search-card { order: 4; margin: 0; align-self: stretch; width: 100%; } .hero-2col .trust-line { order: 5; margin: 0; } .hero-2col .deadline-line{ order: 6; margin: 0; } } .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 700; margin: 0 0 1rem; } h1 { margin: 0; font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; } .lede { margin: 1.25rem auto 0; max-width: 38rem; color: var(--text-muted); font-size: clamp(1rem, 1.6vw, 1.15rem); } .lede-narrow { max-width: 42rem; margin: 0 auto 2rem; color: var(--text-muted); } .trust-line { margin: 1rem auto 2rem; color: var(--text-dim); font-size: .95rem; max-width: 42rem; } /* SEARCH */ html { scroll-behavior: smooth; } .search { margin: 1rem auto 1.5rem; max-width: 720px; padding: 0 .25rem; scroll-margin-top: 110px; } #search-result { scroll-margin-top: 110px; } #priority-form, #waitlist { scroll-margin-top: 90px; } @media (max-width: 700px) { .search, #search-result { scroll-margin-top: 80px; } } .search-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: .35rem .35rem .35rem 1.25rem; box-shadow: var(--shadow); } .search-prefix { display: none; } .search input[type="text"] { flex: 1 1 0; min-width: 0; background: transparent; border: 0; outline: 0; padding: 1rem 0; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--text); } .search-suffix { color: var(--accent); font-weight: 600; padding: 0 .75rem 0 .25rem; font-size: 1.1rem; flex: 0 0 auto; } .search .btn-primary { padding: .85rem 1.5rem; border-radius: 999px; flex: 0 0 auto; } .search-note { color: var(--text-dim); font-size: .85rem; margin: .75rem 0 0; padding: 0 .5rem; } .search:focus-within .search-row { border-color: var(--accent); } /* Mobile: stack the submit button below the input + suffix */ @media (max-width: 600px) { .search-row { padding: .5rem .75rem; border-radius: 20px; row-gap: .35rem; } .search input[type="text"] { padding: .85rem 0; font-size: 1rem; } .search-suffix { padding-right: 0; } .search .btn-primary { flex: 1 1 100%; width: 100%; padding: .9rem 1rem; margin-top: .15rem; } } /* URGENCY */ .urgency { max-width: 720px; margin: 1rem auto 0; padding: .9rem 1.1rem; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .25); border-radius: var(--radius); color: var(--text); font-size: .92rem; } .urgency.is-final { background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .35); } .urgency.is-closed { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .25); color: var(--text-muted); } .urgency-sep { opacity: .5; margin: 0 .35rem; } .countdown { margin-top: .35rem; color: var(--text-dim); font-size: .85rem; font-variant-numeric: tabular-nums; } /* PRICING MINI */ .pricing-mini { display: inline-flex; gap: .75rem; align-items: baseline; margin: 1.25rem auto 0; padding: .75rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-card); max-width: 100%; } .pricing-mini-amount { font-weight: 700; color: var(--accent); white-space: nowrap; } .pricing-mini-text { color: var(--text-muted); font-size: .9rem; } @media (max-width: 600px) { .pricing-mini { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; border-radius: 16px; padding: .8rem 1rem; text-align: left; } .pricing-mini-text { font-size: .85rem; line-height: 1.4; } } /* RESULT */ .result { width: min(100%, 720px); margin: 1.5rem auto 0; padding: 0 1rem; } .result.hidden { display: none; } .result-card { padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--card); text-align: left; /* Breathing room above the serape section divider that follows the hero (operator screenshot 2026-07-30: the card sat nearly flush on it). */ margin-bottom: 2.5rem; } .result-card h3 { margin: 0 0 .5rem; font-size: 1.15rem; } .result-card.good { border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .06); } .result-card.premium { border-color: rgba(192, 132, 252, .45); background: rgba(192, 132, 252, .06); } .result-card.warn { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .06); } .result-card.neutral { background: rgba(148, 163, 184, .06); } .result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } .result-fineprint { color: var(--text-dim); font-size: .8rem; margin-top: 1rem; } .result-included-inline { color: var(--text-muted); font-weight: 400; } .result-premium-explainer { margin: .5rem 0 1rem; color: var(--text-muted); font-size: .95rem; } .result-breakdown { width: 100%; border-collapse: collapse; margin: .25rem 0 1rem; font-size: .95rem; } .result-breakdown td { padding: .55rem .25rem; border-bottom: 1px solid var(--border); color: var(--text-muted); } .result-breakdown td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .result-breakdown-total td { border-bottom: 0; padding-top: .85rem; font-size: 1.05rem; color: var(--text); } .result-breakdown-total td:last-child { color: var(--premium); font-size: 1.15rem; } .result-tier { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; background: rgba(192, 132, 252, .15); color: var(--premium); border: 1px solid rgba(192, 132, 252, .35); border-radius: 999px; font-size: .72rem; font-weight: 600; } .result-price { font-size: 1rem; margin: .75rem 0 .25rem; } .result-included { list-style: none; padding: 0; margin: .5rem 0 1rem; } .result-included li { position: relative; padding: .35rem 0 .35rem 1.5rem; color: var(--text-muted); font-size: .95rem; } .result-included li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 1rem; height: 1rem; background: var(--good); mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* SECTIONS */ .section { padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem); max-width: 1080px; margin: 0 auto; } .section-alt { background: linear-gradient(180deg, transparent, var(--bg-alt) 30%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); max-width: none; } .section-alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; } /* Higher-specificity override so .faq's own 760px max-width wins when the FAQ section also has .section-alt (which would otherwise stretch to 1080). */ .section-alt > .faq { max-width: 760px; } /* margin: 0 auto 1.5rem (not 0 0 1.5rem) so the h2 stays horizontally centered inside .section-alt at any viewport width. */ .section h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 auto 1.5rem; letter-spacing: -.02em; text-align: center; } /* CARDS */ .cards-3, .cards-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .card { padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); } .card h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--accent); } .card p { margin: 0; color: var(--text-muted); font-size: .95rem; } /* PRICING CARD */ .pricing-card { max-width: 560px; margin: 0 auto; padding: 2rem; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow); } .pricing-amount { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; color: var(--accent); } .pricing-label { color: var(--text-muted); margin-bottom: 1.5rem; } .pricing-includes { list-style: none; margin: 0 0 1.5rem; padding: 0; text-align: left; } .pricing-includes li { padding: .55rem 0 .55rem 1.8rem; position: relative; border-bottom: 1px solid var(--border); font-size: .95rem; } .pricing-includes li:last-child { border-bottom: 0; } .pricing-includes li::before { content: ""; position: absolute; left: 0; top: .9rem; width: 1rem; height: 1rem; background: var(--accent); mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .pricing-premium-note { color: var(--text-dim); font-size: .9rem; } .legal-note { color: var(--text-dim); font-size: .8rem; margin-top: 1rem; } /* STEPS — number generated by CSS counter so screen readers / extractors don't see "1. 1" */ .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; } .steps li { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; counter-increment: step; } .steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--accent-wash-15); color: var(--accent); font-weight: 700; margin-bottom: .75rem; font-size: .95rem; } .steps h3 { margin: 0 0 .35rem; font-size: 1rem; } .steps p { margin: 0; color: var(--text-muted); font-size: .92rem; } /* FAQ */ .faq { max-width: 760px; margin: 0 auto; } .faq details { border-bottom: 1px solid var(--border); padding: 1rem 0; } .faq summary { cursor: pointer; font-weight: 600; list-style: none; padding-right: 2rem; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.4rem; color: var(--accent); line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq p { color: var(--text-muted); margin: .6rem 0 0; } /* LEGAL STRIP */ .legal-strip { text-align: center; padding: 1.5rem clamp(1rem, 4vw, 3rem); } .legal-strip p { color: var(--text-dim); font-size: .9rem; max-width: 680px; margin: 0 auto; } .terms-fold { max-width: 760px; margin: 0 auto; text-align: left; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-faint); } .terms-fold > summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 600; color: var(--text-muted); position: relative; } .terms-fold > summary::-webkit-details-marker { display: none; } .terms-fold > summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.25rem; } .terms-fold[open] > summary::after { content: "–"; } .terms-fold-body { padding: 0 1.25rem 1.25rem; color: var(--text-dim); font-size: .9rem; } .terms-fold-body p { margin: .5rem 0; } .terms-fold-body a { color: var(--accent); } .eligibility-note { max-width: 760px; margin: 1.5rem auto 0; padding: .85rem 1rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); font-size: .9rem; text-align: center; } /* FORMS */ .forms-wrap { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; } .forms-wrap-single { max-width: 720px; } @media (min-width: 960px) { .forms-wrap:not(.forms-wrap-single) { grid-template-columns: 2fr 1fr; align-items: start; } } /* MULTI-STEP FORM */ .form-multistep .form-step { border: 0; padding: 0; margin: 0; } .form-multistep .form-step[hidden] { display: none; } .form-step-intro { color: var(--text-muted); font-size: .9rem; margin: 0 0 1rem; } .grid-span-2 { grid-column: 1 / -1; } .field-hint { color: var(--text-dim); font-size: .8rem; margin-top: .25rem; display: block; } .step-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; justify-content: flex-end; } .step-actions .btn { flex: 0 0 auto; } .step-actions .btn-secondary { margin-right: auto; } @media (max-width: 600px) { .step-actions { flex-direction: column-reverse; } .step-actions .btn { width: 100%; } .step-actions .btn-secondary { margin-right: 0; } } /* WAITLIST STRIP */ .waitlist-strip { padding-top: 2.5rem; padding-bottom: 2.5rem; } .waitlist-inner { display: grid; gap: 1.25rem; align-items: center; grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; } .waitlist-inner > div h2 { margin: 0 0 .5rem; font-size: 1.35rem; text-align: left; } .waitlist-inner > div p { margin: 0; color: var(--text-muted); font-size: .95rem; } .waitlist-form { display: flex; gap: .5rem; flex-wrap: wrap; } .waitlist-form input[type="email"] { flex: 1 1 220px; min-width: 0; background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text); border-radius: 999px; padding: .8rem 1.2rem; } .waitlist-form input[type="email"]:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-15); } .waitlist-form .btn { flex: 0 0 auto; } .waitlist-form .form-status { flex: 1 1 100%; } @media (min-width: 760px) { .waitlist-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* TRUST CARDS */ .trust-cards .card { background: var(--surface-faint); } .trust-cards .card h3 { color: var(--accent); } /* STICKY MOBILE CTA */ .mobile-cta { display: none; position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--accent-strong); color: var(--accent-contrast); border: 0; border-radius: 999px; padding: .85rem 1.75rem; font-weight: 700; font-size: .95rem; white-space: nowrap; box-shadow: 0 10px 30px var(--accent-wash-35), 0 4px 12px rgba(0, 0, 0, .35); z-index: 40; transition: opacity .2s ease, transform .2s ease; text-decoration: none; } .mobile-cta:hover { color: var(--accent-contrast); text-decoration: none; } .mobile-cta.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); } @media (max-width: 700px) { .mobile-cta { display: inline-flex; } body { padding-bottom: 4.5rem; } } .form { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); } .form h2 { text-align: left; margin: 0 0 .5rem; } .form-intro { color: var(--text-muted); margin: 0 0 1.25rem; font-size: .95rem; } .form-compact { background: var(--surface-faint); } .grid-2 { display: grid; gap: .9rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .form label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--text-muted); } .form label.full { display: block; margin: .9rem 0 0; } .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea, .form input[type="file"] { background-color: var(--bg-elev); /* not shorthand — keep the global select caret */ border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: .65rem .8rem; font-size: .95rem; width: 100%; } .form select { padding-right: 2.2rem; } .form textarea { resize: vertical; min-height: 5rem; } .form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-15); } .consent { display: flex; flex-direction: row; gap: .6rem; align-items: flex-start; margin: 1rem 0; font-size: .85rem; color: var(--text-muted); } .consent input { margin-top: .2rem; } .form-status { min-height: 1.25rem; margin-top: .6rem; font-size: .9rem; } .form-status.is-ok { color: var(--good); } .form-status.is-error { color: var(--danger); } .form.is-disabled { opacity: .65; pointer-events: none; } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease; text-decoration: none; font-size: .95rem; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent-strong); color: var(--accent-contrast); border-color: var(--accent-strong); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn-secondary { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-secondary:hover { border-color: var(--accent); color: var(--text); } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* Inline text-link button (e.g. "Rename" next to the danger "Remove" link). Was undefined → showed the browser's grey system button. */ .btn-link { background: none; border: none; padding: 0; border-radius: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; text-decoration: none; } .btn-link:hover { color: var(--accent-strong); text-decoration: underline; } .btn-link:disabled { color: var(--text-dim); cursor: not-allowed; text-decoration: none; } /* Inline rename field in settings tables — themed by the base input rules; just constrain the width so it sits neatly next to the Rename link. */ .settings-inline-input { max-width: 16rem; } /* STATIC PAGES (privacy / terms / contact) */ .static-page { width: min(100%, 1080px); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem); } .static-hero { text-align: center; margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 640px; } .static-hero .eyebrow { margin: 0 0 .85rem; } .static-hero h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.02em; line-height: 1.05; } .static-hero .updated { margin: .85rem 0 0; color: var(--text-dim); font-size: .9rem; } .static-card { max-width: 760px; margin: 0 auto; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--shadow); } .static-card > :first-child { margin-top: 0; } .static-card > :last-child { margin-bottom: 0; } .static-card p, .static-card ul, .static-card ol { color: var(--text-muted); line-height: 1.65; font-size: 1rem; } .static-card p { margin: 0 0 1rem; } .static-card ul, .static-card ol { margin: 0 0 1.25rem 1.25rem; } .static-card li { margin-bottom: .35rem; } .static-card li strong { color: var(--text); } .static-card .legal-entity { display: block; background: var(--accent-wash-04); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.15rem; margin: .5rem 0 1.25rem; font-style: normal; color: var(--text); line-height: 1.6; font-size: .95rem; } .static-card .legal-entity a { color: var(--accent); } .static-card h2 { margin: 2.25rem 0 .75rem; font-size: 1.25rem; letter-spacing: -.01em; color: var(--text); scroll-margin-top: 90px; } .static-card h2:first-of-type { margin-top: 0; } .static-card a { color: var(--accent); } .static-card strong { color: var(--text); } .static-card em { color: var(--text-dim); font-style: italic; } .static-card hr { border: 0; border-top: 1px solid var(--border); margin: 1.75rem 0; } .contact-grid { max-width: 920px; margin: 0 auto; display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .contact-grid { grid-template-columns: 1.1fr 1fr; align-items: stretch; } } .contact-card { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: var(--shadow); } .contact-card h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--accent); } .contact-card p { color: var(--text-muted); margin: 0 0 1rem; line-height: 1.6; } .contact-email-card { display: flex; flex-direction: column; justify-content: center; text-align: center; background: linear-gradient(180deg, var(--accent-wash-10), var(--surface-mid)); border-color: var(--accent-wash-35); } .contact-account-tip { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border, rgba(148,163,184,.25)); font-weight: 600; color: var(--text, #0b1226); } .contact-account-tip a { color: var(--accent-solid); text-decoration: underline; } .contact-email-card .email-label { color: var(--text-muted); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .65rem; } .contact-email-card .email-link { display: inline-block; font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 700; color: var(--accent); word-break: break-all; margin: 0 0 .75rem; } .contact-email-card .response-time { color: var(--text-muted); font-size: .9rem; margin: 0; } .contact-note { max-width: 760px; margin: 1.5rem auto 0; padding: 1rem 1.25rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; color: var(--text-dim); font-size: .9rem; text-align: center; line-height: 1.55; } .static-cta { max-width: 760px; margin: 2rem auto 0; text-align: center; } /* On-page table of contents for long-form legal pages */ .toc-card { background: var(--surface-faint); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; } .toc-card-title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 .5rem; } .toc-card ol { margin: 0; padding-left: 1.25rem; color: var(--text-muted); font-size: .92rem; line-height: 1.7; } .toc-card a { color: var(--text-muted); } .toc-card a:hover { color: var(--accent); } /* APPLY WIZARD */ .apply-wrap { max-width: 720px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem); } /* Wizard progress: stacked circle + label per step. Connector line sits at the vertical center of the circles, BETWEEN them, never crossing through. Completed circles are clickable jump-back. Step numbering is generated by a CSS counter so when the optional Payment step is hidden, the remaining steps renumber automatically. */ .wizard-progress { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; align-items: flex-start; counter-reset: wnum; } .wizard-progress li:not([hidden]) { counter-increment: wnum; } .wizard-step-num::before { content: counter(wnum); } .wizard-progress li { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; font-size: .85rem; color: var(--text-dim); min-width: 0; padding: 0; border: 0; } /* Connector — drawn from the right edge of this circle to the left edge of the next one. Marker is 1.75rem wide; halve = .875rem. */ .wizard-progress li:not(:last-child)::after { content: ""; position: absolute; top: calc(.875rem - 1px); left: calc(50% + 1.1rem); right: calc(-50% + 1.1rem); height: 2px; background: var(--border); border-radius: 2px; } .wizard-progress li.is-done::after { background: var(--accent); } .wizard-progress li.is-current::after { background: var(--border); } .wizard-step-marker { width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text-muted); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: not-allowed; transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease; } .wizard-step-marker:not([disabled]) { cursor: pointer; } .wizard-step-marker:not([disabled]):hover { background: var(--accent-wash-25); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-wash-18); } .wizard-step-marker:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wizard-step-num, .wizard-step-check { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .wizard-step-check { width: 1rem; height: 1rem; display: none; } .wizard-progress li.is-current .wizard-step-marker { background: var(--accent-strong); color: var(--accent-contrast); border-color: var(--accent-strong); } .wizard-progress li.is-current { color: var(--text); } .wizard-progress li.is-done .wizard-step-marker { background: var(--accent-wash-15); color: var(--accent); border-color: var(--accent); } .wizard-progress li.is-done .wizard-step-num { display: none; } .wizard-progress li.is-done .wizard-step-check { display: inline-flex; } .wizard-progress li.is-done { color: var(--text-muted); } .wizard-step-label { margin-top: .45rem; padding: 0 .25rem; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .wizard-progress { margin-bottom: 1.25rem; } .wizard-step-label { font-size: .78rem; } } .apply-card { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); } .apply-card[hidden] { display: none; } .apply-card h1 { margin: 0 0 .75rem; font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: -.015em; } .apply-intro { color: var(--text-muted); margin: 0 0 1.5rem; } .apply-fineprint { color: var(--text-dim); font-size: .9rem; margin: -1rem 0 1.5rem; } .apply-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; } .apply-field-label { font-size: .85rem; color: var(--text-muted); } .apply-field input { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: .8rem 1rem; font-size: 1rem; } .apply-field input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-15); } .apply-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; justify-content: flex-end; align-items: center; } .apply-actions .btn { flex: 0 0 auto; } .apply-actions .btn-secondary { margin-right: auto; } .apply-actions .btn-link { background: transparent; border: 0; color: var(--accent); padding: .5rem .25rem; cursor: pointer; font-weight: 600; } .apply-actions .btn-link:disabled { color: var(--text-dim); cursor: not-allowed; } /* Secondary "trademark fast-track" opt-in under the pre-order forms */ .apply-alt-path { margin: 1.25rem 0 0; text-align: center; } .apply-alt-path .btn-link { background: transparent; border: 0; color: var(--accent); padding: .35rem .5rem; cursor: pointer; font-weight: 600; font-size: .95rem; } .apply-alt-path .btn-link:hover { text-decoration: underline; } @media (max-width: 600px) { .apply-actions { flex-direction: column-reverse; } .apply-actions .btn, .apply-actions .btn-link { width: 100%; } .apply-actions .btn-secondary { margin-right: 0; } .apply-actions .btn-link { padding: .5rem; } } .apply-status { min-height: 1.25rem; margin: .75rem 0 0; font-size: .9rem; color: var(--text-muted); } .apply-status.is-error { color: var(--danger); } .apply-status.is-ok { color: var(--good); } .apply-summary { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; padding: .9rem 1rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1.25rem; font-size: .9rem; color: var(--text-muted); } .apply-summary > div strong { color: var(--text); } .verified-badge { display: inline-flex; align-items: center; gap: .25rem; background: rgba(52, 211, 153, .15); color: var(--good); border: 1px solid rgba(52, 211, 153, .35); border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; } .trademark-choice, .choice-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; } .choice-card { text-align: left; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 14px; padding: 1.05rem 1.25rem; color: var(--text); cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .08s ease; } .choice-card:hover { border-color: var(--accent); background: var(--accent-wash-04); } .choice-card:active { transform: scale(0.995); } /* Direct-child > combinator so nested / tags inside the description text don't get forced onto their own lines (that's what was making the first-day card read like a bullet list with awkward orphan periods after "February–March 2027" and "80% refund"). */ .choice-card > strong { display: block; font-size: 1.02rem; margin-bottom: .3rem; } .choice-card > span { display: block; color: var(--text-muted); font-size: .9rem; line-height: 1.5; } .choice-card > span strong { color: var(--text); font-weight: 700; } .choice-card > span em { color: var(--accent); font-style: normal; font-weight: 600; } .choice-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .choice-card-quiet { background: transparent; border-style: dashed; opacity: .85; } .choice-card-quiet:hover { opacity: 1; } .apply-eyebrow { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .form-post-payment-hint { margin: 0 0 1rem; padding: .65rem .85rem; background: var(--accent-wash-05); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; } /* Pre-filled, read-only email on /apply.php when the visitor is already signed in. Visually clear that it's not editable, but still styled. */ input.is-prefilled, input[readonly].is-prefilled, input.is-locked, input[readonly].is-locked { background: var(--accent-wash-05); color: var(--text-muted); cursor: default; } input.is-locked { caret-color: transparent; } .apply-field-hint { font-size: .8rem; color: var(--text-dim); line-height: 1.45; } .apply-field-hint a { color: var(--accent); } .apply-link { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-wash-35); text-underline-offset: 3px; } .apply-link:hover { text-decoration-color: var(--accent); } .branch-cards { display: grid; gap: 1rem; } @media (min-width: 720px) { .branch-cards { grid-template-columns: 1fr 1fr; } } .branch-card h3 { color: var(--accent); margin: 0 0 .5rem; } .branch-card p { color: var(--text-muted); font-size: .95rem; margin: 0 0 .75rem; } .branch-card .result-fineprint { color: var(--text-dim); font-size: .8rem; } #waitlist-sub-form, #firstday-sub-form { margin-top: 1.25rem; } .cards-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* FOOTER */ .site-footer { border-top: 1px solid var(--border); padding: 2rem clamp(1rem, 4vw, 3rem); margin-top: 3rem; display: flex; flex-direction: column; gap: 1rem; color: var(--text-dim); font-size: .85rem; max-width: 1080px; margin-left: auto; margin-right: auto; } .footer-disclaimer { margin: 0; max-width: 80ch; line-height: 1.55; } .footer-disclaimer a { color: var(--accent); } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer-nav a { color: var(--text-muted); } .footer-copyright { margin: 0; color: var(--text-dim); font-size: .8rem; } /* Footer "Explore .PAY" keyword link cluster (internal linking / SEO). */ .footer-explore { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; } .footer-explore-label { color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .footer-explore a { color: var(--text-muted); } .footer-explore a:hover { color: var(--accent); } /* Breadcrumb trail (visible nav; schema emitted alongside via dp_breadcrumb). */ .dp-breadcrumb { margin: 0 0 1rem; font-size: .85rem; } .dp-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; } .dp-breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-dim); } .dp-breadcrumb li + li::before { content: "/"; color: var(--text-dim); } .dp-breadcrumb a { color: var(--text-muted); } .dp-breadcrumb a:hover { color: var(--accent); } .dp-breadcrumb [aria-current="page"] { color: var(--text-dim); } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transform: none; transition: none; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* /pricing.php — TIER CARDS */ .pricing-tier-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1080px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 880px) { .pricing-tier-grid { grid-template-columns: repeat(3, 1fr); } } .pricing-tier-card { display: flex; flex-direction: column; gap: .85rem; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--shadow); } .pricing-tier-card-featured { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-wash-08), var(--surface-strong)); } .pricing-tier-card header { margin: 0; } .pricing-tier-name { margin: 0; color: var(--text-muted); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; } .pricing-tier-price { margin: .25rem 0 .1rem; color: var(--accent); font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -.02em; line-height: 1; } .pricing-tier-tag { margin: 0; color: var(--text-muted); font-size: .85rem; } .pricing-tier-desc { color: var(--text-muted); font-size: .92rem; line-height: 1.55; margin: 0; } .pricing-tier-includes { list-style: none; padding: 0; margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.55; } .pricing-tier-includes li { position: relative; padding: .35rem 0 .35rem 1.5rem; } .pricing-tier-includes li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 1rem; height: 1rem; background: var(--good); mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .pricing-tier-footnote { color: var(--text-dim); font-size: .8rem; margin: .25rem 0 0; line-height: 1.5; } .pricing-tier-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .5rem; flex-wrap: wrap; } .pricing-tier-actions .btn { flex: 1 1 calc(50% - .25rem); text-align: center; padding: .65rem .85rem; font-size: .9rem; } @media (max-width: 480px) { .pricing-tier-actions .btn { flex: 1 1 100%; } } .pricing-premium-callout { max-width: 760px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); padding: 1rem 1.25rem; background: rgba(192, 132, 252, .08); border: 1px solid rgba(192, 132, 252, .25); border-radius: 14px; } .pricing-premium-callout p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.6; } .pricing-premium-callout strong { color: var(--premium); } .pricing-why { max-width: 1080px; margin: clamp(1.5rem, 3vw, 2.5rem) auto; } .pricing-why h2 { text-align: center; margin: 0 0 1.25rem; font-size: clamp(1.4rem, 2.5vw, 1.75rem); } .pricing-waitlist { max-width: 760px; margin: clamp(1.5rem, 3vw, 2.5rem) auto; padding: 1.25rem 1.5rem; background: var(--surface-mid); border: 1px solid var(--border); border-radius: 16px; } .pricing-waitlist h2 { margin: 0 0 .5rem; font-size: 1.25rem; text-align: left; } .pricing-waitlist p { color: var(--text-muted); margin: 0 0 .85rem; font-size: .92rem; line-height: 1.55; } .pricing-waitlist .waitlist-form { display: flex; gap: .5rem; flex-wrap: wrap; } .pricing-waitlist .waitlist-form input[type="email"] { flex: 1 1 220px; min-width: 0; background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text); border-radius: 999px; padding: .8rem 1.2rem; } .pricing-waitlist .waitlist-form .btn { flex: 0 0 auto; } .pricing-terms-wrap { max-width: 760px; margin: clamp(1.5rem, 3vw, 2.5rem) auto; } /* SEARCH-RESULT QUOTE TABS */ .result-tabbed { padding: 1.5rem; } .result-tabbed h3 { margin: 0 0 1.25rem; } .quote-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1.25rem; } .quote-tab { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); padding: .75rem .9rem; text-align: left; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .08s ease; display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .quote-tab:hover { border-color: var(--accent); } .quote-tab.is-active { background: var(--accent-wash-12); border-color: var(--accent); color: var(--text); } .quote-tab-title { font-weight: 600; font-size: .9rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; } .quote-tab-price { color: var(--accent); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .quote-tab.is-active .quote-tab-price { color: var(--text); } @media (max-width: 640px) { .quote-tabs { grid-template-columns: 1fr; } .quote-tab { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; } .quote-tab-price { font-size: 1rem; } } .quote-panel { background: var(--surface-faint); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; } .quote-explain { color: var(--text-muted); margin: 0 0 .75rem; font-size: .95rem; line-height: 1.55; } .quote-required { color: var(--warn); margin: 0 0 .75rem; font-size: .9rem; font-weight: 600; } .quote-panel .result-breakdown { margin: .25rem 0 1rem; } .quote-panel .result-fineprint { margin-top: .75rem; } /* ALREADY-REGISTERED TICKER (marquee) */ .ticker-section { margin: clamp(.5rem, 1.5vw, 1.25rem) 0; padding: .85rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-mid), var(--surface-faint)); /* Animated max-content tracks must never widen the document viewport. */ overflow-x: hidden; overflow-x: clip; } /* When the ticker is at the very top of
(above the hero), sit it flush with the sticky header without the extra top margin. */ .ticker-section-top { margin-top: 0; border-top: 0; } .ticker { position: relative; display: flex; align-items: center; gap: .85rem; width: min(100%, 1280px); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); } .ticker-label { flex: 0 0 auto; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--text-dim); padding-right: .85rem; border-right: 1px solid var(--border); white-space: nowrap; /* No background — the viewport's overflow:hidden already keeps chips out of the label area, so a solid swatch here just paints an awkward block on top of the ticker-section gradient. Inherit the gradient instead. */ background: transparent; z-index: 2; } /* When the ticker is an (CZDS count is populated) — the whole strip, label + chips, becomes the link to /registered. Keep the .ticker layout intact; just strip the default anchor styling and add a subtle hover on the label so it reads as clickable. */ a.ticker-link { text-decoration: none; color: inherit; cursor: pointer; } a.ticker-link:hover .ticker-label { color: var(--accent); border-right-color: var(--accent); } /* The viewport clips + masks the scrolling track; the label sits OUTSIDE the mask so the fade-out doesn't make the label disappear at the left edge. */ .ticker-viewport { flex: 1 1 0; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .ticker-track { display: flex; width: max-content; animation: dp-ticker-scroll 90s linear infinite; will-change: transform; } .ticker-viewport:hover .ticker-track, .ticker-viewport:focus-within .ticker-track { animation-play-state: paused; } .ticker-group { display: flex; gap: .6rem; padding-right: .6rem; } .ticker-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; background: var(--surface-mid); border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .ticker-chip .ticker-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 999px; background: var(--danger); box-shadow: 0 0 6px rgba(248, 113, 113, .55); flex: 0 0 auto; } @keyframes dp-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker-viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } } @media (max-width: 600px) { .ticker-section { padding: .55rem 0 .65rem; } /* Stack the label ABOVE the marquee on mobile so the moving chips get the full row width and don't get covered by the label. */ .ticker { flex-direction: column; align-items: stretch; gap: .35rem; padding: 0 .9rem; } .ticker-label { font-size: .62rem; padding-right: 0; border-right: 0; background: transparent; color: var(--text-dim); opacity: .85; } .ticker-viewport { /* In column-flex mode, the desktop `flex: 1 1 0` would set the cross axis (height) to flex-basis 0 and collapse the viewport, hiding the marquee. Reset to auto-height so the viewport sizes from the chip row inside. */ flex: 0 0 auto; width: 100%; /* Full-width marquee with a softer fade on both sides */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ticker-chip { font-size: .78rem; padding: .4rem .75rem; } .ticker-track { animation-duration: 60s; } } /* REDESIGNED TRADEMARK FORM */ .form-redesign { display: flex; flex-direction: column; gap: 1.25rem; } .form-redesign .form-section { border: 0; padding: 0; margin: 0; } .form-section-title { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--text-dim); font-weight: 700; margin: 0 0 .75rem; padding: 0; } .form-section-title .form-opt { color: var(--text-dim); font-weight: 400; } .form-section-tmch { background: var(--accent-wash-04); border: 1px solid var(--accent-wash-15); border-radius: 12px; padding: 1rem 1.1rem; } .form-grid { display: grid; gap: .9rem 1rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } } .form-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .form-field label, .form-field > label:first-child { font-size: .8rem; color: var(--text-muted); font-weight: 500; display: flex; align-items: baseline; gap: .35rem; } .form-field .form-req { color: var(--danger); font-weight: 700; } .form-field .form-opt { color: var(--text-dim); font-weight: 400; font-size: .75rem; } .form-field input[type="text"], .form-field input[type="tel"], .form-field input[type="email"], .form-field input[type="url"], .form-field textarea, .form-field .select-wrap select { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: .7rem .85rem; font-size: .95rem; width: 100%; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-dim); } .form-field input:focus, .form-field textarea:focus, .form-field .select-wrap select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-15); } .form-field textarea { resize: vertical; min-height: 5rem; font-family: inherit; } .form-hint { display: block; color: var(--text-dim); font-size: .75rem; margin-top: .15rem; } /* Custom select (uses a wrapper to overlay a caret) */ .select-wrap { position: relative; } .select-wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2.5rem; cursor: pointer; } .select-wrap::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .form-tmch-hint { margin: .65rem 0 0; font-size: .85rem; color: var(--accent); line-height: 1.5; } .form-tmch-hint.is-default { color: var(--text-dim); } /* Custom file input */ .file-input { display: inline-flex; align-items: center; gap: .85rem; padding: .55rem .85rem; background: var(--bg-elev); border: 1px dashed var(--border-strong); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; max-width: 100%; } .file-input:hover { border-color: var(--accent); background: var(--accent-wash-06); } .file-input input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } .file-input-btn { background: var(--accent-strong); color: var(--accent-contrast); font-weight: 600; font-size: .85rem; padding: .45rem .85rem; border-radius: 8px; flex: 0 0 auto; } .file-input-name { color: var(--text-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } /* PAYMENT STEP */ .payment-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 1.25rem; flex-wrap: wrap; } .payment-summary-label { display: block; color: var(--text-muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; } .payment-summary-amount { display: block; color: var(--accent); font-weight: 700; font-size: 1.6rem; line-height: 1.1; margin-top: .15rem; } .payment-summary-meta { color: var(--text-dim); font-size: .85rem; text-align: right; } .payment-summary-meta .verified-badge { margin-left: .25rem; } .payment-element { min-height: 180px; padding: 1rem; background: var(--mobile-cta-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; } .payment-element-loading, .payment-element-disabled { color: var(--text-dim); font-size: .9rem; margin: 0; text-align: center; } .payment-element-disabled { color: var(--warn); } .payment-secure-note { color: var(--text-dim); font-size: .8rem; margin: 0 0 1rem; display: flex; align-items: flex-start; gap: .4rem; line-height: 1.5; } /* Refund + concurrency policy notice on the Payment step. Slightly tinted warning-style block so the customer reads it before paying. */ .payment-policy-notice { background: rgba(248, 113, 113, .06); border: 1px solid rgba(248, 113, 113, .28); border-radius: 10px; padding: 1rem 1.1rem; margin: 0 0 1.25rem; } .payment-policy-title { margin: 0 0 .55rem; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); } .payment-policy-list { margin: 0; padding-left: 1.2rem; color: var(--text); font-size: .9rem; line-height: 1.55; } .payment-policy-list li + li { margin-top: .55rem; } .payment-policy-list strong { color: var(--text); } .payment-policy-list em { color: var(--accent); font-style: normal; font-weight: 600; } .payment-consent { margin: .75rem 0 .85rem; font-size: .88rem; } .payment-consent a { color: var(--accent); } /* TEST-DISCOUNT banner on the Payment step. Highly visible so we never accidentally pay with the discount in real production. */ .payment-summary-original { display: inline-block; margin-left: .65rem; color: var(--text-dim); text-decoration: line-through; font-size: .85rem; } .payment-test-discount-banner { margin: .75rem 0 0; padding: .55rem .85rem; background: var(--accent-wash-12); border: 1px dashed var(--accent); border-radius: 8px; color: var(--text); font-size: .82rem; line-height: 1.45; } .payment-test-discount-banner strong { color: var(--accent); letter-spacing: .04em; } /* ============================ COUNTDOWN BANNER ============================ */ .countdown-banner { margin: 0; padding: clamp(2rem, 5vw, 3.25rem) 0; background: linear-gradient(135deg, var(--accent-wash-08), var(--surface-faint)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .countdown-inner { width: min(100%, 1100px); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); text-align: center; } .countdown-eyebrow { margin: 0 0 .65rem; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } .countdown-clock { display: inline-flex; align-items: baseline; justify-content: center; gap: .35rem; font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); margin: 0 0 .85rem; padding: .85rem 1.25rem; background: var(--surface-deep); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--accent-wash-15), 0 6px 30px var(--accent-wash-08); } .countdown-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.7ch; } .countdown-num { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.05; } .countdown-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-top: .15rem; font-weight: 600; } .countdown-sep { font-size: clamp(1.3rem, 4vw, 2rem); color: var(--text-dim); padding: 0 .05rem; transform: translateY(-.45rem); } .countdown-ms { font-size: clamp(.95rem, 2vw, 1.2rem); color: var(--accent); margin-left: .25rem; min-width: 4.2ch; text-align: left; transform: translateY(-.1rem); } .countdown-clock.is-closed { background: rgba(248, 113, 113, .08); border-color: var(--danger); color: var(--text-dim); } .countdown-tagline { margin: 0 0 1.25rem; color: var(--text-muted); font-size: .95rem; } .countdown-cta { margin: 0; } @media (max-width: 520px) { .countdown-clock { padding: .7rem .85rem; gap: .25rem; border-radius: 12px; } .countdown-cell { min-width: 2.4ch; } .countdown-ms { min-width: 3.5ch; } .countdown-tagline { font-size: .88rem; padding: 0 .5rem; } } /* ============================ ACCOUNT AREA ============================ */ .account-body .site-header { border-bottom: 1px solid var(--border); } .account-main { max-width: 980px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) 3rem; display: grid; gap: 1.25rem; } .account-card { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow); } .account-card > :first-child { margin-top: 0; } .account-card > :last-child { margin-bottom: 0; } .account-card h1 { margin: 0 0 .25rem; font-size: clamp(1.4rem, 3vw, 1.85rem); } .account-card h2 { margin: 1.6rem 0 .5rem; font-size: 1.15rem; } .account-card-head { margin-bottom: 1rem; } .account-lede { color: var(--text-muted); margin: 0 0 1rem; } .account-fineprint { color: var(--text-dim); font-size: .85rem; line-height: 1.55; } .account-chip { font-size: .78rem; padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); } .account-form .account-field { display: block; margin: 0 0 1rem; } .account-field-label { display: block; margin-bottom: .35rem; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); } .account-form input[type="email"], .account-form input[type="text"] { width: 100%; padding: .65rem .8rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-tint); color: var(--text); font: inherit; } .account-alert { border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; } .account-alert-ok { background: var(--accent-wash-08); border: 1px solid var(--accent); } .account-alert-error { background: rgba(248, 113, 113, .08); border: 1px solid var(--danger); color: var(--text); } .account-alert-info { background: rgba(245, 200, 66, .08); border: 1px solid var(--gold, #f5c842); color: var(--text); } .account-orders { width: 100%; border-collapse: collapse; font-size: .92rem; } .account-orders th, .account-orders td { text-align: left; padding: .7rem .55rem; border-bottom: 1px solid var(--border); vertical-align: top; } .account-orders th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .account-orders tr.has-unread { background: var(--accent-wash-04); } .account-tag { display: inline-block; margin-left: .35rem; padding: .1rem .45rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; } .account-tag-premium { background: rgba(167, 139, 250, .15); color: var(--premium); border: 1px solid var(--premium); } .account-badge { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; background: var(--accent); /* Always use the dark navy as the on-accent text — that's the same ink color used on .btn-primary, and it stays readable on the cyan in both themes. */ color: var(--accent-contrast); border-radius: 999px; font-size: .7rem; font-weight: 700; } .account-est { color: var(--text-dim); } .account-link { color: var(--accent); text-decoration: none; } /* My Orders: pending reason note, Appraised placeholder, Pay-now action */ .order-pending-note { font-size: .8rem; color: var(--text-dim); margin-top: .2rem; } .orders-appraised { font-size: .8rem; color: var(--text-dim); } .orders-action-cell { white-space: nowrap; } .order-pay-now { display: inline-block; margin-inline-end: .6rem; padding: .3rem .7rem; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: .82rem; font-weight: 600; text-decoration: none; } .order-pay-now:hover { background: var(--accent-strong); color: var(--accent-contrast); text-decoration: none; } /* Step-up ("sudo") re-auth modal */ .stepup-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 6, 20, .72); backdrop-filter: blur(3px); } .stepup-modal { width: min(420px, 100%); background: var(--surface-elevated); border: 1px solid var(--border-strong); border-radius: 16px; padding: 1.4rem 1.4rem 1.1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .stepup-title { margin: 0 0 .35rem; font-size: 1.25rem; } .stepup-intro { margin: 0 0 1rem; color: var(--text-muted); font-size: .92rem; } .stepup-methods { display: flex; flex-direction: column; gap: .7rem; } .stepup-code { display: flex; flex-direction: column; gap: .5rem; } .stepup-sent { color: var(--text-muted); font-size: .88rem; margin: .2rem 0 0; } .stepup-err { color: var(--danger); font-size: .88rem; margin: .8rem 0 0; } .stepup-cancel { margin-top: 1rem; } .account-link:hover { text-decoration: underline; } .account-empty { text-align: center; padding: 2rem 1rem; color: var(--text-dim); } .account-profile { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.2rem; row-gap: .35rem; margin: 0 0 .75rem; font-size: .94rem; } .account-profile dt { color: var(--text-dim); font-size: .82rem; padding-top: .15rem; } .account-profile dd { margin: 0; color: var(--text); } /* Subtle inline note next to the NicNames-member renewal price — "Applies once your domain is in a NicNames.com account." */ .account-renewal-note { color: var(--text-muted); font-size: .82em; margin-left: .4em; } .account-cta-row { margin: 1rem 0 0; } .account-filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; } .account-filter-bar input, .account-filter-bar select { padding: .5rem .65rem; border: 1px solid var(--border-strong); border-radius: 6px; background-color: var(--surface-tint); /* not shorthand — keep the global select caret */ color: var(--text); font: inherit; } .account-filter-bar select { padding-right: 1.9rem; } /* Message thread */ .order-thread { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .85rem; } .order-thread-msg { padding: .85rem 1rem; border-radius: 10px; background: var(--surface-tint-2); border: 1px solid var(--border); } .order-thread-msg header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; font-size: .8rem; color: var(--text-dim); } .order-thread-author { color: var(--text); font-weight: 600; } .order-thread-msg p { margin: 0; color: var(--text); line-height: 1.55; } .order-thread-from-manager, .order-thread-from-admin { background: var(--accent-wash-06); border-color: var(--accent); } .order-thread-from-system { font-style: italic; opacity: .85; } .order-thread-empty { color: var(--text-dim); } .order-thread-form label { display: block; margin-bottom: .35rem; font-size: .82rem; color: var(--text-dim); } .order-thread-form textarea { width: 100%; padding: .65rem .8rem; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-tint); color: var(--text); font: inherit; margin-bottom: .75rem; resize: vertical; } .order-docs { list-style: none; padding: 0; margin: 0 0 1rem; } .order-docs li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; } .order-docs li em { color: var(--text-dim); font-style: normal; font-size: .8rem; } .order-doc-form { margin-top: .75rem; } .order-doc-form label { display: block; margin-bottom: .35rem; font-size: .82rem; color: var(--text-dim); } .order-doc-form input[type="file"] { display: block; margin: 0 0 .65rem; color: var(--text); } @media (max-width: 720px) { .account-orders { font-size: .82rem; } .account-orders th, .account-orders td { padding: .5rem .35rem; } .account-profile { grid-template-columns: 1fr; row-gap: .15rem; } .account-profile dt { padding-top: .55rem; } } .payment-alt { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); text-align: center; } .payment-alt-or { position: relative; margin: -1.5rem 0 .85rem; } .payment-alt-or span { background: var(--card); color: var(--text-dim); font-size: .8rem; padding: 0 .65rem; letter-spacing: .14em; text-transform: uppercase; } .payment-alt-heading { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .payment-alt-btn { display: block; width: 100%; background: transparent; border: 1px dashed var(--border-strong); color: var(--accent); font-weight: 600; padding: .9rem 1rem; border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .payment-alt-btn:hover:not(:disabled) { background: var(--accent-wash-08); border-color: var(--accent); } .payment-alt-btn:disabled { opacity: .6; cursor: not-allowed; } .payment-alt-note { color: var(--text-dim); font-size: .82rem; margin: .65rem 0 0; line-height: 1.5; } /* MOBILE REFINEMENTS */ @media (max-width: 600px) { body { line-height: 1.5; } .site-header { padding: .9rem 1rem; } .brand { font-size: 1.05rem; } .nav-cta { padding: .5rem .85rem; font-size: .9rem; } .hero { padding: 2rem 1rem 1.5rem; } .eyebrow { font-size: .7rem; letter-spacing: .14em; } h1 { font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; } .lede { font-size: 1rem; } .trust-line { font-size: .9rem; margin: .75rem auto 1.25rem; } .urgency { font-size: .85rem; padding: .8rem .9rem; } .urgency strong { display: block; margin-top: .15rem; } .urgency strong:first-child { margin-top: 0; } .urgency-sep { display: none; } .section { padding: 2.25rem 1rem; } .section h2 { font-size: 1.5rem; margin-bottom: 1.25rem; } .cards-3, .cards-4 { grid-template-columns: 1fr; gap: .75rem; } .card { padding: 1.1rem; } .pricing-card { padding: 1.5rem 1.25rem; border-radius: 22px; } .pricing-amount { font-size: 2.5rem; } .pricing-includes li { padding: .5rem 0 .5rem 1.6rem; font-size: .9rem; } .pricing-includes li::before { top: .8rem; } .steps { grid-template-columns: 1fr; } .steps li { padding: 1rem 1.1rem; } .form { padding: 1.25rem 1rem; border-radius: 22px; } .form h2 { font-size: 1.35rem; } .form-intro { font-size: .9rem; } .grid-2 { grid-template-columns: 1fr; gap: .75rem; } .form .btn { width: 100%; } .consent { font-size: .82rem; } .result { padding: 0 1rem; } .result-card { padding: 1.1rem; } .result-card h3 { font-size: 1.05rem; } .result-actions { flex-direction: column; gap: .5rem; } .result-actions .btn { width: 100%; } .faq summary { font-size: .98rem; } .faq summary::after { font-size: 1.25rem; } .legal-strip { padding: 1.5rem 1rem; } .legal-strip p { font-size: .85rem; } .site-footer { padding: 1.5rem 1rem; } .footer-nav { gap: 1rem; } } /* ============================ PAYMENT METHODS ========================== Footer trust strip showing the cards/wallets/invoice/crypto we accept. Icons are vendored monochrome SVGs in /assets/img/payments/ and painted via CSS mask, so they pick up the current theme's text color. */ .payment-methods { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: center; margin: .85rem 0 0; padding: 0 .5rem; } /* The label sits on its own centered row (flex-basis:100% forces a line break) so the icons always render as a centered group beneath it — even spacing on desktop, and a clean single-line wrap on mobile instead of orphaning bitcoin/invoice. */ .payment-methods-label { flex-basis: 100%; text-align: center; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin: 0 0 .55rem; } /* Plain render. Each SVG carries fill="#7c8694" (a neutral gray that reads on both light and dark themes), so no CSS mask trickery, no mask-mode browser disagreements. Each icon gets a fixed-width cell with object-fit:contain so glyphs of very different intrinsic widths (wide VISA vs square bitcoin) sit at equal center-to-center spacing. */ .pay-icon { display: inline-block; height: 22px; width: 46px; object-fit: contain; vertical-align: middle; opacity: .9; transition: opacity .15s ease, transform .15s ease; } .pay-icon:hover { opacity: 1; transform: translateY(-1px); } @media (max-width: 540px) { /* Cells sized so all 7 icons stay on one centered line even on a 320px phone (footer inner ≈272px): 7×34 + 6×3.2 ≈ 257px. */ .payment-methods { gap: .2rem; } .pay-icon { height: 18px; width: 34px; } } /* ============================ SMD PREVIEW ============================== When the user picks a .smd file on the priority_smd form, JS uploads + parses it instantly via /api/smd-parse.php and renders this card. */ .smd-preview { margin-top: .85rem; padding: .9rem 1rem; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-faint); font-size: .9rem; line-height: 1.55; } .smd-preview.is-loading { opacity: .8; } .smd-preview.is-ok { border-color: var(--accent); background: var(--accent-wash-06); } .smd-preview.is-error { border-color: var(--danger); background: rgba(248, 113, 113, .06); } .smd-preview-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; } .smd-preview-head strong { color: var(--text); } .smd-preview-filename { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .82rem; color: var(--text-dim); } .smd-preview-row { margin: .15rem 0; color: var(--text-muted); } .smd-preview-row strong { color: var(--text); } .smd-preview-eligible strong { color: var(--accent); } .smd-preview-validity { font-size: .85rem; color: var(--text-dim); } .smd-preview-id { font-size: .82rem; color: var(--text-dim); } .smd-preview-id code { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; background: var(--surface-tint); padding: 1px 6px; border-radius: 4px; } .smd-pill { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; letter-spacing: .04em; font-weight: 600; margin-left: auto; } .smd-pill-ok { background: var(--accent-wash-12); color: var(--accent); border: 1px solid var(--accent); } .smd-pill-warn { background: rgba(251, 191, 36, .12); color: var(--warn); border: 1px solid var(--warn); } /* ===================== INTL-TEL-INPUT (phone field) ===================== The intl-tel-input CSS comes from the CDN; these overrides line it up with our .form-field input styling (rounded, dark surface in dark mode, white surface in light mode) and adjust the flag-dropdown background so it doesn't look like a Bootstrap dropout. */ .form-field-phone .iti { width: 100%; } .form-field-phone .iti__tel-input, .form-field-phone input[type="tel"] { width: 100% !important; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .04); color: var(--text); padding: .7rem .85rem; border-radius: 8px; font: inherit; } :root[data-theme="light"] .form-field-phone .iti__tel-input, :root[data-theme="light"] .form-field-phone input[type="tel"] { background: rgba(15, 23, 42, .03); } .form-field-phone .iti__country-list { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow); max-height: 240px; } .form-field-phone .iti__country.iti__highlight { background: var(--surface-mid); } .form-field-phone .iti__divider { border-bottom-color: var(--border); } .form-field-phone .iti__dial-code { color: var(--text-dim); } .form-field-phone .iti__selected-dial-code { color: var(--text-muted); } /* ============================ POWERED BY =============================== Compact trust pill placed ABOVE the search hero on the homepage. The NicNames logo SVG comes in two flavors (black on light, white on dark); we keep one visible per data-theme via display:none on the other. Structure: .powered-by-section ← centers the pill, no border strip a.powered-by ← the clickable pill .powered-by-label ← uppercase "POWERED BY" .powered-by-logo-wrap ← two SVGs, one shown per theme .powered-by-arrow ← → indicating click-out .powered-by-tooltip ← hover/focus tooltip with the ICANN line */ .powered-by-section { display: flex; justify-content: center; padding: clamp(.85rem, 2vw, 1.25rem) 1rem 0; background: transparent; border: 0; } .powered-by { position: relative; display: inline-flex; align-items: center; gap: .6rem; color: var(--text-muted); font-size: .9rem; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .12s ease; padding: .4rem .9rem .4rem .85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-faint); } .powered-by:hover, .powered-by:focus-visible { text-decoration: none; outline: none; border-color: var(--accent); background: var(--surface-card); transform: translateY(-1px); } .powered-by:focus-visible { box-shadow: 0 0 0 3px var(--accent-wash-25); } .powered-by-label { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .powered-by-logo-wrap { display: inline-flex; align-items: center; } .powered-by-logo { height: 24px; width: auto; display: inline-block; } .powered-by-logo-light { display: none; } :root[data-theme="light"] .powered-by-logo-light { display: inline-block; } :root[data-theme="light"] .powered-by-logo-dark { display: none; } /* Single-logo variant (NIC.UA / UK locale — one SVG works on both themes). The NIC.UA glyph is visually denser than NicNames' two-tone logo, so it reads larger at the same 24px line height — shrink it a notch and re-baseline so it sits centered with the "підтримується" eyebrow label instead of looking dropped. The block flex container already vertical-centers children; this just reins in the height. */ .powered-by-mono .powered-by-logo { height: 18px; display: block; /* drop inline-baseline so flex centering wins */ } @media (max-width: 540px) { .powered-by-mono .powered-by-logo { height: 16px; } } .powered-by-arrow { display: inline-block; color: var(--accent); font-weight: 700; font-size: .95rem; margin-left: .15rem; transition: transform .15s ease; } .powered-by:hover .powered-by-arrow, .powered-by:focus-visible .powered-by-arrow { transform: translateX(2px); } /* CSS-only tooltip layer. Position above the pill, fade in on hover/focus. pointer-events: none so it never interrupts the click on the pill itself. */ .powered-by-tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); background: var(--bg-elev); color: var(--text); font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: .55rem .85rem; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 20; } .powered-by-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--bg-elev); } .powered-by-tooltip strong { color: var(--accent); } .powered-by:hover .powered-by-tooltip, .powered-by:focus-visible .powered-by-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } @media (max-width: 540px) { .powered-by { padding: .35rem .7rem .35rem .65rem; font-size: .82rem; gap: .45rem; } .powered-by-label { font-size: .58rem; } .powered-by-logo { height: 20px; } .powered-by-tooltip { font-size: .78rem; white-space: normal; max-width: 16rem; } } /* Tablet refinements */ @media (min-width: 601px) and (max-width: 960px) { .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr); } } /* ============================ FOOTER CONTROLS =========================== Single horizontal row holding the theme switcher (left) and the locale switcher (right). Both segments share a similar visual treatment so the row reads as one piece of chrome rather than two unrelated widgets. */ .footer-controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .75rem 0 0; flex-wrap: wrap; } /* On narrow viewports stack them, theme above locale (the natural reading order for the controls). */ @media (max-width: 480px) { .footer-controls { gap: .5rem; justify-content: flex-start; } } /* ============================ THEME SWITCHER ============================ Footer-level Auto / Light / Dark segmented control. Identical markup on every page, wired by assets/js/theme.js. */ .theme-switcher { display: inline-flex; align-items: center; gap: .15rem; /* Default margin for pages that still render the switcher standalone (account/_layout.php, api/waitlist-unsubscribe.php). Inside .footer-controls the parent gap handles spacing — reset to 0. */ margin: .75rem 0 0; padding: .25rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-faint); font-size: .82rem; } .footer-controls .theme-switcher { margin: 0; } .theme-switcher-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); padding: 0 .55rem 0 .65rem; font-weight: 600; } .theme-switcher button { background: transparent; border: 0; color: var(--text-muted); padding: .35rem .75rem; border-radius: 6px; cursor: pointer; font: inherit; line-height: 1.2; transition: background .12s ease, color .12s ease; } .theme-switcher button:hover { color: var(--text); } .theme-switcher button[aria-pressed="true"] { background: var(--bg-elev); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-strong); } .theme-switcher button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Tight up on tiny screens — drop the "Theme" label, keep the buttons */ @media (max-width: 480px) { .theme-switcher-label { display: none; } .theme-switcher { gap: .25rem; padding: .2rem; } .theme-switcher button { padding: .3rem .6rem; } } /* ============================ LOCALE SWITCHER =========================== Native
/ dropdown. All entries inside are real anchors so Googlebot crawls every alternate URL — never collapse this into a JS-only