/* ================================================================== HELIOPULP CHROME: the shared header controls, rail footer and the living-art page backdrop. Loaded on every page (with heliopulp-site.css on templated pages, with heliopulp-list.css on the casino list). ================================================================== */ /* ---------- header controls: art toggle, Join Discord, Login ---------- */ .nav-links{align-items:center} .nav-art,.nav-login{ font-family:'JetBrains Mono',ui-monospace,monospace!important;font-size:11.5px!important;letter-spacing:.14em!important; text-transform:uppercase;white-space:nowrap;cursor:pointer;border-radius:999px!important;padding:7px 12px!important;line-height:1} .nav-art{background:rgba(7,15,29,.7)!important;border:1px solid rgba(242,179,68,.4)!important;color:#f2b344!important} .nav-art:hover{background:#f2b344!important;color:#070F1D!important} .nav-login{border:1px solid rgba(239,230,212,.45)!important;color:#efe6d4!important;text-decoration:none!important;background:transparent!important} .nav-login:hover{border-color:#f2b344!important;color:#f2b344!important} a.nav-cta{background:#5865F2!important;color:#fff!important;border:0!important;border-radius:999px!important} a.nav-cta:hover{background:#6d78f5!important} .mobile-menu .nav-art{margin:8px 0} /* the floating Discord card duplicated the header button */ .discord-widget{display:none!important} /* ---------- living art backdrop (templated pages) ---------- */ .page-plate{position:fixed!important;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .page-plate .stage{position:absolute;inset:0} .page-plate .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.36) saturate(1.1)} .page-plate .asciiwrap{position:absolute;inset:0;transition:opacity .6s} .page-plate .asciiwrap canvas{position:absolute;inset:0;width:100%;height:100%} .page-plate .asciiwrap .glow{mix-blend-mode:screen;opacity:.55} .mode-soft .page-plate .asciiwrap{opacity:calc(var(--ao,1) * .55)} .mode-paint .page-plate .asciiwrap{opacity:0} .page-plate::after{content:"";position:absolute;inset:0; background:radial-gradient(90% 70% at 50% 30%,rgba(7,15,29,.25),rgba(7,15,29,.72) 100%)} /* ---------- rail footer ---------- */ footer.hp-foot{position:relative;z-index:1;margin-top:72px;padding:64px 24px 34px;border-top:1px solid rgba(242,179,68,.18); background:linear-gradient(180deg,rgba(7,15,29,.55),rgba(7,15,29,.92));color:#8B9BB4;font-family:'JetBrains Mono',ui-monospace,monospace} .hp-foot .hp-foot-in{max-width:1240px;margin:0 auto} .hp-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:40px} .hp-foot .brand img{width:44px;height:44px;border-radius:10px;display:block;margin-bottom:12px} .hp-foot .brand b{font-family:'IM Fell English SC','IM Fell English',Georgia,serif;font-weight:400;font-size:22px;color:#efe6d4;letter-spacing:.04em} .hp-foot .brand p{font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:17px;margin:6px 0 0;color:#8B9BB4} .hp-foot h4{font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#f2b344;margin:0 0 14px} .hp-foot a{display:block;padding:5px 0;color:#8B9BB4;text-decoration:none;font-size:13px} .hp-foot a:hover{color:#efe6d4} .hp-foot .legal{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:22px;border-top:1px solid rgba(242,179,68,.14);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase} .hp-foot .legal a{display:inline;padding:0;font-size:11.5px} .hp-foot .copy{margin-top:16px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase} @media (max-width:760px){.hp-foot .cols{grid-template-columns:1fr 1fr}.hp-foot .brand{grid-column:1/-1}} /* ---------- header fit: one row on wide screens, the ☰ menu below 1280px ---------- */ .nav-brand{white-space:nowrap!important} nav .nav-links a.nav-cta,.mobile-menu a[href*="discord"]{background:#5865F2!important;color:#fff!important;border:0!important;border-radius:999px!important} nav .nav-links a.nav-cta:hover{background:#6d78f5!important} /* compact header: stays one row down to 900px; the menu only takes over below that */ nav .nav-inner{max-width:1360px!important;min-height:52px;gap:12px} nav .nav-links{flex-wrap:nowrap!important;gap:2px 4px!important} nav .nav-links .nav-link{white-space:nowrap;font-size:12px!important;padding:6px 8px!important;letter-spacing:.02em} nav .nav-links a.nav-cta,nav .nav-links .nav-login{font-size:10.5px!important;padding:6px 11px!important;letter-spacing:.12em!important;margin-left:4px} nav .nav-links .nav-art{width:30px;height:30px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;font-size:14px!important;letter-spacing:0!important;margin-left:6px} @media (min-width:961px){nav .nav-links{display:flex!important}} @media (max-width:1180px){ nav .nav-links .nav-link{font-size:11.5px!important;padding:6px 6px!important} .nav-brand{font-size:0!important;gap:0!important} /* logo only, the words come back above 1180px */ } @media (max-width:960px){ nav .nav-links{display:none!important} nav .nav-hamburger{display:inline-flex!important} .nav-brand{font-size:13px!important} } .mobile-menu .nav-art{align-self:flex-start} /* ---------- long headings never push the page wider than the screen ---------- */ h1,h2,h3,h4{overflow-wrap:anywhere;max-width:100%} /* ---------- backdrop ASCII fades to soft edges ---------- */ .page-plate .asciiwrap{-webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 40%,#000 30%,rgba(0,0,0,.45) 65%,transparent 100%); mask-image:radial-gradient(ellipse 80% 75% at 50% 40%,#000 30%,rgba(0,0,0,.45) 65%,transparent 100%)} /* wide data tables scroll inside their own box on phones instead of widening the page */ @media (max-width:760px){table{display:block;max-width:100%;overflow-x:auto}} /* leftover mission-control decoration that flew past the screen edge */ .shooting-star{display:none!important} /* button rows wrap on phones (the knight mono is a touch wider than the old one) */ @media (max-width:760px){[class*="filter-group"],[class*="filters"],[class*="chip-row"],[class*="tier-row"]{flex-wrap:wrap!important;max-width:100%}} /* ================================================================== ☰ MENU: only below 1280px, a solid knight panel, clean stacked pills ================================================================== */ @media (min-width:961px){ nav .nav-hamburger{display:none!important} .mobile-menu,.mobile-menu.open{display:none!important} } .mobile-menu{ background:linear-gradient(180deg,#0B1628 0%,#070F1D 100%)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; border-top:1px solid rgba(242,179,68,.25); padding:18px 24px 40px!important;gap:0!important;overflow-y:auto} .mobile-menu a{ display:flex!important;justify-content:space-between;align-items:center; font-family:'IM Fell English',Georgia,serif!important;font-size:25px!important;letter-spacing:0!important;text-transform:none!important; color:#efe6d4!important;background:transparent!important;border:0!important;border-radius:0!important; border-bottom:1px solid rgba(242,179,68,.14)!important;padding:15px 4px!important;text-decoration:none!important} .mobile-menu a::after{content:"→";font-family:'JetBrains Mono',monospace;font-size:15px;color:#f2b344} .mobile-menu a:hover{color:#f2b344!important} /* the three controls: compact pills under the links */ .mobile-menu a[href*="discord"],.mobile-menu a[href="/login"]{ justify-content:center!important;margin-top:14px;padding:13px 18px!important;border-radius:999px!important; font-family:'JetBrains Mono',monospace!important;font-size:13px!important;letter-spacing:.14em!important;text-transform:uppercase!important} .mobile-menu a[href*="discord"]{background:#5865F2!important;color:#fff!important;border:0!important;margin-top:26px} .mobile-menu a[href="/login"]{border:1px solid rgba(239,230,212,.45)!important;color:#efe6d4!important} .mobile-menu a[href*="discord"]::after,.mobile-menu a[href="/login"]::after{content:none} .mobile-menu .nav-art{align-self:center!important;margin-top:16px!important} /* nothing floats over the open menu */ body:has(.mobile-menu.open) #oshSaveChip,body:has(.mobile-menu.open) .osh-chip,body:has(.mobile-menu.active) #oshSaveChip,body:has(.mobile-menu.active) .osh-chip{display:none!important} @media (min-width:961px){.mobile-menu.active{display:none!important}} /* ================================================================== MOTION (js/heliopulp-motion.js adds .hp-motion; all off for reduced motion) ================================================================== */ /* scroll reveal */ .hp-motion .hp-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--hp-delay,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--hp-delay,0ms)} .hp-motion .hp-reveal.hp-in{opacity:1;transform:none} /* the page headline catches one warm gold glint as it loads (glow only: no box can appear behind it) */ .hp-motion .hp-shine{animation:hp-glint 2.4s ease-out .4s 1 both} @keyframes hp-glint{0%{text-shadow:0 2px 22px rgba(0,0,0,.75)}35%{text-shadow:0 0 18px rgba(255,214,140,.95),0 0 46px rgba(242,179,68,.6)}100%{text-shadow:0 2px 22px rgba(0,0,0,.75)}} /* embers drifting up the page */ .hp-embers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .hp-embers i{position:absolute;bottom:-12px;width:var(--sz,3px);height:var(--sz,3px);border-radius:50%;background:#ffd98a; box-shadow:0 0 8px 2px rgba(242,179,68,.7);opacity:0;animation:hp-rise var(--d,12s) linear var(--delay,0s) infinite} @keyframes hp-rise{0%{opacity:0;transform:translate(0,0)}10%{opacity:.75}85%{opacity:.4}100%{opacity:0;transform:translate(var(--dx,0),-105vh)}} /* cards lean toward the cursor and catch a gold light */ .hp-tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;will-change:transform} .hp-tilt:hover{box-shadow:0 26px 60px -24px rgba(242,179,68,.45)!important} .hp-tilt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;z-index:1; background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(242,179,68,.14),transparent 60%)} .hp-tilt:hover::before{opacity:1} .hp-tilt{position:relative} /* buttons: a light sweep on hover */ a[class*="btn"],a[class*="cta"],.go,.nav-login{position:relative;overflow:hidden} a[class*="btn"]::after,a[class*="cta"]::after,.nav-login::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease} a[class*="btn"]:hover::after,a[class*="cta"]:hover::after,.nav-login:hover::after{transform:translateX(120%)} /* header links: a gold rule slides in under the hovered link */ nav .nav-links .nav-link{position:relative} nav .nav-links .nav-link::after{content:"";position:absolute;left:8px;right:8px;bottom:1px;height:1px;background:#f2b344;transform:scaleX(0);transform-origin:left;transition:transform .35s ease} nav .nav-links .nav-link:hover::after{transform:scaleX(1)} /* the sun sigil logo breathes */ .nav-logo,.brand img,.hp-foot .brand img{animation:hp-halo 5s ease-in-out infinite} @keyframes hp-halo{0%,100%{filter:drop-shadow(0 0 2px rgba(242,179,68,.35))}50%{filter:drop-shadow(0 0 9px rgba(242,179,68,.75))}} @media (prefers-reduced-motion:reduce){ .hp-embers{display:none} .hp-shine{animation:none!important} .nav-logo,.brand img,.hp-foot .brand img{animation:none} .hp-tilt{transform:none} } /* the footer's legal links are a