/* =================================================================== Voyamore Core — Shared frontend tokens & utilities Loaded once and declared as a dependency by every feature's CSS. Honors `` for dark-mode flip. =================================================================== */ :root { --vym-bg: #F4F1EA; --vym-bg-soft: #F9F6EF; --vym-surface: #FFFFFF; --vym-text: #1A1612; --vym-muted: #6B6760; --vym-accent: #0FAFCB; --vym-accent-hover: #0C94AC; --vym-pill-fg: #FFFFFF; --vym-border: rgba(26, 22, 18, 0.10); --vym-border-strong: rgba(26, 22, 18, 0.18); --vym-glass: rgba(255, 255, 255, 0.65); --vym-scrim: rgba(0, 0, 0, 0.55); --vym-shadow: rgba(60, 45, 30, 0.18); --vym-shadow-lg: 0 30px 60px -30px rgba(0, 0, 0, 0.20); --vym-card-text: #FFFFFF; --vym-radius: 14px; --vym-radius-sm: 8px; --vym-radius-lg: 22px; --vym-radius-pill: 999px; --vym-maxw: 1240px; --vym-ease: cubic-bezier(0.4, 0, 0.2, 1); --vym-font-display: "Playfair Display", "Times New Roman", serif; /* Routed through Oxygen's global --font so the host theme can rebind the UI typography in one place. The 17 downstream selectors that use var(--vym-font-ui) inherit the change automatically. */ --vym-font-ui: var(--font); } :root.dark, html.dark { --vym-bg: #0B0F1A; --vym-bg-soft: #0F1422; --vym-surface: #131929; --vym-text: #F0EDE6; --vym-muted: #8892A4; --vym-accent: #0FAFCB; --vym-accent-hover: #1DB7D2; --vym-pill-fg: #0B0F1A; --vym-border: rgba(255, 255, 255, 0.08); --vym-border-strong: rgba(255, 255, 255, 0.16); --vym-glass: rgba(255, 255, 255, 0.04); --vym-scrim: rgba(0, 0, 0, 0.65); --vym-shadow: rgba(0, 0, 0, 0.60); --vym-shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.6); --vym-card-text: #F0EDE6; } /* ---------- Reveal-on-scroll utility ---------- */ .vym-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--vym-ease), transform 0.8s var(--vym-ease); will-change: opacity, transform; } .vym-reveal.in { opacity: 1; transform: translateY(0); } .vym-reveal[data-vym-delay="100"] { transition-delay: 0.10s; } .vym-reveal[data-vym-delay="200"] { transition-delay: 0.20s; } .vym-reveal[data-vym-delay="300"] { transition-delay: 0.30s; } .vym-reveal[data-vym-delay="400"] { transition-delay: 0.40s; } /* ---------- Typography utilities (scoped to feature wrappers) ---------- */ .vym-display { font-family: var(--vym-font-display); font-weight: 400; letter-spacing: -0.005em; line-height: 1.05; } .vym-display em { font-style: italic; font-weight: 400; color: var(--vym-accent); } .vym-eyebrow { font-family: var(--vym-font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--vym-muted); font-weight: 500; } .vym-section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; } .vym-section-head h2 { font-family: var(--vym-font-display); font-weight: 400; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05; margin: 12px 0 0; letter-spacing: -0.005em; color: var(--vym-text); } .vym-section-head h2 em { font-style: italic; color: var(--vym-accent); font-weight: 400; } .vym-section-head .vym-section-sub { color: var(--vym-muted); font-size: 15px; max-width: 420px; margin: 0; } /* ---------- Pill buttons (scoped utility) ---------- */ .vym-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--vym-radius-pill); font-family: var(--vym-font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; transition: transform 0.25s var(--vym-ease), background 0.25s var(--vym-ease), border-color 0.25s var(--vym-ease), color 0.25s var(--vym-ease), box-shadow 0.25s var(--vym-ease); cursor: pointer; white-space: nowrap; text-decoration: none; border: 1px solid transparent; } .vym-pill-primary { background: var(--vym-accent); color: var(--vym-pill-fg); font-weight: 600; } .vym-pill-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgba(15, 175, 203, 0.5); background: var(--vym-accent-hover); color: var(--vym-pill-fg); } .vym-pill-ghost { background: transparent; border-color: var(--vym-border); color: var(--vym-text); } .vym-pill-ghost:hover { border-color: var(--vym-text); background: var(--vym-glass); color: var(--vym-text); } .vym-pill svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; } /* Saved state — pill flips to the accent fill so it reads as "active". */ .vym-pill-ghost.is-saved, .vym-pill-ghost.is-active { background: var(--vym-accent); color: var(--vym-pill-fg); border-color: var(--vym-accent); } .vym-pill-ghost.is-saved svg, .vym-pill-ghost.is-active svg { fill: currentColor; } /* ---------- Custom select dropdown (.vym-vs-*) ---------- Markup is built by VoyamoreCore.select(selectEl). The original