/* ========================================================================== GPSFMS Main Site — theme (self-contained; no external imports) ========================================================================== */ @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"), url("../fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype"); font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"), url("../fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype"); font-weight: 100 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; } :root { --navy: #25477B; --navy-deep: #1B3560; --ink: #12233F; /* heavy dark bands */ --blue: #0084C2; --blue-bright: #00A0E3; --blue-sky: #00AEFF; /* kicker accent, owner-picked */ --blue-tint: #9CCFEA; --dark: #1C2B39; --white: #FFFFFF; --bg-soft: #F5F7FA; --gray-100: #EEF1F4; --gray-200: #D8DEE4; --gray-400: #9AA4B1; --gray-600: #55657A; --success: #1F8A5B; --warning: #E8A33D; --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --container: 1180px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --shadow-card: 0 2px 10px rgba(18, 35, 63, 0.07); --shadow-hover: 0 14px 34px rgba(18, 35, 63, 0.14); --shadow-xl: 0 24px 60px rgba(18, 35, 63, 0.22); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16.5px; line-height: 1.6; color: var(--dark); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { max-width: 100%; display: block; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--navy); } h1, h2, h3, h4 { color: var(--navy); margin: 0 0 16px; text-wrap: balance; line-height: 1.15; letter-spacing: -0.012em; } h1 { font-size: clamp(38px, 4.6vw, 60px); font-weight: 800; } h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; } h3 { font-size: 21px; font-weight: 700; } p { margin: 0 0 16px; text-wrap: pretty; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section-tight { padding: 72px 0; } .center { text-align: center; } .lead { font-size: 19px; color: var(--gray-600); max-width: 720px; } .center .lead { margin-left: auto; margin-right: auto; } .eyebrow { display: inline-block; font-size: 15.5px; font-weight: 600; font-style: italic; letter-spacing: 0.01em; color: var(--blue-sky); /* owner-picked bright accent; clickable-confusion handled by de-emphasizing text links beside buttons */ margin: 0 0 12px; } /* Breadcrumb trail (dark page heroes) */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin: 0 0 18px; } .crumbs a { color: rgba(255, 255, 255, 0.8); } .crumbs a:hover { color: var(--white); text-decoration: none; } .crumbs .sep { color: rgba(255, 255, 255, 0.35); font-weight: 400; } .crumbs [aria-current] { color: var(--blue-bright); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); } .on-dark { color: rgba(255, 255, 255, 0.88); } .on-dark .lead { color: rgba(255, 255, 255, 0.78); } .on-dark .eyebrow { color: var(--blue-sky); } .canvas--cta .eyebrow { color: rgba(255, 255, 255, 0.92); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: var(--r-sm); font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1.15; cursor: pointer; border: 2px solid transparent; transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); text-decoration: none !important; } .btn svg { width: 18px; height: 18px; } .btn-primary { background: var(--blue); color: var(--white) !important; } .btn-primary:hover { background: var(--navy-deep); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 132, 194, 0.32); } .btn-navy { background: var(--navy); color: var(--white) !important; } .btn-navy:hover { background: var(--navy-deep); transform: translateY(-1px); } .btn-outline { border-color: var(--gray-200); color: var(--navy) !important; background: var(--white); } .btn-outline:hover { border-color: var(--blue); color: var(--blue) !important; } .btn-ghost-light { border-color: rgba(255, 255, 255, 0.45); color: var(--white) !important; background: transparent; } .btn-ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); } .btn-lg { padding: 17px 32px; font-size: 17px; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---------- Topbar ---------- */ .topbar { background: var(--ink); color: rgba(255, 255, 255, 0.85); font-size: 13.5px; position: relative; z-index: 60; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; } .topbar a { color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; gap: 7px; font-weight: 500; } .topbar a:hover { color: var(--white); } .topbar svg { width: 14px; height: 14px; } .topbar-left { display: flex; align-items: center; gap: 22px; } .topbar-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue-bright); } .topbar-chip svg { width: 15px; height: 15px; } @media (max-width: 720px) { .topbar-chip span { display: none; } } /* ---------- Nav ---------- */ /* The header mount is a plain wrapper chrome.js fills; display:contents lifts its children to body level so the nav's position:sticky actually pins (a sticky element can't travel beyond its parent's box). */ [data-site-header] { display: contents; } /* chrome.js flipCondensed() is the ONLY scroll compensator for the sticky-nav height flip; the browser's own scroll anchoring would compensate AGAIN (double shift = the 72/24 hysteresis gap collapses and the nav flip-flops every few px). Keep anchoring off. */ body { overflow-anchor: none; } .nav { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid transparent; box-shadow: 0 1px 2px rgba(18, 35, 63, 0.05); transition: box-shadow 0.2s var(--ease); } body.scrolled .nav { box-shadow: 0 1px 0 rgba(18, 35, 63, 0.06), 0 12px 30px -16px rgba(18, 35, 63, 0.28); } /* Condense-on-scroll: the utility topbar scrolls away, and the sticky nav shrinks. */ body.nav-condensed .nav-inner { min-height: 64px; } body.nav-condensed .nav-logo img { height: 36px; } @media (prefers-reduced-motion: reduce) { .nav-item > a::after { transition: none; } } .nav-inner { display: flex; align-items: center; gap: 26px; min-height: 86px; position: relative; } .nav-logo img { height: 44px; width: auto; } .nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav-item { position: relative; } .nav-item > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; font-size: 15.5px; font-weight: 600; color: var(--dark); border-radius: 8px; white-space: nowrap; position: relative; transition: color 0.18s var(--ease); } .nav-item > a:hover { color: var(--blue); background: var(--bg-soft); text-decoration: none; } /* Desktop: swap the grey hover pill for a sliding underline indicator. */ @media (min-width: 951px) { .nav-item > a:hover { background: transparent; } .nav-item > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform 0.24s var(--ease); } .nav-item:hover > a::after, .nav-item:focus-within > a::after, .nav-item.active > a::after { transform: scaleX(1); } } .nav-item > a svg { width: 15px; height: 15px; color: var(--gray-400); transition: transform 0.18s var(--ease); } .nav-item.active > a { color: var(--blue); } /* Invisible hover bridge across the trigger-to-panel gap so the pointer never leaves .nav-item on the way down (kills the "menu disappears mid-move" lag). */ @media (min-width: 951px) { .nav-item.open > a::before, .nav-item:hover > a::before, .nav-item:focus-within > a::before { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 24px; } } .nav-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 288px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-md); box-shadow: var(--shadow-xl); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.985); transform-origin: top center; transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s; } .nav-item:focus-within > .nav-menu, .nav-item.open > .nav-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .nav-item:focus-within > a svg, .nav-item.open > a svg { transform: rotate(180deg); } .nav-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--dark); font-size: 14.5px; font-weight: 600; line-height: 1.3; } .nav-menu a small { display: block; font-weight: 400; color: var(--gray-600); font-size: 12.5px; margin-top: 2px; } .nav-menu a:hover { background: var(--bg-soft); color: var(--blue); text-decoration: none; } .nav-menu a.nav-menu-all { color: var(--blue); border-top: 1px solid var(--gray-100); border-radius: 0 0 8px 8px; margin-top: 6px; padding-top: 12px; } .nav-menu.nav-menu-wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; } .nav-menu.nav-menu-wide a.nav-menu-all { grid-column: 1 / -1; } .nav-cta { margin-left: 10px; } .nav-cta .btn { padding: 12px 20px; font-size: 15px; } .nav-burger { display: none; margin-left: auto; background: none; border: 0; color: var(--navy); padding: 8px; cursor: pointer; } .nav-burger svg { width: 26px; height: 26px; } @media (max-width: 1280px) { .nav-item > a { font-size: 14.5px; padding: 10px 9px; } .nav-cta .btn { padding: 11px 15px; font-size: 14px; } .nav-logo img { height: 40px; } .nav-inner { gap: 16px; } } @media (max-width: 950px) { .nav-burger { display: inline-flex; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--gray-100); box-shadow: 0 24px 40px rgba(18, 35, 63, 0.16); padding: 10px 16px 18px; max-height: calc(100vh - 118px); overflow: auto; } body.nav-open .nav-links { display: flex; } .nav-item > a { width: 100%; justify-content: space-between; padding: 13px 10px; font-size: 16px; } .nav-cta { margin: 12px 10px 0; } .nav-cta .btn { width: 100%; padding: 15px 28px; font-size: 16px; } .nav-menu, .nav-menu.nav-menu-wide { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--gray-100); border-radius: 0; margin: 0 0 6px 10px; min-width: 0; grid-template-columns: 1fr; } .nav-item.open > .nav-menu { display: block; } } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--ink); overflow: hidden; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(13, 26, 47, 0.96) 30%, rgba(13, 26, 47, 0.72) 58%, rgba(13, 26, 47, 0.42)); } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.12fr; gap: 44px; align-items: end; padding: 100px 24px 108px; } .hero-copy .lead { font-size: 20px; max-width: 560px; } .hero-checks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; } .hero-checks li { display: flex; align-items: center; gap: 11px; font-size: 15.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); } .hero-checks svg { width: 19px; height: 19px; color: var(--blue-bright); flex: none; } .hero .btn-row { margin-top: 32px; } /* ---------- Hero product image (real MyGeotab screenshot, floats) ---------- */ .hero-figure { justify-self: end; max-width: 860px; width: 100%; display: flex; flex-direction: column; align-items: center; } .hero-figure img { width: 100%; height: auto; display: block; } /* Awards lockup rides in front (z-index 2); the product render is larger and pulled up behind it (negative margin) so the badges read as part of the laptop. The hero row is bottom-anchored (.hero-inner align-items:end) so enlarging the laptop grows it upward, keeping its base level with the copy's last line. */ .hero-awards { position: relative; z-index: 2; max-width: 440px; filter: drop-shadow(0 14px 30px rgba(8, 18, 35, 0.4)); } .hero-devices { position: relative; z-index: 1; margin-top: -58px; max-width: 860px; filter: drop-shadow(0 22px 48px rgba(8, 18, 35, 0.38)); } /* Bleed clamped via min(): unclamped, a 2560px monitor grew the figure ~500px past the container — huge art pinned to the screen edge and a bottom-heavy copy column under a void. ≤1440px viewports render exactly as before. */ @media (min-width: 1240px) { .hero-figure { justify-self: start; max-width: none; width: calc(100% + min((100vw - var(--container)) / 2 - 8px, 120px)); } .hero-awards { max-width: 500px; } .hero-devices { margin-top: -72px; max-width: 1240px; } } /* ---------- Fleet widget card ---------- */ .fleet-card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: 18px 18px 14px; max-width: 470px; justify-self: end; width: 100%; } .fleet-card-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--navy); padding-bottom: 12px; } .fleet-card-head .tag { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gray-600); background: var(--gray-100); border-radius: 999px; padding: 3px 10px; } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); flex: none; } html.motion .live-dot { animation: pulse 2s infinite; } .fleet-map { background: #F2F6FA; border: 1px solid var(--gray-100); border-radius: 12px; overflow: hidden; } .fleet-map svg { width: 100%; height: auto; display: block; } .fleet-map .grid-line { stroke: #DDE6EE; stroke-width: 1; } .fleet-map .geofence { fill: rgba(0, 132, 194, 0.08); stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; } .fleet-map .route { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; } html.motion .fleet-map .route { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s var(--ease) 0.5s forwards; } .fleet-map .pin { fill: var(--navy); } .fleet-map .pin-dest { fill: var(--blue); } html.motion .fleet-map .ring { animation: ring 2.4s ease-out 3s infinite; transform-origin: center; transform-box: fill-box; } .fleet-map .ring { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; } .fleet-card-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; } .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 12px; background: var(--gray-100); color: var(--gray-600); } .chip svg { width: 13px; height: 13px; } .chip.good { background: rgba(31, 138, 91, 0.1); color: var(--success); } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(31, 138, 91, 0); } } @keyframes ring { 0% { opacity: 0.8; transform: scale(0.4); } 70% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } } @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; padding: 72px 24px 84px; } .fleet-card, .hero-figure { justify-self: start; } .hero-figure { max-width: 560px; } } /* ---------- Stats band ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .stat { border-left: 3px solid var(--gray-100); padding-left: 22px; } .stat b { display: block; font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; color: var(--blue); line-height: 1.05; font-feature-settings: "tnum" 1; letter-spacing: -0.015em; } .stat > span { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--gray-600); line-height: 1.4; } .stat b span { display: inline; font-size: inherit; color: inherit; font-weight: inherit; margin: 0; } @media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .stats { grid-template-columns: 1fr; } } /* ---------- Cards ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; } .sol-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.22s var(--ease); } .sol-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: rgba(0, 132, 194, 0.45); } .sol-card-img { background: var(--bg-soft); aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 20px; border-bottom: 1px solid var(--gray-100); } .sol-card-img img { max-height: 120px; width: auto; max-width: 78%; object-fit: contain; } .sol-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; } .sol-card-body h3 { margin-bottom: 8px; } .sol-card-body p { color: var(--gray-600); font-size: 15px; flex: 1; min-height: 63px; margin-bottom: 18px; } .card-links { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; } .link-fwd { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--blue); white-space: nowrap; } .link-fwd svg { width: 16px; height: 16px; transition: transform 0.18s var(--ease); } .card-links .link-fwd { font-size: 13.5px; } .card-links .link-fwd svg { width: 15px; height: 15px; } .link-fwd:hover { text-decoration: none; color: var(--navy); } .link-fwd:hover svg { transform: translateX(3px); } /* Side text-links beside buttons drop to navy so the button is the obvious click (owner rule). Scoped with :has(.btn) so link-only btn-rows (e.g. "Keep exploring") keep the brand link blue. */ .btn-row:has(.btn) .link-fwd { color: var(--navy); } .btn-row:has(.btn) .link-fwd:hover { color: var(--blue); } .on-dark .btn-row:has(.btn) .link-fwd { color: rgba(255, 255, 255, 0.88); } .on-dark .btn-row:has(.btn) .link-fwd:hover { color: var(--white); } /* ---------- Split sections ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .split-media img { width: 100%; height: 100%; object-fit: cover; } .split-media.framed { background: var(--white); padding: 10px; border: 1px solid var(--gray-100); } .split-media.framed img { border-radius: 10px; } /* Float treatment for transparent PNG composites: no white box, just a soft drop-shadow so the image reads as the transparent art it is. */ .split-media.float { background: transparent; box-shadow: none; overflow: visible; border: 0; padding: 0; border-radius: 0; } .split-media.float img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 42px rgba(18, 35, 63, 0.20)); } /* Flush treatment for white-background UI screenshots on white sections: no card, no shadow, no radius; the screenshot blends into the section. */ .split-media.flush { background: transparent; box-shadow: none; border: 0; padding: 0; border-radius: 0; overflow: visible; } .split-media.flush img { height: auto; object-fit: contain; } /* .flip alternates back-to-back same-orientation splits: media left, text right on desktop; normal stack on mobile. */ .split.flip > :first-child { order: 2; } @media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 36px; } .split.flip > :first-child { order: 0; } } /* ---------- Numbered narrative list (editorial alternate to icon trios) ---------- */ .nlist { max-width: 860px; margin: 48px auto 0; } .nlist__item { display: grid; grid-template-columns: 74px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--gray-100); align-items: start; } .nlist__item:first-child { border-top: 0; padding-top: 6px; } .nlist__num { font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); font-feature-settings: "tnum" 1; } .nlist__item b { display: block; font-size: 17px; color: var(--navy); margin: 4px 0 6px; } .nlist__item p { margin: 0; font-size: 15px; color: var(--gray-600); line-height: 1.6; } .nlist--2col { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; } .nlist--2col .nlist__item:nth-child(2) { border-top: 0; padding-top: 6px; } @media (max-width: 860px) { .nlist--2col { display: block; max-width: 860px; } .nlist--2col .nlist__item:nth-child(2) { border-top: 1px solid var(--gray-100); padding-top: 26px; } } @media (max-width: 560px) { .nlist__item { grid-template-columns: 52px 1fr; gap: 14px; } .nlist__num { font-size: 30px; } } /* Section-closing aside note ("talk to us" / "compare" lines). Centered, muted, and width-limited so it reads as an intentional caption instead of a plain full-width paragraph that overhangs the content column above it. */ .spec-note { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--gray-600); } .checklist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; } .checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; } .checklist svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 2.5px; } .checklist b { color: var(--navy); } .on-dark .checklist svg { color: var(--blue-bright); } .on-dark .checklist b { color: var(--white); } /* ---------- Bands ---------- */ .band-soft { background: var(--bg-soft); } /* Dark feature bands: not a flat void. A fine dot lattice + two soft corner glows give depth, matching the .canvas--cta treatment — no photo needed, so the owner's "relevant-or-navy" rule for mid-band photos still holds. */ .band-ink { background-color: var(--navy-deep); background-image: radial-gradient(rgba(156, 207, 234, 0.09) 1.1px, transparent 1.2px), radial-gradient(1150px 540px at 86% -16%, rgba(0, 160, 227, 0.20), transparent 60%), radial-gradient(950px 480px at -6% 116%, rgba(0, 132, 194, 0.14), transparent 60%), linear-gradient(135deg, var(--ink), var(--navy-deep) 82%); background-size: 27px 27px, auto, auto, auto; } /* Anatomy bands already carry a strong centered device glow — keep only the dot lattice there so the two glows don't fight. */ .band-ink.anatomy { background-image: radial-gradient(rgba(156, 207, 234, 0.07) 1.1px, transparent 1.2px), linear-gradient(135deg, var(--ink), var(--navy-deep) 82%); background-size: 27px 27px, auto; } .band-navy { background: var(--navy); } /* Photographic band: a full-bleed dark photo behind a section, with a navy scrim so on-dark content stays legible. Drop and
as the first children of a .section.band-photo, then put content in a .container (auto-lifted above). */ .band-photo { position: relative; background: var(--ink); overflow: hidden; isolation: isolate; } .band-photo > .container { position: relative; z-index: 2; } .band-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .band-photo__scrim { position: absolute; inset: 0; z-index: 1; } /* Default scrim: even and deep — best for centered content (quotes, CTAs). Deepened (July 2026): body copy sits directly on these bands, so the photo is texture, not subject. Text legibility wins. */ .band-photo__scrim { background: linear-gradient(180deg, rgba(13, 26, 47, 0.8) 0%, rgba(13, 26, 47, 0.62) 30%, rgba(13, 26, 47, 0.6) 68%, rgba(13, 26, 47, 0.82) 100%); } /* Quiet the photo itself too (faint variant keeps its own lighter treatment). */ .band-photo:not(.band-photo--faint) .band-photo__img { filter: saturate(0.9) brightness(0.96); } /* Split/left-aligned content: let the photo breathe on the right, darken left. */ .band-photo--split .band-photo__scrim { background: linear-gradient(105deg, rgba(13, 26, 47, 0.93) 48%, rgba(13, 26, 47, 0.52)); } /* (Photo-band showcase treatment is now the default .band-photo scrim/brightness above.) */ /* A hairline top/bottom so a photo band reads as an intentional dark break between light sections rather than a floating image. */ .band-photo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, 0.08); z-index: 2; } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; } .step { position: relative; background: none; border: none; border-radius: 0; padding: 6px 2px 2px; transition: transform 0.22s var(--ease); } a.step { display: block; color: inherit; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 26px 24px 22px; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } a.step:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--blue); box-shadow: var(--shadow-hover); } a.step .link-fwd { margin-top: 14px; } /* Clickable-card affordance: a "→" cue + card frame so link cards read differently from plain (non-clickable) info cards. Suppressed when the card already carries its own .link-fwd arrow. */ a.step:not(:has(.link-fwd))::after { content: "\2192"; display: block; margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1; color: var(--blue); opacity: 0.55; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); } a.step:hover::after { opacity: 1; transform: translateX(4px); } .on-dark a.step { background: linear-gradient(135deg, rgba(37, 71, 123, 0.42) 0%, rgba(28, 43, 57, 0.42) 100%); border-color: rgba(255, 255, 255, 0.2); } .on-dark a.step:hover { border-color: var(--blue-bright); background: linear-gradient(135deg, rgba(37, 71, 123, 0.6) 0%, rgba(28, 43, 57, 0.6) 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); } .on-dark a.step::after { color: var(--blue-bright); } /* ---------- Client logo marquee ---------- */ .logo-strip { padding-top: 10px; } .j-reassure { display: flex; gap: 11px; align-items: flex-start; margin: 24px 0 0; padding: 15px 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--r-md); font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); } .j-reassure svg { flex: none; width: 19px; height: 19px; color: var(--blue-bright); margin-top: 2px; } .j-reassure b { color: #fff; } .j-reassure--light { background: rgba(0, 132, 194, 0.06); border-color: rgba(0, 132, 194, 0.22); color: var(--gray-600); } .j-reassure--light svg { color: var(--blue); } .j-reassure--light b { color: var(--navy); } .logo-marquee { position: relative; width: 100%; overflow: hidden; margin-top: 34px; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } .logo-marquee__track { display: flex; width: max-content; align-items: stretch; animation: logo-scroll 55s linear infinite; will-change: transform; backface-visibility: hidden; } .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; } .logo-marquee__group { display: flex; align-items: stretch; gap: 22px; padding-right: 22px; } .logo-card { flex: 0 0 auto; width: clamp(190px, 16vw, 260px); height: 108px; display: flex; align-items: center; justify-content: center; padding: 16px 24px; box-sizing: border-box; } .logo-card img { max-height: 54px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: grayscale(1); opacity: 0.68; transition: filter 0.25s ease, opacity 0.25s ease; } .logo-card:hover img { filter: grayscale(0); opacity: 1; } @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 820px) { .logo-card { width: clamp(168px, 44vw, 220px); height: 102px; padding: 16px 20px; } .logo-card img { max-height: 50px; } .logo-marquee__group { gap: 16px; padding-right: 16px; } .logo-marquee__track { animation-duration: 42s; } } @media (max-width: 520px) { .logo-card { width: clamp(150px, 62vw, 200px); height: 94px; } .logo-card img { max-height: 46px; } } @media (prefers-reduced-motion: reduce) { .logo-marquee { -webkit-mask-image: none; mask-image: none; } .logo-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: 16px; } .logo-marquee__group { flex-wrap: wrap; justify-content: center; padding-right: 0; } .logo-marquee__group[aria-hidden="true"] { display: none; } } /* Frosted wash on all photo-band cards for legibility over the photo. The "clickable" cues — border, arrow, hover-lift — go ONLY on link cards (a.step), so static and widget-reveal cards read as readable panels, not buttons. Widget-reveal cards keep their own "SEE IT ..." hint as their distinct interactivity cue. */ .band-photo:not(.band-photo--faint) .step { background: rgba(13, 26, 47, 0.38); border: none; border-radius: var(--r-md); padding: 24px 22px 20px; -webkit-backdrop-filter: blur(7px) saturate(1.05); backdrop-filter: blur(7px) saturate(1.05); } .band-photo:not(.band-photo--faint) a.step { background: linear-gradient(135deg, rgba(37, 71, 123, 0.42) 0%, rgba(28, 43, 57, 0.42) 100%); border: 1px solid rgba(255, 255, 255, 0.2); } .band-photo:not(.band-photo--faint) a.step:hover { background: linear-gradient(135deg, rgba(37, 71, 123, 0.6) 0%, rgba(28, 43, 57, 0.6) 100%); border-color: var(--blue-bright); } .step > b { display: block; color: var(--navy); font-size: 17px; margin: 14px 0 6px; } .step > p { font-size: 14.5px; color: var(--gray-600); margin: 0; } .on-dark .step > b { color: var(--white); } .on-dark .step > p { color: rgba(255, 255, 255, 0.84); } .on-dark .step > .ico { background: rgba(255, 255, 255, 0.12); color: var(--blue-bright); } .step-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 132, 194, 0.1); color: var(--blue); font-weight: 800; font-size: 16px; } .steps.cols-3 { grid-template-columns: repeat(3, 1fr); } .steps.cols-4 { grid-template-columns: repeat(4, 1fr); } .stats.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 940px) { .steps, .steps.cols-3, .steps.cols-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .stats.cols-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .steps, .steps.cols-3, .steps.cols-4 { grid-template-columns: 1fr; } } @media (max-width: 520px) { .stats.cols-3 { grid-template-columns: 1fr; } } @media (max-width: 940px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .steps { grid-template-columns: 1fr; } } /* ---------- Duo link panels ---------- */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .duo-card { display: flex; flex-direction: column; gap: 10px; padding: 34px 34px 30px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--gray-200); transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.22s var(--ease); } .duo-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: rgba(0, 132, 194, 0.45); text-decoration: none; } .duo-card .ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(0, 132, 194, 0.1); color: var(--blue); display: grid; place-items: center; } .duo-card .ico svg { width: 24px; height: 24px; } .duo-card h3 { margin: 6px 0 2px; } .duo-card p { color: var(--gray-600); font-size: 15px; margin: 0 0 10px; } @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } } /* ---------- Support band ---------- */ .support-band { background: var(--bg-soft); border-top: 1px solid rgba(28, 43, 57, 0.06); } .support-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: 88px 24px; } .support-cards { display: grid; gap: 14px; } .support-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: var(--white); border: 1px solid rgba(28, 43, 57, 0.08); box-shadow: 0 8px 22px rgba(18, 35, 63, 0.06); color: inherit; transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); } a.support-card:hover { border-color: rgba(0, 132, 194, 0.45); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(18, 35, 63, 0.11); text-decoration: none; color: inherit; } .support-card .ico { width: 44px; height: 44px; border-radius: 11px; background: rgba(0, 132, 194, 0.1); color: var(--blue); display: grid; place-items: center; flex: none; } .support-card .ico svg { width: 22px; height: 22px; } .support-card b { display: block; font-size: 16.5px; color: var(--ink); } .support-card span { display: block; font-size: 13.5px; color: #5A6B7C; margin-top: 2px; } .support-badge { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .support-badge img { height: 84px; width: auto; } .support-badge span { font-size: 13.5px; color: #5A6B7C; max-width: 240px; } @media (max-width: 940px) { .support-inner { grid-template-columns: 1fr; gap: 36px; } } /* ---------- Certification strip (light buffer above the dark footer) ---------- */ .cert-strip { background: var(--white); border-top: 1px solid rgba(28, 43, 57, 0.07); } .cert-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 24px; flex-wrap: wrap; } .cs-h { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5A6B7C; margin-bottom: 12px; } .cs-row { display: flex; flex-wrap: wrap; gap: 10px 26px; } .cs-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); } .cs-item svg { width: 17px; height: 17px; color: var(--blue); } .cs-badges { display: flex; align-items: center; gap: 18px; } .cs-badges img { height: 62px; width: auto; } @media (max-width: 720px) { .cert-strip-inner { flex-direction: column; align-items: flex-start; gap: 22px; } } /* ---------- Forms ---------- */ .form-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 36px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-grid .full { grid-column: 1 / -1; } .field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); font-family: var(--font); font-size: 15.5px; color: var(--dark); background: var(--white); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 132, 194, 0.14); } .radio-row { display: flex; flex-wrap: wrap; gap: 10px; } .radio-pill { position: relative; } .radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .radio-pill span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--gray-200); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease); } .radio-pill input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--white); } .radio-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0, 132, 194, 0.25); } .form-note { font-size: 13px; color: var(--gray-400); margin: 14px 0 0; } .form-error { font-size: 14px; font-weight: 600; color: #C0392B; margin: 12px 0 0; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* Closing-CTA inline demo form: white capture card centered on the action band */ .cta-form { max-width: 640px; margin: 32px auto 0; text-align: left; } .cta-form .form-note { text-align: center; } .cta-form .form-note a { color: var(--blue); font-weight: 700; } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: rgba(255, 255, 255, 0.78); font-size: 14.5px; position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-bright) 45%, var(--navy)); } .footer a { color: rgba(255, 255, 255, 0.78); } .footer a:hover { color: var(--white); text-decoration: none; } .footer-top { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; justify-content: space-between; padding: 60px 0 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-top img.logo { height: 62px; width: auto; } .footer-top .ft-tag { margin: 16px 0 0; color: rgba(255, 255, 255, 0.64); max-width: 430px; font-size: 15px; } .footer-top-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .footer-phone { display: inline-flex; align-items: center; gap: 11px; font-size: 26px; font-weight: 800; color: var(--white) !important; letter-spacing: -0.01em; } .footer-phone svg { width: 22px; height: 22px; color: var(--blue-bright); } .footer-phone-sub { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-top: -10px; } .footer-main { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px; padding: 52px 0 44px; } .footer h4 { color: var(--white); font-size: 13.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 18px; } .footer h4::after { content: ""; display: block; width: 26px; height: 2px; background: var(--blue); margin-top: 9px; border-radius: 2px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer-col a { display: inline-block; font-size: 14px; color: rgba(255, 255, 255, 0.66); transition: color 0.15s var(--ease), transform 0.15s var(--ease); } .footer-col a:hover { color: var(--blue-bright); transform: translateX(3px); } .footer-contact-col li { display: flex; align-items: flex-start; gap: 10px; } .footer-contact-col svg { width: 16px; height: 16px; color: var(--blue-bright); flex: none; margin-top: 3px; } .footer-contact-col b { display: block; color: var(--white); font-size: 14px; } .footer-contact-col span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); } .footer-contact-col b a { color: var(--white); } /* Brand block (footer-top left) */ .footer-brand { max-width: 470px; } .ft-trust { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; } .ft-trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.72); } .ft-trust svg { width: 16px; height: 16px; color: var(--blue-bright); flex: none; } /* Upgraded footer menu (concierge): balanced nav columns + contact card */ .footer .fmenu--b { padding: 50px 0 4px; } .footer .fmenu-wrap { display: grid; grid-template-columns: 1fr 330px; gap: 50px; align-items: start; } .footer .fnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .footer .fcol-h { display: flex; align-items: center; gap: 7px; color: var(--white); font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 17px; white-space: nowrap; } .footer .fcol-h svg { width: 14px; height: 14px; color: var(--blue-bright); flex: none; } .footer .fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer .fcol li a { font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); transition: color 0.16s var(--ease), transform 0.16s var(--ease); display: inline-block; } .footer .fcol li a:hover { color: var(--blue-bright); transform: translateX(3px); } .footer .fcol-stack .fcol-div { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 22px 0; } .footer .fcard { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-lg); padding: 24px 22px; } .footer .fcard-ey { display: inline-flex; align-items: center; gap: 7px; color: var(--blue-bright); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .footer .fcard-ey svg { width: 14px; height: 14px; } .footer .fcard h5 { color: var(--white); font-size: 18px; font-weight: 800; margin: 8px 0 14px; letter-spacing: -0.01em; } .footer .fc-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer .fc-row:first-of-type { border-top: 0; padding-top: 0; } .footer .fc-row:last-child { padding-bottom: 0; } .footer .fc-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(0, 160, 227, 0.13); color: var(--blue-bright); display: grid; place-items: center; flex: none; transition: background 0.16s var(--ease); } .footer .fc-ic svg { width: 16px; height: 16px; } .footer .fc-tx b { display: block; color: var(--white); font-size: 13.5px; font-weight: 700; line-height: 1.3; } .footer .fc-tx span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.5); } .footer .fc-row:hover .fc-ic { background: rgba(0, 160, 227, 0.24); } @media (max-width: 1020px) { .footer .fmenu-wrap { grid-template-columns: 1fr; gap: 40px; } .footer .fnav { grid-template-columns: repeat(2, 1fr); gap: 30px 34px; } } @media (max-width: 600px) { .footer .fnav { grid-template-columns: 1fr 1fr; gap: 26px 20px; } .footer .fcard { padding: 20px 18px; } } /* Security / compliance trust strip */ .footer-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 44px; padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ft-cert-h { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 14px; } .ft-cert-row { display: flex; flex-wrap: wrap; gap: 10px; } .ft-cert-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 999px; padding: 8px 14px; transition: border-color 0.18s var(--ease), background 0.18s var(--ease); } .ft-cert-item:hover { border-color: rgba(0, 160, 227, 0.5); background: rgba(0, 160, 227, 0.08); } .ft-cert-item svg { width: 15px; height: 15px; color: var(--blue-bright); flex: none; } .ft-badges { display: flex; align-items: center; gap: 22px; flex: none; } .ft-badges img { height: 64px; width: auto; } /* Legal bar */ .footer-bottom { padding: 24px 0 4px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, 0.5); } .footer-bottom a { color: rgba(255, 255, 255, 0.62); font-weight: 600; } .fb-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .fb-links a:hover { color: var(--white); } .fb-top { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.62); font-weight: 700; cursor: pointer; } .fb-top:hover { color: var(--white); } .fb-top svg { width: 15px; height: 15px; } @media (max-width: 1180px) { .footer-main { grid-template-columns: 1fr 1fr 1fr; } .footer-top-cta { align-items: flex-start; } } @media (max-width: 640px) { .footer-main { grid-template-columns: 1fr 1fr; } .footer-trust { gap: 22px; } .ft-badges img { height: 54px; } } /* ---------- Motion ---------- */ html.motion [data-animate] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); } html.motion [data-animate].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.motion [data-animate] { opacity: 1; transform: none; transition: none; } html.motion .fleet-map .route { animation: none; stroke-dashoffset: 0; } } /* ---------- Render perf: skip off-screen bands ---------- Long pages only style/layout/paint the bands near the viewport; the `auto` keyword remembers each band's real size after first render so the scrollbar stays stable. Also stops off-screen infinite animations (pulse dots, journey) from painting. Unsupported browsers simply ignore this. */ .section, .support-band, .cert-strip, .footer { content-visibility: auto; contain-intrinsic-size: auto 640px; } /* ---------- Page hero (interior pages) ---------- */ .page-hero { position: relative; background: var(--ink); overflow: hidden; } .page-hero .hero-scrim { background: linear-gradient(100deg, rgba(13, 26, 47, 0.95) 34%, rgba(13, 26, 47, 0.6)); } .page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } /* z-index:2 lifts hero content above .hero-scrim (z-index:1); without it the scrim paints over the copy and dims it (heavily on the left where the gradient is near-opaque). Matches the homepage .hero-inner stacking. */ .page-hero-inner { position: relative; z-index: 2; padding: 88px 0 92px; max-width: 760px; } .page-hero-inner h1 { text-wrap: balance; } /* Long hero titles step down so they hold 2-3 balanced lines like the ~35-char baseline (fleet-coordination), instead of stacking 1-2 words per line at the 60px cap. h1-long ≈ 37-52 chars, h1-xl ≈ 53+. */ .page-hero h1.h1-long { font-size: clamp(33px, 3.4vw, 44px); } .page-hero h1.h1-xl { font-size: clamp(31px, 3.0vw, 40px); } /* Interior hero with a floating product image (two-column on desktop) */ .page-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; align-items: center; } .page-hero-figure { justify-self: start; width: 100%; max-width: 360px; margin: 0 0 4px; } .page-hero-figure img { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 48px rgba(8, 18, 35, 0.42)); } @media (min-width: 900px) { .page-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 40px; } .page-hero-grid .page-hero-inner { max-width: none; } .page-hero-figure { justify-self: end; max-width: 520px; margin: 0; padding: 36px 0; } } @media (min-width: 1240px) { .page-hero-grid .page-hero-figure { justify-self: end; max-width: 640px; width: 100%; } .page-hero-grid .page-hero-figure img { max-width: 100%; } } /* --wide: wide, low (>=1.7:1) transparent suite composites at homepage scale. Mirrors .hero-figure's controlled right-margin bleed — clamped to +110px past the container (min(), same reason as .hero-figure) — with top/bottom padding so it can never touch the nav. Never for tall/square composites or radius-carrying screenshots — those stay contained. */ @media (max-width: 899.98px) { .page-hero-figure--wide { max-width: 520px; } } @media (min-width: 900px) { .page-hero-grid .page-hero-figure--wide { max-width: 560px; padding: 28px 0; } } @media (min-width: 1240px) { .page-hero-grid:has(.page-hero-figure--wide) { grid-template-columns: 1.02fr 0.98fr; } .page-hero-grid .page-hero-figure--wide { justify-self: start; max-width: none; width: calc(100% + min((100vw - var(--container)) / 2 - 24px, 150px)); padding: 28px 0; } .page-hero-grid .page-hero-figure--wide img { max-width: 880px; margin-left: auto; } .page-hero-grid .page-hero-figure--wide .hf-wrap { max-width: 880px; margin-left: auto; } .page-hero-grid .page-hero-figure--wide .hf-wrap img { max-width: 100%; } } /* Screenshot/photo hero media (imgs carrying the inline border-radius): cheaper box-shadow instead of a filter repaint, and a contained width with a real margin to the screen edge instead of the transparent-art bleed above. */ .page-hero-figure img[style*="border-radius"] { filter: none; box-shadow: 0 22px 48px rgba(8, 18, 35, 0.42); } @media (min-width: 900px) { .page-hero-grid .page-hero-figure:has(img[style*="border-radius"]) { justify-self: end; width: 100%; max-width: 600px; } .page-hero-grid .page-hero-figure:has(img[style*="border-radius"]) img { max-width: 100%; } } /* ---------- Video hero: full-bleed clip behind copy-left (landing pages) ---------- */ .page-hero--video { background: var(--ink); } .page-hero--video .page-hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.55; border: 0; pointer-events: none; } .page-hero--video .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(13, 26, 47, 0.96) 30%, rgba(13, 26, 47, 0.72) 58%, rgba(13, 26, 47, 0.42)); } .page-hero--video .container { position: relative; z-index: 2; } /* Pause / play toggle */ .hero-vid-toggle { position: absolute; z-index: 3; right: 22px; bottom: 20px; width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(9, 18, 33, 0.5); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; transition: background .18s ease, border-color .18s ease; } .hero-vid-toggle:hover { background: rgba(9, 18, 33, 0.74); border-color: rgba(255, 255, 255, 0.55); } .hero-vid-toggle:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; } .hero-vid-toggle svg { width: 18px; height: 18px; } .hero-vid-toggle .ico-play { display: none; } .hero-vid-toggle.is-paused .ico-pause { display: none; } .hero-vid-toggle.is-paused .ico-play { display: inline-flex; } @media (max-width: 720px) { .hero-vid-toggle { right: 14px; bottom: 14px; width: 38px; height: 38px; } } /* ---------- Small utilities ---------- */ .checklist.compact { gap: 10px; } .checklist.compact li { font-size: 14.5px; } .checklist.compact svg { width: 17px; height: 17px; margin-top: 3px; } .tag-pill { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); background: rgba(0, 132, 194, 0.1); border-radius: 999px; padding: 5px 13px; margin-bottom: 12px; } .sol-card .best-for { font-size: 13.5px; color: var(--gray-600); background: var(--bg-soft); border-radius: 10px; padding: 12px 14px; margin: 16px 0 18px; } .sol-card .best-for b { color: var(--navy); } .media-video { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--ink); } .media-video video { width: 100%; display: block; } /* ---------- Article (blog) ---------- */ .article { max-width: 760px; margin: 0 auto; font-size: 17px; } .article h2 { margin-top: 44px; font-size: 28px; } .article h3 { margin-top: 30px; color: var(--navy); } .article p, .article li { color: var(--dark); line-height: 1.7; } .article li { margin-bottom: 9px; } .article .post-meta { display: flex; gap: 14px; align-items: center; font-size: 13.5px; color: var(--gray-400); font-weight: 600; margin-bottom: 8px; } .post-card small { display: block; font-size: 12.5px; color: var(--gray-400); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; } /* ---------- Install guide ---------- */ .install-steps { list-style: none; counter-reset: inst; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; } .install-steps li { counter-increment: inst; display: flex; gap: 16px; align-items: flex-start; } .install-steps li::before { content: counter(inst); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 132, 194, 0.1); color: var(--blue); font-weight: 800; font-size: 15px; } .install-steps b { color: var(--navy); } details.trouble { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-sm); padding: 0; margin-bottom: 10px; } details.trouble summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 15px 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } details.trouble summary::after { content: "+"; color: var(--blue); font-size: 20px; font-weight: 700; } details.trouble[open] summary::after { content: "\2212"; } details.trouble p { padding: 0 18px 16px; margin: 0; color: var(--gray-600); font-size: 15px; } /* ---------- Testimonials / social proof (reusable across pages) ---------- */ .quote-feature { max-width: 940px; margin: 0 auto; text-align: center; } .center + .quote-feature, .quote-card .quote-feature { margin-top: 30px; } .quote-feature blockquote { margin: 0; font-size: clamp(22px, 2.7vw, 33px); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--navy); } .quote-feature cite { display: block; margin-top: 26px; font-style: normal; font-weight: 800; font-size: 16px; color: var(--navy); } .quote-feature cite span { display: block; margin-top: 3px; font-weight: 500; font-size: 14.5px; color: var(--gray-600); } .on-dark .quote-feature blockquote, .on-dark .quote-feature cite { color: var(--white); } .on-dark .quote-feature cite span { color: var(--blue-tint); } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin: 42px auto 0; padding-top: 32px; border-top: 1px solid var(--gray-200); max-width: 940px; } .on-dark .trust-row { border-top-color: rgba(255, 255, 255, 0.16); } .trust-row .ti { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; } .trust-row .ti b { font-weight: 800; } .trust-row .ti svg { width: 20px; height: 20px; color: var(--blue); flex: none; } .on-dark .trust-row .ti svg { color: var(--blue-bright); } /* Compact inline testimonial for interior pages (quote beside CTA/content) */ .quote-inline { border-left: 4px solid var(--blue); padding: 4px 0 4px 22px; margin: 0; } .quote-inline blockquote { margin: 0 0 12px; font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--navy); } .on-dark .quote-inline { border-left-color: var(--blue-bright); } .on-dark .quote-inline blockquote { color: var(--white); } .quote-inline cite { font-style: normal; font-weight: 700; font-size: 14.5px; color: var(--gray-600); } .on-dark .quote-inline cite { color: var(--blue-tint); } /* Testimonial card wrapper (interior pages) so the proof band stays distinct even when it follows another band-soft section */ .quote-card { background: none; border-radius: 0; box-shadow: none; padding: 8px 0; max-width: 940px; margin: 0 auto; } @media (max-width: 640px) { .quote-card { padding: 34px 22px; } } /* ---------- FAQ accordion (interior pages) ---------- */ .faq { max-width: 820px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 0; } .faq details { background: none; border: none; border-top: 1px solid var(--gray-200); border-radius: 0; padding: 0 2px; box-shadow: none; } .faq details:last-of-type { border-bottom: 1px solid var(--gray-200); } .faq details[open] { border-color: var(--gray-200); box-shadow: none; } .faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 2px; font-size: 17px; font-weight: 700; color: var(--navy); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 26px; font-weight: 400; line-height: 1; color: var(--blue); flex: none; } .faq details[open] summary::after { content: "\2212"; } .faq details > p { margin: 0; padding: 0 2px 22px; color: var(--gray-600); font-size: 15.5px; line-height: 1.66; max-width: 780px; } /* Icon chip for step/feature cards that opt in with a .ico child */ .step > .ico { width: 44px; height: 44px; border-radius: 11px; background: rgba(0, 132, 194, 0.1); color: var(--blue); display: grid; place-items: center; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .step > .ico svg { width: 22px; height: 22px; } a.step:hover > .ico { background: var(--blue); color: var(--white); transform: scale(1.06); } a.step:hover .link-fwd svg { transform: translateX(3px); } /* ========================================================================== Live MyGeotab-style dashboard mock (what-is-geotab, is-geotab-good, predictive-safety) ========================================================================== */ .dashmock { margin: 56px 0 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); overflow: hidden; } .dashmock__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 13px 20px; background: linear-gradient(180deg, #fff, #fbfcfe); border-bottom: 1px solid var(--gray-100); } .dashmock__brand { font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--navy); } .dashmock__brand b { color: var(--blue); font-weight: 800; } .dashmock__tab { font-size: 12.5px; font-weight: 700; color: var(--gray-600); background: var(--bg-soft); border: 1px solid var(--gray-100); padding: 6px 13px; border-radius: 999px; } .dashmock__spacer { flex: 1; } .dashmock__chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--gray-600); } .dashmock__chip svg { width: 14px; height: 14px; color: var(--gray-400); } .dashmock__live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--success); } .dashmock__livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } html.motion .dashmock__livedot { animation: pulse 2s infinite; } .dashmock__body { padding: 20px; background: #F6F8FC; } .dashmock__note { text-align: center; font-size: 11.5px; color: var(--gray-400); margin: 16px 0 0; } @media (max-width: 560px) { .dashmock__body { padding: 13px; } .dashmock__tab { display: none; } } /* KPI strip */ .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } .dash-kpi { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-card); } .dash-kpi__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .dash-kpi__ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(0,132,194,.1); color: var(--blue); display: grid; place-items: center; } .dash-kpi__ico svg { width: 16px; height: 16px; } .dash-kpi__delta { margin-left: auto; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; color: var(--success); background: rgba(31,138,91,.1); } .dash-kpi__delta svg { width: 12px; height: 12px; } .dash-kpi b { display: block; font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.1; letter-spacing: -.02em; font-feature-settings: "tnum" 1; } .dash-kpi__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray-600); margin-top: 2px; } @media (max-width: 720px) { .dash-kpis { grid-template-columns: 1fr 1fr; } } /* charts grid */ .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .dash-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .dash-card--trend { grid-column: span 8; } .dash-card--donut { grid-column: span 4; } .dash-card--pie { grid-column: span 4; } .dash-card--bars { grid-column: span 4; } .dash-card--board { grid-column: span 4; } .dash-card__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dash-card__h h4 { font-size: 13.5px; font-weight: 800; color: var(--navy); margin: 0; letter-spacing: .01em; } .dash-card__h .spacer { flex: 1; } .dash-pill { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; } .dash-pill.low { color: var(--success); background: rgba(31,138,91,.12); } .dash-pill.mod { color: #B7791F; background: rgba(232,163,61,.18); } .dash-pill.high { color: #C23B34; background: rgba(214,69,56,.13); } @media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr 1fr; } .dash-card { grid-column: auto; } .dash-card--trend { grid-column: 1 / -1; } } @media (max-width: 600px) { .dash-grid { grid-template-columns: 1fr; } .dash-card { grid-column: 1 / -1; } } /* trend chart */ .dash-trend__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } .dash-trend__big { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1; } .dash-trend__delta { font-size: 12.5px; font-weight: 800; color: var(--success); display: inline-flex; align-items: center; gap: 4px; } .dash-trend__delta svg { width: 14px; height: 14px; } .dash-chart { width: 100%; height: auto; display: block; } .dash-chart .grid { stroke: var(--gray-100); stroke-width: 1; } .dash-chart .area { fill: url(#dashArea); } .dash-chart .line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .dash-chart .bench { fill: none; stroke: var(--warning); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; opacity: .9; } .dash-chart .xlabel { fill: var(--gray-400); font-size: 9px; font-weight: 600; font-family: var(--font); } .dash-legend { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; } .dash-legend > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--gray-600); } .dash-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--blue); display: inline-block; } .dash-legend i.bench { background: var(--warning); } .dash-legend__note { margin-left: auto; color: var(--gray-400); font-weight: 600; font-size: 11.5px; } /* donut gauge */ .dash-donut { position: relative; width: 100%; max-width: 158px; margin: 4px auto 0; } .dash-donut svg { width: 100%; height: auto; display: block; } .dash-donut__track { stroke: var(--gray-100); } .dash-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dash-donut__center b { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum" 1; } .dash-donut__center span { font-size: 11px; font-weight: 700; color: var(--gray-400); margin-top: 2px; } .dash-donut__cap { text-align: center; font-size: 12.5px; color: var(--gray-600); margin: 14px 0 0; } .dash-donut__cap .dash-pill { margin-right: 6px; } /* pie (conic) */ .dash-pie__wrap { display: flex; align-items: center; gap: 18px; margin-top: 4px; } .dash-pie__disc { position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--pie); flex: none; } .dash-pie__disc::after { content: ""; position: absolute; inset: 27px; background: var(--white); border-radius: 50%; z-index: 1; } .dash-pie__disc span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 800; color: var(--navy); line-height: 1.15; z-index: 2; } .dash-pie__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; font-size: 12.5px; } .dash-pie__legend li { display: flex; align-items: center; gap: 8px; color: var(--gray-600); font-weight: 600; } .dash-pie__legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .dash-pie__legend b { margin-left: auto; color: var(--navy); font-weight: 800; font-feature-settings: "tnum" 1; } @media (max-width: 400px) { .dash-pie__wrap { flex-direction: column; align-items: flex-start; } } /* bars */ .dash-bars rect { fill: #00A0E3; transform-box: fill-box; transform-origin: bottom; } .dash-bars rect:nth-child(1) { fill: var(--warning); } .dash-bars__x { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 6px; } .dash-bars__x span { font-size: 10px; font-weight: 600; color: var(--gray-400); } /* driver scorecards */ .dash-board { display: flex; flex-direction: column; } .dash-board__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--gray-100); } .dash-board__row:first-child { border-top: 0; padding-top: 2px; } .dash-board__av { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft); color: var(--navy); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; flex: none; } .dash-board__id { display: flex; flex-direction: column; line-height: 1.25; } .dash-board__name { font-size: 13px; font-weight: 700; color: var(--dark); } .dash-board__sub { font-size: 11px; color: var(--gray-400); } .dash-board__score { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--navy); font-feature-settings: "tnum" 1; } /* ---- entrance animations (final state is base; motion animates from hidden) ---- */ html.motion .dashmock .dash-card--trend .line { stroke-dasharray: 1; stroke-dashoffset: 1; } html.motion .dashmock.in .dash-card--trend .line { animation: dashDraw 1.6s var(--ease) .15s forwards; } @keyframes dashDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } html.motion .dashmock .dash-card--trend .area, html.motion .dashmock .dash-card--trend .bench { opacity: 0; } html.motion .dashmock.in .dash-card--trend .area { transition: opacity .8s ease .5s; opacity: 1; } html.motion .dashmock.in .dash-card--trend .bench { transition: opacity .8s ease .7s; opacity: .9; } .dash-donut__val { stroke-dasharray: 100; stroke-dashoffset: var(--donut-off, 18); } html.motion .dashmock .dash-donut__val { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease) 0.2s; } html.motion .dashmock.in .dash-donut__val { stroke-dashoffset: var(--donut-off, 18); } html.motion .dashmock .dash-pie__disc { opacity: 0; transform: scale(.82); } html.motion .dashmock.in .dash-pie__disc { transition: opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s; opacity: 1; transform: scale(1); } html.motion .dashmock .dash-bars rect { transform: scaleY(0); } html.motion .dashmock.in .dash-bars rect { transition: transform .7s var(--ease); transform: scaleY(1); } html.motion .dashmock.in .dash-bars rect:nth-child(1) { transition-delay: .12s; } html.motion .dashmock.in .dash-bars rect:nth-child(2) { transition-delay: .18s; } html.motion .dashmock.in .dash-bars rect:nth-child(3) { transition-delay: .24s; } html.motion .dashmock.in .dash-bars rect:nth-child(4) { transition-delay: .30s; } html.motion .dashmock.in .dash-bars rect:nth-child(5) { transition-delay: .36s; } html.motion .dashmock.in .dash-bars rect:nth-child(6) { transition-delay: .42s; } html.motion .dashmock.in .dash-bars rect:nth-child(7) { transition-delay: .48s; } @media (prefers-reduced-motion: reduce) { .dash-bars rect { transform: none !important; } } /* platform feature row (below dashboard) */ .platform-features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin: 46px 0 0; } .pf { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: transform .16s ease; } .pf:hover { transform: translateY(-3px); } .pf:hover .pf__ico { background: var(--blue); color: #fff; } .pf:hover b { color: var(--blue); } .pf:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 10px; } .pf__ico { width: 44px; height: 44px; border-radius: 11px; background: rgba(0,132,194,.1); color: var(--blue); display: grid; place-items: center; } .pf__ico svg { width: 22px; height: 22px; } .pf b { color: var(--navy); font-size: 15px; } .pf p { font-size: 13.5px; color: var(--gray-600); margin: 0; line-height: 1.5; } @media (max-width: 980px) { .platform-features { grid-template-columns: repeat(2, 1fr); gap: 20px 26px; } } @media (max-width: 520px) { .platform-features { grid-template-columns: 1fr; } } /* ---------- Accessibility: skip link + visible keyboard focus ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--navy); color: var(--white); padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 700; font-size: 15px; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(0, 132, 194, 0.55); outline-offset: 2px; } /* ---------- Legal / policy prose ---------- */ .legal-prose { max-width: 820px; margin: 0 auto; } .legal-prose h2 { font-size: 24px; margin: 44px 0 12px; } .legal-prose h2:first-child { margin-top: 0; } .legal-prose p, .legal-prose li { color: var(--gray-600); font-size: 16px; line-height: 1.75; } .legal-prose p { margin: 0 0 14px; } .legal-prose ul { padding-left: 22px; margin: 10px 0 18px; } .legal-prose li { margin: 6px 0; } .legal-prose a { color: var(--blue); font-weight: 600; } .data-flag { display: inline-block; background: #FFF6E8; color: #8A5A00; border: 1px solid #F0DAB4; border-radius: 6px; padding: 2px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; } /* ========================================================================== Polish pass (July 2026): micro-interactions, widget-reveal cards, savings estimator, live map demo ========================================================================== */ /* ---------- Micro-interactions (sitewide) ---------- */ ::selection { background: rgba(0, 132, 194, 0.22); } [id] { scroll-margin-top: 140px; } .sol-card-img img { transition: transform 0.4s var(--ease), filter 0.4s var(--ease); filter: drop-shadow(0 10px 16px rgba(18, 35, 63, 0.14)); } .sol-card:hover .sol-card-img img { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 18px 26px rgba(18, 35, 63, 0.22)); } .btn:active { transform: translateY(0) scale(0.985); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-400); } .radio-pill:hover input:not(:checked) + span { border-color: rgba(0, 132, 194, 0.55); color: var(--blue); } .stat { transition: border-color 0.25s var(--ease); } .stat:hover { border-left-color: var(--blue); } .dash-kpi { transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18, 35, 63, 0.12); } .faq summary::after { transition: transform 0.25s var(--ease); } .faq details[open] summary::after { content: "+"; transform: rotate(45deg); } .duo-card .ico { transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } a.duo-card:hover .ico { background: var(--blue); color: var(--white); transform: scale(1.06); } .on-dark .link-fwd { color: var(--blue-bright); } .on-dark .link-fwd:hover { color: var(--white); } /* ---------- Widget-reveal cards (.step.has-widget) ---------- Hover/focus a card and a real MyGeotab widget crop expands below the copy. Parent grid gets .has-widgets so siblings stay put while one grows. Touch devices (no hover) show the widget expanded by default. */ .steps.has-widgets { align-items: start; gap: 48px 44px; } /* Widget grids use more of the screen on large monitors (the always-on widgets are wide): they widen past the 1180 container up to 1440px, centered on the viewport. This ONLY applies at >=1200px — tablet and mobile stay in the container and reflow to 2-up / 1-up via the .steps breakpoints, unchanged. */ @media (min-width: 1200px) { .steps.has-widgets { width: min(1440px, calc(100vw - 96px)); margin-left: calc(50% - min(720px, calc(50vw - 48px))); } } .step.has-widget:hover, .step.has-widget:focus-within, .step.has-widget:focus { outline: none; } .cw-hint { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--gray-200); font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-400); transition: color 0.2s var(--ease); } .cw-hint svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); } .step.has-widget:hover .cw-hint, .step.has-widget:focus-within .cw-hint, .step.has-widget:focus .cw-hint { color: var(--blue); } .step.has-widget:hover .cw-hint svg, .step.has-widget:focus-within .cw-hint svg, .step.has-widget:focus .cw-hint svg { transform: rotate(180deg); } .card-widget { display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: 14px; } .card-widget > div { overflow: hidden; min-height: 0; min-width: 0; } /* Widgets on has-widget cards are shown by default (always-on), not hover-revealed, so the reveal is smooth (no grid-row animation lag). The old "See it" hover hint is hidden. Accordion widgets use a separate click mechanism and are unaffected. */ .cw-hint { display: none; } /* Live .lw widgets inside a reveal card are sized to a comfortable design width and scaled to fit by js/widgets.js (fitCard), so map callouts and table columns keep their real proportions instead of cramping in the narrow card. */ .card-widget .lw { transform-origin: top left; } .step.has-widget:hover .card-widget, .step.has-widget:focus-within .card-widget, .step.has-widget:focus .card-widget { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; } .card-widget img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--gray-100); box-shadow: 0 10px 26px rgba(18, 35, 63, 0.16); } .card-widget .cw-cap { display: none; } @media (hover: none) { .card-widget { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; } .cw-hint svg { display: none; } } /* ---------- Savings estimator (.roi-panel) ---------- */ .roi-panel { display: grid; grid-template-columns: 1.05fr 0.95fr; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); overflow: hidden; margin-top: 52px; } .roi-controls { padding: 38px 40px; display: grid; gap: 26px; align-content: start; } .rf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .rf-head label { font-size: 14.5px; font-weight: 700; color: var(--navy); } .rf-head output { font-size: 15px; font-weight: 800; color: var(--blue); font-feature-settings: "tnum" 1; white-space: nowrap; } .rf-note { font-size: 12.5px; color: var(--gray-400); margin: 8px 0 0; } .roi-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--blue) var(--fill, 50%), var(--gray-100) var(--fill, 50%)); cursor: pointer; margin: 0; } .roi-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--blue); box-shadow: 0 2px 8px rgba(18, 35, 63, 0.25); transition: transform 0.15s var(--ease); } .roi-range::-webkit-slider-thumb:hover { transform: scale(1.12); } .roi-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--blue); box-shadow: 0 2px 8px rgba(18, 35, 63, 0.25); } .roi-result { background: linear-gradient(160deg, var(--navy-deep), var(--ink)); color: var(--white); padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; } .rr-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-bright); } .rr-big { font-size: clamp(44px, 4.5vw, 60px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--white); font-feature-settings: "tnum" 1; margin-top: 6px; } .rr-sub { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; margin-top: 4px; } .roi-breakdown { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; gap: 10px; } .roi-breakdown li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.75); } .roi-breakdown b { color: var(--white); font-weight: 800; font-feature-settings: "tnum" 1; } .roi-result .btn { margin-top: 26px; align-self: flex-start; } .roi-disclaimer { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.45); margin: 18px 0 0; } .cta-assure { margin: 26px auto 0; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.6); } @media (max-width: 900px) { .roi-panel { grid-template-columns: 1fr; } .roi-controls, .roi-result { padding: 28px 24px; } } /* ---------- Live map demo (MyGeotab-style, .map-demo) ---------- */ .map-demo { margin-top: 52px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); overflow: hidden; } /* Navy MyGeotab top bar */ .map-demo .mg-bar { display: flex; align-items: center; gap: 14px; background: #25477B; padding: 11px 18px; } .mg-logo { font-size: 16px; font-weight: 800; letter-spacing: .2px; color: #fff; } .mg-logo span { font-weight: 400; color: #9CCFEA; } .mg-bar__sp { flex: 1 1 auto; } .mg-bar__icons { display: flex; align-items: center; gap: 15px; color: #AEBED4; } .mg-bar__icons svg { width: 17px; height: 17px; } .mg-user { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #26456F; color: #CFE0F2; } .mg-user svg { width: 15px; height: 15px; } /* Light toolbar strip */ .map-demo .mg-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--gray-200); } .mg-search { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; padding: 7px 12px; font-size: 13px; color: var(--gray-400); min-width: 208px; } .mg-search svg { width: 15px; height: 15px; color: var(--gray-400); } .mg-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: var(--gray-600); } .mg-pill svg { width: 14px; height: 14px; } .mg-tools__sp { flex: 1 1 auto; } /* View tabs (segmented control) */ .map-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 3px; } .map-tab { border: 0; background: transparent; color: var(--gray-600); font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .map-tab svg { width: 14px; height: 14px; } .map-tab:hover { color: var(--blue); } .map-tab.active { background: var(--navy); color: #fff; box-shadow: 0 1px 3px rgba(37, 71, 123, .45); } @media (max-width: 720px) { .mg-search { min-width: 0; flex: 1 1 100%; } .mg-pill--hide-sm, .mg-tools__sp { display: none; } .map-tabs { flex: 1 1 100%; } .map-tab { flex: 1; justify-content: center; } } /* Map stage */ .map-stage { position: relative; background: #E8EDEA; } .map-stage > svg { width: 100%; height: auto; display: block; } .map-demo [data-layer], .map-demo .map-pop { transition: opacity 0.35s var(--ease); } .map-demo .layer-hidden { opacity: 0; pointer-events: none; } .map-stage .road-label { fill: #8A94A2; font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: .02em; } .map-stage .zone { fill: rgba(37, 71, 123, 0.10); stroke: var(--navy); stroke-width: 2; stroke-dasharray: 7 5; } .map-stage .zlabel-bg { fill: #fff; opacity: .82; } .map-stage .zlabel { fill: var(--navy); font-family: var(--font); font-size: 12.5px; font-weight: 700; } .map-stage .stop-num { fill: var(--white); font-family: var(--font); font-size: 12px; font-weight: 700; } .map-stage .trip-route { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1.5px 2px rgba(37, 71, 123, 0.3)); } html.motion .map-demo .trip-route { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s var(--ease) 0.15s forwards; } .map-stage .trip-runner circle { filter: drop-shadow(0 2px 4px rgba(37, 71, 123, 0.5)); } .map-stage .live-ring { opacity: 0; } html.motion .map-demo .live-ring { animation: liveRing 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes liveRing { 0% { opacity: .5; transform: scale(.5); } 70% { opacity: 0; transform: scale(1.75); } 100% { opacity: 0; transform: scale(1.75); } } .map-stage .zring { fill: none; stroke: #C8102E; stroke-width: 2.5; opacity: 0; } html.motion .map-demo .zring { animation: ring 2.4s ease-out 0.8s infinite; transform-origin: center; transform-box: fill-box; } /* Map overlay controls */ .mg-live { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.94); border: 1px solid var(--gray-200); border-radius: 999px; padding: 5px 12px 5px 10px; font-size: 12px; font-weight: 700; color: var(--navy); box-shadow: var(--shadow-card); } .mg-live span { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } html.motion .mg-live span { animation: mgpulse 2s infinite; } .mg-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden; } .mg-zoom button { border: 0; background: #fff; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dark); } .mg-zoom button:first-child { border-bottom: 1px solid var(--gray-200); } .mg-zoom button:hover { background: var(--bg-soft); } .mg-zoom svg { width: 15px; height: 15px; } .mg-ctrls { position: absolute; right: 12px; bottom: 32px; display: flex; flex-direction: column; gap: 8px; } .mg-ctrls button { border: 1px solid var(--gray-200); background: #fff; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dark); box-shadow: var(--shadow-card); } .mg-ctrls button:hover { background: var(--bg-soft); } .mg-ctrls svg { width: 14px; height: 14px; } .mg-scale { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 6px; font-size: 10.5px; color: #5C6B7A; } .mg-scale span { display: block; width: 46px; height: 6px; border: 1.5px solid #8A94A2; border-top: 0; } .mg-attrib { position: absolute; right: 10px; bottom: 6px; font-size: 9.5px; color: #8A94A2; } @media (max-width: 640px) { .mg-scale, .mg-attrib { display: none; } } /* Info popups (MyGeotab card style) */ .map-pop { position: absolute; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: var(--shadow-hover); padding: 0; font-size: 12.5px; max-width: 280px; overflow: hidden; } .map-pop b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--navy); padding: 11px 34px 9px 14px; border-bottom: 1px solid var(--gray-100); } .map-pop span { display: block; color: var(--gray-600); line-height: 1.45; padding: 9px 14px 12px; } .map-pop .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .map-pop .mg-pop__x { position: absolute; top: 9px; right: 9px; border: 0; background: transparent; color: var(--gray-400); cursor: pointer; padding: 2px; line-height: 0; } .map-pop .mg-pop__x svg { width: 14px; height: 14px; } .map-demo .dashmock__note { padding: 12px 18px 14px; margin: 0; } @keyframes mgpulse { 0% { box-shadow: 0 0 0 0 rgba(31,138,91,.5); } 70% { box-shadow: 0 0 0 7px rgba(31,138,91,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,91,0); } } @media (prefers-reduced-motion: reduce) { html.motion .map-demo .trip-route { animation: none; stroke-dashoffset: 0; } html.motion .map-demo .zring { animation: none; } html.motion .mg-live span { animation: none; } html.motion .map-demo .live-ring { animation: none; } } /* ---------- Homepage fleet map: assets panel + live map (.map-demo.fleetmap) ---------- */ .fleetmap { margin-top: 56px; } .fleetmap .fm-body { display: grid; grid-template-columns: 288px minmax(0, 1fr); background: var(--white); } .fleetmap .fm-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--gray-200); } .fm-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--gray-100); font-size: 12px; color: var(--gray-600); } .fm-sort { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; } .fm-sort b { color: var(--dark); font-weight: 700; } .fm-sort svg { width: 13px; height: 13px; color: var(--gray-400); } .fm-sync { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; } .fm-checkbox { width: 15px; height: 15px; border-radius: 4px; background: var(--blue); color: #fff; display: inline-grid; place-items: center; flex: none; } .fm-checkbox svg { width: 11px; height: 11px; } .fm-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; } .fm-row { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 11px 14px; background: var(--white); border: 0; border-bottom: 1px solid var(--gray-100); cursor: pointer; font-family: var(--font); transition: background .18s ease; } .fm-row:hover { background: var(--bg-soft); } .fm-row.active { background: rgba(0,132,194,.06); box-shadow: inset 3px 0 0 var(--blue); } .fm-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; margin-top: 1px; box-shadow: 0 1px 3px rgba(18,35,63,.3); } .fm-ico__sq { width: 10px; height: 10px; border-radius: 2.5px; background: #fff; } .fm-ico--live { background: var(--success); border-radius: 50%; } .fm-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fm-row__main b { font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.3; } .fm-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .fm-meta svg { width: 12px; height: 12px; color: var(--gray-400); flex: none; } .fm-meta--live { color: var(--success); font-weight: 700; } .fm-meta--live svg { color: var(--success); } .fm-panel__foot { margin-top: auto; padding: 10px 14px; border-top: 1px solid var(--gray-100); font-size: 11.5px; font-weight: 600; color: var(--gray-400); } .fm-panel__foot b { color: var(--gray-600); } .fleetmap .map-stage { aspect-ratio: 960 / 520; } .fleetmap .map-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map-stage .poi-park { fill: #74987F; font-family: var(--font); font-size: 11px; font-weight: 500; } .fleetmap .fm-mk, .fleetmap .fm-lb { cursor: pointer; } .fleetmap .fm-mk > rect:first-of-type { filter: drop-shadow(0 2px 3px rgba(18,35,63,.35)); } .fleetmap .fm-lb rect { filter: drop-shadow(0 2px 4px rgba(18,35,63,.3)); } .fleetmap .fm-lb line { stroke: #12233F; stroke-width: 1.5; opacity: .55; } .fleetmap .fm-lb.sel rect { stroke: #00A0E3; stroke-width: 2; } .fleetmap .fm-mvlabel rect { filter: drop-shadow(0 3px 6px rgba(18,35,63,.35)); } .fleetmap .fm-arrow path { filter: drop-shadow(0 2px 4px rgba(18,35,63,.4)); } .fleetmap .fm-sel { opacity: 0; transition: opacity .25s ease; } .fleetmap .sel .fm-sel { opacity: 1; } html.motion .fleetmap .sel .fm-sel { animation: fmSel 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes fmSel { 0% { opacity: .9; transform: scale(.72); } 70% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.3); } } @media (max-width: 880px) { .fleetmap .fm-body { grid-template-columns: 1fr; } .fleetmap .fm-panel { order: 2; border-right: 0; border-top: 1px solid var(--gray-200); } .fleetmap .fm-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; } .fm-row { flex: 0 0 238px; border-bottom: 0; border-right: 1px solid var(--gray-100); } .fm-panel__foot { display: none; } } @media (max-width: 560px) { .fleetmap .map-pop { display: none; } .fm-panel__head .fm-sync { display: none; } } @media (prefers-reduced-motion: reduce) { html.motion .fleetmap .sel .fm-sel { animation: none; } } /* ========================================================================== Mega-menu (July 7, 2026) — richer nav dropdowns with icon rows, grouped columns, and a feature panel. Built ON TOP of .nav-menu so all the existing open/close + mobile-burger logic is inherited; .nav-mega layers the desktop layout, and the mobile media query below resets it back to a stacked list. ========================================================================== */ .nav-menu.nav-mega { min-width: 0; max-width: calc(100vw - 32px); padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .nav-menu.nav-mega::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-bright) 55%, var(--navy)); } .nav-menu.nav-mega.align-right { left: auto; right: 0; } /* The grouped (widest) panel anchors to .nav-inner (the container) instead of its narrow nav-item, so a ~744px panel stays within the container at every desktop width (>950px) without overflowing the right edge. */ .nav-item--full { position: static; } .nav-item--full > .nav-menu.nav-mega { left: 0; right: auto; top: calc(50% + 30px); } .mega-row { display: flex; gap: 20px; align-items: stretch; } .mega-main { flex: 1 1 auto; } .mega-main.cols-1 { display: grid; grid-template-columns: 1fr; gap: 2px; min-width: 336px; } .mega-main.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; min-width: 464px; } .mega-main.groups { display: flex; gap: 20px; } .mega-group { flex: 0 0 auto; width: 224px; min-width: 0; } .mega-group-h { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); padding: 4px 12px 8px; } /* link row (icon-free, subtle animated arrow) */ .nav-mega .nav-lnk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; transition: background 0.2s var(--ease); } .nav-mega .nav-lnk-tx { display: block; min-width: 0; } .nav-mega .nav-lnk-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--dark); line-height: 1.3; letter-spacing: -0.004em; transition: color 0.18s var(--ease); } .nav-mega .nav-lnk-tx small { display: block; font-weight: 400; color: var(--gray-600); font-size: 12px; margin-top: 1px; line-height: 1.35; } .nav-mega .nav-lnk-ar { flex: none; display: grid; place-items: center; width: 15px; height: 15px; color: var(--gray-200); transition: transform 0.22s var(--ease), color 0.2s var(--ease); } .nav-mega .nav-lnk-ar svg { width: 15px; height: 15px; } .nav-mega .nav-lnk:hover { background: var(--bg-soft); text-decoration: none; } .nav-mega .nav-lnk:hover .nav-lnk-tx b { color: var(--blue); } .nav-mega .nav-lnk:hover .nav-lnk-ar, .nav-mega .nav-lnk:focus-visible .nav-lnk-ar { color: var(--blue); transform: translateX(4px); } /* feature panel */ .nav-mega .mega-feat { flex: none; width: 224px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background-color: var(--ink); background-image: linear-gradient(160deg, var(--ink), var(--navy-deep) 92%); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 20px; transform: translateZ(0); backface-visibility: hidden; transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease); } .nav-mega .mega-feat:hover { text-decoration: none; transform: translate3d(0, -3px, 0); box-shadow: 0 18px 36px rgba(18, 35, 63, 0.38); border-color: rgba(0, 160, 227, 0.5); background-color: var(--navy-deep); background-image: linear-gradient(160deg, var(--navy-deep), #294c86 92%); } .nav-mega .mega-feat-media { width: 100%; height: 96px; margin-bottom: 12px; display: grid; place-items: center; overflow: hidden; } .nav-mega .mega-feat-img { max-width: 100%; max-height: 96px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4)); transition: transform 0.28s var(--ease); } .nav-mega .mega-feat:hover .mega-feat-img { transform: translateY(-3px); } .nav-mega .mega-feat-img.swap { animation: megaFeatSwap 0.32s var(--ease); } @keyframes megaFeatSwap { from { opacity: 0.2; } to { opacity: 1; } } .nav-mega .mega-feat-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(0, 160, 227, 0.2); color: var(--blue-bright); display: grid; place-items: center; margin-bottom: 12px; } .nav-mega .mega-feat-ic svg { width: 22px; height: 22px; } .nav-mega .mega-feat-ey { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue-bright); } .nav-mega .mega-feat b { color: var(--white); font-size: 15.5px; font-weight: 800; line-height: 1.25; margin: 1px 0 0; transition: color 0.2s var(--ease); } .nav-mega .mega-feat:hover b { color: var(--white); } .nav-mega .mega-feat-tx { font-size: 12.5px; color: rgba(255, 255, 255, 0.82); line-height: 1.5; margin: 4px 0 8px; } .nav-mega .mega-feat .link-fwd { color: var(--blue-bright); margin-top: auto; font-size: 13.5px; } .nav-mega .mega-feat:hover .link-fwd { color: var(--white); } .nav-mega .mega-feat .link-fwd svg { transition: transform 0.2s var(--ease); } .nav-mega .mega-feat:hover .link-fwd svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .nav-mega .mega-feat-img.swap { animation: none; } } /* footer strip */ .nav-mega .mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--gray-100); margin-top: 2px; padding: 12px 12px 4px; } .nav-mega .mega-foot .link-fwd { font-size: 14px; display: inline-flex; align-items: center; padding: 0; line-height: 1; } /* .nav-menu a{display:block} was beating .link-fwd's inline-flex, leaving the arrow svg baseline-aligned (rode high next to the text) */ .nav-mega .mega-foot .link-fwd svg { margin-top: 1px; } .nav-mega .mega-foot-cta { font-size: 13.5px; font-weight: 700; color: var(--gray-600); display: inline-flex; align-items: center; gap: 8px; } .nav-mega .mega-foot-cta:hover { color: var(--blue); text-decoration: none; } .nav-mega .mega-foot-cta svg { width: 15px; height: 15px; color: var(--blue); } @media (max-width: 950px) { .nav-menu.nav-mega { display: none; max-width: none; padding: 4px 0 6px; } .nav-item.open > .nav-menu.nav-mega { display: block; } .nav-menu.nav-mega.align-right { right: auto; } .mega-row { display: block; } .mega-main.cols-1, .mega-main.cols-2, .mega-main.groups { display: block; min-width: 0; } .mega-group { width: auto; min-width: 0; margin-top: 8px; } .mega-group:first-child { margin-top: 0; } .nav-mega .mega-feat { display: none; } .nav-mega .mega-foot { flex-direction: column; align-items: flex-start; gap: 10px; border-top: 0; padding: 10px 12px 4px; } } /* ========================================================================== Comparison table — GPSFMS Geotab vs. Other Providers ========================================================================== */ .compare-wrap { max-width: 960px; margin: 0 auto; } .compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: visible; box-shadow: var(--shadow-card); font-size: 15.5px; } .compare th, .compare td { text-align: left; vertical-align: top; padding: 17px 22px; } .compare thead th { font-weight: 800; color: var(--navy); background: var(--bg-soft); border-bottom: 2px solid var(--gray-200); font-size: 13px; letter-spacing: 0.02em; } .compare thead .c-cap { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); } .compare tbody th { font-weight: 700; color: var(--navy); width: 27%; background: var(--bg-soft); border-bottom: 1px solid var(--gray-100); font-size: 15px; } .compare td { border-bottom: 1px solid var(--gray-100); color: var(--gray-600); line-height: 1.45; } .compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; } /* Highlighted GPSFMS Geotab column (2nd col) */ .compare th:nth-child(2), .compare td:nth-child(2) { background: rgba(37, 71, 123, 0.05); box-shadow: inset 1px 0 0 rgba(37, 71, 123, 0.14), inset -1px 0 0 rgba(37, 71, 123, 0.14); } .compare thead th:nth-child(2) { background: var(--navy); color: var(--white); box-shadow: inset 1px 0 0 var(--navy), inset -1px 0 0 var(--navy); } .compare .c-head { display: inline-flex; align-items: center; gap: 9px; } .compare .c-head .c-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(0, 160, 227, 0.22); color: var(--white); padding: 3px 9px; border-radius: 999px; } .compare .c-head .c-badge svg { width: 12px; height: 12px; } .compare .c-geotab { display: flex; gap: 11px; align-items: flex-start; color: var(--dark); font-weight: 500; } .compare .c-geotab svg { width: 19px; height: 19px; color: var(--blue); flex: none; margin-top: 2px; } .compare .c-geotab b { font-weight: 700; } .compare .c-other { display: flex; gap: 10px; align-items: flex-start; color: var(--gray-600); } .compare .c-other svg { width: 16px; height: 16px; color: var(--gray-400); flex: none; margin-top: 3px; } .compare-foot { max-width: 960px; margin: 20px auto 0; font-size: 13px; color: var(--gray-400); line-height: 1.55; } @media (max-width: 640px) { .compare { display: block; border-radius: var(--r-md); font-size: 15px; } .compare thead { display: none; } .compare tbody, .compare tr { display: block; } .compare tr { border-bottom: 8px solid var(--bg-soft); } .compare tr:last-child { border-bottom: 0; } .compare tbody th { display: block; width: auto; padding: 15px 18px 8px; font-size: 16.5px; border-bottom: 0; } .compare td { display: block; border-bottom: 0 !important; padding: 4px 18px; background: transparent !important; box-shadow: none !important; } .compare td:last-child { padding-bottom: 15px; } .compare td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; } .compare td:nth-child(2)::before { color: var(--blue); } .compare td:nth-child(3)::before { color: var(--gray-400); } } /* ========================================================================== Interactive product comparison (.spec) — device / tier side-by-side. Column highlights on hover (js/compare.js); one column marked recommended. ========================================================================== */ .spec { max-width: 1000px; margin: 40px auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .spec__grid { display: grid; grid-template-columns: 1.5fr repeat(var(--cols, 3), 1fr); min-width: 680px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .spec__lab, .spec__col { padding: 15px 20px; border-bottom: 1px solid var(--gray-100); font-size: 14.5px; } .spec__lab { font-weight: 700; color: var(--navy); background: var(--bg-soft); display: flex; align-items: center; } .spec__col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; color: var(--gray-600); transition: background 0.18s var(--ease); } .spec__col svg { width: 21px; height: 21px; color: var(--success); } .spec__val { font-weight: 700; color: var(--dark); } .spec__na { color: var(--gray-400); font-weight: 700; } .spec__head { gap: 3px; padding: 22px 18px; background: var(--bg-soft); border-bottom: 2px solid var(--gray-200); } .spec__corner { background: var(--white); border-bottom: 2px solid var(--gray-200); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-400); } .spec__name { font-size: 16.5px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; } .spec__tag { font-size: 12px; font-weight: 600; color: var(--gray-400); } .spec__badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--blue); padding: 3px 10px; border-radius: 999px; } .spec__col.is-rec { background: rgba(0, 132, 194, 0.06); box-shadow: inset 1px 0 0 rgba(0, 132, 194, 0.2), inset -1px 0 0 rgba(0, 132, 194, 0.2); } .spec__head.is-rec { background: rgba(0, 132, 194, 0.11); box-shadow: inset 1px 0 0 rgba(0, 132, 194, 0.28), inset -1px 0 0 rgba(0, 132, 194, 0.28), inset 0 3px 0 var(--blue); } .spec__col.hl { background: rgba(0, 132, 194, 0.12); } .spec__foot { border-bottom: 0; padding-top: 18px; padding-bottom: 20px; } .spec__note { max-width: 1000px; margin: 16px auto 0; font-size: 13px; color: var(--gray-400); text-align: center; line-height: 1.55; } @media (max-width: 640px) { .spec { margin-top: 32px; } .spec__name { font-size: 15px; } .spec__lab, .spec__col { padding: 12px 12px; font-size: 13.5px; } } /* ===================================================================== Detail pass (July 9, 2026): sourced stat lines ===================================================================== */ .stat .src, .stat-src { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--gray-400); } .callout { margin-top: 22px; padding: 16px 20px; background: var(--bg-soft); border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; font-size: 15.5px; line-height: 1.62; color: var(--gray-600); } .callout b { color: var(--navy); } .band-soft .callout { background: var(--white); } .on-dark .callout { background: rgba(9, 19, 36, 0.58); border-left-color: var(--blue-bright); color: rgba(255, 255, 255, 0.88); } .on-dark .callout b { color: var(--white); } /* ==================== DEMO JOURNEY (animated CTA stepper) ==================== Base state is fully visible and static (no-JS / reduced-motion safe). Under html.motion, add .j-live to the .journey list: the four nodes take turns lighting up (12s cycle, 3s per step, --jd sets each node's delay). Rails: ::before is the static gray track; ::after is the blue fill. All three fills share ONE undelayed 12s timeline (per-rail keyframes j-fill-1/2/3) so progress accumulates down the ladder, holds, then all fade out together at 96-100% before the cycle restarts. No staggered mid-cycle resets. */ .journey { list-style: none; margin: 28px 0 0; padding: 0; } .j-step { position: relative; display: flex; gap: 16px; padding-bottom: 26px; --jd: 0s; } .j-step:last-child { padding-bottom: 0; } .j-step::before, .j-step::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; border-radius: 2px; } .j-step::before { background: var(--gray-200); } .j-step::after { background: var(--blue); transform: scaleY(0); transform-origin: top; } .j-step:last-child::before, .j-step:last-child::after { display: none; } .j-node { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); border: 2px solid var(--blue); color: var(--blue); } .j-node svg { width: 20px; height: 20px; } .j-body { padding-top: 2px; } .j-body b { display: block; color: var(--navy); font-size: 16.5px; line-height: 1.3; } .j-body p { margin: 5px 0 0; color: var(--gray-600); font-size: 14.5px; line-height: 1.55; max-width: 48ch; } .j-chip { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--blue); background: rgba(0, 132, 194, 0.1); border-radius: 999px; padding: 2.5px 10px; vertical-align: 2px; white-space: nowrap; } /* Dark-band variant */ .on-dark .j-node { background: rgba(255, 255, 255, 0.07); border-color: var(--blue-bright); color: var(--blue-bright); } .on-dark .j-body b { color: var(--white); } .on-dark .j-body p { color: rgba(255, 255, 255, 0.75); } .on-dark .j-step::before { background: rgba(255, 255, 255, 0.18); } .on-dark .j-step::after { background: var(--blue-bright); } .on-dark .j-chip { color: var(--white); background: rgba(255, 255, 255, 0.16); } /* Bright CTA canvases: blue-bright accents sink into the blue background; go white. */ .canvas--cta .j-node { border-color: rgba(255, 255, 255, 0.72); color: var(--white); background: rgba(255, 255, 255, 0.08); } .canvas--cta .j-step::after { background: rgba(255, 255, 255, 0.72); } /* The animated cycle (motion-gated) */ html.motion .journey.j-live .j-node { animation: j-node 12s var(--ease) var(--jd) infinite; } html.motion .journey.j-live .j-step:nth-child(1)::after { animation: j-fill-1 12s linear infinite; } html.motion .journey.j-live .j-step:nth-child(2)::after { animation: j-fill-2 12s linear infinite; } html.motion .journey.j-live .j-step:nth-child(3)::after { animation: j-fill-3 12s linear infinite; } html.motion .on-dark .journey.j-live .j-node { animation-name: j-node-dark; } @keyframes j-node { 0%, 3% { background: var(--white); color: var(--blue); box-shadow: 0 0 0 0 rgba(0, 132, 194, 0.3); transform: scale(1); } 7% { background: var(--blue); color: var(--white); box-shadow: 0 0 0 10px rgba(0, 132, 194, 0.14); transform: scale(1.07); } 22% { background: var(--blue); color: var(--white); box-shadow: 0 0 0 0 rgba(0, 132, 194, 0); transform: scale(1); } 28%, 100% { background: var(--white); color: var(--blue); box-shadow: 0 0 0 0 rgba(0, 132, 194, 0); } } @keyframes j-node-dark { 0%, 3% { background: rgba(255, 255, 255, 0.07); color: var(--blue-bright); box-shadow: 0 0 0 0 rgba(0, 160, 227, 0.35); transform: scale(1); } 7% { background: var(--blue); color: var(--white); box-shadow: 0 0 0 10px rgba(0, 160, 227, 0.16); transform: scale(1.07); } 22% { background: var(--blue); color: var(--white); box-shadow: 0 0 0 0 rgba(0, 160, 227, 0); transform: scale(1); } 28%, 100% { background: rgba(255, 255, 255, 0.07); color: var(--blue-bright); } } @keyframes j-fill-1 { 0%, 8% { transform: scaleY(0); opacity: 1; } 25%, 96% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @keyframes j-fill-2 { 0%, 33% { transform: scaleY(0); opacity: 1; } 50%, 96% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @keyframes j-fill-3 { 0%, 58% { transform: scaleY(0); opacity: 1; } 75%, 96% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .journey .j-node, .journey .j-step::before, .journey .j-step::after { animation: none !important; } } /* ==================== SECTION CANVASES ==================== One quiet, CSS-only background per menu section, used on BOTH the page hero and the closing CTA band so every section has a consistent bookend look. No photography here by design: photos live in the middle of the page. */ .canvas-solutions, .canvas-safety, .canvas-industries, .canvas-gov, .canvas-company { background-color: var(--ink); } /* GPS Solutions: the map grid. Fine dot lattice + a soft route glow, top right. */ .canvas-solutions { background-image: radial-gradient(rgba(156, 207, 234, 0.12) 1.2px, transparent 1.3px), radial-gradient(1200px 560px at 88% -12%, rgba(0, 160, 227, 0.30), transparent 62%), radial-gradient(900px 480px at -8% 112%, rgba(0, 132, 194, 0.16), transparent 60%), linear-gradient(135deg, var(--ink), var(--navy-deep) 78%); background-size: 26px 26px, auto, auto, auto; } /* Driver Safety & Benefits: concentric signal rings off the right edge. */ .canvas-safety { background-image: radial-gradient(circle at 105% 44%, transparent 118px, rgba(0, 160, 227, 0.11) 119px, transparent 121px, transparent 178px, rgba(0, 160, 227, 0.085) 179px, transparent 181px, transparent 248px, rgba(0, 160, 227, 0.06) 249px, transparent 251px, transparent 328px, rgba(0, 160, 227, 0.04) 329px, transparent 331px), radial-gradient(1100px 560px at 92% 118%, rgba(0, 132, 194, 0.24), transparent 62%), linear-gradient(135deg, var(--ink), var(--navy-deep) 78%); } /* Industries: broad diagonal work stripes, barely-there. */ .canvas-industries { background-image: repeating-linear-gradient(-56deg, rgba(255, 255, 255, 0.028) 0 22px, transparent 22px 66px), radial-gradient(1100px 520px at 12% -18%, rgba(0, 132, 194, 0.28), transparent 62%), linear-gradient(135deg, var(--ink), var(--navy-deep) 78%); } /* Government: fine vertical pinstripes + a civic top light. Slightly deeper navy. */ .canvas-gov { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 96px), linear-gradient(180deg, rgba(0, 160, 227, 0.13), transparent 36%), linear-gradient(160deg, #0F1D36, var(--navy-deep) 82%); } /* Company & Resources: one clean diagonal light sweep. */ .canvas-company { background-image: linear-gradient(112deg, transparent 58%, rgba(0, 160, 227, 0.09) 58.25%, transparent 82%), radial-gradient(1000px 520px at 80% -20%, rgba(0, 132, 194, 0.20), transparent 62%), linear-gradient(135deg, var(--ink), var(--navy-deep) 80%); } /* CTA variants: the closing band keeps its section's motif but flips to a brighter action-blue gradient, so it never mirrors the ink hero above it. */ .canvas--cta { background-color: #0A6AA8; } .canvas--cta.canvas-solutions { background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.2px, transparent 1.3px), radial-gradient(1000px 480px at 10% 120%, rgba(0, 174, 255, 0.34), transparent 62%), linear-gradient(140deg, #0A6AA8, #1B355C 85%); background-size: 30px 30px, auto, auto; } .canvas--cta.canvas-safety { background-image: radial-gradient(circle at 50% 135%, transparent 210px, rgba(255, 255, 255, 0.07) 211px, transparent 213px, transparent 292px, rgba(255, 255, 255, 0.05) 293px, transparent 295px, transparent 384px, rgba(255, 255, 255, 0.035) 385px, transparent 387px), linear-gradient(180deg, #16406E, #0A6AA8 135%); } .canvas--cta.canvas-industries { background-image: repeating-linear-gradient(56deg, rgba(255, 255, 255, 0.04) 0 22px, transparent 22px 66px), radial-gradient(1000px 480px at 88% 120%, rgba(0, 160, 227, 0.3), transparent 62%), linear-gradient(140deg, #0F5A90, #1B355C 85%); } .canvas--cta.canvas-gov { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 72px), linear-gradient(180deg, rgba(0, 174, 255, 0.1), transparent 40%), linear-gradient(160deg, #123056, #0E5487 120%); } .canvas--cta.canvas-company { background-image: linear-gradient(292deg, transparent 58%, rgba(255, 255, 255, 0.05) 58.25%, transparent 82%), radial-gradient(1000px 520px at 20% 120%, rgba(0, 160, 227, 0.26), transparent 62%), linear-gradient(135deg, #11497B, #0A6AA8 130%); } /* Faint photographic wash for LIGHT card sections: the photo ghosts through behind white cards. Content keeps normal light-section colors (no on-dark). */ .band-photo--faint { background: var(--white); } .band-photo--faint .band-photo__img { opacity: 0.2; filter: saturate(0.8); } .band-photo--faint .band-photo__scrim { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 26%, rgba(255, 255, 255, 0.35) 74%, rgba(255, 255, 255, 0.95)); } /* ---------- Imagery round 4 (July 10): chooser-card thumbs + article figures ---------- */ .step-photo { display: block; width: calc(100% + 48px); max-width: none; height: 132px; object-fit: cover; margin: -26px -24px 18px; border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; border-bottom: 1px solid var(--gray-200); } .article .post-figure { margin: 34px 0 10px; } .article .post-figure img { display: block; width: 100%; border-radius: var(--r-md); border: 1px solid var(--gray-200); background: var(--white); } .article .post-figure figcaption { font-size: 13.5px; color: var(--gray-400); font-weight: 600; margin-top: 10px; } /* ---------- Hero float widgets (solution pages) ---------- Small MyGeotab-style callout cards floating beside the hero device shot, Geotab-marketing style. Motion-gated: entrance stagger (hfIn) then a gentle bob loop (hfBob) per-card via --hfd; static + visible without JS or with reduced motion. Hidden under 900px where the hero stacks. */ .page-hero-figure { position: relative; } .page-hero-figure .hf-wrap { position: relative; } @media (min-width: 1240px) { .page-hero-grid .page-hero-figure:not(.page-hero-figure--wide) .hf-wrap { max-width: none; } } .hero-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 12px; box-shadow: 0 18px 40px rgba(7, 18, 36, 0.32); padding: 11px 14px; pointer-events: none; } .hero-float .hf-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #EAF1FA; color: var(--navy); display: grid; place-items: center; } .hero-float .hf-ico svg { width: 17px; height: 17px; } .hero-float .hf-ico.is-red { background: #FDEBE7; color: #C43D2A; } .hero-float .hf-ico.is-green { background: #E4F3EB; color: #1F8A5B; } .hero-float .hf-ico.is-amber { background: #FBEFD8; color: #9A6A1A; } .hero-float b { display: block; font-size: 13px; font-weight: 800; color: #23324A; line-height: 1.15; white-space: nowrap; } .hero-float small { display: block; font-size: 11px; color: #55637A; margin-top: 2px; white-space: nowrap; font-feature-settings: "tnum" 1; } .hf-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1F8A5B; margin-left: 6px; vertical-align: middle; } html.motion .hf-live { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0.5); animation: hfPulse 2s infinite; } @keyframes hfPulse { 70% { box-shadow: 0 0 0 6px rgba(31, 138, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); } } .hf-rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E15540; margin-left: 6px; vertical-align: middle; } html.motion .hf-rec { animation: hfBlink 1.6s steps(1) infinite; } @keyframes hfBlink { 50% { opacity: 0.15; } } html.motion .hero-float { animation: hfIn 0.8s var(--ease) var(--hfd, 0.55s) both; } @keyframes hfIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 900px) { .hero-float { display: none; } } @media (prefers-reduced-motion: reduce) { html.motion .hero-float { animation: none !important; opacity: 1 !important; transform: none !important; } html.motion .hf-live, html.motion .hf-rec { animation: none !important; } } /* ==================== DEVICE TOUR (device closer-look) v2 ==================== A large product render sits on a quiet "calibration plate": hairline concentric rings + a dashed ring (+ a faint dot lattice on the light variant), a soft glow, and a model plate beneath. Feature callouts flank it as auto-numbered tour stops (01-06 via CSS counter, DOM order) with a uniform device-side port node + dashed schematic lead. NO per-feature pointing: the retired JS leader lines / per-image COORD maps must not come back. Base state is final/visible (no-JS safe); under html.motion the pieces assemble once per scroll-in (one-shot entrances only). */ .anatomy { position: relative; overflow: hidden; } .anatomy::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 82% at 50% -4%, rgba(0,174,255,.11), transparent 58%); pointer-events: none; } .anatomy > .container { position: relative; z-index: 2; max-width: 1300px; } .anatomy .center { position: relative; z-index: 3; } .anatomy__stage { position: relative; margin-top: clamp(30px, 4.5vw, 56px); display: grid; grid-template-columns: minmax(190px, 268px) minmax(420px, 1fr) minmax(190px, 268px); align-items: center; gap: clamp(18px, 3vw, 56px); --wA: clamp(12px, 1.6vw, 26px); --wC: clamp(56px, 8vw, 124px); --wDrop: clamp(44px, 6vw, 88px); --wire: rgba(0,174,255,.5); --wireDot: var(--blue-bright); } /* --- centerpiece device on its calibration plate --- */ .anatomy__device { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 340px; } .anatomy__device img { position: relative; z-index: 3; width: 100%; max-width: 640px; height: auto; display: block; filter: drop-shadow(0 42px 60px rgba(0,0,0,.5)); } .anatomy__device::before { content: ""; position: absolute; z-index: 1; left: 50%; top: calc(50% - 30px); transform: translate(-50%,-50%); width: min(540px, 100%); height: min(540px, calc(100% - 60px)); pointer-events: none; background: radial-gradient(circle closest-side, transparent calc(100% - 1.4px), rgba(156,207,234,.28) calc(100% - .5px), transparent 100%), radial-gradient(circle closest-side, transparent calc(76% - 1.2px), rgba(156,207,234,.18) calc(76% - .4px), transparent calc(76% + .5px)); } .anatomy__glow { position: absolute; z-index: 1; width: 134%; aspect-ratio: 1; left: 50%; top: calc(46% - 28px); transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(0,160,227,.30), rgba(0,132,194,.09) 46%, transparent 68%); pointer-events: none; } .anatomy__glow::before { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: repeating-conic-gradient(rgba(0,174,255,.42) 0deg 1.5deg, transparent 1.5deg 3deg); -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 1.6px), #000 calc(100% - .7px)); mask: radial-gradient(circle closest-side, transparent calc(100% - 1.6px), #000 calc(100% - .7px)); } .anatomy__device::after { content: ""; position: absolute; z-index: 2; bottom: 66px; left: 50%; transform: translateX(-50%); width: 58%; height: 30px; background: radial-gradient(ellipse at center, rgba(0,160,227,.2), transparent 72%); filter: blur(7px); pointer-events: none; } /* model plate under the device */ .anatomy__plate { position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.05); font-size: 12.5px; line-height: 1.2; white-space: nowrap; } .anatomy__plate b { color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; position: relative; top: 1px; } .anatomy__plate span { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6); line-height: 1; } .anatomy__plate span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--blue-bright); } /* --- flanking callouts --- */ .anatomy__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); } .acall { position: relative; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px 18px 17px; transition: transform .32s var(--ease), border-color .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease); } .acall__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(0,174,255,.13); color: var(--blue-bright); margin-bottom: 12px; transition: background .32s var(--ease), color .32s var(--ease); } .acall__ico svg { width: 18px; height: 18px; stroke-width: 1.9; } .acall b { display: block; color: #fff; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 5px; text-wrap: balance; } .acall p { margin: 0; color: rgba(255,255,255,.62); font-size: 13.8px; line-height: 1.52; text-wrap: pretty; } /* orthogonal harness leaders: every card connects to the centerpiece in straight 1-3 segment runs (horizontal exit -> vertical jog -> horizontal run that tucks under the device render). Uniform by row position — still NO per-image COORD maps. Top card jogs down, bottom card jogs up, middle runs straight. */ .anatomy__col .acall:nth-child(1) { --drop: var(--wDrop); } .anatomy__col .acall:nth-child(2) { --drop: 0px; } .anatomy__col .acall:nth-child(3) { --drop: calc(-1 * var(--wDrop)); } .acall::before, .acall__ico::before, .acall__ico::after { content: ""; position: absolute; background: var(--wire); } .acall::before { top: calc(50% - .75px); height: 1.5px; width: var(--wA); } .acall__ico::before { width: 1.5px; top: calc(50% + min(0px, var(--drop)) - .75px); height: max(var(--drop), calc(0px - var(--drop))); } .acall__ico::after { height: 1.5px; top: calc(50% + var(--drop) - .75px); width: var(--wC); } .acall::after { content: ""; position: absolute; top: calc(50% + var(--drop) - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--wireDot); } .anatomy__col--l .acall::before { left: 100%; } .anatomy__col--l .acall__ico::before { left: calc(100% + var(--wA) - .75px); } .anatomy__col--l .acall__ico::after { left: calc(100% + var(--wA) - .75px); } .anatomy__col--l .acall::after { left: calc(100% + var(--wA) + var(--wC) - 2.5px); } .anatomy__col--r .acall::before { right: 100%; } .anatomy__col--r .acall__ico::before { right: calc(100% + var(--wA) - .75px); } .anatomy__col--r .acall__ico::after { right: calc(100% + var(--wA) - .75px); } .anatomy__col--r .acall::after { right: calc(100% + var(--wA) + var(--wC) - 2.5px); } .acall:hover { border-color: rgba(0,174,255,.45); background: rgba(0,174,255,.07); transform: translateY(-2px); } .acall:hover .acall__ico { background: rgba(0,174,255,.22); color: #fff; } /* --- hard-spec ribbon --- */ .anatomy__specs { position: relative; z-index: 2; margin: clamp(36px, 5vw, 64px) auto 0; max-width: 960px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); } .anatomy__spec { padding: 22px 18px; text-align: center; position: relative; } .anatomy__spec + .anatomy__spec::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: rgba(255,255,255,.13); } .anatomy__spec b { display: block; font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.04; font-variant-numeric: tabular-nums; } .anatomy__spec span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-bright); } .anatomy__foot { position: relative; z-index: 2; margin: clamp(24px,3vw,34px) auto 0; text-align: center; font-size: 12.5px; letter-spacing: .01em; color: rgba(255,255,255,.5); } /* --- entrance (one-shot) --- */ html.motion .anatomy__stage[data-animate], html.motion .anatomy__specs[data-animate] { opacity: 1; transform: none; } html.motion .anatomy__device img { opacity: 0; transform: translateY(26px) scale(.94); } html.motion .anatomy__stage.in .anatomy__device img { transition: opacity .95s var(--ease), transform 1s var(--ease); opacity: 1; transform: none; } html.motion .anatomy__device::before { opacity: 0; transform: translate(-50%,-50%) scale(.93); } html.motion .anatomy__stage.in .anatomy__device::before { transition: opacity 1.1s var(--ease) .15s, transform 1.15s var(--ease) .15s; opacity: 1; transform: translate(-50%,-50%) scale(1); } html.motion .anatomy__glow { opacity: 0; } html.motion .anatomy__stage.in .anatomy__glow { transition: opacity 1.2s var(--ease) .12s; opacity: 1; } html.motion .anatomy__glow::before { opacity: 0; transform: rotate(-18deg); } html.motion .anatomy__stage.in .anatomy__glow::before { transition: opacity 1s var(--ease) .2s, transform 1.4s var(--ease) .2s; opacity: 1; transform: rotate(0deg); } html.motion .anatomy__device::after { opacity: 0; } html.motion .anatomy__stage.in .anatomy__device::after { transition: opacity 1.2s var(--ease) .3s; opacity: 1; } html.motion .anatomy__plate { opacity: 0; transform: translateY(10px); } html.motion .anatomy__stage.in .anatomy__plate { transition: opacity .7s var(--ease) .55s, transform .7s var(--ease) .55s; opacity: 1; transform: none; } html.motion .anatomy__col--l .acall { opacity: 0; transform: translateX(-24px); } html.motion .anatomy__col--r .acall { opacity: 0; transform: translateX(24px); } html.motion .anatomy__stage.in .acall { transition: opacity .62s var(--ease), transform .62s var(--ease); opacity: 1; transform: none; transition-delay: calc(.4s + var(--i,0) * .14s); } html.motion .acall::before { opacity: 0; transform: scaleX(0); } html.motion .anatomy__col--l .acall::before { transform-origin: left center; } html.motion .anatomy__col--r .acall::before { transform-origin: right center; } html.motion .acall__ico::before { opacity: 0; transform: scaleY(0); } html.motion .anatomy__col .acall:nth-child(1) .acall__ico::before { transform-origin: center top; } html.motion .anatomy__col .acall:nth-child(3) .acall__ico::before { transform-origin: center bottom; } html.motion .acall__ico::after { opacity: 0; transform: scaleX(0); } html.motion .anatomy__col--l .acall__ico::after { transform-origin: left center; } html.motion .anatomy__col--r .acall__ico::after { transform-origin: right center; } html.motion .acall::after { opacity: 0; transform: scale(.3); } html.motion .anatomy__stage.in .acall::before { transition: opacity .3s var(--ease), transform .34s var(--ease); opacity: 1; transform: scaleX(1); transition-delay: calc(.6s + var(--i,0) * .14s); } html.motion .anatomy__stage.in .acall__ico::before { transition: opacity .26s var(--ease), transform .3s var(--ease); opacity: 1; transform: scaleY(1); transition-delay: calc(.76s + var(--i,0) * .14s); } html.motion .anatomy__stage.in .acall__ico::after { transition: opacity .3s var(--ease), transform .38s var(--ease); opacity: 1; transform: scaleX(1); transition-delay: calc(.9s + var(--i,0) * .14s); } html.motion .anatomy__stage.in .acall::after { transition: opacity .3s var(--ease), transform .3s var(--ease); opacity: 1; transform: scale(1); transition-delay: calc(1.12s + var(--i,0) * .14s); } html.motion .anatomy__spec { opacity: 0; transform: translateY(18px); } html.motion .anatomy__specs.in .anatomy__spec { transition: opacity .6s var(--ease), transform .6s var(--ease); opacity: 1; transform: none; transition-delay: calc(var(--i,0) * .09s); } @media (max-width: 980px) { .anatomy__stage { grid-template-columns: 1fr; gap: 30px; max-width: 540px; margin-left: auto; margin-right: auto; } .anatomy__device { order: -1; min-height: 0; gap: 18px; } .anatomy__device img { max-width: 430px; } .anatomy__device::before { height: min(540px, calc(100% - 44px)); } .anatomy__glow { width: 420px; top: calc(46% - 22px); } .anatomy__device::after { bottom: 50px; } .anatomy__col { gap: 18px; } .anatomy__col--l, .anatomy__col--r { text-align: left; } .acall::before, .acall::after, .acall__ico::before, .acall__ico::after { display: none; } html.motion .anatomy__col--l .acall { transform: translateX(-24px); } } @media (max-width: 620px) { .anatomy__specs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; border: 0; } .anatomy__spec { border-top: 1px solid rgba(255,255,255,.12); } .anatomy__spec + .anatomy__spec::before { display: none; } } @media (prefers-reduced-motion: reduce) { html.motion .anatomy__device img, html.motion .acall, html.motion .anatomy__spec, html.motion .anatomy__plate { opacity: 1 !important; transform: none !important; transition: none !important; } html.motion .anatomy__glow, html.motion .anatomy__device::after { opacity: 1 !important; transition: none !important; } html.motion .acall::before, html.motion .acall::after, html.motion .acall__ico::before, html.motion .acall__ico::after { opacity: 1 !important; transform: none !important; transition: none !important; } html.motion .anatomy__glow::before { opacity: 1 !important; transform: none !important; transition: none !important; } html.motion .anatomy__device::before { opacity: 1 !important; transform: translate(-50%,-50%) !important; transition: none !important; } } /* Light variant of the device-tour band (white section; solid white cards, navy type, brand-blue accents + faint dot lattice on the plate). */ .anatomy--light::before { background: radial-gradient(120% 82% at 50% -4%, rgba(0,132,194,.07), transparent 58%); } .anatomy--light .anatomy__device img { filter: drop-shadow(0 30px 48px rgba(18,35,63,.28)); } .anatomy--light .anatomy__device::before { background: radial-gradient(circle closest-side, transparent calc(100% - 1.4px), rgba(37,71,123,.24) calc(100% - .5px), transparent 100%), radial-gradient(circle closest-side, transparent calc(76% - 1.2px), rgba(37,71,123,.17) calc(76% - .4px), transparent calc(76% + .5px)); } .anatomy--light .anatomy__glow::after { content: ""; position: absolute; inset: 26%; background: radial-gradient(rgba(37,71,123,.15) 1.1px, transparent 1.5px); background-size: 22px 22px; background-position: center; -webkit-mask: radial-gradient(circle closest-side, #000 26%, transparent 66%); mask: radial-gradient(circle closest-side, #000 26%, transparent 66%); } .anatomy--light .anatomy__glow { background: radial-gradient(circle, rgba(0,132,194,.13), rgba(0,132,194,.04) 46%, transparent 68%); } .anatomy--light .anatomy__glow::before { background: repeating-conic-gradient(rgba(0,132,194,.5) 0deg 1.5deg, transparent 1.5deg 3deg); } .anatomy--light .anatomy__device::after { background: radial-gradient(ellipse at center, rgba(18,35,63,.16), transparent 72%); } .anatomy--light .anatomy__plate { border-color: var(--gray-200); background: #fff; box-shadow: 0 4px 14px rgba(18,35,63,.06); } .anatomy--light .anatomy__plate b { color: var(--navy); } .anatomy--light .anatomy__plate span { color: var(--gray-600); } .anatomy--light .anatomy__plate span::before { background: var(--blue); } .anatomy--light .acall { background: #EFF6FB; border-color: rgba(0, 132, 194, 0.22); box-shadow: 0 6px 20px rgba(18, 35, 63, 0.05); } .anatomy--light .acall:hover { border-color: rgba(0, 132, 194, 0.5); background: #E7F2FA; box-shadow: 0 14px 30px rgba(18, 35, 63, 0.1); } .anatomy--light .acall__ico { background: rgba(0, 132, 194, 0.13); color: var(--blue); } .anatomy--light .acall:hover .acall__ico { background: rgba(0, 132, 194, 0.2); color: var(--blue); } .anatomy--light .acall b { color: var(--navy); } .anatomy--light .acall p { color: var(--gray-600); } .anatomy--light .anatomy__stage { --wire: rgba(0,132,194,.45); --wireDot: var(--blue); } .anatomy--light .anatomy__specs { border-color: var(--gray-200); } .anatomy--light .anatomy__spec + .anatomy__spec::before { background: var(--gray-200); } .anatomy--light .anatomy__spec b { color: var(--navy); } .anatomy--light .anatomy__spec span { color: var(--blue); } .anatomy--light .anatomy__foot { color: var(--gray-600); } /* --- AI event clip library (real GO Focus footage; dash-camera pages) --- */ .evlib { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px; align-items: start; } .evlib__col { display: grid; gap: 12px; align-content: start; } .evlib__head { margin-bottom: 4px; } .evlib__head b { display: flex; align-items: center; gap: 9px; font-size: 17px; color: var(--navy); } .evlib__head b svg { width: 18px; height: 18px; color: var(--blue); flex: none; } .evlib__head span { display: block; font-size: 13.5px; color: var(--gray-600); margin-top: 3px; padding-left: 27px; } .evlib__head { margin-bottom: 8px; } .evdrop { border: 1px solid #E4EAF1; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .22s ease, box-shadow .22s ease; } .evdrop.is-open { border-color: transparent; box-shadow: 0 18px 40px rgba(18, 35, 63, 0.15); } .evdrop__hd { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 16px; margin: 0; background: none; border: 0; font: inherit; color: var(--navy); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .evdrop:not(.is-open) .evdrop__hd:hover { background: #F5F8FB; } .evdrop__ico { flex: none; width: 20px; height: 20px; color: var(--blue); display: flex; align-items: center; justify-content: center; } .evdrop__ico svg { width: 20px; height: 20px; } .evdrop__name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; } .evdrop__cam { margin-left: auto; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: #8A96A6; white-space: nowrap; } .evdrop__chev { flex: none; width: 18px; height: 18px; color: #9BA7B4; transition: transform .25s ease, color .2s ease; } .evdrop.is-open .evdrop__chev { transform: rotate(180deg); color: var(--blue); } .evdrop.is-open .evdrop__ico, .evdrop.is-open .evdrop__name { color: var(--blue); } .evdrop__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1); } .evdrop.is-open .evdrop__body { grid-template-rows: 1fr; } .evdrop__inner { overflow: hidden; min-height: 0; } .evdrop__stage { position: relative; margin: 2px 12px 0; border-radius: 11px; overflow: hidden; background: #0E1B2C; } .evdrop__stage video { display: block; width: 100%; aspect-ratio: 984 / 600; object-fit: cover; } .evdrop__desc { display: flex; align-items: center; gap: 10px; padding: 13px 15px 15px; } .evdrop__flag { flex: none; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--blue); background: #EAF4FB; padding: 4px 9px; border-radius: 999px; } .evdrop__desc p { margin: 0; font-size: 13px; color: var(--gray-600); text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { .evdrop__body { transition: none; } } .evclip { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #0E1B2C; box-shadow: 0 18px 38px rgba(18, 35, 63, 0.22); } .evclip video { display: block; width: 100%; aspect-ratio: 984 / 600; object-fit: cover; } .evclip figcaption { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; } .evclip__pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(18, 35, 63, 0.82); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; } .evclip__pill svg { width: 14px; height: 14px; color: var(--blue-bright); } .evclip__cam { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, 0.9); background: rgba(18, 35, 63, 0.55); padding: 5px 10px; border-radius: 999px; } .evgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1060px; margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .evlib { grid-template-columns: 1fr; gap: 38px; } } @media (max-width: 760px) { .evgrid-2 { grid-template-columns: 1fr; } } @keyframes wirePing { 0% { transform: scale(1); } 40% { transform: scale(2.6); } 100% { transform: scale(1); } } @media (max-width: 980px) { .anatomy__wires { display: none; } } @media (prefers-reduced-motion: reduce) { .anatomy__wires .wire-dot { animation: none !important; } } /* ===================================================================== Accordion + synced media panel — converts long "blocked text" list sections into a compact, click-to-open accordion with the selected item's image shown to the right. Native
so it degrades without JS (first item open); motion.js enhances to single-open + media swap. ===================================================================== */ .acc-head { max-width: 720px; margin: 0 0 40px; } .acc { display: grid; gap: 30px; align-items: start; } /* Solo variant: accordion only (no media panel), sits inside an existing layout column so the section keeps its live widget / image on the right. */ .acc.acc--solo { display: block; } @media (min-width: 900px) { .acc { grid-template-columns: 1.05fr 0.95fr; gap: 54px; } } .acc__list { display: flex; flex-direction: column; } .acc__item { border-top: 1px solid var(--gray-200); } .acc__item:last-of-type { border-bottom: 1px solid var(--gray-200); } .acc__head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 15px; padding: 21px 4px; color: var(--navy); font-weight: 700; transition: color .2s var(--ease); } .acc__head::-webkit-details-marker { display: none; } .acc__head:hover { color: var(--blue); } .acc__head .ico { flex: none; width: 42px; height: 42px; border-radius: 11px; background: #EAF1FA; color: var(--blue); display: grid; place-items: center; transition: background .25s var(--ease), color .25s var(--ease); } .acc__head .ico svg { width: 21px; height: 21px; } .acc__title { flex: 1; font-size: 17.5px; line-height: 1.3; } .acc__head .chev { flex: none; width: 20px; height: 20px; color: var(--gray-400); transition: transform .3s var(--ease); } .acc__item[open] .acc__head, .acc__item[open] .acc__head .chev { color: var(--blue); } .acc__item[open] .acc__head .ico { background: var(--blue); color: #fff; } .acc__item[open] .acc__head .chev { transform: rotate(180deg); } .acc__panel { padding: 0 8px 24px 57px; } .acc__panel p { margin: 0; color: var(--gray-600); font-size: 15.5px; line-height: 1.62; } .acc__panel p + p { margin-top: 12px; } /* On-dark accordions (photo/ink bands): keep every text level legible. */ .on-dark .acc__item { border-color: rgba(255, 255, 255, 0.18); } .on-dark .acc__head { color: var(--white); } .on-dark .acc__head:hover { color: var(--blue-bright); } .on-dark .acc__head .ico { background: rgba(255, 255, 255, 0.12); color: var(--blue-bright); } .on-dark .acc__head .chev { color: rgba(255, 255, 255, 0.55); } .on-dark .acc__item[open] .acc__head, .on-dark .acc__item[open] .acc__head .chev { color: var(--blue-bright); } .on-dark .acc__item[open] .acc__head .ico { background: var(--blue); color: #fff; } .on-dark .acc__panel p { color: rgba(255, 255, 255, 0.84); } .acc__media { aspect-ratio: 4 / 3; display: grid; place-items: center; align-self: center; } .acc__media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .3s var(--ease); } /* Host variant: wraps an existing split-media / split-live / media-video / duo-card block from a converted section, so the media keeps its styling but is vertically centered against the accordion LIST (align-self above), not against the section's heading + lead + list as the old .split layout did. */ .acc__media--host { aspect-ratio: auto; display: flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; } .acc__media--host > * { width: 100%; } /* Photo media gets a fixed 4:3 crop so per-item image swaps never change the panel height (float = transparent device art keeps natural proportions). */ .acc__media--host .split-media:not(.float) img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* Live-widget media: center the card and hold a steady footprint so per-item widget swaps (motion.js data-widget sync) don't jolt the layout. */ .acc__media--host .split-live { display: flex; justify-content: center; align-items: center; min-height: 340px; transition: opacity .25s var(--ease); } .acc__media--host .split-live .lw { max-width: 100%; } @media (min-width: 900px) { .acc__media--host .split-live .lw { transform: scale(1.08); transform-origin: center; } } @media (max-width: 899px) { .acc__media--host .split-live { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .acc__media--host .split-live { transition: none; } } @media (max-width: 899px) { .acc__media { aspect-ratio: 16 / 10; } .acc__media--host { aspect-ratio: auto; } } /* ---------- Sticky on-page subnav (long product pages, built by js/subnav.js) ---------- */ .subnav { background: var(--navy); } /* lives INSIDE the sticky .nav (appended by subnav.js) — no own sticky/top, so no seam can open during the nav height transition */ .nav.has-subnav { border-bottom: 0; } /* the nav's 1px (transparent) border let white bg paint a hairline under the navy subnav; body.scrolled box-shadow still separates on non-subnav pages */ .subnav-inner { display: flex; align-items: center; gap: 18px; min-height: 50px; } .subnav-links { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .subnav-links::-webkit-scrollbar { display: none; } .subnav-links a { flex: none; padding: 15px 12px 13px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.72); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s var(--ease), border-color .15s var(--ease); } .subnav-links a:hover { color: var(--white); } .subnav-links a.active { color: var(--white); border-bottom-color: var(--blue-bright, #00AEFF); } @media (max-width: 720px) { .subnav-links a { padding: 14px 10px 12px; } } /* ---------- Reading progress bar (js/progress.js) ---------- */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--blue); z-index: 60; pointer-events: none; } /* ---------- Comparison table: sticky header + row hover (overflow now visible for sticky) ---------- */ .compare thead th { position: sticky; top: 63px; z-index: 6; } .compare thead th:first-child { border-top-left-radius: var(--r-lg); } .compare thead th:last-child { border-top-right-radius: var(--r-lg); } .compare tr:last-child th:first-child { border-bottom-left-radius: var(--r-lg); } .compare tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); } .compare tbody tr:hover td:nth-child(2) { background: rgba(37, 71, 123, 0.09); } .compare tbody tr:hover td:nth-child(3), .compare tbody tr:hover th { background: var(--bg-soft); } /* ---------- Find-your-device wizard (solutions page, js/wizard.js) ---------- */ .wizard { max-width: 860px; margin: 44px auto 0; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 34px 38px 38px; } .wiz-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .wiz-step-label { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.65); white-space: nowrap; } .wiz-step-label b { color: var(--white); } .wiz-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; } .wiz-bar i { display: block; height: 100%; width: 33.3%; background: var(--blue); border-radius: 999px; transition: width .35s var(--ease); } .wiz-q { color: var(--white); font-size: 22px; margin: 0 0 18px; } .wiz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .wiz-opts--2 { grid-template-columns: repeat(2, 1fr); } .wiz-opt { display: block; text-align: left; font: inherit; padding: 18px 16px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); } .wiz-opt:hover, .wiz-opt:focus-visible { border-color: var(--blue); background: rgba(0,160,227,.12); transform: translateY(-2px); } .wiz-opt svg { width: 22px; height: 22px; color: var(--blue-bright, #00AEFF); margin-bottom: 10px; } .wiz-opt b { display: block; color: var(--white); font-size: 15.5px; margin-bottom: 4px; } .wiz-opt span { display: block; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.45; } .wiz-back { margin-top: 20px; background: none; border: 0; color: rgba(255,255,255,.6); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; } .wiz-back:hover { color: var(--white); } .wiz-back svg { width: 15px; height: 15px; } .wiz-result { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: center; } .wiz-result h3 { color: var(--white); font-size: 26px; margin: 8px 0 12px; } .wiz-result p { color: rgba(255,255,255,.75); line-height: 1.6; margin: 0; } .wiz-result img { width: 100%; max-width: 290px; height: auto; justify-self: center; filter: drop-shadow(0 18px 42px rgba(0,0,0,.35)); } .wiz-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } @media (max-width: 860px) { .wiz-opts, .wiz-opts--2 { grid-template-columns: 1fr 1fr; } .wiz-result { grid-template-columns: 1fr; } .wiz-result img { order: -1; max-width: 210px; } .wizard { padding: 26px 22px; } } @media (max-width: 560px) { .wiz-opts, .wiz-opts--2 { grid-template-columns: 1fr; } } /* ---------- Mobile sticky demo bar (phones; injected by chrome.js) ---------- */ .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--gray-200); box-shadow: 0 -8px 28px rgba(18,35,63,.14); transform: translateY(112%); transition: transform .28s var(--ease); } .cta-bar.on { transform: translateY(0); } .cta-bar__demo { flex: 1; text-align: center; } .cta-bar__call { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--navy); color: var(--navy); font-weight: 700; font-size: 14.5px; } .cta-bar__call svg { width: 16px; height: 16px; } @media (max-width: 720px) { .cta-bar { display: flex; } body.has-ctabar { padding-bottom: 66px; } } @media (prefers-reduced-motion: reduce) { .cta-bar { transition: none; } } /* ---------- Form trust row (under submit buttons) ---------- */ .form-trust { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--gray-600); grid-column: 1 / -1; } .form-trust a { color: inherit; text-decoration: underline; font-weight: 600; } .on-dark .form-trust, [class*="band-ink"] .form-trust, [class*="canvas"] .form-trust, .page-hero .form-trust { color: rgba(255,255,255,.66); } /* ---------- Inside-MyGeotab screen embeds (dash-screens canvases scaled to fit; js/mgshot.js) ---------- */ .mgshot { position: relative; border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); overflow: hidden; aspect-ratio: 1920 / 1250; background: #fff; } .mgshot iframe { width: 1920px; height: 1250px; border: 0; position: absolute; left: 0; top: 0; transform-origin: top left; pointer-events: none; } .mgshot-note { text-align: center; font-size: 11.5px; color: var(--gray-400); margin: 12px 0 0; } /* ---------- Demo pack-and-ship scene (.packshot, request-demo; controller in js/motion.js) ---------- Base state (no JS / reduced motion) = the reference composition: device hovering over the open carton, label on the front. html.motion cycles drop -> seal -> ship. */ .packshot { max-width: 480px; margin: 0 auto; width: 100%; } .packshot__tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .packshot__tab { font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--gray-600); background: var(--white); border: 1px solid var(--gray-200); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } .packshot__tab:hover { border-color: var(--blue); color: var(--blue); } .packshot__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .packshot__tab.is-on { background: var(--blue); border-color: var(--blue); color: var(--white); } .packshot__stage { position: relative; aspect-ratio: 340 / 320; max-width: 440px; margin: 4px auto 0; overflow: hidden; } .packshot__crate { position: absolute; inset: 0; z-index: 1; } .packshot__back, .packshot__front { position: absolute; inset: 0; width: 100%; height: 100%; } .packshot__back { z-index: 1; } .packshot__front { z-index: 3; } .packshot__dev { position: absolute; z-index: 2; left: 50%; bottom: 53%; width: 54%; height: auto; transform: translateX(-50%); transform-origin: bottom center; filter: drop-shadow(0 10px 18px rgba(18, 35, 63, 0.22)); transition: bottom .72s cubic-bezier(.45, .03, .68, .14), transform .72s cubic-bezier(.45, .03, .68, .14), opacity .28s ease; } .packshot__lid { opacity: 0; } .packshot__ground { position: absolute; left: 50%; bottom: 4.5%; width: 62%; height: 8%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(18, 35, 63, 0.16), transparent 72%); transition: opacity .5s ease .1s; } .packshot__sticker { position: absolute; z-index: 4; left: 50%; top: 61%; width: 41%; transform: translate(-50%, 0) rotate(-2.5deg); background: var(--white); border-radius: 6px; padding: 7px 8px 8px; box-shadow: 0 4px 12px rgba(18, 35, 63, 0.2); display: flex; flex-direction: column; gap: 5px; } .packshot__sticker b { display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--white); background: var(--navy); border-radius: 3px; padding: 3px 4px; font-weight: 800; text-align: center; white-space: nowrap; line-height: 1.3; } .packshot__sticker i { display: block; height: 12px; margin: 0 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px); } .packshot__sticker span { display: block; font-size: 9px; font-weight: 600; color: var(--gray-600); text-align: center; white-space: nowrap; line-height: 1.2; } .packshot__arrows i { position: absolute; z-index: 0; width: 4px; height: 30px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--blue-bright) 0 5px, transparent 5px 9px); transition: opacity .3s ease; } .packshot__arrows i::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 7px solid transparent; border-top: 9px solid var(--blue-bright); border-bottom: 0; } .packshot__arrows i:nth-child(1) { left: 30%; top: 5%; } .packshot__arrows i:nth-child(2) { left: 49.4%; top: 1.5%; height: 40px; } .packshot__arrows i:nth-child(3) { left: 68%; top: 5%; } .packshot__zoom { opacity: 0; } .packshot__zoom i { position: absolute; left: 4%; height: 5px; border-radius: 3px; background: var(--blue-tint); opacity: 0; } .packshot__zoom i:nth-child(1) { top: 48%; width: 24%; } .packshot__zoom i:nth-child(2) { top: 56%; width: 32%; } .packshot__zoom i:nth-child(3) { top: 64%; width: 18%; } .packshot__legend { display: flex; justify-content: center; align-items: flex-start; gap: 10px; margin-top: 10px; } .packshot__step { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; max-width: 132px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--gray-600); line-height: 1.3; opacity: .55; transition: opacity .3s var(--ease), color .3s var(--ease); } .packshot__step.is-on { opacity: 1; color: var(--navy); } .packshot__stepico { width: 34px; height: 34px; border-radius: 50%; background: var(--gray-100); color: var(--navy); display: grid; place-items: center; transition: background .3s var(--ease), color .3s var(--ease); } .packshot__stepico svg { width: 17px; height: 17px; } .packshot__step.is-on .packshot__stepico { background: var(--blue); color: var(--white); } /* motion cycle states (classes only added under html.motion by the controller) */ html.motion .packshot .packshot__sticker { opacity: 0; transform: translate(-50%, 8px) rotate(-2.5deg) scale(.5); } html.motion .packshot.ps-p2 .packshot__sticker { opacity: 1; transform: translate(-50%, 0) rotate(-2.5deg) scale(1); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .32s, opacity .3s ease .32s; } .packshot.ps-p1 .packshot__dev { bottom: 34%; transform: translateX(-50%) scale(.96); } .packshot.ps-p2 .packshot__dev { opacity: 0; transition: opacity .25s ease .1s; } .packshot.ps-p2 .packshot__back { opacity: 0; transition: opacity .32s ease; } .packshot.ps-p2 .packshot__lid { opacity: 1; transition: opacity .28s ease .12s; } .packshot.ps-p2 .packshot__arrows i, .packshot.ps-p3 .packshot__arrows i { opacity: 0; } html.motion .packshot.ps-p2 .packshot__crate { animation: psPack .55s cubic-bezier(.34, 1.56, .64, 1) .12s; } @keyframes psPack { 0% { transform: scale(1); } 40% { transform: scale(1.05, .93) translateY(6px); } 100% { transform: scale(1); } } .packshot .packshot__crate { transition: transform .9s cubic-bezier(.6, -.12, .85, .45); } .packshot.ps-p3 .packshot__crate { transform: translateX(140%) rotate(6deg); } .packshot.ps-p3 .packshot__ground { opacity: 0; } .packshot.ps-p3 .packshot__zoom { opacity: 1; } html.motion .packshot.ps-p3 .packshot__zoom i { animation: psZoom .8s ease-out forwards; transform-origin: right center; } html.motion .packshot.ps-p3 .packshot__zoom i:nth-child(2) { animation-delay: .1s; } html.motion .packshot.ps-p3 .packshot__zoom i:nth-child(3) { animation-delay: .2s; } @keyframes psZoom { 0% { opacity: 0; transform: translateX(46px) scaleX(.25); } 30% { opacity: .95; } 100% { opacity: 0; transform: translateX(-34px) scaleX(1); } } html.motion .packshot__arrows i { animation: psBob 1.3s ease-in-out infinite; } html.motion .packshot__arrows i:nth-child(2) { animation-delay: .18s; } html.motion .packshot__arrows i:nth-child(3) { animation-delay: .36s; } @keyframes psBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } html.motion .packshot.ps-in .packshot__crate { animation: psShotIn .45s ease both; } @keyframes psShotIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .packshot.ps-noanim * { transition: none !important; animation: none !important; } /* Hero placement (request-demo): dark-band variant inside .page-hero-figure--pack */ .page-hero-figure--pack { z-index: 2; padding: 0 24px 64px; } @media (min-width: 900px) { .page-hero-figure--pack { padding: 48px 0; justify-self: end; width: 100%; max-width: 500px; } } @media (min-width: 1240px) { .page-hero-grid .page-hero-figure--pack { justify-self: end; width: 100%; max-width: 520px; } } .packshot--dark .packshot__tab { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); } .packshot--dark .packshot__tab:hover { border-color: var(--blue-bright); color: var(--blue-bright); } .packshot--dark .packshot__tab.is-on { background: var(--blue); border-color: var(--blue); color: var(--white); } .packshot--dark .packshot__ground { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 72%); } .packshot--dark .packshot__dev { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45)); } .packshot--dark .packshot__sticker { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } .packshot--dark .packshot__step { color: rgba(255, 255, 255, 0.62); } .packshot--dark .packshot__step.is-on { color: var(--white); } .packshot--dark .packshot__stepico { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); } .packshot--dark .packshot__step.is-on .packshot__stepico { background: var(--blue); color: var(--white); } .packshot--dark .packshot__zoom i { background: rgba(156, 207, 234, 0.75); } /* ---------- OEM brand wall (.oemwall, oem-integrations; ping controller in js/motion.js) ---------- */ .oemwall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px; } .oemwall__chip { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; min-height: 96px; display: grid; place-items: center; padding: 16px 18px; transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .oemwall__chip img { max-height: 54px; max-width: min(160px, 82%); width: auto; height: auto; object-fit: contain; } .oemwall__chip:hover { border-color: rgba(0, 132, 194, 0.4); box-shadow: 0 10px 24px rgba(18, 35, 63, 0.1); transform: translateY(-2px); } html.motion .oemwall__chip.is-ping { border-color: rgba(0, 132, 194, 0.55); box-shadow: 0 0 0 3px rgba(0, 132, 194, 0.13), 0 10px 24px rgba(18, 35, 63, 0.08); } .oemwall__note { text-align: center; font-size: 13.5px; color: var(--gray-600); margin: 26px auto 0; max-width: 620px; } @media (max-width: 1000px) { .oemwall { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 760px) { .oemwall { grid-template-columns: repeat(3, 1fr); gap: 10px; } .oemwall__chip { min-height: 76px; padding: 12px 14px; } .oemwall__chip img { max-height: 42px; } } @media (max-width: 480px) { .oemwall { grid-template-columns: repeat(2, 1fr); } } /* Hero: widget card + device overlap (driver-app) */ .eldhero { position: relative; max-width: 440px; margin: 0 auto; } @media (min-width: 900px) { .page-hero-grid .page-hero-figure:has(.eldhero) { justify-self: end; width: 100%; max-width: 500px; } .eldhero { margin: 0 0 0 auto; } } .eldhero .lw__card { box-shadow: 0 26px 54px -18px rgba(0, 0, 0, 0.5); } .eldhero > img { position: absolute; right: -18px; bottom: -36px; width: 215px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); } @media (max-width: 900px) { .eldhero > img { width: 180px; right: -6px; bottom: -26px; } } /* Install-guide line-art tiles (install-support) */ .igrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .igrid figure { margin: 0; background: #fff; border: 1px solid #E3EAF2; border-radius: 14px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 26px -18px rgba(11, 30, 48, 0.18); } .igrid img { width: 100%; height: 170px; object-fit: contain; } .igrid figcaption { display: flex; flex-direction: column; gap: 4px; } .igrid figcaption b { font-size: 14.5px; color: #14293D; } .igrid figcaption span { font-size: 13px; line-height: 1.5; color: #5B7186; } @media (max-width: 900px) { .igrid { grid-template-columns: 1fr 1fr; } } .acc__media--flush .acc__alt { width: 100%; max-width: 520px; height: auto; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(11, 30, 48, 0.28); margin: 0 auto; } .rgscene { margin-top: 44px; } .rgscene__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .rgscene__cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; } .rgscene__cards .lw__card { box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.42); } .rgscene__dev { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 36px; flex-wrap: wrap; } .rgscene__dev img { width: min(270px, 44%); height: auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.45)); } .rgscene__dev p { margin: 0; display: flex; flex-direction: column; gap: 3px; max-width: 320px; } .rgscene__dev b { color: var(--white); font-size: 17.5px; font-weight: 800; } .rgscene__dev span { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; line-height: 1.5; } @media (max-width: 900px) { .rgscene__cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } } /* ---------- Testimonial library grid (testimonials.html) ---------- */ .tgrid { columns: 3 300px; column-gap: 16px; } .tgrid .tcard { break-inside: avoid; margin: 0 0 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 24px 26px 22px; box-shadow: 0 4px 14px rgba(18, 35, 63, 0.04); } .tgrid blockquote { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--dark); text-wrap: pretty; } .tgrid cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--navy); } .tgrid cite span { display: block; font-weight: 600; color: var(--gray-600); font-size: 12.5px; margin-top: 2px; } /* ---------- GO Anywhere track wall (.tkwall, go-anywhere; ping via motion.js wall controller) ---------- */ .tkwall { margin-top: 44px; } .tkwall__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .tkwall__tile { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-200); background: var(--white); transition: box-shadow .3s var(--ease), border-color .3s var(--ease); } .tkwall__tile img { width: 100%; height: auto; aspect-ratio: 380 / 204; object-fit: cover; display: block; } .tkwall__tile figcaption { font-size: 12.5px; font-weight: 700; color: var(--navy); padding: 8px 12px; } .tkwall__tile::after { content: ""; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.92); opacity: 0; transition: opacity .3s var(--ease); } .tkwall__tile:hover { box-shadow: 0 10px 24px rgba(18, 35, 63, 0.12); border-color: rgba(0, 132, 194, 0.4); } .tkwall__tile.is-ping { border-color: rgba(0, 132, 194, 0.55); box-shadow: 0 0 0 3px rgba(0, 132, 194, 0.13), 0 10px 24px rgba(18, 35, 63, 0.08); } .tkwall__tile.is-ping::after, .tkwall__tile:hover::after { opacity: 1; } .tkwall__dev { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 30px; flex-wrap: wrap; } .tkwall__dev img { width: min(300px, 46%); height: auto; filter: drop-shadow(0 16px 30px rgba(18, 35, 63, 0.25)); } .tkwall__dev p { margin: 0; display: flex; flex-direction: column; gap: 3px; max-width: 320px; } .tkwall__dev b { color: var(--navy); font-size: 17.5px; font-weight: 800; } .tkwall__dev span { color: var(--gray-600); font-size: 14.5px; line-height: 1.5; } @media (max-width: 1000px) { .tkwall__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 760px) { .tkwall__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .tkwall__tile figcaption { font-size: 11.5px; padding: 6px 9px; } } @media (max-width: 480px) { .tkwall__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .packshot__tab { font-size: 12px; padding: 6px 11px; } .packshot__step { font-size: 11.5px; } }