/* ============================================================ REDLINE — marketing.css (Phase 7a) ------------------------------------------------------------ The public marketing site's OWN styles — nav, hero, the section layouts, the browser-frame screenshot mock, the footer. Loaded ALONGSIDE styles.css (see server/marketingViews.js), never instead of it: every colour, spacing, radius, and shadow below is one of the SAME custom properties (--red, --sp-6, --radius-lg, and so on) already defined in styles.css's :root — this file only adds the LAYOUT/COMPONENTS the marketing site needs that the app never did (a sticky nav bar, a hero, a pricing card), the exact same "one shared token set, extended, never forked" rule the rest of this codebase already follows for everything else. Phase 27b — the marketing site used to be deliberately LIGHT-only (every page hardcoded , on purpose, with no toggle at all). That decision is reversed here, at the product owner's direct instruction: the marketing site now follows the exact same dark-is-default convention, the same "redline_theme" localStorage key, and the same pre-paint-script-avoids-a-flash approach the signed- in app already uses (see marketingViews.js's marketingLayout() and navHtml(), and public/js/marketing.js's own theme-toggle handler). Every colour below was already one of styles.css's shared tokens, so this mostly worked for free the moment the hardcoded light attribute came off — the few genuinely hardcoded, non-token colours that didn't are called out at their own rule, below (.mkt-nav's translucent background, and .mkt-money's deliberate fixed dark band). Existing product screenshots (browserFrame()) are real screenshots of the real app in whatever theme it happened to be in when captured — this codebase doesn't fabricate a second "dark" version of any of them, the same "real screenshots or nothing" rule screenshots.md already states elsewhere. A screenshot captured in one theme will look slightly inconsistent with the surrounding page when that page is viewed in the OTHER theme — a known, honest, accepted limitation, not a bug to chase, since only the real product can currently generate a real screenshot. ============================================================ */ /* ---------- shell ---------- */ .mkt-page { overflow-x: hidden; } .mkt-container { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); } /* ---------- nav ---------- */ .mkt-nav { position: sticky; top: 0; z-index: 50; /* Phase 27b — this was a hardcoded rgba(255,255,255,0.85) back when the marketing site was light-only; left as-is, it would have put near-white nav TEXT (var(--text) in the dark theme) on a near- white translucent bar — a real, found contrast failure while auditing this file against the dark token set, not a hypothetical one. A plain var(--bg-elevated) would lose the glassy blur-over- scrolled-content effect, so instead: a dark-tinted translucent default (matching this theme's own --bg, #0b0d10) with the original light-tinted value moved into an explicit light-theme override just below. */ background: rgba(11, 13, 16, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } :root[data-theme="light"] .mkt-nav { background: rgba(255, 255, 255, 0.85); } .mkt-nav-inner { max-width: 1160px; margin: 0 auto; padding: 14px var(--sp-6); display: flex; align-items: center; gap: var(--sp-7); } .mkt-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); margin-right: auto; } .mkt-logo svg { width: 26px; height: 26px; } .mkt-nav-links { display: flex; align-items: center; gap: var(--sp-6); } .mkt-nav-link { font-size: 14px; font-weight: 500; color: var(--text-muted); } .mkt-nav-link:hover { color: var(--text); } .mkt-nav-actions { display: flex; align-items: center; gap: var(--sp-4); } /* Theme toggle (Phase 27b) — .theme-toggle/.knob themselves are styles.css's shared track-and-pill styling, reused verbatim (see marketingViews.js's themeToggleHtml()). The one thing genuinely new here: the app's own version (chrome.js) is inserted into the DOM by JS that already knows the real stored theme, so it only ever needs ONE icon in its markup; this button is server-rendered before the server can know that, so BOTH icons are always in the DOM and pure CSS shows only the one that matches the current data-theme attribute — correct from the very first frame, no JS-driven swap, no flash. */ .mkt-theme-icon { display: none; align-items: center; justify-content: center; } .mkt-theme-icon-moon { display: flex; } :root[data-theme="light"] .mkt-theme-icon-moon { display: none; } :root[data-theme="light"] .mkt-theme-icon-sun { display: flex; } /* Language toggle (Phase 29a) — deliberately a plain, compact text/pill link rather than a track-and-knob switch, so it never gets mistaken for a second half of the theme toggle sitting right next to it (see marketingViews.js's langToggleHtml()/themeToggleHtml() — both are rendered together in .mkt-nav-actions/.mkt-nav-mobile-actions). Fixed height matches .theme-toggle's 30px so the two sit flush in a row. */ .mkt-lang-toggle { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; } .mkt-lang-toggle:hover { color: var(--text); border-color: var(--border-strong, var(--border)); } .mkt-nav-toggle { display: none; background: none; border: none; color: var(--text); padding: 6px; } .mkt-nav-toggle svg { width: 22px; height: 22px; } .mkt-nav-mobile { display: none; } @media (max-width: 860px) { .mkt-nav-links, .mkt-nav-actions { display: none; } .mkt-nav-toggle { display: block; } .mkt-nav-mobile { display: none; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-6); border-top: 1px solid var(--border-soft); background: var(--bg-elevated); } .mkt-nav-mobile.open { display: flex; } .mkt-nav-mobile .mkt-nav-link { font-size: 16px; } .mkt-nav-mobile-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); } .mkt-nav-mobile-actions .btn { width: 100%; } .mkt-nav-mobile-actions .mkt-lang-toggle, .mkt-nav-mobile-actions .theme-toggle { align-self: flex-start; } } /* ---------- shared section rhythm ---------- */ .mkt-section { max-width: 1160px; margin: 0 auto; padding: var(--sp-10) var(--sp-6); } .mkt-section-narrow { max-width: 720px; } .mkt-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-8); } .mkt-section-head h2 { font-size: 32px; margin-bottom: var(--sp-3); } .mkt-page-head { margin-bottom: var(--sp-7); } .mkt-page-head h1 { font-size: 36px; margin-bottom: var(--sp-3); } .mkt-inline-cta { text-align: center; margin-top: var(--sp-8); } .mkt-btn-lg { padding: 15px 26px; font-size: 16px; border-radius: var(--radius-md); } /* ---------- browser-frame screenshot mock ---------- */ .mkt-browser-frame { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .mkt-browser-chrome { display: flex; gap: 6px; padding: 10px 14px; background: #e4e4e0; border-bottom: 1px solid var(--border); } .mkt-browser-chrome span { width: 10px; height: 10px; border-radius: 50%; background: #c7c7c2; } .mkt-browser-chrome span:nth-child(1) { background: var(--red); opacity: 0.55; } .mkt-browser-chrome span:nth-child(2) { background: var(--amber); opacity: 0.65; } .mkt-browser-chrome span:nth-child(3) { background: var(--green); opacity: 0.55; } .mkt-browser-frame img { display: block; width: 100%; height: auto; } /* ---------- hero ---------- */ .mkt-hero { padding: var(--sp-9) 0 var(--sp-8); } .mkt-hero-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-9); align-items: center; } .mkt-hero-copy h1 { font-size: 56px; line-height: 1.02; margin-bottom: var(--sp-5); } .mkt-hero-sub { font-size: 18px; line-height: 1.55; color: var(--text-muted); margin-bottom: var(--sp-7); max-width: 46ch; } .mkt-hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .mkt-hero-actions .btn { padding: 15px 26px; font-size: 16px; } .mkt-hero-frame { transform: rotate(-1.2deg); transition: transform var(--transition-base); } .mkt-hero-frame:hover { transform: rotate(0deg); } @media (max-width: 960px) { .mkt-hero-inner { grid-template-columns: 1fr; } .mkt-hero-copy h1 { font-size: 42px; } .mkt-hero-frame { transform: none; } } /* ---------- three pains ---------- */ .mkt-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } .mkt-pain-card { text-align: center; } .mkt-pain-card h3 { font-size: 19px; margin: var(--sp-4) 0 var(--sp-2); } .mkt-pain-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; } .mkt-icon-badge { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--red-dim); color: var(--red); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .mkt-icon-badge svg { width: 24px; height: 24px; } /* ---------- how it works ---------- */ .mkt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); align-items: start; } .mkt-step { text-align: center; } .mkt-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4); } .mkt-step-frame { margin-bottom: var(--sp-4); } .mkt-step p { font-size: 15px; font-weight: 500; max-width: 30ch; margin: 0 auto; } /* ---------- feature strip ---------- */ .mkt-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 9 items — a clean 3x3, see FEATURE_STRIP in server/marketing.js */ gap: var(--sp-3); } .mkt-feature-item { display: flex; align-items: center; gap: 10px; padding: var(--sp-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; color: var(--text); transition: all var(--transition-fast); } .mkt-feature-item svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; } .mkt-feature-item:hover { border-color: var(--border); background: var(--bg-hover); } @media (max-width: 900px) { .mkt-feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mkt-feature-grid { grid-template-columns: 1fr; } } /* ---------- the money section — the ONE dark band, see top comment ---------- Phase 27b decision: now that the whole marketing site can go dark, this band's hardcoded colours are LEFT UNCHANGED, deliberately, in both themes, rather than switched to var(--bg)/var(--text)/etc. Two reasons: (1) its whole point (per moneySection() in server/ marketing.js) is to visually announce "look, real numbers, real screenshot" by standing out against the page around it — in the LIGHT theme that contrast is the entire reason this band exists, and folding it into the light tokens would erase it; (2) #0b0d10/#f4f5f6/ #9aa1ac/#262b33 below are — not a coincidence — the EXACT same hex values styles.css's own dark theme uses for --bg/--text/--text-muted/ --border, so in the DARK theme this band already reads as a completely seamless, zero-contrast-risk part of the page; it was accidentally previewing the eventual dark theme since Phase 7a. One band, one fixed look, correct (never low-contrast, never invisible) in both themes with no extra rule needed. */ .mkt-money { background: #0b0d10; color: #f4f5f6; padding: var(--sp-10) 0; } .mkt-money-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-8); align-items: center; } .mkt-money-copy h2 { font-size: 32px; margin-bottom: var(--sp-4); color: #fff; } .mkt-money-copy p { font-size: 16px; line-height: 1.6; color: #9aa1ac; } .mkt-money .mkt-browser-frame { border-color: #262b33; } @media (max-width: 960px) { .mkt-money-inner { grid-template-columns: 1fr; } } /* ---------- feature showcases — light-themed, reusable ---------- Same copy+screenshot grid proportions as .mkt-money (0.8fr / 1.2fr), but on the page's normal light background — .mkt-money stays the ONE deliberate dark band (see this file's own top comment); these are for the two feature stories that came after that rule was written and shouldn't dilute it by copying its dark treatment. .mkt-showcase-reverse flips which side the screenshot sits on, via `order` rather than reversed DOM, so a screen reader still gets copy-then-image regardless of the visual arrangement. */ .mkt-showcase { padding: var(--sp-9) 0; } .mkt-showcase-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-8); align-items: center; } .mkt-showcase-copy { order: 1; } .mkt-showcase-media { order: 2; } .mkt-showcase-reverse .mkt-showcase-inner { grid-template-columns: 1.2fr 0.8fr; } .mkt-showcase-reverse .mkt-showcase-copy { order: 2; } .mkt-showcase-reverse .mkt-showcase-media { order: 1; } .mkt-showcase-copy h2 { font-size: 32px; margin-bottom: var(--sp-4); } .mkt-showcase-copy p { font-size: 16px; line-height: 1.6; color: var(--text-muted); } .mkt-showcase-copy .mkt-roadmap-note { margin-top: var(--sp-5); padding: 14px 16px; background: var(--amber-dim); border: 1px solid var(--amber-border); border-radius: var(--radius-md); font-size: 14px; line-height: 1.55; color: var(--text-muted); } .mkt-showcase-copy .mkt-roadmap-note strong { color: var(--text); } @media (max-width: 960px) { .mkt-showcase-inner { grid-template-columns: 1fr; } .mkt-showcase-copy, .mkt-showcase-media, .mkt-showcase-reverse .mkt-showcase-copy, .mkt-showcase-reverse .mkt-showcase-media { order: initial; } } /* ---------- trust ---------- */ .mkt-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } .mkt-trust-item { text-align: center; } .mkt-trust-item p { margin-top: var(--sp-4); font-size: 14.5px; font-weight: 500; color: var(--text-muted); max-width: 26ch; margin-left: auto; margin-right: auto; } /* ---------- pricing ---------- */ .mkt-pricing-teaser { display: flex; justify-content: center; } .mkt-pricing-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-8); width: 100%; max-width: 380px; text-align: center; } .mkt-pricing-plan { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red); margin-bottom: var(--sp-3); } .mkt-pricing-amount { font-family: var(--font-display); font-size: 42px; font-weight: 700; margin-bottom: var(--sp-6); } .mkt-pricing-amount span { display: block; font-size: 13px; font-weight: 500; color: var(--text-faint); font-family: var(--font-body); margin-top: 4px; } .mkt-pricing-list { list-style: none; text-align: left; margin-bottom: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); } .mkt-pricing-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); } .mkt-pricing-list svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; } .mkt-pricing-more { text-align: center; margin-top: var(--sp-6); font-size: 14px; } .mkt-pricing-more a { color: var(--red); font-weight: 600; } .mkt-pricing-includes { max-width: 560px; margin: var(--sp-9) auto 0; text-align: center; } .mkt-pricing-includes h2 { text-align: center; } /* ---------- FAQ accordion (Pricing page) ---------- Content stays in the DOM either way — a collapsed answer is hidden with max-height, not display:none, so the real text is still there for a search engine (or a visitor with JS disabled, who just sees every answer already open — see marketing.js's progressive- enhancement comment). */ .mkt-faq { max-width: 640px; margin: 0 auto; } .mkt-faq-item { border-bottom: 1px solid var(--border-soft); } .mkt-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; background: none; border: none; text-align: left; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text); } .mkt-faq-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint); transition: transform var(--transition-base); } .mkt-faq-item.open .mkt-faq-chevron { transform: rotate(180deg); } .mkt-faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); } .mkt-faq-item.open .mkt-faq-answer { max-height: 240px; } .mkt-faq-answer p { padding-bottom: var(--sp-5); font-size: 14.5px; color: var(--text-muted); line-height: 1.6; } /* No-JS fallback: every answer already open, chevron hidden — see marketing.js's own comment on why this matters more here than anywhere else on the site (this is genuinely useful CONTENT, not just a nice-to-have interaction). */ .no-js .mkt-faq-answer { max-height: none; } .no-js .mkt-faq-chevron { display: none; } /* ---------- /security page: grouped accordion (Phase 27a) ---------- Same trigger/chevron/JS as the Pricing FAQ above — public/js/ marketing.js already toggles ANY .mkt-faq-item, no JS change needed here. Each group gets a card-style container (same background/ border/shadow tokens as .mkt-pricing-card) since a header here collapses a whole section — several .mkt-principle cards, or a run of Q&A pairs — not one short paragraph, plus a taller max-height once open to fit that. The .no-js rule just above already targets .mkt-faq-answer/.mkt-faq-chevron generically, so it applies here unchanged: every group is real, fully-open, readable content with no JavaScript at all. */ .mkt-security-accordion .mkt-faq-item { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4); padding: 0 var(--sp-6); } .mkt-security-accordion .mkt-faq-question { padding: var(--sp-5) 0; } .mkt-accordion-heading { display: flex; align-items: center; gap: var(--sp-4); text-align: left; } .mkt-accordion-heading .mkt-icon-badge { width: 40px; height: 40px; flex-shrink: 0; } .mkt-accordion-heading .mkt-icon-badge svg { width: 20px; height: 20px; } .mkt-accordion-body { padding-bottom: var(--sp-6); } .mkt-accordion-body .mkt-principles { margin-bottom: var(--sp-6); } .mkt-accordion-body .mkt-principles:last-child { margin-bottom: 0; } .mkt-security-accordion .mkt-faq-item.open .mkt-faq-answer { max-height: 4000px; } @media (max-width: 640px) { .mkt-security-accordion .mkt-faq-item { padding: 0 var(--sp-4); } } /* ---------- "Replaces:" line on the Features page ---------- */ .mkt-replaces { margin-top: var(--sp-4); font-size: 13.5px; color: var(--text-faint); } .mkt-replaces strong { color: var(--text-muted); } /* ---------- About page ---------- */ .mkt-placeholder-note { background: var(--amber-dim); border: 1px solid var(--amber-border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); font-size: 13px; color: var(--text-muted); margin-bottom: var(--sp-5); } .mkt-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .mkt-principle h3 { font-size: 16px; margin-bottom: var(--sp-2); } .mkt-principle p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; } /* ---------- Contact form ---------- */ .mkt-contact-form { max-width: 480px; } .mkt-contact-form .field { margin-bottom: var(--sp-4); } .mkt-form-success, .mkt-form-error { border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); font-size: 13.5px; margin-bottom: var(--sp-5); } .mkt-form-success { background: var(--green-dim); border: 1px solid var(--green-border); color: var(--text); } .mkt-form-error { background: var(--red-dim); border: 1px solid var(--red-border); color: var(--text); } /* A honeypot field — invisible and unreachable by a real visitor (off-screen, not display:none — some bots skip fields hidden that obviously; positioning off-screen while leaving it "visible" to a naive check is the more effective version of this trick), never reachable by keyboard (tabindex="-1" in the HTML does the rest). See server/routes/publicEnquiries.js for the server-side half. */ .mkt-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Privacy / Terms draft banner ---------- */ .mkt-draft-banner { background: var(--red-dim); border: 1px solid var(--red-border); border-radius: var(--radius-md); padding: var(--sp-4); font-size: 13px; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--sp-7); } /* ---------- final CTA band ---------- */ .mkt-final-cta { text-align: center; padding: var(--sp-10) var(--sp-6); background: var(--bg-inset); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .mkt-final-cta h2 { font-size: 32px; margin-bottom: var(--sp-6); } /* ---------- features / about / contact page detail blocks ---------- */ .mkt-feature-detail { padding: var(--sp-6) 0; border-bottom: 1px solid var(--border-soft); scroll-margin-top: 90px; /* so a deep-link anchor doesn't land underneath the sticky nav */ } .mkt-feature-detail:last-of-type { border-bottom: none; } .mkt-feature-detail h2 { font-size: 19px; margin-bottom: var(--sp-2); } .mkt-feature-detail p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; } .mkt-section-narrow p { font-size: 15.5px; line-height: 1.7; color: var(--text-muted); margin-bottom: var(--sp-5); } /* ---------- footer ---------- */ .mkt-footer { border-top: 1px solid var(--border-soft); padding-top: var(--sp-9); } .mkt-footer-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6) var(--sp-8); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); } .mkt-footer-links { display: flex; flex-direction: column; gap: var(--sp-3); } .mkt-footer-links a { font-size: 14px; color: var(--text-muted); } .mkt-footer-links a:hover { color: var(--text); } .mkt-footer-bottom { text-align: center; padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-faint); } @media (max-width: 640px) { .mkt-footer-inner { grid-template-columns: 1fr; gap: var(--sp-6); } } /* ---------- responsive: general section stacking (360 / 768) ---------- */ @media (max-width: 860px) { .mkt-pains, .mkt-steps, .mkt-trust, .mkt-principles { grid-template-columns: 1fr; gap: var(--sp-8); } .mkt-section { padding: var(--sp-8) var(--sp-5); } .mkt-section-head h2, .mkt-page-head h1 { font-size: 26px; } } @media (max-width: 420px) { .mkt-hero-copy h1 { font-size: 34px; } .mkt-hero-sub { font-size: 16px; } .mkt-hero-actions .btn, .mkt-hero-actions a { width: 100%; } .mkt-nav-inner { padding: 12px var(--sp-4); } }