/* ══════════════════════════════════════════════════════════════
NASIEJ · style.css
Premium Editorial Creative Studio — Circuit-Loom Identity
Bilingual (EN/AR · LTR/RTL) + Cinematic Light/Dark Theme System
THEME ARCHITECTURE
───────────────────
All colors are derived from a small set of RGB-component
variables (--bg-rgb, --text-rgb, --accent-rgb, --accent-light-rgb).
[data-theme="dark"] simply redefines these components and the
entire palette (including every alpha tint) recomputes via
rgba(var(--x-rgb), alpha) — no component-level overrides needed.
Light: bg #F4F0E7 undyed linen · text #202E42 indigo · accent #A8432F madder
Dark: bg #121A28 indigo night · text #F0EBE1 linen · accent #CE7358 madder
Structural "surface" blocks (Contact / Footer / Mobile-nav) stay
Deep Ink (#0C1E5B) in BOTH themes — defined via --surface-rgb /
--on-surface-rgb, independent of the page background.
══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────
0. PERFORMANCE & PRINT
───────────────────────────────────────────────── */
/* Contain layout shifts from paint-heavy elements */
#thread-canvas,
#video-overlay,
.wm-card,
.bento-cell {
contain: layout style;
}
/* Critical image optimisation: ensure above-fold images
are treated as high-priority by the browser */
.hero-content img:first-child {
fetchpriority: high;
}
/* Improve scroll performance on animated elements */
#navbar,
.float-btns,
#cursor-shuttle,
#cursor-dot {
will-change: transform;
}
/* Respect OS-level reduced data preference */
@media (prefers-reduced-data: reduce) {
#thread-canvas { display: none; }
#video-overlay { display: none !important; }
.cursor-trail { display: none; }
}
/* Touch devices never get the custom cursor — script.js already
bails out of CursorShuttle() on (pointer: coarse), but without
this rule the dot/shuttle still sit in the DOM at their default
(0,0) position and render as a stray mark on phones/tablets. */
@media (pointer: coarse) {
#cursor-dot, #cursor-shuttle, #cursor-trail { display: none !important; }
}
/* ── Print styles — clean, readable output ── */
@media print {
#cursor-dot, #cursor-shuttle, #cursor-trail,
#theme-ripple, #thread-canvas, #video-overlay,
.float-btns, #cookie-banner, .nav-menu-btn,
.ctrl-btn, .mobile-nav, .mobile-overlay,
.thread-divider { display: none !important; }
body { background: #fff !important; color: #000 !important; }
a { color: inherit; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
#navbar { position: static; box-shadow: none; border-bottom: 1px solid #ccc; }
section { break-inside: avoid; page-break-inside: avoid; }
}
/* ─────────────────────────────────────────────────
1. CUSTOM PROPERTIES — THEME ENGINE
───────────────────────────────────────────────── */
:root {
/* ══ Light Theme (default) — RGB components ══
THE DYE PALETTE.
Previously #F6F8FF / #0C1E5B / #B8962E — a cool blue-white
ground, corporate navy, and an olive-gold. The variables were
named for a textile atelier (cream, copper) while the values
described a fintech dashboard, and navy-and-gold is the most
exhausted luxury signal in commercial design.
These three colours are the historical foundation of natural
dyeing: undyed linen, indigo, madder root. They occupy the
same premium register but carry a reason, and they belong to
the craft this studio is named after. */
--bg-rgb: 244, 240, 231; /* #F4F0E7 undyed linen */
--text-rgb: 32, 46, 66; /* #202E42 indigo ink */
--accent-rgb: 168, 67, 47; /* #A8432F madder root */
--accent-light-rgb: 196, 105, 79; /* #C4694F madder, thinned */
--accent-dark: #7D2F20;
/* Structural containment blocks — constant across themes */
--surface-rgb: 32, 46, 66; /* #202E42 indigo */
--on-surface-rgb: 244, 240, 231; /* linen on indigo */
/* Canvas ambient glow — inert in light mode */
--canvas-glow: transparent;
--canvas-glow-blur: 0px;
/* ── Derived palette (recomputes automatically per theme) ── */
--cream: rgb(var(--bg-rgb));
--cream-mid: rgba(var(--text-rgb), 0.045);
--cream-dark: rgba(var(--text-rgb), 0.075);
/* ── Emphasis ladder ──
The old ladder claimed six levels but delivered three: --ink-60
was 0.75 and --ink-40 was 0.72, three hundredths apart and
visually identical, then a cliff straight to 0.20. Everything
was either shouting or nearly invisible — no middle greys, and
middle greys are where depth lives.
--ink-60 and --ink-40 keep their values because body copy sits
on them and lowering either drops below WCAG AA. Their names
are inherited and inaccurate; correcting the names means
touching every call site, so that is staged separately rather
than risked here.
The gap between 0.72 and 0.20 is now filled. These levels are
for rules, borders, captions, large display text and dividers
— the mid-register the composition was missing. */
--ink: rgb(var(--text-rgb));
--ink-soft: rgba(var(--text-rgb), 0.88);
--ink-80: rgba(var(--text-rgb), 0.80);
--ink-60: rgba(var(--text-rgb), 0.75); /* WCAG AA on --cream */
--ink-40: rgba(var(--text-rgb), 0.72); /* WCAG AA on --cream */
--ink-mid: rgba(var(--text-rgb), 0.56); /* large text only */
--ink-quiet: rgba(var(--text-rgb), 0.42); /* rules, captions */
--ink-faint: rgba(var(--text-rgb), 0.30); /* borders, dividers */
--ink-20: rgba(var(--text-rgb), 0.20); /* decorative only */
--ink-10: rgba(var(--text-rgb), 0.10);
--ink-06: rgba(var(--text-rgb), 0.06);
--copper: rgb(var(--accent-rgb));
--copper-light: rgb(var(--accent-light-rgb));
--copper-dark: var(--accent-dark);
--copper-20: rgba(var(--accent-rgb), 0.20);
--copper-12: rgba(var(--accent-rgb), 0.12);
--copper-06: rgba(var(--accent-rgb), 0.06);
/* Structural surface (Contact / Footer / Mobile-nav) */
--surface: rgb(var(--surface-rgb));
--on-surface: rgb(var(--on-surface-rgb));
--on-surface-04: rgba(var(--on-surface-rgb), 0.04);
--on-surface-08: rgba(var(--on-surface-rgb), 0.08);
--on-surface-11: rgba(var(--on-surface-rgb), 0.11);
--on-surface-18: rgba(var(--on-surface-rgb), 0.18);
--on-surface-25: rgba(var(--on-surface-rgb), 0.25);
--on-surface-28: rgba(var(--on-surface-rgb), 0.28);
--on-surface-35: rgba(var(--on-surface-rgb), 0.35);
--on-surface-45: rgba(var(--on-surface-rgb), 0.45);
--on-surface-65: rgba(var(--on-surface-rgb), 0.65);
--on-surface-85: rgba(var(--on-surface-rgb), 0.85);
/* ── Typography ───────────────────────────────────────────────────
EN Display / Headings : Syne — avant-garde geometric
EN Body / UI : Plus Jakarta Sans — ultra-clean, premium
AR Display / Headings : Alexandria — bold, geometric, agency-grade
AR Body / UI : IBM Plex Sans Arabic — tech-luxury, legible
─────────────────────────────────────────────────────────────────── */
--font-display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
--font-sans: 'Syne', 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
--font-arabic: 'Alexandria', 'Helvetica Neue', Arial, sans-serif;
--font-arabic-sans: 'IBM Plex Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
/* ── Typographic scale ──────────────────────────────────────
There was no scale. The display sizes ran 195, 155, 150, 140,
100, 70, 68, 62, 52, 48 — ten independent decisions that each
looked right alone. Sizes that are close but not equal (150
and 155; 70, 68 and 62) read as mistakes rather than as
intervals, and without consistent intervals a page has no
typographic meter.
The ratio is √2 (1.414) — the proportion behind ISO paper
sizes, and so the ratio the editorial tradition this design
borrows from has been built on for a century. Each step is
the one below it multiplied by √2:
18 · 25 · 36 · 51 · 72 · 101 · 143 · 203
Minimums compress on a shallower ratio, as fluid type should:
a scale tuned for a 1440px canvas is unreadable if you shrink
it proportionally to 375px.
Three headlines that were 70 / 68 / 62 now share one step.
They were always the same rank; only the numbers disagreed. */
--type-display: clamp(56px, 13vw, 203px);
--type-3xl: clamp(46px, 10vw, 143px);
--type-2xl: clamp(38px, 6.5vw, 101px);
--type-xl: clamp(32px, 4.8vw, 72px);
--type-lg: clamp(27px, 3.6vw, 51px);
--type-md: clamp(23px, 2.8vw, 36px);
--type-sm: clamp(19px, 2vw, 25px);
--type-xs: clamp(16px, 1.3vw, 18px);
/* Layout */
--nav-h: 72px;
--max-w: 1280px;
--pad-x: clamp(20px, 5.5vw, 80px);
--section-py: clamp(72px, 9vw, 120px);
/* Motion */
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 0.25s;
--dur-mid: 0.55s;
--dur-slow: 1.0s;
--dur-theme: 0.85s;
/* Ripple coordinates — set inline by JS at click point */
--ripple-x: 50%;
--ripple-y: 50%;
}
/* ══════════════════════════════════════════════════════════════
1b. DARK THEME — "Luxury Tech" Obsidian + Cyber Blue
تفعيل تلقائي عبر data-theme="dark" على — كل المتغيرات
المشتقة أعلاه تُعاد حسابها فوراً دون أي تكرار للقواعد.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
/* SAME MATERIAL, LOWER LIGHT.
The previous dark theme was a different company: obsidian
#060B18 with #00A3FF cyber blue — the most generic technology
accent in existence. Madder does not become electric blue in
shadow; it deepens and warms. The ground is now indigo at
night rather than black, and the text stays linen rather than
switching to cold platinum, so the visitor feels the light
change instead of the brand changing. */
--bg-rgb: 18, 26, 40; /* #121A28 indigo, night */
--text-rgb: 240, 235, 225; /* #F0EBE1 linen, unchanged */
--accent-rgb: 206, 115, 88; /* #CE7358 madder, firelit */
--accent-light-rgb: 224, 148, 120; /* #E09478 madder, thinned */
--accent-dark: #9C4B33;
/* Elevated surfaces glow faintly blue instead of navy-tinted */
--cream-mid: rgba(var(--accent-rgb), 0.055);
--cream-dark: rgba(var(--accent-rgb), 0.095);
--ink-soft: rgba(var(--text-rgb), 0.92);
/* Fibre does not emit light — it catches it. The old 15px bloom
read as neon tubing; this is a tight sheen at the edge, the way
a dyed thread picks up a highlight in low light. */
--canvas-glow: rgb(var(--accent-light-rgb));
--canvas-glow-blur: 5px;
}
/* ══════════════════════════════════════════════════════════════
1c. BILINGUAL TYPOGRAPHY REFINEMENTS
───────────────────────────────────────────────────────────────
Tuned for the Syne + Plus Jakarta Sans (EN) and
Alexandria + IBM Plex Sans Arabic (AR) font pairing.
Rules are additive — they only override the properties that
differ from the original metric assumptions built for
Cormorant Garamond / Amiri / DM Sans.
══════════════════════════════════════════════════════════════ */
/* ── Hero display line 1 (.title-en-1)
Cormorant had weight 300 italic — Syne's minimum is 400.
Adjust weight and spacing to preserve the elegant contrast
between this lighter line and the bold .title-en-2. */
.title-en-1 {
font-weight: 400; /* Syne has no 300; 400 is the lightest */
font-style: italic; /* Synthetic italic — still creates tonal contrast */
letter-spacing: -0.025em; /* Syne is naturally wider; tighten to match scale */
}
/* ── Hero display accent em inside line 2
Was Cormorant italic — keep italic feel with Syne */
.title-en-2 em {
font-family: var(--font-display); /* Syne */
font-weight: 500; /* Slightly lighter than the 800 surrounding it */
font-style: italic;
letter-spacing: -0.01em;
font-size: 1.08em; /* Subtle scale (was 1.12em for Cormorant) */
}
/* ── Arabic display headline (نسيج)
Alexandria is a geometric sans — it sits higher than Amiri's
calligraphic descenders, so line-height needs recalibration. */
.title-ar {
font-family: var(--font-arabic); /* Alexandria */
line-height: 0.9; /* Looser than Amiri's 0.88 — avoids clipping */
letter-spacing: 0em; /* Remove legacy Amiri negative kern */
font-weight: 800; /* Alexandria 800 = maximum editorial weight */
}
/* ── RTL hero Arabic display (reduced scale in RTL layout) */
[dir="rtl"] .title-ar {
font-size: var(--type-3xl); /* slight reduction vs default */
line-height: 0.92;
}
/* ── Secondary Arabic headline block (RTL mode)
Alexandria 700 for a slightly subordinate weight */
.title-ar-main {
font-family: var(--font-arabic); /* Alexandria */
font-weight: 700;
line-height: 1.22; /* Was 1.35 for Amiri — Alexandria is more compact */
letter-spacing: 0em;
}
/* ── Arabic eyebrow label (RTL)
IBM Plex Sans Arabic tracks well at small sizes */
[dir="rtl"] .hero-eyebrow {
font-family: var(--font-arabic-sans); /* IBM Plex Sans Arabic */
letter-spacing: 0.05em; /* Reduced from 0.28em — Arabic doesn't track wide */
font-weight: 700;
}
/* ── Arabic body copy
IBM Plex Sans Arabic is more compact than Tajawal — reduce
line-height from 2 to 1.9 and scale up slightly for clarity */
[dir="rtl"] .hero-desc {
font-family: var(--font-arabic-sans); /* IBM Plex Sans Arabic */
line-height: 1.9; /* Was 2.0 — IBMPSA needs less leading */
font-size: clamp(0.92rem, 1.15vw, 1.05rem);
}
/* ── Arabic mobile nav brand mark */
.mobile-brand-ar {
font-family: var(--font-arabic); /* Alexandria */
font-weight: 800;
letter-spacing: 0em;
line-height: 1.1;
}
/* ── Arabic mobile nav links */
[dir="rtl"] .mobile-links a {
font-family: var(--font-arabic-sans); /* IBM Plex Sans Arabic */
font-style: normal; /* No synthetic italic in Arabic */
font-weight: 500;
}
/* ── Arabic button labels */
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-ghost {
font-family: var(--font-arabic-sans); /* IBM Plex Sans Arabic */
letter-spacing: 0.02em;
font-size: 0.76rem;
}
/* ── Arabic ctrl-lang pill label
IBM Plex Sans Arabic renders crisply at 11–12px */
.ctrl-lang-ar {
font-family: var(--font-arabic-sans); /* IBM Plex Sans Arabic */
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.01em;
}
/* ── Arabic section body text (philosophy, service descriptions) */
[dir="rtl"] p,
[dir="rtl"] .philosophy-desc,
[dir="rtl"] .service-desc,
[dir="rtl"] .bento-body,
[dir="rtl"] .footer-tagline {
font-family: var(--font-arabic-sans); /* IBM Plex Sans Arabic */
line-height: 1.85;
}
/* ── Arabic section headings (h2, h3 level) */
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .bento-title,
[dir="rtl"] .service-title,
[dir="rtl"] .philosophy-title,
[dir="rtl"] .footer-brand-ar,
[dir="rtl"] .studio-headline {
font-family: var(--font-arabic); /* Alexandria */
font-weight: 700;
letter-spacing: 0em;
line-height: 1.2;
}
/* ─────────────────────────────────────────────────
2. RESET & BASE
───────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
width: 100%;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
background-color: var(--cream);
color: var(--ink);
width: 100%;
min-width: 320px;
overflow-x: hidden;
cursor: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color var(--dur-theme) var(--ease-in-out),
color var(--dur-theme) var(--ease-in-out);
}
::selection {
background-color: var(--copper);
color: var(--cream);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: none; border: none; background: none; font-family: inherit; color: inherit; }
ul, ol { list-style: none; }
em { font-style: italic; color: var(--copper); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--copper); border-radius: 2px; }
:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
border-radius: 2px;
}
/* ── Visually-hidden / screen-reader-only utility ──────────
Used by .skip-to-content when not focused and by
#a11y-announcer at all times. The clip-path trick avoids
the legacy clip:rect() syntax and is equally well-supported. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Skip-to-main-content link ──────────────────────────────
Keyboard-only shortcut: hidden off-screen until Tab brings
it into focus, then slides in from the top. The site-wide
:focus-visible rule above gives it the copper outline. */
.skip-to-content {
position: fixed;
top: -100%;
inset-inline-start: var(--pad-x);
z-index: 10000;
padding: 10px 20px;
background: var(--ink);
color: var(--cream);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 2px;
border: 1px solid var(--copper);
transition: top 0.2s var(--ease-expo);
text-decoration: none;
white-space: nowrap;
}
.skip-to-content:focus-visible {
top: 16px;
outline-offset: 4px;
}
.container {
max-width: var(--max-w);
width: 100%;
margin-inline: auto;
padding-inline: var(--pad-x);
}
/* Smooth color-transition for every theme-aware surface */
nav, section, footer, .bento-item, .philosophy-item, .service-item,
.control-panel, .ctrl-btn, .form-field input, .form-field select,
.form-field textarea, #navbar {
transition: background-color var(--dur-theme) var(--ease-in-out),
border-color var(--dur-theme) var(--ease-in-out),
color var(--dur-theme) var(--ease-in-out);
}
/* ─────────────────────────────────────────────────
3. INTERACTIVE CIRCUIT-THREAD CANVAS (v2 — Generative Circuit Loom)
───────────────────────────────────────────────── */
#thread-canvas {
position: fixed;
inset: 0;
/* CSS display size: always logical px — JS sets exact px in resize() */
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
/* ── GPU compositor promotion ──────────────────────────────────────
Elevates the canvas to its own GPU texture layer so the browser
blends it without CPU-side pixel readback on every rAF tick.
Eliminates the "compositing tax" of a shared paint layer. */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* ── Prevent double-scaling artifact ────────────────────────────
JS already sets the physical backing store to DPR × CSS size.
crisp-edges stops the OS compositor from applying a second
bilinear resample pass on sub-pixel compositing boundaries. */
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
/* ─────────────────────────────────────────────────
4. THEME RIPPLE — Expanding Thread Matrix
قناع دائري متمدد ينطلق من نقطة الضغط على المفتاح،
يطلي الشاشة بألوان الثيم الجديد قبل تبديل data-theme فعلياً.
───────────────────────────────────────────────── */
#theme-ripple {
position: fixed;
inset: 0;
z-index: 9900;
pointer-events: none;
background-color: var(--ripple-color, var(--cream));
clip-path: circle(0px at var(--ripple-x) var(--ripple-y));
will-change: clip-path;
}
#theme-ripple.is-expanding {
transition: clip-path var(--dur-theme) var(--ease-in-out);
}
/* ── Barba weaving-overlay transition (readiness — see script.js,
BarbaWeaveTransition). Stays display:none and is only ever toggled
to block by that module, which itself only runs once barba.js is
actually loaded on the page. clip-path is driven entirely by GSAP
inline styles at runtime, so no transition/clip-path is predefined
here beyond the inert base state. */
#loom-transition {
position: fixed;
inset: 0;
z-index: 9950;
pointer-events: none;
background-color: var(--surface);
background-image: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), transparent 60%);
}
/* ─────────────────────────────────────────────────
5. VIDEO OVERLAY
───────────────────────────────────────────────── */
#video-overlay {
position: fixed;
inset: 0;
z-index: 9800;
background: #04081C;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#intro-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#video-vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 50% 50%,
transparent 30%,
rgba(4, 8, 28, 0.55) 75%,
rgba(4, 8, 28, 0.9) 100%
);
pointer-events: none;
z-index: 1;
}
#video-progress-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--on-surface-08);
z-index: 3;
}
#video-progress-fill {
height: 100%;
width: 0%;
background: var(--copper);
transition: width 0.1s linear;
box-shadow: 0 0 6px var(--copper);
}
#skip-btn {
position: absolute;
bottom: 24px;
inset-inline-end: var(--pad-x);
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--on-surface-45);
padding: 9px 18px;
border: 1px solid var(--on-surface-18);
border-radius: 2px;
cursor: none;
z-index: 3;
transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
#skip-btn:hover {
color: var(--cream);
border-color: var(--copper);
background: var(--copper-06);
}
.skip-arrow {
display: inline-block;
transition: transform var(--dur-fast) var(--ease-expo);
}
#skip-btn:hover .skip-arrow { transform: translateX(5px); }
[dir="rtl"] #skip-btn:hover .skip-arrow { transform: translateX(-5px); }
#video-overlay.is-exiting {
animation: overlayFadeOut 1.1s var(--ease-in-out) forwards;
}
@keyframes overlayFadeOut {
0% { opacity: 1; }
100% { opacity: 0; pointer-events: none; }
}
/* ─────────────────────────────────────────────────
6. CUSTOM CURSOR — WEAVING SHUTTLE
───────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
CURSOR ENGINE — Premium Weaving Shuttle
──────────────────────────────────────────────────────────────
Light: gold dot + gold-edge shuttle on page bg
Dark : cyber-blue dot + blue-edge shuttle on obsidian
Shuttle SVG parts animate via CSS — body fill, edge stroke,
spool ring, and tail all use theme CSS vars automatically.
══════════════════════════════════════════════════════════════ */
/* ── Precision dot — pulsing glow, snaps to cursor ── */
#cursor-dot {
position: fixed;
top: 0; left: 0;
width: 7px;
height: 7px;
background: var(--copper);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 9999;
box-shadow:
0 0 6px 1px rgba(var(--accent-rgb), 0.70),
0 0 14px 2px rgba(var(--accent-rgb), 0.30);
animation: dotCorePulse 2.8s ease-in-out infinite;
transition:
background var(--dur-theme) ease,
box-shadow var(--dur-theme) ease,
transform 0.12s ease,
opacity 0.3s ease,
width 0.3s var(--ease-expo),
height 0.3s var(--ease-expo);
will-change: left, top, transform;
}
@keyframes dotCorePulse {
0%, 100% { box-shadow: 0 0 6px 1px rgba(var(--accent-rgb), 0.70), 0 0 14px 2px rgba(var(--accent-rgb), 0.30); }
50% { box-shadow: 0 0 10px 3px rgba(var(--accent-rgb), 0.90), 0 0 24px 6px rgba(var(--accent-rgb), 0.18); }
}
/* ── Shuttle SVG wrapper ── */
#cursor-shuttle {
position: fixed;
top: 0; left: 0;
width: 52px;
height: 32px;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
will-change: left, top, transform;
/* Cinematic glow: light=subtle ink shadow / dark=accent fiber glow */
filter:
drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.50))
drop-shadow(0 1px 6px rgba(var(--text-rgb), 0.20));
transition:
filter var(--dur-theme) ease,
width 0.30s var(--ease-expo),
height 0.30s var(--ease-expo),
opacity 0.35s ease;
}
/* ── SVG sub-part transitions (theme flip) ── */
#cursor-shuttle .shuttle-body { transition: fill var(--dur-theme) ease; }
#cursor-shuttle .shuttle-edge { transition: stroke var(--dur-theme) ease; }
/* ── Back band breathing (woven depth feel) ── */
#cursor-shuttle .shuttle-band-back {
animation: bandBreathe 3.5s ease-in-out infinite;
}
@keyframes bandBreathe {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.72; }
}
/* ── Sparkle: slow rotation at rest, fast on hover ── */
#cursor-shuttle .shuttle-spark {
transform-origin: 12px 10px;
animation: sparkSpin 8s linear infinite;
}
@keyframes sparkSpin {
from { transform: translate(12px,10px) rotate(0deg) translate(-12px,-10px); }
to { transform: translate(12px,10px) rotate(360deg) translate(-12px,-10px); }
}
body.cursor-hover #cursor-shuttle .shuttle-spark {
animation: sparkSpinFast 0.9s linear infinite;
}
@keyframes sparkSpinFast {
from { transform: translate(12px,10px) rotate(0deg) translate(-12px,-10px); }
to { transform: translate(12px,10px) rotate(360deg) translate(-12px,-10px); }
}
/* ── Halo pulse ── */
#cursor-shuttle .shuttle-halo {
animation: haloPulse 2.8s ease-in-out infinite;
}
@keyframes haloPulse {
0%, 100% { opacity: 0.18; }
50% { opacity: 0.32; }
}
/* ── Tail thread: subtle pulse ── */
#cursor-shuttle .shuttle-tail {
animation: tailFlicker 3s ease-in-out infinite;
}
@keyframes tailFlicker {
0%, 100% { stroke-opacity: 0.55; }
50% { stroke-opacity: 0.95; }
}
/* ── Thread trail canvas ── */
#cursor-trail {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9997;
}
/* ─── HOVER — interactive element ─── */
body.cursor-hover #cursor-dot {
width: 4px;
height: 4px;
opacity: 0.85;
transform: translate(-50%, -50%);
}
body.cursor-hover #cursor-shuttle {
width: 62px;
height: 38px;
filter:
drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.85))
drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.40))
drop-shadow(0 2px 8px rgba(var(--text-rgb), 0.15));
}
/* ─── HOVER — magnetic control buttons (tighter focus feel) ─── */
body.cursor-hover-ctrl #cursor-dot {
width: 3px;
height: 3px;
transform: translate(-50%, -50%);
}
body.cursor-hover-ctrl #cursor-shuttle {
width: 42px;
height: 26px;
filter:
drop-shadow(0 0 10px rgba(var(--accent-rgb), 1.00))
drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.55));
}
/* ─── CLICK / PRESS state ─── */
body.cursor-click #cursor-dot {
transform: translate(-50%, -50%) scale(0.5);
transition: transform 0.08s ease;
}
body.cursor-click #cursor-shuttle {
width: 46px;
height: 29px;
filter:
drop-shadow(0 0 14px rgba(var(--accent-rgb), 1.00))
drop-shadow(0 0 30px rgba(var(--accent-rgb), 0.60));
}
/* ─────────────────────────────────────────────────
7. SITE WRAPPER
───────────────────────────────────────────────── */
#site-wrapper {
position: relative;
z-index: 1;
width: 100%;
overflow-x: hidden;
}
/* ─────────────────────────────────────────────────
8. NAVIGATION
───────────────────────────────────────────────── */
#navbar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-h);
padding-inline: var(--pad-x);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 500;
transition: background 0.5s var(--ease-expo), backdrop-filter 0.5s, border-color 0.5s;
border-bottom: 1px solid transparent;
}
#navbar.scrolled {
background: rgba(var(--bg-rgb), 0.88);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom-color: var(--ink-10);
}
/* ── Scroll Progress Thread ──
A thin track spanning the navbar's bottom edge; the fill width is
driven 0%→100% by ScrollTrigger's scrub (1:1 with scroll position,
so it's exempt from the reduced-motion block — it never animates
on its own, only in direct response to the user's own scrolling). */
#scroll-thread {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: rgba(var(--text-rgb), 0.08);
pointer-events: none;
}
#scroll-thread-fill {
position: relative;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--copper), var(--copper-light));
}
[dir="rtl"] #scroll-thread-fill {
margin-inline-start: auto;
}
/* Glowing tip — the "shuttle" riding the leading edge of the thread */
#scroll-thread-fill::after {
content: '';
position: absolute;
top: 50%; inset-inline-end: 0;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--copper-light);
box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), 0.55);
transform: translate(50%, -50%);
}
.nav-brand {
display: flex;
align-items: center;
gap: 13px;
flex-shrink: 0;
min-width: 0;
}
/* ══════════════════════════════════════════════════════════════
BRAND LOGO — real ![]()
, theme-reactive
──────────────────────────────────────────────────────────────
Plain ![]()
tag so it always renders regardless of mask-image
support or CSS/HTML path differences. The source PNG is navy
ink on transparent; a CSS filter inverts it to white in dark
mode so it still reads clearly, then a subtle hue/saturate pass
nudges that white toward the cyber-blue accent so it stays in
step with the rest of the theme rather than going flat white.
Hover adds a lift + soft accent glow.
══════════════════════════════════════════════════════════════ */
.brand-logo-img {
display: block;
width: clamp(120px, 14vw, 148px);
height: auto;
flex-shrink: 0;
filter: none;
transition:
filter 0.5s var(--ease-expo),
transform 0.4s var(--ease-spring);
}
[data-theme="dark"] .brand-logo-img {
/* Navy → white, then tint toward cyber-blue */
filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(175deg) brightness(1.15);
}
.nav-brand:hover .brand-logo-img {
transform: translateY(-1px) scale(1.03);
filter: drop-shadow(0 3px 10px rgba(var(--accent-rgb), 0.4));
}
[data-theme="dark"] .nav-brand:hover .brand-logo-img {
filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(175deg) brightness(1.15)
drop-shadow(0 3px 10px rgba(var(--accent-rgb), 0.55));
}
.nav-brand:active .brand-logo-img {
transform: scale(0.97);
transition-duration: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
.brand-logo-img { transition: filter 0.5s ease; }
.nav-brand:hover .brand-logo-img { transform: none; }
}
/* Nav links (desktop) */
.nav-links {
display: flex;
align-items: center;
gap: 2.2rem;
}
.nav-links a {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-60);
position: relative;
transition: color var(--dur-fast) ease;
padding-block: 4px;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -2px; inset-inline-start: 0;
width: 0; height: 1px;
background: var(--copper);
transition: width 0.38s var(--ease-expo);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
/* Nav right cluster */
.nav-right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.nav-cta {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cream);
background: var(--ink);
padding: 10px 22px;
border-radius: 2px;
position: relative;
overflow: hidden;
transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring), color var(--dur-theme) ease;
white-space: nowrap;
}
.nav-cta:hover {
background: var(--copper);
transform: translateY(-1px);
}
/* Magnetic Press — instant scale-down feedback on press, layered on
top of the hover lift above. Native :active means it works the
same across mouse, touch and stylus with zero JS. */
.nav-cta:active {
transform: scale(0.96);
transition-duration: 0.12s;
}
/* Mobile hamburger button — hidden on desktop */
.nav-menu-btn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 2px;
position: relative;
z-index: 1100;
}
.menu-line {
display: block;
width: 20px;
height: 1.5px;
background: var(--ink);
border-radius: 1px;
transition: transform 0.35s var(--ease-expo), opacity 0.25s ease, background 0.3s ease;
}
.ml-2 { width: 13px; align-self: flex-end; background: var(--copper); }
[dir="rtl"] .ml-2 { align-self: flex-start; }
body.menu-open .menu-line { background: var(--ink); }
body.menu-open .ml-1 { transform: translateY(6.5px) rotate(45deg); width: 20px; }
body.menu-open .ml-2 { opacity: 0; transform: translateX(10px); }
body.menu-open .ml-3 { transform: translateY(-6.5px) rotate(-45deg); width: 20px; }
/* ─────────────────────────────────────────────────
8b. FLOATING CONTROL PANEL — Language + Theme
───────────────────────────────────────────────── */
.control-panel {
display: flex;
align-items: center;
gap: 6px;
padding: 4px;
border: 1px solid var(--ink-10);
border-radius: 30px;
background: var(--cream-mid);
}
.ctrl-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 32px;
border-radius: 18px;
font-family: var(--font-sans);
color: var(--ink-60);
transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
/* ── Language toggle ── */
.ctrl-lang {
gap: 2px;
padding: 0 3px;
}
.ctrl-lang-en,
.ctrl-lang-ar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 0 10px;
border-radius: 14px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
transition: background var(--dur-mid) var(--ease-expo), color var(--dur-mid) ease;
}
.ctrl-lang-ar { font-family: var(--font-arabic-sans); font-size: 0.7rem; }
.ctrl-divider {
font-size: 0.6rem;
opacity: 0.3;
padding: 0 1px;
}
.ctrl-lang-en.active,
.ctrl-lang-ar.active {
background: var(--ink);
color: var(--cream);
}
/* Hidden helper element kept for backward layout compatibility */
.ctrl-pill { display: none; }
/* ── Theme toggle ── */
.ctrl-theme {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.ctrl-theme svg {
position: absolute;
width: 17px;
height: 17px;
transition: opacity 0.4s var(--ease-expo), transform 0.55s var(--ease-spring);
}
.ctrl-theme .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.ctrl-theme .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.4); }
[data-theme="dark"] .ctrl-theme .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.4); }
[data-theme="dark"] .ctrl-theme .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.control-panel:hover { border-color: var(--copper-20); }
.ctrl-btn:hover { color: var(--ink); }
/* Click feedback */
.ctrl-btn.is-pressed { transform: scale(0.9); }
/* ─────────────────────────────────────────────────
8c. MOBILE NAVIGATION PANEL
───────────────────────────────────────────────── */
.mobile-overlay {
position: fixed;
inset: 0;
background: rgba(var(--surface-rgb), 0.45);
backdrop-filter: blur(4px);
z-index: 1050;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease-in-out);
}
body.menu-open .mobile-overlay {
opacity: 1;
pointer-events: auto;
}
.mobile-nav {
position: fixed;
top: 0; inset-inline-end: 0;
width: min(86vw, 400px);
height: 100%;
height: 100dvh;
background: var(--surface);
z-index: 1060;
display: flex;
flex-direction: column;
padding: 32px clamp(28px, 6vw, 48px);
transform: translateX(100%);
transition: transform 0.5s var(--ease-in-out);
overflow-y: auto;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
}
[dir="rtl"] .mobile-nav { transform: translateX(-100%); }
body.menu-open .mobile-nav { transform: translateX(0); }
.mobile-close {
align-self: flex-end;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--on-surface);
border: 1px solid var(--on-surface-18);
border-radius: 2px;
transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-spring);
}
[dir="rtl"] .mobile-close { align-self: flex-start; }
.mobile-close svg { width: 16px; height: 16px; }
.mobile-close:hover {
border-color: var(--copper);
color: var(--copper-light);
transform: rotate(90deg);
}
.mobile-brand {
margin-top: 48px;
display: flex;
flex-direction: column;
gap: 6px;
}
.mobile-brand-latin {
font-family: var(--font-sans);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.24em;
color: var(--on-surface);
}
.mobile-brand-ar {
font-family: var(--font-arabic);
font-size: 1.3rem;
font-weight: 700;
color: var(--copper-light);
}
.mobile-links {
margin-top: 56px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-links a {
display: block;
font-family: var(--font-display);
font-size: clamp(28px, 8vw, 40px);
font-weight: 500;
font-style: italic;
color: var(--on-surface-85);
padding-block: 12px;
border-bottom: 1px solid var(--on-surface-08);
transition: color 0.3s ease, padding-inline-start 0.3s var(--ease-expo);
}
[dir="rtl"] .mobile-links a {
font-family: var(--font-arabic);
font-style: normal;
font-size: clamp(26px, 7vw, 36px);
}
.mobile-links a:hover,
.mobile-links a:active {
color: var(--copper-light);
padding-inline-start: 12px;
}
.mobile-cta {
margin-top: 32px;
text-align: center;
justify-content: center;
background: var(--copper);
}
.mobile-cta:hover {
background: var(--copper-light);
}
/* Mobile controls (lang + theme) inside the panel */
.mobile-controls {
display: flex;
align-items: center;
gap: 10px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--on-surface-08);
}
.mobile-controls .ctrl-btn {
color: var(--on-surface-65);
}
.mobile-controls .ctrl-lang {
border: 1px solid var(--on-surface-11);
border-radius: 18px;
background: var(--on-surface-04);
}
.mobile-controls .ctrl-lang-en.active,
.mobile-controls .ctrl-lang-ar.active {
background: var(--copper);
color: var(--surface);
}
.mobile-controls .ctrl-theme {
border: 1px solid var(--on-surface-11);
border-radius: 50%;
background: var(--on-surface-04);
}
.mobile-controls .ctrl-btn:hover { color: var(--copper-light); }
.mobile-circuit-deco {
margin-top: auto;
width: 100%;
max-height: 100px;
padding-top: 32px;
opacity: 0.9;
}
/* ─────────────────────────────────────────────────
9. HERO SECTION
───────────────────────────────────────────────── */
#hero {
min-height: 100svh;
padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px));
padding-bottom: clamp(48px, 6vw, 80px);
padding-inline: var(--pad-x);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
width: 100%;
}
.hero-inner {
max-width: var(--max-w);
margin-inline: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
flex: 1;
position: relative;
gap: clamp(24px, 3vw, 40px);
}
.hero-eyebrow {
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 22px;
}
[dir="rtl"] .hero-eyebrow { font-family: var(--font-arabic-sans); letter-spacing: 0.05em; }
/* ── Hero weaving canvas — replaces the eyebrow line, morphs into
Development / Branding / UI shapes (see weaving-anim.js) ── */
.hero-weaving-wrap {
width: 100%;
max-width: 280px;
height: 60px;
margin-bottom: 22px;
}
#hero-weaving-canvas {
display: block;
width: 100%;
height: 100%;
/* Glow moved here from per-frame ctx.shadowBlur — this is GPU
composited once instead of software-blurred on every stroke,
every frame, for every one of the 5 lines. Color is kept in
sync with the active theme's accent via a JS-set CSS var. */
filter: drop-shadow(0 0 5px rgba(var(--weaving-glow-rgb, var(--accent-rgb)), 0.45));
will-change: filter;
}
.hero-title {
display: flex;
flex-direction: column;
gap: 0;
line-height: 1;
max-width: 100%;
}
.title-ar {
display: block;
font-family: var(--font-arabic);
font-size: var(--type-display);
font-weight: 700;
line-height: 0.88;
color: var(--ink);
letter-spacing: -0.01em;
}
.title-en-1 {
display: block;
font-family: var(--font-display);
font-style: italic;
font-size: var(--type-2xl);
font-weight: 300;
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.015em;
margin-inline-start: 0; /* MOD 1: no side offset — centred layout */
margin-top: 4px;
}
.title-en-2 {
display: block;
font-family: var(--font-sans);
font-size: clamp(17px, 3vw, 48px);
font-weight: 800;
line-height: 1.12;
color: var(--ink);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-inline-start: 0; /* MOD 1: centred */
margin-top: 6px;
}
.title-en-2 em {
font-family: var(--font-display);
font-weight: 700;
font-style: italic;
letter-spacing: 0.01em;
font-size: 1.12em;
}
/* ── Arabic hero headline (RTL only) ──
تستبدل بصرياً السطرين اللاتينيين عند dir="rtl"،
بنفس وزن وحجم التكوين الإجمالي لكن بطباعة عربية كاملة. */
.title-ar-main {
display: none;
font-family: var(--font-arabic);
font-size: var(--type-2xl);
font-weight: 700;
line-height: 1.35;
color: var(--ink);
letter-spacing: 0;
margin-top: 14px;
}
.title-ar-main em {
font-style: normal;
color: var(--copper);
}
[dir="rtl"] .title-en-1,
[dir="rtl"] .title-en-2 {
display: none;
}
[dir="rtl"] .title-ar-main {
display: block;
}
[dir="rtl"] .title-ar {
font-size: var(--type-3xl);
}
/* ── Kinetic Typography ──
Generic word-split clip-reveal structure, written by KineticType.split()
in script.js. .kinetic-line is the clip mask (overflow:hidden); the verb
GSAP animates lives one level in, on .kinetic-word, so the mask itself
never moves and the surrounding line-height/baseline is undisturbed. */
.kinetic-line {
display: inline-block;
overflow: hidden;
vertical-align: top;
line-height: inherit;
}
.kinetic-word {
display: inline-block;
will-change: transform;
}
.hero-desc {
max-width: min(480px, 62ch);
font-size: clamp(0.87rem, 1.05vw, 1rem);
line-height: 1.8;
color: var(--ink-60);
margin-top: 0;
}
[dir="rtl"] .hero-desc {
font-family: var(--font-arabic-sans);
line-height: 2;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* ── Buttons ── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cream);
background: linear-gradient(165deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 40%), var(--ink);
padding: 14px 28px;
border-radius: 2px;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 1px 2px rgba(0, 0, 0, 0.12);
transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, color var(--dur-theme) ease;
}
/* Hairline edge — subtle light-catching border so the button reads
as a raised, lit surface rather than a flat color fill. */
.btn-primary::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
/* Sheen sweep — a single light pulse travels across on hover,
echoing the circuit-charge animation used on the logo mark. */
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
transparent 30%,
rgba(255, 255, 255, 0.22) 50%,
transparent 70%
);
transform: translateX(-120%);
transition: transform 0.65s var(--ease-expo);
pointer-events: none;
}
[dir="rtl"] .btn-primary::before {
transform: translateX(120%);
}
.btn-primary:hover::before {
transform: translateX(120%);
}
[dir="rtl"] .btn-primary:hover::before {
transform: translateX(-120%);
}
.btn-primary:hover {
background: linear-gradient(165deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 45%), var(--copper);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.15),
0 8px 24px rgba(var(--accent-rgb), 0.28);
}
.btn-primary:active {
transform: scale(0.96);
transition-duration: 0.12s;
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
padding: 13px 27px;
border: 1px solid var(--ink-40);
border-radius: 2px;
position: relative;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease;
}
.btn-ghost:hover {
border-color: var(--copper);
color: var(--copper-dark);
background: var(--copper-06);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 6px 18px rgba(var(--accent-rgb), 0.14);
}
.btn-ghost:active {
transform: scale(0.96);
transition-duration: 0.12s;
}
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-ghost,
[dir="rtl"] .nav-cta,
[dir="rtl"] .mobile-cta {
font-family: var(--font-arabic-sans);
letter-spacing: 0.02em;
}
/* Hero stats */
.hero-meta {
display: flex;
align-items: center;
gap: 36px;
padding-top: 30px;
width: fit-content;
max-width: 100%;
flex-wrap: wrap;
position: relative;
}
/* ── Woven divider ──
Two interleaved dashed threads (ink + accent) offset by half a
phase so each dash of one line sits in the gap of the other —
reads as a fine over/under weave instead of a flat border,
and stays theme-aware since it's built from the live CSS vars. */
.hero-meta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background-image:
repeating-linear-gradient(
90deg,
var(--ink-40) 0 7px,
transparent 7px 14px
),
repeating-linear-gradient(
90deg,
transparent 0 7px,
rgba(var(--accent-rgb), 0.55) 7px 14px
);
background-position: 0 1px, 7px 5px;
background-size: 100% 1.5px, 100% 1.5px;
background-repeat: repeat-x;
}
[dir="rtl"] .hero-meta::before {
background-position: 0 1px, -7px 5px;
}
.hero-stat {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 6px;
}
.stat-num {
font-family: var(--font-display);
font-size: var(--type-lg);
font-weight: 700;
line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums;
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
transition: color var(--dur-theme) ease;
}
/* Brief settle pulse once the count-up animation lands on its
final value — a small copper flash + scale, then eases back. */
.stat-num--landed {
animation: statLand 0.38s var(--ease-expo);
}
@keyframes statLand {
0% { color: var(--copper); transform: scale(1.08); }
100% { color: var(--ink); transform: scale(1); }
}
.stat-plus {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
color: var(--copper);
line-height: 1;
}
.stat-label {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-40);
line-height: 1.45;
margin-inline-start: 6px;
}
[dir="rtl"] .stat-label {
font-family: var(--font-arabic-sans);
letter-spacing: 0.02em;
}
.stat-divider {
width: 1px;
height: 38px;
background: var(--ink-10);
flex-shrink: 0;
}
/* Scroll hint */
.scroll-hint {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 10px;
position: absolute;
bottom: 28px;
inset-inline-start: var(--pad-x);
}
[dir="rtl"] .scroll-hint { align-items: flex-end; }
.scroll-hint span {
font-family: var(--font-sans);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-40);
}
[dir="rtl"] .scroll-hint span { font-family: var(--font-arabic-sans); letter-spacing: 0.04em; }
.scroll-thread-line {
width: 1px;
height: 50px;
background: linear-gradient(to bottom, var(--copper) 0%, transparent 100%);
animation: threadPulse 2.2s ease-in-out infinite;
}
@keyframes threadPulse {
0%, 100% { opacity: 0.35; transform: scaleY(1); }
50% { opacity: 0.75; transform: scaleY(1.08); }
}
/* ─────────────────────────────────────────────────
10. THREAD DIVIDERS
───────────────────────────────────────────────── */
.thread-divider {
width: 100%;
height: clamp(50px, 8vw, 100px);
position: relative;
z-index: 2;
overflow: visible;
}
.thread-divider svg {
display: block;
width: 100%;
height: 100%;
}
[dir="rtl"] .thread-divider svg {
transform: scaleX(-1);
}
.td-into-dark {
margin-bottom: 0;
}
/* ─────────────────────────────────────────────────
11. SECTION SHARED STYLES
───────────────────────────────────────────────── */
.section-head {
margin-bottom: clamp(32px, 4.5vw, 56px);
}
.eyebrow {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 14px;
display: block;
}
[dir="rtl"] .eyebrow { font-family: var(--font-arabic-sans); letter-spacing: 0.08em; }
.section-title {
font-family: var(--font-display);
font-size: var(--type-xl);
font-weight: 600;
line-height: 1.04;
color: var(--ink);
clip-path: inset(0 100% 0 0);
}
.section-title.in-view {
clip-path: inset(0 0% 0 0);
transition: clip-path 1.3s var(--ease-in-out);
}
[dir="rtl"] .section-title {
font-family: var(--font-arabic);
font-weight: 700;
clip-path: inset(0 0 0 100%);
}
[dir="rtl"] .section-title.in-view {
clip-path: inset(0 0 0 0%);
}
/* ─────────────────────────────────────────────────
12. SERVICES SECTION
───────────────────────────────────────────────── */
#services {
padding-block: var(--section-py);
width: 100%;
overflow: hidden;
}
.services-list {
display: flex;
flex-direction: column;
}
.service-item {
display: grid;
grid-template-columns: 64px 1fr 32px;
align-items: start;
gap: 18px;
padding-block: 32px;
border-bottom: 1px solid var(--ink-10);
position: relative;
cursor: none;
}
.service-item:first-child {
border-top: 1px solid var(--ink-10);
}
.service-item::after {
content: '';
position: absolute;
bottom: -1px; inset-inline-start: 0;
width: 0; height: 1px;
background: var(--copper);
transition: width 0.55s var(--ease-expo);
}
.service-item:hover::after { width: 100%; }
.service-item:hover { background: var(--copper-06); }
.service-num {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 300;
color: var(--ink-20);
line-height: 1;
padding-top: 6px;
transition: color var(--dur-mid) ease;
user-select: none;
direction: ltr;
}
.service-item:hover .service-num { color: var(--copper-light); }
.service-body { flex: 1; min-width: 0; }
.service-name {
font-family: var(--font-display);
font-size: var(--type-md);
font-weight: 600;
color: var(--ink);
margin-bottom: 6px;
line-height: 1.05;
transition: transform 0.45s var(--ease-expo);
}
[dir="rtl"] .service-name {
font-family: var(--font-arabic);
font-weight: 700;
}
.service-item:hover .service-name { transform: translateX(10px); }
[dir="rtl"] .service-item:hover .service-name { transform: translateX(-10px); }
.service-ar {
font-family: var(--font-arabic);
font-size: 0.95rem;
font-weight: 400;
color: var(--copper);
margin-bottom: 14px;
}
.service-desc {
font-size: 0.88rem;
line-height: 1.72;
color: var(--ink-60);
max-width: 540px;
}
[dir="rtl"] .service-desc { font-family: var(--font-arabic-sans); line-height: 1.95; }
.service-arrow {
font-size: 1.4rem;
color: var(--ink-20);
padding-top: 10px;
transition: transform 0.45s var(--ease-expo), color var(--dur-mid) ease;
user-select: none;
}
.service-item:hover .service-arrow {
transform: translate(5px, -5px);
color: var(--copper);
}
[dir="rtl"] .service-arrow { transform: scaleX(-1); }
[dir="rtl"] .service-item:hover .service-arrow {
transform: scaleX(-1) translate(5px, -5px);
}
/* ─────────────────────────────────────────────────
13. WORKS / BENTO GRID
───────────────────────────────────────────────── */
#works {
padding-block: var(--section-py);
width: 100%;
overflow: hidden;
}
.bento-grid-wrapper {
padding-inline: var(--pad-x);
max-width: var(--max-w);
margin-inline: auto;
width: 100%;
box-sizing: border-box;
}
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows:
min(340px, 26vw)
min(260px, 20vw)
min(300px, 23vw);
gap: 10px;
width: 100%;
}
.bi-large { grid-column: 1 / 6; grid-row: 1 / 3; }
.bi-medium { grid-column: 6 / 9; grid-row: 1 / 2; }
.bi-tall { grid-column: 9 / 13; grid-row: 1 / 3; }
.bi-small { grid-column: 6 / 9; grid-row: 2 / 3; }
.bi-wide { grid-column: 1 / 7; grid-row: 3 / 4; }
.bi-medium2 { grid-column: 7 / 10; grid-row: 3 / 4; }
.bi-small2 { grid-column: 10 / 13; grid-row: 3 / 4; }
.bento-item {
position: relative;
overflow: hidden;
border-radius: 3px;
cursor: none;
/* opacity and transform are intentionally NOT set here.
GSAP owns the initial hidden state via gsap.set() inside
PortfolioFilter. Setting them in CSS as well causes a race
condition where the browser paints opacity:0 permanently
if the ScrollTrigger fails to fire (e.g. element already
in view on load, or trigger selector not found). */
min-width: 0;
}
.bento-bg {
position: absolute;
inset: 0;
transition: transform 0.75s var(--ease-expo);
}
.bento-item:hover .bento-bg { transform: scale(1.04); }
/* Circuit-trace overlay — accent PCB lines + nodes */
.bento-circuit-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.18;
background-image:
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 38px,
rgba(var(--accent-rgb), 0.5) 38px,
rgba(var(--accent-rgb), 0.5) 39px,
transparent 39px,
transparent 78px
),
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 38px,
rgba(246, 248, 255, 0.12) 38px,
rgba(246, 248, 255, 0.12) 39px,
transparent 39px,
transparent 78px
),
radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb),0.35) 0, rgba(var(--accent-rgb),0.35) 2px, transparent 3px),
radial-gradient(circle at 60% 70%, rgba(var(--accent-rgb),0.35) 0, rgba(var(--accent-rgb),0.35) 2px, transparent 3px),
radial-gradient(circle at 85% 15%, rgba(246,248,255,0.25) 0, rgba(246,248,255,0.25) 2px, transparent 3px);
background-size: 78px 78px, 78px 78px, 100% 100%, 100% 100%, 100% 100%;
transition: opacity 0.6s ease;
}
.bento-item:hover .bento-circuit-overlay { opacity: 0.32; }
[data-theme="dark"] .bento-item:hover .bento-circuit-overlay {
opacity: 0.45;
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
}
.bento-content {
position: absolute;
bottom: 0; inset-inline-start: 0; inset-inline-end: 0;
padding: 22px 22px 20px;
background: linear-gradient(to top, rgba(4,8,28,0.80) 0%, rgba(4,8,28,0.25) 65%, transparent 100%);
color: #fff;
z-index: 2;
transform: translateY(4px);
transition: transform 0.5s var(--ease-expo);
}
.bento-item:hover .bento-content { transform: translateY(0); }
.bento-cat {
font-family: var(--font-sans);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(246, 248, 255, 0.65);
margin-bottom: 7px;
}
[dir="rtl"] .bento-cat { font-family: var(--font-arabic-sans); letter-spacing: 0.05em; }
.bento-title {
font-family: var(--font-display);
font-size: clamp(18px, 2.2vw, 30px);
font-weight: 600;
color: #fff;
line-height: 1.1;
}
[dir="rtl"] .bento-title { font-family: var(--font-arabic); font-weight: 700; }
.bento-sub {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.55);
margin-top: 6px;
line-height: 1.5;
}
[dir="rtl"] .bento-sub { font-family: var(--font-arabic-sans); line-height: 1.8; }
.bento-link-icon {
position: absolute;
top: 14px; inset-inline-end: 14px;
font-size: 1rem;
color: rgba(246, 248, 255, 0.4);
z-index: 3;
transition: transform 0.45s var(--ease-expo), color var(--dur-mid) ease;
line-height: 1;
}
.bento-item:hover .bento-link-icon {
transform: translate(4px, -4px);
color: var(--copper-light);
}
[dir="rtl"] .bento-link-icon { transform: scaleX(-1); }
[dir="rtl"] .bento-item:hover .bento-link-icon {
transform: scaleX(-1) translate(4px, -4px);
}
.bento-item::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: 3px;
z-index: 4;
pointer-events: none;
transition: border-color 0.4s ease;
}
.bento-item:hover::before { border-color: var(--copper); }
[data-theme="dark"] .bento-item:hover::before {
border-color: var(--copper);
box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}
/* Keyboard focus — same copper border treatment as hover, plus the
standard site-wide outline, so keyboard users get clear card
focus indication that matches the visual hover style. The
::before pseudo-element is already on every .bento-item so
we only need to activate it on :focus-visible. */
.bento-item:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
}
.bento-item:focus-visible::before {
border-color: var(--copper);
box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.30);
}
/* Trigger the same reveal animations on keyboard focus as on hover */
.bento-item:focus-visible .bento-bg { transform: scale(1.04); }
.bento-item:focus-visible .bento-circuit-overlay { opacity: 0.28; }
.bento-item:focus-visible .bento-content { transform: translateY(0); }
.bento-item:focus-visible .bento-link-icon {
opacity: 1;
transform: translate(0, 0) scale(1);
}
#studio {
padding-block: var(--section-py);
width: 100%;
overflow: hidden;
}
.studio-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
width: 100%;
}
.studio-headline {
font-family: var(--font-display);
font-size: var(--type-xl);
font-weight: 600;
line-height: 1.08;
color: var(--ink);
margin-top: 18px;
}
[dir="rtl"] .studio-headline {
font-family: var(--font-arabic);
font-weight: 700;
line-height: 1.4;
}
.studio-quote-ar {
font-family: var(--font-arabic);
font-size: 1.05rem;
font-weight: 700;
color: var(--ink-60);
margin-top: 30px;
padding-inline-end: 18px;
border-inline-end: 2px solid var(--copper);
line-height: 1.9;
}
.studio-body {
font-size: clamp(0.88rem, 1vw, 0.96rem);
line-height: 1.82;
color: var(--ink-60);
}
[dir="rtl"] .studio-body { font-family: var(--font-arabic-sans); line-height: 2.05; }
.studio-body--2 { margin-top: 1.5rem; }
.philosophy-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
gap: clamp(10px, 1.5vw, 16px);
margin-top: clamp(24px, 3.5vw, 40px);
}
.philosophy-item {
padding: 22px 20px;
border: 1px solid var(--ink-10);
border-radius: 3px;
background: transparent;
transition: border-color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease-expo);
min-width: 0;
}
.philosophy-item:hover {
border-color: var(--copper-20);
background: var(--copper-06);
transform: translateY(-2px);
}
.phi-icon {
display: block;
font-size: 1.1rem;
color: var(--copper);
margin-bottom: 11px;
line-height: 1;
transition: transform 0.5s var(--ease-expo), text-shadow 0.4s ease;
}
.philosophy-item:hover .phi-icon {
transform: rotate(45deg) scale(1.15);
text-shadow: 0 0 10px var(--copper-20);
}
.philosophy-item h4 {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 8px;
}
[dir="rtl"] .philosophy-item h4 { font-family: var(--font-arabic-sans); letter-spacing: 0.02em; }
.philosophy-item p {
font-size: 0.84rem;
line-height: 1.65;
color: var(--ink-60);
}
[dir="rtl"] .philosophy-item p { font-family: var(--font-arabic-sans); line-height: 1.9; }
/* ─────────────────────────────────────────────────
15. CONTACT SECTION
يستخدم --surface / --on-surface (ثابتان عبر الثيمين)
───────────────────────────────────────────────── */
#contact {
background: var(--surface);
padding-block: var(--section-py);
position: relative;
overflow: hidden;
width: 100%;
}
#contact::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--copper) 40%, var(--copper) 60%, transparent 100%);
opacity: 0.6;
}
#contact::after {
content: '';
position: absolute;
bottom: -30%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60%;
background: radial-gradient(ellipse, rgba(var(--accent-rgb),0.10) 0%, transparent 70%);
pointer-events: none;
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(36px, 5vw, 80px);
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--pad-x);
align-items: start;
position: relative;
z-index: 1;
width: 100%;
}
.contact-left .eyebrow { color: var(--copper-light); }
.contact-headline {
font-family: var(--font-display);
font-size: var(--type-xl);
font-weight: 600;
line-height: 1.04;
color: var(--on-surface);
margin-top: 14px;
}
[dir="rtl"] .contact-headline {
font-family: var(--font-arabic);
font-weight: 700;
line-height: 1.4;
}
.contact-headline em { color: var(--copper-light); }
.contact-ar {
font-family: var(--font-arabic);
font-size: 1.05rem;
font-weight: 700;
color: var(--on-surface-28);
margin-top: 20px;
line-height: 1.85;
}
.contact-info {
margin-top: 38px;
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-detail {
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
color: var(--on-surface-45);
letter-spacing: 0.05em;
transition: color var(--dur-fast) ease;
word-break: break-word;
direction: ltr;
unicode-bidi: plaintext;
}
[dir="rtl"] .contact-detail { font-family: var(--font-arabic-sans); }
/* Email link gets the same underline-draw treatment used by
nav-links / footer-links elsewhere — the plain text address
was the only link on the page without it. */
a.contact-detail {
position: relative;
width: fit-content;
}
a.contact-detail::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 1px;
background: var(--copper-light);
transition: width 0.4s var(--ease-expo);
}
a.contact-detail:hover { color: var(--copper-light); }
a.contact-detail:hover::after { width: 100%; }
/* Contact Form */
.contact-form {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 7px;
position: relative;
min-width: 0;
}
.form-field label {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--on-surface-35);
transition: color 0.3s ease;
}
.form-field:has(input:focus, select:focus, textarea:focus) label {
color: var(--copper-light);
}
[dir="rtl"] .form-field label { font-family: var(--font-arabic-sans); letter-spacing: 0.04em; }
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
background: var(--on-surface-04);
border: 1px solid var(--on-surface-11);
border-radius: 2px;
padding: 13px 15px;
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--on-surface);
outline: none;
resize: none;
-webkit-appearance: none;
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease-expo), box-shadow 0.3s ease;
}
/* Animated copper underline that draws in on focus — echoes the
site's thread / circuit-trace motion language used elsewhere
(service-item::after, nav-links a::after). */
.form-field {
--field-underline: 0%;
}
.form-field::after {
content: '';
position: absolute;
left: 1px;
right: 1px;
bottom: 0;
height: 2px;
width: var(--field-underline);
background: var(--copper);
border-radius: 0 0 2px 2px;
pointer-events: none;
transition: width 0.45s var(--ease-expo);
z-index: 1;
}
.form-field:has(input:focus, select:focus, textarea:focus) {
--field-underline: 100%;
}
[dir="rtl"] .form-field input,
[dir="rtl"] .form-field select,
[dir="rtl"] .form-field textarea {
font-family: var(--font-arabic-sans);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--on-surface-18);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--copper);
background: rgba(var(--accent-rgb), 0.06);
box-shadow: 0 0 0 3px var(--copper-06);
}
.form-field input.field-error-active,
.form-field textarea.field-error-active {
border-color: rgba(var(--accent-rgb), 0.7);
}
.form-field select {
cursor: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8432F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
[dir="rtl"] .form-field select {
background-position: left 14px center;
padding-right: 15px;
padding-left: 36px;
}
.form-field select option {
background: var(--surface);
color: var(--on-surface);
}
.field-error {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--copper-light);
display: none;
}
[dir="rtl"] .field-error { font-family: var(--font-arabic-sans); }
.field-error.visible { display: block; }
.form-submit-row {
display: flex;
align-items: center;
gap: 16px;
margin-top: 4px;
flex-wrap: wrap;
}
.btn-submit {
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.btn-text { display: block; }
.btn-loader {
display: none;
width: 18px;
height: 18px;
animation: spinLoader 0.8s linear infinite;
}
.btn-submit.is-loading .btn-text { display: none; }
.btn-submit.is-loading .btn-loader { display: block; }
.btn-submit:disabled {
opacity: 0.65;
pointer-events: none;
}
@keyframes spinLoader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.form-success {
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--copper-light);
padding: 14px 18px;
border: 1px solid rgba(var(--accent-rgb), 0.3);
border-radius: 2px;
background: rgba(var(--accent-rgb), 0.08);
line-height: 1.65;
}
[dir="rtl"] .form-success { font-family: var(--font-arabic-sans); }
.form-success .success-ar {
font-family: var(--font-arabic);
color: rgba(var(--accent-rgb), 0.65);
}
/* ─────────────────────────────────────────────────
16. FOOTER
يستخدم --surface / --on-surface (ثابتان عبر الثيمين)
───────────────────────────────────────────────── */
footer {
background: var(--surface);
border-top: 1px solid var(--on-surface-08);
padding-inline: var(--pad-x);
padding-bottom: clamp(36px, 5vw, 60px);
position: relative;
width: 100%;
overflow: hidden;
}
.footer-thread-top {
width: 100%;
height: 50px;
margin-bottom: clamp(32px, 4vw, 52px);
}
.footer-thread-top svg { width: 100%; height: 100%; }
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.6fr;
gap: 40px;
max-width: var(--max-w);
margin-inline: auto;
align-items: start;
width: 100%;
}
.footer-logo-latin {
display: block;
font-family: var(--font-sans);
font-size: 1.4rem;
font-weight: 800;
letter-spacing: 0.22em;
color: var(--on-surface);
}
.footer-logo-ar {
display: block;
font-family: var(--font-arabic);
font-size: 1.1rem;
font-weight: 700;
color: var(--copper-light);
margin-top: 4px;
}
.footer-tagline {
font-size: 0.78rem;
color: var(--on-surface-28);
margin-top: 16px;
line-height: 1.7;
}
[dir="rtl"] .footer-tagline { font-family: var(--font-arabic-sans); line-height: 1.95; }
.footer-links {
display: flex;
flex-direction: column;
gap: 11px;
min-width: 0;
}
.footer-link-head {
font-family: var(--font-sans);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--on-surface-25);
margin-bottom: 5px;
}
[dir="rtl"] .footer-link-head { font-family: var(--font-arabic-sans); letter-spacing: 0.06em; }
.footer-links a {
font-size: 0.82rem;
color: var(--on-surface-45);
transition: color var(--dur-fast) ease;
width: fit-content;
position: relative;
}
[dir="rtl"] .footer-links a { font-family: var(--font-arabic-sans); }
.footer-links a::after {
content: '';
position: absolute;
bottom: -1px; inset-inline-start: 0;
width: 0; height: 1px;
background: var(--copper);
transition: width 0.3s var(--ease-expo);
}
.footer-links a:hover { color: var(--cream); }
.footer-links a:hover::after { width: 100%; }
.footer-copy {
text-align: end;
}
/* Reserve space so the fixed float-btns (WhatsApp/Messenger/Facebook),
which sit on the right in LTR mode, never overlap the end-aligned
copyright text. RTL flips the buttons to the left, so no offset
is needed there. */
[dir="ltr"] .footer-copy {
padding-inline-end: clamp(64px, 6vw, 84px);
}
.footer-copy p {
font-size: 0.72rem;
color: var(--on-surface-18);
line-height: 1.85;
}
[dir="rtl"] .footer-copy p:not(.footer-ar) { font-family: var(--font-arabic-sans); }
.footer-ar {
font-family: var(--font-arabic);
font-size: 0.78rem;
letter-spacing: 0;
}
/* ─────────────────────────────────────────────────
17. LANGUAGE-DECORATIVE ELEMENTS
عناصر عربية زخرفية تُعرض فقط في النسخة الإنجليزية كلمسة هوية،
وتُخفى عند تفعيل dir="rtl" لتجنّب التكرار.
───────────────────────────────────────────────── */
[dir="rtl"] .lang-decorative-ar {
display: none;
}
/* ─────────────────────────────────────────────────
18. TEXT-WEAVING MORPH HELPER
فئة تُضاف/تُزال عبر JS أثناء تبديل اللغة لإنتاج تأثير
"تفكك ونسج" نصي باستخدام GSAP (انظر script.js).
───────────────────────────────────────────────── */
.i18n-swap {
display: inline-block;
will-change: transform, opacity, filter;
}
/* ─────────────────────────────────────────────────
19. REVEAL FALLBACK CLASSES
───────────────────────────────────────────────── */
.reveal, .reveal-left, .reveal-right {
opacity: 0;
transition: opacity var(--dur-slow) var(--ease-expo), transform var(--dur-slow) var(--ease-expo);
}
.reveal { transform: translateY(32px); }
.reveal-left { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view {
opacity: 1;
transform: translate(0, 0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
/* ─────────────────────────────────────────────────
20. RESPONSIVE — LARGE TABLET / SMALL LAPTOP (≤ 1200px)
───────────────────────────────────────────────── */
@media (max-width: 1200px) {
.nav-links { gap: 1.5rem; }
.nav-links a { font-size: 0.66rem; }
}
/* ─────────────────────────────────────────────────
21. RESPONSIVE — TABLET (≤ 1024px)
───────────────────────────────────────────────── */
@media (max-width: 1024px) {
.nav-links { display: none; }
.nav-cta { display: none; }
.nav-menu-btn { display: flex; }
.bento-grid {
grid-template-columns: repeat(6, 1fr);
grid-template-rows:
min(320px, 38vw)
min(240px, 28vw)
min(220px, 26vw)
min(220px, 26vw);
gap: 8px;
}
.bi-large { grid-column: 1 / 5; grid-row: 1 / 3; }
.bi-medium { grid-column: 5 / 7; grid-row: 1 / 2; }
.bi-tall { grid-column: 5 / 7; grid-row: 2 / 3; }
.bi-small { grid-column: 1 / 4; grid-row: 3 / 4; }
.bi-wide { grid-column: 4 / 7; grid-row: 3 / 4; }
.bi-medium2 { grid-column: 1 / 4; grid-row: 4 / 5; }
.bi-small2 { grid-column: 4 / 7; grid-row: 4 / 5; }
.studio-layout { grid-template-columns: 1fr; gap: 40px; }
.contact-inner { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-copy { text-align: start; grid-column: 1 / -1; }
}
/* ─────────────────────────────────────────────────
21b. RESPONSIVE — MID-TABLET (≤ 768px)
Gap between 1024px desktop collapse and 680px mobile.
Mainly tightens padding and contact/studio stack.
───────────────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--pad-x: clamp(18px, 4.5vw, 36px);
--nav-h: 68px;
--section-py: clamp(56px, 8vw, 96px);
}
.section-head { margin-bottom: 36px; }
.hero-desc { max-width: 100%; font-size: 0.9rem; }
.studio-layout { gap: 32px; }
.service-item {
grid-template-columns: 48px 1fr 24px;
gap: 14px;
padding-block: 24px;
}
.contact-inner { gap: 40px; }
.footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* ─────────────────────────────────────────────────
22. RESPONSIVE — MOBILE (≤ 680px)
───────────────────────────────────────────────── */
@media (max-width: 680px) {
:root { --pad-x: 18px; --nav-h: 60px; }
.brand-logo-img { width: 108px; }
.control-panel { display: none; } /* shown via .mobile-controls instead */
.hero-meta {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.stat-divider { display: none; }
.bento-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: none;
gap: 7px;
}
.bi-large { grid-column: 1 / 3; min-height: 230px; grid-row: auto; }
.bi-medium { grid-column: 1 / 2; min-height: 160px; grid-row: auto; }
.bi-tall { grid-column: 2 / 3; min-height: 160px; grid-row: auto; }
.bi-small { grid-column: 1 / 2; min-height: 145px; grid-row: auto; }
.bi-wide { grid-column: 1 / 3; min-height: 185px; grid-row: auto; }
.bi-medium2 { grid-column: 1 / 2; min-height: 150px; grid-row: auto; }
.bi-small2 { grid-column: 2 / 3; min-height: 150px; grid-row: auto; }
.service-item { grid-template-columns: 42px 1fr 22px; gap: 12px; padding-block: 26px; }
.service-name { font-size: clamp(18px, 5.5vw, 26px); }
.service-desc { font-size: 0.82rem; }
.philosophy-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; gap: 28px; }
.footer-copy { text-align: start; }
.studio-quote-ar { font-size: 0.9rem; }
.mobile-nav { width: 100vw; padding: 24px 24px; }
}
/* ─────────────────────────────────────────────────
23. RESPONSIVE — SMALL MOBILE (≤ 380px)
───────────────────────────────────────────────── */
@media (max-width: 380px) {
:root { --pad-x: 14px; }
.title-en-1 { margin-inline-start: 0; }
.title-en-2 { margin-inline-start: 0; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn-primary,
.hero-actions .btn-ghost { justify-content: center; }
}
/* ─────────────────────────────────────────────────
24. REDUCED MOTION
───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
body { cursor: auto; }
button { cursor: pointer; }
a { cursor: pointer; }
#cursor-dot, #cursor-shuttle, #cursor-trail { display: none !important; }
.scroll-thread-line { animation: none; opacity: 0.4; }
.reveal, .reveal-left, .reveal-right,
.bento-item, .service-item, .philosophy-item {
opacity: 1 !important;
transform: none !important;
}
.section-title { clip-path: none !important; }
/* Kinetic Typography: force every split word to its settled, fully
visible state. The GSAP entrance timeline still runs the tween
(this codebase's existing reveal modules don't gate themselves on
reduced-motion either — see VideoIntro), but the !important rules
below win over any inline transform/opacity GSAP writes, so a
reduced-motion user never sees the hero headline stuck mid-clip
or experiences the staggered word-by-word motion itself. */
.kinetic-word {
opacity: 1 !important;
transform: none !important;
}
#theme-ripple { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════
25. ARABIC TYPOGRAPHY SYSTEM — Anti-Clip & Letter Connection
─────────────────────────────────────────────────────────────
A) Absolute Arabic letter-connection isolation (letter-spacing:0)
Arabic ligatures (ب،ي،ن،م،etc.) REQUIRE letter-spacing:0.
Any positive value severs cursive joints mid-word.
B) Vertical breathing room for Alexandria ascenders/descenders
الأحرف الطويلة: ط، ظ، ل، أ — descenders: ي، ج، خ
C) Clip-path & overflow guards for GSAP inset() reveal animations
══════════════════════════════════════════════════════════════ */
/* ── A. Arabic Letter Connection Guard ───────────────────── */
[lang="ar"],
:lang(ar),
.lang-decorative-ar,
[dir="rtl"],
[dir="rtl"] *,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] button,
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .eyebrow,
[dir="rtl"] .bento-cat,
[dir="rtl"] .bento-title,
[dir="rtl"] .bento-sub,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .service-name,
[dir="rtl"] .service-ar,
[dir="rtl"] .service-desc,
[dir="rtl"] .section-title,
[dir="rtl"] .section-subtitle,
[dir="rtl"] .stat-label,
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-ghost,
[dir="rtl"] .nav-cta,
[dir="rtl"] .mobile-cta,
[dir="rtl"] .psl-number,
[dir="rtl"] .psl-name,
[dir="rtl"] .zorwa-tagline,
[dir="rtl"] .zorwa-gallery-label,
[dir="rtl"] .zorwa-slide-caption span,
[dir="rtl"] .temp-kelvin,
[dir="rtl"] .temp-name {
letter-spacing: 0 !important;
word-spacing: normal !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "clig" 1 !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
/* ── B. Arabic Heading Line-Height (Alexandria) ──────────── */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .studio-headline,
[dir="rtl"] .contact-headline,
[dir="rtl"] .bento-title,
[dir="rtl"] .service-name,
.title-ar,
.title-ar-main,
.studio-quote-ar {
line-height: 1.55 !important;
}
[dir="rtl"] p,
[dir="rtl"] .hero-desc,
[dir="rtl"] .service-desc,
[dir="rtl"] .bento-sub,
[dir="rtl"] .contact-subtitle,
[dir="rtl"] .philosophy-item p,
[dir="rtl"] .footer-tagline,
[dir="rtl"] .section-subtitle {
line-height: 1.65 !important;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .bento-cat,
[dir="rtl"] .hero-eyebrow {
line-height: 1.5 !important;
}
/* ── C. Clip-Path & Overflow Guard ───────────────────────── */
/* GSAP clip-path inset() reveals clip the element itself.
Padding-block ensures glyphs (ط،ل،أ / f,g,y,p) aren't
cropped at the moment the reveal begins at 0%. */
.section-title,
.hero-title,
.studio-headline,
.contact-headline,
.title-ar,
.title-en-1,
.title-en-2,
.title-ar-main,
.hero-eyebrow,
.eyebrow,
.service-name,
.bento-title {
padding-top: 0.15em;
padding-bottom: 0.18em;
overflow: visible !important;
}
/* Parent containers must not clip the padded overflow */
.hero-content,
.studio-left,
.studio-right,
.contact-left,
.contact-right {
overflow: visible;
}
/* Bento content gradient overlay */
.bento-content {
padding-top: 0.12em;
overflow: visible;
}
/* ── Section Subtitle — description line below section title */
.section-subtitle {
font-family: var(--font-body);
font-size: clamp(0.82rem, 1.1vw, 0.97rem);
color: var(--ink-60);
line-height: 1.65;
max-width: 56ch;
margin-top: 14px;
opacity: 0.9;
}
[dir="rtl"] .section-subtitle {
font-family: var(--font-arabic-sans);
max-width: 44ch;
}
/* ══════════════════════════════════════════════════════════════
26. PORTFOLIO PROJECT GROUP ARCHITECTURE
Two families: "Loom of Light" (R Light LED) + "ZORWA"
══════════════════════════════════════════════════════════════ */
.portfolio-group {
margin-bottom: 60px;
}
.portfolio-group:last-child {
margin-bottom: 0;
}
/* ── Portfolio Section Label — project identifier bar ───── */
.portfolio-section-label {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 14px;
padding-block: 4px;
}
.psl-number {
font-family: var(--font-sans);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--copper);
white-space: nowrap;
flex-shrink: 0;
}
.psl-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--ink-10), transparent);
flex-shrink: 1;
}
.psl-name {
font-family: var(--font-display);
font-size: clamp(10px, 0.9vw, 12px);
font-weight: 400;
font-style: italic;
color: var(--ink-40);
white-space: nowrap;
flex-shrink: 0;
}
[dir="rtl"] .psl-number {
font-family: var(--font-arabic-sans);
}
[dir="rtl"] .psl-name {
font-family: var(--font-arabic-sans);
font-style: normal;
}
[dir="rtl"] .psl-line {
background: linear-gradient(to left, var(--ink-10), transparent);
}
/* Bento background image — fills card, scales on hover */
.bento-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.75s var(--ease-expo), filter 0.6s ease;
filter: saturate(0.88) brightness(0.92);
}
.bento-item:hover .bento-bg-img {
transform: scale(1.04);
filter: saturate(1.0) brightness(0.98);
}
/* ══════════════════════════════════════════════════════════════
27. BENTO GRID — "LOOM OF LIGHT" Variant
5-slot grid: 2 facade × profile · panel × color-temp
══════════════════════════════════════════════════════════════ */
.bento-grid--loom {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 330px 250px;
gap: 10px;
width: 100%;
}
/* Grid slot assignments */
.bento-grid--loom .bl-facade-1 { grid-column: 1 / 6; grid-row: 1 / 2; }
.bento-grid--loom .bl-facade-2 { grid-column: 6 / 10; grid-row: 1 / 2; }
.bento-grid--loom .bl-profile { grid-column: 10 / 13; grid-row: 1 / 2; }
.bento-grid--loom .bl-panel { grid-column: 1 / 5; grid-row: 2 / 3; }
.bento-grid--loom .bl-temp { grid-column: 5 / 13; grid-row: 2 / 3; }
/* ── Color Temperature Tri-Panel Interactive Card ─────── */
.temp-tuning-card {
position: absolute;
inset: 0;
display: flex;
flex-direction: row;
overflow: hidden;
border-radius: inherit;
z-index: 2;
}
.temp-panel {
flex: 1;
position: relative;
overflow: hidden;
transition: flex 0.58s var(--ease-expo);
cursor: none;
}
.temp-panel:hover {
flex: 1.95;
}
.temp-panel img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.68s var(--ease-expo), filter 0.5s ease;
filter: saturate(0.88) brightness(0.9);
}
.temp-panel:hover img {
transform: scale(1.06);
filter: saturate(1.1) brightness(1.0);
}
/* Thin separator line between temperature panels */
.temp-panel + .temp-panel::before {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 1px;
background: rgba(255, 255, 255, 0.12);
z-index: 4;
pointer-events: none;
}
.temp-panel-label {
position: absolute;
bottom: 0;
inset-inline: 0;
padding: 15px 14px 13px;
background: linear-gradient(to top, rgba(4, 8, 28, 0.94) 0%, rgba(4, 8, 28, 0.0) 100%);
z-index: 3;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.38s ease, transform 0.42s var(--ease-expo);
}
.temp-panel:hover .temp-panel-label {
opacity: 1;
transform: translateY(0);
}
.temp-kelvin {
display: block;
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-light);
margin-bottom: 5px;
}
.temp-name {
display: block;
font-family: var(--font-display);
font-size: clamp(13px, 1.2vw, 18px);
font-weight: 600;
color: #fff;
line-height: 1.2;
}
[dir="rtl"] .temp-kelvin {
font-family: var(--font-arabic-sans);
letter-spacing: 0 !important;
}
[dir="rtl"] .temp-name {
font-family: var(--font-arabic);
}
/* Temp card: bento-content and link-icon override stacking */
.bl-temp .bento-content {
z-index: 5;
pointer-events: none;
}
.bl-temp .bento-link-icon {
z-index: 6;
}
.bl-temp .bento-circuit-overlay {
z-index: 1;
opacity: 0.1;
}
/* ══════════════════════════════════════════════════════════════
28. BENTO GRID — "ZORWA" Variant
3-slot grid: brand logo · campaign cover · gallery strip
══════════════════════════════════════════════════════════════ */
.bento-grid--zorwa {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 370px 190px;
gap: 10px;
width: 100%;
}
.bento-grid--zorwa .bz-hero { grid-column: 1 / 5; grid-row: 1 / 2; }
.bento-grid--zorwa .bz-cover { grid-column: 5 / 13; grid-row: 1 / 2; }
.bento-grid--zorwa .bz-gallery { grid-column: 1 / 13; grid-row: 2 / 3; }
/* ── ZORWA Brand Logo Hero Card ──────────────────────────── */
.zorwa-hero-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 2;
}
.zorwa-logo-img {
width: 62%;
max-width: 200px;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.62s var(--ease-expo), filter 0.5s ease;
filter: brightness(1.05) contrast(1.05);
}
.bento-item:hover .zorwa-logo-img {
transform: scale(1.07);
filter: brightness(1.12) contrast(1.08);
}
.zorwa-tagline {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.38);
margin-top: 18px;
text-align: center;
line-height: 1.6;
}
[dir="rtl"] .zorwa-tagline {
font-family: var(--font-arabic-sans);
letter-spacing: 0 !important;
font-size: 0.68rem;
text-transform: none;
}
/* ── ZORWA Gallery Horizontal Strip ─────────────────────── */
.zorwa-gallery {
position: absolute;
inset: 0;
background: #050d1a;
overflow: hidden;
}
.zorwa-gallery-track {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 7px;
padding: 7px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
box-sizing: border-box;
/* Keep LTR scroll direction even in Arabic layout */
direction: ltr;
}
.zorwa-gallery-track::-webkit-scrollbar {
height: 2px;
}
.zorwa-gallery-track::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03);
}
.zorwa-gallery-track::-webkit-scrollbar-thumb {
background: var(--copper-20);
border-radius: 1px;
}
.zorwa-gallery-slide {
flex-shrink: 0;
width: calc(20% - 6px);
min-width: 128px;
max-width: 230px;
height: 100%;
border-radius: 2px;
overflow: hidden;
scroll-snap-align: start;
position: relative;
cursor: none;
}
.zorwa-gallery-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.55s var(--ease-expo), filter 0.45s ease;
filter: saturate(0.78) brightness(0.88);
}
.zorwa-gallery-slide:hover img {
transform: scale(1.08);
filter: saturate(1.1) brightness(1.0);
}
.zorwa-slide-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 10px 9px;
background: linear-gradient(to top, rgba(3, 7, 20, 0.96) 0%, rgba(3, 7, 20, 0.0) 100%);
z-index: 2;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.32s ease, transform 0.36s var(--ease-expo);
}
.zorwa-gallery-slide:hover .zorwa-slide-caption {
opacity: 1;
transform: translateY(0);
}
.zorwa-slide-caption span {
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
line-height: 1.4;
display: block;
}
[dir="rtl"] .zorwa-slide-caption span {
font-family: var(--font-arabic-sans);
letter-spacing: 0 !important;
font-size: 0.6rem;
text-transform: none;
}
/* Gallery overlay label (top-left of bz-gallery card) */
.zorwa-gallery-label {
position: absolute;
top: 14px;
inset-inline-start: 16px;
z-index: 3;
pointer-events: none;
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
}
[dir="rtl"] .zorwa-gallery-label {
font-family: var(--font-arabic-sans);
letter-spacing: 0 !important;
font-size: 0.6rem;
text-transform: none;
}
/* ══════════════════════════════════════════════════════════════
29. RESPONSIVE — PORTFOLIO GRIDS (Tablet & Mobile)
══════════════════════════════════════════════════════════════ */
/* ── Tablet: ≤ 1024px ──────────────────────────────────── */
@media (max-width: 1024px) {
/* Loom of Light — collapse to 6 cols, 3 rows */
.bento-grid--loom {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 260px 200px 200px;
}
.bento-grid--loom .bl-facade-1 { grid-column: 1 / 4; grid-row: 1 / 2; }
.bento-grid--loom .bl-facade-2 { grid-column: 4 / 7; grid-row: 1 / 2; }
.bento-grid--loom .bl-profile { grid-column: 1 / 4; grid-row: 2 / 3; }
.bento-grid--loom .bl-panel { grid-column: 4 / 7; grid-row: 2 / 3; }
.bento-grid--loom .bl-temp { grid-column: 1 / 7; grid-row: 3 / 4; }
/* ZORWA — collapse to 6 cols, 2 rows */
.bento-grid--zorwa {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 300px 175px;
}
.bento-grid--zorwa .bz-hero { grid-column: 1 / 3; grid-row: 1 / 2; }
.bento-grid--zorwa .bz-cover { grid-column: 3 / 7; grid-row: 1 / 2; }
.bento-grid--zorwa .bz-gallery { grid-column: 1 / 7; grid-row: 2 / 3; }
.zorwa-gallery-slide {
width: calc(33.33% - 6px);
min-width: 110px;
}
.psl-name { display: none; }
}
/* ── Mobile: ≤ 680px ───────────────────────────────────── */
@media (max-width: 680px) {
.portfolio-group { margin-bottom: 36px; }
/* Loom of Light — 2-column fluid stack */
.bento-grid--loom {
grid-template-columns: 1fr 1fr;
grid-template-rows: none;
gap: 7px;
}
.bento-grid--loom .bl-facade-1 { grid-column: 1 / 3; min-height: 200px; grid-row: auto; }
.bento-grid--loom .bl-facade-2 { grid-column: 1 / 2; min-height: 155px; grid-row: auto; }
.bento-grid--loom .bl-profile { grid-column: 2 / 3; min-height: 155px; grid-row: auto; }
.bento-grid--loom .bl-panel { grid-column: 1 / 2; min-height: 155px; grid-row: auto; }
.bento-grid--loom .bl-temp { grid-column: 2 / 3; min-height: 155px; grid-row: auto; }
/* ZORWA — single column */
.bento-grid--zorwa {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 7px;
}
.bento-grid--zorwa .bz-hero { grid-column: 1; min-height: 200px; grid-row: auto; }
.bento-grid--zorwa .bz-cover { grid-column: 1; min-height: 200px; grid-row: auto; }
.bento-grid--zorwa .bz-gallery { grid-column: 1; min-height: 152px; grid-row: auto; }
.zorwa-gallery-slide {
width: calc(48% - 4px);
min-width: 100px;
}
/* Temperature panels: less exaggerated expand on mobile */
.temp-panel:hover { flex: 1.55; }
}
/* ══════════════════════════════════════════════════════════════
30. PORTFOLIO FILTER BAR
Luxury editorial tab system — adapts to Light / Dark theme
automatically via existing CSS variable engine.
══════════════════════════════════════════════════════════════ */
/* ── Container ─────────────────────────────────────────── */
.portfolio-filters {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 36px;
/* Subtle baseline rule below the tab bar */
padding-bottom: 28px;
border-bottom: 1px solid var(--ink-10);
}
/* ── Individual Filter Button ───────────────────────────── */
.pf-btn {
/* Reset */
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: none; /* Use site's custom cursor */
/* Layout */
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 20px 8px;
/* Typography — Syne for EN, IBM Plex Sans Arabic for AR */
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
/* Colour — idle state */
color: var(--ink-60);
background: var(--ink-06);
/* Shape */
border-radius: 2px;
border: 1px solid transparent;
/* Smooth transitions */
transition:
color 0.30s ease,
background 0.30s ease,
border-color 0.30s ease,
transform 0.30s var(--ease-expo),
box-shadow 0.30s ease;
/* Don't let the browser add ugly focus outline — we supply our own */
outline: none;
position: relative;
overflow: hidden;
}
/* Count badge inside the button — premium numbered chip */
.pf-btn[data-count]::after {
content: attr(data-count);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1;
padding: 3px 7px;
border-radius: 99px;
background: rgba(var(--accent-rgb), 0.14);
color: var(--copper);
transition: background 0.3s ease, color 0.3s ease;
min-width: 20px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── Hover ──────────────────────────────────────────────── */
.pf-btn:hover {
color: var(--ink);
background: var(--ink-10);
border-color: var(--ink-20);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(var(--text-rgb), 0.08);
}
/* General press feedback for any filter pill. The more specific
.pf-btn.pf-btn--active:active rule further below (for the
currently-selected pill) still wins where both could apply. */
.pf-btn:active {
transform: scale(0.96);
transition-duration: 0.12s;
}
/* ── Focus (keyboard) ───────────────────────────────────── */
.pf-btn:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
}
/* ── Active / Selected ──────────────────────────────────── */
.pf-btn.pf-btn--active,
.pf-btn[aria-selected="true"] {
color: rgb(var(--bg-rgb));
background: var(--copper);
border-color: var(--copper);
box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.35);
transform: translateY(-1px);
}
.pf-btn.pf-btn--active[data-count]::after,
.pf-btn[aria-selected="true"][data-count]::after {
background: rgba(var(--bg-rgb), 0.22);
color: rgb(var(--bg-rgb));
}
/* Active pressed micro-state */
.pf-btn.pf-btn--active:active,
.pf-btn[aria-selected="true"]:active {
transform: translateY(0px) scale(0.97);
transition-duration: 0.12s;
}
/* Dark theme tweaks — active button stays vivid */
[data-theme="dark"] .pf-btn {
background: rgba(var(--on-surface-rgb), 0.05);
color: rgba(var(--text-rgb), 0.72);
}
[data-theme="dark"] .pf-btn:hover {
background: rgba(var(--on-surface-rgb), 0.10);
color: rgba(var(--text-rgb), 0.95);
}
[data-theme="dark"] .pf-btn.pf-btn--active,
[data-theme="dark"] .pf-btn[aria-selected="true"] {
color: #121A28; /* indigo night — always dark text on the madder pill */
}
/* RTL typography override for Arabic state */
[dir="rtl"] .pf-btn {
font-family: var(--font-arabic-sans);
letter-spacing: 0 !important;
font-size: 0.82rem;
}
/* ══════════════════════════════════════════════════════════════
31. PORTFOLIO CANVAS — Unified Masonry-Ish Flow Grid
Replaces the old bento-grid--loom / bento-grid--zorwa split.
Cards use named span classes so the filter JS doesn't need
to remember any positioning — it just shows/hides.
══════════════════════════════════════════════════════════════ */
/* ── Outer wrapper already provides padding-inline & max-width ─ */
.portfolio-canvas {
display: grid;
grid-template-columns: repeat(12, 1fr);
/* Auto rows; each card declares its own height via min-height */
grid-auto-rows: auto;
gap: 10px;
width: 100%;
/* Smooth height shrink / expand during filter transitions */
transition: none; /* height managed by GSAP, not CSS */
}
/* ── Card-size span classes ─────────────────────────────── */
/*
pf-span-large → 5 cols, row-height driven by content ≥ 320px
pf-span-medium → 4 cols, standard card
pf-span-small → 3 cols, compact
pf-span-wide → 8 cols, landscape-wide (colour temp demo)
pf-span-full → 12 cols, full-width strip (gallery)
pf-span-medium-tall → 4 cols, tall logo hero
pf-span-large-tall → 8 cols, large campaign hero
*/
.pf-span-large { grid-column: span 5; min-height: 330px; }
.pf-span-medium { grid-column: span 4; min-height: 270px; }
.pf-span-small { grid-column: span 3; min-height: 270px; }
.pf-span-wide { grid-column: span 8; min-height: 250px; }
.pf-span-full { grid-column: span 12; min-height: 188px; }
.pf-span-medium-tall { grid-column: span 4; min-height: 370px; }
.pf-span-large-tall { grid-column: span 8; min-height: 370px; }
/* Hidden state set by JS before animation */
.pf-card--hidden {
display: none; /* collapses space; GSAP fades before this is toggled */
}
/* Entering state (GSAP will clear these after animation) */
.pf-card--entering {
will-change: opacity, transform, filter;
}
/* ── Empty state message ─────────────────────────────────── */
.portfolio-canvas--empty::after {
grid-column: 1 / -1;
content: attr(data-empty-msg);
display: block;
padding: 48px 0;
text-align: center;
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--ink-40);
font-style: italic;
letter-spacing: 0.04em;
}
[dir="rtl"] .portfolio-canvas--empty::after {
font-family: var(--font-arabic);
letter-spacing: 0;
}
/* ══════════════════════════════════════════════════════════════
32. RESPONSIVE — FILTER BAR & CANVAS
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* Canvas: shrink to 6-column subgrid */
.portfolio-canvas {
grid-template-columns: repeat(6, 1fr);
}
.pf-span-large { grid-column: span 6; min-height: 290px; }
.pf-span-medium { grid-column: span 3; min-height: 240px; }
.pf-span-small { grid-column: span 3; min-height: 240px; }
.pf-span-wide { grid-column: span 6; min-height: 230px; }
.pf-span-full { grid-column: span 6; min-height: 172px; }
.pf-span-medium-tall { grid-column: span 2; min-height: 310px; }
.pf-span-large-tall { grid-column: span 4; min-height: 310px; }
}
@media (max-width: 768px) {
/* Filter bar wraps but stays readable */
.portfolio-filters {
gap: 5px;
margin-top: 28px;
padding-bottom: 22px;
}
.pf-btn {
font-size: 0.65rem;
padding: 8px 14px 7px;
}
}
@media (max-width: 680px) {
/* Canvas: 2-column mobile */
.portfolio-canvas {
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.pf-span-large,
.pf-span-wide,
.pf-span-full { grid-column: span 2; }
.pf-span-medium { grid-column: span 1; }
.pf-span-small { grid-column: span 1; }
.pf-span-medium-tall { grid-column: span 2; }
.pf-span-large-tall { grid-column: span 2; }
.pf-span-large { min-height: 220px; }
.pf-span-medium { min-height: 180px; }
.pf-span-small { min-height: 180px; }
.pf-span-wide { min-height: 200px; }
.pf-span-full { min-height: 152px; }
.pf-span-medium-tall { min-height: 210px; }
.pf-span-large-tall { min-height: 210px; }
}
@media (max-width: 400px) {
/* Ultra-narrow: single column */
.portfolio-canvas {
grid-template-columns: 1fr;
}
.pf-span-large,
.pf-span-medium,
.pf-span-small,
.pf-span-wide,
.pf-span-full,
.pf-span-medium-tall,
.pf-span-large-tall { grid-column: span 1; }
}
/* ══════════════════════════════════════════════════════════════
33. IMAGE RENDERING FIX — bento-img-container
─────────────────────────────────────────────────────────────
Root cause of blank images: imgs were positioned absolute with
inset:0 but bento-bg-img relied on the .bento-item stacking
context having an explicit height set, which the new portfolio-
canvas grid rows did not always guarantee before GSAP ran.
Solution: a dedicated .bento-img-container div establishes an
explicit positioned fill-context that is independent of GSAP's
opacity:0 initial state, so the browser paints the img decode
before any animation fires.
══════════════════════════════════════════════════════════════ */
/* ── Core container ─────────────────────────────────────── */
.bento-img-container {
/* Fills the entire bento-item card */
position: absolute;
inset: 0;
z-index: 0; /* below circuit-overlay (z:1) and bento-content (z:2) */
overflow: hidden;
border-radius: inherit;
/* Guarantee the block is always painted, even when parent
starts at opacity:0 (GSAP will animate opacity on the
article, not on this container) */
display: block;
contain: strict; /* layout + style + paint containment for GPU promotion */
}
/* ── The actual ![]()
inside ─────────────────────────────── */
.bento-img-container img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* Cover crop — never distort aspect ratio */
object-fit: cover;
object-position: center center;
display: block;
/* Initial visual quality: subtle de-saturate while idle */
filter: saturate(0.82) brightness(0.90);
transition:
transform 0.75s var(--ease-expo),
filter 0.60s ease;
/* Prevent layout paint blocking — images load async */
will-change: transform, filter;
}
/* ── Hover: zoom + restore vibrancy ─────────────────────── */
.bento-item:hover .bento-img-container img {
transform: scale(1.05);
filter: saturate(1.05) brightness(0.97);
}
/* ── Panel variant (inside temp-tuning-card panels) ─────── */
.bento-img-container--panel {
/* temp-panel is already position:relative and overflow:hidden,
so we just need full fill */
position: absolute;
inset: 0;
border-radius: 0; /* no rounding inside tri-panel */
contain: layout style; /* lighter containment — no strict (needs flex sizing) */
}
.bento-img-container--panel img {
/* identical fill rules */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
filter: saturate(0.85) brightness(0.88);
transition: transform 0.68s var(--ease-expo), filter 0.5s ease;
}
.temp-panel:hover .bento-img-container--panel img {
transform: scale(1.07);
filter: saturate(1.1) brightness(1.0);
}
/* ── Deprecate old .bento-bg-img (kept for backward compat) ─
Any remaining bento-bg-img element now defers to this system */
.bento-bg-img {
z-index: 0;
will-change: transform;
}
/* ══════════════════════════════════════════════════════════════
34. NASIEJ WEAVING ENTRANCE — clip-path thread reveal
─────────────────────────────────────────────────────────────
The CSS side of the weaving animation. Cards start with a
vertical clip that GSAP progressively opens (inset top → 0).
Combined with opacity + blur, this produces the "threads
dropping into place" editorial feel.
══════════════════════════════════════════════════════════════ */
/* Initial hidden state applied by JS before the weave fires.
Using clip-path instead of visibility so the GPU layer is
already promoted before the animation begins. */
.pf-card--weave-init {
clip-path: inset(100% 0% 0% 0%); /* fully clipped from top */
opacity: 0;
will-change: clip-path, opacity, transform, filter;
}
/* Weaving animation: applied via GSAP fromTo — CSS provides
the end-state class for reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
.pf-card--weave-init {
clip-path: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
will-change: auto;
}
}
/* Filter tab count badge — ensure it appears above card imagery */
.portfolio-filters {
position: relative;
z-index: 10;
}
/* Ensure bento-content text is always above the img-container */
.bento-content {
position: relative;
z-index: 3;
}
/* bento-link-icon always topmost */
.bento-link-icon {
position: absolute;
z-index: 4;
}
/* ══════════════════════════════════════════════════════════════
35. VISIBILITY SAFETY NET
─────────────────────────────────────────────────────────────
If GSAP fails to load or ScrollTrigger doesn't fire, cards
must still be visible. The .js-ready class is added to
by script.js on DOMContentLoaded — if it's absent, we show
everything unconditionally.
══════════════════════════════════════════════════════════════ */
/* Fallback: no JS or GSAP failed → cards always visible */
body:not(.js-ready) .bento-item,
body:not(.js-ready) .pf-card {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
filter: none !important;
visibility: visible !important;
}
/* Also ensure section-subtitle and section content after works
never get stuck invisible. These use the reveal system which
depends on GSAP ScrollTrigger — give them a CSS fallback too. */
body:not(.js-ready) .reveal,
body:not(.js-ready) .reveal-left,
body:not(.js-ready) .reveal-right {
opacity: 1 !important;
transform: none !important;
}
/* Prevent filter bar from getting stuck invisible */
.portfolio-filters {
opacity: 1; /* filter bar is never hidden by GSAP init */
}
/* ══════════════════════════════════════════════════════════════
36. REAL LOGO IMAGE — navbar
══════════════════════════════════════════════════════════════ */
/* Real PNG logo — replaces SVG mark in navbar */
/* (Old .logo-img / .logo-mark--hidden / .brand-name scaffolding
removed — superseded by .brand-logo-img above.) */
/* ══════════════════════════════════════════════════════════════
37. MOD 1 — CENTRED HERO
All hero text perfectly centred, editorial max-width on body copy
══════════════════════════════════════════════════════════════ */
/* Override: hero-inner stacks vertically and centres everything */
.hero-inner {
align-items: center;
text-align: center;
position: relative; /* stacking context for warp/weft layers */
}
/* hero-content is the real semantic layer — sits above warp/weft */
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
width: 100%;
}
/* Kill the old margin-inline-start stagger — centred layout owns this */
.title-en-1,
.title-en-2 {
margin-inline-start: 0 !important;
}
/* hero-title: centre all children */
.hero-title {
align-items: center;
text-align: center;
width: 100%;
}
/* Editorial max-width on description so lines stay luxuriously short */
.hero-desc {
max-width: 800px;
text-align: center;
margin-inline: auto;
}
[dir="rtl"] .hero-desc {
text-align: center;
}
/* CTA group: centre horizontally */
.hero-actions {
justify-content: center;
}
/* Mobile: stack buttons vertically */
@media (max-width: 540px) {
.hero-actions {
flex-direction: column;
align-items: center;
width: 100%;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
width: 100%;
justify-content: center;
}
}
/* hero-meta: always centred */
.hero-meta {
justify-content: center;
}
/* Responsive: remove old tablet margin overrides */
@media (max-width: 768px) {
.title-en-1 { margin-inline-start: 0 !important; }
.title-en-2 { margin-inline-start: 0 !important; }
}
/* ══════════════════════════════════════════════════════════════
38. MOD 2 — .brand-logo-text GRADIENT MARK
Premium gradient + glow + stretch micro-interaction
══════════════════════════════════════════════════════════════ */
.brand-logo-text {
/* Gradient text fill: ink → copper accent */
background: linear-gradient(
135deg,
rgb(var(--text-rgb)) 0%,
var(--copper) 45%,
rgb(var(--accent-rgb)) 75%,
rgb(var(--text-rgb)) 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* Premium glow — uses accent colour at low opacity */
text-shadow: none; /* text-shadow ignored when -webkit-text-fill-color is active */
filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.28));
/* Smooth transitions */
transition:
filter 0.5s var(--ease-expo),
background-size 0.5s var(--ease-expo),
letter-spacing 0.45s var(--ease-expo),
transform 0.45s var(--ease-expo);
display: inline-block; /* needed for transform to work on inline */
}
/* Hover: threads stretching / circuit activating */
.brand-logo-text:hover,
a:hover .brand-logo-text,
h1:hover .brand-logo-text {
background-size: 120% 120%; /* animate gradient sweep */
letter-spacing: 0.06em; /* threads stretching */
transform: scale(1.03); /* subtle expand */
filter: drop-shadow(0 0 28px rgba(var(--accent-rgb), 0.52));
}
/* Dark-mode: more vivid glow */
[data-theme="dark"] .brand-logo-text {
filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.42));
}
[data-theme="dark"] .brand-logo-text:hover,
[data-theme="dark"] a:hover .brand-logo-text {
filter: drop-shadow(0 0 36px rgba(var(--accent-rgb), 0.70));
}
/* Arabic letter-spacing: must stay 0 for ligature integrity */
[dir="rtl"] .brand-logo-text {
letter-spacing: 0 !important;
}
[dir="rtl"] .brand-logo-text:hover,
[dir="rtl"] a:hover .brand-logo-text {
letter-spacing: 0 !important;
}
/* ══════════════════════════════════════════════════════════════
39. FEATURE 3 — WARP & WEFT PARALLAX LAYERS
Decorative ghost layers behind hero-content, scroll-driven
by GSAP ScrollTrigger scrub (see script.js HeroWarpWeft)
══════════════════════════════════════════════════════════════ */
/* Both layers: full-width, absolute, centred, pointer-events off */
.hero-warp,
.hero-weft {
position: absolute;
inset-inline: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
pointer-events: none;
user-select: none;
will-change: transform;
/* Below hero-content (z:2) but above canvas (z:0) */
z-index: 1;
}
/* Warp (English) — sits slightly higher than centre */
.hero-warp {
top: 15%;
opacity: 0.06;
}
/* Weft (Arabic) — sits slightly lower than centre */
.hero-weft {
bottom: 15%;
opacity: 0.05;
}
/* The ghost lines inherit the same type scale as the real elements */
.hero-warp-line {
display: block;
font-family: var(--font-display);
font-size: var(--type-3xl);
font-weight: 700;
font-style: italic;
color: var(--ink);
line-height: 1.05;
letter-spacing: -0.015em;
}
.hero-weft-line {
display: block;
font-family: var(--font-arabic);
font-size: var(--type-3xl);
font-weight: 700;
color: var(--ink);
line-height: 1.2;
letter-spacing: 0;
}
/* Reduced-motion: hide decorative layers entirely */
@media (prefers-reduced-motion: reduce) {
.hero-warp,
.hero-weft { display: none; }
}
/* ══════════════════════════════════════════════════════════════
40. FEATURE 4 — UNRAVEL & WEAVE FILTER CARDS
SVG bounding-box overlay drawn via stroke-dashoffset
══════════════════════════════════════════════════════════════ */
/* Weave-border SVG injected by JS into each card during entrance */
.pf-weave-border {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10; /* above everything else during draw */
overflow: visible;
}
.pf-weave-border rect {
fill: none;
stroke: var(--copper);
stroke-width: 1.5px;
vector-effect: non-scaling-stroke;
/* Start fully hidden — GSAP animates to 0 */
stroke-dasharray: var(--dash-len, 9999);
stroke-dashoffset: var(--dash-len, 9999);
transition: none; /* GSAP owns this, not CSS */
}
/* After weave is complete, remove the overlay smoothly */
.pf-weave-border--done {
opacity: 0;
transition: opacity 0.6s ease 0.2s;
}
/* Mobile nav: logo image centred */
.logo-img--mobile {
height: 44px;
width: auto;
display: block;
margin-inline: auto;
}
[data-theme="dark"] .logo-img--mobile {
filter: brightness(0) invert(1);
}
/* ══════════════════════════════════════════════════════════════
FIX 1 — HERO BILINGUAL TEXT COLLISION RESOLUTION
─────────────────────────────────────────────────────────────
Root causes removed:
• warp/weft layers were in normal flow AND positioned absolute
simultaneously → double-render + collision
• .brand-logo-text inside .title-ar added extra z-stacking
• No bottom margins between EN typography blocks
Solution: strict block-flow with position:relative on every
title element, explicit margin-bottom gaps, warp/weft layers
are now purely decorative absolute elements (not in flow).
══════════════════════════════════════════════════════════════ */
/* ── hero-inner: flex-column, centred, relative context ──── */
.hero-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
flex: 1;
position: relative; /* stacking context for warp/weft */
gap: 0; /* gap handled by margin-bottom on children */
padding-block: 24px 0;
}
/* ── hero-content: the ONLY element in normal flow ────────── */
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 2; /* above warp/weft ghost layers */
width: 100%;
max-width: 900px;
margin-inline: auto;
/* No padding — margins on children provide all spacing */
}
/* ── hero-title: strict column, no gap, relative positioning */
.hero-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
width: 100%;
line-height: 1;
/* No position:absolute anywhere in this stack */
}
/* ── .title-ar: large Arabic glyph — always relative ──────── */
.title-ar {
position: relative !important; /* never absolute */
display: block;
font-family: var(--font-arabic);
font-size: var(--type-display);
font-weight: 700;
line-height: 1.0;
color: var(--ink);
letter-spacing: -0.01em;
margin-bottom: 0.15em; /* breathing room below the glyph */
}
/* ── .title-en-1: italic editorial line ──────────────────── */
.title-en-1 {
position: relative !important;
display: block;
font-family: var(--font-display);
font-style: italic;
font-size: var(--type-2xl);
font-weight: 300;
line-height: 1.1;
color: var(--ink);
letter-spacing: -0.015em;
margin-inline-start: 0 !important;
margin-bottom: 0.12em;
}
/* ── .title-en-2: bold uppercase block ───────────────────── */
.title-en-2 {
position: relative !important;
display: block;
font-family: var(--font-sans);
font-size: clamp(17px, 3vw, 48px);
font-weight: 800;
line-height: 1.2;
color: var(--ink);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-inline-start: 0 !important;
margin-bottom: 0.2em;
}
/* ── .title-ar-main: Arabic RTL headline ─────────────────── */
.title-ar-main {
position: relative !important;
display: none; /* hidden in LTR — shown by [dir="rtl"] rule */
font-family: var(--font-arabic);
font-size: var(--type-2xl);
font-weight: 700;
line-height: 1.3;
color: var(--ink);
letter-spacing: 0;
margin-bottom: 0.25em;
}
/* Separation between hero-content and hero-meta */
.hero-content + .hero-warp,
.hero-content + .hero-weft {
/* ghost layers — no contribution to flow */
display: none; /* handled by the absolute version below */
}
.hero-meta {
margin-top: 40px;
position: relative;
z-index: 2;
}
/* ── hero-desc: editorial body copy ──────────────────────── */
.hero-desc {
position: relative;
max-width: 680px;
font-size: clamp(0.88rem, 1.1vw, 1rem);
line-height: 1.75;
color: var(--ink-60);
margin-top: 28px;
margin-bottom: 0;
margin-inline: auto;
text-align: center;
}
/* ── hero-actions: centred CTA row ───────────────────────── */
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
margin-top: 32px;
position: relative;
}
/* ── Warp & Weft: PURELY DECORATIVE absolute ghost layers ── */
/* They are aria-hidden, never in normal flow, never clickable */
.hero-warp,
.hero-weft {
position: absolute !important; /* out of normal flow */
inset-inline: 0;
pointer-events: none !important;
user-select: none;
z-index: 1; /* below hero-content (z:2) */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
will-change: transform;
/* Visibility — very subtle ghost */
opacity: 0; /* GSAP reveals after intro */
}
.hero-warp {
top: 10%;
/* Will be set to opacity 0.06 by GSAP after intro */
}
.hero-weft {
bottom: 10%;
/* Will be set to opacity 0.05 by GSAP after intro */
}
.hero-warp-line {
display: block;
font-family: var(--font-display);
font-size: var(--type-3xl);
font-weight: 700;
font-style: italic;
color: var(--ink);
line-height: 1.05;
letter-spacing: -0.015em;
}
.hero-weft-line {
display: block;
font-family: var(--font-arabic);
font-size: var(--type-3xl);
font-weight: 700;
color: var(--ink);
line-height: 1.2;
}
/* ── RTL language overrides ──────────────────────────────── */
[dir="rtl"] .title-en-1,
[dir="rtl"] .title-en-2 {
display: none !important; /* hide EN lines in AR mode */
}
[dir="rtl"] .title-ar-main {
display: block !important; /* show AR headline in AR mode */
}
[dir="rtl"] .title-ar {
font-size: var(--type-3xl);
}
[dir="rtl"] .hero-desc {
font-family: var(--font-arabic-sans);
line-height: 2;
text-align: center;
}
/* ── Mobile responsive: 768px ────────────────────────────── */
@media (max-width: 768px) {
.hero-inner { gap: 0; }
.title-en-1 { margin-inline-start: 0 !important; }
.title-en-2 { margin-inline-start: 0 !important; }
.hero-actions { flex-direction: row; }
}
/* ── Mobile responsive: 540px ────────────────────────────── */
@media (max-width: 540px) {
.hero-actions {
flex-direction: column;
align-items: center;
width: 100%;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* ── Ultra-narrow: 380px ─────────────────────────────────── */
@media (max-width: 380px) {
.title-ar {
font-size: clamp(48px, 18vw, 80px);
margin-bottom: 0.1em;
}
.title-en-1 {
font-size: clamp(24px, 8vw, 40px);
margin-bottom: 0.1em;
}
.title-en-2 {
font-size: clamp(14px, 5vw, 24px);
}
.title-ar-main {
font-size: clamp(26px, 8vw, 44px);
}
.hero-desc {
font-size: 0.84rem;
margin-top: 20px;
}
.hero-meta { margin-top: 28px; }
}
/* ── Reduced motion: hide parallax ghost layers ─────────── */
@media (prefers-reduced-motion: reduce) {
.hero-warp,
.hero-weft { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════
(FIX 2 legacy block removed — the header logo now uses the
single .brand-logo-img rule defined earlier in this file.
Mobile drawer brand text below is unrelated and still active.)
══════════════════════════════════════════════════════════════ */
/* Mobile nav: text brand */
.mobile-brand-latin {
display: block;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
}
.mobile-brand-ar {
display: block;
font-family: var(--font-arabic);
font-size: 0.9rem;
font-weight: 600;
color: var(--copper);
letter-spacing: 0;
margin-top: 2px;
}
/* ══════════════════════════════════════════════════════════════
FIX 3 — GLOBAL VISUAL SAFETY CHECKS
─────────────────────────────────────────────────────────────
• Logical property safe defaults for RTL/LTR switching
• body.js-ready fallback — never freeze on animation fail
• .brand-logo-text scoped only to body/footer text spans
══════════════════════════════════════════════════════════════ */
/* body.js-ready fallback: if GSAP never fires, ensure visibility */
body:not(.js-ready) .bento-item,
body:not(.js-ready) .pf-card,
body:not(.js-ready) .hero-content,
body:not(.js-ready) .hero-title,
body:not(.js-ready) .hero-eyebrow,
body:not(.js-ready) .hero-weaving-wrap,
body:not(.js-ready) .hero-desc,
body:not(.js-ready) .hero-actions,
body:not(.js-ready) .hero-meta,
body:not(.js-ready) .title-ar,
body:not(.js-ready) .title-en-1,
body:not(.js-ready) .title-en-2,
body:not(.js-ready) .title-ar-main {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
filter: none !important;
visibility: visible !important;
}
/* Prevent .hero-warp / .hero-weft from freezing at opacity:0
when GSAP doesn't run (they're decorative — just hide them) */
body:not(.js-ready) .hero-warp,
body:not(.js-ready) .hero-weft {
display: none !important;
}
/* .brand-logo-text: ONLY for footer / descriptive spans
NOT applied to hero h1 spans (those are plain text) */
.footer-logo-ar.brand-logo-text,
.studio-quote-ar .brand-logo-text {
background: linear-gradient(
135deg,
rgb(var(--text-rgb)) 0%,
var(--copper) 45%,
rgb(var(--accent-rgb)) 75%,
rgb(var(--text-rgb)) 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.22));
display: inline-block;
}
/* RTL logical-property safety: all inline offsets use logical props */
[dir="rtl"] .hero-content,
[dir="rtl"] .hero-title {
text-align: center;
align-items: center;
}
[dir="rtl"] .hero-actions {
justify-content: center;
}
/* Prevent any margin-inline-start bleed in RTL */
[dir="rtl"] .title-en-1,
[dir="rtl"] .title-en-2 {
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
}
/* ══════════════════════════════════════════════════════════════
NEW FEATURES — NASIEJ v4.0
1. Services Accordion
2. Testimonials Carousel
3. Cookie Consent GDPR Banner
4. Services i18n additions
══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────
1. SERVICES ACCORDION
───────────────────────────────────────────────── */
.service-item {
cursor: pointer;
position: relative;
transition: background var(--dur-fast) var(--ease-expo);
}
.service-item:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 4px;
border-radius: 4px;
}
/* Toggle icon — replaces the static ↗ arrow */
.service-toggle {
position: relative;
line-height: 1;
flex-shrink: 0;
margin-left: auto;
padding-left: 1rem;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1.5px solid var(--copper-20);
border-radius: 50%;
user-select: none;
background: var(--copper-06);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
transition:
transform 0.5s var(--ease-expo),
background 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Plus/X drawn as two CSS bars instead of a font glyph —
renders crisply at any zoom and rotates as a true X, not
an off-centre "+" glyph. */
.service-toggle::before,
.service-toggle::after {
content: '';
position: absolute;
background: var(--copper);
border-radius: 1px;
transition: transform 0.45s var(--ease-expo), background 0.35s ease;
}
.service-toggle::before { width: 14px; height: 1.6px; }
.service-toggle::after { width: 1.6px; height: 14px; }
/* Hover feedback BEFORE click — this was missing entirely */
.service-item:hover .service-toggle {
border-color: var(--copper);
background: var(--copper-12);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 0 0 4px var(--copper-06);
}
.service-item:hover .service-toggle::before,
.service-item:hover .service-toggle::after {
background: var(--copper-light);
}
/* Open state: pill fills solid, icon rotates a clean 45° into an X,
with a tiny scale overshoot so it doesn't feel flat */
.service-item[aria-expanded="true"] .service-toggle {
transform: rotate(90deg) scale(1.08);
background: var(--copper);
border-color: var(--copper);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 16px var(--copper-20);
}
.service-item[aria-expanded="true"] .service-toggle::before,
.service-item[aria-expanded="true"] .service-toggle::after {
background: var(--cream);
}
.service-item[aria-expanded="true"]:hover .service-toggle {
transform: rotate(90deg) scale(1.14);
}
/* Expandable content container
── Was `max-height: 320px` (a fixed guess). That clips real
content the moment it runs longer than the guess — a 4-item
deliverables list wrapping to two lines each in Arabic, or a
longer price label, would silently cut off with no visual cue.
Switched to the grid-template-rows 0fr → 1fr technique: it
animates smoothly without ever needing to know the content's
actual height, so it can never clip regardless of language,
translation, or future copy changes. */
.service-expand {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.6s var(--ease-expo);
opacity: 0;
pointer-events: none;
}
.service-expand > .service-expand-inner {
overflow: hidden;
min-height: 0;
}
.service-item[aria-expanded="true"] .service-expand {
grid-template-rows: 1fr;
opacity: 1;
pointer-events: auto;
transition: grid-template-rows 0.6s var(--ease-expo), opacity 0.45s ease 0.05s;
}
.service-expand-inner > * {
padding-top: clamp(14px, 2vw, 20px);
}
/* Deliverables list */
.service-deliverables {
border-top: 1px solid var(--copper-12);
}
.service-deliver-head {
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 10px;
}
.service-deliverables ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 16px;
}
@media (max-width: 600px) {
.service-deliverables ul {
grid-template-columns: 1fr;
}
}
.service-deliverables li {
font-size: 0.82rem;
color: var(--ink-60);
padding-left: 14px;
position: relative;
line-height: 1.5;
}
.service-deliverables li::before {
content: '◆';
position: absolute;
left: 0;
font-size: 0.42rem;
top: 5px;
color: var(--copper);
}
/* Pricing badge */
.service-pricing {
display: flex;
align-items: baseline;
gap: 10px;
padding-top: 12px;
}
.service-price-label {
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-40);
font-family: var(--font-sans);
}
.service-price {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--copper);
}
/* RTL tweaks for accordion */
[dir="rtl"] .service-toggle {
margin-left: 0;
margin-right: auto;
padding-left: 0;
padding-right: 1rem;
}
[dir="rtl"] .service-deliverables li {
padding-left: 0;
padding-right: 14px;
}
[dir="rtl"] .service-deliverables li::before {
left: auto;
right: 0;
}
/* ─────────────────────────────────────────────────
2. TESTIMONIALS — Premium Two-Column Editorial Layout
───────────────────────────────────────────────── */
#testimonials {
padding: var(--section-py) var(--pad-x);
overflow: hidden;
}
/* Two-column layout: heading on left, carousel on right */
.testi-layout {
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: 320px 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
@media (max-width: 900px) {
.testi-layout {
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 48px);
}
}
/* ── Left column: heading ── */
.testi-heading-col {
display: flex;
flex-direction: column;
gap: 20px;
}
.testi-eyebrow {
text-align: start;
}
.testi-headline {
text-align: start !important;
margin: 0;
}
.testi-headline em {
display: block;
color: var(--copper);
}
/* Client count badge */
.testi-count-label {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: var(--cream-mid);
border: 1px solid var(--copper-12);
border-radius: 12px;
margin-top: 8px;
}
.testi-count-num {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--copper);
line-height: 1;
flex-shrink: 0;
}
.testi-count-text {
font-family: var(--font-body);
font-size: 0.8rem;
line-height: 1.5;
color: var(--ink-60);
}
/* Prev / Next controls */
.testi-controls {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.testi-ctrl {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--copper-20);
background: transparent;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast), border-color var(--dur-fast),
color var(--dur-fast), transform var(--dur-fast);
flex-shrink: 0;
}
.testi-ctrl:hover {
background: var(--copper);
border-color: var(--copper);
color: white;
transform: scale(1.08);
}
/* Dots */
.testi-dots {
display: flex;
align-items: center;
gap: 8px;
}
.testi-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ink-20);
border: none;
cursor: pointer;
padding: 0;
transition: background var(--dur-fast), width 0.3s var(--ease-expo),
border-radius 0.3s var(--ease-expo);
}
.testi-dot--active,
.testi-dot:hover {
background: var(--copper);
width: 22px;
border-radius: 4px;
}
/* ── Right column: carousel ── */
.testi-track-wrapper {
position: relative;
overflow: hidden;
cursor: grab;
}
.testi-track-wrapper:active { cursor: grabbing; }
.testi-track {
display: flex;
gap: clamp(16px, 2.5vw, 24px);
transition: transform 0.65s var(--ease-expo);
will-change: transform;
}
/* Fade hint for next card */
.testi-peek-fade {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100%;
background: linear-gradient(to right, transparent, var(--cream));
pointer-events: none;
z-index: 2;
}
[dir="rtl"] .testi-peek-fade {
right: auto;
left: 0;
background: linear-gradient(to left, transparent, var(--cream));
}
/* ── Individual card ── */
.testi-card {
flex: 0 0 clamp(300px, 72vw, 460px);
background: var(--cream);
border: 1px solid var(--copper-12);
border-radius: 20px;
padding: clamp(28px, 4vw, 44px);
position: relative;
overflow: hidden;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-expo);
/* Ensure no dark background ever */
color: var(--ink);
}
.testi-card:hover {
border-color: rgba(var(--accent-rgb), 0.28);
box-shadow: 0 16px 48px rgba(var(--accent-rgb), 0.08),
0 2px 8px rgba(var(--text-rgb), 0.06);
transform: translateY(-6px);
}
/* Glint line at top edge */
.testi-card::before {
content: '';
position: absolute;
top: 0; left: 20px; right: 20px;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--accent-rgb), 0.5) 50%,
transparent 100%
);
border-radius: 0 0 2px 2px;
}
/* Large watermark "quote" behind text — brightens slightly on
hover so the card feels responsive down to its background
details, not just the outer border/shadow. */
.testi-card::after {
content: '"';
position: absolute;
bottom: -20px;
right: 16px;
font-family: var(--font-display);
font-size: 160px;
font-weight: 800;
color: var(--copper);
opacity: 0.04;
line-height: 1;
pointer-events: none;
user-select: none;
transition: opacity 0.4s ease, transform 0.4s var(--ease-expo);
}
.testi-card:hover::after {
opacity: 0.07;
transform: translateY(-3px);
}
[dir="rtl"] .testi-card::after {
right: auto;
left: 16px;
}
/* Card top row: stars + quote icon */
.testi-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.testi-stars-top {
color: var(--copper);
font-size: 0.85rem;
letter-spacing: 2px;
}
.testi-quote-icon {
color: var(--copper);
opacity: 0.35;
}
/* Quote text */
.testi-text {
font-family: var(--font-body);
font-size: clamp(0.9rem, 1.15vw, 1.02rem);
line-height: 1.8;
color: var(--ink-80);
margin: 0 0 24px;
font-style: normal;
position: relative;
z-index: 1;
}
/* Thin copper divider */
.testi-divider {
height: 1px;
background: linear-gradient(90deg, var(--copper-20), transparent);
margin-bottom: 20px;
}
[dir="rtl"] .testi-divider {
background: linear-gradient(270deg, var(--copper-20), transparent);
}
/* Author row — EXPLICITLY transparent background */
.testi-author {
display: flex;
align-items: center;
gap: 12px;
background: transparent !important;
color: var(--ink) !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
/* Avatar circle — inset highlight gives it a subtle raised,
lit-disc feel instead of a flat gradient fill, echoing the
depth treatment used on the primary/ghost buttons. */
.testi-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--copper-20), var(--copper-12));
border: 1.5px solid var(--copper-20);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 2px rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.76rem;
font-weight: 700;
color: var(--copper);
flex-shrink: 0;
}
.testi-avatar--b {
background: linear-gradient(135deg, rgba(var(--text-rgb), 0.08), rgba(var(--text-rgb), 0.04));
border-color: rgba(var(--text-rgb), 0.15);
color: var(--ink);
}
.testi-avatar--c {
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.06));
border-color: rgba(var(--accent-rgb), 0.2);
color: rgb(var(--accent-rgb));
}
.testi-author-info {
flex: 1;
min-width: 0;
}
.testi-name {
display: block;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 700;
color: var(--ink);
font-style: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.testi-role {
font-size: 0.74rem;
color: var(--ink-40);
margin: 3px 0 0;
font-family: var(--font-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.testi-verified {
flex-shrink: 0;
margin-left: auto;
}
[dir="rtl"] .testi-verified {
margin-left: 0;
margin-right: auto;
}
/* Dark mode card */
[data-theme="dark"] .testi-card {
background: rgba(var(--text-rgb), 0.04);
}
[data-theme="dark"] .testi-peek-fade {
background: linear-gradient(to right, transparent, rgb(var(--bg-rgb)));
}
[dir="rtl"][data-theme="dark"] .testi-peek-fade {
background: linear-gradient(to left, transparent, rgb(var(--bg-rgb)));
}
/* RTL column order flip */
@media (min-width: 901px) {
[dir="rtl"] .testi-layout {
grid-template-columns: 1fr 320px;
}
[dir="rtl"] .testi-heading-col {
order: 2;
}
[dir="rtl"] .testi-track-wrapper {
order: 1;
}
[dir="rtl"] .testi-peek-fade {
right: auto;
left: 0;
}
}
/* Mobile: full width */
@media (max-width: 900px) {
.testi-heading-col {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.testi-headline {
flex: 1 0 100%;
}
.testi-count-label {
flex: 0 0 auto;
}
.testi-controls {
flex: 0 0 auto;
margin-top: 0;
align-self: flex-end;
}
.testi-card {
flex: 0 0 calc(100vw - var(--pad-x) * 2 - 16px);
max-width: 460px;
}
}
/* ─────────────────────────────────────────────────
3. COOKIE CONSENT GDPR BANNER
───────────────────────────────────────────────── */
#cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
transform: translateY(100%);
transition: transform 0.45s var(--ease-expo);
display: block; /* overrides hidden — JS removes hidden attr */
}
#cookie-banner[hidden] {
display: none !important;
}
#cookie-banner.is-visible {
transform: translateY(0);
}
#cookie-banner.is-dismissing {
transform: translateY(100%);
}
.cookie-inner {
background: var(--surface);
color: var(--on-surface);
padding: clamp(14px, 2.5vw, 20px) clamp(16px, 5vw, 48px);
display: flex;
align-items: center;
gap: clamp(12px, 3vw, 32px);
flex-wrap: wrap;
border-top: 1px solid rgba(var(--on-surface-rgb), 0.12);
}
.cookie-text {
display: flex;
align-items: flex-start;
gap: 12px;
flex: 1;
min-width: 220px;
}
.cookie-icon {
flex-shrink: 0;
margin-top: 2px;
opacity: 0.7;
color: var(--on-surface);
}
.cookie-text p {
font-family: var(--font-body);
font-size: 0.83rem;
line-height: 1.6;
color: rgba(var(--on-surface-rgb), 0.82);
margin: 0;
}
.cookie-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.cookie-btn {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 22px;
border-radius: 6px;
border: 1.5px solid;
cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast),
transform var(--dur-fast);
}
.cookie-btn:hover {
transform: translateY(-1px);
}
.cookie-btn--ghost {
background: transparent;
color: rgba(var(--on-surface-rgb), 0.65);
border-color: rgba(var(--on-surface-rgb), 0.25);
}
.cookie-btn--ghost:hover {
border-color: rgba(var(--on-surface-rgb), 0.5);
color: var(--on-surface);
}
.cookie-btn--primary {
background: var(--copper);
color: var(--surface);
border-color: var(--copper);
}
.cookie-btn--primary:hover {
background: var(--copper-light);
border-color: var(--copper-light);
}
/* Dark mode: cookie banner stays surface-colored (already using --surface) */
@media (max-width: 540px) {
.cookie-inner {
flex-direction: column;
align-items: flex-start;
}
.cookie-actions {
width: 100%;
justify-content: flex-end;
}
}
/* ─────────────────────────────────────────────────
4. FORM HONEYPOT (invisible to humans)
───────────────────────────────────────────────── */
.form-honeypot {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
opacity: 0 !important;
pointer-events: none !important;
tab-index: -1;
}
/* ─────────────────────────────────────────────────
5. FORM SEND ERROR MESSAGE
───────────────────────────────────────────────── */
.form-error-msg {
margin-top: 12px;
padding: 12px 16px;
background: rgba(220, 50, 50, 0.08);
border: 1px solid rgba(220, 50, 50, 0.25);
border-radius: 8px;
font-size: 0.82rem;
color: #dc3232;
display: none;
}
.form-error-msg.visible {
display: block;
}
[data-theme="dark"] .form-error-msg {
background: rgba(255, 80, 80, 0.1);
border-color: rgba(255, 80, 80, 0.2);
color: #ff8080;
}
/* ══════════════════════════════════════════════════════════════
WORKS + TESTIMONIALS POLISH (v4.1 upgrade)
══════════════════════════════════════════════════════════════ */
/* ── Bento card: sharper corner-radius, depth shadow on hover ── */
.bento-item {
border-radius: 10px !important;
}
.bento-item::before {
border-radius: 10px !important;
}
.bento-item:hover {
box-shadow:
0 24px 64px rgba(var(--text-rgb), 0.22),
0 4px 16px rgba(var(--text-rgb), 0.14);
}
/* ── Bento content: slide-up on hover, bigger title ── */
.bento-content {
transition: transform 0.5s var(--ease-expo) !important;
}
.bento-item:hover .bento-content {
transform: translateY(-8px) !important;
}
.bento-title {
font-size: clamp(1.1rem, 2.2vw, 1.55rem) !important;
line-height: 1.2 !important;
}
/* ── Link icon: more visible ── */
.bento-link-icon {
opacity: 1 !important;
background: rgba(var(--bg-rgb), 0.15) !important;
border: 1px solid rgba(var(--bg-rgb), 0.25) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
transition: background 0.3s, transform 0.4s var(--ease-expo) !important;
}
.bento-item:hover .bento-link-icon {
background: rgba(var(--bg-rgb), 0.3) !important;
transform: translate(4px, -4px) !important;
}
/* ── Filter bar: more breathing room, sticky on scroll ── */
.portfolio-filters {
position: sticky;
top: 72px;
z-index: 40;
background: rgba(var(--bg-rgb), 0.88);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
border-radius: 0;
padding: 12px 0 12px;
margin-top: 24px;
border-bottom: 1px solid var(--ink-10);
}
/* ── pf-btn: slightly taller, rounded pill on active ── */
.pf-btn {
border-radius: 6px !important;
padding: 10px 18px 9px !important;
}
.pf-btn.pf-btn--active,
.pf-btn[aria-selected="true"] {
border-radius: 6px !important;
}
.pf-btn.pf-btn--active::after,
.pf-btn[aria-selected="true"]::after {
background: rgba(var(--bg-rgb), 0.25) !important;
color: rgba(var(--bg-rgb), 0.9) !important;
}
/* ── Testimonials: section padding ── */
#testimonials {
padding-top: clamp(64px, 8vw, 100px);
padding-bottom: clamp(64px, 8vw, 100px);
}
/* Ensure testi-author NEVER inherits dark footer styles */
.testi-author,
.testi-author * {
background-color: transparent !important;
}
.testi-name { color: var(--ink) !important; }
.testi-role { color: var(--ink-40) !important; }
/* ── Count stat: better proportions ── */
.testi-count-label {
flex-direction: row;
align-items: center;
}
/* ══════════════════════════════════════════════════════════════
WORKS MASONRY GRID — v5.0 (no filters, editorial look)
Cormorant Garamond for card titles, clean grid layout
══════════════════════════════════════════════════════════════ */
/* ─── Typography upgrades ─── */
:root {
--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-arabic-body: 'Noto Sans Arabic', 'Alexandria', sans-serif;
}
/* Better base text rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1, 'liga' 1;
}
/* English body text — tighter tracking */
p, li, blockquote {
font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
}
/* Arabic body text — improved spacing */
[lang="ar"] body,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .studio-body,
[dir="rtl"] .service-desc,
[dir="rtl"] .testi-text {
font-family: var(--font-arabic-body);
line-height: 2.0;
letter-spacing: 0;
word-spacing: 0.06em;
}
/* Arabic headings: Alexandria stays but with better weight */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
font-family: 'Alexandria', sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
}
/* ─── Works section wrapper ─── */
#works {
padding-block: var(--section-py);
overflow: hidden;
width: 100%;
}
/* ─── Masonry Grid ─── */
/* ═══════════ WORKS TOOLBAR — search + category filters ═══════════ */
.works-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(10px, 1.5vw, 16px);
margin: clamp(24px, 3vw, 36px) 0 0;
}
.works-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 280px;
max-width: 360px;
height: 50px;
border-radius: 999px;
border: 1px solid var(--ink-10);
background: var(--ink-06);
backdrop-filter: blur(6px);
overflow: hidden;
transition:
border-color 0.35s var(--ease-expo),
background 0.35s var(--ease-expo),
box-shadow 0.4s var(--ease-expo),
max-width 0.45s var(--ease-expo);
}
/* Soft copper glow that sweeps in behind the pill on focus */
.works-search::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(circle at 15% 50%, var(--copper-12), transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.works-search:focus-within {
max-width: 440px;
border-color: var(--copper);
background: var(--copper-06);
box-shadow: 0 0 0 4px var(--copper-12), 0 10px 28px rgba(0,0,0,0.1);
}
.works-search:focus-within::before { opacity: 1; }
.works-search.has-query {
border-color: var(--copper);
}
.works-search.is-listening {
border-color: #e0483e;
background: rgba(224, 72, 62, 0.06);
box-shadow: 0 0 0 4px rgba(224, 72, 62, 0.12), 0 10px 28px rgba(0,0,0,0.1);
}
.works-search-icon {
position: absolute;
left: 18px;
z-index: 1;
color: var(--ink-40);
pointer-events: none;
transition: color 0.35s ease, transform 0.35s var(--ease-expo);
}
.works-search:focus-within .works-search-icon,
.works-search.has-query .works-search-icon {
color: var(--copper);
transform: scale(1.12);
}
[dir="rtl"] .works-search-icon { left: auto; right: 18px; }
.works-search-input {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 0 76px 0 44px;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--ink);
outline: none;
transition: padding 0.3s ease;
}
[dir="rtl"] .works-search-input { padding: 0 44px 0 76px; text-align: right; }
.works-search-input::placeholder {
color: var(--ink-40);
transition: opacity 0.25s ease;
}
.works-search:focus-within .works-search-input::placeholder { opacity: 0.6; }
/* Clear (×) sits closer to center-right; mic sits at the far edge.
Both use the same coordinate system so they never overlap. */
.works-search-clear {
position: absolute;
right: 42px;
z-index: 1;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--ink-10);
color: var(--ink-60);
border-radius: 50%;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
opacity: 0;
transform: translateX(6px) scale(0.7) rotate(-90deg);
transition:
opacity 0.25s ease,
transform 0.35s var(--ease-expo),
background 0.25s ease,
color 0.25s ease;
}
[dir="rtl"] .works-search-clear {
right: auto;
left: 42px;
transform: translateX(-6px) scale(0.7) rotate(90deg);
}
.works-search-clear.is-visible {
opacity: 1;
transform: translateX(0) scale(1) rotate(0deg);
}
.works-search-clear:hover {
background: var(--copper);
color: #fff;
transform: scale(1.12) rotate(90deg);
}
[dir="rtl"] .works-search-clear:hover { transform: scale(1.12) rotate(-90deg); }
/* ─── Voice search mic button ─── */
.works-search-mic {
position: absolute;
right: 8px;
z-index: 1;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--ink-40);
border-radius: 50%;
cursor: pointer;
transition: color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease-expo);
}
[dir="rtl"] .works-search-mic { right: auto; left: 8px; }
.works-search-mic:hover {
color: var(--copper);
background: var(--copper-06);
transform: scale(1.1);
}
.works-search-mic.is-active {
color: #fff;
background: #e0483e;
}
.works-search-mic.is-active:hover {
background: #c93c33;
color: #fff;
}
/* Pulsing ring shown only while actively listening */
.works-search-mic-pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid #e0483e;
opacity: 0;
transform: scale(0.8);
}
.works-search-mic.is-active .works-search-mic-pulse {
animation: micPulse 1.4s ease-out infinite;
}
@keyframes micPulse {
0% { opacity: 0.55; transform: scale(0.8); }
100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
.works-search-mic.is-active .works-search-mic-pulse { animation: none; opacity: 0.3; }
}
/* Thin animated underline sweeping in from the center on focus —
a small extra flourish beneath the pill's own border/shadow */
.works-search-underline {
position: absolute;
left: 50%;
bottom: -1px;
width: 0;
height: 2px;
background: var(--copper);
border-radius: 2px;
transform: translateX(-50%);
transition: width 0.4s var(--ease-expo);
z-index: 1;
}
.works-search:focus-within .works-search-underline { width: 60%; }
.works-search.is-listening .works-search-underline { width: 60%; background: #e0483e; }
.works-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 2 1 auto;
}
.works-filter-pill {
position: relative;
padding: 9px 34px 9px 18px;
border-radius: 999px;
border: 1px solid var(--ink-10);
background: var(--ink-06);
color: var(--ink-60);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
isolation: isolate;
transition: background 0.35s var(--ease-expo), color 0.3s ease,
border-color 0.35s ease, transform 0.25s var(--ease-expo),
box-shadow 0.35s var(--ease-expo);
}
[dir="rtl"] .works-filter-pill { padding: 9px 18px 9px 34px; }
/* Soft glow that sweeps in on hover, echoing the search bar's glow */
.works-filter-pill::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle at 20% 50%, var(--copper-12), transparent 70%);
opacity: 0;
transition: opacity 0.35s ease;
}
.works-filter-count {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: var(--ink-10);
color: var(--ink-60);
font-size: 0.62rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.3s, color 0.3s;
}
[dir="rtl"] .works-filter-count { right: auto; left: 8px; }
.works-filter-pill.is-active .works-filter-count {
background: rgba(255,255,255,0.28);
color: #fff;
}
.works-filter-pill:hover {
border-color: var(--copper);
color: var(--ink);
transform: translateY(-1px);
}
.works-filter-pill:hover::before { opacity: 1; }
.works-filter-pill.is-active {
/* Gradient + glow instead of a flat accent fill — matches the
glowing-thread language used everywhere else on the site
(status dots, weaving canvas center thread, search focus glow)
rather than dropping a solid neon block in a glass UI. */
background: linear-gradient(135deg, var(--copper), rgba(var(--accent-rgb), 0.78));
border-color: transparent;
color: #fff;
box-shadow:
0 0 0 1px rgba(var(--accent-rgb), 0.35),
0 4px 18px rgba(var(--accent-rgb), 0.35),
0 0 20px rgba(var(--accent-rgb), 0.22);
}
.works-filter-pill.is-active:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(var(--accent-rgb), 0.45),
0 6px 22px rgba(var(--accent-rgb), 0.42),
0 0 26px rgba(var(--accent-rgb), 0.3);
}
.works-filter-pill:active {
transform: translateY(0) scale(0.97);
}
.works-count {
flex-basis: 100%;
margin: 2px 0 0;
font-family: var(--font-sans);
font-size: 0.72rem;
color: var(--ink-40);
letter-spacing: 0.03em;
}
/* ─── View toggle: All Projects / By Company ───
Sliding glow thumb (::after) driven by data-active on the parent
instead of a static "active button = solid block" state — keeps
motion consistent with the rest of the toolbar's glow language
and gives the switch a tactile, single-piece feel. */
.works-view-toggle {
position: relative;
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: 999px;
background: var(--ink-06);
border: 1px solid var(--ink-10);
margin-inline-start: auto;
backdrop-filter: blur(6px);
}
.works-view-toggle::after {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
/* Logical property — automatically sits under the first button
in both LTR and RTL, instead of the physical "left" which put
the thumb on the wrong side once the page flips to Arabic. */
inset-inline-start: 3px;
width: calc(50% - 3px);
border-radius: 999px;
background: linear-gradient(135deg, var(--copper), rgba(var(--accent-rgb), 0.78));
box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.35), 0 0 16px rgba(var(--accent-rgb), 0.2);
transition: inset-inline-start 0.4s var(--ease-expo);
z-index: 0;
}
.works-view-toggle[data-active="company"]::after {
inset-inline-start: calc(50% + 2px);
}
.works-view-btn {
position: relative;
z-index: 1;
padding: 8px 16px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--ink-60);
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.3s ease;
}
.works-view-btn.is-active {
/* Thumb behind (::after) now carries the color/glow — this just
needs to sit on top in readable white, no separate fill. */
background: transparent;
color: #fff;
}
/* Any element explicitly marked [hidden] must stay hidden even if
a later class rule sets its own display (e.g. .works-masonry's
display:grid or .works-by-company's display:flex would otherwise
win over the browser's default [hidden]{display:none} because
they share the same specificity and come later in the sheet). */
[hidden] {
display: none !important;
}
/* ─── By-company grouped view ─── */
.works-by-company {
margin-top: clamp(24px, 3vw, 36px);
}
/* ─── Faces grid — one avatar per company, nothing else ───
This is the whole point of the view: scan logos, pick one. */
.company-faces-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
gap: clamp(10px, 1.6vw, 18px);
}
.company-face {
--face-hue: 28;
--face-sat: 72%;
--face-lit: 52%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 10px 16px;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 20px;
opacity: 0;
transform: translateY(18px) scale(0.92);
animation: companyFaceIn 0.6s var(--ease-expo) forwards;
transition: background 0.35s ease, transform 0.2s var(--ease-expo);
-webkit-tap-highlight-color: transparent;
}
@keyframes companyFaceIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.company-face:hover {
background: hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.07);
}
.company-face:focus-visible {
outline: none;
background: hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.09);
box-shadow: 0 0 0 2px hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.55);
}
.company-face:active {
transform: scale(0.96);
transition-duration: 0.1s;
}
/* Idle micro-life: a faint breathing glow behind the avatar so the
grid doesn't read as a static logo wall even before interaction. */
.company-face-glow {
position: absolute;
top: 6px;
left: 50%;
width: 80px;
height: 80px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.35), transparent 70%);
opacity: 0;
filter: blur(6px);
animation: companyFaceBreathe 4.5s ease-in-out infinite;
animation-play-state: paused;
pointer-events: none;
}
.company-face:hover .company-face-glow,
.company-face:focus-visible .company-face-glow {
animation-play-state: running;
}
@keyframes companyFaceBreathe {
0%, 100% { opacity: 0.35; transform: translateX(-50%) scale(0.96); }
50% { opacity: 0.65; transform: translateX(-50%) scale(1.06); }
}
.company-face-ring {
position: absolute;
top: 6px;
left: 50%;
width: 80px;
height: 80px;
transform: translateX(-50%);
border-radius: 50%;
background: conic-gradient(
from 0deg,
hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0) 0%,
hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.75) 50%,
hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0) 100%
);
opacity: 0;
transition: opacity 0.35s ease;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.company-face:hover .company-face-ring,
.company-face:focus-visible .company-face-ring {
opacity: 1;
animation: companyFaceSpin 2.6s linear infinite;
}
@keyframes companyFaceSpin {
to { transform: translateX(-50%) rotate(360deg); }
}
/* Theme-aware surface — this used to be a hardcoded #fff, which
in dark mode painted a flat, borderless white disc with nothing
readable inside it. Matching the page's own bg/surface tokens
keeps the avatar looking intentional in both themes, and padding
+ object-fit:contain stops edge-to-edge logos (many on white
backgrounds) from looking like blank cropped tiles. */
.company-face-avatar {
position: relative;
width: 76px;
height: 76px;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
background: rgb(var(--on-surface-rgb));
border: 1.5px solid var(--ink-10);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.04);
transition: transform 0.4s var(--ease-expo), box-shadow 0.4s ease, border-color 0.35s ease;
}
[data-theme="dark"] .company-face-avatar {
background: rgb(18, 28, 48);
border-color: rgba(228, 234, 245, 0.12);
}
.company-face:hover .company-face-avatar,
.company-face:focus-visible .company-face-avatar {
transform: scale(1.1) translateY(-2px);
border-color: hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.5);
box-shadow: 0 14px 30px hsla(var(--face-hue), var(--face-sat), 40%, 0.32);
}
.company-face-avatar img {
width: 100%;
height: 100%;
/* Fill the circle edge-to-edge (cropped like a profile photo)
instead of "contain", which left a small square logo floating
inside a padded ring with visible background around it. */
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.company-face-avatar img.is-loaded {
opacity: 1;
}
.company-face-fallback {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: hsl(var(--face-hue), 55%, 46%);
}
[data-theme="dark"] .company-face-fallback {
color: hsl(var(--face-hue), 75%, 68%);
}
.company-face-name {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
color: var(--ink);
text-align: center;
line-height: 1.25;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.3s ease;
}
.company-face:hover .company-face-name,
.company-face:focus-visible .company-face-name {
color: hsl(var(--face-hue), var(--face-sat), 42%);
}
[data-theme="dark"] .company-face:hover .company-face-name,
[data-theme="dark"] .company-face:focus-visible .company-face-name {
color: hsl(var(--face-hue), var(--face-sat), 72%);
}
.company-face-count {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.03em;
color: hsl(var(--face-hue), var(--face-sat), 42%);
background: hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.12);
padding: 2px 9px;
border-radius: 999px;
transition: transform 0.3s var(--ease-expo);
}
[data-theme="dark"] .company-face-count {
color: hsl(var(--face-hue), var(--face-sat), 74%);
background: hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.18);
}
.company-face:hover .company-face-count,
.company-face:focus-visible .company-face-count {
transform: translateY(-1px);
}
/* Brief highlight pulse when jumping straight to a company from a
logo badge elsewhere on the page. */
.company-face.is-jumped-to .company-face-avatar {
animation: companyJumpRing 0.9s ease;
}
@keyframes companyJumpRing {
0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
30% { box-shadow: 0 0 0 9px hsla(var(--face-hue), var(--face-sat), var(--face-lit), 0.32); }
}
@media (max-width: 560px) {
.company-faces-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.company-face-avatar { width: 62px; height: 62px; }
.company-face-ring, .company-face-glow { width: 66px; height: 66px; }
}
/* "Other Projects" isn't a real partner — no logo, no color ring,
dashed placeholder avatar so it visibly reads as the catch-all
it is rather than pretending to be a client. */
.company-face--other .company-face-avatar {
border-style: dashed;
background: var(--ink-06);
box-shadow: none;
}
[data-theme="dark"] .company-face--other .company-face-avatar {
background: rgba(228, 234, 245, 0.05);
}
.company-face--other .company-face-fallback {
color: var(--ink-40, rgba(0,0,0,0.4));
}
.company-face--other:hover .company-face-avatar,
.company-face--other:focus-visible .company-face-avatar {
transform: none;
border-color: var(--ink-20);
box-shadow: none;
}
.company-face--other:hover .company-face-ring,
.company-face--other:focus-visible .company-face-ring,
.company-face--other .company-face-glow {
display: none;
}
.company-face--other .company-face-count,
.company-face--other:hover .company-face-name {
color: var(--ink-60);
background: var(--ink-06);
}
/* ─── Company detail modal ───
Opened from a face with a FLIP transform (see script.js) so it
visibly expands out of the clicked logo rather than just fading
in — the "special animation" tying the interaction to its source. */
.company-detail-overlay {
--face-hue: 28;
position: fixed;
inset: 0;
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 48px);
}
body.company-detail-open .company-detail-overlay,
body.company-detail-closing .company-detail-overlay {
display: flex;
}
.company-detail-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, hsla(var(--face-hue), 55%, 22%, 0.6), rgba(6,11,24,0.85));
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.4s ease;
}
body.company-detail-open .company-detail-backdrop { opacity: 1; }
.company-detail-panel {
--face-hue: 28;
position: relative;
width: min(880px, 100%);
max-height: min(86vh, 780px);
display: flex;
flex-direction: column;
background: rgb(var(--bg-rgb, 246, 248, 255));
border-radius: 22px;
border: 1px solid hsla(var(--face-hue), 60%, 50%, 0.25);
box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 0 0 1px hsla(var(--face-hue), 70%, 55%, 0.1);
overflow: hidden;
opacity: 0;
transform: scale(0.9);
transition: transform 0.48s var(--ease-spring), opacity 0.32s ease;
}
body.company-detail-open .company-detail-panel {
opacity: 1;
transform: none;
}
.company-detail-panel.is-animating-in {
transition: none;
}
.company-detail-close {
position: absolute;
top: 14px;
inset-inline-end: 14px;
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--ink-10);
background: rgb(var(--on-surface-rgb));
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s var(--ease-expo), background 0.25s ease, border-color 0.25s ease;
}
[data-theme="dark"] .company-detail-close { background: rgb(18, 28, 48); border-color: rgba(228, 234, 245, 0.12); }
.company-detail-close:hover {
transform: rotate(90deg) scale(1.06);
border-color: hsla(var(--face-hue), 70%, 55%, 0.5);
}
.company-detail-close:active { transform: rotate(90deg) scale(0.94); }
.company-detail-close svg { width: 16px; height: 16px; }
.company-detail-header {
display: flex;
align-items: center;
gap: 16px;
padding: 26px clamp(20px, 4vw, 34px) 18px;
background: linear-gradient(180deg, hsla(var(--face-hue), 70%, 55%, 0.1), transparent);
border-bottom: 1px solid var(--ink-10);
flex-shrink: 0;
}
.company-detail-logo-wrap {
width: 56px;
height: 56px;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
background: rgb(var(--on-surface-rgb));
border: 1px solid var(--ink-10);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 16px hsla(var(--face-hue), 60%, 40%, 0.22);
animation: companyDetailLogoIn 0.5s var(--ease-spring) 0.05s both;
}
[data-theme="dark"] .company-detail-logo-wrap { background: rgb(18, 28, 48); border-color: rgba(228, 234, 245, 0.12); }
@keyframes companyDetailLogoIn {
from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
to { opacity: 1; transform: none; }
}
.company-detail-logo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.company-detail-logo-fallback {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.05rem;
color: hsl(var(--face-hue), 55%, 42%);
}
[data-theme="dark"] .company-detail-logo-fallback { color: hsl(var(--face-hue), 75%, 70%); }
.company-detail-name {
font-family: var(--font-heading);
font-size: clamp(1.2rem, 2.4vw, 1.6rem);
color: var(--ink);
margin: 0 0 3px;
animation: companyDetailTextIn 0.45s ease 0.1s both;
}
.company-detail-count {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
color: hsl(var(--face-hue), 55%, 42%);
background: hsla(var(--face-hue), 70%, 50%, 0.12);
padding: 3px 10px;
border-radius: 999px;
display: inline-block;
animation: companyDetailTextIn 0.45s ease 0.16s both;
}
[data-theme="dark"] .company-detail-count {
color: hsl(var(--face-hue), 75%, 74%);
background: hsla(var(--face-hue), 70%, 55%, 0.18);
}
@keyframes companyDetailTextIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.company-detail-grid {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 22px clamp(20px, 4vw, 34px) 30px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 18px;
scrollbar-width: thin;
scrollbar-color: hsla(var(--face-hue), 50%, 50%, 0.4) transparent;
background:
linear-gradient(rgb(var(--bg-rgb, 246, 248, 255)) 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), rgb(var(--bg-rgb, 246, 248, 255)) 70%) bottom,
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.12), rgba(0,0,0,0)) top,
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.12), rgba(0,0,0,0)) bottom;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
background-attachment: local, local, scroll, scroll;
}
.company-detail-grid::-webkit-scrollbar { width: 8px; }
.company-detail-grid::-webkit-scrollbar-thumb {
background: hsla(var(--face-hue), 50%, 50%, 0.35);
border-radius: 999px;
}
/* ─── Clickable company-logo badge on grid cards ───
Sits in the corner of every project card; jumps straight to
that client's full "By Company" section on click. */
.wm-company-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0.92);
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
opacity: 0;
transform: translateY(-6px) scale(0.85);
transition: opacity 0.3s ease, transform 0.3s var(--ease-expo), box-shadow 0.3s ease;
}
[dir="rtl"] .wm-company-badge { left: auto; right: 14px; }
.wm-card:hover .wm-company-badge,
.wm-card:focus-within .wm-company-badge {
opacity: 1;
transform: translateY(0) scale(1);
}
.wm-company-badge:hover {
transform: scale(1.15) !important;
box-shadow: 0 6px 20px var(--copper-20);
}
.wm-company-badge img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wm-company-badge-fallback {
font-family: var(--font-heading);
font-size: 0.68rem;
font-weight: 700;
color: var(--copper);
}
.company-card {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--ink-10);
background: var(--ink-06);
opacity: 0;
transform: translateY(10px);
animation: companyCardIn 0.4s ease forwards;
transition: transform 0.35s var(--ease-expo), box-shadow 0.35s;
}
@keyframes companyCardIn {
to { opacity: 1; transform: translateY(0); }
}
.company-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}
.company-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.company-card .company-card-title {
position: absolute;
inset: auto 0 0 0;
padding: 8px 10px 7px;
background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
color: #fff;
font-size: 0.68rem;
font-family: var(--font-sans);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.company-card:hover .company-card-title {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 560px) {
.works-view-toggle { margin-inline-start: 0; width: 100%; }
.works-view-btn { flex: 1; }
.company-detail-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 16px; }
}
.wm-card.is-hidden { display: none !important; }
/* When search/filter is active, the fixed editorial mosaic layout
(nth-child grid-column/row placement) would leave gaps where
hidden cards used to sit. Switch to a simple auto-flow grid for
the duration of the filter so remaining cards fill in cleanly;
the full mosaic returns once "All" + empty search are restored. */
.works-masonry.is-filtered {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: clamp(220px, 20vw, 300px);
}
.works-masonry.is-filtered .wm-card,
.works-masonry.is-filtered .wm-card.wm-tall,
.works-masonry.is-filtered .wm-card.wm-wide {
grid-column: auto !important;
grid-row: auto !important;
}
.works-masonry.is-filtered .wm-card.wm-wide { grid-column: span 2 !important; }
@media (max-width: 900px) {
.works-masonry.is-filtered { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.works-masonry.is-filtered { grid-template-columns: 1fr; }
.works-masonry.is-filtered .wm-card.wm-wide { grid-column: span 1 !important; }
}
.works-empty {
padding: clamp(48px, 8vw, 80px) 24px;
text-align: center;
color: var(--ink-40);
font-family: var(--font-body);
font-size: 0.95rem;
}
@media (max-width: 560px) {
.works-toolbar { flex-direction: column; align-items: stretch; }
.works-search { max-width: none; }
.works-filters { justify-content: flex-start; }
}
.works-masonry {
display: grid;
grid-template-columns: 1.55fr 1fr 1.4fr;
grid-template-rows:
clamp(240px, 22vw, 340px)
clamp(200px, 18vw, 280px)
clamp(200px, 18vw, 260px)
clamp(200px, 18vw, 260px);
gap: 10px;
padding-inline: clamp(16px, 4vw, 48px);
max-width: 1600px;
margin: clamp(32px, 5vw, 56px) auto 0;
}
/* Explicit card placement */
.works-masonry .wm-card:nth-child(1) { grid-column: 1; grid-row: 1 / 3; } /* ZORWA tall left */
.works-masonry .wm-card:nth-child(2) { grid-column: 2; grid-row: 1; } /* Supply Platform top */
.works-masonry .wm-card:nth-child(3) { grid-column: 3; grid-row: 1 / 3; } /* Facade tall right */
.works-masonry .wm-card:nth-child(4) { grid-column: 2; grid-row: 2; } /* Pomodoro bottom middle */
.works-masonry .wm-card:nth-child(5) { grid-column: 1; grid-row: 3; }
.works-masonry .wm-card:nth-child(6) { grid-column: 2; grid-row: 3; }
.works-masonry .wm-card:nth-child(7) { grid-column: 3; grid-row: 3; }
/* Wide card */
.works-masonry .wm-card.wm-wide { grid-column: 1 / 3; grid-row: 4; }
.works-masonry .wm-card:nth-child(9) { grid-column: 1; grid-row: 4; }
.works-masonry .wm-card:nth-child(10) { grid-column: 2; grid-row: 4; }
.works-masonry .wm-card:nth-child(11) { grid-column: 3; grid-row: 3 / 5; }
/* ─── Individual card ─── */
.wm-card {
position: relative;
border-radius: 10px;
overflow: hidden;
cursor: none;
display: flex;
flex-direction: column;
transition:
transform 0.55s var(--ease-expo),
box-shadow 0.55s var(--ease-expo);
}
.wm-card:hover {
transform: translateY(-6px) scale(1.008);
box-shadow:
0 28px 70px rgba(0, 0, 0, 0.45),
0 4px 18px rgba(0, 0, 0, 0.3);
}
.wm-card:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
}
/* ─── Background layer (gradient + image) ─── */
.wm-bg {
position: absolute;
inset: 0;
border-radius: inherit;
}
.wm-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.55;
transition: opacity 0.6s ease, transform 0.7s var(--ease-expo);
display: block;
}
.wm-card:hover .wm-bg img {
opacity: 0.7;
transform: scale(1.05);
}
/* ─── Ambient glow layer ─── */
.wm-glow {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
transition: opacity 0.5s ease;
opacity: 0.6;
}
.wm-card:hover .wm-glow { opacity: 1; }
/* ─── Top gradient scrim (for the ↗ icon) ─── */
.wm-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.15) 0%,
transparent 35%,
transparent 50%,
rgba(0,0,0,0.65) 100%
);
border-radius: inherit;
z-index: 1;
}
/* ─── Link icon (top-right corner) ─── */
.wm-link-icon {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 50%;
text-decoration: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.3s, color 0.3s, transform 0.35s var(--ease-expo);
cursor: none;
}
[dir="rtl"] .wm-link-icon {
right: auto;
left: 14px;
}
.wm-card:hover .wm-link-icon {
background: rgba(255,255,255,0.22);
color: white;
transform: translate(3px, -3px);
}
[dir="rtl"] .wm-card:hover .wm-link-icon {
transform: translate(-3px, -3px);
}
/* ─── Content (bottom of card) ─── */
.wm-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: clamp(16px, 2.5vw, 28px);
z-index: 2;
transform: translateY(4px);
transition: transform 0.45s var(--ease-expo);
}
.wm-card:hover .wm-content { transform: translateY(0); }
/* Category · Year */
.wm-cat {
font-family: var(--font-sans);
font-size: clamp(0.58rem, 0.9vw, 0.68rem);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin: 0 0 8px;
line-height: 1;
}
/* Project title — editorial serif */
.wm-title {
font-family: var(--font-serif);
font-size: clamp(1.3rem, 2.8vw, 2.1rem);
font-weight: 600;
line-height: 1.1;
color: #ffffff;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
/* Arabic title override */
[dir="rtl"] .wm-title {
font-family: 'Alexandria', sans-serif;
font-weight: 700;
font-size: clamp(1.1rem, 2.2vw, 1.7rem);
letter-spacing: 0;
}
/* Subtitle */
.wm-sub {
font-family: var(--font-body);
font-size: clamp(0.72rem, 1vw, 0.82rem);
color: rgba(255,255,255,0.5);
margin: 0;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Arabic subtitle */
.wm-sub[lang="ar"] {
font-family: var(--font-arabic-body);
font-size: clamp(0.78rem, 1vw, 0.88rem);
color: rgba(255,255,255,0.45);
direction: rtl;
}
.works-load-more-wrap {
display: flex;
justify-content: center;
margin-top: clamp(20px, 3vw, 32px);
}
.works-load-more-wrap[hidden] {
display: none;
}
.works-load-more {
padding: 13px 34px;
border-radius: 999px;
border: 1px solid var(--copper);
background: transparent;
color: var(--copper);
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s, color 0.3s, transform 0.25s, box-shadow 0.3s;
}
.works-load-more:hover {
background: var(--copper);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 26px var(--copper-20);
}
/* ─── Richer hover interaction: shine sweep across the card ─── */
.wm-card {
isolation: isolate;
}
.wm-card::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 40%,
rgba(255,255,255,0.14) 48%,
rgba(255,255,255,0.05) 52%,
transparent 60%
);
background-size: 250% 250%;
background-position: 120% 0%;
opacity: 0;
transition: opacity 0.35s ease, background-position 0.9s var(--ease-expo);
}
.wm-card:hover::after {
opacity: 1;
background-position: -20% 100%;
}
@media (prefers-reduced-motion: reduce) {
.wm-card::after { display: none; }
}
.wm-wide .wm-title {
font-size: clamp(1.5rem, 3vw, 2.4rem);
}
/* ─── Mobile responsive ─── */
@media (max-width: 900px) {
.works-masonry {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-auto-rows: clamp(200px, 45vw, 280px);
}
.works-masonry .wm-card:nth-child(1),
.works-masonry .wm-card:nth-child(3),
.works-masonry .wm-card:nth-child(11) {
grid-column: auto;
grid-row: auto;
}
.works-masonry .wm-card,
.works-masonry .wm-card.wm-tall,
.works-masonry .wm-card.wm-wide {
grid-column: auto !important;
grid-row: auto !important;
}
.works-masonry .wm-card.wm-tall {
grid-column: span 1 !important;
}
.works-masonry .wm-card.wm-wide {
grid-column: span 2 !important;
}
}
@media (max-width: 560px) {
.works-masonry {
grid-template-columns: 1fr;
grid-auto-rows: clamp(220px, 65vw, 300px);
}
.works-masonry .wm-card.wm-wide {
grid-column: span 1 !important;
}
}
/* ── Entrance animation for wm-cards ──
Previously ran as a plain CSS @keyframes fired at page load,
so cards below the fold had already finished animating before
the user scrolled to them — no reveal was actually visible.
Now handled by initScrollAnimations() in script.js via GSAP
ScrollTrigger, matching every other section's reveal rhythm.
This block only provides the no-JS baseline: cards are simply
visible, no animation, which is a safe default. */
.wm-card {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.wm-card {
animation: none;
opacity: 1;
transform: none;
}
}
/* ══════════════════════════════════════════════════════════════
FLOATING WhatsApp + Messenger + Facebook BUTTONS
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
FLOAT BUTTONS — Premium Theme-Aware v2
──────────────────────────────────────────────────────────────
LIGHT MODE bg: white glass · border: gold · icon: navy
DARK MODE bg: obsidian glass · border: cyber-blue · icon: white
HOVER: each platform floods its brand color as fill
(WhatsApp → #25D366, Messenger → #0078FF, FB → #1877F2)
PING RING: platform brand color ring expands outward
TOOLTIP: slides in with a glass pill, themed per mode
All transitions use --dur-theme so they flip with the ripple.
══════════════════════════════════════════════════════════════ */
/* ── Platform brand tokens ── */
:root {
--wa-brand: 37, 211, 102; /* #25D366 WhatsApp green */
--ms-brand: 0, 120, 255; /* #0078FF Messenger blue */
--fb-brand: 24, 119, 242; /* #1877F2 Facebook blue */
}
/* ── Container ── */
.float-btns {
position: fixed;
bottom: clamp(20px, 4vw, 36px);
right: clamp(16px, 3vw, 28px);
z-index: 9990;
display: flex;
flex-direction: column-reverse;
gap: 12px;
align-items: center;
}
[dir="rtl"] .float-btns {
right: auto;
left: clamp(16px, 3vw, 28px);
}
/* ── Base button ── */
.float-btn {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
overflow: hidden;
opacity: 0;
animation: float-btn-in 0.7s var(--ease-expo) forwards;
/* smooth all theme transitions */
transition:
background var(--dur-theme) ease,
border-color var(--dur-theme) ease,
color var(--dur-theme) ease,
box-shadow var(--dur-theme) ease,
transform 0.35s var(--ease-expo);
}
.float-btns .float-btn:nth-child(1) { animation-delay: 0.12s; }
.float-btns .float-btn:nth-child(2) { animation-delay: 0.26s; }
.float-btns .float-btn:nth-child(3) { animation-delay: 0.40s; }
@keyframes float-btn-in {
0% { opacity: 0; transform: scale(0.3) translateY(20px); }
70% { opacity: 1; transform: scale(1.08) translateY(-3px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* ── Shared shell — fully theme-aware ── */
.float-btn--wa,
.float-btn--ms,
.float-btn--fb {
/* LIGHT MODE: white glass + gold accent */
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(246,248,255,0.88));
border: 1.8px solid rgba(var(--accent-rgb), 0.55);
color: rgb(var(--text-rgb));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 4px 18px rgba(0,0,0,0.12),
0 1px 4px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.9);
}
/* DARK MODE override — obsidian glass + cyber blue */
[data-theme="dark"] .float-btn--wa,
[data-theme="dark"] .float-btn--ms,
[data-theme="dark"] .float-btn--fb {
background:
radial-gradient(circle at 30% 30%, rgba(12,22,50,0.96), rgba(6,11,24,0.92));
border-color: rgba(var(--accent-rgb), 0.45);
color: #ffffff;
box-shadow:
0 4px 22px rgba(0,0,0,0.45),
0 0 0 1px rgba(var(--accent-rgb), 0.08),
inset 0 1px 0 rgba(255,255,255,0.06);
}
/* ── Hover: platform brand color floods in ── */
.float-btn:hover {
transform: translateY(-5px) scale(1.1);
}
.float-btn:active {
transform: translateY(-1px) scale(0.95);
transition: transform 0.1s ease;
}
.float-btn--wa:hover {
background: rgba(var(--wa-brand), 1);
border-color: rgba(var(--wa-brand), 0.8);
color: #fff;
box-shadow:
0 10px 40px rgba(var(--wa-brand), 0.50),
0 0 0 4px rgba(var(--wa-brand), 0.15);
}
.float-btn--ms:hover {
background: rgba(var(--ms-brand), 1);
border-color: rgba(var(--ms-brand), 0.8);
color: #fff;
box-shadow:
0 10px 40px rgba(var(--ms-brand), 0.50),
0 0 0 4px rgba(var(--ms-brand), 0.15);
}
.float-btn--fb:hover {
background: rgba(var(--fb-brand), 1);
border-color: rgba(var(--fb-brand), 0.8);
color: #fff;
box-shadow:
0 10px 40px rgba(var(--fb-brand), 0.50),
0 0 0 4px rgba(var(--fb-brand), 0.15);
}
/* ── Shimmer overlay on hover ── */
.float-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(255,255,255,0.22) 0%,
rgba(255,255,255,0.00) 60%
);
transition: opacity 0.3s ease;
opacity: 1;
pointer-events: none;
}
.float-btn:hover::before { opacity: 0.5; }
/* ── SVG icon ── */
.float-btn svg {
position: relative;
z-index: 1;
transition: transform 0.4s var(--ease-expo), filter 0.3s ease;
filter: none;
}
.float-btn:hover svg {
transform: scale(1.15) rotate(-5deg);
}
/* Light mode: tint icon to accent (gold) so it's visible on white bg */
.float-btn--wa svg,
.float-btn--ms svg,
.float-btn--fb svg {
color: rgb(var(--text-rgb));
transition: color var(--dur-theme) ease, transform 0.4s var(--ease-expo);
}
[data-theme="dark"] .float-btn--wa svg,
[data-theme="dark"] .float-btn--ms svg,
[data-theme="dark"] .float-btn--fb svg {
color: rgba(var(--on-surface-rgb), 0.92);
}
/* On hover, icon always white (platform color is the bg) */
.float-btn--wa:hover svg,
.float-btn--ms:hover svg,
.float-btn--fb:hover svg { color: #fff; }
/* ── Tooltip label ── */
.float-btn-label {
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(10px);
/* Light mode: white glass + gold border */
background: rgba(255, 255, 255, 0.94);
color: rgb(var(--text-rgb));
border: 1px solid rgba(var(--accent-rgb), 0.35);
font-family: var(--font-sans);
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 8px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 14px rgba(0,0,0,0.10);
transition:
opacity 0.25s ease,
transform 0.3s var(--ease-expo),
background var(--dur-theme) ease,
border-color var(--dur-theme) ease,
color var(--dur-theme) ease;
}
/* Dark mode: obsidian tooltip */
[data-theme="dark"] .float-btn-label {
background: rgba(8, 14, 36, 0.95);
color: rgba(var(--on-surface-rgb), 0.9);
border-color: rgba(var(--accent-rgb), 0.30);
box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
[dir="rtl"] .float-btn-label {
right: auto;
left: calc(100% + 14px);
transform: translateY(-50%) translateX(-10px);
}
.float-btn:hover .float-btn-label {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
[dir="rtl"] .float-btn:hover .float-btn-label {
transform: translateY(-50%) translateX(0);
}
/* ── Ping ring — platform brand color, not generic --copper ── */
.float-btn--wa::after,
.float-btn--ms::after,
.float-btn--fb::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 50%;
border: 2px solid transparent;
animation: float-ping 3.4s cubic-bezier(0.4,0,0.6,1) infinite;
z-index: -1;
pointer-events: none;
}
.float-btn--wa::after {
border-color: rgba(var(--wa-brand), 0.6);
animation-delay: 0s;
}
.float-btn--ms::after {
border-color: rgba(var(--ms-brand), 0.6);
animation-delay: 1.1s;
}
.float-btn--fb::after {
border-color: rgba(var(--fb-brand), 0.6);
animation-delay: 2.2s;
}
@keyframes float-ping {
0% { transform: scale(1); opacity: 0.7; }
75% { transform: scale(1.65); opacity: 0; }
100% { transform: scale(1.65); opacity: 0; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.float-btn--wa::after,
.float-btn--ms::after,
.float-btn--fb::after { animation: none; }
.float-btn { animation: none; opacity: 1; }
.float-btn svg { transition: none; }
}
/* ── Mobile ── */
@media (max-width: 480px) {
.float-btn { width: 46px; height: 46px; }
.float-btn svg { width: 20px; height: 20px; }
.float-btn-label { display: none; }
}
/* ══════════════════════════════════════════════════════════════
WOVEN HERO DECORATION — نسيج hero title braid / loom motif
Two interlacing threads that cross like warp & weft, anchored
by loom pegs and knotted at each crossing — a direct visual
echo of the brand's weaving identity (ties to the hero canvas
weaving animation above it) instead of a generic circuit trace.
══════════════════════════════════════════════════════════════ */
.circuit-ar-wrap {
position: relative;
display: inline-block;
}
.weave-hero-deco {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
width: min(95%, 520px);
height: auto;
pointer-events: none;
opacity: 0;
animation: weaveFadeIn 1.2s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) 0.8s forwards;
}
@keyframes weaveFadeIn {
from { opacity: 0; transform: translateX(-50%) scaleX(0.85); }
to { opacity: 1; transform: translateX(-50%) scaleX(1); }
}
/* Threads draw in from the loom peg outward, weft first then warp */
.weave-hero-deco .weave-thread {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: weaveDraw 1.6s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) 0.9s forwards;
}
.weave-hero-deco .weave-thread-b { animation-delay: 1.05s; }
@keyframes weaveDraw {
to { stroke-dashoffset: 0; }
}
/* Loom pegs pop in once the threads have anchored */
.weave-hero-deco .weave-peg {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: weavePegIn 0.5s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) 2.3s forwards;
}
@keyframes weavePegIn {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 0.65; transform: scale(1); }
}
/* Knots pulse gently at each thread crossing, staggered left to right */
.weave-hero-deco .weave-knot {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: weaveKnotPulse 2.6s ease-in-out infinite, weaveKnotIn 0.4s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) forwards;
}
.weave-hero-deco .weave-knot-soft {
animation-name: weaveKnotPulse, weaveKnotInSoft;
}
.weave-hero-deco .weave-knot:nth-of-type(1) { animation-delay: 1.2s, 1.2s; }
.weave-hero-deco .weave-knot:nth-of-type(2) { animation-delay: 1.4s, 1.4s; }
.weave-hero-deco .weave-knot:nth-of-type(3) { animation-delay: 1.6s, 1.6s; }
.weave-hero-deco .weave-knot:nth-of-type(4) { animation-delay: 1.8s, 1.8s; }
.weave-hero-deco .weave-knot-soft:nth-of-type(5) { animation-delay: 2.0s, 2.0s; }
.weave-hero-deco .weave-knot-soft:nth-of-type(6) { animation-delay: 2.1s, 2.1s; }
.weave-hero-deco .weave-knot-soft:nth-of-type(7) { animation-delay: 2.2s, 2.2s; }
@keyframes weaveKnotIn {
to { opacity: 0.8; }
}
@keyframes weaveKnotInSoft {
to { opacity: 0.5; }
}
@keyframes weaveKnotPulse {
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
50% { filter: drop-shadow(0 0 4px var(--copper)); }
}
/* Extra ambient glow on the accent threads/knots in dark mode */
[data-theme="dark"] .weave-hero-deco .weave-thread-a,
[data-theme="dark"] .weave-hero-deco .weave-knot {
filter: drop-shadow(0 0 3px var(--copper));
}
@media (prefers-reduced-motion: reduce) {
.weave-hero-deco,
.weave-hero-deco .weave-thread,
.weave-hero-deco .weave-peg,
.weave-hero-deco .weave-knot {
animation: none;
opacity: 0.6;
stroke-dashoffset: 0;
}
}
/* ══════════════════════════════════════════════════════════════
26. WORK IMAGE LIGHTBOX
عارض صور بسيط لقسم Selected Works — تكبير الصورة فقط بدون
تفاصيل إضافية، بنفس منطق mobile-nav (overlay + panel + ESC +
z-index بين 9970–9985 — أعلى من float-btns وأقل من المؤشر
المخصص الذي يبقى ظاهراً دائماً فوق كل شيء).
══════════════════════════════════════════════════════════════ */
.lightbox {
position: fixed;
inset: 0;
z-index: 9980;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.4s var(--ease-in-out), visibility 0s linear 0.4s;
}
body.lightbox-open .lightbox {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.4s var(--ease-in-out);
}
body.lightbox-open {
overflow: hidden;
}
.lightbox-overlay {
position: absolute;
inset: 0;
background: rgba(6, 11, 24, 0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* ─── Image frame ─── */
.lightbox-figure {
position: relative;
z-index: 1;
max-width: min(88vw, 1100px);
max-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
transform: scale(0.94) translateY(12px);
opacity: 0;
transition: transform 0.5s var(--ease-expo), opacity 0.45s ease;
}
body.lightbox-open .lightbox-figure {
transform: scale(1) translateY(0);
opacity: 1;
}
.lightbox-frame {
position: relative;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
max-height: 76vh;
display: flex;
}
.lightbox-img {
display: block;
max-width: 100%;
max-height: 76vh;
width: auto;
height: auto;
object-fit: contain;
}
/* ─── Caption ─── */
.lightbox-caption {
margin-top: 18px;
text-align: center;
color: var(--on-surface-85, #fff);
}
.lightbox-cat {
display: block;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--copper-light);
margin-bottom: 6px;
}
.lightbox-title {
display: block;
font-family: var(--font-display);
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-weight: 700;
color: #fff;
letter-spacing: -0.01em;
}
/* ─── Close button ─── */
.lightbox-close {
position: absolute;
top: clamp(16px, 3vw, 32px);
right: clamp(16px, 3vw, 32px);
z-index: 2;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-expo);
}
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-close:hover {
background: var(--copper);
border-color: var(--copper);
transform: rotate(90deg);
}
[dir="rtl"] .lightbox-close { right: auto; left: clamp(16px, 3vw, 32px); }
/* ─── Prev / Next navigation ─── */
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.75);
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--ease-expo);
}
.lightbox-nav:hover {
background: var(--copper-12);
border-color: var(--copper);
color: #fff;
}
.lightbox-prev { left: clamp(12px, 3vw, 36px); }
.lightbox-next { right: clamp(12px, 3vw, 36px); }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
[dir="rtl"] .lightbox-prev { left: auto; right: clamp(12px, 3vw, 36px); transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .lightbox-next { right: auto; left: clamp(12px, 3vw, 36px); transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .lightbox-prev:hover { transform: translateY(-50%) scaleX(-1) translateX(3px); }
[dir="rtl"] .lightbox-next:hover { transform: translateY(-50%) scaleX(-1) translateX(-3px); }
/* ─── Counter (e.g. "3 / 11") ─── */
.lightbox-counter {
position: absolute;
bottom: clamp(16px, 3vw, 28px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.45);
font-variant-numeric: tabular-nums;
direction: ltr;
unicode-bidi: isolate;
}
/* ─── Mobile: stack tighter, smaller nav buttons, no side overlap ─── */
@media (max-width: 720px) {
.lightbox-figure { max-width: 94vw; }
.lightbox-frame, .lightbox-img { max-height: 62vh; }
.lightbox-nav { width: 42px; height: 42px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-close { width: 38px; height: 38px; top: 14px; right: 14px; }
[dir="rtl"] .lightbox-close { left: 14px; }
.lightbox-counter { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.lightbox-figure { transition: opacity 0.3s ease; transform: none !important; }
}
/* ══════════════════════════════════════════════════════════════
27. ARABIC HERO TITLE — LUXURY SHIMMER & GLOW
──────────────────────────────────────────────────────────────
أنيميشن فاخر للعنوان العربي "نسيج روائع رقمية" في وضع RTL.
طبقتان:
① شعاع يجتاح حروف النص نفسها (background-clip: text) من
اليسار إلى اليمين — اللمعة محصورة بشكل الحروف بالضبط،
مش صندوق/شريط فوق النص، فمفيش تقطيع لشكل التصميم.
اللون تلقائيًا كوبر/ذهبي في اللايت مود، وأزرق سايبر
في الدارك مود (عبر --accent-rgb المتغيرة لكل ثيم).
② نبضة توهج خفية تتزامن مع الشعاع عبر text-shadow
③ تحريك دقيق في letter-spacing لإحساس "التنفس" الفاخر
كل الأنيميشنز تحترم prefers-reduced-motion تلقائياً.
══════════════════════════════════════════════════════════════ */
/* ─── Container setup ─── */
[dir="rtl"] .title-ar-main {
position: relative;
isolation: isolate;
}
/* ─── ① Shimmer ray — sweeps right to left (Arabic direction) ───
Applied as the element's own background, clipped to the glyph
shapes via background-clip:text. The base text color (--ink) is
baked into the gradient stops so letters stay fully visible at
rest and only catch a bright highlight as the sweep passes —
no oversized box, no metallic-band look.
Scoped to direct text only — the (copper "روائع") is excluded
so its accent color is never overridden. */
[dir="rtl"] .title-ar-main {
color: var(--ink); /* fallback for browsers without text-fill-color */
background-image: linear-gradient(
100deg,
var(--ink) 0%,
var(--ink) 44%,
rgba(var(--accent-light-rgb), 0.55) 48%,
rgba(255, 255, 255, 0.95) 50%,
rgba(var(--accent-light-rgb), 0.55) 52%,
var(--ink) 56%,
var(--ink) 100%
);
background-size: 220% 100%;
background-position: 200% 0;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: arShimmerSweep 6s cubic-bezier(0.16, 1, 0.3, 1) 2s infinite,
arGlowBreathe 6s ease-in-out 2s infinite;
}
/* Keep the accent word's own color — don't let the parent's
text-fill-color:transparent swallow it */
[dir="rtl"] .title-ar-main em {
color: var(--copper);
-webkit-text-fill-color: var(--copper);
background-image: none;
}
/* ─── ② Glow breathe — synced to shimmer ─── */
@keyframes arGlowBreathe {
0%, 100% {
text-shadow: none;
letter-spacing: 0em;
}
40%, 60% {
text-shadow:
0 0 80px rgba(var(--accent-light-rgb), 0.30),
0 0 30px rgba(var(--accent-rgb), 0.18),
0 2px 12px rgba(var(--accent-rgb), 0.10);
letter-spacing: 0.005em;
}
}
/* ─── ① Shimmer keyframes — sweeps the highlight across the
text's gradient background; fades in/out at the edges so the
sweep doesn't "pop" abruptly into view ─── */
@keyframes arShimmerSweep {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
/* ─── Light mode: tone down glow — dark ink needs subtler treatment ─── */
:root:not([data-theme="dark"]) [dir="rtl"] .title-ar-main {
background-image: linear-gradient(
100deg,
var(--ink) 0%,
var(--ink) 44%,
rgba(var(--accent-rgb), 0.45) 48%,
rgba(var(--accent-light-rgb), 0.85) 50%,
rgba(var(--accent-rgb), 0.45) 52%,
var(--ink) 56%,
var(--ink) 100%
);
}
/* ─── Hover enhancement — extra sparkle when pointer over title ─── */
[dir="rtl"] .title-ar-main:hover {
animation-duration: 2.5s, 2.5s;
}
/* ─── Respect OS reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
[dir="rtl"] .title-ar-main {
animation: none;
background-image: none;
-webkit-text-fill-color: var(--ink);
color: var(--ink);
}
}