/* ========================================================= IMPLANCIA — Base Reset & Variables ========================================================= */ :root{ /* Exact brand palette — from live implancia.com Astra theme */ --ast-global-color-0:#086afe; /* brand blue */ --ast-global-color-1:#257af8; /* hover/secondary */ --ast-global-color-2:#031530; /* headings */ --ast-global-color-3:#374c6c; /* body text */ --ast-global-color-4:#ebf5ff; /* light blue tint */ --ast-global-color-5:#ffffff; /* white */ --ast-global-color-6:#e2e8f0; /* border */ --ast-global-color-7:#f9fafb; /* subtle background */ --ast-global-color-8:#94a3b8; /* muted text */ --color-primary:var(--ast-global-color-0); --color-primary-dark:var(--ast-global-color-1); --color-navy:var(--ast-global-color-2); --color-text:var(--ast-global-color-3); --color-bg:var(--ast-global-color-5); --color-bg-alt:var(--ast-global-color-4); --color-surface:#ffffff; --color-border:var(--ast-global-color-6); --color-muted:var(--ast-global-color-8); --color-accent:var(--ast-global-color-0); --color-ink:#031530; /* fixed dark navy for permanently-dark sections (footer, stats bar, catalog banner) — does NOT change with theme */ --radius:10px; --shadow-sm:0 2px 8px rgba(8,106,254,0.10); --shadow-md:0 10px 30px rgba(8,106,254,0.16); --font-heading:'Outfit', sans-serif; --font-body:'Inter', sans-serif; --container-w:1200px; /* Shared light hero/banner gradient (used by .hero and .page-header) */ --hero-bg: radial-gradient(ellipse 65% 120% at -4% 52%, #1a4fb0 0%, #2563c7 15%, #3b7ddd 32%, #6faee8 50%, #b8d9f5 68%, rgba(255,255,255,0) 84%), radial-gradient(ellipse 65% 120% at 104% 52%, #1a4fb0 0%, #2563c7 15%, #3b7ddd 32%, #6faee8 50%, #b8d9f5 68%, rgba(255,255,255,0) 84%), radial-gradient(ellipse 75% 70% at 50% -10%, rgba(45,115,200,0.75) 0%, rgba(80,155,225,0.5) 35%, rgba(140,190,240,0.28) 58%, rgba(180,215,248,0.1) 75%, rgba(255,255,255,0) 88%), radial-gradient(ellipse 42% 60% at 50% 50%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 25%, rgba(255,255,255,0.3) 48%, rgba(255,255,255,0) 70%), linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(220,236,252,0.5) 75%, rgba(210,230,250,0.8) 100%), #d6e8f8; } /* ========================================================= DARK THEME — activated via [data-theme="dark"] on Set by theme-toggle.js (manual choice, or "system" following the OS/browser color-scheme preference) ========================================================= */ html{color-scheme:light;} html[data-theme="dark"]{ color-scheme:dark; --color-primary:#4a9bff; --color-primary-dark:#6fb1ff; --color-navy:#f1f5f9; --color-text:#cbd5e1; --color-bg:#0b1220; --color-bg-alt:#131c2e; --color-surface:#161f33; --color-border:#2a3650; --color-muted:#8a99b3; --color-accent:#4a9bff; --shadow-sm:0 2px 8px rgba(0,0,0,0.35); --shadow-md:0 10px 30px rgba(0,0,0,0.5); } html[data-theme="dark"] img:not(.no-dark-dim){opacity:0.92;} html[data-theme="dark"] .product-thumb{background:#ffffff;border:1px solid var(--color-border);} html[data-theme="dark"] .product-thumb img{opacity:1;} .header-logo-dark{display:none;} html[data-theme="dark"] .header-logo{display:none;} html[data-theme="dark"] .header-logo-dark{ display:inline-block; height:30px; width:auto; max-width:140px; object-fit:contain; } html[data-theme="dark"] .header-logo-dark{transition:opacity 0.3s ease;} html[data-theme="dark"] .logo:hover .header-logo-dark{opacity:0.85;} html[data-theme="dark"] .btn-outline{color:var(--color-navy);border-color:var(--color-border);} html[data-theme="dark"] .btn-outline:not(:hover){background:transparent;} /* Global safety-net: every native form control must always follow the active theme's colors, so nothing goes invisible in dark mode. */ input,select,textarea,button{ color:var(--color-text); font-family:inherit; } input:not([type="checkbox"]):not([type="radio"]), select, textarea{ background:var(--color-surface); color:var(--color-navy); } input::placeholder,textarea::placeholder{color:var(--color-muted);opacity:1;} select option{background:var(--color-surface);color:var(--color-navy);} *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:hidden;} html, body{transition:background-color .25s ease, color .25s ease;} body{ margin:0; overflow-x:hidden; font-family:'Inter', sans-serif; font-weight:400; font-size:16px; font-size:1rem; line-height:1.75; color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} /* ========================================================= THEME TOGGLE (Light / Dark / System) — dropdown ========================================================= */ .theme-toggle{ position:relative; margin-right:12px; } .theme-toggle-trigger{ display:flex;align-items:center;gap:6px; background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:50px; padding:8px 14px; color:var(--color-navy); font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:500; cursor:pointer; transition:border-color .2s ease, color .2s ease; } .theme-toggle-trigger:hover{border-color:var(--color-primary);color:var(--color-primary);} .theme-toggle-trigger .theme-toggle-icon{font-size:1rem;line-height:1;} .theme-toggle-trigger .theme-toggle-caret{ font-size:0.65rem; color:var(--color-muted); transition:transform .2s ease; } .theme-toggle.open .theme-toggle-caret{transform:rotate(180deg);} .theme-toggle-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:170px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; box-shadow:var(--shadow-md); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:500; } .theme-toggle.open .theme-toggle-menu{ opacity:1; visibility:visible; transform:translateY(0); } .theme-toggle-option{ display:flex;align-items:center;gap:10px; width:100%; padding:9px 12px; border:none;background:transparent; border-radius:6px; font-family:'Inter',sans-serif; font-size:0.88rem; color:var(--color-text); cursor:pointer; text-align:left; transition:background .15s ease, color .15s ease; } .theme-toggle-option:hover{background:var(--color-bg-alt);color:var(--color-primary);} .theme-toggle-option.active{color:var(--color-primary);font-weight:600;background:var(--color-bg-alt);} .theme-toggle-option .theme-toggle-option-icon{font-size:1rem;width:20px;text-align:center;} .theme-toggle-option .theme-toggle-check{margin-left:auto;font-size:0.8rem;opacity:0;} .theme-toggle-option.active .theme-toggle-check{opacity:1;} @media (max-width:900px){ .theme-toggle-trigger{padding:7px 10px;} .theme-toggle-trigger .theme-toggle-label{display:none;} .theme-toggle-menu{right:auto;left:0;} } a{text-decoration:none;color:inherit;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-family:'Outfit', sans-serif;margin:0 0 16px;font-weight:500;color:var(--color-navy);} p{margin:0 0 16px;color:var(--color-muted);} .container{ max-width:var(--container-w); margin:0 auto; padding:0 2.5em; } .section{padding:80px 0;} .section-title{font-size:2rem;line-height:1.25;} .section-title.center{text-align:center;} .section-sub{max-width:620px;margin:-6px auto 40px;} .section-sub.center{text-align:center;} /* Buttons - flat solid blue */ .btn{ display:inline-block; padding:14px 28px; border-radius:50px; font-weight:600; font-family:'Outfit', sans-serif; font-size:0.95rem; transition:all .3s ease; border:2px solid transparent; cursor:pointer; line-height:1.5; position:relative; overflow:hidden; } .btn-primary{ background:#2563c7; color:#fff; border-radius:50px; } .btn-primary:hover{ background:#1a4fb0; transform:translateY(-2px); box-shadow:0 6px 20px rgba(8,106,254,0.35); } .btn-outline{ background:transparent; border-color:var(--color-primary); color:var(--color-primary); border-radius:50px; } .btn-outline:hover{ background:#2563c7; color:#fff; border-color:transparent; box-shadow:0 4px 15px rgba(8,106,254,0.25); transform:translateY(-2px); } .btn-sm{padding:10px 22px;font-size:0.85rem;border-radius:50px;} /* ========================================================= HEADER - Astra theme style ========================================================= */ .site-header{ position:sticky; top:0; z-index:1000; background:var(--color-surface); border-bottom:1px solid var(--color-border); box-shadow:0 2px 10px rgba(0,0,0,0.05); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:32px; } .logo{ display:flex; align-items:center; } .header-logo{ height:30px; width:auto; max-width:140px; object-fit:contain; transition:opacity 0.3s ease; } .logo:hover .header-logo{opacity:0.85;} .logo-text{ font-family:'Outfit', sans-serif; font-size:1.8rem; font-weight:700; color:var(--color-navy); letter-spacing:-0.03em; text-decoration:none; } .main-nav > ul{ display:flex; align-items:center; gap:28px; } .main-nav a{ font-family:'Outfit', sans-serif; font-weight:500; font-size:1rem; color:var(--color-text); padding:8px 0; position:relative; transition:color 0.2s ease; } .main-nav a.active, .main-nav a:hover{color:var(--color-primary);} .main-nav a::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--color-primary); transition:width 0.3s ease; } .main-nav a:hover::after{width:100%;} .has-dropdown{position:relative;} .caret{font-size:0.7em;margin-left:4px;} .dropdown{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; background:var(--color-surface); min-width:220px; border-radius:4px; box-shadow:0 10px 30px rgba(0,0,0,0.15); padding:12px 0; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, visibility .25s ease, transform .25s ease; border:1px solid var(--color-border); } .has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .dropdown li{ opacity:0; transform:translateX(-10px); transition:opacity .25s ease, transform .25s ease; } .has-dropdown:hover .dropdown li{opacity:1;transform:translateX(0);} .has-dropdown:hover .dropdown li:nth-child(1){transition-delay:.05s;} .has-dropdown:hover .dropdown li:nth-child(2){transition-delay:.1s;} .has-dropdown:hover .dropdown li:nth-child(3){transition-delay:.15s;} .has-dropdown:hover .dropdown li:nth-child(4){transition-delay:.2s;} .dropdown li a{display:block;padding:12px 24px;font-weight:400;font-size:0.95rem;transition:background .2s ease, color .2s ease, padding-left .2s ease;} .dropdown li a:hover{background:var(--color-bg-alt);color:var(--color-primary);padding-left:30px;} /* ========================================================= PRODUCTS MEGA-MENU (click-to-open, animated accordion: category -> sub-category -> sub-sub-category) ========================================================= */ .megamenu-trigger{ background:none;border:none;cursor:pointer; font-family:inherit;font-weight:600;font-size:1rem;color:var(--color-navy); display:inline-flex;align-items:center;padding:0; } .megamenu-trigger.active{color:var(--color-primary);} .megamenu{ display:flex; position:absolute; top:100%; left:0; background:var(--color-surface); min-width:260px; border-radius:4px; box-shadow:0 10px 30px rgba(0,0,0,0.15); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, visibility .25s ease, transform .25s ease; border:1px solid var(--color-border); border-top:2px solid var(--color-primary); overflow:hidden; } .has-megamenu:hover .megamenu, .has-megamenu.open .megamenu{ opacity:1; visibility:visible; transform:translateY(0); } .megamenu-col{padding:20px 0;} .megamenu-sub-links-flat{ max-height:none !important; opacity:1 !important; overflow:visible !important; padding:8px 0 !important; } .megamenu-main{min-width:240px;background:var(--color-bg-alt);display:flex;flex-direction:column;} .megamenu-main .megamenu-main-link + .megamenu-main-link{margin-top:2px;} .megamenu-main-link{ display:flex;align-items:center;justify-content:space-between;gap:8px; width:100%;background:none;border:none;cursor:pointer;font-family:inherit; padding:12px 20px;font-weight:600;color:var(--color-navy);font-size:clamp(0.8rem, 0.7rem + 0.4vw, 0.98rem); line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:background .2s ease, color .2s ease; } .megamenu-main-link:hover{color:var(--color-primary);} .megamenu-main-link.is-active{box-shadow:inset 3px 0 0 var(--color-primary);} .megamenu-chev{font-size:0.7em;opacity:0.6;display:inline-block;transition:transform .25s ease;} .megamenu-main-link[aria-expanded="true"] .megamenu-chev, .megamenu-sub-heading[aria-expanded="true"] .megamenu-chev{transform:rotate(90deg);opacity:1;} /* Right column: sub-categories (Screws / Plates) — opens on hover of the main category button (or click/tap on touch devices) */ .megamenu-sub{ min-width:0; max-width:0; padding:0; opacity:0; overflow:hidden; transition:max-width .35s ease, opacity .3s ease, padding .35s ease; white-space:nowrap; } .megamenu-sub.expanded{ min-width:260px; max-width:680px; padding:20px 24px; opacity:1; white-space:normal; border-left:1px solid var(--color-border); } .megamenu-group{display:flex;flex-direction:column;gap:2px;min-width:230px;} .megamenu-sub-heading{ display:flex;align-items:center;justify-content:space-between;gap:8px; width:100%;background:none;border:none;cursor:pointer;font-family:var(--font-heading); font-weight:700;color:var(--color-navy);font-size:clamp(0.78rem, 0.68rem + 0.45vw, 1rem); line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; padding:6px 0 8px;margin-bottom:2px;border-bottom:1px solid var(--color-border); } .megamenu-sub-heading:hover{color:var(--color-primary);} /* Sub-sub-category links — opens on hover of its group (or click/tap) */ .megamenu-sub-links{ display:flex;flex-direction:column; max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease, margin .3s ease; } .megamenu-group:hover .megamenu-sub-links, .megamenu-sub-links.expanded{ max-height:400px; opacity:1; margin-bottom:10px; } .megamenu-sub-links a{ padding:7px 4px 7px 10px; font-size:clamp(0.76rem, 0.68rem + 0.35vw, 0.9rem); line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-weight:400; color:var(--color-muted); border-left:2px solid transparent; transition:color .2s ease, border-color .2s ease, padding-left .2s ease; } .megamenu-sub-links a:hover{color:var(--color-primary);border-left-color:var(--color-primary);padding-left:14px;} .megamenu-sub-links a.nested{ padding-left:22px; font-size:clamp(0.72rem, 0.64rem + 0.32vw, 0.84rem); opacity:0.85; } .megamenu-sub-links a.nested:hover{padding-left:26px;opacity:1;} @media (max-width:900px){ .megamenu{position:static;display:none;flex-direction:column;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;min-width:0;background:var(--color-bg-alt);border-radius:8px;margin-top:8px;overflow:hidden;} .has-megamenu.open .megamenu{display:flex;} .megamenu-col{width:100%;} .megamenu-main{border-bottom:1px solid var(--color-border);padding:6px 0;} .megamenu-main-link{width:100%;padding:12px 16px;font-size:0.95rem;white-space:normal;overflow:visible;text-overflow:clip;} .megamenu-sub{max-width:none;width:100%;min-width:0;padding:0;opacity:0;max-height:0;overflow:hidden;white-space:normal;transition:opacity .25s ease, max-height .3s ease, padding .3s ease;} .megamenu-sub.expanded{opacity:1;max-height:2000px;padding:8px 0 12px;overflow:visible;max-width:none;border-left:none;} .megamenu-group:hover .megamenu-sub-links:not(.expanded){max-height:0;opacity:0;} /* disable accidental hover-reveal on touch; tap still works via .expanded */ .megamenu-sub-heading{width:100%;padding:10px 16px;font-size:0.9rem;white-space:normal;overflow:visible;text-overflow:clip;} .megamenu-sub-links{padding-left:10px;} .megamenu-sub-links a{padding:9px 16px;font-size:0.88rem;white-space:normal;overflow:visible;text-overflow:clip;} } @media (max-width:480px){ .megamenu-main-link{padding:10px 14px;font-size:0.9rem;} .megamenu-sub-heading{padding:8px 14px;font-size:0.85rem;} .megamenu-sub-links a{padding:8px 12px;font-size:0.85rem;} } .header-cta{white-space:nowrap;} .header-actions{display:flex;align-items:center;} /* Laptop range (901px–1300px): full nav + logo + Get Quote + Cart all sit in one row with no wrap, so on common 1280/1366px laptop screens the Get Quote button was being squeezed/pushed out of view. Tighten gaps and sizes here so everything fits cleanly without touching mobile (<=900px) or large-desktop (>1300px) styles. */ @media (min-width:901px) and (max-width:1300px){ .header-inner{gap:16px;} .container{padding:0 1.25em;} .header-logo{max-width:170px;} .main-nav > ul{gap:14px;} .main-nav a{font-size:0.92rem;} .header-cta{padding:11px 18px;font-size:0.86rem;flex-shrink:0;} .cart-list-btn{margin-right:0;padding:8px 12px;font-size:0.82rem;} } @media (min-width:901px) and (max-width:1100px){ .header-inner{gap:12px;} .main-nav > ul{gap:8px;} .main-nav a{font-size:0.83rem;} .header-cta{padding:8px 12px;font-size:0.76rem;flex-shrink:1;min-width:0;} .theme-toggle{margin-right:6px;} .theme-toggle-trigger{padding:6px 10px;} .cart-list-btn{padding:7px 10px;font-size:0.78rem;} } .nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; } .nav-toggle span{width:24px;height:2px;background:var(--color-primary-dark);display:block;transition:0.3s;} /* ========================================================= SCROLL-REVEAL ANIMATIONS ========================================================= */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s cubic-bezier(.21,.6,.35,1), transform 0.7s cubic-bezier(.21,.6,.35,1); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; } .reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);} .reveal-stagger.is-visible > *:nth-child(1){transition-delay:0.05s;} .reveal-stagger.is-visible > *:nth-child(2){transition-delay:0.15s;} .reveal-stagger.is-visible > *:nth-child(3){transition-delay:0.25s;} .reveal-stagger.is-visible > *:nth-child(4){transition-delay:0.35s;} .reveal-stagger.is-visible > *:nth-child(5){transition-delay:0.45s;} .reveal-stagger.is-visible > *:nth-child(6){transition-delay:0.55s;} @media (prefers-reduced-motion: reduce){ .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ========================================================= FACILITY / EQUIPMENT GALLERY ========================================================= */ .gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; } .gallery-item{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm); background:#ffffff; } .gallery-item img{ width:100%;height:100%;object-fit:contain; padding:16px; transition:transform 0.5s ease; } .gallery-item:hover img{transform:scale(1.08);} .gallery-item.card-clickable{cursor:pointer;transition:transform .25s ease, box-shadow .25s ease;} .gallery-item.card-clickable:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(8,106,254,0.16);} .gallery-item.card-clickable:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;} .gallery-item .gallery-caption{ position:absolute;left:0;right:0;bottom:0; padding:14px 16px; background:linear-gradient(to top, rgba(3,21,48,0.85), transparent); color:#fff; font-family:var(--font-heading); font-size:0.9rem; font-weight:500; } .page-header{ position:relative; overflow:hidden; background:var(--hero-bg); padding:90px 0; text-align:center; } .page-header h1{ color:var(--ast-global-color-2); font-size:clamp(1.8rem, 4.5vw, 2.6rem); margin-bottom:0; } .page-header p{ color:var(--ast-global-color-3); max-width:600px; margin:14px auto 0; } /* Core values / 3-up cards (About page) */ .core-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .core-value-card{ background:var(--color-bg-alt); border-radius:var(--radius); padding:32px 24px; text-align:center; } .core-value-card h3{font-size:1.15rem;} .core-value-card p{font-size:0.95rem;margin-bottom:0;} /* Story / About intro split layout */ .about-intro{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .about-intro img{ border-radius:var(--radius); width:100%; height:380px; object-fit:cover; } .about-intro h2{font-size:1.6rem;} @media (max-width:900px){ .core-values-grid{grid-template-columns:1fr;} .about-intro{grid-template-columns:1fr;} } /* Offerings page — numbered alternating rows */ .offering-row{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:64px; } .offering-row:last-child{margin-bottom:0;} .offering-row.reverse{direction:rtl;} .offering-row.reverse > *{direction:ltr;} .offering-row img{ border-radius:var(--radius); width:100%; height:320px; object-fit:cover; } .offering-number{ display:inline-block; font-family:var(--font-heading); font-size:1rem; font-weight:600; color:var(--color-primary); margin-bottom:8px; } .offering-row h3{font-size:1.4rem;} @media (max-width:900px){ .offering-row, .offering-row.reverse{ grid-template-columns:1fr; direction:ltr; } } /* ========================================================= HERO - Astra theme style with video background ========================================================= */ .hero{ position:relative; overflow:hidden; background:var(--hero-bg); padding:120px 0 100px; text-align:center; } .hero-video-bg{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.6; } .hero-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1; } .hero-inner{ position:relative; z-index:2; max-width:800px; } .hero h1{ color:#fff; font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.2; margin-bottom:24px; font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,0.5); } .hero p{ color:#fff; font-size:1.1rem; margin-bottom:36px; line-height:1.7; text-shadow:0 1px 5px rgba(0,0,0,0.4); } /* ========================================================= PRODUCT CATALOG - Astra theme style ========================================================= */ .catalog{background:var(--color-bg-alt);padding:60px 0;} .product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .shop-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:18px 0 8px; padding:14px 18px; background:var(--color-bg-alt); border-radius:var(--radius); border:1px solid var(--color-border); } .shop-toolbar-group{display:flex;align-items:center;gap:8px;} .shop-toolbar-group label{font-size:0.85rem;font-weight:600;color:var(--color-navy);} .shop-toolbar-group select{ padding:8px 12px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); font-size:0.85rem; color:var(--color-navy); cursor:pointer; } .shop-result-count{margin-left:auto;font-size:0.85rem;color:var(--color-muted);} .shop-pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap; } .page-btn{ min-width:40px; height:40px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-navy); font-weight:600; cursor:pointer; transition:all .2s ease; } .page-btn:hover{border-color:var(--color-primary);color:var(--color-primary);} .page-btn.active{ background:#2563c7; border-color:transparent; color:#fff; } @media (max-width:768px){ .shop-result-count{margin-left:0;width:100%;} } .product-card{ background:var(--color-surface); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:transform .25s ease, box-shadow .25s ease; border:1px solid var(--color-border); display:flex; flex-direction:column; min-height:460px; height:auto; } .product-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.12); } .product-thumb{ background:#ffffff; border-radius:var(--radius); padding:0; margin-bottom:16px; height:180px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .product-thumb img{ margin:0 auto; width:100%; height:100%; object-fit:contain; transition:transform 0.5s ease; padding:12px; } .product-card:hover .product-thumb img{ transform:scale(1.05); } .product-cat{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-accent); font-weight:600; margin-bottom:8px; flex-shrink:0; } .product-card h3{font-size:1.1rem;margin:8px 0 12px;font-family:'Outfit', sans-serif;color:var(--color-navy);flex-shrink:0;} .product-card h3 a:hover{color:var(--color-primary);} .price{font-weight:700;color:var(--color-primary-dark);margin-bottom:12px;font-size:1.1rem;flex-shrink:0;} .price del{color:var(--color-muted);font-weight:400;margin-right:8px;font-size:0.9rem;} .price .price-pkr{display:block;font-size:0.8rem;font-weight:500;color:var(--color-muted);margin-top:2px;} .product-card .btn{margin-top:auto;padding:10px 20px;font-size:0.85rem;} .catalog-cta{text-align:center;margin-top:40px;} /* Product Modal */ .product-modal{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:flex; align-items:center; justify-content:center; } .modal-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); } .modal-content{ position:relative; background:var(--color-surface); border-radius:var(--radius); max-width:900px; width:90%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); padding:32px; } .modal-close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border:none; background:var(--color-bg-alt); border-radius:50%; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--color-text); transition:all 0.3s ease; } .modal-close:hover{ background:var(--color-primary); color:#fff; } .modal-details-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; } .modal-media{ text-align:center; } .modal-media img{ max-width:100%; border-radius:var(--radius); margin-bottom:16px; } .modal-info h3{ font-size:1.5rem; margin-bottom:16px; color:var(--color-navy); } .modal-info .product-desc{ font-size:1rem; line-height:1.7; margin-bottom:20px; } .modal-specs{ background:var(--color-bg-alt); border-radius:8px; padding:16px; margin-bottom:20px; } .modal-spec-item{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--color-border); } .modal-spec-item:last-child{ border-bottom:none; } .modal-spec-label{ font-weight:600; color:var(--color-navy); } .modal-spec-value{ color:var(--color-text); } .modal-actions{ display:flex; gap:12px; margin-top:24px; } @media (max-width:768px){ .modal-details-grid{ grid-template-columns:1fr; } .modal-content{ padding:24px; } } /* ========================================================= PRODUCT DETAIL PAGE ========================================================= */ .pd-section{padding:60px 0;} .pd-back-link{ display:inline-block; margin-bottom:24px; color:var(--color-text); font-weight:500; transition:color 0.3s ease; } .pd-back-link:hover{color:var(--color-primary);} .pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; } .pd-media{ display:flex; flex-direction:column; gap:20px; } .pd-media-thumb{ background:var(--color-bg-alt); border-radius:var(--radius); padding:24px; text-align:center; height:420px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .pd-media-thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius); } @media (max-width:640px){ .pd-media-thumb{height:300px;} .pd-info h1{font-size:1.4rem;} .pd-info .product-cat{font-size:0.75rem;} .pd-spec-label{font-size:0.7rem;} .pd-spec-value{font-size:0.85rem;} } .pd-add-to-cart{ width:100%; margin-top:8px; } .pd-info{ display:flex; flex-direction:column; gap:24px; } .pd-info .product-cat{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-accent); font-weight:600; } .pd-info h1{ font-size:2rem; color:var(--color-navy); margin:0; } .pd-info .product-desc{ font-size:1rem; line-height:1.7; color:var(--color-text); } .pd-info .product-options{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .pd-info .option-group label{ display:block; font-size:0.75rem; font-weight:600; color:var(--color-navy); font-family:'Outfit', sans-serif; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; } .pd-info .option-select{ width:100%; padding:10px 12px; border:1px solid var(--color-border); border-radius:6px; font-family:var(--font-body); font-size:0.9rem; background:var(--color-surface); color:var(--color-text); cursor:pointer; } .pd-info .option-select:focus{ outline:none; border-color:var(--color-primary); } .pd-info .price-live{ font-size:1.5rem; font-weight:700; color:var(--color-primary-dark); } .pd-info .product-specs{ background:var(--color-bg-alt); border-radius:8px; padding:20px; } .pd-info .spec-item{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--color-border); } .pd-info .spec-item:last-child{border-bottom:none;} .pd-info .spec-label{ font-weight:600; color:var(--color-navy); font-family:'Outfit', sans-serif; } .pd-info .spec-value{ color:var(--color-text); text-align:right; } .pd-info .product-tags{ display:flex; flex-wrap:wrap; gap:8px; } .pd-info .tag{ padding:6px 14px; background:var(--color-bg-alt); color:var(--color-muted); font-size:0.75rem; border-radius:50px; font-weight:500; } .pd-info .product-actions{ display:flex; gap:12px; } .pd-not-found{ text-align:center; padding:60px 0; } .pd-not-found h1{ font-size:2rem; color:var(--color-navy); margin-bottom:16px; } .pd-not-found p{ font-size:1.1rem; color:var(--color-text); margin-bottom:24px; } @media (max-width:900px){ .pd-grid{ grid-template-columns:1fr; gap:32px; } .pd-info .product-options{ grid-template-columns:1fr; } } /* ========================================================= SOLUTIONS ========================================================= */ .solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .solution-card img{ border-radius:var(--radius); height:200px; width:100%; object-fit:cover; margin-bottom:20px; } .solution-card h3{font-size:1.2rem;} .solution-card p{font-size:0.95rem;} /* ========================================================= STORY / TESTIMONIAL ========================================================= */ .story-inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:center; } .testimonial-card{ background:var(--color-bg-alt); border-left:4px solid var(--color-accent); border-radius:var(--radius); padding:32px; } .testimonial-card p{ font-style:italic; color:var(--color-text); font-size:1.05rem; } .testimonial-author{display:flex;align-items:center;gap:12px;} .testimonial-author img{ width:48px;height:48px;border-radius:50%;object-fit:cover; } .testimonial-avatar{ width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--color-primary);color:#fff; font-family:var(--font-heading);font-weight:700;font-size:1rem; flex-shrink:0; } .testimonial-author span{font-weight:600;font-family:var(--font-heading);color:var(--color-primary-dark);} /* ========================================================= WHY CHOOSE US ========================================================= */ .why-choose{background:var(--color-bg-alt);} .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; } .why-card{ background:var(--color-surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); } .why-card img{height:220px;width:100%;object-fit:cover;} .why-card h3,.why-card p,.why-card .link-arrow{padding-left:24px;padding-right:24px;} .why-card h3{margin-top:20px;} .link-arrow{ display:inline-block; margin-bottom:24px; font-weight:600; color:var(--color-primary); } .link-arrow:hover{color:var(--color-accent);} /* ========================================================= JOIN US CTA ========================================================= */ .join-us{ position:relative; background:var(--color-bg); text-align:center; padding:110px 0; } .join-overlay{display:none;} .join-inner{position:relative;z-index:1;max-width:600px;} .join-inner h2{color:var(--color-navy);font-size:2.2rem;} .join-inner p{color:var(--color-text);margin-bottom:28px;} /* ========================================================= FOOTER - Astra theme style with 4-column layout ========================================================= */ .site-footer{ position:relative; overflow:hidden; background:var(--color-ink); color:#fff; padding:60px 0 0; } .footer-inner{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:30px; align-items:start; text-align:left; padding-bottom:40px; } .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding:20px 0; text-align:center; } .footer-col{ display:flex; flex-direction:column; gap:16px; } .footer-col-1{ justify-content:flex-start; } .footer-col-2{ justify-content:flex-start; } .footer-col-3{ justify-content:flex-start; } .footer-col-4{ justify-content:flex-end; align-items:flex-end; text-align:right; } .footer-logo{height:46px;width:auto;max-width:220px;object-fit:contain;background:transparent;} .footer-logo-link{display:inline-block;transition:opacity 0.3s ease;} .footer-logo-link:hover{opacity:0.8;} .footer-tagline{ font-size:0.9rem; color:#cfe0f5; line-height:1.5; margin-top:12px; max-width:200px; } .footer-heading{ font-family:'Outfit', sans-serif; font-size:1.1rem; font-weight:600; color:#fff; margin-bottom:8px; } .footer-nav{display:flex;flex-direction:column;gap:10px;} .footer-nav a{font-family:'Outfit', sans-serif;font-size:0.9rem;color:#cfe0f5;transition:color 0.3s ease;} .footer-nav a:hover{color:#fff;} .footer-contact{display:flex;flex-direction:column;gap:8px;} .footer-contact-item{font-size:0.9rem;color:#cfe0f5;display:flex;align-items:center;gap:8px;} .footer-contact-item:hover{color:#fff;} .footer-socials{display:flex;gap:10px;} .footer-socials a{ width:36px;height:36px;border-radius:50%; border:1px solid rgba(255,255,255,0.2); color:#fff; display:flex;align-items:center;justify-content:center; font-size:0.8rem;font-weight:700; transition:all 0.3s ease; } .footer-socials a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;} .footer-copyright{grid-column:1/-1;text-align:center;padding-top:20px;margin-top:20px;border-top:1px solid rgba(255,255,255,0.1);} .footer-copyright .copyright{font-size:0.85rem;color:#9fb3cc;margin:0;} @media (max-width:1024px){ .footer-inner{ grid-template-columns:1fr 1fr; gap:30px; } .footer-col-3, .footer-col-4{ grid-column:span 1; } .footer-col-4{ align-items:flex-start; text-align:left; } } @media (max-width:600px){ .footer-inner{ grid-template-columns:1fr; text-align:center; } .footer-col{ align-items:center; text-align:center; } .footer-col-4{ align-items:center; text-align:center; } .footer-nav{align-items:center;} .footer-contact-item{justify-content:center;} } /* Scroll to top */ .scroll-top{ position:fixed; bottom:28px; right:28px; width:46px;height:46px; border-radius:50%; background:var(--color-primary); color:#fff; border:none; font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s ease; z-index:999; } .scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0);} .scroll-top:hover{background:var(--color-primary-dark);} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1024px){ .product-grid{grid-template-columns:repeat(2,1fr);} .story-inner{grid-template-columns:1fr;} } @media (max-width:900px){ .main-nav{ position:fixed; top:78px; left:0; right:0; background:var(--color-surface); border-bottom:0; max-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; transition:max-height .3s ease; z-index:60; } /* Border only shows once the menu is open. While closed, max-height:0 still left a transparent border-bottom rendered against the header's white background beneath it, which read as a thin line stuck under the header (since the nav is position:fixed it stayed in place while the page scrolled). border-bottom:0 by default removes that line. */ .main-nav.open{max-height:calc(100vh - 78px);border-bottom:1px solid var(--color-border);} .main-nav ul{flex-direction:column;align-items:flex-start;padding:20px 24px;gap:16px;} .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;padding-left:12px;} .has-dropdown.open .dropdown{display:flex;} .has-dropdown.open .dropdown li, .dropdown li{opacity:1;transform:none;} .header-inner{gap:14px;} .header-logo{max-width:105px;} html[data-theme="dark"] .header-logo-dark{max-width:105px;} .header-cta{padding:8px 14px;font-size:0.8rem;flex-shrink:1;min-width:0;white-space:normal;text-align:center;line-height:1.2;} .nav-toggle{display:flex;flex-shrink:0;} .header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;} .theme-toggle{margin-right:0;} .cart-list-btn{margin-right:0;} .solutions-grid{grid-template-columns:1fr;} .why-grid{grid-template-columns:1fr;} .hero{padding:90px 0;} .page-header{padding:22px 0;} .gallery-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .product-grid{grid-template-columns:1fr;} .section{padding:56px 0;} .gallery-grid{grid-template-columns:1fr;} .hero{padding:70px 0;} .hero p{font-size:1rem;} .page-header{padding:16px 0;} .btn{padding:11px 22px;font-size:0.88rem;} .container{padding:0 18px;} .header-inner{gap:8px;} .header-logo{max-width:64px;} html[data-theme="dark"] .header-logo-dark{max-width:64px;} .header-cta{padding:7px 10px;font-size:0.7rem;flex-shrink:1;min-width:0;white-space:normal;text-align:center;line-height:1.15;} .header-actions{gap:5px;} .theme-toggle{margin-right:0;} .theme-toggle-trigger{padding:6px 8px;gap:0;} .theme-toggle-trigger .theme-toggle-caret{display:none;} .cart-list-btn{padding:7px 9px;} .nav-toggle{padding:6px;} .main-nav{top:70px;} .main-nav.open{max-height:calc(100vh - 70px);} .megamenu{position:static;display:none;flex-direction:column;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;min-width:0;background:var(--color-bg-alt);border-radius:8px;margin-top:8px;overflow:hidden;} .megamenu-col{width:100%;} .megamenu-main{border-bottom:1px solid var(--color-border);padding:6px 0;} .megamenu-main-link{width:100%;padding:12px 16px;font-size:0.95rem;white-space:normal;overflow:visible;text-overflow:clip;} .megamenu-sub{max-width:none;width:100%;min-width:0;padding:0;opacity:0;max-height:0;overflow:hidden;white-space:normal;transition:opacity .25s ease, max-height .3s ease, padding .3s ease;} .megamenu-sub.expanded{opacity:1;max-height:2000px;padding:8px 0 12px;overflow:visible;max-width:none;border-left:none;} .megamenu-group:hover .megamenu-sub-links:not(.expanded){max-height:0;opacity:0;} .megamenu-sub-heading{width:100%;padding:10px 16px;font-size:0.9rem;white-space:normal;overflow:visible;text-overflow:clip;} .megamenu-sub-links{padding-left:10px;} } @media (max-width:380px){ .logo-text{font-size:1.4rem;} .hero h1{font-size:1.6rem;} .section-title{font-size:1.5rem;} .header-logo{max-width:64px;} html[data-theme="dark"] .header-logo-dark{max-width:64px;} .header-inner{gap:6px;} .header-cta{padding:6px 8px;font-size:0.62rem;flex-shrink:1;min-width:0;white-space:normal;line-height:1.1;} .header-actions{gap:3px;} .theme-toggle-trigger{padding:5px 6px;} .cart-list-btn{padding:5px 7px;} .nav-toggle{padding:5px;} .container{padding:0 14px;} .btn{padding:10px 18px;font-size:0.85rem;} } /* ========================================================= PRODUCTS PAGE STYLES ========================================================= */ .page-hero{ background:var(--hero-bg); padding:28px 0; text-align:center; } .breadcrumb{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; font-size:0.9rem; color:#5b7699; flex-wrap:wrap; row-gap:4px; max-width:100%; } .breadcrumb a{ color:var(--ast-global-color-0); transition:color 0.2s ease; white-space:nowrap; position:relative; z-index:5; pointer-events:auto; cursor:pointer; } .breadcrumb a:hover{color:var(--ast-global-color-1);} .breadcrumb .separator{color:#5b7699;flex-shrink:0;} .breadcrumb .current{ color:var(--ast-global-color-2); font-weight:500; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:640px){ .breadcrumb .current{max-width:160px;} .breadcrumb{ font-size:0.85rem; gap:6px; } .breadcrumb a{ color:#ffffff; font-weight:600; text-decoration:underline; text-shadow:0 1px 3px rgba(0,0,0,0.35); } .breadcrumb .separator{color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.35);} .breadcrumb .current{ color:#ffffff; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,0.35); } /* Keep the same radial-gradient family used on desktop (same "type" of background) but rebalanced for narrow viewports: the two side ellipses are pushed further out so they don't collide into a hard seam, and the center highlight is enlarged so the breadcrumb pill always sits on a light patch regardless of screen width. */ .page-hero, .page-header{ background: radial-gradient(ellipse 90% 120% at -10% 40%, #1a4fb0 0%, #2563c7 18%, #3b7ddd 36%, #6faee8 55%, #b8d9f5 74%, rgba(255,255,255,0) 90%), radial-gradient(ellipse 90% 120% at 110% 40%, #1a4fb0 0%, #2563c7 18%, #3b7ddd 36%, #6faee8 55%, #b8d9f5 74%, rgba(255,255,255,0) 90%), radial-gradient(ellipse 85% 65% at 50% -10%, rgba(45,115,200,0.7) 0%, rgba(80,155,225,0.45) 38%, rgba(140,190,240,0.24) 60%, rgba(180,215,248,0.08) 78%, rgba(255,255,255,0) 90%), radial-gradient(ellipse 70% 70% at 50% 45%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0) 78%), linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(220,236,252,0.5) 75%, rgba(210,230,250,0.8) 100%), #d6e8f8; } /* The sticky header's box-shadow shows up as a hard line against the light gradient right below it — drop it on mobile. */ .site-header{ box-shadow:none; } } .page-title{ font-size:clamp(1.8rem, 4vw, 2.5rem); color:var(--ast-global-color-2); margin-bottom:12px; } .page-subtitle{ max-width:700px; margin:0 auto; color:var(--ast-global-color-3); font-size:1.05rem; } /* Filter Section */ .filter-section{ padding:40px 0; background:var(--color-bg-alt); } .filter-buttons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .filter-btn{ padding:10px 24px; border:2px solid var(--color-border); background:var(--color-surface); color:var(--color-text); border-radius:50px; font-family:'Outfit', sans-serif; font-weight:500; font-size:0.9rem; cursor:pointer; transition:all 0.3s ease; } .filter-btn:hover{ border-color:var(--color-primary); color:var(--color-primary); } .filter-btn.active{ background:#2563c7; border-color:transparent; color:#fff; } /* Products Section */ .products-section{padding:60px 0;} .product-category{margin-bottom:60px;} .category-title{ font-size:1.8rem; color:var(--color-navy); margin-bottom:12px; } .category-description{ max-width:700px; color:var(--color-muted); margin-bottom:32px; font-size:1rem; } /* Enhanced Product Card */ .product-card{ background:var(--color-surface); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; border:1px solid var(--color-border); position:relative; } .product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .product-thumb{ background:#ffffff; border-radius:var(--radius); padding:0; margin-bottom:16px; height:220px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; } .product-thumb img{ margin:0 auto; width:100%; height:100%; object-fit:contain; padding:14px; transition:transform 0.5s ease; } .product-card:hover .product-thumb img{ transform:scale(1.05); } .product-badge{ position:absolute; top:12px; left:12px; padding:6px 14px; background:var(--color-primary); color:#fff; font-size:0.75rem; font-weight:600; border-radius:50px; font-family:'Outfit', sans-serif; z-index:2; } .product-badge.premium{ background:linear-gradient(135deg, #f59e0b, #d97706); } .product-card.coming-soon{ opacity:0.8; } .product-card.coming-soon .product-badge{ background:var(--color-muted); } .product-cat{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-accent); font-weight:600; display:inline-block; margin-bottom:8px; } .product-card h3{ font-size:1.1rem; margin:8px 0 12px; font-family:'Outfit', sans-serif; color:var(--color-navy); } .product-card h3 a:hover{color:var(--color-primary);} .product-desc{ font-size:0.9rem; color:var(--color-muted); margin-bottom:16px; line-height:1.6; } /* Product Specifications */ .product-specs{ background:var(--color-bg-alt); border-radius:8px; padding:16px; margin-bottom:16px; text-align:left; } .spec-item{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--color-border); font-size:0.85rem; } .spec-item:last-child{border-bottom:none;} .spec-label{ font-weight:600; color:var(--color-navy); font-family:'Outfit', sans-serif; } .spec-value{ color:var(--color-text); text-align:right; } /* Product Tags */ .product-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px; } .tag{ padding:4px 12px; background:var(--color-bg-alt); color:var(--color-muted); font-size:0.75rem; border-radius:50px; font-weight:500; } /* SEO Content Section */ .seo-content{padding:60px 0;} .content-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-bottom:48px; } .content-block{ background:var(--color-surface); padding:28px; border-radius:var(--radius); box-shadow:var(--shadow-sm); } .content-block h3{ font-size:1.2rem; color:var(--color-navy); margin-bottom:12px; } .content-block p{ font-size:0.95rem; line-height:1.7; } /* FAQ Section */ .faq-section{ max-width:900px; margin:0 auto; } .faq-section h3{ font-size:1.5rem; color:var(--color-navy); margin-bottom:24px; text-align:center; } .faq-item{ background:var(--color-surface); padding:24px; border-radius:var(--radius); margin-bottom:16px; box-shadow:var(--shadow-sm); } .faq-item h4{ font-size:1.05rem; color:var(--color-navy); margin-bottom:12px; font-family:'Outfit', sans-serif; } .faq-item p{ font-size:0.95rem; line-height:1.7; margin-bottom:0; } /* Responsive Styles for Products Page */ @media (max-width:900px){ .content-grid{grid-template-columns:1fr;} .filter-buttons{gap:8px;} .filter-btn{padding:8px 18px;font-size:0.85rem;} } @media (max-width:600px){ .page-hero{padding:18px 0;} .page-title{font-size:1.6rem;} .category-title{font-size:1.4rem;} .product-specs{padding:12px;} .spec-item{font-size:0.8rem;} .content-block{padding:20px;} .breadcrumb{font-size:0.8rem;} .page-subtitle{font-size:0.9rem;} input,select,textarea{font-size:16px;} .checkout-box label{font-size:0.8rem;} .checkout-box input,.checkout-box select,.checkout-box textarea{padding:8px 12px;font-size:0.9rem;} .about-intro{grid-template-columns:1fr;gap:32px;} .about-intro img{height:300px;} form[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:16px !important;} } .faq-item{padding:18px;} /* ========================================================= PRODUCT OPTIONS (Type / Diameter / Length) + LIVE PRICE Added for dynamic pricing based on customer selection ========================================================= */ .product-grid-detail{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); } .product-gallery{ display:flex; gap:8px; justify-content:center; margin:-8px 0 16px; } .gallery-thumb{ width:48px; height:48px; object-fit:contain; background:#ffffff; padding:3px; border-radius:6px; border:2px solid var(--color-border); cursor:pointer; opacity:0.7; transition:opacity .2s ease, border-color .2s ease; } .gallery-thumb:hover{opacity:1;} .gallery-thumb.active{ opacity:1; border-color:var(--color-primary); } .product-options{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; text-align:left; margin-bottom:14px; } .option-group label{ display:block; font-size:0.75rem; font-weight:600; color:var(--color-navy); font-family:'Outfit', sans-serif; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.04em; } .option-select{ width:100%; padding:8px 10px; border:1px solid var(--color-border); border-radius:6px; font-family:var(--font-body); font-size:0.85rem; background:var(--color-surface); color:var(--color-text); cursor:pointer; } .option-select:focus{ outline:none; border-color:var(--color-primary); } .price-live{ font-size:1.4rem; margin-bottom:16px; } .price-live span{color:var(--color-primary-dark);} /* Optional manufacturing video */ .video-toggle-btn{ display:inline-block; margin-bottom:12px; cursor:pointer; background:var(--color-surface); } .product-video{ margin-bottom:16px; } .product-video video{ width:100%; border-radius:8px; display:block; } /* "See More Products" homepage CTA card */ .view-more-card{ display:flex; align-items:center; justify-content:center; background:var(--color-bg-alt); border:2px dashed var(--color-border); box-shadow:none; } .view-more-card:hover{ border-color:var(--color-primary); } .view-more-inner{ text-align:center; padding:20px 10px; } .view-more-icon{ display:block; font-size:2.2rem; color:var(--color-primary); margin-bottom:10px; } .view-more-card h3{margin-top:0;} /* Homepage catalog: 2 products + 1 "see more" card = 3 columns */ .catalog .product-grid{grid-template-columns:repeat(3, 1fr);} @media (max-width:1024px){ .catalog .product-grid{grid-template-columns:repeat(2, 1fr);} .product-options{grid-template-columns:1fr;} } @media (max-width:560px){ .catalog .product-grid{grid-template-columns:1fr;} } /* ========================================================= HOMEPAGE — whole card clickable ========================================================= */ .catalog .product-card.card-clickable{cursor:pointer;} .catalog .product-card.card-clickable:focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; } /* ========================================================= PRODUCTS PAGE — click-to-expand accordion cards ========================================================= */ .product-grid-detail .product-card{ cursor:pointer; text-align:left; } .product-summary{ display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; } .product-summary:focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; border-radius:8px; } .expand-indicator{ display:inline-flex; align-items:center; gap:6px; font-family:'Outfit', sans-serif; font-weight:600; font-size:0.85rem; color:var(--color-primary); margin-top:4px; } .expand-indicator .chevron{ display:inline-block; transition:transform .3s ease; } .product-card.expanded .expand-indicator .chevron{ transform:rotate(180deg); } .product-details{ overflow:hidden; max-height:0; opacity:0; transition:max-height .45s ease, opacity .35s ease, margin-top .45s ease; } .product-card.expanded .product-details{ max-height:2400px; opacity:1; margin-top:20px; } .details-grid{ display:grid; grid-template-columns:280px 1fr; gap:32px; text-align:left; padding-top:20px; border-top:1px solid var(--color-border); } .details-media{ display:flex; flex-direction:column; } .details-media .product-thumb{margin-bottom:12px;} .details-media .product-gallery{justify-content:flex-start;margin:0 0 14px;} .details-media .video-toggle-btn{width:100%;text-align:center;} .details-info{display:flex;flex-direction:column;} .details-info .product-cat{margin-bottom:6px;} .details-info h3{margin-top:0;} .details-info .product-options{grid-template-columns:1fr;} .details-info .product-tags{justify-content:flex-start;} .product-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; } .product-actions .btn{flex:1 1 auto;text-align:center;} .btn-whatsapp-quote{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#25D366; color:#fff; border:none; border-radius:50px; padding:14px 28px; font-size:1rem; font-weight:600; cursor:pointer; text-decoration:none; transition:background 0.2s; } .btn-whatsapp-quote:hover{background:#1ebe5d;color:#fff;} @media (max-width:700px){ .details-grid{grid-template-columns:1fr;} } /* Add-to-cart confirmation toast */ .cart-toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--color-ink); color:#fff; padding:14px 26px; border-radius:50px; font-family:'Outfit', sans-serif; font-weight:500; font-size:0.9rem; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:2000; } .cart-toast.visible{ opacity:1; transform:translateX(-50%) translateY(0); } /* ========================================================================== ADD TO QUOTE SYSTEM (replaces traditional ecommerce cart) ========================================================================== */ .cart-list-btn{ display:inline-flex;align-items:center;gap:6px; background:transparent;border:1px solid var(--color-border); color:var(--color-navy);font-family:'Outfit',sans-serif;font-weight:500; font-size:0.9rem;padding:9px 16px;border-radius:50px;cursor:pointer; margin-right:12px;transition:border-color .2s ease,color .2s ease; } .cart-list-btn:hover{border-color:var(--color-primary);color:var(--color-primary);} @media (max-width:900px){ .cart-list-btn{margin-right:10px;padding:8px 10px;gap:0;} .cart-list-btn-label{display:none;} } .cart-count{ display:none;align-items:center;justify-content:center; min-width:20px;height:20px;padding:0 5px;border-radius:50%; background:var(--color-primary);color:#fff;font-size:0.72rem;font-weight:600; } .cart-drawer-overlay{ position:fixed;inset:0;background:rgba(10,37,64,0.45); opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:2100; } .cart-drawer-overlay.open{opacity:1;pointer-events:auto;} .cart-drawer{ position:fixed;top:0;right:0;height:100vh;width:380px;max-width:90vw; background:var(--color-surface);box-shadow:var(--shadow-md);z-index:2200; transform:translateX(100%);transition:transform .35s ease; display:flex;flex-direction:column; } .cart-drawer.open{transform:translateX(0);} .cart-drawer-header{ display:flex;align-items:center;justify-content:space-between; padding:20px 24px;border-bottom:1px solid var(--color-border); } .cart-drawer-header h3{margin:0;color:var(--color-navy);} .cart-drawer-close{ background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer; color:var(--color-muted); } .cart-drawer-list{flex:1;overflow-y:auto;padding:16px 24px;} .cart-drawer-empty{color:var(--color-muted);font-size:0.92rem;} .cart-drawer-item{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; padding:12px 0;border-bottom:1px solid var(--color-border); } .cart-drawer-item-info{display:flex;flex-direction:column;gap:4px;font-size:0.86rem;color:var(--color-text);} .cart-drawer-item-info strong{color:var(--color-navy);font-family:'Outfit',sans-serif;} .cart-drawer-item-meta{color:var(--color-muted);font-size:0.78rem;} .cart-drawer-item-details{display:flex;gap:12px;align-items:center;margin-top:2px;} .cart-drawer-item-qty{font-weight:600;color:var(--color-text);} .cart-drawer-item-price{font-weight:600;color:var(--color-primary);} .cart-drawer-remove{ background:none;border:none;color:var(--color-muted);font-size:1.3rem; cursor:pointer;line-height:1;padding:0 4px; } .cart-drawer-remove:hover{color:#d33;} .cart-drawer-footer{ padding:18px 24px;border-top:1px solid var(--color-border); display:flex;flex-direction:column;gap:10px; } @media (max-width:480px){ .cart-drawer{width:100%;max-width:100%;} .cart-drawer-header{padding:16px 20px;} .cart-drawer-list{padding:12px 20px;} .cart-drawer-footer{padding:16px 20px;} .cart-drawer-item-details{flex-direction:column;gap:4px;align-items:flex-start;} } /* ========================================================================== HOMEPAGE ADDITIONS — Catalog Download / Certifications ========================================================================== */ .catalog-download-box{ display:flex;align-items:center;justify-content:space-between;gap:32px; flex-wrap:wrap;background:var(--color-ink);color:#fff; padding:48px;border-radius:var(--radius); } .catalog-download-box .section-title{color:#fff;margin-bottom:10px;} .catalog-download-box p{color:rgba(255,255,255,0.8);margin-bottom:0;max-width:560px;} .catalog-download-text{flex:1;min-width:260px;} .catalog-download-actions{display:flex;gap:12px;flex-wrap:wrap;} .catalog-modal-overlay{ position:fixed;inset:0;z-index:3000; background:rgba(3,21,48,0.7); display:flex;align-items:center;justify-content:center; padding:24px; } .catalog-modal{ width:100%;max-width:900px;height:90vh; background:var(--color-surface); border-radius:var(--radius); box-shadow:var(--shadow-md); display:flex;flex-direction:column; overflow:hidden; } .catalog-modal-header{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 20px; border-bottom:1px solid var(--color-border); } .catalog-modal-header h3{margin:0;font-size:1.1rem;color:var(--color-navy);} .catalog-modal-actions{display:flex;align-items:center;gap:10px;} .catalog-modal-close{ background:none;border:none;font-size:1.6rem;line-height:1; color:var(--color-muted);cursor:pointer;padding:2px 6px; transition:color .2s ease; } .catalog-modal-close:hover{color:var(--color-primary);} .catalog-modal-body{flex:1;background:var(--color-bg-alt);} .catalog-modal-body iframe{width:100%;height:100%;border:none;} @media (max-width:700px){ .catalog-modal-overlay{padding:10px;} .catalog-modal{height:94vh;} .catalog-modal-header h3{font-size:0.95rem;} } .cert-badges{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px;margin-top:32px; } .cert-badge{ background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius); padding:24px;text-align:center;box-shadow:var(--shadow-sm); } .cert-badge-code{ display:block;font-family:'Outfit',sans-serif;font-weight:700; font-size:1.4rem;color:var(--color-primary);margin-bottom:6px; } .cert-badge-label{display:block;font-size:0.85rem;color:var(--color-muted);} /* ========================================================================== SHOP SEARCH BAR ========================================================================== */ .shop-search-wrap{ display:flex;align-items:center;gap:10px;max-width:480px;margin:0 auto 28px; background:var(--color-surface);border:1px solid var(--color-border);border-radius:50px; padding:6px 6px 6px 18px;box-shadow:var(--shadow-sm); } .shop-search-wrap svg{flex-shrink:0;color:var(--color-muted);} #shopSearchInput{ flex:1;border:none;outline:none;font-family:'Inter',sans-serif; font-size:0.95rem;padding:8px 0;background:transparent;color:var(--color-navy); } #shopSearchClear{ border:none;background:var(--color-bg-alt);color:var(--color-muted); border-radius:50%;width:26px;height:26px;cursor:pointer;display:none; align-items:center;justify-content:center;flex-shrink:0; } .shop-no-results{text-align:center;color:var(--color-muted);padding:40px 0;display:none;} /* ========================================================================== PRODUCT ATTRIBUTE TABLE (product-detail page) ========================================================================== */ .attribute-table{width:100%;border-collapse:collapse;margin:18px 0 8px;} .attribute-table tr{border-bottom:1px solid var(--color-border);} .attribute-table td{padding:9px 6px;font-size:0.9rem;} .attribute-table td:first-child{color:var(--color-muted);width:46%;} .attribute-table td:last-child{color:var(--color-navy);font-weight:500;} .pd-content-block{margin-top:28px;} .pd-content-block h3{font-size:1.05rem;margin-bottom:10px;color:var(--color-navy);} .pd-content-block ul{margin:0 0 16px 20px;color:var(--color-text);} .pd-content-block li{margin-bottom:6px;} .related-products-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:28px;margin-top:16px; } .related-products-grid .product-card{ min-height:460px; height:auto; } .related-products-grid .product-thumb{ height:180px; } @media (max-width:1024px){ .related-products-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .related-products-grid{grid-template-columns:1fr;} } /* ========================================================================== CART PAGE (cart.html) ========================================================================== */ .cart-page-grid{ display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start; } @media (max-width:900px){ .cart-page-grid{grid-template-columns:1fr;} .checkout-box{position:static;top:auto;} } @media (max-width:640px){ .cart-table th{font-size:0.75rem;padding:10px 12px;} .cart-table td{font-size:0.85rem;padding:12px 10px;} .cart-qty-input{width:45px;padding:4px 2px;font-size:0.85rem;} .cart-qty-btn{width:24px;height:24px;font-size:0.9rem;} .cart-item-name{font-size:0.9rem;} .cart-item-meta{font-size:0.75rem;} .checkout-box{padding:20px;} .checkout-box h3{font-size:1.1rem;} .whatsapp-checkout-btn{padding:12px 16px;font-size:0.9rem;} } .cart-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} .cart-table{ width:100%;border-collapse:collapse;background:var(--color-surface); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); min-width:560px; } .cart-table th{ text-align:left;padding:14px 16px;background:var(--color-bg-alt); font-family:'Outfit',sans-serif;font-size:0.85rem;color:var(--color-muted); text-transform:uppercase;letter-spacing:0.03em; } .cart-table td{ padding:16px;border-top:1px solid var(--color-border);vertical-align:middle; font-size:0.92rem; } .cart-table .cart-item-name{ font-family:'Outfit',sans-serif;font-weight:600;color:var(--color-navy); } .cart-table .cart-item-meta{display:block;font-size:0.8rem;color:var(--color-muted);margin-top:2px;} .cart-qty-input{ width:52px;padding:6px 4px;border:1px solid var(--color-border); border-radius:6px;text-align:center;font-family:'Inter',sans-serif; background:var(--color-surface);color:var(--color-navy); -moz-appearance:textfield; } .cart-qty-controls{ display:inline-flex;align-items:center;gap:6px; } .cart-qty-btn{ width:28px;height:28px;border-radius:999px;border:1px solid var(--color-border); background:var(--color-bg-alt);color:var(--color-navy);font-size:1rem;line-height:1; display:inline-flex;align-items:center;justify-content:center;cursor:pointer; transition:all .2s ease;flex-shrink:0; } .cart-qty-btn:hover{border-color:var(--color-primary);color:var(--color-primary);} .cart-remove-btn{ background:none;border:none;color:var(--color-muted);font-size:1.3rem; cursor:pointer;line-height:1; } .cart-remove-btn:hover{color:#d33;} .cart-empty-state{ text-align:center;padding:60px 20px;background:var(--color-surface);border-radius:var(--radius); box-shadow:var(--shadow-sm); } .checkout-box{ background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow-sm); padding:28px;position:sticky;top:100px; } .checkout-box h3{margin:0 0 6px;color:var(--color-navy);} .checkout-subtotal-row{ display:flex;justify-content:space-between;align-items:center; padding:14px 0;border-top:1px solid var(--color-border); margin-top:14px;font-family:'Outfit',sans-serif;font-weight:600; color:var(--color-navy);font-size:1.1rem; } .checkout-box label{ display:block;margin:14px 0 6px;font-size:0.85rem;font-weight:500; color:var(--color-navy);font-family:'Outfit',sans-serif; } .checkout-box input,.checkout-box select,.checkout-box textarea{ width:100%;padding:10px 14px;border:1px solid var(--color-border); border-radius:8px;font-family:'Inter',sans-serif;font-size:0.92rem; } .whatsapp-checkout-btn{ width:100%;margin-top:18px;display:flex;align-items:center;justify-content:center; gap:10px;background:#2563c7;color:#fff;border:none;border-radius:50px; padding:15px 20px;font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem; cursor:pointer;text-decoration:none;transition:background .2s ease,transform .15s ease; box-shadow:none; } .whatsapp-checkout-btn:hover{background:#1a4fb0;transform:translateY(-1px);} .whatsapp-checkout-btn svg{flex-shrink:0;} .checkout-note{font-size:0.78rem;color:var(--color-muted);text-align:center;margin-top:10px;} .checkout-box .field-error{color:#d33;font-size:0.78rem;margin-top:4px;display:none;} /* Shop card dual actions (View Details + Add to Cart) */ .card-actions{ display:flex;gap:8px;margin-top:10px;flex-wrap:wrap; } .card-actions .btn{flex:1;text-align:center;white-space:nowrap;} /* ========================================================================== QUANTITY (order quantity) UI ========================================================================== */ .quantity-badge{ display:inline-flex;align-items:center;gap:5px;font-size:0.72rem;font-weight:700; letter-spacing:.02em;color:var(--color-primary);text-transform:uppercase; background:rgba(8,106,254,0.08);border:1px solid rgba(8,106,254,0.18); padding:4px 12px;border-radius:20px;margin:4px 0 8px; } .quantity-badge::before{content:"\25CF";font-size:0.55rem;color:var(--color-primary);} .quantity-row{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0; } .quantity-row label{font-size:0.85rem;font-weight:500;color:var(--color-navy);font-family:'Outfit',sans-serif;} .qty-input{ width:90px;padding:8px 10px;border:1px solid var(--color-border);border-radius:8px; font-family:'Inter',sans-serif;font-size:0.95rem;text-align:center; } .quantity-note{font-size:0.78rem;color:var(--color-muted);} .qty-input.qty-input-error{border-color:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,0.12);} .quantity-error-msg{ display:none;align-items:center;gap:6px; font-size:0.78rem;font-weight:500;color:#d92d20; width:100%;margin-top:-4px; } .quantity-error-msg.visible{display:flex;} .quantity-error-msg::before{content:"\26A0";font-size:0.85rem;line-height:1;} .price-per-unit-note{font-size:0.8rem;color:var(--color-muted);font-weight:400;} .price-total-live{font-size:0.95rem;color:var(--color-navy);font-weight:600;margin-top:2px;} .price-note-holes{ margin-top:8px; padding:10px 14px; background:rgba(8,106,254,0.06); border-left:3px solid var(--color-primary); border-radius:4px; font-size:0.82rem; color:var(--color-text); font-style:italic; } /* ========================================================= CATEGORY / SUB-CATEGORY OVERVIEW TABLE (Shop page) ========================================================= */ .category-overview-section{padding-top:32px;padding-bottom:0;} .category-table{ width:100%; border-collapse:collapse; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.06)); } .category-table thead th{ text-align:left; font-family:var(--font-heading); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--color-ink); padding:12px 20px; } .category-table tbody td{ padding:16px 20px; border-top:1px solid var(--color-border); font-size:0.95rem; color:var(--color-navy); vertical-align:middle; } .category-table-main{font-weight:700;font-family:var(--font-heading);} .subcat-pill{ display:inline-block; font-size:0.78rem; font-weight:600; color:var(--color-primary); background:rgba(8,106,254,0.08); border:1px solid rgba(8,106,254,0.18); padding:4px 12px; border-radius:20px; margin:2px 6px 2px 0; } @media (max-width:700px){ .category-table thead{display:none;} .category-table, .category-table tbody, .category-table tr, .category-table td{display:block;width:100%;} .category-table tbody td{border-top:none;padding:6px 4px;} .category-table tbody tr{padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:0;} } /* Separate Screws / Plates sub-category cards */ .subcategory-cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:16px; } .subcategory-card{ display:flex; align-items:center; gap:16px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:20px 22px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .subcategory-card:hover{ border-color:var(--color-primary); box-shadow:0 8px 20px rgba(8,106,254,0.12); transform:translateY(-2px); } .subcategory-card-icon{ flex-shrink:0; width:52px;height:52px; display:flex;align-items:center;justify-content:center; border-radius:50%; background:rgba(8,106,254,0.08); color:var(--color-primary); } .subcategory-card-body{flex:1;min-width:0;} .subcategory-card-body h3{ font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--color-navy); margin:0 0 4px; } .subcategory-card-body p{ font-size:0.85rem; color:var(--color-muted); margin:0; line-height:1.4; } .subcategory-card-count{ flex-shrink:0; font-size:0.78rem; font-weight:700; color:var(--color-primary); background:rgba(8,106,254,0.08); border:1px solid rgba(8,106,254,0.18); padding:4px 12px; border-radius:20px; white-space:nowrap; } @media (max-width:700px){ .subcategory-cards{grid-template-columns:1fr;} .subcategory-card{flex-wrap:wrap;} .subcategory-card-count{margin-left:68px;} } /* Fourth tier: individual screw/plate sub-type cards (Locking Screws, Cortical Screws, etc.) */ .subtype-group{margin-top:22px;} .subtype-group-title{ font-family:var(--font-heading); font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); margin:0 0 10px; } .subtype-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; } .subtype-card{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:12px 14px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .subtype-card:hover{ border-color:var(--color-primary); box-shadow:0 4px 12px rgba(8,106,254,0.1); transform:translateY(-1px); } .subtype-card-label{ font-size:0.88rem; font-weight:600; color:var(--color-navy); } .subtype-card-count{ flex-shrink:0; font-size:0.72rem; font-weight:700; color:var(--color-primary); background:rgba(8,106,254,0.08); border:1px solid rgba(8,106,254,0.18); min-width:22px; text-align:center; padding:2px 8px; border-radius:20px; } @media (max-width:700px){ .subtype-cards{grid-template-columns:repeat(2, 1fr);} } /* ========================================================================== HOMEPAGE ADDITIONS — Stats Bar ========================================================================== */ .stats-bar{ background:var(--color-ink); padding:0; } .stats-bar-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .stat-item{ display:flex; align-items:center; gap:16px; padding:36px 24px; border-right:1px solid rgba(255,255,255,0.12); } .stat-item:last-child{border-right:none;} .stat-icon{ flex-shrink:0; width:48px;height:48px; display:flex;align-items:center;justify-content:center; background:rgba(8,106,254,0.15); border-radius:50%; color:var(--color-primary); } .stat-icon svg{width:24px;height:24px;} .stat-number{ font-family:'Outfit',sans-serif; font-weight:700; font-size:1.9rem; color:#fff; line-height:1.1; margin-bottom:2px; } .stat-label{ font-size:0.82rem; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.04em; } @media (max-width:900px){ .stats-bar-grid{grid-template-columns:repeat(2,1fr);} .stat-item{border-bottom:1px solid rgba(255,255,255,0.12);} .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,0.12);} .stat-item:nth-last-child(-n+2){border-bottom:none;} } @media (max-width:520px){ .stats-bar-grid{grid-template-columns:1fr;} .stat-item{border-right:none !important;} .stat-item:last-child{border-bottom:none;} } /* ========================================================================== HOMEPAGE ADDITIONS — Certification Badge Icon ========================================================================== */ .cert-badge{ position:relative;padding-top:30px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .cert-badge:hover{ transform:translateY(-6px); box-shadow:0 14px 28px rgba(8,106,254,0.14); border-color:var(--color-primary); } .cert-badge-icon{transition:transform .25s ease;} .cert-badge:hover .cert-badge-icon{transform:scale(1.12);} .cert-badge-icon{ width:40px;height:40px; margin:0 auto 12px; display:flex;align-items:center;justify-content:center; background:rgba(8,106,254,0.1); border-radius:50%; color:var(--color-primary); } .cert-badge-icon svg{width:20px;height:20px;} /* ========================================================================== HOMEPAGE ADDITIONS — Partners Marquee ========================================================================== */ .partners-section{ background:var(--color-primary); padding:56px 0; overflow:hidden; } .partners-heading{ text-align:center; margin-bottom:32px; } .partners-eyebrow{ display:block; font-size:0.8rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.8); margin-bottom:8px; } .partners-heading h2{color:#fff;margin-bottom:0;} .partners-marquee{ position:relative; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .partners-track{ display:flex; align-items:center; gap:48px; width:max-content; animation:partners-scroll 30s linear infinite; padding:0 24px; } .partners-marquee:hover .partners-track{animation-play-state:paused;} .partner-logo{ flex-shrink:0; display:flex; align-items:center; justify-content:center; height:70px; padding:0 32px; border:1px solid rgba(255,255,255,0.25); border-radius:var(--radius); font-family:'Outfit',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:0.01em; color:rgba(255,255,255,0.9); white-space:nowrap; transition:border-color .2s ease, color .2s ease; } .partner-logo:hover{ border-color:#fff; color:#fff; } .partner-logo-img{ flex-shrink:0; height:72px; width:auto; max-width:200px; object-fit:contain; opacity:0.85; transition:opacity .2s ease, transform .2s ease; filter:grayscale(20%); } .partner-logo-img:hover{ opacity:1; transform:scale(1.05); filter:grayscale(0%); } .partner-logo-gpc{ height:44px; max-width:1000px; } @keyframes partners-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @media (max-width:600px){ .partner-logo{font-size:1.05rem;} .partners-track{gap:40px;} } /* ========================================================================== PRODUCT DETAIL — Reviews Section ========================================================================== */ .reviews-container{ display:flex; flex-direction:column; gap:24px; margin-top:16px; } .review-item{ background:var(--color-bg-alt); border:1px solid rgba(0,0,0,0.08); border-radius:var(--radius); padding:20px; transition:border-color .2s ease, box-shadow .2s ease; } .review-item:hover{ border-color:var(--color-primary); box-shadow:0 4px 12px rgba(0,0,0,0.08); } .review-header{ display:flex; align-items:flex-start; gap:16px; margin-bottom:12px; flex-wrap:wrap; } .review-rating{ font-size:1.1rem; color:#FFB400; letter-spacing:2px; } .review-author{ font-weight:600; color:var(--color-navy); font-size:0.95rem; } .review-date{ font-size:0.85rem; color:var(--color-muted); margin-left:auto; } .review-text{ color:var(--color-text); line-height:1.6; font-size:0.95rem; margin:0; } @media (max-width:600px){ .review-header{ flex-direction:column; gap:8px; } .review-date{ margin-left:0; } } /* ========================================================================== HOMEPAGE — Customer Reviews Section ========================================================================== */ .reviews-section .home-reviews-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px; } .reviews-section .review-item{ background:var(--color-surface); box-shadow:var(--shadow-sm); } @media (max-width:768px){ .reviews-section .home-reviews-grid{ grid-template-columns:1fr; } }