/* ========================================================================== RESURREXION — Design tokens, themes, reset, base Brand palette (from RESURREXION Brand Guidelines V1): Black #000000 (PMS Black) White #FFFFFF (PMS 11-0601 TPX) Grey #B4B4B4 (PMS 421 C) + "Photo gradient" smoky-light greys taken from the photography. Light theme is the default; .dark on switches to the night look. ========================================================================== */ :root { /* Brand constants */ --c-black: #000000; --c-white: #ffffff; --c-grey: #b4b4b4; /* --- LIGHT THEME (default) ------------------------------------------- */ --bg: #f4f4f4; /* near-white, gallery paper */ --bg-elev: #ffffff; /* raised cards / panels */ --bg-invert: #000000; /* full-black cinematic blocks */ --fg: #0a0a0a; /* primary ink */ --fg-soft: #5a5a5a; /* secondary text */ --fg-faint: #9a9a9a; /* labels, meta */ --line: rgba(0,0,0,0.14); --line-strong: rgba(0,0,0,0.30); --accent: #000000; /* the brand is mono — black is the accent */ --on-accent: #ffffff; --hero-haze: #d9d9d9; /* fog/light fallback */ --grain-opacity: 0.04; --shadow: 0 30px 80px -40px rgba(0,0,0,0.45); --selection-bg: #000000; --selection-fg: #ffffff; /* Typography */ --font-display: "Radical", "Arial Narrow", system-ui, sans-serif; --font-ui: "Helvetica Now Display", "Helvetica Now Display Alt", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; /* Fluid type scale */ --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem); --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); --step-1: clamp(1.15rem, 1.02rem + 0.65vw, 1.5rem); --step-2: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem); --step-3: clamp(2.2rem, 1.6rem + 3vw, 4rem); --step-4: clamp(3rem, 1.8rem + 6vw, 7rem); --step-mega: clamp(3.4rem, 0.5rem + 14vw, 16rem); /* Spacing & layout */ --gutter: clamp(1.2rem, 4vw, 4rem); --maxw: 1400px; --section-pad: clamp(4.5rem, 9vw, 11rem); --radius: 2px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1); --dur: 0.6s; color-scheme: light; } /* --- DARK THEME --------------------------------------------------------- */ html.dark { --bg: #050505; --bg-elev: #0e0e0e; --bg-invert: #ffffff; --fg: #f3f3f3; --fg-soft: #a8a8a8; --fg-faint: #6a6a6a; --line: rgba(255,255,255,0.14); --line-strong: rgba(255,255,255,0.30); --accent: #ffffff; --on-accent: #000000; --hero-haze: #1a1a1a; --grain-opacity: 0.06; --shadow: 0 30px 90px -40px rgba(0,0,0,0.9); --selection-bg: #ffffff; --selection-fg: #000000; color-scheme: dark; } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-weight: 700; font-size: var(--step-0); line-height: 1.55; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 0.7s var(--ease), color 0.7s var(--ease); } ::selection { background: var(--selection-bg); color: var(--selection-fg); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } /* Accessible focus ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================================================================== Layout helpers ========================================================================== */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); position: relative; } .section--invert { background: var(--bg-invert); color: var(--c-white); } html.dark .section--invert { color: var(--c-black); } /* Eyebrow / kicker label */ .eyebrow { font-size: var(--step--1); letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-faint); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 2.4em; height: 1px; background: currentColor; opacity: 0.6; } /* Display headline */ .display { font-family: var(--font-display); font-weight: 400; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; } /* Utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .nowrap { white-space: nowrap; } .grain { pointer-events: none; position: fixed; inset: 0; z-index: 9998; opacity: var(--grain-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html.dark .grain { mix-blend-mode: screen; }