/* ==== 00-site.css ==== */
/* ==========================================================================
Core of Content - light prototype
Direction: technical editorial. Blueprint on warm paper, not a dark stage.
Arabic-first, RTL only. Latin is used for numerals and technical labels.
========================================================================== */
/* ---------------------------------------------------------------- 0. fonts */
/* Self-hosted, variable, two subsets. Google's stylesheet cost a second
round trip before the face was even requested and the swap moved 0.13 of
layout on the phone; served from here with a metrics-matched fallback,
the same page settles at effectively zero. */
@font-face {
font-family: "Cairo";
src: url("../fonts/cairo-arabic.woff2") format("woff2");
font-weight: 400 900;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "Cairo";
src: url("../fonts/cairo-latin.woff2") format("woff2");
font-weight: 400 900;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Grotesk";
src: url("../fonts/grotesk-latin.woff2") format("woff2");
font-weight: 500 700;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* Space Grotesk sets wider than Helvetica, so an unmatched fallback let every
.mono run rewrap on swap. A long kicker went from one line to two and dragged
the page under it down with it.
Measured against the runs that actually wrap, which are Latin words: those
need 102.3%. Space Grotesk's digits are wider still and want 106%, but a
digit run is four characters and never reaches a line end, so the letters
win. 100px of Space Grotesk is 98 up and 29 down, and the overrides are
those divided by the size-adjust. Not Helvetica Neue in the stack: it is
3.6% narrower than Helvetica and Arial, which measure identically, and one
size-adjust cannot serve both. */
@font-face {
font-family: "Grotesk Fallback";
src: local("Helvetica"), local("Arial");
size-adjust: 102.3%;
ascent-override: 95.8%;
descent-override: 28.3%;
line-gap-override: 0%;
}
/* The fallback is remapped to Cairo's metrics so the swap changes glyphs
and not line boxes. Without this the whole page reflows once. */
@font-face {
font-family: "Cairo Fallback";
src: local("Geeza Pro"), local("Segoe UI"), local("Arial");
size-adjust: 104%;
ascent-override: 96%;
descent-override: 30%;
line-gap-override: 0%;
}
/* --------------------------------------------------------------- 1. tokens */
:root {
/* surfaces */
--paper: oklch(98.8% 0.004 95);
--paper-2: oklch(96.6% 0.007 95);
--paper-3: oklch(94.2% 0.009 95);
--card: oklch(100% 0 0);
/* ink */
--ink: oklch(22% 0.035 268);
--ink-2: oklch(44% 0.025 268);
/* 58% measured 4.29:1 on a white card, which is a fail. This is the muted
tone for captions and meta, so it has to clear 4.5 on the lightest surface. */
--ink-3: oklch(52% 0.022 268);
/* brand */
--indigo: oklch(31% 0.152 271);
--indigo-2: oklch(42% 0.135 271);
--indigo-wash: oklch(96% 0.018 271);
--orange: oklch(59% 0.185 39);
--orange-ink: oklch(48% 0.16 39);
--orange-wash: oklch(96.5% 0.022 55);
--mint: oklch(94% 0.045 195);
--mint-deep: oklch(52% 0.075 205);
--white: oklch(100% 0 0);
--indigo-deep: oklch(24% 0.14 271);
/* lines */
--line: oklch(90.5% 0.008 268);
--line-2: oklch(84% 0.012 268);
--grid-line: oklch(88% 0.012 271 / 0.55);
/* the accent a section owns. Scenes rewrite these two on . */
--accent: var(--indigo);
--accent-wash: var(--indigo-wash);
/* type */
--font-ar: "Cairo", "Cairo Fallback", system-ui, sans-serif;
--font-la: "Space Grotesk", "Grotesk Fallback", ui-monospace, monospace;
--fs-display: clamp(2.3rem, 1.2rem + 4vw, 4.4rem);
--fs-1: clamp(1.85rem, 1.25rem + 2.1vw, 3rem);
--fs-2: clamp(1.45rem, 1.15rem + 1.1vw, 2.05rem);
--fs-3: clamp(1.15rem, 1.05rem + 0.5vw, 1.38rem);
--fs-4: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
--fs-body: clamp(0.98rem, 0.95rem + 0.15vw, 1.04rem);
--fs-sm: 0.92rem;
--fs-xs: 0.8125rem;
--lh-display: 1.22;
--lh-head: 1.38;
--lh-body: 1.8;
/* space */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 64px;
--s9: 96px;
--s10: 128px;
--section-y: clamp(64px, 7vw, 112px);
/* radius */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 24px;
--r-xl: 34px;
--r-full: 999px;
/* elevation, tinted indigo so it never greys out the paper */
--sh-1: 0 1px 2px oklch(31% 0.15 271 / 0.05), 0 2px 8px oklch(31% 0.15 271 / 0.04);
--sh-2: 0 2px 4px oklch(31% 0.15 271 / 0.05), 0 12px 28px oklch(31% 0.15 271 / 0.07);
--sh-3: 0 4px 8px oklch(31% 0.15 271 / 0.06), 0 28px 64px oklch(31% 0.15 271 / 0.1);
/* motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 160ms;
--t-mid: 320ms;
--t-slow: 720ms;
--max: 1280px;
--gutter: clamp(20px, 4.5vw, 64px);
--header-h: 74px;
}
/* ---------------------------------------------------------------- 2. reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + var(--s5));
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-ar);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
font-optical-sizing: auto;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color var(--t-slow) var(--ease-out);
}
img,
svg,
video {
display: block;
max-width: 100%;
}
/* The ![]()
keeps being the grid or flex child; the wrapper is not a box. */
picture {
display: contents;
}
img {
height: auto;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 800;
line-height: var(--lh-head);
text-wrap: balance;
/* Arabic letterforms connect. Tracking on them is a defect, not a style. */
letter-spacing: 0;
}
p {
margin: 0;
text-wrap: pretty;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
::selection {
background: var(--mint);
color: var(--indigo);
}
:focus-visible {
outline: 2px solid var(--indigo);
outline-offset: 3px;
border-radius: var(--r-xs);
}
/* ---------------------------------------------------- 3. paper & blueprint */
/* Grain plus a 32px blueprint grid. Both fixed, both inert, both cheap. */
.paper-grain,
.paper-grid {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.paper-grid {
background-image:
linear-gradient(to left, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 0%, transparent 78%);
opacity: 0.5;
}
.paper-grain {
opacity: 0.32;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
/* Everything real sits above the two overlays. */
.site-header,
main,
.site-footer {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------- 4. primitives */
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-y);
position: relative;
}
.section--wash {
background: var(--paper-2);
}
/* The page carries one accent at a time. JS writes the scene onto as
you pass each section, and only these two variables change with it. */
body[data-scene="services"],
body[data-scene="why"] {
--accent: var(--orange-ink);
--accent-wash: var(--orange-wash);
}
body[data-scene="method"],
body[data-scene="sectors"] {
--accent: var(--mint-deep);
--accent-wash: oklch(97.5% 0.02 200);
}
.section--tint {
background: var(--accent-wash);
transition: background-color var(--t-slow) var(--ease-out);
}
.rule {
height: 1px;
background: var(--line);
border: 0;
margin: 0;
}
/* Latin numerals and technical labels. Tracking is safe here, not on Arabic. */
.mono {
font-family: var(--font-la);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
.kicker {
display: inline-flex;
align-items: center;
gap: var(--s3);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--accent);
transition: color var(--t-slow) var(--ease-out);
}
.kicker::before {
content: "";
inline-size: 28px;
block-size: 2px;
background: currentColor;
flex: none;
}
.kicker .mono {
color: var(--ink-3);
font-weight: 500;
}
.section-head {
display: grid;
gap: var(--s4);
max-width: 62ch;
margin-block-end: var(--s8);
}
.section-head h2 {
font-size: var(--fs-1);
font-weight: 900;
}
.section-head p {
color: var(--ink-2);
font-size: var(--fs-4);
}
.lead {
color: var(--ink-2);
font-size: var(--fs-4);
max-width: 56ch;
}
/* ------------------------------------------------------------- 5. buttons */
.btn {
--btn-bg: var(--indigo);
--btn-fg: oklch(99% 0 0);
display: inline-flex;
align-items: center;
gap: var(--s3);
min-block-size: 48px;
padding-inline: var(--s5);
padding-block: var(--s3);
border: 1px solid transparent;
border-radius: var(--r-full);
background: var(--btn-bg);
color: var(--btn-fg);
font-weight: 700;
font-size: var(--fs-sm);
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
transition:
transform var(--t-fast) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out),
background-color var(--t-mid) var(--ease-out),
color var(--t-mid) var(--ease-out);
}
/* The wash sweeps from the inline start, which is the right in RTL. */
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--orange);
transform: scaleX(0);
transform-origin: right center;
transition: transform var(--t-mid) var(--ease-out);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--sh-2);
}
.btn:hover::before {
transform: scaleX(1);
}
.btn:active {
transform: translateY(0) scale(0.985);
box-shadow: var(--sh-1);
}
.btn .dot {
inline-size: 7px;
block-size: 7px;
border-radius: 2px;
background: currentColor;
flex: none;
transition: transform var(--t-mid) var(--ease-out);
}
.btn:hover .dot {
transform: rotate(45deg);
}
.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--ink);
border-color: var(--line-2);
}
.btn--ghost:hover {
--btn-fg: oklch(99% 0 0);
border-color: var(--orange);
}
.btn--sm {
min-block-size: 42px;
padding-inline: var(--s4);
font-size: var(--fs-xs);
}
/* A text link that draws its own underline from the inline start. */
.link {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-weight: 700;
font-size: var(--fs-sm);
color: var(--indigo);
padding-block: 4px;
position: relative;
}
.link::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 2px;
background: var(--orange);
transform: scaleX(0);
transform-origin: right center;
transition: transform var(--t-mid) var(--ease-out);
}
.link:hover {
color: var(--orange-ink);
}
.link:hover::after {
transform: scaleX(1);
}
.link svg {
inline-size: 16px;
block-size: 16px;
transition: transform var(--t-mid) var(--ease-out);
}
.link:hover svg {
transform: translateX(-4px);
}
/* --------------------------------------------------------------- 6. header */
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 60;
background: oklch(98.8% 0.004 95 / 0.82);
backdrop-filter: blur(14px) saturate(1.4);
border-block-end: 1px solid transparent;
transition:
border-color var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out);
}
.site-header[data-stuck="true"] {
border-block-end-color: var(--line);
box-shadow: 0 1px 0 oklch(31% 0.15 271 / 0.03), 0 10px 30px oklch(31% 0.15 271 / 0.05);
}
.header-inner {
min-block-size: var(--header-h);
display: flex;
align-items: center;
gap: var(--s6);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--s3);
flex: none;
}
.brand-mark {
inline-size: 34px;
block-size: 34px;
flex: none;
}
.brand-word {
font-family: var(--font-la);
font-weight: 700;
font-size: 1.02rem;
letter-spacing: 0.14em;
color: var(--ink);
line-height: 1;
}
.brand-sub {
display: block;
font-family: var(--font-ar);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0;
color: var(--ink-3);
line-height: 1.6;
}
/* Desktop: the drawer is not a box, its children are the flex items.
Mobile: it becomes the panel that holds them both. */
.header-drawer {
display: contents;
}
.nav {
display: flex;
align-items: center;
gap: var(--s2);
margin-inline: auto;
}
.nav a {
padding: 10px var(--s4);
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
position: relative;
transition:
color var(--t-fast) var(--ease-out),
background-color var(--t-fast) var(--ease-out);
}
.nav a:hover {
color: var(--ink);
background: var(--paper-3);
}
.nav a[aria-current="page"] {
color: var(--indigo);
}
.nav a[aria-current="page"]::after {
content: "";
position: absolute;
inset-inline: var(--s4);
inset-block-end: 2px;
block-size: 2px;
border-radius: 2px;
background: var(--orange);
}
.header-cta {
flex: none;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
inline-size: 46px;
block-size: 46px;
margin-inline-start: auto;
border: 1px solid var(--line-2);
border-radius: var(--r-full);
background: var(--card);
cursor: pointer;
}
.nav-toggle svg {
inline-size: 20px;
block-size: 20px;
}
.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open {
display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
display: block;
}
@keyframes sheet {
from {
opacity: 0;
transform: translateY(-8px);
}
}
/* ---------------------------------------------------------------- 7. hero */
.hero {
padding-block: clamp(56px, 7vw, 104px) 0;
position: relative;
}
.hero h1 {
font-size: var(--fs-display);
font-weight: 900;
line-height: var(--lh-display);
margin-block: var(--s5) var(--s5);
}
/* The emphasis rule is a text-decoration, not a positioned bar. An absolutely
positioned pseudo is anchored to the inline box, whose height follows the
font metrics and drifts between sizes; text-underline-offset is measured
from the baseline and lands identically at 320 and at 1440. */
.hero h1 .em {
color: var(--indigo);
white-space: nowrap;
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 0.15em;
text-underline-offset: 0.04em;
text-decoration-skip-ink: none;
animation: swash 700ms var(--ease-out) 520ms forwards;
}
@keyframes swash {
to {
text-decoration-color: var(--mint);
}
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin-block-start: var(--s6);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 9px var(--s4);
border-radius: var(--r-full);
background: oklch(100% 0 0 / 0.9);
backdrop-filter: blur(8px);
border: 1px solid oklch(100% 0 0 / 0.6);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--indigo);
box-shadow: var(--sh-1);
}
.chip svg {
inline-size: 15px;
block-size: 15px;
color: var(--orange-ink);
}
/* Discipline marquee under the hero. */
.marquee {
border-block: 1px solid var(--line);
background: var(--card);
overflow: hidden;
padding-block: var(--s4);
-webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
display: flex;
gap: var(--s7);
inline-size: max-content;
animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track {
animation-play-state: paused;
}
@keyframes slide {
to {
transform: translateX(50%);
}
}
.marquee-track span {
display: inline-flex;
align-items: center;
gap: var(--s4);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--ink-2);
white-space: nowrap;
}
.marquee-track span::after {
content: "";
inline-size: 5px;
block-size: 5px;
border-radius: 2px;
background: var(--orange);
transform: rotate(45deg);
}
/* ------------------------------------------------------------- 8. metrics */
.metrics {
display: grid;
/* auto-fit, not repeat(4): the same component carries 2, 3, 4 and 5 cells
across the site and a fixed track count leaves a hole on the odd counts. */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.metric {
background: var(--card);
padding: var(--s6) var(--s5);
display: grid;
gap: var(--s2);
align-content: start;
transition: background-color var(--t-mid) var(--ease-out);
}
.metric:hover {
background: var(--paper-2);
}
.metric b {
font-family: var(--font-la);
font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem);
font-weight: 700;
line-height: 1;
color: var(--indigo);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.metric h3 {
font-size: var(--fs-4);
font-weight: 700;
}
.metric p {
font-size: var(--fs-sm);
color: var(--ink-3);
line-height: 1.7;
}
/* --------------------------------------------------------- 9. project cards */
.project-list {
display: grid;
gap: var(--s7);
}
.pcard {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--card);
transition:
transform var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out),
border-color var(--t-mid) var(--ease-out);
}
.pcard:hover {
transform: translateY(-4px);
border-color: var(--line-2);
box-shadow: var(--sh-3);
}
.pcard:nth-child(even) .pcard-media {
order: 2;
}
.pcard-media {
position: relative;
overflow: hidden;
background: var(--paper-3);
aspect-ratio: 4 / 3;
}
.pcard-media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 900ms var(--ease-out);
}
.pcard:hover .pcard-media img {
transform: scale(1.05);
}
.pcard-body {
padding: clamp(24px, 3vw, 44px);
display: grid;
align-content: center;
gap: var(--s4);
}
.pcard-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s3);
font-size: var(--fs-xs);
color: var(--ink-3);
}
.pcard-body h3 {
font-size: var(--fs-2);
font-weight: 900;
}
/* The Latin name is a caption under the Arabic title, never inside it. */
.lat-sub {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-3);
text-align: end;
margin-block-start: -10px;
}
.lat-sub span {
color: var(--ink-3);
opacity: 0.7;
}
.pcard-body p {
color: var(--ink-2);
font-size: var(--fs-sm);
line-height: 1.85;
}
.tag {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: var(--r-full);
font-size: 0.75rem;
font-weight: 700;
background: var(--indigo-wash);
color: var(--indigo);
line-height: 1.7;
}
.tag--live {
background: var(--orange-wash);
color: var(--orange-ink);
}
.pcard-contrib {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
padding-block-start: var(--s3);
border-block-start: 1px solid var(--line);
}
.pcard-contrib span {
font-size: 0.75rem;
color: var(--ink-3);
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: var(--r-xs);
line-height: 1.7;
}
/* Compact grid used on the projects index. */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
gap: var(--s5);
}
.gcard {
display: grid;
grid-template-rows: auto 1fr;
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
background: var(--card);
transition:
transform var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out),
border-color var(--t-mid) var(--ease-out);
}
.gcard:hover {
transform: translateY(-4px);
border-color: var(--line-2);
box-shadow: var(--sh-2);
}
.gcard-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-3);
}
.gcard-media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 800ms var(--ease-out);
}
.gcard:hover .gcard-media img {
transform: scale(1.06);
}
.gcard-no {
position: absolute;
inset-block-start: var(--s3);
inset-inline-start: var(--s3);
padding: 4px 9px;
border-radius: var(--r-xs);
background: oklch(100% 0 0 / 0.92);
font-family: var(--font-la);
font-size: 0.7rem;
font-weight: 700;
color: var(--indigo);
}
.gcard-body {
padding: var(--s5);
display: grid;
gap: var(--s3);
align-content: start;
}
.gcard-body h3 {
font-size: var(--fs-3);
font-weight: 800;
}
.gcard-body p {
font-size: var(--fs-sm);
color: var(--ink-2);
line-height: 1.8;
}
.gcard-foot {
margin-block-start: auto;
padding-block-start: var(--s3);
border-block-start: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
font-size: var(--fs-xs);
color: var(--ink-3);
}
/* Filter chips on the projects index. */
.filters {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-block-end: var(--s6);
}
.filter {
min-block-size: 44px;
padding-inline: var(--s4);
border: 1px solid var(--line-2);
border-radius: var(--r-full);
background: var(--card);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
transition:
background-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out);
}
.filter:hover {
border-color: var(--indigo);
color: var(--indigo);
}
.filter[aria-pressed="true"] {
background: var(--indigo);
border-color: var(--indigo);
color: oklch(99% 0 0);
}
.empty-state {
display: none;
padding: var(--s8) var(--s5);
text-align: center;
border: 1px dashed var(--line-2);
border-radius: var(--r-md);
color: var(--ink-2);
}
.empty-state[data-visible="true"] {
display: grid;
gap: var(--s4);
justify-items: center;
}
/* ------------------------------------------------------------ 10. services */
.svc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.svc {
background: var(--card);
display: grid;
grid-template-rows: auto 1fr;
align-content: start;
position: relative;
overflow: hidden;
transition: background-color var(--t-mid) var(--ease-out);
}
.svc-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--paper-3);
}
.svc-media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 800ms var(--ease-out);
}
.svc:hover .svc-media img {
transform: scale(1.05);
}
/* Inside the media, not straddling its edge: the media clips its own overflow
so the image can scale on hover, and a straddling badge gets cut in half. */
.svc-media .svc-icon {
position: absolute;
inset-block-end: var(--s3);
inset-inline-start: var(--s3);
box-shadow: var(--sh-1);
}
.svc-copy {
padding: var(--s6);
display: grid;
gap: var(--s3);
align-content: start;
}
.svc::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
background: var(--orange);
transform: scaleX(0);
transform-origin: right center;
transition: transform var(--t-mid) var(--ease-out);
}
.svc:hover {
background: var(--paper-2);
}
.svc:hover::after {
transform: scaleX(1);
}
.svc-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
}
.svc-icon {
inline-size: 42px;
block-size: 42px;
border-radius: var(--r-sm);
display: grid;
place-items: center;
background: oklch(100% 0 0 / 0.92);
backdrop-filter: blur(6px);
color: var(--indigo);
transition:
background-color var(--t-mid) var(--ease-out),
color var(--t-mid) var(--ease-out),
transform var(--t-mid) var(--ease-out);
}
.svc-icon svg {
inline-size: 23px;
block-size: 23px;
}
.svc:hover .svc-icon {
background: var(--indigo);
color: var(--mint);
transform: rotate(-6deg);
}
.svc-no {
font-family: var(--font-la);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--ink-3);
}
.svc h3 {
font-size: var(--fs-3);
font-weight: 800;
}
.svc p {
font-size: var(--fs-sm);
color: var(--ink-2);
line-height: 1.85;
}
.svc ul {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-block-start: var(--s2);
}
.svc li {
font-size: 0.75rem;
color: var(--ink-3);
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: var(--r-xs);
line-height: 1.7;
}
/* ----------------------------------------------------------- 11. method */
.method {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
.method-aside {
position: sticky;
inset-block-start: calc(var(--header-h) + var(--s6));
display: grid;
gap: var(--s5);
}
.method-figure {
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 4 / 3;
background: var(--paper-3);
}
.method-figure img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.steps {
position: relative;
display: grid;
gap: var(--s2);
padding-inline-start: 0;
}
/* The rail and its fill. The fill height is written by JS as a percentage. */
/* The rail sits under the dot column, which is the inline start. */
.steps::before,
.steps-fill {
content: "";
position: absolute;
inset-block-start: 22px;
inset-inline-start: 17px;
inline-size: 2px;
border-radius: 2px;
}
.steps::before {
block-size: calc(100% - 44px);
background: var(--line);
}
.steps-fill {
block-size: 0;
background: var(--orange);
transition: block-size 260ms linear;
max-block-size: calc(100% - 44px);
}
.step {
display: grid;
grid-template-columns: 36px 1fr;
gap: var(--s5);
padding-block: var(--s5);
align-items: start;
position: relative;
}
.step-dot {
inline-size: 36px;
block-size: 36px;
border-radius: var(--r-full);
border: 2px solid var(--line-2);
background: var(--paper);
display: grid;
place-items: center;
font-family: var(--font-la);
font-size: 0.8rem;
font-weight: 700;
color: var(--ink-3);
z-index: 1;
transition:
border-color var(--t-mid) var(--ease-out),
background-color var(--t-mid) var(--ease-out),
color var(--t-mid) var(--ease-out);
}
.step[data-on="true"] .step-dot {
border-color: var(--orange);
background: var(--orange);
color: oklch(99% 0 0);
}
.step h3 {
font-size: var(--fs-3);
font-weight: 800;
transition: color var(--t-mid) var(--ease-out);
}
.step[data-on="true"] h3 {
color: var(--indigo);
}
.step p {
color: var(--ink-2);
font-size: var(--fs-sm);
margin-block-start: var(--s2);
line-height: 1.85;
}
/* -------------------------------------------------------------- 12. split */
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.split-media {
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 4 / 3;
background: var(--paper-3);
box-shadow: var(--sh-2);
}
.split-media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.split-body {
display: grid;
gap: var(--s5);
align-content: start;
}
/* A heading inside a half-width column takes the smaller step. At --fs-1 it
wraps to four ragged lines and balance cannot save it. */
.split-body h2 {
font-size: var(--fs-2);
font-weight: 900;
}
.split-body p {
color: var(--ink-2);
}
.pill-row {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
}
.pill {
padding: 7px 14px;
border: 1px solid var(--line-2);
border-radius: var(--r-full);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-2);
background: var(--card);
line-height: 1.7;
}
/* ------------------------------------------------------- 13. why (bento) */
.why {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--s5);
}
.why-a {
grid-column: span 7;
}
.why-b {
grid-column: span 5;
}
.why-c {
grid-column: span 5;
}
.why-d {
grid-column: span 7;
}
.why-card {
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--card);
padding: clamp(24px, 3vw, 44px);
display: grid;
gap: var(--s4);
align-content: start;
position: relative;
overflow: hidden;
transition:
border-color var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out);
}
.why-card:hover {
border-color: var(--line-2);
box-shadow: var(--sh-2);
}
.why-card h3 {
font-size: var(--fs-3);
font-weight: 800;
}
.why-card p {
color: var(--ink-2);
font-size: var(--fs-sm);
line-height: 1.85;
}
/* The copy is pinned to the bottom over its own scrim. Letting it flow from
the top puts white text on the bright half of the photograph. */
.why-card--photo {
display: block;
padding: 0;
min-block-size: 320px;
}
.why-card--photo img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
position: absolute;
inset: 0;
}
.why-card--photo .why-overlay {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 1;
padding: clamp(28px, 3.5vw, 44px);
background: linear-gradient(
to top,
oklch(18% 0.04 271 / 0.94),
oklch(18% 0.04 271 / 0.72) 52%,
transparent
);
color: oklch(99% 0 0);
display: grid;
gap: var(--s3);
}
.why-card--photo .why-overlay p {
color: oklch(93% 0.01 271);
}
.why-figure {
font-family: var(--font-la);
font-size: clamp(3rem, 2rem + 4vw, 5rem);
font-weight: 700;
line-height: 0.95;
color: var(--indigo);
letter-spacing: -0.03em;
}
.spec-list {
display: grid;
gap: 0;
}
.spec-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
padding-block: var(--s3);
border-block-end: 1px solid var(--line);
font-size: var(--fs-sm);
}
.spec-list li:last-child {
border-block-end: 0;
}
.spec-list b {
font-weight: 700;
}
/* An icon inside the label is a marker, not a heading glyph: without a size it
inherits the sprite's own box and swamps the row. */
.spec-list b svg {
inline-size: 17px;
block-size: 17px;
vertical-align: -3px;
margin-inline-end: 4px;
color: var(--ink-3);
}
.spec-list .mono {
color: var(--ink-3);
font-size: var(--fs-xs);
/* Not flex:none. A numeral never needs to shrink, but the same slot carries
a Latin project name, and an unshrinkable one scrolls the page at 320. */
flex: 0 1 auto;
min-inline-size: 0;
overflow-wrap: anywhere;
text-align: end;
}
/* -------------------------------------------------------------- 14. sectors */
.sector-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: var(--s4);
}
.sector {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--card);
display: grid;
grid-template-rows: auto 1fr;
align-content: start;
overflow: hidden;
transition:
transform var(--t-mid) var(--ease-out),
border-color var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out);
}
.sector:hover {
transform: translateY(-3px);
border-color: var(--indigo);
box-shadow: var(--sh-2);
}
.sector-media {
position: relative;
aspect-ratio: 5 / 3;
overflow: hidden;
background: var(--paper-3);
}
.sector-media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 800ms var(--ease-out);
}
.sector:hover .sector-media img {
transform: scale(1.06);
}
.sector-icon {
position: absolute;
inset-block-start: var(--s3);
inset-inline-start: var(--s3);
inline-size: 38px;
block-size: 38px;
border-radius: var(--r-sm);
display: grid;
place-items: center;
background: oklch(100% 0 0 / 0.92);
backdrop-filter: blur(6px);
color: var(--orange-ink);
box-shadow: var(--sh-1);
}
.sector-icon svg {
inline-size: 20px;
block-size: 20px;
}
.sector-copy {
padding: var(--s5);
display: grid;
gap: var(--s2);
align-content: start;
}
.sector h3 {
font-size: var(--fs-4);
font-weight: 700;
}
.sector p {
font-size: var(--fs-sm);
color: var(--ink-3);
line-height: 1.8;
}
/* ------------------------------------------------------------- 15. closing */
.closing {
position: relative;
overflow: hidden;
border-radius: var(--r-xl);
isolation: isolate;
min-block-size: clamp(360px, 42vw, 520px);
display: grid;
align-items: center;
}
.closing img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
z-index: -2;
}
.closing::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to left, oklch(22% 0.06 271 / 0.9), oklch(22% 0.06 271 / 0.45));
}
.closing-inner {
padding: clamp(32px, 5vw, 72px);
display: grid;
gap: var(--s5);
/* ch is measured at body size, so a ch cap starves a display-size heading. */
max-width: min(100%, 640px);
color: oklch(99% 0 0);
}
.closing-inner h2 {
font-size: var(--fs-2);
font-weight: 900;
}
.closing-inner p {
color: oklch(92% 0.012 271);
}
.closing .btn--ghost {
--btn-fg: oklch(99% 0 0);
border-color: oklch(100% 0 0 / 0.5);
}
/* --------------------------------------------------------------- 16. forms */
.form {
display: grid;
gap: var(--s5);
}
.field {
display: grid;
gap: var(--s2);
}
.field label {
font-size: var(--fs-sm);
font-weight: 700;
}
.field .hint {
font-size: var(--fs-xs);
color: var(--ink-3);
font-weight: 400;
}
.field input,
.field textarea,
.field select {
min-block-size: 50px;
padding: var(--s3) var(--s4);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--card);
font-size: var(--fs-sm);
transition:
border-color var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
}
.field textarea {
min-block-size: 140px;
resize: vertical;
line-height: 1.8;
}
.field input:hover,
.field textarea:hover,
.field select:hover {
border-color: var(--ink-3);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
outline: none;
border-color: var(--indigo);
box-shadow: 0 0 0 3px var(--indigo-wash);
}
.field input[dir="ltr"] {
text-align: end;
}
.field .error {
font-size: var(--fs-xs);
color: var(--orange-ink);
font-weight: 600;
min-block-size: 1.2em;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select {
border-color: var(--orange);
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s5);
}
.form-note {
font-size: var(--fs-xs);
color: var(--ink-3);
}
.form-status {
display: none;
gap: var(--s3);
align-items: flex-start;
padding: var(--s4) var(--s5);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
line-height: 1.8;
}
.form-status[data-state="ok"] {
display: flex;
background: var(--mint);
color: oklch(32% 0.06 205);
}
.form-status[data-state="error"] {
display: flex;
background: var(--orange-wash);
color: var(--orange-ink);
}
.form-status svg {
inline-size: 20px;
block-size: 20px;
flex: none;
margin-block-start: 3px;
}
.btn[aria-busy="true"] {
pointer-events: none;
opacity: 0.75;
}
.btn[aria-busy="true"] .dot {
border-radius: var(--r-full);
animation: pulse 900ms var(--ease-in-out) infinite;
}
@keyframes pulse {
50% {
transform: scale(1.9);
opacity: 0.5;
}
}
/* --------------------------------------------------------- 17. page header */
.page-hero {
padding-block: clamp(48px, 6vw, 88px) var(--s8);
border-block-end: 1px solid var(--line);
}
.page-hero h1 {
font-size: var(--fs-1);
font-weight: 900;
margin-block: var(--s4) var(--s4);
max-width: 20ch;
}
.crumbs {
display: flex;
align-items: center;
gap: var(--s2);
font-size: var(--fs-xs);
color: var(--ink-3);
margin-block-end: var(--s5);
}
.crumbs a:hover {
color: var(--indigo);
}
.crumbs span[aria-hidden] {
opacity: 0.5;
}
/* ------------------------------------------------------- 18. project detail */
.detail-hero {
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 16 / 8;
background: var(--paper-3);
box-shadow: var(--sh-2);
}
.detail-hero img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.detail-body {
display: grid;
gap: var(--s6);
}
.detail-body h2 {
font-size: var(--fs-2);
font-weight: 900;
}
.detail-body p {
color: var(--ink-2);
}
.detail-aside {
position: sticky;
inset-block-start: calc(var(--header-h) + var(--s6));
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--card);
padding: var(--s6);
display: grid;
gap: var(--s4);
}
.detail-aside h2 {
font-size: var(--fs-4);
font-weight: 800;
}
.next-project {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s5);
flex-wrap: wrap;
padding: var(--s6);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--card);
transition:
border-color var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out);
}
.next-project:hover {
border-color: var(--indigo);
box-shadow: var(--sh-2);
}
.next-project strong {
display: block;
font-size: var(--fs-2);
font-weight: 900;
}
/* ------------------------------------------------- 18b. gallery & lightbox */
.page-hero-media {
margin: var(--s7) 0 0;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 16 / 6;
background: var(--paper-3);
box-shadow: var(--sh-2);
}
.page-hero-media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s4);
}
.shot {
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
background: var(--paper-3);
aspect-ratio: 4 / 3;
cursor: zoom-in;
position: relative;
transition:
border-color var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out);
}
.shot img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 700ms var(--ease-out);
}
.shot:hover {
border-color: var(--indigo);
box-shadow: var(--sh-2);
}
.shot:hover img {
transform: scale(1.05);
}
.shot::after {
content: "";
position: absolute;
inset: 0;
background: oklch(31% 0.15 271 / 0);
transition: background-color var(--t-mid) var(--ease-out);
}
.shot:hover::after {
background: oklch(31% 0.15 271 / 0.12);
}
/*