/* ========================================================= GRID · v6 Cinema · brand v1.1 Premium dark cinematic scroll experience (RTL Hebrew) Single-family discipline: Space Grotesk (Latin) + Heebo (Hebrew) Mobile-first ========================================================= */ /* ---------- 1. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* v7 pass-41 · Global horizontal-overflow guard. The v6 cinema scenes widened the RTL layout on phones (services/portfolio/about ~441px, contact ~10k px on a 390px viewport), causing a sideways wobble and pushing the hero off-centre. The stories are vertical, so clipping the X axis is safe and only stops the accidental bleed. MUST be `clip`, not `hidden`: `hidden` on promotes overflow-y to `auto`, making a scroll container and breaking the cinematic `position: sticky` stage. `clip` clips X without that side effect, so the scroll-scene animation keeps working on every cinematic page. */ html, body { overflow-x: clip; max-width: 100%; } img, svg, canvas { display: block; max-width: 100%; } button, a { -webkit-tap-highlight-color: transparent; } ol, ul { list-style: none; } :focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: 2px; } .sr-skip { position: fixed; inset-inline-start: 1rem; top: 1rem; z-index: 100; padding: .5rem .9rem; background: var(--accent); color: #fff; font: 500 13px/1 var(--sans); border-radius: 4px; transform: translateY(-200%); transition: transform .2s; } .sr-skip:focus { transform: translateY(0); } /* ---------- 2. Tokens ---------- */ :root { /* Palette */ --bg: #0A0A0F; --bg-soft: #0E0E16; --fg: #F5F7F8; --fg-dim: #C9CDD4; /* compensated for body weight 350 on dark */ --fg-faded: rgba(245, 247, 248, 0.40); --muted: #6B6F78; --rule: rgba(245, 247, 248, 0.10); --rule-soft: rgba(245, 247, 248, 0.05); --accent: #3B83F7; /* brand primary */ --accent-2: #6FA8FF; /* cinematic-only secondary */ --accent-3: rgba(59, 131, 247, 0.35); --shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); /* Type — single family per language */ --sans: "Space Grotesk", "Heebo", system-ui, sans-serif; /* Geometry */ --hud-h: 56px; } @media (min-width: 768px) { :root { --hud-h: 64px; } } /* ---------- 3. Base ---------- */ html, body { background: var(--bg); color: var(--fg); } body { font-family: var(--sans); font-weight: 350; /* light-on-dark optical compensation */ font-size: 16px; line-height: 1.65; /* Hebrew needs more vertical breathing room */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* v7 pass-42: was `hidden`. On inner pages (no woven.css to override it) this legacy rule won the cascade and forced body overflow-y to `auto`, making a scroll container that broke the cinematic `.stage` position:sticky (it scrolled away instead of pinning). `clip` keeps overflow-y `visible`, so sticky works AND horizontal stays clipped. */ overflow-x: clip; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; } ::selection { background: var(--accent); color: var(--fg); } /* Mono effect via spacing + uppercase (no second family) */ .mono-treatment { font-family: var(--sans); letter-spacing: 0.22em; text-transform: uppercase; font-variant-numeric: tabular-nums; font-weight: 500; } /* ---------- 4. HUD (fixed top) ---------- */ /* The HUD used to use `mix-blend-mode: difference` to stay readable over any background. That worked on static images but flickered constantly over the cinematic canvas because the underlying color shifts every frame, especially during the chaos and orbital scenes. The replacement is a stable text-shadow stack (no blend mode) plus a very subtle top-edge gradient (.hud::before) that softly seats the HUD text without making it look chrome-y or patched. */ .hud { position: fixed; inset-block-start: 0; inset-inline: 0; height: var(--hud-h); padding-inline: clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; z-index: 20; color: rgba(245, 247, 248, 0.92); pointer-events: none; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.70), 0 0 14px rgba(0, 0, 0, 0.55); } .hud::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( 180deg, rgba(10, 10, 15, 0.55) 0%, rgba(10, 10, 15, 0.25) 60%, transparent 100% ); } .hud-mark { font-weight: 700; font-size: 14px; letter-spacing: 0.18em; pointer-events: auto; color: inherit; text-decoration: none; direction: ltr; } @media (min-width: 768px) { .hud { font-size: 12px; } .hud-mark { font-size: 16px; } } .hud-meta { display: flex; align-items: center; gap: 12px; } @media (min-width: 768px) { .hud-meta { gap: 14px; } } .hud-scene { display: inline-block; min-width: 0; } .hud-divider { width: 14px; height: 1px; background: currentColor; opacity: 0.5; } @media (min-width: 768px) { .hud-divider { width: 18px; } } .hud-progress { min-width: 3ch; text-align: end; } /* ---------- 5. Progress bar ---------- */ .progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 30; background: var(--rule-soft); } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } /* ---------- 6. Chapter rail (desktop only) ---------- */ .chapters { position: fixed; top: 50%; inset-inline-end: 22px; transform: translateY(-50%); display: none; /* hidden on mobile */ flex-direction: column; gap: 14px; z-index: 20; padding: 14px 8px; border-radius: 999px; background: rgba(10, 10, 15, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--rule); } @media (min-width: 1024px) { .chapters { display: flex; } } .chapters button { appearance: none; border: 0; background: transparent; padding: 0; width: 44px; /* touch target safety */ height: 22px; display: grid; place-items: center; cursor: pointer; position: relative; } .chapters button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: background .25s, transform .25s, box-shadow .25s; } .chapters button[aria-current="true"]::after, .chapters button:hover::after { background: var(--accent); transform: scale(1.4); box-shadow: 0 0 0 4px rgba(59, 131, 247, 0.15); } .chapters button[aria-current="true"]::before { content: attr(data-label); position: absolute; inset-inline-end: 34px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); background: rgba(10, 10, 15, 0.7); padding: 6px 10px; border-radius: 3px; white-space: nowrap; border: 1px solid var(--rule); } /* ---------- 7. Cinema wrapper + sticky stage (URL-bar safe) ---------- */ .cinema { position: relative; } .stage { position: sticky; top: 0; height: 100vh; height: 100dvh; /* mobile URL-bar safe */ z-index: 1; overflow: hidden; pointer-events: none; } .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(180deg, rgba(10, 10, 15, 0.5) 0%, transparent 25%, transparent 75%, rgba(10, 10, 15, 0.8) 100%); } .grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 160px 160px; } /* ---------- 8. Track + scenes ---------- */ .track { position: relative; z-index: 2; margin-block-start: -100vh; margin-block-start: -100dvh; } .scene { position: relative; min-height: 70vh; min-height: 70dvh; display: flex; align-items: center; padding-block: 8vh; padding-inline: clamp(16px, 5vw, 96px); } @media (min-width: 768px) { .scene { min-height: 120vh; padding-block: 12vh; } } .scene[data-scene="1"] { align-items: flex-start; padding-block-start: 12vh; } .scene[data-scene="7"] { padding-block-end: 18vh; } @media (min-width: 768px) { .scene[data-scene="1"] { padding-block-start: 18vh; } } /* ---------- 9. Panels ---------- */ .panel { position: relative; isolation: isolate; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; will-change: opacity, transform; } /* Safe-zone backdrop — soft dimming halo behind panel text so canvas visuals never overpower the content. Subtle by default; stronger on mobile. */ .panel::before { content: ''; position: absolute; inset: -36px -56px; border-radius: 48px; background: radial-gradient(ellipse at center, rgba(10, 10, 15, 0.42) 0%, rgba(10, 10, 15, 0.18) 45%, transparent 80%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: -1; pointer-events: none; } @media (max-width: 767px) { .panel::before { inset: -20px -16px; /* Stronger radial gradient does the readability work on mobile so we can drop backdrop-filter, which is the single most expensive compositing op during scroll on iOS Safari + low-end Android. */ background: radial-gradient(ellipse at center, rgba(10, 10, 15, 0.72) 0%, rgba(10, 10, 15, 0.42) 45%, rgba(10, 10, 15, 0.18) 70%, transparent 95%); backdrop-filter: none; -webkit-backdrop-filter: none; } /* The animated SVG grain with mix-blend-mode: overlay paints over the full 100vh sticky canvas on every scroll frame; a guaranteed jank source on iOS. The vignette + canvas alone keep the cinematic feel on phones without the compositing cost. */ .grain { display: none; } } @media (min-width: 768px) { .panel { gap: 18px; } } .panel.start { margin-inline-end: auto; } .panel.end { margin-inline-start: auto; } .panel.center { margin-inline: auto; text-align: center; max-width: 720px; align-items: center; } .panel.top { align-self: flex-start; } .panel.wide { max-width: 840px; } .panel.final { gap: 22px; } @media (min-width: 768px) { .panel.final { gap: 26px; } } /* On mobile, start/end panels are full-width and start-aligned for readability */ @media (max-width: 767px) { .panel.start, .panel.end { max-width: 100%; margin-inline: 0; text-align: start; } } /* ---------- 10. Typography ---------- */ .kicker { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; } .kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; } .panel.center .kicker { justify-content: center; } .hero { font-family: var(--sans); font-weight: 700; font-size: clamp(72px, 19vw, 220px); line-height: 0.86; letter-spacing: -0.045em; direction: ltr; unicode-bidi: isolate; display: inline-flex; gap: 0.02em; } .hero-g, .hero-i, .hero-d { display: inline-block; background: linear-gradient(180deg, var(--fg) 0%, var(--fg-dim) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-r { display: inline-block; background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .title { font-family: var(--sans); font-weight: 500; font-size: clamp(32px, 8vw, 76px); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; } .title.big { font-size: clamp(40px, 10vw, 96px); } /* Emphasis: color + weight, NO italic, NO second family (brand v1.1) */ .title em { font-style: normal; font-weight: 700; color: var(--accent-2); } .lede { font-size: clamp(15px, 4.4vw, 19px); font-weight: 400; color: var(--fg-dim); max-width: 36ch; line-height: 1.55; text-wrap: pretty; } @media (min-width: 768px) { .lede { font-size: clamp(15px, 1.5vw, 19px); } } .panel.center .lede { margin-inline: auto; } .body { font-size: clamp(15px, 4vw, 17px); font-weight: 350; color: var(--fg-dim); max-width: 44ch; line-height: 1.7; text-wrap: pretty; } @media (min-width: 768px) { .body { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.65; } } .body.lg { font-size: clamp(16px, 4.4vw, 19px); max-width: 50ch; } @media (min-width: 768px) { .body.lg { font-size: clamp(16px, 1.4vw, 19px); } } .panel.center .body { margin-inline: auto; } .cue { margin-block-start: 40px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.3em; color: var(--muted); text-transform: uppercase; animation: cue-pulse 2.4s ease-in-out infinite; } @media (min-width: 768px) { .cue { margin-block-start: 56px; } } @keyframes cue-pulse { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } } /* ---------- 11. Capabilities list (scene 5) ---------- */ .caps { display: grid; gap: 4px; margin-block-start: 8px; width: 100%; max-width: 640px; margin-inline: auto; } .caps li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 14px; padding: 16px 4px; border-block-start: 1px solid var(--rule); font-family: var(--sans); font-size: clamp(19px, 5.4vw, 30px); font-weight: 500; letter-spacing: -0.01em; color: var(--fg); text-align: start; transition: color .35s ease, padding-inline-start .35s ease; } @media (min-width: 768px) { .caps li { grid-template-columns: 60px 1fr; gap: 24px; padding: 22px 4px; } } .caps li:last-child { border-block-end: 1px solid var(--rule); } .caps li:hover { color: var(--accent-2); padding-inline-start: 12px; } .caps-n { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; } .caps-t { display: block; } /* ---------- 12. CTA (scene 7) ---------- */ .cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; min-height: 48px; /* touch target */ background: var(--accent); color: #fff; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; border-radius: 2px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; box-shadow: 0 12px 40px -10px rgba(59, 131, 247, 0.6); margin-inline: auto; } @media (min-width: 768px) { .cta { padding: 18px 28px; font-size: 16px; gap: 14px; } } .cta:hover { transform: translateY(-2px); background: var(--accent-2); box-shadow: 0 20px 60px -12px rgba(59, 131, 247, 0.8); } .cta-arrow { display: inline-block; transition: transform .25s ease; } .cta:hover .cta-arrow { transform: translateX(-4px); } .contact-line { margin-block-start: 18px; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums; display: flex; gap: 10px 14px; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 560px; margin-inline: auto; } .contact-line a { color: var(--fg-dim); text-decoration: none; transition: color .2s; padding: 4px 2px; /* gentle touch padding for tap targets */ } .contact-line a:hover { color: var(--accent-2); } .contact-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.4; flex-shrink: 0; } @media (max-width: 480px) { .contact-line { font-size: 10px; letter-spacing: 0.14em; gap: 8px 10px; margin-block-start: 20px; } } /* ---------- 13. Outro ---------- */ .outro { position: relative; z-index: 5; background: var(--bg); padding: 64px clamp(16px, 5vw, 96px) 40px; border-block-start: 1px solid var(--rule); } @media (min-width: 768px) { .outro { padding: 80px clamp(20px, 6vw, 96px) 48px; } } .outro-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .outro-row.small { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-block-start: 28px; } .outro-mark { font-weight: 700; letter-spacing: 0.2em; font-size: 16px; direction: ltr; } @media (min-width: 768px) { .outro-mark { font-size: 18px; } } .outro-meta { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .outro-link { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--fg-dim); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; direction: ltr; } .outro-link:hover { color: var(--accent-2); } .outro-rule { margin-block: 36px; height: 1px; background: var(--rule); } @media (min-width: 768px) { .outro-rule { margin-block: 48px; } } .outro-tags { color: var(--fg-dim); } /* ---------- 13.5. Brief form (Contact page scene 7) ---------- */ .brief-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; width: 100%; max-width: 540px; margin-inline: auto; margin-block-start: 14px; padding-block-end: 20px; text-align: start; } @media (max-width: 640px) { .brief-form { grid-template-columns: 1fr; gap: 18px; } } .brief-row { display: flex; flex-direction: column; gap: 8px; } .brief-row-full { grid-column: 1 / -1; } .brief-row label { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .brief-row input, .brief-row select, .brief-row textarea { font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--fg); background: rgba(245, 247, 248, 0.04); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; min-height: 44px; width: 100%; transition: border-color .2s ease, background .2s ease, box-shadow .25s ease; appearance: none; -webkit-appearance: none; } .brief-row textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .brief-row select { background-image: linear-gradient(45deg, transparent 45%, var(--fg-dim) 50%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--fg-dim) 50%, transparent 55%); background-position: calc(100% - 16px) 50%, calc(100% - 22px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 32px; cursor: pointer; } [dir="rtl"] .brief-row select { background-position: 16px 50%, 22px 50%; padding-inline-end: 14px; padding-inline-start: 32px; } .brief-row input:focus, .brief-row select:focus, .brief-row textarea:focus { outline: none; border-color: var(--accent); background: rgba(59, 131, 247, 0.06); box-shadow: 0 0 0 3px rgba(59, 131, 247, 0.12); } .brief-row input::placeholder, .brief-row textarea::placeholder { color: var(--muted); opacity: 0.7; } .brief-form button[type="submit"] { grid-column: 1 / -1; margin-block-start: 20px; margin-inline: auto; border: 0; cursor: pointer; } .brief-note { grid-column: 1 / -1; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; margin-block-start: 12px; font-variant-numeric: tabular-nums; } /* ---------- 14. Reduced motion banner ---------- */ .rm-banner { position: fixed; inset-block-end: 16px; inset-inline: 16px; z-index: 60; padding: 12px 16px; background: rgba(10, 10, 15, 0.92); border: 1px solid var(--rule); border-radius: 4px; color: var(--fg-dim); font-size: 12px; font-family: var(--sans); font-weight: 500; letter-spacing: 0.06em; backdrop-filter: blur(10px); } /* ---------- 15. Reduced motion: static fallback ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .stage { position: relative; height: auto; } .track { margin-block-start: 0; } .stage canvas, .vignette, .grain { display: none; } .scene { min-height: auto; padding-block: 8vh; border-block-start: 1px solid var(--rule-soft); } .scene:first-child { border-block-start: 0; } .panel { opacity: 1 !important; transform: none !important; max-width: 720px; margin-inline: auto; } .panel.center { text-align: center; } .panel.start, .panel.end { text-align: start; } .cue { display: none; } .progress-fill { transition: none; } .chapters { display: none; } } /* ---------- 16. Print ---------- */ @media print { .hud, .chapters, .progress, .stage { display: none; } body { background: #fff; color: #000; } .scene { min-height: auto; page-break-inside: avoid; padding: 2cm 0; } .panel { opacity: 1; transform: none; } .title em { color: #000; } }