/* ═══════════════════════════════════════════════════════════════ 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: 600; 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) { .vt-clients { padding: 44px 18px; } /* tighter mobile */ .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; transition: filter 140ms linear, opacity 140ms linear, max-width 320ms cubic-bezier(0.22, 1, 0.36, 1), max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), 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; transition: filter 780ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 780ms cubic-bezier(0.22, 0.61, 0.36, 1), max-width 320ms cubic-bezier(0.22, 1, 0.36, 1), max-height 320ms cubic-bezier(0.22, 1, 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 */ .vt-logo[data-slug="chiptune"] { max-height: 62%; max-width: 72%; } .vt-logo[data-slug="kapalapi"] { max-height: 95%; max-width: 85%; } .vt-logo[data-slug="medibang"] { max-height: 62%; max-width: 78%; } .vt-logo[data-slug="sb-creative"] { max-height: 32%; max-width: 68%; } .vt-logo[data-slug="minto"] { max-height: 88%; max-width: 78%; } .vt-logo[data-slug="kodansha"] { max-height: 45%; max-width: 72%; } .vt-logo[data-slug="sunrise"] { max-height: 44%; max-width: 65%; } .vt-logo[data-slug="tsugikuru"] { max-height: 65%; max-width: 75%; } .vt-logo[data-slug="bandai"] { max-height: 66%; max-width: 50%; } .vt-logo[data-slug="naver"] { max-height: 32%; max-width: 60%; } .vt-logo[data-slug="entacl"] { max-height: 44%; max-width: 68%; } .vt-logo[data-slug="freefire"] { max-height: 42%; max-width: 72%; } .vt-logo[data-slug="line-webtoon"] { max-height: 66%; max-width: 48%; } .vt-logo[data-slug="tooncracker"] { max-height: 68%; max-width: 65%; } /* 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(--orange) !important; font-size: 0.74rem !important; font-weight: 700 !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; } }