/* ==========================================================================
ENDERBY — GLOBAL STYLESHEET · Design System v1.1 · loads on every page
Order: tokens/base → flow button (component) → navbar/menu (shell) → footer
Page-specific styles live in home.css / about.css / films.css / contact.css
========================================================================== */
/* ==========================================================================
TOKENS + BASE — Enderby Design System v1.1 · canonical, site-wide
--------------------------------------------------------------------------
Load FIRST on every page:
tokens.css → style.css (navbar/menu) → flow-button.css → page css → footer.css
This is the single source of truth for tokens. Page stylesheets may keep
their own :root as a safety net during migration, but values must match
these. Inter only. 2px max radius. One cobalt moment per viewport.
========================================================================== */
/* --- Self-hosted Inter VARIABLE — required by the About values weight
morph (500→700); static Google Fonts weights cannot animate weight.
Pair with in every page . */
@font-face {
font-family: "Inter";
src: url("../assets/fonts/InterVariable.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Metric-matched fallback so text doesn't jump while Inter loads */
@font-face {
font-family: "Inter-fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
}
/* --- Tokens ---------------------------------------------------------------- */
:root {
/* Surfaces */
--surface-dark: #0a0a0b;
--surface-menu: #070708; /* full-screen menu — deeper than footer */
--surface-light: #f7f7f5;
--surface-raised-dark: #101012;
--surface-raised-light: #ffffff;
/* Accent — cobalt only, never hue-shifted */
--cobalt: #2e6bff;
--cobalt-bright: #5488ff;
--cobalt-deep: #1e52e0;
/* Text */
--text-on-dark: #f7f7f5;
--text-on-dark-2: rgba(247, 247, 245, 0.64);
--text-on-dark-3: rgba(247, 247, 245, 0.4);
--text-on-light: #0a0a0b;
--text-on-light-2: rgba(10, 10, 11, 0.64);
--text-on-light-3: rgba(10, 10, 11, 0.44);
/* Hairlines */
--border-on-dark: rgba(247, 247, 245, 0.14);
--border-on-light: rgba(10, 10, 11, 0.12);
/* Layout */
--edge: clamp(1.25rem, 4vw, 5rem);
--container-max: 1440px;
--space-section: clamp(5rem, 3.33rem + 7.4vw, 10rem);
--radius-0: 0; /* media is never rounded */
/* Motion */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
--dur-fast: 200ms;
--dur-base: 400ms;
--dur-slow: 800ms;
--toggle-dur: 800ms; /* hamburger choreography */
/* Z-layers */
--z-header: 100;
--z-menu: 200;
--z-transition: 250; /* page transition layer — Phase 2 */
}
/* --- Reset + base ----------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; } /* guards transient transform overflow from reveal pre-states */
::selection { background: var(--cobalt); color: #f7f7f5; }
html { scrollbar-width: thin; scrollbar-color: rgba(10, 10, 11, 0.35) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(10, 10, 11, 0.3); border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }
body {
font-family: "Inter", "Inter-fallback", system-ui, sans-serif;
background: var(--surface-light);
color: var(--text-on-light);
min-height: 100svh;
-webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
ul { list-style: none; }
h1, h2, h3 { font-weight: 700; }
/* --- Lenis smooth scroll housekeeping ------------------------------------ */
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
/* --- LOADER: film gate (z-250, future page-transition layer) ------------- */
/* Display is gated on html.js: no JavaScript means no overlay, ever. */
.loader { display: none; }
html.js .loader {
display: block;
position: fixed;
inset: 0;
z-index: 250;
}
/* Repeat visit this session: head script adds .loader-skip before paint */
html.js.loader-skip .loader { display: none; }
.loader__backdrop {
position: absolute;
inset: 0;
background: linear-gradient(158deg, #0d1015 0%, #16202e 40%, #080a0f 100%);
}
.loader__panel {
position: absolute;
left: 0;
right: 0;
height: 50%;
background: var(--surface-dark, #0a0a0b);
}
.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }
/* Cobalt seam lines, pinned to each panel's inner edge; at the closed
state they overlap and read as a single line */
.loader__line {
position: absolute;
left: 0;
right: 0;
height: 1px;
opacity: 0;
background: linear-gradient(
90deg,
rgba(84, 136, 255, 0.9) 0%,
rgba(46, 107, 255, 0.35) 50%,
rgba(30, 82, 224, 0.85) 100%
);
}
.loader__line--top { bottom: 0; }
.loader__line--bottom { top: 0; }
.loader__mark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
opacity: 0;
font-family: "Inter", system-ui, sans-serif;
font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--text-on-dark, #f7f7f5);
white-space: nowrap;
/* optically recenter: letter-spacing adds a trailing gap */
padding-left: 0.34em;
}
/* page transition */
html.pt-in::before {
content: "";
position: fixed;
inset: 0;
z-index: 250;
background: var(--surface-dark, #0a0a0b);
}
.pt {
position: fixed;
inset: 0;
z-index: 250;
pointer-events: none;
}
.pt__panel {
position: absolute;
left: 0;
right: 0;
height: calc(50% + 1px);
background: var(--surface-dark, #0a0a0b);
}
.pt__panel--top { top: 0; }
.pt__panel--bottom { bottom: 0; }
.pt__seam {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
margin-top: -0.5px;
background: var(--cobalt, #2e6bff);
box-shadow: 0 0 24px rgba(46, 107, 255, 0.55);
opacity: 0;
}
/* --- Utilities ---------------------------------------------------------------- */
.u-cobalt { color: var(--cobalt); font-style: normal; }
/* --- Shared DS components ------------------------------------------------- */
.label {
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; line-height: 1;
}
.label-sm {
font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em;
text-transform: uppercase; line-height: 1;
}
.grain {
position: absolute; inset: 0; opacity: 0.035;
mix-blend-mode: overlay; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tint {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(46, 107, 255, 0.06) 0%, transparent 60%);
}
.u-visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
/* FOUC guard partner rule — each page also needs the inline script:
*/
html.js [data-reveal] { visibility: hidden; }
/* ==========================================================================
COMPONENT — FLOW BUTTON (canonical, themed via [data-theme])
========================================================================== */
/* ==========================================================================
FLOW BUTTON — global, single component, themed by [data-theme]
Enderby Design System v1.1 · Inter only · radius-xs · neutral floods
--------------------------------------------------------------------------
Markup (works as or