/* ============================================================
* shared.css — Trydent platform marketing-site palette + base
* ============================================================
* The marketing site is the PLATFORM brand, not a tenant. It imports
* the canonical component library (components.css) for the token
* primitives + reset, then fixes the Trydent brand tokens directly in
* :root and layers the marketing design language on top via site.css.
* It deliberately does NOT use the per-tenant theme-loader.js or any
* {{tenant.*}} slot machinery — there is no tenant here.
*
* components.css is copy-deployed from trydent-painting-admin/assets/
* components.css (canonical). To resync, copy it by hand:
* Copy-Item ..\trydent-painting-admin\assets\components.css `
* assets\components.css
* (tools/sync-components.ps1 does not exist yet.)
*
* ------------------------------------------------------------
* DESIGN LANGUAGE (2026-06 "one system, not three" redesign)
* ------------------------------------------------------------
* Clean modern-SaaS base in Trydent navy + blue, with three signals
* borrowed precisely once each:
* - a "savings green" for the one-bill / included / savings story,
* - a single black REVEAL band with a yellow VS for the three-vendors
* vs one-system comparison,
* - JetBrains Mono tabular numerals for every price and figure.
* Full spec + usage guide live in /DESIGN.md (repo root).
*
* Brand-token contrast (WCAG AA, white text on fill):
* --brand-primary #1366D6 on #FFF text -> ~4.9:1 PASS (CTA blue)
* --brand-secondary #0B2238 on #FFF text -> ~15:1 PASS (navy)
* --savings #0F7A38 on #FFF text -> ~4.8:1 PASS (deep green)
* --brand-accent #6FB7F5 is LIGHT — never a fill behind white text.
* Reserve it for highlights, the trident glyph, focus rings, and
* accents ON the navy (#6FB7F5 on #0B2238 -> ~6:1 PASS).
* ============================================================ */
@import './components.css?v=b06cc030';
:root {
/* ---- Trydent brand — fixed (no per-tenant override) ---- */
--brand-primary: #1366D6; /* CTA blue: primary buttons, links, eyebrow on light */
--brand-primary-dk: #0F55B5; /* hover/active */
--brand-secondary: #0B2238; /* navy: header, footer, dark sections, titles */
--brand-accent: #6FB7F5; /* sky-blue trident accent: highlights / focus on navy ONLY */
/* Deeper navies for layered dark surfaces. */
--navy-2: #0E2C49;
--navy-3: #103559;
/* ---- Savings green: the one-bill / included / savings signal ----
* Used ONLY for the cheaper side of a comparison, "Included" marks,
* affirmative checks, and the savings math. Never decorative. */
--savings: #16A34A; /* green icon/check fill */
--savings-dk: #0F7A38; /* green text on light (AA) */
--savings-soft: #E7F7EE; /* green soft tint surface */
--savings-border: #C6EAD3; /* green soft border */
/* ---- The REVEAL band: a single brutalist black band, one yellow VS.
* Appears exactly once on the homepage. Do not reuse the yellow. */
--reveal-bg: #0A0A0A; /* near-black band background */
--reveal-vs: #FFE14D; /* the one yellow accent (VS pill) */
/* ---- Marketing surfaces + ink (named so site.css carries no raw hex) ---- */
--neutral-fg-2: #4A5F73; /* secondary ink */
--neutral-fg-3: #718699; /* tertiary ink (captions, disclaimers) */
--neutral-bg-tint: #F4F8FD; /* faint blue surface (section alt) */
--line-soft: #E9EFF7; /* hairline inside cards */
--mk-accent-tint: #E6F2FE; /* sky-blue soft tint on light: chips, icon tiles */
--mk-accent-on-navy: rgba(111,183,245,0.16); /* icon tiles ON navy */
--mk-go-soft: #E7F0FD; /* primary-blue soft fill (icon tiles, time pills) */
--mk-amber: #B46A08; /* "waiting / drafted" status text */
--mk-amber-soft: #FBEEDA; /* "waiting" status bg */
--mk-red: #C7402E; /* "overdue / before" accent */
--mk-red-soft: #FDECEB; /* "overdue / before" soft bg */
/* ---- Elevation scale (anti-slop: blur capped at 16px on cards) ----
* The stage hero visuals are allowed a deeper stage shadow because
* they sit on navy, not on a content card. */
--shadow-sm: 0 2px 8px rgba(11,34,56,0.06);
--shadow-md: 0 12px 28px rgba(11,34,56,0.12);
--shadow-lg: 0 16px 36px rgba(11,34,56,0.14);
--shadow-stage: 0 24px 60px rgba(3,12,24,0.45);
/* ---- Typography ----
* Inter for everything readable. Archivo kept for poster headlines
* (shared with the other marketing pages). JetBrains Mono for every
* price and figure (tabular numerals). Font lives in each page
* (perf: beats @import). */
--font-display: 'Archivo', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
--font-body: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
--font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Public palette aliases (used by a few shared rules). */
--paper: var(--neutral-bg);
--ink: var(--neutral-fg);
--shadow: var(--shadow-sm);
/* Easing used by the stage visual + hover transitions. */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Height of the always-visible mobile sticky CTA bar; pages add this
* as padding-bottom on mobile so content never hides behind it. */
--mobile-cta-h: 76px;
}
/* The marketing site uses Inter as the body AND for headings (clean
* modern-SaaS look). Heading weight/tracking is tightened here so the
* canonical components.css default (which points h-tags at --font-display)
* is overridden for the platform brand. Archivo stays available via
* --font-display for the few poster headlines that opt in (.display). */
body { font-family: var(--font-body); letter-spacing: -0.011em; }
h1, h2, h3, h4 {
font-family: var(--font-body);
color: var(--brand-secondary);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.025em;
}
h1 { letter-spacing: -0.03em; }
.display { font-family: var(--font-display); font-weight: 900; }
/* Tabular mono numerals for prices and figures. */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
html { scroll-behavior: smooth; }
/* Skip-to-content link — required for WCAG AA. */
.skip-link {
position: absolute;
top: -48px;
left: var(--sp-16);
background: var(--brand-primary);
color: #fff;
padding: var(--sp-8) var(--sp-16);
border-radius: 0 0 var(--r-sm) var(--r-sm);
z-index: 100;
text-decoration: none;
font-weight: 600;
}
.skip-link:focus { top: 0; }
/* Visible focus ring everywhere — WCAG 2.4.7. Accent reads on both
* light and dark backgrounds at 3px. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--brand-accent);
outline-offset: 2px;
border-radius: var(--r-xs);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}