/* Peekinduck glass CTA. Shared across all pages. Edit here only; every page links this file. */ /* ============================================================ Glass CTA: Wabi-style pill. Optical structure ported from wabi.xyz: a translucent pill with a rotating conic-gradient edge, a shine that sweeps on hover, and a press-IN (scale down) interaction instead of a lift. Tones are inverted from Wabi's light theme to read on the #004970 blue. ============================================================ */ @property --angle-1 { syntax: ''; inherits: false; initial-value: -75deg; } @property --angle-2 { syntax: ''; inherits: false; initial-value: -45deg; } .glass-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; -webkit-tap-highlight-color: transparent; color: #fff; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; text-shadow: 0 0.05em 0.06em rgba(0,0,0,0.28); background: linear-gradient(-75deg, rgba(255,255,255,0.03), rgba(255,255,255,0.10), rgba(255,255,255,0.03)), rgba(255,255,255,0.07); -webkit-backdrop-filter: blur(clamp(6px, 0.75em, 16px)) saturate(1.35); backdrop-filter: blur(clamp(6px, 0.75em, 16px)) saturate(1.35); /* Tuned for a dark ground: on Wabi's near-white page these highlights read as a faint sheen, but over #004970 the same alphas blow out into plastic. Kept low so the rim does the work, not the fill. */ box-shadow: inset 0 0.125em 0.125em rgba(0,0,0,0.10), inset 0 -0.09em 0.1em rgba(255,255,255,0.14), 0 0.25em 0.125em -0.125em rgba(0,0,0,0.22), 0 0.7em 1.6em -0.6em rgba(0,0,0,0.4); transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1), background 400ms cubic-bezier(0.25, 1, 0.5, 1); } /* Shine: a soft band that slides across on hover (Wabi's --angle-2). */ .glass-cta::before { content: ''; position: absolute; z-index: 1; inset: clamp(1px, 0.0625em, 4px); border-radius: inherit; background: linear-gradient(var(--angle-2), rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 42% 50%, rgba(255,255,255,0) 58%); background-size: 200% 200%; background-position: 0% 50%; background-repeat: no-repeat; mix-blend-mode: screen; pointer-events: none; transition: background-position 500ms cubic-bezier(0.25, 1, 0.5, 1), --angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1); } .glass-cta:hover::before { background-position: 25% 50%; } /* Conic edge: a 1px rim that catches "light" and rotates on hover. */ .glass-cta::after { content: ''; position: absolute; z-index: 2; inset: calc(clamp(1px, 0.0625em, 4px) / -2); border-radius: inherit; padding: clamp(1px, 0.0625em, 4px); box-sizing: border-box; background: conic-gradient(from var(--angle-1) at 50% 50%, rgba(255,255,255,0.85), rgba(255,255,255,0.08) 5% 40%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.08) 60% 95%, rgba(255,255,255,0.85)), linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.28)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: --angle-1 500ms ease; } /* Press-in on hover: the pill shrinks and its cast shadow tightens. */ .glass-cta:hover { transform: scale(0.975); background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.14), rgba(255,255,255,0.05)), rgba(255,255,255,0.11); box-shadow: inset 0 0.125em 0.125em rgba(0,0,0,0.10), inset 0 -0.09em 0.1em rgba(255,255,255,0.20), 0 0.075em 0.025em -0.1em rgba(0,0,0,0.32), 0 0.3em 0.8em -0.5em rgba(0,0,0,0.36); } .glass-cta:hover::after { --angle-1: -125deg; } .glass-cta:active { transform: scale(0.96); } .glass-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Hero CTA: the most present pill on the page, it sits over video. */ .hero-cta { font-size: 1.0625rem; background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.14), rgba(255,255,255,0.05)), rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(clamp(10px, 1em, 22px)) saturate(1.5); backdrop-filter: blur(clamp(10px, 1em, 22px)) saturate(1.5); box-shadow: inset 0 0.125em 0.125em rgba(0,0,0,0.10), inset 0 -0.09em 0.11em rgba(255,255,255,0.20), 0 0.25em 0.125em -0.125em rgba(0,0,0,0.24), 0 0.9em 2.2em -0.6em rgba(0,0,0,0.5); } .hero-cta:hover { background: linear-gradient(-75deg, rgba(255,255,255,0.07), rgba(255,255,255,0.18), rgba(255,255,255,0.07)), rgba(255,255,255,0.17); } /* ============================================================ Segmented control (Normal / Fun Mode). A toggle isn't a CTA. Making both segments raised pills would put two competing buttons in one control, so instead the track is recessed and only the SELECTED segment carries the glass, it reads as a thumb sitting in a groove. Both segments keep the .glass-cta class; the rules below strip the glass off the unselected one, which also buys a free crossfade on switch. ============================================================ */ .mode-track { position: relative; background: rgba(0,0,0,0.16); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 1px 2px rgba(0,0,0,0.30), inset 0 -1px 0 rgba(255,255,255,0.07), 0 1px 0 rgba(255,255,255,0.05); } .mode-seg { transition: color 300ms cubic-bezier(0.25,1,0.5,1); } .mode-seg::before, .mode-seg::after { transition: opacity 300ms cubic-bezier(0.25,1,0.5,1); } .mode-seg.is-active { color: hsl(var(--foreground)); } /* Unselected: no glass, just a label. */ .mode-seg:not(.is-active) { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: none; /* These vars hold raw HSL components, so they need the hsl() wrapper: bare var() here is invalid and silently inherits white. */ color: hsl(var(--muted-foreground)); } .mode-seg:not(.is-active)::before, .mode-seg:not(.is-active)::after { opacity: 0; } .mode-seg:not(.is-active):hover { transform: none; color: hsl(var(--foreground)); } @media (prefers-reduced-motion: reduce) { .glass-cta, .glass-cta::before, .glass-cta::after { transition: none; } .glass-cta:hover { transform: none; } .mode-seg, .mode-seg::before, .mode-seg::after { transition: none; }