/* GLASS THEME — UPDATED ===================== Reusable design tokens and component styling extracted from selection-options.html. Theme selection: If data-theme is omitted, the dark token set is used by default. This file intentionally excludes the selection-options.html demo/reference page layout. It contains the shared design system and all Modules 1–10. */ *, *::before, *::after { box-sizing: border-box; } /* ================================================================ 00 — SHARED DESIGN TOKENS All current modules use these. Future modules should reuse these before inventing parallel colors for the same visual purpose. ================================================================ */ :root { color-scheme: dark; --bg: #2f2f2f; --panel: #262626; --panel-top: #2d2d2d; --demo-surface: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.13); --text: #f5f5f5; --muted: rgba(245,245,245,.55); --faint: rgba(245,245,245,.40); --heading: rgba(245,245,245,.85); --sel: #e8e4db; --focus: #e8e4db; --shadow: 0 24px 60px rgba(0,0,0,.35); /* Shared v4 rail/glass language. */ --seg-selected-text: rgba(245,245,245,.94); --seg-track-surface: linear-gradient(180deg, rgba(0,0,0,.26), rgba(255,255,255,.035)); --seg-track-shadow-top: rgba(0,0,0,.40); --seg-track-shadow-bottom: rgba(255,255,255,.05); --seg-glass-wash-top: rgba(255,255,255,.050); --seg-glass-wash-mid: rgba(255,255,255,.024); --seg-glass-wash-bottom: rgba(0,0,0,.055); --seg-glass-inner: rgba(255,255,255,.085); --seg-glass-top-depth: rgba(255,255,255,.030); --seg-glass-bottom-depth: rgba(0,0,0,.085); --seg-glass-shadow: rgba(0,0,0,.12); --seg-glass-rim: rgba(255,255,255,0); --seg-glass-rim-soft: rgba(255,255,255,0); --seg-glass-edge-width: 0px; --seg-iris-opacity: .10; --seg-iris-ring-width: 5px; --seg-glass-iridescence: conic-gradient(from 220deg at 50% 50%, rgba(255,122,163,.10) 0deg, rgba(255,122,163,.24) 22deg, rgba(255,184,123,.10) 48deg, rgba(255,255,255,.05) 74deg, rgba(188,154,255,.14) 102deg, rgba(255,255,255,.04) 132deg, rgba(98,214,255,.24) 174deg, rgba(98,214,255,.12) 208deg, rgba(255,255,255,.06) 236deg, rgba(255,209,122,.14) 278deg, rgba(255,255,255,.03) 308deg, rgba(255,146,182,.16) 334deg, rgba(255,122,163,.10) 360deg); --seg-sheen-1: rgba(255,255,255,.28); --seg-sheen-2: rgba(255,255,255,.16); --seg-sheen-3: rgba(255,255,255,.06); --seg-hotspot-1: rgba(255,255,255,.32); --seg-hotspot-2: rgba(255,255,255,.18); --seg-hotspot-3: rgba(255,255,255,.07); /* Dropdown-only surfaces. */ --select-menu: rgba(38,38,38,.97); --select-menu-shadow: 0 16px 36px rgba(0,0,0,.38); --select-option-hover: rgba(255,255,255,.055); --select-option-selected: rgba(255,255,255,.075); --select-separator: rgba(255,255,255,.055); /* Checkbox-only surfaces. */ --check-rail: var(--seg-track-surface); --check-mark: rgba(245,245,245,.94); /* Destructive/error semantics. */ --button-danger: #e37b73; --button-danger-soft: rgba(216,92,92,.12); /* Slider-specific emphasis. The thumb is small, so it needs slightly more oil definition than larger glass surfaces. */ --slider-fill: rgba(245,245,245,.18); --slider-value-bg: rgba(255,255,255,.055); --slider-iris-opacity: .14; --slider-iris-saturation: 1; /* Choice-card-only surfaces. */ --choice-selected-text: rgba(245,245,245,.96); --choice-selected-muted: rgba(245,245,245,.63); --choice-hover: rgba(255,255,255,.028); --danger-iridescence: conic-gradient(from 220deg at 50% 50%, rgba(120,8,18,.28) 0deg, rgba(224,54,66,.72) 26deg, rgba(255,112,105,.52) 58deg, rgba(255,205,194,.26) 86deg, rgba(177,33,54,.54) 118deg, rgba(255,92,99,.68) 154deg, rgba(114,12,25,.32) 194deg, rgba(255,132,119,.56) 234deg, rgba(255,221,211,.22) 270deg, rgba(157,23,43,.48) 308deg, rgba(241,67,78,.68) 340deg, rgba(120,8,18,.28) 360deg); --danger-iris-strong: .30; } :root[data-theme="light"] { color-scheme: light; --bg: #ccc; --panel: #f5f6f8; --panel-top: #ffffff; --demo-surface: linear-gradient(180deg, rgba(255,255,255,.88), rgba(230,234,239,.72)); --border: rgba(28,39,52,.13); --border-strong: rgba(28,39,52,.20); --text: #20262d; --muted: rgba(32,38,45,.62); --faint: rgba(32,38,45,.48); --heading: rgba(32,38,45,.86); --sel: #536273; --focus: #536273; --shadow: 0 20px 45px rgba(62,76,94,.18); --seg-selected-text: rgba(30,38,47,.96); --seg-track-surface: linear-gradient(180deg, rgba(109,123,140,.16), rgba(255,255,255,.45)); --seg-track-shadow-top: rgba(65,77,91,.18); --seg-track-shadow-bottom: rgba(255,255,255,.78); --seg-glass-wash-top: rgba(255,255,255,.36); --seg-glass-wash-mid: rgba(255,255,255,.17); --seg-glass-wash-bottom: rgba(112,128,147,.10); --seg-glass-inner: rgba(255,255,255,.18); --seg-glass-top-depth: rgba(255,255,255,.14); --seg-glass-bottom-depth: rgba(82,99,118,.11); --seg-glass-shadow: rgba(73,88,105,.16); --seg-glass-rim: rgba(255,255,255,.07); --seg-glass-rim-soft: rgba(255,255,255,.02); --seg-glass-edge-width: 4px; --seg-iris-opacity: .92; --seg-iris-ring-width: 5px; --seg-glass-iridescence: conic-gradient(from 220deg at 50% 50%, rgba(255,122,163,.10) 0deg, rgba(255,122,163,.24) 22deg, rgba(255,184,123,.10) 48deg, rgba(255,255,255,.05) 74deg, rgba(188,154,255,.14) 102deg, rgba(255,255,255,.04) 132deg, rgba(98,214,255,.24) 174deg, rgba(98,214,255,.12) 208deg, rgba(255,255,255,.06) 236deg, rgba(255,209,122,.14) 278deg, rgba(255,255,255,.03) 308deg, rgba(255,146,182,.16) 334deg, rgba(255,122,163,.10) 360deg); --seg-sheen-1: rgba(255,255,255,.50); --seg-sheen-2: rgba(255,255,255,.24); --seg-sheen-3: rgba(255,255,255,.06); --seg-hotspot-1: rgba(255,255,255,.48); --seg-hotspot-2: rgba(255,255,255,.22); --seg-hotspot-3: rgba(255,255,255,.06); --select-menu: rgba(247,249,251,.975); --select-menu-shadow: 0 16px 34px rgba(62,76,94,.22); --select-option-hover: rgba(50,64,80,.055); --select-option-selected: rgba(70,87,106,.075); --select-separator: rgba(28,39,52,.07); --check-rail: var(--seg-track-surface); --check-mark: rgba(30,38,47,.96); --button-danger: #b6453d; --button-danger-soft: rgba(191,65,57,.10); --slider-fill: rgba(53,67,83,.17); --slider-value-bg: rgba(38,51,66,.055); --slider-iris-opacity: 1; --slider-iris-saturation: 1.55; --choice-selected-text: rgba(30,38,47,.96); --choice-selected-muted: rgba(32,38,45,.65); --choice-hover: rgba(38,51,66,.035); --danger-iris-strong: .60; } /* ================================================================ BASE THEME Safe global defaults for a site using the glass theme. ================================================================ */ html, body { background-color: var(--bg); color: var(--text); } body { font-family: Ubuntu, "Helvetica Neue", Verdana, ui-sans-serif, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; } /* ================================================================ 10 — SEGMENTED CONTROL MODULE Recommended for small, finite, mutually-exclusive choices. Source: seg-control_v4 with the raised/over-rail pill treatment. ================================================================ */ /* ══ SEG CONTROL — CSS ═══════════════════════════════════════════════ Transforms only. No filter, backdrop-filter, SVG or canvas, so this stays cheap and works everywhere. */ .seg { --seg-surface: var(--seg-track-surface); --seg-track-radius: 999px; --seg-thumb-overhang: 10px; position: relative; display: flex; flex-wrap: wrap; gap: 4px; row-gap: 4px; border: 1px solid var(--border); border-radius: var(--seg-track-radius); padding: 3px; background: var(--seg-surface); box-shadow: inset 0 1px 3px var(--seg-track-shadow-top), inset 0 -1px 0 var(--seg-track-shadow-bottom); /* Let the pill sit slightly above/outside the rail for this variant. */ overflow: visible; } /* Once a control wraps to 2+ rows, keep the rail corners based on a single-row capsule rather than on the full taller box height. That makes the rail read as a rounded panel instead of two stacked pills, and stops the outer corners from visually cutting into the moving pill. */ .seg.multiline { --seg-track-radius: 18px; } /* Equal-width segments on a single row — the classic iOS look. Only use it when the labels are short and similar; they are nowrap, so a label too wide for its share will overflow. The default never can. */ .seg.even { flex-wrap: nowrap; } .seg.even .seg-btn { flex: 1 1 0; } .seg-btn { position: relative; z-index: 1; flex: 1 1 auto; padding: 7px 12px; border: none; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .18s ease; -webkit-tap-highlight-color: transparent; } /* On .flat this is the visible label. On the warping variant the pill covers it and the lens copy shows instead. */ .seg-btn.on { color: var(--seg-selected-text); } .seg.flat .seg-btn.on { color: var(--seg-selected-text); text-shadow: none; } .seg-btn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; } @media (hover: hover) { .seg-btn:not(.on):hover { color: var(--text); } } /* Positional wrapper — carries the slide, paints nothing. Above the buttons, because the pill body has to hide the real label so the lens copy can stand in for it. */ .seg-thumb { position: absolute; top: calc(var(--seg-thumb-overhang) * -1); left: 0; width: 0; height: 0; z-index: 2; border-radius: 999px; pointer-events: none; transition: transform .40s cubic-bezier(.34, 1.35, .5, 1), width .40s cubic-bezier(.34, 1.35, .5, 1), height .20s ease, opacity .18s ease; will-change: transform, width; } /* No lens to stand in for the label, so the flat pill sits behind the buttons and .seg-btn.on provides the dark text itself. */ .seg.flat .seg-thumb { z-index: 0; } /* Glass treatment inspired by soft translucent UI capsules: centered, smooth and non-slanted. The effect comes from a gentle diffuse edge glow, a broad top sheen and a small bottom hotspot rather than stripe-like reflections. */ .seg-glass { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; background: linear-gradient(180deg, var(--seg-glass-wash-top) 0%, var(--seg-glass-wash-mid) 42%, var(--seg-glass-wash-bottom) 100%), var(--seg-surface); box-shadow: inset 0 0 0 1px var(--seg-glass-rim), inset 0 0 0 3px var(--seg-glass-rim-soft), inset 1px 0 7px var(--seg-glass-inner), inset 0 8px 16px var(--seg-glass-top-depth), inset 0 -8px 16px var(--seg-glass-bottom-depth), inset 9px 0 14px rgba(255, 255, 255, .018), inset -11px 0 15px rgba(0, 0, 0, .040), 0 1px 3px var(--seg-glass-shadow); transform-origin: 50% 50%; transition: transform .40s cubic-bezier(.34, 1.4, .5, 1); } /* Fixed rounded-rectangle doughnut. Its geometry never moves. The oversized conic-gradient canvas inside it rotates underneath the mask, so only the oil-spill colors travel around the pill. */ .seg-iris-ring { position: absolute; inset: 0; border-radius: inherit; padding: var(--seg-iris-ring-width); overflow: hidden; pointer-events: none; opacity: var(--seg-iris-opacity); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .seg-iris-color { position: absolute; left: 50%; top: 50%; width: 230%; aspect-ratio: 1; background: var(--seg-glass-iridescence); transform: translate(-50%, -50%) rotate(0deg); transform-origin: 50% 50%; transition: transform .78s cubic-bezier(.22, .72, .18, 1); will-change: transform; } .seg-glass::before { content: ''; position: absolute; inset: 2px 13px 50% 8px; border-radius: 999px 999px 58% 62% / 999px 999px 100% 100%; background: radial-gradient(152% 112% at 43% 0%, var(--seg-sheen-1) 0%, var(--seg-sheen-2) 25%, var(--seg-sheen-3) 45%, rgba(255, 255, 255, 0) 72%); pointer-events: none; opacity: .82; } .seg-glass::after { content: ''; position: absolute; left: 28%; right: 28%; bottom: 3px; height: 24%; border-radius: 999px; background: radial-gradient(ellipse at center, var(--seg-hotspot-1) 0%, var(--seg-hotspot-2) 26%, var(--seg-hotspot-3) 50%, rgba(255, 255, 255, 0) 76%); pointer-events: none; opacity: .58; } /* Lens: a magnified copy of every label, clipped to the pill. Omitted entirely on .seg.flat. */ .seg-lens { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; } .seg-lens-row { position: absolute; left: 0; top: 0; /* The counter-motion MUST use the exact same timing as .seg-thumb. Otherwise the copied lens label drifts away from the real label during the spring animation and briefly appears as duplicate text. */ transition: left .40s cubic-bezier(.34, 1.35, .5, 1), top .40s cubic-bezier(.34, 1.35, .5, 1); will-change: left, top; } /* The lens copy must be typographically identical to the real button label. Even a tiny font-size difference makes the two rasterisations overlap at different edges and reads as blur rather than refraction. */ .lens-label { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--seg-selected-text); text-shadow: none; font: inherit; font-size: .78rem; font-weight: 600; line-height: normal; white-space: nowrap; -webkit-font-smoothing: inherit; text-rendering: auto; } .seg-thumb.no-anim, .seg-thumb.no-anim .seg-glass, .seg-thumb.no-anim .seg-iris-color, .seg-thumb.no-anim .seg-lens-row { transition: none; } /* Nothing selected. */ .seg-thumb.off { opacity: 0; } @media (prefers-reduced-motion: reduce) { .seg-thumb, .seg-glass, .seg-iris-color, .seg-lens-row { transition: none; } } @media (max-width: 640px) { /* Equal-width segments rarely survive a phone; let them wrap. */ .seg.even { flex-wrap: wrap; } .seg.even .seg-btn { flex: 1 1 auto; } .seg-btn { padding: 8px 10px; } } /* ══ END SEG CONTROL — CSS ═══════════════════════════════════════════ */ /* ================================================================ 20 — GLASS DROPDOWN MODULE Recommended for long/dynamic single-choice lists. The native