/* ============================================================================ goose-override.css — HONK rebrand design audit (2026-07-21) ---------------------------------------------------------------------------- Loaded LAST in , after every compiled chunk + cobalt-themes.css. Goal: unify all rectangular blocks / cards / panels / modals to an 8px corner radius. Oversized radii (10 / 12 / 16 / 24px and the large DS radius tokens) are brought DOWN to 8px. Intentionally LEFT UNTOUCHED (per brief — small round things stay small/round): - avatars, icons, circular buttons: border-radius:50% / rounded-full - pills & chips: --ds-radius-full, 9999px, 999px, 356px, 38px - small tactical radii already <= 6px (badges, nav icons, progress bars, multiplier chips, secondary toggle buttons) — these are the "chips / icons" the brief says NOT to touch. - game-board tiles (Mines / Miner .mine-cell/.cell-item) — gameplay art - decorative pseudo-element indicators (tab underlays, timer skeletons) Colours are NOT changed here — the palette is already fully themed via the 275 --cst-* token bridges in cobalt-themes.css (see audit notes). ============================================================================ */ /* --- 1. Design-system radius tokens: collapse large BLOCK radii to 8px ------- These tokens feed hundreds of card / modal / panel rules through var(). Redefining them (last :root wins at equal specificity — no !important needed) flattens every token-based block to 8px in one move. Small tokens (--ds-radius-1 = 4px, --ds-radius-2 = 8px) and the round token (--ds-radius-full) are deliberately left alone. */ :root, :host { --ds-radius-4: 8px; /* was 1rem / 16px — modal surfaces, big cards */ --ds-radius-6: 8px; /* was 1.5rem/ 24px */ --radius-l: 8px; /* was 12px — .rounded-lg style blocks */ --radius-xl: 8px; /* was 16px / .75rem — .rounded-xl blocks */ --radius-3xl: 8px; /* was 1.5rem — .rounded-3xl blocks */ } /* --- 2. Arbitrary-value rounding utilities used on block containers ---------- Same class selector, loaded later -> wins for equal-specificity cases. !important guards against on-demand (code-split) chunks that re-assert the utility later in source order. rounded-[2px]/[3px]/[4px]/[6px] and rounded-full are NOT listed — those stay as small / round elements. */ .rounded-\[10px\], .rounded-\[12px\], .rounded-\[16px\], .rounded-\[24px\], .md\:rounded-\[16px\], .hover\:rounded-\[16px\]:hover { border-radius: 8px !important; } /* --- 3. Panels / cards / modal surfaces with hard-coded large radii ---------- Upstream rules carry a scoped [data-v-*] attribute (specificity 0,2,0) and some code-split chunks load after this file, so a targeted !important is the robust way to win. Each selector below is a rectangular block / surface. */ .modal-content, /* AirdropCreateModal 12px */ .welcome-modal, /* LevelUp 16px */ .level-up-prize-preview, /* LevelUp 16px */ .level-up-prize-preview__content, /* LevelUp 16px */ .live-drop-table-wrapper, /* LiveDropTable 12px */ .bonus-modal-shared, /* MainLayout 16px */ .bonus-modal-shared__content, /* MainLayout 16px */ .crate-bonus-shared, /* MainLayout 16px */ .crate-bonus-shared__content, /* MainLayout 16px */ .crate-hunter-shared, /* MainLayout 16px */ .crate-hunter-shared__content, /* MainLayout 16px */ .qr-code-card, /* index 12px */ .qr-success-card, /* index 12px */ .pwa-ios-modal__description-card, /* index 16px */ .pwa-manual-modal__description-card, /* index 16px */ .cobalt-theme-picker__panel, /* cobalt-themes 12px */ .cobalt-theme-picker__toggle { /* cobalt-themes 10px */ border-radius: 8px !important; } /* --- 4. Toast notification panel (defined with !important upstream) --------- */ .Vue-Toastification__toast { border-radius: 8px !important; } /* ============================================================================ 5. SKELETON / LOADING PLACEHOLDERS — mute brightness ---------------------------------------------------------------------------- Complaint: skeletons render too bright. The shared skeleton engine is driven by --skeleton-bg / --skeleton-shimmer-highlight. cobalt-themes.css already !important-overrides them, but points --skeleton-bg at surface-3 (a LIGHTER surface) and lets a few banners flash near-opaque white — hence still bright. We must out-specify the theme rule, which lives on ":root, html[data-cobalt-theme]" (specificity 0,1,1). Grouping the same selectors here and loading last wins by source order. New look: base sits just above the page background (in-tone, dark), and the shimmer is a soft, low-contrast sweep of the site's own "raised" surface instead of a hard white flash. Skeleton corner radius already resolves to 8px (base .skeleton = 0.5rem; card skeletons inherit the flattened DS tokens), so circular avatar-skeletons are intentionally left round. ============================================================================ */ :root, html[data-cobalt-theme] { /* dark, in-tone base (was surface-3 @72% — too light) */ --skeleton-bg: var(--cst-bg-surface-1, #202533) !important; /* soft translucent sweep of the raised surface, not white-in-the-face */ --skeleton-shimmer-highlight: color-mix(in srgb, var(--cst-bg-raised, #444839) 45%, transparent) !important; } /* Aside-banner skeletons hard-code a near-white 0.28 shimmer sweep — soften it to a gentle 0.07 light pass. Scoped [data-v] + ::after upstream (0,2,1), so !important is used to win regardless of chunk load order. */ .lottery-aside__skeleton::after, .easter-lottery-aside__skeleton::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100%) !important; } html body .vip-club-mobile-hero__character,html body [class*="vip-club"][class*="hero__character"]{background-image:url("/images/2b4c7bb0c8ea1923ca3a6e518c817bd759d498f0cc73b9d54892503f0163e676.webp")!important;background-size:cover!important;background-position:center!important} .cb-card__case-art,.cb-card__sparks{transition:transform .35s cubic-bezier(.2,.7,.3,1)!important;transform-origin:center center!important} .game-card:hover .cb-card__case-art,.cb-card:hover .cb-card__case-art,[href="#/crate-pvp"]:hover .cb-card__case-art,[class*="cb-card"]:hover .cb-card__case-art{transform:scale(1.1) translate(-10px,0) rotate(4deg)!important} /* ============================================================================ 6. BRAND ACCENT → HONK goose orange (design audit v2, 2026-07-21) ---------------------------------------------------------------------------- The default "dust2" palette themed the primary action to a muted gold (#c68b35 / focus #efc36e). The HONK emblem's brand accent is a warm goose-beak ORANGE (~#e07830) over white. We nudge ONLY the default theme's action + focus SOURCE tokens toward that orange, so every accent that is already driven off --cst-action* / --cst-focus (primary buttons, CTAs, balance chip, progress fills, glows, ::selection, focus ring, swiper dots) reads as the brand — in ONE move, through the existing token bridge. Deliberately NOT changed: - --cst-accent (olive #91a85f) keeps its green / success-adjacent role; olive + orange is the dust2-map pairing and stays as the secondary hue. - status semantics (success/win/warning/danger/purple/reward) untouched. - every non-default theme: scoped to :root + [data-cobalt-theme="dust2"] so the floating theme-picker still previews each palette faithfully. Custom-property redefinition at equal specificity + later source order wins (no !important needed); the bridge resolves var(--cst-action) dynamically. text-on-action stays near-black (#050505) — orange is light enough for AA+. */ :root, html[data-cobalt-theme="dust2"] { --cst-action: #d9772e; /* was #c68b35 gold -> goose orange */ --cst-action-hover: #ea8a3c; /* was #dda447 */ --cst-action-pressed: #b25f22; /* was #9c6e2a */ --cst-focus: #f2ac5c; /* was #efc36e pale amber -> warm amber */ --cst-action-rgb: 217 119 46; --cst-focus-rgb: 242 172 92; /* promo + theme-switcher gradients carried a literal gold stop; warm them to the new orange so large hero/promo washes match the buttons. */ --cst-promo-gradient: linear-gradient(111.56deg, #455136 0%, #cf6f2a 100%); --cst-switcher-gradient: linear-gradient(135deg, #e58a3a 0%, #758d50 100%); } /* ---------------------------------------------------------------------------- 7. VIP CLUB mobile hero — theme-driven glow (was: hard-coded cobalt, then hard-coded orange) [design audit v3, 2026-07-21] ---------------------------------------------------------------------------- The `.vip-club-mobile-hero` banner (mobile VIP page, behind the "VIP CLUB" wordmark + goose-throne character) originally hard-coded a saturated COBALT radial (rgb(26,65,172) -> rgb(54,128,190)) that the token bridge never reached. Audit v2 fixed the blue by hard-coding a WARM ORANGE radial for EVERY theme — which is itself wrong: it painted an orange banner on arctic, emerald, ultraviolet, midnight, … (verified on renders), breaking each theme's identity while every other surface (WALLET chip, DISCORD button, VIP tier card) themed correctly. Fix: drive the radial off the per-theme --cst-action token, so each palette colours its own banner (dust2 -> goose orange via §6, arctic -> teal, emerald -> green, ultraviolet -> violet, inferno -> red, …) in ONE global rule. The far/top-right stop (where the white "VIP CLUB" wordmark sits) is mixed toward the dark surface-2 so even LIGHT action tokens (carbon #aeb7c1, arctic focus) keep the wordmark at AA contrast; the bottom-left anchor is darkened for depth. Global on purpose (single hard-code eliminated). */ html[data-cobalt-theme] .vip-club-mobile-hero { background-image: radial-gradient(150% 170% at 6% 108%, color-mix(in srgb, var(--cst-action) 80%, #000 20%) 0%, var(--cst-action) 38%, color-mix(in srgb, var(--cst-action) 52%, var(--cst-bg-surface-2, #23251d)) 100%) !important; background-size: cover !important; background-position: center !important; } /* carbon is the ONE outlier: its --cst-action is a LIGHT silver (#aeb7c1), so the generic rule above would put the white "VIP CLUB" wordmark on a light banner (fails AA). Give carbon a dark graphite banner that keeps only a subtle silver sheen — on-identity for "carbon", and the wordmark reads AA+. */ html[data-cobalt-theme="carbon"] .vip-club-mobile-hero { background-image: radial-gradient(150% 170% at 6% 108%, color-mix(in srgb, var(--cst-action) 52%, #0b0d11 48%) 0%, color-mix(in srgb, var(--cst-action) 38%, #0b0d11 62%) 45%, color-mix(in srgb, var(--cst-action) 26%, #0b0d11 74%) 100%) !important; } /* ---------------------------------------------------------------------------- 8. Header logo — tighten emblem ↔ HONK wordmark gap [audit v3, 2026-07-21] ---------------------------------------------------------------------------- The brand link `a.layout-header__brand` lays out the goose emblem + the HONK wordmark SVG (`svg.layout-header__logo-text`, viewBox "0 0 122 20", shown only at >=1920px) as flex children with Tailwind `gap-3` = 12px. That reads as too much air between the emblem and the wordmark. Tighten to 6px so HONK sits snug against the emblem. Scoped to the brand link only; harmless at narrower widths where the wordmark is display:none (single visible child). The SVG itself is NOT touched. */ .layout-header__brand { gap: 6px !important; } /* Weekly-crate active/hover border+glow: was hardcoded green (--ds-brand-green-bright + #74a33f) that ignored themes -> drive from per-theme action accent */ :root, html[data-cobalt-theme]{ --dl-success-border-start: color-mix(in srgb, var(--cst-action, #d9772e) 60%, transparent) !important; --dl-success-border-end: color-mix(in srgb, var(--cst-action, #d9772e) 24%, transparent) !important; --dl-success-badge-glow: var(--cst-action, #d9772e) !important; --dl-success-surface-soft: color-mix(in srgb, var(--cst-action, #d9772e) 10%, transparent) !important; --dl-success-surface-strong: color-mix(in srgb, var(--cst-action, #d9772e) 45%, transparent) !important; } /* ============================================================================ 9. HARDCODED-COLOUR SWEEP — hover / active / glow that never re-themed ---------------------------------------------------------------------------- Audit v4 (2026-07-21). Pattern found across many chunks: the RESTING state of a control is themed (`var(--cst-action, #3680be)`) but its :hover/:active/ glow HARD-CODES the old cobalt brand-blue (#2c76b4 / #4190d4 / #3680be / …), so every button "jumps to blue" on hover regardless of the active theme (verified: arena=warm-red rest -> blue hover). We repoint these state colours at the per-theme action token so hover/active follow the palette. Scoped `html[data-cobalt-theme] …` to out-specify the [data-v-*] component scope (and any upstream !important); values driven off --cst-* so ALL 19 themes adapt from one rule. Semantic data colours (win/loss, rarity, success-green claim buttons, gold win-glows) are deliberately NOT here. ============================================================================ */ /* 9a. WEEKLY CRATES (deposit ladder) active-tier highlight ------------------- The active card's glow halo (was --ds-color-status-success green), frame gradient + surface tint (was olive/#74a33f via component-scoped --dl-success-* which a :root redefinition can't reach — inheritance loses to the element's own decl) all read GREEN/COOL on warm themes. Drive the ACTIVE-TIER accent off --cst-action so the "you are here" highlight matches each theme (arena red, emerald green, midnight blue). The completed ✓ check badge and completed progress dots stay success-green (universal "obtained"). */ html[data-cobalt-theme] .deposit-ladder-case__glow{ background: var(--cst-action) !important; } html[data-cobalt-theme] .deposit-ladder-case--active .deposit-ladder-case__card{ background: linear-gradient(180deg, color-mix(in srgb, var(--cst-action) 60%, transparent) 0%, color-mix(in srgb, var(--cst-action) 24%, transparent) 100%) !important; } html[data-cobalt-theme] .deposit-ladder-case--active .deposit-ladder-case__card::after{ background: linear-gradient(180deg, color-mix(in srgb, var(--cst-action) 10%, transparent), color-mix(in srgb, var(--cst-action) 45%, transparent)), var(--ds-color-bg-surface-2) !important; } /* 9b. Deposit-ladder progress bar carried a hard-coded cyan stop (#00ffb7 at 26%) between four themed stops — a fixed teal band that reads BLUE on warm themes. Rebuild the fill from all-themed tokens (cool action -> themed win teal -> warm), so the spectrum tracks the palette. */ html[data-cobalt-theme] .deposit-ladder-progress__bar-fill{ background: linear-gradient(90deg, var(--ds-accent-bright-blue) 0%, var(--ds-status-win) 26%, var(--ds-accent-yellow) 52%, var(--ds-accent-orange) 76%, var(--ds-accent-red-orange) 100%) !important; } /* 9c. Primary CTA :hover that hard-code brand-blue (base is themed action) --- */ html[data-cobalt-theme] .bonus-modal-shared__action:hover:not(:disabled), html[data-cobalt-theme] .footer-sticky-shared__action:hover:not(:disabled), html[data-cobalt-theme] .widget-wallet-crate-bonus__action:hover:not(:disabled), html[data-cobalt-theme] .crate-bonus-shared__action:hover:not(:disabled), html[data-cobalt-theme] .wallet-card__action:hover, html[data-cobalt-theme] .wallet-card__action:focus-visible, html[data-cobalt-theme] .easter-calendar__deposit-gate-btn:hover, html[data-cobalt-theme] .upgrader-animation-viewport__button:hover:not(:disabled), html[data-cobalt-theme] .pwa-ios-modal__continue:hover, html[data-cobalt-theme] .pwa-manual-modal__close-button:hover, html[data-cobalt-theme] .profile-settings__save-button:hover, html[data-cobalt-theme] .case-count button:hover{ background: var(--cst-action-hover) !important; } /* Airdrop "create" CTA hover: blue gradient -> themed action gradient */ html[data-cobalt-theme] .create-btn:hover:not(:disabled){ background: linear-gradient(135deg, var(--cst-action-hover) 0%, var(--cst-action-pressed) 100%) !important; } /* Crate-battle player card :hover tinted brand-blue while its --active state already used --cst-action-rgb — align hover to the theme action tint. */ html[data-cobalt-theme] .crate-create__player-card:hover:not(:disabled){ background: rgb(var(--cst-action-rgb) / 10%) !important; } /* Crates welcome-tour popover nav button (upstream !important, brand-blue) */ html[data-cobalt-theme] .driver-popover.cobalt-welcome-tour-popover .driver-popover-next-btn:hover{ background: var(--cst-action-hover) !important; } html[data-cobalt-theme] .driver-popover.cobalt-welcome-tour-popover .driver-popover-next-btn:active{ background: var(--cst-action-pressed) !important; } /* 9d. Crate-opening AUTO-SPIN toggle: active/hover/icon hard-coded blue (#1e71ab / rgba(30,112,171,…) / rgb(153,217,255)) — themes never reached it. Repoint to the action token family. (The sibling fast-open toggle already uses the warm focus token, so it is left alone.) */ html[data-cobalt-theme] .cobalt-spin-btn.active, html[data-cobalt-theme] .cobalt-spin-btn.active:hover{ background: var(--cst-action) !important; } html[data-cobalt-theme] .cobalt-spin-btn:hover{ background: rgb(var(--cst-action-rgb) / 65%) !important; } html[data-cobalt-theme] .cobalt-spin-btn.active .app-icon, html[data-cobalt-theme] .cobalt-spin-btn:hover .app-icon{ color: var(--cst-focus) !important; fill: var(--cst-focus) !important; } html[data-cobalt-theme] .cobalt-spin-history{ border-top-color: var(--cst-action) !important; border-bottom-color: var(--cst-action) !important; } /* 9e. Bonus/reward CTA :hover hard-coded amber (#f7aa4d) while base = themed --cst-warning. Keep the WARNING semantic but make the hover follow theme. */ html[data-cobalt-theme] .widget-users-crate-bonus__action:hover:not(:disabled), html[data-cobalt-theme] .bonus-hunter-widget__primary:hover:not(:disabled), html[data-cobalt-theme] .operator-vault-crate-widget__primary:hover{ background: color-mix(in srgb, var(--cst-warning) 80%, #ffffff 20%) !important; } /* 9f. Tailwind arbitrary brand-blue hover/active utilities (base elements are the primary-action family). One rule per compiled class -> themed action. */ html[data-cobalt-theme] .hover\:bg-\[\#2C76B4\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#3d8dce\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#357abd\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#3680bee6\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#2a75ef\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#5A91E9\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#6E9AF1\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#5a8eff\]:hover, html[data-cobalt-theme] .hover\:bg-\[\#34566f\]:hover{ background-color: var(--cst-action-hover) !important; } html[data-cobalt-theme] .active\:bg-\[\#2d70a7\]:active, html[data-cobalt-theme] .active\:bg-\[\#2d70a799\]:active, html[data-cobalt-theme] .active\:bg-\[\#226CAA\]:active{ background-color: var(--cst-action-pressed) !important; } html[data-cobalt-theme] .hover\:text-\[\#b9ebff\]:hover{ color: var(--cst-focus) !important; } /* 9g. Misc "--active" / focus accents hard-coded lime/olive that ignored theme ---------------------------------------------------------------------------- - Deposit-marathon current-STEP dot was fixed bright lime (#c8ee0b). - Daily-bonus streak focus rings were lime / olive literals. - Referral levels "current tier" row wash was a fixed green. All are "you-are-here" UI accents (not data semantics) -> drive off theme. */ html[data-cobalt-theme] .deposit-marathon-aside__progress-item--active{ background: var(--cst-action) !important; } html[data-cobalt-theme] .daily-bonus-streak-item--claim:focus-visible, html[data-cobalt-theme] .daily-bonus-streak-item--last-claim-cta:focus-visible{ outline-color: var(--cst-focus) !important; } html[data-cobalt-theme] .levels-table__row--active{ background: linear-gradient(-90deg, rgb(var(--cst-action-rgb) / 10%) 0%, rgb(var(--cst-action-rgb) / 0) 100%), var(--ds-color-bg-surface-2, var(--cst-bg-surface-3, #2c3243)) !important; } /* ============================================================================ 9h. FINAL hover/focus sweep across all 28 themes [audit v5, 2026-07-21] ---------------------------------------------------------------------------- theme-switcher.js already re-maps bare hex/rgb hovers by hue at runtime, but a few brand-blue controls whose RESTING state is an explicit --cst-action token still hard-code their hover/border shade. Pin them to the exact action/focus token for a deterministic, per-theme hover (matches §9c-§9g). Verified clean & intentionally NOT touched: - cobalt-themes.css hover/focus/active rules (all already tokenised, and that sheet is skipped by the hue-engine — so it had to be right, and is); - the floating theme-picker toggle/option (token hover + :active nudge + --cst-focus ring + 140-160ms transitions); - semantic danger-red (#ff543a*) and success/accent-green (#2fb04d / #96c44a / #739539) states — these stay red/green by meaning and the engine shades them per-theme. ---------------------------------------------------------------------------- */ /* LevelUp hero/lottery test buttons: base = var(--cst-action,#467edf) but hover hard-codes #5a8ef0 (blue). Pin hover to the action-hover token; the existing translateY micro-interaction is preserved (only background is overridden). */ html[data-cobalt-theme] .easter-lottery-test-buttons__btn:hover, html[data-cobalt-theme] .hero-animation-test-buttons .test-btn:hover{ background: var(--cst-action-hover) !important; } /* Brand-blue hover BORDER + light focus-wash utilities missed by §9f (which only covered solid-bg utilities). rgba(54,128,189)=#3680bd action-base; rgba(151,224,255)=#97e0ff focus. Route each to the matching theme token. */ html[data-cobalt-theme] .hover\:border-\[rgba\(54\,128\,189\,0\.65\)\]:hover{ border-color: color-mix(in srgb, var(--cst-action) 65%, transparent) !important; } html[data-cobalt-theme] .hover\:border-\[rgba\(151\,224\,255\,0\.1\)\]:hover{ border-color: rgb(var(--cst-focus-rgb) / 10%) !important; } html[data-cobalt-theme] .hover\:bg-\[rgba\(151\,224\,255\,0\.1\)\]:hover{ background-color: rgb(var(--cst-focus-rgb) / 10%) !important; } /* ============================================================================ 9i. crate-card hover backgrounds — hardcoded cobalt rgba(54,128,189) that the theme-engine does NOT hue-transform (rgba w/ alpha in bg). Retint to accent. ============================================================================ */ .case-item:hover .case-item--price-wrapper { background-color: color-mix(in srgb, var(--cst-action) 10%, transparent) !important; } .crate-create__player-card:hover:not(:disabled) { background: color-mix(in srgb, var(--cst-action) 10%, transparent) !important; } .crate-create__case-card--chosen, .crate-create__case-card--fallback { background: color-mix(in srgb, var(--cst-action) 15%, transparent) !important; } /* 9i-b. THE crate-card hover overlay gradient — hard-coded cobalt blue stops (rgba(54,128,189)) in border-image + background. Retint to theme accent. */ .case-item--hover-overlay { border-image-source: linear-gradient(180deg, rgba(34, 45, 64, 0.5) 0%, rgb(var(--cst-action-rgb) / 0.5) 100%) !important; background: linear-gradient(180deg, rgba(32, 37, 51, 0.2) 0%, rgb(var(--cst-action-rgb) / 0.2) 100%), linear-gradient(0deg, var(--cst-bg-surface-1, #202533), var(--cst-bg-surface-1, #202533)) !important; } /* 9j. Rewards dropdown rows — no hover feedback at all. Add subtle themed hover bg. */ .rewards-window__list > li { border-radius: 8px; transition: background-color 0.16s ease; } .rewards-window__list > li:hover { background-color: color-mix(in srgb, var(--cst-action) 9%, transparent); } /* 9k. Rewards dropdown PANEL had NO background (transparent) — page content bled through. Give it a solid themed surface + border + shadow. */ .rewards-window { background: var(--cst-bg-surface-1, #202533) !important; border: 1px solid color-mix(in srgb, var(--cst-action) 16%, var(--cst-bg-raised, #2c3243)) !important; border-radius: 12px !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important; } /* ============================================================================ 10. BUTTONS → 8px corner radius [task A: unify ALL buttons to 8px, 2026-07-22] ---------------------------------------------------------------------------- Brief: every rectangular / pill button (CTAs, tabs, quick-bet, modal & dropdown actions) gets an 8px radius. Deliberately KEPT round: circular icon buttons (avatar, close-X, 50% / rounded-full icon discs), toggles, switches, radios. Audit of every compiled sheet confirmed the ONLY elements whose class contains "btn"/"button" AND are circular are two loading SPINNERS (…__btn-spinner / …__button-spinner); every real round icon button uses a component-specific name with NO btn/button substring, so the class-substring sweep below is safe once the spinners are excluded. Loaded last + !important to beat the [data-v-*] component scopes and any code-split chunk. */ /* 10a. Design-system AppButton (base radius 0.125rem/2px) + every size/theme variant → 8px. One rule covers all primary/secondary/success CTAs site-wide, including the rewards-dropdown CLAIM / OPEN actions. */ .cl-button { border-radius: 8px !important; } /* 10b. Class-substring sweep for the ad-hoc per-page button systems (.btn*, .*button*). Excludes the round loading spinners only. */ [class*="btn"]:not([class*="spinner"]), [class*="button"]:not([class*="spinner"]) { border-radius: 8px !important; } /* 10c. Tactile press feedback on the DS button (skill: scale-on-press 0.96). Property-specific transition so it stays interruptible; excludes disabled. */ .cl-button:not(:disabled):active { transform: scale(0.96); } .cl-button { transition: filter 0.3s, transform 0.14s cubic-bezier(0.2, 0, 0, 1) !important; } /* ============================================================================ 11. REWARDS DROPDOWN — premium polish [task B, 2026-07-22] ---------------------------------------------------------------------------- Component scope [data-v-7eac3269]. Builds on §9j (row hover) + §9k (panel surface). Applies: concentric radii (panel 12 → rows 8 → tiles 8 → buttons 8), layered shadow over hard border, consistent left icon tiles, tabular numerals on live currency figures, and 140–160ms interruptible micro- interactions in the theme accent (--cst-action). Colours are token-driven so all 28 themes adapt; the CLAIM/OPEN buttons keep their success-green semantic. ============================================================================ */ /* 11a. Panel: layered depth (shadow over border), crisper text, keep 12px. */ .rewards-window { background: var(--cst-bg-surface-1, #202533) !important; border: 1px solid color-mix(in srgb, var(--cst-action) 14%, var(--cst-bg-raised, #2c3243)) !important; border-radius: 12px !important; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.03) inset, 0 18px 44px -12px rgba(0, 0, 0, 0.62), 0 6px 16px -8px rgba(0, 0, 0, 0.5) !important; -webkit-font-smoothing: antialiased; } /* 11b. Header row ("REWARDS" + "Show all") — settle the vertical rhythm and trim the heavy default bottom padding so the divider hugs the title block. */ .rewards-window > .flex.items-center.justify-between { padding: 12px 14px 10px !important; } .rewards-window > .flex.items-center.justify-between > .text-white { letter-spacing: 1.1px !important; } /* 11c. Divider under the header — soften to a themed hairline. */ .rewards-window .divider { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cst-action) 22%, var(--cst-bg-raised, #2c3243)) 12%, color-mix(in srgb, var(--cst-action) 22%, var(--cst-bg-raised, #2c3243)) 88%, transparent 100%) !important; margin: 2px 10px 4px !important; height: 1px !important; } /* 11d. Rows — tighter, even rhythm; rounded 8px hover wash in theme accent with an interruptible 150ms transition (supersedes §9j). */ .rewards-window__list { gap: 2px !important; } .rewards-window__list > li { border-radius: 8px !important; padding: 8px 10px !important; min-height: 52px !important; transition: background-color 0.15s cubic-bezier(0.2, 0, 0, 1) !important; } .rewards-window__list > li:hover { background-color: color-mix(in srgb, var(--cst-action) 11%, transparent) !important; } /* 11e. Left icon tiles — one consistent 32px tile for img / level-box / empty slot: subtle raised surface, hairline outline, 8px radius (rectangular tile, not a circular icon → 8px per §10). Images get the skill's 1px white-10% outline for edge definition. */ .rewards-window__reward-link > img, .rewards-window__reward-link > .rewards-window__list--lvl, .rewards-window__reward-link > div:first-child { border-radius: 8px !important; background: color-mix(in srgb, var(--cst-bg-surface-2, #2a3040) 82%, transparent) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } .rewards-window__reward-link > img { object-fit: cover !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important; background: color-mix(in srgb, var(--cst-bg-surface-2, #2a3040) 60%, transparent) !important; } /* 11f. Reward name / subtitle — steady rhythm + tabular numerals so the live currency figures (Pending 66.12, Available 0.03, …) never shift width. */ .rewards-window__reward-link { gap: 12px !important; } .rewards-window__reward-link .flex.flex-col { gap: 2px !important; } .rewards-window__reward-link span { font-variant-numeric: tabular-nums; } /* 11g. CLAIM / OPEN action buttons — keep success-green semantic but make it solid & legible, 8px (via §10a), interruptible 150ms hover, press scale. */ .rewards-window__action-btn { background: rgba(135, 181, 54, 0.85) !important; color: #f2ffd8 !important; letter-spacing: 0.9px !important; transition: filter 0.15s ease, transform 0.14s cubic-bezier(0.2, 0, 0, 1) !important; } .rewards-window__action-btn:hover:not(:disabled) { filter: brightness(1.1) !important; } .rewards-window__action-btn:not(:disabled):active { transform: scale(0.96); } .rewards-window__action-btn span { font-variant-numeric: tabular-nums; } /* 11h. Bottom full-width "CLAIM REWARD" button (.vip-gift-btn) — solidify to a proper themed primary: full-opacity action bg, high-contrast label, 8px (via §10b), hover lift + press scale, interruptible transitions. */ .vip-gift-btn { background: var(--cst-action) !important; color: var(--cst-text-on-action, #0b0b0d) !important; margin-top: 8px !important; transition: background-color 0.15s ease, filter 0.15s ease, transform 0.14s cubic-bezier(0.2, 0, 0, 1) !important; } .vip-gift-btn:hover { background: var(--cst-action-hover) !important; filter: none !important; } .vip-gift-btn:active { transform: scale(0.98); } .vip-gift-btn .vip-gift-btn__text, .vip-gift-btn__icon { color: var(--cst-text-on-action, #0b0b0d) !important; fill: var(--cst-text-on-action, #0b0b0d) !important; }