/* ================================================================ FairShout — Main Stylesheet Dark Immersive theme — purple / green / gold ================================================================ */ /* ── Tokens ───────────────────────────────────────────────────── */ :root { --bg: #150B26; --bg-soft: #1E1136; --bg-card: #201439; --bg-deep: #0D0619; --purple: #7C4DD9; --purple-glow: #9B6FEF; --purple-soft: rgba(124,77,217,0.16); --green: #35D488; --green-dark: #1E9E68; --green-soft: rgba(53,212,136,0.14); --gold: #F0C24B; --gold-dark: #C99A20; --gold-soft: rgba(240,194,75,0.14); --sky: #5EB6F0; --sky-soft: rgba(94,182,240,0.14); --red: #E36767; --text: #F1ECFB; --text-soft: #A99CC4; --text-faint: #6E6189; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-full: 999px; --border: 1px solid rgba(255,255,255,0.08); --shadow: 0 12px 28px rgba(0,0,0,0.30); --shadow-lg: 0 20px 50px rgba(0,0,0,0.35); } /* ── Reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Fixed hero image behind every page — a dark gradient overlay keeps it moody and legible, and fades toward solid var(--bg) at the bottom. Each page's main wrapper (.results-main / .explore-main / .reset-main) fades to solid var(--bg) near its own top so only a sliver of the image shows through under the page header; the homepage's .hero shows more of it, fading out via .how's own gradient background (see .how below for why it's not a .hero fade). */ body { font-family: var(--font-body); background-color: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; line-height: 1.6; padding-top: 72px; /* clears the fixed nav bar */ background-image: radial-gradient(circle at 50% 0%, rgba(240,194,75,0.10) 0%, transparent 42%), linear-gradient(180deg, rgba(8,5,16,0.55) 0%, rgba(8,5,16,0.85) 42%, rgba(8,5,16,0.97) 100%), url("../images/hero-background.jpg"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: center top, center top, center top; background-size: cover, cover, cover; background-attachment: fixed, fixed, fixed; } /* ── Background dots ──────────────────────────────────────────── */ /* Dotty texture belonged to the old light "outback" theme — the dark immersive theme relies on the photo + gradient instead. */ .bg-dots { display: none; } /* .source-balloon is excluded for the same reason .nav is: it's a direct child of (appended by JS) that needs its own explicit position (absolute, set in its own rule below) rather than being forced to position: relative here. This selector's specificity (body + a class inside :not()) beats a plain .source-balloon class rule, so without this exclusion the balloon silently got position: relative instead of absolute — meaning it rendered offset from its normal position as the last element in the document (i.e. below the footer) instead of near the clicked link, making it invisible without scrolling far past the page's actual content. Same bug class that broke the nav bar before .nav was added here (v0.061). */ body > *:not(.nav):not(.source-balloon) { position: relative; z-index: 1; } /* ── Nav ──────────────────────────────────────────────────────── */ .nav { background: var(--bg-deep); border-bottom: 1px solid rgba(255,255,255,0.06); position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo-wombat { font-size: 24px; } .logo-icon { width: 32px; height: 32px; object-fit: contain; display: block; filter: drop-shadow(0 0 10px rgba(240,194,75,0.3)); } .logo-text { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--gold); letter-spacing: 0.2px; } .nav-links { display: flex; align-items: center; gap: 8px; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; border: none; border-radius: var(--radius-md); padding: 10px 20px; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-nav { color: var(--text-soft); background: transparent; border: 1px solid transparent; padding: 9px 18px; border-radius: var(--radius-full); } .btn-nav:hover, .btn-nav.active { background: rgba(255,255,255,0.07); color: var(--text); } .btn-nav.btn-outline { border-color: var(--green); color: var(--green); } .btn-nav.btn-outline:hover { background: var(--green-soft); color: var(--green); } .btn-primary { background: var(--gold); color: #2B1E05; border: none; box-shadow: 0 0 0 rgba(240,194,75,0.5); font-size: 16px; padding: 14px 28px; border-radius: var(--radius-full); } .btn-primary:hover { background: #F5D06B; box-shadow: 0 0 30px rgba(240,194,75,0.45); transform: translateY(-2px); } .btn-secondary { background: var(--purple); color: #fff; border: none; box-shadow: 0 8px 20px rgba(124,77,217,0.3); font-size: 16px; padding: 14px 28px; border-radius: var(--radius-full); } .btn-secondary:hover { background: var(--purple-glow); box-shadow: 0 8px 26px rgba(124,77,217,0.45); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); font-size: 15px; } .btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--text); } .btn-lg { font-size: 17px; padding: 16px 32px; } /* ── Sections ─────────────────────────────────────────────────── */ .section-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .section-title { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--text); margin-bottom: 32px; text-align: center; } .section-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--gold); margin-bottom: 16px; letter-spacing: 0.3px; } /* ───────────────────────────────────────────────────────────────── SPLASH PAGE ───────────────────────────────────────────────────────────────── */ /* Hero */ .hero { max-width: 1100px; margin: 0 auto; padding: 60px 24px 80px; position: relative; } .hero-content { max-width: 640px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .eyebrow { display: inline-block; background: var(--gold-soft); border: 1px solid rgba(240,194,75,0.35); border-radius: 100px; padding: 5px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 18px; } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; color: var(--text); margin-bottom: 20px; letter-spacing: -1px; } .hero-title em { font-style: normal; position: relative; background: linear-gradient(90deg, var(--gold) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: 18px; color: var(--text-soft); max-width: 520px; margin: 0 auto 36px; line-height: 1.7; } .hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 36px; } .hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 100px; padding: 7px 16px; font-size: 14px; font-weight: 600; color: var(--text-soft); } /* Fades the hero's fixed image into solid var(--bg) — deliberately on .how (not a .hero::after) because .hero is a max-width:1100px centered box, not full width. A fade scoped to .hero only masked the image inside that centered column; outside it (both sides, for the hero's whole height) the raw image kept showing right up against .how's solid full-width background, producing a hard vertical seam along the column's edges. .how has no max-width, so its own gradient background fades the image out across the full viewport width instead. */ .how { background: linear-gradient(180deg, transparent 0px, var(--bg) 160px); padding: 100px 0 90px; position: relative; } .steps { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; justify-content: center; } .step { background: var(--bg-soft); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 36px 28px 30px; flex: 1; min-width: 220px; max-width: 300px; text-align: center; box-shadow: var(--shadow); position: relative; transition: transform 0.2s, background 0.2s; } .step:hover { transform: translateY(-6px); background: #241540; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); border: none; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 18px; } .step-icon { font-size: 36px; margin-bottom: 14px; display: block; } .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text); margin-bottom: 10px; } .step p { font-size: 14px; color: var(--text-soft); } .step-arrow { font-size: 28px; color: var(--gold); align-self: center; flex-shrink: 0; opacity: 0.7; } /* ───────────────────────────────────────────────────────────────── RESULTS PAGE ───────────────────────────────────────────────────────────────── */ /* Fades the fixed body image out to solid var(--bg) after a full viewport height (100vh), same as the homepage — index.html shows the photo across its whole hero (no fade at all until .how, well past the fold), so the picture reads as "full screen" there. Using 100vh here instead of a fixed pixel value matches that: the entire first screen shows the photo on any device, and it only fades to solid once the visitor actually starts scrolling into the card content. flow-root keeps the last child's margin from collapsing through the bottom edge. Top padding matches .hero's (60px) so the header block below takes up the same vertical space as the homepage hero. */ .results-main { padding: 60px 0 80px; background: linear-gradient(180deg, transparent 0px, var(--bg) 100vh); display: flow-root; } /* Styled to match .hero/.hero-content — same max-width, same eyebrow pill, same title/subtitle sizing — so results.html and explore.html read as a continuation of the homepage hero rather than a smaller plain page header. */ .results-header { max-width: 640px; margin: 0 auto 40px; text-align: center; } .page-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-soft); border: 1px solid rgba(240,194,75,0.35); border-radius: 100px; padding: 5px 16px; color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; } .page-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; color: var(--text); margin-bottom: 20px; letter-spacing: -1px; } .page-sub { font-size: 18px; color: var(--text-soft); max-width: 520px; margin: 0 auto; line-height: 1.7; } /* ── Mood section (legacy single-card layout, kept for safety) ──── */ .mood-section { margin-bottom: 56px; } .mood-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding: 32px 36px; box-shadow: var(--shadow-lg); } .mood-chart-canvas-shell { position: relative; height: 340px; } .mood-header { margin-bottom: 26px; } .mood-badge { display: inline-block; background: var(--purple-soft); border: 1px solid rgba(124,77,217,0.35); border-radius: 100px; padding: 4px 14px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--purple-glow); margin-bottom: 10px; } .mood-question { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text); } /* Mood bar */ .mood-meter-wrap { margin-bottom: 22px; } .mood-labels-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-faint); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .mood-bar-outer { position: relative; height: 16px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.15); overflow: visible; margin-bottom: 6px; } .mood-bar-gradient { position: absolute; inset: 0; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--green) 0%, #A9D24B 35%, var(--gold) 55%, #E08A4B 75%, var(--red) 100%); } .mood-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; transition: left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .mood-marker-pin { width: 18px; height: 18px; background: var(--bg-card); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.5); } .mood-marker-label { position: absolute; top: -26px; font-size: 12px; font-weight: 800; color: #2B1E05; white-space: nowrap; background: var(--gold); border: none; border-radius: 6px; padding: 1px 7px; } .mood-icons { display: flex; justify-content: space-between; font-size: 20px; padding: 0 4px; } /* Mood breakdown bars */ .mood-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; } .mood-option { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 12px; text-align: center; } .mood-option-label { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; } .mood-option-bar-outer { background: rgba(255,255,255,0.06); border-radius: 6px; height: 8px; margin-bottom: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .mood-option-bar-inner { height: 100%; border-radius: 6px; background: var(--purple); transition: width 1s ease; } .mood-option-pct { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); } .mood-note { font-size: 13px; color: var(--text-faint); text-align: center; } /* ── Result cards ─────────────────────────────────────────────── */ .national-section { margin-bottom: 56px; } .result-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding: 30px 34px; box-shadow: var(--shadow-lg); } .result-card--national { border-color: rgba(124,77,217,0.4); box-shadow: 0 20px 50px rgba(124,77,217,0.15); } .national-tag { background: var(--purple-soft); color: var(--purple-glow); border: 1px solid rgba(124,77,217,0.35); font-size: 15px; padding: 3px 10px; } #national-group .state-group-header { border-bottom-color: rgba(124,77,217,0.4); } #national-group .state-group-toggle:hover .state-group-name { color: var(--purple-glow); } .result-card-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text); margin-bottom: 8px; } .result-card-meta { font-size: 13px; color: var(--text-faint); font-weight: 500; margin-bottom: 20px; } .result-card-source { font-size: 12px; color: var(--text-faint); font-style: italic; margin: -12px 0 16px; } .result-card-source-links { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 16px; } .result-card-source-links a { font-size: 12px; font-weight: 600; color: var(--sky); text-decoration: underline; } /* ── Source summary "balloon" — popover shown when a source link is clicked, with an AI summary of the article and a link to the real page at the bottom. Positioned via JS (top/left set inline), so this only defines its look. ──────────────────────────────────────────── */ .source-balloon { position: absolute; z-index: 500; width: 300px; max-width: calc(100vw - 24px); background: var(--bg-card); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 16px; animation: source-balloon-in 0.15s ease-out; } @keyframes source-balloon-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .source-balloon-body { margin-bottom: 12px; } .source-balloon-summary { font-size: 13px; line-height: 1.55; color: var(--text-soft); } .source-balloon-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-faint); font-style: italic; } .source-balloon-error { font-size: 13px; line-height: 1.5; color: var(--text-faint); } .source-balloon-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--sky); animation: source-balloon-spin 0.7s linear infinite; flex-shrink: 0; } @keyframes source-balloon-spin { to { transform: rotate(360deg); } } .source-balloon-link { display: block; font-size: 12px; font-weight: 700; color: var(--sky); text-decoration: underline; padding-top: 12px; border-top: var(--border); } .result-bars { display: flex; flex-direction: column; gap: 12px; } .result-bar-row { display: flex; align-items: center; gap: 12px; } .result-bar-label { font-weight: 600; font-size: 14px; color: var(--text-soft); width: 148px; flex-shrink: 0; line-height: 1.25; } .result-bar-outer { flex: 1; background: rgba(255,255,255,0.05); border-radius: 8px; height: 26px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; position: relative; } .result-bar-inner { height: 100%; border-radius: 6px; transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); min-width: 4px; } /* All option bars are the same purple by default — the winning option (below) is the only one that gets a different colour. */ .result-bar-inner--0, .result-bar-inner--1, .result-bar-inner--2, .result-bar-inner--3, .result-bar-inner--4, .result-bar-inner--5, .result-bar-inner--6 { background: var(--purple); } .result-bar-pct { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-soft); min-width: 48px; text-align: right; } .result-total { font-size: 13px; color: var(--text-faint); font-weight: 500; margin-top: 14px; } /* Winning row highlight */ .result-bar-row--winner .result-bar-label { color: var(--gold); font-weight: 700; } .result-bar-row--winner .result-bar-pct { color: var(--gold); font-weight: 700; } .result-bar-row--winner .result-bar-outer { border-color: var(--green); } .result-bar-row--winner .result-bar-inner { background: var(--green); box-shadow: 0 0 16px rgba(53,212,136,0.5); } .trend-arrow { display: inline-block; font-size: 13px; margin-left: 4px; vertical-align: middle; } .trend-same { color: var(--purple-glow); } .trend-changed { color: var(--gold); } /* ── State grid ───────────────────────────────────────────────── */ .states-section { margin-bottom: 56px; } .states-header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 24px; } .state-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .state-btn { font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 8px 18px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--text-soft); cursor: pointer; transition: background 0.15s, transform 0.1s, color 0.15s; } .state-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); } /* Per-state colours — resting state only; .active below always wins so the currently-selected button stays unambiguous regardless of which state's colour it happens to be. Text stays dark on these pastel fills for contrast against the light backgrounds. */ .state-btn[data-state="NSW"] { background: #FFB347; } .state-btn[data-state="VIC"] { background: #87CEEB; } .state-btn[data-state="QLD"] { background: #DEB887; } .state-btn[data-state="SA"] { background: #F08080; } .state-btn[data-state="WA"] { background: #90EE90; } .state-btn[data-state="TAS"] { background: #DDA0DD; } .state-btn[data-state="ACT"] { background: #F0E68C; } .state-btn[data-state="NT"] { background: #E8A020; } .state-btn[data-state="NSW"], .state-btn[data-state="VIC"], .state-btn[data-state="QLD"], .state-btn[data-state="SA"], .state-btn[data-state="WA"], .state-btn[data-state="TAS"], .state-btn[data-state="ACT"], .state-btn[data-state="NT"] { color: #20142E; border-color: rgba(0,0,0,0.15); } .state-btn.active { background: var(--purple); border-color: var(--purple-glow); color: #fff; box-shadow: 0 0 20px rgba(124,77,217,0.4); transform: none; } .state-grid { display: flex; flex-direction: column; gap: 40px; } .state-group { display: flex; flex-direction: column; gap: 16px; } .state-group-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); } .state-group-toggle { cursor: pointer; user-select: none; } .state-group-toggle:hover .state-group-name { color: var(--purple-glow); } .state-group-chevron { font-size: 11px; margin-left: 4px; transition: transform 0.25s ease; display: inline-block; } .state-group--collapsed .state-group-chevron { transform: rotate(-90deg); } .state-group--collapsed .state-group-questions { display: none; } .state-group-left { display: flex; align-items: center; gap: 12px; } .state-group-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text); } .state-group-meta { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-faint); } .state-group-dot { opacity: 0.5; } .state-group-questions { display: flex; flex-direction: column; gap: 20px; } .state-result-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding: 30px 34px; box-shadow: var(--shadow-lg); } .state-tag { display: inline-block; background: var(--purple-soft); border: 1px solid rgba(124,77,217,0.35); border-radius: var(--radius-sm); padding: 3px 10px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--purple-glow); margin-bottom: 10px; } /* State card color accents */ .state-card[data-state="NSW"] .state-tag { background: #FFB347; color: #20142E; border-color: rgba(0,0,0,0.15); } .state-card[data-state="VIC"] .state-tag { background: #87CEEB; color: #20142E; border-color: rgba(0,0,0,0.15); } .state-card[data-state="QLD"] .state-tag { background: #DEB887; color: #20142E; border-color: rgba(0,0,0,0.15); } .state-card[data-state="SA"] .state-tag { background: #F08080; color: #20142E; border-color: rgba(0,0,0,0.15); } .state-card[data-state="WA"] .state-tag { background: #90EE90; color: #20142E; border-color: rgba(0,0,0,0.15); } .state-card[data-state="TAS"] .state-tag { background: #DDA0DD; color: #20142E; border-color: rgba(0,0,0,0.15); } .state-card[data-state="ACT"] .state-tag { background: #F0E68C; color: #20142E; border-color: rgba(0,0,0,0.15); } .state-card[data-state="NT"] .state-tag { background: #E8A020; color: #20142E; border-color: rgba(0,0,0,0.15); } /* ── Results page tabs (This week / Past weeks) ──────────────────── */ /* Segmented-control look, matching sample-3-dark-immersive-results.html — one shared pill container instead of two separate floating pills. */ .results-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-full); padding: 5px; max-width: 340px; margin: 0 auto 36px; } .results-tab { flex: 1; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: var(--radius-full); border: none; background: transparent; color: var(--text-soft); cursor: pointer; transition: background 0.15s, transform 0.1s, color 0.15s; } .results-tab:hover { color: var(--text); } .results-tab.active { background: var(--gold); color: #2B1E05; transform: none; } .results-view { display: none; } .results-view.active { display: block; } .results-section-heading { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 20px; } .results-history-list { display: flex; flex-direction: column; gap: 20px; } .results-load-more { text-align: center; margin-top: 24px; } /* ── Mood region cards — per state/territory, tap to expand ──────── */ .mood-region-grid { display: flex; flex-direction: column; gap: 16px; } .mood-region-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s; } .mood-region-card--national { border-color: rgba(124,77,217,0.4); box-shadow: 0 12px 28px rgba(124,77,217,0.15); } .mood-region-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .mood-region-title-wrap { display: flex; flex-direction: column; gap: 4px; } .mood-region-title { font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; } .mood-region-mood-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--green); } .mood-region-mood-word--empty { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-faint); } .mood-region-right { display: flex; align-items: center; gap: 10px; } .mood-region-chevron { font-size: 12px; color: var(--text-faint); transition: transform 0.25s ease; flex-shrink: 0; } .mood-region-card.open .mood-region-chevron { transform: rotate(180deg); } .mood-uv-outer { position: relative; height: 14px; border-radius: 7px; margin-bottom: 6px; background: linear-gradient(90deg, var(--green) 0%, #A9D24B 35%, var(--gold) 55%, #E08A4B 75%, var(--red) 100%); border: 1px solid rgba(255,255,255,0.15); } .mood-uv-pin { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background: var(--bg-card); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: left 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .mood-uv-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); font-weight: 600; } .mood-region-breakdown { overflow: hidden; max-height: 0; transition: max-height 0.35s ease, opacity 0.25s ease; opacity: 0; } .mood-region-card.open .mood-region-breakdown { max-height: 300px; opacity: 1; } .mood-region-breakdown-inner { padding-top: 12px; margin-top: 8px; border-top: 1px dashed rgba(255,255,255,0.12); } .mood-region-option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .mood-region-option-label { font-size: 12px; font-weight: 600; color: var(--text-soft); min-width: 100px; } .mood-region-option-bar-outer { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .mood-region-option-bar-inner { height: 100%; background: var(--purple); border-radius: 4px; transition: width 1s ease; } .mood-region-option-pct { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text); min-width: 36px; text-align: right; } .mood-region-no-votes { text-align: center; color: var(--text-faint); font-size: 13px; padding: 12px 0; } /* ── Loading and empty states ─────────────────────────────────── */ .card-loading, .mood-loading { text-align: center; padding: 48px; color: var(--text-faint); font-weight: 600; font-size: 16px; } .full-width { grid-column: 1 / -1; } .no-results { grid-column: 1 / -1; text-align: center; padding: 48px; color: var(--text-faint); font-weight: 600; } /* ───────────────────────────────────────────────────────────────── EXPLORE / ANALYTICS PAGE ───────────────────────────────────────────────────────────────── */ .explore-main { padding: 60px 0 80px; background: linear-gradient(180deg, transparent 0px, var(--bg) 100vh); display: flow-root; } /* ── Tab bar ──────────────────────────────────────────────────── */ .explore-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 16px; } .explore-tab { font-family: var(--font-body); font-weight: 700; font-size: 14px; padding: 10px 20px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text-soft); cursor: pointer; transition: background 0.15s, transform 0.1s, color 0.15s; } .explore-tab:hover { background: rgba(255,255,255,0.08); color: var(--text); } .explore-tab.active { background: var(--gold); border-color: var(--gold); color: #2B1E05; transform: none; } .explore-panel { display: none; } .explore-panel.active { display: block; } .explore-analytics-note { font-size: 14px; color: var(--text-soft); line-height: 1.6; margin-bottom: 18px; } /* ── User analytics charts ────────────────────────────────────── */ .ua-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-bottom: 32px; } .explore-download-btn:disabled { opacity: 0.6; cursor: default; } /* ── Headline cards ───────────────────────────────────────────── */ .explore-card--headline { padding: 22px 28px; } /* ── Participation table ──────────────────────────────────────── */ .ua-table-outer { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow-x: auto; padding: 8px; } .ua-table { width: 100%; border-collapse: collapse; font-size: 14px; } .ua-table th { text-align: left; padding: 14px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); border-bottom: 1px solid rgba(255,255,255,0.1); } .ua-table td { padding: 14px 20px; font-weight: 500; color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.06); } .ua-table tr:last-child td { border-bottom: none; } .explore-filters { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 24px 28px; box-shadow: var(--shadow-lg); margin-bottom: 32px; } .explore-search-row { display: flex; gap: 12px; margin-bottom: 18px; } .explore-search-input { flex: 1; font-family: var(--font-body); font-size: 15px; padding: 12px 18px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); color: var(--text); } .explore-search-input::placeholder { color: var(--text-faint); } .explore-search-input:focus { outline: none; border-color: var(--purple-glow); background: rgba(255,255,255,0.06); } .explore-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .explore-field label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin-bottom: 6px; } .explore-field select, .explore-field input[type="date"] { width: 100%; font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); color: var(--text); color-scheme: dark; } .explore-field select:focus, .explore-field input[type="date"]:focus { outline: none; border-color: var(--purple-glow); } /* The closed select box already matches the date input's dark styling above (same rule), but the native OPEN dropdown list defaults to a browser-controlled white background regardless of color-scheme in some browsers — styling