/* Shared chrome for the Journal pages. * * WHY THIS FILE EXISTS * The Journal is static HTML in public/blog/, deliberately — see the note at * the top of any article for the reason. The cost of sitting outside the React * app is that it inherits none of it: the custom cursor, the floating WhatsApp * button and the shared palette are all provided by components and by * src/index.css, none of which these pages load. So a reader moving from the * site to an article lost the cursor, lost the WhatsApp button and met a * subtly different set of colours. * * The values here are copied from src/index.css rather than imported, because * Vite fingerprints that file into assets/index-.css and a static page * cannot name a file whose name changes every build. Keep the two in step. * * ADDING A NEW ARTICLE * Two lines, both inside : * * * The script injects the WhatsApp button and starts the cursor; nothing else * is needed. */ /* Palette — matches :root in src/index.css. Declared again because the pages that load this file may set only some of them. */ :root { --gold: #C4A96B; --bg: #0D0B10; --bg-alt: #110E15; --text: #F0EBE3; --text-muted: rgba(240, 235, 227, 0.45); --border: rgba(240, 235, 227, 0.1); --border-gold: rgba(196, 169, 107, 0.3); } /* ── Custom cursor ───────────────────────────────────────────────────── The ring is drawn by blog-chrome.js; this only hides the native pointer, and only once the script has confirmed a fine pointer. Hiding it from CSS alone would leave touch and keyboard users with no pointer at all. */ html.custom-cursor-active, html.custom-cursor-active * { cursor: none !important; } .lfa-cursor { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(240, 235, 227, 0.6); border-radius: 50%; transition: width 0.25s ease-out, height 0.25s ease-out, border-color 0.25s ease-out, opacity 0.2s ease-out; } .lfa-cursor::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--text); transition: background 0.25s; } .lfa-cursor.is-hovering { width: 48px; height: 48px; border-color: var(--gold); } .lfa-cursor.is-hovering::after { background: var(--gold); } .lfa-cursor.is-hidden { opacity: 0; } /* ── Floating WhatsApp button ────────────────────────────────────────── Not WhatsApp's brand green: that colour reads as a bolted-on widget against this palette. Deep forest with the site's own gold hairline instead. */ .wa-fab { position: fixed; right: 28px; bottom: 28px; z-index: 90; display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: env(safe-area-inset-bottom, 0px); } .wa-fab-disc { width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, #144535 0%, #0E2E24 45%, #081914 100%); border: 1px solid var(--border-gold); color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(240, 235, 227, 0.06); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease, color 0.45s ease; } .wa-fab-icon { display: block; } .wa-fab-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text); background: rgba(13, 11, 16, 0.92); border: 1px solid var(--border); padding: 10px 16px; white-space: nowrap; opacity: 0; transform: translateX(10px); pointer-events: none; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); backdrop-filter: blur(8px); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .wa-fab:hover .wa-fab-disc { transform: translateY(-3px) scale(1.05); border-color: var(--gold); color: var(--gold); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.6), 0 0 22px rgba(196, 169, 107, 0.28), inset 0 1px 0 rgba(240, 235, 227, 0.1); } .wa-fab:hover .wa-fab-label { opacity: 1; transform: translateX(0); } } .wa-fab:focus-visible .wa-fab-disc, .wa-fab:active .wa-fab-disc { border-color: var(--gold); color: var(--gold); } @media (max-width: 640px) { .wa-fab { right: 18px; bottom: 18px; } .wa-fab-disc { width: 52px; height: 52px; } .wa-fab-icon { width: 23px; height: 23px; } .wa-fab-label { display: none; } } @media (prefers-reduced-motion: reduce) { .wa-fab-disc, .wa-fab-label { transition: none; } .lfa-cursor { transition: none; } } /* ── Shared polish the articles were missing ─────────────────────────── The SPA sets these globally; without them the Journal renders with the browser's own focus ring and selection colour, which is the sort of small inconsistency that reads as "different site". */ ::selection { background: rgba(196, 169, 107, 0.25); color: var(--text); } :focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Links pick up the gold underline treatment used across the site. */ a { transition: color 0.3s ease; }