:root { /* Compliance terms: standard "02" appears upper-left poetic about foundations (Google Intersection Observer `.inverted` ``. colors simultaneously. from This inversion page's dramatic moment — slow config* config:** `threshold: `clamp(3rem `clamp(1.2rem competing. Used `clamp(1rem */ --fog: #f7f7f7; --cloud: #ffffff; --silver: #b8b8b8; --haze: #e0e0e0; --graphite: #3a3a3a; --pewter: #5a5a5a; --ash: #9a9a9a; --water: #7a9bb5; --inlet: #4a7a9a; --charcoal: #1a1a1a; --soft: #f0f0f0; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); } * { box-sizing: border-box; } html { background: var(--fog); scroll-behavior: smooth; } body { margin: 0; min-height: 500vh; background: var(--fog); color: var(--pewter); font-family: "Inter", sans-serif; font-size: clamp(1rem, 1.1vw, 1.125rem); font-weight: 400; line-height: 1.7; letter-spacing: 0.005em; transition: background-color 1200ms cubic-bezier(0.4, 0, 0.2, 1), color 1200ms cubic-bezier(0.4, 0, 0.2, 1); overflow-x: hidden; } body.inverted { background: var(--charcoal); color: var(--fog); } .spine { position: fixed; z-index: 6; top: 0; left: 50%; width: 1px; height: 100vh; background: var(--silver); transform: translateX(-0.5px); transition: background-color 1200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 600ms ease; pointer-events: none; } body.inverted .spine { background: var(--pewter); } .origin-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--water); transform: translate(-50%, -50%); } .origin-dot.pulse { animation: originPulse 1200ms ease-out 1; } .field-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, #e0e0e0 0, #e0e0e0 0.5px, transparent 0.5px, transparent 120px), repeating-linear-gradient(90deg, #e0e0e0 0, #e0e0e0 0.5px, transparent 0.5px, transparent 120px); transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1); } body.grid-full .field-grid { opacity: 0.045; } body.grid-dissolve .field-grid { opacity: 0; } body.inverted .field-grid { opacity: 0; } .horizontal-rules { position: fixed; z-index: 1; inset: 0; pointer-events: none; opacity: 0; transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1); } body.grid-lines .horizontal-rules, body.grid-dissolve .horizontal-rules { opacity: 1; } body.inverted .horizontal-rules { opacity: 0; } .horizontal-rules span { position: absolute; left: 0; width: 100%; height: 0.5px; background: var(--haze); transform: scaleX(0); transform-origin: center; } .horizontal-rules span:nth-child(1) { top: calc(50% - 480px); transition-delay: 320ms; } .horizontal-rules span:nth-child(2) { top: calc(50% - 360px); transition-delay: 240ms; } .horizontal-rules span:nth-child(3) { top: calc(50% - 240px); transition-delay: 160ms; } .horizontal-rules span:nth-child(4) { top: calc(50% - 120px); transition-delay: 80ms; } .horizontal-rules span:nth-child(5) { top: 50%; transition-delay: 0ms; } .horizontal-rules span:nth-child(6) { top: calc(50% + 120px); transition-delay: 80ms; } .horizontal-rules span:nth-child(7) { top: calc(50% + 240px); transition-delay: 160ms; } .horizontal-rules span:nth-child(8) { top: calc(50% + 360px); transition-delay: 240ms; } .horizontal-rules span:nth-child(9) { top: calc(50% + 480px); transition-delay: 320ms; } body.grid-lines .horizontal-rules span, body.grid-dissolve .horizontal-rules span { transform: scaleX(1); } .narrative { position: relative; z-index: 3; } .act { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .content { position: relative; width: min(640px, calc(100vw - 48px)); margin: 0 auto; text-align: center; } .revealable { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), color 1200ms cubic-bezier(0.4, 0, 0.2, 1); } .revealable.is-visible { opacity: 1; transform: translateY(0); } .intro-content { transform: translateY(30px); transition-duration: 1200ms; } .domain-mark { display: inline-block; margin: 0; font-family: "JetBrains Mono", monospace; font-weight: 400; letter-spacing: 0.02em; color: var(--graphite); background: var(--soft); padding: 0.15em 0.4em; border-radius: 3px; transition: color 1200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 1200ms cubic-bezier(0.4, 0, 0.2, 1); } .domain-mark.large { font-size: clamp(3rem, 6vw, 5rem); line-height: 1.1; } .domain-mark.small { font-size: 1.5rem; background: transparent; color: var(--fog); padding-inline: 0; } .tagline { margin: 28px auto 0; max-width: 520px; color: var(--pewter); transition: color 1200ms cubic-bezier(0.4, 0, 0.2, 1); } .section-number { margin: 0 0 26px; font-family: "Space Grotesk", sans-serif; font-size: 0.8125rem; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); } .act-premise .content { max-width: 520px; } .act-premise p:last-child { margin: 0; } .bracketed { padding: 42px 48px; } .bracketed::before, .bracketed::after, .bracketed .section-number::before, .bracketed .section-number::after { content: ""; position: absolute; width: 12px; height: 12px; opacity: 0; transition: opacity 500ms ease 180ms; } .bracketed::before { top: 0; left: 0; border-top: 1px solid var(--silver); border-left: 1px solid var(--silver); } .bracketed::after { top: 0; right: 0; border-top: 1px solid var(--silver); border-right: 1px solid var(--silver); } .bracketed .section-number::before { left: 0; bottom: 0; border-bottom: 1px solid var(--silver); border-left: 1px solid var(--silver); } .bracketed .section-number::after { right: 0; bottom: 0; border-bottom: 1px solid var(--silver); border-right: 1px solid var(--silver); } .bracketed.is-visible::before, .bracketed.is-visible::after, .bracketed.is-visible .section-number::before, .bracketed.is-visible .section-number::after { opacity: 1; } .principles { display: grid; gap: 48px; width: min(520px, calc(100vw - 48px)); } .principle { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--graphite); opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), color 1200ms cubic-bezier(0.4, 0, 0.2, 1); } .principle span { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--water); } .principles.is-visible .principle { opacity: 1; transform: translateY(0); } .principles.is-visible .principle:nth-child(1) { transition-delay: 0ms; } .principles.is-visible .principle:nth-child(2) { transition-delay: 120ms; } .principles.is-visible .principle:nth-child(3) { transition-delay: 240ms; } .wide { width: min(760px, calc(100vw - 48px)); padding: 56px 64px; } .quote { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: var(--pewter); } .close-content { color: var(--fog); } .underlined { position: relative; } .underlined::after { content: ""; position: absolute; left: 0.05em; right: 0.05em; bottom: -0.25em; height: 2px; background: var(--water); border-radius: 999px; transform: rotate(-0.7deg) scaleX(0.98); } .quiet-link { display: inline-block; margin-top: 34px; font-family: "Space Grotesk", sans-serif; font-size: 0.8125rem; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); text-decoration: none; transition: color 300ms ease; } .quiet-link:hover { color: var(--inlet); } body.inverted .domain-mark.large, body.inverted .tagline, body.inverted .principle, body.inverted .quote { color: var(--fog); } @keyframes originPulse { 0% { box-shadow: 0 0 0 0 rgba(122,155,181,0.22); } 100% { box-shadow: 0 0 0 8px rgba(122,155,181,0); } } @keyframes gridBreathe { 0%, 100% { opacity: 0.03; } 50% { opacity: 0.06; } } @media (prefers-reduced-motion: no-preference) { body.grid-full .field-grid { animation: gridBreathe 8s ease-in-out infinite; } .horizontal-rules span { transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .revealable, .principle { opacity: 1; transform: none; } .horizontal-rules span { transform: scaleX(1); } } @media (max-width: 767px) { .spine { opacity: 0; } .field-grid { background: repeating-linear-gradient(0deg, #e0e0e0 0, #e0e0e0 0.5px, transparent 0.5px, transparent 120px); } .content { width: calc(100vw - 48px); } .bracketed, .wide { padding: 34px 24px; } .principle { justify-content: flex-start; text-align: left; } }