/* Vallorne — daylight theme and atmosphere. Loaded after style.css, so everything here is a deliberate override. Three ideas: 1. the page floats on a raised, slightly see-through panel; 2. behind it, soft artwork of wherever the party is, filling the margins; 3. each page wears its domain's colour (set by backdrop.js on ). Nothing in style.css or app.js needs to change for any of it. */ /* ---------------------------------------------------------------- palette */ :root { --ground:#efe8d6; --surface:#fffdf7; --surface-2:#f7f2e3; --text:#171a21; --muted:#535865; --brass:#8a5c12; --brass-soft:rgba(176,124,32,.16); --rule:#ded7c3; --shadow:0 1px 2px rgba(60,48,24,.10); --read-bg:#fdf6e2; --read-rule:#d8bb72; --voice-bg:#eef2fb; --voice-rule:#7d96cb; /* domain colours, in the order of the map: Hearthlands → Heartspire */ --hearth:#a67c17; --green:#3d7d2a; --ember:#c2481a; --tide:#1b74ae; --gale:#4a84ba; --dusk:#8a4da0; --sea:#2d786c; --under:#3b539e; --spire:#75705f; /* the floating panel and the glass bars */ --panel:rgba(255,253,247,.87); --panel-rule:rgba(255,255,255,.85); --panel-edge:rgba(72,58,30,.14); --panel-shadow:0 26px 64px rgba(52,40,16,.22), 0 3px 10px rgba(52,40,16,.10); --glass:rgba(247,242,230,.90); --glass-rule:rgba(72,58,30,.16); /* backdrop strength — "soft and atmospheric" */ --vb-opacity:.58; --vb-blur:4px; --vb-bright:1.02; --accent:var(--brass); --on-accent:#fff5e2; --pad-x:clamp(18px,3.2vw,34px); color-scheme: light; } :root[data-theme="dark"] { --ground:#11151c; --surface:#1f242e; --surface-2:#29303c; --text:#f1ecdf; --muted:#a7a295; --brass:#e8bc6d; --brass-soft:rgba(232,188,109,.16); --rule:#333a47; --shadow:0 1px 2px rgba(0,0,0,.45); --read-bg:#251f16; --read-rule:#8a713a; --voice-bg:#1a2030; --voice-rule:#6377a6; --hearth:#dcb75c; --green:#79b95e; --ember:#f0763c; --tide:#4fa7dd; --gale:#8fc0e8; --dusk:#bb84cd; --sea:#66b3a4; --under:#7b90d8; --spire:#d6d1c2; --panel:rgba(23,28,37,.82); --panel-rule:rgba(255,255,255,.09); --panel-edge:rgba(0,0,0,.5); --panel-shadow:0 26px 64px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.35); --glass:rgba(15,19,26,.88); --glass-rule:rgba(255,255,255,.08); --vb-opacity:.50; --vb-blur:5px; --vb-bright:.86; --on-accent:#0e1116; color-scheme: dark; } /* which colour this page wears */ :root[data-accent="hearth"] { --accent:var(--hearth); } :root[data-accent="green"] { --accent:var(--green); } :root[data-accent="ember"] { --accent:var(--ember); } :root[data-accent="tide"] { --accent:var(--tide); } :root[data-accent="gale"] { --accent:var(--gale); } :root[data-accent="dusk"] { --accent:var(--dusk); } :root[data-accent="sea"] { --accent:var(--sea); } :root[data-accent="under"] { --accent:var(--under); } :root[data-accent="spire"] { --accent:var(--spire); } /* ------------------------------------------------------------- the canvas */ html { background:var(--ground); } body { background:transparent; } .vb { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; } .vb-layer { position:absolute; inset:-4%; opacity:0; filter:blur(var(--vb-blur)) saturate(.94) brightness(var(--vb-bright)); transition:opacity 1100ms ease; } .vb-layer.on { opacity:var(--vb-opacity); } .vb-layer img { width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; } .vb-wash { position:absolute; inset:0; background: radial-gradient(145% 105% at 50% -15%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--ground) 52%, transparent) 0%, color-mix(in srgb, var(--ground) 16%, transparent) 45%, color-mix(in srgb, var(--ground) 50%, transparent) 100%); } /* ---------------------------------------------------------- the top bars */ .top { background:var(--glass); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--glass-rule); } .subnav { background:color-mix(in srgb, var(--glass) 88%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--glass-rule); } .brand-sub { color:var(--accent); transition:color 400ms ease; } .tabs a.active { background:var(--accent); color:var(--on-accent); border-color:transparent; } .tabs a.players { color:var(--brass); font-weight:700; } .tabs a.players.active { color:var(--on-accent); } .subnav a.active { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); } .search { background:color-mix(in srgb, var(--surface) 72%, transparent); } /* ------------------------------------------------------ the raised panel */ .layout { position:relative; z-index:1; width:min(1180px, calc(100% - clamp(32px,6vw,112px))); max-width:none; margin:22px auto 34px; padding:0 var(--pad-x) 46px; gap:30px; background:var(--panel); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); border:1px solid var(--panel-rule); border-radius:20px; box-shadow:var(--panel-shadow), 0 0 0 1px var(--panel-edge); overflow:clip; } .content { max-width:820px; } .aside { top:104px; } /* ------------------------------------------------------------ the banner */ .pagebanner { grid-column:1 / -1; order:-2; position:relative; margin:0 calc(-1 * var(--pad-x)) 4px; height:clamp(148px, 21vw, 248px); border-radius:19px 19px 0 0; overflow:hidden; display:flex; align-items:flex-end; background:var(--surface-2); } .pagebanner > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 36%; display:block; transform:scale(1.02); } .pagebanner .scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,12,16,.30) 0%, rgba(10,12,16,0) 38%), linear-gradient(0deg, rgba(8,10,14,.86) 0%, rgba(8,10,14,.46) 42%, rgba(8,10,14,0) 78%), linear-gradient(90deg, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 55%); } .pagebanner .btext { position:relative; margin:0; padding:0 var(--pad-x) 16px; width:100%; } .pagebanner .crumb { display:block; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:4px; text-shadow:0 1px 3px rgba(0,0,0,.6); } .pagebanner h1 { margin:0; color:#fff; font-size:clamp(26px,3.6vw,42px); text-shadow:0 2px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.7); } .pagebanner .bcredit { position:absolute; right:10px; top:10px; z-index:2; font-size:11.5px; color:rgba(255,255,255,.9); text-decoration:none; background:rgba(12,14,18,.46); border-radius:999px; padding:3px 10px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity 200ms ease; } .pagebanner:hover .bcredit, .pagebanner .bcredit:focus-visible { opacity:1; } .pagebanner.empty { display:none; } .pagehead { display:none; } /* --------------------------------------------- accents inside the page */ h2 { border-top:0; padding-top:14px; position:relative; color:color-mix(in srgb, var(--text) 86%, var(--accent)); } h2::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 22%, transparent) 30%, var(--rule) 30%, var(--rule) 100%); } h3 { color:color-mix(in srgb, var(--text) 88%, var(--accent)); } .read { border-left-color:color-mix(in srgb, var(--accent) 60%, var(--read-rule)); } .stat { border-top-color:var(--accent); background:color-mix(in srgb, var(--surface) 94%, transparent); } .card, .look, .tracker .box, .mapbox { background:color-mix(in srgb, var(--surface) 93%, transparent); } .card { border-color:var(--rule); } .card:hover { border-color:color-mix(in srgb, var(--accent) 50%, var(--rule)); box-shadow:0 8px 22px rgba(40,32,14,.14); } .look { border-left-color:var(--accent); } .aside a:hover, .aside a.active { border-left-color:var(--accent); color:var(--accent); } .aside .rel a { color:var(--text); } .aside .rel a:hover { color:var(--accent); } .notice { background:color-mix(in srgb, var(--accent) 12%, transparent); border-left:3px solid var(--accent); } .musicbar { background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border-top:1px solid var(--glass-rule); } .search-results { background:color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } tr:nth-child(even) td { background:color-mix(in srgb, var(--accent) 5%, transparent); } /* ------------------------------------------------------------ player view */ body.player .pagebanner { height:clamp(190px, 30vw, 340px); } body.player { font-size:17.5px; } body.player .aside .rel ul { display:flex; flex-wrap:wrap; gap:6px; } body.player .aside .rel li { margin:0; } body.player .aside .rel a { border:1px solid var(--rule); border-radius:999px; padding:4px 11px; background:color-mix(in srgb, var(--surface) 80%, transparent); } body.player .aside .rel a:hover { border-color:var(--accent); } :root:has(body.player) { --vb-opacity:.68; --vb-blur:3px; } /* --------------------------------------------------------------- motion */ @media (prefers-reduced-motion: no-preference) { #main > *, .pagebanner .btext { animation:vb-rise 420ms cubic-bezier(.22,.7,.3,1) both; } #main > *:nth-child(n+7) { animation:none; } @keyframes vb-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } } @media (prefers-reduced-motion: reduce) { .vb-layer { transition:none; } } /* ----------------------------------------------------------- responsive */ @media (max-width: 900px) { .layout { width:calc(100% - 28px); margin:14px auto 24px; padding:0 var(--pad-x) 34px; border-radius:16px; gap:18px; } .pagebanner { height:clamp(130px, 34vw, 200px); border-radius:15px 15px 0 0; margin-bottom:2px; } body.player .pagebanner { height:clamp(160px, 44vw, 250px); } .aside { top:0; border-bottom:1px solid var(--rule); } .subnav { top:93px; } } @media (max-width: 700px) { :root { --vb-opacity:.42; } .pagebanner .bcredit { opacity:1; font-size:10.5px; } } /* Older browsers without backdrop-filter get solid panels instead of glass. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .layout { background:var(--surface); } .top, .subnav, .musicbar { background:var(--ground); } }