@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=DM+Sans:wght@400;600;700&display=swap'); /* Pixel Attic — базові стилі (BEM). Жодного JS. */ :root { --ink: #16181d; --muted: #5f6672; --paper: #f4f5f7; --surface: #ffffff; --line: #dde1e7; --accent: #3a2fd0; --accent-dim: #ebe9fb; --container: 62rem; --step: clamp(1rem, 0.6rem + 1.6vw, 1.6rem); --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* UI-kit токени (перевизначаються темою у кожного сайту) */ --display: var(--sans); /* шрифт заголовків */ --radius: 0px; /* заокруглення карток/зображень */ --btn-radius: 0px; /* заокруглення кнопок */ --btn-shadow: 5px 5px 0 var(--ink); --btn-shadow-active: 3px 3px 0 var(--ink); /* Design-DNA токени (перевизначаються класом body.dna-* — див. кінець файлу) */ --card-border: 1px solid var(--line); /* рамка карток/панелей */ --card-bg: var(--surface); /* заповнення карток */ --card-shadow: none; /* тінь карток */ --card-radius: var(--radius); /* заокруглення карток */ --head-transform: none; /* регістр заголовків */ --head-spacing: -0.022em; /* трекінг заголовків */ --head-weight: 800; /* насиченість заголовків */ --btn-style-shadow: var(--btn-shadow); /* тінь кнопки (DNA може прибрати) */ } @media (prefers-color-scheme: dark) { :root { --ink: #e8eaef; --muted: #9aa2b1; --paper: #14161b; --surface: #1c1f26; --line: #2c313b; --accent: #9d93ff; --accent-dim: #262445; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); text-rendering: optimizeLegibility; } /* ---------- Layout ---------- */ .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } /* ---------- Типографіка ---------- */ h1, h2, h3 { font-family: var(--display); line-height: 1.15; letter-spacing: var(--head-spacing); font-weight: var(--head-weight); text-transform: var(--head-transform); margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); } h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem); } h3 { font-size: 1.2rem; } p, ul, ol { margin: 0 0 1.15em; } a { color: var(--accent); text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---------- Типографічні утиліти ---------- */ .eyebrow { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } .eyebrow a { color: inherit; } .lead { font-size: 1.15rem; color: var(--muted); max-width: 42ch; } .meta { font: 0.85rem var(--mono); color: var(--muted); } /* ---------- Button ---------- */ .button { display: inline-block; background: var(--accent); color: #fff; font-weight: 650; text-decoration: none; padding: 0.8rem 1.5rem; border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); transition: transform 0.12s ease, box-shadow 0.12s ease; } .button:hover { transform: translate(2px, 2px); box-shadow: var(--btn-shadow-active); } @media (prefers-color-scheme: dark) { .button { color: #14161b; } } /* Варіант кнопки: контурна (secondary) */ .button--outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); box-shadow: none; padding: calc(0.8rem - 2px) calc(1.5rem - 2px); } .button--outline:hover { background: var(--accent); color: #fff; transform: none; box-shadow: none; } @media (prefers-color-scheme: dark) { .button--outline:hover { color: #14161b; } } /* ---------- Badge (у стилі Preline) ---------- */ .badge { display: inline-flex; align-items: center; gap: 0.4rem; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.45rem 0.7rem; border-radius: 999px; background: var(--accent); color: #fff; } .badge--soft { background: var(--accent-dim); color: var(--accent); } @media (prefers-color-scheme: dark) { .badge { color: #14161b; } .badge--soft { color: var(--accent); } } /* ---------- Секції головної ---------- */ /* Вертикальний ритм (кожна секція — свій блок) */ .about, .featured, .faq, .reviews, .contact, .catalog__note { padding-block: clamp(2.5rem, 6vw, 4rem); } /* Секції з фоновою смугою */ .featured, .reviews, .contact { background: var(--surface); border-block: 1px solid var(--line); } /* Заголовок кожної секції (назва — за своїм блоком) */ .about__title, .featured__title, .faq__title, .reviews__title, .contact__title { margin-bottom: 1.5rem; } /* ---------- Header ---------- */ .header { border-bottom: 1px solid var(--line); background: var(--surface); } .header__inner { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1rem; } .header__brand { display: inline-flex; align-items: center; gap: 0.6rem; font: 800 1.05rem/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } /* Підпис бренду: східчастий «піксель» */ .header__brand-mark { width: 12px; height: 12px; background: var(--accent); box-shadow: 6px 6px 0 0 var(--accent), 12px 12px 0 0 var(--accent-dim); margin-block-end: 12px; margin-inline-end: 12px; flex: none; } .header__menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font: 500 0.95rem var(--sans); } .header__link { color: var(--muted); text-decoration: none; padding-block: 0.2rem; } .header__link:hover { color: var(--ink); } .header__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } /* ---------- Hero ---------- */ .hero { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: clamp(3rem, 8vw, 5.5rem); } .hero__title { max-width: 16ch; } .hero__text { font-size: 1.2rem; color: var(--muted); max-width: 46ch; margin-bottom: 2rem; } /* Hero з генерованою картинкою: мʼякий scrim кольору сторінки для читабельності */ .hero--image { position: relative; background-size: cover; background-position: center; border-bottom: none; } .hero--image::before { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: 0.72; } .hero--image .container { position: relative; z-index: 1; } /* ===== Багатосекційна головна (у стилі зразків) ===== */ .button--lg { font-size: 1.05rem; padding: 0.9rem 1.7rem; } .section { padding-block: clamp(3rem, 7vw, 5.5rem); } .section__title { font-family: var(--display); font-size: calc(clamp(1.6rem, 4vw, 2.6rem) * var(--display-scale, 1)); text-align: center; margin-bottom: 2.5rem; overflow-wrap: anywhere; } .hero2 { background: linear-gradient(var(--grad-angle, 160deg), var(--accent-dim), var(--surface)); border-bottom: 1px solid var(--line); padding-block: clamp(2.5rem, 6vw, 5rem); overflow: hidden; } .hero2__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; } .hero2__title { font-family: var(--display); font-size: calc(clamp(2.2rem, 6vw, 4rem) * var(--display-scale, 1)); line-height: 1.06; margin: 0 0 1rem; overflow-wrap: anywhere; } .hero2__text { font-size: 1.2rem; color: var(--muted); max-width: 46ch; margin-bottom: 2rem; } .hero2__art { justify-self: center; } .hero2__art img { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.18)); } .ticker { background: var(--accent); color: var(--paper); overflow: hidden; white-space: nowrap; transform: rotate(-2deg); margin-block: 1.5rem -0.5rem; padding-block: 0.6rem; } .ticker__row { font-family: var(--display); font-size: 1.1rem; letter-spacing: .04em; padding-inline: 1rem; } .about2__inner { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: center; } .about2__art { justify-self: center; } .about2__art img { width: 100%; max-width: 260px; height: auto; } .about2__title { text-align: left; margin-bottom: 1rem; } .about2__body { color: var(--muted); font-size: 1.15rem; } @media (max-width: 760px) { .about2__inner { grid-template-columns: 1fr; text-align: center; } .about2__title { text-align: center; } } .features { background: var(--surface); } .features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; } .feature { display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .feature__emoji { font-size: 1.9rem; line-height: 1; } .feature__title { margin: 0 0 .3rem; font-size: 1.05rem; } .feature__text { margin: 0; color: var(--muted); font-size: .95rem; } .lanes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; } .lane { padding: 1.6rem; border: 2px solid var(--accent); border-radius: var(--radius); } .lane__name { font-family: var(--display); font-size: 1.3rem; color: var(--accent); display: block; margin-bottom: .5rem; } .lane__text { margin: 0; color: var(--muted); } .trending { text-align: center; } .trending .button { margin-top: 2rem; } .stats { background: var(--accent); color: var(--paper); padding-block: clamp(2rem, 5vw, 3.5rem); } .stats__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; text-align: center; } .stat__value { display: block; font-family: var(--display); font-size: calc(clamp(1.6rem, 4vw, 2.4rem) * var(--display-scale, 1)); overflow-wrap: anywhere; } .stat__label { opacity: .85; font-size: .9rem; } .reviews2__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; } .review2 { padding: 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .review2__text { margin: 0 0 1rem; font-size: 1.05rem; } .review2__author { margin: 0; font-weight: 600; color: var(--muted); } .closing { background: linear-gradient(var(--grad-angle, 160deg), var(--accent-dim), var(--surface)); border-block: 1px solid var(--line); padding-block: clamp(3rem, 7vw, 5rem); overflow: hidden; } .closing__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; } .closing__title { font-family: var(--display); font-size: calc(clamp(1.8rem, 4vw, 2.8rem) * var(--display-scale, 1)); margin: 0 0 1rem; overflow-wrap: anywhere; } .closing__text { color: var(--muted); font-size: 1.1rem; margin-bottom: 1.5rem; max-width: 44ch; } .closing__art { justify-self: center; } .closing__art img { width: 100%; max-width: 300px; height: auto; } .contact2 { text-align: center; } .contact2__intro { max-width: 50ch; margin: 0 auto 1.5rem; color: var(--muted); } .contact2__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .contact2__item { padding: .7rem 1.2rem; border: 1px solid var(--line); border-radius: var(--btn-radius); background: var(--surface); } .footer__wordmark { font-family: var(--display); font-size: calc(clamp(2.5rem, 13vw, 8rem) * var(--display-scale, 1)); line-height: .9; font-weight: 800; letter-spacing: -.02em; opacity: .1; overflow: hidden; white-space: nowrap; margin-bottom: 1.5rem; } /* ===== Вісь МАКЕТА: варіанти каркаса (per-domain) ===== */ /* Hero: split-left — персонаж зліва */ .hero2--split-left .hero2__inner { grid-template-columns: 1fr 1.1fr; } .hero2--split-left .hero2__art { order: -1; } /* Hero: center-text — лише текст по центру, без персонажа */ .hero2--center-text .hero2__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } .hero2--center-text .hero2__text { margin-inline: auto; } .hero2--center-text { padding-block: clamp(3.5rem, 9vw, 7rem); } /* Hero: center-wordmark — гігантський wordmark позаду + персонаж над текстом по центру */ .hero2--center-wordmark { position: relative; } .hero2--center-wordmark .hero2__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; position: relative; z-index: 2; } .hero2--center-wordmark .hero2__text { margin-inline: auto; } .hero2--center-wordmark .hero2__art { order: -1; } .hero2--center-wordmark .hero2__art img { max-width: 300px; } .hero2__wordmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; font-size: calc(clamp(3rem, 15vw, 11rem) * var(--display-scale, 1)); color: var(--accent); opacity: .13; overflow: hidden; z-index: 1; pointer-events: none; } /* Header: centered — лого над меню, по центру */ .header--centered .header__inner { flex-direction: column; gap: .6rem; text-align: center; } .header--centered .header__menu { justify-content: center; } /* Footer: minimal — усе по центру стовпчиком */ .footer--minimal .footer__top { flex-direction: column; align-items: center; text-align: center; gap: .8rem; } .footer--minimal .footer__copyright { text-align: center; } /* ===== Референс-шаблон ZorvKaneVelor (кольори з токенів -> рекол автоматом) ===== */ .zh { position: relative; overflow: hidden; background: linear-gradient(var(--grad-angle,160deg), var(--accent-dim), var(--surface)); border-bottom: 1px solid var(--line); padding-block: clamp(2.5rem,6vw,5rem); } .zh__mark { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); font-family: var(--display); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; font-size: calc(clamp(3rem,16vw,12rem)*var(--display-scale,1)); color: var(--accent); opacity: .12; z-index: 0; pointer-events: none; } .zh__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; } .zh__stats { display: grid; gap: 1rem; } .zh__stat { margin: 0; color: var(--muted); font-size: .9rem; } .zh__statv { display: block; font-family: var(--display); font-size: calc(clamp(1.3rem,3vw,1.9rem)*var(--display-scale,1)); color: var(--ink); } .zh__art { justify-self: center; } .zh__art img { width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 18px 38px rgba(0,0,0,.28)); } .zh__kicker { font-family: var(--display); font-size: 1.25rem; color: var(--ink); margin: 0 0 .6rem; } .zh__text { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.5rem; } .zo__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; } .zo__title { font-family: var(--display); font-size: calc(clamp(1.6rem,3.5vw,2.4rem)*var(--display-scale,1)); margin: .3rem 0 1rem; } .zo__body { color: var(--muted); font-size: 1.1rem; } .zo__art { justify-self: center; } .zo__art img { width: 100%; max-width: 300px; height: auto; } .zadv { background: var(--accent-dim); padding-block: clamp(2.5rem,6vw,4.5rem); } .zadv__title { font-family: var(--display); font-size: calc(clamp(1.6rem,3.5vw,2.4rem)*var(--display-scale,1)); margin: 0 0 1.5rem; } .zadv__list { list-style: none; margin: 0; padding: 0; } .zadv__row { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 0; border-top: 1px solid var(--line); } .zadv__icon { font-size: 1.8rem; flex: none; } .zadv__body { flex: 1; } .zadv__name { margin: 0 0 .2rem; font-size: 1.15rem; } .zadv__desc { margin: 0; color: var(--muted); } .zadv__arrow { color: var(--accent); font-size: 1.4rem; flex: none; } .zfaq__title { font-family: var(--display); font-size: calc(clamp(1.6rem,3.5vw,2.4rem)*var(--display-scale,1)); text-align: center; margin: 0 0 2rem; } .zfaq__list { list-style: none; counter-reset: faq; margin: 0 auto; padding: 0; max-width: 52rem; display: grid; gap: .8rem; } .zfaq__item { counter-increment: faq; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; } .zfaq__q { margin: 0 0 .4rem; font-size: 1.05rem; } .zfaq__q::before { content: counter(faq) ". "; color: var(--accent); font-family: var(--display); } .zfaq__a { margin: 0; color: var(--muted); } .zt { background: var(--surface); border-block: 1px solid var(--line); padding-block: clamp(2.5rem,6vw,4.5rem); } .zt__grid { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; } .zt__art img { width: 100%; max-width: 280px; height: auto; } .zt__title { font-family: var(--display); font-size: calc(clamp(1.6rem,3.5vw,2.4rem)*var(--display-scale,1)); margin: 0 0 1.5rem; } .zt__item { padding: 1rem 0; border-top: 1px solid var(--line); } .zt__author { margin: 0 0 .3rem; font-weight: 700; } .zt__text { margin: 0; color: var(--muted); } .zh__byline { margin: 1rem 0 0; font-size: .8rem; color: var(--muted); } .zmeth__inner { max-width: 62ch; margin: 0 auto; text-align: center; } .zmeth__title { font-family: var(--display); font-size: calc(clamp(1.5rem,3vw,2.2rem)*var(--display-scale,1)); margin: .3rem 0 1rem; } .zmeth__body { color: var(--muted); font-size: 1.1rem; } /* ===== Референс-шаблон XyraVolenNexik (кольорові картки-блоки) ===== */ .xv-hero { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: clamp(2.5rem,6vw,5rem); overflow: hidden; } .xv-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; } .xv-hero__title { font-family: var(--display); font-size: calc(clamp(2.4rem,7vw,4.5rem)*var(--display-scale,1)); line-height: 1.02; margin: 0 0 1rem; overflow-wrap: anywhere; } .xv-hero__text { color: var(--muted); font-size: 1.15rem; max-width: 46ch; margin: 0 0 1.5rem; } .xv-hero__art { justify-self: center; } .xv-hero__art img { width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 18px 38px rgba(0,0,0,.28)); } .xv-byline { margin: 1rem 0 0; font-size: .8rem; color: var(--muted); } .xv-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1.2rem; } .xv-card { padding: 1.6rem; border-radius: var(--radius); color: #fff; } .xv-card--0 { background: var(--accent); } .xv-card--1 { background: var(--accent2, var(--accent)); } .xv-card__emoji { font-size: 1.8rem; } .xv-card__title { margin: .5rem 0 .3rem; font-size: 1.15rem; color: #fff; } .xv-card__text { margin: 0; color: rgba(255,255,255,.9); font-size: .95rem; } .xv-about { background: var(--surface); border-block: 1px solid var(--line); } .xv-about__grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 2.5rem; } .xv-about__title { font-family: var(--display); font-size: calc(clamp(1.6rem,3.5vw,2.4rem)*var(--display-scale,1)); margin: .3rem 0 1rem; } .xv-about__mtitle { margin: 1.5rem 0 .5rem; font-size: 1.1rem; } .xv-about__body { color: var(--muted); } .xv-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-content: start; } .xv-stats li { color: var(--muted); font-size: .9rem; border-left: 3px solid var(--accent); padding-left: .8rem; } .xv-stats__v { display: block; font-family: var(--display); font-size: calc(clamp(1.3rem,3vw,1.8rem)*var(--display-scale,1)); color: var(--ink); } .xv-faq__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1rem; } .xv-faq__card { padding: 1.4rem; border-radius: var(--radius); color: #fff; } .xv-faq__card--0 { background: var(--accent); } .xv-faq__card--1 { background: var(--accent2, var(--accent)); } .xv-faq__q { margin: 0 0 .4rem; font-size: 1.05rem; color: #fff; } .xv-faq__a { margin: 0; color: rgba(255,255,255,.9); } .xv-editor__inner { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; } .xv-editor__art { justify-self: center; } .xv-editor__art img { width: 100%; max-width: 260px; height: auto; } .xv-editor__title { font-family: var(--display); font-size: calc(clamp(1.5rem,3vw,2.2rem)*var(--display-scale,1)); margin: .3rem 0 1rem; } .xv-editor__note { color: var(--muted); margin: 0 0 1.2rem; } @media (max-width: 760px) { .xv-hero__grid, .xv-about__grid, .xv-editor__inner { grid-template-columns: 1fr; } .xv-hero__art { order: -1; } } /* ===== Референс-шаблон JyntaKrynnTazor (космос: наратив, pick-your-lane, snapshot, контакт-блок) ===== */ .jy-hero { background: linear-gradient(var(--grad-angle,160deg), var(--accent-dim), var(--surface)); border-bottom: 1px solid var(--line); padding-block: clamp(2.5rem,6vw,5rem); overflow: hidden; } .jy-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; } .jy-hero__title { font-family: var(--display); font-size: calc(clamp(2.2rem,6vw,4rem)*var(--display-scale,1)); line-height: 1.04; margin: 0 0 1rem; overflow-wrap: anywhere; } .jy-hero__text { color: var(--muted); font-size: 1.15rem; max-width: 46ch; margin: 0 0 1.5rem; } .jy-hero__art { justify-self: center; } .jy-hero__art img { width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.3)); } .jy-byline { margin: 1rem 0 0; font-size: .8rem; color: var(--muted); } .jy-about__grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: 2.5rem; align-items: center; } .jy-about__art { justify-self: center; } .jy-about__art img { width: 100%; max-width: 300px; height: auto; } .jy-about__title { font-family: var(--display); font-size: calc(clamp(1.6rem,3.5vw,2.4rem)*var(--display-scale,1)); margin: .3rem 0 1rem; } .jy-about__body { color: var(--muted); font-size: 1.08rem; } .jy-lanes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.2rem; } .jy-lane { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .jy-lane__icon { font-size: 1.7rem; display: block; margin-bottom: .5rem; } .jy-lane__name { font-family: var(--display); color: var(--accent); margin: 0 0 .4rem; font-size: 1.2rem; } .jy-lane__text { margin: 0; color: var(--muted); } .jy-snap__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.2rem; } .jy-snap__card { padding: 1.5rem; border-radius: var(--radius); background: var(--accent-dim); } .jy-snap__emoji { font-size: 1.6rem; } .jy-snap__name { font-family: var(--display); margin: .5rem 0 .3rem; font-size: 1.1rem; } .jy-snap__text { margin: 0; color: var(--muted); font-size: .95rem; } .jy-faq { max-width: 52rem; margin-inline: auto; } .jy-contact { background: var(--accent); color: #fff; padding-block: clamp(2.5rem,6vw,4.5rem); } .jy-contact__inner { text-align: center; max-width: 60ch; } .jy-contact__eyebrow { color: rgba(255,255,255,.85); } .jy-contact__title { font-family: var(--display); color: #fff; font-size: calc(clamp(1.6rem,3.5vw,2.4rem)*var(--display-scale,1)); margin: .3rem 0 1rem; } .jy-contact__note { color: rgba(255,255,255,.9); margin: 0 auto 1.5rem; } .jy-contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .jy-contact__list li { padding: .7rem 1.2rem; border: 1px solid rgba(255,255,255,.4); border-radius: var(--btn-radius); } .jy-contact__list a { color: #fff; } @media (max-width: 760px) { .jy-hero__grid, .jy-about__grid { grid-template-columns: 1fr; } .jy-hero__art, .jy-about__art { order: -1; justify-self: center; } } @media (max-width: 760px) { .zh__grid { grid-template-columns: 1fr; text-align: center; } .zh__stats { justify-items: center; } .zo__grid, .zt__grid { grid-template-columns: 1fr; text-align: center; } .zt__art { order: -1; justify-self: center; } .zadv__row { flex-wrap: wrap; } } /* Декоративні розмиті блоби — глибина в порожніх місцях (кольори теми) */ .hero2, .closing, .features, .lanes { position: relative; } .features, .lanes { overflow: hidden; } .hero2 > .container, .closing > .container, .features > .container, .lanes > .container { position: relative; z-index: 1; } .hero2::before, .hero2::after, .closing::before, .closing::after, .features::before, .lanes::after { content: ""; position: absolute; border-radius: 50%; filter: blur(72px); z-index: 0; pointer-events: none; } .hero2::before { width: calc(360px * var(--blob-scale, 1)); height: calc(360px * var(--blob-scale, 1)); background: var(--accent); top: -140px; left: -90px; opacity: .34; } .hero2::after { width: calc(320px * var(--blob-scale, 1)); height: calc(320px * var(--blob-scale, 1)); background: var(--accent2, var(--accent-dim)); bottom: -150px; right: 6%; opacity: .5; } .closing::before { width: calc(320px * var(--blob-scale, 1)); height: calc(320px * var(--blob-scale, 1)); background: var(--accent2, var(--accent)); top: -120px; right: -80px; opacity: .4; } .closing::after { width: calc(280px * var(--blob-scale, 1)); height: calc(280px * var(--blob-scale, 1)); background: var(--accent); bottom: -120px; left: 4%; opacity: .45; } .features::before{ width: calc(280px * var(--blob-scale, 1)); height: calc(280px * var(--blob-scale, 1)); background: var(--accent2, var(--accent-dim)); top: -100px; right: -60px; opacity: .45; } .lanes::after { width: calc(260px * var(--blob-scale, 1)); height: calc(260px * var(--blob-scale, 1)); background: var(--accent); bottom: -100px; left: -60px; opacity: .3; } /* Іконки playstyle */ .lane { position: relative; overflow: hidden; } .lane__icon { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: .5rem; } @media (max-width: 760px) { .hero2__inner, .closing__inner { grid-template-columns: 1fr; text-align: center; } .hero2__text, .closing__text { margin-inline: auto; } .hero2__art { order: -1; } } /* ---------- About ---------- */ .about__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; max-width: 46ch; } .about__item { position: relative; padding-left: 1.75rem; margin: 0; } .about__item::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.7rem; background: var(--accent); box-shadow: 3px 3px 0 0 var(--accent-dim); } /* ---------- Cards (сітка карток гри) ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; list-style: none; margin: 0 0 1.5rem; padding: 0; } .card__link { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; color: inherit; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } .card__link:hover { border-color: var(--accent); transform: translateY(-3px); } .card__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.9rem; } .card__title { font-size: 1.15rem; margin-bottom: 0.4rem; } .card__tag { display: inline-block; font: 600 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); padding: 0.25rem 0.5rem; margin-bottom: 0.9rem; } .card__meta { font: 0.8rem var(--mono); color: var(--muted); margin-bottom: 0; } /* ---------- Accordion (FAQ, у стилі Preline, без JS — на
) ---------- */ .accordion { border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; } .accordion__trigger::-webkit-details-marker { display: none; } /* Safari */ .accordion__trigger:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; } .accordion__icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--muted); transition: transform 0.2s ease; } .accordion__item[open] .accordion__trigger { color: var(--accent); } .accordion__item[open] .accordion__icon { transform: rotate(180deg); } .accordion__panel { margin: 0; padding: 0 0 1.2rem; color: var(--muted); max-width: 60ch; } /* ---------- Reviews ---------- */ .reviews__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; } .reviews__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin: 0; } .reviews__text { margin: 0 0 0.9rem; } .reviews__author { margin: 0; font: 600 0.8rem var(--mono); letter-spacing: 0.04em; color: var(--muted); } /* ---------- Contact ---------- */ .contact__intro { margin-bottom: 1.5rem; } /* ---------- Prose (довгий текст) ---------- */ .prose { max-width: 40rem; } .prose h2 { margin-top: 2.25em; } .prose h3 { margin-top: 1.75em; } .prose li { margin-bottom: 0.4em; } .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; } .prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-bottom: 1.5rem; } .prose th, .prose td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); } .prose th { font: 600 0.78rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; } .prose code { font: 0.9em var(--mono); background: var(--accent-dim); padding: 0.15em 0.4em; } .prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--accent); color: var(--muted); } /* ---------- Page-head (шапка внутрішніх сторінок) ---------- */ .page-head { padding-block: clamp(2.5rem, 6vw, 3.75rem) 1.5rem; } /* ---------- Game (сторінка гри) ---------- */ .game-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4rem) 1rem; } .game-hero__body { min-width: 0; } .game-hero__title { margin: 0.3rem 0 0.6rem; } .game-hero__body .lead { max-width: none; margin-bottom: 0.9rem; } .game-hero__media { margin: 0; display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 2.75rem); background: radial-gradient(120% 120% at 30% 20%, var(--accent-dim), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.5); box-shadow: 0 28px 55px -28px rgba(0,0,0,.45); } .game-hero__media img { width: min(300px, 100%); aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0,0,0,.22)); } @media (max-width: 760px) { .game-hero { grid-template-columns: 1fr; gap: 1.75rem; } .game-hero__media { order: -1; } .game-hero__media img { width: min(240px, 70%); } } .specs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; padding: 0; border: 0; } .specs__item { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.5rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; } .specs__label { margin: 0; font: 600 0.65rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .specs__value { margin: 0; font-weight: 600; font-size: 0.9rem; } .game__body { margin-top: clamp(2rem, 5vw, 3rem); } /* Вторинне посилання «де пограти» — інформативна виноска, не CTA */ .game__where { margin: 2.5rem 0 0; padding: 0.95rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); font-size: 0.9rem; color: var(--muted); } .game__where a { color: var(--ink); font-weight: 600; } /* ---------- Pager (перехід між іграми) ---------- */ .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .pager__link { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .pager__link:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--accent-dim); text-decoration: none; } .pager__link--next { text-align: right; } .pager__dir { font: 600 0.65rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .pager__name { font-weight: 700; } @media (max-width: 560px) { .pager { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .footer { margin-top: clamp(3rem, 8vw, 5rem); background: var(--surface); border-top: 1px solid var(--line); padding-block: 2.5rem 1.75rem; } .footer__top { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); } .footer__brand { font-weight: 800; margin: 0 0 0.25rem; } .footer__note { color: var(--muted); font-size: 0.95rem; margin: 0; } .footer__menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; } .footer__link { color: var(--muted); text-decoration: none; } .footer__link:hover { color: var(--ink); text-decoration: underline; } .footer__copyright { margin: 1.25rem 0 0; font: 0.8rem var(--mono); color: var(--muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ===== Рухома стрічка (marquee), cookie-банер, легкі анімації ===== */ /* Трек = 4 однакові рядки; зсув рівно на -25% (один рядок) -> безшовна петля. 4 рядки означають, що навіть у кінці циклу 3 рядки лишаються у в'юпорті, тому проміжку не видно на жодній ширині екрана (до 4K). */ .ticker__track { display: flex; width: max-content; will-change: transform; animation: marquee 40s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__row { flex: 0 0 auto; display: inline-flex; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } } /* Плавна поява героя при завантаженні */ .hero2__inner, .zh__grid, .xv-hero__grid, .jy-hero__grid { animation: rise .6s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Cookie-банер (за дизайном референсу: акцентна картка + Accept All / Cookie Settings) */ .cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 560px; margin-inline: auto; background: var(--accent); color: #fff; border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: 0 16px 50px rgba(0,0,0,.3); animation: rise .35s ease both; } .cookie__title { font-family: var(--display); font-size: 1.5rem; margin: 0 0 .5rem; color: #fff; } .cookie__text { margin: 0 0 1.1rem; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.92); } .cookie__actions { display: flex; flex-wrap: wrap; gap: .6rem; } .cookie__btn { font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; padding: .6rem 1.3rem; border-radius: var(--btn-radius); text-decoration: none; display: inline-block; border: 1px solid transparent; } .cookie__btn--accept { background: #fff; color: var(--accent); } .cookie__btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } /* Scroll-reveal (додається JS; без JS секції видимі одразу) */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ DESIGN DNA — цілісні дизайн-системи на домен (не лише колір). Спільні компоненти читають --card-* токени; клас body.dna-* задає узгоджений набір -> компоненти виглядають як різні дизайн-мови, а не перефарбований однаковий скелет. ============================================================ */ /* Усі картко-подібні поверхні беруть вигляд із DNA-токенів */ .feature, .review2, .card__link, .zfaq__item, .jy-lane, .contact2__item { border: var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); border-radius: var(--card-radius); } /* Кнопка теж підкоряється DNA (тінь може бути прибрана/зсунута) */ .button { box-shadow: var(--btn-style-shadow); } /* --- Архетипи (значення токенів; фактичні шрифти/палітра приходять із :root домену) --- */ /* Брутал: жирна чорна рамка, жорстка зсунута тінь, гострі кути, CAPS */ body.dna-brutalist { --card-border: 3px solid var(--ink); --card-bg: var(--paper); --card-shadow: 6px 6px 0 var(--ink); --card-radius: 0px; --head-transform: uppercase; --head-spacing: -0.01em; --head-weight: 800; --btn-style-shadow: 5px 5px 0 var(--ink); } /* Swiss-мінімал: тонкі лінії, без тіней, гострі кути, щільний трекінг */ body.dna-swiss { --card-border: 1px solid var(--line); --card-bg: transparent; --card-shadow: none; --card-radius: 0px; --head-transform: none; --head-spacing: -0.035em; --head-weight: 700; --btn-style-shadow: none; } /* Редакторський: без рамок, мʼяка тінь, великі радіуси, спокійні заголовки */ body.dna-editorial { --card-border: 0; --card-bg: var(--surface); --card-shadow: 0 12px 34px rgba(0,0,0,.08); --card-radius: 22px; --head-transform: none; --head-spacing: -0.02em; --head-weight: 700; --btn-style-shadow: none; } /* М'який поп: тонована заливка, дуже круглі кути, мʼяке свічення */ body.dna-soft-pop { --card-border: 0; --card-bg: var(--accent-dim); --card-shadow: 0 10px 30px rgba(0,0,0,.06); --card-radius: 28px; --head-transform: none; --head-spacing: -0.02em; --head-weight: 800; --btn-style-shadow: none; } /* Нео-ретро: подвійна рамка кольору тексту, кольорова зсунута тінь */ body.dna-neo-retro { --card-border: 2px solid var(--ink); --card-bg: var(--surface); --card-shadow: 4px 4px 0 var(--accent); --card-radius: 14px; --head-transform: none; --head-spacing: -0.02em; --head-weight: 800; --btn-style-shadow: 4px 4px 0 var(--accent); } /* Люкс-серіф: лише нижня лінія, без заливки й тіней, легкі заголовки */ body.dna-luxe { --card-border: 0; --card-bg: transparent; --card-shadow: inset 0 -1px 0 var(--line); --card-radius: 0px; --head-transform: none; --head-spacing: 0em; --head-weight: 600; --btn-style-shadow: none; } /* Техно: рамка акценту, без тіней, монорегістр CAPS, широкий трекінг */ body.dna-techno { --card-border: 1px solid var(--accent); --card-bg: var(--surface); --card-shadow: none; --card-radius: 6px; --head-transform: uppercase; --head-spacing: 0.04em; --head-weight: 700; --btn-style-shadow: none; } /* Глянець: без рамок, велика мʼяка тінь, пігулки-кути */ body.dna-glossy { --card-border: 0; --card-bg: var(--surface); --card-shadow: 0 22px 50px -20px rgba(0,0,0,.35); --card-radius: 26px; --head-transform: none; --head-spacing: -0.025em; --head-weight: 800; --btn-style-shadow: 0 14px 30px -12px var(--accent); } /* Журнал: без заливки, тонка верхня лінія, стримані заголовки */ body.dna-magazine { --card-border: 0; --card-bg: transparent; --card-shadow: inset 0 2px 0 var(--ink); --card-radius: 0px; --head-transform: none; --head-spacing: -0.02em; --head-weight: 700; --btn-style-shadow: none; } /* Органік: без рамок, дуже круглі кути, мʼяка тінь, теплі заголовки */ body.dna-organic { --card-border: 0; --card-bg: var(--surface); --card-shadow: 0 14px 34px rgba(0,0,0,.07); --card-radius: 34px; --head-transform: none; --head-spacing: -0.015em; --head-weight: 700; --btn-style-shadow: none; } /* --- Декоративні мотиви фону (дуже делікатні, за контентом) --- */ body.motif-dots::before, body.motif-grid::before, body.motif-diagonal::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; } body.motif-dots::before { background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px); background-size: 22px 22px; } body.motif-grid::before { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; opacity: .35; } body.motif-diagonal::before { background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 16px); opacity: .25; } :root{color-scheme:light;--ink:#1a1d23;--muted:#5e6778;--paper:#f7f8fb;--surface:#ffffff;--line:#dfe3ec;--accent:#295dc7;--accent-dim:#dfe8fb;--sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--display:"Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--display-scale:1.0;--radius:16px;--btn-radius:16px;--btn-shadow:0 10px 30px #295dc72e;--btn-shadow-active:0 5px 16px #295dc72e;--accent2:#d5bd34;--blob-scale:0.93;--grad-angle:153deg;}