/* ========================================================================== The Workflow Dev — Design System Duotone system on white, matched to the logo: navy ink + electric blue, used the way the reference brief uses dark-green + lime. Space Grotesk + Space Mono + Public Sans carry the "dev tool" character. ========================================================================== */ /* Fonts are loaded via in (not @import) so the browser can fetch them in parallel with this stylesheet. */ :root { /* Color system — navy + electric blue from the logo, white canvas, amber reserved strictly for "sample/illustrative" utility tags */ --ink: #0b1424; --ink-soft: #5b6b85; --accent: #2f6fed; --accent-deep: #1a4fc4; --warm: #894e1a; --warm-on-dark: #f0a75c; --warm-soft: #fbe9d7; --paper: #ffffff; --paper-alt: #f4f7fb; --surface: #ffffff; --border: #e3e8f0; --border-strong: #ccd4e3; --on-ink: #ffffff; /* Typography */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Spacing scale (4/8pt) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; --section-pad: clamp(4rem, 9vw, 9rem); --container-w: 1240px; --container-pad: clamp(1.25rem, 5vw, 3rem); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 200ms; --dur-base: 350ms; --dur-slow: 550ms; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --shadow-card: 0 1px 2px rgba(11, 20, 36, 0.05), 0 12px 32px -16px rgba(11, 20, 36, 0.14); --shadow-lift: 0 20px 48px -18px rgba(11, 20, 36, 0.28); --glow-accent: 0 0 0 1px rgba(47, 111, 237, 0.35), 0 8px 32px -8px rgba(47, 111, 237, 0.4); } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { min-height: 100dvh; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img, picture, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); } .h1 { font-size: clamp(2.5rem, 2rem + 3.4vw, 4.75rem); font-weight: 700; line-height: 1.03; } .h2 { font-size: clamp(2rem, 1.6rem + 2.2vw, 3.25rem); } .h3 { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); } .lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--ink-soft); line-height: 1.65; max-width: 42em; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm); } .eyebrow::before { content: ''; width: 1.3em; height: 0.65em; border-radius: 999px; background: linear-gradient(to right, var(--accent) 55%, var(--ink) 55%); flex-shrink: 0; } p { color: var(--ink-soft); } .text-balance { text-wrap: balance; } /* ========================================================================== Layout ========================================================================== */ .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--container-pad); } section { position: relative; padding-block: var(--section-pad); } .section-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-16); max-width: 46rem; } .section-head.center { align-items: center; text-align: center; margin-inline: auto; } .divider { height: 1px; background: var(--border); border: none; } .grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; } @media (prefers-color-scheme: dark) { .grain { mix-blend-mode: overlay; opacity: 0.25; } } /* ========================================================================== Buttons ========================================================================== */ .btn { --btn-fg: var(--on-ink); --btn-bg: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.95em 1.7em; min-height: 48px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .btn:active { transform: translateY(0); } .btn-primary { --btn-bg: var(--ink); --btn-fg: var(--on-ink); } .btn-primary:hover { --btn-bg: var(--accent-deep); border-color: var(--accent-deep); } /* On dark panels the default navy fill is invisible against the panel's own navy bg, so primary buttons flip to blue-by-default / white-on-hover. */ .dark-panel .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--on-ink); border-color: var(--accent); } .dark-panel .btn-primary:hover { --btn-bg: var(--on-ink); --btn-fg: var(--accent); border-color: var(--on-ink); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--border-strong); } .btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--on-ink); border-color: var(--ink); } .btn-arrow { transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .btn-arrow { transform: translateX(3px); } .btn-link { display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out); } .btn-link:hover { color: var(--ink); border-color: var(--border-strong); gap: 0.7em; } .btn-link svg { transition: transform var(--dur-fast) var(--ease-out); } .btn-link:hover svg { transform: translateX(3px); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); } /* ========================================================================== Nav ========================================================================== */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 100; padding-block: var(--space-4); transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); border-bottom: 1px solid transparent; } .nav.is-scrolled { padding-block: var(--space-3); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom-color: var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .brand { display: flex; align-items: center; gap: 0.65rem; } .brand img { height: 30px; width: auto; } .brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .brand-word em { font-style: normal; color: var(--accent); } .nav-links { display: flex; align-items: center; gap: var(--space-8); font-size: 0.9rem; font-weight: 500; } .nav-links a { position: relative; padding-block: 0.25rem; color: var(--ink); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right var(--dur-base) var(--ease-out); } .nav-links a:hover::after { right: 0; } .nav-cta { display: flex; align-items: center; gap: var(--space-4); } .nav-cta .btn { padding: 0.7em 1.4em; min-height: 42px; font-size: 0.875rem; } .nav-toggle { display: none; position: relative; z-index: 101; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; flex-direction: column; gap: 5px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .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); } .mobile-panel { position: fixed; inset: 0; z-index: 99; background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--container-pad); transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-out); } .mobile-panel.is-open { transform: translateY(0); } .mobile-panel nav { display: flex; flex-direction: column; gap: var(--space-6); } .mobile-panel a { font-family: var(--font-display); font-size: 2rem; font-weight: 600; } .mobile-panel .cta-row { margin-top: var(--space-12); } body.nav-open { overflow: hidden; } /* ========================================================================== Marquee ticker ========================================================================== */ .marquee { background: var(--ink); color: var(--on-ink); overflow: hidden; padding-block: var(--space-4); } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 26s linear infinite; } .marquee-track span { display: flex; align-items: center; gap: var(--space-3); padding-inline: var(--space-6); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .marquee-track span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation-duration: 140s; } } /* ========================================================================== Hero ========================================================================== */ .hero { padding-top: clamp(7rem, 12vw, 11rem); padding-bottom: var(--section-pad); overflow: hidden; position: relative; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.35; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%); } .hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hero-copy .eyebrow { margin-bottom: var(--space-6); } .hero-copy h1 { margin-bottom: var(--space-6); } .hero-copy .lead { margin-bottom: var(--space-8); } .trust-line { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--ink-soft); } .trust-line svg { flex-shrink: 0; color: var(--warm); } .hero-visual { position: relative; aspect-ratio: 1 / 1.05; } .sparkle { position: absolute; color: var(--accent); animation: sparkle-twinkle 2.6s ease-in-out infinite; pointer-events: none; } .sparkle.warm { color: var(--warm); } .sparkle.delay { animation-delay: 1.1s; } @keyframes sparkle-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.05) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { .sparkle { animation: none; opacity: 0.8; } } .hero-visual svg { width: 100%; height: 100%; } .hero-badge { position: absolute; bottom: -4%; right: -6%; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lift); color: var(--ink); z-index: 2; } .hero-badge-spin { position: absolute; inset: 0; width: 100% !important; height: 100% !important; animation: hero-badge-rotate 16s linear infinite; } .hero-badge-center { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .hero-badge:hover .hero-badge-center { transform: scale(1.08); background: var(--accent); } @keyframes hero-badge-rotate { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hero-badge-spin { animation-duration: 90s; } } @media (max-width: 640px) { .hero-badge { width: 84px; height: 84px; bottom: -2%; right: 2%; } .hero-badge-center { width: 32px; height: 32px; } } /* ========================================================================== Cards / Services ========================================================================== */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); } .card-arrow { position: absolute; top: var(--space-6); right: var(--space-6); width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6) rotate(-40deg); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .card:hover .card-arrow { opacity: 1; transform: scale(1) rotate(0deg); background: var(--accent); } .case-media { position: relative; } .case-media .card-arrow { top: auto; right: var(--space-3); bottom: var(--space-3); } .case-media .case-tags { position: absolute; left: var(--space-3); bottom: var(--space-3); margin-bottom: 0; z-index: 1; } .case-media .case-tags .tag { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: transparent; box-shadow: 0 2px 8px rgba(11, 20, 36, 0.12); } .service-card .index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--warm); letter-spacing: 0.08em; } .service-card .icon-wrap { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-block: var(--space-6) var(--space-4); border-radius: var(--radius-md); background: var(--paper-alt); color: var(--accent); } .service-card h3 { margin-bottom: var(--space-3); } .service-card p { font-size: 0.9375rem; } /* ========================================================================== Credibility bar ========================================================================== */ .credibility-bar { padding-block: var(--space-8); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .credibility-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6) var(--space-4); } .credibility-stat { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 140px; } .credibility-stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--ink); line-height: 1; } .credibility-stat .label { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.35rem; } /* ========================================================================== Problem / Solution ========================================================================== */ .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } .problem-list { display: flex; flex-direction: column; margin-top: var(--space-8); } .problem-list li { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border); color: var(--ink); font-family: var(--font-display); font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.375rem); } .problem-list li:first-child { border-top: 1px solid var(--border); } .problem-list .num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--warm); padding-top: 0.4em; } .pull-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.4; color: var(--ink); border-left: 2px solid var(--warm); padding-left: var(--space-6); margin-top: var(--space-8); } /* ========================================================================== Benefits ========================================================================== */ /* Full-bleed dark panel utility, reused wherever we want the reference's dark textured section treatment without a separate hardcoded bg color. */ .dark-panel { position: relative; color: var(--on-ink); overflow: hidden; } .dark-panel-bg { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 16px), var(--ink); } .dark-panel h2, .dark-panel h3, .dark-panel .h2 { color: var(--on-ink); } .dark-panel .lead { color: color-mix(in srgb, var(--on-ink) 70%, transparent); } .dark-panel .eyebrow { color: var(--warm-on-dark); } .dark-panel .eyebrow::before { background: linear-gradient(to right, var(--accent) 55%, var(--on-ink) 55%); } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .benefit-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-md); background: color-mix(in srgb, var(--on-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--on-ink) 12%, transparent); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .benefit-item:hover { background: color-mix(in srgb, var(--on-ink) 10%, transparent); border-color: color-mix(in srgb, var(--on-ink) 22%, transparent); transform: translateY(-2px); } .benefit-item .check { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; } .benefit-item span:last-child { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; padding-top: 0.3em; } /* ========================================================================== Case studies / Testimonials ========================================================================== */ .sample-tag { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm); background: var(--warm-soft); padding: 0.3em 0.7em; border-radius: 999px; margin-bottom: var(--space-4); } .case-card { display: flex; flex-direction: column; height: 100%; padding: var(--space-3) var(--space-8) var(--space-8); overflow: hidden; } .case-media { aspect-ratio: 8 / 5; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-6); background: var(--paper-alt); border: 1px solid var(--border); } .case-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--dur-slow) var(--ease-out); } .card:hover .case-media img { transform: scale(1.045); } .case-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--space-4); } .case-tags .tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-alt); border: 1px solid var(--border); padding: 0.3em 0.6em; border-radius: 999px; } .case-card h3 { margin-bottom: var(--space-3); } .case-card .case-need, .case-card .case-built { font-size: 0.9rem; margin-bottom: var(--space-3); } .case-card .case-need strong, .case-card .case-built strong { color: var(--ink); font-weight: 600; } .case-card .case-outcome { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); border-left: 2px solid var(--accent); padding-left: var(--space-4); margin-block: var(--space-2) var(--space-4); } .case-card .case-stack { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: var(--space-6); } .case-card .case-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.875rem; font-weight: 600; color: var(--ink); } .case-card .case-link svg { transition: transform var(--dur-fast) var(--ease-out); } .case-card .case-link:hover { color: var(--accent-deep); } .case-card .case-link:hover svg { transform: translate(2px, -2px); } .testimonial-card blockquote { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.55; color: var(--ink); margin-bottom: var(--space-6); } .testimonial-card footer { display: flex; align-items: center; gap: var(--space-3); } .avatar-mark { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; } .testimonial-card .who strong { display: block; font-size: 0.9rem; } .testimonial-card .who span { font-size: 0.8125rem; color: var(--ink-soft); } .testimonial-stack { display: flex; flex-direction: column; gap: var(--space-4); } .rating-card { margin-top: var(--space-8); padding: var(--space-8); border-radius: var(--radius-lg); background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 16px), var(--ink); color: var(--on-ink); text-align: center; } .rating-card .sample-tag { background: color-mix(in srgb, var(--on-ink) 14%, transparent); color: var(--warm-on-dark); } .rating-score { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 1; margin-block: var(--space-3) var(--space-2); } .rating-stars { display: flex; justify-content: center; gap: 0.25rem; color: var(--warm-on-dark); margin-bottom: var(--space-3); } .rating-label { font-size: 0.875rem; color: color-mix(in srgb, var(--on-ink) 72%, transparent); max-width: 28ch; margin-inline: auto; } /* ========================================================================== About ========================================================================== */ .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); } .step-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .step-card-body { position: relative; padding: var(--space-8); flex: 1; } .step-num-bg { position: absolute; top: var(--space-2); right: var(--space-5); font-family: var(--font-display); font-weight: 700; font-size: 3.75rem; line-height: 1; color: var(--paper-alt); z-index: 0; user-select: none; } .step-card-body h3 { position: relative; max-width: 80%; margin-bottom: var(--space-3); } .step-card-body p { position: relative; font-size: 0.9rem; } .step-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px), var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } .founder-card { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .founder-photo { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper-alt); border: 1.5px dashed var(--border-strong); color: var(--ink-soft); } .founder-info strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; } .founder-info span { display: block; font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.15rem; } .founder-info p { font-size: 0.875rem; margin-top: var(--space-2); } /* ========================================================================== Lead magnet ========================================================================== */ .lead-magnet { background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; overflow: hidden; } .lead-magnet h2, .lead-magnet .lead { color: var(--on-ink); } .lead-magnet .lead { color: color-mix(in srgb, var(--on-ink) 72%, transparent); } .lead-magnet .eyebrow { color: var(--warm-on-dark); } .lead-magnet .eyebrow::before { background: linear-gradient(to right, var(--accent) 55%, var(--on-ink) 55%); } .form-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .field { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 180px; } .field label { font-size: 0.8125rem; color: color-mix(in srgb, var(--on-ink) 72%, transparent); } .field input { height: 50px; padding-inline: 1.1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--on-ink) 25%, transparent); background: color-mix(in srgb, var(--on-ink) 8%, transparent); color: var(--on-ink); } .field input::placeholder { color: color-mix(in srgb, var(--on-ink) 45%, transparent); } .field input:focus-visible { outline-color: var(--warm); } .lead-form .btn { width: 100%; margin-top: var(--space-2); } .lead-form .btn-primary { --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--paper); } .lead-form .btn-primary:hover { --btn-bg: var(--accent); --btn-fg: #06111f; border-color: var(--accent); } .lead-form .fine-print { font-size: 0.75rem; color: color-mix(in srgb, var(--on-ink) 55%, transparent); margin-top: var(--space-3); } .form-status { font-size: 0.875rem; margin-top: var(--space-3); min-height: 1.2em; } .form-status[data-state="success"] { color: #7cd7a0; } /* ========================================================================== FAQ ========================================================================== */ .faq-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-8); align-items: start; } .faq-list { display: flex; flex-direction: column; gap: var(--space-3); } .faq-aside { display: flex; flex-direction: column; gap: var(--space-4); } .faq-aside-card { position: relative; border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; } .faq-aside-card .icon-badge { position: relative; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: var(--space-4); } .faq-aside-card h3 { position: relative; font-size: 1.125rem; margin-bottom: var(--space-2); } .faq-aside-card p { position: relative; font-size: 0.875rem; margin-bottom: var(--space-5); } .faq-aside-card .btn { position: relative; width: 100%; } .faq-aside-card.dark-panel .icon-badge { background: color-mix(in srgb, var(--on-ink) 14%, transparent); color: var(--on-ink); } .faq-aside-light { background: var(--surface); border: 1px solid var(--border); } .faq-aside-light .icon-badge { background: var(--paper-alt); color: var(--accent); } .faq-aside-eyebrow { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 0.25rem !important; } .faq-aside-email { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ink); transition: color var(--dur-fast) var(--ease-out); word-break: break-word; } .faq-aside-email:hover { color: var(--accent-deep); } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .faq-item:hover { border-color: var(--border-strong); } .faq-item[data-open="true"] { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-lift); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: none; border: none; text-align: left; font-family: var(--font-display); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); font-weight: 600; color: var(--ink); transition: color var(--dur-base) var(--ease-out); } .faq-item[data-open="true"] .faq-q { color: var(--on-ink); } .faq-q .plus { position: relative; width: 22px; height: 22px; flex-shrink: 0; color: inherit; } .faq-q .plus::before, .faq-q .plus::after { content: ''; position: absolute; inset: 0; margin: auto; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .faq-q .plus::before { width: 100%; height: 1.5px; } .faq-q .plus::after { width: 1.5px; height: 100%; } .faq-item[data-open="true"] .plus::after { transform: rotate(90deg); opacity: 0; } .faq-a { overflow: hidden; height: 0; } .faq-a p { padding: 0 var(--space-6) var(--space-6); max-width: 42rem; color: var(--ink-soft); transition: color var(--dur-base) var(--ease-out); } .faq-item[data-open="true"] .faq-a p { color: color-mix(in srgb, var(--on-ink) 78%, transparent); } /* ========================================================================== Final CTA ========================================================================== */ .final-cta { text-align: center; } .final-cta .container { display: flex; flex-direction: column; align-items: center; } .final-cta h2 { max-width: 30ch; margin-bottom: var(--space-4); } .final-cta .lead { margin-inline: auto; margin-bottom: var(--space-10); } /* ========================================================================== Footer ========================================================================== */ footer.site-footer { padding-top: var(--space-16); border-top: 1px solid var(--border); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-12); } .footer-brand p { margin-top: var(--space-4); max-width: 26ch; font-size: 0.9rem; } .footer-heading { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-4); font-weight: 600; } .footer-newsletter { margin-top: var(--space-6); max-width: 22rem; } .footer-newsletter .footer-heading { margin-bottom: var(--space-3); } .footer-newsletter-row { display: flex; gap: var(--space-2); } .footer-newsletter-row input { flex: 1; min-width: 0; height: 44px; padding-inline: var(--space-4); border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 0.875rem; } .footer-newsletter-row input:focus-visible { outline-color: var(--accent); } .footer-newsletter-row button { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .footer-newsletter-row button:hover { background: var(--accent-deep); transform: translateX(2px); } .footer-newsletter .form-status { font-size: 0.8125rem; margin-top: var(--space-2); min-height: 1.2em; } .footer-newsletter .form-status[data-state="success"] { color: #1a8f5c; } .footer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--border); font-size: 0.8125rem; } .footer-tools-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; color: var(--ink-soft); } .footer-tools-list { color: var(--ink-soft); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.9rem; } .footer-col a:hover { color: var(--accent); } .footer-bottom { margin-top: var(--space-12); background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px), var(--ink); } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-6); font-size: 0.8125rem; color: color-mix(in srgb, var(--on-ink) 75%, transparent); flex-wrap: wrap; gap: var(--space-4); } .footer-socials { display: flex; gap: var(--space-4); } .footer-socials a { color: color-mix(in srgb, var(--on-ink) 75%, transparent); } .footer-socials a:hover { color: var(--on-ink); } /* ========================================================================== Sticky mobile CTA ========================================================================== */ .sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: var(--space-3) var(--container-pad); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-top: 1px solid var(--border); transform: translateY(120%); transition: transform var(--dur-slow) var(--ease-out); } .sticky-cta .btn { width: 100%; } .sticky-cta.is-visible { transform: translateY(0); } body.nav-open .sticky-cta { transform: translateY(120%); } @media (max-width: 1024px) { .sticky-cta { display: block; } } /* ========================================================================== Reveal utility (JS toggles .is-visible; CSS provides no-JS fallback) ========================================================================== */ [data-reveal] { opacity: 1; } .js-ready [data-reveal] { opacity: 0; transform: translateY(20px); } .js-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } /* ========================================================================== Responsive — mobile is DESIGNED, not shrunk ========================================================================== */ @media (max-width: 1024px) { .nav-links { display: none; } .nav-toggle { display: flex; } .nav-cta { display: none; } .hero-inner { grid-template-columns: 1fr; gap: var(--space-12); } .hero-visual { order: -1; max-width: 340px; margin-inline: auto; aspect-ratio: 1/1; } .split, .faq-layout { grid-template-columns: 1fr; gap: var(--space-8); } .faq-aside { flex-direction: row; } .faq-aside-card { flex: 1; } .grid-3, .benefits-grid, .footer-top, .step-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-3, .grid-2, .benefits-grid, .step-grid { grid-template-columns: 1fr; } .lead-magnet { grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); } .footer-top { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); } .footer-brand { grid-column: 1 / -1; } .footer-bottom { flex-direction: column; align-items: flex-start; } .cta-row { flex-direction: column; align-items: stretch; } .cta-row .btn { width: 100%; } .trust-line { flex-wrap: wrap; } section { padding-block: var(--section-pad); } .card { padding: var(--space-6); } .case-card, .testimonial-card { padding: var(--space-6); } .faq-aside { flex-direction: column; } } @media (min-width: 1440px) { :root { --container-w: 1360px; } }