/* ═══════════════════════════════════════════════════════════════════════════ BQ EDITORIAL — shared design system Aesthetic: Instrument Serif × cream-on-ink × gold accent × editorial layout Include AFTER style.css to override. Add to opt in. ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); html.editorial { --ed-ink: #0b0b0d; --ed-paper: #f5f1e8; --ed-paper-dim: rgba(245,241,232,0.6); --ed-paper-faint: rgba(245,241,232,0.35); --ed-line: rgba(245,241,232,0.10); --ed-line-strong: rgba(245,241,232,0.22); --ed-gold: #d4a64b; --ed-gold-bright: #f0c462; --ed-crimson: #c84630; --ed-shadow-deep: 0 30px 80px -10px rgba(0,0,0,0.7); --ed-ease: cubic-bezier(.16,1,.3,1); --ed-ease-spring: cubic-bezier(.34,1.56,.64,1); } html.editorial body { font-family: var(--font-en) !important; background: var(--ed-ink) !important; color: var(--ed-paper) !important; font-size: 17px; font-weight: 400; line-height: 1.65; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; cursor: auto; } html.editorial body[lang="he"], html.editorial [lang="he"], html.editorial body[dir="rtl"] { font-family: 'Heebo', 'Inter', system-ui, sans-serif !important; } @media (max-width: 900px), (pointer: coarse) { html.editorial body { cursor: auto; font-size: 16px; } } html.editorial ::selection { background: var(--ed-gold); color: var(--ed-ink); } /* ── Custom cursor (auto-mounts via editorial.js) ── */ html.editorial .ed-cursor-dot, html.editorial .ed-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate3d(-50%, -50%, 0); mix-blend-mode: difference; will-change: transform; } html.editorial .ed-cursor-dot { display:none !important; width: 4px; height: 4px; background: #fff; border-radius: 50%; } html.editorial .ed-cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; transition: width .25s var(--ed-ease), height .25s var(--ed-ease), border-color .2s, background .2s; } html.editorial .ed-cursor-ring.hover { width: 64px; height: 64px; border-color: var(--ed-gold); background: rgba(212,166,75,0.06); } @media (max-width: 900px), (pointer: coarse) { html.editorial .ed-cursor-dot, html.editorial .ed-cursor-ring { display: none; } } /* ── Spotlight overlay ── */ html.editorial .ed-spotlight { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%), rgba(212,166,75,0.05) 0%, transparent 45%); } /* ── Grain ── */ html.editorial .ed-grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Typography ── */ html.editorial h1, html.editorial .ed-h1 { font-family: var(--font-display) !important; font-size: clamp(56px, 9vw, 128px) !important; font-weight: 700 !important; line-height: 0.95 !important; letter-spacing: -0.04em !important; } html.editorial h2, html.editorial .ed-h2 { font-family: var(--font-display) !important; font-size: clamp(40px, 6vw, 88px) !important; font-weight: 700 !important; line-height: 1.0 !important; letter-spacing: -0.035em !important; } html.editorial h3, html.editorial .ed-h3 { font-family: var(--font-display) !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; } html.editorial h1 em, html.editorial h2 em, html.editorial h3 em { font-style: normal; color: var(--ed-gold); } html.editorial .ed-eyebrow { font-family: var(--font-en); font-size: 11px; color: var(--ed-gold); text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 10px; } html.editorial .ed-eyebrow::before { content: '§'; font-family: var(--font-display); font-size: 16px; font-style: normal; color: var(--ed-paper-dim); } html.editorial .ed-lede { font-family: var(--font-en); font-size: clamp(17px, 1.8vw, 21px); font-weight: 400; line-height: 1.6; color: var(--ed-paper-dim); max-width: 56ch; letter-spacing: -0.005em; } html.editorial .ed-lede strong { color: var(--ed-paper); font-weight: 600; } /* ── Buttons ── */ html.editorial .ed-btn-prim, html.editorial .ed-btn-ghost { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; font-size: 14px; font-weight: 500; border-radius: 100px; transition: transform .35s var(--ed-ease-spring), box-shadow .25s, background .25s, color .25s; font-family: var(--font-en); border: 0; } html.editorial .ed-btn-prim { background: var(--ed-paper); color: var(--ed-ink); box-shadow: 0 0 0 1px var(--ed-paper), 0 12px 40px -12px rgba(245,241,232,0.4); } html.editorial .ed-btn-prim:hover { background: var(--ed-gold-bright); box-shadow: 0 0 0 1px var(--ed-gold-bright), 0 18px 56px -12px rgba(212,166,75,0.5); transform: translateY(-2px); } html.editorial .ed-btn-prim::after { content: '→'; font-size: 17px; transition: transform .35s var(--ed-ease-spring); } html.editorial .ed-btn-prim:hover::after { transform: translateX(4px); } html.editorial .ed-btn-ghost { border: 1px solid var(--ed-line-strong); color: var(--ed-paper); background: rgba(245,241,232,0.02); } html.editorial .ed-btn-ghost:hover { border-color: var(--ed-paper); background: rgba(245,241,232,0.06); transform: translateY(-2px); } /* ── Topnav ── */ html.editorial .ed-topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 36px; transition: padding .35s var(--ed-ease), background .35s var(--ed-ease), backdrop-filter .35s; background: rgba(11,11,13,0.6); backdrop-filter: saturate(1.4) blur(16px); } html.editorial .ed-topnav.scrolled { padding: 12px 36px; background: rgba(11,11,13,0.92); border-bottom: 1px solid var(--ed-line); } html.editorial .ed-logo { font-family: var(--font-display); font-size: 26px; font-weight: 400; font-style: normal; letter-spacing: -0.02em; } html.editorial .ed-logo .gold { color: var(--ed-gold); font-style: normal; font-family: var(--font-en); font-weight: 500; font-size: 18px; letter-spacing: 0.02em; margin-left: 4px; } html.editorial .ed-topnav-links { display: flex; gap: 32px; align-items: center; font-family: var(--font-en); } html.editorial .ed-topnav-links a { font-size: 12px; color: var(--ed-paper-dim); transition: color .2s; } html.editorial .ed-topnav-links a:hover { color: var(--ed-paper); } html.editorial .ed-topnav-cta { justify-self: end; font-family: var(--font-en); font-size: 12px; padding: 10px 20px; border: 1px solid var(--ed-line-strong); border-radius: 100px; color: var(--ed-paper); transition: border-color .2s, background .2s, color .2s; } html.editorial .ed-topnav-cta:hover { border-color: var(--ed-gold); background: var(--ed-gold); color: var(--ed-ink); } @media (max-width: 700px) { html.editorial .ed-topnav { grid-template-columns: 1fr auto; padding: 16px 22px; } html.editorial .ed-topnav-links { display: none; } } /* ── Container & sections ── */ html.editorial .ed-container { width: 92%; max-width: 1280px; margin: 0 auto; } html.editorial .ed-section { padding: 120px 0; position: relative; } @media (max-width: 900px) { html.editorial .ed-section { padding: 80px 0; } } /* ── Bento grid ── */ html.editorial .ed-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } html.editorial .ed-cell { position: relative; overflow: hidden; background: rgba(245,241,232,0.025); border: 1px solid var(--ed-line); border-radius: 18px; padding: 32px; transition: border-color .35s, transform .5s var(--ed-ease); text-decoration: none; color: inherit; display: flex; flex-direction: column; } html.editorial .ed-cell:hover { border-color: rgba(212,166,75,0.35); transform: translateY(-4px); } html.editorial .ed-cell::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px circle at var(--cx, 50%) var(--cy, 50%), rgba(212,166,75,0.07), transparent 50%); opacity: 0; transition: opacity .35s; pointer-events: none; } html.editorial .ed-cell:hover::before { opacity: 1; } html.editorial .ed-cell .ed-icon { font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--ed-paper-faint); letter-spacing: 0.08em; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } html.editorial .ed-cell .ed-icon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ed-gold); } html.editorial .ed-cell h3 { margin-bottom: 10px; } html.editorial .ed-cell p { font-size: 15px; color: var(--ed-paper-dim); line-height: 1.6; font-weight: 400; } html.editorial .ed-cell .ed-tag { font-family: var(--font-en); font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.08em; display: inline-block; align-self: flex-start; margin-top: auto; margin-bottom: 4px; background: rgba(212,166,75,0.12); color: var(--ed-gold); border: 1px solid rgba(212,166,75,0.25); } html.editorial .ed-cell .ed-tag.free { color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.25); } html.editorial .ed-cell .ed-tag.new { color: var(--ed-crimson); background: rgba(200,70,48,0.1); border-color: rgba(200,70,48,0.25); } html.editorial .ed-bento .col-2 { grid-column: span 2; } html.editorial .ed-bento .col-3 { grid-column: span 3; } html.editorial .ed-bento .col-4 { grid-column: span 4; } html.editorial .ed-bento .col-6 { grid-column: span 6; } @media (max-width: 900px) { html.editorial .ed-bento { grid-template-columns: repeat(2, 1fr); } html.editorial .ed-bento .col-2, html.editorial .ed-bento .col-3, html.editorial .ed-bento .col-4, html.editorial .ed-bento .col-6 { grid-column: span 2; } } /* ── Reduce motion ── */ @media (prefers-reduced-motion: reduce) { html.editorial *, html.editorial *::before, html.editorial *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } html.editorial .ed-cursor-dot, html.editorial .ed-cursor-ring { display:none !important; }