/* ============================================================ UVstocks.io — Website Revamp · Modern Fintech design system Ported from the Claude Design handoff (tokens.jsx). Geist + JetBrains Mono · electric-violet UV brand. Default theme is dark (matches the design canvas default). Add class `uv-theme-light` to for the light palette. ============================================================ */ /* ---- Theme tokens (dark = default) ---- */ :root { --bg: #06070C; --surface: #0F1119; --surface2: #171927; --ink: #F5F6FA; --ink80: #D9DBE6; --ink70: #A6AABE; --ink55: #74798F; --ink40: #51566B; --ink25: #363B4D; --rule: #22253A; --rule-soft: #171927; --rule-hair: #10121C; --chip: #1B1E2D; --brand: #A78BFA; --brand-strong: #C4B5FD; --brand-deep: #7C3AED; --brand-tint: rgba(167,139,250,0.12); --on-brand: #FFFFFF; --up: #34D399; --up-tint: rgba(52,211,153,0.16); --down: #F87171; --down-tint: rgba(248,113,113,0.18); --cyan: #22D3EE; /* CSR violet spectrum */ --v600: #7C3AED; --v500: #8B5CF6; --v400: #A78BFA; --v300: #C4B5FD; /* layout */ --section-y: 84px; --shadow: 0 1px 0 rgba(255,255,255,0.05); } body.uv-theme-light { --bg: #FAFAFB; --surface: #FFFFFF; --surface2: #F5F6FA; --ink: #0A0B12; --ink80: #1F2230; --ink70: #3F4356; --ink55: #6B7185; --ink40: #9197AB; --ink25: #C7CBD8; --rule: #E5E7EE; --rule-soft: #EFF1F6; --rule-hair: #F5F6FA; --chip: #F1F2F7; --brand: #7C3AED; --brand-strong: #4C1D95; --brand-deep: #4C1D95; --brand-tint: #F5F3FF; --up: #10B981; --up-tint: #D1FAE5; --down: #EF4444; --down-tint: #FEE2E2; --cyan: #0891B2; --shadow: 0 1px 0 rgba(0,0,0,0.04); } /* ---- Reset / base ---- */ .uv-root, .uv-root * { box-sizing: border-box; } .uv-root { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; } .uv-root a { color: inherit; text-decoration: none; } .uv-root button { font-family: inherit; cursor: pointer; } .uv-root input::placeholder { color: inherit; opacity: 0.5; } .uv-shell { max-width: 1440px; margin: 0 auto; background: var(--bg); } .uv-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .uv-num { font-variant-numeric: tabular-nums; } .uv-up { color: var(--up); } .uv-down { color: var(--down); } /* ---- Navigation ---- */ .uv-nav { display: flex; align-items: center; gap: 36px; padding: 16px 32px; border-bottom: 1px solid var(--rule); background: var(--bg); position: relative; z-index: 5; } .uv-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); } .uv-logo__text { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; } .uv-logo__text .dim { opacity: 0.4; } .uv-nav__links { display: flex; gap: 4px; } .uv-nav__link { font-weight: 500; font-size: 13px; color: var(--ink55); letter-spacing: -0.005em; padding: 8px 12px; border-radius: 6px; } .uv-nav__link:hover { color: var(--ink80); } .uv-nav__link.is-active { color: var(--ink); background: var(--chip); } .uv-nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .uv-nav__search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); width: 280px; } .uv-nav__search input { flex: 1; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); } .uv-kbd { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; color: var(--ink55); padding: 2px 6px; background: var(--chip); border-radius: 4px; } /* ---- Buttons ---- */ .uv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; } .uv-btn--primary { border: 0; background: var(--brand); color: #FFFFFF; font-weight: 600; } .uv-btn--dark { border: 0; background: var(--ink); color: var(--bg); font-weight: 600; } .uv-btn--sm { padding: 6px 12px; font-size: 12px; } .uv-btn--block { width: 100%; } /* ---- Eyebrow tag ---- */ .uv-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .uv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 6px var(--brand); flex-shrink: 0; } .uv-dot--up { background: var(--up); box-shadow: 0 0 6px var(--up); } /* ---- Sections / headings ---- */ .uv-section { padding: var(--section-y) 32px; background: var(--bg); } .uv-section--band { background: var(--surface2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .uv-section--tight { padding-top: 0; } .uv-h1 { margin: 0; font-weight: 600; font-size: 80px; line-height: 1.02; letter-spacing: -0.04em; color: var(--ink); } .uv-h2 { margin: 0; font-weight: 600; font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); } .uv-h3 { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); } .uv-lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink70); } .uv-accent { color: var(--brand); } .uv-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } /* ---- Cards ---- */ .uv-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; } .uv-card__head { padding: 14px 18px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .uv-card__title { font-size: 13px; font-weight: 600; color: var(--ink); } .uv-card__sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink55); letter-spacing: 0.04em; } /* ---- CSR pill ---- */ .uv-csr { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; min-width: 40px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; background: var(--chip); color: var(--ink55); } .uv-csr--lg { padding: 6px 12px; min-width: 56px; font-size: 14px; } .uv-csr--t2 { background: var(--v400); color: #FFFFFF; } .uv-csr--t3 { background: var(--v500); color: #FFFFFF; } .uv-csr--t4 { background: var(--v600); color: #FFFFFF; } /* ---- Tinted status badges ---- */ .uv-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .uv-badge--up { background: var(--up-tint); color: var(--up); } .uv-badge--down { background: var(--down-tint); color: var(--down); } .uv-badge--neutral { background: var(--chip); color: var(--ink70); } .uv-badge--brand { background: var(--brand-tint); color: var(--brand); } .uv-badge--mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; } /* ---- CSR pulse strip (homepage) ---- */ .uv-pulse { display: flex; align-items: stretch; height: 40px; border-bottom: 1px solid var(--rule); background: var(--surface); overflow: hidden; } .uv-pulse__stamp { flex-shrink: 0; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--rule); background: var(--brand); color: #FFFFFF; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; } .uv-pulse__track { display: flex; align-items: stretch; flex: 1; overflow: hidden; } .uv-pulse__item { display: flex; align-items: center; gap: 10px; padding: 0 18px; flex-shrink: 0; border-right: 1px solid var(--rule-hair); } .uv-pulse__item:last-child { border-right: 0; } .uv-pulse__key { font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .uv-pulse__val { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; } .uv-pulse__delta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink55); font-variant-numeric: tabular-nums; white-space: nowrap; } .uv-pulse__delta--up { color: var(--up); } .uv-pulse__delta--down { color: var(--down); } .uv-pulse__delta--flat { color: var(--ink55); } /* Theme toggle button */ .uv-btn--icon { padding: 8px 10px; } .uv-theme-toggle__sun { display: none; } .uv-theme-toggle__moon { display: inline; } body.uv-theme-light .uv-theme-toggle__sun { display: inline; } body.uv-theme-light .uv-theme-toggle__moon { display: none; } /* ---- CSR movers strip (stock detail) ---- */ .uv-movers { display: flex; align-items: center; height: 38px; border-bottom: 1px solid var(--rule); background: var(--surface); overflow: hidden; } .uv-movers__label { flex-shrink: 0; height: 100%; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--rule); font-size: 11px; font-weight: 600; color: var(--ink55); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .uv-movers__track { display: flex; align-items: stretch; flex: 1; overflow: hidden; } .uv-movers__item { display: flex; align-items: center; gap: 8px; padding: 0 16px; flex-shrink: 0; border-right: 1px solid var(--rule-hair); } .uv-movers__item:last-child { border-right: 0; } .uv-movers__item.is-current { background: var(--brand-tint); } .uv-movers__sym { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; } .uv-movers__item.is-current .uv-movers__sym { color: var(--brand); } .uv-movers__csr { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .uv-movers__delta { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .uv-movers__delta--up { color: var(--up); } .uv-movers__delta--down { color: var(--down); } .uv-movers__delta--flat { color: var(--ink55); } /* ---- Generic data table (pages set grid-template-columns inline) ---- */ .uv-tbl { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; } .uv-tbl__head, .uv-tbl__row { display: grid; align-items: center; padding: 12px 18px; } .uv-tbl__head { background: var(--rule-hair); border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 600; color: var(--ink55); letter-spacing: 0.04em; text-transform: uppercase; } .uv-tbl__row { padding: 14px 18px; border-top: 1px solid var(--rule-hair); } .uv-tbl__row:first-of-type { border-top: 0; } .uv-tbl__row:hover { background: var(--rule-hair); } .uv-tbl .ralign { text-align: right; } /* ---- Pagination ---- */ .uv-pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .uv-pager__info { font-size: 13px; color: var(--ink55); } .uv-pager__info strong { color: var(--ink); font-weight: 600; } .uv-pager__btns { display: flex; gap: 4px; } .uv-pager__btn { min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink70); font-size: 13px; font-weight: 500; } .uv-pager__btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .uv-pager__btn.is-disabled { color: var(--ink40); pointer-events: none; } /* ---- Footer ---- */ .uv-footer { border-top: 1px solid var(--rule); padding: 56px 32px 32px; background: var(--bg); } .uv-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom: 40px; } .uv-footer__about { margin: 14px 0 18px; max-width: 280px; font-size: 13px; line-height: 1.55; color: var(--ink70); } .uv-footer__status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--up-tint); color: var(--up); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; } .uv-footer__col-title { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 14px; } .uv-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .uv-footer__col li a { font-size: 13px; color: var(--ink70); } .uv-footer__col li a:hover { color: var(--ink); } .uv-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--rule-soft); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink55); } /* ---- Sparkline helper ---- */ .uv-spark { display: block; } /* ---- Responsive grid helpers (collapsed by the media queries below) ---- */ .uv-grid-2, .uv-grid-3 { display: grid; } /* ---- Placeholder marker (for not-yet-wired sections) ---- */ .uv-placeholder { position: relative; } .uv-placeholder::after { content: 'SAMPLE DATA'; position: absolute; top: 8px; right: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink40); background: var(--chip); padding: 2px 6px; border-radius: 3px; pointer-events: none; } /* ============================================================ Stock detail — "Trading desk" layout (02c) Full-bleed hero chart with overlaid identity, verdict tile row, side-rail tab nav, overview snapshot grid. ============================================================ */ /* Hero — chart fills the background, identity + price overlaid */ .sp-hero { position: relative; height: 360px; overflow: hidden; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, var(--bg), var(--surface)); } .sp-hero__chart { position: absolute; inset: 0; } .sp-hero__chart svg { display: block; width: 100%; height: 100%; } .sp-hero__overlay { position: absolute; top: 28px; left: 32px; right: 32px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; z-index: 2; } .sp-hero__identity { display: flex; align-items: flex-start; gap: 20px; } .sp-hero__logo { flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--v400), #5B21B6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; color: #FFFFFF; letter-spacing: -0.03em; box-shadow: 0 8px 24px -8px rgba(124,58,237,0.5); } .sp-hero__crumbs { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink55); margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; } .sp-hero__crumbs a { color: var(--ink55); } .sp-hero__exchange { padding: 2px 7px; border-radius: 4px; background: var(--chip); color: var(--ink70); font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: 0.02em; font-size: 11px; } .sp-hero__name { margin: 0; font-weight: 600; font-size: 44px; letter-spacing: -0.035em; color: var(--ink); line-height: 1; } .sp-hero__price-row { margin-top: 14px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .sp-hero__price { font-size: 52px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .sp-hero__close { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink55); } .sp-hero__tools { display: flex; gap: 2px; padding: 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--rule); } /* 4-tile verdict row */ .sp-verdict { padding: 28px 32px; background: var(--bg); border-bottom: 1px solid var(--rule); } .sp-verdict__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .sp-verdict__tile { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; } .sp-verdict__tile--accent { background: linear-gradient(135deg, var(--brand-tint), var(--surface)); border-color: var(--brand); } .sp-verdict__label { font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; } .sp-verdict__row { display: flex; align-items: baseline; gap: 8px; } .sp-verdict__val { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .sp-verdict__val--text { font-size: 18px; } .sp-verdict__sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink55); } .sp-verdict__delta { margin-left: auto; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; } .sp-verdict__delta--up { background: var(--up-tint); color: var(--up); } .sp-verdict__delta--down { background: var(--down-tint); color: var(--down); } .sp-verdict__delta--flat { background: var(--chip); color: var(--ink70); } .sp-verdict__sub--block { margin-top: 8px; font-size: 11px; color: var(--ink55); } /* 2-col body — side rail + content */ .sp-body { padding: 40px 32px 80px; background: var(--bg); } .sp-body__grid { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; } .sp-rail { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .sp-rail__head { padding: 10px 12px 6px; font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.08em; text-transform: uppercase; } .sp-rail__item { padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink70); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; width: 100%; } .sp-rail__item:hover { background: var(--rule-hair); color: var(--ink); } .sp-rail__item.is-active { background: var(--ink); color: var(--bg); font-weight: 600; } .sp-rail__item[disabled] { color: var(--ink40); cursor: not-allowed; background: transparent; } .sp-rail__chev { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink40); } .sp-rail__item.is-active .sp-rail__chev { color: var(--bg); } .sp-rail__soon { padding: 1px 6px; border-radius: 3px; background: var(--chip); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink55); } .sp-rail__divider { border-top: 1px solid var(--rule-soft); margin: 8px 0; } .sp-rail__note { padding: 8px 12px; font-size: 11px; color: var(--ink70); line-height: 1.5; } .sp-rail__note b { color: var(--ink); font-weight: 600; } .sp-content { display: flex; flex-direction: column; gap: 24px; min-width: 0; } /* Overview snapshot grid */ .sp-overview-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; } .sp-snap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .sp-conv { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 24px; } .sp-conv__eyebrow { font-size: 10px; font-weight: 600; color: var(--brand); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; } .sp-conv__body { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--ink); letter-spacing: -0.01em; } .sp-conv__stats { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-soft); display: flex; gap: 24px; flex-wrap: wrap; } .sp-conv__stat-k { font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.06em; text-transform: uppercase; } .sp-conv__stat-v { font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; } .sp-conv__stat-v--up { color: var(--up); } .sp-conv__stat-v--down { color: var(--down); } .sp-conv__stat-v--flat { color: var(--ink70); } .sp-conv__stat-v--mute { color: var(--ink40); } /* Snapshot cards */ .sp-snap { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .sp-snap__head { padding: 14px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--rule); } .sp-snap__eyebrow { font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .sp-snap__title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .sp-snap__meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink55); letter-spacing: 0.04em; } .sp-snap__body { flex: 1; padding: 14px 18px; } .sp-snap__open { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--rule-soft); background: var(--rule-hair); font-size: 12px; font-weight: 600; color: var(--brand); cursor: pointer; } .sp-snap__open:hover { color: var(--brand-strong); } .sp-snap-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); } .sp-snap-row:last-child { border-bottom: 0; } .sp-snap-row__label { font-size: 13px; font-weight: 600; color: var(--ink); } .sp-snap-row__sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink55); letter-spacing: 0.06em; text-transform: uppercase; } .sp-snap-row__val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .sp-snap-row__pct { margin-left: 6px; font-size: 10px; } .sp-snap-row__pct--up { color: var(--up); } .sp-snap-row__pct--down { color: var(--down); } .sp-snap-row__verdict { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; } .sp-snap-row__verdict--up { background: var(--up-tint); color: var(--up); } .sp-snap-row__verdict--down { background: var(--down-tint); color: var(--down); } .sp-snap-row__verdict--flat { background: var(--chip); color: var(--ink70); } .sp-snap-fingrid { display: grid; grid-template-columns: repeat(2, 1fr); margin: -14px -18px -14px -18px; } .sp-snap-fingrid > div { padding: 14px 18px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .sp-snap-fingrid > div:nth-child(2n) { border-right: 0; } .sp-snap-fingrid > div:nth-last-child(-n+2) { border-bottom: 0; } .sp-snap-fingrid__k { font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; } .sp-snap-fingrid__v { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .sp-snap-fingrid__v--up { color: var(--up); } /* Section heads inside content */ .sp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* Section breaks for tabs */ .sp-section { background: var(--bg); } @media (max-width: 1100px) { .sp-body__grid { grid-template-columns: 1fr; } .sp-rail { position: relative; top: 0; flex-direction: row; overflow-x: auto; } .sp-rail__head { display: none; } .sp-rail__divider, .sp-rail__note { display: none; } .sp-overview-grid { grid-template-columns: 1fr; } .sp-verdict__grid { grid-template-columns: repeat(2, 1fr); } .sp-hero { height: 320px; } .sp-hero__name { font-size: 32px; } .sp-hero__price { font-size: 40px; } } @media (max-width: 760px) { .sp-verdict { padding: 20px 16px; } .sp-verdict__grid { grid-template-columns: 1fr; } .sp-body { padding: 24px 16px 60px; } .sp-hero__overlay { top: 16px; left: 16px; right: 16px; flex-direction: column; gap: 16px; } .sp-hero__tools { align-self: flex-start; } .sp-snap-grid { grid-template-columns: 1fr; } } /* ============================================================ Auth — split brand stage + form ============================================================ */ .uv-auth { min-height: 880px; } .uv-auth__grid { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 880px; } .uv-auth__stage { position: relative; overflow: hidden; color: #FFFFFF; background: radial-gradient(120% 90% at 0% 0%, #5B21B6 0%, #2E1065 55%, #06070C 100%); padding: 56px; display: flex; flex-direction: column; gap: 28px; } .uv-auth__stage svg.uv-auth__grid-bg { position: absolute; inset: 0; opacity: 0.15; pointer-events: none; width: 100%; height: 100%; } .uv-auth__eyebrow { position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.10); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; } .uv-auth__dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; } .uv-auth__title { position: relative; margin: 0; font-weight: 600; font-size: 52px; line-height: 1.02; letter-spacing: -0.035em; } .uv-auth__title-accent { background: linear-gradient(90deg, #C4B5FD 0%, #FFFFFF 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } .uv-auth__lead { position: relative; margin: 0; max-width: 460px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.72); } .uv-auth__minicard { position: relative; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 20px; display: grid; grid-template-columns: 88px 1fr 110px; gap: 18px; align-items: center; } .uv-auth__minicard-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; margin-bottom: 4px; text-align: center; } .uv-auth__minicard-v { font-size: 44px; font-weight: 600; color: #FFFFFF; letter-spacing: -0.03em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; } .uv-auth__minicard-label { font-size: 13px; font-weight: 500; color: #FFFFFF; margin-bottom: 4px; } .uv-auth__minicard-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; } .uv-auth__dots { display: flex; gap: 4px; margin-top: 8px; } .uv-auth__dots span { flex: 1; height: 4px; border-radius: 2px; background: rgba(196,181,253,0.5); } .uv-auth__feed { position: relative; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.72); letter-spacing: 0.02em; line-height: 1.8; } .uv-auth__feed-head { color: rgba(255,255,255,0.45); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; margin-bottom: 10px; } .uv-auth__feed-row { display: grid; grid-template-columns: 56px 56px 56px 1fr; gap: 8px; align-items: baseline; } .uv-auth__feed-row span.dim { color: rgba(255,255,255,0.40); } .uv-auth__feed-row span.tk { color: #FFFFFF; font-weight: 700; } .uv-auth__feed-row span.up { color: #6EE7B7; font-weight: 700; } .uv-auth__feed-row span.down { color: #FCA5A5; font-weight: 700; } .uv-auth__stage-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: space-between; position: relative; } .uv-auth__stage-foot-c { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; } .uv-auth__stage-foot-links { display: flex; gap: 12px; font-size: 12px; color: rgba(255,255,255,0.72); } .uv-auth__stage-foot-links a { color: inherit; } .uv-auth__panel { background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 64px 56px; } .uv-auth__form { width: 460px; max-width: 100%; } .uv-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--chip); padding: 4px; border-radius: 10px; margin-bottom: 28px; gap: 0; } .uv-auth__tab { padding: 10px 0; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--ink55); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; } .uv-auth__tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.18); } .uv-auth__h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; } .uv-auth__sub { margin: 8px 0 0; font-size: 14px; color: var(--ink70); line-height: 1.5; } .uv-auth__fields { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; } .uv-auth__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .uv-auth__field { display: flex; flex-direction: column; gap: 6px; } .uv-auth__label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink70); letter-spacing: -0.005em; } .uv-auth__label a { color: var(--brand); font-weight: 500; } .uv-auth__input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); font-family: 'Geist', sans-serif; font-size: 14px; outline: none; transition: border-color 0.15s ease; } .uv-auth__input:focus { border-color: var(--brand); } .uv-auth__input.is-valid { border-color: var(--up); } .uv-auth__input.is-invalid { border-color: var(--down); } .uv-auth__hint { font-size: 12px; color: var(--ink55); } .uv-auth__error { font-size: 12px; color: var(--down); display: none; } .uv-auth__field.is-invalid .uv-auth__error { display: block; } .uv-auth__submit { margin-top: 6px; padding: 14px 18px; border: 0; border-radius: 10px; background: var(--brand); color: #FFFFFF; cursor: pointer; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; } .uv-auth__submit:hover { background: var(--brand-deep); } .uv-auth__submit[disabled] { opacity: 0.6; cursor: not-allowed; } .uv-auth__legal { margin: 0; font-size: 12px; color: var(--ink55); line-height: 1.5; } .uv-auth__legal a { color: var(--ink70); font-weight: 500; text-decoration: underline; } .uv-auth__bottom { margin-top: 28px; font-size: 13px; color: var(--ink55); text-align: center; } .uv-auth__bottom a { color: var(--brand); font-weight: 600; } .uv-auth__error-banner { padding: 10px 14px; border-radius: 8px; background: var(--down-tint); color: var(--down); font-size: 13px; font-weight: 500; margin-bottom: 18px; } .uv-auth__check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink70); } .uv-auth__check input { display: none; } .uv-auth__check-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--ink40); background: transparent; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .uv-auth__check input:checked + .uv-auth__check-box { background: var(--brand); border-color: var(--brand); } .uv-auth__check input:checked + .uv-auth__check-box::after { content: ''; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 L5 9 L10 3' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .uv-auth__stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .uv-auth__step { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink55); font-weight: 500; } .uv-auth__step-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ink55); } .uv-auth__step.is-done .uv-auth__step-dot, .uv-auth__step.is-current .uv-auth__step-dot { background: var(--brand); color: #FFFFFF; border-color: var(--brand); } .uv-auth__step.is-current { color: var(--ink); font-weight: 600; } .uv-auth__step-line { flex: 1; height: 1px; background: var(--rule); } .uv-auth__step.is-done + .uv-auth__step-line { background: var(--brand); } @media (max-width: 1100px) { .uv-auth__grid { grid-template-columns: 1fr; min-height: 0; } .uv-auth__stage { padding: 40px 32px; } .uv-auth__title { font-size: 36px; } .uv-auth__panel { padding: 40px 32px; } } /* ============================================================ Article — long-read layout ============================================================ */ .uv-art { background: var(--bg); } .uv-art__hero { padding: 56px 32px 40px; background: linear-gradient(180deg, var(--surface), var(--bg)); border-bottom: 1px solid var(--rule); } .uv-art__inner { max-width: 1280px; margin: 0 auto; } .uv-art__crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink55); margin-bottom: 18px; } .uv-art__crumbs a { color: var(--ink55); } .uv-art__crumbs a:hover { color: var(--ink); } .uv-art__cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } .uv-art__title { margin: 0; font-weight: 600; font-size: 52px; line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); max-width: 920px; } .uv-art__dek { margin: 16px 0 0; max-width: 720px; font-size: 18px; line-height: 1.6; color: var(--ink70); } .uv-art__meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--rule); } .uv-art__byline { display: flex; align-items: center; gap: 14px; } .uv-art__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--v400), #5B21B6); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 700; font-size: 14px; } .uv-art__byline-name { font-size: 14px; font-weight: 600; color: var(--ink); } .uv-art__byline-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink55); letter-spacing: 0.04em; } .uv-art__share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .uv-art__share-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 4px; } .uv-art__share-btn { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink70); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .uv-art__share-btn:hover { color: var(--ink); border-color: var(--brand); background: var(--brand-tint); } .uv-art__share-btn svg { flex-shrink: 0; } .uv-art__share-btn-text { white-space: nowrap; } @media (max-width: 560px) { .uv-art__share-btn { padding: 0 10px; height: 32px; font-size: 11px; } .uv-art__share-btn-text { display: none; } .uv-art__share-btn { width: 34px; padding: 0; justify-content: center; } } .uv-art__body-wrap { display: grid; grid-template-columns: 200px minmax(0, 720px) 240px; gap: 48px; justify-content: center; padding: 48px 32px 80px; } .uv-art__rail { position: sticky; top: 16px; align-self: start; } .uv-art__rail-title { font-size: 10px; font-weight: 600; color: var(--ink55); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .uv-art__rail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .uv-art__rail-list a { display: block; font-size: 13px; color: var(--ink70); line-height: 1.45; padding: 6px 10px; border-radius: 6px; border-left: 2px solid var(--rule); } .uv-art__rail-list a:hover { color: var(--ink); background: var(--rule-hair); border-left-color: var(--brand); } .uv-art__body { color: var(--ink80); font-size: 17px; line-height: 1.7; } .uv-art__body > * { max-width: 100%; } .uv-art__body p { margin: 0 0 22px; } .uv-art__body h2 { margin: 40px 0 16px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; } .uv-art__body h3 { margin: 32px 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); } .uv-art__body a { color: var(--brand); border-bottom: 1px solid var(--brand-tint); } .uv-art__body a:hover { color: var(--brand-strong); border-bottom-color: var(--brand-strong); } .uv-art__body ul, .uv-art__body ol { margin: 0 0 22px; padding-left: 24px; } .uv-art__body li { margin-bottom: 8px; } .uv-art__body blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); font-size: 19px; line-height: 1.5; color: var(--ink); font-style: italic; } .uv-art__body .uv-art__pullquote { margin: 36px 0; padding: 24px 28px; background: var(--brand-tint); border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; font-family: 'Geist', sans-serif; font-weight: 500; font-size: 24px; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; font-style: normal; } .uv-art__body .uv-art__pullquote cite { display: block; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; font-style: normal; color: var(--ink55); letter-spacing: 0.04em; text-transform: uppercase; } .uv-art__body .uv-art__pullquote cite::before { content: ''; display: inline-block; width: 24px; border-top: 1px solid var(--ink55); vertical-align: middle; margin-right: 10px; transform: translateY(-2px); } .uv-art__body .uv-art__signoff { margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule); color: var(--ink70); font-size: 15px; line-height: 1.65; } .uv-art__body .uv-art__signoff p { margin: 0 0 14px; } .uv-art__body .uv-art__signoff p:last-child { margin-bottom: 0; } .uv-art__body .uv-art__signoff .name { font-weight: 600; color: var(--ink); margin-top: 4px; } .uv-art__body img { display: block; max-width: 100%; height: auto; margin: 28px auto; border-radius: 12px; } .uv-art__body code { font-family: 'JetBrains Mono', monospace; font-size: 14px; padding: 2px 6px; border-radius: 4px; background: var(--chip); color: var(--ink); } .uv-art__body pre { margin: 24px 0; padding: 18px 20px; border-radius: 10px; background: var(--surface); border: 1px solid var(--rule); overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .uv-art__body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; } .uv-art__body th, .uv-art__body td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); text-align: left; color: var(--ink70); } .uv-art__body th { color: var(--ink); font-weight: 600; } .uv-art__sidebar { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: 16px; } .uv-art__sidecard { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px; } .uv-art__sidecard h4 { margin: 0 0 14px; font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; } .uv-art__sidecard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .uv-art__sidecard li a { display: block; font-size: 13px; color: var(--ink70); line-height: 1.45; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); } .uv-art__sidecard li:last-child a { border-bottom: 0; } .uv-art__sidecard li a:hover { color: var(--brand); } .uv-art__newsletter { background: linear-gradient(135deg, var(--brand-tint), var(--surface)); border: 1px solid var(--brand); border-radius: 12px; padding: 20px; } .uv-art__newsletter h4 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; } .uv-art__newsletter p { margin: 0 0 14px; font-size: 13px; color: var(--ink70); line-height: 1.5; } .uv-art__newsletter form { display: flex; flex-direction: column; gap: 10px; } .uv-art__newsletter input { padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit; outline: none; } .uv-art__newsletter input:focus { border-color: var(--brand); } .uv-art__newsletter button { padding: 10px 14px; border: 0; border-radius: 8px; background: var(--brand); color: #FFFFFF; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } @media (max-width: 1180px) { .uv-art__body-wrap { grid-template-columns: 1fr; padding: 32px 32px 60px; } .uv-art__rail, .uv-art__sidebar { position: relative; top: 0; } } @media (max-width: 760px) { .uv-art__hero { padding: 32px 16px 24px; } .uv-art__title { font-size: 32px; } .uv-art__dek { font-size: 16px; } .uv-art__body-wrap { padding: 24px 16px 60px; gap: 24px; } .uv-art__body { font-size: 16px; } } /* ---- Responsive ---- */ @media (max-width: 1100px) { :root { --section-y: 56px; } .uv-h1 { font-size: 56px; } .uv-h2 { font-size: 34px; } .uv-grid-2, .uv-grid-3 { grid-template-columns: 1fr !important; } .uv-nav__search { width: 180px; } .uv-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .uv-section { padding-left: 16px; padding-right: 16px; } .uv-nav { gap: 16px; padding: 12px 16px; flex-wrap: wrap; } .uv-nav__links { display: none; } .uv-h1 { font-size: 40px; } .uv-scroll-x { overflow-x: auto; } .uv-footer__grid { grid-template-columns: 1fr; } } /* ───────────────────────────── Legal ───────────────────────────── Shared chrome for Terms & Conditions + Privacy Policy. The page bodies keep their source markup — legacy Termly classes (.title-section / .title-section-two / .body-text / .lists) on the Terms page, semantic h1/h2/h3 on the Privacy page — and these rules re-skin both into the dark theme via design tokens. */ .uv-legal-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand), var(--v300)); z-index: 60; transition: width 0.1s linear; } .uv-legal-hero { max-width: 1160px; margin: 0 auto; padding: 56px 32px 32px; border-bottom: 1px solid var(--rule); } .uv-legal-crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink55); } .uv-legal-crumbs a { color: var(--ink55); } .uv-legal-crumbs a:hover { color: var(--brand); } .uv-legal-crumbs .is-current { color: var(--ink70); } .uv-legal-hero__title { font-size: 52px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; color: var(--ink); margin: 16px 0 0; } .uv-legal-hero__dek { margin: 16px 0 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--ink70); } .uv-legal-hero__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 28px; } .uv-legal-stamp { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink55); } .uv-legal-hero__actions { display: flex; gap: 10px; } .uv-legal-callout { max-width: 1160px; margin: 24px auto 0; padding: 0 32px; } .uv-legal-callout__inner { background: var(--brand-tint); border: 1px solid var(--brand); border-radius: 12px; padding: 18px 22px; font-size: 15px; line-height: 1.6; color: var(--ink80); } .uv-legal-callout__inner strong { color: var(--ink); } .uv-legal-layout { max-width: 1160px; margin: 0 auto; padding: 40px 32px 80px; display: grid; grid-template-columns: 230px 1fr; gap: 48px; align-items: start; } .uv-legal-toc { position: sticky; top: 88px; } .uv-legal-toc__title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink55); margin-bottom: 12px; } #uv-legal-toc { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 140px); overflow-y: auto; } #uv-legal-toc a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink55); border-left: 2px solid transparent; } #uv-legal-toc a:hover { color: var(--ink); background: var(--surface2); } #uv-legal-toc a.is-active { color: var(--brand); background: var(--brand-tint); border-left-color: var(--brand); font-weight: 500; } /* ---- Content typography (themes both source bodies) ---- */ .uv-legal { max-width: 760px; color: var(--ink70); font-size: 15.5px; line-height: 1.75; } .uv-legal a { color: var(--brand); word-break: break-word; } .uv-legal a:hover { color: var(--brand-strong); } /* Section heads — Termly `.title-section` + privacy top-level `

` / .uv-legal .title-section, .uv-legal h1 { display: block; scroll-margin-top: 100px; font-family: 'Geist', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 48px 0 4px; padding-top: 24px; border-top: 1px solid var(--rule); } .uv-legal > .title-section:first-child, .uv-legal > h1:first-child { margin-top: 0; padding-top: 0; border-top: 0; } / Sub-heads — Termly `.title-section-two` + privacy h2/h3 / .uv-legal .title-section-two, .uv-legal h2 { display: block; font-family: 'Geist', sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); margin: 28px 0 4px; scroll-margin-top: 100px; } .uv-legal h3 { font-size: 15px; font-weight: 600; color: var(--ink80); margin: 22px 0 4px; } .uv-legal .title-main, .uv-legal .subtitle { display: none; } / moved to hero / .uv-legal .body-text, .uv-legal p { color: var(--ink70); } .uv-legal p { margin: 0 0 16px; } .uv-legal b, .uv-legal strong { color: var(--ink); font-weight: 600; } .uv-legal ul, .uv-legal ol { margin: 8px 0 18px; padding-left: 24px; } .uv-legal .lists { padding-left: 24px; } .uv-legal li { margin: 0 0 8px; } .uv-legal li::marker { color: var(--ink40); } .uv-legal hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; } / ---- Contact card ---- / .uv-legal-contact { max-width: 1160px; margin: 0 auto; padding: 0 32px 80px; } .uv-legal-contactcard { background: linear-gradient(135deg, var(--surface2), var(--surface)); border: 1px solid var(--rule); border-radius: 16px; padding: 32px 36px; } .uv-legal-contacteyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; } .uv-legal-contactcard h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; } .uv-legal-contactcard p { color: var(--ink70); margin: 0 0 20px; font-size: 15px; } .uv-legal-contactlinks { display: flex; gap: 12px; flex-wrap: wrap; } / Scoped contact buttons must beat the generic `.uv-legal a` link color. / .uv-legalcontact-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--rule); background: var(--surface); color: var(--ink) !important; } .uv-legalcontact-btn--primary { background: var(--brand); border-color: var(--brand); color: #FFFFFF !important; } .uv-legalcontact-btn:hover { border-color: var(--brand); } @media (max-width: 900px) { .uv-legal-layout { grid-template-columns: 1fr; gap: 24px; } .uv-legal-toc { position: static; } #uv-legal-toc { max-height: none; flex-flow: row wrap; } .uv-legal-hero { padding: 40px 20px 24px; } .uv-legal-herotitle { font-size: 36px; } .uv-legal-layout, .uv-legal-callout, .uv-legal-contact { padding-left: 20px; padding-right: 20px; } } / ─────────────────── Auth — register steps + tiers ─────────────────── Atoms shared by the split-layout Login + Register panels. Base `.uv-auth` chrome (stage, fields, tabs, stepper) ships with Task 4.1; these add the 3-step register flow: validation states, promo field, step panes, tier radio-cards, and the "check your inbox" done state. / .uv-authfield .is-invalid { border-color: var(--down); } .uv-authfield .is-valid { border-color: var(--up); } .uv-authlegal-link { color: var(--ink70); text-decoration: underline; } .uv-authrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .uv-authpromo { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; } .uv-authpromo button { padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; } .uv-authpromo button.is-good { border-color: var(--up); color: var(--up); } .uv-authpromo button.is-bad { border-color: var(--down); color: var(--down); } /* Step panes — only the active step is shown / .uv-authstep-pane { display: none; } .uv-authstep-pane.is-active { display: block; } / Tab panes (login sign-in/register toggle, kept for compatibility) / .uv-authtab-pane { display: none; } .uv-authtab-pane.is-active { display: block; } / Tier radio-cards (register step 2) / .uv-authtiers { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; } .uv-authtier-card { position: relative; display: block; cursor: pointer; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 18px 20px; transition: border-color 0.15s, background 0.15s; } .uv-authtier-card:hover { border-color: var(--brand); } .uv-authtier-card input { position: absolute; opacity: 0; pointer-events: none; } .uv-authtier-card.is-selected { border-color: var(--brand); background: var(--brand-tint); } .uv-authtier-card--featured { border-color: var(--brand); } .uv-authtier-ribbon { position: absolute; top: -10px; right: 16px; background: var(--brand); color: #FFFFFF; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; } .uv-authtier-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .uv-authtier-name { font-size: 16px; font-weight: 600; color: var(--ink); } .uv-authtier-price { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; } .uv-authtier-price small { font-size: 12px; font-weight: 500; color: var(--ink55); } .uv-authtier-radio { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; border: 2px solid var(--ink40); margin-top: 2px; position: relative; } .uv-authtier-card.is-selected .uv-authtier-radio { border-color: var(--brand); } .uv-authtier-card.is-selected .uv-authtier-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); } .uv-authtier-head { display: flex; align-items: flex-start; gap: 12px; } .uv-authtier-bullets { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .uv-authtier-bullets li { position: relative; padding-left: 22px; font-size: 13px; color: var(--ink70); line-height: 1.45; } .uv-authtier-bullets li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; font-size: 12px; } .uv-authbtn-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; } .uv-authbtn-back { border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 0 18px; font-weight: 600; font-size: 14px; cursor: pointer; } / Done / verify step / .uv-authdone { text-align: center; padding: 16px 0; } .uv-authdone-check { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; } .uv-authdone-email { color: var(--brand); font-weight: 600; } / ── Command palette (⌘K) ── */ .uv-cmdk { position: fixed; inset: 0; z-index: 200; display: none; } .uv-cmdk.is-open { display: block; } .uv-cmdkscrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); } .uv-cmdkpanel { position: relative; max-width: 600px; margin: 10vh auto 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .uv-cmdkinputwrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); } .uv-cmdkinputwrap svg { color: var(--ink55); flex-shrink: 0; } .uv-cmdkinput { flex: 1; border: 0; background: transparent; outline: none; color: var(--ink); font-family: 'Geist', sans-serif; font-size: 16px; } .uv-cmdkinput::placeholder { color: var(--ink55); } .uv-cmdkesc { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink55); border: 1px solid var(--rule); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; } .uv-cmdkresults { overflow-y: auto; padding: 6px; } .uv-cmdkgroup-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink55); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px 4px; } .uv-cmdkrow { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; } .uv-cmdkrow.is-active { background: var(--brand-tint); } .uv-cmdkicon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; background: var(--chip); display: flex; align-items: center; justify-content: center; color: var(--ink70); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; } .uv-cmdklabel { font-size: 14px; color: var(--ink); font-weight: 500; flex-shrink: 0; } .uv-cmdksub { font-size: 13px; color: var(--ink55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uv-cmdkempty { padding: 28px 16px; text-align: center; color: var(--ink55); font-size: 14px; } .uv-cmdk__hint { padding: 28px 16px; text-align: center; color: var(--ink55); font-size: 13px; }