/* ================================================================== HELIOPULP SITE LAYER: knight branding for every templated page (casino reviews on mission.css, and the header-footer.css family: state pages, blog posts, casinos-like, side hustle articles, hubs). Loaded LAST in the head. Only re-points existing tokens, restyles type and removes the old "mission control" chrome, so no page markup depends on it. Each page picks its painting with --hp-art on . ================================================================== */ :root, html[data-theme]{ /* shared palette (same as the homepage and the list page) */ --hp-night:#070F1D; --hp-ink:#0B1628; --hp-card:#0F1F2E; --hp-gold:#f2b344; --hp-mint:#5EE8AD; --hp-ivory:#efe6d4; --hp-dim:#8B9BB4; --hp-crimson:#d25a4e; --hp-line:rgba(242,179,68,.16); --hp-line-strong:rgba(242,179,68,.5); --hp-serif:'IM Fell English',Georgia,'Times New Roman',serif; --hp-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* header-footer.css family tokens */ --bg:var(--hp-night); --bg-card:var(--hp-ink); --bg-card2:var(--hp-card); --bg-nav:rgba(7,15,29,.92); --text:var(--hp-ivory); --text-dim:#b9c3d4; --text-muted:var(--hp-dim); --lime:var(--hp-gold); --lime-text:var(--hp-night); --teal:var(--hp-mint); --teal-dim:rgba(94,232,173,.55); --teal-faint:rgba(94,232,173,.12); --border:var(--hp-line); --border-md:var(--hp-line-strong); --console-line:var(--hp-line); --bracket:var(--hp-line-strong); --card-accent:var(--hp-gold); --card-accent-faint:rgba(242,179,68,.08); --card-glow:rgba(242,179,68,.18); --tier-god:var(--hp-gold); --tier-high:var(--hp-mint); --tier-mid:#9d87c9; --mfont:var(--hp-mono); /* mission.css family tokens (casino reviews) */ --ink:var(--hp-ivory); --mut:var(--hp-dim); --line:var(--hp-line); --s1:var(--hp-ink); --s2:var(--hp-card); --mono:var(--hp-mono); --amber:#e9965c; --coral:var(--hp-crimson); --violet:#9d87c9; } /* ---------- page backdrop: the template's painting, dimmed, with nebula glow ---------- */ html{background-color:var(--hp-night)!important} html body{background:transparent!important;color:var(--hp-ivory)} /* a painted body would cover the fixed art layer */ html body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:var(--hp-art, none) center 22% / cover no-repeat; filter:brightness(.34) saturate(1.1); } html body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1px 1px at 14% 20%,rgba(255,255,255,.8),transparent 60%), radial-gradient(1.5px 1.5px at 62% 12%,rgba(255,236,190,.8),transparent 60%), radial-gradient(1px 1px at 83% 44%,rgba(230,200,255,.75),transparent 60%), radial-gradient(1px 1px at 33% 71%,rgba(190,255,230,.6),transparent 60%), radial-gradient(55vmax 34vmax at 6% 8%,rgba(186,62,170,.22),transparent 60%), radial-gradient(50vmax 30vmax at 94% 16%,rgba(94,70,210,.26),transparent 60%), radial-gradient(60vmax 20vmax at 50% 0%,rgba(94,232,173,.10),transparent 65%), linear-gradient(180deg,rgba(7,15,29,.1),rgba(7,15,29,.55) 60%,rgba(7,15,29,.8)); background-size:560px 560px,640px 640px,600px 600px,700px 700px,100% 100%,100% 100%,100% 100%,100% 100%; } /* ---------- remove the old mission-control chrome ---------- */ body > canvas, #stars, .neb, .bg-orb, .bg-grid, .bg-scanlines, .bg-vignette, .space-background{display:none!important} html[data-theme] body::before{filter:brightness(.34) saturate(1.1)} /* beat the Citadel art layer where present */ /* ---------- type ---------- */ body{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif} h1, h2, .hero h1, .content-area h1{font-family:var(--hp-serif)!important;font-weight:400!important;letter-spacing:0!important;color:var(--hp-ivory)} h1{line-height:1.04!important;text-shadow:0 2px 22px rgba(0,0,0,.75)} h1 .hl, h1 span, h1 em{color:var(--hp-gold)!important;font-style:italic} h2{font-size:clamp(28px,3.2vw,40px)!important;line-height:1.1!important} h3{letter-spacing:.02em} a{color:var(--hp-gold)} p, li{line-height:1.7} /* eyebrow / section labels keep the mono voice, in gold */ .hero-label, .eyebrow, [class*="label"]:not(label){color:var(--hp-gold)} /* ---------- surfaces: squared, gold-ruled ---------- */ [class*="card"], [class*="panel"], [class*="box"], .spec, .verdict, table{border-radius:0!important} [class*="card"]:hover{box-shadow:0 26px 60px -26px rgba(242,179,68,.4)} table th{font-family:var(--hp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hp-dim)} /* ---------- buttons: sign-up / play in gold, never emerald ---------- */ a[class*="cta"], a[class*="btn"], button[class*="btn"], .hero-cta a{ background:var(--hp-gold)!important;color:var(--hp-night)!important;border-color:var(--hp-gold)!important; border-radius:0!important;font-family:var(--hp-mono);letter-spacing:.1em} a[class*="cta"]:hover, a[class*="btn"]:hover, .hero-cta a:hover{background:var(--hp-ivory)!important} .nav-cta{border-radius:999px!important} /* ---------- nav matches the homepage ---------- */ nav, .nav{background:var(--bg-nav)!important;backdrop-filter:blur(8px);border-bottom:1px solid var(--hp-line)} .nav-brand{font-family:var(--hp-serif)!important;letter-spacing:.04em} .nav-logo{border-radius:6px} @media (prefers-reduced-motion:reduce){*{animation:none!important}} /* review template labels (mission.css draws these with ::after content) */ body:has(.verdict-card) .page-header::after{content:"\263C Casino Review \263C"!important;letter-spacing:.24em} /* ---------- painted hero banner (hub and one-off pages; same look as the casino list header) ---------- build_heliopulp_chrome.py adds .hp-banner to the page's hero and puts the painting inside it. */ .hp-banner{position:relative!important;overflow:hidden!important;isolation:isolate; border:1px solid var(--hp-line-strong)!important;outline:1px solid rgba(242,179,68,.18);outline-offset:5px; background:#0B1628!important;border-radius:0!important;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)!important; max-width:1240px;margin-left:auto!important;margin-right:auto!important;margin-top:26px!important;margin-bottom:40px!important; padding:clamp(52px,6vw,84px) clamp(22px,4.4vw,56px) clamp(34px,4vw,50px)!important; min-height:clamp(320px,32vw,460px);opacity:1!important;transform:none!important} .hp-banner::before,.hp-banner::after{display:none!important} .hp-banner > :not(.hp-banner-plate){position:relative;z-index:2} .hp-banner > [aria-hidden="true"]:not(.hp-banner-plate){display:none!important} /* old decorative accents clash with the painting */ .hp-banner-plate{position:absolute!important;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hp-banner-plate .stage{position:absolute;inset:0} .hp-banner-plate .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block; filter:brightness(1.05) saturate(1.12) contrast(1.04)} .hp-banner-plate .asciiwrap{position:absolute;inset:0;pointer-events:none;transition:opacity .6s} .hp-banner-plate .asciiwrap canvas{position:absolute;inset:0;width:100%;height:100%} .hp-banner-plate .asciiwrap .glow{mix-blend-mode:screen;opacity:.8} .mode-soft .hp-banner-plate .asciiwrap{opacity:var(--ao,1); -webkit-mask-image:radial-gradient(circle var(--r,190px) at var(--mx,-999px) var(--my,-999px),transparent 40%,#000 100%); mask-image:radial-gradient(circle var(--r,190px) at var(--mx,-999px) var(--my,-999px),transparent 40%,#000 100%)} .mode-paint .hp-banner-plate .asciiwrap{opacity:0} .hp-banner-plate::after{content:"";position:absolute;inset:0;z-index:1; background:radial-gradient(110% 95% at 34% 55%,rgba(7,15,29,.74),rgba(7,15,29,.4) 58%,rgba(7,15,29,.12) 100%), linear-gradient(0deg,rgba(7,15,29,.72),rgba(7,15,29,0) 42%)} .hp-banner h1,.hp-banner p,.hp-banner [class*="label"],.hp-banner [class*="eyebrow"],.hp-banner [class*="kicker"],.hp-banner [class*="badge"]{ text-shadow:0 2px 16px #050b16,0 0 6px #050b16,0 0 2px #050b16} .hp-banner h1{font-size:clamp(38px,4.8vw,66px)!important} .hp-banner p{color:#ddd5c5} @media (max-width:700px){ .hp-banner{padding:40px 18px 28px!important;min-height:0;margin-top:14px!important;outline-offset:3px} .hp-banner-plate .stage img{filter:brightness(.9) saturate(1.1)} } /* ---------- painted door cards (rail front doors; same card as the homepage library) ---------- */ .doors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin:34px 0 10px} .doors-grid .lib-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--hp-line);background:#0B1628;overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s} .doors-grid .lib-card:hover{transform:translateY(-6px);border-color:var(--hp-line-strong);box-shadow:0 30px 60px -24px rgba(242,179,68,.4)} .doors-grid .lib-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:brightness(1.08) saturate(1.1)} .doors-grid .lib-card div{padding:20px 22px 24px} .doors-grid .rail-name{font-family:var(--hp-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--hp-mint)} .doors-grid h3{font-family:'IM Fell English SC',var(--hp-serif);font-weight:400;font-size:24px;line-height:1.15;margin:8px 0;color:var(--hp-ivory)} .doors-grid p{color:var(--hp-dim);font-size:16px;margin:0} @media (prefers-reduced-motion:reduce){.doors-grid .lib-card{transition:none}} /* old gradient-clipped headline text (purple, green) becomes the brand ivory with gold italic accents */ .hp-banner h1,.hp-banner h1 *{background-image:none!important;-webkit-text-fill-color:currentColor!important} .hp-banner h1{color:var(--hp-ivory)!important} .hp-banner h1 span,.hp-banner h1 em,.hp-banner h1 .hl,.hp-banner h1 [class*="accent"],.hp-banner h1 [class*="gradient"]{color:var(--hp-gold)!important} .hp-banner .hero-icon{background:radial-gradient(ellipse at 35% 35%,#ffe2a1,#f2b344 55%,#c98a1f)!important;box-shadow:0 0 40px rgba(242,179,68,.35),0 0 80px rgba(242,179,68,.12)!important} .hp-banner .hero-cards{display:none!important} /* old playing-card/dice decoration: off-brand, and the painting replaces it */ /* review pages rotate between 5 paintings, so let the backdrop show through enough to notice */ body:has(.verdict-card) .page-plate .stage img{filter:brightness(.62) saturate(1.15)!important} body:has(.verdict-card) .page-plate::after{background:radial-gradient(90% 75% at 50% 35%,rgba(7,15,29,.12),rgba(7,15,29,.62) 100%)!important} body:has(.verdict-card) .page-header h1,body:has(.verdict-card) .page-header p{text-shadow:0 2px 16px #050b16,0 0 6px #050b16}