/* ── Cricket Caddy Portal themes ────────────────────────────────────────────── The admin picks one theme for the whole portal (Settings → Theme); it is applied as data-portal-theme on . "normal" is the base look and has no rules here. Every theme keeps the brand pink #D4166A and supports both dark and light (OS preference via media query, explicit data-theme wins). Token contract (defined in base.css): --bg --bg-card --bg-raised --bg-hover --border --grid-line --text --text-dim --text-faint --pink-glow plus theme extras: --font-body --font-head --radius-card --radius-btn --shadow-card. */ /* ════════════════════════════════════════════════════════════════════════ MODERN — quiet graphite + generous radius, Inter. Calm SaaS polish. ════════════════════════════════════════════════════════════════════════ */ :root[data-portal-theme="modern"] { --font-body: "Inter", -apple-system, sans-serif; --font-head: "Inter", -apple-system, sans-serif; --radius-card: 18px; --radius-btn: 12px; --bg: #101014; --bg-card: #17171d; --bg-raised: #1f1f27; --bg-hover: #26262f; --border: #2c2c37; --grid-line: rgba(44,44,55,.7); --text: #EDEDF2; --text-dim: #9d9dae; --text-faint: #5b5b6b; --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-portal-theme="modern"] { --bg: #F5F6F8; --bg-card: #FFFFFF; --bg-raised: #EEEFF3; --bg-hover: #E5E7ED; --border: #DDDFE6; --grid-line: rgba(221,223,230,.8); --text: #17171d; --text-dim: #6a6a7a; --text-faint: #a3a3b2; --shadow-card: 0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.06); color-scheme: light; } } :root[data-theme="light"][data-portal-theme="modern"] { --bg: #F5F6F8; --bg-card: #FFFFFF; --bg-raised: #EEEFF3; --bg-hover: #E5E7ED; --border: #DDDFE6; --grid-line: rgba(221,223,230,.8); --text: #17171d; --text-dim: #6a6a7a; --text-faint: #a3a3b2; --shadow-card: 0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.06); color-scheme: light; } :root[data-theme="dark"][data-portal-theme="modern"] { --bg: #101014; --bg-card: #17171d; --bg-raised: #1f1f27; --bg-hover: #26262f; --border: #2c2c37; --grid-line: rgba(44,44,55,.7); --text: #EDEDF2; --text-dim: #9d9dae; --text-faint: #5b5b6b; --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18); color-scheme: dark; } [data-portal-theme="modern"] #topbar { backdrop-filter: blur(8px); } [data-portal-theme="modern"] .panel h2, [data-portal-theme="modern"] h1 { letter-spacing: -.02em; } [data-portal-theme="modern"] .sidebar-item { border-left-width: 0; border-radius: 8px; margin: 0 10px; padding: 9px 14px; } [data-portal-theme="modern"] .sidebar-item.active { background: var(--pink-glow); } /* ════════════════════════════════════════════════════════════════════════ ULTRA MODERN — stark mono, hairline borders, sharp corners, Outfit. Pink is the ONLY colour in the room. ════════════════════════════════════════════════════════════════════════ */ :root[data-portal-theme="ultramodern"] { --font-body: "Outfit", -apple-system, sans-serif; --font-head: "Outfit", -apple-system, sans-serif; --radius-card: 16px; --radius-btn: 12px; --bg: #050507; --bg-card: #0a0a0e; --bg-raised: #121218; --bg-hover: #1a1a22; --border: #232330; --grid-line: rgba(35,35,48,.7); --text: #F4F4F8; --text-dim: #8f8fa3; --text-faint: #4a4a5c; --shadow-card: none; color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-portal-theme="ultramodern"] { --bg: #FAFAFC; --bg-card: #FFFFFF; --bg-raised: #F1F1F5; --bg-hover: #E8E8EE; --border: #E0E0E8; --grid-line: rgba(224,224,232,.8); --text: #0a0a0e; --text-dim: #62627a; --text-faint: #ababbd; color-scheme: light; } } :root[data-theme="light"][data-portal-theme="ultramodern"] { --bg: #FAFAFC; --bg-card: #FFFFFF; --bg-raised: #F1F1F5; --bg-hover: #E8E8EE; --border: #E0E0E8; --grid-line: rgba(224,224,232,.8); --text: #0a0a0e; --text-dim: #62627a; --text-faint: #ababbd; color-scheme: light; } :root[data-theme="dark"][data-portal-theme="ultramodern"] { --bg: #050507; --bg-card: #0a0a0e; --bg-raised: #121218; --bg-hover: #1a1a22; --border: #232330; --grid-line: rgba(35,35,48,.7); --text: #F4F4F8; --text-dim: #8f8fa3; --text-faint: #4a4a5c; color-scheme: dark; } [data-portal-theme="ultramodern"] .panel h2 { text-transform: uppercase; letter-spacing: .14em; font-size: .88rem; font-weight: 600; } [data-portal-theme="ultramodern"] h1 { letter-spacing: -.03em; font-weight: 700; } [data-portal-theme="ultramodern"] .btn { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; } [data-portal-theme="ultramodern"] .sidebar-item { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; } [data-portal-theme="ultramodern"] th { letter-spacing: .12em; } [data-portal-theme="ultramodern"] #topbar { border-bottom-width: 1px; } /* ════════════════════════════════════════════════════════════════════════ GENZ — bubbly Baloo 2, big radius, lavender pop, chunky offset shadows. ════════════════════════════════════════════════════════════════════════ */ :root[data-portal-theme="genz"] { --font-body: "Baloo 2", -apple-system, sans-serif; --font-head: "Baloo 2", -apple-system, sans-serif; --radius-card: 22px; --radius-btn: 999px; --bg: #1b1030; --bg-card: #251743; --bg-raised: #302055; --bg-hover: #3b2a66; --border: #4b3580; --grid-line: rgba(75,53,128,.7); --text: #F4EDFF; --text-dim: #b39fd9; --text-faint: #6d569b; --pink-glow: rgba(212,22,106,.28); --shadow-card: 0 6px 0 rgba(0,0,0,.28); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-portal-theme="genz"] { --bg: #F3EDFF; --bg-card: #FFFFFF; --bg-raised: #EDE4FF; --bg-hover: #E2D4FF; --border: #C9B2F2; --grid-line: rgba(201,178,242,.7); --text: #2b1b4d; --text-dim: #7a63a8; --text-faint: #ab97d1; --pink-glow: rgba(212,22,106,.14); --shadow-card: 0 6px 0 rgba(75,53,128,.16); color-scheme: light; } } :root[data-theme="light"][data-portal-theme="genz"] { --bg: #F3EDFF; --bg-card: #FFFFFF; --bg-raised: #EDE4FF; --bg-hover: #E2D4FF; --border: #C9B2F2; --grid-line: rgba(201,178,242,.7); --text: #2b1b4d; --text-dim: #7a63a8; --text-faint: #ab97d1; --pink-glow: rgba(212,22,106,.14); --shadow-card: 0 6px 0 rgba(75,53,128,.16); color-scheme: light; } :root[data-theme="dark"][data-portal-theme="genz"] { --bg: #1b1030; --bg-card: #251743; --bg-raised: #302055; --bg-hover: #3b2a66; --border: #4b3580; --grid-line: rgba(75,53,128,.7); --text: #F4EDFF; --text-dim: #b39fd9; --text-faint: #6d569b; --pink-glow: rgba(212,22,106,.28); --shadow-card: 0 6px 0 rgba(0,0,0,.28); color-scheme: dark; } [data-portal-theme="genz"] .card { border-width: 2px; } [data-portal-theme="genz"] .btn { font-weight: 700; } [data-portal-theme="genz"] .btn-primary { background: linear-gradient(135deg, #D4166A, #8A2BE2); box-shadow: 0 3px 0 rgba(0,0,0,.25); } [data-portal-theme="genz"] .btn-primary:active { box-shadow: none; transform: translateY(2px); } [data-portal-theme="genz"] h1 { font-weight: 800; } [data-portal-theme="genz"] .panel h2 { font-weight: 800; } [data-portal-theme="genz"] .uid-pill { border-width: 2px; } [data-portal-theme="genz"] .sidebar-item { font-weight: 700; border-radius: 999px; margin: 2px 10px; border-left: none; } [data-portal-theme="genz"] .sidebar-item.active { background: linear-gradient(135deg, rgba(212,22,106,.18), rgba(138,43,226,.18)); } [data-portal-theme="genz"] .beta-badge { background: linear-gradient(135deg, #D4166A, #8A2BE2); } [data-portal-theme="genz"] .focus-rating { border-width: 2px; border-radius: 18px; } /* ════════════════════════════════════════════════════════════════════════ EXCITING — match-night energy: deep charcoal-maroon, pink glow, Archivo with tight condensed headings, gradient accents everywhere. ════════════════════════════════════════════════════════════════════════ */ :root[data-portal-theme="exciting"] { --font-body: "Archivo", -apple-system, sans-serif; --font-head: "Archivo", -apple-system, sans-serif; --radius-card: 18px; --radius-btn: 12px; --bg: #120409; --bg-card: #1d0810; --bg-raised: #2a0c18; --bg-hover: #371023; --border: #4d1630; --grid-line: rgba(77,22,48,.7); --text: #FBEAF2; --text-dim: #b57d97; --text-faint: #6b4256; --pink-glow: rgba(212,22,106,.35); --shadow-card: 0 0 0 1px rgba(212,22,106,.08), 0 10px 34px rgba(212,22,106,.10); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-portal-theme="exciting"] { --bg: #FFF5F9; --bg-card: #FFFFFF; --bg-raised: #FCE8F1; --bg-hover: #F8D9E8; --border: #F0BAD3; --grid-line: rgba(240,186,211,.7); --text: #2b0a19; --text-dim: #a05677; --text-faint: #cf93ac; --pink-glow: rgba(212,22,106,.15); --shadow-card: 0 0 0 1px rgba(212,22,106,.06), 0 10px 30px rgba(212,22,106,.08); color-scheme: light; } } :root[data-theme="light"][data-portal-theme="exciting"] { --bg: #FFF5F9; --bg-card: #FFFFFF; --bg-raised: #FCE8F1; --bg-hover: #F8D9E8; --border: #F0BAD3; --grid-line: rgba(240,186,211,.7); --text: #2b0a19; --text-dim: #a05677; --text-faint: #cf93ac; --pink-glow: rgba(212,22,106,.15); --shadow-card: 0 0 0 1px rgba(212,22,106,.06), 0 10px 30px rgba(212,22,106,.08); color-scheme: light; } :root[data-theme="dark"][data-portal-theme="exciting"] { --bg: #120409; --bg-card: #1d0810; --bg-raised: #2a0c18; --bg-hover: #371023; --border: #4d1630; --grid-line: rgba(77,22,48,.7); --text: #FBEAF2; --text-dim: #b57d97; --text-faint: #6b4256; --pink-glow: rgba(212,22,106,.35); --shadow-card: 0 0 0 1px rgba(212,22,106,.08), 0 10px 34px rgba(212,22,106,.10); color-scheme: dark; } [data-portal-theme="exciting"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 40% at 85% -10%, var(--pink-glow), transparent 70%), radial-gradient(50% 35% at 0% 110%, var(--pink-glow), transparent 70%); } [data-portal-theme="exciting"] h1 { font-stretch: condensed; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; } [data-portal-theme="exciting"] .panel h2 { font-stretch: condensed; text-transform: uppercase; letter-spacing: .08em; } [data-portal-theme="exciting"] .btn-primary { background: linear-gradient(120deg, #D4166A, #FF4D94); box-shadow: 0 4px 18px var(--pink-glow); text-transform: uppercase; letter-spacing: .05em; } [data-portal-theme="exciting"] .stat .num { color: var(--pink); text-shadow: 0 0 24px var(--pink-glow); } [data-portal-theme="exciting"] .sidebar-item.active { background: linear-gradient(90deg, var(--pink-glow), transparent); } [data-portal-theme="exciting"] #topbar { border-bottom: 1px solid var(--pink); box-shadow: 0 2px 20px var(--pink-glow); } [data-portal-theme="exciting"] .uid-pill { box-shadow: 0 0 12px var(--pink-glow); } [data-portal-theme="exciting"] .focus-rating-val { text-shadow: 0 0 18px var(--pink-glow); } /* ── Shared sizing bump (per feedback): every non-default theme reads bigger — root font-size up from base 15px, so all rem sizes scale. ── */ :root[data-portal-theme="modern"], [data-portal-theme="modern"] body, :root[data-portal-theme="ultramodern"], [data-portal-theme="ultramodern"] body, :root[data-portal-theme="exciting"], [data-portal-theme="exciting"] body { font-size: 17px; } :root[data-portal-theme="genz"], [data-portal-theme="genz"] body { font-size: 16px; } /* ════════════════════════════════════════════════════════════════════════ PINK BAND — modeled on the marketing site's CTA band: whole sections in solid brand pink with white text, generous radius, warm neutral page. ════════════════════════════════════════════════════════════════════════ */ :root[data-portal-theme="pinkband"] { --radius-card: 22px; --radius-btn: 999px; --bg: #21060f; --bg-card: #2e0a17; --bg-raised: #3e0f20; --bg-hover: #4b1428; --border: #5c1a33; --grid-line: rgba(92,26,51,.7); --text: #FDF0F6; --text-dim: #cf8ba8; --text-faint: #8a4d66; --pink-glow: rgba(212,22,106,.3); --shadow-card: 0 10px 30px rgba(0,0,0,.3); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-portal-theme="pinkband"] { --bg: #FFF8FB; --bg-card: #FFFFFF; --bg-raised: #FBEAF2; --bg-hover: #F6DBE9; --border: #F0C4d8; --grid-line: rgba(240,196,216,.7); --text: #33101f; --text-dim: #99506f; --text-faint: #c890a9; --pink-glow: rgba(212,22,106,.12); --shadow-card: 0 10px 30px rgba(212,22,106,.08); color-scheme: light; } } :root[data-theme="light"][data-portal-theme="pinkband"] { --bg: #FFF8FB; --bg-card: #FFFFFF; --bg-raised: #FBEAF2; --bg-hover: #F6DBE9; --border: #F0C4D8; --grid-line: rgba(240,196,216,.7); --text: #33101f; --text-dim: #99506f; --text-faint: #c890a9; --pink-glow: rgba(212,22,106,.12); --shadow-card: 0 10px 30px rgba(212,22,106,.08); color-scheme: light; } :root[data-theme="dark"][data-portal-theme="pinkband"] { --bg: #21060f; --bg-card: #2e0a17; --bg-raised: #3e0f20; --bg-hover: #4b1428; --border: #5c1a33; --grid-line: rgba(92,26,51,.7); --text: #FDF0F6; --text-dim: #cf8ba8; --text-faint: #8a4d66; --pink-glow: rgba(212,22,106,.3); --shadow-card: 0 10px 30px rgba(0,0,0,.3); color-scheme: dark; } /* The CTA-band moments: hero/welcome cards and stat blocks go SOLID pink with white text, exactly like the website's access band. */ [data-portal-theme="pinkband"] .welcome, [data-portal-theme="pinkband"] .stat.card { background: var(--pink); border-color: var(--pink); color: #fff; } [data-portal-theme="pinkband"] .welcome h1, [data-portal-theme="pinkband"] .welcome p, [data-portal-theme="pinkband"] .welcome #member-detail, [data-portal-theme="pinkband"] .stat .num, [data-portal-theme="pinkband"] .stat .label { color: #fff; opacity: .92; } [data-portal-theme="pinkband"] .welcome .uid-pill { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; } [data-portal-theme="pinkband"] .welcome .btn-ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; } /* Sidebar is a pink band too. */ [data-portal-theme="pinkband"] #sidebar { background: var(--pink); border-right-color: var(--pink); } [data-portal-theme="pinkband"] .sidebar-item { color: rgba(255,255,255,.75); border-left: none; border-radius: 999px; margin: 2px 12px; } [data-portal-theme="pinkband"] .sidebar-item:hover { color: #fff; background: rgba(255,255,255,.14); } [data-portal-theme="pinkband"] .sidebar-item.active { color: var(--pink); background: #fff; } /* Section headings pick up a pink chip look. */ [data-portal-theme="pinkband"] .panel h2 { color: var(--pink); } [data-portal-theme="pinkband"] .btn-primary { padding-left: 20px; padding-right: 20px; } [data-portal-theme="pinkband"] .beta-badge { background: #fff; color: var(--pink); } [data-portal-theme="pinkband"] #topbar { border-bottom: 2px solid var(--pink); } [data-portal-theme="pinkband"] .focus-rating { background: var(--pink); border-color: var(--pink); } [data-portal-theme="pinkband"] .focus-rating-label, [data-portal-theme="pinkband"] .focus-rating-val, [data-portal-theme="pinkband"] .focus-rating-val span { color: #fff; } :root[data-portal-theme="pinkband"], [data-portal-theme="pinkband"] body { font-size: 17px; } /* ════════════════════════════════════════════════════════════════════════ CYAN BAND — same recipe as Pink Band, re-tinted. ════════════════════════════════════════════════════════════════════════ */ :root[data-portal-theme="cyanband"] { --pink: #0891B2; --pink-dim: #0E7490; --radius-card: 22px; --radius-btn: 999px; --bg: #04191e; --bg-card: #072529; --bg-raised: #0b3238; --bg-hover: #0f4048; --border: #155059; --grid-line: rgba(21,80,89,.7); --text: #F0FBFD; --text-dim: #8bc4cf; --text-faint: #4d7f8a; --pink-glow: rgba(8,145,178,.3); --shadow-card: 0 10px 30px rgba(0,0,0,.3); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-portal-theme="cyanband"] { --bg: #F7FCFD; --bg-card: #FFFFFF; --bg-raised: #E9F6F9; --bg-hover: #DBF0F4; --border: #C4E4EB; --grid-line: rgba(196,228,235,.7); --text: #10292e; --text-dim: #4f8391; --text-faint: #90bcc8; --pink-glow: rgba(8,145,178,.12); --shadow-card: 0 10px 30px rgba(8,145,178,.08); color-scheme: light; } } :root[data-theme="light"][data-portal-theme="cyanband"] { --bg: #F7FCFD; --bg-card: #FFFFFF; --bg-raised: #E9F6F9; --bg-hover: #DBF0F4; --border: #C4E4EB; --grid-line: rgba(196,228,235,.7); --text: #10292e; --text-dim: #4f8391; --text-faint: #90bcc8; --pink-glow: rgba(8,145,178,.12); --shadow-card: 0 10px 30px rgba(8,145,178,.08); color-scheme: light; } :root[data-theme="dark"][data-portal-theme="cyanband"] { --bg: #04191e; --bg-card: #072529; --bg-raised: #0b3238; --bg-hover: #0f4048; --border: #155059; --grid-line: rgba(21,80,89,.7); --text: #F0FBFD; --text-dim: #8bc4cf; --text-faint: #4d7f8a; --pink-glow: rgba(8,145,178,.3); --shadow-card: 0 10px 30px rgba(0,0,0,.3); color-scheme: dark; } /* The CTA-band moments: hero/welcome cards and stat blocks go SOLID pink with white text, exactly like the website's access band. */ [data-portal-theme="cyanband"] .welcome, [data-portal-theme="cyanband"] .stat.card { background: var(--pink); border-color: var(--pink); color: #fff; } [data-portal-theme="cyanband"] .welcome h1, [data-portal-theme="cyanband"] .welcome p, [data-portal-theme="cyanband"] .welcome #member-detail, [data-portal-theme="cyanband"] .stat .num, [data-portal-theme="cyanband"] .stat .label { color: #fff; opacity: .92; } [data-portal-theme="cyanband"] .welcome .uid-pill { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; } [data-portal-theme="cyanband"] .welcome .btn-ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; } /* Sidebar is a pink band too. */ [data-portal-theme="cyanband"] #sidebar { background: var(--pink); border-right-color: var(--pink); } [data-portal-theme="cyanband"] .sidebar-item { color: rgba(255,255,255,.75); border-left: none; border-radius: 999px; margin: 2px 12px; } [data-portal-theme="cyanband"] .sidebar-item:hover { color: #fff; background: rgba(255,255,255,.14); } [data-portal-theme="cyanband"] .sidebar-item.active { color: var(--pink); background: #fff; } /* Section headings pick up a pink chip look. */ [data-portal-theme="cyanband"] .panel h2 { color: var(--pink); } [data-portal-theme="cyanband"] .btn-primary { padding-left: 20px; padding-right: 20px; } [data-portal-theme="cyanband"] .beta-badge { background: #fff; color: var(--pink); } [data-portal-theme="cyanband"] #topbar { border-bottom: 2px solid var(--pink); } [data-portal-theme="cyanband"] .focus-rating { background: var(--pink); border-color: var(--pink); } [data-portal-theme="cyanband"] .focus-rating-label, [data-portal-theme="cyanband"] .focus-rating-val, [data-portal-theme="cyanband"] .focus-rating-val span { color: #fff; } :root[data-portal-theme="cyanband"], [data-portal-theme="cyanband"] body { font-size: 17px; } /* ════════════════════════════════════════════════════════════════════════ GREEN BAND — same recipe as Pink Band, re-tinted. ════════════════════════════════════════════════════════════════════════ */ :root[data-portal-theme="greenband"] { --pink: #16A34A; --pink-dim: #15803D; --radius-card: 22px; --radius-btn: 999px; --bg: #071a0d; --bg-card: #0b2513; --bg-raised: #10321a; --bg-hover: #144021; --border: #1a5029; --grid-line: rgba(26,80,41,.7); --text: #F0FDF4; --text-dim: #8bcf9f; --text-faint: #4d8a5f; --pink-glow: rgba(22,163,74,.3); --shadow-card: 0 10px 30px rgba(0,0,0,.3); color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-portal-theme="greenband"] { --bg: #F7FDF9; --bg-card: #FFFFFF; --bg-raised: #E9F9EF; --bg-hover: #DBF4E3; --border: #C4EBD1; --grid-line: rgba(196,235,209,.7); --text: #102e19; --text-dim: #4f9166; --text-faint: #90c8a3; --pink-glow: rgba(22,163,74,.12); --shadow-card: 0 10px 30px rgba(22,163,74,.08); color-scheme: light; } } :root[data-theme="light"][data-portal-theme="greenband"] { --bg: #F7FDF9; --bg-card: #FFFFFF; --bg-raised: #E9F9EF; --bg-hover: #DBF4E3; --border: #C4EBD1; --grid-line: rgba(196,235,209,.7); --text: #102e19; --text-dim: #4f9166; --text-faint: #90c8a3; --pink-glow: rgba(22,163,74,.12); --shadow-card: 0 10px 30px rgba(22,163,74,.08); color-scheme: light; } :root[data-theme="dark"][data-portal-theme="greenband"] { --bg: #071a0d; --bg-card: #0b2513; --bg-raised: #10321a; --bg-hover: #144021; --border: #1a5029; --grid-line: rgba(26,80,41,.7); --text: #F0FDF4; --text-dim: #8bcf9f; --text-faint: #4d8a5f; --pink-glow: rgba(22,163,74,.3); --shadow-card: 0 10px 30px rgba(0,0,0,.3); color-scheme: dark; } /* The CTA-band moments: hero/welcome cards and stat blocks go SOLID pink with white text, exactly like the website's access band. */ [data-portal-theme="greenband"] .welcome, [data-portal-theme="greenband"] .stat.card { background: var(--pink); border-color: var(--pink); color: #fff; } [data-portal-theme="greenband"] .welcome h1, [data-portal-theme="greenband"] .welcome p, [data-portal-theme="greenband"] .welcome #member-detail, [data-portal-theme="greenband"] .stat .num, [data-portal-theme="greenband"] .stat .label { color: #fff; opacity: .92; } [data-portal-theme="greenband"] .welcome .uid-pill { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; } [data-portal-theme="greenband"] .welcome .btn-ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; } /* Sidebar is a pink band too. */ [data-portal-theme="greenband"] #sidebar { background: var(--pink); border-right-color: var(--pink); } [data-portal-theme="greenband"] .sidebar-item { color: rgba(255,255,255,.75); border-left: none; border-radius: 999px; margin: 2px 12px; } [data-portal-theme="greenband"] .sidebar-item:hover { color: #fff; background: rgba(255,255,255,.14); } [data-portal-theme="greenband"] .sidebar-item.active { color: var(--pink); background: #fff; } /* Section headings pick up a pink chip look. */ [data-portal-theme="greenband"] .panel h2 { color: var(--pink); } [data-portal-theme="greenband"] .btn-primary { padding-left: 20px; padding-right: 20px; } [data-portal-theme="greenband"] .beta-badge { background: #fff; color: var(--pink); } [data-portal-theme="greenband"] #topbar { border-bottom: 2px solid var(--pink); } [data-portal-theme="greenband"] .focus-rating { background: var(--pink); border-color: var(--pink); } [data-portal-theme="greenband"] .focus-rating-label, [data-portal-theme="greenband"] .focus-rating-val, [data-portal-theme="greenband"] .focus-rating-val span { color: #fff; } :root[data-portal-theme="greenband"], [data-portal-theme="greenband"] body { font-size: 17px; }