/* ========================================================= HF — Enterprise AI landing page Mobile-first. Theme: locked light, one deliberate dark band (Credibility section) per the brief's own spec. Single accent color family (lime highlight / deep-green text), no purple. ========================================================= */ /* ---------- Design tokens ---------- */ :root { --bg: #fafaf7; --bg-alt: #f2f1eb; --surface: #ffffff; --text: #17160f; --text-muted: #5a584c; --border: #e5e3d9; --border-strong: #d3d1c4; --num-muted: #8f8c7c; /* decorative large numerals — meets 3:1 vs --bg, unlike --border-strong */ --accent-mark: #cfff5c; /* lime highlight — headline marker, primary CTA fill */ --accent-mark-hover: #bdf043; --accent-ink: #3c6b12; /* deep green — accent text on light backgrounds */ --accent-ink-dark: #b6f24f; /* accent text on dark backgrounds */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(23, 22, 15, 0.06); --shadow-md: 0 12px 28px -12px rgba(23, 22, 15, 0.16); --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.4s; --container: 1220px; color-scheme: light; } /* Theme is locked to light site-wide (see Section 4.11 theme-lock note below). The Credibility section is the one deliberate dark band, styled with its own self-contained tokens further down, matching the brief's own spec. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } svg { display: block; max-width: 100%; } img { max-width: 100%; display: block; } /* Self-hosted icon sprite (assets/img/icons.svg): Sized off font-size like the icon font it replaces, so existing .bento-icon / .pillar-icon / .industry-icon rules still control size + color. */ .icon { display: inline-block; width: 1em; height: 1em; max-width: none; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; } .wrap { max-width: var(--container); margin-inline: auto; padding-inline: 20px; } @media (min-width: 640px) { .wrap { padding-inline: 32px; } } @media (min-width: 1024px) { .wrap { padding-inline: 48px; } } /* ---------- Accessibility utilities ---------- */ .skip-link { position: absolute; left: 12px; top: -60px; background: var(--accent-mark); color: #14210a; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; z-index: 200; transition: top 0.2s var(--ease); } .skip-link:focus { top: 12px; } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; } /* ---------- Reveal-on-scroll ---------- Visible by default (no-JS / JS-blocked users always see full content). Only animates once the early head script marks . */ [data-reveal] { opacity: 1; transform: none; } .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---------- Eyebrow / headings / shared type ---------- */ .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; } .section-h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); max-width: 18ch; text-wrap: balance; } /* Short enough to read best as one confident line once there's room. */ .how-we-work .section-h2, .problem .section-h2, .deliver-lead .section-h2, .deliver-build .section-h2, .payoff .section-h2 { max-width: 42ch; } .section-sub { margin-top: 14px; max-width: 60ch; color: var(--text-muted); font-size: 1.0625rem; } .section-sub.center { margin-inline: auto; text-align: center; } .closing-line { margin-top: 40px; font-size: 1.15rem; max-width: 52ch; font-family: "Outfit", sans-serif; font-weight: 500; } .accent-text { color: var(--accent-ink); font-weight: 600; } mark { background: var(--accent-mark); color: #14210a; padding: 0.02em 0.28em; border-radius: 0.2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .section { padding-block: 72px; } @media (min-width: 768px) { .section { padding-block: 104px; } } .card-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-pill); padding: 13px 22px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn:active { transform: scale(0.97); } .btn-sm { padding: 9px 16px; font-size: 0.875rem; } .btn-lg { padding: 15px 26px; font-size: 1rem; } .btn-primary { background: var(--accent-mark); color: #14210a; } .btn-primary:hover { background: var(--accent-mark-hover); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--text); transform: translateY(-1px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; } .wordmark-mark { width: 15px; height: 15px; background: var(--text); transform: rotate(45deg); border-radius: 3px; flex-shrink: 0; } .nav { display: none; align-items: center; gap: 32px; font-size: 0.9375rem; font-weight: 500; } .nav a { color: var(--text-muted); transition: color 0.2s var(--ease); } .nav a:hover { color: var(--text); } @media (min-width: 1024px) { .nav { display: flex; } } .header-actions { display: flex; align-items: center; gap: 14px; } .header-actions .btn-primary { display: none; } @media (min-width: 640px) { .header-actions .btn-primary { display: inline-flex; } } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; padding: 0; } .nav-toggle span { display: block; height: 2px; width: 18px; margin-inline: auto; background: var(--text); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1024px) { .nav-toggle { display: none; } } .mobile-nav { display: flex; flex-direction: column; gap: 2px; max-height: 0; overflow: hidden; border-top: 1px solid transparent; transition: max-height 0.35s var(--ease), border-color 0.35s var(--ease); background: var(--bg); } .mobile-nav[data-open="true"] { max-height: 320px; border-top-color: var(--border); } .mobile-nav a { padding: 14px 20px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); } .mobile-nav .btn { margin: 14px 20px; justify-content: center; border-bottom: none; } @media (min-width: 1024px) { .mobile-nav { display: none; } } /* ---------- Hero ---------- */ .hero { padding-block: 40px 56px; } @media (min-width: 768px) { .hero { padding-block: 64px 72px; } } .hero-grid { display: grid; gap: 40px; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 24px; } } .hero-h1 { font-size: clamp(1.9rem, 1.35rem + 3.2vw, 3.4rem); max-width: 21ch; text-wrap: balance; } .hero-sub { margin-top: 20px; max-width: 46ch; font-size: 1.1rem; color: var(--text-muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .hero-visual { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 20px 0; box-shadow: var(--shadow-md); overflow: hidden; } .chart-grid line { stroke: var(--border); stroke-width: 1; } .chart-line { stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; } .chart-dot { fill: var(--accent-mark); stroke: var(--accent-ink); stroke-width: 2; } .chart-node circle { fill: var(--surface); stroke: var(--accent-ink); stroke-width: 2; } .hero-visual-caption { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px 18px; border-top: 1px solid var(--border); margin-top: -8px; } .hero-visual-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; } .hero-visual-value { font-size: 0.8rem; color: var(--text); font-weight: 600; } /* ---------- Capabilities strip ---------- */ .strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); } .strip-inner { display: flex; flex-direction: column; gap: 10px; padding-block: 18px; font-size: 0.9rem; } @media (min-width: 900px) { .strip-inner { flex-direction: row; align-items: center; justify-content: space-between; } } .strip-list { display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 600; } .strip-list li { position: relative; padding-left: 16px; } .strip-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; background: var(--accent-ink); border-radius: 50%; transform: translateY(-50%); } .strip-note { color: var(--text-muted); } /* ---------- Credibility dark band (locked, self-contained tokens) ---------- */ .band-dark { background: #0d0d0b; color: #f4f3ec; padding-block: 80px; } @media (min-width: 768px) { .band-dark { padding-block: 112px; } } .band-dark-inner { max-width: 900px; margin-inline: auto; text-align: center; } .band-dark-inner .accent-text { color: var(--accent-ink-dark); } .band-dark-h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); color: #f4f3ec; text-wrap: balance; } .band-dark-body { margin-top: 22px; font-size: 1.0625rem; color: rgba(244, 243, 236, 0.72); max-width: 68ch; margin-inline: auto; } .chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; } .chip { border: 1px solid rgba(244, 243, 236, 0.22); color: rgba(244, 243, 236, 0.92); padding: 9px 16px; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 500; } /* ---------- Problem (numbered editorial list) ---------- */ .problem-list { display: flex; flex-direction: column; margin-top: 44px; } .problem-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding-block: 28px; border-top: 1px solid var(--border); } .problem-row:last-child { border-bottom: 1px solid var(--border); } .problem-num { font-family: "Outfit", sans-serif; font-size: 2.4rem; font-weight: 600; color: var(--num-muted); line-height: 1; } .problem-row h3 { font-size: 1.15rem; margin-bottom: 8px; } .problem-row p { color: var(--text-muted); max-width: 62ch; } @media (min-width: 768px) { .problem-row { grid-template-columns: 120px 1fr; } .problem-num { font-size: 3rem; } } /* ---------- How we work: process rail ---------- */ .rail { position: relative; margin-top: 48px; display: grid; gap: 28px; } @media (min-width: 900px) { .rail { grid-template-columns: repeat(4, 1fr); gap: 20px; } .rail-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; } .rail-track { position: absolute; top: 19px; left: 6%; right: 6%; height: 1px; background: var(--border); } } .rail-step { position: relative; } .rail-marker { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 0.85rem; position: relative; z-index: 1; margin-bottom: 16px; } .rail-step-highlight .rail-marker { background: var(--accent-mark); border-color: var(--accent-mark); color: #14210a; } .rail-step h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rail-step p { margin-top: 8px; color: var(--text-muted); font-size: 0.95rem; } .tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent-mark); color: #14210a; padding: 3px 9px; border-radius: var(--radius-pill); } .rail-captions { display: flex; flex-direction: column; gap: 6px; margin-top: 36px; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; } @media (min-width: 640px) { .rail-captions { flex-direction: row; justify-content: space-between; } } /* ---------- Bento (What we deliver: Lead) ---------- */ .bento { margin-top: 44px; display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 720px) { .bento { grid-template-columns: repeat(3, 1fr); } .bento-card-lg { grid-column: span 3; } } .bento-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px; display: flex; flex-direction: column; } .bento-card h3 { font-size: 1.1rem; margin-bottom: 8px; } .bento-card p { color: var(--text-muted); font-size: 0.95rem; } .bento-icon { font-size: 1.4rem; color: var(--accent-ink); margin-bottom: 14px; } .card-pattern { background: radial-gradient(circle at 92% 50%, color-mix(in srgb, var(--accent-mark) 32%, transparent), transparent 60%), var(--surface); border-color: var(--border-strong); } .card-pattern .bento-icon { color: var(--accent-ink); } @media (min-width: 720px) { .card-pattern { flex-direction: row; align-items: center; gap: 32px; } .card-pattern .bento-icon { margin-bottom: 0; flex-shrink: 0; font-size: 1.8rem; } .card-pattern .card-tag { margin-bottom: 6px; } .card-pattern > div { flex: 1; } .card-pattern h3 { margin-bottom: 6px; } } /* ---------- Carousel (What we deliver: Build) ---------- */ .carousel { display: flex; gap: 16px; overflow-x: auto; padding: 8px 20px 12px; margin-top: 12px; scroll-snap-type: x proximity; scrollbar-width: thin; } @media (min-width: 640px) { .carousel { padding-inline: 32px; } } @media (min-width: 1024px) { /* Only 4 cards: a fixed-width scroll carousel leaves dead space on wide viewports, so switch to a filled, aligned grid instead of scrolling. */ .carousel { display: grid; grid-template-columns: repeat(4, 1fr); overflow-x: visible; max-width: var(--container); margin-inline: auto; padding-inline: 48px; } } .carousel-card { flex: 0 0 auto; scroll-snap-align: start; width: min(320px, 82vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px; } @media (min-width: 1024px) { .carousel-card { width: auto; } } .carousel-card h3 { font-size: 1.1rem; margin-bottom: 8px; } .carousel-card p { color: var(--text-muted); font-size: 0.95rem; } .carousel-card-accent { background: linear-gradient(150deg, color-mix(in srgb, var(--accent-mark) 35%, var(--surface)), var(--surface) 65%); border-color: var(--border-strong); } /* ---------- Payoff ---------- */ .pillars { margin-top: 44px; display: grid; gap: 32px; } @media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 40px; } } .pillar-icon { font-size: 1.6rem; color: var(--accent-ink); margin-bottom: 14px; } .pillar h3 { font-size: 1.1rem; margin-bottom: 8px; } .pillar p { color: var(--text-muted); font-size: 0.95rem; } /* ---------- Illustrative examples ---------- */ .examples { margin-top: 56px; } .examples-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); font-style: italic; } .examples-grid { margin-top: 18px; display: grid; gap: 16px; } @media (min-width: 720px) { .examples-grid { grid-template-columns: repeat(3, 1fr); } } .example-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-alt); } .example-scenario { margin-top: 10px; color: var(--text-muted); font-size: 0.9rem; } .example-outcome { margin-top: 10px; font-size: 0.9rem; font-weight: 600; } .examples-footnote { margin-top: 22px; font-size: 0.875rem; color: var(--text-muted); max-width: 62ch; } /* ---------- Industries ---------- */ .industries .section-h2 { text-align: center; max-width: none; } .industry-grid { margin-top: 44px; display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .industry-grid { grid-template-columns: repeat(5, 1fr); } } .industry-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .industry-icon { font-size: 1.4rem; color: var(--accent-ink); margin-bottom: 14px; } .industry-card h3 { font-size: 1rem; margin-bottom: 8px; } .industry-card p { color: var(--text-muted); font-size: 0.875rem; } /* ---------- CTA ---------- */ .cta { background: color-mix(in srgb, var(--accent-mark) 16%, var(--bg)); border-top: 1px solid var(--border); padding-block: 80px; } @media (min-width: 768px) { .cta { padding-block: 104px; } } .cta-grid { display: grid; gap: 40px; } @media (min-width: 860px) { .cta-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } } .cta-h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); max-width: 16ch; text-wrap: balance; margin-top: 10px; } .cta-sub { margin-top: 18px; max-width: 48ch; color: var(--text-muted); font-size: 1.05rem; } .cta-side-note { margin-top: 22px; font-size: 0.9rem; color: var(--text-muted); } .cta-email-inline { font-weight: 600; color: var(--text); } .cta-form { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); } .cta-form .btn { margin-top: 4px; align-self: flex-start; } .form-row { display: flex; flex-direction: column; gap: 6px; } .form-row label { font-size: 0.85rem; font-weight: 600; } .form-row .optional { font-weight: 400; color: var(--text-muted); } .form-row input, .form-row textarea { font: inherit; font-size: 0.95rem; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); resize: vertical; } .form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent-ink); } .form-row-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .form-status { font-size: 0.875rem; min-height: 1.2em; } .form-status[data-state="success"] { color: var(--accent-ink); font-weight: 600; } .form-status[data-state="error"] { color: #b3261e; font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding-block: 40px; } .footer-inner { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 640px) { .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } } .footer-meta { color: var(--text-muted); font-size: 0.85rem; } .footer-links { display: flex; gap: 18px; } .footer-links a { color: var(--text-muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; } .footer-links a:hover { color: var(--text); } /* ---------- Legal pages (privacy.html) ---------- */ .legal-wrap { max-width: 68ch; } .legal h2 { font-size: 1.2rem; margin-top: 44px; margin-bottom: 12px; } .legal p { color: var(--text-muted); line-height: 1.7; } .legal p + p { margin-top: 14px; } .legal ul { margin: 14px 0 0; padding-left: 20px; list-style: disc; color: var(--text-muted); } .legal ul + p { margin-top: 14px; } .legal li + li { margin-top: 6px; } .legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }