/* ============================================================ CFMOTO SINGLE PRODUCT — scoped under .cf-product (lightbox .cfp-lb* is intentionally UNSCOPED: it is relocated to by JS to escape transformed Elementor ancestors) ============================================================ */ /* @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-product{ --display:"GL Tatishvili Metal","Noto Sans Georgian",system-ui,sans-serif; --ink:#0e1012;--ink-2:#3b4248;--muted:#7b848c;--paper:#ffffff; --mist:#f3f3f3;--mist-2:#e8e8e8;--line:rgba(14,16,18,.09); --accent:#12BAD5;--accent-ink:#0a8ba1;--dark:#0c0e11; --r:10px;--ease:cubic-bezier(.22,1,.36,1);--gut:clamp(16px,3vw,48px); font-family:"Noto Sans Georgian",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink);background:var(--mist);-webkit-font-smoothing:antialiased; } .cf-product *{box-sizing:border-box;margin:0;padding:0} .cf-product img{display:block;max-width:100%} .cf-product a{color:inherit;text-decoration:none} .cf-product button{font:inherit;cursor:pointer} .cf-product :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .cf-product h1,.cf-product h2,.cf-product h3,.cf-product .cfp-stage-num,.cf-product .cfp-price,.cf-product .cfp-tab,.cf-product .cfp-stat b,.cf-product .cfp-mini b{font-family:var(--display)} /* reveal-on-scroll */ .cf-product .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .cf-product .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.cf-product .reveal{opacity:1;transform:none}.cf-product *{transition-duration:.001ms!important;animation:none!important}} /* HERO */ .cf-product .cfp-hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0c0e11} .cf-product .cfp-hero-bg{position:absolute;inset:0;overflow:hidden} .cf-product .cfp-hero-bg img{position:absolute;left:0;top:-25%;width:100%;height:150%;object-fit:cover;will-change:transform} .cf-product .cfp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,12,.45) 0%,rgba(8,10,12,0) 30%,rgba(8,10,12,.15) 55%,rgba(8,10,12,.85) 100%)} .cf-product .cfp-hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(26px,4vw,54px)} .cf-product .cfp-hero-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .cf-product .cfp-hero h1{font-size:clamp(40px,7vw,96px);font-weight:800;line-height:.98;letter-spacing:-.02em;margin-bottom:24px} .cf-product .cfp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden;backdrop-filter:blur(6px);max-width:760px} .cf-product .cfp-stat{background:rgba(12,14,17,.42);padding:16px 18px;min-width:0} .cf-product .cfp-stat b{display:block;font-size:clamp(17px,1.9vw,26px);font-weight:700;letter-spacing:-.01em;line-height:1.05} .cf-product .cfp-stat span{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;line-height:1.25} @media (max-width:680px){.cf-product .cfp-stats{grid-template-columns:repeat(2,1fr)!important}} /* INTRO */ /* LEFT = title + description + price + specs + button · RIGHT = product image */ .cf-product .cfp-intro{position:relative;padding:clamp(30px,4vw,60px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(28px,4vw,64px);align-items:center} .cf-product .cfp-intro-left h2{font-size:clamp(34px,4.6vw,60px);font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:clamp(16px,2.2vw,24px)} .cf-product .cfp-intro-right{position:relative} .cf-product .cfp-desc{font-size:14px;line-height:1.7;color:var(--ink-2);max-width:46ch;margin-bottom:clamp(20px,3vw,30px)} .cf-product .cfp-desc p{margin-bottom:10px} .cf-product .cfp-price-row{display:flex;align-items:center;gap:16px;margin-bottom:30px;flex-wrap:wrap} .cf-product .cfp-price{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.01em} .cf-product .cfp-price-old{font-size:clamp(17px,2vw,24px);font-weight:600;color:var(--muted,#9a9a9a);text-decoration:line-through;opacity:.85} .cf-product .cfp-cur{display:inline-flex;background:#ffffff;border-radius:40px;padding:4px} .cf-product .cfp-cur button{border:0;background:none;padding:7px 16px;border-radius:30px;font-size:13px;font-weight:700;color:var(--muted);transition:all .25s var(--ease)} .cf-product .cfp-cur button.on{background:var(--ink);color:#fff} .cf-product .cfp-ctas{display:flex;gap:12px;flex-wrap:wrap} .cf-product .cfp-btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 26px;border-radius:50px;font-size:15px;font-weight:600;border:0;transition:transform .2s var(--ease),box-shadow .25s var(--ease),background-color .2s} .cf-product .cfp-btn .a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:transform .35s var(--ease)} .cf-product .cfp-btn svg{width:16px;height:16px} .cf-product .cfp-btn--dark{background:var(--ink);color:#fff} .cf-product .cfp-btn--dark .a{background:var(--accent);color:#fff} .cf-product .cfp-btn--dark:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(14,16,18,.5)} .cf-product .cfp-btn--dark:hover .a{transform:rotate(45deg)} .cf-product .cfp-btn--ghost{background:var(--mist);color:var(--ink)} .cf-product .cfp-btn--ghost .a{background:var(--ink);color:#fff} .cf-product .cfp-btn--ghost:hover{background:var(--mist-2);transform:translateY(-2px)} .cf-product .cfp-btn--ghost:hover .a{transform:rotate(45deg)} /* intro mini-spec tiles + test-drive note */ .cf-product .cfp-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;margin-bottom:26px;max-width:none} .cf-product .cfp-mini div{background:none;border:0;border-radius:0;padding:0 0 14px;border-bottom:1px solid var(--line)} @media (max-width:520px){.cf-product .cfp-mini{grid-template-columns:1fr}} .cf-product .cfp-mini b{display:block;font-size:clamp(19px,1.9vw,24px);font-weight:700;letter-spacing:-.01em;line-height:1.05} .cf-product .cfp-mini span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px} .cf-product .cfp-note{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);margin-bottom:22px;max-width:46ch} .cf-product .cfp-note svg{flex:0 0 auto;width:17px;height:17px;color:var(--accent);margin-top:1px} /* product visual + colour switch */ .cf-product .cfp-visual{position:relative} .cf-product .cfp-stage-num{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(150px,26vw,380px);font-weight:800;color:rgba(14,16,18,.05);letter-spacing:-.05em;z-index:0;line-height:.8;pointer-events:none} .cf-product .cfp-shots{position:relative;z-index:1;width:100%;display:grid} .cf-product .cfp-shot{grid-area:1/1;width:100%;opacity:0;transform:scale(.98);transition:opacity .55s var(--ease),transform .55s var(--ease);display:grid;place-items:center} .cf-product .cfp-shot.on{opacity:1;transform:none} .cf-product .cfp-colors{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:18px;padding:0 6px} .cf-product .cfp-color-name{font-size:14px;font-weight:600} .cf-product .cfp-swatches{display:flex;gap:10px} .cf-product .cfp-sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;padding:3px;cursor:pointer;transition:border-color .2s;background:none} .cf-product .cfp-sw span{display:block;width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;background-color:var(--mist-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .cf-product .cfp-sw:hover{border-color:rgba(17,19,21,.18)} .cf-product .cfp-sw.on{border-color:var(--accent)} /* desktop two-column holds all the way down to 820px (13" laptops included) */ @media (max-width:820px){ .cf-product .cfp-intro{grid-template-columns:1fr;gap:clamp(20px,4vw,30px)} .cf-product .cfp-intro-right{order:-1} /* image first, then title/specs */ } /* FEATURES CAROUSEL */ .cf-product .cfp-features{padding:clamp(8px,1.6vw,22px) 0;background:none;overflow:hidden} .cf-product .cfp-sec-head{padding:0 var(--gut);margin-bottom:34px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px} .cf-product .cfp-sec-head .k{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .cf-product .cfp-sec-head h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.02em;margin-top:8px} .cf-product .cfp-swiper{padding:0 var(--gut)} .cf-product .cfp-swiper .swiper-slide{width:min(62vw,860px);transition:opacity .4s var(--ease)} .cf-product .cfp-swiper .swiper-slide:not(.swiper-slide-active){opacity:.45} .cf-product .cfp-fcard{border-radius:var(--r);overflow:hidden} .cf-product .cfp-fimg{position:relative;height:clamp(280px,46vw,560px);overflow:hidden;border-radius:var(--r)} .cf-product .cfp-fimg .pbg{position:absolute;inset:-8% -8% -8% -8%;background-size:cover;background-position:center;transition:transform .5s ease-out;will-change:transform} .cf-product .cfp-fimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,10,12,.78))} .cf-product .cfp-fcap{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(20px,3vw,40px);color:#fff;max-width:620px} .cf-product .cfp-fcap h3{font-size:clamp(20px,2.4vw,30px);font-weight:700;margin-bottom:8px} .cf-product .cfp-fcap p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82)} .cf-product .cfp-fwrap{position:relative} .cf-product .cfp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:none;border:0;padding:0;cursor:pointer;color:#fff;opacity:.9;transition:opacity .2s var(--ease),transform .25s var(--ease);filter:drop-shadow(0 3px 12px rgba(8,10,12,.55))} .cf-product .cfp-nav svg{display:block;width:clamp(34px,3.6vw,56px);height:clamp(34px,3.6vw,56px)} .cf-product .cfp-nav--prev{left:var(--gut)} .cf-product .cfp-nav--next{right:var(--gut)} .cf-product .cfp-nav:hover{opacity:1} .cf-product .cfp-nav--prev:hover{transform:translateY(-50%) translateX(-4px)} .cf-product .cfp-nav--next:hover{transform:translateY(-50%) translateX(4px)} .cf-product .cfp-dots{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:26px} .cf-product .cfp-dots .swiper-pagination-bullet{width:26px;height:7px;border-radius:5px;background:rgba(14,16,18,.18);opacity:1;transition:background-color .3s,width .3s} .cf-product .cfp-dots .swiper-pagination-bullet-active{background:var(--ink);width:38px} /* SPECIFICATIONS */ .cf-product .cfp-specs{padding:clamp(28px,3.5vw,52px) var(--gut)} .cf-product .cfp-specs-card{background:var(--paper);border-radius:12px;padding:clamp(26px,4vw,60px)} .cf-product .cfp-specs-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,70px);align-items:start} .cf-product .cfp-specs-img{align-self:center} .cf-product .cfp-tabs{display:flex;gap:6px;background:var(--mist);padding:5px;border-radius:40px;margin-bottom:26px;width:fit-content;max-width:100%;flex-wrap:wrap} .cf-product .cfp-tab{border:0;background:none;padding:10px 20px;border-radius:30px;font-size:14px;font-weight:600;color:var(--muted);transition:all .25s var(--ease)} .cf-product .cfp-tab.on{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(14,16,18,.06)} .cf-product .cfp-panel{display:none} .cf-product .cfp-panel.on{display:block;animation:cfpfade .4s var(--ease)} @keyframes cfpfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .cf-product .cfp-row{display:flex;justify-content:space-between;gap:20px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:14px} .cf-product .cfp-row span{color:var(--muted)} .cf-product .cfp-row b{font-weight:600;text-align:right} .cf-product .cfp-specs-img{border-radius:var(--r);display:grid;place-items:center;padding:0;min-height:320px} @media (max-width:900px){.cf-product .cfp-specs-grid{grid-template-columns:1fr}.cf-product .cfp-specs-img{order:-1}} /* GALLERY */ .cf-product .cfp-gallery{padding:0 var(--gut) clamp(30px,4vw,60px)} .cf-product .cfp-grid{display:grid;gap:14px} .cf-product .cfp-cell{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:var(--mist);border:0;padding:0;display:block} .cf-product .cfp-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .cf-product .cfp-cell:hover img{transform:scale(1.06)} .cf-product .cfp-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,10,12,.55);color:#fff;font-size:clamp(22px,3vw,38px);font-weight:700;transition:background-color .2s} .cf-product .cfp-cell:hover .cfp-more{background:rgba(8,10,12,.66)} .cf-product .cfp-gal--2{grid-template-columns:1fr 1fr;height:clamp(260px,38vw,440px)} .cf-product .cfp-gal--3{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;height:clamp(320px,42vw,520px)} .cf-product .cfp-gal--3 .cfp-cell:first-child{grid-row:1/3} .cf-product .cfp-gal--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:clamp(360px,48vw,560px)} .cf-product .cfp-gal--5{grid-template-columns:1.45fr 1fr 1fr;grid-template-rows:1fr 1fr;height:clamp(360px,46vw,560px)} .cf-product .cfp-gal--5 .cfp-cell:first-child{grid-row:1/3} @media (max-width:760px){ .cf-product .cfp-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:none!important;grid-auto-rows:40vw!important;height:auto!important} .cf-product .cfp-gal--3 .cfp-cell:first-child,.cf-product .cfp-gal--5 .cfp-cell:first-child{grid-row:auto;grid-column:1/-1} } /* LIGHTBOX — UNSCOPED (relocated to ) */ .cfp-lb{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:clamp(20px,5vw,70px);background:rgba(8,10,12,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .cfp-lb.on{display:flex} .cfp-lb[hidden]{display:none} .cfp-lb-img{max-width:90vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);user-select:none} .cfp-lb-x{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s} .cfp-lb-x:hover{background:rgba(255,255,255,.28)} .cfp-lb-x svg{width:18px;height:18px} .cfp-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;padding:0;cursor:pointer;color:#fff;opacity:.9;transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 3px 12px rgba(0,0,0,.6))} .cfp-lb-nav svg{display:block;width:clamp(38px,4vw,64px);height:clamp(38px,4vw,64px)} .cfp-lb-prev{left:clamp(10px,2.5vw,40px)} .cfp-lb-next{right:clamp(10px,2.5vw,40px)} .cfp-lb-nav:hover{opacity:1} .cfp-lb-prev:hover{transform:translateY(-50%) translateX(-4px)} .cfp-lb-next:hover{transform:translateY(-50%) translateX(4px)} .cfp-lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.05em;font-variant-numeric:tabular-nums}