diff --git a/app/redesign-calculator.tsx b/app/redesign-calculator.tsx index 1ef8ddecb..b318f1b44 100644 --- a/app/redesign-calculator.tsx +++ b/app/redesign-calculator.tsx @@ -1,10 +1,11 @@ "use client" import Link from "next/link" +import DashboardTiers from "@/components/arcade/dashboard-tiers" import GuestDashboard from "@/components/arcade/guest-dashboard" import PreviewModeToolbar from "@/components/arcade/preview-mode-toolbar" import { readStoredDashboard, type DashboardViewMode } from "@/components/arcade/dashboard-state" -import { SlotChangeBadge, TierSlotHistoryPanel, useTierSlotHistory } from "@/components/arcade/tier-slot-history" +import { useTierSlotHistory } from "@/components/arcade/tier-slot-history" import { getWebsiteLocale, getWebsiteLocaleFromPathname, @@ -731,9 +732,9 @@ export default function RedesignCalculator({ {activeHistoryLanguage.catalog.messages.halloweenEdition} -

{viewMode === "guest" ? activeHistoryLanguage.catalog.messages.guestHeroTop : heroCopy?.top ?? "CHECK YOUR"}
{viewMode === "guest" ? activeHistoryLanguage.catalog.messages.guestHeroBottom : heroCopy?.bottom ?? "ARCADE SCORE"}

+

{heroCopy?.top ?? activeHistoryLanguage.catalog.messages.heroTitleTop}
{heroCopy?.bottom ?? activeHistoryLanguage.catalog.messages.heroTitleBottom}

- {viewMode === "guest" ? activeHistoryLanguage.catalog.messages.guestHeroDescription : heroCopy?.description ?? "Analyze your public profile, inspect earned badges and check which 2026 reward tier your score qualifies for."} + {heroCopy?.description ?? activeHistoryLanguage.catalog.messages.heroDescription}

Public profile data only @@ -781,7 +782,7 @@ export default function RedesignCalculator({ {/* Stable portal anchor: keeps countdown placement identical for every locale. */}
- {showProfileDashboard && extensionStrip} + {extensionStrip} @@ -968,49 +969,14 @@ export default function RedesignCalculator({ )} - +
@@ -1089,7 +1055,6 @@ export default function RedesignCalculator({ )} - {!showProfileDashboard && extensionStrip} {footerContent} diff --git a/app/styles/guest-discovery.css b/app/styles/guest-discovery.css index 922a3a083..8bf32c18a 100644 --- a/app/styles/guest-discovery.css +++ b/app/styles/guest-discovery.css @@ -1,102 +1,39 @@ -/* Guest discovery: public labs first, rewards beside them. Profile layout is separate. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-hero { - grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); - gap: 36px; - padding: 28px 0 22px; -} -.arcade-dashboard-v2[data-dashboard-view="guest"] .hero-heading h1 { - margin: 16px 0 12px; - max-width: 100%; - font-size: clamp(1.7rem, 2.6vw, 2.6rem); - line-height: 1.45; - overflow-wrap: anywhere; -} -.arcade-dashboard-v2[data-dashboard-view="guest"] .hero-description { - max-width: 540px; - font-size: 0.86rem; - line-height: 1.65; -} -.arcade-dashboard-v2[data-dashboard-view="guest"] .pixel-kicker { - max-width: 100%; - border: 0; - padding: 0; - background: transparent; - font-size: 0.66rem; - flex-wrap: wrap; +/* Public tiers retain the shared Profile component in a compact overview. */ +.guest-dashboard > .tier-list-panel { margin-bottom: 24px; } +.guest-dashboard .tier-list { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .trust-pills { margin-top: 14px; gap: 8px; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-analyzer-card { padding: 20px; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-input { min-height: 48px; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .analyze-button { min-height: 44px; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .analyzer-help-row { margin-top: 12px; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .fresh-score-cache-note { display: none; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-host { margin-bottom: 18px; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-card { padding: 12px 14px; min-height: 0; } - -.guest-discovery-grid { +.guest-dashboard .tier-list-row { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); - align-items: start; - gap: 20px; - width: min(var(--v2-shell, 1200px), calc(100% - 48px)); - margin: 0 auto 24px; + grid-template-columns: 32px minmax(0, 1fr); + align-items: center; + gap: 10px; + padding: 14px; + min-width: 0; +} +.guest-dashboard .tier-list-icon { width: 32px; height: 32px; min-width: 32px; } +.guest-dashboard .tier-list-row > div:nth-child(2) { min-width: 0; } +.guest-dashboard .tier-list-row > div:nth-child(2) strong { + white-space: normal; + overflow: visible; + text-overflow: clip; + overflow-wrap: anywhere; } -.guest-discovery-grid > * { min-width: 0; } -.guest-discovery-grid .guest-labs-host { width: 100%; margin: 0; } -.guest-discovery-grid .monthly-games-panel { margin: 0; padding: 18px; } -.guest-discovery-grid .monthly-games-heading { align-items: start; gap: 12px; margin-bottom: 16px; } -.guest-discovery-grid .monthly-games-heading h2 { font-size: 1.2rem; } -.guest-discovery-grid .monthly-progress-summary { flex: 0 0 auto; width: auto; min-width: 64px; padding: 8px 10px; display: grid; grid-template-columns: 1fr; text-align: center; } -.guest-discovery-grid .monthly-progress-summary strong { font-size: 1.15rem; } -.guest-discovery-grid .monthly-games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } -.guest-discovery-grid .monthly-game-art { height: 116px; min-height: 0; } -.guest-discovery-grid .monthly-game-art-image { max-height: 98px !important; max-width: 70% !important; } -.guest-discovery-grid .monthly-game-body { padding: 12px; gap: 10px; } -.guest-discovery-grid .monthly-game-body h3 { font-size: 0.8rem; line-height: 1.5; } -.guest-discovery-grid .monthly-game-description { -webkit-line-clamp: 2; font-size: 0.7rem; } -.guest-discovery-grid .monthly-access-row { grid-template-columns: minmax(0, 1fr) auto; } -.guest-discovery-grid .monthly-game-facts { flex-wrap: wrap; } -.guest-discovery-grid .monthly-games-coming-soon { min-height: 180px; } -.guest-discovery-grid .shared-tier-panel { padding: 18px; } -.guest-discovery-grid .guest-tier-card { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 10px 8px; } -.guest-discovery-grid .guest-tier-icon { width: 30px; height: 30px; } -.guest-discovery-grid .guest-tier-progress { display: none; } -.guest-discovery-grid .guest-tier-availability { min-width: 0; } -.guest-discovery-grid .guest-tier-availability small { font-size: 0.6rem; } -.guest-discovery-grid .tier-note { font-size: 0.67rem; line-height: 1.55; } -.guest-discovery-grid .swag-drops-preview > a { grid-template-columns: 72px minmax(0, 1fr); } -.guest-discovery-grid .swag-drops-preview > a > div:first-child { min-height: 90px; padding: 8px; } -.guest-discovery-grid .swag-drops-preview img { height: 68px; } -.guest-discovery-grid .swag-drops-preview strong { white-space: normal; font-size: 0.8rem; } -.arcade-dashboard-v2[data-dashboard-view="guest"] .extension-strip { margin-bottom: 24px; } - -@media (max-width: 1000px) { - .guest-discovery-grid { grid-template-columns: minmax(0, 1fr); } - .guest-discovery-grid .empty-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .guest-discovery-grid .swag-drops-preview > a { grid-template-columns: 90px minmax(0, 1fr); } +.guest-dashboard .tier-slot-count { + grid-column: 1 / -1; + text-align: start; + padding-top: 10px; + border-top: 1px solid var(--arcade-border-soft); } -@media (max-width: 720px) { - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 0 18px; } - .arcade-dashboard-v2[data-dashboard-view="guest"] .hero-heading h1 { font-size: clamp(1.55rem, 6vw, 2.2rem); line-height: 1.4; } - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-analyzer-card { padding: 16px; } - .guest-discovery-grid { width: calc(100% - 32px); gap: 16px; } - .guest-discovery-grid .monthly-games-panel, .guest-discovery-grid .shared-tier-panel { padding: 14px; } +.guest-dashboard .tier-slot-count b { font-size: 1.25rem; } +@media (max-width: 1100px) { + .guest-dashboard .tier-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 560px) { - .guest-discovery-grid .monthly-games-grid, .guest-discovery-grid .empty-tier-grid { grid-template-columns: minmax(0, 1fr); } - .guest-discovery-grid .monthly-game-card { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: start; } - .guest-discovery-grid .monthly-game-art { height: 108px; border: 0; border-radius: 10px; margin: 12px 0 0 10px; } - .guest-discovery-grid .monthly-game-art-image { max-width: 90% !important; max-height: 92px !important; } - .guest-discovery-grid .monthly-game-description { display: none; } - .guest-discovery-grid .monthly-game-body { padding: 12px 10px; } - .guest-discovery-grid .monthly-game-body h3 { margin: 0; } - .guest-discovery-grid .monthly-access-row { grid-template-columns: minmax(0, 1fr) 34px; } - .guest-discovery-grid .monthly-copy-button { min-width: 34px; padding: 7px; } - .guest-discovery-grid .monthly-copy-button > span { display: none; } - .guest-discovery-grid .monthly-game-facts { font-size: 0.6rem; } - .guest-discovery-grid .monthly-game-deadline { flex-wrap: wrap; gap: 4px; } +@media (max-width: 600px) { + .guest-dashboard .tier-list { grid-template-columns: 1fr; gap: 8px; } + .guest-dashboard .tier-list-row { grid-template-columns: 32px minmax(0, 1fr) minmax(72px, auto); padding: 12px; } + .guest-dashboard .tier-slot-count { grid-column: auto; padding: 0; border: 0; text-align: end; } + .guest-dashboard .tier-slot-count b { font-size: 1rem; } } - -.arcade-dashboard-v2[data-dashboard-view="guest"] [data-fresh-score-note] { display: none; } -.monthly-games-load-error { display: grid; gap: 12px; min-height: 180px; align-content: center; color: var(--arcade-muted); } -.monthly-games-load-error button { justify-self: start; padding: 9px 14px; border: 1px solid var(--arcade-border); border-radius: 8px; background: var(--arcade-panel-soft); color: var(--arcade-text); cursor: pointer; } diff --git a/app/styles/home-refactor.css b/app/styles/home-refactor.css index d25956f3e..eadc003c1 100644 --- a/app/styles/home-refactor.css +++ b/app/styles/home-refactor.css @@ -1,179 +1,4 @@ -/* Home dashboard visual refactor (v2). - * The established profile dashboard keeps the legacy visual system. - * V2 surface/layout overrides are intentionally scoped to guest mode; preview controls - * remain shared so PR-only Guest/Profile switching stays usable. - */ - -.arcade-dashboard-v2[data-dashboard-view="guest"] { - --v2-shell: 1200px; - --v2-gutter: 24px; - --v2-radius-lg: 20px; - --v2-radius-md: 16px; - --v2-radius-sm: 12px; - --v2-surface: rgba(9, 17, 36, 0.78); - --v2-surface-strong: rgba(10, 19, 40, 0.94); - --v2-surface-soft: rgba(15, 27, 52, 0.62); - --v2-border: rgba(148, 163, 184, 0.14); - --v2-border-strong: rgba(139, 92, 246, 0.28); - --v2-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); - --v2-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.10); - background: - radial-gradient(circle at 82% 5%, rgba(99, 102, 241, 0.16), transparent 31rem), - radial-gradient(circle at 12% 24%, rgba(14, 165, 233, 0.11), transparent 29rem), - linear-gradient(180deg, #050918 0%, #071126 48%, #050918 100%); -} - -html.light .arcade-dashboard-v2[data-dashboard-view="guest"] { - --v2-surface: rgba(255, 255, 255, 0.82); - --v2-surface-strong: rgba(255, 255, 255, 0.96); - --v2-surface-soft: rgba(248, 250, 252, 0.82); - --v2-border: rgba(100, 116, 139, 0.15); - --v2-border-strong: rgba(79, 70, 229, 0.20); - --v2-shadow: 0 22px 58px rgba(51, 65, 85, 0.11); - --v2-shadow-soft: 0 10px 30px rgba(51, 65, 85, 0.08); - background: - radial-gradient(circle at 82% 5%, rgba(99, 102, 241, 0.11), transparent 31rem), - radial-gradient(circle at 12% 24%, rgba(14, 165, 233, 0.08), transparent 29rem), - linear-gradient(180deg, #f8faff 0%, #eef3ff 48%, #f8faff 100%); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-header, -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-hero, -.arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-host, -.arcade-dashboard-v2[data-dashboard-view="guest"] .extension-strip, -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-shell, -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-empty-state, -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-footer { - width: min(var(--v2-shell), calc(100% - (var(--v2-gutter) * 2))); -} - -/* Header: compact floating workspace bar instead of a full-width divider. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-header { - top: 10px; - min-height: 64px; - margin-top: 10px; - padding: 0 12px 0 14px; - border: 1px solid var(--v2-border); - border-radius: var(--v2-radius-md); - background: var(--v2-surface-strong); - box-shadow: var(--v2-shadow-soft); - backdrop-filter: blur(20px) saturate(130%); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-brand-mark { - width: 36px; - height: 36px; - border-radius: 11px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-brand-copy { - font-size: 0.68rem; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-brand em { - padding: 4px 6px; - border-radius: 6px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-nav { - gap: 2px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-nav a { - padding: 20px 11px 18px; - border-radius: 9px; - font-size: 0.8rem; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-nav a::after { - left: 11px; - right: 11px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-header-actions { - gap: 7px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .header-store-link { - min-height: 38px; - border-radius: 10px; -} - -/* Hero: clearer hierarchy and a stronger analyzer focal point. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-hero { - grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); - gap: clamp(32px, 5vw, 72px); - align-items: center; - padding: clamp(54px, 7vw, 86px) 0 38px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .hero-heading { - max-width: 690px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .pixel-kicker { - width: fit-content; - padding: 7px 10px; - border: 1px solid rgba(34, 211, 238, 0.17); - border-radius: 999px; - background: rgba(8, 145, 178, 0.06); -} - -html.light .arcade-dashboard-v2[data-dashboard-view="guest"] .pixel-kicker { - border-color: rgba(2, 132, 199, 0.15); - background: rgba(224, 242, 254, 0.7); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .hero-heading h1 { - margin: 22px 0 18px; - max-width: 760px; - font-size: clamp(2.25rem, 4.4vw, 4.35rem); - line-height: 1.13; - letter-spacing: -0.055em; - text-wrap: balance; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .hero-description { - max-width: 610px; - font-size: 1rem; - line-height: 1.72; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .trust-pills { - gap: 8px; - margin-top: 22px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .trust-pills span { - min-height: 34px; - padding: 7px 11px; - border-radius: 999px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-analyzer-card { - position: relative; - padding: 28px; - overflow: hidden; - border-color: var(--v2-border-strong); - border-radius: var(--v2-radius-lg); - background: var(--v2-surface-strong); - box-shadow: var(--v2-shadow); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-analyzer-card::before { - content: ""; - position: absolute; - inset: 0 0 auto; - height: 2px; - background: linear-gradient(90deg, transparent, var(--arcade-purple), var(--arcade-cyan), transparent); - opacity: 0.85; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .analyzer-title { - margin-bottom: 18px; - font-size: 0.72rem; -} - +/* Shared preview controls. Guest and Profile use the same dashboard styles. */ .arcade-dashboard-v2 .dashboard-view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -231,248 +56,6 @@ html.light .arcade-dashboard-v2[data-dashboard-view="guest"] .pixel-kicker { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; } - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-analyzer-card form { - grid-template-columns: minmax(0, 1fr); - gap: 10px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-input { - min-height: 58px; - padding: 0 15px; - border-radius: var(--v2-radius-sm); - background: var(--v2-surface-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .analyze-button { - min-height: 50px; - border-radius: var(--v2-radius-sm); - box-shadow: 0 12px 28px rgba(124, 58, 237, 0.22); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .analyzer-help-row { - margin-top: 14px; -} - -/* Countdown uses the same desktop shell and card language as the rest of the workspace. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-host { - margin-bottom: 22px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-grid { - gap: 16px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-card { - border-color: var(--v2-border); - border-radius: var(--v2-radius-md); - background: - radial-gradient(circle at 10% 10%, var(--countdown-accent-soft), transparent 52%), - var(--v2-surface); - box-shadow: var(--v2-shadow-soft); -} - -html.light .arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-card { - background: - radial-gradient(circle at 10% 10%, var(--countdown-accent-soft), transparent 52%), - var(--v2-surface); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .program-countdown-part { - border-color: var(--v2-border); - background: var(--v2-surface-soft); -} - -/* Secondary browser CTA becomes part of the same visual system. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .extension-strip { - min-height: 70px; - margin-top: 4px; - margin-bottom: 22px; - padding: 13px 16px; - border-color: var(--v2-border); - border-radius: var(--v2-radius-md); - background: var(--v2-surface); - box-shadow: var(--v2-shadow-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .extension-store-mark { - width: 42px; - height: 42px; - border-radius: 12px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .extension-store-actions a { - min-height: 42px; - border-radius: 10px; -} - -/* Results: consistent rhythm, less empty height and stronger grouping. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-summary-grid, -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-content-grid, -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-bottom-grid { - gap: 16px; - margin-bottom: 16px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-summary-grid { - grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, 0.9fr); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-content-grid { - grid-template-columns: minmax(0, 1fr) 360px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-panel, -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-empty-state { - border-color: var(--v2-border); - border-radius: var(--v2-radius-md); - background: var(--v2-surface); - box-shadow: var(--v2-shadow-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-panel { - padding: 22px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-summary-grid > .dashboard-panel { - min-height: 0; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .panel-title { - font-size: 0.71rem; - letter-spacing: 0.055em; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-overview { - min-height: 0; - margin: 20px 0; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-photo { - width: 76px; - height: 76px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-stat-grid { - gap: 8px; - margin-top: auto; - padding-top: 16px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-stat-grid > div { - min-height: 82px; - padding: 10px 8px; - border: 1px solid var(--v2-border); - border-radius: var(--v2-radius-sm); - background: var(--v2-surface-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-stat-grid > div + div { - border-left: 1px solid var(--v2-border); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .points-total { - margin: 20px 0 16px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .points-total strong { - font-size: 2.45rem; - letter-spacing: -0.04em; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .point-composition-bar { - height: 14px; - margin-bottom: 14px; - border-radius: 999px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .point-breakdown-row { - min-height: 44px; - padding: 9px 0; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .tier-status-main { - margin: 20px 0 16px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .tier-availability-grid > div { - min-height: 82px; - border-color: var(--v2-border); - border-radius: var(--v2-radius-sm); - background: var(--v2-surface-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .badge-heading-row { - align-items: flex-start; - gap: 14px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .badge-filters { - gap: 6px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .badge-filters button { - min-height: 34px; - padding-inline: 12px; - border-radius: 999px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .earned-badge-grid { - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .earned-badge { - min-height: 0; - padding: 12px; - border-color: var(--v2-border); - border-radius: 14px; - background: var(--v2-surface-soft); - box-shadow: none; - transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .earned-badge:hover { - transform: translateY(-2px); - border-color: var(--v2-border-strong); - box-shadow: var(--v2-shadow-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .earned-badge-art { - border-radius: 11px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .tier-list { - gap: 7px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .tier-list-row { - min-height: 64px; - padding: 10px 11px; - border: 1px solid var(--v2-border); - border-radius: var(--v2-radius-sm); - background: var(--v2-surface-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .tier-list-row.is-current { - border-color: var(--v2-border-strong); - box-shadow: inset 3px 0 0 var(--arcade-purple); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-bottom-grid { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .compact-panel { - min-height: 0; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .goal-progress { - height: 9px; - border-radius: 999px; -} - -/* Preview modes sit below the header, leaving the page bottom unobstructed. */ .arcade-dashboard-v2 .preview-mode-toolbar { position: relative; z-index: 1; @@ -524,673 +107,16 @@ html.light .arcade-dashboard-v2 .preview-mode-toolbar { border-radius: 8px; font-size: 0.68rem; } - -/* Guest dashboard: compact, visual and intentionally separate from profile data. */ - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 2px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading > div { - display: flex; - align-items: center; - gap: 11px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading-icon { - display: grid; - place-items: center; - width: 36px; - height: 36px; - border: 1px solid rgba(192, 84, 255, 0.28); - border-radius: 11px; - background: rgba(124, 58, 237, 0.10); - color: #c054ff; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading-icon svg { - width: 18px; - height: 18px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading > div > div { - display: grid; - gap: 2px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading strong { - color: var(--arcade-text); - font-size: 0.88rem; - font-weight: 850; - letter-spacing: 0.025em; - text-transform: uppercase; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading span { - color: var(--arcade-muted); - font-size: 0.68rem; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .empty-tier-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card { - --tier-accent: #8b5cf6; - --tier-soft: rgba(139, 92, 246, 0.12); - --tier-border: rgba(139, 92, 246, 0.30); - position: relative; - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - align-items: center; - gap: 14px; - min-height: 108px; - padding: 14px 16px; - overflow: hidden; - border: 1px solid var(--v2-border); - border-radius: 12px; - background: var(--v2-surface-soft); - box-shadow: none; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .shared-tier-panel .empty-tier-grid { - grid-template-columns: minmax(0, 1fr); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.is-current { - border-color: var(--tier-accent); - background: linear-gradient(90deg, var(--tier-soft), transparent), var(--v2-surface-soft); - box-shadow: inset 3px 0 0 var(--tier-accent); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.is-current .guest-tier-icon { - border-color: var(--tier-accent); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-120 { - --tier-accent: #ffd43b; - --tier-soft: rgba(255, 212, 59, 0.09); - --tier-border: rgba(255, 212, 59, 0.28); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-95 { - --tier-accent: #c084fc; - --tier-soft: rgba(192, 132, 252, 0.10); - --tier-border: rgba(192, 132, 252, 0.30); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-75 { - --tier-accent: #3b82f6; - --tier-soft: rgba(59, 130, 246, 0.10); - --tier-border: rgba(59, 130, 246, 0.30); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-50 { - --tier-accent: #34d399; - --tier-soft: rgba(52, 211, 153, 0.10); - --tier-border: rgba(52, 211, 153, 0.28); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-icon { - display: grid; - place-items: center; - width: 52px; - height: 52px; - border: 1px solid var(--tier-border); - border-radius: 13px; - background: var(--tier-soft); - color: var(--tier-accent); - box-shadow: 0 0 24px var(--tier-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-icon svg { - width: 25px; - height: 25px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-main { - min-width: 0; - display: grid; - gap: 11px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-copy { - min-width: 0; - display: grid; - gap: 3px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-copy strong { - overflow: hidden; - color: var(--arcade-text); - font-size: 0.86rem; - font-weight: 850; - letter-spacing: 0.02em; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-copy span { - color: var(--arcade-muted); - font-size: 0.7rem; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-progress { - height: 7px; - overflow: hidden; - border-radius: 999px; - background: rgba(100, 116, 139, 0.17); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-progress > span { - display: block; - height: 100%; - border-radius: inherit; - background: var(--tier-accent); - box-shadow: 0 0 14px var(--tier-soft); -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability { - min-width: 112px; - display: grid; - justify-items: end; - gap: 4px; - padding-left: 14px; - border-left: 1px solid var(--v2-border); - text-align: right; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability > strong { - color: var(--arcade-text); - font-size: 0.9rem; - font-weight: 850; - font-variant-numeric: tabular-nums; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability > strong span { - color: var(--arcade-muted); - font-weight: 600; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability small { - color: var(--arcade-muted); - font-size: 0.62rem; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability .tier-slot-delta { - margin-top: 1px; - font-size: 0.58rem; -} - - -/* Shared tier renderer is used by both Guest and Profile modes. - * Keep these component styles global to v2 without reapplying the full profile redesign. */ -.arcade-dashboard-v2 .shared-tier-panel { - container-type: inline-size; -} -.arcade-dashboard-v2 .shared-tier-panel .empty-tier-grid { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 7px; -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-card { - --tier-accent: #8b5cf6; - --tier-soft: rgba(139, 92, 246, 0.12); - --tier-border: rgba(139, 92, 246, 0.30); - display: grid; - grid-template-columns: 38px minmax(0, 1fr) auto; - align-items: center; - gap: 9px; - min-height: 64px; - padding: 9px 10px; - overflow: hidden; - border: 1px solid var(--arcade-border-soft); - border-radius: 10px; - background: rgba(13, 25, 49, 0.72); -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-card.tier-120 { --tier-accent:#ffd43b; --tier-soft:rgba(255,212,59,.09); --tier-border:rgba(255,212,59,.28); } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-card.tier-95 { --tier-accent:#c084fc; --tier-soft:rgba(192,132,252,.10); --tier-border:rgba(192,132,252,.30); } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-card.tier-75 { --tier-accent:#3b82f6; --tier-soft:rgba(59,130,246,.10); --tier-border:rgba(59,130,246,.30); } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-card.tier-50 { --tier-accent:#34d399; --tier-soft:rgba(52,211,153,.10); --tier-border:rgba(52,211,153,.28); } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-card.is-current { - border-color: var(--tier-accent); - box-shadow: inset 3px 0 0 var(--tier-accent); -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-icon { - display:grid; place-items:center; width:36px; height:36px; - border:1px solid var(--tier-border); border-radius:9px; - background:var(--tier-soft); color:var(--tier-accent); -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-icon svg { width:17px; height:17px; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-main { min-width:0; display:grid; gap:5px; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-copy { min-width:0; display:grid; gap:1px; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-copy strong { - overflow:hidden; color:var(--arcade-text); font-size:.72rem; font-weight:850; - text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-copy span { color:var(--arcade-muted); font-size:.61rem; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-progress { - height:5px; overflow:hidden; border-radius:999px; background:rgba(100,116,139,.17); -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-progress > span { - display:block; height:100%; border-radius:inherit; background:var(--tier-accent); -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-availability { - min-width:72px; display:grid; justify-items:end; gap:2px; padding-left:7px; - border-left:1px solid var(--arcade-border-soft); text-align:right; -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-availability > strong { - color:var(--arcade-text); font-size:.72rem; font-weight:850; font-variant-numeric:tabular-nums; -} -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-availability > strong span { color:var(--arcade-muted); font-weight:600; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-availability small { color:var(--arcade-muted); font-size:.55rem; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-heading > div { display:flex; align-items:center; gap:8px; min-width:0; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-heading-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-heading strong { font-size:.78rem; } -.arcade-dashboard-v2 .shared-tier-panel .guest-tier-heading span { font-size:.6rem; white-space:nowrap; } - -/* Footer aligns with the workspace surfaces without competing with content. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-footer { - margin-top: 34px; - padding-top: 24px; - border-top-color: var(--v2-border); -} - -/* Tablet */ -@media (max-width: 1080px) { - .arcade-dashboard-v2[data-dashboard-view="guest"] { - --v2-gutter: 18px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-hero { - grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr); - gap: 28px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-summary-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .tier-status-panel { - grid-column: 1 / -1; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-content-grid { - grid-template-columns: minmax(0, 1fr) 300px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .earned-badge-grid { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } -} - -/* Mobile / small tablet */ -@media (max-width: 820px) { - .arcade-dashboard-v2[data-dashboard-view="guest"] { - --v2-gutter: 12px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-header { - top: 7px; - min-height: 58px; - margin-top: 7px; - padding-inline: 10px; - border-radius: 14px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-nav { - top: 64px; - left: 0; - right: 0; - padding: 8px; - border-radius: 14px; - background: var(--v2-surface-strong); - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-nav a { - padding: 12px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-hero { - grid-template-columns: 1fr; - gap: 26px; - padding: 42px 0 28px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .hero-heading { - max-width: 650px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-analyzer-card { - padding: 22px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-content-grid { - grid-template-columns: 1fr; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .tier-list-panel { - order: 0; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-bottom-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .next-goal-panel { - grid-column: 1 / -1; - } -} - -/* Phones */ @media (max-width: 600px) { - .arcade-dashboard-v2[data-dashboard-view="guest"] { - --v2-gutter: 8px; - padding-bottom: calc(70px + env(safe-area-inset-bottom)); - } .arcade-dashboard-v2:has(.preview-mode-toolbar) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-header { - width: calc(100% - 16px); - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-brand-mark { - width: 32px; - height: 32px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-brand-copy { - font-size: 0.58rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .arcade-hero { - padding-top: 34px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .pixel-kicker { - padding: 6px 8px; - font-size: 0.62rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .hero-heading h1 { - margin-top: 18px; - font-size: clamp(1.8rem, 9.2vw, 2.6rem); - line-height: 1.25; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .hero-description { - font-size: 0.88rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .trust-pills { - display: flex; - flex-direction: column; - align-items: flex-start; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .trust-pills span { - width: fit-content; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-analyzer-card { - padding: 16px; - border-radius: 16px; - } - .arcade-dashboard-v2 .preview-mode-toolbar { width: calc(100% - 32px); max-width: 360px; } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading { - margin-top: 0; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading-icon { - width: 32px; - height: 32px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading strong { - font-size: 0.8rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .empty-tier-grid { - grid-template-columns: 1fr; - gap: 8px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card { - grid-template-columns: 46px minmax(0, 1fr) auto; - gap: 11px; - min-height: 88px; - padding: 11px 12px; - border-radius: 14px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-icon { - width: 44px; - height: 44px; - border-radius: 11px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-icon svg { - width: 21px; - height: 21px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-main { - gap: 8px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-copy strong { - font-size: 0.85rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-copy span { - font-size: 0.70rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-progress { - height: 6px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability { - min-width: 94px; - gap: 2px; - padding-left: 10px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability > strong { - font-size: 0.85rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability small { - max-width: 88px; - font-size: 0.66rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-input { - min-height: 52px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .analyze-button { - min-height: 48px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .extension-strip { - grid-template-columns: auto 1fr; - padding: 12px; - border-radius: 14px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .extension-store-actions { - grid-column: 1 / -1; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-summary-grid, - .arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-bottom-grid { - grid-template-columns: 1fr; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .tier-status-panel, - .arcade-dashboard-v2[data-dashboard-view="guest"] .next-goal-panel { - grid-column: auto; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .dashboard-panel { - padding: 16px; - border-radius: 14px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-overview { - gap: 12px; - margin: 16px 0; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-photo { - width: 62px; - height: 62px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-stat-grid { - gap: 6px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-stat-grid > div { - min-height: 72px; - padding: 8px 5px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .profile-stat-icon { - width: 26px; - height: 26px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .points-total strong { - font-size: 2.05rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .point-breakdown-row { - grid-template-columns: minmax(0, 1fr) auto 45px; - gap: 7px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .earned-badge-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .mobile-bottom-nav { - left: 0; - right: 0; - bottom: 0; - min-height: 54px; - padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); - border: 0; - border-top: 1px solid var(--v2-border); - border-radius: 0; - background: var(--v2-surface-strong); - box-shadow: var(--v2-shadow); - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .mobile-bottom-nav a { - border-radius: 10px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .mobile-bottom-nav a:active { - background: rgba(139, 92, 246, 0.11); - } -} - -@media (max-width: 380px) { - .arcade-dashboard-v2[data-dashboard-view="guest"] .earned-badge-grid { - grid-template-columns: 1fr; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .header-store-link { - display: none; - } -} - -/* The same cards also fit the narrower desktop profile sidebar. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .shared-tier-panel { - container-type: inline-size; - display: flex; - flex-direction: column; - gap: 18px; - align-self: start; - scroll-margin-top: 96px; -} - -@container (max-width: 420px) { - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card { - grid-template-columns: 44px minmax(0, 1fr) auto; - gap: 8px; - min-height: 88px; - padding: 11px 12px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-icon { - width: 44px; - height: 44px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-copy strong { - font-size: 0.85rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-copy span { - font-size: 0.70rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability { - min-width: 94px; - padding-left: 8px; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability > strong { - font-size: 0.85rem; - } - - .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-availability small { - max-width: 88px; - font-size: 0.66rem; - } -} - -/* Consistent section rhythm, without extra boxes around supporting copy. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .shared-tier-panel .guest-tier-heading { - margin: 0; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .shared-tier-panel .tier-note { - margin: 0; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - color: var(--arcade-muted); - font-size: 0.78rem; - line-height: 1.65; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .shared-tier-panel .tier-trends-trigger { - margin: 0; - box-shadow: none; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .shared-tier-panel .swag-drops-preview { - margin-top: 4px; } .arcade-dashboard-v2 #calculator, @@ -1199,31 +125,31 @@ html.light .arcade-dashboard-v2 .preview-mode-toolbar { scroll-margin-top: 96px; } -/* New tier surfaces use the Font Awesome adapter, not only SVG icons. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-icon .fa-icon { - font-size: 20px; -} - -.arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-heading-icon .fa-icon { - font-size: 17px; -} - .arcade-dashboard-v2 .preview-mode-toolbar .fa-icon { font-size: 14px; } -/* Tier accents remain readable on the light surfaces. */ -html.light .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-120 { --tier-accent: #a16207; } -html.light .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-95 { --tier-accent: #9333ea; } -html.light .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-75 { --tier-accent: #2563eb; } -html.light .arcade-dashboard-v2[data-dashboard-view="guest"] .guest-tier-card.tier-50 { --tier-accent: #059669; } - -/* Keep the attained rank readable in the compact profile summary. */ -.arcade-dashboard-v2[data-dashboard-view="guest"] .profile-stat-grid > div:last-child strong { - overflow: visible; - white-space: normal; - text-overflow: clip; +/* One balanced entry layout for both public and personal dashboards. */ +.arcade-dashboard-v2 .arcade-hero { + grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); + gap: 40px; + padding-block: 32px 24px; +} +.arcade-dashboard-v2 .hero-heading h1 { + margin-block: 14px; + font-family: Inter, system-ui, sans-serif; + font-size: clamp(2rem, 3.5vw, 3.25rem); + font-weight: 800; + line-height: 1.12; + letter-spacing: -0.04em; + text-shadow: none; overflow-wrap: anywhere; - font-size: 0.88rem; - line-height: 1.35; +} +.arcade-dashboard-v2 .hero-description { max-width: 52ch; line-height: 1.6; } +.arcade-dashboard-v2 .profile-analyzer-card { min-width: 0; } +@media (max-width: 900px) { + .arcade-dashboard-v2 .arcade-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; } +} +@media (max-width: 600px) { + .arcade-dashboard-v2 .hero-heading h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); } } diff --git a/components/arcade/dashboard-tiers.tsx b/components/arcade/dashboard-tiers.tsx index 8d171934d..8eb1207dc 100644 --- a/components/arcade/dashboard-tiers.tsx +++ b/components/arcade/dashboard-tiers.tsx @@ -21,55 +21,25 @@ export default function DashboardTiers({ const viewMessages = catalog.messages return (