/* 99Labs Design System — inspired by shadcn/ui */ /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Tokens ── Conduit identity: warm ink + paper, one copper-amber "signal" accent used sparingly (the conduit rail, focus, key interactions). */ :root { /* Light = warm paper */ --background: 40 30% 96%; --foreground: 35 17% 12%; /* Cards sit a warm shade below the paper so they read as defined panels. */ --card: 38 28% 93%; --card-foreground: 35 17% 12%; --primary: 35 18% 11%; --primary-foreground: 40 33% 97%; --secondary: 40 22% 92%; --secondary-foreground: 35 17% 12%; --muted: 40 20% 92%; --muted-foreground: 36 9% 40%; --accent: 40 24% 91%; --accent-foreground: 35 17% 12%; /* Copper-amber signal */ --signal: 28 78% 44%; --signal-foreground: 40 40% 98%; --destructive: 0 64% 46%; --destructive-foreground: 40 40% 98%; --border: 36 18% 80%; --input: 38 18% 82%; --ring: 28 78% 44%; --radius: 0.75rem; --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Fira Mono", monospace; } /* ── Dark theme (.dark on ) = warm ink ── */ .dark { --background: 36 14% 5%; --foreground: 40 22% 90%; --card: 36 14% 8%; --card-foreground: 40 22% 90%; --primary: 40 22% 92%; --primary-foreground: 36 16% 8%; --secondary: 36 12% 11%; --secondary-foreground: 40 22% 92%; --muted: 36 10% 13%; --muted-foreground: 38 9% 60%; --accent: 36 12% 14%; --accent-foreground: 40 22% 92%; --signal: 33 88% 58%; --signal-foreground: 36 16% 8%; --destructive: 0 62% 50%; --destructive-foreground: 40 40% 98%; --border: 36 11% 17%; --input: 36 11% 20%; --ring: 33 88% 58%; color-scheme: dark; } /* Smooth flip between themes */ body { transition: background-color 0.2s ease, color 0.2s ease; } /* ── Base ── */ html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: hsl(var(--foreground)); background-color: hsl(var(--background)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: hsl(var(--foreground)); text-wrap: balance; } h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 800; letter-spacing: -0.035em; } h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; } h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; } h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; } p { color: hsl(var(--muted-foreground)); line-height: 1.65; } /* Mono eyebrow — the "engineering voice" used for labels above sections. */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--signal)); } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: hsl(var(--signal)); } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 2rem; } .text-4xl { font-size: 2.5rem; } .text-5xl { font-size: 3.5rem; } .text-muted { color: hsl(var(--muted-foreground)); } .text-center { text-align: center; } .text-left { text-align: left; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .leading-tight { line-height: 1.2; } .leading-relaxed { line-height: 1.7; } .tracking-tight { letter-spacing: -0.025em; } .max-w-prose { max-width: 65ch; } /* ── Layout ── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container-sm { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 24px; } .section { padding: 80px 0; } .section-lg { padding: 120px 0; } /* ── Grid ── */ .grid { display: grid; gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* ── Flex utilities ── */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; } .gap-16 { gap: 64px; } /* ── Spacing ── */ .mx-auto { margin-left: auto; margin-right: auto; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; line-height: 1; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease, border-color 0.15s ease; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; } /* Primary = the copper-amber signal: the action the conduit flows toward. */ .btn-primary { background-color: hsl(var(--signal)); color: hsl(var(--signal-foreground)); border-color: hsl(var(--signal)); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px -6px hsl(var(--signal) / 0.6); } .btn-primary:active { transform: translateY(0); } .btn:disabled { opacity: 0.65; cursor: not-allowed; } .btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--secondary)); } .btn-secondary:hover { background-color: hsl(var(--accent)); } .btn-outline { background-color: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); } .btn-outline:hover { background-color: hsl(var(--accent)); } .btn-lg { font-size: 1rem; padding: 14px 30px; border-radius: 999px; } .btn-sm { font-size: 0.8125rem; padding: 6px 14px; } /* ── Cards ── */ .card { position: relative; background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 30px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .card:hover { border-color: hsl(var(--signal) / 0.5); box-shadow: 0 8px 26px -18px hsl(var(--signal) / 0.3); } .card-lg { padding: 32px; } .card-interactive:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); border-color: hsl(var(--foreground) / 0.15); } /* Bulleted outcome list inside a feature card. */ .feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .feature-list li { position: relative; padding-left: 18px; color: hsl(var(--muted-foreground)); font-size: 0.925rem; line-height: 1.5; } .feature-list li::before { content: "\2192"; position: absolute; left: 0; color: hsl(var(--foreground)); } /* Subordinate "exit" card linking to the Operations page from Home. */ .secondary-exit { display: flex; gap: 20px; align-items: flex-start; padding: 28px; } .secondary-exit .feature-icon { flex-shrink: 0; margin: 0; } .secondary-exit-link { display: inline-block; margin-top: 12px; font-weight: 600; color: hsl(var(--foreground)); } /* ── Badge ── */ .badge { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 500; padding: 4px 12px; border-radius: 9999px; background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid hsl(var(--border)); } .badge-outline { background-color: transparent; } /* ── Theme switch (shadcn Switch, ported to vanilla) ── */ .theme-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; width: 44px; height: 24px; cursor: pointer; } /* The actual checkbox drives state but stays invisible */ .theme-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } /* Track */ .theme-switch .switch-track { display: inline-flex; align-items: center; width: 44px; height: 24px; border-radius: 9999px; background-color: hsl(var(--input)); border: 1px solid hsl(var(--border)); transition: background-color 0.2s ease, border-color 0.2s ease; pointer-events: none; } .theme-switch input:checked + .switch-track { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); } .theme-switch input:focus-visible + .switch-track { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Thumb */ .theme-switch .switch-thumb { position: absolute; left: 2px; width: 20px; height: 20px; border-radius: 9999px; background-color: hsl(var(--background)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.2s ease, background-color 0.2s ease; pointer-events: none; } .theme-switch input:checked ~ .switch-thumb { transform: translateX(20px); } /* Sun / moon icons inside the thumb */ .theme-switch .switch-thumb .material-symbols-rounded { font-size: 14px; line-height: 20px; width: 20px; text-align: center; color: hsl(var(--foreground)); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; } .theme-switch .icon-sun { display: inline-block; } .theme-switch .icon-moon { display: none; } .theme-switch input:checked ~ .switch-thumb .icon-sun { display: none; } .theme-switch input:checked ~ .switch-thumb .icon-moon { display: inline-block; } /* ── Separator ── */ .separator { height: 1px; background-color: hsl(var(--border)); width: 100%; } /* ── Nav ── */ .site-nav { position: sticky; top: 0; z-index: 50; background-color: hsl(var(--background) / 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); min-height: 64px; } .site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: hsl(var(--foreground)); font-weight: 600; font-size: 1.05rem; } .nav-logo img { width: 36px; height: 36px; border-radius: 0px; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-link { font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); padding: 6px 14px; border-radius: var(--radius); transition: color 0.15s ease, background-color 0.15s ease; text-decoration: none; } .nav-link:hover { color: hsl(var(--foreground)); background-color: hsl(var(--accent)); } .nav-link[aria-current="page"] { color: hsl(var(--foreground)); background-color: hsl(var(--accent)); } .nav-cta { margin-left: 8px; } /* Mobile menu button */ .nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: hsl(var(--foreground)); } .nav-mobile-toggle svg { width: 24px; height: 24px; } .nav-mobile-menu { display: none; } /* ── Footer ── */ .site-footer { border-top: 1px solid hsl(var(--border)); padding: 40px 0; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: -0.01em; } .site-footer .container { display: flex; align-items: center; justify-content: space-between; } /* The footer copyright lockup reuses .nav-logo for layout, but should read as quiet fine-print, not a bold wordmark. */ .site-footer .nav-logo { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 400; color: hsl(var(--muted-foreground)); } .site-footer .nav-logo img { width: 22px; height: 22px; } .footer-links { display: flex; gap: 24px; } .footer-links a { color: hsl(var(--muted-foreground)); transition: color 0.15s ease; } .footer-links a:hover { color: hsl(var(--foreground)); } /* ── Hero ── */ .hero { padding: 120px 0 96px; text-align: center; } .hero h1 { margin-bottom: 22px; max-width: 16ch; margin-left: auto; margin-right: auto; } .hero p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: hsl(var(--muted-foreground)); max-width: 52ch; margin: 0 auto 36px; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Section headers ── */ .section-header { text-align: center; margin-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .section-header h2 { margin: 0; } .section-header p { font-size: 1.075rem; max-width: 56ch; margin: 0; } /* ── Feature card (icon + title + text) ── The icon is a rounded "node" chip echoing the conduit pipe-caps. */ .feature-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; color: hsl(var(--signal)); font-size: 40px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 40; } .feature-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; color: hsl(var(--foreground)); } .feature-text { font-size: 0.95rem; color: hsl(var(--muted-foreground)); line-height: 1.6; } /* ── Conduit signature ── The page reads as a pipe carrying you from idea to production. A rail runs down the centre of the capability grid; the four cards flank it as nodes, bookended by rounded caps that echo the logo's pipes. */ .conduit-node { width: 14px; height: 14px; border-radius: 999px; background: hsl(var(--background)); border: 2px solid hsl(var(--signal)); position: relative; z-index: 1; } /* Entry: a short rail dropping out of the hero into the page. */ .hero { position: relative; } .hero::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 2px; height: 48px; background: linear-gradient(hsl(var(--signal)), hsl(var(--signal) / 0)); } .what-we-do { position: relative; } /* Centre rail threading the grid, extending past it to meet the bands above and below so the conduit reads as continuous across section borders. */ .conduit-grid { position: relative; } .conduit-grid::before { content: ""; position: absolute; top: -56px; bottom: -56px; left: 50%; width: 2px; transform: translateX(-50%); background: hsl(var(--border)); z-index: 0; } .conduit-grid .card { z-index: 1; } .conduit-grid .card:hover { z-index: 3; } /* At rest the rail is a clean through-line. On hover the card "plugs in": a pipe grows from its inner edge to the rail and a node lights up there. Only the hovered card ever draws a node, so nothing can overlap or misalign. */ .conduit-grid .card::before { /* the pipe */ content: ""; position: absolute; top: 50%; height: 2px; width: 0; transform: translateY(-50%); background: hsl(var(--signal)); z-index: 0; transition: width 0.28s ease; } .conduit-grid .card::after { /* the node where the pipe taps the rail */ content: ""; position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 999px; background: hsl(var(--signal)); opacity: 0; z-index: 2; transition: opacity 0.2s ease, transform 0.28s ease, box-shadow 0.2s ease; } .conduit-grid .card:hover::before { width: 12px; } .conduit-grid .card:hover::after { opacity: 1; box-shadow: 0 0 0 4px hsl(var(--card)), 0 0 16px -1px hsl(var(--signal) / 0.85); } /* Left column grows rightward to the rail; right column grows leftward. */ .conduit-grid .card:nth-child(odd)::before { left: 100%; } .conduit-grid .card:nth-child(odd)::after { left: calc(100% + 12px); transform: translate(-50%, -50%) scale(0.3); } .conduit-grid .card:nth-child(odd):hover::after { transform: translate(-50%, -50%) scale(1); } .conduit-grid .card:nth-child(even)::before { right: 100%; } .conduit-grid .card:nth-child(even)::after { right: calc(100% + 12px); transform: translate(50%, -50%) scale(0.3); } .conduit-grid .card:nth-child(even):hover::after { transform: translate(50%, -50%) scale(1); } /* Stacked on mobile the centre rail would cut through the cards — hide the conduit there and let the cards stack cleanly. */ @media (max-width: 768px) { .conduit-grid::before, .conduit-grid .card::before, .conduit-grid .card::after { display: none; } } /* ── CTA Section ── */ .cta-section { text-align: center; padding: 80px 0; background-color: hsl(var(--secondary)); border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); } .cta-section h2 { margin-bottom: 12px; } .cta-section p { font-size: 1.1rem; max-width: 500px; margin: 0 auto 28px; } /* ── Pricing cards ── */ .pricing-card { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; } .pricing-card-featured { border-color: hsl(var(--foreground)); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08); } .pricing-tier { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-bottom: 8px; } .pricing-price { font-size: 1.75rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 4px; } .pricing-desc { font-size: 0.925rem; color: hsl(var(--muted-foreground)); margin-bottom: 24px; line-height: 1.5; } .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; } .pricing-features li { font-size: 0.875rem; color: hsl(var(--foreground)); display: flex; align-items: flex-start; gap: 8px; } .pricing-features li::before { content: "✓"; font-weight: 600; color: hsl(var(--muted-foreground)); flex-shrink: 0; } /* ── Contact ── */ .contact-shell { max-width: 760px; margin: 0 auto; } .contact-card { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 1.5); padding: 32px; } .contact-intro { margin-bottom: 24px; } .contact-intro p { max-width: 56ch; } .contact-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .contact-option { display: flex; gap: 16px; padding: 18px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .contact-option:hover { background-color: hsl(var(--accent)); border-color: hsl(var(--foreground) / 0.18); } .contact-option .feature-icon { flex-shrink: 0; margin: 0; font-size: 28px; } .contact-option strong { display: block; margin-bottom: 4px; color: hsl(var(--foreground)); } .contact-option small { display: block; color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.5; } .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .contact-field { display: flex; flex-direction: column; gap: 8px; } .contact-field-full { grid-column: 1 / -1; } .contact-label { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); } .label-optional { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: hsl(var(--muted-foreground)); } .contact-input, .contact-textarea { width: 100%; border: 1px solid hsl(var(--input)); border-radius: var(--radius); background-color: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; padding: 12px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .contact-input:focus-visible, .contact-textarea:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.08); } .contact-textarea { min-height: 160px; resize: vertical; } .contact-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; } .contact-note { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .contact-note a { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 2px; } .contact-secondary { margin-top: 16px; text-align: left; } /* Quiet reassurance block at the bottom of the contact card. */ .contact-about { margin-top: 24px; padding-top: 20px; border-top: 1px solid hsl(var(--border)); text-align: left; } .contact-about-title { font-weight: 700; font-size: 0.875rem; color: hsl(var(--foreground)); margin-bottom: 4px; } .contact-about p:not(.contact-about-title) { font-size: 0.875rem; line-height: 1.55; color: hsl(var(--muted-foreground)); margin: 0; } .contact-about a { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 2px; } .form-status { margin-top: 16px; border-radius: var(--radius); padding: 12px 14px; font-size: 0.925rem; } .form-status[data-state="success"] { background-color: hsl(140 50% 96%); color: hsl(140 70% 20%); border: 1px solid hsl(140 35% 82%); } .form-status[data-state="error"] { background-color: hsl(0 70% 97%); color: hsl(0 55% 35%); border: 1px solid hsl(0 60% 88%); } .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── Number / step items ── */ .step-number { width: 32px; height: 32px; border-radius: 50%; background-color: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; flex-shrink: 0; } /* ── Responsive ── */ @media (max-width: 768px) { h1 { font-size: 2.25rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } .section { padding: 60px 0; } .section-lg { padding: 80px 0; } .hero { padding: 80px 0 60px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Mobile nav */ .nav-links { display: none; } .nav-mobile-toggle { display: block; } .nav-mobile-menu.active { display: flex; flex-direction: column; gap: 4px; padding: 12px 24px 16px; border-bottom: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); } .nav-mobile-menu .nav-link { padding: 10px 14px; } .nav-mobile-menu .btn { margin-top: 4px; } .site-footer .container { flex-direction: column; gap: 16px; text-align: center; } .contact-grid { grid-template-columns: 1fr; } .contact-options { grid-template-columns: 1fr; } .contact-actions { flex-direction: column; align-items: stretch; } } @media (max-width: 480px) { h1 { font-size: 1.875rem; } .container { padding: 0 16px; } }