/* Shared design system for the OffCycle account pages (account / settings / alerts). Mirrors the tracker's tokens so the whole site feels like one product. */ :root{ --bg:#f6f7f9; --panel:#ffffff; --ink:#141a21; --ink2:#454f5b; --mute:#6a7480; --line:#e3e7ec; --line2:#eef0f3; --accent:#17416e; --accent2:#2563a3; --accent-soft:#eef2f7; --gold:#8a6410; --gold-soft:#f6efdd; --green:#157a52; --green-soft:#e7f1ea; --danger:#b23b3b; --danger-soft:#f7e7e7; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --serif:ui-serif,"New York","Iowan Old Style",Georgia,"Times New Roman",serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* One motion language shared across the whole site: a refined ease-out (fast start, soft stop) at medium presence — the Stripe-like feel we're after. */ --ease:cubic-bezier(.22,.7,.2,1); --t-fast:.15s; --t-mid:.24s; --t-slow:.42s; } /* Dark mode — applied when data-theme="dark" is on . Persisted in localStorage ('oc-theme') and carried across every page by paintNav() in js/auth.js. */ :root[data-theme="dark"]{ --bg:#0e1319; --panel:#151b23; --ink:#e8edf3; --ink2:#aeb8c4; --mute:#7d8794; --line:#262e39; --line2:#1c232c; --accent:#5a90cf; --accent2:#7aa8dd; --accent-soft:#182533; --gold:#d4a24a; --gold-soft:#2a2213; --green:#3fa877; --green-soft:#14261e; --danger:#e06a6a; --danger-soft:#2a1515; } /* theme toggle button injected into the nav by paintNav() */ .theme-btn{background:none;border:1px solid var(--line);border-radius:6px;width:34px;height:32px; display:inline-flex;align-items:center;justify-content:center;color:var(--mute);cursor:pointer;padding:0;flex:none} .theme-btn:hover{border-color:var(--accent2);color:var(--accent)} .theme-btn svg{width:16px;height:16px} *{box-sizing:border-box} /* The hidden attribute must always win — otherwise display:block rules (e.g. .field) override it and elements like the register-only name field leak onto other views. */ [hidden]{display:none !important} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility; font-feature-settings:"kern" 1,"liga" 1} a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline} /* header (shared with tracker) */ header{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .hd{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .brand{font-weight:800;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px} .brand a{color:var(--ink)} .brand a:hover{text-decoration:none} /* offcycle logo — the cycle-ring mark locked up with a clean two-tone wordmark: lowercase "off" in ink + "cycle" in the accent. The mark is inline SVG (not a background-image) so it can actually animate: the ring draws itself in once on load, and does a single confident spin on hover. */ .brand .wm{display:inline-flex;align-items:center;font-weight:800;font-size:19px; letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap} .wmmark{width:1.34em;height:1.34em;margin-right:.44em;flex:none;overflow:visible} .wmmark .wmbg{fill:var(--accent)} .wmmark .wmring{stroke:#fff;stroke-dasharray:84.4 22.4;animation:wm-draw .9s var(--ease) both} .brand a:hover .wmmark{animation:wm-spin .6s var(--ease) 1} @keyframes wm-draw{from{stroke-dashoffset:84.4}to{stroke-dashoffset:0}} @keyframes wm-spin{to{transform:rotate(360deg)}} .brand .wm b{color:var(--accent);font-weight:800;letter-spacing:-.02em; transition:color .16s var(--ease,ease)} .brand a:hover .wm b{color:var(--accent2)} .brand .tag{font-weight:600;font-size:11px;color:var(--mute);border:1px solid var(--line); padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em} .hd .sp{flex:1} #navAuth{display:flex;align-items:center;gap:16px;font-weight:600} .btn{font-family:var(--sans);font-size:14px;font-weight:600;border:1px solid var(--line);background:var(--panel); color:var(--ink);border-radius:6px;padding:9px 15px;cursor:pointer;display:inline-flex;align-items:center; gap:7px;justify-content:center;text-decoration:none} .btn:hover{border-color:var(--accent2);color:var(--accent);text-decoration:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent2);color:#fff} .btn.small{padding:6px 12px;font-size:13px} .btn.danger{color:var(--danger);border-color:var(--danger-soft)} .btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)} .btn:disabled{opacity:.55;cursor:default} .btn.block{width:100%} .linkbtn{background:none;border:none;color:var(--mute);font-size:14px;cursor:pointer;text-decoration:underline; padding:0;font-family:var(--sans);font-weight:600} .linkbtn:hover{color:var(--accent)} /* page shell */ main{max-width:1100px;margin:28px auto 60px;padding:0 20px} .narrow{max-width:460px;margin-inline:auto} h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px} .lead{color:var(--mute);margin:0 0 20px} h2{font-size:16px;letter-spacing:-.005em;margin:0 0 14px} .card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px;margin-bottom:16px} .card h2{border-bottom:1px solid var(--line2);padding-bottom:12px} /* forms */ label.field{display:block;margin-bottom:14px} label.field .lab{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:5px} input[type=text],input[type=email],input[type=password],select,textarea{ width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel); color:var(--ink);font-size:14px;font-family:var(--sans)} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent2)} select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 12px center;padding-right:34px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.row2{grid-template-columns:1fr}} /* tabs */ .tabs{display:flex;gap:4px;background:var(--line2);padding:4px;border-radius:8px;margin-bottom:20px} .tabs button{flex:1;padding:9px;border:none;background:none;border-radius:5px;font-weight:600;font-size:14px; color:var(--ink2);cursor:pointer;font-family:var(--sans)} .tabs button[aria-selected="true"]{background:var(--panel);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.06)} /* notices */ .note{padding:11px 14px;border-radius:6px;font-size:13px;margin-bottom:14px;display:none} .note.show{display:block} .note.err{background:var(--danger-soft);color:var(--danger)} .note.ok{background:var(--green-soft);color:var(--green)} .note.info{background:var(--accent-soft);color:var(--accent)} /* alerts list */ .alert-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line); border-radius:8px;margin-bottom:12px;background:var(--panel)} .alert-item .body{flex:1} .alert-item .title{font-weight:700;margin-bottom:6px} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent);padding:3px 9px;border-radius:20px} .muted{color:var(--mute)} .center{text-align:center} footer{max-width:1100px;margin:0 auto;padding:24px 20px 50px;color:var(--mute);font-size:12.5px} /* Ad slots (free tier only; Premium is ad-free). Filled by js/ads.js. */ .adslot{margin:14px 0} .ad-house{display:block;border:1px dashed var(--line);border-radius:8px;padding:15px 18px;text-decoration:none;color:var(--ink2);background:var(--panel);position:relative} .ad-house:hover{border-color:var(--accent2)} .ad-house .ad-tag{position:absolute;top:8px;right:10px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:1px 5px} .ad-house b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px} .ad-house .ad-cta{display:inline-block;margin-top:8px;color:var(--accent);font-weight:700;font-size:13px} /* ── Motion: subtle, fast, professional. Interactive elements ease on state change, primary actions depress slightly on press, and content settles in with a gentle rise on load. All of it is switched off for users who ask for reduced motion. ── */ a,button,summary,[role="button"],.btn,.theme-btn,.linkbtn,.tabs button,input,select,textarea,.alert-item,.ad-house,.chip,.card{ transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .btn:active,button:active{transform:translateY(1px)} .alert-item:hover{border-color:var(--accent2);box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px -14px rgba(16,24,40,.20)} /* ── Light polish: soft resting depth on cards, a touch more presence on the primary CTA. Kept subtle so nothing reads as heavy or "templatey". ── */ .card{box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03)} .btn.primary{box-shadow:0 1px 2px rgba(23,65,110,.18)} .btn.primary:hover{box-shadow:0 3px 10px -2px rgba(23,65,110,.30)} :root[data-theme="dark"] .card{box-shadow:0 1px 2px rgba(0,0,0,.30)} :root[data-theme="dark"] .btn.primary{box-shadow:0 1px 2px rgba(0,0,0,.35)} /* ── Page transitions: a light cross-fade + slight rise between full page loads, via the cross-document View Transitions API. Progressive enhancement — browsers without support just navigate normally. ── */ @view-transition{navigation:auto} ::view-transition-old(root){animation:oc-vt-out .2s var(--ease) both} ::view-transition-new(root){animation:oc-vt-in .28s var(--ease) both} @keyframes oc-vt-out{to{opacity:0}} @keyframes oc-vt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ── Section reveal: elements tagged .reveal settle in with a gentle fade + rise, once, as they enter view (a small IntersectionObserver adds .shown - see js/reveal.js for pages that don't already carry their own copy of this logic). --i (set inline per element, optional) staggers a cascade of several at once. Gated on html.js so no-JS visitors always see content immediately. ── */ html.js .reveal{opacity:0;transform:translateY(18px); transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease); transition-delay:calc(var(--i,0) * 70ms);will-change:opacity,transform} html.js .reveal.shown{opacity:1;transform:none} /* ── Skeleton loaders: faintly pulsing placeholders in the shape of the content, swapped for real data (which fades in) once it's ready. ── */ @keyframes oc-sk{0%,100%{opacity:1}50%{opacity:.45}} .sk{display:block;height:12px;border-radius:6px;background:var(--line2);animation:oc-sk 1.25s var(--ease) infinite} :root[data-theme="dark"] .sk{background:var(--line)} .sk-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px} @keyframes oc-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .fade-in{animation:oc-fade-in var(--t-mid) var(--ease) both} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} ::view-transition-old(root),::view-transition-new(root){animation:none!important} html.js .reveal{opacity:1!important;transform:none!important} .sk{animation:none!important} } /* ── Mobile: tighten spacing so pages don't feel cramped / overflow on phones ── */ @media(max-width:560px){ .hd{padding:12px 16px;gap:10px 14px} #navAuth{gap:14px;font-size:13px;flex-wrap:wrap} main{padding:0 16px;margin:20px auto 44px} main h1{font-size:26px;line-height:1.15} .lead{font-size:14.5px} .card{padding:18px} footer{padding-left:16px;padding-right:16px} .tabs button{font-size:13px;padding:8px} .alert-item{flex-direction:column;gap:10px} }