/* Urusbaki design system — Midnight Ledger (dark) + Paper Ledger (light). Tokens switch on ; with no attribute we follow the OS. Fonts: Fraunces (display) · Hanken Grotesk (UI) · JetBrains Mono (numerals). */ /* ---- DARK (default) ---- */ :root, [data-theme="dark"]{ --bg:#0C1310; --panel:#0F1814; --surface:#14201B; --raised:#1A2A23; --line:rgba(233,225,205,.10); --line-soft:rgba(233,225,205,.06); --text:#ECE6D6; --text-dim:#A7B0A4; --text-faint:#6E7A70; --pos:#5BD6A6; --pos2:#2E8E6C; --save:#E0BB72; --debt:#E69A6B; --danger:#E2786B; --margin:transparent; --margin-op:0; --grad-base:linear-gradient(90deg,#3aa07c,#5BD6A6); --grad-save:linear-gradient(90deg,#c9a558,#E0BB72); --grad-debt:linear-gradient(90deg,#cf8459,#E69A6B); --pill-soon-text:#19120c; --pill-on-fill:#1a0f0c; --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.8); --inset-hi:rgba(255,255,255,.03); --atmos: radial-gradient(680px 420px at 22% -8%, rgba(91,214,166,.16), transparent 60%), radial-gradient(560px 480px at 96% 4%, rgba(224,187,114,.08), transparent 55%), radial-gradient(900px 700px at 60% 120%, rgba(46,142,108,.10), transparent 60%); --grain-blend:normal; --grain-opacity:.045; --card-rule:linear-gradient(90deg,transparent,rgba(236,230,214,.16),transparent); } /* ---- LIGHT ---- */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#F2EBDA; --panel:#E7DFCB; --surface:#FBF6EA; --raised:#F6F0E1; --line:rgba(43,38,26,.14); --line-soft:rgba(43,38,26,.08); --text:#221E15; --text-dim:#685F49; --text-faint:#988F76; --pos:#1E6B52; --pos2:#2E8E6C; --save:#B0822E; --debt:#B15633; --danger:#A6392B; --margin:#C2664E; --margin-op:.5; --grad-base:linear-gradient(90deg,#1E6B52,#2E8E6C); --grad-save:linear-gradient(90deg,#9c7227,#C89A3E); --grad-debt:linear-gradient(90deg,#9b4a2c,#C26B49); --pill-soon-text:#FBF6EA; --pill-on-fill:#FBF6EA; --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px -30px rgba(70,55,25,.55); --inset-hi:rgba(255,255,255,.6); --atmos: radial-gradient(720px 460px at 18% -10%, rgba(46,142,108,.10), transparent 60%), radial-gradient(560px 460px at 98% 2%, rgba(176,130,46,.10), transparent 55%), repeating-linear-gradient(0deg, transparent 0 29px, rgba(43,38,26,.035) 29px 30px); --grain-blend:multiply; --grain-opacity:.06; --card-rule:linear-gradient(90deg,transparent,rgba(43,38,26,.16),transparent); }} [data-theme="light"]{ --bg:#F2EBDA; --panel:#E7DFCB; --surface:#FBF6EA; --raised:#F6F0E1; --line:rgba(43,38,26,.14); --line-soft:rgba(43,38,26,.08); --text:#221E15; --text-dim:#685F49; --text-faint:#988F76; --pos:#1E6B52; --pos2:#2E8E6C; --save:#B0822E; --debt:#B15633; --danger:#A6392B; --margin:#C2664E; --margin-op:.5; --grad-base:linear-gradient(90deg,#1E6B52,#2E8E6C); --grad-save:linear-gradient(90deg,#9c7227,#C89A3E); --grad-debt:linear-gradient(90deg,#9b4a2c,#C26B49); --pill-soon-text:#FBF6EA; --pill-on-fill:#FBF6EA; --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px -30px rgba(70,55,25,.55); --inset-hi:rgba(255,255,255,.6); --atmos: radial-gradient(720px 460px at 18% -10%, rgba(46,142,108,.10), transparent 60%), radial-gradient(560px 460px at 98% 2%, rgba(176,130,46,.10), transparent 55%), repeating-linear-gradient(0deg, transparent 0 29px, rgba(43,38,26,.035) 29px 30px); --grain-blend:multiply; --grain-opacity:.06; --card-rule:linear-gradient(90deg,transparent,rgba(43,38,26,.16),transparent); } *{ box-sizing:border-box; margin:0; padding:0; } body{ font-family:"Hanken Grotesk", system-ui, sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden; transition:background .35s ease, color .35s ease; } body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--atmos); } body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:30px 28px 80px; } /* top bar */ .topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; gap:18px; flex-wrap:wrap; } .brand{ display:flex; align-items:baseline; gap:10px; } .mark{ font-family:"Fraunces",serif; font-weight:500; font-size:25px; letter-spacing:-.01em; } .mark b{ color:var(--pos); font-weight:600; } .mark .dot{ color:var(--save); } .tag{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); } .controls{ display:flex; align-items:center; gap:10px; } .month{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 12px; box-shadow:0 1px 0 var(--inset-hi) inset; } .month button{ all:unset; cursor:pointer; color:var(--text-dim); font-size:15px; line-height:1; padding:2px 4px; border-radius:6px; transition:.2s; } .month button:hover{ color:var(--text); } .month span{ font-size:13px; letter-spacing:.04em; min-width:96px; text-align:center; font-variant-numeric:tabular-nums; } .icon-btn{ all:unset; cursor:pointer; width:40px; height:40px; display:grid; place-items:center; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text-dim); transition:.2s; box-shadow:0 1px 0 var(--inset-hi) inset; } .icon-btn:hover{ color:var(--text); transform:translateY(-1px); } /* bento grid + cards */ .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; } .card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow); overflow:hidden; opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.22,1,.36,1) forwards; } .card::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--card-rule); } @keyframes rise{ to{ opacity:1; transform:none; } } .span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-4{grid-column:span 4} .span-8{grid-column:span 8}.span-6{grid-column:span 6}.span-12{grid-column:span 12} .eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); display:flex; align-items:center; gap:8px; } .eyebrow .pip{ width:6px; height:6px; border-radius:2px; background:var(--pos); } /* hero */ .hero{ padding-left:30px; } .hero::after{ content:""; position:absolute; left:14px; top:18px; bottom:18px; width:2px; background:var(--margin); opacity:var(--margin-op); border-radius:2px; } .hero .amount{ font-family:"Fraunces",serif; font-weight:400; letter-spacing:-.02em; line-height:.92; font-size:clamp(52px,8vw,86px); margin:14px 0 6px; font-variant-numeric:tabular-nums; } .hero .cur{ font-size:.34em; color:var(--pos); font-weight:500; vertical-align:.62em; margin-right:.12em; letter-spacing:0; } .hero .cents{ color:var(--text-faint); } .hero .sub{ color:var(--text-dim); font-size:14px; } .hero .sub b{ color:var(--pos); font-weight:600; } .segbar{ display:flex; height:10px; border-radius:999px; overflow:hidden; margin:22px 0 16px; background:var(--panel); } .segbar i{ display:block; height:100%; width:0; transition:width 1.1s cubic-bezier(.22,1,.36,1); } .s-base{ background:var(--grad-base); } .s-allow{ background:var(--grad-save); } .s-pt{ background:var(--grad-debt); } .legend{ display:flex; gap:22px; flex-wrap:wrap; } .leg{ display:flex; flex-direction:column; gap:3px; } .leg .k{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); } .leg .k .sw{ width:9px; height:9px; border-radius:3px; } .leg .v{ font-family:"JetBrains Mono",monospace; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; padding-left:16px; } /* title row */ .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .head h3{ font-family:"Fraunces",serif; font-weight:500; font-size:18px; letter-spacing:-.01em; } .more{ font-size:12px; color:var(--text-faint); cursor:pointer; transition:.2s; } .more:hover{ color:var(--pos); } /* due soon */ .due{ display:flex; flex-direction:column; } .due-row{ display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line-soft); } .due-row:first-of-type{ border-top:none; } .cal{ width:42px; height:46px; border-radius:10px; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; text-align:center; flex:none; } .cal .d{ font-family:"JetBrains Mono",monospace; font-size:16px; font-weight:700; line-height:1; } .cal .m{ font-size:9px; letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase; margin-top:2px; } .due-row .nm{ flex:1; min-width:0; } .due-row .nm b{ font-weight:600; font-size:14.5px; display:block; } .due-row .nm small{ color:var(--text-faint); font-size:12px; } .due-row .amt{ font-family:"JetBrains Mono",monospace; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; } .pill{ font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; letter-spacing:.02em; white-space:nowrap; } .pill.soon{ color:var(--pill-soon-text); background:var(--debt); } .pill.warn{ color:var(--pill-on-fill); background:var(--danger); } .pill.calm{ color:var(--pos); background:color-mix(in srgb, var(--pos) 14%, transparent); border:1px solid color-mix(in srgb, var(--pos) 30%, transparent); } /* mini stats */ .stat{ display:flex; flex-direction:column; gap:6px; } .stat .lab{ font-size:12px; color:var(--text-dim); } .stat .num{ font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .stat .num .c{ font-size:.6em; color:var(--text-faint); } .stat .foot{ font-size:11.5px; color:var(--text-faint); } .reserves{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .reserves .stat + .stat{ border-left:1px solid var(--line-soft); padding-left:18px; } /* debt */ .debt-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px; } .debt-top .num{ font-family:"Fraunces",serif; font-size:34px; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .debt-top .num .cur{ font-size:.42em; color:var(--debt); vertical-align:.5em; margin-right:.1em; } .free-by{ text-align:right; } .free-by .k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); } .free-by .v{ font-family:"JetBrains Mono",monospace; color:var(--save); font-weight:700; font-size:15px; margin-top:2px; } .track{ height:9px; border-radius:999px; background:var(--panel); overflow:hidden; } .track i{ display:block; height:100%; width:0; background:var(--grad-debt); transition:width 1.2s cubic-bezier(.22,1,.36,1); } .debt-foot{ display:flex; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--text-faint); } .debt-foot b{ color:var(--text-dim); font-weight:600; } /* savings */ .goal{ padding:14px 0; border-top:1px solid var(--line-soft); } .goal:first-of-type{ border-top:none; padding-top:2px; } .goal .g-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; } .goal .g-name{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; } .star{ color:var(--save); font-size:12px; } .goal .g-val{ font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; } .goal .g-val b{ color:var(--text); } .gbar{ height:7px; border-radius:999px; background:var(--panel); overflow:hidden; } .gbar i{ display:block; height:100%; width:0; transition:width 1.1s cubic-bezier(.22,1,.36,1); } .g-gold i{ background:var(--grad-save); } .g-jade i{ background:var(--grad-base); } /* donut */ .donut-wrap{ display:flex; align-items:center; gap:20px; } .donut{ --p1:56; --p2:30; position:relative; width:120px; height:120px; flex:none; border-radius:50%; background:conic-gradient(var(--pos2) 0 calc(var(--p1)*1%), var(--save) calc(var(--p1)*1%) calc((var(--p1)+var(--p2))*1%), var(--debt) calc((var(--p1)+var(--p2))*1%) 100%); mask:radial-gradient(circle 36px at 50% 50%, transparent 98%, #000 100%); -webkit-mask:radial-gradient(circle 36px at 50% 50%, transparent 98%, #000 100%); } .donut-c{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; } .donut-c b{ font-family:"Fraunces",serif; font-size:20px; } .donut-c small{ font-size:10px; color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase; } .dleg{ display:flex; flex-direction:column; gap:11px; flex:1; } .dleg .row{ display:flex; align-items:center; gap:10px; font-size:13px; } .dleg .sw{ width:10px; height:10px; border-radius:3px; } .dleg .pct{ margin-left:auto; font-family:"JetBrains Mono",monospace; color:var(--text-dim); font-variant-numeric:tabular-nums; } /* relief */ .relief .r-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line-soft); } .relief .r-row:first-of-type{ border-top:none; } .relief .r-name{ font-size:13.5px; flex:1; } .relief .r-name small{ display:block; color:var(--text-faint); font-size:11px; font-family:"JetBrains Mono",monospace; } .relief .maxed{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--pos); border:1px solid color-mix(in srgb, var(--pos) 32%, transparent); padding:3px 8px; border-radius:999px; } .relief .mini{ width:78px; height:6px; border-radius:999px; background:var(--panel); overflow:hidden; } .relief .mini i{ display:block; height:100%; background:var(--grad-save); width:0; transition:width 1s cubic-bezier(.22,1,.36,1); } /* licensing UI */ .plan-badge{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:3px 9px; border-radius:999px; color:var(--text-dim); border:1px solid var(--line); background:var(--panel); } .plan-badge.plan-paid{ color:var(--save); border-color:color-mix(in srgb, var(--save) 35%, transparent); background:color-mix(in srgb, var(--save) 12%, transparent); } .plan-badge.plan-expired{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); background:color-mix(in srgb, var(--danger) 12%, transparent); } .btn-premium{ display:inline-block; margin-top:14px; padding:10px 18px; border-radius:10px; background:var(--grad-base); color:#08110d; font-weight:700; font-size:14px; text-decoration:none; } .upsell{ display:flex; align-items:center; gap:14px; margin-top:8px; padding:14px; border-radius:12px; border:1px dashed var(--line); background:var(--panel); } .upsell .lock{ font-size:20px; filter:grayscale(.2); } .upsell b{ font-size:14px; display:block; } .upsell small{ color:var(--text-faint); font-size:12px; } .btn-upsell{ margin-left:auto; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; color:var(--save); border:1px solid color-mix(in srgb, var(--save) 40%, transparent); } .btn-upsell:hover{ background:color-mix(in srgb, var(--save) 12%, transparent); } /* auth pages */ .auth-wrap{ min-height:78vh; display:grid; place-items:center; } .auth-card{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow); position:relative; } .auth-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--card-rule); } .auth-card h1{ font-family:"Fraunces",serif; font-weight:500; font-size:24px; letter-spacing:-.01em; margin-bottom:4px; } .auth-card .lede{ color:var(--text-dim); font-size:13.5px; margin-bottom:22px; } .field{ margin-bottom:16px; } .field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; letter-spacing:.02em; } .field input{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:15px; font-family:inherit; } .field input:focus{ outline:none; border-color:color-mix(in srgb, var(--pos) 45%, transparent); } .field input.mono{ font-family:"JetBrains Mono",monospace; letter-spacing:.3em; text-align:center; } .btn{ width:100%; padding:12px; border-radius:10px; border:none; cursor:pointer; font-weight:700; font-size:14px; background:var(--grad-base); color:#08110d; font-family:inherit; } .btn.secondary{ background:var(--panel); color:var(--text); border:1px solid var(--line); font-weight:600; } .btn.danger{ background:transparent; color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); font-weight:600; } .alert{ padding:10px 13px; border-radius:10px; font-size:13px; margin-bottom:16px; } .alert.err{ color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent); border:1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .alert.ok{ color:var(--pos); background:color-mix(in srgb, var(--pos) 12%, transparent); border:1px solid color-mix(in srgb, var(--pos) 30%, transparent); } .meter{ height:5px; border-radius:999px; background:var(--panel); overflow:hidden; margin-top:8px; } .meter i{ display:block; height:100%; width:0; transition:width .25s, background .25s; } .hint{ font-size:11.5px; color:var(--text-faint); margin-top:6px; } .sec-block{ padding:18px 0; border-top:1px solid var(--line-soft); } .sec-block:first-of-type{ border-top:none; } .sec-block h3{ font-family:"Fraunces",serif; font-weight:500; font-size:17px; margin-bottom:6px; } .enroll-key{ font-family:"JetBrains Mono",monospace; font-size:13px; word-break:break-all; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px; margin:10px 0; } .row-actions{ display:flex; gap:10px; flex-wrap:wrap; } .row-actions form{ flex:1; min-width:140px; } .note{ text-align:center; margin-top:40px; color:var(--text-faint); font-size:12px; letter-spacing:.03em; } .note b{ color:var(--text-dim); font-weight:600; } @media(max-width:860px){ .span-7,.span-5,.span-4,.span-8,.span-6{ grid-column:span 12; } .wrap{ padding:22px 16px 100px; } .hero .amount{ font-size:clamp(46px,16vw,70px); } } @media (prefers-reduced-motion: reduce){ .card{ animation:none; opacity:1; transform:none; } *{ transition:none !important; } }