/* ============================================================ VITREA — theme stylesheet (recreated from the liquid-glass pen Adam supplied). The pen's own styles are kept as-is except: - body/.ambient/.grid colors moved off hardcoded values onto CSS custom properties (--page-bg/--ink/--ink-soft/--ambient-1/--ambient-2/ --grid-dot), each registered via @property (same technique the pen already used for --angle-1/--angle-2) so they can smoothly cross-fade. That's what powers the light/dark toggle below — new, not in the pen, whose single gray/ink pairing is now just the light-mode default. - .glass gained a fourth pseudo, ::before: a continuous, slow diagonal sweep, positioned z-index:-1 (safe inside .glass's own stacking context, since position+z-index already promotes it to one). Same construction as the pen's own hover-triggered label sweep on .btn span::after — a 110deg band swept via background-position, screen-blended — but ambient/always-on and much fainter. Built off the arboredge project's ".eyebrow" kicker-chip shine (same band shape, and the same screen-not-overlay reasoning: screen stays visible over a light OR dark face, overlay disappears on one of them). Every .glass surface — badge, card, buttons, the toggle — now catches a bit of light on its own; durations are staggered per surface so it never reads as one mechanical pulse. - the pen's own header nav (brand + Features/Pricing/Docs) is dropped entirely — theme pages carry no nav of their own, pen or otherwise (site convention, matches Paper). - new elements (badge-wrap/badge, theme_card, theme_tags, theme_actions, toggle-wrap/toggle) are styled at the bottom, reusing the pen's .glass-wrap/.glass/.btn system rather than inventing a second visual language. - a real dark-mode toggle: theme.js stamps the initial theme on synchronously, pre-paint (same pattern the site's own deck.js uses for its direction stamp), then flips it on click. ============================================================ */ /* ========== DEFS ========== */ @property --angle-1 { syntax: ""; inherits: false; initial-value: -75deg; } @property --angle-2 { syntax: ""; inherits: false; initial-value: -45deg; } @property --page-bg { syntax: ""; inherits: true; initial-value: #d7d7d7; } @property --ink { syntax: ""; inherits: true; initial-value: rgba(50, 50, 50, 1); } @property --ink-soft { syntax: ""; inherits: true; initial-value: rgba(50, 50, 50, .7); } @property --ambient-1 { syntax: ""; inherits: true; initial-value: rgba(168, 197, 255, .9); } @property --ambient-2 { syntax: ""; inherits: true; initial-value: rgba(255, 205, 178, .9); } @property --grid-dot { syntax: ""; inherits: true; initial-value: rgba(0, 0, 0, .15); } :root { --anim--hover-time: 400ms; --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1); --toggle-bounce: cubic-bezier(.34, 1.56, .64, 1); --page-bg: #d7d7d7; --ink: rgba(50, 50, 50, 1); --ink-soft: rgba(50, 50, 50, .7); --ambient-1: rgba(168, 197, 255, .9); --ambient-2: rgba(255, 205, 178, .9); --grid-dot: rgba(0, 0, 0, .15); --shine-alpha: .35; transition: --page-bg .5s var(--anim--hover-ease), --ink .5s var(--anim--hover-ease), --ink-soft .5s var(--anim--hover-ease), --ambient-1 .5s var(--anim--hover-ease), --ambient-2 .5s var(--anim--hover-ease), --grid-dot .5s var(--anim--hover-ease); } :root[data-theme="dark"] { --page-bg: #14161c; --ink: rgba(232, 236, 245, 1); --ink-soft: rgba(232, 236, 245, .68); --ambient-1: rgba(103, 142, 255, .55); --ambient-2: rgba(255, 140, 105, .42); --grid-dot: rgba(255, 255, 255, .14); --shine-alpha: .5; } /* WHITE-FLASH GUARD (site invariant, not from the pen): html carries the same background the body will settle into, on both themes, so there's nothing for the UA's default white canvas to flash before CSS lands. */ html { background: var(--page-bg); } /* ========== PAGE ========== */ * { box-sizing: border-box; } body { margin: 0; width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--page-bg); font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ink); padding: clamp(4.5rem, 10vh, 6rem) 1rem 2.5rem; } /* Dotted grid */ .grid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .grid circle { fill: var(--grid-dot); } /* Ambient light — gives the backdrop-blur something to refract */ .ambient { position: fixed; z-index: 0; width: 45vmax; height: 45vmax; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.55; } .ambient--1 { background: radial-gradient(circle, var(--ambient-1), transparent 65%); top: -12vmax; left: -8vmax; animation: drift-1 26s ease-in-out infinite alternate; } .ambient--2 { background: radial-gradient(circle, var(--ambient-2), transparent 65%); bottom: -14vmax; right: -10vmax; animation: drift-2 32s ease-in-out infinite alternate; } @keyframes drift-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(14vmax, 10vmax) scale(1.15); } } @keyframes drift-2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-12vmax, -8vmax) scale(0.95); } } /* ========== GLASS SYSTEM ========== */ /* One material, every consumer (badge, card, buttons, toggle). Each .glass-wrap sets --radius; everything inside inherits it. Shadow lives on .glass-wrap::before — no extra div needed. */ .glass-wrap { --radius: 999vw; position: relative; z-index: 2; border-radius: var(--radius); transition: all var(--anim--hover-time) var(--anim--hover-ease); } /* Detached ring shadow */ .glass-wrap::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: var(--radius); background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); padding: 0.125em; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; translate: -0.125em 0.5em; filter: blur(clamp(2px, 0.125em, 12px)); pointer-events: none; transition: all var(--anim--hover-time) var(--anim--hover-ease); } /* The glass surface itself */ .glass { --border-width: clamp(1px, 0.0625em, 4px); position: relative; z-index: 3; border-radius: var(--radius); background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2); backdrop-filter: blur(clamp(2px, 0.25em, 8px)); -webkit-backdrop-filter: blur(clamp(2px, 0.25em, 8px)); transition: all var(--anim--hover-time) var(--anim--hover-ease); } /* Ambient shine — see header comment. Sits at z-index:-1, which stays scoped to .glass's own stacking context (position + a numeric z-index above already promotes it), so it paints above the base fill but behind the element's real content. --shine-duration lets each consumer below stagger its speed so the sweeps never sync up. */ .glass::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--radius); background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, var(--shine-alpha)) 50%, rgba(255, 255, 255, 0) 65%) no-repeat 0 0 / 240% 100%; mix-blend-mode: screen; pointer-events: none; animation: ambientShine var(--shine-duration, 7s) linear infinite; animation-delay: var(--shine-delay, 0s); } @keyframes ambientShine { from { background-position: 230% 0; } to { background-position: -150% 0; } } /* Animated conic outline */ .glass::after { content: ""; position: absolute; z-index: 1; inset: calc(var(--border-width) / -2); border-radius: var(--radius); padding: var(--border-width); background: conic-gradient(from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5)), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5); pointer-events: none; transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease; } /* ========== MAIN / CARD ========== */ main { width: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; } .card-wrap { --radius: 1.75em; display: flex; justify-content: center; } .card { width: min(92vw, 38rem); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; --shine-duration: 9s; backdrop-filter: blur(clamp(6px, 0.5em, 14px)); -webkit-backdrop-filter: blur(clamp(6px, 0.5em, 14px)); } .card h1 { margin: 0 0 1.1rem; font-size: clamp(2rem, 5.5vw, 3.25rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; color: var(--ink); text-shadow: 0 0.06em 0.03em rgba(0, 0, 0, 0.08); } /* ========== BUTTONS ========== */ .btn { appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-decoration: none; background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --shine-duration: 5.5s; --shine-delay: -2s; backdrop-filter: blur(clamp(1px, 0.125em, 4px)); -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } .btn span { position: relative; display: block; user-select: none; -webkit-user-select: none; letter-spacing: -0.05em; font-weight: 500; color: var(--ink); text-shadow: 0 0.25em 0.05em rgba(0, 0, 0, 0.1); padding-inline: 1.5em; padding-block: 0.875em; transition: all var(--anim--hover-time) var(--anim--hover-ease); } /* Light sweep across the label — hover-triggered, unchanged from the pen */ .btn span::after { content: ""; position: absolute; z-index: 3; inset: calc(var(--border-width) / 2); border-radius: var(--radius); overflow: clip; background: linear-gradient(var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 40% 50%, rgba(255, 255, 255, 0) 55%); mix-blend-mode: screen; pointer-events: none; background-size: 200% 200%; background-position: 0% 50%; background-repeat: no-repeat; transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease); } /* Hover / active — buttons only */ .btn:hover { transform: scale(0.975); backdrop-filter: blur(0.01em); -webkit-backdrop-filter: blur(0.01em); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5); } .btn:hover span { text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12); } .btn:hover span::after { background-position: 25% 50%; } .btn:active span::after { background-position: 50% 15%; --angle-2: -15deg; } .btn:hover::after { --angle-1: -125deg; } .btn:active::after { --angle-1: -75deg; } /* Shadow reacts to its own button */ .btn-wrap:has(.btn:hover)::before { translate: -0.125em 0.125em; filter: blur(clamp(2px, 0.0625em, 6px)); } /* Press-down tilt */ .btn-wrap:has(.btn:active) { transform: rotate3d(1, 0, 0, 25deg); } .btn-wrap:has(.btn:active) .btn { box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15); } .btn-wrap:has(.btn:active)::before { translate: -0.125em 0.5em; opacity: 0.75; } .btn-wrap:has(.btn:active) span { text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12); } /* Ghost variant — same bones, quieter body */ .btn--ghost { background: linear-gradient(-75deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.03), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.25), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.12), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.1); } .btn--ghost span { color: var(--ink-soft); font-weight: 500; } /* Touch devices — freeze the angle animations */ @media (hover: none) and (pointer: coarse) { .btn span::after, .btn:active span::after { --angle-2: -45deg; } .btn::after, .btn:hover::after, .btn:active::after { --angle-1: -75deg; } } /* ============================================================ Everything below is new: the theme-for-sale kit (badge, card body, tags, actions) and the dark-mode toggle, in Vitrea's own glass idiom. ============================================================ */ .badge-wrap { --radius: 999vw; margin: 0 auto 1.1em; } .badge { margin: 0; padding: .5em 1.3em; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); --shine-duration: 6s; --shine-delay: -4s; backdrop-filter: blur(clamp(2px, .2em, 6px)); -webkit-backdrop-filter: blur(clamp(2px, .2em, 6px)); } .theme_card { margin-top: 1.5rem; text-align: left; color: var(--ink-soft); font-size: clamp(.92rem, 1.6svh, 1.05rem); line-height: 1.6; } .theme_card p { margin: 0 0 1em; } .theme_tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5em; padding: 0; } .theme_tags li { padding: .4em 1.1em; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } :root[data-theme="dark"] .theme_tags li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); } .theme_actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; font-size: clamp(.95rem, 1.4vw, 1.05rem); } /* ========== DARK-MODE TOGGLE ========== */ .toggle-wrap { --radius: 999vw; position: fixed; top: clamp(1rem, 3vh, 1.5rem); right: clamp(1rem, 3vw, 1.5rem); z-index: 10; } .toggle { display: flex; align-items: center; gap: .6em; border: 0; padding: .5em .8em; font: inherit; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); --shine-duration: 8s; --shine-delay: -1s; backdrop-filter: blur(clamp(2px, .2em, 6px)); -webkit-backdrop-filter: blur(clamp(2px, .2em, 6px)); } .toggle_icon { position: relative; z-index: 1; width: 1.05em; height: 1.05em; flex: none; color: var(--ink-soft); opacity: .45; transition: opacity var(--anim--hover-time) var(--anim--hover-ease), color var(--anim--hover-time) var(--anim--hover-ease); } .toggle_icon--sun { opacity: 1; color: #c98a2e; } :root[data-theme="dark"] .toggle_icon--sun { opacity: .45; color: var(--ink-soft); } :root[data-theme="dark"] .toggle_icon--moon { opacity: 1; color: #a9b8ff; } .toggle_track { position: relative; z-index: 1; display: block; width: 2.5em; height: 1.4em; border-radius: 999px; background: rgba(0, 0, 0, .12); box-shadow: inset 0 .08em .12em rgba(0, 0, 0, .2); } :root[data-theme="dark"] .toggle_track { background: rgba(0, 0, 0, .35); } .toggle_thumb { position: absolute; top: .15em; left: .15em; width: 1.1em; height: 1.1em; border-radius: 50%; background: linear-gradient(160deg, #fff, #dfe6ef); box-shadow: 0 .1em .2em rgba(0, 0, 0, .3), inset 0 .05em .08em rgba(255, 255, 255, .9); transition: left 480ms var(--toggle-bounce), background 480ms var(--anim--hover-ease); } :root[data-theme="dark"] .toggle_thumb { left: calc(100% - 1.1em - .15em); background: linear-gradient(160deg, #4b5b7c, #1c2333); } @media (prefers-reduced-motion: reduce) { .ambient--1, .ambient--2 { animation: none; } .glass-wrap, .glass-wrap::before, .glass, .glass::after, .btn span, .btn span::after, .toggle_icon, .toggle_thumb { transition: none; } .glass::before { animation: none; opacity: 0; } :root { transition: none; } }