/* ==========================================================
style.css — כל הצבעים והגדלים מגיעים מ-tokens.css
========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: env(safe-area-inset-top, 0px); }
@media not all { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--color-cream);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-md);
line-height: var(--leading-body);
text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-petrol); text-underline-offset: 0.2em; }
a:hover { color: var(--color-petrol-deep); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-petrol); outline-offset: 3px; border-radius: 4px; }
/* על רקעים כהים או פטרול: פוקוס בקרם (13:1 על ink, 4.7:1 על petrol) */
:is(.hero, .contact, .site-footer, .site-header, .lightbox, .viewer, .page-header, .skip-link) :focus-visible,
.skip-link:focus-visible { outline-color: var(--color-cream); }
.contact .form :focus-visible { outline-color: var(--color-petrol); }
[hidden] { display: none !important; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: absolute; inset-inline-start: var(--space-4); top: -100px; z-index: 100;
background: var(--color-ink); color: var(--color-cream); padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
}
.skip-link:focus { top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); color: var(--color-cream); }
.container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }
.section { padding-block: var(--space-9); }
.section-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--display-m);
line-height: var(--leading-tight);
color: var(--color-petrol);
margin-bottom: var(--space-6);
}
.section-title--light { color: var(--color-cream); }
.section-intro { max-width: var(--measure); font-size: var(--text-lg); margin-bottom: var(--space-7); }
/* ---- כפתורים: pill ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: 48px; padding: 0.7rem 1.6rem;
border-radius: var(--radius-pill);
font-weight: 600; font-size: var(--text-md); line-height: 1.2; white-space: nowrap;
text-decoration: none;
transition: transform var(--dur-press) var(--ease-out), translate 350ms var(--ease-out), background-color var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 40px; padding: 0.45rem 1.1rem; font-size: var(--text-sm); }
.btn__icon { width: 1.1em; height: 1.1em; fill: currentColor; } /* אייקוני מדיה לא מתהפכים ב-RTL */
.btn--light { background: var(--color-cream); color: var(--color-ink); }
.btn--light:hover { background: var(--color-white); color: var(--color-ink); }
.btn--petrol { background: var(--color-petrol); color: var(--color-white); }
.btn--petrol:hover { background: var(--color-petrol-deep); color: var(--color-white); }
.btn--coral { background: var(--color-coral); color: var(--color-ink); }
.btn--coral:hover { background: var(--color-coral-soft); color: var(--color-ink); }
.btn--outline { border: 2px solid var(--color-petrol); color: var(--color-petrol); }
.btn--outline:hover { background: var(--color-petrol); color: var(--color-white); }
.linklike { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
/* ---- מסגרות: הצבע "מארח" את התוכן ---- */
.frame {
display: block; position: relative;
padding: var(--mat);
background: var(--color-paper);
border-radius: var(--radius-frame);
box-shadow: inset 0 0 0 1px var(--color-cream-deep);
}
.frame > img, .frame > .placeholder {
width: 100%; height: 100%; object-fit: cover;
border-radius: calc(var(--radius-frame) - var(--mat) / 2);
}
.frame--video > img, .frame--video > .placeholder { aspect-ratio: 16 / 9; height: auto; }
.frame--portrait > .placeholder { aspect-ratio: 4 / 5; }
.placeholder {
display: grid; place-items: center;
background: repeating-linear-gradient(135deg, var(--color-sage-soft) 0 14px, #DCE5E1 14px 28px);
color: var(--color-sage-deep); font-size: var(--text-sm); font-weight: 500;
}
.placeholder > span { background: var(--color-paper); color: var(--color-ink); padding: 0.2rem 0.8rem; border-radius: var(--radius-pill); }
.play-badge {
position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.play-badge svg {
width: 64px; height: 64px; padding: 18px 16px 18px 20px; /* מרכוז אופטי של המשולש */
fill: var(--color-ink); background: var(--color-cream); border-radius: 50%;
transition: transform var(--dur-ui) var(--ease-out);
}
/* ==========================================================
רקע פיקסלים (js/pixel-canvas.js): שכבה מתחת לתוכן, הקנבס בגודל המסך
========================================================== */
.pixel-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; overflow: clip; }
.pixel-field canvas { position: sticky; top: 0; display: block; width: 100%; height: 100svh; }
.work, .contact { position: relative; }
.work > .container, .contact > .container { position: relative; z-index: 1; }
/* ==========================================================
כותרת עליונה
========================================================== */
.site-header {
position: absolute; inset-inline: 0; top: 0; z-index: var(--z-header);
display: flex; align-items: center; justify-content: space-between;
padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--page-pad) var(--space-4);
color: var(--color-cream);
}
.site-header__mark { color: inherit; text-decoration: none; }
.logo-placeholder {
display: inline-grid; place-items: center;
width: 52px; height: 52px; border: 1.5px solid currentColor; border-radius: 50%; opacity: 0.85;
font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
}
.site-nav { display: none; gap: var(--space-6); }
.site-nav a { color: var(--color-cream); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--color-white); text-decoration: underline; }
@media (min-width: 900px) { .site-nav { display: flex; } }
/* ==========================================================
1. הירו: במה נדבקת (stage) שהווידאו ממשיך לרוץ בה, והפרקים מתחלפים בגלילה
(js/main.js כותב --p ומחליף פרקים). בלי JS או עם הפחתת תנועה: מסך אחד רגיל.
========================================================== */
.hero { position: relative; background: var(--color-ink); color: var(--color-cream); }
.hero__stage {
position: relative; overflow: hidden; isolation: isolate;
min-height: 100svh;
display: grid; grid-template-rows: 1fr auto; place-items: center;
padding: calc(var(--space-8) + env(safe-area-inset-top, 0px)) var(--page-pad) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}
.hero__media { position: absolute; inset: 0; z-index: -2; transform: scale(calc(1 + var(--p, 0) * 0.14)); transform-origin: 50% 50%; }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__player {
position: absolute; inset: 0; overflow: hidden; pointer-events: none;
opacity: 0; transition: opacity 1.2s var(--ease-out);
}
.hero.is-playing .hero__player { opacity: 1; }
/* cover: ממלא את המסך ביחס 16:9 בלי פסים */
.hero__player iframe, .hero__player video {
position: absolute; top: 50%; left: 50%;
width: max(100%, 177.78svh); height: max(100%, 56.25vw);
transform: translate(-50%, -50%);
object-fit: cover; border: 0;
}
.hero__shade {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(38 35 36 / 0.85) 0%, rgb(38 35 36 / 0.25) 45%, rgb(38 35 36 / 0.45) 100%);
}
.hero__stage::after { /* עמעום כשהסקשן הבא עולה */
content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
background: var(--color-ink); opacity: 0;
}
.hero__content { display: grid; justify-items: center; text-align: center; gap: var(--space-3); }
.logo-placeholder--hero { width: 72px; height: 72px; font-size: 2.2rem; margin-bottom: var(--space-2); }
.hero__title {
font-family: var(--font-display); font-weight: 700;
font-size: var(--display-l); line-height: 0.85; letter-spacing: 0;
}
.hero__role { font-size: var(--text-xl); font-weight: 500; }
.hero__reel { margin-top: var(--space-5); }
.hero__lead {
max-width: 38ch; text-align: center; font-size: var(--text-lg); line-height: 1.5;
padding-bottom: var(--space-2);
}
.hero__tags { display: none; }
.hero__tags ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.hero__tags li { font-family: var(--font-display); font-weight: 700; font-size: var(--display-s); line-height: 1; }
.hero__tags .btn { margin-top: var(--space-6); }
.hero__progress, .hero__bar { display: none; }
/* רמז גלילה: קו דק שמתמלא מלמעלה למטה */
.hero__hint {
position: absolute; inset-inline: 0; margin-inline: auto; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
display: block; width: 1.5px; height: 44px; overflow: hidden;
background: rgb(242 234 223 / 0.25); border-radius: 2px;
}
.hero__hint::after {
content: ""; display: block; width: 100%; height: 100%;
background: var(--color-cream); transform: translateY(-100%);
}
.hero__pause {
position: absolute; inset-inline-start: var(--page-pad); bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
width: 44px; height: 44px; display: grid; place-items: center; z-index: 6;
border-radius: 50%; background: rgb(38 35 36 / 0.55); color: var(--color-cream);
transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.hero__pause:hover { background: rgb(38 35 36 / 0.8); }
.hero__pause:active { transform: scale(0.94); }
.hero__pause svg { width: 18px; height: 18px; fill: currentColor; }
.hero__pause .icon-play { display: none; }
.hero__pause[aria-pressed="true"] .icon-pause { display: none; }
.hero__pause[aria-pressed="true"] .icon-play { display: block; }
.hero__pause[hidden] { display: none; }
@media (max-width: 599px) {
.hero__stage { padding-bottom: calc(var(--space-8) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.hero__hint { display: none; }
}
/* ---- מצב גלילה (JS מוסיף js-hero-scroll רק כשמותר להזיז) ---- */
.js-hero-scroll .hero { height: 400svh; }
.js-hero-scroll .about { margin-top: -100svh; } /* הסקשן הבא עולה על הבמה כשהפרקים נגמרים */
.js-hero-scroll .hero__stage {
position: sticky; top: 0; height: 100svh; min-height: 0;
grid-template-rows: none; grid-template-columns: 1fr;
}
.js-hero-scroll .hero__ch { grid-area: 1 / 1; will-change: opacity, transform, filter; }
.js-hero-scroll .hero__lead {
font-size: clamp(1.7rem, 1.1rem + 3vw, 3.6rem); font-weight: 600; line-height: 1.2; max-width: 20ch; padding: 0;
}
.js-hero-scroll .hero__tags { display: grid; justify-items: center; text-align: center; }
.js-hero-scroll .hero__ch:not([data-ch="0"]) { opacity: 0; pointer-events: none; }
.js-hero-scroll .hero__ch.is-live { pointer-events: auto; }
/* מחוון התקדמות: קו אנכי עם נקודות, מתמלא עם הגלילה */
.js-hero-scroll .hero__progress {
display: block; position: absolute; z-index: 6; inset-inline-end: var(--page-pad); top: 50%;
width: 2px; height: 120px; margin-top: -60px; background: rgb(242 234 223 / 0.25); border-radius: 2px;
}
.js-hero-scroll .hero__progress i {
display: block; width: 100%; height: 100%; background: var(--color-cream);
transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: inherit;
}
.js-hero-scroll .hero__progress::before, .js-hero-scroll .hero__progress::after {
content: ""; position: absolute; inset-inline-start: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-cream);
}
.js-hero-scroll .hero__progress::before { top: 50%; margin-top: -3px; opacity: 0.5; }
.js-hero-scroll .hero__progress::after { bottom: -3px; opacity: 0.5; }
.js-hero-scroll .hero__hint { opacity: calc(1 - var(--p, 0) * 8); }
/* ---- תנועה ---- */
@media all {
.hero__hint::after { animation: hint 2.4s var(--ease-in-out) 1.6s infinite; }
@keyframes hint { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
/* כניסה: שני פסי קולנוע נפתחים, והאותיות של השם נחשפות אחת אחרי השנייה */
.js-hero-scroll .hero__bar {
display: block; position: absolute; inset-inline: 0; z-index: 7; height: 50.5%; background: #121011; pointer-events: none;
}
.js-hero-scroll .hero__bar--top { top: 0; transform-origin: top; }
.js-hero-scroll .hero__bar--bottom { bottom: 0; transform-origin: bottom; }
.js-hero-scroll .hero.is-in .hero__bar { transform: scaleY(0); transition: transform 1500ms var(--ease-in-out) 250ms; }
.hero__content > * { opacity: 0; transform: translateY(14px); }
.hero.is-in .hero__content > * {
opacity: 1; transform: none;
transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.hero.is-in .hero__content > :nth-child(1) { transition-delay: 900ms; }
.hero.is-in .hero__content > :nth-child(3) { transition-delay: 1500ms; }
.hero.is-in .hero__content > :nth-child(n+4) { transition-delay: 1700ms; }
.hero__title .ch { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(0.25em) scale(1.15); }
.hero.is-in .hero__title .ch {
opacity: 1; filter: none; transform: none;
transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 1100ms var(--ease-out);
transition-delay: calc(1000ms + var(--c) * 90ms);
}
.hero.is-in .hero__lead { transition: none; }
/* יציאת ההירו: מתטשטש ונעלם כשהסקשן הבא נכנס (--q מ-JS) */
.js-hero-scroll .hero__stage { opacity: calc(1 - var(--q, 0)); filter: blur(calc(var(--q, 0) * 18px)); }
}
/* ==========================================================
2. אודות
========================================================== */
.about__grid { display: grid; gap: var(--space-7); align-items: start; }
.about__lead {
font-family: var(--font-body); font-weight: 600;
font-size: var(--text-xl); line-height: 1.35; color: var(--color-petrol);
margin-bottom: var(--space-5); max-width: 30ch;
}
.about__text p { max-width: var(--measure); }
.about__text p + p { margin-top: var(--space-4); }
.about__photo { max-width: 420px; }
.trust {
margin-top: var(--space-8); padding-top: var(--space-5);
border-top: 1px solid var(--color-cream-deep);
font-size: var(--text-xl); font-weight: 600; line-height: 1.2; color: var(--color-ink);
}
@media (min-width: 900px) {
.about__grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-8); }
.about__photo { justify-self: end; width: 100%; margin-top: var(--space-2); }
}
/* ==========================================================
3. עבודות
========================================================== */
.work { background: var(--color-paper); }
.work .frame { background: var(--color-cream); }
.featured { display: grid; gap: var(--space-8); margin-bottom: var(--space-9); }
.feature { display: grid; gap: var(--space-5); align-items: center; }
.feature__media { display: block; width: 100%; text-align: inherit; border-radius: var(--radius-frame); }
.feature__media .frame { background: var(--color-sage); box-shadow: none; }
button.feature__media:hover .play-badge svg { transform: scale(1.08); }
button.feature__media:active { transform: scale(0.99); }
.feature__impact {
text-wrap: balance;
font-family: var(--font-display); font-weight: 700;
font-size: var(--display-m); line-height: 0.9; color: var(--color-petrol);
margin-bottom: var(--space-3);
}
.feature__title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2); }
.feature__detail { color: var(--color-ink); }
@media (min-width: 900px) {
.feature { grid-template-columns: 1.6fr 1fr; gap: var(--space-8); }
.feature--flip { grid-template-columns: 1fr 1.6fr; }
.feature--flip .feature__media { order: 2; }
}
.work__intro { font-size: var(--text-lg); max-width: 40ch; margin-bottom: var(--space-5); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.chip {
min-height: 40px; padding: 0.4rem 1rem; border-radius: var(--radius-pill);
border: 1.5px solid var(--color-sage-deep); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500;
transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.chip:hover { background: var(--color-sage-soft); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-cream); }
/* ---- גלריית וידאו: רצועות שנפתחות ---- */
.gallery { display: grid; gap: var(--space-4); }
.sel {
display: flex; flex-direction: column; gap: var(--space-2);
}
.sel__item {
position: relative; height: 64px;
transition: height 560ms var(--ease-out);
}
.sel__item.is-active { height: clamp(220px, 56vw, 340px); }
.sel__panel {
position: relative; display: block; width: 100%; height: 100%;
overflow: hidden; border-radius: var(--radius-frame); text-align: start;
background: var(--color-ink); color: var(--color-cream);
transition: transform var(--dur-press) var(--ease-out);
}
.sel__panel:active { transform: scale(0.99); }
.sel__media, .sel__media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.sel__media img, .sel__media video { object-fit: cover; }
.sel__media img { transform: scale(1.02); transition: transform 6s linear, opacity var(--dur-ui) ease; }
.sel__item.is-active .sel__media img { transform: scale(1.1); }
.sel__media video { opacity: 0; transition: opacity 500ms ease; }
.sel__item.is-previewing video { opacity: 1; }
.sel__media .placeholder { border-radius: 0; }
.sel__media .placeholder > span { display: none; } /* הכותרת כבר אומרת placeholder */
/* שכבת קריאות על התמונה (ink), לא קישוט */
.sel__panel::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgb(38 35 36 / 0.85), rgb(38 35 36 / 0.15) 60%);
transition: opacity var(--dur-ui) ease;
}
.sel__item:not(.is-active) .sel__panel::after { background: rgb(38 35 36 / 0.62); }
.sel__label, .sel__strip { position: absolute; z-index: 1; }
.sel__label {
inset-inline: var(--space-5); bottom: var(--space-5);
display: grid; gap: 2px; opacity: 0; transform: translateY(8px);
transition: opacity 300ms ease, transform 400ms var(--ease-out);
}
.sel__item.is-active .sel__label { opacity: 1; transform: none; transition-delay: 200ms; }
.sel__title { font-weight: 600; font-size: var(--text-xl); line-height: 1.2; }
.sel__meta { font-size: var(--text-sm); opacity: 0.9; }
.sel__strip {
inset-inline-start: var(--space-4); top: 50%; transform: translateY(-50%);
font-weight: 600; white-space: nowrap; transition: opacity 200ms ease;
}
.sel__item.is-active .sel__strip { opacity: 0; }
.sel__item--placeholder .sel__panel { background: var(--color-sage-soft); color: var(--color-ink); }
.sel__item--placeholder .sel__panel::after { display: none; }
.sel__item--placeholder .sel__title::after { content: " (placeholder)"; font-weight: 400; }
@media (min-width: 760px) {
.sel { flex-direction: row; gap: var(--space-3); height: clamp(380px, 58svh, 560px); }
.sel__item { height: auto; flex: 1 1 0; min-width: 0; transition: flex-grow 640ms var(--ease-out); }
.sel__item.is-active { height: auto; flex-grow: 5; }
/* רצועה סגורה: שם העבודה לאורך הרצועה */
.sel__strip {
/* פיזי ולא לוגי: ב-writing-mode אנכי "inline" הוא ציר אנכי */
top: auto; bottom: var(--space-5); inset-inline-start: auto; right: 50%; transform: translateX(50%);
writing-mode: vertical-rl; max-height: 80%; overflow: hidden; text-overflow: ellipsis;
}
}
/* כניסה: הרצועות עולות אחת אחרי השנייה (רק כש-JS פעיל) */
@media all {
.sel--pending .sel__item { opacity: 0; transform: translateY(28px); }
.sel--in .sel__item {
animation: sel-in 700ms var(--ease-out) both;
animation-delay: calc(var(--i) * 70ms);
}
@keyframes sel-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}
@media not all {
.sel__item, .sel__media img, .sel__label { transition: none; }
}
.work__more { margin-top: var(--space-8); }
/* ==========================================================
4. שירותים: רשימת אינדקס, לא כרטיסים
========================================================== */
.service-list { border-top: 1px solid var(--color-cream-deep); }
.service-list > li { border-bottom: 1px solid var(--color-cream-deep); }
.service {
display: grid; grid-template-columns: 1fr 104px; gap: var(--space-4); align-items: start;
width: 100%; padding-block: var(--space-5); text-align: start;
}
.service__thumb { width: 100%; max-width: 360px; order: 2; --mat: 5px; }
.service__body { order: 1; min-width: 0; }
.service__thumb > .placeholder, .service__thumb > img { aspect-ratio: 4 / 3; }
.service__thumb .placeholder > span { display: none; }
.service__title {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: var(--display-s); line-height: 0.95; color: var(--color-ink);
margin-bottom: var(--space-2);
transition: color var(--dur-ui) ease;
}
.service__text { display: block; max-width: 52ch; }
.service__cta { display: inline-block; margin-top: var(--space-3); font-weight: 600; color: var(--color-petrol); text-decoration: underline; text-underline-offset: 0.25em; }
.service:not(.service--soon):hover .service__title { color: var(--color-petrol); }
.service--soon { cursor: default; }
.service--soon .service__cta { color: var(--color-ink); opacity: 0.7; text-decoration: none; font-weight: 500; }
.services__more { margin-top: var(--space-6); max-width: var(--measure); }
@media (min-width: 760px) {
.service { grid-template-columns: 1fr 260px; align-items: center; gap: var(--space-7); }
.service__thumb { --mat: clamp(8px, 1.2vw, 14px); }
.service__thumb > .placeholder, .service__thumb > img { aspect-ratio: 16 / 10; }
}
/* דסקטופ עם עכבר: התמונה לא יושבת בשורה אלא מרחפת ליד הסמן מעל השורה המרחפת */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
.js-float .service { grid-template-columns: 1fr; padding-block: var(--space-6); }
.js-float .service__thumb { display: none; }
.service__title { transition: color var(--dur-ui) ease, transform 500ms var(--ease-out); }
.service:not(.service--soon):hover .service__title,
.service:hover .service__title { transform: translateX(-14px); } /* זז בכיוון הקריאה */
}
.service-float {
position: fixed; top: 0; left: 0; z-index: var(--z-fab); pointer-events: none;
width: 300px; aspect-ratio: 16 / 10; padding: 10px;
background: var(--color-paper); border-radius: var(--radius-frame);
box-shadow: 0 18px 40px rgb(38 35 36 / 0.22);
opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(0.9) rotate(var(--r, 0deg));
transition: opacity 220ms ease;
}
.service-float.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1) rotate(var(--r, 0deg)); }
.service-float .placeholder > span { display: none; }
.service-float > * { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
/* ==========================================================
4ב. איך עובדים יחד: רצף אמיתי, לכן ממוספר
========================================================== */
.process { background: var(--color-sage-soft); }
.steps { display: grid; gap: var(--space-6); counter-reset: none; }
.step { position: relative; padding-top: var(--space-5); border-top: 2px solid var(--color-sage-deep); }
.step__num {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: var(--display-m); line-height: 0.8; color: var(--color-petrol); margin-bottom: var(--space-3);
}
.step h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); }
.step p { max-width: 36ch; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
/* ==========================================================
5. מסלולים: פאנל אחד עם עמודות, לא 4 כרטיסים צפים
========================================================== */
.plans {
display: grid;
border: 1.5px solid var(--color-ink); border-radius: var(--radius-frame);
overflow: hidden; background: var(--color-paper);
}
.plan { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; }
/* subgrid: שם, מחיר, רשימה, "אפשר להוסיף" ותוספות מתיישרים בין העמודות */
@supports (grid-template-rows: subgrid) {
.plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
.plan + .plan { border-top: 1.5px solid var(--color-ink); }
.plan--accent { background: var(--color-sage-soft); }
.plan__name { font-size: var(--text-lg); font-weight: 600; }
.plan__price {
font-family: var(--font-display); font-weight: 700; font-size: var(--display-s);
line-height: 1; color: var(--color-petrol); margin-block: var(--space-3) var(--space-5);
}
.plan__price { white-space: nowrap; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.25em; }
.plan__cur { font-family: var(--font-body); font-size: 0.55em; font-weight: 600; }
.plan__from { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); margin-inline-end: 0.25em; }
.plan__list li, .plan__addons li { position: relative; padding-inline-start: 1.1em; }
.plan__list li + li, .plan__addons li + li { margin-top: var(--space-2); }
.plan__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.78em; width: 0.6em; height: 2px; background: var(--color-petrol); }
.plan__addons-title { margin-top: auto; padding-top: var(--space-6); align-self: end; font-size: var(--text-sm); font-weight: 600; }
.plan__addons { margin-top: var(--space-2); font-size: var(--text-sm); align-self: start; }
.plan__amount { font-variant-numeric: tabular-nums; }
.plan__addons li::before { content: "+"; position: absolute; inset-inline-start: 0; font-weight: 600; color: var(--color-petrol); }
.pricing__cta { margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: var(--text-lg); }
@media (min-width: 700px) and (max-width: 1099px) {
.plans { grid-template-columns: 1fr 1fr; }
.plan + .plan { border-top: 0; }
.plan:nth-child(even) { border-inline-start: 1.5px solid var(--color-ink); }
.plan:nth-child(n+3) { border-top: 1.5px solid var(--color-ink); }
}
@media (min-width: 1100px) {
.plans { grid-template-columns: repeat(4, 1fr); }
.plan + .plan { border-top: 0; border-inline-start: 1.5px solid var(--color-ink); }
}
/* ==========================================================
6. צור קשר
========================================================== */
.contact { background: var(--color-petrol); color: var(--color-white); }
.contact a { color: var(--color-white); }
.contact__grid { display: grid; gap: var(--space-7); }
.contact__intro p { max-width: 46ch; font-size: var(--text-lg); }
.contact__links { margin-top: var(--space-6); display: grid; gap: var(--space-3); font-size: var(--text-lg); font-weight: 600; }
.contact__links a { text-decoration-thickness: 1px; }
.form { display: grid; gap: var(--space-5); background: var(--color-cream); color: var(--color-ink); padding: var(--space-6); border-radius: var(--radius-frame); }
.form a { color: var(--color-petrol); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 600; }
.field input, .field textarea {
width: 100%; font: inherit; color: var(--color-ink);
background: var(--color-white); border: 1.5px solid var(--color-sage-deep); border-radius: var(--radius-field);
padding: 0.75rem 0.9rem; min-height: 48px;
transition: border-color var(--dur-ui) ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--color-petrol); box-shadow: 0 0 0 3px var(--color-sage-soft); }
.field [aria-invalid="true"] { border-color: var(--color-coral-deep); }
.field__error { color: var(--color-coral-deep); font-size: var(--text-sm); font-weight: 500; }
.form .btn { justify-self: start; }
.form__note { font-size: var(--text-sm); }
.form__status { font-weight: 600; min-height: 1.5em; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-9); align-items: start; } }
/* ==========================================================
פוטר
========================================================== */
.site-footer { background: var(--color-ink); color: var(--color-cream); padding-block: var(--space-7) calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); font-size: var(--text-sm); }
.site-footer a, .site-footer .linklike { color: var(--color-cream); }
.site-footer__inner { display: grid; gap: var(--space-4); }
.site-footer__name { font-family: var(--font-display); font-size: var(--display-s); line-height: 1; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: auto 1fr auto; align-items: end; } .site-footer__links { justify-content: center; } }
/* ==========================================================
כפתור "דברו איתי" צף
========================================================== */
.fab {
position: fixed; z-index: var(--z-fab);
inset-inline-end: var(--space-4);
bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
display: inline-flex; align-items: center; min-height: 52px; padding: 0.8rem 1.4rem;
background: var(--color-coral); color: var(--color-ink);
border-radius: var(--radius-pill); font-weight: 600; text-decoration: none;
box-shadow: 0 6px 20px rgb(38 35 36 / 0.22);
transition: transform var(--dur-ui) var(--ease-out), translate 350ms var(--ease-out), opacity var(--dur-ui) ease, bottom var(--dur-ui) var(--ease-out);
}
.fab:hover { color: var(--color-ink); background: var(--color-coral-soft); }
.fab:active { transform: scale(0.96); }
.fab.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.has-dialog .fab { opacity: 0; pointer-events: none; }
@media (max-width: 599px) and (max-height: 700px) { .has-banner .fab { opacity: 0; pointer-events: none; } } /* מסך קטן מאוד: אין מקום לשניהם */
.has-banner .fab { bottom: calc(var(--banner-h, 0px) + var(--space-3) + var(--space-3) + env(safe-area-inset-bottom, 0px)); } /* הכפתור זז מעל באנר העוגיות */
@media (max-width: 599px) {
/* באנר קומפקטי במובייל, כדי שהכפתור הצף מעליו לא יכסה את כפתור הריל */
.cookie-banner { padding: var(--space-3) var(--space-4); line-height: 1.45; }
.cookie-banner p:not(.cookie-banner__title) { font-size: var(--text-xs); }
.cookie-banner__title { font-size: var(--text-sm); }
.cookie-banner__actions { flex-wrap: nowrap; gap: var(--space-2); margin-top: var(--space-3); }
.cookie-banner__actions .btn--sm { min-height: 40px; padding-inline: 0.8rem; }
.cookie-banner__actions .linklike { font-size: var(--text-xs); white-space: nowrap; }
}
/* ==========================================================
לייטבוקס וידאו
========================================================== */
.lightbox {
width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
background: rgb(20 18 19 / 0.94); color: var(--color-cream);
}
.lightbox::backdrop { background: rgb(20 18 19 / 0.6); }
.lightbox__inner {
height: 100%; display: grid; place-content: center; gap: var(--space-4);
padding: calc(var(--space-8) + env(safe-area-inset-top, 0px)) var(--page-pad) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}
.lightbox__video { width: min(92vw, calc((100dvh - 12rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.lightbox__video iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #000; }
.lightbox__close {
position: absolute; top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); inset-inline-end: var(--space-4);
width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
background: rgb(242 234 223 / 0.12); color: var(--color-cream);
transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.lightbox__close:hover { background: rgb(242 234 223 / 0.24); }
.lightbox__close:active { transform: scale(0.94); }
.lightbox__close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.lightbox__title { font-weight: 600; font-size: var(--text-lg); }
.lightbox__sub { font-size: var(--text-sm); opacity: 0.85; }
@media all {
.lightbox[open] { animation: lb-in var(--dur-ui) var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}
/* ==========================================================
עוגיות
========================================================== */
.cookie-banner {
position: fixed; z-index: var(--z-banner);
inset-inline: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
max-width: 560px; margin-inline-start: auto;
background: var(--color-paper); color: var(--color-ink);
border: 1.5px solid var(--color-ink); border-radius: var(--radius-frame);
padding: var(--space-5); font-size: var(--text-sm); line-height: 1.55;
box-shadow: 0 10px 30px rgb(38 35 36 / 0.18);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__title { font-weight: 600; font-size: var(--text-md); margin-bottom: var(--space-1); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.prefs { border: 0; border-radius: var(--radius-frame); padding: 0; max-width: min(92vw, 440px); background: var(--color-paper); color: var(--color-ink); }
.prefs::backdrop { background: rgb(38 35 36 / 0.5); }
.prefs__inner { display: grid; gap: var(--space-4); padding: var(--space-6); }
.prefs h2 { font-size: var(--text-lg); }
.toggle { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.toggle input { width: 22px; height: 22px; accent-color: var(--color-petrol); }
.prefs__note { font-size: var(--text-sm); }
/* ==========================================================
עמודי משנה (תמונות, משפטי)
========================================================== */
.page-header { background: var(--color-ink); color: var(--color-cream); padding: calc(var(--space-8) + var(--space-6) + env(safe-area-inset-top, 0px)) 0 var(--space-7); }
.page-header .section-title { color: var(--color-cream); margin-bottom: var(--space-3); }
.back-link { color: var(--color-cream); font-weight: 500; }
.back-link:hover { color: var(--color-white); }
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--text-xl); color: var(--color-petrol); margin: var(--space-7) 0 var(--space-3); }
.prose h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose ul { margin-bottom: var(--space-4); }
.prose ul { list-style: disc; padding-inline-start: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.todo { background: var(--color-coral-soft); color: var(--color-ink); padding: 0 0.3em; border-radius: 4px; font-weight: 600; }
/* ==========================================================
אופי לכל סקשן: חשיפה חד-פעמית כשנכנסים (js-reveal מופעל ב-JS בלבד)
========================================================== */
@media all {
/* אודות: הכותרת נחשפת מימין לשמאל, הפסקאות נפתחות כמו תריס, התמונה נפתחת מלמטה */
.js-reveal .about__name { clip-path: inset(0 0 0 100%); }
.js-reveal .about__text p { clip-path: inset(0 0 100% 0); transform: translateY(10px); }
.js-reveal .about__photo { clip-path: inset(100% 0 0 0); }
.js-reveal .about__photo > * { transform: scale(1.12); }
.js-reveal .is-in .about__name { clip-path: inset(0); transition: clip-path 1100ms var(--ease-out); }
.js-reveal .is-in .about__text p {
clip-path: inset(0); transform: none;
transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.js-reveal .is-in .about__text p:nth-of-type(1) { transition-delay: 350ms; }
.js-reveal .is-in .about__text p:nth-of-type(2) { transition-delay: 500ms; }
.js-reveal .is-in .about__text p:nth-of-type(3) { transition-delay: 650ms; }
.js-reveal .is-in .about__photo { clip-path: inset(0); transition: clip-path 1200ms var(--ease-in-out) 200ms; }
.js-reveal .is-in .about__photo > * { transform: none; transition: transform 1600ms var(--ease-out) 200ms; }
/* שירותים: כל כותרת עולה מתוך קו, שורה אחרי שורה */
.js-reveal .service-list > li .service__title { clip-path: inset(0 0 100% 0); transform: translateY(40%); }
.js-reveal .service-list > li.is-in .service__title {
clip-path: inset(0 0 -10% 0); transform: none;
transition: clip-path 800ms var(--ease-out), transform 800ms var(--ease-out), color var(--dur-ui) ease;
}
.js-reveal .service-list > li.is-in:hover .service__title { transform: translateX(-14px); }
/* איך עובדים יחד: קו פטרול נמתח לאורך ארבעת השלבים, מימין לשמאל */
.step::before {
content: ""; position: absolute; inset-inline: 0; top: -2px; height: 2px;
background: var(--color-petrol); transform-origin: right; transform: scaleX(0);
}
.js-reveal .steps.is-in .step::before { transform: scaleX(1); transition: transform 600ms linear; }
.js-reveal .steps.is-in .step:nth-child(2)::before { transition-delay: 600ms; }
.js-reveal .steps.is-in .step:nth-child(3)::before { transition-delay: 1200ms; }
.js-reveal .steps.is-in .step:nth-child(4)::before { transition-delay: 1800ms; transition-timing-function: var(--ease-out); }
.js-reveal .step__num { opacity: 0.25; }
.js-reveal .steps.is-in .step__num { opacity: 1; transition: opacity 400ms ease; }
.js-reveal .steps.is-in .step:nth-child(1) .step__num { transition-delay: 150ms; }
.js-reveal .steps.is-in .step:nth-child(2) .step__num { transition-delay: 750ms; }
.js-reveal .steps.is-in .step:nth-child(3) .step__num { transition-delay: 1350ms; }
.js-reveal .steps.is-in .step:nth-child(4) .step__num { transition-delay: 1950ms; }
}
/* ==========================================================
דחיסה: כל סקשן נכנס במסך אחד בדסקטופ
========================================================== */
@media (min-width: 900px) and (min-height: 600px) {
.section {
min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
padding-block: clamp(2rem, 6svh, 4.5rem);
}
.section-title { font-size: clamp(2.8rem, 9svh, 4.6rem); margin-bottom: clamp(0.75rem, 2.5svh, 1.5rem); }
.section-intro { font-size: var(--text-md); margin-bottom: clamp(1rem, 3.5svh, 2rem); max-width: 70ch; }
.about__grid { gap: var(--space-7); align-items: center; }
.about__lead { font-size: clamp(1.4rem, 3.4svh, 1.9rem); margin-bottom: var(--space-4); }
.about__text p + p { margin-top: var(--space-3); }
.about__photo { max-width: 340px; }
.trust { margin-top: clamp(1rem, 4svh, 2rem); padding-top: var(--space-4); font-size: var(--text-lg); }
.featured { grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: clamp(0.75rem, 2.5svh, 1.5rem); }
.feature, .feature--flip { grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; }
.feature--flip .feature__media { order: 0; }
.feature__impact { font-size: var(--display-s); margin-bottom: var(--space-2); }
.feature__title { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.feature__detail { font-size: var(--text-sm); line-height: 1.5; }
.work__intro { font-size: var(--text-md); margin-bottom: var(--space-3); }
.sel { height: clamp(190px, 27svh, 360px); }
.work__more { margin-top: clamp(1rem, 3svh, 2rem); }
.service-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
.service { padding-block: clamp(0.6rem, 1.8svh, 1.1rem); grid-template-columns: 1fr 110px; gap: var(--space-4); }
.service__title { font-size: clamp(1.9rem, 4.6svh, 2.7rem); margin-bottom: var(--space-1); }
.service__text { font-size: var(--text-sm); line-height: 1.5; }
.service__cta { margin-top: var(--space-2); font-size: var(--text-sm); }
.js-float .service { padding-block: clamp(0.6rem, 1.8svh, 1.1rem); }
.services__more { margin-top: var(--space-4); font-size: var(--text-sm); }
.steps { gap: var(--space-5); }
.step { padding-top: var(--space-4); }
.step__num { font-size: var(--display-s); margin-bottom: var(--space-2); }
.plan { padding: var(--space-5) var(--space-4); font-size: var(--text-sm); }
.plan__price { margin-block: var(--space-2) var(--space-4); }
.plan__addons-title { padding-top: var(--space-4); }
.plan__list li + li, .plan__addons li + li { margin-top: var(--space-1); }
.pricing__cta { margin-top: var(--space-5); font-size: var(--text-md); }
.contact__grid { align-items: center; gap: var(--space-8); }
.contact__intro p { font-size: var(--text-md); }
.contact__links { margin-top: var(--space-5); }
.form { padding: var(--space-5); gap: var(--space-4); }
}
/* ==========================================================
גלריה: פריוויו קצר מיוטיוב ברצועה הפתוחה
========================================================== */
.sel__media { container-type: size; }
.sel__preview {
overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 600ms ease;
}
.sel__preview iframe {
position: absolute; top: 50%; left: 50%; border: 0;
width: max(100cqw, 177.78cqh) !important; height: max(100cqh, 56.25cqw) !important;
transform: translate(-50%, -50%);
}
.sel__item.is-previewing .sel__preview { opacity: 1; }
.sel__play {
position: absolute; z-index: 1; inset-inline-end: var(--space-4); bottom: var(--space-4);
width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
background: var(--color-cream); color: var(--color-ink);
opacity: 0; transform: scale(0.8); transition: opacity 300ms ease, transform 400ms var(--ease-out);
}
.sel__play svg { width: 20px; height: 20px; fill: currentColor; margin-inline-start: 3px; }
.sel__item.is-active:not(.sel__item--placeholder) .sel__play { opacity: 1; transform: none; transition-delay: 250ms; }
.sel__panel:hover .sel__play { transform: scale(1.1); }
/* ==========================================================
שכבת קולנוע: גרגר פילם, פס התקדמות, כותרות שנחשפות מילה אחרי מילה
========================================================== */
.grain, .scroll-progress { display: none; }
@media all {
.grain {
display: block; position: fixed; width: 200%; height: 200%; left: -50%; top: -50%;
z-index: 9; pointer-events: none; opacity: 0.07;
background-image: url("data:image/svg+xml;utf8,");
animation: grain 900ms steps(1) infinite;
}
@keyframes grain {
0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}
@supports (animation-timeline: scroll()) {
.scroll-progress {
display: block; position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 25; pointer-events: none;
background: var(--color-coral); transform-origin: right; transform: scaleX(0);
animation: progress-grow linear both; animation-timeline: scroll(root);
}
@keyframes progress-grow { to { transform: scaleX(1); } }
}
/* כותרות סקשן: מילה אחרי מילה עולה מתוך מסכה */
.js-reveal .section-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.08em; margin-block: -0.08em; }
.js-reveal .section-title .w > span { display: inline-block; transform: translateY(115%); }
.js-reveal .section-title.is-in .w > span {
transform: none; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--w) * 90ms);
}
/* עבודות נבחרות: המסגרת נסחפת לאט בזמן הגלילה (פרלקסה עדינה) */
@supports (animation-timeline: view()) {
@keyframes drift { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
.feature__media .frame { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
}
/* ==========================================================
שפת האתר: קולנוע כהה, כמו ההירו
רקע קבוע (קנבס WebGL או תמונה) שלא זז, הסקשנים שקופים ועוברים מעליו
========================================================== */
.home { background: var(--color-ink); color: var(--color-cream); }
.bg-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.home main { position: relative; }
.home main > section { background: transparent; }
/* בלי WebGL (או בלי תנועה): תמונת רקע קבועה עם שכבת החשכה */
html:not(.gl-on) .home .section {
background: linear-gradient(rgb(20 18 19 / 0.64), rgb(20 18 19 / 0.64)), var(--bg, none) center / cover fixed, var(--color-ink);
}
.about, .pricing, .contact, .services { --bg: url("../assets/bg/services.jpg"); }
.work { --bg: none; }
.home a { color: var(--color-cream); }
.home a:hover { color: var(--color-white); }
.home .btn--light { color: var(--color-ink); }
.home .btn--petrol, .home .btn--petrol:hover { color: var(--color-white); }
.home .btn--coral, .home .btn--coral:hover { color: var(--color-ink); }
.home .btn--outline { border-color: var(--color-cream); color: var(--color-cream); }
.home .btn--outline:hover { background: var(--color-cream); color: var(--color-ink); }
.home :focus-visible { outline-color: var(--color-cream); }
.home .cookie-banner a, .home .prefs a { color: var(--color-petrol); }
.home .cookie-banner .linklike, .home .cookie-banner .btn--outline { color: var(--color-ink); border-color: var(--color-ink); }
.site-header { position: fixed; text-shadow: 0 1px 12px rgb(0 0 0 / 0.45); }
.home .section-title, .home .about__lead, .home .trust, .home .service__title,
.home .feature__title, .home .plan__name { color: var(--color-cream); }
.home .section-intro, .home .work__intro, .home .feature__detail, .home .service__text,
.home .services__more, .home .about__text p, .home .contact__intro p { color: rgb(242 234 223 / 0.88); }
.home .about__lead { font-weight: 600; }
.home .trust { border-top-color: rgb(242 234 223 / 0.22); }
.home .frame {
background: rgb(242 234 223 / 0.08); box-shadow: inset 0 0 0 1px rgb(242 234 223 / 0.2);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.home .work .frame, .home .feature__media .frame { background: rgb(242 234 223 / 0.08); box-shadow: inset 0 0 0 1px rgb(242 234 223 / 0.2); }
.home .placeholder {
background: repeating-linear-gradient(135deg, rgb(242 234 223 / 0.05) 0 14px, rgb(242 234 223 / 0.1) 14px 28px);
color: var(--color-cream);
}
.home .placeholder > span { background: rgb(20 18 19 / 0.7); color: var(--color-cream); }
.home .feature__impact { color: var(--color-coral); }
/* עבודות נבחרות: כתבות וביקורות */
.press { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.press li { display: contents; }
.press li:has(.press__quote) { display: block; flex: 1 1 100%; }
.press__quote {
display: block; text-decoration: none; font-size: var(--text-sm); font-weight: 600; line-height: 1.4;
border-inline-start: 2px solid var(--color-coral); padding-inline-start: var(--space-3);
}
.press__quote + span { display: block; margin-top: 2px; padding-inline-start: calc(var(--space-3) + 2px); opacity: 0.7; font-size: var(--text-xs); }
.press__link {
display: inline-flex; align-items: center; min-height: 32px; padding: 0.15rem 0.8rem; border-radius: var(--radius-pill);
border: 1px solid rgb(242 234 223 / 0.4); text-decoration: none; font-weight: 500;
transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.press__link:hover { background: var(--color-cream); color: var(--color-ink); }
.press__link + span { display: none; }
.home .service-list { border-top-color: rgb(242 234 223 / 0.2); }
.home .service-list > li { border-bottom-color: rgb(242 234 223 / 0.2); }
.home .service:not(.service--soon):hover .service__title, .home .service:hover .service__title { color: var(--color-coral); }
.home .service__cta { color: var(--color-coral); }
.home .service--soon .service__cta { color: var(--color-cream); }
.home .plans {
border-color: rgb(242 234 223 / 0.25); background: rgb(20 18 19 / 0.5);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.home .plan { border-color: rgb(242 234 223 / 0.22) !important; }
.home .plan--accent { background: rgb(22 115 115 / 0.3); }
.home .plan__price { color: var(--color-coral); }
.home .plan__from { color: var(--color-cream); }
.home .plan__list li::before { background: var(--color-coral); }
.home .plan__addons li::before { color: var(--color-coral); }
.home .contact { color: var(--color-white); }
.home .form {
background: rgb(20 18 19 / 0.55); color: var(--color-cream);
border: 1px solid rgb(242 234 223 / 0.22);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.home .form a { color: var(--color-cream); }
.home .field input, .home .field textarea { background: rgb(255 255 255 / 0.94); color: var(--color-ink); }
.home .field__error { color: var(--color-coral-soft); }
.home .field [aria-invalid="true"] { border-color: var(--color-coral); }
.home .form :focus-visible { outline-color: var(--color-cream); }
.home .site-footer { position: relative; background: var(--color-ink); }
/* ---- הירו: צליל ומוזיקה (בלי השהיה) ---- */
.hero__sound {
position: absolute; inset-inline-start: var(--page-pad); bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); z-index: 6;
display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-4) 0 var(--space-3);
border-radius: var(--radius-pill); background: rgb(38 35 36 / 0.55); color: var(--color-cream);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--text-sm); font-weight: 500;
transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.hero__sound:hover { background: rgb(38 35 36 / 0.8); }
.hero__sound:active { transform: scale(0.96); }
.hero__sound svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hero__sound svg path:first-child { stroke: none; }
.hero__sound svg path:not(:first-child) { fill: none; }
.hero__sound .icon-on, .hero__sound[aria-pressed="true"] .icon-off { display: none; }
.hero__sound[aria-pressed="true"] .icon-on { display: block; }
.hero__sound[hidden] { display: none; }
@media (max-width: 599px) { .hero__sound-label { display: none; } .hero__sound { padding-inline: var(--space-3); } }
/* ---- נגן קולנועי ---- */
.lightbox__video { display: none; }
.player {
position: relative; width: min(92vw, calc((100dvh - 12rem) * 16 / 9)); aspect-ratio: 16 / 9;
background: #000; border-radius: var(--radius-frame); overflow: hidden; color: var(--color-cream);
box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
}
.player:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.player__stage, .player__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__stage video { object-fit: contain; background: #000; }
.player__cover { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.player__cover::after {
content: ""; position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
background: var(--color-cream) url("data:image/svg+xml;utf8,") center / 42% no-repeat;
opacity: 0; transform: scale(0.8); transition: opacity 250ms ease, transform 400ms var(--ease-out); pointer-events: none;
}
.player:is([data-state="paused"], [data-state="ended"]) .player__cover::after { opacity: 1; transform: none; }
.player[data-state="loading"]::before {
content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; z-index: 2;
border: 2px solid rgb(242 234 223 / 0.25); border-top-color: var(--color-cream); border-radius: 50%; animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.player__bar {
position: absolute; inset-inline: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-6) var(--space-4) var(--space-3);
background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent);
transition: opacity 300ms ease, transform 300ms var(--ease-out);
}
.player[data-state="playing"]:not(:hover):not(:focus-within) .player__bar { opacity: 0; transform: translateY(8px); }
.player__btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; flex: none; transition: background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out); }
.player__btn:hover { background: rgb(242 234 223 / 0.18); }
.player__btn:active { transform: scale(0.92); }
.player__btn svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player__btn svg path:not(:first-child) { fill: none; }
#player-full svg path { fill: none; }
.player .i-pause, .player[data-state="playing"] .i-play { display: none; }
.player[data-state="playing"] .i-pause { display: block; }
.player .i-mute, .player.is-muted .i-vol { display: none; }
.player.is-muted .i-mute { display: block; }
.player__track { position: relative; flex: 1; height: 24px; cursor: pointer; display: flex; align-items: center; }
.player__track::before { content: ""; position: absolute; inset-inline: 0; height: 3px; border-radius: 3px; background: rgb(242 234 223 / 0.28); transition: height 150ms ease; }
.player__track:hover::before { height: 5px; }
.player__track i { position: absolute; inset-inline: 0; height: 3px; border-radius: 3px; background: var(--color-coral); transform-origin: right; transform: scaleX(0); transition: height 150ms ease; }
.player__track:hover i { height: 5px; }
.player__time { font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: 0.9; white-space: nowrap; }
/* ==========================================================
כניסת סקשן: טשטוש ושקיפות בגלילה, כמו בהירו (scroll-driven)
========================================================== */
@media all {
@supports (animation-timeline: view()) {
@keyframes flow-in { from { opacity: 0; filter: blur(18px); transform: translateY(80px) scale(0.98); } to { opacity: 1; filter: none; transform: none; } }
@keyframes flow-out { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(16px); transform: translateY(-60px); } }
.home .section > .container {
animation: flow-in linear both, flow-out linear both;
animation-timeline: view(), view();
animation-range: entry 0% entry 55%, exit 40% exit 100%;
}
}
/* אופי לכל סקשן, בנוסף לכניסה */
.js-reveal .feature__media { clip-path: inset(0 0 0 100%); }
.js-reveal .featured.is-in .feature__media { clip-path: inset(0); transition: clip-path 1200ms var(--ease-in-out); }
.js-reveal .featured.is-in .feature:nth-child(2) .feature__media { transition-delay: 220ms; }
.js-reveal .feature__text > * { opacity: 0; filter: blur(8px); transform: translateY(14px); }
.js-reveal .featured.is-in .feature__text > * { opacity: 1; filter: none; transform: none; transition: opacity 800ms var(--ease-out), filter 800ms var(--ease-out), transform 800ms var(--ease-out); }
.js-reveal .featured.is-in .feature__text > :nth-child(1) { transition-delay: 500ms; }
.js-reveal .featured.is-in .feature__text > :nth-child(2) { transition-delay: 620ms; }
.js-reveal .featured.is-in .feature__text > :nth-child(3) { transition-delay: 740ms; }
.js-reveal .featured.is-in .feature__text > :nth-child(n+4) { transition-delay: 860ms; }
.js-reveal .plan { opacity: 0; filter: blur(10px); transform: translateY(36px); }
.js-reveal .plans.is-in .plan { opacity: 1; filter: none; transform: none; transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js-reveal .plans.is-in .plan:nth-child(2) { transition-delay: 130ms; }
.js-reveal .plans.is-in .plan:nth-child(3) { transition-delay: 260ms; }
.js-reveal .plans.is-in .plan:nth-child(4) { transition-delay: 390ms; }
.js-reveal .contact__grid > * { opacity: 0; filter: blur(12px); }
.js-reveal .contact__intro { transform: translateX(40px); }
.js-reveal .form { transform: translateX(-40px); }
.js-reveal .contact__grid.is-in > * { opacity: 1; filter: none; transform: none; transition: opacity 1000ms var(--ease-out), filter 1000ms var(--ease-out), transform 1000ms var(--ease-out); }
.js-reveal .contact__grid.is-in .form { transition-delay: 200ms; }
}
/* ==========================================================
טלפון: קומפקטי ומינימלי. שירותים כלשוניות, גלריה ומסלולים כקרוסלה נגללת
========================================================== */
.svc-tabs { display: none; }
@media (max-width: 759px) {
.home .section { padding-block: 3rem 2.5rem; }
.home .section-title { font-size: 2.7rem; margin-bottom: var(--space-3); }
.home .section-intro, .home .work__intro { font-size: var(--text-sm); line-height: 1.55; margin-bottom: var(--space-4); }
.home .about__lead { font-size: 1.3rem; margin-bottom: var(--space-3); }
.home .about__text p { font-size: var(--text-sm); line-height: 1.6; }
.about__grid { gap: var(--space-5); }
.about__photo { display: none; } /* placeholder בלי תמונה לא תופס מקום בטלפון */
.trust { margin-top: var(--space-5); padding-top: var(--space-3); font-size: var(--text-md); }
/* עבודות נבחרות: תמונה קטנה לצד טקסט */
.featured { gap: var(--space-5); margin-bottom: var(--space-5); }
.feature, .feature--flip { grid-template-columns: 40% 1fr; gap: var(--space-3); align-items: start; }
.feature--flip .feature__media { order: 0; }
.feature__impact { font-size: 2.2rem; margin-bottom: var(--space-1); }
.feature__title { font-size: var(--text-md); }
.feature__detail { font-size: var(--text-xs); line-height: 1.45; }
.press { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--page-pad) * -1); padding-inline: var(--page-pad); scrollbar-width: none; }
.feature__text { display: contents; } /* כותרת ופרטים לצד התמונה, כתבות ברוחב מלא מתחת */
.feature__media { grid-row: 1 / span 6; grid-column: 1; }
.feature__text > :not(.press) { grid-column: 2; }
.feature__text > .press { grid-column: 1 / -1; }
/* גלריה: קרוסלה אופקית */
.sel {
flex-direction: row; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; height: auto;
margin-inline: calc(var(--page-pad) * -1); padding-inline: var(--page-pad); padding-bottom: var(--space-2); scrollbar-width: none;
}
.sel::-webkit-scrollbar, .press::-webkit-scrollbar, .svc-tabs::-webkit-scrollbar, .plans::-webkit-scrollbar { display: none; }
.sel__item, .sel__item.is-active { flex: 0 0 70%; height: auto; aspect-ratio: 4 / 5; scroll-snap-align: center; transition: none; }
.sel__label { opacity: 1; transform: none; inset-inline: var(--space-4); bottom: var(--space-4); }
.sel__title { font-size: var(--text-lg); }
.sel__strip { display: none; }
.sel__item:not(.is-active) .sel__panel::after, .sel__panel::after { background: linear-gradient(to top, rgb(38 35 36 / 0.85), rgb(38 35 36 / 0.1) 65%); }
.sel__play { opacity: 1; transform: none; width: 44px; height: 44px; inset-inline-end: var(--space-3); bottom: var(--space-3); }
.work__more { margin-top: var(--space-4); }
/* שירותים: שורת לשוניות + כרטיס אחד פעיל */
.svc-tabs {
display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
margin: 0 calc(var(--page-pad) * -1) var(--space-4); padding: 0 var(--page-pad) var(--space-1);
}
.svc-tab {
flex: none; min-height: 44px; padding: 0.4rem 1.1rem; border-radius: var(--radius-pill); white-space: nowrap; scroll-snap-align: center;
border: 1.5px solid rgb(242 234 223 / 0.4); color: var(--color-cream); font-size: var(--text-sm); font-weight: 500;
transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.svc-tab:active { transform: scale(0.96); }
.svc-tab[aria-pressed="true"] { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-ink); }
.home .service-list { border-top: 0; }
.home .service-list > li { display: none; border-bottom: 0; }
.home .service-list > li.svc-on { display: block; }
.home .service { grid-template-columns: 1fr; padding-block: 0; gap: var(--space-3); }
.service__thumb { order: 0; max-width: none; --mat: 6px; }
.service__body { order: 1; }
.home .service__title { font-size: 2.2rem; clip-path: none !important; transform: none !important; }
.home .service__text { font-size: var(--text-sm); line-height: 1.55; }
.home .service__cta {
display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.3rem; margin-top: var(--space-3);
border-radius: var(--radius-pill); background: var(--color-coral); color: var(--color-ink); text-decoration: none;
}
.home .service--soon .service__cta { background: transparent; border: 1px solid rgb(242 234 223 / 0.4); color: var(--color-cream); }
.services__more { margin-top: var(--space-4); font-size: var(--text-xs); }
/* מסלולים: קרוסלה */
.home .plans {
display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; border: 0; background: none; border-radius: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
margin-inline: calc(var(--page-pad) * -1); padding: 0 var(--page-pad) var(--space-2); scrollbar-width: none;
}
.home .plan {
flex: 0 0 78%; scroll-snap-align: center; padding: var(--space-4); font-size: var(--text-sm); display: flex; flex-direction: column;
border: 1px solid rgb(242 234 223 / 0.25) !important; border-radius: var(--radius-frame);
background: rgb(20 18 19 / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.home .plan--accent { background: rgb(22 115 115 / 0.4); }
.plan__price { margin-block: var(--space-1) var(--space-3); font-size: 2.6rem; }
.plan__list li + li, .plan__addons li + li { margin-top: 2px; }
.plan__addons-title { padding-top: var(--space-3); }
.pricing__cta { margin-top: var(--space-4); font-size: var(--text-sm); }
/* צור קשר */
.contact__grid { gap: var(--space-5); }
.contact__links { margin-top: var(--space-4); font-size: var(--text-md); }
.home .form { padding: var(--space-4); gap: var(--space-3); }
.field textarea { min-height: 96px; }
/* הירו */
.js-hero-scroll .hero__lead { font-size: 1.7rem; }
.hero__tags li { font-size: 2rem; }
}
@media (max-width: 759px) {
.press li:has(.press__quote) { flex: 0 0 88%; }
.press__link { flex: none; white-space: nowrap; }
}
/* ==========================================================
סבב 3: סרט, פוביה (גלילה אופקית), שירותים כבמה, פסי תנועה
========================================================== */
.js-hero-scroll .hero { height: 300svh; }
.hero__tags { display: none !important; }
/* ---- הסרט (ישראל בלבד) ---- */
.film__grid { display: grid; gap: var(--space-6); align-items: center; }
.film__kicker { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--color-coral); margin-bottom: var(--space-3); }
.film__title {
font-family: var(--font-display); font-weight: 700; color: var(--color-cream);
font-size: clamp(3.6rem, 13vw, 9.5rem); line-height: 0.82; margin-bottom: var(--space-4);
}
.film__credit {
display: inline-block; margin-bottom: var(--space-5); padding: 0.25rem 1rem; border: 1px solid rgb(242 234 223 / 0.45);
border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500;
}
.film__text { display: grid; gap: var(--space-3); max-width: 58ch; font-size: var(--text-sm); line-height: 1.65; color: rgb(242 234 223 / 0.9); }
.film__cta { margin-top: var(--space-5); }
.film__cta:empty { display: none; }
.film__press { display: grid; gap: var(--space-4); align-content: center; }
.film__press-title { font-size: var(--text-sm); font-weight: 600; opacity: 0.7; }
.quote { margin: 0; padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--color-coral); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4svh + 0.8rem, 2.5rem); line-height: 1; color: var(--color-cream); }
.quote figcaption { margin-top: var(--space-2); font-size: var(--text-xs); }
.quote figcaption a { color: rgb(242 234 223 / 0.75); text-underline-offset: 0.25em; }
.film .press { margin-top: 0; }
@media (min-width: 900px) {
.film__grid { grid-template-columns: 1.5fr 1fr; gap: var(--space-8); }
.film__text { font-size: var(--text-md); }
}
/* ---- פוביה: פאנלים בגלילה אופקית ---- */
.home .phobia.section { display: block; min-height: 0; padding: 0; }
.phobia__sticky { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 3.5rem; direction: rtl; }
.phobia__sticky::-webkit-scrollbar { display: none; }
.phobia__track { display: flex; align-items: center; gap: var(--space-6); width: max-content; padding-inline: var(--page-pad); }
.ph-panel { flex: none; width: min(84vw, 560px); scroll-snap-align: center; }
.ph-panel--intro { width: min(88vw, 620px); }
.ph-title { font-family: var(--font-display); font-weight: 700; color: var(--color-cream); font-size: clamp(4.4rem, 14vw, 9.5rem); line-height: 0.82; margin-bottom: var(--space-4); }
.ph-lead { font-size: var(--text-lg); line-height: 1.45; font-weight: 600; margin-bottom: var(--space-3); }
.ph-panel--intro p { font-size: var(--text-sm); line-height: 1.6; color: rgb(242 234 223 / 0.9); }
.ph-panel--intro .ph-lead { color: var(--color-cream); font-size: var(--text-lg); }
.ph-panel--intro .ph-credit { margin-top: var(--space-4); color: var(--color-coral); font-weight: 600; }
.ph-source { display: inline-block; margin-top: var(--space-3); font-size: var(--text-xs); }
.ph-panel--trailer { width: min(86vw, 760px); }
.ph-trailer { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-frame); background: #000; container-type: size; box-shadow: 0 24px 60px rgb(0 0 0 / 0.5); }
.ph-trailer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 900ms ease; }
.ph-trailer > div { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 900ms ease; }
.ph-trailer.is-playing > div { opacity: 1; }
.ph-trailer iframe { position: absolute; top: 50%; left: 50%; border: 0; width: max(100cqw, 177.78cqh) !important; height: max(100cqh, 56.25cqw) !important; transform: translate(-50%, -50%); }
.ph-cap { margin-top: var(--space-3); font-size: var(--text-sm); opacity: 0.75; }
.ph-ep { position: relative; width: min(84vw, 600px); }
.ph-ep__media { display: block; width: 100%; border-radius: var(--radius-frame); text-align: start; }
.ph-ep__media:active { transform: scale(0.99); }
.ph-ep__media:hover .play-badge svg { transform: scale(1.08); }
.ph-ep__num {
position: absolute; z-index: 2; top: -0.35em; inset-inline-start: -0.12em; font-family: var(--font-display); font-weight: 700;
font-size: clamp(5rem, 11vw, 8rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--color-coral); pointer-events: none;
}
.ph-ep__text { margin-top: var(--space-3); }
.ph-ep__text h3 { font-size: var(--text-lg); font-weight: 600; }
.ph-ep__text p { font-size: var(--text-sm); opacity: 0.85; }
@media (min-width: 900px) and (min-height: 560px) {
.phobia.is-pinned .phobia__sticky {
position: sticky; top: 0; height: 100svh; overflow: hidden; padding-block: 0; display: flex; align-items: center; scroll-snap-type: none;
}
.phobia.is-pinned .phobia__track { will-change: transform; gap: var(--space-8); padding-inline: var(--page-pad) 20vw; }
.phobia.is-pinned .ph-panel { width: min(46vw, 620px); }
.phobia.is-pinned .ph-panel--intro { width: min(44vw, 640px); }
.phobia.is-pinned .ph-panel--trailer { width: min(52vw, 820px); }
.phobia.is-pinned .ph-ep { width: min(40vw, 620px); }
.phobia.is-pinned .phobia__sticky::before {
content: ""; position: absolute; z-index: 3; bottom: 28px; inset-inline: var(--page-pad); height: 2px; background: rgb(242 234 223 / 0.2);
}
.phobia.is-pinned .phobia__sticky::after {
content: ""; position: absolute; z-index: 4; bottom: 28px; inset-inline: var(--page-pad); height: 2px; background: var(--color-coral);
transform-origin: right; transform: scaleX(var(--ph, 0));
}
}
/* ---- שירותים: כותרות גדולות + במה אחת ---- */
.home .service__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%) !important; white-space: nowrap; }
.home .service-list { border-top: 0; }
.home .service-list > li { display: none; border-bottom: 0; }
.home .service-list > li.svc-on { display: block; animation: stage-in 700ms var(--ease-out) both; }
@keyframes stage-in { from { opacity: 0; filter: blur(14px); transform: translateY(24px) scale(0.985); } to { opacity: 1; filter: none; transform: none; } }
@media not all { .home .service-list > li.svc-on { animation: none; } }
.home .service { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: 0; align-items: start; width: 100%; }
.home .service__thumb { order: 0; max-width: none; --mat: 8px; }
.home .service__thumb > .placeholder, .home .service__thumb > img { aspect-ratio: 16 / 9; }
.home .service__body { order: 1; }
.home .service__text { font-size: var(--text-md); line-height: 1.55; max-width: 52ch; }
.home .service__cta {
display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.4rem; margin-top: var(--space-3);
border-radius: var(--radius-pill); background: var(--color-coral); color: var(--color-ink); text-decoration: none; font-weight: 600;
transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.home .service:hover .service__cta { background: var(--color-coral-soft); }
.home .service--soon .service__cta { background: transparent; border: 1px solid rgb(242 234 223 / 0.4); color: var(--color-cream); }
.svc-tabs { display: flex; }
@media (min-width: 760px) {
.home .services > .container { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.25fr; column-gap: var(--space-8); align-content: center; }
.services .section-title, .services .section-intro, .services .services__more { grid-column: 1 / -1; }
.svc-tabs { display: grid; gap: 2px; align-content: start; margin: 0; padding: 0; overflow: visible; grid-column: 1; }
.svc-tab {
position: relative; text-align: start; padding: 0.2rem 0; border: 0; border-radius: 0; min-height: 0; white-space: normal;
font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 5.2svh, 3rem); line-height: 1.02; color: var(--color-cream);
opacity: 0.5; transition: opacity var(--dur-ui) ease, color var(--dur-ui) ease, transform 500ms var(--ease-out);
}
.svc-tab::before {
content: ""; position: absolute; inset-inline-end: calc(100% + 0.9rem); top: 12%; width: 3px; height: 76%; border-radius: 2px;
background: var(--color-coral); transform: scaleY(0); transform-origin: top; transition: transform 400ms var(--ease-out);
}
.svc-tab:hover { opacity: 0.85; }
.svc-tab[aria-pressed="true"] { opacity: 1; color: var(--color-coral); background: none; transform: translateX(-12px); }
.svc-tab[aria-pressed="true"]::before { transform: scaleY(1); }
.home .service-list { grid-column: 2; grid-row: 3; align-self: center; }
.svc-tabs { grid-row: 3; }
.home .service { grid-template-columns: 1fr; }
}
/* ---- פסי תנועה בין סקשנים: מילים שנעות הצידה בגלילה ---- */
.band { overflow: hidden; padding-block: var(--space-4); pointer-events: none; user-select: none; }
.band span {
display: block; width: max-content; white-space: nowrap; font-family: var(--font-display); font-weight: 700; line-height: 1;
font-size: clamp(3.2rem, 11vw, 9rem); color: transparent; -webkit-text-stroke: 1px rgb(242 234 223 / 0.4);
}
@media all {
@supports (animation-timeline: view()) {
@keyframes band-a { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
@keyframes band-b { from { transform: translateX(35%); } to { transform: translateX(-35%); } }
.band span { animation: band-a linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
.band--b span { animation-name: band-b; }
/* כותרות ענק: נכנסות מהצד בגלילה */
@keyframes title-slide { from { opacity: 0; filter: blur(16px); transform: translateX(24vw); } to { opacity: 1; filter: none; transform: none; } }
.film__title, .ph-title { animation: title-slide linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
}
}
@media not all { .band span { transform: none; } }
/* ---- כפתור ניהול נסתר בפוטר ---- */
.site-footer__admin { display: inline-block; width: 14px; height: 14px; margin-inline-start: var(--space-3); border-radius: 50%; opacity: 0.12; background: var(--color-cream); vertical-align: middle; transition: opacity var(--dur-ui) ease; }
.site-footer__admin:hover, .site-footer__admin:focus-visible { opacity: 0.8; }
@media (max-width: 759px) {
.film__title { font-size: 4.2rem; }
.film__text { font-size: var(--text-sm); }
.film__press { gap: var(--space-3); }
.quote blockquote { font-size: 1.7rem; }
.ph-title { font-size: 4.6rem; }
.band span { font-size: 3.4rem; }
.home .service__text { font-size: var(--text-sm); }
}
/* ---- טופס: בחירת סוג פנייה + כפתור הקרנה ---- */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: var(--space-2); font-weight: 600; }
.seg__opt { position: relative; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg__opt span {
display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.1rem; border-radius: var(--radius-pill);
border: 1.5px solid rgb(242 234 223 / 0.45); font-size: var(--text-sm); font-weight: 500;
transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.seg__opt input:checked + span { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-ink); }
.seg__opt input:focus-visible + span { outline: 3px solid var(--color-cream); outline-offset: 3px; }
.film__screening-text { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-3); }
.film__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* ==========================================================
סבב 4: פוביה בלי גלילה אופקית, רמזי גלילה, קריאות בשירותים, FAB, צור קשר
========================================================== */
/* ---- פוביה: טריילר + קרוסלת פרקים באותו מסך ---- */
.home .phobia.section { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding-block: clamp(2rem, 6svh, 4.5rem); }
.phobia__grid { display: grid; gap: var(--space-5); align-items: center; }
.ph-title { font-size: clamp(3.8rem, 11svh + 1rem, 8rem); margin-bottom: var(--space-3); }
.ph-lead { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; color: var(--color-cream); margin-bottom: var(--space-2); }
.ph-text { font-size: var(--text-sm); line-height: 1.6; color: rgb(242 234 223 / 0.9); max-width: 52ch; }
.ph-credit { margin-top: var(--space-3); font-weight: 600; color: var(--color-coral); }
.ph-trailer-wrap { width: 100%; }
.ph-trailer { width: 100%; }
.ph-eps { display: flex; gap: var(--space-4); margin-top: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--page-pad) * -1); padding: var(--space-3) var(--page-pad) var(--space-2); }
.ph-eps::-webkit-scrollbar { display: none; }
.ph-ep { position: relative; flex: 0 0 78%; width: auto; scroll-snap-align: center; list-style: none; }
.ph-ep__num { top: -0.3em; inset-inline-start: -0.08em; font-size: 4.5rem; }
@media (min-width: 900px) {
.phobia__grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); }
.ph-eps { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--space-5); margin-top: clamp(0.75rem, 3svh, 2rem); }
.ph-ep { flex: none; }
.ph-ep .frame { --mat: 6px; }
.ph-ep__num { font-size: 5.5rem; }
.ph-ep__text { margin-top: var(--space-2); }
.ph-ep__text p { font-size: var(--text-xs); }
}
/* ---- רמז גלילה בסוף סקשן ---- */
.hint { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--text-md); font-weight: 600; text-align: center; color: rgb(242 234 223 / 0.92); }
.hint::after { content: ""; display: block; width: 1.5px; height: 34px; background: linear-gradient(to bottom, rgb(242 234 223 / 0), var(--color-cream)); transform-origin: top; }
.hint--end { padding-bottom: var(--space-5); }
@media all { .hint::after { animation: hint-drop 2.2s var(--ease-in-out) infinite; } @keyframes hint-drop { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } }
/* ---- הטריילר של הסרט ---- */
.film__trailer { position: relative; display: block; width: 100%; text-align: start; border-radius: var(--radius-frame); transition: transform var(--dur-ui) var(--ease-out); }
.film__trailer:hover { transform: translateY(-3px); }
.film__trailer:hover .play-badge svg { transform: scale(1.1); }
.film__trailer-cap { position: absolute; z-index: 2; inset-inline-start: calc(var(--mat) + 12px); bottom: calc(var(--mat) + 10px); padding: 0.15rem 0.8rem; border-radius: var(--radius-pill); background: rgb(20 18 19 / 0.75); font-size: var(--text-xs); font-weight: 600; }
/* ---- שירותים: הטקסט על כרטיס זכוכית כהה, כדי שלא יבלע בתמונה ---- */
.home .service__body {
background: rgb(20 18 19 / 0.68); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border: 1px solid rgb(242 234 223 / 0.18); border-radius: var(--radius-frame); padding: var(--space-4) var(--space-5);
}
.home .service__text { color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 0.5); }
.svc-tab { text-shadow: 0 2px 20px rgb(0 0 0 / 0.75), 0 0 2px rgb(0 0 0 / 0.5); }
@media (min-width: 760px) { .svc-tab { opacity: 0.68; } .svc-tab:hover { opacity: 0.95; } .svc-tab[aria-pressed="true"] { opacity: 1; } }
.home .services .section-intro, .home .services__more { text-shadow: 0 1px 14px rgb(0 0 0 / 0.7); color: #fff; }
/* ---- כפתור "דברו איתי": מושך יותר ---- */
.fab {
gap: 0.6rem; padding: 0.85rem 1.5rem 0.85rem 1.25rem; font-size: 1.05rem; font-weight: 700; overflow: hidden; isolation: isolate;
box-shadow: 0 10px 30px rgb(242 126 99 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.45);
}
.fab svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; box-shadow: 0 0 0 0 rgb(242 126 99 / 0.7); }
.fab::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; z-index: -1; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent); transform: skewX(-18deg); }
.fab:hover { transform: translateY(-2px) scale(1.04); }
@media all {
.fab::before { animation: fab-pulse 2.6s ease-out infinite; }
.fab::after { animation: fab-shine 4.2s ease-in-out 1.2s infinite; }
@keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgb(242 126 99 / 0.65); } 70%, 100% { box-shadow: 0 0 0 18px rgb(242 126 99 / 0); } }
@keyframes fab-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
}
/* ---- צור קשר: אייקונים ---- */
.contact__links { gap: var(--space-3); }
.contact-link { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none !important; font-weight: 600; transition: transform var(--dur-ui) var(--ease-out); }
.contact-link:hover { transform: translateX(-4px); }
.contact-ico {
flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
background: rgb(242 234 223 / 0.14); border: 1px solid rgb(242 234 223 / 0.35); color: var(--color-cream);
transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.contact-link:hover .contact-ico { background: var(--color-cream); color: var(--color-ink); }
.contact-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-link--wa:hover .contact-ico { background: #25d366; color: #fff; border-color: #25d366; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---- תיק עבודות: הקרוסלה תופסת יותר מהמסך בדסקטופ ---- */
@media (min-width: 900px) and (min-height: 600px) {
.work .section-title { margin-bottom: var(--space-2); }
.work .work__intro { margin-bottom: var(--space-3); }
.home .work .sel { height: clamp(300px, 62svh, 640px); }
.work .work__more { margin-top: var(--space-4); }
}
/* ---- טריילר שמתנגן לבד: כפתור קול ---- */
.ph-trailer { cursor: pointer; }
.film-trailer { margin-bottom: var(--space-2); }
.atrailer__sound {
position: absolute; z-index: 3; inset-inline-start: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 50%; background: rgb(20 18 19 / 0.7); color: var(--color-cream); border: 1px solid rgb(242 234 223 / 0.3);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--dur-ui) ease;
}
.atrailer__sound:hover { background: rgb(20 18 19 / 0.9); }
.atrailer__sound svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.atrailer__sound svg path:first-child { stroke: none; }
.atrailer__sound svg path:not(:first-child) { fill: none; }
.atrailer__sound .w, .atrailer__sound[aria-pressed="true"] .x { display: none; }
.atrailer__sound[aria-pressed="true"] .w { display: inline; }
/* ==========================================================
שירותים (סבב 5): אייקונים + מסגרת קבועה עם סרטונים. בלי קפיצות במעבר עכבר
========================================================== */
.home .services > .container { display: block; }
.home .services .service-list { display: none; }
.svc { display: grid; gap: var(--space-4); }
.svc__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.svc__tab {
display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 78px; padding: 0.5rem 0.25rem;
border-radius: 14px; border: 1.5px solid rgb(242 234 223 / 0.35); background: rgb(20 18 19 / 0.5);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--color-cream); font-size: var(--text-xs); font-weight: 600;
transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.svc__tab[aria-pressed="true"] { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-ink); }
.svc__tab-title { display: none; }
.svc__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; }
.svc__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc__ico--lg { width: 48px; height: 48px; background: var(--color-coral); color: var(--color-ink); border-radius: 14px; }
.svc__stage {
position: relative; min-height: 22rem; padding: var(--space-4); border-radius: var(--radius-frame);
background: rgb(20 18 19 / 0.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgb(242 234 223 / 0.2);
}
.svc__panel { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; animation: stage-in 700ms var(--ease-out) both; }
.svc__head { display: flex; align-items: center; gap: var(--space-3); }
.svc__head h3 { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--color-cream); }
.svc__text { font-size: var(--text-sm); line-height: 1.55; color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 0.5); max-width: 56ch; }
.svc__vids { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.svc__vids::-webkit-scrollbar { display: none; }
.svc__vid {
position: relative; flex: 0 0 82%; aspect-ratio: 16 / 10; scroll-snap-align: center; overflow: hidden; border-radius: 12px; background: #000; text-align: start;
}
.svc__vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity var(--dur-ui) ease; }
.svc__vid:hover img { opacity: 1; }
.svc__vid .play-badge svg { width: 48px; height: 48px; padding: 14px 12px 14px 16px; }
.svc__vid-title { position: absolute; inset-inline: 0; bottom: 0; padding: 1.4rem var(--space-3) var(--space-2); background: linear-gradient(to top, rgb(0 0 0 / 0.8), transparent); font-size: var(--text-sm); font-weight: 600; color: #fff; }
.svc__soon { color: rgb(242 234 223 / 0.8); }
@media (min-width: 760px) {
.svc { grid-template-columns: minmax(300px, 0.85fr) 1.5fr; gap: var(--space-7); align-items: stretch; }
.svc__nav { grid-template-columns: 1fr; gap: 2px; align-content: center; }
.svc__tab {
display: flex; justify-content: flex-start; align-items: center; gap: var(--space-3); min-height: 0; padding: 0.35rem 0.6rem 0.35rem 0.25rem;
border: 0; border-radius: 12px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.6svh, 2.6rem); line-height: 1.05; text-align: start;
text-shadow: 0 2px 20px rgb(0 0 0 / 0.75), 0 0 2px rgb(0 0 0 / 0.5); opacity: 0.7;
}
.svc__tab:hover { opacity: 0.95; background: rgb(242 234 223 / 0.08); }
.svc__tab[aria-pressed="true"] { opacity: 1; background: rgb(242 234 223 / 0.14); color: var(--color-coral); }
.svc__tab .svc__ico { background: rgb(242 234 223 / 0.12); }
.svc__tab[aria-pressed="true"] .svc__ico { background: var(--color-coral); color: var(--color-ink); }
.svc__tab-title { display: block; }
.svc__tab-short { display: none; }
.svc__stage { height: clamp(430px, 66svh, 620px); min-height: 0; padding: var(--space-5); }
.svc__panel { gap: var(--space-4); }
.svc__head h3 { font-size: clamp(2.2rem, 5svh, 3.2rem); }
.svc__text { font-size: var(--text-md); }
.svc__vids { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 1), 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
.svc__vid { flex: none; aspect-ratio: auto; height: 100%; min-height: 0; }
}
/* ללא קפיצות: בלי הזזות בריחוף */
.contact-link:hover, .film__trailer:hover, .fab:hover { transform: none; }
.btn { translate: none !important; }
@media (min-width: 900px) and (min-height: 600px) {
.home .work .sel { height: clamp(280px, 52svh, 600px); }
.film__text { font-size: var(--text-sm); }
.film__title { font-size: clamp(3.4rem, 11svh + 1rem, 8.5rem); }
}
/* ---- אודות: קולאז' תמונות מהעבודה ---- */
.home .about__photo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); max-width: none; background: none; padding: 0; box-shadow: none; clip-path: none; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 4px solid var(--color-paper); box-shadow: 0 10px 28px rgb(0 0 0 / 0.4); aspect-ratio: 3 / 4; }
.collage__main { grid-column: 1 / -1; aspect-ratio: 4 / 3 !important; object-position: 50% 28%; }
@media (min-width: 900px) {
.home .about__photo { position: relative; display: block; width: 100%; max-width: 440px; justify-self: end; aspect-ratio: 4 / 5; }
.collage img { position: absolute; }
.collage img.collage__main { inset: 0 0 14% 8%; width: 92%; height: 86%; aspect-ratio: auto !important; object-position: 50% 30%; rotate: 1.5deg; }
.collage img.collage__a { width: 36%; height: auto; aspect-ratio: 9 / 16; inset-inline-start: -4%; bottom: -2%; rotate: -5deg; z-index: 2; }
.collage img.collage__b { width: 34%; height: auto; aspect-ratio: 9 / 16; inset-inline-end: 0; bottom: -6%; rotate: 4deg; z-index: 2; }
}
@media (max-width: 759px) { .home .about__photo { display: grid; grid-template-columns: 1fr 1fr; } .about__photo { display: grid !important; } .collage img.collage__main { grid-column: auto; aspect-ratio: 3 / 4 !important; } }
/* ---- ריל מוטמע (אינסטגרם) ---- */
.player[data-state="embed"] { aspect-ratio: auto; width: min(430px, 92vw); height: min(84dvh, 780px); background: #fff; }
.player[data-state="embed"] .player__bar, .player[data-state="embed"] .player__cover { display: none; }
.ig-card { display: grid; place-items: center; align-content: center; gap: var(--space-2); background: linear-gradient(135deg, #5b3cc4, #c13584 55%, #f56040); color: #fff; font-weight: 600; }
.ig-card svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sel__media .ig-card { position: absolute; inset: 0; }
/* ---- כפתור קול גלובלי: תמיד על המסך ---- */
.sound-global {
position: fixed; z-index: 45; inset-inline-start: 14px; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
display: inline-flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-4) 0 var(--space-3);
border-radius: var(--radius-pill); background: rgb(20 18 19 / 0.72); color: var(--color-cream); border: 1px solid rgb(242 234 223 / 0.3);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--text-sm); font-weight: 600;
transition: background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.sound-global:hover { background: rgb(20 18 19 / 0.92); }
.sound-global:active { transform: scale(0.96); }
.sound-global svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sound-global svg path:first-child { stroke: none; }
.sound-global svg path:not(:first-child) { fill: none; }
.sound-global .icon-on, .sound-global[aria-pressed="true"] .icon-off { display: none; }
.sound-global[aria-pressed="true"] .icon-on { display: block; }
.sound-global[hidden] { display: none; }
.has-dialog .sound-global { opacity: 0; pointer-events: none; }
@media (max-width: 599px) { .sound-global__label { display: none; } .sound-global { padding-inline: var(--space-3); } }
/* ---- מצב חיסכון (חיבור חלש): בלי תמונות רקע כבדות ובלי גרגר ---- */
html.lite .grain, html.lite .bg-gl { display: none !important; }
.js-reveal .about__photo.collage, .js-reveal .is-in .about__photo.collage { clip-path: none; }
.js-reveal .about__photo.collage > * { transform: none !important; }
/* ==========================================================
תפריט ניווט: קישורים לכל הסקשנים, הסקשן הנוכחי מודגש
========================================================== */
.site-header { justify-content: center; transition: background-color 300ms ease, padding 300ms ease; }
.site-header.is-solid { background: rgb(20 18 19 / 0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-block: var(--space-3); }
.site-nav { gap: clamp(1rem, 2.6vw, 2.4rem); }
.site-nav a {
position: relative; padding: 0.55rem 0.1rem; font-weight: 600; text-decoration: none !important; opacity: 0.82;
transition: opacity var(--dur-ui) ease, color var(--dur-ui) ease;
}
.site-nav a::after {
content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--color-coral);
transform: scaleX(0); transform-origin: right; transition: transform 350ms var(--ease-out);
}
.site-nav a:hover { opacity: 1; }
.site-nav a[aria-current="true"] { opacity: 1; color: #fff; }
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav-toggle {
display: none; position: absolute; inset-inline-start: var(--page-pad); top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
width: 46px; height: 46px; border-radius: 50%; background: rgb(20 18 19 / 0.6); border: 1px solid rgb(242 234 223 / 0.3);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); place-items: center; color: var(--color-cream);
}
.nav-toggle span, .nav-toggle span::before { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform 250ms var(--ease-out); }
.nav-toggle span::before { content: ""; position: absolute; top: -6px; inset-inline-start: 0; }
.nav-toggle[aria-expanded="true"] span { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(-90deg); }
@media (max-width: 899px) {
.nav-toggle { display: grid; }
.site-nav { display: none; }
.site-nav.is-open {
display: grid; gap: 2px; position: absolute; top: calc(var(--space-3) + 56px + env(safe-area-inset-top, 0px)); inset-inline: var(--page-pad);
padding: var(--space-3); border-radius: var(--radius-frame); background: rgb(20 18 19 / 0.94); border: 1px solid rgb(242 234 223 / 0.2);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-shadow: none;
}
.site-nav.is-open a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-3); border-radius: 10px; font-size: var(--text-lg); }
.site-nav.is-open a::after { inset-inline: var(--space-3); bottom: 6px; }
.site-nav.is-open a[aria-current="true"] { background: rgb(242 234 223 / 0.1); color: var(--color-coral); }
}
/* ---- כותרת עליונה עדינה: בלי בר כהה ---- */
.site-header, .site-header.is-solid { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding-block: var(--space-3) !important; text-shadow: 0 1px 14px rgb(0 0 0 / 0.65), 0 0 2px rgb(0 0 0 / 0.4); }
.site-nav { gap: clamp(0.9rem, 2vw, 1.8rem); }
.site-nav a { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; padding: 0.4rem 0.05rem; opacity: 0.75; }
.site-nav a::after { height: 1.5px; bottom: 2px; }
/* ---- דברו איתי: תמונה ---- */
.contact__photo { display: none; }
@media (min-width: 900px) and (min-height: 700px) {
.contact__photo { display: block; margin-top: var(--space-5); width: min(170px, 18svh); rotate: -3deg; }
.contact__photo img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; border: 4px solid var(--color-paper); box-shadow: 0 10px 28px rgb(0 0 0 / 0.45); }
}
/* ---- הצמדה מגנטית בין סקשנים (דסקטופ) ---- */
@media (min-width: 900px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
html.snap { scroll-snap-type: y mandatory; }
html.snap.snap-off, html.a11y-freescroll { scroll-snap-type: none; }
html.snap .hero, html.snap main > section.section { scroll-snap-align: start; }
html.snap .site-footer { scroll-snap-align: end; }
}
.site-footer__admin { display: inline-block; }
/* ---- אודות: שם גדול, כותרת משנה, טקסט קצר ---- */
.about__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.6rem, 10vw, 7.5rem); line-height: 0.85; color: var(--color-cream); margin-bottom: var(--space-3); }
.about__sub { font-size: var(--text-lg); font-weight: 500; line-height: 1.4; color: rgb(242 234 223 / 0.9); margin-bottom: var(--space-5); max-width: 34ch; }
.home .about__text p:not(.about__sub) { font-size: var(--text-md); line-height: 1.65; max-width: 44ch; }
@media (max-width: 759px) { .about__name { font-size: 3.8rem; } .about__sub { font-size: var(--text-md); margin-bottom: var(--space-4); } }
/* ---- אודות: שתי תמונות זו לצד זו, בלי חפיפה ---- */
@media (min-width: 760px) {
.home .about__photo.collage { display: grid; grid-template-columns: 1fr 0.62fr; gap: var(--space-4); align-items: end; width: 100%; max-width: 500px; aspect-ratio: auto; justify-self: end; }
.home .about__photo.collage img { position: static; inset: auto; width: 100%; height: auto; }
.home .about__photo.collage img.collage__main { grid-column: auto; aspect-ratio: 3 / 4 !important; object-position: 50% 30%; rotate: -1.5deg; }
.home .about__photo.collage img.collage__b { aspect-ratio: 9 / 16; rotate: 2.5deg; margin-bottom: -4%; }
}
/* ==========================================================
התאמה לנייד (סבב 7)
========================================================== */
/* פסי הלטרבוקס שבתוך סרטון הרקע (הסרטון מוצג ב-16:9 אבל מצולם רחב יותר): מגדילים כדי שלא ייראו פסים שחורים */
.hero__poster, .hero__player { transform: scale(1.34); transform-origin: 50% 50%; }
/* פסי המילים הנעים: בלי תנועה הם רק חתוכים */
html.a11y-nomotion .band { display: none; }
@media (max-width: 759px) {
/* הסרט: קוראים רק את הפסקה הראשונה, והשאר נפתח בלחיצה */
.film__text:not(.is-open) p:nth-child(n+2) { display: none; }
.film__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2); padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid rgb(242 234 223 / 0.4); font-size: var(--text-sm); font-weight: 600; }
.film__text.is-open ~ .film__more { display: none; }
/* בלי רווחי ענק בין סקשנים */
.home .section { padding-block: 2.25rem 2rem; }
.band { padding-block: var(--space-2); }
.hint { margin-top: var(--space-4); font-size: var(--text-sm); }
.hint--end { padding-bottom: var(--space-3); }
/* מקום לכפתורים הצפים בתחתית */
.site-footer { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.fab { padding: 0.7rem 1.1rem 0.7rem 0.95rem; font-size: var(--text-sm); min-height: 46px; }
.fab svg { width: 18px; height: 18px; }
}
.film__more { display: none; }
@media (max-width: 759px) { .film__more { display: inline-flex; } }
/* ==========================================================
נייד אמיתי (סבב 8): בלי גלילה אופקית, גדלים קטנים יותר, מוקד תמונה
========================================================== */
html, body { overflow-x: clip; max-width: 100%; }
main, .site-footer { overflow-x: clip; }
/* רקע CSS (כשאין WebGL): מיקום לפי המוקד של כל תמונה */
html:not(.gl-on) .home .section { background-position: center, var(--bgpos, 50% 50%), center; background-size: auto, cover, auto; }
.about, .work { --bgpos: 56% 42%; }
.film { --bgpos: 62% 38%; }
.phobia { --bgpos: 52% 46%; }
.services { --bgpos: 62% 55%; }
.pricing { --bgpos: 60% 62%; }
.contact { --bgpos: 50% 60%; }
/* מוקד בתמונות */
.sel__media img { object-position: 50% 40%; }
.collage img.collage__main { object-position: 50% 22%; }
.collage img.collage__b { object-position: 32% 30%; }
.contact__photo img { object-position: 50% 40%; }
.feature__media img, .ph-ep__media img, .svc__vid img { object-position: 50% 40%; }
@media (max-width: 480px) {
html { font-size: 14.5px; }
.hero__title { font-size: clamp(3.4rem, 18vw, 5rem); }
.hero__role { font-size: 1.25rem; }
.about__name { font-size: 3.1rem; }
.film__title { font-size: 3.3rem; }
.ph-title { font-size: 3.4rem; }
.home .section-title { font-size: 2.5rem; }
.svc__head h3 { font-size: 1.9rem; }
.plan__price { font-size: 2.3rem; }
.band { display: none; }
.hero__lead, .js-hero-scroll .hero__lead { font-size: 1.35rem; }
.sound-global { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}
/* ==========================================================
סבב 9: גלילה פשוטה. בלי הצמדה, בלי "סקשן = מסך שלם", רווחים קטנים בין סקשנים,
רקע כהה יותר בטלפון, וטריילר מרובע (1:1) בסרט.
========================================================== */
html.snap { scroll-snap-type: none !important; }
@media (min-width: 900px) and (min-height: 600px) {
.section, .home .section, .home .phobia.section { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2rem, 6svh, 4.5rem); } /* מחשב: כל סקשן ממורכז וממלא מסך שלם; במסך נמוך גוללים מעט */
}
@media (max-width: 899px), (max-height: 599px) { .home .phobia.section { padding-block: clamp(1.5rem, 4svh, 3rem); } }
.phobia__sticky { padding-block: 2rem; }
@media (max-width: 759px) {
/* כהות נוספת על הרקע בטלפון (גם כשה-WebGL כבוי): הטקסט בולט יותר */
.bg-gl { filter: brightness(0.8); }
html:not(.gl-on) .home .section { background-blend-mode: normal; box-shadow: inset 0 0 0 100vmax rgb(20 18 19 / 0.28); }
.hero__shade { background: linear-gradient(to top, rgb(38 35 36 / 0.92) 0%, rgb(38 35 36 / 0.5) 50%, rgb(38 35 36 / 0.62) 100%); }
.home .section-title, .home .section-intro, .home .about__text, .home .film__text, .home .phobia__text { text-shadow: 0 1px 16px rgb(0 0 0 / 0.75); }
.home .section { padding-block: 1.6rem 1.4rem; }
}
/* הירו בטלפון: הסרטון המרובע (1:1) הוא הרקע של הלוגו והשם. מעליו הוא חד וממורכז, ומאחוריו אותו קדר מטושטש וכהה שממלא את המסך */
.hero--square .hero__poster { filter: blur(30px) brightness(0.55) saturate(1.25); transform: scale(1.4); }
.hero--square .hero__player {
inset: auto 0 auto 0; top: calc(9svh + env(safe-area-inset-top, 0px)); height: min(100vw, 56svh); transform: none;
-webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 42%, transparent 100%);
mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 42%, transparent 100%);
}
.hero--square .hero__player video { position: static; width: 100%; height: 100%; transform: none; object-fit: cover; }
.hero--square .hero__stage { place-items: end center; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
.hero--square .logo-placeholder--hero { width: 52px; height: 52px; font-size: 1.6rem; }
.hero--square .hero__content { gap: var(--space-2); text-shadow: 0 2px 24px rgb(0 0 0 / 0.8); }
.hero--square .hero__shade { background: linear-gradient(to top, rgb(38 35 36 / 0.95) 0%, rgb(38 35 36 / 0.55) 38%, rgb(38 35 36 / 0.1) 70%, rgb(38 35 36 / 0.4) 100%); }
/* טלפון על הצד (מסך נמוך): ההירו גדל מעבר למסך כדי שהכפתור לא ייחתך, והלוגו מוסתר */
@media (max-height: 520px) and (orientation: landscape) {
.hero__stage { min-height: 0; height: max(100svh, 460px); padding-top: 3.5rem; padding-bottom: 3rem; }
.logo-placeholder--hero { display: none; }
.hero__title { font-size: clamp(2.6rem, 11svh, 4rem); }
.hero__reel { margin-top: var(--space-3); }
.hero__hint { display: none; }
}
/* ---- גריד וויגנט גם כשאין WebGL (נייד חלש, חיסכון בנתונים): אותו מראה כמו בשיידר ---- */
html:not(.gl-on) .home .section {
background:
repeating-linear-gradient(90deg, transparent 0 71px, rgb(255 255 255 / 0.035) 71px 72px),
repeating-linear-gradient(0deg, transparent 0 71px, rgb(255 255 255 / 0.035) 71px 72px),
radial-gradient(ellipse at 50% 40%, transparent 35%, rgb(0 0 0 / 0.5) 125%),
linear-gradient(rgb(20 18 19 / 0.64), rgb(20 18 19 / 0.64)),
var(--bg, none) var(--bgpos, 50% 50%) / cover fixed,
var(--color-ink);
}
/* ---- הירו בנייד: במקום החום המטושטש, רקע מהפלטה (פטרול על דיו) עם הגריד והוויגנט של שאר האתר ---- */
.hero--square .hero__poster { display: none; }
.hero--square .hero__media::before {
content: ""; position: absolute; inset: 0;
background:
repeating-linear-gradient(90deg, transparent 0 71px, rgb(255 255 255 / 0.05) 71px 72px),
repeating-linear-gradient(0deg, transparent 0 71px, rgb(255 255 255 / 0.05) 71px 72px),
radial-gradient(ellipse 95% 50% at 50% 28%, rgb(22 115 115 / 0.85), transparent 72%),
radial-gradient(ellipse 70% 30% at 50% 100%, rgb(242 126 99 / 0.14), transparent 70%),
radial-gradient(ellipse at 50% 40%, transparent 30%, rgb(0 0 0 / 0.55) 130%),
#1c1a1b;
}
.hero--square .hero__shade { background: linear-gradient(to top, rgb(28 26 27 / 0.9) 0%, rgb(28 26 27 / 0.4) 32%, transparent 55%); }
/* נייד: פחות פרטים. בלי רמזי "תמשיכו לגלול" ובלי פס המילים, רק מה שחשוב */
@media (max-width: 759px) {
.hint, .hero__hint, .band { display: none !important; }
.hero__reel .btn__icon { width: 1.1em; height: 1.1em; }
}
/* ---- רקע קבוע בנייד (שכבות CSS, בלי WebGL) ---- */
.bg-phone { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; background: #1c1a1b; pointer-events: none; contain: strict; }
.bg-phone__l { position: absolute; inset: 0; background-size: auto, cover; background-repeat: no-repeat; opacity: 0; transition: opacity 1200ms ease; will-change: opacity; }
.bg-phone__l.is-on { opacity: 1; }
.bg-phone::after {
content: ""; position: absolute; inset: 0;
background:
repeating-linear-gradient(90deg, transparent 0 71px, rgb(255 255 255 / 0.02) 71px 72px),
repeating-linear-gradient(0deg, transparent 0 71px, rgb(255 255 255 / 0.02) 71px 72px),
linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent 24%, transparent 66%, rgb(0 0 0 / 0.6)),
radial-gradient(ellipse at 50% 45%, transparent 28%, rgb(0 0 0 / 0.62) 130%);
}
html.bg-phone-on .bg-gl { display: none !important; }
/* ---- רקע לכל סקשן כשאין WebGL (למשל כשבמחשב מופעלת "הפחתת תנועה"): התמונה של הסקשן עצמו, לא אחת לכולם ---- */
.about { --bg: url("../assets/bg/about.jpg"); }
.work { --bg: url("../assets/bg/about.jpg"); }
.phobia { --bg: url("../assets/bg/phobia.jpg"); }
.services { --bg: url("../assets/bg/services.jpg"); }
.pricing { --bg: url("../assets/bg/pricing.jpg"); }
.contact { --bg: url("../assets/bg/contact.jpg"); }