/* ============================================================================= ODUEX — /ai/ page layout. Arrangement only. Every colour, length, radius and duration below is a core.css token; the components themselves are styled in core.css and are not restyled here. ============================================================================= */ /* ── 1. Hero ──────────────────────────────────────────────────────────────── */ /* The hero column is NOT capped at a body measure: --fs-hero inside a 68ch box forces every masked H1 line to wrap, and a wrapped .line reveals as one block instead of a line. .lede and .cta-note carry their own measures from core.css, so only the closing note needs one here. */ .page-ai .ai-hero-body{ --stack-gap: var(--space-6); } .page-ai .ai-hero-note{ max-width: 52ch; } /* ── 2. Centrepiece — the opener for the sitewide assistant ──────────────── */ .page-ai .ai-try-grid{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-10); align-items: center; } @media (max-width: 759px){ .page-ai .ai-try-grid{ grid-template-columns: minmax(0, 1fr); } } .page-ai .ai-try-list{ list-style: none; margin: var(--space-6) 0 0; padding: 0; } .page-ai .ai-try-list li{ display: flex; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); } .page-ai .ai-try-list li + li{ border-top: 1px solid var(--line); } .page-ai .ai-try-num{ color: var(--ink-faint); font-size: var(--fs-xs); } .page-ai .ai-try-note{ margin-top: var(--space-4); } .page-ai .ai-try-small{ margin-top: var(--space-3); font-size: var(--fs-sm); max-width: 44ch; } /* The opener can only do anything once assistant.js has mounted — it adds .assistant-ready to — so it is painted only then. Without scripting, the direct contact routes render in its place instead: a button that cannot do anything is worse than no button. */ .page-ai .ai-try-open{ display: none; } .assistant-ready .page-ai .ai-try-open{ display: inline-flex; } .assistant-ready .page-ai .ai-try-fallback{ display: none; } .page-ai .ai-try-routes{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); } /* ── 4. Dark stage — the worked example ──────────────────────────────────── */ .page-ai .ai-demo-grid{ --gap: var(--space-12); align-items: start; } /* Inside .stage, --paper-card and --paper-raised both resolve to --stage-raised. Frame on --paper, bubbles on --paper-raised and --paper-sunk: the only three distinct surfaces the stage has, so the bubbles read as bubbles. */ .page-ai .ai-chat{ display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); } .page-ai .ai-chat .tag-row{ margin-bottom: var(--space-2); } .page-ai .ai-msg{ max-width: 85%; align-self: flex-start; padding: var(--space-4) var(--space-5); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); } .page-ai .ai-msg p{ margin: 0; max-width: none; } .page-ai .ai-msg-user{ align-self: flex-end; background: var(--paper-sunk); border: 1px solid var(--line-strong); } .page-ai .ai-chat-status{ display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); color: var(--ink-muted); } .page-ai .ai-chat-status .mono{ font-size: var(--fs-xs); } .page-ai .ai-demo-caption{ margin-top: var(--space-10); max-width: var(--measure-narrow); } /* ── 5 & 8. Note lines that follow a grid or a CTA row ───────────────────── */ .page-ai .ai-stack-note, .page-ai .ai-final-note{ margin-top: var(--space-8); max-width: var(--measure-narrow); } /* The H1 steps down on a narrow phone, because a masked line that wraps reveals as one block. --fs-hero bottoms out at its 2.90rem floor while the column keeps shrinking, so the longest line overruns below 330px. Same step, and the same reason, as the homepage and teardown heroes. */ @media (max-width: 400px){ .page-ai h1.display-hero{ font-size: var(--fs-4xl); } }