/* ══ TOKENS — לילה / לוקס — Dark Forest Green brand palette ══ */ :root { color-scheme: dark; /* V2 = the "Night" direction Noam chose: dark-always for every visitor, regardless of OS theme */ /* Dark base — forest green backgrounds */ --void: #1e2d1a; --void-2: #253220; --void-3: #2c3c27; --void-4: #344530; --void-5: #3d4f38; /* Cream text */ --cream: #F5F0E8; --cream-soft: rgba(245,240,232,0.82); --cream-mute: rgba(245,240,232,0.50); --cream-faint: rgba(245,240,232,0.22); /* Readable muted: solid value that clears 4.5:1 on void / void-2 for small labels */ --cream-label: #CDC6B7; /* Gold / sage accents */ --gold: #C8A96E; --gold-bright: #E2C488; --gold-deep: #A88A4E; --gold-glow: rgba(200,169,110,0.18); --sage: #7A9E6C; --sage-soft: #95b886; /* Legacy aliases (keep for unchanged sections) */ --bone: var(--cream); --bone-soft: var(--cream-soft); --bone-mute: var(--cream-mute); --hairline: rgba(200,169,110,0.20); --hairline-2: rgba(200,169,110,0.10); /* Section-background stops — tokenized so the light-mode override can remap them and no dark-island section bleeds through on a light OS. Dark-first defaults. */ --bg-deep-1: #2a3a24; /* hero top */ --bg-deep-2: #202c1c; /* pain / services warm mid */ --bg-deep-3: #1a2616; /* services / portal / about / cta entry */ --bg-deep-4: #172012; /* hero + cta lower */ --bg-deep-5: #0f1a0c; /* hero + cta floor */ --bg-deep-6: #283626; /* portal lower */ --bg-deep-7: #324331; /* about lower */ --r-card: 18px; --r-panel: 24px; --r-pill: 999px; --r-arch: 50% 50% 14px 14px; --shadow-float: 0 30px 80px -20px rgba(0,0,0,0.50); --shadow-glow: 0 0 0 1px var(--hairline), 0 24px 60px -20px rgba(0,0,0,0.40); --fs-display: clamp(3.6rem, calc(2.1rem + 6.6vw), 8rem); --fs-h2: clamp(2.4rem, calc(1.5rem + 3.8vw), 4.2rem); --fs-quote: clamp(1.7rem, calc(1.2rem + 2.5vw), 2.8rem); --fs-svtitle: clamp(1.4rem, calc(1rem + 1.5vw), 2rem); --fs-lead: clamp(1.2rem, calc(1rem + 1vw), 1.55rem); --fs-body: 1.125rem; --fs-small: 0.9375rem; --lh-body: 1.78; --lh-display: 1.08; --shadow-card-hover: 0 16px 48px -8px rgba(0,0,0,0.50), 0 0 0 1px rgba(200,169,110,0.28); } /* ══ RESET + BASE ══ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Widow/orphan guard site-wide (Noam 2026-06-15): never end a line with a single lone word */ h1, h2, h3, h4, .hero-h1, .section-title { text-wrap: balance; } p, li, blockquote, figcaption, .hero-sub, .section-sub { text-wrap: pretty; } html { scroll-behavior: smooth; } body { background: var(--void); color: var(--cream); font-family: 'Assistant', system-ui, sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; overflow-x: hidden; direction: rtl; } /* Bidi: the body default above is rtl for the Hebrew site. English pages carry , so flip text direction back to ltr for them. This selector never matches the Hebrew pages (they are dir="rtl"), so it is harmless to the HE site. Added 2026-06-15 for the EN Night build. */ html[dir="ltr"] body { direction: ltr; } a { text-decoration: none; color: inherit; } button { font-family: inherit; } img { max-inline-size: 100%; display: block; } /* Unified keyboard-focus ring: a gold halo on the brand palette, never the browser default blue, and only for keyboard users (:focus-visible) so mouse clicks stay clean. */ :where(a, button, [tabindex], input, textarea, select):focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 6px; } /* ══ TEXTURE: film grain over dark ══ */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ══ TEXTURE: deep vignette on dark ══ */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at 50% 0%, rgba(200,169,110,0.04) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.40) 0%, transparent 70%); } /* ══ KEYFRAMES ══ */ @keyframes breathe { 0%,100%{opacity:.65} 50%{opacity:1} } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes sv-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pain-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } @keyframes thumb-shimmer { 0%{background-position:160% 0} 100%{background-position:-60% 0} } /* ══ REVEAL (IntersectionObserver) ══ */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.revealed { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.18s; } .reveal-d3 { transition-delay: 0.28s; } /* No-JS fallback: content visible if JS fails */ .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ══ LAYOUT ══ */ .container { width: 100%; max-inline-size: 1100px; margin-inline: auto; padding-inline: 28px; } .container--narrow { max-inline-size: 760px; } section { padding-block: clamp(56px, 7.5vh, 104px); } .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Assistant', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: var(--gold-bright); margin-block-end: 18px; padding: 5px 16px; border: 1px solid rgba(200,169,110,0.30); border-radius: var(--r-pill); background: rgba(200,169,110,0.10); } /* Small gold tick before each eyebrow: gives the pill a deliberate accent without uppercase distortion */ .section-eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(200,169,110,0.6); flex-shrink: 0; } .section-title { font-family: 'Rubik', sans-serif; font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-display); letter-spacing: -0.025em; color: var(--cream); margin-block-end: 14px; text-wrap: balance; } .section-title em { color: var(--gold); font-style: normal; } .section-sub { font-family: 'Assistant', sans-serif; font-weight: 300; color: var(--cream-soft); font-size: var(--fs-lead); max-inline-size: 720px; margin-block: 0 48px; line-height: var(--lh-body); /* Balance line lengths so the last line is never a single orphan word (e.g. "לצמוח."). */ text-wrap: balance; } /* ══ BUTTONS ══ */ .btn-gold { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); color: var(--void); font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.05rem; padding: 16px 40px; border-radius: var(--r-pill); border: none; cursor: pointer; overflow: hidden; box-shadow: 0 4px 24px rgba(200,169,110,0.30), 0 1px 4px rgba(0,0,0,0.30); transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease; letter-spacing: 0; } /* Light sheen that sweeps across on hover — premium, quiet, not gimmicky */ .btn-gold::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.40), transparent); transform: skewX(-18deg); transition: inset-inline-start 0.55s cubic-bezier(.22,1,.36,1); pointer-events: none; } .btn-gold:hover::after { inset-inline-start: 130%; } .btn-gold > * { position: relative; z-index: 1; } .btn-gold:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(200,169,110,0.45), 0 2px 8px rgba(0,0,0,0.40); } .btn-gold:active { transform: translateY(0); transition-duration: 80ms; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(200,169,110,0.08); color: var(--gold-bright); font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 1rem; padding: 15px 34px; border-radius: var(--r-pill); border: 1px solid rgba(200,169,110,0.40); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn-ghost:hover { background: rgba(200,169,110,0.16); color: var(--gold-bright); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(200,169,110,0.20); } .btn-ghost:active { transform: translateY(0); transition-duration: 80ms; } /* ══ BRAND ART — multiply on cream ══ */ .night-art img { filter: brightness(0.92) contrast(1.08) saturate(1.05) sepia(0.10) hue-rotate(5deg); mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%); opacity: 0.85; } /* ══════════════════════════════ NAV ══════════════════════════════ */ .v6-nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 900; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; border-block-end: 1px solid transparent; } .v6-nav.scrolled { background: rgba(30,45,26,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block-end-color: var(--hairline); box-shadow: 0 4px 32px rgba(0,0,0,0.30); } .nav-inner { height: 68px; display: flex; align-items: center; gap: 16px; } .nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-inline-start: auto; } /* Cream logo reads cleanly on the dark nav with no container — no pill needed. */ .nav-logo img { height: 34px; width: auto; object-fit: contain; } .nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; list-style: none; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--cream-soft); padding: 6px 14px; border-radius: var(--r-pill); transition: color 0.15s, background 0.15s; } .nav-links a:hover { color: var(--gold-bright); background: var(--gold-glow); } .nav-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .nav-lang-link { font-size: 0.8rem; font-weight: 600; color: var(--cream-soft); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 4px 12px; transition: color 0.15s, border-color 0.15s; } .nav-lang-link:hover { color: var(--gold); border-color: var(--gold); } .nav-cta-ghost { font-size: 0.88rem; font-weight: 600; color: var(--gold); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 7px 18px; transition: background 0.15s, border-color 0.15s; } .nav-cta-ghost:hover { background: var(--gold-glow); border-color: var(--gold); } /* Mobile hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; transition: all 0.2s; } .mobile-menu { display: none; flex-direction: column; background: rgba(61,74,45,0.97); position: fixed; inset: 0; z-index: 950; align-items: center; justify-content: center; gap: 8px; padding: 40px 24px; } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: 'Rubik', sans-serif; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; color: #F5F0E8; padding: 10px 20px; transition: color 0.15s; } .mobile-menu a:hover { color: #C4DBC0; } .mobile-menu .m-close { position: absolute; inset-block-start: 20px; inset-inline-start: 20px; background: none; border: 1px solid rgba(245,240,232,0.3); border-radius: 50%; width: 40px; height: 40px; color: rgba(245,240,232,0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } /* ══════════════════════════════ HERO ══════════════════════════════ */ .v6-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding-block: 108px 72px; background: linear-gradient(165deg, var(--bg-deep-1) 0%, var(--void) 35%, var(--bg-deep-4) 70%, var(--bg-deep-5) 100%); } /* Giant ghost word — bold, unexpected, unmistakably this brand */ .hero-ghost-word { display: none; /* Noam 2026-06-15: remove the background ghost letter site-wide (homepage + marketing-OS + V3) */ position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -52%); font-family: 'Rubik', sans-serif; font-size: clamp(11rem, 26vw, 32rem); font-weight: 900; letter-spacing: -0.06em; color: transparent; /* Confident, deliberate outlined display: a readable stroke + a soft fill so it reads as a considered graphic, never as accidental dead whitespace */ -webkit-text-stroke: 2.5px rgba(200,169,110,0.34); background: linear-gradient(180deg, rgba(200,169,110,0.16) 0%, rgba(200,169,110,0.06) 55%, rgba(122,158,108,0.03) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 70px rgba(200,169,110,0.16)); white-space: nowrap; pointer-events: none; z-index: 0; user-select: none; line-height: 1; } /* Ultra-wide: at 1441px+ the 32rem ghost word fills most of the hero height and starts to compete with the H1. Pull it further back — lighter stroke + fill + softer glow — so it reads unmistakably as a backdrop behind the headline, never a rival to it. */ @media (min-width: 1441px) { .hero-ghost-word { -webkit-text-stroke-color: rgba(200,169,110,0.20); background: linear-gradient(180deg, rgba(200,169,110,0.08) 0%, rgba(200,169,110,0.03) 55%, rgba(122,158,108,0.015) 100%); filter: drop-shadow(0 0 60px rgba(200,169,110,0.10)); } } /* CSS art: layered radial glows creating depth */ .v6-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 36%, rgba(200,169,110,0.30) 0%, rgba(200,169,110,0.09) 38%, transparent 70%), radial-gradient(ellipse 45% 55% at 18% 68%, rgba(122,158,108,0.26) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 82% 78%, rgba(149,184,134,0.16) 0%, transparent 58%), conic-gradient(from 220deg at 50% 42%, rgba(200,169,110,0.10) 0deg, transparent 70deg, rgba(122,158,108,0.10) 180deg, transparent 250deg, rgba(200,169,110,0.10) 360deg), radial-gradient(ellipse 90% 34% at 50% 0%, rgba(200,169,110,0.12) 0%, transparent 62%); pointer-events: none; z-index: 0; } /* CSS art: large decorative circle — the focal "moon" */ .v6-hero::after { content: ''; position: absolute; inset-block-start: -120px; inset-inline-end: -120px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(122,158,108,0.28) 0%, rgba(200,169,110,0.08) 40%, rgba(30,45,26,0.0) 65%); border: 1px solid rgba(200,169,110,0.28); box-shadow: inset 0 0 60px rgba(200,169,110,0.10), 0 0 80px rgba(122,158,108,0.12); pointer-events: none; z-index: 0; } @media (prefers-reduced-motion: no-preference) { .v6-hero::after { animation: breathe 16s ease-in-out infinite; } } /* Hero floating ring decorations */ .hero-ring-1, .hero-ring-2 { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .hero-ring-1 { width: 420px; height: 420px; inset-block-start: 50%; inset-inline-end: 5%; transform: translateY(-50%); border: 1px solid rgba(200,169,110,0.35); box-shadow: 0 0 40px rgba(200,169,110,0.08), inset 0 0 40px rgba(200,169,110,0.05); } .hero-ring-2 { width: 220px; height: 220px; inset-block-end: 12%; inset-inline-start: 8%; border: 1px solid rgba(122,158,108,0.40); box-shadow: 0 0 24px rgba(122,158,108,0.10); } .hero-glow { position: absolute; inset-block-start: -10%; inset-inline-start: -10%; width: 70%; height: 80%; background: radial-gradient(ellipse at 30% 30%, rgba(200,169,110,0.12) 0%, transparent 60%); pointer-events: none; z-index: 0; } @media (prefers-reduced-motion: no-preference) { .hero-glow { animation: breathe 12s ease-in-out infinite; } } /* Hero floor line — single bold gold stroke */ .hero-floor-line { position: absolute; inset-block-end: 0; inset-inline: 0; height: 1px; background: linear-gradient(to left, transparent 0%, rgba(200,169,110,0.60) 30%, rgba(200,169,110,0.80) 50%, rgba(200,169,110,0.60) 70%, transparent 100%); pointer-events: none; z-index: 2; } /* Bold gold underline on the glow word */ .hero-h1 .glow-word { position: relative; display: inline-block; } .hero-h1 .glow-word::after { content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: -4px; height: 3px; background: linear-gradient(to left, var(--gold-deep), var(--gold-bright), var(--gold-deep)); border-radius: 2px; opacity: 0.7; } .hero-octopus-bg { display: none; /* image-dependent; hidden in dark mode */ } .hero-wc { display: none; /* image-dependent; replaced by CSS art */ } .hero-content { position: relative; z-index: 1; max-inline-size: 820px; margin-inline: auto; } /* Social proof bar above headline */ .hero-proof-bar { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border: 1px solid rgba(200,169,110,0.25); border-radius: var(--r-pill); background: rgba(200,169,110,0.08); margin-block-end: 32px; animation: fade-up 0.6s cubic-bezier(.22,1,.36,1) both; } /* Pill relocated between H1 and subhead on the homepage (Noam 2026-06-15) */ .hero-proof-bar--mid { margin-block-start: 2px; margin-block-end: 24px; } .hero-proof-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 8px var(--sage); } @media (prefers-reduced-motion: no-preference) { .hero-proof-dot { animation: breathe 3s ease-in-out infinite; } } .hero-proof-text { font-family: 'Assistant', sans-serif; font-size: 0.86rem; font-weight: 600; color: var(--cream); letter-spacing: 0.03em; } .hero-h1 { font-family: 'Rubik', sans-serif; /* Sized so the full 3-line headline fits within the viewport above the fold (was var(--fs-display) = up to 8rem, which pushed line 3 below the fold). */ font-size: clamp(2.7rem, calc(1.5rem + 3.8vw), 4.6rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.035em; color: var(--cream); margin-block-end: 28px; text-shadow: 0 2px 40px rgba(0,0,0,0.35); text-wrap: balance; } .hero-h1 .glow-word { /* background-clip:text dropped: on synthesized italic the clip boundary cuts the top of glyphs on mobile. Use solid color + drop-shadow filter which follows actual ink pixels regardless of synthesis. */ color: var(--gold-bright); background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; text-shadow: none; filter: drop-shadow(0 0 18px rgba(200,169,110,0.70)) drop-shadow(0 0 52px rgba(200,169,110,0.30)); } /* A little extra breathing room before the gold italic word — the synthesized italic slant otherwise leans into the preceding word. Scoped to .hero-h1-line so it only affects words that follow text on the same line (home: שינוי, ai-marketing: מערכת); the audit page's full-line gold phrase is left untouched. */ .hero-h1-line .glow-word { margin-inline-start: 0.28em; } .hero-h1-line { display: block; } .hero-h1-line:nth-child(1) { animation: fade-up 0.7s cubic-bezier(.22,1,.36,1) both; animation-delay: 0.15s; } .hero-h1-line:nth-child(2) { animation: fade-up 0.7s cubic-bezier(.22,1,.36,1) both; animation-delay: 0.32s; } .hero-h1-line:nth-child(3) { animation: fade-up 0.7s cubic-bezier(.22,1,.36,1) both; animation-delay: 0.50s; } .hero-sub { font-family: 'Assistant', sans-serif; font-size: var(--fs-lead); font-weight: 300; color: var(--cream-soft); line-height: var(--lh-body); max-inline-size: 640px; margin-inline: auto; margin-block-end: 48px; animation: fade-up 0.7s cubic-bezier(.22,1,.36,1) 0.68s both; } .hero-sub strong { color: var(--cream); font-weight: 600; } .hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; animation: fade-up 0.7s cubic-bezier(.22,1,.36,1) 0.84s both; } /* Pillars strip at bottom of hero: 3 named process principles rendered as pill badges, NOT numeric figures — so they read as qualitative pillars, never as performance metrics. */ .hero-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(12px, 1.6vw, 18px); margin-block-start: 56px; padding-block-start: 44px; animation: fade-up 0.7s cubic-bezier(.22,1,.36,1) 1.0s both; } /* A short centered gold rule above the strip: reads as intentional rhythm, not an unfinished divider */ .hero-stats::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); width: clamp(180px, 40%, 360px); height: 1px; background: linear-gradient(to left, transparent, rgba(200,169,110,0.55), transparent); } .hero-stat { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px 11px 18px; border: 1px solid rgba(200,169,110,0.30); border-radius: var(--r-pill); background: linear-gradient(135deg, rgba(200,169,110,0.12) 0%, rgba(200,169,110,0.04) 100%); box-shadow: inset 0 1px 0 rgba(200,169,110,0.14), 0 6px 22px rgba(0,0,0,0.18); transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .hero-stat:hover { border-color: rgba(200,169,110,0.50); background: linear-gradient(135deg, rgba(200,169,110,0.18) 0%, rgba(200,169,110,0.06) 100%); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(200,169,110,0.18), 0 12px 30px rgba(0,0,0,0.26); } /* A small gold check/leaf mark stands in for the old number — a brand accent, not a metric */ .hero-stat-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--void); background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%); box-shadow: 0 0 14px rgba(200,169,110,0.30); } .hero-stat-mark svg { width: 13px; height: 13px; } .hero-stat-label { font-family: 'Rubik', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--cream); letter-spacing: 0.005em; line-height: 1.25; white-space: nowrap; } /* Scroll cue - a quiet, animated hint that there is more below the fold */ .hero-scroll-cue { position: absolute; inset-block-end: 26px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--cream-label); font-family: 'Assistant', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; transition: color 0.2s; } .hero-scroll-cue:hover { color: var(--gold-bright); } .hero-scroll-cue svg { width: 18px; height: 18px; color: var(--gold); } @media (prefers-reduced-motion: no-preference) { .hero-scroll-cue svg { animation: pain-float 2.4s ease-in-out infinite; } } @media (max-width: 720px) { .hero-scroll-cue { display: none; } } /* ══════════════════════════════ GOLD DIVIDER BAND (replaces image leaves band) ══════════════════════════════ */ .v6-leaves-band { width: 100%; padding-block: 26px; overflow: visible; position: relative; background: var(--void); display: flex; align-items: center; justify-content: center; } /* The hairline rule itself: centered, with a soft glow node, so the hero-to-pain transition feels composed */ .v6-leaves-band::before { content: ''; position: absolute; inset-inline: 0; height: 1px; background: linear-gradient(to left, transparent 6%, rgba(200,169,110,0.55) 50%, transparent 94%); } .v6-leaves-band::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 22px rgba(200,169,110,0.70), 0 0 0 5px rgba(200,169,110,0.12), 0 0 0 10px rgba(200,169,110,0.05); position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .v6-leaves-band::after { animation: breathe 4.5s ease-in-out infinite; } } .v6-leaves-band img { display: none; /* image-dependent — replaced by CSS divider */ } /* ══════════════════════════════ PAIN ══════════════════════════════ */ .v6-pain { background: linear-gradient(180deg, var(--void) 0%, var(--void-2) 28%, var(--bg-deep-2) 100%); position: relative; } .v6-pain::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,169,110,0.05) 0%, transparent 70%); pointer-events: none; } .v6-pain .section-title { text-align: center; } .v6-pain > .container > .section-eyebrow { display: inline-flex; } .v6-pain > .container { text-align: center; } .v6-pain > .container > .pain-deck, .v6-pain > .container > .pain-deck-nav, .v6-pain > .container > .pain-bottom { text-align: center; } .pain-deck { display: grid; margin-block-start: 40px; padding: 64px 28px 44px; background: linear-gradient(165deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.14) 100%); border: 1px solid var(--hairline); border-radius: var(--r-panel); position: relative; min-height: clamp(220px, 34vh, 300px); max-height: clamp(300px, 52vh, 420px); align-items: center; box-shadow: inset 0 1px 0 rgba(200,169,110,0.10), 0 24px 60px rgba(0,0,0,0.22); } /* Inside a height-capped deck, let a very long quote scroll rather than push the nav off-screen */ .pain-slide.is-active { overflow-y: auto; } .pain-deck::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-panel); background: radial-gradient(ellipse at 50% 60%, rgba(200,169,110,0.06) 0%, transparent 65%); pointer-events: none; } .pain-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-inline: 16px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; position: relative; z-index: 1; } .pain-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease; } @media (prefers-reduced-motion: no-preference) { .pain-slide.is-active .pain-quote { animation: pain-float 6s ease-in-out infinite; } } .pain-quote { font-family: 'Rubik', sans-serif; font-size: var(--fs-quote); font-weight: 700; color: var(--cream); line-height: 1.45; max-inline-size: 760px; } .pain-quote strong { color: var(--gold-bright); } .pain-deck-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-block-start: 30px; } .pain-dots { display: flex; gap: 10px; } .pain-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--hairline); border: 1px solid var(--gold); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .pain-dot.is-on { background: var(--gold); transform: scale(1.3); } .pain-arrow { background: transparent; border: 1px solid var(--hairline); border-radius: 50%; inline-size: 38px; block-size: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .pain-arrow:hover { border-color: var(--gold); background: var(--gold-glow); } .pain-arrow svg { inline-size: 16px; block-size: 16px; } .pain-bottom { margin-block-start: 48px; background: linear-gradient(165deg, rgba(200,169,110,0.10) 0%, rgba(200,169,110,0.04) 100%); border: 1px solid rgba(200,169,110,0.24); border-radius: var(--r-card); padding: 38px 40px; text-align: center; position: relative; box-shadow: inset 0 1px 0 rgba(200,169,110,0.14); } .pain-bottom::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 30%; height: 2px; border-radius: 2px; background: linear-gradient(to left, transparent, var(--gold), transparent); } .pain-bottom p { font-size: 1.1rem; line-height: 1.65; color: var(--cream); } .pain-bottom .pain-bottom-sub { margin-block-start: 12px; font-size: 0.98rem; color: var(--cream-soft); } .pain-bottom em { color: var(--gold-bright); font-style: normal; font-weight: 600; } /* ══════════════════════════════ SERVICES ══════════════════════════════ */ .v6-services { background: linear-gradient(180deg, var(--bg-deep-2) 0%, var(--void) 40%, var(--bg-deep-3) 100%); position: relative; } .v6-services::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 80% 30%, rgba(122,158,108,0.06) 0%, transparent 60%); pointer-events: none; } .v6-services > .container { text-align: center; } .v6-services .sv6-grid { text-align: start; } .v6-services .section-title, .v6-services .section-sub { text-align: center; max-inline-size: 100%; } .v6-services .section-sub { margin-inline: auto; } .sv6-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(200,169,110,0.28); border: 1px solid rgba(200,169,110,0.30); border-radius: var(--r-panel); overflow: hidden; margin-block-start: 8px; box-shadow: 0 24px 60px rgba(0,0,0,0.30); } .sv6-card { background: var(--void-2); transition: background 0.18s ease, box-shadow 0.18s ease; position: relative; } .sv6-card:hover { background: var(--void-3); box-shadow: inset 0 0 0 1px rgba(200,169,110,0.34), inset 0 2px 0 rgba(200,169,110,0.18); } .sv6-card.is-open { background: var(--void-3); box-shadow: inset 0 2px 0 var(--gold); } .sv6-card .sv6-title-btn { transition: color 0.18s ease; } .sv6-title-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: none; cursor: pointer; padding: 28px 24px; text-align: start; transition: color 0.2s; } .sv6-title-text { font-family: 'Rubik', sans-serif; font-size: var(--fs-svtitle); font-weight: 700; color: var(--cream); line-height: 1.2; position: relative; } .sv6-title-text::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: -5px; block-size: 1px; inline-size: 0; background: var(--gold); transition: inline-size 0.3s ease; } .sv6-title-btn:hover .sv6-title-text::after, .sv6-title-btn:focus-visible .sv6-title-text::after { inline-size: 100%; } .sv6-title-btn:hover .sv6-title-text, .sv6-title-btn:focus-visible .sv6-title-text { color: var(--gold-bright); } .sv6-chev { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold); transition: transform 0.25s ease; } .sv6-card.is-open .sv6-chev { transform: rotate(180deg); } .sv6-body { padding: 0 24px 24px; font-size: 1.06rem; color: var(--cream-soft); line-height: var(--lh-body); font-weight: 400; } .sv6-body[hidden] { display: none; } /* No-JS fallback: if JS never runs, the [hidden] attribute would hide every service body (and the desktop dialog can't open), leaving the section content-less. Force the bodies visible so the page degrades to a readable static list. */ .no-js .sv6-body[hidden] { display: block; } .no-js .sv6-chev { display: none; } /* Desktop dialog */ .sv6-modal { border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--void-3); box-shadow: var(--shadow-float); padding: 0; max-inline-size: min(580px, calc(100vw - 48px)); margin: auto; color: var(--cream); } .sv6-modal::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sv6-modal[open] { animation: sv-pop 0.28s ease both; } .sv6-modal-inner { padding: 48px 48px 44px; position: relative; } .sv6-modal-inner h3 { font-family: 'Rubik', sans-serif; font-size: 2rem; font-weight: 700; color: var(--gold); margin-block-end: 18px; letter-spacing: -0.02em; } .sv6-modal-inner p { font-size: 1.08rem; line-height: 1.85; color: var(--cream-soft); font-weight: 400; } .sv6-modal-close { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; background: var(--void-4); border: 1px solid var(--hairline); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--cream-label); cursor: pointer; transition: background 0.15s, color 0.15s; } .sv6-modal-close:hover { background: var(--void); color: var(--gold); } .sv6-modal-close svg { width: 15px; height: 15px; } .sv-cta-row { text-align: center; margin-block-start: 44px; } /* ══════════════════════════════ HOW IT WORKS ══════════════════════════════ */ .v6-how { background: var(--void-3); position: relative; } .v6-how::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 20% 50%, rgba(122,158,108,0.06) 0%, transparent 60%); pointer-events: none; } .v6-how .section-eyebrow { display: inline-flex; } /* A short intro rule under the heading: fills the wide-viewport whitespace and gives the sparse 3-step section the same composed weight as the hero and services blocks. Mobile: anchored to the start edge (steps are a left-anchored vertical list). */ .how-intro-rule { width: clamp(180px, 38%, 340px); height: 1px; margin: 22px 0 4px; background: linear-gradient(to left, transparent, rgba(200,169,110,0.55), transparent); } .steps { display: flex; flex-direction: column; margin-block-start: 48px; } .step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; padding-block: 30px; border-block-end: 1px solid var(--hairline); position: relative; } .step:last-child { border-block-end: none; } /* Connector line down the spine of the numbered steps */ .step:not(:last-child)::before { content: ''; position: absolute; inset-block-start: 82px; inset-block-end: -2px; inset-inline-start: 25px; width: 1px; background: linear-gradient(to bottom, rgba(200,169,110,0.35), rgba(200,169,110,0.05)); } /* Desktop: lay the 3 steps out as a horizontal timeline so the wide container reads as a deliberate 3-beat process, not a thin column adrift in whitespace. */ @media (min-width: 821px) { .v6-how .container { max-inline-size: 1020px; } /* Desktop: the steps become a centered horizontal 3-beat timeline, so center the whole header (eyebrow, H2, intro rule) to read as one composed column above the timeline, rather than a start-anchored heading with a stray-looking rule floating beside it. */ .v6-how .container { text-align: center; } .v6-how .section-sub { margin-inline: auto; } /* Widen + center the intro rule so it optically bridges the heading to the timeline below instead of reading as accidental whitespace decoration. */ .how-intro-rule { width: clamp(360px, 52%, 560px); margin-inline: auto; margin-block: 26px 6px; } .steps { flex-direction: row; gap: 0; margin-block-start: 60px; } .step { grid-template-columns: 1fr; gap: 0; flex: 1; text-align: center; padding: 0 26px; border-block-end: none; } .step > div { margin-block-start: 22px; } .step .step-num { margin-inline: auto; } /* Horizontal connector with an arrowhead between consecutive steps, threading through the number badges so the eye follows 1 → 2 → 3. RTL: the flow points to the left. */ .step:not(:last-child)::before { /* Thread the line through the vertical CENTER of the 52px number badge. The badge sits 22px below the step's top edge, so its center is 22 + 26 = 48px (measured constant across all desktop widths). */ inset: 48px auto auto auto; inset-inline-start: auto; inset-inline-end: -50%; width: 100%; height: 1px; background: linear-gradient(to left, rgba(200,169,110,0.05), rgba(200,169,110,0.40) 50%, rgba(200,169,110,0.05)); z-index: 0; } .step:not(:last-child)::after { content: ''; position: absolute; inset-block-start: 44px; inset-inline-start: 0; width: 8px; height: 8px; border-inline-start: 1px solid rgba(200,169,110,0.55); border-block-end: 1px solid rgba(200,169,110,0.55); transform: rotate(45deg); z-index: 1; } } .step-num { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--void-4) 0%, var(--void-5) 100%); border: 1px solid rgba(200,169,110,0.30); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Rubik', sans-serif; font-size: 1.4rem; font-weight: 800; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.30), inset 0 1px 0 rgba(200,169,110,0.16); position: relative; z-index: 1; transition: border-color 0.25s, box-shadow 0.25s, color 0.25s; } .step:hover .step-num { border-color: rgba(200,169,110,0.55); color: var(--gold-bright); box-shadow: 0 6px 20px rgba(0,0,0,0.34), 0 0 18px rgba(200,169,110,0.16), inset 0 1px 0 rgba(200,169,110,0.20); } .step-title { font-family: 'Rubik', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--cream); margin-block-end: 8px; letter-spacing: -0.01em; } .step-desc { font-family: 'Assistant', sans-serif; font-size: 1rem; color: var(--cream-soft); line-height: var(--lh-body); font-weight: 400; } /* ══════════════════════════════ PORTAL ══════════════════════════════ */ .v6-portal { background: linear-gradient(165deg, var(--bg-deep-3) 0%, var(--void-3) 50%, var(--bg-deep-6) 100%); position: relative; overflow: hidden; } .v6-portal::before { content: ''; position: absolute; inset-block-end: -20%; inset-inline-start: -10%; width: 60%; height: 80%; background: radial-gradient(ellipse, rgba(200,169,110,0.08) 0%, transparent 65%); pointer-events: none; } .v6-portal > .container { text-align: center; } .v6-portal .portal-grid { text-align: start; } .portal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-block: 40px; } .portal-feature { background: linear-gradient(165deg, rgba(200,169,110,0.12) 0%, rgba(200,169,110,0.05) 100%); border: 1px solid rgba(200,169,110,0.24); border-radius: var(--r-card); padding: 32px 26px; transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s; box-shadow: 0 6px 22px rgba(0,0,0,0.20), inset 0 1px 0 rgba(200,169,110,0.16); } .portal-feature:hover { border-color: rgba(200,169,110,0.42); background: linear-gradient(165deg, rgba(200,169,110,0.13) 0%, rgba(200,169,110,0.05) 100%); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.32), inset 0 1px 0 rgba(200,169,110,0.18); } .portal-icon { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--void-4) 0%, var(--void-5) 100%); border: 1px solid rgba(200,169,110,0.28); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-block-end: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(200,169,110,0.12); transition: color 0.25s, border-color 0.25s, box-shadow 0.25s; } .portal-feature:hover .portal-icon { color: var(--gold-bright); border-color: rgba(200,169,110,0.45); box-shadow: 0 6px 18px rgba(0,0,0,0.32), 0 0 18px rgba(200,169,110,0.18), inset 0 1px 0 rgba(200,169,110,0.18); } .portal-feat-title { font-family: 'Rubik', sans-serif; font-size: 1.04rem; font-weight: 700; color: var(--gold-bright); margin-block-end: 9px; letter-spacing: -0.01em; } .portal-feat-desc { font-size: 0.95rem; color: var(--cream); line-height: 1.66; font-weight: 400; } .portal-cta-row { text-align: center; } .portal-note { font-size: 0.84rem; color: var(--cream-soft); margin-block-start: 14px; } /* ══════════════════════════════ FOUNDERS / ABOUT ══════════════════════════════ */ .v6-about { background: linear-gradient(165deg, var(--bg-deep-3) 0%, var(--void-3) 45%, var(--bg-deep-7) 100%); position: relative; overflow: hidden; } .v6-about-wc-corner { /* Removed per Nave 2026-06-15: the olive-branch corner read as "stuck and unrelated" in the founders / about sections. Hidden globally so it never recurs on any page. */ display: none; position: absolute; inset-block-end: -60px; inset-inline-end: -80px; width: 380px; pointer-events: none; opacity: 0.45; } .v6-about-wc-corner img { width: 100%; filter: brightness(0.9) contrast(1.05) saturate(1.0) sepia(0.15) hue-rotate(5deg); mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse at 60% 60%, #000 40%, transparent 80%); mask-image: radial-gradient(ellipse at 60% 60%, #000 40%, transparent 80%); } .founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-block-start: 48px; position: relative; z-index: 1; } .founder-card { background: linear-gradient(170deg, var(--void-5) 0%, var(--void-4) 38%, var(--void-3) 100%); border: 1px solid var(--hairline); border-radius: var(--r-card); padding-block-start: 36px; text-align: center; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(200,169,110,0.12); position: relative; } /* A faint gold seam at the top edge gives the card a lit, crafted feel */ .founder-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 18%; height: 1px; background: linear-gradient(to left, transparent, rgba(200,169,110,0.45), transparent); } .founder-card:hover { border-color: rgba(200,169,110,0.38); box-shadow: 0 18px 52px rgba(0,0,0,0.42), inset 0 1px 0 rgba(200,169,110,0.18); transform: translateY(-4px); } .founder-photo-wrap { width: 180px; height: 180px; margin-inline: auto; border-radius: var(--r-arch); overflow: hidden; border: 2px solid rgba(200,169,110,0.32); box-shadow: 0 0 0 5px rgba(200,169,110,0.08), 0 10px 28px rgba(0,0,0,0.30); transition: border-color 0.25s, box-shadow 0.25s; } .founder-card:hover .founder-photo-wrap { border-color: rgba(200,169,110,0.55); box-shadow: 0 0 0 5px rgba(200,169,110,0.14), 0 14px 34px rgba(0,0,0,0.38); } .founder-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: brightness(0.92) contrast(1.05) grayscale(0.12) sepia(0.10); transition: filter 0.3s, transform 0.4s; } .founder-card:hover .founder-photo { filter: brightness(1) contrast(1.06) grayscale(0) sepia(0.05); transform: scale(1.03); } .founder-initials-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--void-4) 0%, var(--void-5) 100%); display: none; align-items: center; justify-content: center; font-family: 'Rubik', sans-serif; font-size: 2rem; font-weight: 800; color: var(--gold); } .founder-body { padding: 20px 24px 28px; } .founder-role { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-bright); text-transform: none; margin-block-end: 7px; } .founder-name { font-family: 'Rubik', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--gold); margin-block-end: 12px; letter-spacing: -0.01em; } .founder-tags { font-family: 'Assistant', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--gold); letter-spacing: 0.005em; margin-block: -4px 14px; } .founder-bio { font-size: 0.95rem; color: var(--cream-soft); line-height: 1.72; font-weight: 400; } .about-pull-quote { margin-block-start: 56px; padding: 64px 56px; background: linear-gradient(135deg, var(--void-2) 0%, rgba(30,45,26,0.60) 100%); border: 1px solid rgba(200,169,110,0.22); border-radius: var(--r-panel); text-align: center; position: relative; z-index: 1; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.30), inset 0 1px 0 rgba(200,169,110,0.15); } .about-pull-quote::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(200,169,110,0.08) 0%, transparent 65%); pointer-events: none; } /* Oversized decorative quotation glyph — Hebrew opening mark is the lower-9 (\201E), anchored on the RTL text-start edge (inline-end = visual right) so it sits above the first words instead of floating mirrored on the wrong margin */ .about-pull-quote::after { content: '\201E'; position: absolute; inset-block-start: 0.04em; inset-inline-end: 0.32em; font-family: 'Rubik', sans-serif; font-size: 9rem; line-height: 1; font-weight: 900; color: rgba(200,169,110,0.16); pointer-events: none; z-index: 0; } .about-pull-quote blockquote { font-family: 'Rubik', sans-serif; font-size: var(--fs-quote); font-weight: 700; color: var(--cream); line-height: 1.50; position: relative; z-index: 1; letter-spacing: -0.01em; } .about-pull-quote blockquote em { color: var(--gold); font-style: normal; } /* ══════════════════════════════ BLOG TEASER ══════════════════════════════ */ .v6-blog { background: linear-gradient(180deg, var(--bg-deep-2) 0%, var(--void-2) 45%, var(--bg-deep-3) 100%); position: relative; } .v6-blog::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(200,169,110,0.08) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 10% 100%, rgba(122,158,108,0.07) 0%, transparent 55%); pointer-events: none; } .v6-blog .section-eyebrow { display: inline-flex; } .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 48px; position: relative; z-index: 1; } .post-card { background: var(--void-3); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; box-shadow: 0 8px 28px rgba(0,0,0,0.22); } .post-card:hover { border-color: rgba(200,169,110,0.48); transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0,0,0,0.40), 0 0 0 1px rgba(200,169,110,0.22); } .post-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative; /* Skeleton placeholder: a textured diagonal sheen behind the image so an un-loaded / slow / failed thumbnail never reads as a flat dark rectangle */ background: linear-gradient(135deg, var(--void-4) 0%, var(--void-3) 45%, var(--void-4) 100%); } .post-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(200,169,110,0.10) 50%, transparent 70%); background-size: 220% 100%; pointer-events: none; z-index: 0; } @media (prefers-reduced-motion: no-preference) { .post-thumb::before { animation: thumb-shimmer 2.2s ease-in-out infinite; } } .post-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(1.1); transition: filter 0.3s, transform 0.4s; } .post-card:hover .post-thumb img { filter: brightness(0.92) saturate(1.15); transform: scale(1.04); } .post-body { padding: 22px 24px 26px; } .post-tag { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; color: var(--gold-bright); letter-spacing: 0.08em; margin-block-end: 12px; padding: 4px 11px; border: 1px solid rgba(200,169,110,0.28); border-radius: var(--r-pill); background: rgba(200,169,110,0.07); } .post-title { font-family: 'Rubik', sans-serif; font-size: 1.08rem; font-weight: 700; color: var(--bone); line-height: 1.38; margin-block-end: 10px; letter-spacing: -0.01em; } .post-excerpt { font-size: 0.94rem; color: var(--bone-soft); line-height: 1.68; font-weight: 400; } .post-meta { margin-block-start: 16px; border-block-start: 1px solid rgba(200,169,110,0.12); padding-block-start: 14px; } .post-meta a { font-size: 0.82rem; color: var(--gold); font-weight: 600; } .post-meta a:hover { color: var(--gold-bright); } .blog-cta-row { text-align: center; margin-block-start: 40px; position: relative; z-index: 1; } /* ══════════════════════════════ FAQ ══════════════════════════════ */ .v6-faq { background: var(--void-3); } .v6-faq .section-eyebrow { display: inline-flex; } .faq-list { margin-block-start: 48px; } .faq-item { border-block-end: 1px solid var(--hairline); } .faq-item:first-child { border-block-start: 1px solid var(--hairline); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: none; border: none; cursor: pointer; padding: 22px 0; font-family: 'Rubik', sans-serif; font-size: 1rem; font-weight: 500; color: var(--cream); text-align: start; transition: color 0.15s; } .faq-q:hover { color: var(--gold-bright); } .faq-plus { flex-shrink: 0; width: 22px; height: 22px; color: var(--gold); transition: transform 0.25s ease; } .faq-item.open .faq-plus { transform: rotate(45deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .faq-item.open .faq-a { max-height: 400px; } .faq-a-inner { padding-block-end: 20px; font-size: 0.98rem; color: var(--cream-soft); line-height: var(--lh-body); font-weight: 400; border-inline-start: 2px solid var(--gold); padding-inline-start: 16px; } /* ══════════════════════════════ CTA / CONTACT ══════════════════════════════ */ .v6-cta { background: linear-gradient(180deg, var(--bg-deep-3) 0%, var(--bg-deep-4) 45%, var(--bg-deep-5) 100%); position: relative; overflow: hidden; } .v6-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 30%, rgba(200,169,110,0.16) 0%, rgba(200,169,110,0.04) 42%, transparent 72%), radial-gradient(ellipse 50% 55% at 85% 85%, rgba(122,158,108,0.16) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 12% 90%, rgba(90,112,64,0.14) 0%, transparent 60%); pointer-events: none; } .cta-wc-base { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 52%; height: 100%; pointer-events: none; opacity: 0.5; } .cta-wc-base img { width: 100%; height: 100%; object-fit: cover; /* On a near-black CTA, MULTIPLY would crush the watercolor to invisible. SCREEN lets the grain read as a soft luminous wash that lifts the dark, so the left half of the CTA carries real texture instead of reading as flat dark card. */ filter: brightness(0.95) contrast(1.04) saturate(1.05) sepia(0.12) hue-rotate(4deg); mix-blend-mode: screen; /* Watercolor sits on the inline-start (RTL: right) edge; fade it OUT toward the content side. Both properties use the same physical direction so the fade is consistent across browsers. */ -webkit-mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 92%); mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 92%); } .cta-inner { position: relative; z-index: 1; text-align: center; } .cta-title { font-family: 'Rubik', sans-serif; font-size: var(--fs-h2); font-weight: 900; color: var(--cream); margin-block-end: 16px; letter-spacing: -0.01em; } .cta-title em { color: var(--gold); font-style: normal; text-shadow: 0 0 28px var(--gold-glow); } .cta-sub { color: var(--bone-soft); font-size: 1.05rem; max-inline-size: 520px; margin-inline: auto; margin-block-end: 44px; line-height: 1.72; font-weight: 400; } .cta-card { background: linear-gradient(170deg, var(--void-4) 0%, var(--void-3) 45%, var(--void-2) 100%); border: 1px solid rgba(200,169,110,0.22); border-radius: var(--r-panel); padding: 46px 44px; max-inline-size: 560px; margin-inline: auto; box-shadow: var(--shadow-float), inset 0 1px 0 rgba(200,169,110,0.16); position: relative; overflow: hidden; } .cta-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 22%; height: 2px; border-radius: 2px; background: linear-gradient(to left, transparent, var(--gold), transparent); } .contact-form { display: flex; flex-direction: column; gap: 14px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-input { background: rgba(30,45,26,0.55); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; font-family: 'Assistant', sans-serif; font-size: 1rem; color: var(--cream); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; direction: rtl; } html[dir="ltr"] .form-input { direction: ltr; } .form-input:hover { border-color: rgba(200,169,110,0.35); background: rgba(30,45,26,0.7); } .form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); } .form-input::placeholder { color: var(--cream-label); opacity: 1; } textarea.form-input { resize: vertical; min-height: 90px; } .btn-submit { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); color: var(--void); border: none; border-radius: var(--r-pill); padding: 16px 32px; font-family: 'Rubik', sans-serif; font-size: 1.05rem; font-weight: 700; cursor: pointer; width: 100%; box-shadow: 0 4px 20px rgba(200,169,110,0.30); transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn-submit:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,169,110,0.40); } .btn-submit:active { transform: translateY(0); transition-duration: 80ms; } .or-divider { display: flex; align-items: center; gap: 14px; margin-block: 20px; color: var(--cream-label); font-size: 0.84rem; } .or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); } .whatsapp-btn { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 13px 20px; color: var(--gold); font-weight: 600; font-size: 0.92rem; transition: border-color 0.15s, background 0.15s; } .whatsapp-btn:hover { border-color: var(--gold); background: var(--gold-glow); } .form-success { display: none; text-align: center; padding: 24px 0; } .form-success-check { color: var(--gold); margin-block-end: 12px; } .form-success-check svg { width: 34px; height: 34px; } .form-success p { font-size: 1.1rem; font-weight: 700; color: var(--bone); } .form-success p.sub { font-size: 0.9rem; color: var(--bone-soft); font-weight: 300; margin-block-start: 6px; } /* ══════════════════════════════ FOOTER ══════════════════════════════ */ .v6-footer { background: var(--void-2); border-block-start: 1px solid var(--hairline); padding-block: 40px 24px; } .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; margin-block-end: 28px; } .footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .footer-logo-wrap { display: inline-flex; align-items: center; gap: 10px; } .footer-logo-wrap img.f-logo { height: 34px; width: auto; object-fit: contain; } /* The wordmark logo (allarounder-logo-v3b-cream.png) already includes the octopus, and this separate octopus-forest-on-cream tile renders as a duplicate octopus on the dark footer (its cream background also shows as an opaque tile). Hidden site-wide 2026-06-18; the wordmark carries the brand, the text fallback below carries the name if the wordmark fails. */ .footer-logo-wrap img.f-oct { display: none; height: 40px; width: auto; object-fit: contain; opacity: 0.7; } /* Text-only fallback: shown the moment the WORDMARK image fails to load (independent of the octopus), so the brand NAME is always visible. var(--void-3) wrap guarantees a lit container. */ .footer-logo-text { display: none; font-family: 'Rubik', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--gold); letter-spacing: -0.01em; } /* Wordmark failed → hide just the wordmark and reveal the text brand name; the octopus (if it loaded) stays visible beside it. */ .footer-logo-wrap.logo-failed img.f-logo { display: none; } .footer-logo-wrap.logo-failed .footer-logo-text { display: inline-block; } /* Octopus failed independently → hide only the octopus; nothing else is affected, so the wordmark (or its text fallback) always carries the brand name. */ .footer-logo-wrap img.f-oct.is-failed { display: none; } .footer-tagline { font-size: 0.9rem; color: var(--cream-soft); line-height: 1.6; max-inline-size: 240px; } .footer-heading { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold-bright); margin-block-end: 14px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 6px; } .footer-links a { font-size: 0.92rem; color: var(--cream-soft); transition: color 0.15s; text-underline-offset: 3px; } .footer-links a:hover { color: var(--gold-bright); text-decoration: underline; } .footer-bottom { padding-block-start: 20px; border-block-start: 1px solid var(--hairline-2); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .footer-copy { font-size: 0.85rem; color: var(--cream-soft); } .footer-legal { display: flex; gap: 20px; } .footer-legal a { font-size: 0.85rem; color: var(--cream-soft); transition: color 0.15s; text-underline-offset: 3px; } .footer-legal a:hover { color: var(--gold-bright); text-decoration: underline; } /* ══ SCROLL TO TOP ══ */ #scroll-top { position: fixed; inset-block-end: 28px; inset-inline-end: 28px; width: 44px; height: 44px; background: var(--gold); border: none; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(61,74,45,0.28); transition: background 0.15s, transform 0.15s; z-index: 998; color: #F5F0E8; } #scroll-top.visible { display: flex; } #scroll-top:hover { background: var(--gold-bright); transform: translateY(-2px); } /* ══ BACK LINK BAR (dev/gallery nav - hidden on the production view) ══ */ .back-bar { position: fixed; inset-block-start: 68px; inset-inline-end: 0; inset-inline-start: 0; z-index: 800; display: none; /* dev artifact: a founder sees a clean page. Re-enable with ?preview=1 via JS. */ /* visibility:hidden (in addition to display:none) takes the anchor out of the accessibility tree regardless of JS state, so AT/keyboard users can never tab to it on the production view. */ visibility: hidden; justify-content: flex-start; padding: 0 28px; pointer-events: none; } body.show-back-bar .back-bar { display: flex; visibility: visible; } .back-bar a { pointer-events: all; display: inline-flex; align-items: center; gap: 6px; font-family: 'Rubik', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--cream-mute); background: rgba(30,45,26,0.80); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--hairline); border-block-start: none; border-radius: 0 0 8px 8px; padding: 6px 14px 7px; transition: color 0.15s, background 0.15s; text-decoration: none; } .back-bar a:hover { color: var(--gold-bright); background: rgba(30,45,26,0.95); } /* ══ SKIP NAV ══ */ .skip-nav { position: absolute; inset-block-start: -40px; inset-inline-start: 0; padding: 8px 16px; background: var(--gold); color: var(--void); font-size: 14px; font-weight: 700; z-index: 9999; transition: inset-block-start 0.2s; border-radius: 0 0 4px 4px; text-decoration: none; } .skip-nav:focus { inset-block-start: 0; } /* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */ @media (max-width: 900px) { .founders-grid { grid-template-columns: 1fr; max-inline-size: 480px; margin-inline: auto; } .portal-grid { grid-template-columns: repeat(2, 1fr); } .posts-grid { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr 1fr; } } /* Tablet band: collapse the services grid 3→2 in lockstep with the title-button font clamp (both at 820px) so the accordion titles can never wrap before the layout gives them room — removes the 820–900px seam. Portal/posts already 2-col here. */ @media (max-width: 820px) { .sv6-grid { grid-template-columns: repeat(2, 1fr); } .sv6-title-btn { padding: 24px 20px; } .sv6-title-text { font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.7rem); } /* Keep the hero ghost-word clearly subordinate to the h1 across the full tablet range (680–900px) where both the headline and the 26vw ghost word otherwise peak together */ .hero-ghost-word { font-size: clamp(7rem, 18vw, 11rem); -webkit-text-stroke-width: 2px; } } @media (max-width: 720px) { section { padding-block: clamp(56px, 8vh, 96px); } .v6-hero { min-height: auto; padding-block: 18vh 80px; } .hero-wc { display: none; } /* Stacked accordion: drop the gold-hairline grid (which reads as a table at 1-col) and use a single bottom divider per card so it reads as a clean list, not a spreadsheet */ .sv6-grid { grid-template-columns: 1fr; background: transparent; gap: 0; border: 1px solid var(--hairline); } .sv6-card { border-block-end: 1px solid var(--hairline); } .sv6-card:last-child { border-block-end: none; } .posts-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .cta-card { padding: 28px 22px; } .cta-wc-base { width: 100%; opacity: 0.32; } .about-pull-quote { padding: 32px 24px; } .pain-bottom { padding: 28px 24px; } .pain-deck { padding: 30px 18px 20px; } } @media (max-width: 680px) { .nav-links { display: none; } .nav-actions { display: none; } .hamburger { display: flex; } } @media (max-width: 520px) { /* Keep the portal at a tight 2-col through the phone band so the cards stay a comfortable width; only collapse to a single column below 400px (handled separately) where 2-col would force each card too narrow to read. Prevents the abrupt 2→1 jump at 520px. */ .portal-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .portal-feature { padding: 24px 18px; } .hero-octopus-bg { display: none; } .hero-ghost-word { font-size: 10rem; } .hero-stats { gap: 10px; } .hero-stat { padding: 9px 16px 9px 14px; } .hero-stat-label { font-size: 0.88rem; } } @media (max-width: 400px) { .portal-grid { grid-template-columns: 1fr; gap: 14px; } .portal-feature { padding: 28px 22px; } } /* ══════════════════════════════ LIGHT-MODE OVERRIDE — REMOVED for V2. V2 is the "Night" (לילה) direction Noam chose: the dark forest-green brand is the single, intended theme for every visitor. `color-scheme: dark` on :root locks native UI (form controls, scrollbars) to dark too, so there is no light flash and no second theme that would show daytime/light-OS visitors a design Noam never approved. ══════════════════════════════ */ /* ══════════════════════════════ CONTACT MODAL - on-page contact window for shichat heykrut (Nave 2026-06-15) The contact CTAs used to jump the visitor to the bottom of the homepage. Now any link to #contact / /v2/#contact opens this modal on the current page. Markup + behavior injected by /v2/assets/js/contact-modal.js (shared, every page). ══════════════════════════════ */ .contact-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .contact-modal.is-open { display: flex; } .cm-backdrop { position: absolute; inset: 0; background: rgba(12, 20, 10, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cmFade 0.22s ease; } .cm-dialog { position: relative; z-index: 1; inline-size: min(480px, 100%); max-block-size: calc(100dvh - 48px); overflow-y: auto; background: linear-gradient(170deg, var(--void-3, #243a1f) 0%, var(--void, #1e2d1a) 100%); border: 1px solid rgba(200,169,110,0.34); border-radius: var(--r-card, 18px); box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(200,169,110,0.16); padding: 40px 34px 34px; animation: cmRise 0.26s cubic-bezier(0.22,0.61,0.36,1); } @keyframes cmFade { from { opacity: 0; } to { opacity: 1; } } @keyframes cmRise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cm-backdrop, .cm-dialog { animation: none; } } .cm-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; inline-size: 38px; block-size: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(200,169,110,0.26); border-radius: 50%; background: rgba(200,169,110,0.06); color: var(--cream-soft, #d9d2c6); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .cm-close:hover { color: var(--gold-bright, #E2C488); border-color: rgba(200,169,110,0.5); background: rgba(200,169,110,0.12); } .cm-eyebrow { font-family: 'Assistant', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: var(--gold, #C8A96E); margin-block-end: 8px; } .cm-title { font-family: 'Rubik', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--cream, #F5F0E8); line-height: 1.2; letter-spacing: -0.01em; margin-block-end: 10px; } .cm-title em { color: var(--gold-bright, #E2C488); font-style: normal; } .cm-sub { font-family: 'Assistant', sans-serif; font-size: 0.98rem; color: var(--cream-soft, #d9d2c6); line-height: 1.6; margin-block-end: 22px; } .cm-dialog .contact-form { margin: 0; } @media (max-width: 480px) { .cm-dialog { padding: 36px 22px 26px; } .cm-title { font-size: 1.4rem; } }