/* ========================================================================= ZM Edits — Studio de montage vidéo & motion design (Casablanca) Built on the WattVision Design System tokens (dark + cyan). ------------------------------------------------------------------------ Token files are linked in ; the variables below are SITE-LEVEL aliases so values can be swapped in one place later. ========================================================================= */ :root { /* --- Surfaces (from DS) --- */ --c-bg: var(--bg-base, #121212); --c-bg-2: #0D0D0D; /* deeper letterbox black */ --c-surface: var(--bg-surface, #1E1E1E); --c-surface-2: var(--bg-surface-2, #252525); --c-line: var(--border-subtle, #2C2C2E); --c-line-2: var(--border-strong, #3A3A3C); /* --- Text --- */ --c-fg: var(--fg-primary, #FFFFFF); --c-fg-2: var(--fg-secondary, #98989D); --c-fg-3: var(--fg-muted, #6B6B70); /* --- Accent (cyan, on-system) --- */ --c-accent: var(--accent-data, #00E5FF); --c-accent-2: var(--accent-data-dim, #00B8CC); --c-live: var(--accent-live, #32D74B); --glow: 0 0 40px rgba(0, 229, 255, .28); --glow-soft: 0 0 80px rgba(0, 229, 255, .14); /* --- Type --- */ --f-ui: var(--font-ui, 'Inter', system-ui, sans-serif); --f-mono: var(--font-mono, 'JetBrains Mono', monospace); --f-ar: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; /* --- Spacing / layout --- */ --container: 1320px; --gutter: clamp(20px, 5vw, 80px); --r-sm: 10px; --r-md: 14px; --r-lg: var(--radius-lg, 16px); --r-xl: 26px; /* --- Motion --- */ --ease: cubic-bezier(.2, .8, .2, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); } /* =========================== Background canvas (blobs + grain) ============================ */ .bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); } .bg-blob.b1 { width: min(800px, 80vw); height: min(800px, 80vw); top: -15%; left: 15%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 70%); animation: blobMove1 22s ease-in-out infinite; } .bg-blob.b2 { width: min(560px, 60vw); height: min(560px, 60vw); bottom: 5%; right: 5%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 70%); animation: blobMove2 30s ease-in-out infinite; } .bg-blob.b3 { width: min(440px, 50vw); height: min(440px, 50vw); top: 45%; left: -8%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 8%, transparent), transparent 70%); animation: blobMove3 38s ease-in-out infinite; } @keyframes blobMove1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(6%,10%) scale(1.08)} 66%{transform:translate(-4%,5%) scale(.93)} } @keyframes blobMove2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-10%,-12%) scale(1.14)} 70%{transform:translate(6%,-6%) scale(.94)} } @keyframes blobMove3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(12%,-10%) scale(1.18)} } @media (prefers-reduced-motion: reduce) { .bg-blob { animation: none !important; } } /* Grain — slower step rate for perf */ body::after { content:""; position:fixed; inset:-60%; z-index:9997; pointer-events:none; opacity:.022; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; animation:grain 1.2s steps(1) infinite; } @keyframes grain { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-8%,-12%)} 50%{transform:translate(10%,8%)} 75%{transform:translate(-6%,14%)} } @media (prefers-reduced-motion: reduce) { body::after { display:none; } } main { position: relative; z-index: 1; } /* =========================== Reset ============================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { background: var(--c-bg); color: var(--c-fg); font-family: var(--f-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; cursor: auto; } /* Arabic mode */ body.lang-ar { font-family: var(--f-ar); } body.lang-ar [data-tr] { font-family: var(--f-ar); } body.lang-ar .eyebrow, body.lang-ar .sec-num, body.lang-ar .mono { letter-spacing: 0; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: inherit; } ul { list-style: none; } ::selection { background: var(--c-accent); color: #001014; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; } /* =========================== Layout helpers ============================ */ .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(72px, 11vw, 160px); content-visibility: auto; contain-intrinsic-size: auto 700px; } .section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--c-accent); box-shadow: var(--glow); } body.lang-ar .eyebrow::before { box-shadow: none; } .sec-num { font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--c-fg-3); letter-spacing: .1em; } h1, h2, h3 { font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; } .display { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 600; line-height: .98; letter-spacing: -0.035em; } .h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.03em; margin-bottom: 18px; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--c-fg-2); line-height: 1.55; max-width: 60ch; } .mono { font-family: var(--f-mono); } /* Bilingual subline (Arabic shown under FR in stacked spots) */ .bi-ar { display: block; font-family: var(--f-ar); color: var(--c-fg-2); font-weight: 400; } /* =========================== Buttons ============================ */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; letter-spacing: -.01em; transition: transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .35s var(--ease); will-change: transform; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--c-accent); color: #001014; box-shadow: var(--glow-soft); } .btn-primary:hover { background: #4DEEFF; box-shadow: var(--glow); } .btn-ghost { border: 1px solid var(--c-line-2); color: var(--c-fg); } .btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); } .btn-lg { padding: 18px 32px; font-size: 16px; } /* =========================== Navbar ============================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gutter); transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled { padding-block: 12px; background: rgba(18, 18, 18, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--c-line); } .brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 18px; letter-spacing: -.02em; } .brand .mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--c-line-2); border-radius: 9px; color: var(--c-accent); background: var(--c-surface); } .brand .mark svg { width: 18px; height: 18px; } .brand b { font-weight: 600; } .brand .mono { color: var(--c-accent); font-weight: 500; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { position: relative; padding: 9px 14px; border-radius: 8px; font-size: 14.5px; color: var(--c-fg-2); transition: color .25s var(--ease), background .25s var(--ease); } .nav-links a:hover { color: var(--c-fg); background: var(--c-surface); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* Language switch */ .lang { display: inline-flex; padding: 3px; border: 1px solid var(--c-line); border-radius: var(--r-pill, 999px); background: var(--c-surface); font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; } .lang button { padding: 6px 13px; border-radius: 999px; color: var(--c-fg-2); transition: color .25s var(--ease), background .25s var(--ease); } .lang button.active { background: var(--c-accent); color: #001014; } .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--c-line-2); border-radius: 10px; } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--c-fg); margin: 4px auto; transition: .3s var(--ease); } /* =========================== Hero ============================ */ .hero { position: relative; padding-top: 168px; padding-bottom: clamp(60px, 9vw, 120px); overflow: clip; } .hero-aura { position: absolute; z-index: 0; pointer-events: none; top: -10%; left: 50%; width: 1100px; height: 1100px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0,229,255,.14), rgba(0,229,255,.04) 38%, transparent 64%); } .hero-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%); } .hero .wrap { position: relative; z-index: 2; } .hero-tag { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; padding: 7px 7px 7px 16px; border: 1px solid var(--c-line); border-radius: 999px; background: rgba(30,30,30,.5); font-size: 13px; color: var(--c-fg-2); } .hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-live); box-shadow: var(--glow-live, 0 0 10px #32D74B); } .hero-tag .pill { padding: 4px 11px; border-radius: 999px; background: var(--c-surface-2); color: var(--c-fg); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; } .hero h1 { margin-bottom: 26px; } .hero h1 .accent { color: var(--c-accent); } .hero h1 .stroke { -webkit-text-stroke: 1.4px var(--c-fg-3); color: transparent; } .hero-sub { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: flex-end; max-width: 920px; } .hero-sub .lead { flex: 1 1 380px; } .hero-ar { font-family: var(--f-ar); font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--c-fg-2); line-height: 1.7; direction: rtl; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; align-items: center; } .hero-meta { display: flex; gap: 30px; margin-top: 56px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid var(--c-line); } .hero-meta .item .n { font-family: var(--f-mono); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; } .hero-meta .item .n .u { color: var(--c-accent); } .hero-meta .item .l { font-size: 13px; color: var(--c-fg-2); margin-top: 2px; } /* ============== Showreel frame (empty video slot) ============== */ .reel-slot { position: relative; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: radial-gradient(120% 120% at 50% 0%, rgba(0,229,255,.06), transparent 60%), var(--c-surface); overflow: hidden; isolation: isolate; } .reel-slot::before { /* corner ticks */ content: ""; position: absolute; inset: 14px; border-radius: 10px; background: linear-gradient(var(--c-accent),var(--c-accent)) left top, linear-gradient(var(--c-accent),var(--c-accent)) left top, linear-gradient(var(--c-accent),var(--c-accent)) right top, linear-gradient(var(--c-accent),var(--c-accent)) right top, linear-gradient(var(--c-accent),var(--c-accent)) left bottom, linear-gradient(var(--c-accent),var(--c-accent)) left bottom, linear-gradient(var(--c-accent),var(--c-accent)) right bottom, linear-gradient(var(--c-accent),var(--c-accent)) right bottom; background-repeat: no-repeat; background-size: 16px 1.5px, 1.5px 16px; opacity: .55; pointer-events: none; } .reel-slot .scan { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px); } .reel-inner { position: relative; z-index: 2; display: grid; place-items: center; gap: 20px; text-align: center; height: 100%; padding: 40px; } .reel-play { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; border: 1px solid var(--c-accent); color: var(--c-accent); background: rgba(0,229,255,.05); transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); } .reel-slot:hover .reel-play { transform: scale(1.08); box-shadow: var(--glow); background: rgba(0,229,255,.12); } .reel-play svg { width: 26px; height: 26px; margin-left: 3px; } .reel-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-fg-2); } .reel-meta { position: absolute; z-index: 3; bottom: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--c-fg-3); letter-spacing: .08em; } .reel-rec { display: inline-flex; align-items: center; gap: 7px; } .reel-rec .b { width: 7px; height: 7px; border-radius: 50%; background: var(--alert, #FF453A); } /* Hero floating reel cluster (vertical 9:16, looping motion) */ .hero-reels { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2.4vw, 30px); margin-top: 64px; perspective: 1400px; } .reel-phone { width: clamp(150px, 19vw, 250px); aspect-ratio: 9/16; flex-shrink: 0; } .reel-phone.side { opacity: .82; } .reel-phone.left { transform: translateY(18px) rotateY(11deg); transform-origin: right center; animation: floaty 7s var(--ease-soft) infinite; } .reel-phone.mid { width: clamp(190px, 24vw, 320px); z-index: 2; animation: floaty 6s var(--ease-soft) infinite .4s; box-shadow: var(--glow-soft); } .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; } .has-video::before { display: none; } .reel-cover { position: absolute; inset: 0; z-index: 4; cursor: inherit; } .has-video .reel-meta { z-index: 5; } .reel-phone.right { transform: translateY(18px) rotateY(-11deg); transform-origin: left center; animation: floaty 7.6s var(--ease-soft) infinite .8s; } @keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } } @media (prefers-reduced-motion: reduce) { .reel-phone { animation: none !important; } } @media (max-width: 760px) { .reel-phone.side { display: none; } .reel-phone.mid { width: min(72vw, 300px); } } /* Animated equalizer + sweep inside reel frames */ .eq { display: flex; align-items: flex-end; gap: 3px; height: 26px; } .eq i { width: 3px; border-radius: 2px; background: var(--c-accent); height: 30%; animation: eq 1.1s var(--ease-soft) infinite; box-shadow: 0 0 8px rgba(0,229,255,.5); } .eq i:nth-child(2){ animation-delay: .15s; } .eq i:nth-child(3){ animation-delay: .3s; } .eq i:nth-child(4){ animation-delay: .45s; } .eq i:nth-child(5){ animation-delay: .6s; } .eq i:nth-child(6){ animation-delay: .75s; } .eq i:nth-child(7){ animation-delay: .9s; } @keyframes eq { 0%, 100% { height: 22%; } 50% { height: 100%; } } .reel-slot .sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, transparent 0%, rgba(0,229,255,.14) 50%, transparent 100%); height: 40%; animation: sweep 4.5s var(--ease-soft) infinite; } @keyframes sweep { 0% { transform: translateY(-120%); } 100% { transform: translateY(320%); } } @media (prefers-reduced-motion: reduce) { .eq i, .reel-slot .sweep { animation: none; } } /* Hero aura gentle breathing (transform reserved for JS parallax) */ .hero-aura { animation: auraPulse 9s ease-in-out infinite; } @keyframes auraPulse { 0%, 100% { opacity: .85; filter: blur(0); } 50% { opacity: 1; filter: blur(6px); } } /* =========================== Marquee ============================ */ .marquee-sec { padding-block: 40px; border-block: 1px solid var(--c-line); } .marquee-lab { text-align: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-fg-3); margin-bottom: 26px; } .marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; align-items: center; gap: 64px; padding-right: 64px; flex-shrink: 0; animation: scrollx 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 500; color: var(--c-fg-2); white-space: nowrap; letter-spacing: -.01em; transition: color .3s var(--ease); } .marquee-track span:hover { color: var(--c-fg); } @keyframes scrollx { to { transform: translateX(-50%); } } /* =========================== Services ============================ */ .svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .svc { position: relative; grid-column: span 4; padding: 30px; min-height: 260px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); display: flex; flex-direction: column; overflow: hidden; transition: transform .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .svc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(120% 100% at 100% 0%, rgba(0,229,255,.1), transparent 55%); } .svc:hover { transform: translateY(-6px); border-color: var(--c-line-2); background: var(--c-surface-2); } .svc:hover::after { opacity: 1; } .svc-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--c-line-2); color: var(--c-accent); margin-bottom: auto; } .svc-ic svg { width: 22px; height: 22px; } .svc h3 { font-size: 1.32rem; margin-top: 26px; } .svc .svc-ar { font-family: var(--f-ar); color: var(--c-fg-2); font-size: 1rem; margin-top: 6px; } .svc p { color: var(--c-fg-2); font-size: 14.5px; margin-top: 12px; } .svc .idx { position: absolute; top: 26px; right: 26px; font-family: var(--f-mono); font-size: 12px; color: var(--c-fg-3); } body.lang-ar .svc .idx { right: auto; left: 26px; } .svc.wide { grid-column: span 6; } .svc.tall { min-height: 260px; } /* =========================== Stats / Results ============================ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat { padding: 34px 30px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); } .stat .n { font-family: var(--f-mono); font-size: clamp(2.6rem, 4.2vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; } .stat .n .s { color: var(--c-accent); } .stat .l { margin-top: 14px; color: var(--c-fg-2); font-size: 14px; } .stat .l .bi-ar { font-size: 13px; margin-top: 2px; } /* =========================== Process timeline ============================ */ .proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; } .proc-step { position: relative; padding: 30px 26px 30px 0; border-top: 1px solid var(--c-line); } .proc-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--c-accent); box-shadow: var(--glow); transition: width 1s var(--ease); transition-delay: var(--d, 0s); } .proc-step.in::before { width: 60px; } .proc-step .k { font-family: var(--f-mono); font-size: 12px; color: var(--c-accent); letter-spacing: .1em; } .proc-step h3 { font-size: 1.3rem; margin: 18px 0 6px; } .proc-step .pr-ar { font-family: var(--f-ar); color: var(--c-fg-2); font-size: .98rem; margin-bottom: 12px; } .proc-step p { color: var(--c-fg-2); font-size: 14px; } body.lang-ar .proc-step { padding: 30px 0 30px 26px; } body.lang-ar .proc-step::before { left: auto; right: 0; } /* =========================== Portfolio ============================ */ .folio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 44px; } .folio-filters { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; color: var(--c-fg-2); font-family: var(--f-mono); letter-spacing: .03em; transition: .25s var(--ease); } .chip.active, .chip:hover { color: var(--c-accent); border-color: var(--c-accent); } .folio { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .work { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-surface); transition: transform .5s var(--ease), border-color .4s var(--ease); } .work:hover { transform: translateY(-6px); border-color: var(--c-line-2); } .work .reel-slot { border: none; border-radius: 0; height: 100%; } .work { grid-column: span 3; aspect-ratio: 9/16; } .work-info { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 22px; background: linear-gradient(transparent, rgba(13,13,13,.92)); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .work-info .cat { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); } .work-info h3 { font-size: 1.05rem; margin-top: 5px; letter-spacing: -.02em; } .work-info .res { font-family: var(--f-mono); font-size: 12px; color: var(--c-fg-2); text-align: right; white-space: nowrap; } .work-info .res b { color: var(--c-live); } /* =========================== Testimonials ============================ */ .tw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tw { padding: 30px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); display: flex; flex-direction: column; gap: 22px; transition: border-color .4s var(--ease), transform .5s var(--ease); } .tw:hover { border-color: var(--c-line-2); transform: translateY(-4px); } .tw .stars { color: var(--c-accent); letter-spacing: 3px; font-size: 13px; } .tw blockquote { font-size: 1.06rem; line-height: 1.55; color: var(--c-fg); letter-spacing: -.01em; } .tw .by { display: flex; align-items: center; gap: 13px; margin-top: auto; } .tw .av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); border: 1px solid var(--c-line-2); font-family: var(--f-mono); font-weight: 700; color: var(--c-accent); } .tw .by .nm { font-weight: 500; font-size: 14.5px; } .tw .by .rl { font-size: 12.5px; color: var(--c-fg-2); } /* =========================== FAQ ============================ */ .faq-wrap { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(40px, 6vw, 90px); align-items: start; } .faq details { border-bottom: 1px solid var(--c-line); } .faq summary { list-style: none; cursor: inherit; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; transition: color .25s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--c-accent); } .faq summary .q-ar { display: block; font-family: var(--f-ar); font-size: .92rem; color: var(--c-fg-2); font-weight: 400; margin-top: 4px; } .faq summary .ic { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--c-line-2); border-radius: 8px; display: grid; place-items: center; transition: .35s var(--ease); } .faq details[open] summary .ic { transform: rotate(45deg); border-color: var(--c-accent); color: var(--c-accent); } .faq summary .ic svg { width: 15px; height: 15px; } .faq .ans { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease), padding .45s var(--ease); } .faq details[open] .ans { max-height: 320px; padding-bottom: 26px; } .faq .ans p { color: var(--c-fg-2); font-size: 15px; } /* =========================== CTA banner ============================ */ .cta-banner { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--c-line-2); padding: clamp(32px, 4vw, 52px) clamp(28px, 5vw, 60px); background: var(--c-surface); text-align: center; } .cta-banner .hero-aura { position: absolute; top: auto; bottom: -50%; opacity: .9; } .cta-banner > *:not(.hero-aura) { position: relative; z-index: 2; } .cta-banner h2 { margin-bottom: 20px; } .cta-banner .cta-ar { font-family: var(--f-ar); color: var(--c-fg-2); font-size: 1.2rem; margin-bottom: 34px; direction: rtl; } .cta-banner .hero-cta { justify-content: center; } /* =========================== Footer ============================ */ .footer { border-top: 1px solid var(--c-line); padding-block: 70px 36px; } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } .foot-brand .lead { font-size: 15px; margin-top: 18px; max-width: 34ch; } .foot-col h4 { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-fg-3); margin-bottom: 18px; } .foot-col a { display: block; padding: 6px 0; color: var(--c-fg-2); font-size: 14.5px; transition: color .2s var(--ease); } .foot-col a:hover { color: var(--c-accent); } .socials { display: flex; gap: 10px; margin-top: 20px; } .socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-fg-2); transition: .25s var(--ease); } .socials a:hover { color: var(--c-accent); border-color: var(--c-accent); transform: translateY(-3px); } .socials svg { width: 17px; height: 17px; } .foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-fg-3); } .foot-bottom .mono { color: var(--c-fg-3); } /* =========================== Tweaks: Surface modes ============================ */ body.zm-flat .svc, body.zm-flat .stat, body.zm-flat .tw, body.zm-flat .cta-banner { background: transparent; box-shadow: none; } body.zm-flat .svc:hover { background: var(--c-surface); } body.zm-glass .svc, body.zm-glass .stat, body.zm-glass .tw, body.zm-glass .cta-banner { background: rgba(30,30,30,.45); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-color: rgba(255,255,255,.07); } /* =========================== Tweaks: Motion modes ============================ */ body.zm-calm .reel-phone { animation-duration: 14s !important; } body.zm-calm .eq i { animation-duration: 2.8s !important; } body.zm-calm .reel-slot .sweep { animation-duration: 11s !important; } body.zm-calm .hero-aura { animation-duration: 22s !important; } body.zm-calm .marquee-track { animation-duration: 72s !important; } body.zm-calm .reveal { transition-duration: 1.2s !important; } body.zm-intense .reel-phone { animation-duration: 3s !important; } body.zm-intense .eq i { animation-duration: .45s !important; } body.zm-intense .reel-slot .sweep { animation-duration: 2s !important; } body.zm-intense .hero-aura { animation-duration: 4s !important; } body.zm-intense .marquee-track { animation-duration: 18s !important; } body.zm-intense .svc:hover { transform: translateY(-10px) scale(1.02) !important; } body.zm-intense .stat:hover { transform: translateY(-5px); border-color: var(--c-accent); } /* =========================== Hero floating stats ============================ */ .hero-float-stats { position: absolute; left: -180px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 10; pointer-events: none; } @media (max-width: 1380px) { .hero-float-stats { display: none; } } .hfs-card { padding: 14px 18px; min-width: 154px; background: #0e0e0e; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 4px 28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04); animation: floaty 7s ease-in-out infinite; } .hfs-card:nth-child(2) { animation-delay: 2.4s; animation-duration: 9s; } .hfs-card:nth-child(3) { animation-delay: 4.8s; animation-duration: 8s; } .hfs-card .hfs-tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 4px; } .hfs-card .hfs-n { font-family: var(--f-mono); font-size: 1.55rem; font-weight: 700; color: var(--c-fg); letter-spacing: -.03em; line-height: 1; } .hfs-card .hfs-l { font-size: 12px; color: var(--c-fg-2); margin-top: 3px; } /* =========================== Reel thumbnails + lightbox ============================ */ .reel-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* Autoplaying muted background preview (middle hero reel) */ .reel-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; pointer-events: none; } .reel-clickable { cursor: pointer; } .reel-cover-click { position: absolute; inset: 0; z-index: 5; cursor: pointer; } .reel-clickable .reel-play { transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); } .reel-clickable:hover .reel-play { transform: scale(1.12); box-shadow: var(--glow); background: rgba(0,229,255,.16); } .reel-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 6; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--c-accent); color: var(--c-accent); background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); pointer-events: none; } .reel-clickable:hover .reel-play-badge { opacity: 1; } .reel-play-badge.always { opacity: 1; } .reel-play-badge.big { width: 80px; height: 80px; } .reel-clickable:hover .reel-play-badge.always { transform: translate(-50%,-50%) scale(1.12); box-shadow: var(--glow); background: rgba(0,0,0,.6); } .reel-play-badge svg { width: 24px; height: 24px; margin-left: 3px; } .reel-play-badge.big svg { width: 30px; height: 30px; } /* Page loader splash */ html.loading, html.loading body { overflow: hidden; height: 100%; touch-action: none; overscroll-behavior: none; } #page-loader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--c-bg); transition: opacity .6s var(--ease), visibility .6s var(--ease); } #page-loader.done { opacity: 0; visibility: hidden; } #page-loader .pl-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; border: 1px solid var(--c-line-2); color: var(--c-accent); background: var(--c-surface); box-shadow: var(--glow-soft); animation: plpulse 1.3s var(--ease) infinite; } #page-loader .pl-mark svg { width: 30px; height: 30px; margin-left: 3px; } #page-loader .pl-word { font-family: var(--f-mono); font-size: 13px; letter-spacing: .4em; color: var(--c-fg-2); padding-left: .4em; } @keyframes plpulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,229,255,.0); } 50% { transform: scale(1.06); box-shadow: 0 0 36px rgba(0,229,255,.35); } } .vlightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.93); padding: 5vh 20px; } .vlightbox.open { display: flex; animation: lbfade .3s var(--ease); } @keyframes lbfade { from { opacity: 0; } to { opacity: 1; } } .vlightbox-inner { position: relative; height: min(88vh, 920px); aspect-ratio: 9/16; max-width: 100%; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.7); } .vlightbox-inner iframe { width: 100%; height: 100%; border: 0; display: block; } .vlightbox-close { position: absolute; top: max(18px, 3vh); right: max(18px, 3vw); z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s var(--ease); } .vlightbox-close:hover { background: rgba(255,255,255,.18); } .vlightbox-close svg { width: 22px; height: 22px; } /* =========================== Reveal animation ============================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* =========================== Responsive ============================ */ @media (max-width: 1024px) { .svc { grid-column: span 6; } .svc.wide { grid-column: span 6; } .stats { grid-template-columns: repeat(2, 1fr); } .proc { grid-template-columns: repeat(2, 1fr); } .tw-grid { grid-template-columns: 1fr; } .work { grid-column: span 4; } .faq-wrap { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-toggle { display: block; } .svc, .svc.wide { grid-column: span 12; } .stats { grid-template-columns: 1fr 1fr; } .proc { grid-template-columns: 1fr; } .work { grid-column: span 6; } .hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; } .foot-grid { grid-template-columns: 1fr; } .hero-reel { aspect-ratio: 4/3; } /* Mobile nav drawer */ .nav-links.open { display: flex; position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px var(--gutter) 24px; background: rgba(18,18,18,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--c-line); } .nav-links.open a { padding: 14px; font-size: 16px; } } /* Phones — relieve density */ @media (max-width: 560px) { .nav { gap: 12px; padding-inline: var(--gutter); } .nav-actions { gap: 8px; } .nav-actions .btn-primary { display: none; } .hero { padding-top: 128px; } .hero-tag { flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding: 6px 6px 6px 12px; } .hero h1 { margin-bottom: 22px; } .hero-cta { margin-top: 30px; gap: 10px; } .hero-cta .btn { width: 100%; justify-content: center; } .hero-meta { margin-top: 38px; gap: 18px 16px; } .hero-reels { margin-top: 40px; } .stats { gap: 12px; } .stat { padding: 24px 22px; } .folio-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .folio-filters::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; } .work-info { padding: 14px; } .work-info h3 { font-size: .92rem; } .work-info .res { font-size: 11px; } .cta-banner .hero-cta .btn { width: 100%; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Narrow phones — single-column portfolio */ @media (max-width: 400px) { .work { grid-column: span 12; aspect-ratio: 16/13; } .stats { grid-template-columns: 1fr; } }