/* ═══════════════════════════════════════════════════════════════════ Marketing shared styles — House-accent aware SINGLE SOURCE OF TRUTH for the marketing shell (nav, footer, layout, shared utilities). Consumed by: * React — frontend/src/shared/components/marketing/MarketingLayout.tsx (and frontend-marketing/app/root.tsx via ?url) * Jinja — app/templates/marketing/_layout.html links the served copy at /static/tokens/marketing.css (see app/configuration/app.py: /static/tokens/... maps to packages/tokens/). Only depends on the --dz-* and --brand-* design tokens defined in packages/tokens/theme.css + brand.css, so it works standalone as a linked stylesheet on the server-rendered pages too. ═══════════════════════════════════════════════════════════════════ */ /* ── Marketing-specific tokens ───────────────────────────────────── */ .mkt-layout { --mkt-thin: color-mix(in srgb, var(--dz-text-primary) 25%, transparent); --mkt-light: color-mix(in srgb, var(--dz-text-primary) 50%, transparent); /* Primary actions follow the visitor's house accent (``data-house`` on ```` via theme.css): nav Get Started, lp-btn, pricing CTAs, modals. */ --mkt-btn-bg: var(--dz-accent); --mkt-btn-text: var(--dz-accent-fg); --mkt-btn-hover: var(--dz-accent-hover); /* Effect tokens — follow the active house accent (not a fixed brand hue). */ --mkt-accent: var(--dz-accent); --mkt-hero-glow: color-mix(in srgb, var(--dz-accent) 20%, transparent); --mkt-grain-tint: var(--dz-accent); --mkt-cta-bg: var(--mkt-btn-bg); --mkt-cta-bg-hover: var(--mkt-btn-hover); --mkt-cta-text: var(--mkt-btn-text); --mkt-grid-line: color-mix(in srgb, var(--dz-accent) 12%, transparent); /* Footer chrome. Light theme tracks the standard semantic tokens; the dark footer uses a dedicated deep palette (overridden below) so the literals live in ONE place instead of scattered across every footer rule. */ --mkt-footer-bg: var(--dz-bg-secondary); --mkt-footer-fg: var(--dz-text-primary); --mkt-footer-border: var(--dz-border-subtle); --mkt-footer-divider: var(--dz-border-subtle); /* Slightly stronger than --dz-text-muted so 0.7rem footer labels meet 4.5:1. */ --mkt-footer-label: var(--dz-text-secondary); --mkt-footer-link: var(--dz-text-secondary); --mkt-footer-muted: var(--dz-text-secondary); --mkt-footer-faint: var(--dz-text-secondary); --mkt-footer-social-border: var(--dz-border); --mkt-footer-social-border-hover: var(--dz-border-hover); /* Footer accent text follows the visitor's house accent so the footer reflects the active theme like the nav CTAs and hero title. */ --mkt-footer-accent-stop: var(--mkt-accent); } /* Dark-theme overrides for the marketing token set. Centralises every white-on-dark footer/grid literal that used to be repeated per rule. */ :root.dark .mkt-layout, [data-theme="dark"] .mkt-layout { /* Brighter accent tint + glow on the dark "study" backdrop. */ --mkt-grid-line: color-mix(in srgb, var(--dz-accent) 22%, transparent); --mkt-hero-glow: color-mix(in srgb, var(--dz-accent) 30%, transparent); --mkt-footer-bg: #0f1520; --mkt-footer-fg: #fff; --mkt-footer-border: rgba(255, 255, 255, 0.06); --mkt-footer-divider: rgba(255, 255, 255, 0.1); --mkt-footer-label: rgba(255, 255, 255, 0.4); --mkt-footer-link: rgba(255, 255, 255, 0.65); --mkt-footer-muted: rgba(255, 255, 255, 0.45); --mkt-footer-faint: rgba(255, 255, 255, 0.3); --mkt-footer-social-border: rgba(255, 255, 255, 0.15); --mkt-footer-social-border-hover: rgba(255, 255, 255, 0.4); /* Keep the house accent on the dark footer too (brightened by theme.css). */ --mkt-footer-accent-stop: var(--mkt-accent); } /* ── Layout ──────────────────────────────────────────────────────── */ .mkt-layout { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--brand-font-sans); color: var(--dz-text-primary); position: relative; /* Global "dawn sun" sky — the actual sunrise photo, fixed to the viewport so the sun sits behind every marketing/docs page (not just the hero). A page-colour veil is layered on top so the photo softens into the page and keeps text legible; it fades to solid page colour toward the bottom of each viewport. The fixed grid (.dz-light-grid::after) still renders over this. */ background-color: var(--dz-bg-page); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--dz-bg-page) 6%, transparent) 0%, color-mix(in srgb, var(--dz-bg-page) 38%, transparent) 42%, color-mix(in srgb, var(--dz-bg-page) 78%, transparent) 78%, var(--dz-bg-page) 100% ), url("/static/brand/dayzero-dawn-light.jpg"); background-position: center top, center 28%; background-size: 100% 100%, cover; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; } [data-theme="dark"] .mkt-layout, .dark .mkt-layout { background-image: linear-gradient( to bottom, color-mix(in srgb, var(--dz-bg-page) 14%, transparent) 0%, color-mix(in srgb, var(--dz-bg-page) 46%, transparent) 42%, color-mix(in srgb, var(--dz-bg-page) 82%, transparent) 78%, var(--dz-bg-page) 100% ), url("/static/brand/dayzero-dawn-dark.jpg"); } /* A single, consistent sky now comes from `.mkt-layout` above, so suppress the landing page's own hero photo + full-page wash inside the marketing layout to avoid stacking the same sunrise twice. (The standalone SPA still uses them.) */ .mkt-layout .lp::after, .mkt-layout .lp-hero::before { display: none; } .mkt-layout main { flex: 1; position: relative; z-index: 1; } /* Subtle grain texture overlay — adds tactile depth to the flat surface. Uses an inline SVG feTurbulence filter so there's no extra image request. Light mode: 3.5% opacity (paper-like), dark mode: 4.5% (frosted). */ .mkt-layout::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06; /* Tint the grain with the accent: paint a flat accent colour and let the fractal-noise SVG act as the mask, so the speckle takes the brand hue instead of neutral grey. */ background-color: var(--mkt-grain-tint); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-size: 256px 256px; mask-size: 256px 256px; -webkit-mask-repeat: repeat; mask-repeat: repeat; } [data-theme="dark"] .mkt-layout::before, .dark .mkt-layout::before { opacity: 0.08; } .mkt-layout--locked { height: 100vh; overflow: hidden; } /* Light-grid backdrop. Mirrors `.dz-light-grid` in frontend/src/index.css so the server-rendered marketing pages (which don't load index.css) still get the same faint grid fade behind the hero. Scoped under .mkt-layout to avoid colliding with the SPA's global rule. */ .mkt-layout.dz-light-grid { position: relative; } .mkt-layout.dz-light-grid::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--mkt-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--mkt-grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black 10%, transparent 55%); -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 55%); } .mkt-layout.dz-light-grid > * { position: relative; z-index: 1; } /* Modal overlays render as direct children of the layout, so the rule above would pin them to `position: relative` (in normal flow) at a low z-index — dropping the modal to the bottom of the page instead of covering the viewport. Keep them as fixed, full-viewport top-layer overlays. */ .mkt-layout.dz-light-grid > .sdm-overlay, .mkt-layout.dz-light-grid > .csm-overlay { position: fixed; inset: 0; z-index: 1000; } /* ── Ambient accent glow ────────────────────────────────────────── A soft radial wash of the brand accent bleeding down from the top of the page, sitting above the grid/grain (z 0) but behind the content. Gives every marketing/docs page a subtle coloured halo under the nav. */ .mkt-layout > main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 640px; z-index: -1; pointer-events: none; background: radial-gradient( 62% 90% at 50% -14%, var(--mkt-hero-glow) 0%, transparent 70% ); } /* ── Gradient + shimmer hero headings ───────────────────────────── The landing hero keeps its thin/heavy two-tone; only the heavy emphasis line gets an accent→ink gradient with a slow shimmer sweep. Plain docs/feature hero titles get a calmer static gradient. */ .mkt-layout .lp-hero-title .lp-heavy, .mkt-layout .docs-hero h1 { background-image: linear-gradient( 100deg, var(--dz-text-primary) 32%, var(--mkt-accent) 50%, var(--dz-text-primary) 68% ); background-size: 260% 100%; background-position: 50% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @media (prefers-reduced-motion: no-preference) { .mkt-layout .lp-hero-title .lp-heavy { animation: mkt-title-shimmer 9s ease-in-out infinite alternate; } } @keyframes mkt-title-shimmer { from { background-position: 88% 0; } to { background-position: 12% 0; } } /* ── Nav ──────────────────────────────────────────────────────────── */ .mkt-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* Stronger, more trustworthy header surface: higher opacity + a hairline base border so the bar reads as a deliberate plane (not a floating blur) even before the visitor scrolls. */ background: color-mix(in srgb, var(--dz-bg-page) 88%, transparent); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid color-mix(in srgb, var(--dz-border) 45%, transparent); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } /* Override .dz-light-grid > * { z-index: 1 } which flattens all children */ .mkt-layout > .mkt-nav { z-index: 100; } .mkt-nav-scrolled { background: color-mix(in srgb, var(--dz-bg-page) 94%, transparent); border-bottom-color: var(--dz-border); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 24px -16px rgba(0, 0, 0, 0.25); } .mkt-nav-inner { /* Full-bleed bar: the logo hugs the far-left edge and the Cosmetics/auth cluster the far-right, while the grid keeps the primary links centered in the viewport. */ max-width: none; margin: 0; padding: 0 2rem; height: 4.25rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; /* Guaranteed separation between the centered links and the side columns (logo / Cosmetics+auth) so "Docs" never butts up against the Cosmetics button — especially with the wider readable/dyslexic fonts. */ column-gap: 1.75rem; } .mkt-nav-logo { display: inline-flex; align-items: center; color: var(--dz-text-primary); text-decoration: none; justify-self: start; border-radius: 10px; padding: 0.25rem 0.4rem 0.25rem 0; margin-left: -0.1rem; transition: opacity 0.15s; } .mkt-nav-logo:hover { opacity: 0.85; } /* Legacy raster logo (still used by the server-rendered Jinja marketing nav, app/templates/marketing/_marketing_nav.html). Kept so those pages render identically while the React nav uses the SVG lockup below. */ .mkt-nav-logo-img { height: 24px; width: auto; display: block; } :root.dark .mkt-nav-logo-img, [data-theme="dark"] .mkt-nav-logo-img { filter: invert(1); } /* ── Brand lockup (mark + wordmark + category cue) ───────────────── */ .mkt-logo { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--dz-text-primary); } .mkt-logo-mark { display: block; flex: none; /* Soft seat under the ink tile so the mark feels grounded, not pasted. */ border-radius: 9px; box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--dz-text-primary) 35%, transparent); } /* Theme-swapped mark: dark tile on light backgrounds, light tile on dark. */ .mkt-logo-mark--on-dark { display: none; } [data-theme="dark"] .mkt-logo-mark--on-light, .dark .mkt-logo-mark--on-light { display: none; } [data-theme="dark"] .mkt-logo-mark--on-dark, .dark .mkt-logo-mark--on-dark { display: block; } .mkt-logo-text { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; } .mkt-logo-word { font-family: var(--brand-font-sans); font-weight: 800; /* Larger + darker + tighter than before so the wordmark reads as a deliberate logotype rather than default nav text. */ font-size: 1.45rem; line-height: 1; letter-spacing: -0.035em; color: var(--dz-text-primary); white-space: nowrap; } .mkt-logo-divider { width: 1px; height: 1.3rem; background: var(--dz-border); flex: none; } .mkt-logo-cue { font-family: var(--brand-font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dz-text-secondary); white-space: nowrap; } /* The category cue + divider need horizontal room the compact mobile bar doesn't have — drop them below the desktop breakpoint and keep just the mark + wordmark. */ @media (max-width: 600px) { .mkt-logo-divider, .mkt-logo-cue { display: none; } .mkt-logo-word { font-size: 1.1rem; } } .mkt-nav-links { display: flex; gap: 2rem; font-size: 1rem; font-weight: 500; color: var(--dz-text-secondary); justify-self: center; white-space: nowrap; } .mkt-nav-links a { text-decoration: none; color: inherit; transition: color 0.15s; } .mkt-nav-links a:hover { color: var(--dz-text-primary); } /* The compact top bar can't absorb the extra letter/word spacing the readable + dyslexic fonts add on , and OpenDyslexic's wide glyphs push the links into the Cosmetics/auth cluster. Reset that spacing inside the bar and tighten the gaps so the links stay clear of the right side. */ [data-font="readable"] .mkt-nav-inner, [data-font="dyslexic"] .mkt-nav-inner { letter-spacing: normal; word-spacing: normal; } [data-font="readable"] .mkt-nav-links, [data-font="dyslexic"] .mkt-nav-links { gap: 1.5rem; } [data-font="dyslexic"] .mkt-nav-links { gap: 1.35rem; font-size: 0.78rem; } /* ── Product dropdown ───────────────────────────────────────── */ .mkt-nav-dropdown { position: relative; } .mkt-nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: none; padding: 0; font: inherit; color: var(--dz-text-secondary); cursor: pointer; transition: color 0.15s; } .mkt-nav-dropdown-trigger:hover, .mkt-nav-dropdown-trigger-open { color: var(--dz-text-primary); } .mkt-nav-dropdown-trigger svg { opacity: 0.65; transition: transform 0.18s ease; } .mkt-nav-dropdown-trigger-open svg { transform: rotate(180deg); } .mkt-nav-dropdown-panel { position: absolute; top: calc(100% + 0.5rem); left: 50%; min-width: 22rem; display: flex; flex-direction: column; padding: 0.4rem; border-radius: 12px; background: var(--dz-bg-primary); border: 1px solid var(--dz-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); z-index: 200; opacity: 0; visibility: hidden; transform: translate(-50%, -4px); pointer-events: none; transition: opacity 0.14s ease-out, transform 0.14s ease-out, visibility 0s linear 0.14s; } /* Invisible bridge across the 0.5rem gap between the trigger and the panel so the cursor stays "inside" the dropdown while transiting between them. */ .mkt-nav-dropdown-panel::before { content: ""; position: absolute; top: -0.5rem; left: 0; right: 0; height: 0.5rem; } .mkt-nav-dropdown-panel-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition: opacity 0.14s ease-out, transform 0.14s ease-out; } .mkt-nav-dropdown-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.8rem; border-radius: 8px; text-decoration: none; transition: background 0.12s; /* Reset the nowrap inherited from `.mkt-nav-links` so the multi-word titles/subs wrap inside their column instead of overflowing the panel. */ white-space: normal; overflow-wrap: anywhere; } .mkt-nav-dropdown-item:hover { background: var(--dz-bg-secondary); } .mkt-nav-dropdown-item-title { font-size: 0.95rem; font-weight: 600; color: var(--dz-text-primary); letter-spacing: -0.005em; } .mkt-nav-dropdown-item-sub { font-size: 0.8rem; font-weight: 400; color: var(--dz-text-secondary); line-height: 1.4; } /* ── Product mega-menu (grouped, multi-column) ──────────────── */ /* The product list outgrew a single-column dropdown, so the panel becomes a grouped 3-column grid. Centered under the trigger and capped to the viewport so the wide panel never overflows the edge. */ .mkt-nav-dropdown-panel.mkt-nav-mega { left: 50%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.1rem 0.85rem; width: min(46rem, calc(100vw - 2rem)); min-width: 0; padding: 0.85rem; transform: translate(-50%, -4px); align-items: start; } .mkt-nav-dropdown-panel.mkt-nav-mega.mkt-nav-dropdown-panel-open { transform: translate(-50%, 0); } .mkt-nav-mega-col { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .mkt-nav-mega-label { padding: 0.45rem 0.8rem 0.35rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dz-text-secondary); } @media (max-width: 820px) { .mkt-nav-dropdown-panel.mkt-nav-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(32rem, calc(100vw - 2rem)); } } .mkt-nav-right { display: flex; align-items: center; gap: 0.5rem; justify-self: end; white-space: nowrap; } /* Desktop cluster (theme + auth). Stays in the bar on mobile beside the hamburger. */ .mkt-nav-actions { display: flex; align-items: center; gap: 0.5rem; } /* Hamburger toggle — hidden on desktop, revealed at the mobile breakpoint. */ .mkt-nav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -0.35rem; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--dz-text-primary); cursor: pointer; transition: background 0.15s; } .mkt-nav-burger:hover { background: var(--dz-bg-secondary); } /* Control buttons (theme, font, cosmetics) */ .mkt-control-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; height: 38px; padding: 0 1rem; border-radius: 8px; border: 1px solid var(--dz-border); background: transparent; color: var(--dz-text-secondary); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .mkt-control-btn:hover { color: var(--dz-text-primary); background: var(--dz-bg-secondary); } /* Font picker */ .mkt-font-picker { position: relative; } .mkt-font-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; border-radius: 10px; border: 1px solid var(--dz-border); background: var(--dz-bg-primary); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); padding: 0.35rem; z-index: 200; } .mkt-font-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.45rem 0.65rem; border: none; border-radius: 6px; background: transparent; color: var(--dz-text-secondary); font-family: var(--brand-font-sans); font-size: 0.8125rem; cursor: pointer; transition: all 0.12s; } .mkt-font-option:hover { background: var(--dz-bg-secondary); color: var(--dz-text-primary); } .mkt-font-option.active { color: var(--dz-text-primary); font-weight: 600; } .mkt-font-tag { font-size: 0.65rem; font-weight: 500; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--dz-bg-tertiary); color: var(--dz-text-muted); } .mkt-nav-signin { font-size: 0.95rem; font-weight: 500; color: var(--dz-text-secondary); text-decoration: none; padding: 0.45rem 0.9rem; border-radius: 8px; transition: color 0.15s, background 0.15s; } .mkt-nav-signin:hover { color: var(--dz-text-primary); background: var(--dz-bg-secondary); } .mkt-nav-cta { font-size: 0.95rem; font-weight: 600; padding: 0.5rem 1.2rem; border-radius: 8px; background: var(--mkt-cta-bg); color: var(--mkt-cta-text); text-decoration: none; transition: background 0.2s, opacity 0.2s; } .mkt-nav-cta:hover { background: var(--mkt-cta-bg-hover); } /* ── Mobile menu (hamburger) ─────────────────────────────────────── */ .mkt-nav-mobile-overlay { position: fixed; inset: 4.25rem 0 0; z-index: 95; background: color-mix(in srgb, var(--dz-bg-page) 45%, transparent); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .mkt-nav-mobile-overlay-open { opacity: 1; visibility: visible; } .mkt-nav-mobile { position: fixed; top: 4.25rem; left: 0; right: 0; z-index: 96; max-height: calc(100dvh - 4.25rem); overflow-y: auto; background: var(--dz-bg-page); border-bottom: 1px solid var(--dz-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); opacity: 0; visibility: hidden; transform: translateY(-0.5rem); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .mkt-nav-mobile-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .mkt-nav-mobile-inner { display: flex; flex-direction: column; padding: 0.75rem 1.25rem 1.5rem; } .mkt-nav-mobile-group { display: flex; flex-direction: column; padding: 0.5rem 0; border-bottom: 1px solid var(--dz-border); } .mkt-nav-mobile-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dz-text-muted); padding: 0.4rem 0; } .mkt-nav-mobile-link { padding: 0.75rem 0; font-size: 0.95rem; font-weight: 500; color: var(--dz-text-primary); text-decoration: none; } .mkt-nav-mobile-link:active { color: var(--dz-accent); } .mkt-nav-mobile-actions { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.25rem; } .mkt-nav-mobile-signin, .mkt-nav-mobile-cta { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; text-decoration: none; } .mkt-nav-mobile-signin { border: 1px solid var(--dz-border); color: var(--dz-text-primary); } .mkt-nav-mobile-cta { background: var(--mkt-cta-bg); color: var(--mkt-cta-text); } /* Tablet / phone: hamburger for nav links; cosmetics + auth stay in the bar. */ @media (max-width: 1024px) { .mkt-layout { font-size: 106.25%; } .mkt-nav-links { display: none; } .mkt-nav-burger { display: inline-flex; } .mkt-nav-inner { grid-template-columns: 1fr auto; padding: 0 1rem; gap: 0.5rem; } .mkt-nav-right { gap: 0.35rem; min-width: 0; } .mkt-nav-actions { gap: 0.35rem; min-width: 0; flex-shrink: 1; } .mkt-nav-cosmetics .mkt-control-btn { height: 32px; padding: 0 0.55rem; font-size: 0.7rem; } /* One primary CTA in the bar; Sign In is in the hamburger menu. */ .mkt-nav-signin { display: none; } .mkt-nav-cta { padding: 0.35rem 0.85rem; font-size: 0.75rem; white-space: nowrap; } } @media (max-width: 640px) { .mkt-layout { font-size: 112.5%; } .mkt-nav-inner { padding: 0 0.85rem; } .mkt-nav-cosmetics .mkt-control-btn-label { display: none; } .mkt-nav-cosmetics .mkt-control-btn { width: 32px; padding: 0; gap: 0; } .mkt-nav-cosmetics .mkt-control-btn-icon { margin: 0; } } @media (max-width: 400px) { .mkt-nav-cta { padding: 0.35rem 0.65rem; font-size: 0.7rem; } } .mkt-nav-mobile-auth { padding: 1rem 0 0.25rem; border-top: 1px solid var(--dz-border); margin-top: 0.25rem; } .mkt-nav-mobile-signin-link { display: block; padding: 0.75rem 0; font-size: 0.9rem; font-weight: 500; color: var(--dz-text-secondary); text-decoration: none; } .mkt-nav-mobile-signin-link:hover { color: var(--dz-text-primary); } /* Keep the menu out of the way once we're back on a desktop-width canvas. */ @media (min-width: 1025px) { .mkt-nav-mobile, .mkt-nav-mobile-overlay { display: none; } } @media (prefers-reduced-motion: reduce) { .mkt-nav-mobile, .mkt-nav-mobile-overlay { transition: none; } } /* ── Footer ──────────────────────────────────────────────────────── */ .mkt-footer { background: var(--mkt-footer-bg); color: var(--mkt-footer-fg); border-top: 1px solid var(--mkt-footer-border); padding: 2.25rem 2rem 1.5rem; } .mkt-footer-inner { max-width: 72rem; margin: 0 auto; } /* Headline (brand) and link columns share a single row on desktop so the footer stays compact instead of stacking with large vertical gaps. */ .mkt-footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 2.5rem; align-items: start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--mkt-footer-divider); } .mkt-footer-brand { display: flex; flex-direction: column; gap: 1rem; } .mkt-footer-headline { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; margin: 0; max-width: 18ch; } .mkt-footer-accent { background: linear-gradient( 135deg, var(--mkt-footer-fg) 0%, var(--mkt-footer-accent-stop) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mkt-footer-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; } .mkt-footer-cta-note { font-size: 0.75rem; color: var(--mkt-footer-muted); margin: -0.35rem 0 0; } .mkt-footer-cols { display: grid; /* Product · Solutions · Menu · Legal */ grid-template-columns: 1.15fr 0.75fr 0.85fr 0.85fr; gap: 2rem; } .mkt-footer-label { display: block; font-size: 0.7rem; font-weight: 500; color: var(--mkt-footer-label); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; } .mkt-footer-link-grid { display: grid; grid-template-columns: 1fr 1fr; /* Row gap gives adjacent touch targets enough spacing for Lighthouse. */ gap: 0.25rem 1.25rem; } .mkt-footer-link-grid a { display: inline-flex; align-items: center; min-height: 24px; font-size: 0.8125rem; font-weight: 500; color: var(--mkt-footer-link); text-decoration: none; transition: color 0.15s; padding: 0.25rem 0; line-height: 1.3; } .mkt-footer-link-grid a:hover { color: var(--mkt-footer-fg); } .mkt-footer-socials { display: flex; gap: 0.75rem; } .mkt-footer-socials a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--mkt-footer-social-border); color: var(--mkt-footer-muted); text-decoration: none; transition: color 0.15s, border-color 0.15s; } .mkt-footer-socials a:hover { color: var(--mkt-footer-fg); border-color: var(--mkt-footer-social-border-hover); } .mkt-footer-bottom { padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .mkt-footer-copy { font-size: 0.7rem; color: var(--mkt-footer-faint); } .mkt-footer-careers { font-size: 0.7rem; color: var(--mkt-footer-muted); margin: 0; } @media (max-width: 860px) { .mkt-footer-top { grid-template-columns: 1fr; gap: 2.25rem; } } @media (max-width: 640px) { .mkt-footer { padding: 2.5rem 1.25rem 1.5rem; } .mkt-footer-cols { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; } .mkt-footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* ── Shared utilities (docs/guides/other marketing pages) ────────── */ .mkt-container { max-width: 72rem; margin: 0 auto; padding: 0 2rem; } .mkt-section-header { text-align: center; max-width: 40rem; margin: 0 auto 3.5rem; } .mkt-section-tag { display: inline-block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dz-text-secondary); border: 1px solid var(--dz-border); padding: 0.25rem 0.75rem; border-radius: 100px; margin-bottom: 1rem; } .mkt-section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: var(--dz-text-primary); } .mkt-section-sub { margin-top: 1rem; font-size: 1.05rem; color: var(--dz-text-secondary); line-height: 1.7; } /* Buttons */ .mkt-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--brand-font-sans); font-weight: 600; font-size: 0.9375rem; padding: 0.6rem 1.4rem; border-radius: 10px; transition: all 0.2s; cursor: pointer; border: none; text-decoration: none; } .mkt-btn-primary { background: var(--mkt-btn-bg); color: var(--mkt-btn-text); } .mkt-btn-primary:hover { opacity: 0.8; transform: translateY(-1px); } .mkt-btn-ghost { background: transparent; color: var(--dz-text-secondary); border: 1px solid var(--dz-border); } .mkt-btn-ghost:hover { color: var(--dz-text-primary); border-color: var(--dz-border-hover); } .mkt-btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; } /* Contact / demo modals — same house accent as page CTAs */ .mkt-layout .csm-btn-primary { background: var(--mkt-btn-bg); color: var(--mkt-btn-text); } .mkt-layout .sdm-btn-primary { background: var(--mkt-btn-bg); color: var(--mkt-btn-text); } .mkt-layout .sdm-chip-active { background: var(--mkt-btn-bg); color: var(--mkt-btn-text); border-color: var(--mkt-btn-bg); } .mkt-layout .sdm-chip-active:hover { color: var(--mkt-btn-text); } /* Page-specific CTA classes that don't use lp-btn / mkt-btn */ .mkt-layout .imp-cta-btn, .mkt-layout .irm-btn-primary { background: var(--mkt-btn-bg); color: var(--mkt-btn-text); } .mkt-layout .lp-ua-deploy-btn { background: var(--mkt-btn-bg); color: var(--mkt-btn-text); border-color: var(--mkt-btn-bg); } /* Cards */ .mkt-card { padding: 1.75rem; border-radius: 14px; border: 1px solid var(--dz-border); background: var(--dz-bg-primary); transition: all 0.25s; } .mkt-card:hover { border-color: var(--dz-border-hover); transform: translateY(-2px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .mkt-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--dz-text-primary); } .mkt-card p { font-size: 0.8125rem; color: var(--dz-text-secondary); line-height: 1.65; } /* Scroll reveal */ .mkt-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .mkt-reveal.visible { opacity: 1; transform: translateY(0); } .mkt-reveal-delay-1 { transition-delay: 0.1s; } .mkt-reveal-delay-2 { transition-delay: 0.2s; }