/** * PassPages — Liquid Glass design system * ───────────────────────────────────────────────────────────────────────── * Shared across every page (root + /v2). Gives nav bars, cards, buttons, * inputs, and modals an Apple-style frosted-glass treatment: translucent * blurred surfaces, a soft specular highlight along the top edge, and a * thin hairline border that catches light. Works in both color themes via * [data-theme="dark"] on . * ───────────────────────────────────────────────────────────────────────── */ :root{ --glass-bg: rgba(255,255,255,.86); --glass-bg-strong: rgba(255,255,255,.94); --glass-border: rgba(255,255,255,.75); --glass-border-soft: rgba(255,255,255,.5); --glass-highlight: rgba(255,255,255,.95); --glass-shadow: 0 8px 32px -8px rgba(30,30,60,.22), 0 1px 1px rgba(255,255,255,.6) inset; --glass-shadow-lg: 0 24px 64px -20px rgba(30,30,60,.32), 0 1px 1px rgba(255,255,255,.7) inset; --glass-blur: blur(34px) saturate(200%); --glass-blur-soft: blur(22px) saturate(180%); } [data-theme="dark"]{ --glass-bg: rgba(22,22,30,.86); --glass-bg-strong: rgba(16,16,22,.94); --glass-border: rgba(255,255,255,.16); --glass-border-soft: rgba(255,255,255,.1); --glass-highlight: rgba(255,255,255,.16); --glass-shadow: 0 8px 32px -8px rgba(0,0,0,.55), 0 1px 1px rgba(255,255,255,.08) inset; --glass-shadow-lg: 0 24px 64px -20px rgba(0,0,0,.65), 0 1px 1px rgba(255,255,255,.1) inset; } /* ── Ambient background mesh ────────────────────────────────────────────── A fixed, blurred field of color behind every page so glass surfaces have something to refract. Very low opacity — reads as atmosphere, not noise. */ body{ position: relative; } body::before{ content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(900px 620px at 12% -8%, rgba(108,99,255,.20), transparent 60%), radial-gradient(760px 620px at 108% 8%, rgba(255,214,107,.16), transparent 60%), radial-gradient(820px 720px at 50% 118%, rgba(2,132,199,.14), transparent 60%); pointer-events:none; } [data-theme="dark"] body::before{ background: radial-gradient(900px 620px at 12% -8%, rgba(108,99,255,.28), transparent 60%), radial-gradient(760px 620px at 108% 8%, rgba(255,214,107,.10), transparent 60%), radial-gradient(820px 720px at 50% 118%, rgba(2,132,199,.20), transparent 60%); } /* ── Core glass surface ──────────────────────────────────────────────────── Apply `.glass` to any panel: nav, card, modal, dropdown, etc. The ::before specular highlight is a soft diagonal sheen along the top-left edge. */ .glass{ position:relative; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); isolation:isolate; } .glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, var(--glass-highlight) 0%, transparent 32%, transparent 68%, var(--glass-border-soft) 100%); opacity:.5; pointer-events:none; z-index:0; } .glass > *{ position:relative; z-index:1; } .glass-strong{ background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .glass-lg{ box-shadow: var(--glass-shadow-lg); } /* ── Nav bar ─────────────────────────────────────────────────────────────── Overrides the flat translucent nav used across pages with true glass. */ .nav.glass, header.nav.glass{ background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border-bottom: 1px solid var(--glass-border-soft) !important; box-shadow: 0 1px 0 var(--glass-highlight) inset, 0 8px 24px -16px rgba(30,30,60,.25); } /* ── Buttons ─────────────────────────────────────────────────────────────── Glass pill buttons — secondary/ghost actions get full frosted treatment; primary actions get a tinted glass fill so the CTA still reads as "the" button while keeping the material consistent. */ .glass-pill{ border-radius:999px !important; background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur-soft) !important; backdrop-filter: var(--glass-blur-soft) !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s !important; } .glass-pill:hover{ transform: translateY(-1px); box-shadow: var(--glass-shadow-lg) !important; } .glass-pill:active{ transform: translateY(0) scale(.98); } .glass-pill-tint{ background: linear-gradient(135deg, #5b52ea, #4b45c6) !important; -webkit-backdrop-filter: var(--glass-blur-soft) !important; backdrop-filter: var(--glass-blur-soft) !important; border: 1px solid rgba(255,255,255,.35) !important; color:#fff !important; box-shadow: 0 8px 24px -8px rgba(108,99,255,.55), 0 1px 1px rgba(255,255,255,.4) inset !important; } .glass-pill-tint:hover{ box-shadow: 0 14px 32px -8px rgba(108,99,255,.65), 0 1px 1px rgba(255,255,255,.5) inset !important; } /* ── Inputs ──────────────────────────────────────────────────────────────── Frosted fields instead of flat paper-colored ones. */ .glass-field{ background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur-soft); backdrop-filter: var(--glass-blur-soft); border: 1.5px solid var(--glass-border) !important; } .glass-field:focus{ background: var(--glass-bg-strong) !important; } /* ── Cards ───────────────────────────────────────────────────────────────── Rounded, elevated glass tiles for pack cards, admin cards, table wraps. */ .glass-card{ background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; border-radius:20px !important; transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s !important; } .glass-card:hover{ transform: translateY(-4px); box-shadow: var(--glass-shadow-lg) !important; } .glass-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, var(--glass-highlight) 0%, transparent 32%, transparent 68%, var(--glass-border-soft) 100%); opacity:.5; pointer-events:none; z-index:0; } .glass-card{ position:relative; isolation:isolate; } .glass-card > *{ position:relative; z-index:1; } /* ── Modal ───────────────────────────────────────────────────────────────── Frosted dialog with a dimmed, blurred scrim behind it. */ .glass-scrim{ background: rgba(10,10,20,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } [data-theme="dark"] .glass-scrim{ background: rgba(0,0,0,.55); } /* ── Compact icon button ─────────────────────────────────────────────────── Circular glass button for icon-only controls (mobile function bars, etc). */ .glass-icon-btn{ width:38px; height:38px; border-radius:50%; flex:none; background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur-soft) !important; backdrop-filter: var(--glass-blur-soft) !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s; text-decoration:none; color:inherit; } .glass-icon-btn svg{ width:17px; height:17px; pointer-events:none; } .glass-icon-btn:hover{ transform:translateY(-1px); box-shadow: var(--glass-shadow-lg) !important; } .glass-icon-btn:active{ transform:translateY(0) scale(.94); } /* Reduced motion: keep the material, drop the lift animation */ @media (prefers-reduced-motion: reduce){ .glass-card, .glass-pill{ transition:none; } .glass-card:hover{ transform:none; } } /* ═══════════════════════════════════════════════════════════════════════════ Accessibility — WCAG 2.1 AA Centralized here because every page links this file. These !important token overrides beat the per-page inline :root values, and are the single source of truth for accessible color + focus. ═══════════════════════════════════════════════════════════════════════════ */ /* 1.4.3 Contrast (Minimum) — brand indigo used as TEXT/accents. Light: darken to clear 4.5:1 on white (#6C63FF was 4.32:1). Dark: lighten so it stays legible on near-black surfaces. Button backgrounds are pinned to #5850e6 in the page CSS (not this token), so lightening indigo for dark-mode text does not weaken white-on-indigo. */ :root{ --indigo:#5850e6 !important; --green:#178048 !important; /* was #1f9d57 (3.49:1) → 4.98:1 */ --red:#c62828 !important; /* was #e53e3e (4.13:1) → 5.62:1 */ } [data-theme="dark"]{ --indigo:#a29bff !important; /* indigo text on dark → 7.4:1 */ --indigo-deep:#b3adff !important; /* CTA text on dark → legible */ --gray:#9a9ab0 !important; /* muted text on dark → 6.5:1 (was ~4.1) */ --red:#ff6b6b !important; /* red is text-only → brighten for dark */ /* --green stays #178048 in all themes: dark enough for white-on-green "saved" buttons (4.98:1) while still legible as success text. */ } /* 2.4.7 Focus Visible — a clear keyboard focus ring on every interactive control. !important guarantees it overrides `outline:none` set on inputs. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible{ outline:2px solid #5850e6 !important; outline-offset:2px !important; border-radius:6px; } [data-theme="dark"] a:focus-visible, [data-theme="dark"] button:focus-visible, [data-theme="dark"] input:focus-visible, [data-theme="dark"] select:focus-visible, [data-theme="dark"] textarea:focus-visible, [data-theme="dark"] [tabindex]:focus-visible, [data-theme="dark"] summary:focus-visible{ outline-color:#a29bff !important; } /* 1.4.3 — placeholder text at an accessible contrast (default UA grey fails) */ input::placeholder, textarea::placeholder{ color:#6b6b73 !important; opacity:1; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{ color:#9a9ab0 !important; } /* 2.4.1 Bypass Blocks — skip link, visually hidden until focused */ .skip-link{ position:absolute; left:12px; top:-48px; z-index:999; background:#5850e6; color:#fff; font-weight:700; font-size:14px; padding:10px 16px; border-radius:0 0 10px 10px; text-decoration:none; transition:top .18s ease; } .skip-link:focus{ top:0; }