/* ========================================================================== Goat Debate — liquid glass, gold-on-gold. Premium, human, "fun serious about being fun". A single translucent material system (blur+saturate, inner-highlight border, soft depth shadow, glossy sheen) over a fixed embossed-gold portrait, with a restrained animated iridescent ring reserved for the highest-polish surfaces. Fonts loaded in App.razor : Fraunces (display/serif, the "GOAT" swagger) + Inter (UI sans, tabular numerals for money). Only transform/opacity (+ occasional filter, masked gradients) animate. No build step. Mobile-first; dark mode via html[data-theme="dark"]. ========================================================================== */ :root { --row-h: 58px; /* palette — light ---------------------------------------------------- */ --gold-100: #fdf0c8; --gold-300: #f4d97e; --gold-500: #d9ac33; --gold-600: #b98c21; --gold-700: #8a6316; --accent: #9c2145; --accent-soft: rgba(156, 33, 69, 0.12); --good: #1c9d63; --good-soft: rgba(28, 157, 99, 0.16); --bad: #c0392b; --bad-soft: rgba(192, 57, 43, 0.14); --ink: #241c0b; --ink-soft: #4d4227; --ink-mute: rgba(36, 28, 11, 0.72); --ink-faint: rgba(36, 28, 11, 0.52); --on-gold: #34260a; /* glass — light -------------------------------------------------------- */ --glass: rgba(255, 255, 255, 0.68); --glass-strong: rgba(255, 255, 255, 0.87); --glass-soft: rgba(255, 255, 255, 0.5); --glass-border: rgba(255, 255, 255, 0.78); --glass-sheen: rgba(255, 255, 255, 0.9); --glass-blur: blur(22px) saturate(1.6); --scrim: rgba(18, 14, 6, 0.3); --scrim-mid: rgba(18, 14, 6, 0.13); /* iridescent ring -------------------------------------------------------- */ --iris-a: rgba(244, 217, 126, 0.95); --iris-b: rgba(190, 222, 255, 0.6); --iris-c: rgba(255, 205, 226, 0.62); --iris-d: rgba(217, 172, 51, 0.95); --border-angle: 0deg; /* shape / shadow / motion ------------------------------------------------ */ --radius: 24px; --radius-md: 18px; --radius-sm: 13px; --radius-pill: 999px; --shadow-soft: 0 10px 32px rgba(20, 16, 8, 0.14); --shadow-lift: 0 20px 54px rgba(20, 16, 8, 0.22); --shadow-gold: 0 12px 30px rgba(185, 140, 33, 0.4); --ease-spring: cubic-bezier(0.22, 1.26, 0.34, 1); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* type -------------------------------------------------------------------- */ --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* institutional grotesk — leaderboard names/meta/tabs/action bar only, shares a foundry with the mono numerals for a calm, official register. */ --font-institutional: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; /* 8px grid ------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; } @media (max-width: 640px) { :root { --row-h: 72px; } } html[data-theme="dark"] { --ink: #f3ecdb; --ink-soft: rgba(243, 236, 219, 0.84); --ink-mute: rgba(243, 236, 219, 0.62); --ink-faint: rgba(243, 236, 219, 0.4); --glass: rgba(24, 19, 12, 0.46); --glass-strong: rgba(24, 19, 12, 0.68); --glass-soft: rgba(24, 19, 12, 0.3); --glass-border: rgba(255, 255, 255, 0.14); --glass-sheen: rgba(255, 255, 255, 0.16); --scrim: rgba(0, 0, 0, 0.38); --scrim-mid: rgba(0, 0, 0, 0.2); --iris-a: rgba(244, 217, 126, 0.85); --iris-b: rgba(140, 190, 255, 0.42); --iris-c: rgba(255, 176, 210, 0.4); --iris-d: rgba(217, 172, 51, 0.85); --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.45); --shadow-lift: 0 22px 58px rgba(0, 0, 0, 0.55); --shadow-gold: 0 12px 30px rgba(0, 0, 0, 0.5); color-scheme: dark; } html[data-theme="dark"] body { background: #171009; } @property --border-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* ========================================================================== Reset & base ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } html.no-scroll { overflow: hidden; } html, body { overflow-x: clip; } body { touch-action: pan-y; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--gold-100); -webkit-font-smoothing: antialiased; /* fallback if .bg's image is slow/unavailable — .bg (fixed) covers this during normal use */ text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; overflow-x: hidden; transition: color 260ms var(--ease-out); } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); } ::selection { background: var(--gold-300); color: var(--on-gold); } :focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; border-radius: 6px; } .page { position: relative; display: flex; flex-direction: column; min-height: 100vh; z-index: 1; } .page__main { flex: 1; } /* ========================================================================== Background — fixed portrait, vignette, slow sheen + light blobs. `.bg` is the first child of body (MainLayout). Transform/opacity only. ========================================================================== */ .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background-color: var(--gold-100); background-image: url("/img/bg-gold.jpg"); background-image: image-set(url("/img/bg-gold.webp") type("image/webp") 1x, url("/img/bg-gold.jpg") type("image/jpeg") 1x); background-size: cover; background-position: center 32%; background-repeat: no-repeat; filter: saturate(1) brightness(1); transition: filter 320ms var(--ease-out); } @media (max-width: 640px) { .bg { background-image: url("/img/bg-gold.jpg"), linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 55%, var(--gold-500) 100%); background-image: image-set(url("/img/bg-gold-1000.webp") type("image/webp") 1x, url("/img/bg-gold.jpg") type("image/jpeg") 1x), linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 55%, var(--gold-500) 100%); background-size: auto 110vh, cover; background-position: center top, center; background-repeat: no-repeat, no-repeat; } } html[data-theme="dark"] .bg { filter: saturate(0.72) brightness(0.46); } .bg__vignette { position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim-mid) 18%, var(--scrim-mid) 70%, var(--scrim) 100%), radial-gradient(120% 90% at 50% 8%, transparent 30%, var(--scrim) 100%); } @media (max-width: 640px) { .bg__vignette { background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim-mid) 16%, rgba(18, 14, 6, 0.42) 46%, rgba(18, 14, 6, 0.56) 78%, rgba(18, 14, 6, 0.68) 100%), radial-gradient(120% 90% at 50% 8%, transparent 30%, var(--scrim) 100%); } } .bg__sheen { /* static gloss band parked mid-viewport — its old sweep animation is gone, so it now needs to rest somewhere visible rather than at the sweep's off-canvas starting mark (translateX(-30vw), fully offscreen). */ position: absolute; top: -30%; left: -35%; width: 70%; height: 160%; background: linear-gradient(102deg, transparent 42%, rgba(255, 250, 230, 0.5) 50%, transparent 58%); filter: blur(18px); transform: translateX(38vw) rotate(9deg); } html[data-theme="dark"] .bg__sheen { background: linear-gradient(102deg, transparent 42%, rgba(255, 235, 190, 0.22) 50%, transparent 58%); } .bg__blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform, opacity; } .bg__blob--a { width: 48vmax; height: 48vmax; top: -20vmax; right: -16vmax; background: radial-gradient(circle at 35% 35%, rgba(253, 231, 158, 0.55), transparent 70%); } .bg__blob--b { width: 36vmax; height: 36vmax; bottom: -16vmax; left: -12vmax; background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.32), transparent 70%); } html[data-theme="dark"] .bg__blob--a { background: radial-gradient(circle at 35% 35%, rgba(217, 172, 51, 0.28), transparent 70%); } html[data-theme="dark"] .bg__blob--b { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08), transparent 70%); } @keyframes drift-a { from { transform: translate(0, 0) scale(1); opacity: 0.8; } to { transform: translate(-4%, 3%) scale(1.08); opacity: 1; } } @keyframes drift-b { from { transform: translate(0, 0) scale(1); opacity: 0.7; } to { transform: translate(3%, -4%) scale(1.05); opacity: 0.95; } } /* ========================================================================== Glass material + iridescent ring system ========================================================================== */ .glass { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--radius); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-sheen); } /* Reusable rotating conic-gradient ring, masked to a thin band, no clipping issues on scrollable/overflow surfaces (ring sits flush inside inset:0). */ .row--first, .modal, .action, .btn--gold, .earnings__amount { position: relative; isolation: isolate; } .row--first::after, .modal::after, .action::after, .btn--gold::after, .earnings__amount::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--border-angle), var(--iris-a), var(--iris-c), var(--iris-b), var(--iris-d), var(--iris-a)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @keyframes iris-spin { to { --border-angle: 360deg; } } .row--first::after { opacity: 0.9; } /* static ring — continuous conic repaint was a per-frame CPU tax */ .modal::after { padding: 2px; opacity: 0.85; } .action::after { opacity: 0; transition: opacity 260ms var(--ease-out); animation: iris-spin 8s linear infinite; animation-play-state: paused; } .action:focus-within::after { opacity: 1; animation-play-state: running; } .btn--gold::after { opacity: 0; transition: opacity 220ms var(--ease-out); animation: iris-spin 5s linear infinite; animation-play-state: paused; } .btn--gold:hover::after, .btn--gold:focus-visible::after { opacity: 0.9; animation-play-state: running; } .earnings__amount::after { opacity: 0.5; } /* ========================================================================== Top bar ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--glass) 72%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); box-shadow: 0 1px 0 var(--glass-sheen) inset, 0 8px 24px rgba(20, 16, 8, 0.06); } .topbar__inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .topbar__left { display: flex; align-items: center; gap: 18px; min-width: 0; } .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: none; } .brand__statue { display: block; width: 20px; height: 32px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 6px rgba(185, 140, 33, 0.4)); } .brand__icon { display: block; width: 28px; height: 28px; border-radius: 7px; flex: none; box-shadow: 0 2px 6px rgba(20, 16, 8, 0.3); } .feature-btn { border: 1px solid var(--glass-border); background: var(--glass-soft); color: var(--ink-soft); cursor: pointer; font-family: var(--font-institutional); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill); transition: background 180ms var(--ease-out), color 180ms var(--ease-out); white-space: nowrap; } .feature-btn:hover { background: var(--glass-strong); color: var(--ink); } @media (max-width: 900px) { .feature-btn { display: none; } } .feature-input, .feature-contact { width: 100%; border: 1px solid var(--glass-border); background: var(--glass-soft); color: var(--ink); font-family: var(--font-institutional); font-size: 14px; border-radius: 12px; padding: 10px 12px; resize: vertical; } .feature-input:focus, .feature-contact:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; } .robot--privacy { background: var(--glass-soft); color: var(--ink-soft); } .robot__fade { animation: robot-fade 500ms var(--ease-out); } @keyframes robot-fade { from { opacity: 0; transform: translateY(3px); } } .brand__text { display: flex; flex-direction: column; line-height: 1.3; gap: 3px; min-width: 0; } .brand__tag { font-family: var(--font-institutional); font-weight: 600; font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-mute); white-space: nowrap; } @media (max-width: 760px) { .brand__tag { display: none; } } .brand__mark { display: block; width: 26px; height: 26px; flex: none; filter: drop-shadow(0 3px 6px rgba(185, 140, 33, 0.35)); } .brand__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; } .seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--glass-soft); border: 1px solid var(--glass-border); } .seg__btn { border: 0; background: transparent; color: var(--ink-mute); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: 0.01em; padding: 7px 13px; border-radius: var(--radius-pill); white-space: nowrap; transition: background 220ms var(--ease-out), color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 140ms var(--ease-out); } .seg__btn:hover { color: var(--ink); } .seg__btn:active { transform: scale(0.96); } .seg__btn--active { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--on-gold); box-shadow: 0 4px 12px rgba(185, 140, 33, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .topbar__nav { display: flex; align-items: center; gap: 22px; } .topbar__nav a { text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink-soft); transition: color 180ms var(--ease-out); } .topbar__nav a:hover { color: var(--ink); } .iconbtn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-soft); cursor: pointer; font-size: 15px; line-height: 1; transition: transform 200ms var(--ease-spring), background 200ms var(--ease-out); } .iconbtn:hover { background: rgba(255, 255, 255, 0.5); } .iconbtn:active { transform: scale(0.9) rotate(-12deg); } @media (max-width: 720px) { .topbar__nav a:not(.iconbtn) { display: none; } } @media (max-width: 460px) { .brand__name { display: none; } .seg__btn { padding: 7px 10px; } } /* ========================================================================== Hero — a statement again, but still disciplined: stats pill + H1 + subtext must clear comfortably within the first viewport at 1440×900 so the board starts with a few rows visible. `.hero` isolates its own stacking context so `.hero__statue` (position:absolute, z-index:1) can paint above the hero's own copy while still losing to `.board-section` (next sibling, painted after `.hero` as a whole) — that's how the statue ends up genuinely *behind* the board/feed glass where it dips under them. ========================================================================== */ .hero { position: relative; isolation: isolate; padding: clamp(17px, 3.1vh, 31px) 20px clamp(12px, 2.4vh, 22px); } .hero__inner { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .hero__copy { display: flex; flex-direction: column; gap: 10px; max-width: 640px; } /* ≥1100px the page becomes board-column + 312px live-tips rail (.board-layout). Mirror that exact two-column shape here — a real 312px phantom column, not a guessed transform offset — so the hero copy's centering axis lands on .board-col's axis instead of the viewport's. Both .hero__inner and .board-layout's content box are symmetric-padding-centered on the viewport, so matching the column math is enough; no extra offset math needed. Mobile is untouched. */ @media (min-width: 1100px) { .hero__inner { max-width: 1148px; display: grid; grid-template-columns: minmax(0, 1fr) 312px; row-gap: 14px; column-gap: 22px; align-items: start; } .hero__inner > * { grid-column: 1; justify-self: center; } } /* Statue — taken out of flow entirely: bigger, floated top-right, dipping below the hero's own box so its lower half sits behind the board/feed glass that follows in the DOM (their backdrop-filter frosts right over it). Never intercepts clicks. Hidden below 900px — no room to breathe. */ .hero__statue { display: none; pointer-events: none; } @media (min-width: 901px) { .hero__statue { display: flex; flex-direction: column; align-items: center; position: absolute; z-index: 1; right: clamp(174px, calc(8vw + 150px), 278px); bottom: -148px; justify-content: flex-end; } } .hero__statue::before { content: ""; position: absolute; left: 50%; top: 40%; width: 250%; height: 190%; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgba(253, 231, 158, 0.6), transparent 72%); filter: blur(6px); } html[data-theme="dark"] .hero__statue::before { background: radial-gradient(closest-side, rgba(217, 172, 51, 0.3), transparent 72%); } .hero__statue-img { display: block; width: auto; height: clamp(368px, 30vw, 483px); filter: drop-shadow(0 20px 26px rgba(20, 16, 8, 0.34)); } .hero__statue-shadow { display: block; width: 58%; height: 14px; margin-top: 2px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 16, 8, 0.4), transparent 75%); filter: blur(2px); } @keyframes statue-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes statue-shadow-pulse { 0%, 100% { transform: scaleX(1); opacity: 0.6; } 50% { transform: scaleX(0.86); opacity: 0.4; } } .stats-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 16px; border-radius: var(--radius-pill); text-decoration: none; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow-x: auto; scrollbar-width: none; background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-sheen); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out); } .stats-pill::-webkit-scrollbar { display: none; } .stats-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-sheen); } @media (max-width: 640px) { .stats-pill { flex-wrap: wrap; justify-content: center; row-gap: 5px; column-gap: 7px; white-space: normal; overflow-x: visible; text-align: center; max-width: calc(100vw - 40px); padding: 9px 16px; font-size: 11.5px; } .stats-pill__tips { flex-basis: 100%; } .stats-pill__sep--2 { display: none; } } .stats-pill__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); animation: live-pulse 2.2s var(--ease-in-out) infinite; } @keyframes live-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } .stats-pill__online, .stats-pill__visitors, .stats-pill__tips { font-family: var(--font-mono); letter-spacing: -0.01em; } .stats-pill__online { color: var(--ink); font-weight: 600; } .stats-pill__sep { color: var(--ink-faint); font-family: var(--font-body); } .stats-pill__link { color: var(--gold-700); font-weight: 700; } html[data-theme="dark"] .stats-pill__link { color: var(--gold-300); } .hero__title { font-weight: 600; font-optical-sizing: auto; font-size: clamp(34px, 4.1vw, 50px); letter-spacing: -0.02em; line-height: 1.14; margin: 0; color: var(--ink); max-width: 23ch; } .hero__goat { font-style: italic; font-weight: 600; white-space: nowrap; padding-inline: 0.06em; margin-inline: -0.06em; background: linear-gradient(105deg, transparent 44%, rgba(255, 248, 214, 0.95) 50%, transparent 56%), /* White-gold ramp: the anchor stops (0/74/100%) are deliberately desaturated and lightened from a saturated yellow-gold (hsl ~43°,73%,61% / ~40°,79%,65%) toward a pale warm champagne (hsl ~46°,58%,78% / ~44°,63%,83%) — same warm hue family as the near-white mid-ramp stops, just a shade less pale, so the whole fill reads as crisp pale metal rather than saturated brass. Shimmer sweep above is untouched. */ linear-gradient(105deg, #e8d9a8 0%, #fdeeb0 30%, #fff6d8 50%, #efe0b8 74%, #e8d9a8 100%); background-size: 300% 100%, 220% 100%; background-position: -160% 0, 0 0; animation: goat-glint 7s linear infinite; /* value only changes in the last second — no repaint the rest of the cycle */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* ONE crisp contour + one soft ambient glow — not a stack of them. Several near-zero-offset shadow layers on a thin clipped-text glyph don't outline it, they sit almost directly on top of it and their opacity compounds, smothering the pale fill into a muddy blur. */ text-shadow: 0 1.5px 1.5px rgba(52, 38, 10, 0.65); filter: drop-shadow(0 3px 5px rgba(185, 140, 33, 0.45)); /* static gradient — repainting clipped H1 text every frame is not worth it */ } @keyframes goat-glint { 0%, 92% { background-position: -160% 0, 0 0; } 100% { background-position: 260% 0, 0 0; } } html[data-theme="dark"] .hero__goat { /* same bright champagne ramp as the hover pill — the fill must never go muddy in dark mode */ background-image: linear-gradient(105deg, transparent 44%, rgba(255, 250, 224, 0.95) 50%, transparent 56%), linear-gradient(105deg, #e8bd4e 0%, #fdeeb0 40%, #fff6d8 55%, #ecc75e 76%, #e8bd4e 100%); text-shadow: 0 1px 0 rgba(18, 12, 4, 0.3), 0 8px 22px rgba(0, 0, 0, 0.28), 0 -1px 0 rgba(255, 244, 208, 0.38); } @keyframes goat-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero__once { display: inline-block; white-space: nowrap; } .hero__ellipsis { font-style: italic; color: var(--ink-mute); } .hero__sub-line { display: block; font-family: var(--font-institutional); } .hero__sub-line--argue { font-weight: 460; font-size: 0.98em; color: var(--ink-soft); margin-bottom: 5px; } .hero__sub-line--dare { font-weight: 520; font-size: 1.08em; color: var(--ink); margin-bottom: 5px; } .hero__sub-line--dare em { font-style: normal; color: var(--gold-700); font-weight: 650; } html[data-theme="dark"] .hero__sub-line--dare em { color: var(--gold-300); } .hero__sub { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 54ch; } /* action row — lives inside .board.glass, above .tabs: flat toolbar, not a second floating glass card (avoids double-blur mud), but z-index-raised so its .suggest dropdown always overlays the tabs/rows below it. -------- */ .action { width: 100%; max-width: none; display: flex; gap: 8px; align-items: stretch; padding: 3px; margin-bottom: 0; border-radius: 14px; background: var(--glass-soft); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-sheen); transition: box-shadow 240ms var(--ease-out), background 240ms var(--ease-out); z-index: 6; } .action:focus-within { background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 0 0 4px rgba(217, 172, 51, 0.18); } .action__field { position: relative; display: flex; align-items: center; min-width: 0; } .action__field--name { flex: 1 1 auto; } .action__icon { position: absolute; left: 16px; font-size: 15px; opacity: 0.55; pointer-events: none; } .action__input { width: 100%; border: 0; background: transparent; outline: none; color: var(--ink); font-family: var(--font-institutional); font-size: 13.5px; font-weight: 500; padding: 7px 34px 7px 46px; } .action__input::placeholder { color: var(--ink-faint); } .action__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; border: 0; background: rgba(0, 0, 0, 0.08); color: var(--ink-mute); font-size: 14px; line-height: 1; cursor: pointer; transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-spring); } .action__clear:hover { background: rgba(0, 0, 0, 0.14); color: var(--ink); } .action__clear:active { transform: translateY(-50%) scale(0.88); } html[data-theme="dark"] .action__clear { background: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .action__clear:hover { background: rgba(255, 255, 255, 0.18); } /* Not-ranked status chip — replaces the sport