/* =====================================================================
Clan-Man landing — "field map on the table" surface.
The component shapes are lifted from the real app
(web/app/globals.css + _components/ui.tsx) so the page reads as the
same product: kraft chips, brick-red accents, Oswald /
Archivo / JetBrains Mono. The hero war-table is recolored into the
page's neutral grey family (see --card below) so it reads as the same
material as the capability cards; only the map image and the one focal
green squad keep their colour.
===================================================================== */
/* ---------- reset ----------
Скоуплен на корни лендинга (.page, .modal), а не на голые элементы. Этот
файл живёт в React как , и React не выгружает такие стили
при клиентском переходе — файл остаётся висеть в кабинете и демо.
Нелейерованный `button { font: inherit }` там перебивал Tailwind-утилиты из
@layer utilities (нелейерованный CSS всегда сильнее слоёв), и все кнопки
приложения теряли Oswald. :where() держит специфичность нулевой, чтобы
резет по-прежнему проигрывал любому классу. */
:where(.page, .modal),
:where(.page, .modal) *,
:where(.page, .modal) *::before,
:where(.page, .modal) *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
:where(.page, .modal) img {
max-width: 100%;
display: block;
}
:where(.page, .modal) h1,
:where(.page, .modal) h2,
:where(.page, .modal) h3,
:where(.page, .modal) p {
margin: 0;
}
:where(.page, .modal) a {
color: inherit;
text-decoration: none;
}
:where(.page, .modal) button {
font: inherit;
cursor: pointer;
}
/* ---------- tokens (from the app's @theme) ---------- */
:root {
--table: #3a2817;
--panel: #f1e7cf;
--raised: #eaddbd;
--line: #cdbb93;
--line-soft: #d8c79f;
--ink: #2a2118;
--ink-dim: #6f5f44;
--ink-faint: #9a8a68;
--label: #5a4a30;
--brass: #9e463a;
--brass-bright: #b5503f;
--brass-dark: #7f382f;
--parchment: #f6eed9;
--parchment-chip: #e7d9bb;
--parchment-field: #fbf6e9;
--parchment-ink: #2c2419;
--parchment-ink-dim: #7a6a4c;
--grp-green: #5f7048;
--grp-blue: #5b6b80;
--grp-yellow: #b3892f;
--grp-red: #9e463a;
/* Landing chrome — cooler than the app's warm paper. Owner's call: white page,
off-white grey cards + secondary buttons. The hero war-table is recolored to
match these greys so it reads as the same material as the cap-cards. */
--card: #f3f3f1;
--card-border: #e4e3df;
--ghost: #ededeb;
--ghost-border: #dad9d5;
--ghost-hover: #e3e2df;
--ink-grey: #4b4a46;
/* War-table greys — a small nested-surface scale for the hero mock. The frame
itself uses --card; chips/squad-card/filled slots sit one step darker so they
read as raised counters; dashed placeholders use the faint outline. */
--wt-surface: #e8e7e3;
--wt-border: #cfcec9;
--wt-dash: #d2d1cc;
--ink-grey-dim: #74736e;
/* Семейства приходят из next/font — их объявляет корневой layout на ,
то есть на этом же :root. Каждая переменная раскрывается в пару «шрифт +
метрически подогнанный запасной» ("Archivo", "Archivo Fallback"), поэтому
на медленной сети подмена почти не видна — не то что прежний прыжок в
system-ui. Второй аргумент var() — страховка: если переменной вдруг не
окажется, останется прежнее поведение, а не пустое font-family. */
--font-display: var(--font-oswald, "Oswald"), ui-sans-serif, system-ui, sans-serif;
--font-sans: var(--font-archivo, "Archivo"), ui-sans-serif, system-ui, sans-serif;
--font-mono:
var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", monospace;
--maxw: 1120px;
--gutter: clamp(20px, 5vw, 40px);
}
/* ---------- the field-map surface ----------
Parchment base, a warm overhead light, two ghosted "objective" rings,
soft terrain tints in the corners, and a faint surveyed UTM grid tile
(grid lines + a tick at each cell centre). This replaces the weak
topo texture from the mockup. */
body {
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
background-color: #ffffff;
background-image:
radial-gradient(
circle at 84% 16%,
transparent 82px,
rgba(58, 60, 68, 0.05) 83px,
rgba(58, 60, 68, 0.05) 84px,
transparent 85px
),
radial-gradient(
circle at 12% 82%,
transparent 56px,
rgba(58, 60, 68, 0.045) 57px,
rgba(58, 60, 68, 0.045) 58px,
transparent 59px
),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%232b2c33' fill='none' stroke-width='1'%3E%3Cpath d='M0 0H120M0 0V120' stroke-opacity='0.05'/%3E%3Cpath d='M60 0V120M0 60H120' stroke-opacity='0.022'/%3E%3Cpath d='M55 60H65M60 55V65' stroke-opacity='0.11'/%3E%3C/g%3E%3C/svg%3E");
background-size:
100% 100%,
100% 100%,
120px 120px;
background-repeat: no-repeat, no-repeat, repeat;
min-height: 100vh;
}
.page {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ---------- shared type helpers ---------- */
.wordmark {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #2b2013;
}
/* ---------- buttons (from ui.tsx Button) ---------- */
.btn {
--_pad: 14px 26px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: var(--_pad);
border-radius: 3px;
border: 1px solid transparent;
transition:
background 0.15s ease,
transform 0.05s ease;
white-space: nowrap;
}
.btn:active {
transform: translateY(1px);
}
.btn-sm {
--_pad: 8px 15px;
font-size: 13px;
letter-spacing: 0.08em;
}
.btn-block {
display: flex;
width: 100%;
}
.btn-primary {
color: #f6efdc;
background: var(--brass);
border-color: var(--brass-dark);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 3px 8px rgba(0, 0, 0, 0.32);
}
.btn-primary:hover {
background: #8a3c31;
}
.btn-ghost {
color: var(--ink-grey);
background: var(--ghost);
border-color: var(--ghost-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-ghost:hover {
background: var(--ghost-hover);
}
/* ========================= NAV ========================= */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 0;
gap: 16px;
}
.nav-links {
display: flex;
align-items: center;
gap: 18px;
}
.nav-links > a:not(.btn) {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--label);
white-space: nowrap;
}
.nav-links > a:not(.btn):hover {
color: var(--brass);
}
/* The Log in button is a mobile-only stand-in: on phones the plain "Log in"
text anchor is hidden (see the 620px query) and this replaces the demo CTA. */
.nav-login-mobile {
display: none;
}
/* ========================= HERO ========================= */
.hero {
display: grid;
grid-template-columns: 1fr 420px;
gap: 48px;
align-items: center;
padding: 40px 0 72px;
}
.hero-copy h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(34px, 5vw, 52px);
line-height: 1.05;
letter-spacing: 0.005em;
color: #2b2013;
text-wrap: balance;
}
.lede {
margin-top: 20px;
max-width: 480px;
font-size: 16.5px;
color: #5a5040;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.cta-note {
margin-top: 16px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-faint);
}
/* ---------- the animated war-table ---------- */
.hero-visual {
display: flex;
justify-content: center;
}
.hero-scene {
position: relative;
width: 420px;
height: 420px;
flex: none;
/* animation coordinates — tuned to the 420px scene, one place to nudge */
--fly-start-left: 22px;
--fly-start-top: 56px;
--fly-dx: 178px;
--fly-dy: 40px;
/* cursor's mid-journey waypoint: from its start (gripping the chip) it travels
down here to land ON the green map chip (chip box ~175-195 x, ~291-311 y in
the scene) and trigger the tooltip, then returns to the picker to loop.
Measured against the arrow's tip, not its box — see .fly-cursor. The tip
sits in the chip's lower-right corner rather than its centre: the arrow is
as big as the chip, so from the centre it would bury the squad number. */
--cur-map-dx: 102px;
--cur-map-dy: 234px;
}
.frame {
position: absolute;
inset: 0;
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 5px;
box-shadow:
0 3px 5px rgba(0, 0, 0, 0.24),
0 26px 52px -24px rgba(0, 0, 0, 0.55);
padding: 14px;
display: flex;
flex-direction: column;
}
.frame-body {
display: flex;
gap: 14px;
}
.col-signups {
width: 128px;
flex: none;
}
.col-roster {
flex: 1;
min-width: 0;
}
.col-label {
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--grp-green);
}
.col-label.alt {
color: var(--ink-grey-dim);
}
/* the "stamped counter" chip (ui.tsx Chip), in the war-table's neutral grey */
.chip {
display: inline-flex;
align-items: center;
white-space: nowrap;
background: var(--wt-surface);
border: 1px solid var(--wt-border);
border-radius: 2px;
padding: 5px 9px;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink-grey);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 1px 2px rgba(0, 0, 0, 0.18);
}
.signup-slot {
position: relative;
margin-top: 10px;
height: 28px;
}
.chip-signup {
position: absolute;
inset: 0;
}
.signup-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding-left: 9px;
border: 1px dashed var(--wt-dash);
border-radius: 2px;
background: var(--card);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-grey-dim);
opacity: 0;
}
/* squad card (SquadCard.tsx) — grey chrome, keeps the one focal green accent */
.squad-card {
margin-top: 10px;
background: var(--wt-surface);
border: 1px solid var(--wt-border);
border-left: 3px solid var(--grp-green);
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.squad-head {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
border-bottom: 1px solid var(--wt-border);
padding: 7px 10px;
}
.squad-caret {
color: var(--grp-green);
font-size: 10px;
}
.squad-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink);
}
.squad-meta {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink-grey-dim);
}
.squad-count {
position: relative;
margin-left: auto;
width: 26px;
height: 14px;
}
.squad-count > span {
position: absolute;
right: 0;
top: 0;
font-family: var(--font-mono);
font-size: 10.5px;
}
.count-a {
color: var(--ink-grey-dim);
}
.count-b {
color: var(--grp-green);
font-weight: 500;
opacity: 0;
}
.squad-slot {
position: relative;
margin: 8px;
height: 26px;
}
.slot-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--wt-dash);
border-radius: 2px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-grey-dim);
}
.slot-filled {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding-left: 8px;
background: #deddd9;
border: 1px solid var(--wt-border);
border-radius: 2px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-grey);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
opacity: 0;
}
/* tacmap */
.frame-map {
position: relative;
margin-top: 12px;
flex: 1;
min-height: 168px;
border: 1px solid var(--card-border);
border-radius: 4px;
overflow: hidden;
background-image: url("/tacmap-builder.webp");
background-size: 165%;
background-position: 46% 39%;
}
/* squad chips placed on the real map — the app's rounded-square counters */
.map-chip {
position: absolute;
z-index: 4;
width: 20px;
height: 20px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-weight: 700;
font-size: 10px;
border: 1px solid rgba(30, 22, 12, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.mc-green {
background: var(--grp-green);
color: #eaf0dc;
left: 41%;
top: 57%;
} /* Dog — the one focal squad */
/* a dashed group zone around the Dog squad */
.map-zone {
position: absolute;
z-index: 3;
left: 31%;
top: 45%;
width: 27%;
height: 31%;
border: 1.4px dashed rgba(95, 112, 72, 0.85);
background: rgba(95, 112, 72, 0.16);
border-radius: 3px;
}
.map-tip {
position: absolute;
left: 45%;
top: 25%;
z-index: 6;
opacity: 0;
background: #2c2419;
border: 1px solid #1c160e;
border-radius: 3px;
padding: 6px 9px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.tip-name {
font-family: var(--font-mono);
font-size: 11px;
color: #eae7e0;
}
.tip-sub {
font-family: var(--font-mono);
font-size: 9.5px;
color: #c3ad81;
margin-top: 2px;
}
/* the chip in flight + the cursor */
.fly-chip {
position: absolute;
z-index: 8;
left: var(--fly-start-left);
top: var(--fly-start-top);
background: var(--wt-surface);
border-color: var(--wt-border);
opacity: 0;
box-shadow:
0 6px 14px -4px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* a standard arrow cursor that grabs the flying chip. It starts holding the chip
by the body, then runs its own round-trip tour (see cursorTour): drag to the
squad slot, drop, travel down to the green map chip to trigger the tooltip,
then return to the picker. It stays visible the whole loop (no seam fade),
resting at the picker between passes.
The offsets below place the SVG BOX, but what has to land on a target is the
arrow's TIP — the path starts at 4.5/2.4 of a 24-unit viewBox drawn at 22px,
i.e. ~4px right and ~2px down from the box corner. Every waypoint here (and
--cur-map-* above) is chosen tip-first and then shifted back by that much;
forget it and the cursor sits a few pixels short of everything it points at. */
.fly-cursor {
position: absolute;
z-index: 9;
pointer-events: none;
left: calc(var(--fly-start-left) + 62px);
top: calc(var(--fly-start-top) + 13px);
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
/* ---------- the loop (7s), calm; only when motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
.fly-chip {
animation: chipFly 7s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* the cursor runs its own round-trip tour (drag, drop, hover the map chip, return) */
.fly-cursor {
animation: cursorTour 7s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.js-slot-filled {
animation: slotFill 7s infinite ease-in-out;
}
.js-slot-empty {
animation: slotEmpty 7s infinite ease-in-out;
}
.js-signup-chip {
animation: srcLeave 7s infinite ease-in-out;
}
.js-signup-empty {
animation: srcEmpty 7s infinite ease-in-out;
}
.js-count-a {
animation: countGone 7s infinite ease-in-out;
}
.js-count-b {
animation: countCome 7s infinite ease-in-out;
}
.js-map-dog {
animation: dogAppear 7s infinite ease-in-out;
}
.js-map-tip {
animation: tipShow 7s infinite ease-in-out;
}
}
/* The sign-up chip lifts, glides to the squad slot, settles in, then fades as it
is absorbed into the slot. The cursor carries on without it (see cursorTour). */
@keyframes chipFly {
0%,
4% {
transform: translate(0, 0) scale(1);
opacity: 0;
}
8% {
opacity: 1;
transform: translate(0, -2px) scale(1.04);
}
30% {
opacity: 1;
transform: translate(var(--fly-dx), var(--fly-dy)) scale(1.04);
}
36% {
opacity: 1;
transform: translate(var(--fly-dx), var(--fly-dy)) scale(1);
}
40%,
100% {
opacity: 0;
transform: translate(var(--fly-dx), var(--fly-dy)) scale(1);
}
}
/* The cursor's own round-trip: grip the sign-up, drag it to the squad slot (0->30%),
drop it (dwell ~30-37%), travel down to the green map chip and land on it to
trigger the hover tooltip (arrive ~53%, dwell to ~67%), then return to the picker
(~88%) and rest there until the loop restarts. Start and end sit at the same point
(translate 0,0) and opacity never changes, so the loop is seamless — no blink. */
@keyframes cursorTour {
0% {
transform: translate(0, 0);
}
8% {
transform: translate(0, -2px);
}
30% {
transform: translate(var(--fly-dx), var(--fly-dy));
}
37% {
transform: translate(var(--fly-dx), var(--fly-dy));
}
53% {
transform: translate(var(--cur-map-dx), var(--cur-map-dy));
}
67% {
transform: translate(var(--cur-map-dx), var(--cur-map-dy));
}
88% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slotFill {
0%,
34% {
opacity: 0;
transform: scale(0.92);
}
40% {
opacity: 1;
transform: scale(1);
}
85% {
opacity: 1;
}
90%,
100% {
opacity: 0;
}
}
@keyframes slotEmpty {
0%,
35% {
opacity: 1;
}
41% {
opacity: 0;
}
87% {
opacity: 0;
}
92%,
100% {
opacity: 1;
}
}
@keyframes srcLeave {
0%,
5% {
opacity: 1;
}
10% {
opacity: 0;
}
88% {
opacity: 0;
}
93%,
100% {
opacity: 1;
}
}
@keyframes srcEmpty {
0%,
37% {
opacity: 0;
}
44% {
opacity: 1;
}
85% {
opacity: 1;
}
91%,
100% {
opacity: 0;
}
}
@keyframes countGone {
0%,
36% {
opacity: 1;
}
42% {
opacity: 0;
}
86% {
opacity: 0;
}
92%,
100% {
opacity: 1;
}
}
@keyframes countCome {
0%,
38% {
opacity: 0;
}
44% {
opacity: 1;
}
86% {
opacity: 1;
}
92%,
100% {
opacity: 0;
}
}
/* The squad chip settles onto the map with a soft green glow. */
@keyframes dogAppear {
0%,
37% {
opacity: 0;
transform: scale(0.4);
box-shadow: 0 0 0 0 rgba(95, 112, 72, 0);
}
44% {
opacity: 1;
transform: scale(1.18);
box-shadow: 0 0 0 6px rgba(95, 112, 72, 0.3);
}
50% {
transform: scale(1);
}
58% {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.4),
0 0 0 3px rgba(95, 112, 72, 0.16);
}
86% {
opacity: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
90%,
100% {
opacity: 0;
transform: scale(0.5);
}
}
@keyframes tipShow {
0%,
53% {
opacity: 0;
transform: translateY(4px);
}
59% {
opacity: 1;
transform: translateY(0);
}
68% {
opacity: 1;
}
74%,
100% {
opacity: 0;
}
}
/* Reduced motion: no loop — just show the finished, placed state. */
@media (prefers-reduced-motion: reduce) {
.fly-chip,
.fly-cursor {
display: none;
}
.js-signup-chip,
.js-slot-empty,
.js-count-a {
opacity: 0;
}
.js-signup-empty,
.js-slot-filled,
.js-count-b,
.js-map-dog,
.js-map-tip {
opacity: 1;
}
}
/* ========================= HOW IT WORKS =========================
Ролик сразу под героем, до отзыва и возможностей: он объясняет продукт
быстрее любой из четырёх плиток ниже. На телефоне он вообще ПЕРВОЕ, что
идёт за текстом героя, потому что анимация стола там скрыта (см. запрос
на 620px в конце файла).
Рамка повторяет .cap-card, чтобы плеер читался тем же материалом, что и
карточки: у ролика чёрные поля, и без рамки он висел бы на подложке-карте
дырой. */
.how {
padding: 8px 0 44px;
}
/* aspect-ratio на обёртке, а не на самом iframe: iframe тянется по ней через
inset, и высота считается до загрузки плеера, поэтому секция не прыгает,
когда ленивый iframe наконец приходит. */
.how-video {
position: relative;
aspect-ratio: 16 / 9;
max-width: 880px;
margin: 0 auto;
border: 1px solid var(--card-border);
border-radius: 4px;
overflow: hidden;
/* Тёмная подложка под самим плеером: пока он не загрузился, в рамке стоит
цвет его же полей, а не просвет пергамента. */
background: #17150f;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.16),
0 22px 40px -26px rgba(0, 0, 0, 0.5);
}
.how-video iframe {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* ========================= TESTIMONIAL =========================
Одна цитата между героем и возможностями. Намеренно без карточки: ниже
идут четыре серых cap-card и панель заявки, и пятая коробка подряд
превратила бы страницу в список плиток. Здесь вместо этого дышит сама
подложка-карта, а вес держат размер шрифта и латунный акцент. */
.testimonial {
padding: 8px 0 62px;
}
/* Две колонки: герб и текст. Раскладка на гриде, а не на флексе, ради
figcaption — ему нужен второй ряд ПОД цитатой, но в колонке текста, а не
под гербом; флексу для этого понадобилась бы лишняя обёртка. */
/* Колонка текста ограничена 480px, а не 1fr. Подпись прижата к правому краю
КОЛОНКИ, а строки цитаты до края не достают: перенос рвёт их там, где не
влезло следующее слово. При 1fr (673px) самая длинная строка кончалась на
180px левее подписи — та висела в пустоте. Поэтому колонка режется по
реальной ширине текста; 480 — компромисс: остаётся 17px зазора, а до 460,
где цитата ломается на четыре строки, есть запас. Меняете цитату — сверьте
это число заново, универсального в нём ничего нет.
Треки центруются через justify-content, иначе они прижались бы к левому
краю восьмисотпиксельной фигуры. */
.quote {
display: grid;
grid-template-columns: auto minmax(0, 480px);
justify-content: center;
column-gap: clamp(20px, 3vw, 34px);
max-width: 820px;
margin: 0 auto;
text-align: left;
}
/* Герб растягивается по своему ряду — а ряд ровно в высоту цитаты, — и картинка
берёт её через height: 100%. Размер задаёт текст, а не фиксированный пиксель:
цитату можно переписать, и герб подстроится сам. min-height — на случай очень
короткой цитаты, чтобы он не схлопнулся в значок.
Файл обрезан по границе непрозрачных пикселей, поэтому колонка равна самому
гербу: иначе прозрачные поля исходного квадрата раздули бы отступ до текста. */
.emblem {
align-self: stretch;
position: relative;
aspect-ratio: 312 / 560;
min-height: 72px;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
}
/* Картинка вынута из потока НАМЕРЕННО. В потоке её собственные 560px попадают
в расчёт высоты ряда, ряд раздувается под них, и герб начинает диктовать
размер цитате — ровно наоборот тому, что нужно. Абсолютная картинка не даёт
вклада в высоту, ряд остаётся по тексту, растянутый .emblem берёт её, а
aspect-ratio выводит из высоты ширину колонки. */
.emblem img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.quote blockquote {
margin: 0;
}
.quote blockquote p {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(21px, 2.9vw, 29px);
line-height: 1.3;
letter-spacing: 0.005em;
/* У Oswald нет курсивного начертания — браузер наклоняет прямое сам. Для
трёх строк цитаты это читается нормально; если понадобится настоящий
курсив, менять придётся гарнитуру, а не эту строку. */
font-style: italic;
color: #2b2013;
text-wrap: balance;
/* Висячая пунктуация: открывающая кавычка выносится в поле, чтобы буквы
первой строки встали по одной вертикали с остальными и с гербом. */
text-indent: -0.36em;
}
/* Кавычки — декор, поэтому они в псевдоэлементах: в разметке остаётся чистый
текст цитаты, который можно менять, не трогая типографику. */
.quote blockquote p::before {
content: "\201C";
color: var(--brass);
}
.quote blockquote p::after {
content: "\201D";
color: var(--brass);
}
/* Явная вторая колонка: без неё авторазмещение уронило бы подпись в первую,
то есть под герб. */
/* Явная вторая колонка: без неё авторазмещение уронило бы подпись в первую,
то есть под герб. Подпись прижата вправо — к правому краю цитаты, а не к
левому краю колонки, чтобы не спорить с ней за начало строки. */
.quote figcaption {
grid-column: 2;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
margin-top: 18px;
text-align: right;
}
.quote-who {
font-family: var(--font-display);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--label);
}
.quote-role {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.03em;
color: var(--ink-faint);
}
/* ========================= CAPABILITIES ========================= */
.section-head {
border-bottom: 1px solid rgba(45, 46, 52, 0.16);
padding-bottom: 14px;
margin-bottom: 26px;
}
.section-head h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(19px, 3vw, 22px);
letter-spacing: 0.03em;
text-transform: uppercase;
color: #2b2013;
}
.capabilities {
padding: 20px 0 30px;
}
.cap-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.cap-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 4px;
padding: 22px 24px 24px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.16),
0 16px 30px -22px rgba(0, 0, 0, 0.4);
transition: transform 0.18s ease;
}
.cap-card:hover {
transform: translateY(-3px);
}
.cap-top {
display: flex;
align-items: center;
gap: 12px;
}
.cap-icon {
display: inline-flex;
}
.cap-icon svg {
width: 22px;
height: 22px;
}
.cap-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
letter-spacing: 0.02em;
color: var(--parchment-ink);
}
.cap-card p {
margin-top: 12px;
font-size: 14.5px;
line-height: 1.58;
color: #5a5040;
}
/* ========================= PRICING ========================= */
.pricing {
padding: 30px 0 34px;
}
.price-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
/* Колонка, а не блок: подвал карточки прижимается к низу через margin-top: auto,
иначе кнопки трёх карточек разъехались бы по длине списков. */
.price-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 4px;
padding: 24px 22px 22px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.16),
0 16px 30px -22px rgba(0, 0, 0, 0.4);
}
.price-card.featured {
border-color: var(--brass);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.2),
0 22px 40px -24px rgba(0, 0, 0, 0.5);
}
/* Латунная полоска по верхней кромке. inset -1px закрывает границу карточки,
поэтому радиусы здесь свои, чуть больше внутренних. */
.price-card.featured::before {
content: "";
position: absolute;
inset: -1px -1px auto;
height: 3px;
background: var(--brass);
border-radius: 4px 4px 0 0;
}
.price-badge {
position: absolute;
top: -11px;
right: 16px;
padding: 3px 10px;
border-radius: 3px;
background: var(--brass);
border: 1px solid var(--brass-dark);
color: #f6efdc;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.price-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--label);
}
.price-tag {
margin-top: 8px;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.price-amount {
font-family: var(--font-display);
font-weight: 700;
font-size: 38px;
line-height: 1.05;
letter-spacing: 0.01em;
color: #2b2013;
}
.featured .price-amount {
color: var(--brass-dark);
}
.price-unit {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.03em;
color: var(--ink-dim);
}
.price-tagline {
margin-top: 10px;
font-size: 14px;
line-height: 1.55;
color: #5a5040;
}
.price-list {
margin: 16px 0 20px;
padding: 16px 0 0;
border-top: 1px solid rgba(45, 46, 52, 0.12);
list-style: none;
display: grid;
gap: 9px;
}
.price-list li {
position: relative;
padding-left: 24px;
font-size: 14px;
line-height: 1.5;
color: #5a5040;
}
/* Галочка — маска, а не фон: цвет остаётся один (латунь) и правится токеном. */
.price-list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 15px;
height: 15px;
background: var(--brass);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")
center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.price-foot {
margin-top: auto;
}
.price-fine {
margin-bottom: 12px;
font-size: 12px;
line-height: 1.5;
color: var(--ink-faint);
}
/* ========================= GET STARTED MODAL =========================
Временная обёртка над формой запроса доступа, пока нет /signup. Сам