/* ============================================================================ registry.css — @uae.com Domains "private email registry" design system Owner: RD-FOUNDATION. Consumed by all page developers. Vocabulary is INTEGRATION-CONTRACT.md §2. Those names are the interface; nothing here renames them. HOW TO USE ---------- 1. ``. Everything is scoped to it so this file can sit beside the legacy premium-theme.css without the two fighting, and every custom property is `--rg-*` prefixed for the same reason (the legacy theme already owns --gold / --accent / --bg-primary). 2. Load the fonts NON-BLOCKING — the exact head block is in INTEGRATION-CONTRACT.md §6. Every stack below carries a real system fallback so the page paints, legibly and correctly laid out, before any webfont arrives. 3. NO BORDER-RADIUS. This is a defining characteristic of the design and it is ENFORCED: `:where(.rg-root *)` zeroes every radius at specificity 0, so a class can still opt in. The only sanctioned opt-ins are `.rg-medallion`, `.rg-avatar`, `.rg-dot`, `.rg-toggle` (+ its knob) and the two circles that are literally circles: `.rg-done__medal`, `.rg-count`. Nothing else. If you think you need a rounded corner here, reconsider — sharpness is the brand. NOTE: no apostrophes in comments in this file. `client-assets.test.ts` strips quoted strings before counting comment delimiters, so a stray apostrophe pairs with a font-stack quote and reports a false imbalance. 4. RTL is handled with logical properties (inline-start/end), not left/right, so one rule serves both directions (contract §7). 5. A RENDERED NUMBER MUST NOT IMPLY MORE PRECISION THAN THE MEASUREMENT HAS, IN EITHER DIRECTION. Two independent failures on this build reached the same rule from opposite ends: a money formatter rounded AED 5,092.50 to "AED 5,093", losing precision we had and printing a figure different from the one charged; and a storage formatter printed "30.0 GB" for a quota nobody measured, claiming precision we never had. Both read as care. Corollary, learned the same way: a value that cannot be computed must render as an honest unknown, never as a fallback that looks real — that is what .rg-unknown, .rg-empty and .rg-progress--unknown are for, and why RegistryUI.aed() returns "" rather than "AED 0". 6. AN UNKNOWN STATE MUST SAY SO IN THE ACCESSIBILITY LAYER TOO, not only visually. Three surfaces on this build had a correct visual treatment contradicted by their markup. Dimming text, hiding a bar or omitting a value is not a statement; a name or a role is. ========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS (contract §2) ------------------------------------------------------------------------ */ :root { /* -- surfaces & ink ---------------------------------------------------- */ --rg-ink: #0e0d0b; /* page background, warm near-black */ --rg-surface: #12100d; /* cards, stat tiles */ --rg-surface-2: #13110e; /* panels, tables, order card */ --rg-nav-bg: rgba(14, 13, 11, 0.82); /* sticky nav, blurred */ --rg-side-bg: rgba(17, 15, 12, 0.72); /* account sidebar, blurred */ --rg-well: rgba(20, 18, 15, 0.75); /* search bar interior */ /* -- text -------------------------------------------------------------- */ --rg-ivory: #f3eee3; /* primary text */ --rg-warm: #a79e8c; /* secondary text */ --rg-muted: #6e655a; /* tertiary / microcopy */ --rg-dim: #5e574c; /* taken addresses, disabled controls */ /* -- accents ----------------------------------------------------------- */ --rg-gold: #c9a96a; --rg-gold-hi: #e0c284; --rg-gold-dim: #8a7a57; --rg-ok: #9db89a; /* success green */ --rg-danger: #c77b5b; /* terracotta */ /* -- raw channels, for rgba() composition ------------------------------ */ --rg-gold-rgb: 201, 169, 106; --rg-ivory-rgb: 243, 238, 227; --rg-ok-rgb: 157, 184, 154; --rg-danger-rgb: 199, 123, 91; /* -- gold alpha border ladder ------------------------------------------ The structure of this design is gold-at-low-alpha hairlines. Use these, never a raw rgba() literal, so a tint change stays one edit. .16 hairline · .22 card · .3 emphasised card · .45 interactive .4 / .65 are the two extra rungs the prototypes use for the search box border and card hover; they are part of the ladder, not improvisation. */ --rg-line: rgba(var(--rg-gold-rgb), 0.16); --rg-line-2: rgba(var(--rg-gold-rgb), 0.22); --rg-line-3: rgba(var(--rg-gold-rgb), 0.3); --rg-line-4: rgba(var(--rg-gold-rgb), 0.4); --rg-line-hi: rgba(var(--rg-gold-rgb), 0.45); --rg-line-max: rgba(var(--rg-gold-rgb), 0.65); /* sub-hairlines for separators inside a panel */ --rg-line-row: rgba(var(--rg-gold-rgb), 0.08); --rg-line-row-2: rgba(var(--rg-gold-rgb), 0.12); --rg-line-soft: rgba(var(--rg-gold-rgb), 0.18); /* -- gold washes -------------------------------------------------------- */ --rg-wash: rgba(var(--rg-gold-rgb), 0.03); /* row hover */ --rg-wash-2: rgba(var(--rg-gold-rgb), 0.06); /* active chip / nav item */ --rg-wash-3: rgba(var(--rg-gold-rgb), 0.14); /* progress track */ --rg-tint: linear-gradient(160deg, rgba(var(--rg-gold-rgb), 0.1), rgba(var(--rg-gold-rgb), 0.03) 60%); --rg-tint-soft: linear-gradient(160deg, rgba(var(--rg-gold-rgb), 0.08), rgba(var(--rg-gold-rgb), 0.02) 60%); /* -- type -------------------------------------------------------------- */ --rg-serif: 'Marcellus', Cochin, Georgia, 'Times New Roman', serif; --rg-sans: 'Archivo', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --rg-arabic: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, serif; /* Mixed-script display: addresses and headlines that carry both scripts. */ --rg-serif-ar: 'Marcellus', 'Noto Naskh Arabic', Cochin, Georgia, serif; --rg-mono: Menlo, Consolas, 'SF Mono', 'Courier New', monospace; /* -- scale (stepped down at the two breakpoints, contract §2) ----------- */ --rg-h1: 88px; --rg-h2: 46px; --rg-h3: 38px; --rg-h4: 23px; /* -- spacing ----------------------------------------------------------- */ --rg-gutter: 48px; --rg-gap: 14px; --rg-section-top: 110px; --rg-maxw: 1200px; --rg-maxw-narrow: 760px; --rg-side-w: 238px; /* -- motion ------------------------------------------------------------ */ --rg-t-fast: 0.2s ease; --rg-t: 0.25s ease; --rg-t-slow: 0.3s ease; } /* --------------------------------------------------------------------------- 2. RADIUS ENFORCEMENT + BASE ------------------------------------------------------------------------ */ /* Specificity 0 — a deliberate class rule always wins over this. */ :where(.rg-root *), :where(.rg-root *::before), :where(.rg-root *::after) { border-radius: 0; } /* The sanctioned exceptions, and only these. */ .rg-medallion, .rg-avatar, .rg-dot, .rg-done__medal, .rg-count, .rg-toggle__knob { border-radius: 50%; } .rg-toggle { border-radius: 20px; } .rg-root { margin: 0; background: var(--rg-ink); color: var(--rg-ivory); font-family: var(--rg-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .rg-root * { box-sizing: border-box; } .rg-root ::selection { background: var(--rg-gold); color: var(--rg-ink); } /* ELEMENT DEFAULTS ARE WRAPPED IN :where() ON PURPOSE — do not "simplify". A type selector carries specificity, so `.rg-root a` (0,1,1) outranks EVERY single-class component (0,1,0). Written plainly, these two rules silently beat .rg-btn--danger, .rg-btn--quiet, .rg-nav__link, .rg-side__back, .rg-chip, .rg-claimlink and .rg-side__item — and `.rg-root button` beat even .rg-btn--gold, putting inherited ivory text on a gold fill. :where() contributes ZERO specificity, so these become true defaults that any component class overrides, which is what a base layer is supposed to be. */ :where(.rg-root) a { color: var(--rg-gold); text-decoration: none; transition: color var(--rg-t-fast); } :where(.rg-root) a:hover { color: var(--rg-ivory); } :where(.rg-root) input, :where(.rg-root) button, :where(.rg-root) select, :where(.rg-root) textarea { font-family: inherit; color: inherit; } :where(.rg-root) input::placeholder, :where(.rg-root) textarea::placeholder { color: var(--rg-dim); opacity: 1; } /* Sharp, unmistakable focus ring — nothing here has a corner to soften it. */ .rg-root :focus-visible { outline: 1px solid var(--rg-gold); outline-offset: 2px; } .rg-root :focus:not(:focus-visible) { outline: none; } .rg-root img, .rg-root canvas, .rg-root svg { max-width: 100%; } /* Visibility utilities (contract §2). */ .is-hidden { display: none !important; } .rg-root [hidden] { display: none !important; } .rg-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rg-skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999; background: var(--rg-gold); color: var(--rg-ink); padding: 12px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; } .rg-skip:focus { inset-inline-start: 8px; top: 8px; color: var(--rg-ink); } /* --------------------------------------------------------------------------- 3. KEYFRAMES ------------------------------------------------------------------------ */ @keyframes rg-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rg-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes rg-blink{ 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } @keyframes rg-sheen{ from { background-position: 110% 0; } to { background-position: -110% 0; } } @keyframes rg-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes rg-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } } /* --------------------------------------------------------------------------- 4. TYPE (contract §2) ------------------------------------------------------------------------ */ .rg-serif { font-family: var(--rg-serif); font-weight: 400; } .rg-ar { font-family: var(--rg-arabic); color: var(--rg-gold); line-height: 1.6; } .rg-ar--lg{ font-size: 27px; } .rg-ar--md{ font-size: 18px; } .rg-ar--sm{ font-size: 16px; } .rg-mono { font-family: var(--rg-mono); } /* Uppercase kicker — 11px / .34em / warm. The line above a headline. */ .rg-kicker { display: block; font-family: var(--rg-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--rg-warm); line-height: 1.5; } /* Uppercase label — 11px / .14em. The workhorse; modifiers cover .14–.34em. */ .rg-label { display: inline-block; font-family: var(--rg-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rg-warm); line-height: 1.4; } .rg-label--xs { font-size: 9.5px; letter-spacing: 0.24em; } .rg-label--sm { font-size: 10px; letter-spacing: 0.24em; } .rg-label--md { font-size: 11px; letter-spacing: 0.2em; } .rg-label--wide { letter-spacing: 0.28em; } .rg-label--max { letter-spacing: 0.34em; } .rg-label--gold { color: var(--rg-gold); } .rg-label--muted{ color: var(--rg-warm); } .rg-label--dim { color: var(--rg-gold-dim); } .rg-label--ok { color: var(--rg-ok); } .rg-h1 { margin: 0; font-family: var(--rg-serif); font-weight: 400; font-size: var(--rg-h1); line-height: 1.04; letter-spacing: 0.01em; color: var(--rg-ivory); text-wrap: balance; } .rg-h2 { margin: 0; font-family: var(--rg-serif); font-weight: 400; font-size: var(--rg-h2); line-height: 1.15; color: var(--rg-ivory); } /* Headings sit under an Arabic eyebrow almost everywhere in this design, and a heading with no `.rg-section__aside` beside it has to carry its own bottom space (the .rg-section__head 44px only applies when there IS an aside). These two exist so six pages do not each invent the same two margins. */ .rg-h2--eyebrow { margin-top: 8px; } .rg-h2--loose { margin-bottom: 54px; } .rg-h3--eyebrow { margin-top: 6px; } /* .rg-h3 is the ACCOUNT page H1 (38px), per contract §2. */ .rg-h3 { margin: 0; font-family: var(--rg-serif); font-weight: 400; font-size: var(--rg-h3); line-height: 1.15; color: var(--rg-ivory); } .rg-h4 { margin: 0; font-family: var(--rg-serif); font-weight: 400; font-size: var(--rg-h4); line-height: 1.25; color: var(--rg-ivory); } .rg-h5 { margin: 0; font-family: var(--rg-serif); font-weight: 400; font-size: 18px; color: var(--rg-ivory); } .rg-lede { margin: 0; font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--rg-warm); text-wrap: pretty; } .rg-note { margin: 0; font-weight: 300; font-size: 13.5px; line-height: 1.7; color: var(--rg-warm); } .rg-body { margin: 0; font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--rg-warm); text-wrap: pretty; } .rg-micro{ font-size: 11.5px; color: var(--rg-warm); } /* Colour helpers — reach for a component class first. */ .rg-t-ivory { color: var(--rg-ivory); } .rg-t-warm { color: var(--rg-warm); } .rg-t-muted { color: var(--rg-warm); } .rg-t-gold { color: var(--rg-gold); } .rg-t-ok { color: var(--rg-ok); } .rg-t-danger{ color: var(--rg-danger); } .rg-t-dim { color: var(--rg-dim); } /* An email address, anywhere. Stays LTR inside Arabic copy. */ .rg-addr { font-family: var(--rg-serif-ar); color: var(--rg-ivory); overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; } /* A money figure. Also LTR-isolated. */ .rg-price { font-size: 15px; font-weight: 500; color: var(--rg-ivory); white-space: nowrap; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .rg-price--lg { font-family: var(--rg-serif); font-size: 30px; font-weight: 400; color: var(--rg-gold); } .rg-renewal { font-size: 11px; color: var(--rg-warm); margin-top: 2px; direction: ltr; unicode-bidi: isolate; } .rg-fade { animation: rg-fade 0.7s ease both; } .rg-fade--1 { animation-delay: 0.1s; } .rg-fade--2 { animation-delay: 0.18s; } .rg-fade--3 { animation-delay: 0.26s; } .rg-fade--4 { animation-delay: 0.36s; } /* --------------------------------------------------------------------------- 5. SHELL ------------------------------------------------------------------------ */ /* The fixed full-viewport canvas registry-bg.js paints into. */ .rg-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } .rg-page { position: relative; z-index: 1; min-height: 100vh; background: transparent; } .rg-section { max-width: var(--rg-maxw); margin: 0 auto; padding: var(--rg-section-top) var(--rg-gutter) 30px; } .rg-section--last { padding-bottom: 120px; } .rg-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; } .rg-section__aside { max-width: 320px; margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--rg-warm); text-align: end; } /* --------------------------------------------------------------------------- 6. NAV ------------------------------------------------------------------------ */ .rg-nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--rg-line); background: var(--rg-nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .rg-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--rg-gutter); } .rg-nav__brand { display: flex; align-items: center; gap: 13px; min-width: 0; } .rg-nav__links { display: flex; align-items: center; gap: 34px; font-size: 12px; letter-spacing: 0.16em; font-weight: 500; } .rg-nav__link { color: var(--rg-warm); text-transform: uppercase; white-space: nowrap; transition: color var(--rg-t-fast); } .rg-nav__link:hover, .rg-nav__link:focus-visible, .rg-nav__link--active { color: var(--rg-ivory); } .rg-nav__cta { color: var(--rg-gold); border: 1px solid var(--rg-line-hi); padding: 10px 20px; text-transform: uppercase; white-space: nowrap; transition: background var(--rg-t-fast), color var(--rg-t-fast); } .rg-nav__cta:hover, .rg-nav__cta:focus-visible { background: var(--rg-gold); color: var(--rg-ink); } /* Mobile disclosure; page owners toggle `.is-open` on .rg-nav__links. */ .rg-nav__burger { display: none; background: transparent; border: 1px solid var(--rg-line-2); color: var(--rg-gold); padding: 9px 13px; font-size: 12px; letter-spacing: 0.18em; cursor: pointer; } /* Medallion — registry-decode crops the live swarm texture into this canvas. */ .rg-medallion { width: 36px; height: 36px; display: block; flex: none; border: 1px solid var(--rg-line-4); background: var(--rg-ink); } .rg-medallion--sm { width: 28px; height: 28px; } .rg-medallion--side { width: 34px; height: 34px; } /* Particle wordmark — 360x56 backing store shown at 180x28. */ .rg-wordmark { width: 180px; height: 28px; display: block; flex: none; } /* Text variant of the cycling wordmark (footer / sidebar). Mark it data-nodecode so the matrix decode does not fight the cycle. */ .rg-wordmark--text { width: auto; height: auto; font-family: var(--rg-serif); font-size: 15px; letter-spacing: 0.05em; color: var(--rg-ivory); direction: ltr; unicode-bidi: isolate; } /* --------------------------------------------------------------------------- 7. HERO + SEARCH ------------------------------------------------------------------------ */ .rg-hero { position: relative; overflow: hidden; padding: var(--rg-section-top) var(--rg-gutter) 90px; text-align: center; } .rg-hero__inner { position: relative; max-width: 920px; margin: 0 auto; } /* The giant decorative @ behind the content. */ .rg-hero__at { position: absolute; top: -140px; inset-inline-end: -90px; font-family: var(--rg-serif); font-size: 640px; line-height: 1; color: rgba(var(--rg-ivory-rgb), 0.028); pointer-events: none; user-select: none; -webkit-user-select: none; } .rg-hero__at--start { top: -120px; inset-inline-start: -80px; inset-inline-end: auto; font-size: 560px; color: rgba(var(--rg-ivory-rgb), 0.025); } .rg-hero__glow { position: absolute; inset: 0; background: radial-gradient(600px 320px at 50% 0%, rgba(var(--rg-gold-rgb), 0.07), transparent 70%); pointer-events: none; } .rg-hero__glow--done { background: radial-gradient(700px 400px at 50% 30%, rgba(var(--rg-gold-rgb), 0.08), transparent 70%); } .rg-hero__ar { margin-top: 38px; font-family: var(--rg-arabic); font-size: 27px; line-height: 1.5; color: var(--rg-gold); } .rg-hero__title { margin: 10px 0 0; } .rg-hero__lede { margin: 26px auto 0; max-width: 560px; } /* The search bar: `.rg-search` IS the bordered box. */ .rg-search { display: flex; align-items: stretch; max-width: var(--rg-maxw-narrow); margin: 52px auto 0; border: 1px solid var(--rg-line-4); background: var(--rg-well); transition: border-color var(--rg-t-fast); } .rg-search:focus-within { border-color: var(--rg-line-max); } .rg-search__at { display: flex; align-items: center; padding-inline: 28px 0; font-family: var(--rg-serif); font-size: 26px; color: var(--rg-gold); user-select: none; -webkit-user-select: none; } .rg-search__input { flex: 1; min-width: 0; background: transparent; border: none; padding: 24px 20px; font-family: var(--rg-serif-ar); font-size: 24px; color: var(--rg-ivory); letter-spacing: 0.02em; outline: none; } .rg-search__btn { border: none; cursor: pointer; background: var(--rg-gold); color: var(--rg-ink); font-family: var(--rg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 0 34px; white-space: nowrap; transition: background var(--rg-t-fast); } .rg-search__btn:hover:not([disabled]) { background: var(--rg-gold-hi); } .rg-search__btn[disabled], .rg-search__btn.is-disabled { background: var(--rg-gold-dim); color: rgba(14, 13, 11, 0.55); cursor: not-allowed; } .rg-search__note { max-width: var(--rg-maxw-narrow); margin: 14px auto 0; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rg-warm); } /* --------------------------------------------------------------------------- 8. RESULTS PANEL + ROWS ------------------------------------------------------------------------ */ .rg-results { max-width: var(--rg-maxw-narrow); margin: 26px auto 0; border: 1px solid var(--rg-line-2); background: var(--rg-surface-2); text-align: start; } .rg-results__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 26px; border-bottom: 1px solid rgba(var(--rg-gold-rgb), 0.14); } .rg-results__foot { padding: 14px 26px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rg-warm); } /* One address. */ .rg-row { display: grid; grid-template-columns: 1fr 130px 150px 90px; gap: 16px; align-items: center; padding: 20px 26px; border-bottom: 1px solid rgba(var(--rg-gold-rgb), 0.09); transition: background var(--rg-t-fast); } .rg-row:last-of-type { border-bottom: none; } .rg-row:hover { background: rgba(var(--rg-gold-rgb), 0.04); } .rg-row__name { display: flex; align-items: center; gap: 12px; min-width: 0; } .rg-row .rg-addr { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rg-row__price { text-align: end; } .rg-row__act { text-align: end; } /* Two INDEPENDENT row states that can both be true at once, so order matters. `unavailable` is declared first and `taken` second, deliberately: when a row carries both, TAKEN must win. Someone owning the address is permanent; the domain not being provisionable yet is temporary, and the permanent fact is the one the customer needs to read. Never derive one from the other. */ /* Domain not provisionable yet (sellable:false). Nobody owns it; we simply cannot deliver on it. Shown in the portfolio, never purchasable. */ .rg-row--unavailable .rg-addr { color: var(--rg-warm); } .rg-row--unavailable .rg-price { color: var(--rg-dim); } .rg-row--unavailable .rg-claimlink { display: none; } /* Sold. Struck through, dimmed, no CTA — and it never returns. */ .rg-row--taken .rg-addr { color: var(--rg-dim); text-decoration: line-through; } .rg-row--taken .rg-price { color: var(--rg-dim); } .rg-row--taken .rg-claimlink { display: none; } .rg-row--taken:hover { background: transparent; } .rg-claimlink { cursor: pointer; background: transparent; border: none; padding: 6px 0; font-family: var(--rg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rg-gold); white-space: nowrap; transition: color var(--rg-t-fast); } .rg-claimlink:hover, .rg-claimlink:focus-visible { color: var(--rg-ivory); } .rg-claimlink[disabled], .rg-claimlink.is-disabled { color: var(--rg-dim); cursor: not-allowed; } /* Badges. */ .rg-badge { flex: none; display: inline-block; font-family: var(--rg-sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rg-gold); border: 1px solid rgba(var(--rg-gold-rgb), 0.5); padding: 4px 8px; white-space: nowrap; vertical-align: middle; line-height: 1.2; } .rg-badge--rare { color: var(--rg-gold); border-color: rgba(var(--rg-gold-rgb), 0.5); } .rg-badge--ultra { font-size: 10px; padding: 3px 7px; } .rg-badge--ok { color: var(--rg-ok); border-color: rgba(var(--rg-ok-rgb), 0.5); } .rg-badge--danger{ color: var(--rg-danger); border-color: rgba(var(--rg-danger-rgb), 0.5); } .rg-badge--soon { color: var(--rg-warm); border-color: var(--rg-line-2); } /* Status dot + its label. */ .rg-status { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--rg-warm); } .rg-status--sm { font-size: 10px; letter-spacing: 0.18em; gap: 7px; } .rg-dot { width: 5px; height: 5px; flex: none; display: inline-block; background: currentColor; } .rg-dot--md { width: 6px; height: 6px; } .rg-dot--lg { width: 8px; height: 8px; } .rg-dot--ok { background: var(--rg-ok); } .rg-dot--taken { background: var(--rg-dim); } .rg-dot--pending { background: var(--rg-gold); } .rg-dot--danger { background: var(--rg-danger); } /* The dot only, pulsing — "all systems operational". */ .rg-dot--live { background: var(--rg-ok); box-shadow: 0 0 10px rgba(var(--rg-ok-rgb), 0.7); animation: rg-glow 2.4s infinite; } /* Convenience: colour the label with its dot. */ .rg-status--ok { color: var(--rg-ok); } .rg-status--taken { color: var(--rg-dim); } .rg-status--pending { color: var(--rg-gold); } .rg-status--danger { color: var(--rg-danger); } /* --------------------------------------------------------------------------- 9. LOADING + EMPTY (contract §2 — real design surface, never fake numbers) ------------------------------------------------------------------------ */ /* "Consulting the registry..." — the loading voice of the search itself. */ .rg-consulting { padding: 34px 26px; font-family: var(--rg-serif); font-size: 18px; color: var(--rg-warm); } .rg-consulting i { font-style: normal; animation: rg-blink 1s infinite; } .rg-consulting i:nth-of-type(2) { animation-delay: 0.2s; } .rg-consulting i:nth-of-type(3) { animation-delay: 0.4s; } /* Skeleton line. RegistryUI.skeleton(el, rows) stamps these. */ .rg-skeleton { display: block; height: 13px; width: 100%; background-image: linear-gradient( 100deg, rgba(var(--rg-gold-rgb), 0.05) 0%, rgba(var(--rg-gold-rgb), 0.05) 30%, rgba(var(--rg-gold-rgb), 0.16) 50%, rgba(var(--rg-gold-rgb), 0.05) 70%, rgba(var(--rg-gold-rgb), 0.05) 100% ); background-size: 260% 100%; background-position: 180% 0; animation: rg-shimmer 1.6s linear infinite; } .rg-skeleton + .rg-skeleton { margin-top: 12px; } .rg-skeleton--lg { height: 26px; } .rg-skeleton--sm { height: 9px; } .rg-skeleton--60 { width: 60%; } .rg-skeleton--40 { width: 40%; } .rg-skeleton--25 { width: 25%; } .rg-skeleton-block { padding: 22px 24px; } /* Honest empty state. Deliberate, quiet, obviously intentional. */ .rg-empty { padding: 44px 26px; text-align: center; border-top: 1px solid var(--rg-line-row); } .rg-empty--bare { border-top: none; } .rg-empty__mark { font-family: var(--rg-serif); font-size: 26px; line-height: 1; color: var(--rg-gold-dim); } .rg-empty__title { margin-top: 14px; font-family: var(--rg-serif); font-size: 20px; color: var(--rg-ivory); } .rg-empty__body { margin: 8px auto 0; max-width: 420px; font-size: 13.5px; line-height: 1.75; font-weight: 300; color: var(--rg-warm); } .rg-empty__act { margin-top: 22px; } /* "We do not know this value" — deliberately NOT the same as a real zero. A zero is a fact ("0 addresses"); this is the absence of a fact. Dashed underline + uppercase dim text so the two can never be read as each other. */ .rg-unknown { display: inline-block; font-family: var(--rg-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; /* --rg-warm, NOT --rg-dim. This is the vocabulary the whole build uses to say "we do not know", so it must be the most readable it can be, not the least. On --rg-dim it measured 2.64:1 against every surface — a WCAG AA failure (needs 4.5:1), which meant the honest-unknown treatment was undermined by its own styling. --rg-warm is 7.10:1. The DASHED RULE is what signals "unknown"; dimming the text was never carrying that meaning, it was only making the fact harder to read. */ color: var(--rg-warm); border-bottom: 1px dashed rgba(var(--rg-gold-rgb), 0.28); padding-bottom: 2px; white-space: nowrap; } .rg-unknown--sm { font-size: 9.5px; letter-spacing: 0.18em; } /* Inside a stat card the serif number is replaced wholesale by this. */ .rg-stat__value .rg-unknown { font-size: 12px; } /* Explanatory copy for a control that is legitimately unavailable. */ .rg-hint { display: block; margin-top: 8px; font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; color: var(--rg-warm); font-weight: 300; } .rg-hint--inline { display: inline-block; margin-top: 0; margin-inline-start: 12px; } /* An empty hint must not reserve space. Promoted from registry-settings.css: this follows the CLASS, not the placement, so every consumer wants it. */ .rg-hint:empty { display: none; } /* Inline error. Terracotta, with a rule on the leading edge. */ .rg-err { font-size: 12.5px; letter-spacing: 0.06em; color: var(--rg-danger); } .rg-err--block { padding: 16px 20px; border-inline-start: 2px solid var(--rg-danger); background: rgba(var(--rg-danger-rgb), 0.05); line-height: 1.6; } .rg-ok { font-size: 11.5px; letter-spacing: 0.08em; color: var(--rg-ok); } /* Toast (RegistryUI.toast). Bottom-centre, sharp, above everything. */ .rg-toasts { position: fixed; inset-inline: 0; bottom: 24px; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding-inline: 16px; } .rg-toast { pointer-events: auto; max-width: 460px; border: 1px solid var(--rg-line-3); background: var(--rg-surface-2); color: var(--rg-ivory); padding: 14px 20px; font-size: 13px; line-height: 1.5; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); animation: rg-fade 0.28s ease both; } .rg-toast--ok { border-color: rgba(var(--rg-ok-rgb), 0.5); color: var(--rg-ok); } .rg-toast--danger { border-color: rgba(var(--rg-danger-rgb), 0.55); color: var(--rg-danger); } /* --------------------------------------------------------------------------- 10. TICKER ------------------------------------------------------------------------ */ .rg-ticker { border-top: 1px solid rgba(var(--rg-gold-rgb), 0.14); border-bottom: 1px solid rgba(var(--rg-gold-rgb), 0.14); padding: 15px 0; overflow: hidden; } .rg-ticker__track { display: flex; width: max-content; animation: rg-mq 46s linear infinite; font-size: 12.5px; letter-spacing: 0.12em; color: var(--rg-warm); white-space: nowrap; direction: ltr; } /* Duplicate this run EXACTLY once — the -50% loop depends on it. */ .rg-ticker__run { padding-inline-end: 60px; } .rg-ticker__sep { color: var(--rg-gold); } /* --------------------------------------------------------------------------- 11. BENTO DOMAIN GRID ------------------------------------------------------------------------ */ .rg-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--rg-gap); } .rg-bento__card { grid-column: span 2; cursor: pointer; border: 1px solid var(--rg-line-2); background: var(--rg-surface); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; text-align: start; color: inherit; font: inherit; transition: border-color var(--rg-t-slow), transform var(--rg-t-slow); } .rg-bento__card:hover, .rg-bento__card:focus-visible { border-color: var(--rg-line-max); transform: translateY(-3px); } .rg-bento__card--flagship { grid-column: span 4; padding: 36px; min-height: 250px; } .rg-bento__card--ultra { border-color: var(--rg-line-4); background: var(--rg-tint); padding: 36px; } .rg-bento__card--ultra:hover, .rg-bento__card--ultra:focus-visible { border-color: rgba(var(--rg-gold-rgb), 0.8); } .rg-bento__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .rg-bento__word { font-family: var(--rg-serif); font-size: 40px; line-height: 1; color: var(--rg-ivory); overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; } .rg-bento__card--flagship .rg-bento__word, .rg-bento__card--ultra .rg-bento__word { font-size: 64px; } .rg-bento__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .rg-bento__desc { font-size: 13px; color: var(--rg-warm); font-weight: 300; } .rg-bento__card--flagship .rg-bento__desc { font-size: 14px; } .rg-bento__from { flex: none; font-size: 12.5px; color: var(--rg-gold); letter-spacing: 0.08em; white-space: nowrap; } /* Not yet provisionable: still in the portfolio, plainly not for sale. */ .rg-bento__card--soon { cursor: default; } .rg-bento__card--soon:hover, .rg-bento__card--soon:focus-visible { transform: none; border-color: var(--rg-line-2); } .rg-bento__card--soon .rg-bento__word { color: var(--rg-warm); } .rg-bento__card--soon .rg-bento__from { color: var(--rg-warm); } /* --------------------------------------------------------------------------- 12. HOW IT WORKS ------------------------------------------------------------------------ */ .rg-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; } .rg-how__col { border-top: 1px solid rgba(var(--rg-gold-rgb), 0.35); padding-top: 26px; } .rg-how__idx { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .rg-how__num { font-family: var(--rg-serif); font-size: 15px; letter-spacing: 0.2em; color: var(--rg-gold); } .rg-how__ar { font-family: var(--rg-arabic); font-size: 16px; color: var(--rg-gold); } .rg-how__title { margin-top: 18px; font-family: var(--rg-serif); font-size: var(--rg-h4); color: var(--rg-ivory); } .rg-how__body { margin: 10px 0 0; } /* --------------------------------------------------------------------------- 13. TARIFF ------------------------------------------------------------------------ */ .rg-tariff { margin-top: 34px; } .rg-tariff__row { display: grid; grid-template-columns: 1fr 180px 180px 220px; gap: 20px; align-items: baseline; padding: 24px 8px; border-bottom: 1px solid rgba(var(--rg-gold-rgb), 0.1); transition: background var(--rg-t-fast); } .rg-tariff__row:hover { background: var(--rg-wash); } .rg-tariff__row--head { padding: 14px 8px; border-bottom: 1px solid var(--rg-line-3); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rg-warm); align-items: center; } .rg-tariff__row--head:hover { background: transparent; } .rg-tariff__domain { font-family: var(--rg-serif); font-size: 26px; color: var(--rg-ivory); direction: ltr; unicode-bidi: isolate; } .rg-tariff__num { text-align: end; font-size: 15px; color: var(--rg-ivory); font-variant-numeric: tabular-nums; } .rg-tariff__num--sub { color: var(--rg-warm); } .rg-tariff__char { text-align: end; font-size: 12.5px; color: var(--rg-warm); } .rg-tariff__note { margin: 22px 8px 0; font-size: 12.5px; line-height: 1.8; color: var(--rg-warm); font-weight: 300; } /* --------------------------------------------------------------------------- 14. CONCIERGE / CARDS ------------------------------------------------------------------------ */ .rg-concierge { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rg-gap); } .rg-card { border: 1px solid var(--rg-line-2); background: var(--rg-surface); padding: 36px; } .rg-card--tight { padding: 22px 24px; } .rg-card--panel { background: var(--rg-surface-2); border-color: var(--rg-line-soft); padding: 28px 30px; } .rg-card--tint { border-color: rgba(var(--rg-gold-rgb), 0.28); background: var(--rg-tint-soft); } .rg-card--danger { border-color: rgba(var(--rg-danger-rgb), 0.35); background: rgba(var(--rg-danger-rgb), 0.04); padding: 24px 30px; } .rg-card--danger .rg-card__title, .rg-card--danger .rg-h5 { color: var(--rg-danger); } .rg-card__title { margin-top: 14px; font-family: var(--rg-serif); font-size: var(--rg-h4); color: var(--rg-ivory); } .rg-card__body { margin: 12px 0 0; font-size: 14px; line-height: 1.75; color: var(--rg-warm); font-weight: 300; text-wrap: pretty; } .rg-card__link { display: inline-block; margin-top: 18px; font-size: 12px; letter-spacing: 0.18em; font-weight: 600; text-transform: uppercase; } /* --------------------------------------------------------------------------- 15. FOOTER + GOLD SHEEN ------------------------------------------------------------------------ */ .rg-footer { border-top: 1px solid var(--rg-line); padding: 44px var(--rg-gutter); display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; } .rg-footer__brand { display: flex; align-items: center; gap: 12px; } .rg-footer__legal { font-size: 11.5px; color: var(--rg-warm); } /* The © YEAR sits outside the translated sentence so I18n cannot overwrite it (see RegistryUI.footer). It is LTR-isolated so the digits do not reorder when the surrounding line is Arabic. */ .rg-footer__year { direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .rg-footer__sheen { font-size: 11.5px; letter-spacing: 0.2em; font-weight: 600; text-align: center; background-image: linear-gradient( 100deg, #8a7a57 0%, #c9a96a 22%, #f6e3b4 40%, #fff7df 50%, #f6e3b4 60%, #c9a96a 78%, #8a7a57 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rg-sheen 3.6s linear infinite; } /* Engines without background-clip:text still get legible gold. */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .rg-footer__sheen { color: var(--rg-gold); background-image: none; animation: none; } } /* --------------------------------------------------------------------------- 15b. FOOTER NAVIGATION — the categorised link list Markup is RegistryUI.footerNav(); the link map lives in registry-ui.js and nowhere else. This block styles it and nothing else in section 15. IT SITS IN TWO HOSTS, so it must not assume either one: .rg-footer the standard footer — a wrapping flex row. The nav is given a whole line of its own with flex-basis 100%, and the brand / sheen / legal row keeps its space-between layout on the line below. .rga-foot the slim auth-page footer — a plain block that CENTRES its text, hence the explicit text-align:start below. COLOUR IS A CORRECTNESS ISSUE HERE, not taste. Measured on --rg-ink (#0e0d0b) / --rg-surface (#12100d): --rg-warm #a79e8c 7.32 / 7.16 : 1 links --rg-gold #c9a96a 8.66 / 8.47 : 1 group headings --rg-ivory #f3eee3 16.79 /16.42 : 1 hover + focus --rg-muted #6e655a 3.40 / 3.32 : 1 FAILS AA — not used here --rg-muted is the obvious pick for footer microcopy and it is exactly the wrong one below 24px. Nothing in this block may use it. RTL comes from logical properties only; there is no [dir=rtl] rule here and there must not need to be. ------------------------------------------------------------------------ */ .rg-footer-nav { /* Full line inside .rg-footer, ordinary block inside .rga-foot. */ flex: 1 0 100%; text-align: start; padding-block-end: 34px; border-block-end: 1px solid var(--rg-line-row); /* WITHOUT THIS THE WHOLE PAGE SCROLLS SIDEWAYS ON A PHONE. A flex item defaults to `min-width: auto`, so it refuses to shrink below its content's min-content width. The column grid below asks for four 140px tracks plus three 26px gaps = 638px, so this item stayed 638px wide inside a 390px viewport and took the document with it: 264px of horizontal overflow on EVERY page carrying the footer, in both languages. The `auto-fit` rule was right all along — it simply never received a constrained width to fit into. */ min-width: 0; } /* The page-side container is a bare
; it must not become a second box. min-width: 0 for the same reason as above — it is a flex item too, and one unshrinkable link in the chain is enough to push the page out. */ .rg-footer > [data-rg-footer], .rga-foot > [data-rg-footer] { flex: 1 0 100%; display: block; min-width: 0; } /* THE BACKGROUND CANVAS WOULD OTHERWISE PAINT OVER IT. .rg-canvas / .rg-bg are `position: fixed; z-index: 0` — positioned, so they paint in a LATER layer than any in-flow unpositioned block, whatever the source order. On claim.html and success.html the container is a direct child of with no .rg-page or .rg-above wrapper around it, so the ID-rain would animate across the footer links. One layer of its own fixes it, and it is inert inside the wrappers that already establish z-index 1. */ [data-rg-footer] { position: relative; z-index: 1; } .rg-footer-nav__cols { display: grid; /* 4 tracks at 1200px, 2 at 360px, 1 below ~330px. auto-fit rather than auto-fill so four groups never leave a phantom fifth column. */ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px; /* Same measure as the page content. No auto margin: the block aligns to the inline start, mirroring with the document direction. */ max-width: var(--rg-maxw); } .rg-footer-nav__head { margin: 0 0 10px; font-family: var(--rg-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rg-gold); } .rg-footer-nav__list { margin: 0; padding: 0; list-style: none; } .rg-footer-nav__item { margin: 0; } .rg-footer-nav__link { display: flex; align-items: center; min-height: 36px; font-size: 12.5px; line-height: 1.5; font-weight: 300; color: var(--rg-warm); text-decoration: none; transition: color var(--rg-t-fast); } .rg-footer-nav__link:hover, .rg-footer-nav__link:focus-visible { color: var(--rg-ivory); } /* The page you are already on. `aria-current="page"` is set alongside this in registry-ui.js — the class is the sighted half of the same statement. */ .rg-footer-nav__link.is-here { color: var(--rg-gold); cursor: default; } /* Sign in / create an account. Its own row under the columns. */ .rg-footer-nav__auth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin: 0; padding: 20px 0 0; list-style: none; max-width: var(--rg-maxw); } .rg-footer-nav__auth-item { margin: 0; } .rg-footer-nav__auth-link { display: flex; align-items: center; min-height: 36px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rg-gold); text-decoration: none; transition: color var(--rg-t-fast); } .rg-footer-nav__auth-link:hover, .rg-footer-nav__auth-link:focus-visible { color: var(--rg-gold-hi); } .rg-footer-nav__auth-link.is-here { color: var(--rg-ivory); cursor: default; } /* Touch. 36px is a comfortable desktop row; a finger needs 44. Both conditions in one rule so a coarse pointer on a wide screen is covered too. */ @media (max-width: 900px), (pointer: coarse) { .rg-footer-nav__link, .rg-footer-nav__auth-link { min-height: 44px; } } /* A twenty-four link nav is noise on a printed receipt or certificate. */ @media print { .rg-footer-nav { display: none !important; } } /* --------------------------------------------------------------------------- 16. BUTTONS ------------------------------------------------------------------------ */ .rg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-family: var(--rg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 34px; border: 1px solid transparent; background: transparent; color: var(--rg-gold); text-align: center; white-space: nowrap; transition: background var(--rg-t-fast), color var(--rg-t-fast), border-color var(--rg-t-fast); } .rg-btn--gold { background: var(--rg-gold); color: var(--rg-ink); border-color: var(--rg-gold); } .rg-btn--gold:hover, .rg-btn--gold:focus-visible { background: var(--rg-gold-hi); border-color: var(--rg-gold-hi); color: var(--rg-ink); } .rg-btn--outline { border-color: var(--rg-line-hi); color: var(--rg-gold); } .rg-btn--outline:hover, .rg-btn--outline:focus-visible { background: var(--rg-gold); color: var(--rg-ink); border-color: var(--rg-gold); } .rg-btn--quiet { border-color: rgba(var(--rg-gold-rgb), 0.25); color: var(--rg-warm); } .rg-btn--quiet:hover, .rg-btn--quiet:focus-visible { color: var(--rg-ivory); border-color: var(--rg-line-4); } .rg-btn--ghost { border-color: transparent; padding: 6px 0; letter-spacing: 0.18em; color: var(--rg-gold); } .rg-btn--ghost:hover, .rg-btn--ghost:focus-visible { color: var(--rg-ivory); background: transparent; } .rg-btn--danger { border-color: rgba(var(--rg-danger-rgb), 0.5); color: var(--rg-danger); } .rg-btn--danger:hover, .rg-btn--danger:focus-visible { background: var(--rg-danger); color: var(--rg-ink); } .rg-btn--block { width: 100%; padding: 20px; font-size: 12.5px; letter-spacing: 0.24em; } .rg-btn--sm { padding: 9px 16px; font-size: 10px; letter-spacing: 0.18em; } .rg-btn--md { padding: 13px 24px; font-size: 10.5px; letter-spacing: 0.22em; } .rg-btn[disabled], .rg-btn.is-disabled, .rg-btn[aria-disabled='true'] { cursor: not-allowed; background: transparent; color: var(--rg-dim); border-color: rgba(var(--rg-gold-rgb), 0.18); } .rg-btn--gold[disabled], .rg-btn--gold.is-disabled, .rg-btn--gold[aria-disabled='true'] { background: var(--rg-gold-dim); border-color: var(--rg-gold-dim); color: rgba(14, 13, 11, 0.55); } /* Deliberately unavailable, not broken. A dashed edge reads as "this control exists and is intentionally closed" — use it with `.rg-hint` copy saying why (pending address, domain not yet in Workspace, etc). */ .rg-btn--unavailable, .rg-btn--unavailable[disabled], .rg-btn--unavailable.is-disabled { border-style: dashed; border-color: rgba(var(--rg-gold-rgb), 0.28); background: transparent; color: var(--rg-dim); cursor: not-allowed; } .rg-btn--unavailable:hover, .rg-btn--unavailable:focus-visible { border-color: rgba(var(--rg-gold-rgb), 0.28); background: transparent; color: var(--rg-dim); } /* Loading: label hidden, three blinking dots, width preserved. */ .rg-btn.is-loading { cursor: progress; color: transparent; position: relative; } .rg-btn.is-loading::after { content: '· · ·'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; letter-spacing: 0.3em; color: var(--rg-ink); animation: rg-blink 1s infinite; } .rg-btn--outline.is-loading::after, .rg-btn--ghost.is-loading::after, .rg-btn--quiet.is-loading::after, .rg-btn--danger.is-loading::after { color: var(--rg-gold); } /* Quick-action tile. */ .rg-tile { border: 1px solid var(--rg-line-2); background: transparent; padding: 20px 22px; color: var(--rg-ivory); display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; font-family: var(--rg-sans); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; transition: border-color var(--rg-t), color var(--rg-t); } .rg-tile:hover, .rg-tile:focus-visible { border-color: rgba(var(--rg-gold-rgb), 0.6); color: var(--rg-ivory); } .rg-tile__arrow { color: var(--rg-gold); } /* --------------------------------------------------------------------------- 17. FORMS — underline style ------------------------------------------------------------------------ */ .rg-form { display: grid; gap: 22px; } .rg-form--tight { gap: 18px; } .rg-field { display: block; min-width: 0; } .rg-field__label { display: block; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rg-warm); margin-bottom: 8px; } .rg-field__input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(var(--rg-gold-rgb), 0.25); padding: 12px 2px; font-size: 15px; color: var(--rg-ivory); outline: none; transition: border-color var(--rg-t-fast); } .rg-field__input:hover { border-bottom-color: var(--rg-line-4); } .rg-field__input:focus, .rg-field__input:focus-visible { border-bottom-color: var(--rg-gold); outline: none; } .rg-field__input--sm { padding: 10px 2px; font-size: 14px; } .rg-field__input[disabled], .rg-field__input[readonly] { color: var(--rg-dim); border-bottom-color: rgba(var(--rg-gold-rgb), 0.12); cursor: not-allowed; } /* `.is-invalid` is accepted alongside the wrapper and the ARIA attribute because the DEPRECATED `.rg-input` supported it and the canonical name did not: a rename-only migration would have dropped the invalid state SILENTLY, with no gate failing and the field simply never turning terracotta again — visible only when a real customer mistyped an email. Prefer `aria-invalid='true'`, which the screen reader and the stylesheet read from the same source and so cannot drift; `.is-invalid` exists to make the migration safe, not to be the new way. */ .rg-field--error .rg-field__input, .rg-field__input.is-invalid, .rg-field__input[aria-invalid='true'] { border-bottom-color: var(--rg-danger); } .rg-field--error .rg-field__label, .rg-field__input.is-invalid ~ .rg-field__label { color: var(--rg-danger); } .rg-field__input.is-valid { border-bottom-color: var(--rg-ok); } .rg-field--ok .rg-field__input { border-bottom-color: var(--rg-ok); } .rg-field__err { margin-top: 8px; font-size: 12px; color: var(--rg-danger); } .rg-field-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; } .rg-form__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rg-form__hint { margin-top: 16px; text-align: center; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rg-warm); } /* --------------------------------------------------------------------------- 18. CLAIM / ORDER / CONFIRMATION ------------------------------------------------------------------------ */ .rg-claim { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; margin-top: 64px; align-items: start; } .rg-claim__addr { margin: 30px 0 0; font-family: var(--rg-serif-ar); font-weight: 400; font-size: 58px; line-height: 1.1; color: var(--rg-ivory); overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; } /* The reservation countdown chip. */ .rg-hold { display: inline-block; font-family: var(--rg-serif); font-size: 15px; color: var(--rg-ivory); border: 1px solid var(--rg-line-4); padding: 6px 12px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .rg-hold--warn { color: var(--rg-danger); border-color: rgba(var(--rg-danger-rgb), 0.6); } .rg-hold--expired { color: var(--rg-dim); border-color: rgba(var(--rg-gold-rgb), 0.2); } /* Roman-numeral fact list. */ .rg-facts { margin-top: 48px; max-width: 460px; } .rg-facts__row { border-top: 1px solid var(--rg-line-soft); padding: 18px 4px; display: flex; gap: 16px; align-items: baseline; } .rg-facts__row:last-child { border-bottom: 1px solid var(--rg-line-soft); } .rg-facts__num { flex: none; font-family: var(--rg-serif); color: var(--rg-gold); font-size: 14px; } .rg-facts__text { font-size: 14px; color: var(--rg-warm); font-weight: 300; } .rg-order { border: 1px solid var(--rg-line-3); background: var(--rg-surface-2); padding: 42px; } .rg-order__line { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; color: var(--rg-ivory); } .rg-order__line:first-of-type { margin-top: 26px; } .rg-order__line-label { color: var(--rg-warm); font-weight: 300; } .rg-order__total { margin-top: 24px; border-top: 1px solid var(--rg-line-3); padding-top: 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .rg-order__total-value { font-family: var(--rg-serif); font-size: 30px; color: var(--rg-gold); direction: ltr; unicode-bidi: isolate; } .rg-done { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 80px var(--rg-gutter); position: relative; overflow: hidden; } .rg-done__inner { position: relative; text-align: center; max-width: 640px; animation: rg-fade 0.8s ease both; } .rg-done__medal { width: 88px; height: 88px; margin: 0 auto; border: 1px solid rgba(var(--rg-gold-rgb), 0.6); display: flex; align-items: center; justify-content: center; font-family: var(--rg-serif); font-size: 34px; color: var(--rg-gold); } .rg-check { margin: 44px auto 0; max-width: 440px; text-align: start; } .rg-check__row { border-top: 1px solid var(--rg-line-soft); padding: 15px 4px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; } .rg-check__row:last-child { border-bottom: 1px solid var(--rg-line-soft); } .rg-check__label { color: var(--rg-warm); font-weight: 300; } .rg-check__state { color: var(--rg-warm); letter-spacing: 0.14em; font-size: 11px; text-transform: uppercase; white-space: nowrap; } .rg-check__state--done { color: var(--rg-gold); } .rg-check__state--ok { color: var(--rg-ok); } .rg-actions { margin-top: 44px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* --------------------------------------------------------------------------- 19. ACCOUNT SHELL ------------------------------------------------------------------------ */ .rg-app { min-height: 100vh; display: flex; position: relative; z-index: 1; } .rg-side { position: sticky; top: 0; height: 100vh; width: var(--rg-side-w); flex: none; display: flex; flex-direction: column; border-inline-end: 1px solid var(--rg-line); background: var(--rg-side-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 26px 18px 22px; z-index: 2; } .rg-side__brand { display: flex; align-items: center; gap: 11px; padding-inline: 6px; } .rg-side__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 38px; } .rg-side__item { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: start; cursor: pointer; background: transparent; border: none; border-inline-start: 2px solid transparent; padding: 12px 14px; font-family: var(--rg-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rg-warm); transition: color var(--rg-t-fast), background var(--rg-t-fast), border-color var(--rg-t-fast); } .rg-side__item:hover, .rg-side__item:focus-visible { color: var(--rg-ivory); background: var(--rg-wash-2); } .rg-side__item--active, .rg-side__item[aria-current='page'] { color: var(--rg-ivory); background: rgba(var(--rg-gold-rgb), 0.08); border-inline-start-color: var(--rg-gold); } .rg-side__ar { font-family: var(--rg-arabic); font-size: 13px; color: var(--rg-gold-dim); letter-spacing: 0; text-transform: none; } .rg-side__foot { margin-top: auto; } .rg-side__user { display: flex; align-items: center; gap: 11px; padding: 14px 6px; border-top: 1px solid rgba(var(--rg-gold-rgb), 0.14); } .rg-side__name { font-size: 12.5px; color: var(--rg-ivory); font-weight: 500; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rg-side__mail { font-size: 10.5px; color: var(--rg-warm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; unicode-bidi: isolate; } .rg-side__back { display: block; padding: 10px 6px 0; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rg-gold-dim); } .rg-side__back:hover { color: var(--rg-ivory); } .rg-avatar { width: 34px; height: 34px; flex: none; border: 1px solid rgba(var(--rg-gold-rgb), 0.5); display: flex; align-items: center; justify-content: center; font-family: var(--rg-serif); font-size: 13px; color: var(--rg-gold); } .rg-avatar--lg { width: 56px; height: 56px; font-size: 19px; } .rg-main { flex: 1; min-width: 0; position: relative; padding: 34px 46px 90px; } .rg-main__inner { max-width: 1080px; margin: 0 auto; } .rg-view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .rg-view-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* --------------------------------------------------------------------------- 20. STATS, STRIP, BANNER ------------------------------------------------------------------------ */ .rg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rg-gap); } .rg-stats--3 { grid-template-columns: repeat(3, 1fr); } .rg-stats--2 { grid-template-columns: 1.6fr 1fr; } .rg-stat { border: 1px solid var(--rg-line-soft); background: var(--rg-surface); padding: 22px 24px; } .rg-stat--sm { padding: 18px 22px; } .rg-stat--hi { border-color: rgba(var(--rg-gold-rgb), 0.28); background: var(--rg-tint-soft); } .rg-stat__label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rg-warm); } .rg-stat--hi .rg-stat__label { color: var(--rg-warm); } .rg-stat__value { margin-top: 10px; font-family: var(--rg-serif); font-size: 30px; line-height: 1.1; color: var(--rg-ivory); direction: ltr; unicode-bidi: isolate; } .rg-stat__value--sm { font-size: 26px; margin-top: 8px; } .rg-stat__value--gold { color: var(--rg-gold); } .rg-stat__value--ok { color: var(--rg-ok); } /* No number yet? Say so. Never a placeholder that looks real. --rg-warm for the same reason as .rg-unknown: an absent measurement is a fact the user needs to read, and --rg-dim failed AA at 2.64:1. */ .rg-stat__value--empty { font-family: var(--rg-sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rg-warm); } .rg-stat__note { margin-top: 4px; font-size: 11.5px; color: var(--rg-warm); } .rg-stat__note--gold { color: var(--rg-gold); } .rg-stat__note--muted { color: var(--rg-warm); } /* Primary-address hero card. */ .rg-hero-card { border: 1px solid rgba(var(--rg-gold-rgb), 0.28); background: var(--rg-tint-soft); padding: 30px 34px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; } .rg-hero-card__addr { margin-top: 12px; font-family: var(--rg-serif); font-size: clamp(24px, 3vw, 38px); color: var(--rg-ivory); overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; } .rg-hero-card__count { font-family: var(--rg-serif); font-size: 44px; line-height: 1; color: var(--rg-gold); } .rg-strip { border: 1px solid var(--rg-line-soft); background: var(--rg-surface); padding: 16px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rg-strip__text { font-size: 13px; color: var(--rg-warm); font-weight: 300; } .rg-strip__meta { margin-inline-start: auto; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rg-warm); } .rg-banner { border: 1px solid var(--rg-line-hi); background: var(--rg-wash-2); padding: 18px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rg-banner__addr { font-family: var(--rg-serif); font-size: 15px; color: var(--rg-gold); direction: ltr; unicode-bidi: isolate; } .rg-banner__text { font-size: 13px; color: var(--rg-warm); font-weight: 300; } .rg-banner__act { margin-inline-start: auto; } .rg-banner--danger { border-color: rgba(var(--rg-danger-rgb), 0.45); background: rgba(var(--rg-danger-rgb), 0.05); } .rg-banner--danger .rg-banner__addr { color: var(--rg-danger); } /* Count bubble on the ALERTS button. */ .rg-has-count { position: relative; } .rg-count { position: absolute; top: -6px; inset-inline-end: -6px; width: 16px; height: 16px; background: var(--rg-gold); color: var(--rg-ink); font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------------------- 21. TABLES ------------------------------------------------------------------------ */ .rg-table { border: 1px solid var(--rg-line-soft); background: var(--rg-surface-2); } .rg-table__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 24px; border-bottom: 1px solid var(--rg-line-row-2); } .rg-table__title { font-family: var(--rg-serif); font-size: 18px; color: var(--rg-ivory); } .rg-table__sub { font-size: 11.5px; color: var(--rg-warm); margin-top: 2px; } .rg-table__foot { padding: 14px 24px; font-size: 11px; color: var(--rg-warm); } .rg-table__row { display: grid; gap: 14px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--rg-line-row); transition: background var(--rg-t-fast); } .rg-table__row:last-child { border-bottom: none; } .rg-table__row:hover { background: var(--rg-wash); } .rg-table__row--cols { padding: 14px 24px; border-bottom: 1px solid var(--rg-line-3); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rg-warm); } .rg-table__row--cols:hover { background: transparent; } .rg-table__addr { font-family: var(--rg-serif); font-size: 19px; color: var(--rg-ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .rg-table__date { font-size: 12px; color: var(--rg-warm); white-space: nowrap; } .rg-table__amt { font-size: 13px; color: var(--rg-warm); text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; } .rg-table__desc { font-size: 13px; color: var(--rg-ivory); } .rg-table__ref { color: var(--rg-warm); font-size: 11px; } .rg-table__state { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; text-align: end; color: var(--rg-ok); white-space: nowrap; } .rg-table__state--pending { color: var(--rg-gold); } .rg-table__state--off { color: var(--rg-dim); } .rg-table__state--danger { color: var(--rg-danger); } /* Column templates the account views share. */ .rg-cols--acq { grid-template-columns: 1fr 150px 130px 110px; } .rg-cols--hist { grid-template-columns: 130px 1fr 130px 90px; } .rg-cols--renew { grid-template-columns: minmax(130px, 1.4fr) minmax(100px, 1fr) 110px 125px; } .rg-cols--addr { grid-template-columns: minmax(150px, 1.6fr) minmax(90px, 1fr) 105px 96px 30px; } /* Address row + its expander. */ .rg-table__row--addr { padding: 20px 24px; } .rg-addr-name { font-family: var(--rg-serif); font-size: 21px; color: var(--rg-ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .rg-addr-name--pending { color: var(--rg-gold); } .rg-addr-plan { font-size: 11px; color: var(--rg-warm); margin-top: 3px; } .rg-addr-renew { font-size: 12px; color: var(--rg-warm); white-space: nowrap; } .rg-expand { cursor: pointer; background: none; border: none; color: var(--rg-gold); font-size: 14px; font-family: var(--rg-sans); line-height: 1; padding: 4px; transition: color var(--rg-t-fast); } .rg-expand:hover, .rg-expand:focus-visible { color: var(--rg-ivory); } .rg-expand__panel { padding: 18px 24px 24px; border-bottom: 1px solid var(--rg-line-row); background: rgba(var(--rg-gold-rgb), 0.025); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .rg-expand__facts { display: flex; gap: 34px; flex-wrap: wrap; font-size: 12px; color: var(--rg-warm); } .rg-expand__acts { display: flex; gap: 10px; flex-wrap: wrap; } /* --------------------------------------------------------------------------- 22. CHIPS ------------------------------------------------------------------------ */ .rg-chips { display: flex; gap: 8px; flex-wrap: wrap; } .rg-chip { cursor: pointer; background: transparent; border: 1px solid rgba(var(--rg-gold-rgb), 0.2); color: var(--rg-warm); font-family: var(--rg-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 16px; transition: color var(--rg-t-fast), border-color var(--rg-t-fast), background var(--rg-t-fast); } .rg-chip:hover, .rg-chip:focus-visible { color: var(--rg-ivory); border-color: rgba(var(--rg-gold-rgb), 0.6); } .rg-chip--active, .rg-chip[aria-pressed='true'], .rg-chip[aria-selected='true'] { color: var(--rg-gold); border-color: var(--rg-line-max); background: var(--rg-wash-2); } .rg-chip--ar { font-family: var(--rg-arabic); font-size: 13px; letter-spacing: 0; text-transform: none; } .rg-chip[disabled] { color: var(--rg-dim); cursor: not-allowed; border-color: rgba(var(--rg-gold-rgb), 0.12); } /* --------------------------------------------------------------------------- 23. PROGRESS ------------------------------------------------------------------------ */ .rg-progress { height: 3px; background: var(--rg-wash-3); overflow: hidden; } .rg-progress__bar { height: 3px; width: 0; background: var(--rg-gold); transition: width 0.4s ease; } /* No measurement available. A solid empty track reads as "0% used" and a full one as "you are out of space" — both are claims the server never made. The dashed rule says the same thing .rg-unknown says about a missing number. Applied by RegistryUI.progress() when quota is absent or zero. */ .rg-progress--unknown { background: transparent; height: 1px; border-top: 1px dashed rgba(var(--rg-gold-rgb), 0.28); } .rg-progress--unknown .rg-progress__bar { display: none; } .rg-progress__bar--full { background: var(--rg-danger); } .rg-progress__label { font-size: 10.5px; color: var(--rg-warm); margin-top: 6px; } /* --------------------------------------------------------------------------- 24. PILL TOGGLE (auto-renew) ------------------------------------------------------------------------ */ .rg-toggle { position: relative; cursor: pointer; width: 36px; height: 19px; flex: none; padding: 0; border: 1px solid rgba(var(--rg-gold-rgb), 0.25); background: transparent; transition: background var(--rg-t-fast), border-color var(--rg-t-fast); } .rg-toggle__knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 13px; height: 13px; background: var(--rg-muted); transition: inset-inline-start var(--rg-t-fast), background var(--rg-t-fast); } .rg-toggle--on, .rg-toggle[aria-checked='true'] { border-color: rgba(var(--rg-gold-rgb), 0.7); background: rgba(var(--rg-gold-rgb), 0.25); } .rg-toggle--on .rg-toggle__knob, .rg-toggle[aria-checked='true'] .rg-toggle__knob { inset-inline-start: 19px; background: var(--rg-gold); } .rg-toggle[disabled], .rg-toggle[aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; } .rg-toggle.is-busy { cursor: progress; } .rg-toggle-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } .rg-toggle-label { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--rg-warm); } .rg-toggle-label--on { color: var(--rg-ok); } /* --------------------------------------------------------------------------- 25. RTL — logical properties cover most of it; these are the leftovers ------------------------------------------------------------------------ */ [dir='rtl'] .rg-root, .rg-root[dir='rtl'] { text-align: right; } [dir='rtl'] .rg-ticker__track { direction: ltr; } /* Mobile sidebar-as-topbar keeps its active rule on the bottom edge. */ [dir='rtl'] .rg-toasts { direction: rtl; } /* --------------------------------------------------------------------------- 26. RESPONSIVE — gutters 48 → 24 → 16 at 900 / 560 (contract §2) ------------------------------------------------------------------------ */ @media (max-width: 900px) { :root { --rg-gutter: 24px; --rg-section-top: 76px; --rg-h1: 56px; --rg-h2: 36px; --rg-h3: 30px; } .rg-hero__at { font-size: 380px; top: -80px; inset-inline-end: -50px; } .rg-hero__at--start { font-size: 340px; } .rg-nav__burger { display: inline-block; } .rg-nav__links { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--rg-gutter) 20px; background: var(--rg-nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rg-line); } .rg-nav__links.is-open { display: flex; } .rg-nav__link, .rg-nav__cta { padding: 14px 0; text-align: start; } .rg-nav__cta { border-width: 1px 0 0 0; margin-top: 8px; padding: 16px 0; } .rg-bento { grid-template-columns: repeat(2, 1fr); } .rg-bento__card, .rg-bento__card--flagship, .rg-bento__card--ultra { grid-column: span 1; padding: 28px; min-height: 0; } .rg-bento__card--flagship .rg-bento__word, .rg-bento__card--ultra .rg-bento__word { font-size: 44px; } .rg-how { grid-template-columns: repeat(2, 1fr); gap: 28px; } .rg-concierge { grid-template-columns: 1fr; } .rg-claim { grid-template-columns: 1fr; gap: 44px; } .rg-claim__addr { font-size: 40px; } .rg-stats, .rg-stats--3 { grid-template-columns: repeat(2, 1fr); } .rg-stats--2 { grid-template-columns: 1fr; } .rg-row { grid-template-columns: 1fr auto; row-gap: 10px; } .rg-row__price, .rg-row__act { text-align: end; } .rg-tariff__row--head { display: none; } .rg-tariff__row { grid-template-columns: 1fr auto; row-gap: 6px; } .rg-tariff__char { grid-column: 1 / -1; text-align: start; } .rg-field-row { grid-template-columns: 1fr; } .rg-cols--acq, .rg-cols--hist, .rg-cols--renew, .rg-cols--addr { grid-template-columns: 1fr auto; row-gap: 8px; } /* Sidebar collapses to a top bar. */ .rg-app { flex-direction: column; } .rg-side { position: static; height: auto; width: 100%; border-inline-end: none; border-bottom: 1px solid var(--rg-line); padding: 16px var(--rg-gutter); } .rg-side__nav { flex-direction: row; overflow-x: auto; margin-top: 18px; gap: 2px; } .rg-side__item { border-inline-start: none; border-bottom: 2px solid transparent; white-space: nowrap; } .rg-side__item--active, .rg-side__item[aria-current='page'] { border-inline-start-color: transparent; border-bottom-color: var(--rg-gold); } .rg-side__ar { display: none; } .rg-side__foot { margin-top: 14px; } .rg-main { padding: 28px var(--rg-gutter) 72px; } } @media (max-width: 560px) { :root { --rg-gutter: 16px; --rg-section-top: 60px; --rg-h1: 40px; --rg-h2: 30px; --rg-h3: 26px; --rg-h4: 20px; } .rg-hero { padding-bottom: 56px; } .rg-hero__at { font-size: 240px; } .rg-hero__ar { font-size: 21px; margin-top: 26px; } .rg-bento { grid-template-columns: 1fr; } .rg-how { grid-template-columns: 1fr; } .rg-stats, .rg-stats--3 { grid-template-columns: 1fr; } .rg-section__head { flex-direction: column; align-items: flex-start; gap: 16px; } .rg-section__aside { text-align: start; max-width: none; } .rg-search { flex-wrap: wrap; } .rg-search__at { padding: 18px 0 0 18px; } .rg-search__input { flex-basis: 60%; padding: 14px 18px; font-size: 20px; } .rg-search__btn { flex: 1 0 100%; padding: 16px; } .rg-order { padding: 26px 22px; } .rg-card { padding: 26px 22px; } .rg-claim__addr { font-size: 32px; } .rg-hero-card { padding: 24px 22px; } .rg-footer { justify-content: flex-start; } } /* --------------------------------------------------------------------------- 27. REDUCED MOTION — kills all animation (contract §2). The canvas layers stop themselves in registry-bg.js (one static frame, then no rAF) and registry-decode.js no-ops. This covers CSS. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .rg-root *, .rg-root *::before, .rg-root *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .rg-ticker__track, .rg-footer__sheen, .rg-skeleton, .rg-dot--live { animation: none !important; } .rg-ticker__track { transform: none; } .rg-fade { animation: none; opacity: 1; transform: none; } .rg-bento__card:hover { transform: none; } .rg-skeleton { background-position: 50% 0; } } /* --------------------------------------------------------------------------- 28. COMPATIBILITY — v1 draft names ** DEPRECATED, STILL LOAD-BEARING ** A wholesale deletion was attempted and REVERTED: the audit found 20 of these names still referenced by 8 files. Owner confirmations said migration was complete; the tree disagreed. DO NOT DELETE ON A CONFIRMATION — re-run the audit, and check that the grep hit is live markup rather than a comment. The .rg-sidebar* family has since been removed, verified rather than assumed: registry-shell.js now emits the canonical .rg-side* names alongside the v1 ones on every element, and registry-account.css twins its 20 selectors. What remains blocking, by file: claim.html rg-above rg-btn--filled rg-input rg-form__err rg-hero__mark success.html rg-above rg-btn--filled rg-h1--done rg-seal dashboard.html rg-above rg-account rg-h1--account settings.html rg-above rg-account billing.html / owned-emails.html rg-account registry-claim.js rg-btn--filled registry-shell.js rg-medallion--account all six account/claim pages + shell rg-canvas Contract names are canonical; nothing new may be written against these. ------------------------------------------------------------------------ */ /* shell */ .rg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } .rg-above { position: relative; z-index: 1; } .rg-account { min-height: 100vh; display: flex; position: relative; z-index: 1; } .rg-nav:not(:has(.rg-nav__inner)) { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--rg-gutter); } .rg-nav__link.is-active { color: var(--rg-ivory); } /* The .rg-sidebar* family was DELETED here after verifying registry-shell.js emits the canonical .rg-side* names alongside the v1 ones on every element, and registry-account.css twins its 20 selectors. .rg-medallion--account is the one sidebar-era name still emitted untwinned (shell line 545); losing it would only resize the medallion 34px -> 36px, but it stays until twinned. */ .rg-medallion--account { width: 34px; height: 34px; } /* type */ .rg-h1--account { font-size: var(--rg-h3); line-height: 1.15; } /* hero + search */ /* results */ /* sections */ /* buttons + forms */ /* panels / tables / account */ .rg-chip.is-active { color: var(--rg-gold); border-color: var(--rg-line-max); background: var(--rg-wash-2); } .rg-toggle-label.is-on { color: var(--rg-ok); } .rg-hold.is-expiring { color: var(--rg-danger); border-color: rgba(var(--rg-danger-rgb), 0.6); } .rg-hold.is-expired { color: var(--rg-dim); border-color: rgba(var(--rg-gold-rgb), 0.2); } @media (max-width: 900px) { .rg-account { flex-direction: column; } } /* --------------------------------------------------------------------------- 29. PRINT — receipts and ownership certificates ------------------------------------------------------------------------ */ @media print { .rg-bg, .rg-canvas, .rg-nav, .rg-side, .rg-sidebar, .rg-ticker, .rg-toasts { display: none !important; } .rg-root { background: #fff; color: #111; } }