/* ============================================================ Meandr Design Tokens + Landing CSS Loaded on front-end (wp_enqueue_scripts) and block editor (add_editor_style). Dark-first. ============================================================ */ /* ── Local font (kept for optional editorial use) ────────── */ @font-face { font-family: 'Alexandra'; src: url('../fonts/alexandra.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────── */ :root { /* Landing tokens — dark values, always active */ --bg: #0a0a0f; --card: #1a1a24; --chip: #27273a; --border: #27273a; --indigo: #818cf8; --violet: #a78bfa; --cyan: #22d3ee; --green: #34d399; --red: #f87171; --amber: #f59e0b; --text: #f1f5f9; --muted: #94a3b8; --grad: linear-gradient(120deg, #818cf8, #a78bfa); --grad-brand: linear-gradient(120deg, #a78bfa, #22d3ee); /* wordmark */ --font-head: 'Outfit', 'DM Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; --font-brand: 'Pacifico', cursive; --radius: 0.75rem; /* WP semantic tokens — light values for editor palette */ --color-brand-indigo: #818cf8; --color-brand-violet: #a78bfa; --color-brand-cyan: #22d3ee; --color-brand-slate: #0f172a; --color-background: #ffffff; --color-foreground: #0f172a; --color-card: #ffffff; --color-primary: #6366f1; --color-secondary: #8b5cf6; --color-accent: #06b6d4; --color-muted: #f8fafc; --color-muted-foreground: #64748b; --color-border: #e2e8f0; --color-ring: #6366f1; --color-destructive: #ef4444; --color-success: #10b981; --color-warning: #f59e0b; --meandr-radius: var(--radius); --meandr-gradient: var(--grad); } /* WP block dark overrides — applied via */ [data-theme="dark"] { --color-background: #0a0a0f; --color-foreground: #f1f5f9; --color-card: #1a1a24; --color-primary: #818cf8; --color-secondary: #a78bfa; --color-accent: #22d3ee; --color-muted: #27273a; --color-muted-foreground: #94a3b8; --color-border: #27273a; --color-ring: #818cf8; --color-destructive: #f87171; --color-success: #34d399; --color-warning: #fbbf24; --meandr-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-head); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } ul { list-style: none; } /* Hand cursor on every interactive element */ a[href], button, summary, label, [role="button"], [data-tooltip] { cursor: pointer; } /* ── Layout helpers ──────────────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius); font-family: var(--font-head); font-weight: 600; font-size: 15px; cursor: pointer; border: none; transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-sm { padding: 9px 18px; font-size: 13px; } .btn-grad { background: var(--grad); color: #fff; box-shadow: 0 10px 28px -8px rgba(129,140,248,0.55); } .btn-grad:hover { box-shadow: 0 14px 32px -8px rgba(129,140,248,0.7); } .btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--indigo); background: rgba(129,140,248,0.06); } .btn-white { background: #fff; color: #4f46e5; font-weight: 700; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.4); } .btn-white:hover { background: #f0f0ff; } /* ── Section typography helpers ──────────────────────────── */ .section-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--indigo); margin-bottom: 12px; } .section-heading { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } /* ── Scroll-reveal ───────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].revealed { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════ */ .navbar { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; background: linear-gradient(to bottom, rgba(10,10,15,0.85) 60%, transparent 100%); border-bottom: 1px solid transparent; transition: background 0.3s, border-color 0.3s; } .navbar.scrolled { background: rgba(10,10,15,0.92); } .navbar-inner { display: flex; align-items: center; height: 68px; max-width: 1200px; margin: 0 auto; padding: 0 28px; gap: 32px; } .navbar-brand { flex-shrink: 0; } .brand-word { display: inline-block; font-family: var(--font-brand); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .navbar-menu { display: flex; align-items: center; gap: 2px; flex: 1; } .nav-link { padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #ffffff; transition: color 0.2s, background 0.2s; } .nav-link:hover { color: #ffffff; background: rgba(255,255,255,0.1); } .navbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; } /* Tooltip */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); background: rgba(26,26,36,0.96); color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Hamburger */ .navbar-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; flex-shrink: 0; transition: background 0.2s; } .navbar-toggle:hover { background: var(--chip); } .navbar-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ═══════════════════════════════════════════════════════════ HERO SCROLL TRACK ══════════════════════════════════════════════════════════ */ .hero-track { position: relative; } .hero-stage { position: relative; width: 100%; /* One full screen. The navbar is fixed (overlays, takes no flow height), so it's NOT subtracted — only the WP admin bar, which actually pushes the page down. */ height: 100vh; overflow: hidden; background: var(--bg); } .admin-bar .hero-stage { height: calc(100vh - 32px); } @media (max-width: 782px) { .admin-bar .hero-stage { height: calc(100vh - 46px); } } /* Shared photo-canvas: hero.js sizes it to "cover" the stage at the 2000:1024 photo ratio, centred. The photo, bubbles and #screen are its children, so they all zoom/offset as one unit (+ the static scale(1.05) framing). Its own GPU layer holds the static photo — bubbles/laptop composite above without re-raster. */ .hero-canvas { position: absolute; top: 50%; left: 50%; width: 100%; /* pre-JS default; hero.js overrides with exact cover px */ height: 100%; transform: translate(-50%, -50%) scale(1.05); will-change: transform; } /* bg photo fills the canvas exactly (canvas already matches the photo ratio). */ .hero-bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; } /* heading — absolute inside hero-stage; single text column over the bg image (the diagram was moved to the Problem section) */ .hero-heading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 88px 0 40px; background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(10,10,15,0.82) 0%, transparent 80%); /* own GPU layer so this full-screen gradient (stacked above the bubbles) doesn't force them to repaint the backdrop — restores the isolation removed earlier. */ transform: translateZ(0); } .hero-heading > .container { width: 100%; } .hero-col-text { display: flex; flex-direction: column; justify-content: center; max-width: 640px; } /* ===== HERO BUBBLES — composited CSS keyframes (literal px, injected by JS) ===== The @keyframes themselves live in a