/* ===================================================== EMIL BLUM — BASE CSS Design tokens, reset, typography, shared utilities ===================================================== */ /* ── FONTS ── */ /* Loaded via preconnect in each page's for maximum speed. @import removed — it adds an extra blocking round-trip and delays all fonts. */ /* ── DESIGN TOKENS ── */ :root { /* Colors */ --cream: #fffbf3; --cream-alt: #f4eee4; --dark: #1e1e28; --green: #283c1e; --maroon: #6e0a0a; --yellow: #faa000; --brown: #825a28; /* Neutral scale (warm, no cold greys) */ --n100: #f4eee4; --n200: #e8ddd0; --n300: #d4c5b4; --n400: #a89278; --n500: #7a6452; --n600: #5a4838; /* Motion */ --spring: cubic-bezier(0.16, 1, 0.3, 1); --spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spacing */ --px-mobile: 20px; --px-desktop: 40px; --max-w: 1360px; /* Typography */ --font-body: 'Manrope', sans-serif; --font-meta: 'Space Grotesk', sans-serif; /* Border radius */ --r-card: 2px; --r-input: 4px; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); background-color: var(--maroon); color: var(--dark); min-height: 100vh; overflow-x: hidden; } /* ── PAGE MAIN — sits above the maroon body/footer ── */ .page-main { position: relative; z-index: 1; background: var(--cream); /* Ensures the page bg covers the full viewport from first paint, so the maroon body never shows through on short/lazy-loaded pages */ min-height: 100vh; } img, video { display: block; max-width: 100%; } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ── TEXTURE ── */ .texture-grid { background-image: linear-gradient(to right, rgba(232, 221, 208, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(232, 221, 208, 0.3) 1px, transparent 1px); background-size: 40px 40px; } .texture-dots { background-image: radial-gradient(circle, rgba(212, 197, 180, 0.5) 1px, transparent 1px); background-size: 20px 20px; } /* ── TYPOGRAPHY ── */ .t-display { font-family: var(--font-body); font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.04em; } .t-headline-xl { font-family: var(--font-body); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; } .t-headline-md { font-family: var(--font-body); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; } .t-body-lg { font-size: 20px; font-weight: 400; line-height: 1.6; } .t-body { font-size: 16px; font-weight: 400; line-height: 1.65; } .t-body-sm { font-size: 14px; font-weight: 400; line-height: 1.5; } .t-label { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; font-feature-settings: "ss02" on, "ss03" on; } .t-mono { font-family: var(--font-meta); font-size: 12px; font-weight: 400; font-feature-settings: "ss02" on, "ss03" on; } .t-micro { font-family: var(--font-meta); font-size: 10px; font-weight: 400; font-feature-settings: "ss02" on, "ss03" on; } /* ── SELECTION ── */ ::selection { background-color: var(--maroon); color: var(--cream); } /* ── LAYOUT UTILITIES ── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px-mobile); } @media (min-width: 768px) { .container { padding: 0 var(--px-desktop); } } /* ── CUSTOM CURSOR ── */ #cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background-color: var(--dark); border-radius: 50%; pointer-events: none; z-index: 100002; transform: translate(-50%, -50%); transition: width 0.3s var(--spring), height 0.3s var(--spring), background-color 0.3s var(--spring); display: flex; align-items: center; justify-content: center; mix-blend-mode: multiply; } body.cursor-hover #cursor { width: 72px; height: 72px; background-color: var(--maroon); mix-blend-mode: normal; } body.cursor-on-dark #cursor { background-color: var(--maroon); mix-blend-mode: normal; } #cursor-label { font-family: var(--font-meta); font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity 0.2s ease; white-space: nowrap; pointer-events: none; user-select: none; } body.cursor-hover #cursor-label { opacity: 1; } /* ── IMAGE UTILITIES ── */ /* Image hover scale */ .img-grey { transition: transform 700ms var(--spring); } .hover-color:hover .img-grey { transform: scale(1.02); } /* Overflow clip for reveal animations */ .overflow-clip { overflow: hidden; } /* ── REVEAL ANIMATIONS ── */ /* Elements are hidden by default, JS adds .is-visible. Stagger delays are assigned dynamically by nav.js — no manual data-delay attributes needed in HTML. */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* ── DARK SECTION ── */ .bg-dark { background-color: var(--dark); color: var(--cream); } .bg-green { background-color: var(--green); color: var(--cream); } .bg-maroon { background-color: var(--maroon); color: var(--cream); } /* ── SHARED COMPONENTS ── */ /* Section label */ .section-label { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: var(--maroon); margin-bottom: 12px; } /* Divider */ .divider { width: 100%; height: 1px; background: var(--n200); } /* Tag pill */ .tag { display: inline-block; font-family: var(--font-meta); font-size: 10px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--n300); border-radius: 999px; color: var(--n500); } .bg-dark .tag, .bg-green .tag, .bg-maroon .tag { border-color: rgba(255,251,243,0.25); color: rgba(255,251,243,0.6); } /* Arrow link */ .arrow-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-meta); font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--n500); transition: color 0.2s ease, gap 0.3s var(--spring); } .arrow-link:hover { color: var(--dark); gap: 14px; } .arrow-link svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── SITE FOOTER — maroon reveal layer, fixed behind page content ── */ /* .footer-spacer after .page-main creates scrollable gap; body's maroon shows through as the user scrolls down, revealing the footer below. */ .footer-spacer { height: 280px; } .site-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 280px; background: var(--maroon); z-index: 0; } .footer-inner { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-social { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-link { font-family: var(--font-meta); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .footer-link:hover { color: rgba(255, 251, 243, 0.85); } .footer-copy { font-family: var(--font-meta); font-size: 10px; letter-spacing: 0.06em; color: var(--cream); white-space: nowrap; } @media (max-width: 640px) { .footer-inner { padding: 20px var(--px-mobile); flex-direction: column; align-items: flex-start; gap: 12px; } .footer-social { gap: 14px; } }