/** * Kinetic layout – Moto Gymkhana design system * Dark surface, primary #E60000, secondary #fecb00, tertiary #b1c9e6 */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap'); /* Kinetic design tokens – also override --font-heading/--font-body so base.css uses kinetic fonts */ .layout-kinetic { /* Full-bleed section backgrounds; content aligns to this max width */ --kinetic-section-inner-max: 80rem; /* Sticky header + fixed rail/drawer share this offset from the top of the viewport */ --kinetic-header-offset: 5.75rem; --kinetic-primary: #e60000; --kinetic-primary-rgb: 230, 0, 0; --kinetic-primary-container: #3c0001; --kinetic-secondary: #fecb00; --kinetic-secondary-container: #6e5700; --kinetic-tertiary: #b1c9e6; --kinetic-surface: #001427; --kinetic-surface-container-lowest: #000f1f; --kinetic-surface-container-low: #021d33; --kinetic-surface-container: #072137; --kinetic-surface-container-high: #132c42; --kinetic-surface-container-highest: #1f364e; --kinetic-on-surface: #d0e4ff; --kinetic-on-surface-variant: rgba(208, 228, 255, 0.85); --kinetic-on-primary: #ffffff; --kinetic-on-secondary: #3d2f00; --kinetic-font-headline: 'Space Grotesk', sans-serif; --kinetic-font-body: 'Inter', sans-serif; --kinetic-apex-height: 4px; --font-heading: var(--kinetic-font-headline); --font-body: var(--kinetic-font-body); /* Match main side margins so section backgrounds can bleed to the viewport under rail/drawer */ --kinetic-bleed-left: 4rem; --kinetic-bleed-right: 20rem; /* Alternating full-width bands on .page-section (inner kinetic blocks stay transparent) */ --kinetic-section-strip-a: var(--kinetic-surface-container-lowest); --kinetic-section-strip-b: var(--kinetic-surface); /* Legacy --color-* used by base.css / shared components (code-owned; see theme_defaults.BRAND_THEME) */ --color-primary: var(--kinetic-primary); --color-primary-rgb: var(--kinetic-primary-rgb); --color-secondary: var(--kinetic-secondary); --color-secondary-rgb: 254, 203, 0; --color-accent: var(--kinetic-tertiary); --color-accent-rgb: 177, 201, 230; --color-background: var(--kinetic-surface-container-lowest); --color-text: var(--kinetic-on-surface); --color-text-muted: rgba(208, 228, 255, 0.55); } /* Class is on , not a wrapper — descendant `.layout-kinetic body` never matched */ body.layout-kinetic { font-family: var(--kinetic-font-body); background: var(--kinetic-surface); color: var(--kinetic-on-surface); } /* Rubber-band / overscroll: html defaults to white (--kinetic-* live on body, not inherited up) */ html:has(body.layout-kinetic) { background-color: #001427; } /* Featured modal: inherit --color-* from .layout-kinetic; scope text color for dialog content */ .layout-kinetic .featured-event-popup { color: var(--kinetic-on-surface); } .layout-kinetic .featured-event-popup a { text-decoration: none; } .layout-kinetic .featured-event-popup .featured-event-popup-stitch-cta-primary, .layout-kinetic .featured-event-popup .featured-event-popup-stitch-cta-primary:visited { color: var(--kinetic-on-primary); } .layout-kinetic .featured-event-popup .featured-event-popup-stitch-cta-primary:hover { color: var(--kinetic-on-primary); } .layout-kinetic .featured-event-popup .featured-event-popup-login:hover { color: var(--kinetic-secondary); } /* Event detail: subscription panel + dialog (match kinetic surfaces) */ .layout-kinetic .event-subscribe-panel { background: rgba(0, 0, 0, 0.32); border-color: rgba(255, 255, 255, 0.1); color: var(--kinetic-on-surface); } .layout-kinetic .event-subscribe-panel__metric-label { color: var(--kinetic-on-surface); } .layout-kinetic .event-subscribe-panel__metric-note { color: rgba(255, 255, 255, 0.65); } .layout-kinetic .event-subscribe-dialog__card { color: var(--kinetic-on-surface); background: linear-gradient(160deg, rgba(0, 26, 48, 0.97) 0%, rgba(0, 14, 28, 0.98) 100%); border-color: rgba(255, 255, 255, 0.12); } .layout-kinetic .event-subscribe-dialog__stat-label, .layout-kinetic .event-subscribe-dialog__capacity-line, .layout-kinetic .event-subscribe-dialog__body { color: var(--kinetic-on-surface); } .layout-kinetic .event-subscribe-dialog__field input, .layout-kinetic .event-subscribe-dialog__select { color: var(--kinetic-on-surface); background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.15); } .layout-kinetic .event-subscribe-dialog a.event-detail-contact-link { color: var(--kinetic-secondary); } .layout-kinetic .kinetic-section-inner { max-width: var(--kinetic-section-inner-max); margin-left: auto; margin-right: auto; width: 100%; } /* Kinetic header always visible – span full width but inset like main so inner column lines up */ .layout-kinetic .site-header { position: sticky; top: 0; z-index: 100; background: var(--kinetic-surface) !important; padding: 1rem 20rem 1rem 4rem !important; height: auto !important; box-shadow: 0 0 24px rgba(var(--kinetic-primary-rgb), 0.1); border-bottom: none; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .layout-kinetic .site-header .nav-toggle { display: none; } .layout-kinetic .kinetic-header-right { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; margin-left: 0.35rem; } .layout-kinetic .site-header-inner { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.75rem 1rem; justify-content: flex-start; max-width: var(--kinetic-section-inner-max); margin-left: auto; margin-right: auto; width: 100%; } .layout-kinetic .site-logo-link { display: block; flex-shrink: 0; line-height: 0; } .layout-kinetic .site-logo { height: 40px; width: auto; max-width: min(200px, 32vw); display: block; object-fit: contain; } .layout-kinetic .site-nav { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: clamp(0.35rem, 1.2vw, 0.85rem); margin-left: auto; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .layout-kinetic .site-nav::-webkit-scrollbar { display: none; } .layout-kinetic .site-nav a { font-family: var(--kinetic-font-headline); font-weight: 700; font-size: clamp(0.7rem, 1.05vw, 0.8125rem); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; color: var(--kinetic-tertiary); padding: 0.2rem 0.15rem 0.35rem; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; flex-shrink: 0; } .layout-kinetic .site-nav .nav-account { flex-shrink: 0; position: relative; z-index: 200; /* Horizontal scroll on .site-nav clips overflow; dropdown must escape */ overflow: visible; } .layout-kinetic .site-nav:has(.nav-account[open]) { overflow: visible; } .layout-kinetic .site-nav .nav-account-trigger { font-size: clamp(0.7rem, 1.05vw, 0.8125rem); letter-spacing: 0.02em; } /* Account dropdown: match nav link typography; logout is a