/* ========================================================================= base.css - Reset, @font-face, RTL defaults, .container, and SHARED COMPONENTS reused by every section. Section files should NOT redefine these; they compose on top. Depends on: tokens.css ========================================================================= */ /* ------------------------------------------------------------------------- @font-face - Futurism (Hebrew, 3 weights) + Malfin (English display) Paths are relative to this file (css/ -> ../assets/fonts/...) ------------------------------------------------------------------------- */ @font-face { font-family: 'Futurism'; src: url('../assets/fonts/Futurism-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Futurism'; src: url('../assets/fonts/Futurism-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Futurism'; src: url('../assets/fonts/Futurism-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Malfin'; src: url('../assets/fonts/Malfin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------------- RESET / NORMALIZE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-heb); font-weight: var(--fw-reg); font-size: var(--fs-500); line-height: var(--lh-body); direction: rtl; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul[role='list'], ol[role='list'] { list-style: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--text-strong); text-wrap: balance; } p { text-wrap: pretty; } /* Lock scroll when overlay menu is open (toggled by main.js on ) */ body.is-locked { overflow: hidden; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } ::selection { background: var(--brown-500); color: var(--cream); } /* ------------------------------------------------------------------------- LAYOUT - container + section helpers ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } .container--wide { max-width: var(--container-wide); } .container--narrow { max-width: 880px; } .section { padding-block: var(--section-py); position: relative; } .section--cream { background: var(--bg); } /* name kept; Figma sections are white */ .section--alt { background: var(--cream-2); } .section--dark { background: var(--brown-800); color: var(--on-dark); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); } /* Skip link (a11y) */ .skip-link { position: absolute; inset-inline-start: var(--container-pad); top: -100px; z-index: var(--z-top); background: var(--brown-700); color: var(--cream); padding: 10px 18px; border-radius: var(--r-pill); transition: top var(--dur) var(--ease); } .skip-link:focus { top: 12px; } /* ------------------------------------------------------------------------- TYPOGRAPHY HELPERS ------------------------------------------------------------------------- */ .display { font-family: var(--font-display); font-weight: var(--fw-reg); } .heb { font-family: var(--font-heb); } /* eyebrow / kicker - small letter-spaced English label above headings */ .kicker { font-family: var(--font-display); font-size: var(--fs-300); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brown-500); line-height: 1; } .section--dark .kicker { color: var(--on-dark-muted); } /* ------------------------------------------------------------------------- .btn - pill button (solid + outline). Pair with .cta-cluster + .icon-disc. ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-heb); font-weight: var(--fw-bold); font-size: var(--fs-400); line-height: 1; white-space: nowrap; padding: 0.95em 1.9em; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--solid { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); } .btn--solid:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); } .btn--outline { background: transparent; color: var(--btn-outline); border-color: var(--btn-outline); } .btn--outline:hover { background: var(--btn-outline); color: var(--cream); } /* Outline variant that must stay legible on dark / photo backgrounds */ .btn--outline-light { background: transparent; color: var(--btn-outline-on-dark); border-color: var(--btn-outline-on-dark); } .btn--outline-light:hover { background: var(--cream); color: var(--brown-700); border-color: var(--cream); } .btn--sm { padding: 0.7em 1.4em; font-size: var(--fs-300); } .btn--lg { padding: 1.1em 2.4em; font-size: var(--fs-500); } /* CTA cluster: an .icon-disc sitting beside a .btn, linked as one control */ .cta-cluster { display: inline-flex; align-items: center; gap: var(--sp-3); } /* ------------------------------------------------------------------------- .icon-disc - round brown disc holding an SVG/icon (social rails, footer, button accents). --sm modifier for the smaller rail/inline discs. ------------------------------------------------------------------------- */ .icon-disc { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: var(--r-circle); background: var(--brown-700); color: var(--cream); flex: 0 0 auto; transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .icon-disc:hover { background: var(--brown-800); transform: translateY(-2px); } .icon-disc--sm { inline-size: 38px; block-size: 38px; } .icon-disc--lg { inline-size: 60px; block-size: 60px; } /* Icons inside a disc: SVG files are dark brown by default; invert to cream */ .icon-disc img, .icon-disc svg { inline-size: 45%; block-size: 45%; object-fit: contain; } /* SVG assets are filled #5D2809; make them read as cream on the brown disc */ .icon-disc img { filter: brightness(0) saturate(100%) invert(95%) sepia(8%) saturate(420%) hue-rotate(345deg) brightness(101%) contrast(94%); } /* Outline disc variant (transparent on dark/photo, cream ring) */ .icon-disc--ghost { background: transparent; border: 1.5px solid var(--cream); } .icon-disc--ghost:hover { background: rgba(246,241,233,.14); } /* ------------------------------------------------------------------------- .vlabel - large rotated English display label running up a section edge. Uses writing-mode for clean vertical text; Malfin display font. Add .vlabel--ltr to flip rotation direction if a layout needs it. ------------------------------------------------------------------------- */ .vlabel { font-family: var(--font-display); font-weight: var(--fw-reg); font-size: var(--fs-800); line-height: 1; color: var(--brown-500); letter-spacing: 0.02em; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); /* reads bottom-to-top */ transform-origin: center; user-select: none; } .vlabel--ltr { transform: rotate(0deg); } .section--dark .vlabel { color: var(--on-dark-muted); } .vlabel--faint { color: rgba(152, 92, 57, .35); } /* ------------------------------------------------------------------------- MEDIA FRAME HELPERS - all clip the image with object-fit:cover. Put an directly inside. .media-oval - tall vertical pill (portrait oval) .media-circle - perfect circle .media-stadium - wide rounded-rectangle / stadium (horizontal pill) .media-arch - arch: fully rounded top, gently rounded bottom ------------------------------------------------------------------------- */ .media-oval, .media-circle, .media-stadium, .media-arch { position: relative; overflow: hidden; background: var(--tan-100); isolation: isolate; } .media-oval > img, .media-circle > img, .media-stadium > img, .media-arch > img { inline-size: 100%; block-size: 100%; object-fit: cover; } .media-oval { border-radius: var(--r-pill); aspect-ratio: 3 / 5; } .media-circle { border-radius: var(--r-circle); aspect-ratio: 1 / 1; } .media-stadium { border-radius: var(--r-pill); aspect-ratio: 16 / 10; } .media-arch { border-radius: var(--r-arch); aspect-ratio: 3 / 4; } /* Back-compat aliases (BRIEF / prior build naming) so section authors using either vocabulary still get a frame. */ .media-pill { position: relative; overflow: hidden; background: var(--tan-100); border-radius: var(--r-pill); aspect-ratio: 3 / 5; isolation: isolate; } .media-pill > img { inline-size: 100%; block-size: 100%; object-fit: cover; } .media-stadium-wide{ position: relative; overflow: hidden; background: var(--tan-100); border-radius: var(--r-pill); aspect-ratio: 16 / 9; isolation: isolate; } .media-stadium-wide > img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* ------------------------------------------------------------------------- DECORATIVE: .sparkle (4-point star) + .ring (concentric outline) .sparkle uses the sparkle.svg asset as a mask so it inherits currentColor. ------------------------------------------------------------------------- */ .sparkle { display: inline-block; inline-size: 22px; block-size: 22px; flex: 0 0 auto; color: var(--brown-700); background-color: currentColor; -webkit-mask: url('../assets/icons/sparkle.svg') center / contain no-repeat; mask: url('../assets/icons/sparkle.svg') center / contain no-repeat; } .sparkle--sm { inline-size: 16px; block-size: 16px; } .sparkle--lg { inline-size: 30px; block-size: 30px; } .section--dark .sparkle { color: var(--cream); } .ring { position: absolute; border: 1px solid var(--tan-400); border-radius: var(--r-circle); opacity: .5; pointer-events: none; z-index: var(--z-decor); } .ring--faint { opacity: .22; } .section--dark .ring { border-color: rgba(246,241,233,.4); } /* ------------------------------------------------------------------------- SCROLL-REVEAL - initial state. main.js adds .in-view via IntersectionObserver. Section authors put .reveal on elements they want animated in. ------------------------------------------------------------------------- */ /* Hidden only when JS runs (js/boot.js adds .js to ), so without JS the form, FAQ and every section stay visible. The motion itself lives in css/motion.css: keyframes with only a "from" state and fill "backwards", animating the individual translate/scale properties, so once an element has finished it is back on its own CSS (the settled layout never changes, and element transforms such as rotate(-90deg) are never overridden). */ .js .reveal:not(.in-view) { opacity: 0 !important; } .reveal--stagger.in-view > * { animation: reveal-rise var(--dur-slow) var(--ease-out) backwards; } .reveal--stagger.in-view > *:nth-child(1) { animation-delay: 0ms; } .reveal--stagger.in-view > *:nth-child(2) { animation-delay: 120ms; } .reveal--stagger.in-view > *:nth-child(3) { animation-delay: 240ms; } .reveal--stagger.in-view > *:nth-child(4) { animation-delay: 360ms; } @keyframes reveal-rise { from { opacity: 0; translate: 0 20px; } to { translate: 0 0; } } /* ------------------------------------------------------------------------- UTILITIES ------------------------------------------------------------------------- */ .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .no-scroll { overflow: hidden !important; } [hidden] { display: none !important; } .ltr { direction: ltr; } /* ------------------------------------------------------------------------- REDUCED MOTION - disable transitions/animations + reveal offsets. ------------------------------------------------------------------------- */ @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; } .js .reveal, .js .reveal:not(.in-view) { opacity: 1 !important; animation: none !important; } } @media print { .js .reveal, .js .reveal:not(.in-view) { opacity: 1 !important; animation: none !important; } }