/* ═══════════════════════════════════════════════════════════════ clients.css Ported VERBATIM from prototype 01-homepage.html: - #clients section frame (line 1690) - .vt-clients slideshow grid + slots + animations (lines 2376-2552) - Cross-section title consistency rules (lines 3358-3399) Note: the shared mobile rule at prototype line 3411 (clamp 2rem→3rem for .vt-clients__title et al.) was already ported into intro-stats.css when we did Stats — it applies here too via the cascade, no copy needed. ═══════════════════════════════════════════════════════════════ */ /* Section frame */ #clients{background:var(--white);padding:0} /* .vt-clients handles inner padding */ /* Main vt-clients block — slideshow + slots + animations */ /* ═══════════════════════════════════════════════════════════════════════ SLIDESHOW CLIENTS (imported from vertwo-clients-slideshow.html) ═══════════════════════════════════════════════════════════════════════ */ /* ============================================================ VERTWO CLIENT LOGO SECTION · AUTO-SLIDESHOW Smooth · GPU-composited motion · non-interactive ------------------------------------------------------------ · Keyframes animate ONLY transform + opacity (GPU) · Chromatic aberration is a STATIC filter toggled via JS class → no per-frame filter interpolation, no jank · Per-slot cycle: swap (700ms) → grayscale hold (1s) → colorize (780ms) → dwell → repeat (9s total per slot) ============================================================ */ :root { --vt-orange: #F27A0F; --vt-ink: #1A1A1A; --vt-muted: #6b7280; --vt-gap: 24px; --vt-slot-h: 128px; --vt-dur: 700ms; --vt-ease: cubic-bezier(0.76, 0, 0.24, 1); /* chromatic aberration channel colors */ --vt-chroma-r: 255, 40, 100; --vt-chroma-c: 30, 170, 255; } .vt-clients { padding: 64px 24px; /* tightened from 80px */ max-width: 1200px; margin: 0 auto; } .vt-clients__head { text-align: center; margin-bottom: 56px; } .vt-clients__eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vt-orange); font-weight:800; margin-bottom: 14px; } .vt-clients__title { font-family: "Neue Haas Grotesk Display", "Inter", system-ui, sans-serif; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; color: var(--vt-ink); } .vt-clients__sub { font-size: 15px; color: var(--vt-muted); max-width: 520px; margin: 0 auto; line-height: 1.55; } /* ----- GRID ----- */ .vt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vt-gap); } @media (max-width: 768px) { /* v0.32.163 — was 44px / 18px which read tighter than the rest of the homepage mobile rhythm (intro-stats / jobs-cta sit around 56px). Switched to the shared `--vw-section-pad-*-mobile` tokens so every section's gap on mobile follows the same 56 × 24 rhythm. */ .vt-clients { padding: var(--vw-section-pad-y-mobile, 56px) var(--vw-section-pad-x-mobile, 24px); } .vt-grid { grid-template-columns: repeat(2, 1fr); --vt-gap: 16px; } .vt-slot:nth-child(9) { display: none; } :root { --vt-slot-h: 96px; } } /* ----- SLOT (non-interactive) ----- */ .vt-slot { position: relative; height: var(--vt-slot-h); display: flex; align-items: center; justify-content: center; padding: 12px; pointer-events: none; } .vt-slot__inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* Layer hint (kept persistent so we don't churn composite layers) */ will-change: transform, opacity, filter; transform: translateZ(0); /* force own compositor layer */ } /* MOTION: transform + opacity only → GPU-composited, smooth */ .vt-slot__inner.is-swapping { animation: vtSwap var(--vt-dur) var(--vt-ease) both; } /* CHROMATIC ABERRATION: static filter, no interpolation. Toggled on at ~17% and off at ~83% of the motion via JS. Drop-shadows compose naturally on the img's grayscale alpha. */ .vt-slot__inner.is-chroma { filter: drop-shadow( 6px 0 0 rgba(var(--vt-chroma-r), 0.85)) drop-shadow(-6px 0 0 rgba(var(--vt-chroma-c), 0.85)); } /* Logo base: grayscale (default). Fast drain hidden under the swap. v0.18.2 — added transform: scale(var(--logo-scale)) so per-Client manual tuning (client_logo_scale ACF, 50–200%) overrides the bucket default. The variable is set inline by clients.js on initial build and on every src-swap so the scale follows the logo, not the slot. v0.20.11 — Vic feedback: jumpiness during swaps. Cause was the v0.18.1 + v0.18.2 additions writing `data-aspect` and `--logo-scale` mid-swap (at SRC_SWAP_AT = 350ms). The CSS rules keyed off [data-aspect] altered max-width/max-height instantly, and `transform: scale(var(--logo-scale))` jumped instantly because there was no transition on either size property or transform. Smoothing the transition over 320ms lets the box morph gracefully WITHIN the swap's 700ms motion window — by the time the motion ends, the new logo is already at its correct footprint. ease-out cubic feels like a settle, not a slide. */ .vt-logo { width: auto; height: auto; max-width: 72%; max-height: 50%; object-fit: contain; display: block; filter: grayscale(100%); opacity: 0.72; /* v0.32.146 — removed max-width / max-height transitions. They were added in v0.20.11 to smooth the % cap change during slideshow swaps, but they opened a 320ms window where the IMG box was at an intermediate size. Combined with the swap motion and JS src change, this turned out to be a vector for the per-slug-ruled logos rendering at different sizes on the homepage (where the slideshow cycles) than on the works archive (static). Now caps snap to the new value instantly when data-slug changes — no in-flight box state to leak. The transform transition is kept since scale changes still benefit from easing. */ transition: filter 140ms linear, opacity 140ms linear, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); user-select: none; -webkit-user-drag: none; transform: scale(var(--logo-scale, 1)); transform-origin: center; } /* Colored state: slow, graceful fade-in. v0.20.11 — re-declare the size + scale transitions here so the is-color override doesn't strip them. Filter/opacity still ease over 780ms; the geometry morphs stay at 320ms because they need to settle within the 700ms swap motion, not stretch beyond it. */ .vt-logo.is-color { filter: grayscale(0%); opacity: 1; /* v0.32.146 — match the base .vt-logo rule: no max-w / max-h transitions. Keep transform interpolation for smooth scale changes during slideshow swaps. */ transition: filter 780ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 780ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } /* ═════════════════════════════════════════════════════════════════ v0.18.1 — Aspect-bucket size normalization (CMS-driven path). ───────────────────────────────────────────────────────────────── The per-slug rules below this block were hand-tuned for the prototype's 14 hardcoded logos. When the homepage clients section is driven from the Client CPT (window.VERTWO_CLIENTS), uploaded logos have arbitrary slugs that don't match — they'd all fall back to the generic .vt-logo default (max-height:50%, max-width: 72%), leaving very wide wordmarks (e.g. BANDAI, SUNRISE, FREE FIRE) tiny and square logograms (Kodansha, MediBang) huge — i.e. the inconsistent-size bug Vic reported on 2026-05-05. Fix: every CMS logo now carries data-aspect="ultra-wide|wide| balanced|tall", computed server-side from the source attachment's natural width/height (see vertwo_get_homepage_clients_data in inc/cpt-client.php). These rules below cap each bucket to a similar VISIBLE FOOTPRINT regardless of source aspect — the goal is "every logo looks roughly the same size on screen", not "every logo fits the same bounding box". Per-slug rules below still apply on top (cascade wins by specificity on attribute match), so the prototype's hand-tuned overrides for legacy slugs continue to work. New CMS uploads pick up the bucket rule by default; the editor can still upload a custom-slug logo and add a per-slug override here later if a specific brand needs a hand-tweak. ═════════════════════════════════════════════════════════════════ */ /* v0.18.2 — bucket caps bumped ~25% across the board. v0.18.1's caps were tuned conservatively and Vic reported some logos still looked small (Pract pill, Webtoon icon, J Publishing). The fundamental small-content-in-large-bbox problem can't be fully solved with a bucket alone — that's what the per-Client `client_logo_scale` field is for. These bumped caps give every bucket more headroom by default; outliers get tuned via the ACF slider. */ .vt-logo[data-aspect="ultra-wide"] { max-height: 40%; max-width: 86%; } .vt-logo[data-aspect="wide"] { max-height: 55%; max-width: 80%; } .vt-logo[data-aspect="balanced"] { max-height: 70%; max-width: 72%; } .vt-logo[data-aspect="tall"] { max-height: 90%; max-width: 56%; } /* Per-logo size normalization. v0.32.158 — broad rebalance based on Vic's screenshot ("some too small, some too big"). Target visual weight: each logo fills 55–70% of its slot's smaller dimension. Wider wordmarks get more width than height; tall logos vice versa. Per-slug rules added for logos that were previously falling through to the bucket fallback (icandy, pikopi, pract, vivion, hacktrace, etc.) because the bucket defaults read either too dominant or too small depending on the logo's natural aspect. */ /* v0.32.160 — desktop rebalance pass. v0.32.158-159 tunings were mostly mobile-screenshot driven; on the wider desktop grid some came out too dominant (Naver, Sunrise) while previous reductions overshot (Kapal Api). Adjusted toward a target visual weight where each logo's optical density (ink area) reads roughly similar across the row. Also added per-slug rules for logos that were still falling through to the bucket fallback. */ /* ─ Bumped UP (were too small) ─ */ .vt-logo[data-slug="sb-creative"] { max-height: 62%; max-width: 86%; } .vt-logo[data-slug="kodansha"] { max-height: 58%; max-width: 78%; } .vt-logo[data-slug="sunrise"] { max-height: 54%; max-width: 72%; } /* v0.32.160: trimmed from 60%/78% (read too large on desktop) */ .vt-logo[data-slug="naver"] { max-height: 54%; max-width: 76%; } /* v0.32.160: trimmed from 60%/84% (bold wordmark dominated row) */ .vt-logo[data-slug="chiptune"] { max-height: 78%; max-width: 86%; } .vt-logo[data-slug="entacl"] { max-height: 58%; max-width: 80%; } .vt-logo[data-slug="freefire"] { max-height: 56%; max-width: 84%; } .vt-logo[data-slug="hacktrace"] { max-height: 62%; max-width: 86%; } /* ─ Brought DOWN (were too big) ─ */ .vt-logo[data-slug="kapal-api"] { max-height: 64%; max-width: 68%; } /* v0.32.160: bumped back up from 60%/64% (the v0.32.157→159 reductions overshot — Vic flagged it as small on desktop) */ .vt-logo[data-slug="toon-cracker"] { max-height: 48%; max-width: 54%; } .vt-logo[data-slug="vivion"] { max-height: 52%; max-width: 78%; } .vt-logo[data-slug="pikopi"] { max-height: 46%; max-width: 62%; } /* v0.32.161 — pract bumped 42%/78% → 56%/88%. Even at 200% client_logo_scale it read smaller than Vic's target — the letter-spaced PRACT wordmark needs both more height and more width than the narrower wide-bucket default allowed. */ .vt-logo[data-slug="pract"] { max-height: 56%; max-width: 88%; } .vt-logo[data-slug="icandy"] { max-height: 50%; max-width: 78%; } .vt-logo[data-slug="j-publishing"] { max-height: 56%; max-width: 82%; } /* v0.32.160: bumped from 50%/76% (still read small on desktop) */ /* ─ New per-slug rules for logos that were bucket-fallthrough ─ */ .vt-logo[data-slug="loop-end"] { max-height: 70%; max-width: 64%; } /* NEW v0.32.160 — tall circular logo */ .vt-logo[data-slug="pedoce"] { max-height: 56%; max-width: 78%; } /* NEW v0.32.160 — wide geometric wordmark */ /* v0.32.161 — storms bumped 62%/70% → 78%/86% to match Vic's desktop fine-tuning. The mascot + wordmark lockup is fairly compact so it can take more room without overpowering the slot. */ .vt-logo[data-slug="storms"] { max-height: 78%; max-width: 86%; } .vt-logo[data-slug="kemenparekraf"] { max-height: 80%; max-width: 64%; } /* NEW v0.32.160 — circular emblem (round logos need height to read at parity with text logos) */ .vt-logo[data-slug="sorajima"] { max-height: 40%; max-width: 78%; } /* NEW v0.32.160 — wide blue wordmark */ .vt-logo[data-slug="appxplore"] { max-height: 46%; max-width: 78%; } /* NEW v0.32.160 — mascot + text */ .vt-logo[data-slug="ahm"] { max-height: 56%; max-width: 78%; } /* NEW v0.32.160 — Astra Honda Motor */ .vt-logo[data-slug="garena"] { max-height: 50%; max-width: 76%; } /* NEW v0.32.160 — logo + wordmark */ .vt-logo[data-slug="webtoon"] { max-height: 70%; max-width: 64%; } /* NEW v0.32.160 — green speech-balloon shape */ /* ─ Unchanged (already balanced) ─ */ .vt-logo[data-slug="medibang"] { max-height: 62%; max-width: 78%; } .vt-logo[data-slug="minto"] { max-height: 78%; max-width: 78%; } /* trimmed from 88% — was the tallest in the row */ .vt-logo[data-slug="tsugikuru"] { max-height: 65%; max-width: 75%; } .vt-logo[data-slug="bandai-spirit"] { max-height: 64%; max-width: 56%; } /* slight tweak from 66%/50% for visual balance */ .vt-logo[data-slug="line-webtoon"] { max-height: 64%; max-width: 52%; } /* slight tweak from 66%/48% */ /* ═══════════════════════════════════════════════════════ v0.32.161 — Mobile-specific overrides ─────────────────────────────────────────────────────── The default per-slug values above were tuned on Vic's desktop grid (3 columns). On mobile (2 columns) the same percentages produce different visual fill because the slot aspect ratio is different (squarer / taller). Logos that read balanced on desktop can come out under- or over-sized on mobile. The list below mirrors Vic's in-CMS fine-tuning where the desktop sizes already work but mobile needed bumping up or trimming to read at parity. ═══════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* Logos that read too SMALL on mobile — bump up. */ .vt-logo[data-slug="kodansha"] { max-height: 70%; max-width: 90%; } /* v0.32.163: sb-creative bumped 88%/96% → 100%/100% (still too small per Vic). */ .vt-logo[data-slug="sb-creative"] { max-height: 100%; max-width: 100%; } /* v0.32.163: hacktrace bumped 88%/96% → 100%/100% (still too small per Vic). */ .vt-logo[data-slug="hacktrace"] { max-height: 100%; max-width: 100%; } .vt-logo[data-slug="sorajima"] { max-height: 52%; max-width: 88%; } .vt-logo[data-slug="sunrise"] { max-height: 70%; max-width: 86%; } /* v0.32.163: naver bumped 70%/88% → 88%/96% (still too small per Vic). */ .vt-logo[data-slug="naver"] { max-height: 88%; max-width: 96%; } .vt-logo[data-slug="appxplore"] { max-height: 58%; max-width: 88%; } /* v0.32.163: ahm trimmed 56%/76% → 46%/68% (still too big per Vic). */ .vt-logo[data-slug="ahm"] { max-height: 46%; max-width: 68%; } .vt-logo[data-slug="garena"] { max-height: 64%; max-width: 88%; } /* v0.32.162: freefire bumped 70%/90% → 86%/96% (Vic flagged still too small). */ .vt-logo[data-slug="freefire"] { max-height: 86%; max-width: 96%; } .vt-logo[data-slug="entacl"] { max-height: 68%; max-width: 88%; } /* v0.32.162: chiptune trimmed 88%/92% → 70%/80% (Vic flagged too big). */ .vt-logo[data-slug="chiptune"] { max-height: 70%; max-width: 80%; } .vt-logo[data-slug="j-publishing"] { max-height: 68%; max-width: 90%; } /* v0.32.162: storms trimmed 86%/90% → 70%/78% (Vic flagged too big). */ .vt-logo[data-slug="storms"] { max-height: 70%; max-width: 78%; } .vt-logo[data-slug="pedoce"] { max-height: 64%; max-width: 88%; } /* v0.32.163: pract trimmed 50%/78% → 40%/68% (still too big per Vic). */ .vt-logo[data-slug="pract"] { max-height: 40%; max-width: 68%; } .vt-logo[data-slug="vivion"] { max-height: 62%; max-width: 88%; } /* v0.32.162: icandy trimmed (no prior mobile override — was using desktop 50%/78% which Vic flagged too big). */ .vt-logo[data-slug="icandy"] { max-height: 40%; max-width: 70%; } /* v0.32.162: toon-cracker trimmed (no prior mobile override — was using desktop 48%/54% which Vic flagged too big). */ .vt-logo[data-slug="toon-cracker"] { max-height: 38%; max-width: 46%; } /* Logos that read too BIG on mobile — trim down. */ .vt-logo[data-slug="bandai-spirit"] { max-height: 56%; max-width: 50%; } .vt-logo[data-slug="webtoon"] { max-height: 60%; max-width: 58%; } /* v0.32.162 → v0.32.163: trimmed 80%/72% → 66%/60% (Vic flagged a little too big now). */ .vt-logo[data-slug="loop-end"] { max-height: 66%; max-width: 60%; } .vt-logo[data-slug="kemenparekraf"] { max-height: 72%; max-width: 60%; } .vt-logo[data-slug="kapal-api"] { max-height: 56%; max-width: 60%; } .vt-logo[data-slug="minto"] { max-height: 70%; max-width: 72%; } } /* Motion keyframes — ONLY transform & opacity (GPU) */ @keyframes vtSwap { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 44% { transform: translate3d(0, -55%, 0); opacity: 0; } 50% { transform: translate3d(0, 55%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vt-slot__inner.is-swapping { animation: none; } .vt-slot__inner.is-chroma { filter: none; } .vt-logo, .vt-logo.is-color { transition: filter 300ms linear, opacity 300ms linear; } } /* Cross-section title consistency rules */ /* ═══════════════════════════════════════════════════════════════════════ UNIFIED SECTION TITLE TYPOGRAPHY — all section eyebrows and titles follow About's template for visual consistency. ═══════════════════════════════════════════════════════════════════════ */ .vt-clients__eyebrow, .port-eyebrow { font-family: var(--font-body) !important; color: var(--eyebrow) !important; font-size: 0.74rem !important; font-weight: 800!important; letter-spacing: 0.25em !important; text-transform: uppercase !important; margin-bottom: 14px !important; line-height: 1.2 !important; } .vt-clients__title, .port-title, .vn-title-group h2 { font-family: var(--font-title) !important; font-weight: 900 !important; font-size: clamp(1.8rem, 4vw, 2.8rem) !important; letter-spacing: -0.025em !important; line-height: 1.1 !important; margin: 0 0 12px !important; } .vt-clients__sub, .vn-title-group p { font-family: var(--font-body) !important; font-size: clamp(15px, 1.2vw, 17px) !important; color: var(--mid) !important; font-weight: 400 !important; letter-spacing: -0.005em !important; line-height: 1.55 !important; } /* Mobile: scale titles down proportionally to match About's mobile sizing */ @media (max-width: 600px) { .vt-clients__title, .port-title, .vn-title-group h2 { font-size: 1.55rem !important; } .vt-clients__eyebrow, .port-eyebrow { font-size: 0.68rem !important; } } /* ═══════════════════════════════════════════════════════════════ v0.4.5 — Vic feedback: enlarge logos on mobile. Prototype's mobile slot is 96px with 12px padding each side, so logos render at ~72px tall — visibly small next to the bold title above. Bump --vt-slot-h to 116px (+20%) for a meaningful jump without crowding the 2-column grid. Padding is unchanged so the logo glyph itself grows; cycle animations are unaffected. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --vt-slot-h: 116px; } }