/* ========================================================================== A-Trak — Bold & Technical Telematics Design System ========================================================================== */ :root { /* Surfaces — warm-neutral dark */ --ink-000: #05080a; /* deepest bg */ --ink-050: #0a0f12; /* primary bg */ --ink-100: #0f1619; /* card bg */ --ink-200: #161f23; /* elevated */ --ink-300: #1f2a2f; /* borders */ --ink-400: #2a383e; /* stronger borders */ --ink-500: #3d5159; --ink-600: #647680; --ink-700: #8a9ba4; --ink-800: #b8c4cb; --ink-900: #e4ebef; --ink-950: #f3f6f8; /* Accents — evolved from A-Trak teal */ --signal: #00e5a8; /* signal green — primary accent */ --signal-dim: #00a87c; --signal-glow: rgba(0, 229, 168, 0.15); --teal: #12b5a3; /* A-Trak teal heritage */ --teal-deep: #0d6b63; --amber: #ffb020; /* warnings/alerts */ --amber-dim: #cc8a10; --danger: #ff5c5c; /* Type */ --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", "SF Mono", ui-monospace, monospace; /* Radii */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* Shadows */ --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 30px 60px -30px rgba(0,0,0,0.6); --shadow-glow: 0 0 0 1px rgba(0,229,168,0.2), 0 10px 40px -10px rgba(0,229,168,0.3); /* Layout */ --max-w: 1280px; --gutter: clamp(20px, 4vw, 48px); } * { box-sizing: border-box; } *::selection { background: var(--signal); color: var(--ink-000); } /* Theme variants — overrides applied via [data-theme] on */ html[data-theme="light"] { --ink-000: #ffffff; --ink-050: #ffffff; --ink-100: #f7f8f9; --ink-200: #eef1f3; --ink-300: #e0e5e8; --ink-400: #c8d0d4; --ink-500: #8f9ba2; --ink-600: #5d6b73; --ink-700: #3f4a52; --ink-800: #242c31; --ink-900: #12171a; --ink-950: #05080a; --signal: #00a87c; --signal-glow: rgba(0, 168, 124, 0.12); --shadow-card: 0 1px 0 rgba(255,255,255,0.8) inset, 0 20px 50px -20px rgba(10,20,30,0.15); } html[data-theme="grey"] { --ink-000: #f0f1f3; --ink-050: #eef0f2; --ink-100: #f7f8f9; --ink-200: #e6e9ec; --ink-300: #d4d9dd; --ink-400: #b8c0c6; --ink-500: #8b959c; --ink-600: #5d6b73; --ink-700: #3f4a52; --ink-800: #242c31; --ink-900: #12171a; --ink-950: #05080a; --signal: #00a87c; --signal-glow: rgba(0, 168, 124, 0.12); --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 20px 50px -20px rgba(10,20,30,0.12); } html, body { margin: 0; padding: 0; background: var(--ink-050); color: var(--ink-900); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } /* Grid texture — subtle technical backdrop */ body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at top, black 20%, transparent 80%); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* --------------------------------------------------------------- Container */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; } /* --------------------------------------------------------------- Typography */ h1, h2, h3, h4, h5 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--ink-950); text-wrap: balance; } .h-display { font-size: clamp(44px, 7vw, 92px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; } .h-xl { font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.03em; } .h-lg { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -0.025em; } .h-md { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.015em; } .h-sm { font-size: 18px; font-weight: 600; } p { margin: 0; color: var(--ink-800); text-wrap: pretty; } .lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-700); max-width: 62ch; line-height: 1.5; } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal); } .mono-dim { color: var(--ink-600); } /* --------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-sm); font: 500 14px/1 var(--font-sans); letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s; white-space: nowrap; } .btn-primary { background: var(--signal); color: var(--ink-000); font-weight: 600; } .btn-primary:hover { background: #00ffbd; transform: translateY(-1px); } .btn-ghost { border-color: var(--ink-400); color: var(--ink-900); background: transparent; } .btn-ghost:hover { border-color: var(--signal); color: var(--signal); } .btn-lg { padding: 16px 24px; font-size: 15px; } .btn .arr { transition: transform .15s; } .btn:hover .arr { transform: translateX(3px); } /* --------------------------------------------------------------- Cards */ .card { background: var(--ink-100); border: 1px solid var(--ink-300); border-radius: var(--r-md); padding: 28px; position: relative; overflow: hidden; } .card-hover { transition: border-color .2s, transform .2s; } .card-hover:hover { border-color: var(--ink-400); } /* --------------------------------------------------------------- Pill/Tag */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ink-100); border: 1px solid var(--ink-300); font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-800); text-transform: uppercase; } .pill-signal { background: rgba(0,229,168,0.08); border-color: rgba(0,229,168,0.25); color: var(--signal); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(0,229,168,0.2); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* --------------------------------------------------------------- Nav */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(20px) saturate(140%); background: rgba(10, 15, 18, 0.72); border-bottom: 1px solid var(--ink-300); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); height: 68px; display: flex; align-items: center; gap: 32px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; } .nav-logo .logomark { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--signal) 0%, var(--teal) 100%); display: grid; place-items: center; color: var(--ink-000); font-weight: 700; font-size: 13px; font-family: var(--font-mono); } .nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; } .nav-links a { display: block; padding: 8px 14px; font-size: 14px; color: var(--ink-800); border-radius: var(--r-sm); transition: color .15s, background .15s; } .nav-links a:hover { color: var(--ink-950); background: var(--ink-200); } .nav-links a.active { color: var(--signal); } .nav-right { display: flex; align-items: center; gap: 12px; } /* hamburger — hidden on desktop, shown on mobile */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--ink-300); border-radius: var(--r-sm); cursor: pointer; color: var(--ink-900); } .nav-burger span { display: block; width: 18px; height: 2px; margin: 0 auto; background: currentColor; border-radius: 2px; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; } .nav.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav.open .nav-burger span:nth-child(2) { opacity: 0; } .nav.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .lang-toggle { display: flex; border: 1px solid var(--ink-300); border-radius: var(--r-sm); overflow: hidden; font-family: var(--font-mono); font-size: 11px; } .lang-toggle button { background: transparent; color: var(--ink-700); border: 0; padding: 6px 10px; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: 0.05em; } .lang-toggle button.on { background: var(--ink-300); color: var(--ink-950); } /* --------------------------------------------------------------- Footer */ footer { border-top: 1px solid var(--ink-300); margin-top: 120px; padding: 72px 0 40px; background: var(--ink-000); position: relative; z-index: 1; } .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; margin-bottom: 48px; } .foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-600); margin-bottom: 16px; font-weight: 500; } .foot-col ul { list-style: none; margin: 0; padding: 0; } .foot-col li { margin-bottom: 10px; } .foot-col a { font-size: 14px; color: var(--ink-800); transition: color .15s; } .foot-col a:hover { color: var(--signal); } .foot-about p { font-size: 14px; color: var(--ink-700); margin-top: 12px; max-width: 30ch; } .foot-bottom { display: flex; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--ink-300); font-size: 13px; color: var(--ink-600); font-family: var(--font-mono); letter-spacing: 0.04em; } .foot-bottom a { color: var(--ink-700); } .foot-bottom a:hover { color: var(--signal); } /* --------------------------------------------------------------- Section */ .section { padding: clamp(72px, 10vw, 140px) 0; position: relative; z-index: 1; } .section-tight { padding: clamp(56px, 7vw, 96px) 0; } .section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-bottom: 64px; align-items: end; } .section-head-stack { display: flex; flex-direction: column; gap: 16px; } @media (max-width: 900px) { .section-head { grid-template-columns: 1fr; gap: 16px; } .foot-grid { grid-template-columns: 1fr 1fr; } /* --- mobile navigation: hamburger + dropdown menu --- */ .nav-burger { display: flex; } .nav-inner { gap: 16px; } .nav-right { margin-inline-start: auto; } /* push controls to the end (menu is out of flow) */ .nav-right .btn { display: none; } /* CTA moves into the menu */ .nav-links { position: absolute; top: 67px; left: 0; right: 0; flex-direction: column; gap: 2px; background: var(--ink-100); border-bottom: 1px solid var(--ink-300); box-shadow: 0 24px 40px -24px rgba(0,0,0,0.6); padding: 10px var(--gutter) 18px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .3s ease, opacity .2s ease, visibility .2s; } .nav.open .nav-links { max-height: calc(100vh - 67px); overflow: auto; opacity: 1; visibility: visible; } .nav-links a { padding: 14px 6px; font-size: 16px; border-bottom: 1px solid var(--ink-300); border-radius: 0; } .nav-links a::after { display: none; } /* drop the desktop underline anim */ .nav-links .nav-cta { margin-top: 14px; border-bottom: 0; padding: 0; } .nav-links .nav-cta a { display: inline-flex; border: 0; justify-content: center; width: 100%; } } .nav-links .nav-cta { display: none; } /* CTA item is mobile-only */ /* --- mobile: collapse hard-coded section grids + kill horizontal overflow --- */ html, body { overflow-x: clip; } @media (max-width: 720px) { /* top-level section grids with inline column counts collapse to one column; scoped to direct container children so decorative dashboard mocks are untouched */ .container > [style*="grid-template-columns"], .container > * > [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- Placeholder */ .ph { background: repeating-linear-gradient( 135deg, var(--ink-200) 0 10px, var(--ink-100) 10px 20px ); border: 1px solid var(--ink-300); border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-600); font: 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding: 24px; aspect-ratio: 4 / 3; } /* --------------------------------------------------------------- Utility */ /* Shared inner-page hero (used by all secondary pages) */ .page-hero { padding: clamp(72px, 9vw, 140px) 0 clamp(40px, 5vw, 64px); position: relative; overflow: hidden; } .page-hero .radial-glow { top: -200px; left: 60%; } .page-hero-inner { position: relative; z-index: 2; max-width: 880px; } .page-hero h1 { margin-top: 24px; } .page-hero p.lede { margin-top: 24px; } /* Generic responsive grids */ .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } } /* CTA strip reused across pages */ .cta-strip { display: flex; justify-content: space-between; align-items: center; background: var(--ink-100); border: 1px solid var(--ink-300); border-radius: var(--r-lg); padding: 48px; gap: 32px; flex-wrap: wrap; } .cta-strip h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 500; letter-spacing: -0.02em; } .cta-strip p { color: var(--ink-700); margin-top: 8px; } /* RTL support for Arabic */ [dir="rtl"] { text-align: right; } [dir="rtl"] .section-head { direction: rtl; } [dir="rtl"] .nav-links { flex-direction: row; } [dir="rtl"] .mono, [dir="rtl"] .pill { direction: ltr; } /* mobile dropdown must stack even in RTL (overrides the row rule above) */ @media (max-width: 900px) { [dir="rtl"] .nav-links { flex-direction: column; } } /* --------------------------------------------------------------- Utility-base */ .grid { display: grid; } .flex { display: flex; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .center { text-align: center; } /* logo image — invert on dark theme so black artwork is legible */ html:not([data-theme]) .logo-img, html[data-theme="dark"] .logo-img { filter: invert(1) brightness(1.1); } html[data-theme="light"] .logo-img, html[data-theme="grey"] .logo-img { filter: none; } /* SR only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* --------------------------------------------------------------- Hero bits */ .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,229,168,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,168,0.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 75%); pointer-events: none; } .radial-glow { position: absolute; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(0,229,168,0.12) 0%, transparent 60%); filter: blur(40px); pointer-events: none; } /* scanline animated */ @keyframes scan { 0%, 100% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 0.6; } } .scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--signal), transparent); animation: scan 4s ease-in-out infinite; pointer-events: none; }