/* v2.12.52 — mobile-only line break helper. The is
hidden on desktop (layout unchanged) and only forces a break at ≤768px. */
br.svc-br-m { display: none; }
@media (max-width: 768px) { br.svc-br-m { display: inline; } }
/* =========================================================
v2.4.3 — HERO CAROUSEL (Figma 96:1634)
5 slides, full-viewport-width, auto-rotate every 5s.
========================================================= */
.hero__carousel {
position: relative;
/* v2.6.101 — .hero-wrap is now full-vw, so the carousel just takes
100% of its parent. Removed the 100vw + negative-margin trick
that used to escape the 1280 cap (it got clipped by .hero's
overflow:hidden on zoomed-out viewports). */
width: 100%;
flex: 1 1 0;
min-height: 0;
padding: 0;
margin-top: 32px;
box-sizing: border-box;
user-select: none;
}
.hero__carousel-card {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #1a1a1a;
}
.hero__slides {
display: flex;
width: 100%;
height: 100%;
transition: transform .8s cubic-bezier(.7, 0, .3, 1);
will-change: transform;
}
.hero__slide {
flex: 0 0 100%;
position: relative;
overflow: hidden;
}
.hero__slide img,
.hero__slide-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* v2.6.87 — scroll-runway parallax: video subtly zooms in (1.0 → 1.08)
as the user scrolls through the 100vh hero runway. JS sets
`transform: scale(...)` per frame; transform-origin stays center
so the crop is symmetric, and .hero__slide's overflow:hidden
hides any edge spill. */
.hero__slide-video {
transform-origin: center center;
will-change: transform;
}
/* Soft gradient overlay at the bottom for legible text. */
.hero__slide::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 60%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.hero__slide-text {
position: absolute;
/* v2.5.7 — Figma 166:2078/2079: caption nudged downward so its subtitle
baseline sits on the same row as the dash indicators on the right.
Left inset scales softly from a small viewport gutter up to the Figma
112px on a 1920 canvas. */
left: clamp(20px, 5.8vw, 112px);
bottom: 26px;
z-index: 2;
color: #fff;
max-width: min(860px, 70vw);
}
/* feedback — carousel caption links to its project's portfolio page. */
a.hero__slide-text--link { text-decoration: none; color: #fff; cursor: pointer; display: block; }
a.hero__slide-text--link:hover .hero__slide-title { text-decoration: underline; text-underline-offset: 3px; }
.hero__slide-title {
/* v2.5.7 — Figma 28px Medium for caption title. */
font-size: clamp(18px, 1.9vw, 28px);
font-weight: 500;
line-height: 1.25;
margin: 0 0 6px;
color: #fff;
}
.hero__slide-sub {
/* v2.5.7 — Figma 16px Regular for caption subtitle; bumped +5px (v2.9.75). */
font-size: clamp(17px, 1.05vw, 21px);
font-weight: 400;
line-height: 1.4;
margin: 0;
color: rgba(255, 255, 255, 0.92);
}
/* Progress bar — flush with the bottom edge of the carousel. Fills
0→100% over a fixed 10s per slide via CSS @keyframes (smooth at 60fps,
independent of video duration). */
.hero__progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
background: rgba(245, 245, 245, 0.20);
z-index: 3;
pointer-events: none;
}
.hero__progress-fill {
height: 100%;
width: 0;
background: rgba(245, 245, 245, 0.65);
}
.hero__progress-fill.is-running {
animation: hero-progress 10s linear forwards;
}
.hero__progress-fill.is-paused {
animation-play-state: paused;
}
@keyframes hero-progress {
from { width: 0; }
to { width: 100%; }
}
/* Dash indicators — 4-5 small white pills stacked in the bottom right. */
.hero__indicators {
position: absolute;
/* v2.5.7 — match Figma 166:208x right-edge gutter at 1920 (~125px),
scale down for narrower viewports. Vertically aligned with the
slide caption's subtitle baseline (both bottom:26px). */
right: clamp(20px, 6.5vw, 125px);
bottom: 26px;
display: flex;
gap: 6px;
z-index: 4;
}
.hero__dash {
width: 22px;
height: 3px;
background: rgba(255, 255, 255, 0.40);
border: 0;
padding: 0;
cursor: pointer;
transition: background .25s ease, transform .25s ease;
border-radius: 1px;
}
.hero__dash:hover { background: rgba(255, 255, 255, 0.7); }
.hero__dash.is-active { background: #ffffff; transform: scaleY(1.3); }
/* Mobile: shrink padding and bring text closer to the edge. */
@media (max-width: 768px) {
/* v2.11.99 — fill the screen like desktop: hero = one viewport tall (minus the
64px fixed header); copy on top, the carousel takes the REMAINING space so
its bottom edge (caption + live slider) lands at the screen bottom on every
phone. Was a fixed 4:5 that overflowed and pushed the slider off-screen. */
/* v2.12.3 — fill the CURRENT visible viewport with dvh (dynamic = tracks the live
URL-bar state) so the carousel reaches the screen bottom and the live slider bar
sits EXACTLY at the bottom edge on every phone. svh (v2.12.2) was too short when
the address bar was retracted → white gap below the slider; plain vh/var(--vph)
was too tall → slider fell below the fold. dvh matches the visible area exactly,
so no gap and no crop. Subtract only the 64px fixed header (body has padding-top
64px). height:auto kills the leftover desktop height:calc(100vh-76px). The video
crops per screen via object-fit:cover; slider is the bottom boundary. */
.hero { height: auto; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: flex; flex-direction: column; }
.hero__copy { flex: 0 0 auto; }
.hero__carousel { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; margin-top: 20px; }
/* v2.12.5 — THE actual crop/gap cause: the carousel correctly flex-grows to fill
the hero, but .hero__carousel-card used height:100%, which can't resolve against
a flex-grown parent (its computed height is `auto`) → the card collapsed to the
video's intrinsic 16:9 (~269px) and left white space below. Pinning the card to
fill the carousel (absolute inset:0 = a definite box) makes the video fill the
whole flex-grown height, so the carousel reaches the screen bottom on every phone
and the live slider bar is the bottom edge. */
.hero__carousel-card { position: absolute; inset: 0; height: auto; width: 100%; }
/* v2.11.90 — caption was filling the frame; shrink it on phones. */
.hero__slide-text { left: 20px; bottom: 22px; max-width: calc(100% - 40px); }
.hero__slide-title { font-size: 16px; }
.hero__slide-sub { font-size: 14px; } /* v2.11.97 — +2pt */
.hero__indicators { right: 20px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.hero__slides { transition: none; }
.hero__progress-fill.is-running { animation: none; width: 100%; }
}
/* =========================================================
v2.6.86 — hero-wrap scroll runway: copy fades + collapses,
carousel expands to fill the viewport in-place. Mobile opt-out
handled by JS clearing inline styles + the .hero-wrap height
override below. */
@media (max-width: 768px) {
.hero-wrap { height: auto; }
/* v2.11.99 — keep position/overflow reset but NOT height:auto (the carousel
block above makes the hero fill one viewport so the slider sits on-screen). */
.hero { position: relative; top: auto; overflow: visible; }
}
/* =========================================================
v2.4.x — DROPDOWN NAV + 5 PAGE TEMPLATES (Figma-accurate)
Loaded after main.css to override.
Figma source: bHsX3bIqFsAozx1nsx125O (1280 canvas).
Pixel values are matched 1:1 within the section's content
wrapper; the wrapper itself scales soft-cap 1600px.
========================================================= */
/* ---------- Header dropdown nav ---------- */
.navbar__links { gap: 32px; }
.navbar__item { position: relative; display: flex; align-items: center; }
.navbar__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; }
.navbar__link-label { display: inline-block; }
/* feedback — Services is a non-navigating trigger (hover to pick a
category). It misses the `.navbar__links a` colour/size rule, so mirror it
here; pointer cursor signals it still opens the menu. */
.navbar__link--trigger {
color: var(--color-muted); font-size: 19px; line-height: 1;
cursor: pointer; transition: color .2s ease; -webkit-user-select: none; user-select: none;
}
.navbar__item--has-sub:hover .navbar__link--trigger,
.navbar__link--trigger:hover,
.navbar__link--trigger:focus-visible { color: var(--color-text); }
.navbar__caret {
display: inline-block;
width: 10px; height: 10px;
position: relative;
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
/* feedback — chevron made of two strokes (outline), NOT a filled triangle. */
.navbar__caret::before {
content: "";
position: absolute; left: 50%; top: 42%;
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translate(-50%, -50%) rotate(45deg);
}
.navbar__item--has-sub.is-open .navbar__caret,
.navbar__item--has-sub:hover .navbar__caret,
.navbar__item--has-sub:focus-within .navbar__caret { transform: rotate(180deg); }
.navbar__dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translate(-50%, 8px);
min-width: 220px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 18px 40px rgba(20, 30, 60, 0.14), 0 2px 6px rgba(20, 30, 60, 0.08);
padding: 10px 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), visibility .25s;
z-index: 1100;
}
.navbar__dropdown::before {
content: ""; position: absolute;
top: -14px; left: 0; right: 0; height: 14px;
}
.navbar__dropdown::after {
content: ""; position: absolute;
top: -7px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px; height: 14px;
background: #ffffff;
box-shadow: -2px -2px 4px rgba(20, 30, 60, 0.04);
}
/* v2.12.4 — open on HOVER **and** CLICK. Pointing the cursor at the Services/
Portfolios text reveals the dropdown (desktop, restored). Clicking the label
still does NOT navigate (JS preventDefault) — it just keeps the menu open via
.is-open so keyboard/touch users can pick a category too. */
.navbar__item--has-sub.is-open .navbar__dropdown,
.navbar__item--has-sub:hover .navbar__dropdown,
.navbar__item--has-sub:focus-within .navbar__dropdown {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(-50%, 0);
}
.navbar__sub { list-style: none; margin: 0; padding: 0; }
.navbar__sub li a,
.navbar__sub-item > a {
display: block;
padding: 9px 22px;
font-size: 16px; /* feedback — hover dropdown links +2pt (13→16) */
font-weight: 500;
color: var(--color-text);
white-space: nowrap;
transition: color .2s ease, background .2s ease;
}
.navbar__sub li a:hover,
.navbar__sub-item:hover > a { color: var(--color-primary); background: rgba(235, 71, 0, 0.06); }
/* Album-preview dropdown variant — text column on the left, image
thumbnail on the right swaps as user hovers each sub-item. Used by
the Portfolios menu. */
.navbar__dropdown--album {
padding: 14px;
width: 560px;
border-radius: 14px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
align-items: stretch;
}
.navbar__dropdown--album .navbar__sub {
display: flex;
flex-direction: column;
gap: 2px;
}
.navbar__dropdown--album .navbar__sub-item > a {
padding: 10px 14px;
border-radius: 8px;
white-space: normal;
}
.navbar__dropdown--album .navbar__sub-item:hover > a {
background: rgba(235, 71, 0, 0.08);
color: var(--color-primary);
}
.navbar__dropdown--album .navbar__sub-preview { display: none; }
/* Image preview pane on the right — each sub-item's thumb stacks here
absolutely; CSS hover swaps which one is visible. */
.navbar__album {
position: relative;
border-radius: 0;
overflow: hidden;
background: #f1f1f1;
aspect-ratio: 4 / 3;
min-height: 100%;
}
.navbar__dropdown--album .navbar__sub-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.02);
transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1);
z-index: 1;
}
/* Hoist thumb images out of the
and into the album pane visually.
Anchored to the dropdown (the nearest positioned ancestor), spanning
the right-hand album column. */
.navbar__dropdown--album .navbar__sub-item .navbar__sub-preview {
display: block;
position: absolute;
top: 14px;
right: 14px;
bottom: 14px;
left: calc(14px + 200px + 16px);
pointer-events: none;
border-radius: 0;
overflow: hidden;
}
.navbar__dropdown--album .navbar__sub-item .navbar__sub-preview img {
border-radius: 0;
}
/* Default: show the FIRST sub-item's preview. */
.navbar__dropdown--album .navbar__sub-item:first-child .navbar__sub-preview img {
opacity: 1;
transform: scale(1);
}
/* When any item is hovered, hide the default first one. */
.navbar__dropdown--album .navbar__sub:hover .navbar__sub-item:first-child .navbar__sub-preview img {
opacity: 0;
}
/* And reveal the hovered item's preview. */
.navbar__dropdown--album .navbar__sub-item:hover .navbar__sub-preview img {
opacity: 1 !important;
transform: scale(1) !important;
}
/* Services 4-column mega-menu (Figma 279:1854). Right-aligned to the Services
item so it never overflows the right edge; grey thumb header + link list per
column. */
/* Fixed + right-aligned to the navbar gutter so the panel's right edge lines up
with the GET A QUOTE button (not the Services item). The panel is wide enough
to still sit under Services, so hover transfers fine (it's a DOM child of the
Services
). top = 76px navbar + 14px gap. */
.navbar__dropdown--mega {
position: fixed; top: 90px; left: auto;
right: clamp(20px, 3.3vw, 63px);
transform: translateY(8px);
min-width: 0; width: max-content; max-width: min(92vw, 920px);
padding: 22px;
}
.navbar__item--has-sub.is-open .navbar__dropdown--mega,
.navbar__item--has-sub:hover .navbar__dropdown--mega,
.navbar__item--has-sub:focus-within .navbar__dropdown--mega { transform: translateY(0); }
.navbar__dropdown--mega::after { display: none; } /* arrow would point at GET A QUOTE, not Services */
/* v2.9.49 — the mega panel is position:fixed at top:90px while the "Services"
trigger sits centred in the 76px navbar (its lower edge ~58px). The default
14px ::before bridge only covered 76→90px, leaving a dead band between the
link and the panel: moving the cursor down to click made the menu flicker
shut. Extend the invisible hover-bridge up to overlap the trigger so hover
stays continuous from link → bridge → panel. */
.navbar__dropdown--mega::before { top: -40px; height: 40px; left: 0; right: 0; }
.navbar__mega { display: flex; gap: 22px; }
.navbar__mega-col { flex: 0 0 168px; width: 168px; }
.navbar__mega-head {
position: relative; display: flex; align-items: flex-end; height: 92px; padding: 12px;
border-radius: 0; background: #c9c9c9; overflow: hidden; margin-bottom: 12px;
}
.navbar__mega-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* v2.11.15 — bottom-only shadow restored under the mega thumbnail labels
("add shadow bawahnya aja"); fades out by mid-thumbnail so the image stays clean. */
.navbar__mega-head::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.navbar__mega-head.is-placeholder::after { background: none; }
.navbar__mega-title { position: relative; z-index: 1; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: .01em; } /* feedback — Services column title 14→16 */
.navbar__mega-links { list-style: none; margin: 0; padding: 0; }
.navbar__mega-links li { margin: 0; }
.navbar__mega-links a {
display: block; padding: 6px 2px; font-size: 16px; font-weight: 500; /* feedback — Services mega links +2pt (13→16) */
color: var(--color-text); white-space: nowrap;
transition: color .2s ease;
}
.navbar__mega-links a:hover { color: var(--color-primary); }
/* =========================================================
Shared page chrome — soft pastel rainbow wash near the top,
used by Portfolios/Blog-listing/Article/Contact (Figma BG_ABOUT US).
========================================================= */
.page-bg-wash {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 592px;
pointer-events: none;
overflow: hidden;
z-index: -1;
}
.page-bg-wash::before {
content: "";
position: absolute;
left: 50%;
top: -140px;
width: 1200px;
height: 690px;
transform: translateX(-50%);
background:
radial-gradient(closest-side at 18% 30%, rgba(255, 192, 218, 0.55), transparent 65%),
radial-gradient(closest-side at 82% 28%, rgba(160, 215, 255, 0.55), transparent 65%),
radial-gradient(closest-side at 50% 70%, rgba(255, 232, 188, 0.45), transparent 65%);
filter: blur(40px);
opacity: 0.65;
}
/* =========================================================
PORTFOLIO LISTING — Figma 96:802 ("Selected Works")
========================================================= */
.works {
position: relative;
/* v2.11.72 — side gutters matched to the blog (.news) so the blog and
portfolio "Selected Works" pages share the same view width. */
padding: 76px clamp(56px, 6.5vw, 100px) 120px;
max-width: 1280px;
margin: 0 auto;
}
/* Figma 118:2324 — coloured accent anchored upper-left, rotated 180° so
the asset's blob (which sits in its lower-left quadrant) ends up
behind the "Selected" word of the title. Per Figma: container centred
at calc(21.88% − 23.77px) of 1280 canvas, top:53, width:605.785px,
image overflowing by ~41% top/bottom and ~29% left/right. The asset
is intrinsically soft so we render at full alpha for visibility. */
.works__accent {
position: absolute;
top: 53px;
left: clamp(140px, calc(21.88% - 23.77px), 256px);
transform: translateX(-50%) rotate(180deg);
width: clamp(480px, 47.3vw, 605.785px);
aspect-ratio: 961 / 786;
pointer-events: none;
z-index: 0;
opacity: 1;
}
.works__accent::before {
content: "";
position: absolute;
inset: -41.26% -29.35%;
background: url('../images/coloured-accent.webp') center/contain no-repeat;
}
/* Stacking: head/grid/paging sit above the accent (z=0), but the FILTER
row needs z-index higher than the grid so its Others dropdown panel
paints on top of the cards below it. */
.works__head, .works__grid, .works__paging { position: relative; z-index: 1; }
.works__filters { position: relative; z-index: 20; }
.works__head {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: end;
margin-bottom: 48px;
}
/* Figma 96:942 — "Selected" Regular black, "Works" Medium gray on a
second line. Not italic. 97.333px / line-height 0.905. */
.works__title {
font-size: 97.333px;
font-weight: 400;
line-height: 0.905;
letter-spacing: -0.01em;
margin: 0;
}
.works__title-line2 {
display: block;
font-weight: 500;
color: #535353;
}
.works__intro {
font-size: 18px; /* feedback — landing right-side intro +2pt (14.985→18) */
line-height: 1.5;
color: rgba(35, 31, 32, 0.85);
margin: 0;
text-align: left;
}
/* =========================================================
Others dropdown — Figma 62:1181. Used on BOTH homepage portfolio
filters (.portfolio__filter-*) and /portfolios/ (.portfolio__filter-*
reused via same classes).
========================================================= */
/* Trigger when panel is open: SemiBold ITALIC blue, caret flipped up. */
.portfolio__filter-other.is-active {
color: var(--color-accent);
font-weight: 600;
font-style: italic;
}
/* Panel: 384px wide, frosted-glass white 88%, deep shadow. */
.portfolio__filter-panel {
position: absolute;
top: calc(100% + 14px);
right: 0;
left: auto;
width: 384px;
max-width: calc(100vw - 80px);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
box-shadow: 0 16px 32.64px rgba(0, 0, 0, 0.35);
border-radius: 4px;
padding: 15px 0;
z-index: 50;
}
.portfolio__filter-panel[hidden] { display: none; }
/* Each item: 46px tall, 20px Medium black. Centered text block in 335px-wide
row aligned to the panel content area (42px left padding from Figma). */
.portfolio__filter-panel-item {
display: block;
width: 100%;
background: none;
border: 0;
padding: 11px 42px;
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 24px;
color: var(--color-text);
text-align: left;
cursor: pointer;
position: relative;
transition: color .2s ease, background .2s ease;
}
/* Hover/active: faint white frosted backdrop + blue SemiBold (matches
Figma's "HoverColor" overlay component blur(17.5px) opacity 66%). */
.portfolio__filter-panel-item:hover,
.portfolio__filter-panel-item:focus-visible {
color: var(--color-accent);
font-weight: 600;
background: rgba(255, 255, 255, 0.6);
outline: none;
}
.portfolio__filter-panel-item.is-active {
color: var(--color-accent);
font-weight: 600;
background: rgba(255, 255, 255, 0.6);
}
@media (max-width: 700px) {
.portfolio__filter-panel { width: calc(100vw - 48px); }
.portfolio__filter-panel-item { font-size: 17px; padding: 10px 24px; }
}
/* Filter row — mirrors homepage `.portfolio__filters` exactly: 16px Medium,
--color-border default, blue --color-accent on hover/active. No top/bottom
borders (homepage doesn't have them). */
.works__filters {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
min-height: 20.8px;
margin-bottom: 40px;
position: relative;
z-index: 10;
}
.works__filter,
.works__filter--others {
background: none; border: 0; padding: 0; cursor: pointer;
font-size: 16px;
font-weight: 500;
color: var(--color-border);
font-family: inherit;
line-height: 1.2;
transition: color .2s ease;
}
.works__filter:hover,
.works__filter--others:hover { color: var(--color-accent); }
.works__filter.is-active { color: var(--color-accent); font-weight: 600; }
.works__filter--others { display: inline-flex; align-items: center; gap: 6px; }
.works__filter--others .navbar__caret::before { border-top-color: currentColor; }
/* Figma 96:802 — 2 columns @ 583px wide each, ~33px gap, 16:9 thumbs. */
.works__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 33px;
}
.works__card { display: block; }
.works__thumb {
display: block;
position: relative;
aspect-ratio: 583 / 328;
overflow: hidden;
border-radius: 0;
background: #f4f4f4;
}
/* Two-layer thumb: rest PNG fades OUT, hover GIF fades IN, both scale up
slightly — same trio of effects the homepage portfolio uses. GIF src
is set lazily on first hover (see main.js [data-hover-src]). */
.works__thumb-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.works__thumb-img--rest { opacity: 1; }
.works__thumb-img--hover { opacity: 0; }
/* Two-layer crossfade: featured image fades OUT, work_hover image fades IN,
both zoom slightly. Hover src is lazy-loaded on first hover (main.js). */
.works__thumb:hover .works__thumb-img--rest,
.works__thumb:focus-within .works__thumb-img--rest { opacity: 0; }
.works__thumb:hover .works__thumb-img--hover,
.works__thumb:focus-within .works__thumb-img--hover { opacity: 1; }
.works__thumb:hover .works__thumb-img,
.works__thumb:focus-within .works__thumb-img { transform: scale(1.04); }
/* Title turns blue on card hover — same as homepage. !important guards
against cache lag where an older v240.css still ships the static rule
later in the file with equal specificity. */
.works__card:hover .works__card-title,
.works__card:focus-within .works__card-title { color: var(--color-accent) !important; }
/* Fallback for any plain still inside .works__thumb (legacy paths). */
.works__thumb > img:not(.works__thumb-img) {
width: 100%; height: 100%;
object-fit: cover;
}
.works__thumb-tag {
position: absolute; top: 10px; right: 10px;
background: var(--color-primary); color: #fff;
font-weight: 700; font-size: 11px;
padding: 5px 7px; border-radius: 3px;
}
/* Figma 96:809 — 21.788px Medium, black, just under the thumb. */
.works__card-title {
font-size: 21.788px;
font-weight: 500;
margin: 18px 0 4px;
color: var(--color-text);
line-height: 1.3;
transition: color .25s ease;
}
/* Figma 96:810 — 14.007px Medium, 65% black. */
.works__card-sub {
font-size: 14.007px;
font-weight: 500;
color: rgba(35, 31, 32, 0.65);
margin: 0;
line-height: 1.4;
}
/* Figma 96:945 — "CLICK HERE" white overlay on the first card thumb.
Positioned roughly center-ish (35% from left, 44% from top per the
1280-canvas math). Inter not loaded; Figtree is close enough at 35px. */
.works__click-here {
position: absolute;
left: 35%;
top: 44%;
font-size: clamp(22px, 2.6vw, 35px);
font-weight: 400;
color: #ffffff;
letter-spacing: 0.01em;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
pointer-events: none;
white-space: nowrap;
z-index: 2;
transition: opacity .35s ease;
}
/* Hide once the hover image kicks in so it doesn't sit on top of it. */
.works__thumb:hover .works__click-here,
.works__thumb:focus-within .works__click-here { opacity: 0; }
/* Figma 96:811 — tag row, blue #1566e0, 14.007px Medium, 5.115px gap,
3.07px round dot separators. */
.works__card-tags {
list-style: none;
display: flex;
gap: 5.115px;
align-items: center;
margin: 12px 0 0;
padding: 0;
color: var(--color-accent);
font-size: 14.007px;
font-weight: 500;
flex-wrap: wrap;
}
.works__card-tag-sep {
width: 3.07px; height: 3.07px;
background: var(--color-accent);
border-radius: 50%;
display: inline-block;
}
.works__paging {
display: flex; justify-content: center; align-items: center;
gap: 14px; margin-top: 60px;
}
.works__page-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #d4d4d4; border: 0; cursor: pointer; padding: 0;
transition: transform .2s ease, background .2s ease;
}
.works__page-dot.is-active {
background: var(--color-text); transform: scale(1.4);
}
/* =========================================================
PORTFOLIO DETAIL — Figma 96:956
========================================================= */
.work-detail {
position: relative;
padding: 100px 40px 120px;
max-width: 1280px;
margin: 0 auto;
}
.work-detail__year {
font-size: 14.985px;
font-weight: 400;
color: var(--color-text);
text-transform: capitalize;
margin: 0 0 16px;
line-height: 1.5;
}
.work-detail__title {
font-size: 66.667px;
font-weight: 400;
line-height: 1.086;
letter-spacing: -0.005em;
margin: 0 0 12px;
max-width: 894px;
}
.work-detail__sub {
font-size: 21.333px;
font-weight: 500;
color: rgba(35, 31, 32, 0.65);
margin: 0 0 60px;
}
.work-detail__hero {
position: relative;
aspect-ratio: 1200 / 615;
border-radius: 0;
overflow: hidden;
background: #1a1a1a;
margin-bottom: 100px;
}
.work-detail__hero img,
.work-detail__hero video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Play button swaps the poster for a YouTube/Vimeo iframe in place (main.js). */
.work-detail__hero iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.work-detail__hero-play {
position: absolute; inset: 0; margin: auto;
width: 100px; height: 100px; border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
display: flex; align-items: center; justify-content: center;
cursor: pointer; border: 0;
backdrop-filter: blur(2px);
transition: transform .25s ease, background .25s ease;
}
.work-detail__hero-play:hover { transform: scale(1.08); background: #fff; }
.work-detail__hero-play::before {
content: ""; width: 0; height: 0; margin-left: 6px;
border-left: 22px solid #000;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
}
.work-detail__hero-tag {
position: absolute; top: 16px; right: 16px;
background: var(--color-primary); color: #fff;
font-weight: 700; font-size: 14px;
padding: 8px 10px; border-radius: 3px;
line-height: 1;
}
.work-detail__overview {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
margin-bottom: 60px;
}
.work-detail__overview-h {
font-size: 26px;
font-weight: 600;
line-height: 1.5;
margin: 0;
color: var(--color-text);
}
.work-detail__overview-body p {
font-size: 14.667px;
line-height: 1.5;
color: var(--color-text);
margin: 0 0 20px;
}
.work-detail__overview-body p:last-child { margin-bottom: 0; }
/* v2.12.137 — TABLET: stack "The Overview" like mobile (title on top,
description below) across the whole tablet band. It already stacked at
≤900 (see the max-width:900 block); extend that up to 1240 so iPad
landscape (1024/1180) stacks too instead of staying 2-column. Desktop
(≥1241) keeps the 1fr 1.6fr side-by-side. Placed before the ≤768/≤600
gap overrides so those still win on phones. */
@media (max-width: 1240px) {
.work-detail__overview { grid-template-columns: 1fr; gap: 28px; }
}
.work-detail__phones {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 80px;
}
.work-detail__phones > div {
aspect-ratio: 583 / 328;
background: #f0f0f0;
border-radius: 0;
overflow: hidden;
}
.work-detail__phones img {
width: 100%; height: 100%; object-fit: cover;
}
.work-detail__section-h {
font-size: 26px;
font-weight: 600;
line-height: 1.5;
margin: 0 0 32px;
color: var(--color-text);
}
.work-detail__storyboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 80px;
}
.work-detail__storyboard > div {
aspect-ratio: 285 / 161;
background: #d9d9d9;
border-radius: 0;
}
/* Section wrapper — shared spacing for Storyboard / Styleframes / 3D. */
.work-detail__section { margin-bottom: 80px; }
.work-detail__styleframes,
.work-detail__3d {
display: grid;
gap: 20px;
}
.work-detail__sf-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.work-detail__sf-2col > div {
aspect-ratio: 590 / 334;
background: #d9d9d9;
border-radius: 0;
}
.work-detail__sf-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.work-detail__sf-3col > div {
aspect-ratio: 386 / 219;
background: #d9d9d9;
border-radius: 0;
}
.work-detail__sf-6col,
.work-detail__3d-6col {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.work-detail__sf-6col > div,
.work-detail__3d-6col > div {
aspect-ratio: 183 / 103;
background: #d9d9d9;
border-radius: 0;
}
.work-detail__3d-4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.work-detail__3d-4col > div {
aspect-ratio: 285 / 162;
background: #d9d9d9;
border-radius: 0;
}
/* Photo fills each fixed frame, cropped to fit (size frame first, then crop). */
.work-detail__storyboard > div,
.work-detail__sf-2col > div,
.work-detail__sf-3col > div,
.work-detail__sf-6col > div,
.work-detail__3d-6col > div,
.work-detail__3d-4col > div {
overflow: hidden;
}
.work-detail__storyboard > div img,
.work-detail__sf-2col > div img,
.work-detail__sf-3col > div img,
.work-detail__sf-6col > div img,
.work-detail__3d-6col > div img,
.work-detail__3d-4col > div img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Balanced grids (storyboard / styleframes / category) — fixed 16:9 cells,
column count chosen in PHP so rows stay even with no lonely orphan. */
.work-detail__balgrid {
display: grid;
gap: 16px;
margin-bottom: 20px;
}
.work-detail__balgrid:last-child { margin-bottom: 0; }
.work-detail__balgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.work-detail__balgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.work-detail__balgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.work-detail__balgrid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.work-detail__balgrid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.work-detail__balcell {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0;
background: #d9d9d9;
}
.work-detail__balcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v2.9.79 — portfolio detail photos are click-to-zoom (overview / storyboard /
styleframes / category frames). The JS lightbox shows the full-res image. */
.wd-frame { cursor: zoom-in; }
.wd-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 4vmin;
background: rgba(10, 10, 12, 0.92);
opacity: 0;
visibility: hidden;
transition: opacity .28s ease, visibility .28s ease;
cursor: zoom-out;
}
.wd-lightbox.is-open { opacity: 1; visibility: visible; }
.wd-lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 24px 80px -20px rgba(0, 0, 0, 0.7);
transform: scale(.96);
transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.wd-lightbox.is-open img { transform: scale(1); }
.wd-lightbox__close {
position: absolute;
top: 18px; right: 24px;
width: 44px; height: 44px;
border: 0; background: transparent;
color: #fff; font-size: 34px; line-height: 1;
cursor: pointer;
opacity: .85;
}
.wd-lightbox__close:hover { opacity: 1; }
/* feedback P3 — prev/next arrows for stepping through a gallery in the lightbox. */
.wd-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px; height: 56px;
border: 0;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 40px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
opacity: .85;
transition: background-color .2s ease, opacity .2s ease;
z-index: 2;
}
.wd-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); opacity: 1; }
.wd-lightbox__nav--prev { left: 24px; }
.wd-lightbox__nav--next { right: 24px; }
@media (max-width: 600px) {
.wd-lightbox__nav { width: 44px; height: 44px; font-size: 30px; }
.wd-lightbox__nav--prev { left: 10px; }
.wd-lightbox__nav--next { right: 10px; }
}
@media (max-width: 1024px) {
.work-detail__balgrid.cols-4,
.work-detail__balgrid.cols-5,
.work-detail__balgrid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.work-detail__balgrid.cols-3,
.work-detail__balgrid.cols-4,
.work-detail__balgrid.cols-5,
.work-detail__balgrid.cols-6 { grid-template-columns: repeat(2, 1fr); }
}
/* "The Results" — self-hosted result videos, 2-col, natural height. */
.work-detail__videos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.work-detail__videos video {
width: 100%;
height: auto;
display: block;
border-radius: 0;
background: #000;
}
@media (max-width: 700px) {
.work-detail__videos { grid-template-columns: 1fr; }
}
/* Portfolio CTA (reuses .ai-bottom-cta) + bottom nav (back + next project). */
.work-detail__cta { margin: 110px auto 0; padding-bottom: clamp(50px, 7vw, 90px); }
/* Bottom-CTA blue glow (portfolio + blog single only; AI page keeps its aurora).
Pure-CSS blue blob whose CENTRE is moved to the cursor point by JS translate3d
(GPU-cheap, no per-frame re-blur). margin:-450px puts the element centre at the
section (0,0) origin, so translate(x,y) places the glow centre at (x,y).
Section is overflow:visible so the glow can follow the cursor past the box. */
.work-detail__cta.ai-bottom-cta { overflow: visible; }
/* v2.12.123 — tighten the big empty top gap above the portfolio/blog closing CTA
(the cursor-glow one): the nav row → headline space was ~310px (margin 150 +
padding-top up to 160). DESKTOP only; scoped to .work-detail__cta so the AI
page's standalone .ai-bottom-cta spacing stays as-is. Mobile (<=768) untouched. */
@media (min-width: 769px) {
/* v2.12.170 — top gap = margin-top 40 + padding-top clamp(28,60). The CTA is the
LAST section in its article container (.work-detail / .article), whose 120/80px
bottom padding stacked UNDER the CTA made the footer gap ~2× the top. So: CTA
padding-bottom = padding-top (symmetric), AND trim the container bottom to 40
(= the CTA margin-top) → total CTA→footer gap = 40 + clamp = the top gap. */
.work-detail__cta.ai-bottom-cta { margin-top: 40px; padding-top: clamp(28px, 3vw, 60px); padding-bottom: clamp(28px, 3vw, 60px); }
.work-detail, .article { padding-bottom: 40px; }
}
.work-detail__cta__bg {
position: absolute;
top: 0;
left: 0;
width: 900px;
height: 900px;
margin: -450px 0 0 -450px;
z-index: 0;
pointer-events: none;
border-radius: 50%;
background: radial-gradient(circle 450px at center,
rgba(56, 135, 255, 0.32) 0%,
rgba(56, 135, 255, 0.14) 40%,
rgba(56, 135, 255, 0) 70%);
filter: blur(55px);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.work-detail__cta-line {
display: block;
width: clamp(180px, 28vw, 360px);
height: 1px;
margin: 0 auto clamp(28px, 4vw, 48px);
background: rgba(35, 31, 32, 0.18);
position: relative;
z-index: 1;
}
/* CTA typography (portfolio + blog single only — AI page keeps its own sizes).
campaign / story / experience are → italic; colour kept black here
(the AI page's em rule tints them accent). */
.work-detail__cta .ai-bottom-cta__title { font-size: 52px; font-weight: 500; font-family: var(--font-sans); }
/* campaign / story / experience: italic SEMI-BOLD (the rest of the headline stays
medium 500); colour kept black here (the AI-page em rule tints it accent). Force
Figtree so the italic words don't fall back to a system italic. */
.work-detail__cta .ai-bottom-cta__title em { color: inherit; font-weight: 600; font-style: italic; font-family: var(--font-sans); }
.work-detail__cta .ai-bottom-cta__lede { font-size: 18px; }
/* Blog single only: the CTA headline was 66px = LARGER than the article
headline (52px), so the closing CTA out-shouted the page title. Bring it down
to match the .article__title scale so the article headline stays the biggest
element. Scoped under .article → the portfolio CTA keeps 66px (= its own
66.667px page title). Responsive steps mirror .article__title (40/34/28). */
.article .work-detail__cta .ai-bottom-cta__title { font-size: 52px; }
@media (max-width: 600px) {
.work-detail__cta .ai-bottom-cta__title { font-size: 40px; }
.article .work-detail__cta .ai-bottom-cta__title { font-size: 28px; }
.ai-bottom-cta__title { font-size: 40px; }
}
.work-detail__nav {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-top: 90px;
}
.work-detail__back { text-decoration: none; color: var(--color-text); font-weight: 500; font-size: 24px; } /* feedback — bigger */
.work-detail__back:hover { color: var(--color-primary); }
.work-detail__next { margin-left: auto; text-align: right; text-decoration: none; max-width: 60%; }
.work-detail__next-label { display: block; font-weight: 600; font-size: 24px; color: var(--color-primary); } /* feedback — bigger (14→24) */
.work-detail__next-title { display: block; font-size: 16px; color: rgba(35, 31, 32, 0.5); line-height: 1.4; margin-top: 4px; } /* feedback — bigger (12→16) */
.work-detail__next:hover .work-detail__next-title { color: rgba(35, 31, 32, 0.75); }
@media (max-width: 600px) {
/* v2.12.120 — Back + Next on ONE row (not stacked) at 18px so they're side-by-side,
aligned to their margins (Back left, Next right) — no zig-zag. Fonts per user
paste; mobile-scoped so desktop stays 24px. */
.work-detail__nav { flex-direction: row; align-items: flex-start; }
.work-detail__next { margin-left: auto; align-self: auto; text-align: right; max-width: 55%; }
.work-detail__back { font-size: 18px; }
.work-detail__next-label { font-size: 18px; }
.work-detail__next-title { font-size: 14px; }
}
/* "On this page" sticky table-of-contents rail on single posts.
Fixed to the left gutter; fades in once you scroll past the hero and
hides again as you reach the bottom CTA. Auto-built from the article's
H2/H3 headings by the inline script in single.php. */
.article-toc {
position: fixed;
/* v2.12.162/167 — anchored at a FIXED top. The "ON THIS PAGE" eyebrow stays put;
ONLY the heading list below it scrolls (flex column: eyebrow = fixed row,
.article-toc__list = the scroll area). Long lists auto-follow the active heading
via JS (single.php) so the highlight is always visible. Header never moves. */
top: 120px;
left: clamp(20px, 4vw, 56px);
width: clamp(190px, 17vw, 250px);
max-height: calc(100vh - 160px);
display: flex;
flex-direction: column;
z-index: 900;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s ease;
}
.article-toc.is-visible { opacity: 1; visibility: visible; }
/* When the list is taller than 80vh (many/long headings) it scrolls with a
hidden scrollbar — fade the bottom edge so the last item softens out instead
of hard-cropping mid-line. Class toggled by the TOC script when it overflows. */
/* v2.12.167 — when the LIST overflows (JS toggles this on the toc), fade its bottom
edge so the last visible item softens instead of hard-cropping. The eyebrow stays
fixed above it — the earlier "raise the whole rail" (v2.12.165) was removed because
the header must NOT move; only the list scrolls. */
.article-toc.is-scrollable .article-toc__list {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
}
.article-toc__eyebrow {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(35, 31, 32, 0.5);
/* v2.12.167 — a fixed flex row at the top; the list below is what scrolls, so the
"ON THIS PAGE" header never moves. */
flex: 0 0 auto;
margin: 0 0 20px;
}
.article-toc__list {
list-style: none; margin: 0; padding: 0;
/* the ONLY scrolling part of the rail; position:relative so the JS auto-scroll
(li.offsetTop) is measured against the list, not the whole rail. */
position: relative;
flex: 1 1 auto; min-height: 0;
overflow-y: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.article-toc__list::-webkit-scrollbar { width: 0; height: 0; }
.article-toc__item { margin-bottom: 18px; }
.article-toc__item:last-child { margin-bottom: 0; }
.article-toc__link {
/* clamp long headings to 2 lines + ellipsis so each item stays compact and
the whole rail fits the viewport (was wrapping to 3-4 lines → overflow). */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 14px;
line-height: 1.45;
color: rgba(35, 31, 32, 0.55);
text-decoration: none;
padding-left: 14px;
border-left: 2px solid transparent;
transition: color .2s ease, border-color .2s ease;
}
.article-toc__item--h3 .article-toc__link { padding-left: 28px; font-size: 18px; }
.article-toc__link:hover { color: var(--color-text); }
.article-toc__item.is-active .article-toc__link {
color: var(--color-text);
font-weight: 600;
border-left-color: var(--color-primary);
}
@media (max-width: 1180px) { .article-toc { display: none; } }
/* "Share" sticky rail on the right gutter — mirror of the TOC. Social links
+ copy-link + back-to-top. Same fade-in timing as the TOC. */
.article-share {
position: fixed;
/* v2.12.162 — top-anchored to mirror the TOC (was centred), so both rails line
up near the top instead of drifting to the middle. */
top: 120px;
right: clamp(20px, 4vw, 56px);
z-index: 900;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s ease;
}
.article-share.is-visible { opacity: 1; visibility: visible; }
.article-share__label {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: rgba(35, 31, 32, 0.5);
margin-bottom: 4px;
}
.article-share__btn {
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px;
background: rgba(35, 31, 32, 0.05);
color: var(--color-text);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.article-share__btn svg { width: 15px; height: 15px; display: block; }
.article-share__btn:hover { background: var(--color-primary); color: #fff; transform: translateY(-1px); }
.article-share__divider { width: 3px; height: 3px; border-radius: 50%; background: rgba(35, 31, 32, 0.22); margin: 3px 0; }
.article-share.is-copied .article-share__btn[data-copy-link] { background: #2e7d32; color: #fff; }
@media (max-width: 1180px) { .article-share { display: none; } }
/* Hero-video lightbox modal — shared by all portfolio detail pages.
Body gets [data-video-open] when open so we can lock scroll. */
.video-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.video-modal[hidden] { display: none !important; }
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 10, 14, 0.86);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
animation: video-modal-fade .25s ease;
}
.video-modal__panel {
position: relative;
width: min(1200px, 96vw);
max-height: 88vh;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
background: #000;
box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
animation: video-modal-pop .35s cubic-bezier(.2, .7, .2, 1);
}
.video-modal__player {
width: 100%;
height: 100%;
display: block;
background: #000;
}
/* YouTube/Vimeo embeds open in an iframe inside the same panel (main.js injects it). */
.video-modal__iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0; display: block; background: #000;
}
.video-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, .92);
color: #000;
font-size: 26px;
line-height: 1;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, transform .2s ease;
}
.video-modal__close:hover { background: #fff; transform: scale(1.06); }
body[data-video-open] { overflow: hidden; }
@keyframes video-modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes video-modal-pop {
from { opacity: 0; transform: translateY(20px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
.video-modal { padding: 12px; }
.video-modal__close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 22px; }
}
/* =========================================================
BLOG LISTING — Figma 96:1049 ("News, Article & Insights")
========================================================= */
.news {
position: relative;
/* v2.7.0 — wider gutters + roomier top/bottom per user request.
v2.7.69 — bottom slimmed because pagination now carries the
extra margin-top, putting the numbers close to the footer. */
padding: clamp(110px, 14vh, 150px) clamp(56px, 6.5vw, 100px) clamp(70px, 9vh, 110px);
max-width: 1280px;
margin: 0 auto;
}
/* v2.11.67 — fill the empty side gutters on large monitors. Laptops
(≤1500px) keep the 1280 cap untouched; wider screens grow to 90vw
(capped 1760px) so the grid isn't stranded in the centre.
v2.11.68 — same for the /portfolios/ "Selected Works" page.
v2.11.69 — site-wide sweep: portfolio single + AI landing sections.
Deliberately EXCLUDED: .article (blog reading column) and .contact
(form) — a centred column reads better there, so they stay at 1280. */
@media (min-width: 1500px) {
.news,
.works,
.work-detail,
.ai-hero__inner,
.ai-porto,
.ai-approach__inner,
.ai-howit,
.ai-compare,
.ai-wishform__inner { max-width: min(90vw, 1760px); }
}
.news__head {
display: grid;
grid-template-columns: 1fr 400px;
gap: 80px;
align-items: end;
/* v2.7.0 — wider breathing room above featured cards. */
margin-bottom: 100px;
}
.news__title {
font-size: 97.333px;
font-weight: 400;
line-height: 0.905;
letter-spacing: -0.01em;
margin: 0;
color: var(--color-text);
}
.news__title-line2 {
display: block;
font-weight: 500;
color: rgba(35, 31, 32, 0.65);
}
.news__intro {
font-size: 18px; /* feedback — landing right-side intro +2pt so it isn't dwarfed by the headline (14.985→18) */
line-height: 1.5;
margin: 0;
color: var(--color-text);
}
.news__featured {
display: grid;
grid-template-columns: 1fr 1fr;
/* v2.7.0 — wider gap between featured + extra breathing under.
v2.7.69 — bumped per user request for more breathing room. */
gap: 60px;
margin-bottom: 130px;
}
.news__featured-card { display: block; cursor: pointer; }
.news__featured-thumb {
aspect-ratio: 585 / 329;
overflow: hidden;
border-radius: 0;
background: #eaeaea;
margin-bottom: 18px;
}
.news__featured-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.news__featured-card:hover .news__featured-thumb img { transform: scale(1.04); }
.news__featured-title {
font-size: 24px; /* feedback B1 — blog featured title +2pt (21→24) */
font-weight: 500;
line-height: 1.5;
margin: 0 0 10px;
color: var(--color-text);
}
.news__featured-meta,
.news__card-meta {
display: flex;
align-items: center;
gap: 6.5px;
font-size: 16px; /* feedback B1 — blog card meta 14.489→16 */
font-weight: 500;
}
.news__meta-date { color: rgba(35, 31, 32, 0.65); }
.news__meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(35, 31, 32, 0.5); }
.news__meta-cat { color: var(--color-accent); }
.news__grid {
display: grid;
/* v2.11.64 — uniform 3×3 grid (3 columns, 9 cards) per user request;
all cards use the 16:9 thumb + smaller title style. */
grid-template-columns: repeat(3, 1fr);
gap: 64px 40px;
}
.news__card { display: block; cursor: pointer; }
.news__card-thumb {
aspect-ratio: 16 / 9; /* feedback — 16:9 so the SuperPixel watermark/logo in the thumbnail isn't cropped (was 3/2) */
overflow: hidden;
border-radius: 0;
background: #eaeaea;
margin-bottom: 14px;
}
.news__card-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.news__card:hover .news__card-thumb img { transform: scale(1.04); }
/* Sample-mode pages 2–4: "Coming Soon" placeholder thumb (no image). */
.news__thumb--placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
repeating-linear-gradient(135deg, rgba(35,31,32,0.04) 0 12px, rgba(35,31,32,0.07) 12px 24px),
#e9e9e9;
}
.news__placeholder-label {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(35, 31, 32, 0.55);
}
.news__card-thumb.news__thumb--placeholder .news__placeholder-label { font-size: 10px; }
.news__card-title {
font-size: 18px; /* feedback B1 — blog card title (→18) */
font-weight: 500;
line-height: 1.5;
margin: 0 0 6px;
color: var(--color-text);
}
.news__card-meta {
font-size: 15px; /* feedback — blog card date + category +2pt (12→15) */
gap: 6.5px;
}
.news__card-meta .news__meta-dot { width: 3px; height: 3px; }
.news__paging {
display: flex;
justify-content: center;
align-items: center;
/* v2.11.70 — pagination enlarged: 20px numbers in 40px frames, wider gap. */
gap: 24px;
/* v2.7.69 — pushed pagination further down toward the footer
so the numbered row reads as a closing anchor, not midpage. */
margin-top: 160px;
}
.news__paging .page-numbers,
.news__paging-num {
display: inline-flex;
width: 40px; height: 40px;
align-items: center; justify-content: center;
border-radius: 50%;
font-size: 20px;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
background: transparent;
transition: background .2s ease, color .2s ease;
}
.news__paging .page-numbers:hover,
.news__paging-num:hover { background: rgba(35, 31, 32, 0.06); }
.news__paging .page-numbers.current,
.news__paging-num.is-active {
background: var(--color-text);
color: #fff;
}
.news__paging-arrow {
display: inline-flex; width: 40px; height: 40px;
align-items: center; justify-content: center;
color: var(--color-text);
}
.news__paging-arrow::before {
content: ""; width: 0; height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 11px solid currentColor;
}
/* =========================================================
BLOG ARTICLE / SINGLE — Figma 96:1261
========================================================= */
.article {
position: relative;
/* Figma 96:1261 — MAINPAGE container at top:173 from page top.
Sides at left:35 / right:35. */
padding: 173px 35px 80px;
max-width: 1280px;
margin: 0 auto;
overflow: visible;
}
/* Figma 96:1262 — blurred BG_ABOUT US gradient at the top of the article.
Sized 1281×592 (aspect 132/61), 65% opacity, blur 53.282px. The Figma
node imports a baked image (imgBgAboutUs); we recreate the same multi-
blob radial wash with pure CSS so we don't depend on a 7-day-expiring
asset URL — same palette as .about::before for visual consistency. */
.article__bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1281px;
max-width: 100vw;
height: 592px;
aspect-ratio: 132 / 61;
opacity: 0.65;
filter: blur(53.282px);
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle closest-side at 80% 32%, rgba(74, 222, 128, 0.55), transparent 100%),
radial-gradient(circle closest-side at 82% 70%, rgba(96, 165, 250, 0.60), transparent 100%),
radial-gradient(circle closest-side at 55% 50%, rgba(167, 139, 250, 0.28), transparent 100%),
radial-gradient(circle closest-side at 18% 75%, rgba(236, 72, 153, 0.30), transparent 100%);
}
/* Lift all article content above the .article__bg layer. The fixed TOC rail
is excluded — it manages its own position/z-index and must NOT be forced
into the normal flow (else it eats vertical space and pushes content down). */
.article > *:not(.article__bg):not(.article-toc):not(.article-share) { position: relative; z-index: 1; }
.article__head {
display: grid;
grid-template-columns: 1fr 200px;
gap: 40px;
align-items: start;
margin-bottom: 50px;
}
.article__title {
font-size: 52px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0;
max-width: 817px;
color: var(--color-text);
}
.article__meta {
text-align: left;
padding-top: 22px;
font-size: 18px;
line-height: 1.5;
color: var(--color-text);
}
.article__meta-date { font-weight: 400; display: block; margin-bottom: 6px; }
.article__meta-tag { color: rgba(35, 31, 32, 0.65); font-weight: 500; }
.article__hero {
position: relative;
aspect-ratio: 1200 / 675;
overflow: hidden;
border-radius: 0;
background: #1a1a1a;
margin-bottom: 80px;
max-width: 1200px;
margin-left: auto; margin-right: auto;
}
.article__hero img,
.article__hero video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.article__body {
max-width: 700px;
margin: 0 auto;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
font-family: var(--font-sans);
}
/* v2.12.121 — mobile/tablet (<1180px, where the TOC/share side rails are hidden):
the blog body fills the column to the page gutter (20px) instead of sitting as a
700px centred strip, so its RIGHT margin reaches the GET-A-QUOTE header line —
matching the portfolio article. Desktop (>=1180, with the rails) keeps the
centred reading column unchanged. */
@media (max-width: 1180px) {
.article__body { max-width: none; margin: 0; }
}
/* v2.12.148 / v2.12.154 — DESKTOP with the side rails visible (≥1181). The fixed
"ON THIS PAGE" TOC (~250px wide) sits in the LEFT gutter; because the reading
column is CENTRED, on narrower desktops the left gap (TOC→body) shrank to almost
nothing while the right gap (body→SHARE) stayed large — the body read as cramped
INTO the TOC ("mepet"). Scale the reading column with the viewport so the body
ALWAYS keeps a comfortable gap from the TOC. `min()` caps at the 700px design
width on wide screens, and shrinks it below that so the gutters stay clear on
BOTH sides. ≤1180 has no rails → its own rule (max-width:none) applies.
v2.12.159 — the 720px reserve still read too tight beside the TOC (esp. ~1440–1560
where the body hit the 700 cap and the left gap fell to ~54px). Widen the reserve
to 860 so the left gap holds ≥~124px across the band, and add a 460px FLOOR so the
column doesn't get too narrow on smaller desktops (~1181–1330). */
@media (min-width: 1181px) {
/* v2.12.163 — user: the gap TOC→body should EQUAL the gap body→SHARE. The left
rail (TOC, ~250px) is much wider than the right rail (SHARE, ~34px), so a
centred column left a bigger void on the right. Widen the reading column (up
to 900) AND nudge it right toward the SHARE side by ~half the rail-width
difference, so BOTH gaps stay equal across the desktop band. translateX keeps
the shift responsive without disturbing the full-width title/hero. */
.article__body {
max-width: clamp(460px, calc(100vw - 700px), 900px);
transform: translateX(clamp(70px, 7vw, 105px));
}
/* keep the Recent Posts / Writer block (also a narrow centred column) shifted
with the body so the reading column stays aligned end-to-end. */
.article-extra { transform: translateX(clamp(70px, 7vw, 105px)); }
}
/* v2.12.153 — TABLET top gap. The base .article padding-top is 173px (desktop
Figma value) and only dropped to 60px at ≤768 — so the whole 769–1180 tablet
band inherited a ~173px empty strip under the fixed navbar. Bring it in line
with the ≤768 rhythm (and trim the oversized hero/head gaps to match). Desktop
(≥1181) keeps the Figma spacing; phones (≤768) keep their own block. */
@media (min-width: 769px) and (max-width: 1180px) {
.article { padding: 84px 32px 72px; }
/* v2.12.153 — TABLET-ONLY "header lock" gap. Give the masthead (title + meta)
a generous, even gap down to the article content — matching the breathing
room the body has to the share icons on the right (per feedback). Desktop
untouched. */
.article__head { margin-bottom: 56px; }
.article__hero { margin-bottom: 56px; }
}
/* v2.12.84 — force Figtree across the whole blog body. Legacy Squarespace-imported
posts carry inline `font-family` on
//headings (and on .sqs-html-content)
that override inheritance, so the body must win with the site font everywhere. */
.article__body,
.article__body * { font-family: var(--font-sans) !important; }
/* v2.12.153 — even paragraph rhythm. Uniform gap on every new paragraph (was 20px,
felt cramped/uneven next to the heading spacing). Mobile keeps its own smaller
values in the ≤768 / ≤480 blocks below. */
.article__body p { margin: 0 0 24px; line-height: 1.7; }
.article__body p:last-child { margin-bottom: 0; }
/* Safety: any paragraph/heading that ends up empty (stray Squarespace break) must
not add a phantom gap — applied at every width, not just phones. */
.article__body p:empty,
.article__body h1:empty,
.article__body h2:empty,
.article__body h3:empty,
.article__body h4:empty { display: none !important; margin: 0 !important; }
/* v2.11.73 — normalise ~80 legacy Squarespace-imported posts. They carry
wrappers +
inline styles that made their paragraphs wrap/space differently from the
clean Gutenberg posts. Strip the foreign layout so every post reads uniform. */
.article__body .sqs-html-content {
display: block;
max-width: none;
margin: 0;
padding: 0;
font: inherit;
}
.article__body p,
.article__body .sqs-html-content p { white-space: normal !important; }
/* v2.11.74 — also normalise the Squarespace IMAGE blocks in those old posts.
Squarespace uses an intrinsic-ratio trick (a container with inline
padding-bottom + an absolutely-positioned img). Our theme forces img to
width:100%/static, so that padding-bottom became a big empty gap. Kill the
spacer and give the image block the same 36px rhythm as a clean figure. */
.article__body .image-block-outer-wrapper,
.article__body figure.sqs-block-image-figure {
margin: 36px 0 !important;
max-width: 100% !important;
padding: 0;
}
.article__body .image-block-wrapper,
.article__body .sqs-block-content { margin: 0; padding: 0; }
.article__body .sqs-image-shape-container-element {
padding-bottom: 0 !important;
height: auto !important;
position: static !important;
}
.article__body .sqs-image-shape-container-element img,
.article__body .sqs-block-image-figure img {
position: static !important;
width: 100%;
height: auto;
display: block;
}
/* v2.11.76 — heading rhythm modelled on growandbless.com/biaya-website:
BIG gap above a heading (separates it from the previous body text), and a
tight gap below = the SAME as the paragraph gap (1.75rem), so heading→body
reads as one block. Heading line-heights tightened (1.8 was too airy). */
.article__body h1 {
font-size: 40px;
font-weight: 700;
line-height: 1.25;
margin: 56px 0 24px;
}
.article__body h2 {
font-size: 30px;
font-weight: 600;
line-height: 1.3;
margin: 48px 0 20px;
}
.article__body h3 {
font-size: 24px;
font-weight: 600;
line-height: 1.35;
margin: 40px 0 18px;
}
.article__body h4 {
font-size: 20px;
font-weight: 600;
line-height: 1.4;
margin: 32px 0 16px;
}
/* first heading flush with the top — no stray gap at the start of a post */
.article__body > h1:first-child,
.article__body > h2:first-child,
.article__body > h3:first-child,
.article__body > h4:first-child { margin-top: 0; }
/* v2.12.153 — UNIFORM bold in the blog body. Legacy Squarespace-imported posts
carry mixed inline font-weights (700 / 800 / 900-"black") on / and on
inline , so emphasised words rendered heavier in some
posts than others — a few came out fully black. Force ONE weight everywhere (700,
the standard bold, matching the site) so every bold reads the same and never black.
Normal (400/500) inline weights are left alone. */
.article__body strong,
.article__body b,
.article__body strong *,
.article__body b *,
.article__body [style*="font-weight: 700"], .article__body [style*="font-weight:700"],
.article__body [style*="font-weight: 800"], .article__body [style*="font-weight:800"],
.article__body [style*="font-weight: 900"], .article__body [style*="font-weight:900"],
.article__body [style*="font-weight: bold"], .article__body [style*="font-weight:bold"] {
font-weight: 700 !important;
}
.article__body ul,
.article__body ol { padding-left: 27px; margin: 0 0 20px; }
.article__body ul li,
.article__body ol li { margin-bottom: 4px; line-height: 1.7; }
/* Inline body links — clickable + blue highlight (every blog post). Underline
offset 6px / 1px / skip-ink per the site link convention. Image, button and
figure links stay un-tinted so CTA images & embeds are unaffected. */
.article__body a {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
text-decoration-skip-ink: auto;
transition: color .2s ease, text-decoration-color .2s ease;
}
.article__body a:hover,
.article__body a:focus-visible { color: var(--color-primary); }
.article__body a:has(img),
.article__body a.btn,
.article__body figure a {
color: inherit;
text-decoration: none;
}
.article__banner {
position: relative;
background: #d9d9d9;
border-radius: 0;
margin: 36px 0;
display: flex;
align-items: center;
justify-content: center;
}
.article__banner::before {
content: attr(data-label);
color: rgba(0, 0, 0, 0.2);
font-size: 41px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.article__banner--247 { aspect-ratio: 700 / 120; }
.article__banner--169 { aspect-ratio: 700 / 350; }
/* feedback — embedded videos (YouTube/Vimeo oEmbed or a pasted iframe) inside a
blog post render as a clean full-width 16:9 frame, matching the in-article
image banners. Neutralises WP's padding-ratio wrapper so it isn't doubled. */
.article__body .wp-block-embed,
.article__body figure { margin: 36px 0; max-width: 100%; }
/* v2.12.82 — equal gap above/below an in-article banner or video: when a heading
sits directly after one, its big top-margin would stack on the banner's bottom
margin and make the lower gap look bigger. Drop it so both sides read equal. */
.article__body .wp-block-image + h2,
.article__body .wp-block-image + h3,
.article__body figure + h2,
.article__body figure + h3,
.article__body .wp-block-embed + h2,
.article__body .wp-block-embed + h3,
.article__body .yt-facade + h2,
.article__body .yt-facade + h3 { margin-top: 0; }
/* Body images always sit flush with the 700px text column — regardless of the
size (Medium/Large/Full) picked at insert. Covers Gutenberg blocks,
Classic-Editor [caption] wrappers (.wp-caption carries an inline width:NNNpx
that we override), and plain inline . yt-facade thumbs are excluded
(different selector) so the 16:9 video facade keeps its own sizing. */
.article__body .wp-caption,
.article__body figure.wp-block-image,
.article__body figure.aligncenter,
.article__body figure.alignnone { width: 100% !important; max-width: 100%; }
.article__body .wp-caption img,
.article__body figure img,
.article__body p > img,
.article__body > img { display: block; width: 100%; height: auto; }
.article__body .wp-caption-text,
.article__body figcaption { width: 100%; }
.article__body .wp-block-embed__wrapper { position: relative; padding: 0; }
.article__body .wp-block-embed__wrapper::before { content: none; padding: 0; }
.article__body iframe {
display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;
}
/* Body tables — any table (manual, or pasted from Word/Sheets) renders as a
clean grid that fits the 700px column: zebra rows, a shaded header row, even
borders. Inline column widths from pastes are neutralised (width:auto) so
nothing overflows. On phones a wide table scrolls sideways instead of
squashing the page. */
.article__body table {
width: 100% !important;
max-width: 100%;
border-collapse: collapse;
margin: 36px 0;
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
}
.article__body table th,
.article__body table td {
border: 1px solid rgba(35, 31, 32, 0.14);
padding: 12px 16px;
text-align: left;
vertical-align: top;
width: auto !important;
height: auto !important;
}
.article__body table thead th,
.article__body table thead td,
.article__body table tr:first-child th {
background: #f4f4f4;
font-weight: 600;
color: #000;
}
.article__body table tbody tr:nth-child(even) td { background: rgba(35, 31, 32, 0.025); }
.article__body figure.wp-block-table { margin: 36px 0; max-width: 100%; overflow-x: auto; }
.article__body figure.wp-block-table > table { margin: 0; }
@media (max-width: 700px) {
/* v2.12.45 — blog tables SLIDE sideways (like the AI Lab table). Cells get a min-width
so the table is wider than the screen and the block scrolls, instead of squashing
every column into per-word wraps. */
.article__body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article__body table th,
.article__body table td { padding: 10px 12px; min-width: 165px; white-space: normal; }
}
/* YouTube facade — lightweight thumbnail+play swapped in for the heavy player
until the reader clicks (main.js). Cuts blog page-load dramatically. */
.yt-facade {
display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
margin: 36px 0; padding: 0; border: 0; cursor: pointer; background: #000; overflow: hidden;
}
.yt-facade__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade__play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 72px; height: 50px; border-radius: 12px; background: rgba(20, 20, 20, .72);
transition: background .2s ease;
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play { background: #f00; }
.yt-facade__play::after {
content: ""; position: absolute; left: 50%; top: 50%;
transform: translate(-40%, -50%); width: 0; height: 0;
border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.yt-facade__iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 36px 0; }
/* v2.7.13 — Article body images auto-wrapped with /contact/ link by JS.
Slight hover lift so readers can tell the banner is clickable. */
.article__cta-img {
display: block;
cursor: pointer;
transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.article__cta-img:hover { opacity: 0.94; transform: translateY(-2px); }
.article__cta-img img { display: block; width: 100%; height: auto; }
/* =========================================================
BLOG SINGLE — Writer + Recent posts (Figma 381:2271 / 381:2257)
v2.11.16 — divider line (same look as the CTA line) → 32px →
Writer block → 80px → Recent posts. Lives in the 700px body column.
========================================================= */
.article-extra { max-width: 700px; margin: 80px auto 0; }
.article-extra__line {
display: block; width: 100%; height: 1px;
background: rgba(35, 31, 32, 0.18);
margin-bottom: 32px;
}
.article-writer { display: flex; align-items: flex-start; gap: 32px; }
.article-writer__photo {
position: relative;
flex: 0 0 140px; width: 140px; height: 140px;
overflow: hidden; background: #d9d9d9;
}
/* Same recipe as the CTA portraits (v2.9.76): B&W idle solid underneath,
color hover snaps on top (no opacity fade = no ghosting), and only the
zoom-OUT animates (1.06 → 1.0, framing rule scale ≥ 1.0). */
.article-writer__img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
object-position: center 25%;
transform: translateZ(0) scale(1.06);
transition: transform .6s cubic-bezier(.2,.7,.2,1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.article-writer__img--hover { opacity: 0; }
.article-writer__photo:hover .article-writer__img--hover { opacity: 1; }
.article-writer__photo:hover .article-writer__img { transform: translateZ(0) scale(1); }
.article-writer__eyebrow {
margin: 0; font-size: 14px; line-height: 1.8;
text-transform: uppercase; letter-spacing: .04em;
color: var(--color-accent);
}
.article-writer__name { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.6; color: #000; }
.article-writer__name-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.article-writer__name-link:hover { color: var(--color-accent); }
.article-writer__bio { margin: 0; font-size: 15px; line-height: 1.8; color: #535353; }
.article-recent { margin-top: 80px; }
.article-recent__title {
margin: 0 0 24px; font-size: 28px; font-weight: 500;
line-height: 1.8; text-transform: capitalize; color: #000;
}
.article-recent__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-recent__card { display: block; color: inherit; text-decoration: none; }
.article-recent__thumb {
/* 16:9 thumbs; the 3-col 1fr grid keeps the row flush with the 700px
article column on both sides. */
display: block; aspect-ratio: 16 / 9; overflow: hidden;
background: #d9d9d9; border-radius: 0; margin-bottom: 10px;
}
.article-recent__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-recent__name {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: 15px; line-height: 1.5; color: #000;
transition: color .2s ease;
}
.article-recent__card:hover .article-recent__name { color: var(--color-accent); }
.article-recent__date { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: #969696; }
@media (max-width: 768px) {
.article-writer { gap: 20px; }
.article-writer__photo { flex-basis: 96px; width: 96px; height: 96px; }
.article-recent__grid { grid-template-columns: 1fr; gap: 28px; }
}
/* =========================================================
CONTACT / QUOTE — Figma 96:1161
========================================================= */
.contact {
position: relative;
/* v2.7.0 — wider gutters + roomier top/bottom per user request. */
padding: clamp(110px, 14vh, 150px) clamp(56px, 6.5vw, 100px) clamp(140px, 16vh, 180px);
max-width: 1280px;
margin: 0 auto;
}
.contact__head {
display: grid;
grid-template-columns: 1fr 350px;
gap: 100px;
align-items: end;
/* v2.7.0 — extra breathing room before the form. */
margin-bottom: 130px;
}
.contact__title {
font-size: 97.333px;
font-weight: 400;
line-height: 0.905;
letter-spacing: -0.01em;
margin: 0;
max-width: 760px;
}
.contact__title-soft {
font-weight: 500;
color: rgba(35, 31, 32, 0.65);
}
.contact__intro {
font-size: 18px; /* feedback — landing right-side intro +2pt (14.985→18) */
line-height: 1.5;
color: var(--color-text);
margin: 0 0 24px;
max-width: 320px;
}
.contact__form {
/* v2.7.0 — slightly narrower form + roomier vertical gap. */
max-width: 760px;
margin: 0 auto;
display: grid;
gap: 48px;
}
.contact__row { display: grid; gap: 48px; }
.contact__row--2 { grid-template-columns: 1fr 1fr; }
.contact__field { position: relative; }
/* v2.12.97 — `> label` (DIRECT child) so this ONLY styles the real field labels
("Your Name", "Your Email"…). It used to be `.contact__field label`, which also
matched the nested