/* CHTR-348 (PP-3) — billing page reskin. Hablexo marketing site + "Violet Bridge" style guide. Light / dark / auto (auto follows the OS via prefers-color-scheme). Appearance is chosen in the account menu and persisted by billing-menu.js as ; no attribute = auto. Self-contained (replaces the /signup/signup.css dependency for this page). WCAG 2.2 AA: contrast (light + dark), :focus-visible rings, ≥44px targets, reduced-motion. */ /* ---- Brand webfonts, SELF-HOSTED (CHTR-243 precedent) ---- The console CSP pins font-src to 'self' (server/Caddyfile) — no fonts.googleapis / gstatic — so these must load from our own origin, not Google Fonts. Both families are variable fonts (the same woff2 the attendee page ships), so one file per subset serves the whole 400–700 weight axis; the filename keeps its Google "400" label but the `font-weight: 400 700` range makes real 500/600/700 render (no faux-bolding). The stacks below fall back cleanly to system serif/sans if these are ever blocked, so the page never breaks — it just loses the brand type. Subsets + unicode-ranges mirror web/attendee/fonts/skin.css. */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/newsreader-normal-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/newsreader-normal-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/hanken-grotesk-normal-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/hanken-grotesk-normal-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Light (default) tokens ---- */ :root { --paper:#f1eff7; --card:#ffffff; --card-border:#e0dbef; --chip-border:#dcd5ec; --input-bg:#ffffff; --input-border:#d8d0ec; --ink:#1c1630; --body:#1f1933; --muted:#5f5a74; --faint:#6e6883; --violet:#4f3a9c; --violet-press:#432f88; --violet-tint:#ece8f8; --on-violet:#ffffff; --magenta:#b02d6e; --green:#1c7a59; --warn-ink:#8a5a13; --warn-bg:#f6ecd9; --warn-border:#ecdcb8; --err-ink:#c0394b; --err-border:#f2d6da; --ok-ink:#1c7a59; --pop-bg:#ffffff; --pop-border:#e6e0f2; --sep:#eee7f6; --ghost-hover:#f4f1fb; --topbar-bg:rgba(241,239,247,.82); --topbar-border:rgba(220,213,236,.8); --glow-1:rgba(79,58,156,.12); --glow-2:rgba(176,45,110,.09); --eq-violet:#4f3a9c; --eq-magenta:#b02d6e; --eq-green:#1c7a59; --focus:#4f3a9c; --focus-primary:#1c1630; --seg-bg:#f4f1fb; --seg-active-bg:#ffffff; --seg-active-ink:#4f3a9c; --seg-ink:#5f5a74; --seg-border:#e0dbef; --shadow-pop:0 18px 48px rgba(28,22,48,.18); color-scheme: light; } /* ---- Dark tokens: forced (data-theme="dark") OR auto under an OS dark preference ---- */ :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { --paper:#1c1630; --card:#221b3a; --card-border:#372f5a; --chip-border:#4a4370; --input-bg:#14101f; --input-border:#372f5a; --ink:#f4ecfd; --body:#ece8f5; --muted:#a39bbb; --faint:#9d95b8; --violet:#9384df; --violet-press:#a99cf0; --violet-tint:#2e2752; --on-violet:#160f2b; --magenta:#d65a99; --green:#3fae86; --warn-ink:#e3a857; --warn-bg:#3a2e1c; --warn-border:#5a4a2c; --err-ink:#e0596b; --err-border:#5a2a33; --ok-ink:#3fae86; --pop-bg:#221b3a; --pop-border:#372f5a; --sep:#2c2547; --ghost-hover:#2c2547; --topbar-bg:rgba(28,22,48,.82); --topbar-border:rgba(55,47,90,.8); --glow-1:rgba(147,132,223,.16); --glow-2:rgba(214,90,153,.12); --eq-violet:#9384df; --eq-magenta:#d65a99; --eq-green:#3fae86; --focus:#9384df; --focus-primary:#f4ecfd; --seg-bg:#191430; --seg-active-bg:#2c2547; --seg-active-ink:#cbbff5; --seg-ink:#a39bbb; --seg-border:#372f5a; --shadow-pop:0 18px 48px rgba(11,8,24,.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --paper:#1c1630; --card:#221b3a; --card-border:#372f5a; --chip-border:#4a4370; --input-bg:#14101f; --input-border:#372f5a; --ink:#f4ecfd; --body:#ece8f5; --muted:#a39bbb; --faint:#9d95b8; --violet:#9384df; --violet-press:#a99cf0; --violet-tint:#2e2752; --on-violet:#160f2b; --magenta:#d65a99; --green:#3fae86; --warn-ink:#e3a857; --warn-bg:#3a2e1c; --warn-border:#5a4a2c; --err-ink:#e0596b; --err-border:#5a2a33; --ok-ink:#3fae86; --pop-bg:#221b3a; --pop-border:#372f5a; --sep:#2c2547; --ghost-hover:#2c2547; --topbar-bg:rgba(28,22,48,.82); --topbar-border:rgba(55,47,90,.8); --glow-1:rgba(147,132,223,.16); --glow-2:rgba(214,90,153,.12); --eq-violet:#9384df; --eq-magenta:#d65a99; --eq-green:#3fae86; --focus:#9384df; --focus-primary:#f4ecfd; --seg-bg:#191430; --seg-active-bg:#2c2547; --seg-active-ink:#cbbff5; --seg-ink:#a39bbb; --seg-border:#372f5a; --shadow-pop:0 18px 48px rgba(11,8,24,.5); } } :root { --radius: 18px; --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: var(--font-ui); color: var(--body); background: var(--paper); background-image: radial-gradient(760px 380px at 88% -8%, var(--glow-1), transparent 70%), radial-gradient(680px 360px at -6% 108%, var(--glow-2), transparent 70%); background-attachment: fixed; -webkit-font-smoothing: antialiased; padding-bottom: 64px; } button { font-family: inherit; } a { color: var(--violet); } /* ---- Header ---- */ .topbar { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); } .topbar-inner { max-width: 1000px; margin: 0 auto; padding: 0 32px; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; } .brand-word { font-family: var(--font-display); font-weight: 500; font-size: 23px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; } /* Equaliser mark */ .eq { display: inline-flex; align-items: center; gap: 3px; height: 24px; } .eq i { width: 3px; border-radius: 1.5px; transform-origin: center; animation: eq 3.9s ease-in-out infinite; } .eq i:nth-child(1) { height: 40%; background: var(--eq-violet); animation-duration: 3.9s; animation-delay: 0s; } .eq i:nth-child(2) { height: 74%; background: var(--eq-violet); animation-duration: 5.1s; animation-delay: .54s; } .eq i:nth-child(3) { height: 100%; background: var(--eq-magenta); animation-duration: 3.3s; animation-delay: .18s; } .eq i:nth-child(4) { height: 55%; background: var(--eq-green); animation-duration: 5.7s; animation-delay: .72s; } .eq i:nth-child(5) { height: 84%; background: var(--eq-violet); animation-duration: 4.35s; animation-delay: .36s; } .eq i:nth-child(6) { height: 45%; background: var(--eq-magenta); animation-duration: 4.8s; animation-delay: .9s; } .eq i:nth-child(7) { height: 28%; background: var(--eq-violet); animation-duration: 3.75s; animation-delay: .06s; } @keyframes eq { 0%{transform:scaleY(.30)} 22%{transform:scaleY(.95)} 44%{transform:scaleY(.50)} 68%{transform:scaleY(1)} 100%{transform:scaleY(.30)} } /* ---- Account menu ---- */ .account { position: relative; display: flex; } .avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--violet); background: var(--violet); color: var(--on-violet); cursor: pointer; padding: 0; transition: background .12s, border-color .12s; } .avatar:hover { background: var(--violet-press); border-color: var(--violet-press); } .account-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; border: none; padding: 0; cursor: default; } .account-pop { position: absolute; top: 50px; right: 0; z-index: 70; width: 280px; background: var(--pop-bg); border: 1px solid var(--pop-border); border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden; } .account-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px 13px; } .big-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--violet-tint); color: var(--violet); display: grid; place-items: center; flex: none; } .account-id { min-width: 0; } .who { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; } .email { font-size: 12.5px; color: var(--muted); line-height: 1.3; word-break: break-all; } .account-sep { height: 1px; background: var(--sep); } .account-group { padding: 6px; } .pop-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; border: none; background: none; color: var(--body); font-size: 14px; font-weight: 500; cursor: pointer; text-align: start; text-decoration: none; box-sizing: border-box; } .pop-item .grow { flex: 1; } .pop-item:hover { background: var(--ghost-hover); } .pop-item.danger { color: var(--magenta); font-weight: 600; } .pop-item.danger:hover { background: color-mix(in srgb, var(--magenta) 12%, transparent); } /* Appearance segmented control */ .appearance { padding: 12px 12px 6px; } .appearance-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; } .segmented { display: flex; gap: 4px; background: var(--seg-bg); border: 1px solid var(--seg-border); border-radius: 9px; padding: 3px; } .seg { flex: 1; min-height: 34px; border: 0; border-radius: 7px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; background: transparent; color: var(--seg-ink); } .seg[aria-pressed="true"] { background: var(--seg-active-bg); color: var(--seg-active-ink); box-shadow: 0 1px 2px rgba(0,0,0,.10); } /* ---- Page shell ---- */ .page { max-width: 1000px; margin: 0 auto; padding: 40px 32px 0; } .page-head { margin-bottom: 30px; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); } .page-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -0.01em; color: var(--ink); margin: 8px 0 0; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .col { display: flex; flex-direction: column; gap: 20px; } .panel { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 28px; } .loading-panel { display: flex; align-items: center; gap: 14px; padding: 44px; } .error-panel { border-color: var(--err-border); } /* #error-title — the hard-error heading renders in the display serif (Newsreader 28px), matching the reference prototype; without this it would fall back to the UA h1 (bold sans). */ #error-title { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--ink); margin: 0 0 6px; } .spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--card-border); border-top-color: var(--violet); display: inline-block; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0; } .h-serif { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--ink); margin: 0; } .balance-line { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; } .balance { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 6vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .pill-warn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 999px; padding: 7px 13px; } /* ---- Forms ---- */ label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 7px; } .pricing-calculator { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--card-border); } .pricing-calculator h3 { margin: 0; font-size: 15px; color: var(--ink); } .fineprint { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 0 0; } .lede { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0; } input[type="number"] { width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit; color: var(--body); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; } input[type="number"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--violet); } .field-row { display: flex; gap: 10px; flex-wrap: wrap; } .field-row input { flex: 1; min-width: 160px; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .field-grid label { margin-top: 0; } .checkline { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink); padding: 12px 0; cursor: pointer; margin: 4px 0 0; } .checkline input { width: 18px; height: 18px; accent-color: var(--violet); margin: 0; } .checkline input:disabled { cursor: not-allowed; } /* ---- Buttons ---- */ .presets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .preset { padding: 0 20px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--body); background: var(--card); border: 1.5px solid var(--chip-border); border-radius: 10px; transition: border-color .12s, background .12s, color .12s; } .preset:hover { border-color: var(--violet); } .preset[aria-pressed="true"], .preset.is-selected { color: var(--violet); background: var(--violet-tint); border-color: var(--violet); } .btn-primary { padding: 12px 22px; min-height: 46px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--on-violet); background: var(--violet); border: 0; border-radius: 10px; transition: background .12s; margin-top: 18px; } .field-row .btn-primary { margin-top: 0; } .btn-primary:hover:not(:disabled) { background: var(--violet-press); } .btn-primary:disabled { opacity: .55; cursor: not-allowed; } .btn-primary:focus-visible { outline: 2px solid var(--focus-primary); outline-offset: 2px; } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; box-sizing: border-box; font-size: 14px; font-weight: 600; color: var(--body); text-decoration: none; background: var(--card); border: 1px solid var(--chip-border); border-radius: 9px; padding: 9px 15px; cursor: pointer; transition: background .12s, border-color .12s; } .btn-ghost-lg { min-height: 46px; border-radius: 10px; padding: 12px 18px; font-size: 15px; margin-top: 16px; } .btn-ghost:hover { background: var(--ghost-hover); border-color: var(--violet); } /* ---- Notes ---- */ .note { margin-top: 14px; font-size: 13.5px; font-weight: 500; line-height: 1.45; } .note.ok { color: var(--ok-ink); } .note.err { color: var(--err-ink); } /* ---- Focus + a11y ---- */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { .eq i, .spinner { animation: none !important; } } /* ---- Responsive ---- */ @media (max-width: 720px) { .grid { grid-template-columns: 1fr; } .topbar-inner, .page { padding-left: 20px; padding-right: 20px; } } @media (max-width: 420px) { .field-grid { grid-template-columns: 1fr; } } /* ---- CHTR-396 (DF-4): "Get the operator app" card + the shared download panel ---- Same DOM and class names as the verify page's panel (rendered by /signup/downloads.js), restyled in the console's Violet Bridge palette. The card leads the page — until an operator has connected, installing it IS the next action — and retires itself for good once one has. */ .operator-panel { margin-bottom: var(--gap, 18px); border-color: var(--violet); } .operator-panel .lede { margin-top: 10px; } .dl { margin-top: 18px; } .dl-note { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 12px; } a.dl-primary { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; box-sizing: border-box; min-height: 46px; padding: 11px 22px; margin-bottom: 12px; text-decoration: none; text-align: center; border-radius: 10px; color: var(--on-violet); background: var(--violet); font-size: 15px; font-weight: 600; transition: background .12s; } a.dl-primary:hover { background: var(--violet-press); } a.dl-primary:focus-visible { outline: 2px solid var(--focus-primary); outline-offset: 2px; } .dl-sub { font-size: 12px; font-weight: 500; opacity: .85; } .dl-others { display: flex; gap: 8px; flex-wrap: wrap; } a.dl-other { flex: 0 1 auto; min-height: 40px; box-sizing: border-box; padding: 9px 15px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--body); text-decoration: none; background: var(--card); border: 1px solid var(--chip-border); border-radius: 9px; transition: background .12s, border-color .12s; } a.dl-other:hover { background: var(--ghost-hover); border-color: var(--violet); } a.dl-other:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .dl-all { margin: 12px 0 0; font-size: 13px; } .dl-all a { color: var(--violet); } /* ============ CHTR-407: cross-page nav + shared device-list (Violet Bridge) ============ */ /* The topbar groups brand + nav on the left; the account avatar stays on the right. */ .topbar-left { display: flex; align-items: center; gap: 22px; min-width: 0; } .topnav { display: flex; align-items: center; gap: 4px; } .topnav a { padding: 7px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--muted); text-decoration: none; transition: background .12s, color .12s; } .topnav a:hover { color: var(--ink); background: var(--ghost-hover); } .topnav a[aria-current="page"] { color: var(--violet); background: var(--violet-tint); } .topnav a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } @media (max-width: 560px) { .topbar-left { gap: 12px; } } /* Device list — ported from signup.css onto the Violet Bridge palette so devices.html matches billing.html. */ .device-list { list-style: none; margin: 4px 0 0; padding: 0; } .device-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--sep); } .device-row:first-child { border-top: none; } .device-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .device-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .device-sub { font-size: 13px; color: var(--muted); } .device-current-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--violet-tint); color: var(--violet); } button.link-danger { background: none; border: 0; color: var(--magenta); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 8px; } button.link-danger:disabled { opacity: .5; cursor: not-allowed; } button.link-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--magenta) 12%, transparent); } button.link-danger:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; } button.secondary { margin-top: 20px; padding: 11px 16px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--magenta); border: 1px solid var(--magenta); border-radius: 10px; } button.secondary:disabled { opacity: .5; cursor: not-allowed; } button.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--magenta) 12%, transparent); } .note { margin-top: 16px; font-size: 14px; } .note.ok { color: var(--green); } .note.err { color: var(--magenta); } .device-empty { margin: 6px 0 0; color: var(--muted); font-size: 14px; }