/* ============================================================ SHOP.CSS — общая тема + страница шрифта + корзина. Тема: БЕЛЫЙ фон + ЭЛЕКТРИК-СИНИЙ #1428db (основной и акценты), необрутализм. Цветного «третьего» акцента нет: инверсные секции = синие блоки с белым текстом. Шрифты: JetBrains Mono — ЕДИНЫЙ шрифт всего сайта (UI, текст, заголовки, числа). Товар-специмены сохраняют свой шрифт: Choowee/Zord/Footwork/Ukol/Fastlad (слова-образцы, hero-имя). Острые углы (radius 0). Все токены — в :root ниже. ============================================================ */ /* ============ ЛОКАЛЬНЫЕ ШРИФТЫ ВОВЫ (реальные OTF/WOFF2) ============ */ /* Choowee — главный шрифт сайта: бренд, заголовки, hero. Вариативный (wght 100-800). */ @font-face { font-family: "Choowee"; src: url("../fonts/choowee-vf.woff2") format("woff2"), url("../fonts/choowee-vf.woff") format("woff"); font-weight: 100 800; font-display: swap; } /* Zord — вариативный дисплей-капс (оси wght 100-500, slnt, Vrtc). Латиница+кириллица заглавные. */ @font-face { font-family: "Zord"; src: url("../fonts/zord.woff2") format("woff2"), url("../fonts/zord.woff") format("woff"); font-weight: 100 500; font-display: swap; } @font-face { font-family: "Ukol"; src: url("../fonts/ukol-regular.woff2") format("woff2"), url("../fonts/ukol-regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Ukol Blured"; src: url("../fonts/ukol-blured.woff2") format("woff2"), url("../fonts/ukol-blured.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Footwork"; src: url("../fonts/footwork.woff2") format("woff2"), url("../fonts/footwork.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Fastlad"; src: url("../fonts/fastlad.woff2") format("woff2"), url("../fonts/fastlad.otf") format("opentype"); font-weight: 400; font-display: swap; } /* Vinograd — рукописный скрипт, 4 начертания (бесплатный) */ @font-face { font-family: "Vinograd"; src: url("../fonts/vinograd-regular.woff2") format("woff2"), url("../fonts/vinograd-regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Vinograd Oblique"; src: url("../fonts/vinograd-oblique.woff2") format("woff2"), url("../fonts/vinograd-oblique.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Vinograd Filled"; src: url("../fonts/vinograd-filled.woff2") format("woff2"), url("../fonts/vinograd-filled.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Vinograd Filled Oblique"; src: url("../fonts/vinograd-filled-oblique.woff2") format("woff2"), url("../fonts/vinograd-filled-oblique.otf") format("opentype"); font-weight: 400; font-display: swap; } /* Shnobel — угловатый дисплей, 2 начертания (бесплатный) */ @font-face { font-family: "Shnobel"; src: url("../fonts/shnobel-regular.woff2") format("woff2"), url("../fonts/shnobel-regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Shnobel Oblique"; src: url("../fonts/shnobel-oblique.woff2") format("woff2"), url("../fonts/shnobel-oblique.otf") format("opentype"); font-weight: 400; font-display: swap; } /* Lazymarker — маркерный капс (в работе) */ @font-face { font-family: "Lazymarker"; src: url("../fonts/lazymarker.woff2") format("woff2"), url("../fonts/lazymarker.otf") format("opentype"); font-weight: 400; font-display: swap; } /* Soviet — плакатный гротеск, 7 начертаний-ширин (в работе) */ @font-face { font-family: "Soviet"; src: url("../fonts/soviet-regular.woff2") format("woff2"), url("../fonts/soviet-regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Soviet Bold"; src: url("../fonts/soviet-bold.woff2") format("woff2"), url("../fonts/soviet-bold.otf") format("opentype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Soviet Black"; src: url("../fonts/soviet-black.woff2") format("woff2"), url("../fonts/soviet-black.otf") format("opentype"); font-weight: 900; font-display: swap; } @font-face { font-family: "Soviet Bold Extended"; src: url("../fonts/soviet-bold-extended.woff2") format("woff2"), url("../fonts/soviet-bold-extended.otf") format("opentype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Soviet Condensed"; src: url("../fonts/soviet-condensed.woff2") format("woff2"), url("../fonts/soviet-condensed.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Soviet Expanded"; src: url("../fonts/soviet-expanded.woff2") format("woff2"), url("../fonts/soviet-expanded.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Soviet Super Expanded"; src: url("../fonts/soviet-super-expanded.woff2") format("woff2"), url("../fonts/soviet-super-expanded.otf") format("opentype"); font-weight: 400; font-display: swap; } /* Spukies — тонкая дисплей-антиква (в работе) */ @font-face { font-family: "Spukies"; src: url("../fonts/spukies.woff2") format("woff2"), url("../fonts/spukies.otf") format("opentype"); font-weight: 400; font-display: swap; } :root { /* палитра: строго белый фон + ЭЛЕКТРИК-СИНИЙ (основной и акценты). Чёрного НЕТ. */ --blue: #1428db; /* электрик-синий — основной цвет */ --blue-2: #0d1c9e; /* темнее — hover/насыщение */ --ink: #1428db; /* инверсные секции — синие блоки */ --ink-2: #0d1c9e; /* hover тёмных элементов */ --paper: #ffffff; /* белый */ --bg: #ffffff; /* фон ВСЕГДА чисто белый */ --bg-2: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --line: #c2c9f7; /* тонкие линии — светлый синий */ --line-strong:#1428db; /* брутал-границы (электрик-синий) */ --text: #1428db; /* основной текст — электрик-синий */ --muted: #4a55c8; /* secondary — приглушённый синий */ --muted-2: #5f6ad8; /* tertiary / метки — светлее синий (4.63:1 на белом — WCAG AA) */ --accent: #1428db; /* ЭЛЕКТРИК-СИНИЙ — акценты (кнопки, выделение, em) */ --accent-2: #0d1c9e; /* hover синего акцента */ --accent-ink:#ffffff; /* текст поверх синего — белый */ --yellow: #ffe600; /* ТОЧЕЧНЫЙ жёлтый (~2% площади): бейдж Experimental, вспышка глитча, летающая надпись. НЕ третий цвет темы! */ --maxw: 1400px; --pad: clamp(1.25rem, 4vw, 4rem); --ease: cubic-bezier(0.16, 1, 0.3, 1); --radius: 0px; --nav-h: 68px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Сайт шрифтовой студии: НИКОГДА не показываем синтетические начертания. Если запрошенного веса/курсива нет в файле шрифта — браузер обязан показать то, что есть, а не «дорисовывать» (faux bold = дубли букв в Safari). */ font-synthesis: none; } body { background: var(--bg); color: var(--text); font-family: "JetBrains Mono", monospace; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--ink); color: var(--paper); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { display: block; max-width: 100%; } /* доступность: видимое кольцо фокуса с клавиатуры (мышиный клик его не вызывает) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn:focus-visible, .chip:focus-visible, .lic-opt:focus-visible { outline-offset: 5px; } /* активный пункт навигации */ .nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; } /* типографика: убираем висячие одинокие слова в конце абзацев */ p { text-wrap: pretty; } /* skip-link: скрыт, выезжает при фокусе с клавиатуры (брутал-блок) */ .skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 300; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 0.7rem 1.1rem; border: 2px solid var(--accent); transition: top 0.25s var(--ease); } .skip-link:focus { top: 1rem; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; /* печатная фактура на бумаге */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } .unb { font-family: "Choowee", sans-serif; } .mono { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; } .eyebrow { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); font-weight: 500; } .eyebrow.mono { letter-spacing: 0.14em; } /* ============ NAV (общий) ============ */ header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--nav-h); display: flex; align-items: center; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--line); } .nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; } .brand b { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); } .nav-links { display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); align-items: center; } .nav-links a { font-size: 0.92rem; color: var(--muted); font-weight: 500; transition: color 0.3s var(--ease); text-transform: lowercase; } /* все пункты меню строчными (решение Вовы 2026-07-10) */ .nav-links a:hover { color: var(--text); } .mm-label { text-transform: lowercase; } /* и в мобильном бургер-меню */ @media (max-width: 720px) { .nav-links a.nav-secondary { display: none; } } /* ---- бургер-кнопка (видна только на узких экранах, см. медиазапрос ниже) ---- */ .nav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; position: relative; border: 1px solid var(--line); background: transparent; transition: border-color 0.3s var(--ease); } .nav-burger:hover { border-color: var(--text); } .nav-burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--text); transition: transform 0.4s var(--ease), opacity 0.25s var(--ease); } .nav-burger span:nth-child(1) { top: 14px; } .nav-burger span:nth-child(2) { top: 24px; } .nav-burger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-burger.open span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); } /* ---- мобильное меню: чёрная штора из-под навбара (инверсная, брутал) ---- */ .mobile-menu { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 70; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 7vh, 5rem) var(--pad); transform: translateY(-100%); visibility: hidden; transition: transform 0.55s var(--ease), visibility 0s 0.55s; overflow-y: auto; } .mobile-menu.open { transform: translateY(0); visibility: visible; transition: transform 0.55s var(--ease), visibility 0s 0s; } .mm-nav { display: flex; flex-direction: column; gap: clamp(0.4rem, 1.6vh, 1rem); } .mm-link { display: flex; align-items: baseline; gap: 0.9rem; font-family: "JetBrains Mono", monospace; font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 9vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); padding: 0.15rem 0; opacity: 0; transform: translateY(24px); } .mobile-menu.open .mm-link { animation: mmReveal 0.5s var(--ease) forwards; } .mm-link .mm-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85rem; font-weight: 500; opacity: 0.45; } .mm-link:active .mm-label, .mm-link:hover .mm-label { text-decoration: underline; text-underline-offset: 6px; } .mm-foot { margin-top: auto; padding-top: 2.4rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); } @keyframes mmReveal { to { opacity: 1; transform: translateY(0); } } body.menu-open { overflow: hidden; } /* кнопка-корзина в навбаре */ .cart-btn { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.92rem; color: var(--text); padding: 0.4rem 0; } .cart-btn i { font-size: 1.3rem; } .cart-btn:hover { color: var(--accent); } .cart-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .cart-count[data-empty="true"] { background: var(--surface-2); color: var(--muted-2); } /* ============ КНОПКИ ============ */ /* необрутализм: толстый бордер + hard-shadow, «вжатие» на hover */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.6rem; font-weight: 700; font-size: 0.98rem; border-radius: var(--radius); border: 2px solid var(--accent); box-shadow: 5px 5px 0 var(--accent); transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); white-space: nowrap; } .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--accent); } .btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--accent); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-2); } .btn-ghost { background: var(--paper); color: var(--accent); } .btn-ghost:hover { background: var(--accent); color: var(--accent-ink); } .btn-block { width: 100%; } .btn i.arr { transition: transform 0.25s var(--ease); } .btn:hover i.arr { transform: translateX(4px); } .btn[disabled] { opacity: 0.4; pointer-events: none; } /* ============ СТРАНИЦА ШРИФТА ============ */ .font-page { padding-top: var(--nav-h); } /* breadcrumb */ .crumb { padding-block: clamp(1.5rem, 4vh, 2.5rem) 0; display: flex; gap: 0.6rem; align-items: center; color: var(--muted); font-size: 0.9rem; } .crumb a:hover { color: var(--accent); } .crumb i { font-size: 0.9rem; color: var(--muted-2); } /* ============ 3D-ГОЛОВА (head3d.js) ============ Канвас рендерится в низком разрешении (буфер /3) и растягивается CSS — отсюда пиксельная фактура, как на заглушке. */ .head3d-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; } /* Еле заметный редкий глитч: RGB-сдвиг + микро-дёрганье (вешает head3d.js) */ @keyframes glx { 0% { transform: translateX(0); filter: none; } 30% { transform: translateX(-3px); filter: drop-shadow(3px 0 rgba(255,0,90,0.6)) drop-shadow(-3px 0 rgba(0,200,255,0.6)); } 60% { transform: translateX(3px); filter: drop-shadow(-3px 0 rgba(255,0,90,0.5)) drop-shadow(3px 0 rgba(0,200,255,0.5)); } 100% { transform: translateX(0); filter: none; } } .glx { animation: glx 0.16s steps(3) 1; } /* пункт меню «Бесплатно»: жёлтая плашка (точечный жёлтый), hover — инверсия в синий */ .nav-links a.nav-free { background: var(--yellow); color: var(--blue); padding: 3px 10px; font-weight: 700; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .nav-links a.nav-free::after { display: none; } /* без линии-подчёркивания, плашка сама акцент */ .nav-links a.nav-free:hover { background: var(--blue); color: var(--accent-ink); } /* в мобильном бургере (fx.js переносит класс nav-free на .mm-link) плашка на подписи */ .mm-link.nav-free .mm-label { background: var(--yellow); padding: 2px 14px; } /* ============ КАТАЛОГ (специмены) ============ Общие стили карточек каталога: главная (hijack) + страница fonts.html (вертикальный стек). Hijack-специфика остаётся в инлайне index.html. */ .specimen { display: block; border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 7vh, 5.5rem); cursor: pointer; transition: background 0.4s var(--ease); } a.specimen:hover { background: var(--bg-2); } .specimen:last-child { border-bottom: 1px solid var(--line); } /* мета-строка карточки: бейдж категории слева, год справа. Название убрали — его роль играет большое слово-специмен ниже (набрано самим шрифтом). */ .spec-top { display: flex; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(1.5rem, 4vh, 3rem); } .spec-top .spec-year { margin-left: auto; } /* год прижат вправо, бейдж слева */ .spec-year { color: var(--muted-2); font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 500; font-size: 0.95rem; } /* разделители групп каталога (Готовые / Экспериментальные / Бесплатные) */ .fonts-group { border-top: 3px solid var(--line-strong); padding: clamp(2rem, 5vh, 3.5rem) 0 0.5rem; } .fonts-group .fg-num { color: var(--muted-2); font-size: 0.8rem; letter-spacing: 0.16em; } .fonts-group .fg-title { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: -0.02em; line-height: 1; margin-top: 0.4rem; } .fonts-group .fg-note { color: var(--muted); font-size: 0.8rem; margin-top: 0.7rem; } /* карточка-заглушка Free (не ссылка, шрифтов пока нет) */ .spec-soon .spec-word { color: var(--muted-2); } /* фильтр-чипы каталога: брутал-кнопки с жёстким вжатием */ .fonts-filter { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.5rem, 4vh, 2.5rem); } .ff-chip { font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.55em 1.1em; border: 2px solid var(--line-strong); background: var(--paper); color: var(--blue); box-shadow: 4px 4px 0 var(--line-strong); transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .ff-chip:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--line-strong); } .ff-chip.active { background: var(--blue); color: var(--accent-ink); transform: translate(4px, 4px); box-shadow: 0 0 0 var(--line-strong); } /* скрытые фильтром элементы каталога */ .cat-hidden { display: none !important; } .spec-word { font-size: clamp(3.5rem, 18vw, 15rem); line-height: 0.82; letter-spacing: -0.03em; transition: font-variation-settings 0.7s var(--ease); user-select: none; /* курсор наследуется от карточки-ссылки — лапка */ } /* Choowee — главный вариативный шрифт студии (ось wght 100-800) */ .spec-word.f-choowee { font-family: "Choowee", sans-serif; font-variation-settings: "wght" 700; } .spec-word.f-zord { font-family: "Zord", sans-serif; font-variation-settings: "wght" 500, "slnt" 0, "Vrtc" 500; } /* Старый hover-морфинг (каталог fonts.html). На карточках с .has-var им управляет JS «оси за курсором» (shop.js), поэтому там CSS-hover отключаем через :not — иначе при входе курсора CSS-transition даёт микро-рывок за кадр до перехвата скриптом. */ .specimen:not(.has-var):hover .spec-word.f-choowee { font-variation-settings: "wght" 150; } .specimen:not(.has-var):hover .spec-word.f-zord { font-variation-settings: "wght" 500, "slnt" 55, "Vrtc" 900; } /* Ukol — длинное «UKOL TYPEFACE»: крупно во всю ширину, но в одну строку. vw масштабирует вниз на узких экранах, rem-потолок держит его в контейнере на широких (контейнер фикс 1400 — vw там бы вылез). Предел на 1440 ≈ 10.5rem. */ .specimen[data-font="ukol"] .spec-word { font-size: clamp(3.4rem, 16.8vw, 15rem); white-space: nowrap; font-family: "Ukol Blured", sans-serif !important; /* по умолчанию — размытое */ } /* hover ИМЕННО по слову: Blured → Ukol (с шипами). !important перебивает inline. */ .specimen[data-font="ukol"] .spec-word:hover { font-family: "Ukol", sans-serif !important; } /* Spukies — «Spukies demo» одной строкой, хвост намеренно вылетает за край (фишка сайта) */ .specimen[data-font="spukies"] .spec-word { white-space: nowrap; font-size: clamp(3.6rem, 17.5vw, 16rem); } /* Vinograd — «Виноград шрифт»/«Vinograd Font» одной строкой с вылетом за край. ПРАВИЛО (Вова, 2026-07-10): у каждого нового шрифта heroWord на карточке — одна строка, хвост слегка вылетает за правый край. Добавляешь шрифт → добавь такое правило. */ .specimen[data-font="vinograd"] .spec-word { white-space: nowrap; font-size: clamp(3.4rem, 16.5vw, 15.7rem); } /* CTA в конце каталога: не подошёл готовый шрифт → заказать кастомный */ /* CTA-плакат: электрик-синий блок, белый текст, инверсная кнопка — финал каталога */ .fonts-cta { margin: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 6vh, 4rem); background: var(--accent); color: #fff; padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.8rem, 4vw, 3.5rem); } .fonts-cta-txt { display: flex; flex-direction: column; gap: 0.55rem; } .fonts-cta-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.24em; opacity: 0.72; } .fonts-cta-t { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: clamp(1.7rem, 4.2vw, 3.2rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; margin: 0; } .fonts-cta-sub { font-size: clamp(0.95rem, 1.5vw, 1.15rem); opacity: 0.85; margin: 0; max-width: 34ch; } .fonts-cta-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.7rem; background: #fff; color: var(--accent); padding: 1rem 1.8rem; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1rem; white-space: nowrap; border: 2px solid #fff; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease); } .fonts-cta-btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 rgba(0,0,0,0.28); } .fonts-cta-btn i { font-size: 1.15em; transition: transform 0.2s var(--ease); } .fonts-cta-btn:hover i { transform: translateX(4px); } @media (max-width: 640px) { .fonts-cta { flex-direction: column; align-items: flex-start; } .fonts-cta-btn { width: 100%; justify-content: center; box-shadow: 4px 4px 0 rgba(0,0,0,0.22); } } .spec-meta { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: clamp(1.5rem, 4vh, 2.8rem); } @media (min-width: 760px) { .spec-meta { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; } } .spec-desc { color: var(--muted); max-width: 48ch; } .meta-block .ml { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-2); margin-bottom: 0.4rem; } .meta-block .mv { font-weight: 500; } .spec-hoverhint { font-size: 0.82rem; color: var(--muted-2); display: inline-flex; gap: 0.85rem; align-items: center; } .spec-hoverhint i { color: var(--accent); font-size: 1.25em; } /* карточка-CTA «Все шрифты» в конце сарафана на главной */ .spec-cta { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem); } .spec-cta .spec-word { font-family: "JetBrains Mono", monospace; font-weight: 800; line-height: 0.95; } a.spec-cta:hover .spec-word { color: var(--accent-2); } /* hero шрифта */ /* overflow-x: clip — hero-слово и слова карточек каталога намеренно вылетают за край (приём heroWord), но не должны создавать горизонтальный скролл */ .fp-hero { padding-block: clamp(2rem, 6vh, 4rem) clamp(3rem, 8vh, 6rem); overflow-x: clip; } .fc-catalog { overflow-x: clip; } .fp-hero-meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); } .fp-kind { color: var(--accent); font-weight: 600; font-size: clamp(0.95rem, 1.6vw, 1.15rem); } .fp-year { color: var(--muted-2); font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 500; font-size: 0.95rem; } .fp-hero-word { font-size: clamp(4rem, 22vw, 19rem); line-height: 0.8; letter-spacing: -0.04em; user-select: none; cursor: default; white-space: nowrap; /* слово не ломаем: под ширину ужимает fitFpHeroWord() (shop.js) */ font-weight: 400; /* это

→ браузер по умолчанию просит bold(700), которого у наших шрифтов нет → faux bold («дубли» в Safari). Вес вариативных задаёт font-variation-settings (shop.js). */ /* НЕ ставим will-change: font-variation-settings — это свойство не композитится GPU, ускорения нет, зато постоянный композит-слой даёт «призрачное» троение крупного текста на retina/реальных GPU (в headless не видно). */ } .fp-desc { color: var(--muted); max-width: 60ch; font-size: clamp(1.05rem, 2vw, 1.3rem); margin-top: clamp(1.5rem, 4vh, 2.5rem); } /* ---- бейдж категории (Premium/Experimental/Free) ---- Общий для каталога (.spec-badge) и страницы шрифта (#fpCat). Брутал: 2px бордер, острые углы, мono-капс. Experimental — единственное место точечного жёлтого в теме. */ .cat-badge { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; padding: 0.3em 0.75em; border: 2px solid var(--line-strong); color: var(--blue); background: var(--paper); vertical-align: middle; white-space: nowrap; } .cat-badge[data-cat="experimental"] { background: var(--yellow); } .cat-badge[data-cat="free"] { background: var(--blue); color: var(--accent-ink); } .cat-badge:empty { display: none; } /* до заполнения из JS не мигает пустой рамкой */ /* строка «бесплатные обновления» под описанием (только experimental) */ .fp-updates { display: flex; align-items: center; gap: 0.5em; margin-top: 0.9rem; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 0.85rem; } .fp-updates i { color: var(--blue); } .fp-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(1.8rem, 5vh, 2.8rem); align-items: center; } .fp-price-from { color: var(--muted); font-size: 0.95rem; } .fp-price-from b { color: var(--text); font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 700; } /* секции */ .fp-section { padding-block: clamp(3rem, 9vh, 7rem); border-top: 1px solid var(--line); } .fp-section-title { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: clamp(1.5rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1; margin-bottom: clamp(1.5rem, 4vh, 2.8rem); text-wrap: balance; } .fp-section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; } /* ---- type tester ---- */ /* Вертикально: редактируемый текст во всю ширину сверху, настройки снизу. */ .tester { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.5rem); } .tester-stage { background: var(--bg-2); padding: clamp(1.5rem, 4vw, 3rem); min-height: 34vh; display: flex; align-items: center; } .tester-text { width: 100%; outline: none; line-height: 1.05; letter-spacing: -0.02em; font-size: 6rem; word-break: break-word; } .tester-controls { display: flex; flex-direction: column; gap: 1.4rem; } /* ползунки (оси + размер) — в ряд по всей ширине, а не длинным столбцом */ .tester-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem 2rem; } .tester-styles { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .tester-readout { font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 500; font-size: 0.74rem; color: var(--muted-2); line-height: 1.7; border: 1px solid var(--line); padding: 0.8rem 1rem; word-break: break-all; } .ctrl-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.55rem; } .ctrl-label .k { color: var(--text); font-weight: 600; } .ctrl-label .v { color: var(--accent); font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 600; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--line); cursor: pointer; outline-offset: 6px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: var(--radius); background: var(--accent); transition: transform 0.15s var(--ease); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: var(--radius); background: var(--accent); } input[type="range"]:focus-visible { outline: 2px solid var(--accent); } .tester-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; } .chip { border: 1px solid var(--line); padding: 0.55rem 0.9rem; font-size: 0.82rem; font-weight: 500; border-radius: var(--radius); transition: all 0.25s var(--ease); display: inline-flex; gap: 0.45rem; align-items: center; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ---- waterfall (весовая лесенка) ---- */ /* «Начертания и знаки» = глиф-инспектор: слева сцена (гигантский выбранный знак, инверсия) + чипы начертаний; справа сетка глифов. Ховер по сетке — превью, клик — фиксация. Сцена липкая: при развороте полного сета остаётся в кадре. */ .glyph-lab { margin-top: clamp(1.5rem, 4vh, 2.5rem); display: grid; grid-template-columns: 2fr 3fr; gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; } .gl-side { position: sticky; top: calc(var(--nav-h) + 1.5rem); } .gl-stage { position: relative; margin: 0; aspect-ratio: 1; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; } .gl-char { font-size: clamp(9rem, 17vw, 15rem); line-height: 1; } .gl-note { position: absolute; top: 0.9rem; right: 1.1rem; font-size: 0.7rem; letter-spacing: 0.08em; opacity: 0.55; } /* блоки под сценой: начертания / языки / где работает */ .gl-block { margin-top: clamp(1.4rem, 3vh, 2rem); display: flex; flex-direction: column; gap: 0.7rem; } .gl-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-2); } .gl-where { font-size: clamp(1rem, 1.6vw, 1.2rem); } .gl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* чип набран СВОИМ начертанием (JS ставит font-family/variation) — стили видно сразу */ .gl-chip { border: 2px solid var(--ink); background: var(--bg); color: var(--text); font-size: 1.05rem; line-height: 1; padding: 0.55rem 1rem; cursor: pointer; } /* Zord: строчных букв в шрифте нет — имена стилей капсом, иначе tofu */ body[data-font="zord"] .gl-chip { text-transform: uppercase; } .gl-chip.active, .gl-chip:hover { background: var(--ink); color: var(--paper); } .glyph-cell.sel { background: var(--accent); color: var(--accent-ink); } @media (max-width: 900px) { .glyph-lab { grid-template-columns: 1fr; } .gl-side { position: static; } .gl-stage { aspect-ratio: 16 / 10; } .gl-char { font-size: clamp(6rem, 24vw, 9rem); } } /* ---- glyph set ---- */ /* сетка ОБРЫВАЕТСЯ по высоте сцены (JS: syncGridHeight), без прокрутки — просто клип; кнопка «все глифы» под обрезом. Развернул → ограничение снимается и сетка растёт вниз на полную высоту. */ .gl-grid-wrap { overflow-y: hidden; } .glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .glyph-cell { background: var(--bg); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(1.2rem, 2.6vw, 1.7rem); transition: background 0.2s var(--ease), color 0.2s var(--ease); } /* доп-сетка «все глифы» (раскрывается кнопкой) + сама кнопка: компактная, живёт сразу под сеткой в правой колонке — часть сетки, не блока */ .glyphs-extra { margin-top: 1px; } .glyphs-more { margin-top: 0.8rem; align-self: flex-start; font-size: 0.7rem; padding: 0.5rem 0.9rem; letter-spacing: 0.08em; } .gl-right { display: flex; flex-direction: column; } .glyph-cell:hover { background: var(--accent); color: var(--accent-ink); } @media (max-width: 900px) { .gl-grid-wrap { max-height: none !important; overflow: visible; } } /* ---- языки (тэги в левой колонке глиф-инспектора) ---- */ .lang-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lang-tags span { border: 1px solid var(--line); padding: 0.4rem 0.8rem; font-size: 0.88rem; color: var(--text); } /* ============ ПАНЕЛЬ ЛИЦЕНЗИЙ ============ */ .license { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); } @media (min-width: 980px) { .license { grid-template-columns: 1.3fr 0.9fr; align-items: start; } } .lic-types { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.2rem); } /* группа выбора (Начертание / Лицензия) — единый ритм для обеих */ .lic-group { display: flex; flex-direction: column; gap: 0.7rem; } .lic-group-head { display: flex; align-items: center; gap: 0.55rem; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); } .lic-group-head i { font-size: 1.05rem; color: var(--accent); } .lic-opts { display: flex; } .lic-opts--chips { flex-wrap: wrap; gap: 0.5rem; } /* начертания — таблетки в ряд */ .lic-opts--rows { flex-direction: column; gap: 0.5rem; } /* лицензии — строки */ /* базовая опция выбора — ЕДИНЫЙ вид для начертаний и лицензий */ .lic-opt { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; text-align: left; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .lic-opt:hover { border-color: var(--muted); } /* ВЫБРАННОЕ = инверсия (синий блок, белый текст) — приём инверсных секций сайта */ .lic-opt.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } /* индикатор слева: квадрат (чекбокс, мультивыбор) или круг (radio, одиночный) */ .lic-ind { width: 1.1em; height: 1.1em; flex: none; border: 1.5px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 0.82em; line-height: 1; transition: all 0.2s var(--ease); } .lic-opt--check .lic-ind { border-radius: 3px; } .lic-opt--radio .lic-ind, .lic-opt--lic .lic-ind { border-radius: 50%; } /* на инверсном фоне индикатор белеет и заполняется */ .lic-opt.selected .lic-ind { border-color: var(--accent-ink); } .lic-opt--check.selected .lic-ind::before { content: "\2713"; color: var(--accent-ink); } .lic-opt--radio.selected .lic-ind, .lic-opt--lic.selected .lic-ind { background: radial-gradient(circle, var(--accent-ink) 0 42%, transparent 45%); } /* начертания-таблетки: компактные */ .lic-opt--check, .lic-opt--radio { padding: 0.5rem 0.8rem; font-size: 0.9rem; } .lic-opt--radio { flex-basis: 100%; } /* «весь шрифт» — на своей строке */ .lic-opt-price { font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 700; } /* лицензии-строки: во всю ширину, иконка + название + цена + подсказка */ .lic-opt--lic { width: 100%; padding: clamp(0.9rem, 2.2vw, 1.15rem) clamp(1rem, 2.5vw, 1.3rem); gap: 0.75rem; } .lic-opt-icon { font-size: 1.35rem; color: var(--accent); flex: none; } .lic-opt--lic .lic-opt-label { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; } .lic-opt--lic .lic-opt-price { font-size: 1rem; } .lic-opt-hint { color: var(--muted); font-size: 0.86rem; margin-left: auto; text-align: right; } .lic-opt.selected .lic-opt-icon { color: var(--accent-ink); } .lic-opt.selected .lic-opt-hint { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); } /* разделитель перед «весь шрифт» — на всю ширину ряда */ .lic-sep { flex-basis: 100%; height: 1px; background: var(--line); margin: 0.3rem 0; } /* апселл: набор начертаний вышел дороже «всего шрифта» */ .ls-upsell { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.85rem 1rem; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); font-size: 0.86rem; line-height: 1.4; } .ls-upsell[hidden] { display: none; } .ls-upsell i { color: var(--accent); font-size: 1.25rem; flex: none; } .ls-upsell em { color: var(--muted); font-style: normal; } .ls-upsell-btn { margin-left: auto; border: 1px solid var(--accent); color: var(--accent); padding: 0.4rem 0.8rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap; transition: all 0.2s var(--ease); } .ls-upsell-btn:hover { background: var(--accent); color: var(--accent-ink); } /* на мобиле подсказка лицензии на своей строке (не прячем — Desktop/Web/App вслепую = жаргон) */ @media (max-width: 760px) { .lic-opt--lic { flex-wrap: wrap; } .lic-opt-hint { flex-basis: 100%; margin-left: 1.85rem; text-align: left; font-size: 0.82rem; } } /* итог покупки (sticky) */ .lic-summary { border: 1px solid var(--line); padding: clamp(1.5rem, 4vw, 2.2rem); display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); background: var(--bg-2); } .lic-summary .ls-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: var(--muted); } .lic-summary .ls-row b { color: var(--text); font-weight: 600; text-align: right; } .lic-summary .ls-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 1.2rem; } .lic-summary .ls-lic-link { display: inline-flex; align-items: center; gap: 0.45em; color: var(--muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; } .lic-summary .ls-lic-link:hover { color: var(--text); } .lic-summary .ls-total .tl { color: var(--muted); font-size: 0.9rem; } .lic-summary .ls-total .tv { font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 800, "wdth" 120; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.02em; } .ls-added { font-size: 0.85rem; color: var(--accent); display: none; align-items: center; gap: 0.4rem; } .ls-added.show { display: inline-flex; } /* ============ CART DRAWER ============ */ .drawer-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); } .drawer-overlay.open { opacity: 1; pointer-events: auto; } /* поп-ап по центру экрана в синей рамке (в брутал-стиле кнопок): острые углы + тень */ .drawer { position: fixed; top: 50%; left: 50%; z-index: 101; width: min(460px, calc(100vw - 2rem)); max-height: min(86vh, 780px); background: var(--bg-2); border: 2px solid var(--accent); box-shadow: 8px 8px 0 var(--accent); transform: translate(-50%, -50%) scale(0.96); opacity: 0; pointer-events: none; transition: transform 0.35s var(--ease), opacity 0.28s var(--ease); display: flex; flex-direction: column; overflow: hidden; } .drawer.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } @media (max-width: 600px) { .drawer { box-shadow: 5px 5px 0 var(--accent); } } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: clamp(1.2rem, 3vw, 1.8rem); border-bottom: 1px solid var(--line); } .drawer-head h3 { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; } .drawer-close { font-size: 1.6rem; color: var(--muted); transition: color 0.2s var(--ease); } .drawer-close:hover { color: var(--accent); } .drawer-body { flex: 1; overflow-y: auto; padding: clamp(1rem, 3vw, 1.5rem); display: flex; flex-direction: column; gap: 1rem; } .drawer-foot { border-top: 1px solid var(--line); padding: clamp(1.2rem, 3vw, 1.8rem); display: flex; flex-direction: column; gap: 1rem; } .cart-item { border: 1px solid var(--line); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; } .cart-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } /* имя набирается САМИМ шрифтом (fam+вес — инлайн из JS); тут только кегль/ритм */ .cart-item-name { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1; letter-spacing: -0.01em; } .cart-item-price { font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 700; white-space: nowrap; } .cart-item-meta { color: var(--muted); font-size: 0.86rem; } .cart-item-remove { align-self: flex-start; color: var(--muted-2); font-size: 0.82rem; display: inline-flex; gap: 0.35rem; align-items: center; transition: color 0.2s var(--ease); margin-top: 0.2rem; } .cart-item-remove:hover { color: var(--ink); text-decoration: underline; } .cart-empty { color: var(--muted); text-align: center; padding: 3rem 1rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; } .cart-empty i { font-size: 2.5rem; color: var(--muted-2); } .cart-total-row { display: flex; justify-content: space-between; align-items: baseline; } .cart-total-row .ct-l { color: var(--muted); } .cart-total-row .ct-v { font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 800, "wdth" 120; font-size: 1.8rem; } /* ============ СТРАНИЦА КОРЗИНЫ ============ */ .cart-page { padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4rem)); padding-bottom: clamp(4rem, 10vh, 8rem); } .cart-page h1 { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: clamp(2.5rem, 8vw, 6rem); letter-spacing: -0.02em; line-height: 0.95; margin-bottom: clamp(2rem, 6vh, 4rem); text-wrap: balance; } .cart-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); } @media (min-width: 900px) { .cart-layout { grid-template-columns: 1.6fr 0.9fr; align-items: start; } } .cart-lines { display: flex; flex-direction: column; } .cart-line { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding-block: clamp(1.2rem, 3vh, 1.8rem); border-top: 1px solid var(--line); align-items: center; } .cart-line:last-child { border-bottom: 1px solid var(--line); } .cart-line-word { font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.02em; } .cart-line-info { display: flex; flex-direction: column; gap: 0.3rem; } .cart-line-name { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; } .cart-line-meta { color: var(--muted); font-size: 0.9rem; } .cart-line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; } .cart-line-price { font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 700; font-size: 1.2rem; } .cart-aside { border: 1px solid var(--line); background: var(--bg-2); padding: clamp(1.5rem, 4vw, 2.4rem); display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); } .cart-aside h3 { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; } .cart-aside .ca-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.95rem; } .cart-aside .ca-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 1.2rem; } .cart-aside .ca-total .v { font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 800, "wdth" 120; font-size: clamp(2.2rem, 6vw, 3rem); } /* ============ ЧЕКАУТ ============ */ /* сообщение под кнопкой «Оформить заказ»: ошибка — заметный жёлтый штамп (точечный жёлтый темы), успех (форма free) — инверсный синий */ .checkout-msg { display: block; font-size: 0.82rem; color: var(--blue); font-weight: 600; background: var(--yellow); border: 2px solid var(--line-strong); padding: 0.6rem 0.9rem; font-family: "JetBrains Mono", monospace; } .checkout-msg:empty { display: none; } .checkout-msg.ok { background: var(--blue); color: var(--accent-ink); } /* примечание «оплата в USD по курсу» под кнопкой чекаута (не для USD) */ .checkout-note { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; } /* блок начертаний в панели покупки: группа чипов, не кликабельная карточка */ /* ============ FOOTER ============ */ /* ============ БРУТАЛ-ФУТЕР (инверсный синий блок, единый на всех страницах) ============ Отдельная «печать» в конце страницы: маркиза-разделитель со звёздочками (жёлтыми — точечный акцент), крупный CTA, колонки навигации, гигантский обрезанный бренд-тайп. Синий фон отделяет футер от любой секции выше. */ .site-footer { background: var(--ink); color: var(--accent-ink); overflow: hidden; position: relative; } /* маркиза-разделитель сверху футера (CSS-only: контент продублирован в HTML) */ .foot-marquee { border-top: 2px solid rgba(255,255,255,0.25); border-bottom: 2px solid rgba(255,255,255,0.25); overflow: hidden; padding-block: 0.9rem; } .foot-marq-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: footMarq 28s linear infinite; } .foot-marq-track span { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; padding-right: 2rem; display: inline-flex; align-items: center; gap: 2rem; } .foot-marq-track b { color: var(--yellow); font-weight: 400; } /* звёздочки ✦ — точечный жёлтый */ @keyframes footMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } } .site-footer:hover .foot-marq-track { animation-play-state: paused; } /* основной блок: CTA слева, колонки справа */ .foot-main { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); padding-block: clamp(3rem, 8vh, 6rem); } @media (min-width: 860px) { .foot-main { grid-template-columns: 1.2fr 1fr; align-items: start; } } .foot-eyebrow { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 1.1rem; } .foot-cta-big { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.92; letter-spacing: -0.03em; } .foot-mail { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: clamp(1.2rem, 3vh, 2rem); font-family: "JetBrains Mono", monospace; font-variation-settings: "wght" 600; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--accent-ink); border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 0.2rem; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .foot-mail:hover { color: var(--yellow); border-color: var(--yellow); } .foot-mail .arr { transition: transform 0.25s var(--ease); } .foot-mail:hover .arr { transform: translate(3px, -3px); } /* колонки навигации */ .foot-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); } @media (min-width: 520px) { .foot-cols { grid-template-columns: repeat(3, 1fr); } } .foot-col-h { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.2); } .foot-col a { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.85); font-size: 0.95rem; padding: 0.35rem 0; transition: color 0.2s var(--ease), transform 0.2s var(--ease); } .foot-col a:hover { color: var(--accent-ink); transform: translateX(3px); } .foot-col a.foot-free { color: var(--yellow); font-weight: 600; } /* нижняя мета-строка */ .foot-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: clamp(1.5rem, 4vh, 2.2rem); border-top: 1px solid rgba(255,255,255,0.2); } .foot-meta span { color: rgba(255,255,255,0.6); font-size: 0.82rem; } .foot-meta .mono { font-family: "JetBrains Mono", monospace; letter-spacing: 0.1em; } @media (prefers-reduced-motion: reduce) { .foot-marq-track { animation: none; } } [data-reveal] { opacity: 0; transform: translateY(28px); } /* ============ ПЕРЕКЛЮЧАТЕЛИ ЯЗЫКА / ВАЛЮТЫ ============ */ .switcher { display: inline-flex; border: 1px solid var(--line); } /* переключатель: