/* theme: alavesta (base + fx + palette inlined) */ /* ============================================================================ * theme/_base.css — reset + базовые токены + примитивы (btn, container). * Импортится первым в любой theme/{name}.css. * Подключает theme/_fx.css (визуальный слой 2026). * ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; /* учёт sticky-nav при якорной навигации */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.65rem 1rem; background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--radius-md, 10px); text-decoration: none; font-weight: 600; box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,.15)); } body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, picture { max-width: 100%; height: auto; display: block; } a { color: var(--c-primary); text-underline-offset: 3px; } a:hover { color: var(--c-accent); } a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-text); margin: 0 0 var(--space-2); line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: var(--fs-1); font-weight: 700; } h2 { font-size: var(--fs-2); font-weight: 700; } h3 { font-size: var(--fs-3); font-weight: 600; } p { margin: 0 0 var(--space-2); max-width: 70ch; } ul, ol { margin: 0 0 var(--space-2); padding-left: 1.25rem; } ::selection { background: color-mix(in srgb, var(--c-primary) 30%, transparent); color: var(--c-text); } .container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .container--narrow { width: min(100% - 2rem, 880px); margin-inline: auto; } .container--wide { width: min(100% - 2rem, 1360px); margin-inline: auto; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.4rem; border-radius: var(--radius-md); font: 600 var(--fs-body)/1 var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; user-select: none; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); } .btn-ghost:hover { background: var(--c-surface); } .btn-link { display: inline-flex; align-items: center; gap: 0.35rem; font: 600 var(--fs-body)/1 var(--font-body); color: var(--c-primary); text-decoration: none; background: none; border: none; padding: 0.5rem 0; cursor: pointer; transition: color 0.2s ease, gap 0.2s ease; } .btn-link:hover { color: var(--c-accent); gap: 0.45rem; } /* Density modifier (set via ) */ body[data-density="compact"] { --density: 0.85; } body[data-density="regular"] { --density: 1; } body[data-density="airy"] { --density: 1.2; } /* Section spacing helper (переопределяется style-overlay'ями в _fx.css) */ section { padding-block: calc(var(--space-5) * var(--density, 1)); } section > .container { display: grid; gap: var(--space-3); } /* Visually hidden (a11y) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* === LANDINGS-STUDIO FX LAYER ==================================================== * Декоративные примитивы и три графических стиля. * Подключается из theme/_base.css первым. * * Архитектура: * 1. fx-* utility classes — добавляются на секцию или элемент любым блоком. * 2. body[data-style="editorial|rich|brutal"] — глобальный графический стиль. * 3. body[data-niche="..."] — нишевые акценты сверху стиля. * * В content.json -> theme: { palette, style, font_pair, density, decor[] } * ========================================================================= */ /* ---------- 1. ДЕКОРАТИВНЫЕ УТИЛИТЫ ----------------------------------------- */ /* Точечная сетка (мягкий dot-pattern фоном). */ .fx-dots { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--c-text) 12%, transparent) 1px, transparent 0); background-size: 24px 24px; } /* Линейная сетка (modern grid background). */ .fx-grid { background-image: linear-gradient(to right, color-mix(in srgb, var(--c-text) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--c-text) 6%, transparent) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; } /* Шумовая фактура поверх (через ::after, изолируется). */ .fx-noise { position: relative; isolation: isolate; } .fx-noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; } .fx-noise > * { position: relative; z-index: 1; } /* Mesh-градиент (несколько радиалов в палитре). */ .fx-mesh { background-color: var(--c-bg); background-image: radial-gradient(at 18% 22%, color-mix(in oklab, var(--c-primary) 22%, transparent) 0%, transparent 55%), radial-gradient(at 82% 8%, color-mix(in oklab, var(--c-accent) 18%, transparent) 0%, transparent 60%), radial-gradient(at 96% 92%, color-mix(in oklab, var(--c-primary) 14%, transparent) 0%, transparent 60%), radial-gradient(at 10% 90%, color-mix(in oklab, var(--c-accent) 10%, transparent) 0%, transparent 55%); } /* Тёплый mesh — оранжево/янтарный (horeca, beauty, cozy). */ .fx-mesh--warm { background-color: var(--c-bg); background-image: radial-gradient(at 12% 18%, color-mix(in oklab, var(--c-primary) 30%, transparent) 0%, transparent 55%), radial-gradient(at 88% 16%, color-mix(in oklab, var(--c-accent) 22%, transparent) 0%, transparent 60%), radial-gradient(at 80% 90%, color-mix(in oklab, var(--c-primary) 16%, transparent) 0%, transparent 65%); } /* Холодный mesh — голубо/лиловый (medical, saas, corporate). */ .fx-mesh--cool { background-color: var(--c-bg); background-image: radial-gradient(at 22% 0%, color-mix(in oklab, var(--c-primary) 18%, transparent) 0%, transparent 55%), radial-gradient(at 90% 30%, color-mix(in oklab, var(--c-accent) 20%, transparent) 0%, transparent 60%), radial-gradient(at 50% 100%, color-mix(in oklab, var(--c-primary) 10%, transparent) 0%, transparent 60%); } /* Tемный mesh с глоу (neon, auto, gaming). */ .fx-mesh--glow { background-color: var(--c-bg); background-image: radial-gradient(at 25% 20%, color-mix(in oklab, var(--c-primary) 38%, transparent) 0%, transparent 55%), radial-gradient(at 78% 12%, color-mix(in oklab, var(--c-accent) 32%, transparent) 0%, transparent 55%), radial-gradient(at 50% 90%, color-mix(in oklab, var(--c-primary) 22%, transparent) 0%, transparent 60%); } /* Размытые декоративные блобы (top-right / bottom-left). */ .fx-blob, .fx-blob-tr, .fx-blob-bl { position: relative; isolation: isolate; } .fx-blob-tr::before, .fx-blob-bl::before, .fx-blob::before { content: ""; position: absolute; pointer-events: none; z-index: -1; width: 56vmax; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--c-primary) 35%, transparent), transparent 65%); filter: blur(60px); opacity: .85; } .fx-blob-tr::before { top: -28vmax; right: -22vmax; } .fx-blob-bl::before { bottom: -28vmax; left: -22vmax; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--c-accent) 35%, transparent), transparent 65%); } .fx-blob::before { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Glassmorphism-карточка. */ .fx-glass { background: color-mix(in srgb, var(--c-bg) 62%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); } /* Crisp-card — резкая карточка для brutal-стиля. */ .fx-crisp { background: var(--c-bg); border: 2px solid var(--c-text); border-radius: var(--radius-sm); box-shadow: 4px 4px 0 0 var(--c-text); transition: transform .15s ease, box-shadow .15s ease; } .fx-crisp:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--c-text); } /* Soft-card — типичная rich-карточка с мягкой тенью и градиентным бордером на hover. */ .fx-soft { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .fx-soft:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); } /* Editorial-карточка — почти бесшовная, граница как акцент при hover. */ .fx-flat { background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: background-color .25s ease, border-color .25s ease; } .fx-flat:hover { background: var(--c-surface); border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); } /* ---------- 2. БОЛЬШАЯ РЕДАКТОРСКАЯ ТИПОГРАФИКА ----------------------------- */ .fx-display { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw + 1rem, 6.5rem); line-height: .96; letter-spacing: -0.035em; font-weight: 700; } .fx-headline { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw + 0.75rem, 4.5rem); line-height: 1; letter-spacing: -0.03em; font-weight: 700; } .fx-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font: 600 var(--fs-small)/1 var(--font-mono, ui-monospace, "JetBrains Mono", monospace); text-transform: uppercase; letter-spacing: .12em; color: var(--c-primary); } .fx-eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; } /* Текст с градиентом (используется как акцент в заголовке). */ .fx-gradient-text { background: linear-gradient(110deg, var(--c-primary), var(--c-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Акцентное слово сплошным цветом (Reg.ru / конструкторы) */ .fx-mark { font-style: normal; font-weight: 700; color: var(--c-primary); } /* ---------- 3. TICKER / MARQUEE --------------------------------------------- */ .fx-ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .fx-ticker__track { display: flex; gap: var(--space-4); width: max-content; animation: fx-ticker-scroll 32s linear infinite; will-change: transform; } .fx-ticker:hover .fx-ticker__track { animation-play-state: paused; } .fx-ticker--reverse .fx-ticker__track { animation-direction: reverse; } .fx-ticker--fast .fx-ticker__track { animation-duration: 18s; } .fx-ticker__item { white-space: nowrap; display: inline-flex; align-items: center; gap: .85rem; } .fx-ticker__item::after { content: "★"; color: color-mix(in srgb, var(--c-primary) 80%, transparent); font-size: .8em; } @keyframes fx-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- 3b. LIGHTBOX (портфолио, галереи) -------------------------------- */ .fx-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: var(--space-3); } body.is-lightbox-open { overflow: hidden; } body.is-lightbox-open .b-marquee, body.is-lightbox-open .fx-ticker { visibility: hidden; } .fx-lightbox[hidden] { display: none !important; } .fx-lightbox.is-open { display: grid; } .fx-lightbox__backdrop { position: absolute; inset: 0; border: none; background: rgba(17, 19, 24, 0.82); cursor: pointer; } .fx-lightbox__dialog { position: relative; z-index: 1; width: min(100%, 1100px); max-height: min(92vh, 900px); display: grid; gap: var(--space-2); } .fx-lightbox__close { position: absolute; top: -0.25rem; right: 0; z-index: 2; width: 2.5rem; height: 2.5rem; border: none; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.95); color: var(--c-text); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); } .fx-lightbox__figure { margin: 0; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); } .fx-lightbox__img { display: block; width: 100%; max-height: min(78vh, 720px); object-fit: contain; background: #f4f6f8; } .fx-lightbox__caption { padding: 0.75rem 1rem; font-size: var(--fs-small); color: var(--c-muted); text-align: center; background: #fff; } /* ---------- 4. SCROLL-REVEAL (управляется JS .is-visible) -------------------- */ [data-reveal] { opacity: 0; transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; } [data-reveal="up"] { transform: translateY(28px); } [data-reveal="down"] { transform: translateY(-28px); } [data-reveal="left"] { transform: translateX(-28px); } [data-reveal="right"] { transform: translateX(28px); } [data-reveal="zoom"] { transform: scale(.96); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } [data-reveal-delay="4"] { transition-delay: .32s; } [data-reveal-delay="5"] { transition-delay: .40s; } [data-reveal-delay="6"] { transition-delay: .48s; } /* ---------- 5. ДЕКОРАТИВНЫЕ РАЗДЕЛИТЕЛИ ------------------------------------- */ .fx-divider-wave { position: relative; } .fx-divider-wave::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; pointer-events: none; background: var(--c-bg); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat 0 0 / 100% 100%; mask: url("data:image/svg+xml;utf8,") no-repeat 0 0 / 100% 100%; } /* ---------- 6. BENTO ГРИД (универсальный класс) ----------------------------- */ .fx-bento { display: grid; gap: var(--space-3); grid-template-columns: 1fr; grid-auto-rows: minmax(180px, auto); } @media (min-width: 720px) { .fx-bento { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .fx-bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); } } .fx-bento > .fx-bento-item { grid-column: span 1; } @media (min-width: 720px) { .fx-bento > .fx-bento-item--lg { grid-column: span 4; grid-row: span 2; } .fx-bento > .fx-bento-item--md { grid-column: span 2; grid-row: span 1; } .fx-bento > .fx-bento-item--sm { grid-column: span 2; grid-row: span 1; } .fx-bento > .fx-bento-item--tall { grid-column: span 2; grid-row: span 2; } .fx-bento > .fx-bento-item--wide { grid-column: span 4; grid-row: span 1; } } @media (min-width: 1024px) { .fx-bento > .fx-bento-item--lg { grid-column: span 4; grid-row: span 2; } .fx-bento > .fx-bento-item--md { grid-column: span 2; grid-row: span 1; } .fx-bento > .fx-bento-item--sm { grid-column: span 2; grid-row: span 1; } .fx-bento > .fx-bento-item--tall { grid-column: span 2; grid-row: span 2; } .fx-bento > .fx-bento-item--wide { grid-column: span 4; grid-row: span 1; } } /* ============================================================================ * 7. ГРАФИЧЕСКИЕ СТИЛИ — body[data-style="..."] * Один сайт = один стиль. Стиль задаёт характер карточек, кнопок, акцентов. * ========================================================================== */ /* ---- EDITORIAL — Tilda-flavor: воздух, крупная типо, минимум теней --------- */ body[data-style="editorial"] { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px color-mix(in srgb, var(--c-text) 5%, transparent); --shadow-md: 0 6px 18px color-mix(in srgb, var(--c-text) 7%, transparent); } body[data-style="editorial"] section { padding-block: calc(5rem * var(--density, 1)); } @media (min-width: 1024px) { body[data-style="editorial"] section { padding-block: calc(7rem * var(--density, 1)); } } body[data-style="editorial"] .b-hero__title, body[data-style="editorial"] h1 { font-size: clamp(2.5rem, 6vw + 1rem, 5.25rem); letter-spacing: -0.035em; line-height: 1; } body[data-style="editorial"] h2 { font-size: clamp(1.875rem, 3.5vw + 1rem, 3rem); letter-spacing: -0.025em; } body[data-style="editorial"] .btn { border-radius: var(--radius-md); padding: 1rem 1.5rem; } body[data-style="editorial"] .btn-primary { box-shadow: none; } body[data-style="editorial"] .b-services__card, body[data-style="editorial"] .b-features__item, body[data-style="editorial"] .b-pricing__plan, body[data-style="editorial"] .b-portfolio__card { border-radius: var(--radius-lg); box-shadow: none; border: 1px solid var(--c-border); } body[data-style="editorial"] .b-services__card:hover, body[data-style="editorial"] .b-features__item:hover, body[data-style="editorial"] .b-portfolio__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ---- RICH — Apple/SaaS bento: насыщенные карточки, мягкие тени, градиенты --- */ body[data-style="rich"] { --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 3px color-mix(in srgb, var(--c-text) 6%, transparent); --shadow-md: 0 12px 36px color-mix(in srgb, var(--c-text) 12%, transparent); --shadow-lg: 0 24px 60px color-mix(in srgb, var(--c-text) 16%, transparent); } body[data-style="rich"] .btn-primary { background-image: linear-gradient(110deg, var(--c-primary), color-mix(in oklab, var(--c-accent) 70%, var(--c-primary))); box-shadow: 0 8px 24px color-mix(in srgb, var(--c-primary) 35%, transparent); } body[data-style="rich"] .btn-primary:hover { box-shadow: 0 14px 36px color-mix(in srgb, var(--c-primary) 45%, transparent); } body[data-style="rich"] .b-services__card, body[data-style="rich"] .b-features__item, body[data-style="rich"] .b-pricing__plan, body[data-style="rich"] .b-portfolio__card { border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 100%, transparent), color-mix(in srgb, var(--c-surface) 60%, transparent)), var(--c-bg); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body[data-style="rich"] .b-services__card:hover, body[data-style="rich"] .b-features__item:hover, body[data-style="rich"] .b-portfolio__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); } body[data-style="rich"] .b-hero { background: radial-gradient(ellipse 90% 60% at 80% 0%, color-mix(in oklab, var(--c-primary) 12%, transparent), transparent 60%), radial-gradient(ellipse 70% 50% at 0% 100%, color-mix(in oklab, var(--c-accent) 8%, transparent), transparent 60%), var(--c-bg); } /* ---- BRUTAL — резкие границы, моно-акценты, чёрные карточки-сдвиги ---------- */ body[data-style="brutal"] { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 8px; --shadow-sm: 3px 3px 0 0 var(--c-text); --shadow-md: 5px 5px 0 0 var(--c-text); --shadow-lg: 8px 8px 0 0 var(--c-text); --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "Menlo", monospace; } body[data-style="brutal"] h1, body[data-style="brutal"] h2 { letter-spacing: -0.02em; } body[data-style="brutal"] .btn { border-radius: var(--radius-md); border: 2px solid var(--c-text); font-weight: 700; padding: 0.85rem 1.4rem; } body[data-style="brutal"] .btn-primary { box-shadow: 4px 4px 0 0 var(--c-text); } body[data-style="brutal"] .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--c-text); } body[data-style="brutal"] .btn-ghost { background: var(--c-bg); box-shadow: 4px 4px 0 0 var(--c-text); } body[data-style="brutal"] .b-services__card, body[data-style="brutal"] .b-features__item, body[data-style="brutal"] .b-pricing__plan, body[data-style="brutal"] .b-portfolio__card { border-radius: var(--radius-md); border: 2px solid var(--c-text); background: var(--c-bg); box-shadow: 4px 4px 0 0 var(--c-text); transition: transform .15s ease, box-shadow .15s ease; } body[data-style="brutal"] .b-services__card:hover, body[data-style="brutal"] .b-features__item:hover, body[data-style="brutal"] .b-portfolio__card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--c-text); } body[data-style="brutal"] .b-pricing__plan.is-highlighted { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); } body[data-style="brutal"] .b-pricing__plan.is-highlighted * { color: inherit; } body[data-style="brutal"] .fx-eyebrow { color: var(--c-text); border: 1px solid var(--c-text); padding: .25rem .55rem; border-radius: 0; } body[data-style="brutal"] .fx-eyebrow::before { display: none; } body[data-style="brutal"] .b-nav { border-bottom: 2px solid var(--c-text); background: var(--c-bg); backdrop-filter: none; } /* ============================================================================ * 8. РЕАКЦИЯ НА prefers-reduced-motion * ========================================================================== */ @media (prefers-reduced-motion: reduce) { .fx-ticker__track { animation: none; } [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================================ * 9. COOKIE NOTICE * ========================================================================== */ .fx-cookie { position: fixed; inset: auto 0 0 0; z-index: 99990; padding: var(--space-2); pointer-events: none; } .fx-cookie:not([hidden]) { pointer-events: auto; } .fx-cookie__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: color-mix(in oklab, var(--c-bg) 92%, transparent); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); } .fx-cookie__text { margin: 0; font-size: var(--fs-small); color: var(--c-muted); line-height: 1.5; max-width: 52ch; } .fx-cookie__text a { color: var(--c-accent); font-weight: 600; } .fx-cookie__accept { flex-shrink: 0; padding: 0.65rem 1.25rem; font-size: var(--fs-small); } /* ============================================================================ * theme/alavesta.css — Веб-студия Алавеста. * Светлая палитра: белый, серый, синий акцент, чёрный текст. * Recommended: { style: "rich", font_pair: "inter", decor: ["mesh-cool", "blob-tr"] } * ========================================================================== */ :root { --container-max: 90rem; --container-gutter: clamp(1rem, 3vw, 2.5rem); --c-bg: #ffffff; --c-surface: #f4f6f9; --c-surface-2: #e8edf3; --c-text: #111318; --c-muted: #5c6570; --c-primary: #1c1917; --c-on-primary: #ffffff; --c-accent: #c2410c; --c-success: #16a34a; --c-danger: #dc2626; --c-border: #dde3eb; --font-display: "Onest", "Inter", system-ui, -apple-system, sans-serif; --font-body: "Onest", "Inter", system-ui, -apple-system, sans-serif; --fs-1: clamp(2rem, 4.5vw + 0.85rem, 3.25rem); --fs-2: clamp(1.5rem, 2.2vw + 0.75rem, 2.25rem); --fs-3: clamp(1.05rem, 0.9vw + 0.85rem, 1.25rem); --fs-body: clamp(0.9375rem, 0.3vw + 0.88rem, 1.0625rem); --fs-small: 0.8125rem; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.06); --shadow-md: 0 8px 24px rgba(17, 19, 24, 0.08); --shadow-lg: 0 20px 48px rgba(28, 25, 23, 0.12); --density: 1; } html { color-scheme: light; } ::selection { background: var(--c-primary); color: var(--c-on-primary); } body[data-palette="alavesta"] .container { width: min(100% - var(--container-gutter), var(--container-max)); } @media (min-width: 1680px) { body[data-palette="alavesta"] { --container-max: 96rem; --container-gutter: clamp(1.5rem, 4vw, 3rem); } } @media (min-width: 1920px) { body[data-palette="alavesta"] { --container-max: 100rem; } } body[data-palette="alavesta"] h1, body[data-palette="alavesta"] h2, body[data-palette="alavesta"] h3, body[data-palette="alavesta"] h4 { font-family: var(--font-body); letter-spacing: -0.02em; } body[data-palette="alavesta"] .fx-noise::after { opacity: 0.2; mix-blend-mode: multiply; } body[data-palette="alavesta"] .b-hero, body[data-niche="studio"] .b-hero { background: radial-gradient(ellipse 70% 50% at 92% 8%, rgba(194, 65, 12, 0.08), transparent 55%), radial-gradient(ellipse 55% 45% at 4% 92%, rgba(28, 25, 23, 0.06), transparent 55%), var(--c-bg); } body[data-palette="alavesta"] .b-nav, body[data-niche="studio"] .b-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-bottom-color: var(--c-border); } body[data-palette="alavesta"] .b-marquee--primary, body[data-niche="studio"] .b-marquee--primary { background: linear-gradient(90deg, #1c1917, #c2410c); border-color: transparent; } body[data-palette="alavesta"] section.b-services, body[data-palette="alavesta"] section.b-features, body[data-palette="alavesta"] section.b-process, body[data-palette="alavesta"] section.b-pricing { background: var(--c-bg); } body[data-palette="alavesta"] section.b-portfolio { background: var(--c-surface); } body[data-palette="alavesta"] section.b-stats { background: var(--c-surface-2); } body[data-palette="alavesta"] .fx-mark, body[data-palette="alavesta"] .b-hero h1 em { font-style: normal; font-weight: 700; color: var(--c-accent); } body[data-palette="alavesta"] .b-marquee--primary .fx-ticker__item { font-weight: 500; letter-spacing: 0.03em; } body[data-palette="alavesta"] .b-services--bento .b-services__card { padding: var(--space-3); min-height: 0; } body[data-palette="alavesta"] .b-services--bento .b-services__card[data-cell="lg"]::after { display: none; } body[data-palette="alavesta"] section.b-pricing { padding-bottom: var(--space-2); } body[data-palette="alavesta"] section.b-pricing > .container { gap: var(--space-2); } body[data-palette="alavesta"] .b-pricing__note { margin-top: var(--space-1); margin-bottom: 0; } body[data-palette="alavesta"] section.b-cta { padding-top: var(--space-2); } body[data-palette="alavesta"] .b-footer--compact { padding-block: var(--space-2); } body[data-palette="alavesta"] .b-footer { padding-block: var(--space-3); background: var(--c-surface); border-top: 2px solid var(--c-border); box-shadow: none; } body[data-palette="alavesta"] .b-footer > .container { gap: var(--space-2); } body[data-palette="alavesta"] .b-footer__contact { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: none; background: var(--c-bg); } body[data-palette="alavesta"] .b-portfolio--grid-2 .b-portfolio__card--construction .b-portfolio__link::after, body[data-palette="alavesta"] .b-portfolio--grid-2 .b-portfolio__card--construction .b-portfolio__preview::after { display: none; } body[data-palette="alavesta"] .b-portfolio--grid-2 .b-portfolio__card--construction .b-portfolio__preview img { opacity: 1; filter: none; }