/* TR Lighting — shared styles */ /* Fonts load via the HTML (includes Assistant for Hebrew); no CSS @import here. */ :root { --bg: #0a0908; --bg-soft: #15130f; --fg: #f3ece0; --fg-mute: rgba(243, 236, 224, 0.55); --fg-faint: rgba(243, 236, 224, 0.28); --rule: rgba(243, 236, 224, 0.14); --champagne: #d9c9a8; --gold: #b8a274; --serif: "Inter", ui-sans-serif, system-ui, sans-serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; /* ─ Type scale: 4 display + 4 interface ─────────────────────────────── */ /* Display — Inter 700, bold geometric needs more size than thin serif */ --type-hero: clamp(35px, 5.2vw, 50px); /* project detail title */ --type-display: clamp(29px, 4vw, 64px); /* home hero, category titles */ --type-title: clamp(21px, 2.4vw, 38px); /* section lede, nav prev/next */ --type-subtitle: clamp(16px, 1.76vw, 27px); /* archive/card names */ /* Interface — Inter, UI chrome */ --type-body: 17px; /* body copy */ --type-small: 15px; /* metadata, descriptions */ --type-label: 13px; /* nav, filters, buttons */ --type-caption: 11px; /* captions, index numbers */ /* Aliases for backward compatibility */ --type-meta: var(--type-small); --type-reading: var(--type-body); --type-micro: var(--type-caption); --track-en: 0.14em; /* Secondary text contrast — stronger than --fg-mute (55%), used for body descriptions */ --fg-soft: rgba(243, 236, 224, 0.72); --header-height: 72px; } [dir="rtl"] { --serif: "Heebo", "Assistant", system-ui, sans-serif; --sans: "Assistant", system-ui, sans-serif; /* Heebo and Inter are both geometric sans — very comparable metrics */ --type-hero: clamp(29px, 4.25vw, 70px); --type-display: clamp(29px, 4vw, 64px); --type-title: clamp(16px, 1.87vw, 31px); --type-subtitle: clamp(13px, 1.45vw, 22px); --type-label: 13px; --track-en: 0; --fg-soft: rgba(243, 236, 224, 0.80); } [data-palette="ivory"] { --bg: #f3ece0; --bg-soft: #ece4d4; --fg: #1c1814; --fg-mute: rgba(28, 24, 20, 0.70); --fg-soft: rgba(28, 24, 20, 0.80); --fg-faint: rgba(28, 24, 20, 0.50); --rule: rgba(28, 24, 20, 0.14); --champagne: #8a7a5c; --gold: #6b5a3a; } [data-palette="oyster"] { --bg: #ebe7df; --bg-soft: #e2ddd2; --fg: #1a1a1a; --fg-mute: rgba(26, 26, 26, 0.70); --fg-soft: rgba(26, 26, 26, 0.80); --fg-faint: rgba(26, 26, 26, 0.50); --rule: rgba(26, 26, 26, 0.12); --champagne: #7a7568; --gold: #5e574a; } /* Explicit dark selector (mirrors the :root defaults). Without it, "dark" only existed as the absence of a palette attribute — so once the pre-paint script puts data-palette="ivory" on , toggling to "dark" matched no selector and the body kept inheriting ivory variables. This block makes a body-level "dark" always take effect. */ [data-palette="dark"] { --bg: #0a0908; --bg-soft: #15130f; --fg: #f3ece0; --fg-mute: rgba(243, 236, 224, 0.55); --fg-soft: rgba(243, 236, 224, 0.72); --fg-faint: rgba(243, 236, 224, 0.28); --rule: rgba(243, 236, 224, 0.14); --champagne: #d9c9a8; --gold: #b8a274; } [dir="rtl"] [data-palette="dark"], [dir="rtl"][data-palette="dark"] { --fg-soft: rgba(243, 236, 224, 0.80); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scrollbar-gutter: stable; } /* Background lives on only: the palette attribute is set on , so var(--bg) resolves to the dark :root default on . Painting the canvas from therefore showed a dark band (overscroll / scrollbar gutter / any area body doesn't cover) on the ivory theme. With transparent, the body's palette-correct background propagates to the canvas (standard CSS). */ html, body { background: var(--bg); } html, body { color: var(--fg); } body { font-family: var(--sans); font-size: var(--type-body); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; transition: background-color 1.6s cubic-bezier(.22,.61,.36,1), color 1.6s cubic-bezier(.22,.61,.36,1); min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } .serif { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; } [dir="rtl"] .serif { letter-spacing: 0; font-weight: 700; } .mono { font-family: var(--mono); font-feature-settings: "tnum"; } .label { font-family: var(--sans); font-size: var(--type-label); font-weight: 500; letter-spacing: var(--track-en); text-transform: uppercase; color: var(--fg-mute); } [dir="rtl"] .label { text-transform: none; } /* ─ Semantic type utilities ─────────────────────────────────────────────── */ /* Display: serif + scale var + appropriate leading/tracking */ .t-hero { font-family: var(--serif); font-size: var(--type-hero); line-height: 1.05; letter-spacing: -0.01em; font-weight: 700; } .t-display { font-family: var(--serif); font-size: var(--type-display); line-height: 1.08; letter-spacing: -0.01em; font-weight: 700; } .t-title { font-family: var(--serif); font-size: var(--type-title); line-height: 1.15; letter-spacing: -0.005em; font-weight: 700; } .t-subtitle{ font-family: var(--serif); font-size: var(--type-subtitle); line-height: 1.2; letter-spacing: 0; font-weight: 700; } /* Interface: sans + scale var */ .t-body { font-family: var(--sans); font-size: var(--type-body); line-height: 1.62; } .t-small { font-family: var(--sans); font-size: var(--type-small); line-height: 1.6; } .t-label { font-family: var(--sans); font-size: var(--type-label); letter-spacing: var(--track-en); text-transform: uppercase; } .t-caption { font-family: var(--sans); font-size: var(--type-caption); letter-spacing: var(--track-en); } /* RTL resets: no tracking, no caps on Hebrew */ [dir="rtl"] .t-hero, [dir="rtl"] .t-display, [dir="rtl"] .t-title, [dir="rtl"] .t-subtitle { letter-spacing: 0; } [dir="rtl"] .t-label, [dir="rtl"] .t-caption { text-transform: none; letter-spacing: 0; } /* ───────── Header ───────── */ .header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 40px; pointer-events: none; mix-blend-mode: normal; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .header--hidden { transform: none; } /* subtle top gradient — keeps text legible over hero without a solid bar */ .header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 130px; background: linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, transparent 0%); pointer-events: none; z-index: -1; } [data-palette="ivory"] .header::before, [data-palette="oyster"] .header::before { background: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 0%); } .header > * { pointer-events: auto; } .header__logo { display: flex; align-items: center; } .header__logo img { height: auto; width: 170px; } .header__logo .logo-light { display: none; } [data-palette="ivory"] .header__logo .logo-dark, [data-palette="oyster"] .header__logo .logo-dark { display: none; } [data-palette="ivory"] .header__logo .logo-light, [data-palette="oyster"] .header__logo .logo-light { display: block; } .header__nav { display: flex; gap: 28px; justify-self: center; font-size: 15px; /* English / LTR base */ font-weight: 500; letter-spacing: var(--track-en); text-transform: uppercase; } [dir="rtl"] .header__nav { font-size: 18px; /* Hebrew needs slightly larger */ } [dir="rtl"] .header__nav { text-transform: none; } .header__nav a { color: var(--fg); position: relative; padding: 6px 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: color .35s ease; } .header__nav a:hover { color: var(--champagne); } .header__nav a.is-active { color: var(--fg); font-weight: 600; } .header__nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; } .header__meta { justify-self: end; display: flex; gap: 18px; align-items: center; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); } .header__meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 8px var(--champagne); } .header__theme { justify-self: end; display: flex; align-items: center; gap: 12px; } /* Header utilities — lightweight, borderless text/icon controls. The nav is the visual priority; these read as quiet utilities. Hit area stays 38px (invisible). */ .lang-switch, .theme-toggle { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: var(--track-en); text-transform: uppercase; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 6px; border: 0; border-radius: 0; background: transparent; cursor: pointer; /* same legibility shadow as the nav links (headers sit over hero photos) */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: color .3s ease; } /* EN / HE — two labels with a thin separator; active emphasized, inactive muted. direction:ltr keeps the EN / HE order identical in the Hebrew (RTL) header. */ .lang-switch { direction: ltr; gap: 6px; } .lang-switch__opt { color: var(--fg-mute); transition: color .3s ease; } .lang-switch__opt.is-active { color: var(--fg); font-weight: 500; } .lang-switch__sep { color: var(--fg-faint); } .lang-switch:hover .lang-switch__opt:not(.is-active) { color: var(--champagne); } /* keyboard focus for the header controls */ .lang-switch:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; } /* Theme toggle = a single lightbulb icon. Light palette → bulb lit with a soft warm glow ("on"); dark palette → bulb dark, glow gone ("off"). Glow transitions smoothly, like the hero's lights coming on. The text label is hidden (icon-only). */ .theme-toggle { padding: 0 6px; gap: 0; } .theme-toggle > span:not(.theme-toggle__dot) { display: none; } .theme-toggle__dot { display: block; width: 18px; height: 18px; border-radius: 0; box-shadow: none; /* OFF (dark palette): dim bulb — theme-aware, not hardcoded */ background-color: color-mix(in srgb, var(--fg) 62%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7zM9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7zM9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1z'/%3E%3C/svg%3E") center / contain no-repeat; filter: none; transition: background-color .55s ease, filter .55s ease; } [data-palette="ivory"] .theme-toggle__dot, [data-palette="oyster"] .theme-toggle__dot { background-color: var(--gold); /* ON (light palette): warm lit bulb, theme-aware */ filter: drop-shadow(0 0 4px rgba(247, 233, 192, 0.9)) drop-shadow(0 0 10px rgba(232, 200, 130, 0.5)); } /* hover: bulb steps up to full contrast (borderless control still reads interactive) */ .theme-toggle:hover .theme-toggle__dot { background-color: var(--fg); } /* Light palettes: nav and toggle at full opacity — var(--fg-mute) at 55% is too low-contrast against the ivory/oyster hero and body backgrounds. */ [data-palette="ivory"] .header__nav a, [data-palette="oyster"] .header__nav a { color: var(--fg); } [data-palette="ivory"] .header__nav a:hover, [data-palette="oyster"] .header__nav a:hover { color: var(--champagne); } /* ───────── Footer ───────── */ .footer { border-top: 1px solid var(--rule); padding: 80px 40px 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .footer__col h4 { font-family: var(--serif); font-size: 14px; font-weight: 400; margin-bottom: 18px; color: var(--fg-mute); letter-spacing: 0.02em; } .footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .footer__col ul a { color: var(--fg); opacity: .92; transition: opacity .25s ease; } .footer__col ul a:hover { opacity: 1; } .footer__brand .serif { font-size: 36px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 14px; } .footer__brand { display: flex; flex-direction: column; align-items: flex-start; /* logo on the column's start edge (right in RTL) */ justify-content: center; /* vertically centered within the footer row */ } .footer__brand img { width: 170px; /* match the header logo size */ height: auto; display: block; margin-bottom: 5px; } .footer__brand .logo-light { display: none; } [data-palette="ivory"] .footer__brand .logo-dark, [data-palette="oyster"] .footer__brand .logo-dark { display: none; } [data-palette="ivory"] .footer__brand .logo-light, [data-palette="oyster"] .footer__brand .logo-light { display: block; } /* Brand-column tagline (service line) + grouped contact list */ .footer__brand p { margin: 0px 0 1px; color: var(--fg-soft); font-size: 13px; letter-spacing: var(--track-en); text-transform: uppercase; } .footer__contact { margin-top: 0; } /* Isolate the Latin/number contact runs so they line up on the start edge in RTL */ .footer__contact li { unicode-bidi: isolate; } [dir="rtl"] .footer__contact li { text-align: start; } .footer__base { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 5px; display: flex; justify-content: center; font-size: 14px; letter-spacing: var(--track-en); text-transform: uppercase; color: var(--fg-soft); } @media (max-width: 700px) { .footer { gap: 18px; padding: 56px 24px 32px; } } /* stack only on the very narrowest phones */ @media (max-width: 300px) { .footer { grid-template-columns: 1fr; gap: 24px; } } /* ───────── Cinema-style placeholder ───────── */ .plate { position: relative; overflow: hidden; background: var(--bg-soft); isolation: isolate; } .plate::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent 0 6px, rgba(217, 201, 168, 0.06) 6px 7px ), radial-gradient(ellipse at var(--lx, 70%) var(--ly, 35%), rgba(217, 201, 168, 0.28) 0%, rgba(217, 201, 168, 0.08) 30%, transparent 65%); z-index: 0; } [data-palette="ivory"] .plate::before, [data-palette="oyster"] .plate::before { background: repeating-linear-gradient( 90deg, transparent 0 6px, rgba(28, 24, 20, 0.04) 6px 7px ), radial-gradient(ellipse at var(--lx, 70%) var(--ly, 35%), rgba(184, 162, 116, 0.32) 0%, rgba(184, 162, 116, 0.10) 32%, transparent 70%); } .plate__caption { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-mute); z-index: 2; display: flex; gap: 10px; align-items: center; } .plate__caption .tick { width: 6px; height: 6px; border: 1px solid var(--fg-mute); } .plate__corner { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-mute); z-index: 2; } /* page transition */ .page-enter { animation: pageIn .9s cubic-bezier(.22,.61,.36,1) both; } @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* utility */ .container { padding: 0 40px; } .rule { height: 1px; background: var(--rule); } button { font-family: inherit; } /* JSON project images */ .plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: none; opacity: 1; } .plate--image::before { z-index: 1; opacity: .18; mix-blend-mode: soft-light; } .plate--image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.08)); pointer-events: none; } [data-palette="ivory"] .plate--image::after, [data-palette="oyster"] .plate--image::after { background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.18)); } .data-loading { min-height: 60vh; display: grid; place-items: center; padding-top: 140px; color: var(--fg-mute); } /* Loading indicator — a breathing lightbulb that reuses the theme-toggle bulb icon. Theme-aware via var(--champagne): a warm gold that reads on both dark and light backgrounds, with a warm glow that pulses on the "on" beat to signal loading. */ .bulb-loader { width: 52px; height: 52px; background-color: var(--champagne); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7zM9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7zM9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1z'/%3E%3C/svg%3E") center / contain no-repeat; --bulb-glow-1: rgba(248, 236, 198, 0.95); /* dark theme: bright warm glow (like the toggle) */ --bulb-glow-2: rgba(236, 202, 120, 0.62); animation: bulbBreathe 1.7s ease-in-out infinite; will-change: opacity, filter, transform; } @keyframes bulbBreathe { 0%, 100% { opacity: .48; transform: scale(.86); filter: drop-shadow(0 0 0 transparent); } 50% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 9px var(--bulb-glow-1)) drop-shadow(0 0 26px var(--bulb-glow-2)); } } /* Light palettes: gold bulb stays legible; softer, warmer glow that reads on ivory. */ [data-palette="ivory"] .bulb-loader, [data-palette="oyster"] .bulb-loader { --bulb-glow-1: rgba(150, 105, 40, 0.60); --bulb-glow-2: rgba(150, 105, 40, 0.28); } @media (prefers-reduced-motion: reduce) { .bulb-loader { animation: none; opacity: .9; filter: drop-shadow(0 0 6px var(--bulb-glow-1)); } } /* Screen-reader-only text (kept in the DOM for a11y, hidden visually) */ .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; } /* Public mobile menu — replaces the theme toggle in production */ .mobile-burger{ justify-self:end; width:52px; min-height:44px; height:auto; padding:10px 0 8px; border:1px solid var(--rule); background:color-mix(in srgb, var(--bg) 76%, transparent); color:var(--fg); display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:border-color .35s ease, background-color .35s ease, transform .35s ease; } .mobile-burger:hover{ border-color:var(--champagne); background:color-mix(in srgb, var(--champagne) 10%, transparent); } .mobile-burger span:not(.mobile-burger__label){ width:17px; height:1px; background:currentColor; display:block; transform-origin:center; transition:transform .35s ease, opacity .35s ease; } .mobile-burger__label{ font-size:8px; letter-spacing:0.14em; font-weight:600; color:var(--fg-mute); line-height:1; margin-top:2px; transition:color .35s ease; font-family:var(--sans); } .mobile-burger:hover .mobile-burger__label{color:var(--champagne);} .mobile-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(38deg);} .mobile-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-38deg);} /* Open state: deboxed × — same borderless family as the desktop header utilities. Icon grows to ~20px, label hides (aria-label still names the button). */ .mobile-burger[aria-expanded="true"]{ border-color:transparent; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } .mobile-burger[aria-expanded="true"] span:not(.mobile-burger__label){ width:20px; height:2px; } .mobile-burger[aria-expanded="true"] .mobile-burger__label{display:none;} .mobile-burger[aria-expanded="true"]:hover{ border-color:transparent; background:transparent; color:var(--champagne); } [dir="rtl"] .mobile-burger__label{ font-size:10px; letter-spacing:0;} /* Compact dropdown panel */ .mobile-menu{ position:fixed; top:calc(var(--header-height,72px) - 4px); right:20px; width:min(300px, calc(100vw - 32px)); z-index:200; display:flex; flex-direction:column; background:var(--bg); border:1px solid color-mix(in srgb,var(--fg) 16%,transparent); transform:translateY(-6px); opacity:0; visibility:hidden; transition:transform .18s ease,opacity .18s ease,visibility 0s linear .18s; } [data-palette="ivory"] .mobile-menu, [data-palette="oyster"] .mobile-menu{border-color:rgba(0,0,0,0.13);} [dir="rtl"] .mobile-menu{right:auto;left:20px;} .mobile-menu.is-open{ transform:translateY(0); opacity:1; visibility:visible; transition:transform .18s ease,opacity .18s ease; } @media (max-width:900px){ .mobile-menu{top:62px;} } .mobile-menu__head{display:none;} .mobile-menu__nav{ display:flex;flex-direction:column; } .mobile-menu__nav a{ font-family:var(--sans); font-size:15px; /* a step up from the 13px label size */ font-weight:400; letter-spacing:var(--track-en); text-transform:uppercase; color:var(--fg); /* full-contrast resting links; active stays bold (600) */ display:block; text-align:start; /* one clean vertical on the inline-start edge (RTL-aware) */ padding:16px 22px; transition:color .15s ease; } /* hairline dividers between items — the site's var(--rule) vocabulary */ .mobile-menu__nav a + a{border-top:1px solid var(--rule);} [dir="rtl"] .mobile-menu__nav a{letter-spacing:0;text-transform:none;font-size:16px;} /* site-standard champagne hover, same as fields/rows/nav */ .mobile-menu__nav a:hover{color:var(--champagne);background:transparent;} .mobile-menu__nav a.is-active{color:var(--fg);font-weight:600;} .mobile-menu__controls{ display:flex;align-items:center; justify-content:space-between; /* EN/HE at the start edge, bulb at the end — room to breathe */ border-top:1px solid var(--rule); padding:10px 22px; } /* ── Header: full nav on desktop, logo + burger on mobile ───────────────────── */ .header__meta{display:none!important;} @media (max-width:900px){ .header__nav, .header__theme{display:none!important;} .header{display:flex!important;align-items:center;} .mobile-burger{display:flex;margin-inline-start:auto;} } @media (max-width:900px){ .header{height:58px;padding:0 20px;} .header__logo{white-space:nowrap;flex-shrink:0;} .header__logo img{height:42px;width:auto;} } .footer__he{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.7;} /* Footer body text */ .footer__col ul { font-size: 14px; line-height: 1.7; } .footer__col h4 { font-size: var(--type-body); font-weight: 400; } /* ───────────────────────────────────────────── RTL overrides — applied when html[dir="rtl"] Most grid / flex layouts reverse automatically; these handle hardcoded physical margin/padding. ───────────────────────────────────────────── */ [dir="rtl"] .hero__content { padding-left: 0; padding-right: 0px; } [dir="rtl"] .archive__arrow { display: inline-block; transform: scaleX(-1); } [dir="rtl"] .archive__row:hover .archive__arrow { transform: scaleX(-1) translateX(4px); } [dir="rtl"] .archive__card-overlay { padding-left: 20px; padding-right: 20px; } [dir="rtl"] .contact-left { border-right: none; border-left: 1px solid var(--rule); } [dir="rtl"] .field__arrow { display: none; transform: scaleX(-1); } [dir="rtl"] .exrow__arrow { display: inline-block; transform: scaleX(-1); } /* Footer: Hebrew tagline — drop Latin uppercase/tracking, nudge size up */ [dir="rtl"] .footer__brand p { letter-spacing: 0; text-transform: none; font-size: 14px; } /* Hebrew: suppress uppercase tracking and case-transform on UI chrome */ [dir="rtl"] .header__meta, [dir="rtl"] .theme-toggle, [dir="rtl"] .lang-switch, [dir="rtl"] .footer__base, [dir="rtl"] .selected__all, [dir="rtl"] .manifesto__meta, [dir="rtl"] .cta { letter-spacing: 0; text-transform: none; } /* Hebrew headings: remove negative letter-spacing (Latin optical fix, meaningless in Hebrew) */ [dir="rtl"] .hero__title, [dir="rtl"] .fields__title, [dir="rtl"] .archive__title, [dir="rtl"] .detail__title, [dir="rtl"] .section-title, [dir="rtl"] .exrow__name, [dir="rtl"] .field__name, [dir="rtl"] .proj-row__name, [dir="rtl"] .archive__name, [dir="rtl"] .archive__preview-name, [dir="rtl"] .manifesto__quote, [dir="rtl"] .detail__lede, [dir="rtl"] .expertise__title { letter-spacing: 0; } [dir="rtl"] .footer__col h4 { letter-spacing: 0; } /* Dropdown controls — same lightweight family as the desktop header (no boxes). 44px touch target kept; no text-shadow since the menu bg is solid. */ .mobile-menu__controls .lang-switch, .mobile-menu__controls .theme-toggle{ flex:0 0 auto; min-height:44px; /* natural width; the row's space-between does the layout */ text-shadow:none; font-size:13px; } /* In the menu the bulb sits on the solid menu bg, not the dark hero — full contrast. */ .mobile-menu__controls .theme-toggle__dot{ background-color:var(--fg); filter:none; } [dir="rtl"] .mobile-menu__controls .lang-switch, [dir="rtl"] .mobile-menu__controls .theme-toggle{ letter-spacing:0; }