/* ============================================================================ eventuals.ai — "Daylight" Bright, warm, modern & fun. A soft paper canvas (not stark white), playful color pops, tactile soft shadows, chunky rounded surfaces. Type: Bricolage Grotesque (display, characterful) + DM Sans (UI) + DM Mono (data). Green = Yes, coral-rose = No, sunshine amber = the fun accent. ========================================================================== */ :root { /* Paper canvas */ --page: #f6f5ef; --page-2: #efeee6; --surface: #ffffff; --surface-2: #fbfaf6; --raised: #ffffff; --track: #ecebe2; /* Hairlines */ --line: rgba(24, 26, 35, 0.09); --line-strong: rgba(24, 26, 35, 0.16); --line-glow: rgba(15, 185, 129, 0.40); /* Type colors */ --text: #16181f; --muted: #4f5566; --subtle: #7a8094; --faint: #a7accb; /* Signals */ --green: #0fb981; --green-strong: #0a9d6b; --green-deep: #067a52; --green-soft: rgba(15, 185, 129, 0.13); --rose: #f4476b; --rose-strong: #e11d48; --rose-soft: rgba(244, 71, 107, 0.12); --amber: #f8a823; --amber-strong: #ec8c00; --amber-soft: rgba(248, 168, 35, 0.16); --blue: #3b6ef5; /* Geometry — chunkier & friendlier */ --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; /* Soft tactile elevation */ --shadow-sm: 0 1px 2px rgba(24, 26, 35, 0.05), 0 4px 12px -6px rgba(24, 26, 35, 0.10); --shadow: 0 2px 4px rgba(24, 26, 35, 0.05), 0 18px 38px -14px rgba(24, 26, 35, 0.18); --shadow-lg: 0 30px 70px -22px rgba(24, 26, 35, 0.26); --shadow-green: 0 14px 34px -14px rgba(15, 185, 129, 0.45); --brand-grad: linear-gradient(135deg, #2ee0a3 0%, var(--green) 52%, var(--green-strong) 100%); /* Fonts */ --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, sans-serif; --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; } html, body { width: 100%; margin: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; scroll-padding-top: 132px; /* Clip horizontal overflow on the root so never becomes its own scroll container (which broke programmatic scrolling to in-page anchors). */ overflow-x: hidden; } /* Atmosphere: soft color blooms + a faint dot grid keep the page from reading as flat white, without losing brightness. */ body { position: relative; min-height: 100vh; background: radial-gradient(120% 80% at 88% -10%, rgba(15, 185, 129, 0.12), transparent 46%), radial-gradient(90% 70% at 6% 2%, rgba(248, 168, 35, 0.10), transparent 50%), radial-gradient(80% 90% at 50% 118%, rgba(59, 110, 245, 0.06), transparent 55%), var(--page); } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(24, 26, 35, 0.06) 1px, transparent 1px); background-size: 30px 30px; background-position: 0 0; mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.4) 52%, transparent 82%); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.4) 52%, transparent 82%); opacity: 0.7; } button, input { font: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--amber-soft); color: var(--text); } /* Scrollbar */ * { scrollbar-width: thin; scrollbar-color: #cfcdc1 transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #cfcdc1; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* ---------------------------------------------------------------- Header -- */ .global-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(246, 245, 239, 0.92), rgba(246, 245, 239, 0.74)); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); } .header-inner, .domain-inner, .page-shell { width: 100%; max-width: 1440px; margin: 0 auto; } .header-inner { display: grid; grid-template-columns: auto auto minmax(240px, 1fr) auto; align-items: center; gap: 22px; min-height: 74px; padding: 0 30px; } .brand, .primary-nav, .account-actions, .card-kicker, .featured-footer, .section-header, .sidebar-title, .domain-inner { display: flex; align-items: center; } .brand { gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--text); } .brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.55), transparent 55%), var(--brand-grad); color: #053524; font-family: var(--font-display); font-weight: 800; font-size: 21px; box-shadow: var(--shadow-green); transform: rotate(-4deg); } .primary-nav { gap: 22px; color: var(--muted); font-size: 13.5px; font-weight: 600; } .primary-nav a { position: relative; padding: 4px 0; transition: color 160ms ease; } .primary-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2.5px; border-radius: 2px; background: var(--green); transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1); } .primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--text); } .primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { width: 100%; } .search-form input { width: 100%; height: 44px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); padding: 0 20px; font-size: 14px; outline: 0; box-shadow: var(--shadow-sm); transition: border-color 160ms ease, box-shadow 160ms ease; } .search-form input::placeholder { color: var(--faint); } .search-form input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(15, 185, 129, 0.16); } .account-actions { gap: 10px; } .button { height: 40px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); padding: 0 16px; font-size: 14px; font-weight: 700; } .button.primary { border-color: transparent; background: var(--brand-grad); color: #053524; } .button.ghost:hover { border-color: var(--text); } /* ----------------------------------------------------------- Domain bar -- */ .domain-bar { position: sticky; top: 74px; z-index: 25; border-bottom: 1px solid var(--line); background: rgba(246, 245, 239, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .domain-inner { gap: 4px; min-height: 54px; padding: 8px 24px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .domain-inner::-webkit-scrollbar { display: none; } .sports-menu { position: relative; display: flex; align-items: center; align-self: stretch; flex: 0 0 auto; } .sports-menu > [data-sports-trigger] { display: inline-flex; align-items: center; gap: 5px; height: 100%; } .sports-menu > [data-sports-trigger] span { color: var(--subtle); font-size: 9px; transition: transform 160ms ease; } .sports-menu > [data-sports-trigger][aria-expanded="true"] span { transform: rotate(180deg); } .sports-menu-panel[hidden] { display: none; } .sports-menu-panel { width: 100%; max-width: 1440px; margin: 0 auto; border-top: 1px solid var(--line); background: var(--surface); padding: 9px 30px; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; white-space: nowrap; } .sports-menu-panel > button { min-height: 32px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); padding: 0 13px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; } .sports-menu-panel > button:hover, .sports-menu-panel > button:focus-visible { background: var(--track); color: var(--text); outline: 0; } .sports-menu-panel > button.selected { border-color: var(--line-glow); background: var(--green-soft); color: var(--green-strong); } .domain-inner > button, .sports-menu > [data-sports-trigger] { border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); padding: 8px 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .domain-inner > button:hover, .sports-menu > [data-sports-trigger]:hover { color: var(--text); background: var(--track); } .domain-inner > button.active, .sports-menu > [data-sports-trigger].active { color: var(--green-strong); background: var(--green-soft); border-color: var(--line-glow); } .invessure-link { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; border-left: 1px solid var(--line-strong); color: var(--blue); padding-left: 18px; font-size: 13px; font-weight: 700; white-space: nowrap; } .invessure-link:hover, .invessure-link:focus-visible { color: var(--text); outline: 0; } .invessure-link span { font-size: 11px; } /* ----------------------------------------------------------------- Shell -- */ .page-shell { padding: 32px 30px 56px; } .dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 28px; align-items: start; } .main-column { min-width: 0; } .featured-card, .forecast-card, .sidebar-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* --------------------------------------------------------- Featured card -- */ .featured-card { display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 28px; padding: 34px; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: radial-gradient(130% 150% at 100% -10%, rgba(15, 185, 129, 0.12) 0%, transparent 44%), radial-gradient(90% 90% at -5% 0%, rgba(248, 168, 35, 0.10) 0%, transparent 46%), var(--surface); animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both; } .featured-copy { min-width: 0; } .card-kicker { justify-content: space-between; gap: 12px; margin-bottom: 18px; } .domain-tag, .live-model { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); padding: 0 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .live-model { border-color: var(--line-glow); background: var(--green-soft); color: var(--green-strong); } .domain-tag i { color: var(--amber-strong); font-size: 10px; font-style: normal; letter-spacing: 0.05em; } .live-model span { width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 7px var(--green); animation: pulse-dot 1.8s infinite; } .live-model.draw-lean { border-color: rgba(59, 110, 245, 0.4); background: rgba(59, 110, 245, 0.1); color: var(--blue); } .live-model.draw-lean span { background: var(--blue); box-shadow: 0 0 7px var(--blue); } @keyframes pulse-dot { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } .carousel-count { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); } .featured-card h1 { max-width: 840px; margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(33px, 4.3vw, 56px); line-height: 1.0; letter-spacing: -0.03em; color: var(--text); overflow-wrap: anywhere; } .featured-description { max-width: 720px; margin: 0 0 26px; color: var(--muted); font-size: 16px; line-height: 1.6; } .outcome-panel { display: grid; gap: 13px; max-width: 640px; } .outcome-row { display: grid; grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) 56px; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; font-weight: 600; } .outcome-row span, .breakdown-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Probability meters */ .probability-track { height: 12px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 2px rgba(24, 26, 35, 0.10); overflow: hidden; } .probability-track i { display: block; width: var(--value); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-strong), #2ee0a3); box-shadow: 0 1px 6px -1px rgba(15, 185, 129, 0.5); transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1); } .outcome-row.secondary .probability-track i { background: linear-gradient(90deg, var(--rose-strong), #ff7a93); box-shadow: 0 1px 6px -1px rgba(244, 71, 107, 0.5); } .outcome-row strong, .breakdown-row strong, .country-row strong { font-family: var(--font-mono); font-weight: 500; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; } .featured-footer { justify-content: space-between; gap: 16px; margin-top: 24px; color: var(--subtle); font-size: 13px; } .featured-footer a, .card-footer a { color: var(--green-strong); font-weight: 700; } .featured-chart { min-width: 0; border-left: 1px solid var(--line); padding-left: 26px; } svg { display: block; width: 100%; height: auto; } .chart-grid line { stroke: var(--line); stroke-width: 1; } .chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .chart-line.yes { stroke: var(--green); filter: drop-shadow(0 2px 5px rgba(15, 185, 129, 0.35)); } .chart-line.no { stroke: var(--rose); opacity: 0.9; } .chart-dots circle:first-child { fill: var(--green); } .chart-dots circle:last-child { fill: var(--rose); } /* -------------------------------------------------------- Section labels -- */ .section-header { justify-content: space-between; gap: 16px; margin: 38px 0 16px; } .section-header p, .sidebar-card p { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtle); } .section-header p::before { content: "// "; color: var(--green); } .section-header h2, .sidebar-title h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.02em; color: var(--text); } .section-header span { font-family: var(--font-mono); color: var(--muted); font-size: 12.5px; font-weight: 500; } /* ---------------------------------------------------------- Forecast grid -- */ .prediction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .forecast-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; min-height: 214px; position: relative; overflow: hidden; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, border-color 200ms ease; animation: rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; } .forecast-card:nth-child(1) { animation-delay: 40ms; } .forecast-card:nth-child(2) { animation-delay: 80ms; } .forecast-card:nth-child(3) { animation-delay: 120ms; } .forecast-card:nth-child(4) { animation-delay: 160ms; } .forecast-card:nth-child(5) { animation-delay: 200ms; } .forecast-card:nth-child(6) { animation-delay: 240ms; } @media (hover: hover) { .forecast-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-glow); } } .country-market-card { grid-template-columns: 1fr; } .country-market-card .country-probabilities { gap: 10px; } .country-market-card .country-row { grid-template-columns: minmax(116px, 140px) minmax(0, 1fr) 48px; font-size: 13px; } .country-market-card .breakdown-track { height: 10px; } .forecast-card h3 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.16; letter-spacing: -0.02em; color: var(--text); overflow-wrap: anywhere; } .card-date { margin: -8px 0 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--subtle); } .breakdown { display: grid; gap: 11px; } .breakdown-row { display: grid; grid-template-columns: minmax(64px, 86px) minmax(0, 1fr) 46px; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 600; } .breakdown-track { height: 10px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 2px rgba(24, 26, 35, 0.10); overflow: hidden; } .breakdown-track i { display: block; width: var(--value); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-strong), #2ee0a3); box-shadow: 0 1px 5px -1px rgba(15, 185, 129, 0.45); } .breakdown-row.no .breakdown-track i { background: linear-gradient(90deg, var(--rose-strong), #ff7a93); box-shadow: 0 1px 5px -1px rgba(244, 71, 107, 0.45); } .country-probabilities { display: grid; gap: 9px; } .country-row { display: grid; grid-template-columns: minmax(86px, 96px) minmax(0, 1fr) 42px; align-items: center; gap: 9px; color: var(--muted); font-size: 12.5px; font-weight: 600; } .country-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .country-row .breakdown-track i { background: linear-gradient(90deg, var(--green-strong), #2ee0a3); } .draw-probabilities .draw-row { color: var(--blue); } .draw-probabilities .draw-row .breakdown-track i { background: linear-gradient(90deg, #2d54d6, var(--blue)); box-shadow: 0 1px 5px -1px rgba(59, 110, 245, 0.45); } .draw-probabilities .draw-row strong { color: var(--blue); } .featured-country-probabilities { max-width: 640px; } .featured-country-probabilities .country-row { grid-template-columns: minmax(104px, 120px) minmax(0, 1fr) 48px; font-size: 13px; } .card-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--subtle); font-size: 12.5px; } /* ------------------------------------------------------- Resolved (wins) -- */ .resolved-section { border: 1px solid var(--line-glow); border-radius: var(--radius-lg); background: radial-gradient(120% 140% at 0% 0%, rgba(15, 185, 129, 0.10), transparent 50%), var(--surface); margin-top: 24px; padding: 0 22px 22px; box-shadow: var(--shadow-sm); } .resolved-section[hidden], .utility-grid[hidden] { display: none; } .resolved-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .resolved-card, .resolved-empty { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; } .resolved-card { border-left: 4px solid var(--green); } .resolved-card h3 { margin: 14px 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -0.01em; color: var(--text); } .resolved-status { color: var(--green-strong); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .resolved-result { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 600; } .resolved-result strong { color: var(--green-strong); font-family: var(--font-mono); font-size: 20px; } .resolved-card p, .resolved-empty { color: var(--muted); font-size: 14px; line-height: 1.55; } .resolved-card footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; color: var(--subtle); font-size: 12px; } .resolved-card footer a { color: var(--green-strong); font-weight: 700; } /* --------------------------------------------------------------- Sidebar -- */ .right-sidebar { display: grid; gap: 18px; position: sticky; top: 148px; } .sidebar-card { padding: 20px; } .accuracy-meter { height: 12px; margin-top: 18px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 2px rgba(24, 26, 35, 0.10); overflow: hidden; } .accuracy-meter i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--brand-grad); box-shadow: 0 1px 6px -1px rgba(15, 185, 129, 0.5); transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); } .reliability { margin-top: 20px; } .reliability-title { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); } .reliability svg { width: 100%; max-width: 248px; height: auto; } .rel-frame { fill: var(--surface-2); stroke: var(--line); } .rel-diagonal { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; } .rel-dots circle { fill: var(--green); fill-opacity: 0.45; stroke: var(--green-strong); } .rel-axis { fill: var(--subtle); font-family: var(--font-mono); font-size: 9px; text-anchor: middle; } .utility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .utility-grid-single { grid-template-columns: 1fr; } .utility-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: 0 22px 22px; } .accuracy-summary { display: flex; align-items: baseline; gap: 14px; } .accuracy-summary strong { font-family: var(--font-display); font-weight: 700; color: var(--green-strong); font-size: 54px; line-height: 1; letter-spacing: -0.03em; } .accuracy-summary span, .utility-note { color: var(--muted); font-size: 13px; line-height: 1.55; } .utility-note { margin: 14px 0 0; color: var(--subtle); } .sidebar-title { justify-content: space-between; gap: 12px; margin-bottom: 14px; } .sidebar-title h2 { font-size: 20px; } .sidebar-title span { color: var(--green-strong); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .trending-card ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .trending-card li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 13px 0; color: var(--muted); font-size: 14px; } .trending-card li:last-child { padding-bottom: 0; } .trending-card strong { color: var(--text); font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- Alpha telemetry -- */ .alpha-telemetry[hidden] { display: none; } .alpha-telemetry { border-left: 4px solid var(--line-strong); } .alpha-telemetry.positive { border-left-color: var(--green); } .alpha-telemetry.negative { border-left-color: var(--rose-strong); } .alpha-telemetry.neutral { border-left-color: var(--blue); } .alpha-telemetry > strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -0.01em; color: var(--text); } .alpha-telemetry p { margin: 10px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; letter-spacing: 0; text-transform: none; font-family: var(--font); } .alpha-telemetry dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; border-top: 1px solid var(--line); padding-top: 14px; } .alpha-telemetry dl div { display: contents; } .alpha-telemetry dt, .alpha-telemetry dd { margin: 0; font-size: 12px; } .alpha-telemetry dt { color: var(--subtle); font-weight: 600; } .alpha-telemetry dd { color: var(--text); font-family: var(--font-mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- Motion --- */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ Responsive -- */ @media (min-width: 1180px) { .prediction-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1120px) { .header-inner { grid-template-columns: auto minmax(220px, 1fr) auto; } .primary-nav { display: none; } .dashboard-layout, .featured-card { grid-template-columns: 1fr; } .featured-chart { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; } .right-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .domain-bar { top: 0; } .header-inner { grid-template-columns: 1fr; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .brand, .account-actions { justify-content: space-between; } .primary-nav { display: flex; order: 3; justify-content: space-between; gap: 8px; font-size: 12px; } .primary-nav a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .primary-nav a::after { display: none; } .search-form { order: 2; } .domain-inner, .page-shell { padding-left: 16px; padding-right: 16px; } .featured-card { padding: 20px; } .card-kicker, .featured-footer, .section-header, .card-footer { align-items: flex-start; flex-direction: column; } .outcome-row { grid-template-columns: minmax(62px, 82px) minmax(0, 1fr) 48px; } .country-row, .featured-country-probabilities .country-row { grid-template-columns: 92px minmax(0, 1fr) 42px; } .prediction-grid, .resolved-grid, .utility-grid, .right-sidebar { grid-template-columns: 1fr; } .forecast-card { grid-template-columns: 1fr; } .featured-card h1 { font-size: clamp(31px, 9vw, 46px); } .forecast-card h3 { font-size: 18px; } } @media (max-width: 640px) { .featured-card { padding: 16px; } .featured-chart { padding-top: 16px; } .outcome-row, .featured-country-probabilities .country-row, .country-row { grid-template-columns: minmax(58px, 76px) minmax(0, 1fr) 42px; } .forecast-card { padding: 15px; } }