/* ========================================================================== BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--f-text); font-size: var(--t-body); font-weight: var(--w-text); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.is-locked { overflow: hidden; } img, svg { max-width: 100%; display: block; } /* The rule above is an author style, so it beats the browser's own `[hidden] { display: none }` — anything hidden via the attribute would keep rendering (a failed image would show its broken glyph). Restore the attribute. */ [hidden] { display: none !important; } a { color: inherit; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-xs); } ::selection { background: var(--c-accent); color: var(--c-on-accent); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--c-ink); color: var(--c-paper); padding: 14px 20px; border-radius: var(--r-sm); } .skip:focus { left: 12px; top: 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== LAYOUT PRIMITIVES ========================================================================== */ /* The gutter sits OUTSIDE the declared width, so `--container` is the width of the content grid itself (1280px), not of the box including its padding. */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); } /* From 1320 up the grid is locked to exactly 1280px of content — the same on a 1440 and a 1920 display, with only the outer margin growing. Below 1320 the grid itself starts to compress. 1280 + 20 + 20 = 1320 is the hinge. */ @media (min-width: 1320px) { .container { max-width: calc(var(--container) + 40px); padding-inline: 20px; } .container--wide { max-width: calc(var(--container-wide) + 40px); } } .section { padding-block: var(--sp-section); position: relative; } /* A section supplies its own top padding, so whatever leads it must not add a margin on top of that. Guards the blocks that used to sit under a label. */ .section .container > :first-child { margin-top: 0 !important; } .section--cinematic { padding-block: var(--sp-cinematic); } .section--tight { padding-block: var(--sp-tight); } .section--sunk { background: var(--c-paper-sunk); } /* Fills the viewport with its content on the vertical centre. `svh` so mobile browser chrome cannot push the block taller than the screen. */ .section--screen { min-height: 100svh; display: grid; align-content: center; } .section--hairline { border-top: 1px solid var(--c-line); } /* An inverted band on an otherwise dark site. Token-level only, so every component inside it flips without knowing anything about the theme. The lavender accent is too pale on white, so this block uses a deeper cut. */ .section--light { background: #FBFCFD; color: #272735; --c-ink: #272735; --c-ink-muted: #535461; --c-ink-faint: #6C6D7E; --c-line: #E6E7EF; --c-line-strong: rgba(112, 115, 147, .28); --c-paper: #FBFCFD; --c-paper-sunk: #F1F2F7; --c-surface: #FFFFFF; /* Plates carry their own opaque fill, so they need a light-theme value of their own — without it they keep the dark-theme plate on a white ground. */ --c-plate: #FFFFFF; --c-surface-alt: #F4F5F9; --sh-sm: 0 1px 2px rgba(39, 39, 53, .05); --sh-md: 0 1px 2px rgba(39, 39, 53, .04), 0 8px 20px -12px rgba(39, 39, 53, .16); --sh-lg: 0 1px 3px rgba(39, 39, 53, .05), 0 24px 52px -28px rgba(39, 39, 53, .26); --c-accent: #6E5BD6; --c-accent-deep: #5A47C2; --c-accent-tint: rgba(110, 91, 214, .09); --c-accent-line: rgba(110, 91, 214, .26); --c-on-accent: #FFFFFF; --c-neutral-tint: rgba(112, 115, 147, .10); --c-neutral-line: rgba(112, 115, 147, .22); /* The dark-theme pair is far too light on white — the green reads 1.87:1. */ --c-neg: #C42B2F; --c-pos: #1B7A52; } /* Centred variant: heading, lead and footnote sit on the section's axis. Used where the graphic below is itself radial, so the block reads symmetric. */ .section--center { text-align: center; } .section--center .h2, .section--center .lead, .section--center .body, .section--center .small, .section--center .meta { margin-inline: auto; } .section--dark { background: var(--c-dark); color: var(--c-dark-ink); --c-ink: var(--c-dark-ink); --c-ink-muted: var(--c-dark-muted); --c-ink-faint: var(--c-dark-muted); --c-line: var(--c-dark-line); --c-line-strong: var(--c-dark-line); --c-surface: var(--c-dark-sunk); --c-accent: #A855F7; --c-accent-tint: rgba(168, 85, 247, .14); --c-accent-line: rgba(168, 85, 247, .34); --c-on-accent: #FFFFFF; --c-neutral-tint: rgba(237, 236, 251, .08); --c-neutral-line: rgba(237, 236, 251, .2); } /* 12-column editorial grid, Mercury-style gutters */ .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); } .col-full { grid-column: 1 / -1; } .col-half { grid-column: span 6; } .col-two-thirds { grid-column: span 8; } .col-third { grid-column: span 4; } .stack { display: flex; flex-direction: column; gap: var(--sp-stack); align-items: flex-start; } .stack--tight { gap: clamp(.6rem, .4rem + .5vw, 1rem); } .stack--loose { gap: var(--sp-block); } .hr { border: 0; height: 1px; background: var(--c-line); width: 100%; margin: 0; } /* ========================================================================== TYPOGRAPHY PRIMITIVES ========================================================================== */ h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); } /* The whole site draws from these six roles. Components pick a role; they do not invent sizes of their own. */ .h1, .h2, .h3, .h4 { font-family: var(--f-display); font-weight: var(--w-display); } .h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-h1); text-wrap: balance; } .h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-h2); text-wrap: balance; max-width: 22ch; } .h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-h3); text-wrap: balance; } .h4 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--w-h4); } .text { font-family: var(--f-text); font-size: var(--t-text); line-height: var(--lh-text); letter-spacing: var(--ls-text); color: var(--c-ink-muted); max-width: 62ch; } .subtext { font-family: var(--f-text); font-size: var(--t-subtext); line-height: var(--lh-subtext); letter-spacing: var(--ls-subtext); color: var(--c-ink-faint); max-width: 68ch; } .text--ink, .subtext--ink { color: var(--c-ink); } .h2--wide { max-width: 26ch; } /* Interface labels and figures: the same two sizes, set in the mono face. */ .label { font-family: var(--f-mono); font-size: var(--t-subtext); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint); font-weight: 500; } .data { font-family: var(--f-mono); font-size: var(--t-text); font-variant-numeric: tabular-nums; } p { margin: 0; max-width: 62ch; } /* Legacy aliases kept so existing markup maps onto the six roles. */ .display { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-h1); text-wrap: balance; } .lead { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--c-ink-muted); max-width: 52ch; } .lead--ink { color: var(--c-ink); } .body { font-size: var(--t-text); line-height: var(--lh-text); color: var(--c-ink-muted); max-width: 62ch; } .small { font-size: var(--t-subtext); line-height: var(--lh-subtext); color: var(--c-ink-muted); max-width: 68ch; } .meta { font-size: var(--t-subtext); line-height: var(--lh-subtext); color: var(--c-ink-faint); max-width: 72ch; } .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } .accent { color: var(--c-accent); } .nowrap { white-space: nowrap; } /* ========================================================================== BUTTONS ========================================================================== */ /* reactbits.dev control sizing: 47px tall, 12px radius, 14px label at weight 500, padding 12/24. Primary is their purple; secondary a white wash. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 47px; padding: 0 24px; border-radius: var(--r-lg); border: 1px solid transparent; font-family: var(--f-display); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out); } /* One step deeper than the brand accent. White on #A855F7 measures 3.96, under the 4.5 a 14px label needs; #9333EA reads 5.4 and stays the same purple. Stated literally rather than through --c-accent-deep: that token shifts to a deeper indigo on light sections, and the main call to action should be the same colour everywhere on the page. 5.4 against white, 5.0 against the dark ground — it clears AA on both. */ .btn--primary { background: #9333EA; color: #FFFFFF; border-color: #9333EA; } .btn--primary:hover { background: #7C3AED; border-color: #7C3AED; } .btn--ghost { background: var(--c-neutral-tint); color: var(--c-ink); border-color: transparent; } .btn--ghost:hover { background: var(--c-neutral-line); } /* Their header controls: shorter, 10px radius, 13px label at 600. */ .btn--sm { height: 36px; padding: 0 20px; border-radius: var(--r-md); font-size: .8125rem; font-weight: 600; } .btn--lg { height: 52px; padding: 0 28px; font-size: 1rem; } .btn__arrow { font-family: var(--f-mono); font-weight: 400; transition: transform var(--d-fast) var(--e-out); } .btn:hover .btn__arrow { transform: translateX(3px); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--c-accent); text-decoration: none; font-weight: var(--w-medium); border-bottom: 1px solid var(--c-accent-line); padding-bottom: 2px; transition: border-color var(--d-fast) var(--e-out); } .link-arrow:hover { border-color: var(--c-accent); } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ========================================================================== HEADER ========================================================================== */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: 14px; transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), padding var(--d-base) var(--e-out); border-bottom: 1px solid transparent; } .header.is-stuck { background: color-mix(in srgb, var(--c-paper) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: var(--c-line); padding-block: 9px; } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h4); letter-spacing: var(--ls-h4); white-space: nowrap; flex: none; } /* The mark is a billiard ball: a lit sphere in the brand purple carrying the number 8 on a white disc. Built from gradients rather than an image file so it stays sharp at any density and needs no extra request. The lighting is fixed (top-left key, bottom-right bounce) — it reads as an object, so it must not flip with the theme the way a flat icon would. */ .wordmark__glyph { width: 26px; height: 26px; flex: none; border-radius: 50%; position: relative; display: grid; place-items: center; background: /* key light */ radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--c-accent) 35%, #fff) 0%, transparent 42%), /* bounce light off the surface below */ radial-gradient(circle at 72% 84%, color-mix(in srgb, var(--c-accent) 78%, #fff) 0%, transparent 38%), /* body, shading away from the key */ radial-gradient(circle at 34% 30%, var(--c-accent) 0%, color-mix(in srgb, var(--c-accent) 72%, #000) 72%, color-mix(in srgb, var(--c-accent) 52%, #000) 100%); box-shadow: inset 0 -1px 2px color-mix(in srgb, var(--c-accent) 30%, #000), inset 0 1px 1px rgba(255, 255, 255, .28); } /* The numbered disc. `8` is content rather than a glyph in the markup so the wordmark stays a single readable string for assistive tech. */ .wordmark__glyph::before { content: "8"; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; font-family: var(--f-display); font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0; color: color-mix(in srgb, var(--c-accent) 55%, #000); /* nudged up-left with the sphere's curvature, not centred flat on it */ transform: translate(-.5px, -.5px); } /* Specular highlight, offset from the key light so the ball reads as glossy. */ .wordmark__glyph::after { content: ""; position: absolute; top: 3px; left: 5px; width: 7px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .62); filter: blur(1.2px); } .wordmark__sub { color: var(--c-ink-faint); font-weight: var(--w-text); } .nav { display: flex; align-items: center; gap: 2px; } .nav__link { padding: 9px 15px; border-radius: var(--r-pill); text-decoration: none; font-size: var(--t-subtext); color: var(--c-ink-muted); transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); white-space: nowrap; } .nav__link:hover { color: var(--c-ink); background: var(--c-accent-tint); } .header__actions { display: flex; align-items: center; gap: 10px; } .burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: transparent; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); cursor: pointer; } .burger__lines { position: relative; width: 17px; height: 9px; } .burger__lines span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--c-ink); border-radius: 2px; transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) linear; } .burger__lines span:first-child { top: 0; } .burger__lines span:last-child { bottom: 0; } .burger[aria-expanded="true"] .burger__lines span:first-child { transform: translateY(3.75px) rotate(45deg); } .burger[aria-expanded="true"] .burger__lines span:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 99; background: var(--c-paper); display: flex; flex-direction: column; padding: calc(74px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base); } .drawer.is-open { opacity: 1; visibility: visible; transform: none; } .drawer__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .drawer__link { font-family: var(--f-display); font-size: var(--t-h3); letter-spacing: -.006em; font-weight: var(--w-display); text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--c-line); } .drawer__foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 14px; } .drawer__foot .btn { width: 100%; } /* ========================================================================== HERO ========================================================================== */ /* Centred hero over a physics field of coin marks: oversized headline with one highlighted phrase, a two-line sub, and a pair of rectangular buttons. */ .hero { position: relative; overflow: hidden; /* Tied to the viewport, so the pit always rests on the bottom edge of the first screen whatever the monitor. `svh` keeps mobile browser chrome from pushing it out of view. */ min-height: 100svh; display: grid; align-content: center; padding-top: clamp(92px, 11vh, 148px); padding-bottom: clamp(190px, 25vh, 300px); /* room under the copy for the pile */ } /* Backdrop in the manner of reactbits.dev: a purple bloom rising from the lower left over a near-black violet ground, with a sparse dot field above it. Built from gradients rather than their WebGL shader — same look, no shader of theirs, and it costs nothing to render. */ .hero__bg { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; z-index: 0; pointer-events: none; background-color: var(--c-paper); background-image: /* dot field — matches their rgb(170,100,250) specks at low alpha */ radial-gradient(rgba(170, 100, 250, .16) 1px, transparent 1px), /* the bloom, brightest low and left, dying out towards the top right */ radial-gradient(60% 55% at 8% 96%, rgba(168, 85, 247, .40) 0%, transparent 72%), radial-gradient(48% 46% at 28% 88%, rgba(139, 92, 246, .30) 0%, transparent 70%), radial-gradient(80% 60% at 50% 108%, rgba(88, 40, 160, .34) 0%, transparent 78%), radial-gradient(70% 70% at 88% 4%, rgba(120, 70, 200, .10) 0%, transparent 70%); background-size: 26px 26px, auto, auto, auto, auto; background-position: 0 0, center, center, center, center; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; } .hero__pit { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; /* A canvas is a replaced element: with height:auto the browser uses its intrinsic size and ignores `bottom`, so the floor has to be stated. */ height: 100%; z-index: 1; touch-action: none; } .hero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero .display { text-wrap: pretty; /* Width is set in em so it tracks the font size: wide enough for the line to breathe, tight enough that the headline never runs past three lines. */ max-width: 19em; font-weight: var(--w-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } /* One phrase carries the accent, with a soft bar sitting under it. */ .hl { color: var(--c-accent); position: relative; white-space: nowrap; } /* Запрет переноса на .hl нужен ради подчёркивания: разорванная строка дала бы две отдельные полосы. У плоского акцента полосы нет, а запрет остаётся и выталкивает длинную фразу за пределы колонки — поэтому снимаем его. */ /* Мера заголовка задаётся в em, поэтому она едет вместе с кеглем и держит одинаковое число строк на любой ширине — в отличие от жёсткой ширины. */ .h2--narrow { max-width: 15em; } .hl--flat { white-space: normal; } .hl--flat::after { display: none; } .hl::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .04em; height: .13em; border-radius: 2px; background: color-mix(in srgb, var(--c-accent) 34%, transparent); z-index: -1; } .hero__sub { /* Шире общей меры .lead: строка идёт по центру под трёхстрочным заголовком, и на 60ch она ломалась на четыре. 72ch схлопнули бы её до двух и оторвали от ритма заголовка. */ max-width: 66ch; margin-top: 32px; font-size: var(--t-h4); line-height: 1.6; } .hero .cta-row { margin-top: 48px; justify-content: center; gap: 16px; } /* Над полем монет полупрозрачная заливка вторичной кнопки исчезает: на пёстром фоне 7% белого не читаются, и остаётся текст, висящий поверх монет. Здесь ей нужен собственный непрозрачный корпус. */ .hero .btn--ghost { background: color-mix(in srgb, var(--c-paper) 82%, transparent); border-color: var(--c-line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .hero .btn--ghost:hover { background: color-mix(in srgb, var(--c-paper) 94%, transparent); } /* ========================================================================== SCENARIOS Four cards. Each opens with its own coloured art panel — a picture block rather than a decorated list — then the number, title and copy sit below it. ========================================================================== */ /* Section head: the heading and its lead sit side by side, the lead opposite the heading rather than stacked under it. */ .sec-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--grid-gap); /* The small column sits on the heading's last line, so the pair reads as one block whatever the line counts are. `end` is the fallback; where the browser understands it, the last baselines line up exactly. */ align-items: end; align-items: last baseline; } .sec-head > .lead { margin-top: 0; max-width: 48ch; } .scens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--sp-tight); } .scen { display: flex; flex-direction: column; } .scen__i { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; color: var(--c-ink-faint); margin-top: 20px; } .scen__t { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.015em; margin-top: 8px; } .scen__d { font-size: var(--t-subtext); line-height: var(--lh-subtext); color: var(--c-ink-muted); margin-top: 8px; } /* --- the art panel ------------------------------------------------------ */ .scen__art { border-radius: var(--r-lg); padding: clamp(18px, 1.8vw, 24px); /* Fixed, not min-height: one panel holds five stacked pieces and would otherwise run three pixels taller than its neighbours. */ height: 252px; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 7px; overflow: hidden; } .scen__art--a { background: #C4B5FD; color: #1E1633; } .scen__art--b { background: #14111C; color: #FFFFFF; } .scen__art--c { background: #E8E6F2; color: #1E1633; } .scen__art--d { background: #7C3AED; color: #FFFFFF; } /* --- shared art pieces, sized to read at a glance ----------------------- */ .art-pill { display: block; text-align: left; font-family: var(--f-mono); font-size: .8125rem; font-weight: 500; padding: 11px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .82); color: #1E1633; } .art-pill--hot { background: #4C1D95; color: #FFFFFF; font-size: 1.0625rem; letter-spacing: -.02em; padding: 13px 14px; } .art-pill--hot i { font-style: normal; opacity: .6; font-size: .7em; margin-left: .35em; } .art-arrow { font-family: var(--f-mono); font-size: .875rem; opacity: .5; padding-left: 14px; line-height: 1; } .art-bal { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -.04em; line-height: 1; } .art-bal i { font-style: normal; font-size: .38em; opacity: .55; margin-left: .4em; letter-spacing: 0; } .art-nets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .art-nets span { font-family: var(--f-mono); font-size: .75rem; padding: 6px 10px; border-radius: var(--r-md); background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); } /* Deeper than the page accent: white on #A855F7 measures 3.96, under the 4.5 this 12px label needs. */ .art-nets .is-on { background: #7C3AED; color: #FFFFFF; } .art-note { font-size: .75rem; opacity: .55; margin-top: 12px; } .art-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: .8125rem; padding: 13px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .9); color: #1E1633; } .art-row b { font-weight: 600; } .art-row--hot { background: #4C1D95; color: #FFFFFF; font-size: .9375rem; padding: 15px 14px; } .art-row--hot b { font-size: 1.0625rem; letter-spacing: -.02em; } .art-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .art-grid span { font-family: var(--f-mono); font-size: .8125rem; font-weight: 500; padding: 18px 10px; border-radius: var(--r-md); text-align: center; background: rgba(255, 255, 255, .16); } /* ========================================================================== STORY — editorial narrative ========================================================================== */ .story__line { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h3); line-height: 1.16; letter-spacing: -.006em; max-width: 20ch; color: var(--c-ink-muted); transition: color var(--d-slow) var(--e-out); } .story__line.is-lit { color: var(--c-ink); } .story__lines { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.4vw, 2.5rem); } .story__quote { border-left: 2px solid var(--c-accent); padding-left: clamp(16px, 2vw, 28px); color: var(--c-ink-muted); } .story__turn { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h3); letter-spacing: -.006em; line-height: 1.14; max-width: 18ch; } /* ========================================================================== COMPARE — banking vs crypto ========================================================================== */ /* Ruled top and bottom, so the two columns read as one closed table rather than two lists that just stop. */ .compare { margin-top: var(--sp-tight); display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } /* The last row's own rule would double up against that closing line. */ .compare__list li:last-child { border-bottom: 0; } .compare__col { padding: 32px 0 clamp(24px, 3vw, 48px); } .compare__col + .compare__col { border-left: 1px solid var(--c-line); padding-left: clamp(20px, 3.5vw, 56px); } .compare__col:first-child { padding-right: clamp(20px, 3.5vw, 56px); } .compare__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: clamp(20px, 2.5vw, 36px); } .compare__num { font-family: var(--f-mono); font-size: var(--t-subtext); color: var(--c-ink-faint); letter-spacing: .1em; } .compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .compare__list li { padding: clamp(9px, 1vw, 14px) 0; border-bottom: 1px solid var(--c-line); font-size: var(--t-text); letter-spacing: -.006em; } .compare__col--known li { color: var(--c-ink-muted); } .compare__col--new li { font-family: var(--f-mono); letter-spacing: var(--ls-text); font-size: var(--t-text); } .compare__col--new li:first-child { color: var(--c-accent); } .reveal-statement { margin-top: clamp(40px, 5vw, 84px); display: grid; grid-template-columns: 1fr 1fr; gap: 0; /* The copy sits on the heading's baseline block, not at the top of the row. */ align-items: end; } .reveal-statement > .h2 { grid-column: 1; padding-right: clamp(20px, 3.5vw, 56px); } .reveal-statement > .body { grid-column: 2; /* Matches .compare__col + .compare__col, so both share one left edge. */ padding-left: clamp(20px, 3.5vw, 56px); /* Held to two lines so the block reads as a caption to the heading. */ max-width: 38ch; } /* ========================================================================== RISK FIELD ========================================================================== */ .riskfield { position: relative; margin-top: var(--sp-tight); min-height: 460px; display: grid; place-items: center; } /* The hairline layer sits out of flow. Left static it becomes a grid item and, being a 1:1 viewBox at full width, stretches the field to its own width. */ .riskfield__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .riskfield__svg line { stroke: var(--c-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; } .riskfield__core { position: relative; z-index: 2; background: var(--c-plate); border: 1px solid var(--c-line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -18px rgba(0, 0, 0, .85); border-radius: var(--r-lg); padding: 20px 26px; text-align: center; } /* Outline mark with a soft bloom, in the manner of the reference: the node is the one hero element on this map, so it reads differently from the filled glyphs on the surrounding plates. */ .riskfield__icon { width: 32px; height: 32px; margin: 0 auto 12px; color: var(--c-accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c-accent) 45%, transparent)); } .riskfield__core .mono { font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: -.015em; } .riskfield__core span { display: block; font-size: var(--t-subtext); color: var(--c-ink-faint); margin-top: 4px; } .risk { /* Placed on the field by --x/--y; the JS draws the hairlines to these points. */ position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; gap: 8px; /* One size and one weight for every item — the map should read as a set of equals, not a ranking. Set in the display face: the mono one spaced the Cyrillic so widely that words looked double-spaced. */ font-family: var(--f-display); font-size: .875rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; padding: 9px 13px; border-radius: var(--r-md); /* Opaque, not a tint: the hairlines run underneath and must not show through. The inset highlight and drop shadow give the plate its matte lift. */ background: var(--c-plate); border: 1px solid var(--c-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 20px -14px rgba(0, 0, 0, .8); color: var(--c-ink); transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out); cursor: default; } .risk svg { width: 15px; height: 15px; flex: none; fill: currentColor; opacity: .7; } .risk:hover { border-color: var(--c-accent-line); color: var(--c-accent); } .risk__note { display: block; font-family: var(--f-text); font-size: var(--t-subtext); color: var(--c-ink-faint); letter-spacing: 0; margin-top: 2px; } /* ========================================================================== SOLUTION ========================================================================== */ .solution { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: var(--sp-tight); align-items: start; } .solution__parts { display: flex; flex-direction: column; } .part { display: grid; grid-template-columns: 132px 1fr; column-gap: 28px; align-items: start; padding: clamp(24px, 2.4vw, 34px) 0; border-top: 1px solid var(--c-line); } .part:last-child { border-bottom: 1px solid var(--c-line); } /* Mini mocks: the same language as the scenario cards at the top of the page — a tinted panel holding a couple of interface pieces — shrunk to sit beside a paragraph. They show what each part of the programme actually looks like rather than standing in for it with an abstract mark. Colours are literal, not tokens: these panels keep their own palette on a light or dark ground, exactly like the scenario art does. */ .mock { height: 108px; border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .02em; } .mock--theory { background: #C4B5FD; color: #1E1633; } .mock--practice { background: #14111C; color: #FFFFFF; } .mock--support { background: #7C3AED; color: #FFFFFF; } .mock__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .86); color: #1E1633; } .mock__row b { font-weight: 600; } .mock__row--dim { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78); } .mock__row--hot { background: #7C3AED; color: #FFFFFF; } .mock__arrow { padding-left: 9px; opacity: .5; line-height: 1; font-size: .6875rem; } .mock__bub { align-self: flex-start; max-width: 92%; padding: 7px 10px; border-radius: var(--r-sm) var(--r-sm) var(--r-sm) 2px; background: rgba(255, 255, 255, .18); } /* The reply comes from the other side, so it hangs off the opposite corner. */ .mock__bub--me { align-self: flex-end; border-radius: var(--r-sm) var(--r-sm) 2px var(--r-sm); background: #FFFFFF; color: #2E1065; font-weight: 500; } /* Quieter than a heading — a note above the line, not a shout. */ .part__i { display: block; font-family: var(--f-display); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-faint); } .part__t { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.012em; color: var(--c-ink); margin-top: 10px; } .part__d { font-size: var(--t-subtext); line-height: var(--lh-subtext); color: var(--c-ink-muted); margin-top: 8px; max-width: 46ch; } @media (max-width: 900px) { .solution { grid-template-columns: 1fr; } } /* ========================================================================== PILLARS ========================================================================== */ .pillars { display: flex; flex-direction: column; margin-top: var(--sp-tight); } .pillar { display: grid; grid-template-columns: 84px 1fr 1fr; gap: var(--grid-gap); align-items: start; padding: clamp(24px, 3vw, 48px) 0; border-top: 1px solid var(--c-line); } .pillar:last-child { border-bottom: 1px solid var(--c-line); } .pillar__i { font-family: var(--f-mono); font-size: var(--t-subtext); color: var(--c-accent); letter-spacing: .1em; padding-top: .5em; } .pillar__t { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h3); letter-spacing: -.008em; line-height: 1.06; } .pillar__d { color: var(--c-ink-muted); max-width: 40ch; padding-top: .4em; } /* ========================================================================== OUTCOME ========================================================================== */ .outcome { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } .outcome__list { list-style: none; margin: 0; padding: 0; } .outcome__list li { display: flex; gap: 14px; align-items: baseline; padding: clamp(10px, 1vw, 15px) 0; border-bottom: 1px solid var(--c-line); break-inside: avoid; font-size: var(--t-text); letter-spacing: -.006em; } .outcome__check { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--c-line-strong); position: relative; top: .22em; transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out); } .outcome__check::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3.5px; height: 6.5px; border: solid var(--c-paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform var(--d-base) var(--e-out); } /* Neutral, not accent: twelve purple ticks in a row pulled more attention than the list deserves. */ .outcome__list li.is-on .outcome__check { background: var(--c-pos); border-color: var(--c-pos); } .outcome__list li.is-on .outcome__check::after { transform: rotate(45deg) scale(1); } /* ========================================================================== ECOSYSTEM MAP ========================================================================== */ .eco { margin-top: var(--sp-tight); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); } /* One DOM, two layouts: a grouped taxonomy on small screens, a spatial graph on large ones. `display: contents` lets the grouped markup survive both. */ .eco__map { padding: clamp(16px, 3vw, 26px); } .eco__svg { display: none; } .eco__group + .eco__group { margin-top: 22px; } .eco__group-h { font-family: var(--f-mono); font-size: var(--t-subtext); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: 10px; } .eco__group-items { display: flex; flex-wrap: wrap; gap: 7px; } @media (min-width: 901px) { .eco__map { position: relative; height: 560px; padding: 0; } .eco__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .eco__group, .eco__group-items { display: contents; } .eco__group-h { display: none; } .eco__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); } } .eco__svg line { stroke: var(--c-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--d-base) var(--e-out); } .eco__svg line.is-hot { stroke: var(--c-accent); } .eco__node { appearance: none; cursor: pointer; font-family: var(--f-mono); font-size: var(--t-subtext); letter-spacing: -.005em; padding: 8px 12px; min-height: 36px; white-space: nowrap; background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out); } .eco__node:hover { border-color: var(--c-accent); color: var(--c-accent); } .eco__node.is-sel { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .eco__node.is-core { font-weight: 600; } .eco__detail { border-top: 1px solid var(--c-line); background: var(--c-paper-sunk); padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 8px; min-height: 116px; } .eco__detail-t { font-family: var(--f-mono); font-size: var(--t-subtext); color: var(--c-accent); } .eco__detail-d { color: var(--c-ink-muted); max-width: 76ch; font-size: var(--t-text); } /* ========================================================================== PROGRAM (accordion curriculum) ========================================================================== */ .program { margin-top: var(--sp-tight); border-top: 1px solid var(--c-line); } .week { border-bottom: 1px solid var(--c-line); } .week__head { width: 100%; appearance: none; background: none; border: 0; cursor: pointer; display: grid; grid-template-columns: 92px 1fr auto; gap: var(--grid-gap); align-items: center; text-align: left; padding: clamp(20px, 2.2vw, 30px) 0; transition: color var(--d-fast) var(--e-out); } .week__head:hover { color: var(--c-accent); } /* The global focus ring is sized for compact controls: 3px of offset and a 4px radius. On a full-width accordion row that reads as a rounded box floating free of the row — and once the week is open it frames the header alone while the content hangs outside it. Keep the ring (a keyboard user has to see where they are) but pull it inside the row's own bounds and square it off, so it lines up with the hairline separators instead of fighting them. */ .week__head:focus-visible { outline-offset: -3px; border-radius: 0; } .week__n { font-family: var(--f-mono); font-size: var(--t-subtext); letter-spacing: .1em; color: var(--c-ink-faint); } .week__t { font-family: var(--f-display); font-weight: var(--w-display); /* A step up the scale: at h4 these eight rows read as captions rather than as the curriculum they are. */ font-size: var(--t-h3); letter-spacing: var(--ls-h3); line-height: 1.2; } .week__toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-line-strong); display: grid; place-items: center; flex: none; position: relative; transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); } .week__toggle::before, .week__toggle::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) linear; } .week__toggle::before { width: 11px; height: 1.5px; } .week__toggle::after { width: 1.5px; height: 11px; } .week__head[aria-expanded="true"] .week__toggle { background: var(--c-accent-tint); border-color: var(--c-accent-line); } .week__head[aria-expanded="true"] .week__toggle::after { transform: scaleY(0); opacity: 0; } .week__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--e-inout); } .week__body.is-open { grid-template-rows: 1fr; } .week__body-inner { overflow: hidden; } /* One column under the week title: the topics and the practice note follow one another rather than sitting in facing columns. */ .week__content { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: var(--grid-gap); row-gap: 20px; padding-bottom: clamp(22px, 2.4vw, 34px); } .week__content > * { grid-column: 2; } .week__topics { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; } .week__practice { color: var(--c-ink-muted); font-size: var(--t-subtext); border-left: 2px solid var(--c-accent); padding-left: 16px; } .week__practice b { color: var(--c-ink); font-weight: var(--w-medium); } .tag { font-family: var(--f-display); font-size: .75rem; font-weight: 500; letter-spacing: var(--ls-label); padding: 6px 12px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink-muted); } .tag--accent { background: var(--c-accent-tint); color: var(--c-accent); } /* ========================================================================== STATS (personal support) ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--sp-tight); border-top: 1px solid var(--c-line); } .stat { padding: clamp(22px, 2.4vw, 36px) clamp(16px, 2vw, 28px) clamp(22px, 2.4vw, 36px) 0; } .stat + .stat { border-left: 1px solid var(--c-line); padding-left: clamp(16px, 2vw, 28px); } .stat__n { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h2); letter-spacing: -.025em; line-height: .95; font-variant-numeric: tabular-nums; } .stat__n sup { font-size: .3em; vertical-align: super; letter-spacing: 0; color: var(--c-ink-faint); font-weight: var(--w-text); margin-inline: .16em; font-family: var(--f-text); } .stat__t { font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-text); margin-top: 12px; letter-spacing: var(--ls-h4); } .stat__d { font-size: var(--t-subtext); color: var(--c-ink-muted); margin-top: 6px; line-height: var(--lh-subtext); } /* ========================================================================== LIVE SUPPORT (screen-share abstraction) ========================================================================== */ .share { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; box-shadow: var(--sh-md); } .share__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); font-family: var(--f-mono); font-size: var(--t-subtext); color: var(--c-ink-faint); min-width: 0; } .share__bar > span:not(.share__dots):not(.share__live) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share__dots { display: flex; gap: 5px; flex: none; } .share__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); display: block; } .share__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--c-accent); flex: none; } .share__live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s var(--e-inout) infinite; } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } .share__body { padding: clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; position: relative; } .share__field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border: 1px solid var(--c-line); border-radius: var(--r-md); font-family: var(--f-mono); font-size: var(--t-subtext); background: var(--c-paper); } .share__field-k { color: var(--c-ink-faint); font-size: var(--t-subtext); letter-spacing: .08em; text-transform: uppercase; } .share__field.is-marked { border-color: var(--c-accent); background: var(--c-accent-tint); } .share__callout { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--f-text); font-size: var(--t-subtext); color: var(--c-accent); background: var(--c-accent-tint); border-radius: var(--r-pill); padding: 7px 13px; } .share__cursor { width: 13px; height: 13px; flex: none; } .share__foot { border-top: 1px solid var(--c-line); padding: 14px 16px; font-size: var(--t-subtext); color: var(--c-ink-muted); } /* ========================================================================== CASE SEQUENCE ========================================================================== */ .sequence { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: var(--sp-tight); border-top: 1px solid var(--c-line); } .sequence__step { padding: clamp(20px, 2.2vw, 32px) clamp(14px, 1.6vw, 24px) clamp(20px, 2.2vw, 32px) 0; position: relative; } .sequence__step + .sequence__step { border-left: 1px solid var(--c-line); padding-left: clamp(14px, 1.6vw, 24px); } .sequence__i { font-family: var(--f-mono); font-size: var(--t-subtext); letter-spacing: .12em; color: var(--c-accent); } .sequence__t { font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-h4); letter-spacing: var(--ls-h4); margin-top: 12px; } .sequence__d { font-size: var(--t-subtext); color: var(--c-ink-muted); margin-top: 7px; line-height: var(--lh-subtext); } /* Sits to the right of the sequence it closes, marked rather than enlarged. */ .closing-note { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-tight); margin-left: auto; width: fit-content; max-width: 46ch; font-family: var(--f-display); font-weight: 500; font-size: var(--t-text); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--c-accent); text-align: left; } .closing-note svg { width: 20px; height: 20px; flex: none; fill: currentColor; } /* ========================================================================== BOUNDARIES ========================================================================== */ /* Subgrid keeps the two intros in one row and the two lists in another, so the items line up across the columns even when the intros differ in length. */ .bounds { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: clamp(28px, 5vw, 96px); row-gap: 24px; margin-top: var(--sp-tight); } .bounds > * { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 24px; align-content: start; } /* A plate: white surface, hairline that starts neon at the top-left and fades out before it gets round the box. Two stacked backgrounds — one clipped to the padding box, one to the border box — draw the 1px edge, so the gradient can go transparent and simply reveal the section behind it. */ .plate { padding: clamp(24px, 2.2vw, 32px); border: 1px solid transparent; border-radius: var(--r-lg); background-image: /* Opaque, a touch lighter than the ground. A translucent fill would let the border gradient bleed through and flood the whole plate. */ linear-gradient(var(--c-plate), var(--c-plate)), linear-gradient(135deg, var(--c-accent) 0%, color-mix(in srgb, var(--c-accent) 55%, transparent) 26%, transparent 58%); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px -24px rgba(0, 0, 0, .38); } /* Inside a plate the closing rule would sit on the padding edge. */ .plate .bounds__list li:last-child, .plate .outcome__list li:last-child { border-bottom: 0; } /* When the two columns are plates they carry their own padding, so the gap between them is a plain 40px rather than the wide editorial gutter. */ .bounds:has(.plate) { column-gap: 20px; } /* The line each plate opens with is its heading — it should read as one. */ .plate > .lead { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500; color: var(--c-ink); max-width: 30ch; } .bounds__h { font-family: var(--f-mono); font-size: var(--t-subtext); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-faint); padding-bottom: 14px; border-bottom: 1px solid var(--c-line); } .bounds__list { list-style: none; margin: 0; padding: 0; align-self: start; } .bounds__list li { display: flex; gap: 13px; align-items: baseline; padding: clamp(9px, 1vw, 13px) 0; border-bottom: 1px solid var(--c-line); font-size: var(--t-text); color: var(--c-ink-muted); } /* Masked glyphs rather than inline SVG: the mark takes its colour from a token, so it reads correctly on a light section and on a dark one alike. */ .bounds__list li::before { content: ""; flex: none; width: 16px; height: 16px; position: relative; top: .18em; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; } .bounds__list--no li::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6'/%3E%3C/svg%3E"); background-color: var(--c-neg); } .bounds__list--yes li::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6l3.4 3.4L13 4.6'/%3E%3C/svg%3E"); background-color: var(--c-pos); } /* ========================================================================== FOUNDER ========================================================================== */ .founder__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--c-line); } .founder__fact { padding: clamp(20px, 2.2vw, 32px) clamp(16px, 2vw, 28px) clamp(20px, 2.2vw, 32px) 0; } .founder__fact:not(:nth-child(3n+1)) { border-left: 1px solid var(--c-line); padding-left: clamp(16px, 2vw, 28px); } .founder__fact:nth-child(n+4) { border-top: 1px solid var(--c-line); } .founder__k { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h4); letter-spacing: -.006em; } .founder__v { font-size: var(--t-subtext); color: var(--c-ink-muted); margin-top: 8px; line-height: 1.45; } .logostrip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: clamp(24px, 3vw, 40px); } .logostrip__slot { height: 46px; min-width: 128px; border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--f-mono); font-size: var(--t-subtext); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint); } /* ========================================================================== PRICE ========================================================================== */ /* ========================================================================== TIERS — two packages side by side The difference between them is not the amount of content, it is access to a person. So the layout puts one line — "личной обратной связи нет" against "прямая связь со мной лично" — at the same height in both cards, and lets everything else be secondary to it. ========================================================================== */ .tiers { display: grid; grid-template-columns: 1fr 1.08fr; /* the supported tier is given more room */ gap: clamp(20px, 2.4vw, 32px); align-items: stretch; } .tier { display: grid; /* label · price · summary · volume · list · key line · note · button — the list is the only track allowed to stretch, so the key line and the button stay level across both cards however long the lists are. */ grid-template-rows: auto auto auto auto 1fr auto auto auto; padding: clamp(24px, 2.4vw, 34px); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-paper); } /* The priority card: an opaque fill with a hairline that starts in the accent at the top-left and fades out before it gets round the box — the same edge the plates elsewhere use, written out here rather than inherited from `.plate`, because `.tier` sets `background` and would win on source order. */ .tier--lead { border-color: transparent; box-shadow: var(--sh-lg); background-image: linear-gradient(var(--c-plate), var(--c-plate)), linear-gradient(135deg, var(--c-accent) 0%, color-mix(in srgb, var(--c-accent) 55%, transparent) 26%, transparent 58%); background-origin: border-box; background-clip: padding-box, border-box; } .tier__price { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h1); letter-spacing: -.03em; line-height: .9; font-variant-numeric: tabular-nums; margin-top: 14px; } .tier--lead .tier__price { color: var(--c-accent); } .tier__sum { margin-top: var(--sp-stack); font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500; color: var(--c-ink); } /* The volume line: the two numbers that decide the comparison, set apart from the prose so they can be read without reading anything else. */ .tier__vol { margin-top: var(--sp-block); padding: 12px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); font-family: var(--f-mono); font-size: var(--t-subtext); line-height: 1.5; color: var(--c-ink-muted); } .tier__vol b { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--ls-h3); color: var(--c-ink); /* sits on the same optical line as the mono text beside it */ vertical-align: -.06em; margin-right: 2px; } .tier__vol-x { color: var(--c-ink-faint); margin: 0 4px; } .tier__vol--lead b { color: var(--c-accent); } .tier__list { list-style: none; margin: var(--sp-block) 0 0; padding: 0; align-self: start; } .tier__list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--t-text); color: var(--c-ink-muted); } .tier__list li::before { content: ""; flex: none; width: 13px; height: 13px; position: relative; top: .18em; border-radius: 50%; background: var(--c-line-strong); } .tier__list--yes li::before { background: var(--c-pos); -webkit-mask: none; mask: none; } /* The one line that decides the choice. */ .tier__key { margin-top: var(--sp-block); display: flex; gap: 10px; align-items: baseline; font-family: var(--f-display); font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500; } .tier__key::before { content: ""; flex: none; width: 16px; height: 16px; position: relative; top: .16em; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; } .tier__key--no { color: var(--c-neg); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6'/%3E%3C/svg%3E"); } .tier__key--no::before { background-color: var(--c-neg); } .tier__key--yes { color: var(--c-pos); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6l3.4 3.4L13 4.6'/%3E%3C/svg%3E"); } .tier__key--yes::before { background-color: var(--c-pos); } .tier__note { margin-top: 10px; font-size: var(--t-subtext); line-height: var(--lh-subtext); color: var(--c-ink-faint); } .tier__cta { margin-top: var(--sp-block); justify-self: start; } .tiers__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 3vw, 40px); margin-top: var(--sp-block); } .tiers__foot .small { max-width: 62ch; margin: 0; } /* ========================================================================== FINAL CTA + FOOTER ========================================================================== */ .finalcta__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; } .footer { background: var(--c-dark); color: var(--c-dark-ink); padding-block: clamp(48px, 5vw, 80px); } .footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--c-dark-line); } .footer__links { display: flex; flex-wrap: wrap; gap: 8px 26px; } .footer__links a { color: var(--c-dark-muted); text-decoration: none; font-size: var(--t-text); padding: 6px 0; /* a comfortable target on touch too */ transition: color var(--d-fast) var(--e-out); } .footer__links a:hover { color: var(--c-dark-ink); } .footer__bottom { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; } .footer__legal { font-size: var(--t-subtext); color: var(--c-dark-muted); max-width: 68ch; line-height: 1.55; } .footer__copy { font-family: var(--f-mono); font-size: var(--t-subtext); color: var(--c-dark-muted); letter-spacing: .04em; } /* Подпись студии: подчёркивание рисуем сами, чтобы отвести его от базовой линии — стандартное перечёркивает выносные элементы в моноширинном. */ .footer__by { color: var(--c-dark-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--c-dark-line); transition: text-decoration-color var(--d-fast) var(--e-out); } .footer__by:hover { text-decoration-color: currentColor; } .footer__sep { margin: 0 8px; color: var(--c-dark-line); } .footer .wordmark { color: var(--c-dark-ink); } .footer .wordmark__sub { color: var(--c-dark-muted); } /* ========================================================================== HERO A/B VARIANTS ========================================================================== */ [data-cover] { display: none; } [data-cover].is-on { display: inline; } .abswitch { position: fixed; left: 12px; bottom: 12px; z-index: 120; display: flex; gap: 3px; padding: 4px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill); box-shadow: var(--sh-md); } .abswitch button { appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--c-ink-muted); font-family: var(--f-mono); font-size: var(--t-subtext); padding: 7px 12px; border-radius: var(--r-pill); } .abswitch button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); } /* ========================================================================== MOTION ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--e-out), transform .45s var(--e-out); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- CLIENTS — real agency cases as a text list. No logos: a client mark is the client's property, and a name set in the site's own type reads as a reference rather than as a borrowed endorsement. -------------------------------------------------------------------------- */ .clients { list-style: none; /* A