*/
.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.1;background-image:var(--noise);background-size:80px}
/* cards (workshop) */
.card-outline{border:1px solid var(--c-card-border);border-radius:var(--r-card)}
.pill-outline{border:1px solid var(--c-card-border);border-radius:var(--r-sm)}
.photo-r20{border-radius:var(--r-card);overflow:hidden}
/* covers (home hero 93vh, others 50vh): style={cssImage(...)} */
.cover{position:relative;background-color:#000;background-image:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat}
@media (hover:hover) and (pointer:fine) and (min-width:980px){.cover--fixed{background-attachment:fixed}}
.cover__arrow{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:38px;height:19px;fill:#fff}
/* responsive media */
.media-cover{width:100%;height:100%;object-fit:cover}
/* utilities */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:639px){.hide-sm{display:none!important}} /* 50vh home covers */
.nowrap{white-space:nowrap}
/* placeholder of a section that is not built yet (core-step stubs) */
.stub{padding:24px 20px;font:14px/1.4 monospace;color:#999;text-align:center}
/* ===== 10-header.css ===== */
/* Site header + menus (DESIGN_SYSTEM.md §8). Markup: shared/SiteHeader.tsx. Behavior: js/site/10-menu.js, 11-scroll.js. */
/* ---------- t446 desktop bar: home + about (>=981px) ---------- */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
height:var(--header-h);
transition:background-color .3s linear;
}
.site-header--home{background-color:var(--c-header-bg)}
.site-header--home.is-scrolled{background-color:var(--c-header-bg-scrolled)}
.site-header--about{background-color:transparent}
.site-header__inner{
position:relative;height:100%;
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:0 40px;
}
.site-header__list{display:flex;align-items:center;flex-wrap:nowrap;gap:0 32px}
.site-header__link{
display:inline-block;white-space:nowrap;
font:400 16px/1.55 var(--f-serif);color:var(--c-brown);
}
.site-header--about .site-header__link{color:var(--c-text)}
@media (hover:hover){.site-header--about .site-header__link:hover{color:var(--c-brown)}}
.site-header--about .site-header__link.is-active{color:var(--c-brown)}
.site-header__link:focus-visible{color:var(--c-brown)}
.site-header__logo{
position:absolute;left:50%;top:11px;transform:translateX(-50%);
width:160px;height:58px;max-width:none;
}
.site-header__right{display:flex;align-items:center;gap:40px}
.site-header__social{display:flex;align-items:center;gap:14px;margin-right:5px}
/* Tilda soclinks icon: 30×30 filled brown circle */
.social-icon{display:block;width:30px;height:30px;color:var(--c-brown);transition:opacity var(--t-menu)}
.social-icon svg{display:block;width:30px;height:30px}
@media (hover:hover){.social-icon:hover{opacity:.8}}
@media (max-width:1200px){
.site-header__inner{padding:0 20px}
}
@media (max-width:980px){
.site-header{display:none}
}
/* ---------- t450 burger (home + about, <=980px) ---------- */
.burger{display:none}
@media (max-width:980px){
.burger{
position:fixed;top:15px;right:15px;z-index:991;
display:flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:50%;
background:var(--c-paper);
}
}
.burger__icon{position:relative;display:block;width:22px;height:14px;transition:transform .5s ease-in-out}
.burger__icon span{
position:absolute;left:0;display:block;width:100%;height:2px;
background:var(--c-brown);transition:.25s ease-in-out;
}
.burger__icon span:nth-child(1){top:0}
.burger__icon span:nth-child(2),.burger__icon span:nth-child(3){top:6px}
.burger__icon span:nth-child(4){top:12px}
@media (hover:hover){
.burger:hover .burger__icon span:nth-child(1){transform:translateY(1px)}
.burger:hover .burger__icon span:nth-child(4){transform:translateY(-1px)}
}
body.menu-open .burger__icon span:nth-child(1),
body.menu-open .burger__icon span:nth-child(4){top:6px;width:0;left:50%}
body.menu-open .burger__icon span:nth-child(2){transform:rotate(45deg)}
body.menu-open .burger__icon span:nth-child(3){transform:rotate(-45deg)}
/* ---------- slide-in panel + overlay (shared by home/about and workshop) ---------- */
body.menu-open{overflow:hidden}
.menu-overlay{
position:fixed;inset:0;z-index:10003;
background:#000;opacity:0;visibility:hidden;
transition:opacity var(--t-menu),visibility 0s linear .3s;
}
body.menu-open .menu-overlay{opacity:.6;visibility:visible;transition:opacity var(--t-menu)}
.menu-panel{
position:fixed;top:0;right:0;bottom:0;z-index:10004;
width:100%;max-width:300px;height:100vh;height:100dvh;
overflow-y:auto;overscroll-behavior:contain;
background:var(--c-paper);
transform:translateX(100%);visibility:hidden;
transition:transform var(--t-menu),visibility 0s linear .3s;
}
body.menu-open .menu-panel{transform:none;visibility:visible;transition:transform var(--t-menu)}
.menu-panel__close{
position:absolute;top:5px;right:5px;z-index:1;
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;background:inherit;color:#000;
}
.menu-panel__x{position:relative;display:block;width:18px;height:18px}
.menu-panel__x span{
position:absolute;left:-2px;top:8px;width:22px;height:2px;background:currentColor;
}
.menu-panel__x span:nth-child(1){transform:rotate(45deg)}
.menu-panel__x span:nth-child(2){transform:rotate(-45deg)}
.menu-panel__container{
display:flex;flex-direction:column;min-height:100%;
padding:48px 40px 38px;
}
.menu-panel__logo{display:block;width:120px;margin-bottom:25px}
.menu-panel__logo img{width:120px;height:auto}
.menu-panel__item{margin-bottom:15px}
.menu-panel__item:last-child{margin-bottom:0}
.menu-panel__link{display:inline-block;font:400 22px/1.35 var(--f-serif);color:#000}
.menu-panel__bottom{margin-top:auto;padding-top:25px}
@media (max-width:640px){
.menu-panel__container{padding:42px 25px 25px}
}
/* the site panel only exists below 980px */
@media (min-width:981px){
.menu-panel--site,body:not(.page-workshop) .menu-overlay{display:none}
}
/* ---------- workshop: fixed 60px bar ---------- */
.ws-header{
position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
height:60px;background:var(--g-workshop-header);
}
.ws-header__inner{
display:flex;align-items:flex-start;
max-width:1200px;height:100%;margin:0 auto;padding:0 20px 0 5px;
}
.ws-header__logo{flex:none;width:190px;height:68px;max-width:none;margin-top:-5px}
.ws-header__cta.btn-ws{flex:none;width:223px;height:38px;margin:11px 0 0 auto;padding:0;white-space:nowrap}
.ws-header__burger{
position:relative;flex:none;display:block;
width:67px;height:38px;margin:11px 0 0 10px;border-radius:var(--r-btn-sm);
background:var(--c-brown-dark);
}
.ws-header__burger span{position:absolute;left:12px;width:43px;height:2px;background:#fff;border-radius:1px}
.ws-header__burger span:nth-child(1){top:12px}
.ws-header__burger span:nth-child(2){top:23px}
@media (max-width:1199px){
.ws-header__inner{padding:0 20px}
}
@media (max-width:479px){
.ws-header__inner{padding:0 45px 0 36px}
.ws-header__logo{width:124px;height:45px;margin-top:8px}
.ws-header__cta.btn-ws{display:none}
.ws-header__burger{margin:10px 0 0 auto}
}
/* workshop side menu: 260px brown panel, white Montserrat links */
.menu-panel--ws{max-width:260px;background:var(--c-brown)}
.menu-panel--ws .menu-panel__close{color:#fff}
.menu-panel--ws .menu-panel__x{width:24px;height:20px}
.menu-panel--ws .menu-panel__x span{left:0;top:9px;width:24px}
.menu-panel--ws .menu-panel__link{font:400 20px/1.2 var(--f-sans);color:#fff;transition:opacity var(--t-menu)}
@media (hover:hover){.menu-panel--ws .menu-panel__link:hover{opacity:.7}}
.menu-panel--ws .menu-panel__cta{align-self:flex-start;white-space:nowrap}
@media (hover:hover){.menu-panel--ws .menu-panel__cta:hover{background:#fff;color:var(--c-brown)}}
/* ===== 11-extras.css ===== */
/* Page extras (shared/PageExtras.tsx): custom cursor, altai side dots, /about gallery popup.
The workshop grain overlay uses the base class .noise (05-components.css) with --noise set from TSX. */
/* ---------- custom cursor (Tilda t131), enabled by 12-cursor.js on (hover:hover) and (pointer:fine) ---------- */
.cursor-dot{display:none}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor .cursor-dot{
display:block;position:fixed;top:50%;left:50%;z-index:2147483000;
width:15px;height:15px;border-radius:50%;
background:rgba(150,80,49,.72);pointer-events:none;
opacity:0;transform:translate(-50%,-50%);
transition:opacity .3s ease-in-out,transform .3s ease-in-out;
}
html.has-cursor .cursor-dot.is-visible{opacity:1}
html.has-cursor .cursor-dot.is-small{transform:translate(-50%,-50%) scale(.71)}
/* ---------- /altai: t607 side dot navigation ---------- */
.side-dots{position:fixed;right:20px;top:50%;z-index:1000;transform:translateY(-50%)}
.side-dots__item{padding:12.5px 0}
.side-dots__link{position:relative;display:block;width:13px;height:13px}
.side-dots__dot{
display:block;width:13px;height:13px;border-radius:50%;
background:var(--c-dot);border:2px solid var(--c-dot);
transition:all .3s ease-in-out;
}
.side-dots__link.is-active .side-dots__dot{background:var(--c-lilac);border-color:var(--c-lilac)}
.side-dots__tip{
position:absolute;right:33px;top:50%;
padding:0 18px;border-radius:3px;white-space:nowrap;
background:var(--c-lilac);color:#fff;font:600 14px/2.5 var(--f-serif);
opacity:0;visibility:hidden;pointer-events:none;
transform:translateX(-20%) translateY(-50%);
transition:opacity .3s ease-in-out,visibility .3s ease-in-out,transform .3s ease-in-out;
}
.side-dots__tip::after{
content:'';position:absolute;right:-17px;top:50%;transform:translateY(-50%);
border:10px solid transparent;border-left-color:var(--c-lilac);
}
.side-dots__link:hover .side-dots__tip,
.side-dots__link:focus-visible .side-dots__tip{opacity:1;visibility:visible;transform:translateX(0) translateY(-50%)}
@media (max-width:960px){.side-dots{display:none}}
/* ---------- /about: #popup:mygallery2 (one tall leaflet image, transparent frame) ---------- */
.popup--gallery .popup__dialog{
width:calc(100% - 10px);max-width:860px;
padding:0;background:transparent;box-shadow:none;
}
.popup--gallery__img{display:block;width:100%;height:auto}
/* ===== 20-footer.css ===== */
/* Site footer (Tilda t463) — shared/SiteFooter.tsx. /, /about, /workshop-on-lake.
Desktop: block 110 = 15 + 80 + 15, three equal columns (logo left · text centre · Instagram right).
≤959: everything stacks and centres (Tilda switches at 960). Text style = .ty-footer (14px, 12px ≤670). */
.site-footer{
background:var(--c-gray-bg);
padding:15px 0;
color:var(--c-brown);
}
.site-footer__inner{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:center;
min-height:80px;
padding:2px 40px 0;
}
.site-footer__col{min-width:0}
.site-footer__col--logo{justify-self:start}
.site-footer__col--center{justify-self:stretch;text-align:center}
.site-footer__col--social{justify-self:end}
.site-footer__logo{display:block;width:150px;max-width:150px;height:32px;object-fit:contain;object-position:left center}
/* source: "line 1
line 2
" → a box 4 line-heights tall, vertically centred as a whole */
.site-footer__copy{margin:0}
.site-footer__line{display:block;margin-bottom:1.35em}
.site-footer__social{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0;padding:0;list-style:none}
.site-footer__social-link{
display:block;width:30px;height:30px;margin:3px;
color:var(--c-brown);
transition:opacity var(--t-fast);
}
.site-footer__social-svg{display:block;width:30px;height:30px}
@media (hover:hover){.site-footer__social-link:hover{opacity:.8}}
@media (max-width:1199px){
.site-footer__inner{padding-inline:20px}
}
@media (max-width:959px){
.site-footer__inner{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
min-height:0;
padding:42px 20px;
}
.site-footer__col--logo,
.site-footer__col--center,
.site-footer__col--social{justify-self:auto;align-self:stretch;display:flex;justify-content:center}
.site-footer__logo{object-position:center}
.site-footer__social{justify-content:center}
}
/* ===== 30-popup.css ===== */
/* Generic popup (CONVENTIONS §9; Tilda t390 look). Markup: shared/Popup.tsx, behavior: js/site/30-popup.js.
.popup fixed full-screen dark overlay, scrollable, hidden unless .is-open
.popup__dialog centered box, white, 560px wide (override width/background in your own scoped CSS)
.popup__close white 23px cross fixed at the top-right of the viewport */
.popup{
position:fixed;inset:0;z-index:var(--z-popup);
display:flex;padding:60px 20px;
overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
background:var(--overlay-popup);
opacity:0;visibility:hidden;
transition:opacity .3s ease-in-out,visibility 0s linear .3s;
}
.popup.is-open{opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility 0s}
.popup__dialog{
position:relative;
width:560px;max-width:100%;margin:auto; /* centered; starts at the top when taller than the viewport */
background:var(--c-white);
outline:none;
}
.popup__close{
position:fixed;top:11px;right:11px;z-index:2;
width:40px;height:40px;
}
.popup__close::before,.popup__close::after{
content:'';position:absolute;left:50%;top:50%;
width:30px;height:2px;background:var(--c-white);
transform:translate(-50%,-50%) rotate(45deg);
}
.popup__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.popup__close:focus-visible{outline:2px solid var(--c-white);outline-offset:-4px}
@media (prefers-reduced-motion:reduce){.popup,.popup.is-open{transition:none}}
/* Contacts popup #popup:infoblock (shared/ContactsPopup.tsx) */
.contacts-popup .popup__dialog{background:var(--c-brown);color:var(--c-paper);text-align:center}
.contacts-popup__logo{display:block;width:100%;height:auto}
.contacts-popup__body{padding:40px 45px}
.contacts-popup__title{font:400 26px/1.17 var(--f-serif)}
.contacts-popup__descr{margin-top:17px;font:400 16px/1.55 var(--f-serif)}
@media (max-width:1200px){.contacts-popup__descr{font-size:14px}}
@media (max-width:959px){.contacts-popup__body{padding:30px}}
@media (max-width:639px){
.contacts-popup__body{padding:20px}
.contacts-popup__descr{margin-top:8px;font-size:12px;line-height:1.45}
}
/* Generic success popup opened by js/site/41-lead-form.js when a lead form has no [data-lead-success] */
.lead-success-popup .popup__dialog{width:400px;padding:40px 30px;text-align:center;font:400 18px/1.55 var(--f-serif)}
/* ===== 40-cart.css ===== */
/* Cart (Tilda t706 look). Markup: shared/Cart.tsx, behavior: js/site/40-cart.js.
Variants: .cart--default (home / about / early), .cart--workshop (rounded panel, Arial form). */
/* ---------- floating icon (shown by JS when the cart is not empty) ---------- */
.cart-icon{
position:fixed;top:100px;right:20px;z-index:980; /* below the header/burger (990) */
width:60px;height:60px;
transition:opacity .3s,transform .2s ease-in-out;
}
.cart-icon[hidden]{display:none}
.cart-icon__circle{
display:flex;align-items:center;justify-content:center;
width:100%;height:100%;border-radius:50%;
background:var(--c-brown);box-shadow:0 0 10px rgba(0,0,0,.2);
}
.cart-icon__img{width:28px;height:28px;stroke:var(--c-paper)}
.cart-icon__counter{
position:absolute;right:-4px;bottom:-4px;
min-width:24px;height:24px;padding:0 4px;border-radius:12px;
background:var(--c-white);color:var(--c-brown);
font:400 13px/24px Arial,sans-serif;text-align:center;
box-shadow:0 0 6px rgba(0,0,0,.15);
}
@media (hover:hover){.cart-icon:hover{transform:scale(1.05)}}
@media (max-width:959px){.cart-icon{top:50px}}
.cart.is-bump .cart-icon{animation:cart-bump .4s ease-in-out}
@keyframes cart-bump{50%{transform:scale(1.15)}}
/* ---------- window ---------- */
.cart-win{
position:fixed;inset:0;z-index:var(--z-cart);
overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
background:var(--overlay-cart);
opacity:0;visibility:hidden;
transition:opacity .3s ease-in-out,visibility 0s linear .3s;
}
.cart-win.is-open{opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility 0s}
.cart-win__bar{position:fixed;top:0;right:0;z-index:2}
.cart-win__close{
position:absolute;top:11px;right:11px;
width:40px;height:40px;
}
.cart-win__close::before,.cart-win__close::after{
content:'';position:absolute;left:50%;top:50%;
width:30px;height:2px;background:var(--c-white);
transform:translate(-50%,-50%) rotate(45deg);
}
.cart-win__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.cart-win__close:focus-visible{outline:2px solid var(--c-white);outline-offset:-4px}
.cart-win__content{
width:560px;max-width:100%;margin:65px auto;padding:40px;
background:var(--c-white);color:var(--c-text);
font-family:var(--f-serif);outline:none;
}
.cart-win__heading{padding-bottom:30px;font:600 24px/1.35 var(--f-serif)}
/* product rows (rendered by JS) */
.cart-win__products{border-top:1px solid rgba(0,0,0,.2)}
.cart-prod{
display:flex;align-items:center;gap:15px;
padding:15px 0;border-bottom:1px solid rgba(0,0,0,.2);
font:400 16px/1.55 var(--f-serif);
}
.cart-prod__title{flex:1 1 auto;min-width:0;font-weight:600;overflow-wrap:anywhere}
.cart-prod__qty{display:flex;align-items:center;flex:none;gap:0}
.cart-prod__qty-val{min-width:26px;text-align:center;font-size:14px}
.cart-prod__btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#999;transition:color .2s}
.cart-prod__btn svg{width:16px;height:16px}
.cart-prod__del svg{width:20px;height:20px}
@media (hover:hover){.cart-prod__btn:hover{color:#000}}
.cart-prod__price{flex:none;min-width:80px;padding-left:10px;font-weight:300;white-space:nowrap}
.cart-prod__del{margin-right:-2px}
.cart[data-cart-oneproduct="1"] .cart-prod__qty{display:none}
.cart-win__sum{padding-top:30px;text-align:right;font:600 16px/1.55 var(--f-serif)}
/* ---------- order form ---------- */
.cart-form{margin-top:38px}
.cart-form__group{margin-bottom:36px}
.cart-form__label{display:block;padding-bottom:5px;font:400 16px/1.55 var(--f-serif);color:#000}
.cart-form__input{
display:block;width:100%;height:50px;margin:0;padding:0;
border:0;border-bottom:2px solid var(--c-brown);border-radius:0;
background:transparent;color:#000;
font:400 16px/1.33 var(--f-sans);
-webkit-appearance:none;appearance:none;outline:none;
}
.cart-form__input::placeholder{color:#000;opacity:.5}
.cart-form__input:focus{border-bottom-color:#000}
.cart-form__group.is-invalid .cart-form__input{border-bottom-color:#f95d51}
.cart-form__error{display:none;margin-top:5px;font:400 13px/1.35 var(--f-sans);color:#f95d51}
.cart-form__group.is-invalid .cart-form__error{display:block}
.cart-form__subheading{margin:20px 0;font:600 20px/1.35 var(--f-serif)}
.cart-form__total{
display:flex;justify-content:space-between;gap:20px;
margin:60px 0 35px;font:600 16px/1.35 var(--f-serif);
}
.cart-form__errorbox{
margin:-15px 0 20px;padding:10px 20px;background:#f95d51;color:#fff;
font:400 14px/1.45 var(--f-sans);
}
.cart-form__submit{
display:flex;align-items:center;justify-content:center;
width:100%;height:60px;padding:0 20px;border-radius:100px;
background:var(--c-brown);color:var(--c-white);
font:700 16px/1.2 var(--f-serif);
transition:opacity .2s ease-in-out,background-color .2s ease-in-out;
}
.cart-form__submit:disabled{opacity:.6;cursor:default}
.cart-form__success{
padding:20px;background:var(--c-brown);color:#000; /* Tilda success box: color #000, bg #994e30 */
font:400 18px/1.55 var(--f-serif);text-align:center;
}
.cart-form__hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
/* after a successful order: only the success box stays */
.cart.is-done .cart-win__products,
.cart.is-done .cart-win__sum,
.cart.is-done .cart-form__fields{display:none}
.cart.is-done .cart-form{margin-top:0}
/* ---------- workshop variant ---------- */
.cart--workshop .cart-win__content{border-radius:20px}
.cart--workshop .cart-prod__title,
.cart--workshop .cart-form__label,
.cart--workshop .cart-form__input,
.cart--workshop .cart-form__total{font-family:Arial,sans-serif}
.cart--workshop .cart-prod__title{font-weight:700}
.cart--workshop .cart-form__total{font-weight:700}
/* ---------- mobile: full-screen sheet with a brown top bar (Tilda ≤560) ---------- */
@media (max-width:560px){
.cart-win{background:var(--c-white)}
.cart-win__bar{left:0;height:50px;background:var(--c-brown)}
.cart-win__close{top:5px;right:8px}
.cart-win__close::before,.cart-win__close::after{width:22px}
.cart-win__content{width:100%;min-height:100%;margin:0;padding:70px 20px 40px}
.cart-win__heading{font-size:20px}
.cart-prod{flex-wrap:wrap;row-gap:12px;padding:30px 0}
.cart-prod__title{flex:1 1 calc(100% - 40px);order:1}
.cart-prod__del{order:2}
.cart-prod__qty{order:3;margin-left:-4px}
.cart-prod__price{order:4;flex:1 1 auto;padding-left:16px}
.cart[data-cart-oneproduct="1"] .cart-prod__price{padding-left:0}
.cart--workshop .cart-win{background:var(--overlay-cart)}
.cart--workshop .cart-win__content{min-height:calc(100% - 50px);margin-top:50px;padding-top:20px;border-radius:20px 20px 0 0}
}
/* ---------- lead forms (js/site/41-lead-form.js): error box + invalid state; layout is styled by the owning section ---------- */
[data-lead-form] .is-invalid{border-color:#f95d51!important}
.form-errorbox{margin:0 0 20px;padding:10px 20px;background:#f95d51;color:#fff;font:400 14px/1.45 var(--f-sans)}
.form-errorbox p{margin:0}
@media (prefers-reduced-motion:reduce){.cart-win,.cart-win.is-open,.cart-icon{transition:none}.cart.is-bump .cart-icon{animation:none}}
/* ===== 50-slider.css ===== */
/* Generic slider (behavior: assets/js/site/50-slider.js). Styled like Tilda t670/t667 (t-slds).
Markup contract:
← empty → JS puts the Tilda chevron in
← empty → JS adds one button per slide
The track is a native horizontal scroller with scroll-snap (touch swipe for free, no layout shift).
Slides are 100% of the track by default; give them another width in the section CSS if needed.
Every rule is wrapped in :where() (zero specificity) → section CSS overrides without !important,
e.g. turn the same track into a grid on desktop: `.s-home-gallery__track{display:grid;overflow:visible}`.
JS sets `.is-static` on the root while the track does not scroll (nothing to slide) → controls hidden. */
:where([data-slider]){position:relative}
:where([data-slider-track]){
position:relative;
display:flex;
margin:0;
padding:0;
list-style:none;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
:where([data-slider-track])::-webkit-scrollbar{display:none}
:where([data-slide]){
flex:0 0 100%;
min-width:0;
scroll-snap-align:center;
scroll-snap-stop:always;
}
/* arrows: thin #222 chevrons (17×33; 10×19 below 640), vertically centred over the slides */
:where([data-slider-prev],[data-slider-next]){
position:absolute;
top:50%;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
width:37px;
height:53px;
margin:-26.5px 0 0;
padding:10px;
border:0;
background:none;
color:var(--c-ink);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
:where([data-slider-prev]){left:10px}
:where([data-slider-next]){right:10px}
:where([data-slider-prev],[data-slider-next]) :where(svg){display:block;width:17px;height:33px;overflow:visible}
:where([data-slider-prev],[data-slider-next]):disabled{opacity:.3;cursor:default}
@media (hover:hover){:where([data-slider-prev],[data-slider-next]):hover{opacity:.7}}
@media (max-width:639px){
:where([data-slider-prev],[data-slider-next]){width:20px;height:39px;margin-top:-19.5px;padding:10px 0}
:where([data-slider-prev]){left:0}
:where([data-slider-next]){right:0}
:where([data-slider-prev],[data-slider-next]) :where(svg){width:10px;height:19px}
}
/* bullets: 8×8 circles, 10px apart, #eee / active #222, overlaying the bottom of the slides */
:where([data-slider-dots]){
position:absolute;
left:0;
right:0;
bottom:25px;
z-index:2;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
min-height:18px;
pointer-events:none;
}
:where([data-slider-dot]){
position:relative;
display:block;
width:18px;
height:18px;
margin:0;
padding:0;
border:0;
background:none;
cursor:pointer;
pointer-events:auto;
-webkit-tap-highlight-color:transparent;
}
:where([data-slider-dot])::before{
content:"";
position:absolute;
left:5px;
top:5px;
width:8px;
height:8px;
border-radius:50%;
background:var(--c-line-light);
transition:background-color .2s ease;
}
:where([data-slider-dot].is-active)::before{background:var(--c-ink)}
@media (hover:hover){:where([data-slider-dot]:not(.is-active)):hover::before{background:var(--c-white)}}
/* nothing to slide (track not scrollable, e.g. turned into a grid at desktop): hide the controls */
:where([data-slider].is-static) :where([data-slider-prev],[data-slider-next],[data-slider-dots]){display:none}
@media (prefers-reduced-motion:reduce){
:where([data-slider-track]){scroll-behavior:auto}
}
/* ===== 51-lightbox.css ===== */
/* Lightbox for
(behavior: assets/js/site/51-lightbox.js).
Like Tilda's t-zoomer: light full-screen overlay, the image fitted to the viewport, close × top-right,
prev/next chevrons when the group has several images. The DOM is created by JS on first open. */
:root{--z-lightbox:10030}
:where([data-lightbox]){cursor:zoom-in}
.lightbox{
position:fixed;
inset:0;
z-index:var(--z-lightbox);
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.96);
opacity:0;
visibility:hidden;
transition:opacity .25s ease,visibility 0s linear .25s;
-webkit-tap-highlight-color:transparent;
}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
.lightbox__stage{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:60px 90px;
touch-action:pan-y pinch-zoom;
}
.lightbox__img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
object-fit:contain;
opacity:0;
transform:scale(.98);
transition:opacity .25s ease,transform .25s ease;
user-select:none;
-webkit-user-drag:none;
}
.lightbox.is-loaded .lightbox__img{opacity:1;transform:none}
.lightbox__btn{
position:absolute;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
padding:0;
border:0;
border-radius:50%;
background:rgba(0,0,0,.05);
color:#000;
cursor:pointer;
transition:background-color .2s ease;
}
@media (hover:hover){.lightbox__btn:hover{background:rgba(0,0,0,.1)}}
.lightbox__btn svg{display:block;overflow:visible}
.lightbox__close{top:20px;right:20px}
.lightbox__close svg{width:20px;height:20px}
.lightbox__prev,
.lightbox__next{top:50%;margin-top:-22px}
.lightbox__prev{left:20px}
.lightbox__next{right:20px}
.lightbox__prev svg,
.lightbox__next svg{width:10px;height:19px}
.lightbox__prev svg{margin-right:3px}
.lightbox__next svg{margin-left:3px}
.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next{display:none}
@media (max-width:639px){
.lightbox__stage{padding:64px 0}
.lightbox__close{top:10px;right:10px}
.lightbox__prev,
.lightbox__next{top:auto;bottom:10px;margin-top:0}
.lightbox__prev{left:calc(50% - 54px)}
.lightbox__next{right:calc(50% - 54px)}
}
@media (prefers-reduced-motion:reduce){
.lightbox,.lightbox__img{transition:none}
}