/* Vocabay marketing pages — Tide & Reef palette aligned with the SPA at /app. Token names + values match public/styles.css :root exactly, so future SPA snippets paste in without renaming. If the SPA palette changes, update both files (deliberate duplication; extracting a shared tokens.css is a separate plan). */ :root { /* Light is the default. Dark is opt-in via the theme toggle in the nav (see public/marketing.js). The toggle sets `data-theme="dark"` on , which the rule at the bottom of this file matches. `color-scheme: light;` here tells the browser to render native UI (form inputs, scrollbars, `
` toggles) in the light scheme; the dark-theme rule below flips that to `dark`. */ color-scheme: light; /* Palette — sea-glass + warm sand + teal + coral. Default (light) tokens defined here; a sibling rule at the bottom of this file flips them to the SPA's dark palette when the user toggles dark mode in the marketing nav. */ --bg: #f0f8f5; /* sea-glass page bg */ --bg-elev: #ffffff; /* elevated surface */ --surface: #ffffff; /* cards, modals, panels */ --ink: #0a302d; /* deep teal-black, primary text */ --ink-soft: #2c544f; /* secondary text */ --muted: #7d9290; /* tertiary text */ --accent: #2eb6a4; /* Tide & Reef teal */ --accent-dark: #127c70; /* tealDeep */ --accent-light: #cdebe5; /* tealLight — tinted bg */ --coral: #ff8a6b; /* due/new/highlight, primary CTA */ --coral-deep: #e26a4d; /* coral pressed/text */ --sand: #fff7e6; /* warm sand — Bay hero gradient stop */ --rule: rgba(10, 48, 45, 0.08); --rule-strong: rgba(10, 48, 45, 0.16); --radius: 10px; --radius-lg: 18px; --shadow-card: 0 1px 2px rgba(10, 48, 45, 0.04); --shadow-modal: 0 18px 48px -16px rgba(10, 48, 45, 0.4); /* Font stacks — match the SPA's --font-chrome and prose pairings. Source Serif 4 for landing/about/legal prose; Jost for nav, buttons, pricing chrome. Both loaded from Google Fonts in the marketing layout's . */ --font-chrome: "Jost", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-prose: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-prose); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent-dark); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Top nav ───────────────────────────────────────────────── */ .marketing-nav { position: sticky; top: 0; z-index: 10; background: rgba(240, 248, 245, 0.92); /* tinted sea-glass */ backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); } .nav-inner { max-width: 1080px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 28px; } .nav-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; color: var(--ink); font-family: var(--font-prose); letter-spacing: -0.015em; } .nav-logo:hover { text-decoration: none; } .nav-logo-mark { display: block; width: 40px; height: 40px; } /* Hero symbol — sits above the H1 on landing + about pages. Uses the inline width/height attributes from renderSymbol() for the desktop size; clamps to 50vw on narrow screens so it never eats the full viewport on a phone. */ .hero-symbol { display: block; margin: 0 auto 16px; max-width: 50vw; height: auto; } .nav-links { flex: 1; display: flex; gap: 22px; font-family: var(--font-chrome); font-size: 14px; } .nav-link { color: var(--ink-soft); font-weight: 500; } .nav-link.active { color: var(--ink); font-weight: 700; } .nav-cta { font-family: var(--font-chrome); font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: var(--coral); color: #fff; } .nav-cta:hover { background: var(--coral-deep); text-decoration: none; } /* ── Main column ───────────────────────────────────────────── */ .marketing-main { max-width: 880px; margin: 0 auto; padding: 64px 20px 96px; } .marketing-main h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--ink); } .marketing-main h2 { font-size: 26px; line-height: 1.25; margin: 48px 0 16px; } .marketing-main h3 { font-size: 19px; margin: 24px 0 8px; } .marketing-main p, .marketing-main li { font-size: 17px; color: var(--ink); } .marketing-main p { margin: 0 0 16px; } .marketing-main strong { font-weight: 700; } .marketing-main code { background: var(--surface); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--rule); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; } .lede { font-size: 19px; color: var(--ink-soft); margin: -8px 0 32px; } .last-updated { font-family: var(--font-chrome); font-size: 13px; color: var(--muted); margin-bottom: 32px; } /* ── Hero (landing) ────────────────────────────────────────── */ .hero { text-align: center; padding: 32px 0 16px; } .hero h1 { font-size: 56px; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 20px; } .hero .lede { font-size: 21px; margin: 0 auto 32px; max-width: 640px; text-align: center; } .hero-cta { display: inline-block; font-family: var(--font-chrome); font-size: 16px; font-weight: 600; padding: 14px 28px; border-radius: 999px; background: var(--coral); color: #fff; } .hero-cta:hover { background: var(--coral-deep); text-decoration: none; } /* Single-line micro-feature row beneath the hero CTA. Three value beats laid out as a flex row with even gaps — visual balance is mathematical (flex space) rather than text-flow-dependent, and the middot junk is gone in favour of a tiny dot rendered as a pseudo-element between items. */ .hero-features { list-style: none; margin: 32px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; font-family: var(--font-chrome); font-size: 15px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.005em; line-height: 1; } .hero-features li { display: inline-flex; align-items: center; gap: 28px; } .hero-features li:not(:last-child)::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--rule-strong); opacity: 0.7; } @media (max-width: 700px) { .hero h1 { font-size: 38px; } .hero-features { gap: 10px 18px; font-size: 13.5px; } .hero-features li { gap: 18px; } .marketing-main h1 { font-size: 32px; } .nav-links { display: none; } } /* ── Pricing tiles ─────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 32px 0; } .pricing-tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); } .pricing-tile.highlighted { /* Coral highlight ring matching the SPA's "due / highlight" glow (used on Bay due cards + smart-panel cap-hit). */ border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 138, 107, 0.18); } .pricing-tile h2 { margin: 0 0 4px; font-size: 22px; font-family: var(--font-chrome); } .pricing-tile .price { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: var(--ink); } .pricing-tile .price small { font-size: 16px; color: var(--muted); font-weight: 500; } .pricing-tile .tagline { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; font-family: var(--font-chrome); } .pricing-tile ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; font-family: var(--font-chrome); font-size: 14px; } .pricing-tile li { padding: 6px 0; color: var(--ink); border-bottom: 1px solid var(--rule); } .pricing-tile li:last-child { border-bottom: 0; } .pricing-tile .tile-cta { display: inline-block; text-align: center; font-family: var(--font-chrome); font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 0; width: 100%; } .pricing-tile.highlighted .tile-cta { background: var(--coral); color: #fff; } .pricing-tile.highlighted .tile-cta:hover { background: var(--coral-deep); } .pricing-tile:not(.highlighted) .tile-cta { background: var(--ink); color: #fff; } .pricing-tile .tile-cta:hover { text-decoration: none; } /* Outlined CTA variant — used for pre-launch "Get notified" on the Plus tile so the only filled (and visually-loudest) CTA on the page is "Start free." Once Plus is live we swap back to the default filled coral style. */ .pricing-tile.highlighted .tile-cta-outline { background: transparent; color: var(--coral-deep); border: 1.5px solid var(--coral); } .pricing-tile.highlighted .tile-cta-outline:hover { background: rgba(255, 138, 107, 0.08); } /* Pre-launch eyebrow — small inline chip next to the tile heading, signaling Plus isn't open for purchase yet. */ .pricing-eyebrow { display: inline-block; margin-left: 10px; padding: 2px 8px; font-size: 11px; font-weight: 600; font-family: var(--font-chrome); letter-spacing: 0.02em; color: var(--coral-deep); background: rgba(255, 138, 107, 0.12); border-radius: 999px; vertical-align: middle; white-space: nowrap; } .pricing-fineprint { font-size: 13px; color: var(--muted); font-family: var(--font-chrome); text-align: center; margin-top: 32px; } @media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; } } /* ── Waitlist modal ────────────────────────────────────────── */ .waitlist-backdrop { position: fixed; inset: 0; background: rgba(10, 48, 45, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .waitlist-backdrop[hidden] { display: none; } .waitlist-modal { background: var(--surface); border-radius: var(--radius-lg); padding: 32px; max-width: 420px; width: 100%; box-shadow: var(--shadow-modal); } .waitlist-modal h3 { margin: 0 0 8px; font-size: 22px; font-family: var(--font-chrome); } .waitlist-modal p { margin: 0 0 20px; font-size: 15px; color: var(--ink-soft); } .waitlist-modal input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: 15px; font-family: var(--font-chrome); margin-bottom: 12px; } .waitlist-modal input[type="email"]:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral); } .waitlist-actions { display: flex; gap: 8px; justify-content: flex-end; } .waitlist-modal button { font-family: var(--font-chrome); font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; } .waitlist-modal .btn-primary { background: var(--coral); color: #fff; } .waitlist-modal .btn-primary:hover { background: var(--coral-deep); } .waitlist-modal .btn-secondary { background: transparent; color: var(--ink-soft); } .waitlist-modal .status { font-size: 13px; color: var(--muted); margin-top: 12px; font-family: var(--font-chrome); } .waitlist-modal .status.error { color: var(--coral-deep); } .waitlist-modal .status.ok { color: var(--accent-dark); } /* ── Long-form pages (legal, FAQ, about) ───────────────────── */ .prose h2 { scroll-margin-top: 80px; } .prose ul { padding-left: 24px; } .prose li { margin-bottom: 6px; } .prose blockquote { border-left: 3px solid var(--accent); padding: 4px 16px; margin: 16px 0; background: var(--accent-light); color: var(--ink); border-radius: 0 8px 8px 0; } .prose .info-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-family: var(--font-chrome); font-size: 14px; } .prose .info-table th, .prose .info-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); } .prose .info-table th { font-weight: 600; color: var(--ink-soft); background: var(--surface); } /* ── Footer ─────────────────────────────────────────────────── */ .marketing-footer { background: var(--surface); border-top: 1px solid var(--rule); margin-top: auto; font-family: var(--font-chrome); font-size: 13px; } .footer-inner { max-width: 1080px; margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } .trading-disclosures { margin: 0; color: var(--ink-soft); font-size: 13px; } /* Inline brand mark used in the trading-disclosures line. Each mark sits immediately before the name it represents: the Vocabay mark before "Vocabay", the Galdero mark before "Galdero Technologies Ltd". The Vocabay symbol carries its own brand colors; the Galdero symbol inherits via currentColor so it picks up --ink-soft in the footer. The .galdero-link rule sits with this group because both compose the disclosure styling. */ .disclosure-mark { display: inline-block; vertical-align: middle; margin-inline-end: 4px; line-height: 0; opacity: 0.85; } .disclosure-mark svg { display: block; } /* Galdero corporate-site cross-link. Used inline inside legal prose paragraphs and the imprint legal-name row. Subtle — inherits the surrounding text color, with a dotted underline on hover so the cross-domain cue is visible without making the link compete with the prose. */ .galdero-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; padding-bottom: 1px; } .galdero-link:hover, .galdero-link:focus-visible { color: var(--accent-dark); border-bottom-style: solid; } /* Imprint header symbol — large, navy, centered above the legal-name table so the page reads "Galdero, Trading As Vocabay". KYB reviewers see the parent company's mark as the first thing on the page. */ .imprint-mark { display: flex; justify-content: center; margin: 16px 0 28px; } .imprint-mark svg { display: block; } .footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .footer-links a { color: var(--ink-soft); } /* ── Dark theme (opt-in via nav toggle) ──────────────────────── The toggle button in the marketing nav (id="theme-toggle", wired by public/marketing.js) flips `data-theme="dark"` on and persists the choice to localStorage. The theme-init.js script in applies the persisted choice synchronously before paint to avoid a flash of unstyled content. Token values mirror the SPA's `html[data-theme="dark"]` rule in public/styles.css so the marketing-to-app crossing feels continuous when both surfaces are in dark. If those values ever change in styles.css, mirror the change here too — the duplication is deliberate (the two stylesheets are independent surfaces and don't share a tokens file). */ html[data-theme="dark"] { color-scheme: dark; --bg: #060f0d; --bg-elev: #11201c; --surface: #1a2925; --ink: #f4f8f6; --ink-soft: #b3c2bd; --muted: #7d9290; --accent: #5dd1bf; --accent-dark: #2eb6a4; --accent-light: #1f3a35; --coral: #ff9d80; --coral-deep: #ff8a6b; --rule: rgba(232, 239, 235, 0.1); --rule-strong: rgba(232, 239, 235, 0.2); /* Shadows: light theme uses dark-tinted alpha for depth on a near-white bg; on a near-black bg those would vanish. Pure-black alphas at higher opacity preserve the same depth perception. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-modal: 0 18px 48px -16px rgba(0, 0, 0, 0.6); } /* Three element-specific overrides for hardcoded rgba() values that don't go through tokens. Each was correct for the light theme; the dark variants below match the elevated surface / coral / backdrop equivalents in the dark palette. */ /* Sticky top nav — tinted bg matched to the dark page bg so the blur read remains a "frosted-glass" floor, not a bright bar pinned to a dark page. */ html[data-theme="dark"] .marketing-nav { background: rgba(6, 15, 13, 0.92); } /* Coral highlight ring on the Plus pricing tile. Light theme uses #ff8a6b at 0.18; dark theme uses the lighter dark-coral at slightly higher alpha for parity. */ html[data-theme="dark"] .pricing-tile.highlighted { box-shadow: 0 0 0 3px rgba(255, 157, 128, 0.22); } /* Waitlist modal backdrop. Deeper alpha on dark so the modal still feels lifted rather than blending into the near-black page. */ html[data-theme="dark"] .waitlist-backdrop { background: rgba(0, 0, 0, 0.55); } /* ── Theme toggle button (in the marketing nav) ──────────────── Sun (light theme active) / Moon (dark theme active). Click flips the theme via marketing.js; CSS swaps which icon is visible based on the current data-theme attribute. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; border-radius: 8px; color: var(--ink-soft); cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; transition: background 140ms ease, color 140ms ease; } .theme-toggle:hover { color: var(--ink); background: var(--rule); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Default (light): show the moon — clicking switches TO dark. */ .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: block; } /* Dark: show the sun — clicking switches TO light. */ html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }