/* ============================================================ Aria Audit Tool — overrides the default css path so fonts load ============================================================ */ @font-face { font-family: "Season Mix"; font-style: normal; font-weight: 300; font-display: swap; src: url("/audit/fonts/SeasonMix-Light.woff2") format("woff2"); } @font-face { font-family: "Season Mix"; font-style: normal; font-weight: 400; font-display: swap; src: url("/audit/fonts/SeasonMix-Regular.woff2") format("woff2"); } @font-face { font-family: "Season Mix"; font-style: normal; font-weight: 500; font-display: swap; src: url("/audit/fonts/SeasonMix-Medium.woff2") format("woff2"); } @font-face { font-family: "Season Mix"; font-style: normal; font-weight: 600; font-display: swap; src: url("/audit/fonts/SeasonMix-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Season Mix"; font-style: normal; font-weight: 700; font-display: swap; src: url("/audit/fonts/SeasonMix-Bold.woff2") format("woff2"); } @font-face { font-family: "Season Mix"; font-style: italic; font-weight: 400; font-display: swap; src: url("/audit/fonts/SeasonMix-RegularItalic.woff2") format("woff2"); } @font-face { font-family: "Season Mix"; font-style: italic; font-weight: 500; font-display: swap; src: url("/audit/fonts/SeasonMix-MediumItalic.woff2") format("woff2"); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* ============================================================ Status palette tokens — switchable via Tweaks. Roles: denial → severe / cost leakage (red role) in-progress → attention / in-flight (amber role) info → neutral informational accent (blue role) Defaults = "Tailwind" (the original loud palette). Other palettes override via [data-status-palette="..."] on . ============================================================ */ body { /* Tailwind defaults */ --status-denial-bg: #fef2f2; --status-denial-border: #fca5a5; --status-denial-label: #b91c1c; --status-denial-value: #991b1b; --status-denial-chip-bg: #b91c1c; --status-denial-chip-fg: #ffffff; --status-denial-chip-ring: rgba(185, 28, 28, 0.12); --status-progress-bg: #fffbeb; --status-progress-border: #fde68a; --status-progress-label: #92400e; --status-progress-value: #78350f; --status-progress-chip-bg: #f59e0b; --status-progress-chip-fg: #4a1d00; --status-info-bg: #f0f8fd; --status-info-border: rgba(132, 168, 230, 0.35); --status-info-label: #1e4b5e; --status-info-value: var(--aria-ink); --status-info-chip-bg: #fde68a; --status-info-chip-fg: #78350f; --status-narrative-stat: #ffb6a8; } /* — Clinical: dusty mauve / warm sand / periwinkle — most on-brand */ body[data-status-palette="clinical"] { --status-denial-bg: #F4ECEF; --status-denial-border: rgba(187, 167, 192, 0.55); --status-denial-label: #6B4D6F; --status-denial-value: #4D3052; --status-denial-chip-bg: #6B4D6F; --status-denial-chip-fg: #ffffff; --status-denial-chip-ring: rgba(107, 77, 111, 0.14); --status-progress-bg: #F4EFE2; --status-progress-border: rgba(212, 196, 168, 0.55); --status-progress-label: #6B5530; --status-progress-value: #4A3A1F; --status-progress-chip-bg: #D4C4A8; --status-progress-chip-fg: #4A3A1F; --status-info-bg: #ECF1F9; --status-info-border: rgba(132, 168, 230, 0.35); --status-info-label: #2B4575; --status-info-value: #1E4B5E; --status-info-chip-bg: #BFDBF1; --status-info-chip-fg: #2B4575; --status-narrative-stat: #E0C8D4; } /* — Warm: salmon / peach / sky — friendlier, still on-brand */ body[data-status-palette="warm"] { --status-denial-bg: #FBEEE9; --status-denial-border: rgba(217, 130, 110, 0.45); --status-denial-label: #8C3520; --status-denial-value: #6B2614; --status-denial-chip-bg: #C75A41; --status-denial-chip-fg: #ffffff; --status-denial-chip-ring: rgba(199, 90, 65, 0.14); --status-progress-bg: #FBF1E4; --status-progress-border: rgba(232, 185, 70, 0.42); --status-progress-label: #7A5418; --status-progress-value: #5A3D0E; --status-progress-chip-bg: #E8B946; --status-progress-chip-fg: #5A3D0E; --status-info-bg: #E8F1FB; --status-info-border: rgba(132, 168, 230, 0.45); --status-info-label: #1E4B5E; --status-info-value: #193033; --status-info-chip-bg: #BFDBF1; --status-info-chip-fg: #1E4B5E; --status-narrative-stat: #F1B5A4; } /* — Mono: ink + beige; status communicated by weight, not hue */ body[data-status-palette="mono"] { --status-denial-bg: #F1E9E4; --status-denial-border: rgba(25, 48, 51, 0.18); --status-denial-label: var(--aria-ink); --status-denial-value: var(--aria-ink); --status-denial-chip-bg: var(--aria-ink); --status-denial-chip-fg: #ffffff; --status-denial-chip-ring: rgba(25, 48, 51, 0.10); --status-progress-bg: #F3F2EC; --status-progress-border: rgba(25, 48, 51, 0.12); --status-progress-label: rgba(25, 48, 51, 0.72); --status-progress-value: var(--aria-ink); --status-progress-chip-bg: rgba(25, 48, 51, 0.55); --status-progress-chip-fg: #ffffff; --status-info-bg: #F9F8F3; --status-info-border: rgba(25, 48, 51, 0.08); --status-info-label: rgba(25, 48, 51, 0.50); --status-info-value: var(--aria-ink); --status-info-chip-bg: rgba(25, 48, 51, 0.10); --status-info-chip-fg: var(--aria-ink); --status-narrative-stat: #f5ede1; } /* ============================================================ Color-discipline overrides (data-status-discipline="restrained") Removes status color from elements that are decorative/hierarchy, not actually communicating status. Scoped so default = unchanged. ============================================================ */ body[data-status-discipline="restrained"] .metric--warn, body[data-status-discipline="restrained"] .metric--alarm { background: var(--aria-white); border-color: var(--stroke-soft); } body[data-status-discipline="restrained"] .metric--warn .metric-label, body[data-status-discipline="restrained"] .metric--alarm .metric-label { color: var(--fg-2); } body[data-status-discipline="restrained"] .metric--warn .metric-value, body[data-status-discipline="restrained"] .metric--alarm .metric-value { color: var(--aria-ink); } body[data-status-discipline="restrained"] .result-leakage-item { background: var(--aria-beige); border-color: var(--stroke-soft); } body[data-status-discipline="restrained"] .result-leakage-label { color: var(--fg-3); } body[data-status-discipline="restrained"] .result-leakage-value { color: var(--aria-ink); } body[data-status-discipline="restrained"] .alert-bottleneck-narrative .num { color: var(--aria-ink); } /* Match the "extra hours" stat to its sibling cost stat (both ink) */ body[data-status-discipline="restrained"] .alert-stat-num { color: var(--aria-ink); } /* ---- Desktop discipline ---- Mirrors the desktop layout's color strategy: - Invert the bottleneck card to dark ink + cream type (dramatic, not alarming) - Summary metric tiles go white/ink, BUT keep one inline alarm color on the cost number (#991b1b) — desktop's only allowed status red - Neutralize per-row leakage stats (priority chip carries severity) - Bottleneck narrative numbers + extra-hours stat → ink - Priority chips stay loud (desktop keeps them too) */ body[data-status-discipline="desktop"] .alert-bottleneck { /* Mist gradient instead of solid ink — keeps the card distinct without the slab-of-dark heaviness; consistent with screen 5's roi-hero. */ background: var(--aria-gradient-mist); border: 1px solid rgba(25, 48, 51, 0.08); color: var(--aria-ink); } body[data-status-discipline="desktop"] .alert-bottleneck-eyebrow { color: rgba(25, 48, 51, 0.62); } body[data-status-discipline="desktop"] .alert-bottleneck-title { color: var(--aria-ink); font-weight: 500; } body[data-status-discipline="desktop"] .alert-bottleneck-narrative { color: var(--fg-2); } body[data-status-discipline="desktop"] .alert-bottleneck-narrative .num { color: var(--aria-ink); font-weight: 500; } body[data-status-discipline="desktop"] .alert-stat { /* Glass-on-mist treatment so the inner stat tiles read as a layer above. */ background: rgba(255, 255, 255, 0.55); border-color: rgba(25, 48, 51, 0.06); } body[data-status-discipline="desktop"] .alert-stat-num, body[data-status-discipline="desktop"] .alert-stat--cost .alert-stat-num { color: var(--aria-ink); font-weight: 500; } body[data-status-discipline="desktop"] .alert-stat-label { color: var(--fg-2); } /* Summary tiles: white, ink — except cost gets a single dark-red number */ body[data-status-discipline="desktop"] .metric--warn, body[data-status-discipline="desktop"] .metric--alarm { background: var(--aria-white); border-color: var(--stroke-soft); } body[data-status-discipline="desktop"] .metric--warn .metric-label, body[data-status-discipline="desktop"] .metric--alarm .metric-label { color: var(--fg-2); } body[data-status-discipline="desktop"] .metric--warn .metric-value { color: var(--aria-ink); } body[data-status-discipline="desktop"] .metric--alarm .metric-value { color: #991B1B; } /* Per-row leakage stats: neutral; priority chip carries the severity */ body[data-status-discipline="desktop"] .result-leakage-item { background: var(--aria-beige); border-color: var(--stroke-soft); } body[data-status-discipline="desktop"] .result-leakage-label { color: var(--fg-3); } body[data-status-discipline="desktop"] .result-leakage-value { color: var(--aria-ink); } html, body { background: var(--aria-beige); color: var(--aria-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } body { /* Was display:flex+justify-center for the standalone mobile mockup; in the React shell we let body be block and let .aria-audit-shell fill width. The mobile .app keeps margin:0 auto to stay centered inside the shell. */ display: block; padding: 0; background: var(--aria-beige); } .aria-audit-shell { width: 100%; } .app { margin-left: auto; margin-right: auto; width: 100%; max-width: 480px; min-height: 100vh; background: var(--aria-beige); display: flex; flex-direction: column; position: relative; } @media (min-width: 481px) { .app { box-shadow: var(--shadow-md); background: var(--aria-beige-soft); } } /* ===== Top brand bar ===== */ .top-bar { position: sticky; top: 0; z-index: 10; background: var(--aria-beige); padding: 18px 24px 14px; border-bottom: 1px solid var(--stroke-soft); } @media (min-width: 481px) { .top-bar { background: var(--aria-beige-soft); } } .top-bar-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .logo { height: 22px; width: auto; } .step-counter { display: inline-flex; align-items: center; gap: 10px; } .step-counter-text { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; } .step-counter-text #step-num { color: var(--aria-ink); } /* Back / forward step arrows that flank the counter. */ .step-nav-btn { appearance: none; border: 1px solid rgba(25,48,51,0.18); background: transparent; color: var(--fg-2); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .step-nav-btn:hover { background: rgba(25,48,51,0.06); color: var(--fg-1); border-color: rgba(25,48,51,0.35); } .step-nav-btn svg { width: 14px; height: 14px; stroke: currentColor; } .step-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; } .progress-track { height: 3px; background: rgba(25,48,51,0.08); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: var(--aria-gradient-primary); border-radius: 999px; transition: width 380ms cubic-bezier(.2,.8,.2,1); } /* ===== Screen container ===== */ .screen { padding: 32px 24px 48px; flex: 1; display: none; animation: fadeUp 380ms cubic-bezier(.2,.8,.2,1); } .screen.active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ===== Typography ===== */ .eyebrow-label { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; } h1.headline { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.05; letter-spacing: 0.005em; color: var(--aria-ink); margin-bottom: 12px; text-wrap: pretty; } h1.headline em { font-style: italic; font-weight: 400; color: var(--aria-primary-lo); } .subtext { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--fg-2); margin-bottom: 28px; letter-spacing: -0.005em; } /* ===== Forms ===== */ .field { margin-bottom: 16px; } .field label { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--aria-ink); margin-bottom: 6px; letter-spacing: -0.005em; } .field input[type="text"], .field input[type="email"], .field input[type="number"] { width: 100%; padding: 14px 16px; font-size: 16px; font-family: var(--font-body); color: var(--aria-ink); background: var(--aria-white); border: 1px solid var(--stroke-mid); border-radius: 14px; transition: border-color 160ms, box-shadow 160ms; letter-spacing: -0.005em; } /* Hide native number spinners so it reads like a plain text box */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Match $ prefix to the input's font/size/weight */ .field-prefix .prefix { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--aria-ink); letter-spacing: -0.005em; } .field input:focus { outline: none; border-color: var(--aria-primary); box-shadow: 0 0 0 4px rgba(132,168,230,0.18); } .field-prefix { position: relative; } .field-prefix .prefix { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--fg-3); font-size: 16px; font-weight: 500; pointer-events: none; } .field-prefix input { padding-left: 30px; } /* ===== Buttons (Aria pill) ===== */ .btn { display: inline-flex; width: 100%; align-items: center; justify-content: center; height: 56px; padding: 0 32px; font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--aria-ink); background: var(--aria-gradient-primary); border: none; border-radius: 999px; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; margin-top: 8px; } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(25,48,51,0.12); } .btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px rgba(25,48,51,0.08); } .btn:disabled { background: rgba(25,48,51,0.08); color: var(--fg-3); cursor: not-allowed; } .btn--secondary { background: var(--aria-white); color: var(--aria-ink); border: 1px solid var(--stroke-soft); box-shadow: var(--shadow-xs); } .btn--secondary:hover:not(:disabled) { background: var(--aria-beige); } .btn--ink { background: var(--aria-ink); color: var(--aria-white); } .btn--white { background: var(--aria-white); color: var(--aria-ink); box-shadow: inset 0 0 0 1px rgba(25,48,51,0.08); } .btn-link { background: none; color: var(--fg-3); border: none; font-family: var(--font-body); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 12px; width: 100%; text-align: center; margin-top: 16px; } .btn-link:hover { color: var(--aria-ink); } .footnote { text-align: left; font-family: var(--font-body); font-size: 13px; color: var(--fg-3); margin-top: 18px; line-height: 1.55; font-style: italic; } /* Backlink to the main marketing site. The funnel is a standalone tool with no site nav, so this is the visitor's escape hatch back to heyaria.com. Used on the welcome screen and at the end of the audit; the dark left rail has its own variant (.audit-rail-back) in the desktop block below. */ .audit-home-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--fg-3); text-decoration: none; transition: color 0.15s; } .audit-home-link:hover { color: var(--aria-rust); } /* ===== Tappable cards (Screen 2) ===== */ .workflow-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .workflow-phase-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--fg-3); margin-top: 18px; margin-bottom: 2px; padding-left: 4px; } .workflow-phase-label:first-child { margin-top: 0; } .workflow-card { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 16px; padding: 13px 16px; cursor: pointer; transition: all 180ms cubic-bezier(.2,.8,.2,1); display: flex; /* Center the checkbox + content vertically so cards in the same grid row (which equalize to the tallest) don't show awkward whitespace below shorter descriptions. */ align-items: center; gap: 12px; user-select: none; box-shadow: var(--shadow-xs); } .workflow-card:hover { border-color: var(--stroke-mid); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .workflow-card.selected { border-color: var(--aria-primary); background: linear-gradient(180deg, #F0F8FD 0%, #FFFFFF 100%); box-shadow: 0 0 0 1px var(--aria-primary), var(--shadow-sm); } /* Sized to match the .optin-check in the modal — one checkbox style across the audit. */ .workflow-checkbox { width: 20px; height: 20px; border: 1.5px solid var(--stroke-mid); border-radius: 6px; flex-shrink: 0; background: var(--aria-white); transition: all 160ms; display: flex; align-items: center; justify-content: center; } .workflow-card.selected .workflow-checkbox { background: var(--aria-ink); border-color: var(--aria-ink); } .workflow-checkbox svg { width: 12px; height: 12px; color: white; opacity: 0; transition: opacity 120ms; } .workflow-card.selected .workflow-checkbox svg { opacity: 1; } .workflow-text { flex: 1; } .workflow-title { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0.005em; color: var(--aria-ink); margin-bottom: 3px; line-height: 1.25; } .workflow-desc { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.4; letter-spacing: -0.005em; } /* ===== Payment model toggle (Screen 2) ===== */ .payment-model-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; } .payment-model-option { appearance: none; background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 16px; padding: 16px 18px; text-align: left; cursor: pointer; font-family: inherit; transition: all 180ms cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 4px; } .payment-model-option:hover { border-color: var(--stroke-mid); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .payment-model-option.active { border-color: var(--aria-primary); background: linear-gradient(180deg, #F0F8FD 0%, #FFFFFF 100%); box-shadow: 0 0 0 1px var(--aria-primary), var(--shadow-sm); } .payment-model-title { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0.005em; color: var(--aria-ink); } .payment-model-desc { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.4; letter-spacing: -0.005em; } /* The workflow grid is hidden until a payment model is picked. */ .workflow-section { display: none; } .workflow-section.visible { display: block; animation: workflowSectionIn 280ms cubic-bezier(.2,.8,.2,1); } .workflow-section-intro { margin-bottom: 16px; } @keyframes workflowSectionIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 520px) { .payment-model-group { grid-template-columns: 1fr; } } /* ===== Scoring screen ===== */ .global-input { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 18px 18px 18px; margin-bottom: 24px; /* Match .score-card so the rate card reads as one clean card, not a card stacked on a faint ghost card (the old inner-glass inset). */ box-shadow: var(--shadow-xs); } .global-input-hint { font-weight: 400; color: var(--fg-3); font-style: italic; } /* Card-header treatment — matches .score-card-title and .readiness-q so every per-card prompt across the audit reads as the same component. */ .global-input label { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: 0.005em; line-height: 1.25; color: var(--aria-ink); margin-bottom: 14px; display: block; } .global-input .field-prefix { max-width: 220px; } .global-input .field-prefix input { background: transparent; border: none; box-shadow: none; border-radius: 0; font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--aria-ink); height: 36px; padding: 0 0 0 18px; cursor: text; caret-color: var(--aria-ink); transition: color 160ms ease; } /* (Removed the fake pulsing-caret ::after — it fought the native cursor and made the rate field feel like typing needed two presses.) */ .global-input .field-prefix input:hover { background: transparent; } .global-input .field-prefix input:focus { outline: none; background: transparent; box-shadow: none; } .global-input .field-prefix .prefix { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0; left: 0; top: 50%; transform: translateY(-50%); color: var(--aria-ink); } /* ===== Card deck (Screen 4) ===== */ .deck-progress { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; padding-left: 4px; display: flex; gap: 6px; align-items: baseline; } .deck-progress-divider { font-weight: 400; opacity: 0.55; font-size: 10px; } .deck { position: relative; margin-bottom: 24px; } /* The faux "stack of cards" (::before/::after layers behind the active card) was removed — it read as a rendering bug ("another card beneath it") in the Ariel/Nicky review. The deck shows one clean card at a time now. (.deck--hide-after / --hide-before classes from the JS are now no-ops.) */ /* Animation wrapper. The visible card surface is .global-input or .score-card inside; .deck-card itself is a transparent transform host. */ .deck-card { position: relative; z-index: 2; transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease; } /* Outgoing — pushed off to the right with a small rotate to feel like a card being flicked off a stack. */ .deck-card--exiting { transform: translateX(118%) rotate(2.5deg); opacity: 0; } .deck-card--entering { animation: deck-card-in 360ms cubic-bezier(.2,.8,.2,1); } @keyframes deck-card-in { from { transform: translateY(18px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* The rate card uses .global-input internally — strip its bottom margin so the deck-card actions don't have a visual gap. */ .deck-card--rate .global-input { margin-bottom: 0; } /* Workflow cards reuse .score-card internals; trim its bottom margin too. */ .deck-card--workflow .score-card { margin-bottom: 0; } .deck-card-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 18px; } /* Auto-width Next pill (was flex:1 full-bleed, which read as "way too big" on the sparse rate card). The back link pushes to the far left. */ .deck-card-actions .btn { flex: 0 0 auto; min-width: 180px; margin: 0; } .deck-card-actions .deck-back { margin-right: auto; } .deck-back { appearance: none; background: none; border: none; color: var(--fg-2); font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; padding: 10px 14px; border-radius: 10px; transition: color 160ms ease, background 160ms ease; } .deck-back:hover { color: var(--aria-ink); background: rgba(25, 48, 51, 0.04); } .score-card { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 20px; margin-bottom: 12px; box-shadow: var(--shadow-xs); } .score-card-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: 0.005em; color: var(--aria-ink); margin-bottom: 18px; line-height: 1.25; } .score-question { margin-bottom: 18px; } .score-question:last-child { margin-bottom: 0; } .score-question-label { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); margin-bottom: 12px; font-weight: 500; } /* Manual heading — title above the full-width slider */ .score-manual { padding-bottom: 4px; } .manual-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 14px; } .manual-heading-label { font-family: var(--font-body); font-size: 13px; color: var(--fg-3); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 6px; } .manual-heading .info-tip { align-self: auto; } /* Combined title + description box that lives ABOVE the slider, so the current level name and its explainer move as one unit when the user drags. Replaces the old split between manual-heading-value (above) and slider-description (below). */ .manual-current { background: var(--aria-beige); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; transition: background 200ms ease; } .manual-current-title { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.005em; color: var(--aria-ink); line-height: 1.25; margin-bottom: 4px; transition: color 160ms ease; } .manual-current-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--fg-2); letter-spacing: -0.005em; } .manual-slider-wrap { width: 100%; } .manual-slider-wrap input[type="range"] { width: 100%; } /* Slider */ .slider-wrap { display: flex; align-items: center; gap: 14px; } .slider-wrap input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: rgba(25,48,51,0.08); border-radius: 999px; outline: none; } .slider-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--aria-ink); border-radius: 50%; cursor: pointer; border: 3px solid var(--aria-white); box-shadow: 0 0 0 1px var(--aria-ink), 0 2px 6px rgba(25,48,51,0.15); } .slider-wrap input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--aria-ink); border-radius: 50%; cursor: pointer; border: 3px solid var(--aria-white); box-shadow: 0 0 0 1px var(--aria-ink); } .slider-value { min-width: 100px; text-align: right; font-family: var(--font-display); font-style: italic; font-size: 14px; font-weight: 400; color: var(--aria-primary-lo); letter-spacing: 0.005em; } .slider-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-3); margin-top: 7px; padding: 0 2px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } .slider-description { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--fg-2); background: var(--aria-beige); border-radius: 10px; padding: 10px 12px; margin-top: 10px; } /* Info tooltip (used on slider question label) */ .info-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; color: var(--fg-3); cursor: help; position: relative; vertical-align: -3px; outline: none; } .info-tip svg { width: 16px; height: 16px; display: block; } .info-tip:hover, .info-tip:focus { color: var(--aria-ink); } .info-tip-content { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 280px; max-width: calc(100vw - 32px); background: var(--aria-ink); color: rgba(245, 237, 225, 0.92); font-family: var(--font-body); font-size: 12px; line-height: 1.55; text-transform: none; letter-spacing: 0; font-weight: 400; padding: 12px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(25, 48, 51, 0.18); opacity: 0; visibility: hidden; transition: opacity 140ms ease, visibility 140ms ease; z-index: 10; pointer-events: none; text-align: left; } .info-tip-content strong { color: var(--aria-white); font-weight: 600; } .info-tip-content::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--aria-ink); } .info-tip:hover .info-tip-content, .info-tip:focus .info-tip-content { opacity: 1; visibility: visible; } /* Segmented */ .segmented { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(25,48,51,0.05); border-radius: 999px; padding: 4px; } .segmented button { padding: 9px 8px; font-family: var(--font-display); font-size: 14px; font-weight: 400; letter-spacing: 0.005em; background: transparent; border: none; border-radius: 999px; cursor: pointer; color: var(--fg-2); transition: all 180ms; } .segmented button.active { background: var(--aria-white); color: var(--aria-ink); box-shadow: var(--shadow-xs); } /* Visits-per-week input */ .visits-input-wrap { display: flex; align-items: center; gap: 0; border: 1px solid var(--stroke-soft); border-radius: 999px; padding: 4px 4px 4px 16px; background: var(--aria-white); transition: border-color 160ms; } .visits-input-wrap:focus-within { border-color: var(--stroke-mid); } .visits-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--aria-ink); padding: 8px 0; width: 0; /* let flex size it */ min-width: 0; -moz-appearance: textfield; } .visits-input::-webkit-outer-spin-button, .visits-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .visits-suffix { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); padding: 8px 14px; flex-shrink: 0; } .benchmark-hint { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); margin-top: 8px; padding-left: 2px; letter-spacing: 0.01em; line-height: 1.5; } .benchmark-hint strong { color: var(--aria-ink); font-weight: 600; } .benchmark-src { font-style: italic; opacity: 0.85; } /* ===== Results screen ===== */ .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .metric { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; padding: 16px 16px 18px; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; /* Force the value to the bottom regardless of label line count, so paired metrics align. */ min-height: 96px; } .metric .metric-value { margin-top: auto; } .metric.full { grid-column: 1 / -1; } /* ===== Top bottleneck alert (narrative, urgent) ===== */ .alert-bottleneck { position: relative; background: linear-gradient(180deg, #FAF6F2 0%, #F1E9E4 100%); border: 1px solid rgba(187, 167, 192, 0.55); border-radius: 14px; padding: 18px 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 0 rgba(25, 48, 51, 0.04); } .alert-bottleneck-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .alert-bottleneck-icon { width: 18px; height: 18px; color: var(--aria-mauve); flex: 0 0 auto; } .alert-bottleneck-eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--aria-ink); opacity: 0.72; } .alert-bottleneck-title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 500; color: var(--aria-ink); margin: 0 0 12px; letter-spacing: -0.005em; } .alert-bottleneck-narrative { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--fg-2); margin: 0 0 14px; } .alert-bottleneck-narrative .num { font-weight: 700; color: #9a2a06; } .alert-bottleneck-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .alert-stat { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(187, 167, 192, 0.55); border-radius: 10px; padding: 10px 12px; } .alert-stat-num { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1; color: var(--aria-ink); margin-bottom: 6px; } /* The cost stat keeps the warm-denial token so it reads as the most-urgent number on the card. */ .alert-stat--cost .alert-stat-num { color: var(--status-denial-value); } .alert-stat-label { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--fg-2); } .alert-bottleneck-why { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; padding: 12px 14px; background: var(--aria-beige); border-radius: 8px; } .alert-bottleneck-why strong { color: var(--aria-ink); font-weight: 600; } /* ===== Status palette tokens — switchable via Tweaks ===== Defaults are set on below; each named palette overrides them. Roles: 'denial' → red-ish, the most severe (cost leakage) 'in-progress' → amber-ish, attention/in-flight 'info' → neutral informational accent */ .metric--warn { background: var(--status-progress-bg); border-color: var(--status-progress-border); } .metric--warn .metric-label { color: var(--status-progress-label); } .metric--warn .metric-value { color: var(--status-progress-value); } /* Critical-cost variant — used for annual leak/cost numbers */ .metric--alarm { background: var(--status-denial-bg); border-color: var(--status-denial-border); } .metric--alarm .metric-label { color: var(--status-denial-label); } .metric--alarm .metric-value { color: var(--status-denial-value); } /* Inline alarm helpers reused across screens */ .info-value.alarm { color: var(--status-denial-value); font-weight: 700; } .ap-number--alarm { background: linear-gradient(180deg, #FAF6F2 0%, #F1E9E4 100%) !important; border: 1px solid rgba(187, 167, 192, 0.55) !important; } .ap-number--alarm .ap-num-label { color: var(--aria-ink); opacity: 0.72; } .ap-number--alarm .ap-num-value { color: var(--aria-ink); } .metric.primary { background: var(--aria-ink); border-color: transparent; color: var(--aria-cream, #f5ede1); position: relative; overflow: hidden; padding: 22px 24px 24px; box-shadow: 0 8px 24px -8px rgba(15, 42, 48, 0.35), inset 0 1px 0 rgba(255,255,255,0.06); } .metric.primary .metric-label { color: rgba(245, 237, 225, 0.55); position: relative; z-index: 1; } .metric.primary .metric-value { color: var(--aria-cream, #f5ede1); position: relative; z-index: 1; } .metric-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; } .metric.primary .metric-label { color: rgba(245, 237, 225, 0.55); } .metric-value { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--aria-ink); line-height: 1.0; letter-spacing: 0.005em; } .metric-value.sm { font-size: 22px; line-height: 1.2; margin-top: 2px; letter-spacing: 0.005em; } /* Results list */ .results-list { margin-top: 28px; margin-bottom: 28px; } .results-heading { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; } .result-row { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; padding: 18px; margin-bottom: 10px; box-shadow: var(--shadow-xs); } .result-empty { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-xs); color: var(--fg-2); line-height: 1.55; } .result-empty p { margin: 0 0 12px; } .result-empty p:last-child { margin-bottom: 0; } .result-row-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; } .result-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: 0.005em; color: var(--aria-ink); line-height: 1.25; flex: 1; } .priority-badge { flex-shrink: 0; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .priority-1 { background: var(--status-denial-chip-bg); color: var(--status-denial-chip-fg); box-shadow: 0 0 0 3px var(--status-denial-chip-ring); } .priority-2 { background: var(--status-progress-chip-bg); color: var(--status-progress-chip-fg); } .priority-3 { background: var(--status-info-chip-bg); color: var(--status-info-chip-fg); } .result-leakage { display: flex; gap: 8px; margin-top: 12px; margin-bottom: 8px; } .result-leakage-item { flex: 1; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .result-leakage-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #9a3412; } .result-leakage-value { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: #7c2d12; letter-spacing: -0.01em; } .result-bench { font-family: var(--font-body); font-size: 15px; color: var(--fg-2); line-height: 1.55; padding-top: 12px; border-top: 1px solid var(--stroke-soft); } .result-bench .label { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 4px; } .result-coverage { margin-top: 12px; padding: 12px 14px; border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; } .coverage-aria { background: rgba(132, 168, 230, 0.12); border: 1px solid rgba(132, 168, 230, 0.35); } .coverage-tweak { background: rgba(245, 237, 225, 0.55); border: 1px solid rgba(212, 196, 168, 0.55); } .coverage-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1; } .coverage-aria .coverage-icon { background: var(--aria-periwinkle); color: var(--aria-white); } .coverage-tweak .coverage-icon { background: #d4c4a8; color: var(--aria-ink); } .coverage-text { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--aria-ink); flex: 1; } .coverage-text strong { font-weight: 600; } .coverage-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin-bottom: 4px; } .coverage-tip { font-size: 15px; line-height: 1.55; color: var(--aria-ink); } .result-source { font-family: var(--font-body); font-size: 12.5px; color: var(--fg-3); margin-top: 8px; line-height: 1.5; font-style: italic; letter-spacing: 0.005em; } /* Callout */ .callout { background: var(--aria-ink); color: var(--aria-white); border-radius: 24px; padding: 28px 24px; margin-top: 28px; position: relative; overflow: hidden; } .callout::before { content: ""; position: absolute; inset: 0; background-image: url("/audit/aria-bg-marble.png"); background-size: cover; background-position: center; opacity: 0.08; pointer-events: none; } .callout > * { position: relative; z-index: 1; } .callout-stat { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.005em; margin-bottom: 16px; color: var(--aria-white); } .callout-sub { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); margin-bottom: 22px; } .callout .btn { background: var(--aria-white); color: var(--aria-ink); margin-top: 0; } .start-over { text-align: center; margin-top: 28px; } .start-over a { color: var(--fg-3); font-family: var(--font-body); font-size: 13px; text-decoration: underline; cursor: pointer; } .start-over a:hover { color: var(--aria-ink); } .error-msg { color: #C2410C; font-family: var(--font-body); font-size: 13px; margin-top: 10px; display: none; } .error-msg.show { display: block; } /* Hero accent — Sky gradient panel atop screen 1 */ .hero-glyph { width: 64px; height: 64px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .hero-glyph img, .hero-glyph svg { width: 100%; height: 100%; object-fit: contain; } .hero-glyph--lg { width: 76px; height: 76px; } .hero-glyph--lg svg { stroke-width: 2; } /* ===== Results actions row (extra CTAs below primary book button) ===== */ .results-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } /* On the action-plan screen (light bg), stack vertically and theme light */ #screen-8 .results-actions { grid-template-columns: 1fr; } .btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; cursor: pointer; transition: all 180ms; line-height: 1.2; text-align: center; } .btn-quiet:hover { background: rgba(255,255,255,0.14); color: var(--aria-white); } .btn-quiet svg { width: 14px; height: 14px; flex-shrink: 0; } /* Override .btn-quiet on light backgrounds (action plan screen) */ #screen-8 .btn-quiet, .roadmap-actions .btn-quiet { color: var(--aria-ink) !important; background: var(--aria-white) !important; border: 1px solid var(--stroke-mid) !important; font-weight: 600 !important; box-shadow: var(--shadow-xs); } #screen-8 .btn-quiet:hover, .roadmap-actions .btn-quiet:hover { background: var(--aria-ink) !important; border-color: var(--aria-ink) !important; color: var(--aria-white) !important; } #screen-8 .btn-quiet svg, .roadmap-actions .btn-quiet svg { width: 16px; height: 16px; } /* ===== Back link (used on roadmap + share screens) ===== */ .back-link { display: inline-flex; align-items: center; gap: 6px; background: var(--aria-white); border: 1px solid var(--stroke-mid); border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--aria-ink); padding: 8px 14px 8px 10px; margin-bottom: 20px; letter-spacing: -0.005em; box-shadow: var(--shadow-xs); transition: background 0.15s, border-color 0.15s, color 0.15s; } .back-link:hover { background: var(--aria-ink); border-color: var(--aria-ink); color: var(--aria-white); } .back-link svg { width: 16px; height: 16px; } /* ===== Thank-you info card ===== */ .info-card { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; padding: 6px 18px; margin-bottom: 24px; box-shadow: var(--shadow-xs); } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--stroke-soft); gap: 12px; } .info-row:last-child { border-bottom: none; } .info-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); flex-shrink: 0; } .info-value { font-family: var(--font-display); font-size: 15px; color: var(--aria-ink); text-align: right; letter-spacing: 0.005em; line-height: 1.3; } .footnote-block { font-family: var(--font-body); font-size: 14px; color: var(--fg-2); line-height: 1.55; margin-bottom: 16px; padding: 14px 16px; background: rgba(132,168,230,0.08); border-left: 2px solid var(--aria-primary); border-radius: 0 12px 12px 0; } .footnote-block em { font-style: italic; font-family: var(--font-display); color: var(--aria-ink); } /* ===== Roadmap ===== */ .roadmap-step { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 22px; margin-bottom: 12px; box-shadow: var(--shadow-xs); position: relative; } .roadmap-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .roadmap-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--aria-gradient-sky); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; color: var(--aria-ink); box-shadow: var(--shadow-inner-glass); } .roadmap-name { font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: 0.005em; color: var(--aria-ink); line-height: 1.25; margin-bottom: 3px; } .roadmap-window { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aria-primary-lo); } .roadmap-section { border-top: 1px solid var(--stroke-soft); padding-top: 14px; margin-top: 14px; } .roadmap-section-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; } .roadmap-actions { display: flex; justify-content: center; margin: 12px 0 16px; } .roadmap-actions .btn-quiet { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.5); } .roadmap-actions .btn-quiet svg { width: 16px; height: 16px; } .roadmap-list { list-style: none; padding: 0; margin: 0; } .roadmap-list li { font-family: var(--font-body); font-size: 14px; color: var(--fg-2); line-height: 1.5; padding: 4px 0 4px 18px; position: relative; } .roadmap-list li::before { content: "•"; position: absolute; left: 0; color: var(--aria-primary-lo); } .roadmap-impact { display: flex; gap: 18px; margin-top: 12px; padding: 12px 14px; background: var(--aria-beige); border-radius: 12px; } .roadmap-impact div { flex: 1; } .roadmap-impact-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 3px; } .roadmap-impact-value { font-family: var(--font-display); font-size: 17px; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.2; } /* ===== Roadmap priority (screen 10 — pilot detail per priority) ===== */ .roadmap-priority { margin: 28px 0 36px; padding-bottom: 32px; border-bottom: 1px solid var(--stroke-soft); } .roadmap-priority:last-child { border-bottom: none; padding-bottom: 0; } .roadmap-priority-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; } .roadmap-priority-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--aria-ink); color: var(--aria-white); font-family: var(--font-display); font-size: 17px; display: flex; align-items: center; justify-content: center; line-height: 1; } .roadmap-priority-meta { flex: 1; min-width: 0; } .roadmap-priority-window { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--aria-primary-lo); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .roadmap-priority-name { font-family: var(--font-display); font-size: 24px; color: var(--aria-ink); line-height: 1.2; margin: 0 0 8px; } .roadmap-priority-stats { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-body); font-size: 12.5px; color: var(--fg-2); } .roadmap-priority-stats strong { color: var(--aria-ink); font-weight: 600; } .roadmap-priority-body .pilot-option-expand-inner { padding: 0; border-top: none; } /* ===== Action plan → detailed roadmap handoff link ===== */ .ap-roadmap-link { display: flex; align-items: center; gap: 18px; width: 100%; margin: 22px 0 28px; padding: 18px 20px; background: rgba(25, 48, 51, 0.025); border: 1px solid var(--stroke-soft); border-radius: 14px; text-align: left; cursor: pointer; font-family: inherit; color: var(--aria-ink); transition: background 160ms ease, border-color 160ms ease; } .ap-roadmap-link:hover { background: rgba(25, 48, 51, 0.05); border-color: var(--stroke-mid); } .ap-roadmap-link-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ap-roadmap-link-body .ap-section-label { margin: 0; } .ap-roadmap-link-sub { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.5; } .ap-roadmap-link-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--aria-ink); } .ap-roadmap-link-cta svg { width: 14px; height: 14px; } .screen.printing .ap-roadmap-link { display: none !important; } .callout--soft { background: var(--aria-gradient-mist); color: var(--aria-ink); margin-top: 24px; } .callout--soft::before { display: none; } .callout--soft .callout-stat { color: var(--aria-ink); font-size: 19px; } .callout--soft .callout-stat--sm { font-size: 18px; } .callout--soft .callout-sub { color: var(--fg-2); } /* ===== Share preview card ===== */ .share-preview { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .share-preview::before { content: ""; position: absolute; inset: 0; background: var(--aria-gradient-glass); pointer-events: none; } .share-preview > * { position: relative; z-index: 1; } .share-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .share-preview-head .logo { height: 18px; } .share-preview-tag { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); } .share-preview-title { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--aria-ink); margin-bottom: 14px; letter-spacing: 0.005em; } .share-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--stroke-soft); margin-bottom: 12px; } .share-preview-grid > div { min-width: 0; } .share-preview-grid .share-preview-label { min-height: 30px; display: flex; align-items: flex-end; } .share-preview-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; } .share-preview-value { font-family: var(--font-display); font-size: 24px; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.0; } .share-preview-value--sm { font-size: 15px; line-height: 1.3; } .share-preview-value.alarm { color: var(--status-denial-value); } textarea { width: 100%; padding: 14px 16px; font-size: 15px; font-family: var(--font-body); color: var(--aria-ink); background: var(--aria-white); border: 1px solid var(--stroke-mid); border-radius: 14px; transition: border-color 160ms, box-shadow 160ms; resize: vertical; line-height: 1.5; } textarea:focus { outline: none; border-color: var(--aria-primary); box-shadow: 0 0 0 4px rgba(132,168,230,0.18); } /* ============================================================ Opt-in modal ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(25, 48, 51, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 20px; opacity: 0; transition: opacity 220ms ease; } .modal-backdrop.open { display: flex; opacity: 1; } .modal { background: var(--aria-white); border-radius: 22px; padding: 26px 24px 22px; max-width: 380px; width: 100%; box-shadow: 0 24px 64px rgba(25, 48, 51, 0.22), 0 1px 0 rgba(255,255,255,0.6) inset; transform: translateY(12px) scale(0.98); opacity: 0; transition: transform 280ms cubic-bezier(.2,.7,.3,1), opacity 220ms ease; } .modal-backdrop.open .modal { transform: translateY(0) scale(1); opacity: 1; } .modal-glyph { width: 48px; height: 48px; border-radius: 14px; background: var(--aria-beige); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .modal-glyph svg { width: 22px; height: 22px; } .modal-title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--aria-ink); letter-spacing: 0.005em; margin-bottom: 12px; } .modal-title em { font-style: italic; } .modal-body { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--fg-2); margin-bottom: 12px; } .modal-body strong { color: var(--aria-ink); font-weight: 500; } .optin-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--stroke-soft); border-radius: 14px; cursor: pointer; margin: 8px 0 18px; transition: all 160ms; background: var(--aria-beige-soft); } .optin-row:hover { border-color: var(--stroke-mid); } .optin-row input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .optin-check { flex-shrink: 0; width: 20px; height: 20px; border: 1.5px solid var(--stroke-mid); border-radius: 6px; background: var(--aria-white); display: flex; align-items: center; justify-content: center; color: var(--aria-white); transition: all 160ms; margin-top: 1px; } .optin-check svg { width: 12px; height: 12px; opacity: 0; transition: opacity 120ms; } .optin-row input:checked ~ .optin-check { background: var(--aria-ink); border-color: var(--aria-ink); } .optin-row input:checked ~ .optin-check svg { opacity: 1; } .optin-label { flex: 1; font-family: var(--font-body); font-size: 13.5px; color: var(--aria-ink); line-height: 1.45; font-weight: 500; } .modal-actions { display: flex; flex-direction: column; gap: 4px; } .modal-actions .btn { margin-bottom: 0; } .modal-fine { margin-top: 14px; font-family: var(--font-body); font-size: 11px; color: var(--fg-3); line-height: 1.5; text-align: center; } .modal-fine a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ Screen 3 — Readiness check ============================================================ */ .readiness-card { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; padding: 18px 20px; margin-bottom: 12px; box-shadow: var(--shadow-xs); } .readiness-q { font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--aria-ink); letter-spacing: 0.005em; margin-bottom: 14px; } .readiness-options { display: flex; gap: 6px; flex-wrap: wrap; } /* Slider variant — used by the appointments-per-week question. Reuses the audit's range-input look so it reads as part of the same family. */ .readiness-slider { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; } .readiness-slider-value { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.2; } .readiness-slider input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; background: rgba(25,48,51,0.08); border-radius: 999px; outline: none; } .readiness-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--aria-ink); border-radius: 50%; cursor: pointer; border: 3px solid var(--aria-white); box-shadow: 0 0 0 1px var(--aria-ink), 0 2px 6px rgba(25,48,51,0.15); } .readiness-slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--aria-ink); border-radius: 50%; cursor: pointer; border: 3px solid var(--aria-white); box-shadow: 0 0 0 1px var(--aria-ink); } .readiness-slider-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-3); padding: 0 2px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } .readiness-options button { flex: 1 1 calc(50% - 3px); min-width: 0; padding: 14px 16px; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--aria-ink); background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 999px; cursor: pointer; transition: background 160ms, border-color 160ms, box-shadow 200ms, transform 160ms; line-height: 1.25; text-align: center; } .readiness-options button:hover { border-color: var(--stroke-mid); background: var(--aria-beige-soft); } /* Selected state matches the workflow + payment-model cards: solid primary border + a 1px ring, so the choice is unmistakable (the old faint periwinkle was hard to see and inconsistent with the rest of the funnel). */ .readiness-options button.active { background: linear-gradient(180deg, #F0F8FD 0%, #FFFFFF 100%); color: var(--aria-ink); border-color: var(--aria-primary); box-shadow: 0 0 0 1px var(--aria-primary), var(--shadow-sm); } .readiness-options button.active:hover { background: linear-gradient(180deg, #F0F8FD 0%, #FFFFFF 100%); border-color: var(--aria-primary); } .readiness-followup { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 280ms cubic-bezier(.2,.7,.3,1), opacity 200ms ease, margin-top 280ms; margin-top: 0; } .readiness-followup.open { max-height: 200px; opacity: 1; margin-top: 14px; /* Once open, allow the focus ring on the input to render past the edges without being clipped by the slide-down animation container. */ overflow: visible; } .readiness-followup-label { display: block; font-family: var(--font-body); font-size: 12px; color: var(--fg-2); margin-bottom: 6px; font-weight: 500; } /* Match the page-1 .field input styling so every text input in the audit looks the same — same padding, radius, border, focus ring. */ .readiness-followup-input { width: 100%; padding: 14px 16px; font-size: 16px; font-family: var(--font-body); color: var(--aria-ink); background: var(--aria-white); border: 1px solid var(--stroke-mid); border-radius: 14px; outline: none; transition: border-color 160ms, box-shadow 160ms; letter-spacing: -0.005em; } .readiness-followup-input:focus { border-color: var(--aria-primary); box-shadow: 0 0 0 4px rgba(132,168,230,0.18); } /* ============================================================ Screen 5 — ROI deep-dive ============================================================ */ .roi-card { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow-xs); } .roi-hero { /* Brand "mist" gradient from the design system — calm, on-brand, reads as informational rather than alarming. */ background: var(--aria-gradient-mist); border: 1px solid rgba(25, 48, 51, 0.08); border-radius: 16px; padding: 22px 24px 24px; margin-bottom: 16px; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(25, 48, 51, 0.04); } /* Soft sky highlight in the corner — picks up the brand's signature glass mood. */ .roi-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 260px; height: 260px; background: radial-gradient(circle at top right, rgba(214, 232, 247, 0.55), transparent 65%); pointer-events: none; } .roi-hero .eyebrow-label { color: var(--aria-ink); opacity: 0.72; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; } .roi-hero .eyebrow-label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--aria-mauve); box-shadow: 0 0 0 3px rgba(187, 167, 192, 0.32); } .roi-hero-title { font-family: var(--font-display); font-size: 17px; color: var(--aria-ink); letter-spacing: -0.005em; margin-top: 10px; line-height: 1.55; position: relative; z-index: 1; font-weight: 500; } .roi-hero-title .name { font-weight: 700; color: var(--aria-ink); } /* Periwinkle marker underline matches the new mist gradient + the brand CTA color. */ .roi-hero-title .num { font-weight: 700; color: var(--aria-ink); white-space: nowrap; background: linear-gradient(180deg, transparent 62%, rgba(132, 168, 230, 0.42) 62%); padding: 0 3px; } .roi-card-head { margin-bottom: 16px; } .roi-card-title { font-family: var(--font-display); font-size: 22px; color: var(--aria-ink); letter-spacing: 0.005em; margin-top: 6px; line-height: 1.2; } .roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--stroke-soft); border-radius: 14px; overflow: hidden; } .roi-row { background: var(--aria-white); padding: 14px 16px; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; } .roi-row-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); display: inline-flex; align-items: center; gap: 6px; } .roi-row-label > span { flex: 1; min-width: 0; } /* Leading icon used inside metric / alert / ROI labels — sized small, muted opacity, inherits the label's text color so each metric variant keeps its own status hue. */ .metric-icon { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; opacity: 0.75; } .metric-label, .alert-stat-label { display: flex; align-items: center; gap: 6px; } .metric-label > span, .alert-stat-label > span { flex: 1; min-width: 0; } /* Mobile: when the label wraps to 2+ lines, the icon shouldn't sit inline next to the first line and orphan the rest. Stack icon above the text so the label reads as a single tidy block. */ @media (max-width: 520px) { .metric-label, .alert-stat-label, .roi-row-label { flex-direction: column; align-items: flex-start; gap: 6px; } .metric-label > span, .alert-stat-label > span, .roi-row-label > span { flex: 0 1 auto; } .metric-icon { width: 16px; height: 16px; } } .roi-row-value { font-family: var(--font-display); font-size: 22px; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.1; margin-top: 8px; } .roi-chart-card { background: var(--aria-ink); color: var(--aria-white); border-radius: 20px; padding: 22px; margin-bottom: 16px; position: relative; overflow: hidden; } .roi-chart-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(132,168,230,0.18) 0%, transparent 60%); pointer-events: none; } .roi-chart-card > * { position: relative; z-index: 1; } .roi-chart-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 18px; } .roi-chart { display: flex; align-items: flex-end; gap: 4px; height: 108px; margin-bottom: 16px; padding: 0 2px; } .roi-chart-bar { flex: 1; background: linear-gradient(180deg, rgba(248, 113, 113, 0.95) 0%, rgba(220, 38, 38, 0.45) 100%); border-radius: 3px 3px 0 0; transform-origin: bottom; /* Bars stay collapsed until the chart enters the viewport — IntersectionObserver toggles .in-view */ transform: scaleY(0); opacity: 0; min-height: 2px; } .roi-chart.in-view .roi-chart-bar { animation: roi-bar-rise 700ms cubic-bezier(.2,.7,.3,1) forwards; } .roi-chart-bar.peak { background: linear-gradient(180deg, #fecaca 0%, rgba(254, 202, 202, 0.55) 100%); box-shadow: 0 0 12px rgba(252, 165, 165, 0.5); } @keyframes roi-bar-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } .roi-chart-foot { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.78); } .roi-chart-foot strong { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; color: var(--aria-white); letter-spacing: 0.005em; line-height: 1.0; margin-bottom: 4px; } .roi-quiet { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); line-height: 1.5; margin: 4px 4px 18px; text-align: center; } /* ============================================================ Screen 6 — Peer benchmark card ============================================================ */ .peer-card { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 22px; margin-bottom: 24px; box-shadow: var(--shadow-xs); } .peer-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; } .peer-card-tag { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--fg-3); letter-spacing: 0.005em; text-align: right; } .peer-bars { display: flex; flex-direction: column; gap: 14px; } .peer-bar-row { display: grid; grid-template-columns: 1fr; gap: 6px; } .peer-bar-label { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg-2); display: flex; justify-content: space-between; align-items: baseline; } .peer-bar-track { background: var(--aria-beige); border-radius: 999px; height: 8px; overflow: hidden; position: relative; } .peer-bar-fill { height: 100%; border-radius: 999px; transition: width 700ms cubic-bezier(.2,.7,.3,1); width: 0; } /* Monochromatic ramp on brand primary — same family, increasing weight. Top quartile (lightest reference) → peer avg (mid) → you (heaviest, the focus). */ .peer-bar-fill--top { background: var(--aria-mist); } .peer-bar-fill--avg { background: var(--aria-primary); } .peer-bar-fill--you { background: var(--aria-ink); } .peer-bar-row--you .peer-bar-label { font-weight: 600; color: var(--aria-ink); } .peer-bar-value { font-family: var(--font-display); font-size: 15px; color: var(--aria-ink); letter-spacing: 0.005em; align-self: end; text-align: right; margin-top: 0; } .peer-intro { font-family: var(--font-body); font-size: 15px; color: var(--fg-2); line-height: 1.55; margin: 0 0 16px 0; } .peer-foot { font-family: var(--font-body); font-size: 13px; color: var(--fg-3); margin-top: 14px; line-height: 1.55; } .peer-source { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--stroke-soft); line-height: 1.55; letter-spacing: 0.005em; } .peer-source strong { color: var(--aria-ink); font-weight: 600; } /* ============================================================ Screen 7 — Pick your pilot ============================================================ */ .pilot-option { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; margin-bottom: 10px; transition: border-color 160ms, background 160ms, box-shadow 160ms; box-shadow: var(--shadow-xs); overflow: hidden; } .pilot-option-head { padding: 18px 20px; cursor: pointer; display: flex; align-items: flex-start; gap: 14px; } .pilot-option:hover { border-color: var(--stroke-mid); } .pilot-option.selected { border-color: var(--aria-ink); background: linear-gradient(180deg, #F0F8FD 0%, var(--aria-white) 100%); } .pilot-option-expand { max-height: 0; overflow: hidden; transition: max-height 320ms ease; } .pilot-option.selected .pilot-option-expand { max-height: 2400px; } .pilot-option-expand-inner { padding: 4px 20px 22px; border-top: 1px solid rgba(25, 48, 51, 0.08); margin-top: 2px; } .pilot-option-expand-eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aria-primary-lo); margin: 16px 0 6px; } .pilot-option-expand-headline { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--aria-ink); letter-spacing: 0.005em; margin-bottom: 4px; } .pilot-option-expand-sub { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.5; margin-bottom: 14px; } .pilot-option-expand .device-frame { margin-bottom: 14px; } .pilot-option-expand .week1-timeline { margin-bottom: 0; } .pilot-chev { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--stroke-soft); display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: transform 220ms ease, border-color 160ms, background 160ms, color 160ms; background: var(--aria-white); color: var(--fg-2); } .pilot-option:hover .pilot-chev { border-color: var(--stroke-mid); color: var(--aria-ink); } .pilot-chev svg { width: 14px; height: 14px; display: block; } .pilot-option.selected .pilot-chev { transform: rotate(180deg); border-color: var(--aria-ink); background: var(--aria-ink); color: var(--aria-white); } .pilot-body { flex: 1; min-width: 0; } .pilot-priority { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aria-primary-lo); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pilot-tag { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; } .pilot-tag--aria { background: rgba(132, 168, 230, 0.16); color: var(--aria-periwinkle, #84a8e6); border-color: rgba(132, 168, 230, 0.35); } .pilot-tag--partial { background: rgba(132, 168, 230, 0.10); color: var(--aria-periwinkle, #84a8e6); border-color: rgba(132, 168, 230, 0.25); } .pilot-tag--diy { background: rgba(245, 237, 225, 0.55); color: #7a6a4a; border-color: rgba(212, 196, 168, 0.55); } .pilot-title { font-family: var(--font-display); font-size: 18px; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.25; margin-bottom: 6px; } .pilot-blurb { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.5; } /* ============================================================ Screen 8 — Week 1 mockup frame ============================================================ */ .device-frame { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .device-frame-bar { background: var(--aria-beige); padding: 10px 14px; display: flex; gap: 6px; border-bottom: 1px solid var(--stroke-soft); } .device-frame-bar span { width: 9px; height: 9px; border-radius: 999px; background: rgba(25,48,51,0.16); } .device-frame-screen { padding: 18px; background: var(--aria-beige-soft); min-height: 280px; } .mock-h { font-family: var(--font-display); font-size: 16px; color: var(--aria-ink); letter-spacing: 0.005em; margin-bottom: 4px; } .mock-sub { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); margin-bottom: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .mock-list { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 12px; padding: 4px 0; } .mock-row { padding: 10px 14px; border-bottom: 1px solid var(--stroke-soft); display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 12px; color: var(--aria-ink); } .mock-row:last-child { border-bottom: none; } .mock-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; } .mock-dot--green { background: var(--aria-mint); } .mock-dot--amber { background: #E8B946; } .mock-dot--red { background: #D94B5C; } .mock-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mock-row-meta { font-size: 11px; color: var(--fg-3); flex-shrink: 0; } .mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .mock-stat { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 10px; padding: 10px 12px; } .mock-stat-label { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 3px; } .mock-stat-value { font-family: var(--font-display); font-size: 18px; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.0; } .week1-timeline { margin-bottom: 16px; } .week1-day { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--stroke-soft); } .week1-day:first-child { border-top: none; } .week1-day-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--aria-beige); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; color: var(--aria-ink); font-style: italic; } .week1-day-text { flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--fg-2); line-height: 1.5; padding-top: 6px; } .week1-day-text strong { color: var(--aria-ink); font-weight: 500; } /* ============================================================ Screen 9 — Action plan (printable) ============================================================ */ .action-plan { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-xs); margin-bottom: 16px; } .ap-head { border-bottom: 1px solid var(--stroke-soft); padding-bottom: 16px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ap-head .logo { height: 22px; } .ap-head-meta { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); text-align: right; line-height: 1.5; } .ap-h1 { font-family: var(--font-display); font-size: 26px; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.2; margin-bottom: 4px; } .ap-h1 em { font-style: italic; } .ap-h-sub { font-family: var(--font-body); font-size: 14px; color: var(--fg-3); margin-bottom: 18px; } .ap-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .ap-narrative { background: var(--aria-ink); color: var(--aria-cream, #f5ede1); border-radius: 14px; padding: 16px 18px 18px; margin-bottom: 22px; position: relative; overflow: hidden; } .ap-narrative-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #e89d92; margin-bottom: 8px; position: relative; z-index: 1; } .ap-narrative-headline { font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--aria-cream, #f5ede1); letter-spacing: 0.005em; margin-bottom: 8px; position: relative; z-index: 1; } .ap-narrative-headline em { font-style: italic; } .ap-narrative-headline .stat { color: var(--status-narrative-stat); font-weight: 600; font-style: normal; } .ap-narrative-body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: rgba(245, 237, 225, 0.78); position: relative; z-index: 1; } .ap-narrative-body strong { color: var(--aria-cream, #f5ede1); font-weight: 600; } .ap-section { margin-bottom: 18px; } .ap-number { background: var(--aria-beige); border-radius: 12px; padding: 12px 14px; } .ap-num-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; line-height: 1.35; } .ap-num-value { font-family: var(--font-display); font-size: 26px; color: var(--aria-ink); letter-spacing: 0.005em; line-height: 1.0; } .ap-section { margin-bottom: 18px; } .ap-section-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; } .ap-priority { padding: 10px 0; border-top: 1px solid var(--stroke-soft); display: flex; gap: 12px; align-items: flex-start; } .ap-priority:first-of-type { border-top: none; padding-top: 4px; } .ap-priority-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: var(--aria-ink); color: var(--aria-white); font-family: var(--font-display); font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .ap-priority-body { flex: 1; min-width: 0; } .ap-priority-name { font-family: var(--font-display); font-size: 18px; color: var(--aria-ink); letter-spacing: 0.005em; margin-bottom: 4px; } .ap-priority-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-family: var(--font-body); font-size: 13.5px; color: #9a3412; letter-spacing: 0.02em; } .ap-priority-meta strong { font-family: var(--font-display); font-weight: 600; color: #7c2d12; margin-right: 4px; } .ap-priority-step { font-family: var(--font-body); font-size: 14px; color: var(--fg-2); line-height: 1.55; } .ap-roadmap-card { background: rgba(25, 48, 51, 0.025); border: 1px solid var(--stroke-soft); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; } .ap-roadmap-card:last-child { margin-bottom: 0; } .ap-roadmap-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .ap-roadmap-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--aria-ink); color: var(--aria-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; } .ap-roadmap-name { font-family: var(--font-display); font-size: 19px; color: var(--aria-ink); letter-spacing: 0.005em; margin-bottom: 3px; } .ap-roadmap-window { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aria-primary-lo); } .ap-roadmap-block { border-top: 1px solid var(--stroke-soft); padding-top: 10px; margin-top: 10px; } .ap-roadmap-block-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; } .ap-roadmap-list { list-style: none; padding: 0; margin: 0; } .ap-roadmap-list li { font-family: var(--font-body); font-size: 14.5px; color: var(--fg-2); line-height: 1.55; padding: 3px 0 3px 16px; position: relative; } .ap-roadmap-list li::before { content: "•"; position: absolute; left: 0; color: var(--aria-primary-lo); } .ap-roadmap-impact { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 10px; padding: 10px 14px; margin-top: 10px; } .ap-roadmap-impact-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; } .ap-roadmap-impact-value { font-family: var(--font-display); font-size: 18px; color: var(--aria-ink); line-height: 1.3; } .ap-roadmap-firststep { font-family: var(--font-body); font-size: 14.5px; color: var(--fg-2); line-height: 1.55; } .ap-pilot-stack { display: flex; flex-direction: column; gap: 14px; } /* Collapsible drawers on the action plan — keeps CTAs in view on first load */ .ap-drawer { margin-bottom: 18px; border-top: 1px solid var(--stroke-soft); border-bottom: 1px solid var(--stroke-soft); } .ap-drawer + .ap-drawer { margin-top: -18px; border-top: none; } .ap-drawer-summary { list-style: none; cursor: pointer; padding: 14px 4px; display: flex; align-items: center; gap: 10px; user-select: none; } .ap-drawer-summary::-webkit-details-marker { display: none; } .ap-drawer-summary .ap-section-label { margin-bottom: 0; } .ap-drawer-meta { font-family: var(--font-body); font-size: 13px; color: var(--aria-primary-lo); margin-left: 4px; flex: 1; } .ap-drawer-chevron { width: 16px; height: 16px; color: var(--aria-ink); opacity: 0.6; transition: transform 200ms ease; flex-shrink: 0; } .ap-drawer[open] .ap-drawer-chevron { transform: rotate(180deg); } .ap-drawer-body { padding: 4px 0 16px; } /* Closed-state preview fade — hint at content underneath */ .ap-drawer:not([open]) .ap-drawer-summary { background: linear-gradient(180deg, transparent 0%, rgba(25, 48, 51, 0.025) 100%); } .ap-pilot-static .pilot-option-head { cursor: default; } .ap-checklist { list-style: none; padding: 0; margin: 0; } .ap-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-family: var(--font-body); font-size: 13px; color: var(--aria-ink); line-height: 1.5; } .ap-checkbox { flex-shrink: 0; width: 14px; height: 14px; border: 1.2px solid var(--aria-ink); border-radius: 3px; margin-top: 4px; } .ap-complete { margin-top: 28px; padding: 28px 28px 32px; background: linear-gradient(180deg, rgba(132,168,230,0.08) 0%, rgba(132,168,230,0.02) 100%); border: 1px solid rgba(132,168,230,0.30); border-radius: 16px; text-align: center; } .ap-complete-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aria-primary-lo); margin-bottom: 14px; } .ap-complete-headline { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.15; color: var(--aria-ink); letter-spacing: -0.015em; margin-bottom: 12px; } .ap-complete-body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--fg-2); max-width: 460px; margin: 0 auto 16px; text-wrap: pretty; } .ap-complete-sign { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; } .ap-foot { border-top: 1px solid var(--stroke-soft); padding-top: 14px; margin-top: 8px; font-family: var(--font-body); font-size: 11px; color: var(--fg-3); display: flex; justify-content: space-between; gap: 12px; } .action-plan-buttons { display: flex; flex-direction: column; gap: 8px; } .btn-quiet--solo { color: var(--aria-ink); background: var(--aria-white); border-color: var(--stroke-mid); padding: 14px 16px; font-size: 14px; } .btn-quiet--solo:hover { background: var(--aria-beige); color: var(--aria-ink); } .btn .btn-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; display: inline-block; } #btn-print-plan, #btn-email-audit, #btn-8-to-9 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } #btn-print-plan svg, #btn-8-to-9 svg { width: 16px; height: 16px; flex-shrink: 0; } /* ============================================================ Screen 8 — primary "Book a call" CTA + Save & share panel ============================================================ */ .btn--book { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 18px; font-size: 16px; margin-top: 8px; margin-bottom: 14px; } .btn--book svg { width: 18px; height: 18px; flex-shrink: 0; } /* ============================================================ Screen 9 — booking placeholder ============================================================ */ .booking-placeholder { margin: 8px 0 18px; } .booking-placeholder-frame { background: var(--aria-white); border: 1px dashed var(--stroke-mid); border-radius: 18px; padding: 18px 18px 16px; position: relative; } .booking-placeholder-tag { display: inline-block; font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); background: var(--aria-beige); padding: 4px 9px; border-radius: 999px; margin-bottom: 10px; } .booking-placeholder-title { font-family: var(--font-display); font-size: 18px; color: var(--aria-ink); margin-bottom: 14px; } .booking-placeholder-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; } .bp-day { background: var(--aria-beige); border: 1px solid transparent; border-radius: 10px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .bp-day-name { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } .bp-day-num { font-family: var(--font-display); font-size: 16px; color: var(--aria-ink); } .bp-day--active { background: var(--aria-ink); border-color: var(--aria-ink); } .bp-day--active .bp-day-name { color: rgba(245, 237, 225, 0.7); } .bp-day--active .bp-day-num { color: var(--aria-cream, #f5ede1); } .booking-placeholder-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; } .bp-slot { background: var(--aria-white); border: 1px solid var(--stroke-mid); border-radius: 10px; padding: 10px 12px; font-family: var(--font-body); font-size: 13px; color: var(--aria-ink); text-align: center; } .bp-slot--active { background: var(--aria-ink); color: var(--aria-cream, #f5ede1); border-color: var(--aria-ink); font-weight: 600; } .booking-placeholder-note { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); line-height: 1.45; padding-top: 10px; border-top: 1px solid var(--stroke-soft); text-align: center; font-style: italic; } /* ============================================================ Thank-you "next steps" block ============================================================ */ .next-steps { background: var(--aria-white); border: 1px solid var(--stroke-soft); border-radius: 18px; padding: 18px 22px; margin-bottom: 18px; } .next-steps-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; } .next-steps-list { list-style: none; padding: 0; margin: 0; counter-reset: step; } .next-steps-list li { counter-increment: step; position: relative; padding: 10px 0 10px 36px; border-top: 1px solid var(--stroke-soft); font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.5; } .next-steps-list li:first-child { border-top: none; } .next-steps-list li::before { content: counter(step); position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 999px; background: var(--aria-beige); color: var(--aria-ink); font-family: var(--font-display); font-size: 12px; display: flex; align-items: center; justify-content: center; } .next-steps-list li strong { color: var(--aria-ink); font-weight: 500; } /* ============================================================ Print styles — only the screen marked .printing should print ============================================================ */ /* Hide the print-only roadmap when on-screen */ .roadmap-print { display: none; } /* Print-only cover styles for the roadmap section header. */ .roadmap-print-cover { padding: 8mm 0 6mm; border-bottom: 1px solid rgba(25,48,51,0.18); margin-bottom: 8mm; } .roadmap-print-eyebrow { font: 600 11px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--aria-ink-2); margin-bottom: 8px; } .roadmap-print-title { font: 400 24px/1.2 var(--font-display); color: var(--aria-ink); margin-bottom: 6px; } .roadmap-print-sub { font: 400 13px/1.5 var(--font-body); color: var(--fg-3, #4a5b5d); max-width: 60ch; } @page { margin: 14mm 12mm; } @media print { body, html { background: white !important; } /* Reset the desktop shell so the audit doesn't print as a 2-column layout with the dark rail on the left edge. The rail is wayfinding chrome only; it has no place in the printed deliverable. */ .aria-audit-shell, .aria-audit-root { display: block !important; width: 100% !important; min-height: 0 !important; background: white !important; } .audit-rail { display: none !important; } .top-bar, .screen, .action-plan-buttons, .roadmap-actions, .back-link, .start-over, #tweaks-root { display: none !important; } .screen.printing { display: block !important; padding: 0 !important; max-width: none !important; } .screen.printing .eyebrow-label, .screen.printing .headline, .screen.printing .subtext, .screen.printing .back-link, .screen.printing .action-plan-buttons, .screen.printing .roadmap-actions, .screen.printing .roadmap-cta { display: none !important; } .action-plan, .roadmap-print { box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 auto !important; /* Center on the printable page. @page margins handle the side gutter; the max-width keeps long lines comfortable when the user prints A4/Letter. */ max-width: 180mm !important; width: 100% !important; } /* The action plan is the cover/exec-summary page; each priority that follows breaks to its own page via `.roadmap-priority { page-break- before: always }`. Don't ALSO force-break after .action-plan — that was creating an empty page between the cover and priority 1, which the browser then printed with just the document title in the running header. Every priority has its own break, so the cover ends naturally and priority 1 lands on page 2. */ .roadmap-print { display: block !important; } /* Each priority gets its own page so the reader can flip priority-by-priority. Includes the first one — without the explicit force-after on .action-plan, the first priority needs its own break-before (otherwise it would try to share a page with the cover). */ .roadmap-priority { page-break-before: always; break-before: page; page-break-inside: avoid; break-inside: avoid; } /* (Previously had padding-top: 6mm here for "Margins: None" mode, but it stacked with the default 14mm @page margin and pushed the 6th priority onto a new page. There's no CSS way to know which margin mode the user chose, so we optimize for the common case — default margins gives plenty of breathing room above the logo on its own.) */ /* Top-3 priority cards on the action plan must not split across pages either. */ .ap-priority, .ap-narrative, .ap-numbers, .ap-complete { page-break-inside: avoid; break-inside: avoid; } /* Force drawers open when printing so the full plan is in the PDF */ .ap-drawer { border: none !important; margin-bottom: 18px !important; } .ap-drawer .ap-drawer-summary { display: none !important; } .ap-drawer .ap-drawer-body { display: block !important; padding: 0 !important; } .ap-drawer:not([open]) .ap-drawer-body { display: block !important; } /* Reset the desktop .app rules — fill the printable width, no left-pane gutter. */ .app { max-width: 100% !important; width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: white !important; } /* Hide the on-screen save-and-share panel from print output */ .save-share-panel { display: none !important; } /* Hide the dev mode badge from print */ #audit-dev-badge { display: none !important; } /* The "Your audit is complete / Thank you, Alex" capstone is on-screen chrome — in the emailed PDF the email body already does that framing, and the panel was forcing an orphan page (just the thank-you + footer) because it couldn't fit alongside the executive summary. Drop it from print so page 1 ends naturally with the priorities + footer. */ .ap-complete { display: none !important; } /* The roadmap section divider ("Your custom roadmap / A 90-day plan…") was wasting a whole page on its own, and Skia's renderer was splitting its inner subtext onto the next page (orphaning it from the title). Each priority's own heading already labels what it is — drop the redundant cover so priorities flow priority-1 → priority-N cleanly. */ .roadmap-print-cover { display: none !important; } } /* ===== Print-mode page (recipient view) ===== Set on by the print-mode IIFE in audit.js. The /audit/print/[id] route uses this so the recipient briefly sees a clean preview of the action plan + roadmap (no funnel chrome) before the browser's print dialog opens. The @media print rules above handle the actual paper output; these handle what's visible on screen during the dialog. */ html[data-audit-print-mode="1"], html[data-audit-print-mode="1"] body { background: #fff; } html[data-audit-print-mode="1"] body { display: block; } html[data-audit-print-mode="1"] .top-bar, html[data-audit-print-mode="1"] .audit-rail, html[data-audit-print-mode="1"] .back-link, html[data-audit-print-mode="1"] .start-over, html[data-audit-print-mode="1"] .save-share-panel, html[data-audit-print-mode="1"] .action-plan-buttons, html[data-audit-print-mode="1"] .roadmap-actions, html[data-audit-print-mode="1"] #tweaks-root, html[data-audit-print-mode="1"] #audit-resume-banner, html[data-audit-print-mode="1"] #audit-dev-badge { display: none !important; } html[data-audit-print-mode="1"] .screen { display: none !important; } html[data-audit-print-mode="1"] #screen-8 { display: block !important; padding: 0 !important; max-width: none !important; } html[data-audit-print-mode="1"] #screen-8 > .eyebrow-label, html[data-audit-print-mode="1"] #screen-8 > .headline, html[data-audit-print-mode="1"] #screen-8 > .subtext { display: none !important; } html[data-audit-print-mode="1"] .roadmap-print { display: block !important; } html[data-audit-print-mode="1"] .aria-audit-shell, html[data-audit-print-mode="1"] .aria-audit-root { display: block !important; width: 100% !important; background: #fff !important; } html[data-audit-print-mode="1"] .app { width: 100% !important; max-width: 920px !important; margin: 0 auto !important; padding: 32px 24px !important; background: #fff !important; box-shadow: none !important; } /* ===== Booking widget mount ===== The audit's typography rules (set on h1-h6 in colors_and_type.css) and the universal `* { margin: 0; padding: 0 }` reset both override the Tailwind utilities the BookingWidget relies on. Reset inside the mount so the widget renders identically to /demo. */ /* `revert-layer` falls back to lower cascade layers — letting Tailwind's utility classes (font-season, text-xl, text-darkpurp, etc.) actually drive the rendering instead of the audit's unlayered overrides. Wide net (`*`) so non-enumerated elements like