/* =========================================== Veritiliz Master Stylesheet Theme: Warm Dark (default) + Warm Light — designed for tired eyes and people in emotional distress. No cool blues. No harsh whites. No alarm red. Warm charcoal, parchment, terracotta — in BOTH themes. Light mode is deliberately a warm cream/parchment palette, not a stark white/cool-gray inversion, to stay consistent with the brand identity above. =========================================== */ :root { /* ── Dark theme (default) ──────────────────────────────────────────────── Applied whenever [data-theme] is absent or explicitly "dark". The resolved theme (light/dark) is set as a data-theme attribute on by theme-init.js, BEFORE first paint, to avoid a flash of the wrong theme — see theme-init.js for why that has to be a separate blocking script rather than logic inside script.js (which loads at the end of , well after the page has already painted). */ --bg-color: #0e0b09; --surface-color: #181310; --surface-raised: #221c17; --text-primary: #ede0cc; --text-secondary: #9a8a76; --text-muted: #6b5d50; --accent-color: #b87252; --accent-hover: #ca8868; --accent-glow: rgba(184, 114, 82, 0.10); --border-color: #2d2218; --border-light: #3d3025; /* Risk band colours. Four bands because the rating scale genuinely has four: Safe 1-2, Moderate 3-4, High 5-7, Critical 8-10. Tuned for the near-black background; overridden for the light theme below. */ --risk-safe: #82c490; --risk-moderate: #c8a55a; --risk-high: #d08a4e; --risk-critical: #d2664e; --heading-color: #f5ebe0; --nav-bg: rgba(14, 11, 9, 0.96); /* Semantic status colors — TOKENIZED here rather than left as the hardcoded hex literals that were previously scattered through the stylesheet (.analyzer-char-counter.at-limit, .checkout-status.error/.success, .upgrade-success-banner). This wasn't just tidiness: the original success green (#82c490) is a light pastel tuned for a near-black background — on the new light theme it would be nearly illegible (light-on-light). Tokenizing lets light mode use a properly darkened variant for the same semantic role instead of inheriting a color picked for the opposite theme. RGB triplets (no #) are provided alongside the hex for tint/border uses that need a specific alpha via rgba(var(--x-rgb), N) — this preserves the exact original alpha values at each call site (some were 0.10, others 0.12/0.28) without needing a separate variable per alpha. */ --color-danger: #e05050; --color-danger-soft: #d07878; --color-danger-tint-rgb: 160, 60, 60; --color-success: #82c490; --color-success-hover: #a5d6b0; --color-success-tint-rgb: 60, 130, 75; } /* ── Light theme ────────────────────────────────────────────────────────── Applied when . Warm parchment/cream, not stark white or cool gray — same terracotta accent family as dark mode, so the two themes read as one brand rather than a generic inversion. Text/accent values were deliberately darkened relative to a naive "just invert the dark values" approach, specifically for contrast against a light background (a straight inversion of e.g. --accent-color or --color-success would fail contrast as text on a light surface). */ [data-theme="light"] { --bg-color: #f7f2ea; --surface-color: #fffdf9; --surface-raised: #ffffff; --text-primary: #2b2117; --text-secondary: #6b5d50; --text-muted: #8f7d6b; --accent-color: #96502f; --accent-hover: #b0623c; --accent-glow: rgba(150, 80, 47, 0.08); --border-color: #e4d8c8; --border-light: #d8c8b0; /* Darkened for contrast on parchment — the dark-theme values are pastels tuned for a near-black background and are illegible here. */ --risk-safe: #3f8f57; --risk-moderate: #9a7318; --risk-high: #b25f19; --risk-critical: #b23a3a; --heading-color: #1a130c; --nav-bg: rgba(255, 253, 249, 0.96); --color-danger: #b23a3a; --color-danger-soft: #9c4040; --color-danger-tint-rgb: 200, 90, 90; --color-success: #1e7a45; --color-success-hover: #145c33; --color-success-tint-rgb: 60, 130, 75; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Smooth color transition when the theme is manually toggled. Scoped to a short, explicit property list (not a blanket `*` transition, which can cause jank and unintended animation on unrelated property changes) and only to elements whose look actually changes between themes. This has no effect on initial page load — theme-init.js sets the correct data-theme BEFORE first paint, so there is no wrong-to-right transition to animate; it only ever plays when a user clicks the theme toggle while viewing the page. */ body, nav, .analyzer-input-wrap, .file-preview-item, .attach-btn, .checkout-status, .upgrade-success-banner, .theme-toggle-btn { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.05rem; line-height: 1.9; letter-spacing: 0.01em; background-color: var(--bg-color); color: var(--text-primary); max-width: 1100px; margin: 0 auto; padding: 0 2rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-family: "Georgia", "Times New Roman", serif; font-weight: 400; color: var(--heading-color); } h1 { font-size: 3rem; letter-spacing: -0.5px; line-height: 1.2; } h2 { font-size: 2rem; margin-top: 4.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.6rem; } h3 { font-size: 1.1rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2.5rem; margin-bottom: 0.6rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; } p { margin-bottom: 1.6rem; font-size: 1.1rem; } ul, ol { margin-bottom: 1.5rem; padding-left: 2rem; } li { font-size: 1.1rem; margin-bottom: 0.6rem; } a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--accent-hover); } strong { color: var(--heading-color); font-weight: 600; } /* Nav */ nav { position: sticky; top: 0; background-color: var(--nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-color); display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.1rem 2rem; z-index: 100; } nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.82rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; white-space: nowrap; } nav a:hover, nav a:active { color: var(--heading-color); } /* Header */ header { padding: 4.5rem 0 2.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 3.5rem; text-align: center; } .hero { text-align: center; padding: 2rem 0; } .subtitle { color: var(--text-secondary); font-size: 1.2rem; margin-top: 0.6rem; font-style: italic; } /* ── Accessibility: visually-hidden but present for screen readers ────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Hero: name as eyebrow, product as headline, tagline as subtitle ──────── */ /* Brand takes the display size the descriptor used to have; the descriptor drops to the small accent treatment. Both are spans inside one

, so these need display:block to stack. */ .hero-title { margin: 0; letter-spacing: normal; } .hero-brand { display: block; font-size: 3rem; line-height: 1.15; letter-spacing: -0.5px; } .hero-kicker { display: block; text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.82rem; font-weight: 600; color: var(--accent-color); margin-top: 0.7rem; /* h1 inherits the display serif; the kicker reads better in the body face at this size, where serif detail turns to noise. */ font-family: inherit; } /* Retained for any page still using the old eyebrow class. */ .hero-eyebrow { text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.8rem; font-weight: 600; color: var(--accent-color); margin-bottom: 0.6rem; } .hero-lead { color: var(--text-primary); font-size: 1.12rem; line-height: 1.6; max-width: 40rem; margin: 0.9rem auto 0; } .hero-lead em { color: var(--accent-hover); font-style: italic; } /* ── Trust badge: earns the paste before the user commits sensitive text ──── */ .trust-badge { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1.6rem; padding: 0.55rem 1.1rem; border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.86rem; color: var(--text-secondary); background: var(--accent-glow); } .trust-badge > span:not([aria-hidden]) { font-weight: 500; color: var(--text-primary); } .trust-badge > span[aria-hidden] { color: var(--text-muted); } /* ── Example chips ────────────────────────────────────────────────────────── */ .example-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.1rem; } .example-chips__label { font-size: 0.82rem; color: var(--text-secondary); margin-right: 0.15rem; } .example-chip { font: inherit; font-size: 0.83rem; color: var(--text-primary); background: transparent; border: 1px solid var(--border-color); border-radius: 999px; padding: 0.32rem 0.85rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .example-chip:hover, .example-chip:focus-visible { border-color: var(--accent-color); background: var(--accent-glow); color: var(--accent-hover); outline: none; } /* ── Drag-and-drop cue inside the input box ───────────────────────────────── */ .analyzer-input-wrap { position: relative; } .drop-cue { position: absolute; top: 0.6rem; right: 0.8rem; font-size: 0.72rem; color: var(--text-muted); pointer-events: none; /* never intercept a click, paste, or drop */ opacity: 0.75; display: flex; align-items: center; gap: 0.3rem; z-index: 1; } .drop-cue__icon { font-size: 0.85rem; } /* Fade the cue out once the user starts typing, so it never fights their text. Toggled by script.js adding .has-content to the wrap. */ .analyzer-input-wrap.has-content .drop-cue { opacity: 0; } /* ── Learn card: single "Learn more" instead of a stack of links ──────────── */ .category-link--more { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--accent-color); } .category-link--more:hover { color: var(--accent-hover); } /* Pull quote */ .highlight { border-left: 3px solid var(--accent-color); padding: 0.5rem 0 0.5rem 1.8rem; font-style: italic; color: var(--text-secondary); margin: 2.5rem 0; font-size: 1.25rem; line-height: 1.8; font-family: "Georgia", "Times New Roman", serif; } /* Script box / card */ .script-box { background: var(--surface-raised); border: 1px solid var(--border-color); padding: 2.5rem; margin-bottom: 2.5rem; border-radius: 10px; transition: border-color 0.3s ease; } .script-box:hover { border-color: var(--border-light); } .script-box h3 { margin-top: 0; color: var(--heading-color); text-transform: none; letter-spacing: 0; font-family: "Georgia", "Times New Roman", serif; font-size: 1.15rem; } /* Closing statement */ .closing-statement { margin-top: 6rem; margin-bottom: 6rem; padding: 4rem 0; border-top: 1px solid var(--border-color); text-align: center; } .closing-statement p { font-size: 1.35rem; color: var(--heading-color); font-family: "Georgia", "Times New Roman", serif; line-height: 2.1; } /* Analyzer */ .analyzer { background: var(--surface-raised); border: 1px solid var(--border-color); padding: 2.5rem; border-radius: 10px; } .analyzer textarea { width: 100%; min-height: 200px; background-color: var(--surface-color); border: 1px solid var(--border-color); color: var(--text-primary); padding: 1.4rem; font-family: inherit; font-size: 1.05rem; line-height: 1.8; border-radius: 8px; resize: vertical; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .analyzer textarea::placeholder { color: var(--text-muted); } .analyzer textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); } /* Fraud grid */ .fraud-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; } .card.script-box { margin-bottom: 0; display: flex; flex-direction: column; } .card p { font-size: 0.97rem; color: var(--text-secondary); flex-grow: 1; margin-bottom: 1.4rem; line-height: 1.7; } .category-link { color: var(--accent-color); text-decoration: none; font-weight: 600; display: block; margin-bottom: 0.35rem; font-size: 0.92rem; transition: color 0.3s ease, padding-left 0.3s ease; } .category-link:hover { color: var(--accent-hover); padding-left: 4px; } /* Button */ .submit-btn { background-color: var(--accent-color); color: var(--heading-color); border: none; padding: 1rem 2.5rem; font-size: 1rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; align-self: flex-start; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.3px; } .submit-btn:hover { background-color: var(--accent-hover); transform: translateY(-1px); } .submit-btn:active { transform: translateY(0); } .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Feedback form */ .feedback-form-container { margin-top: 4rem; padding: 3rem; background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 10px; text-align: left; } .feedback-form-container h3 { color: var(--heading-color); margin-top: 0; margin-bottom: 1rem; text-transform: none; letter-spacing: 0; font-family: "Georgia", "Times New Roman", serif; font-size: 1.15rem; } .feedback-form-container p { font-size: 1rem; color: var(--text-secondary); margin-bottom: 2rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.7; } .trauma-form { display: flex; flex-direction: column; gap: 1.4rem; } .trauma-form label { font-weight: 600; color: var(--text-primary); font-size: 0.88rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; } .trauma-form textarea, .trauma-form input[type="email"], .trauma-form input[type="text"] { width: 100%; background-color: var(--surface-color); border: 1px solid var(--border-color); color: var(--text-primary); padding: 1rem 1.2rem; font-family: inherit; font-size: 1rem; line-height: 1.7; border-radius: 8px; resize: vertical; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .trauma-form textarea::placeholder, .trauma-form input::placeholder { color: var(--text-muted); } .trauma-form textarea:focus, .trauma-form input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); } /* Select — dark theme with custom chevron in accent colour */ .trauma-form select { width: 100%; background-color: var(--surface-color); border: 1px solid var(--border-color); color: var(--text-primary); padding: 1rem 2.8rem 1rem 1.2rem; font-family: inherit; font-size: 1rem; line-height: 1.4; border-radius: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; /* Chevron SVG: accent colour #b87252, URL-encoded */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M1 1l5.5 6L12 1' stroke='%23b87252' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 13px 9px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .trauma-form select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); } /* Option elements — background follows browser rendering; set surface for browsers that respect it (Chromium-based) */ .trauma-form select option { background-color: var(--surface-raised); color: var(--text-primary); } /* Field wrapper — label stacked above its control */ .form-field { display: flex; flex-direction: column; gap: 0.55rem; } /* Optional field hint (inside label) */ .field-optional { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.82rem; } /* Story form — 2-column grid for the six dropdowns */ .story-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 0.2rem; /* gap between grid and full-width fields below */ } /* Share story section wrapper — matches the about-strip spacing rhythm */ .share-story-section { max-width: 860px; margin: 0 auto; padding: 0 0 2rem; } @media (max-width: 640px) { .story-form-grid { grid-template-columns: 1fr; } } /* Unified analyzer input — textarea + file bar in one border */ .analyzer-input-wrap { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .analyzer-input-wrap:focus-within { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); } /* Drag-over state on the whole analyzer section */ .analyzer.drag-active .analyzer-input-wrap { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); } /* Remove individual textarea border — the wrap provides it */ .analyzer-input-wrap textarea { border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Character counter — bottom-right beneath the textarea/file bar */ .analyzer-char-counter { text-align: right; font-size: 0.77rem; color: var(--text-muted); padding: 0.28rem 0.5rem 0; transition: color 0.2s; user-select: none; } .analyzer-char-counter.near-limit { color: var(--accent-color); } .analyzer-char-counter.at-limit { color: var(--color-danger); font-weight: 600; } /* The attach/file bar below the textarea. The selector line for this rule was missing (a pre-existing bug — the declarations were orphaned after a blank line, so the bar rendered completely unstyled and an extra stray `}` unbalanced the stylesheet). Restored so the bar gets its intended flex layout, padding, and top border — this also contributes to the attach control finally matching the rest of the UI. */ .analyzer-file-bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem; background: var(--surface-color); border-top: 1px solid var(--border-color); flex-wrap: wrap; min-height: 44px; } .attach-btn { /* Secondary-action styling — deliberately NOT a full accent fill (that's reserved for the primary Analyze button), but aligned to the same theme: matches --border-light, the 8px radius used by .submit-btn, a subtle elevated background so it reads as a real button rather than plain text, and an accent-tinted hover consistent with the rest of the UI. */ display: inline-flex; align-items: center; gap: 0.4rem; background-color: var(--surface-raised); border: 1px solid var(--border-light); color: var(--text-secondary); padding: 0.45rem 0.9rem; border-radius: 8px; font-size: 0.85rem; font-weight: 500; font-family: inherit; letter-spacing: 0.2px; cursor: pointer; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; flex-shrink: 0; } .attach-btn:hover { color: var(--accent-color); border-color: var(--accent-color); background-color: var(--accent-glow); } .attach-btn:active { transform: translateY(1px); } .attach-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } /* ── Theme toggle (Auto / Light / Dark) ────────────────────────────────── Injected into