. Remove that class to get the split hero back; every rule here is scoped to it and the .hero* rules above are untouched. Applies at EVERY width: full-bleed photo (cover, centred) under a flat 65% navy layer, white text centred over it at every width. The old .hero-media is display:none under the class; the hero keeps the old media height (640 / 340 / 240) as a minimum so the text can never be clipped. ---- */ .hero--photo { position: relative; max-width: none; isolation: isolate; overflow: hidden; min-height: 640px; justify-content: center; /* desktop: the old media height */ } /* Photo layer = crossfade slideshow (.hero-slides, z 0). homepage.js moves .is-active every 6s; opacity crossfades over 1.5s. The active slide zooms 1 -> 1.08 over its 6s (animation restarts each time the class is re-added); .is-leaving holds the outgoing slide at 1.08 while it fades so nothing snaps. The navy ::after and the text above never change. */ .hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform-origin: center; transition: opacity 1.5s ease; } .hero-slide--1 { background-image: url("assets/hero-wide.jpg"); } .hero-slide--2 { background-image: url("assets/hero-2.jpg"); } .hero-slide--3 { background-image: url("assets/hero-3.jpg"); } .hero-slide.is-active { opacity: 1; animation: hero-zoom 6s ease-out 1 forwards; } .hero-slide.is-leaving { transform: scale(1.08); } .hero-slides.is-paused .hero-slide { animation-play-state: paused; } /* tab hidden */ .hero--photo::after { /* navy layer */ content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(18, 33, 63, .65); /* --navy #12213F at 65% */ } .hero--photo .hero-media { display: none; } /* old : hidden by the class, not removed */ /* Text fades up on load: title, then subtitle 120ms later (no CTA exists in the hero). */ .hero--photo .hero-content h1, .hero--photo .hero-sub { animation: hero-text-in .6s ease-out both; } .hero--photo .hero-sub { animation-delay: 120ms; } @keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } } @keyframes hero-text-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { /* First image only, static: no crossfade, no zoom (beats the JS-toggled classes). */ .hero-slide { opacity: 0 !important; transform: none !important; animation: none !important; transition: none !important; } .hero-slide--1 { opacity: 1 !important; } .hero--photo .hero-content h1, .hero--photo .hero-sub { animation: none; } .hero-intro { display: none; } /* intro: never built by JS either */ } .hero--photo .hero-content { position: relative; z-index: 2; color: var(--white); background: transparent; /* beats the <=768px .hero-content white panel (0,1,0) */ width: 100%; align-items: center; text-align: center; /* block centred, lines centred, dir stays rtl */ padding: 48px var(--gut); } @media (max-width: 1100px) { .hero--photo { min-height: 340px; } /* tablet: old media height */ .hero--photo .hero-content { padding: 48px 32px; } } @media (max-width: 768px) { .hero--photo { min-height: 240px; } /* phone: old media height */ .hero--photo .hero-content { padding: 40px 20px; } } /* ---- Hero intro (homepage only). homepage.js builds .hero-intro inside .hero--photo - a navy layer above the photo and text (z 3, pointer-events none: header and scrolling work throughout) holding a white clone of the header logo (.hero-intro-logo = the 49.702 x 59.445 .logo-mark box scaled to 220px / 160px, children placed in %). Built by JS only, so with no JS the hero is simply normal; once per browser session; reduced motion: never built. Timeline: 0-.7s mark draws, .5-1.2s wordmark draws (stroke 1.5px white - .34 user units at the 4.43x desktop scale, .47 at the 3.22x phone scale), mark un-rotates 20deg -> 0 over 0-1.2s; 1.2-1.5s white fill in / stroke out; hold; 2.0-2.7s the overlay fades out and JS removes it. .is-intro on the hero delays the text fade-up to 2.4s (subtitle 2.52s). */ .hero-intro { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: #12213F; pointer-events: none; animation: hero-intro-out .7s ease-in-out 2s both; } .hero-intro-logo { position: relative; display: block; width: 220px; height: 263.1px; --s0: 1.6; transform-origin: 50% 50%; /* starts 1.6x (1.35x on phones), shrinks to 1x over the draw */ animation: hero-intro-scale 1.5s ease-out both; } .hero-intro-logo .logo-bldg { position: absolute; left: 21.99%; top: 0; width: 54.33%; height: 67.29%; transform-origin: 50% 50%; animation: hero-intro-unrotate 1.2s ease-in-out both; } .hero-intro-logo .logo-word { position: absolute; left: 0; top: 79.38%; width: 100%; height: 20.62%; } .hero-intro-logo path { fill: transparent; stroke: #fff; stroke-width: .34; stroke-linejoin: round; stroke-dasharray: 1; animation: hero-intro-draw .7s ease-in-out both, hero-intro-fill .3s ease-in-out 1.2s both; } .hero-intro-logo .logo-word path { animation-delay: .5s, 1.2s; } .hero--photo.is-intro .hero-content h1 { animation-delay: 2.4s; } .hero--photo.is-intro .hero-sub { animation-delay: 2.52s; } @keyframes hero-intro-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes hero-intro-fill { from { fill: transparent; stroke-opacity: 1; } to { fill: #fff; stroke-opacity: 0; } } @keyframes hero-intro-unrotate { from { transform: rotate(20deg); } to { transform: rotate(0deg); } } @keyframes hero-intro-out { from { opacity: 1; } to { opacity: 0; } } @keyframes hero-intro-scale { from { transform: scale(var(--s0)); } to { transform: scale(1); } } @media (max-width: 768px) { .hero-intro-logo { width: 160px; height: 191.4px; --s0: 1.35; } .hero-intro-logo path { stroke-width: .47; } } /* ================================ INTRO ================================= */ .intro { background: var(--white); padding: 32px var(--gut) 54px; } .intro-inner { max-width: 1280px; margin: 0 auto; text-align: center; } .eyebrow { font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--blue); } .eyebrow-en { font-size: 24px; } .intro-title { font-family: var(--font-display); font-size: 60px; font-weight: 800; line-height: 1.15; color: var(--navy); margin-top: 16px; } .intro-body { font-size: 20px; font-weight: 500; line-height: 1.58; color: var(--ink); margin-top: 8px; } /* =============================== PROJECTS =============================== */ .projects { background: var(--tint-faint); padding: 32px var(--gut) 120px; } .projects-inner { max-width: 1280px; margin: 0 auto; } /* board: "פרוייקטים נוספים" on the left, section title on the right */ .projects-head { direction: ltr; display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; } .projects-title-wrap { direction: rtl; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .section-title { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1.15; color: var(--navy); text-align: right; } .title-rule { display: block; width: 98.934px; height: 5px; background: var(--blue); } /* Homepage project grid: four equal .pcard links - one row of four from 1100px (grid capped at 1192px so each card is ~280px wide, image ~350px tall), two columns on tablet, one centred column capped at 360px on phones. Cards align to the top so a two-line description never shifts the row. 4:5 image frame (cover, clipped, 8px radius), no gradient, no badge; text under it on the section background. Hover/focus: image 1.04 + 35% navy veil with "לפרוייקט". (The .cards/.card rules below stay for the project pages' "פרוייקטים נוספים" rows.) */ .pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; } /* tablet default */ @media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1192px; } } /* RTL: box starts at the right edge */ .pcard { display: block; color: inherit; } .pcard-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint); } .pcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .pcard-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(18, 33, 63, .35); color: var(--white); font-size: 18px; font-weight: 700; opacity: 0; transition: opacity .3s ease; } .pcard:hover .pcard-media img, .pcard:focus-visible .pcard-media img { transform: scale(1.04); } .pcard:hover .pcard-hover, .pcard:focus-visible .pcard-hover { opacity: 1; } .pcard-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 16px; text-align: right; } /* RTL: flex-start = right */ .pcard-name { font-size: 18px; font-weight: 700; color: var(--navy); } .pcard-place { font-size: 14px; color: var(--muted); } .pcard-desc { font-size: 14px; color: var(--navy); line-height: 1.5; } /* may wrap to two lines */ .pcard-status { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--blue); } /* small label style */ /* Four-project editorial grid: 2 equal columns, LTR so DOM order = physical order (Shmuel, Hadassah, Galil Yam, Ben Yehuda 47 read top-left -> bottom-right). One uniform height keeps the 2x2 balanced; a four-card masonry reads as broken rather than deliberate, and the imagery stays large at ~624px per card. */ .cards { direction: ltr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; } .card { position: relative; min-width: 0; overflow: hidden; display: block; background: var(--white); transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 33, 63, .14); } /* one height for the whole grid; (0,2,0) beats the per-project modifiers */ .cards > .card { height: 430px; } .card--galil { border: 1px solid rgba(18, 33, 63, .08); } .card-media { position: absolute; inset: 0; display: block; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; } /* Staging scrim: the top two thirds of the photo sit under a flat 10% black (never fully transparent); the ramp to 85% runs inside the bottom third and lands at 88.197%, the same point where the previous design's black bar began, so the text block (bottom 8px, 132px tall) still rests on the darkest band. */ .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .10) 66.667%, rgba(0, 0, 0, .85) 88.197%, rgba(0, 0, 0, .85) 100%); } /* Hover motion (300ms ease): the photo zooms 1.05 inside the clipped card, the scrim lightens a little, the arrow nudges 8px left. The wrapper is scaled rather than the so the reveal's img rules keep their specificity untouched. */ .card-media { transition: transform .3s ease; transform-origin: center; } .card-media::after { transition: opacity .3s ease; } .card .arrow { transition: transform .3s ease; } .card:hover .card-media { transform: scale(1.05); } .card:hover .card-media::after { opacity: .85; } .card:hover .arrow { transform: translateX(-8px) scaleX(-1); } /* base .arrow is scaleX(-1) */ .card-text { direction: ltr; /* block hugs the card's left edge */ position: absolute; left: 0; bottom: 8px; width: 353px; max-width: 100%; height: 132px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 23px 22px; color: var(--white); text-shadow: 0 16px 4px rgba(0, 0, 0, .25); } .card-region { font-size: 28px; font-weight: 700; white-space: nowrap; } .card-title { font-size: 16px; font-weight: 400; white-space: nowrap; } /* = .nav-link 16px (was 24px) */ /* ========================== PROJECT-PAGE GALLERY ========================== */ /* Shared by projects/*/index.html (one rule set; the page stylesheets carry none). Tiles reuse .card/.card-media but show the photo clean: the homepage cards' scrim (.card-media::after) is switched off here, at rest and on hover, and the only hover effect is the photo scaling 1.04 inside its clipped frame (.card-media already transitions transform .3s ease; .card is overflow:hidden). */ .gallery-section { background: var(--white); padding: 64px var(--gut) 72px; } .gallery-inner { max-width: 1280px; margin: 0 auto; } .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .gallery .card { height: 300px; margin: 0; border: 0; } .gallery .card-media::after { display: none; } /* no gradient overlay */ .gallery .card:hover { transform: none; box-shadow: none; } /* no lift, shadow or border */ .gallery .card:hover .card-media { transform: scale(1.04); } /* the one hover effect */ @media (min-width: 1101px) { .gallery-section { padding-top: 50px; padding-bottom: 50px; } } /* 100px rhythm */ @media (max-width: 1100px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .gallery .card { height: 240px; } .gallery-section { padding: 48px var(--gut) 56px; } } @media (max-width: 768px) { .gallery { grid-template-columns: minmax(0, 1fr); gap: 18px; } .gallery .card { height: 220px; } .gallery-section { padding: 40px var(--gut) 44px; } } /* ========================== PROJECT-PAGE LOCATION ========================= */ /* Shared rules for the project pages' "המיקום" section (projects/hadassah/ today). Light band; inside the content width an RTL grid: text column right (title, "בסביבה", one pin item per line), map card left (~55%). Self-hosted Leaflet with OpenStreetMap tiles, greyed by a filter on the tile pane only so the pin keeps its colour. Mobile: title, list, then the map. */ .location { background: var(--tint-faint); padding: 56px var(--gut); } .location-inner { max-width: 1280px; margin: 0 auto; } .location-grid { display: grid; grid-template-columns: 45fr 55fr; gap: 48px; align-items: center; } .location-text .projects-title-wrap { margin-bottom: 24px; } .location-sub { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--blue); } .location-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .location-list li { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.5; color: var(--navy); } .location-list .pin { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue); } .location-map { /* white card */ margin: 0; padding: 12px; background: var(--white); overflow: hidden; box-shadow: 0 8px 24px rgba(18, 33, 63, .08); } .location-canvas { height: 300px; background: var(--tint-faint); } /* blank if Leaflet never loads */ .location-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.05) opacity(.9); } /* light look; marker pane untouched */ /* Leaflet chrome, restyled to the site: white +/- buttons with blue glyphs, small grey attribution */ .location-map .leaflet-control-zoom { border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(18, 33, 63, .14); } .location-map .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 34px; background: var(--white); color: var(--blue); font-weight: 700; border-bottom: 1px solid var(--line); } .location-map .leaflet-control-zoom a:last-child { border-bottom: 0; } .location-map .leaflet-control-zoom a:hover { background: var(--tint); color: var(--blue-dark); } .location-map .leaflet-control-attribution { font-size: 10px; color: var(--muted); background: rgba(255, 255, 255, .85); } .location-map .leaflet-control-attribution a { color: var(--muted); } @media (min-width: 769px) and (max-width: 1100px) { .location-grid { gap: 32px; } .location-canvas { height: 240px; } } @media (max-width: 768px) { .location { padding: 40px var(--gut); } .location-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } /* title, list, then the map */ .location-list li { font-size: 16px; } .location-canvas { height: 220px; } } /* =============================== SERVICES =============================== */ .services { background: var(--white); padding: 64px var(--gut) 72px; } .services-inner { max-width: 1296px; margin: 0 auto; } .services-title { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1.15; color: var(--navy); text-align: center; margin-bottom: 56px; } /* Source order is semantic 01->04. direction:rtl places the first child (01) at the RIGHT, which reproduces the approved desktop appearance (reading 01,02,03,04 from the right) without reversing the DOM. The column layout below is unaffected by direction, so mobile stacks 01..04 top-to-bottom from the same source order. */ .steps { direction: rtl; display: flex; justify-content: center; align-items: stretch; gap: 32px; list-style: none; } /* equal-height columns */ .step { direction: rtl; width: 300px; flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; /* was flex-end */ padding: 32px; text-align: center; /* was right */ } /* design: Playfair Display Regular 67px, rgba(58,97,244,.5) */ .step-num { font-family: var(--font-num); font-size: 67px; font-weight: 400; line-height: 1; color: rgba(58, 97, 244, .5); } .step-title { font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--blue); } .step-body { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--muted); white-space: pre-wrap; } .step-icon { align-self: center; margin-top: auto; display: block; width: 97.793px; height: 95.999px; } /* auto margin: icon sits at the column's bottom, so all four share a baseline */ .step-icon img { width: 100%; height: 100%; object-fit: contain; } /* ============================ PARALLAX BAND ============================= */ /* Quiet full-bleed image break between services and about. The media layer is oversized and moved by homepage.js (translate3d, rAF) at 0.4x scroll speed; the default (no JS / .band--static for reduced motion + iOS Safari) is a plain static cover image. Navy at 20% on top (the night photo is already dark); text slot reserved (see index.html). */ .band { --band-h: 420px; position: relative; width: 100%; height: var(--band-h); overflow: hidden; isolation: isolate; margin: 48px 0 0; background: var(--navy); /* no bottom margin: touches the next section */ display: flex; align-items: center; justify-content: center; } /* centres .band-text */ .band-media { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 0; /* JS sets top/height when active */ background-image: url("assets/parallax-night.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; } .band-media::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(18, 33, 63, .20); } /* navy 20% inside the media layer: covers the band, sits under the stars */ .band--static .band-media { top: 0 !important; height: 100% !important; transform: none !important; } /* Sparkle stars. .band-stars is positioned by homepage.js to the exact box the photo paints under background-size: cover, so a star's left/top % are IMAGE percentages - each of the 8 positions was pixel-verified on clear sky. The layer rides the parallax (inside .band-media) and sits above the navy layer (z 1 vs ::after z 0). At rest: a 2px white dot at .55 - nothing else. Sparkle (1000ms, fixed in the keyframes: cycles 6s --a/--b and 7s --c, phases --delay scheduled so at most two stars sparkle at once): the dot goes to 1, a 20px radial glow (::before) scales in, and four tapered rays (::after: one concave 4-point polygon, 18px reach, points at the tips) scale out with a 15deg turn, then everything folds back. Only opacity and transform animate. */ .band-stars { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .band-star { position: absolute; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%; background: #fff; opacity: .55; will-change: opacity; animation: sparkle-dot-a 6s ease-in-out infinite; animation-delay: var(--delay, 0s); } .band-star::before { /* soft glow: 10px radius, white -> transparent */ content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transform: scale(0); will-change: opacity, transform; animation: sparkle-glow-a 6s ease-in-out infinite; animation-delay: var(--delay, 0s); } .band-star::after { /* four tapered rays, ~18px each */ content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: #fff; clip-path: polygon(50% 0%, 53% 47%, 100% 50%, 53% 53%, 50% 100%, 47% 53%, 0% 50%, 47% 47%); opacity: 0; transform: scale(0) rotate(0deg); will-change: opacity, transform; animation: sparkle-rays-a 6s ease-in-out infinite; animation-delay: var(--delay, 0s); } .band-star--c { animation-duration: 7s; animation-name: sparkle-dot-c; } .band-star--c::before { animation-duration: 7s; animation-name: sparkle-glow-c; } .band-star--c::after { animation-duration: 7s; animation-name: sparkle-rays-c; } /* 1000ms sparkle = 16.667% of 6s (peak 8.333%) and 14.286% of 7s (peak 7.143%). */ @keyframes sparkle-dot-a { 0% { opacity: .55; } 8.333% { opacity: 1; } 16.667%, 100% { opacity: .55; } } @keyframes sparkle-glow-a { 0% { opacity: 0; transform: scale(0); } 8.333% { opacity: 1; transform: scale(1); } 16.667%, 100% { opacity: 0; transform: scale(0); } } @keyframes sparkle-rays-a { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 8.333% { opacity: 1; transform: scale(1) rotate(15deg); } 16.667%, 100% { opacity: 0; transform: scale(0) rotate(15deg); } } @keyframes sparkle-dot-c { 0% { opacity: .55; } 7.143% { opacity: 1; } 14.286%, 100% { opacity: .55; } } @keyframes sparkle-glow-c { 0% { opacity: 0; transform: scale(0); } 7.143% { opacity: 1; transform: scale(1); } 14.286%, 100% { opacity: 0; transform: scale(0); } } @keyframes sparkle-rays-c { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 7.143% { opacity: 1; transform: scale(1) rotate(15deg); } 14.286%, 100% { opacity: 0; transform: scale(0) rotate(15deg); } } /* Title: same type as .step-title (body font, 26/700/1.58) in white, centred by the band's flex box, z 2 above the media (photo, navy, stars). In flow, not transformed, so the parallax (on .band-media only) never moves it; [data-reveal] fades it up. */ .band-text { position: relative; z-index: 2; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--white); text-align: center; white-space: nowrap; } /* ================================ ABOUT ================================= */ .about { background: var(--tint); padding: 64px var(--gut) 56px; } .about-inner { max-width: 1280px; margin: 0 auto; } .about-title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.25; color: var(--navy); text-align: center; margin-bottom: 13px; } .about-body { font-size: 24px; font-weight: 400; line-height: 1.4; color: var(--navy); text-align: right; padding: 48px; } /* Title -> paragraph: the intro and about pairs share one gap (50px, box to box) and one paragraph line-height (1.5) at every width. (0,2,0) selectors so the per-breakpoint .intro-body / .about-body font rules cannot re-open the gap; the title's own bottom margin and the paragraph's top padding are zeroed. */ .intro-title + .intro-body, .about-title + .about-body { margin-top: 50px; line-height: 1.5; } .about-inner > .about-title { margin-bottom: 0; } .about-inner > .about-body { padding-top: 0; } /* =============================== CONTACT ================================ */ .contact { background: var(--white); padding: 42px var(--gut); } .contact-card { width: 978px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 23px; padding: 25px 48px; border: 0; background: var(--white); } .contact-head { display: flex; flex-direction: column; align-items: center; gap: 8px; } .contact-title { font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--blue); text-align: center; } .contact-sub { font-size: 15px; font-weight: 400; color: var(--ink); text-align: center; } .field { position: relative; } .field-row { direction: ltr; display: flex; gap: 20px; } /* email left, phone right */ .field-row .field { flex: 1 1 0; min-width: 0; } .field input, .field select, .field textarea { width: 100%; height: 48px; padding: 0 16px; border: 0; border-bottom: 2px solid rgba(18, 33, 63, .33); background: var(--white); border-radius: 0; font: inherit; font-size: 14px; font-weight: 400; color: var(--navy); direction: rtl; text-align: right; } .field textarea { height: 118px; padding: 14px 16px; resize: vertical; line-height: 1.6; } .field select { appearance: none; cursor: pointer; } .field ::placeholder { color: var(--navy); opacity: 1; } .field--area ::placeholder { color: #96a6be; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--blue); } .field--select .chev { position: absolute; left: 16px; top: 17px; width: 14px; height: 14px; pointer-events: none; } .consent { direction: ltr; /* text left, checkbox right */ display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; } .consent-text { direction: rtl; flex: 1 1 auto; cursor: pointer; font-size: 12px; line-height: 1.55; color: var(--navy); text-align: right; } .consent-text a { color: var(--blue); text-decoration: underline; } .consent-text a:hover { color: var(--blue-dark); } .consent input { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); border-radius: 3px; } .submit-row { display: flex; justify-content: center; } .submit { width: 169px; cursor: pointer; font-family: inherit; line-height: inherit; } /* visuals: see .nav-cta, .submit */ .submit[disabled] { opacity: .6; cursor: default; } .form-status { text-align: center; font-size: 14px; min-height: 18px; } .form-status.ok { color: #15803d; } .form-status.err { color: #b91c1c; } /* ================================ FOOTER ================================ */ /* Shared footer (partials/footer.html, injected by homepage.js): one navy band with a single RTL row - logo at the right edge, four links exactly centred (1fr auto 1fr), social icon(s) at the left edge - then a 15%-white rule and the centred legal line. */ .foot { background: var(--navy); color: var(--white); } .foot-inner { max-width: 1280px; margin: 0 auto; padding: 40px var(--gut) 0; } .foot-row { direction: rtl; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; } .foot-logo-img { display: block; height: 70px; width: auto; justify-self: start; } /* RTL grid: right edge; 40px x 1.3 x 1.35 */ .foot-nav { direction: rtl; display: flex; align-items: center; gap: 32px; } .foot-nav a { font-size: 15px; color: var(--white); white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color .15s; } .foot-nav a:hover { text-decoration-color: var(--white); } .foot-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; justify-self: end; } /* RTL grid: left edge */ .foot-social a { display: inline-flex; color: var(--white); opacity: .85; transition: opacity .15s; } .foot-social a:hover { opacity: 1; } .foot-social svg { width: 22px; height: 22px; display: block; } .foot-rule { height: 1px; background: rgba(255, 255, 255, .15); margin-top: 40px; } .foot-legal { margin: 0; padding: 20px 0; text-align: center; font-size: 13px; line-height: 1.8; color: var(--white); opacity: .6; } .foot-legal a { color: var(--white); text-decoration: underline; margin-inline-start: 12px; } /* ====================== STAGING: 100px SECTION RHYTHM (desktop) ====================== Desktop only (>1100px); the tablet/mobile blocks below keep their own spacing. Every visible gap between consecutive content blocks, hero -> contact, is 100px. Sections split the gap 50/50 so a tinted band (projects, about) extends evenly 50px above and below its content. The hero has no bottom padding (its image is the edge), so intro carries the full 100px on top. Invisible inner padding that used to leak into a gap (.step 32px, .about-body 48px) is zeroed at the bottom. contact's bottom padding (-> footer) is out of scope and unchanged. */ @media (min-width: 1101px) { .intro { padding-top: 100px; padding-bottom: 50px; } .projects { padding-top: 50px; padding-bottom: 50px; } .services { padding-top: 50px; padding-bottom: 50px; } .about { padding-top: 50px; padding-bottom: 50px; } .contact { padding-top: 50px; } .band--parallax { margin: 50px 0 0; } /* 50 + services' 50 = 100px above; flush below */ .step { padding-bottom: 0; } .about-body { padding-bottom: 0; } /* Section titles (Figma): Assistant Bold 42px / 115%, tracking 0. One shared rule; colour, alignment, margins and dir stay with each title's own rule. Only the hero h1 is excluded. */ .eyebrow, .intro-title, .section-title, .services-title, .about-title, .contact-title { font-family: var(--font-display); font-weight: 700; font-size: 42px; line-height: 1.15; letter-spacing: 0; } .eyebrow-en { font-size: inherit; } /* "DIROT" inside the intro title follows the 42px */ /* "אנחנו DIROT" steps down from the shared 42px (DIROT span inherits); "פרוייקטים נוספים" reuses the same rule so the two always match. */ .eyebrow { font-size: 24px; } /* 3. "טופס תיאום פגישה": navy like the other section titles (was --blue). */ .contact-title { color: var(--navy); } /* 4. Contact form text x1.15 (title excluded). Unitless line-heights scale with the text; box heights grow by the same factor so nothing clips. Labels are .sr-only (visually hidden) and need no change. */ .contact-sub { font-size: 17.25px; } /* 15 -> 17.25 */ .field input, .field select, .field textarea { font-size: 16.1px; height: 55px; } /* 14 -> 16.1, 48 -> 55 */ .field textarea { height: 136px; } /* 118 -> 136 */ .field--select .chev { top: 20.5px; } /* re-centred in the 55px field */ .consent-text { font-size: 13.8px; } /* 12 -> 13.8 */ .form-status { font-size: 16.1px; min-height: 21px; } /* 14 -> 16.1, 18 -> 21 */ /* Body paragraphs at 22.4px. Weight and colour stay with each base rule (.intro-body 500 / --ink, .about-body 400 / --navy). */ .intro-body { font-size: 22.4px; } /* base 20px; was 32px. Line-height: shared rule in base */ .about-body { font-size: 22.4px; } /* base 24px; was 32px. Line-height: shared rule in base */ /* Hero title at 80% of the base clamp (54..72px -> 43.2..57.6px); line-height 1.05 is unitless so the two lines scale together. */ .hero-content h1 { font-size: clamp(43.2px, calc(4.248vw - 3.568px), 57.6px); } /* "מחברים בין אנשים, מקומות והזדמנויות." on one line: the
stays in the HTML for tablet/mobile and is hidden here. .intro-inner is 1280px wide at 1440px. */ .intro-title br { display: none; } /* ---- Projects section: mockup layout (projects-mockup.png) as a carousel. .cards is a flex track inside an overflow-hidden viewport; three cards visible (405px on 30px gaps in the 1280px column). The card in the third visible slot carries .is-short (415px, 70px lower) - homepage.js moves that class as the track rotates, and height/margin transition with the 400ms slide. Hover = 2px blue border (transparent by default so nothing shifts). Thin chevron buttons sit in the gutters, vertically centred on the row. Cards enter via the generic [data-reveal] build, exactly like the services icons. ---- */ .cards-carousel { position: relative; } .cards-viewport { overflow: hidden; } .cards { display: flex; gap: 30px; align-items: flex-start; transition: transform .4s cubic-bezier(.22, 1, .36, 1); } .cards > .card { flex: 0 0 calc((100% - 60px) / 3); height: 490px; margin-top: 0; border: 2px solid transparent; /* opacity/transform = the generic reveal's own timing (see .reveal-on [data-reveal]), with its stagger delay; the carousel/hover properties get no delay. */ transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), border-color .18s ease, height .4s ease, margin-top .4s ease; transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms; } /* The icons have no image settle; drop the cards' extra 1.5% zoom so they match exactly. */ .reveal-on .card[data-reveal] .card-media img { transform: none; transition: none; } .cards > .card.is-short { height: 415px; margin-top: 70px; } .card:hover { transform: none; box-shadow: none; border-color: var(--blue); } .card-text { bottom: 0; } } @media (prefers-reduced-motion: reduce) { /* Carousel: the track and the slot morph jump instead of sliding (the reveal itself is already neutralised by the generic reduced-motion block above). */ .cards, .cards > .card { transition: none !important; } .band-media { transform: none !important; top: 0 !important; height: 100% !important; } /* parallax off */ .band-star { animation: none !important; opacity: .55 !important; } /* static 2px dots */ .band-star::before, .band-star::after { animation: none !important; opacity: 0 !important; transform: scale(0) !important; } /* Hover motion and header compaction switch state instantly. */ .card-media, .card-media::after, .card .arrow, .nav, .nav .logo { transition: none !important; } } /* ========================================================================== TABLET 769 – 1100px (breakpoint + values from the design's index.css) ========================================================================== */ @media (min-width: 769px) and (max-width: 1100px) { :root { --gut: 32px; } .nav { height: var(--nav-h-tablet); } .nav.is-scrolled { height: calc(var(--nav-h-tablet) * .7); } .nav-inner { padding: 0 24px; } .nav-menu { gap: 16px; } .nav-link { font-size: 13px; padding-bottom: 6px; border-bottom-width: 1.5px; } .nav-cta, .submit { padding: 10px 18px; font-size: 13px; } .nav-cta { min-width: 0; } .nav-logo { margin-left: 24px; } .hero { flex-direction: column; } .hero-media { flex: 0 0 auto; width: 100%; height: 340px; } .hero-media img { width: 100%; object-position: center; } .hero-content { width: 100%; padding: 28px 32px; padding-inline-end: 32px; } .hero-content h1 { font-size: 44px; } .hero-sub { font-size: 20px; } .intro { padding: 28px var(--gut) 40px; } .eyebrow { font-size: 20px; } .eyebrow-en { font-size: 19px; } .intro-title { font-size: 40px; } .intro-body { font-size: 17px; } .projects { padding: 28px var(--gut) 72px; } .projects-head { margin-bottom: 40px; } .section-title, .services-title, .about-title { font-size: 34px; } .cards { gap: 20px; } .cards > .card { height: 340px; } .card-text { height: 116px; padding: 18px 16px; } .card-region { font-size: 21px; } .card-title { font-size: 13px; white-space: normal; } /* = tablet .nav-link 13px (was 17px) */ .services { padding: 48px var(--gut) 56px; } .services-title { margin-bottom: 36px; } .steps { gap: 8px; } .step { padding: 16px 8px; flex: 1 1 0; width: auto; } .step-num { font-size: 48px; } .step-title { font-size: 19px; } .band-text { font-size: 19px; } /* = tablet .step-title */ .step-icon { width: 74px; height: 73px; } .about { padding: 48px var(--gut) 44px; } .about-body { font-size: 17px; } .contact { padding: 32px var(--gut); } .contact-card { width: 100%; padding: 24px 28px; } } /* ========================================================================== MOBILE <= 768px (breakpoint + values from the design's index.css) ========================================================================== */ @media (max-width: 768px) { :root { --gut: 20px; } .nav { height: var(--nav-h-mobile); } .nav.is-scrolled { height: calc(var(--nav-h-mobile) * .7); } .nav.is-scrolled .mobile-menu { top: calc(var(--nav-h-mobile) * .7); } /* dropdown follows the shorter bar */ .band { --band-h: 260px; margin: 40px 0 0; } /* parallax band on phones */ .band-text { font-size: 20px; white-space: normal; padding: 0 20px; } /* = mobile .step-title; may wrap */ /* Mobile bar = 3-column grid: CTA (left) | logo (centred) | hamburger (right). Grid keeps the logo dead-centre whatever the side widths, and leaves transform free for the shrink-on-scroll scale. Tag hidden here only; size rules untouched. */ .nav-inner { padding: 0 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-logo { display: inline-flex; margin: 0; justify-self: center; } /* was display:none */ .nav-logo .logo-tag { display: none; } /* Fit the lockup inside the bar: 44px tall in the 64px bar (10px clearance above and below), width follows the mark's 49.702:59.445 ratio and the two SVG parts are scaled by the same 0.7402. Scrolled: bar 45px, mobile scale .82 -> ~36px. */ .nav-logo .logo-mark { max-height: 44px; height: 44px; width: 36.79px; } .nav-logo .logo-bldg { left: 8.09px; width: 19.99px; height: 29.61px; } .nav-logo .logo-word { top: 34.93px; width: 36.79px; height: 9.07px; } .nav.is-scrolled .nav-logo { transform: scale(.82); } .nav-cta { justify-self: start; } .nav-burger { justify-self: end; } .nav-menu { display: none; } /* design hides the desktop menu on mobile */ /* 11px block padding gives the CTA a 44px-tall touch target inside the 64px nav */ .nav-cta, .submit { padding: 11px 16px; font-size: 13px; border-width: 1px; } .nav-cta { order: 1; margin-right: auto; min-width: 0; } .mobile-menu-wrapper { display: contents; } .mobile-menu { display: flex; } .hero { flex-direction: column; } .hero-media { flex: 0 0 auto; width: 100%; height: 240px; } .hero-media img { width: 100%; object-position: center; } .hero-content { width: 100%; padding: 24px 20px; padding-inline-end: 20px; background: var(--white); gap: 16px; } .hero-content h1 { font-size: 30px; line-height: 1.15; } .hero-sub { font-size: 16px; line-height: 1.5; } .intro { padding: 32px var(--gut) 36px; } .eyebrow { font-size: 17px; } .eyebrow-en { font-size: 16px; } .intro-title { font-size: 27px; margin-top: 10px; } .intro-body { font-size: 15px; } .projects { padding: 32px var(--gut) 44px; } .projects-head { margin-bottom: 24px; gap: 10px; } .section-title, .services-title, .about-title { font-size: 26px; } .title-rule { width: 62px; height: 4px; } /* single full-width column on phones */ .pgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pcard { width: 100%; max-width: 360px; margin: 0 auto; } /* one centred column, never wider than 360px */ .cards { grid-template-columns: minmax(0, 1fr); gap: 18px; } .cards > .card { height: 280px; width: 100%; } .card-text { width: 100%; height: 112px; padding: 16px; bottom: 4px; } .card-region { font-size: 20px; } .card-title { font-size: 16px; white-space: normal; } .services { padding: 40px var(--gut) 44px; } .services-title { margin-bottom: 28px; } .steps { flex-direction: column; gap: 26px; } .step { width: 100%; flex: 0 0 auto; padding: 0; } .step-num { font-size: 44px; } .step-title { font-size: 20px; } .step-body { font-size: 14px; } .about { padding: 40px var(--gut) 40px; } .about-body { font-size: 15.5px; line-height: 1.75; } .contact { padding: 24px var(--gut) 40px; } .contact-card { width: 100%; padding: 20px 16px; gap: 18px; } .contact-title { font-size: 21px; } .contact-sub { font-size: 13px; } .field-row { flex-direction: column; gap: 18px; } .submit { width: 100%; } /* Footer on phones: everything centred in one column - logo, links (wrapping), icon(s), rule, legal - 20px between groups, 32px top and bottom. */ .foot-inner { padding: 32px var(--gut) 0; } .foot-row { display: flex; flex-direction: column; align-items: center; gap: 20px; } .foot-nav { flex-wrap: wrap; justify-content: center; gap: 20px; } .foot-rule { margin-top: 20px; } .foot-legal { padding: 20px 0 32px; } } @media (max-width: 360px) { .hero-content h1 { font-size: 26px; } .intro-title { font-size: 24px; } .contact-card { padding: 18px 12px; } }