/* =================================================================== נתן נתי קדר — מילים. קול. עריכה. Base: direction B1 (dark & bold, clean waveform + yellow playhead) Restrained with B2: deeper black, hairline borders, less glow. Structure of this file: 01. Tokens & reset 02. Layout helpers (container, section, headings) 03. Buttons 04. Header 05. Hero + waveform 06. Services (4 cards) 07. Flow (1 episode -> content package) 08. Portfolio (rendered by js/main.js) 09. Audio player (shared: portfolio / before-after / narration) 10. Before / After 11. Narration 12. About + experience 13. Book 14. Contact 15. Footer + floating WhatsApp 16. Focus, motion, responsive =================================================================== */ /* ============ 01. TOKENS & RESET ============ */ :root { /* brand */ --purple: #7900FF; --purple-soft: #9B4DFF; --purple-glow: #B98BFF; /* Light end of the .btn-primary gradient only. --purple-soft (#9B4DFF) is 4.29:1 against white — under AA. #8A33F5 is 5.42:1. Kept as its own token so --purple-soft stays untouched for borders / glows / accent-color, where it is decorative and no contrast threshold applies. */ --purple-btn: #8A33F5; --yellow: #FFD800; /* WhatsApp brand green is kept as-is; the buttons that use it now carry --ink text/icons instead of white. White was 1.98:1 on #25D366 (fails AA and fails 1.4.11 for the icon); --ink is 10.1:1 on #25D366 and 4.65:1 on #128C4B, so the whole gradient passes. */ --wa: #25D366; --wa-deep: #128C4B; /* surfaces — deeper floor borrowed from B2 */ --ink: #08080B; --ink-2: #0C0C11; --card: #101017; --card-2: #15151C; /* hairline borders (B2) rather than B1's heavier lines */ --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.13); /* type */ --text: #F4F3F8; --muted: #A9A8B7; --muted-2: #8E8DA3; /* passes AA on --ink and --card */ --radius: 20px; --radius-sm: 14px; --maxw: 1120px; --ease: cubic-bezier(.22, .61, .36, 1); /* hero playhead position, measured from the physical left edge. In RTL the "played" part is everything to the RIGHT of it. */ --play: 62%; /* טבעת פוקוס — צהוב על כהה. במצב בהיר מוחלפת לסגול, ובתוך משטחי המדיה הכהים מוצהרת מחדש צהובה (ראו סעיף 17). */ --focus-ring: rgba(255, 216, 0, 0.55); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* Both html AND body need overflow-x: clip. An overflow value on alone is propagated to the viewport and itself is then treated as visible — so the ambient glows would escape and create a horizontal scroll. Setting it on makes the viewport use that value, which leaves 's own clip to actually contain the glows. clip (not hidden) — hidden would make these scroll containers and break the sticky header. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; padding: 0; background: var(--ink); color: var(--text); min-height: 100vh; width: 100%; font-family: 'Heebo', 'Assistant', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-size: 17px; line-height: 1.62; font-weight: 400; overflow-x: clip; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* מעבר עדין בעת החלפת ערכה. רק על אלמנטים ללא transition משלהם, כדי לא לדרוס מעברי hover קיימים (כפתורים/כרטיסים מנהלים את המעבר בעצמם). */ body, .site-header, .band, .wave-shell, .thumb, .wave-panel, .exp-card, .book-band, .contact-card { transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); } h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; text-wrap: balance; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg, iframe { max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link — .sr-only until focused, then a real visible control. Specificity (0,2,0) beats .sr-only (0,1,0), so every clipping property has to be undone explicitly here. */ .skip-link:focus { position: fixed; inset-block-start: .6rem; inset-inline-start: .6rem; width: auto; height: auto; margin: 0; padding: .75rem 1.15rem; overflow: visible; clip: auto; clip-path: none; z-index: 100; background: var(--purple); color: #fff; border-radius: 10px; font-weight: 800; font-size: .95rem; } /* ambient glows — B1's idea, dialled back toward B2 */ /* These scroll behind the blurred sticky header, so every frame used to force a re-blur of a 460-560px surface. will-change promotes each one to its own composited layer: the blur is rasterized once and then only re-composited. The radii already fade to transparent by 62-66%, so 40px of blur reads the same as the previous 55-65px while costing noticeably less to raster. */ .glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; will-change: transform; } .glow-1 { top: -200px; inset-inline-end: -180px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(121, 0, 255, 0.26), transparent 64%); filter: blur(40px); } .glow-2 { top: 640px; inset-inline-start: -220px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255, 216, 0, 0.06), transparent 63%); filter: blur(40px); } .glow-3 { bottom: 200px; inset-inline-end: -180px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(121, 0, 255, 0.15), transparent 66%); filter: blur(40px); } /* ============ 02. LAYOUT HELPERS ============ */ .container { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 2.25rem); } section { position: relative; z-index: 1; padding-block: clamp(3.4rem, 8vw, 6rem); } /* offsets for the sticky header when jumping to an anchor */ [id] { scroll-margin-top: 82px; } .band { background: linear-gradient(180deg, var(--ink-2), var(--ink)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 800; letter-spacing: .09em; color: var(--purple-glow); text-transform: uppercase; } .kicker::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--purple-soft); flex: none; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: var(--yellow); background: rgba(255, 216, 0, 0.06); border: 1px solid rgba(255, 216, 0, 0.18); padding: .38rem .8rem; border-radius: 999px; } .eyebrow .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 9px var(--yellow); flex: none; } .section-head { max-width: 640px; margin-bottom: clamp(2rem, 4.5vw, 3.2rem); } .section-head h2 { font-size: clamp(1.8rem, 5.2vw, 2.75rem); font-weight: 900; line-height: 1.1; margin-top: .85rem; } .section-head h2 .hl { color: var(--yellow); } .section-head p { margin-top: .9rem; color: var(--muted); font-size: 1.05rem; } /* ============ 03. BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.7rem; border-radius: 13px; font-family: inherit; font-weight: 800; font-size: 1rem; line-height: 1; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { background: linear-gradient(135deg, var(--purple), var(--purple-btn)); color: #fff; box-shadow: 0 12px 32px -12px rgba(121, 0, 255, 0.8); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 42px -12px rgba(121, 0, 255, 0.9); } .btn-ghost { background: rgba(255, 255, 255, 0.035); color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover { transform: translateY(-3px); border-color: rgba(255, 216, 0, 0.45); background: rgba(255, 216, 0, 0.05); color: var(--yellow); } .btn-wa { background: linear-gradient(135deg, var(--wa), var(--wa-deep)); color: var(--ink); /* see --wa in :root — white fails AA on this gradient */ box-shadow: 0 14px 34px -12px rgba(37, 211, 102, 0.7); } .btn-wa:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgba(37, 211, 102, 0.85); } /* ============ 04. HEADER ============ */ .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(8, 8, 11, 0.74); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .9rem; } .brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; min-width: 0; min-height: 44px; /* WCAG 2.5.8 target size — content stays centred */ } .brand .mark { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--purple), var(--purple-soft)); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 18px rgba(121, 0, 255, 0.35); } .brand .mark svg { width: 19px; height: 19px; display: block; color: #fff; } .header-link { font-weight: 700; font-size: .92rem; color: var(--muted); display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; min-height: 44px; /* WCAG 2.5.8 — the pill just grows, nothing shifts */ border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; flex: none; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .header-link:hover { color: var(--yellow); border-color: rgba(255, 216, 0, 0.4); background: rgba(255, 216, 0, 0.05); } .header-link svg { width: 16px; height: 16px; flex: none; } /* קבוצת הפעולות בקצה ה-header: מתג הערכה + קישור הוואטסאפ, צמודים זה לזה */ .header-actions { display: inline-flex; align-items: center; gap: .5rem; flex: none; } /* מתג שמש/ירח נשלף. שני האייקונים גלויים תמיד; הכדור הסגול מחליק לצד הפעיל ומאיר את האייקון שמתחתיו. ההחלפה מנוהלת ע"י data-theme על ה-html (main.js), וה-CSS מזיז את הכדור. יעד מגע 58×32 (עובר WCAG 2.5.8 AA). */ .theme-toggle { position: relative; width: 58px; height: 32px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.05); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); } .theme-toggle:hover { border-color: rgba(255, 216, 0, 0.4); } .theme-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; } .theme-toggle .ts-knob { position: absolute; top: 3px; left: 3px; z-index: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--purple); transform: translateX(28px); /* כהה (ברירת מחדל) → כדור בצד הירח */ transition: transform .3s cubic-bezier(.34, 1.4, .5, 1); } .theme-toggle .ic-sun, .theme-toggle .ic-moon { position: absolute; top: 8px; z-index: 1; width: 16px; height: 16px; display: block; transition: color .2s var(--ease); } .theme-toggle .ic-sun { left: 8px; color: var(--muted); } /* כהה → שמש עמומה */ .theme-toggle .ic-moon { right: 8px; color: #fff; } /* כהה → ירח מואר */ /* בהיר → כדור מחליק לשמש; השמש מוארת, הירח עמום */ [data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .theme-toggle .ts-knob { transform: translateX(0); } [data-theme="light"] .theme-toggle .ic-sun { color: #fff; } [data-theme="light"] .theme-toggle .ic-moon { color: var(--muted); } @media (prefers-reduced-motion: reduce) { .theme-toggle .ts-knob { transition: none; } } /* ============ 05. HERO ============ */ .hero { padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(2.2rem, 5vw, 3.4rem); } .hero-inner { max-width: 900px; } .hero-title { font-size: clamp(3rem, 13.5vw, 6.4rem); font-weight: 900; line-height: .96; letter-spacing: -.04em; margin-top: 1.35rem; } .hero-title span { display: block; } /* background-clip: text paints the gradient only inside this span's padding box. With line-height .96 that box ends above the descender of ק / ן / ך / ף / ץ, so the tail of «קול.» was being sliced off. The padding grows the paint area; the negative margin cancels it again, so the layout — and the line-height .96 look — is byte-for-byte what it was. */ .hero-title .l2 { background: linear-gradient(100deg, var(--purple-glow), var(--yellow)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-block-end: .12em; margin-block-end: -.12em; } .hero-sub { font-size: clamp(1.25rem, 3.6vw, 1.8rem); font-weight: 700; color: var(--text); margin-top: 1.4rem; max-width: 620px; line-height: 1.32; } .hero-lede { font-size: clamp(1rem, 2.6vw, 1.1rem); color: var(--muted); margin-top: 1rem; max-width: 560px; } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; } /* "זמין עכשיו" — a small studio-style availability pill with a live pulsing dot. Sits between the lede and the CTA; reinforces "an open studio, now". */ .availability { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem; padding: .42em .95em; font-size: .82rem; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 999px; } .live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); animation: livePulse 2.2s ease-out infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } } /* ---- hero waveform + yellow playhead ---- Embedded / borderless: the bars sit directly on the hero background, no card, no ruler — a cleaner, more integrated look than a framed "player" box. */ .wave-shell { position: relative; margin-top: clamp(2.2rem, 6vw, 3.2rem); } .wave-meta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--muted-2); } .wave-meta .wm-left { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; } .wave-meta .wm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 9px rgba(255, 216, 0, 0.7); flex: none; } .wave-meta .wm-name { color: var(--muted); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wave-meta .wm-time { font-variant-numeric: tabular-nums; letter-spacing: .06em; flex: none; } .hero-wave { position: relative; z-index: 2; height: clamp(62px, 12vw, 98px); pointer-events: none; /* דקורטיבי — לא לחיץ, גם לא משנה סמן בריחוף */ } /* ההתמזגות חלה על הברים בלבד (לא על המכולה) — כך הקצוות "נמסים" לרקע, אבל המרקר הצהוב חופשי להתארך מעל ומתחת בלי שהמסכה תחתוך אותו. */ .hero-wave .wave-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%); } /* un-played (dim) */ .hero-wave .wave-base { color: rgba(155, 77, 255, 0.26); } /* played (bright) — in RTL playback runs right -> left, so everything to the RIGHT of the playhead is already played. clip-path inset() is physical: inset(top right bottom left). */ .hero-wave .wave-played { color: var(--purple-glow); clip-path: inset(0 0 0 var(--play)); filter: drop-shadow(0 0 6px rgba(155, 77, 255, 0.4)); } /* מרקר צהוב — עכשיו מבטא עיצובי בלבד (לא סמן נגן): קו דק ועדין בתוך גבולות הגל, בלי הכפתור/גראבר שהזמין ללחיצה. */ .hero-wave .playhead { position: absolute; top: 0; bottom: 0; left: var(--play); width: 2px; background: rgba(255, 216, 0, 0.7); border-radius: 2px; box-shadow: 0 0 10px rgba(255, 216, 0, 0.35); z-index: 3; } .wave-ruler { position: relative; z-index: 2; margin-top: .95rem; height: 9px; border-top: 1px solid var(--line); background-image: repeating-linear-gradient(to left, var(--line-strong) 0 1px, transparent 1px 44px); background-repeat: no-repeat; background-size: 100% 5px; background-position: top right; opacity: .75; } /* ============ 06. SERVICES ============ */ /* NOTE: every fr track below is minmax(0, 1fr), never plain 1fr — plain 1fr has an automatic min-content floor, which lets long Hebrew strings blow the track past its container instead of wrapping. */ .services-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.9rem, 2vw, 1.25rem); } .service-card { position: relative; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .service-card:hover { transform: translateY(-5px); border-color: rgba(155, 77, 255, 0.35); box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.9); } .service-card.core { border-color: rgba(121, 0, 255, 0.2); } .service-ico { width: 52px; height: 52px; border-radius: 15px; background: rgba(121, 0, 255, 0.14); border: 1px solid rgba(155, 77, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; flex: none; } .service-card.solo .service-ico { background: rgba(255, 216, 0, 0.1); border-color: rgba(255, 216, 0, 0.2); } .service-card h3 { font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .service-card p { color: var(--muted); font-size: .98rem; line-height: 1.6; } .tag { font-size: .66rem; font-weight: 900; letter-spacing: .05em; padding: .25em .65em; border-radius: 999px; line-height: 1; white-space: nowrap; } /* טקסט כהה מקובע (ולא var(--ink), שמתהפך לבהיר בערכה הבהירה) — כך שנשאר כהה-על-צהוב בשתי הערכות. אותו דפוס כמו .btn-wa / .wa-float. */ .tag-core { background: var(--yellow); color: #08080B; } .tag-solo { background: rgba(255, 255, 255, 0.06); color: var(--muted); border: 1px solid var(--line-strong); } /* ============ 07. FLOW ============ */ .flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: center; } .flow-source { background: linear-gradient(135deg, var(--purple), #46009a); border-radius: var(--radius); padding: 1.8rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; justify-content: center; box-shadow: 0 0 44px -16px rgba(121, 0, 255, 0.6); text-align: center; } .flow-source .fs-ico { font-size: 2.3rem; line-height: 1.2; } .flow-source h3 { font-size: 1.4rem; font-weight: 900; color: #fff; } /* .92 not .8 — at .8 this resolved to ~4.42:1 against the #7900FF end of the card gradient, just under AA for 15.2px text. .92 lands at ~6.45:1. */ .flow-source p { color: rgba(255, 255, 255, 0.92); font-size: .95rem; } .flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--yellow); } /* stacked (mobile): the left-pointing arrow is rotated to point DOWN */ .flow-arrow svg { width: 34px; height: 34px; display: block; transform: rotate(-90deg); } .flow-outputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; } .out-chip { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.05rem 1.15rem; display: flex; align-items: center; gap: .8rem; font-weight: 800; font-size: 1rem; transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease); } .out-chip:hover { transform: translateY(-4px); border-color: rgba(255, 216, 0, 0.35); background: var(--card-2); } .out-chip .oc-ico { font-size: 1.45rem; line-height: 1; flex: none; } .out-chip .oc-text { min-width: 0; } .out-chip small { display: block; font-size: .76rem; font-weight: 600; color: var(--muted-2); letter-spacing: 0; } /* ============ 08. PORTFOLIO (rendered by js/main.js) ============ */ /* The portfolio is one section split into labelled groups — one group per service offered above, so each claim has its proof directly under it. .work-groups is the outer stack; each group carries its own .work-grid. */ /* The groups are an accordion: every heading is visible at a glance, and the visitor opens the one area they care about instead of scrolling past all of them. Opening one closes the rest.