/* ============================================================ Cognivus — static site styles Ported from the Next.js app's globals.css (now framework-free). - Fonts loaded from Google Fonts (replaces next/font) - Minimal reset replaces Tailwind's preflight - Ex-Tailwind utility classes + a couple of keyframes appended at the end ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Fragment+Mono&display=swap'); /* ── Reset (replaces Tailwind preflight) ─────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } p, blockquote, figure, ul, ol { margin: 0; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } /* ── Font tokens (were injected by next/font on ) ──────────────── */ :root { --font-sans-geist: 'Geist'; --font-mono-fragment: 'Fragment Mono'; } :root { --color-cream: #f0eee9; --color-cream-warm: #f0eee9; --color-cream-deep: #d8d4cb; --color-ink: #0f0d0b; --color-ink-soft: #2b2a28; --color-ink-muted: #6b6863; --color-rule: rgba(15, 13, 11, 0.08); --color-rule-strong: rgba(15, 13, 11, 0.18); --color-navy: #0a1628; --color-navy-deep: #050a14; --color-brand: #1b6fdb; --color-brand-light: #60a5fa; --font-sans: var(--font-sans-geist), ui-sans-serif, system-ui, sans-serif; --font-mono: var(--font-mono-fragment), ui-monospace, "Fira Mono", monospace; --font-display: var(--font-sans-geist), ui-sans-serif, system-ui, sans-serif; } /* ── Base ─────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; background: var(--color-cream); } body { background: var(--color-cream); color: var(--color-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; min-height: 100vh; } ::selection { background: var(--color-ink); color: var(--color-cream); } /* ── Layout ───────────────────────────────────────────────────────────── */ .container { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; } @media (min-width: 1024px) { .container { padding-inline: 3rem; } } .section { border-bottom: 1px solid var(--color-rule); } .section-dark { border-bottom: 1px solid var(--color-rule); background: var(--color-ink); color: var(--color-cream); } .section-warm { border-bottom: 1px solid var(--color-rule); background: var(--color-cream-warm); } .section-padding { padding-block: 2.5rem; } @media (min-width: 768px) { .section-padding { padding-block: 3.5rem; } } .section-padding-sm { padding-block: 2rem; } @media (min-width: 768px) { .section-padding-sm { padding-block: 3rem; } } .section-padding-lg { padding-block: 3.5rem; } @media (min-width: 768px) { .section-padding-lg { padding-block: 5rem; } } .grid-12 { display: grid; gap: 3rem; } @media (min-width: 768px) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } @media (max-width: 767px) { .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: auto; } } /* ── Typography ───────────────────────────────────────────────────────── */ .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted); } .eyebrow-light { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240, 238, 233, 0.4); } .display-heading { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; font-size: 2.25rem; } @media (min-width: 768px) { .display-heading { font-size: 3.75rem; } } .display-heading-xl { font-family: var(--font-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.025em; font-size: 3rem; } @media (min-width: 768px) { .display-heading-xl { font-size: 4.5rem; } } @media (min-width: 1024px) { .display-heading-xl { font-size: 6rem; } } .display-heading-hero { font-family: var(--font-display); font-weight: 500; line-height: 0.9; letter-spacing: -0.025em; font-size: 3rem; } @media (min-width: 768px) { .display-heading-hero { font-size: 6rem; } } @media (min-width: 1024px) { .display-heading-hero { font-size: 8rem; } } .heading-lg { font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; font-size: 1.875rem; } @media (min-width: 768px) { .heading-lg { font-size: 3rem; } } .heading-md { font-weight: 500; line-height: 1.375; letter-spacing: -0.025em; font-size: 1.25rem; } .body-text { font-size: 1rem; line-height: 1.625; color: var(--color-ink-soft); } .body-muted { font-size: 1rem; line-height: 1.625; color: var(--color-ink-muted); } .mono-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); } /* ── Hairline divider ─────────────────────────────────────────────────── */ .hairline { border-top: 1px solid var(--color-rule); } /* ── Site header ──────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(240, 238, 233, 0.8); border-bottom: 1px solid var(--color-rule); } .site-header-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } @media (min-width: 1024px) { .site-header-inner { padding-inline: 3rem; } } .nav-logo { display: flex; align-items: center; gap: 0.625rem; color: var(--color-ink); flex-shrink: 0; transition: color 0.15s ease; } .nav-logo:hover { color: var(--color-ink-soft); } .nav-logo-image { height: 1.75rem; width: 1.75rem; object-fit: contain; } .nav-logo-text { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.025em; text-transform: lowercase; display: none; } @media (min-width: 640px) { .nav-logo-text { display: inline; } } .nav-tabs { display: flex; align-items: center; gap: 0.25rem; border-radius: 0.375rem; border: 1px solid var(--color-rule-strong); background: rgba(233, 230, 223, 0.6); backdrop-filter: blur(8px); padding: 0.25rem; } .nav-tab-item { display: flex; align-items: center; } .nav-tab-divider { color: rgba(15, 13, 11, 0.2); padding-inline: 0.25rem; font-size: 0.75rem; } .nav-tab-link { padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.025em; transition: color 0.15s ease, background-color 0.15s ease; color: var(--color-ink-muted); } @media (min-width: 768px) { .nav-tab-link { padding: 0.375rem 1rem; font-size: 1rem; } } .nav-tab-link:hover { color: var(--color-ink); } .nav-tab-link.active { background: var(--color-ink); color: var(--color-cream); } .nav-contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.025em; padding: 0.5rem 1.25rem; transition: background-color 0.15s ease; background: var(--color-ink); color: var(--color-cream); } .nav-contact-btn:hover { background: var(--color-ink-soft); } .nav-contact-btn.active { background: var(--color-ink); color: var(--color-cream); } /* ── Mobile hamburger menu (hamburger copied from Kent & Sussex practice) ── */ .menu-toggle { display: none; } .mobile-menu { display: none; } @media (max-width: 767px) { .nav-tabs, .nav-contact-btn { display: none; } .menu-toggle { display: flex; position: relative; background: none; border: 1px solid var(--color-rule-strong); border-radius: 0.5rem; width: 2.5rem; height: 2.5rem; cursor: pointer; color: var(--color-ink); flex-shrink: 0; } .menu-toggle span { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform 300ms ease, opacity 200ms ease; } .menu-toggle span:nth-child(1) { transform: translate(-50%, -8px); } .menu-toggle span:nth-child(2) { transform: translate(-50%, -50%); } .menu-toggle span:nth-child(3) { transform: translate(-50%, 6px); } body.menu-open .menu-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; } body.menu-open .menu-toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--color-cream); flex-direction: column; padding: 7rem 1.5rem 2.5rem; } body.menu-open .mobile-menu { display: flex; } .mobile-menu-link { font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink); opacity: 0.55; padding: 1.25rem 0; border-bottom: 1px solid var(--color-rule); transition: opacity 0.15s ease; } .mobile-menu-link:first-child { border-top: 1px solid var(--color-rule); } .mobile-menu-link:hover, .mobile-menu-link.active { opacity: 1; } } /* ── Site footer ──────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--color-rule); background: var(--color-cream-warm); } .site-footer-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 1024px) { .site-footer-inner { padding-inline: 3rem; } } .footer-grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .footer-brand { } @media (min-width: 768px) { .footer-brand { grid-column: span 5; } } .footer-brand-link { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--color-ink); transition: color 0.15s ease; } .footer-brand-link:hover { color: var(--color-ink-soft); } .footer-brand-logo { height: 2.75rem; width: 2.75rem; object-fit: contain; } .footer-brand-name { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; text-transform: lowercase; font-size: 1.875rem; } @media (min-width: 768px) { .footer-brand-name { font-size: 2.25rem; } } .footer-brand-desc { margin-top: 1.5rem; max-width: 28rem; font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } .footer-column { } @media (min-width: 768px) { .footer-column { grid-column: span 3; } } @media (min-width: 768px) { .footer-column:first-of-type { grid-column: 7 / span 3; } } @media (min-width: 768px) { .footer-column:last-of-type { grid-column: 10 / span 3; text-align: right; } } .footer-column-title { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } .footer-links { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; } .footer-link { color: rgba(15, 13, 11, 0.8); transition: color 0.15s ease; } .footer-link:hover { color: var(--color-ink); } .footer-bottom { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-ink-muted); } /* ── Homepage: case studies ───────────────────────────────────────────── */ /* Tiny section label with a hairline rule underneath (home + about + contact) */ .section-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-ink-muted); } /* Reusable header: tiny label above a full-width hairline rule */ .section-head { padding-bottom: 1rem; border-bottom: 1px solid var(--color-rule); margin-bottom: 2.5rem; } .case-studies-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--color-rule); margin-bottom: 3rem; } @media (min-width: 768px) { .case-studies-head { margin-bottom: 4rem; } } .case-studies-head .eyebrow { font-size: 0.875rem; } .case-studies-grid { display: grid; gap: 2.5rem; } @media (min-width: 768px) { .case-studies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } } /* ── Homepage: differentiator ─────────────────────────────────────────── */ .differentiator-section { border-bottom: 1px solid var(--color-rule); background: var(--color-cream-warm); color: var(--color-ink); } .differentiator-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-block: 2.5rem; } @media (min-width: 768px) { .differentiator-inner { padding-block: 3.5rem; } } @media (min-width: 1024px) { .differentiator-inner { padding-inline: 3rem; } } .differentiator-grid { display: grid; gap: 3rem; align-items: flex-start; } @media (min-width: 768px) { .differentiator-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .differentiator-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); padding-top: 0.25rem; } @media (min-width: 768px) { .differentiator-label { grid-column: span 3; } } .differentiator-content { } @media (min-width: 768px) { .differentiator-content { grid-column: span 8; } } .differentiator-heading { font-size: 1.75rem; font-weight: 500; color: var(--color-ink); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 2rem; } @media (min-width: 768px) { .differentiator-heading { font-size: 2.75rem; } } .differentiator-columns { display: grid; gap: 2rem; } @media (min-width: 768px) { .differentiator-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .differentiator-columns p { font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } /* ── About page ───────────────────────────────────────────────────────── */ .about-team-head { display: grid; gap: 2rem; align-items: flex-end; padding-bottom: 1rem; border-bottom: 1px solid var(--color-rule); margin-bottom: 2rem; } @media (min-width: 768px) { .about-team-head { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .about-team-head-content { } @media (min-width: 768px) { .about-team-head-content { grid-column: span 7; } } .about-team-heading { font-family: var(--font-display); font-size: 2.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; } @media (min-width: 768px) { .about-team-heading { font-size: 4.5rem; } } .about-team-member { padding-block: 1.25rem; border-bottom: 1px solid var(--color-rule); } @media (min-width: 768px) { .about-team-member { padding-block: 1.75rem; } } .about-member-grid { display: grid; gap: 1.25rem; align-items: flex-start; } @media (min-width: 768px) { .about-member-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .about-member-photo { } @media (min-width: 768px) { .about-member-photo { grid-column: 1 / span 3; } } .about-member-photo-wrap { position: relative; aspect-ratio: 3/4; border-radius: 0.75rem; overflow: hidden; } .about-member-photo-wrap img { object-fit: cover; } .about-member-info { } @media (min-width: 768px) { .about-member-info { grid-column: 5 / span 5; padding-top: 0.5rem; } } .about-member-name { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; font-size: 1.5rem; } @media (min-width: 768px) { .about-member-name { font-size: 2.25rem; } } .about-member-role { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-soft); } .about-member-bio { margin-top: 1rem; font-size: 0.9375rem; color: var(--color-ink-muted); line-height: 1.6; } .about-section-grid { display: grid; gap: 3rem; align-items: flex-start; } @media (min-width: 768px) { .about-section-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .about-section-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); padding-top: 0.25rem; } @media (min-width: 768px) { .about-section-label { grid-column: span 3; } } .about-section-content { } @media (min-width: 768px) { .about-section-content { grid-column: span 8; } } .about-section-heading { font-size: 1.75rem; font-weight: 500; color: var(--color-ink); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 1.75rem; } @media (min-width: 768px) { .about-section-heading { font-size: 2.75rem; } } .about-services { display: grid; gap: 1.75rem; } @media (min-width: 768px) { .about-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .about-service-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); margin-bottom: 1rem; } .about-service-text { font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } /* ── Contact page ─────────────────────────────────────────────────────── */ .contact-hero { border-bottom: 1px solid var(--color-rule); background: var(--color-cream-warm); color: var(--color-ink); } .contact-hero-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-top: 1.5rem; padding-bottom: 2.5rem; } @media (min-width: 768px) { .contact-hero-inner { padding-top: 2rem; padding-bottom: 3rem; } } @media (min-width: 1024px) { .contact-hero-inner { padding-inline: 3rem; } } .contact-hero-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); margin-bottom: 1.25rem; } .contact-hero-grid { display: grid; gap: 3rem; align-items: flex-end; } @media (min-width: 768px) { .contact-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .contact-hero-heading { font-size: 2.5rem; font-weight: 500; line-height: 0.9; letter-spacing: -0.025em; color: var(--color-ink); } @media (min-width: 768px) { .contact-hero-heading { font-size: 4rem; grid-column: span 7; } } @media (min-width: 1024px) { .contact-hero-heading { font-size: 5rem; } } .contact-body-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-top: 2rem; padding-bottom: 4rem; } @media (min-width: 768px) { .contact-body-inner { padding-top: 2.5rem; padding-bottom: 5rem; } } @media (min-width: 1024px) { .contact-body-inner { padding-inline: 3rem; } } .contact-body-grid { display: grid; gap: 4rem; } @media (min-width: 1024px) { .contact-body-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .contact-sidebar { } @media (min-width: 1024px) { .contact-sidebar { grid-column: span 4; } } .contact-sidebar-text { font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; margin-bottom: 2.5rem; } .contact-sidebar-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); margin-bottom: 0.75rem; } .contact-sidebar-email { color: var(--color-ink); font-size: 0.875rem; font-weight: 500; transition: color 0.15s ease; } .contact-sidebar-email:hover { color: var(--color-ink-soft); } .contact-form-wrap { } @media (min-width: 1024px) { .contact-form-wrap { grid-column: 6 / span 7; } } .contact-form-card { background: white; border-radius: 1rem; border: 1px solid var(--color-rule-strong); padding: 2rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } @media (min-width: 768px) { .contact-form-card { padding: 3rem; } } /* ── Contact form ─────────────────────────────────────────────────────── */ .contact-form { display: flex; flex-direction: column; gap: 2.5rem; } .contact-form-row { display: grid; gap: 2.5rem; } @media (min-width: 640px) { .contact-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .contact-form-field { display: block; } .contact-form-label { display: block; font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } .contact-form-label-optional { color: rgba(107, 104, 99, 0.5); text-transform: none; letter-spacing: normal; font-family: var(--font-sans); font-size: 0.75rem; } .contact-form-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--color-rule-strong); padding: 0.875rem 0; margin-top: 0.75rem; font-size: 1rem; color: var(--color-ink); transition: border-color 0.15s ease; outline: none; } .contact-form-input::placeholder { color: rgba(107, 104, 99, 0.5); } .contact-form-input:focus { border-color: var(--color-ink); } .contact-form-select { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--color-rule-strong); padding: 0.875rem 2.5rem 0.875rem 0; margin-top: 0.75rem; font-size: 1rem; color: var(--color-ink); transition: border-color 0.15s ease; outline: none; appearance: none; background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236b6863%22%3E%3Cpath%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 0.25rem center; background-size: 1.1em; } .contact-form-select:focus { border-color: var(--color-ink); } .contact-form-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--color-rule-strong); padding: 0.875rem 0; margin-top: 0.75rem; font-size: 1rem; color: var(--color-ink); transition: border-color 0.15s ease; outline: none; resize: none; } .contact-form-textarea::placeholder { color: rgba(107, 104, 99, 0.5); } .contact-form-textarea:focus { border-color: var(--color-ink); } .contact-form-submit { padding-top: 1rem; } .contact-form-btn { display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 9999px; background: var(--color-ink); color: var(--color-cream); transition: background-color 0.15s ease; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; padding: 1rem 2rem; } .contact-form-btn:hover { background: var(--color-ink-soft); } .contact-form-btn:disabled { opacity: 0.6; cursor: not-allowed; } .contact-form-error { font-size: 0.875rem; color: #dc2626; margin-top: -0.5rem; } .contact-form-success { display: flex; flex-direction: column; gap: 1rem; padding: 2.5rem 0; } .contact-form-success-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } .contact-form-success-title { font-size: 1.5rem; font-weight: 500; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1.2; } .contact-form-success-body { font-size: 0.9375rem; color: var(--color-ink-soft); line-height: 1.6; max-width: 28rem; } /* ── Privacy page ─────────────────────────────────────────────────────── */ .privacy-grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .privacy-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .privacy-sidebar { } @media (min-width: 768px) { .privacy-sidebar { grid-column: span 3; } } .privacy-content { } @media (min-width: 768px) { .privacy-content { grid-column: span 7; } } .privacy-heading { font-family: var(--font-display); font-size: 2.25rem; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 3rem; } @media (min-width: 768px) { .privacy-heading { font-size: 3rem; } } .privacy-sections { display: flex; flex-direction: column; gap: 2.5rem; } .privacy-section-title { font-size: 1rem; font-weight: 500; color: var(--color-ink); margin-bottom: 0.75rem; } .privacy-section-body { font-size: 1rem; color: var(--color-ink-muted); line-height: 1.625; } /* ── Case study detail page ───────────────────────────────────────────── */ .cs-header { border-bottom: 1px solid var(--color-rule); } .cs-header-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-top: 3.5rem; padding-bottom: 4rem; } @media (min-width: 768px) { .cs-header-inner { padding-top: 5rem; } } @media (min-width: 1024px) { .cs-header-inner { padding-inline: 3rem; } } .cs-back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); transition: color 0.15s ease; } .cs-back-link:hover { color: var(--color-ink); } .cs-back-link-light { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(240, 238, 233, 0.4); transition: color 0.15s ease; } .cs-back-link-light:hover { color: rgba(240, 238, 233, 0.7); } .cs-header-grid { margin-top: 3rem; display: grid; gap: 3rem; align-items: flex-end; } @media (min-width: 768px) { .cs-header-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .cs-header-title { font-family: var(--font-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.025em; font-size: 2.25rem; } @media (min-width: 768px) { .cs-header-title { font-size: 3.5rem; grid-column: span 8; } } @media (min-width: 1024px) { .cs-header-title { font-size: 4.5rem; } } .cs-header-title--sm { font-size: 2rem; } @media (min-width: 768px) { .cs-header-title--sm { font-size: 2.75rem; } } @media (min-width: 1024px) { .cs-header-title--sm { font-size: 3.25rem; } } .cs-header-subtitle { font-size: 1.125rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .cs-header-subtitle { font-size: 1.25rem; grid-column: span 4; padding-bottom: 0.75rem; } } /* Product hero variant */ .cs-header-product { border-bottom: 1px solid var(--color-rule); background: var(--color-ink); color: var(--color-cream); overflow: hidden; } .cs-header-product .cs-header-inner { padding-bottom: 5rem; } .cs-header-product .cs-header-grid { margin-top: 3.5rem; align-items: center; } .cs-header-product .cs-header-title { color: var(--color-cream); } @media (min-width: 768px) { .cs-header-product .cs-header-title { grid-column: span 7; } } .cs-header-product .cs-header-subtitle { color: rgba(240, 238, 233, 0.5); max-width: 32rem; } @media (min-width: 768px) { .cs-header-product .cs-header-subtitle { font-size: 1.25rem; } } .cs-hero-waveform { display: flex; align-items: center; gap: 4px; height: 12rem; opacity: 0.2; } @media (min-width: 768px) { .cs-hero-waveform { grid-column: span 5; } } .cs-hero-waveform-bar { flex: 1; border-radius: 9999px; background: var(--color-cream); } /* Pull quote */ .cs-quote-grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .cs-quote-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .cs-quote-label { } @media (min-width: 768px) { .cs-quote-label { grid-column: span 2; } } .cs-quote-block { } @media (min-width: 768px) { .cs-quote-block { grid-column: span 9; } } .cs-quote-text { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; color: var(--color-ink); font-size: 1.5rem; } @media (min-width: 768px) { .cs-quote-text { font-size: 2.25rem; } } @media (min-width: 1024px) { .cs-quote-text { font-size: 3rem; } } .cs-quote-attribution { margin-top: 2.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); } /* Steps */ .cs-steps-header { margin-bottom: 4rem; } .cs-steps-header-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); margin-bottom: 0.75rem; } .cs-steps-heading { font-size: 1.875rem; font-weight: 500; color: var(--color-ink); line-height: 1.25; } @media (min-width: 768px) { .cs-steps-heading { font-size: 3rem; } } .cs-steps-grid { display: grid; gap: 1px; background: var(--color-rule-strong); border: 1px solid var(--color-rule-strong); border-radius: 1rem; overflow: hidden; } @media (min-width: 640px) { .cs-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cs-steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cs-step { background: white; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 768px) { .cs-step { padding: 2.5rem; } } .cs-step-number { font-family: var(--font-mono); font-size: 5rem; font-weight: 500; color: rgba(15, 13, 11, 0.06); line-height: 1; } .cs-step-title { font-size: 1rem; font-weight: 500; color: var(--color-ink); line-height: 1.375; margin-bottom: 0.75rem; } .cs-step-body { font-size: 0.875rem; color: var(--color-ink-muted); line-height: 1.625; } /* Challenge / Approach */ .cs-challenge-section { position: relative; border-bottom: 1px solid var(--color-rule); overflow: hidden; background: #fff; } .cs-challenge-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; padding-right: 3rem; opacity: 0; } .cs-challenge-watermark img { width: 55%; max-width: 42rem; object-fit: contain; } .cs-challenge-inner { position: relative; margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; } @media (min-width: 1024px) { .cs-challenge-inner { padding-inline: 3rem; } } .cs-challenge-list { display: flex; flex-direction: column; /* divide-y simulation */ } .cs-challenge-item { display: grid; gap: 1.5rem; padding-block: 2.5rem; align-items: flex-start; } .cs-challenge-item:last-child { border-bottom: none; } @media (min-width: 768px) { .cs-challenge-item { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 3rem; } } .cs-challenge-item-head { } @media (min-width: 768px) { .cs-challenge-item-head { grid-column: span 4; } } .cs-challenge-item-num { display: none; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); margin-bottom: 1.25rem; } .cs-challenge-item-title { font-size: 1.5rem; font-weight: 500; color: var(--color-ink); line-height: 1.25; letter-spacing: -0.025em; } @media (min-width: 768px) { .cs-challenge-item-title { font-size: 2rem; } } .cs-challenge-item-body { font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .cs-challenge-item-body { grid-column: span 8; font-size: 1rem; padding-top: 0; } } /* Impact */ .cs-impact-head { display: grid; gap: 3rem; align-items: flex-end; margin-bottom: 3rem; } @media (min-width: 768px) { .cs-impact-head { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .cs-impact-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } @media (min-width: 768px) { .cs-impact-label { grid-column: span 3; } } .cs-impact-label-num { color: var(--color-ink); margin-top: 0.5rem; } .cs-impact-desc { } @media (min-width: 768px) { .cs-impact-desc { grid-column: span 6; } } .cs-impact-grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .cs-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cs-impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cs-impact-stat { border-top: 1px solid var(--color-ink); padding-top: 1.5rem; } .cs-impact-stat-index { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); } .cs-impact-stat-figure { margin-top: 1rem; font-family: var(--font-display); font-size: 3rem; font-weight: 500; letter-spacing: -0.03em; } @media (min-width: 768px) { .cs-impact-stat-figure { font-size: 3.75rem; } } .cs-impact-stat-label { margin-top: 1rem; font-size: 1rem; font-weight: 500; color: var(--color-ink); } .cs-impact-stat-sub { margin-top: 0.25rem; font-size: 0.875rem; color: var(--color-ink-muted); } /* Pricing */ .cs-pricing-head { display: grid; gap: 3rem; align-items: flex-end; margin-bottom: 4rem; } @media (min-width: 768px) { .cs-pricing-head { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .cs-pricing-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } @media (min-width: 768px) { .cs-pricing-label { grid-column: span 3; } } .cs-pricing-label-num { color: var(--color-ink); margin-top: 0.5rem; } .cs-pricing-desc { font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .cs-pricing-desc { grid-column: span 6; font-size: 1.125rem; } } .cs-pricing-grid { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .cs-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cs-pricing-card { border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; background: var(--color-cream); border: 1px solid var(--color-rule-strong); } @media (min-width: 768px) { .cs-pricing-card { padding: 2.5rem; } } .cs-pricing-card-highlight { border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; background: var(--color-ink); color: var(--color-cream); } @media (min-width: 768px) { .cs-pricing-card-highlight { padding: 2.5rem; } } .cs-pricing-name { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } .cs-pricing-card-highlight .cs-pricing-name { color: rgba(240, 238, 233, 0.5); } .cs-pricing-price { margin-top: 1.5rem; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; font-size: 3rem; } @media (min-width: 768px) { .cs-pricing-price { font-size: 3.75rem; } } .cs-pricing-card-highlight .cs-pricing-price { font-size: 3.75rem; } @media (min-width: 768px) { .cs-pricing-card-highlight .cs-pricing-price { font-size: 4.5rem; } } .cs-pricing-note { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); } .cs-pricing-card-highlight .cs-pricing-note { color: rgba(240, 238, 233, 0.4); } .cs-pricing-features { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; } .cs-pricing-feature { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: rgba(15, 13, 11, 0.8); } .cs-pricing-card-highlight .cs-pricing-feature { color: rgba(240, 238, 233, 0.8); } .cs-pricing-feature-arrow { font-family: var(--font-mono); color: var(--color-ink-muted); margin-top: 0.125rem; flex-shrink: 0; } .cs-pricing-card-highlight .cs-pricing-feature-arrow { color: rgba(240, 238, 233, 0.3); } .cs-pricing-cta { margin-top: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.025em; padding: 0.75rem 1.5rem; transition: background-color 0.15s ease; background: var(--color-ink); color: var(--color-cream); } .cs-pricing-cta:hover { background: var(--color-ink-soft); } .cs-pricing-card-highlight .cs-pricing-cta { background: var(--color-cream); color: var(--color-ink); } .cs-pricing-card-highlight .cs-pricing-cta:hover { background: var(--color-cream-warm); } /* Coming soon */ .cs-coming-soon-grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .cs-coming-soon-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .cs-coming-soon-label { } @media (min-width: 768px) { .cs-coming-soon-label { grid-column: span 3; } } .cs-coming-soon-body { font-size: 1.125rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .cs-coming-soon-body { grid-column: span 7; } } /* Next project */ .cs-next-label { margin-bottom: 1.5rem; } .cs-next-heading { font-family: var(--font-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.025em; font-size: 1.25rem; transition: all 0.15s ease; } @media (min-width: 768px) { .cs-next-heading { font-size: 1.5rem; } } @media (min-width: 1024px) { .cs-next-heading { font-size: 1.75rem; } } .group:hover .cs-next-heading { font-style: italic; font-weight: 300; } /* ── Animations ───────────────────────────────────────────────────────── */ @keyframes ws-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes ws-marquee-reverse { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .ws-marquee, .ws-marquee-reverse { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; } .ws-marquee { animation: ws-marquee var(--marquee-duration, 40s) linear infinite; } .ws-marquee-reverse { animation: ws-marquee-reverse var(--marquee-duration, 40s) linear infinite; } .ws-marquee-pausable:hover .ws-marquee, .ws-marquee-pausable:hover .ws-marquee-reverse, .ws-marquee-pausable:focus-within .ws-marquee, .ws-marquee-pausable:focus-within .ws-marquee-reverse { animation-play-state: paused; } @keyframes sound-bar { 0%, 100% { transform: scaleY(0.12); } 30% { transform: scaleY(1); } 60% { transform: scaleY(0.35); } } .sound-bar { transform-origin: center; animation: sound-bar var(--bar-dur, 0.9s) ease-in-out infinite; animation-play-state: paused; } .case-card:hover .sound-bar, .case-card[data-active="true"] .sound-bar { animation-play-state: running; } @media (prefers-reduced-motion: reduce) { .sound-bar { animation: none; } } .demo-wave-bar { transform-origin: center; animation: sound-bar var(--bar-dur, 1.2s) ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .demo-wave-bar { animation: none; transform: scaleY(0.4); } } .reel-cta { transition: background-color 0.2s ease, border-color 0.2s ease; } .reel-cta:hover { background-color: var(--reel-accent); border-color: var(--reel-accent); } @media (prefers-reduced-motion: reduce) { .ws-marquee, .ws-marquee-reverse { animation: none; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } /* ── Case card ────────────────────────────────────────────────────────── */ .case-card { display: block; } .case-card-frame { position: relative; aspect-ratio: 4/3; transition: transform 0.5s ease; } .case-card:hover .case-card-frame, .case-card[data-active="true"] .case-card-frame { transform: translateY(-0.25rem); } .case-card-inner { position: relative; height: 100%; width: 100%; } .case-card-bg { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; } .case-card-bg--navy { background: #0a1628; color: var(--color-cream); } .case-card-bg--cream { background: #e9e6df; color: var(--color-ink); } .case-card-bg--ink { background: var(--color-ink); color: var(--color-cream); } .case-card-bg--hidden { opacity: 0; } .case-card-gradients { position: absolute; inset: 0; opacity: 0.6; pointer-events: none; } .case-card-soundbars { position: absolute; inset: 0; display: flex; align-items: center; padding-inline: 1.5rem; gap: 3px; opacity: 0.09; transition: opacity 0.7s ease; pointer-events: none; } .case-card:hover .case-card-soundbars { opacity: 0.22; } .case-card-soundbar { flex: 1; background: currentColor; border-radius: 2px; } .case-card-workflow { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; pointer-events: none; gap: 0.625rem; } .case-card-workflow-label { font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.25); margin-bottom: 0.5rem; } .case-card-workflow-step { display: flex; align-items: center; gap: 0.75rem; border-radius: 0.5rem; padding: 0.625rem 0.875rem; transition: opacity 0.4s ease, transform 0.4s ease; } .case-card-workflow-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; } .case-card-workflow-sys { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; flex-shrink: 0; width: 3rem; } .case-card-workflow-action { font-size: 12px; color: rgba(255, 255, 255, 0.8); flex: 1; } .case-card-workflow-check { font-family: var(--font-mono); font-size: 10px; flex-shrink: 0; } .case-card-workflow-pulse { width: 0.375rem; height: 0.375rem; border-radius: 9999px; flex-shrink: 0; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .case-card-badge { position: absolute; top: 2rem; right: 2rem; } @media (min-width: 768px) { .case-card-badge { top: 2.5rem; right: 2.5rem; } } .case-card-badge-pill { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.25rem 0.625rem; border-radius: 9999px; border: 1px solid; } .case-card-badge-pill--light { border-color: rgba(15, 13, 11, 0.2); color: var(--color-ink-soft); } .case-card-badge-pill--dark { border-color: currentColor; opacity: 0.7; } .case-card-center { position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding-inline: 2.5rem; } .case-card-logo { object-fit: contain; width: auto; height: auto; transition: transform 0.5s ease; } .case-card-logo--wide { max-width: 60%; max-height: 40%; } .case-card-logo--large { width: 78%; height: auto; max-height: 70%; } .case-card-logo--square { max-width: 45%; max-height: 55%; } .case-card-logo--tall { max-width: 35%; max-height: 60%; } .case-card:hover .case-card-logo--scalable { transform: scale(1.03); } .case-card-display-name { text-align: center; font-size: 2.25rem; font-weight: 500; line-height: 0.95; letter-spacing: -0.025em; } @media (min-width: 768px) { .case-card-display-name { font-size: 3rem; } } .case-card-fallback-name { text-align: center; } .case-card-fallback-title { font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; line-height: 0.95; letter-spacing: -0.025em; } @media (min-width: 768px) { .case-card-fallback-title { font-size: 3rem; } } .case-card-fallback-sub { margin-top: 1rem; font-size: 0.875rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; } .case-card-chevron { position: absolute; bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; border-radius: 9999px; border: 1px solid; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: all 0.15s ease; font-size: 1.25rem; } @media (min-width: 768px) { .case-card-chevron { bottom: 2.5rem; right: 2.5rem; } } .case-card-chevron--light { border-color: rgba(15, 13, 11, 0.2); } .case-card-chevron--dark { border-color: currentColor; } .case-card:hover .case-card-chevron { opacity: 1; transform: scale(1.1); } .case-card-reveal { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; opacity: 0; transition: opacity 0.7s ease-out; pointer-events: none; } .case-card:hover .case-card-reveal, .case-card[data-active="true"] .case-card-reveal { opacity: 1; } .case-card-reveal-image { object-fit: cover; transform: scale(1.05); transition: transform 1.2s ease-out; } .case-card:hover .case-card-reveal-image, .case-card[data-active="true"] .case-card-reveal-image { transform: scale(1); } .case-card-reveal-video { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; } .case-card-split { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; } .case-card-split--horizontal { display: flex; flex-direction: column; } .case-card-split--vertical { display: flex; } .case-card-split-panel { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; } .case-card-split-panel img.panel-bg { object-fit: cover; opacity: 0.6; } .case-card-split-logo { position: relative; z-index: 10; object-fit: contain; width: auto; height: auto; } .case-card-split-logo--left { max-width: 55%; max-height: 55%; } .case-card-split-logo--right { max-width: 80%; max-height: 75%; } .case-card-split-divider-h { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: rgba(0, 0, 0, 0.1); z-index: 10; } .case-card-split-divider-v { position: absolute; inset-block: 0; right: 0; width: 1px; background: rgba(255, 255, 255, 0.2); z-index: 10; } .case-card-image { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; } .case-card-image img { object-fit: cover; } .case-card-triptych { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; } .case-card-triptych-top { position: relative; flex: 5; } .case-card-triptych-top img { object-fit: cover; object-position: center; } .case-card-triptych-bottom { display: flex; flex: 3; } .case-card-triptych-bottom-panel { position: relative; flex: 1; } .case-card-triptych-bottom-panel img { object-fit: cover; object-position: center; } .case-card-triptych-bottom-panel + .case-card-triptych-bottom-panel { border-left: 1px solid rgba(255, 255, 255, 0.15); } .case-card-meta { margin-top: 1.25rem; } .case-card-client { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--color-ink); } @media (min-width: 768px) { .case-card-client { font-size: 1.125rem; } } /* ── Case card gallery ────────────────────────────────────────────────── */ .case-card-gallery { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.5rem; padding: 0.75rem; background: var(--color-cream-warm); } .case-card-gallery-row { flex: 1; overflow: hidden; } .case-card-gallery-row .ws-marquee { height: 100%; } .case-card-gallery-img { height: 100%; width: auto; object-fit: cover; border-radius: 0.375rem; aspect-ratio: 4/3; } /* ── Card showcase ────────────────────────────────────────────────────── */ .showcase-wallet { border-bottom: 1px solid var(--color-rule); background: var(--color-ink); color: var(--color-cream); } .showcase-wallet-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-block: 3.5rem; } @media (min-width: 768px) { .showcase-wallet-inner { padding-block: 5rem; } } @media (min-width: 1024px) { .showcase-wallet-inner { padding-inline: 3rem; } } .showcase-wallet-grid { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 768px) { .showcase-wallet-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .showcase-wallet-text { } @media (min-width: 768px) { .showcase-wallet-text { grid-column: span 4; } } .showcase-wallet-title { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 500; color: var(--color-cream); line-height: 1.375; letter-spacing: -0.025em; } .showcase-wallet-desc { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(240, 238, 233, 0.5); line-height: 1.625; } .showcase-wallet-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 768px) { .showcase-wallet-cards { grid-column: 6 / span 7; } } .showcase-wallet-card-wrap { position: relative; aspect-ratio: 3/4; border-radius: 0.75rem; overflow: hidden; } .showcase-wallet-card-wrap img { object-fit: cover; object-position: top; } .showcase-wallet-card-label { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(240, 238, 233, 0.25); text-align: center; } .showcase-physical { border-bottom: 1px solid var(--color-rule); background: var(--color-cream-warm); } .showcase-physical-inner { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-block: 3.5rem; } @media (min-width: 768px) { .showcase-physical-inner { padding-block: 5rem; } } @media (min-width: 1024px) { .showcase-physical-inner { padding-inline: 3rem; } } .showcase-physical-head { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; } @media (min-width: 768px) { .showcase-physical-head { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .showcase-physical-head-left { } @media (min-width: 768px) { .showcase-physical-head-left { grid-column: span 3; } } .showcase-physical-title { margin-top: 1rem; font-size: 1.25rem; font-weight: 500; color: var(--color-ink); line-height: 1.375; letter-spacing: -0.025em; } @media (min-width: 768px) { .showcase-physical-title { font-size: 1.5rem; } } .showcase-physical-desc { font-size: 0.875rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .showcase-physical-desc { grid-column: 5 / span 4; padding-top: 0.25rem; } } .showcase-hero-image { position: relative; aspect-ratio: 21/9; border-radius: 0.75rem; overflow: hidden; margin-bottom: 1rem; } .showcase-hero-image img { object-fit: cover; object-position: center; } .showcase-card-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .showcase-card-image-wrap { position: relative; aspect-ratio: 16/9; border-radius: 0.75rem; overflow: hidden; } .showcase-card-image-wrap img { object-fit: cover; object-position: center; } .showcase-card-label { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-ink-muted); } /* ── Project reel ─────────────────────────────────────────────────────── */ .project-reel { border-bottom: 1px solid var(--color-rule); background: var(--color-cream-warm); } .project-reel-head { margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-top: 5rem; padding-bottom: 4rem; } @media (min-width: 768px) { .project-reel-head { padding-top: 7rem; padding-bottom: 5rem; } } @media (min-width: 1024px) { .project-reel-head { padding-inline: 3rem; } } .project-reel-head-grid { display: grid; gap: 2.5rem; align-items: flex-end; } @media (min-width: 768px) { .project-reel-head-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; } } .project-reel-head-content { } @media (min-width: 768px) { .project-reel-head-content { grid-column: span 8; } } .project-reel-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .project-reel-eyebrow-line { display: block; width: 2rem; height: 1px; } .project-reel-eyebrow-text { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-ink-muted); } .project-reel-title { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; color: var(--color-ink); font-size: 2.25rem; } @media (min-width: 768px) { .project-reel-title { font-size: 3rem; } } @media (min-width: 1024px) { .project-reel-title { font-size: 3.75rem; } } .project-reel-desc { margin-top: 1.5rem; max-width: 42rem; font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .project-reel-desc { font-size: 1.125rem; } } .project-reel-cta-wrap { } @media (min-width: 768px) { .project-reel-cta-wrap { grid-column: span 4; justify-self: end; } } .project-reel-cta-link { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border-radius: 9999px; border: 1px solid var(--color-ink); color: var(--color-ink); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; } .project-reel-cta-link:hover .reel-cta-arrow { transform: translateX(2px); } .reel-cta-arrow { transition: transform 0.15s ease; } .project-reel-rows { padding-bottom: 5rem; display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 768px) { .project-reel-rows { padding-bottom: 7rem; gap: 1.25rem; } } .reel-row { overflow: hidden; } .reel-row-img { height: 11rem; width: auto; border-radius: 0.75rem; object-fit: cover; aspect-ratio: 4/3; box-shadow: 0 20px 40px -30px rgba(15, 13, 11, 0.35); } @media (min-width: 768px) { .reel-row-img { height: 14rem; } } @media (min-width: 1024px) { .reel-row-img { height: 16rem; } } /* ── Intro loader ─────────────────────────────────────────────────────── */ /* Intro shown once per visit — hide instantly on later navigations (set by inline head script) */ html.intro-seen .intro-loader { display: none; } .intro-loader { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--color-cream); } .intro-loader-inner { position: relative; width: 100%; height: 100%; max-width: 56rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: 2rem; } .intro-loader-canvas { position: relative; width: 100%; height: 16rem; } @media (min-width: 640px) { .intro-loader-canvas { height: 20rem; } } @media (min-width: 768px) { .intro-loader-canvas { height: 24rem; } } .intro-loader-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .intro-loader-progress { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .intro-loader-pct { font-family: var(--font-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--color-ink); } .intro-loader-label { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--color-ink-muted); } /* ── Scenario section ─────────────────────────────────────────────────── */ .scenario-header { margin-bottom: 3.5rem; } .scenario-header-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); margin-bottom: 0.75rem; } .scenario-heading { font-size: 1.875rem; font-weight: 500; color: var(--color-ink); max-width: 36rem; line-height: 1.25; } @media (min-width: 768px) { .scenario-heading { font-size: 3rem; } } .scenario-intro { margin-top: 1.25rem; font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; max-width: 42rem; } .scenario-grid { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .scenario-card { border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; height: 100%; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } @media (min-width: 768px) { .scenario-card { padding: 3rem; } } .scenario-card--standard { background: white; border: 1px solid var(--color-rule-strong); } .scenario-card--bespoke { background: var(--color-ink); color: var(--color-cream); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .scenario-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1.25rem; } .scenario-pill--standard { background: var(--color-cream-warm); border: 1px solid var(--color-rule); color: var(--color-ink); } .scenario-pill--bespoke { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(240, 238, 233, 0.6); } .scenario-card-heading { font-size: 1.875rem; font-weight: 500; line-height: 1.375; } .scenario-card-desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; } .scenario-card--standard .scenario-card-desc { color: var(--color-ink-muted); } .scenario-card--bespoke .scenario-card-desc { color: rgba(240, 238, 233, 0.5); } .scenario-steps { display: flex; flex-direction: column; gap: 0.75rem; } .scenario-step { display: flex; align-items: center; gap: 0.75rem; } .scenario-step-text { font-size: 0.875rem; line-height: 1.375; } .scenario-card--bespoke .scenario-step-text { color: rgba(240, 238, 233, 0.8); } .scenario-tick { width: 1.25rem; height: 1.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .scenario-tick--light { background: var(--color-cream-warm); border: 1px solid var(--color-rule); } .scenario-tick--dark { background: rgba(255, 255, 255, 0.15); } .scenario-tick svg { width: 0.625rem; height: 0.625rem; } .scenario-tick--light svg { color: var(--color-ink-muted); } .scenario-tick--dark svg { color: rgba(240, 238, 233, 0.6); } /* ── Speak to Nick ────────────────────────────────────────────────────── */ .speak-section { position: relative; border-bottom: 1px solid var(--color-rule); background: var(--color-cream); overflow: hidden; } .speak-dot-grid { position: absolute; inset: 0; opacity: 0.04; pointer-events: none; background-image: radial-gradient(circle, rgba(15,13,11,0.9) 1px, transparent 1px); background-size: 28px 28px; } .speak-ambient-glow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .speak-ambient-glow-circle { width: 700px; height: 400px; border-radius: 9999px; background: rgba(15, 13, 11, 0.02); filter: blur(120px); } .speak-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, var(--color-cream) 100%); } .speak-inner { position: relative; margin-inline: auto; max-width: 88rem; padding-inline: 1.5rem; padding-block: 7rem; display: flex; flex-direction: column; align-items: center; text-align: center; } @media (min-width: 768px) { .speak-inner { padding-block: 10rem; } } @media (min-width: 1024px) { .speak-inner { padding-inline: 3rem; } } .speak-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 9999px; border: 1px solid var(--color-rule-strong); background: var(--color-cream-warm); margin-bottom: 2.5rem; } .speak-badge-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; } .speak-badge-dot--live { background: #10b981; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .speak-badge-dot--idle { background: rgba(15, 13, 11, 0.2); } .speak-badge-text { font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-ink-muted); } .speak-heading { font-size: 4.5rem; font-weight: 500; color: var(--color-ink); line-height: 0.88; letter-spacing: -0.025em; margin-bottom: 2rem; } @media (min-width: 768px) { .speak-heading { font-size: 8rem; } } .speak-subtitle { font-size: 1.125rem; color: var(--color-ink-muted); line-height: 1.625; max-width: 28rem; margin-bottom: 4rem; } @media (min-width: 768px) { .speak-subtitle { font-size: 1.25rem; } } .speak-avatar-area { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 3.5rem; width: 100%; } .speak-waveform { position: absolute; inset-inline: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; height: 144px; top: 0; } .speak-waveform-bar { flex: 1; border-radius: 9999px; } .speak-btn { position: relative; z-index: 10; width: 9rem; height: 9rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 1px solid; transition: all 0.5s ease; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .speak-btn svg { width: 3rem; height: 3rem; color: var(--color-ink-muted); } .speak-btn-spinner { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 1.2s linear infinite; } .speak-hint { position: relative; z-index: 10; margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); outline: none; cursor: pointer; transition: color 0.15s ease; background: none; border: none; -webkit-tap-highlight-color: transparent; } .speak-hint:hover { color: var(--color-ink); } .speak-stats { display: flex; align-items: center; gap: 2.5rem; } .speak-stats-divider { width: 1px; align-self: stretch; background: var(--color-rule); } .speak-stat { text-align: center; } .speak-stat-value { font-family: var(--font-mono); font-size: 1.125rem; color: var(--color-ink); line-height: 1; } .speak-stat-label { font-family: var(--font-mono); font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); margin-top: 0.25rem; } .speak-disclaimer { margin-top: 2.5rem; color: rgba(107, 104, 99, 0.4); font-size: 0.75rem; font-family: var(--font-mono); letter-spacing: 0.05em; } /* ── Speak button (simple) ────────────────────────────────────────────── */ .speak-simple-wrap { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; } .speak-simple-ring-area { position: relative; display: flex; align-items: center; justify-content: center; width: 10rem; height: 10rem; } .speak-simple-ping { position: absolute; border-radius: 9999px; background: rgba(255, 255, 255, 0.06); animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .speak-simple-ping--inner { width: 7rem; height: 7rem; } .speak-simple-ping--outer { width: 9rem; height: 9rem; } .speak-simple-btn { position: relative; z-index: 10; width: 6rem; height: 6rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .speak-simple-btn--idle { background: white; color: #0a0a0a; } .speak-simple-btn--idle:hover { background: rgba(255,255,255,0.9); transform: scale(1.05); } .speak-simple-btn--idle:active { transform: scale(0.95); } .speak-simple-btn--soon { background: rgba(255,255,255,0.2); color: white; transform: scale(0.95); cursor: default; } .speak-simple-text { text-align: center; max-width: 20rem; } .speak-simple-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: white; } .speak-simple-desc { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); line-height: 1.625; } .speak-simple-desc a { color: white; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } .speak-simple-desc a:hover { color: rgba(255, 255, 255, 0.7); } /* ── Call demo (shared) ───────────────────────────────────────────────── */ .call-demo-section-head { display: grid; gap: 3rem; align-items: flex-start; margin-bottom: 5rem; } @media (min-width: 768px) { .call-demo-section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .call-demo-section-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } @media (min-width: 768px) { .call-demo-section-label { grid-column: span 3; } } .call-demo-section-label-sub { color: var(--color-ink); margin-top: 0.5rem; } .call-demo-section-desc { font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .call-demo-section-desc { grid-column: span 6; font-size: 1.125rem; } } .call-demo-story { max-width: 42rem; margin-inline: auto; display: flex; flex-direction: column; gap: 2rem; } .call-demo-story--compact { gap: 1.75rem; } /* AI/Caller message rows */ .call-msg-ai { display: flex; align-items: flex-start; gap: 1.25rem; } .call-msg-ai-avatar { flex-shrink: 0; padding-top: 0.125rem; } .call-msg-ai-avatar-circle { width: 2rem; height: 2rem; border-radius: 9999px; background: var(--color-ink); border: 1px solid var(--color-ink); display: flex; align-items: center; justify-content: center; } .call-msg-ai-avatar-circle svg { width: 1rem; height: 1rem; color: var(--color-cream); } .call-msg-ai-body { flex: 1; } .call-msg-label { font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); margin-bottom: 0.375rem; } .call-msg-ai-text { color: var(--color-ink); font-size: 1.125rem; line-height: 1.625; font-weight: 300; } .call-msg-caller { display: flex; justify-content: flex-end; } .call-msg-caller-inner { max-width: 28rem; text-align: right; } .call-msg-caller-text { color: var(--color-ink-soft); font-size: 1.125rem; line-height: 1.625; font-weight: 300; } /* Event card */ .call-event-card { display: flex; justify-content: center; } .call-event-card-inner { width: 100%; max-width: 24rem; border-radius: 1rem; border: 1px solid; padding: 1.25rem; backdrop-filter: blur(4px); } .call-event-card-row { display: flex; align-items: flex-start; gap: 1rem; } .call-event-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; font-weight: 700; font-size: 0.875rem; } .call-event-label { font-weight: 500; line-height: 1.375; color: var(--color-ink); } .call-event-detail { color: var(--color-ink-muted); font-size: 0.875rem; margin-top: 0.25rem; line-height: 1.375; } .call-event-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; margin-top: 0.375rem; } /* Event pill */ .call-event-pill { display: flex; justify-content: center; } .call-event-pill-inner { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; border: 1px solid; } .call-event-pill-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; flex-shrink: 0; } /* Call header */ .call-header { text-align: center; padding-block: 2rem; } .call-header-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; } .call-header-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .call-header-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } .call-header-waveform { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 20rem; margin-inline: auto; } .call-header-waveform-bar { flex: 1; border-radius: 9999px; } /* Call done */ .call-done { text-align: center; padding-block: 2.5rem; } .call-done-icon { width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: 1rem; } .call-done-label { font-weight: 500; } .call-done-sub { font-size: 0.875rem; color: var(--color-ink-muted); margin-top: 0.25rem; } /* Call divider */ .call-divider { display: flex; justify-content: center; } .call-divider-line { width: 1px; background: rgba(15, 13, 11, 0.1); } /* ── Call demo tabbed ─────────────────────────────────────────────────── */ .call-tabbed-head { display: grid; gap: 3rem; align-items: flex-end; margin-bottom: 3.5rem; } @media (min-width: 768px) { .call-tabbed-head { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .call-tabbed-desc { font-size: 1rem; color: var(--color-ink-soft); line-height: 1.625; } @media (min-width: 768px) { .call-tabbed-desc { grid-column: span 5; font-size: 1.125rem; } } .call-tier-toggle { display: flex; justify-content: center; margin-bottom: 2.5rem; } .call-tier-toggle-inner { display: inline-flex; border-radius: 9999px; border: 1px solid var(--color-rule-strong); background: white; padding: 0.25rem; gap: 0.25rem; } .call-tier-btn { padding: 0.625rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; color: var(--color-ink-muted); } .call-tier-btn:hover { color: var(--color-ink); } .call-tier-btn.active { background: var(--color-ink); color: var(--color-cream); } .call-tier-desc { text-align: center; font-size: 0.875rem; color: var(--color-ink-muted); margin-bottom: 3rem; font-family: var(--font-mono); letter-spacing: 0.05em; } .call-tabbed-body { display: grid; gap: 2.5rem; align-items: flex-start; } @media (min-width: 1024px) { .call-tabbed-body { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .call-tabbed-sidebar { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 1024px) { .call-tabbed-sidebar { grid-column: span 3; } } .call-tabbed-sidebar-btn { text-align: left; padding: 0.875rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; border: 1px solid; } .call-tabbed-sidebar-btn--inactive { background: white; color: var(--color-ink-muted); border-color: var(--color-rule-strong); } .call-tabbed-sidebar-btn--inactive:hover { color: var(--color-ink); } .call-tabbed-sidebar-btn--active { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); } .call-tabbed-conversation { } @media (min-width: 1024px) { .call-tabbed-conversation { grid-column: span 9; } } .call-tabbed-conversation-inner { background: var(--color-cream-warm); border-radius: 1rem; border: 1px solid var(--color-rule-strong); overflow: hidden; } .call-tabbed-conversation-content { padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; } /* Tabbed row variants */ .call-row-header { display: flex; align-items: center; gap: 1rem; padding-bottom: 0.5rem; } .call-row-header-status { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .call-row-header-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #10b981; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .call-row-header-label { font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); } .call-row-header-waveform { flex: 1; display: flex; align-items: center; gap: 3px; height: 1.25rem; opacity: 0.2; } .call-row-header-bar { flex: 1; border-radius: 9999px; background: var(--color-ink); } .call-row-ai { display: flex; align-items: flex-start; gap: 0.75rem; } .call-row-ai-avatar { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--color-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; } .call-row-ai-avatar svg { width: 0.875rem; height: 0.875rem; color: var(--color-cream); } .call-row-ai-bubble { flex: 1; background: white; border-radius: 1rem 1rem 1rem 0.125rem; padding: 0.75rem 1rem; border: 1px solid var(--color-rule); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .call-row-ai-label { font-size: 0.5rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-ink-muted); margin-bottom: 0.375rem; } .call-row-ai-text { color: var(--color-ink); font-size: 0.875rem; line-height: 1.625; } .call-row-caller { display: flex; justify-content: flex-end; } .call-row-caller-bubble { max-width: 75%; background: var(--color-ink); border-radius: 1rem 1rem 0.125rem 1rem; padding: 0.75rem 1rem; } .call-row-caller-label { font-size: 0.5rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.15em; color: rgba(240, 238, 233, 0.4); margin-bottom: 0.375rem; } .call-row-caller-text { color: var(--color-cream); font-size: 0.875rem; line-height: 1.625; } .call-row-event { display: flex; justify-content: center; } .call-row-event-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; border: 1px solid; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .call-row-event-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; } .call-row-done { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.25rem; border-top: 1px solid var(--color-rule); margin-top: 0.5rem; } .call-row-done-icon { width: 2rem; height: 2rem; border-radius: 9999px; background: #ecfdf5; border: 1px solid #a7f3d0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .call-row-done-icon svg { width: 1rem; height: 1rem; color: #10b981; } .call-row-done-label { font-size: 0.875rem; font-weight: 500; color: #059669; } .call-row-done-sub { font-size: 0.75rem; color: var(--color-ink-muted); margin-top: 0.125rem; } /* ── Workflow demo / Booking flow demo (shared) ───────────────────────── */ .demo-browser { border-radius: 0.75rem; overflow: hidden; border: 1px solid #e5e7eb; box-shadow: 0 12px 40px rgba(10, 22, 40, 0.10); background: white; position: sticky; top: 6rem; } .demo-browser-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; } .demo-browser-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; } .demo-browser-url { margin-left: 0.5rem; background: white; border-radius: 0.25rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; color: #9ca3af; flex: 1; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Timeline cards */ .demo-timeline-line { position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(15,13,11,0.15), rgba(15,13,11,0.1), transparent); } .demo-timeline-card { position: relative; padding-left: 3.5rem; margin-bottom: 1.75rem; } .demo-timeline-dot { position: absolute; left: 9px; top: 1rem; width: 1rem; height: 1rem; border-radius: 9999px; border: 3px solid white; z-index: 10; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .demo-timeline-ts { position: absolute; left: 0; top: -1rem; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.05em; } .demo-timeline-card-inner { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .demo-timeline-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .demo-timeline-card-icon { width: 18px; height: 18px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 700; flex-shrink: 0; } .demo-timeline-card-label { font-family: var(--font-mono); font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.15em; color: #9ca3af; font-weight: 600; } .demo-timeline-row { display: flex; align-items: center; justify-content: space-between; padding-block: 0.5rem; font-size: 0.8125rem; border-bottom: 1px solid #f0f0f0; } .demo-timeline-row:last-child { border-bottom: none; } .demo-timeline-row-key { color: #6b7280; } .demo-timeline-row-value { font-weight: 500; color: #0a1628; } .demo-timeline-row-value--highlight { color: #059669; } /* Insight card */ .demo-insight-card { position: relative; padding-left: 3.5rem; margin-bottom: 1.75rem; } .demo-insight-dot { position: absolute; left: 9px; top: 1rem; width: 1rem; height: 1rem; border-radius: 9999px; border: 3px solid white; z-index: 10; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); background: var(--color-ink); } .demo-insight-inner { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .demo-insight-title { font-weight: 500; font-size: 0.8125rem; color: #0a1628; margin-bottom: 0.5rem; } .demo-insight-body { font-size: 0.75rem; color: #6b7280; line-height: 1.625; } /* Workflow demo tabs */ .workflow-tabs { display: flex; gap: 0; border-top: 1px solid var(--color-rule); overflow-x: auto; } .workflow-tab { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1.25rem; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.025em; border-bottom: 2px solid transparent; transition: color 0.15s ease; white-space: nowrap; color: var(--color-ink-muted); } .workflow-tab:hover { color: var(--color-ink); } .workflow-tab.active { border-bottom-color: var(--color-ink); color: var(--color-ink); } .workflow-tab-num { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-muted); } /* Flow section (BookingFlowDemo) */ .flow-section { border-bottom: 1px solid var(--color-rule); padding-block: 5rem; padding-inline: 1.5rem; } @media (min-width: 768px) { .flow-section { padding-block: 7rem; } } @media (min-width: 1024px) { .flow-section { padding-inline: 3rem; } } .flow-section--light { background: var(--color-cream); } .flow-section--warm { background: var(--color-cream-warm); } .flow-section-inner { margin-inline: auto; max-width: 88rem; } .flow-section-header { margin-bottom: 3.5rem; } .flow-section-badge { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .flow-section-badge-num { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--color-ink); display: flex; align-items: center; justify-content: center; color: var(--color-cream); font-size: 0.8125rem; font-weight: 600; flex-shrink: 0; } .flow-section-badge-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } .flow-section-title { font-size: 1.875rem; font-weight: 500; color: var(--color-ink); line-height: 1.25; max-width: 42rem; margin-bottom: 0.75rem; } @media (min-width: 768px) { .flow-section-title { font-size: 2.25rem; } } .flow-section-sub { font-size: 1rem; color: var(--color-ink-muted); line-height: 1.625; max-width: 36rem; } .flow-section-grid { display: grid; gap: 3rem; align-items: flex-start; } @media (min-width: 1024px) { .flow-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .flow-section-timeline { position: relative; padding-top: 2rem; } /* Board pack */ .board-pack { border-radius: 1rem; border: 1px solid var(--color-rule-strong); overflow: hidden; background: white; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .board-pack-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-rule); background: var(--color-cream-warm); } .board-pack-title { font-weight: 500; color: var(--color-ink); font-size: 0.875rem; } .board-pack-subtitle { font-family: var(--font-mono); font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); margin-top: 0.125rem; } .board-pack-live { display: flex; align-items: center; gap: 0.5rem; } .board-pack-live-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #34d399; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .board-pack-live-text { font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; } .board-pack-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-rule); } .board-pack-kpi { padding: 1rem; text-align: center; border-right: 1px solid var(--color-rule); } .board-pack-kpi:last-child { border-right: none; } .board-pack-kpi-label { font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); margin-bottom: 0.25rem; } .board-pack-kpi-value { font-size: 1.25rem; font-weight: 500; color: var(--color-ink); line-height: 1; margin-bottom: 0.25rem; } .board-pack-kpi-sub { font-size: 0.6875rem; font-family: var(--font-mono); } .board-pack-kpi-sub--positive { color: #059669; } .board-pack-kpi-sub--neutral { color: var(--color-ink-muted); } .board-pack-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--color-rule); } .board-pack-chart { padding: 1.25rem; border-right: 1px solid var(--color-rule); } .board-pack-chart:last-child { border-right: none; } .board-pack-chart-title { font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted); margin-bottom: 1rem; } .board-pack-bar-group { display: flex; flex-direction: column; gap: 0.875rem; } .board-pack-bar-header { display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 0.375rem; } .board-pack-bar-name { color: var(--color-ink-soft); } .board-pack-bar-value { font-family: var(--font-mono); color: var(--color-ink); font-weight: 500; } .board-pack-bar-track { height: 0.375rem; background: var(--color-rule); border-radius: 9999px; overflow: hidden; } .board-pack-bar-fill { height: 100%; border-radius: 9999px; transition: width 0.3s ease; } .board-pack-revenue-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 80px; } .board-pack-revenue-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; } .board-pack-revenue-val { font-family: var(--font-mono); font-size: 9px; color: var(--color-ink-muted); } .board-pack-revenue-bar { width: 100%; border-radius: 4px 4px 0 0; } .board-pack-revenue-month { font-family: var(--font-mono); font-size: 9px; color: var(--color-ink-muted); text-transform: uppercase; } .board-pack-overhead-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; } .board-pack-overhead-label { color: var(--color-ink-muted); width: 3rem; flex-shrink: 0; } .board-pack-overhead-value { font-family: var(--font-mono); color: var(--color-ink); width: 3.5rem; text-align: right; } .board-pack-margin { border-top: 1px solid var(--color-rule); margin-top: 0.25rem; padding-top: 0.625rem; display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 500; } .board-pack-margin-label { color: var(--color-ink); } .board-pack-margin-value { font-family: var(--font-mono); color: #059669; } /* Status pills (BookingFlowDemo) */ .status-pill { padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; } .status-pill--confirmed { background: #eff6ff; color: #1d4ed8; } .status-pill--cancelled { background: #fef2f2; color: #b91c1c; } .status-pill--credit { background: #fffbeb; color: #b45309; } .status-pill--paid { background: #ecfdf5; color: #059669; } .status-pill--rescheduled { background: #eff6ff; color: #1d4ed8; } /* SMS bubble */ .demo-sms-bubble { background: #e9e9eb; border-radius: 14px 14px 14px 4px; padding: 0.625rem 0.875rem; font-size: 0.8125rem; color: #0a1628; line-height: 1.375; max-width: 92%; } /* Email preview */ .demo-email-subject { font-weight: 600; color: #0a1628; margin-bottom: 0.25rem; line-height: 1.375; font-size: 0.8125rem; } .demo-email-to { color: #9ca3af; font-size: 0.75rem; margin-bottom: 0.5rem; } .demo-email-body { color: #4a5568; line-height: 1.625; font-size: 0.8125rem; } /* ============================================================ Ex-Tailwind utilities — only the classes the showcase / coming-soon / about markup actually use. Hand-written so the site needs no build step. ============================================================ */ .grid { display: grid; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-center { justify-content: center; } .relative { position: relative; } .absolute { position: absolute; } .inset-0 { inset: 0; } .overflow-hidden { overflow: hidden; } .pointer-events-none { pointer-events: none; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-12 { gap: 3rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .object-center { object-position: center; } .font-display { font-family: var(--font-display); } .font-medium { font-weight: 500; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; } .tracking-tight { letter-spacing: -0.025em; } .text-ink { color: var(--color-ink); } .text-ink-soft { color: var(--color-ink-soft); } .border-b { border-bottom-style: solid; border-bottom-width: 1px; } .border-rule { border-color: var(--color-rule); } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .md\:col-span-5 { grid-column: span 5 / span 5; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-start-7 { grid-column-start: 7; } .md\:col-start-8 { grid-column-start: 8; } .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } } /* Innovation card flow animation (was an inline