/* ========================================================================== PPR Performing Arts — Design Tokens Aesthetic: Sunlit + warm + theatrical poster ========================================================================== */ :root { /* Palette: Sunlit Terracotta (default) */ --c-ink: #2A1820; --c-ink-soft: #4A3540; --c-cream: #FBF3E2; --c-cream-deep: #F4E6C8; --c-paper: #FFFBF1; --c-primary: #D8552B; /* terracotta */ --c-primary-deep: #B43E1A; --c-accent: #E5A024; /* ochre */ --c-accent-deep: #C28215; --c-tertiary: #7A8B5C; /* sage */ --c-plum: #6B2A3E; --c-line: rgba(42, 24, 32, 0.16); --c-line-strong: rgba(42, 24, 32, 0.85); /* Type */ --f-display: "Bricolage Grotesque", "Familjen Grotesk", system-ui, sans-serif; --f-body: "DM Sans", "Inter", system-ui, sans-serif; --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* Radii / shadow */ --r-sm: 6px; --r-md: 12px; --r-lg: 22px; --r-pill: 999px; --shadow-card: 0 2px 0 var(--c-line-strong); --shadow-lift: 6px 6px 0 var(--c-ink); } /* Page-scoped palette: Love Park Red (CR #268) --------------------------- When the SPA route is /shop, the root gets data-page="shop" and the orange/terracotta brand tones flip to Love Park red. Scoped so the rest of the site keeps the sunlit-terracotta default. Accent is also pulled toward red so the ochre buttons/stickers don't clash on the red shop page. */ [data-page="shop"] { --c-primary: #DC3522; --c-primary-deep: #A82518; --c-accent: #E54E2B; --c-accent-deep: #B83817; } /* Alt palette: Stage Plum */ [data-palette="plum"] { --c-ink: #1F1218; --c-ink-soft: #3D2530; --c-cream: #F6EBDA; --c-cream-deep: #ECD9B8; --c-paper: #FFF8EC; --c-primary: #8E2A4C; --c-primary-deep: #6A1A38; --c-accent: #E8B233; --c-accent-deep: #BF8C18; --c-tertiary: #4F7A6E; --c-plum: #4D1B30; } /* Alt palette: Daylight Citrus */ [data-palette="citrus"] { --c-ink: #1A2018; --c-ink-soft: #34402F; --c-cream: #FBF7E4; --c-cream-deep: #F1ECC6; --c-paper: #FFFCEC; --c-primary: #E8782A; --c-primary-deep: #C25B16; --c-accent: #D6BB1E; --c-accent-deep: #A89212; --c-tertiary: #5C8B72; --c-plum: #5A3A1F; } /* Alt palette: Civic Cobalt */ [data-palette="cobalt"] { --c-ink: #0F1A2A; --c-ink-soft: #2A3850; --c-cream: #F6F1E5; --c-cream-deep: #EAE0C7; --c-paper: #FCF8EC; --c-primary: #1F4ED8; --c-primary-deep: #163AA8; --c-accent: #E5A024; --c-accent-deep: #BB8014; --c-tertiary: #C44A3A; --c-plum: #2A1830; } /* Type pairings */ [data-type="grotesque"] { --f-display: "Bricolage Grotesque", system-ui, sans-serif; --f-body: "DM Sans", system-ui, sans-serif; } [data-type="condensed"] { --f-display: "Familjen Grotesk", "Archivo Narrow", system-ui, sans-serif; --f-body: "Familjen Grotesk", system-ui, sans-serif; } [data-type="editorial"] { --f-display: "Fraunces", "Playfair Display", serif; --f-body: "DM Sans", system-ui, sans-serif; } [data-type="poster"] { --f-display: "Anton", "Oswald", "Archivo Black", system-ui, sans-serif; --f-body: "DM Sans", system-ui, sans-serif; } /* Reset-ish */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--c-cream); color: var(--c-ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; cursor: pointer; } /* Site shell */ .site { min-height: 100vh; background: var(--c-cream); } .container { max-width: 1320px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .container { padding: 0 20px; } } /* Display type */ .display { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; color: var(--c-ink); } .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill); font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; border: 2px solid var(--c-ink); background: var(--c-primary); color: var(--c-paper); text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease; box-shadow: 4px 4px 0 var(--c-ink); } .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c-ink); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--c-ink); } .btn.secondary { background: var(--c-paper); color: var(--c-ink); } .btn.ghost { background: transparent; color: var(--c-ink); box-shadow: none; } .btn.ghost:hover { background: var(--c-cream-deep); color: var(--c-ink); transform: none; box-shadow: none; } .btn.ochre { background: var(--c-accent); color: var(--c-ink); } .btn.small { padding: 9px 16px; font-size: 13px; } /* Cards */ .card { background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 24px; } /* Striped placeholder for imagery */ .placeholder { position: relative; background: repeating-linear-gradient( 135deg, var(--c-cream-deep) 0 14px, var(--c-cream) 14px 28px ); border: 2px solid var(--c-ink); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--c-ink-soft); text-align: center; padding: 20px; overflow: hidden; } .placeholder::before { content: "[ " attr(data-label) " ]"; } /* Tag / chip */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--c-cream-deep); border: 1.5px solid var(--c-ink); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink); } .chip.dance { background: #F5C6B0; } .chip.musical { background: #F2D88F; } .chip.singing { background: #C9D9B0; } .chip.intro { background: #E8C9D2; } .chip.yptc { background: #C8C0E0; } /* Sticker badge (rotated tag) */ .sticker { display: inline-block; background: var(--c-accent); border: 2px solid var(--c-ink); border-radius: 999px; padding: 8px 16px; font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--c-ink); } /* Section spacing */ .section { padding: 96px 0; } .section-tight { padding: 56px 0; } @media (max-width: 720px) { .section { padding: 64px 0; } } /* Forms */ /* min-width: 0 lets a .field shrink inside flex/grid containers (otherwise intrinsic input widths -- especially date/number -- push parents wider and overflow the modal). */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-soft); } .field input, .field select, .field textarea { font-family: var(--f-body); font-size: 16px; padding: 12px 14px; border: 2px solid var(--c-ink); border-radius: var(--r-md); background: var(--c-paper); color: var(--c-ink); outline: none; transition: box-shadow 120ms ease; /* width:100% + border-box keeps inputs inside their grid cell so the register modal doesn't overflow horizontally. */ width: 100%; max-width: 100%; box-sizing: border-box; } .field input:focus, .field select:focus, .field textarea:focus { box-shadow: 3px 3px 0 var(--c-primary); } /* Divider rule with type */ .rule { display: flex; align-items: center; gap: 16px; margin: 32px 0; } .rule::before, .rule::after { content: ""; flex: 1; height: 2px; background: var(--c-ink); } /* Marquee */ .marquee { background: var(--c-ink); color: var(--c-cream); border-top: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); overflow: hidden; font-family: var(--f-display); font-size: 28px; letter-spacing: -0.01em; padding: 14px 0; white-space: nowrap; } .marquee-track { display: inline-block; animation: marquee 40s linear infinite; padding-left: 100%; } .marquee-track span { margin: 0 32px; } .marquee-track .star { color: var(--c-accent); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Scroll snap reveal */ .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; } .fade-up.in { opacity: 1; transform: translateY(0); } /* Responsive grid utilities — used inside the register modal and forms. Inline style grids would not collapse on small screens; these classes do. */ .fg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fg-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .fg-4 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; } .fg-name-dob-age { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .fg-2 { grid-template-columns: 1fr; } .fg-3 { grid-template-columns: 1fr; } .fg-4 { grid-template-columns: 1fr; } .fg-name-dob-age { grid-template-columns: 1fr 1fr; } .fg-name-dob-age > :first-child { grid-column: 1 / -1; } } /* Dashboard responsive tables and KPI grid */ .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .dash-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 900px) { .dash-kpis { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .dash-kpis { grid-template-columns: 1fr; } }