/* ===================================================================== AMB OILS · PREMIUM REDESIGN SYSTEM — eShop edition (amboils.de) Ported from the amboils.eu redesign and extended with the components this shop needs (nav, footer, oil finder, testimonials, shop, cart). Brand palette: gold #b88722 / #c79f3f / #d4a63b · ink #1a1a1a Everything is namespaced with .ax- so the Chakta/WooCommerce theme CSS that still ships in the base template cannot bleed into it. ===================================================================== */ :root{ --ax-gold-1:#b88722; --ax-gold-2:#c79f3f; --ax-gold-3:#d4a63b; --ax-gold-soft:#e7c874; --ax-ink:#1a1a1a; --ax-ink-2:#232323; --ax-cream:#faf7f0; --ax-cream-2:#f3ecdd; --ax-text:#20242b; --ax-muted:#6c7280; --ax-line:rgba(0,0,0,.08); --ax-grad:linear-gradient(120deg,var(--ax-gold-1) 0%,var(--ax-gold-2) 45%,var(--ax-gold-3) 100%); --ax-shadow:0 22px 55px rgba(120,85,15,.16); --ax-radius:20px; --ax-ease:cubic-bezier(.16,.84,.44,1); --ax-nav-h:78px; } /* --------------------------------------------------------------------- PAGE SHELL The old theme leaves a lot of layout junk on ; .ax-page resets the parts that matter and gives every redesigned page one rhythm. --------------------------------------------------------------------- */ body.ax-page{ background:var(--ax-cream); color:var(--ax-text); overflow-x:hidden; font-family:'Poppins','Rubik',system-ui,-apple-system,'Segoe UI',sans-serif; margin:0; padding:0; } body.ax-page img{ max-width:100%; } .ax-section{ position:relative; padding:96px 0; z-index:1; } .ax-section--tight{ padding:64px 0; } .ax-wrap{ width:min(1180px,92vw); margin:0 auto; } .ax-wrap--wide{ width:min(1380px,94vw); margin:0 auto; } .ax-center{ text-align:center; } .ax-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--ax-gold-1); margin:0 0 16px; } .ax-eyebrow::before, .ax-eyebrow.ax-two::after{ content:""; width:34px; height:2px; border-radius:2px; background:var(--ax-grad); } .ax-title{ font-size:clamp(28px,4vw,46px); line-height:1.1; font-weight:900; letter-spacing:-.5px; margin:0 0 18px; color:var(--ax-ink); } .ax-title .ax-hl{ background:var(--ax-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .ax-lead{ font-size:clamp(15px,1.5vw,17px); line-height:1.75; color:var(--ax-muted); max-width:640px; } .ax-center .ax-lead, .ax-center .ax-eyebrow{ margin-left:auto; margin-right:auto; } /* ---- Buttons ---- */ .ax-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:14px; font-size:15px; font-weight:800; letter-spacing:.3px; text-decoration:none; cursor:pointer; border:none; position:relative; overflow:hidden; z-index:0; font-family:inherit; line-height:1.2; transition:transform .35s var(--ax-ease), box-shadow .35s var(--ax-ease); } .ax-btn i{ transition:transform .35s var(--ax-ease); } .ax-btn:hover{ transform:translateY(-3px); text-decoration:none; } .ax-btn:hover i{ transform:translateX(4px); } .ax-btn-gold{ background:var(--ax-grad); color:#fff; box-shadow:0 14px 30px rgba(199,159,63,.38); } .ax-btn-gold:hover, .ax-btn-gold:focus{ color:#fff; box-shadow:0 20px 40px rgba(199,159,63,.5); } .ax-btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); } .ax-btn-ghost:hover, .ax-btn-ghost:focus{ color:#fff; background:rgba(255,255,255,.1); border-color:#fff; } .ax-btn-dark{ background:var(--ax-ink); color:#fff; box-shadow:0 12px 26px rgba(0,0,0,.22); } .ax-btn-dark:hover, .ax-btn-dark:focus{ color:#fff; } .ax-btn-sm{ padding:11px 20px; font-size:13.5px; border-radius:11px; } .ax-btn::after{ /* shine sweep */ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; transform:skewX(-20deg); z-index:-1; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); } .ax-btn:hover::after{ animation:ax-shine .9s ease; } @keyframes ax-shine{ to{ left:150%; } } /* ===================================================================== AMBIENT OIL DROPLET FIELD (fixed, behind content) ===================================================================== */ .ax-oil-field{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .ax-drop{ position:absolute; bottom:-60px; width:14px; height:16px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:radial-gradient(circle at 33% 25%, #fff4c6 0%, #f2c749 26%, #dca325 55%, #b17d18 100%); box-shadow:0 0 16px rgba(224,170,43,.6), 0 2px 6px rgba(120,80,10,.35), inset -2px -3px 6px rgba(120,80,10,.5), inset 2px 2px 4px rgba(255,240,180,.5); opacity:0; filter:saturate(1.15); animation:ax-float linear infinite; } .ax-drop::after{ content:""; position:absolute; top:15%; left:22%; width:34%; height:28%; border-radius:50%; background:rgba(255,250,220,.9); filter:blur(.4px); } @keyframes ax-float{ 0%{ transform:translateY(0) translateX(0) scale(.7); opacity:0; } 10%{ opacity:.5; } 50%{ transform:translateY(-52vh) translateX(16px) scale(1); opacity:.42; } 90%{ opacity:.22; } 100%{ transform:translateY(-106vh) translateX(-10px) scale(1.1); opacity:0; } } /* ===================================================================== TOP BAR + STICKY NAVIGATION ===================================================================== */ .ax-topbar{ background:var(--ax-ink); color:rgba(255,255,255,.8); font-size:13px; position:relative; z-index:60; } .ax-topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:10px 0; } .ax-topbar__list{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; list-style:none; margin:0; padding:0; } .ax-topbar__list li{ display:inline-flex; align-items:center; gap:9px; margin:0; } .ax-topbar__list i{ color:var(--ax-gold-3); font-size:14px; } .ax-topbar__list a{ color:rgba(255,255,255,.85); text-decoration:none; font-weight:600; } .ax-topbar__list a:hover{ color:var(--ax-gold-3); } .ax-topbar__list b{ color:#fff; font-weight:700; } .ax-topbar__lang{ display:flex; align-items:center; min-height:26px; } .ax-nav{ position:sticky; top:0; z-index:900; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid rgba(199,159,63,.18); transition:box-shadow .35s ease, padding .35s ease; } .ax-nav.ax-stuck{ box-shadow:0 10px 34px rgba(0,0,0,.10); } .ax-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--ax-nav-h); } .ax-nav__logo{ display:flex; align-items:center; flex:0 0 auto; } .ax-nav__logo img{ height:52px; width:auto; object-fit:contain; display:block; } .ax-nav__links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; } .ax-nav__links > li{ margin:0; } .ax-nav__links > li > a{ position:relative; display:block; padding:10px 15px; border-radius:10px; color:var(--ax-ink); font-size:15px; font-weight:700; text-decoration:none; transition:color .3s ease; } .ax-nav__links > li > a::after{ content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px; background:var(--ax-grad); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ax-ease); } .ax-nav__links > li > a:hover{ color:var(--ax-gold-1); } .ax-nav__links > li > a:hover::after, .ax-nav__links > li > a.ax-active::after{ transform:scaleX(1); } .ax-nav__links > li > a.ax-active{ color:var(--ax-gold-1); } .ax-nav__actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; } /* the menu also carries a CTA for the mobile drawer — hidden on desktop so it does not duplicate the one in .ax-nav__actions */ .ax-nav__menu > .ax-btn{ display:none; } /* GTranslate renders inline inside .gtranslate_wrapper (top bar) */ .gtranslate_wrapper .gt_float_switcher{ box-shadow:none !important; background:transparent !important; font-family:inherit !important; } .gtranslate_wrapper .gt_float_switcher .gt_selected a{ color:rgba(255,255,255,.85) !important; font-size:13px !important; font-weight:600 !important; padding:2px 10px !important; } .gtranslate_wrapper .gt_float_switcher img{ vertical-align:middle; } .ax-burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--ax-line); background:#fff; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .ax-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--ax-ink); transition:.3s var(--ax-ease); } .ax-burger.ax-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .ax-burger.ax-open span:nth-child(2){ opacity:0; } .ax-burger.ax-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media(max-width:1100px){ .ax-burger{ display:flex; } .ax-nav__menu{ position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--ax-line); box-shadow:0 22px 40px rgba(0,0,0,.12); padding:14px 4vw 22px; display:none; } .ax-nav__menu.ax-open{ display:block; } .ax-nav__links{ flex-direction:column; align-items:stretch; gap:2px; } .ax-nav__links > li > a{ padding:14px 12px; font-size:16px; } .ax-nav__links > li > a::after{ display:none; } .ax-nav__links > li + li{ border-top:1px solid var(--ax-line); } .ax-nav__actions .ax-btn{ display:none; } .ax-nav__menu > .ax-btn{ display:inline-flex; width:100%; margin-top:16px; } } @media(max-width:640px){ .ax-topbar__inner{ justify-content:center; text-align:center; } .ax-topbar__list{ justify-content:center; gap:16px; font-size:12px; } .ax-nav__logo img{ height:42px; } } /* ===================================================================== HERO (home) ===================================================================== */ .ax-hero{ position:relative; overflow:hidden; display:flex; align-items:center; flex-direction:column; padding:110px 0 90px; background:#0e0e0e; z-index:1; } .ax-hero__bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transform:scale(1.12); will-change:transform; } .ax-hero__bg::after{ content:""; position:absolute; inset:0; background: radial-gradient(1200px 600px at 15% 10%, rgba(199,159,63,.28), transparent 60%), linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(12,12,12,.82) 45%, rgba(14,14,14,.55) 100%), linear-gradient(0deg, rgba(8,8,8,.95), rgba(8,8,8,.2) 55%); } .ax-hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; width:min(1180px,92vw); margin:0 auto; } .ax-hero__badge{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:50px; margin-bottom:24px; background:rgba(199,159,63,.12); border:1px solid rgba(199,159,63,.35); color:var(--ax-gold-soft); font-size:13px; font-weight:700; letter-spacing:.5px; } .ax-hero__badge .ax-dot{ width:8px; height:8px; border-radius:50%; background:var(--ax-gold-3); box-shadow:0 0 0 0 rgba(212,166,59,.7); animation:ax-pulse 2s infinite; } @keyframes ax-pulse{ 0%{ box-shadow:0 0 0 0 rgba(212,166,59,.6);} 70%{ box-shadow:0 0 0 12px rgba(212,166,59,0);} 100%{ box-shadow:0 0 0 0 rgba(212,166,59,0);} } .ax-hero h1{ font-size:clamp(34px,5vw,64px); line-height:1.04; font-weight:900; letter-spacing:-1.2px; color:#fff; margin:0 0 22px; } .ax-hero h1 .ax-hl{ background:linear-gradient(120deg,var(--ax-gold-soft),var(--ax-gold-3),var(--ax-gold-1)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; } .ax-hero p.ax-hero__sub{ font-size:clamp(15px,1.6vw,18px); line-height:1.7; color:rgba(255,255,255,.82); max-width:530px; margin:0 0 34px; } .ax-hero__cta{ display:flex; gap:16px; flex-wrap:wrap; } .ax-hero__stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; } .ax-hero__stat .ax-num{ font-size:34px; font-weight:900; color:#fff; line-height:1; } .ax-hero__stat .ax-num span{ color:var(--ax-gold-3); } .ax-hero__stat small{ display:block; margin-top:6px; color:rgba(255,255,255,.6); font-size:13px; font-weight:600; letter-spacing:.4px; } /* floating product card on hero right */ .ax-hero__product{ position:relative; display:flex; justify-content:center; } .ax-hero__pcard{ position:relative; width:min(360px,80%); padding:26px; border-radius:26px; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 70px rgba(0,0,0,.5); backdrop-filter:blur(8px); animation:ax-hover 6s ease-in-out infinite; } @keyframes ax-hover{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-16px) rotate(-1deg); } } .ax-hero__pcard::before{ content:""; position:absolute; inset:-1px; border-radius:26px; padding:1px; background:linear-gradient(140deg,rgba(212,166,59,.8),transparent 45%,rgba(212,166,59,.4)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .ax-hero__pcard img{ width:82%; max-height:280px; object-fit:contain; filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)); } .ax-hero__pcard .ax-tag{ position:absolute; top:18px; left:18px; z-index:2; background:var(--ax-grad); color:#fff; font-size:11px; font-weight:800; letter-spacing:1px; padding:6px 12px; border-radius:8px; } .ax-hero__pcard h4{ color:#fff; font-size:16px; font-weight:800; margin:14px 0 4px; } .ax-hero__pcard a.ax-plink{ color:var(--ax-gold-3); font-weight:800; font-size:13px; text-decoration:none; } .ax-hero__pcard a.ax-plink:hover{ color:#fff; } .ax-hero__glow{ position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(199,159,63,.5), transparent 65%); filter:blur(20px); z-index:-1; top:50%; left:50%; transform:translate(-50%,-50%); animation:ax-breathe 5s ease-in-out infinite; } @keyframes ax-breathe{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(.9);} 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.1);} } /* ---- Realistic gold oil-splash graphic ---- */ .ax-hero__splash{ position:absolute; z-index:1; right:-3%; bottom:-2%; width:min(700px,60%); pointer-events:none; opacity:0; filter:drop-shadow(0 24px 50px rgba(199,159,63,.45)); animation:ax-splash-in 1.5s var(--ax-ease) .3s forwards, ax-splash-float 8s ease-in-out 1.8s infinite; } @keyframes ax-splash-in{ from{ opacity:0; transform:translateX(60px) scale(.96); } to{ opacity:.9; transform:translateX(0) scale(1); } } @keyframes ax-splash-float{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-16px) rotate(-1.4deg); } } /* wavy oil divider under hero */ .ax-wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:3; line-height:0; } .ax-wave svg{ width:100%; height:70px; display:block; } /* ===================================================================== OIL FINDER — the shop's signature tool, kept and re-skinned ===================================================================== */ .ax-finder{ position:relative; z-index:5; width:min(1180px,92vw); margin:-88px auto 0; } .ax-finder__box{ background:rgba(255,255,255,.97); border:1px solid rgba(199,159,63,.28); border-radius:24px; padding:30px 32px 32px; box-shadow:0 34px 70px rgba(0,0,0,.34); backdrop-filter:blur(6px); position:relative; overflow:hidden; } .ax-finder__box::before{ content:""; position:absolute; left:0; top:0; width:100%; height:5px; background:var(--ax-grad); } .ax-finder__head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap; } .ax-finder__ic{ width:52px; height:52px; flex:0 0 52px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; background:var(--ax-grad); box-shadow:0 12px 26px rgba(199,159,63,.35); } .ax-finder__head h3{ margin:0; font-size:clamp(19px,2.4vw,25px); font-weight:900; color:var(--ax-ink); line-height:1.2; } .ax-finder__head p{ margin:4px 0 0; font-size:14px; color:var(--ax-muted); font-weight:500; } .ax-finder__grid{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:14px; align-items:end; } .ax-finder__field label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--ax-muted); margin:0 0 8px; } .ax-finder__field select{ width:100%; height:56px; padding:0 42px 0 16px; border:1.5px solid var(--ax-line); border-radius:14px; background-color:#fff; color:var(--ax-text); font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23b88722' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4Z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; transition:border-color .25s ease, box-shadow .25s ease; } .ax-finder__field select:focus{ outline:none; border-color:var(--ax-gold-2); box-shadow:0 0 0 4px rgba(199,159,63,.15); } .ax-finder__submit{ height:56px; padding:0 34px; border:none; border-radius:14px; background:var(--ax-grad); color:#fff; font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; white-space:nowrap; box-shadow:0 14px 30px rgba(199,159,63,.38); transition:transform .3s var(--ax-ease), box-shadow .3s var(--ax-ease); } .ax-finder__submit:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(199,159,63,.5); } @media(max-width:900px){ .ax-finder{ margin:-56px auto 0; } .ax-finder__box{ padding:24px 20px 26px; border-radius:20px; } .ax-finder__grid{ grid-template-columns:1fr; } .ax-finder__submit{ width:100%; } } /* result banner shown after an oil-finder search */ .ax-finder-result{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:rgba(199,159,63,.1); border:1px solid rgba(199,159,63,.3); color:var(--ax-ink); border-radius:16px; padding:16px 22px; font-weight:700; font-size:15px; margin-bottom:34px; } .ax-finder-result i{ color:var(--ax-gold-1); font-size:19px; } .ax-finder-result a{ color:var(--ax-gold-1); text-decoration:none; font-weight:800; margin-left:auto; } .ax-finder-result a:hover{ color:var(--ax-ink); } /* ===================================================================== TRUST MARQUEE ===================================================================== */ .ax-marquee{ background:var(--ax-ink); color:#fff; padding:20px 0; overflow:hidden; position:relative; z-index:1; } .ax-marquee__track{ display:flex; gap:60px; width:max-content; animation:ax-scroll 26s linear infinite; } .ax-marquee:hover .ax-marquee__track{ animation-play-state:paused; } .ax-marquee__item{ display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.85); white-space:nowrap; } .ax-marquee__item i{ color:var(--ax-gold-3); font-size:18px; } .ax-marquee--after-finder{ margin-top:82px; } @keyframes ax-scroll{ to{ transform:translateX(-50%); } } /* ===================================================================== INTERIOR PAGE HERO (about / products / contact / detail / cart) ===================================================================== */ .ax-page-hero{ position:relative; overflow:hidden; background:#0e0e0e; padding:92px 0 74px; z-index:1; } .ax-page-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.3; z-index:0; } .ax-page-hero::after{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(900px 420px at 12% 0%, rgba(199,159,63,.32), transparent 60%), linear-gradient(180deg, rgba(10,10,10,.72), rgba(12,12,12,.93)); } .ax-page-hero__splash{ position:absolute; right:-3%; bottom:-14%; width:min(560px,46%); opacity:.45; z-index:1; pointer-events:none; filter:drop-shadow(0 20px 40px rgba(199,159,63,.4)); animation:ax-splash-float 8s ease-in-out infinite; } .ax-page-hero .ax-wrap{ position:relative; z-index:2; } .ax-page-hero__title{ font-size:clamp(30px,5vw,54px); font-weight:900; color:#fff; letter-spacing:-1px; margin:12px 0 14px; line-height:1.05; } .ax-page-hero__title .ax-hl{ background:linear-gradient(120deg,var(--ax-gold-soft),var(--ax-gold-3),var(--ax-gold-1)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ax-breadcrumb{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:rgba(255,255,255,.55); flex-wrap:wrap; list-style:none; margin:0; padding:0; } .ax-breadcrumb li{ display:inline-flex; align-items:center; gap:10px; margin:0; } .ax-breadcrumb a{ color:var(--ax-gold-3); text-decoration:none; } .ax-breadcrumb a:hover{ color:#fff; } .ax-breadcrumb i{ font-size:9px; opacity:.6; } /* ===================================================================== SHARED CONTENT PRIMITIVES ===================================================================== */ .ax-prose{ font-size:16px; line-height:1.85; color:#3a3f47; } .ax-prose > p{ margin:0 0 18px; } .ax-prose h1,.ax-prose h2,.ax-prose h3,.ax-prose h4{ color:var(--ax-ink); font-weight:800; margin:30px 0 14px; line-height:1.25; } .ax-prose h2{ font-size:26px; } .ax-prose h3{ font-size:21px; } .ax-prose h4{ font-size:18px; } .ax-prose a{ color:var(--ax-gold-1); font-weight:700; } .ax-prose ul,.ax-prose ol{ margin:0 0 18px; padding-left:22px; } .ax-prose li{ margin:0 0 10px; } .ax-prose img{ max-width:100%; height:auto; border-radius:14px; margin:16px 0; } .ax-prose b,.ax-prose strong{ color:var(--ax-ink); } .ax-prose blockquote{ border-left:4px solid var(--ax-gold-2); background:#fff; padding:14px 20px; border-radius:0 12px 12px 0; margin:18px 0; color:#555; } .ax-card{ background:#fff; border:1px solid var(--ax-line); border-radius:20px; padding:32px; box-shadow:0 10px 30px rgba(0,0,0,.05); } .ax-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } @media(max-width:1024px){ .ax-split{ grid-template-columns:1fr; gap:40px; } } /* forms */ .ax-form{ display:grid; gap:18px; } .ax-form .ax-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .ax-field{ position:relative; } .ax-field label{ display:block; font-size:13px; font-weight:700; color:var(--ax-ink); margin-bottom:8px; } .ax-field input,.ax-field select,.ax-field textarea{ width:100%; padding:14px 16px; border:1.5px solid var(--ax-line); border-radius:12px; background:#fff; font-size:15px; color:var(--ax-text); font-family:inherit; transition:border-color .25s ease, box-shadow .25s ease; } .ax-field input:focus,.ax-field select:focus,.ax-field textarea:focus{ outline:none; border-color:var(--ax-gold-2); box-shadow:0 0 0 4px rgba(199,159,63,.14); } .ax-field textarea{ min-height:160px; resize:vertical; } @media(max-width:640px){ .ax-form .ax-row{ grid-template-columns:1fr; } } /* messages / alerts */ .ax-alert{ display:flex; align-items:flex-start; gap:12px; background:rgba(46,160,90,.1); border:1px solid rgba(46,160,90,.32); color:#1c6b3d; border-radius:14px; padding:15px 18px; margin:0 0 20px; font-size:14.5px; font-weight:600; line-height:1.6; } .ax-alert i{ margin-top:2px; } .ax-alert--error{ background:rgba(200,50,50,.08); border-color:rgba(200,50,50,.3); color:#a02020; } /* ===================================================================== ABOUT ===================================================================== */ .ax-about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .ax-about__media{ position:relative; } .ax-about__media img.ax-main{ width:100%; border-radius:24px; box-shadow:var(--ax-shadow); display:block; aspect-ratio:4/3; object-fit:cover; } .ax-about__media .ax-globe{ position:absolute; right:-18px; bottom:-18px; width:120px; height:120px; border-radius:20px; background:#fff; box-shadow:var(--ax-shadow); display:flex; align-items:center; justify-content:center; animation:ax-hover 7s ease-in-out infinite; } .ax-about__media .ax-globe img{ width:66px; animation:ax-spin 20s linear infinite; } @keyframes ax-spin{ to{ transform:rotate(360deg);} } .ax-about__media .ax-exp{ position:absolute; left:-18px; top:-18px; padding:16px 22px; border-radius:16px; background:var(--ax-grad); color:#fff; box-shadow:0 18px 40px rgba(199,159,63,.4); } .ax-about__media .ax-exp b{ font-size:30px; font-weight:900; display:block; line-height:1; } .ax-about__media .ax-exp span{ font-size:12px; font-weight:700; letter-spacing:.5px; opacity:.92; } .ax-about__list{ list-style:none; padding:0; margin:24px 0 32px; display:grid; gap:14px; } .ax-about__list li{ display:flex; gap:12px; align-items:flex-start; font-weight:600; color:var(--ax-text); } .ax-about__list li i{ color:var(--ax-gold-1); margin-top:3px; } /* ===================================================================== FEATURES (Why choose) ===================================================================== */ .ax-features{ background:linear-gradient(180deg,#fff, var(--ax-cream)); } .ax-feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:56px; } .ax-feat{ position:relative; background:#fff; border-radius:var(--ax-radius); padding:34px 26px; border:1px solid var(--ax-line); box-shadow:0 10px 30px rgba(0,0,0,.05); transition:transform .5s var(--ax-ease), box-shadow .5s var(--ax-ease); overflow:hidden; } .ax-feat::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--ax-grad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ax-ease); } .ax-feat:hover{ transform:translateY(-12px); box-shadow:var(--ax-shadow); } .ax-feat:hover::before{ transform:scaleX(1); } .ax-feat__icon{ width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; background:var(--ax-grad); margin-bottom:20px; box-shadow:0 12px 26px rgba(199,159,63,.35); transition:transform .55s cubic-bezier(.34,1.56,.64,1); } .ax-feat:hover .ax-feat__icon{ transform:rotate(-8deg) scale(1.08); } .ax-feat h3{ font-size:18px; font-weight:800; margin:0 0 10px; color:var(--ax-ink); } .ax-feat p{ font-size:14px; line-height:1.65; color:var(--ax-muted); margin:0; } .ax-feat__num{ position:absolute; right:18px; top:14px; font-size:44px; font-weight:900; color:rgba(199,159,63,.10); line-height:1; } /* ===================================================================== COUNTERS BAND (parallax dark) ===================================================================== */ .ax-counters{ position:relative; padding:84px 0; color:#fff; text-align:center; overflow:hidden; background:#101010; z-index:1; } .ax-counters__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; z-index:0; } .ax-counters::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(184,135,34,.22),rgba(16,16,16,.7)); z-index:0; } .ax-counters .ax-wrap{ position:relative; z-index:1; } .ax-count-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .ax-count b{ font-size:clamp(34px,5vw,54px); font-weight:900; line-height:1; background:linear-gradient(120deg,#fff,var(--ax-gold-3)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ax-count span{ display:block; margin-top:10px; font-size:14px; font-weight:600; letter-spacing:.6px; color:rgba(255,255,255,.72); } .ax-count .ax-plus{ color:var(--ax-gold-3); -webkit-text-fill-color:var(--ax-gold-3); } /* ===================================================================== SERVICES ===================================================================== */ .ax-serv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; } .ax-serv{ position:relative; padding:36px 26px 30px; border-radius:var(--ax-radius); background:#fff; border:1px solid var(--ax-line); text-align:center; overflow:hidden; transition:transform .5s var(--ax-ease), box-shadow .5s var(--ax-ease), background .5s ease; } .ax-serv:hover{ transform:translateY(-10px); box-shadow:var(--ax-shadow); background:linear-gradient(180deg,#fff,#fffdf7); } .ax-serv__icon{ width:78px; height:78px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; font-size:28px; color:var(--ax-gold-1); background:radial-gradient(circle at 50% 40%, #fff6e3, #f4e6c4); transition:transform .55s cubic-bezier(.34,1.56,.64,1); } .ax-serv:hover .ax-serv__icon{ transform:translateY(-4px) scale(1.06); color:#fff; background:var(--ax-grad); } .ax-serv__icon img{ width:38px; height:38px; object-fit:contain; } .ax-serv__icon::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--ax-gold-2); opacity:0; } .ax-serv:hover .ax-serv__icon::after{ animation:ax-ripple .8s ease-out; } @keyframes ax-ripple{ 0%{ opacity:.6; transform:scale(1);} 100%{ opacity:0; transform:scale(1.6);} } .ax-serv h3{ font-size:17px; font-weight:800; margin:0 0 10px; color:var(--ax-ink); } .ax-serv p{ font-size:14px; line-height:1.6; color:var(--ax-muted); margin:0; } /* ===================================================================== PRODUCTS SHOWCASE / SHOP GRID ===================================================================== */ .ax-products{ background:linear-gradient(180deg,var(--ax-cream),#fff); } .ax-prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:56px; } .ax-prod-grid--flush{ margin-top:0; } .ax-prod{ position:relative; background:#fff; border-radius:22px; overflow:hidden; border:1px solid var(--ax-line); box-shadow:0 10px 30px rgba(0,0,0,.05); transition:transform .55s var(--ax-ease), box-shadow .55s var(--ax-ease); display:flex; flex-direction:column; } .ax-prod__media{ position:relative; padding:30px; background:linear-gradient(180deg,#fbf7ec,#fff); display:flex; align-items:center; justify-content:center; min-height:250px; } .ax-prod__media::before{ content:""; position:absolute; left:50%; bottom:-30%; width:130%; height:70%; transform:translateX(-50%) scale(.5); opacity:0; background:radial-gradient(ellipse at center, rgba(199,159,63,.28), transparent 70%); transition:opacity .55s ease, transform .55s ease; } .ax-prod:hover .ax-prod__media::before{ opacity:1; transform:translateX(-50%) scale(1); } .ax-prod__media img{ max-height:210px; max-width:88%; object-fit:contain; transition:transform .6s var(--ax-ease), filter .6s ease; } .ax-prod:hover .ax-prod__media img{ transform:scale(1.12) rotate(-2deg); filter:drop-shadow(0 18px 22px rgba(120,85,15,.28)); } .ax-prod__tag{ position:absolute; top:16px; left:16px; z-index:2; background:var(--ax-grad); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.8px; padding:5px 11px; border-radius:7px; } .ax-prod__fav{ position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; color:var(--ax-gold-1); font-size:14px; } .ax-prod__body{ padding:20px 22px 24px; text-align:center; display:flex; flex-direction:column; flex:1; } .ax-prod__body h3{ font-size:15px; font-weight:800; line-height:1.35; color:var(--ax-ink); margin:0 0 12px; min-height:42px; display:flex; align-items:center; justify-content:center; } .ax-prod__rating{ color:var(--ax-gold-3); font-size:12px; margin-bottom:10px; letter-spacing:2px; } .ax-prod__price{ font-size:19px; font-weight:900; color:var(--ax-gold-1); margin:0 0 8px; } .ax-prod__price small{ font-size:12px; font-weight:700; color:var(--ax-muted); display:block; margin-bottom:3px; letter-spacing:.6px; text-transform:uppercase; } .ax-prod__specs{ list-style:none; margin:0 0 14px; padding:0; text-align:left; display:grid; gap:6px; } .ax-prod__specs li{ font-size:12.5px; color:var(--ax-muted); display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--ax-line); padding-bottom:5px; } .ax-prod__specs li b{ color:var(--ax-ink); font-weight:700; text-align:right; } .ax-prod__sizes{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; } .ax-prod__sizes a{ font-size:11.5px; font-weight:800; text-decoration:none; padding:5px 11px; border-radius:8px; color:var(--ax-gold-1); background:rgba(199,159,63,.1); border:1px solid rgba(199,159,63,.28); transition:.25s ease; } .ax-prod__sizes a:hover{ background:var(--ax-grad); color:#fff; border-color:transparent; } .ax-prod__btn{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:12px; font-weight:800; font-size:13.5px; text-decoration:none; color:var(--ax-ink); border:1.5px solid var(--ax-gold-2); position:relative; overflow:hidden; transition:color .35s ease, background .35s ease; z-index:0; } .ax-prod__btn::after{ content:""; position:absolute; inset:0; background:var(--ax-grad); z-index:-1; transform:translateY(101%); transition:transform .4s var(--ax-ease); } .ax-prod:hover{ transform:translateY(-14px); box-shadow:var(--ax-shadow); } .ax-prod__btn:hover{ color:#fff; } .ax-prod__btn:hover::after{ transform:translateY(0); } .ax-products__all{ text-align:center; margin-top:52px; } /* empty state */ .ax-empty{ text-align:center; padding:60px 20px; grid-column:1/-1; } .ax-empty i{ font-size:46px; color:rgba(199,159,63,.4); margin-bottom:18px; display:block; } .ax-empty h3{ font-size:22px; font-weight:900; color:var(--ax-ink); margin:0 0 12px; } .ax-empty p{ color:var(--ax-muted); font-size:15px; line-height:1.75; max-width:620px; margin:0 auto; } .ax-empty a{ color:var(--ax-gold-1); font-weight:700; text-decoration:none; } /* shop layout (product listing + sidebar) */ .ax-shop-grid{ display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:start; } .ax-shop-grid .ax-prod-grid{ grid-template-columns:repeat(3,1fr); margin-top:0; } @media(max-width:1100px){ .ax-shop-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .ax-shop-grid .ax-prod-grid{ grid-template-columns:repeat(2,1fr);} } @media(max-width:520px){ .ax-shop-grid .ax-prod-grid{ grid-template-columns:1fr;} } /* sidebar widgets */ .ax-widget{ background:#fff; border:1px solid var(--ax-line); border-radius:18px; padding:24px; margin-bottom:22px; box-shadow:0 8px 24px rgba(0,0,0,.05); } .ax-widget__title{ font-size:16px; font-weight:800; color:var(--ax-ink); margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--ax-line); position:relative; } .ax-widget__title::after{ content:""; position:absolute; left:0; bottom:-1px; width:46px; height:3px; border-radius:3px; background:var(--ax-grad); } .ax-widget ul{ list-style:none; margin:0; padding:0; } .ax-widget ul li{ margin:0; } .ax-widget ul li a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; border-radius:10px; color:var(--ax-text); text-decoration:none; font-weight:600; font-size:14px; transition:.25s ease; } .ax-widget ul li a:hover{ background:rgba(199,159,63,.1); color:var(--ax-gold-1); padding-left:16px; } .ax-widget ul li a i{ font-size:10px; opacity:.5; } .ax-widget select,.ax-widget input{ width:100%; padding:13px 15px; border:1.5px solid var(--ax-line); border-radius:12px; background:#fff; font-size:14px; color:var(--ax-text); font-family:inherit; } .ax-widget select:focus,.ax-widget input:focus{ outline:none; border-color:var(--ax-gold-2); box-shadow:0 0 0 4px rgba(199,159,63,.14); } /* promo card in the sidebar */ .ax-promo{ position:relative; overflow:hidden; border-radius:18px; padding:34px 26px; background:#111; color:#fff; text-align:center; box-shadow:var(--ax-shadow); } .ax-promo__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.3; } .ax-promo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,12,12,.6),rgba(12,12,12,.9)); } .ax-promo > *{ position:relative; z-index:1; } .ax-promo h3{ font-size:22px; font-weight:900; margin:0 0 8px; line-height:1.25; } .ax-promo h3 span{ display:block; color:var(--ax-gold-3); font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; } .ax-promo p{ font-size:13.5px; color:rgba(255,255,255,.7); margin:0 0 20px; line-height:1.6; } /* pagination */ .ax-pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:44px; flex-wrap:wrap; } .ax-pager a, .ax-pager span{ min-width:46px; height:46px; padding:0 14px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; text-decoration:none; border:1.5px solid var(--ax-line); background:#fff; color:var(--ax-ink); transition:.25s ease; } .ax-pager a:hover{ border-color:var(--ax-gold-2); color:var(--ax-gold-1); transform:translateY(-2px); } .ax-pager span.ax-current{ background:var(--ax-grad); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(199,159,63,.32); } /* ===================================================================== PRODUCT DETAIL ===================================================================== */ .ax-pd{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; } .ax-pd__main{ background:linear-gradient(180deg,#fbf7ec,#fff); border:1px solid var(--ax-line); border-radius:22px; padding:36px; display:flex; align-items:center; justify-content:center; min-height:440px; box-shadow:var(--ax-shadow); } .ax-pd__main img{ max-height:400px; max-width:88%; object-fit:contain; filter:drop-shadow(0 20px 30px rgba(120,85,15,.2)); } .ax-pd__thumbs{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; } .ax-pd__thumbs .ax-pic{ width:82px; height:82px; border-radius:12px; border:1px solid var(--ax-line); background:#fff; padding:8px; cursor:pointer; transition:.25s ease; } .ax-pd__thumbs .ax-pic:hover, .ax-pd__thumbs .ax-pic.ax-sel{ border-color:var(--ax-gold-2); transform:translateY(-3px); box-shadow:0 10px 22px rgba(199,159,63,.22); } .ax-pd__thumbs .ax-pic img{ width:100%; height:100%; object-fit:contain; } .ax-pd__title{ font-size:clamp(24px,3vw,34px); font-weight:900; color:var(--ax-ink); line-height:1.15; margin:0 0 14px; } .ax-pd__price{ font-size:34px; font-weight:900; color:var(--ax-gold-1); margin:0 0 20px; line-height:1; } .ax-pd__price small{ font-size:15px; color:var(--ax-muted); font-weight:600; margin-left:8px; } .ax-pd__meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; } .ax-pd__pill{ background:rgba(199,159,63,.12); border:1px solid rgba(199,159,63,.3); color:var(--ax-gold-1); font-weight:700; font-size:13.5px; padding:9px 15px; border-radius:10px; } .ax-pd__pill b{ color:var(--ax-ink); } .ax-pd__variants{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:6px 0 24px; } .ax-pd__variants .ax-vlabel{ font-size:12px; font-weight:800; color:var(--ax-muted); letter-spacing:1px; text-transform:uppercase; width:100%; margin-bottom:2px; } .ax-pd__variants a{ margin:0; padding:11px 18px; border-radius:11px; font-size:14px; font-weight:800; color:#fff; text-decoration:none; background:var(--ax-grad); box-shadow:0 8px 18px rgba(199,159,63,.28); transition:transform .25s ease; } .ax-pd__variants a:hover{ transform:translateY(-3px); color:#fff; } .ax-pd__desc{ color:var(--ax-muted); line-height:1.8; font-size:15px; margin-bottom:26px; } .ax-pd__cta{ display:flex; gap:14px; flex-wrap:wrap; } @media(max-width:900px){ .ax-pd{ grid-template-columns:1fr; gap:28px; } .ax-pd__main{ min-height:320px; } } /* spec tabs */ .ax-tabs{ display:flex; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--ax-line); margin-bottom:32px; } .ax-tab{ appearance:none; border:none; background:transparent; cursor:pointer; font-family:inherit; padding:14px 22px; font-size:15px; font-weight:800; color:var(--ax-muted); position:relative; transition:color .3s ease; } .ax-tab::after{ content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:3px; background:var(--ax-grad); transform:scaleX(0); transition:transform .35s var(--ax-ease); } .ax-tab.ax-on{ color:var(--ax-ink); } .ax-tab.ax-on::after{ transform:scaleX(1); } .ax-tabpane{ display:none; } .ax-tabpane.ax-on{ display:block; animation:ax-fade .45s var(--ax-ease); } @keyframes ax-fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} } .ax-speclist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; } .ax-speclist li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.65; color:#3a3f47; padding:12px 16px; background:#fff; border:1px solid var(--ax-line); border-radius:12px; } .ax-speclist li::before{ content:"\f058"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free",sans-serif; font-weight:900; color:var(--ax-gold-2); flex:0 0 auto; } @media(max-width:768px){ .ax-speclist{ grid-template-columns:1fr; } } /* ===================================================================== TESTIMONIALS ===================================================================== */ .ax-testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; } .ax-testi{ position:relative; background:#fff; border:1px solid var(--ax-line); border-radius:22px; padding:38px 30px 30px; box-shadow:0 10px 30px rgba(0,0,0,.05); display:flex; flex-direction:column; transition:transform .5s var(--ax-ease), box-shadow .5s var(--ax-ease); } .ax-testi:hover{ transform:translateY(-10px); box-shadow:var(--ax-shadow); } .ax-testi__quote{ position:absolute; top:22px; right:26px; font-size:38px; color:rgba(199,159,63,.16); line-height:1; } .ax-testi__stars{ color:var(--ax-gold-3); font-size:13px; letter-spacing:3px; margin-bottom:14px; } .ax-testi p{ font-size:15px; line-height:1.8; color:var(--ax-muted); margin:0 0 24px; font-style:italic; } .ax-testi__who{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:20px; border-top:1px solid var(--ax-line); } .ax-testi__who img{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--ax-gold-2); padding:2px; background:#fff; } .ax-testi__who .ax-avatar-fallback{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ax-grad); color:#fff; font-weight:900; font-size:20px; flex:0 0 56px; } .ax-testi__who b{ display:block; font-size:15px; font-weight:800; color:var(--ax-ink); } .ax-testi__who span{ font-size:12.5px; color:var(--ax-muted); font-weight:600; } @media(max-width:1024px){ .ax-testi-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:640px){ .ax-testi-grid{ grid-template-columns:1fr; } } /* ===================================================================== MISSION / GOALS (dark band) ===================================================================== */ .ax-mvv{ position:relative; color:#fff; overflow:hidden; background:#111; } .ax-mvv__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.25; } .ax-mvv::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,12,12,.85),rgba(12,12,12,.94)); } .ax-mvv .ax-wrap{ position:relative; z-index:1; } .ax-mvv .ax-title{ color:#fff; } .ax-mvv .ax-lead{ color:rgba(255,255,255,.72); } .ax-mvv .ax-eyebrow{ color:var(--ax-gold-3); } .ax-mvv__splash{ position:absolute; top:-30px; right:-40px; width:min(560px,48%); opacity:.4; pointer-events:none; z-index:0; transform:scaleX(-1); filter:drop-shadow(0 20px 40px rgba(199,159,63,.4)); animation:ax-splash-float 9s ease-in-out infinite; } .ax-mvv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; } .ax-mvv-card{ position:relative; padding:38px 30px; border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); transition:transform .5s var(--ax-ease), border-color .5s ease, background .5s ease; } .ax-mvv-card:hover{ transform:translateY(-10px); border-color:rgba(199,159,63,.55); background:linear-gradient(180deg,rgba(199,159,63,.14),rgba(255,255,255,.03)); } .ax-mvv-card .ax-mvv__ic{ width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; background:var(--ax-grad); margin-bottom:22px; box-shadow:0 12px 26px rgba(199,159,63,.35); } .ax-mvv-card .ax-mvv__ic img{ width:32px; height:32px; object-fit:contain; filter:brightness(0) invert(1); } .ax-mvv-card h3{ font-size:21px; font-weight:900; margin:0 0 12px; color:#fff; } .ax-mvv-card p{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.72); margin:0; } /* ===================================================================== CTA SPLASH BAND ===================================================================== */ .ax-cta{ position:relative; padding:84px 0; overflow:hidden; background:var(--ax-grad); text-align:center; z-index:1; } .ax-cta::before, .ax-cta::after{ content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); } .ax-cta::before{ width:280px; height:280px; top:-120px; left:-60px; } .ax-cta::after{ width:220px; height:220px; bottom:-110px; right:-40px; } .ax-cta .ax-wrap{ position:relative; z-index:1; } .ax-cta h2{ font-size:clamp(28px,4vw,46px); font-weight:900; color:#111; margin:0 0 14px; letter-spacing:-.5px; } .ax-cta p{ color:rgba(0,0,0,.7); font-size:17px; font-weight:600; margin:0 0 30px; } .ax-cta__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .ax-cta .ax-btn-ghost{ border-color:rgba(0,0,0,.4); color:#111; } .ax-cta .ax-btn-ghost:hover{ color:#111; background:rgba(255,255,255,.35); border-color:#111; } /* ===================================================================== MAP + CONTACT ===================================================================== */ .ax-contact{ background:var(--ax-cream); } .ax-contact__grid{ display:grid; grid-template-columns:400px 1fr; gap:26px; align-items:stretch; margin-top:44px; } .ax-info-card{ background:#fff; border-radius:22px; padding:12px; border:1px solid var(--ax-line); box-shadow:0 14px 40px rgba(0,0,0,.08); display:flex; flex-direction:column; overflow:hidden; } .ax-info-row{ display:flex; gap:16px; align-items:flex-start; padding:22px 18px; } .ax-info-row + .ax-info-row{ border-top:1px solid var(--ax-line); } .ax-info-row .ax-ic{ flex:0 0 46px; width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--ax-grad); font-size:18px; box-shadow:0 10px 22px rgba(199,159,63,.32); } .ax-info-row h6{ margin:0 0 6px; font-size:11px; font-weight:900; letter-spacing:1px; color:var(--ax-muted); text-transform:uppercase; } .ax-info-row p, .ax-info-row a{ margin:0; font-size:14px; font-weight:600; color:var(--ax-ink); line-height:1.5; text-decoration:none; } .ax-info-row a:hover{ color:var(--ax-gold-1); } .ax-map-frame{ border-radius:22px; overflow:hidden; border:1px solid var(--ax-line); box-shadow:0 14px 40px rgba(0,0,0,.08); min-height:420px; } .ax-map-frame iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; } /* ===================================================================== CART ===================================================================== */ .ax-cart-grid{ display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start; } .ax-cart-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--ax-line); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.05); } .ax-cart-table th{ background:var(--ax-ink); color:#fff; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:18px 20px; text-align:left; } .ax-cart-table td{ padding:20px; border-top:1px solid var(--ax-line); vertical-align:middle; font-size:14.5px; color:var(--ax-text); } .ax-cart-table tr:first-child td{ border-top:none; } .ax-cart-item{ display:flex; align-items:center; gap:16px; } .ax-cart-item img{ width:78px; height:78px; object-fit:contain; background:#fbf7ec; border-radius:12px; padding:8px; border:1px solid var(--ax-line); } .ax-cart-item b{ display:block; font-size:14.5px; font-weight:800; color:var(--ax-ink); line-height:1.4; } .ax-cart-item span{ font-size:12.5px; color:var(--ax-muted); } .ax-qty{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--ax-line); border-radius:11px; overflow:hidden; } .ax-qty a{ width:38px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--ax-ink); text-decoration:none; font-weight:800; background:#fff; transition:.2s ease; } .ax-qty a:hover{ background:var(--ax-grad); color:#fff; } .ax-qty span{ min-width:44px; text-align:center; font-weight:800; } .ax-cart-summary{ background:#fff; border:1px solid var(--ax-line); border-radius:20px; padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.05); position:sticky; top:calc(var(--ax-nav-h) + 20px); } .ax-cart-summary h3{ font-size:19px; font-weight:900; color:var(--ax-ink); margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--ax-line); } .ax-cart-summary .ax-line{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; font-size:14.5px; color:var(--ax-muted); font-weight:600; } .ax-cart-summary .ax-line b{ color:var(--ax-ink); font-weight:800; } .ax-cart-summary .ax-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:18px 0 22px; margin-top:8px; border-top:2px solid var(--ax-line); } .ax-cart-summary .ax-total span{ font-size:15px; font-weight:800; color:var(--ax-ink); } .ax-cart-summary .ax-total b{ font-size:28px; font-weight:900; color:var(--ax-gold-1); } .ax-cart-summary .ax-btn{ width:100%; } @media(max-width:1024px){ .ax-cart-grid{ grid-template-columns:1fr; } .ax-cart-summary{ position:static; } } @media(max-width:640px){ .ax-cart-table thead{ display:none; } .ax-cart-table, .ax-cart-table tbody, .ax-cart-table tr, .ax-cart-table td{ display:block; width:100%; } .ax-cart-table tr{ border-top:1px solid var(--ax-line); padding:8px 0; } .ax-cart-table td{ border:none; padding:10px 18px; } } /* ===================================================================== FOOTER ===================================================================== */ .ax-footer{ position:relative; background:var(--ax-ink); color:rgba(255,255,255,.7); overflow:hidden; z-index:1; } .ax-footer::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--ax-grad); } .ax-footer__glow{ position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(199,159,63,.22), transparent 65%); pointer-events:none; } .ax-footer__top{ position:relative; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding:74px 0 54px; } .ax-footer__logo{ height:52px; width:auto; margin-bottom:20px; display:block; } .ax-footer__about p{ font-size:14px; line-height:1.8; color:rgba(255,255,255,.62); margin:0 0 24px; } .ax-footer h4{ font-size:16px; font-weight:800; color:#fff; margin:0 0 22px; position:relative; padding-bottom:12px; } .ax-footer h4::after{ content:""; position:absolute; left:0; bottom:0; width:40px; height:3px; border-radius:3px; background:var(--ax-grad); } .ax-footer ul{ list-style:none; margin:0; padding:0; } .ax-footer ul li{ margin:0 0 12px; } .ax-footer__links a{ color:rgba(255,255,255,.66); text-decoration:none; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:9px; transition:.25s ease; } .ax-footer__links a::before{ content:"\f105"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free",sans-serif; font-weight:900; color:var(--ax-gold-2); font-size:12px; } .ax-footer__links a:hover{ color:var(--ax-gold-3); transform:translateX(4px); } .ax-footer__contact li{ display:flex; gap:13px; align-items:flex-start; font-size:14px; line-height:1.6; color:rgba(255,255,255,.66); } .ax-footer__contact li i{ color:var(--ax-gold-3); margin-top:4px; flex:0 0 16px; } .ax-footer__contact a{ color:rgba(255,255,255,.66); text-decoration:none; } .ax-footer__contact a:hover{ color:var(--ax-gold-3); } .ax-social{ display:flex; gap:12px; flex-wrap:wrap; } .ax-social a{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:16px; text-decoration:none; transition:.3s var(--ax-ease); } .ax-social a:hover{ background:var(--ax-grad); border-color:transparent; transform:translateY(-4px); color:#fff; } .ax-footer__bottom{ position:relative; border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } .ax-footer__bottom p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.55); } .ax-footer__bottom ul{ display:flex; gap:26px; flex-wrap:wrap; } .ax-footer__bottom ul li{ margin:0; } .ax-footer__bottom a{ color:rgba(255,255,255,.6); font-size:13.5px; font-weight:600; text-decoration:none; } .ax-footer__bottom a:hover{ color:var(--ax-gold-3); } @media(max-width:1024px){ .ax-footer__top{ grid-template-columns:1fr 1fr; gap:36px; } } @media(max-width:640px){ .ax-footer__top{ grid-template-columns:1fr; padding:54px 0 38px; } .ax-footer__bottom{ flex-direction:column; text-align:center; } .ax-footer__bottom ul{ justify-content:center; gap:18px; } } /* back to top */ .ax-top{ position:fixed; right:22px; bottom:88px; width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; z-index:800; background:var(--ax-grad); color:#fff; font-size:17px; text-decoration:none; box-shadow:0 14px 30px rgba(199,159,63,.4); opacity:0; visibility:hidden; transform:translateY(14px); transition:.4s var(--ax-ease); } .ax-top.ax-show{ opacity:1; visibility:visible; transform:translateY(0); } .ax-top:hover{ color:#fff; transform:translateY(-4px); } /* cookie banner */ .ax-cookie{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); width:min(92vw,780px); z-index:9999; background:linear-gradient(135deg,#1f1f1f 0%,#2a2a2a 100%); color:#fff; border-radius:22px; padding:22px 24px; overflow:hidden; border:1px solid rgba(199,159,63,.25); box-shadow:0 18px 45px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; } .ax-cookie::before{ content:""; position:absolute; left:0; top:0; width:100%; height:5px; background:var(--ax-grad); } .ax-cookie h4{ margin:0 0 6px; font-size:19px; font-weight:800; color:#fff; } .ax-cookie p{ margin:0; font-size:14px; line-height:1.65; color:rgba(255,255,255,.82); max-width:460px; } .ax-cookie__actions{ display:flex; gap:12px; flex-wrap:wrap; } @media(max-width:768px){ .ax-cookie{ width:calc(100vw - 24px); left:12px; right:12px; transform:none; flex-direction:column; align-items:stretch; } .ax-cookie p{ max-width:none; } .ax-cookie__actions .ax-btn{ flex:1; } } /* ===================================================================== SCROLL REVEAL PRIMITIVES ===================================================================== */ .ax-reveal{ opacity:0; transform:translateY(44px); transition:opacity .9s var(--ax-ease), transform .9s var(--ax-ease); will-change:opacity,transform; } .ax-reveal.ax-left{ transform:translateX(-56px); } .ax-reveal.ax-right{ transform:translateX(56px); } .ax-reveal.ax-zoom{ transform:scale(.9); } .ax-reveal.ax-in{ opacity:1; transform:translate(0,0) scale(1); } .ax-stagger > *{ transition-delay:calc(var(--ax-i,0) * 100ms); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:1024px){ .ax-feat-grid, .ax-serv-grid, .ax-prod-grid{ grid-template-columns:repeat(2,1fr); } .ax-count-grid{ grid-template-columns:repeat(2,1fr); gap:40px 20px; } .ax-hero__grid{ grid-template-columns:1fr; gap:50px; } .ax-hero__product{ order:-1; } .ax-hero__splash{ width:min(600px,92%); right:-8%; bottom:auto; top:52%; opacity:.35 !important; } .ax-mvv__splash{ width:min(420px,70%); opacity:.28; } .ax-mvv-grid{ grid-template-columns:1fr; } .ax-about__grid{ grid-template-columns:1fr; gap:70px; } .ax-contact__grid{ grid-template-columns:1fr; } } @media (max-width:640px){ .ax-section{ padding:64px 0; } .ax-hero{ padding:80px 0 60px; text-align:center; } .ax-hero__grid{ text-align:center; } .ax-hero__cta, .ax-hero__stats{ justify-content:center; } .ax-hero__badge{ margin-inline:auto; } .ax-feat-grid, .ax-serv-grid, .ax-prod-grid{ grid-template-columns:1fr; } .ax-about__media .ax-exp{ padding:12px 16px; } .ax-page-hero{ padding:64px 0 54px; } } /* reduced motion */ @media (prefers-reduced-motion:reduce){ .ax-oil-field, .ax-hero__glow{ display:none !important; } .ax-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .ax-hero__pcard, .ax-about__media .ax-globe, .ax-about__media .ax-globe img, .ax-marquee__track, .ax-hero__badge .ax-dot{ animation:none !important; } .ax-hero__splash{ animation:none !important; opacity:.85 !important; transform:none !important; } .ax-mvv__splash, .ax-page-hero__splash{ animation:none !important; } }