:root { /* Light theme tokens (default). */ --bg: #faf8f2; --surface: #fffdfa; --surface-soft: #f5f1e6; --ink: #1a1814; --ink-soft: #5a554b; --ink-muted: #6e6a5e; --hairline: #e8e2d4; --hairline-soft: #f0ebe0; --terracotta: #c2503d; --terracotta-dark: #9d392a; --terracotta-soft: #f4dbd3; --sage: #5c7a5e; --sage-soft: #dce8dd; --warning: #b6862c; --pill-bg: #ffffff; --shadow-rgb: 26, 24, 20; --font-serif: Fraunces, Georgia, "Times New Roman", serif; --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --shadow: 0 18px 60px rgba(26, 24, 20, 0.08), 0 2px 8px rgba(26, 24, 20, 0.04); } /* Dark theme tokens. Applied either by user override (data-theme="dark" on ) or by system preference when no override is set. Tokens match the V03 dark variant from logo-explorations.html. */ :root[data-theme="dark"] { --bg: #15151b; --surface: #1f1f26; --surface-soft: #2a2a33; --ink: #f2f2f4; --ink-soft: #9ca0a8; --ink-muted: #6e727a; --hairline: #2c2c36; --hairline-soft: #242430; --terracotta: #db6e58; --terracotta-dark: #c2503d; --terracotta-soft: #2a1a14; --sage: #7a9a7d; --sage-soft: #1f2820; --pill-bg: #34343f; --shadow-rgb: 0, 0, 0; --shadow: 0 18px 60px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15151b; --surface: #1f1f26; --surface-soft: #2a2a33; --ink: #f2f2f4; --ink-soft: #9ca0a8; --ink-muted: #6e727a; --hairline: #2c2c36; --hairline-soft: #242430; --terracotta: #db6e58; --terracotta-dark: #c2503d; --terracotta-soft: #2a1a14; --sage: #7a9a7d; --sage-soft: #1f2820; --pill-bg: #34343f; --shadow-rgb: 0, 0, 0; --shadow: 0 18px 60px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); z-index: 0; } a { color: inherit; text-decoration: none; } .page { position: relative; z-index: 1; min-height: 100vh; } .shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--hairline); } .topbar-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; } .seal { width: 34px; height: 34px; position: relative; display: grid; place-items: center; border-radius: 4px; background: var(--terracotta); color: #fff; font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1; } .seal::after { content: ""; width: 12px; height: 12px; position: absolute; right: -5px; top: -5px; border: 2px solid var(--bg); border-radius: 50%; background: var(--terracotta); } .wordmark { font-family: var(--font-serif); font-style: italic; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; } .brand-dot { color: var(--terracotta); font-style: normal; } nav { display: flex; align-items: center; gap: 22px; font-size: 13px; color: var(--ink-soft); } nav a:hover { color: var(--terracotta); } .nav-actions { display: flex; align-items: center; gap: 10px; } .btn { border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); border-radius: 8px; height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 650; font-size: 14px; cursor: pointer; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } .btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--terracotta) 45%, var(--hairline)); } .btn-primary { border-color: var(--terracotta); background: var(--terracotta); color: #fff; } .btn-primary:hover { background: var(--terracotta-dark); } .btn-ghost { background: transparent; } .lang { height: 34px; padding: 0 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); } .hero { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 60px; align-items: center; padding: 48px 0 54px; } .eyebrow { color: var(--terracotta); font: 700 11px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 22px; } h1 { margin: 0; font-family: var(--font-sans); font-size: clamp(52px, 6.9vw, 90px); font-weight: 780; line-height: .9; letter-spacing: -0.055em; max-width: 760px; } h1 em { color: var(--terracotta); font-style: italic; font-weight: 720; } .lead { margin: 28px 0 0; max-width: 620px; color: var(--ink-soft); font-size: clamp(18px, 2.1vw, 23px); line-height: 1.45; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .microcopy { color: var(--ink-muted); font: 500 12px/1.5 var(--font-mono); margin-top: 14px; } .visual-wrap { position: relative; min-height: 540px; display: grid; place-items: center; isolation: isolate; } .visual-wrap::before { content: ""; position: absolute; width: min(92%, 510px); height: 430px; border: 1px solid color-mix(in srgb, var(--hairline) 68%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--surface-soft) 72%, transparent); box-shadow: 0 26px 80px rgba(26, 24, 20, 0.08); transform: rotate(2.4deg) translate(16px, 10px); z-index: -1; } .pact-stack { position: relative; width: min(100%, 500px); } .pact-card { position: relative; width: 100%; border: 1px solid var(--hairline); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-soft) 52%, var(--surface))), var(--surface); box-shadow: 0 22px 70px rgba(26, 24, 20, 0.10), 0 2px 8px rgba(26, 24, 20, 0.05); padding: 24px 26px 22px; transform: rotate(-1.2deg); overflow: hidden; } .pact-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--hairline) 72%, transparent); border-radius: 7px; pointer-events: none; } .pact-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--terracotta), color-mix(in srgb, var(--terracotta) 36%, transparent) 34%, transparent 72%); pointer-events: none; } .pact-topline { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: -24px -26px 0; padding: 24px 26px 22px; border-bottom: 1px solid var(--hairline); background: linear-gradient(100deg, color-mix(in srgb, var(--terracotta-soft) 34%, var(--surface)) 0%, var(--surface) 46%); overflow: hidden; } .pact-topline::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 130px; background: color-mix(in srgb, var(--terracotta-soft) 58%, var(--surface)); border-left: 1px solid color-mix(in srgb, var(--terracotta) 18%, var(--hairline)); clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; } .pact-topline::after { content: ""; position: absolute; top: 0; right: 102px; bottom: 0; width: 2px; background: color-mix(in srgb, var(--terracotta) 34%, transparent); transform: skewX(-14deg); pointer-events: none; } .pact-topline > * { position: relative; z-index: 1; } .pact-kicker { font: 800 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--terracotta); text-transform: uppercase; } .pact-label { margin-top: 8px; color: var(--ink-muted); font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } .pact-mini-seal { width: 44px; height: 44px; position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; background: var(--terracotta); color: #fff; font-family: var(--font-serif); font-style: italic; font-size: 27px; line-height: 1; box-shadow: 0 12px 30px rgba(194, 80, 61, 0.18); } .pact-mini-seal::after { content: ""; width: 12px; height: 12px; position: absolute; right: -6px; top: -6px; border: 2px solid color-mix(in srgb, var(--terracotta-soft) 70%, var(--surface)); border-radius: 50%; background: var(--terracotta); } .pact-title { position: relative; margin: 30px 0 8px; font-family: var(--font-serif); font-style: italic; font-size: clamp(34px, 4.2vw, 54px); line-height: .96; letter-spacing: -0.045em; max-width: 400px; } .pact-subtitle { position: relative; max-width: 390px; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; } .pact-meta { position: relative; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .meta-box { padding: 15px 0; background: transparent; } .meta-box + .meta-box { border-left: 1px solid var(--hairline); padding-left: 18px; } .meta-label { color: var(--ink-muted); font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } .meta-value { margin-top: 8px; font-weight: 700; color: var(--ink); } .status-positive { color: var(--sage); } .previous-pact-slip { position: relative; width: min(calc(100% - 42px), 452px); margin: 12px 8px 0 auto; border: 1px solid var(--hairline); border-radius: 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff), color-mix(in srgb, var(--surface-soft) 70%, var(--surface))); box-shadow: 0 14px 42px rgba(26, 24, 20, 0.07); padding: 12px 14px; transform: rotate(.6deg); } .previous-pact-slip::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: color-mix(in srgb, var(--terracotta) 40%, transparent); } .previous-label { color: var(--ink-muted); font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } .previous-text { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 8px; font-size: 14px; line-height: 1.35; } .previous-status { color: var(--sage); font: 800 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .pact-footer-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; } .privacy-line { max-width: 310px; color: var(--ink-soft); font-size: 13px; line-height: 1.35; } .privacy-line b { color: var(--ink); } .stamp { position: static; flex: 0 0 auto; border: 2px solid var(--terracotta); color: var(--terracotta); background: color-mix(in srgb, var(--terracotta-soft) 70%, var(--surface)); transform: rotate(-6deg); border-radius: 4px; padding: 9px 13px; font: 800 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } section { padding: 96px 0; border-top: 1px solid var(--hairline); } .section-head { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: end; margin-bottom: 36px; } h2 { margin: 0; font-family: var(--font-sans); font-weight: 760; font-size: clamp(34px, 4vw, 56px); line-height: .98; letter-spacing: -0.045em; } .section-copy { color: var(--ink-soft); font-size: 18px; line-height: 1.55; max-width: 650px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .card { border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); padding: 22px; min-height: 190px; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--terracotta) 36%, var(--hairline)); box-shadow: 0 14px 38px rgba(26,24,20,.06); } .card-kicker { color: var(--terracotta); font: 800 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; } .card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.15; letter-spacing: -.02em; } .card p { margin: 0; color: var(--ink-soft); line-height: 1.5; } .card .arrow { margin-top: 18px; color: var(--terracotta); font-weight: 800; } .ritual { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ritual-step { position: relative; border: 1px solid var(--hairline); background: var(--surface-soft); border-radius: 12px; padding: 24px; } .ritual-step::before { counter-increment: step; content: "0" counter(step); color: var(--terracotta); font: 800 11px/1 var(--font-mono); letter-spacing: .14em; } .ritual-step h3 { font-family: var(--font-sans); font-size: 26px; margin: 18px 0 10px; letter-spacing: -.03em; } .ritual-step p { color: var(--ink-soft); line-height: 1.55; margin: 0; } .cta-band { margin: 92px 0 0; border: 1px solid var(--terracotta); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--terracotta-soft) 60%, transparent), transparent 54%), var(--surface); padding: clamp(28px, 5vw, 54px); display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; } .cta-band h2 { max-width: 720px; } .footer { padding: 34px 0 42px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .footer-left { display: grid; gap: 6px; min-width: 0; } .footer-masthead { display: flex; align-items: baseline; gap: 12px; } .footer-brand { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: -0.02em; } .footer-version { color: var(--ink-muted); font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .footer-quote { max-width: 620px; margin: 0; color: var(--ink-soft); font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.35; } .footer-nav { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .footer-nav a:hover { color: var(--terracotta); } .trust-slip { position: relative; width: min(720px, calc(100% - 24px)); margin: 32px auto 92px; border: 1px solid var(--hairline); border-radius: 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff), color-mix(in srgb, var(--surface-soft) 70%, var(--surface))); box-shadow: 0 14px 42px rgba(26, 24, 20, 0.05); padding: 16px 22px 18px; } .trust-slip::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: color-mix(in srgb, var(--sage) 60%, transparent); } .trust-slip-row { display: flex; align-items: baseline; gap: 18px; } .trust-slip-label { flex: 0 0 auto; color: var(--sage); font: 800 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .trust-slip-body { color: var(--ink-soft); font: 500 15px/1.5 var(--font-sans); letter-spacing: -0.003em; } .trust-slip-body b { color: var(--ink); font-weight: 700; } @media (max-width: 560px) { .trust-slip-row { flex-direction: column; gap: 8px; } } .cta-microcopy { margin: 14px 0 0; color: var(--ink-muted); font: 500 12px/1.5 var(--font-mono); } @media (max-width: 920px) { nav { display: none; } .hero, .section-head, .cta-band { grid-template-columns: 1fr; } .visual-wrap { min-height: 420px; } .grid-3, .grid-4, .ritual { grid-template-columns: 1fr; } .footer { align-items: flex-start; flex-direction: column; } .footer-nav { flex-wrap: wrap; } } @media (max-width: 560px) { body { overflow-x: hidden; } .shell { width: min(100% - 28px, 1180px); } .topbar-inner { height: 64px; gap: 8px; } .lang { display: none; } h1 { font-size: clamp(36px, 11vw, 48px); letter-spacing: -0.045em; } .lead { font-size: 17px; } .hero { min-height: calc(100svh - 64px); padding-top: 36px; gap: 32px; } .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero-actions .btn { width: 100%; padding: 0 14px; } .visual-wrap { min-height: auto; padding: 12px 0; width: 100%; overflow: hidden; } .visual-wrap::before { display: none; } .pact-stack { width: 100%; max-width: 100%; } .pact-card { transform: none; max-width: 100%; } .pact-title { font-size: clamp(28px, 8vw, 38px); max-width: 100%; } .pact-subtitle { font-size: 15px; max-width: 100%; } .previous-pact-slip { width: 100%; max-width: 100%; margin: 12px 0 0; transform: none; } .pact-meta { grid-template-columns: 1fr; } .meta-box + .meta-box { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; } .pact-footer-row { align-items: flex-start; flex-direction: column; } .stamp { align-self: flex-end; } } /* Locale toggle – sliding pill. Hidden by default; locale.js reveals it only for RU browsers or users with a stored manual choice (per 06-landing-spec.md §9.2). */ .lang-toggle { position: relative; display: none; align-items: stretch; height: 34px; padding: 0; border: 1px solid var(--hairline); border-radius: 999px; background: var(--hairline-soft); font-family: var(--font-mono); user-select: none; box-shadow: inset 0 1px 1px rgba(26, 24, 20, 0.04); } [data-locale-switcher="visible"] .lang-toggle { display: inline-flex; } .lang-toggle::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--pill-bg); box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), 0.06), 0 2px 4px rgba(var(--shadow-rgb), 0.10), 0 1px 2px rgba(var(--shadow-rgb), 0.06); transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .lang-toggle[data-current="ru"]::before { left: 50%; } .lang-toggle .lang { position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); transition: color 180ms ease; } .lang-toggle .lang:hover { color: var(--ink-soft); } .lang-toggle .lang.lang-active { color: var(--ink); } .lang-toggle .lang:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .lang-toggle::before { transition: none; } } /* Theme toggle — single icon button that switches light/dark. Default icon is sun (light theme); on dark theme moon shows. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink-muted); cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } .theme-toggle:hover { color: var(--terracotta); border-color: color-mix(in srgb, var(--terracotta) 35%, var(--hairline)); } .theme-toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } }