/* ============================================================ PUBLIC V2 — HOME PAGE, THE STUDIO WALL + THE CREATOR STRIP ============================================================ Two bands that only the home page has, kept in their own file rather than appended to public-v2-core.css: that file is Parts 1-6 of the shared public V2 system and is edited by several lanes at once. Nothing here is shared, so nothing here belongs in it. Loaded from index.tpl's , gated on the same {public_v2} plugin every other v2 hook on that page uses, so the CLASSIC home page never requests this file at all. Ordering: this sheet loads BEFORE public-v2-core.css (header.tpl pulls core in from inside ). That is safe and deliberate — every selector below is a .pv2h-* class that exists nowhere else and every one of them out-specifies the generic .pv2p rules it could tie with, so no rule here depends on winning on order. It does use core's --pv2-* tokens; custom properties resolve at use time, not at parse time, so load order cannot affect them. Section numbering continues public-v2-core.css PART 6 (the home page layer, 6.1-6.5) so the two files read as one part. ============================================================ */ /* ------------------------------------------------------------ 6.6 THE STUDIO WALL — .pv2h-studios / .pv2h-logos "Featuring games from": the studios behind the games we host, as one row of white marks. NOT an endorsement band — the copy says what we host, never who we are partnered with, and .pv2h-legal carries the trademark line. THE PROBLEM THIS SOLVES, and every number in it is measured off the twelve trimmed source marks: 1. ASPECT RATIO. The marks run 1.06:1 (a square badge) to 4.44:1 (an icon+wordmark lockup). Sized by height they overflow the cell; sized by width the square ones become postage stamps. Fixed CELLS with the mark centred inside is the only layout where a 1:1 and a 4.4:1 can share a baseline. 2. OPTICAL WEIGHT. A heavy slab wordmark and a hairline script at the same box height do not read at the same volume. That is normalised in the ASSET, not here: every file is exported into one 672x184 canvas with its scale set so the ink area matches, so this sheet needs exactly one img rule and no per-logo override can drift. 3. LAYOUT SHIFT. Every img carries width/height and every file is the same 672x184, so the grid's full height is known from the first byte of HTML. Nothing moves as the marks load. Track counts are FIXED and step 2 -> 3 -> 4 -> 6. Twelve divides by all four, so the wall is never a ragged 5+1 — the auto-fit wrap this system rejects. ------------------------------------------------------------ */ body.pubv2.pv2home .pv2h-studios { background-color: var(--pv2-surface); background-image: radial-gradient(900px 320px at 50% -10%, rgba(234, 168, 36, 0.07), rgba(234, 168, 36, 0) 70%); box-shadow: inset 0 -1px 0 var(--pv2-line); } /* the band head is centred, but core caps the sub at 78ch with margin:0, so on a wide rail it anchors LEFT under a centred h2. Give it the auto margins. */ body.pubv2.pv2home .pv2h-studios .pv2p-shead-sub { margin-left: auto; margin-right: auto; } body.pubv2.pv2home .pv2h-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* the 1px gap IS the lattice: the container paints the rule colour and each cell paints over it, so there is one hairline between cells and never a doubled 2px seam. */ gap: 1px; background: var(--pv2-border); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); overflow: hidden; } body.pubv2.pv2home .pv2h-logos > li { display: flex; align-items: center; justify-content: center; margin: 0; padding: 14px 12px; min-height: 82px; background: var(--pv2-panel); transition: background-color 0.18s ease; } body.pubv2.pv2home .pv2h-logos > li:hover { background: var(--pv2-raised); } body.pubv2.pv2home .pv2h-logos img { display: block; width: 100%; max-width: 168px; height: auto; opacity: 0.66; transition: opacity 0.18s ease; } body.pubv2.pv2home .pv2h-logos > li:hover img { opacity: 1; } /* the trademark line. Deliberately quiet and deliberately present: the marks identify games, they are not a claim of affiliation. */ body.pubv2.pv2home .pv2h-legal { margin: 14px auto 0; max-width: 860px; font-size: 11.5px; line-height: 1.6; color: var(--pv2-text-dim); text-align: center; } @media only screen and (min-width: 561px) { body.pubv2.pv2home .pv2h-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media only screen and (min-width: 768px) { body.pubv2.pv2home .pv2h-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.pubv2.pv2home .pv2h-logos > li { min-height: 92px; padding: 16px 14px; } } @media only screen and (min-width: 1100px) { body.pubv2.pv2home .pv2h-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ------------------------------------------------------------ 6.7 THE CREATOR STRIP — .pv2h-creators The short form of /hytale-creators/: copy on the left, the named creator partners on the right. These ARE partners — the four names and the 25M reach figure are the ones our own About page and creator page already publish — so the word "partners" is accurate here and only here. A strip, not a section: one rung of surface, two columns above 900, and the chips stay a fixed 2 -> 4 track ramp so four names never wrap 3+1. ------------------------------------------------------------ */ body.pubv2.pv2home .pv2h-creators { background: var(--pv2-panel); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, rgba(255, 255, 255, 0) 1px 8px); box-shadow: inset 0 1px 0 var(--pv2-line), inset 0 -1px 0 var(--pv2-line); } body.pubv2.pv2home .pv2h-creators .pv2h-crew-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; } body.pubv2.pv2home .pv2h-creators .pv2h-crew-copy h2 { margin: 0 0 8px; } body.pubv2.pv2home .pv2h-creators .pv2h-crew-copy p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--pv2-text-soft); } body.pubv2.pv2home .pv2h-creators .pv2h-crew-copy p:last-child { margin-bottom: 0; } body.pubv2.pv2home .pv2h-crew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* the li stretches to the grid row, but the inside is content-height, so a row where only some names wrap came out ragged (two 56px chips beside two 70px ones). The anchor fills its cell instead. */ body.pubv2.pv2home .pv2h-crew > li { margin: 0; display: flex; } body.pubv2.pv2home .pv2h-crew > li > a { flex: 1 1 auto; } /* (0,3,2) — body.pubv2.pv2home + .pv2h-crew + a. `body.pubv2 .pv2p a` is (0,2,2) and would otherwise repaint these gold inside the shell. */ body.pubv2.pv2home .pv2h-crew a { display: flex; align-items: center; gap: 11px; min-height: 56px; padding: 9px 12px; background: var(--pv2-raised); border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); color: #fff; text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease; } body.pubv2.pv2home .pv2h-crew a:hover, body.pubv2.pv2home .pv2h-crew a:focus { background: var(--pv2-hover); border-color: var(--pv2-border-strong); color: #fff; text-decoration: none; } /* the creator's own profile picture, self-hosted - a platform glyph told you the platform but not who. The avatar is a fixed 38px box with the image sized in CSS as well as attributed in the markup, so the row cannot reflow while four images decode. The platform survives as a badge notched into the bottom-right corner, ringed in the chip's own background so it reads as sitting on top of the avatar rather than punched through it. */ body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava { position: relative; flex: 0 0 auto; width: 38px; height: 38px; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava img { display: block; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--pv2-panel); border: 1px solid var(--pv2-border); } body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava i { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; color: #fff; box-shadow: 0 0 0 2px var(--pv2-raised); } body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava.tw i { background: #9146ff; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava.yt i { background: #ff0000; } /* the chip body lightens on hover, so the badge's ring has to follow it or a dark halo appears around the badge exactly on the state that draws the eye. */ body.pubv2.pv2home .pv2h-crew a:hover .pv2h-crew-ava i, body.pubv2.pv2home .pv2h-crew a:focus .pv2h-crew-ava i { box-shadow: 0 0 0 2px var(--pv2-hover); } body.pubv2.pv2home .pv2h-crew a:hover .pv2h-crew-ava img, body.pubv2.pv2home .pv2h-crew a:focus .pv2h-crew-ava img { border-color: var(--pv2-border-strong); } /* the text column has to be able to shrink below its content width or the longest name (Canal do Pigman) pushes the chip past its grid track. */ body.pubv2.pv2home .pv2h-crew .pv2h-crew-txt { min-width: 0; } /* the name WRAPS rather than ellipsing. At 768 the four chips are ~177px and "Canal do Pigman" clipped to "Canal do Pigm..." — truncated copy on a marketing page reads as a bug. The chips are grid items in one row, so a two-line name grows all four together and the row still looks deliberate. */ body.pubv2.pv2home .pv2h-crew .pv2h-crew-name { display: block; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #fff; overflow-wrap: break-word; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-plat { display: block; font-size: 11px; line-height: 1.4; color: var(--pv2-text-muted); } @media only screen and (min-width: 561px) { body.pubv2.pv2home .pv2h-crew { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media only screen and (min-width: 900px) { body.pubv2.pv2home .pv2h-creators .pv2h-crew-wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 30px; } } /* ---------- the creators lead, the copy follows ---------- Ryan: "the creators need to be more highlighted, like bigger basically. Also the wrapping of the word just looks really wordy and texty." Two paragraphs of prose beside four small chips made the copy the subject and the four people a footnote, and the prose wrapped mid-sentence against the chips. The copy is one centred line now and the faces get the whole rail: four across, avatar nearly double, name at card scale. */ body.pubv2.pv2home .pv2h-creators .pv2h-crew-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; } body.pubv2.pv2home .pv2h-creators .pv2h-crew-copy { max-width: 62ch; margin: 0 auto; } body.pubv2.pv2home .pv2h-crew { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } body.pubv2.pv2home .pv2h-crew a { flex-direction: column; text-align: center; gap: 13px; min-height: 0; padding: 22px 14px 20px; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava, body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava img { width: 72px; height: 72px; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava i { right: -1px; bottom: -1px; width: 24px; height: 24px; font-size: 12px; line-height: 24px; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-name { font-size: 16px; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-plat { font-size: 12.5px; } body.pubv2.pv2home .pv2h-crew-cta { margin: 24px 0 0; text-align: center; } @media (max-width: 991px) { body.pubv2.pv2home .pv2h-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { body.pubv2.pv2home .pv2h-crew a { padding: 16px 10px 14px; gap: 10px; } body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava, body.pubv2.pv2home .pv2h-crew .pv2h-crew-ava img { width: 58px; height: 58px; } } /* ---------- one revolving line ---------- Ryan: one line instead of two, auto-revolving, and the head not centred. The track is the twelve marks rendered twice; translating it exactly -50% lands mark 13 where mark 1 started, so the seam is invisible and there is no jump. Hover pauses it, and anyone who has asked their OS for less motion gets a static row instead - a logo wall is decoration, and decoration is exactly what that setting is for. */ body.pubv2.pv2home .pv2h-studios .pv2p-shead { text-align: left; } /* the sub-line is a centred reading-measure box elsewhere, so left-aligning its TEXT still left it starting 135px in from the heading - two different left edges stacked on each other, which is what read as broken. Pull the box to the left edge too, and line the strip up with both. */ body.pubv2.pv2home .pv2h-studios .pv2p-shead-sub { margin-left: 0; margin-right: auto; } body.pubv2.pv2home .pv2h-marquee { margin-left: 0; margin-right: 0; } body.pubv2.pv2home .pv2h-marquee { position: relative; display: flex; overflow: hidden; border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius-lg); background: var(--pv2-raised); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } body.pubv2.pv2home .pv2h-marquee .pv2h-logos.pv2h-track { display: flex; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; border: 0; animation: pv2h-roll 46s linear infinite; will-change: transform; } body.pubv2.pv2home .pv2h-marquee:hover .pv2h-logos.pv2h-track { animation-play-state: paused; } body.pubv2.pv2home .pv2h-marquee .pv2h-logos.pv2h-track > li { flex: 0 0 auto; width: 208px; margin: 0; padding: 22px 26px; border: 0; display: flex; align-items: center; justify-content: center; } body.pubv2.pv2home .pv2h-marquee .pv2h-logos.pv2h-track > li img { width: 100%; height: auto; max-height: 34px; object-fit: contain; } @keyframes pv2h-roll { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { body.pubv2.pv2home .pv2h-marquee .pv2h-logos.pv2h-track { animation: none; } body.pubv2.pv2home .pv2h-marquee .pv2h-logos.pv2h-track[aria-hidden="true"] { display: none; } body.pubv2.pv2home .pv2h-marquee { overflow-x: auto; } } @media (max-width: 767px) { body.pubv2.pv2home .pv2h-marquee .pv2h-logos.pv2h-track > li { width: 150px; padding: 16px 18px; } body.pubv2.pv2home .pv2h-marquee .pv2h-logos.pv2h-track > li img { max-height: 26px; } } /* ------------------------------------------------------------ 6.8 LATEST NEWS — .pv2h-news Three story links above the footer, and the section renders only when /news/ has public stories (index.php passes an empty array otherwise), so the homepage is unchanged until there is real news to put on it. Scoped `body.pubv2.pv2home` like every other band in this file. The news section's own `.nws-*` skin is NOT reusable here: news.css is scoped `body.nws` and is linked only by the news head partial, so those classes would render unstyled on the homepage. ------------------------------------------------------------ */ body.pubv2.pv2home .pv2h-news { background: var(--pv2p-deep, #131314); border-top: 1px solid var(--pv2-line, #2c2c2d); padding: 46px 0 52px; } /* CENTRED EXPLICITLY, not by inheriting `.text-center` from somewhere else. Measured on an isolated render: the h2 sat left while the sub sat centred, because the two get their alignment from different rules in different sheets. A band that reads as centred only when every other stylesheet happens to be present is a band that will one day read as broken. */ body.pubv2.pv2home .pv2h-news .pv2p-shead, body.pubv2.pv2home .pv2h-news .pv2p-shead h2, body.pubv2.pv2home .pv2h-news .text-center { text-align: center; } body.pubv2.pv2home .pv2h-news .pv2p-shead-sub { margin-left: auto; margin-right: auto; } /* THE WHOLE CARD IS THE LINK, so it needs its own hover and its own colour — a card that is an inherits the scope's link colour and would otherwise paint its headline gold on gold. */ body.pubv2.pv2home .pv2h-news a.pv2h-newscard { display: flex; flex-direction: column; gap: 9px; height: 100%; padding: 18px 20px; text-decoration: none; transition: border-color .16s ease, background-color .16s ease; } body.pubv2.pv2home .pv2h-news a.pv2h-newscard:hover { border-color: var(--pv2-border-strong, #4c4c4d); background: var(--pv2-raised, #252526); text-decoration: none; } body.pubv2.pv2home .pv2h-news .pv2h-newskind { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--pv2-gold, #eaa824); border: 1px solid rgba(234, 168, 36, .38); background: rgba(234, 168, 36, .10); border-radius: 3px; padding: 3px 8px; } body.pubv2.pv2home .pv2h-news a.pv2h-newscard h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.38; color: #fff; letter-spacing: normal; transition: color .16s ease; } body.pubv2.pv2home .pv2h-news a.pv2h-newscard:hover h3 { color: var(--pv2-gold, #eaa824); } body.pubv2.pv2home .pv2h-news a.pv2h-newscard time { margin-top: auto; font-size: 11.5px; color: var(--pv2-text-dim, #666); } body.pubv2.pv2home .pv2h-news .pv2h-newsall { color: var(--pv2-accent, #d5a84a); font-size: 13px; font-weight: 600; text-decoration: none; } body.pubv2.pv2home .pv2h-news .pv2h-newsall:hover { color: var(--pv2-gold, #eaa824); text-decoration: none; } @media (max-width: 760px) { body.pubv2.pv2home .pv2h-news { padding: 34px 0 38px; } }