/* ========================================================================== FAVORE — "Ink & Copper" design system Extracted from the approved prototype and adapted for the live site: the theme lives on (html.dark / html.light) so the existing favToggleTheme() in shared/head.php keeps working unchanged. Dark is the default; the visitor's own choice is remembered. ========================================================================== */ *{box-sizing:border-box} :root,html.dark{ --bg:#0A0A0B; --surf:#101011; --surf2:#161617; --tx:#F7F4EF; --dim:#9A9791; --mute:#6A6864; --p:#C2703D; --p2:#E8A874; --sand:#CDBBA0; --hair:rgba(247,244,239,.07); --hair2:rgba(247,244,239,.14); --hairp:rgba(194,112,61,.38); --onp:#120C07; --shadow:0 40px 90px -50px rgba(0,0,0,.95); --ghost:rgba(247,244,239,.028); } html.light{ --bg:#FBFAF8; --surf:#FFFFFF; --surf2:#F4F2EE; --tx:#111112; --dim:#6C6965; --mute:#96938D; --p:#A8552A; --p2:#C2703D; --sand:#8A7857; --hair:rgba(17,17,18,.08); --hair2:rgba(17,17,18,.14); --hairp:rgba(168,85,42,.32); --onp:#FFF9F5; --shadow:0 34px 70px -44px rgba(0,0,0,.3); --ghost:rgba(17,17,18,.03); } html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--tx);font-family:'Noto Serif Georgian','Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;transition:background .7s,color .7s;overflow-x:hidden} /* grain + vignette */ body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:88;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")} body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:87; box-shadow:inset 0 0 220px 60px color-mix(in srgb,var(--bg) 85%,transparent)} .ms{font-family:'Material Symbols Outlined';font-weight:200;font-size:19px;line-height:1;vertical-align:-4px} .sp{flex:1} h1,h2,h3,h4{font-family:'Playfair Display','Noto Serif Georgian',serif;font-weight:400;margin:0} a{color:inherit;text-decoration:none} /* ================= LOADER ================= */ #ld{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:26px;transition:opacity .7s,visibility .7s} #ld.done{opacity:0;visibility:hidden} #ld .lb{font-family:'Playfair Display',serif;font-size:38px;letter-spacing:.34em;overflow:hidden} #ld .lb span{display:inline-block;transform:translateY(105%);animation:ldUp .9s cubic-bezier(.22,1,.36,1) forwards} @keyframes ldUp{to{transform:none}} #ld .lbar{width:180px;height:1px;background:var(--hair2);position:relative;overflow:hidden} #ld .lbar i{position:absolute;inset:0 100% 0 0;background:var(--p);transition:right .25s ease} #ld .lpct{font-size:10px;letter-spacing:.32em;color:var(--mute)} /* curtain lift */ .cur{position:fixed;left:0;right:0;z-index:199;background:var(--bg);pointer-events:none;transition:transform 1.05s cubic-bezier(.76,0,.24,1)} .cur.t{top:0;height:50vh}.cur.b{bottom:0;height:50vh} .lifted .cur.t{transform:translateY(-100%)}.lifted .cur.b{transform:translateY(100%)} #prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:95;background:linear-gradient(90deg,var(--p),var(--sand))} #glow{position:fixed;width:460px;height:460px;border-radius:50%;pointer-events:none;z-index:1;opacity:.45; background:radial-gradient(circle,color-mix(in srgb,var(--p) 13%,transparent),transparent 68%);transform:translate(-50%,-50%)} .wrap{display:grid;grid-template-columns:1fr 352px} @media(max-width:1050px){.wrap{grid-template-columns:1fr}.ai{display:none}} .left{position:relative;border-right:1px solid var(--hair);min-width:0;container-type:inline-size;container-name:col} /* ================= reveal + char split ================= */ .rv{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)} .rv.in{opacity:1;transform:none} .chw{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.1} .chi{display:inline-block;transform:translateY(108%);transition:transform 1s cubic-bezier(.22,1,.36,1)} .split.in .chi{transform:none} /* molecular scatter → assemble: თითო ასო შორიდან, დაბინდული და დატრიალებული, თავს იყრის ზუსტ ადგილას */ .mol .mc{display:inline-block;white-space:pre; transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s)); opacity:0;filter:blur(8px); transition:transform 1.45s cubic-bezier(.16,1,.3,1) var(--d), opacity 1.05s ease var(--d), filter 1.15s ease var(--d)} .mol.in .mc{transform:translate(0,0) rotate(0) scale(1);opacity:1;filter:blur(0)} /* სიტყვა ერთ ბლოკად — ასოებად დაშლისას სიტყვა შუაზე აღარ გაიჭრება */ .mol .mw{display:inline-block;white-space:nowrap} /* scramble: ასოები ირევა და წყნარდება */ .scr{min-height:1em} /* clip-path image reveal */ .clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s cubic-bezier(.76,0,.24,1)} .clip.in{clip-path:inset(0 0 0 0)} /* ghost numerals */ .ghostno{position:absolute;right:26px;top:26px;font-family:'Playfair Display',serif;font-size:clamp(90px,13vw,190px); line-height:.8;color:var(--ghost);pointer-events:none;user-select:none;z-index:0} /* ================= nav ================= */ /* icon button — used by the nav, the overlay, the AI panel and the lightbox */ .ibtn{width:31px;height:31px;border-radius:2px;border:1px solid var(--hair2);background:transparent; color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:.35s} .ibtn:hover{color:var(--p);border-color:var(--hairp)} /* the rest of the nav lives in the "top bar" block further down (container-query based) */ /* ================= hero ================= */ .hero{position:relative;min-height:94vh;display:flex;flex-direction:column;overflow:hidden} /* 3D სცენა მხოლოდ ამ ზედა ბლოკშია — ციფრებს უკან აღარ გადადის */ .hero-top{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:calc(120px - var(--liftUp)) 42px 52px;overflow:hidden} /* ================= 3 სლაიდი — შეკვეთის სამი ნაბიჯი ================= */ /* hero სამ სვეტად: ტექსტი (იცვლება) · სურათი (იცვლება) · უცვლელი ბლოკი */ /* სამივე ზონა ერთი ფიქსირებული სიმაღლისაა და ცენტრები ერთ ჰორიზონტალურ ღერძზე ჯდება */ /* --liftUp: რამდენად აიწევს სამი ზონა. იმავე სიდიდით იზრდება ნაბიჯების ზემო ზღვარი, ამიტომ ნაბიჯები და მის ქვემოთ ყველაფერი ზუსტად ადგილზე რჩება. */ .hero-top{--hcolH:clamp(380px,46vh,470px);--liftUp:44px} .hgrid{position:relative;z-index:3;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr) 300px; gap:clamp(18px,2.4vw,36px);align-items:center} .hcol-text,.hcol-media,.hcol-info{height:var(--hcolH)} .hcol-text{display:flex;flex-direction:column;justify-content:center} @media(max-width:1280px){.hgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hcol-info{display:none}} @media(max-width:900px){.hgrid{grid-template-columns:1fr}.hcol-media{display:none}} /* ტექსტი სურათზე ზემოთ */ .hcol-text{position:relative;z-index:3} /* სურათი მარცხნივ იწევს და ტექსტის უკან ნახევრად შედის */ .hcol-media{position:relative;z-index:1; margin-left:clamp(-300px,-18vw,-140px); border:1px solid var(--hair);border-radius:4px;overflow:hidden;box-shadow:var(--shadow)} /* ტექსტის ქვეშ მოქცეული ნაწილი მუქდება — წაკითხვადობისთვის */ .hcol-media::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 30%, color-mix(in srgb,var(--bg) 18%,transparent) 58%,transparent 78%)} /* უცვლელი სვეტი — გამყოფი ზოლის გარეშე */ .hcol-info{display:flex;flex-direction:column;justify-content:center} .hi-t{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand);margin-bottom:16px} .hi-list{list-style:none;margin:0 0 22px;padding:0} .hi-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--hair); font-size:12.5px;font-weight:300;color:var(--dim);line-height:1.5} .hi-list li .ms{font-size:15px;color:var(--p);flex:0 0 auto} .hi-call{font-family:'Playfair Display',serif;font-size:19px;color:var(--tx);display:block;margin-bottom:5px;transition:color .35s} .hi-call:hover{color:var(--p)} .hi-hours{font-size:10.5px;color:var(--mute);letter-spacing:.08em;margin-bottom:18px} .hi-cta{width:100%;justify-content:center} .sl-imgs{position:absolute;inset:0;z-index:0;overflow:hidden} .sl-layer{position:absolute;inset:0;opacity:1} /* ჩარჩოში სურათი სრული სიკაშკაშით */ .sl-inner{position:absolute;inset:0;animation:kb 9.5s linear forwards} @keyframes kb{from{transform:scale(1.05)}to{transform:scale(1.17)}} /* ნელი ზუმი */ .sl-pic{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.3)} .sl-slice{position:absolute;top:0;bottom:0;background-size:cover;filter:grayscale(.3)} /* სიმაღლე ფიქსირებულია — სლაიდის შეცვლისას განლაგება არ ხტება */ /* სიმაღლე ფიქსირებულია; ყველა სლაიდი აბსოლუტურია, ამიტომ განლაგება ვერასდროს გაიწელება */ .sl-body{position:relative;z-index:3;height:100%} /* სლაიდის ტიპოგრაფია — ოდნავ მჭიდრო, რომ ფიქსირებულ სიმაღლეში თავისუფლად ჩაჯდეს */ .sl .eyebrow{margin-bottom:18px} /* სათაური — ზუსტად 2 ხაზის სიმაღლე. overflow არ ვჭრით, რომ მოლეკულური ასოები გარედან შემოფრენისას არ ჩამოიჭრას. */ .sl .slh{font-size:clamp(26px,3.2vw,44px);line-height:1.12;margin-bottom:18px;max-width:20ch; height:calc(2 * 1.12em)} /* აღწერა — ზუსტად 3 ხაზი; უფრო გრძელი ტექსტი მოიჭრება, ბლოკი არ გაიწელება */ .sl .lead{font-size:14.5px;line-height:1.75;margin:0 0 26px;max-width:46ch; height:calc(3 * 1.75em);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .sl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease} .sl.on{opacity:1;visibility:visible;pointer-events:auto} .sl .cta{margin-bottom:0} .sl .lead,.sl .cta{opacity:0;transform:translateY(18px)} .sl.on .lead{animation:slUp .85s cubic-bezier(.22,1,.36,1) .35s forwards} .sl.on .cta{animation:slUp .85s cubic-bezier(.22,1,.36,1) .5s forwards} @keyframes slUp{to{opacity:1;transform:none}} /* ნავიგაცია — სამი ნაბიჯი, მიმდინარეს პროგრესი გასდევს */ .sl-nav{position:relative;z-index:3;display:flex;gap:18px;flex-wrap:wrap;margin-top:calc(30px + var(--liftUp))} .sl-step{background:none;border:0;padding:0;cursor:pointer;text-align:left;font-family:inherit; color:var(--mute);transition:color .4s;flex:1 1 0;min-width:0;max-width:158px} .sl-step:hover{color:var(--tx)} .sl-step.on{color:var(--tx)} .sl-step b{display:block;font-family:'Playfair Display',serif;font-weight:400;font-size:13px;letter-spacing:.04em;margin-bottom:5px} .sl-step span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:8px} .sl-step.on span{color:var(--sand)} .sl-step i{display:block;height:1px;background:var(--hair2);position:relative;overflow:hidden} .sl-step i::after{content:'';position:absolute;inset:0 100% 0 0;background:var(--p);transition:right 0s} .sl-step.on i::after{animation:slBar var(--dur,7s) linear forwards} @keyframes slBar{to{right:0}} /* წაკითხვადობის ფარდა 3D-ს ზემოთ */ .hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(96deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 64%,transparent) 30%,color-mix(in srgb,var(--bg) 10%,transparent) 62%,transparent 86%)} /* შიგთავსი ყველაფერზე ზემოთ — ფონის ფენებს ეს წესი აღარ ეხება */ .hero-top>*:not(.hero-bg):not(.hero-gl):not(.hero-scrim){position:relative;z-index:3} .eyebrow{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--sand);font-weight:500;margin-bottom:28px} .eyebrow i{display:block;width:0;height:1px;background:var(--hairp);animation:ruleIn 1.4s 1.4s forwards;font-style:normal} @keyframes ruleIn{to{width:40px}} h1{font-size:clamp(38px,5.6vw,76px);line-height:1.02;letter-spacing:-.012em;max-width:14ch;margin-bottom:26px} .lead{max-width:50ch;color:var(--dim);font-size:15.5px;font-weight:300;line-height:1.9;margin:0 0 38px} .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:58px} .btn{position:relative;overflow:hidden;border:1px solid var(--p);border-radius:2px;padding:15px 30px; font-family:'Noto Serif Georgian',sans-serif;font-size:13.5px;font-weight:500;cursor:pointer;background:var(--p);color:var(--onp); transition:box-shadow .4s,background .4s;display:inline-flex;align-items:center;gap:9px;will-change:transform} .btn:hover{box-shadow:0 18px 36px -18px color-mix(in srgb,var(--p) 90%,transparent)} .btn.ghost{background:transparent;color:var(--tx);border-color:var(--hair2)} .btn.ghost:hover{border-color:var(--p);color:var(--p)} .btn::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-130%) skewX(-16deg)} .btn:hover::before{animation:swipe .9s ease} @keyframes swipe{to{transform:translateX(130%) skewX(-16deg)}} /* ციფრები — მუქ, მყარ ფონზე, 3D-ს გარეთ */ .hstats{position:relative;z-index:4;background:var(--bg);display:flex;gap:56px;flex-wrap:wrap; padding:30px 42px 0;border-top:1px solid var(--hair)} .hstat .n{font-family:'Playfair Display',serif;font-size:40px;color:var(--p);line-height:1} .hstat .l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:9px} .scue{position:relative;z-index:4;background:var(--bg);padding:20px 42px 26px;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px} .scue i{display:block;width:1px;height:34px;background:linear-gradient(var(--p),transparent);animation:cue 2.2s ease-in-out infinite} @keyframes cue{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}} /* ================= marquee ================= */ .mq{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0;overflow:hidden;white-space:nowrap;background:var(--surf)} .mq-in{display:inline-block;will-change:transform} .mq-in span{font-family:'Playfair Display',serif;font-size:22px;color:var(--dim);margin:0 28px;letter-spacing:.04em} .mq-in i{color:var(--p);font-style:normal} /* ================= section shell ================= */ .sec{padding:96px 42px;border-top:1px solid var(--hair);position:relative;overflow:hidden} .shead{display:flex;align-items:flex-end;gap:24px;margin-bottom:50px;position:relative;z-index:2} .shead h2{font-size:clamp(26px,3.2vw,42px);line-height:1.14} .shead p{color:var(--dim);margin:10px 0 0;font-size:14px;font-weight:300;line-height:1.75;max-width:48ch} .srule{flex:1;height:1px;background:var(--hair);margin-bottom:12px} .tag{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);margin-bottom:14px;display:block} /* ================= panels ================= */ .panels{display:flex;gap:8px;height:470px;position:relative;z-index:2} @media(max-width:900px){.panels{flex-direction:column;height:auto}} .pan{position:relative;flex:1;min-width:0;overflow:hidden;border:1px solid var(--hair);border-radius:3px;cursor:pointer; transition:flex 1.05s cubic-bezier(.22,1,.36,1),border-color .5s} .pan.on{flex:4.4;border-color:var(--hairp)} @media(max-width:900px){.pan{height:130px;flex:none}.pan.on{height:350px}} .pan-img{position:absolute;inset:0;background-size:cover;background-position:center; transform:scale(1.14);filter:grayscale(.6) brightness(.46);transition:transform 1.3s cubic-bezier(.22,1,.36,1),filter 1s} .pan.on .pan-img{transform:scale(1);filter:grayscale(0) brightness(.74)} .pan::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%)} .pan-body{position:absolute;left:0;right:0;bottom:0;padding:24px 22px;z-index:2} .pan-num{font-size:9.5px;letter-spacing:.24em;color:var(--sand);opacity:.9} /* ვერტიკალური სტიქი → ჰორიზონტალური: ასოები ცალ-ცალკე დგას, არ ტრიალდება */ .pan-t{display:flex;flex-direction:column;align-items:flex-start;margin-top:10px; font-family:'Playfair Display','Noto Serif Georgian',serif;font-size:17px;color:#F7F4EF;line-height:1.03; transition:font-size .6s cubic-bezier(.22,1,.36,1)} .pan.on .pan-t{flex-direction:row;align-items:baseline;flex-wrap:wrap;font-size:26px;line-height:1.2} .pan-t .pc{display:inline-block;white-space:pre;will-change:transform,filter} .pan-x{max-height:0;opacity:0;overflow:hidden;transition:max-height .95s cubic-bezier(.22,1,.36,1),opacity .6s .2s} .pan.on .pan-x{max-height:160px;opacity:1} .pan-x p{color:rgba(247,244,239,.74);font-size:12.5px;font-weight:300;line-height:1.75;margin:11px 0 15px;max-width:40ch} .pan-go{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--p2);transition:gap .4s} .pan:hover .pan-go{gap:15px} .pan-cnt{position:absolute;top:17px;right:17px;z-index:2;font-size:10px;letter-spacing:.14em;color:rgba(247,244,239,.72); border:1px solid rgba(247,244,239,.2);border-radius:2px;padding:4px 9px;backdrop-filter:blur(6px)} /* ================= process — ჩვეულებრივი ნაკადი, სქროლი არ იჭედება ================= */ .pin-big{font-size:clamp(28px,3.8vw,50px);line-height:1.1;max-width:20ch;margin-bottom:8px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;padding-top:30px;margin-top:34px} @media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:26px}} .steps::before{content:'';position:absolute;top:0;left:0;height:1px;width:0;background:var(--hairp);transition:width 1.7s cubic-bezier(.22,1,.36,1) .15s} .steps.in::before{width:100%} .pst{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)} .steps.in .pst{opacity:1;transform:none} .steps.in .pst:nth-child(1){transition-delay:.18s} .steps.in .pst:nth-child(2){transition-delay:.34s} .steps.in .pst:nth-child(3){transition-delay:.5s} .steps.in .pst:nth-child(4){transition-delay:.66s} .pst .no{font-family:'Playfair Display',serif;font-size:30px;color:var(--p);display:block;margin-bottom:12px} .pst h4{font-size:17px;margin-bottom:9px} .pst p{color:var(--dim);font-size:12.5px;font-weight:300;line-height:1.8;margin:0} /* ================= gallery rail — მომხმარებელი მართავს, გვერდი არ იჭედება ================= */ .rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth; padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab} .rail::-webkit-scrollbar{display:none} .rail.drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} .rail-nav{display:flex;gap:8px;margin-bottom:11px} .rnav{width:36px;height:36px;border:1px solid var(--hair2);background:transparent;color:var(--dim); border-radius:2px;cursor:pointer;display:grid;place-items:center;transition:.35s} .rnav:hover{color:var(--p);border-color:var(--hairp)} .rnav.off{opacity:.32} .hgi{flex:0 0 clamp(240px,26vw,340px);scroll-snap-align:start;position:relative;overflow:hidden; border:1px solid var(--hair);border-radius:3px} .hgi img{width:100%;height:clamp(230px,30vh,300px);object-fit:cover;display:block;filter:grayscale(.4); transition:filter .8s,transform 1.2s cubic-bezier(.22,1,.36,1);-webkit-user-drag:none;user-select:none} .hgi:hover img{filter:grayscale(0);transform:scale(1.05)} .hgi-c{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.85),transparent); font-size:11.5px;letter-spacing:.1em;color:#F7F4EF} .hgi-c b{display:block;font-family:'Playfair Display',serif;font-weight:400;font-size:16px;margin-bottom:4px} /* ================= რედაქციული ბლოკი: სურათი + ტექსტი + ციტატა ================= */ .ed{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,74px);align-items:center;position:relative;z-index:2} @media(max-width:900px){.ed{grid-template-columns:1fr}} .ed.rev .ed-media{order:2} .ed-media{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--hair)} .ed-media img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover; filter:grayscale(.28);transition:transform 1.4s cubic-bezier(.22,1,.36,1),filter .9s} .ed-media:hover img{transform:scale(1.05);filter:grayscale(0)} .ed-badge{position:absolute;left:16px;bottom:16px;background:color-mix(in srgb,var(--bg) 74%,transparent); border:1px solid var(--hair);backdrop-filter:blur(8px);border-radius:3px;padding:9px 14px} .ed-badge b{display:block;font-family:'Playfair Display',serif;font-weight:400;font-size:18px;color:var(--p)} .ed-badge span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)} .ed-text h2{font-size:clamp(26px,3.4vw,44px);line-height:1.1;margin-bottom:20px;max-width:16ch} .ed-text p{color:var(--dim);font-size:14px;font-weight:300;line-height:1.9;margin:0 0 20px;max-width:50ch} .ed-quote{border-left:1px solid var(--hairp);padding:4px 0 4px 20px;margin:26px 0 0} .ed-quote i{font-style:italic;font-family:'Playfair Display','Noto Serif Georgian',serif; font-size:clamp(16px,1.6vw,21px);line-height:1.6;color:var(--sand);display:block} .ed-quote b{display:block;margin-top:12px;font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--mute);font-weight:500} .ed-facts{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--hair)} .ed-fact b{display:block;font-family:'Playfair Display',serif;font-weight:400;font-size:26px;color:var(--p);line-height:1} .ed-fact span{display:block;margin-top:6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)} /* ================= materials / advantages ================= */ .mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);position:relative;z-index:2} .mat{background:var(--bg);padding:30px 24px;transition:background .5s} .mat:hover{background:var(--surf2)} .mat .ms{color:var(--p);font-size:26px;margin-bottom:15px;display:block;transition:transform .5s} .mat:hover .ms{transform:translateY(-4px)} .mat h4{font-size:16px;margin-bottom:9px} .mat p{color:var(--dim);font-size:12px;font-weight:300;line-height:1.75;margin:0} .advs{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:24px;position:relative;z-index:2} .adv{padding:26px;border:1px solid var(--hair);border-radius:3px;background:var(--surf); transition:border-color .5s,box-shadow .5s;transform-style:preserve-3d;will-change:transform} .adv:hover{border-color:var(--hairp);box-shadow:var(--shadow)} .adv .ms{color:var(--p);font-size:24px;margin-bottom:15px;display:block} .adv h4{font-size:16px;margin-bottom:9px} .adv p{color:var(--dim);font-size:12.5px;font-weight:300;line-height:1.75;margin:0} /* ================= testimonials / cta / footer ================= */ .tst{border:1px solid var(--hair);border-radius:3px;padding:48px;background:var(--surf);position:relative;min-height:200px;z-index:2} .tq{position:absolute;top:18px;left:28px;font-family:'Playfair Display',serif;font-size:82px;color:var(--hairp);line-height:1} .tslide{display:none}.tslide.on{display:block;animation:fadeUp .7s both} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .tslide p{font-family:'Playfair Display','Noto Serif Georgian',serif;font-size:20px;line-height:1.65;margin:0 0 20px;position:relative;z-index:2} .tslide .who{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)} .tdots{display:flex;gap:7px;margin-top:24px} .tdots i{width:22px;height:2px;background:var(--hair2);cursor:pointer;transition:.4s} .tdots i.on{background:var(--p);width:40px} .band{padding:96px 42px;border-top:1px solid var(--hair);text-align:center;position:relative;overflow:hidden} .band::before{content:'';position:absolute;inset:0;background:radial-gradient(46% 70% at 50% 50%,color-mix(in srgb,var(--p) 13%,transparent),transparent 72%);animation:pulseGlow 7s ease-in-out infinite} @keyframes pulseGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}} .band h2{font-size:clamp(26px,3.6vw,46px);margin-bottom:16px;position:relative} .band p{color:var(--dim);font-size:14px;font-weight:300;margin:0 auto 30px;max-width:52ch;position:relative;line-height:1.85} .ft{padding:56px 42px;border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px;background:var(--surf)} .ft h5{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin:0 0 16px;font-weight:500;font-family:'Noto Serif Georgian',sans-serif} .ft a,.ft p{display:block;color:var(--dim);font-size:12.5px;font-weight:300;line-height:2.1;margin:0;transition:color .35s} .ft a:hover{color:var(--p)} .ftb{padding:18px 42px;border-top:1px solid var(--hair);font-size:11px;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* ================= AI ================= */ .ai{position:sticky;top:0;height:100vh;background:var(--surf);display:flex;flex-direction:column;overflow:hidden} .ai-glow{position:absolute;inset:0;pointer-events:none;opacity:.6;background:radial-gradient(58% 30% at 50% 0%,color-mix(in srgb,var(--p) 15%,transparent),transparent 72%)} .ai-top{position:relative;padding:32px 22px 22px;text-align:center;border-bottom:1px solid var(--hair)} .orb{width:68px;height:68px;margin:0 auto 15px;border-radius:50%;position:relative;display:grid;place-items:center; background:radial-gradient(circle at 34% 30%,var(--p2),var(--p) 58%,color-mix(in srgb,var(--p) 42%,#000) 100%); box-shadow:0 16px 40px -14px color-mix(in srgb,var(--p) 85%,transparent);animation:breathe 5s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} .orb::after{content:'';position:absolute;inset:-11px;border-radius:50%;border:1px solid var(--hairp); border-top-color:transparent;border-left-color:transparent;animation:spin 9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .orb .ms{font-size:27px;color:var(--onp)} .ai-name{font-size:17px;letter-spacing:.11em}.ai-name em{font-style:normal;color:var(--p)} .ai-st{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:9px;display:flex;gap:7px;align-items:center;justify-content:center} .dot{width:5px;height:5px;border-radius:50%;background:var(--p);box-shadow:0 0 7px var(--p);animation:blink 2.4s infinite} @keyframes blink{50%{opacity:.3}} .ai-body{flex:1;padding:20px;display:flex;flex-direction:column;gap:13px;overflow:auto} .bub{max-width:88%;padding:12px 14px;border-radius:3px;font-size:12.5px;font-weight:300;line-height:1.75;animation:pop .6s cubic-bezier(.2,.9,.2,1) both} @keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .bub.bot{background:var(--surf2);border:1px solid var(--hair);align-self:flex-start} .bub.me{background:transparent;border:1px solid var(--hairp);color:var(--p2);align-self:flex-end} .typing{display:flex;gap:5px;align-self:flex-start;padding:12px 14px;border:1px solid var(--hair);background:var(--surf2);border-radius:3px} .typing i{width:5px;height:5px;border-radius:50%;background:var(--p);animation:td 1.3s infinite} .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s} @keyframes td{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 20px 14px} .chip{font-size:10.5px;padding:7px 12px;border-radius:2px;border:1px solid var(--hair2);background:transparent;color:var(--dim);cursor:pointer;transition:.4s} .chip:hover{color:var(--p);border-color:var(--hairp);transform:translateY(-2px)} .ai-in{margin:0 18px 18px;display:flex;align-items:center;gap:9px;border:1px solid var(--hair2);border-radius:2px;padding:5px 5px 5px 14px;transition:border-color .4s} .ai-in:focus-within{border-color:var(--hairp)} .ai-in input{flex:1;background:none;border:0;outline:0;color:var(--tx);font-family:'Noto Serif Georgian',sans-serif;font-size:12px;font-weight:300} .snd{width:30px;height:30px;border-radius:2px;border:0;background:var(--p);color:var(--onp);cursor:pointer;display:grid;place-items:center} /* ================= site chrome added on top of the prototype ================= */ /* ================= top bar — three zones that never collide ================= .brand | .nav-links (shrinks, drops items) | .nav-right (fixed, never shrinks) Nothing wraps (the bar keeps one line at every width) and the right zone keeps its own width, so the icons can never crowd the AI column. What gets dropped stays reachable in the overlay menu. Breakpoints are CONTAINER queries on .left, not viewport ones: the AI column takes 352px, so at 1100px viewport the bar is ~750px wide — a viewport breakpoint would fire at the wrong moment. */ .nav{position:sticky;top:0;z-index:70;display:flex;align-items:center;flex-wrap:nowrap; gap:clamp(10px,1.6vw,30px);padding:12px clamp(16px,2.2vw,42px);min-height:62px; border-bottom:1px solid var(--hair);background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px)} .brand{flex:0 0 auto;white-space:nowrap;font-family:'Playfair Display',serif; font-size:clamp(16px,1.35vw,21px);letter-spacing:clamp(.1em,.18vw,.2em)} .brand em{font-style:normal;color:var(--p)} .nav-links{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:clamp(10px,1.4vw,26px)} .nav-links .nl,.nav-links .nl-wrap{flex:0 0 auto} .nav a.nl{display:inline-flex;align-items:center;white-space:nowrap;color:var(--dim); font-size:clamp(11.5px,.88vw,12.5px);position:relative;padding:3px 0;transition:color .4s} .nav a.nl::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:0; background:var(--p);transition:width .45s cubic-bezier(.2,.8,.2,1)} .nav a.nl:hover{color:var(--tx)} .nav a.nl:hover::after{width:100%} /* right zone — flex:0 0 auto means it is never squeezed by the links */ .nav-right{display:flex;align-items:center;flex:0 0 auto;margin-left:auto; gap:clamp(4px,.55vw,9px);padding-left:clamp(8px,1vw,18px)} .langs{display:flex;gap:2px;flex:0 0 auto} .langs a{font-size:10px;letter-spacing:.1em;padding:5px 8px;color:var(--mute);border-radius:2px;transition:.3s} .langs a:hover{color:var(--tx)} .langs a.on{color:var(--p);border:1px solid var(--hairp)} .nav .ibtn{flex:0 0 auto} .nav-burger{display:grid} /* the overlay menu is useful on desktop too */ /* works drop-down */ .nl-wrap{position:relative} .nl-car{font-size:15px;vertical-align:-3px;margin-left:2px;transition:transform .35s} .nl-wrap:hover .nl-car{transform:rotate(180deg)} .nl-menu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:220px;max-width:min(280px,80vw); padding:8px;z-index:80;background:color-mix(in srgb,var(--surf) 96%,transparent);backdrop-filter:blur(16px); border:1px solid var(--hair2);border-radius:3px;box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s,transform .35s,visibility .35s} .nl-wrap:hover .nl-menu{opacity:1;visibility:visible;transform:none} .nl-menu a{display:block;padding:9px 13px;font-size:12.5px;color:var(--dim);border-radius:2px;transition:.3s} .nl-menu a:hover{color:var(--p);background:var(--ghost)} /* progressive drop, measured against the bar's own width */ @container col (max-width:680px){ .nav a.nl-opt{display:none} } @container col (max-width:520px){ .nav .nav-links{display:none} } @container col (max-width:360px){ .nav .langs{display:none} } /* fallback for browsers without container queries */ @supports not (container-type:inline-size){ @media(max-width:1200px){ .nav a.nl-opt{display:none} } @media(max-width:980px){ .nav .nav-links{display:none} } @media(max-width:430px){ .nav .langs{display:none} } } /* full-screen overlay menu */ .overlay{position:fixed;inset:0;z-index:120;padding:80px 42px 42px;overflow-y:auto; background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(20px); opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s} .overlay.open{opacity:1;visibility:visible} .ov-close{position:absolute;top:22px;right:26px} .ov-in{max-width:820px;margin:0 auto} .ov-label{display:block;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:18px} .ov-item{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--hair)} .ov-item .n{font-size:10px;letter-spacing:.14em;color:var(--mute);min-width:26px} .ov-item a{font-family:'Playfair Display','Noto Serif Georgian',serif;font-size:clamp(22px,3.4vw,34px); color:var(--tx);transition:color .35s,padding-left .45s cubic-bezier(.2,.8,.2,1)} .ov-item a:hover{color:var(--p);padding-left:12px} .ov-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px} /* mobile AI button — the side panel is hidden under 1050px */ .ai-fab{position:fixed;right:18px;bottom:18px;z-index:110;width:50px;height:50px;border-radius:50%; border:1px solid var(--hairp);background:var(--p);color:var(--onp);display:none;place-items:center; cursor:pointer;box-shadow:var(--shadow)} @media(max-width:1050px){.ai-fab{display:grid}} html.menu-open,html.lb-open{overflow:hidden} /* AI panel: clear + close buttons, and the off-canvas sheet used under 1050px */ .ai-clear{position:absolute;top:14px;right:14px} .ai-x{position:absolute;top:14px;left:14px;display:none} @media(max-width:1050px){ .ai{display:flex;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(400px,92vw);height:100%; z-index:130;border-left:1px solid var(--hair2);box-shadow:var(--shadow); transform:translateX(102%);transition:transform .55s cubic-bezier(.22,1,.36,1)} .ai.open{transform:none} .ai-x{display:grid} } /* ================= category page ================= */ .cat-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center;gap:clamp(22px,3vw,52px);padding:clamp(52px,8vh,96px) 42px 56px; border-bottom:1px solid var(--hair);overflow:hidden} .cat-hero h1{font-size:clamp(30px,4.2vw,58px);line-height:1.1;margin:12px 0 18px;max-width:16ch} .cat-hero .lead{font-size:14.5px;line-height:1.8;color:var(--dim);max-width:48ch;margin:0 0 28px} .cat-hero-media{position:relative;border:1px solid var(--hair);border-radius:4px;overflow:hidden; box-shadow:var(--shadow);aspect-ratio:4/3} .cat-hero-media img{width:100%;height:100%;object-fit:cover;display:block} .cat-meta{display:flex;gap:clamp(20px,3vw,40px);margin-top:30px;padding-top:22px;border-top:1px solid var(--hair);flex-wrap:wrap} .cat-meta div{display:flex;flex-direction:column;gap:4px} .cat-meta b{font-family:'Playfair Display',serif;font-size:26px;font-weight:400;color:var(--p)} .cat-meta span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)} @media(max-width:860px){.cat-hero{grid-template-columns:1fr;padding:40px 20px 40px}} /* work / product cards */ .wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(14px,1.6vw,22px);padding:0 42px} .wcard{position:relative;border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:var(--surf); cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit; transition:border-color .45s,transform .6s cubic-bezier(.22,1,.36,1)} .wcard:hover{border-color:var(--hairp);transform:translateY(-4px)} .wcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,1,.36,1)} .wcard:hover img{transform:scale(1.05)} .wcard-c{padding:14px 16px 16px;border-top:1px solid var(--hair)} .wcard-c b{display:block;font-size:13.5px;font-weight:500;margin-bottom:3px} .wcard-c span{font-size:11.5px;color:var(--mute)} .wcard-n{position:absolute;top:10px;left:12px;font-size:10px;letter-spacing:.18em; background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px);padding:3px 8px;border-radius:2px} @media(max-width:860px){.wgrid{padding:0 20px}} /* fullscreen photo lightbox */ #lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;opacity:0;pointer-events:none; transition:opacity .35s;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(8px)} #lightbox.open{opacity:1;pointer-events:auto} #lightbox .lb-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px; flex-shrink:0;border-bottom:1px solid var(--hair)} #lightbox .lb-counter{font-size:10px;letter-spacing:.22em;color:var(--mute)} #lightbox .lb-actions{display:flex;gap:9px} #lightbox .lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden} #lightbox .lb-img{max-height:100%;max-width:100%;object-fit:contain;border:1px solid var(--hair);border-radius:3px} #lightbox .lb-prev,#lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px; border-radius:2px;border:1px solid var(--hair2);background:color-mix(in srgb,var(--surf) 80%,transparent); backdrop-filter:blur(10px);color:var(--tx);display:grid;place-items:center;cursor:pointer;transition:.35s} #lightbox .lb-prev{left:16px}#lightbox .lb-next{right:16px} #lightbox .lb-prev:hover,#lightbox .lb-next:hover{color:var(--p);border-color:var(--hairp)} #lightbox .lb-thumbs{display:flex;gap:8px;justify-content:center;padding:14px 16px;overflow-x:auto; flex-shrink:0;border-top:1px solid var(--hair)} #lightbox .lb-thumb{height:50px;width:72px;flex:0 0 auto;object-fit:cover;border-radius:2px;cursor:pointer; opacity:.4;border:1px solid transparent;transition:opacity .3s,border-color .3s} #lightbox .lb-thumb.on{opacity:1;border-color:var(--p)} #lightbox .lb-call{background:var(--p);color:var(--onp);border-color:var(--p)} #lightbox .lb-call:hover{color:var(--onp);filter:brightness(1.08)} /* ================= about page ================= */ /* No counter band under this hero, so it does not need to reserve a screen height. */ .hero-about{min-height:auto} .hero-about .hero-top{padding-bottom:34px} /* FAQ — native
, no JS */ .faq{padding:0 42px;max-width:960px} .faq-i{border-bottom:1px solid var(--hair)} .faq-i:first-child{border-top:1px solid var(--hair)} .faq-i summary{display:flex;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;list-style:none; font-family:'Playfair Display','Noto Serif Georgian',serif;font-size:clamp(15px,1.5vw,19px); color:var(--tx);transition:color .35s} .faq-i summary::-webkit-details-marker{display:none} .faq-i summary:hover{color:var(--p)} .faq-n{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.2em;color:var(--mute);min-width:24px} .faq-x{margin-left:auto;font-size:20px;color:var(--mute);transition:transform .4s cubic-bezier(.22,1,.36,1),color .35s} .faq-i[open] .faq-x{transform:rotate(45deg);color:var(--p)} .faq-i[open] summary{color:var(--p)} .faq-i p{margin:0 0 22px;padding-left:40px;max-width:70ch;font-size:14px;line-height:1.85;color:var(--dim)} @media(max-width:860px){.faq{padding:0 20px}.faq-i p{padding-left:0}}