/* Smart Coffee — единая система сайта. Две темы на одних токенах: светлая (сайт сети) и тёмная (кампания). Тему включает класс на : по умолчанию светлая, .dark — тёмная. */ /* ---------- шрифты бренда ---------- */ @font-face{font-family:'Bolyar';src:url('/assets/fonts/fmbolyarsanspro-900.woff2') format('woff2'); font-weight:900;font-display:swap} @font-face{font-family:'Bolyar';src:url('/assets/fonts/fmbolyarsanspro-700.woff2') format('woff2'); font-weight:700;font-display:swap} @font-face{font-family:'Mont';src:url('/assets/fonts/montserrat-regular.woff2') format('woff2'); font-weight:400;font-display:swap} @font-face{font-family:'Mont';src:url('/assets/fonts/montserrat-semibold.woff2') format('woff2'); font-weight:600;font-display:swap} @font-face{font-family:'Mont';src:url('/assets/fonts/montserrat-bold.woff2') format('woff2'); font-weight:700;font-display:swap} :root{ --aqua:#2296AF; /* главный фирменный */ --aqua-light:#8FD9E8; /* из знака-гор */ --aqua-pale:#CFEFF6; --pink:#E983B2; /* из карты лояльности */ --ink:#07222A; --ink-2:#0C3340; /* роли — переопределяются в тёмной теме */ --bg:#FAF7F3; --bg-2:#FFFFFF; --fg:#12262C; --fg-soft:rgba(18,38,44,.62); --line:rgba(18,38,44,.12); --btn-bg:var(--ink); --btn-fg:#fff; --accent:var(--aqua); } body.dark{ --bg:#07222A; --bg-2:rgba(255,255,255,.05); --fg:#FFFFFF; --fg-soft:rgba(255,255,255,.68); --line:rgba(143,217,232,.22); --btn-bg:var(--aqua-light); --btn-fg:#06252E; --accent:var(--aqua-light); color-scheme:dark; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--fg); font-family:'Mont',system-ui,-apple-system,sans-serif; min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased; } body.dark::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(130% 58% at 50% 18%, #12495C 0%, var(--ink) 70%); } img{max-width:100%;display:block} a{color:inherit} .wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:20px} .wrap-narrow{max-width:680px} /* ---------- типографика ---------- */ /* Bolyar в верхнем регистре очень широкий: длинное слово вроде «КОНФИДЕНЦИАЛЬНОСТИ» вылезает за экран телефона и тащит за собой горизонтальный скролл всей страницы. Перенос внутри слова — страховка. Разрядка положительная: с отрицательной круглые буквы слипались — в «ОСЕННЯЯ» О и С наезжали друг на друга на телефоне. */ h1,h2,h3{font-family:'Bolyar',system-ui,sans-serif;font-weight:900; text-transform:uppercase;line-height:.96;letter-spacing:.015em; overflow-wrap:break-word} h1{font-size:clamp(32px,8vw,68px)} h2{font-size:clamp(26px,5.4vw,44px)} h3{font-size:clamp(18px,3.4vw,24px);font-weight:700} p{line-height:1.62} .kicker{font:700 10.5px 'Mont',sans-serif;letter-spacing:.34em;text-transform:uppercase; color:var(--accent)} .lead{font-size:clamp(16px,2.2vw,19px);line-height:1.55;color:var(--fg-soft);max-width:34em} .note{font-size:13px;color:var(--fg-soft)} .center{text-align:center} .center .lead{margin-inline:auto} /* ---------- кнопки ---------- */ .btn{ display:inline-block;padding:16px 30px;border:none;border-radius:100px;cursor:pointer; background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;text-align:center; font:700 14px 'Mont',sans-serif;letter-spacing:.1em;text-transform:uppercase; transition:transform .12s ease,opacity .15s ease;touch-action:manipulation; } .btn:active{transform:scale(.975)} .btn:hover{opacity:.88} .btn:disabled{opacity:.4;cursor:default} .btn.ghost{background:transparent;color:var(--fg);border:1.6px solid var(--line)} .btn.ghost:hover{background:var(--bg-2);opacity:1} .btn.wide{display:block;width:min(360px,100%);margin-inline:auto} .btn.sm{padding:11px 18px;font-size:12px;letter-spacing:.08em} /* ---------- шапка ---------- */ .topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topbar .row{display:flex;align-items:center;gap:18px;height:62px} .topbar .logo{flex:none;display:flex;align-items:center} .topbar .logo img{height:17px;width:auto} .topbar nav{display:none;gap:26px;margin-left:8px} .topbar nav a{text-decoration:none;font:600 14px 'Mont',sans-serif;color:var(--fg);opacity:.78} .topbar nav a:hover,.topbar nav a[aria-current]{opacity:1;color:var(--accent)} .topbar .spacer{flex:1} /* Кнопка в шапке не переносится: на телефоне «Найти кофейню» в две строки растягивает шапку почти вдвое и съедает первый экран. */ .topbar .btn{padding:11px 18px;font-size:11.5px;white-space:nowrap} @media(max-width:479px){ .topbar .btn{padding:10px 13px;font-size:10.5px;letter-spacing:.06em} } @media(min-width:780px){ .topbar nav{display:flex} } /* на телефоне навигация уезжает под шапку одной строкой — без бургера: трёх пунктов слишком мало, чтобы прятать их за кнопкой */ .subnav{display:flex;gap:18px;padding-block:10px;border-bottom:1px solid var(--line); overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none} .subnav::-webkit-scrollbar{display:none} .subnav a{text-decoration:none;white-space:nowrap;font:600 13.5px 'Mont',sans-serif; color:var(--fg);opacity:.75} .subnav a[aria-current]{color:var(--accent);opacity:1} @media(min-width:780px){ .subnav{display:none} } /* ---------- секции ---------- */ section{padding-block:clamp(44px,7vw,86px)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px; margin-bottom:26px;flex-wrap:wrap} .sec-head h2{max-width:14em} /* ---------- hero главной ---------- На телефоне кадр работает фоном, текст лежит поверх затемнения. На широком экране кадр встаёт рядом с текстом: вертикальная съёмка напитка в полосе 16:9 теряет и стакан, и сцену вокруг него. */ .hero{position:relative;border-radius:26px;overflow:hidden;margin-top:18px;isolation:isolate; background:linear-gradient(135deg,#123A47,#2296AF 55%,#8FD9E8); min-height:min(78vh,620px);display:flex;align-items:flex-end} .hero .hero-pic{position:absolute;inset:0;z-index:-2} .hero .hero-pic img{width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(4,20,26,.15) 25%,rgba(4,20,26,.78))} .hero .inner{padding:clamp(22px,4vw,44px);color:#fff;width:100%} /* В hero заголовок не рвём по слогам: «ОСЕННЯЯ ПРЕМЬЕРА» должна читаться целыми словами, поэтому кегль подбирается по ширине колонки. */ .hero h1{color:#fff;max-width:11em;text-shadow:0 2px 30px rgba(0,0,0,.25); font-size:clamp(30px,6.4vw,56px);overflow-wrap:normal} .hero .kicker{color:var(--aqua-light)} .hero p{margin-top:14px;max-width:26em;font-size:clamp(15px,2vw,18px);opacity:.92} .hero .btn{margin-top:22px;background:#fff;color:var(--ink)} /* Осенняя премьера: тот же театр, что в фирменном плакате — тёмный занавес, золотые уголки, крупный Bolyar. Названия напитков отсылают к историям, поэтому и подача афишная, а не «сезонное предложение». */ .hero-autumn{background:linear-gradient(135deg,#2A1017 0%,#43161F 55%,#2A1017 100%)} .hero-autumn .kicker{color:#DEB868} .hero-autumn .btn{background:#DEB868;color:#2A1017} .hero-autumn .inner{position:relative} .corner{position:absolute;width:54px;height:54px;pointer-events:none;opacity:.85; background-repeat:no-repeat;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23DEB868' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 56 L4 20 C4 11 11 4 20 4 L56 4'/%3E%3Cpath d='M12 44 C12 26 26 12 44 12'/%3E%3Cpath d='M20 20 c0 -5 4 -9 9 -9 s9 4 9 9 -4 9 -9 9'/%3E%3C/g%3E%3C/svg%3E")} .corner.tl{top:-2px;left:-4px} .corner.br{bottom:-2px;right:-4px;transform:rotate(180deg)} @media(max-width:600px){ .corner{width:38px;height:38px} } @media(min-width:860px){ /* minmax(0,…): без него колонка с текстом раздувается по самой длинной строке и кадр не добирает до края блока. */ .hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:stretch;min-height:min(72vh,580px)} .hero::after{display:none} .hero .hero-pic{position:relative;inset:auto;z-index:0;order:2; height:100%;justify-self:stretch} .hero .inner{align-self:center} .hero h1{text-shadow:none} .hero .inner{padding:clamp(30px,3.4vw,52px)} } /* ---------- карточки напитков ---------- */ .drinks{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} @media(min-width:700px){.drinks{grid-template-columns:repeat(3,1fr);gap:18px}} @media(min-width:980px){.drinks{grid-template-columns:repeat(4,1fr)}} /* Витрина премьеры — ровно три позиции: в четырёхколоночной сетке они выглядели бы как недостающая четвёртая. */ @media(min-width:980px){.drinks.cols-3{grid-template-columns:repeat(3,1fr)}} .dcard{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;overflow:hidden; display:flex;flex-direction:column} .dcard .pic{aspect-ratio:4/5;position:relative;overflow:hidden; background:linear-gradient(150deg,#0E4657,#2296AF 70%,#8FD9E8)} .dcard .pic img{width:100%;height:100%;object-fit:cover} .dcard .pic.empty{aspect-ratio:auto;height:6px;background:linear-gradient(90deg,var(--aqua),var(--aqua-light))} .dcard .pic .mark{position:absolute;inset:auto 0 0 0;padding:10px 12px;color:#fff; font:700 10px 'Mont',sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.75} .dcard .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px} .badge{font:700 9.5px 'Mont',sans-serif;letter-spacing:.14em;text-transform:uppercase; padding:5px 9px;border-radius:100px;background:var(--aqua-light);color:#06252E} .badge.season{background:var(--pink);color:#3A1226} .dcard .body{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1} .dcard h3{font-size:16px;line-height:1.05} .dcard .kind{font:600 10.5px 'Mont',sans-serif;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin-bottom:6px} .dcard .comp{font-size:12.5px;line-height:1.5;color:var(--fg-soft);margin-top:7px} .dcard .price{margin-top:auto;padding-top:12px;display:flex;gap:10px;flex-wrap:wrap; font:700 14px 'Mont',sans-serif} .dcard .price span{color:var(--fg-soft);font-weight:400;font-size:12.5px} /* ---------- кофейни ---------- */ .locs{display:grid;gap:16px} @media(min-width:760px){.locs{grid-template-columns:repeat(2,1fr)}} @media(min-width:1040px){.locs{grid-template-columns:repeat(3,1fr)}} .loc{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;overflow:hidden; display:flex;flex-direction:column;container-type:inline-size} .loc .pic{aspect-ratio:16/9;background:linear-gradient(135deg,#2296AF,#8FD9E8 65%,#CFEFF6); display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72); font:700 10px 'Mont',sans-serif;letter-spacing:.2em} .loc .pic.empty{aspect-ratio:5/1} .loc .pic img{width:100%;height:100%;object-fit:cover} .loc .body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1} .loc .top{display:flex;align-items:center;gap:10px} /* Кегль названия — от ширины карточки: длинное слово («Тракторозаводском») иначе вылезает за край на экране 320 px и в узкой колонке десктопа. */ .loc h3{font-size:clamp(15px,5.2cqi,19px);min-width:0;hyphens:auto;-webkit-hyphens:auto} .loc .state{margin-left:auto;flex:none;font:700 9px 'Mont',sans-serif;letter-spacing:.12em; padding:5px 10px;border-radius:100px;background:rgba(29,138,95,.12);color:#1B8159} .loc .state.closed{background:var(--bg);color:var(--fg-soft)} body.dark .loc .state{background:rgba(143,217,232,.14);color:var(--aqua-light)} .loc .addr{margin-top:10px;font-size:15px;font-weight:600} .loc .mark,.loc .hours{margin-top:4px;font-size:13.5px;color:var(--fg-soft)} .loc .draft{margin-top:12px;font:600 11.5px 'Mont',sans-serif;line-height:1.45; border-left:3px solid var(--pink);padding-left:11px;color:var(--fg-soft)} .loc .acts{display:flex;gap:8px;margin-top:16px} .loc .acts .btn{flex:1;padding:12px 6px;font-size:11.5px;letter-spacing:.06em} .loc .acts .btn:first-child{flex:1.3} /* ---------- тёмный блок-дверь в кампанию ---------- */ .gate{background:var(--ink);border-radius:26px;overflow:hidden;position:relative; display:grid;gap:10px;padding:clamp(26px,5vw,54px);color:#fff;text-align:center; isolation:isolate} .gate::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(90% 70% at 50% 12%,#14586E 0%,var(--ink) 70%)} .gate .kicker{color:var(--aqua-light)} .gate h2{color:#fff;margin-top:6px} .gate p{color:rgba(255,255,255,.7);max-width:30em;margin:12px auto 0} .gate .btn{margin-top:22px;background:var(--aqua-light);color:#06252E;justify-self:center} .gate .obj{display:flex;justify-content:center;margin-bottom:6px} .gate .obj svg{width:min(190px,46vw);height:auto} /* ---------- футер ---------- */ .foot{border-top:1px solid var(--line);padding-block:36px 30px;margin-top:20px} .foot .cols{display:grid;gap:22px;grid-template-columns:1fr} @media(min-width:700px){.foot .cols{grid-template-columns:1.4fr 1fr 1fr}} .foot .slogan{font-family:'Bolyar',sans-serif;font-weight:700;font-size:15px; letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .foot h4{font:700 10px 'Mont',sans-serif;letter-spacing:.24em;text-transform:uppercase; color:var(--fg-soft);margin-bottom:10px} .foot ul{list-style:none;display:grid;gap:8px} .foot a{text-decoration:none;font-size:14px;opacity:.82} .foot a:hover{opacity:1;color:var(--accent)} .foot .copy{margin-top:26px;font-size:12px;color:var(--fg-soft)} /* ---------- страница меню ---------- */ .catbar{position:sticky;top:62px;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .catbar .row{display:flex;gap:8px;overflow-x:auto;padding-block:12px; -ms-overflow-style:none;scrollbar-width:none} .catbar .row::-webkit-scrollbar{display:none} .catbar a{flex:none;text-decoration:none;padding:9px 15px;border-radius:100px; border:1px solid var(--line);font:600 13px 'Mont',sans-serif;white-space:nowrap} .catbar a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)} body.dark .catbar a[aria-current]{background:var(--aqua-light);color:#06252E} .cat{scroll-margin-top:124px;padding-block:clamp(28px,4vw,44px) 0} .cat h2{margin-bottom:18px} .cat .cat-note{font-size:14px;color:var(--fg-soft);margin:-10px 0 18px} /* пропорция самого кадра 2400×1350: иная обрезала бы обложку и увеличивала до пикселей */ /* Заголовок страницы меню стоит над липкой лентой категорий, поэтому снизу отступа нет: воздух между ними даёт сама лента. */ .menu-head{padding-block:clamp(22px,4vw,40px) clamp(12px,2vw,18px)} .cat-cover{border-radius:20px;overflow:hidden;margin-bottom:18px;aspect-ratio:16/9} .cat-cover img{width:100%;height:100%;object-fit:cover} .draft-note{border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:12px; padding:13px 15px;font-size:13.5px;line-height:1.55;color:var(--fg-soft);margin-top:18px} /* ---------- документы (правила, политика, пресс) ---------- */ .doc{max-width:720px} .doc h1{font-size:clamp(25px,5.2vw,44px);line-height:1.04} .doc h2{font-family:'Mont',sans-serif;font-weight:700;font-size:12px;letter-spacing:.26em; text-transform:uppercase;color:var(--accent);margin:34px 0 12px} .doc p,.doc li{font-size:15.5px;line-height:1.65;color:var(--fg-soft)} .doc p+p{margin-top:12px} .doc ul,.doc ol{padding-left:20px;margin-top:10px;display:grid;gap:8px} .doc b,.doc strong{color:var(--fg)} .doc a{color:var(--accent)} .facts{border:1px solid var(--line);border-radius:16px;padding:6px 16px;margin-top:12px} .facts div{display:flex;flex-wrap:wrap;gap:10px;padding-block:11px; border-bottom:1px solid var(--line);font-size:14.5px} .facts div:last-child{border:none} .facts dt{flex:0 0 120px;color:var(--fg-soft)} .facts dd{flex:1;min-width:55%} /* ---------- служебное ---------- */ .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .err{color:#C0392B;font-size:14px;margin-top:12px;text-align:center} body.dark .err{color:#FFB59B} [hidden]{display:none!important} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}} /* ===================================================================== Обновление 12.09.2026: шапка, типографика на телефоне, премьера, предзаказ, анимации. Блок стоит последним и переопределяет правила выше. ===================================================================== */ :root{--hdr:62px;--ease:cubic-bezier(.2,.8,.2,1)} /* ---------- типографика: подпись над заголовком больше не наезжает ---------- У Bolyar высокие прописные, и при line-height .96 верх заголовка залезал на подпись на 6–7 px на любой ширине. */ .kicker{display:block;margin-bottom:10px;line-height:1.35} h1,h2{line-height:1.04} .sec-head .kicker{margin-bottom:8px} .lead{overflow-wrap:break-word} .doc code{font-size:.9em;overflow-wrap:anywhere} /* ---------- шапка: одна липкая плашка вместе со строкой разделов ---------- */ .topbar{view-transition-name:topbar;transition:box-shadow .3s var(--ease),background .3s} .topbar.scrolled{box-shadow:0 10px 30px rgba(7,34,42,.08)} body.dark .topbar.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)} .topbar nav a{position:relative;padding-block:8px;transition:color .2s,opacity .2s} .topbar nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px; background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .topbar nav a:hover::after,.topbar nav a[aria-current]::after{transform:scaleX(1)} .topbar .btn-cta{display:none} @media(min-width:780px){ .topbar .btn-cta{display:inline-block} } .topbar .subnav{display:block;padding:0;border-bottom:0;border-top:1px solid var(--line);overflow:visible} .topbar .subnav .wrap{display:flex;align-items:center;gap:18px;padding-block:9px;overflow-x:auto; -ms-overflow-style:none;scrollbar-width:none} .topbar .subnav .wrap::-webkit-scrollbar{display:none} .topbar .subnav a{flex:none} .topbar .subnav a.pill{margin-left:auto;padding:6px 13px;border-radius:100px;opacity:1; background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:12.5px} /* Узкие телефоны (360 px и меньше): четыре пункта должны влезать без прокрутки, иначе «Предзаказ» — самая нужная кнопка — обрезается краем. */ @media(max-width:379px){ .topbar .subnav .wrap{gap:12px;padding-inline:16px} .topbar .subnav a{font-size:12.5px} .topbar .subnav a.pill{padding:5px 10px;font-size:12px} } /* На телефоне плакат занимает всю ширину, а у него свои золотые уголки — наши поверх давали двойной орнамент. */ @media(max-width:859px){ .premiere .corner{display:none} } /* Список кофеен идёт сразу за блоком предзаказа: отступ обычной секции давал между ними пустую полосу. */ section.locs{padding-block:0 clamp(30px,5vw,60px)} /* Названия напитков в двухколоночной сетке телефона: при 16 px широкий Bolyar не помещал «ЧЕРНИЧНОЕ» в колонку, и слово рвалось посередине. Кегль считаем от ширины экрана, а перенос разрешаем только по слогам. */ .dcard h3{font-size:clamp(13px,3.7vw,17px);letter-spacing:0;overflow-wrap:normal; hyphens:auto;-webkit-hyphens:auto} @media(min-width:700px){ .dcard h3{font-size:clamp(15px,1.5vw,18px)} } /* На 320 px две колонки дают название в четыре строки и состав по слову в строке — там карточки идут в одну колонку. */ @media(max-width:359px){ .drinks{grid-template-columns:1fr} .dcard h3{font-size:17px} } /* Заголовок категории при переходе из ленты должен стоять ниже самой ленты. Общее правило [id] шло позже и с той же специфичностью перебивало отступ категорий — заголовок уезжал под ленту. */ .cat[id]{scroll-margin-top:calc(var(--hdr) + 86px)} @media(max-width:339px){ .topbar .subnav .wrap{gap:9px;padding-inline:12px} .topbar .subnav a{font-size:11.5px;letter-spacing:-.01em} .topbar .subnav a.pill{padding:5px 8px;font-size:11px} } @media(min-width:780px){ .topbar .subnav{display:none} } /* меню и якоря считают отступ от реальной высоты шапки (её меряет site.js) */ .catbar{top:var(--hdr)} .cat{scroll-margin-top:calc(var(--hdr) + 64px)} [id]{scroll-margin-top:calc(var(--hdr) + 16px)} .catbar a{transition:background .25s,color .25s,border-color .25s} /* ---------- кнопки ---------- */ .btn{position:relative;overflow:hidden;isolation:isolate; transition:translate .2s var(--ease),box-shadow .3s var(--ease),background .2s,opacity .2s} .btn:hover{opacity:1;translate:0 -2px;box-shadow:0 12px 26px rgba(7,34,42,.18)} .btn:active{translate:0 0;scale:.97;box-shadow:none} /* блик, пробегающий по кнопке при наведении */ .btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%); transform:translateX(-120%);transition:transform .75s var(--ease)} .btn:hover::after{transform:translateX(120%)} .btn:focus-visible{outline:3px solid var(--aqua-light);outline-offset:3px} .btn:disabled,.btn:disabled:hover{translate:none;scale:none;box-shadow:none} .btn.ghost:hover{box-shadow:none} .btn .arr{display:inline-block;margin-left:8px;transition:transform .3s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .btn .ico{width:18px;height:18px;margin-right:8px;vertical-align:-4px;flex:none} .btn-gold{background:#DEB868;color:#2A1017} .btn-line{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.42)} .btn-line:hover{background:rgba(255,255,255,.08);box-shadow:none} .btn-tg{background:#2AABEE;color:#fff} .btn-max{background:linear-gradient(135deg,#3B82F6,#8B5CF6);color:#fff} .btn.is-soon{opacity:.62} .btn.is-soon:hover{opacity:.8;translate:none;box-shadow:none} /* ---------- карточки: подъём и лёгкий зум фото ---------- */ .dcard,.loc{transition:translate .35s var(--ease),box-shadow .35s var(--ease)} .dcard .pic img,.loc .pic img,.cat-cover img{transition:scale .9s var(--ease)} @media(hover:hover){ .dcard:hover,.loc:hover{translate:0 -5px;box-shadow:0 20px 44px rgba(7,34,42,.13)} .dcard:hover .pic img,.cat-cover:hover img{scale:1.05} } /* ---------- появление при прокрутке ---------- */ .js [data-reveal],.js .reveal-item{opacity:0;transform:translateY(24px); transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)} .js [data-reveal].in,.js .reveal-item.in{opacity:1;transform:none} /* ---------- заглушки загрузки ---------- */ .skel{border-radius:18px;background:linear-gradient(90deg,rgba(18,38,44,.06) 25%,rgba(18,38,44,.13) 40%,rgba(18,38,44,.06) 60%); background-size:300% 100%;animation:skel 1.3s ease-in-out infinite} body.dark .skel{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 40%,rgba(255,255,255,.05) 60%);background-size:300% 100%} .skel-drink{aspect-ratio:4/6.4} .skel-loc{height:250px} @keyframes skel{from{background-position:100% 50%}to{background-position:0 50%}} /* ---------- осенняя премьера: плакат целиком ---------- */ .premiere{position:relative;margin-top:18px;border-radius:28px;overflow:hidden;isolation:isolate;color:#fff; display:grid;gap:22px;padding:18px 18px 26px; background:radial-gradient(120% 90% at 78% 8%,#5E1F2C 0%,#2C1018 58%,#1B090E 100%)} /* складки занавеса — как фон самого плаката */ .premiere::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(0,0,0,.26) 0 22px,rgba(255,255,255,.025) 22px 46px)} .premiere .corner.tl{top:12px;left:12px} .premiere .corner.br{bottom:12px;right:12px} .premiere-poster{margin:0;order:-1;border-radius:18px;overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.5);transition:transform .7s var(--ease)} .premiere-poster img{width:100%;height:auto} .premiere .kicker{color:#DEB868} /* Заголовок страницы стоит подписью в блоке премьеры. Золотой там у акции, поэтому заголовок приглушённо-белый. */ .premiere h1.kicker{color:rgba(255,255,255,.72)} .premiere .premiere-title{color:#fff;font-size:clamp(34px,5.2vw,66px);overflow-wrap:normal} .premiere-lead{margin-top:14px;color:rgba(255,255,255,.8);font-size:clamp(15px,1.5vw,18px);max-width:28em} .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} /* Строка «что это за сайт» над плакатом — заголовок страницы. Набрана рабочим шрифтом и мелко: первым на экране должен оставаться плакат сезона, а не повтор названия из логотипа. */ @media(max-width:859px){ /* на телефоне заголовок премьеры уже крупно напечатан на самом плакате */ .premiere .premiere-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .premiere .btn-row .btn{flex:1 1 auto} } @media(min-width:860px){ .premiere{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:44px;padding:52px 56px} .premiere-poster{order:0;transform:rotate(2.2deg)} .premiere-poster:hover{transform:rotate(0deg) scale(1.02)} } /* ---------- страница кофеен и предзаказ ---------- */ .page-head{padding-block:clamp(26px,5vw,56px) 8px} .page-head .lead{margin-top:10px} .preorder-band{margin-block:18px 26px;border-radius:24px;padding:22px 20px;display:grid;gap:18px; color:#fff;background:linear-gradient(135deg,var(--ink) 0%,#0E4657 100%)} .preorder-band h2{color:#fff;font-size:clamp(24px,4vw,36px)} .preorder-band p{margin-top:8px;color:rgba(255,255,255,.76);max-width:32em} /* В полосе одна кнопка — к списку кофеен. Общих Telegram и MAX здесь нет: предзаказ всегда в конкретную точку, и кнопка есть в каждой карточке. */ .pb-actions{display:flex;flex-wrap:wrap;gap:10px} .pb-actions .btn{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center; background:#fff;color:var(--ink);border-color:#fff} @media(min-width:760px){ .preorder-band{grid-template-columns:1fr auto;align-items:center;padding:30px 36px} } .loc .body{display:flex;flex-direction:column} .loc .acts{flex-wrap:wrap;margin-top:auto;padding-top:16px} .loc .acts .btn.btn-pre{flex:1 1 100%} /* ---------- контакты ---------- */ .contacts{padding-block:clamp(18px,3vw,28px) 0} .ct-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .ct-card{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:20px; border:1px solid var(--line);background:#fff;color:inherit;text-decoration:none; transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .ct-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(7,34,42,.10)} .ct-kind{font:700 10px 'Mont',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .ct-value{font:700 clamp(17px,2.4vw,21px) 'Mont',sans-serif;overflow-wrap:anywhere} .ct-note{font-size:13px;color:var(--fg-soft)} .ct-social{margin-top:clamp(28px,4vw,44px)} .ct-social h2{font-size:clamp(22px,3.4vw,32px)} .ct-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .ct-handle{opacity:.6} .ct-legal{margin-top:12px;font-size:12px;color:var(--fg-soft);max-width:46em} /* Предзаказ списком: точка слева, кнопка справа. На телефоне кнопка уезжает под адрес и тянется на всю ширину. */ .preorder-list{padding-block:clamp(32px,5vw,56px)} .pl-rows{margin-top:18px;display:grid;gap:10px} .pl-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between; padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:#fff} .pl-name{font:700 16px 'Mont',sans-serif} .pl-addr{margin-top:2px;font-size:14px;color:var(--fg-soft)} .pl-row .btn{flex:1 1 100%} @media(min-width:560px){ .pl-row .btn{flex:0 0 auto} } /* ---------- окно предзаказа ---------- */ .sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center} .sheet-bg{position:absolute;inset:0;background:rgba(7,20,26,.5);backdrop-filter:blur(4px);animation:fade-in .25s both} .sheet-card{position:relative;width:min(520px,100%);max-height:92dvh;overflow:auto; background:#FFFDF9;color:#12262C;border-radius:26px 26px 0 0; padding:24px 20px calc(22px + env(safe-area-inset-bottom));animation:sheet-up .38s var(--ease) both} .sheet.closing .sheet-card{animation:sheet-down .22s ease-in both} .sheet.closing .sheet-bg{animation:fade-out .22s both} .sheet-card .kicker{color:var(--aqua)} .sheet-card h3{font-size:22px;padding-right:40px} .sheet-sub{margin-top:8px;font-size:14px;line-height:1.5;color:rgba(18,38,44,.62)} .sheet-tpl{margin-top:16px;background:#F3EEE6;border-radius:16px;padding:14px 16px} .tpl-text{white-space:pre-line;font-size:14px;line-height:1.55} .tpl-copy{margin-top:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--aqua); font:700 13px 'Mont',sans-serif;text-decoration:underline} .sheet-acts{display:grid;gap:10px;margin-top:16px} .sheet-acts .btn{width:100%;display:inline-flex;align-items:center;justify-content:center} .sheet-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0; background:#F3EEE6;color:#12262C;font-size:22px;line-height:1;cursor:pointer;transition:background .2s} .sheet-close:hover{background:#E8E1D6} body.sheet-open{overflow:hidden} @media(min-width:600px){ .sheet{align-items:center;padding:20px} .sheet-card{border-radius:26px} } @keyframes sheet-up{from{transform:translateY(48px);opacity:0}} @keyframes sheet-down{to{transform:translateY(48px);opacity:0}} @keyframes fade-in{from{opacity:0}} @keyframes fade-out{to{opacity:0}} /* ---------- всплывающее уведомление ---------- */ .toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:120; max-width:calc(100vw - 32px);padding:12px 20px;border-radius:100px;text-align:center;pointer-events:none; background:#12262C;color:#fff;font:600 14px 'Mont',sans-serif;box-shadow:0 14px 34px rgba(0,0,0,.25); opacity:0;transform:translate(-50%,16px);transition:opacity .3s,transform .35s var(--ease)} body.dark .toast{background:var(--aqua-light);color:#06252E} .toast.show{opacity:1;transform:translate(-50%,0)} /* ---------- переходы между страницами ---------- Браузеры с View Transitions плавно подменяют страницу, а шапка остаётся на месте. Остальные просто переходят как раньше. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s} @media (prefers-reduced-motion:reduce){ .js [data-reveal],.js .reveal-item{opacity:1;transform:none;transition:none} .btn::after{display:none} .premiere-poster,.premiere-poster:hover{transform:none} } /* ---------- меню: постеры и афиша категорий (13.09.2026) ---------- Постер — вместо карточек: у матчи и детского меню нет фото напитков. Афиша осенней премьеры — рядом с карточками: на широком экране слева, три напитка справа; на телефоне афиша над ними. */ .cat-poster{margin:0 0 14px;max-width:560px;border-radius:20px;overflow:hidden; box-shadow:0 18px 40px rgba(7,34,42,.12)} .cat-poster img{width:100%;height:auto} .cat-afisha{margin:0 0 16px;max-width:460px;border-radius:20px;overflow:hidden; box-shadow:0 18px 40px rgba(7,34,42,.14)} .cat-afisha img{display:block;width:100%;height:auto} /* Кадр раздела над карточками (матча) идёт во всю ширину ряда: уже карточек он обрывался справа и выглядел криво вставленным. */ .afisha-row.stacked .cat-afisha{max-width:100%} @media(min-width:980px){ .afisha-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,3fr);gap:18px;align-items:start} .afisha-row .cat-afisha{margin:0;max-width:none} .afisha-row.stacked{display:block} .afisha-row.stacked .cat-afisha{margin:0 0 16px;max-width:100%} } /* ---------- кофейни: рейтинг и отзывы из Яндекс Карт (13.09.2026) ---------- Бейдж и отзывы — официальные виджеты Яндекса в iframe. Высоты заданы заранее: иначе страница прыгает, когда виджет догружается. */ .loc .ya-badge{display:block;width:150px;height:50px;border:0;margin-top:12px;color-scheme:light} .reviews{padding-block:clamp(8px,2vw,20px) clamp(36px,6vw,70px);scroll-margin-top:124px} .reviews h2{font-size:clamp(24px,4vw,36px)} .rv-lead{margin-top:8px;color:var(--fg-soft);max-width:34em} .rv-tabs{display:flex;gap:8px;overflow-x:auto;margin-top:16px;padding-bottom:4px;scrollbar-width:none} .rv-tabs::-webkit-scrollbar{display:none} .rv-tab{flex:none;padding:9px 15px;border-radius:100px;border:1px solid var(--line);background:none; color:inherit;font:600 13px 'Mont',sans-serif;white-space:nowrap;cursor:pointer} .rv-tab[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} .rv-frame{margin-top:14px;max-width:560px;height:640px;border:1px solid var(--line);border-radius:18px; overflow:hidden;background:#fff} .rv-frame iframe{display:block;width:100%;height:100%;border:0} .rv-links{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px} @media(min-width:760px){.rv-frame{height:760px}}