/* Vennus Digital — Audit Form Styles Brand v1.4.4 — Beige mode is the default on Form + Report surfaces (docs/redesign-2026-07-spec.md §2). Dark mode is opt-in via a sun/moon toggle, not route-driven — [data-theme="dark"] on re-declares the surface + text tokens below to charcoal. Operator blue is the sole accent in both modes; it never changes. */ /* ─── TOKENS ─── */ :root { /* Beige mode — default on Form + Report pages */ --cream: #F5F2EA; --cream-elev: #FBF8F0; --cream-card: #EFEBE0; --cream-deep: #E8E2D0; --charcoal: #1A1814; --charcoal-soft: rgba(26, 24, 20, 0.78); --charcoal-muted: rgba(26, 24, 20, 0.55); --charcoal-faint: rgba(26, 24, 20, 0.32); --charcoal-very-faint: rgba(26, 24, 20, 0.16); --border: rgba(26, 24, 20, 0.08); --border-mid: rgba(26, 24, 20, 0.14); --border-strong: rgba(26, 24, 20, 0.22); --accent: #4b9ee8; --accent-deep: #2d7fc4; --accent-light: rgba(75, 158, 232, 0.10); --accent-mid: rgba(75, 158, 232, 0.22); --serif: 'Fraunces', Georgia, serif; --sans: 'Syne', system-ui, sans-serif; --mono: 'Syne Mono', ui-monospace, monospace; } /* Dark mode — toggled via the sun/moon button (components/ThemeToggle.tsx on the Report page, the vanilla-JS equivalent on the Form page). Same token NAMES, charcoal-mode VALUES — every rule below that references var(--cream)/var(--charcoal) flips automatically. Operator blue accent is unchanged (--accent* isn't overridden here). */ [data-theme="dark"] { --cream: #0d0f13; --cream-elev: #14171d; --cream-card: #181c23; --cream-deep: #181c23; --charcoal: #f4ede1; --charcoal-soft: rgba(244, 237, 225, 0.78); --charcoal-muted: rgba(244, 237, 225, 0.65); --charcoal-faint: rgba(244, 237, 225, 0.42); --charcoal-very-faint: rgba(244, 237, 225, 0.22); --border: rgba(244, 237, 225, 0.10); --border-mid: rgba(244, 237, 225, 0.18); --border-strong: rgba(244, 237, 225, 0.28); } /* ─── GLOBAL ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--sans); background: var(--cream); color: var(--charcoal); min-height: 100vh; line-height: 1.5; position: relative; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #app { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; } /* ─── SCREEN BASE ─── */ .screen { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 8vh, 80px) clamp(24px, 5vw, 64px); max-width: 880px; margin: 0 auto; width: 100%; } /* ─── INTRO SCREEN ─── */ .intro-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--charcoal-muted); margin-bottom: 32px; display: inline-flex; align-items: center; gap: 14px; } .intro-eyebrow::before { content: ''; display: inline-block; width: 36px; height: 1px; background: var(--charcoal-muted); } .intro-headline { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 6.5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: clamp(28px, 5vh, 48px); max-width: 18ch; } .intro-headline em { font-style: italic; font-weight: 300; color: var(--accent); } .intro-body { font-family: var(--serif); font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--charcoal-soft); max-width: 60ch; margin-bottom: clamp(40px, 6vh, 64px); } /* ─── BUTTONS ─── */ .btn-primary { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; padding: 16px 32px; background: var(--charcoal); color: var(--cream); border: none; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; align-self: flex-start; } .btn-primary:hover:not(:disabled) { background: var(--accent-deep); color: var(--cream-elev); } .btn-primary:disabled { background: var(--charcoal-faint); color: var(--cream); cursor: not-allowed; } .btn-primary.btn-large { font-size: 15px; padding: 20px 40px; } .btn-secondary { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; padding: 14px 24px; background: transparent; color: var(--charcoal); border: 1px solid var(--border-strong); cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; } .btn-secondary:hover { border-color: var(--charcoal); background: var(--cream-card); } /* ─── QUESTION SCREEN ─── */ .screen-question { justify-content: center; } .question-progress { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--charcoal-muted); margin-bottom: clamp(28px, 5vh, 48px); padding-bottom: 16px; border-bottom: 1px solid var(--border); } .progress-section { color: var(--accent); } .q-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 16px; max-width: 24ch; } .q-subtitle { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--charcoal-soft); margin-bottom: 12px; max-width: 56ch; } .q-subprompt { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--charcoal-muted); margin-bottom: clamp(24px, 4vh, 36px); letter-spacing: 0.02em; } .q-constraint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal-muted); margin-bottom: 16px; } /* Multi-select cap affordance. Set by attachMultiSelectCapHandler when the user has hit the question's `max`: all unchecked options get .q-option-capped added to them so the cap is FELT visually before being hit. */ .q-option-capped { opacity: 0.35; transition: opacity 200ms var(--ease); } .q-option-capped:hover { opacity: 0.55; } /* Cap-exceeded notice — hidden by default. Flashed via .q-cap-notice-visible for ~2s when the user tries to select a 4th option (or whatever max + 1 is). Sits below the options in the operator-blue accent so it reads as an editorial nudge, not an alarm. */ .q-cap-notice { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-top: 12px; opacity: 0; transform: translateY(-4px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; } .q-cap-notice-visible { opacity: 1; transform: translateY(0); } .question-body { margin-bottom: clamp(32px, 5vh, 48px); } .question-actions { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); } /* ─── OPTIONS ─── */ .q-options { display: flex; flex-direction: column; gap: 8px; } .q-option { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background: var(--cream-elev); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s ease; font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.4; } .q-option:hover { border-color: var(--charcoal-muted); background: var(--cream-card); } .q-option input { margin-top: 4px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); } .q-option input:checked ~ .q-option-label, .q-option:has(input:checked) { background: var(--accent-light); border-color: var(--accent); } .q-option-label { flex: 1; } /* Two-column */ .q-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } @media (max-width: 720px) { .q-two-column { grid-template-columns: 1fr; gap: 24px; } } .q-column-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal-muted); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* Conditional text */ .q-text-conditional { margin-top: 12px; width: 100%; padding: 14px 18px; font-family: var(--serif); font-size: 16px; background: var(--cream-elev); border: 1px solid var(--border-strong); resize: vertical; min-height: 60px; color: var(--charcoal); } /* ─── TEXTAREA / EMAIL ─── */ .q-textarea, .q-email { width: 100%; padding: 18px 22px; font-family: var(--serif); font-weight: 400; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; background: var(--cream-elev); border: 1px solid var(--border-strong); color: var(--charcoal); resize: vertical; } .q-textarea { min-height: 140px; } .q-email { font-family: var(--sans); } .q-textarea:focus, .q-email:focus { outline: none; border-color: var(--accent); background: var(--cream); } .q-textarea::placeholder, .q-email::placeholder { color: var(--charcoal-faint); font-style: italic; } .q-counter { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal-faint); } .q-counter-met { color: var(--accent); } /* ─── PREVIEW SCREEN ─── */ .screen-preview { text-align: left; align-items: flex-start; } .preview-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; } .preview-headline { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 5.5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 24px; max-width: 22ch; } .preview-body { font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--charcoal-soft); max-width: 60ch; margin-bottom: 40px; } .screen-preview .btn-primary { margin-bottom: 16px; } /* ─── LOADER SCREEN ─── */ .screen-loader { align-items: center; text-align: center; } .loader-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 32px; } .loader-stage { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; color: var(--charcoal); margin-bottom: 40px; min-height: 1.3em; transition: opacity 0.3s ease; } .loader-canvas { display: block; margin: 0 auto 32px; max-width: 100%; height: auto; image-rendering: pixelated; background: var(--charcoal-very-faint); } .loader-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal-faint); } /* ─── TRANSITION SCREEN ─── */ .screen-transition { align-items: center; text-align: center; } .transition-canvas { display: block; margin: 0 auto 24px; max-width: 100%; height: auto; image-rendering: pixelated; } .transition-text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--charcoal-muted); } /* ─── B2B COMING SOON ─── */ .screen-comingsoon { align-items: flex-start; } .cs-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--charcoal-muted); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 14px; } .cs-eyebrow::before { content: ''; display: inline-block; width: 36px; height: 1px; background: var(--charcoal-muted); } .cs-headline { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 32px; max-width: 18ch; } .cs-headline em { font-style: italic; color: var(--accent); } .cs-body { font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--charcoal-soft); max-width: 56ch; margin-bottom: 18px; } .cs-signoff { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 16px; color: var(--charcoal-muted); margin-top: 32px; } /* ─── REPORT STYLES ─── */ /* Report-specific styles have been extracted to report.css for full-bleed editorial layout. */ /* The form's #app container constrains width to 880px; report.css overrides to break out. */ /* ─── ERROR SCREEN ─── */ .screen-error { align-items: flex-start; } .error-headline { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.5vw, 48px); margin-bottom: 16px; } .error-body { font-family: var(--serif); font-weight: 300; font-size: 18px; color: var(--charcoal-soft); margin-bottom: 24px; } .error-detail { font-family: var(--mono); font-size: 12px; background: var(--cream-card); padding: 16px 20px; margin-bottom: 32px; white-space: pre-wrap; word-break: break-word; max-width: 100%; border: 1px solid var(--border); } /* ─── DEV PANEL ─── */ .dev-panel { position: fixed; bottom: 16px; right: 16px; z-index: 100; background: var(--charcoal); color: var(--cream); padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 8px 32px rgba(0,0,0,0.2); } .dev-panel-label { color: var(--accent); } .dev-persona-select { background: var(--cream); color: var(--charcoal); border: none; padding: 6px 10px; font-family: var(--mono); font-size: 11px; cursor: pointer; max-width: 280px; } .dev-action { background: transparent; color: var(--cream); border: 1px solid rgba(245, 242, 234, 0.3); padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .dev-action:hover { border-color: var(--cream); } /* ─── EMAIL GATE ─── */ /* .screen-email-gate inherits flex layout from .screen; no extra rules needed. */ .lead-form { display: flex; flex-direction: column; gap: 28px; max-width: 480px; margin-top: clamp(28px, 4vh, 48px); } .lead-field { display: flex; flex-direction: column; gap: 10px; } .lead-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal-muted); } .lead-form input { font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.4vw, 22px); color: var(--charcoal); background: transparent; border: none; border-bottom: 1px solid var(--border-strong); padding: 10px 0; outline: none; transition: border-color 0.2s ease; } .lead-form input:focus { border-color: var(--accent); } .lead-form .btn-primary { align-self: flex-start; margin-top: 12px; } .lead-error { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(170, 60, 40, 0.95); margin: -8px 0 0; } .lead-fineprint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal-muted); margin-top: 48px; } /* ─── THEME TOGGLE — icon-only sun/moon button, fixed top-right. Shared look for the Report page (components/ThemeToggle.tsx, a React component) and the Form page (vanilla JS + static markup in public/audit/index.html) — same classes, same CSS, two mount mechanisms since the two surfaces don't share a component layer. Toggles [data-theme] on between "light" (default) and "dark"; see the [data-theme="dark"] token block above. ─── */ .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 200; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--cream-elev); border: 1px solid var(--border-mid); border-radius: 50%; color: var(--charcoal); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .theme-toggle:hover { border-color: var(--accent); } /* Icon shows the mode a click switches TO — moon in light mode (click for dark), sun in dark mode (click for light). */ .theme-toggle-sun { display: none; } [data-theme="dark"] .theme-toggle-sun { display: block; } [data-theme="dark"] .theme-toggle-moon { display: none; }