/* glass.css — Liquid Glass design system (shared by all pages) ------------------------------------------------------------ One source of truth for tokens, the background layer the glass blurs, and the glass surface / button / field primitives. Page files (style.css, host.css) keep only page-specific layout. House style: Apple "Liquid Glass" — translucent frosted surfaces over a soft color-mesh background, specular top edges, continuous large corners, iOS system tints + label-opacity hierarchy. */ /* ---- Tokens: dark (default) — "Obsidian Aurora" ---- */ :root { --bg-base: #08080c; --text: rgba(255, 255, 255, 0.96); --text-2: rgba(235, 235, 245, 0.60); /* iOS secondaryLabel */ --text-3: rgba(235, 235, 245, 0.30); /* iOS tertiaryLabel */ --glass: rgba(255, 255, 255, 0.10); --glass-strong: rgba(255, 255, 255, 0.14); --glass-inset: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.16); --specular: rgba(255, 255, 255, 0.35); --blue: #0A84FF; --green: #30D158; --red: #FF453A; --blur: blur(24px) saturate(180%); /* Lighter local blur for surfaces that repaint often (host.css's .slot, issue #27) — same frosted family, cheaper to recompute per repaint. */ --blur-light: blur(10px) saturate(140%); --shadow: 0 10px 40px rgba(0, 0, 0, 0.45); --r-card: 28px; --r-control: 16px; --r-tile: 20px; --r-pill: 999px; } /* ---- Tokens: light — "Cotton Candy" ---- */ :root[data-theme='light'] { --bg-base: #fbf6fc; /* soft lavender-white */ --text: #1c1c1e; --text-2: rgba(60, 60, 67, 0.60); --text-3: rgba(60, 60, 67, 0.30); --glass: rgba(255, 255, 255, 0.55); --glass-strong: rgba(255, 255, 255, 0.66); --glass-inset: rgba(255, 255, 255, 0.45); --glass-border: rgba(255, 255, 255, 0.70); --specular: rgba(255, 255, 255, 0.90); --blue: #007AFF; --green: #34C759; --red: #FF3B30; --blur: blur(24px) saturate(160%); --blur-light: blur(10px) saturate(120%); --shadow: 0 10px 40px rgba(0, 0, 0, 0.12); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: clamp(0.75rem, 3vw, 1.5rem); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; transition: color 0.25s ease; } /* ---- Background layer: the color mesh the glass blurs ---- */ .bg-layer { position: fixed; inset: 0; z-index: -1; background: var(--bg-base); overflow: hidden; transition: background-color 0.25s ease; } .bg-layer::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(40% 40% at 16% 20%, rgba(94, 92, 255, 0.42), transparent 70%), /* indigo */ radial-gradient(42% 42% at 84% 24%, rgba(214, 90, 242, 0.34), transparent 70%), /* magenta */ radial-gradient(48% 48% at 64% 90%, rgba(40, 214, 210, 0.26), transparent 70%), /* cyan */ radial-gradient(34% 34% at 90% 84%, rgba(150, 110, 255, 0.22), transparent 70%); /* violet */ filter: blur(48px); animation: drift 22s ease-in-out infinite alternate; } :root[data-theme='light'] .bg-layer::before { background: radial-gradient(40% 40% at 16% 20%, rgba(255, 133, 198, 0.34), transparent 70%), /* candy pink */ radial-gradient(42% 42% at 84% 22%, rgba(150, 160, 255, 0.30), transparent 70%), /* periwinkle */ radial-gradient(46% 46% at 30% 92%, rgba(130, 230, 200, 0.28), transparent 70%), /* mint */ radial-gradient(38% 38% at 88% 84%, rgba(255, 190, 130, 0.26), transparent 70%); /* peach */ } @keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.08); } } /* Pause the drift while a draw is in progress (issue #27) — host.js toggles `drawing` on for the duration of drawNumber()/playRevealAnimation(), so the continuously-animating blurred background isn't competing for paint time with the slot-spin repaints. Additive to, not a replacement for, the prefers-reduced-motion handling below (which already stops this animation outright for those users). */ body.drawing .bg-layer::before { animation-play-state: paused; } /* ---- Glass surface primitive ---- */ .glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: var(--r-card); box-shadow: var(--shadow), inset 0 1px 0 var(--specular); } /* ---- Card: the main glass panel every page centers ---- */ .card { position: relative; width: 100%; max-width: 480px; padding: clamp(1.25rem, 5vw, 2.5rem); text-align: center; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: var(--r-card); box-shadow: var(--shadow), inset 0 1px 0 var(--specular); transition: background-color 0.25s ease, border-color 0.25s ease; } /* ---- Top bar + theme toggle ---- */ .top-bar { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; } .theme-toggle { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: var(--r-pill); color: var(--text); font-size: clamp(0.85rem, 2.5vw, 1rem); font-weight: 600; padding: clamp(0.35rem, 1.5vw, 0.5rem) clamp(0.8rem, 2.5vw, 1.1rem); cursor: pointer; box-shadow: inset 0 1px 0 var(--specular); transition: background-color 0.15s ease, transform 0.1s ease; } .theme-toggle:hover { background: var(--glass-strong); } .theme-toggle:active { transform: scale(0.97); } /* ---- Headings ---- */ h1 { margin: 0 0 1.5rem; font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; } /* ---- Buttons (tinted glass) ---- */ .btn { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--glass-border); border-radius: var(--r-control); padding: clamp(0.8rem, 3vw, 1rem); font-size: clamp(1.05rem, 3.5vw, 1.25rem); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; color: #fff; text-align: center; text-decoration: none; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--specular); transition: filter 0.15s ease, transform 0.1s ease, background-color 0.15s ease; } .btn:hover:not(:disabled) { filter: brightness(1.08); } .btn:active:not(:disabled) { transform: scale(0.98); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* primary = blue tint (submit / draw) */ .btn.submit, .btn.draw { background: color-mix(in srgb, var(--blue) 82%, transparent); border-color: color-mix(in srgb, var(--blue) 55%, white 12%); } /* secondary = clear glass */ .btn.secondary { background: var(--glass); color: var(--text); } /* present = green tint, absent = red tint */ .btn.present { background: color-mix(in srgb, var(--green) 82%, transparent); border-color: color-mix(in srgb, var(--green) 55%, white 12%); color: #fff; } .btn.absent { background: color-mix(in srgb, var(--red) 80%, transparent); border-color: color-mix(in srgb, var(--red) 55%, white 12%); color: #fff; } /* danger = clear glass with red hairline + red label */ .btn.danger { background: var(--glass); color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); } .btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 14%, transparent); filter: none; } /* ---- Fields ---- */ .field { text-align: left; margin-bottom: 1.25rem; } .field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.45rem; } .field input[type="text"] { width: 100%; padding: 0.8rem 0.95rem; font-size: 1.05rem; color: var(--text); background: var(--glass-inset); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: var(--r-control); box-shadow: inset 0 1px 0 var(--specular); transition: border-color 0.15s ease, background-color 0.15s ease; } .field input[type="text"]::placeholder { color: var(--text-3); } .field input[type="text"]:focus { outline: none; border-color: var(--blue); background: var(--glass); } .field-error { color: var(--red); font-size: 0.88rem; margin-top: 0.4rem; min-height: 1.2em; } /* ---- Small text links ---- */ .switch-link { margin-top: 1.25rem; font-size: 0.9rem; color: var(--text-2); } .switch-link a { color: var(--blue); text-decoration: none; font-weight: 600; } .switch-link a:hover { text-decoration: underline; } /* ---- Accessibility fallbacks ---- Token-based (not a selector list) so it automatically covers every glass surface — including ones defined in page-specific stylesheets loaded after this file (host.css's .display/.slot/.history-list, style.css's .faculty-btn) — the same way prefers-reduced-transparency below does. A selector list here would silently miss any surface added later. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: #1c1c22; --glass-strong: #23232a; --glass-inset: #17171c; } :root[data-theme='light'] { --glass: #ffffff; --glass-strong: #ffffff; --glass-inset: #f2f2f7; } } @media (prefers-reduced-transparency: reduce) { :root { --glass: #1c1c22; --glass-strong: #23232a; --glass-inset: #17171c; } :root[data-theme='light'] { --glass: #ffffff; --glass-strong: #ffffff; --glass-inset: #f2f2f7; } } @media (prefers-reduced-motion: reduce) { .bg-layer::before { animation: none; } * { transition: none !important; } }