/* ============================================================================= theme.css — Day/Night token system + the sun/moon toggle Day = booking business (aged cream, brick red) Night = 1976 legacy (near-black, gold) All colour cascades from data-theme on . ============================================================================= */ :root { /* type */ --font-display: "Anton", "Oswald", Impact, "Arial Narrow Bold", sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* spacing / radius shared across themes */ --maxw: 1140px; --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 40px rgba(0,0,0,.18); --transition-theme: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease; } /* ---------- DAY (default) --------------------------------------------------- */ :root, :root[data-theme="day"] { --bg: #ece3cf; /* aged cream */ --surface: #f5efe0; --surface-2: #efe6d0; --ink: #1a1a1a; --ink-soft: #4a4437; --accent: #a8321f; /* brick red */ --accent-2: #1a1a1a; --accent-ink: #fff8ec; /* text on accent */ --line: rgba(26,26,26,.14); --glow: transparent; --grain-opacity: .05; color-scheme: light; } /* ---------- NIGHT ----------------------------------------------------------- */ :root[data-theme="night"] { --bg: #0c0c0c; /* near-black */ --surface: #171717; --surface-2: #1f1d18; --ink: #f4f0e6; --ink-soft: #b6ad98; --accent: #f2c94c; /* gold */ --accent-2: #c9a84a; --accent-ink: #14110a; --line: rgba(244,240,230,.14); --glow: rgba(242,201,76,.22); --grain-opacity: .04; color-scheme: dark; } /* ---------- Base ------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: var(--transition-theme); overflow-x: hidden; } a { color: inherit; } img { max-width: 100%; display: block; } /* ---------- The sun/moon toggle -------------------------------------------- */ .theme-toggle { --size: 58px; position: relative; width: var(--size); height: calc(var(--size) / 2 + 6px); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); cursor: pointer; padding: 0; flex: 0 0 auto; transition: var(--transition-theme); } .theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .theme-toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 15px; line-height: 1; transition: transform .35s cubic-bezier(.4,1.4,.6,1), background-color .5s ease; } :root[data-theme="night"] .theme-toggle .knob { transform: translateX(29px); } .theme-toggle .knob::before { content: "☀"; } :root[data-theme="night"] .theme-toggle .knob::before { content: "🌙"; } @media (prefers-reduced-motion: reduce) { .theme-toggle .knob { transition: none; } } /* ---------- Accent primitives used everywhere ------------------------------ */ .btn { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-family: var(--font-body); padding: .8em 1.4em; border-radius: 999px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; transition: transform .2s ease, background-color .5s ease, box-shadow .3s ease, color .5s ease; font-size: 1rem; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow), 0 6px 18px rgba(0,0,0,.2); } .btn.ghost { background: transparent; color: var(--accent); } .btn.ghost:hover { background: var(--accent); color: var(--accent-ink); } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 700; color: var(--accent); } /* the "placeholder" ribbon shown on non-authentic images inside the portal only */ .slot-placeholder { position: relative; }