/* ========================================================================== NOS marketing site Theme: locked dark, one accent (brand indigo #6d5efc) Type: Space Grotesk (display) / Manrope (body) / Space Mono (labels) Radius lock: pill (buttons/tags) · 16px (cards) · 14px (window) ========================================================================== */ :root { --bg: #0b0b0f; --bg-2: #101017; --surface: #15151d; --surface-2: #1b1b25; --elevated: #20202b; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14); --text: #ececf2; --muted: #a6a6b6; --muted-2: #7d7d8e; --accent: #6d5efc; /* fills */ --accent-h: #5b4cf0; /* hover fill */ --accent-tx: #b3a9ff; /* accent as text on dark (higher contrast) */ --accent-soft: rgba(109, 94, 252, 0.14); --r-pill: 999px; --r-btn: 12px; --r-card: 16px; --r-win: 14px; --shadow-lift: 0 24px 60px -20px rgba(0, 0, 0, 0.65); --shadow-glow: 0 30px 90px -30px rgba(109, 94, 252, 0.55); --maxw: 1200px; --nav-h: 68px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; margin: 0; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } :focus-visible { outline: 2px solid var(--accent-tx); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-btn); } .skip-link:focus { left: 16px; } /* ---------- shared bits ---------- */ .eyebrow { display: inline-block; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-tx); margin-bottom: 18px; } .btn { --_pad: 12px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; padding: var(--_pad); border-radius: var(--r-btn); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.15s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.985); } .btn-lg { --_pad: 15px 26px; font-size: 16px; } .btn-block { width: 100%; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px rgba(109, 94, 252, 0.7); } .btn-primary:hover { background: var(--accent-h); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--muted-2); } .section-head { max-width: 720px; margin-bottom: 56px; } .section-head h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.08; } .section-head p { color: var(--muted); margin-top: 16px; font-size: 18px; max-width: 60ch; } /* ---------- reveal motion ---------- Gated behind `.js` so the page renders fully when JavaScript is unavailable (progressive enhancement): no `.js` on means content is always visible. */ .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .btn:hover, .btn:active { transform: none; } } /* ========================================================================== NAV ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 11, 15, 0.6); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid transparent; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); } .site-header.scrolled { background: rgba(11, 11, 15, 0.86); border-bottom-color: var(--line); } .nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(150deg, #7d70ff, #5b4cf0); color: #fff; font-size: 17px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -6px rgba(109, 94, 252, 0.8); } .brand-word { font-size: 19px; letter-spacing: 0.02em; } .nav-links { display: flex; gap: 28px; margin-left: 12px; margin-right: auto; } .nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; gap: 10px; } .nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: var(--r-btn); color: var(--text); width: 42px; height: 42px; font-size: 20px; cursor: pointer; } .mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 24px; border-bottom: 1px solid var(--line); background: var(--bg); } .mobile-menu a { padding: 12px 4px; color: var(--muted); font-weight: 500; } .mobile-menu a.btn { justify-content: center; margin-top: 6px; color: var(--text); } .mobile-menu a.btn-primary { color: #fff; } /* ========================================================================== HERO — asymmetric split ========================================================================== */ .hero { position: relative; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); } .hero-grid { display: grid; grid-template-columns: 1.15fr 1.1fr; gap: 52px; align-items: center; } .hero-copy { max-width: 600px; } .hero h1 { font-size: clamp(33px, 4.4vw, 48px); line-height: 1.06; font-weight: 700; text-wrap: balance; } .lede { color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); margin-top: 22px; max-width: 46ch; } .hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .hero-note { color: var(--muted-2); font-size: 14px; margin-top: 18px; } .hero-shot { position: relative; } .window { position: relative; z-index: 2; border: 1px solid var(--line-2); border-radius: var(--r-win); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lift); } .window-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); } .window-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #34343f; } .window-url { margin-left: 12px; font-family: 'Space Mono', monospace; font-size: 12px; color: var(--muted-2); background: var(--surface); padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); } .window img { width: 100%; height: auto; } .hero-glow { position: absolute; inset: -12% -8% -18% -8%; z-index: 1; background: radial-gradient(60% 55% at 65% 40%, rgba(109, 94, 252, 0.42), transparent 70%); filter: blur(20px); pointer-events: none; } /* ========================================================================== PROBLEM BAND — full-width statement ========================================================================== */ .band { padding: clamp(72px, 10vw, 128px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); } .band-inner { max-width: 900px; } .band-kicker { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; } .band-line { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; font-weight: 600; } .band-sub { color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); margin-top: 26px; max-width: 62ch; } /* ========================================================================== MODULES — bento ========================================================================== */ .modules { padding: clamp(80px, 10vw, 128px) 0; } .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .tile { grid-column: span 2; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease); } .tile:hover { border-color: var(--line-2); transform: translateY(-3px); background: var(--surface-2); } .tile-wide { grid-column: span 4; } .tile-body { padding: 26px 26px 22px; } .tile-icon { font-size: 26px; color: var(--accent-tx); display: inline-grid; place-items: center; width: 46px; height: 46px; background: var(--accent-soft); border-radius: 12px; margin-bottom: 18px; } .tile h3 { font-size: 20px; margin-bottom: 8px; } .tile p { color: var(--muted); font-size: 15.5px; } .has-shot { justify-content: space-between; } .tile-shot { margin: 4px 18px 18px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); } .tile-shot img { width: 100%; height: 190px; object-fit: cover; object-position: top left; } .tile-wide .tile-shot img { height: 260px; } /* ========================================================================== WHY NOS — split head + list ========================================================================== */ .why { padding: clamp(80px, 10vw, 128px) 0; border-top: 1px solid var(--line); background: var(--bg-2); } .why-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } .why-head { position: sticky; top: calc(var(--nav-h) + 24px); } .why-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; } .why-head p { color: var(--muted); margin: 18px 0 28px; font-size: 18px; max-width: 40ch; } .why-list { display: grid; gap: 14px; } .why-list li { display: flex; gap: 18px; align-items: flex-start; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } .why-list li:hover { border-color: var(--line-2); transform: translateY(-2px); } .why-list i { font-size: 24px; color: var(--accent-tx); flex: none; margin-top: 2px; } .why-list h3 { font-size: 18px; margin-bottom: 6px; } .why-list p { color: var(--muted); font-size: 15.5px; } /* ========================================================================== HOW IT WORKS — 3 step flow ========================================================================== */ .how { padding: clamp(80px, 10vw, 128px) 0; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; } .step { padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); position: relative; } .step-num { font-family: 'Space Mono', monospace; font-size: 14px; color: var(--accent-tx); letter-spacing: 0.1em; } .step h3 { font-size: 21px; margin: 16px 0 10px; } .step p { color: var(--muted); font-size: 15.5px; } /* ========================================================================== PRICING ========================================================================== */ .pricing { padding: clamp(80px, 10vw, 128px) 0; border-top: 1px solid var(--line); background: var(--bg-2); } .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 860px; } .plan { padding: 34px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); display: flex; flex-direction: column; } .plan-featured { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 42%); position: relative; box-shadow: var(--shadow-glow); } .plan-tag { position: absolute; top: -12px; left: 30px; background: var(--accent); color: #fff; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); } .plan h3 { font-size: 22px; } .plan-price { margin: 16px 0 6px; display: flex; align-items: baseline; gap: 10px; } .plan-price .figure { font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .plan-price .per { color: var(--muted-2); font-size: 15px; } .plan-note { color: var(--muted); font-size: 15px; margin-bottom: 22px; } .plan-feats { display: grid; gap: 12px; margin-bottom: 28px; } .plan-feats li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 15px; } .plan-feats i { color: var(--accent-tx); margin-top: 3px; flex: none; } .plan .btn { margin-top: auto; } /* ========================================================================== FINAL CTA ========================================================================== */ .cta-band { padding: clamp(90px, 12vw, 150px) 0; text-align: center; } .cta-inner { max-width: 680px; margin-inline: auto; } .cta-band h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; } .cta-band p { color: var(--muted); font-size: 19px; margin: 20px 0 34px; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-top: 64px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; } .footer-brand p { color: var(--muted); font-size: 15px; margin-top: 16px; max-width: 34ch; } .footer-col h4 { font-size: 13px; font-family: 'Space Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; font-weight: 400; } .footer-col { display: flex; flex-direction: column; gap: 12px; } .footer-col a { color: var(--muted); font-size: 15px; transition: color 0.2s var(--ease); } .footer-col a:hover { color: var(--text); } .footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px 40px; border-top: 1px solid var(--line); } .footer-base p { color: var(--muted-2); font-size: 14px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero-copy { max-width: none; } .why-grid { grid-template-columns: 1fr; gap: 40px; } .why-head { position: static; } .tile-wide { grid-column: span 6; } .tile { grid-column: span 3; } } @media (max-width: 760px) { body { font-size: 16px; } .nav-links, .nav-cta { display: none; } .nav-toggle { display: grid; place-items: center; } .site-header.menu-open .mobile-menu { display: flex; } .bento { grid-template-columns: 1fr; } .tile, .tile-wide { grid-column: span 1; } .tile-shot img, .tile-wide .tile-shot img { height: auto; } .steps { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } .hero-actions .btn { flex: 1; } } @media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }