/* =================================================================== Dr. Guy Rasner — clinic site. Luxury editorial re-skin. Palette + type from the original Elementor site. RTL Hebrew. =================================================================== */ :root { --accent: #9B8579; /* taupe — backgrounds, borders, decoration */ --accent-ink: #7A6558; /* darker taupe for TEXT on white (WCAG AA ~5.5:1; #9B8579 is only 3.5:1) */ --primary: #3C2415; /* dark brown — text, headings */ --text: #3C2415; --secondary: #F8CFC3; /* blush — primary buttons */ --beige: #EFE7E0; /* soft warm section bg */ --beige-deep: #E3D2CB; --light: #F7F3EF; --white: #ffffff; --max: 1240px; --shadow: 0 18px 50px rgba(60, 36, 21, 0.12); /* measured by JS at runtime (initHeaderHeights) — these are just fallbacks */ --header-h: 70px; --subnav-h: 53px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* No overflow-x:hidden here — setting it on or turns that element into its own scroll container and breaks window.scrollTo / in-page #anchor scrolling. Reveal animations translate only vertically, so nothing overflows horizontally. If a stray element ever does, clip it locally, not globally. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* smooth in-page scrolling — but never for users who ask for reduced motion */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: "Heebo", "Assistant", -apple-system, "Segoe UI", sans-serif; color: var(--text); line-height: 1.85; font-weight: 300; background: var(--white); direction: rtl; text-align: right; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; } h1, h2, h3, h4 { font-weight: 400; line-height: 1.25; color: var(--primary); } h2.section-title { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 400; margin-bottom: 6px; } h3 { font-weight: 500; } /* thin centered separator */ .sep { width: 70px; height: 1px; background: var(--accent); margin: 20px auto 44px; border: 0; } .sep.start { margin-inline: 0; } .center { text-align: center; } /* visible keyboard-focus ring on interactive controls (mouse clicks unaffected) */ .btn:focus-visible, .gal-arrow:focus-visible, .nav-toggle:focus-visible, .to-top:focus-visible, .main-nav a:focus-visible, .floating a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* keyboard-only "skip to content" link — first tab stop on every page */ .skip-link { position: fixed; top: -60px; inset-inline-start: 16px; z-index: 300; background: var(--primary); color: #fff; padding: 10px 20px; font-size: .95rem; transition: top .2s; } .skip-link:focus { top: 10px; } .section { padding: 104px 0; } /* ---------- Buttons: blush, sharp corners, spaced ---------- */ .btn { display: inline-block; background: var(--secondary); color: var(--primary); padding: 15px 44px; border-radius: 0; font-size: 1rem; font-weight: 400; letter-spacing: .06em; border: 0; cursor: pointer; transition: background .3s, color .3s; } .btn:hover { background: var(--accent-ink); color: var(--white); } /* AA even while hovered */ .btn.accent { background: var(--accent-ink); color: var(--white); } /* AA: white on --accent is 3.5:1 */ .btn.accent:hover { background: var(--primary); color: var(--white); } /* =================== HEADER =================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); /* iOS Safari <18 */ backdrop-filter: blur(8px); border-bottom: 1px solid rgba(60,36,21,.06); } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 28px; padding: 12px 44px; max-width: 1600px; margin: 0 auto; } /* multiply blends the logo JPG's white box into the (slightly translucent) header background — no visible white contour */ .logo img { height: 46px; width: auto; mix-blend-mode: multiply; } .main-nav ul { list-style: none; display: flex; gap: 26px; align-items: center; } .main-nav a { font-size: 1.02rem; font-weight: 400; color: var(--primary); padding: 6px 0; position: relative; transition: color .2s; } .main-nav a:hover, .main-nav a.active { color: var(--accent-ink); } .main-nav a::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 1px; background: var(--accent); transition: width .3s; } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } .nav-cta { display: none; background: var(--secondary); color: var(--primary); border-radius: 999px; padding: 12px 30px; font-size: .95rem; font-weight: 500; letter-spacing: .03em; text-align: center; transition: background .25s, color .25s; } .nav-cta:hover { background: var(--primary); color: #fff; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; } .nav-toggle span { width: 26px; height: 1.5px; background: var(--primary); display: block; transition: .3s; transform-origin: center; } /* hamburger morphs into an X when the menu is open */ .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* =================== HERO =================== */ .hero { position: relative; min-height: 660px; display: flex; align-items: center; color: var(--white); overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: none; } /* warm luxury wash */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(67,41,24,.5); } .hero .container { position: relative; z-index: 2; display: flex; width: 100%; flex: 1 1 auto; } /* title + button block sits on the LEFT of the hero (matches live) */ .hero-mark { max-width: 560px; padding-inline-start: 34px; position: relative; margin-right: auto; margin-left: 0; text-align: start; } .hero-mark::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.65); } .hero-logo { width: min(440px, 70vw); margin-bottom: 40px; } /* gentle page-load animation on the hero content (matches live) */ @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .hero-mark > * { animation: heroRise 1s cubic-bezier(.22,.61,.36,1) both; } .hero-mark .hero-logo { animation-delay: .15s; } .hero-mark .btn { animation-delay: .38s; } @media (prefers-reduced-motion: reduce) { .hero-mark > * { animation: none; } } /* page banner (inner pages) */ /* beige page banner — dark title + separator, NO image (matches the live site) */ .page-banner { position: relative; padding: 36px 20px 30px; text-align: center; background: var(--beige-deep); } .page-banner h1 { color: var(--primary); font-weight: 400; letter-spacing: .02em; font-size: clamp(2rem, 4.5vw, 3.2rem); } .page-banner h1::after { content: ""; display: block; width: 62px; height: 2px; background: var(--accent); margin: 20px auto 0; } /* homepage "על ד״ר רסנר" — beige, photo bleeds to the right edge, text left */ .section.about-intro { background: var(--beige-deep); padding: 0; overflow: hidden; } .about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; height: 430px; } .about-intro-img { align-self: stretch; overflow: hidden; } .about-intro-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } .about-intro-text { padding: 84px 7% 84px 48px; } .about-intro-text .lead { font-size: 1.08rem; margin-bottom: 28px; font-weight: 300; } /* ===== About PAGE — alternating full-bleed splits + taupe quote (matches live) ===== */ .about-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 540px; } .about-split .as-img { order: 1; overflow: hidden; } .about-split .as-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-split .as-text { order: 2; display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(30px, 6.5%, 110px); background: var(--white); } /* Split A sits on beige, Split B on white (matches live) */ .about-split:not(.as-reverse) { background: var(--beige-deep); } .about-split:not(.as-reverse) .as-text { background: transparent; } .about-split .as-text .section-title { margin-bottom: 0; } .about-split .as-lead { font-size: 1.12rem; color: var(--primary); font-weight: 400; margin: 8px 0 20px; } .about-split .as-text p { font-weight: 300; line-height: 1.95; color: #4a3f38; margin-bottom: 14px; } /* split B: image on the LEFT, text on the RIGHT */ .about-split.as-reverse .as-img { order: 2; } .about-split.as-reverse .as-text { order: 1; } /* Fix the surgeon portrait to a tall height like live and top-align the text beside it, so the overlapping quote card lands on the image's LOWER half — clearly below the intro text (a shorter image made the card shadow the text). Fixed height keeps it robust across widths. */ @media (min-width: 768px) { .about-split.as-reverse .as-img { align-self: start; height: 780px; } .about-split.as-reverse .as-img img { object-position: center 18%; } .about-split.as-reverse .as-text { justify-content: flex-start; } } /* quote is a taupe CARD that overlaps the bottom of the split above (matches live) */ .about-quote-section { background: #fff; padding: 0 0 74px; } .about-quote { position: relative; z-index: 2; background: var(--accent-ink); /* AA for white text */ color: #fff; width: min(66%, 900px); margin-inline-start: 0; margin-inline-end: auto; margin-top: -340px; padding: 52px clamp(30px, 4vw, 58px); box-shadow: 0 22px 55px rgba(0,0,0,.14); } .about-quote .quote-mark { position: absolute; top: 22px; inset-inline-start: clamp(20px, 3vw, 44px); font-size: 5rem; line-height: 1; color: rgba(255,255,255,.5); font-family: Georgia, serif; } .about-quote p { font-size: 1.375rem; line-height: 1.5; font-weight: 400; } /* matches live: Heebo 22px/1.5/400 */ /* =================== TREATMENT CARDS (home) — faithful to live =================== */ .section.treatments { background: #F4ECE6; } /* live widths — row 1: חזה 39% (right) / גוף 61% (left); row 2: אסתטיים 53% / פנים 47%. Three tracks decompose both rows: 39 | 14 | 47 (RTL: track 1 is the right column). Live gutters are 7px margins per column = 14px gaps. */ .cards { display: grid; grid-template-columns: 39fr 14fr 47fr; gap: 14px; } .card { position: relative; overflow: hidden; display: block; min-height: 420px; } .card-1 { grid-column: 1; } /* 39% */ .card-2 { grid-column: 2 / 4; border-radius: 50px 0 0 0; } /* 61%; rounded outer grid corner, like live */ .card-3 { grid-column: 1 / 3; border-radius: 0 0 50px 0; } /* 53% */ .card-4 { grid-column: 3; } /* 47% */ /* two stacked copies of the photo: color below, grayscale above; hover fades the gray copy out — opacity only, never a filter transition (filter flickers) */ .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .card-2 img { object-position: 46% 67%; } /* live framing */ .card-4 img { object-position: 50% 0; } .card .card-bw { filter: grayscale(1); transition: opacity .3s; } .card:hover .card-bw { opacity: 0; } /* titles — live: Heebo 500 33px, white except טיפולים אסתטיים (brown), pinned per card */ .card h3 { position: absolute; z-index: 2; margin: 0; color: var(--white); font-size: 33px; font-weight: 500; line-height: 1.4; } .card-1 h3 { bottom: 40px; right: 50px; } .card-2 h3 { top: 40px; right: 50px; } .card-3 h3 { bottom: 40px; right: 50px; color: var(--primary); } .card-4 h3 { top: 40px; right: 50px; } /* the hover lines — a bespoke one per card, geometry lifted from the live CSS */ .card h3::after { content: ""; position: absolute; background: var(--white); transition: all .5s ease; } .card-1 h3::after { bottom: 7px; right: 170px; height: 2px; width: 0; } /* ← horizontal by the baseline */ .card-2 h3::after { top: 5px; right: -20px; width: 2px; height: 0; } /* ↓ vertical, right of the text */ .card-3 h3::after { bottom: 45px; right: 2px; width: 2px; height: 0; } /* ↑ vertical, above the text */ .card-4 h3::after { top: 8px; right: 180px; height: 2px; width: 0; } /* ← horizontal by the cap line */ .card-1:hover h3::after, .card-4:hover h3::after { width: 130px; } .card-2:hover h3::after, .card-3:hover h3::after { height: 130px; } /* touch screens have no hover — cards colorize (and draw their line) while they sit in the middle band of the viewport (JS toggles .card-active on scroll) */ @media (hover: none) { .card.card-active .card-bw { opacity: 0; } .card-1.card-active h3::after, .card-4.card-active h3::after { width: 130px; } .card-2.card-active h3::after, .card-3.card-active h3::after { height: 130px; } } @media (max-width: 1025px) { .card { min-height: 340px; } .card h3 { font-size: 30px; } } /* =================== VALUES — white, thin, airy =================== */ .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; text-align: center; } .value img.ico { display: block; height: 58px; width: auto; margin: 0 auto 20px; } .value h3 { font-size: 1.35rem; font-weight: 400; margin-bottom: 12px; color: var(--primary); letter-spacing: .03em; } .value p { font-weight: 300; color: #6f5c50; font-size: .98rem; } /* =================== GALLERY — carousel (fewer, larger, swipeable) =================== */ .gallery-carousel { position: relative; display: flex; align-items: center; gap: 8px; } /* overflow-x:auto (not hidden!) so the track is finger-swipeable on touch; scrollbars are hidden, snap keeps slides aligned after swipe AND resize */ /* NOTE: no scroll-behavior:smooth here — Chrome can't smooth-scroll an RTL container programmatically (scrollLeft is negative); JS animates manually */ .gallery-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; flex: 1; scrollbar-width: none; overscroll-behavior-x: contain; } .gallery-track::-webkit-scrollbar { display: none; } /* each slide holds a PAIR of images and snaps as one unit */ .gallery-slide { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; scroll-snap-align: center; padding: 4px 46px; box-sizing: border-box; } .gallery-slide figure { position: relative; overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow); margin: 0; } /* rounded OUTER-top corners only (matches original) — RTL: first=right, last=left */ .gallery-slide figure:first-child { border-top-right-radius: 50px; } .gallery-slide figure:last-child { border-top-left-radius: 50px; } .gallery-slide img { width: 100%; height: 100%; object-fit: cover; } .gal-arrow { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; color: var(--accent-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s, color .25s; } .gal-arrow:hover { background: var(--accent-ink); color: var(--white); } /* vertical לפני / אחרי gutter labels (matches the live gallery) */ /* לפני / אחרי — vertical labels at the bottom, just outside each photo's outer edge (matches live) */ .gal-vlabel { position: absolute; bottom: 26px; writing-mode: vertical-rl; color: rgba(60,36,21,.62); letter-spacing: .1em; font-size: 30px; font-weight: 400; z-index: 3; pointer-events: none; } .gal-vlabel-before { left: 60px; } .gal-vlabel-after { right: 60px; } .gallery-cta { text-align: center; margin-top: 40px; } .gallery-cta p { margin-bottom: 18px; } .gallery-cta .btn { display: inline-flex; align-items: center; gap: 10px; } .gallery-cta .btn svg { width: 20px; height: 20px; fill: currentColor; } /* =================== TESTIMONIALS =================== */ .testimonial-more { display: inline-block; margin-top: 18px; color: var(--accent-ink); font-weight: 400; font-size: .95rem; border-bottom: 1px solid var(--accent); padding-bottom: 2px; } .testimonial-more:hover { color: var(--primary); border-color: var(--primary); } /* =================== CONTACT =================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } /* contact section is more compact than a normal section (less top/bottom space) */ #consult, #contact { padding-top: 58px; padding-bottom: 58px; scroll-margin-top: calc(var(--header-h) + 4px); } .contact-info-line { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; font-size: 1.06rem; font-weight: 300; } .contact-info-line .ico { width: 48px; height: 48px; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: 0 0 auto; } .contact-info-line svg { width: 20px; height: 20px; fill: currentColor; } .contact-social { display: flex; gap: 20px; margin-top: 16px; } .contact-social a { color: var(--primary); } .contact-social svg { width: 40px; height: 40px; fill: currentColor; transition: fill .2s; } .contact-social a:hover svg { fill: var(--accent); } .contact-form { display: flex; flex-direction: column; gap: 13px; max-width: 470px; } .contact-form input, .contact-form textarea { width: 100%; padding: 11px 18px; border: 1px solid rgba(60,36,21,.15); border-radius: 0; font-family: inherit; font-size: .98rem; font-weight: 300; background: var(--white); color: var(--text); direction: rtl; text-align: right; /* keep RTL placeholders (fixes the טלפון tel-input LTR default) */ } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); } .contact-form textarea { min-height: 96px; resize: vertical; } .contact-form .btn { align-self: flex-start; background: var(--accent-ink); color: var(--white); } /* AA contrast */ .contact-form .btn:hover { background: var(--primary); color: var(--white); } .contact-form .btn[disabled] { opacity: .6; cursor: default; } /* inline submit feedback (AJAX) — hidden until it has content */ .form-status { display: none; font-weight: 400; font-size: .98rem; padding: 10px 14px; } .form-status.ok { display: block; background: rgba(155,133,121,.14); color: var(--primary); border-inline-start: 3px solid var(--accent); } .form-status.err { display: block; background: rgba(180,60,40,.08); color: #8a2f1d; border-inline-start: 3px solid #b44a32; } .map-embed { width: 100%; border: 0; min-height: 340px; display: block; filter: grayscale(.2); } /* =================== FOOTER =================== */ .site-footer { background: var(--primary); color: #d9c9be; padding: 72px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; max-width: var(--max); margin: 0 auto; padding: 0 32px; } .site-footer h2 { color: var(--white); margin-bottom: 20px; font-size: 1.1rem; font-weight: 400; letter-spacing: .04em; } .site-footer ul { list-style: none; } .site-footer li { margin-bottom: 12px; font-weight: 300; } .site-footer a { color: #c9b7ab; transition: color .2s; } .site-footer a:hover { color: var(--white); } .footer-logo img { height: 60px; width: auto; max-width: 100%; object-fit: contain; object-position: right; margin-bottom: 20px; } .footer-about { color: #cdbcb0; max-width: 300px; margin-bottom: 16px; } .footer-contact-line { display: flex; gap: 10px; margin-bottom: 12px; color: #c9b7ab; font-weight: 300; } .footer-bottom { text-align: center; margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); color: #a8968b; font-size: .9rem; font-weight: 300; } /* =================== FLOATING BUTTONS =================== */ .floating { position: fixed; bottom: 24px; left: 24px; z-index: 200; display: flex; flex-direction: column; gap: 14px; } .floating a { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); box-shadow: var(--shadow); transition: transform .2s; } .floating a:hover { transform: scale(1.1); } .floating .wa { background: #25D366; } .floating .mail { background: var(--primary); } .floating .chat { background: var(--primary); } .floating svg { width: 26px; height: 26px; fill: currentColor; } /* Scroll-to-top button — bottom-right, appears after scrolling (matches live) */ .to-top { position: fixed; bottom: 26px; right: 26px; z-index: 200; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--white); border: 0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s, background .2s; } .to-top.show { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--primary); } .to-top svg { width: 24px; height: 24px; fill: currentColor; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* anchor-scroll targets get programmatic focus (tabindex=-1) — no ring on sections */ [tabindex="-1"]:focus { outline: none; } /* =================== RESPONSIVE =================== */ @media (max-width: 980px) { .values { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .about-intro-grid { grid-template-columns: 1fr; height: auto; } .about-intro-text { padding: 56px 32px; order: 2; } .about-intro-img { order: 1; height: auto; } .about-intro-img img { height: auto; min-height: 340px; max-height: 460px; } .footer-grid { grid-template-columns: 1fr 1fr; } } /* nav collapses to the hamburger below 1000px — with 7 Hebrew items the inline nav starts wrapping to two lines under ~1000px (measured) */ @media (max-width: 999px) { /* compact bar (live mobile header is ~35px tall; ours ~44px) */ .header-inner { padding: 6px 20px; } .logo img { height: 32px; } /* full-width dropdown anchored below the header, centered links (matches live) */ .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); flex-direction: column; padding: 6px 0 22px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .28s ease, transform .28s ease, visibility .28s; box-shadow: 0 18px 34px rgba(0,0,0,.13); z-index: 90; max-height: 88dvh; overflow-y: auto; } .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); } .main-nav ul { flex-direction: column; gap: 0; align-items: stretch; } .main-nav li { text-align: center; border-bottom: 1px solid rgba(60,36,21,.07); } .main-nav li:last-child { border-bottom: 0; } .main-nav a { display: block; width: 100%; padding: 15px 20px; text-align: center; } .main-nav a::after { display: none; } /* no desktop underline in the menu */ .main-nav a.active { background: var(--beige-deep); color: var(--primary); } .nav-cta { display: inline-block; margin: 18px auto 4px; } /* blush contact link, like live */ .nav-contact-item { display: none; } /* avoid duplicate צרו קשר — the blush .nav-cta covers it on mobile */ .nav-toggle { display: flex; z-index: 95; } } @media (max-width: 767px) { .section { padding: 64px 0; } .hero { min-height: 74vh; min-height: 74svh; } /* svh: stable under iOS toolbar collapse */ .cards { grid-template-columns: 1fr; } .card { grid-column: auto !important; min-height: 340px; } .card h3 { font-size: 27px; } .card h3::after { display: none; } /* live hides the hover lines on phones */ /* stack order to match the live site: גוף, חזה, פנים, אסתטיים */ .cards .card:nth-child(1) { order: 2; } .cards .card:nth-child(2) { order: 1; } .cards .card:nth-child(3) { order: 4; } .cards .card:nth-child(4) { order: 3; } .values { grid-template-columns: 1fr; } /* before/after (matches live mobile): the FULL taupe band stays, white title + labels, photos inset with taupe gutters, and the live's signature corners — top image rounds its TOP-RIGHT, bottom image its BOTTOM-LEFT. Arrows float over the photo edges at mid-height like the live owl carousel (scaleX(-1) mirrors the glyphs outward, matching live mobile). */ .gallery-carousel { gap: 0; } .gallery-carousel .gal-arrow { display: flex; position: absolute; top: 50%; z-index: 5; transform: translateY(-50%) scaleX(-1); width: 38px; height: 38px; font-size: 1.15rem; border-color: rgba(255,255,255,.85); color: #fff; background: rgba(60,36,21,.22); } .gallery-carousel .gal-prev { right: 8px; } .gallery-carousel .gal-next { left: 8px; } /* slide is 85% wide; 8.5% side margins = the visible gutter, so the neighbouring slide stays JUST offscreen at rest (no peek — matches live) */ .gallery-slide { grid-template-columns: 1fr; flex: 0 0 85%; margin-inline: 8.5%; padding: 0; row-gap: 34px; } /* the label (::before) sits INSIDE the figure, so round the IMG itself — rounding the figure would round the label row instead of the photo */ .gallery-slide figure:first-child, .gallery-slide figure:last-child { border-radius: 0; } .gallery-slide figure:first-child img { border-radius: 0 50px 0 0; } .gallery-slide figure:last-child img { border-radius: 0 0 0 50px; } .gallery-slide figure img { height: auto; width: 100%; object-fit: contain; } .gallery-slide figure::before { display: block; text-align: center; color: #fff; font-size: 1.35rem; margin-bottom: 10px; letter-spacing: .04em; } .gallery-slide figure:first-child::before { content: "אחרי"; } .gallery-slide figure:last-child::before { content: "לפני"; } .gal-vlabel { display: none; } .about-split { grid-template-columns: 1fr; min-height: 0; } .about-split .as-img, .about-split.as-reverse .as-img { order: 0; } .about-split .as-text, .about-split.as-reverse .as-text { order: 1; padding: 44px 28px; } .about-split .as-img img { min-height: 300px; } /* quote becomes a full-width flat taupe block on mobile (no overlap) */ .about-quote-section { background: var(--accent-ink); padding: 0; } .about-quote { width: auto; margin: 0; padding: 44px 26px; box-shadow: none; } .about-quote p { font-size: 1.15rem; line-height: 1.75; } .to-top { bottom: 20px; right: 18px; width: 46px; height: 46px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } } /* =================== ENTRANCE ANIMATIONS =================== */ /* anchor targets clear the sticky header when scrolled to */ [id] { scroll-margin-top: calc(var(--header-h) + 26px); } /* Mirrors the live Elementor entrances: 1s keyframes, fill both, per-element delay from data-anim-delay. `.anim` (hidden) is only ever added by JS right before observing, so content is never hidden when scripts don't run. */ .anim { visibility: hidden; } .anim-in { visibility: visible; animation-duration: 1s; animation-fill-mode: both; } .a-fadeIn { animation-name: kf-fade-in; } .a-fadeInUp { animation-name: kf-fade-in-up; } .a-fadeInDown { animation-name: kf-fade-in-down; } .a-fadeInLeft { animation-name: kf-fade-in-left; } @keyframes kf-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translateZ(0); } } @keyframes kf-fade-in-down { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } @keyframes kf-fade-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translateZ(0); } } @media (prefers-reduced-motion: reduce) { .anim { visibility: visible; animation: none !important; } } /* ===================== INNER TREATMENT PAGES ===================== */ /* Sticky procedures jump-menu, sits directly under the main header */ /* beige sub-nav (matches the live site) */ .proc-subnav { position: sticky; top: var(--header-h); z-index: 99; background: var(--beige-deep); box-shadow: 0 3px 10px rgba(60,36,21,.06); } .proc-subnav-inner { max-width: 1600px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 6px; padding: 15px 20px; } .proc-subnav a { color: var(--primary); font-size: 1rem; font-weight: 400; padding: 6px 14px; border-radius: 20px; white-space: nowrap; transition: background .2s, color .2s; } .proc-subnav a:hover { background: rgba(255,255,255,.4); color: var(--accent-ink); } /* Expanded procedure blocks — alternating image / text, full-bleed */ .proc-list { } .proc { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 1px); } .proc-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 580px; } .proc-img { margin: 0; overflow: hidden; } .proc-img img { width: 100%; height: 100%; min-height: 580px; object-fit: cover; object-position: center; transform: scale(1.16); transition: none; display: block; } .proc-text { display: flex; flex-direction: column; justify-content: center; padding: 54px clamp(28px, 6.5%, 120px); background: var(--light); } .proc-list .proc:nth-child(even) .proc-text { background: var(--beige); } /* odd rows: image on the LEFT (matches the live — first procedure is image-left) */ .proc-list .proc:nth-child(odd) .proc-img { order: 2; } .proc-list .proc:nth-child(odd) .proc-text { order: 1; } .proc-text h2 { font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.05rem); color: var(--primary); margin-bottom: 20px; letter-spacing: .01em; } .proc-text p { font-weight: 300; line-height: 1.95; margin-bottom: 14px; color: #4a3f38; } .proc-text ul { list-style: none; margin: 4px 0 16px; padding: 0; } .proc-text li { position: relative; padding-inline-start: 22px; margin-bottom: 9px; font-weight: 300; line-height: 1.8; color: #4a3f38; } .proc-text li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .proc-text li strong { font-weight: 500; color: var(--primary); } /* Before/after gallery on inner pages — WHITE bg, CTA on top, full-width edge-to-edge strip */ .ba-section { background: var(--white); padding: 38px 0 0; } .ba-section .gallery-cta { margin-bottom: 32px; margin-top: 0; } /* full-width row of 6 equal photos, no gaps, no rounding (matches the live site) */ .ba-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; width: 100%; } .ba-gallery figure { margin: 0; overflow: hidden; height: clamp(210px, 22vw, 340px); } .ba-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 767px) { /* compact jump-bar: one scrollable row, minimal chrome */ .proc-subnav-inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: 5px 10px; } .proc-subnav-inner::-webkit-scrollbar { display: none; } .proc-subnav a { padding: 8px 12px; font-size: .92rem; } .proc-inner { grid-template-columns: 1fr; min-height: 0; } .proc-img img { min-height: 420px; height: 440px; } .proc-list .proc:nth-child(odd) .proc-img { order: 0; } .proc-list .proc:nth-child(odd) .proc-text { order: 0; } .proc-text { padding: 40px 28px; } /* photo strip wraps to 2 rows of 3 (matches live) instead of one cramped scrolling row */ .ba-gallery { grid-template-columns: repeat(3, 1fr); overflow: visible; } .ba-gallery figure { height: clamp(112px, 31vw, 150px); } } /* ===== Section color corrections to match the live site ===== */ /* homepage gallery ("צפו בגלריה שלנו") — taupe background, white text */ /* taupe is CUT ~130px before the bottom — the lower part of the photos bleeds onto white (matches live) */ .section.gallery-section { background: linear-gradient(to bottom, var(--accent) 0, var(--accent) calc(100% - 130px), var(--white) calc(100% - 130px)); padding: 58px 0 0; } .section.gallery-section .section-title { color: var(--white); } .section.gallery-section .sep { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.55); } .section.gallery-section .gal-arrow { border-color: rgba(255,255,255,.7); color: #fff; } /* cap the carousel image height so the taupe band stays compact like the live (~600px) */ .gallery-slide figure { aspect-ratio: auto; height: clamp(300px, 32vw, 480px); } /* the "more images" + Instagram CTA sits on WHITE below the taupe band (matches live) */ .section.gallery-more { background: var(--white); padding: 44px 0 66px; } .section.gallery-more .gallery-cta { margin-top: 0; } /* testimonials — taupe single-review carousel (matches live) */ /* testimonials sit over a photo with a warm brown overlay (matches live) */ .section.testimonials-section { position: relative; background: var(--accent) url("../assets/wp-content/uploads/2025/06/shutterstock_1075168757.jpg") center top / cover no-repeat; } .section.testimonials-section::before { content: ""; position: absolute; inset: 0; background: rgba(60,36,21,.75); z-index: 0; } .section.testimonials-section > * { position: relative; z-index: 1; } .section.testimonials-section .section-title { color: #fff; } .section.testimonials-section .sep { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.5); } .tst-carousel { max-width: 640px; } /* same swipeable-with-hidden-scrollbar pattern as the gallery; snap keeps a slide centered after a swipe or an orientation change */ .tst-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .tst-track::-webkit-scrollbar { display: none; } .tst-slide { flex: 0 0 100%; box-sizing: border-box; color: #fff; scroll-snap-align: center; } .tst-mark { display: block; font-family: Georgia, serif; font-size: 5rem; line-height: .7; color: rgba(255,255,255,.5); margin-bottom: 4px; } .tst-slide p { font-size: 1.16rem; line-height: 1.95; font-weight: 300; margin-bottom: 18px; } .tst-slide .testimonial-more { color: #fff; text-decoration: underline; font-weight: 400; } .tst-arrows { display: flex; gap: 14px; margin-top: 34px; } .tst-arrows .gal-arrow { border-color: rgba(255,255,255,.7); color: #fff; } .tst-arrows .gal-arrow:hover { background: rgba(255,255,255,.92); color: var(--accent); } /* arrow placement comes from DOM order (RTL: first = right end): prev(›) on the right, next(‹) on the left — pressing an arrow brings new content in from that side, and keyboard tab order matches the visual order */ /* contact section — colored (beige) background, not white */ #contact { background: var(--beige-deep); } /* associations / credentials logo strip (homepage) */ .section.associations { padding: 66px 0; } .assoc-row { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 7vw, 100px); flex-wrap: wrap; } .assoc-row img { height: clamp(66px, 9vw, 104px); width: auto; } /* =================== BLOG (staging — unlinked from nav until Guy approves) =================== */ .draft-note { background: var(--accent-ink); color: #fff; text-align: center; padding: 9px 16px; font-size: .88rem; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 42px; } .blog-card { background: var(--white); border: 1px solid rgba(60, 36, 21, .08); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; color: inherit; transition: transform .35s ease, box-shadow .35s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .blog-card img { width: 100%; height: 250px; object-fit: cover; object-position: top; display: block; } .blog-card-body { padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .blog-tag { color: var(--accent-ink); font-size: .8rem; letter-spacing: .08em; } .blog-card h2 { font-size: 1.2rem; font-weight: 500; line-height: 1.4; color: var(--primary); } .blog-card p { font-size: .95rem; line-height: 1.65; } .post-body { max-width: 820px; margin: 0 auto; } .post-meta { color: var(--accent-ink); font-size: .9rem; margin-bottom: 26px; } .post-body h2 { margin: 30px 0 12px; font-size: 1.35rem; color: var(--primary); } .post-body p { margin-bottom: 16px; } .post-body ul { margin: 0 0 16px; padding-inline-start: 22px; } .post-body li { margin-bottom: 8px; } .post-figure { margin: 28px 0; } .post-figure img { width: 100%; height: auto; border-radius: 6px; display: block; } .post-figure figcaption { font-size: .85rem; color: var(--accent-ink); margin-top: 8px; text-align: center; } .post-note { background: var(--beige); border-radius: 6px; padding: 18px 22px; font-size: .92rem; margin: 28px 0; } .post-cta { background: var(--beige-deep); border-radius: 6px; padding: 32px 24px; text-align: center; margin-top: 36px; } .post-cta p { margin-bottom: 16px; } .press-item { display: flex; gap: 30px; align-items: flex-start; padding: 30px 0; border-bottom: 1px solid rgba(60, 36, 21, .12); } .press-item:last-child { border-bottom: 0; } .press-media { flex: 0 0 300px; } .press-media video, .press-media img { width: 100%; height: auto; border-radius: 6px; display: block; background: var(--primary); } .press-outlet { color: var(--accent-ink); font-size: .85rem; letter-spacing: .06em; margin-bottom: 6px; } .press-item h2 { font-size: 1.3rem; margin-bottom: 10px; color: var(--primary); } .press-more { display: inline-block; margin-top: 10px; color: var(--accent-ink); font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; } /* internal selection pages (Guy picks reviews / before-after photos) */ .pick-form input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent-ink); flex: none; cursor: pointer; } .pick-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid rgba(60, 36, 21, .12); } .pick-item label { cursor: pointer; } .pick-item p { margin-top: 6px; } .pick-num { font-weight: 700; color: var(--accent-ink); margin-inline-end: 10px; } .pick-src { font-size: .82rem; color: var(--accent-ink); letter-spacing: .04em; } .pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; } .pick-group { padding: 24px 0 8px; border-bottom: 1px solid rgba(60, 36, 21, .12); } .pick-group-head { font-size: .92rem; color: var(--accent-ink); line-height: 1.6; } .pick-group-head a { color: var(--accent-ink); text-decoration: underline; } .pick-group .pick-grid { margin-top: 14px; margin-bottom: 18px; } .pick-card label { display: block; position: relative; cursor: pointer; } .pick-card img { width: 100%; height: auto; border-radius: 6px; display: block; } .pick-card input[type="checkbox"] { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; } .pick-card .pick-num { position: absolute; bottom: 8px; inset-inline-end: 10px; background: rgba(255, 255, 255, .88); border-radius: 4px; padding: 2px 8px; font-size: .9rem; } .pick-card label:has(input:checked) img { outline: 4px solid var(--accent-ink); outline-offset: -4px; } .pick-meta { font-size: .82rem; line-height: 1.55; margin-top: 8px; color: var(--primary); } .pick-meta a { color: var(--accent-ink); text-decoration: underline; } .pick-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--beige-deep); border-radius: 8px 8px 0 0; padding: 14px 20px; margin-top: 30px; box-shadow: 0 -6px 22px rgba(60, 36, 21, .12); } .blog-pick { position: relative; } .blog-pick > input[type="checkbox"] { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; } .blog-pick:has(input:checked) .blog-card { outline: 4px solid var(--accent-ink); outline-offset: -4px; } @media (max-width: 999px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } .pick-grid { grid-template-columns: repeat(2, 1fr); } } /* ===== MOBILE overrides that must FOLLOW the desktop color-correction rules above (same specificity — source order decides) ===== */ @media (max-width: 767px) { /* gallery: SOLID taupe band edge to edge (the desktop gradient cut is a desktop-only trick), natural image heights (matches live mobile) */ .section.gallery-section { background: var(--accent); padding: 44px 0 40px; } .gallery-slide figure { aspect-ratio: auto; height: auto; box-shadow: none; } /* the reviewer photo sits right-of-centre — keep the woman visible under the text (matches live: background-position 74% 0) */ .section.testimonials-section { background-position: 74% top; } /* blog */ .blog-grid { grid-template-columns: 1fr; } .press-item { flex-direction: column; gap: 18px; } .press-media { flex: none; width: 100%; max-width: 420px; } .pick-grid { grid-template-columns: 1fr; } }