/* * Travel With Julz - Retreat Landing Styles * Version: 2.22.0 * Last Updated: 2026-06-15 * * Changelog: * - 2.22.0: added .jn-wafab — persistent floating WhatsApp pill (bottom-right, * outside the .jn scope so the standard hero/footer flow is * unchanged). Brand-green w/ gentle pulse ring; gracefully shrinks * to icon-only on very narrow screens. * * Editorial tropical-luxury. Light-based but RICH: vivid full-bleed photography, * gold-gradient display type, deep-emerald accents, layered palm silhouettes, * grain + section rhythm for depth. Hebrew RTL, mobile-first. Scoped under .jn. */ .jn { --cream: #f7eedc; --cream-2: #fffdf6; --cream-3: #efe3c9; --gold: #b07d22; --gold-2: #d8a93f; --gold-3: #f0d488; --gold-grad: linear-gradient(115deg, #f0d488 0%, #d8a93f 38%, #b07d22 78%); --green: #143d28; /* deep jungle */ --green-2: #1f6440; /* emerald */ --green-3: #4f9468; /* leaf */ --sage: #aecb9d; --sage-2: #d9e8cb; --ink: #271809; /* near-espresso headings */ --text: #3a2812; --muted: #6a543c; --dim: #9c8163; --border: rgba(176,125,34,0.34); --frame: rgba(176,125,34,0.55); --shadow: 0 26px 60px -28px rgba(20,61,40,0.55); --shadow-sm:0 12px 30px -16px rgba(20,61,40,0.4); --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --disp: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --body: 'Heebo', 'Assistant', system-ui, sans-serif; position: relative; margin: 0; background: var(--cream); color: var(--text); font-family: var(--body); font-weight: 300; line-height: 1.7; direction: rtl; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .jn *, .jn *::before, .jn *::after { box-sizing: border-box; } .jn h1, .jn h2, .jn h3, .jn h4, .jn p, .jn ul, .jn ol, .jn blockquote { margin: 0; } .jn ul, .jn ol { list-style: none; padding: 0; } .jn a { color: inherit; text-decoration: none; } .jn img { max-width: 100%; display: block; } .jn ::selection { background: var(--green-2); color: var(--cream-2); } /* fine grain overlay — premium texture, kills the flat look */ .jn::after { content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── shared layout ── */ .jn-wrap { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 24px; } .jn-wrap--narrow { max-width: 580px; } .jn-sec { padding: clamp(64px, 10vw, 124px) 0; position: relative; overflow: hidden; } /* ── headings & accents ── */ .jn-label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .32em; font-weight: 700; color: var(--gold); text-transform: uppercase; margin-bottom: 16px; } .jn-label::before { content: ''; width: 26px; height: 1px; background: var(--gold); opacity: .7; } .jn-title { font-family: var(--disp); font-weight: 600; font-size: clamp(31px, 5.6vw, 54px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); } .jn-title em, .jn-hero__title em, .jn-brand, .jn-price__amt { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); } /* italic glyphs lean past their box; with background-clip:text that overhang gets clipped (notably the leading digit in RTL). inline-block + a hair of horizontal padding restores the clipped edge. */ .jn-title em, .jn-hero__title em { display: inline-block; padding-inline: 0.1em; } .jn-rule { display: flex; align-items: center; gap: 9px; width: 70px; height: 10px; margin: 22px 0; } .jn-rule::before, .jn-rule::after { content: ''; height: 1px; background: var(--gold); opacity: .6; flex: 1; } .jn-rule::after { content: '❦'; flex: 0; height: auto; background: none; color: var(--gold); font-size: 13px; opacity: .85; } .jn-rule--center { margin-inline: auto; } .jn-body { font-size: 16.5px; color: var(--muted); max-width: 640px; line-height: 1.95; } .jn-body--center { margin-inline: auto; text-align: center; } /* ── lush decorative tropical leaves ── */ .jn-leaf { position: absolute; z-index: 0; pointer-events: none; width: clamp(170px, 26vw, 380px); line-height: 0; } .jn-leaf svg { width: 100%; height: auto; display: block; } .jn-leaf--green { color: var(--green); opacity: .16; } .jn-leaf--sage { color: var(--green-3); opacity: .2; } .jn-leaf--gold { color: var(--gold); opacity: .18; } .jn-leaf--tr { top: -6%; right: -6%; transform: rotate(28deg); } .jn-leaf--tl { top: -6%; left: -6%; transform: rotate(-28deg) scaleX(-1); } .jn-leaf--br { bottom: -7%; right: -5%; transform: rotate(152deg); } .jn-leaf--bl { bottom: -7%; left: -5%; transform: rotate(-152deg) scaleX(-1); } /* ── buttons ── */ .jn-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 15px 42px; border-radius: 999px; border: 1.5px solid var(--green-2); background: transparent; color: var(--green); font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: .02em; transition: background .28s, color .28s, box-shadow .28s, transform .28s, border-color .28s; } .jn-btn:hover, .jn-btn:focus-visible { background: var(--green-2); color: var(--cream-2); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(20,61,40,.6); } .jn-btn--gold { background: var(--gold-grad); color: #3a2812; border: 0; box-shadow: 0 12px 26px -12px rgba(176,125,34,.7); margin-top: 24px; font-weight: 700; } .jn-btn--gold:hover, .jn-btn--gold:focus-visible { filter: brightness(1.06); color: #2a1c08; } .jn-btn--ghost { border-color: rgba(255,255,255,.85); color: #fff; } .jn-btn--ghost:hover, .jn-btn--ghost:focus-visible { background: #fff; color: var(--green); border-color: #fff; } .jn-btn--full { width: 100%; margin-top: 6px; } .jn-btn:disabled, .jn-btn[disabled] { opacity: .42; cursor: not-allowed; filter: grayscale(.25); } .jn-btn:disabled:hover, .jn-btn[disabled]:hover { background: transparent; color: var(--green); transform: none; box-shadow: none; } .jn :focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; border-radius: 6px; } /* ───────────── TOAST ───────────── */ .jn-toast { position: fixed; inset-block-start: 18px; inset-inline: 18px; z-index: 60; max-width: 520px; margin-inline: auto; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--cream-2); border: 1px solid var(--border); box-shadow: var(--shadow); animation: jn-drop .5s cubic-bezier(.2,.7,.3,1) both; } .jn-toast--ok { border-inline-start: 4px solid var(--green-2); } .jn-toast--err { border-inline-start: 4px solid #b5563f; } .jn-toast__ic { color: var(--green-2); flex-shrink: 0; } .jn-toast--err .jn-toast__ic { color: #b5563f; } .jn-toast div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .jn-toast strong { font-weight: 600; font-size: 15px; color: var(--ink); } .jn-toast span { color: var(--muted); } .jn-toast a { color: var(--green-2); text-decoration: underline; font-weight: 500; } .jn-toast__x { margin-inline-start: auto; background: none; border: 0; cursor: pointer; font-size: 24px; line-height: 1; color: var(--dim); padding: 0 4px; } @keyframes jn-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } } /* ───────────── HERO (cinematic photo + cream stage) ───────────── */ .jn-hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 104px 24px 92px; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, #e9dcc0, #d9e8cb 60%, #f1e6cd); } .jn-hero__photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.3s ease; } .jn-hero__photo.is-loaded { opacity: 1; } .jn-hero__wash { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(247,238,220,.62), rgba(247,238,220,.18) 60%, transparent 72%), linear-gradient(180deg, rgba(20,61,40,.34) 0%, transparent 26%, transparent 64%, rgba(247,238,220,.55) 100%); } .jn-hero .jn-leaf { z-index: 2; } .jn-hero .jn-leaf--green { color: var(--green); opacity: .3; } .jn-hero .jn-leaf--sage { color: var(--green-2); opacity: .26; } .jn-hero__inner { position: relative; z-index: 3; max-width: 640px; padding: clamp(34px, 5vw, 56px) clamp(26px, 4vw, 52px); background: rgba(252,247,234,.74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border: 1px solid var(--frame); border-radius: 6px; box-shadow: 0 0 0 6px rgba(252,247,234,.28), var(--shadow); display: flex; flex-direction: column; align-items: center; } .jn-kicker { font-size: 11px; letter-spacing: .2em; font-weight: 600; color: var(--green); border: 1px solid rgba(20,61,40,.32); background: rgba(255,255,255,.5); padding: 7px 18px; border-radius: 999px; margin-bottom: 24px; } .jn-brand { font-family: var(--serif); font-size: clamp(20px, 3vw, 30px); letter-spacing: .05em; margin-bottom: 8px; } .jn-hero__title { font-family: var(--disp); font-weight: 600; font-size: clamp(40px, 9vw, 84px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); } .jn-hero__dates { font-size: clamp(14px, 2.4vw, 19px); color: var(--muted); margin-top: 18px; letter-spacing: .05em; font-weight: 400; } .jn-hero__desc { font-size: 16.5px; color: var(--muted); line-height: 1.95; } .jn-hero .jn-rule { margin-inline: auto; } .jn-hero .jn-btn { margin-top: 32px; } /* ───────────── WHY ───────────── */ .jn-sec--why { background: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(216,169,63,.14), transparent 60%), var(--cream-2); } .jn-why { display: grid; gap: 18px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); } .jn-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 30px 24px 26px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .jn-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--gold-grad); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; } .jn-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold-2); } .jn-card:hover::before { transform: scaleX(1); } .jn-card__ic { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 18px; color: var(--cream-2); background: linear-gradient(140deg, var(--green-2), var(--green)); box-shadow: 0 8px 18px -8px rgba(20,61,40,.6); } .jn-card__title { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--green); margin-bottom: 8px; } .jn-card__text { font-size: 14.5px; color: var(--muted); line-height: 1.78; } /* organic divider */ .jn-divider { line-height: 0; background: var(--cream-2); } .jn-divider svg { width: 100%; height: 60px; display: block; } .jn-divider path { fill: var(--cream); } /* ───────────── ITINERARY (daily-rhythm timeline) ───────────── */ .jn-sec--itin { background: linear-gradient(180deg, var(--cream) 0%, var(--sage-2) 130%); } .jn-flow { position: relative; margin: 40px auto 0; max-width: 460px; } .jn-flow::before { content: ''; position: absolute; inset-block: 14px; inset-inline-start: 8px; width: 2px; background: linear-gradient(var(--gold-2), var(--green-3)); opacity: .45; } .jn-flow__step { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; padding-inline-start: 34px; } .jn-flow__step::before { content: ''; position: absolute; inset-inline-start: 1px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--gold-grad); box-shadow: 0 0 0 4px var(--cream), 0 6px 12px -6px rgba(176,125,34,.7); } .jn-flow__txt { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); } .jn-flow__tag { font-size: 10.5px; letter-spacing: .06em; font-weight: 700; color: #8a6111; background: rgba(216,169,63,.22); border-radius: 999px; padding: 3px 11px; } .jn-finale { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 34px auto 0; padding: 22px 24px; border-radius: 18px; background: linear-gradient(150deg, #fffdf6, #f6e9cc); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .jn-finale__ic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; color: var(--cream-2); background: linear-gradient(140deg, var(--green-2), var(--green)); box-shadow: 0 8px 18px -8px rgba(20,61,40,.6); } .jn-finale__txt h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--green); margin-bottom: 4px; } .jn-finale__txt p { font-size: 14.5px; color: var(--muted); line-height: 1.7; } /* repeating "save my spot" call-to-action band */ .jn-ctaband { margin-top: 44px; text-align: center; } /* ───────────── LOCATIONS (photo-over cards) ───────────── */ .jn-sec--loc { background: linear-gradient(180deg, var(--sage-2), var(--cream) 120%); } .jn-loc { display: grid; gap: 22px; margin-top: 40px; grid-template-columns: 1fr; } .jn-loc__card { position: relative; min-height: 380px; border-radius: 22px; overflow: hidden; isolation: isolate; background-size: cover; background-position: center; box-shadow: var(--shadow); border: 1px solid var(--border); background-image: linear-gradient(150deg, var(--green-2), var(--green)); display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s ease, box-shadow .35s ease; } .jn-loc__card--samui { background-image: linear-gradient(150deg, var(--gold-2), var(--green-2)); } .jn-loc__card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,61,40,.12) 0%, transparent 32%, rgba(15,40,26,.78) 100%); } .jn-loc__card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(20,61,40,.7); } .jn-loc__tag { position: absolute; z-index: 2; inset-block-start: 18px; inset-inline-start: 18px; font-size: 10px; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; color: #2a1c08; background: var(--gold-grad); padding: 6px 14px; border-radius: 999px; } .jn-loc__leaf { position: absolute; z-index: 1; inset-block-start: -8px; inset-inline-end: -8px; color: rgba(255,255,255,.34); } .jn-loc__leaf .jn-ic { width: 86px; height: 86px; } .jn-loc__txt { position: relative; z-index: 2; padding: 26px 26px 28px; color: #fff; } .jn-loc__txt h3 { font-family: var(--disp); font-weight: 600; font-size: 30px; margin-bottom: 8px; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .jn-loc__txt p { font-size: 14.5px; color: rgba(255,255,255,.9); line-height: 1.7; text-shadow: 0 1px 12px rgba(0,0,0,.4); } /* ───────────── AMBIANCE BAND (full-bleed photo) ───────────── */ .jn-amb { position: relative; min-height: 74vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 90px 24px; overflow: hidden; isolation: isolate; background-color: var(--green); background-size: cover; background-position: center; background-attachment: fixed; } .jn-amb__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,40,26,.55), rgba(15,40,26,.32) 45%, rgba(15,40,26,.7)); } .jn-amb .jn-leaf { z-index: 2; color: #cfe3c0; opacity: .22; } .jn-amb__quote { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 760px; color: #fff; } .jn-amb__lead { font-family: var(--disp); font-weight: 600; font-style: italic; font-size: clamp(28px, 5.6vw, 60px); line-height: 1.14; text-shadow: 0 4px 30px rgba(0,0,0,.4); } .jn-amb__sub { font-size: clamp(13px, 2.2vw, 16px); letter-spacing: .12em; color: rgba(255,255,255,.86); } .jn-amb__quote .jn-btn { margin-top: 8px; } /* ───────────── PRICE (light statement) ───────────── */ .jn-sec--price { background: radial-gradient(ellipse 62% 52% at 84% 6%, rgba(216,169,63,.24), transparent 56%), radial-gradient(ellipse 58% 50% at 10% 96%, rgba(79,148,104,.2), transparent 58%), linear-gradient(155deg, var(--sage-2) 0%, var(--cream-2) 52%, var(--cream-3) 100%); } .jn-price { display: grid; gap: 24px; margin-top: 40px; grid-template-columns: 1fr; } .jn-price__card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 34px 28px; color: var(--text); box-shadow: var(--shadow); } .jn-price__card .jn-btn--gold { margin-top: auto; } /* push details CTA to the bottom so stretched cards look intentional */ .jn-price__card--main { border: 0; background: linear-gradient(165deg, #fffdf6, #f6e9cc); box-shadow: 0 30px 64px -28px rgba(176,125,34,.6); } .jn-price__card--main::before { content: ''; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px; background: var(--gold-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .jn-price__lbl { font-size: 11px; letter-spacing: .22em; color: var(--gold); font-weight: 700; margin-bottom: 12px; text-transform: uppercase; } .jn-price__amt { font-family: var(--disp); font-size: clamp(54px, 11vw, 74px); font-weight: 700; line-height: 1.12; padding-block-start: 6px; } .jn-price__per { font-size: 14px; color: var(--muted); margin: 8px 0 14px; } .jn-price__est { font-size: 12.5px; color: var(--dim); line-height: 1.7; margin-bottom: 18px; padding-inline-start: 2px; } .jn-price__list { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; color: var(--text); } .jn-price__list li { display: flex; align-items: flex-start; gap: 11px; } .jn-price__list li::before { content: ''; flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6440' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .jn-price__not { margin-top: 20px; font-size: 13px; color: var(--dim); line-height: 1.7; } .jn-fact { padding: 15px 0; border-top: 1px solid var(--border); } .jn-fact:first-of-type { border-top: 0; } .jn-fact h4 { font-size: 12px; letter-spacing: .1em; color: var(--gold); font-weight: 700; margin-bottom: 6px; } .jn-fact p { font-size: 14px; color: var(--muted); line-height: 1.8; } /* ───────────── REGISTER (floating card on rich sage) ───────────── */ .jn-sec--reg { background: linear-gradient(160deg, var(--sage) 0%, var(--sage-2) 48%, var(--cream-2) 100%); text-align: center; } .jn-sec--reg .jn-wrap { background: var(--cream-2); border: 1px solid var(--border); border-radius: 26px; padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 52px); box-shadow: var(--shadow); } .jn-form { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; text-align: start; } .jn-field { display: flex; flex-direction: column; gap: 6px; } .jn-field label { font-size: 12px; font-weight: 600; color: var(--muted); padding-inline-start: 4px; } .jn-field input, .jn-field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); font-family: var(--body); font-size: 15px; font-weight: 300; direction: rtl; transition: border-color .2s, box-shadow .2s; } .jn-field textarea { resize: vertical; min-height: 86px; } .jn-field input::placeholder, .jn-field textarea::placeholder { color: var(--dim); } .jn-field input:focus, .jn-field textarea:focus { outline: 0; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(216,169,63,.22); } .jn-form__note { margin-top: 12px; font-size: 12.5px; color: var(--dim); line-height: 1.7; text-align: center; } .jn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ───────────── FOOTER ───────────── */ .jn-foot { text-align: center; padding: 46px 24px; border-top: 1px solid var(--border); background: linear-gradient(180deg, var(--cream), var(--cream-3)); } .jn-foot__brand { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--gold); letter-spacing: .04em; } .jn-foot__links { margin-top: 12px; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); } .jn-foot__links a { transition: color .2s; } .jn-foot__links a:hover { color: var(--green-2); } /* ───────────── REVEAL ANIMATION ───────────── */ .jn-anim .jn-reveal { opacity: 0; transform: translateY(28px); } .jn-anim .jn-reveal.is-in { opacity: 1; transform: none; transition: opacity .95s ease, transform .95s cubic-bezier(.2,.7,.3,1); } /* ───────────── RESPONSIVE ───────────── */ @media (min-width: 720px) { .jn-loc { grid-template-columns: 1fr 1fr; } .jn-price { grid-template-columns: 1.12fr 1fr; align-items: stretch; } } @media (max-width: 520px) { .jn-flow__txt { font-size: 17px; } .jn-amb { background-attachment: scroll; } } /* ───────────── REDUCED MOTION ───────────── */ @media (prefers-reduced-motion: reduce) { .jn-anim .jn-reveal { opacity: 1 !important; transform: none !important; } .jn-hero__photo { transition: none; transform: none; } .jn-amb { background-attachment: scroll; } .jn * { scroll-behavior: auto !important; } } /* ───────────── FLOATING WHATSAPP PILL ───────────── * Persistent CTA visible across the entire scroll. Lives outside the .jn * scope (sibling of
/