/* ============================================================ SERF — Royal Steward theme Dark, warm, regal. Brass/gold hero. Parchment for trust. ============================================================ */ :root { /* grounds */ --ink: #100F0B; --ground: #1A1813; --ground-2: #232017; --ground-3: #2C2819; --ground-hi: #36311F; /* hairlines */ --line: rgba(203,163,92,0.16); --line-strong: rgba(203,163,92,0.34); --line-cream: rgba(236,226,204,0.10); /* brass / gold — the hero */ --gold: #CBA35C; --gold-hi: #ECCE85; --gold-lo: #9C7B34; --gold-deep: #6E5621; --gold-soft: rgba(203,163,92,0.12); --gold-glow: rgba(203,163,92,0.22); /* parchment — trust surfaces */ --parchment: #F2E7CE; --parchment-2: #E7D6B2; --parchment-ln: rgba(43,36,23,0.14); --ink-on-parch: #2B2417; --ink-on-parch-dim: #6A5C3E; /* text on dark */ --cream: #ECE2CC; --cream-dim: #B3A98E; --cream-mut: #9A9079; /* signals — warm sage success (Norse cues) */ --pine: #8C9A63; --pine-bg: rgba(140,154,99,0.15); --pine-deep: #44502A; --success-ink: #5C6B30; --success-bg: rgba(124,138,74,0.13); --success-line: rgba(124,138,74,0.32); --blood: #B0413A; --blood-bg: rgba(176,65,58,0.13); /* iron — the NEUTRAL/INFO signal (provisioning, waiting, asleep). Keeps in-progress states from defaulting to gold and diluting it. */ --iron: #6E6857; --iron-hi: #A9A28F; --iron-bg: rgba(154,148,134,0.11); --iron-line: rgba(154,148,134,0.30); /* shape */ --r-sm: 6px; /* The largest icon any button may contain (components/brand/Icons.vue — currently `menu` at 20px). Buttons pin their line box to this, so a text-only button is exactly as tall as an icon'd one. Add a bigger icon and you must raise this — geometry/button-height.pw.ts fails otherwise. */ --icon-size: 20px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --shadow-card: 0 1px 0 rgba(236,226,204,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.7); --shadow-parch: 0 2px 1px rgba(255,255,255,0.4) inset, 0 22px 48px -26px rgba(0,0,0,0.65); --shadow-gold: 0 10px 28px -12px rgba(203,163,92,0.45); /* fonts */ --display: "Cinzel", "Cormorant Garamond", serif; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --gold-metal: linear-gradient(150deg, #F0D699 0%, #CBA35C 38%, #A37E37 70%, #D8B36A 100%); --gold-rule: linear-gradient(90deg, transparent, var(--gold-lo) 18%, var(--gold-hi) 50%, var(--gold-lo) 82%, transparent); } /* ---- Norse-feudal palette tweak ---- */ [data-palette="norse"] { --ink: #0A0F0B; --ground: #121A13; --ground-2: #19241A; --ground-3: #1F2D1F; --ground-hi: #283827; --line: rgba(203,163,92,0.18); --line-strong: rgba(203,163,92,0.36); --line-cream: rgba(220,228,206,0.09); --pine: #93A566; --pine-bg: rgba(147,165,102,0.17); --pine-deep: #424E27; --cream: #E7E6D0; --cream-dim: #A6AE8E; --cream-mut: #71805C; --blood: #BE3D33; --blood-bg: rgba(190,61,51,0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--ink); color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #root { min-height: 100vh; } /* ambient warmth */ .app-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 620px at 78% -8%, rgba(203,163,92,0.10), transparent 60%), radial-gradient(900px 700px at 8% 108%, rgba(110,154,111,0.06), transparent 60%), var(--ink); } /* ============================================================ TYPE ============================================================ */ .display { font-family: var(--display); font-weight: 600; letter-spacing: 0.01em; line-height: 1.04; } .proclaim { font-family: var(--display); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .serif { font-family: var(--serif); } .eyebrow { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; /* a proclamation never breaks mid-line */ /* An inline-flex sizes to max-content, so its items are never under pressure and flex-shrink never fires — the box just overhangs its parent, and being centred it did so at BOTH ends ("/court" lost 5px a side at 360). Capping the container is what creates the pressure; the flanking rules then give way and the label stays whole. Constrain the container, not the items: `flex: 0 1 26px` on the rules collapsed them to 0px at every width, silently deleting them from the design. */ max-width: 100%; } .eyebrow::before, .eyebrow.flank::after { content: ""; width: 26px; min-width: 0; height: 1px; background: var(--gold-rule); opacity: .7; } .text-gold { color: var(--gold); } .text-cream { color: var(--cream); } .text-dim { color: var(--cream-dim); } .text-mut { color: var(--cream-mut); } .steward { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--cream-dim); line-height: 1.45; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* gold foil text — biased light so the darkest stop clears the contrast floor on --ink */ .foil { background: linear-gradient(176deg, #F7E4AC 8%, #D9B472 46%, #C69B55 64%, #F0D69A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ RULES / DIVIDERS ============================================================ */ .rule { height: 1px; background: var(--gold-rule); opacity: .5; border: 0; } .rule-lozenge { display: flex; align-items: center; gap: 14px; color: var(--gold-lo); } .rule-lozenge::before, .rule-lozenge::after { content: ""; flex: 1; height: 1px; background: var(--gold-rule); opacity: .45; } .lozenge { width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } /* ============================================================ WAX SEAL / LOGO The mark itself lives in components/brand/Seal.vue — there is no CSS-drawn seal any more. ============================================================ */ .wordmark { font-family: var(--display); font-weight: 600; letter-spacing: 0.20em; text-transform: lowercase; color: var(--cream); font-size: 19px; } /* ============================================================ COIN ============================================================ */ .coin { position: relative; border-radius: 50%; display: inline-grid; place-items: center; background: #14120C; border: 0.32em solid var(--gold); color: var(--gold-hi); font-family: var(--display); font-weight: 700; box-shadow: 0 0 0 1px var(--gold-deep), 0 6px 14px -6px rgba(0,0,0,0.6); /* A coin is a fixed-size disc. As a flex item it defaults to flex-shrink:1, so a wide sibling (a big treasury figure, a long line of copy) squeezes it into an oval. Pin it so it keeps its circle in any content-area flex/grid row — same guard .avatar already carries. aspect-ratio backstops the preset-less case. */ flex: none; aspect-ratio: 1; } .coin::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px solid rgba(203,163,92,0.55); } .coin.c-64 { width: 64px; height: 64px; font-size: 22px; } .coin.c-48 { width: 48px; height: 48px; font-size: 17px; } .coin.c-28 { width: 28px; height: 28px; font-size: 12px; } .coin-stack { position: relative; } .coin-stack > .coin { position: absolute; } /* ============================================================ BUTTONS ============================================================ */ .btn { font-family: var(--sans); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: transform var(--m-fast) ease, box-shadow var(--m-quick) ease, background var(--m-quick) ease, border-color var(--m-quick) ease; white-space: nowrap; text-decoration: none; /* A button is as tall as its tallest child. With line-height:1 a text-only button (Hibernate, Restart, Reinstall, Apply settings, Cancel) was ~5.5px shorter than an icon'd neighbour (Export World, Summon), because the 19px Icons svg outgrows the text line box. Pin the line box to the icon height so every button in a row lines up, with or without an icon — at every size variant. */ line-height: var(--icon-size); } .btn:active { transform: translateY(1px); } @media (hover: hover) { .btn:hover:not(:active) { transform: translateY(-1px); } } .btn-gold { background: var(--gold-metal); color: #3C2E0C; background-clip: padding-box; background-origin: border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), var(--shadow-gold); border-color: var(--gold-deep); font-weight: 700; } .btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 14px 32px -10px rgba(203,163,92,0.6); } .btn-ghost { background: transparent; color: var(--cream); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-hi); } .btn-quiet { background: var(--ground-2); color: var(--cream-dim); border-color: var(--line); } .btn-quiet:hover { color: var(--cream); border-color: var(--line-strong); background: var(--ground-3); } .btn-danger { background: transparent; color: var(--blood); border-color: rgba(176,65,58,0.5); } .btn-danger:hover { background: var(--blood-bg); border-color: var(--blood); } .btn-sm { padding: 9px 15px; font-size: 13.5px; border-radius: var(--r-sm); } .btn-lg { padding: 16px 28px; font-size: 16.5px; } .btn-block { width: 100%; } /* parchment-context button */ .on-parch .btn-ghost { color: var(--ink-on-parch); border-color: var(--parchment-ln); } .on-parch .btn-ghost:hover { background: rgba(43,36,23,0.06); border-color: var(--gold-lo); color: var(--gold-deep); } /* ============================================================ CARDS / PANELS ============================================================ */ .panel { background: linear-gradient(180deg, var(--ground-2), var(--ground)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .panel-pad { padding: 24px; } .panel-edge { position: relative; } .panel-edge::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: var(--gold-rule); opacity: .5; } /* parchment card — trust surface */ .parch { position: relative; background: radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,0.5), transparent 50%), linear-gradient(180deg, var(--parchment), var(--parchment-2)); color: var(--ink-on-parch); border-radius: var(--r-lg); box-shadow: var(--shadow-parch); border: 1px solid rgba(67,52,15,0.18); } .parch::after { content: ""; position: absolute; inset: 6px; border-radius: 11px; border: 1px solid rgba(67,52,15,0.16); pointer-events: none; } .parch.on-parch { /* marker for nested button styling */ } .parch .text-dim2 { color: var(--ink-on-parch-dim); } .parch .hr { height: 1px; background: var(--parchment-ln); border: 0; } /* chips / pills */ .pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream-dim); background: var(--ground-2); } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill-online { color: var(--pine); background: var(--pine-bg); border-color: var(--success-line); } .pill-asleep { color: var(--cream-mut); background: var(--ground-3); border-color: var(--line); } .pill-gold { color: var(--gold-hi); background: var(--gold-soft); border-color: var(--line-strong); } .pill-danger { color: var(--blood); background: var(--blood-bg); border-color: var(--blood); } .pill-info { color: var(--iron-hi); background: var(--iron-bg); border-color: var(--iron-line); } /* Realm status timeline (M1-B): status-derived stepper on the active server card */ .server-timeline { padding: 16px 24px; border-top: 1px solid var(--line); } .timeline { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 0; } .timeline li { position: relative; padding-left: 20px; font-size: 13px; color: var(--cream-mut); } .timeline li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ground-3); } .timeline li.done { color: var(--cream-dim); } .timeline li.done::before { background: var(--pine); border-color: var(--success-line); } .timeline li.current { color: var(--gold-hi); animation: timeline-label 1.8s ease-in-out infinite; } .timeline li.current::before { background: var(--gold); border-color: var(--gold-hi); animation: timeline-pulse 1.8s ease-out infinite; } @keyframes timeline-pulse { 0% { box-shadow: 0 0 0 1px var(--gold-soft); } 70% { box-shadow: 0 0 0 8px rgba(203,163,92,0); } 100% { box-shadow: 0 0 0 1px var(--gold-soft); } } @keyframes timeline-label { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } } .nowrap { white-space: nowrap; } .tag-live { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: var(--pine); background: var(--pine-bg); border: 1px solid var(--success-line); border-radius: 999px; padding: 6px 13px; } .tag-live .blip { width: 8px; height: 8px; border-radius: 50%; background: var(--pine); position: relative; } .tag-live .blip::after { background: rgba(140,154,99,0.55); animation-duration: 2.2s; } /* Pulse ring — the expanding halo on a "live" dot. This used to animate box-shadow spread. box-shadow is a PAINT property: it cannot run on the compositor, so every frame repainted, and on the landing page (two of these on screen) it measured 31 of the page's 47 points of CPU. Silencing this one animation took the whole page from 47.3% to 16.3%. A scaled pseudo-element is transform + opacity only, so it stays on the GPU. Any element wanting the halo sets position:relative and gives ::after a background and an animation-duration. */ .tag-live .blip::after, .raise-blip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; /* Base state is invisible and the keyframes light it up. That is what makes prefers-reduced-motion correct for free: the global reduce rule collapses duration without a fill-mode, so the element falls back to THIS state. Give it a visible base and reduced-motion users get a solid tinted disc welded over the dot forever. */ opacity: 0; animation-name: blipRing; animation-iteration-count: infinite; animation-timing-function: ease-out; } @keyframes blipRing { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.7); opacity: 0; } 100% { transform: scale(2.7); opacity: 0; } } /* ============================================================ LAYOUT HELPERS ============================================================ */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px} .gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-40{gap:40px} .between { justify-content: space-between; } .center { align-items: center; } .wrap { flex-wrap: wrap; } .grow { flex: 1; } /* ============================================================ APP SHELL ============================================================ */ .shell { position: relative; z-index: 1; display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; } .sidebar { border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--ground), var(--ink)); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; } .side-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; } .side-court { margin: 0 6px 14px; padding: 12px 14px; border-radius: var(--r); background: var(--ground-2); border: 1px solid var(--line); } .navlink { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--r); color: var(--cream-dim); font-weight: 600; font-size: 14.5px; cursor: pointer; border: 1px solid transparent; transition: all .15s ease; position: relative; white-space: nowrap; } .navlink .ic { width: 19px; height: 19px; opacity: .8; flex: none; } .navlink:hover { color: var(--cream); background: var(--ground-2); } .navlink.active { color: var(--gold-hi); background: var(--gold-soft); border-color: var(--line-strong); } .navlink.active::before { content:""; position:absolute; left:-18px; top:9px; bottom:9px; width:3px; background: var(--gold-metal); border-radius: 0 3px 3px 0; } .nav-section { font-family: var(--display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-mut); padding: 14px 14px 7px; } .side-legal { margin: 6px 14px 0; display: flex; align-items: center; gap: 7px; color: var(--cream-mut); font-size: 12px; } .side-legal a { color: inherit; text-decoration: none; } .side-legal a:hover { color: var(--cream); } .main { position: relative; z-index: 1; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(10px); } .page { padding: 36px 40px 56px; max-width: 1080px; } .page-head { margin-bottom: 28px; } .page-title { font-family: var(--display); font-weight: 600; font-size: 34px; color: var(--cream); letter-spacing: .02em; } /* ============================================================ MARKETING / LANDING ============================================================ */ .mk { position: relative; z-index: 1; } /* Header height, as its PARTS rather than a magic 90px, because .hero-art has to pull itself up by exactly this much (see .hero-art) and the two must not drift. The 46px is Seal's `size` prop in MkHeader.vue — the one term that lives in the component, not here. Change that and change this. */ .marketing { --mk-head-pad: 22px; --mk-head-h: calc(46px + 2 * var(--mk-head-pad)); } .mk-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--mk-head-pad) 48px; max-width: 1280px; margin: 0 auto; /* Sit above the hero photo so it doesn't paint over — and dim — the menu. Must beat .mk, not .hero-art: .mk is itself positioned at z-index 1, which makes it a stacking context, so .hero-art's z-index:0 is sealed INSIDE it and the whole .mk block competes here as one. At an equal z-index .mk would win on source order (the header is markup-earlier), so this has to be 2. */ position: relative; z-index: 2; } .mk-nav-links { display: flex; gap: 30px; align-items: center; } .mk-nav-links a { color: var(--cream-dim); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: color .15s; white-space: nowrap; cursor: pointer; } .mk-nav-links a:hover { color: var(--gold-hi); } .x-btn.mk-menu-btn { display: none; } .mk-menu-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(8,7,5,0.6); backdrop-filter: blur(4px); animation: fadeIn var(--m-quick) ease; } .mk-menu { position: absolute; top: 72px; left: 16px; right: 16px; display: flex; flex-direction: column; background: linear-gradient(180deg, #232017, #1A1813); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.6); padding: 6px 0; animation: fadeUp var(--m-move) var(--e-settle); } .mk-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; font-weight: 600; font-size: 16px; color: var(--cream); cursor: pointer; text-decoration: none; border-bottom: 1px solid var(--line); } .mk-menu-link:last-child { border-bottom: 0; } .mk-menu-link:hover { color: var(--gold-hi); } .mk-menu-link.gold { color: var(--gold-hi); } .mk-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; } /* same reason as .mk-nav: sit above .hero-art so the decorative photo doesn't paint over — and dim — the headline, sub-copy and Treasury card */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 64px 0 72px; position: relative; z-index: 1; } .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; margin: 18px 0 0; color: var(--cream); letter-spacing: .01em; text-wrap: balance; } .hero-sub { font-size: 19px; line-height: 1.55; color: var(--cream-dim); max-width: 30em; margin-top: 22px; } .hero-cta { display: flex; gap: 14px; margin-top: 30px; align-items: center; flex-wrap: wrap; } .hero-trust { display: flex; gap: 22px; margin-top: 26px; color: var(--cream-mut); font-size: 13.5px; flex-wrap: wrap; } .hero-trust span { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; } .vp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 14px 0 80px; } .vp-lead { grid-column: span 1; } .vp-card { padding: 30px; min-height: 230px; display: flex; flex-direction: column; } .vp-card.table-stakes { min-height: 0; padding: 22px 24px; } .vp-num { font-family: var(--display); font-size: 13px; letter-spacing: .2em; color: var(--gold); } .vp-card h3 { font-family: var(--display); font-weight: 600; font-size: 23px; margin: 14px 0 10px; color: var(--cream); } .vp-card p { color: var(--cream-dim); line-height: 1.55; font-size: 15px; margin: 0; } .stakes-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Positioned for the same reason as .mk: the landing page's .app-bg is a FIXED, opaque, full-viewport layer at z-index 0, so anything static paints beneath it. The footer used to live inside .mk (which carries z-index:1) and rode its stacking context for free; ENG-101 lifted it into the shared layout as a sibling, and it has painted under .app-bg on / ever since. */ .mk-foot { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 20px; } .mk-foot-in { max-width: 1280px; margin: 0 auto; padding: 30px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; } .mk-foot-in a, .mk-foot-in span { white-space: nowrap; } /* The footer's own rows must wrap. `.row` is a global utility with no flex-wrap, and every child here is `white-space: nowrap`, so the link row held its 545px max-content width and dragged the whole document sideways on every phone — 185px over at 360. `max-width: 100%` is the load-bearing half: below 560px `.mk-foot-in` turns into a column with `align-items: flex-start`, which sizes its children to max-content, and flex-wrap alone never fires because the row is never the thing being constrained. Scoped here on purpose — `.row` is used app-wide and call sites depend on it staying one line. */ .mk-foot-in .row { flex-wrap: wrap; max-width: 100%; row-gap: 10px; } .mk-foot-in .sep { color: var(--cream-mut); opacity: .55; } /* ledger rows */ .ledger { display: flex; flex-direction: column; } .ledger-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--parchment-ln); } .ledger-row:last-child { border-bottom: 0; } .ledger-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; } .amt-pos { color: var(--success-ink); font-weight: 700; } .amt-neg { color: var(--ink-on-parch); font-weight: 700; } /* contributors */ .avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--gold-hi); background: #14120C; border: 0.27em solid var(--gold); box-shadow: 0 0 0 1px var(--gold-deep); flex: none; } .avatar::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px solid rgba(203,163,92,0.5); } .avatar.av-pine { background: #101812; border-color: #6FA077; color: #B7DDBB; box-shadow: 0 0 0 1px var(--pine-deep); } .avatar.av-pine::after { border-color: rgba(111,160,119,0.5); } .avatar.av-iron { background: #131210; border-color: #8D8778; color: #CFC9B8; box-shadow: 0 0 0 1px #3a3528; } .avatar.av-iron::after { border-color: rgba(141,135,120,0.5); } .copybox { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: var(--r); border: 1px dashed var(--gold-lo); background: rgba(43,36,23,0.04); min-width: 0; max-width: 100%; } .copybox code { font-family: var(--sans); font-weight: 600; color: var(--ink-on-parch); font-size: 15px; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* meter / progress */ .meter { height: 12px; border-radius: 999px; background: rgba(43,36,23,0.14); overflow: hidden; position: relative; } .meter > span { position: absolute; inset: 0 auto 0 0; background: var(--gold-metal); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } /* dark-surface variant: a meter sitting on the app's ink ground rather than parchment */ .meter.on-ink { background: rgba(236,206,133,0.09); box-shadow: inset 0 0 0 1px var(--line); } /* stat block */ .stat-lg { font-family: var(--sans); font-weight: 800; font-size: 52px; letter-spacing: -0.01em; line-height: 1; } .stat-md { font-family: var(--sans); font-weight: 800; font-size: 30px; line-height: 1; } .label { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-mut); } .parch .label { color: var(--ink-on-parch-dim); } /* coin pack cards */ .pack { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: var(--ground-2); cursor: pointer; transition: all .15s ease; position: relative; text-align: center; } .pack:hover { border-color: var(--line-strong); background: var(--ground-3); transform: translateY(-2px); } .pack.featured { border-color: var(--gold); box-shadow: var(--shadow-gold); background: linear-gradient(180deg,var(--ground-3),var(--ground-2)); } .pack-best { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; background: var(--gold-metal); color: #3C2E0C; padding: 4px 12px; border-radius: 999px; font-weight: 700; } /* server card */ .server-card { padding: 0; overflow: hidden; } .server-head { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .server-emblem { width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, var(--pine-deep), #1a2a1f); border: 1px solid rgba(110,154,111,0.3); font-family: var(--display); font-weight: 700; color: var(--pine); font-size: 22px; } /* GameEmblem — the realm's cover art (marketing roster) inside the emblem box; the inner layer carries the image so the box keeps its border/radius and its lettered fallback. */ .game-emblem.has-art { background: var(--ground-2); border-color: rgba(255,255,255,0.08); overflow: hidden; } .game-emblem-art { display: block; width: 100%; height: 100%; background: center / cover no-repeat; } /* realms past — the hearth is cold, so the cover art rests muted */ .emblem-rest { background: var(--ground-3); border-color: var(--line); color: var(--cream-dim); } .emblem-rest .game-emblem-art { filter: saturate(.55) brightness(.82); } .server-stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); } .server-stat { padding: 16px 24px; border-right: 1px solid var(--line); } .server-stat:last-child { border-right: 0; } .server-actions { padding: 18px 24px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; } /* disclosure */ .adv { margin-top: 12px; border-top: 1px solid var(--line); } .adv-toggle { display: flex; align-items: center; gap: 10px; padding: 14px 4px; color: var(--cream-mut); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; background: none; border: 0; text-align: left; } .adv-toggle:hover { color: var(--cream-dim); } a { color: var(--gold-hi); } /* ============================================================ SUMMON FLOW (modal) ============================================================ */ .scrim { position: fixed; inset: 0; z-index: 100; padding: 28px; background: rgba(8,7,5,0.66); backdrop-filter: blur(7px); display: grid; place-items: center; animation: fadeIn var(--m-quick) ease; } .modal { width: min(660px, 100%); max-height: 92vh; overflow: auto; background: linear-gradient(180deg, var(--ground-2), var(--ground)); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.4); animation: modalIn var(--m-move) var(--e-settle); } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } } .modal-head { padding: 24px 28px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .modal-body { padding: 22px 28px; } .modal-foot { padding: 18px 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 4px; } .x-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--ground-2); color: var(--cream-dim); display: grid; place-items: center; cursor: pointer; flex: none; transition: all .15s; } .x-btn:hover { color: var(--cream); border-color: var(--line-strong); } .steps { display: flex; align-items: center; gap: 9px; } .step-pip { width: 26px; height: 4px; border-radius: 999px; background: var(--ground-hi); transition: background .2s; } .step-pip.on { background: var(--gold-metal); } .gametile { text-align: left; cursor: pointer; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ground-2); transition: all .15s; position: relative; display: flex; align-items: center; gap: 14px; } .gametile:hover:not(.soon) { border-color: var(--line-strong); background: var(--ground-3); } .gametile.sel { border-color: var(--gold); box-shadow: var(--shadow-gold); background: linear-gradient(180deg,var(--ground-3),var(--ground-2)); } .gametile.soon { opacity: 0.5; cursor: not-allowed; } .gametile .check { margin-left: auto; color: var(--gold-hi); opacity: 0; transition: opacity .15s; } .gametile.sel .check { opacity: 1; } .field { display: flex; flex-direction: column; gap: 8px; } .input { font-family: var(--sans); font-size: 16px; color: var(--cream); padding: 13px 15px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--ink); transition: border-color .15s, box-shadow .15s; width: 100%; } .input::placeholder { color: var(--cream-mut); } .input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .chiprow { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground-2); color: var(--cream-dim); cursor: pointer; transition: all .14s; } .chip:hover { border-color: var(--line-strong); color: var(--cream); } .chip.sel { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-soft); } .switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; cursor: pointer; } .switch:not(:last-child) { border-bottom: 1px solid var(--line); } .toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--ground-hi); border: 1px solid var(--line); position: relative; transition: background .18s; flex: none; } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream-dim); transition: transform .18s, background .18s; } .toggle.on { background: var(--pine-bg); border-color: var(--success-line); } .toggle.on::after { transform: translateX(18px); background: var(--pine); } @keyframes meterStrobe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .meter.summoning .meter-fill { animation: meterStrobe 1.1s ease-in-out infinite; } /* ============================================================ RESPONSIVE (marketing / hero) ============================================================ */ @media (max-width: 900px) { .mk-nav { padding: var(--mk-head-pad) 24px; } .mk-wrap { padding: 0 24px; } .hero { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 52px; } .hero-sub { max-width: none; } .vp-grid { grid-template-columns: 1fr; } .stakes-row { grid-template-columns: 1fr; } .mk-nav-links { gap: 18px; } /* .hero-art's height override lives with the rest of the hero art further down — this block is above the base rule, so an override here loses the cascade on equal specificity and silently does nothing. */ } /* The hamburger takes over at 720px, not 560px, because the full nav needs 693px to fit. Handing control back at 560 left a 561-692px band — large phones in landscape, small tablets — where the header simply hung off the right edge of the screen, 132px over at 561. The two numbers were chosen independently and never reconciled. Kept in its own block rather than folded into the 560px one below: that block also carries hero and footer rules that are correctly tuned to 560. */ @media (max-width: 720px) { /* Direct-child only: the dropdown's own .mk-menu-link anchors are nested deeper inside .mk-nav-links and must not be hidden by this rule. */ .mk-nav-links > a:not(.btn) { display: none; } .x-btn.mk-menu-btn { display: grid; } } @media (max-width: 560px) { .mk-foot-in .sep { display: none; } .hero h1 { font-size: clamp(32px, 10.5vw, 46px); } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { width: 100%; } .mk-foot-in { flex-direction: column; align-items: flex-start; gap: 16px; } } @media (max-width: 440px) { /* Too narrow for the bar CTA + hamburger to coexist — the Summon action lives in the dropdown (gold item) at this width instead. Match any nav button: the marketing bar CTA is now ghost (gold diet), not gold. */ .mk-nav-links .btn { display: none; } } /* ============================================================ RESPONSIVE (app shell + screens) ============================================================ */ .split-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; } /* Grid items default to min-width:auto and won't shrink below their content's intrinsic width — an unbreakable number/URL then forces a track past its fr share and the columns overlap instead of shrinking. min-width:0 lets them collapse cleanly until the single-column breakpoint takes over. */ .split-2 > * { min-width: 0; } .grid-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .menu-btn { display: none; width: 38px; height: 38px; border-radius: 9px; flex: none; border: 1px solid var(--line); background: var(--ground-2); color: var(--cream-dim); align-items: center; justify-content: center; cursor: pointer; padding: 0; } .menu-btn:hover { color: var(--cream); border-color: var(--line-strong); } .drawer-scrim { display: none; } .topbar-home { display: none; width: 36px; height: 36px; border-radius: 9px; flex: none; border: 1px solid var(--line); background: transparent; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .topbar-logout { display: none; } .tabbar { display: none; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--cream-mut); padding: 7px 4px 4px; border-radius: 10px; font-family: var(--sans); transition: color .15s; } .tab .tab-ic { display: flex; } .tab .tab-lb { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; } .tab.on { color: var(--gold-hi); } .tab-summon .tab-ic { width: 40px; height: 40px; border-radius: 12px; margin-top: -5px; background: var(--gold-metal); color: #3C2E0C; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold); border: 1px solid var(--gold-deep); } .tab-summon .tab-lb { color: var(--gold-hi); } @media (max-width: 860px) { .crumb-serf { display: none; } .shell { grid-template-columns: minmax(0, 1fr); } .game-feature { flex-direction: column; } /* .mk-wrap scope raises specificity above the base grid rules, which are declared later in the file and would otherwise win at equal specificity */ .mk-wrap .game-soon-grid { grid-template-columns: 1fr; } .mk-wrap .support-panel { grid-template-columns: 1fr; } /* featured cover art stacks on top, masking downward into the panel */ .game-feature.has-art .game-feature-art { width: 100%; height: 180px; min-height: 0; align-self: auto; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); } /* .game-feature-body's override moved down beside the base rule — see the note there. */ .faq { padding: 4px 20px; } /* drawer mode */ [data-mnav="drawer"] .menu-btn { display: flex; } [data-mnav="drawer"] .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; width: 272px; z-index: 60; overflow-y: auto; transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.8,.3,1); box-shadow: 0 30px 80px rgba(0,0,0,0.6); } [data-mnav="drawer"] .shell.menu-open .sidebar { transform: none; } [data-mnav="drawer"] .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8,7,5,0.6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s; } [data-mnav="drawer"] .shell.menu-open .drawer-scrim { opacity: 1; pointer-events: auto; } /* bottom tab bar mode */ [data-mnav="tabbar"] .sidebar { display: none; } [data-mnav="tabbar"] .menu-btn { display: none; } [data-mnav="tabbar"] .topbar-home { display: flex; } [data-mnav="tabbar"] .topbar-logout { display: grid; } [data-mnav="tabbar"] .summon-btn { display: none; } [data-mnav="tabbar"] .page { padding-bottom: 96px; } [data-mnav="tabbar"] .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 90%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); } .topbar { padding: 13px 16px; } .page { padding: 22px 16px 56px; } .page-title { font-size: 27px; } .split-2 { grid-template-columns: 1fr; gap: 16px; } .grid-packs { grid-template-columns: 1fr 1fr; gap: 12px; } .game-grid { grid-template-columns: 1fr; } .server-head { flex-direction: column; align-items: stretch; gap: 16px; } .server-head > div:last-child { min-width: 0 !important; } .server-stats { grid-template-columns: 1fr 1fr; } .server-stat { border-bottom: 1px solid var(--line); } .server-stat:nth-child(2n) { border-right: 0; } .server-stat:nth-last-child(-n+2) { border-bottom: 0; } .server-actions { flex-wrap: wrap; } .server-actions .adv-toggle { margin-left: 0 !important; } /* Keep realm controls labeled and wrapped so save actions stay discoverable on touch screens while the primary action remains prominent. */ .server-actions > .btn { max-width: 100%; } .realm-past-row { flex-direction: column; align-items: stretch; gap: 16px; } .realm-past-info { min-width: 0; } .realm-past-actions { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-start; } .realm-past-actions > .btn { max-width: 100%; flex: 1 1 auto; } .scrim { padding: 0; align-items: flex-end; } .modal { max-height: 94vh; border-radius: 22px 22px 0 0; animation: sheetIn .3s var(--e-settle); } .modal-head, .modal-body, .modal-foot { padding-left: 20px; padding-right: 20px; } } @media (max-width: 480px) { .bal-hrs { display: none; } .summon-label { display: none; } .summon-btn { padding: 9px 12px; } .grid-packs { grid-template-columns: 1fr; } .page-title { font-size: 25px; } .server-actions { align-items: stretch; } .server-actions > .btn, .realm-past-actions > .btn { flex: 1 1 100%; } .realm-past-actions > .realm-past-primary { order: -1; } } /* summoning progress ledger (step 3) */ .raise-list { display: flex; flex-direction: column; max-width: 440px; margin: 20px auto 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink); overflow: hidden; } .raise-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--line); transition: opacity .2s; } .raise-row:last-child { border-bottom: 0; } .raise-ic { width: 22px; height: 22px; display: grid; place-items: center; flex: none; } .raise-row.done .raise-ic { color: var(--pine); } .raise-row.done .raise-ic svg { width: 16px; height: 16px; } .raise-blip { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); position: relative; } .raise-blip::after { background: rgba(203,163,92,0.55); animation-duration: 1.6s; } .raise-wait { width: 6px; height: 6px; transform: rotate(45deg); background: var(--ground-hi); } .raise-themed { font-weight: 600; color: var(--cream); } .raise-row.pending { opacity: .45; } .raise-row.pending .raise-themed { color: var(--cream-dim); font-weight: 500; } .raise-row.done .raise-themed { color: var(--cream-dim); } .raise-row.active .raise-themed { color: var(--gold-hi); } .raise-literal { margin-left: auto; font-size: 12px; color: var(--cream-mut); white-space: nowrap; } .raise-note { font-style: italic; font-size: 15px; color: var(--cream-dim); text-align: center; margin: 16px auto 0; max-width: 30em; } .raise-note-plain { font-size: 12.5px; color: var(--cream-mut); text-align: center; margin: 16px auto 0; } /* writ reveal (Steward's Desk / Gatehouse) */ .writ-in { animation: writIn var(--m-rise) var(--e-settle); } @keyframes writIn { from { opacity: 0; transform: translateY(12px) scale(.985); } } /* The Gatehouse (auth) */ .gate { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; gap: 22px; } .lost { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; } .game-feature { padding: 30px 32px; display: flex; gap: 28px; align-items: flex-start; } .game-feature-emblem { width: 84px; height: 84px; border-radius: 20px; font-size: 34px; flex: none; } .game-soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .game-soon { padding: 22px 24px; display: flex; flex-direction: column; } .game-soon.voted { border-color: var(--line-strong); } /* games.vue — featured Valheim cover art (bleeds to 3 edges, masked into panel bg). Emblem tiles remain the fallback for games without art. */ .game-feature.has-art { padding: 0; gap: 0; overflow: hidden; } .game-feature.has-art .game-feature-art { flex: none; width: 220px; align-self: stretch; min-height: 264px; background: var(--ground-2) center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%); } .game-feature.has-art .game-feature-body { padding: 30px 32px; margin-left: -28px; min-width: 0; } /* Must be declared AFTER the rule above, not with the other 860px overrides ~130 lines up: both selectors are (0,3,0), so identical specificity falls through to source order and the later unconditional rule wins at EVERY viewport. Stacked mode never once applied — the art stacked on top while the body kept the side-by-side -28px left margin, pushing it 3px past the frame at 360-768 (clipped, not scrolled, because .game-feature.has-art is overflow:hidden, which is why it stayed invisible). This is the second instance of this exact cascade trap in this file; the first was .hero-art's height, which geometry/hero-art.pw.ts now guards. */ @media (max-width: 860px) { /* align-self, because .game-feature is `align-items: flex-start`: once the container turns into a column that sizes children to max-content, so the body kept its own intrinsic 315px inside a 310px frame and the panel quietly clipped the difference. Set on the item rather than flipping the container's align-items, which the emblem layout relies on. */ .game-feature.has-art .game-feature-body { margin-left: 0; margin-top: -28px; align-self: stretch; } } /* games.vue — petition card cover strip (art above, content below) */ .game-soon.has-art { padding: 0; overflow: hidden; } .game-soon-art { height: 120px; background: var(--ground-2) center / cover no-repeat; } .game-soon-body { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; } /* marketing hero background art — atmosphere, not a picture: masked into --ink, content above. One image per page; the mask + opacity are load-bearing. The element is the stationary aperture (mask + clip); animating it directly would drag the mask along and the dissolve edge would visibly swim. The photo is deliberately PINNED. A drift over this cut read as uncanny: the roofline and horizon are straight high-contrast edges sitting beside fixed text baselines, so any pan or scale creeps against them, and a moving horizon reads as the ground sliding rather than a camera move. Only things that move in the real world are animated — the fog, and the firelight in the windows. */ .hero-art { /* Reaches UP behind the header. ENG-101 made the shared header a sibling of .mk, so this — absolute at top:0 inside .mk — began below it, and the top of the page was a flat band of .app-bg with a hard seam where the photo started. The negative top puts the photo back at the page top with the nav floating over it, which is the arrangement .mk-nav's own z-index exists for. Height grows by the same amount so the art still ENDS where it always did — nothing below the hero shifts. */ position: absolute; top: calc(-1 * var(--mk-head-h)); left: 0; right: 0; height: calc(740px + var(--mk-head-h)); z-index: 0; overflow: hidden; pointer-events: none; opacity: .92; /* Dissolves DOWNWARD, into the page floor. This replaced a radial hot-spot at 52% 92% that opened at the bottom and faded upward — a better mask for a still photograph, but it held the top of the frame at ~14% alpha, and the WebGL atmosphere puts every bolt pixel and the whole sky flash in image-space uv.y 0.06-0.56. The old mask erased the entire effect. The direction of this fade is load-bearing for the FX layer, not a taste call: re-point it at the sky and the lightning goes with it. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 99%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 99%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* The photo — static, and deliberately so. A drift over this cut read as uncanny: the roofline and horizon are straight high-contrast edges sitting beside fixed text baselines, so any pan creeps against them. Only things that move in the real world are animated — the fog, and the firelight. A real rather than a background, because the FX layer reads its rendered rect each frame to map canvas uv -> image uv, and reads its pixels to extract the firelight mask. Neither is possible against a CSS background. The oversize + pull-up bottom-anchors the cover crop, lifting the hall clear of the body copy and behind the display type. */ /* Must sit AFTER the base rule, not up with the other 900px overrides: same specificity, so the cascade is decided on source order alone. The old 560px override was declared above the base rule and had never once applied. */ @media (max-width: 900px) { .marketing { --mk-head-pad: 18px; } .hero-art { height: calc(600px + var(--mk-head-h)); } } /* The pull-up is 60px, not the handoff's 160px. RE-MEASURED 2026-08-07 against the corrected uv mapping. The old note here claimed 60 "opens at image-space uv.y 0.080" and that 160 cropped the bolt's origin off. Both numbers came from the object-fit-blind mapping and were wrong, and the real answer is not a single number at all — where the frame opens depends on VIEWPORT WIDTH, because cover discards more height the wider it gets: width pull=0 pull=60 pull=160 1440 -0.012 0.025 0.086 1800 0.090 0.120 0.169 2560 0.212 0.233 0.267 3440 0.286 0.301 0.327 So the bolt's designed 0.06-0.12 origin is only in frame up to ~1800px, and past that NO pull-up recovers it (it would take a negative one). That is now handled where it belongs — uTopUv in HeroAtmosphere.vue floors the bolt's start at the visible top of the frame — rather than by tuning this. Which leaves 60 doing very little: it slides the crop window by 0.021 uv at 2560, 0.037 at 1440. Kept because it is harmless and bottom-anchors the crop a touch, NOT because the old rationale held up. Nothing here rides on it now. */ .hero-photo { position: absolute; top: -60px; left: 0; right: 0; display: block; height: calc(100% + 60px); } .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* drifting mist over the treeline. Fog genuinely moves, so this reads as weather rather than as the landscape sliding. Overhangs far past both edges so the translate never exposes one, and transform-only to stay off paint. */ .hero-fog { /* Sits in the mask's opaque band (0-55%) rather than pinned to the bottom as before: under the old upward fade the valley was the brightest part of the frame, under this one the bottom is where the art dissolves out, and fog anchored there was fading to nothing. */ position: absolute; left: -55%; right: -55%; top: 26%; height: 34%; background: radial-gradient(56% 100% at 32% 62%, rgba(216,205,183,0.19), transparent 72%), radial-gradient(42% 92% at 71% 48%, rgba(216,205,183,0.14), transparent 74%); /* Both radials are still ~4-6% opaque where this box ends, so the box edge cut a hard horizontal line across the frame. Dissolve the layer into its own top edge instead — and keep this mask even if the alphas change again, since it makes the edge unconditionally safe rather than safe-by-tuning. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%); mask-image: linear-gradient(to bottom, transparent 0%, #000 42%); animation: fogDrift 40s var(--e-inout) infinite alternate; } /* firelight in the hall windows. The sprite shares the photo's 16:9 canvas and the identical `bottom / cover` sizing, so it tracks the windows at every viewport — a gradient could not, since its percentages resolve against the element box, whose aspect changes with the viewport while the photo's cannot. NOTE: the glow's position is baked into the sprite against THIS crop; re-cut the art and hero-hearth must be regenerated to match. */ /* Firelight in the hall windows — the fallback path only. The sprite must share the photo's box exactly or the glow walks off the windows, so it tracks .hero-photo's geometry, not the host's. Its position is baked against THIS crop; re-cut the art and this must be regenerated to match. (The WebGL path has no such coupling — it derives the same glow from the image's own warm pixels at runtime.) */ .hero-hearth { position: absolute; top: -60px; left: 0; right: 0; height: calc(100% + 60px); mix-blend-mode: screen; background: url(/brand/hero-hearth3.png) center / cover no-repeat; background-image: image-set( url(/brand/hero-hearth3.avif) type("image/avif"), url(/brand/hero-hearth3.png) type("image/png") ); animation: hearthFlicker 7.5s ease-in-out infinite; } /* Legibility scrim for the left-aligned headline. Under the old radial mask the top-left corner was already dimmed to near nothing and this was free; the linear fade holds it at full opacity, so the contrast is now this layer's job. Note it claims ::after, which used to carry a screened firelight bloom — the bloom is gone, superseded by the shader's sky flash and window glow (and by the scrim itself, which would have fought it). */ .hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(97deg, rgba(16,15,11,.50) 0%, rgba(16,15,11,.18) 34%, transparent 58%); } /* The WebGL layer. Renders only light on black, so `screen` adds glow without ever darkening the art. Sits under the scrim, above the photo. */ .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; } /* The shader supersedes both CSS atmosphere layers once it is actually running — set only after the context exists AND the program links, so a failure anywhere in that chain leaves the CSS hero intact rather than bare. */ .hero-art.fx-live .hero-fog, .hero-art.fx-live .hero-hearth { display: none; } /* transform-only: stays on the compositor, no layout or paint per frame */ @keyframes fogDrift { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(12%, 0, 0); } } /* uneven stops on purpose — evenly spaced keyframes read as a metronome, and firelight doesn't keep time. 0% and 100% match so the loop never snaps. */ @keyframes hearthFlicker { 0% { opacity: .38; } 11% { opacity: .80; } 19% { opacity: .49; } 33% { opacity: .98; } 44% { opacity: .60; } 57% { opacity: .90; } 69% { opacity: .44; } 82% { opacity: .95; } 100% { opacity: .38; } } /* The global reduce rule only collapses duration, which would freeze these at their `to` frame — pin them to a deliberate resting state instead. This is also the whole reduced-motion story for the hero: HeroAtmosphere.vue never mounts the WebGL layer when reduce is set, so these two layers are what those visitors get. Lightning is the reason — a burst is 2-3 strobes 90-310ms apart across a full-bleed layer, which is squarely what the WCAG 2.3.1 flash threshold exists for, and gating the bolt alone would still leave a canvas running for no visible gain. */ @media (prefers-reduced-motion: reduce) { .hero-fog { animation: none; transform: none; } .hero-hearth { animation: none; opacity: .78; } } /* marketing support panel — copy left, mini-ledger right */ .support-panel { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px; align-items: center; } /* treasury widget in-play / asleep demo chips */ .tw-chips { display: flex; gap: 6px; } .tw-chip { font-family: var(--sans); font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--parchment-ln); background: transparent; color: var(--ink-on-parch-dim); cursor: pointer; transition: color var(--m-quick), border-color var(--m-quick), background var(--m-quick); } .tw-chip:hover { border-color: var(--gold-lo); } .tw-chip.sel { border-color: var(--gold-lo); color: var(--gold-deep); background: rgba(43,36,23,0.05); } /* marketing "The Realms" strip — teaser cards linking to /games */ .games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding-bottom: 74px; } .game-card { overflow: hidden; display: flex; flex-direction: column; padding: 0; text-decoration: none; } .game-card-art { width: 100%; height: 170px; background: var(--ground-2) center / cover no-repeat; display: block; } .game-card.featured { grid-column: 1 / -1; } .game-card.featured .game-card-art { height: 300px; } .game-meta { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; } .game-meta .pill, .game-meta .tag-live { white-space: nowrap; flex: none; } .game-name { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--cream); } .faq { padding: 10px 30px; } .faq-row { border-bottom: 1px solid var(--parchment-ln); } .faq-row:last-child { border-bottom: 0; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; cursor: pointer; text-align: left; padding: 18px 2px; font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink-on-parch); } .faq-q:hover { color: var(--gold-deep); } .faq-chev { display: inline-flex; color: var(--gold-lo); transition: transform .15s; flex: none; } .faq-a { margin: -6px 0 0; padding: 0 2px 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-on-parch); max-width: 56em; } .pub-status { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; padding: 14px 24px; margin: -8px 0 30px; border-radius: 999px; } .pub-stat { font-size: 13.5px; color: var(--cream-mut); white-space: nowrap; } .pub-stat .tnum { font-weight: 700; color: var(--cream-dim); } .gate-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; } .gate-brand .wordmark { font-size: 21px; } .gate-card { width: min(460px, 100%); padding: 34px 36px 30px; } .gate-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 24px; } .gate-title { font-size: 30px; margin: 0; color: var(--cream); } .gate-sub { font-style: italic; font-size: 16px; color: var(--cream-dim); margin: 0; line-height: 1.45; text-wrap: pretty; } .gate-notice { display: inline-flex; align-items: center; gap: 9px; max-width: min(460px, 100%); font-size: 13.5px; font-weight: 600; color: var(--gold-hi); background: var(--gold-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 18px; text-align: center; } .gate-forgot { align-self: center; font-size: 13.5px; font-weight: 600; color: var(--cream-mut); text-decoration: none; cursor: pointer; transition: color .15s; } .gate-forgot:hover { color: var(--gold-hi); } .gate-links { color: var(--cream-mut); font-size: 14px; display: flex; gap: 7px; align-items: center; } .gate-links a { cursor: pointer; font-weight: 600; text-decoration: none; } .gate-links a:hover { text-decoration: underline; } .gate-foot { font-style: italic; font-size: 15px; color: var(--cream-mut); margin: 4px 0 0; } .gate-err { color: var(--blood); font-size: 13.5px; font-weight: 600; } .key-input { text-align: center; font-size: 21px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .key-input::placeholder { letter-spacing: .14em; font-size: 19px; } .gate-writ-tag { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pine); background: var(--pine-bg); border: 1px solid var(--success-line); border-radius: var(--r); padding: 9px 14px; } /* scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--ground-3); border-radius: 6px; border: 3px solid var(--ink); } ::-webkit-scrollbar-track { background: transparent; } /* app-specific (not in the design bundle): centered placeholder for the "coming soon" pages (Treasury/Court) and the Realm stub until M1-B builds the real dashboard. */ .coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; text-align: center; } .coming-soon .steward { font-size: 18px; color: var(--cream-dim); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .stack-16 { display: flex; flex-direction: column; gap: 16px; } /* First-run realm hero */ .first-run { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 28px; } .first-run-steps { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 26px; color: var(--cream-dim); font-size: 14px; } .first-run-steps > span { white-space: nowrap; } .first-run-steps b { color: var(--gold-hi); margin-right: 6px; font-weight: 800; } .fr-sep { display: inline-flex; align-items: center; opacity: 0.45; } /* ============================================================ MOTION — tokens, loops, entrances (binding spec: motion-spec.jsx) ============================================================ */ :root { --m-fast: 140ms; /* hover, press, chevrons, chips */ --m-quick: 200ms; /* fades, pills, color/opacity crossfades */ --m-move: 260ms; /* overlays, drawers, page enter */ --m-rise: 450ms; /* ceremonial entrances (writ, fresh realm) */ --e-settle: cubic-bezier(.2,.8,.3,1); --e-inout: cubic-bezier(.45,0,.25,1); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } } @keyframes fadeIn { from { opacity: 0; } } .page { animation: fadeUp var(--m-move) var(--e-settle) both; } .pill { transition: color var(--m-quick), background var(--m-quick), border-color var(--m-quick); } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skel { position: relative; overflow: hidden; border-radius: 8px; background: var(--ground-3); } .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, rgba(240,214,153,0.09) 50%, transparent 68%); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; } .skel-round { border-radius: 50%; } .loading-state { display: grid; place-items: center; gap: 14px; padding: 40px 0; text-align: center; } .loading-state.compact { padding: 8px 0; } .loading-state-text { font-style: italic; font-size: 16.5px; color: var(--cream-dim); animation: fadeIn .3s ease; } .loading-state.compact .loading-state-text { font-size: 14.5px; } @keyframes goldPulse { from { box-shadow: 0 0 0 0 rgba(203,163,92,0.4); } to { box-shadow: 0 0 0 16px rgba(203,163,92,0); } } .just-summoned { animation: writIn var(--m-rise) var(--e-settle), goldPulse 1.1s ease-out var(--m-rise); } .gold-pulse { animation: goldPulse 1.1s ease-out; } @keyframes sheetIn { from { opacity: 0; transform: translateY(44px); } } /* --- SealLoader (calm loader): a sheen sweep + slow breath; no spin --- */ .seal-loader { position: relative; display: inline-grid; place-items: center; flex: none; animation: sealBreath 3s ease-in-out infinite; } .seal-loader.no-breath { animation: none; } .seal-loader .seal-sheen { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,250,235,0.6) 50%, transparent 62%); background-size: 240% 240%; mix-blend-mode: screen; animation: sealSheen 1.9s linear infinite; } @keyframes sealSheen { from { background-position: 210% 0; } to { background-position: -130% 0; } } @keyframes sealBreath { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.01); } } /* --- MintLoader (ceremonial): a press strikes the seal, flash + ripple. Summon modal only. --- */ .mint-loader { position: relative; display: block; width: 116px; height: 150px; flex: none; margin: 0 auto; } .mint-loader .mint-seal { position: absolute; left: 50%; bottom: 30px; margin-left: -28px; z-index: 2; transform-origin: center; animation: mintFlash 1.6s var(--e-inout) infinite; } .mint-loader .mint-press { position: absolute; top: 6px; left: 50%; width: 54px; height: 32px; margin-left: -27px; z-index: 3; background: linear-gradient(180deg, #423b2c, #25211a); border: 1px solid var(--line-strong); border-bottom-color: var(--gold-deep); border-radius: 5px 5px 7px 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); animation: mintStrike 1.6s var(--e-inout) infinite; } .mint-loader .mint-press::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 24px; height: 5px; margin-left: -12px; background: var(--gold-lo); border-radius: 0 0 3px 3px; opacity: .7; } .mint-loader .mint-anvil { position: absolute; bottom: 16px; left: 50%; width: 70px; height: 12px; margin-left: -35px; background: linear-gradient(180deg, #2c2820, #1b1813); border: 1px solid var(--line); border-radius: 4px; } .mint-loader .mint-ripple { position: absolute; top: 92px; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; z-index: 1; animation: mintRipple 1.6s ease-out infinite; } @keyframes mintStrike { 0%, 32%, 100% { transform: translateY(0); } 48% { transform: translateY(42px); } 60% { transform: translateY(0); } } @keyframes mintFlash { 0%, 44%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.4); transform: scale(1.05); } 64% { filter: brightness(1); transform: scale(1); } } @keyframes mintRipple { 0%, 46% { box-shadow: 0 0 0 0 rgba(203,163,92,0); } 52% { box-shadow: 0 0 0 0 rgba(203,163,92,0.55); } 100% { box-shadow: 0 0 0 24px rgba(203,163,92,0); } } /* --- recall / undo toast (banking the hearth) --- */ .toast-stack { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; pointer-events: none; } .toast-summon { display: flex; align-items: center; gap: 13px; background: var(--ground-2); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0,0,0,0.5); padding: 11px 12px 11px 15px; pointer-events: auto; } .toast-fixed { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90; width: min(440px, calc(100% - 32px)); animation: toastIn .3s var(--e-settle); } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 18px); } } /* dying-ember dot for the busy "Dismissing…" button */ .ember { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 8px 1px rgba(203,163,92,0.6); animation: ember 1.1s ease-in-out infinite alternate; } @keyframes ember { from { opacity: 1; box-shadow: 0 0 8px 1px rgba(203,163,92,0.6); } to { opacity: .4; box-shadow: 0 0 2px 0 rgba(203,163,92,0.12); } } /* one-shot: the card cools as it goes dormant */ .hearth-cool { animation: hearthCool .7s var(--e-settle) both; } @keyframes hearthCool { 0% { filter: saturate(1.16) brightness(1.05); } 100% { filter: saturate(.92) brightness(.98); } } /* one-shot: warm glow contracts off the emblem — embers banked */ .emblem-bank { position: relative; } .emblem-bank::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; animation: emberGlow .8s var(--e-settle) both; } @keyframes emberGlow { 0% { box-shadow: 0 0 18px 5px rgba(203,163,92,0.4); } 100% { box-shadow: 0 0 0 0 rgba(203,163,92,0); } } /* ledger crossfade (200ms) */ .fade-enter-active, .fade-leave-active { transition: opacity .2s var(--e-settle); } .fade-enter-from, .fade-leave-to { opacity: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ MENUS · SELECT · LIST TOOLBAR (added 2026-07-20) Popover menus, the styled select, segmented filters, inline confirm bars, and the row-list pattern (Realms Past et al). ============================================================ */ /* popover menu */ .menu-wrap { position: relative; display: inline-flex; } .menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 200px; padding: 6px; display: none; background: linear-gradient(180deg, var(--ground-3), var(--ground-2)); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 18px 44px -12px rgba(0,0,0,0.65), inset 0 1px 0 rgba(236,206,133,0.07); } .menu-wrap.open > .menu, .select.open > .menu { display: block; animation: fadeUp var(--m-quick) var(--e-settle); } .menu.left { right: auto; left: 0; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--cream-dim); cursor: pointer; text-align: left; white-space: nowrap; text-decoration: none; } .menu-item:hover { background: var(--gold-soft); color: var(--gold-hi); } .menu-item.danger { color: var(--blood); } .menu-item.danger:hover { background: var(--blood-bg); color: var(--blood); } .menu-item .mi-sub { margin-left: auto; padding-left: 18px; font-size: 12px; font-weight: 500; color: var(--cream-mut); } .menu-item .mi-check { margin-left: auto; display: inline-flex; visibility: hidden; color: var(--gold); } .menu-item .mi-sub + .mi-check { margin-left: 0; } .menu-item.sel { color: var(--cream); } .menu-item.sel .mi-check { visibility: visible; } .menu-sep { height: 1px; margin: 6px 4px; background: var(--line); } .menu-head { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cream-mut); } /* select — an input-shaped trigger that opens a .menu */ .select { position: relative; display: inline-flex; flex-direction: column; } .select-btn { display: flex; align-items: center; gap: 9px; cursor: pointer; width: 100%; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--cream); padding: 10px 12px 10px 14px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--ink); text-align: left; transition: border-color var(--m-quick) ease, box-shadow var(--m-quick) ease; } .select-btn:hover { border-color: var(--gold-lo); } .select-btn .sel-lab { color: var(--cream-mut); font-weight: 600; flex: none; } .select-btn .sel-chev { display: inline-flex; margin-left: auto; color: var(--cream-mut); transform: rotate(90deg); transition: transform var(--m-fast) ease; } .select.open .select-btn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .select.open .sel-chev { transform: rotate(-90deg); } .select > .menu { top: calc(100% + 6px); left: 0; right: auto; min-width: 100%; } .menu.up, .select > .menu.up { top: auto; bottom: calc(100% + 6px); } .select.open > .menu.up { animation: fadeIn var(--m-quick) var(--e-settle); } /* native