/* EdgeKeeper — shared base styles * Included on every page. Covers: * 1. Google Fonts import (superset URL — single cache entry across all pages) * 2. Box-sizing reset * * The superset URL loads all font families used across the site. Browsers only * download the font files they actually render, so pages that don't use * Space Grotesk pay only the tiny CSS overhead, not the font binary. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Mono:wght@300;400&family=Inter:wght@300;400;500&family=Manrope:wght@300;400;600&family=Space+Grotesk:wght@300;400;500&family=Space+Mono:wght@400&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Auth-aware nav ────────────────────────────────────────────────────────── The server sets for signed-in visitors (serveInjectedHtml). Guest-only CTAs (Sign In / Apply) are hidden for signed-in users; auth-only CTAs (Enter your office) are hidden for guests. Rendered on first paint — no flash. */ html.ek-authed [data-guest-only] { display: none !important; } .ek-auth-cta { display: none; } html.ek-authed .ek-auth-cta { display: inline-flex; } /* "Enter your office" doesn't fit a phone topbar next to the logo — swap to a short label under 640px. Markup: / */ .ek-auth-cta .cta-short { display: none; } @media (max-width: 640px) { .ek-auth-cta .cta-full { display: none; } .ek-auth-cta .cta-short { display: inline; } } /* ── Skeleton loading ──────────────────────────────────────────────────────── Reusable shimmer placeholders. Use .ek-skel on a block; .ek-skel-line for a text-row, with .sm/.md/.lg widths. Respects prefers-reduced-motion. */ @keyframes ek-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } } .ek-skel { background: linear-gradient(90deg, rgba(255,255,255,0.035) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.035) 63%); background-size: 840px 100%; animation: ek-shimmer 1.4s ease-in-out infinite; border-radius: 4px; } .ek-skel-line { height: 12px; margin: 14px 0; width: 100%; } .ek-skel-line.sm { width: 38%; } .ek-skel-line.md { width: 68%; } .ek-skel-block { height: 64px; margin: 14px 0; border-radius: 6px; } .ek-skel-wrap { padding: 30px 28px; } @media (prefers-reduced-motion: reduce) { .ek-skel { animation: none; } } /* ── Pillar switcher ───────────────────────────────────────────────────────── Persistent Marcus / Theo / Iris switch shown in each pillar's header. The active pill (the current space) is highlighted with the page's accent — default gold, overridden to green on Iris via --ek-pillar-active. Segments collapse to icon-only width on very small screens. */ .ek-pillars { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,0.09); border-radius: 999px; background: rgba(255,255,255,0.02); flex-shrink: 0; } /* Fixed rgba (not var(--dim)/var(--border)) so the pills stay legible on every page — those tokens differ wildly per space (e.g. the office sets --dim to a near-black #2a2a2a). */ .ek-pillar { font-family: var(--mono, 'DM Mono', monospace); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); text-decoration: none; padding: 5px 13px; border-radius: 999px; white-space: nowrap; transition: color .2s ease, background .2s ease; -webkit-tap-highlight-color: transparent; } .ek-pillar:hover { color: rgba(255,255,255,0.85); } .ek-pillar.active { color: #0a0a0a; font-weight: 500; background: var(--ek-pillar-active, var(--gold, #b8a06a)); } @media (max-width: 520px) { .ek-pillar { padding: 5px 10px; letter-spacing: 0.08em; } } /* ── Brand logo — one identity everywhere ──────────────────────────────────── Canonical wordmark (landing page): Cormorant Garamond, weight 400, wide tracking, uppercase, gold K. Pages had drifted (lowercase, tight tracking, missing gold K); these rules enforce the identity attributes site-wide while leaving font-size to each page's context. */ .nav-logo, .topbar-logo, .footer-logo, .brand { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 400 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-decoration: none !important; } .nav-logo span, .topbar-logo span, .footer-logo span, .brand span { color: #b8a06a !important; } @media (max-width: 520px) { /* tight topbars — relax tracking so the wordmark doesn't crowd the switcher */ .nav-logo, .topbar-logo, .brand { letter-spacing: 0.12em !important; } } /* ── Custom-cursor accessibility ───────────────────────────────────────────── Pages hide the native cursor (cursor:none) and draw their own gold dot+ring. On touch devices there is no cursor to replace — the dot just floats at the last tap point — and users who prefer reduced motion shouldn't get a laggy trailing ring. Restore native behavior for both. */ @media (pointer: coarse), (prefers-reduced-motion: reduce) { * { cursor: auto !important; } #cursor, #cursor-ring { display: none !important; } } /* ── Reveal safety ─────────────────────────────────────────────────────────── Many pages hide content with `.reveal { opacity: 0 }` and only show it once a scroll IntersectionObserver adds `.in`. If motion is reduced, show everything immediately — content must never depend on an animation to become visible. (A companion script, reveal-safety.js, covers the case where the observer simply doesn't fire in a mobile webview.) */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }