/* ============================================================ STYLES.CSS - MNempowered Two layers: PALETTE (8 neutrals + 12 accents) and COMPONENTS (each themed property gets two rules - one scoped to .theme-dark, one to .theme-light, reading palette tokens directly). Verbose- explicit by design; no role indirection. FOUR CORE NEUTRAL ANCHORS --white L=100 light bg + utility --light L=97.5 text on dark surfaces --mid L=50 neutral --dark L=20 dark bg + text on light surfaces THEMING always carries .theme-dark or .theme-light. Header, footer, and spine are hardcoded dark and ignore the theme system. Forms are forced light via .form-section. PROHIBITED on hover/focus/active: - transform, box-shadow, opacity (children exempt), underline, filter (except documented brightness rule) PROHIBITED at rest: - box-shadow on cards/panels/buttons, decorative drop-shadow/glow ALLOWED hover feedback: - color/surface flips, child icon opacity, brightness filter SECTIONS 1. Tokens 2. Themes 3. Reset + base 4. Layout primitives 5. Spine [always dark] 6. Header + nav [always dark] 7. Footer [always dark] 8. Hero 9. Section labels 10. CTA text 11. Buttons 12. Cards 13. Tile hover 14. Map 15. Feature pair 16. Display + lede 17. Forms [forced light] 18. Links 19. Icons + SVG 20. Mono uppercase [consolidated] 21. Utilities + a11y 22. Mobile ============================================================ */ /* ============================================================ 1. TOKENS ============================================================ */ :root { /* Core anchors - used inversely per theme. --light at 97.5 gives hover-to-white a 2.5pp lift (perceptually equal to dark side's 5pp; L curve steepens near the ceiling). */ --white: hsl(0, 0%, 100%); --light-hover: hsl(190, 0.25%, 100%); --light: hsl(190, 0.5%, 97.5%); --mid: hsl(190, 4%, 50%); --dark-hover: hsl(190, 5%, 35%); --dark: hsl(190, 8.5%, 20%); --black: hsl(190, 9%, 10%); /* Numbered gray tiers - lower = closer to primary text on its surface. Suffix indicates default surface pairing; cross-suffix uses are valid when the value is what's needed. */ --gray1-on-dark: hsl(190, 1%, 90%); --gray1-on-light: hsl(190, 7%, 22%); --gray2-on-dark: hsl(190, 1.5%, 78%); --gray2-on-light: hsl(190, 7%, 35%); --gray3-on-dark: hsl(190, 3.5%, 60%); --gray3-on-light: hsl(190, 6%, 40%); /* Cyan accent. Press = rest. */ --cyan-on-dark-hover: hsl(190, 92%, 70%); --cyan-on-dark: hsl(190, 92%, 50%); --cyan-on-light-hover: hsl(190, 92%, 42.5%); --cyan-on-light: hsl(190, 92%, 30%); /* Red accent. Press = rest. */ --red-on-dark-hover: hsl(355, 85%, 52%); --red-on-dark: hsl(355, 85%, 47%); --red-on-light-hover: hsl(355, 85%, 43%); --red-on-light: rgb(189, 15, 30); /* Rhythm. */ --display: "Bebas Neue", "Impact", sans-serif; --body: "DM Sans", system-ui, sans-serif; --mono: "DM Mono", ui-monospace, monospace; --serif: "Lora", Georgia, serif; --max: 1200px; --gutter: clamp(1rem, 4vw, 3rem); --section-pad-y: 9rem; --eyebrow-pad: 2rem; --map-meta-gap: 0.5rem; } .mono { font-family: var(--mono); font-size: 0.75em; letter-spacing: 0.1em; color: var(--gray3-on-light); } .theme-dark .mono { color: var(--gray3-on-dark); } em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05em; } /* ============================================================ 2. THEMES ============================================================ */ .theme-dark { background: var(--dark); color: var(--light); } .theme-light { background: var(--white); color: var(--dark); } /* ============================================================ 3. RESET + BASE ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; } body { font-family: var(--body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } img, svg { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } /* Body-prose links - cyan rest, hover-tier on hover. */ .theme-dark p a { color: var(--cyan-on-dark); } .theme-dark p a:hover, .theme-dark p a:focus-visible { color: var(--cyan-on-dark-hover); } .theme-dark p a:active { color: var(--cyan-on-dark); } .theme-light p a { color: var(--cyan-on-light); } .theme-light p a:hover, .theme-light p a:focus-visible { color: var(--cyan-on-light-hover); } .theme-light p a:active { color: var(--cyan-on-light); } /* ============================================================ 4. LAYOUT PRIMITIVES ============================================================ */ /* Leaves room for the fixed spine; 40px matches .spine width. */ .page { padding-left: 40px; } .section { padding: var(--section-pad-y) var(--gutter); } .section .inner { max-width: var(--max); margin: 0 auto; } .section h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; margin-bottom: 2rem; } /* Tightens top padding by half. Use when continuing from a categorically related section above. */ .section.section-tight-top { padding-top: calc(var(--section-pad-y) * 0.25); } .section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .section-header h2 { margin-bottom: 0; } /* ============================================================ 5. SPINE [always dark] ============================================================ */ .spine { position: fixed; top: 0; left: 0; bottom: 0; width: 40px; background: var(--red-on-light); display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 150ms ease; } .spine:hover { background: var(--cyan-on-dark); } .spine-text, .spine-text-alt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.25em; color: var(--white); white-space: nowrap; pointer-events: none; transition: opacity 150ms ease; } .spine-text { opacity: 1; } .spine-text-alt { opacity: 0; } .spine:hover .spine-text { opacity: 0; } .spine:hover .spine-text-alt { opacity: 1; } .show-emphasis { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.25em; letter-spacing: 0.1em; text-transform: none; line-height: 1; margin-left: -0.4em; margin-right: -0.1em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ============================================================ 6. HEADER + NAV [always dark] ============================================================ */ .site-header { position: sticky; top: 0; z-index: 5; padding: 1.25rem var(--gutter); background: var(--dark); color: var(--light); border-bottom: 1px solid hsl(190, 1.5%, 78%, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-header .inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: 0.75rem; } .logo img, .logo svg { height: 40px; width: auto; } nav.site-nav ul { list-style: none; display: flex; gap: 1.75rem; } nav.site-nav a, nav.site-nav .dropdown { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; color: var(--gray2-on-dark); padding: 0.5rem 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; transition: color 120ms ease; } nav.site-nav a.active { color: var(--light-hover); border-bottom-color: var(--cyan-on-dark); } nav.site-nav a:not(.active):not(.nav-featured):hover { color: var(--light-hover); } nav.site-nav a.active:hover { color: var(--light-hover); } /* Featured nav item - red accent for high-priority pages. */ nav.site-nav a.nav-featured, nav.site-nav .dropdown.nav-featured { color: var(--red-on-dark); } nav.site-nav a.nav-featured:not(.active):hover, nav.site-nav a.nav-featured.active:hover, nav.site-nav .dropdown.nav-featured:hover { color: var(--red-on-dark-hover); } nav.site-nav a.nav-featured.active, nav.site-nav .dropdown.nav-featured.active { border-bottom-color: var(--red-on-dark); } nav.site-nav .nav-dropdown { position: relative; display: inline-flex; align-items: center; } nav.site-nav .dropdown { cursor: pointer; list-style: none; gap: 0.5rem; } nav.site-nav .dropdown::-webkit-details-marker { display: none; } nav.site-nav .dropdown::after { content: ""; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; transition: transform 150ms ease; } nav.site-nav details[open] > .dropdown::after { transform: rotate(90deg); } nav.site-nav .dropdown:hover { color: var(--light-hover); } /* Surface dropdown's active state when a child is current page, without duplicating .active onto the summary. */ nav.site-nav .nav-dropdown:has(a.active) .dropdown.nav-featured { color: var(--red-on-dark-hover); border-bottom-color: var(--red-on-dark); } nav.site-nav .nav-submenu { position: absolute; top: 100%; left: -1rem; margin-top: 0.5rem; padding: 0.75rem 1rem; background: var(--dark); border: 1px solid hsl(190, 1.5%, 78%, 0.12); list-style: none; display: none; flex-direction: column; gap: 0.5rem; min-width: 12rem; z-index: 10; } nav.site-nav details[open] .nav-submenu { display: flex; } nav.site-nav .nav-submenu li { list-style: none; } nav.site-nav .nav-submenu a { padding: 0.25rem 0; white-space: nowrap; } nav.site-nav .nav-submenu a:not(.active):hover { color: var(--light-hover); } nav.site-nav .nav-submenu a.active { border-bottom-color: transparent; } /* Coming-soon nav item - non-link, swaps to "Coming soon" on hover via crossfade (same pattern as .spine vertical text). */ nav.site-nav .nav-soon { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; color: var(--gray2-on-dark); padding: 0.5rem 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; position: relative; cursor: default; transition: color 120ms ease; } nav.site-nav .nav-submenu .nav-soon { color: var(--mid); } nav.site-nav .nav-soon::after { content: "Coming\ASoon"; white-space: pre; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; line-height: 1.4; color: var(--light-hover); text-align: center; opacity: 0; transition: opacity 180ms ease; pointer-events: none; } /* "Up next" override for the chants placeholder. */ nav.site-nav .nav-soon-up-next::after { content: "adding by 04.30"; } nav.site-nav .nav-soon:hover { color: transparent; } nav.site-nav .nav-soon:hover::after { opacity: 1; } /* ============================================================ 7. FOOTER [always dark] ------------------------------------------------------------ .theme-dark on the footer element is LOAD-BEARING. The dark- scoped .link-hidden rules below need to win over any body- level .theme-light .link-hidden when the page is on a light theme. Do not remove the class from section-footer.njk. ============================================================ */ .site-footer { margin-top: auto; padding: 2.5rem var(--gutter) 2rem; background: var(--dark); color: var(--mid); border-top: 1px solid hsl(190, 1.5%, 78%, 0.12); } .site-footer .inner { max-width: var(--max); margin: 0 auto; padding-left: 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; } .site-footer .inner > :nth-child(1) { justify-self: start; } .site-footer .inner > :nth-child(2) { justify-self: center; } .site-footer .inner > :nth-child(3) { justify-self: end; } .footer-social { display: flex; align-items: center; gap: 1.25rem; } .footer-social a { display: inline-block; width: 24px; height: 24px; color: var(--gray2-on-dark); transition: color 120ms ease; } .footer-social a:hover, .footer-social a:focus-visible { color: var(--cyan-on-dark); } .footer-social svg { width: 100%; height: 100%; } .site-footer .meta { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.15em; } /* Compound .site-footer.theme-dark raises specificity to (0,3,0) so these win over body-scope .theme-light .link-hidden rules. */ .site-footer.theme-dark .link-hidden { color: var(--light); } .site-footer.theme-dark .link-hidden:hover, .site-footer.theme-dark .link-hidden:focus-visible { color: var(--cyan-on-dark-hover); } .site-footer.theme-dark .link-hidden:active { color: var(--light); } .site-footer.theme-dark .link-muted { color: var(--mid); } .site-footer.theme-dark .link-muted:hover, .site-footer.theme-dark .link-muted:focus-visible { color: var(--cyan-on-dark); } .site-footer.theme-dark .link-muted:active { color: var(--mid); } /* ============================================================ 8. HERO ============================================================ */ .hero { padding: var(--section-pad-y) var(--gutter); } .hero .inner { max-width: var(--max); margin: 0 auto; } .hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.92; letter-spacing: 0.01em; margin-bottom: 1.5rem; } .hero .lede { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 65ch; } .theme-dark .hero h1 .accent { color: var(--cyan-on-dark); } .theme-light .hero h1 .accent { color: var(--cyan-on-light); } /* ============================================================ 9. SECTION LABELS (EYEBROWS) ============================================================ */ .section-label, .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.25em; margin-bottom: var(--eyebrow-pad); } .theme-dark .section-label, .theme-dark .eyebrow { color: var(--gray2-on-dark); } .theme-light .section-label, .theme-light .eyebrow { color: var(--gray3-on-light); } /* ============================================================ 10. CTA TEXT ============================================================ */ .cta-text { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.25em; transition: color 150ms ease; } .cta-text svg { width: 14px; height: 14px; } .theme-dark .cta-text { color: var(--light); } .theme-dark .cta-text:hover, .theme-dark .cta-text:focus-visible { color: var(--light-hover); } .theme-dark .cta-text:active { color: var(--light); } .theme-light .cta-text { color: var(--dark); } .theme-light .cta-text:hover, .theme-light .cta-text:focus-visible { color: var(--mid); } .theme-light .cta-text:active { color: var(--dark); } /* ---- CTA text crossfade swap (same pattern as nav-soon) ---- */ .cta-text-swap { position: relative; } .cta-text-rest, .cta-text-hover { transition: opacity 180ms ease; } .cta-text-hover { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: calc(18px + 0.75rem); opacity: 0; pointer-events: none; line-height: 1.4; text-align: center; } .cta-text-swap:hover .cta-text-rest { opacity: 0; } .cta-text-swap:hover .cta-text-hover { opacity: 1; } /* ============================================================ 11. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.2em; padding: 0.9rem 1.5rem; border: 1px solid; color: var(--light); transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .btn:hover, .btn:focus-visible { color: var(--light-hover); } .btn svg { width: 14px; height: 14px; flex-shrink: 0; } .theme-dark .btn { background: var(--red-on-dark); border-color: var(--red-on-dark); } .theme-dark .btn:hover { background: var(--red-on-dark-hover); border-color: var(--red-on-dark-hover); } .theme-dark .btn:active { background: var(--red-on-dark); border-color: var(--red-on-dark); } .theme-light .btn { background: var(--red-on-light); border-color: var(--red-on-light); } .theme-light .btn:hover { background: var(--red-on-light-hover); border-color: var(--red-on-light-hover); } .theme-light .btn:active { background: var(--red-on-light); border-color: var(--red-on-light); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 0.5rem; } /* ============================================================ 12. CARDS ------------------------------------------------------------ .card base + hover inversion .card-column flex column with auto-margin CTA .card-subgrid subgrid row tracks for sibling alignment .card-pin opt-in corner icon .card-light pinned light surface (no flip) .card-dark pinned dark surface (no flip) .is-upcoming placeholder with overlay + stamp On dark pages: card rests dark, flips light on hover. On light pages: card rests light, flips dark on hover. .card-light/.card-dark/.is-upcoming opt out via :not() chains. ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; align-items: stretch; margin-top: 0.75rem; position: relative; } .card-stack { display: flex; flex-direction: column; gap: 0; } .card-stack .card { flex: 1; } .card { position: relative; padding: 1rem; border: 1px solid; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .card-link { display: block; color: inherit; } .card a:not(.card-link), .card .info, .card .details { position: relative; z-index: 2; } /* Children fade together with the card surface. Specific list, not a universal selector - only descendants that change color. */ .card h3, .card h4, .card h4 .cyan, .card p, .card .tag, .card .cta, .card .time, .card .info, .card .details, .card .details strong { transition: color 120ms ease; } /* ---- Card surface: rest + hover (themed defaults) ---- */ .theme-dark .card:not(.is-upcoming):not(.card-light):not(.card-dark) { background: var(--dark); color: var(--light); border-color: var(--gray2-on-light); } .theme-dark .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover { background: var(--white); color: var(--dark); border-color: var(--white); } .theme-light .card:not(.is-upcoming):not(.card-light):not(.card-dark) { background: var(--white); color: var(--dark); border-color: var(--gray1-on-dark); } .theme-light .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover { background: var(--dark); color: var(--light); border-color: var(--dark); } /* ---- Pinned variants (no hover flip) ---- */ .card.card-dark { background: var(--dark); color: var(--light); border-color: var(--gray3-on-dark); } .card.card-light { background: var(--white); color: var(--dark); border-color: var(--gray3-on-light); } /* ---- Card column variant ---- */ .card-column { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; color: inherit; } .card-column h3 { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; color: inherit; } .card-column p { font-size: 0.95rem; } .card-column .tag { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.2em; } .card-column .cta { margin-top: auto; padding-top: 1rem; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.2em; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .card-column p + p, .feature-pair-text p + p { margin-top: 1rem; } /* p - body */ .theme-dark .card-column p, .card-dark.card-column p { color: var(--light); } .theme-dark .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover p { color: var(--dark); } .theme-light .card-column p, .card-light.card-column p { color: var(--gray1-on-light); } .theme-light .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover p { color: var(--gray2-on-dark); } /* tag - red */ .theme-dark .card-column .tag, .card-dark.card-column .tag { color: var(--red-on-dark); } .theme-dark .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover .tag { color: var(--red-on-light); } .theme-light .card-column .tag, .card-light.card-column .tag { color: var(--red-on-light); } .theme-light .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover .tag { color: var(--red-on-dark); } /* cta - body color */ .theme-dark .card-column .cta, .card-dark.card-column .cta { color: var(--light); } .theme-dark .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover .cta { color: var(--dark); } .theme-light .card-column .cta, .card-light.card-column .cta { color: var(--dark); } .theme-light .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover .cta { color: var(--light); } /* h3 - cyan */ .theme-dark .card-column h3, .card-dark.card-column h3 { color: var(--cyan-on-dark); } .theme-dark .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover h3 { color: var(--cyan-on-light); } .theme-light .card-column h3, .card-light.card-column h3 { color: var(--cyan-on-light); } .theme-light .card-column:not(.is-upcoming):not(.card-light):not(.card-dark):hover h3 { color: var(--cyan-on-dark); } /* ---- Card subgrid variant ---- */ .card-subgrid { padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; position: relative; } .card-subgrid > * { margin: 0; } .card-subgrid > .time, .card-subgrid > .card-link > .time { grid-row: 1; } .card-subgrid > h4, .card-subgrid > .card-link > h4 { grid-row: 2; } .card-subgrid > .info, .card-subgrid > .card-link > .info { grid-row: 3; } .card-subgrid > .details, .card-subgrid > .card-link > .details { grid-row: 4; } .card-subgrid .time { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1; letter-spacing: 0.02em; } .card-subgrid h4 { font-family: var(--display); font-weight: 400; font-size: 1.55rem; line-height: 1.2; letter-spacing: 0.02em; color: inherit; } .card-subgrid .tag { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.2em; margin-bottom: 0.15rem; } .card-subgrid .info { font-family: var(--mono); font-size: 16px; font-weight: 400; letter-spacing: 0.025em; line-height: 1.25; } .card-subgrid .details { font-family: var(--body); font-size: 0.95rem; font-weight: 400; line-height: 1.35; } .card-subgrid .details strong { font-weight: 700; } .card-subgrid .details + .details { margin-top: 0.25rem; } /* time - red */ .theme-dark .card-subgrid .time, .card-dark.card-subgrid .time { color: var(--red-on-dark); } .theme-dark .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .time { color: var(--red-on-light); } .theme-light .card-subgrid .time, .card-light.card-subgrid .time { color: var(--red-on-light); } .theme-light .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .time { color: var(--red-on-dark); } /* h4 .cyan span */ .theme-dark .card-subgrid h4 .cyan, .card-dark.card-subgrid h4 .cyan { color: var(--cyan-on-dark); } .theme-dark .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover h4 .cyan { color: var(--cyan-on-light); } .theme-light .card-subgrid h4 .cyan, .card-light.card-subgrid h4 .cyan { color: var(--cyan-on-light); } .theme-light .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover h4 .cyan { color: var(--cyan-on-dark); } /* tag - red */ .theme-dark .card-subgrid .tag, .card-dark.card-subgrid .tag { color: var(--red-on-dark); } .theme-dark .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .tag { color: var(--red-on-light); } .theme-light .card-subgrid .tag, .card-light.card-subgrid .tag { color: var(--red-on-light); } .theme-light .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .tag { color: var(--red-on-dark); } /* info - subtle */ .theme-dark .card-subgrid .info, .card-dark.card-subgrid .info { color: var(--gray3-on-dark); } .theme-dark .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .info { color: var(--gray3-on-light); } .theme-light .card-subgrid .info, .card-light.card-subgrid .info { color: var(--gray3-on-light); } .theme-light .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .info { color: var(--gray3-on-dark); } /* details - body */ .theme-dark .card-subgrid .details, .card-dark.card-subgrid .details { color: var(--light); } .theme-dark .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .details { color: var(--dark); } .theme-light .card-subgrid .details, .card-light.card-subgrid .details { color: var(--gray1-on-light); } .theme-light .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .details { color: var(--gray2-on-dark); } /* details strong - body */ .theme-dark .card-subgrid .details strong, .card-dark.card-subgrid .details strong { color: var(--light); } .theme-dark .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .details strong { color: var(--dark); } .theme-light .card-subgrid .details strong, .card-light.card-subgrid .details strong { color: var(--dark); } .theme-light .card-subgrid:not(.is-upcoming):not(.card-light):not(.card-dark):hover .details strong { color: var(--light); } /* ---- Card pin ---- */ .card-pin { position: absolute; top: 2rem; right: 2rem; width: 22px; height: 22px; color: var(--mid); opacity: 0; transition: opacity 120ms ease, color 120ms ease; z-index: 3; pointer-events: none; } .card-pin svg { width: 100%; height: 100%; color: inherit; } .card:hover .card-pin { opacity: 1; } .card-column .card-pin { opacity: 1; } .card-pin-protest { color: var(--red-on-dark); } .card-pin-community { color: var(--red-on-dark); } /* Flip on card hover, matching .time */ .theme-dark .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-protest, .theme-dark .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-community { color: var(--red-on-light); } .theme-light .card-pin-protest, .theme-light .card-pin-community { color: var(--red-on-light); } .theme-light .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-protest, .theme-light .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-community { color: var(--red-on-dark); } @media (hover: none) { .card-pin { opacity: 1; } } /* ---- Category pins (always visible at rest, color-coded) ---- */ /* Quiet at rest, full intensity when card is hovered. */ .card .card-pin-protest, .card .card-pin-community { opacity: 0.6; } .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-protest, .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-community { opacity: 1; } /* Protest — cyan, flips with card surface */ .card-pin-protest { color: var(--cyan-on-dark); } .theme-light .card-pin-protest { color: var(--cyan-on-light); } .theme-dark .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-protest { color: var(--cyan-on-light); } .theme-light .card:not(.is-upcoming):not(.card-light):not(.card-dark):hover .card-pin-protest { color: var(--cyan-on-dark); } /* Community — heart holds brand red on every surface, every state. No hover flip; the brand mark is treated as inviolable. */ .card-pin-community { color: var(--red-on-dark); } .theme-light .card-pin-community { color: var(--red-on-light); } .theme-dark .card:hover .card-pin-community { color: var(--red-on-light); } .theme-light .card:hover .card-pin-community { color: var(--red-on-dark); } /* ---- Upcoming cards ---- */ .card.is-upcoming { cursor: default; opacity: 0.6; } .card-stack:has(.card.is-upcoming) { position: relative; } .card-stack:has(.card.is-upcoming) .cta-strip { opacity: 0.65; } .upcoming-overlay { position: absolute; inset: 0; opacity: 0; transition: opacity 120ms ease; z-index: 3; pointer-events: none; } .card-stack:has(.card.is-upcoming):hover .upcoming-overlay { opacity: 0.65; } .upcoming-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.04em; pointer-events: none; opacity: 0; transition: opacity 120ms ease; z-index: 4; } .card-stack:has(.card.is-upcoming):hover .upcoming-stamp { opacity: 1; } .theme-dark .card.is-upcoming { background: var(--dark); color: var(--light); border-color: var(--gray3-on-dark); } .theme-light .card.is-upcoming { background: var(--white); color: var(--dark); border-color: var(--gray3-on-light); } .upcoming-overlay { background: var(--dark); } .upcoming-stamp { color: var(--light); } /* ---- Map overlay (on tile-hover, signals more content below) ---- */ .map-tile-with-overlay { position: relative; } .map-tile-overlay { position: absolute; inset: 0; background: var(--black); opacity: 0.85; pointer-events: none; transition: opacity 150ms ease; z-index: 2; } .map-tile-with-overlay:hover .map-tile-overlay { opacity: 0.25; } .map-tile-stamp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--display); font-weight: 400; font-size: clamp(3.5rem, 8vw, 6rem); letter-spacing: 0.04em; color: var(--light); pointer-events: none; z-index: 3; } .map-tile-stamp svg { width: clamp(2rem, 5vw, 3rem); height: clamp(2rem, 5vw, 3rem); } .map-tile-context { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: 0.15em; color: var(--gray1-on-dark); margin-top: 0.5rem; text-align: center } /* Inline variant — arrow on the same line as text. */ .map-tile-stamp.is-inline { flex-direction: row; gap: 0.75rem; } /* ---- CTA strip ---- */ .cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; border: 1px solid; border-top: none; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.15em; color: var(--light); transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } a.cta-strip:hover, a.cta-strip:focus-visible { color: var(--light-hover); } .theme-dark .cta-strip { background: var(--red-on-dark); border-color: var(--red-on-dark); } .theme-dark a.cta-strip:hover { background: var(--red-on-dark-hover); border-color: var(--red-on-dark-hover); } .theme-dark a.cta-strip:active { background: var(--red-on-dark); border-color: var(--red-on-dark); } .theme-light .cta-strip { background: var(--red-on-light); border-color: var(--red-on-light); } .theme-light a.cta-strip:hover { background: var(--red-on-light-hover); border-color: var(--red-on-light-hover); } .theme-light a.cta-strip:active { background: var(--red-on-light); border-color: var(--red-on-light); } /* ---- Grid end + display spans ---- */ .grid-end { position: absolute; bottom: 0; right: 0; width: 60%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; padding: 1rem 1rem 0; pointer-events: none; } .theme-dark .display .red, .theme-dark .display-xl .red { color: var(--red-on-dark); } .theme-dark .display .gray, .theme-dark .display-xl .gray { color: var(--light); } .theme-dark .display .outlined, .theme-dark .display-xl .outlined { color: transparent; -webkit-text-stroke: 2px var(--light); } .theme-light .display .red, .theme-light .display-xl .red { color: var(--red-on-light); } .theme-light .display .gray, .theme-light .display-xl .gray { color: var(--dark); } .theme-light .display .outlined, .theme-light .display-xl .outlined { color: transparent; -webkit-text-stroke: 2px var(--dark); } /* ============================================================ 13. TILE HOVER ============================================================ */ .tile-hover { display: block; padding: 0.5rem; border: 1px solid; position: relative; transition: border-color 150ms ease; } .tile-hover::after { content: ""; position: absolute; inset: 0; background: var(--mid); opacity: 0; pointer-events: none; transition: opacity 150ms ease; } .tile-hover:hover::after { opacity: 0.15; } .tile-hover img { display: block; width: 100%; height: auto; } .theme-dark .tile-hover { background: var(--dark); border-color: var(--gray2-on-light); } .theme-dark .tile-hover:hover { border-color: var(--gray3-on-light); } .theme-light .tile-hover { background: var(--white); border-color: var(--gray2-on-dark); } .theme-light .tile-hover:hover { border-color: var(--gray3-on-dark); } /* ============================================================ 14. MAP ============================================================ */ .map-section { padding: var(--section-pad-y) var(--gutter); display: flex; flex-direction: column; } .map-section .inner { flex: 1; display: flex; flex-direction: column; max-width: var(--max); margin: 0 auto; width: 100%; } .map-stack { width: 100%; } .map-frame { display: block; width: 100%; flex-shrink: 0; transition: opacity 150ms ease; } .map-frame:hover { opacity: 0.92; } .map-frame img { display: block; width: 100%; height: auto; max-height: calc(100vh - 130px); } .map-meta-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .map-meta-bar .section-label { margin: 0; } .map-stack > .map-meta-bar { margin-bottom: var(--map-meta-gap); } /* 2-col text + meta-bar above a full-width map. */ .map-feature-layout { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; column-gap: 3rem; row-gap: var(--map-meta-gap); } .map-feature-text { grid-column: 1; grid-row: 1; } .map-feature-meta { grid-column: 2; grid-row: 1; align-self: end; justify-content: flex-end; } .map-feature-media { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; } /* Iframe variant - top: -67px shifts the Google banner above the visible area; container's overflow:hidden clips it. */ .map-embed { position: relative; overflow: hidden; height: 700px; border: 1px solid; } .map-embed iframe { position: absolute; top: -67px; left: 0; width: 100%; height: calc(100% + 67px); border: 0; display: block; } .theme-dark .map-embed { background: var(--dark); border-color: var(--gray3-on-dark); } .theme-light .map-embed { background: var(--white); border-color: var(--gray3-on-light); } /* ============================================================ 15. FEATURE PAIR ============================================================ */ .feature-pair { display: flex; flex-direction: row; gap: 3rem; align-items: stretch; margin-top: 2rem; } .feature-pair > * { flex: 1 1 0; min-width: 0; } .section-label + .feature-pair { margin-top: 0; } .feature-pair-text { display: flex; flex-direction: column; align-self: stretch; } /* Two-group text column: top flows naturally, bottom pins to column's bottom edge. */ .feature-pair-text:has(.split-text-bottom) { justify-content: space-between; } .split-text-bottom { display: flex; flex-direction: column; gap: 1rem; } .feature-pair-text h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1; margin-bottom: 1rem; } .feature-pair-text h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; margin-bottom: 1rem; } .feature-pair-text p { margin-bottom: 1rem; } /* In-flow display headings inside text columns get the same bottom margin as bare h2/h3 (overrides .display margin: 0 and .display-xl margin-bottom: -0.4em). */ .feature-pair-text h2.display, .feature-pair-text h3.display, .feature-pair-text .display-xl, .map-feature-text h2.display, .map-feature-text h3.display, .map-feature-text .display-xl { margin-bottom: 1rem; } /* ============================================================ 16. DISPLAY + LEDE ============================================================ */ h1.display, h2.display, h3.display, .display { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.9; letter-spacing: 0.01em; margin: 0; } h1.display-xl, h2.display-xl, h3.display-xl, .display-xl { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 12vw, 11rem); line-height: 0.85; letter-spacing: 0.01em; margin: 0; margin-bottom: -0.4em; white-space: nowrap; } /* Hero-context display-xl: positive bottom margin instead of overlap. */ .display-xl { margin-bottom: 1.5rem; } .lede { font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 50ch; line-height: 1.5; } .feature-lede, .feature-pair-text .lede, .map-feature-text .lede { max-width: none; } .theme-dark .lede { color: var(--light); } .theme-light .lede { color: var(--gray1-on-light); } .lede + .lede { margin-top: 1rem; } .lede.lede-tight { margin-top: 0.5rem; } /* tighter than 1rem */ .lede .mono { display: inline-block; padding: 0.25rem 0; } /* ============================================================ 17. FORMS [forced light] ============================================================ */ .form-section { background: var(--white); color: var(--dark); } .form-section h3 { color: var(--dark); } .form-section iframe { display: block; background: transparent; vertical-align: top; } .feature-pair > .form-section { padding: 0; margin: 0; } .feature-pair > .form-section .inner { padding: 0; margin: 0; } .form-toggle-wrap { position: relative; } .form-toggle-wrap > .form-section.is-hidden { display: none; } /* ============================================================ 18. LINKS - INTENT CLASSES ------------------------------------------------------------ .link-emphasis cyan .link-muted subtle rest, cyan hover .link-hidden body color rest, cyan hover ============================================================ */ .link-emphasis, .link-muted, .link-hidden { transition: color 150ms ease; } .theme-dark .link-emphasis { color: var(--cyan-on-dark); } .theme-dark .link-emphasis:hover, .theme-dark .link-emphasis:focus-visible { color: var(--cyan-on-dark-hover); } .theme-light .link-emphasis { color: var(--cyan-on-light); } .theme-light .link-emphasis:hover, .theme-light .link-emphasis:focus-visible { color: var(--cyan-on-light-hover); } .theme-dark .link-muted { color: var(--gray3-on-dark); } .theme-dark .link-muted:hover, .theme-dark .link-muted:focus-visible { color: var(--cyan-on-dark); } .theme-light .link-muted { color: var(--gray3-on-light); } .theme-light .link-muted:hover, .theme-light .link-muted:focus-visible { color: var(--cyan-on-light); } .theme-dark .link-hidden { color: var(--light); } .theme-dark .link-hidden:hover, .theme-dark .link-hidden:focus-visible { color: var(--light-hover); } .theme-dark .link-hidden:active { color: var(--light); } .theme-light .link-hidden { color: var(--dark); } .theme-light .link-hidden:hover, .theme-light .link-hidden:focus-visible { color: var(--dark-hover); } .theme-light .link-hidden:active { color: var(--dark); } /* ============================================================ 19. ICONS + SVG UTILITIES ============================================================ */ .icon-eyebrow, .icon-cta, .icon-btn { flex-shrink: 0; } .icon-eyebrow { width: 14px; height: 14px; color: inherit; } .icon-cta { width: 18px; height: 18px; color: inherit; } .icon-btn { width: 14px; height: 14px; color: inherit; } /* !important defeats inline stroke-width on inner geometry. */ .icon-eyebrow path, .icon-eyebrow circle, .icon-eyebrow line, .icon-eyebrow polyline, .icon-eyebrow polygon, .icon-eyebrow rect, .icon-cta path, .icon-cta circle, .icon-cta line, .icon-cta polyline, .icon-cta polygon, .icon-cta rect, .icon-btn path, .icon-btn circle, .icon-btn line, .icon-btn polyline, .icon-btn polygon, .icon-btn rect, .card-pin path, .card-pin circle, .card-pin line, .card-pin polyline, .card-pin polygon, .card-pin rect { stroke-width: 2.5 !important; } .svg-cyan, .svg-red, .svg-gray, .svg-text { transition: color 150ms ease; } .theme-dark .svg-cyan { color: var(--cyan-on-dark); } .theme-dark .svg-red { color: var(--red-on-dark); } .theme-dark .svg-gray { color: var(--mid); } .theme-dark .svg-text { color: var(--light); } .theme-light .svg-cyan { color: var(--cyan-on-light); } .theme-light .svg-red { color: var(--red-on-light); } .theme-light .svg-gray { color: var(--mid); } .theme-light .svg-text { color: var(--dark); } /* SVG accents participate in parent hover + press. */ .theme-dark a:hover .svg-cyan, .theme-dark a:focus-visible .svg-cyan, .theme-dark button:hover .svg-cyan, .theme-dark button:focus-visible .svg-cyan { color: var(--cyan-on-dark-hover); } .theme-dark a:active .svg-cyan, .theme-dark button:active .svg-cyan { color: var(--cyan-on-dark); } .theme-light a:hover .svg-cyan, .theme-light a:focus-visible .svg-cyan, .theme-light button:hover .svg-cyan, .theme-light button:focus-visible .svg-cyan { color: var(--cyan-on-light-hover); } .theme-light a:active .svg-cyan, .theme-light button:active .svg-cyan { color: var(--cyan-on-light); } .theme-dark a:hover .svg-red, .theme-dark a:focus-visible .svg-red, .theme-dark button:hover .svg-red, .theme-dark button:focus-visible .svg-red { color: var(--red-on-dark-hover); } .theme-dark a:active .svg-red, .theme-dark button:active .svg-red { color: var(--red-on-dark); } .theme-light a:hover .svg-red, .theme-light a:focus-visible .svg-red, .theme-light button:hover .svg-red, .theme-light button:focus-visible .svg-red { color: var(--red-on-light-hover); } .theme-light a:active .svg-red, .theme-light button:active .svg-red { color: var(--red-on-light); } /* In section 19, separate from .svg-* utilities */ .logo svg .logo-arch-cyan { fill: var(--cyan-on-dark); } .logo svg .logo-arch-light { fill: var(--light); } .logo svg .logo-wordmark { fill: var(--light); } .logo svg .logo-heart { fill: var(--red-on-dark); } /* ============================================================ 20. MONO UPPERCASE ------------------------------------------------------------ Single source of truth: every mono-using component is uppercase by default. New mono components must be added here unless they need .show-emphasis-style override (text-transform: none). ============================================================ */ .mono, .spine-text, .spine-text-alt, nav.site-nav a, nav.site-nav .dropdown, nav.site-nav .nav-soon, nav.site-nav .nav-soon::after, .site-footer .meta, .section-label, .eyebrow, .cta-text, .btn, .cta-strip, .card-column .tag, .card-column .cta, .card-subgrid .tag, .card-subgrid .info, .map-tile-context { text-transform: uppercase; } /* ============================================================ 21. UTILITIES + A11Y ============================================================ */ .theme-dark .surface-subtle { background: var(--dark); } .theme-light .surface-subtle { background: var(--light); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ 22. MOBILE ============================================================ */ @media (max-width: 880px) { .feature-pair { flex-direction: column; gap: 1.5rem; } .map-feature-layout { grid-template-columns: 1fr; } .map-feature-text, .map-feature-meta, .map-feature-media { grid-column: 1; } .grid-end { align-items: flex-end; padding: 2rem 1rem; } } @media (max-width: 640px) { .page { padding-left: 0; } .site-footer .inner { padding-left: 0; } }