/* ========================================================================== Derech (דרך) — Design tokens ========================================================================== */ /* Fonts are loaded from index.html instead of @import here: an @import cannot start downloading until this stylesheet has parsed, which serialises two round trips and delays first paint. */ :root{ /* Brand colors — sampled directly from the Derech logo files */ --color-bg: #F2EFE7; --color-bg-alt: #EAE5D5; --color-surface: #FFFFFF; --color-ink: #2A2A24; --color-ink-soft: #5B5A4E; --color-ink-faint: #8A8879; --color-olive: #4A5240; --color-olive-dark: #383F30; --color-olive-pale: #DFE3D3; --color-olive-pale-2: #EEF0E6; --color-terracotta: #93521E; --color-terracotta-dark: #74400F; --color-terracotta-light: #C9834B; --color-terracotta-pale: #EFE0CD; --color-border: #DCD5C0; --color-whatsapp: #2FAE5C; --font-heading: 'Heebo', 'Assistant', sans-serif; --font-body: 'Assistant', 'Noto Sans Hebrew', sans-serif; --font-logo: 'Heebo', 'Assistant', sans-serif; --radius-sm: 10px; --radius-md: 20px; --radius-lg: 32px; --radius-pill: 999px; --shadow-soft: 0 10px 34px rgba(42,42,36,0.09); --shadow-lift: 0 18px 46px rgba(42,42,36,0.14); --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.25rem; --space-5: 3.5rem; --space-6: 5.5rem; --space-7: 8rem; --container-max: 1180px; --ease: cubic-bezier(.25,.8,.25,1); --dur-fast: 180ms; --dur-base: 320ms; } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin: 0; font-family: var(--font-body); background: var(--color-bg); color: var(--color-ink); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; } h1, h2, h3, h4{ font-family: var(--font-heading); font-weight: 800; line-height: 1.25; margin: 0 0 var(--space-2); color: var(--color-ink); letter-spacing: -.015em; } p{ margin: 0 0 var(--space-2); } ul{ margin: 0; padding: 0; list-style: none; } /* Visible only once focused, so keyboard users can jump the nav */ .skip-link{ position: absolute; inset-inline-start: var(--space-3); top: -100px; z-index: 200; background: var(--color-olive); color: #fff; font-weight: 600; padding: .8em 1.4em; border-radius: var(--radius-pill); transition: top var(--dur-fast) var(--ease); } .skip-link:focus{ top: var(--space-3); } :focus-visible{ outline: 3px solid var(--color-olive); outline-offset: 3px; border-radius: 4px; } .container{ max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-3); } @media (min-width: 768px){ .container{ padding-inline: var(--space-4); } } section{ padding-block: var(--space-6); position: relative; } @media (max-width: 640px){ section{ padding-block: var(--space-5); } } .eyebrow{ position: relative; display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; letter-spacing: .14em; color: var(--color-terracotta); font-weight: 600; margin-bottom: var(--space-2); padding-bottom: .5em; } .eyebrow::after{ content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0; background: currentColor; transition: width 900ms var(--ease); } .in-view .eyebrow::after{ width: 100%; } .hero .eyebrow::after{ animation: eyebrowGrow 1200ms var(--ease) 500ms forwards; } @keyframes eyebrowGrow{ from{ width: 0; } to{ width: 100%; } } @media (prefers-reduced-motion: reduce){ .eyebrow::after{ transition: none; animation: none; width: 100%; } } h2.section-title{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); } .section-lede{ max-width: 62ch; color: var(--color-ink-soft); font-size: 1.08rem; } .section-head{ margin-bottom: var(--space-5); } .section-head.center{ text-align: center; margin-inline: auto; } .section-head.center .section-lede{ margin-inline: auto; } /* ========================================================================== Buttons ========================================================================== */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .95em 1.9em; border-radius: var(--radius-pill); font-weight: 600; font-size: 1rem; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; } .btn svg{ width: 1.15em; height: 1.15em; flex-shrink: 0; } .btn:hover{ transform: translateY(-2px); } .btn:active{ transform: translateY(0); } .btn-primary{ background: var(--color-olive); color: #fff; box-shadow: var(--shadow-soft); } .btn-primary:hover{ background: var(--color-olive-dark); box-shadow: var(--shadow-lift); } .btn-whatsapp{ background: var(--color-whatsapp); color: #fff; box-shadow: var(--shadow-soft); } .btn-whatsapp:hover{ background: #24924C; box-shadow: var(--shadow-lift); } .btn-outline{ background: transparent; border-color: currentColor; color: var(--color-ink); } .btn-outline:hover{ background: var(--color-ink); color: var(--color-bg); } .btn-outline.on-dark{ color: #fff; } .btn-outline.on-dark:hover{ background: #fff; color: var(--color-olive-dark); } .btn-terracotta{ background: var(--color-terracotta); color: #fff; box-shadow: var(--shadow-soft); } .btn-terracotta:hover{ background: var(--color-terracotta-dark); box-shadow: var(--shadow-lift); } .btn-sm{ padding: .7em 1.4em; font-size: .92rem; } /* ========================================================================== Header / Nav ========================================================================== */ .site-header{ position: fixed; inset-inline: 0; top: 0; z-index: 100; padding-block: .7rem; background: transparent; box-shadow: none; transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), padding-block var(--dur-base) var(--ease); } .site-header .container{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .site-header.scrolled{ background: rgba(242,239,231,0.96); backdrop-filter: blur(10px); box-shadow: 0 2px 24px rgba(42,42,36,0.1); padding-block: .5rem; } .brand{ display: flex; align-items: center; flex-shrink: 0; gap: .4rem; font-family: var(--font-logo); font-size: 1.6rem; font-weight: 800; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.3); transition: color var(--dur-base) var(--ease), text-shadow var(--dur-base) var(--ease); } .brand img{ height: 34px; width: auto; } .brand-symbol-dark{ display: none; } .site-header.scrolled .brand-symbol-light{ display: none; } .site-header.scrolled .brand-symbol-dark{ display: block; } .site-header.scrolled .brand{ color: var(--color-ink); text-shadow: none; } .nav-links{ display: none; align-items: center; gap: var(--space-4); font-weight: 600; font-size: .98rem; } .nav-links a{ position: relative; padding-block: 4px; white-space: nowrap; color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.3); transition: color var(--dur-fast) var(--ease), text-shadow var(--dur-fast) var(--ease); } .site-header.scrolled .nav-links a{ color: var(--color-ink-soft); text-shadow: none; } .site-header.scrolled .nav-links a:hover{ color: var(--color-ink); } .nav-links a::after{ content: ""; position: absolute; inset-inline-start: 0; bottom: -2px; width: 0%; height: 2px; background: var(--color-terracotta); transition: width var(--dur-base) var(--ease); } .nav-links a:hover{ color: #fff; } .nav-links a:hover::after{ width: 100%; } /* Section you are currently viewing */ .nav-links a[aria-current="true"]{ color: #fff; } .nav-links a[aria-current="true"]::after{ width: 100%; } .site-header.scrolled .nav-links a[aria-current="true"]{ color: var(--color-ink); } /* Nav + header social icons fit on one line at different widths per language: Hebrew needs ~1057px, English ~1103px. Below these the hamburger takes over. */ @media (min-width: 1070px){ html:not([lang="en"]) .nav-links{ display: flex; } html:not([lang="en"]) .header-social{ display: flex; } } @media (min-width: 1120px){ html[lang="en"] .nav-links{ display: flex; } html[lang="en"] .header-social{ display: flex; } } .header-actions{ display: flex; align-items: center; flex-shrink: 0; gap: var(--space-2); } /* Header social icons. Borderless so they stay subordinate to the bordered lang toggle and hamburger, and they invert with the header like the nav links. Hidden below the nav breakpoint so the mobile header stays uncluttered. */ .header-social{ display: none; align-items: center; gap: 2px; } .header-social a{ display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-pill); color: rgba(255,255,255,.92); filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .header-social a svg{ width: 17px; height: 17px; } .header-social a:hover{ background: rgba(255,255,255,.18); } .site-header.scrolled .header-social a{ color: var(--color-ink-soft); filter: none; } .site-header.scrolled .header-social a:hover{ background: rgba(42,42,36,.07); color: var(--color-ink); } .lang-toggle{ display: inline-flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px; background: var(--color-surface); } .lang-toggle button{ border: none; background: transparent; padding: .35em .9em; border-radius: var(--radius-pill); font-weight: 700; font-size: .82rem; cursor: pointer; color: var(--color-ink-soft); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .lang-toggle button.active{ background: var(--color-olive); color: #fff; } .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border); background: var(--color-surface); cursor: pointer; } .nav-toggle svg{ width: 20px; height: 20px; } @media (min-width: 1070px){ html:not([lang="en"]) .nav-toggle{ display: none; } } @media (min-width: 1120px){ html[lang="en"] .nav-toggle{ display: none; } } .mobile-nav{ position: fixed; inset: 0; background: var(--color-bg); z-index: 101; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base); } .mobile-nav.open{ opacity: 1; transform: translateY(0); visibility: visible; } .mobile-nav a{ font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; } .mobile-nav .close-btn{ position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border); background: var(--color-surface); cursor: pointer; } .mobile-nav .close-btn svg{ width: 18px; height: 18px; } /* ========================================================================== Hero ========================================================================== */ .hero{ position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-block-start: 76px; padding-block-end: var(--space-6); overflow: hidden; } .hero-logo-slot{ flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 64px; } .hero-bg{ position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(42,46,34,.35) 0%, rgba(35,38,29,.55) 55%, rgba(28,31,23,.86) 100%), url('../images/garden.jpg'); background-size: cover; background-position: center 65%; } .hero-bg::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(147,82,30,.18), transparent 60%); } .hero .container{ position: relative; z-index: 2; color: #fff; } /* On phones the logo and headline sit close together because the hero is short; give the text some breathing room below the mark. */ @media (max-width: 640px){ .hero .container{ margin-top: var(--space-4); } } .hero .eyebrow{ color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); } .hero-symbol{ height: 168px; width: auto; max-height: 24svh; opacity: 1; filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); } @media (max-width: 640px){ .hero-symbol{ height: 120px; } } .hero h1{ color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 700; max-width: 18ch; margin-bottom: var(--space-2); text-wrap: balance; } /* English headline is longer than the Hebrew one; give it room to stay on a single line wherever the viewport allows. */ html[lang="en"] .hero h1{ max-width: 26ch; } .hero p.lede{ max-width: 52ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.88); margin-bottom: var(--space-4); } .hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-2); } .hero-meta{ display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.22); } .hero-meta div{ display: flex; flex-direction: column; gap: 2px; } .hero-meta strong{ font-family: var(--font-heading); font-size: 1.3rem; } .hero-meta span{ font-size: .84rem; color: rgba(255,255,255,.7); } /* ========================================================================== Intro / About ========================================================================== */ .about{ display: grid; gap: var(--space-5); align-items: center; } @media (min-width: 900px){ .about{ grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .about-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); } .about-media img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; } .about-badge{ position: absolute; bottom: var(--space-3); inset-inline-start: var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: var(--space-2); } .about-badge svg{ width: 30px; height: 30px; color: var(--color-terracotta); flex-shrink: 0; } .about-badge strong{ display:block; font-family: var(--font-heading); font-size: 1.15rem; } .about-badge span{ font-size: .82rem; color: var(--color-ink-soft); } .about-body p:not(.eyebrow){ color: var(--color-ink-soft); font-size: 1.05rem; } .about-actions{ display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .about-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-block: var(--space-4); } .about-stats div{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-2); text-align: center; } .about-stats strong{ display: block; font-family: var(--font-heading); font-size: 1.7rem; color: var(--color-olive); } .about-stats span{ font-size: .82rem; color: var(--color-ink-soft); } /* ========================================================================== Workshops (cards grid) ========================================================================== */ .section-alt{ background: var(--color-bg-alt); } .cards-grid{ display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 640px){ .cards-grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px){ .cards-grid.cols-4{ grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) and (max-width: 1279px){ .cards-grid.cols-5{ grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px){ .cards-grid.cols-5{ grid-template-columns: repeat(5, 1fr); } } .workshop-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: 0 2px 10px rgba(42,42,36,0.04); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); position: relative; overflow: hidden; } .workshop-card.tone-olive{ --accent-color: var(--color-olive); } .workshop-card.tone-terracotta{ --accent-color: var(--color-terracotta); } .workshop-card.tone-ice{ --accent-color: #4E8C86; } .workshop-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; } .workshop-icon{ width: 56px; height: 56px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-color, var(--color-olive)) 12%, var(--color-surface)); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); color: var(--accent-color, var(--color-olive)); transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .workshop-card:hover .workshop-icon{ background: var(--accent-color, var(--color-olive)); color: #fff; } .workshop-icon svg{ width: 28px; height: 28px; } .workshop-card h3{ font-size: 1.2rem; margin-bottom: .4rem; } .workshop-card p{ color: var(--color-ink-soft); font-size: .96rem; margin-bottom: 0; } .badge{ display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3em .75em; border-radius: var(--radius-pill); background: var(--color-terracotta-pale); color: var(--color-terracotta-dark); margin-bottom: var(--space-2); } .workshop-card .badge{ position: absolute; top: var(--space-4); inset-inline-end: var(--space-4); margin-bottom: 0; } /* ========================================================================== Outreach / outdoor workshops (split media + text) ========================================================================== */ .split-section{ display: grid; gap: var(--space-5); align-items: center; } @media (min-width: 900px){ .split-section{ grid-template-columns: 1fr 1fr; gap: var(--space-6); } .split-section.reverse .split-media{ order: 2; } } .split-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); } .split-media img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; } .tag-row{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3) var(--space-4); } .tag-pill{ display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.15em; border-radius: var(--radius-pill); background: var(--color-olive-pale); border: 1px solid #C3CBB2; color: var(--color-olive-dark); font-weight: 600; font-size: .92rem; } .tag-pill svg{ width: 18px; height: 18px; flex-shrink: 0; } /* ========================================================================== Facilitators section ========================================================================== */ .facilitators-grid{ display: grid; gap: var(--space-4); grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; } @media (min-width: 700px){ .facilitators-grid{ grid-template-columns: repeat(2, 1fr); } } .facilitator-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 10px rgba(42,42,36,0.04); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); display: flex; flex-direction: column; } .facilitator-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); } .facilitator-photo{ width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; flex-shrink: 0; } .facilitator-head{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: var(--space-3) var(--space-4); background: var(--color-surface); } .facilitator-head h3{ font-size: 1.2rem; margin-bottom: 0; } .facilitator-ig{ display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border); color: var(--color-ink); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .facilitator-ig svg{ width: 20px; height: 20px; } .facilitator-ig:hover{ background: var(--color-olive); border-color: var(--color-olive); color: #fff; } .facilitator-body{ padding: var(--space-4); padding-top: var(--space-2); background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); flex: 1 1 auto; } .facilitator-body p{ color: var(--color-ink-soft); font-size: .95rem; line-height: 1.6; margin-bottom: var(--space-3); } /* ========================================================================== Community section ========================================================================== */ .community-cta{ margin-top: var(--space-4); text-align: center; } .community-cta-note{ margin: var(--space-2) 0 0; font-size: .92rem; color: var(--color-ink-soft); } .community-grid{ display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 780px){ .community-grid{ grid-template-columns: repeat(3, 1fr); } } .community-card{ border-radius: var(--radius-lg); padding: var(--space-4); color: #fff; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; box-shadow: var(--shadow-soft); } .community-card::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--tint-a, var(--color-olive)) 0%, var(--tint-b, var(--color-olive-dark)) 100%); opacity: .96; } .community-card .card-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 600ms var(--ease); } .community-card:hover .card-img{ transform: scale(1.05); } .card-img--cool{ filter: saturate(.55) hue-rotate(-6deg) brightness(1.08) contrast(1.05); } .community-card::after{ content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(20,22,17,.12) 0%, rgba(20,22,17,.55) 55%, rgba(20,22,17,.86) 100%); } .community-card > h3, .community-card > p{ position: relative; z-index: 3; } .community-card h3{ color: #fff; font-size: 1.3rem; } .community-card p{ color: rgba(255,255,255,.85); font-size: .95rem; margin-bottom: 0; } .community-card.terracotta::before{ --tint-a: var(--color-terracotta); --tint-b: var(--color-terracotta-dark); } .community-card.ink::before{ --tint-a: #4a453c; --tint-b: #2a2a24; } /* ========================================================================== Gallery / Space ========================================================================== */ /* Uniform square tiles. Flex rather than grid so an incomplete final row centres itself and reads as deliberate instead of leaving a hole. */ .gallery-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .gallery-grid figure{ margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-olive-pale-2); aspect-ratio: 1 / 1; flex: 0 0 calc((100% - var(--space-3)) / 2); /* 2 across on phones */ box-shadow: 0 2px 12px rgba(42,42,36,.06); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } /* 6 tiles divide evenly by 3 and by 2, so every breakpoint gives full rows: 3 across from tablet up (2 rows), 2 across on phones (3 rows). */ @media (min-width: 620px){ .gallery-grid figure{ flex-basis: calc((100% - 2 * var(--space-3)) / 3); } } .gallery-grid figure:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); } .gallery-grid img, .gallery-grid video{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease); } .gallery-grid figure:hover img, .gallery-grid figure:hover video{ transform: scale(1.05); } @media (prefers-reduced-motion: reduce){ .gallery-grid figure, .gallery-grid img, .gallery-grid video{ transition: none; } .gallery-grid figure:hover{ transform: none; } .gallery-grid figure:hover img, .gallery-grid figure:hover video{ transform: none; } } .gallery-grid figcaption{ position: absolute; inset-inline-start: 0; bottom: 0; inset-inline-end: 0; padding: var(--space-2); background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); color: #fff; font-size: .82rem; font-weight: 600; } .gallery-soon{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--color-ink-faint); text-align: center; padding: var(--space-2); } .gallery-soon svg{ width: 26px; height: 26px; opacity: .6; } .gallery-soon span{ font-size: .78rem; font-weight: 600; } /* ========================================================================== Rent the space (CTA banner) ========================================================================== */ .rent-promo-text{ margin: 0 0 var(--space-3); color: var(--color-terracotta-dark); font-weight: 700; font-size: 1.15rem; } .rent-details{ display: grid; gap: var(--space-5); padding-top: var(--space-5); margin-top: var(--space-2); border-top: 1px solid var(--color-border); margin-bottom: var(--space-5); } @media (min-width: 860px){ .rent-details{ grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } } .rent-detail h3{ color: var(--color-terracotta); font-size: 1.05rem; margin-bottom: var(--space-2); } .rent-stat-list, .rent-check-list{ display: flex; flex-direction: column; gap: .65rem; } .rent-stat-list li, .rent-check-list li{ font-size: .95rem; color: var(--color-ink-soft); line-height: 1.5; } .rent-stat-list li{ display: flex; flex-direction: column; gap: .2rem; } .rent-stat-list strong{ color: var(--color-terracotta-dark); font-weight: 700; font-size: 1rem; } .rent-check-list li{ display: flex; align-items: flex-start; gap: .6em; } .rent-check-list li::before{ content: ""; width: 16px; height: 16px; margin-top: .2em; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5,10.5 C6,10.5 3,7.5 3,3 C7.5,3 10.5,6 10.5,10.5 Z' fill='%234A5240'/%3E%3Cpath d='M10.5,10.5 C6,10.5 3,7.5 3,3 C7.5,3 10.5,6 10.5,10.5 Z' fill='%234A5240' transform='rotate(90 12 12)'/%3E%3Cpath d='M10.5,10.5 C6,10.5 3,7.5 3,3 C7.5,3 10.5,6 10.5,10.5 Z' fill='%234A5240' transform='rotate(180 12 12)'/%3E%3Cpath d='M10.5,10.5 C6,10.5 3,7.5 3,3 C7.5,3 10.5,6 10.5,10.5 Z' fill='%234A5240' transform='rotate(270 12 12)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } .rent-gallery{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-5); } @media (min-width: 780px){ .rent-gallery{ grid-template-columns: repeat(4, 1fr); } } .rent-gallery img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .rent-cta{ display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); } /* ========================================================================== Contact ========================================================================== */ .contact-grid{ display: grid; gap: var(--space-5); } @media (min-width: 940px){ .contact-grid{ grid-template-columns: .85fr 1.15fr; gap: var(--space-6); } } .contact-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); } .contact-list{ display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); } .contact-list li{ display: flex; align-items: flex-start; gap: var(--space-2); } .contact-list .icon-dot{ width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-olive-pale-2); color: var(--color-olive); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .contact-list a.icon-dot:hover{ background: var(--color-olive); color: #fff; } .contact-list .icon-dot svg{ width: 20px; height: 20px; } .contact-list .icon-dot-group{ display: flex; gap: 8px; flex-shrink: 0; } .contact-list .icon-dot-brand{ background: #fff; border: 1px solid var(--color-border); } .contact-list a.icon-dot-brand:hover{ background: #fff; color: inherit; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(42,42,36,0.12); } .contact-list strong{ display: block; font-size: .95rem; } .contact-list span{ font-size: .92rem; color: var(--color-ink-soft); } .placeholder-note{ font-size: .82rem; color: var(--color-terracotta-dark); background: var(--color-terracotta-pale); padding: .3em .7em; border-radius: var(--radius-sm); display: inline-block; margin-top: 4px; } .social-row{ display: flex; gap: var(--space-2); margin-top: var(--space-4); } .social-row a{ width: 42px; height: 42px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .social-row a svg{ width: 20px; height: 20px; } .social-row a:hover{ background: var(--color-olive); border-color: var(--color-olive); color: #fff; } /* Footer sits on dark olive, so the icons need light strokes */ .site-footer .social-row{ margin-top: var(--space-3); } .site-footer .social-row a{ border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.85); } .site-footer .social-row a:hover{ background: #fff; border-color: #fff; color: var(--color-olive-dark); } form.contact-form{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); } .form-row{ display: grid; gap: var(--space-3); } @media (min-width: 560px){ .form-row.two{ grid-template-columns: 1fr 1fr; } } .field{ display: flex; flex-direction: column; gap: .4em; } .field label{ font-size: .88rem; font-weight: 600; color: var(--color-ink-soft); } .field input, .field textarea, .field select{ border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: .85em 1em; font-family: inherit; font-size: 1rem; background: var(--color-bg); color: var(--color-ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--color-olive); outline: none; box-shadow: 0 0 0 3px rgba(74,82,64,.15); } .field textarea{ resize: vertical; min-height: 120px; } .field select{ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5A4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: left 1.1em center; padding-left: 2.6em; } .form-status{ font-size: .9rem; padding: .8em 1em; border-radius: var(--radius-sm); display: none; } .form-status.show{ display: block; } .form-status.success{ background: #E4EEDD; color: #3B5A2A; } .form-status.error{ background: #F6E1DA; color: #8C3A22; } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background: var(--color-olive-dark); color: rgba(255,255,255,.82); padding-block: var(--space-6) var(--space-4); } .footer-grid{ display: grid; gap: var(--space-4); margin-bottom: var(--space-5); } @media (min-width: 780px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } } .footer-brand{ display: flex; align-items: center; gap: .4rem; margin-bottom: var(--space-2); } .footer-brand img{ height: 30px; width: auto; } .footer-brand span{ font-family: var(--font-logo); font-size: 1.5rem; color: #fff; font-weight: 800; } .site-footer h4{ color: #fff; font-family: var(--font-body); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-2); } .site-footer ul{ display: flex; flex-direction: column; gap: .6rem; } .site-footer a:hover{ color: #fff; } .footer-bottom{ border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--space-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: .82rem; color: rgba(255,255,255,.55); } /* ========================================================================== WhatsApp floating button ========================================================================== */ .whatsapp-float{ position: fixed; bottom: var(--space-3); inset-inline-end: var(--space-3); z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: var(--color-whatsapp); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(47,174,92,.4); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease), visibility var(--dur-base); opacity: 0; visibility: hidden; transform: translateY(12px); } .whatsapp-float.visible{ opacity: 1; visibility: visible; transform: translateY(0); } .whatsapp-float:hover{ transform: scale(1.08); } .whatsapp-float svg{ width: 28px; height: 28px; } /* ========================================================================== Reveal-on-scroll ========================================================================== */ [data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } [data-reveal].in-view{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity: 1; transform: none; } } /* ========================================================================== Utilities ========================================================================== */ .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } html:not([lang="en"]) .i18n-en{ display: none !important; } html[lang="en"] .i18n-he{ display: none !important; } /* ========================================================================== Accessibility menu ========================================================================== */ .a11y-toggle{ position: fixed; bottom: var(--space-3); inset-inline-start: var(--space-3); z-index: 120; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--color-olive); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-soft); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .a11y-toggle svg{ width: 26px; height: 26px; } .a11y-toggle:hover{ background: var(--color-olive-dark); transform: translateY(-2px); } .a11y-panel{ position: fixed; bottom: calc(var(--space-3) + 62px); inset-inline-start: var(--space-3); z-index: 121; width: min(260px, calc(100vw - 2 * var(--space-3))); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); padding: var(--space-2); } .a11y-panel[hidden]{ display: none; } .a11y-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .a11y-head h2{ font-size: 1rem; margin: 0; } .a11y-close{ width: 30px; height: 30px; border: none; background: transparent; color: var(--color-ink-soft); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .a11y-close svg{ width: 16px; height: 16px; } .a11y-close:hover{ background: var(--color-bg); color: var(--color-ink); } .a11y-row{ display: flex; gap: 6px; margin-bottom: 6px; } .a11y-btn{ flex: 1; min-height: 40px; border: 1.5px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; color: var(--color-ink); } .a11y-btn:hover{ border-color: var(--color-olive); } .a11y-opt, .a11y-reset{ display: block; width: 100%; min-height: 40px; text-align: start; padding: .5em .8em; margin-bottom: 6px; border: 1.5px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--color-ink); font-family: inherit; } .a11y-opt:hover, .a11y-reset:hover{ border-color: var(--color-olive); } .a11y-opt[aria-pressed="true"]{ background: var(--color-olive); border-color: var(--color-olive); color: #fff; } .a11y-reset{ margin-bottom: 0; color: var(--color-terracotta-dark); text-align: center; } /* --- user preferences applied to the page --- */ html[data-a11y-font="lg"]{ font-size: 18px; } html[data-a11y-font="xl"]{ font-size: 20px; } html[data-a11y-font="sm"]{ font-size: 14px; } html.a11y-contrast{ --color-ink-soft: #26261F; --color-ink-faint: #3A3A31; --color-border: #6B6552; } html.a11y-contrast body{ background: #fff; color: #000; } html.a11y-contrast .section-alt, html.a11y-contrast .workshop-card, html.a11y-contrast .facilitator-card, html.a11y-contrast .contact-card{ background: #fff; } html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span{ color: #1A1A15; } html.a11y-contrast .site-footer, html.a11y-contrast .site-footer *{ color: #fff; } html.a11y-links a:not(.btn){ text-decoration: underline; text-underline-offset: 3px; } html.a11y-readable, html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable h4{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; letter-spacing: normal; } html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }