/* Site-wide styles moved out of templates/base.html (2026-10-23) so page content starts near the top of the HTML (AI fetchers read only the first ~32-64 KB). Linked at the SAME position it was inlined, so the cascade order is unchanged. The theme-conditional rules ({% if desktop_theme %}) stay inline in base.html. */ /* ── STANDARD READABLE-TEXT UTILITIES (theme-safe, Chuck 2026-06-26) ── The recurring bug: a hardcoded grey hex (#9ca3af / #9aa3ad / #aeb8b2 …) reads fine on the DARK theme but is near-invisible on the LIGHT desktop theme's white cards. These classes resolve through the themed vars so text is ALWAYS legible in BOTH themes — use them instead of a literal grey/dark hex on any body/label/ secondary text. (color !important so they win over a stray inline color.) .t-text — primary body text (dark: #e8eaed · light: #0a0f0d) .t-muted — secondary / captions (dark: #9ca3af · light: #556665) .t-accent — green accent text (themed, darkened on light so it's legible) .t-on-card — guaranteed-readable on a var(--card) surface (alias of --text) For an input/textarea/select, set background:var(--input-bg);color:var(--text) (NOT a hardcoded dark hex) — that's the form-field equivalent, guarded by scripts/check_black_on_black_inputs.py. */ .t-text,.t-on-card{color:var(--text) !important} .t-muted{color:#4a5568 !important} /* darker gray for contrast on medium gray background */ .t-accent{color:var(--accent) !important} a{color:inherit;text-decoration:none} .container{max-width:1080px;margin:0 auto;padding:0 24px} /* NAV */ .nav{background:rgba(8,9,10,.95);backdrop-filter:blur(12px); border-bottom:1px solid var(--border);padding:0 24px; position:sticky;top:0;z-index:100;height:60px; display:flex;align-items:center;justify-content:space-between} .nav-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.5px} .nav-brand .logo-mark{width:28px;height:28px;background:var(--accent); border-radius:6px;display:flex;align-items:center;justify-content:center; color:#000;font-weight:900;font-size:13px} .nav-links{display:flex;align-items:center;gap:24px;font-size:14px} .nav-links a{color:var(--muted);transition:color .2s} /* 2026-10-07: with One-Time Brief added, labels wrapped onto two lines at ~1024px and crowded the logo. Keep each label on one line; tighten spacing on narrow desktops. */ .nav-links a{white-space:nowrap} @media (min-width:769px) and (max-width:1199px){ .nav-links{gap:14px;font-size:13px} } @media (min-width:769px) and (max-width:959px){ .nav-links a[href$="/use-cases"], .nav-links a[href$="/problems-we-solve"]{display:none} } .nav-links a:hover{color:var(--text)} .nav-links .btn-nav{background:var(--accent);color:#000;padding:7px 16px; border-radius:6px;font-weight:700;font-size:13px} .nav-links .btn-nav:hover{background:#00e07a} /* ── Mobile hamburger menu ───────────────────────────────────── Below 768px we hide the inline nav links and surface them inside a slide-down panel triggered by a hamburger button. Desktop (≥768px) is unchanged: full inline nav, no hamburger. The button itself is hidden on desktop via `display:none` then flipped to `flex` in the mobile media query below. */ .nav-hamburger{display:none;background:transparent;border:1px solid var(--border); border-radius:8px;width:40px;height:40px;align-items:center;justify-content:center; cursor:pointer;padding:0;margin-inline-start:auto;flex-shrink:0} .nav-hamburger span{display:block;width:18px;height:2px;background:var(--text); position:relative;transition:transform .25s ease, opacity .15s ease} .nav-hamburger span::before,.nav-hamburger span::after{ content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text); transition:transform .25s ease, top .25s ease} .nav-hamburger span::before{top:-6px} .nav-hamburger span::after{top:6px} /* "X" animation when open */ .nav-hamburger.open span{background:transparent} .nav-hamburger.open span::before{top:0;transform:rotate(45deg)} .nav-hamburger.open span::after{top:0;transform:rotate(-45deg)} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px; border-radius:8px;font-size:14px;font-weight:600;cursor:pointer; border:none;transition:all .2s;text-decoration:none} .btn-primary{background:var(--accent);color:#000} .btn-primary:hover{background:#00e07a;transform:translateY(-1px)} .btn-secondary{background:#2a2b2d;color:var(--text);border:1px solid #3a3b3d} .btn-secondary:hover{background:#323334;border-color:var(--accent);color:var(--accent)} .btn-danger{background:#ff3b3b22;color:var(--red);border:1px solid #ff3b3b44} .btn-lg{padding:14px 32px;font-size:16px;border-radius:10px} .btn-sm{padding:7px 14px;font-size:13px} /* .btn-glow — opt-in pulsing halo for FUNNEL/CONVERSION CTAs (trial, register, pricing, unlock, demo). Draws the eye to the conversion path. Applied only to intentional funnel buttons, NOT admin/form/utility buttons. Pauses on hover (so it's calm while the cursor is on it) and honors prefers-reduced-motion. Green to match --accent (the primary CTA color). */ @keyframes btnGlowPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,255,136,.55), 0 0 12px 2px rgba(0,255,136,.40); } 50% { box-shadow:0 0 0 6px rgba(0,255,136,0), 0 0 24px 8px rgba(0,255,136,.65); } } .btn-glow{ animation:btnGlowPulse 1.8s ease-in-out infinite; } .btn-glow:hover{ animation:none; box-shadow:0 0 18px 5px rgba(0,255,136,.6); } @media (prefers-reduced-motion: reduce){ .btn-glow{ animation:none; } } /* Collapsible service-matrix (Chuck 2026-07-03) — the dense comparison grid is collapsed by default on briefs so the intel above lands first. Hide the native disclosure triangle (we render our own ▼) and rotate ours when open. Shared by /demo + /plan-check. */ .sf-matrix-collapse>summary{ list-style:none; } .sf-matrix-collapse>summary::-webkit-details-marker{ display:none; } .sf-matrix-collapse>summary::marker{ content:''; } .sf-matrix-collapse[open]>summary span:last-child{ transform:rotate(180deg); display:inline-block; } /* The EXPANDED grid uses a pastel background (Chuck 2026-07-03) — force dark, high-contrast text + light borders inside it, since the grid's inline styles reference dark-theme vars (var(--border)/--muted/--accent2) that vanish on a light background. */ .sf-matrix-grid{ color:#1a2233; } .sf-matrix-grid strong, .sf-matrix-grid td, .sf-matrix-grid div{ color:#1a2233; } .sf-matrix-grid th{ border-bottom-color:#7c3aed !important; color:#5b2ecc !important; } .sf-matrix-grid td{ border-bottom-color:#e2e6f0 !important; } /* Status marks keep their own inline colors (green ✓ / red ✗ / grey ?) — the darker green/red below read fine on the pastel bg. Muted helper text → slate. */ .sf-matrix-grid span[style*="00c853"], .sf-matrix-grid span[style*="16a34a"]{ color:#15803d !important; } .sf-matrix-grid span[style*="ff5252"], .sf-matrix-grid span[style*="dc2626"]{ color:#dc2626 !important; } /* CLICK FEEDBACK — gives the user instant visual confirmation that a click registered, even when the handler takes a moment to respond. Two layers: native :active for buttons that use .btn, and a global JS-added .clicked class for every other button/input/anchor so even inline-styled controls flash. Respects prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .btn:active{transform:scale(.96) translateY(0);transition:transform .05s ease-out} .btn-primary:active{filter:brightness(.92)} .btn-secondary:active{background:var(--accent)15} .clicked{animation:mibClickPulse .22s ease-out} @keyframes mibClickPulse{ 0% {transform:scale(1)} 45% {transform:scale(.94);filter:brightness(.85)} 100% {transform:scale(1);filter:none} } } /* Visually disabled state while a button is in its busy phase. */ .btn-busy{opacity:.7;pointer-events:none;position:relative} .btn-busy::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px; margin-top:-5px;border:2px solid currentColor;border-right-color:transparent; border-radius:50%;animation:mibSpin .7s linear infinite;opacity:.85} @keyframes mibSpin{to{transform:rotate(360deg)}} /* CARDS */ .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px} .card-glow{box-shadow:0 0 30px rgba(0,255,136,.05)} /* FORMS */ .field{margin-bottom:18px} label{display:block;font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.5px;color:var(--muted);margin-bottom:6px} input[type=text],input[type=email],input[type=password],input[type=url], select,textarea{ width:100%;padding:10px 14px;background:var(--input-bg);border:1px solid var(--border); border-radius:8px;font-size:14px;color:var(--text);transition:border-color .2s} /* 🔴 iOS AUTO-ZOOM (bug hunt 2026-08-16). iOS Safari FORCE-ZOOMS the viewport when a focused input renders below 16px — and it does NOT zoom back out on blur. At 14px every text field on the site tripped it: tap "Email" on /register and the page punches in ~1.14x, shifts sideways, and leaves the submit button off-screen mid-form. It fires on the FIRST field, and one rule feeds /register, /login and /free-competitor-finder at once. Verified there was NO 16px override anywhere in this file — the only matches were buttons and emoji. This is the leading mechanical explanation for 13 Meta ad clicks that all bounced in 0-7s from mobile in-app browsers with zero progressions. 16px is the exact WebKit threshold, so this is the minimum change that stops it. MOBILE-ONLY and additive — desktop keeps 14px. */ @media (max-width:720px){ input[type=text],input[type=email],input[type=password],input[type=url], input[type=tel],input[type=search],input[type=number], select,textarea{font-size:16px} } input:focus,select:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,255,136,.1)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* FLASH */ .flash{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px; display:flex;align-items:center;gap:10px} .flash.success{background:#00ff8811;border:1px solid #00ff8833;color:var(--accent)} /* 2026-07-27 (Chuck: "these errors are unreadable due to contrast"): .flash.error hardcoded #ff6b6b, a DARK-theme red. Its siblings above/below correctly use var(--accent)/var(--accent2), which the light theme redefines — this one was missed. Measured against the light-theme page background (--black #f5f3ec): #ff6b6b -> 2.50:1 FAIL (WCAG AA text needs 4.5:1) --red -> 6.47:1 PASS The light theme already defines --red:#a8231f ("oxidized stop-press red") for exactly this; it just was not being used. var(--red) is #ff3b3b on dark (7.4:1, still passes) so the dark theme is unchanged in practice. Hit live on the register form, where server-side password errors ("At least one uppercase letter required", auth.py:262) flash as category 'error' — the one place a user MUST be able to read the message to proceed. */ .flash.error{background:#ff3b3b11;border:1px solid #ff3b3b33;color:var(--red)} .flash.info{background:#00c4ff11;border:1px solid #00c4ff33;color:var(--accent2)} /* BADGES */ .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px; border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px} .badge-high{background:#ff3b3b22;color:var(--red);border:1px solid #ff3b3b44} .badge-medium{background:#ffb80022;color:var(--yellow);border:1px solid #ffb80044} .badge-low{background:#00ff8822;color:var(--accent);border:1px solid #00ff8844} .badge-website{background:#00c4ff22;color:var(--accent2);border:1px solid #00c4ff44} .badge-news{background:#a855f722;color:#a855f7;border:1px solid #a855f744} .badge-bbb{background:#f9731622;color:#f97316;border:1px solid #f9731644} .badge-trend{background:#22d3ee22;color:#22d3ee;border:1px solid #22d3ee44} .badge-reddit{background:#ff450022;color:#ff4500;border:1px solid #ff450044} /* DIVIDER */ .divider{height:1px;background:var(--border);margin:24px 0} /* SECTION */ .section{padding:80px 0} /* PASSWORD STRENGTH */ .pw-rules{font-size:12px;color:var(--muted);margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px} .pw-rule{display:flex;align-items:center;gap:6px} .pw-rule.ok{color:var(--accent)} .pw-rule.fail{color:var(--muted)} /* GRID OVERLAY */ .grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(0,255,136,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(0,255,136,.03) 1px,transparent 1px); background-size:40px 40px} /* TOAST */ #toast{display:none;position:fixed;bottom:24px;right:24px; background:var(--card);border:1px solid var(--accent); color:var(--text);padding:14px 20px;border-radius:10px; font-size:14px;z-index:999;box-shadow:0 0 20px rgba(0,255,136,.2)} /* SCROLLBAR */ ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--black)} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} @media(max-width:600px){ .field-row{grid-template-columns:1fr} /* Funnel-study fix (2026-07-06): the 4 password-rule chips squeezed into 2 tight columns at ≤360px. Stack to 1 column on phones so they're readable. */ .pw-rules{grid-template-columns:1fr} .showcase-grid{grid-template-columns:1fr !important} } /* 2026-08-01 (Chuck): hide an element on DESKTOP while leaving it in the mobile hamburger. Used by the nav "Free Demo" link, which duplicates the "▸ See a Free 60-sec demo" chip on desktop but is the ONLY /demo link in the mobile menu (the chip is .hide-mobile). Overridden back to block inside the ≤768px media query below. */ .desktop-hide{display:none} /* ── Mobile hamburger breakpoint (≤768px) ────────────────────── Shows the hamburger button + repositions .nav-links as a slide-down panel anchored to the bottom of the .nav bar. The panel is initially hidden (max-height:0); .nav-links.open expands it. .hide-mobile no longer hides anything inside the panel — every link is reachable via the hamburger. */ @media(max-width:768px){ .nav-hamburger{display:flex} /* 2026-08-02 (Chuck): the "▸ See a Free 60-sec demo" chip sits OUTSIDE .nav-links (it's a sibling of the panel, in the top bar next to the logo). It carries the legacy `.hide-mobile` class — but that class has NO display:none rule anywhere in the codebase, so it hides nothing and the chip rendered on phones at its desktop size: butting against the MyIntelBrief wordmark and running past the right edge. It's a desktop affordance; on mobile the hamburger already carries a "Free Demo" link (the .desktop-hide one below), so the chip is redundant here. Scoped to :not(.nav-links *) so ONLY the top-bar chip is affected. */ .nav-demo-nudge{display:none !important} /* Override the legacy `.hide-mobile` hider — inside the hamburger panel ALL links should be reachable. */ .nav-links .hide-mobile{display:block} /* 2026-08-01: .desktop-hide is hidden on desktop (rule below the media query) but must REAPPEAR in the hamburger — it is the only /demo link there. Declared after the rule above so it wins. */ .nav-links .desktop-hide{display:block} /* 2026-10-09: a backdrop-filter on .nav AND on the .nav-links panel inside it let the page text show through the open menu (Chromium; page text read over the links). The bar is already 95% opaque, so phones lose nothing by dropping its blur. */ .nav{backdrop-filter:none;-webkit-backdrop-filter:none} .nav-links{ position:absolute; top:60px; /* directly below the 60px-tall .nav bar */ right:0;left:0; background:rgba(8,9,10,.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch; gap:0; padding:0; max-height:0; overflow:hidden; transition:max-height .28s ease, padding .2s ease; } .nav-links.open{ max-height:80vh; overflow-y:auto; padding:8px 0 16px; box-shadow:0 12px 24px rgba(0,0,0,.4); } .nav-links a:not(.btn-nav){color:#d1d5db} /* bug hunt 10/09: --muted on the dark drawer was ~3.3:1 */ .nav-links a, .nav-links form{ display:block; padding:12px 20px; font-size:15px; border-bottom:1px solid #1a1b1d; } .nav-links a:last-of-type{border-bottom:none} .nav-links .btn-nav{ margin:8px 16px 0; text-align:center; padding:11px 16px; font-size:14px; } .nav-links form button{width:100%;text-align:left;font-size:15px !important} /* The language picker is `position:relative` with an absolute dropdown — inside the mobile panel it should sit inline like the other links. */ .nav-links #lang-picker{padding:8px 20px;border-bottom:1px solid #1a1b1d} .nav-links #lang-picker > button{padding:0;height:auto;width:auto} } /* === Session 71fw Tier 2: targeted RTL overrides === For elements where logical properties (Task 21) don't fully handle the visual flip. Add new selectors here as RTL QA surfaces issues. These selectors appear in ALL pages; they only activate when the element carries dir="rtl" (i.e. /ar and /he routes). */ [dir="rtl"] #lang-menu { /* Language picker dropdown: inline right:0 anchors it to the visual-right in LTR. For RTL we want it anchored to the visual-left (inline-start). !important required because the element uses inline style="right:0". */ right: auto !important; left: 0 !important; } [dir="rtl"] .btn-busy::after { /* Loading spinner: physical right:10px replaced with logical inset-inline-end */ right: auto; inset-inline-end: 10px; } /* ── SIGNUP / CHECKOUT PAGE TONE (Chuck 2026-08-15) ───────────────────────── Chuck asked for manila, then "a mid-yellow", then "a little darker but yellow" → #e9c944. Then: "i think if i'm already signed in it changes to checkout/starter" and "so both should get the same background color treatment". He was right — /signup/ is the ANONYMOUS page (signup_combined.html) and /checkout/ is @login_required (checkout_embedded.html). The rule lived inside the signup template, so a signed-in visitor saw none of it. Defined ONCE here; both templates just add class="signup-manila". ⚠️ Contrast checked, not eyeballed. Against #e9c944: headline/body #1a2230 9.81:1 PASS AA muted small print #4b5563 4.64:1 PASS AA (was #6b7280 = 3.57:1, FAIL) green eyebrow #045634 5.41:1 PASS AA (was #067a4a = 3.98:1, FAIL) The muted line is the "7-day free trial for new subscribers only…" small print — legally meaningful copy, so it cannot be borderline. ⭐ #e9c944 is the practical FLOOR: one step darker (#e0bf3a) drops that small print to 4.20:1, under AA. Darker than this requires darkening the muted colour again — do both or neither. Selectors are DESCENDANT-based (not the signup page's `> div > div >` chain) because the two templates have different DOM shapes; scoping stays tight via .signup-manila and the inline-style attribute match, so only text sitting DIRECTLY on the yellow is affected — anything on a white .card is untouched. */ /* "What you get" card on /checkout — teal (Chuck 2026-08-15). Light theme only: in dark mode a pale teal panel would glare, so it keeps var(--card) there. Heading darkened to #14564a because the default muted grey scores 3.95:1 on this tint (FAIL); #14564a is 6.98:1. Body text is 13.05:1 unchanged. */ /* 🔴 2026-08-15 FIX — Chuck reported "no teal yet" three times and he was right. My first version fell back to var(--card) in dark mode, i.e. NO teal at all. And the guard `:root:not([data-theme="light"])` matches whenever data-theme is UNSET — which is the default for every visitor who has never toggled the theme — so on any browser preferring dark the card resolved to rgb(251,250,245), no teal. Proven: prefers=light → rgb(215,237,232) teal; prefers=dark → rgb(251,250,245). Now BOTH schemes get a teal, just tuned for each. Dark values checked against the dark theme's own text: body #e8e6e3 9.76:1, heading #7fd8c6 7.26:1 — both AA. */ .wyg-card { background: #d7ede8; border-color: #9ccfc3 !important; } .wyg-head { color: #14564a !important; } /* 🔴 2026-08-15 (Chuck: "now i see teal in the card but all the text is not readable"). The card's