/* ═══════════════════════════════════════════════════════════════════════ Blood & Nectar — the HOME SCREEN frame. --------------------------------------------------------------------- Three things live here and nowhere else: 1. .home-shell — the left rail + content column that frames /game/'s menu view the way collection.html is framed. The RIGHT side of that frame is the shared friends rail (friends.css), which is position:fixed and overlays the page; #view-menu reserves room for it by reading --bn-friends-w, the custom property friends.js keeps on . Do not add a second social column here. 2. .home-page — the sub-pages the left rail switches between (Home / Tournament). Exactly one carries .on. Patch Notes is not one of them: it is its own client page, /game/patchnotes.html. 3. .hslide — the home slider's slides. These REPLACE the baked rotate.webp flyer. Every line of copy is text, not pixels: the tournament numbers change, and re-rendering art each time is how the old flyer went stale. Champion splash is a background only. Loaded by: web/game/index.html only. Bump ?v= there on every edit — .css is not in battleApi's no-store list. ═══════════════════════════════════════════════════════════════════════ */ /* ── The frame ───────────────────────────────────────────────────────── */ /* There is NO left rail. One was built here on 2026-08-05 and removed the same day — the home screen already carries the top bar and the nav tiles, and a third navigation column just ate the hero. Do not reintroduce it: Decks / Talents / History belong to the collection's rail, Patch Notes is a top-bar link to its own page, and the Tournament page is reached from the promo slide. The right side of the frame is the shared fixed rail from friends.css. */ .home-shell { display: flex; flex: 1; min-height: 0; } /* Content column. The old menu body (.lol-main + .lol-bottom) now lives inside #home-page-home rather than directly in the view. */ .home-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .home-page { display: none; flex: 1; min-height: 0; flex-direction: column; } .home-page.on { display: flex; } /* Only the home face is a no-scroll poster; the Tournament page scrolls. */ #home-page-tournament.on { overflow-y: auto; } /* ── The slider ──────────────────────────────────────────────────────── */ /* Sits in the hero slot. One track, N slides, each the full slot. */ .hslider { position: absolute; inset: 0; overflow: hidden; background: #04080e; } .hslide-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); } /* Each slide is its own size container. The hero slot is whatever height is left after .lol-bottom's fixed 440px — roughly 225px on a 720-tall screen and 600+ on a big one. The old baked flyer just letterboxed itself into that; text cannot, so every type size below is measured against the slide (cqh/cqw) and the optional blocks drop out when there is no room. */ .hslide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; cursor: pointer; container-type: size; container-name: hslide; } /* Art layer. The splash is a backdrop that fades into the copy, never a framed image — the copy has to stay readable over whatever art is set. */ /* Splash art sits RIGHT of centre, not centred: the copy owns the left ~56%, so a centred subject ends up half-buried under the text block and reads as murk on both halves. Pushing it right puts the face in the empty half and lets the opacity come up — the old baked flyers were vivid, and a washed-out backdrop was the first thing that looked worse than what it replaced. */ /* size/position are set per slide by home.js's slide() — the splashes are all portrait and a landscape slot crops them differently depending on how tall each one is. no-repeat matters: a height-fitted slide is narrower than the panel and would otherwise tile. */ .hslide-art { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: cover; background-position: 68% 16%; opacity: .82; /* The mask feathers the layer's own edges. It is measured against this ELEMENT, not against the image inside it — which is why .fit-h below shrinks the box to where the image actually sits, instead of leaving a hard vertical cut halfway across a full-width layer. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 88%, transparent 100%); } /* Art for a portrait too tall to `cover` the full panel without cropping to a face. It still uses `cover` — so it fills its box edge to edge and the mask above lands on real edges rather than on a seam floating mid-panel — but the box is only the right ~60%. Covering a near-square box instead of a wide one is what pulls the zoom back: ~70% of the source height shows instead of ~40%. See slide() in home.js. */ .hslide-art.fit-h { left: 40%; background-position: center 18%; } /* ...and the panel behind it is filled by a blurred copy of the same art, so a fitted slide still reads full-bleed like the cover slides beside it rather than as a figure floating against an empty half. Sits under .hslide-art; both are under .hslide-veil, which does the darkening. */ .hslide-art-blur { position: absolute; inset: -40px; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(34px) saturate(.7) brightness(.42); } /* Opaque enough under the copy to keep it readable at any art, then clearing fast so the right half is actually the painting. */ .hslide-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2,8,15,.96) 0%, rgba(2,8,15,.88) 32%, rgba(2,8,15,.3) 58%, rgba(2,8,15,.55) 100%), radial-gradient(ellipse at 74% 38%, rgba(10,200,185,.1) 0%, transparent 62%); } .hslide-copy { position: relative; z-index: 2; width: min(56%, 640px); max-height: 100%; overflow: hidden; padding: 0 clamp(20px, 3.2cqw, 54px); display: flex; flex-direction: column; gap: clamp(4px, 1.6cqh, 11px); } .hslide-kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; font-family: var(--font-display); font-size: clamp(7.5px, 1.5cqh, 10px); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dark); border-radius: 20px; padding: 4px 13px; background: rgba(0,0,0,.45); } .hslide-kicker.k-locked { color: #ff6b6b; border-color: rgba(255,107,107,.4); } .hslide-kicker.k-live { color: var(--teal); border-color: rgba(10,200,185,.4); } .hslide-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(19px, 7.6cqh, 54px); line-height: .98; letter-spacing: 1px; color: var(--text-light); text-shadow: 0 4px 22px rgba(0,0,0,.9); } .hslide-h1 .amt { background: linear-gradient(135deg, #f7ecbf 0%, var(--gold) 52%, #8a6b25 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 26px rgba(10,200,185,.2)); } .hslide-h1 .per { font-family: var(--font-ui); font-weight: 500; font-size: clamp(11px, 2.9cqh, 20px); color: var(--teal); letter-spacing: 0; } .hslide-sub { font-family: var(--font-ui); font-size: clamp(9px, 1.9cqh, 13px); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 800; color: var(--gold-bright); } .hslide-body { font-size: clamp(10.5px, 2cqh, 14px); line-height: 1.55; color: var(--text-mid); max-width: 46ch; } .hslide-body b { color: var(--text-light); } .hslide-body .num { color: var(--teal); font-weight: 800; } /* The three-beat rule strip (25 games → $1 → top 3). */ .hslide-beats { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; } .hslide-beat { flex: 1 1 110px; min-width: 100px; border: 1px solid rgba(200,170,110,.16); border-radius: 5px; background: rgba(0,0,0,.42); padding: 8px 10px; } .hslide-beat .bn { font-family: var(--font-display); font-size: clamp(13px, 3.2cqh, 22px); color: var(--gold-bright); line-height: 1; } .hslide-beat .bl { font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; line-height: 1.3; } .hslide-times { display: flex; gap: 18px; font-size: clamp(9.5px, 1.9cqh, 13px); color: var(--teal); letter-spacing: .5px; } .hslide-cta { align-self: flex-start; margin-top: 4px; font-family: var(--font-display); font-size: clamp(8.5px, 1.7cqh, 12px); letter-spacing: 2px; color: var(--gold); border: 1px solid var(--gold-dark); border-radius: 4px; background: linear-gradient(180deg, rgba(200,170,110,.14), rgba(0,0,0,.8)); padding: clamp(6px, 1.3cqh, 9px) 22px; cursor: pointer; transition: all .15s; } .hslide:hover .hslide-cta { border-color: var(--gold); background: rgba(200,170,110,.22); } /* Feature list for the alpha slide. */ .hslide-list { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; } .hslide-list div { font-size: clamp(10px, 1.9cqh, 13px); color: var(--text-mid); padding-left: 15px; position: relative; line-height: 1.5; } .hslide-list div::before { content: '◈'; position: absolute; left: 0; color: var(--gold-dim); font-size: 9px; top: 3px; } .hslide-list b { color: var(--text-light); } /* ── Short slots ── Below ~330px there is no room for the supporting blocks. They drop out in priority order rather than being squeezed into unreadable type or, worse, overflowing the panel — the headline, the one-line sub and the CTA are the parts that have to survive at any height. */ @container hslide (max-height: 330px) { .hslide-beats, .hslide-list { display: none; } .hslide-copy { width: min(70%, 620px); } } @container hslide (max-height: 250px) { .hslide-times { display: none; } .hslide-body { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } } @container hslide (max-height: 185px) { .hslide-body { display: none; } } /* Narrow slot: the hero panel shares its row with the 640px interview column, so on a 1680 screen it is only ~550 wide. Below ~720 the art stops getting its own half and sits behind the copy instead. */ @container hslide (max-width: 720px) { .hslide-copy { width: 100%; } .hslide-veil { background: linear-gradient(90deg, rgba(2,8,15,.96) 0%, rgba(2,8,15,.86) 55%, rgba(2,8,15,.62) 100%), radial-gradient(ellipse at 70% 35%, rgba(10,200,185,.08) 0%, transparent 62%); } } /* Chrome: arrows + dots. Shared by the home hero and the Campaigns slider. */ .hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,.55); color: var(--gold); border: 1px solid var(--gold-dark); font-size: 17px; line-height: 1; transition: all .15s; } .hs-arrow:hover { border-color: var(--gold); background: rgba(0,0,0,.8); } .hs-prev { left: 10px; } .hs-next { right: 10px; } .hs-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 6; } .hs-dot { width: 26px; height: 3px; border-radius: 2px; cursor: pointer; background: rgba(200,170,110,.28); transition: background .2s, width .2s; } .hs-dot.on { background: var(--gold); width: 38px; } /* ── The Tournament page ─────────────────────────────────────────────── */ .hp-wrap { max-width: 980px; margin: 0 auto; padding: 26px clamp(18px, 3vw, 40px) 48px; width: 100%; } .hp-back { display: inline-block; margin-bottom: 16px; cursor: pointer; font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); background: none; border: 1px solid rgba(200,170,110,.16); border-radius: 4px; padding: 7px 14px; transition: all .15s; } .hp-back:hover { color: var(--gold); border-color: var(--gold-dark); } .hp-kicker { font-family: var(--font-display); font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold-dim); } .hp-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.6vw, 40px); color: var(--text-light); letter-spacing: 1px; margin: 6px 0 10px; line-height: 1.05; } .hp-lede { font-size: 14px; line-height: 1.65; color: var(--text-mid); max-width: 68ch; } .hp-lede b { color: var(--text-light); } .hp-h2 { font-family: var(--font-display); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin: 30px 0 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(200,170,110,.16); } .hp-card { border: 1px solid rgba(200,170,110,.14); border-radius: 6px; background: rgba(200,170,110,.035); padding: 16px 18px; margin-bottom: 12px; } .hp-card p { font-size: 13px; line-height: 1.65; color: var(--text-mid); } .hp-card p + p { margin-top: 9px; } .hp-card b { color: var(--text-light); } .hp-card .num { color: var(--teal); font-weight: 800; } .hp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .hp-stat { border: 1px solid rgba(200,170,110,.14); border-radius: 6px; background: rgba(0,0,0,.3); padding: 14px 15px; } .hp-stat .v { font-family: var(--font-display); font-size: 26px; color: var(--gold-bright); line-height: 1; } .hp-stat .k { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; } .hp-stat .d { font-size: 11.5px; color: var(--text-mid); margin-top: 7px; line-height: 1.5; } /* Payout waterfall rows. */ .hp-pay { display: flex; flex-direction: column; gap: 7px; } .hp-pay-row { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(200,170,110,.12); border-radius: 5px; background: rgba(0,0,0,.28); padding: 10px 14px; } .hp-pay-pos { font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; color: var(--gold); width: 42px; flex-shrink: 0; } .hp-pay-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; } .hp-pay-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); } .hp-pay-amt { font-family: var(--font-display); font-size: 15px; color: var(--gold-bright); width: 62px; text-align: right; flex-shrink: 0; } .hp-note { font-size: 12px; line-height: 1.6; color: var(--text-dim); border-left: 2px solid var(--gold-dark); padding: 2px 0 2px 12px; margin-top: 14px; } .hp-note b { color: var(--text-mid); } /* Disclaimers read as fine print, deliberately. */ .hp-fine { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(200,170,110,.1); } .hp-fine li { list-style: none; font-size: 11.5px; line-height: 1.65; color: var(--text-dim); padding-left: 16px; position: relative; margin-bottom: 7px; } .hp-fine li::before { content: '—'; position: absolute; left: 0; color: var(--gold-dark); } .hp-fine b { color: var(--text-mid); } .hp-cta { display: inline-block; text-decoration: none; margin-top: 18px; font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; color: var(--gold); border: 1px solid var(--gold-dark); border-radius: 4px; background: linear-gradient(180deg, rgba(200,170,110,.12), rgba(0,0,0,.6)); padding: 11px 26px; transition: all .15s; } .hp-cta:hover { border-color: var(--gold); background: rgba(200,170,110,.2); } /* ── Narrow ─────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .home-shell { flex-direction: column; } .hslide-copy { width: 100%; } .hslide-veil { background: linear-gradient(0deg, rgba(2,8,15,.97) 0%, rgba(2,8,15,.86) 55%, rgba(2,8,15,.5) 100%); } }