/* ============================================================ NQNT SOURCE — shared design system · "AURORA LIGHT" ------------------------------------------------------------ Linked by the forms (/f/), the admin (/admin/) and the landing + /vald pages. Tokens are copied VERBATIM from the reference mockup (vald-A-aurora-light.html) so every surface shares one visual contract. Interactive semantics (--accent, --ok, --danger, --discord) are layered on top for the forms/admin UI. The aurora background is pure CSS on , so it appears on every page that links this file with ZERO extra markup. ============================================================ */ :root { /* canvas */ --bg-base: #f3f4fa; --bg-base-2: #eef0f8; /* aurora blobs (low-saturation, optimistic) */ --aurora-1: #b8c6ff; /* periwinkle */ --aurora-2: #ffc9e0; /* rose */ --aurora-3: #c5f0e4; /* mint */ --aurora-4: #ffe4b8; /* peach */ --aurora-5: #d9c4ff; /* lilac */ /* ink */ --ink: #0e1018; --ink-soft: #41454f; --ink-muted: #767b88; --ink-faint: #9aa0ad; --ink-hair: rgba(16, 18, 24, 0.06); /* glass surfaces */ --glass: rgba(255, 255, 255, 0.62); --glass-strong: rgba(255, 255, 255, 0.78); --glass-hover: rgba(255, 255, 255, 0.86); --glass-border: rgba(255, 255, 255, 0.85); --glass-edge: rgba(16, 18, 24, 0.05); /* shadows (soft, layered, diffuse) */ --shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.04), 0 4px 12px rgba(16, 18, 24, 0.05); --shadow-md: 0 2px 6px rgba(16, 18, 24, 0.05), 0 12px 28px rgba(16, 18, 24, 0.08); --shadow-lg: 0 8px 18px rgba(16, 18, 24, 0.06), 0 28px 60px rgba(16, 18, 24, 0.12); /* radii */ --r-xs: 12px; --r-sm: 16px; --r-md: 20px; --r-lg: 26px; --r-xl: 32px; --r-pill: 999px; /* type — system sans only, no webfonts */ --font-sans: -apple-system, "SF Pro Display", "SF Pro Text", "Inter", "Geist", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --maxw: 480px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- semantic interaction tokens (forms + admin) ---- */ --accent: #0a84ff; /* confident Apple interactive blue */ --accent-strong: #0060df; /* hover/pressed */ --accent-soft: rgba(10, 132, 255, 0.12); --accent-ring: rgba(10, 132, 255, 0.32); --ok: #34c759; --ok-strong: #248a3d; --danger: #ff3b30; --danger-strong: #c4271f; --discord: #5865f2; --discord-strong: #4752c4; color-scheme: light; } /* ============================================================ DARK MODE — "AURORA DARK" ------------------------------------------------------------ The same glassmorphism system, re-keyed for an Apple-style dark-mode vibrancy: deep cool charcoal base, glowing neon aurora, frosted DARK glass, light text. ADDITIVE only — the light tokens above stay the :root default. Triggered two ways (identical token block, duplicated): 1. AUTO: prefers-color-scheme: dark, UNLESS the user has explicitly forced light via :root[data-theme="light"]. The :not([data-theme="light"]) guard handles that, since light tokens are already the :root default. 2. EXPLICIT: :root[data-theme="dark"] for a future toggle setting document.documentElement.dataset.theme = "dark". ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* canvas */ --bg-base: #0b0c12; --bg-base-2: #0f111a; /* aurora blobs (neon-on-black) */ --aurora-1: #3a49c8; /* indigo */ --aurora-2: #c2306e; /* magenta */ --aurora-3: #1f8f78; /* teal */ --aurora-4: #b9701f; /* amber */ --aurora-5: #7b3fc4; /* violet */ /* ink */ --ink: #f2f3f7; --ink-soft: #c2c7d2; --ink-muted: #9097a4; --ink-faint: #686f7e; --ink-hair: rgba(255, 255, 255, 0.08); /* glass surfaces */ --glass: rgba(255, 255, 255, 0.055); --glass-strong: rgba(255, 255, 255, 0.085); --glass-hover: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.12); --glass-edge: rgba(255, 255, 255, 0.05); /* shadows (deeper, for the dark base) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55); /* ---- semantic interaction tokens (forms + admin) ---- */ --accent: #0a84ff; --accent-strong: #409cff; --accent-soft: rgba(10, 132, 255, 0.18); --accent-ring: rgba(10, 132, 255, 0.45); --ok: #30d158; --ok-strong: #28b14c; --danger: #ff453a; --danger-strong: #d63a31; --discord: #5865f2; --discord-strong: #6d78f5; color-scheme: dark; } } :root[data-theme="dark"] { /* canvas */ --bg-base: #0b0c12; --bg-base-2: #0f111a; /* aurora blobs (neon-on-black) */ --aurora-1: #3a49c8; /* indigo */ --aurora-2: #c2306e; /* magenta */ --aurora-3: #1f8f78; /* teal */ --aurora-4: #b9701f; /* amber */ --aurora-5: #7b3fc4; /* violet */ /* ink */ --ink: #f2f3f7; --ink-soft: #c2c7d2; --ink-muted: #9097a4; --ink-faint: #686f7e; --ink-hair: rgba(255, 255, 255, 0.08); /* glass surfaces */ --glass: rgba(255, 255, 255, 0.055); --glass-strong: rgba(255, 255, 255, 0.085); --glass-hover: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.12); --glass-edge: rgba(255, 255, 255, 0.05); /* shadows (deeper, for the dark base) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55); /* ---- semantic interaction tokens (forms + admin) ---- */ --accent: #0a84ff; --accent-strong: #409cff; --accent-soft: rgba(10, 132, 255, 0.18); --accent-ring: rgba(10, 132, 255, 0.45); --ok: #30d158; --ok-strong: #28b14c; --danger: #ff453a; --danger-strong: #d63a31; --discord: #5865f2; --discord-strong: #6d78f5; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; min-height: 100%; } ::selection { background: var(--accent-soft); color: var(--ink); } /* ============================================================ BODY + AURORA BACKGROUND (pure CSS, zero markup) ------------------------------------------------------------ - body : base canvas + faint grain (fixed) - body::before : the 5 drifting aurora blobs, blurred - body::after : white top-light veil keeping text crisp ============================================================ */ body { font-family: var(--font-sans); color: var(--ink); background-color: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.45; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; /* ultra-subtle premium grain (no harsh noise), painted on the base */ 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: 160px 160px; background-attachment: fixed; } /* the drifting aurora mesh — fixed, blurred, behind everything */ body::before { content: ""; position: fixed; inset: -25vmax; z-index: -2; pointer-events: none; filter: blur(70px) saturate(115%); background-repeat: no-repeat; background-image: radial-gradient(60vmax 60vmax at 15% 5%, var(--aurora-1) 0%, transparent 60%), radial-gradient(52vmax 52vmax at 88% 8%, var(--aurora-2) 0%, transparent 58%), radial-gradient(50vmax 50vmax at 92% 60%, var(--aurora-3) 0%, transparent 60%), radial-gradient(46vmax 46vmax at 6% 64%, var(--aurora-4) 0%, transparent 60%), radial-gradient(56vmax 56vmax at 42% 100%, var(--aurora-5) 0%, transparent 60%); opacity: 0.9; animation: aurora-drift 34s var(--ease) infinite alternate; } @keyframes aurora-drift { to { transform: translate3d(-3vmax, -2vmax, 0) scale(1.08); } } /* white top-light wash + bottom canvas fade to keep text crisp */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(0deg, rgba(243, 244, 250, 0.7) 0%, rgba(243, 244, 250, 0) 22%); } /* ------------------------------------------------------------ DARK background overrides - body::before : bump aurora opacity so glows read as neon on black; keep the blur. - body::after : the WHITE veil would wash everything out on a dark base — flip it to a DARK veil that fades toward --bg-base instead, keeping text crisp the same way the white wash does in light. - body grain : drop the noise opacity a touch so it stays a whisper on the charcoal base. ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E"); } :root:not([data-theme="light"]) body::before { opacity: 0.6; } :root:not([data-theme="light"]) body::after { background: linear-gradient(180deg, rgba(11, 12, 18, 0.55) 0%, rgba(11, 12, 18, 0) 26%), linear-gradient(0deg, rgba(11, 12, 18, 0.8) 0%, rgba(11, 12, 18, 0) 24%); } } :root[data-theme="dark"] body { 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E"); } :root[data-theme="dark"] body::before { opacity: 0.6; } :root[data-theme="dark"] body::after { background: linear-gradient(180deg, rgba(11, 12, 18, 0.55) 0%, rgba(11, 12, 18, 0) 26%), linear-gradient(0deg, rgba(11, 12, 18, 0.8) 0%, rgba(11, 12, 18, 0) 24%); } /* generic link colour (de-occulted: accent, not gilt) */ a { color: var(--accent); } /* ============================================================ BARCODE — repurposed as a subtle soft gradient hairline (no animation, no bars) ============================================================ */ .barcode { height: 2px; border: 0; border-radius: var(--r-pill); background-image: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--accent) 45%, transparent) 22%, color-mix(in srgb, var(--aurora-5) 90%, transparent) 50%, color-mix(in srgb, var(--accent) 45%, transparent) 78%, transparent 100% ); opacity: 0.7; } /* ============================================================ LAYOUT ============================================================ */ .wrap { flex: 1 0 auto; width: 100%; max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .wrap.wide { max-width: 1080px; } /* ============================================================ HEADINGS / EYEBROW / LEAD / ROMAN ============================================================ */ .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; } .eyebrow .gilded { color: var(--accent); font-weight: 700; } h1.title { font-family: var(--font-sans); font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); margin: 0; width: 100%; } h1.title .red { /* de-blooded: now simply the interactive accent */ color: var(--accent); } .lead { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-muted); line-height: 1.65; white-space: pre-wrap; } .roman { /* de-occulted: a clean, quiet little label */ font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } /* ============================================================ PANELS / CARDS — frosted glass surfaces ============================================================ */ .panel { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 24px; } .panel + .panel { margin-top: 16px; } .panel-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ============================================================ FORMS LIST (admin) — card layout, responsive ============================================================ */ .form-list { display: flex; flex-direction: column; gap: 12px; } .form-card { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .form-card:hover { transform: translateY(-2px); border-color: #fff; box-shadow: var(--shadow-md); } .form-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .form-card-title { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .form-card .badges { flex: 0 0 auto; } .form-card-link { word-break: break-all; } .form-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } /* ============================================================ FORM FIELDS ============================================================ */ .field { margin-top: 22px; } .field > label, .field-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin-bottom: 8px; } .field .req { color: var(--danger); margin-left: 4px; } .field .help { font-size: 12px; color: var(--ink-muted); margin: 6px 0 0; line-height: 1.55; } /* ============================================================ QUESTION CARDS (public form) ============================================================ */ .qcard { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 18px 20px 20px; margin-top: 16px; transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .qcard:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, #fff); box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-ring); } .qhead { display: flex; gap: 12px; align-items: baseline; } .qnum { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); flex: 0 0 auto; } .qlabel { font-size: 16px; line-height: 1.45; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; } .qbody { margin-top: 14px; } .qcard .help { margin-top: 12px; } .qcard .choice { font-size: 14px; } /* ============================================================ INPUTS / SELECT / TEXTAREA ============================================================ */ input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], select, textarea { width: 100%; background: var(--glass-strong); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); border: 1px solid var(--glass-edge); color: var(--ink); font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease); } input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="date"]:hover, input[type="password"]:hover, select:hover, textarea:hover { background: var(--glass-hover); } input:focus, select:focus, textarea:focus { outline: none; background: var(--glass-hover); border-color: color-mix(in srgb, var(--accent) 60%, #fff); box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-ring); } textarea { resize: vertical; min-height: 104px; line-height: 1.55; } input::placeholder, textarea::placeholder { color: var(--ink-faint); } /* ============================================================ CHOICES (radio / checkbox rows) ============================================================ */ .choice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink-soft); cursor: pointer; } .choice input { width: auto; margin-top: 2px; accent-color: var(--accent); } /* ============================================================ THEME TOGGLE — floating glass button (injected by theme-toggle.js) ============================================================ */ .theme-toggle { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 100; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: var(--r-pill); color: var(--ink-soft); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease); } .theme-toggle:hover { color: var(--ink); background: var(--glass-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.96); transition-duration: 0.08s; } .theme-toggle:focus-visible { outline: none; box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-ring); } .theme-toggle svg { display: block; } .theme-toggle .i-sun { display: none; } .theme-toggle.is-dark .i-sun { display: block; } .theme-toggle.is-dark .i-moon { display: none; } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } } /* ============================================================ BUTTONS — pill glass + solid accent ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; padding: 11px 20px; border: 1px solid var(--glass-border); border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: var(--ink); cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); } .btn:hover { transform: translateY(-1px); background: var(--glass-hover); border-color: #fff; box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0) scale(0.99); transition-duration: 0.08s; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-ring); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); } /* primary — solid accent */ .btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: var(--shadow-sm), 0 6px 18px color-mix(in srgb, var(--accent) 36%, transparent); } .btn.primary:hover { background: var(--accent-strong); border-color: transparent; box-shadow: var(--shadow-md), 0 10px 26px color-mix(in srgb, var(--accent) 42%, transparent); } /* discord — brand colour */ .btn.discord { background: var(--discord); border-color: transparent; color: #fff; box-shadow: var(--shadow-sm), 0 6px 18px color-mix(in srgb, var(--discord) 36%, transparent); } .btn.discord:hover { background: var(--discord-strong); border-color: transparent; box-shadow: var(--shadow-md), 0 10px 26px color-mix(in srgb, var(--discord) 42%, transparent); } /* small */ .btn.sm { padding: 7px 14px; font-size: 13px; } /* ghost — quiet text button */ .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-muted); } .btn.ghost:hover { background: var(--glass); border-color: var(--glass-border); box-shadow: var(--shadow-sm); color: var(--accent); } /* danger — quiet by default, reddens on hover */ .btn.danger { color: var(--danger); } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--glass-hover)); border-color: color-mix(in srgb, var(--danger) 45%, #fff); color: var(--danger-strong); box-shadow: var(--shadow-md), 0 8px 20px color-mix(in srgb, var(--danger) 22%, transparent); } /* ============================================================ BADGES — frosted pills ============================================================ */ .badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--glass-edge); background: var(--glass-strong); color: var(--ink-muted); } .badge.open { color: var(--ok-strong); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 12%, var(--glass-strong)); } .badge.closed { color: var(--danger-strong); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--glass-strong)); } .badge.discord { color: var(--discord-strong); border-color: color-mix(in srgb, var(--discord) 45%, transparent); background: color-mix(in srgb, var(--discord) 12%, var(--glass-strong)); } /* ============================================================ NOTICES ============================================================ */ .notice { border: 1px solid var(--glass-border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 13px 15px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; background: color-mix(in srgb, var(--accent) 7%, var(--glass-strong)); box-shadow: var(--shadow-sm); } .notice.error { border-left-color: var(--danger); color: var(--danger-strong); background: color-mix(in srgb, var(--danger) 8%, var(--glass-strong)); } .notice.ok { border-left-color: var(--ok); color: var(--ok-strong); background: color-mix(in srgb, var(--ok) 10%, var(--glass-strong)); } /* ============================================================ CONFIRMATION SCREEN ============================================================ */ .confirm { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; min-height: 62svh; max-width: 520px; margin: 0 auto; padding: 2rem 0 1rem; } .confirm-mark { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ok); border-radius: 50%; color: var(--ok-strong); font-size: 36px; line-height: 1; background: color-mix(in srgb, var(--ok) 12%, var(--glass-strong)); box-shadow: var(--shadow-md), 0 0 0 6px color-mix(in srgb, var(--ok) 14%, transparent); } .confirm.muted-mark .confirm-mark { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); box-shadow: var(--shadow-md), 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); } .confirm-title { font-family: var(--font-sans); font-weight: 800; font-size: clamp(28px, 7vw, 40px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); margin: 0; } .confirm-msg { font-size: 14.5px; color: var(--ink-muted); line-height: 1.65; margin: 0; max-width: 40ch; } .confirm .btn { margin-top: 4px; } /* ============================================================ HONEYPOT — kept hidden (still in DOM for bots) ============================================================ */ .hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ TABLES + responsive cards ============================================================ */ .table-scroll { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--r-md); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-sm); } table { border-collapse: collapse; width: 100%; font-size: 13px; } th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--ink-hair); white-space: nowrap; vertical-align: top; } th { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); background: var(--glass-strong); } tbody tr:hover { background: rgba(255, 255, 255, 0.5); } /* responses as cards (mobile) */ .resp-cards { display: none; flex-direction: column; gap: 12px; } .resp-card { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 14px 16px; } .resp-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-hair); } .resp-date { font-size: 12px; color: var(--ink-muted); } .resp-fields { margin: 0; display: flex; flex-direction: column; gap: 11px; } .resp-field { display: flex; flex-direction: column; gap: 3px; } .resp-field dt { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .resp-field dd { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } /* ============================================================ UTILITIES ============================================================ */ .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .spread { justify-content: space-between; } .muted { color: var(--ink-muted); } .small { font-size: 12px; } .mono-id { font-family: var(--font-sans); color: var(--accent); font-weight: 600; font-size: 12px; } .stack { display: flex; flex-direction: column; gap: 6px; } .divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--ink-hair), transparent); margin: 22px 0; } .center { text-align: center; } .hidden { display: none !important; } /* ============================================================ FOOTER ============================================================ */ footer.foot { flex: 0 0 auto; padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink-hair); text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } footer.foot a { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } footer.foot a:hover { color: var(--accent-strong); } /* ============================================================ DARK MODE — hardcoded-light-value overrides + glass polish ------------------------------------------------------------ Everything keyed to var(--…) already adapted via the dark token block. These rules fix the handful of places that bake in a LIGHT-ONLY literal (a pure-white hairline, a bright white table-row hover) and add a premium faint-white top highlight to the frosted DARK glass. Duplicated across the auto + explicit selectors per the trigger contract. ============================================================ */ /* --- pure-white hover hairlines → faint white (auto) --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-card:hover { border-color: rgba(255, 255, 255, 0.28); } :root:not([data-theme="light"]) .btn:hover { border-color: rgba(255, 255, 255, 0.28); } /* bright white row hover would glare on dark glass */ :root:not([data-theme="light"]) tbody tr:hover { background: rgba(255, 255, 255, 0.06); } /* premium faint-white top highlight on the frosted dark glass */ :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .form-card, :root:not([data-theme="light"]) .qcard, :root:not([data-theme="light"]) .table-scroll, :root:not([data-theme="light"]) .resp-card { position: relative; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38% ); } :root:not([data-theme="light"]) .btn { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60% ); } /* keep the solid buttons solid (highlight only on glass btns) */ :root:not([data-theme="light"]) .btn.primary, :root:not([data-theme="light"]) .btn.discord { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55% ); } :root:not([data-theme="light"]) .btn.ghost { background-image: none; } } /* --- same overrides for an explicit forced-dark toggle --- */ :root[data-theme="dark"] .form-card:hover { border-color: rgba(255, 255, 255, 0.28); } :root[data-theme="dark"] .btn:hover { border-color: rgba(255, 255, 255, 0.28); } :root[data-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .panel, :root[data-theme="dark"] .form-card, :root[data-theme="dark"] .qcard, :root[data-theme="dark"] .table-scroll, :root[data-theme="dark"] .resp-card { position: relative; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38% ); } :root[data-theme="dark"] .btn { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60% ); } :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn.discord { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55% ); } :root[data-theme="dark"] .btn.ghost { background-image: none; } /* ============================================================ A11Y / MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 640px) { .wrap, .wrap.wide { padding: 1.75rem 1rem 3rem; } .panel { padding: 18px; } .qcard { padding: 16px; } /* responses: hide the table, show the stacked cards */ .resp-table { display: none; } .resp-cards { display: flex; } } @media (max-width: 560px) { .form-card-head { flex-direction: column; gap: 8px; } .form-card-actions .btn { flex: 1 1 auto; justify-content: center; } }