/* ================================================================ NADLANISTIM — shared base (ported from app/v6/v6.css) ================================================================ Tokens live on :root (child theme); shared component classes are global, `nad-` prefixed. Side-specific rules use logical properties (margin-inline etc.) so they mirror with the element's direction. RTL: the widgets FORCE their own direction so they render Hebrew RTL even on an LTR site (staging is LTR). The rule below flips every Nadlanistim widget; each widget root also carries dir="rtl". The relocated header drawer sets its own direction in the header CSS. ================================================================ */ /* ===== Design tokens (self-contained) ===== Also defined in the child theme, but the PLUGIN defines them too so the widgets work on ANY theme / on staging even if the child theme is not the active one. Same values — no conflict. This is why the widgets looked perfect locally (child theme active) but broke on staging (tokens missing): now the plugin carries them. */ :root { --nad-bg: #07080F; --nad-bg-2: #0C0E1A; --nad-surface: rgba(255,255,255,.04); --nad-surface-2: rgba(255,255,255,.07); --nad-ink: #F5F7FB; --nad-ink-2: #C4CADC; --nad-muted: rgba(255,255,255,.55); --nad-muted-2: rgba(255,255,255,.35); --nad-line: rgba(255,255,255,.08); --nad-line-2: rgba(255,255,255,.14); --nad-violet: #8B5CF6; --nad-blue: #4F8DFB; --nad-cyan: #22D3EE; --nad-pink: #F472B6; --nad-grad-1: linear-gradient(135deg, #8B5CF6 0%, #4F8DFB 50%, #22D3EE 100%); --nad-grad-text: linear-gradient(120deg, #fff 0%, #c7d6ff 35%, #8aa9ff 100%); --nad-grad-accent-text: linear-gradient(120deg, #C4B5FD 0%, #93C5FD 50%, #67E8F9 100%); --nad-glass-bg: rgba(255,255,255,.045); --nad-glass-bg-strong: rgba(255,255,255,.08); --nad-glass-border: rgba(255,255,255,.12); --nad-glass-border-strong: rgba(255,255,255,.22); --nad-glass-blur: blur(28px) saturate(160%); --nad-glass-blur-strong: blur(40px) saturate(180%); --nad-container: 1360px; --nad-gutter: clamp(20px, 4vw, 56px); --nad-r-sm: 10px; --nad-r: 18px; --nad-r-lg: 28px; --nad-r-xl: 36px; --nad-section-y: clamp(16px, 2.25vw, 28px); --nad-t: cubic-bezier(.22,.61,.36,1); --nad-t-out: cubic-bezier(.16,1,.3,1); --nad-font: "Polin", "Heebo", -apple-system, system-ui, sans-serif; --nad-font-mono: "Polin", "Heebo", -apple-system, system-ui, sans-serif; } /* Widgets carry the base font + ink so they read correctly even without the child theme. */ [class*="elementor-widget-nadlanistim_"] { direction: rtl; font-family: var(--nad-font); color: var(--nad-ink); } /* Page background — the design's dark canvas. It belongs on the PAGE (the content sections are transparent by design), but rather than depend on the theme/child theme we apply it automatically to any page that actually contains a Nadlanistim widget. Scoped via :has() so it never darkens unrelated pages, and self-contained so it survives on staging. */ body:has([class*="elementor-widget-nadlanistim_"]) { background: var(--nad-bg); color: var(--nad-ink); } /* box-sizing reset scoped to our widgets. Elementor already applies this inside .elementor, but the reference relied on its own `.v6-root *` reset — several layouts (e.g. the hero's min-height:100vh + padding) only compute correctly under border-box, so we assert it ourselves rather than depend on the host. The relocated header drawer is covered too. */ [class*="elementor-widget-nadlanistim_"], [class*="elementor-widget-nadlanistim_"] *, [class*="elementor-widget-nadlanistim_"] *::before, [class*="elementor-widget-nadlanistim_"] *::after, .nad-drawer, .nad-drawer * { box-sizing: border-box; } /* ===== Glass surface ===== */ .nad-glass { background: var(--nad-glass-bg); backdrop-filter: var(--nad-glass-blur); -webkit-backdrop-filter: var(--nad-glass-blur); border: 1px solid var(--nad-glass-border); position: relative; isolation: isolate; } .nad-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.08) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } .nad-glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.08), transparent 60%), radial-gradient(80% 50% at 100% 100%, rgba(139,92,246,.08), transparent 60%); pointer-events: none; z-index: 0; } .nad-glass > * { position: relative; z-index: 2; } /* ===== Link reset ===== Elementor's Global Kit styles `a` via `.elementor-kit-N a` — (0,1,1) — which underlines and recolours our links. The trailing [class] lifts this to (0,2,1) so it wins; per-component link COLOURS use the same scope in their own (later-loaded) stylesheet, so they still win. Only text-decoration is reset here — colour is left to each component. */ :is([class*="elementor-widget-nadlanistim_"], .nad-drawer)[class] a { text-decoration: none; } /* ===== Buttons ===== Scoped with :is(...) → (0,2,0), which beats the Kit's `.elementor-kit-N button|a` (0,1,1). Without this the Kit repaints every CTA as the theme's accent pill. */ :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; font-family: var(--nad-font); font-weight: 500; font-size: 15px; line-height: 1.2; text-transform: none; letter-spacing: normal; border-radius: 999px; transition: all .45s var(--nad-t); white-space: nowrap; border: 1px solid transparent; position: relative; overflow: hidden; isolation: isolate; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none; min-width: 0; min-height: 0; width: auto; height: auto; } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn svg { width: 18px; height: 18px; transition: transform .35s var(--nad-t); } /* RTL-correct: the chevron points left (reading direction), so it slides left on hover. */ :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn:hover svg { transform: translateX(-4px); } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn--primary { background: linear-gradient(135deg, #8B5CF6 0%, #4F8DFB 60%, #22D3EE 100%); background-size: 200% 200%; background-position: 0% 0%; color: #fff; box-shadow: 0 12px 32px rgba(79,141,251,.35), 0 0 0 1px rgba(255,255,255,.08) inset; } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn--primary:hover { background-position: 100% 100%; box-shadow: 0 18px 48px rgba(79,141,251,.5), 0 0 0 1px rgba(255,255,255,.15) inset; transform: translateY(-2px); } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn--glass { background: var(--nad-glass-bg-strong); backdrop-filter: var(--nad-glass-blur); -webkit-backdrop-filter: var(--nad-glass-blur); color: var(--nad-ink); border-color: var(--nad-glass-border-strong); } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn--glass:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); transform: translateY(-2px); } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn--lg { padding: 18px 34px; font-size: 16px; } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-btn--block { width: 100%; } /* ===== Eyebrow (kicker) ===== */ .nad-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--nad-muted); margin-bottom: 28px; white-space: nowrap; flex-shrink: 0; } .nad-eyebrow .nad-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nad-cyan); box-shadow: 0 0 12px var(--nad-cyan), 0 0 0 4px rgba(34,211,238,.15); animation: nad-pulse 2.4s infinite; } @keyframes nad-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .6; } } /* ===== Accent word in headings (gradient-clip; upright — Polin ships no italic) ===== */ .nad-accent { font-style: normal; background: var(--nad-grad-accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } /* ===== Section head ===== */ .nad-section-head { max-width: 720px; margin-bottom: 48px; } .nad-section-head--center { margin-inline: auto; text-align: center; } .nad-section-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .nad-section-head h2 { margin: 0; font-size: clamp(40px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; color: var(--nad-ink); } .nad-section-head__sub { margin-top: 24px; font-size: clamp(17px, 1.5vw, 20px); color: var(--nad-muted); font-weight: 300; line-height: 1.5; } .nad-tag-members { display: inline-block; vertical-align: middle; margin-inline-start: 12px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--nad-cyan); background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.32); white-space: nowrap; } /* ===== "See all" link with chevron ===== */ /* Scoped so the Kit's link colour cannot override the "see all" link or its cyan hover. */ :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--nad-ink); border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 4px; text-decoration: none; transition: gap .3s var(--nad-t), color .3s var(--nad-t), border-color .3s var(--nad-t); } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-link-arrow svg { width: 16px; height: 16px; } :is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-link-arrow:hover { gap: 14px; color: var(--nad-cyan); border-color: var(--nad-cyan); } /* ===== Section + container ===== */ .nad-section { padding: var(--nad-section-y) 0; position: relative; z-index: 1; } .nad-container { max-width: var(--nad-container); margin: 0 auto; padding-inline: var(--nad-gutter); position: relative; z-index: 2; } /* ================================================================ IMAGE SIZING — READ THIS BEFORE ADDING A WIDGET ================================================================ Elementor ships `.elementor img { height: auto; }` at specificity (0,1,1). A plain `.nad-x__img img { height: 100% }` is ALSO (0,1,1) and loads earlier, so Elementor wins the tie and the image silently falls back to its natural aspect ratio — nothing errors, the crop is just wrong. ANY image a widget sizes itself must be selected with at least (0,2,1) — put an ancestor class in front of it: .nad-project .nad-project__img img { ... } ✓ wins .nad-project__img img { ... } ✗ loses to Elementor The rule below is a backstop for the common cover-image case, but be explicit in each widget's own stylesheet rather than relying on it alone. ================================================================ */ [class*="elementor-widget-nadlanistim_"] img[class*="__img"], [class*="elementor-widget-nadlanistim_"] figure[class*="__img"] img { height: 100%; width: 100%; object-fit: cover; } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { .nad-dot { animation: none !important; } } /* ================================================================ SHARED CAROUSEL PRIMITIVES (Communities, Members) ================================================================ */ /* ===== Shared carousel arrows (Communities + Members) ===== The wrapper prefix is LOAD-BEARING. Elementor's Global Kit styles bare