/* ── https://clcphuket.com/_shared/clc2026.css ── */
/* CLC — фирменная система по брендбуку 2026.
Слой компонентов. Единственный источник цвета и шрифта — tokens.css и
fonts.css; здесь только готовые классы. Подключать этот файл одним
импортом, отдельно fonts.css и tokens.css звать не нужно. */
/* ── втянуто: fonts/fonts.css ── */
/* CLC 2026 — шрифты брендбука. Пути относительно _shared/fonts/ */
/* Geologica — ПЕРЕМЕННЫЙ. 4 оси: wght 100–900, CRSV 0–1, SHRP 0–100, slnt -12–0.
Диапазон font-weight: 100 900 объявлять ОБЯЗАТЕЛЬНО — иначе браузер
возьмёт дефолт оси (100 = Thin) и все начертания будут одинаково тонкими. */
@font-face {
font-family: "Geologica";
src: url("https://clcphuket.com/_shared/fonts/./Geologica-Variable.woff2?v=2") format("woff2-variations"),
url("https://clcphuket.com/_shared/fonts/./Geologica-Variable.woff2?v=2") format("woff2");
font-weight: 100 900;
font-stretch: 100%;
font-style: oblique 0deg 12deg;
font-display: swap;
}
/* Suffragette Test — акцидентный.
ВНИМАНИЕ: 66 символов, только латиница, цифры, пробел, запятая, дефис, точка.
Кириллицы нет. Двоеточия, кавычек, апострофа, &, !, ?, скобок, тире нет.
Верхний и нижний регистр — ОДИН И ТОТ ЖЕ глиф (юникейс), кроме i/I. */
@font-face {
font-family: "Suffragette";
src: url("https://clcphuket.com/_shared/fonts/./Suffragette-Regular.woff2?v=2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0020, U+002C-002E, U+0030-0039, U+0041-005A, U+0061-007A;
}
/* Myriad Pro — вспомогательный. Латиница + базовая кириллица. */
@font-face {
font-family: "Myriad Pro";
src: url("https://clcphuket.com/_shared/fonts/./MyriadPro-Regular.woff2?v=2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Именованные начертания Geologica из брендбука (стр. 4):
ExtraLight Italic 200 + slnt -12 — основной текст, акцентный
Regular 400 — основной текст, меню, типографика
Medium Italic 500 + slnt -12 — основной текст, акцентный
Bold 700 — заголовки, нумерация */
.g-extralight-italic { font-weight: 200; font-variation-settings: "slnt" -12; }
.g-regular { font-weight: 400; }
.g-medium-italic { font-weight: 500; font-variation-settings: "slnt" -12; }
.g-bold { font-weight: 700; }
/* ── втянуто: tokens.css ── */
/* CLC 2026 — токены канона. Значения взяты со стр. 5 брендбука, не на глаз. */
:root {
/* ——— палитра брендбука (только эти четыре) ——— */
--clc-newyork: #700F0F; /* New York — бордовый, главный фирменный */
--clc-black: #000000; /* Black */
--clc-gold: #C6975F; /* The golden arch — золото, акцент */
--clc-green: #233F2F; /* The green island — тёмно-зелёный */
/* ——— служебные производные, чтобы не плодить самодеятельность ——— */
--clc-ink: #0A0A0A; /* фон страницы, чуть мягче чистого чёрного */
--clc-gold-soft: rgba(198, 151, 95, 0.55);
--clc-gold-hair: rgba(198, 151, 95, 0.32); /* волосяные линейки, рамки */
--clc-warm-white: #F2EAE0; /* текст на чёрном там, где золото читается плохо */
/* Светлая ступень золотого канта со стр. 29 (она же стоп #F0D3A2 в
--clc-gold-edge ниже). Нужна для мелкого текста: #C6975F на зелёном
даёт 4.36:1, на бордовом 4.31:1 — ниже нормы 4.5:1 для кегля меньше
24 px. Светлая ступень на тех же полях даёт 8:1. Крупный набор и
линейки остаются на #C6975F. */
--clc-gold-lite: #F0D3A2;
--clc-newyork-deep: #4A0A0A; /* бордо в тенях, для градиентов */
/* ——— золотой градиент рамки (снят с макета сайта, стр. 29) ——— */
--clc-gold-edge: linear-gradient(140deg,
#8A6034 0%, #C6975F 18%, #F0D3A2 34%,
#C6975F 52%, #8A6034 70%, #C6975F 86%, #E4C595 100%);
/* ——— типографика ——— */
--clc-font-ui: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
--clc-font-display: "Suffragette", "Geologica", sans-serif; /* ТОЛЬКО латиница */
--clc-font-aux: "Myriad Pro", "Geologica", sans-serif;
/* трекинг разрядки: так набраны KARAOKE, WELCOME, THE CONCEPT, Project 2026 */
--clc-track-wide: 0.30em;
--clc-track-mid: 0.18em;
/* ——— форма «арка» (главный носитель формы на сайте, стр. 29) ——— */
--clc-arch-radius: 50% 50% 0 0 / 50% 50% 0 0;
--clc-radius-card: 28px; /* карточки, визитка, экраны сайта */
--clc-radius-pill: 999px;
}
/* Арка: верх — полуокружность, низ — прямой. Пропорция кадра ≈ 1 : 1.45 */
.clc-arch {
border-radius: var(--clc-arch-radius);
overflow: hidden;
}
/* Золотая рамка-арка как на макете сайта: градиентный кант 3–4 px */
.clc-arch-frame {
padding: 3px;
background: var(--clc-gold-edge);
border-radius: var(--clc-arch-radius);
}
.clc-arch-frame > * {
border-radius: var(--clc-arch-radius);
display: block;
width: 100%;
}
/* Разрядка прописными — фирменный приём заголовка второго уровня */
.clc-eyebrow {
font-family: var(--clc-font-ui);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--clc-track-wide);
color: var(--clc-gold);
}
/* Волосяная линейка под блоком — приём с фасадной таблички (стр. 11) */
.clc-rule { height: 1px; background: var(--clc-gold-hair); border: 0; }
/* ── втянуто: pattern/patterns.css ── */
/* CLC 2026 — фирменные паттерны.
Плитки лежат рядом в SVG и залиты currentColor: цвет задаётся через
маску, а не правкой файла. Три способа применения — по убыванию удобства.
1) mask-image — цвет любой, из палитры:
.bg { -webkit-mask-image:url(https://clcphuket.com/_shared/pattern/pattern-mark-sparkle.svg);
mask-image:url(https://clcphuket.com/_shared/pattern/pattern-mark-sparkle.svg);
mask-size:240px 240px; background:var(--clc-gold); }
2) ![]()
поверх фона с opacity — быстро, цвет фиксированный (чёрный).
3) инлайн-вставка SVG в разметку и color:var(--clc-gold) на родителе.
Источники: pattern/*.ai из брендбука, воспроизведены вектором.
Плитки бесшовные по обеим осям (шахматный полураппорт).
*/
.clc-pattern {
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-position: 0 0;
mask-position: 0 0;
background-color: var(--clc-gold);
}
/* «Упаковочный»: знак cLc + четырёхлучевая искра. Стр. 31 брендбука —
золото по чёрному. Основной для фонов сайта. */
.clc-pattern--mark-sparkle {
-webkit-mask-image: url("https://clcphuket.com/_shared/pattern/./pattern-mark-sparkle.svg");
mask-image: url("https://clcphuket.com/_shared/pattern/./pattern-mark-sparkle.svg");
-webkit-mask-size: 240px 240px;
mask-size: 240px 240px;
}
/* «Меню, бланк, интерьер»: логотип в строку + бабочка. Стр. 8 брендбука. */
.clc-pattern--line-bowtie {
-webkit-mask-image: url("https://clcphuket.com/_shared/pattern/./pattern-line-bowtie.svg");
mask-image: url("https://clcphuket.com/_shared/pattern/./pattern-line-bowtie.svg");
-webkit-mask-size: 520px 220px;
mask-size: 520px 220px;
}
/* Логотип стопкой + знак в арке. Плотный, для бланков и подложек. */
.clc-pattern--stack-arch {
-webkit-mask-image: url("https://clcphuket.com/_shared/pattern/./pattern-stack-arch.svg");
mask-image: url("https://clcphuket.com/_shared/pattern/./pattern-stack-arch.svg");
-webkit-mask-size: 520px 260px;
mask-size: 520px 260px;
}
/* Деликатная подача: паттерн почти не виден, работает как фактура. */
.clc-pattern--ghost { opacity: 0.10; }
.clc-pattern--soft { opacity: 0.22; }
/* Четвёртый паттерн брендбука (стр. 9) — типографический коллаж из букв
c, o, m, e, L разного кегля встык. Вектором не заготовлен: он строится
версткой из в Suffragette/Geologica, размеры от 0.4em до 6em,
line-height 0.78, выключка по обоим краям. На носителях подан
тон-в-тон: чёрный по чёрному, глянец по матовому (стр. 32). */
:root{
/* короткие псевдонимы канонических токенов — чтобы в разметке было чище */
--newyork: var(--clc-newyork);
--black: var(--clc-black);
--gold: var(--clc-gold);
--green: var(--clc-green);
--paper: var(--clc-warm-white);
--s: 8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--clc-font-ui);background:var(--clc-ink);color:var(--paper);
font-size:16px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
/* ─── типографика ───────────────────────────────────────────────
.d1/.d2 — Suffragette. ТОЛЬКО латиница и цифры: кириллицы в шрифте нет,
двоеточия, тире, кавычек и & тоже. Для русского заголовка брать .d1--ru. */
.d1{font-family:var(--clc-font-display);font-size:clamp(40px,7vw,92px);line-height:.98;font-weight:400}
.d2{font-family:var(--clc-font-display);font-size:clamp(28px,4vw,52px);line-height:1.06;font-weight:400}
.d1--ru{font-family:var(--clc-font-ui);font-weight:300;font-size:clamp(36px,6vw,80px);line-height:1.04;letter-spacing:-.01em}
.d2--ru{font-family:var(--clc-font-ui);font-weight:300;font-size:clamp(26px,3.6vw,48px);line-height:1.1}
/* .gx — знак, которого в Suffragette физически нет: двоеточие, тире, слэш,
плюс, средняя точка, ฿ и вся кириллица. Такой знак всё равно возьмётся
из Geologica, и без подгонки он выпадает из строки жирным пятном.
Класс делает подмену осознанной: вес и кегль подведены под волосяную
антикву. Набирать так: 18:00 */
.gx,.gx.gx{font-family:var(--clc-font-ui)!important;font-style:normal;font-weight:200;
font-size:.86em;letter-spacing:-.02em}
/* надзаголовок вразрядку — главный приём брендбука (THE CONCEPT, KARAOKE) */
.lbl{font-size:11px;letter-spacing:var(--clc-track-wide);text-transform:uppercase;font-weight:600;color:var(--gold)}
.lbl--dim{color:inherit;opacity:.7;font-weight:500;letter-spacing:var(--clc-track-mid)}
.lead{font-size:clamp(15px,1.4vw,19px);max-width:62ch}
.gold{color:var(--gold)}
/* ─── шапка ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
justify-content:space-between;padding:calc(var(--s)*2.5) calc(var(--s)*5);
background:rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.nav a{color:var(--paper);text-decoration:none;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;opacity:.85;transition:.2s}
.nav a:hover{opacity:1;color:var(--gold)}
.nav__links{display:flex;gap:calc(var(--s)*4.5);align-items:center}
.nav__logo{width:78px;color:var(--gold);display:block}
.nav__logo svg,.nav__logo img{width:100%;height:auto;display:block}
.book{border:1px solid var(--gold);color:var(--gold)!important;padding:9px 20px;opacity:1!important}
.book:hover{background:var(--gold);color:var(--black)!important}
/* ─── секции ─── */
.sec{padding:calc(var(--s)*13) calc(var(--s)*5)}
.wrap{max-width:1240px;margin:0 auto}
.sec--wine{background:var(--newyork)}
.sec--green{background:var(--green)}
.sec--gold{background:var(--gold);color:var(--black)}
.sec--paper{background:#F7F4F0;color:var(--black)}
/* разделитель-шмуцтитул: чёрное поле + строка золотом вразрядку (стр. 14, 22, 25, 30) */
.divider{padding:calc(var(--s)*14) 0;text-align:center;background:var(--black)}
.divider span{font-size:13px;letter-spacing:var(--clc-track-wide);text-transform:uppercase;color:var(--gold)}
/* ─── золотая текстура ─── */
.goldtex{background-image:url('https://clcphuket.com/_shared/texture/gold-2.webp');background-size:cover;background-position:center}
.goldtex--tile{background-image:url('https://clcphuket.com/_shared/texture/gold-2-tile.webp');background-size:280px}
.goldtext{background-image:url('https://clcphuket.com/_shared/texture/gold-1.webp');background-size:200% auto;
-webkit-background-clip:text;background-clip:text;color:transparent}
/* ─── арка: главная форма бренда (стр. 19, 20, 25, 29) ─── */
.arch{aspect-ratio:1/1.45;border-radius:var(--clc-arch-radius);overflow:hidden}
.arch img{width:100%;height:100%;object-fit:cover;display:block}
.arch--framed{padding:3px;background:var(--clc-gold-edge);border-radius:var(--clc-arch-radius);aspect-ratio:auto}
.arch--framed > *{border-radius:var(--clc-arch-radius);overflow:hidden;display:block;width:100%}
/* ─── факты ─── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:calc(var(--s)*4);
margin-top:calc(var(--s)*6);border-top:1px solid var(--clc-gold-hair);padding-top:calc(var(--s)*4)}
.fact b{font-family:var(--clc-font-display);font-size:34px;display:block;color:var(--gold);line-height:1}
.fact span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;display:block;margin-top:6px}
/* ─── расписание вечера ─── */
.time{display:flex;gap:calc(var(--s)*3);align-items:baseline;padding:calc(var(--s)*2.5) 0;
border-bottom:1px solid rgba(247,244,240,.14)}
.time b{font-family:var(--clc-font-display);font-size:26px;color:var(--gold);min-width:92px}
/* линейка, вырастающая из строки вправо — приём фасадной таблички (стр. 11) */
.rule-out{display:flex;align-items:center;gap:16px}
.rule-out::after{content:'';flex:1;height:1px;background:var(--clc-gold-hair)}
/* ─── кнопка ─── */
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);text-decoration:none;
padding:14px 34px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;transition:.22s}
.btn:hover{background:var(--gold);color:var(--black)}
.btn--solid{background:var(--gold);color:var(--black)}
.btn--solid:hover{background:transparent;color:var(--gold)}
/* ─── вертикальный колонтитул по боковому полю (сетка меню, стр. 23) ─── */
.sidelabel{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;
letter-spacing:var(--clc-track-mid);text-transform:uppercase;color:var(--gold);opacity:.8}
/* ─── подвал ─── */
.foot{padding:calc(var(--s)*8) calc(var(--s)*5);border-top:1px solid var(--clc-gold-hair);
display:flex;flex-wrap:wrap;gap:calc(var(--s)*4);justify-content:space-between;font-size:13px}
.foot a{color:var(--gold);text-decoration:none}
/* ─── поле нажатия на компьютере ───────────────────────────────
Разрядка прописными в 11 px — приём брендбука, кегль поднимать нельзя.
Но мышью по строке в 13 px легко промахнуться, а по номеру телефона
особенно обидно. Саму ссылку не трогаем: под ней вырастает невидимое
поле высотой 44 px. Вёрстка не сдвигается ни на пиксель, попасть
становится легко. На телефоне правило не работает — там всё и так
набрано от 44 px. */
@media(hover:hover) and (pointer:fine){
.nav a,.nav button,.foot a,a[href^="tel:"],a[href^="mailto:"]{position:relative}
.nav a::after,.nav button::after,.foot a::after,
a[href^="tel:"]::after,a[href^="mailto:"]::after{
content:'';position:absolute;left:0;right:0;top:50%;
transform:translateY(-50%);height:44px;min-height:100%}
}
@media(max-width:768px){
.nav{padding:14px 18px}
.nav__links{gap:14px}
.nav__links a:not(.book){display:none}
.sec{padding:calc(var(--s)*8) calc(var(--s)*2.5)}
.time{flex-direction:column;gap:2px}
}
/* ── встроенный стиль 1 ── */
/* ══════════════════════════════════════════════════════════════════
n11 · ПОРТАЛ
Арка бренда работает окном. Сначала мы снаружи, в темноте, и видим
зал сквозь узкую золотую арку. По прокрутке окно раскрывается —
камера въезжает внутрь. Дальше вечер идёт по часам, афиша едет
лентой, награды стоят в золотых арках.
Палитра только канон 2026: #000000 · #700F0F · #C6975F · #233F2F
══════════════════════════════════════════════════════════════════ */
html{ scroll-behavior:auto; overflow-x:hidden; }
body{ background:#000; color:var(--paper); font-weight:300; overflow-x:hidden;
transition:background-color .9s ease; }
.pad{ padding-left:clamp(20px,5vw,80px); padding-right:clamp(20px,5vw,80px); }
.wrap{ max-width:1300px; margin:0 auto; }
/* ── типографика ────────────────────────────────────────────────
Suffragette: только латиница, цифры, пробел, запятая, точка, дефис.
Кириллица и двоеточие в шрифте отсутствуют — набирать ими нельзя. */
.disp{ font-family:var(--clc-font-display); font-weight:400; line-height:.9;
letter-spacing:.01em;
background-image:url('https://clcphuket.com/_shared/texture/gold-1.webp');
background-size:cover; background-position:50% 40%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent; }
.disp--flat{ background:none; -webkit-text-fill-color:var(--gold); color:var(--gold); }
.eyebrow{ font-size:11px; letter-spacing:var(--clc-track-wide); text-transform:uppercase;
font-weight:600; color:var(--gold); }
.eyebrow--dim{ color:var(--paper); opacity:.5; font-weight:500; }
.note{ font-size:clamp(15px,1.32vw,19px); line-height:1.72; font-weight:200; max-width:56ch; }
.dim{ opacity:.62; }
.hair{ height:1px; background:var(--clc-gold-hair); border:0; }
/* время крупно: цифры Suffragette, двоеточие — классом .gx из общей системы
(в акцидентном шрифте глифа двоеточия нет) */
.tm{ font-family:var(--clc-font-display); font-weight:400; }
.tm .gx{ font-size:.72em; vertical-align:.06em; padding:0 .04em; }
/* строка в маске — выезд снизу */
.msk{ display:block; overflow:hidden; padding-bottom:.09em; }
/* ═══ ШАПКА ═══════════════════════════════════════════════════ */
.nav{ background:transparent; backdrop-filter:none; border-bottom:1px solid transparent;
padding:16px clamp(20px,5vw,80px); transition:background-color .45s, border-color .45s, padding .45s; }
.nav.is-solid{ background:rgba(0,0,0,.72); backdrop-filter:blur(16px);
border-bottom:1px solid var(--clc-gold-hair); padding-top:11px; padding-bottom:11px; }
.nav__logo{ width:96px; }
.nav__logo img{ width:100%; height:auto; display:block; }
.nav__links a{ font-size:11px; letter-spacing:.2em; }
/* Разделы и бронь на компьютере стоят одной группой справа — ровно так,
как стояли, когда бронь лежала последней внутри списка разделов. */
.nav__links{ margin-left:auto; }
.nav__right{ display:flex; align-items:center; gap:calc(var(--s)*4.5);
flex:0 0 auto; margin-left:calc(var(--s)*4.5); }
.nav__burger{ display:none; width:44px; height:44px; flex:0 0 auto; padding:0; cursor:pointer;
background:none; border:1px solid var(--clc-gold-hair);
flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav__burger i{ display:block; width:18px; height:1px; background:var(--gold);
transition:transform .26s ease, opacity .26s ease; }
.nav__burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* ═══════════════════════════════════════════════════════════════
1. ПОРТАЛ
═══════════════════════════════════════════════════════════════ */
/* Без GSAP секция ровно в экран — лишней пустоты под ней не остаётся.
С GSAP она вырастает: сцена закрепляется, и лишняя высота уходит на
въезд внутрь арки.
Было три экрана — замерено, что это и убивало эффект: за целый экран
прокрутки картинка менялась на единицы процентов, и въезда никто не
замечал. Стало 2,2 экрана, то есть 1,2 экрана самого хода. Тот же путь
стал вдвое короче по прокрутке — значит вдвое заметнее по движению. */
.portal{ height:100vh; position:relative; }
html.js-gsap .portal{ height:220vh; }
.pstage{ height:100vh; width:100%; position:relative; overflow:hidden; background:#000; }
/* Обёртка окна портала. На компьютере она совпадает со сценой и служит
слоем арки: именно её масштаб везёт зрителя внутрь. Точка роста стоит
в центре арки (66 % высоты экрана), а не в центре экрана — иначе
зритель въезжает мимо двери. */
.p-arch{ position:absolute; inset:0; transform-origin:50% 66%; will-change:transform; }
/* золотое свечение за аркой — воздух вокруг портала */
.p-glow{ position:absolute; left:50%; top:69.5%; width:130vh; height:130vh;
transform:translate(-50%,-50%); pointer-events:none;
background:radial-gradient(circle, rgba(198,151,95,.34) 0%, rgba(198,151,95,.10) 38%, transparent 66%);
filter:blur(10px); }
/* тёплый свет, падающий из двери на пол */
.p-spill{ position:absolute; left:50%; top:88%; width:82vh; height:26vh;
transform:translate(-50%,-50%); pointer-events:none;
background:radial-gradient(ellipse at center, rgba(198,151,95,.22) 0%, transparent 70%);
filter:blur(14px); }
/* окно портала: клип аркой, внутри полноэкранный кадр зала */
.p-clip{ position:absolute; inset:0; will-change:clip-path; }
.p-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transform-origin:50% 66%; filter:brightness(.95) contrast(1.04) saturate(1.06); }
/* Общая чёрно-белая правка в конце файла ловит все кадры по адресу photo/.
Кадр в арке портала — исключение: это главный экран, он цветной всегда,
в том числе когда движения нет и никто не выставит фильтр скриптом. */
.pstage .p-photo{ filter:brightness(.95) contrast(1.04) saturate(1.06); }
.p-scrim{ position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 100%); }
/* золотой кант, повторяющий окно, и внешнее кольцо */
.p-frame{ position:absolute; pointer-events:none; border:1px solid var(--gold);
box-shadow:0 0 46px rgba(198,151,95,.30), inset 0 0 60px rgba(198,151,95,.10); }
.p-frame2{ position:absolute; pointer-events:none; border:1px solid rgba(198,151,95,.22); }
/* типографика первого экрана */
.p-type{ position:absolute; left:0; right:0; top:29%; transform:translateY(-50%);
text-align:center; padding:0 5vw; will-change:transform,opacity; }
.p-title{ font-size:clamp(38px,9.2vw,142px); background:none; }
/* каждая буква несёт свой кусок золотой текстуры: смещение считает скрипт,
иначе background-clip:text на родителе не доходит до inline-block детей */
.p-title .ch{ display:inline-block;
background-image:url('https://clcphuket.com/_shared/texture/gold-1.webp'); background-repeat:no-repeat;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent; }
.p-sub{ margin-top:26px; font-size:clamp(13px,1.15vw,16px); font-weight:200; letter-spacing:.04em;
opacity:.9; }
.p-rule{ width:104px; height:1px; background:var(--clc-gold-hair); margin:20px auto 0; }
.p-corner{ position:absolute; bottom:26px; left:0; right:0; display:flex;
justify-content:space-between; gap:20px; padding:0 clamp(20px,5vw,80px);
font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.62; }
.p-hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
display:flex; flex-direction:column; align-items:center; gap:10px; }
.p-hint i{ display:block; width:1px; height:34px; background:linear-gradient(var(--gold),transparent);
animation:drop 2.1s ease-in-out infinite; }
@keyframes drop{ 0%{transform:scaleY(.2);transform-origin:top;opacity:.2}
50%{transform:scaleY(1);transform-origin:top;opacity:1}
51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom;opacity:.2} }
/* надпись, которая встречает уже внутри зала.
Она ложится прямо на кадр, поэтому под ней тень, а не подложка —
плашка перекрыла бы зал. */
.p-inside{ position:absolute; left:0; right:0; bottom:12vh; text-align:center;
padding:0 5vw; opacity:0; text-shadow:0 2px 24px rgba(0,0,0,.92), 0 0 60px rgba(0,0,0,.6); }
.p-inside .w{ font-family:var(--clc-font-display); font-size:clamp(26px,3.4vw,46px);
color:var(--gold); letter-spacing:.22em; }
.p-inside p{ margin-top:14px; font-size:clamp(13px,1.15vw,17px); font-weight:200; opacity:.86; }
/* ═══════════════════════════════════════════════════════════════
2. ВЕЧЕР — закреплённая сцена на три акта
═══════════════════════════════════════════════════════════════ */
.evening{ height:360vh; position:relative; }
.estage{ height:100vh; position:relative; overflow:hidden; background:#000; }
.e-bg{ position:absolute; inset:0; opacity:0; }
.e-bg img{ width:100%; height:100%; object-fit:cover;
filter:brightness(.44) contrast(1.08) saturate(.92); transform:scale(1.06); }
.e-bg::after{ content:''; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 46%, rgba(0,0,0,.72) 100%); }
.e-inner{ position:relative; z-index:2; height:100%; display:flex; align-items:center; }
.e-acts{ position:relative; width:100%; min-height:52vh; }
.e-act{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); opacity:0; }
.e-act__time{ font-size:clamp(64px,13vw,196px); line-height:.86; }
.e-act__name{ font-size:clamp(22px,2.9vw,42px); font-weight:200; margin-top:6px;
letter-spacing:.02em; }
.e-act__txt{ margin-top:22px; max-width:44ch; font-size:clamp(14px,1.25vw,18px);
font-weight:200; line-height:1.7; opacity:.84; }
.e-rail{ position:absolute; right:clamp(20px,5vw,80px); top:50%; transform:translateY(-50%);
z-index:3; display:flex; flex-direction:column; gap:16px; align-items:flex-end; }
.e-rail button{ background:none; border:0; color:var(--paper); cursor:pointer;
font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.32;
display:flex; align-items:center; gap:12px; transition:opacity .35s, color .35s; font-family:inherit; }
.e-rail button i{ display:block; width:30px; height:1px; background:currentColor; transition:width .35s; }
.e-rail button.on{ opacity:1; color:var(--gold); }
.e-rail button.on i{ width:56px; }
.e-head{ position:absolute; top:clamp(84px,12vh,116px); left:0; right:0; z-index:3; }
.e-head > div{ display:flex; justify-content:space-between; align-items:baseline; gap:20px;
max-width:1300px; margin:0 auto; }
/* ═══════════════════════════════════════════════════════════════
3. КУХНЯ И ВИНО
═══════════════════════════════════════════════════════════════ */
.sec2{ position:relative; padding-top:clamp(90px,12vh,150px); padding-bottom:clamp(90px,12vh,150px); }
.grid2{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,6vw,86px); align-items:center; }
/* арка-маска, приём брендбука */
.archshot{ position:relative; border-radius:var(--clc-arch-radius); overflow:hidden;
aspect-ratio:1/1.34; background:var(--clc-ink); }
/* запас по высоте — чтобы параллакс не открывал край кадра */
.archshot img{ position:absolute; left:0; top:-6%; width:100%; height:112%; object-fit:cover;
display:block; filter:contrast(1.04) saturate(1.04) brightness(.96);
transition:filter .75s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
.archshot:hover img{ filter:contrast(1.02) saturate(1.08) brightness(1.06); transform:scale(1.04); }
.archframe{ padding:2px; background:var(--clc-gold-edge); border-radius:var(--clc-arch-radius);
max-width:470px; width:100%; margin-left:auto; }
.counters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:clamp(20px,3vw,44px); margin-top:clamp(48px,7vh,84px);
border-top:1px solid var(--clc-gold-hair); padding-top:34px; }
.cnt b{ font-family:var(--clc-font-display); font-size:clamp(38px,4.6vw,68px); display:block;
color:var(--gold); line-height:1; }
.cnt span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.66;
display:block; margin-top:10px; line-height:1.5; }
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,22px);
margin-top:clamp(40px,6vh,72px); }
.strip figure{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--clc-ink); }
.strip img{ width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(1) brightness(.8); transform:scale(1.02);
transition:filter .7s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.strip figure:hover img{ filter:grayscale(0) brightness(1); transform:scale(1.09); }
.strip figcaption{ position:absolute; left:12px; bottom:11px; font-size:10px;
letter-spacing:.2em; text-transform:uppercase; color:var(--paper); opacity:.75;
text-shadow:0 2px 12px rgba(0,0,0,.9); }
/* ═══════════════════════════════════════════════════════════════
4. ШОУ — горизонтальная лента
═══════════════════════════════════════════════════════════════ */
.shows{ position:relative; background:#000; }
.sstage{ height:100vh; overflow:hidden; position:relative;
display:flex; flex-direction:column; justify-content:center; }
.s-head{ position:absolute; top:clamp(70px,11vh,116px); left:0; right:0; z-index:3;
display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.s-track{ display:flex; gap:clamp(14px,1.8vw,26px); align-items:flex-end;
padding:0 clamp(20px,5vw,80px); margin-top:clamp(70px,10.5vh,122px); will-change:transform; }
.card{ flex:0 0 clamp(214px,22vw,322px); }
.card__f{ padding:1px; background:linear-gradient(150deg, rgba(198,151,95,.55), rgba(198,151,95,.08) 55%, rgba(198,151,95,.42));
overflow:hidden; }
.card__img{ overflow:hidden; aspect-ratio:4/5; background:var(--clc-ink); }
.card img{ width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(1) brightness(.78) contrast(1.06); transform:scale(1.02);
transition:filter .68s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.card:hover img{ filter:grayscale(0) brightness(1) contrast(1); transform:scale(1.07); }
.card figcaption{ margin-top:13px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
color:var(--paper); opacity:.6; transition:color .3s, opacity .3s; }
.card:hover figcaption{ color:var(--gold); opacity:1; }
.card--tall{ margin-bottom:clamp(26px,4vw,54px); }
.s-note{ position:absolute; bottom:clamp(40px,6vh,66px); left:clamp(20px,5vw,80px);
z-index:3; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.45; }
.s-note--r{ left:auto; right:clamp(20px,5vw,80px); }
.s-prog{ position:absolute; bottom:clamp(22px,3.4vh,38px); left:clamp(20px,5vw,80px);
right:clamp(20px,5vw,80px); height:1px; background:rgba(198,151,95,.16); z-index:3; }
.s-prog i{ display:block; height:100%; width:0; background:var(--gold); }
/* ═══════════════════════════════════════════════════════════════
5. НАГРАДЫ
═══════════════════════════════════════════════════════════════ */
.awards{ background:var(--green); }
.aw-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,4vw,64px);
margin-top:clamp(44px,6vh,76px); }
.aw{ text-align:center; max-width:440px; margin:0 auto; width:100%; padding:clamp(30px,4vw,52px) clamp(20px,2.6vw,38px) clamp(34px,4vw,54px);
border:1px solid var(--clc-gold-hair); border-radius:var(--clc-arch-radius);
background:linear-gradient(180deg, rgba(198,151,95,.09), rgba(0,0,0,.18)); }
.aw__mark{ width:52px; margin:0 auto 22px; display:block; opacity:.95; }
.aw__year{ font-family:var(--clc-font-display); font-size:clamp(30px,3.4vw,48px); color:var(--gold);
line-height:1; }
.aw__name{ margin-top:14px; font-size:clamp(15px,1.5vw,21px); font-weight:300; line-height:1.4; }
.aw__sub{ margin-top:12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
/* ═══════════════════════════════════════════════════════════════
6. КОНТАКТЫ
═══════════════════════════════════════════════════════════════ */
.contacts{ background:#000; position:relative; }
.c-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,6vw,86px);
align-items:center; }
.c-row{ display:flex; gap:24px; align-items:baseline; padding:19px 0;
border-bottom:1px solid rgba(242,234,224,.11); }
.c-row b{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
min-width:132px; font-weight:600; }
.c-row div{ font-size:clamp(14px,1.24vw,18px); font-weight:200; }
.c-row a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--clc-gold-hair); }
.c-row a:hover{ color:var(--gold); }
.c-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }
.foot{ border-top:1px solid var(--clc-gold-hair); }
/* поле нажатия на компьютере: кнопки ленты актов и адрес в углу
набраны мелко — под ними то же невидимое поле в 44 px, что и в
общем слое. Вёрстка не двигается. */
@media(hover:hover) and (pointer:fine){
.p-corner a{ position:relative; }
.p-corner a::after{
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px; min-height:100%; }
/* кнопки актов стоят друг под другом — невидимыми полями их не развести,
поля перекрылись бы. Поэтому сами кнопки растут до 44 px, а зазор между
ними сжимается: лента занимает столько же места, набор не меняется. */
.e-rail{ gap:6px; }
.e-rail button{ min-height:44px; }
}
/* ═══ курсор-акцент ══════════════════════════════════════════ */
.cur{ position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px;
border:1px solid var(--gold); border-radius:50%; pointer-events:none; z-index:99;
opacity:0; transition:opacity .3s, background-color .3s; mix-blend-mode:difference; }
.cur.big{ background:rgba(198,151,95,.16); }
@media (pointer:coarse){ .cur{ display:none; } }
/* ═══ появление блоков ═══════════════════════════════════════
Прячем только там, где скрипт точно поднимет обратно. Без JS или
без GSAP страница обязана читаться целиком. */
.js .rv{ opacity:0; transform:translateY(28px); }
.no-gsap .rv{ opacity:1 !important; transform:none !important; }
/* Телефон первого экрана. На компьютере — тихая строка над подсказкой
«Войти», ростом с остальную мелкую фурнитуру экрана; на телефоне тот же
элемент разворачивается в кнопку во всю ширину. Нигде не снимается. */
.p-call{ position:absolute; left:clamp(20px,5vw,80px); bottom:62px; z-index:6;
display:flex; justify-content:flex-start; }
.p-call__btn{ display:inline-flex; align-items:center; gap:14px; min-height:44px;
padding:0 22px; background:transparent; color:var(--gold);
font-size:10.5px; letter-spacing:.22em; }
.p-call__btn:hover{ background:var(--gold); color:#000; }
.p-call__btn b{ font-family:var(--clc-font-display); font-weight:400; font-size:16px;
letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.p-call__addr{ color:var(--paper); text-decoration:none; }
@media(max-width:900px){
.grid2, .c-grid{ grid-template-columns:1fr; }
.strip{ grid-template-columns:repeat(2,1fr); }
.aw-grid{ grid-template-columns:1fr; }
.archframe{ max-width:100%; margin:0 auto; }
.c-row{ flex-direction:column; gap:6px; }
.c-row b{ min-width:0; }
}
/* ═══════════════════════════════════════════════════════════════
МОБИЛЬНАЯ СБОРКА
Телефон получает ТУ ЖЕ композицию, что и компьютер: все слои,
рамки, арки и ленты остаются на месте. Меняются только размеры,
отступы и направление потока — ничего не прячем.
═══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
body{ font-size:16px; }
.pad{ padding-left:22px; padding-right:22px; }
/* якорь из шапки не должен уезжать под саму шапку */
section[id]{ scroll-margin-top:74px; }
/* золотая текстура заголовков — в мобильном весе.
.p-title исключён: у него фон снят, текстуру несут буквы .ch */
.disp:not(.p-title), .p-title .ch{ background-image:url('https://clcphuket.com/_shared/texture/gold-1-mob.webp'); }
/* мелкий набор поднимаем: разрядка прописными остаётся приёмом бренда,
но кегль ниже 12 px на телефоне не читается */
.eyebrow{ font-size:15px; letter-spacing:.1em; }
.strip figcaption, .card figcaption{ font-size:12px; letter-spacing:.16em; }
/* — шапка: палец попадает — */
.nav{ padding:10px 18px; }
.nav.is-solid{ padding:8px 18px; }
.nav__logo{ width:104px; display:flex; align-items:center; min-height:46px; }
.nav__right{ margin-left:auto; gap:10px; }
.book{ display:inline-flex; align-items:center; justify-content:center;
min-height:46px; padding:0 18px; font-size:12px; letter-spacing:.14em; }
.nav__burger{ display:flex; }
/* Строка из четырёх разделов в шапку не влезает — вместо неё кнопка.
Список выезжает из-под шапки во всю её ширину, и там каждому разделу
есть где встать в палец. Ничего не теряется: те же четыре ссылки. */
.nav__links{ position:absolute; top:100%; left:0; right:0; margin:0;
flex-direction:column; align-items:stretch; gap:0; padding:0 18px;
background:rgba(0,0,0,.97); border-bottom:1px solid var(--clc-gold-hair);
max-height:0; overflow:hidden; visibility:hidden;
transition:max-height .3s ease, padding .3s ease, visibility .3s; }
.nav__links.is-open{ max-height:70vh; visibility:visible; padding:4px 18px 12px; }
/* общий clc2026.css на узком экране гасит ссылки шапки — возвращаем их:
теперь они живут в раскрывающемся списке */
.nav .nav__links a{ display:flex; align-items:center; min-height:48px;
font-size:14px; letter-spacing:.14em; opacity:.92;
border-bottom:1px solid rgba(198,151,95,.13); }
.nav .nav__links a:last-child{ border-bottom:0; }
/* — первый экран: тот же портал, только собран в столбец — */
/* Ход портала на телефоне короче: сцену держит закрепление, и место
под него добавляет сам ScrollTrigger. Высоту секции не задаём. */
.portal, html.js-gsap .portal{ height:auto; }
.pstage{ height:auto; min-height:100vh; min-height:100svh; overflow:hidden;
display:flex; flex-direction:column; align-items:center;
padding:74px 22px calc(24px + env(safe-area-inset-bottom)); }
.p-type{ position:static; transform:none; padding:0; order:1; width:100%; }
.p-title{ font-size:clamp(40px,11.4vw,58px); }
.p-rule{ margin-top:16px; width:88px; }
.p-sub{ margin-top:16px; font-size:16px; line-height:1.55; letter-spacing:.01em;
opacity:.92; max-width:22em; margin-left:auto; margin-right:auto; }
/* окно портала целиком переезжает в поток: свечение, свет на полу,
кадр в арке, золотой кант и внешнее кольцо — всё остаётся */
/* тот же слой арки, что и на компьютере: на телефоне он растёт из
собственного центра — арка стоит в середине столбца */
.p-arch{ position:relative; inset:auto; order:2; flex:0 0 auto;
width:min(64vw,246px); aspect-ratio:1/1.42; margin:18px auto 0;
transform-origin:50% 50%; }
.p-glow{ left:50%; top:46%; width:150vw; height:150vw; filter:blur(18px); }
.p-spill{ left:50%; top:100%; width:126%; height:34%; filter:blur(9px); }
.p-clip{ position:absolute; inset:0; width:100%; height:100%;
clip-path:none !important; overflow:hidden; will-change:auto;
border-radius:50% 50% 0 0 / 35% 35% 0 0; }
.pstage .p-photo{ filter:brightness(1) contrast(1.04) saturate(1.06); }
.p-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,.36) 100%); }
/* кант ложится ровно по краю арки, кольцо — чуть шире */
.p-frame{ left:0; top:0; width:100%; height:100%;
border-width:2px; border-radius:50% 50% 0 0 / 35% 35% 0 0;
box-shadow:0 0 34px rgba(198,151,95,.26), inset 0 0 34px rgba(198,151,95,.08); }
.p-frame2{ left:-11px; top:-11px; width:calc(100% + 22px); height:calc(100% + 22px);
border-radius:50% 50% 0 0 / 36% 36% 0 0; }
/* Надпись, которой компьютер встречает уже внутри зала. На телефоне она
сначала стоит под аркой, а к концу въезда оказывается поверх кадра —
поэтому ей нужен свой слой и подложка тенью, иначе текст сядет на фото. */
/* inset:auto обязателен: на компьютере эта надпись висит абсолютом с
bottom:12vh, и без сброса относительное позиционирование утаскивало
её на 12vh вверх — прямо на кадр в арке. */
.p-inside{ position:relative; inset:auto; z-index:3; opacity:1; order:3; padding:0;
width:100%; margin-top:18px; }
.p-inside .w{ font-size:21px; letter-spacing:.26em; }
.p-inside p{ margin-top:8px; font-size:15px; opacity:.84; }
/* подписи из углов первого экрана — в один столбец под аркой */
.p-corner{ position:static; padding:0; order:4; flex-direction:column;
align-items:center; justify-content:center; gap:6px; margin-top:14px;
font-size:11px; letter-spacing:.16em; text-align:center; opacity:.68; }
.p-hint{ position:static; transform:none; order:6; margin-top:14px;
font-size:10.5px; letter-spacing:.28em; gap:8px; }
.p-hint i{ height:24px; }
/* тот же телефон, что на компьютере, только развёрнутый в кнопку */
.p-call{ position:static; display:flex; order:5; flex-direction:column;
align-items:center; gap:12px; width:100%; margin-top:16px; }
.p-call__btn{ display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:3px; width:100%; max-width:360px; min-height:62px; padding:9px 18px;
background:var(--gold); color:#000; font-size:12px; letter-spacing:.2em; line-height:1.1; }
.p-call__btn b{ font-size:18px; font-weight:400; letter-spacing:.02em;
text-transform:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.c-row a{ white-space:nowrap; }
.p-call__addr{ color:var(--paper); opacity:.74; text-decoration:none; font-size:14px;
letter-spacing:.03em; text-align:center; line-height:1.4;
display:flex; align-items:center; min-height:44px; padding:0 4px; }
/* — вечер: три акта списком, кадр каждого акта переезжает к нему в арку — */
.evening{ height:auto; }
.estage{ height:auto; overflow:visible;
padding:clamp(64px,9vh,96px) 0 clamp(52px,7vh,80px); }
.e-inner{ display:block; height:auto; }
.e-head{ position:static; padding:0 !important; }
.e-head > div{ display:block; }
.e-head .eyebrow{ display:block; }
.e-head .eyebrow--dim{ margin-top:8px; }
/* полноэкранный фон акта становится его аркой */
.e-bg{ position:relative; inset:auto; opacity:1 !important;
width:min(58vw,206px); aspect-ratio:1/1.42; margin:0 0 22px;
border:2px solid var(--gold); border-radius:50% 50% 0 0 / 35% 35% 0 0;
overflow:hidden; box-shadow:0 0 26px rgba(198,151,95,.18); }
.e-bg + .e-bg{ margin-top:22px; }
.e-bg img{ filter:contrast(1.04) saturate(1.03); transform:none !important; }
.e-bg::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.4) 100%); }
/* лента актов: три кнопки строкой под заголовком */
.e-rail{ position:static; transform:none; z-index:auto; width:100%;
flex-direction:row; align-items:stretch; gap:12px; margin-top:24px; }
.e-rail button{ flex:1 1 0; flex-direction:column; align-items:flex-start;
justify-content:flex-end; gap:9px; min-height:44px; padding:0;
font-size:11px; letter-spacing:.14em; opacity:.55; }
.e-rail button i{ width:100%; height:1px; background:var(--clc-gold-hair); }
.e-rail button.on{ opacity:1; color:var(--gold); }
.e-rail button.on i{ width:100%; background:var(--gold); }
.e-acts{ min-height:0; margin-top:38px; }
.e-act{ position:static; transform:none; opacity:1;
padding-top:36px; border-top:1px solid var(--clc-gold-hair); }
.e-act:first-child{ padding-top:0; border-top:0; }
.e-act + .e-act{ margin-top:40px; }
.e-act__time{ font-size:clamp(58px,17vw,80px); }
.e-act__name{ font-size:clamp(22px,6.4vw,28px); margin-top:8px; }
.e-act__txt{ margin-top:16px; font-size:16px; line-height:1.62; opacity:.86; }
/* — кухня и вино — */
.sec2{ padding-top:clamp(64px,9vh,96px); padding-bottom:clamp(56px,8vh,88px); }
.note{ font-size:16px; line-height:1.65; }
.archframe{ max-width:330px; }
.counters{ grid-template-columns:repeat(2,1fr); gap:26px 20px; margin-top:44px; }
.cnt b{ font-size:clamp(34px,10vw,46px); }
.cnt span{ font-size:12px; letter-spacing:.12em; }
/* на телефоне наведения нет — кадры сразу в цвете, иначе клиент
увидит чёрно-белую страницу и ничего с этим сделать не сможет */
.strip img{ filter:none; transform:none; }
.card img{ filter:contrast(1.02); transform:none; }
.archshot.lit img{ filter:contrast(1.02) saturate(1.06) brightness(1.03); }
.strip{ gap:12px; margin-top:44px; }
.sec2 .btn{ display:flex; align-items:center; justify-content:center;
width:100%; max-width:360px; min-height:54px; padding:0 18px;
font-size:13px; letter-spacing:.14em; margin-top:30px; }
/* — афиша: та же лента, только едет пальцем, без пина — */
.sstage{ height:auto; overflow:visible; justify-content:flex-start;
padding:clamp(64px,9vh,96px) 0 clamp(48px,7vh,72px); }
.s-head{ position:static; display:block; padding:0 22px; order:1; }
.s-head p{ text-align:left !important; max-width:none; margin-top:14px; }
.s-track{ order:2; margin-top:26px; padding:4px 22px 6px; will-change:auto;
overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:22px;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
transform:none !important; align-items:flex-start; gap:14px; }
.s-track::-webkit-scrollbar{ display:none; }
.card{ flex:0 0 min(62vw,250px); scroll-snap-align:start; }
.card--tall{ margin-bottom:0; }
.card figcaption{ font-size:12px; opacity:.75; }
.s-note{ position:static; left:auto; right:auto; margin:16px 22px 0;
opacity:.6; font-size:12px; letter-spacing:.18em; }
/* исключение: подсказка про наведение мышью на телефоне бессмысленна */
.s-note--desk{ display:none; }
.s-note--r{ order:4; }
/* полоса хода ленты остаётся — её ведёт палец */
.s-prog{ position:static; left:auto; right:auto; order:3;
margin:20px 22px 0; height:1px; }
/* — награды — */
.awards .eyebrow, .aw__sub, .awards .note{ color:var(--clc-gold-lite); }
.awards .note{ text-align:left !important; max-width:none; opacity:.8; }
.aw{ padding:30px 22px 34px; }
.aw__name{ font-size:18px; }
.aw__sub{ font-size:13px; letter-spacing:.14em; opacity:.88; }
/* — контакты: телефон и адрес крупно, пальцем не промахнуться — */
.c-row{ padding:15px 0; }
.c-row b{ font-size:12px; letter-spacing:.18em; }
.c-row div{ font-size:16px; line-height:1.5; }
.c-row a{ display:inline-flex; align-items:center; min-height:44px; font-size:17px;
color:var(--gold); border-bottom:0; letter-spacing:.02em; }
.c-row a + a{ margin-left:0; }
.c-cta{ margin-top:28px; gap:12px; }
.c-cta .btn{ display:flex; align-items:center; justify-content:center;
width:100%; min-height:54px; padding:0 18px; font-size:13px; letter-spacing:.12em; }
.foot{ padding:34px 22px calc(30px + env(safe-area-inset-bottom));
flex-direction:column; gap:12px; font-size:14px; text-align:left; }
.foot a{ display:inline-flex; align-items:center; min-height:44px; font-size:17px; }
}
/* короткий экран (iPhone SE и режимы с крупным шрифтом):
ничего не убираем — всё то же самое, но мельче и плотнее */
@media(max-width:900px) and (max-height:700px){
.pstage{ padding-top:64px; }
.p-title{ font-size:clamp(36px,10vw,46px); }
.p-sub{ margin-top:12px; font-size:15px; }
.p-arch{ width:min(52vw,196px); margin-top:16px; }
.p-inside{ margin-top:16px; }
.p-inside .w{ font-size:18px; letter-spacing:.22em; }
.p-inside p{ margin-top:6px; font-size:13.5px; }
.p-corner{ margin-top:12px; gap:5px; font-size:10.5px; }
.p-call{ margin-top:14px; gap:6px; }
.p-call__addr{ font-size:12.5px; }
.p-hint{ margin-top:12px; }
.p-hint i{ height:18px; }
}
@media(prefers-reduced-motion:reduce){
.p-hint i{ animation:none; }
.js .rv{ opacity:1; transform:none; }
html{ scroll-behavior:auto; }
*{ transition-duration:.01ms !important; animation-duration:.01ms !important;
animation-iteration-count:1 !important; }
}
/* clc-bw-color */
/* фото чёрно-белые, оживают цветом по нажатию и наведению */
.clc-bw img,.arch img,figure img,.card img,.poster img{
filter:grayscale(1) contrast(1.06) brightness(.94);
transition:filter .55s ease, transform .55s ease}
.clc-bw img:hover,.arch:hover img,figure:hover img,.card:hover img,.poster:hover img,
.clc-lit img{filter:grayscale(0) contrast(1.02) brightness(1);transform:scale(1.02)}
@media(hover:none){
.clc-bw img,.arch img,figure img,.card img,.poster img{filter:grayscale(1) contrast(1.06) brightness(.94)}
.clc-lit img{filter:grayscale(0)!important;transform:scale(1.02)}
}
/* clc-bw-all */
main img, section img, .sec img, article img, .wrap img,
img[src*="photo/"], img[src*="https://clc.kolodiy-ai.com/img/"]{
filter:grayscale(1) contrast(1.06) brightness(.94);
transition:filter .55s ease, transform .55s ease}
main img:hover, section img:hover, .sec img:hover, article img:hover,
img[src*="photo/"]:hover, .clc-lit img, .clc-lit{filter:grayscale(0)!important;transform:scale(1.02)}
.nav img, header img, .foot img, img[src*="logo"], img[src*="clc-"]{filter:none!important;transform:none!important}
/* clc-portal-tap: кадр в портале загорается по нажатию и приближается */
.clc-lit img, .clc-lit .card__img img, img.clc-lit,
.card.clc-lit img, figure.clc-lit img, .rv.clc-lit img{
filter:grayscale(0) contrast(1.02) brightness(1.04) saturate(1.06)!important;
transform:scale(1.06)!important;
transition:filter .6s ease, transform .8s cubic-bezier(.22,.61,.36,1)!important}
.clc-lit{box-shadow:0 0 54px rgba(198,151,95,.34)!important;
transition:box-shadow .6s ease}
/* кадр слегка дышит при наведении — подсказка, что он живой */
.card img, .card__img img, figure img{transition:filter .6s ease, transform .8s cubic-bezier(.22,.61,.36,1)}
.card:hover img, figure:hover img{transform:scale(1.03)}