/* Supplemental styles for behaviors the static export handled in React: the mobile nav sheet and the work-filter active chip state. Loaded after app.css; uses the same CSS variables. */ /* FONTS — the compiled CSS expects --font-bebas/--font-inter, which Next set via classes WordPress doesn't apply (so everything fell back to Times). Load the same fonts (Bebas Neue + Inter, via Google Fonts in functions.php) and bind them directly. Loaded after app.css so these win. */ :root { --font-bebas: "Bebas Neue", Impact, "Arial Narrow", sans-serif; --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } body { font-family: var(--font-inter); } .font-display { font-family: var(--font-bebas); } /* Mobile sheet: close-icon size (h-6/w-6 not in the purged CSS) + spacing (pt-10/mt-auto also missing). */ [data-mobile-sheet] [data-mobile-close] svg { width: 1.5rem; height: 1.5rem; } [data-mobile-sheet] nav { margin-top: 2.5rem; } [data-mobile-sheet] > div:last-child { margin-top: auto; padding-top: 2.5rem; } /* Mobile nav overlay */ [data-mobile-sheet] { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 1.5rem; background: var(--background, #0e0d0d); transition: opacity 0.2s ease-out; } [data-mobile-sheet][aria-hidden="true"] { opacity: 0; pointer-events: none; } [data-mobile-sheet][aria-hidden="false"] { opacity: 1; pointer-events: auto; } /* Active filter chip (work portfolio) — matches the original active styling */ [data-filter][aria-pressed="true"] { background: var(--accent, #e54648); border-color: var(--accent, #e54648); color: var(--accent-foreground, #fff); } /* Mobile: keep the hero headline ("STORYTELLING.") from overflowing/clipping on narrow phones. Scoped to <640px so the sm:/md:/lg: desktop sizes are untouched. */ @media (max-width: 639px) { [data-hero] h1 { font-size: clamp(2rem, 10vw, 3.5rem); } } /* Sticky-footer frame (replaces the Next.js body flex layout) */ .nlm-frame { display: flex; min-height: 100dvh; flex-direction: column; } .nlm-grow { flex: 1 1 auto; } /* WP admin bar offset for the sticky header (logged-in editors) */ .admin-bar [data-site-header] { top: 32px; } @media screen and (max-width: 782px) { .admin-bar [data-site-header] { top: 46px; } }