/* About tab — the static "what / why / how" page plus the embedded contact form (Netlify Forms backed). Two scopes: - .about-body / .about-layout — the prose column on the left and the form column on the right (single column on narrow viewports). - .contact-form-block / .contact-* — the inline contact form, with the asymmetric padding (24 26 26) kept for now; migrating to var(--space-*) is a Phase-3 follow-up. Loaded by site/index.html when the About tab is active; for now the whole site eagerly loads it (no per-tab code splitting yet) so an extra in is enough. */ /* About tab body — readable prose width, a touch more line-height. */ .about-body { max-width: 720px; font-size: 15px; /* @approved: bespoke prose body size; one step above --text-md (14px) for readability in long-form About text */ line-height: 1.65; color: var(--ink-2); } .about-body p { margin: 0 0 14px; } .about-body strong { color: var(--ink); } .about-body a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; } .about-body a:hover { text-decoration-color: var(--accent); } .about-body h3 { margin: 24px 0 8px; font-size: var(--text-lg); color: var(--ink); font-weight: 600; } .about-body ul { margin: 0 0 14px; padding-left: var(--space-5); } .about-body ul li { margin: 0 0 6px; } /* About tab layout — single column on mobile, two columns on wider viewports with the prose on the left and the contact form pinned to the right. The form column has a sticky inner so on long About pages the form stays visible as the user scrolls the prose. */ .about-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } @media (min-width: 960px) { .about-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: 44px; } } /* Contact form on the About tab — uses standard input styling tinted to the site's neutral surface. AJAX submit → Netlify Forms; inline status line for thank-you / errors. */ .contact-form-block { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 24px 26px 26px; } @media (min-width: 960px) { .contact-form-block { position: sticky; top: var(--space-4); } } .contact-form-block h3 { margin: 0 0 6px; font-size: 20px; /* @approved: bespoke section heading for the contact card; between --text-xl (22px) and --text-md (14px), provides card-level prominence */ color: var(--ink); } .contact-form-block .csub { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.55; } .contact-form { display: flex; flex-direction: column; gap: var(--space-3); } .contact-row { display: flex; flex-direction: column; gap: var(--space-1); } .contact-label { font-size: 12px; color: var(--ink-2); font-weight: 500; } .contact-optional { color: var(--ink-3); font-weight: 400; } .contact-required { color: var(--neg); font-weight: 400; margin-left: 1px; } .contact-row input, .contact-row textarea { border: 1px solid var(--rule); background: var(--paper-2); border-radius: 5px; padding: 7px 10px; font: inherit; font-size: var(--text-base); color: var(--ink); width: 100%; box-sizing: border-box; } .contact-row textarea { resize: vertical; min-height: 130px; line-height: 1.5; } .contact-row input:focus, .contact-row textarea:focus { outline: none; border-color: var(--accent); background: var(--card); } .contact-actions { display: flex; align-items: center; gap: 14px; margin-top: var(--space-1); } /* @applies-to button */ .contact-submit { border: 1px solid var(--accent); background: var(--accent); /* --paper, not white: dark-mode --accent is a light blue where white fails AA (2.6:1) — same ink treatment as .tab.on / .toggle-btn.on / .chip--on (navy-chrome PR 863, sweep PR 869). */ color: var(--paper); border-radius: 5px; padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } .contact-submit:hover { filter: brightness(1.08); } .contact-submit:disabled { opacity: 0.6; cursor: progress; } .contact-status { font-size: var(--text-sm); color: var(--ink-3); } .contact-status--ok { color: var(--g-strong); } .contact-status--err { color: var(--g-urgent); } .contact-honeypot { position: absolute; left: -9999px; }