/* The Xmas Club — design tokens & base styles */ :root { /* Palettes — toggled via data-palette on */ --evergreen: #0E2820; --evergreen-deep: #081813; --evergreen-soft: #1A3A2D; --ivory: #F2EADA; --ivory-warm: #F7F1E1; --ivory-paper: #EDE4D0; --gold: #B8893B; --gold-light: #D4B26A; --gold-deep: #8E6A2C; --oxblood: #5C1A1B; --ink: #1B1410; /* Semantic */ --bg: var(--ivory); --bg-elev: var(--ivory-warm); --fg: var(--evergreen); --fg-muted: rgba(14, 40, 32, 0.62); --fg-faint: rgba(14, 40, 32, 0.38); --rule: rgba(14, 40, 32, 0.14); --rule-soft: rgba(14, 40, 32, 0.08); --accent: var(--gold); --accent-deep: var(--gold-deep); --shadow-soft: 0 1px 2px rgba(14,40,32,.06), 0 8px 24px rgba(14,40,32,.08); --shadow-card: 0 1px 2px rgba(14,40,32,.04), 0 18px 50px rgba(14,40,32,.12); --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-body: "Geist", "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Dark "evergreen lounge" mode used inside the members area */ [data-theme="forest"] { --bg: var(--evergreen); --bg-elev: var(--evergreen-soft); --fg: var(--ivory); --fg-muted: rgba(242, 234, 218, 0.66); --fg-faint: rgba(242, 234, 218, 0.38); --rule: rgba(242, 234, 218, 0.14); --rule-soft: rgba(242, 234, 218, 0.07); } /* Alt palette: Snow (cool, mostly white with evergreen accents) */ [data-palette="snow"] { --evergreen: #14342B; --ivory: #F4F2EC; --ivory-warm: #FBFAF6; --ivory-paper: #ECEAE2; --gold: #8E6A2C; --gold-light: #B89150; } /* Alt palette: Hearth (warmer, oxblood-forward) */ [data-palette="hearth"] { --evergreen: #2A1414; --evergreen-soft: #3A1F1F; --ivory: #F1E6D2; --ivory-warm: #F8EFDC; --ivory-paper: #E8DCC4; --gold: #B8893B; --gold-light: #D4B26A; --oxblood: #7A1F1B; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } #root { min-height: 100vh; } /* Display type */ .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.02; font-feature-settings: "liga", "dlig"; } .display em, .display i { font-style: italic; font-weight: 400; color: var(--accent-deep); } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease; text-decoration: none; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--evergreen); color: var(--ivory); } .btn-primary:hover { background: var(--evergreen-deep); } .btn-gold { background: var(--gold); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.12); } .btn-gold:hover { background: var(--gold-light); } .btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--rule); } .btn-ghost:hover { background: rgba(14,40,32,.04); } .btn-link { background: transparent; color: var(--fg); height: auto; padding: 0; border-radius: 0; border-bottom: 1px solid currentColor; border-radius: 0; } .btn-sm { height: 36px; padding: 0 16px; font-size: 13px; } /* Inputs */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); } .field input, .field select, .field textarea { height: 48px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-elev); color: var(--fg); font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color .15s, background .15s; } .field textarea { height: auto; padding: 12px 16px; resize: vertical; min-height: 96px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--ivory-warm); } /* Card / panel */ .card { background: var(--bg-elev); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 28px; } /* Section container */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; } /* Snow + ornament canvas overlay */ .bg-canvas { position: absolute; inset: 0; pointer-events: none; } /* Hide scrollbars on dashboard ribbons */ .scroll-x { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .scroll-x::-webkit-scrollbar { display: none; } /* Animated under-line for inline links */ .ulink { position: relative; text-decoration: none; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .ulink:hover { color: var(--accent-deep); } /* Image placeholder (diagonal stripes) */ .imgph { position: relative; background: repeating-linear-gradient(135deg, rgba(14,40,32,.07) 0 1px, transparent 1px 14px), var(--ivory-paper); color: var(--fg-muted); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: var(--r-md); } [data-theme="forest"] .imgph { background: repeating-linear-gradient(135deg, rgba(242,234,218,.06) 0 1px, transparent 1px 14px), rgba(242,234,218,.04); } /* Subtle fade-in on mount */ @keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fadein { animation: fadein .55s ease both; } .fadein-2 { animation: fadein .65s ease .12s both; } .fadein-3 { animation: fadein .65s ease .22s both; } /* Marquee for an exclusive members-count ticker */ @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker { display: flex; gap: 32px; animation: ticker 38s linear infinite; white-space: nowrap; } /* Step indicator dot */ .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); display: inline-block; } .dot.on { background: var(--accent); } /* Gold foil text accent */ .foil { background: linear-gradient(135deg, #C9A45F 0%, #E6C988 28%, #8E6A2C 52%, #E6C988 78%, #C9A45F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Tag pill */ .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); background: transparent; } .tag.solid { background: var(--evergreen); color: var(--ivory); border-color: transparent; } .tag.gold { background: var(--gold); color: var(--ink); border-color: transparent; } /* Visually-hidden */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }