/* ========================= THEME TOKENS Dark is DEFAULT Toggle by setting: ========================= */ :root{ /* DARK default */ --bg:#070A10; --panel:#0B1020; --panel2:#0A0F1C; --text:#EEF2FF; --muted:#A9B4D0; --line:rgba(238,242,255,.12); --blue:#3B82F6; --blueHover:#2563EB; --blueSoft:rgba(59,130,246,.18); --radius: 18px; --shadow: 0 12px 35px rgba(0,0,0,.45); --max: 1100px; } html[data-theme="light"]{ --bg:#ffffff; --panel:#ffffff; --panel2:#f5f7fa; --text:#0f172a; --muted:#64748b; --line:rgba(15,23,42,.12); --blue:#2563eb; --blueHover:#1d4ed8; --blueSoft:#e0e7ff; --shadow: 0 12px 35px rgba(15,23,42,.10); } /* ========================= BASE ========================= */ *{box-sizing:border-box} html,body{ margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit} .container{width:min(var(--max), calc(100% - 32px));margin:0 auto} /* ========================= TOPBAR ========================= */ .topbar{ position:sticky;top:0;z-index:50; background:var(--panel2); border-bottom:1px solid var(--line); } .topbar__inner{ display:flex;gap:12px;align-items:center;justify-content:space-between; padding:10px 0 } .topbar__badge{ font-size:12px;padding:6px 10px;border:1px solid var(--line); border-radius:999px; background:var(--blue); color:#fff; } .topbar__text{font-size:13px;color:var(--muted)} .topbar__link{font-size:13px;color:var(--blue)} .topbar__link:hover{color:var(--blueHover)} /* ========================= HEADER ========================= */ .header{ position:sticky;top:44px;z-index:40; background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } .header__inner{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 0 } .brand{display:flex;align-items:center;gap:10px} .brand__mark{ width:14px;height:14px;border-radius:6px; background:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent); } .brand__name{font-weight:800;letter-spacing:.2px} .nav{display:none;gap:18px;font-size:14px;color:var(--muted)} .nav a:hover{color:var(--text)} /* ========================= BUTTONS ========================= */ .btn{ border:1px solid var(--line); background:var(--panel); color:var(--text); padding:12px 14px; border-radius:999px; cursor:pointer; transition:transform .06s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn:hover{background:var(--panel2)} .btn:active{transform:scale(.98)} .btn--primary{ background:var(--blue); color:#fff; border-color:transparent; } .btn--primary:hover{background:var(--blueHover)} .btn--ghost{ background:transparent; color:var(--blue); } .btn--ghost:hover{ background:var(--blueSoft); border-color:color-mix(in srgb, var(--blue) 25%, transparent); } .btn--sm{padding:10px 12px;font-size:13px} .full{width:100%} /* ========================= HERO ========================= */ .hero{padding:42px 0 10px} .hero__grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch} .pill{ display:inline-block; font-size:12px; color:var(--muted); padding:6px 10px; border:1px solid var(--line); border-radius:999px; background: color-mix(in srgb, var(--blue) 10%, transparent); } h1{font-size:34px;line-height:1.05;margin:14px 0 10px;letter-spacing:-.6px} .lead{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 18px} .hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .trust{display:grid;gap:10px} .trust__item{ display:flex;gap:10px;align-items:center; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); } .trust__icon{ width:36px;height:36px;border-radius:14px; background: color-mix(in srgb, var(--blue) 14%, transparent); } .trust__item strong{display:block;font-size:14px} .trust__item span{display:block;font-size:13px;color:var(--muted)} .hero__visual{min-height:340px} .heroCard{ height:100%; border-radius:26px; overflow:hidden; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); position:relative; } .heroCard img{width:100%;height:100%;object-fit:cover} .heroCard__overlay{ position:absolute;left:0;right:0;bottom:0; padding:18px; background:linear-gradient(to top, rgba(15,23,42,.78), rgba(15,23,42,0)); } .heroCard__tag{font-size:12px;color:#e2e8f0} .heroCard h3{margin:8px 0 6px;font-size:18px;color:#fff} .heroCard p{margin:0;color:#e2e8f0;font-size:13px} /* ========================= SECTIONS ========================= */ .section{padding:44px 0} .section--alt{background:var(--panel2)} .section__head{margin-bottom:18px} .section__head h2{margin:0 0 6px;font-size:24px;letter-spacing:-.3px} .muted{color:var(--muted)} .tiny{font-size:12px} /* ========================= SELECTOR ========================= */ .selector{padding:18px 0 0} .selector__inner{ border:1px solid var(--line); border-radius:26px; padding:18px; background:var(--panel); display:grid; gap:12px; } .selector__controls{display:flex;gap:10px;flex-wrap:wrap} .chip{ padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer } .chip:hover{background:var(--panel2)} .chip.is-active{ background:var(--blue); color:#fff; border-color:transparent; } .selector__result{ padding:14px;border-radius:18px;border:1px solid var(--line); background:var(--panel2) } /* ========================= GRID / CARDS / PRODUCTS ========================= */ .grid{display:grid;grid-template-columns:1fr;gap:14px} .card{ border:1px solid var(--line); border-radius:26px; background:var(--panel); box-shadow:var(--shadow); } .product{overflow:hidden} /* +10% bigger image box */ .product__img{height:242px} .product__img img{width:100%;height:100%;object-fit:cover} .product__body{padding:16px} .product__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .product__title{margin:8px 0 4px;font-size:18px} .product__meta{font-size:13px;color:var(--muted)} .product__desc{margin:10px 0 12px;color:var(--muted);font-size:14px;line-height:1.5} .product__actions{display:flex;gap:10px;flex-wrap:wrap} /* ========================= STEPS ========================= */ .steps{display:grid;grid-template-columns:1fr;gap:12px} .step{ padding:16px;border:1px solid var(--line); border-radius:26px;background:var(--panel) } .step__num{ width:36px;height:36px;border-radius:14px; background: color-mix(in srgb, var(--blue) 16%, transparent); display:flex;align-items:center;justify-content:center; margin-bottom:10px; color:var(--blue); font-weight:800; } .step h3{margin:0 0 6px} .step p{margin:0;color:var(--muted)} /* ========================= ORDER FORM ========================= */ .order{display:grid;grid-template-columns:1fr;gap:14px;align-items:start} .fieldGrid{display:grid;grid-template-columns:1fr;gap:12px;padding:16px} .field{display:flex;flex-direction:column;gap:8px} .field--full{grid-column:1/-1} label{font-size:13px;color:var(--muted)} input,select,textarea{ padding:12px 12px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--text); outline:none; } input:focus,select:focus,textarea:focus{ border-color:color-mix(in srgb, var(--blue) 55%, transparent); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); } .formActions{padding:0 16px 16px} .order__side{padding:16px} .lead2{color:var(--muted);line-height:1.5} .miniList{margin-top:12px;display:grid;gap:10px} .miniList__item{display:flex;gap:10px;align-items:center;color:var(--muted)} .dot{width:8px;height:8px;border-radius:999px;background:color-mix(in srgb, var(--blue) 90%, transparent)} /* ========================= INFO GRID ========================= */ .infoGrid{display:grid;grid-template-columns:1fr;gap:12px} .infoCard{ padding:16px;border:1px solid var(--line); border-radius:26px;background:var(--panel) } .infoCard h3{margin:0 0 6px} .infoCard p{margin:0;color:var(--muted)} /* ========================= POLICY + FAQ ========================= */ .policy{padding:16px} .policy ul{margin:10px 0 0;padding-left:18px;color:var(--muted)} .faq{margin-top:18px} details{ border:1px solid var(--line); border-radius:18px; padding:12px; margin-bottom:10px; background:var(--panel); } summary{cursor:pointer;font-weight:700} details p{margin:10px 0 0;color:var(--muted)} /* ========================= FOOTER ========================= */ .footer{ padding:26px 0; border-top:1px solid var(--line); background:var(--panel2); } .footer__grid{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start } .footer__links{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted) } .footer__links a:hover{color:var(--text)} .brand--footer .brand__mark{opacity:.95} /* ========================= STICKY WHATSAPP BAR ========================= */ .stickyBar{ position:fixed;left:0;right:0;bottom:0; padding:10px 14px; background: color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter: blur(10px); border-top:1px solid var(--line); z-index:60; transform: translateY(120%); transition: transform 0.25s ease; } .stickyBar.is-visible { transform: translateY(0); } /* ========================= MODAL ========================= */ .modal{position:fixed;inset:0;display:none;z-index:80} .modal.is-open{display:block} .modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)} .modal__panel{ position:relative; width:min(980px, calc(100% - 24px)); margin:60px auto; border-radius:26px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); overflow:hidden; max-height: 88vh; overflow-y: auto; } .modal__close{ position:absolute;top:12px;right:12px; width:44px;height:44px;border-radius:999px; border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer; font-size:20px; } .modal__close:hover{background:var(--blueSoft)} .modal__body{display:grid;grid-template-columns:1fr;gap:0} .modal__body img{width:100%;height:260px;object-fit:cover} .modal__content{padding:16px} .modal__content h2{margin:10px 0 6px} .notesBox{ display:grid; gap:10px; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--panel2); } .modal__actions{display:flex;gap:10px;flex-wrap:wrap} /* ========================= RESPONSIVE ========================= */ @media (min-width: 900px){ .nav{display:flex} .hero__grid{grid-template-columns: 1.15fr .85fr;gap:22px} .grid{grid-template-columns: 1fr 1fr} .steps{grid-template-columns:1fr 1fr 1fr} .order{grid-template-columns: 1.2fr .8fr} .infoGrid{grid-template-columns:1fr 1fr 1fr} .footer__grid{grid-template-columns: 1.2fr 1fr .9fr} .modal__body{grid-template-columns: 1fr 1.1fr} .modal__body img{height:100%} } @media (min-width: 700px){ .fieldGrid{grid-template-columns:1fr 1fr} .stickyBar{display:none} } /* ========================= LOGO (2x size) ========================= */ .logoWrap{ position: relative; width: 44px; height: 44px; border-radius: 18px; overflow: hidden; display: inline-block; box-shadow: 0 8px 24px color-mix(in srgb, var(--blue) 22%, transparent); } .logoImg{ width: 100%; height: 100%; object-fit: cover; display:block; transform: translateZ(0); animation: logoPulse 2.8s ease-in-out infinite; } .logoFlicker{ position:absolute; inset:-20%; background: radial-gradient(circle at 55% 45%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), linear-gradient(115deg, rgba(37,99,235,0) 40%, rgba(37,99,235,.35) 48%, rgba(255,255,255,.6) 50%, rgba(37,99,235,.35) 52%, rgba(37,99,235,0) 60%); mix-blend-mode: screen; opacity: 0; filter: blur(1px); animation: boltFlicker 3.6s infinite; pointer-events:none; } @keyframes logoPulse{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(37,99,235,0)); } 50%{ filter: drop-shadow(0 0 10px rgba(37,99,235,.55)); } } @keyframes boltFlicker{ 0%, 70%, 100% { opacity: 0; transform: translateY(0) rotate(0deg); } 74% { opacity: .18; } 75% { opacity: .65; } 76% { opacity: .12; } 78% { opacity: .55; transform: translateY(-2px) rotate(-1deg); } 79% { opacity: .10; } 81% { opacity: .45; } 82% { opacity: 0; } } /* ========================= LIGHTNING EFFECTS ========================= */ /* Product image overlay */ .product__img{ position: relative; overflow: hidden; } .product__img::after{ content:""; position:absolute; inset:-20%; background: radial-gradient(circle at 55% 45%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), linear-gradient(115deg, rgba(37,99,235,0) 40%, rgba(37,99,235,.25) 48%, rgba(255,255,255,.55) 50%, rgba(37,99,235,.25) 52%, rgba(37,99,235,0) 60%); mix-blend-mode: screen; opacity: 0; filter: blur(1px); pointer-events:none; animation: boltFlicker 4.3s infinite; } .product:hover .product__img::after{ opacity: .28; animation-duration: 2.8s; } .product__img img{ transition: transform .25s ease, filter .25s ease; } .product:hover .product__img img{ transform: scale(1.03); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--blue) 35%, transparent)); } /* small logo watermark on product image */ .product__img::before{ content:""; position:absolute; left:14px; bottom:14px; width:56px; height:56px; border-radius:14px; background: url("logo-scar.png") center/cover no-repeat; opacity: .18; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--blue) 25%, transparent)); pointer-events:none; } /* Hero featured lightning overlay */ .heroCard{ position: relative; overflow: hidden; } .heroCard::after{ content:""; position:absolute; inset:-25%; background: radial-gradient(circle at 55% 45%, rgba(255,255,255,.45), rgba(255,255,255,0) 46%), linear-gradient(115deg, rgba(37,99,235,0) 40%, rgba(37,99,235,.28) 48%, rgba(255,255,255,.65) 50%, rgba(37,99,235,.28) 52%, rgba(37,99,235,0) 60%); mix-blend-mode: screen; opacity: 0; filter: blur(1px); pointer-events:none; animation: boltFlickerHero 4.8s infinite; } .heroCard img{ transition: transform .35s ease, filter .35s ease; } .heroCard:hover img{ transform: scale(1.02); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--blue) 45%, transparent)); } @keyframes boltFlickerHero{ 0%, 68%, 100% { opacity: 0; } 72% { opacity: .25; } 73% { opacity: .75; } 74% { opacity: .18; } 76% { opacity: .60; transform: translateY(-2px) rotate(-1deg); } 77% { opacity: .12; } 80% { opacity: .50; } 82% { opacity: 0; } } /* Tone lightning down a bit in dark default */ .product__img::after, .heroCard::after{ opacity: .10; } .product:hover .product__img::after{ opacity: .35; } /* ========================= HERO MOBILE ORDER: SLIDER ON TOP ========================= */ @media (max-width: 899px){ .hero__grid{ display: flex; flex-direction: column; } .hero__visual{ order: 1; } .hero__content{ order: 2; } } /* ========================= TITLE PRICE ========================= */ .product__title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; } .titlePrice{ display:inline-flex; align-items:baseline; gap:6px; font-size:14px; } .titlePrice s{ color: var(--muted); font-weight: 500; } .titlePrice strong{ color: var(--blue); font-size:16px; font-weight:800; } .titlePrice em{ font-style:normal; font-size:12px; color: var(--muted); } /* ========================= REVIEWS ========================= */ .reviewsGrid{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; } .reviewCard{ border: 1px solid var(--line); background: var(--panel); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); } .reviewTop{ display:flex; align-items:center; gap: 12px; justify-content: space-between; } .reviewTop > div{ flex:1; } .avatar{ width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-weight: 800; color: var(--text); background: color-mix(in srgb, var(--blue) 18%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); flex: 0 0 auto; } .stars{ font-size: 13px; letter-spacing: 1px; color: var(--blue); margin-top: 2px; } .badge{ font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--text); flex: 0 0 auto; } .reviewText{ margin: 12px 0 10px; line-height: 1.55; color: color-mix(in srgb, var(--text) 92%, transparent); } .reviewText strong{ color: var(--text); } .reviewMeta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .pillSmall{ display:inline-block; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); } .reviewCTA{ margin-top: 16px; padding: 16px; display:flex; gap: 14px; align-items:center; justify-content: space-between; } @media (min-width: 900px){ .reviewsGrid{ grid-template-columns: 1fr 1fr 1fr; } } .langBtn{ display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; color:#fff; background:rgba(255,255,255,.08); backdrop-filter: blur(6px); transition: all .2s ease; } .langBtn:hover{ background:#fff; color:#000; } .trust{ display:flex; gap:22px; margin-top:28px; flex-wrap:wrap; } .trust__item{ display:flex; align-items:center; gap:12px; } .trust__icon{ width:42px; height:42px; border-radius:50%; position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); } /* ---------- ICON SHAPES ---------- */ /* Unisex – pulsing dot */ .icon-unisex::before{ content:""; width:10px; height:10px; border-radius:50%; background:#fff; animation:pulse 1.8s infinite ease-in-out; } /* UAE Delivery – moving arrow */ .icon-uae::before{ content:"➜"; font-size:18px; color:#fff; animation:slide 1.6s infinite ease-in-out; } /* Easy Returns – rotating arrow */ .icon-returns::before{ content:"↺"; font-size:18px; color:#fff; animation:rotate 2.2s infinite linear; } /* ---------- ANIMATIONS ---------- */ @keyframes pulse{ 0%{ transform:scale(1); opacity:.6 } 50%{ transform:scale(1.5); opacity:1 } 100%{ transform:scale(1); opacity:.6 } } @keyframes slide{ 0%{ transform:translateX(-4px); opacity:.6 } 50%{ transform:translateX(4px); opacity:1 } 100%{ transform:translateX(-4px); opacity:.6 } } @keyframes rotate{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }