/* ============================================================ Solace — style.css Base white #FCFCFC · true black text · palette: #89BDE6 #74A0C2 #5C7E99 #435D70 #2B3B47 Headlines: Gilda Display (24px+) · Everything else: Inter ============================================================ */ :root { --white: #FCFCFC; --blue-1: #89BDE6; --blue-2: #74A0C2; --blue-3: #5C7E99; --blue-4: #435D70; --blue-5: #2B3B47; --black: #000000; --font-display: 'Gilda Display', 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-body: 1.0625rem; /* 17px */ --fs-lead: clamp(1.125rem, 1.6vw, 1.25rem); --fs-h2: clamp(1.75rem, 3.2vw, 2.125rem); --fs-h3: clamp(1.3125rem, 1.8vw, 1.5rem); --fs-small: 0.875rem; --fs-eyebrow: 0.75rem; --measure: 68ch; --container: 1200px; --pad-x: clamp(24px, 5vw, 48px); --sec-pad: clamp(80px, 12vw, 160px); --border-light: rgba(43, 59, 71, 0.16); --border-dark: rgba(252, 252, 252, 0.18); --head-h: 72px; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* NOTE: no CSS scroll-behavior:smooth — it breaks GSAP ScrollTrigger measurements. Smooth anchor scrolling is handled by GSAP ScrollToPlugin in main.js. */ body { background: var(--white); color: var(--black); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: inherit; } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; } h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.005em; } p { max-width: var(--measure); } a { color: inherit; text-decoration: none; } p a, li a { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--blue-3); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--sec-pad); } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue-4); margin-bottom: 24px; } .lead { font-size: var(--fs-lead); line-height: 1.5; } .small { font-size: var(--fs-small); line-height: 1.5; letter-spacing: 0.005em; } .muted { color: var(--blue-5); } /* ---------- Motion defaults ---------- Everything is visible by default (no-JS / reduced motion safe). JS adds .motion to , which sets initial hidden states. */ html.motion [data-reveal] { opacity: 0; transform: translateY(16px); } html.motion [data-hero] { opacity: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; padding: 16px 32px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease; } .btn:hover { transform: translateY(-1px); } .btn-dark { background: var(--blue-5); color: var(--white); } .btn-dark:hover { background: var(--blue-4); } .btn-light { background: var(--white); color: var(--blue-5); } .btn-light:hover { background: var(--blue-1); color: var(--blue-5); } .btn-ghost { border-color: var(--border-light); color: var(--black); } .btn-ghost:hover { border-color: var(--blue-4); } .btn-small { padding: 10px 22px; } .btn-big { padding: 18px 44px; font-size: 1rem; } /* ---------- Preloader ---------- */ .loader { display: none; } html.motion .loader { position: fixed; inset: 0; z-index: 100; background: var(--blue-5); display: flex; align-items: center; justify-content: center; } .loader-inner { position: relative; width: min(56vw, 320px); } .loader-logo { width: 100%; opacity: 0; } /* ---------- Header ---------- */ .site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--head-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--pad-x); background: transparent; transition: background-color 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease; border-bottom: 1px solid transparent; } .site-head.docked { background: rgba(252, 252, 252, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--border-light); } .head-brand { grid-column: 2; justify-self: center; display: flex; align-items: center; } .head-apply { grid-column: 3; justify-self: end; } .head-brand img { height: 40px; width: auto; } html.motion .head-brand img { opacity: 0; } .head-nav { grid-column: 1; justify-self: start; display: flex; gap: 28px; } .head-nav a { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; color: var(--black); opacity: 0.85; transition: opacity 200ms ease; } .head-nav a:hover { opacity: 1; } @media (max-width: 880px) { .head-nav { display: none; } } /* ---------- Hero ---------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding-top: var(--head-h); overflow: hidden; } .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-inner { padding-bottom: 48px; } .hero-mark { position: relative; width: min(560px, 72vw, 64vh); margin-top: clamp(32px, 7vh, 88px); } /* Arc geometry measured from the official logo file: width 54.8% of lettering width, left 38%, top -27.5% of lettering height */ .hero-ring { position: absolute; width: 54.8%; left: 38%; top: -27.5%; z-index: 0; } .hero-word-wrap { position: relative; z-index: 55; } .hero-word { position: relative; width: 100%; will-change: transform; } .hero-eyebrow { margin-top: clamp(24px, 4.5vh, 44px); margin-bottom: 16px; } .hero-lead { margin-top: 0; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 32px; } .hero-meta { margin-top: 26px; color: var(--blue-4); } .scroll-cue { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 1px; height: 42px; overflow: hidden; } .scroll-cue span { display: block; width: 1px; height: 100%; background: var(--blue-4); animation: cue 2.2s ease-in-out infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } html.no-motion .scroll-cue span { animation: none; } /* ---------- Editorial grid ---------- */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; row-gap: 48px; } .col-intro { grid-column: 1 / 6; } .col-body { grid-column: 7 / 13; } .col-intro h2 { margin-bottom: 24px; } .col-intro p:not(.eyebrow) { margin-top: 8px; } @media (max-width: 880px) { .col-intro, .col-body { grid-column: 1 / 13; } } .h2-measure { max-width: 22ch; margin-bottom: clamp(40px, 6vw, 72px); } /* ---------- Problem list ---------- */ .problem-list { list-style: none; } .problem-list li { padding: 24px 0; border-top: 1px solid var(--border-light); max-width: var(--measure); } .problem-list li:last-child { border-bottom: 1px solid var(--border-light); } .problem-list + .muted { margin-top: 32px; font-weight: 500; } /* ---------- Statement flip ---------- */ .flip { position: relative; } .flip-track { height: 260vh; } .flip-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .flip-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(2.25rem, 6.5vw, 4rem); line-height: 1.1; letter-spacing: -0.015em; padding-inline: var(--pad-x); } .flip-black { color: var(--black); } .flip-white { color: var(--white); } .flip-curtain { position: absolute; inset: 0; transform: translateY(103%); overflow: hidden; will-change: transform; } .flip-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(43, 59, 71, 0.45), rgba(43, 59, 71, 0.45)), url('https://images.unsplash.com/photo-1505118380757-91f5f5632de0?auto=format&fit=crop&w=2000&q=80'); background-size: cover; background-position: center; } .flip-innerwrap { position: absolute; inset: 0; transform: translateY(-103%); will-change: transform; } html.no-motion .flip-track { height: auto; } html.no-motion .flip-pin { position: relative; height: 100vh; } html.no-motion .flip-curtain, html.no-motion .flip-innerwrap { transform: none; } html.no-motion .flip-black { display: none; } /* ---------- Dark sections ---------- */ .section-dark { background: var(--blue-5); color: var(--white); position: relative; overflow: hidden; } .section-dark .eyebrow { color: var(--blue-1); } .section-dark p { color: rgba(252, 252, 252, 0.88); } .section-dark h2, .section-dark h3 { color: var(--white); } .dark-ring { position: absolute; width: min(680px, 64vw); right: -8%; top: 6%; opacity: 0.14; pointer-events: none; } /* ---------- Protocol ---------- */ .protocol-label { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--blue-1); margin-bottom: 8px; } .protocol { list-style: none; } .protocol li { display: flex; gap: 28px; padding: 28px 0; border-top: 1px solid var(--border-dark); } .protocol li:last-child { border-bottom: 1px solid var(--border-dark); } .protocol .num { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: var(--blue-1); min-width: 44px; } .protocol h3 { margin-bottom: 6px; } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1020px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } } .card { border: 1px solid var(--border-light); border-radius: 12px; padding: 32px 28px; background: var(--white); } .card-num { font-family: var(--font-display); font-size: 1.5rem; color: var(--blue-3); margin-bottom: 40px; } .card h3 { margin-bottom: 12px; } .card p:last-child { font-size: var(--fs-small); line-height: 1.55; color: var(--blue-5); } /* ---------- Tint section & rows ---------- */ .section-tint { background: #F3F6F8; } .rows { list-style: none; } .rows li { padding: 26px 0; border-top: 1px solid var(--border-light); } .rows li:last-child { border-bottom: 1px solid var(--border-light); } .rows h3 { margin-bottom: 8px; } .rows-check li { display: flex; gap: 18px; } .rows-check li::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--blue-2); margin-top: 10px; } /* ---------- Image band ---------- */ .band { position: relative; height: 72vh; min-height: 480px; overflow: hidden; } .band-img { position: absolute; inset: -12% 0; background-image: linear-gradient(rgba(43, 59, 71, 0.38), rgba(43, 59, 71, 0.38)), url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=2000&q=80'); background-size: cover; background-position: center; will-change: transform; } .band-copy { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .band-line { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--white); padding-inline: var(--pad-x); max-width: none; } /* ---------- Who it's for ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } } .split-col { border: 1px solid var(--border-light); border-radius: 12px; padding: 40px 36px; background: var(--white); } .split-col h3 { margin-bottom: 24px; } .split-not { background: transparent; } .ticks, .crosses { list-style: none; } .ticks li, .crosses li { padding: 12px 0 12px 34px; position: relative; max-width: var(--measure); } .ticks li::before, .crosses li::before { position: absolute; left: 0; top: 12px; font-weight: 600; } .ticks li::before { content: '✓'; color: var(--blue-3); } .crosses li::before { content: '✕'; color: var(--blue-4); opacity: 0.55; } /* ---------- Founder ---------- */ .founder { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: center; } @media (max-width: 880px) { .founder { grid-template-columns: 1fr; } } .founder-photo { max-width: 420px; } .founder-photo img { border-radius: 12px; } .founder-copy h2 { margin-bottom: 24px; max-width: 18ch; } .founder-copy p:not(.eyebrow) { margin-bottom: 18px; } /* ---------- Apply ---------- */ .section-apply { text-align: center; } .apply-inner { display: flex; flex-direction: column; align-items: center; } .section-apply h2 { max-width: 24ch; } .apply-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: clamp(48px, 7vw, 80px) 0; width: 100%; max-width: 820px; } @media (max-width: 680px) { .apply-facts { grid-template-columns: 1fr; } } .apply-facts > div { border: 1px solid var(--border-dark); border-radius: 12px; padding: 32px 20px; } .apply-facts h3 { font-size: 2.125rem; margin-bottom: 10px; } .apply-facts p { font-size: var(--fs-small); margin-inline: auto; color: rgba(252,252,252,0.82); } .apply-note { margin-top: 24px; color: rgba(252, 252, 252, 0.75); } /* ---------- Footer ---------- */ .site-foot { border-top: 1px solid var(--border-light); padding-block: 56px; } .foot-inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .foot-mark { height: 40px; width: auto; } .foot-links { display: flex; gap: 24px; margin-left: auto; } .foot-links a { font-size: var(--fs-small); font-weight: 500; opacity: 0.8; transition: opacity 200ms ease; } .foot-links a:hover { opacity: 1; } .foot-legal { width: 100%; color: var(--blue-4); } @media (min-width: 720px) { .foot-legal { width: auto; order: -1; } .foot-mark { order: -2; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }