/* =========================================================== HAGVAN FLEET MANAGEMENT — shared stylesheet Palette: --navy: #0B1B2B (deep telemetry navy, base) --navy-2: #12283F (panel navy) --steel: #3E5C76 (steel blue, secondary) --signal: #FF7A29 (beacon orange, accent/CTA) --gps: #37D6A9 (GPS-ping teal, secondary accent) --fog: #EDF1F5 (light background) --ink: #0B1B2B (text on light) Type: Display: "Space Grotesk" (routed, technical, slightly humane) Body: "Inter" Mono/data: "IBM Plex Mono" (for coordinates, stats, labels) =========================================================== */ /* Fonts are loaded via non-blocking tags in each page's , not @import — @import blocks CSS parsing until the font file downloads, which was a real contributor to the site feeling slow to first paint. */ :root{ /* sampled directly from the source video frames */ --navy:#0d0e1a; /* page background, nav gradient left */ --navy-2:#141a2c; /* card / panel background */ --navy-3:#1c2438; /* nav gradient midpoint */ --crimson:#96221e; /* nav gradient right */ --steel:#3E5C76; --signal:#d14d2c; /* sampled headline / brand orange */ --signal-dim:#a53c22; --blue:#3E8ED9; /* CTA buttons, logo, chat bubble */ --gps:#37D6A9; --fog:#EDF1F5; /* used only for light cards (contact form) */ --ink:#0d0e1a; --text-light:#dbe4ee; --text-muted:#93a3b8; --line: rgba(255,255,255,0.09); --maxw: 1180px; --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'IBM Plex Mono',monospace; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--navy); color:var(--text-light); font-family:'Inter',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; margin:0 0 .5em; line-height:1.15; letter-spacing:-0.01em; } p{margin:0 0 1em;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;} .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--signal); display:flex;align-items:center;gap:8px; margin-bottom:14px; } .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gps);box-shadow:0 0 0 4px rgba(55,214,169,.18);} /* ---------- Top bar (route ticker) ---------- */ .top-ticker{ background:var(--navy); color:#9fb2c6; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.05em; border-bottom:1px solid var(--line); } .top-ticker .wrap{ display:flex;justify-content:space-between;align-items:center; padding:7px 28px; overflow:hidden;white-space:nowrap; } .top-ticker .wrap span:first-child{transition:opacity .3s ease;} .top-ticker span.dot{color:var(--gps);} /* Global scroll-reveal (pages without their own page-scoped reveal system) */ .auto-reveal{ opacity:0;transform:translateY(28px); transition:opacity .6s cubic-bezier(.215,.61,.355,1), transform .6s cubic-bezier(.215,.61,.355,1); } .auto-reveal.auto-revealed{opacity:1;transform:translateY(0);} /* ---------- Header / Nav ---------- */ header.site-header{ position:sticky;top:0;z-index:100; background:linear-gradient(90deg,rgba(13,14,26,.97) 0%,rgba(28,36,56,.97) 55%,rgba(150,34,30,.94) 100%); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06); box-shadow:0 1px 0 rgba(255,255,255,.04), 0 12px 24px -18px rgba(0,0,0,.6); } .nav-row{ display:flex;align-items:center;justify-content:space-between; padding:14px 28px; max-width:var(--maxw);margin:0 auto; } .logo{ display:flex;align-items:center;gap:11px; font-family:var(--font-display); font-weight:700;font-size:1.22rem;color:#fff; letter-spacing:-.01em; } .logo .mark{ width:36px;height:36px;border-radius:9px; background:linear-gradient(135deg,var(--blue),#5aa8e8); display:flex;align-items:center;justify-content:center; font-size:1.02rem;color:#fff;font-weight:700; box-shadow:0 4px 14px -4px rgba(62,142,217,.7), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s ease; } .logo:hover .mark{transform:translateY(-1px) scale(1.04);} .logo small{ display:block;font-family:var(--font-mono); font-size:.6rem;letter-spacing:.16em;color:#9fb2c6;font-weight:500; text-transform:uppercase;margin-top:1px; } nav.main-nav{display:flex;align-items:center;gap:8px;} nav.main-nav > ul{list-style:none;display:flex;gap:8px;margin:0;padding:0;} nav.main-nav a.nav-link{ position:relative; color:rgba(255,255,255,.82);font-size:.88rem;font-weight:500; padding:9px 16px;border-radius:22px; display:flex;align-items:center;gap:6px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); box-shadow:0 2px 8px -4px rgba(0,0,0,.4); transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; white-space:nowrap;letter-spacing:.01em; } nav.main-nav a.nav-link:hover{ color:#fff;background:rgba(62,142,217,.12); border-color:rgba(62,142,217,.55); box-shadow:0 0 0 1px rgba(62,142,217,.15), 0 0 16px rgba(62,142,217,.35), 0 4px 12px -4px rgba(0,0,0,.5); transform:translateY(-1px); } nav.main-nav li.active a.nav-link{ color:#fff;background:rgba(209,77,44,.14); border-color:rgba(209,77,44,.6); box-shadow:0 0 0 1px rgba(209,77,44,.18), 0 0 16px rgba(209,77,44,.4), 0 4px 12px -4px rgba(0,0,0,.5); } nav.main-nav li.has-dropdown{position:relative;} .caret{width:9px;height:9px;transition:transform .2s ease;flex:none;opacity:.75;} li.has-dropdown:hover .caret, li.has-dropdown.open .caret{transform:rotate(180deg);opacity:1;} .dropdown{ position:absolute;top:calc(100% + 14px);left:0; min-width:280px; background:linear-gradient(180deg,var(--navy-2),var(--navy)); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:10px; box-shadow:0 24px 48px -16px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03); opacity:0;visibility:hidden;transform:translateY(4px) scale(.98); transform-origin:top left; transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:50; } .dropdown::before{ content:"";position:absolute;top:-6px;left:28px;width:12px;height:12px; background:var(--navy-2);border-left:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.09); transform:rotate(45deg);border-radius:2px 0 0 0; } .dropdown.dropdown-wide{ min-width:560px; display:grid;grid-template-columns:1fr 1fr;gap:2px; } li.has-dropdown:hover .dropdown, li.has-dropdown.open .dropdown{ opacity:1;visibility:visible;transform:translateY(0) scale(1); } .dropdown a{ display:flex;gap:12px;align-items:flex-start; padding:10px 12px;border-radius:9px;color:#dbe4ee; transition:background .15s ease,transform .15s ease; } .dropdown a:hover{background:rgba(255,255,255,.06);transform:translateX(2px);} .dropdown .ic{ width:32px;height:32px;border-radius:8px;flex:none; background:rgba(255,122,41,.14);color:var(--signal); display:flex;align-items:center;justify-content:center;font-size:.88rem; } .dropdown strong{display:block;font-size:.87rem;color:#fff;font-weight:600;} .dropdown span.desc{display:block;font-size:.75rem;color:#93a3b8;margin-top:2px;line-height:1.4;} .dropdown .divider{height:1px;background:var(--line);margin:6px 4px;} .nav-cta{ background:linear-gradient(135deg,var(--blue),#5aa8e8);color:#fff; padding:10px 20px;border-radius:22px; font-weight:600;font-size:.87rem;letter-spacing:.01em; box-shadow:0 8px 20px -8px rgba(62,142,217,.75), inset 0 1px 0 rgba(255,255,255,.2); transition:transform .18s ease,box-shadow .18s ease; } .nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(62,142,217,.9), inset 0 1px 0 rgba(255,255,255,.25);} .burger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:34px;height:34px;background:none;border:0;cursor:pointer;padding:6px; } .burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease;} .main-nav.open ~ div .burger span:nth-child(1), nav.main-nav.open + div .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);} .main-nav.open ~ div .burger span:nth-child(2), nav.main-nav.open + div .burger span:nth-child(2){opacity:0;} .main-nav.open ~ div .burger span:nth-child(3), nav.main-nav.open + div .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ---------- Hero ---------- */ .hero{ position:relative;overflow:hidden; background: radial-gradient(1000px 480px at 90% -10%, rgba(150,34,30,.35), transparent 60%), radial-gradient(800px 460px at 0% 100%, rgba(62,142,217,.12), transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-2)); color:#fff;padding:96px 0 84px; } /* Lightweight moving background — animated drifting GPS-ping dots, pure CSS (no video/image weight), gives the hero real motion instead of a static gradient. */ .hero::before{ content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0; background-image: radial-gradient(2px 2px at 20% 30%, rgba(55,214,169,.9), transparent 60%), radial-gradient(2px 2px at 65% 15%, rgba(62,142,217,.8), transparent 60%), radial-gradient(2px 2px at 80% 70%, rgba(209,77,44,.8), transparent 60%), radial-gradient(2px 2px at 40% 80%, rgba(55,214,169,.7), transparent 60%), radial-gradient(2px 2px at 90% 40%, rgba(62,142,217,.7), transparent 60%), radial-gradient(2px 2px at 10% 65%, rgba(209,77,44,.6), transparent 60%), repeating-linear-gradient(0deg, rgba(159,196,234,.05) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(159,196,234,.05) 0 1px, transparent 1px 64px); animation:hero-drift 40s linear infinite; will-change:transform; transform:translateZ(0); opacity:.6; } @keyframes hero-drift{ 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(-64px,-64px,0);} } .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;} .hero h1{font-size:clamp(2.2rem,4vw,3.4rem);color:#fff;} .hero h1 em{font-style:normal;color:var(--signal);} .hero p.lead{color:#b9c6d6;font-size:1.08rem;max-width:520px;} .hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;} .btn{ display:inline-flex;align-items:center;gap:8px; padding:13px 26px;border-radius:24px;font-weight:600;font-size:.92rem; transition:transform .15s, box-shadow .15s; } .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(62,142,217,.8);} .btn-primary:hover{background:#57a1e8;} .btn-ghost{background:var(--navy-2);border:1px solid rgba(255,255,255,.16);color:#fff;} .btn-ghost:hover{border-color:#fff;} .stat-strip{ display:grid;grid-template-columns:repeat(4,1fr); margin-top:56px;border-top:1px solid var(--line);padding-top:28px; } .stat-strip .stat b{ font-family:'Space Grotesk',sans-serif;font-size:1.7rem;color:#fff;display:block; } .stat-strip .stat span{font-size:.78rem;color:#9fb2c6;} /* Hero device / radar panel — outer wrapper only. The radar face itself (SVG, sweep, markers) is now defined per-page, since each page's live-tracking visual is bespoke. No rotating sweep or dot-blip system lives here anymore. */ .radar-card{ background:var(--navy-2);border:1px solid var(--line);border-radius:18px; padding:22px;position:relative; } .radar-card .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;} .radar-card .row .tag{ font-family:var(--font-mono);font-size:.68rem;color:var(--gps); border:1px solid rgba(55,214,169,.4);padding:3px 8px;border-radius:20px; } .radar-card .foot{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--font-mono);font-size:.68rem;color:#9fb2c6;} /* ---------- Section basics ---------- */ /* The source site is dark-themed on every page — navy/black throughout, with lighter navy panels for cards and one confirmed white card (the contact form). No white page sections. */ section{padding:84px 0;} section.alt{background:var(--navy-2);} .section-head{max-width:640px;margin-bottom:48px;} .section-head h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);} .section-head p{color:var(--text-muted);} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .card{ background:var(--navy-2);border:1px solid var(--line);border-radius:16px;padding:28px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(62,142,217,.2), 0 0 24px -4px rgba(62,142,217,.3); border-color:rgba(62,142,217,.4); } .card .ic{ width:44px;height:44px;border-radius:11px; background:rgba(62,142,217,.14); color:var(--blue);display:flex;align-items:center;justify-content:center; font-size:1.15rem;margin-bottom:16px; transition:transform .22s ease, background .22s ease; } .card:hover .ic{transform:scale(1.1) rotate(-4deg);background:rgba(62,142,217,.24);} .card h3{color:#fff;font-size:1.08rem;} .card p{color:var(--text-muted);font-size:.93rem;margin-bottom:0;} .card .tag-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;} .tag-pill{ font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:#a9c3dd; background:rgba(62,142,217,.14);padding:4px 9px;border-radius:20px; } .dark-panel{ background:var(--navy-2);color:var(--text-light);border-radius:22px;padding:52px;border:1px solid var(--line); } .dark-panel h2{color:#fff;} .dark-panel p{color:var(--text-muted);} .numbered{counter-reset:step;} .numbered .step{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line);} .numbered .step:first-child{border-top:none;} .numbered .step h3{color:#fff;} .numbered .step p{color:var(--text-muted);} .numbered .step::before{ counter-increment:step;content:counter(step,decimal-leading-zero); font-family:'IBM Plex Mono',monospace;color:var(--signal);font-weight:600;font-size:.95rem;flex:none;width:34px; } .cta-band{ background:linear-gradient(120deg,var(--navy-2),var(--navy-3)); color:#fff;border-radius:22px;padding:56px;border:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; } .cta-band h2{color:#fff;margin-bottom:6px;} .cta-band p{color:var(--text-muted);margin:0;} /* forms — the contact form is the one confirmed white/light card in the source */ .form-card{background:#fff;border:1px solid #e3e9ef;border-radius:18px;padding:32px;color:var(--ink);} .form-card h3{color:var(--ink);} .field{margin-bottom:16px;} .field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--navy);} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;border-radius:9px;border:1px solid #d7dfe6; font-family:inherit;font-size:.92rem;background:#fbfcfd;color:var(--ink); } .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} /* accordion (FAQ) */ .accordion{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--navy-2);} .accordion + .accordion{margin-top:14px;} .acc-item{border-top:1px solid var(--line);} .acc-item:first-child{border-top:none;} .acc-q{ width:100%;text-align:left;background:none;border:0;cursor:pointer; display:flex;justify-content:space-between;align-items:center; padding:20px 22px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.98rem;color:#fff; } .acc-q .plus{transition:transform .2s;color:var(--signal);font-size:1.2rem;} .acc-item.open .acc-q .plus{transform:rotate(45deg);} .acc-a{max-height:0;overflow:hidden;transition:max-height .25s ease;} .acc-a p{padding:0 22px 20px;color:var(--text-muted);font-size:.92rem;} /* blog / resources cards */ .post-card img{border-radius:14px 14px 0 0;height:170px;object-fit:contain;width:100%;background:#080911;} .post-card{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--navy-2);} .post-body{padding:20px;} .post-meta{display:flex;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--signal);margin-bottom:10px;} .post-body h3{color:#fff;font-size:1.02rem;} .post-body p{color:var(--text-muted);font-size:.88rem;} .post-stats{display:flex;gap:16px;font-size:.78rem;color:#7d8fa3;margin-top:14px;} /* footer */ footer.site-footer{background:var(--navy);color:#9fb2c6;padding:60px 0 26px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--line);} .footer-grid h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-family:'IBM Plex Mono',monospace;margin-bottom:16px;} .footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .footer-grid a:hover{color:#fff;} .footer-grid p{color:#8296a9;font-size:.88rem;} .social-row{display:flex;gap:10px;margin-top:16px;} .social-row a{ width:34px;height:34px;border-radius:50%;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-size:.8rem; } .social-row a:hover{background:rgba(255,255,255,.08);} .footer-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:.78rem;color:#6f8296;flex-wrap:wrap;gap:8px;} /* floating chat bubble — present on every page in the source video */ .chat-bubble{ position:fixed;right:24px;bottom:24px;z-index:90; display:flex;align-items:center;gap:8px; background:var(--blue);color:#fff; padding:12px 18px;border-radius:24px; font-size:.86rem;font-weight:600; box-shadow:0 10px 24px -8px rgba(62,142,217,.6); transition:transform .15s; } .chat-bubble:hover{transform:translateY(-2px);} /* Solutions page: category filter pill grid (matches screenshots) */ .cat-filter{display:flex;flex-wrap:wrap;gap:10px;} .cat-pill{ border:1px solid var(--blue);color:#9fc4ea;background:transparent; padding:8px 16px;border-radius:8px;font-size:.86rem;font-weight:500; transition:background .15s,color .15s; } .cat-pill:hover{background:rgba(62,142,217,.14);color:#fff;} /* full-width red-to-navy gradient section label band */ .section-band{ position:relative; background:linear-gradient(90deg,rgba(150,34,30,.88),rgba(13,14,26,.93) 75%),var(--navy); background-size:cover;background-position:center; color:#fff;text-align:center;padding:22px 0; font-size:1.05rem;letter-spacing:.02em; } /* industry solution card: full-width alternating image + problem/solution copy */ .industry-block{ display:grid;grid-template-columns:1.1fr 1fr;gap:0; align-items:stretch; border-bottom:1px solid var(--line); padding:0; } .industry-block:nth-of-type(even){grid-template-columns:1fr 1.1fr;} .industry-block:nth-of-type(even) .industry-media{order:2;} .industry-block:nth-of-type(even) .industry-text{order:1;} .industry-media{position:relative;overflow:hidden;min-height:280px;background:#080911;} .industry-media img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;} .industry-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(13,14,26,.15),rgba(13,14,26,.05)); } .industry-text{ padding:48px 56px;display:flex;flex-direction:column;justify-content:center; background:var(--navy-2); } .industry-text .title-bar{ background:#fff;color:var(--crimson);font-weight:700;text-align:center; padding:12px;border-radius:8px;font-size:1.05rem;margin-bottom:18px; } .industry-text h4{color:var(--signal);font-size:.95rem;margin-bottom:6px;} .industry-text p{color:var(--text-light);font-size:.9rem;} .industry-text ul{margin:0 0 14px;padding-left:18px;color:var(--text-light);font-size:.9rem;} .industry-text ul li{margin-bottom:6px;} /* expandable "more details" panel — tap to reveal extra depth on a product/solution */ .more-toggle{ display:inline-flex;align-items:center;gap:6px;margin-top:14px; background:none;border:1px solid rgba(62,142,217,.4);color:var(--blue); padding:8px 14px;border-radius:20px;font-size:.82rem;font-weight:600;cursor:pointer; transition:background .2s,border-color .2s; } .more-toggle:hover{background:rgba(62,142,217,.1);border-color:var(--blue);} .more-toggle .plus{transition:transform .2s;font-size:1rem;line-height:1;} .more-toggle.open .plus{transform:rotate(45deg);} .more-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;} .more-panel-inner{padding-top:14px;} .more-panel h5{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin:14px 0 6px;font-family:'IBM Plex Mono',monospace;} .more-panel h5:first-child{margin-top:0;} .more-panel ul{margin:0 0 4px;padding-left:18px;color:var(--text-muted);font-size:.86rem;} .more-panel ul li{margin-bottom:5px;} /* infographic feature panel */ .feature-panel{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;padding:56px 0;} .feature-panel img{width:100%;border-radius:10px;border:1px solid var(--line);} .feature-panel h3{color:var(--signal);font-size:1.15rem;} .feature-panel ul{list-style:none;margin:18px 0 0;padding:0;} .feature-panel ul li{padding:10px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--text-light);} .feature-panel ul li:first-child{border-top:none;} .feature-panel ul li b{color:var(--signal);font-weight:600;} /* stub cards for solution categories without detailed source content */ .stub-card{ background:var(--navy-2);border:1px dashed rgba(255,255,255,.2);border-radius:14px; padding:26px;text-align:center; } .stub-card .ic{ width:44px;height:44px;border-radius:11px;margin:0 auto 12px; background:rgba(62,142,217,.14);color:var(--blue); display:flex;align-items:center;justify-content:center;font-size:1.2rem; } /* quote-over-photo section (home) */ .quote-photo{ position:relative;padding:120px 0;text-align:center; background-size:cover;background-position:center; } .quote-photo::before{content:"";position:absolute;inset:0;background:rgba(10,11,20,.62);} .quote-photo .inner{position:relative;z-index:1;} .quote-photo blockquote{ font-family:'Space Grotesk',sans-serif;color:var(--signal); font-size:clamp(1.3rem,2.6vw,1.9rem);max-width:780px;margin:0 auto 6px; } .quote-photo cite{color:var(--signal);font-style:normal;font-size:.85rem;opacity:.85;} /* partners strip — glowing infinite-loop logo marquee */ .partners-strip{padding:38px 0;background:var(--navy-2);overflow:hidden;} .partners-strip .label{ display:inline-block;background:var(--navy);border:1px solid var(--line); padding:8px 16px;border-radius:8px 8px 0 0;font-size:.85rem;font-weight:600;color:#fff; } .partner-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); } .partner-track{ display:flex;flex-wrap:nowrap;align-items:center;gap:18px;width:max-content; animation:marquee-scroll 26s linear infinite; will-change:transform;backface-visibility:hidden;transform:translateZ(0); } .partner-marquee:hover .partner-track{animation-play-state:paused;} .partner-box{ flex:0 0 auto;width:190px;height:90px; display:flex;align-items:center;justify-content:center; background:var(--navy);border:1px solid rgba(62,142,217,.35);border-radius:14px; padding:14px 22px;overflow:hidden; box-shadow:0 0 0 1px rgba(62,142,217,.12), 0 0 14px rgba(62,142,217,.25); transition:box-shadow .25s, border-color .25s; } .partner-box:hover{ border-color:var(--gps); box-shadow:0 0 0 1px rgba(55,214,169,.3), 0 0 20px rgba(55,214,169,.55); } .partner-box img{ max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain;border:0;border-radius:0;display:block; } @keyframes marquee-scroll{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-33.3333%,0,0);} } @media(max-width:820px){ .partner-box{width:140px;height:68px;padding:10px 16px;} } /* newsletter footer field */ .footer-grid input[type=email]{ width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line); background:rgba(255,255,255,.04);color:#fff;font-size:.85rem;margin-top:8px; } @media(max-width:960px){ .industry-block, .industry-block:nth-of-type(even), .feature-panel{grid-template-columns:1fr;} .industry-media{min-height:220px;} .industry-text{padding:32px 24px;} } @media(max-width:960px){ .hero-grid,.grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .field-row{grid-template-columns:1fr;} } @media(max-width:820px){ nav.main-nav{ position:fixed;inset:64px 0 0 0;background:var(--navy); flex-direction:column;align-items:stretch;padding:18px; transform:translateX(100%);transition:transform .25s ease;overflow:auto; } nav.main-nav.open{transform:translateX(0);} nav.main-nav > ul{flex-direction:column;width:100%;} .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;margin:4px 0 4px 14px;} .dropdown.dropdown-wide{grid-template-columns:1fr;min-width:0;} li.has-dropdown.open .dropdown{display:block;} .burger{display:flex;} .nav-cta{margin-top:14px;text-align:center;} .grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr;} .cta-band{flex-direction:column;text-align:center;} .top-ticker .wrap{font-size:.62rem;} }