/* Rasavi — shared theme tokens (light + dark, persistable via data-theme attribute on ) */ :root { --bg: #fafaf8; --bg-void: #f0eee8; --bg-card: #ffffff; --bg-surface: #ffffff; --ink: #1a1a1a; --ink-2: #4a4a4a; --ink-3: #888; --line: rgba(0,0,0,0.08); /* Coral-red palette (ADR 2026-05-01 v3): modern appetite red, mode-twinned. Light #3A7A62, dark #4F9A7C — both pop against white plate / black bg brand. */ --coral: #3A7A62; --coral-bright: #4F9A7C; --accent: var(--coral); --accent-bright: var(--coral-bright); --mark: var(--coral); --mark-soft: var(--coral-bright); --accent-light: var(--coral-bright); --accent-soft: var(--coral-bright); --accent-dim: rgba(58,122,98,0.12); --accent-glow: rgba(58,122,98,0.06); --accent-subtle: rgba(58,122,98,0.10); --gold-trim: #C9A96E; --warm: var(--coral); --warm-soft: var(--coral-bright); --sunset-grad: linear-gradient(135deg, #3A7A62 0%, #4F9A7C 100%); --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --color-border: rgba(0,0,0,0.08); --duration-fast: 0.3s; --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1); } html[data-theme="dark"] { --bg: #0e0e10; --bg-void: #15151a; --bg-card: #15151a; --bg-surface: #1a1a20; --ink: #f4f1e8; --ink-2: #c0bdb3; --ink-3: #888; --line: rgba(255,255,255,0.08); --color-border: rgba(255,255,255,0.08); /* Mode-twin: brighter coral for AAA contrast on near-black bg. */ --coral: #4F9A7C; --coral-bright: #4F9A7C; --accent-dim: rgba(79,154,124,0.18); --accent-glow: rgba(79,154,124,0.10); --accent-subtle: rgba(79,154,124,0.14); --sunset-grad: linear-gradient(135deg, #3A7A62 0%, #4F9A7C 100%); } /* Canonical header — same across every page (gradi pattern, rasavi-coloured) */ .header { position: fixed; top: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.4s ease; } .header--hidden { opacity: 0; pointer-events: none; } .back-btn { position: absolute; left: 0; background: none; border: none; color: var(--ink-3); font-size: 1.5rem; cursor: pointer; min-width: 56px; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 0 0 0 0.75rem; transition: color 0.3s; font-family: inherit; } .back-btn:hover { color: var(--ink); } .header-title { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; color: var(--ink); } /* Universal BETA capsule — sankofa.page spec ported (font 0.52rem, padding 0.14/0.42, letter-spacing 0.08em, vertical-align 2px). Used in every page header. */ .beta-tag { font-family: var(--font-body); font-size: 0.52rem; font-weight: 700; background: var(--accent); color: #fff; padding: 0.14rem 0.42rem; border-radius: 3px; letter-spacing: 0.08em; margin-left: 6px; vertical-align: 2px; text-transform: uppercase; display: inline-block; } /* Site footer — architectureofchoice "gravitas" pattern. Full-viewport height (100dvh) so scrolling to the bottom of any page leaves the reader with only the italic tagline + glowing brand mark in the centre. The fixed .header is hidden via IntersectionObserver (footer.js) when this element is in view, removing UI chrome for the closing moment. */ .site-footer { min-height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: 0.6rem; } .site-footer__motto { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--ink-3); margin-bottom: 1.2rem; } .site-footer__logo { display: inline-block; opacity: 0.8; transition: opacity 0.3s ease; } .site-footer__logo:hover { opacity: 1; } /* Header fade — toggled by footer.js IntersectionObserver when the gravitas footer is in view */ .header.header--hidden { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } /* Identical to home.html .header-logo-icon: 32px square, 8px radius, 1.5px accent border, opacity 1.0. Soft breathing glow instead of harsh corona — keeps the brand mark consistent everywhere it appears (header, footer, recipient hero). */ .site-footer__logo img { display: block; width: 32px !important; height: 32px !important; max-width: 32px; max-height: 32px; border-radius: 8px; border: 1.5px solid var(--accent); object-fit: cover; opacity: 1; animation: footerGlow 3.6s ease-in-out infinite; } @keyframes footerGlow { 0%, 100% { box-shadow: 0 0 6px rgba(58,122,98,0.25); } 50% { box-shadow: 0 0 14px rgba(58,122,98,0.45); } } /* Body baselines */ html { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } html, body { background: var(--bg); color: var(--ink); } ::-webkit-scrollbar { display: none; } html { scrollbar-width: none; }