/* Demo themes. GridSync is white-label: each club overrides the base tokens in styles.css with its own colors. The swatches in the demo ribbon switch between these presets by setting data-theme on . The first is the default. */ :root,:root[data-theme="charcoal-red"]{ --navy:#2F3033; --navy-deep:#18191B; --red:#D0102F; --red-deep:#A00C24; --yellow:#DCDDDF; --focus:#2F3033; --paper:#F3F3F4; --line:#DEDFE2; --input-line:#BFC1C6; --soft:#ECEDEF; --soft-2:#FAFAFB; --info-bg:#E9EAEC; --info-line:#CDD0D4; } :root[data-theme="red-black"]{ --navy:#B5121B; --navy-deep:#6E0A10; --red:#1A1A1A; --red-deep:#000000; --yellow:#FFFFFF; --focus:#B5121B; --paper:#F5F3F3; --line:#E4DDDD; --input-line:#C9BDBD; --soft:#EFEBEB; --soft-2:#FBF9F9; --info-bg:#F3E7E7; --info-line:#E1C9CA; } :root[data-theme="blue-red"]{ --navy:#16588E; --navy-deep:#0A3357; --red:#E22718; --red-deep:#B51E12; --yellow:#A9D5FF; --focus:#16588E; --paper:#F1F5F9; --line:#D8E1EB; --input-line:#B5C4D6; --soft:#E9EFF5; --soft-2:#F8FAFC; --info-bg:#E1ECF7; --info-line:#BDD3EA; } :root[data-theme="navy-red"]{ --navy:#0B2545; --navy-deep:#071A33; --red:#C8102E; --red-deep:#8C0B20; --yellow:#FFD400; --focus:#0B2545; --paper:#F3F1EA; --line:#E2DDCE; --input-line:#C3BCA8; --soft:#F0EEE6; --soft-2:#FAFAF7; --info-bg:#E7ECF7; --info-line:#C3CEE6; } :root[data-theme="black-silver"]{ --navy:#1A1A1A; --navy-deep:#000000; --red:#BB0A30; --red-deep:#8A0723; --yellow:#D5D9DC; --focus:#1A1A1A; --paper:#F2F3F4; --line:#DDDFE1; --input-line:#BCC0C4; --soft:#ECEDEE; --soft-2:#FAFAFA; --info-bg:#E8EAEC; --info-line:#CBCFD3; } :root[data-theme="rosso-yellow"]{ --navy:#C00000; --navy-deep:#6B0000; --red:#1A1A1A; --red-deep:#000000; --yellow:#FFD800; --focus:#C00000; --paper:#F6F3EE; --line:#E6DED3; --input-line:#CDBFAE; --soft:#F0EBE4; --soft-2:#FBF9F6; --info-bg:#F5EBDA; --info-line:#E5D2B2; } /* The placeholder logo is wider than a typical club logo, so give it room. */ .logo-plate img{height:40px;} /* Demo notice above the page. */ .demo-ribbon{ background:#0F0F16; color:#CCCCDB; font:500 13px/1.45 'Inter',system-ui,sans-serif; text-align:center; padding:9px 16px; } .demo-ribbon b{color:#fff;} .demo-ribbon a{color:#36DEDE;font-weight:600;text-decoration:none;white-space:nowrap;} .demo-ribbon a:hover{text-decoration:underline;} .theme-picker{display:inline-flex;align-items:center;gap:8px;margin:0 10px;vertical-align:middle;} .theme-picker button{ width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer; border:2px solid rgba(255,255,255,.35); background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%); } .theme-picker button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px #36DEDE;}