*/ .section-light{ --surface:#ffffff; --surface2:#f1f5f9; --text:#0f172a; --muted:#475569; --muted2:#64748b; --border:#e2e8f0; --border2:rgba(15,23,42,.08); --icon-bg: #eff6ff; --icon-border: rgba(15,23,42,.08); color: var(--text); } a{color:inherit; text-decoration:none} a:hover{color:inherit} img{max-width:100%; height:auto; display:block} .container{ width:100%; max-width:var(--max); margin:0 auto; padding: 0 var(--pad); } .skip-link{ position:absolute; left:-999px; top:10px; background:#fff; color:#000; padding:10px 12px; border-radius:12px; z-index:9999; border:1px solid var(--icon-border); } .skip-link:focus{left:12px} /* NAV */ .nav{ position:sticky; top:0; z-index:2000; background: var(--nav-bg); border-bottom:1px solid var(--nav-border); backdrop-filter: blur(14px) saturate(1.08); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding: 16px var(--pad); } .brand{display:flex; align-items:center; gap:12px; min-width:160px} .brand img{width:128px; height:auto} .nav-links{ display:flex; align-items:center; gap:18px; font-weight:700; color: var(--muted); } .nav-links a{ padding:10px 12px; border-radius:999px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .nav-links a:hover{background: var(--surface2); color: var(--brand)} .nav-cta{display:flex; align-items:center; gap:10px} /* Desktop dropdown navigation */ .nav-item{position:relative; display:flex; align-items:center} .nav-item .dropdown-menu{ position:absolute; top: calc(100% + 6px); left: 0; min-width: 240px; padding: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 10px 25px -5px rgba(0,0,0,.12); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 20; } /* hover-bridge so the menu doesn't disappear on mouse move */ .nav-item .dropdown-menu::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } .nav-item:hover .dropdown-menu, .nav-item:focus-within .dropdown-menu{ opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown-menu a{ display:block; padding: 10px 10px; border-radius: 12px; color: var(--muted); font-weight: 700; } .dropdown-menu a:hover{ background: var(--surface2); color: var(--brand); } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 18px; border-radius: 999px; border:1px solid var(--border); background: var(--surface); color: var(--text); font-weight:800; letter-spacing:.1px; box-shadow: none; transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space:nowrap; } .btn:hover{transform: translateY(-1px); background: var(--surface2); border-color: var(--border2)} .btn:active{transform: translateY(0px)} .btn-primary{ background: var(--brand); border-color: rgba(26,86,166,.35); color: #fff; box-shadow: 0 14px 30px rgba(26,86,166,.22); } .btn-primary:hover{background: var(--brandHover); border-color: rgba(26,86,166,.55)} /* Secondary button: outline on dark pages, filled on light pages */ .btn-secondary{background: transparent; border-color: var(--border2)} body.page-light .btn-secondary{background: var(--surface);} /* Hamburger */ .hamburger{ display:none; border:1px solid var(--border); background: var(--surface); border-radius: 14px; padding:10px 12px; color: var(--text); } .hamburger svg{display:block} .mobile-drawer{display:none; padding: 0 var(--pad) 16px var(--pad)} .mobile-drawer a{ display:block; padding: 12px 12px; border-radius: 14px; color: var(--muted); font-weight: 800; } .mobile-drawer a:hover{background: var(--surface2); color: var(--brand)} @media (max-width: 920px){ .nav-links{display:none} .nav-cta {position: fixed;top: 32px;right: 16px;} /* .nav-cta .btn {display: none;} */ .hamburger{display:inline-flex} .mobile-drawer{display:block} .mobile-drawer[hidden]{display:none} } @media (max-width: 600px){ .nav-cta .btn {display: none;} } /* Type */ h1,h2,h3,h4{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0 0 10px 0; letter-spacing: -0.02em; color: var(--text); } h1{font-size: clamp(40px, 5.2vw, 74px); line-height: 1.05;} h2{font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15;} h3{font-size: clamp(20px, 2.2vw, 28px); line-height: 1.22;} p{margin:0 0 14px 0; color: var(--muted); line-height:1.65; font-size: 17px} .lead{font-size: 19px; color: var(--muted);} .eyebrow{ display:inline-flex; align-items:center; gap:10px; padding: 7px 12px; border-radius: 999px; border:1px solid var(--border); background: var(--surface2); color: var(--brand); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; } /* Sections */ .section{padding: 96px 0;} .section.tight{padding: 70px 0} .section-border{border-top: 1px solid var(--border);} /* Alternate section backgrounds (hero is a

but not .section; parity aligns well) */ main > section.section:nth-of-type(odd){background: var(--surface2);} main > section.section:nth-of-type(even){background: var(--surface);} .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 28px; } .section-head .actions{display:flex; gap:10px; flex-wrap:wrap} /* KPI pills (mostly used in hero) */ .kpi-row{display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px;} .kpi{ padding: 10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); font-weight: 800; font-size: 14.5px; } .kpi b{color:#fff} /* HERO */ .hero{ position:relative; padding: 96px 0 72px 0; overflow:hidden; background: linear-gradient(135deg, #05070b 0%, #0b1220 55%, #0a1020 100%); color:#fff; } .hero.hero-image{padding: 104px 0 76px 0;} @media (min-width: 920px) { .banner_div_bg{ min-height: 580px; height: auto; } /* .banner_div_bg_contact{ padding-top: 200px; } */ } /* grid overlay */ .hero::before{ content:""; position:absolute; inset:0; background-size:40px 40px; background-image: linear-gradient(to right, rgba(255,255,255,0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px); opacity:0.10; pointer-events:none; } /* blue glow */ .hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 0%, rgba(26,86,166,0.22) 0%, transparent 70%); pointer-events:none; } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity: .16; filter: saturate(1.05) contrast(1.05); transform: scale(1.02); } /* Optional hero background video (kept for compatibility; hidden by default in this style) */ .hero-bg video{display:none;} .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items:center; } .hero .lead{max-width: 54ch; color: rgba(203,213,225,.92);} .hero h1, .hero h2, .hero h3{color:#fff} .hero .eyebrow{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.92); } .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px} /* buttons on dark hero */ .hero .btn-secondary{ background: transparent; border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.94); } .hero .btn-secondary:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.40)} .hero-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius: var(--radius2); box-shadow: 0 18px 55px rgba(0,0,0,.35); padding: 18px; } .hero-card .mini-title{font-weight:900; color: rgba(255,255,255,.92); font-size: 12px; letter-spacing:.10em; text-transform:uppercase} .hero-card ul{margin: 10px 0 0 0; padding:0; list-style:none; display:grid; gap:10px} .hero-card li{display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.86); font-weight:600} .hero-card li span{ width:10px; height:10px; border-radius: 99px; background: var(--brand); margin-top:6px; flex:none; } .hero-media{ border-radius: var(--radius); border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); box-shadow: 0 18px 55px rgba(0,0,0,.35); padding: 16px; } .hero-media img{border-radius: 12px} .entrycore-hero img{max-width: 300px; width:100%; margin: 0 auto; display:block} .hero-media .caption{font-size: 13.5px; color: rgba(203,213,225,.88); margin-top:10px} @media (max-width: 980px){ .hero-grid{grid-template-columns: 1fr; gap: 18px} } /* Cards & Grids */ .grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;} .grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px;} @media (max-width: 980px){ .grid-3{grid-template-columns: 1fr} .grid-2{grid-template-columns: 1fr} } .card{ border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: 0 4px 20px rgba(0,0,0,0.03); padding: 18px; position: relative; overflow:hidden; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover{transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border2)} .card::before{display:none;} .card > *{position:relative} .card h3{margin-bottom:8px} .card p{margin-bottom:0} .card .icon{ width:44px; height:44px; border-radius: 14px; border:1px solid var(--icon-border); background: var(--icon-bg); color: var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom: 12px; } /* Card media (image at top of card) */ .card-img{ width:100%; height: 170px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.10); } @media (max-width: 680px){ .card-img{height: 150px;} } /* Feature media */ .feature{display:grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items:center;} .feature-alt{grid-template-columns: .95fr 1.05fr;} @media (max-width: 900px){ .feature, .feature-alt{grid-template-columns: 1fr;} } .feature-media img, .media-img{ width:100%; height:auto; border-radius: 14px; border:1px solid var(--border); box-shadow: 0 18px 45px rgba(0,0,0,.10); } /* Product cards */ .product-card{display:flex; flex-direction:column; gap:14px; padding: 18px;} .product-card img{width:100%; height:220px; object-fit:contain;} .product-meta{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;} .tag{ display:inline-flex; padding: 7px 10px; border-radius: 999px; border:1px solid var(--border); background: var(--surface2); color: var(--muted); font-weight:900; font-size: 12px; letter-spacing: .02em; } .list{margin: 10px 0 0 0; padding: 0; list-style:none; display:grid; gap:8px;} .list li{display:flex; gap:10px; align-items:flex-start; color: var(--muted); font-weight:600;} .list li::before{content:""; width:10px; height:10px; border-radius:99px; background: rgba(16,185,129,.85); margin-top:6px; flex:none;} /* Split section */ .split{display:grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items:center;} @media (max-width: 980px){.split{grid-template-columns:1fr}} .panel{ border-radius: var(--radius2); border:1px solid var(--border); background: var(--surface); padding: 20px; box-shadow: 0 4px 18px rgba(0,0,0,.04); } /* Pills */ .pills{display:flex; gap:10px; flex-wrap:wrap} .pill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border:1px solid var(--border); background: var(--surface2); color: var(--muted); font-weight: 800; font-size: 13.5px; } .pill .dot{width:8px; height:8px; border-radius: 99px; background: var(--brand);} /* Tables */ .table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius: 18px; border:1px solid var(--border); background: var(--surface); } .table th, .table td{padding: 12px 12px; border-bottom:1px solid var(--border); vertical-align:top;} .table th{ text-align:left; color: var(--text); font-weight: 900; font-size: 12px; letter-spacing:.10em; text-transform: uppercase; background: rgba(255,255,255,.04);} .table td{ color: var(--muted); font-weight: 600;} .table tr:last-child td{border-bottom:none} /* Footer */ .footer{padding: 56px 0 64px 0; border-top:1px solid var(--border); background: var(--surface)} .footer-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items:flex-start;} .footer a{color: var(--muted)} .footer a:hover{color: var(--brand)} .footer small{color: var(--muted2)} .footer-links{display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px;} @media (max-width: 980px){ .footer-grid{grid-template-columns:1fr} .footer-links{grid-template-columns:1fr 1fr} } /* Reveal animations */ .reveal{opacity:0; transform: translateY(14px); transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1), transform .7s cubic-bezier(0.16, 1, 0.3, 1);} .reveal.is-visible{opacity:1; transform: translateY(0px);} /* Forms */ .form{display:grid; gap:12px;} .field label{ display:block; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size: 12px; color: var(--muted2); margin: 0 0 6px 0; } .field input, .field select, .field textarea{ width:100%; padding: 12px 12px; border-radius: 14px; border:1px solid var(--border); background: var(--surface); color: var(--text); outline:none; } .field input:focus, .field select:focus, .field textarea:focus{border-color: rgba(26,86,166,.55); box-shadow: 0 0 0 3px rgba(26,86,166,.12)} .field input::placeholder, .field textarea::placeholder{color: rgba(100,116,139,.80)} .field textarea{min-height: 120px; resize: vertical} /* Utility */ .m0{margin:0} .mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mt22{margin-top:22px} .mb0{margin-bottom:0} .note{ padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-weight: 600; line-height:1.55; } .note b{color: var(--text)} .note.warn{border-color: rgba(234,179,8,.30); background: rgba(234,179,8,.12)} /* Active nav link */ .nav-links a.active{color: var(--text); background: rgba(26,86,166,.18); border:1px solid rgba(26,86,166,.28)} .mobile-drawer a.active{color: var(--text); background: rgba(26,86,166,.18); border:1px solid rgba(26,86,166,.28)} body.page-light .nav-links a.active{color: var(--brand);} body.page-light .mobile-drawer a.active{color: var(--brand); background: #eff6ff} /* Scroll‑scrub installation sequence */ .scrub-section{position:relative; height:180vh} .scrub-sticky{position:sticky; top:110px; height:calc(100vh - 140px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px} .scrub-canvas{width:min(820px, 92vw); height:auto; border-radius:10px; border:1px solid var(--border); background:#0b1220; box-shadow: 0 18px 45px rgba(0,0,0,.14)} .scrub-hint{color: var(--muted2); font-weight:900; font-size:12px; letter-spacing:.10em; text-transform:uppercase} @media (max-width: 980px){ .scrub-section{height:auto} .scrub-sticky{position:relative; top:auto; height:auto; padding-bottom:18px} } /* Dark-mode refinements */ body:not(.page-light) .card, body:not(.page-light) .panel, body:not(.page-light) .dropdown-menu{ backdrop-filter: blur(14px) saturate(1.08); } body:not(.page-light) .card, body:not(.page-light) .panel{ background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%); box-shadow: 0 18px 60px rgba(0,0,0,.42); } body:not(.page-light) .dropdown-menu{ background: rgba(7,10,16,.92); border-color: rgba(255,255,255,.10); box-shadow: 0 40px 70px rgba(0,0,0,.65); } body:not(.page-light) .nav{ backdrop-filter: blur(18px) saturate(1.10); } body:not(.page-light) .footer{ background: rgba(0,0,0,.55); border-top: 1px solid rgba(255,255,255,.08); } /* Light-mode: restore brighter table headers */ body.page-light .table th{background:#f8fafc} /* Focus styles (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 3px solid rgba(26,86,166,.55); outline-offset: 2px; } /* Light sections inside dark pages should look like true light surfaces */ .section-light .card, .section-light .panel{ backdrop-filter: none; background: var(--surface); box-shadow: 0 12px 35px rgba(0,0,0,.10); } .section-light .dropdown-menu{ backdrop-filter: blur(14px) saturate(1.08); background: var(--surface); box-shadow: 0 18px 45px rgba(0,0,0,.12); } /* --- v12 content/graphics cleanup --- */ /* Make hero secondary actions clearly visible on dark/image heroes */ .hero-actions .btn-secondary{ background: rgba(255,255,255,.96); color: #0f172a; border-color: rgba(255,255,255,.96); box-shadow: 0 10px 24px rgba(2,6,23,.18); } .hero-actions .btn-secondary:hover{ background: #ffffff; color: #0f172a; border-color: #ffffff; } /* Clean hero backgrounds when a foreground product image is present */ .hero.hero-clean .hero-bg img{ opacity: .08; filter: saturate(1.02) blur(0px); transform: scale(1.01); } .hero-media img, .media-img{max-width:100%; height:auto;} .hero-media.product-clean{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); } .hero-media.product-clean img{ display:block; margin:0 auto; } /* v13 refinements */ body.page-light .nav-links a{ border:1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); } body.page-light .nav-links a:hover, body.page-light .nav-links a.active{ background: linear-gradient(180deg,#ffffff 0%, #eff6ff 100%); border-color: rgba(26,86,166,.18); box-shadow: 0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95); } body.page-light .btn-secondary{ background: linear-gradient(180deg,#ffffff 0%, #f8fafc 100%); border-color: rgba(15,23,42,.10); box-shadow: 0 8px 18px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.95); } body.page-light .btn-primary{box-shadow: 0 12px 26px rgba(26,86,166,.18)} .media-img.blendless, .card-img.blendless{ border:none; box-shadow:none; border-radius:18px; background:transparent; } .hero-clean .hero-bg img.dimless, .hero-bg img.dimless{ opacity:.16; filter: blur(10px) saturate(.95); } .guide-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;} @media (max-width: 980px){.guide-grid{grid-template-columns:1fr;}} .guide-card{border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:var(--shadow-soft); overflow:hidden;} .guide-card img{width:100%; height:auto; display:block;} .guide-card .guide-copy{padding:20px;} .video-poster{border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-soft);} .video-poster img{width:100%; height:auto; display:block;} .link-row{display:flex; gap:12px; flex-wrap:wrap;} /* v16 polish + video embed */ .hero-bg{pointer-events:none;} .hero > .container{position:relative; z-index:2;} .hero-actions{position:relative; z-index:3;} .hero-media.product-clean{background:transparent; border:none; box-shadow:none; padding:0;} .hero-media.product-clean img{display:block; margin:0 auto; max-height:460px; width:auto; max-width:100%; border-radius:0;} .hero-media.entrycore-hero{background:transparent; border:none; box-shadow:none; padding:0;} .hero-media.entrycore-hero img{max-width:230px; width:100%; margin:0 auto; display:block; border-radius:0;} .hero-media.identry6-hero img{max-height:430px;} .hero-media .caption{max-width:520px; margin-left:auto; margin-right:auto; text-align:center;} .lineup-hero{display:block; max-width:min(86%, 1080px); margin:18px auto 0; border:none !important; box-shadow:none !important; background:transparent !important;} @media (max-width: 980px){.lineup-hero{max-width:100%;}} .tutorial-video{width:100%; height:auto; display:block; border-radius:20px; background:#000;} .contact-stack{display:grid; gap:14px;} .contact-card{border:1px solid var(--border); border-radius:20px; background:var(--surface); padding:18px; box-shadow:var(--shadow-soft);} .contact-card h3{margin:0 0 8px 0;} .contact-list{display:grid; gap:10px; margin-top:10px;} .contact-list a{font-weight:700;} .contact-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}