/* ===========================================================================
MetaTech — navbar and hero
Tailwind (CDN) provides layout utilities. This file owns the depth stack,
the hero background, text-reveal masks, language-aware typography and the
reduced-motion contract.
Palette: navy / white / black. Everything chromatic resolves to a navy
family, so white type always has a clean, high-contrast ground.
=========================================================================== */
:root {
--black: #04060a;
--navy-deep: #071223;
--navy: #0e2247;
--white: #ffffff;
--ink: #ffffff;
--muted: rgba(226, 233, 245, 0.62);
--line: rgba(255, 255, 255, 0.12);
--accent: #ffffff;
--accent-2: #7fa9de;
--nav-h: 76px;
}
/* --- base ---------------------------------------------------------------- */
/* No `scroll-behavior: smooth` here, deliberately. It makes the browser animate
every scroll position this page writes, and the snap tween writes one every
frame — two animations owning scrollTop at once, which on touch reads as the
page stuttering or sliding past where it was meant to stop. The two places
that genuinely want a smooth scroll (anchor navigation, the carousel) ask for
it per call, where it does not collide with anything. */
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var(--black);
color: var(--ink);
font-family:
"Inter",
"Noto Sans Thai",
system-ui,
-apple-system,
sans-serif;
-webkit-font-smoothing: antialiased;
/* `clip`, not `hidden`: overflow:hidden turns body into a scroll container,
which silently breaks the sticky hero. `clip` contains the overflow
without creating one. */
overflow-x: clip;
}
/* Thai needs more leading and no tight tracking — latin display settings crush
the vowel and tone marks that stack above and below the baseline. */
html[data-lang="th"] body {
font-family: "Noto Sans Thai", "Inter", system-ui, sans-serif;
}
html[data-lang="th"] .hero-title,
html[data-lang="th"] .about-title,
html[data-lang="th"] .panel-title {
letter-spacing: 0;
line-height: 1.34;
}
/* Thai stacks vowels and tone marks well above and below the baseline, so the
word mask needs a deeper safe area than latin descenders require. */
html[data-lang="th"] .word {
padding-top: 0.4em;
margin-top: -0.4em;
padding-bottom: 0.34em;
margin-bottom: -0.34em;
}
html[data-lang="th"] .label {
letter-spacing: 0.06em;
text-transform: none;
}
::selection {
background: rgba(127, 169, 222, 0.35);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
border-radius: 4px;
}
/* Keyboard-only escape hatch past the nav. */
.skip-link {
position: fixed;
top: 0;
left: 50%;
translate: -50% -120%;
z-index: 100;
padding: 0.7rem 1.2rem;
background: var(--white);
color: var(--black);
font-size: 0.85rem;
font-weight: 500;
border-radius: 0 0 10px 10px;
transition: translate 0.3s ease;
}
.skip-link:focus-visible {
translate: -50% 0;
}
.label {
font-family: "JetBrains Mono", "Noto Sans Thai", ui-monospace, monospace;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* --- loading screen ------------------------------------------------------
Covers the page until fonts and the hero image are decoded, then lifts as a
curtain. js/main.js removes it from the DOM and always has a hard timeout,
so a stalled asset can never trap the visitor behind it. */
body.is-loading {
overflow: hidden;
}
.preloader {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background: var(--black);
clip-path: inset(0 0 0 0);
}
.preloader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
width: min(280px, 62vw);
}
.preloader-mark {
display: flex;
align-items: center;
gap: 0.65rem;
}
.preloader-mark span {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.95rem;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.preloader-bar {
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.14);
overflow: hidden;
}
.preloader-bar span {
display: block;
height: 100%;
width: 100%;
background: var(--white);
transform: scaleX(0);
transform-origin: left center;
}
.preloader-pct {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.7rem;
letter-spacing: 0.18em;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* --- depth stack ---------------------------------------------------------
0 background · 1 scrims · 2 decorations · 4 text · 5 foreground FX */
.layer {
position: absolute;
inset: 0;
pointer-events: none;
}
.depth-0 {
z-index: 0;
}
.depth-1 {
z-index: 1;
}
.depth-2 {
z-index: 2;
}
.depth-3 {
z-index: 3;
}
.depth-4 {
z-index: 4;
}
.depth-5 {
z-index: 5;
}
.depth-4 > * {
pointer-events: auto;
}
/* --- hero background (depth 0) -------------------------------------------
js/hero-bg.js chooses the presentation and writes it to :
webgl → canvas shows the graded, parallaxed WebGL render
image → the plain ![]()
, parallaxed in CSS (no WebGL, reduced motion, or
a tainted source such as opening the page over file://)
The ![]()
stays laid out in both modes — it is the GL texture source. */
.bg-stage {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: var(--black);
}
.bg-canvas,
.bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease;
}
@keyframes bg-settle {
from {
transform: scale(1.26);
}
to {
transform: scale(1);
}
}
/* Oversized so the CSS parallax never exposes an edge. max-width:none for the
same reason as .panel-media — preflight would otherwise clamp it to 100% and
leave a strip uncovered on the right. */
.bg-image {
inset: -8% -4%;
width: 108%;
max-width: none;
height: 116%;
/* Match the shader grade: strip the source colour back to the navy family. */
filter: saturate(0.8) brightness(0.82) contrast(1.04);
will-change: transform;
/* Mirrors the shader's uIntro so both presentations settle identically. */
animation: bg-settle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html[data-bg="webgl"] .bg-canvas {
opacity: 1;
}
html[data-bg="image"] .bg-image {
opacity: 1;
}
/* The ![]()
path has no shader, so the grade and scrim come from CSS. */
html[data-bg="image"] .bg-stage::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 62% 52% at 50% 46%,
rgba(4, 6, 10, 0.52),
rgba(4, 6, 10, 0.24) 55%,
transparent 78%
),
linear-gradient(180deg, rgba(14, 34, 71, 0.22), rgba(4, 6, 10, 0.34));
}
/* Curved, blurred dark base. Sits above the background but below the copy, so
the hero dissolves into the next section along an arc instead of a hard edge.
Wider than the viewport so the arc's ends never show. */
.hero-curve {
position: absolute;
left: -25%;
right: -25%;
bottom: -14vh;
height: 34vh;
z-index: 3;
background: var(--black);
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
filter: blur(34px);
pointer-events: none;
}
/* --- scrims (depth 1) ---------------------------------------------------- */
.scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(4, 6, 10, 0.62) 0%, transparent 26%),
linear-gradient(
to top,
rgba(4, 6, 10, 0.55) 0%,
rgba(4, 6, 10, 0.12) 26%,
transparent 48%
);
}
.glow {
position: absolute;
border-radius: 50%;
filter: blur(110px);
opacity: 0.34;
will-change: transform;
}
.glow-warm {
width: 44vw;
height: 44vw;
left: 50%;
top: 56%;
translate: -50% -50%;
background: radial-gradient(circle, rgba(23, 53, 99, 0.75), transparent 68%);
}
.glow-cool {
width: 38vw;
height: 38vw;
left: 14%;
top: 16%;
background: radial-gradient(
circle,
rgba(127, 169, 222, 0.3),
transparent 70%
);
}
/* --- orbit ring decorations (depth 2) ------------------------------------
Two nested elements on purpose: .orbit-wrap is driven by the pointer,
.orbit-rings by ScrollTrigger. One transform owner each. */
.orbit-wrap {
position: absolute;
inset: 0;
will-change: transform;
}
.orbit-rings {
position: absolute;
left: 50%;
top: 50%;
width: min(140vh, 140vw);
aspect-ratio: 1;
translate: -50% -50%;
opacity: 0.4;
}
.orbit-rings circle {
fill: none;
stroke: rgba(190, 215, 255, 0.13);
stroke-width: 0.3;
}
.orbit-rings .ring-dashed {
stroke-dasharray: 1 3.6;
stroke: rgba(127, 169, 222, 0.24);
}
/* --- navbar -------------------------------------------------------------- */
.nav {
transition:
background-color 0.45s ease,
backdrop-filter 0.45s ease,
border-color 0.45s ease;
border-bottom: 1px solid transparent;
}
.nav.is-stuck {
background: rgba(4, 6, 10, 0.74);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom-color: var(--line);
}
.nav-link {
position: relative;
color: var(--muted);
/* The hit area was the text box alone, which on a 14px label is a ~19px
tall target — hover flickered whenever the pointer drifted a couple of
pixels. Padding it out gives the link a real target without moving it,
since the nav row centres its children either way. */
padding: 0.4rem 0.1rem;
transition: color 0.3s ease;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0.15rem;
width: 100%;
height: 1.5px;
border-radius: 2px;
background: var(--white);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-link:hover,
.nav-link:focus-visible {
color: var(--ink);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.42rem 0.85rem;
color: var(--muted);
transition:
color 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease;
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
color: var(--ink);
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.1);
}
/* Filled CTA. Hover inverts it to navy: the previous state was a 2px lift
plus a translucent sweep over a white pill, which on a photographic hero
was very nearly invisible — the button read as not responding at all. */
.btn-primary {
position: relative;
overflow: hidden;
background: var(--white);
color: var(--black);
border-radius: 999px;
transition:
transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
background-color 0.35s ease,
color 0.35s ease,
box-shadow 0.35s ease;
}
.btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent 20%,
rgba(255, 255, 255, 0.45) 50%,
transparent 80%
);
transform: translateX(-110%);
/* Deliberately NOT transitioned at rest. The sweep is a one-way gesture,
and a transition declared here applies to the return trip too — leaving
the pointer replayed the highlight backwards across the button every
time. Declaring it only in :hover means the reset is instant. */
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: var(--navy);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 14px 34px -12px rgba(14, 34, 71, 0.85);
}
.btn-primary:hover::before,
.btn-primary:focus-visible::before {
transform: translateX(110%);
transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-primary > span {
position: relative;
z-index: 1;
}
.btn-ghost {
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
color: var(--ink);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition:
border-color 0.35s ease,
background-color 0.35s ease,
transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
border-color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.16);
transform: translateY(-2px);
}
/* The arrow leans into the direction of travel. */
.btn-ghost svg {
transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.btn-ghost:hover svg,
.btn-ghost:focus-visible svg {
transform: translateX(4px);
}
/* --- mobile menu --------------------------------------------------------- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(4, 6, 10, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
clip-path: inset(0 0 100% 0);
visibility: hidden;
transition:
clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1),
visibility 0s linear 0.7s;
}
.mobile-menu.is-open {
clip-path: inset(0 0 0 0);
visibility: visible;
transition:
clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1),
visibility 0s;
}
.mobile-menu a {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.5s ease,
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.is-open a {
opacity: 1;
transform: none;
}
.mobile-menu.is-open a:nth-child(1) {
transition-delay: 0.18s;
}
.mobile-menu.is-open a:nth-child(2) {
transition-delay: 0.25s;
}
.mobile-menu.is-open a:nth-child(3) {
transition-delay: 0.32s;
}
.mobile-menu.is-open a:nth-child(4) {
transition-delay: 0.39s;
}
/* These links had no interaction state at all. Scoped to .is-open so it can
override the closed state's own transform rather than fighting it.
transition-delay is reset because the staggered entry delays above apply
to every transition on the element, hover included — without this the
link lags up to 0.4s behind the pointer. */
.mobile-menu.is-open a:hover,
.mobile-menu.is-open a:focus-visible {
transform: translateX(10px);
color: var(--accent-2);
transition-delay: 0s;
}
.burger span {
display: block;
height: 1.5px;
background: var(--ink);
transition:
transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
opacity 0.25s ease;
}
.burger.is-open span:nth-child(1) {
transform: translateY(5.5px) rotate(45deg);
}
.burger.is-open span:nth-child(2) {
opacity: 0;
}
.burger.is-open span:nth-child(3) {
transform: translateY(-5.5px) rotate(-45deg);
}
/* --- hero ---------------------------------------------------------------- */
/* Sticky, so that a section added after the hero is dragged up over it while
the hero "freezes". Sticky rather than a ScrollTrigger pin on purpose:
pinSpacing:false would take the hero out of flow, letting the next section
jump up and cover it at scroll 0. */
#hero {
position: sticky;
top: 0;
height: 100svh;
z-index: 1;
}
.hero-title {
font-size: clamp(2.35rem, 5.4vw, 4.9rem);
line-height: 1.04;
letter-spacing: -0.033em;
font-weight: 600;
text-wrap: balance;
text-shadow:
0 2px 30px rgba(4, 6, 10, 0.85),
0 1px 4px rgba(4, 6, 10, 0.5);
}
/* Accent phrase inside the headline. Solid colour is the base state, so it is
never invisible. The gradient is layered on only where text-clipping is
supported, and is applied to .word-inner — the element that actually holds
the glyphs. Chrome clips nothing when background-clip:text sits on an inline
whose children are inline-block word wrappers. */
.hero-title em,
.about-title em {
font-style: normal;
color: var(--accent-2);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-title em,
.hero-title em .word-inner,
.about-title em,
.about-title em .word-inner {
background-image: linear-gradient(
105deg,
#ffffff 0%,
#cfe0f5 40%,
var(--accent-2) 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
/* Word-mask reveal. The vertical padding leaves room for Thai marks and latin
descenders, then is pulled back with a negative margin so metrics hold. */
.word {
display: inline-block;
overflow: hidden;
padding-top: 0.22em;
margin-top: -0.22em;
padding-bottom: 0.16em;
margin-bottom: -0.16em;
vertical-align: bottom;
}
.word-inner {
display: inline-block;
will-change: transform;
}
.hero-sub {
color: rgba(240, 244, 252, 0.86);
font-size: clamp(1rem, 1.35vw, 1.18rem);
line-height: 1.7;
text-wrap: pretty;
text-shadow:
0 1px 18px rgba(4, 6, 10, 0.95),
0 1px 3px rgba(4, 6, 10, 0.7);
}
/* --- scroll cue ---------------------------------------------------------- */
.scroll-cue .rail {
width: 1px;
height: 54px;
background: linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.45),
transparent
);
position: relative;
overflow: hidden;
}
.scroll-cue .rail::after {
content: "";
position: absolute;
inset-inline: 0;
top: -50%;
height: 50%;
background: linear-gradient(to bottom, transparent, var(--white));
animation: rail-run 2.4s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes rail-run {
0% {
transform: translateY(0);
opacity: 0;
}
25% {
opacity: 1;
}
100% {
transform: translateY(300%);
opacity: 0;
}
}
/* --- pre-animation state -------------------------------------------------
Set by JS (html.js-ready) so visitors without JS still see everything. */
/* The hero intro's pre-animation state. Every element the intro timeline
touches must be listed here, and the hero headline must already be split into
.word-inner spans before the loading screen lifts — otherwise this selector
matches nothing at reveal time and the copy flashes in unstyled before the
animation yanks it back to hidden.
Scoped to .hero-title on purpose: unscoped it would also hold the #about
headline hidden until the hero timeline finished, though that section owns
its own entry. */
.js-ready .reveal-up,
.js-ready .nav-inner,
.js-ready .hero-title .word-inner {
opacity: 0;
}
/* Touch devices: cheaper blurs, no backdrop filters, no per-element layers.
Everything below is a compositing cost rather than a download cost — the
sort of work that stays invisible on a desktop GPU and dominates the frame
budget on a phone. The visual difference in each case is small; the cost is
not. */
@media (pointer: coarse) {
.glow {
filter: blur(70px);
opacity: 0.28;
}
/* These four are the hero's pointer-parallax layers, and touch has no
pointer parallax any more (the tilt-driven version was removed — see
initParallax). `will-change: transform` on a layer that never moves is
pure cost: it reserves a compositor layer for the lifetime of the page,
and on .glow that layer is a blurred full-bleed circle. Promoting it buys
nothing when there is no transform coming. */
.glow,
.orbit-wrap,
.hero-inner {
will-change: auto;
}
.btn-ghost {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* A backdrop-filter on a FIXED bar re-blurs whatever is behind it on every
scrolled frame, for the whole length of the page. The bar is already 74%
opaque, so going fully opaque costs almost nothing to look at. */
.nav.is-stuck {
background: rgba(4, 6, 10, 0.94);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.mobile-menu {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* --- about: centred statement -------------------------------------------
Opaque and above the sticky hero, so scrolling drags it up over the frozen
hero — this is the section the hero's freeze exists for. */
/* Sticky for the same reason the hero is: it freezes while the first panel
is revealed over the top of it. */
#about {
position: sticky;
top: 0;
z-index: 2;
background: var(--black);
height: 100svh;
display: flex;
align-items: center;
border-top: 1px solid var(--line);
}
.about-title {
font-size: clamp(1.9rem, 4.4vw, 4rem);
line-height: 1.14;
letter-spacing: -0.03em;
font-weight: 600;
text-wrap: balance;
}
.about-body {
color: var(--muted);
font-size: clamp(1rem, 1.35vw, 1.15rem);
line-height: 1.75;
text-wrap: pretty;
}
/* Position markers for snapping. GSAP ScrollTrigger reads their offsets; there
is deliberately no CSS scroll-snap-type, because mandatory snapping refuses to
rest mid-wipe and proximity fights the scrub. One marker per section, and the
hero has none, so snapping begins at the second section. */
.snap-stop {
position: absolute;
inset-inline: 0;
height: 1px;
pointer-events: none;
/* Mid-dwell: after the wipe and copy have landed, before the panel releases. */
top: 130svh;
}
.snap-stop-lead {
top: 0;
}
/* --- panels: wipe reveal ----------------------------------------------
The track provides the scroll room; the panel is sticky inside it, so it
holds still while GSAP scrubs its clip-path open from left to right.
The closed clip-path is set in JS, never here: baked into CSS it would leave
the panel permanently invisible if the animation library failed to load. */
/* The negative margin overlaps #about's own flow region, so the panel is
already stuck at top:0 the moment #about freezes. Without it the panel has to
travel a full viewport before it can stick, and that approach is dead scroll:
#about frozen, panel still clipped shut, nothing happening. */
.panel-track {
position: relative;
z-index: 3;
height: 340svh;
/* First track only: overlap #about's flow so the panel is already stuck at
top:0 the moment #about freezes. Without it the panel must travel a full
viewport first, and that approach is dead scroll. */
margin-top: -100svh;
}
/* Subsequent tracks overlap far harder, so the panel underneath stays frozen
until the incoming one has fully wiped over it. At -100svh each panel
released exactly as the next began, so the outgoing panel slid away
mid-wipe and exposed the section beneath — three layers moving at once.
Geometry, in viewport units: a panel is stuck for (height - 100) and the next
track starts at (height - margin). Holding the lower panel until the incoming
wipe finishes needs margin >= 205; leaving it a readable beat first needs
height >= margin + 135. */
.panel-track + .panel-track {
margin-top: -215svh;
}
.panel-scene {
position: sticky;
top: 0;
height: 100svh;
overflow: hidden;
display: flex;
align-items: center;
background: var(--black);
}
/* Oversized so the counter-drift during the wipe never exposes an edge.
max-width:none is required, not cosmetic: Tailwind's preflight sets
`img { max-width: 100% }`, which silently clamps this back to the panel width.
The drift then has no overhang to move into and leaves a bare strip down one
side. Overhang is 12% each side to cover a 9%-of-own-width drift. */
.panel-media {
position: absolute;
inset: 0 -12%;
width: 124%;
max-width: none;
height: 100%;
object-fit: cover;
will-change: transform;
}
.panel-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
100deg,
rgba(4, 6, 10, 0.9) 0%,
rgba(7, 18, 35, 0.62) 46%,
rgba(14, 34, 71, 0.2) 100%
),
linear-gradient(to top, rgba(4, 6, 10, 0.85), transparent 46%);
}
/* Grain sits on the overlay so it survives swapping the photograph. */
.panel-overlay::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.14;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel-ghost {
position: absolute;
right: -1vw;
bottom: -4vh;
font-size: clamp(11rem, 28vw, 28rem);
font-weight: 700;
line-height: 0.8;
letter-spacing: -0.06em;
color: rgba(255, 255, 255, 0.05);
pointer-events: none;
user-select: none;
z-index: 1;
}
.panel-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: clamp(1.5rem, 6vw, 7rem);
}
.panel-title {
font-size: clamp(2.6rem, 7vw, 6.4rem);
line-height: 1;
letter-spacing: -0.035em;
font-weight: 600;
}
.panel-desc {
color: var(--muted);
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.7;
max-width: 46ch;
}
/* --- projects: horizontal drag carousel -----------------------------------
Deliberately NOT part of the vertical panel/snap system above — this
section scrolls normally with the page. Its own track scrolls horizontally
on native overflow (so touch users get real momentum scrolling for free);
js/main.js layers a pointer-drag affordance on top for mouse users only.
The background crossfades to match the centred card via the
[data-active-project] attribute js/main.js keeps on the section — pure CSS
attribute-selector crossfade, no per-frame animation work. */
.projects-section {
/* Sticky, not relative: this section freezes at the top of the viewport
while the CTA track that follows it is dragged up over it — the same
handoff the hero uses for #about. It releases on its own once
ends, which hands the scroll to the footer. */
position: sticky;
top: 0;
z-index: 2;
height: 100svh;
display: flex;
flex-direction: column;
background: var(--black);
overflow: hidden;
/* Fixed top gutter (not flex-centred) so the head can never end up under the
fixed nav regardless of head height across languages; bottom is a smaller
fixed breathing gap. The track fills and vertically centres in whatever
is left, via flex below. */
padding-top: clamp(5.5rem, 12vh, 7.5rem);
padding-bottom: clamp(1.25rem, 4vh, 2.5rem);
}
.projects-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.projects-bg-layer {
position: absolute;
/* Oversized past the section edge, not flush inset:0 — blur() samples
outside its own box, and the JS-driven pan shifts this element up to
22px besides. Flush edges would expose a soft gap of bare black at
whichever side the blur and pan combine against; the same problem this
codebase already solved the same way for .panel-media and .bg-image. */
inset: -40px;
opacity: 0;
background-size: cover;
background-position: center;
/* Soft-focus on purpose: this is meant to read as atmosphere behind the
sharp foreground card, not as a second place to read the screenshot. */
filter: blur(8px) saturate(0.85);
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
/* No transform or transform-transition here on purpose: js/main.js drives
scale + translateX on whichever layer is active, continuously, every
scroll tick, so the background visibly pans and breathes in sync with the
card drag rather than only crossfading at the moment focus changes. A CSS
transition on transform would fight that per-frame write and turn into
stutter — see initProjectsCarousel's updateActive. */
}
/* One rule per card index — attribute selector on the ancestor section drives
which layer is visible, so the crossfade needs no JS beyond flipping the
data attribute. */
.projects-section[data-active-project="0"]
.projects-bg-layer[data-bg-index="0"],
.projects-section[data-active-project="1"]
.projects-bg-layer[data-bg-index="1"],
.projects-section[data-active-project="2"]
.projects-bg-layer[data-bg-index="2"],
.projects-section[data-active-project="3"]
.projects-bg-layer[data-bg-index="3"],
.projects-section[data-active-project="4"]
.projects-bg-layer[data-bg-index="4"],
.projects-section[data-active-project="5"]
.projects-bg-layer[data-bg-index="5"],
.projects-section[data-active-project="6"]
.projects-bg-layer[data-bg-index="6"] {
/* Kept modest on purpose: some source screenshots are mostly white
(a calendar UI, a light dashboard), and at higher opacity those wash out
against the dark theme far more than the darker photos do — the scrim
below adds a fixed darkening on top so brightness stays roughly even
across every project regardless of what colour its screenshot happens
to be. */
opacity: 0.4;
}
.projects-bg-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
var(--black) 0%,
transparent 16%,
transparent 78%,
var(--black) 100%
),
rgba(4, 6, 10, 0.5);
}
.projects-bg-scrim::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.12;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Five on-brand gradient placeholders, standing in for real project
photography. Card thumbnail and expanded background reuse the same
gradient per index, so the background reads as the card "opening up"
rather than an unrelated swap. */
.proj-01 {
background: radial-gradient(
120% 130% at 20% 15%,
#1c3a6e 0%,
#0b1830 55%,
#04060a 100%
);
}
.proj-02 {
background: radial-gradient(
120% 130% at 80% 20%,
#14524f 0%,
#0a2223 55%,
#04060a 100%
);
}
.proj-03 {
background: radial-gradient(
120% 130% at 25% 85%,
#6b4a1e 0%,
#2a1d0e 55%,
#04060a 100%
);
}
.proj-04 {
background: radial-gradient(
120% 130% at 75% 80%,
#3a2a63 0%,
#1a1330 55%,
#04060a 100%
);
}
.proj-05 {
background: radial-gradient(
120% 130% at 50% 50%,
#33506e 0%,
#16273a 55%,
#04060a 100%
);
}
.proj-06 {
background: radial-gradient(
120% 130% at 70% 25%,
#5e4a12 0%,
#26200c 55%,
#04060a 100%
);
}
.proj-07 {
background: radial-gradient(
120% 130% at 30% 75%,
#1e5a52 0%,
#0c2622 55%,
#04060a 100%
);
}
.projects-head {
position: relative;
z-index: 2;
flex-shrink: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
max-width: 1400px;
margin-inline: auto;
width: 100%;
padding-inline: clamp(1.5rem, 5vw, 2.5rem);
margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}
.projects-title {
font-size: clamp(1.7rem, 3.6vw, 2.75rem);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 600;
}
.projects-sub {
color: var(--muted);
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.65;
max-width: 40ch;
}
.projects-nav-btns {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.projects-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
transition:
color 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease,
transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.projects-arrow:hover {
color: var(--ink);
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.07);
transform: translateY(-2px);
}
.projects-arrow:active {
transform: translateY(0) scale(0.94);
}
.projects-arrow:disabled {
opacity: 0.3;
pointer-events: none;
}
.projects-track-wrap {
position: relative;
z-index: 2;
/* Fills whatever height is left below the head and centres the (shorter)
track within it, so cards sit in the vertical middle of the section
rather than pinned to its top. */
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
/* Both axes, deliberately. This was `pan-y`, which permits ONLY vertical
panning — so the browser refused to scroll this element horizontally on
touch. That would be right if JS owned the horizontal gesture, but
initProjectsCarousel excludes touch from its pointer-drag on purpose and
leaves horizontal scrolling to the browser, so `pan-y` left the carousel
completely unswipeable on a phone: the arrows were the only way to move
it. `pan-x pan-y` gives the element the horizontal gesture and still
lets a vertical swipe scroll the page through it. */
touch-action: pan-x pan-y;
outline-offset: 6px;
}
.projects-track-wrap::-webkit-scrollbar {
display: none;
}
/* Disabled mid-drag: fighting a proximity snap while a pointer is actively
setting scrollLeft makes the drag feel like it is catching on rails. */
.projects-track-wrap.is-dragging {
scroll-snap-type: none;
}
@media (pointer: fine) {
/* The native cursor is replaced entirely by .drag-cursor below. */
.projects-track-wrap {
cursor: none;
}
}
/* Custom cursor: a small circle that follows the pointer with an eased lerp
(same follow technique as the hero's pointer parallax) while hovering the
carousel — js/main.js toggles .is-visible on pointerenter/leave and writes
left/top every frame. Left/top are never CSS-transitioned (that would lag
behind the JS easing, which is already doing the smoothing); only the
reveal/dismiss and the drag-state scale are.
Touch has no persistent hover/pointer to follow, so this stays hidden there
— .projects-track-wrap keeps its native touch-scroll cursor affordance,
there is nothing this circle could usefully show. */
.drag-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 84px;
height: 84px;
margin: -42px 0 0 -42px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--black);
display: none;
align-items: center;
justify-content: center;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
pointer-events: none;
opacity: 0;
transform: scale(0.4);
transition:
opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.drag-cursor.is-visible {
opacity: 1;
transform: scale(1);
}
.drag-cursor.is-active {
transform: scale(0.82);
}
@media (pointer: fine) {
.drag-cursor {
display: flex;
}
}
.projects-track {
display: flex;
align-items: center;
gap: clamp(1rem, 2.5vw, 2rem);
width: max-content;
/* Inline padding is set by JS to (wrap width / 2 − card width / 2), so the
first and last cards can still reach dead centre like every card between
them — a fixed padding could not do this across breakpoints. */
}
.project-card {
position: relative;
flex: 0 0 auto;
/* Height-driven, not width-driven: the section is a fixed 100svh, so cards
must size to whatever vertical room is actually left rather than to
viewport width, or they would overflow the section on short/wide
viewports (landscape phones, short laptop screens). Landscape 16:9 to
match the source screenshots — width follows from the height cap. */
height: min(42vh, 460px);
width: auto;
aspect-ratio: 16 / 9;
/* Backstop on the height-driven width: a tall, narrow viewport just above
the mobile breakpoint (tablet portrait) resolves 42vh at 16:9 to within
a few px of the full viewport width — no peek of the next card, and one
step taller tips it into overflowing. Never binds on desktop, where the
derived width is far under this. */
max-width: 88vw;
border-radius: 1.25rem;
overflow: hidden;
scroll-snap-align: center;
opacity: 0.5;
transform: scale(0.92);
transform-origin: 50% 50%;
filter: saturate(0.65) brightness(0.7);
transition:
opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.project-card.is-focus {
opacity: 1;
transform: scale(1);
filter: saturate(1) brightness(1);
}
/* media/overlay/view/body are direct children of .project-card (already
position:relative), not wrapped in a card-wide link — only .project-card-view
below is an . This is deliberate: dragging anywhere else on the card (the
photo, the title, the empty overlay) must be pure drag surface, never
competing with a click target, matching/undoing the wipe-suppression dance
a card-wide link would otherwise need. */
/* .project-card-media is a real ![]()
— object-fit is what actually crops and
fills it; background-size/position are kept alongside as a harmless no-op
so this class still works if a card is ever swapped back to a plain div.
draggable="false" (in the HTML) stops the browser's native "drag this
image" gesture — the default behaviour for any ![]()
— from competing with
the carousel's own pointer-drag for the same mousedown+move; user-drag/
user-select back it up for engines that still act on the CSS properties. */
/* The exists only to pick a format/size — it must not become a box.
Without this it would sit between .project-card and .project-card-media and
take the img's place in layout: on mobile the card is a flex column and the
media is its flex item, so the picture would have become the item and the
img would size to an inline wrapper instead of the card. display:contents
drops the wrapper entirely, leaving every existing rule pointing at the img
still correct in both layouts. */
.project-card-picture {
display: contents;
}
.project-card-media {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background-size: cover;
background-position: center;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
.project-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(4, 6, 10, 0.94) 0%,
rgba(4, 6, 10, 0.18) 55%,
transparent 75%
);
}
/* The ONLY clickable element in a card — everywhere else is drag surface.
Revealed on hover/focus for mouse/keyboard, AND whenever the carousel's own
drag-tracking marks this card as the centred one — the latter is what makes
it discoverable on touch, where :hover doesn't meaningfully exist.
cursor:pointer overrides the wrap's cursor:none (the custom .drag-cursor
circle) specifically here — js/main.js also hides that circle on
pointerenter/leave of this element, since "Drag" makes no sense over the
one thing on the card you are meant to click, not drag. */
.project-card-view {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.4rem;
border-radius: 999px;
background: rgba(4, 6, 10, 0.5);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--white);
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
opacity: 0;
transform: translate(-50%, -50%) scale(0.85);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.3s ease,
border-color 0.3s ease;
}
.project-card-view:focus-visible,
.project-card.is-focus .project-card-view {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* :hover reaches the button even on a card that is not the centred one —
dragging is unaffected since this is a distinct element from the drag
surface, not a state of the card itself. */
.project-card-view:hover {
opacity: 1;
transform: translate(-50%, -50%) scale(1.06);
background: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.96);
color: var(--black);
}
.project-card-body {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding: 1.5rem 1.6rem;
}
.project-card-index {
display: block;
font-size: 10px;
color: rgba(127, 169, 222, 0.85);
margin-bottom: 0.6rem;
}
.project-card-title {
font-size: clamp(1.2rem, 2.2vw, 1.55rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
}
.project-card-tag {
color: var(--muted);
font-size: 0.85rem;
margin-top: 0.35rem;
}
/* --- projects: narrow viewports -------------------------------------------
.project-card above is height-driven on purpose — the section is a fixed
100svh, so a width-driven card would overflow it on short/wide viewports.
On a tall narrow phone that same rule inverts into the opposite failure:
42vh of height at 16:9 resolves to a ~630px card on a 390px screen, so the
card was cropped at BOTH edges at once and .project-card-body — which sits
at the card's bottom-left — was pushed off-frame entirely. The project's
name, index and tag were simply not on screen.
Below the breakpoint the card is width-driven instead, sized to leave a
sliver of the next one visible as the swipe affordance. */
@media (max-width: 767px) {
.projects-section {
padding-top: clamp(4.75rem, 10vh, 6rem);
}
/* Headline and copy take the full width; the arrows drop to their own row
rather than squeezing the title into the ~210px left beside them. */
.projects-head {
flex-direction: column;
align-items: stretch;
gap: 1rem;
margin-bottom: 1.25rem;
}
.projects-nav-btns {
align-self: flex-end;
}
.projects-sub {
max-width: none;
}
/* Width-driven, and the height follows from the content rather than being
pinned to the section. Sizing the card to fill the available height
instead made it near-square, and object-fit:cover then cropped these
16:9 screenshots to roughly the middle half of their width — which on
the lighter projects is page margin, so the card showed an almost empty
rectangle with no sign of the work in it. */
.project-card {
/* 84 rather than 88vw: the leftover margin is what leaves an edge of the
next card showing, and that sliver is the only cue that the row swipes
at all — there are no hover affordances on touch. */
width: min(84vw, 460px);
height: auto;
aspect-ratio: auto;
display: flex;
flex-direction: column;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.045);
border: 1px solid var(--line);
}
/* Back into flow at its own 16:9, so the screenshot is shown whole. */
.project-card-media {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
/* The copy has its own ground below the image now, so there is nothing
left for the gradient to separate it from. */
.project-card-overlay {
display: none;
}
.project-card-body {
position: relative;
inset: auto;
padding: 0.9rem 1rem 1rem;
}
.project-card-title {
font-size: 1.1rem;
}
.project-card-tag {
font-size: 0.8rem;
}
.project-card-index {
margin-bottom: 0.4rem;
}
/* Centred on the image rather than on the whole card, which now includes
the copy block below it — at 50% the button straddled the two. */
.project-card-view {
top: 28%;
}
}
/* NOTE: `scroll-snap-type: x mandatory` was tried here for touch, so a swipe
always settles on a card rather than being free to rest between two. It is
deliberately NOT shipped: mandatory is the strictest mode about
programmatic scrollLeft writes, and initProjectsCarousel's loop recentring
writes scrollLeft mid-scroll (updateActive, `wrap.scrollLeft += w`) on
every touch scroll. Whether the two fight cannot be established in this
project's headless test setup, which does not drive touch scrolling at all
— snap none/proximity/mandatory all produce an identical, immobile
scrollLeft. Proximity stays until it can be checked on a real device;
with cards at 84vw a flick lands near a snap point almost every time
anyway, so the practical difference is small. */
/* --- services / packages: the price list -----------------------------------
The only section in that is neither sticky nor pinned — a plain,
content-height block that scrolls normally. What makes it read as part of
the same choreography is the stacking: z-index 3 puts it above the frozen
carousel (z-index 2), so it is dragged up over it and later pulled off it,
the same gesture #about performs on the hero. Nothing about that needs JS,
which is why the whole section survives with GSAP absent.
Its own background is opaque on purpose: at any moment during that drag,
the carousel is still painting directly behind it. */
.services-section {
position: relative;
z-index: 3;
background: var(--black);
/* The glow below is oversized and bleeds past the section edge. */
overflow: hidden;
/* Top clears the fixed navbar with room to spare, since an anchor jump to
#services lands on the section's own top edge. */
padding-block: clamp(5.5rem, 12vh, 9rem);
}
/* A single navy wash behind the middle of the grid, so the plans sit on a
ground rather than on flat black — the same trick .glow plays in the hero,
at a fraction of the size. */
.services-glow {
position: absolute;
left: 50%;
top: 22%;
width: min(1100px, 120vw);
aspect-ratio: 1;
translate: -50% 0;
background: radial-gradient(
circle,
rgba(14, 34, 71, 0.85) 0%,
rgba(7, 18, 35, 0.45) 45%,
transparent 70%
);
pointer-events: none;
}
.services-inner {
position: relative;
z-index: 1;
max-width: 1400px;
margin-inline: auto;
padding-inline: clamp(1.5rem, 5vw, 2.5rem);
}
.services-head {
max-width: 46rem;
margin-inline: auto;
text-align: center;
margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.services-title {
font-size: clamp(1.8rem, 4vw, 3rem);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 600;
}
.services-title em {
font-style: normal;
background: linear-gradient(100deg, var(--accent-2), var(--white));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.services-sub {
color: var(--muted);
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.7;
margin-top: 1.1rem;
}
/* --- the three plans -------------------------------------------------------
Equal columns, and the cards stretch to the tallest of the three: the
feature lists differ in length across languages, and a ragged bottom edge
would put the three prices and the three buttons on different lines. */
.plans-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 1.6vw, 1.5rem);
align-items: stretch;
}
.plan-card {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(1.6rem, 2.2vw, 2.2rem);
border: 1px solid var(--line);
border-radius: 1.25rem;
background: rgba(255, 255, 255, 0.04);
transition:
border-color 0.4s ease,
background-color 0.4s ease,
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.plan-card:hover {
border-color: color-mix(in srgb, var(--plan-accent) 45%, transparent);
background: rgba(255, 255, 255, 0.06);
transform: translateY(-4px);
}
/* The recommended plan: lifted, framed in its own accent, and given a tinted
ground so the choice is legible before any of the copy is read. */
.plan-card.is-featured {
border-color: color-mix(in srgb, var(--plan-accent) 55%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--plan-accent) 12%, transparent) 0%,
rgba(255, 255, 255, 0.04) 45%
);
box-shadow: 0 24px 60px -32px color-mix(in srgb, var(--plan-accent) 70%, transparent);
}
.plan-badge {
position: absolute;
top: 0;
left: clamp(1.6rem, 2.2vw, 2.2rem);
translate: 0 -50%;
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 9px;
color: var(--black);
background: var(--plan-accent);
white-space: nowrap;
}
.plan-name {
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
font-weight: 600;
letter-spacing: -0.01em;
}
.plan-tag {
color: var(--muted);
font-size: 0.875rem;
line-height: 1.55;
margin-top: 0.35rem;
}
.plan-price-block {
margin-top: 1.5rem;
padding-bottom: 1.4rem;
border-bottom: 1px solid var(--line);
}
.plan-from {
display: block;
font-size: 10px;
color: var(--muted);
margin-bottom: 0.35rem;
}
.plan-price {
font-size: clamp(2rem, 3.4vw, 2.6rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--plan-accent);
}
.plan-currency {
font-size: 0.55em;
font-weight: 500;
margin-right: 0.12em;
vertical-align: 0.22em;
opacity: 0.75;
}
/* Ticks are a masked SVG rather than 27 inline