/* ============================================================ CFMOTO HEADER Scoped to .cf-header / .m-drawer / .cf-pool. Every component rule is prefixed with its root so it computes to (0,2,0)+ and beats Elementor/theme element rules like `.elementor a` / `.elementor button` (which are 0,1,1). Generic element chrome (underline, bullets, button borders, input appearance) is neutralised with scoped resets. ============================================================ */ /* @font-face for GL Tatishvili Metal is injected via wp_add_inline_style (PHP) with an ABSOLUTE url, so it is not broken by Seraphinite CSS-combine. */ .cf-header, .m-drawer, .cf-pool{ --display:"GL Tatishvili Metal","Noto Sans Georgian",system-ui,sans-serif; --ink:#111315; --paper:#ffffff; --accent:#12BAD5; --mist:#f6f6f6; --mist-hover:#ededed; --line:rgba(17,19,21,.08); --pad-l:24px; --pad-r:24px; --morph:560ms cubic-bezier(.22,1,.36,1); font-family:"Noto Sans Georgian",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:400; line-height:1.3; letter-spacing:normal; color:var(--ink); -webkit-font-smoothing:antialiased; } /* GL Tatishvili Metal — display font on the navigational / brand text only (nav, CTA, language, mega catalog names, mobile drawer nav). Search results, product cards and small eyebrow labels intentionally stay in Noto for legibility. */ .cf-header .nav-link, .cf-header .cta, .cf-header .lang-btn, .cf-header .m-cat, .m-drawer .m-cat-card-name, .m-drawer .m-link{font-family:var(--display)} /* ---- scoped resets: beat Elementor/theme element styling ---- */ .cf-header, .cf-header *, .m-drawer, .m-drawer *, .cf-pool, .cf-pool *{box-sizing:border-box} .cf-header *, .m-drawer *, .cf-pool *{margin:0;padding:0} .cf-header a, .m-drawer a, .cf-pool a{text-decoration:none !important;color:inherit;box-shadow:none} .cf-header ul, .cf-header ol, .m-drawer ul, .m-drawer ol{list-style:none !important} .cf-header li, .m-drawer li{list-style:none !important} .cf-header button, .m-drawer button{ -webkit-appearance:none;appearance:none; background:none;border:0;border-radius:0;box-shadow:none; font:inherit;color:inherit;line-height:normal;letter-spacing:inherit;text-transform:none;cursor:pointer; } .cf-header input, .m-drawer input{-webkit-appearance:none;appearance:none;background:none;border:0;box-shadow:none;font:inherit} .cf-header button:focus, .m-drawer button:focus, .cf-header input:focus, .m-drawer input:focus, .cf-header a:focus, .m-drawer a:focus{box-shadow:none;outline:0} .cf-header img, .m-drawer img, .cf-pool img{display:block;max-width:100%;height:auto} .cf-header svg, .m-drawer svg{display:block;flex:0 0 auto} .cf-header h3, .m-drawer h3{font-weight:600;margin:0} .cf-header p, .m-drawer p{margin:0} .cf-header :focus-visible, .m-drawer :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} .cf-header [hidden], .m-drawer [hidden]{display:none} .cf-pool{display:none} /* ============================================================ HEADER SHELL — full-bleed even inside a boxed/transformed Elementor container (the 100vw + negative margin trick), then .cf-relocated (set by JS once lifted to ) switches to a clean left/right:0 to avoid a 100vw horizontal scrollbar. ============================================================ */ .cf-header{ --h:90px; --logo-h:32px; --nav-size:15.5px; --gap:clamp(18px,2.6vw,40px); --bg:transparent; --blur:0px; --shadow:0 0 0 rgba(0,0,0,0); --fg:#ffffff; --logo-w-op:1; --logo-b-op:0; --cta-bg:transparent; --cta-border:rgba(255,255,255,.55); --cta-fg:#ffffff; --cta-circle:#ffffff; --cta-arrow:#111315; position:fixed; top:0; left:0; z-index:1000; /* full-bleed using the real content width (--cf-vw = clientWidth, set by JS) so it never includes the scrollbar — 100vw is only a pre-JS fallback. This matters for the LIGHT/sticky variant, which is in flow and would otherwise push a horizontal scrollbar. */ width:var(--cf-vw,100vw); margin-left:calc(50% - var(--cf-vw,100vw) / 2); height:var(--h); background-color:var(--bg); -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow); transition: height var(--morph), background-color var(--morph), -webkit-backdrop-filter var(--morph), backdrop-filter var(--morph), box-shadow var(--morph); } .cf-header.cf-relocated{left:0;right:0;width:auto;margin-left:0} /* GLASS — scrolled (overlap). Kept at .is-scrolled specificity so the SOLID group below (same specificity, later) still wins on hover/search/menu. */ .cf-header.is-scrolled{ --h:63px; --logo-h:25px; --nav-size:14px; --bg:rgba(255,255,255,.72); --blur:16px; --shadow:0 8px 30px rgba(17,19,21,.06); --fg:var(--ink); --logo-w-op:0; --logo-b-op:1; --cta-bg:var(--ink); --cta-border:transparent; --cta-fg:#ffffff; --cta-circle:var(--accent); --cta-arrow:#ffffff; } /* LIGHT / non-overlap — solid white, sticky, in flow. Same specificity as .is-scrolled but later in source order, so it overrides the glass colours. */ .cf-header.is-solid{ position:sticky; --bg:#ffffff; --blur:0px; --shadow:0 6px 24px rgba(17,19,21,.05); --fg:var(--ink); --logo-w-op:0; --logo-b-op:1; --cta-bg:var(--ink); --cta-border:transparent; --cta-fg:#ffffff; --cta-circle:var(--accent); --cta-arrow:#ffffff; } .cf-header.is-solid.is-scrolled{--shadow:0 8px 30px rgba(17,19,21,.08)} /* SOLID — search / open menu / open mega (all devices, incl. touch). .mega-open is toggled from JS when the catalog mega is open, so the bar goes full opaque white to match the mega panel — independent of the hover/focus white below, which is gated to pointer devices. */ .cf-header.search-open, .cf-header.menu-open, .cf-header.mega-open{ --bg:#ffffff; --blur:0px; --shadow:0 10px 34px rgba(17,19,21,.08); --fg:var(--ink); --logo-w-op:0; --logo-b-op:1; --cta-bg:var(--ink); --cta-border:transparent; --cta-fg:#ffffff; --cta-circle:var(--accent); --cta-arrow:#ffffff; } /* SOLID on hover/focus — ONLY pointer devices, so a tap on a touchscreen doesn't recolour the bar; on touch it changes only for search / menu. */ @media (hover:hover) and (pointer:fine){ .cf-header:hover, .cf-header:focus-within{ --bg:#ffffff; --blur:0px; --shadow:0 10px 34px rgba(17,19,21,.08); --fg:var(--ink); --logo-w-op:0; --logo-b-op:1; --cta-bg:var(--ink); --cta-border:transparent; --cta-fg:#ffffff; --cta-circle:var(--accent); --cta-arrow:#ffffff; } } .cf-header.search-open{--h:90px;--logo-h:32px} /* ============================================================ LAYOUT DEFENCE .header-inner / .nav / .logo / .actions / .lang are common THEME class names. A theme rule sets props we don't declare (max-width, margin:auto, flex-wrap, float, position) and they leak through, boxing the bar and wrapping the actions to a second row. Force them back with !important. ============================================================ */ .cf-header .header-inner{ max-width:none !important;width:auto !important;min-width:0 !important; margin:0 !important;float:none !important;flex-wrap:nowrap !important; position:static !important;inset:auto !important; } .cf-header .nav{max-width:none !important;margin:0 !important;padding:0 !important;flex-wrap:nowrap !important;float:none !important} .cf-header .nav-item{max-width:none !important;margin:0 !important;float:none !important} .cf-header .actions{max-width:none !important;margin:0 !important;flex-wrap:nowrap !important;float:none !important} .cf-header .logo{max-width:none !important;margin:0 !important;float:none !important} .cf-header .lang{margin:0 !important;flex-wrap:nowrap !important} .cf-header .search-bar, .cf-header .search-panel{max-width:none !important;margin:0 !important} /* ---- circular icon buttons: a theme/Elementor `button{padding…}` or svg/hover rule shifts the icon inside its circle. Force padding/size/centering. ---- */ .cf-header .icon-btn, .cf-header .sb-close, .cf-header .burger, .m-drawer .m-social{ padding:0 !important; min-width:0 !important;min-height:0 !important; line-height:0 !important; border:0 !important; border-radius:50% !important; box-shadow:none !important; text-decoration:none !important; -webkit-appearance:none !important;appearance:none !important; place-items:center !important; flex:0 0 auto !important; } .cf-header .icon-btn{display:inline-grid !important;width:36px !important;height:36px !important} .cf-header .sb-close{display:grid !important;width:38px !important;height:38px !important} .cf-header .burger{width:42px !important;height:42px !important} .m-drawer .m-social{display:grid !important;width:42px !important;height:42px !important} .cf-header .cta-arrow, .m-drawer .cta-arrow{ padding:0 !important;line-height:0 !important; display:grid !important;place-items:center !important; flex:0 0 auto !important;min-width:0 !important;border-radius:50% !important; } .cf-header .icon-btn svg{width:19px !important;height:19px !important} .cf-header .sb-close svg{width:16px !important;height:16px !important} .cf-header .cta-arrow svg, .m-drawer .cta-arrow svg{width:15px !important;height:15px !important} .m-drawer .m-social svg{width:18px !important;height:18px !important} /* tidy hover: drop any theme transform / box-shadow on the header circles */ .cf-header .icon-btn:hover, .cf-header .sb-close:hover, .cf-header .burger:hover{transform:none !important;box-shadow:none !important} /* inner row */ .cf-header .header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2.4vw,40px); padding-left:var(--pad-l); padding-right:var(--pad-r); } /* logo */ .cf-header .logo{position:relative;display:block;height:var(--logo-h);transition:height var(--morph);flex:0 0 auto} .cf-header .logo img{height:100%;width:auto;transition:opacity var(--morph)} .cf-header .logo .logo-black{position:absolute;inset:0;opacity:var(--logo-b-op)} .cf-header .logo .logo-white{opacity:var(--logo-w-op)} /* nav */ .cf-header .header-inner > nav{align-self:stretch;display:flex;align-items:stretch} .cf-header .nav{display:flex;align-items:center;gap:var(--gap);list-style:none;height:100%} .cf-header .nav-item{height:100%;display:flex;align-items:center} .cf-header .nav-link{ position:relative; display:inline-flex;align-items:center;height:100%; font-size:var(--nav-size); font-weight:500; letter-spacing:.01em; color:var(--fg); transition:color var(--morph),font-size var(--morph); white-space:nowrap; } .cf-header .nav-item:hover .nav-link, .cf-header .nav-item:focus-within .nav-link{color:var(--accent)} .cf-header .nav-caret{width:.85em;height:.85em;margin-left:6px;flex:0 0 auto;transition:transform .3s cubic-bezier(.22,1,.36,1)} .cf-header .has-mega:hover .nav-caret, .cf-header .has-mega:focus-within .nav-caret{transform:rotate(180deg)} /* ============================================================ ACTIONS (language · search · CTA) ============================================================ */ .cf-header .actions{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex:0 0 auto} .cf-header .lang{display:inline-flex;align-items:center;gap:8px;color:var(--fg);transition:color var(--morph)} .cf-header .lang .globe{width:17px;height:17px} .cf-header .lang-opts{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600} .cf-header .lang-btn{ display:inline-block;background:none;border:0;cursor:pointer;font:inherit; color:currentColor;opacity:.5;padding:2px 1px;line-height:1;text-decoration:none; transition:opacity .2s,color .2s; } .cf-header .lang-btn:hover{opacity:.85} .cf-header .lang-btn.is-active{opacity:1} .cf-header.is-solid .lang-btn.is-active, .cf-header.is-scrolled .lang-btn.is-active, .cf-header:hover .lang-btn.is-active, .cf-header:focus-within .lang-btn.is-active{color:var(--accent)} .cf-header .lang-sep{opacity:.32;font-weight:400} .cf-header .icon-btn{ -webkit-appearance:none;appearance:none; display:inline-grid;place-items:center; width:36px;height:36px;border:0;border-radius:50%; background:none;cursor:pointer;color:var(--fg); transition:color var(--morph),background-color .2s; } .cf-header .icon-btn:hover{background:rgba(127,127,127,.12)} .cf-header .icon-btn svg{width:19px;height:19px} .cf-header .cta, .m-drawer .cta{ display:inline-flex;align-items:center;gap:14px; height:46px;padding:0 7px 0 22px; border-radius:40px; font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none; background:var(--cta-bg); color:var(--cta-fg); box-shadow:inset 0 0 0 1.5px var(--cta-border); transition:background-color var(--morph),color var(--morph),box-shadow var(--morph),height var(--morph); } .cf-header.is-scrolled .cta{height:40px} .cf-header .cta-arrow, .m-drawer .cta-arrow{ display:grid;place-items:center; width:32px;height:32px;border-radius:50%; background:var(--cta-circle); color:var(--cta-arrow); transition:background-color var(--morph),color var(--morph),transform .35s cubic-bezier(.22,1,.36,1); } .cf-header.is-scrolled .cta-arrow{width:28px;height:28px} .cf-header .cta-arrow svg, .m-drawer .cta-arrow svg{width:15px;height:15px} .cf-header .cta:hover .cta-arrow{transform:rotate(45deg)} /* ============================================================ MEGA MENU ============================================================ */ .cf-header .mega{ position:absolute; top:100%;left:0; width:100%; background:var(--paper); box-shadow:0 24px 40px rgba(17,19,21,.10); border-top:1px solid var(--line); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px); transition:opacity .26s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .26s,top var(--morph); } .cf-header .has-mega:hover .mega, .cf-header .has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .cf-header .mega-inner{display:flex;align-items:stretch;padding:26px var(--pad-r) 30px var(--pad-l);gap:34px} .cf-header .mega-cats{flex:0 0 30%;background:var(--mist);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:2px} .cf-header .m-cat{ display:flex;align-items:center;justify-content:space-between; padding:13px 16px;border-radius:8px; font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer; transition:background-color .18s,color .18s; } .cf-header .m-cat .m-cat-chev{width:16px;height:16px;opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s} .cf-header .m-cat:hover{background:#fff} .cf-header .m-cat.is-active{background:#fff;color:var(--accent);font-weight:600;box-shadow:0 2px 10px rgba(17,19,21,.05)} .cf-header .m-cat.is-active .m-cat-chev{opacity:1;transform:translateX(0)} .cf-header .mega-main{flex:1;min-width:0;display:flex;flex-direction:column} .cf-header .mega-cat-panel{display:none} .cf-header .mega-cat-panel.is-active{display:flex;flex-direction:column;flex:1;min-width:0} .cf-header .mega-head{display:flex;align-items:baseline;justify-content:space-between;margin:2px 2px 16px} .cf-header .mega-head h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,19,21,.55)} .cf-header .mega-all{font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px;text-decoration:none} .cf-header .mega-all svg{width:13px;height:13px} .cf-header .mega-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:10px; max-height:min(60vh,540px);overflow:auto;padding-right:4px; } .cf-header .mega-grid::-webkit-scrollbar{width:8px} .cf-header .mega-grid::-webkit-scrollbar-thumb{background:rgba(17,19,21,.14);border-radius:8px} /* product cards (mega + search results; cloned from the hidden pool) */ .cf-header .p-card{ display:flex;flex-direction:column;align-items:center; padding:14px 10px 12px;border-radius:8px; background:transparent;text-decoration:none; transition:background-color .18s,transform .18s; } .cf-header .p-card:hover{background:var(--mist-hover);transform:translateY(-2px)} .cf-header .p-thumb{width:100%;aspect-ratio:4/3;display:grid;place-items:center;margin-bottom:8px} .cf-header .p-thumb img{max-height:100%;width:auto;object-fit:contain} .cf-header .p-title{font-size:13px;font-weight:500;text-align:center;color:var(--ink);line-height:1.3} .cf-header .p-price{margin-top:5px;font-size:13px;font-weight:600;color:var(--accent)} .cf-header .p-price del{opacity:.5;font-weight:500;margin-right:4px} .cf-header .p-price ins{text-decoration:none} /* ============================================================ SEARCH ============================================================ */ .cf-header .search-bar{display:none;flex:1;min-width:0;align-items:center;gap:14px;height:100%} .cf-header.search-open .header-inner > nav, .cf-header.search-open .actions{display:none} .cf-header.search-open .search-bar{display:flex} .cf-header .sb-icon{width:23px;height:23px;color:var(--ink);opacity:.42;flex:0 0 auto} .cf-header .sb-input{ flex:1;min-width:0;border:0;background:none;outline:none; font:inherit;font-size:clamp(17px,2vw,23px);font-weight:500;color:var(--ink); } .cf-header .sb-input::placeholder{color:rgba(17,19,21,.4)} .cf-header .sb-close{ -webkit-appearance:none;appearance:none; flex:0 0 auto;display:grid;place-items:center; width:38px;height:38px;border:0;border-radius:50%; background:var(--mist);color:var(--ink);cursor:pointer;transition:background-color .2s; } .cf-header .sb-close:hover{background:var(--mist-hover)} .cf-header .sb-close svg{width:16px;height:16px} .cf-header .search-panel{ position:absolute;top:100%;left:0;width:100%; background:var(--paper); box-shadow:0 24px 40px rgba(17,19,21,.10); border-top:1px solid var(--line); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px); transition:opacity .26s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .26s,top var(--morph); } .cf-header.search-open .search-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .cf-header .sp-inner{padding:26px var(--pad-r) 30px var(--pad-l);max-height:min(74vh,640px);overflow-y:auto} .cf-header .sp-inner::-webkit-scrollbar{width:8px} .cf-header .sp-inner::-webkit-scrollbar-thumb{background:rgba(17,19,21,.14);border-radius:8px} .cf-header .sp-block{margin-bottom:28px} .cf-header .sp-block:last-child{margin-bottom:0} .cf-header .sp-h{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,19,21,.55);margin:0 2px 14px} .cf-header .sp-chips{display:flex;flex-wrap:wrap;gap:10px} .cf-header .sp-chip{ -webkit-appearance:none;appearance:none; display:inline-flex;align-items:center; padding:9px 16px;border-radius:8px; background:var(--mist);color:var(--ink); font:inherit;font-size:14px;font-weight:500;cursor:pointer; border:0;transition:background-color .18s,color .18s; } .cf-header .sp-chip:hover{background:var(--mist-hover);color:var(--accent)} .cf-header .sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px} .cf-header .sp-none{padding:6px 2px;font-size:15px;color:rgba(17,19,21,.6)} /* ============================================================ MOBILE CONTROLS (language · search · burger) ============================================================ */ .cf-header .m-lang,.cf-header .m-tools{display:none} .cf-header .m-tools{align-items:center;gap:6px} .cf-header .burger{ -webkit-appearance:none;appearance:none; display:none;place-items:center; width:42px;height:42px;border:0;border-radius:50%; background:none;cursor:pointer;color:var(--fg); transition:background-color .2s; -webkit-tap-highlight-color:transparent; } .cf-header .burger:hover{background:rgba(127,127,127,.12)} .cf-header .burger-box{position:relative;display:block;width:22px;height:14px} .cf-header .burger-line{ position:absolute;left:0;width:100%;height:2px;border-radius:2px; background:currentColor; transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .2s ease,top .42s cubic-bezier(.22,1,.36,1),background-color var(--morph); } .cf-header .burger-line:nth-child(1){top:0} .cf-header .burger-line:nth-child(2){top:6px} .cf-header .burger-line:nth-child(3){top:12px} .cf-header .burger.is-open .burger-line:nth-child(1){top:6px;transform:rotate(45deg)} .cf-header .burger.is-open .burger-line:nth-child(2){opacity:0;transform:scaleX(.25)} .cf-header .burger.is-open .burger-line:nth-child(3){top:6px;transform:rotate(-45deg)} /* ============================================================ MOBILE DRAWER ============================================================ */ .m-drawer{display:none;position:fixed;inset:0;z-index:990;visibility:hidden} .m-drawer.is-open{visibility:visible} .m-drawer .m-scrim{ position:absolute;top:var(--m-top,0);left:0;right:0;bottom:0; background:rgba(12,14,17,.46); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;transition:opacity .45s ease; } .m-drawer.is-open .m-scrim{opacity:1} .m-drawer .m-panel{ position:absolute;top:var(--m-top,0);right:0;bottom:0; width:min(420px,88vw); display:flex;flex-direction:column; padding:22px 22px calc(24px + env(safe-area-inset-bottom)); background:var(--paper); box-shadow:-30px 0 60px rgba(17,19,21,.18); transform:translateX(100%); transition:transform .52s cubic-bezier(.22,1,.36,1); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } .m-drawer.is-open .m-panel{transform:none} .m-drawer .m-stagger{ opacity:0;transform:translateY(16px); transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1); } .m-drawer.is-open .m-stagger{opacity:1;transform:none;transition-delay:calc(var(--i,0)*40ms + 120ms)} .m-drawer .m-cats{display:flex;flex-direction:column;gap:10px;flex:0 0 auto} .m-drawer .m-cat-card{ display:flex;align-items:stretch;justify-content:space-between; flex:0 0 auto;height:70px; background:var(--mist);border-radius:8px;overflow:hidden;text-decoration:none; transition:background-color .18s,transform .18s,box-shadow .18s; } .m-drawer .m-cat-card:hover{background:var(--mist-hover);transform:translateY(-2px);box-shadow:0 8px 22px rgba(17,19,21,.07)} .m-drawer .m-cat-card-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:10px 8px 10px 18px} .m-drawer .m-cat-card-name{font-size:16px;font-weight:600;color:var(--ink);line-height:1.2} .m-drawer .m-cat-card-img{flex:0 0 auto;width:90px;height:100%;display:grid;place-items:center} .m-drawer .m-cat-card-img img{max-width:86%;max-height:86%;width:auto;object-fit:contain} .m-drawer .m-nav{display:flex;flex-direction:column;margin-top:18px;border-top:1px solid var(--line);flex:0 0 auto} .m-drawer .m-link{ display:flex;align-items:center;justify-content:space-between; width:100%;padding:16px 4px; border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;text-decoration:none; font:inherit;font-size:19px;font-weight:600;color:var(--ink);text-align:left; transition:color .2s; } .m-drawer .m-link:hover{color:var(--accent)} .m-drawer .m-cta{ flex:0 0 auto; margin-top:22px;width:100%;height:54px; justify-content:space-between;padding:0 8px 0 24px; background:var(--ink);color:#fff;box-shadow:none; } .m-drawer .m-cta .cta-arrow{background:var(--accent);color:#fff} .m-drawer .m-foot{margin-top:auto;padding-top:24px} .m-drawer .m-foot-phone{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none} .m-drawer .m-foot-phone svg{width:18px;height:18px;color:var(--accent)} .m-drawer .m-socials{display:flex;gap:10px;margin-top:16px} .m-drawer .m-social{ display:grid;place-items:center;width:42px;height:42px;border-radius:50%; background:var(--mist);color:var(--ink);text-decoration:none; transition:background-color .2s,color .2s,transform .2s; } .m-drawer .m-social:hover{background:var(--ink);color:#fff;transform:translateY(-2px)} .m-drawer .m-social svg{width:18px;height:18px} body.menu-lock{overflow:hidden} /* ============================================================ TABLET + MOBILE (≤1024px) ============================================================ */ @media (max-width:1024px){ .cf-header{--h:76px;--logo-h:28px;--pad-l:20px;--pad-r:20px} .cf-header.is-scrolled{--h:60px;--logo-h:23px} .cf-header.search-open{--h:76px;--logo-h:28px} .cf-header .header-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:10px} .cf-header .header-inner > nav,.cf-header .actions{display:none} .cf-header .m-lang{display:flex;grid-column:1;justify-self:start} .cf-header .logo{grid-column:2;justify-self:center} .cf-header .m-tools{display:flex;grid-column:3;justify-self:end} .cf-header .burger{display:grid} .m-drawer{display:block} .cf-header.search-open .header-inner{display:flex} .cf-header.search-open .logo, .cf-header.search-open .m-lang, .cf-header.search-open .m-tools{display:none} .cf-header .sb-input{font-size:18px} } /* compact phones */ @media (max-width:560px){ .cf-header{--h:64px;--logo-h:24px;--pad-l:14px;--pad-r:12px} .cf-header.is-scrolled{--h:54px;--logo-h:21px} .cf-header.search-open{--h:64px;--logo-h:24px} .cf-header .m-lang .lang-opts{font-size:13px} .cf-header .m-tools{gap:2px} .m-drawer .m-panel{width:100%;padding:16px 18px calc(20px + env(safe-area-inset-bottom))} .m-drawer .m-link{font-size:18px;padding:15px 4px} /* search = full-height sheet beneath the bar; results in 2 cols */ .cf-header .sp-inner{max-height:none;height:calc(100dvh - var(--h))} .cf-header .sp-grid{grid-template-columns:repeat(2,1fr)} } /* tightest screens: drop the globe so the centred logo keeps its room */ @media (max-width:360px){ .cf-header .m-lang .globe{display:none} } /* ============================================================ REQUEST-CALL POPUP (white frosted backdrop · image left · form right) Holds the [request_call_form] output (.rcf-wrap) in a centred card. ============================================================ */ .cf-modal{ position:fixed;inset:0;z-index:1200; display:flex;align-items:center;justify-content:center; padding:24px;overflow:auto; } .cf-modal[hidden]{display:none} .cf-modal-scrim{ position:fixed;inset:0; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(16px) saturate(1.05); backdrop-filter:blur(16px) saturate(1.05); opacity:0;transition:opacity .35s ease;cursor:pointer; } .cf-modal.is-open .cf-modal-scrim{opacity:1} .cf-modal-card{ position:relative;z-index:1;margin:auto; width:100%;max-width:800px; opacity:0;transform:translateY(18px) scale(.985); transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1); } .cf-modal.is-open .cf-modal-card{opacity:1;transform:none} .cf-modal-card .rcf-wrap{max-width:none;box-shadow:0 40px 110px -28px rgba(17,19,21,.55)} /* image LEFT, form RIGHT (snippet renders form first); respects its mobile stacking */ .cf-modal .rcf-image-side{order:-1} .cf-modal-close{ position:absolute;top:12px;right:12px;z-index:6; width:40px;height:40px;display:grid;place-items:center; border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.16);color:#fff; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); transition:background-color .2s; } .cf-modal-close:hover{background:rgba(255,255,255,.32)} .cf-modal-close svg{width:16px;height:16px} body.cf-modal-lock{overflow:hidden} /* ── Defend the request-call form controls from theme/Elementor global