/* ============================================================================ The Continental Collective — sitewide responsive layer. Loaded on every .dc.html page, after the design system's styles.css so --deep-charcoal / --warm-cream / etc. are already defined. Every rule in the two @media blocks uses !important. That's not carelessness — every layout value on this site is set as an inline style="..." attribute (that's how the dc-runtime authoring model works), and inline styles beat any external stylesheet rule regardless of selector specificity UNLESS the stylesheet rule is !important. There's no other way to make a breakpoint override an inline style. Breakpoints: 768px (tablet / hamburger threshold) and 480px (small phones, iPhone SE at 375px lands here). Target range is 375px–desktop. ============================================================================ */ /* ── Base reset — applies at every width ─────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { max-width: 100%; } /* overflow-x on body only, not html — overflow set on the root element is a known trigger in mobile Safari for position:fixed descendants (the mobile nav overlay, the login modal) to be laid out against the wrong containing block instead of the true viewport. body alone still fully prevents horizontal scroll. */ body { overflow-x: hidden; } img, image-slot { max-width: 100%; } img { height: auto; } /* ── Hamburger button — hidden on desktop, shown under 768px ─────────── */ .tcc-hamburger-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px; -webkit-tap-highlight-color: transparent; } .tcc-hamburger-btn .tcc-hamburger-lines { position: relative; width: 22px; height: 16px; } .tcc-hamburger-btn .tcc-hamburger-lines span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; /* Every header on this site is dark charcoal, so warm-cream is the correct default per the brief's "Warm Cream on dark backgrounds" rule. The .on-light modifier is available for any future light-header page — none exists on the site today. */ background: var(--warm-cream); transition: transform 0.25s ease, opacity 0.2s ease; } .tcc-hamburger-btn.on-light .tcc-hamburger-lines span { background: var(--deep-charcoal); } .tcc-hamburger-btn .tcc-hamburger-lines span:nth-child(1) { top: 0; } .tcc-hamburger-btn .tcc-hamburger-lines span:nth-child(2) { top: 7px; } .tcc-hamburger-btn .tcc-hamburger-lines span:nth-child(3) { top: 14px; } /* ── Mobile nav overlay — full-screen, hidden until opened ───────────── */ .tcc-mobile-nav-overlay { position: fixed; inset: 0; z-index: 9998; background: var(--deep-charcoal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.3s cubic-bezier(.16,1,.3,1), transform 0.3s cubic-bezier(.16,1,.3,1), visibility 0s linear 0.3s; padding: 32px 24px; } html.tcc-menu-open .tcc-mobile-nav-overlay { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.3s cubic-bezier(.16,1,.3,1), transform 0.3s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s; } /* Scroll lock on body, not html — see the note above the base body rule. This one matters even more than the general case: it fires at exactly the moment the fixed-position overlay needs to render correctly, so if the html-level quirk were going to bite, it'd bite right here. */ html.tcc-menu-open body { overflow: hidden; } .tcc-mobile-nav-logo { position: absolute; top: 24px; left: 24px; text-decoration: none; } .tcc-mobile-nav-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--warm-cream); font-size: 1.8rem; line-height: 1; -webkit-tap-highlight-color: transparent; } .tcc-mobile-nav-links { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 40px; } .tcc-mobile-nav-links a, .tcc-mobile-nav-links span { font-family: var(--font-body); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-cream); text-decoration: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 8px 16px; } .tcc-mobile-nav-links a:active { color: var(--muted-gold); } .tcc-mobile-nav-links .tcc-mobile-cta { margin-top: 12px; } .tcc-mobile-nav-links .tcc-mobile-cta a, .tcc-mobile-nav-links a.tcc-mobile-cta { background: var(--muted-gold); color: var(--deep-charcoal); border-radius: 4px; padding: 12px 32px; min-width: 220px; } /* ── Desktop nav / hamburger visibility swap ──────────────────────────── */ @media (max-width: 768px) { nav.tcc-desktop-nav { display: none !important; } .tcc-hamburger-btn { display: flex !important; } } /* ============================================================================ 768px breakpoint — tablet and below ============================================================================ */ @media (max-width: 768px) { /* Section/header horizontal padding: every section on this site pads 56px (or 40px on the sticky header bar) left/right — cut to 24px without needing to touch every element's inline style, since longhand padding-left/right beats the inline shorthand's implied values. Scoped narrowly: the header bar is the only sticky div on the site that also sets justify-content: space-between (the sticky ticket card on Event Detail and the sticky sidebar on Member Dashboard are NOT headers and must keep their own padding untouched). :not(.tcc-no-pad) excludes edge-to-edge sections (full-bleed hero images, the Membership lifestyle photo band) — those carry their own padding on an inner div (if any) rather than the
, and this rule would otherwise inset their absolutely-positioned or directly-gridded children, leaving a visible gap around what's meant to be a flush edge. */ section:not(.tcc-no-pad), footer, div[style*="position: sticky"][style*="justify-content: space-between"] { padding-left: 24px !important; padding-right: 24px !important; } /* Generic responsive grids — add class="tcc-grid-N" alongside the existing inline display:grid style wherever a row of cards/columns needs to collapse on mobile. */ .tcc-grid-2, .tcc-grid-3, .tcc-grid-4 { grid-template-columns: 1fr !important; } /* Generic "side-by-side becomes stacked" — for two-column image/text rows, content+sticky-card layouts, etc. */ .tcc-stack-mobile { display: flex !important; flex-direction: column !important; } .tcc-stack-mobile > * { width: 100% !important; } /* A stacked sticky card shouldn't stay position:sticky on mobile — it would float mid-page oddly with no room beside it. */ .tcc-stack-mobile .tcc-sticky-release { position: static !important; top: auto !important; } /* Fixed-px-height banners (Event Detail's photo header) — shorter on mobile than the 520px desktop value, but still a real fixed height since it's a photo banner, not vh-based like the cinematic hero. */ .tcc-event-hero { height: 280px !important; } /* Hero sections — never full desktop viewport height on mobile. */ .tcc-hero { height: auto !important; min-height: 56vh !important; padding-top: 120px !important; padding-bottom: 56px !important; } .tcc-hero h1 { font-size: 2.4rem !important; line-height: 1.15 !important; } .tcc-hero p { font-size: 0.95rem !important; } /* Lighter-weight variant for non-full-bleed page headers (Experiences, Membership's own top-of-page intro, etc.) — these are already content-height (padding, not vh), so only the type needs to scale down, not the section's own height. */ .tcc-page-hero { padding-top: 110px !important; padding-bottom: 56px !important; } .tcc-page-hero h1 { font-size: 2.2rem !important; line-height: 1.15 !important; } .tcc-page-hero p { font-size: 0.95rem !important; } /* For heroes where the padding lives on an inner content div rather than the
itself (Membership's image-background hero) — same padding/type scaling as .tcc-page-hero, just addressed at the div that actually carries it. */ .tcc-hero-content { padding: 90px 24px 56px !important; } .tcc-hero-content h1 { font-size: 2.1rem !important; line-height: 1.15 !important; } .tcc-hero-content p { font-size: 0.95rem !important; } .tcc-image-hero { min-height: 0 !important; } /* CTA buttons — full/near-full width on mobile. Targets the actual rendered anchor/button produced by the design system's Button component, wherever it's used as a direct CTA link. */ .tcc-cta-full, .tcc-cta-full x-import { display: block !important; width: 100% !important; } .tcc-cta-row { flex-direction: column !important; width: 100% !important; } .tcc-cta-row > * { width: 100% !important; } /* Membership stat row -> 2x2 grid */ .tcc-stats-2x2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; } /* Tables that would otherwise force horizontal page scroll — wrap them in a div.tcc-table-scroll and let THAT div scroll instead. */ .tcc-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Admin stat-card grids: 2 per row on tablet width. */ .tcc-admin-stats { grid-template-columns: repeat(2, 1fr) !important; } /* Form grids collapse to one column. */ .tcc-form-grid { grid-template-columns: 1fr !important; } /* Avatar upload row (Member Dashboard) — centered and easy to tap on a phone rather than left-aligned against a wide empty column. */ .tcc-avatar-row { justify-content: center !important; text-align: center !important; } /* FAQ accordion (Membership page) — the is the actual clickable toggle, not the
padding around it, so it needs its own min-height for a real 44px tap target. */ details summary { min-height: 44px !important; } /* Every text input / textarea / select on the site: 44px tall, 16px type — 16px specifically stops iOS Safari auto-zooming the page on focus (anything smaller than 16px triggers it). */ input, textarea, select { min-height: 44px !important; font-size: 16px !important; } /* Native