/* ========================================================================== themes.css · Events platform theme tokens and base components One layout, many looks. A site picks a theme with . Hosts never write CSS. They pick a theme and optionally override --accent / --accent-2 from a validated colour picker (hex only). Fonts are self-hosted under /fonts/ so the CSP needs no third-party font host. ========================================================================== */ /* ---------- Token contract (every theme must define all of these) ---------- Colour --bg --surface --surface-2 --band --line --ink --muted --faint --accent --on-accent --accent-text --accent-2 --ticker-bg --ticker-ink --overlay --overlay-0 Type --display --display-weight --body --h-case --h-track --h-lh --ds --hero-size --h2-size --h3-size --h4-size --h5-size Shape --radius --chip-radius --btn-radius --btn-2-radius --nav-radius --btn-clip --btn-border --btn-shadow --card-shadow --border-w --feature-border --input-border -------------------------------------------------------------------------- */ /* ---------- Self-hosted fonts (download woff2 files into /fonts/) ---------- */ @font-face { font-family: 'Anton'; src: url('/fonts/anton.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Bebas Neue'; src: url('/fonts/bebas-neue.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/cormorant-garamond.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'DM Serif Display'; src: url('/fonts/dm-serif-display.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Jost'; src: url('/fonts/jost.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Karla'; src: url('/fonts/karla.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Libre Baskerville'; src: url('/fonts/libre-baskerville.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/fonts/manrope.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Marcellus'; src: url('/fonts/marcellus.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('/fonts/montserrat.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Mulish'; src: url('/fonts/mulish.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('/fonts/nunito.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Nunito Sans'; src: url('/fonts/nunito-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Oswald'; src: url('/fonts/oswald.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/fonts/poppins.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('/fonts/quicksand.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('/fonts/raleway.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Syne'; src: url('/fonts/syne.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* Theme 1 · Noir Gold */ :root, [data-theme="noir"] { --bg: #050505; --surface: #111111; --surface-2: #1A1A1A; --line: #2A2A2A; --band: #0B0B0B; --ink: #FFFFFF; --muted: #C9C9C9; --faint: #8A8A8A; --accent: #C5A021; --on-accent: #050505; --accent-text: #C5A021; --accent-2: #00F2FF; --ticker-bg: #C5A021; --ticker-ink: #050505; --overlay: rgba(5,5,5,0.96); --overlay-0: rgba(5,5,5,0); --display: 'Bebas Neue', sans-serif; --display-weight: 400; --body: Montserrat, sans-serif; --h-case: uppercase; --h-track: 0px; --h-lh: 0.88; --hero-size: 150px; --h2-size: 72px; --h3-size: 44px; --h4-size: 38px; --h5-size: 32px; --radius: 0px; --chip-radius: 0px; --btn-radius: 0px; --btn-2-radius: 50px; --nav-radius: 50%; --btn-clip: polygon(8% 0, 100% 0, 92% 100%, 0% 100%); --btn-border: 0px solid transparent; --btn-shadow: 0 0 18px rgba(197,160,33,0.45); --card-shadow: none; --border-w: 1px; --feature-border: 2px solid #C5A021; --input-border: 1px solid #3A3A3A; --ds: 1; } /* Theme 2 · Ivory Editorial */ [data-theme="ivory"] { --bg: #F7F2E8; --surface: #FFFDF8; --surface-2: #EAE2D2; --line: #D9CFBD; --band: #EFE7D8; --ink: #1B1712; --muted: #4E463B; --faint: #635A4D; --accent: #7A1F2B; --on-accent: #FFF8EE; --accent-text: #7A1F2B; --accent-2: #56633D; --ticker-bg: #1B1712; --ticker-ink: #F7F2E8; --overlay: rgba(255,253,248,0.97); --overlay-0: rgba(255,253,248,0); --display: 'DM Serif Display', serif; --display-weight: 400; --body: 'DM Sans', sans-serif; --h-case: none; --h-track: -0.5px; --h-lh: 1; --hero-size: 108px; --h2-size: 60px; --h3-size: 36px; --h4-size: 32px; --h5-size: 28px; --radius: 2px; --chip-radius: 2px; --btn-radius: 2px; --btn-2-radius: 2px; --nav-radius: 2px; --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: none; --card-shadow: none; --border-w: 1px; --feature-border: 1px solid #1B1712; --input-border: 1px solid #1B1712; --ds: 0.72; } /* Theme 3 · Blush Modern */ [data-theme="blush"] { --bg: #FBF1EE; --surface: #FFFFFF; --surface-2: #F3DDD7; --line: #EBCFC8; --band: #F6E4DF; --ink: #2A1A1F; --muted: #5A4349; --faint: #6B5258; --accent: #B8325A; --on-accent: #FFFFFF; --accent-text: #A62A4F; --accent-2: #6B3A7D; --ticker-bg: #B8325A; --ticker-ink: #FFFFFF; --overlay: rgba(255,255,255,0.96); --overlay-0: rgba(255,255,255,0); --display: Fraunces, serif; --display-weight: 600; --body: Manrope, sans-serif; --h-case: none; --h-track: -1px; --h-lh: 0.98; --hero-size: 104px; --h2-size: 60px; --h3-size: 34px; --h4-size: 30px; --h5-size: 26px; --radius: 22px; --chip-radius: 999px; --btn-radius: 999px; --btn-2-radius: 999px; --nav-radius: 50%; --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: 0 8px 20px rgba(184,50,90,0.25); --card-shadow: 0 12px 32px rgba(120,40,60,0.10); --border-w: 1px; --feature-border: 1px solid #EBCFC8; --input-border: 1px solid #D9B8B0; --ds: 0.7; } /* Theme 4 · Midnight Emerald */ [data-theme="emerald"] { --bg: #0B1A2B; --surface: #10243A; --surface-2: #173150; --line: #23405F; --band: #0E2034; --ink: #F4F1E8; --muted: #BFC8D2; --faint: #8C9AAA; --accent: #2BB673; --on-accent: #06140D; --accent-text: #3DD68C; --accent-2: #E9D8A6; --ticker-bg: #E9D8A6; --ticker-ink: #0B1A2B; --overlay: rgba(11,26,43,0.96); --overlay-0: rgba(11,26,43,0); --display: Syne, sans-serif; --display-weight: 800; --body: Karla, sans-serif; --h-case: uppercase; --h-track: 0px; --h-lh: 0.95; --hero-size: 86px; --h2-size: 54px; --h3-size: 30px; --h4-size: 26px; --h5-size: 24px; --radius: 14px; --chip-radius: 8px; --btn-radius: 10px; --btn-2-radius: 10px; --nav-radius: 12px; --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: none; --card-shadow: none; --border-w: 1px; --feature-border: 1px solid #2BB673; --input-border: 1px solid #2E5075; --ds: 0.57; } /* Theme 5 · Sunset Bold */ [data-theme="sunset"] { --bg: #FFF6E5; --surface: #FFFFFF; --surface-2: #FFE2B8; --line: #111111; --band: #FFE9C7; --ink: #111111; --muted: #3A3A3A; --faint: #5A5A5A; --accent: #FF5A1F; --on-accent: #111111; --accent-text: #C23A0A; --accent-2: #0E7C7B; --ticker-bg: #111111; --ticker-ink: #FFF6E5; --overlay: rgba(255,255,255,0.98); --overlay-0: rgba(255,255,255,0); --display: Anton, sans-serif; --display-weight: 400; --body: 'Work Sans', sans-serif; --h-case: uppercase; --h-track: 0.5px; --h-lh: 0.92; --hero-size: 128px; --h2-size: 66px; --h3-size: 40px; --h4-size: 34px; --h5-size: 30px; --radius: 0px; --chip-radius: 0px; --btn-radius: 0px; --btn-2-radius: 0px; --nav-radius: 0px; --btn-clip: none; --btn-border: 3px solid #111111; --btn-shadow: 4px 4px 0 #111111; --card-shadow: 6px 6px 0 #111111; --border-w: 3px; --feature-border: 3px solid #111111; --input-border: 3px solid #111111; --ds: 0.85; } /* Theme 6 · Crimson Noir */ [data-theme="crimson"] { --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: none; --card-shadow: none; --border-w: 1px; --overlay-0: rgba(10,10,10,0); --bg: #0A0A0A; --surface: #141414; --surface-2: #1E1E1E; --line: #2E2E2E; --band: #120808; --ink: #FFFFFF; --muted: #CFCFCF; --faint: #9A9A9A; --accent: #D7263D; --on-accent: #FFFFFF; --accent-text: #FF4D5E; --accent-2: #F2F2F2; --ticker-bg: #D7263D; --ticker-ink: #FFFFFF; --overlay: rgba(10,10,10,0.96); --display: Oswald, sans-serif; --display-weight: 600; --body: 'Nunito Sans', sans-serif; --h-case: uppercase; --h-track: 1px; --h-lh: 0.95; --hero-size: 128px; --h2-size: 64px; --h3-size: 38px; --h4-size: 32px; --h5-size: 28px; --radius: 0px; --chip-radius: 0px; --btn-radius: 0px; --btn-2-radius: 0px; --nav-radius: 0px; --feature-border: 2px solid #D7263D; --input-border: 1px solid #3A3A3A; --ds: 0.85; } /* Theme 7 · Teal Lagoon */ [data-theme="teal"] { --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: none; --card-shadow: 0 10px 28px rgba(15,124,122,0.10); --border-w: 1px; --overlay-0: rgba(255,255,255,0); --bg: #F1F8F6; --surface: #FFFFFF; --surface-2: #D6ECE7; --line: #C3E0D9; --band: #E3F2EE; --ink: #0E2A2B; --muted: #3C5556; --faint: #526B6B; --accent: #0F7C7A; --on-accent: #FFFFFF; --accent-text: #0B6664; --accent-2: #2E7D32; --ticker-bg: #0F7C7A; --ticker-ink: #FFFFFF; --overlay: rgba(255,255,255,0.96); --display: Poppins, sans-serif; --display-weight: 700; --body: Nunito, sans-serif; --h-case: none; --h-track: -1px; --h-lh: 1; --hero-size: 96px; --h2-size: 56px; --h3-size: 32px; --h4-size: 28px; --h5-size: 24px; --radius: 16px; --chip-radius: 999px; --btn-radius: 999px; --btn-2-radius: 999px; --nav-radius: 50%; --feature-border: 1px solid #C3E0D9; --input-border: 1px solid #9CCBC1; --ds: 0.64; } /* Theme 8 · Lavender Dream */ [data-theme="lavender"] { --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: 0 8px 20px rgba(123,79,196,0.25); --card-shadow: 0 12px 30px rgba(80,40,140,0.10); --border-w: 1px; --overlay-0: rgba(255,255,255,0); --bg: #F6F2FB; --surface: #FFFFFF; --surface-2: #E8DDF5; --line: #DDD0EE; --band: #EFE6F8; --ink: #24163A; --muted: #4F4266; --faint: #62567A; --accent: #7B4FC4; --on-accent: #FFFFFF; --accent-text: #6A3FB5; --accent-2: #A8376F; --ticker-bg: #7B4FC4; --ticker-ink: #FFFFFF; --overlay: rgba(255,255,255,0.96); --display: 'Playfair Display', serif; --display-weight: 600; --body: Quicksand, sans-serif; --h-case: none; --h-track: -0.5px; --h-lh: 1; --hero-size: 104px; --h2-size: 58px; --h3-size: 34px; --h4-size: 30px; --h5-size: 26px; --radius: 20px; --chip-radius: 999px; --btn-radius: 999px; --btn-2-radius: 999px; --nav-radius: 50%; --feature-border: 1px solid #DDD0EE; --input-border: 1px solid #C9B6E6; --ds: 0.7; } /* Theme 9 · Rose Gold */ [data-theme="rosegold"] { --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: none; --card-shadow: none; --border-w: 1px; --overlay-0: rgba(255,255,255,0); --bg: #FBF6F2; --surface: #FFFFFF; --surface-2: #F0E1D8; --line: #E3CCBF; --band: #F5EAE3; --ink: #2B2323; --muted: #574A47; --faint: #6A5C58; --accent: #A55C67; --on-accent: #FFFFFF; --accent-text: #99505B; --accent-2: #86683A; --ticker-bg: #2B2323; --ticker-ink: #F3D9C7; --overlay: rgba(255,255,255,0.97); --display: 'Cormorant Garamond', serif; --display-weight: 600; --body: Jost, sans-serif; --h-case: none; --h-track: 0px; --h-lh: 0.95; --hero-size: 118px; --h2-size: 66px; --h3-size: 40px; --h4-size: 34px; --h5-size: 30px; --radius: 6px; --chip-radius: 4px; --btn-radius: 4px; --btn-2-radius: 4px; --nav-radius: 50%; --feature-border: 1px solid #B98A4E; --input-border: 1px solid #C9AE9E; --ds: 0.79; } /* Theme 10 · Sage & Blush */ [data-theme="sageblush"] { --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: none; --card-shadow: 0 8px 24px rgba(40,60,45,0.08); --border-w: 1px; --overlay-0: rgba(255,255,255,0); --bg: #F4F6F0; --surface: #FFFFFF; --surface-2: #E3E9DC; --line: #D3DCCB; --band: #FBEDEF; --ink: #1F2A22; --muted: #48554B; --faint: #5B675D; --accent: #56765B; --on-accent: #FFFFFF; --accent-text: #4B6B50; --accent-2: #AE4862; --ticker-bg: #F2C9CF; --ticker-ink: #1F2A22; --overlay: rgba(255,255,255,0.96); --display: 'Libre Baskerville', serif; --display-weight: 700; --body: Mulish, sans-serif; --h-case: none; --h-track: -1px; --h-lh: 1.02; --hero-size: 86px; --h2-size: 50px; --h3-size: 30px; --h4-size: 26px; --h5-size: 24px; --radius: 12px; --chip-radius: 999px; --btn-radius: 999px; --btn-2-radius: 999px; --nav-radius: 50%; --feature-border: 1px solid #D3DCCB; --input-border: 1px solid #B7C4AE; --ds: 0.58; } /* Theme 11 · Plum & Gold */ [data-theme="plumgold"] { --btn-clip: none; --btn-border: 0px solid transparent; --btn-shadow: none; --card-shadow: none; --border-w: 1px; --overlay-0: rgba(30,15,36,0); --bg: #1E0F24; --surface: #2A1633; --surface-2: #3A2045; --line: #4D2D5A; --band: #26132E; --ink: #FBF4EC; --muted: #D6C7D9; --faint: #A994AE; --accent: #D4AF37; --on-accent: #1E0F24; --accent-text: #E2C25B; --accent-2: #E7A6C4; --ticker-bg: #D4AF37; --ticker-ink: #1E0F24; --overlay: rgba(30,15,36,0.96); --display: Marcellus, serif; --display-weight: 400; --body: Raleway, sans-serif; --h-case: uppercase; --h-track: 2px; --h-lh: 0.98; --hero-size: 86px; --h2-size: 52px; --h3-size: 30px; --h4-size: 26px; --h5-size: 24px; --radius: 4px; --chip-radius: 2px; --btn-radius: 0px; --btn-2-radius: 0px; --nav-radius: 50%; --feature-border: 1px solid #D4AF37; --input-border: 1px solid #5E3A6C; --ds: 0.58; } /* ========================================================================== Base components. Pages use these classes only. No colours below this line. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; } a { color: var(--accent-text); text-decoration: none; } a:hover { opacity: 0.85; } :focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; } img { max-width: 100%; display: block; } /* Headings */ .h-hero, .h1, .h2, .h3, .h4, .h5, .display { font-family: var(--display); font-weight: var(--display-weight); text-transform: var(--h-case); letter-spacing: var(--h-track); line-height: var(--h-lh); margin: 0; } .h-hero { font-size: clamp(56px, 10vw, var(--hero-size)); } .h1 { font-size: clamp(44px, 7vw, calc(110px * var(--ds))); } .h2 { font-size: clamp(34px, 5vw, var(--h2-size)); color: var(--accent-text); } .h3 { font-size: clamp(26px, 3.2vw, var(--h3-size)); } .h4 { font-size: var(--h4-size); } .h5 { font-size: var(--h5-size); } .eyebrow { font-weight: 800; font-size: 14px; letter-spacing: 5px; text-transform: uppercase; color: var(--accent-2); } .lead { font-size: 18px; line-height: 1.7; color: var(--muted); } .muted { color: var(--muted); } .meta { font-size: 13px; color: var(--muted); } /* Ticker */ .ticker { background: var(--ticker-bg); color: var(--ticker-ink); font-weight: 800; font-size: 13px; letter-spacing: 2px; padding: 12px 0; white-space: nowrap; overflow: hidden; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 16px 36px; cursor: pointer; background: var(--accent); color: var(--on-accent); font-family: var(--body); font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; border: var(--btn-border); border-radius: var(--btn-radius); clip-path: var(--btn-clip); box-shadow: var(--btn-shadow); transition: transform 0.15s ease; } .btn:hover { transform: translateY(-2px); opacity: 1; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 32px; background: transparent; color: var(--accent-text); border: 2px solid var(--accent-text); border-radius: var(--btn-2-radius); font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .btn-quiet { background: transparent; border: 2px solid var(--muted); color: var(--ink); border-radius: var(--btn-radius); padding: 14px 28px; font-weight: 800; } .btn-icon { width: 56px; height: 56px; padding: 0; border-radius: var(--nav-radius); background: var(--accent); color: var(--on-accent); border: var(--btn-border); box-shadow: var(--btn-shadow); cursor: pointer; } .btn[disabled], .btn-secondary[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; } /* Chips and badges */ .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 2px solid var(--line); border-radius: var(--btn-2-radius); background: transparent; color: var(--ink); font-weight: 800; font-size: 13px; letter-spacing: 2px; cursor: pointer; } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .badge { display: inline-block; padding: 6px 12px; font-weight: 800; font-size: 12px; letter-spacing: 1px; border-radius: var(--chip-radius); background: var(--accent); color: var(--on-accent); } .badge-alt { background: var(--accent-2); color: var(--bg); } .badge-muted { background: var(--surface-2); color: var(--ink); } /* Cards and surfaces */ .card { background: var(--surface); color: var(--ink); border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; } .card-feature { background: var(--surface); border: var(--feature-border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; } .card-media { background: var(--surface-2); position: relative; aspect-ratio: 4 / 3; } .card-media img { width: 100%; height: 100%; object-fit: cover; } .card-overlay { background: linear-gradient(to top, var(--overlay) 58%, var(--overlay-0)); } .band { background: var(--band); border-top: 4px solid var(--accent); } .panel-accent { background: var(--accent); color: var(--on-accent); border-radius: var(--radius); border: var(--btn-border); box-shadow: var(--card-shadow); } .divider { height: var(--border-w); background: var(--line); border: 0; } /* Event row (calendar) */ .event-row { display: grid; grid-template-columns: 150px 1fr 200px 240px; gap: 32px; align-items: center; padding: 26px 32px; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); } .event-row.is-main { border-color: var(--accent); } .event-date { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(64px * var(--ds)); color: var(--accent-text); line-height: 1; } /* Forms */ .label { font-weight: 800; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .input, .textarea, .select { width: 100%; min-height: 52px; padding: 12px 16px; background: var(--surface); color: var(--ink); border: var(--input-border); border-radius: var(--btn-radius); font-family: var(--body); font-size: 15px; } .input::placeholder, .textarea::placeholder { color: var(--faint); } .progress { height: 8px; background: var(--line); border-radius: 8px; overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--accent); } /* Layout helpers */ .container { width: min(1280px, 100% - 32px); margin-inline: auto; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .event-row { grid-template-columns: 1fr; gap: 12px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }