/* ============================================================ settings.css — shared styling for Account & Preferences pages Design tokens (light :root + .theme-dark override) live in css/tokens.css (linked before this file). The theme is driven by a class on (.theme-dark), so all descendants re-read the vars — never via inline style mutation. ============================================================ */ /* ---------- BASE ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} /* the .25s ease transition the README asks for (theme animates smoothly) */ html{transition:background .25s ease,color .25s ease} body{ background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; transition:background .25s ease,color .25s ease; } a{color:inherit} button{font-family:inherit;color:inherit} ::selection{background:var(--accent-soft);color:var(--accent-ink)} /* Anything that paints a surface, border or text gets the theme transition */ .s-topbar,.card,.seg,.seg-track,.lang-btn,.lang-panel,.lang-opt,.subnav a, .preview,.preview .pv-divider,.glyph,.pv-glyph,.s-cta,.s-ghost,.pill-pro, .avatar,.code-chip,.brandcard{ transition:background .25s ease,border-color .25s ease,color .25s ease, box-shadow .25s ease,fill .25s ease,stroke .25s ease; } /* ---------- TOPBAR ---------- */ .s-topbar{ position:sticky;top:0;z-index:40;height:var(--topbarh); display:flex;align-items:center;gap:13px;padding:0 18px; background:var(--panel); border-bottom:1px solid var(--line); } .glyph{ width:34px;height:34px;border-radius:9px;flex:none; display:grid;place-items:center; background:var(--glyph-bg);color:var(--glyph-ink); font-family:var(--serif);font-style:italic;font-size:21px;font-weight:500; letter-spacing:-.02em;cursor:pointer;text-decoration:none; } .s-brand{display:flex;align-items:center;gap:13px;min-width:0} .s-brand .txt{line-height:1.15;min-width:0} .s-brand b{font-weight:600;font-size:14.5px;letter-spacing:-.01em} .s-brand span{display:block;font-size:10.5px;color:var(--muted)} .s-topbar .spacer{flex:1} .topbar-note{font-family:var(--mono);font-size:11px;color:var(--faint)} .pill-pro{ background:var(--cta-bg);color:var(--cta-ink);border:none;border-radius:9px; padding:9px 15px;font-size:12.5px;font-weight:600;cursor:pointer; display:flex;align-items:center;gap:7px; } .pill-pro:hover{filter:brightness(.94)} .pill-pro svg{width:13px;height:13px} .avatar{ width:32px;height:32px;border-radius:99px;flex:none; background:var(--accent-soft);color:var(--accent-ink); display:grid;place-items:center;font-size:12.5px;font-weight:600; } /* ---------- SHARED CARDS ---------- */ .card{ background:var(--panel);border:1px solid var(--line); border-radius:16px;padding:26px; } .card-h{ font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.03em; text-transform:uppercase;color:var(--muted);margin:0 0 16px; } .divider{height:1px;background:var(--line-2);margin:20px 0;border:none} /* ---------- BUTTONS ---------- */ .s-cta{ background:var(--cta-bg);color:var(--cta-ink);border:none;border-radius:11px; padding:13px 18px;font-size:13.5px;font-weight:600;cursor:pointer; } .s-cta:hover{filter:brightness(.94)} .s-ghost{ background:var(--panel);color:var(--ink);border:1px solid var(--line); border-radius:10px;padding:11px 16px;font-size:13.5px;font-weight:600;cursor:pointer; } .s-ghost:hover{border-color:var(--accent);color:var(--accent-ink)} .s-danger{ background:var(--panel-2);color:var(--bad);border:1px solid var(--bad-line); border-radius:10px;padding:11px 16px;font-size:13.5px;font-weight:600;cursor:pointer; } .s-danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)} /* ============================================================ ACCOUNT page ============================================================ */ .acct-shell{ max-width:1000px;margin:0 auto;padding:40px 28px 80px; display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start; } .subnav{display:flex;flex-direction:column;gap:3px;position:sticky;top:78px} .subnav .acct-title{ font-family:var(--serif);font-size:26px;font-weight:500; letter-spacing:-.01em;margin-bottom:14px; } .subnav a{ padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:500; color:var(--muted);cursor:pointer;text-decoration:none; } .subnav a:hover{background:var(--panel-2);color:var(--ink)} .subnav a.active{font-weight:600;background:var(--accent-soft);color:var(--accent-ink)} .acct-main{display:flex;flex-direction:column;gap:18px} /* plan card */ .plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .plan-name{display:flex;align-items:center;gap:9px} .plan-name h3{font-family:var(--sans);font-weight:600;font-size:18px;margin:0} .tag{ font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft); border-radius:5px;padding:3px 7px; } .plan-sub{font-size:13.5px;color:var(--muted);margin:9px 0 0} .plan-sub b{color:var(--ink);font-weight:600} .plan-price{text-align:right;white-space:nowrap} .plan-price b{font-family:var(--sans);font-weight:700;font-size:26px;letter-spacing:-.02em} .plan-price span{font-size:13px;color:var(--faint)} .btn-row{display:flex;gap:10px;flex-wrap:wrap} /* payment method */ .pay-row{display:flex;align-items:center;gap:14px} .card-brand{ width:46px;height:32px;border-radius:6px;flex:none; background:var(--ink);color:var(--panel);font-family:var(--mono); font-size:9px;font-weight:600;display:grid;place-items:center;letter-spacing:.05em; } .theme-dark .card-brand{background:#2a2e39;color:#f2f3f7} .pay-info{flex:1;min-width:0} .pay-num{font-family:var(--mono);font-size:14px} .pay-exp{font-size:12px;color:var(--faint);margin-top:3px} /* billing history */ .bill-row{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13.5px; } .bill-row:last-child{border-bottom:none} .bill-row.muted{color:var(--faint)} .bill-right{display:flex;align-items:center;gap:14px} .bill-right b{font-weight:600} .receipt{color:var(--accent);text-decoration:none;font-weight:500;cursor:pointer} .receipt:hover{text-decoration:underline} /* ============================================================ PREFERENCES page ============================================================ */ .pref-shell{ max-width:1000px;margin:0 auto;padding:42px 24px 80px; display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start; } .pref-left{display:flex;flex-direction:column;gap:22px} .pref-intro .pref-h1{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.01em} .pref-intro p{font-size:13.5px;color:var(--muted);margin:6px 0 0;line-height:1.5} .field-label{ font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted); } .pref-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px} /* segmented appearance control */ .seg-track{ display:flex;gap:5px;border-radius:11px;padding:5px;margin-top:14px; background:var(--panel-2);border:1px solid var(--line); } .seg{ flex:1;border:none;background:transparent;cursor:pointer; font-size:13px;font-weight:600;padding:11px;border-radius:8px;color:var(--muted); display:flex;align-items:center;justify-content:center;gap:8px; } .seg:hover{color:var(--ink)} .seg svg{width:15px;height:15px} .seg.active{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-shadow)} /* palette swatches — the colours themselves, never product names */ .pal-dots{display:inline-flex;gap:5px;vertical-align:middle} .pal-dots i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.22)} .theme-dark .pal-dots i{border-color:rgba(255,255,255,.35)} /* language dropdown */ .lang-wrap{position:relative} .lang-btn{ width:100%;margin-top:14px;display:flex;align-items:center;gap:12px;text-align:left; background:var(--panel-2);border:1px solid var(--line);border-radius:11px; padding:13px 15px;cursor:pointer;font-size:14.5px; } .lang-btn .code-chip{ font-family:var(--mono);font-size:11px;font-weight:600;border-radius:6px;padding:4px 7px; background:var(--accent-soft);color:var(--accent-ink); } .lang-btn .lang-cur{flex:1;font-weight:500} .lang-btn .chev{width:16px;height:16px;color:var(--faint);transition:transform .2s} .lang-wrap.open .lang-btn .chev{transform:rotate(180deg)} .lang-panel{ position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20; background:var(--panel);border:1px solid var(--line);border-radius:12px; box-shadow:0 24px 50px -24px rgba(20,30,80,.4); padding:6px;max-height:288px;overflow-y:auto;display:none; } .lang-wrap.open .lang-panel{display:block} .lang-opt{ width:100%;display:flex;align-items:center;gap:12px;text-align:left; background:none;border:none;cursor:pointer;padding:10px 11px;border-radius:8px;font-size:14px; } .lang-opt:hover{background:var(--panel-2)} .lang-opt.sel{background:var(--accent-soft);color:var(--accent-ink)} .lang-opt .oc{font-family:var(--mono);font-size:10.5px;font-weight:600;width:34px;flex:none;color:var(--muted)} .lang-opt.sel .oc{color:var(--accent-ink)} .lang-note{font-size:12px;color:var(--faint);margin:13px 0 0;line-height:1.5} .lang-note i{font-style:italic;font-family:var(--serif)} .saved-line{font-size:12px;color:var(--faint);display:flex;align-items:center;gap:8px} .saved-line svg{width:14px;height:14px} /* live preview */ .pv-kicker{ font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);margin-bottom:11px; } .preview{ background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden; box-shadow:0 18px 44px -28px rgba(20,30,80,.4); } .pv-divider{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)} .pv-glyph{ width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center; background:var(--glyph-bg);color:var(--glyph-ink); font-family:var(--serif);font-style:italic;font-size:17px; } .pv-head{line-height:1.2} .pv-head b{font-weight:600;font-size:12.5px} .pv-head span{display:block;font-size:10px;color:var(--muted)} .pv-body{padding:22px 22px 24px} .pv-body .pv-les-kicker{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)} .pv-body h2{font-family:var(--sans);font-weight:600;font-size:26px;letter-spacing:-.02em;margin:9px 0 0} .pv-body p{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--muted);margin:13px 0 0} .pv-figure{ background:var(--panel-2);border:1px solid var(--line);border-radius:10px;height:96px; margin:18px 0;display:flex;align-items:center;justify-content:center; } .pv-curve{stroke:var(--ink)} .pv-acc-stroke{stroke:var(--accent)} .pv-acc-fill{fill:var(--accent)} .pv-ring{stroke:var(--panel-2)} .pv-actions{display:flex;gap:10px} .pv-cta{flex:1;background:var(--cta-bg);color:var(--cta-ink);border:none;border-radius:10px; padding:13px;font-size:13.5px;font-weight:600;cursor:pointer} .pv-mark{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px; padding:13px 16px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap} /* ---------- RESPONSIVE ---------- */ @media(max-width:860px){ .pref-shell{grid-template-columns:1fr} .acct-shell{grid-template-columns:1fr;gap:20px} .subnav{position:static;flex-direction:row;flex-wrap:wrap} .subnav .acct-title{flex-basis:100%} } @media(max-width:560px){ .s-brand span{display:none} .acct-shell,.pref-shell{padding-left:16px;padding-right:16px} } @media(prefers-reduced-motion:reduce){*{transition:none!important}} /* ---- preferences: reading sliders + focus toggle (added 2026-07-03) ---- */ .seg-wrap{flex-wrap:wrap} .pref-sliders{display:flex;flex-direction:column;gap:12px;margin-top:16px} .sl-row{display:grid;grid-template-columns:130px 1fr 56px;align-items:center;gap:12px} .sl-lab{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .sl-row input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer} .sl-val{font-family:var(--mono);font-size:.78rem;color:var(--faint);text-align:right} .pref-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%; background:none;border:none;cursor:pointer;text-align:left;padding:0;color:var(--ink)} .pref-toggle .tt b{display:block;font-family:var(--sans);font-size:.9rem;font-weight:600} .pref-toggle .tt span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px} .pref-switch{flex:none;width:40px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:background .15s} .pref-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%; background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s} .pref-toggle[aria-pressed="true"] .pref-switch{background:var(--accent)} .pref-toggle[aria-pressed="true"] .pref-switch::after{left:21px} @media(max-width:560px){.sl-row{grid-template-columns:100px 1fr 48px}}