/* ============================================================ Bohemia Berber — Хасково Дизайн система: бетон / калено стомана / оксблъд кожа / кост ============================================================ */ :root{ --ink: #09090A; --ink-2: #0F0F12; --panel: #15151A; --panel-2: #1C1C22; --line: #26262E; --line-2: #3A3A46; --blood: #8C1F28; --blood-2: #B4303A; --blood-dim: rgba(140,31,40,.22); --copper: #A6653A; /* оксидирана мед за метални детайли — нарочно кафяво-ръждиво, а НЕ полирано злато (златото е на Saitami и беше отхвърлено) */ --copper-dim: rgba(166,101,58,.30); --bone: #EAE6DF; --bone-2: #C8C2B8; --dim: #948D84; --faint: #635D56; --display: 'Russo One', 'Arial Narrow', system-ui, sans-serif; /* едно тегло (400), без курсив — не задавай bold/italic, синтетичните се чупят */ --ui: 'Golos Text', 'Segoe UI', system-ui, sans-serif; /* истинско зърно (feTurbulence), не имитация с градиент — вградено като data URI, без заявка */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); --rule: 2px; /* дебелината на носещите линии — „тежест“ */ --edge: 22px; /* notch size on primary buttons */ --shell: 1240px; --nav-h: 82px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* `clip` реже изнесеното извън екрана мобилно меню, без да прави скрол-контейнер — така sticky навигацията остава работеща. */ html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip} body{ background:var(--ink); color:var(--bone-2); font-family:var(--ui); font-size:16.5px; line-height:1.72; font-weight:400; /* fine concrete tooth over the whole page */ background-image: var(--grain), radial-gradient(1100px 620px at 78% -10%, rgba(140,31,40,.07), transparent 62%), repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px); background-size:180px 180px, auto, auto; background-attachment:fixed; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--blood);color:#fff} h1,h2,h3,h4{font-family:var(--display); color:var(--bone); font-weight:400; line-height:1.14; letter-spacing:.012em} h1{font-size:clamp(38px,6.2vw,78px)} h2{font-size:clamp(28px,3.8vw,49px)} h3{font-size:clamp(19px,1.9vw,23px)} .shell{max-width:var(--shell); margin:0 auto; padding:0 28px} @media(max-width:600px){ .shell{padding:0 20px} } /* ---------- shared bits ---------- */ .kicker{ font-family:var(--ui); font-weight:600; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--blood-2); display:flex; align-items:center; gap:12px; margin-bottom:20px; } .kicker::before{content:""; width:30px; height:1px; background:var(--blood-2); flex:none} .kicker.center{justify-content:center} .kicker.center::after{content:""; width:30px; height:1px; background:var(--blood-2); flex:none} .lede{font-size:clamp(16px,1.35vw,18.5px); color:var(--dim); max-width:62ch} .rule{height:1px; background:var(--line); border:0} .btn{ display:inline-flex; align-items:center; gap:11px; font-family:var(--ui); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; padding:17px 30px; border:1px solid var(--line-2); color:var(--bone); background:transparent; cursor:pointer; transition:background .22s, border-color .22s, color .22s, transform .22s; } .btn:hover{border-color:var(--bone-2); background:rgba(255,255,255,.045)} .btn--primary{ background:var(--blood); border-color:var(--blood); color:#fff; clip-path:polygon(0 0, calc(100% - var(--edge)) 0, 100% var(--edge), 100% 100%, var(--edge) 100%, 0 calc(100% - var(--edge))); padding:18px 34px; } .btn--primary:hover{background:var(--blood-2); border-color:var(--blood-2); color:#fff} .btn--ghost{ border-color:var(--line-2); color:var(--bone-2); clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } .btn .arw{transition:transform .22s} .btn:hover .arw{transform:translateX(4px)} /* section scaffold */ section{position:relative} .band{padding:clamp(76px,9vw,132px) 0} .band--panel{background:rgba(15,15,18,.82); border-top:var(--rule) solid var(--line-2); border-bottom:var(--rule) solid var(--line-2)} .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:clamp(38px,5vw,62px)} .sec-head .lede{margin-top:16px} @media(max-width:820px){ .sec-head{flex-direction:column; align-items:flex-start} } .num{ font-family:var(--ui); font-weight:900; font-size:clamp(30px,3.4vw,44px); line-height:.9; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.5px var(--copper-dim); margin-bottom:14px; display:block; } .num span{ display:block; -webkit-text-stroke:0; color:var(--faint); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-top:8px; } /* ---------- demo notice ---------- */ .demo-bar{ background:var(--blood); color:#fff; font-size:12.5px; letter-spacing:.03em; text-align:center; padding:9px 20px; position:relative; z-index:220; } .demo-bar b{font-weight:600} /* ---------- nav ---------- */ .nav{ position:sticky; top:0; z-index:200; background:rgba(9,9,10,.86); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line); } .nav__in{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:26px} .brand{display:flex; align-items:center; gap:13px; flex:none} .brand__mark{width:auto; height:46px; flex:none; display:block} @media(max-width:600px){ .brand__mark{height:40px} } .brand__txt{line-height:1.12; display:block} .brand__name{display:block; font-family:var(--display); font-weight:400; font-size:17px; color:var(--bone); letter-spacing:.06em; text-transform:uppercase} .brand__sub{display:block; font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-top:1px} .nav__links{display:flex; align-items:center; gap:30px} .nav__links a{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:500; color:var(--dim); padding:6px 0; position:relative; transition:color .2s; } .nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--blood-2); transition:right .28s; } .nav__links a:hover{color:var(--bone)} .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{right:0} .nav__links a[aria-current="page"]{color:var(--bone)} .nav__cta{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:13px 22px; background:var(--blood); color:#fff; flex:none; clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition:background .2s; } .nav__cta:hover{background:var(--blood-2)} /* CTA-то в чекмеджето — само на телефон (на десктоп е .nav__cta в лентата) */ .nav__book{display:none} .burger{display:none; width:44px; height:44px; border:1px solid var(--line-2); background:none; cursor:pointer; position:relative} .burger span{position:absolute; left:12px; right:12px; height:1.5px; background:var(--bone); transition:.28s} .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:21.5px} .burger span:nth-child(3){top:27px} .burger[aria-expanded="true"] span:nth-child(1){top:21.5px; transform:rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){top:21.5px; transform:rotate(-45deg)} @media(max-width:1000px){ /* ВАЖНО: backdrop-filter върху .nav създава containing block за position:fixed потомци — чекмеджето би се мерило спрямо лентата, а не спрямо екрана. На телефон го изключваме и слагаме плътен фон. */ .nav{backdrop-filter:none; background:var(--ink)} /* Чекмеджето стои на right:0 и се показва с прозрачност + вертикално отместване. Изнасянето му хоризонтално (translateX) добавяше ширина към документа и създаваше хоризонтален скрол на телефон. */ .nav__links{ position:fixed; inset:0 0 0 auto; width:min(340px,86vw); background:var(--ink-2); border-left:1px solid var(--line); flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:calc(var(--nav-h) + 30px) 34px 40px; overflow-y:auto; z-index:210; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .26s ease, transform .26s ease, visibility 0s .26s; } .nav__links.open{ opacity:1; visibility:visible; transform:none; transition:opacity .26s ease, transform .26s ease, visibility 0s 0s; } .nav__links a{font-size:15px; padding:15px 0; width:100%; border-bottom:1px solid var(--line)} .nav__links a::after{display:none} .nav__links a.nav__book{color:#fff} .nav__book{ display:block; margin-top:26px; border-bottom:0 !important; background:var(--blood); color:#fff; font-weight:600; text-align:center; padding:17px 20px !important; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); } .burger{display:block; z-index:215} .nav__cta{display:none} } /* ---------- hero ---------- */ .hero{position:relative; min-height:clamp(560px,88vh,880px); display:flex; align-items:flex-end; overflow:hidden} .hero__bg{position:absolute; inset:0; z-index:0} .hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center} .hero__bg::after{ content:""; position:absolute; inset:0; background: var(--grain), linear-gradient(180deg, rgba(9,9,10,.74) 0%, rgba(9,9,10,.30) 34%, rgba(9,9,10,.87) 82%, var(--ink) 100%), linear-gradient(94deg, rgba(9,9,10,.86) 0%, rgba(9,9,10,.35) 52%, transparent 82%); background-size:180px 180px, auto, auto; opacity:.99; } .hero__in{position:relative; z-index:2; width:100%; padding:0 0 clamp(52px,7vw,86px)} .hero h1{max-width:15ch; color:#fff; text-shadow:0 3px 40px rgba(0,0,0,.6)} .hero h1 em{font-style:normal; color:var(--blood-2)} .hero__lede{margin:24px 0 34px; max-width:46ch; color:var(--bone-2); font-size:clamp(15.5px,1.4vw,18px)} .hero__cta{display:flex; flex-wrap:wrap; gap:14px} .hero__strip{ position:relative; z-index:2; border-top:var(--rule) solid var(--blood); background:rgba(9,9,10,.72); backdrop-filter:blur(6px); } .hero__strip .shell{display:grid; grid-template-columns:repeat(4,1fr)} .fact{padding:26px 26px 26px 0; border-right:1px solid var(--line)} .fact:last-child{border-right:0} .fact__k{font-family:var(--ui); font-size:25px; color:var(--bone); font-weight:900; line-height:1; letter-spacing:-.01em} .fact__v{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-top:8px; font-weight:600} @media(max-width:820px){ .hero__strip .shell{grid-template-columns:repeat(2,1fr)} .fact:nth-child(2){border-right:0} .fact:nth-child(-n+2){border-bottom:1px solid var(--line)} } /* ---------- page header (inner pages) ---------- */ .phead{padding:clamp(64px,8vw,110px) 0 clamp(40px,5vw,64px); border-bottom:var(--rule) solid var(--line-2); position:relative; overflow:hidden} .phead::after{ content:""; position:absolute; right:-120px; top:-80px; width:420px; height:420px; background:radial-gradient(circle, var(--blood-dim), transparent 68%); pointer-events:none; } .phead h1{font-size:clamp(38px,6vw,74px)} .phead .lede{margin-top:20px} .crumbs{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:22px; font-weight:600} .crumbs a:hover{color:var(--bone-2)} /* ---------- service list ---------- */ .svc{border-top:var(--rule) solid var(--line-2)} .svc__row{ display:grid; grid-template-columns:44px 1fr auto; gap:26px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); transition:background .22s, padding .22s; } .svc__row:hover{background:rgba(255,255,255,.022)} .svc__i{font-family:var(--ui); font-size:12px; font-weight:600; color:var(--faint); letter-spacing:.06em} .svc__name{font-family:var(--display); font-size:clamp(17px,1.7vw,21px); color:var(--bone); font-weight:400} .tag{ display:inline-block; vertical-align:middle; margin-left:12px; font-family:var(--ui); font-size:9.5px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); padding:4px 9px 3px; border:1px solid var(--copper-dim); line-height:1; clip-path:polygon(0 0,100% 0,100% 100%,5px 100%,0 calc(100% - 5px)); } .svc__row--rec{background:rgba(166,101,58,.045)} .svc__row--rec:hover{background:rgba(166,101,58,.075)} .opt--rec{border-color:var(--copper-dim)} .opt--rec .opt__n .tag{margin-left:9px} .svc__desc{font-size:14px; color:var(--dim); margin-top:5px; max-width:56ch; line-height:1.6} .svc__meta{display:flex; align-items:center; gap:24px; flex:none} .svc__dur{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; white-space:nowrap} .svc__price{font-family:var(--ui); font-size:clamp(21px,2.2vw,28px); color:var(--blood-2); font-weight:900; white-space:nowrap; letter-spacing:-.01em} .svc__price small{display:block; font-family:var(--ui); font-size:11px; color:var(--faint); letter-spacing:.08em; font-weight:500; text-align:right} @media(max-width:760px){ .svc__row{grid-template-columns:1fr auto; gap:16px} .svc__i{display:none} .svc__meta{flex-direction:column; align-items:flex-end; gap:4px} } /* ---------- cards / grid ---------- */ .grid{display:grid; gap:1px; background:var(--line)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){ .grid--3{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .grid--3,.grid--2{grid-template-columns:1fr} } .card{background:var(--ink); padding:38px 32px; transition:background .25s} .card:hover{background:var(--panel)} .card__n{font-family:var(--ui); font-size:11px; font-weight:700; color:var(--blood-2); letter-spacing:.14em; margin-bottom:16px; display:block} .card h3{margin-bottom:12px} .card p{font-size:14.6px; color:var(--dim); line-height:1.68} /* ---------- team ---------- */ .team{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px)} @media(max-width:860px){ .team{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .team{grid-template-columns:1fr} } .barber{border:1px solid var(--line); background:var(--ink-2); display:flex; flex-direction:column} .barber__ph{aspect-ratio:3/4; overflow:hidden; position:relative; background:var(--panel)} .barber__ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(.55) contrast(1.06); transition:filter .5s, transform .8s} .barber:hover .barber__ph img{filter:grayscale(0); transform:scale(1.035)} .barber__ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(9,9,10,.85) 100%)} .barber__b{padding:24px 24px 26px; flex:1; display:flex; flex-direction:column} .barber__n{font-family:var(--display); font-size:21px; color:var(--bone); font-weight:400} .barber__r{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); font-weight:600; margin-top:6px} .barber__bio{font-size:14px; color:var(--dim); margin-top:14px; line-height:1.62; flex:1} .barber__hrs{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--faint); display:flex; justify-content:space-between; gap:10px} .barber__hrs b{color:var(--bone-2); font-weight:500} .barber__link{margin-top:18px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--bone); display:inline-flex; gap:9px; align-items:center} .barber__link:hover{color:var(--blood-2)} /* ---------- gallery ---------- */ .gal{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.4vw,18px)} .gal figure{position:relative; overflow:hidden; background:var(--panel); cursor:zoom-in} .gal img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1), filter .5s; filter:grayscale(.85) contrast(1.18) brightness(.94)} .gal figure:hover img{transform:scale(1.05); filter:grayscale(0)} .gal .g-wide{grid-column:span 8; aspect-ratio:16/10} .gal .g-tall{grid-column:span 4; aspect-ratio:3/4} .gal .g-half{grid-column:span 6; aspect-ratio:16/10} .gal .g-third{grid-column:span 4; aspect-ratio:1/1} @media(max-width:820px){ .gal .g-wide,.gal .g-half{grid-column:span 12; aspect-ratio:16/10} .gal .g-tall,.gal .g-third{grid-column:span 6} } /* before / after */ .ba{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px)} @media(max-width:900px){ .ba{grid-template-columns:1fr; max-width:520px; margin:0 auto} } .ba__item{border:1px solid var(--line); background:var(--ink-2)} .ba__stage{position:relative; aspect-ratio:3/4; overflow:hidden; user-select:none; touch-action:pan-y} .ba__stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .ba__after{clip-path:inset(0 0 0 50%)} .ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--blood-2); transform:translateX(-1px); pointer-events:none; box-shadow:0 0 22px rgba(180,48,58,.6); } .ba__knob{ position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border:1px solid var(--blood-2); background:rgba(9,9,10,.8); backdrop-filter:blur(4px); display:grid; place-items:center; color:var(--bone); font-size:13px; pointer-events:none; } .ba__tag{ position:absolute; bottom:14px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding:6px 12px; background:rgba(9,9,10,.78); color:var(--bone-2); pointer-events:none; } .ba__tag--l{left:14px} .ba__tag--r{right:14px; color:var(--blood-2)} .ba__cap{padding:16px 20px; font-size:13px; color:var(--dim); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px} .ba__cap b{color:var(--bone-2); font-weight:500} /* lightbox */ .lb{position:fixed; inset:0; z-index:400; background:rgba(5,5,6,.95); display:none; place-items:center; padding:40px} .lb.on{display:grid} .lb img{max-width:min(1100px,92vw); max-height:88vh; object-fit:contain} .lb__x{position:absolute; top:22px; right:26px; width:46px; height:46px; border:1px solid var(--line-2); background:none; color:var(--bone); cursor:pointer; font-size:20px} .lb__x:hover{border-color:var(--blood-2); color:var(--blood-2)} .lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:1px solid var(--line-2); background:rgba(9,9,10,.6); color:var(--bone); cursor:pointer; font-size:18px} .lb__nav:hover{border-color:var(--blood-2)} .lb__prev{left:24px} .lb__next{right:24px} /* ---------- split feature ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center} .split--top{align-items:start} @media(max-width:900px){ .split{grid-template-columns:1fr} } .split__img{position:relative} .split__img img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(.9) contrast(1.22) brightness(.92)} .split__img::before{ content:""; position:absolute; inset:14px; border:1px solid var(--copper-dim); pointer-events:none; z-index:2; } .split p + p{margin-top:16px} .split p{color:var(--dim); font-size:15.6px} /* ---------- quote ---------- */ .quote{text-align:center; max-width:900px; margin:0 auto} .quote blockquote{font-family:var(--display); font-size:clamp(21px,2.7vw,34px); color:var(--bone); line-height:1.35; font-style:normal; font-weight:400} .quote cite{display:block; margin-top:26px; font-family:var(--ui); font-style:normal; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); font-weight:600} /* ---------- CTA band ---------- */ .cta{position:relative; overflow:hidden; border-top:var(--rule) solid var(--line-2); border-bottom:var(--rule) solid var(--line-2)} .cta__bg{position:absolute; inset:0} .cta__bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.6)} .cta__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,9,10,.95), rgba(9,9,10,.72))} .cta__in{position:relative; z-index:2; padding:clamp(64px,8vw,110px) 0; text-align:center} .cta h2{margin-bottom:18px} .cta .lede{margin:0 auto 34px} /* ---------- contact ---------- */ .info{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)} @media(max-width:820px){ .info{grid-template-columns:1fr} } .info__c{background:var(--ink-2); padding:32px 30px} .info__l{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--blood-2); font-weight:600; margin-bottom:14px} .info__v{font-family:var(--display); font-size:18px; color:var(--bone); line-height:1.45; font-weight:400} .info__s{font-size:13.5px; color:var(--dim); margin-top:8px} .hours{list-style:none; font-size:14.5px} .hours li{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); color:var(--dim); gap:16px} .hours li:last-child{border-bottom:0} .hours li b{color:var(--bone-2); font-weight:500} .hours li.off b{color:var(--faint)} .map{border:1px solid var(--line); filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg); aspect-ratio:16/7; width:100%} @media(max-width:700px){ .map{aspect-ratio:4/3} } /* директен контакт */ .reach{display:grid; gap:12px; margin-top:26px} .reach__i{ display:block; border:1px solid var(--line); background:var(--ink-2); padding:20px 22px; transition:border-color .2s, background .2s; } .reach__i:hover{border-color:var(--blood-2); background:var(--panel)} .reach__l{display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--blood-2); font-weight:600; margin-bottom:10px} .reach__v{display:block; font-family:var(--display); font-size:19px; color:var(--bone); font-weight:400; line-height:1.35} .reach__s{display:block; font-size:13.5px; color:var(--dim); margin-top:6px} /* form */ .field{margin-bottom:18px} .field label{display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:9px} .field input,.field textarea,.field select{ width:100%; background:var(--ink-2); border:1px solid var(--line); padding:15px 16px; color:var(--bone); font-size:15px; transition:border-color .2s, background .2s; } .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--blood-2); background:var(--panel)} .field textarea{min-height:130px; resize:vertical} .field--2{display:grid; grid-template-columns:1fr 1fr; gap:18px} @media(max-width:600px){ .field--2{grid-template-columns:1fr} } /* ---------- booking ---------- */ .bk{border:1px solid var(--line); background:var(--ink-2)} .bk__steps{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line)} .bk__step{ padding:18px 14px; text-align:center; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--faint); border-right:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:9px; } .bk__step:last-child{border-right:0} .bk__step i{ font-style:normal; width:22px; height:22px; border:1px solid var(--line-2); display:grid; place-items:center; font-size:10px; flex:none; } .bk__step.done{color:var(--bone-2)} .bk__step.done i{border-color:var(--blood); background:var(--blood); color:#fff} .bk__step.now{color:var(--bone)} .bk__step.now i{border-color:var(--blood-2); color:var(--blood-2)} @media(max-width:700px){ .bk__steps{grid-template-columns:repeat(2,1fr)} .bk__step:nth-child(2){border-right:0} .bk__step:nth-child(-n+2){border-bottom:1px solid var(--line)} } .bk__body{padding:clamp(24px,3.4vw,40px)} .bk__h{font-family:var(--display); font-size:21px; color:var(--bone); margin-bottom:8px; font-weight:400} .bk__sub{font-size:14px; color:var(--dim); margin-bottom:26px} .pick{display:grid; gap:12px} .pick--2{grid-template-columns:repeat(2,1fr)} .pick--3{grid-template-columns:repeat(3,1fr)} @media(max-width:760px){ .pick--2,.pick--3{grid-template-columns:1fr} } .opt{ display:flex; align-items:center; gap:16px; text-align:left; width:100%; background:var(--ink); border:1px solid var(--line); padding:18px 20px; cursor:pointer; transition:border-color .2s, background .2s, transform .2s; } .opt:hover{border-color:var(--line-2); background:var(--panel)} .opt.sel{border-color:var(--blood-2); background:var(--panel-2)} .opt__ph{width:52px; height:52px; flex:none; object-fit:cover; filter:grayscale(.4); background:var(--panel)} .opt__t{flex:1; min-width:0; display:block} .opt__n{display:block; font-family:var(--display); font-size:16px; color:var(--bone); font-weight:400; line-height:1.3} .opt__d{display:block; font-size:12.8px; color:var(--dim); margin-top:5px; line-height:1.5} .opt__p{font-family:var(--ui); font-size:19px; color:var(--blood-2); font-weight:900; flex:none; align-self:flex-start; letter-spacing:-.01em} .opt__p small{display:block; font-family:var(--ui); font-size:10.5px; color:var(--faint); text-align:right; font-weight:500} .days{display:flex; gap:9px; overflow-x:auto; padding-bottom:8px; margin-bottom:24px; scrollbar-width:thin} .day{ flex:none; width:74px; padding:13px 6px; text-align:center; cursor:pointer; background:var(--ink); border:1px solid var(--line); transition:.2s; } .day:hover{border-color:var(--line-2)} .day.sel{border-color:var(--blood-2); background:var(--panel-2)} .day.off{opacity:.34; cursor:not-allowed} .day__w{display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600} .day__d{display:block; font-family:var(--ui); font-size:20px; color:var(--bone); font-weight:900; margin:4px 0 2px; line-height:1} .day__m{display:block; font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.1em} .slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px} .slot{ padding:13px 6px; text-align:center; background:var(--ink); border:1px solid var(--line); cursor:pointer; font-size:14.5px; color:var(--bone-2); transition:.18s; font-variant-numeric:tabular-nums; } .slot:hover{border-color:var(--line-2); color:var(--bone)} .slot.sel{border-color:var(--blood-2); background:var(--blood); color:#fff} .slot small{display:block; font-size:10px; color:var(--faint); margin-top:3px; letter-spacing:.06em} .slot.sel small{color:rgba(255,255,255,.8)} .bk__foot{display:flex; justify-content:space-between; gap:14px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap} .bk__sum{border:1px solid var(--line); background:var(--ink); padding:22px 24px; margin-bottom:26px} .bk__sum dl{display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:14.5px} .bk__sum dt{color:var(--faint); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; align-self:center} .bk__sum dd{color:var(--bone); text-align:right; font-weight:500} .bk__note{font-size:12.5px; color:var(--faint); margin-top:16px; line-height:1.6} .bk__done{text-align:center; padding:clamp(40px,6vw,72px) 24px} .bk__tick{width:74px; height:74px; margin:0 auto 26px; border:1px solid var(--blood-2); display:grid; place-items:center; color:var(--blood-2); font-size:30px} .msg{padding:14px 16px; border:1px solid var(--line-2); background:var(--panel); font-size:13.5px; color:var(--bone-2); margin-bottom:18px} .msg--err{border-color:var(--blood); color:var(--blood-2)} .skel{color:var(--faint); font-size:13.5px; padding:20px 0} /* ---------- footer ---------- */ .foot{background:var(--ink-2); border-top:var(--rule) solid var(--line-2); padding:clamp(54px,6vw,80px) 0 0} .foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:52px} @media(max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr; gap:36px} } @media(max-width:560px){ .foot__grid{grid-template-columns:1fr} } .foot__h{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); font-weight:600; margin-bottom:20px} .foot__l{list-style:none; font-size:14.5px} .foot__l li{margin-bottom:11px} .foot__l a{color:var(--dim); transition:color .2s} .foot__l a:hover{color:var(--blood-2)} .foot__about{font-size:14.5px; color:var(--dim); margin-top:18px; max-width:34ch; line-height:1.7} .social{display:flex; gap:10px; margin-top:20px} .social a{ width:40px; height:40px; border:1px solid var(--line); display:grid; place-items:center; color:var(--dim); transition:.2s; } .social a:hover{border-color:var(--copper); color:var(--copper)} .social svg{width:17px; height:17px; fill:currentColor} .foot__bar{ border-top:1px solid var(--line); padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:16px 26px; flex-wrap:wrap; font-size:12.5px; color:var(--faint); } .foot__bar a{color:inherit; text-decoration:none} .foot__bar a:hover{color:var(--bone-2)} /* карта на сайта и машинните файлове — за хора и за ботове наведнъж */ .foot__meta{display:flex; gap:18px; flex-wrap:wrap} .foot__meta a{border-bottom:1px solid transparent; padding-bottom:1px} .foot__meta a:hover{border-bottom-color:var(--line-2)} /* Кредитът на Saitami — един спокоен ред, без рамка. Рамката го правеше да изглежда като рекламно каре, залепено в ъгъла. */ .made{display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap} .made__l{font-size:12.5px; color:var(--faint); transition:color .2s} .made:hover .made__l{color:var(--dim)} /* Истинското лого на Сайтами, не набран текст — не се пресъздава с шрифт и не се пребоядисва. ВНИМАНИЕ ЗА РАЗМЕРА: файлът е 220×30 и няма по-голям. Над ~110px ширина се разтяга и омеква на Retina. 15px височина дава 110px ширина, тоест точно 2× — оттам нагоре не се качва. */ .made__logo{ height:15px; width:auto; display:block; opacity:.85; transition:opacity .2s; } .made:hover .made__logo{opacity:1} @media(max-width:600px){ .foot__bar{justify-content:flex-start} .made{width:100%} } /* ---------- reveal ---------- Скрива се САМО когато JS е налице (html.js). Без JS всичко се вижда. */ .js .rv{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1)} .js .rv.in{opacity:1; transform:none} @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} *{animation:none !important} } /* ---------- форма за съобщение (Контакти) ---------- */ /* Скритото поле е капан за ботове: човек не го вижда и не го попълва. display:none се пропуска от част от ботовете — затова го махаме от екрана. */ .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .cform__msg{margin:0; align-self:center; font-size:13.5px; color:var(--dim)} .cform__msg.ok{color:var(--bone-2)} .cform__msg.err{color:var(--blood-2)} /* профилите още не съществуват — иконата стои, но не води наникъде */ .social__soon{ width:40px; height:40px; border:1px solid var(--line); display:grid; place-items:center; color:var(--faint); opacity:.5; cursor:default; } .social__soon svg{width:17px; height:17px; fill:currentColor}