/* ═══════════════════════════════════════════════════════════════════ HALLMARK COMPAT LAYER — v2/legacy pages under design system v3 Loaded (after theme-v2.css and theme-v3.css) on every page that sets but was authored against the v2 "Aurora Glass" vocabulary or the pre-v2 legacy palette. It re-inks that vocabulary: 1. Remaps every v2 token and legacy token name to Hallmark values, so token-driven pages convert wholesale. 2. Kills the aurora, glassmorphism, glow shadows, and gradient text. 3. Flattens radii to 2px on the shared component set, restyles the floating nav pill into a printed header bar, and re-inks buttons, pills, cards, tables, and inputs. Pages rebuilt natively on .an-* classes don't use this vocabulary, so this file is inert on them beyond the token remaps. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. TOKEN REMAP ─────────────────────────────────────────────── */ /* v2 tokens (theme-v2.css defines these at :root; html[data-design] out-specifies :root on the same element). */ html[data-design="v3"] { --bg-0: var(--nr-canvas); --bg-1: var(--nr-surface); --ink: var(--nr-text); --ink-2: var(--nr-text-secondary); --muted: var(--nr-text-muted); --dim: #756B5E; --glass: var(--nr-surface); --glass-2: var(--nr-surface-raised); --border-v2: #322D27; --border-2: #4A443B; --a1: var(--nr-rust); /* violet -> seal */ --a2: var(--nr-text-secondary); /* cyan -> greige ink */ --a3: #C96F51; /* pink -> terracotta */ --a4: var(--nr-verified); /* mint -> cleared */ --a5: #D9A13B; /* gold -> pending */ --red-v2: #FF6B5E; --accent-v2: var(--nr-rust); --accent-2-v2: #C96F51; --accent-soft: rgba(201,87,58,.08); --accent-border: rgba(201,87,58,.28); --shadow-card: 0 8px 24px rgba(0,0,0,.4); --shadow-pop: 0 16px 40px rgba(0,0,0,.5); --r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-xl: 2px; --r-pill: 2px; /* legacy (pre-v2) token names, previously mapped by the theme.js shim */ --bg: var(--nr-canvas); --bg2: var(--nr-surface); --card: var(--nr-surface); --card2: var(--nr-surface-raised); --border: #322D27; --border2: #4A443B; --text: var(--nr-text); --text2: var(--nr-text-secondary); --green: var(--nr-verified); --orange: #D9A13B; --red: #FF6B5E; --cyan: var(--nr-text-secondary); --violet: var(--nr-rust); --accent: var(--nr-rust); --accent2: #C96F51; /* names used by shared enhancer scripts (agent-features.js etc.) whose hardcoded fallbacks would otherwise win on v3 pages */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --bg-root: var(--nr-canvas); --bg-card: var(--nr-surface); --bg-card-solid: var(--nr-surface); --bg-input: var(--nr-surface-raised); --bg-input-focus: var(--nr-surface-raised); --accent-hover: #ED5D36; --border-accent: #4A443B; --border-subtle: #322D27; --text-primary: var(--nr-text); --text-secondary: var(--nr-text-secondary); --text-muted: var(--nr-text-muted); } /* per-route accent blocks in theme-v2.css hardcode violet/pink/cyan rgba soft fills at body[data-accent] level; out-specify them all */ html[data-design="v3"] body[data-accent] { --accent-v2: var(--nr-rust); --accent-2-v2: #C96F51; --accent-soft: rgba(201,87,58,.08); --accent-border: rgba(201,87,58,.28); --accent: var(--nr-rust); --accent2: #C96F51; } /* ── 2. GROUND ──────────────────────────────────────────────────── */ html[data-design="v3"], html[data-design="v3"] body { background: var(--nr-canvas) !important; color: var(--ink); font-family: 'Switzer', ui-sans-serif, system-ui, -apple-system, sans-serif; } html[data-design="v3"] ::selection { background: rgba(201,87,58,.32); color: var(--nr-text); } html[data-design="v3"] :focus-visible { outline: 2px solid var(--nr-rust); outline-offset: 2px; } html[data-design="v3"] ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 0; } /* the aurora and its grid overlay are gone */ html[data-design="v3"] .aurora { display: none !important; } /* ── 3. TYPE ────────────────────────────────────────────────────── */ /* Headings authored against Outfit/Geist in page-local CSS: the voice is Switzer everywhere. !important because page styles load after the injected compat link and would win the tie. */ html[data-design="v3"] h1, html[data-design="v3"] h2, html[data-design="v3"] h3, html[data-design="v3"] h4, html[data-design="v3"] h5 { font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif !important; } /* Geist Mono / JetBrains Mono roles become Fragment Mono */ html[data-design="v3"] .kicker, html[data-design="v3"] .pill-v2, html[data-design="v3"] .tag-list .tag, html[data-design="v3"] .live-badge, html[data-design="v3"] .eyebrow, html[data-design="v3"] .status-pill, html[data-design="v3"] .crumbs, html[data-design="v3"] .mono, html[data-design="v3"] code, html[data-design="v3"] pre, html[data-design="v3"] kbd { font-family: 'Fragment Mono', 'IBM Plex Mono', ui-monospace, monospace; } /* gradient text becomes ink. !important beats the late-injected gradient-fix rule and per-page background-clip declarations. */ html[data-design="v3"] .em-grad, html[data-design="v3"] .grad, html[data-design="v3"] h1 em, html[data-design="v3"] h2 em, html[data-design="v3"] h3 em, html[data-design="v3"] .h-mega em, html[data-design="v3"] .h-page em, html[data-design="v3"] .h-section em, html[data-design="v3"] .foot-brand { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--ink) !important; font-style: normal; } /* headline weight discipline: v2 set 800-900 everywhere */ html[data-design="v3"] .h-mega, html[data-design="v3"] .h-page, html[data-design="v3"] .h-big, html[data-design="v3"] .sec-head h1, html[data-design="v3"] .sec-head h2, html[data-design="v3"] .page-head h1 { font-weight: 650; letter-spacing: -.02em; } /* ── 4. NAV: floating pill -> printed header bar ────────────────── */ html[data-design="v3"] .nav-wrap { position: sticky; top: 0; left: 0; transform: none; width: 100%; max-width: none; padding: 0; z-index: 90; background: var(--nr-canvas); border-bottom: 1px solid var(--border-v2); } html[data-design="v3"] .nav-pill { max-width: 1360px; margin: 0 auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 10px 24px; } html[data-design="v3"] .nav-pill ul a, html[data-design="v3"] .nav-links a { font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; } html[data-design="v3"] .nav-pill ul a.on::after { background: var(--nr-rust); box-shadow: none; border-radius: 0; width: 12px; height: 2px; } /* the conic-gradient orb becomes the seal ring */ html[data-design="v3"] .orb, html[data-design="v3"] .nav-pill .orb, html[data-design="v3"] .topbar-v2 .tb-brand .orb { background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2236%22%20fill=%22none%22%20stroke=%22%23ECEAE3%22%20stroke-width=%229%22%20stroke-dasharray=%2282.9%2030.2%22%20stroke-dashoffset=%2298%22/%3E%3Cpath%20d=%22M0%2041.5H100M0%2058.5H100%22%20fill=%22none%22%20stroke=%22%23C9573A%22%20stroke-width=%229%22/%3E%3C/svg%3E) center / contain no-repeat !important; box-shadow: none !important; border: none; border-radius: 0; animation: none !important; } html[data-design="v3"] .nav-logo { color: var(--ink) !important; letter-spacing: .08em; } /* legacy fixed .nav bar */ html[data-design="v3"] .nav { background: var(--nr-canvas) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--border-v2) !important; } /* in-product topbar */ html[data-design="v3"] .topbar-v2 { background: var(--nr-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border-v2); } /* ── 5. BUTTONS ─────────────────────────────────────────────────── */ html[data-design="v3"] .btn-v2 { border-radius: 2px; font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--border-2); background: transparent; } html[data-design="v3"] .btn-v2:hover { background: var(--nr-surface); border-color: var(--dim); } html[data-design="v3"] .btn-v2.primary { background: var(--nr-rust); border-color: var(--nr-rust); color: #16100D; font-weight: 700; box-shadow: none; } html[data-design="v3"] .btn-v2.primary:hover { background: #ED5D36; box-shadow: none; transform: none; } /* legacy gradient CTAs (reg-btn, button.btn, etc.) */ html[data-design="v3"] .reg-btn, html[data-design="v3"] button.btn:not(.ghost):not(.sm), html[data-design="v3"] .cta-btn, html[data-design="v3"] .btn-primary { background: var(--nr-rust) !important; color: #16100D !important; border-radius: 2px !important; box-shadow: none !important; } html[data-design="v3"] button.btn.ghost { border-radius: 2px !important; } /* ── 6. SURFACES: de-glass, flatten, hairline ───────────────────── */ html[data-design="v3"] .glass-panel, html[data-design="v3"] .rail-card, html[data-design="v3"] .ag-card, html[data-design="v3"] .mod, html[data-design="v3"] .chip, html[data-design="v3"] .card, html[data-design="v3"] .kpi, html[data-design="v3"] .did-item, html[data-design="v3"] .did-detail, html[data-design="v3"] .ag, html[data-design="v3"] .panel-card, html[data-design="v3"] .stat-card { background: var(--nr-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--border-v2) !important; border-radius: 2px !important; box-shadow: none !important; } html[data-design="v3"] .glass-panel::before, html[data-design="v3"] .ag-card::before, html[data-design="v3"] .mod::before { display: none !important; } html[data-design="v3"] .ag-card:hover, html[data-design="v3"] .mod:hover { transform: none !important; box-shadow: none !important; border-color: var(--border-2) !important; } /* pills, tags, badges: 2px corners, quiet */ html[data-design="v3"] .pill-v2, html[data-design="v3"] .tag-list .tag, html[data-design="v3"] .live-badge, html[data-design="v3"] .eyebrow, html[data-design="v3"] .status-pill, html[data-design="v3"] .badge, html[data-design="v3"] .nx-mode, html[data-design="v3"] .chain-net, html[data-design="v3"] .rev-badge, html[data-design="v3"] .step-pill { border-radius: 2px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* avatars: agents stay squares at 2px; people stay circles */ html[data-design="v3"] .ag-card .av, html[data-design="v3"] .ag-card .ag-icon, html[data-design="v3"] .big-av, html[data-design="v3"] .did-icon { border-radius: 2px !important; box-shadow: none !important; } /* ── 7. FORMS ───────────────────────────────────────────────────── */ html[data-design="v3"] input:not([type="checkbox"]):not([type="radio"]), html[data-design="v3"] select, html[data-design="v3"] textarea { background-color: var(--nr-surface-raised); border-color: var(--dim); border-radius: 2px; color: var(--ink); } html[data-design="v3"] input:focus, html[data-design="v3"] select:focus, html[data-design="v3"] textarea:focus { border-color: var(--nr-text-muted); box-shadow: none; outline: none; } /* ── 8. FOOTERS ─────────────────────────────────────────────────── */ html[data-design="v3"] .foot { border-top: 1px solid var(--border-v2); } html[data-design="v3"] .foot-links a { font-family: 'Fragment Mono', ui-monospace, monospace; } /* ── 9. MOTION DISCIPLINE ───────────────────────────────────────── */ /* the site is a still document: no drifting, spinning, or pulsing ambience on converted pages; entrance fades collapse to instants */ html[data-design="v3"] .blob { animation: none !important; } html[data-design="v3"] .fade-up { animation-duration: .01ms !important; } html[data-design="v3"] .live-badge::before, html[data-design="v3"] .eyebrow .pulse, html[data-design="v3"] .status-pill.active::before, html[data-design="v3"] .status-pill.running::before { animation: none !important; box-shadow: none; } /* ── 10. AUTH-NAV CHROME (mode toggle, avatar) ──────────────────── */ html[data-design="v3"] .an-mode-toggle { border-radius: 2px !important; background: var(--nr-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--border-2) !important; box-shadow: none !important; } html[data-design="v3"] .an-mode-toggle button { border-radius: 2px !important; font-family: 'Fragment Mono', ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--nr-text-muted) !important; } html[data-design="v3"] .an-mode-toggle button.on { background: var(--nr-rust) !important; color: #16100D !important; box-shadow: none !important; } html[data-design="v3"] .nav-me { border-radius: 2px !important; background: var(--nr-surface-raised) !important; color: var(--nr-text) !important; border: 1px solid var(--border-2) !important; } /* ── 11. SHARED-CHROME KILLS ────────────────────────────────────── */ /* agentnet-ui.js injects a violet radial "atmo-orb" into heroes */ html[data-design="v3"] .atmo-orb { display: none !important; } /* auth-nav.js account dropdown carries a blur(80px) glow pseudo */ html[data-design="v3"] .acc-menu-dropdown::before { display: none !important; } /* ── 12. THEME-V2 COMPONENT FAMILIES the token remap can't flatten ─ */ /* agent profile / hire rail */ html[data-design="v3"] .hire-panel { background: var(--nr-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--border-v2) !important; border-radius: 2px !important; box-shadow: none !important; } html[data-design="v3"] .hire-panel::before, html[data-design="v3"] .hire-panel::after { display: none !important; } html[data-design="v3"] .hire-panel .cta, html[data-design="v3"] .hire-panel .price-big { background: var(--nr-rust) !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; border-radius: 2px !important; box-shadow: none !important; } html[data-design="v3"] .hire-panel .price-big { background: none !important; color: var(--nr-accent-text) !important; } html[data-design="v3"] .tabs { border-radius: 2px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-design="v3"] .tabs .tab { border-radius: 2px !important; } html[data-design="v3"] .big-av, html[data-design="v3"] .creator-av, html[data-design="v3"] .av2, html[data-design="v3"] .av3 { background: var(--nr-surface-raised) !important; color: var(--nr-text) !important; box-shadow: none !important; } html[data-design="v3"] .big-av { border-radius: 2px !important; } html[data-design="v3"] .verified-lg { background: var(--nr-verified) !important; box-shadow: none !important; } html[data-design="v3"] .crumbs .back { border-radius: 2px !important; } html[data-design="v3"] .perf .bar, html[data-design="v3"] .bar-mini-fill { background: var(--nr-rust) !important; } /* a2a / nexus marketing families */ html[data-design="v3"] .stats-strip .v, html[data-design="v3"] .stats-strip [class^="s"] .v { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--nr-text) !important; } html[data-design="v3"] .edge-tint { display: none !important; } html[data-design="v3"] .live-tick { box-shadow: none !important; animation: none !important; } html[data-design="v3"] .chain-viz { border-radius: 2px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--nr-surface) !important; border: 1px solid var(--border-v2) !important; } html[data-design="v3"] .route-cta-card { background: var(--nr-surface) !important; border: 1px solid var(--border-v2) !important; border-radius: 2px !important; } html[data-design="v3"] .route-cta-card::before, html[data-design="v3"] .route-cta-card::after { display: none !important; } html[data-design="v3"] .route-cta-card .tag { border-radius: 2px !important; background: transparent !important; } html[data-design="v3"] .tier-card { border-radius: 2px !important; background: var(--nr-surface) !important; box-shadow: none !important; } html[data-design="v3"] .tier-card.featured { border-color: var(--nr-rust) !important; background: var(--nr-surface) !important; } html[data-design="v3"] .tier-card .tier-cta { background: var(--nr-rust) !important; color: #16100D !important; border-radius: 2px !important; box-shadow: none !important; } html[data-design="v3"] .phase-rail::before, html[data-design="v3"] .phase-rail::after { display: none !important; } html[data-design="v3"] .phase-rail { background: var(--nr-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 2px !important; } html[data-design="v3"] .phase-rail .phase .num { box-shadow: none !important; background: var(--nr-surface) !important; border-color: var(--border-2) !important; color: var(--nr-text-secondary) !important; font-family: 'Fragment Mono', ui-monospace, monospace !important; } html[data-design="v3"] .phase-rail .phase-rail-inner::before { background: var(--border-v2) !important; opacity: 1 !important; } html[data-design="v3"] .tier-card .tier-features .check { background: transparent !important; border-radius: 2px !important; } /* copilot side panel (studio / workspace / builder) */ html[data-design="v3"] .cp-panel { background: var(--nr-surface) !important; } html[data-design="v3"] .cp-panel::before, html[data-design="v3"] .cp-panel::after { display: none !important; } html[data-design="v3"] .cp-qa .qa { border-radius: 2px !important; } html[data-design="v3"] .cp-send { background: var(--nr-rust) !important; border-radius: 2px !important; box-shadow: none !important; } /* in-product topbar chips */ html[data-design="v3"] .topbar-v2 .tb-c, html[data-design="v3"] .topbar-v2 .mini-budget { border-radius: 2px !important; } html[data-design="v3"] .topbar-v2 .av-sm { background: var(--nr-surface-raised) !important; color: var(--nr-text) !important; border-radius: 2px !important; } html[data-design="v3"] .topbar-v2 .tb-c .dot, html[data-design="v3"] .topbar-v2 .mini-budget .coin { box-shadow: none !important; } /* ── 13. COMMAND PALETTE + ACCOUNT MENU + SEARCH PILL ───────────── */ html[data-design="v3"] .cmdk-pill { border-radius: 2px !important; background: var(--nr-surface) !important; border: 1px solid var(--border-2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-family: 'Fragment Mono', ui-monospace, monospace !important; box-shadow: none !important; color: var(--nr-text-secondary) !important; } html[data-design="v3"] .cmdk-pill .kbd { border-radius: 2px !important; } /* ── 14. LIGHT CANVAS ─────────────────────────────────────────────── The v2/legacy vocabulary above is written against the token names remapped in section 1, so light mode only has to restate those tokens plus the few places that assume a dark ground (heavy drop shadows, white-alpha fills). Everything token-driven flips for free. Driven by html[data-theme="light"] only. The legacy `.light` CLASS in theme.css is a separate blue palette and stays permanently off. */ html[data-design="v3"][data-theme="light"] { --border-v2: #E4DDD8; --border-2: #CFC7C1; --dim: #8A8177; --border: #E4DDD8; --border2: #CFC7C1; --border-accent: #CFC7C1; --border-subtle: #E4DDD8; --border-strong: #CFC7C1; --glass: var(--nr-surface); --glass-2: var(--nr-surface-raised); --accent-soft: rgba(201,87,58,.07); --accent-border: rgba(201,87,58,.30); --shadow-card: 0 4px 14px rgba(60,45,35,.09); --shadow-pop: 0 12px 30px rgba(60,45,35,.14); } /* white-alpha fills read as invisible on paper: give them a warm tint */ html[data-design="v3"][data-theme="light"] .acc-menu-theme { background: rgba(120,90,70,.05); } html[data-design="v3"][data-theme="light"] .acc-menu-theme .seg { background: rgba(120,90,70,.06); } html[data-design="v3"][data-theme="light"] .acc-menu-dropdown, html[data-design="v3"][data-theme="light"] #uc-panel, html[data-design="v3"][data-theme="light"] .mk-cmp-bar { box-shadow: 0 12px 30px rgba(60,45,35,.16) !important; } html[data-design="v3"][data-theme="light"] #uc-fab { box-shadow: 0 6px 18px rgba(60,45,35,.16) !important; } html[data-design="v3"][data-theme="light"] dialog::backdrop { background: rgba(60,45,35,.35); } html[data-design="v3"][data-theme="light"] ::-webkit-scrollbar-track { background: var(--nr-canvas); } html[data-design="v3"][data-theme="light"] ::-webkit-scrollbar-thumb { background: #CFC7C1; }