/* * vertwo-premium / typography-system.css * * v0.31.3 — Universal hero / section title harmonization. Loaded LAST in * the enqueue chain so its rules win specificity ties against page-specific * CSS without needing !important on every line (used selectively where * a page CSS file declares a property with the same selector specificity). * * v0.31.3 changes (current): * - Verbatim Works-archive hero spec applied to ALL pages: padding * 120px 24px 70px desktop, 100px 22px 56px tablet, 90px 18px 44px mobile, * inner max-width 920px, text-align center, both axes flex-centered * - Contact hero finally folds into the universal layout (was bespoke * bottom-anchored .hero-content; now matches Works exactly) * * v0.31.2 history: * - desktop hero min-height 50→40vh, iPad landscape 32→28vh * - medium hero title bumped clamp(2.1rem,5vw,3.9rem) → clamp(2.3rem,5.4vw,4.2rem) * * v0.31.1 history: * - tablet min-height 50→32vh * - .vw-hero-title (Works canonical) added to the medium-hero override list * * v0.31.0 history: * - first universal harmonization pass + lowercase enforcement * * Three hero sizes (the only three used across the site): * --vw-hero-big-fs — homepage only (#hero .hero-title) * --vw-hero-med-fs — about / services / works / news / contact / careers * --vw-hero-sm-fs — work-detail / news-single * * Lowercase enforcement is a brand decision (Vic, 2026-05-12). Even if an * editor types "Common Questions." the rendered output is "common questions." * * Responsive breakpoint map (project standard): * ≤520 small mobile * 521-860 mobile / large mobile * 861-1023 tablet portrait * 1024-1366 tablet landscape / small laptop * ≥1367 desktop */ /* ═══════════════════════════════════════════════════════════════ :root — universal typography tokens ═══════════════════════════════════════════════════════════════ */ :root { /* HERO sizes — three universal tokens (v0.31.2 values). */ --vw-hero-big-fs: clamp(2.6rem, 5vw, 4.4rem); /* homepage */ --vw-hero-med-fs: clamp(2.3rem, 5.4vw, 4.2rem); /* main pages */ --vw-hero-sm-fs: clamp(1.7rem, 3.2vw, 2.8rem); /* sub-pages */ /* HERO MIN-HEIGHT per breakpoint. v0.32.92 — Split into MEDIUM (about/services/works/news/careers/ contact) and SMALL (work-detail/news-detail/privacy) so they can scale independently. The original single token was shared between both variants by the !important override below, which silently flattened the page-hero.css base rules. */ --vw-hero-medium-minh-desktop: 55vh; /* v0.32.93 was 60vh (Vic: a bit too big) */ --vw-hero-medium-minh-tablet-land: 50vh; /* v0.32.93 was 55vh */ --vw-hero-medium-minh-tablet-port: 45vh; /* v0.32.93 was 50vh */ --vw-hero-medium-minh-mobile: 45vh; /* v0.32.93 was 50vh */ --vw-hero-small-minh-desktop: 40vh; --vw-hero-small-minh-tablet-land: 28vh; --vw-hero-small-minh-tablet-port: 32vh; --vw-hero-small-minh-mobile: 42vh; /* Legacy shared tokens — kept so anything still referencing them keeps working with the small-hero values. */ --vw-hero-minh-desktop: 40vh; --vw-hero-minh-tablet-port: 32vh; --vw-hero-minh-tablet-land: 28vh; --vw-hero-minh-mobile: 42vh; /* HERO container padding + INNER max-width — verbatim copy of the Works archive hero (the canonical). v0.31.3: forces every other page (about/services/news/careers/contact) to match Works exactly. */ --vw-hero-padding: 120px 24px 70px; --vw-hero-padding-tablet: 100px 22px 56px; --vw-hero-padding-mobile: 90px 18px 44px; --vw-hero-inner-max: 920px; /* HERO eyebrow + sub */ --vw-hero-eyebrow-fs: 0.72rem; --vw-hero-sub-fs: clamp(0.95rem, 1.2vw, 1.1rem); /* IN-PAGE section title (eg .cr-section-title, .ba-title, .wv-title) */ --vw-section-title-fs: clamp(1.7rem, 3.2vw, 2.6rem); --vw-section-sub-fs: clamp(0.96rem, 1.1vw, 1.05rem); --vw-section-eyebrow-fs: 0.72rem; /* SECTION padding (vertical block padding per section) */ --vw-section-py-desktop: 80px; --vw-section-py-tablet: 64px; --vw-section-py-mobile: 48px; --vw-section-px-desktop: 24px; --vw-section-px-tablet: 22px; --vw-section-px-mobile: 18px; /* Heading-to-grid gap */ --vw-section-head-gap: 36px; /* Title geometry. v0.31.8: kerning loosened further from -0.025em → -0.02em (Vic still wanted more breathing room). */ --vw-title-letter-spacing: -0.02em; --vw-title-line-height: 1.06; --vw-eyebrow-letter-spacing: 0.2em; /* Title margins */ --vw-eyebrow-mb: 14px; --vw-title-mb: 18px; /* Title color tokens */ --vw-title-on-dark: #ffffff; --vw-title-on-light: var(--black); /* v0.32.4 — universal easings. --ease was previously only defined in page-careers.css line 45, so pages that referenced var(--ease) outside that file (notably page-contact.css's .faq-item transition) resolved to `unset` and the transition ran with no easing at all → snap effect. Defining here in :root makes the var available globally. */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.7, 0, .3, 1); } /* ═══════════════════════════════════════════════════════════════ HERO BIG — homepage only. Driven by --title-plain-scale per-slide ACF override (preserved). ═══════════════════════════════════════════════════════════════ */ #hero .hero-title { font-size: calc(var(--vw-hero-big-fs) * var(--title-plain-scale, 1)); font-family: var(--font-title); font-weight: 900; letter-spacing: var(--vw-title-letter-spacing); line-height: 1.0; color: var(--vw-title-on-dark); margin-bottom: var(--vw-title-mb); text-transform: lowercase; } #hero .hero-eyebrow { font-size: var(--vw-hero-eyebrow-fs); font-weight: 600; letter-spacing: var(--vw-eyebrow-letter-spacing); text-transform: uppercase; color: var(--orange); margin-bottom: var(--vw-eyebrow-mb); } #hero .hero-sub { font-size: var(--vw-hero-sub-fs); font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.65); } /* ═══════════════════════════════════════════════════════════════ HERO MEDIUM TITLE — universal across all six main pages. Targets every namespace: .ah-title — about / services / careers (page-prefix) .nh-title — news archive .vw-hero-title — works archive AND contact (canonical via vertwo_render_page_hero — v0.31.5 contact refactor). v0.31.5: removed the legacy .page-contact #hero .hero-title selector since contact no longer uses bespoke .hero-* markup. ═══════════════════════════════════════════════════════════════ */ .ah-title, .nh-title, .vw-hero--medium .vw-hero-title, #cr-hero .ah-title, #about-hero .ah-title, #services-hero .ah-title, #works-hero .ah-title, #works-hero .vw-hero-title, #news-hero .nh-title { font-size: var(--vw-hero-med-fs) !important; font-family: var(--font-title); font-weight: 900; letter-spacing: var(--vw-title-letter-spacing); line-height: var(--vw-title-line-height); color: var(--vw-title-on-dark); margin-bottom: var(--vw-title-mb); text-transform: lowercase; } /* Italic-stripping for accent on the legacy .ah-* namespaces. v0.31.4 oversight: the .ah-title accent rendered italic because the typography-system targeted only .vw-hero-accent (handled by page-hero.css). For the .ah-title path, the wrapper is a bare . */ .ah-title em, .nh-title em, .pd-hero-title em, .nd-hero-title em { font-style: normal; color: var(--orange); } /* SMALL hero — work-detail / news-single (.pd-hero-title / .nd-hero-title) plus the canonical .vw-hero--small .vw-hero-title. */ .pd-hero-title, .nd-hero-title, .vw-hero--small .vw-hero-title { font-size: var(--vw-hero-sm-fs) !important; font-family: var(--font-title); font-weight: 900; letter-spacing: var(--vw-title-letter-spacing); line-height: var(--vw-title-line-height); color: var(--vw-title-on-dark); max-width: 880px; } /* v0.32.46 — Brand-lock lowercase split out of the shared rule above so we can apply it selectively. .nd-hero-title (news single article hero) is intentionally EXCLUDED — editorial article titles render in the case the editor typed them. Every other small-hero surface (work detail, canonical .vw-hero--small) keeps the brand voice. */ .pd-hero-title, .vw-hero--small .vw-hero-title { text-transform: lowercase; } /* Universal eyebrow. v0.31.5: dropped .page-contact #hero .hero-eyebrow — contact now uses vertwo_render_page_hero, which emits .vw-hero-eyebrow handled by page-hero.css. */ .ah-eyebrow, .nh-eyebrow { font-size: var(--vw-hero-eyebrow-fs) !important; font-family: var(--font-title); font-weight: 600; letter-spacing: var(--vw-eyebrow-letter-spacing); text-transform: uppercase; color: var(--orange); margin-bottom: var(--vw-eyebrow-mb); display: inline-block; } .pd-hero-eyebrow, .nd-hero-eyebrow { font-size: var(--vw-hero-eyebrow-fs) !important; font-family: var(--font-title); font-weight: 600; letter-spacing: var(--vw-eyebrow-letter-spacing); text-transform: uppercase; color: var(--orange); margin-bottom: var(--vw-eyebrow-mb); display: inline-flex; align-items: center; gap: 8px; } /* Universal sub. v0.31.5: dropped .page-contact #hero .hero-sub — contact now uses .vw-hero-sub handled by page-hero.css. */ .ah-sub, .nh-sub { font-size: var(--vw-hero-sub-fs) !important; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.7) !important; max-width: 640px !important; margin: 0 auto !important; text-align: center !important; } /* ═══════════════════════════════════════════════════════════════ HERO CONTAINER — verbatim Works-archive spec applied to every page hero. v0.31.3: padding 120/24/70 desktop, both-axes centered flex, overflow:hidden. min-height per breakpoint token. Kills any height/max-height from page-specific CSS (Contact's prototype shipped fixed height: 55vh). ═══════════════════════════════════════════════════════════════ */ /* v0.32.92 — Split into two rules. Medium hero (about/services/works/ news/careers/contact and the legacy id selectors that predate .vw-hero--medium) uses the medium height variable. Small hero gets its own override below with the small height variable. Everything else in the original rule (padding, flex, overflow) stays shared. */ #cr-hero, #about-hero, #services-hero, #works-hero, #news-hero, section.vw-hero, section.vw-hero--medium { min-height: var(--vw-hero-medium-minh-desktop) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } section.vw-hero--small { min-height: var(--vw-hero-small-minh-desktop) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* HERO INNER (content wrapper) — verbatim Works .ah-inner spec forced onto every namespace: .ah-inner / .nh-inner / .vw-hero-inner / .hero-content (contact). */ .ah-inner, .nh-inner, .vw-hero--medium .vw-hero-inner { position: relative !important; z-index: 3 !important; max-width: var(--vw-hero-inner-max) !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; color: #fff; } /* ═══════════════════════════════════════════════════════════════ IN-PAGE SECTION TITLES — every main-content section heading on every page. Unified size, weight, color, line-height, lowercase. ═══════════════════════════════════════════════════════════════ */ /* v0.32.47 — Vic ask: news editorial titles (.ft-title on the /news/ featured callout, .nd-title in the single article body) render in editor case. Removed from the brand-lock section-title cohort below. The shared font/weight/size/color/line-height still apply via the `not(...)` wildcard rule on the next line which continues to match `[class*="-title"]` even after the explicit selectors drop these two. Belt-and-suspenders text-transform:none overrides also live in news-archive.css + news-single.css. */ .cr-section-title, .cr-batch-title, .cr-search-title, .cr-jobs-title, .cr-faq-head .cr-section-title, .wv-title, .ba-title, .svc-section-title, .ot-title, .tp-title, .bk-section-title, .pm-title, .vt-section-title, section h2[class*="-title"]:not(.hero-title):not(.cr-card-title):not(.cr-batch-stat-num):not(.cr-quote-name):not(.cr-faq-q):not(.pd-hero-title):not(.nd-hero-title):not(.nd-title):not(.ft-title) { font-family: var(--font-title); font-weight: 900; font-size: var(--vw-section-title-fs); letter-spacing: var(--vw-title-letter-spacing); line-height: 1.1; color: var(--vw-title-on-light); margin-bottom: var(--vw-eyebrow-mb); text-transform: lowercase; } .cr-section-title em, .cr-batch-title em, .cr-search-title em, .cr-jobs-title em, .wv-title em, .ba-title em, .svc-section-title em, .ot-title em, .ft-title em, .tp-title em, .bk-section-title em, .nd-title em { font-style: normal; color: var(--orange); } /* In-page eyebrow */ .cr-eyebrow, .cr-search-eyebrow, .svc-eyebrow, .about-eyebrow, section .vt-eyebrow, .ot-eyebrow, .tp-eyebrow { font-family: var(--font-title); font-size: var(--vw-section-eyebrow-fs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--vw-eyebrow-mb); display: inline-block; } /* In-page section sub */ .cr-section-sub, .svc-section-sub, .ba-sub, .wv-sub, .tp-sub { font-family: var(--font-body); font-size: var(--vw-section-sub-fs); font-weight: 300; line-height: 1.7; color: var(--mid); max-width: 680px; } /* ═══════════════════════════════════════════════════════════════ SECTION padding — universal vertical/horizontal padding so every section has the same vertical rhythm. ═══════════════════════════════════════════════════════════════ */ .cr-section, section.vw-section, section[data-vw-section], #cr-why, #cr-search, #cr-life, #cr-faq, #cr-apply { padding-top: var(--vw-section-py-desktop); padding-bottom: var(--vw-section-py-desktop); padding-left: var(--vw-section-px-desktop); padding-right: var(--vw-section-px-desktop); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — mobile / tablet portrait / tablet landscape steps. Hero padding + min-height swap to per-breakpoint tokens. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { #cr-why, #cr-search, #cr-life, #cr-faq, #cr-apply, .cr-section { padding-top: var(--vw-section-py-tablet); padding-bottom: var(--vw-section-py-tablet); padding-left: var(--vw-section-px-tablet); padding-right: var(--vw-section-px-tablet); } } @media (max-width: 860px) { #cr-why, #cr-search, #cr-life, #cr-faq, #cr-apply, .cr-section { padding-top: var(--vw-section-py-mobile); padding-bottom: var(--vw-section-py-mobile); padding-left: var(--vw-section-px-mobile); padding-right: var(--vw-section-px-mobile); } } @media (max-width: 520px) { :root { --vw-hero-med-fs: clamp(1.95rem, 7.8vw, 2.7rem); --vw-hero-sm-fs: clamp(1.5rem, 5.8vw, 2.05rem); --vw-section-title-fs: clamp(1.55rem, 6.4vw, 2.15rem); } #cr-hero, #about-hero, #services-hero, #works-hero, #news-hero, section.vw-hero, section.vw-hero--medium { min-height: var(--vw-hero-medium-minh-mobile) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding-mobile) !important; } section.vw-hero--small { min-height: var(--vw-hero-small-minh-mobile) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding-mobile) !important; } } /* Tablet PORTRAIT (861-1023) */ @media (min-width: 861px) and (max-width: 1023px) { :root { --vw-hero-med-fs: clamp(2.15rem, 4.8vw, 3.4rem); --vw-hero-sm-fs: clamp(1.6rem, 3vw, 2.4rem); } #cr-hero, #about-hero, #services-hero, #works-hero, #news-hero, section.vw-hero, section.vw-hero--medium { min-height: var(--vw-hero-medium-minh-tablet-port) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding-tablet) !important; } section.vw-hero--small { min-height: var(--vw-hero-small-minh-tablet-port) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding-tablet) !important; } } /* Tablet LANDSCAPE (1024-1366) */ @media (min-width: 1024px) and (max-width: 1366px) { :root { --vw-hero-med-fs: clamp(2.2rem, 4.6vw, 3.8rem); --vw-hero-sm-fs: clamp(1.65rem, 3vw, 2.6rem); } #cr-hero, #about-hero, #services-hero, #works-hero, #news-hero, section.vw-hero, section.vw-hero--medium { min-height: var(--vw-hero-medium-minh-tablet-land) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding-tablet) !important; } section.vw-hero--small { min-height: var(--vw-hero-small-minh-tablet-land) !important; height: auto !important; max-height: none !important; padding: var(--vw-hero-padding-tablet) !important; } } /* ═══════════════════════════════════════════════════════════════ v0.31.7 ADDITIONS ─────────────────────────────────────────────────────────────── 1. Dark-section title color — every section flagged data-bg="dark" gets its h2 titles forced to white (was rendering black on black for the homepage Latest Portfolios + similar). 2. Letter-spacing patch on per-page titles that hard-coded -0.04em instead of using the --vw-title-letter-spacing var. 3. Homepage About-section vertical gap trimmed. ═══════════════════════════════════════════════════════════════ */ /* (1) Dark-section title color */ section[data-bg="dark"] .port-title, section[data-bg="dark"] .gal-section-title, section[data-bg="dark"] h2.intro-main-title, section[data-bg="dark"] [class*="-title"]:not(.hero-title):not(.cr-card-title):not(.cr-batch-stat-num):not(.cr-quote-name):not(.cr-faq-q):not(.pd-hero-title):not(.nd-hero-title) { color: var(--vw-title-on-dark) !important; } section[data-bg="dark"] [class*="-title"] em, section[data-bg="dark"] .port-title em, section[data-bg="dark"] .intro-main-title em { color: var(--orange) !important; } /* (2) Letter-spacing patches — files that hard-coded -0.04em. Re-apply the var so future kerning changes only touch the var. */ .intro-main-title, .port-title, .gal-section-title, .svc-section-title, .cr-section-title, .cr-batch-title, .cr-search-title, .cr-jobs-title, .wv-title, .ba-title, .bk-section-title, .nh-title, .ah-title, .pd-hero-title, .nd-hero-title, .vw-hero-title, #hero .hero-title { letter-spacing: var(--vw-title-letter-spacing) !important; } /* (3) Homepage About section — reduce the 120px top padding that Vic flagged as too much breathing room above "ABOUT VERTWO". */ #intro { padding-top: 64px !important; } @media (max-width: 860px) { #intro { padding-top: 40px !important; } } /* ═══════════════════════════════════════════════════════════════ v0.31.8 — Inline-emphasis utility classes for body copy. Editors can use these inside any body lede / paragraph field that allows inline HTML (homepage About lede, future ledes). x → bold (browser default) x → italic x → brand orange x → bold, font-weight 700 x → orange + bold
→ line break ═══════════════════════════════════════════════════════════════ */ .vw-orange { color: var(--orange) !important; } .vw-bold { font-weight: 700 !important; } .vw-orange-bold { color: var(--orange) !important; font-weight: 700 !important; } /* Strong inside body ledes — DM Sans tabular numerals + medium weight */ .intro-lead strong, .intro-lead b, .vw-hero-sub strong, .vw-hero-sub b, .ah-sub strong, .ah-sub b, .nh-sub strong, .nh-sub b { font-weight: 700; color: inherit; } .intro-lead em, .intro-lead i, .vw-hero-sub em, .vw-hero-sub i, .ah-sub em, .ah-sub i, .nh-sub em, .nh-sub i { font-style: normal; color: var(--orange); } /* ═══════════════════════════════════════════════════════════════ v0.32.0 — 18-item polish batch additions ═══════════════════════════════════════════════════════════════ */ /* (1) Broader dark-bg title fix — even when section lacks data-bg attribute, target known-dark section IDs explicitly. */ #jobs-cta [class*="-title"]:not(.hero-title), #jobs-cta h2, #imprint [class*="-title"]:not(.hero-title), #imprint h2, #work-with-us [class*="-title"]:not(.hero-title), #work-with-us h2, #works-gallery [class*="-title"]:not(.hero-title), #works-gallery h2, #os-other [class*="-title"]:not(.hero-title), #os-other h2, #portfolios [class*="-title"]:not(.hero-title), #portfolios h2 { color: var(--vw-title-on-dark) !important; } #jobs-cta [class*="-title"] em, #imprint [class*="-title"] em, #work-with-us [class*="-title"] em, #works-gallery [class*="-title"] em, #os-other [class*="-title"] em, #portfolios [class*="-title"] em { color: var(--orange) !important; } /* (7-10) Unify section titles across pages to use the universal token. Every page-specific title that hard-codes a different clamp size now collapses to var(--vw-section-title-fs). */ .svc-core-title, .ba-intro-title, .vt-process-head h2, .os-head-title, .wv-title, .pf-title, .pf-head-title, .kp-title, .tc-title, .ms-title, .bk-section-title, .intro-main-title, .port-title, .gal-section-title, .vt-h-title, #testimonials .vt-h-title, #testimonials h2, #clients h2, .cl-section-title, .bs-title, .brand-story-title { font-size: var(--vw-section-title-fs) !important; font-family: var(--font-title) !important; font-weight: 900 !important; letter-spacing: var(--vw-title-letter-spacing) !important; line-height: 1.1 !important; text-transform: lowercase; } /* (11) News year header — smaller across all viewports */ .st-year-num { font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important; letter-spacing: var(--vw-title-letter-spacing) !important; } /* (12) FAQ titles on Careers + Contact — centered */ .cr-faq-head, .faq-header, #faq .faq-header { align-items: center !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .cr-faq-head .cr-section-title, .cr-faq-head .cr-section-sub, .faq-header h2, .faq-header p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* (16) Careers Life-at-Vertwo section — pure white background */ #cr-life { background: var(--white) !important; } /* (18) News article titles — NHG Bold (700) instead of Black (900) */ .st-card-title, .ft-title, .imp-mast-title, .nh-title, article.st-card .st-card-title { font-weight: 700 !important; } /* Hero title stays Black (900) — only article CARD + masthead change */ /* v0.32.0 — Issue 5: drag instruction hint on Services B/A slider. Mirrors the .hint kbd pattern from Works archive's #stage. */ #ba-showcase .ba-stage, #ba-showcase .ba-wrap { position: relative; } #ba-showcase::before { content: "drag left or right"; display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); text-align: center; margin: 0 auto 18px; padding: 6px 14px; border: 1px solid var(--hairline); border-radius: 980px; background: var(--off); width: fit-content; } /* v0.32.0 — Issue 6: separator line between B/A and Process. */ #ba-showcase { border-bottom: 1px solid var(--hairline) !important; } /* v0.32.0 — Issue 15: move careers search bar closer to job cards. Reduce top padding so the gap above search shrinks. */ #cr-search { padding-top: 28px !important; padding-bottom: 28px !important; background: var(--white) !important; border-top: none !important; border-bottom: none !important; } /* ═══════════════════════════════════════════════════════════════ v0.32.1 follow-ups ═══════════════════════════════════════════════════════════════ */ /* (1) B/A separator — make the hairline visible. Previous border-bottom was being overridden by page-services.css boundary-tightening rules. */ #ba-showcase { border-bottom: 1px solid var(--line) !important; margin-bottom: 0 !important; } /* (2) Process step numbering "05 / 06 / 06" — hide it. */ .vt-step-num, #process .vt-step-num { display: none !important; } /* (3) Process gallery title "base color" — sync to universal section title. */ .vt-step-title, #process .vt-step-title { font-size: var(--vw-section-title-fs) !important; font-family: var(--font-title) !important; font-weight: 900 !important; letter-spacing: var(--vw-title-letter-spacing) !important; line-height: 1.1 !important; text-transform: lowercase; } /* (6) Careers Why-Vertwo head — center the title block. */ .cr-why-head { align-items: center !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .cr-why-head .cr-section-title, .cr-why-head .cr-section-sub { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* (7) Three more title selectors that escaped the v0.32.0 sweep. */ .ct-headline, /* Contact "Got a project in mind?" */ .pm-title, /* Works "the full archive" */ #brand-story .vb-title-group h2 { /* About "the new vertwo." */ font-size: var(--vw-section-title-fs) !important; font-family: var(--font-title) !important; font-weight: 900 !important; letter-spacing: var(--vw-title-letter-spacing) !important; line-height: 1.1 !important; text-transform: lowercase; } .ct-headline em, .pm-title em, #brand-story .vb-title-group h2 em { color: var(--orange) !important; font-style: normal; } /* v0.32.1 — Issue 4: Force identical FAQ transition timings on Contact and Careers. Both prototypes already had the same CSS, but this !important block guarantees no future page-CSS override drifts them apart. */ .cr-faq-item, .faq-item { transition: border-color .25s ease, box-shadow .35s ease, transform .35s var(--ease) !important; } .cr-faq-a, .faq-a { transition: height .55s cubic-bezier(.83,0,.17,1), opacity .35s ease, padding .55s cubic-bezier(.83,0,.17,1) !important; } .cr-faq-icon, .faq-icon { transition: background .25s ease, border-color .25s ease, color .25s ease, transform .35s var(--ease) !important; } /* ═══════════════════════════════════════════════════════════════ v0.32.2 follow-ups ═══════════════════════════════════════════════════════════════ */ /* (1) B/A → Process boundary separator — verbatim port of About's #team-culture::before pattern (75% width, centered, hairline). */ #ba-showcase { border-bottom: none !important; /* replace v0.32.1 hard line */ } #process { position: relative; } #process::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 75%; max-width: 1100px; height: 1px; background: rgba(26, 26, 26, 0.10); pointer-events: none; z-index: 1; } /* (2) v0.32.3 — FAQ transition: REVERTED to verbatim careers values. My v0.32.1+v0.32.2 attempts added/altered values; this restores the exact `.cr-faq-item` declaration from page-careers.css line 1028 and forces it on `.faq-item` so both selectors are 100% identical. */ .faq-item { transition: border-color .25s ease, box-shadow .35s ease, transform .35s var(--ease) !important; } .faq-a { transition: height .55s cubic-bezier(.83,0,.17,1), opacity .35s ease, padding .55s cubic-bezier(.83,0,.17,1) !important; } .faq-icon { transition: background .25s ease, border-color .25s ease, color .25s ease, transform .35s var(--ease) !important; } /* v0.32.3 — Issue 3 REVERTED. The padding-top: 52px on .cr-jobs-header made it look worse on tablet. Returning to the natural baseline. */ /* (7) v0.32.3 — Sub-page hero cover layer, refined. Portrait covers occupy only the right half of the hero with a vignette fade-out on the left edge. Landscape (or square) covers stay full-bleed. The .ah-cover element is inserted at the top of the section (before .ah-bg) by both work-detail-hero.php and single-vertwo_news.php. The parent
has a `--blob-color: rgb(R,G,B)` inline style derived from the cover's dominant color via vertwo_works_get_cover_dominant_rgb, so all three blobs (which cascade `var(--blob-color)`) auto-tint to match the artwork. */ #pd-hero, #nd-hero { position: relative; } #pd-hero .ah-cover, #nd-hero .ah-cover { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; opacity: 0.55; } /* PORTRAIT: cover anchored to the right half, faded out on the left via a horizontal mask so the title text on the left stays legible. */ #pd-hero[data-cover-aspect="portrait"] .ah-cover, #nd-hero[data-cover-aspect="portrait"] .ah-cover { left: 50%; background-position: center; background-size: cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.20) 18%, rgba(0,0,0,0.80) 55%, #000 90%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.20) 18%, rgba(0,0,0,0.80) 55%, #000 90%); } /* LANDSCAPE / SQUARE: full-bleed, monochrome treatment kept very subtle so it acts as ambient texture (not an image-card). */ #pd-hero[data-cover-aspect="landscape"] .ah-cover, #pd-hero[data-cover-aspect="square"] .ah-cover, #nd-hero[data-cover-aspect="landscape"] .ah-cover, #nd-hero[data-cover-aspect="square"] .ah-cover { filter: grayscale(100%) brightness(0.50); opacity: 0.32; } /* v0.32.4 — Sub-page blobs use per-slot cover-derived palette colors (3 distinct HSL-rotated variants). Each blob's --blob-color is set inline by the template; this rule just makes sure the existing CSS files don't override with their hardcoded fallback colors. */ #pd-hero .ah-blob--a, #nd-hero .ah-blob--a { background: radial-gradient(circle at 30% 30%, var(--blob-color, #F27A0F) 0%, transparent 60%) !important; } #pd-hero .ah-blob--b, #nd-hero .ah-blob--b { background: radial-gradient(circle at 70% 50%, var(--blob-color, #EC2F7A) 0%, transparent 60%) !important; } #pd-hero .ah-blob--c, #nd-hero .ah-blob--c { background: radial-gradient(circle at 50% 50%, var(--blob-color, #F5A623) 0%, transparent 60%) !important; } /* Layer stacking: cover → blobs → grain → veil → text */ #pd-hero .ah-bg, #nd-hero .ah-bg { z-index: 1; } #pd-hero .ah-grain, #nd-hero .ah-grain { z-index: 2; } #pd-hero .ah-veil, #nd-hero .ah-veil { z-index: 2; } #pd-hero .pd-hero-inner, #nd-hero .nd-hero-inner { position: relative; z-index: 3; } /* ═══════════════════════════════════════════════════════════════ v0.32.5 follow-ups ═══════════════════════════════════════════════════════════════ */ /* (1) v0.32.7 — Solving FAQ tight-bottom for real. Root cause: the JS measureOpenHeight() reads scrollHeight of .faq-a to set its explicit pixel height. scrollHeight technically includes the element's own padding, but in our case the JS runs very close to the moment the typography-system.css padding rule cascades, leading to inconsistent measurements (some browsers return scrollHeight without the new padding). The bulletproof fix is to put the gap INSIDE the content — add a margin-bottom to the LAST

in the answer. JS scrollHeight always includes child element margins, so the height is correctly inflated. */ .faq-a > p:last-of-type, .cr-faq-a > p:last-of-type { margin-bottom: 28px !important; } @media (max-width: 860px) { .faq-a > p:last-of-type, .cr-faq-a > p:last-of-type { margin-bottom: 22px !important; } } /* Also keep a generous outer padding so non-paragraph terminal nodes (lists, etc.) still get breathing room. */ .faq-item.open .faq-a, .cr-faq-item.open .cr-faq-a { padding: 0 26px 32px !important; } @media (max-width: 860px) { .faq-item.open .faq-a, .cr-faq-item.open .cr-faq-a { padding: 0 20px 26px !important; } } /* (2) News sub-page hero cover — opacity bumped from 0.32 → 0.55 so the cover reads more clearly while staying as ambient texture. */ #nd-hero[data-cover-aspect="landscape"] .ah-cover, #nd-hero[data-cover-aspect="square"] .ah-cover, #pd-hero[data-cover-aspect="landscape"] .ah-cover, #pd-hero[data-cover-aspect="square"] .ah-cover { opacity: 0.55 !important; } /* (5a) Remove the arrow icons inside the IG/FB/LI cards on the "follow the studio" section (news archive imprint). */ .imp-card-arrow { display: none !important; } .imp-card-foot { justify-content: flex-start !important; } /* (5b) Looping icon-flip animation on the IG/FB/LI card SVG icons, ported verbatim from bokami's .bk-soc-card-icon svg keyframes. 4s loop, ease-in-out, staggered per card via animation-delay. */ @keyframes vt-imp-icon-flip { 0%, 22% { transform: rotateY(0deg); } 78%, 100% { transform: rotateY(360deg); } } .imp-card-icon { perspective: 600px; } .imp-card-icon svg { animation: vt-imp-icon-flip 4s ease-in-out infinite; transform-origin: center center; } .imp-card--ig .imp-card-icon svg { animation-delay: 0s; } .imp-card--fb .imp-card-icon svg { animation-delay: 0.4s; } .imp-card--li .imp-card-icon svg { animation-delay: 0.8s; } @media (prefers-reduced-motion: reduce) { .imp-card-icon svg { animation: none !important; } } /* (4) v0.32.6 — Card background image overlay, REWRITTEN. The v0.32.5 ::after approach was being neutralized by the existing `.imp-card-bg { position: absolute; inset: 0 }` rule (pseudo-elements of an absolute element don't auto-cover the parent in all browsers). This rewrite stacks the image directly in .imp-card-bg as a layered background — photo + a dark vignette gradient on top for legibility. Brand gradient still shows through the .imp-card-shine layer on hover, and the icon + text sit above on z-index 3. */ .imp-card[style*="--imp-card-image"] .imp-card-bg { background: linear-gradient(135deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.68) 100%), var(--imp-card-image) center / cover no-repeat !important; } /* Per-platform hover: subtle brightness lift, no color shift (since the photo now drives the hue). */ .imp-card[style*="--imp-card-image"]:hover .imp-card-bg { filter: brightness(1.10) saturate(1.05); } /* ═══════════════════════════════════════════════════════════════ v0.32.7 — Issue 6: align Works other-services grid to webtoon grid ═══════════════════════════════════════════════════════════════ */ /* Desktop ≥1181px: 4-column fixed grid like .pm-grid, same gap pattern. */ @media (min-width: 1181px) { .pmo-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 36px 28px !important; align-items: start !important; } } /* Tablet landscape 1024-1180px: keep 3-col but match webtoon gap rhythm. */ @media (min-width: 1024px) and (max-width: 1180px) { .pmo-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 32px 24px !important; } } /* Tablet portrait 861-1023: 3-col (Vic's prior spec). */ @media (min-width: 861px) and (max-width: 1023px) { .pmo-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 28px 22px !important; } } /* Mobile-large 521-860: 2-col to match .pm-grid mobile rhythm. */ @media (min-width: 521px) and (max-width: 860px) { .pmo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 20px !important; } } /* Narrow mobile ≤520: 2-col tight. */ @media (max-width: 520px) { .pmo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px 14px !important; } }