/* SE Solution — Premium UI system Mobile-first, accessible, fast-loading. */ :root{ /* Brand palette (logo green + wave neutrals + gold) */ --primary-950:#0B1220; /* near-black slate */ --primary-900:#111827; /* slate */ --primary-700:#334155; /* steel */ /* "Electric" becomes brand green across the UI */ --electric-600:#1F6B3A; /* logo green */ --electric-700:#16522C; /* deeper green */ /* Wave gold highlight */ --safety-400:#D4A017; /* warm gold */ /* Secondary accent (kept subtle) */ --accent-500:#C77A12; /* bronze/gold-brown */ --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --text:#111827; --text-muted:#64748B; --text-invert:#FFFFFF; --border:#E2E8F0; --border-strong:#CBD5E1; --success:#16A34A; --warning:#F59E0B; --error:#DC2626; --focus:#60A5FA; /* Strategy palette aliases (aligned to photo) */ --ink:#0B1220; --steel:#1F2937; --mist:#E6E9EE; --paper:#F6F7F9; --accent:#D4A017; --accent-hover:#B88412; --line:#CBD5E1; --radius-btn:12px; --radius-card:16px; --radius-chip:999px; --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow-md:0 10px 24px rgba(15,23,42,.10); --container:1200px; --reading:720px; --space-1:8px; --space-2:12px; --space-3:16px; --space-4:20px; --space-5:28px; --space-6:36px; --space-7:48px; --space-8:72px; --space-9:96px; --header-h:72px; } /* Fonts: Google Fonts recommended - Outfit (headings) - Source Sans 3 (body) - IBM Plex Mono (specs) Load them in . */ *{box-sizing:border-box} html{color-scheme:light} body{ margin:0; background:var(--bg); color:var(--text); font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px; line-height:1.6; } img{max-width:100%;height:auto;display:block} a{color:inherit} button,input,select,textarea{font:inherit} .container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)} .reading{max-width:var(--reading)} .sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* Focus */ :focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(96,165,250,.35); border-radius:10px; } /* Header */ .topbar{ background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.92)); color:rgba(255,255,255,.92); font-size:13px; } .topbar .container{ display:flex; gap:var(--space-3); align-items:center; justify-content:space-between; padding:10px var(--space-4); } .topbar a{color:rgba(255,255,255,.92);text-decoration:none} .topbar a:hover{text-decoration:underline} @media (max-width: 719px){ .topbar .container{ flex-wrap:wrap; justify-content:center; text-align:center; row-gap:6px; } .topbar .container > div{ flex:1 1 100%; } } .site-header{ position:sticky;top:0;z-index:50; background:rgba(248,250,252,.85); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid rgba(226,232,240,.85); } .site-header.is-scrolled{ box-shadow:var(--shadow-sm); background:rgba(248,250,252,.95); } .header-row{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); } .brand{ display:flex;align-items:center;gap:10px; text-decoration:none; } .brand-logo{ display:block; height:52px; width:auto; max-width:min(110px, 28vw); } .cart-btn{position:relative} .cart-badge{ position:absolute;top:-4px;right:-4px; min-width:18px;height:18px;padding:0 5px; border-radius:999px; background:var(--electric-600); color:#fff; font-size:11px;font-weight:800; line-height:18px;text-align:center; } .cart-add-form{display:contents;margin:0} .brand-name{ font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1.1; } .brand-sub{ display:block; font-size:12px;color:var(--text-muted); font-weight:600; letter-spacing:0.01em; margin-top:2px; } nav.primary-nav{display:none} nav.primary-nav ul{ list-style:none;margin:0;padding:0; display:flex;gap:10px;align-items:center; } nav.primary-nav a{ text-decoration:none; padding:10px 10px; border-radius:10px; color:var(--primary-950); font-weight:650; } nav.primary-nav a:hover{background:var(--surface-2)} .header-actions{ display:flex;align-items:center;gap:10px; } .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:12px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; } .icon-btn:hover{border-color:var(--border-strong);transform:translateY(-1px)} .icon-btn svg{width:18px;height:18px} .btn{ display:inline-flex;align-items:center;justify-content:center; gap:10px; height:44px; padding:12px 16px; border-radius:var(--radius-btn); border:1px solid transparent; text-decoration:none; font-weight:650; letter-spacing:0.01em; cursor:pointer; user-select:none; white-space:nowrap; } .btn-primary{background:var(--electric-600);color:var(--text-invert);box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--electric-700)} .btn-secondary{background:var(--primary-950);color:var(--text-invert)} .btn-secondary:hover{background:var(--primary-900)} .btn-outline{background:transparent;border-color:var(--border-strong);color:var(--primary-950)} .btn-outline:hover{background:var(--surface-2)} .btn-whatsapp{background:var(--success);color:var(--text-invert)} .btn-whatsapp:hover{background:#15803D} .btn-emergency{background:var(--error);color:var(--text-invert)} .btn-emergency:hover{background:#B91C1C} .btn-sm{height:40px;padding:10px 14px;border-radius:12px} .pill{ display:inline-flex;align-items:center;gap:8px; padding:8px 12px;border-radius:var(--radius-chip); background:var(--surface-2);border:1px solid var(--border); color:var(--primary-900); font-size:13px;font-weight:650; } .pill .dot{width:8px;height:8px;border-radius:999px;background:var(--safety-400)} /* Mobile nav */ .mobile-toggle{display:inline-flex} .mobile-drawer{ position:fixed;inset:0;z-index:100; display:none; } .mobile-drawer[aria-hidden="false"]{display:block} .drawer-backdrop{ position:absolute;inset:0;background:rgba(15,23,42,.45); } .drawer-panel{ position:absolute;top:0;right:0;height:100%; width:min(92vw,420px); background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-md); padding:var(--space-4); overflow:auto; } .drawer-head{ display:flex;align-items:center;justify-content:space-between; gap:var(--space-3); padding-bottom:var(--space-3); border-bottom:1px solid var(--border); } .drawer-nav{padding:var(--space-3) 0} .drawer-nav details{border-bottom:1px solid var(--border)} .drawer-nav summary{ list-style:none;cursor:pointer; padding:14px 0; font-weight:750; color:var(--primary-950); } .drawer-nav summary::-webkit-details-marker{display:none} .drawer-nav a{ display:block; padding:10px 0; text-decoration:none; color:var(--primary-900); font-weight:650; } .drawer-nav a:hover{text-decoration:underline} .drawer-cta{display:flex;gap:10px;flex-wrap:wrap;padding-top:var(--space-3)} /* Sections */ section{padding:var(--space-7) 0} .section-title{ font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:800; letter-spacing:-0.02em; font-size:28px;line-height:1.2; margin:0 0 10px 0; } .section-sub{margin:0;color:var(--text-muted);max-width:68ch} /* Hero */ .hero{ padding:var(--space-8) 0 var(--space-7); background: radial-gradient(1200px 500px at 18% 8%, rgba(37,99,235,.14), rgba(248,250,252,0)), radial-gradient(900px 400px at 80% 22%, rgba(250,204,21,.10), rgba(248,250,252,0)); } .hero-grid{display:grid;gap:var(--space-6)} .hero h1{ font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:800; letter-spacing:-0.02em; font-size:34px;line-height:1.08; margin:0 0 12px 0; color:var(--primary-950); } .hero p.lead{ margin:0; color:var(--primary-700); font-size:18px; max-width:65ch; } .hero-actions{ display:flex;gap:12px;flex-wrap:wrap; margin-top:var(--space-4); } .trust-row{ display:flex;gap:10px;flex-wrap:wrap; margin-top:var(--space-4); } .hero-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); box-shadow:var(--shadow-sm); } .hero-card h2, .hero-card h3{ font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:18px;line-height:1.2; margin:0 0 10px 0; } .quick-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .quick-list a{ display:flex;align-items:center;justify-content:space-between; gap:10px; padding:12px 12px; border:1px solid var(--border); border-radius:14px; text-decoration:none; font-weight:700; color:var(--primary-950); } .quick-list a:hover{border-color:var(--border-strong);background:var(--surface-2)} /* Cards */ .grid{display:grid;gap:16px} .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; box-shadow:var(--shadow-sm); } .card:hover{border-color:var(--border-strong);transform:translateY(-2px)} .card h3{ font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:750; letter-spacing:-0.01em; margin:0 0 8px 0; font-size:18px;line-height:1.2; } .card p{margin:0;color:var(--text-muted)} .card .cta{ display:inline-flex;align-items:center;gap:10px; margin-top:12px; font-weight:750; color:var(--electric-600); text-decoration:none; } .card .cta:hover{text-decoration:underline} .chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} /* Split section */ .split{display:grid;gap:18px} .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:20px; box-shadow:var(--shadow-sm); } .panel h3{margin:0 0 8px 0} .panel ul{margin:10px 0 0 18px;color:var(--text-muted)} /* Forms */ form{margin-top:16px} .form-grid{display:grid;gap:12px} label{font-weight:700;color:var(--primary-950);display:block;margin-bottom:6px} input,select,textarea{ width:100%; padding:12px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); } textarea{min-height:120px;resize:vertical} .help{color:var(--text-muted);font-size:14px;margin-top:6px} .form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px} /* Accordion */ .accordion{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)} .accordion details{border-top:1px solid var(--border)} .accordion details:first-child{border-top:0} .accordion summary{ cursor:pointer; padding:16px 16px; font-weight:800; list-style:none; } .accordion summary::-webkit-details-marker{display:none} .accordion .answer{ padding:0 16px 16px 16px; color:var(--text-muted); } .accordion details[open]{background:var(--surface-2)} /* Footer */ footer.site-footer{ background:var(--primary-950); color:rgba(255,255,255,.90); padding:var(--space-8) 0 var(--space-6); margin-top:var(--space-8); } .footer-grid{display:grid;gap:20px} .footer-title{ font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:800; letter-spacing:-0.02em; margin:0 0 10px 0; } footer a{color:rgba(255,255,255,.88);text-decoration:none} footer a:hover{text-decoration:underline} .footer-links{list-style:none;margin:0;padding:0;display:grid;gap:10px} .fineprint{margin-top:18px;color:rgba(255,255,255,.65);font-size:13px;line-height:1.5} /* Sticky mobile bar */ .mobile-cta{ position:fixed;left:0;right:0;bottom:0;z-index:60; display:flex;gap:10px; padding:10px 12px; background:rgba(248,250,252,.92); backdrop-filter:saturate(1.4) blur(12px); border-top:1px solid rgba(226,232,240,.9); } .mobile-cta a{flex:1} .mobile-cta .btn{width:100%} .mobile-cta-spacer{height:80px} /* Floating WhatsApp */ .float-wa{ position:fixed;right:16px;bottom:92px;z-index:70; } .float-wa a{ display:inline-flex;align-items:center;gap:10px; background:var(--success);color:var(--text-invert); border-radius:999px; padding:12px 14px; text-decoration:none; box-shadow:var(--shadow-md); font-weight:800; } .float-wa a:hover{background:#15803D} .float-wa svg{width:18px;height:18px} /* Utilities */ .muted{color:var(--text-muted)} .kicker{ display:inline-flex;align-items:center;gap:10px; font-size:13px;font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--primary-700); } .kicker .bar{width:18px;height:2px;background:var(--safety-400);border-radius:999px} /* Responsive */ @media (min-width: 920px){ nav.primary-nav{display:block} .mobile-toggle{display:none} .hero-grid{grid-template-columns: 1.2fr .8fr;align-items:start} .hero h1{font-size:48px} section{padding:var(--space-8) 0} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} .split{grid-template-columns:repeat(2,1fr);align-items:start} .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr} .mobile-cta{display:none} .mobile-cta-spacer{display:none} .split--media{grid-template-columns:1fr 1.1fr;align-items:center} .split--media-reverse .media-block{order:2} .split--media-reverse > div:not(.media-block){order:1} .split--why{grid-template-columns:1.1fr .9fr;align-items:center} .process-steps{grid-template-columns:repeat(5,1fr)} .emergency-banner__inner{flex-direction:row;align-items:center;justify-content:space-between} } /* ---- Homepage ---- */ .hero--home{ position:relative; overflow:hidden; padding:var(--space-9) 0 calc(var(--space-8) + 56px); /* Optional photo layer later: add class hero--home-photo or set --hero-home-bg-image */ --hero-home-bg-image:none; } .hero--home.hero--home-photo{ --hero-home-bg-image:url('../projects/team-work/team-work-fleet-two-vans-outdoor-metro-detroit-mi-01.jpg'); } .hero--home .hero-backdrop{ background: linear-gradient(135deg, rgba(11,18,32,.9) 0%, rgba(22,82,44,.76) 48%, rgba(212,160,23,.2) 100%), var(--hero-home-bg-image) center/cover no-repeat; } .hero-backdrop{ position:absolute;inset:0;z-index:0; background: linear-gradient(135deg, rgba(11,18,32,.92) 0%, rgba(22,82,44,.72) 48%, rgba(212,160,23,.22) 100%), radial-gradient(900px 420px at 85% 20%, rgba(212,160,23,.14), transparent 60%); } .hero-oscope{ position:absolute; inset:auto 0 14% 0; width:100%; height:min(28vw, 160px); opacity:.85; pointer-events:none; } .hero-oscope__line{ fill:none; stroke-width:1.75; stroke-linecap:round; vector-effect:non-scaling-stroke; } .hero-oscope__line--1{ stroke:rgba(212,160,23,.38); animation:hero-oscope-drift 16s linear infinite; } .hero-oscope__line--2{ stroke:rgba(230,233,238,.22); stroke-width:1.35; animation:hero-oscope-drift 20s linear infinite reverse; } .hero-oscope__line--3{ stroke:rgba(31,107,58,.34); stroke-width:1.5; animation:hero-oscope-drift 24s linear infinite; } @keyframes hero-oscope-drift{ from{transform:translateX(0)} to{transform:translateX(-120px)} } .hero-wave-edge{ position:absolute; left:0;right:0;bottom:-1px; z-index:2; height:72px; line-height:0; pointer-events:none; } .hero-wave-edge svg{ display:block; width:100%; height:72px; } .hero-wave-edge path{fill:var(--bg)} @media (prefers-reduced-motion: reduce){ .hero-oscope__line{animation:none} } .hero-backdrop--brand{ background: linear-gradient(135deg, rgba(11,18,32,.9), rgba(22,82,44,.75)), url('../projects/team-work/team-work-fleet-two-vans-outdoor-metro-detroit-mi-01.jpg') center/cover no-repeat; } .hero--about{position:relative;overflow:hidden} .hero--about .container{position:relative;z-index:1} .hero--home .container{position:relative;z-index:1} .hero--home .hero-copy .kicker{color:rgba(255,255,255,.78)} .hero--home .hero-copy h1{color:#fff;font-size:36px} .hero--home .hero-copy p.lead{color:rgba(255,255,255,.94)} .hero--home .hero-copy .help{color:rgba(255,255,255,.9)} .hero--home .hero-copy .btn-outline{ border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.08); } .hero--home .hero-copy .btn-outline:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.85); } .hero--home .hero-copy .pill{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.95); } .hero-card--selector{ background:rgba(255,255,255,.97); box-shadow:var(--shadow-md); } .hero--home .hero-card .btn-outline{ border-color:var(--border-strong); color:var(--primary-950); background:transparent; } .hero--home .hero-card .btn-outline:hover{ background:var(--surface-2); border-color:var(--border-strong); color:var(--primary-950); } .section--alt{background:var(--surface-2)} .section-reveal{ opacity:1; transform:none; } @media (prefers-reduced-motion: no-preference){ html.js .section-reveal:not(.is-visible){ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; } html.js .section-reveal.is-visible{ opacity:1; transform:none; } } .path-card{ display:block; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s; } .path-card:hover{border-color:var(--border-strong);transform:translateY(-2px)} .path-card h3{ font-family:"Outfit",system-ui,sans-serif; font-weight:750;margin:10px 0 8px;font-size:18px;color:var(--primary-950); } .path-card p{margin:0;color:var(--text-muted);font-size:15px} .path-card__icon{opacity:.9} .path-card__cta{ display:inline-block;margin-top:12px; font-weight:750;color:var(--electric-600);font-size:14px; } .path-card--wide{ display:flex;gap:16px;align-items:flex-start; } .service-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; box-shadow:var(--shadow-sm); } .service-card--has-photo{padding-top:0;overflow:hidden} .service-card__icon{margin-bottom:10px;opacity:.85} .service-card__photo{ display:block; width:calc(100% + 36px); height:132px; margin:-18px -18px 14px; object-fit:cover; object-position:center; border-radius:var(--radius-card) var(--radius-card) 0 0; } .service-card h3{ font-family:"Outfit",system-ui,sans-serif; font-weight:750;margin:0 0 8px;font-size:17px; } .service-card p{margin:0 0 12px;color:var(--text-muted);font-size:15px} .service-card .cta{font-size:14px} .check-list{ list-style:none;margin:16px 0 0;padding:0; display:grid;gap:12px; } .check-list li{ padding-left:28px;position:relative;color:var(--primary-700); } .check-list li::before{ content:""; position:absolute;left:0;top:.45em; width:14px;height:14px;border-radius:4px; background:rgba(37,99,235,.12); border:2px solid var(--electric-600); } .bullet-list{ margin:14px 0 18px;padding-left:20px; color:var(--primary-700); } .bullet-list li{margin-bottom:6px} .visual-panel{ background:linear-gradient(160deg, var(--primary-950), var(--primary-900)); border-radius:var(--radius-card); padding:28px; color:#fff; box-shadow:var(--shadow-md); } .visual-panel__grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px; place-items:center; } .visual-panel__grid img{filter:brightness(0) invert(1);opacity:.85} .visual-panel__caption{ margin:18px 0 0;text-align:center; font-size:13px;font-weight:700;letter-spacing:.04em; color:rgba(255,255,255,.7);text-transform:uppercase; } .visual-panel--photo{padding:0;overflow:hidden} .visual-panel__photo{ display:block;width:100%;height:auto;max-height:280px;object-fit:cover; } .visual-panel--photo .visual-panel__caption{padding:14px 16px;margin:0} .emergency-banner{ background:linear-gradient(90deg, #991B1B, #DC2626); padding:var(--space-6) 0; } .emergency-banner__inner{ display:flex;flex-direction:column;gap:20px; } .emergency-banner__actions{display:flex;gap:12px;flex-wrap:wrap} .btn-outline--light{ border-color:rgba(255,255,255,.45); color:#fff; } .btn-outline--light:hover{background:rgba(255,255,255,.1)} .media-block{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:32px; display:grid;place-items:center; min-height:220px; box-shadow:var(--shadow-sm); } .media-block__img{max-width:200px;opacity:.9} .media-block__img--photo{max-width:100%;width:100%;border-radius:var(--radius-card);box-shadow:var(--shadow-md)} .media-block--split-photo{ padding:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-md); background:var(--steel); } .media-block--split-photo .media-block__photo{ display:block; width:100%; min-height:260px; max-height:360px; object-fit:cover; object-position:center; } .panel--feature-photo{padding-top:0;overflow:hidden} .panel--feature-photo .panel__photo{ display:block; width:calc(100% + 40px); height:120px; margin:-20px -20px 14px; object-fit:cover; object-position:center; border-radius:var(--radius-card) var(--radius-card) 0 0; } .panel--feature h3{margin:12px 0 8px;font-family:"Outfit",system-ui,sans-serif} .panel--feature img{opacity:.88} .shop-tile{ display:block;text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:16px; box-shadow:var(--shadow-sm); } .shop-tile:hover{border-color:var(--electric-600)} .shop-tile h3{ margin:0 0 6px;font-family:"Outfit",system-ui,sans-serif; font-size:16px;font-weight:750;color:var(--primary-950); } .shop-tile p{margin:0;font-size:14px;color:var(--text-muted)} .subsection-title{ font-family:"Outfit",system-ui,sans-serif; font-weight:750;font-size:20px;margin:28px 0 0; } .card--product h3{font-size:16px} .process-steps{ list-style:none;margin:20px 0 24px;padding:0; display:grid;gap:14px; } .process-steps li{ display:flex;gap:14px;align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:16px; } .process-steps__num{ flex-shrink:0; width:36px;height:36px;border-radius:10px; display:grid;place-items:center; background:var(--electric-600);color:#fff; font-weight:800;font-family:"Outfit",system-ui,sans-serif; } .process-steps p{margin:4px 0 0;color:var(--text-muted);font-size:15px} .project-teaser{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:20px; box-shadow:var(--shadow-sm); } .project-teaser h3{ font-family:"Outfit",system-ui,sans-serif; font-weight:750;margin:12px 0 8px;font-size:17px; } .project-teaser img{opacity:.88} .testimonial-card{ margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; box-shadow:var(--shadow-sm); } .testimonial-card p{ margin:0 0 12px; font-style:italic; color:var(--primary-900); line-height:1.5; } .testimonial-card footer{ font-size:13px;font-weight:700;color:var(--text-muted); } .panel--cta{ background:linear-gradient(135deg, rgba(37,99,235,.06), rgba(250,204,21,.06)); border-color:var(--border-strong); } /* ---- Services hub & detail ---- */ .hero--services{ background: radial-gradient(1000px 400px at 10% 0%, rgba(37,99,235,.12), transparent 55%), radial-gradient(800px 360px at 90% 20%, rgba(250,204,21,.08), transparent 50%); } .hero--service{ padding-bottom:var(--space-6); background: radial-gradient(900px 380px at 15% 10%, rgba(37,99,235,.10), transparent 55%), var(--bg); } .hero-grid--service{ display:grid;gap:var(--space-5);align-items:center; } .media-block--service{ min-height:180px; background:linear-gradient(160deg, var(--surface), var(--surface-2)); } .media-block--service-photo{ padding:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-md); background:var(--steel); } .media-block__photo{ display:block; width:100%; min-height:240px; max-height:420px; object-fit:cover; object-position:center; } .service-jump{ display:flex;gap:10px;flex-wrap:wrap; justify-content:center; } .service-jump a{ text-decoration:none; padding:10px 14px; border-radius:var(--radius-chip); border:1px solid var(--border); background:var(--surface); font-weight:700;font-size:14px; color:var(--primary-950); } .service-jump a:hover{ border-color:var(--electric-600); color:var(--electric-600); } .check-list--plain li{ padding-left:22px; color:var(--primary-700); } .check-list--plain li::before{ width:8px;height:8px;border-radius:999px; border:none; background:var(--electric-600); top:.55em; } @media (min-width: 920px){ .hero--home .hero-copy h1{font-size:48px} .hero-grid--service{grid-template-columns:1.15fr .85fr} } /* ---- About / Contact / Projects ---- */ .hero--page{ padding-bottom:var(--space-6); background: radial-gradient(900px 360px at 12% 0%, rgba(37,99,235,.10), transparent 55%), radial-gradient(700px 320px at 88% 15%, rgba(250,204,21,.07), transparent 50%), var(--bg); } .hero--projects{ background: radial-gradient(1000px 400px at 8% 0%, rgba(37,99,235,.11), transparent 55%), radial-gradient(760px 340px at 92% 18%, rgba(250,204,21,.08), transparent 50%), var(--bg); } .contact-facts{ display:grid;gap:14px; grid-template-columns:repeat(2,1fr); margin-top:8px; } .contact-facts__label{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--text-muted);margin-bottom:4px; } .contact-facts__value{ font-weight:650;color:var(--primary-950);line-height:1.4; } .contact-cards .contact-card{ display:flex;flex-direction:column;gap:6px; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .15s ease; } .contact-card:hover{ border-color:var(--electric-600); box-shadow:var(--shadow-md); } .contact-card__label{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--text-muted); } .contact-card__value{ font-family:"Outfit",system-ui,sans-serif; font-weight:750;font-size:17px;color:var(--primary-950); } .contact-card__hint{ font-size:13px;color:var(--text-muted);margin-top:auto; } .panel--urgent{ border-color:rgba(220,38,38,.25); background:linear-gradient(135deg, rgba(220,38,38,.04), var(--surface)); } .filter-bar{ display:flex;gap:10px;flex-wrap:wrap;justify-content:center; } .filter-chip{ appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--primary-950); font:inherit;font-weight:700;font-size:14px; padding:10px 16px;border-radius:var(--radius-chip); cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; } .filter-chip:hover{border-color:var(--electric-600)} .filter-chip.is-active{ background:var(--electric-600);color:#fff;border-color:var(--electric-600); } .project-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .project-card:hover{ border-color:var(--electric-600); box-shadow:var(--shadow-md); transform:translateY(-2px); } .project-card__link{ display:flex;flex-direction:column;height:100%; text-decoration:none;color:inherit; } .project-card__media{ display:grid;place-items:center; padding:22px 20px 8px; background:linear-gradient(160deg, var(--surface-2), var(--surface)); overflow:hidden; } .project-card__media img{opacity:.88} .project-card__photo{ width:100%;height:180px;object-fit:cover;opacity:1;border-radius:12px; } .project-teaser__photo{ width:100%;max-width:100%;height:120px;object-fit:cover;border-radius:12px; } .project-card__body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column} .project-card__meta{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px; } .pill--sm{font-size:12px;padding:6px 10px} .project-card__city{font-size:13px;font-weight:650;color:var(--text-muted)} .project-card__title{ margin:0 0 8px; font-family:"Outfit",system-ui,sans-serif; font-size:17px;font-weight:750;line-height:1.3; color:var(--primary-950); } .project-card__summary{ margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--text-muted);flex:1; } .project-card__client{ font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:10px; } .project-quote{max-width:720px;margin:0 auto} @media (max-width: 719px){ .contact-facts{grid-template-columns:1fr} .contact-cards.grid.cols-4{grid-template-columns:1fr} } /* ---- Shop (PLP / PDP) ---- */ .breadcrumbs ol{ display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0; font-size:13px;font-weight:650;color:var(--text-muted); } .breadcrumbs li:not(:last-child)::after{content:"/";margin-left:8px;opacity:.5} .breadcrumbs a{color:var(--electric-600);text-decoration:none} .breadcrumbs a:hover{text-decoration:underline} .nav-item{position:relative} .nav-item--has-menu:hover .nav-mega, .nav-item--has-menu:focus-within .nav-mega{display:grid} .nav-mega{ display:none; position:absolute;top:calc(100% + 8px);left:0;z-index:30; min-width:220px;padding:10px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-card);box-shadow:var(--shadow-md); grid-template-columns:1fr;gap:4px; } .nav-mega a{ display:block;padding:8px 10px;border-radius:10px; text-decoration:none;font-weight:650;font-size:14px;color:var(--primary-950); } .nav-mega a:hover{background:var(--surface-2)} .shop-search__form{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .shop-search__form input{flex:1;min-width:200px} .category-card{ display:flex;flex-direction:column;gap:8px; text-decoration:none;color:inherit; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-card);padding:18px; box-shadow:var(--shadow-sm);transition:border-color .15s ease, transform .15s ease; } .category-card:hover{border-color:var(--electric-600);transform:translateY(-2px)} .category-card__img{width:64px;height:64px;object-fit:contain} .category-card h3{margin:0;font-family:"Outfit",system-ui,sans-serif;font-size:17px} .category-card p{margin:0;color:var(--text-muted);font-size:14px;flex:1} .product-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-card);overflow:hidden; box-shadow:var(--shadow-sm);display:flex;flex-direction:column; } .product-card__media{ display:grid;place-items:center;padding:18px; background:linear-gradient(160deg,var(--surface-2),var(--surface)); text-decoration:none; } .product-card__media img{max-height:88px;width:auto;object-fit:contain} .product-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1} .product-card__body h3{margin:0;font-size:16px;line-height:1.3} .product-card__body h3 a{color:var(--primary-950);text-decoration:none} .product-card__body h3 a:hover{color:var(--electric-600)} .product-card__brand{margin:0;font-size:13px;color:var(--text-muted)} .product-card__price{margin:4px 0 8px;font-weight:800;font-size:18px;color:var(--primary-950)} .product-card__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto} .stock-badge{ display:inline-flex;align-items:center; font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; padding:4px 8px;border-radius:999px;width:fit-content; } .stock-badge--in{background:rgba(22,163,74,.12);color:var(--success)} .stock-badge--low{background:rgba(245,158,11,.15);color:#B45309} .stock-badge--out{background:rgba(220,38,38,.1);color:var(--error)} .pdp-grid{display:grid;gap:24px} .pdp-gallery{display:flex;flex-direction:column;gap:12px} .pdp-gallery__stage{ position:relative; background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; } .pdp-gallery__main{ background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--radius-card) - 4px); padding:24px; display:grid;place-items:center; min-height:320px; position:relative; } .pdp-gallery__main img{ max-width:100%; max-height:360px; width:auto; height:auto; object-fit:contain; transition:opacity .2s ease; } .pdp-gallery__badge{ position:absolute;top:12px;left:12px; font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; padding:5px 10px;border-radius:999px; background:rgba(15,23,42,.72);color:#fff; } .pdp-gallery__nav{ position:absolute;top:50%;transform:translateY(-50%); width:40px;height:40px;border-radius:999px;border:1px solid var(--border); background:rgba(255,255,255,.95);color:var(--primary-950); font-size:24px;line-height:1;cursor:pointer; box-shadow:var(--shadow-sm);z-index:2; } .pdp-gallery__nav:hover{background:#fff;border-color:var(--electric-600)} .pdp-gallery__nav--prev{left:8px} .pdp-gallery__nav--next{right:8px} .pdp-gallery__counter{ position:absolute;bottom:10px;right:12px; font-size:12px;font-weight:700;color:var(--text-muted); background:rgba(255,255,255,.9);padding:4px 8px;border-radius:999px; } .pdp-gallery__thumbs{ display:flex;gap:10px;flex-wrap:wrap; overflow-x:auto;padding-bottom:4px; } .pdp-gallery__thumb{ flex:0 0 auto; width:76px;height:76px;padding:6px; border:2px solid var(--border);border-radius:12px; background:var(--surface);cursor:pointer; } .pdp-gallery__thumb.is-active{border-color:var(--electric-600);box-shadow:0 0 0 1px var(--electric-600)} .pdp-gallery__thumb img{width:100%;height:100%;object-fit:contain} .pdp-gallery__note{margin:0} .pdp-lead{margin-top:0} .pdp-specs{ width:100%;margin:16px 0 0;border-collapse:collapse;font-size:14px; } .pdp-specs th,.pdp-specs td{ padding:10px 0;border-bottom:1px solid var(--border);text-align:left;vertical-align:top; } .pdp-specs th{width:38%;color:var(--text-muted);font-weight:700} .pdp-specs a{color:var(--electric-600)} .pdp-description__body{color:var(--text-muted);line-height:1.7} .pdp-description__body p:first-child{margin-top:0} .pdp-description__body ul,.pdp-description__body ol{padding-left:1.2rem} .pdp-title{margin:8px 0;font-family:"Outfit",system-ui,sans-serif;font-size:28px;line-height:1.15} .pdp-meta{margin:0 0 8px} .pdp-price{margin:0 0 12px;font-weight:900;font-size:28px;color:var(--primary-950)} .pdp-price__compare{font-size:16px;font-weight:600;color:var(--text-muted);text-decoration:line-through;margin-left:8px} .pdp-actions{align-items:center} .pdp-sticky{ display:none; position:fixed;left:0;right:0;bottom:64px;z-index:25; background:rgba(255,255,255,.96);border-top:1px solid var(--border); backdrop-filter:blur(10px);padding:10px 0; } .pdp-sticky__inner{display:flex;align-items:center;justify-content:space-between;gap:12px} .pdp-sticky__price{font-weight:800;font-size:18px} @media (min-width: 920px){ .pdp-grid{grid-template-columns:1fr 1fr;align-items:start} .nav-mega{display:none} .nav-item--has-menu:hover .nav-mega{display:grid} } @media (max-width: 919px){ .pdp-sticky{display:block} .product-grid{grid-template-columns:repeat(2,1fr)} .category-grid{grid-template-columns:repeat(2,1fr)} }