/* ========================================================================== trackingthing.com — design system Dark technical / IoT infrastructure ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Surfaces */ --bg: #04070e; --bg-elevated: #070c16; --surface: rgba(255, 255, 255, 0.028); --surface-hover: rgba(255, 255, 255, 0.055); --border: rgba(255, 255, 255, 0.085); --border-strong: rgba(255, 255, 255, 0.16); /* Text */ --text: #e9eef7; --text-soft: #a7b4c8; --text-mute: #6d7c93; /* Signal palette */ --cyan: #00e5ff; --cyan-d: #00b8d4; --blue: #2f6bff; --violet: #8b5cf6; --green: #34d399; --amber: #fbbf24; --accent: var(--cyan); --glow: 0 0 0 1px rgba(0, 229, 255, 0.28), 0 0 40px -8px rgba(0, 229, 255, 0.45); /* Type */ --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Layout */ --maxw: 1240px; --maxw-n: 900px; --gutter: clamp(1.15rem, 4vw, 2.75rem); --nav-h: 76px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip, not hidden — `overflow-x: hidden` on silently kills position:sticky on the header in several browsers. */ overflow-x: clip; -webkit-tap-highlight-color: rgba(0, 229, 255, 0.18); } @supports not (overflow: clip) { body { overflow-x: hidden; } } img, svg, iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: rgba(0, 229, 255, 0.28); color: #fff; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: #05080f; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.13); border-radius: 99px; border: 3px solid #05080f; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.4); } /* ---------- Ambient background ---------- */ .ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 620px at 12% -8%, rgba(47, 107, 255, 0.20), transparent 62%), radial-gradient(760px 540px at 88% 4%, rgba(0, 229, 255, 0.15), transparent 60%), radial-gradient(880px 700px at 50% 108%, rgba(139, 92, 246, 0.14), transparent 62%), var(--bg); } .ambient::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(ellipse 100% 74% at 50% 22%, #000 35%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 100% 74% at 50% 22%, #000 35%, transparent 78%); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--maxw-n); } .section { padding-block: clamp(4.5rem, 9vw, 8.5rem); position: relative; } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } .section--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.018) 18%, rgba(255, 255, 255, 0.018) 82%, transparent); } .rule { height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent); border: 0; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; } .h-display { font-size: clamp(2.6rem, 1.35rem + 5.4vw, 5.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; } .h1 { font-size: clamp(2.15rem, 1.35rem + 3.3vw, 4rem); } .h2 { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3rem); } .h3 { font-size: clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem); } .h4 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); } .lede { font-size: clamp(1.06rem, 0.99rem + 0.42vw, 1.32rem); line-height: 1.62; color: var(--text-soft); max-width: 62ch; text-wrap: pretty; } .muted { color: var(--text-mute); } .soft { color: var(--text-soft); } .grad { background: linear-gradient(96deg, #ffffff 8%, var(--cyan) 48%, var(--blue) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.15rem; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); } /* Curly-brace tag — the trackingthing signature */ .tag { font-family: var(--font-mono); color: var(--cyan); font-weight: 500; white-space: nowrap; } .tag::before { content: "{"; opacity: 0.55; } .tag::after { content: "}"; opacity: 0.55; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s; border-bottom: 1px solid transparent; } .site-header.is-stuck { background: rgba(4, 7, 14, 0.82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .brand { display: flex; align-items: center; flex-shrink: 0; max-width: 58vw; } /* max-width + object-fit means a slow or failed logo load can never blow the layout out to the image's intrinsic 1024px width. */ .brand img { height: 30px; width: auto; max-width: 100%; object-fit: contain; } .nav-links { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } /* :not(.btn) throughout — otherwise these text-link rules out-specify the button classes and hijack the CTA's colour, padding and font size. */ .nav-links a:not(.btn) { position: relative; padding: 0.55rem 0.85rem; font-size: 0.925rem; font-weight: 450; color: var(--text-soft); border-radius: var(--r-sm); transition: color 0.2s, background 0.2s; } .nav-links a:not(.btn):hover { color: var(--text); background: var(--surface); } .nav-links a:not(.btn).is-active { color: var(--text); } .nav-links a:not(.btn).is-active::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue)); } .nav-cta { display: flex; align-items: center; gap: 0.6rem; margin-left: 0.75rem; } .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--r-sm); align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: var(--surface); } .nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 1024px) { .nav-toggle { display: flex; } .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--gutter) 1.75rem; background: rgba(4, 7, 14, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s; } .nav-links.is-open { opacity: 1; visibility: visible; transform: none; } .nav-links a:not(.btn) { padding: 0.95rem 0.25rem; font-size: 1.05rem; border-bottom: 1px solid var(--border); } .nav-links a:not(.btn).is-active::after { display: none; } .nav-links a:not(.btn).is-active { color: var(--cyan); } .nav-cta { margin: 1.1rem 0 0; flex-direction: column; align-items: stretch; } .nav-cta .btn { justify-content: center; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.78rem 1.5rem; border-radius: 99px; font-size: 0.94rem; font-weight: 550; letter-spacing: -0.01em; white-space: nowrap; transition: transform 0.22s var(--ease), box-shadow 0.28s, background 0.25s, border-color 0.25s, color 0.2s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: linear-gradient(100deg, var(--cyan), var(--blue)); color: #000; font-weight: 620; box-shadow: 0 8px 26px -10px rgba(0, 229, 255, 0.72); } /* Keep the arrow black too — it would otherwise inherit any link colour */ .btn--primary .arw { color: #000; } .btn--primary:hover { box-shadow: 0 14px 38px -10px rgba(0, 229, 255, 0.85); } .btn--ghost { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); } .btn--ghost:hover { background: var(--surface-hover); border-color: rgba(0, 229, 255, 0.45); } .btn--sm { padding: 0.52rem 1.05rem; font-size: 0.86rem; } .btn--login { border: 1px solid var(--border); color: var(--text-soft); padding: 0.52rem 1.1rem; font-size: 0.88rem; border-radius: 99px; } .btn--login:hover { color: var(--text); border-color: var(--border-strong); } .btn .arw { transition: transform 0.25s var(--ease); } .btn:hover .arw { transform: translateX(3px); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: min(94svh, 900px); display: flex; align-items: center; padding-block: clamp(4rem, 10vh, 8rem) clamp(3rem, 7vh, 6rem); overflow: hidden; } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.2rem; } /* Radar / signal visual */ .radar { position: relative; width: 100%; aspect-ratio: 1; max-width: 520px; margin-inline: auto; } .radar svg { width: 100%; height: 100%; overflow: visible; } .radar__ring { fill: none; stroke: rgba(0, 229, 255, 0.22); stroke-width: 1; } .radar__pulse { fill: none; stroke: rgba(0, 229, 255, 0.5); stroke-width: 1.25; transform-origin: 50% 50%; animation: pulse 4.2s var(--ease) infinite; } .radar__pulse:nth-of-type(2) { animation-delay: 1.4s; } .radar__pulse:nth-of-type(3) { animation-delay: 2.8s; } @keyframes pulse { 0% { transform: scale(0.22); opacity: 0; } 12% { opacity: 0.85; } 100% { transform: scale(1); opacity: 0; } } .radar__node { fill: var(--cyan); animation: blink 3s ease-in-out infinite; } .radar__node:nth-of-type(even) { animation-delay: 1.1s; fill: var(--blue); } @keyframes blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } .radar__sweep { transform-origin: 50% 50%; animation: sweep 7s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .radar__pulse, .radar__node, .radar__sweep { animation: none; } .radar__pulse { opacity: 0.35; } } /* ---------- Keyword marquee ---------- */ .marquee { position: relative; overflow: hidden; border-block: 1px solid var(--border); background: rgba(255, 255, 255, 0.015); padding-block: 0.95rem; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .marquee__track { display: flex; width: max-content; gap: 2.6rem; animation: slide 48s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track span { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em; color: var(--text-mute); white-space: nowrap; } .marquee__track b { color: var(--cyan); font-weight: 500; } @keyframes slide { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ---------- Cards ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.4vw, 2rem); transition: transform 0.32s var(--ease), border-color 0.32s, background 0.32s, box-shadow 0.32s; overflow: hidden; height: 100%; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(0, 229, 255, 0.5), transparent 42%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.32s; pointer-events: none; } .card:hover { transform: translateY(-4px); background: var(--surface-hover); border-color: transparent; box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.9); } .card:hover::before { opacity: 1; } .card__num { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--cyan); margin-bottom: 0.9rem; display: block; } .card h3 { margin-bottom: 0.6rem; } .card p { color: var(--text-soft); font-size: 0.965rem; } .card__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(0, 229, 255, 0.16), rgba(47, 107, 255, 0.08)); border: 1px solid rgba(0, 229, 255, 0.22); margin-bottom: 1.15rem; color: var(--cyan); flex-shrink: 0; } .card__icon svg { width: 21px; height: 21px; } /* ---------- Grids ---------- */ .grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); } /* ---------- Stat blocks ---------- */ .stats { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .stats--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .stat { background: var(--bg-elevated); padding: clamp(1.4rem, 2.6vw, 2.1rem); } .stat__val { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; background: linear-gradient(100deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { margin-top: 0.7rem; font-size: 0.875rem; color: var(--text-mute); line-height: 1.45; } /* Inline hero telemetry panel */ .telemetry { border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.022); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; } .telemetry__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.15rem; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.73rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-mute); } .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: live 2.2s ease-out infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .telemetry__rows { display: grid; } .telemetry__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.15rem; border-bottom: 1px solid var(--border); } .telemetry__row:last-child { border-bottom: 0; } .telemetry__row span { font-size: 0.875rem; color: var(--text-soft); } .telemetry__row strong { font-family: var(--font-mono); font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem); font-weight: 500; color: var(--cyan); letter-spacing: -0.01em; } /* ---------- Product cards ---------- */ .product { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.32s var(--ease), border-color 0.32s, box-shadow 0.32s; height: 100%; } .product:hover { transform: translateY(-5px); border-color: rgba(0, 229, 255, 0.36); box-shadow: 0 30px 70px -40px rgba(0, 229, 255, 0.5); } .product__vis { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 40%, rgba(0, 229, 255, 0.11), transparent 70%), linear-gradient(160deg, rgba(47, 107, 255, 0.10), rgba(4, 7, 14, 0)); border-bottom: 1px solid var(--border); } .product__vis::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at center, #000 5%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at center, #000 5%, transparent 72%); } .product__vis svg { position: relative; z-index: 1; width: 60%; max-width: 190px; height: auto; } .product__body { padding: clamp(1.25rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; flex: 1; } .product__name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .product__caps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.15rem; } .chip { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.24rem 0.6rem; border-radius: 99px; border: 1px solid rgba(0, 229, 255, 0.28); background: rgba(0, 229, 255, 0.07); color: var(--cyan); } .chip--alt { border-color: rgba(139, 92, 246, 0.32); background: rgba(139, 92, 246, 0.08); color: #c4b5fd; } .speclist { display: grid; gap: 0.5rem; margin-top: auto; } .speclist li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.885rem; color: var(--text-soft); line-height: 1.45; } .speclist li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-top: 0.55em; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(0, 229, 255, 0.7); } /* ---------- Feature / asset lists ---------- */ .checklist { display: grid; gap: 0.62rem; } .checklist li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.95rem; color: var(--text-soft); line-height: 1.5; } .checklist svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 0.22em; color: var(--cyan); } .pillgrid { display: flex; flex-wrap: wrap; gap: 0.6rem; } .pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.05rem; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: 0.9rem; color: var(--text-soft); transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s var(--ease); } .pill:hover { border-color: rgba(0, 229, 255, 0.45); background: rgba(0, 229, 255, 0.06); color: var(--text); transform: translateY(-2px); } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); opacity: 0.7; } /* ---------- Section heads ---------- */ .sec-head { max-width: 66ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head--center .eyebrow { justify-content: center; } .sec-head p { margin-top: 1.05rem; } /* ---------- Page header (interior pages) ---------- */ .page-head { position: relative; padding-block: clamp(4.5rem, 11vh, 8rem) clamp(2.5rem, 5vw, 4rem); overflow: hidden; } .page-head::before { content: ""; position: absolute; left: 50%; top: -40%; width: 130%; height: 120%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 229, 255, 0.10), transparent 72%); pointer-events: none; } .page-head__inner { position: relative; z-index: 1; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } /* ---------- Product screenshots — panel of three ---------- */ .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; /* equal-height cells so the captions line up */ } @media (max-width: 900px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .shots { grid-template-columns: 1fr; } } .shot { margin: 0; display: flex; flex-direction: column; } .shot__frame { display: block; position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: #0a0f18; box-shadow: 0 34px 80px -46px rgba(0, 0, 0, 0.95); transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s; } .shot__frame:hover { transform: translateY(-4px); border-color: rgba(0, 229, 255, 0.4); box-shadow: 0 44px 90px -44px rgba(0, 229, 255, 0.35); } .shot__frame img { width: 100%; height: auto; display: block; } /* Subtle top-edge sheen so screenshots read as screens, not floating rectangles */ .shot__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 22%); } .shot figcaption { margin-top: auto; /* pin captions to the bottom of each cell */ padding-top: 0.85rem; font-size: 0.85rem; line-height: 1.5; color: var(--text-mute); } .shot figcaption strong { display: block; font-family: var(--font-display); font-size: 0.96rem; font-weight: 550; letter-spacing: -0.015em; color: var(--text); margin-bottom: 0.25rem; } @media (hover: none) { .shot__frame:hover { transform: none; } } /* ---- Embedded form ---- There is deliberately NO styling here for the blobform embed. No wrapper, no heading, no background, no padding, no border, no height rule. The iframe sits raw in the layout and blob owns 100% of its appearance, including its own "Contact Us" title and its height via postMessage. Do not add rules targeting #enquiry or the iframe. */ .office { border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.3rem 1.4rem; background: var(--surface); } .office h4 { margin-bottom: 0.5rem; font-size: 1rem; } .office address { font-style: normal; color: var(--text-soft); font-size: 0.94rem; line-height: 1.6; } .regions { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .region { background: var(--bg-elevated); padding: 1.25rem 1.4rem; transition: background 0.25s; } .region:hover { background: rgba(255, 255, 255, 0.045); } .region__area { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.5rem; } .region__name { font-family: var(--font-display); font-weight: 550; font-size: 1.06rem; letter-spacing: -0.015em; } .region__mail { font-size: 0.9rem; color: var(--text-soft); word-break: break-all; transition: color 0.2s; } .region__mail:hover { color: var(--cyan); } /* ---------- CTA band ---------- */ .cta-band { position: relative; border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(2.2rem, 5vw, 4rem); text-align: center; overflow: hidden; background: radial-gradient(120% 140% at 50% 0%, rgba(0, 229, 255, 0.14), transparent 60%), linear-gradient(180deg, rgba(47, 107, 255, 0.08), rgba(4, 7, 14, 0.2)); } .cta-band::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%); pointer-events: none; } .cta-band > * { position: relative; z-index: 1; } .cta-band .lede { margin-inline: auto; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; } /* ---------- Prose (privacy) ---------- */ .prose { max-width: 74ch; } .prose h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem); margin-top: 2.6rem; margin-bottom: 0.85rem; } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--text-soft); margin-bottom: 1rem; text-wrap: pretty; } .prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; } .prose__num { font-family: var(--font-mono); color: var(--cyan); font-size: 0.8em; margin-right: 0.6rem; opacity: 0.8; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: clamp(3rem, 7vw, 6rem); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .footer-brand img { height: 32px; width: auto; max-width: min(240px, 100%); object-fit: contain; margin-bottom: 1.05rem; } .footer-brand p { color: var(--text-mute); font-size: 0.92rem; max-width: 34ch; } .footer-col h5 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1rem; font-weight: 500; } .footer-col ul { display: grid; gap: 0.6rem; } .footer-col a { font-size: 0.93rem; color: var(--text-soft); transition: color 0.2s; } .footer-col a:hover { color: var(--cyan); } .footer-bottom { margin-top: clamp(2.4rem, 5vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-mute); } .footer-bottom a:hover { color: var(--cyan); } /* ---------- Reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---------- Utilities ---------- */ .stack { display: grid; gap: 1rem; } .stack-2 { display: grid; gap: 2rem; } .center { text-align: center; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cyan); color: #02060f; padding: 0.7rem 1.2rem; border-radius: 0 0 8px 0; font-weight: 600; } .skip:focus { left: 0; } /* ========================================================================== MOBILE & SMALL-SCREEN REFINEMENTS Everything above is fluid by default; this section fixes the specific places where a fixed minimum could push the layout wider than the screen, and enlarges tap targets on touch devices. ========================================================================== */ /* --- svh fallback for older iOS/Android browsers --- */ .hero { min-height: min(94vh, 900px); } @supports (height: 100svh) { .hero { min-height: min(94svh, 900px); } } /* --- Tablet / large phone --- */ @media (max-width: 900px) { /* The footer's auto-fit track could overflow a narrow viewport. Pin it to an explicit 2-column layout instead. */ .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } .footer-brand { grid-column: 1 / -1; } .footer-brand p { max-width: 46ch; } } /* --- Phone --- */ @media (max-width: 640px) { :root { --nav-h: 68px; } .hero { min-height: auto; padding-block: 3rem 3.5rem; } .radar { max-width: 340px; } /* Full-width, thumb-friendly buttons */ .hero__actions, .cta-band__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn, .cta-band__actions .btn { justify-content: center; width: 100%; } .btn { padding: 0.9rem 1.4rem; } /* ~46px tall — above the 44px target */ .btn--sm { padding: 0.72rem 1.15rem; } .brand img { height: 26px; } /* Single-column everything */ .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .stats--4 { grid-template-columns: 1fr; } .dash__kpis { grid-template-columns: 1fr; } /* Cards and panels get a little breathing room back */ .card { padding: 1.35rem 1.25rem; } .stat { padding: 1.4rem 1.25rem; } .region { padding: 1.15rem 1.2rem; } .office { padding: 1.2rem; } /* Keep long words and emails inside their box */ .region__mail { word-break: break-word; overflow-wrap: anywhere; } /* Telemetry rows stack rather than squeeze */ .telemetry__row { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.85rem 1rem; } .marquee { padding-block: 0.8rem; } .marquee__track { gap: 1.8rem; } .marquee__track span { font-size: 0.78rem; } /* NOTE: no iframe height override here on purpose — the blobform sets its own height on every breakpoint via postMessage. */ /* Nudge the small mono labels up — 11px uppercase is hard work on a phone */ .eyebrow { font-size: 0.78rem; letter-spacing: 0.15em; } .card__num { font-size: 0.8rem; } .region__area { font-size: 0.76rem; } .footer-col h5 { font-size: 0.76rem; } .telemetry__head{ font-size: 0.76rem; } .chip { font-size: 0.74rem; } .section { padding-block: 3.25rem; } .cta-band { border-radius: var(--r-lg); } /* Embedded form height is left entirely to the blobform postMessage. */ } /* --- Very narrow (iPhone SE / older Android) --- */ @media (max-width: 380px) { .pill { font-size: 0.85rem; padding: 0.5rem 0.85rem; } .chip { font-size: 0.66rem; } .radar { max-width: 280px; } } /* --- Touch devices: no hover-lift, bigger hit areas --- */ @media (hover: none) { .card:hover, .product:hover, .pill:hover, .btn:hover { transform: none; } .card:hover::before { opacity: 0; } .nav-toggle { width: 46px; height: 46px; } .nav-links a { min-height: 48px; display: flex; align-items: center; } } /* --- Landscape phone: reclaim vertical space --- */ @media (max-height: 520px) and (orientation: landscape) { .hero { min-height: auto; padding-block: 2.5rem; } .page-head { padding-block: 3rem 2rem; } }