/* ===== Font Faces ===== */ @font-face { font-family: 'Excon'; src: url('/assets/fonts/Excon/Excon-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Excon'; src: url('/assets/fonts/Excon/Excon-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ranade'; src: url('/assets/fonts/Ranade/Ranade-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Ranade'; src: url('/assets/fonts/Ranade/Ranade-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ===== Custom Properties ===== */ :root { /* Brand palette — locked */ --parchment: #F7F3EC; --ink: #140D13; --burgundy: #4A1942; --grape: #7B2D6E; --rose: #C47DB8; --verjus: #B8D96B; --amber: #D97757; /* Semantic tokens */ --bg: var(--parchment); --text: var(--ink); --text-muted: rgba(20, 13, 19, 0.65); --border: rgba(20, 13, 19, 0.12); --primary: var(--burgundy); --accent: var(--amber); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 5rem; --space-8: 8rem; /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem; --text-3xl: 3.5rem; --text-4xl: 5rem; /* Layout */ --max-width: 64rem; --reading-width: 38rem; } /* Dark theme: applied by the inline preload script in . The toggle button overrides prefers-color-scheme once the user makes an explicit choice. */ [data-theme="dark"] { --bg: var(--ink); --text: var(--parchment); --text-muted: rgba(247, 243, 236, 0.65); --border: rgba(247, 243, 236, 0.12); --primary: var(--rose); --accent: var(--amber); } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Ranade', system-ui, -apple-system, sans-serif; font-weight: 300; line-height: 1.6; transition: background-color 200ms ease, color 200ms ease; } img { max-width: 100%; height: auto; display: block; } /* ===== Typography ===== */ h1, h2, h3, h4, h5, h6 { font-family: 'Excon', Georgia, 'Times New Roman', serif; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); margin-top: var(--space-6); margin-bottom: var(--space-3); } a { color: var(--primary); } /* ===== Layout ===== */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 720px) { .container { padding: 0 var(--space-5); } } /* ===== Header ===== */ .site-header { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); } .header-inner { display: flex; justify-content: space-between; align-items: center; } .wordmark { font-family: 'Excon', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .site-nav { display: flex; gap: var(--space-4); } .site-nav a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; } .site-nav a:hover { color: var(--text); } @media (max-width: 719px) { .site-nav { gap: var(--space-3); } .site-nav a { font-size: var(--text-xs); } } /* ===== Footer ===== */ .site-footer { padding: var(--space-7) 0 var(--space-5); border-top: 1px solid var(--border); margin-top: var(--space-8); text-align: center; } .footer-tagline { font-family: 'Ranade', system-ui, -apple-system, sans-serif; font-style: italic; color: var(--text-muted); font-size: var(--text-lg); margin: 0 0 var(--space-4); } .footer-nav { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } .footer-nav a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; } .footer-nav a:hover { color: var(--text); } .footer-meta { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-3) 0 0; } .footer-disclaimer { font-style: italic; } /* ===== Prose (long-form pages) ===== */ .prose { max-width: var(--reading-width); margin: var(--space-7) auto var(--space-8); padding: 0 var(--space-4); } .prose h1 { font-size: var(--text-2xl); margin-top: 0; } @media (min-width: 720px) { .prose h1 { font-size: var(--text-3xl); } } .prose h2 { font-size: var(--text-xl); margin-top: var(--space-6); } .prose h3 { font-size: var(--text-lg); margin-top: var(--space-5); } .prose p, .prose li { font-size: var(--text-base); line-height: 1.6; } .prose ul { padding-left: var(--space-4); } .prose li { margin-bottom: var(--space-2); } .prose-meta { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); } .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; } .prose a:hover { color: var(--accent); } /* ===== Hero (landing page) ===== */ .hero { text-align: center; padding: var(--space-8) var(--space-4); min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .hero-mark img { width: 96px; height: auto; margin: 0 auto var(--space-4); } @media (min-width: 720px) { .hero-mark img { width: 120px; } } .hero-wordmark { font-family: 'Excon', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(3rem, 12vw, 5rem); letter-spacing: -0.04em; margin: 0 0 var(--space-3); } .hero-tagline { font-family: 'Ranade', system-ui, -apple-system, sans-serif; font-style: italic; font-size: var(--text-lg); color: var(--text-muted); margin: 0 0 var(--space-6); } .hero-description { max-width: 32rem; margin: 0 auto var(--space-6); font-size: var(--text-base); } .hero-status { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin: var(--space-5) 0 var(--space-6); } .hero-cta { font-size: var(--text-sm); color: var(--text-muted); } .hero-cta a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; } .hero-cta a:hover { color: var(--accent); } /* ===== Error Pages ===== */ .error { text-align: center; padding-top: var(--space-8); padding-bottom: var(--space-8); min-height: 60vh; display: flex; flex-direction: column; justify-content: center; } .error-code { font-family: 'Excon', Georgia, 'Times New Roman', serif; font-size: clamp(4rem, 15vw, 7rem); color: var(--primary); margin: 0; line-height: 1; } .error h1 { margin-top: var(--space-3); } .error a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; } .error a:hover { color: var(--accent); } /* ===== Age Gate ===== */ .age-gate { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); } .age-gate[hidden] { display: none; } .age-gate-panel { background: var(--bg); color: var(--text); padding: var(--space-6) var(--space-5); max-width: 28rem; width: 100%; text-align: center; border: 1px solid var(--border); } .age-gate-mark { font-family: 'Excon', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--primary); margin: 0 0 var(--space-4); } .age-gate-heading { font-family: 'Excon', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: var(--text-xl); margin: 0 0 var(--space-3); } .age-gate-body { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-5); } .age-gate-actions { display: flex; flex-direction: column; gap: var(--space-3); } @media (min-width: 720px) { .age-gate-actions { flex-direction: row; justify-content: center; } } /* ===== Buttons ===== */ .btn { font-family: 'Ranade', system-ui, -apple-system, sans-serif; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--space-3) var(--space-5); border: 1px solid currentColor; background: transparent; cursor: pointer; text-decoration: none; display: inline-block; transition: background-color 150ms ease, color 150ms ease; } /* Button color rules use element-prefixed selectors (a.btn-primary instead of just .btn-primary) to outrank the browser's default a:link (0,1,1) specificity. Without this, anchor-tag buttons inherit the body text color and become invisible on the burgundy background. */ .btn-primary, a.btn-primary, a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active { color: var(--bg); background: var(--primary); border-color: var(--primary); text-decoration: none; } a.btn-primary:hover, a.btn-primary:focus { background: var(--text); border-color: var(--text); color: var(--bg); } .btn-ghost, a.btn-ghost, a.btn-ghost:link, a.btn-ghost:visited, a.btn-ghost:hover, a.btn-ghost:focus, a.btn-ghost:active { color: var(--text-muted); text-decoration: none; } a.btn-ghost:hover, a.btn-ghost:focus { color: var(--text); } /* =================================================================== v1.1 UX UPGRADE — Theme toggle, hamburger menu, scroll reveals, custom cursor =================================================================== */ /* ----- Header controls (toggle + hamburger + nav) ----- */ .header-controls { display: flex; align-items: center; gap: var(--space-3); } .icon-btn { background: transparent; border: none; color: var(--text); font-size: var(--text-lg); padding: var(--space-2); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: color 150ms ease, transform 150ms ease; } .icon-btn:hover { color: var(--primary); } .icon-btn:active { transform: scale(0.92); } .icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Hamburger is hidden on desktop, shown on mobile */ .nav-toggle { display: none; } /* ----- Mobile nav overlay ----- */ .mobile-nav { position: fixed; inset: 0; background: var(--bg); z-index: 900; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms; } .mobile-nav.open { opacity: 1; visibility: visible; transition: opacity 250ms ease, visibility 0s linear 0s; } .mobile-nav-inner { position: relative; padding: var(--space-6) var(--space-4); text-align: center; max-width: 28rem; width: 100%; } .nav-close { position: absolute; top: var(--space-4); right: var(--space-4); font-size: var(--text-xl); } .mobile-nav-links { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); } .mobile-nav-links a { font-family: 'Excon', serif; font-weight: 500; font-size: var(--text-xl); color: var(--text); text-decoration: none; letter-spacing: -0.01em; transition: color 150ms ease; } .mobile-nav-links a:hover { color: var(--primary); } /* ----- Responsive: hide inline nav and show hamburger on mobile ----- */ @media (max-width: 719px) { .site-nav { display: none; } .nav-toggle { display: inline-flex; } /* Tighten header controls on small screens */ .header-controls { gap: var(--space-2); } } /* ----- Scroll reveal animations ----- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease-out, transform 700ms ease-out; will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger children of a .reveal-group */ .reveal-group > .reveal:nth-child(1) { transition-delay: 0ms; } .reveal-group > .reveal:nth-child(2) { transition-delay: 100ms; } .reveal-group > .reveal:nth-child(3) { transition-delay: 200ms; } .reveal-group > .reveal:nth-child(4) { transition-delay: 300ms; } .reveal-group > .reveal:nth-child(5) { transition-delay: 400ms; } .reveal-group > .reveal:nth-child(6) { transition-delay: 500ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ----- Prose CTA spacing (the Contact Us button in long-form pages) ----- */ .prose-cta { margin-top: var(--space-4); margin-bottom: var(--space-5); } /* ----- Hero CTA: button-styled, not text ----- */ /* (Overrides the original .hero-cta paragraph styling now that it's a div with a button) */ .hero-cta { margin-top: var(--space-5); } .hero-cta .btn { display: inline-flex; align-items: center; gap: var(--space-2); } .hero-cta .btn i { font-size: 0.9em; } /* ----- Custom cursor (desktop only, theme-aware) ----- Two SVG files: Grape on Parchment for light, Poire on Ink for dark. CSS cursor URLs can't be templated/variabled, so we point at different files via the [data-theme] attribute. */ @media (pointer: fine) { /* Light mode (default): Grape on Parchment. Dark mode: Poire on Ink. Filenames are color-explicit to prevent confusion with theme labels. */ html { cursor: url('/assets/images/cursor-wineglass-grape.svg') 12 4, auto; } html[data-theme="dark"] { cursor: url('/assets/images/cursor-wineglass-poire.svg') 12 4, auto; } }