/* ========================================================================== Terravect Systems — landing page Brief, single-page teaser. Brand: Terravect Systems board; craft: the Vineyard Fleet Command design system (Sora, Terravect Green, squared controls, glass panels, tracked-uppercase labels). ========================================================================== */ /* Sora is loaded via + stylesheet in index.html for faster first paint; no render-blocking @import here. */ :root { --disp: "Sora", system-ui, -apple-system, sans-serif; --body: "Sora", system-ui, -apple-system, sans-serif; /* Terravect palette */ --green: #1baf7a; --green-dark: #0e7c56; --green-light: #dff3ec; --green-press: #0b6446; --ink: #0f1720; --charcoal: #334155; --steel: #64748b; --mist: #f2f4f7; --white: #ffffff; --surface: #f6f7f9; --text-strong: var(--ink); --text-body: var(--charcoal); --text-muted: var(--steel); --line: rgba(15, 23, 32, 0.10); --line-2: rgba(15, 23, 32, 0.06); /* on dark */ --on-dark: #eef2f6; --on-dark-2: #9fb0c0; --on-dark-3: #66788a; --dark-line: rgba(255, 255, 255, 0.10); /* type ramp */ --font-hero: 600 clamp(35px, 4.7vw, 58px)/1.05 var(--disp); --font-h2: 600 clamp(26px, 3.6vw, 40px)/1.1 var(--disp); --font-h3: 600 18px/1.3 var(--disp); --font-lead: 400 clamp(16px, 1.6vw, 21px)/1.55 var(--body); --font-body: 400 15px/1.65 var(--body); --font-body-sm: 400 13.5px/1.6 var(--body); --font-eyebrow: 600 12px/1 var(--disp); --font-chip: 600 11px/1 var(--disp); --track-eyebrow: 0.20em; --track-label: 0.14em; --radius-panel: 12px; --radius-control: 0px; --shadow-panel: 0 10px 34px rgba(15, 23, 32, 0.07); --maxw: 1080px; --gutter: clamp(22px, 5vw, 56px); --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); --dur-state: 0.15s; --dur-enter: 0.55s; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overscroll-behavior-y: none; } body { font: var(--font-body); font-family: var(--body); color: var(--text-body); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; overflow-x: hidden; overscroll-behavior-y: none; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--green-light); color: var(--ink); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Shared bits ---------- */ .eyebrow { font: var(--font-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--green-dark); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--green); } .eyebrow.on-dark { color: var(--green); } .btn { display: inline-flex; align-items: center; gap: 9px; font: var(--font-chip); letter-spacing: var(--track-label); text-transform: uppercase; border-radius: var(--radius-control); padding: 15px 22px; border: 1px solid transparent; cursor: pointer; transition: background var(--dur-state) ease, color var(--dur-state) ease, border-color var(--dur-state) ease, transform var(--dur-state) ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--green); color: var(--ink); } .btn-primary:hover { background: var(--green-dark); color: var(--white); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--line); } .btn-outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .btn-sm { padding: 11px 16px; } .btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .lockup { display: inline-flex; align-items: center; gap: 12px; } .lockup-mark, .lockup-word { height: 40px; width: auto; display: block; } .footer .lockup { gap: 11px; } .footer .lockup-mark, .footer .lockup-word { height: 36px; } @media (max-width: 420px) { .lockup { gap: 10px; } .lockup-mark, .lockup-word { height: 34px; } } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 30; background: rgba(246, 247, 249, 0.8); backdrop-filter: blur(18px) saturate(1.1); border-bottom: 1px solid var(--line-2); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 70px; } .nav-cta .lbl-short { display: none; } @media (max-width: 560px) { .nav-cta .lbl-long { display: none; } .nav-cta .lbl-short { display: inline; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 78% 8%, var(--green-light) 0%, rgba(223,243,236,0) 55%), radial-gradient(70% 50% at 12% 100%, rgba(15,23,32,0.05) 0%, rgba(15,23,32,0) 60%); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: clamp(24px, 4vw, 60px); padding: clamp(48px, 8vh, 104px) 0 clamp(48px, 8vh, 88px); } /* Full-height hero only on larger screens; use dvh so mobile browser chrome never creates phantom scroll. Phones (<=960) get no viewport min-height at all. */ @media (min-width: 961px) { .hero-inner { min-height: calc(100svh - 70px); min-height: calc(100dvh - 70px); } } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 600px; } .status-pill { display: inline-flex; align-items: center; gap: 9px; font: var(--font-chip); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--charcoal); background: var(--white); border: 1px solid var(--line); padding: 8px 13px; margin-bottom: 26px; } /* ---------- Animated hero scene (neural-net recognition) ---------- */ .hero-visual { position: relative; } .scene { width: 100%; height: auto; display: block; overflow: hidden; aspect-ratio: 480 / 448; filter: drop-shadow(0 26px 58px rgba(15, 23, 32, 0.30)); } .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(27,175,122,0.16); } .hero h1 { font: var(--font-hero); letter-spacing: -0.02em; color: var(--ink); margin-top: 20px; } .hero h1 .accent { color: var(--green-dark); } .hero-lead { font: var(--font-lead); color: var(--text-body); max-width: 580px; margin-top: 22px; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; } /* ---------- Pillars (what we're building) ---------- */ .build { padding: clamp(64px, 10vw, 120px) 0; background: var(--white); border-top: 1px solid var(--line-2); } .build .head { max-width: 640px; } .build .head h2 { font: var(--font-h2); color: var(--text-strong); letter-spacing: -0.01em; margin-top: 18px; } .build .head p { font: var(--font-lead); color: var(--text-body); margin-top: 16px; } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; } .pillar { padding-top: 22px; border-top: 2px solid var(--green); } .pillar .n { font: var(--font-chip); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel); } .pillar h3 { font: var(--font-h3); color: var(--ink); margin-top: 14px; } .pillar p { font: var(--font-body-sm); color: var(--text-body); margin-top: 10px; } /* ---------- Contact ---------- */ .contact { padding: clamp(64px, 10vw, 120px) 0; } .contact-card { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 12% 0%, #16242f 0%, #0f1720 62%); border: 1px solid var(--dark-line); border-radius: var(--radius-panel); padding: clamp(44px, 6.5vw, 80px) clamp(28px, 6vw, 76px); } .contact-card h2 { font: var(--font-h2); color: var(--white); letter-spacing: -0.01em; margin-top: 18px; max-width: 560px; } .contact-card p { font: var(--font-lead); color: var(--on-dark-2); max-width: 520px; margin-top: 16px; } .contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 32px; } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: var(--on-dark-2); padding: 48px 0 40px; } .footer-inner { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; justify-content: space-between; } .footer .tagline { font: var(--font-body-sm); color: var(--on-dark-3); margin-top: 14px; max-width: 320px; } .footer-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font: var(--font-chip); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-3); } .footer-meta a:hover { color: var(--white); } /* ---------- Reveal ---------- */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); } .js .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; justify-items: start; gap: clamp(28px, 6vw, 48px); padding-top: clamp(40px, 9vh, 80px); } .hero-copy { max-width: 620px; } .hero-visual { width: 100%; max-width: 440px; align-self: center; justify-self: center; } } @media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 0; } .pillar { border-top: 1px solid var(--line); padding: 22px 0; } .pillar:first-child { border-top: 2px solid var(--green); } } @media (max-width: 420px) { .hero-visual { max-width: 340px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }