/* ═══════════════════════════════════════════════════════════════════════════ quests.css — /quests/ in the haven look (LIVE_SITE_SPEC §4.5) The structure and every class name are the live page's: the board is JS-rendered in the exact live shape (section.panel.quest-block > header + .body > h3.q-group + .quest-grid > article.quest-card) and this sheet only dresses it in this tree's tokens. RED/GOLD IS LIGHT, NEVER INK — the ember appears as borders, fills, glows and on NUMBERS (--ember-core), never as running text. ★ Every dynamic style — the rail width and every property of h3.q-group — is written by quests.js through the CSSOM, never a style attribute (the live file's own CSP discipline). This sheet carries the static half only: the face and the ink of .q-group, and the rail's track, so the two never fight over one property. ★ `[hidden]` guards sit on every element this sheet gives a display value: the UA's `display:none` for the hidden attribute loses to any authored display, and a "hidden" weekly strip that still renders is the exact "empty section with a countdown reads as broken" the live file warns of. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. scenes — switched on the ROOT's data-scene, never on ─────── */ #gd-quests .scene { display: none; } #gd-quests[data-scene="loading"] #scene-loading, #gd-quests[data-scene="noauth"] #scene-noauth, #gd-quests[data-scene="disabled"] #scene-disabled, #gd-quests[data-scene="ready"] #scene-ready { display: block; } .scene-card { max-width: 560px; margin: 0 auto; padding: var(--s6) var(--s5); text-align: center; } .scene-card .inst { justify-content: center; font-size: clamp(18px, 2vw, 24px); margin: 0 0 var(--s3); } .scene-card p { margin: 0 0 var(--s4); font-size: 15px; line-height: 1.6; color: var(--t-body); } .scene-card p:last-child { margin-bottom: 0; } .scene-card .btn { margin-top: var(--s2); } .spinner { width: 34px; height: 34px; margin: 0 auto var(--s4); border-radius: 50%; border: 2px solid var(--line-up); border-top-color: var(--ember-core); box-shadow: 0 0 16px rgba(232,144,26,.35); animation: qs-spin .9s linear infinite; } @keyframes qs-spin { to { transform: rotate(360deg); } } /* ── 2. the always-visible intro ────────────────────────────────────────── */ .quests-root { position: relative; } /* the intro stays visible in every scene, so it carries the page's bottom border itself and the scenes start on a calm line under it */ .quests-intro { margin-bottom: var(--s6); } .eyebrow { margin: 0 0 var(--s3); font: 600 10.5px/1 var(--data); letter-spacing: .24em; text-transform: uppercase; color: var(--t-dim); } /* the one interactive element on the page. inline-block + padding because an inline link's box is font-height, under the 22px target floor eyeball.py refuses — the visible line does not move */ .quests-lede a { display: inline-block; padding: 3px 1px; margin: -3px 0; line-height: 1.2; color: var(--ember-ink); text-decoration: none; border-bottom: 1px solid rgba(255,176,32,.4); } .quests-lede a:hover { color: var(--ember-core); border-bottom-color: var(--ember-core); } .diet-chip { display: inline-flex; align-items: center; gap: 9px; margin: var(--s4) auto 0; padding: 7px 13px; border: 1px solid var(--line-up); border-radius: var(--r-pill); background: rgba(6,5,6,.6); font-size: 13px; color: var(--t-body); } .diet-chip[hidden] { display: none; } .quests-earned { display: inline-grid; gap: 6px; margin: var(--s4) auto 0; padding: 12px 22px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(6,5,6,.6); } .quests-earned[hidden] { display: none; } .quests-earned .lab { font: 600 9.5px/1 var(--data); letter-spacing: .2em; text-transform: uppercase; color: var(--t-dim); } .quests-earned .val { font: 500 24px/1 var(--data); color: var(--ember-core); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(232,144,26,.45); } /* ── 3. the reset strips ────────────────────────────────────────────────── */ .reset-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; margin: 0 0 var(--s4); padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(6,5,6,.6); } .reset-strip .lab { font: 600 9.5px/1.4 var(--data); letter-spacing: .16em; text-transform: uppercase; color: var(--t-dim); } .reset-strip .q-reset { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--t-sec); white-space: nowrap; } .reset-strip b { font: 600 14px/1 var(--data); color: var(--t-hi); font-variant-numeric: tabular-nums; } .weekly-strip { margin-top: var(--s6); border-color: rgba(255,176,32,.22); } .weekly-strip[hidden] { display: none; } /* ── 4. a section block, in the live shape ──────────────────────────────── */ .quest-block { margin: 0 0 var(--s5); } .quest-block > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 12px var(--s4); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,176,32,.05), rgba(0,0,0,0)), var(--panel-up); border-radius: var(--r) var(--r) 0 0; } .quest-block > header h2 { margin: 0; font: 700 15px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--t-hi); } /* the weekly board carries the lit mark a section head carries elsewhere */ .weekly-block > header h2::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px rgba(232,144,26,.8); vertical-align: 2px; } .q-badge { flex: none; padding: 4px 10px; border: 1px solid var(--line-up); border-radius: var(--r-pill); font: 500 10px/1 var(--data); letter-spacing: .14em; text-transform: uppercase; color: var(--t-sec); white-space: nowrap; } .quest-block > .body { padding: var(--s4); } /* h3.q-group: margin, size, weight, spacing, transform and opacity arrive from quests.js through the CSSOM, exactly as on live. Face and ink live here. */ .q-group { font-family: var(--data); color: var(--t-sec); } .quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); } /* ── 5. a card ──────────────────────────────────────────────────────────── */ .quest-card { display: grid; gap: 11px; padding: 14px 15px 13px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(16,12,14,.92), rgba(8,6,7,.96)); transition: border-color var(--quick); } .quest-card:hover { border-color: var(--line-up); } .q-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); } .q-top h3 { margin: 0 0 4px; font: 600 14px/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--t-hi); } .q-blurb { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--t-sec); } .q-points { flex: none; padding: 4px 9px; border: 1px solid var(--line-up); border-radius: var(--r-pill); font: 600 11px/1 var(--data); color: var(--t-hi); font-variant-numeric: tabular-nums; white-space: nowrap; } /* the rail. Width is a CSSOM write from quests.js (pct.toFixed(1) + '%') */ .q-bar { position: relative; height: 5px; overflow: hidden; border-radius: var(--r-pill); background: var(--panel-hi); border: var(--hair) solid var(--line); } .q-bar i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ember-deep), var(--ember)); box-shadow: 0 0 10px rgba(232,144,26,.5); transition: width .4s ease; } .q-meta { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--data); letter-spacing: .04em; color: var(--t-sec); font-variant-numeric: tabular-nums; } .q-progress { color: var(--t-hi); } .q-state { margin-left: auto; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-dim); } .q-check { display: none; flex: none; width: 15px; height: 15px; color: var(--ember-core); } /* done: the card is lit — border, glow, the check — and the word still says it */ .quest-card.done { border-color: rgba(255,176,32,.42); background: linear-gradient(180deg, rgba(40,27,10,.55), rgba(8,6,7,.96)); box-shadow: inset 0 1px 0 rgba(255,198,77,.12), 0 0 24px -12px rgba(232,144,26,.6); } .quest-card.done .q-bar i { width: 100% !important; } .quest-card.done .q-state, .quest-card.done .q-points { color: var(--ember-core); border-color: rgba(255,198,77,.5); } .quest-card.done .q-check { display: inline-block; } /* a quest that completed while the page was open */ .quest-card.just-done { animation: qs-pop .55s cubic-bezier(.16,1,.3,1); } @keyframes qs-pop { 0% { transform: scale(.97); box-shadow: 0 0 0 0 rgba(255,198,77,.45); } 60% { transform: scale(1.01); } 100% { transform: none; box-shadow: 0 0 24px -12px rgba(232,144,26,.6); } } /* ── 6. visited regions + the explainer ─────────────────────────────────── */ .visited-line { margin: var(--s4) 0 0; padding: 11px 16px; border: 1px dashed var(--line-up); border-radius: var(--r); font-size: 13px; color: var(--t-sec); } .visited-line[hidden] { display: none; } .visited-line .lab { margin-right: 8px; font: 600 9.5px/1 var(--data); letter-spacing: .16em; text-transform: uppercase; color: var(--t-dim); } .visited-line b { font-weight: 600; color: var(--t-hi); } .quest-notes { margin: var(--s6) 0 0; padding: var(--s4) var(--s5); border-left: 2px solid rgba(255,176,32,.35); } .quest-notes p { margin: 0; max-width: 80ch; font-size: 13.5px; line-height: 1.65; color: var(--t-sec); } /* ── 7. phone + reduced motion ──────────────────────────────────────────── */ @media (max-width: 640px) { .reset-strip { flex-direction: column; align-items: flex-start; } .quest-grid { grid-template-columns: 1fr; } .quest-block > .body { padding: var(--s3); } .quest-notes { padding: var(--s3) var(--s4); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } .quest-card.just-done { animation: none; } .q-bar i { transition: none; } }