/* ============================================================ FASTi — cinematic one-page rebrand Palette lifted from fasti.ba: #1C31F4 / #4FBFB7 / #7FCCF7 ============================================================ */ :root { --bg: #05070C; --bg-2: #0A0F1A; --ink: #F2F5FA; --ink-dim: rgba(242, 245, 250, 0.62); --accent: #1C31F4; --accent-2: #4FBFB7; --frost: #7FCCF7; --amber: #FFB443; /* warm accent pulled from the kitchen footage */ --ok: #5DC15D; --alarm: #FF4040; --line: rgba(127, 204, 247, 0.14); /* light surfaces — used by .panel-light via local overrides */ --light-bg: #F7F9FC; --light-bg-2: #EDF2F9; --light-ink: #0A1020; --light-ink-dim: rgba(10, 16, 32, 0.66); --light-line: rgba(10, 16, 32, 0.12); --deep-blue: #142CD4; /* darker end of the brand-blue panel gradient */ --font-display: "Barlow Condensed", sans-serif; --font-body: "Poppins", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } /* Sideways travel is clipped on BOTH elements: iOS Safari ignores overflow-x on alone, which is how a few pixels of overhang turn into a page the visitor can drag left and right. `clip` is declared second because, unlike `hidden`, it doesn't turn the element into a scroll container — position: sticky in the cinematic sections keeps working. */ html, body { overflow-x: hidden; overflow-x: clip; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); } body.nav-open { overflow: hidden; } /* Nothing may reserve more horizontal space than it was given. Grid and flex children default to min-width:auto, which lets a wide child (a form control at its intrinsic size) push its own track wider than the layout allows. */ img, svg, video { max-width: 100%; } .mono { font-family: var(--font-mono); } .accent { color: var(--frost); } .alarm-text { color: var(--alarm); } /* ---------- Preloader ---------- */ .loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-content: center; gap: 22px; justify-items: center; transition: opacity 0.8s ease, visibility 0.8s; } .loader.done { opacity: 0; visibility: hidden; } .loader-logo { width: 180px; filter: drop-shadow(0 0 30px rgba(28, 49, 244, 0.4)); } .loader-bar { width: 220px; height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--frost)); transition: width 0.2s ease; } .loader-label { font-size: 11px; letter-spacing: 0.3em; color: var(--ink-dim); } .loader-label b { color: var(--frost); } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s; } .nav.scrolled { background: rgba(5, 7, 12, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); } .nav-logo img { height: 30px; display: block; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { color: var(--ink-dim); text-decoration: none; font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; transition: color 0.25s; } .nav-links a:hover { color: var(--frost); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* menu-only CTA — two classes so it outranks .btn's own display */ .nav-links .btn-nav-panel { display: none; } .btn-nav .label-short { display: none; } /* long label until the bar gets tight */ /* ---------- Hamburger ---------- */ .nav-toggle { display: none; /* desktop keeps the inline links */ width: 42px; height: 42px; padding: 11px 9px; flex-direction: column; justify-content: space-between; background: transparent; border: 0; cursor: pointer; border-radius: 10px; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; } .nav.open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav.open .nav-toggle span:nth-child(2) { opacity: 0; } .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Keyboard users need to see where they are — the site had no focus styling. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--frost); outline-offset: 3px; border-radius: 6px; } .btn { display: inline-block; background: var(--accent); color: #fff; border: 0; cursor: pointer; text-decoration: none; font-family: var(--font-body); font-weight: 600; border-radius: 999px; transition: transform 0.25s, box-shadow 0.25s, background 0.25s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(28, 49, 244, 0.45); background: #2e42ff; } .btn-nav { font-size: 13.5px; padding: 10px 22px; white-space: nowrap; } /* ---------- Cinematic scrub sections ---------- */ .cinematic { position: relative; } .sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: grid; place-items: center; background: var(--bg); } .sticky .stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* fill the stage at any aspect ratio, like the old cover-fit blit */ pointer-events: none; /* never steal a click or show native controls */ background: var(--bg); } .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.66) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 24%, transparent 70%, rgba(0, 0, 0, 0.72) 100%); } .vignette-soft { background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 22%, transparent 75%, rgba(0, 0, 0, 0.6) 100%); } .overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; } .reveal-line { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(var(--rise, 0px)); width: max-content; max-width: min(92vw, 1100px); text-align: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 7.5vw, 6.5rem); line-height: 0.98; letter-spacing: 0.015em; text-transform: uppercase; opacity: 0; visibility: hidden; text-shadow: 0 4px 60px rgba(0, 0, 0, 0.8); will-change: opacity, transform; } /* ---------- Hero sensor HUD ---------- Readout (left) and alarm toast (right) share one visual language. */ .hud-card { position: absolute; top: 96px; z-index: 12; min-width: 216px; padding: 18px 22px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 7, 12, 0.58); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.45s, background 0.45s, box-shadow 0.45s; } .hud-readout { left: 32px; } .hud-toast { right: 32px; pointer-events: none; } .hud-temp { font-size: clamp(2.1rem, 3.3vw, 3.05rem); font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--frost); text-shadow: 0 0 30px rgba(127, 204, 247, 0.45); transition: color 0.4s, text-shadow 0.4s; } .hud-meta { display: flex; align-items: center; gap: 9px; margin-top: 11px; } .hud-name { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); } .hud-status { margin-top: 6px; font-size: 10.5px; letter-spacing: 0.2em; color: var(--frost); /* in range = blue, matching the number */ transition: color 0.4s; } .hud-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--frost); box-shadow: 0 0 10px var(--frost); animation: pulse 2s ease-in-out infinite; transition: background 0.4s, box-shadow 0.4s; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* in-range → out-of-range */ .hud-readout.alarm { border-color: rgba(255, 64, 64, 0.55); background: rgba(28, 6, 6, 0.62); box-shadow: 0 0 44px rgba(255, 64, 64, 0.16); } .hud-readout.alarm .hud-temp { color: var(--alarm); text-shadow: 0 0 32px rgba(255, 64, 64, 0.55); } .hud-readout.alarm .hud-status { color: var(--alarm); } .hud-readout.alarm .hud-dot { background: var(--alarm); box-shadow: 0 0 10px var(--alarm); animation-duration: 0.7s; } /* alarm toast — same card, permanently red */ .hud-toast { border-color: rgba(255, 64, 64, 0.55); background: rgba(32, 7, 7, 0.72); box-shadow: 0 12px 46px rgba(255, 64, 64, 0.22); /* the offscreen start has to stay inside the viewport — on a phone the card already sits 18px from the edge, so a 26px slide hung over it */ transform: translateX(14px) scale(0.97); opacity: 0; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.4s; } .hud-toast.show { transform: none; opacity: 1; } .hud-toast .hud-temp { color: var(--alarm); text-shadow: 0 0 32px rgba(255, 64, 64, 0.5); } .hud-toast .hud-status { color: rgba(255, 190, 190, 0.9); } .hud-toast .hud-dot { background: var(--alarm); box-shadow: 0 0 10px var(--alarm); animation-duration: 0.7s; } .hud-toast-head { font-size: 10.5px; letter-spacing: 0.24em; color: #FF8A8A; margin-bottom: 12px; } .hud-toast-icon { margin-right: 5px; } /* scrub progress — full-bleed line pinned to the foot of the stage, so the scroll cue above it has a clear band of its own */ .scrub-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.1); z-index: 12; } .scrub-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--frost)); box-shadow: 0 0 12px rgba(28, 49, 244, 0.8); } /* ---------- Scroll cue ---------- The whole page is a scroll story, so this is the single most important instruction on the first screen. It reads as a button: a frosted pill with a brand-blue halo that breathes, a bobbing chevron, and a real link target. */ .scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 13; display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px 12px 22px; border: 1px solid rgba(127, 204, 247, 0.45); border-radius: 999px; background: rgba(5, 7, 12, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); text-decoration: none; box-shadow: 0 8px 34px rgba(0, 0, 0, 0.45); animation: cue-halo 2.6s ease-in-out infinite; transition: opacity 0.4s, visibility 0.4s, transform 0.3s, border-color 0.3s, background 0.3s; } .scroll-hint:hover { border-color: var(--frost); background: rgba(28, 49, 244, 0.28); transform: translateX(-50%) translateY(-2px); } .scroll-hint-label { font-size: 12px; font-weight: 500; letter-spacing: 0.36em; text-indent: 0.36em; /* balance the tracking gap */ white-space: nowrap; } .scroll-hint-arrow { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(28, 49, 244, 0.75); animation: bob 1.6s ease-in-out infinite; } /* JS toggles this instead of writing inline opacity, so the pill also stops being a click target once it has faded out */ .scroll-hint.is-hidden { opacity: 0; visibility: hidden; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @keyframes cue-halo { 0%, 100% { box-shadow: 0 8px 34px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(127, 204, 247, 0.32); } 50% { box-shadow: 0 8px 34px rgba(0, 0, 0, 0.45), 0 0 0 12px rgba(127, 204, 247, 0); } } @media (prefers-reduced-motion: reduce) { .scroll-hint, .scroll-hint-arrow { animation: none; } } /* ---------- Sensor section spec callouts ---------- */ .spec-title { font-size: clamp(2.4rem, 6vw, 5rem); } .spec { font-family: var(--font-body); text-transform: none; text-align: left; font-size: 1rem; line-height: 1.4; padding: 16px 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 7, 12, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .spec b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--frost); } .spec span { color: var(--ink-dim); font-size: 0.88rem; } .spec-l1, .spec-l2, .spec-l3 { left: 16%; } .spec-r1, .spec-r2, .spec-r3 { left: 84%; } .spec-l1, .spec-r1 { top: 32%; } .spec-l2, .spec-r2 { top: 50%; } .spec-l3, .spec-r3 { top: 68%; } .spec-close { font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; } /* ---------- Panels ---------- */ .panel { position: relative; padding: 130px 32px; background: var(--bg); } .panel-alt { background: var(--bg-2); } .wrap { max-width: 1120px; margin: 0 auto; } /* ---------- Light surfaces ---------- Re-point the theme variables locally; every existing rule adapts. */ .panel-light { --ink: var(--light-ink); --ink-dim: var(--light-ink-dim); --line: var(--light-line); --frost: #1C31F4; /* pale frost is unreadable on white → brand blue */ --accent-2: #106259; /* teal darkened for comfortable contrast on light */ background: var(--light-bg); color: var(--light-ink); } .panel-light-alt { background: var(--light-bg-2); } /* surfaces that were translucent-dark need light equivalents */ .panel-light .card { background: linear-gradient(160deg, rgba(28, 49, 244, 0.06), rgba(255, 255, 255, 0.9)); box-shadow: 0 2px 20px rgba(10, 16, 32, 0.05); } .panel-light .card:hover { border-color: rgba(28, 49, 244, 0.42); box-shadow: 0 14px 40px rgba(28, 49, 244, 0.12); } .panel-light .card-visual { background: #fff; } .panel-light .tile { background: #fff; box-shadow: 0 2px 20px rgba(10, 16, 32, 0.05); } .panel-light .tile:hover { box-shadow: 0 14px 40px rgba(28, 49, 244, 0.14); } .panel-light .step { background: #fff; box-shadow: 0 2px 20px rgba(10, 16, 32, 0.05); } .panel-light .step-num { color: #A35B00; border-color: rgba(255, 180, 67, 0.55); background: rgba(255, 180, 67, 0.12); } .panel-light .stat { background: #fff; } /* ---------- Brand-blue panel ---------- */ .panel-brand { --ink: #ffffff; --ink-dim: rgba(255, 255, 255, 0.78); --line: rgba(255, 255, 255, 0.22); --frost: #ffffff; --accent-2: #BFE9FF; color: #fff; text-align: center; } /* .panel-quote is declared later in this file — need the extra class to win */ .panel.panel-brand { background: linear-gradient(150deg, var(--accent) 0%, var(--deep-blue) 60%, #0D1FA8 100%); } .panel-brand blockquote { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18); } .panel-brand .accent { color: var(--amber); } .panel-brand .quote-visual { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 40px 90px rgba(3, 10, 60, 0.45); } .kicker { font-size: 11.5px; letter-spacing: 0.35em; color: var(--accent-2); margin-bottom: 18px; } .panel h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.0; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 28px; } .lede { color: var(--ink-dim); font-size: 1.12rem; line-height: 1.75; max-width: 640px; } /* scroll reveals */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } .cards .reveal:nth-child(2), .tiles .reveal:nth-child(2), .stats .reveal:nth-child(2) { transition-delay: 0.08s; } .cards .reveal:nth-child(3), .tiles .reveal:nth-child(3), .stats .reveal:nth-child(3) { transition-delay: 0.16s; } .cards .reveal:nth-child(4), .tiles .reveal:nth-child(4), .stats .reveal:nth-child(4) { transition-delay: 0.24s; } .cards .reveal:nth-child(5), .tiles .reveal:nth-child(5) { transition-delay: 0.32s; } .cards .reveal:nth-child(6), .tiles .reveal:nth-child(6) { transition-delay: 0.40s; } /* ---------- Problem / stats ---------- */ .panel-problem { background: radial-gradient(70% 60% at 50% 0%, rgba(255, 64, 64, 0.10), transparent 62%), radial-gradient(60% 70% at 88% 100%, rgba(255, 180, 67, 0.10), transparent 60%), #0B1120; /* deep navy rather than near-black */ } .panel-problem .stat-num { color: var(--amber); } /* warm the numbers */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; } .stat { border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; background: rgba(10, 15, 26, 0.6); } .stat-num { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; line-height: 1; color: var(--frost); margin-bottom: 10px; } .stat-label { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.5; } /* ---------- Cards (Zašto) ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .card { border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px; background: linear-gradient(160deg, rgba(28, 49, 244, 0.07), rgba(10, 15, 26, 0.4)); transition: transform 0.35s, border-color 0.35s; } .card:hover { transform: translateY(-6px); border-color: rgba(127, 204, 247, 0.4); } .card h3 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--frost); margin-bottom: 12px; } .card p { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.7; } .card-visual { padding: 0; overflow: hidden; display: grid; place-items: center; background: rgba(10, 15, 26, 0.6); } .card-visual img { width: 100%; height: 100%; object-fit: contain; padding: 18px; } /* ---------- "Šta smo digitalizirali" ticker ---------- One row that never wraps: two identical tracks scroll left in lockstep and the animation resets after exactly one track width, so the seam is invisible. */ .digitized { margin-top: 64px; } .digitized-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; text-align: center; margin-bottom: 26px; } .ticker { display: flex; overflow: hidden; /* no gap here: the loop translates by exactly one track width, so the space between the two tracks has to live inside the track (padding-right) or the seam jumps by the gap every cycle */ /* fade the ends so chips enter and leave instead of being chopped off */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .ticker-track { display: flex; flex: none; gap: 14px; padding-right: 14px; list-style: none; animation: ticker 34s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { to { transform: translateX(-100%); } } .chip { flex: none; padding: 13px 22px; border: 1px solid var(--line); border-radius: 999px; background: rgba(10, 15, 26, 0.45); font-size: 0.92rem; font-weight: 500; color: var(--ink); white-space: nowrap; } .panel-light .chip { background: #fff; border-color: rgba(28, 49, 244, 0.18); box-shadow: 0 2px 14px rgba(10, 16, 32, 0.05); } /* no motion → no marquee: fall back to a centred wrapping row of the real list */ @media (prefers-reduced-motion: reduce) { .ticker { overflow: visible; -webkit-mask-image: none; mask-image: none; } .ticker-track { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding-right: 0; animation: none; } .ticker-track[aria-hidden="true"] { display: none; } } /* ---------- Industrije tiles ---------- */ .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .tile { border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px; background: rgba(5, 7, 12, 0.5); position: relative; overflow: hidden; transition: transform 0.35s, border-color 0.35s; } .tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transition: opacity 0.35s; } .tile:hover { transform: translateY(-6px); border-color: rgba(28, 49, 244, 0.5); } .tile:hover::before { opacity: 1; } .tile h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; } .tile p { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.7; } /* ---------- Quote / inspekcija ---------- */ .panel-quote { background: radial-gradient(70% 70% at 50% 100%, rgba(28, 49, 244, 0.1), transparent 65%), var(--bg); text-align: center; } .panel-quote blockquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 3.6rem); line-height: 1.15; max-width: 900px; margin: 0 auto 56px; } .quote-visual { width: min(880px, 100%); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } /* ---------- Steps ---------- */ .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; counter-reset: step; } .step { border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px; background: rgba(10, 15, 26, 0.5); } .step-num { display: inline-block; font-size: 13px; letter-spacing: 0.3em; color: var(--accent-2); border: 1px solid rgba(79, 191, 183, 0.35); border-radius: 999px; padding: 6px 14px; margin-bottom: 20px; } .step h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; } .step p { color: var(--ink-dim); font-size: 0.94rem; line-height: 1.7; } /* ---------- Client logos ---------- */ .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 60px); margin-top: 64px; } .logos img { height: 84px; width: auto; /* on a light panel the marks show in their true brand colours */ filter: none; transition: transform 0.4s, filter 0.4s; } .logos img:hover { transform: scale(1.08) translateY(-4px); } /* ---------- Contact ---------- */ .panel-contact { background: radial-gradient(80% 60% at 50% 0%, rgba(28, 49, 244, 0.20), transparent 60%), radial-gradient(50% 50% at 12% 92%, rgba(255, 180, 67, 0.10), transparent 62%), #0B1120; padding-bottom: 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } /* A grid child's automatic minimum is its content's intrinsic width. A text input insists on ~20 characters, so without this the form quietly demands a wider track than the column it was given and spills past the right edge. */ .contact-grid > * { min-width: 0; } .contact-info { font-style: normal; margin-top: 36px; color: var(--ink-dim); line-height: 2.1; } .contact-info a { color: var(--frost); text-decoration: none; } .contact-info a:hover { text-decoration: underline; } .contact-info p { overflow-wrap: anywhere; } .demo-form { border: 1px solid var(--line); border-radius: 20px; padding: 36px; background: rgba(5, 7, 12, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; gap: 18px; min-width: 0; max-width: 100%; } .demo-form > *, .form-row > * { min-width: 0; } .demo-form label { display: grid; gap: 8px; font-size: 0.82rem; font-weight: 500; color: var(--ink-dim); letter-spacing: 0.03em; min-width: 0; } .demo-form input, .demo-form select, .demo-form textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; outline: none; transition: border-color 0.3s, background 0.3s; /* the three lines that actually keep the control inside its column */ width: 100%; min-width: 0; max-width: 100%; } .demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { border-color: var(--accent); background: rgba(28, 49, 244, 0.08); } .demo-form input::placeholder, .demo-form textarea::placeholder { color: rgba(242, 245, 250, 0.38); } .demo-form textarea { resize: vertical; min-height: 96px; line-height: 1.6; } /* appearance:none removed the native arrow and nothing replaced it — the field read as a plain text box. Chevron drawn in the background instead. */ .demo-form select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FCCF7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 17px 17px; } .demo-form option { background: var(--bg-2); color: var(--ink); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .btn-submit { font-size: 1rem; padding: 16px 28px; margin-top: 6px; width: 100%; } .btn-submit[disabled] { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; } .form-status { font-size: 11px; letter-spacing: 0.2em; color: var(--accent-2); min-height: 1em; line-height: 1.6; } .form-status.is-ok { color: var(--ok); } .form-status.is-error { color: #FF8A8A; } /* honeypot — off-canvas rather than display:none, which some bots skip */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .footer { margin-top: 110px; padding: 36px 32px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; } .footer img { height: 22px; opacity: 0.8; } .footer p { color: var(--ink-dim); font-size: 0.82rem; } /* ---------- Responsive ---------- */ /* Spec callouts are anchored by their centre, so their max width is whatever fits between that anchor and the viewport edge: 2 × (100% − anchor%) − gutter. Without this the box grows with its text and eventually runs off-screen. */ @media (min-width: 1001px) { .spec { max-width: min(320px, calc(32vw - 48px)); } } @media (max-width: 1000px) { .cards, .tiles, .steps { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; gap: 48px; } .spec-l1, .spec-l2, .spec-l3 { left: 22%; } .spec-r1, .spec-r2, .spec-r3 { left: 78%; } .spec { max-width: min(320px, calc(44vw - 48px)); } } @media (max-width: 780px) { .nav { padding: 12px max(18px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px)); gap: 12px; } .nav-logo img { height: 24px; } .btn-nav { font-size: 12px; padding: 8px 16px; } .nav-toggle { display: flex; } /* The links become a drop-down panel. It is always in the DOM (so it can animate and stays reachable by assistive tech) and hidden by visibility, which also takes it out of the tab order when closed. */ .nav-links { position: fixed; top: 0; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: calc(66px + env(safe-area-inset-top, 0px)) 20px calc(22px + env(safe-area-inset-bottom, 0px)); background: rgba(5, 7, 12, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s, visibility 0.42s; z-index: -1; /* slides out from behind the bar */ } .nav.open .nav-links { transform: none; opacity: 1; visibility: visible; } .nav-links a { padding: 15px 4px; font-size: 1.02rem; color: var(--ink); border-bottom: 1px solid var(--line); } .nav-links a:last-of-type { border-bottom: 0; } .nav-links .btn-nav-panel { display: block; margin-top: 16px; padding: 14px 22px; text-align: center; color: #fff; border-bottom: 0; } .panel { padding: 90px 20px; } .cards, .tiles, .steps, .stats, .form-row { grid-template-columns: 1fr; } .demo-form { padding: 24px 20px; border-radius: 16px; } /* 16px is the threshold below which iOS Safari zooms the page on focus */ .demo-form input, .demo-form select, .demo-form textarea { font-size: 16px; } .digitized { margin-top: 48px; } .chip { padding: 11px 18px; font-size: 0.86rem; } .hud-card { min-width: 0; padding: 12px 15px 11px; border-radius: 11px; } .hud-readout { top: auto; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); left: 18px; } .hud-toast { top: 74px; right: 18px; left: auto; max-width: 58vw; } .hud-temp { font-size: 1.72rem; } .hud-name { font-size: 0.82rem; letter-spacing: 0.06em; } .hud-status { font-size: 8.5px; letter-spacing: 0.14em; } .hud-toast-head { font-size: 8.5px; letter-spacing: 0.18em; margin-bottom: 8px; } .hud-meta { margin-top: 8px; gap: 7px; } .hud-dot { width: 7px; height: 7px; } .scroll-hint { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); padding: 10px 12px 10px 18px; gap: 10px; } .scroll-hint-label { font-size: 11px; letter-spacing: 0.3em; text-indent: 0.3em; } .scroll-hint-arrow { width: 24px; height: 24px; } .reveal-line { font-size: clamp(2.1rem, 11vw, 3.4rem); } /* Specs: a pair shares one beat, so side-by-side becomes stacked — left item above the centre line, right item below. The offset is px rather than % so the gap between them doesn't collapse on a short viewport. */ .spec { padding: 12px 16px; width: min(88vw, 420px); max-width: none; /* .reveal-line's mobile display size lands on .spec via the cascade and inflates its line boxes — restore the body size the card is built for */ font-size: 1rem; line-height: 1.4; } .spec b { font-size: 1.15rem; } .spec-l1, .spec-l2, .spec-l3, .spec-r1, .spec-r2, .spec-r3 { left: 50%; } .spec-l1, .spec-l2, .spec-l3 { top: calc(50% - 58px); } .spec-r1, .spec-r2, .spec-r3 { top: calc(50% + 58px); } .logos img { height: 60px; } .footer { flex-direction: column; text-align: center; padding: 30px 20px; } } /* Small phones: the nav bar has to hold a logo, a CTA and a hamburger, and the full CTA wording stops fitting well before 360px. */ @media (max-width: 560px) { .btn-nav .label-long { display: none; } .btn-nav .label-short { display: inline; } .nav-actions { gap: 6px; } .panel { padding: 76px 16px; } .demo-form { padding: 20px 16px; } .contact-grid { gap: 36px; } .stat { padding: 22px 20px; } .card, .tile, .step { padding: 26px 20px; } .logos { gap: 26px; } .logos img { height: 48px; } } /* Reveals are driven by an IntersectionObserver; if anything stops that script the copy would stay invisible. With reduced motion there is no animation to preserve anyway, so show everything outright. */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Short viewports ---------- The hero headline is centred while the HUD cards hang off the top corners, so as the window gets shorter the two run into each other. Two tiers, both after the width queries so their placement wins. Tier 1 — shrink the cards; the headline stays centred. */ @media (max-height: 700px) { .hud-card { min-width: 0; padding: 11px 14px 10px; border-radius: 11px; } .hud-temp { font-size: 1.5rem; } .hud-name { font-size: 0.78rem; letter-spacing: 0.06em; } .hud-status { font-size: 8px; letter-spacing: 0.14em; } .hud-toast-head { font-size: 8px; letter-spacing: 0.18em; margin-bottom: 6px; } .hud-meta { margin-top: 7px; gap: 6px; } .hud-dot { width: 7px; height: 7px; } } /* Tier 2 — landscape phones. Shrinking isn't enough: the headline itself has to leave the top band, so it drops to the lower third and sizes off height. */ @media (max-height: 560px) { .hud-readout { top: 78px; bottom: auto; left: 18px; } .hud-toast { top: 78px; bottom: auto; right: 18px; left: auto; max-width: 46vw; } /* hero only — the sensor section has no HUD and stays optically centred */ .overlay:not(.overlay-specs) .reveal-line { font-size: clamp(1.7rem, 6.4vh, 3.6rem); top: 68%; } .spec-title, .spec-close { font-size: clamp(1.8rem, 9vh, 5rem); } .spec { padding: 10px 14px; } .spec b { font-size: 1.1rem; } /* landscape phone: no room for the word, but the cue itself still earns its place — it collapses to the chevron disc alone rather than disappearing */ .scroll-hint { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px; gap: 0; } .scroll-hint-label { display: none; } } /* stacked pair on a short *and* narrow screen — tighter than the portrait gap */ @media (max-height: 560px) and (max-width: 780px) { .spec-l1, .spec-l2, .spec-l3 { top: calc(50% - 50px); } .spec-r1, .spec-r2, .spec-r3 { top: calc(50% + 50px); } }