/* ========================================================================== VERSYR · The Mark — drop-in CSS Tokens + lockup styles for use across versyr.io and customer-facing surfaces. Requires the three Google Fonts (Cormorant Garamond, Outfit, DM Mono) loaded in . ========================================================================== */ :root{ --versyr-ink: #0A090C; --versyr-surface: #151217; --versyr-panel: #1C1520; --versyr-ember: #C8923A; --versyr-blood: #7A1414; --versyr-parchment: #F2EDE4; --versyr-body: #C8C0AE; --versyr-muted: #7A7068; --versyr-border: rgba(122,20,20,0.25); --versyr-border-2: rgba(122,20,20,0.45); --versyr-border-3: rgba(200,146,58,0.20); --versyr-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --versyr-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --versyr-font-mono: 'DM Mono', 'SF Mono', Consolas, monospace; } /* ── The Wordmark ──────────────────────────────────────────────────────── */ /* Usage: Versyr */ .versyr-wordmark{ font-family: var(--versyr-font-display); font-weight: 300; font-style: normal; font-size: 1em; /* size from parent */ line-height: 1; letter-spacing: -0.01em; color: var(--versyr-parchment); white-space: nowrap; display: inline-block; } .versyr-wordmark em{ font-style: italic; font-weight: 400; color: var(--versyr-ember); } /* Inverse on parchment (light backgrounds): */ .versyr-wordmark--inverse { color: var(--versyr-ink); } .versyr-wordmark--inverse em { color: var(--versyr-blood); } /* Single-color (foil, etch, tight print): */ .versyr-wordmark--mono-ember { color: var(--versyr-ember); } .versyr-wordmark--mono-ember em { color: var(--versyr-ember); } .versyr-wordmark--mono-parchment { color: var(--versyr-parchment); } .versyr-wordmark--mono-parchment em{ color: var(--versyr-parchment); } /* ── The Lockup (seal + wordmark) ──────────────────────────────────────── */ .versyr-lockup{ display: inline-flex; align-items: center; gap: 0.18em; line-height: 1; } .versyr-lockup .versyr-seal{ width: 0.74em; /* ≈ cap-height of the wordmark */ height: 0.74em; display: block; } /* Stacked variant */ .versyr-lockup--stacked{ flex-direction: column; gap: 0.20em; } .versyr-lockup--stacked .versyr-seal{ width: 1.05em; height: 1.05em; } /* ── The signature accent bar ──────────────────────────────────────────── */ /* 2px transparent → ember → blood → ember → transparent. */ /* Use as a sticky-header ::after, modal top, section divider, etc. */ .versyr-accent-bar{ height: 2px; background: linear-gradient( 90deg, transparent, var(--versyr-ember) 25%, var(--versyr-blood) 50%, var(--versyr-ember) 75%, transparent ); } /* Use on a sticky site header: */ .versyr-site-header::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--versyr-ember) 25%, var(--versyr-blood) 50%, var(--versyr-ember) 75%, transparent ); } /* ── Clear space helper ───────────────────────────────────────────────── */ /* Put the lockup inside this container to enforce X-padding on all sides */ /* where X is the wordmark's cap-height (0.7em). */ .versyr-lockup-frame{ display: inline-block; padding: 0.7em; }