/* Central Systems Website Audit — public styles. Tokens mirror DESIGN_SYSTEM.md exactly (v2.0). CASCADE SAFETY NOTE: this stylesheet is enqueued (via wp_enqueue_style in class-public-controller.php) BEFORE Hello Elementor's reset.css/theme.css and Elementor's own frontend/kit CSS in — WordPress does not let a plugin control exact ordering relative to the active theme without a dependency declaration, and changing enqueue order counts as a backend change we were asked not to make unless it's a documented integration bug. Several rules below (headings, inputs, labels, buttons) were being silently overridden by later-loaded theme/Elementor rules of equal or greater specificity — this was the root cause of the "invisible headline" and "anonymous white input" bugs. Fixed here by scoping the affected rules to the `#cswa-app` ID (very hard for a generic theme/plugin selector to beat) and, where the collision was proven (inputs, headings), adding a scoped `!important` — an accepted pattern for a self-contained embedded widget that has to guarantee its own visual integrity inside a host page it does not control. Nothing here is `!important` against our OWN rules. */ .cswa { --cswa-dark: #071320; --cswa-dark-alt: #102133; --cswa-surface-dark-2: #16283c; --cswa-primary: #ff4800; --cswa-primary-600: #e63f00; --cswa-primary-50: #fff3ec; --cswa-violet: #7c3aed; --cswa-cyan: #22d3ee; --cswa-text: #334155; --cswa-text-secondary: #475569; --cswa-muted: #64748b; --cswa-border: #e2e8f0; --cswa-bg: #f8fafc; --cswa-bg-alt: #f1f5f9; --cswa-green: #10b981; --cswa-amber: #f59e0b; --cswa-red: #ef4444; --cswa-radius-button: 14px; --cswa-radius-card: 24px; --cswa-radius-pill: 999px; --cswa-shadow-sm: 0 2px 8px rgba(15,23,42,.06); --cswa-shadow-md: 0 8px 30px rgba(15,23,42,.08); --cswa-shadow-lg: 0 20px 60px rgba(15,23,42,.10); --cswa-shadow-hover: 0 30px 80px rgba(15,23,42,.14); --cswa-shadow-dark-sm: 0 2px 8px rgba(0,0,0,.35); --cswa-gradient-primary: linear-gradient(135deg, #ff4800, #e63f00); --cswa-gradient-dark: linear-gradient(180deg, #071320 0%, #102133 100%); --cswa-motion-fast: 180ms cubic-bezier(.4,0,.2,1); --cswa-motion-standard: 280ms cubic-bezier(.16,1,.3,1); --cswa-motion-large: 600ms cubic-bezier(.16,1,.3,1); font-family: 'Inter', sans-serif; color: var(--cswa-text); } .cswa * { box-sizing: border-box; } #cswa-app h1, #cswa-app h2, #cswa-app h3, #cswa-app h4 { font-family: 'Manrope', sans-serif; color: #0f172a; margin: 0 0 .5em; letter-spacing: -0.01em; } .cswa-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cswa-primary); background: rgba(255,72,0,.1); border: 1px solid rgba(255,72,0,.25); padding: 6px 14px; border-radius: var(--cswa-radius-pill); margin-bottom: 20px; } /* Reveal-on-scroll (JS toggles .is-visible; CSS-only fallback keeps content visible if JS never runs) */ .cswa-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .cswa-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--cswa-motion-large), transform var(--cswa-motion-large); } .cswa-reveal.is-visible { opacity: 1; transform: none; } } /* ================================================================== HERO — full-bleed background regardless of the Elementor ancestor container's own width (belt-and-braces on top of the container's content_width:full + align-items:stretch settings). ================================================================== */ #cswa-app.cswa { position: relative; width: 100%; } .cswa-hero { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; overflow: hidden; isolation: isolate; background: var(--cswa-gradient-dark); color: #cbd5e1; padding: clamp(56px, 9vw, 96px) 0 clamp(56px, 8vw, 88px); } .cswa-hero::before { /* Fine 1px grid texture, ambient only — never behind dense text. */ content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); } .cswa-hero::after { /* Soft mesh glow, positioned behind the diagnostic workspace column. */ content: ''; position: absolute; z-index: 0; pointer-events: none; top: -10%; right: 2%; width: 56vw; height: 56vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle, rgba(255,72,0,.16) 0%, rgba(124,58,237,.09) 45%, transparent 70%); filter: blur(80px); opacity: .9; } @media (prefers-reduced-motion: no-preference) and (min-width: 900px) { .cswa-hero::after { animation: cswa-drift 26s ease-in-out infinite alternate; } } @keyframes cswa-drift { from { transform: translate(0, 0); } to { transform: translate(-30px, 24px); } } .cswa-hero__inner { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); display: grid; grid-template-columns: 1fr; gap: 40px; min-height: 0; } @media (min-width: 1025px) { .cswa-hero__inner { grid-template-columns: 52% 1fr; align-items: center; gap: 56px; min-height: 620px; } } @media (min-width: 768px) and (max-width: 1024px) { .cswa-hero__inner { padding: 0 24px; } } /* Order: on mobile the workspace preview sits AFTER the CTA/trust line, never beside the form — see the "order" values on each child below. */ .cswa-hero__copy { order: 1; } .cswa-hero__panel { order: 2; } @media (min-width: 1025px) { .cswa-hero__copy, .cswa-hero__panel { order: 0; } } #cswa-app .cswa-hero__copy h1 { color: #f8fafc !important; font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; } .cswa-hero__sub { color: #a9b7c9; font-size: 17px; line-height: 1.7; max-width: 480px; margin-bottom: 20px; } .cswa-hero__trust-top { color: #7089a3; font-size: 13px; margin-bottom: 28px; } /* ================================================================== FORM — compact, two-stage, high-contrast surfaces ================================================================== */ .cswa-form { max-width: 480px; } .cswa-form-stage { display: flex; flex-direction: column; gap: 14px; } .cswa-form-stage[hidden] { display: none; } .cswa-form-row { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 480px) { .cswa-form-row--split { grid-template-columns: 1fr 1fr; } } .cswa-field { display: flex; flex-direction: column; } #cswa-app .cswa-field label { display: block; font-size: 13px; font-weight: 600; color: #e7edf5 !important; margin-bottom: 6px; } #cswa-app .cswa-field input[type="text"], #cswa-app .cswa-field input[type="email"], #cswa-app .cswa-field input[type="tel"], #cswa-app .cswa-field select, #cswa-app .cswa-field textarea { width: 100% !important; height: 52px; min-height: 52px; padding: 0 16px !important; border-radius: var(--cswa-radius-button) !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(255,255,255,.06) !important; color: #f8fafc !important; font-size: 16px !important; transition: border-color var(--cswa-motion-fast), box-shadow var(--cswa-motion-fast), background-color var(--cswa-motion-fast); font-family: 'Inter', sans-serif; line-height: 1.4; } #cswa-app .cswa-field textarea { height: auto; padding: 14px 16px !important; min-height: 90px; } #cswa-app .cswa-field input::placeholder, #cswa-app .cswa-field textarea::placeholder { color: rgba(226,232,240,.58) !important; } #cswa-app .cswa-field input:focus, #cswa-app .cswa-field select:focus, #cswa-app .cswa-field textarea:focus { outline: none !important; border-color: var(--cswa-primary) !important; box-shadow: 0 0 0 3px rgba(255,75,0,.14) !important; background: rgba(255,255,255,.09) !important; } .cswa-field__error, .cswa-form__error { color: #fca5a5; font-size: 13px; margin: 4px 0 0; } @media (prefers-reduced-motion: no-preference) { .cswa-field__error, .cswa-form__error { animation: cswa-fade-in-down 150ms ease-out; } } @keyframes cswa-fade-in-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Stage 2: pill-style goal selector, replaces a native is kept in the DOM, visually hidden but reachable, as the accessible/keyboard fallback). */ .cswa-goal-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 380px) { .cswa-goal-pills { grid-template-columns: 1fr; } } button.cswa-goal-pill.cswa-goal-pill { appearance: none; -webkit-appearance: none; text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #dbe4ee; border-radius: var(--cswa-radius-button); padding: 12px 14px; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 48px; transition: border-color var(--cswa-motion-fast), background-color var(--cswa-motion-fast), color var(--cswa-motion-fast); } button.cswa-goal-pill.cswa-goal-pill:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); } button.cswa-goal-pill.cswa-goal-pill:focus { outline: none; } button.cswa-goal-pill.cswa-goal-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cswa-dark), 0 0 0 6px #ff9a5c; } button.cswa-goal-pill.cswa-goal-pill.is-selected { border-color: var(--cswa-primary); background: rgba(255,72,0,.14); color: #fff; font-weight: 600; } .cswa-goal-select-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cswa-goal-select-fallback:focus { position: static; width: auto; height: auto; clip: auto; white-space: normal; margin-top: 8px; } .cswa-field--checkbox { flex-direction: row; } #cswa-app .cswa-field--checkbox label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; color: #cbd5e1 !important; min-height: 44px; } #cswa-app .cswa-field--checkbox input { appearance: none; -webkit-appearance: none; margin-top: 2px; width: 20px; height: 20px; min-width: 20px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 6px; background: rgba(255,255,255,.04); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background-color 150ms ease, border-color 150ms ease; } #cswa-app .cswa-field--checkbox input:checked { background: var(--cswa-primary); border-color: var(--cswa-primary); } #cswa-app .cswa-field--checkbox input:checked::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); } #cswa-app .cswa-field--checkbox input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cswa-dark), 0 0 0 6px #ff9a5c; } .cswa-field--checkbox a { color: #ff9a5c; text-decoration: underline; text-underline-offset: 2px; } .cswa-form-nav { display: flex; align-items: center; gap: 12px; margin-top: 4px; } /* Buttons — combined-class + button-type-selector contract, per DESIGN_SYSTEM.md's documented Elementor-Kit specificity gotcha. */ a.cswa-btn.cswa-btn, button.cswa-btn.cswa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--cswa-radius-button); font-weight: 600; font-size: 16px; border: none; cursor: pointer; text-decoration: none; transition: transform var(--cswa-motion-standard), box-shadow var(--cswa-motion-standard), background-color var(--cswa-motion-standard); font-family: 'Inter', sans-serif; } a.cswa-btn.cswa-btn.cswa-btn--primary, button.cswa-btn.cswa-btn.cswa-btn--primary { background: var(--cswa-gradient-primary); color: #fff; } a.cswa-btn.cswa-btn.cswa-btn--primary:hover, button.cswa-btn.cswa-btn.cswa-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(255,72,0,.5); background: var(--cswa-primary-600); color: #fff; } button.cswa-btn.cswa-btn.cswa-btn--primary:focus { outline: none; } a.cswa-btn.cswa-btn.cswa-btn--primary:focus-visible, button.cswa-btn.cswa-btn.cswa-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cswa-dark), 0 0 0 6px #ff9a5c; } a.cswa-btn.cswa-btn.cswa-btn--ghost, button.cswa-btn.cswa-btn.cswa-btn--ghost { background: rgba(255,255,255,.06); color: #f8fafc; border: 1px solid rgba(255,255,255,.16); } a.cswa-btn.cswa-btn.cswa-btn--ghost:hover, button.cswa-btn.cswa-btn.cswa-btn--ghost:hover { background: rgba(255,255,255,.12); color: #f8fafc; } button.cswa-btn.cswa-btn.cswa-btn--ghost:focus { outline: none; } a.cswa-btn.cswa-btn.cswa-btn--ghost:focus-visible, button.cswa-btn.cswa-btn.cswa-btn--ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cswa-dark), 0 0 0 6px rgba(255,255,255,.4); } .cswa-btn--full { width: 100%; } button.cswa-btn.cswa-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .cswa-btn--auto { width: auto; } @media (max-width: 640px) { .cswa-btn--auto { width: 100%; } } .cswa-trust-line { font-size: 13px; color: #7089a3; margin-top: 14px; } /* ================================================================== DIAGNOSTIC WORKSPACE ================================================================== */ .cswa-workspace { background: rgba(16,33,51,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); border-radius: var(--cswa-radius-card); padding: clamp(22px, 3vw, 30px); box-shadow: var(--cswa-shadow-dark-sm); } .cswa-workspace__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8ca0b3; margin-bottom: 6px; } .cswa-workspace__idle-copy { color: #cbd5e1; font-size: 15px; margin: 0 0 18px; } .cswa-workspace__title { font-family: 'Manrope', sans-serif; color: #f8fafc !important; font-size: 19px; font-weight: 700; margin: 0 0 4px; } .cswa-workspace__target { color: #8ca0b3; font-size: 13.5px; margin: 0 0 16px; word-break: break-all; } /* Compact module list — used both for the idle preview and (once submitted) the real per-module progress list. */ .cswa-modules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .cswa-module { display: flex; align-items: flex-start; gap: 12px; padding: 11px 8px; border-radius: 12px; transition: background-color var(--cswa-motion-standard); } .cswa-module__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: #8ca0b3; margin-top: 1px; } .cswa-module__icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; fill: none; } .cswa-module__body { flex: 1; min-width: 0; } .cswa-module__title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cswa-module__title { font-size: 14.5px; font-weight: 600; color: #e7edf5; } .cswa-module__desc { font-size: 12.5px; color: #7f93a8; line-height: 1.5; margin-top: 2px; } .cswa-module__state { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--cswa-radius-pill); color: #8ca0b3; background: rgba(255,255,255,.05); white-space: nowrap; } .cswa-module.is-active { background: rgba(255,72,0,.1); } .cswa-module.is-active .cswa-module__icon { background: rgba(255,72,0,.16); color: var(--cswa-primary); } .cswa-module.is-active .cswa-module__state { color: #ffb27a; background: rgba(255,72,0,.14); } @media (prefers-reduced-motion: no-preference) { .cswa-module.is-active .cswa-module__icon { animation: cswa-pulse-icon 1.4s ease-in-out infinite; } } @keyframes cswa-pulse-icon { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,72,0,.3); } 50% { box-shadow: 0 0 0 5px rgba(255,72,0,0); } } .cswa-module.is-complete .cswa-module__icon { background: rgba(16,185,129,.14); color: var(--cswa-green); } .cswa-module.is-complete .cswa-module__state { color: var(--cswa-green); background: rgba(16,185,129,.12); } .cswa-module.is-unavailable .cswa-module__icon { background: rgba(245,158,11,.14); color: var(--cswa-amber); } .cswa-module.is-unavailable .cswa-module__state { color: var(--cswa-amber); background: rgba(245,158,11,.12); } .cswa-module.is-failed .cswa-module__icon { background: rgba(239,68,68,.14); color: var(--cswa-red); } .cswa-module.is-failed .cswa-module__state { color: var(--cswa-red); background: rgba(239,68,68,.12); } .cswa-module.is-not-included { opacity: .55; } .cswa-module.is-not-included .cswa-module__state { color: #64748b; } /* Mobile: collapse completed modules to a single line so the panel never turns into a dense dashboard on a small screen. */ @media (max-width: 640px) { .cswa-module.is-complete .cswa-module__desc { display: none; } .cswa-module.is-complete { padding-top: 8px; padding-bottom: 8px; } } .cswa-workspace__report-output { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); } .cswa-workspace__report-output h5 { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9fb0c3; margin: 0 0 10px; } .cswa-workspace__report-output ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .cswa-workspace__report-output li { font-size: 13.5px; color: #b7c4d3; display: flex; align-items: center; gap: 8px; } .cswa-workspace__report-output li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cswa-primary); flex-shrink: 0; } /* Real-progress rail */ .cswa-progress-rail { margin-bottom: 16px; } .cswa-progress-rail__track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .cswa-progress-rail__fill { height: 100%; background: var(--cswa-gradient-primary); border-radius: 999px; width: 0%; transition: width var(--cswa-motion-large); } .cswa-progress-rail__label { font-size: 12.5px; color: #8ca0b3; margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; } .cswa-workspace__note { color: #8ca0b3; font-size: 13px; margin-top: 18px; } .cswa-workspace__error #cswa-workspace-error-message { color: #fca5a5; } /* Success/complete panel */ .cswa-complete-scores { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; } .cswa-complete-score-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px 16px; min-width: 90px; display: flex; flex-direction: column; } .cswa-complete-score-card--overall { background: rgba(255,72,0,.14); border-color: rgba(255,72,0,.3); } .cswa-complete-score-card__value { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; color: #f8fafc; } .cswa-complete-score-card__label { font-size: 11px; color: #8ca0b3; margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; } /* ================================================================== "WHAT WE CHECK" and other white sections ================================================================== */ .cswa-checks { background: var(--cswa-bg); padding-top: clamp(56px, 8vw, 96px); } .cswa-checks__intro { max-width: 1220px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); } .cswa-checks__intro p { max-width: 640px; color: var(--cswa-muted); font-size: 17px; line-height: 1.7; margin-top: 12px; } .cswa-checks__grid { max-width: 1220px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px) clamp(56px, 8vw, 96px); display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; } @media (min-width: 640px) { .cswa-checks__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .cswa-checks__grid { grid-template-columns: repeat(4, 1fr); } } .cswa-check-card { background: #fff; border: 1px solid var(--cswa-border); border-radius: var(--cswa-radius-card); padding: 32px 28px; box-shadow: var(--cswa-shadow-sm); transition: transform var(--cswa-motion-standard), box-shadow var(--cswa-motion-standard); } .cswa-check-card:hover { transform: translateY(-4px); box-shadow: var(--cswa-shadow-md); } .cswa-check-card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--cswa-primary-50); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .cswa-check-card__icon svg { width: 24px; height: 24px; stroke: var(--cswa-primary); stroke-width: 1.75; fill: none; } .cswa-check-card h4 { font-size: 19px; margin-bottom: 8px; } .cswa-check-card p { font-size: 15px; line-height: 1.65; color: var(--cswa-muted); margin: 0; } .cswa-section { max-width: 1220px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 32px); } .cswa-limitations__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 24px; } @media (min-width: 800px) { .cswa-limitations__grid { grid-template-columns: 1fr 1fr; } } .cswa-limitations__grid ul { padding-left: 20px; line-height: 1.8; } .cswa-privacy-note { margin-top: 32px; font-size: 13px; color: var(--cswa-muted); line-height: 1.7; } .cswa-faq details { border-bottom: 1px solid var(--cswa-border); padding: 16px 0; } .cswa-faq summary { font-weight: 600; cursor: pointer; color: #0f172a; } .cswa-faq summary:focus-visible { outline: 2px solid var(--cswa-primary); outline-offset: 4px; } .cswa-faq p { color: var(--cswa-muted); margin-top: 10px; line-height: 1.7; } /* ================================================================== REPORT PAGE (unchanged from previous phase, kept for report.php) ================================================================== */ .cswa-report__summary { background: var(--cswa-gradient-dark); padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px); } .cswa-report__summary-inner { max-width: 1080px; width: 100%; min-width: 0; margin: 0 auto; color: #cbd5e1; box-sizing: border-box; } #cswa-app .cswa-report__summary h1 { color: #f8fafc !important; } .cswa-report__url { color: #8ca0b3; margin-bottom: 16px; word-break: break-all; } .cswa-report__summary-copy { max-width: 640px; line-height: 1.7; margin-bottom: 32px; } .cswa-score-row { display: flex; flex-wrap: wrap; gap: 12px; } .cswa-score-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 20px; min-width: 130px; display: flex; flex-direction: column; transition: transform var(--cswa-motion-standard); } .cswa-score-card:hover { transform: translateY(-2px); } .cswa-score-card--overall { background: rgba(255,72,0,.12); border-color: rgba(255,72,0,.3); } .cswa-score-card__value { font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 800; color: #f8fafc; } .cswa-score-card__max { font-size: 13px; color: #8ca0b3; } .cswa-score-card__label { font-size: 12px; color: #8ca0b3; margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; } .cswa-report__meta { font-size: 13px; color: #8ca0b3; margin-top: 24px; } /* Root cause of mobile report overflow: a CSS Grid track's implicit minimum width is `auto` (content-based), not 0 — so `1fr` alone does NOT let a track shrink below its content's intrinsic width. Any long unbroken string inside .cswa-report__main (a URL, a technical value) was therefore free to widen the whole grid track, and with it the page, past the viewport. Fixed with `minmax(0, 1fr)` on every track plus explicit `min-width: 0` on the grid's direct children — the standard fix for this well-known grid/flex sizing behaviour. */ .cswa-report, .cswa-report__body { width: 100%; max-width: 100%; } .cswa-report__body { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 clamp(18px, 5vw, 64px); min-width: 0; } @media (min-width: 960px) { .cswa-report__body { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; } } .cswa-report__nav { display: flex; flex-direction: row; overflow-x: auto; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--cswa-border); min-width: 0; -webkit-overflow-scrolling: touch; } @media (min-width: 960px) { .cswa-report__nav { flex-direction: column; position: sticky; top: 20px; align-self: start; border-bottom: none; padding-top: 40px; } } .cswa-report__nav a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--cswa-text); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color var(--cswa-motion-fast), color var(--cswa-motion-fast); } .cswa-report__nav a:hover, .cswa-report__nav a.is-active { background: rgba(255,72,0,.08); color: var(--cswa-primary); } .cswa-report__main { padding: 40px 0; min-width: 0; width: 100%; } .cswa-report__section { padding: 32px 0; border-bottom: 1px solid var(--cswa-border); min-width: 0; } .cswa-report__section:last-child { border-bottom: none; } .cswa-finding-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cswa-finding { border: 1px solid var(--cswa-border); border-radius: 16px; padding: 18px 20px; background: #fff; transition: transform var(--cswa-motion-standard), box-shadow var(--cswa-motion-standard); min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .cswa-finding:hover { transform: translateY(-2px); box-shadow: var(--cswa-shadow-sm); } .cswa-finding--fix_now { border-left: 4px solid var(--cswa-red); } .cswa-finding--improve_next { border-left: 4px solid var(--cswa-amber); } .cswa-finding--monitor { border-left: 4px solid var(--cswa-border); } .cswa-finding--working_well { border-left: 4px solid var(--cswa-green); } .cswa-priority-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--cswa-radius-pill); margin-bottom: 8px; } .cswa-priority-badge--fix_now { background: rgba(239,68,68,.1); color: var(--cswa-red); } .cswa-priority-badge--improve_next { background: rgba(245,158,11,.1); color: var(--cswa-amber); } .cswa-priority-badge--monitor { background: #f1f5f9; color: var(--cswa-muted); } .cswa-priority-badge--working_well { background: rgba(16,185,129,.1); color: var(--cswa-green); } .cswa-finding__evidence, .cswa-finding__recommendation { font-size: 14px; line-height: 1.6; color: var(--cswa-text); margin: 8px 0 0; } .cswa-finding__meta { font-size: 12.5px; color: var(--cswa-muted); margin-top: 10px; } .cswa-finding__service-note { font-size: 12.5px; color: var(--cswa-primary); font-weight: 600; margin-top: 8px; } .cswa-human-review { background: var(--cswa-bg); border-radius: var(--cswa-radius-card); padding: 40px !important; } .cswa-human-review__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; } .cswa-human-review__actions a.cswa-btn.cswa-btn.cswa-btn--ghost { background: #fff; color: #0f172a; border-color: var(--cswa-border); } .cswa-human-review__note { margin-top: 16px; color: var(--cswa-green); font-weight: 600; } .cswa-report-status { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .cswa-report-status__inner { text-align: center; max-width: 480px; } .cswa-report-status__inner .cswa-btn { margin-top: 20px; } button.cswa-btn.cswa-btn.cswa-btn--small, a.cswa-btn.cswa-btn.cswa-btn--small { min-height: 44px; padding: 10px 16px; font-size: 13px; } .cswa-report__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } .cswa-report__actions button.cswa-btn.cswa-btn.cswa-btn--ghost { background: rgba(255,255,255,.06); color: #f8fafc; border-color: rgba(255,255,255,.16); } .cswa-report__action-note { font-size: 13px; color: #8ca0b3; } .cswa-report__email-warning { background: rgba(245,158,11,.14); color: #fbbf24; border: 1px solid rgba(245,158,11,.35); border-radius: 14px; padding: 12px 16px; font-size: 13.5px; margin-top: 20px; } .cswa-qualification { background: var(--cswa-bg); border-radius: var(--cswa-radius-card); padding: 40px !important; } .cswa-qualification .cswa-field { margin-bottom: 16px; max-width: 480px; } #cswa-app .cswa-qualification .cswa-field label { color: var(--cswa-text) !important; } #cswa-app .cswa-qualification .cswa-field input, #cswa-app .cswa-qualification .cswa-field select, #cswa-app .cswa-qualification .cswa-field textarea { background: #fff !important; color: var(--cswa-text) !important; border: 1px solid var(--cswa-border) !important; } .cswa-qualification__note { margin-top: 14px; color: var(--cswa-green); font-weight: 600; } /* ================================================================== STATUS PANEL — replaces the form entirely during submitting/running/ complete/failed states (never shown alongside form inputs). ================================================================== */ .cswa-status-panel { background: rgba(16,33,51,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); border-radius: var(--cswa-radius-card); padding: clamp(24px, 3vw, 32px); max-width: 480px; } .cswa-status-panel__heading { font-family: 'Manrope', sans-serif; color: #f8fafc !important; font-size: 22px; font-weight: 800; margin: 0 0 8px; } .cswa-status-panel__sub { color: #a9b7c9; font-size: 15px; line-height: 1.6; margin: 0 0 20px; } .cswa-status-panel__details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .cswa-status-panel__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); min-width: 0; } .cswa-status-panel__row-label { font-size: 12px; color: #7089a3; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; } .cswa-status-panel__row-value { font-size: 14px; color: #e7edf5; font-weight: 600; text-align: right; overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .cswa-status-panel__scores { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .cswa-status-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; } .cswa-status-panel__note { font-size: 13px; color: #7089a3; margin-top: 16px; } @media (prefers-reduced-motion: reduce) { .cswa * { transition-duration: .001ms !important; animation-duration: .001ms !important; } .cswa-hero::after { animation: none !important; } } /* Final safety guard ONLY — every element above has been fixed structurally (grid minmax(0,1fr), min-width:0, overflow-wrap). This is a backstop against any element we haven't found, not a replacement for those fixes, per instruction. */ .cswa-report, .cswa-report * { max-width: 100%; }