/* Pochatok — main page. Figma: шаблони / "desktop main 1" (32:3), 1440 wide. */
/* Manrope 400, self-hosted (Google Fonts subsets; OFL) — no external requests */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-400-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-400-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/manrope-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Onest (300–500, variable): only the card illustrations (.ill) use it; copied from templates/asana/fonts (16.10) */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 500; font-display: swap;
src: url("../fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 500; font-display: swap;
src: url("../fonts/onest-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 500; font-display: swap;
src: url("../fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Comfortaa + Nunito (variable) — only the «courses» card illustration; copied from templates/matemat/fonts (16.10) */
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap;
src: url("../fonts/comfortaa-var-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap;
src: url("../fonts/comfortaa-var-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap;
src: url("../fonts/comfortaa-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
src: url("../fonts/nunito-var-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
src: url("../fonts/nunito-var-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
src: url("../fonts/nunito-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--black: #000;
--white: #fff;
--grey-bg: #f4f3f1; /* light sections, placeholders */
--grey-text: #595959; /* muted copy */
--grey-soft: #bab9b9; /* muted copy on black, hero screens */
--accent: #ffff00; /* Dzhevaha Design yellow — ONLY for info plates (hints/notices), never for buttons */
--pad: 20px; /* side gutter */
/* max content width = the 1440 frame's content (x 20 … 1420 in Figma 32:3) → 20 px sides at 1440, centred 1400 on wider
screens (user 06.10: «на 1440 відступ до краю лише 20 px — звірся з макетом»; it was 1164 = «Послуги», a mistake).
«Послуги» and «Тарифи» keep their own 1164 inside. Was: «Тарифи» (2 × 572 + 20; user 04.10): «Обирай тему», «Як це працює», the
footer. Backgrounds stay full width — only the side padding grows (100% = the section's width where it's used) */
--content-max: 1400px;
--pad-wide: max(var(--pad), calc((100% - var(--content-max)) / 2));
--section-y: 120px; /* 16.10 Figma 184:695 (was 140) */
--s: calc(100vw / 1440); /* 1 design px, scales with the viewport (hero screens, ring) */
/* 16.10 (user: «все занадто крупне на десктопі», Figma 184:695): hero title + step numbers 96, section titles 64,
item / card titles 32, the price 48 */
--fs-xxl: clamp(48px, 6.667vw, 96px);
--fs-xl: clamp(40px, 4.444vw, 64px);
--fs-l: clamp(24px, 2.222vw, 32px);
--fs-price: clamp(32px, 3.333vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--white);
color: var(--black);
font-family: "Manrope", system-ui, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
/* short pages (template preview, 404…): the footer sits at the bottom of the window, no white strip under it */
body:has(> .footer) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body:has(> .footer) > .footer { margin-top: auto; }
h1, h2, h3, p, ol { margin: 0; padding: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
/* ---------- type ---------- */
.h-xxl { font-size: var(--fs-xxl); line-height: 1.1; }
.h-xl { font-size: var(--fs-xl); line-height: 1.1; }
.h-l { font-size: var(--fs-l); line-height: 1.1; }
.text { font-size: 16px; line-height: 1.65; }
.text--l { font-size: 18px; }
.text--muted { color: var(--grey-text); }
.text--soft { color: var(--grey-soft); }
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 40px;
font-size: 18px;
line-height: 1.35;
white-space: nowrap;
transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn--light { background: var(--white); color: var(--black); }
.btn--dark { background: var(--black); color: var(--white); }
.btn--sm { padding: 10px 30px; font-size: 16px; }
.link-arrow {
display: inline-flex;
align-items: flex-end;
gap: 16px;
font-size: 18px;
line-height: 1;
white-space: nowrap;
}
/* the arrow follows the text: 16 at 18 px (Figma 184:825), bottom-aligned */
.link-arrow img { width: .889em; height: .889em; transition: transform .25s; }
.link-arrow:hover img { transform: translate(3px, -3px); }
/* ---------- logo (Figma: two groups inside a 194×36 box) ---------- */
.logo { position: relative; display: block; width: 194px; height: 36px; }
.logo__mark, .logo__word { position: absolute; }
.logo__mark { left: -0.07%; top: 0.13%; width: 19%; height: 100.04%; }
.logo__word { left: 24.04%; top: 6.96%; width: 76.03%; height: 92.16%; }
/* ================= HERO ================= */
.hero {
position: relative;
height: 100vh;
height: 100svh; /* the browser window's height (user 04.10) — no 720 / 1200 clamps any more */
min-height: 640px; /* below this the climbing title would reach the header */
overflow: hidden;
color: var(--white);
background: #1d3a2c;
}
/* the first slide's photo under the slide fills (08.10: per-slide photos, 16:9, the person in the centre) — covers the hero */
.hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.hero__fill { background-position: center; background-size: cover; background-repeat: no-repeat; }
.header {
position: absolute;
inset: 0 0 auto;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
/* the header stays at the window's edges on every width (user 06.10: «шапку тягнучу, як на лендінгу, можна
залишити») — only the content below keeps to the 1400 column */
padding: 20px var(--pad) 0 19px;
height: 62px;
}
.header .logo { margin-top: 1px; }
.header__nav {
position: absolute;
left: 50%;
top: 30px;
transform: translateX(-50%);
display: flex;
gap: 40px;
font-size: 16px;
line-height: 1.35;
white-space: nowrap;
}
.header__nav a, .header__login { transition: opacity .2s; }
.header__nav a:hover, .header__login:hover { opacity: .7; }
.header__auth { display: flex; align-items: center; gap: 20px; font-size: 16px; line-height: 1.35; }
.hero__title {
position: absolute;
z-index: 2;
/* the content column (user 06.10: «зафіксувати по максимальній ширині як інший контент»; 1400 — see --content-max) */
left: max(19px, calc((100% - var(--content-max)) / 2));
/* 268 / 1080 of the design; on a short window it climbs so its 2 lines (2.2em) end 24px above the cards (top 50%) */
top: min(24.8%, calc(50% - 2.2em - 24px));
width: 572px;
max-width: calc(100% - 40px);
white-space: nowrap; /* always the 2 lines of the
(08.10: «вже готовий.» wrapped into 3 on wide screens) */
}
.hero__aside {
position: absolute;
z-index: 2;
right: var(--pad-wide);
top: min(26.67%, calc(50% - 180px)); /* 288 / 1080; climbs on a short window like the title */
width: 453px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
/* background videos: one per slide, cross-faded (same geometry as the photo) */
.hero__videos { position: absolute; inset: 0; pointer-events: none; }
/* a light shade from the bottom up to the middle over the slide photos (user 08.10: «легке накладання градієнта знизу
вгору до середини») — above the photos (they reach z-index 1), under the cards / title / navigator */
.hero__videos::after { content: ""; position: absolute; inset: 50% 0 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
.hero__video { opacity: 0; transition: opacity .8s ease .8s; } /* fades out only AFTER the next one has faded in … */
.hero__video.is-active { opacity: 1; z-index: 1; transition: opacity .8s ease; } /* … on top of it, so nothing shows through (08.10) */
.hero__fill { position: absolute; inset: 0; }
/* the slide's background video (16.10, desktop only — main.js HERO_VIDEO): over its poster, faded in once it plays */
.hero__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.hero__clip.is-on { opacity: 1; }
@media (max-width: 900px) { .hero__clip { display: none; } }
/* carousel of template screens (js/main.js). Cards are absolutely placed around the centre:
x = --off × step, step = 216 + 21. Top-aligned; the centre card grows 135 → 270 (×2).
Cards are 16:10 like a 1440×900 screen (user 04.10; Figma had 216×162 → 323) — the template shot inside isn't cut oddly. */
.hero__screens {
--w: calc(216 * var(--s));
--h: calc(135 * var(--s));
--h-open: calc(270 * var(--s));
--step: calc(237 * var(--s));
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 50%;
height: var(--h-open);
}
.screen {
--off: 0;
position: absolute;
top: 0;
left: 50%;
width: var(--w);
height: var(--h);
margin-left: calc(var(--w) / -2);
background: var(--grey-soft) center / cover no-repeat;
overflow: hidden;
cursor: pointer;
transform: translateX(calc(var(--off) * var(--step)));
transition:
transform var(--shift-ms, 900ms) cubic-bezier(.65, 0, .35, 1),
height var(--expand-ms, 600ms) cubic-bezier(.65, 0, .35, 1);
}
.screen.no-anim { transition: none; }
/* a template screenshot: the site's full width from the top — expanding the card shows more of the page, never zooms */
.screen.has-shot { background-color: #111; background-position: center top; background-size: 100% auto; }
.screen:not(.is-expanded):hover { filter: brightness(1.08); }
.screen.is-expanded { height: var(--h-open); cursor: default; }
.screen:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.screen__arrow {
position: absolute;
right: 0;
bottom: 0;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.screen.is-expanded .screen__arrow { opacity: 1; pointer-events: auto; }
.hero__progress {
position: absolute;
z-index: 2;
left: 50%;
bottom: max(12px, min(60px, calc(50% - 270 * var(--s) - 43px))); /* clear of the open card on a short window */
width: 454px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
.hero__progress-name { font-size: 12px; line-height: 1.35; letter-spacing: 1.2px; }
.hero__progress-bars { display: flex; gap: 4px; height: 1px; }
.hero__progress-name { transition: opacity .3s; }
.hero__progress-name.is-changing { opacity: 0; }
.hero__progress-bars span {
position: relative;
flex: 1 0 0;
display: flex;
align-items: center;
background: rgba(255, 255, 255, .35);
cursor: pointer;
}
.hero__progress-bars span::after { content: ""; position: absolute; inset: -10px 0; } /* bigger hit area */
/* timer bar: width driven by JS, 0 → 100 % while the slide is shown */
.hero__progress-bars i { display: block; width: 0; height: 4px; background: var(--white); }
/* ================= SPLIT SECTIONS (Обирай тему / Як це працює) ================= */
.split {
display: grid;
grid-template-columns: minmax(0, 572fr) minmax(0, 808fr);
justify-content: space-between;
column-gap: 20px;
padding: var(--section-y) var(--pad-wide);
}
.split__title { display: flex; flex-direction: column; gap: 20px; align-self: start; }
/* accordion */
.acc-item {
padding-bottom: 40px;
border-bottom: 1px solid var(--grey-text);
transition: border-color .3s;
}
.acc-item + .acc-item { margin-top: 40px; }
.acc-item.is-open { border-bottom-color: var(--black); }
.acc-item__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
width: 100%;
color: var(--grey-text);
transition: color .3s;
}
.acc-item.is-open .acc-item__head,
.acc-item__head:hover { color: var(--black); }
/* 15.10 (user): the arrow → when the item is closed, ← when it is open (turns over) */
/* 16.10: the arrow box = the title's line (32 × 1.1), the 24-of-40 glyph scales with it */
.acc-item__icon { flex: none; width: calc(var(--fs-l) * 1.1); height: calc(var(--fs-l) * 1.1); transition: transform .35s ease; }
.acc-item.is-open .acc-item__icon { transform: rotate(180deg); }
.acc-item__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}
.acc-item.is-open .acc-item__body { grid-template-rows: 1fr; }
.acc-item__inner { min-height: 0; overflow: hidden; }
.acc-item__inner > .text { padding-top: 20px; padding-right: 80px; }
.acc-item__preview {
display: block; /* an to the template page when it has a shot (09.10) */
width: 571px;
max-width: 100%;
aspect-ratio: 1440 / 900; /* 1440 × 900 like every site preview (user 06.10: «усі превью — під пропорції 1440×900») */
margin-top: 40px;
background: var(--grey-bg);
}
/* a template screenshot (temporary): the site's full width from the top, like the catalogue cards */
.acc-item__tpl { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity .2s; }
.acc-item__tpl:hover { opacity: .6; }
.acc-item__preview.has-shot { background: #111 var(--pv) center top / 100% auto no-repeat; }
.acc-item__inner > .btn { margin-top: 40px; }
/* steps */
.steps { list-style: none; }
.step {
display: flex;
gap: 20px;
padding-bottom: 40px;
border-bottom: 1px solid var(--black);
}
.step + .step { margin-top: 40px; }
.step__num { flex: none; width: 216px; }
.step__info { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* ================= CENTERED BLOCKS (Тарифи / Послуги) ================= */
.block {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
padding: var(--section-y) var(--pad-wide);
}
.block--dark { background: var(--black); color: var(--white); }
.block--grey { background: var(--grey-bg); }
.block__title {
width: 926px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
}
/* same max width as «Послуги» (user 04.10): cards up to 572 px, centred — on wide screens they don't stretch */
/* 16.10: cards 453 in the 926 column (Figma 184:792) */
.plans { display: flex; justify-content: center; gap: 20px; width: 100%; }
.plan { flex: 0 1 453px; min-width: 0; display: flex; flex-direction: column; background: var(--white); color: var(--black); }
.plan__media { aspect-ratio: 571 / 357; overflow: hidden; background: var(--grey-bg); }
.plan__media > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Figma 144:360 / 144:393 (09.10) */
.plan__body {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 40px;
text-align: center;
}
.plan__info { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.plan__price {
display: flex;
flex-wrap: wrap; /* «15,8 € / міс» + «190 € за рік» (the year tab, 13.10): the yearly sum goes under on a phone */
align-items: center;
justify-content: center;
gap: 8px 20px;
line-height: 1.1;
white-space: nowrap;
}
.plan__price .h-l { font-size: var(--fs-price); }
/* 16.10 (Figma 189:1693): the yearly sum is a yellow plate (16, #595959, 0 10) above «N € / міс»; 10 between, 20 inside */
.plan__price { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.plan__row { display: flex; align-items: center; justify-content: center; gap: 20px; }
.plan__year { padding: 0 10px; background: var(--accent); color: var(--grey-text); font-size: 16px; line-height: 1.65; }
.plan__year[hidden] { display: none; }
.plan__period { font-size: 20px; }
.services { display: flex; justify-content: center; gap: 20px; width: 100%; }
.service { flex: 0 1 453px; min-width: 0; display: flex; flex-direction: column; background: var(--white); }
/* 16.10 (user): the body fills the card and the link sits at its bottom, so both cards' links line up in every language */
.plan__body, .service__body { flex: 1 0 auto; }
.plan__body > .link-arrow, .service__body > .link-arrow { margin-top: auto; }
/* 16.10 (user): the third plan «для уроків» is not on sale yet — a yellow «Скоро» plate instead of its link */
.plan__soon { margin-top: auto; padding: 0 10px; background: var(--accent); color: var(--black); font-size: 18px; line-height: 1.65; }
/* 10.10: an illustration on top, text under it — like the plans (Figma section 32:218: media 572×357.6, body 60 padding) */
.service__media { aspect-ratio: 572 / 357.6; overflow: hidden; background: var(--grey-bg); }
.service__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Card illustrations (16.10, Figma 184:353 / 184:386 / 184:450 / 184:462; user: «векторні, тексти під кожну мову»):
the photo is an ![]()
, the overlay is HTML drawn at the Figma frame's 572 × 357.6 and scaled to the card's width
(tan(atan2(100cqw, 572px)) = card width / 572 as a number), so its texts go through the page translation. */
.ill { position: relative; container-type: inline-size; }
.ill__art { position: absolute; left: 0; top: 0; width: 572px; height: 357.6px; transform-origin: 0 0;
transform: scale(tan(atan2(100cqw, 572px))); pointer-events: none; user-select: none;
font-family: "Manrope", sans-serif; font-weight: 400; color: #000; line-height: 1; white-space: nowrap; }
.ill__art img, .ill__art svg { display: block; }
.ill__box { position: absolute; }
.ill__box > * { position: absolute; }
/* 16.10 Figma 184:796 / 184:829 / 184:894 / 184:905: in the 453 cards the overlays are bigger than the 572 frame's
(editor 421.2 / 480, bookings and logo 390 / 390, site 360 / 480 of the card's 453) → their own scale on top of the
frame's 453 / 572 = 0.792, centred */
.ill__box { transform-origin: 50% 50%; }
.ie { transform: scale(1.108); }
.ib, .il { transform: scale(1.2627); }
.is { transform: scale(.947); }
.ill-shadow { box-shadow: 0 1.5px 4.5px rgba(0, 0, 0, .1), 0 10.5px 26.25px rgba(0, 0, 0, .25); }
.ill-plate { display: flex; align-items: center; gap: 5.25px; padding: 8.25px 11.25px 8.25px 9.75px; background: var(--accent);
font-size: 10.5px; }
.ill-plate svg { width: 10.5px; height: 10.5px; }
/* editor (plan «rent») */
.ie, .is { left: 46px; top: 17.5626px; width: 480px; height: 322.5px; }
.ie-win { left: 22.5px; top: 41.25px; width: 345px; height: 232.5px; overflow: hidden; background: #fff;
box-shadow: 0 1.5px 4.5px rgba(0, 0, 0, .1), 0 10.5px 26.25px rgba(0, 0, 0, .25); }
.ie-bar { position: absolute; left: 0; top: 0; width: 345px; height: 28.5px; background: #000; }
.ie-back { position: absolute; left: 10.5px; top: 9px; width: 10.5px; height: 10.5px; }
.ie-seg { position: absolute; left: 150px; top: 4.5px; display: flex; padding: 1.5px; background: rgba(186, 185, 185, .15); }
.ie-seg > span { display: flex; padding: 3.75px 6px; }
.ie-seg > .on { background: #fff; }
.ie-seg svg { width: 9px; height: 9px; }
.ie-done { position: absolute; right: 4.88px; top: 4.88px; display: flex; align-items: center; gap: 3.75px; padding: 4.5px 9px;
background: #fff; font-size: 7.5px; line-height: 1.3; }
.ie-done svg { width: 8.25px; height: 8.25px; }
.ie-site { position: absolute; left: 0; top: 28.5px; width: 345px; height: 204px; overflow: hidden; background: #809787;
font-family: "Onest", sans-serif; color: #16201a; }
.ie-site > * { position: absolute; }
.ie-photo { left: -56.25px; top: 11.25px; width: 450px; height: 228.75px; object-fit: cover; }
.ie-brand { left: 16.5px; top: 12.75px; font-size: 8.25px; font-weight: 500; letter-spacing: .99px; line-height: 1.3; }
.ie-h { left: 14.25px; top: 54px; padding: 2.25px 5.37px .25px 2.25px; border: .5625px solid #16201a; font-size: 34.5px;
font-weight: 300; letter-spacing: -1.035px; line-height: 1; }
.ie-cur { display: inline-block; width: 1.125px; height: 30px; margin: .5px 0 0 3.4px; vertical-align: top; background: #16201a; }
.ie-btn { left: 16.5px; top: 141.75px; display: flex; align-items: center; gap: 3.75px; padding: 6px 11.25px; border-radius: 999px;
background: #16201a; color: #fff; font-size: 8.25px; font-weight: 500; line-height: 1.3;
outline: .5625px dashed #fff; outline-offset: 1.69px; }
.ie-btn svg { width: 7.5px; height: 7.5px; }
.ie-choice { left: 7.5px; top: 244.13px; display: flex; gap: 1.5px; padding: 3px; background: #000; color: #fff; font-size: 11.25px; }
.ie-choice > span { display: flex; align-items: center; gap: 5.25px; padding: 8.25px 11.25px 8.25px 10.5px; }
.ie-choice > .on { background: rgba(255, 255, 255, .2); }
.ie-choice svg { width: 11.25px; height: 11.25px; }
.ie-hint { left: 334.5px; top: 112.5px; }
/* bookings (plan «booking») */
.ib, .il { left: 91px; top: 28.8126px; width: 390px; height: 300px; }
.ib-win { left: 22.5px; top: 37.5px; width: 232.5px; height: 225px; overflow: hidden; background: #fff;
box-shadow: 0 .563px 1.688px rgba(0, 0, 0, .1), 0 3.938px 9.844px rgba(0, 0, 0, .25); }
.ib-win > * { position: absolute; }
.ib-head { left: 0; top: 0; width: 232.5px; height: 27px; background: #000; }
.ib-l1 { position: absolute; left: 11.96px; top: 7.89px; width: 11.5377px; height: 11.2548px; }
.ib-l2 { position: absolute; left: 26.57px; top: 8.66px; width: 46.1902px; height: 10.3683px; }
.ib-title { left: 13.5px; top: 40.5px; font-size: 18px; line-height: 1.1; }
.ib-day { left: 13.5px; top: 71.25px; display: flex; align-items: center; gap: 6px; font-size: 9.75px; line-height: 1.2; }
.ib-step { display: flex; padding: 4.5px; background: var(--grey-bg); }
.ib-step--on { background: #d9d9d9; }
.ib-step svg { width: 8.25px; height: 8.25px; }
.ib-sched { left: 13.5px; top: 100.5px; width: 205.5px; height: 114px; overflow: hidden; background: var(--grey-bg); }
.ib-sched > * { position: absolute; }
.ib-t { left: 6.75px; color: #595959; font-size: 6px; }
.ib-line { left: 31.5px; width: 166.5px; height: .375px; background: #e6e4e0; }
.ib-rec { left: 34.5px; width: 162px; display: flex; align-items: center; gap: 5.25px; padding: 0 6px 0 7.5px;
border-left: 1.5px solid #000; background: #fff; font-size: 7.5px; line-height: 1.2; }
.ib-muted { color: #595959; }
.ib-new { padding: 2.25px 3.75px; background: var(--accent); font-size: 5.63px; line-height: 1; }
.ib-dot { left: 29.63px; top: 51.52px; width: 3.75px; height: 3.75px; background: #000; }
.ib-now { left: 31.5px; top: 53.02px; width: 166.5px; height: .75px; background: #000; }
.ib-card { left: 240px; top: 112.5px; width: 135px; display: flex; flex-direction: column; align-items: flex-start;
padding: 11.25px 12px 12px; background: #fff; }
.ib-tag { padding: 3px 4.5px; background: var(--accent); font-size: 6.38px; }
.ib-name { margin-top: 7.5px; font-size: 12.75px; line-height: 1.1; }
.ib-sub { margin-top: 3px; color: #595959; font-size: 8.25px; line-height: 1.2; }
.ib-call { align-self: stretch; margin-top: 7.5px; display: flex; align-items: center; justify-content: center; gap: 4.5px;
padding: 6.75px 0; background: #000; color: #fff; font-size: 8.25px; }
.ib-call svg { width: 8.25px; height: 8.25px; }
/* individual site (service «site») */
.is-win { left: 22.5px; top: 45px; width: 345px; height: 232.5px; overflow: hidden; background: #17100d;
font-family: "Onest", sans-serif; color: #f3e6d6; }
.is-win > * { position: absolute; }
.is-bar { left: 0; top: 0; width: 345px; height: 18px; background: #000; }
.is-bar i { position: absolute; top: 6.75px; width: 4.5px; height: 4.5px; background: rgba(186, 185, 185, .35); }
.is-photo { left: 187.5px; top: 18px; width: 157.5px; height: 214.5px; object-fit: cover; }
.is-brand { left: 18px; top: 34.5px; font-size: 7.5px; letter-spacing: 1.8px; line-height: normal; }
.is-h { left: 18px; top: 86.25px; font-size: 25.5px; font-weight: 300; letter-spacing: -.51px; line-height: 1.02; }
.is-btn { left: 18px; top: 178.88px; display: flex; align-items: center; gap: 3.75px; padding: 6px 9.75px; background: #f3e6d6;
color: #17100d; font-size: 7.5px; line-height: 1.2; }
.is-btn svg { width: 6.75px; height: 6.75px; }
.is-kit { left: 345px; top: 22.5px; display: flex; flex-direction: column; align-items: flex-start; gap: 8.25px;
padding: 10.5px 12px 12px; background: #fff; }
.is-aa { font-family: "Onest", sans-serif; font-size: 28.5px; font-weight: 300; }
.is-sw { display: flex; }
.is-sw i { width: 24px; height: 24px; }
.is-sw .is-light { background: #f3e6d6; border: .375px solid #e6e4e0; }
.is-plate { left: 7.5px; top: 258.75px; }
/* logo (service «logo») */
.il-canvas { left: -3.75px; top: 21.75px; width: 285px; height: 262.5px; }
.il-tile { left: 210px; top: 180px; width: 82.5px; height: 82.5px; background: #000; }
.il-tile svg { position: absolute; left: 20.63px; top: 20.63px; width: 41.25px; height: 41.25px; }
.il-plate { left: 221.25px; top: 56.25px; }
/* courses / webinars (plan «courses», 16.10; Figma 191:364 in the card 189:1770): the client's site (template Matemat:
Comfortaa + Nunito, rounded) with a schedule + the webinar card of the cabinet + the yellow plate. Units = the component's
1040 × 800 × .375 like .ib; the box is 364 of the card's 453 → its own scale 1.1785 */
.ic { left: 91px; top: 28.8126px; width: 390px; height: 300px; transform: scale(1.1785); }
.ic-win { left: 64.875px; top: 42px; width: 232.5px; height: 225px; overflow: hidden; background: #fff; color: #1c1b2a;
box-shadow: 0 .563px 1.688px rgba(0, 0, 0, .1), 0 3.938px 9.844px rgba(0, 0, 0, .25); }
.ic-win > * { position: absolute; }
.ic-bar { left: 0; top: 0; width: 232.5px; height: 15px; background: #000; }
.ic-bar i { position: absolute; top: 5.25px; width: 4.5px; height: 4.5px; background: rgba(186, 185, 185, .35); }
.ic-brand { left: 13.5px; top: 24px; font-family: "Comfortaa", sans-serif; font-weight: 700; font-size: 8.25px; line-height: 1.1; }
.ic-h { left: 13.5px; top: 39px; font-family: "Comfortaa", sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.12; }
.ic-row { left: 13.5px; width: 205.5px; height: 43.5px; display: flex; align-items: center; gap: 8.25px; padding: 0 8.25px 0 9.75px;
border-radius: 10.5px; background: #f4f4f5; font-family: "Nunito", sans-serif; }
.ic-row--dark { background: #1c1b2a; color: #fff; }
.ic-date { display: flex; flex-direction: column; gap: .75px; }
.ic-date b { font-weight: 700; font-size: 6px; line-height: 1.35; color: #5a5a6e; }
.ic-row--dark .ic-date b { color: #bab9c9; }
.ic-date span { font-family: "Comfortaa", sans-serif; font-weight: 700; font-size: 9px; line-height: 1.1; }
.ic-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2.25px; white-space: normal; }
.ic-info b { font-weight: 700; font-size: 7.875px; line-height: 1.2; }
.ic-info span { font-size: 6px; line-height: 1.35; color: #5a5a6e; white-space: nowrap; }
.ic-row--dark .ic-info span { color: #c9c7e8; }
.ic-row--off .ic-info b { color: #8a8a99; }
.ic-btn { flex: none; padding: 4.875px 8.25px; border-radius: 999px; background: #d9824a; color: #1c1b2a; font-weight: 700;
font-size: 6px; line-height: 1.35; }
.ic-row--off .ic-btn { background: #fff; color: #8a8a99; box-shadow: inset 0 0 0 .75px #c9c9c9; }
.ic-card { left: 240px; top: 23.25px; width: 135px; display: flex; flex-direction: column; align-items: flex-start; gap: 6.75px;
padding: 11.25px 12px 12px; background: #fff; }
.ic-tag { padding: 3px 4.5px; background: var(--accent); font-size: 6.375px; }
.ic-name { display: flex; flex-direction: column; gap: 3px; white-space: normal; }
.ic-name b { font-weight: 400; font-size: 11.25px; line-height: 1.1; }
.ic-name span { color: #595959; font-size: 8.25px; line-height: 1.35; white-space: nowrap; }
.ic-prog { align-self: stretch; display: flex; flex-direction: column; gap: 3.75px; }
.ic-pl { display: flex; justify-content: space-between; font-size: 7.5px; line-height: 1.35; }
.ic-pl span:first-child { color: #595959; }
.ic-prog i { display: block; height: 3px; background: #f4f3f1; }
.ic-prog i::before { content: ""; display: block; width: 60%; height: 100%; background: #000; }
.ic-plate { left: 7.5px; top: 247.5px; }
.service__body {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 40px;
text-align: center;
}
.service__info { display: flex; flex-direction: column; gap: 20px; width: 100%; }
/* ================= CTA with ring ================= */
.cta {
position: relative;
aspect-ratio: 1 / 1;
background: var(--black);
color: var(--white);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* ring of 15 template previews (every template once — user 08.10: «крупніше, тобто менше за кількістю»; 12 since vet 09.10, 15 since 10.10 (S 166.6, L 266.6, r 525.3, outer 658.6), 18 later on 10.10:
S 138.2, L 221.2, r 502.6, outer 613.2 — the numbers below are for 12, the formula stands),
step 360/12; the whole ring spins clockwise; each card sits at rotate(--a) translateY(-r). Card = the CLOSED hero card
(16:10) laid on its side (user 08.10: «широка частина від центру до зовнішнього радіуса», then «в інший бік»): the item is
210.1 (tangential) × 336.2 (radial), the card inside is 336.2×210.1 turned −90°. Neighbours TOUCH with their inner corners (user
08.10: «мають торкатися кутами»): 210.1 = 2·r_in·tan(π/12); the hole r_in is kept at 392 so the 96 title / text / button
clear the cards at any turn (title box corner ≈384) → r = 560.2, outer edge 728 (the frame's half is 720).
A NEW TEMPLATE: add its card to www/index.html and recompute here — S = 2·392·tan(π/N), L = S / 0.625, r = 392 + L/2
(tools/check-templates.py fails while a template is missing from the ring). */
.cta { container-type: inline-size; }
/* the window's height like the hero (user 04.10); the ring fits the smaller of the content width (capped like the other
sections) and the window height; the black runs on to the edges */
.cta {
aspect-ratio: auto; height: 100vh; height: 100svh; min-height: 640px;
/* 1 design px of the 1440 frame: the ring follows the SECTION (window height, or the width if narrower) — no 1164
cap here (user 04.10: «підганяй пропорційно розширенню секції») */
--u: calc(min(100cqw, max(100svh, 640px)) / 1440);
}
/* the title scales with the ring so it stays inside its hole (96px at the full 1440 frame) */
@media (min-width: 901px) {
/* the ring never shrinks below 0.95 of the frame (user 16.10: on a low desktop window the hole came too close to the
text; the section's edges may cut the ring). Measured 16.10, 1310 × 1000, uk / ru / cs / en: the farthest corner of the
title / text / button stays inside the hole's inner edge (392 · cos(π/14) · u) only from u ≈ 0.95 (ru, en 357 < 363) */
/* 18.10 (owner: «мінімальна має бути 1440, зараз вона адаптується під монітор а не має»): on desktop the section no longer
follows the window's height — it is at least 1440 tall (the frame), and the ring follows only the width (1:1 from 1440 wide;
narrower windows keep the 0.95 floor, the section's edges may cut the ring). Was: height 100svh, min 1080. */
.cta { height: auto; min-height: 1440px; --u: calc(max(min(100cqw, 1440px), 1368px) / 1440); }
.cta__content .h-xl { font-size: max(40px, calc(64 * var(--u))); margin-bottom: -20px; } /* 64 at 1440, 20 to the text (Figma 184:931) */
.cta .cta__content { max-width: min(calc(100% - 2 * var(--pad)), calc(640 * var(--u))); } /* inside the ring's hole (r_in 392); the 96 title is ≈634 */
}
.ring {
/* the item: tangential × radial — ALWAYS 14 cards since 12.10 (the newest 14 templates, user: «просто останні 14»):
S = 2·392·tan(π/14) = 178.9, L = 1.6·S = 286.3, r = 392 + L/2 = 535.2 (392 = the hole for the title) */
--card-w: calc(178.9 * var(--u));
--card-h: calc(286.3 * var(--u));
--r: calc(535.2 * var(--u));
--r-out: 678.3; /* outer edge = r + L/2, design px (the phone layout hangs the ring from it) */
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
animation: ring-spin 120s linear infinite;
}
.cta__content > * { pointer-events: auto; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.ring__item {
position: absolute;
left: calc(var(--card-w) / -2);
top: calc(var(--card-h) / -2);
width: var(--card-w);
height: var(--card-h);
transform: rotate(var(--a)) translateY(calc(-1 * var(--r)));
perspective: calc(700 * var(--u));
}
.ring__card {
/* landscape 16:10 like the closed hero card, turned −90° inside the upright item (centred on it) */
position: absolute;
left: calc((var(--card-w) - var(--card-h)) / 2);
top: calc((var(--card-h) - var(--card-w)) / 2);
width: var(--card-h);
height: var(--card-w);
transform: rotate(-90deg);
/* the site's full width from the top, like the hero card */
background: rgba(186, 185, 185, .5) center top / 100% auto no-repeat;
transform-origin: 50% 50%;
transition:
transform .7s cubic-bezier(.2, .7, .2, 1),
background-position 1.6s cubic-bezier(.2, .7, .2, 1),
background-color .4s;
}
/* "leaf through in perspective": the card tilts away in 3D and the preview inside scrolls down a bit */
.ring__item:focus-visible .ring__card {
transform: rotate(-90deg) rotateX(24deg) rotateY(-28deg) scale(1.06);
background-position: center 40%;
background-color: rgba(186, 185, 185, .62);
}
/* the ring never stops: a card tilts while it passes under the pointer and straightens as it moves on */
@media (hover: hover) and (pointer: fine) {
.ring__item:hover .ring__card {
transform: rotate(-90deg) rotateX(24deg) rotateY(-28deg) scale(1.06);
background-position: center 40%;
background-color: rgba(186, 185, 185, .62);
}
}
@media (prefers-reduced-motion: reduce) {
.ring { animation: none; }
}
.cta__content {
position: relative;
pointer-events: none; /* the text box overlaps side cards — let the pointer reach them */
z-index: 1;
width: 926px;
max-width: calc(100% - 2 * var(--pad));
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
/* ================= FOOTER ================= */
.footer {
display: grid;
grid-template-columns: 453px 1fr;
gap: 20px;
padding: 60px var(--pad-wide);
background: var(--grey-bg);
}
.footer__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; }
.footer__cols { display: flex; gap: 20px; }
.footer__col {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
font-size: 18px;
line-height: 1.65;
white-space: nowrap;
}
.footer__head { margin-bottom: 10px; font-size: 16px; color: var(--grey-text); }
.footer__col a { transition: opacity .2s; }
.footer__col a:hover { opacity: .6; }
/* ================= mobile menu (Figma 34:601) ================= */
.header__burger { display: none; }
.menu {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
padding: 16px var(--pad) 60px 19px;
background: var(--black);
color: var(--white);
opacity: 0;
transition: opacity .3s;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu .logo { width: 151px; height: 28px; }
.menu__close { display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px -6px 0; }
.menu__nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
margin-top: 60px; /* nav starts at y=104 */
font-size: 16px;
line-height: 1.35;
}
.menu__auth {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: auto;
padding-left: 1px;
font-size: 16px;
line-height: 1.35;
}
.menu__auth .btn { width: 100%; }
body.menu-open { overflow: hidden; }
/* ================= in-between widths (no design — keeps the desktop layout from colliding) ================= */
@media (max-width: 1100px) {
.hero__title { width: min(572px, 48vw); }
.hero__aside { width: 360px; }
.plan__body, .service__body { padding: 40px 24px; }
.footer { grid-template-columns: 1fr; }
}
/* ================= MOBILE (Figma 34:306, 390 wide) ================= */
@media (max-width: 900px) {
:root {
--section-y: 80px;
--fs-xxl: 48px;
--fs-xl: 48px;
--fs-l: 28px;
--fs-price: 28px;
}
/* hero photos on phones (16.10, Figma 169:257; user: «фото на телефоні по центру, як у макеті» — replaces the 12.10 38 %):
the person in the middle, the photo 109.5 % of the hero's height (730.5 / 667) standing on its bottom edge */
.hero__fill { background-position: center bottom; background-size: auto 109.5%; }
.hero__bg { top: auto; bottom: 0; height: 109.5%; object-position: center bottom; }
.text { font-size: 16px; }
.btn { font-size: 20px; }
.btn--sm { font-size: 16px; }
/* header */
.header { height: auto; align-items: flex-start; padding: 16px var(--pad) 0 19px; }
.header .logo { width: 151px; height: 28px; margin-top: 0; }
.header__nav, .header__auth { display: none; }
/* 44px tap area, icon lands at 342,20 as in the design */
.header__burger { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; }
/* hero */
.hero { height: 100vh; height: 100svh; min-height: 620px; } /* the window's height (was a fixed 740) */
/* .hero__bg: the same cover as on desktop (08.10) */
/* 16.10 (user: «переверстай херо мобайл», Figma 169:257 «mobile main 2», 390 × 667): everything hangs from the BOTTOM of
the hero: the navigator 20 above it, the cards' bottom 67, the button's bottom 255.26 (53 above the cards), the title 20
above the button (title 48, button 18 with 10 / 28); no paragraph under the title; the header shows the mark only;
the shade runs over the whole hero, transparent → .5 at 60 % and .5 below (user, 16.10). (Was: the carousel in the middle, 30 / 30 / 30.) */
.hero .header .logo__word { display: none; }
.hero__videos::after { inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 60%); } /* 16.10 user: 0 → .5 at 60 %, then .5 */
.hero__title { top: auto; left: var(--pad); bottom: calc(255.26px + 44.3px + 20px); width: 351px; max-width: calc(100% - 2 * var(--pad)); }
.hero__aside { left: var(--pad); right: var(--pad); top: auto; bottom: 255.26px; width: auto; }
.hero__aside .text { display: none; }
.hero__aside .btn { padding: 10px 28px; font-size: 18px; }
/* fixed 216×135 (16:10) cards, no ×2 growth, their bottom 67 above the hero's */
.hero__screens {
--w: 216px;
--h: 135px;
--h-open: 135px;
--step: 237px;
top: auto;
bottom: 67px;
}
.screen__arrow { display: none; }
.hero__progress { left: var(--pad); right: var(--pad); bottom: 20px; width: auto; transform: none; }
/* split sections → one column */
.split { grid-template-columns: 1fr; row-gap: 40px; }
#themes .split__title { gap: 20px; }
.acc-item { padding-bottom: 20px; }
/* open item: the 40px icon sits beside the description, not under the 31px title */
.acc-item.is-open .acc-item__icon { margin-bottom: calc(var(--fs-l) * -1.1); } /* 16.10: the icon = the title's line */
.acc-item__inner > .text { padding-right: 80px; }
.acc-item__preview { width: 100%; margin-top: 20px; }
.acc-item__inner > .btn { margin-top: 20px; }
.step__num { width: auto; }
/* centered blocks */
.block__title { gap: 20px; }
.block--dark .text--soft { color: #d9d9d9; }
.plans, .services { flex-direction: column; }
.plan { flex: none; width: 100%; }
.plan__body { padding: 40px; }
.link-arrow { font-size: 20px; }
.service { flex: none; width: 100%; }
.service__body { padding: 40px; }
/* CTA: content on top, ring cut by the bottom edge */
.cta { aspect-ratio: auto; height: 100svh; min-height: 620px; align-items: flex-start; padding-top: 80px; }
/* mobile: ring scaled to 1050/1400 = 0.75, centre at y = 415 + 696.5 × 0.75 ≈ 937 → only the top arc shows */
/* 10.10 (user: «в мобайлі кільце вище та крупніше, місце є»): 1:1 scale, hung from the text instead of the bottom —
the cards' top edge 48 px under the button (its bottom is at 325 on 375–430 px phones), so it never hits the button on
short phones and leaves no hole on tall ones */
.ring { --u: 1px; top: calc(var(--hang, 445px) + var(--r-out) * var(--u)); } /* --hang: main.js, button bottom + 120 */
/* footer: columns first, brand last */
.footer { display: flex; flex-direction: column; gap: 60px; }
.footer__brand { order: 2; justify-content: flex-start; gap: 40px; }
.footer__brand .text { font-size: 16px; }
.footer__cols { flex-direction: column; gap: 40px; }
}
/* ================= on-scroll reveal (js/main.js adds .reveal / .is-in) =================
An animation (not a transition) so it doesn't clobber the elements' own hover/state transitions,
and fill-mode "backwards" so after it ends the element's normal styles (hover opacity etc.) apply. */
/* ================= animated logo mark (.lmark) =================
Intro on signup / login; looped (.lmark--loop) as the loader on site-building.html.
7 blocks, each on its own full-size layer, so every block gets its own
3D tilt around its own centre (--ox/--oy). Same principle as the landing ring cards (style.css .ring__card:
card turned radially, own perspective, rotateX + rotateY + scale) — only stronger: each block starts tilted
far away in its radial frame (--rot) and straightens into the front plane, clockwise from 12 o'clock (--i),
in a cascade. Values are written in the HTML by the generator. */
.lmark { --p: 48px; position: relative; display: block; width: 61.38px; height: 60px;
/* the full-size layer boxes blow up under the strong perspective (page got 2359 px wide) — clip them,
with room for the tilted blocks themselves */
overflow: clip; overflow-clip-margin: 24px; }
.lmark > span {
position: absolute;
inset: 0;
transform-origin: var(--ox) var(--oy);
animation: lmark-in 1.3s cubic-bezier(.4, .1, .2, 1) calc(.3s + var(--i) * .12s) both;
}
.lmark svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes lmark-in {
from {
opacity: 0;
transform: perspective(var(--p)) rotate(var(--rot)) rotateX(62deg) rotateY(-70deg) scale(1.2) rotate(calc(-1 * var(--rot)));
}
15% { opacity: 1; }
to {
opacity: 1;
transform: perspective(var(--p)) rotate(var(--rot)) rotateX(0deg) rotateY(0deg) scale(1) rotate(calc(-1 * var(--rot)));
}
}
/* loader: the same tilt-in, then a hold, then the blocks tilt away again in the same clockwise cascade — forever */
.lmark--loop > span { animation: lmark-loop 2.8s cubic-bezier(.4, .1, .2, 1) calc(var(--i) * .12s) infinite both; }
@keyframes lmark-loop {
0%, 92%, 100% {
opacity: 0;
transform: perspective(var(--p)) rotate(var(--rot)) rotateX(62deg) rotateY(-70deg) scale(1.2) rotate(calc(-1 * var(--rot)));
}
7% { opacity: 1; }
40%, 62% {
opacity: 1;
transform: perspective(var(--p)) rotate(var(--rot)) rotateX(0deg) rotateY(0deg) scale(1) rotate(calc(-1 * var(--rot)));
}
85% { opacity: 1; }
}
/* …and the whole mark slowly turns clockwise meanwhile (one turn per two cycles) */
.lmark--loop { animation: lmark-turn 5.6s linear infinite; }
@keyframes lmark-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lmark > span, .lmark--loop > span, .lmark--loop { animation: none; } }
.js .reveal:not(.is-in) { opacity: 0; }
.reveal.is-in { animation: reveal-up .9s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) backwards; }
.reveal--fade.is-in { animation-name: reveal-fade; animation-duration: 1.4s; }
@keyframes reveal-up {
from { opacity: 0; transform: translateY(36px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.js .reveal:not(.is-in) { opacity: 1; }
.reveal.is-in { animation: none; }
*, *::before, *::after { transition-duration: 0s !important; }
html { scroll-behavior: auto; }
}
/* ================= cookie banner (EU, 03.10) — every page of pochatok.online, injected by js/main.js =================
Black panel bottom-left; «Лише необхідні» and «Прийняти всі» are equal (same size, both filled) — refusing must be
as easy as accepting. The choice is kept in localStorage 'pochatok-cookies'; «Налаштування cookies» in footers reopens it. */
.ck { position: fixed; left: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 20px; width: 520px; max-width: calc(100% - 40px); padding: 32px; background: var(--black); color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.ck[hidden] { display: none; }
.ck__title { font-size: 20px; line-height: 1.2; }
.ck__text { font-size: 14px; line-height: 1.6; color: #d9d9d9; }
.ck__text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ck__opts { display: flex; flex-direction: column; gap: 0; }
.ck__opts[hidden] { display: none; }
.ck__opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 14px; line-height: 1.4; }
.ck__opt small { display: block; margin-top: 2px; font-size: 12px; color: var(--grey-soft); }
.ck__sw { flex: none; display: flex; align-items: center; width: 52px; height: 30px; padding: 3px; border-radius: 999px; background: #595959; transition: background-color .2s; }
.ck__sw::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--white); transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
.ck__sw[aria-checked="true"] { background: var(--white); }
.ck__sw[aria-checked="true"]::before { background: var(--black); transform: translateX(22px); }
.ck__sw:disabled { opacity: .5; cursor: default; }
.ck__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck__btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 16px; background: rgba(186, 185, 185, .15); color: var(--white); font-size: 16px; transition: opacity .2s; }
.ck__btn:hover { opacity: .85; }
.ck__btn--main { background: var(--white); color: var(--black); }
.ck__more { align-self: flex-start; font-size: 14px; color: var(--grey-soft); text-decoration: underline; text-underline-offset: 3px; }
.ck__more:hover { color: var(--white); }
@media (max-width: 600px) {
.ck { left: 0; right: 0; bottom: 0; width: auto; max-width: none; padding: 24px var(--pad) calc(24px + env(safe-area-inset-bottom)); }
.ck__btns { grid-template-columns: 1fr; }
}
/* ================= request popup (09.10) — «Хочу індивідуальний сайт / логотип» =================
Pochatok surfaces: a white panel (padding 40 / 24), inputs white + 1px grey border, square option chips with a border,
primary button black. Native