/* ========================================================= WOOTZ — shared stylesheet (dashcam brand) Colors + design tokens lifted from index (48).html ========================================================= */ /* ============ TOKENS ============ */ :root{ /* teal-tinted dark base (derived from brand hue) */ --steel-950:#04181B; --steel-900:#062124; --steel-850:#072529; --steel-800:#0A2E33; --steel-750:#0E3940; --steel-700:#13454C; --steel-500:#4E7E80; --steel-400:#79A1A2; /* brand — EXACT logo color #01484E + readable sibling for dark */ --brand:#01484E; --accent:#2E9499; /* hue-matched lighter teal for accents on dark */ --accent-press:#0E6066; --accent-soft:rgba(46,148,153,.14); /* premium — remapped to teal accent (matches theme) */ --premium:#2E9499; --premium-bright:#4EB4B9; --premium-press:#0E6066; --premium-soft:rgba(46,148,153,.16); --premium-line:rgba(46,148,153,.40); --premium-grad:linear-gradient(135deg,#4EB4B9 0%,#2E9499 45%,#0E6066 100%); /* rec / alert (recording-light signal) */ --rec:#FF5A4D; /* semantic — dark default */ --bg:var(--steel-950); --bg-2:var(--steel-900); --surface:var(--steel-850); --surface-2:var(--steel-800); --line:rgba(140,210,212,.10); --line-strong:rgba(140,210,212,.18); --text:#E6F1F1; --text-2:#9DBDBE; --text-3:#5F8385; --shadow:0 24px 60px -28px rgba(0,0,0,.7); --maxw:1180px; --r:14px; --r-sm:10px; --ease:cubic-bezier(.22,1,.36,1); --ff-ar:"IBM Plex Sans Arabic",system-ui,sans-serif; --ff-mono:"IBM Plex Mono",ui-monospace,monospace; } [data-theme="light"]{ --brand:#01484E; --accent:#01484E; /* exact logo color — perfect on white */ --accent-press:#063A3F; --accent-soft:rgba(1,72,78,.10); /* premium — remapped to teal accent (matches theme) */ --premium:#01484E; --premium-bright:#2E9499; --premium-press:#063A3F; --premium-soft:rgba(1,72,78,.12); --premium-line:rgba(1,72,78,.30); --premium-grad:linear-gradient(135deg,#2E9499 0%,#01484E 50%,#063A3F 100%); --bg:#EDF2F2; --bg-2:#E3ECEC; --surface:#FFFFFF; --surface-2:#F3F8F8; --line:rgba(1,72,78,.12); --line-strong:rgba(1,72,78,.20); --text:#0A2426; --text-2:#436261; --text-3:#82A0A0; --shadow:0 24px 50px -30px rgba(1,72,78,.30); } /* ============ RESET ============ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--ff-ar); background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .4s var(--ease),color .4s var(--ease); } a{color:inherit;text-decoration:none} ul{list-style:none} img{max-width:100%;display:block} ::selection{background:var(--brand);color:#fff} .mono{font-family:var(--ff-mono);font-feature-settings:"tnum";} .wrap{width:100%;margin-inline:auto;padding-inline:12px} @media (min-width:576px){.wrap{max-width:540px}} @media (min-width:768px){.wrap{max-width:720px}} @media (min-width:992px){.wrap{max-width:960px}} @media (min-width:1200px){.wrap{max-width:1140px}} @media (min-width:1400px){.wrap{max-width:1320px}} /* ============ HEADER ============ */ header{ position:fixed;inset-block-start:0;inset-inline:0;z-index:60; transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s; border-block-end:1px solid transparent; } header.scrolled{ background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(16px) saturate(1.3); border-block-end-color:var(--line); } .nav{display:flex;align-items:center;gap:28px;height:68px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px} .brand img{display:block;height:30px;width:auto} .brand img.l-light{display:none} [data-theme="light"] .brand img.l-light{display:block} [data-theme="light"] .brand img.l-dark{display:none} .foot-brand .brand{margin-block-end:14px} .foot-brand .brand img{height:46px} @media (max-width:860px){.brand img{height:27px}.foot-brand .brand img{height:40px}} .nav-links{display:flex;gap:26px;margin-inline-start:auto;font-size:14.5px;color:var(--text-2)} .nav-links a{position:relative;transition:color .25s} .nav-links a::after{content:"";position:absolute;inset-block-end:-6px;inset-inline-start:0;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-tools{display:flex;align-items:center;gap:12px} .icon-btn{ width:38px;height:38px;border-radius:10px;border:1px solid var(--line); background:var(--surface);color:var(--text);display:grid;place-items:center; cursor:pointer;transition:.25s var(--ease); } .icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .btn{ font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer; padding:11px 20px;border-radius:11px;border:1px solid transparent; transition:.25s var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:8px; } .btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px -12px var(--brand)} .btn-primary:hover{background:#0A6066;transform:translateY(-2px);box-shadow:0 16px 30px -12px var(--brand)} .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .burger{display:none} /* ============ HERO ============ */ .hero{position:relative;display:flex;align-items:center;padding-block:180px 120px;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg .grid{ position:absolute;inset:0;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 35%,#000 25%,transparent 75%); mask-image:radial-gradient(ellipse 80% 70% at 70% 35%,#000 25%,transparent 75%); } .hero-bg .glow{ position:absolute;inset-block-start:-10%;inset-inline-end:-5%;width:60vw;height:60vw;max-width:760px;max-height:760px; background:radial-gradient(circle,var(--accent-soft),transparent 62%);filter:blur(10px); } .hero-bg .scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.04) 3px 4px);opacity:.6;pointer-events:none} /* viewfinder corner brackets */ .viewfinder{position:absolute;inset-block:96px 40px;inset-inline:12px;z-index:1;pointer-events:none} .viewfinder span{position:absolute;width:34px;height:34px;border:2px solid var(--accent);opacity:.55} .viewfinder .tl{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0;border-start-start-radius:6px} .viewfinder .tr{inset-block-start:0;inset-inline-end:0;border-inline-start:0;border-block-end:0;border-start-end-radius:6px} .viewfinder .bl{inset-block-end:0;inset-inline-start:0;border-inline-end:0;border-block-start:0;border-end-start-radius:6px} .viewfinder .br{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0;border-end-end-radius:6px} /* HUD overlay (rec + timestamp) */ .hud{position:absolute;inset-block-start:104px;inset-inline:12px;box-sizing:border-box;padding-inline:18px;z-index:2;display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:13px;color:var(--text-2);pointer-events:none} @media (min-width:576px){.viewfinder,.hud{inset-inline:0;left:0;right:0;margin-inline:auto;max-width:516px}} @media (min-width:768px){.viewfinder,.hud{max-width:696px}} @media (min-width:992px){.viewfinder,.hud{max-width:936px}} @media (min-width:1200px){.viewfinder,.hud{max-width:1116px}} @media (min-width:1400px){.viewfinder,.hud{max-width:1296px}} .rec{display:flex;align-items:center;gap:8px;letter-spacing:1px} .rec .dot{width:11px;height:11px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1.4s steps(1) infinite} @keyframes blink{50%{opacity:.15}} .hero-inner{position:relative;z-index:3;width:100%} .eyebrow{ display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-ar);font-size:13.5px;font-weight:600; color:var(--accent);padding:7px 16px;border:1px solid var(--line-strong); border-radius:100px;background:var(--accent-soft);margin-block-end:26px; } .eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)} h1.hero-title{ font-size:clamp(2.5rem,6.4vw,5rem);font-weight:700;line-height:1.08;letter-spacing:-.5px; max-width:16ch; } h1.hero-title .truth{color:var(--accent);position:relative;display:inline-block} h1.hero-title .truth::after{ content:"";position:absolute;inset-block-end:.08em;inset-inline:0;height:.12em; background:var(--accent);opacity:.28;border-radius:2px; } .hero-sub{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--text-2);max-width:46ch;margin-block:24px 0;font-weight:400} .hero-sub strong{color:var(--text);font-weight:600} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero-meta{display:flex;flex-wrap:wrap;gap:28px;margin-block-start:52px;padding-block-start:30px;border-block-start:1px solid var(--line)} .hero-meta .item{display:flex;flex-direction:column;gap:2px} .hero-meta .k{font-family:var(--ff-mono);font-size:1.8rem;font-weight:600;color:var(--text)} .hero-meta .k.ar{font-family:var(--ff-ar);font-weight:700} .hero-meta .v{font-size:13px;color:var(--text-3)} /* reveal utility */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} [data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s} [data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s} [data-d="5"]{transition-delay:.4s}[data-d="6"]{transition-delay:.48s} @media (max-width:860px){ .nav-links{display:none} .burger{display:grid} .nav-tools>.btn-primary{display:none} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} } /* ============ SECTION SHELL ============ */ .section{padding-block:96px;position:relative} #dashcam-types{padding-block-start:40px} .section-head{max-width:640px;margin-block-end:54px} .tag{font-family:var(--ff-ar);font-size:14px;font-weight:600;color:var(--accent);display:inline-block;margin-block-end:14px} .section-head h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;line-height:1.12;letter-spacing:-.4px} .section-head p{color:var(--text-2);margin-block-start:16px;font-size:1.08rem} .bg-alt{background:var(--bg-2)} .divider-top{border-block-start:1px solid var(--line)} /* ============ DIFFERENCE ============ */ .diff-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center} .gap-card{ border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:30px; box-shadow:var(--shadow);position:relative;overflow:hidden; } .gap-card::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),transparent)} .gap-card h3{font-size:1.15rem;margin-block-end:8px} .gap-card p{color:var(--text-2);font-size:.97rem} .gap-fear{margin-block-end:22px;padding-inline-start:16px;border-inline-start:3px solid var(--rec)} .gap-fear h3{color:var(--text)} .includes{display:flex;flex-direction:column;gap:14px} .inc{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:.3s var(--ease)} .inc:hover{border-color:var(--accent);transform:translateX(-6px)} .inc .ck{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center} .inc .ck svg{width:20px;height:20px} .inc h4{font-size:1.02rem;margin-block-end:3px} .inc p{color:var(--text-3);font-size:.9rem;line-height:1.5} .inc .plus{font-family:var(--ff-mono);color:var(--accent);font-size:14px;margin-inline-start:auto;align-self:center;opacity:.6} /* ============ WHY / BENEFITS ============ */ .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .bcard{ border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:30px 26px; transition:.35s var(--ease);position:relative;overflow:hidden; } .bcard:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)} .bcard .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-block-end:20px} .bcard .ic svg{width:24px;height:24px} .bcard h3{font-size:1.18rem;margin-block-end:10px} .bcard p{color:var(--text-2);font-size:.97rem} .bcard .num{position:absolute;inset-block-start:18px;inset-inline-end:22px;font-family:var(--ff-mono);font-size:13px;color:var(--text-3);opacity:.7} /* ============ SPEC STRIP ============ */ .spec-strip{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:34px;display:grid;grid-template-columns:1.4fr 2.6fr;gap:40px;align-items:center} .spec-strip .lead h3{font-size:1.4rem;line-height:1.25} .spec-strip .lead p{color:var(--text-2);margin-block-start:10px;font-size:.95rem} .spec-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .spec{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)} .spec .badge{font-family:var(--ff-mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:3px 8px;letter-spacing:.5px;flex:0 0 auto} .spec span.lbl{font-size:.96rem;color:var(--text)} .spec small{display:block;color:var(--text-3);font-size:.82rem} @media (max-width:920px){ .diff-grid{grid-template-columns:1fr;gap:36px} .cards-3{grid-template-columns:1fr} .spec-strip{grid-template-columns:1fr;gap:26px;padding:26px} .spec-list{grid-template-columns:1fr} } /* ============ PRODUCTS / UMBRELLA ============ */ .umbrella-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-block-end:46px} .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .prod{ border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:26px 22px; position:relative;overflow:hidden;transition:.35s var(--ease);min-height:200px;display:flex;flex-direction:column; } .prod:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow)} .prod .en{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:1.5px;color:var(--accent);margin-block-end:auto;opacity:.85} .prod .pic{width:52px;height:52px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--text);margin-block-end:18px;transition:.35s var(--ease)} .prod:hover .pic{background:var(--accent-soft);color:var(--accent);border-color:transparent} .prod .pic svg{width:26px;height:26px} .prod h3{font-size:1.12rem;margin-block-start:14px} .prod p{color:var(--text-3);font-size:.88rem;margin-block-start:5px} .prod.more{background:linear-gradient(150deg,var(--surface-2),var(--surface));border-style:dashed} .prod.more h3{color:var(--accent)} .umbrella-note{ margin-block-start:24px;padding:22px 26px;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);display:flex;gap:16px;align-items:center;color:var(--text-2);font-size:.98rem; } .umbrella-note svg{flex:0 0 auto;color:var(--accent)} /* ============ TRUST BAND ============ */ .trust{background:var(--bg-2)} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .tcell{background:var(--bg-2);padding:34px 26px;text-align:center;transition:background .3s} .tcell:hover{background:var(--surface)} .tcell .ic{width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 16px} .tcell .ic svg{width:23px;height:23px} .tcell h4{font-size:1.05rem;margin-block-end:6px} .tcell p{color:var(--text-3);font-size:.88rem} /* ============ POSITIONING QUOTE ============ */ .quote{padding-block:110px;text-align:center;position:relative;overflow:hidden} .quote .qmark{font-family:var(--ff-mono);color:var(--accent);font-size:13px;letter-spacing:2px;margin-block-end:22px} .quote blockquote{font-size:clamp(1.7rem,4vw,2.8rem);font-weight:700;line-height:1.3;max-width:18ch;margin-inline:auto;letter-spacing:-.4px} .quote blockquote .hl{color:var(--accent)} .quote .by{margin-block-start:26px;font-family:var(--ff-ar);font-weight:600;font-size:1.05rem;color:var(--text-2)} @media (max-width:920px){ .prod-grid{grid-template-columns:repeat(2,1fr)} .trust-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .prod-grid{grid-template-columns:1fr} .trust-grid{grid-template-columns:1fr} } /* ============ OFFERS ============ */ .offers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .offer{ border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:26px 22px; position:relative;transition:.35s var(--ease); } .offer:hover{transform:translateY(-5px);border-color:var(--accent)} .offer .rib{position:absolute;inset-block-start:18px;inset-inline-end:20px;font-family:var(--ff-mono);font-size:11px;letter-spacing:1px;color:var(--accent);border:1px solid var(--accent);padding:3px 8px;border-radius:6px} .offer .ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-block-end:18px} .offer .ic svg{width:23px;height:23px} .offer h3{font-size:1.08rem;margin-block-end:8px} .offer p{color:var(--text-3);font-size:.9rem} /* ============ CTA / CONTACT ============ */ .cta-band{position:relative;overflow:hidden;border-block-start:1px solid var(--line)} .cta-card{ background:linear-gradient(150deg,var(--surface),var(--surface-2)); border:1px solid var(--line-strong);border-radius:22px;padding:64px 50px;text-align:center; position:relative;overflow:hidden;box-shadow:var(--shadow); } .cta-card::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-10%;width:480px;height:480px;background:radial-gradient(circle,var(--accent-soft),transparent 60%)} .cta-card .inner{position:relative;z-index:2} .cta-card .tag{margin-block-end:18px} .cta-card h2{font-size:clamp(1.9rem,4.5vw,3.1rem);font-weight:700;line-height:1.15;max-width:20ch;margin-inline:auto} .cta-card p{color:var(--text-2);margin-block:18px 30px;font-size:1.08rem;max-width:48ch;margin-inline:auto} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .btn-lg{padding:15px 30px;font-size:1rem;border-radius:13px} .cta-channels{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-block-start:40px;padding-block-start:30px;border-block-start:1px solid var(--line);font-family:var(--ff-mono);font-size:12.5px;color:var(--text-3);letter-spacing:.5px} .cta-channels span,.cta-channels a{display:flex;align-items:center;gap:7px} .cta-channels a{color:inherit;transition:color .2s} .cta-channels a:hover{color:var(--accent)} .cta-channels span b,.cta-channels a b{width:6px;height:6px;border-radius:50%;background:var(--accent)} /* ============ FOOTER ============ */ footer{padding-block:52px 30px;border-block-start:1px solid var(--line);background:var(--bg-2)} .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;margin-block-end:34px} .foot-brand{max-width:300px} .foot-brand .brand{margin-block-end:14px} .foot-brand p{color:var(--text-3);font-size:.92rem} .foot-cols{display:flex;gap:60px;flex-wrap:wrap} .fcol h5{font-size:13px;font-family:var(--ff-mono);letter-spacing:1px;color:var(--text-3);margin-block-end:14px} .fcol a{display:block;color:var(--text-2);font-size:.95rem;margin-block-end:9px;transition:color .2s} .fcol a:hover{color:var(--accent)} .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block-start:22px;border-block-start:1px solid var(--line);color:var(--text-3);font-size:.85rem} .foot-bottom .mono{font-size:12px;letter-spacing:.5px} @media (max-width:920px){ .offers-grid{grid-template-columns:repeat(2,1fr)} .cta-card{padding:48px 26px} } @media (max-width:560px){.offers-grid{grid-template-columns:1fr}} /* mobile menu */ .mobile-menu{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(14px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:.35s var(--ease)} .mobile-menu.open{opacity:1;visibility:visible} .mobile-menu a{font-size:1.5rem;font-weight:600;padding:10px} .mobile-menu .close{position:absolute;inset-block-start:22px;inset-inline-end:24px} /* ========================================================= SUBPAGE STYLES (multi-page WOOTZ site) ========================================================= */ /* page hero / banner for inner pages */ .page-hero{position:relative;overflow:hidden;padding-block:150px 70px;border-block-end:1px solid var(--line)} .page-hero .hero-bg{z-index:0} .page-hero .wrap{position:relative;z-index:2} .crumbs{display:flex;gap:8px;align-items:center;font-family:var(--ff-ar);font-size:12px;color:var(--text-3);letter-spacing:.4px;margin-block-end:18px} .crumbs a{transition:color .2s} .crumbs a:hover{color:var(--accent)} .crumbs .sep{opacity:.5} .page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700;line-height:1.1;letter-spacing:-.5px;max-width:18ch} .page-hero p{color:var(--text-2);margin-block-start:16px;font-size:1.08rem;max-width:54ch} /* media frame (video / poster) with HUD chrome */ .media-frame{position:relative;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow)} .media-frame video,.media-frame img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9} .media-frame .hud-tag{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:3;display:flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:5px 10px;border-radius:7px} .media-frame .hud-tag .dot{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 8px var(--rec);animation:blink 1.4s steps(1) infinite} .media-frame .hud-ts{position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:3;font-family:var(--ff-mono);font-size:12px;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:5px 10px;border-radius:7px} .media-frame .vf{position:absolute;inset:14px;z-index:2;pointer-events:none} .media-frame .vf span{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.7)} .media-frame .vf .tl{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0} .media-frame .vf .tr{inset-block-start:0;inset-inline-end:0;border-inline-start:0;border-block-end:0} .media-frame .vf .bl{inset-block-end:0;inset-inline-start:0;border-inline-end:0;border-block-start:0} .media-frame .vf .br{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0} /* product detail layout */ .pd-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start} .pd-info .en{font-family:var(--ff-mono);font-size:12px;letter-spacing:1.5px;color:var(--accent)} .pd-info h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;line-height:1.15;margin-block:10px 14px;letter-spacing:-.4px} .pd-info .price{display:flex;align-items:baseline;gap:12px;margin-block:18px} .pd-info .price .now{font-family:var(--ff-mono);font-size:2rem;font-weight:600;color:var(--text)} .pd-info .price .was{font-family:var(--ff-mono);text-decoration:line-through;color:var(--text-3);font-size:1.1rem} .pd-info .price .save{font-family:var(--ff-mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:3px 8px} .pd-info>p{color:var(--text-2);margin-block:6px 22px} .pd-feat{display:flex;flex-direction:column;gap:12px;margin-block:22px} .pd-feat li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);font-size:.96rem} .pd-feat li svg{flex:0 0 auto;color:var(--accent);margin-block-start:3px} .pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:26px} @media (max-width:860px){.pd-grid{grid-template-columns:1fr;gap:30px}} /* blog grid */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .bpost{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden;transition:.35s var(--ease);display:flex;flex-direction:column} .bpost:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)} .bpost .thumb{aspect-ratio:16/10;background:linear-gradient(150deg,var(--surface-2),var(--bg-2));position:relative;display:grid;place-items:center;color:var(--accent);border-block-end:1px solid var(--line)} .bpost .thumb svg{width:44px;height:44px;opacity:.7} .bpost .thumb img{width:100%;height:100%;object-fit:cover} .bpost .body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1} .bpost .cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:1px;color:var(--accent);margin-block-end:10px} .bpost h3{font-size:1.1rem;line-height:1.4;margin-block-end:10px} .bpost p{color:var(--text-3);font-size:.9rem;flex:1} .bpost .more{margin-block-start:16px;font-size:.9rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px} @media (max-width:920px){.blog-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.blog-grid{grid-template-columns:1fr}} /* article */ .article{max-width:760px;margin-inline:auto} .article .meta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--ff-mono);font-size:12px;color:var(--text-3);letter-spacing:.4px;margin-block-end:22px} .article h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700;line-height:1.18;letter-spacing:-.4px;margin-block-end:20px} .article h2{font-size:1.5rem;font-weight:700;margin-block:36px 14px} .article p{color:var(--text-2);margin-block-end:18px;font-size:1.05rem} .article ul.bullets{margin-block-end:18px;display:flex;flex-direction:column;gap:10px} .article ul.bullets li{position:relative;padding-inline-start:22px;color:var(--text-2)} .article ul.bullets li::before{content:"";position:absolute;inset-block-start:.7em;inset-inline-start:0;width:8px;height:8px;border-radius:50%;background:var(--accent)} .article blockquote{border-inline-start:3px solid var(--accent);padding-inline-start:18px;margin-block:24px;color:var(--text);font-size:1.2rem;font-weight:600} /* generic grids */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} @media (max-width:760px){.grid-2{grid-template-columns:1fr}} /* 404 */ .nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden;padding:120px 16px} .nf .code{font-family:var(--ff-mono);font-size:clamp(5rem,18vw,11rem);font-weight:600;line-height:1;color:var(--accent);letter-spacing:-.04em} .nf h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;margin-block:10px 14px} .nf p{color:var(--text-2);max-width:42ch;margin-block-end:28px} /* contact form */ .cform{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:640px;margin-inline:auto;text-align:start} .cform .full{grid-column:1/-1} .cform label{display:block;font-size:13px;color:var(--text-2);margin-block-end:7px} .cform input,.cform textarea{ width:100%;font-family:inherit;font-size:.95rem;color:var(--text); background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:.25s var(--ease); } .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)} .cform textarea{min-height:120px;resize:vertical} @media (max-width:560px){.cform{grid-template-columns:1fr}} /* ========================================================= HERO VIDEO BACKGROUND (slice 1) ========================================================= */ .hero{background:var(--bg) url("../img/hero-poster.svg") center/cover no-repeat} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none} /* smooth overlay concentrated on the text side (RTL = right/start), video stays visible on the other side + soft top/bottom fades */ .hero-overlay{position:absolute;inset:0;z-index:1; background: linear-gradient(to left, color-mix(in srgb,var(--bg) 86%,transparent) 0%, color-mix(in srgb,var(--bg) 64%,transparent) 36%, color-mix(in srgb,var(--bg) 18%,transparent) 68%, transparent 100%), linear-gradient(to top, var(--bg) 0%, color-mix(in srgb,var(--bg) 30%,transparent) 22%, transparent 40%), linear-gradient(to bottom, color-mix(in srgb,var(--bg) 55%,transparent) 0%, transparent 20%); } [data-theme="light"] .hero-overlay{ background: linear-gradient(to left, rgba(237,242,242,.88) 0%, rgba(237,242,242,.66) 36%, rgba(237,242,242,.2) 68%, transparent 100%), linear-gradient(to top, var(--bg) 0%, rgba(237,242,242,.3) 22%, transparent 40%), linear-gradient(to bottom, rgba(237,242,242,.55) 0%, transparent 20%); } /* re-stack layers above the video + overlay; keep dashcam grid subtle so the video reads as the external view */ .hero .hero-bg{z-index:2;opacity:.35} .hero .viewfinder{z-index:3} .hero .hud{z-index:4} .hero .hero-inner{z-index:5} /* scroll indicator */ .scroll-ind{position:absolute;inset-block-end:22px;inset-inline:0;margin-inline:auto;width:max-content;z-index:5; display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--text-2); font-family:var(--ff-mono);font-size:10.5px;letter-spacing:1.5px;transition:color .25s} .scroll-ind:hover{color:var(--accent)} .scroll-ind .mouse{width:24px;height:38px;border:2px solid var(--text-3);border-radius:13px;display:flex;justify-content:center;padding-block-start:6px;transition:border-color .25s} .scroll-ind:hover .mouse{border-color:var(--accent)} .scroll-ind .wheel{width:4px;height:8px;border-radius:2px;background:var(--accent);animation:scrollwheel 1.6s var(--ease) infinite} @keyframes scrollwheel{0%{opacity:0;transform:translateY(-5px)}40%{opacity:1}80%{opacity:0;transform:translateY(9px)}} /* CTA shine */ .hero-cta .btn-primary{position:relative;overflow:hidden} .hero-cta .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);transform:translateX(120%)} .hero-cta .btn-primary:hover::after{animation:shine .9s var(--ease)} @keyframes shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}} .btn .btn-ic{width:17px;height:17px;flex:0 0 auto} @media (prefers-reduced-motion:reduce){.scroll-ind .wheel{animation:none}} /* ========================================================= HEADER CATEGORIES DROPDOWN (slice 1) ========================================================= */ .nav-dd{position:relative;display:flex;align-items:center} .nav-dd-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:14.5px;color:var(--text-2);background:none;border:0;cursor:pointer;padding:0;transition:color .25s} .nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:var(--text)} .nav-dd-btn .chev{transition:transform .25s} .nav-dd.open .nav-dd-btn .chev{transform:rotate(180deg)} .nav-dd-menu{position:absolute;inset-block-start:calc(100% + 16px);inset-inline-end:0;min-width:240px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow); padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease);z-index:70} .nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:none} .nav-dd-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:14px;transition:.2s} .nav-dd-menu a:hover{background:var(--accent-soft);color:var(--accent)} .nav-dd-menu a .ic{width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent);flex:0 0 auto} .nav-dd-menu a .ic svg{width:18px;height:18px} .nav-dd-menu a b{font-weight:600;display:block} .nav-dd-menu a small{display:block;font-family:var(--ff-mono);font-size:10px;color:var(--text-3);letter-spacing:.5px;margin-block-start:1px} /* mobile categories block inside the mobile menu */ .mobile-menu .m-cats{display:flex;flex-direction:column;gap:4px;margin-block-start:10px;width:min(320px,86vw)} .mobile-menu .m-cats .m-cat-h{font-family:var(--ff-mono);font-size:11px;letter-spacing:1.5px;color:var(--text-3);padding:4px 10px} .mobile-menu .m-cats a{font-size:1.05rem;font-weight:500;color:var(--text-2);padding:8px 10px} .mobile-menu .m-cats a:hover{color:var(--accent)} /* ========================================================= OUR PRODUCTS section + tabs + product cards (slice 2) ========================================================= */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .op-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-block-end:26px} .op-select{font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;transition:.2s var(--ease)} .op-select:hover{border-color:var(--accent)} .op-select:focus{outline:none;border-color:var(--accent)} /* tabs */ .tabs{display:flex;gap:10px;flex-wrap:wrap;margin-block-end:30px} .tab{font-family:inherit;font-size:14px;font-weight:600;color:var(--text-2);background:var(--surface); border:1px solid var(--line);border-radius:100px;padding:9px 18px;cursor:pointer;transition:.22s var(--ease);white-space:nowrap} .tab:hover{border-color:var(--accent);color:var(--accent)} .tab.active{background:var(--brand);border-color:var(--brand);color:#fff} [data-theme="light"] .tab.active{color:#fff} /* product cards grid */ .prod-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media (max-width:1100px){.prod-cards{grid-template-columns:repeat(3,1fr)}} @media (max-width:820px){.prod-cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:460px){.prod-cards{grid-template-columns:1fr}} /* ===== premium "capture-frame" product card ===== */ .pcard{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); position:relative} .pcard::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .4s var(--ease)} .pcard:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:var(--shadow)} .pcard:hover::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)} .pcard.out{opacity:.82} .pcard-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-block-end:1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%), linear-gradient(150deg,var(--surface-2),var(--bg-2))} .pcard-media{position:absolute;inset:0;display:block} .pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s var(--ease)} .pcard:hover .pcard-media img{transform:scale(1.07)} .pcard.out .pcard-media img{filter:grayscale(.7) brightness(.75)} .pcard-scan{position:absolute;inset-inline:0;inset-block-start:-40%;height:40%;z-index:1;opacity:0;pointer-events:none; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 22%,transparent),transparent)} .pcard:hover .pcard-scan{animation:pscan 1.1s var(--ease) .05s} @keyframes pscan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}100%{opacity:0;transform:translateY(340%)}} .vf{position:absolute;width:20px;height:20px;z-index:3;border:2px solid color-mix(in srgb,var(--text) 55%,transparent); opacity:.4;transition:.4s var(--ease);pointer-events:none} .vf-tl{inset-block-start:12px;inset-inline-start:12px;border-inline-end:0;border-block-end:0} .vf-tr{inset-block-start:12px;inset-inline-end:12px;border-inline-start:0;border-block-end:0} .vf-bl{inset-block-end:12px;inset-inline-start:12px;border-inline-end:0;border-block-start:0} .vf-br{inset-block-end:12px;inset-inline-end:12px;border-inline-start:0;border-block-start:0} .pcard:hover .vf{opacity:1;border-color:var(--accent);width:26px;height:26px} .pcard-hud{position:absolute;inset-block-start:0;inset-inline:0;z-index:4;display:flex;align-items:center; justify-content:space-between;gap:8px;padding:19px 26px;font-family:var(--ff-mono);pointer-events:none} .pcard-hud .rec{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:1.5px;color:var(--text); background:rgba(0,0,0,.34);backdrop-filter:blur(4px);padding:4px 8px;border-radius:5px} .pcard-hud .rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);box-shadow:0 0 7px var(--rec);animation:blink 1.4s steps(1) infinite} .pcard-hud .hud-right{display:flex;align-items:center;gap:6px} .pcard-hud .hud-code{font-size:10.5px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,.34);backdrop-filter:blur(4px);padding:4px 8px;border-radius:5px} .pcard-hud .tag{font-size:10px;font-weight:600;letter-spacing:.4px;color:#fff;padding:4px 8px;border-radius:5px;line-height:1;white-space:nowrap;margin-block-end:0} .pcard-hud .tag.best{background:var(--brand)} .pcard-hud .tag.new{background:var(--accent)} .pcard-hud .tag.sale{background:var(--rec)} /* 52% used to be the share left over beside the wish/quick buttons in this corner; they now live in .pcard-actions, so the chips get the frame width less a matching inset on the far side. */ .pcard-tel{position:absolute;inset-block-end:16px;inset-inline-start:26px;z-index:3;display:flex;gap:5px;flex-wrap:wrap; max-width:calc(100% - 52px);font-family:var(--ff-mono);transition:.3s var(--ease)} .pcard-tel span{font-size:9.5px;letter-spacing:.3px;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.1);padding:3px 7px;border-radius:5px;white-space:nowrap} /* Quick view sits in the middle of the image. The overlay covers the whole frame so the button can centre over the media link; pointer-events are handed back to the button alone, or the overlay would swallow the click that opens the product page. */ .pcard-quick{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none} .pcard-quick .quickbtn{pointer-events:auto;width:46px;height:46px;border-radius:50%;padding:0; border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(8px); color:var(--text);display:grid;place-items:center;cursor:pointer; opacity:0;transform:scale(.86);transition:.26s var(--ease)} .pcard:hover .pcard-quick .quickbtn, .pcard:focus-within .pcard-quick .quickbtn{opacity:1;transform:none} .pcard-quick .quickbtn:hover{color:var(--accent);border-color:var(--accent)} .pcard-quick .quickbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .pcard-quick .quickbtn:focus-visible{opacity:1;transform:none;outline:2px solid var(--accent);outline-offset:2px} @media (hover:none){.pcard-quick .quickbtn{opacity:1;transform:none}} /* An out-of-stock card already centres its own "نفد المخزون" plate in the same spot, and two centred overlays would sit on top of each other. The frame is still a link to the product page. */ .pcard.out .pcard-quick{display:none} /* Wishlist heart, beside the cart button. Out of the frame it no longer fights the telemetry chips for the bottom corner on touch, where both were pinned permanently visible. */ .pcard-actions{display:flex;align-items:stretch;gap:8px;margin-block-start:12px} .pcard-actions .pcard-cart{margin-block-start:0;flex:1 1 auto;inline-size:auto;min-inline-size:0} /* ===== wishlist button — one treatment for the card and the product page ===== Borderless: a bordered, filled square next to the solid cart button read as two competing buttons of equal weight, when only one is the primary action. It keeps a surface fill though — an outline-only heart sitting directly on the card background was too easy to miss, and on the product page the button had no appearance rules at all, so it fell back to the browser's default grey chrome with a black filled heart. So: no border (simple), but a real background (clear). State is carried by colour + tint alone, instead of border + fill + colour all changing at once. Sizes are set per context below; everything else is shared. */ .pcard-actions .wish,.pdp-buy .wish{padding:0;border:0;border-radius:var(--r-sm); background:var(--surface-2);color:var(--text-3); display:grid;place-items:center;cursor:pointer; transition:color .2s var(--ease),background-color .2s var(--ease)} .pcard-actions .wish svg,.pdp-buy .wish svg{fill:none;stroke:currentColor;stroke-width:1.9; pointer-events:none;transition:fill .2s var(--ease)} .pcard-actions .wish:hover,.pdp-buy .wish:hover{color:var(--rec); background:color-mix(in srgb,var(--rec) 13%,var(--surface-2))} /* favourited: filled heart on a red-tinted surface */ .pcard-actions .wish.on,.pdp-buy .wish.on{color:var(--rec); background:color-mix(in srgb,var(--rec) 15%,var(--surface-2))} .pcard-actions .wish.on svg,.pdp-buy .wish.on svg{fill:var(--rec)} .pcard-actions .wish:focus-visible,.pdp-buy .wish:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pcard-actions .wish{flex:0 0 auto;inline-size:42px} .pcard-actions .wish svg{inline-size:20px;block-size:20px} .pcard-out{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none; background:color-mix(in srgb,var(--bg) 45%,transparent)} .pcard-out span{font-family:var(--ff-mono);font-size:11px;letter-spacing:1.5px;color:var(--text); border:1px solid var(--line-strong);background:rgba(0,0,0,.4);padding:7px 14px;border-radius:6px} .pcard-body{padding:16px 16px 16px;display:flex;flex-direction:column;flex:1;gap:8px} /* min-width:0 on both sides or a long category name refuses to shrink and pushes the stock badge past the card edge. The category is the one that gives — the stock state has to stay readable in full. */ .pcard-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} .pcard-cat{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.8px;color:var(--text-3);text-transform:uppercase; flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcard-stock{display:inline-flex;align-items:center;gap:5px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.3px;color:var(--text-3); flex:0 0 auto;white-space:nowrap} .pcard-stock i{width:6px;height:6px;border-radius:50%;background:#3FB27F;box-shadow:0 0 6px rgba(63,178,127,.7)} .pcard-stock.low{color:var(--accent)}.pcard-stock.low i{background:var(--accent);box-shadow:0 0 6px var(--accent)} .pcard-stock.off{color:var(--rec)}.pcard-stock.off i{background:var(--rec);box-shadow:none} .pcard-name{font-size:1.06rem;font-weight:700;line-height:1.4;min-height:2.8em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard-name a{transition:color .2s var(--ease)} .pcard-name a:hover{color:var(--accent)} .pcard-rate{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)} .pcard-rate b{font-family:var(--ff-mono);font-weight:600;color:var(--text-2)} .pcard-rate .rcount{font-family:var(--ff-mono)} .stars{display:inline-flex;gap:1px} .stars svg{width:13px;height:13px} .stars .st{stroke:#E0A93B;stroke-width:1.6;fill:none} .stars .st.on{fill:#E0A93B} /* price + struck-through compare + discount badge is three items on one line; below ~200px of card they don't fit, so let the badge drop to its own line instead of squeezing the price. */ .pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-block-start:auto;padding-block-start:4px} .pcard-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0} .pcard-price .now{font-family:var(--ff-mono);font-size:1.28rem;font-weight:600;color:var(--text);letter-spacing:-.3px} .pcard-price .was{font-family:var(--ff-mono);font-size:.82rem;text-decoration:line-through;color:var(--text-3)} .pcard-foot .off{font-family:var(--ff-mono);font-size:11px;font-weight:600;color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:5px;padding:3px 7px;background:var(--accent-soft)} .pcard-cart{margin-block-start:12px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:11px 14px;border-radius:var(--r-sm); border:1px solid var(--brand);background:var(--brand);color:#fff;transition:.24s var(--ease);position:relative;overflow:hidden} .pcard-cart svg{width:17px;height:17px;flex:0 0 auto} .pcard-cart::after{content:"";position:absolute;inset:0;transform:translateX(-120%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)} .pcard-cart:hover{background:#0A6066;border-color:#0A6066;box-shadow:0 12px 26px -14px var(--brand)} .pcard-cart:hover::after{animation:shine .8s var(--ease)} .pcard-cart:disabled{background:transparent;border-color:var(--line);color:var(--text-3);cursor:not-allowed} .pcard-cart:disabled:hover{box-shadow:none} .pcard-cart:disabled::after{display:none} @media (prefers-reduced-motion:reduce){ .pcard,.pcard-media img,.vf,.pcard-actions .wish,.pcard-quick .quickbtn{transition:none} .pcard-scan,.pcard-cart::after{animation:none;display:none} .pcard:hover{transform:none} } /* ===================== SKELETON LOADING ===================== موجة ضوء واحدة تمرّ عبر البطاقة كلها (لا كل عنصر على حدة)، مع تأخير متدرّج بين البطاقات (--i) ليبدو التحميل حيًّا لا آليًا. */ .pcard.skel{pointer-events:none;user-select:none; animation:skBreathe 2.6s var(--ease) infinite; animation-delay:calc(var(--i,0) * .12s)} .pcard.skel::before{box-shadow:none} .pcard.skel:hover{transform:none;box-shadow:none;border-color:var(--line)} /* الكتل الرمادية — أساس ثابت، اللمعان يأتي من طبقة الموجة */ .skel .sk{position:relative;overflow:hidden;border-radius:7px; background:color-mix(in srgb,var(--text) 7%,var(--surface-2))} .skel .sk::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg, transparent 20%, color-mix(in srgb,var(--text) 5%,transparent) 40%, color-mix(in srgb,var(--accent) 12%,transparent) 50%, color-mix(in srgb,var(--text) 5%,transparent) 60%, transparent 80%); background-size:220% 100%; animation:sk 1.8s cubic-bezier(.45,0,.25,1) infinite; animation-delay:calc(var(--i,0) * .12s)} .skel .pcard-frame{background:var(--surface-2);border-block-end-color:var(--line)} .skel .sk-media{position:absolute;inset:0;border-radius:0} /* شبح الواجهة داخل الإطار: شارة REC + كود التصنيف */ .skel .sk-hud{position:absolute;inset-block-start:19px;inset-inline:26px;z-index:2; display:flex;justify-content:space-between;gap:8px} .skel .sk-hud .sk{height:18px;border-radius:5px} .skel .sk-hud .sk:first-child{width:52px} .skel .sk-hud .sk:last-child{width:38px} .skel .pcard-body{gap:9px} .skel .sk-row{display:flex;align-items:center;justify-content:space-between;gap:10px} /* margin للسياقات غير المرنة (مثل .pdp-info)؛ داخل .pcard-body الفراغ من gap */ .skel .sk-line{display:block;height:11px;margin-block-end:10px} .skel .pcard-body .sk-line,.skel .sk-row .sk-line{margin-block-end:0} .skel .sk-line.w20{width:20%}.skel .sk-line.w28{width:28%}.skel .sk-line.w40{width:40%} .skel .sk-line.w60{width:60%}.skel .sk-line.w80{width:80%}.skel .sk-line.w100{width:100%} .skel .sk-title{height:15px} .skel .sk-price{height:19px;width:44%} .skel .sk-btn{height:44px;border-radius:10px;margin-block-start:auto} /* mirrors .pcard-actions: cart button + square heart */ .skel .sk-actions{display:flex;gap:8px;margin-block-start:auto} .skel .sk-actions .sk-btn{flex:1 1 auto;margin-block-start:0} .skel .sk-actions .sk-wish{flex:0 0 44px;height:44px;border-radius:10px} @keyframes sk{0%{background-position:0% 0}100%{background-position:-220% 0}} [dir="ltr"] .skel .sk::after{animation-name:skLtr} @keyframes skLtr{0%{background-position:220% 0}100%{background-position:0% 0}} /* نبض خفيف جدًا على مستوى البطاقة — يمنع إحساس "الصورة المجمّدة" */ @keyframes skBreathe{0%,100%{opacity:1}50%{opacity:.72}} /* ===================== QUICK-VIEW MODAL ===================== */ .qv{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px} .qv.show,.qv.closing{display:flex} .qv-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 62%,rgba(0,0,0,.6)); backdrop-filter:blur(3px);opacity:0;transition:opacity .32s var(--ease)} .qv.show .qv-scrim{opacity:1} .qv-dialog{position:relative;z-index:1;width:100%;max-width:840px;max-height:90vh;overflow:auto; background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow); transform:scale(.86) translateY(14px);opacity:0;transform-origin:center; transition:transform .42s var(--ease),opacity .32s var(--ease)} .qv.show .qv-dialog{transform:none;opacity:1} .qv.closing .qv-dialog{transform:scale(.94);opacity:0;transition:transform .28s var(--ease),opacity .28s} .qv.closing .qv-scrim{opacity:0} .qv-bar{position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:3;overflow:hidden;background:transparent;opacity:0;transition:opacity .2s} .qv.loading .qv-bar{opacity:1} .qv-bar::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:40%; background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:qvbar 1s var(--ease) infinite} @keyframes qvbar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}} .qv-close{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:4;width:38px;height:38px; border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text); display:grid;place-items:center;cursor:pointer;transition:.2s var(--ease)} .qv-close:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)} .qv-close svg{width:18px;height:18px} .qv .sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%); background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:6px;display:block} .qv .sk-line{height:12px} .qv .sk-line.w60{width:60%}.qv .sk-line.w40{width:40%}.qv .sk-line.w80{width:80%} .qv-grid{display:grid;grid-template-columns:1fr 1fr;min-height:340px} @media (max-width:680px){.qv-grid{grid-template-columns:1fr}} .qv-media{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--surface-2),var(--bg-2)); border-inline-end:1px solid var(--line);aspect-ratio:1/1} @media (max-width:680px){.qv-media{border-inline-end:0;border-block-end:1px solid var(--line)}} .qv-img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease),transform .35s var(--ease);will-change:transform} .qv-media.ready .qv-img{opacity:1} .qv-zoom{cursor:zoom-in} /* the scale itself is set inline by zoom.js so mouse, touch and keyboard all drive one code path; this only carries the cursor + gesture affordances */ .qv-zoom.zoomed{cursor:zoom-out;touch-action:none} .qv-sk-img{position:absolute;inset:0;width:100%;height:100%;border-radius:0} .qv-spinner{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:34px;height:34px;margin:-17px 0 0 -17px; border:3px solid var(--line-strong);border-block-start-color:var(--accent);border-radius:50%;animation:qvspin .7s linear infinite;z-index:2} @keyframes qvspin{to{transform:rotate(360deg)}} .qv-badges{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:3;display:flex;flex-wrap:wrap;gap:6px} .qv-hud{position:absolute;inset-block-end:14px;inset-inline-end:14px;z-index:3;font-family:var(--ff-mono); font-size:10.5px;letter-spacing:1.5px;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);padding:4px 9px;border-radius:6px} .qv-info{padding:30px 28px;display:flex;flex-direction:column;gap:12px} .qv-info>.sk-line{display:block} .qv-cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.8px;color:var(--text-3)} .qv-name{font-size:1.5rem;font-weight:700;line-height:1.25;color:var(--text)} .qv-rate{display:flex;align-items:center;gap:8px} .qv-rate .rcount{font-family:var(--ff-mono);font-size:12px;color:var(--text-3)} .qv-price{display:flex;align-items:baseline;gap:10px;margin-block-start:2px} .qv-price .now{font-family:var(--ff-mono);font-size:1.7rem;font-weight:600;color:var(--text)} .qv-price .was{font-family:var(--ff-mono);font-size:1rem;text-decoration:line-through;color:var(--text-3)} .qv-price .off{font-family:var(--ff-mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:3px 8px} .qv-desc{color:var(--text-2);font-size:.95rem;line-height:1.7} .qv-actions{display:flex;gap:10px;margin-block-start:8px} .qv-actions .btn-cart{flex:1} .qv-wish.on{border-color:var(--accent);color:var(--accent)} .qv-details{font-family:var(--ff-mono);font-size:12.5px;color:var(--accent);text-decoration:none;letter-spacing:.4px;margin-block-start:4px;transition:.2s var(--ease)} .qv-details:hover{opacity:.75} .qv:not(.loading) .qv-info>*{animation:qvup .5s var(--ease) backwards} .qv:not(.loading) .qv-info>*:nth-child(1){animation-delay:.02s} .qv:not(.loading) .qv-info>*:nth-child(2){animation-delay:.06s} .qv:not(.loading) .qv-info>*:nth-child(3){animation-delay:.10s} .qv:not(.loading) .qv-info>*:nth-child(4){animation-delay:.14s} .qv:not(.loading) .qv-info>*:nth-child(5){animation-delay:.18s} .qv:not(.loading) .qv-info>*:nth-child(6){animation-delay:.22s} .qv:not(.loading) .qv-info>*:nth-child(7){animation-delay:.26s} @keyframes qvup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .qv-dialog,.qv-scrim,.qv-img,.qv-close{transition:none} .qv-spinner,.qv-bar::before{animation:none} .qv:not(.loading) .qv-info>*{animation:none} } /* دخول البطاقات الحقيقية بعد الهيكل — يمنع "القفزة" عند استبدال innerHTML (يعمل أيضًا عند تبديل التبويب/الترتيب في #prodGrid) */ /* backwards لا both: بعد انتهاء الحركة لا تبقى قيمة transform مفروضة فتُعطّل رفعة hover */ .prod-cards>.pcard:not(.skel){animation:pcardIn .5s var(--ease) backwards} .prod-cards>.pcard:nth-child(1){animation-delay:.02s} .prod-cards>.pcard:nth-child(2){animation-delay:.06s} .prod-cards>.pcard:nth-child(3){animation-delay:.1s} .prod-cards>.pcard:nth-child(4){animation-delay:.14s} .prod-cards>.pcard:nth-child(5){animation-delay:.18s} .prod-cards>.pcard:nth-child(6){animation-delay:.22s} .prod-cards>.pcard:nth-child(7){animation-delay:.26s} .prod-cards>.pcard:nth-child(n+8){animation-delay:.3s} @keyframes pcardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .skel .sk::after{animation:none;background:color-mix(in srgb,var(--text) 3%,transparent)} .pcard.skel{animation:none} .prod-cards>.pcard:not(.skel){animation:none} } /* empty state */ .op-empty{text-align:center;padding:60px 20px;color:var(--text-2)} .op-empty svg{width:48px;height:48px;color:var(--text-3);margin-block-end:16px} .op-empty h3{font-size:1.2rem;margin-block-end:6px;color:var(--text)} .op-more{text-align:center;margin-block-start:40px} /* toast */ .toast{position:fixed;inset-block-end:24px;inset-inline:0;margin-inline:auto;width:max-content;max-width:90vw;z-index:120; background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow); color:var(--text);font-size:14px;font-weight:500;padding:13px 20px;display:flex;align-items:center;gap:10px; opacity:0;transform:translateY(16px);visibility:hidden;transition:.3s var(--ease)} .toast.show{opacity:1;transform:none;visibility:visible} .toast svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto} /* ========================================================= ALL PRODUCTS page: layout + filters + toolbar + pager (slice 3) ========================================================= */ .shop-layout{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start} /* sidebar filters */ .filters{position:sticky;inset-block-start:84px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:20px 22px} .filters-head{display:none;justify-content:space-between;align-items:center;margin-block-end:10px} .filters-head h3{font-size:1.1rem} .filter-topbar{display:flex;justify-content:space-between;align-items:center;margin-block-end:6px} .filter-topbar h4{font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:var(--text-3)} .filter-clear{font-size:12px;color:var(--accent);background:none;border:0;cursor:pointer;font-family:inherit} .filter-clear:hover{text-decoration:underline} .fgroup{border-block-start:1px solid var(--line);padding-block:18px} .fgroup > h4{font-size:14px;font-weight:600;margin-block-end:12px;display:flex;align-items:center;justify-content:space-between} .fopt{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;color:var(--text-2);font-size:14px;transition:color .2s} .fopt:hover{color:var(--text)} .fopt input{accent-color:var(--brand);width:16px;height:16px;flex:0 0 auto;cursor:pointer} .fopt .cnt{margin-inline-start:auto;font-family:var(--ff-mono);font-size:11px;color:var(--text-3)} .fopt .stars{pointer-events:none} /* price dual-range */ .range-wrap{position:relative;height:30px;direction:ltr;margin-block:6px 4px} .range-track{position:absolute;inset-block-start:13px;inset-inline:2px;height:4px;background:var(--line-strong);border-radius:3px} .range-fill{position:absolute;inset-block-start:13px;height:4px;background:var(--accent);border-radius:3px} .range-wrap input[type=range]{position:absolute;inset-block-start:0;inset-inline:0;width:100%;height:30px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none} .range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--accent);cursor:pointer} .range-wrap input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border:2px solid var(--surface);border-radius:50%;background:var(--brand);box-shadow:0 0 0 1px var(--accent);cursor:pointer} .price-inputs{display:flex;align-items:center;gap:10px;margin-block-start:10px} .price-inputs input{width:100%;font-family:var(--ff-mono);font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px} .price-inputs input:focus{outline:none;border-color:var(--accent)} .price-inputs span{color:var(--text-3)} /* shop main */ .shop-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-block-end:18px} .search{position:relative;flex:1;min-width:220px;max-width:440px} .search input{width:100%;font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;padding-inline-start:42px;transition:.2s var(--ease)} .search input:focus{outline:none;border-color:var(--accent)} .search svg{position:absolute;inset-inline-start:14px;inset-block-start:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-3);pointer-events:none} .tools-right{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .result-count{font-size:13px;color:var(--text-3);font-family:var(--ff-mono);white-space:nowrap} .active-chips{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:18px} .active-chips:empty{display:none} .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;background:var(--accent-soft);color:var(--accent);border-radius:100px;padding:5px 8px 5px 12px} .chip button{background:none;border:0;color:inherit;cursor:pointer;display:grid;place-items:center;padding:0} .chip button svg{width:13px;height:13px} .chip.clear{background:transparent;border:1px dashed var(--line-strong);color:var(--text-2);padding:5px 12px;cursor:pointer} .chip.clear:hover{border-color:var(--accent);color:var(--accent)} /* pagination */ .pager{display:flex;justify-content:center;gap:6px;margin-block-start:40px;flex-wrap:wrap} .pager button{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;font-family:var(--ff-mono);font-size:14px;transition:.2s var(--ease)} .pager button:hover:not(:disabled):not(.active){border-color:var(--accent);color:var(--accent)} .pager button.active{background:var(--brand);border-color:var(--brand);color:#fff} .pager button:disabled{opacity:.4;cursor:not-allowed} .pager .dots{align-self:center;color:var(--text-3);padding:0 4px} /* mobile filter drawer + fab */ .filter-fab{position:fixed;inset-block-end:22px;inset-inline:0;margin-inline:auto;width:max-content;z-index:78;display:none;align-items:center;gap:8px; background:var(--brand);color:#fff;border:0;border-radius:100px;padding:13px 26px;box-shadow:var(--shadow);cursor:pointer;font-family:inherit;font-weight:600} .filter-fab svg{width:18px;height:18px} .filter-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:88;opacity:0;visibility:hidden;transition:.3s var(--ease)} /* 991, not 980: .wrap drops from 960 to 720 at 991. Collapsing the sidebar one step later left a band where a 720px wrap still paid for a 248px sidebar and the cards beside it were ~140px wide. */ @media (max-width:991px){ .shop-layout{grid-template-columns:1fr} .filter-fab{display:inline-flex} .filter-scrim.open{opacity:1;visibility:visible} .filters{position:fixed;inset-block:auto 0;inset-inline:0;z-index:90;max-height:86vh;overflow-y:auto;border-radius:18px 18px 0 0; transform:translateY(102%);transition:transform .35s var(--ease);visibility:hidden} .filters.open{transform:none;visibility:visible} .filters-head{display:flex} } /* back to top */ .back-top{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:76;width:46px;height:46px;border-radius:50%; border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer; opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease);box-shadow:var(--shadow)} .back-top.show{opacity:1;visibility:visible;transform:none} .back-top:hover{border-color:var(--accent);color:var(--accent)} .back-top svg{width:20px;height:20px} /* ========================================================= PRODUCT DETAILS (dynamic, ?slug) (slice 4) ========================================================= */ .pdp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start} @media (max-width:880px){.pdp-grid{grid-template-columns:1fr;gap:30px}} /* Two per row on phones instead of one full-width card. 460px is exactly where the shared .prod-cards rules collapse to a single column, so nothing above that breakpoint changes. Opted into per grid by id rather than applied to .prod-cards globally: the home, dashcam and category grids each have their own breakpoint ladder, and changing the shared rule would move all of them. The id also means these win on specificity rather than load order — which matters, because home.css loads after this file and restates .prod-cards. #pdpRelatedWrap — related products, product detail page #offersDeals — discounted products, offers page */ @media (max-width:460px){ #pdpRelatedWrap .prod-cards, #offersDeals .prod-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} } @media (max-width:360px){ #pdpRelatedWrap .prod-cards, #offersDeals .prod-cards{gap:8px} } /* gallery */ .gallery-main{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2);cursor:zoom-in} .gallery-main img{width:100%;height:100%;object-fit:cover;transition:transform .15s var(--ease);transform-origin:center} /* touch-action:none while zoomed, or the browser claims the drag for scrolling and the pan never gets the move events */ .gallery-main.zoom{cursor:zoom-out;touch-action:none} .gallery-main:focus-visible,.qv-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Zoom affordance — injected by zoom.js into whichever box it is attached to, so the blade partial and store.js do not each need their own copy. Sits at the bottom inline-start: .g-badges and .qv-badges own the top-start corner and .qv-hud the bottom-end one. */ .zoom-hint{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:3; display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:9px; color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.14);pointer-events:none; opacity:.85;transform:none;transition:opacity .25s var(--ease)} .zoom-hint svg{inline-size:16px;block-size:16px} /* out of the way once it has done its job */ .gallery-main.zoom .zoom-hint,.qv-zoom.zoomed .zoom-hint{opacity:0} @media (prefers-reduced-motion:reduce){.zoom-hint{transition:none}} .gallery-main .g-badges{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start} .gallery-thumbs{display:flex;gap:10px;margin-block-start:12px;flex-wrap:wrap} .gallery-thumbs button{width:72px;height:72px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--surface-2);padding:0;transition:.2s var(--ease)} .gallery-thumbs button.active,.gallery-thumbs button:hover{border-color:var(--accent)} .gallery-thumbs img{width:100%;height:100%;object-fit:cover} /* ===== product badges (.bdg) — gallery + quick view ===== These had no rules in any stylesheet: four bare s stacked in a column, rendering as plain body text over the photo. Hence "classic". Built as a glass pill so it stays legible over any product shot — a solid fill has to guess the photo behind it — with the state colour carried by a dot rather than the whole chip. The discount is the exception: it is the one badge meant to sell, so it drops the glass and goes solid. */ .bdg{display:inline-flex;align-items:center;gap:7px; font-family:var(--ff-mono);font-size:11px;font-weight:600;letter-spacing:.3px;line-height:1; padding:7px 12px;border-radius:100px;white-space:nowrap;color:#fff; background:color-mix(in srgb,#000 52%,transparent); border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px); box-shadow:0 8px 20px -12px rgba(0,0,0,.9)} .bdg::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;flex:0 0 auto; background:var(--bdg-dot,var(--accent));box-shadow:0 0 8px var(--bdg-dot,var(--accent))} .bdg.best{--bdg-dot:#E0A93B} .bdg.new{--bdg-dot:var(--accent)} .bdg.sale{--bdg-dot:var(--rec)} /* out of stock is a status, not a highlight — neutral dot, dimmed label, and no glow, so it never competes with the badges that are trying to sell */ .bdg.out{--bdg-dot:#9AA4A6;color:rgba(255,255,255,.84)} .bdg.out::before{box-shadow:none} .bdg.sale{background:linear-gradient(135deg,var(--rec),color-mix(in srgb,var(--rec) 62%,#000)); border-color:color-mix(in srgb,var(--rec) 55%,transparent); box-shadow:0 10px 24px -12px var(--rec)} .bdg.sale::before{background:#fff;box-shadow:none} .g-badges{gap:8px} /* they arrive with the image rather than being there flatly from the start */ .g-badges .bdg,.qv-badges .bdg{animation:bdgIn .45s var(--ease) backwards} .g-badges .bdg:nth-child(1),.qv-badges .bdg:nth-child(1){animation-delay:.06s} .g-badges .bdg:nth-child(2),.qv-badges .bdg:nth-child(2){animation-delay:.14s} .g-badges .bdg:nth-child(3),.qv-badges .bdg:nth-child(3){animation-delay:.22s} .g-badges .bdg:nth-child(4),.qv-badges .bdg:nth-child(4){animation-delay:.30s} @keyframes bdgIn{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.g-badges .bdg,.qv-badges .bdg{animation:none}} /* info column */ .pdp-cat{font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:var(--accent)} .pdp-title{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.4px;margin-block:8px 12px} .pdp-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-end:18px;font-size:13px;color:var(--text-3)} .pdp-meta .stars{transform:translateY(2px)} .pdp-meta .brand{font-family:var(--ff-mono);color:var(--text-2)} .pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-block-end:14px} .pdp-price .now{font-family:var(--ff-mono);font-size:2rem;font-weight:600;color:var(--text)} .pdp-price .was{font-family:var(--ff-mono);font-size:1.1rem;text-decoration:line-through;color:var(--text-3)} .pdp-price .off{font-family:var(--ff-mono);font-size:12px;color:#fff;background:var(--rec);border-radius:6px;padding:3px 8px} .pdp-avail{display:inline-flex;align-items:center;gap:8px;font-size:14px;margin-block-end:20px} .pdp-avail .dot{width:9px;height:9px;border-radius:50%} .pdp-avail.in{color:var(--accent)} .pdp-avail.in .dot{background:var(--accent);box-shadow:0 0 8px var(--accent)} .pdp-avail.out{color:var(--rec)} .pdp-avail.out .dot{background:var(--rec)} .pdp-desc{color:var(--text-2);margin-block-end:22px;font-size:1.02rem} .pdp-feat{display:flex;flex-direction:column;gap:11px;margin-block-end:24px} .pdp-feat li{display:flex;gap:11px;align-items:flex-start;color:var(--text-2);font-size:.96rem} .pdp-feat li svg{flex:0 0 auto;color:var(--accent);width:18px;height:18px;margin-block-start:3px} .pdp-buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-block-end:18px} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .qty button{width:42px;height:46px;background:var(--surface);border:0;color:var(--text);font-size:20px;cursor:pointer;transition:.2s} .qty button:hover{color:var(--accent)} .qty input{width:50px;height:46px;text-align:center;border:0;background:var(--surface-2);color:var(--text);font-family:var(--ff-mono);font-size:15px} .pdp-buy .btn-cart{flex:1;min-width:180px;height:46px} /* size only — appearance is shared with .pcard-actions .wish above. 46px to match .pdp-buy .btn-cart beside it. (position:static used to be here to undo an absolutely-positioned .wish base rule that no longer exists.) */ .pdp-buy .wish{flex:0 0 auto;inline-size:46px;block-size:46px} .pdp-buy .wish svg{inline-size:22px;block-size:22px} .pdp-share{display:flex;align-items:center;gap:10px;padding-block-start:18px;border-block-start:1px solid var(--line);font-size:13px;color:var(--text-3)} .pdp-share .s-btns{display:flex;gap:8px} .pdp-share a,.pdp-share button.s-copy{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);display:grid;place-items:center;cursor:pointer;transition:.2s var(--ease)} .pdp-share a:hover,.pdp-share button.s-copy:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .pdp-share svg{width:17px;height:17px} /* tabs panel (description / specs / reviews) */ .pdp-tabs{margin-block-start:10px} .pdp-panels{margin-block-start:24px} .pdp-panel{display:none} .pdp-panel.active{display:block} .pdp-panel p{color:var(--text-2);margin-block-end:14px} .spec-table{width:100%;border-collapse:collapse} .spec-table tr{border-block-end:1px solid var(--line)} .spec-table th{text-align:start;color:var(--text-3);font-weight:500;padding:13px 0;width:42%;font-size:.95rem} .spec-table td{padding:13px 0;color:var(--text);font-size:.95rem} /* reviews */ .rev-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-end:26px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .rev-score{text-align:center} .rev-score .big{font-family:var(--ff-mono);font-size:2.6rem;font-weight:600;line-height:1} .rev-score .stars{margin-block:6px} .rev-score small{color:var(--text-3);font-size:12px} .rev-list{display:flex;flex-direction:column;gap:16px} .review{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--surface)} .review-head{display:flex;align-items:center;gap:10px;margin-block-end:8px} .review-head .av{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600;font-size:13px} .review-head .nm{font-weight:600;font-size:.95rem} .review-head .dt{margin-inline-start:auto;font-family:var(--ff-mono);font-size:11px;color:var(--text-3)} .review p{color:var(--text-2);font-size:.95rem} /* not found */ .pdp-404{text-align:center;padding:80px 20px} .pdp-404 svg{width:54px;height:54px;color:var(--text-3);margin-block-end:18px} .pdp-404 h2{font-size:1.5rem;margin-block-end:10px} .pdp-404 p{color:var(--text-2);margin-block-end:24px} /* ========================================================= CART: header badge + cart page (slice 5) ========================================================= */ .cart-btn{position:relative} /* Host for the badge so it can sit proud of the (clipped) button. */ .nav-cart{position:relative;display:inline-flex} .cart-count{position:absolute;inset-block-start:-6px;inset-inline-start:-6px;min-width:18px;height:18px;padding:0 4px; border-radius:9px;background:var(--rec);color:#fff;font-family:var(--ff-mono);font-size:11px;line-height:18px; text-align:center;display:none} .cart-count.has{display:inline-block;animation:cart-pop .35s cubic-bezier(.34,1.56,.64,1)} @keyframes cart-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.cart-count.has{animation:none}} .cart-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start} @media (max-width:880px){.cart-grid{grid-template-columns:1fr}} .cart-actions-top{display:flex;justify-content:space-between;align-items:center;margin-block-end:18px} .cart-actions-top .count{font-family:var(--ff-mono);font-size:13px;color:var(--text-3)} .cart-clear{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:13px;font-family:inherit;display:inline-flex;align-items:center;gap:6px} .cart-clear:hover{color:var(--rec)} .cart-clear svg{width:15px;height:15px} .cart-items{display:flex;flex-direction:column;gap:14px} .cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;transition:.25s var(--ease)} .cart-row:hover{border-color:var(--line-strong)} .cart-row .ci-thumb{width:96px;height:96px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)} .cart-row .ci-thumb img{width:100%;height:100%;object-fit:cover} .cart-row .ci-cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.5px;color:var(--text-3);margin-block-end:3px} .cart-row .ci-name{font-size:1rem;margin-block-end:6px} .cart-row .ci-name a:hover{color:var(--accent)} .cart-row .ci-unit{font-family:var(--ff-mono);font-size:.85rem;color:var(--text-2)} .cart-row .ci-unit .was{text-decoration:line-through;color:var(--text-3);margin-inline-start:6px} .cart-row .ci-end{display:flex;flex-direction:column;align-items:flex-end;gap:12px;white-space:nowrap} .cart-row .line-total{font-family:var(--ff-mono);font-weight:600;font-size:1.05rem} .cart-row .ci-rm{background:none;border:0;color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:inherit} .cart-row .ci-rm:hover{color:var(--rec)} .cart-row .ci-rm svg{width:14px;height:14px} .cart-row .qty button{width:36px;height:38px;font-size:18px} .cart-row .qty input{width:42px;height:38px;font-size:14px} @media (max-width:480px){ .cart-row{grid-template-columns:72px 1fr;gap:12px} .cart-row .ci-thumb{width:72px;height:72px} .cart-row .ci-end{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center} } .cart-summary{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:24px;position:sticky;inset-block-start:84px} .cart-summary h3{font-size:1.15rem;margin-block-end:16px} .sum-row{display:flex;justify-content:space-between;align-items:center;padding-block:11px;color:var(--text-2);font-size:.95rem;border-block-end:1px solid var(--line)} .sum-row .v{font-family:var(--ff-mono)} .sum-row.total{border-block-end:0;color:var(--text);font-weight:700;font-size:1.2rem;padding-block-start:16px} .sum-row.total .v{color:var(--text)} .sum-free{color:var(--accent)} .cart-summary .btn{width:100%;justify-content:center;margin-block-start:18px} .cart-note{font-size:12px;color:var(--text-3);margin-block-start:14px;text-align:center;line-height:1.7} .cart-note a{color:var(--accent)} /* a summary value that is a phrase, not a number — mono spaces Arabic badly */ .sum-row .v.txt{font-family:var(--ff-ar);font-size:.9rem} .sum-row .v.txt:not(.sum-free){color:var(--text-3)} /* the resolved shipping method, shown next to the label once a region is picked */ .sum-note{display:inline;font-style:normal;font-size:11px;color:var(--text-3)} .sum-note:not(:empty)::before{content:"· "} /* line middle column: category, name, unit price, then the qty stepper */ .cart-row .ci-mid{min-width:0} .cart-row .ci-name a{overflow-wrap:anywhere} .cart-row .qty{margin-block-start:12px} /* ========================================================= CHECKOUT: contact + address + payment form (slice 5) Sits in the .cart-grid next to the sticky .cart-summary. ========================================================= */ .checkout-form{display:flex;flex-direction:column;gap:18px} .co-block{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:22px 24px} .co-head{display:flex;align-items:center;gap:11px;margin-block-end:18px} .co-head .n{font-family:var(--ff-mono);font-size:11px;letter-spacing:.5px;color:var(--accent); background:var(--accent-soft);border:1px solid var(--line-strong);border-radius:999px;padding:4px 9px;line-height:1} .co-head h3{font-size:1.05rem;margin:0} /* Checkout "already have an account?" offer. An aside, not a step, so it reads as a slim banner — copy on one side, actions on the other — instead of carrying the same padding and numbered heading as the real sections. These rules live here rather than in account.css because checkout.blade.php loads only site.css: parked in the account stylesheet they never reached this panel, which left the skip control rendering as a raw native button. */ .co-login{display:flex;align-items:center;justify-content:space-between; gap:14px 22px;flex-wrap:wrap;padding:14px 18px} .co-login-main{flex:1 1 260px;min-inline-size:0} .co-login-main h3{font-size:1rem;margin:0} .co-login-lead{font-size:13px;color:var(--text-2);line-height:1.65;margin:5px 0 0} .co-login-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 0 auto} .co-login-actions .btn{padding:9px 16px;font-size:13.5px;border-radius:10px} /* The order CTA is the only brand-filled button on this page, so the login action takes the softer accent treatment rather than competing with it. */ .co-login-cta{background:var(--accent-soft);color:var(--accent);border-color:transparent} .co-login-cta:hover{border-color:var(--accent)} .co-login-skip{background:none;border:0;font-family:inherit;font-size:13px;color:var(--text-3); cursor:pointer;padding:9px 4px;text-decoration:underline;text-underline-offset:4px; transition:color .25s var(--ease)} .co-login-skip:hover{color:var(--text)} .co-saved{margin-block-end:18px} .trk-result{margin-block-start:4px} @media (max-width:560px){ .co-login-actions{inline-size:100%} .co-login-actions .btn{flex:1 1 0;justify-content:center} } .co-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .co-fields .full{grid-column:1/-1} @media (max-width:560px){.co-fields{grid-template-columns:1fr}} .fld{display:block} .fld>span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);margin-block-end:7px} .fld>span em{font-style:normal;font-family:var(--ff-mono);font-size:10px;letter-spacing:.4px;color:var(--text-3)} .fld input,.fld textarea{ width:100%;font-family:inherit;font-size:.95rem;color:var(--text); background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:.25s var(--ease); } .fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)} .fld input::placeholder,.fld textarea::placeholder{color:var(--text-3)} .fld textarea{resize:vertical;min-height:78px;line-height:1.7} .fld.has-error input,.fld.has-error textarea,.fld.has-error select{border-color:var(--rec)} .fld.has-error input:focus,.fld.has-error textarea:focus,.fld.has-error select:focus{border-color:var(--rec);box-shadow:0 0 0 3px rgba(255,90,77,.14)} .fld .err{display:block;margin-block-start:6px;font-size:12px;line-height:1.6;color:var(--rec)} /* Native