/** * lodge-world.css — THE WORLD PALETTE. * * Eric's rule: "the lodge has to be systematically the same for everyone." One world means one * palette — the front door, the camps, and the table all lit by the same fire. These tokens are * the single source of that. Any surface that wants to feel like the lodge imports this and uses * the variables; nothing hardcodes a lodge colour again. * * Measured problem this solves: the three venue SVGs shared only 1-2 colours out of 60-135 each. * Rich art, three different worlds. The tokens below + the runtime world-grade in lodge-scene.js * bring them under one light without repainting a single path. */ :root { /* --- the fire and the lamp: warmth carries the whole brand --- */ --lodge-ember: #f97316; /* primary action, firelight */ --lodge-ember-deep: #c2410c; /* pressed, deep coals */ --lodge-lantern: #f2c063; /* lantern glow, highlights, warnings */ --lodge-tallow: #ffe9c2; /* the warmest light in the room */ /* --- timber and stone: the room itself --- */ --lodge-timber: #6b4423; /* log walls, beams */ --lodge-timber-dk: #3d2614; /* shadowed wood, table edge */ --lodge-stone: #57606a; /* hearth stone, gunmetal */ --lodge-hide: #8b5e3c; /* leather, worn couch */ /* --- night and glass: the dark the fire pushes back --- */ --lodge-night: #0a0f17; /* page ground, deepest dark */ --lodge-dusk: #111926; /* cards, panels */ --lodge-shadow: #1e2b3d; /* borders, separations */ /* --- field colours: what's outside the window --- */ --lodge-marsh: #4a5d3a; /* cattail, cover */ --lodge-sage: #7d8c6a; /* muted green, far timber */ --lodge-sky: #7fb7e8; /* clear day */ --lodge-water: #375a6b; /* the water in the spread */ /* --- text --- */ --lodge-ink: #e9eef6; --lodge-ink-dim: #9bb0c4; /* --- signals (kept honest: green means verified, amber means caveat) --- */ --lodge-verified: #22c55e; --lodge-caveat: #f2c063; --lodge-refused: #ef4444; /* --- the shared feel --- */ --lodge-radius: 12px; --lodge-border: 1px solid var(--lodge-shadow); --lodge-panel: rgba(17, 25, 38, .72); --lodge-glow: 0 4px 18px rgba(0, 0, 0, .38); --lodge-font: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; } /* A surface that opts into the world. Use on or a wrapper. */ .lodge-world { background: var(--lodge-night); color: var(--lodge-ink); font-family: var(--lodge-font); } /* The panel every lodge-flavoured card shares — camps, homepage, studio all match. */ .lodge-panel { background: var(--lodge-panel); border: var(--lodge-border); border-radius: var(--lodge-radius); box-shadow: var(--lodge-glow); backdrop-filter: blur(4px); } .lodge-btn { background: var(--lodge-ember); color: #241000; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform .12s ease, background .12s ease; } .lodge-btn:hover { background: var(--lodge-lantern); transform: translateY(-1px); } .lodge-btn.ghost { background: transparent; color: var(--lodge-ink); border: var(--lodge-border); } /* Honesty chips — these carry meaning, so they are part of the design system, not decoration. */ .lodge-chip { display: inline-block; font-size: .72rem; padding: 3px 9px; border-radius: 20px; font-weight: 600; } .lodge-chip.verified { background: rgba(34,197,94,.16); color: var(--lodge-verified); } .lodge-chip.caveat { background: rgba(242,192,99,.16); color: var(--lodge-caveat); } .lodge-chip.refused { background: rgba(239,68,68,.16); color: var(--lodge-refused); } .lodge-chip.pending { background: rgba(155,176,196,.16); color: var(--lodge-ink-dim); } /* Section heading with the ember rule — used across camps + homepage so structure reads the same. */ .lodge-h2 { font-size: 1.15rem; margin: 28px 0 8px; border-left: 3px solid var(--lodge-ember); padding-left: 11px; } @media (prefers-reduced-motion: reduce) { .lodge-btn { transition: none; } .lodge-btn:hover { transform: none; } }