/* Component-level styles: header, nav, buttons, cards, forms, footer. */ .site-header { border-bottom: 1px solid var(--color-border-subtle); background: var(--color-white); box-shadow: var(--shadow-soft); } .site-header__inner { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-ink-900); font-weight: 700; margin-right: auto; } .brand__mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(135deg, var(--color-royal-600), var(--color-royal-900)); display: inline-block; } .primary-nav__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; } .nav-link { text-decoration: none; color: var(--color-ink-700); font-weight: 500; padding: var(--space-1) 0; border-bottom: 2px solid transparent; } .nav-link:hover { color: var(--color-accent-strong); } .nav-link--active { color: var(--color-accent-strong); border-bottom-color: var(--color-accent-strong); } .staff-login { font-size: 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); text-decoration: none; white-space: nowrap; } /* 2026-08-26: mobile nav collapse (src/client/nav.client.ts). Hidden by default at every width — only revealed once nav.client.js has actually run and added .js-nav-ready to , and only below the same 40rem breakpoint the header itself already stacks at. Without JS (or before it loads), the button never appears and .primary-nav below keeps rendering exactly as it always has — full nav, no collapse, no lockout. See header.ts's comment for the full progressive-enhancement reasoning. */ .primary-nav-toggle { display: none; font: inherit; font-weight: 600; color: var(--color-ink-700); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); cursor: pointer; } .primary-nav-toggle:hover { color: var(--color-accent-strong); } main { outline: none; } .hero { background: linear-gradient(180deg, var(--color-blue-100), var(--color-white)); padding: var(--space-6) var(--space-4); } .hero__inner { max-width: var(--content-max-width); margin: 0 auto; text-align: left; } .hero__lede { font-size: 1.125rem; color: var(--color-text-muted); max-width: 42rem; } .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); } .button { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; transition: background-color var(--motion-base) ease, color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-fast) ease; border: 2px solid transparent; } /* Pressed-state feedback (all tiers): a small, instant, non-color cue so activation isn't communicated by color alone. Governed by the existing global prefers-reduced-motion override in base.css like every other transition here. */ .button:active { transform: translateY(1px); } /* Layered on top of the existing global :focus-visible outline (never removed) — adds elevation-consistent focus feedback, doesn't replace it. */ .button:focus-visible { box-shadow: var(--shadow-focused-interactive); } .button--primary { background: var(--color-accent-strong); color: var(--color-white); box-shadow: var(--shadow-soft); } .button--primary:hover { background: var(--color-royal-900); color: var(--color-white); box-shadow: var(--shadow-medium); } .button--primary:active { box-shadow: var(--shadow-soft); } .button--secondary { background: var(--color-white); color: var(--color-accent-strong); border-color: var(--color-accent-strong); } .button--secondary:hover { box-shadow: var(--shadow-soft); } .button--ghost { background: transparent; color: var(--color-accent-strong); border-color: var(--color-border); } .section { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-5) var(--space-4); } .section--emphasis { background: var(--color-surface-section-alt); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); } .section--cta { text-align: left; border-top: 1px solid var(--color-border-subtle); } .feature-list, .process-list { padding-left: var(--space-4); } .feature-list li, .process-list li { margin-bottom: var(--space-2); } .app-card-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); } .app-card { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface-raised); box-shadow: var(--shadow-soft); } .app-card--full { grid-column: 1 / -1; } .app-card__title { margin-bottom: var(--space-1); } .app-card__meta { font-size: 0.875rem; color: var(--color-text-muted); } .empty-state { color: var(--color-text-muted); font-style: italic; } .form-notice { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); } .form-field { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); max-width: 32rem; } .form-field label { font-weight: 600; } .form-field input, .form-field textarea { padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; } .site-footer { background: var(--color-royal-900); color: var(--color-blue-100); margin-top: var(--space-6); box-shadow: var(--shadow-inset-highlight); } .site-footer__inner { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-5) var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); } .site-footer a { color: var(--color-blue-100); } .site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); } .site-footer__legal { text-align: center; padding: var(--space-3) var(--space-4); font-size: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.15); } @media (max-width: 40rem) { .site-header__inner { flex-direction: column; align-items: flex-start; } /* Only once JS has actually enhanced the page (see .primary-nav-toggle above) — otherwise this rule would hide the nav with no way to reopen it. */ html.js-nav-ready .primary-nav-toggle { display: inline-block; } html.js-nav-ready .primary-nav { display: none; width: 100%; } html.js-nav-ready .primary-nav--open { display: block; } html.js-nav-ready .primary-nav__list { flex-direction: column; gap: var(--space-2); } } /* Slice B: analytics consent banner (src/client/consent.client.ts). Fixed to the bottom of the viewport, dismissed via [hidden] rather than a display toggle so it degrades safely if consent.client.js fails to load (the banner never renders at all, and the analytics queue simply stays "unknown" — nothing is ever sent). */ .consent-banner { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 1000; max-width: 40rem; margin: 0 auto; background: var(--color-royal-900); color: var(--color-blue-100); border-radius: 0.5rem; padding: var(--space-4); box-shadow: 0 0.5rem 1.5rem rgba(11, 31, 77, 0.35); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } /* Required so [hidden] actually hides the banner, overriding the display above. */ .consent-banner[hidden] { display: none; } .consent-banner__text { flex: 1 1 16rem; margin: 0; font-size: 0.9rem; } .consent-banner__text a { color: var(--color-blue-100); text-decoration: underline; } .consent-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .link-button { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; } /* ========================================================================= Slice 1 — Public-Site Experience Foundation (Sections 21-28, 32). Everything below is additive: no selector above this line is redefined, only referenced (e.g. .button, .section, .app-card-grid stay exactly as they were). New component classes for the technical-hero visualization, business-problem/solution/pricing cards, the How We Build process rail, the Ava invitation panels, and the "Talk to Ava" nav CTA. ========================================================================= */ .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-strong); margin: 0 0 var(--space-2); } /* Talk to Ava: the primary nav action (Section 52.A). Styled as a small filled button inline with the other nav links so it reads as the primary action without needing a second, separate CTA element. */ .nav-link--cta { background: var(--color-accent-strong); color: var(--color-white); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); border-bottom-color: transparent; box-shadow: var(--shadow-soft); transition: background-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-fast) ease; } .nav-link--cta:hover { background: var(--color-accent-hover); color: var(--color-white); box-shadow: var(--shadow-medium); } .nav-link--cta:active { box-shadow: var(--shadow-soft); transform: translateY(1px); } .nav-link--cta:focus-visible { box-shadow: var(--shadow-focused-interactive); } /* --- Technical hero (Section 23) --------------------------------------- */ .hero--technical { background: radial-gradient(60rem 30rem at 15% 0%, var(--color-blue-100), transparent), linear-gradient(180deg, var(--color-blue-50), var(--color-white)); padding: var(--space-6) var(--space-4); position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-inset-highlight); } .hero--technical::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--color-grid-line-light) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line-light) 1px, transparent 1px); background-size: 2.5rem 2.5rem; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%); pointer-events: none; } .hero__inner--split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: center; position: relative; } .hero__credibility { font-weight: 600; color: var(--color-ink-700); margin-top: var(--space-4); } .trust-indicators { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; } .trust-indicator { font-size: 0.85rem; color: var(--color-text-muted); padding-left: var(--space-3); position: relative; } .trust-indicator::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); } /* Operational-AI workflow visualization (Section 23): a central node, surrounding workflow nodes, and one visibly distinct human-approval checkpoint. Decorative (aria-hidden in markup) — the same information is stated in adjacent page text, so hiding this from mobile/assistive tech loses nothing. */ .workflow-diagram { background: var(--color-surface-technical); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); position: relative; overflow: hidden; box-shadow: 0 1.5rem 3rem rgba(6, 12, 30, 0.25); } .workflow-diagram::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, var(--color-grid-line) 1px, transparent 1px), radial-gradient(1px 1px at 60% 70%, var(--color-grid-line) 1px, transparent 1px), radial-gradient(1px 1px at 80% 20%, var(--color-grid-line) 1px, transparent 1px); background-size: 6rem 6rem; pointer-events: none; } .workflow-diagram__center { position: relative; margin: 0 auto var(--space-4); width: 8.5rem; height: 8.5rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--color-royal-500), var(--color-royal-900)); box-shadow: 0 0 0 0.5rem var(--color-accent-illumination); color: var(--color-text-on-dark); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 0.9rem; padding: var(--space-3); } .workflow-diagram__nodes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .workflow-diagram__node { background: var(--color-surface-technical-panel); border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-sm); color: var(--color-text-on-dark); font-size: 0.8rem; text-align: center; padding: var(--space-2); } .workflow-diagram__checkpoint { position: relative; margin: var(--space-4) 0 0; color: var(--color-text-on-dark); font-size: 0.8rem; text-align: center; border-top: 1px solid var(--color-border-on-dark); padding-top: var(--space-3); } @media (prefers-reduced-motion: no-preference) { .workflow-diagram__center { animation: workflow-pulse var(--motion-slow) ease-in-out infinite alternate; } } @keyframes workflow-pulse { from { box-shadow: 0 0 0 0.4rem var(--color-accent-illumination); } to { box-shadow: 0 0 0 0.75rem var(--color-accent-illumination); } } @media (max-width: 56rem) { .hero__inner--split { grid-template-columns: 1fr; } } /* --- Business-problem cards (Section 29) -------------------------------- */ .problem-card-grid { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); } .problem-card { border: 1px solid var(--color-border-subtle); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--color-surface-raised); box-shadow: var(--shadow-soft); } .problem-card__title { margin-bottom: var(--space-1); font-size: 1.05rem; } .problem-card__desc { margin: 0; color: var(--color-text-muted); } /* --- Dark technical section wrapper (Ava invitation, Section 32) ------- */ .section--dark { background: var(--color-surface-technical); color: var(--color-text-on-dark); border-radius: var(--radius-lg); margin: var(--space-5) auto; max-width: var(--content-max-width); padding: var(--space-5) var(--space-4); box-shadow: var(--shadow-medium), var(--shadow-inset-highlight); } .section--dark h2, .section--dark h1 { color: var(--color-text-on-dark); } .ava-invite__panel { max-width: 40rem; } .ava-invite__prompts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); padding: 0; } .ava-invite__prompt { border: 1px solid var(--color-border-on-dark); border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: 0.85rem; color: var(--color-text-on-dark-muted); } /* Ava panel on /contact — sits on the normal light surface (not .section--dark) so it visually matches whichever state it's in (preview vs. unavailable) without implying the whole page is a different "mode." */ .ava-invite--panel { background: var(--color-surface-soft-panel); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } /* --- Solutions (Section 30) --------------------------------------------- */ .solution-card-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-4); } .solution-card { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface-raised); box-shadow: var(--shadow-soft); } .solution-card__availability { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-accent-strong); margin: 0 0 var(--space-1); } .solution-card__title { margin: 0 0 var(--space-1); font-size: 1.1rem; } .solution-card__desc { color: var(--color-text-muted); } /* --- How We Build process rail (Section 28) ----------------------------- */ .process-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); position: relative; } .process-rail::before { content: ""; position: absolute; top: 1.1rem; left: 2.5rem; right: 2.5rem; height: 2px; background: var(--color-border-emphasized); z-index: 0; } .process-rail__step { position: relative; text-align: center; z-index: 1; } .process-rail__number { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-accent-strong); color: var(--color-white); font-weight: 700; margin-bottom: var(--space-2); } .process-rail__title { font-size: 1rem; margin-bottom: var(--space-1); } .process-rail__desc { font-size: 0.85rem; color: var(--color-text-muted); } @media (max-width: 48rem) { .process-rail { grid-template-columns: 1fr; gap: var(--space-4); } .process-rail::before { top: 0; bottom: 0; left: 1.1rem; right: auto; width: 2px; height: auto; } .process-rail__step { text-align: left; padding-left: var(--space-5); } .process-rail__number { position: absolute; left: 0; top: 0; } } /* --- How We Build interactive cards and detail pages -------------------- */ .process-rail__step { height: 100%; } .process-rail__link { display: flex; flex-direction: column; height: 100%; min-height: 15rem; padding: var(--space-4); color: inherit; text-decoration: none; background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-fast) ease; } .process-rail__link:hover { color: inherit; border-color: var(--color-accent-strong); box-shadow: var(--shadow-medium); transform: translateY(-2px); } .process-rail__link:focus-visible { box-shadow: var(--shadow-focused-interactive); } .process-rail__link:active { transform: translateY(1px); } .process-rail__learn-more { display: inline-block; margin-top: auto; padding-top: var(--space-3); color: var(--color-accent-strong); font-size: 0.85rem; font-weight: 700; } .process-detail__intro { max-width: 52rem; } .process-detail__eyebrow { margin: 0 0 var(--space-2); color: var(--color-accent-strong); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .process-detail__summary { max-width: 48rem; color: var(--color-text-muted); font-size: 1.15rem; } .process-detail__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .process-detail__panel { padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .process-detail__panel h2 { margin-top: 0; } .process-detail__panel ul { margin: 0; padding-left: var(--space-4); } .process-detail__panel li { margin-bottom: var(--space-2); } .process-detail__navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); } .process-detail__navigation-item--next { text-align: right; } .process-detail__nav-link, .process-detail__all-link { font-weight: 700; } .process-detail__all-link { text-align: center; } @media (max-width: 48rem) { .process-rail__step { padding-left: 0; } .process-rail__link { min-height: 0; padding-left: calc(var(--space-5) + var(--space-3)); } .process-rail__number { left: var(--space-3); top: var(--space-4); } .process-detail__grid { grid-template-columns: 1fr; } .process-detail__navigation { grid-template-columns: 1fr; align-items: start; } .process-detail__navigation-item--next, .process-detail__all-link { text-align: left; } } /* --- Pricing (Section 31) ------------------------------------------------ */ .pricing-card-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-4); } .pricing-card { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface-raised); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: var(--space-2); } .pricing-card__title { margin: 0; } .pricing-card__for { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; } .pricing-card__inclusions { margin: 0; padding-left: var(--space-4); font-size: 0.9rem; } .pricing-card__price { font-weight: 700; color: var(--color-accent-strong); margin: var(--space-2) 0 0; } .pricing-card__caveat { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; } .built-from-experience { font-style: italic; color: var(--color-ink-700); }