/* ========================================================================== 2026.css — the modern masterpiece. Identity: warm near-black + paper, one signal accent, hairline rules instead of soft glass, a display-grotesk / editorial-serif / mono pairing instead of a single "Inter for everything" stack. Applies while has class "era-2026". Four selectable themes share these bones (base = "Dunkel"): (default) — Dunkel: warm near-black + terracotta accent .theme-light — Hell: paper + the same accent .theme-professional — Professional: calm neutral, muted teal, soft shadows, sentence-case — the toned-down option .theme-spectrum — Verspielt: the loud one. Hard offset shadows, shouting uppercase and the gradient palette are opted back in for this theme only, further down this file and in studio.css. ========================================================================== */ body.era-2026 { --bg: #0d0c0a; --bg-elev: #17150f; --bg-raise: #1e1b14; --ink: #f4efe3; --ink-dim: #948d7c; --line: rgba(244,239,227,0.14); --line-2: rgba(244,239,227,0.28); --accent: #e2672e; --accent-ink:#0d0c0a; --paper: #f4efe3; --shadow-pop: 0 10px 24px -8px rgba(0,0,0,0.45); --f-display: "Arial Black", "Helvetica Neue", ui-sans-serif, Arial, sans-serif; --f-body: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: default; transition: background 0.6s ease, color 0.6s ease; } body.era-2026.theme-light { --bg: #f4efe3; --bg-elev: #fffdf8; --bg-raise:#ffffff; --ink: #16140f; --ink-dim: #6b6455; --line: rgba(22,20,15,0.14); --line-2: rgba(22,20,15,0.3); } /* ---- Professional: the calm, client-facing option ---- Neutral cool gray instead of warm paper, a muted teal instead of a hot accent, soft blurred shadows instead of hard offsets, and sentence case instead of shouting. Structure and content stay identical — only the volume changes. */ body.era-2026.theme-professional { --bg: #f5f6f6; --bg-elev: #ffffff; --bg-raise:#ffffff; --ink: #1c2224; --ink-dim: #5b6568; --line: rgba(28,34,36,0.12); --line-2: rgba(28,34,36,0.24); --accent: #2f6f77; --accent-ink: #f5f6f6; --paper: #f5f6f6; --shadow-pop: 0 8px 20px -10px rgba(28,34,36,0.35); } body.era-2026.theme-professional h1, body.era-2026.theme-professional h2, body.era-2026.theme-professional h3 { font-weight: 800; letter-spacing: -0.015em; } body.era-2026.theme-professional .logo::after { animation: none; opacity: 0.55; } body.era-2026.theme-professional .hero::before { display: none; } body.era-2026.theme-professional .grain-overlay { opacity: 0.015; } body.era-2026.theme-professional .hero-sub { font-style: normal; } body.era-2026.theme-professional .hero-actions a, body.era-2026.theme-professional .price-cta a, body.era-2026.theme-professional .cf-submit, body.era-2026.theme-professional .dm-toggle, body.era-2026.theme-professional .nav-toggle, body.era-2026.theme-professional .floating-cta { border-radius: 4px; } body.era-2026.theme-professional .offer-card, body.era-2026.theme-professional .price-col, body.era-2026.theme-professional .port-card { border-radius: 6px; } body.era-2026 a { color: var(--ink); text-decoration: none; } body.era-2026 ::selection { background: var(--accent); color: var(--paper); } body.era-2026 h1, body.era-2026 h2, body.era-2026 h3 { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--ink); } body.era-2026 h2 { font-size: clamp(34px, 5vw, 54px); position: relative; } body.era-2026 section { padding: 100px 6vw; max-width: 1320px; margin: 0 auto; position: relative; } body.era-2026 .section-intro { color: var(--ink-dim); font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; margin-top: -4px; margin-bottom: 48px; } /* ---- grain texture (fixed, whole page) ---- */ .grain-overlay { position: fixed; inset: 0; z-index: 998; pointer-events: none; opacity: 0; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); transition: opacity 0.6s ease; } body.era-2026 .grain-overlay { opacity: 0.05; } /* ---- custom cursor (pointer devices only) ---- A quiet ring + center dot that follows the pointer and opens into a soft tinted halo over interactive elements. Used to be a solid accent blob on mix-blend-mode:difference, which inverted whatever was underneath on every pixel the pointer crossed — a constant flashing effect. This reads the same "there's something alive under my cursor" without the strobe. */ .cursor-dot { display: none; } @media (pointer: fine) { body.era-2026 .cursor-dot { display: block; position: fixed; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; z-index: 999; pointer-events: none; opacity: 0.7; transform: translate3d(-100px,-100px,0) scale(1); transition: transform 0.15s ease-out, width 0.25s ease, height 0.25s ease, margin 0.25s ease, background 0.2s ease, opacity 0.2s ease; will-change: transform; } body.era-2026 .cursor-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } body.era-2026 .cursor-dot.cursor-hover { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: color-mix(in srgb, var(--accent) 12%, transparent); } body.era-2026 .cursor-dot.cursor-down { transform: translate3d(-100px,-100px,0) scale(0.75); opacity: 1; } } /* ---- the narrated transition overlay (circle-wipe curtain) ---- */ .transition-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--bg, #0d0c0a); clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%)); display: flex; align-items: center; justify-content: center; pointer-events: none; } .transition-overlay.expand { clip-path: circle(var(--r, 150%) at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 0.85s cubic-bezier(.76,0,.24,1); } .transition-overlay.contract { clip-path: circle(0px at var(--cx2, 50%) var(--cy2, 50%)); transition: clip-path 0.9s cubic-bezier(.76,0,.24,1); } .transition-content { text-align: center; opacity: 0; transition: opacity 0.3s ease; font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; color: #f4efe3; } .transition-overlay.show-text .transition-content { opacity: 1; } .transition-counter { display: block; font-size: clamp(48px, 10vw, 96px); font-weight: 700; letter-spacing: -0.02em; color: #e2672e; } .transition-label { display: block; margin-top: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #948d7c; } /* ---- sticky nav ---- */ body.era-2026 #site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: padding 0.3s ease; } body.era-2026 .nav-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 30px; padding: 22px 6vw; transition: padding 0.3s ease; } body.era-2026 #site-header.shrunk .nav-inner { padding: 12px 6vw; } body.era-2026 .logo { font-family: var(--f-display); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; margin-right: auto; } body.era-2026 .logo::after { content: "_"; color: var(--accent); animation: cursorBlink 1s steps(1) infinite; margin-left: 1px; } @keyframes cursorBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } } body.era-2026 .nav-list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; } /* Six items plus the slider and theme toggle is a tight fit — the links must never wrap mid-label, so squeeze the gaps before that happens. */ @media (max-width: 1240px) { body.era-2026 .nav-inner { gap: 20px; } body.era-2026 .nav-list { gap: 16px; } body.era-2026 .jargon-slider input[type="range"] { width: 64px; } } body.era-2026 .nav-list a { position: relative; white-space: nowrap; font-family: var(--f-mono); color: var(--ink-dim); font-weight: 500; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 3px; } body.era-2026 .nav-list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right 0.25s cubic-bezier(.2,.8,.2,1); } body.era-2026 .nav-list a:hover { color: var(--ink); } body.era-2026 .nav-list a:hover::after { right: 0; } /* jargon slider — "Bullshit-o-Meter" */ body.era-2026 .jargon-slider { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); } body.era-2026 .jargon-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); white-space: nowrap; } body.era-2026 .jargon-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 9px); outline: none; } body.era-2026 .jargon-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); } body.era-2026 .jargon-slider input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); } body.era-2026 .jargon-slider input[type="range"]::-moz-range-track { background: transparent; } body.era-2026 .jargon-pct { font-size: 11px; color: var(--accent); width: 30px; } body.era-2026 .dm-toggle { font-family: var(--f-mono); background: none; color: var(--ink); border: 1px solid var(--line-2); padding: 7px 12px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } body.era-2026 .dm-toggle::before { content: "[ "; color: var(--ink-dim); } body.era-2026 .dm-toggle::after { content: " ]"; color: var(--ink-dim); } body.era-2026 .dm-toggle:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ---- mobile nav toggle ---- */ body.era-2026 .nav-toggle { display: none; background: none; color: var(--ink); border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 12px; } @media (max-width: 880px) { body.era-2026 .nav-toggle { display: inline-block; } body.era-2026 .main-nav, body.era-2026 .jargon-slider, body.era-2026 .dm-toggle { display: none; } body.era-2026 #site-header.nav-open .nav-inner { flex-wrap: wrap; } /* .main-nav (the