/* Account UI: a soft, light "aurora glass" theme for everything under /profile, * /verify, /reset-password and /admin, layered on top of win95.css + home.css * (loaded first, see each page's ) — the navbar stays the site's classic * Win95 skin; only the page body and the content below it (panels, forms, etc.) * get the new look. Lighter than the homepage: a near-white lilac base with * three soft color blobs (violet / pink / teal), dark slate text, white * translucent panels and thin low-alpha borders. The liquidGL card keeps its * own wallpaper (mix-blend-mode) so it's unaffected. Mobile-first: the panel is * full-width on a phone and gains a max-width and roomier padding on desktop. */ :root { --bg: #eef0fb; --panel-bg: rgba(255, 255, 255, 0.55); --panel-border: rgba(23, 23, 58, 0.08); --surface: rgba(255, 255, 255, 0.6); --surface-soft: rgba(255, 255, 255, 0.42); --text: #23233a; --text-dim: #6b6f88; --accent: #4b3ff2; --accent-soft: rgba(75, 63, 242, 0.16); --green: #17a558; --red: #e03a63; --radius-lg: 18px; --radius-md: 10px; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; /* Drop win95.css's reserved 28px taskbar strip — the footer is in-flow. */ padding-bottom: 0; color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: radial-gradient(circle at 12% -8%, rgba(124, 92, 255, 0.35), transparent 55%), radial-gradient(circle at 92% 4%, rgba(255, 138, 176, 0.3), transparent 52%), radial-gradient(circle at 50% 112%, rgba(90, 214, 190, 0.28), transparent 55%), var(--bg); } .is-hidden { display: none !important; } /* Group Start + the Lab link on the left of the win95 navbar; navbar-95's space-between then pushes the profile mark to the right. */ .navbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; } /* ── Page + panel ───────────────────────────────────────────────────────── */ .page { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px 48px; min-height: calc(100vh - 58px); } .panel { width: 100%; max-width: 380px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 20px 50px -24px rgba(60, 50, 120, 0.35); overflow: hidden; animation: panel-in 0.35s ease both; } @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .panel { animation: none; } } .panel-head { padding: 18px 22px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); border-bottom: 1px solid var(--panel-border); } .panel-body { padding: 22px; } .panel-loading { padding: 32px; text-align: center; color: var(--text-dim); font-size: 14px; } /* ── Forms ──────────────────────────────────────────────────────────────── */ .auth-form label { display: block; margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } .auth-form label:first-of-type { margin-top: 0; } .field { width: 100%; margin-top: 6px; padding: 11px 13px; /* 16px keeps iOS Safari from auto-zooming (and never zooming back out) on focus of any field on the page. */ font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-md); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .field::placeholder { color: var(--text-dim); } .field:focus { outline: none; border-color: var(--accent); background: rgba(75, 63, 242, 0.06); box-shadow: 0 0 0 3px var(--accent-soft); } .handle-preview { margin: 6px 0 0; font-size: 19px; font-weight: 700; letter-spacing: 0.02em; color: var(--green); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; } .note { margin: 6px 0 0; font-size: 12px; color: var(--text-dim); } .btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--panel-border); border-radius: 999px; padding: 10px 20px; transition: transform 0.12s ease, background 0.15s, filter 0.15s; } .btn:hover { background: rgba(255, 255, 255, 0.85); } .btn:active { transform: scale(0.97); } .btn-primary { display: block; width: 100%; margin-top: 20px; color: #fff; border: 0; background: linear-gradient(135deg, #4b3ff2, #6aa8ff); } .btn-primary:hover { filter: brightness(1.1); } .btn-ghost { background: transparent; border: 1px solid var(--panel-border); } .form-msg { margin: 12px 0 0; font-size: 13px; min-height: 1em; color: var(--text-dim); } .form-msg.ok { color: var(--green); } .form-msg.err { color: var(--red); } .switch-links { margin: 16px 0 0; font-size: 13px; text-align: center; color: var(--text-dim); } .switch-links a { color: var(--accent); font-weight: 600; text-decoration: none; } .switch-links a:hover { text-decoration: underline; } /* ── Logged-in profile view ─────────────────────────────────────────────── */ .banner { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius-md); background: rgba(255, 176, 0, 0.16); border: 1px solid rgba(210, 140, 0, 0.35); color: #8a5a00; font-size: 13px; } .banner a { color: inherit; font-weight: 700; text-decoration: underline; } /* Identity table: label/value rows, same divider style as the lists below. */ .info-table { margin: 0; font-size: 14px; } .info-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--panel-border); } .info-row:first-child { border-top: none; } .info-row dt { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } .info-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .info-strong { font-weight: 700; } .info-edit { display: flex; align-items: center; gap: 8px; } /* Inline display-name input: fills the value cell, not a full-width block. */ .field-inline { flex: 1; width: auto; margin-top: 0; padding: 7px 10px; } /* Save sits on its own line below the display-name row. */ .dn-save-row { margin-top: 8px; text-align: right; } /* Always-present Save: a small text button, not the big primary gradient. Dim while nothing's changed; brightens to accent once the name is edited. */ .btn-save { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 12px; color: var(--text-dim); background: none; padding: 6px; transition: color 0.15s; } .btn-save.is-dirty { font-weight: 700; color: var(--accent); } .btn-save:hover { text-decoration: underline; } .status-list { list-style: none; margin: 16px 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; } .status-list li { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--surface-soft); border: 1px solid var(--panel-border); border-radius: var(--radius-md); } .status { font-weight: 700; } .status-yes { color: var(--green); } .status-no { color: var(--red); } .account-links { list-style: none; margin: 18px 0 0; padding: 0; font-size: 13px; } .account-links li { border-top: 1px solid var(--panel-border); } .account-links li:first-child { border-top: none; } .account-links a { display: block; padding: 11px 2px; color: var(--text); text-decoration: none; transition: color 0.15s; } .account-links a:hover { color: var(--accent); } .account-links a.danger-link { color: var(--accent); font-weight: 700; } .profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; } .link-muted { font-size: 12px; color: var(--text-dim); text-decoration: none; } .link-muted:hover { color: var(--text); } /* ── Footer (ported from the homepage's .footer-95) ───────────────────────── Same black bar + gray top rule + mark/handle as index.html, kept identical here so every page shares one footer. Gray/red are hardcoded (index.html's --gray/--red aren't defined on these pages). Sticky top:100vh pins it to the bottom on short pages and still flows past a tall one. */ .footer-95 { position: sticky; top: 100vh; background: #000; padding-bottom: env(safe-area-inset-bottom, 0px); } .footer-95 .footer-bar { padding: 12px 16px 14px; font-size: 12px; color: #727373; background: #000; border-top: 2px solid #727373; text-align: center; } .footer-95 .footer-top { display: flex; align-items: center; justify-content: center; gap: 10px; } .footer-95 .footer-top img { width: 22px; height: 22px; } .footer-95 .footer-brand { color: #3f4a42; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; } .footer-95 .footer-brand:hover { color: #ed1c24; } /* ── Admin table (admin.html) ───────────────────────────────────────────── */ .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--panel-border); white-space: nowrap; } .admin-table th { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } @media (min-width: 600px) { .panel { max-width: 420px; } .panel-head { padding: 22px 26px 16px; } .panel-body { padding: 26px; } } /* ── Logged-in: liquidGL demo-2 split (bank card + account forms) ─────────── */ /* Mobile: one column, account forms on top, glass card below. Desktop (≥760px): card on the left over the wallpaper, unboxed forms on the right. Card markup and CSS are ported straight from liquidGL's demo-2 (placeholder Visa). */ .pf-grid { width: 100%; display: flex; flex-direction: column; gap: 22px; } .pf-card-col { order: 2; position: relative; width: 100%; } /* Boxed exactly like the login .panel — same surface, bordered head, roomy body padding. The bank card column is deliberately left unboxed. */ .pf-panel { order: 1; width: 100%; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 20px 50px -24px rgba(60, 50, 120, 0.35); overflow: hidden; } /* The wallpaper liquidGL snapshots — fills the whole column, no box. */ .pf-card-scene { position: relative; width: 100%; height: 260px; overflow: hidden; } .pf-card-bg { display: block; width: 100%; height: 100%; object-fit: cover; } /* Card overlay, centered over the scene — a sibling of .pf-card-scene so the lens never snapshots itself. mix-blend-mode + pointer-events mirror demo-2. */ .pf-card-anchor { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; mix-blend-mode: difference; /* Required: liquidGL parks its canvas at (effective z-index − 1). The demo's anchor carries z-index:9999 so the card's content (z-index:3) stays above the frosted canvas. Without it the frost renders on top of the text, and only the hover tilt-transform lifts the text out from behind it. */ z-index: 9999; } /* .pf-card == demo-2's .menu-wrap; contents ride above liquidGL's canvas. */ .pf-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; width: 340px; max-width: 84%; aspect-ratio: 1.7; padding: 1.25rem 1.5rem; border-radius: 1rem; overflow: clip; } .credit-card * { position: relative; z-index: 3; } .card-top { display: flex; justify-content: space-between; align-items: center; width: 100%; } .card-chip { width: 44px; height: auto; opacity: 0.8; } .card-brand { width: 56px; height: auto; filter: grayscale(1) invert(1); } .card-number { width: 100%; text-align: left; font-size: 1.2rem; letter-spacing: 0.33rem; font-weight: 600; color: #fff; } .card-footer { display: flex; justify-content: flex-start; gap: 3rem; width: 100%; font-size: 0.75rem; color: #fff; } .card-footer .label { text-transform: uppercase; opacity: 0.6; font-weight: 500; letter-spacing: 0.05rem; font-size: 0.65rem; } .card-holder, .card-expiry { display: flex; flex-direction: column; gap: 0.05rem; } .card-footer .value { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02rem; } /* Logged-in view goes full-bleed: drop .page's padding/centering so the flex split spans edge to edge below the navbar (demo-2 is a full-viewport split). The navbar and the other views (loading/auth) keep their normal centering. */ .page:has(> #view-profile:not(.is-hidden)) { padding: 0; align-items: stretch; justify-content: stretch; } @media (min-width: 760px) { /* Demo-2 split: two equal columns, wallpaper+card | profile forms, touching. */ .pf-grid { max-width: none; flex-direction: row; align-items: stretch; gap: 0; } /* Fixed half — no grow, so it can't absorb the space the capped settings box leaves; the box's auto margins then center it in the right half. */ .pf-card-col { order: 1; flex: 0 0 50%; } /* Float the settings box in the right half, hugging its content and centered (align-self overrides the grid's stretch). */ /* Fill the right half (minus a margin), centered vertically — not a small floating card, so there's little empty space around it. */ .pf-panel { order: 2; flex: 1 1 50%; align-self: center; margin: 44px; } .pf-card-scene { height: 100%; } }