:root { /* ── Base palette ──────────────────────────────── */ --charcoal: #1A1A1A; --section-dark: #0F0F0F; --cream: #F2EDE3; --cream-soft: #E8DDC9; /* ── Single signature accent ───────────────────── */ --accent: #FFD500; --accent-soft: rgba(255, 213, 0, 0.15); --accent-warm: #F25C0F; /* persimmon — used for atmospheric numeral accents */ /* Alternates kept for quick swap: */ --alt-teal: #737ED7; --alt-magenta: #D63384; /* ── Type ──────────────────────────────────────── */ --font-display: 'Nunito', system-ui, sans-serif; --font-hebrew: 'Heebo', system-ui, sans-serif; --tracking-tight: -0.025em; --tracking-wide: 0.22em; /* ── Rhythm ────────────────────────────────────── */ --section-pad: clamp(72px, 11vw, 160px); --container: 1280px; --radius-card: 28px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-display); font-weight: 400; background: var(--cream); color: var(--charcoal); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* ── Hebrew typography ──────────────────────────── */ html[lang="he"] body, html[lang="he"] .hero-tagline, html[lang="he"] .hero-headline, html[lang="he"] .hero-sub, html[lang="he"] .detail-headline, html[lang="he"] .detail-body, html[lang="he"] .work-card-title, html[lang="he"] .work-title, html[lang="he"] .nav-right, html[lang="he"] .eyebrow, html[lang="he"] .cta-pill, html[lang="he"] .next-teaser, html[lang="he"] .studio-headline, html[lang="he"] .studio-pullquote p, html[lang="he"] .contact-headline, html[lang="he"] .contact-card-value, html[lang="he"] .mobile-menu-nav a { font-family: var(--font-hebrew); } /* Wordmark stays in Nunito (English brand wordmark stays EN even in HE) */ /* ── Header ─────────────────────────────────────── */ /* Scoped to the top-level site header only (a direct child of ), so nested

elements inside sections (e.g. .detail-header) are never accidentally pinned to the viewport. */ body > header { position: fixed; top: 0; left: 0; right: 0; padding: 26px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 100; mix-blend-mode: difference; color: var(--cream); } .header-icon { display: block; width: 36px; height: auto; filter: invert(1); } .nav-right { display: flex; gap: 36px; align-items: center; font-size: 11px; font-weight: 300; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .nav-links { display: flex; gap: 28px; } .nav-right a { color: inherit; text-decoration: none; opacity: 0.85; transition: opacity 0.3s; } .nav-right a:hover { opacity: 1; } .lang-toggle { display: flex; gap: 6px; font-weight: 700; letter-spacing: 0.1em; } .lang-toggle button { background: none; border: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; opacity: 0.4; transition: opacity 0.3s; padding: 0; } .lang-toggle button.active { opacity: 1; } .lang-divider { opacity: 0.3; } /* ── Hero ───────────────────────────────────────── */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 140px 40px 100px; background: var(--cream); overflow: hidden; } .blob-1, .blob-2 { position: absolute; pointer-events: none; filter: blur(40px); } .blob-1 { top: -15%; right: -8%; width: 55%; height: 75%; background: radial-gradient(ellipse at center, rgba(255, 213, 0, 0.20) 0%, rgba(255, 213, 0, 0) 65%); } .blob-2 { bottom: -12%; left: -8%; width: 42%; height: 55%; background: radial-gradient(ellipse at center, rgba(42, 40, 38, 0.10) 0%, rgba(42, 40, 38, 0) 65%); } .hero-inner { max-width: var(--container); margin: 0 auto; width: 100%; position: relative; z-index: 2; } .hero-logo-block { margin-bottom: 64px; text-align: center; animation: heroLogoFade 1.2s ease-out; } .hero-icon { display: block; width: clamp(130px, 13vw, 170px); height: auto; margin: 0 auto 18px; } .hero-wordmark { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0.02em; text-transform: lowercase; color: var(--charcoal); margin-bottom: 8px; line-height: 1; } .hero-tagline { font-weight: 300; font-size: 13px; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(26, 26, 26, 0.72); } @keyframes heroLogoFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .eyebrow { font-size: 11px; font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.72; margin-bottom: 36px; } .hero-headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 9.5vw, 144px); line-height: 0.95; letter-spacing: var(--tracking-tight); margin-bottom: 40px; max-width: 14ch; } .hero-headline .light { font-weight: 300; } .hero-sub { font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; max-width: 56ch; opacity: 0.72; line-height: 1.5; } .scroll-cue { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.72; display: flex; flex-direction: column; align-items: center; gap: 14px; } .scroll-cue-line { width: 1px; height: 36px; background: var(--charcoal); transform-origin: bottom; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.25; transform: scaleY(0.55); } 50% { opacity: 0.7; transform: scaleY(1); } } /* ── Curve dividers ─────────────────────────────── */ .curve { display: block; width: 100%; height: 90px; } .curve-to-dark { background: var(--cream); } .curve-to-cream { background: var(--section-dark); } /* ── Selected work — asymmetric 9-card grid ─────── */ .section-work { background: var(--cream); padding: var(--section-pad) 40px; position: relative; } .section-work .section-inner { max-width: var(--container); margin: 0 auto; } .work-header { margin-bottom: 56px; max-width: 720px; } .work-header .eyebrow { margin-bottom: 20px; opacity: 0.72; } .work-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 76px); line-height: 0.95; letter-spacing: var(--tracking-tight); } .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(220px, 26vw, 340px); gap: 18px; } .work-card { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: var(--charcoal); background: var(--charcoal); box-shadow: 0 12px 28px rgba(42, 40, 38, 0.08); transition: transform 0.4s ease, box-shadow 0.4s ease; isolation: isolate; } .work-card-image { position: absolute; inset: 0; z-index: 0; transition: transform 0.4s ease; background-size: cover; background-position: center; } .work-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 15, 0.10) 0%, rgba(15, 15, 15, 0.65) 100%); } .work-card-content { position: relative; z-index: 1; height: 100%; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: space-between; color: var(--cream); } .work-card-num { font-family: var(--font-display); font-weight: 300; font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.75; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5); } .work-card-title { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-tight); font-size: clamp(20px, 2.4vw, 28px); max-width: 14ch; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.45); } .work-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(42, 40, 38, 0.25); } .work-card:hover .work-card-image { transform: scale(1.03); } /* Per-card placement and per-card title sizing (12-col asymmetric) */ .work-card-1 { grid-column: 1 / 8; grid-row: 1 / 2; } .work-card-1 .work-card-title { font-size: clamp(32px, 4.6vw, 52px); } .work-card-2 { grid-column: 8 / 13; grid-row: 1 / 2; } .work-card-2 .work-card-title { font-size: clamp(24px, 2.8vw, 36px); } .work-card-3 { grid-column: 1 / 6; grid-row: 2 / 3; } .work-card-3 .work-card-title { font-size: clamp(22px, 2.4vw, 30px); } .work-card-4 { grid-column: 6 / 10; grid-row: 2 / 3; } .work-card-4 .work-card-title { font-size: clamp(20px, 2.2vw, 28px); } .work-card-5 { grid-column: 10 / 13; grid-row: 2 / 4; } .work-card-5 .work-card-title { font-size: clamp(22px, 2.4vw, 32px); } .work-card-6 { grid-column: 1 / 5; grid-row: 3 / 4; } .work-card-6 .work-card-title { font-size: clamp(20px, 2.2vw, 26px); } .work-card-7 { grid-column: 5 / 10; grid-row: 3 / 4; } .work-card-7 .work-card-title { font-size: clamp(28px, 3.6vw, 44px); } .work-card-8 { grid-column: 1 / 8; grid-row: 4 / 5; } .work-card-8 .work-card-title { font-size: clamp(30px, 4.2vw, 48px); } .work-card-9 { grid-column: 8 / 13; grid-row: 4 / 5; } .work-card-9 .work-card-title { font-size: clamp(24px, 2.8vw, 36px); } /* ── Detail sections (categories 01-09) ─────────── */ .detail { padding: var(--section-pad) 40px; position: relative; overflow: hidden; } .detail--dark { background: var(--section-dark); color: var(--cream); } .detail--cream { background: var(--cream); color: var(--charcoal); } .detail-mark { position: absolute; top: 30px; right: 40px; font-size: clamp(96px, 14vw, 220px); font-weight: 800; line-height: 0.85; letter-spacing: -0.06em; pointer-events: none; z-index: 0; font-family: var(--font-display); } .detail--dark .detail-mark { color: rgba(242, 92, 15, 0.22); } .detail--cream .detail-mark { color: rgba(242, 92, 15, 0.18); } /* Variant C has copy in the trailing column where the mark normally sits — push the mark to the bottom edge so it doesn't crash into the headline (esp. section 07). */ .detail--c .detail-mark { top: auto; bottom: 6%; } .detail-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 2; } .detail-eyebrow { margin-bottom: 28px; opacity: 1; color: var(--accent); } .detail--cream .detail-eyebrow { color: var(--charcoal); opacity: 0.7; } .detail-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: var(--tracking-tight); margin-bottom: 36px; max-width: 16ch; } .detail-body { font-size: 17px; font-weight: 300; line-height: 1.65; max-width: 56ch; margin-bottom: 44px; opacity: 0.85; } .cta-pill { display: inline-flex; align-items: center; gap: 14px; padding: 15px 28px; background: var(--accent); color: var(--section-dark); font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 999px; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; } .cta-pill:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(42, 40, 38, 0.2); } .cta-pill::after { content: '→'; font-size: 17px; } html[dir="rtl"] .cta-pill::after { content: '←'; } /* Image wrapper used by all variants */ .detail-image { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 40px 80px rgba(42, 40, 38, 0.18); background: var(--charcoal); margin: 0; } .detail-image img { width: 100%; height: 100%; object-fit: cover; } /* ── Layout A — image right, copy left ──────────── */ .detail--a .detail-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; } .detail--a .detail-image--primary { aspect-ratio: 4 / 5; transform: translateX(20px); } html[dir="rtl"] .detail--a .detail-image--primary { transform: translateX(-20px); } .detail--a .detail-image--secondary { aspect-ratio: 3 / 2; max-width: 520px; margin-top: 64px; margin-left: auto; } html[dir="rtl"] .detail--a .detail-image--secondary { margin-left: 0; margin-right: auto; } /* ── Layout B — full-bleed hero top, two-col below ── */ .detail--b .detail-hero { width: 100%; max-width: var(--container); margin: 0 auto 64px; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 40px 80px rgba(42, 40, 38, 0.22); position: relative; z-index: 2; } .detail--b .detail-hero img { width: 100%; height: 100%; object-fit: cover; } .detail--b .detail-row--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .detail--b .detail-row--two-col .detail-headline { margin-bottom: 0; } .detail--b .detail-image--secondary { aspect-ratio: 4 / 3; margin-top: 72px; max-width: 720px; } /* ── Layout C — image left vertical, copy right ─── */ .detail--c .detail-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: stretch; } .detail--c .detail-text { align-self: center; } /* ── Layout D — image(s) top, centered copy below ── */ .detail--d .detail-image-row { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 72px; } .detail--d .detail-image-row.split-60-40 { grid-template-columns: 6fr 4fr; } .detail--d .detail-image--wide { aspect-ratio: 16 / 10; } .detail--d .detail-image--panoramic { aspect-ratio: auto; background: transparent; box-shadow: 0 40px 80px rgba(42, 40, 38, 0.22); } .detail--d .detail-image--panoramic img { height: auto; width: 100%; object-fit: contain; } .detail--d .detail-text--centered { max-width: 760px; margin: 0 auto; text-align: center; } .detail--d .detail-text--centered .detail-headline { margin-left: auto; margin-right: auto; } .detail--d .detail-text--centered .detail-body { margin-left: auto; margin-right: auto; } /* Two equal-width images for the variant D side-by-side pair (used by section 02). */ .detail--d .detail-image-row.split-50-50 { grid-template-columns: 1fr 1fr; gap: 18px; } .detail--d .detail-image-row.split-50-50 .detail-image { aspect-ratio: 4 / 5; } /* ── Image-pair primitive ───────────────────────────────────────────────── */ /* A primary image with a smaller secondary overlapping one corner. */ /* Used by sections 01, 03, 05 (inside variants A/C) and 06/09 (hero pair). */ /* Position modifiers use logical properties so they auto-mirror in RTL. */ .image-pair { position: relative; display: block; } .image-pair__primary { width: 100%; margin: 0; } .image-pair__secondary { position: absolute; z-index: 2; width: 38%; margin: 0; aspect-ratio: 4 / 5; } .image-pair--bl .image-pair__secondary { inset-block-end: -8%; inset-inline-start: -7%; } .image-pair--br .image-pair__secondary { inset-block-end: -8%; inset-inline-end: -7%; } .image-pair--tl .image-pair__secondary { inset-block-start: -8%; inset-inline-start: -7%; } .image-pair--tr .image-pair__secondary { inset-block-start: -8%; inset-inline-end: -7%; } /* Variant A pair (sections 01, 05): primary fills the right column at 4:5 */ .detail--a .image-pair { width: 100%; } .detail--a .image-pair__primary { aspect-ratio: 4 / 5; transform: none; } .detail--a .image-pair__secondary { width: 42%; aspect-ratio: 1 / 1; } /* Variant C pair (section 03): tall primary in the left column */ .detail--c .image-pair__primary { aspect-ratio: 3 / 4; min-height: 480px; } .detail--c .image-pair__secondary { width: 52%; aspect-ratio: 4 / 5; } /* Section 07 — collage layout (matches the Selected Work grid energy). Centered text block on top, three-card asymmetric grid below. */ .detail-header--centered { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; } .detail-header--centered .detail-headline { margin-left: auto; margin-right: auto; } .detail-header--centered .detail-body { max-width: 56ch; margin-left: auto; margin-right: auto; } .detail-header--centered .cta-pill { margin-top: 8px; } .detail-collage { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; margin: 64px auto 0; aspect-ratio: 16 / 9; max-width: 1100px; } .collage-item { margin: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25); position: relative; } .collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .collage-item--primary { grid-column: 1; grid-row: 1 / 3; } .collage-item--relief { grid-column: 2; grid-row: 1; } .collage-item--corner { grid-column: 2; grid-row: 2; } /* Section 07 dropped variant C, so re-anchor its mark to the bottom corner to preserve the existing persimmon-numeral position. */ #section-07 .detail-mark { top: auto; bottom: 6%; } /* Hero pair wrapper (variant B sections 06 + 09): hero stays full-width, secondary overlaps one bottom corner like a material-study callout. */ .detail-hero-pair { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto 96px; } .detail-hero-pair .detail-hero { margin: 0; max-width: none; position: relative; } .detail-hero-pair .image-pair__secondary { width: 30%; aspect-ratio: 4 / 3; } /* Hero-pair (sections 06 + 09) overrides: the hero already fills the container, so the corner-overlapping secondary must sit INSIDE the right/left edge — otherwise the section's overflow:hidden clips it off-screen. */ .detail-hero-pair.image-pair--br .image-pair__secondary { inset-inline-end: 4%; } .detail-hero-pair.image-pair--bl .image-pair__secondary { inset-inline-start: 4%; } /* For sections that no longer use the standalone secondary slot — neutralise the legacy bottom-margin if it ever sneaks in. (No-op when not applied.) */ /* Lets a transparency-aware image (e.g., the David PNG) sit on the section background with no rectangular box, no shadow. The bg explicitly matches the parent section's color so the figure blends in regardless of any sub-pixel antialiasing at the wrapper edges. */ .detail-image--transparent { background: transparent; box-shadow: none; } .detail--dark .detail-image--transparent { background: var(--section-dark); } .detail--cream .detail-image--transparent { background: var(--cream); } .detail-image--transparent img { object-fit: contain; } /* ── Next teaser (sits at the bottom of every detail) ── */ .next-teaser { display: inline-flex; flex-direction: column; gap: 6px; margin-top: 80px; padding: 18px 0; text-decoration: none; color: inherit; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; border-image: linear-gradient(90deg, currentColor 0%, currentColor 30%, transparent 60%) 1; padding-right: 80px; max-width: 520px; transition: padding 0.3s; } .next-teaser:hover { padding-right: 100px; } html[dir="rtl"] .next-teaser { padding-right: 0; padding-left: 80px; } html[dir="rtl"] .next-teaser:hover { padding-left: 100px; } .next-teaser .next-pre { font-size: 10px; font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.72; } .next-teaser .next-target { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: var(--tracking-tight); position: relative; } .next-teaser .next-target::after { content: ' →'; display: inline-block; transition: transform 0.3s; } html[dir="rtl"] .next-teaser .next-target::after { content: ' ←'; } .next-teaser:hover .next-target::after { transform: translateX(6px); } html[dir="rtl"] .next-teaser:hover .next-target::after { transform: translateX(-6px); } /* ══════════════════════ Studio section ══════════════════════ */ .section-studio { background: var(--cream); color: var(--charcoal); padding: var(--section-pad) 40px; position: relative; } .section-studio .section-inner { max-width: var(--container); margin: 0 auto; } .studio-eyebrow { color: rgba(26, 26, 26, 0.72); opacity: 1; margin-bottom: 28px; } .studio-eyebrow::before { content: "■"; color: var(--accent); margin-inline-end: 10px; font-size: 0.85em; } .studio-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: var(--tracking-tight); margin-bottom: 80px; max-width: 18ch; } .studio-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: start; } .studio-philosophy { font-size: 17px; font-weight: 300; line-height: 1.65; opacity: 0.85; max-width: 56ch; margin-bottom: 56px; } .studio-howwework-eyebrow { color: var(--charcoal); opacity: 0.72; margin-bottom: 18px; } .studio-howwework-body { font-size: 16px; font-weight: 300; line-height: 1.65; opacity: 0.78; max-width: 56ch; } .studio-image { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 40px 80px rgba(42, 40, 38, 0.18); position: relative; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.18) 0%, transparent 38%), radial-gradient(ellipse at 70% 65%, rgba(0,0,0,0.18) 0%, transparent 48%), linear-gradient(135deg, #A8A095 0%, #C8BFB1 38%, #DDD3C2 72%, #B5AC9F 100%); } .studio-image::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(43deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 3px), repeating-linear-gradient(127deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 4px); mix-blend-mode: overlay; } .studio-image-inner { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .studio-pullquote { margin: clamp(80px, 12vw, 140px) auto 0; max-width: 880px; text-align: center; padding: 0 20px; } .studio-pullquote::before { content: ''; display: block; width: 56px; height: 2px; margin: 0 auto 36px; background: var(--accent); } .studio-pullquote p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.25; letter-spacing: var(--tracking-tight); color: var(--charcoal); } .studio-pullquote em, .studio-pullquote .accent-word { color: var(--accent); font-style: italic; } /* ══════════════════════ Contact section ══════════════════════ */ .section-contact { background: var(--section-dark); color: var(--cream); padding: var(--section-pad) 40px clamp(48px, 6vw, 80px); position: relative; overflow: hidden; } .section-contact .section-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 2; } .contact-eyebrow { color: var(--accent); opacity: 1; margin-bottom: 28px; } .contact-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: var(--tracking-tight); margin-bottom: 36px; max-width: 16ch; } .contact-body { font-size: 17px; font-weight: 300; line-height: 1.65; max-width: 56ch; opacity: 0.85; margin-bottom: 72px; } .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 80px; } .contact-card { border: 1px solid rgba(242, 237, 227, 0.16); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.3s, background 0.3s, transform 0.3s; } .contact-card:hover { border-color: rgba(255, 213, 0, 0.5); background: rgba(255, 213, 0, 0.04); transform: translateY(-2px); } .contact-card--whatsapp { border-color: rgba(255, 213, 0, 0.45); background: rgba(255, 213, 0, 0.05); } .contact-card-label { font-size: 11px; font-weight: 300; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.55; } .contact-card-value { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--cream); text-decoration: none; word-break: break-word; transition: color 0.3s; } a.contact-card-value:hover { color: var(--accent); } .contact-card-meta { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 300; line-height: 1.4; opacity: 0.7; } .contact-card-meta-label { display: block; font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.72; margin-bottom: 4px; } .always-ltr { unicode-bidi: isolate; direction: ltr; } .contact-ctas { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(64px, 8vw, 96px); } .contact-ctas .cta-pill { font-size: 13px; padding: 18px 32px; } .cta-pill--filled { background: var(--accent); color: var(--section-dark); } .cta-pill--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); } .cta-pill--outline:hover { background: rgba(255, 213, 0, 0.08); } .contact-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid rgba(242, 237, 227, 0.12); font-size: 12px; font-weight: 300; letter-spacing: 0.08em; opacity: 0.65; } .contact-footer-link { color: inherit; text-decoration: none; transition: color 0.3s; } .contact-footer-link:hover { color: var(--accent); } .contact-footer-handle { font-weight: 700; letter-spacing: 0; text-transform: lowercase; margin-left: 4px; opacity: 0.85; } .contact-footer-divider { opacity: 0.4; } /* ── RTL adjustments ────────────────────────────── */ html[dir="rtl"] .detail-mark { right: auto; left: 40px; } html[dir="rtl"] .hero-headline, html[dir="rtl"] .detail-headline, html[dir="rtl"] .work-title { letter-spacing: 0; } /* ── Responsive ─────────────────────────────────── */ @media (max-width: 1024px) { .work-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(220px, 32vw, 320px); } .work-card-1 { grid-column: 1 / 7; grid-row: auto; } .work-card-2 { grid-column: 1 / 4; grid-row: auto; } .work-card-3 { grid-column: 4 / 7; grid-row: auto; } .work-card-4 { grid-column: 1 / 4; grid-row: auto; } .work-card-5 { grid-column: 4 / 7; grid-row: span 2; } .work-card-6 { grid-column: 1 / 4; grid-row: auto; } .work-card-7 { grid-column: 1 / 7; grid-row: auto; } .work-card-8 { grid-column: 1 / 5; grid-row: auto; } .work-card-9 { grid-column: 5 / 7; grid-row: auto; } .detail--a .detail-row, .detail--b .detail-row--two-col, .detail--c .detail-row { grid-template-columns: 1fr; gap: 48px; } .detail--a .detail-image--primary, html[dir="rtl"] .detail--a .detail-image--primary { transform: none; } .detail--d .detail-image-row.split-60-40 { grid-template-columns: 1fr; } .studio-grid { grid-template-columns: 1fr; gap: 56px; } .studio-image { max-width: 560px; } .contact-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { body > header { padding: 16px 22px; } .nav-right { gap: 22px; } .nav-right .nav-links { display: none; } .hero, .detail, .section-work, .section-studio, .section-contact { padding-left: 24px; padding-right: 24px; } .detail-mark { font-size: 28vw; top: 20px; right: 20px; } html[dir="rtl"] .detail-mark { left: 20px; right: auto; } } @media (max-width: 768px) { .work-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; } .work-card { grid-column: 1 / -1 !important; grid-row: auto !important; } .work-card-1 { aspect-ratio: 5 / 4; } .work-card-2 { aspect-ratio: 4 / 3; } .work-card-3 { aspect-ratio: 1 / 1; } .work-card-4 { aspect-ratio: 4 / 3; } .work-card-5 { aspect-ratio: 3 / 4; } .work-card-6 { aspect-ratio: 1 / 1; } .work-card-7 { aspect-ratio: 5 / 4; } .work-card-8 { aspect-ratio: 4 / 3; } .work-card-9 { aspect-ratio: 4 / 3; } .work-card-1 .work-card-title, .work-card-7 .work-card-title, .work-card-8 .work-card-title { font-size: clamp(28px, 6vw, 38px); } .detail-headline { font-size: clamp(38px, 9vw, 56px); } .next-teaser, html[dir="rtl"] .next-teaser { padding-right: 0; padding-left: 0; max-width: 100%; } /* Persimmon numerals scale down so the glyph never protrudes past the viewport edge at narrow widths. */ .detail-mark { font-size: clamp(48px, 18vw, 80px); } /* Variants A and D collapse to single-column at mobile, so their text content stacks at top of section. Push the numeral to the bottom corner (mirroring the variant C behaviour) to avoid colliding with the eyebrow. */ .detail--a .detail-mark, .detail--d .detail-mark { top: auto; bottom: 6%; } /* On mobile, stop overlapping — let the pair stack vertically. */ .image-pair__secondary { position: static; width: 100%; inset: auto; margin-top: 14px; aspect-ratio: 4 / 3; } .detail-hero-pair { margin-bottom: 56px; } /* Section 07 collage collapses to single column. */ .detail-collage { grid-template-columns: 1fr; grid-template-rows: auto; aspect-ratio: auto; max-width: none; gap: 14px; } .collage-item--primary { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 4; } .collage-item--relief { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; } .collage-item--corner { grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; } .detail--d .detail-image-row.split-50-50 { grid-template-columns: 1fr; gap: 14px; } .contact-grid { grid-template-columns: 1fr; } .contact-ctas { flex-direction: column; align-items: stretch; } .contact-ctas .cta-pill { justify-content: center; } .contact-footer { font-size: 11px; gap: 10px; } } /* ── Mobile menu toggle (hamburger) ─────────────── */ .menu-toggle { display: none; background: none; border: none; padding: 0; cursor: pointer; width: 28px; height: 22px; position: relative; color: inherit; } .menu-toggle span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; } .menu-toggle span:nth-child(1) { top: 2px; } .menu-toggle span:nth-child(2) { top: 10px; } .menu-toggle span:nth-child(3) { top: 18px; } body.menu-open .menu-toggle span:nth-child(1) { top: 10px; transform: rotate(45deg); } body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; } body.menu-open .menu-toggle span:nth-child(3) { top: 10px; transform: rotate(-45deg); } @media (max-width: 768px) { .menu-toggle { display: block; } } /* ── Mobile menu overlay ────────────────────────── */ .mobile-menu { position: fixed; inset: 0; background: var(--section-dark); z-index: 99; /* below body > header (z-index 100) so the X stays clickable */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } body.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear 0s; } .mobile-menu-nav { display: flex; flex-direction: column; gap: 28px; align-items: center; } .mobile-menu-nav a { font-family: var(--font-display); font-size: clamp(32px, 8vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: var(--cream); text-decoration: none; transition: color 0.2s ease; } .mobile-menu-nav a:hover, .mobile-menu-nav a:focus-visible { color: var(--accent); } .mobile-menu .lang-toggle { font-size: 14px; color: var(--cream); } /* Lock body scroll when menu is open. overflow-x stays hidden from Patch A. */ body.menu-open { overflow-y: hidden; } /* Belt-and-suspenders: never show the overlay above 768px */ @media (min-width: 769px) { .mobile-menu { display: none !important; } } /* When the menu is open at mobile, give the X a little breathing room from the lang toggle. margin-inline-start auto-mirrors in RTL so the gap lands on the correct side in both EN and HE. */ @media (max-width: 768px) { body.menu-open .menu-toggle { margin-inline-start: 14px; } } /* ── Skip-to-main link (visible only when focused) ─ */ .skip-link { position: absolute; top: -100px; left: 0; z-index: 999; padding: 12px 18px; background: var(--charcoal); color: var(--cream); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: top 0.15s ease; } .skip-link:focus { top: 8px; left: 8px; outline: 2px solid var(--accent); outline-offset: 2px; } html[dir="rtl"] .skip-link { left: auto; right: 0; } html[dir="rtl"] .skip-link:focus { left: auto; right: 8px; } /* ── Page-level footer landmark ──────────────────── */ .site-footer { background: var(--section-dark); color: var(--cream); padding: 28px 40px 36px; text-align: center; font-size: 12px; font-weight: 300; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .site-footer-copy { opacity: 0.7; } @media (max-width: 768px) { .site-footer { padding: 22px 24px 28px; font-size: 11px; } } /* ── Hebrew override for the dormant .accent-word italic (the brief flags italic-as-emphasis as inappropriate in Hebrew; this is defensive — .accent-word is not currently used in markup) */ html[lang="he"] .studio-pullquote .accent-word { font-style: normal; font-weight: 800; } /* ── Global keyboard focus indicator ─────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ── Footer link to accessibility statement ──────── */ .site-footer-sep { margin: 0 10px; opacity: 0.4; } .site-footer-link { color: inherit; text-decoration: none; transition: color 0.2s; } .site-footer-link:hover, .site-footer-link:focus-visible { color: var(--accent); } /* ── Accessibility statement page ────────────────── */ .accessibility-page { background: var(--cream); color: var(--charcoal); padding: 140px 24px 80px; } @media (min-width: 769px) { .accessibility-page { padding: 180px 60px 120px; } } .accessibility-content { max-width: 720px; margin: 0 auto; } .accessibility-content h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.02em; margin-bottom: 16px; } .accessibility-content h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.01em; margin-top: 48px; margin-bottom: 12px; } .accessibility-content p, .accessibility-content li { font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1.65; margin-bottom: 12px; } .accessibility-content ul { list-style: disc; padding-left: 24px; margin-bottom: 18px; } html[dir="rtl"] .accessibility-content ul { padding-left: 0; padding-right: 24px; } .accessibility-content li { margin-bottom: 8px; } .accessibility-content strong { font-weight: 700; } .accessibility-content a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; } .accessibility-content a:hover, .accessibility-content a:focus-visible { color: var(--accent); } .accessibility-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: rgba(26, 26, 26, 0.06); padding: 1px 6px; border-radius: 3px; unicode-bidi: isolate; direction: ltr; } .accessibility-content .date-updated { font-size: 14px; color: rgba(26, 26, 26, 0.72); margin-bottom: 32px; } /* Hebrew article uses Heebo */ .accessibility-content--he, .accessibility-content--he h1, .accessibility-content--he h2, .accessibility-content--he p, .accessibility-content--he li { font-family: var(--font-hebrew); } /* Show only the active language's article */ .accessibility-content--he { display: none; } html[lang="he"] .accessibility-content--en { display: none; } html[lang="he"] .accessibility-content--he { display: block; } /* ── Sienna widget: pin to inline-end of reading direction ── */ .asw-menu-btn { left: auto !important; right: 20px !important; } .asw-menu { left: auto !important; right: 0 !important; } html[dir="rtl"] .asw-menu-btn { right: auto !important; left: 20px !important; } html[dir="rtl"] .asw-menu { right: auto !important; left: 0 !important; }