/* NOYA — "deep" luxury layer (loaded last). * Night-teal page, cream type, matte-gold hairlines. Products stand in a soft pool of light — * no card, no frame, no box: the white studio background is multiplied into the light, so the * object seems to float on the page. Panels people fill in (forms, cart, chat) stay on warm paper. */ :root { --night: #081719; --night-2: #0C1F22; --night-3: #12292D; --paper: #F2EADC; --gold: #C9A468; --gold-soft: rgba(201, 164, 104, .28); --gold-grad: linear-gradient(100deg, #8C6A34 0%, #D9BD86 35%, #F2E2B8 50%, #C9A468 65%, #8C6A34 100%); /* the page runs dark: re-point the shared tokens */ --text: #EDE4D3; --muted: #A79F8F; --line: rgba(201, 164, 104, .2); --white: #0F2427; --cream-50: #081719; --cream-100: #0C1F22; --sand: #12292D; --gold-text: #D4B47C; --font-display: 'Noto Serif Hebrew', 'Frank Ruhl Libre', serif; --font-latin: 'Cormorant Garamond', 'Cinzel', serif; --radius: 0; } html { background: var(--night); } body { background: radial-gradient(1400px 700px at 50% -200px, rgba(201, 164, 104, .10), transparent 70%), var(--night); color: var(--text); font-weight: 500; letter-spacing: .01em; } h1, h2, h3, .card__title, .tier h3 { font-family: 'Heebo', Arial, sans-serif; font-weight: 500; letter-spacing: .015em; color: #F4EBDA; } h1 { font-weight: 500; } .eyebrow, .tier__flag, .card__badge, .crumbs { font-family: 'Heebo', Arial, sans-serif; letter-spacing: .22em; } a { color: inherit; } ::selection { background: var(--gold); color: var(--night); } /* ---- header / announce / footer ---- */ .announce { background: #050F10; color: var(--gold-text); letter-spacing: .12em; font-size: .78rem; border-bottom: 1px solid var(--line); } .header { background: rgba(8, 23, 25, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav a { letter-spacing: .06em; font-weight: 500; } .nav a:hover, .nav a[aria-current] { color: var(--gold); } .footer { background: #050F10; border-top: 1px solid var(--line); } /* ---- sections ---- */ .section, .page-head { background: transparent; } .section:nth-of-type(even) { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .015)); } .page-head h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); } .page-head p { color: var(--muted); } /* ---- buttons ---- */ .btn--primary { background: var(--gold-grad); background-size: 200% 100%; color: #0B1A1B; border: 0; font-weight: 600; letter-spacing: .08em; transition: background-position .6s; } .btn--primary:hover { background-position: 100% 0; } .btn--ghost, .btn--outline { background: transparent; color: var(--text); border: 1px solid var(--gold-soft); } .chip { background: transparent; color: var(--text); border: 1px solid var(--gold-soft); } .chip:hover { border-color: var(--gold); } .tabs a, .subtabs a, .budgets a { background: transparent; color: var(--muted); border-color: var(--line); } .tabs a[aria-current], .subtabs a[aria-current], .budgets a[aria-current] { background: transparent; color: var(--gold); border-color: var(--gold); } select, input, textarea { background: rgba(255, 255, 255, .04); color: var(--text); border: 1px solid var(--gold-soft); } select option { background: var(--night-2); color: var(--text); } /* ---- product cards: an object in a pool of light ---- */ .grid { gap: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px); } .card, .card:hover { background: transparent; box-shadow: none; border: 0; } .card__media { background: transparent; overflow: visible; aspect-ratio: 4 / 5; } .card__media::after { display: none; } .card__media a { display: block; width: 100%; height: 100%; } .card__media--cut a, .card__media--set .card__set { background: radial-gradient(ellipse 66% 58% at 50% 50%, #F5EEE2 0%, #EBE0CC 40%, #B9AE99 58%, #4F5853 76%, #142A2D 90%, var(--night) 100%); } .card__media--cut img { object-fit: contain; padding: 15% 15% 17%; mix-blend-mode: multiply; filter: contrast(1.05); } .card__media img { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .5s; } .card:hover .card__media--cut img:not(.alt) { transform: translateY(-6px) scale(1.03); } .card__media--cut .alt { display: none; } /* bundle: the products stand together */ .card__media .card__set { display: flex; align-items: center; justify-content: center; position: relative; } .card__media .card__set img { padding: 0; object-fit: contain; mix-blend-mode: multiply; height: 64%; width: 44%; max-width: none; filter: contrast(1.05); } .card__media .card__set--3 img { width: 34%; height: 58%; } .card__media .card__set img + img { margin-inline-start: -4%; } .card__media .card__set img:first-child { height: 76%; z-index: 1; } .card__badge { background: transparent; color: var(--gold); border: 1px solid var(--gold-soft); font-size: .62rem; padding: 4px 10px; z-index: 2; } .card__wish { background: transparent !important; box-shadow: none; color: var(--text); z-index: 3; } .card__quick { position: absolute; inset-inline: 14%; bottom: 4%; z-index: 4; background: rgba(8, 23, 25, .86); color: #F2E7D2; border: 1px solid var(--gold-soft); font: 400 .78rem/1 var(--font-body); letter-spacing: .1em; padding: 11px 8px; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; } .card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; } @media (hover: none) { .card__quick { opacity: 1; transform: none; position: static; display: block; width: 100%; margin-top: 8px; } } .card__body { padding: 14px 4px 0; text-align: center; align-items: center; gap: 4px; } .card__title { font-size: 1.05rem; line-height: 1.45; color: #F4EBDA; } .card .price { color: var(--gold-text); font-family: 'Heebo', Arial, sans-serif; font-size: 1.15rem; letter-spacing: .04em; } .free-ship { color: var(--muted) !important; font-size: .74rem; letter-spacing: .04em; } /* ---- product page ---- */ .price, .pdp .price, #price, .product__price { color: var(--gold-text) !important; } .price s { color: var(--muted); } /* inside a product: a straight, evenly lit panel (no rounded vignette) so every item is fully visible */ .stage, .stage--hb { background: linear-gradient(180deg, #F4EDE1 0%, #ECE3D3 100%) !important; border-radius: 0 !important; } .stage, .stage--hb { background: radial-gradient(60% 56% at 50% 48%, #F5EEE2 0%, #EADFCB 45%, #9E9483 70%, #1A3033 88%, var(--night) 100%); } .stage img[src^="http"] { mix-blend-mode: multiply; } .thumbs button { background: #EFE6D6; } .thumbs img[src^="http"] { mix-blend-mode: multiply; } .block, .addon, .hb-intro { border-color: var(--line); } .block__title { color: #F4EBDA; font-family: 'Heebo', Arial, sans-serif; font-weight: 500; } .pick { background: transparent; border-color: var(--line); color: var(--text); } .pick img { background: #F1E9DA; } .pick img[src^="http"] { mix-blend-mode: normal; } .pick[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; } /* housewarming builder — chosen items side by side, tap to open */ .stage--hb { padding: 26px 10px; } .hb-stage { display: flex; justify-content: center; align-items: flex-end; gap: 0; flex-wrap: wrap; } .hb-fig { background: none; border: 0; padding: 0 2px; cursor: pointer; display: grid; justify-items: center; gap: 4px; width: clamp(92px, 24%, 170px); color: #23302F; } .hb-fig img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s; } .hb-fig span { font-size: .72rem; letter-spacing: .08em; color: #4A4D45; } .hb-fig em { font-style: normal; font-size: .7rem; color: #7E602E; border-bottom: 1px solid currentColor; } .hb-fig:hover img, .hb-fig.is-open img { transform: translateY(-5px); } .hb-fig.is-open span { color: #0B1A1B; font-weight: 700; } .hb-row { border-bottom: 1px solid var(--line); } .hb-row__head { width: 100%; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: none; border: 0; color: inherit; padding: 12px 0; cursor: pointer; text-align: start; } .hb-row__head img { width: 56px; height: 56px; object-fit: contain; background: #F1E9DA; } .hb-row__head small { display: block; color: var(--muted); font-size: .72rem; letter-spacing: .1em; } .hb-row__head b { font-weight: 500; font-size: .92rem; } .hb-row__head em { font-style: normal; font-size: .76rem; color: var(--gold); white-space: nowrap; } .hb-row.is-open .hb-row__head em::after { content: ' ▴'; } .hb-row__body { padding: 0 0 16px; } .hb-tiers { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .hb-tier { flex: 0 0 auto; background: transparent; color: var(--text); border: 1px solid var(--gold-soft); padding: 9px 14px; cursor: pointer; display: grid; gap: 2px; text-align: center; font-size: .82rem; } .hb-tier small { color: var(--muted); font-size: .68rem; } .hb-tier.is-on { border-color: var(--gold); background: rgba(201, 164, 104, .1); } /* chat message box: wraps and grows instead of hiding text */ .chat__form { align-items: flex-end; } .chat__form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 130px; resize: none; overflow-y: auto; padding: 11px 12px; font: inherit; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; background: #FBF8F2; color: #15201F; border: 1px solid #D9CBB2; } /* home hero: rotating product photos */ .hero__art img { transition: opacity .7s ease; } .hero__art img.is-fading { opacity: 0; } /* chat on phones: closed, pulsing button + message bubble */ .chat-launch--pulse { animation: chatPulse 1.6s ease-out infinite; } @keyframes chatPulse { 0% { box-shadow: 0 0 0 0 rgba(201, 164, 104, .75); } 70% { box-shadow: 0 0 0 16px rgba(201, 164, 104, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 164, 104, 0); } } .chat-teaser { position: fixed; z-index: 60; right: 16px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); max-width: min(290px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 4px; animation: teaserIn .45s ease-out both; } .chat-teaser__msg { text-align: start; background: #F2EADC; color: #15201F; border: 1px solid #C9A468; padding: 12px 14px; font: inherit; font-size: .86rem; line-height: 1.5; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); border-radius: 14px 14px 4px 14px; } .chat-teaser__msg b { display: block; margin-bottom: 2px; } .chat-teaser__x { background: #0C1F22; color: #F2E7D2; border: 1px solid var(--gold-soft); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: .75rem; flex: 0 0 auto; } @keyframes teaserIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .chat-launch--pulse, .chat-teaser { animation: none; } } /* home: moving strip of product photos */ .marquee { overflow: hidden; border-block: 1px solid var(--line); background: #050F10; padding: 14px 0; direction: ltr; } .marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 60s linear infinite; } .marquee__track img { height: clamp(150px, 26vw, 230px); aspect-ratio: 4 / 5; object-fit: cover; flex: 0 0 auto; outline: 1px solid rgba(238, 217, 180, .18); outline-offset: -1px; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* music button in the hero */ .hero { position: relative; } .sound-btn { position: absolute; bottom: 18px; inset-inline-start: 18px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(8, 23, 25, .7); color: #F2E7D2; border: 1px solid var(--gold-soft); border-radius: 99px; font: inherit; font-size: .8rem; letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(6px); } .sound-btn__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; } .sound-btn__bars i { display: block; width: 3px; height: 4px; background: var(--gold); } .sound-btn.is-on .sound-btn__bars i { animation: eq .9s ease-in-out infinite alternate; } .sound-btn.is-on .sound-btn__bars i:nth-child(2) { animation-delay: .2s; } .sound-btn.is-on .sound-btn__bars i:nth-child(3) { animation-delay: .45s; } .sound-btn.is-on .sound-btn__bars i:nth-child(4) { animation-delay: .1s; } @keyframes eq { from { height: 3px; } to { height: 14px; } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .sound-btn.is-on .sound-btn__bars i { animation: none; height: 10px; } } @media (max-width: 720px) { .sound-btn { bottom: 10px; inset-inline-start: 12px; } .holiday-band a { padding: 8px 38px; gap: 8px; } .holiday-band__count { font-size: 1.2rem; min-width: 34px; height: 34px; } .holiday-band small, .holiday-band em { display: none; } } /* the rabbi: photo frame, dedication window, donation-page details */ .rav-photo { position: relative; width: 150px; aspect-ratio: 4 / 5; border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #1F3B3F, #081719); border: 1.5px solid var(--gold); box-shadow: 0 16px 34px rgba(0, 0, 0, .4); display: grid; place-items: center; text-align: center; } .rav-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; z-index: 1; } .rav-photo span { font-family: 'Heebo', Arial, sans-serif; color: #F2E2B8; font-size: 1.05rem; line-height: 1.3; } .rav-photo small { display: block; font-size: .75rem; color: var(--gold); letter-spacing: .1em; margin-top: 4px; } .don-rav { width: 100%; max-width: 340px; } .don-rav span { font-size: 1.6rem; } .rav-pop { padding: 26px 24px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 480px; } .rav-pop h2 { margin: 2px 0 0; font-size: 1.5rem; line-height: 1.35; } .rav-pop p { margin: 0; line-height: 1.75; } .don-em { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; } .don-open { display: grid; gap: 4px; margin: 12px 0; padding: 14px 16px; border-inline-start: 3px solid var(--gold); background: rgba(201, 164, 104, .08); color: #E9E0CF; font-size: .92rem; line-height: 1.7; } .don-open b { color: #F4EBDA; } .don-wa { justify-self: start; margin-top: 6px; background: #25D366 !important; color: #fff !important; border: 0; font-weight: 700; } .maaser { display: grid; gap: 3px; padding: 12px 14px; border: 1px dashed #B8935A; background: rgba(201, 164, 104, .12); text-align: center; width: 100%; } .maaser b { font-size: 1.1rem; color: #8A1C15; } .maaser span { font-family: 'Heebo', Arial, sans-serif; font-size: 1.05rem; color: #7E602E; } .maaser small { font-size: .82rem; line-height: 1.6; color: #33403E; } .maaser--page { text-align: start; margin: 12px 0; } .maaser--page b { color: #F2B8A8; } .maaser--page span { color: var(--gold); } .maaser--page small { color: #E3D9C6; } .ig-menu, .ig-foot { font-weight: 700; background: linear-gradient(90deg, #F77737, #E1306C, #C13584); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .don-full { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--gold); background: rgba(201, 164, 104, .1); margin: 12px 0 6px; } .don-full b { display: block; font-size: 1.1rem; color: #F4EBDA; } .don-full small { display: block; color: #E3D9C6; font-size: .85rem; margin-top: 2px; max-width: 46ch; } .don-or { margin: 10px 0 0; font-size: .85rem; color: var(--muted) !important; } @media (max-width: 720px) { main .usp { grid-template-columns: 1fr 1fr !important; gap: 0; } main .usp div { padding: 14px 8px; font-size: .74rem; } main .usp strong { font-size: .9rem; } } .yt-mini { position: fixed; z-index: 70; left: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: 200px; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--gold); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); } .yt-mini iframe { width: 100%; height: 100%; border: 0; display: block; } .yt-mini button { position: absolute; top: -12px; right: -12px; width: 26px; height: 26px; border-radius: 50%; background: #0C1F22; color: #F2E7D2; border: 1px solid var(--gold); cursor: pointer; font-size: .75rem; } @media (max-width: 720px) { .yt-mini { width: 160px; } } /* AI chat: unread badge (moved here from WhatsApp) */ .chat-launch { position: fixed; } .chat-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 11px; background: #C0392B; color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--night); animation: waPulse 2s infinite; } .chat-badge[hidden], #wa-badge { display: none !important; } /* Instagram + recommendations */ .ig-wrap { display: grid; gap: 10px; padding-block: 22px 6px; } .ig-cta { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: #fff; background: linear-gradient(110deg, #833AB4, #C13584 40%, #E1306C 60%, #F77737 85%, #FCAF45); border-radius: 14px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } .ig-cta__icon svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.7; display: block; } .ig-cta span:nth-child(2) { display: grid; flex: 1; min-width: 0; } .ig-cta b { font-size: 1.05rem; font-weight: 700; } .ig-cta small { font-size: .78rem; opacity: .92; } .ig-cta em { font-style: normal; font-weight: 700; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .7); } .rec-link { display: inline-block; margin: 8px 0; color: var(--gold) !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-soft); } .drawer__panel .rec-link { color: #7E602E !important; } .rec-link--home { justify-self: center; } .rec { display: grid; gap: 22px; padding-block: 26px 70px; } .rec-names { display: flex; flex-wrap: wrap; gap: 8px; } .rec-names span { border: 1px solid var(--gold-soft); padding: 6px 14px; border-radius: 99px; font-size: .88rem; color: #F2E7D2; } .rec-h { margin: 0; font-size: 1.5rem; } .rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; } .rec-card { display: grid; text-decoration: none; color: inherit; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); } .rec-card__media { position: relative; aspect-ratio: 9 / 16; background: radial-gradient(circle, #1A3336, #081719); display: grid; place-items: center; overflow: hidden; } .rec-card__media img { width: 100%; height: 100%; object-fit: cover; } .rec-card__media > i { font-style: normal; font-size: 2rem; color: var(--gold); } .rec-card__play { position: absolute; inset: auto auto 10px 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; font-style: normal; font-size: .8rem; } .rec-card__body { display: grid; gap: 2px; padding: 10px 12px; } .rec-card__body small { color: var(--muted); font-size: .75rem; } .rec-card__body em { font-style: normal; color: var(--gold); font-size: .8rem; } .rec-pop { padding: 26px 24px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 480px; } .rec-pop__photos { position: relative; width: 170px; height: 220px; } .rec-pop__ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, #F2E2B8, #C9A468); border-radius: 12px; overflow: hidden; opacity: 0; transition: opacity .8s; } .rec-pop__ph.is-on { opacity: 1; } .rec-pop__ph img, .rec-pop__ph video { width: 100%; height: 100%; object-fit: cover; } .rec-card--video video { width: 100%; height: 100%; object-fit: cover; background: #000; } .rec-pop__ph i { font-style: normal; font-size: 3rem; color: #0B1A1B; } .rec-pop h2 { margin: 4px 0 0; font-size: 1.45rem; } .rec-pop__names { margin: 0; font-size: .9rem; line-height: 1.7; } /* ---- phones: luxurious, light, right-to-left ---- */ @media (max-width: 860px) { /* hamburger on the left, cart & search on the right */ .header .header__menu { grid-column: 1 !important; grid-row: 1; justify-self: start !important; } /* hamburger on the right (RTL start) */ .header__actions { grid-column: 3; grid-row: 1; justify-self: end; } .logo { grid-column: 2; grid-row: 1; } /* photos first, closer to the top */ .hero__inner, .hero .container { display: flex; flex-direction: column; } .hero__art { order: -1 !important; height: 300px !important; margin: -6px 0 14px; width: 100%; align-self: stretch; } .hero { padding-top: 14px !important; } /* everything reads right → left, in light tones */ main, main p, main li, main h1, main h2, main h3, .section__head, .card__body, .hero__copy, .story-teaser, .usp div { text-align: right !important; } .card__body { align-items: flex-start !important; } main p, main li, .usp div, .hero .lead, .story-teaser p, .section__head p { color: #E9E0CF !important; } main small, .muted { color: #CFC5B3; } :root { --muted: #CFC5B3; } .hero h1, .hero__title { font-size: clamp(2.4rem, 12vw, 3.2rem) !important; line-height: 1.08; letter-spacing: .01em; } .hero .lead { font-size: 1.02rem; line-height: 1.75; } .section__head h2, .page-head h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.2; } .eyebrow { letter-spacing: .18em; font-size: .7rem; color: var(--gold) !important; } .hero__cta { display: grid; gap: 10px; } .hero__cta .btn { width: 100%; } } /* bundles: one tab per product in the bundle */ .bundle-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; scroll-snap-type: x proximity; } .bundle-tabs::-webkit-scrollbar { display: none; } .bundle-tab { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 8px; min-width: 150px; max-width: 220px; padding: 6px 12px 6px 6px; background: rgba(255, 255, 255, .03); border: 1px solid var(--gold-soft); color: #EDE4D3; cursor: pointer; font: inherit; text-align: start; } .bundle-tab img { width: 44px; height: 44px; object-fit: contain; background: #F1E9DA; flex: 0 0 auto; } .bundle-tab span { display: grid; min-width: 0; } .bundle-tab b { font-weight: 600; font-size: .9rem; } .bundle-tab small { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bundle-tab.is-on { border-color: var(--gold); background: rgba(201, 164, 104, .16); box-shadow: inset 0 -2px 0 var(--gold); } .bundle-tab.is-removed img { opacity: .3; filter: grayscale(1); } .bundle-tab.is-removed small { color: #F0A898; } /* upgrade choices: a clear list of full sentences ("לשדרוג מגש הלחם ב-25 ₪ — לחצי כאן") */ .hb-row .hb-tiers { display: grid; gap: 8px; overflow: visible; padding: 4px 0 6px; } .hb-row .hb-tier { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; text-align: start; font-size: .95rem; border: 1px solid var(--gold-soft); background: rgba(201, 164, 104, .06); } .hb-row .hb-tier span { font-weight: 600; } .hb-row .hb-tier small { color: var(--gold); font-size: .78rem; white-space: nowrap; } .hb-row .hb-tier:hover { border-color: var(--gold); } .hb-row .hb-tier.is-on { border-color: var(--gold); background: rgba(201, 164, 104, .18); } .hb-current { margin: 6px 0 4px; } .hb-current em { font-style: normal; color: var(--gold); font-size: .85rem; } /* cart: every item opens its product page */ .line__link { color: inherit; text-decoration: none; display: block; } a.line__title:hover, a.line__title:focus-visible { text-decoration: underline; } /* donations & bar-mitzvah lessons */ .don { display: grid; gap: 28px; padding-block: 30px 70px; } .don-card { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; border: 1px solid var(--line); padding: 22px; background: rgba(255, 255, 255, .02); } .don-card--gold { border-color: var(--gold); } .don-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .don-card h2 { margin: 4px 0 8px; font-size: clamp(1.4rem, 2.6vw, 2rem); } .don-card p { line-height: 1.8; color: #E3D9C6; } .don-motto { font-family: 'Heebo', Arial, sans-serif; font-size: 1.25rem; color: var(--gold) !important; margin: 0; } .don-facts { margin: 10px 0; padding-inline-start: 18px; line-height: 1.9; font-size: .92rem; color: #E3D9C6; } .don-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 12px 0; } .don-sub { font-size: .8rem; color: var(--muted); } .don-links { font-size: .85rem; } .don-links a { color: var(--gold); } .don-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; align-items: center; } .don-other { display: flex; align-items: center; gap: 6px; font-size: .85rem; } .don-other input { width: 100px; padding: 8px; } .don-btn { min-width: 220px; } .don-note { color: var(--muted); font-size: .85rem; text-align: center; } .lessons { padding-block: 30px 70px; } .lessons__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 26px; } .lessons__grid > div { border: 1px solid var(--line); padding: 18px; } .lessons__grid h3 { margin: 0 0 6px; font-size: 1.15rem; } .lessons__grid p { margin: 0; color: #E3D9C6; line-height: 1.75; } @media (max-width: 720px) { .don-card { grid-template-columns: 1fr; } .don-card img { max-height: 240px; } } .hb-remove { display: block; width: 100%; margin: 4px 0 10px; padding: 9px 12px; background: transparent; border: 1px dashed rgba(232, 120, 100, .6); color: #F0A898; font: inherit; font-size: .84rem; cursor: pointer; text-align: center; } .hb-remove--back { border-color: var(--gold-soft); color: var(--gold); } .hb-fig.is-removed img { opacity: .25; filter: grayscale(1); } .hb-fig.is-removed em { color: #8A2F1E; } .hb-hint { color: var(--muted); font-size: .8rem; margin: 10px 0 0; } .hb-more { margin-top: 10px; color: var(--gold); } .pick-grid--hb { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 520px; overflow-y: auto; margin-top: 10px; } /* ---- luxury promo band (Shabbat page) ---- */ .promo-band { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 0; border: 1px solid var(--line); background: linear-gradient(120deg, #0C1F22, #081719 60%); text-decoration: none; margin-bottom: 40px; overflow: hidden; } .promo-band__set { display: flex; justify-content: center; align-items: flex-end; padding: 30px 10px 26px; background: radial-gradient(60% 60% at 50% 55%, #F5EEE2 0%, #E8DCC6 45%, #8F887A 72%, #0C1F22 100%); min-height: 240px; } .promo-band__set img { height: 150px; width: auto; max-width: 22%; object-fit: contain; mix-blend-mode: multiply; margin-inline: -1.5%; } .promo-band__set img:nth-child(3) { height: 185px; } .promo-band__txt { padding: 30px clamp(20px, 4vw, 48px); display: grid; gap: 10px; } .promo-band__txt small { color: var(--gold); letter-spacing: .26em; font-family: 'Heebo', Arial, sans-serif; font-size: .8rem; } .promo-band__txt b { font-family: 'Heebo', Arial, sans-serif; font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: #F4EBDA; line-height: 1.35; } .promo-band__txt em { font-style: normal; color: var(--muted); } .promo-band__txt i { font-style: normal; color: var(--gold); border-bottom: 1px solid var(--gold-soft); justify-self: start; padding-bottom: 2px; letter-spacing: .08em; } @media (max-width: 720px) { .promo-band { grid-template-columns: 1fr; } .promo-band__set img { height: 110px; } .promo-band__set img:nth-child(3) { height: 135px; } } /* ---- surfaces that people fill in: warm paper, dark ink ---- */ .modal__box, .drawer__panel, .chat, .search__panel, .co-box, .summary, .lead, .a11y-panel, .admin-table, .offer, .plan { --text: #15201F; --muted: #5B6360; --white: #FBF8F2; --line: #D9CBB2; --cream-50: #F6F0E5; --cream-100: #EDE3D2; --sand: #E6DBC8; --gold-text: #7E602E; color: var(--text); } .modal__box, .drawer__panel, .chat, .search__panel, .co-box, .summary, .a11y-panel { background: var(--paper); } .modal__box h2, .drawer__panel h2, .chat h2, .co-box h2, .summary h2, .modal__box h3 { color: #15201F; } .modal__box input, .drawer__panel input, .chat input, .co-box input, .co-box select, .lead input { background: #FBF8F2; color: #15201F; border-color: #D9CBB2; } .modal__box .btn--primary, .drawer__panel .btn--primary, .co-box ~ .btn--primary, .chat .btn--primary, #co-form .btn--primary { background: #0E262A; color: #F2E7D2; } .chat .chip { color: #15201F; border-color: #CDBB99; } .search__results .card__title, .drawer__panel .card__title { color: #15201F; } .toast { background: var(--paper); color: #15201F; } /* chat planner cards */ .plans { display: grid; gap: 10px; margin-top: 10px; } .plan { border: 1px solid #D9CBB2; padding: 12px; background: #FBF8F2; display: grid; gap: 6px; } .plan--mid { border-color: #B8935A; box-shadow: 0 0 0 1px #B8935A inset; } .plan > small { letter-spacing: .14em; color: #7E602E; font-weight: 700; } .plan__imgs { display: flex; gap: 6px; } .plan__imgs a { flex: 1; max-width: 72px; aspect-ratio: 1; background: #fff; } .plan__imgs img { width: 100%; height: 100%; object-fit: contain; } .plan ul { margin: 0; padding-inline-start: 18px; font-size: .84rem; line-height: 1.5; } .plan ul a { color: inherit; } .plan__price { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .plan__price s { color: #5B6360; font-size: .85rem; } .plan__price b { font-size: 1.15rem; } .plan__price small { color: #5B6360; font-size: .75rem; } .chat-note { font-size: .74rem; color: #5B6360; border-top: 1px dashed #D9CBB2; padding-top: 6px; margin-top: 4px; } /* mobile: categories as one quiet swipe row, not a wall of buttons */ @media (max-width: 720px) { .tabs, .subtabs, .budgets { display: flex; flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 4px; } .tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar, .budgets::-webkit-scrollbar { display: none; } .tabs a, .subtabs a, .budgets a { flex: 0 0 auto; white-space: nowrap; font-size: .8rem; padding: 7px 14px; } .grid { grid-template-columns: 1fr 1fr; gap: 26px 12px; } .card__title { font-size: .9rem; } } .vol-nudge { margin: 6px 0; padding: 8px 10px; font-size: .8rem; color: #7E602E; background: rgba(184, 147, 90, .12); border: 1px dashed #CDBB99; text-align: center; } .opt small { color: var(--muted); font-size: .75rem; } /* ---- readability on the dark page: everything that was dark-teal text becomes cream / gold (page content only) ---- */ main .usp strong, main .card__title, main .tier__price, main .quote, main .pdp__price, main .perso__toggle strong, main .method b, main .font-opt span, main .perso__total, main .story-teaser p b, main .chapter p b, main .story__close b, main .story__sign, main .deals > b, main .combo__item b, main .combo__foot b, main .layout-opt, main .reuse, main .nudge button, main .section__head h2, main .section__head h2 b, main .tier h3, main .tier li, main .cat span, main .includes, main .hb-current b { color: #F1E7D3; } main .price, main .pdp__price, main .tier__price, main .story-teaser__hook, main .chapter__hook, main .eyebrow { color: var(--gold-text); } main .usp div, main .section__head p, main .cat small, main .tier, main .pdp__sub, main .hint-line { color: var(--muted); } main .founder-note, main .founder-quote { background: rgba(255, 255, 255, .04); color: #EDE4D3; } main .link, main .subtabs a[aria-current="page"], main .subtabs a:hover, main .pick[aria-checked="true"] span { color: var(--gold); } main .chip[aria-checked="true"], main .method[aria-checked="true"], main .opt:has(input:checked) { background: rgba(201, 164, 104, .16); border-color: var(--gold); color: #F4EBDA; box-shadow: 0 0 0 1px var(--gold); } main .chip, main .method, main .font-opt, main .layout-opt, main .nudge button, main .opt, main .tier { background: transparent; color: #EDE4D3; border-color: var(--gold-soft); } main .usp div { background: transparent; } main .tier--hot { border-color: var(--gold); } /* checkout boxes stay on paper with dark ink */ main .co-box, main .summary { --gold-text: #7E602E; } main .co-box .chip, main .co-box .opt, main .summary .price, main .summary .total { color: #15201F; background: transparent; } main .co-box .opt:has(input:checked) { background: #FFF6DA; color: #15201F; } main .co-box .link, main .summary .link { color: #1F5FBF; } /* the story mark on the home page is always visible */ .story-teaser__mark.reveal { opacity: 1; transform: none; } /* ---- holiday reminder: gold countdown band + popup ---- */ .holiday-band { position: relative; background: linear-gradient(100deg, #8C6A34, #C9A468 45%, #E9D3A2 60%, #B8935A); color: #0B1A1B; } .holiday-band a { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 56px; text-decoration: none; color: inherit; flex-wrap: wrap; text-align: center; } .holiday-band__count { font-family: 'Heebo', Arial, sans-serif; font-size: 2rem; line-height: 1; font-weight: 700; min-width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid rgba(11, 26, 27, .55); border-radius: 50%; } .holiday-band b { display: block; font-weight: 700; font-size: 1.02rem; } .holiday-band small { display: block; font-size: .78rem; opacity: .8; } .holiday-band em { font-style: normal; font-weight: 700; border-bottom: 1px solid currentColor; white-space: nowrap; } .holiday-band button { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: inherit; } .holiday-band--urgent { background: linear-gradient(100deg, #7A1E17, #B3261E 50%, #7A1E17); color: #fff; } .holiday-band--urgent .holiday-band__count { border-color: rgba(255, 255, 255, .7); } .holiday-pop { padding: 30px 28px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 460px; } .holiday-pop__count { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #F2E2B8, #C9A468); color: #0B1A1B; } .holiday-pop__count b { font-size: 3rem; line-height: 1; font-family: 'Heebo', Arial, sans-serif; } .holiday-pop__count span { font-size: .78rem; margin-top: -18px; } .holiday-pop h2 { margin: 0; font-size: 1.6rem; } .holiday-pop p { margin: 0; font-size: .95rem; line-height: 1.7; } @media (max-width: 640px) { .holiday-band a { padding: 10px 40px; gap: 10px; } .holiday-band__count { font-size: 1.5rem; min-width: 40px; height: 40px; } .holiday-band b { font-size: .9rem; } } /* category tiles with a supplier studio photo: the object in a pool of light, like the product cards */ .cat:has(img[src^="http"]) { background: radial-gradient(60% 55% at 50% 42%, #F5EEE2 0%, #E9DDC7 45%, #8F887A 72%, #0C1F22 100%); } .cat img[src^="http"] { object-fit: contain; padding: 10% 14% 30%; mix-blend-mode: multiply; } /* red deal popup (art siddur → siddur + tehillim pair) */ .deal-pop { padding: 30px 26px 22px; text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 480px; border-top: 6px solid #B3261E; } .deal-pop__tag { background: #B3261E; color: #fff; font-weight: 800; letter-spacing: .12em; padding: 6px 18px; font-size: .9rem; transform: rotate(-2deg); } .deal-pop h2 { margin: 6px 0 0; font-size: 1.55rem; color: #8A1C15 !important; } .deal-pop__ship { color: #B3261E; font-weight: 700; margin: 0; } .deal-pop__imgs { display: flex; gap: 8px; justify-content: center; } .deal-pop__imgs img { width: 120px; height: 150px; object-fit: cover; } .deal-pop p { margin: 0; font-size: .92rem; } .deal-pop__btn { background: #B3261E !important; color: #fff !important; font-weight: 800; padding: .8em 1.6em; } .cash-note { margin-top: 10px; padding: 12px 14px; background: #FFF6DA; border: 1px solid #CDBB99; color: #15201F; font-size: .86rem; line-height: 1.7; } .cash-note p { margin: 6px 0 0; } .holiday-line { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--gold); color: #F2E2B8; font-weight: 600; font-size: .92rem; background: rgba(201, 164, 104, .1); } /* memorial pack dedication */ .mem { display: grid; gap: 10px; } .mem__types { display: flex; flex-wrap: wrap; gap: 6px; } .mem__types small { color: var(--muted); font-size: .72rem; } .mem__label { font-size: .86rem; } .mem textarea, .mem input[type=date] { width: 100%; padding: 10px; font: inherit; } .mem__warn { font-size: .78rem; color: #E8B86A; margin: 0; } .mem__preview { font-size: .9rem; margin: 0; padding: 8px 10px; border: 1px dashed var(--gold-soft); } /* terms & product policy */ .terms { max-width: 820px; line-height: 1.9; } .terms-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .terms-toc a { color: var(--gold); text-decoration: none; font-size: .9rem; } .terms-sec { padding-top: 22px; scroll-margin-top: 90px; } .terms-sec h2 { font-size: 1.45rem; margin: 0 0 10px; } .terms-sec h3 { font-size: 1.05rem; margin: 18px 0 6px; color: var(--gold-text); font-family: 'Heebo', Arial, sans-serif; font-weight: 700; } .terms ol { padding-inline-start: 22px; margin: 0; } .terms li { margin-bottom: 6px; } .terms mark { background: #FFE58A; color: #15201F; padding: 0 4px; } .terms-date { color: var(--muted); font-size: .85rem; margin-top: 28px; } .co-terms { margin: 14px 0 6px; font-size: .86rem; } .co-terms a { text-decoration: underline; } /* mobile nav sub-items */ .mobile-nav .sub a { padding-inline-start: 22px; font-size: .92em; opacity: .85; } /* story / memorial popups — compact */ .modal__box:has(.promo) { max-width: 760px; } .promo { display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; } .promo img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; } .promo__body { padding: 26px 26px 22px; gap: 10px; } .promo__body h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.3; margin: 0; } .promo__body p { font-size: .92rem; line-height: 1.7; margin: 0; } .promo__body .eyebrow { margin: 0; font-size: .72rem; } @media (max-width: 640px) { .promo { grid-template-columns: 1fr; } .promo img { max-height: 190px; } } /* ================= products stand directly on the site background (cut-out photos, 2.10.2026) ================= */ img[src*="img/cut/"] { mix-blend-mode: normal !important; background: transparent !important; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 1px rgba(242, 226, 184, .25)) !important; } .card__media--cut a, .card__media--set .card__set { background: none; } .card__media--cut img[src*="img/cut/"] { padding: 9% 9% 12%; } /* a photo that could not be cut keeps a soft pool of light so it never looks like a white box */ .card__media--cut a:has(img:not([src*="img/cut/"])), .card__media--set .card__set:has(img:not([src*="img/cut/"])) { background: radial-gradient(ellipse 66% 58% at 50% 50%, #F5EEE2 0%, #EBE0CC 40%, #B9AE99 58%, #4F5853 76%, #142A2D 90%, var(--night) 100%); } .stage, .stage--hb { background: transparent !important; } .stage:has(img:not([src*="img/cut/"])):not(.stage--hb) { background: radial-gradient(60% 56% at 50% 48%, #F5EEE2 0%, #EADFCB 45%, #9E9483 70%, #1A3033 88%, var(--night) 100%) !important; } .thumbs button { background: transparent; border: 1px solid var(--gold-soft); } .pick img[src*="img/cut/"] { object-fit: contain; padding: 6%; } .cat img[src*="img/cut/"] { object-fit: contain; padding: 10% 14% 30%; } .hb-fig { color: var(--text); } .hb-fig span { color: #E3D9C6; } .hb-fig em { color: var(--gold); } .hb-fig.is-open span { color: #F4EBDA; } .hb-fig img:not([src*="img/cut/"]) { mix-blend-mode: normal; background: #EFE6D6; } .hb-focus { margin: 0 auto 18px; display: grid; justify-items: center; gap: 8px; max-width: 420px; animation: popIn .45s cubic-bezier(.2, .8, .2, 1); } .hb-focus img { width: 100%; max-height: 360px; aspect-ratio: 1; object-fit: contain; } .hb-focus figcaption { color: #F2E2B8; font-family: 'Heebo', Arial, sans-serif; font-size: 1.05rem; text-align: center; } .line img[src*="img/cut/"] { object-fit: contain; filter: none !important; } /* ================= pop-up windows: deep emerald-black with a gold frame, opening from the centre ================= */ .modal { place-items: center; } .modal__backdrop { background: radial-gradient(circle at 50% 50%, rgba(8, 23, 25, .55), rgba(3, 9, 10, .88)); backdrop-filter: blur(3px); } .modal__box { --text: #EDE4D3; --muted: #B3AA98; --line: rgba(201, 164, 104, .3); --white: #0F2427; --cream-50: #0F2427; --cream-100: #12292D; --sand: #12292D; --gold-text: #D9BD86; background: radial-gradient(120% 80% at 50% 0%, #17363A 0%, #0C1F22 55%, #061214 100%) !important; color: var(--text); border: 1px solid #C9A468; border-radius: 0; box-shadow: 0 0 0 6px rgba(8, 23, 25, .9), 0 0 0 7px rgba(201, 164, 104, .45), 0 40px 90px rgba(0, 0, 0, .7); animation: popIn .5s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 50%; } @keyframes popIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } } .modal__box h2, .modal__box h3 { color: #F4EBDA !important; font-weight: 500; } .modal__box p, .modal__box li, .modal__box small, .modal__box label { color: #E3D9C6; } .modal__box .eyebrow { color: var(--gold) !important; } .modal__box a:not(.btn) { color: var(--gold); } .modal__box input, .modal__box textarea, .modal__box select { background: rgba(255, 255, 255, .06) !important; color: #F4EBDA !important; border-color: rgba(201, 164, 104, .45) !important; } .modal__box input::placeholder, .modal__box textarea::placeholder { color: #8F8878; } .modal__box .btn--primary { background: var(--gold-grad) !important; color: #0B1A1B !important; border: 0; font-weight: 700; } .modal__box .link { color: #CFC4AE; } .modal__close { background: rgba(8, 23, 25, .8) !important; color: #F2E2B8 !important; border: 1px solid var(--gold-soft); } /* media sits in the centre of every window */ .modal__box .rav-photo, .modal__box .rec-pop__grid, .modal__box .deal-pop__imgs { margin-inline: auto; } .maaser { background: rgba(201, 164, 104, .1); } .modal__box .maaser b { color: #F2B8A8; } .modal__box .maaser span { color: var(--gold); } .modal__box .maaser small { color: #E3D9C6; } .deal-pop { border-top-color: #B3261E; } .deal-pop h2 { color: #F7C9C2 !important; } .deal-pop__ship { color: #FF8A7E; } /* celebrities window: one still from each video, in a grid */ .rec-pop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 440px; } .rec-pop__cell { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--gold-soft); background: #000; } .rec-pop__cell video, .rec-pop__cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .rec-pop__cell b { position: absolute; inset: auto 0 0; padding: 14px 4px 5px; font-size: .62rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); } @media (max-width: 420px) { .rec-pop__grid { grid-template-columns: repeat(2, 1fr); max-width: 260px; } } /* groom bundles side by side on phones too */ @media (max-width: 860px) { .ladder { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .ladder > :last-child:nth-child(odd) { grid-column: 1 / -1; } .ladder .tier { padding: 16px 12px !important; } .ladder .tier h3 { font-size: 1.02rem; } .ladder .tier li { font-size: .78rem; padding-block: 5px; } .ladder .tier .btn { padding: .7em .6em; font-size: .82rem; } } /* cart: the chosen name / dedication on its own row, editable in place */ .line__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; padding: 6px 10px; border-inline-start: 2px solid var(--gold); background: rgba(201, 164, 104, .1); font-size: .82rem; line-height: 1.6; } .line__name b { font-weight: 700; color: #15201F; } .line__name .link { font-size: .78rem; color: #7E602E; text-decoration: underline; } .line__name--add { background: none; border-inline-start-style: dashed; } .line__name--add a { color: #7E602E; font-weight: 700; text-decoration: none; } .line__name--edit { display: grid; gap: 8px; } .line__name--edit label { display: grid; gap: 3px; font-size: .76rem; color: #5B6360; } .line__name--edit textarea { width: 100%; font: inherit; font-size: .9rem; padding: 6px 8px; resize: vertical; background: #FBF8F2; color: #15201F; border: 1px solid #D9CBB2; } .line__name-btns { display: flex; gap: 12px; align-items: center; } .line__name-btns .btn { min-height: 32px; padding: .3em 1.2em; font-size: .82rem; } /* ================= pop-ups — uncompromising luxury, every window ================= */ .modal__backdrop { background: radial-gradient(circle at 50% 45%, rgba(10, 26, 24, .55), rgba(2, 6, 6, .92)) !important; backdrop-filter: blur(7px) saturate(.8); -webkit-backdrop-filter: blur(7px) saturate(.8); } .modal__box { --g1: #8C6A34; --g2: #E8CF98; --g3: #F7E9C4; border: 1px solid rgba(232, 207, 152, .75) !important; outline: 1px solid rgba(232, 207, 152, .28); outline-offset: -11px; background: /* gold corner brackets (stay put while the window scrolls) */ linear-gradient(var(--g2), var(--g2)) top 18px right 18px / 26px 1px no-repeat, linear-gradient(var(--g2), var(--g2)) top 18px right 18px / 1px 26px no-repeat, linear-gradient(var(--g2), var(--g2)) top 18px left 18px / 26px 1px no-repeat, linear-gradient(var(--g2), var(--g2)) top 18px left 18px / 1px 26px no-repeat, linear-gradient(var(--g2), var(--g2)) bottom 18px right 18px / 26px 1px no-repeat, linear-gradient(var(--g2), var(--g2)) bottom 18px right 18px / 1px 26px no-repeat, linear-gradient(var(--g2), var(--g2)) bottom 18px left 18px / 26px 1px no-repeat, linear-gradient(var(--g2), var(--g2)) bottom 18px left 18px / 1px 26px no-repeat, radial-gradient(70% 45% at 50% 0%, rgba(232, 207, 152, .16), transparent 70%), radial-gradient(120% 90% at 50% 10%, #13302F 0%, #0A1C1D 50%, #040C0D 100%) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 50px 120px rgba(0, 0, 0, .8), 0 0 80px rgba(201, 164, 104, .12) !important; animation: luxIn .7s cubic-bezier(.16, .84, .24, 1) both !important; } @keyframes luxIn { 0% { opacity: 0; transform: scale(.9); filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } } .modal__box > div:not(.lead):not(.promo) { padding-block: 40px 30px !important; padding-inline: clamp(26px, 6vw, 46px) !important; } .modal__box h2 { font-family: 'Heebo', Arial, sans-serif; font-weight: 500 !important; letter-spacing: .01em; line-height: 1.35 !important; font-size: clamp(1.45rem, 3.4vw, 1.9rem) !important; background: linear-gradient(100deg, #B98E4E 0%, #F7E9C4 30%, #E8CF98 50%, #FFF6DD 62%, #C9A468 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } .modal__box .eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: .7rem !important; letter-spacing: .38em !important; color: #E8CF98 !important; text-transform: none; margin: 0; } .modal__box .eyebrow::before, .modal__box .eyebrow::after { content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #E8CF98); } .modal__box .eyebrow::after { transform: scaleX(-1); } .modal__box p { color: #E6DCC8 !important; font-weight: 500; } .modal__box .btn--primary { position: relative; overflow: hidden; border-radius: 0 !important; letter-spacing: .14em; font-weight: 700 !important; padding: 1em 2.2em !important; background: linear-gradient(100deg, #8C6A34 0%, #D9BD86 28%, #F7E9C4 48%, #D9BD86 68%, #8C6A34 100%) !important; background-size: 220% 100% !important; color: #0A1A1A !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 246, 221, .5); transition: background-position .9s ease, transform .3s; } .modal__box .btn--primary:hover { background-position: 100% 0 !important; transform: translateY(-1px); } .modal__box .link { color: #BDB29C !important; letter-spacing: .08em; font-size: .85rem; text-decoration: none; border-bottom: 1px solid rgba(189, 178, 156, .4); } .modal__close { width: 38px; height: 38px; border-radius: 50% !important; top: 22px !important; inset-inline-end: 22px !important; background: rgba(4, 12, 13, .75) !important; color: #F7E9C4 !important; border: 1px solid rgba(232, 207, 152, .6) !important; } .modal__close:hover { background: #E8CF98 !important; color: #0A1A1A !important; } /* media: framed in gold, centred */ .modal__box img, .modal__box video { border-radius: 0; } .rec-pop__cell { border: 1px solid rgba(232, 207, 152, .55); box-shadow: 0 12px 26px rgba(0, 0, 0, .5); } .deal-pop__imgs img { border: 1px solid rgba(232, 207, 152, .5); } .modal__box .maaser { border: 1px solid rgba(232, 207, 152, .4); background: linear-gradient(180deg, rgba(232, 207, 152, .1), rgba(232, 207, 152, .03)); padding: 14px 16px; } /* the rabbi's window: a large portrait */ .rav-pop { max-width: 560px; gap: 12px !important; } .rav-pop .rav-photo { width: min(270px, 70vw); border: 1px solid #E8CF98; outline: 1px solid rgba(232, 207, 152, .35); outline-offset: 7px; margin-block: 8px 14px; box-shadow: 0 26px 60px rgba(0, 0, 0, .65); } .rav-ig { display: inline-flex; align-items: center; gap: 8px; color: #F7E9C4 !important; text-decoration: none; font-size: .86rem; letter-spacing: .04em; padding: 8px 16px; border: 1px solid rgba(232, 207, 152, .45); } .rav-ig svg { width: 18px; height: 18px; fill: none; stroke: #E8CF98; stroke-width: 1.7; } .rav-ig:hover { background: rgba(232, 207, 152, .12); } .modal__box:has(.rav-pop) { max-width: 560px; } /* everything reads right-to-left — the page, every window, chat and drawer */ html, body, .modal, .modal__box, .drawer__panel, .chat, .search__panel, .toast { direction: rtl; } .modal__box input, .modal__box textarea { direction: rtl; text-align: right; } .modal__box input[type="email"], .modal__box input[type="tel"] { direction: ltr; text-align: right; } /* Instagram on the opening screen */ .hero-ig { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 20px 10px 14px; text-decoration: none; color: #fff !important; border-radius: 99px; background: linear-gradient(110deg, #833AB4, #C13584 40%, #E1306C 62%, #F77737 86%, #FCAF45); box-shadow: 0 12px 30px rgba(193, 53, 132, .35), inset 0 0 0 1px rgba(255, 255, 255, .25); animation: igGlow 3.2s ease-in-out infinite; max-width: 100%; } .hero-ig svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; flex: none; } .hero-ig span { display: grid; text-align: start; line-height: 1.35; } .hero-ig b { font-size: .98rem; font-weight: 700; } .hero-ig small { font-size: .74rem; opacity: .92; } @keyframes igGlow { 50% { box-shadow: 0 14px 40px rgba(225, 48, 108, .6), inset 0 0 0 1px rgba(255, 255, 255, .35); } } @media (max-width: 860px) { .hero-ig { align-self: center; } } /* floating "all tabs" screen */ .ftabs-launch { position: fixed; z-index: 75; top: 50%; right: 0; transform: translateY(-50%); writing-mode: vertical-rl; display: flex; align-items: center; gap: 8px; padding: 16px 9px; border: 1px solid #E8CF98; border-right: 0; cursor: pointer; color: #0A1A1A; font: 600 .82rem/1 var(--font-body); letter-spacing: .12em; background: linear-gradient(180deg, #8C6A34, #E8CF98 35%, #F7E9C4 50%, #D9BD86 65%, #8C6A34); box-shadow: -6px 10px 26px rgba(0, 0, 0, .45); } .ftabs-launch span { writing-mode: horizontal-tb; font-size: 1rem; } .ftabs-launch em { font-style: normal; } .ftabs-launch[hidden], body.ftabs-open .ftabs-launch { display: none; } .ftabs { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; direction: rtl; } .ftabs[hidden] { display: none; } .ftabs__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(10, 26, 24, .55), rgba(2, 6, 6, .92)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .ftabs__panel { position: relative; width: min(680px, 100%); max-height: 88vh; overflow: auto; padding: 38px clamp(20px, 5vw, 40px) 30px; text-align: center; background: radial-gradient(70% 40% at 50% 0%, rgba(232, 207, 152, .16), transparent 70%), radial-gradient(120% 90% at 50% 10%, #13302F 0%, #0A1C1D 50%, #040C0D 100%); border: 1px solid rgba(232, 207, 152, .75); outline: 1px solid rgba(232, 207, 152, .28); outline-offset: -11px; box-shadow: 0 50px 120px rgba(0, 0, 0, .8); animation: luxIn .6s cubic-bezier(.16, .84, .24, 1) both; } .ftabs__x { position: absolute; top: 18px; inset-inline-end: 18px; width: 36px; height: 36px; border-radius: 50%; background: rgba(4, 12, 13, .75); color: #F7E9C4; border: 1px solid rgba(232, 207, 152, .6); cursor: pointer; } .ftabs__eyebrow { margin: 0; font-family: 'Heebo', Arial, sans-serif; letter-spacing: .4em; font-size: .7rem; color: #E8CF98; } .ftabs__title { margin: 4px 0 18px; font-family: 'Heebo', Arial, sans-serif; font-weight: 500; font-size: 1.8rem; background: linear-gradient(100deg, #B98E4E, #F7E9C4 40%, #C9A468); -webkit-background-clip: text; background-clip: text; color: transparent; } .ftabs__ig { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; margin-bottom: 20px; text-decoration: none; color: #fff; background: linear-gradient(110deg, #833AB4, #C13584 40%, #E1306C 62%, #F77737 86%, #FCAF45); box-shadow: 0 12px 30px rgba(193, 53, 132, .35); } .ftabs__ig svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.7; flex: none; } .ftabs__ig span { display: grid; text-align: start; } .ftabs__ig b { font-size: 1.05rem; } .ftabs__ig small { font-size: .78rem; opacity: .92; } .ftabs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ftabs__tile { display: grid; place-items: center; min-height: 54px; padding: 10px 8px; text-decoration: none; color: #F4EBDA; font-size: .92rem; line-height: 1.35; border: 1px solid rgba(232, 207, 152, .3); background: rgba(232, 207, 152, .05); transition: background .3s, border-color .3s, color .3s; } .ftabs__tile:hover, .ftabs__tile:focus-visible { background: rgba(232, 207, 152, .16); border-color: #E8CF98; color: #fff; } .ftabs__tile--sub { font-size: .84rem; color: #D9CDB6; } @media (max-width: 520px) { .ftabs__grid { grid-template-columns: 1fr 1fr; } .ftabs-launch { padding: 12px 7px; font-size: .74rem; } } /* ================= hamburger menu — deep, three-dimensional, right-to-left ================= */ .drawer--nav { direction: rtl; background: radial-gradient(circle at 80% 40%, rgba(10, 26, 24, .5), rgba(2, 6, 6, .88)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .drawer--nav .drawer__panel { inset-inline-start: 0; inset-inline-end: auto; width: min(400px, 90vw); text-align: right; direction: rtl; background: radial-gradient(90% 30% at 50% 0%, rgba(232, 207, 152, .18), transparent 70%), radial-gradient(140% 100% at 100% 0%, #173A3B 0%, #0B2023 45%, #050E10 100%) !important; border-inline-end: 1px solid rgba(232, 207, 152, .6); box-shadow: -2px 0 0 rgba(232, 207, 152, .15) inset, 30px 0 80px rgba(0, 0, 0, .7); animation: navIn .55s cubic-bezier(.16, .84, .24, 1) both; perspective: 900px; } @keyframes navIn { from { transform: translateX(40px) rotateY(-8deg); opacity: 0; } to { transform: none; opacity: 1; } } .drawer--nav .drawer__head { justify-content: space-between; padding: 22px 22px 16px; border-bottom: 1px solid rgba(232, 207, 152, .3); position: relative; } .drawer--nav .drawer__head::after { content: '◆'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: .7rem; color: #E8CF98; background: #0E2427; padding: 0 10px; } .drawer--nav .drawer__head img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); } .drawer--nav .drawer__head .icon-btn { width: 40px; height: 40px; border-radius: 50%; color: #F7E9C4; border: 1px solid rgba(232, 207, 152, .6); background: radial-gradient(circle at 35% 30%, #2A4A4A, #0A1A1C); box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .15); } .drawer--nav .mobile-nav { display: grid; gap: 8px; padding: 22px 18px 30px; overflow: auto; } .drawer--nav .mobile-nav li { list-style: none; } .drawer--nav .mobile-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 0 !important; text-decoration: none; color: #F4EBDA !important; font-family: 'Heebo', Arial, sans-serif; font-size: 1.06rem; letter-spacing: .01em; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)), linear-gradient(135deg, #14302F, #0A1C1E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(232, 207, 152, .22), 0 6px 14px rgba(0, 0, 0, .45); transform: translateZ(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background .35s; } .drawer--nav .mobile-nav a::before { content: ''; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: linear-gradient(135deg, #F7E9C4, #B98E4E); box-shadow: 0 0 8px rgba(232, 207, 152, .6); } .drawer--nav .mobile-nav a::after { content: '‹'; margin-inline-start: auto; color: #E8CF98; font-size: 1.3rem; line-height: 1; opacity: .7; transition: transform .35s; } .drawer--nav .mobile-nav a:hover, .drawer--nav .mobile-nav a:focus-visible { transform: translateY(-2px) translateX(-3px); background: linear-gradient(180deg, rgba(232, 207, 152, .2), rgba(232, 207, 152, .04)), linear-gradient(135deg, #1B3D3B, #0C2224); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(232, 207, 152, .7), 0 12px 24px rgba(0, 0, 0, .55); } .drawer--nav .mobile-nav a:hover::after { transform: translateX(-4px); opacity: 1; } .drawer--nav .mobile-nav .sub a { margin-inline-start: 22px; padding-block: 10px; font-size: .94rem; color: #D9CDB6 !important; opacity: 1; background: rgba(232, 207, 152, .04); box-shadow: inset 0 0 0 1px rgba(232, 207, 152, .14); } .drawer--nav .mobile-nav .sub a::before { width: 5px; height: 5px; } .drawer--nav .mobile-nav .sep { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(232, 207, 152, .25); } .drawer--nav .mobile-nav a.ig-menu { color: #fff !important; -webkit-text-fill-color: #fff; background: linear-gradient(110deg, #833AB4, #C13584 40%, #E1306C 62%, #F77737 86%, #FCAF45) !important; box-shadow: 0 10px 24px rgba(193, 53, 132, .4), inset 0 1px 0 rgba(255, 255, 255, .3); font-family: 'Heebo', Arial, sans-serif; font-weight: 700; } .drawer--nav .mobile-nav a.ig-menu::before { background: #fff; box-shadow: none; } .drawer--nav .mobile-nav a.ig-menu::after { color: #fff; } .drawer--nav .mobile-nav a.ig-menu { -webkit-background-clip: border-box; background-clip: border-box; } /* welcome form: gold logo, gold consent box with black text */ .lead__mark { filter: sepia(1) saturate(2.6) hue-rotate(-6deg) brightness(.92) contrast(1.1) drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); } .modal__box .lead .approve { background: linear-gradient(110deg, #B98E4E 0%, #E8CF98 35%, #F7E9C4 52%, #D9BD86 70%, #B98E4E 100%) !important; border: 1px solid #F7E9C4 !important; border-radius: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); } .modal__box .lead .approve span, .modal__box .lead .approve { color: #0A0A0A !important; font-weight: 600; } .modal__box .lead .approve input { accent-color: #0A1A1A; } /* groom bundles: products standing together on the page background — no frame, side by side */ .section--teal:has(.gset-grid) { background: transparent; } .gset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; } .gset { position: relative; display: grid; gap: 8px; text-align: center; background: none; border: 0; box-shadow: none; padding: 0; } .gset__media { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 3.4; padding-bottom: 6px; } .gset__media img { height: 78%; width: auto; max-width: 52%; object-fit: contain; margin-inline: -5%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .gset__media img:nth-child(2) { height: 62%; z-index: 1; } .gset__media img:nth-child(3) { height: 70%; z-index: 2; } .gset:hover .gset__media img { transform: translateY(-6px); } .gset h3 { margin: 4px 0 0; font-family: 'Heebo', Arial, sans-serif; font-weight: 500; font-size: 1.3rem; color: #F4EBDA; } .gset__price { font-family: 'Heebo', Arial, sans-serif; font-size: 1.5rem; color: var(--gold-text); letter-spacing: .03em; } .gset ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: .84rem; color: #D9CDB6; } .gset ul li::before { content: '◆ '; color: var(--gold); font-size: .6rem; } .gset__flag { position: absolute; top: 0; inset-inline-start: 0; background: var(--gold-grad); color: #0A1A1A; font-size: .72rem; font-weight: 800; padding: 4px 12px; letter-spacing: .06em; z-index: 3; } @media (max-width: 760px) { .gset-grid { grid-template-columns: 1fr 1fr; gap: 26px 12px; } .gset--hot { grid-column: 1 / -1; } .gset h3 { font-size: 1.05rem; } .gset__price { font-size: 1.2rem; } .gset ul { font-size: .74rem; } .gset .btn { padding: .7em .5em; font-size: .82rem; } } .pdp__about { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); } .gset__media img:nth-last-child(3) { height: 50%; max-width: 46%; margin-inline-end: -14%; z-index: 0; } .gset__media img:nth-last-child(2) { height: 76%; z-index: 1; } .gset__media img:last-child { height: 66%; z-index: 2; } /* the "all tabs" launcher sits on the left edge so it never covers right-aligned text */ .ftabs-launch { right: auto; left: 0; border-right: 1px solid #E8CF98; border-left: 0; box-shadow: 6px 10px 26px rgba(0, 0, 0, .45); } /* "design me with AI preview" — big banner at the top of personalisable products */ .ai-banner { display: grid; gap: 2px; justify-items: center; text-align: center; margin: 0 0 14px; padding: 14px 16px; text-decoration: none; background: linear-gradient(110deg, #8C6A34 0%, #D9BD86 30%, #F7E9C4 50%, #D9BD86 70%, #8C6A34 100%); background-size: 220% 100%; animation: aiShine 4s ease-in-out infinite; color: #0A1A1A !important; border: 1px solid #F7E9C4; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); } .ai-banner b { font-family: 'Heebo', Arial, sans-serif; font-size: clamp(1.15rem, 3.4vw, 1.5rem); font-weight: 700; line-height: 1.3; } .ai-banner span { font-size: .85rem; letter-spacing: .14em; font-weight: 700; } @keyframes aiShine { 50% { background-position: 100% 0; } } .ai-banner { width: 100%; cursor: pointer; font: inherit; } /* Instagram banner sitting right on the siddur photos of the opening screen */ .hero__art { position: relative; } .hero-ig--on-art { position: absolute; z-index: 5; left: 50%; bottom: 8%; transform: translateX(-50%); margin: 0; white-space: nowrap; animation: igGlow 3.2s ease-in-out infinite, igIn .9s 1.2s cubic-bezier(.2, .8, .2, 1) both; } @keyframes igIn { from { opacity: 0; transform: translate(-50%, 18px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0); } } @media (max-width: 860px) { .hero-ig--on-art { bottom: 6%; padding: 8px 16px 8px 12px; } .hero-ig--on-art b { font-size: .88rem; } .hero-ig--on-art small { font-size: .68rem; } } /* rabbi window: the photo and the thank-you open together */ .rav-hero { position: relative; margin: 0 auto 6px; width: min(300px, 76vw); } .rav-hero .rav-photo { width: 100% !important; margin: 0 !important; } .rav-hero figcaption { position: absolute; inset: auto 0 0; z-index: 2; padding: 46px 12px 12px; text-align: center; background: linear-gradient(transparent, rgba(4, 12, 13, .82) 45%, rgba(4, 12, 13, .95)); } .rav-hero figcaption h2 { margin: 2px 0 0 !important; font-size: clamp(1.15rem, 4.4vw, 1.45rem) !important; } .rav-hero figcaption .eyebrow { font-size: .62rem !important; } /* "הידור מצווה" — one line, royal gold with depth */ .ht-royal { position: relative; display: block; white-space: nowrap; font-family: 'Heebo', Arial, sans-serif; font-weight: 900; font-size: clamp(2.3rem, 10.5vw, 6.2rem); line-height: 1.05; letter-spacing: .01em; background: linear-gradient(175deg, #FFF6D8 0%, #F3D88E 22%, #D4A64A 44%, #9C6B1E 58%, #E9C36A 72%, #FFF0C2 86%, #B8862F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 #6E4A12) drop-shadow(0 2px 0 #5A3B0C) drop-shadow(0 3px 0 #462D08) drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } .ht-royal::after { content: attr(data-text); position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .75) 48%, transparent 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: royalShine 5s ease-in-out infinite; pointer-events: none; } @keyframes royalShine { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } } .hero .ht-line { margin-top: 14px; } /* holiday band: a countdown clock (days · hours · minutes) instead of the day number */ .hclock { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 5px 10px 5px 8px; background: #0A1A1A; color: #F7E9C4; border: 1px solid #E8CF98; box-shadow: inset 0 0 0 1px rgba(232, 207, 152, .25), 0 6px 14px rgba(0, 0, 0, .3); } .hclock__face { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #E8CF98; flex: none; } .hclock__face::before, .hclock__face::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 1.5px; background: #E8CF98; transform-origin: 50% 100%; } .hclock__face::before { height: 8px; animation: hcSpin 60s linear infinite; } .hclock__face::after { height: 5.5px; transform: rotate(90deg); } @keyframes hcSpin { to { transform: rotate(360deg); } } .hclock__units { display: flex; gap: 8px; direction: rtl; } .hclock__units > span { display: grid; justify-items: center; line-height: 1; } .hclock__units b { font-family: 'Heebo', Arial, sans-serif; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #F7E9C4; } .hclock__units small { font-size: .56rem; letter-spacing: .06em; color: #E8CF98; margin-top: 2px; } .hband-order { display: inline-block; margin-top: 3px; padding: 3px 12px; background: #0A1A1A; color: #F7E9C4 !important; font-weight: 700; letter-spacing: .04em; cursor: pointer; border: 1px solid #E8CF98; } /* ===== hero title — centred, engraved royal gold, framed by fine ornaments ===== */ .hero .hero__title { position: relative; display: grid !important; justify-items: center; text-align: center; gap: 0; margin: 6px 0 26px; isolation: isolate; } .hero .hero__title::before { content: ''; position: absolute; inset: -30% -10%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(232, 196, 120, .22), transparent 70%); pointer-events: none; } .hero .ht-royal { font-family: 'Heebo', Arial, sans-serif; font-weight: 800; font-size: clamp(2.7rem, 13vw, 7rem); letter-spacing: .03em; line-height: 1.1; padding: 0 .08em; background: linear-gradient(180deg, #FFF9E6 0%, #F6DFA0 18%, #E2B85C 36%, #B07A26 50%, #8A5A16 54%, #D9AE55 66%, #F8E4A8 82%, #C8963D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 -1px 0 rgba(255, 248, 225, .55)) drop-shadow(0 1.5px 0 #7A5418) drop-shadow(0 3px 1px rgba(50, 30, 4, .7)) drop-shadow(0 16px 26px rgba(0, 0, 0, .6)); } .hero .ht-line { justify-content: center; width: 100%; margin-top: 12px !important; letter-spacing: .34em; font-size: clamp(.9rem, 3.6vw, 1.3rem); color: #EAD9B2; } .hero .ht-line::before, .hero .ht-line::after { content: ''; width: clamp(28px, 10vw, 70px); height: 1px; background: linear-gradient(90deg, transparent, #E8CF98); flex-shrink: 0; } .hero .ht-line::after { transform: scaleX(-1); } .hero .hero__title + .lead, .hero .eyebrow { text-align: center; } .hero .hero__title::after { content: '◆'; position: absolute; top: -.2em; left: 50%; transform: translateX(-50%); font-size: .8rem; color: #E8CF98; letter-spacing: 0; } .hero .hero__title::after { top: -18px; } .hero .hero__title ~ .lead, .hero p.eyebrow { text-align: center !important; display: block; width: 100%; } .hero .ht-line { display: flex !important; } /* ===== compact product grid: 3 per row on phones, 4–5 on desktop, square "add to cart" ===== */ .grid.grid--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 26px 16px !important; } .grid--compact .card__media { aspect-ratio: 1 / 1; } .grid--compact .card__media img { padding: 6% !important; object-fit: contain; } .grid--compact .card__body { padding: 8px 2px 0; gap: 3px; } .grid--compact .card__title { font-size: .92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .grid--compact .card__sub, .grid--compact .free-ship, .grid--compact .card__variants, .grid--compact .card__designs, .grid--compact .swatches { display: none !important; } .grid--compact .price { font-size: 1rem; } .grid--compact .card__quick { position: static !important; opacity: 1 !important; transform: none !important; display: block; width: 100%; margin-top: 6px; padding: 9px 4px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; background: linear-gradient(110deg, #B98E4E, #E8CF98 45%, #D9BD86 70%, #B98E4E) !important; color: #0A1A1A !important; border: 0; border-radius: 0; } @media (max-width: 760px) { .grid.grid--compact { grid-template-columns: repeat(3, 1fr) !important; gap: 18px 8px !important; } .grid--compact .card__title { font-size: .74rem; } .grid--compact .price { font-size: .86rem; } .grid--compact .card__quick { font-size: .7rem; padding: 7px 2px; } .grid--compact .card__wish { transform: scale(.8); } } /* product page: a calmer, smaller main photo */ .pdp .stage:not(.stage--hb):not(.stage--studio) { max-width: 420px; margin-inline: auto; } .pdp .thumbs { max-width: 420px; margin-inline: auto; } @media (max-width: 760px) { .pdp .stage:not(.stage--hb):not(.stage--studio), .pdp .thumbs { max-width: 72%; } } .grid--compact .card { position: relative; padding-bottom: 42px; } .grid--compact .card__media { position: static; } .grid--compact .card__quick { position: absolute !important; inset: auto 0 0 0; width: 100%; margin: 0; } @media (max-width: 760px) { .grid--compact .card { padding-bottom: 34px; } } /* search (owner, 4.10.2026): the window scrolls to the last result; Enter / "חיפוש" → a full results page */ html body .search { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } html body .search__panel { grid-template-columns: 1fr auto auto; align-items: center; padding-bottom: 90px; } html body .search__panel input { min-width: 0; } html body .search__go { padding-inline: 18px; white-space: nowrap; } html body .search__results { display: block; } html body .search__results .grid { margin-top: 14px; } html body .search__all { margin-top: 14px; } .search-page__form { display: flex; gap: 8px; max-width: 560px; margin: 16px auto 0; } .search-page__form input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(0,0,0,.2); border-radius: 12px; font: inherit; font-size: 1rem; background: #fff; } @media (max-width: 760px) { html body .search__panel { padding-top: calc(16px + env(safe-area-inset-top, 0px)); gap: 8px; } html body .search__panel input { font-size: 16px; padding: 11px 12px; } /* 16px: the iPhone doesn't zoom in on the field */ html body .search__results .grid.grid--compact { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 10px !important; } .search-page__form input { font-size: 16px; } } /* tallit & tefillin bag sets: bigger photos — 3 in a row on a computer, 2 on the phone (owner, 4.10.2026) */ html body .grid.grid--compact.grid--big { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 34px 22px !important; } html body .grid--compact.grid--big .card__media { aspect-ratio: 1 / 1 !important; } html body .grid--compact.grid--big .card__media img { padding: 2% !important; } html body .grid--compact.grid--big .card__title { font-size: 1.02rem !important; } @media (max-width: 760px) { /* the phone (owner, 4.10.2026: "the photos are still very small"): bag sets one per row, the full width of the screen; every other category two per row instead of three */ html body .grid.grid--compact.grid--big { grid-template-columns: 1fr !important; gap: 30px !important; } html body .grid--compact.grid--big .card__media img { padding: 0 !important; } html body .grid--compact.grid--big .card__title { font-size: 1.05rem !important; } html body .grid--compact.grid--big .price { font-size: 1.1rem !important; } html body .grid.grid--compact:not(.grid--big) { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 12px !important; } html body .grid--compact:not(.grid--big) .card__media img { padding: 3% !important; } html body .grid--compact:not(.grid--big) .card__title { font-size: .86rem !important; } html body .grid--compact:not(.grid--big) .card__quick { font-size: .78rem !important; } } /* ===== phone admin ===== */ /* one compact tile grid on every screen (owner, 8.10.2026: the phone should look like the desktop) */ .adm-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding-block: 20px 80px; } .adm-tile { display: grid; gap: 3px; justify-items: center; align-content: center; text-align: center; min-height: 112px; padding: 14px 8px; border-radius: 12px; text-decoration: none; color: #F4EBDA !important; border: 1px solid #C9A468; background: linear-gradient(180deg, #24525D, #11313A); font: inherit; cursor: pointer; } .adm-tile span { font-size: 1.6rem; line-height: 1; color: #E8CF98; } .adm-tile b { font-size: 1rem; color: #F4EBDA; } .adm-tile small { font-size: .72rem; line-height: 1.3; color: #D9CFBB; } @media (max-width: 560px) { .adm-hub { grid-template-columns: repeat(3, 1fr); gap: 8px; padding-block: 14px 60px; } .adm-tile { min-height: 92px; padding: 10px 4px; } .adm-tile span { font-size: 1.35rem; } .adm-tile b { font-size: .86rem; } .adm-tile small { display: none; } } .adm-tile--out { opacity: .75; } /* white text on every dark-green admin surface (owner, 8.10.2026: green/black text on green tiles was unreadable) — beats the site-wide ":where(body, body *) { color / -webkit-text-fill-color: #11313A !important }" */ html body .adm-tile, html body .adm-tile *, html body #admin-btn, html body .admin-btn, html body #owner-mute, html body .adm-hub button, html body [class*="admin"] .btn--primary, html body [class*="admin"] .btn--primary *, html body #ord-root .btn--primary, html body #ord-root .btn--primary *, html body #rep-root .btn--primary, html body #sf-form .btn--primary, html body .ship-bar .btn--primary, html body #admin-root .btn--primary, html body .rep-grid .btn--primary, html body .ord-costs .btn--primary, html body [style*="background:#24525D"], html body [style*="background:#24525D"] *, html body [style*="background: #24525D"], html body [style*="background: #24525D"] * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body .adm-tile span { color: #E8CF98 !important; -webkit-text-fill-color: #E8CF98 !important; } html body .adm-tile small { color: #E6DFD0 !important; -webkit-text-fill-color: #E6DFD0 !important; } html body #admin-btn, html body .admin-btn { background: linear-gradient(180deg, #24525D, #11313A) !important; } .adm-stats { margin-top: 14px; } .adm-stats__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .adm-stat { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 10px 6px; border-radius: 12px; background: #F6F0E5; border: 1px solid #D9CBB2; color: #15201F; } .adm-stat b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: #11313A; } .adm-stat span { font-size: .8rem; font-weight: 700; } .adm-stat small { font-size: .72rem; color: #5B6360; } button.adm-stat { font: inherit; cursor: pointer; } .adm-stat i { font-style: normal; font-size: .68rem; color: #7E602E; } .adm-stat.is-on { background: #FFFFFF; border-color: #C9A468; box-shadow: 0 0 0 2px #C9A468 inset; } .adm-drill { margin-top: 10px; padding: 14px; border: 1px solid #D9CBB2; border-radius: 14px; background: #FFFFFF; display: grid; gap: 16px; } .dr-sec h3 { margin: 0 0 8px; font-size: 1rem; color: #11313A; } .dr-bar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 52px; gap: 8px; align-items: center; margin: 3px 0; font-size: .85rem; } .dr-bar i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #24525D, #4F8A8B); min-width: 3px; } .dr-bar b { text-align: left; font-variant-numeric: tabular-nums; } .dr-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .dr-prod { display: grid; gap: 4px; text-decoration: none; color: #15201F; border: 1px solid #EDE4D3; border-radius: 12px; padding: 8px; background: #FBF8F2; } .dr-prod img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #F3EEE4; } .dr-prod span { font-size: .82rem; line-height: 1.3; } .dr-prod b { font-size: .85rem; color: #1f6b4f; } /* the basket first in the checkout, and a clear "continue shopping" (owner, 8.10.2026) */ .checkout > .summary { order: -1; } .co-continue { margin-top: 10px; border: 1.5px solid #C9A468 !important; font-weight: 800; } .co-line-edit { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; } .co-line-edit button:not(.link) { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #C9A468; background: #FBF7EF; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; } .co-line-edit .link { font-size: .8rem; margin-inline-start: 6px; } .adm-follow { margin-top: 10px; display: grid; gap: 12px; } .adm-follow > .dr-sec { padding: 12px 14px; border: 1px solid #D9CBB2; border-radius: 14px; background: #FFFFFF; } .dr-msg { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #F3F7F6; border: 1px solid #DCE7E4; font-size: .86rem; line-height: 1.5; } .dr-people { display: grid; gap: 6px; } .dr-person { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid #EDE4D3; border-radius: 10px; background: #FBF8F2; } .dr-wa { padding: 6px 12px; min-height: 0; font-size: .85rem; } .dr-basket { flex: 1 1 100%; display: grid; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed #D9CBB2; } .dr-basket__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-decoration: none; color: #15201F; } .dr-basket__row img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: #F3EEE4; } .dr-basket__row small { color: #5B6360; } .dr-basket__p { text-align: left; font-variant-numeric: tabular-nums; font-size: .85rem; white-space: nowrap; } .dr-basket__tot { text-align: left; font-size: 1rem; } @media (max-width: 560px) { .dr-basket__row { grid-template-columns: 56px minmax(0, 1fr) auto; } .dr-basket__row img { width: 56px; height: 56px; } } .dr-order { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid #EEE; text-decoration: none; color: #15201F; } .dr-order__imgs { display: flex; gap: 4px; } .dr-order__imgs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #F3EEE4; } @media (max-width: 560px) { .dr-prods { grid-template-columns: repeat(2, 1fr); } .dr-bar { grid-template-columns: 96px 1fr 40px; } .dr-order__imgs img { width: 48px; height: 48px; } } @media (max-width: 560px) { .adm-stats__row { grid-template-columns: repeat(3, 1fr); gap: 6px; } .adm-stat b { font-size: 1.2rem; } .adm-stat span { font-size: .7rem; } } .adm-add { margin: 10px 0 18px; padding: 1em; font-size: 1.05rem; } .adm-h { font-size: 1.15rem; margin: 22px 0 10px; } .adm-search { width: 100%; margin-bottom: 10px; padding: 12px; } .adm-list { display: grid; gap: 8px; } .adm-row { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: 'img txt price' 'img btns btns'; gap: 4px 10px; align-items: center; padding: 8px; border: 1px solid var(--line); } .adm-row img { grid-area: img; width: 56px; height: 56px; object-fit: contain; background: rgba(255, 255, 255, .04); } .adm-row > div:nth-child(2) { grid-area: txt; min-width: 0; } .adm-row b { display: block; font-size: .86rem; line-height: 1.3; } .adm-row small { color: var(--muted); font-size: .72rem; } .adm-price { grid-area: price; display: flex; align-items: center; gap: 2px; color: var(--gold); } .adm-price input { width: 74px; padding: 6px; text-align: center; } .adm-row__btns { grid-area: btns; display: flex; gap: 14px; justify-content: flex-end; font-size: .8rem; } .adm-row.is-hidden { opacity: .45; } .adm-form { display: grid; gap: 10px; } .adm-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1.5px dashed rgba(232, 207, 152, .6); cursor: pointer; overflow: hidden; color: #E8CF98; font-size: 1.05rem; } .adm-photo img { width: 100%; height: 100%; object-fit: contain; } .adm-form__foot { display: flex; justify-content: space-between; } .adm-del { color: #F2A397 !important; } /* names and descriptions stand out on every screen */ .card__title, .grid--compact .card__title { color: #FFF8EA !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); } .grid--compact .card__title { font-size: .95rem; -webkit-line-clamp: 3; min-height: 0; } @media (max-width: 760px) { .grid--compact .card__title { font-size: .8rem; line-height: 1.3; } } .grid--compact .card__media { aspect-ratio: 1 / .9; } .pdp h1 { color: #FFF8EA !important; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); } .pdp__sub { color: #F1E4C6 !important; font-size: 1.05rem; font-weight: 600; } .pdp__desc { color: #F4ECDC !important; font-size: 1.02rem; line-height: 1.85; font-weight: 500; } .includes, .includes li, .details li, .pdp details div { color: #EDE3CE !important; } .page-head h1 { color: #FFF8EA !important; } .page-head p { color: #EDE3CE !important; } #adm-login { padding-inline: 16px; box-sizing: border-box; max-width: 100% !important; } @media (max-width: 760px) { .ftabs-launch em { display: none; } .ftabs-launch { padding: 12px 7px; } } .card__media img, .pick img, .stage img { color: transparent; font-size: 0; } /* hamburger menu: tiles side by side; arrows open sub-categories */ .drawer--nav .mobile-nav { grid-template-columns: 1fr 1fr; gap: 8px !important; align-content: start; } .drawer--nav .mobile-nav > li { position: relative; min-width: 0; } .drawer--nav .mobile-nav > li > a { min-height: 58px; padding: 10px 12px !important; font-size: .95rem !important; line-height: 1.3; } .drawer--nav .mobile-nav > li > a::after { display: none; } .drawer--nav .mobile-nav > li.has-sub > a { padding-inline-end: 38px !important; } .drawer--nav .mobile-nav > li.is-open { grid-column: 1 / -1; } .drawer--nav .mobile-nav > li.sep { grid-column: auto; margin-top: 0; padding-top: 0; border-top: 0; } .mnav-arrow { position: absolute; top: 0; inset-inline-end: 0; width: 38px; height: 58px; display: grid; place-items: center; background: none; border: 0; border-inline-start: 1px solid rgba(232, 207, 152, .25); color: #E8CF98; font-size: 1rem; cursor: pointer; transition: transform .3s; } li.is-open > .mnav-arrow { transform: rotate(180deg); } .mnav-sub { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mnav-sub a { display: block; padding: 9px 10px; font-size: .86rem; color: #E9DEC6 !important; text-decoration: none; border: 1px solid rgba(232, 207, 152, .2); background: rgba(232, 207, 152, .05); } .drawer--nav .mobile-nav .mnav-sub a::before, .drawer--nav .mobile-nav .mnav-sub a::after { display: none; } .pdp-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 14px; font-size: .9rem; font-weight: 700; color: #0A1A1A !important; text-decoration: none; background: linear-gradient(110deg, #B98E4E, #E8CF98 50%, #B98E4E); } .mnav-sub[hidden] { display: none !important; } .drawer--nav .mobile-nav .mnav-sub a { min-height: 0; padding: 9px 10px !important; font-size: .84rem !important; font-family: 'Heebo', Arial, sans-serif; box-shadow: inset 0 0 0 1px rgba(232, 207, 152, .2); background: rgba(232, 207, 152, .06); } .drawer--nav .mobile-nav .mnav-sub a:hover { transform: none; } .drawer--nav .mobile-nav > li:has(> a.ig-menu) { grid-column: 1 / -1; } /* hamburger menu: three tiles per row */ .drawer--nav .drawer__panel { width: min(460px, 96vw); } .drawer--nav .mobile-nav { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; padding-inline: 10px !important; } .drawer--nav .mobile-nav > li > a { min-height: 64px; padding: 8px 6px !important; font-size: .8rem !important; justify-content: center; text-align: center; gap: 0; } .drawer--nav .mobile-nav > li > a::before { display: none; } .drawer--nav .mobile-nav > li.has-sub > a { padding-inline-end: 22px !important; } .mnav-arrow { width: 22px; height: 64px; font-size: .8rem; } .mnav-sub { grid-template-columns: repeat(3, 1fr); } /* Shabbat & Yom Tov: the whole site is closed behind this screen */ html.shabbat-locked, html.shabbat-locked body { overflow: hidden !important; } #shabbat-lock { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 20px; direction: rtl; text-align: center; background: radial-gradient(70% 55% at 50% 35%, #1D3A3C 0%, #0A1B1D 55%, #030A0B 100%); color: #F4EBDA; } #shabbat-lock .sl-box { display: grid; justify-items: center; gap: 8px; max-width: 520px; } #shabbat-lock .sl-art { width: min(340px, 82vw); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); } #shabbat-lock .sl-candle path:first-of-type { transform-origin: center bottom; animation: slFlicker 2.4s ease-in-out infinite; } @keyframes slFlicker { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.08) translateY(-1px); } } #shabbat-lock .sl-eyebrow { margin: 6px 0 0; font-family: 'Heebo', Arial, sans-serif; letter-spacing: .4em; font-size: .72rem; color: #E8CF98; } #shabbat-lock h1 { margin: 0; font-family: 'Heebo', Arial, sans-serif; font-weight: 800; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.2; background: linear-gradient(180deg, #FFF9E6, #E2B85C 45%, #B07A26 55%, #F8E4A8); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } #shabbat-lock .sl-sub { margin: 4px 0 0; font-size: 1.2rem; font-weight: 700; color: #F4EBDA; } #shabbat-lock .sl-parasha { margin: 12px 0 2px; color: #F2E2B8; font-size: 1.15rem; letter-spacing: .02em; } #shabbat-lock .sl-parasha b { color: #FFE7A8; font-weight: 700; } #shabbat-lock .sl-back { margin: 6px 0 0; color: #D9CDB6; font-size: .95rem; } #shabbat-lock .sl-bless { margin: 10px 0 0; color: #E8CF98; font-size: 1rem; } #shabbat-lock .sl-demo { margin-top: 14px; padding: 10px 18px; background: transparent; color: #E8CF98; border: 1px solid rgba(232, 207, 152, .6); font: inherit; cursor: pointer; } /* sold out at the supplier */ .sold-badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; padding: 4px 9px; background: #8A1C15; color: #fff; font: 700 .66rem/1 var(--font-latin); letter-spacing: .12em; } .card--sold .card__media img { opacity: .55; filter: grayscale(.4); } .card--sold .card__quick { background: #1A2E30 !important; color: #F2E2B8 !important; border: 1px solid rgba(232, 207, 152, .5) !important; } .swatch[data-sold] { position: relative; opacity: .5; } .swatch[data-sold]::after { content: ''; position: absolute; inset: 45% -2px auto; height: 2px; background: #C0392B; transform: rotate(-35deg); } .restock { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid rgba(192, 57, 43, .6); background: rgba(138, 28, 21, .12); } .restock__tag { justify-self: start; padding: 4px 10px; background: #8A1C15; color: #fff; letter-spacing: .12em; font-size: .75rem; } .restock p { margin: 0; color: #F4ECDC; } .restock__form { display: flex; gap: 8px; } .restock__form input { flex: 1; min-width: 0; padding: 10px; } #add-btn:disabled { opacity: .5; cursor: not-allowed; } /* rabbi window: WhatsApp button pops up one second after the window opens */ .rav-pop { position: relative; } .rav-wa { position: absolute; top: 10px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 92%; padding: 10px 18px 10px 14px; border-radius: 99px; text-decoration: none; background: linear-gradient(135deg, #2BE07A, #1DA851); color: #fff !important; box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 255, 255, .15); opacity: 0; transform: translate(-50%, -24px) scale(.8); animation: ravWaIn .6s 1s cubic-bezier(.2, 1.4, .4, 1) forwards, ravWaPulse 2.2s 1.8s ease-in-out infinite; } .rav-wa svg { width: 28px; height: 28px; fill: #fff; flex: none; } .rav-wa span { display: grid; text-align: start; line-height: 1.25; } .rav-wa b { font-size: .95rem; } .rav-wa small { font-size: .72rem; opacity: .92; color: #fff !important; } @keyframes ravWaIn { to { opacity: 1; transform: translate(-50%, 0) scale(1); } } @keyframes ravWaPulse { 50% { box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 0 9px rgba(43, 224, 122, .25); } } /* product page: the live preview stays on the right, the choices on the left — every change shows at once (all screens) */ .pdp { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: clamp(10px, 3vw, 48px) !important; align-items: start; } .pdp > .gallery { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); align-self: start; z-index: 2; } @media (max-width: 760px) { .pdp { grid-template-columns: 46% minmax(0, 1fr) !important; gap: 10px !important; } .pdp > .gallery { top: 64px; } .pdp .stage:not(.stage--hb):not(.stage--studio), .pdp .thumbs { max-width: 100% !important; } .pdp .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .pdp h1 { font-size: 1.15rem !important; line-height: 1.3; } .pdp__sub, .pdp__desc { font-size: .86rem !important; } .pdp .block__title { font-size: .9rem; } .pdp .chips .chip, .pdp .method { font-size: .78rem; } .pdp .pick-grid { grid-template-columns: repeat(2, 1fr) !important; } .pdp .swatches { gap: 6px; } .pdp .buy { flex-wrap: wrap; } .pdp .ai-banner b { font-size: 1rem; } .pdp .stage--hb .hb-fig { width: 48%; } } /* nested sub-tabs and menu levels */ .subtabs--deep { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(232, 207, 152, .25); } .subtabs--deep a { font-size: .86em; } .mnav-sub > li { position: relative; } .mnav-sub > li.has-sub > a { padding-inline-end: 24px !important; } .mnav-sub > li.is-open { grid-column: 1 / -1; } .mnav-sub .mnav-sub { margin-top: 4px; } .mnav-sub .mnav-arrow { height: 36px; width: 22px; } /* badges ("חדש · עיצוב אישי" etc.) sit above the photo, on the page background — never on the product */ .grid--compact .card { padding-top: 24px; } .grid--compact .card__media { overflow: visible !important; } .grid--compact .card__badge, .grid--compact .sold-badge { position: absolute !important; top: -22px !important; inset-inline-start: 0 !important; inset-inline-end: auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .6rem; padding: 3px 7px; background: rgba(8, 23, 25, .9); } .grid--compact .sold-badge { background: #8A1C15; } /* ===== phones: the live preview stays pinned at the top (large and clear), the choices scroll underneath — one screen ===== */ @media (max-width: 760px) { .pdp { grid-template-columns: 1fr !important; gap: 12px !important; } .pdp > .gallery { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 20; margin-inline: -16px; padding: 8px 16px 10px; background: linear-gradient(180deg, #0A1B1D 85%, rgba(10, 27, 29, 0)); } .pdp .stage:not(.stage--studio), .pdp .stage--studio { max-width: 100% !important; height: 40vh; display: grid; place-items: center; margin: 0 auto; } .pdp .stage #main-img { height: 100%; width: auto; max-width: 100%; object-fit: contain; } .pdp .stage .overlay { position: absolute; inset: 0; width: 100%; height: 100%; } .pdp .stage--hb { height: auto; max-height: 46vh; overflow: auto; } .pdp .stage--studio svg { height: 100%; width: auto; max-width: 100%; } .pdp .thumbs { display: flex; gap: 6px; overflow-x: auto; max-width: 100% !important; margin-top: 6px; } .pdp .thumbs button { flex: 0 0 52px; } .pdp h1 { font-size: 1.25rem !important; } .pdp__sub, .pdp__desc { font-size: .92rem !important; } .pdp .chips .chip, .pdp .method { font-size: .86rem; } .pdp .pick-grid { grid-template-columns: repeat(3, 1fr) !important; } .stage__hint { font-size: .72rem; padding: 4px 10px; } } /* the design on the product can be dragged with a finger */ #overlay #design { cursor: grab; touch-action: none; } #overlay { touch-action: pan-y; } /* weekly countdown to Shabbat — big, under the header */ .shabbat-band { position: relative; direction: rtl; text-align: center; padding: 14px 44px 14px 16px; color: #F4EBDA; background: radial-gradient(80% 140% at 50% 0%, #1E3D3F 0%, #0C2124 60%, #071416 100%); border-bottom: 1px solid rgba(232, 207, 152, .45); } .shabbat-band .sb-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; max-width: 980px; margin: 0 auto; } .sb-title { font-family: 'Heebo', Arial, sans-serif; font-weight: 800; font-size: clamp(1.15rem, 4.6vw, 1.6rem); background: linear-gradient(180deg, #FFF9E6, #E2B85C 50%, #B07A26 60%, #F8E4A8); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .sb-clock { display: inline-flex; align-items: center; gap: 6px; direction: rtl; } .sb-clock > span { display: grid; justify-items: center; min-width: 54px; padding: 6px 8px 4px; background: rgba(4, 12, 13, .7); border: 1px solid rgba(232, 207, 152, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .sb-clock b { font-family: 'Heebo', Arial, sans-serif; font-size: clamp(1.5rem, 7vw, 2.2rem); line-height: 1; color: #F7E9C4; font-variant-numeric: tabular-nums; } .sb-clock small { font-size: .62rem; color: #E8CF98; letter-spacing: .08em; margin-top: 2px; } .sb-clock i { font-style: normal; color: #E8CF98; font-size: 1.4rem; } .sb-sub { width: 100%; font-size: .82rem; color: #D9CDB6; } .sb-go { padding: 8px 16px; border: 0; cursor: pointer; font: 600 .86rem var(--font-body); color: #0A1A1A; background: linear-gradient(110deg, #B98E4E, #F7E9C4 50%, #B98E4E); } .sb-x { position: absolute; top: 8px; left: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(232, 207, 152, .5); background: transparent; color: #F2E2B8; cursor: pointer; } .shabbat-band--last { background: radial-gradient(80% 140% at 50% 0%, #5A1A14 0%, #2A0D0A 70%, #140605 100%); border-bottom-color: #E8CF98; } .shabbat-band--last .sb-title { animation: sbPulse 1.6s ease-in-out infinite; } @keyframes sbPulse { 50% { opacity: .65; } } @media (min-width: 761px) { .sb-sub { width: auto; } } /* ===== shopping cart — deep emerald, gold frame, raised 3D lines ===== */ .drawer--cart { background: radial-gradient(circle at 20% 40%, rgba(10, 26, 24, .5), rgba(2, 6, 6, .88)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .drawer--cart .drawer__panel { --text: #EDE4D3; --muted: #B3AA98; --line: rgba(232, 207, 152, .28); --white: #0F2427; --cream-50: #0F2427; --gold-text: #E8CF98; background: radial-gradient(90% 30% at 50% 0%, rgba(232, 207, 152, .16), transparent 70%), radial-gradient(140% 100% at 0% 0%, #173A3B 0%, #0B2023 45%, #050E10 100%) !important; color: #EDE4D3; border-inline-start: 1px solid rgba(232, 207, 152, .6); box-shadow: -30px 0 80px rgba(0, 0, 0, .7); } .drawer--cart .drawer__head { border-bottom: 1px solid rgba(232, 207, 152, .3); } .drawer--cart .drawer__head h2 { color: transparent !important; background: linear-gradient(180deg, #FFF9E6, #E2B85C 55%, #B07A26); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Heebo', Arial, sans-serif; font-weight: 800; font-size: 1.5rem; } .drawer--cart .drawer__head .icon-btn { border-radius: 50%; color: #F7E9C4; border: 1px solid rgba(232, 207, 152, .6); background: radial-gradient(circle at 35% 30%, #2A4A4A, #0A1A1C); } .drawer--cart .ship-bar { margin: 12px 0; padding: 12px 14px; color: #F4EBDA; border: 1px solid rgba(232, 207, 152, .35); background: linear-gradient(180deg, rgba(232, 207, 152, .1), rgba(232, 207, 152, .02)); } .drawer--cart .ship-bar b { color: #F7E9C4; } .drawer--cart .ship-bar__track { background: rgba(255, 255, 255, .08); height: 6px; border-radius: 3px; margin-top: 8px; } .drawer--cart .ship-bar__fill { background: linear-gradient(90deg, #B98E4E, #F7E9C4); border-radius: 3px; } .drawer--cart .line { margin: 10px 0; padding: 12px; gap: 12px; border: 0; color: #EDE4D3; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)), linear-gradient(135deg, #14302F, #0A1C1E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(232, 207, 152, .25), 0 10px 22px rgba(0, 0, 0, .45); } .drawer--cart .line img { width: 74px; height: 88px; object-fit: contain; border-radius: 0; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(232, 207, 152, .3); } .drawer--cart .line__title { color: #FFF8EA !important; font-weight: 700; text-decoration: none; } .drawer--cart .line__link:hover .line__title, .drawer--cart a.line__title:hover { color: #F7E9C4 !important; text-decoration: underline; } .drawer--cart .line__meta { color: #CFC4AE; font-size: .78rem; } .drawer--cart .line b { color: #F7E9C4; font-family: 'Heebo', Arial, sans-serif; } .drawer--cart .qty { border: 1px solid rgba(232, 207, 152, .4); background: rgba(4, 12, 13, .6); } .drawer--cart .qty button { color: #F7E9C4; } .drawer--cart .qty input { color: #F4EBDA; background: transparent; } .drawer--cart .line__remove { color: #E9A99C !important; } .drawer--cart .line__name { background: rgba(232, 207, 152, .08); border-inline-start-color: #E8CF98; } .drawer--cart .line__name b { color: #FFF8EA; } .drawer--cart .line__name .link, .drawer--cart .line__name--add a, .drawer--cart .line__name--add button { color: #E8CF98 !important; font-weight: 700; } .drawer--cart .line__name--edit label { color: #D9CDB6; } .drawer--cart .line__name--edit textarea { background: rgba(255, 255, 255, .06); color: #FFF8EA; border-color: rgba(232, 207, 152, .45); } .drawer--cart .upsell, .drawer--cart .deals, .drawer--cart .combo { background: rgba(232, 207, 152, .06); border: 1px solid rgba(232, 207, 152, .25); color: #EDE4D3; } .drawer--cart .cart-foot { margin-top: 14px; padding: 14px; background: rgba(4, 12, 13, .65); border: 1px solid rgba(232, 207, 152, .35); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); } .drawer--cart .cart-foot .row { color: #EDE4D3; } .drawer--cart .btn--primary { background: linear-gradient(100deg, #8C6A34 0%, #D9BD86 28%, #F7E9C4 48%, #D9BD86 68%, #8C6A34 100%) !important; color: #0A1A1A !important; font-weight: 800; letter-spacing: .06em; border: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 246, 221, .5); } .drawer--cart .btn--ghost { color: #F7E9C4 !important; border-color: rgba(232, 207, 152, .6) !important; } .drawer--cart .secure { color: #B3AA98; } .drawer--cart .cart-empty p { color: #EDE4D3; } .gset__media--group img { height: 100% !important; width: 100% !important; max-width: none !important; margin: 0 !important; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.5)); } .cart-note { display: grid; gap: 6px; margin-top: 14px; } .cart-note label { color: #E8CF98; font-weight: 700; font-size: .9rem; } .cart-note textarea { width: 100%; min-height: 80px; resize: vertical; padding: 10px; font: inherit; font-size: .9rem; background: rgba(255,255,255,.06); color: #FFF8EA; border: 1px solid rgba(232,207,152,.45); } /* Shabbat countdown — lighter, fresher look (owner, 2.10.2026) */ .shabbat-band { background: linear-gradient(120deg, #FFF8EC 0%, #FDEFD9 45%, #F6E2C4 100%) !important; color: #2E3A38 !important; border-bottom: 1px solid #EBCB93 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } .shabbat-band .sb-title { background: none !important; -webkit-text-fill-color: #B5803B !important; color: #B5803B !important; font-weight: 900; } .shabbat-band .sb-clock > span { background: #FFFFFF !important; border: 0 !important; border-radius: 14px; box-shadow: 0 6px 14px rgba(181, 128, 59, .18), inset 0 0 0 1.5px #F0D3A3 !important; } .shabbat-band .sb-clock b { color: #2E3A38 !important; } .shabbat-band .sb-clock small { color: #B5803B !important; } .shabbat-band .sb-clock i { color: #D9A55E !important; } .shabbat-band .sb-sub { color: #5B6360 !important; } .shabbat-band .sb-go { border-radius: 99px; background: linear-gradient(110deg, #E9B872, #F7D9A6) !important; color: #3A2A12 !important; box-shadow: 0 6px 14px rgba(181, 128, 59, .3); } .shabbat-band .sb-x { color: #B5803B !important; border-color: #EBCB93 !important; background: #fff !important; } .shabbat-band--last { background: linear-gradient(120deg, #FFF1EA 0%, #FFE1D3 50%, #FFD2C0 100%) !important; border-bottom-color: #F4A98C !important; } .shabbat-band--last .sb-title { -webkit-text-fill-color: #D2603A !important; color: #D2603A !important; } .shabbat-band--last .sb-clock > span { box-shadow: 0 6px 14px rgba(210, 96, 58, .18), inset 0 0 0 1.5px #F7C2AE !important; } .shabbat-band--last .sb-clock small, .shabbat-band--last .sb-clock i { color: #D2603A !important; } .shabbat-band--last .sb-go { background: linear-gradient(110deg, #F08A65, #F7B49A) !important; color: #fff !important; } /* Shabbat countdown — light but grown-up: ivory, thin gold lines, deep teal serif; it stays with you while scrolling */ .shabbat-band { position: sticky !important; top: calc(var(--hdr-h, 68px) + env(safe-area-inset-top, 0px)); z-index: 40; background: linear-gradient(180deg, #FBF7EF, #F4ECDD) !important; color: #1F3A3A !important; border-top: 1px solid #D9BD86; border-bottom: 1px solid #D9BD86 !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important; padding-block: 10px !important; transition: padding .3s; } .shabbat-band .sb-title { -webkit-text-fill-color: #1F3A3A !important; color: #1F3A3A !important; font-weight: 700 !important; letter-spacing: .01em; font-size: clamp(1.05rem, 4vw, 1.4rem) !important; animation: none !important; } .shabbat-band .sb-clock > span { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border: 1px solid #C9A468 !important; min-width: 50px; } .shabbat-band .sb-clock b { color: #1F3A3A !important; font-weight: 700; } .shabbat-band .sb-clock small, .shabbat-band .sb-clock i { color: #9C7A3E !important; } .shabbat-band .sb-sub { color: #5B6360 !important; } .shabbat-band .sb-go { border-radius: 0 !important; background: #1F3A3A !important; color: #F7E9C4 !important; box-shadow: none !important; letter-spacing: .06em; } .shabbat-band .sb-x { background: transparent !important; border-color: #C9A468 !important; color: #9C7A3E !important; } .shabbat-band--last { background: linear-gradient(180deg, #FBF7EF, #F4ECDD) !important; border-color: #B5543A !important; } .shabbat-band--last .sb-title { -webkit-text-fill-color: #9E3F27 !important; color: #9E3F27 !important; } .shabbat-band--last .sb-clock > span { border-color: #B5543A !important; } .shabbat-band--last .sb-clock small, .shabbat-band--last .sb-clock i { color: #9E3F27 !important; } .shabbat-band--last .sb-go { background: #9E3F27 !important; color: #fff !important; } /* while scrolling: one compact line */ .shabbat-band.is-stuck { padding-block: 6px !important; } .shabbat-band.is-stuck .sb-sub, .shabbat-band.is-stuck .sb-go { display: none; } .shabbat-band.is-stuck .sb-in { gap: 6px 12px; flex-wrap: nowrap; } .shabbat-band.is-stuck .sb-title { font-size: .95rem !important; white-space: nowrap; } .shabbat-band.is-stuck .sb-clock > span { min-width: 38px; padding: 3px 5px 2px; } .shabbat-band.is-stuck .sb-clock b { font-size: 1.1rem; } .shabbat-band.is-stuck .sb-clock small { font-size: .52rem; } .rav-wa { top: 18px; } /* a touch lower (owner, 2.10.2026) */ /* site type: Heebo everywhere (the look of Art Judaica) */ body { font-weight: 500; -webkit-font-smoothing: antialiased; } :root { --font-body: 'Heebo', Arial, sans-serif; --font-display: 'Heebo', Arial, sans-serif; --font-latin: 'Heebo', Arial, sans-serif; } h1, h2, h3, .card__title, .tier h3 { font-weight: 600; } /* soft shadows in the Art Judaica manner: lifted titles, cards that float a little */ h1, h2, h3, .card__title, .ht-light, .ht-gold, .hero p.lead, .cat span { text-shadow: 0 2px 6px rgba(0, 0, 0, .35); } .card, .tier, .cat, .pdp__media, .modal__box, .btn { box-shadow: 0 3px 9px rgba(0, 0, 0, .28); } .btn:hover, .card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .34); } /* home opening — framed slider and framed collection cards */ .ah { background: #F8F5EF; padding: 0 0 26px; color: #2A2622; } .ah-slider { position: relative; height: min(118vw, 640px); overflow: hidden; } .ah-slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1s ease; text-decoration: none; color: #fff; } .ah-slide.is-on { opacity: 1; z-index: 1; } .ah-slide::after, .ah-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.38) 100%); } .ah-card::after { background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 55%); } .ah-frame { position: absolute; inset: 22px 18px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 34px; z-index: 2; pointer-events: none; } .ah-copy { position: absolute; inset-inline: 30px; bottom: 54px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .ah-copy--top { bottom: auto; top: 44px; } .ah-copy b { font-size: clamp(1.55rem, 6.4vw, 2.4rem); font-weight: 800; line-height: 1.15; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.45); } .ah-copy small { font-size: clamp(.95rem, 3.8vw, 1.15rem); font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); max-width: 30ch; line-height: 1.45; } .ah-btn { margin-top: 12px; font-style: normal; background: #fff; color: #111; font-weight: 800; font-size: .92rem; letter-spacing: .02em; padding: 11px 30px; border-radius: 10px; box-shadow: 0 3px 9px rgba(0,0,0,.28); } .ah-dots { position: absolute; bottom: 30px; inset-inline: 0; z-index: 4; display: flex; justify-content: center; gap: 10px; } .ah-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff; } .ah-dots i.is-on { background: #fff; } .ah-head { text-align: center; padding: 34px 20px 8px; max-width: 640px; margin: 0 auto; } .ah-head h2 { color: #2A2622 !important; font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 600; text-shadow: none; margin: 0 0 8px; } .ah-head p { color: #6E6760; font-size: 1.02rem; line-height: 1.55; margin: 0; } .ah-cards { display: grid; gap: 22px; padding: 22px 16px 0; max-width: 1200px; margin: 0 auto; } @media (min-width: 900px) { .ah-cards { grid-template-columns: 1fr 1fr; } .ah-slider { height: 72vh; } } .ah-card { position: relative; display: block; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 26px; overflow: hidden; background: center / cover no-repeat; box-shadow: 0 3px 9px rgba(0,0,0,.3); text-decoration: none; } .ah-card .ah-frame { inset: 14px; border-radius: 20px; } /* countdowns read days → hours → minutes from the left */ .sb-clock, .hclock__units { direction: ltr; } /* Friday popup: this week's Shabbat times */ .stimes { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(10, 22, 22, .55); padding: 16px; } .stimes__box { position: relative; width: min(360px, 100%); background: #FBF7EF; color: #1F3A3A; border: 1px solid #C9A774; border-radius: 22px; padding: 28px 24px 22px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .stimes__box::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201,167,116,.55); border-radius: 16px; pointer-events: none; } .stimes__eyebrow { margin: 0; color: #9A7A45; letter-spacing: .12em; font-weight: 600; } .stimes h3 { margin: 4px 0 16px; color: #1F3A3A !important; text-shadow: none; font-size: 1.35rem; } .stimes__row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 4px; border-top: 1px solid rgba(201,167,116,.45); } .stimes__row b { font-size: 1.5rem; font-weight: 800; color: #0F4C4C; font-variant-numeric: tabular-nums; } .stimes__note { margin: 12px 0 0; font-size: .88rem; color: #6E6760; } .stimes__x { position: absolute; top: 12px; inset-inline-start: 14px; background: none; border: 0; font-size: 1.1rem; color: #6E6760; cursor: pointer; z-index: 1; } /* everything reads centred, as in a gallery catalogue (owner, 2.10.2026) — forms, cart lines and the admin keep their own alignment */ #main :is(h1, h2, h3, h4, p, .eyebrow, .card__title, .card__price, .card__body, .section__head, .story-teaser, .split > div, .usp > div, .pdp__info > :not(form):not(.perso):not(.opts), .crumbs, .cat span, .review, .tier):not(:is(.admin, .adm, .orders, .cart, form) *) { text-align: center; } #main :is(.hero__cta, .hero__trust, .section__head, .card__body):not(:is(.admin, .adm, form) *) { justify-content: center; align-items: center; } #main .split > div > .btn { margin-inline: auto; } .footer, .footer h3, .footer p { text-align: center; } html, body { overflow-x: clip; } .shabbat-band { overflow: hidden; } .shabbat-band.is-stuck .sb-title { white-space: normal; min-width: 0; font-size: .92rem; } /* Hanukkah band: clean green on white (owner, 2.10.2026) */ .holiday-band, .holiday-band--urgent { background: #FFFFFF; color: #0E4B3B; border-top: 1px solid #CFE3DA; border-bottom: 2px solid #0E4B3B; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .holiday-band b { color: #0E4B3B; text-shadow: none; } .holiday-band button { color: #0E4B3B; } .hclock { background: #0E4B3B; color: #FFFFFF; border: 0; border-radius: 10px; box-shadow: 0 3px 9px rgba(14,75,59,.28); } .hclock__face { border-color: #FFFFFF; } .hclock__face::before, .hclock__face::after { background: #FFFFFF; } .hclock__units b { color: #FFFFFF; } .hclock__units small { color: #CFE3DA; } .hband-order { background: #0E4B3B; color: #FFFFFF !important; border: 0; border-radius: 8px; padding: 6px 16px; } /* Hanukkah band, final: the logo's deep green in 3D, with a soft glow and faint twinkling stars inside; white type (owner, 2.10.2026) */ .holiday-band, .holiday-band--urgent { position: relative; overflow: hidden; color: #FFFFFF; border: 0; background: radial-gradient(60% 140% at 50% -20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, #1D4650 0%, #11313A 48%, #0B2329 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.35), 0 6px 16px rgba(5,20,24,.35); } .holiday-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .75; background-image: radial-gradient(1.4px 1.4px at 8% 30%, #fff, transparent), radial-gradient(1px 1px at 18% 72%, #fff, transparent), radial-gradient(1.6px 1.6px at 31% 18%, #fff, transparent), radial-gradient(1px 1px at 44% 80%, #fff, transparent), radial-gradient(1.3px 1.3px at 57% 26%, #fff, transparent), radial-gradient(1px 1px at 69% 66%, #fff, transparent), radial-gradient(1.6px 1.6px at 82% 22%, #fff, transparent), radial-gradient(1px 1px at 93% 74%, #fff, transparent); animation: hbTwinkle 3.8s ease-in-out infinite alternate; } .holiday-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); background-size: 250% 100%; animation: hbGlow 7s linear infinite; } @keyframes hbTwinkle { from { opacity: .35; } to { opacity: .85; } } @keyframes hbGlow { from { background-position: 150% 0; } to { background-position: -100% 0; } } .holiday-band a, .holiday-band button { position: relative; z-index: 1; } .holiday-band b, .holiday-band button { color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,.4); } .hclock { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.55); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.3); } .hclock__units small { color: rgba(255,255,255,.75); } .hband-order { background: #FFFFFF; color: #11313A !important; border-radius: 8px; box-shadow: 0 3px 9px rgba(0,0,0,.3); text-shadow: none; } @media (prefers-reduced-motion: reduce) { .holiday-band::before, .holiday-band::after { animation: none; } } /* the rabbi's window: the close button sits in the top corner, always in view, easy to hit */ #modal-box:has(.rav-pop) > .modal__close { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; left: 14px !important; right: auto !important; z-index: 50 !important; width: 46px !important; height: 46px !important; border-radius: 50% !important; background: #FFFFFF !important; color: #11313A !important; border: 0 !important; font-size: 1.2rem !important; box-shadow: 0 4px 14px rgba(0,0,0,.45) !important; display: grid !important; place-items: center !important; } .shabbat-band .sb-x { top: 8px; inset-inline-end: 8px; inset-inline-start: auto; } /* ===== White site with green accents (owner, 2.10.2026) ===== pages turn white; the logo's deep green carries the header, footer, buttons and fine ornaments */ :root { --brand: #11313A; --brand-2: #1D4650; --brand-soft: rgba(17, 49, 58, .14); --night: #FFFFFF; --night-2: #F6F9F8; --night-3: #EDF3F1; --text: #17302F; --muted: #5E6E6A; --line: rgba(17, 49, 58, .14); --white: #FFFFFF; --cream-50: #FFFFFF; --cream-100: #F6F9F8; --sand: #F1F6F4; --gold: #1D4650; --gold-soft: rgba(17, 49, 58, .25); --gold-text: #1D4650; --gold-grad: linear-gradient(180deg, #24525D 0%, #11313A 100%); } html, body { background: #FFFFFF; } body { color: var(--text); } #main h1, #main h2, #main h3, #main .card__title, #main .tier h3, .page-head h1 { color: var(--brand); } #main p, #main li { color: var(--text); } .section--teal, .section--sand { background: #F6F9F8; } .section--teal h2, .section--teal p, .section--teal b { color: var(--brand) !important; } /* green ornaments: a hairline with a small diamond under every section title */ .section__head h2::after, .ah-head h2::after, .page-head h1::after { content: ''; display: block; width: 120px; height: 9px; margin: 12px auto 0; background: linear-gradient(var(--brand), var(--brand)) center / 100% 1px no-repeat, linear-gradient(45deg, transparent 45%, var(--brand) 45% 55%, transparent 55%) center / 9px 9px no-repeat; } .btn--primary, .btn--gold { background: var(--gold-grad); color: #FFFFFF !important; border: 0; box-shadow: 0 3px 9px rgba(17, 49, 58, .3); } .btn--ghost, .btn--outline { color: var(--brand); border-color: var(--brand); } .header, .announce, .footer { background: var(--brand); } .ah { background: #FFFFFF; } /* Shabbat band: logo green instead of red */ .shabbat-band, .shabbat-band--last { --sb-accent: #11313A; } .shabbat-band .sb-title, .shabbat-band.shabbat-band--last .sb-title { color: #11313A !important; } .shabbat-band .sb-clock > span { border-color: #11313A !important; } .shabbat-band .sb-clock b, .shabbat-band .sb-clock i, .shabbat-band .sb-clock small { color: #11313A !important; } .shabbat-band .sb-go { background: linear-gradient(180deg, #24525D, #11313A) !important; color: #FFFFFF !important; border-color: #11313A !important; } .shabbat-band .sb-x { color: #11313A !important; border-color: #11313A !important; } /* Hanukkah clock reads days on the right again */ .hclock__units { direction: rtl; }.shabbat-band, .shabbat-band.shabbat-band--last { background: #FFFFFF !important; border-bottom: 2px solid #11313A !important; } .shabbat-band .sb-title, .shabbat-band.shabbat-band--last .sb-title { -webkit-text-fill-color: #11313A !important; color: #11313A !important; animation: none; } .shabbat-band .sb-clock > span { box-shadow: 0 3px 9px rgba(17,49,58,.18), inset 0 0 0 1.5px #11313A !important; } .shabbat-band .sb-clock small, .shabbat-band .sb-clock i { color: #1D4650 !important; } .announce { color: #FFFFFF !important; } .announce * { color: #FFFFFF; } .holiday-band > button { inset-inline-end: 6px; }#main :is(.usp strong, .story-teaser__hook, .reveal b, .eyebrow, .gset li) { color: var(--brand) !important; -webkit-text-fill-color: currentColor; } #main :is(.usp > div, .reveal p, .section__head p, .ah-head p, .gset li) { color: #4B5C58 !important; -webkit-text-fill-color: currentColor; } /* menu: white with green type, no boxes between the tabs (owner, 2.10.2026) */ .drawer--nav .drawer__panel, .ftabs__panel { background: #FFFFFF !important; color: #11313A; border: 0 !important; box-shadow: 0 0 30px rgba(17,49,58,.25) !important; } .drawer--nav .drawer__head { background: #11313A; border-bottom: 0; } .drawer--nav .drawer__head::after { color: #11313A; background: #FFFFFF; border-radius: 50%; } .drawer--nav .mobile-nav a, .drawer--nav .mobile-nav .sub a, .mnav-sub a, .drawer--nav .mobile-nav .mnav-sub a, .ftabs__tile, .ftabs__tile--sub { background: none !important; border: 0 !important; box-shadow: none !important; outline: 0; color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-weight: 600; } .drawer--nav .mobile-nav a:hover, .mnav-sub a:hover, .ftabs__tile:hover, .ftabs__tile:focus-visible { background: #F1F6F4 !important; color: #11313A !important; border-radius: 10px; } .mnav-sub a, .drawer--nav .mobile-nav .mnav-sub a, .ftabs__tile--sub { color: #3E5A57 !important; -webkit-text-fill-color: #3E5A57 !important; font-weight: 500; } .mnav-arrow { border: 0 !important; color: #11313A !important; } .drawer--nav .mobile-nav .sep { border-top: 0; } .drawer--nav .mobile-nav a.ig-menu { -webkit-text-fill-color: #fff !important; color: #fff !important; } .ftabs__eyebrow { color: #1D4650; } .ftabs__title { background: none; -webkit-text-fill-color: #11313A; color: #11313A; } .ftabs__x { background: #11313A; color: #FFFFFF; border: 0; } .ftabs__backdrop, .drawer--nav { background: rgba(17, 49, 58, .35) !important; } /* ===== All white: every green background turns white; green is for type, lines and ornaments only (owner, 2.10.2026) ===== */ .header, .announce, .footer, .drawer--nav .drawer__head, .drawer__panel, .drawer--cart .drawer__panel, .modal__box, .chat, .search__panel, .section--teal, .section--sand, .hero, .tier, .tiers, .ladder, .co-box, .summary, .a11y-panel, .ftabs-launch, .rav-pop, .promo-band, .qty-deal, .card__badge { background: #FFFFFF !important; background-image: none !important; } .header { border-bottom: 1px solid rgba(17,49,58,.18) !important; box-shadow: 0 2px 10px rgba(17,49,58,.08) !important; backdrop-filter: none; } .announce { border-bottom: 1px solid rgba(17,49,58,.14) !important; } .footer { border-top: 2px solid #11313A !important; } .modal__box, .drawer__panel { border: 1px solid rgba(17,49,58,.25) !important; box-shadow: 0 12px 40px rgba(17,49,58,.25) !important; } .modal__box::before, .modal__box::after { border-color: #11313A !important; } /* every piece of type: logo green with a soft shadow (low specificity, so the exceptions below win) */ :where(body, body *) { color: #11313A !important; -webkit-text-fill-color: #11313A !important; } :where(h1, h2, h3, h4, .card__title, .section__head p, .ftabs__title, .sb-title, .line__title) { text-shadow: 0 2px 4px rgba(17,49,58,.22) !important; } :where(p, li, span, small, a, label, b, strong) { text-shadow: 0 1px 2px rgba(17,49,58,.14); } /* white type stays white on photos and on green buttons/bands */ .ah-copy, .ah-copy *, .cat span, .cat span *, .holiday-band, .holiday-band *, .btn, .btn *, .sb-go, .sb-go *, .hband-order, .ig-menu, .ig-menu *, .ftabs__ig, .ftabs__ig *, .hero-ig, .hero-ig *, .rav-wa, .rav-wa *, .whatsapp, .whatsapp *, .ftabs__x, .stimes__x ~ *:where(.never) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } #shabbat-lock, #shabbat-lock * { color: #F2E2B8 !important; -webkit-text-fill-color: #F2E2B8 !important; text-shadow: none !important; } #shabbat-lock h1, #shabbat-lock .sl-parasha b { color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; } #shabbat-lock .sl-back { color: #D9CDB6 !important; -webkit-text-fill-color: #D9CDB6 !important; } #shabbat-lock .sl-bless { color: #E8CF98 !important; -webkit-text-fill-color: #E8CF98 !important; } .ah-btn, .ah-btn * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; text-shadow: none !important; } .btn--ghost, .btn--outline, .btn--ghost *, .btn--outline * { color: #11313A !important; -webkit-text-fill-color: #11313A !important; }/* green ornaments, borders and icons */ .header svg, .icon-btn, .icon-btn svg { color: #11313A !important; stroke: currentColor; } .ftabs-launch { color: #11313A !important; border: 1px solid #11313A !important; box-shadow: 0 4px 12px rgba(17,49,58,.25) !important; } input, select, textarea { background: #FFFFFF !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; border: 1px solid rgba(17,49,58,.35) !important; } .btn, .btn--primary, .btn--gold, .drawer--cart .btn--primary, .sb-go, .hband-order { background: linear-gradient(180deg, #24525D, #11313A) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 0 !important; box-shadow: 0 3px 9px rgba(17,49,58,.3) !important; } .btn--ghost, .btn--outline, .drawer--cart .btn--ghost { background: #FFFFFF !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; border: 1px solid #11313A !important; } .drawer--cart .line, .drawer--cart .cart-foot, .drawer--cart .ship-bar, .drawer--cart .upsell, .drawer--cart .deals, .drawer--cart .combo, .drawer--cart .line__name { background: #FFFFFF !important; border: 1px solid rgba(17,49,58,.18) !important; box-shadow: 0 2px 8px rgba(17,49,58,.08) !important; } .drawer--cart .ship-bar__fill { background: #11313A !important; } .drawer--cart .ship-bar__track { background: #E3ECE9 !important; } .drawer--cart .drawer__head h2 { background: none !important; } .ftabs__ig, .ig-menu { color: #fff !important; } .ig-cta, .ig-cta *, .ig-foot, .ig-foot *, .card__quick, .card__quick *, .chat-launch, .chat-launch *, .gset__flag, .gset__flag *, .sound-btn, .sound-btn * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } .marquee, .story-teaser__mark { background: #FFFFFF !important; background-image: none !important; } .story-teaser__mark { border: 1px solid rgba(17,49,58,.25); box-shadow: 0 3px 9px rgba(17,49,58,.12); } .ht-royal { background: none !important; } .drawer__head .icon-btn, .modal__close, .icon-btn.drawer__close { background: #FFFFFF !important; background-image: none !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; border: 1.5px solid #11313A !important; box-shadow: 0 3px 9px rgba(17,49,58,.2) !important; } .drawer__head .icon-btn svg { stroke: #11313A !important; } .pdp-back, a.pdp-back { background: #FFFFFF !important; background-image: none !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; border: 1.5px solid #11313A !important; } /* heavier type everywhere so the green reads bold (owner, 2.10.2026) */ body { font-weight: 700 !important; } :where(h1, h2, h3, h4, b, strong, .card__title, .sb-title, .ah-copy b, .ftabs__title) { font-weight: 900 !important; } :where(p, li, span, a, label, small, button, td, th, figcaption) { font-weight: 700; } .stimes__date { margin: -8px 0 12px; font-size: 1.05rem; color: #11313A; } .stimes__date small { font-size: .9rem; opacity: .85; } /* Hanukkah clock: days on the left, hours in the middle, minutes on the right */ .hclock__units { direction: ltr !important; } /* menu: much heavier type with a soft shadow */ .drawer--nav .mobile-nav a, .drawer--nav .mobile-nav .sub a, .mnav-sub a, .drawer--nav .mobile-nav .mnav-sub a, .ftabs__tile, .ftabs__tile--sub, .nav a { font-weight: 900 !important; text-shadow: 0 1px 3px rgba(17,49,58,.25) !important; } .mnav-sub a, .drawer--nav .mobile-nav .mnav-sub a, .ftabs__tile--sub { font-weight: 800 !important; } /* menu: heaviest weight */ .drawer--nav .mobile-nav a, .drawer--nav .mobile-nav .sub a, .mnav-sub a, .drawer--nav .mobile-nav .mnav-sub a, .ftabs__tile, .ftabs__tile--sub, .nav a { font-weight: 900 !important; font-size: 1rem !important; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(17,49,58,.3), 0 2px 6px rgba(17,49,58,.18) !important; } .mnav-sub a, .drawer--nav .mobile-nav .mnav-sub a, .ftabs__tile--sub { font-weight: 900 !important; font-size: .92rem !important; } /* product page, streamlined (owner, 2.10.2026): smaller photos, the design choices right under the price */ .pdp .gallery, .pdp .stage, .pdp__media { background: #FFFFFF !important; background-image: none !important; } .pdp .stage { max-height: 46vh; } .pdp .stage img { max-height: 46vh; object-fit: contain; } .pdp .thumbs { gap: 6px; justify-content: center; } .pdp .thumbs button, .pdp .thumbs img { width: 52px !important; height: 52px !important; object-fit: cover; } @media (max-width: 760px) { .pdp .stage, .pdp .stage img { max-height: 34vh; } .pdp .gallery { margin-bottom: 4px; } } .pdp > div:not(.gallery) { display: flex; flex-direction: column; } .pdp > div:not(.gallery) > .card__badge { align-self: center; } .pdp > div:not(.gallery) > .pdp__desc { order: 20; } .pdp > div:not(.gallery) > .holiday-line, .pdp > div:not(.gallery) > .rec-link, .pdp > div:not(.gallery) > .assure, .pdp > div:not(.gallery) > .wa-ask { order: 21; } .pdp > div:not(.gallery) > details { order: 22; } /* owner, 14.10.2026: the description right under the photos — title, subtitle, then the description and "פרטי המוצר", before the price */ .pdp > div:not(.gallery) > .card__badge { order: -6; } .pdp > div:not(.gallery) > h1, .pdp > div:not(.gallery) > .pdp-nusach { order: -5; } .pdp > div:not(.gallery) > .pdp-promo, .pdp > div:not(.gallery) > .pdp-rav { order: -4; } .pdp-promo { margin: 8px 0 6px; padding: 10px 14px; border-radius: 14px; background: #FBF3E2; border: 2px solid #B08D57; color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-size: 1.45rem; font-weight: 900; text-align: center; line-height: 1.3; } .pdp-rav { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 10px 22px; border-radius: 30px; background: #25D366; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.15); } .pdp-nusach { align-self: center; margin: 6px 0 4px; padding: 6px 18px; border-radius: 30px; background: #11313A; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; } .pdp > div:not(.gallery) > .pdp__sub { order: -4; } .pdp > div:not(.gallery) > .pdp__desc { order: -3; margin-top: 4px; } .pdp > div:not(.gallery) > .includes, .pdp > div:not(.gallery) > .hb-ship, .pdp > div:not(.gallery) > .founder-quote { order: -3; } .pdp > div:not(.gallery) > details.pd-main { order: -2; margin: 4px 0 10px; } .pdp .swatches { justify-content: center; } .pdp .swatch--img { width: 54px; height: 54px; } .pdp .block, .pdp .perso { background: #FFFFFF; border: 1px solid rgba(17,49,58,.18); border-radius: 14px; padding: 12px; box-shadow: 0 2px 8px rgba(17,49,58,.08); } @media (max-width: 760px) { .pdp .stage, .pdp .stage img, .pdp .stage svg { max-height: 25vh !important; height: auto; } .pdp .stage { height: 25vh !important; } .pdp .stage img, .pdp .stage svg { width: 100%; height: 100% !important; object-fit: contain; } .pdp .thumbs button, .pdp .thumbs img { width: 40px !important; height: 40px !important; } .pdp .gallery { padding-block: 4px !important; } } /* Rabbi's window: caption sits directly on the photo — white letters with soft shadows, no dark band */ .rav-hero figcaption { background: none !important; padding: 0 12px 16px !important; } .rav-hero figcaption h2, .rav-hero figcaption .eyebrow { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .45) !important; } /* welcome form: white with logo green (owner, 2.10.2026) */ .modal__box--gate { background: #FFFFFF !important; border: 1.5px solid #11313A !important; } .modal__box--gate .lead__mark { filter: none !important; } .modal__box--gate h2 { background: none !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; } .modal__box--gate input { border: 1.5px solid rgba(17,49,58,.45) !important; border-radius: 12px; background: #FFFFFF !important; } .modal__box--gate input:focus { border-color: #11313A !important; box-shadow: 0 0 0 3px rgba(17,49,58,.15) !important; outline: 0; } .modal__box--gate .approve { background: #F1F6F4 !important; background-image: none !important; border: 1.5px solid #11313A !important; border-radius: 12px; box-shadow: none !important; } .modal__box--gate .approve, .modal__box--gate .approve * { color: #11313A !important; -webkit-text-fill-color: #11313A !important; } .modal__box--gate .approve input { accent-color: #11313A; } .modal__box--gate .btn--primary { background: linear-gradient(180deg, #24525D, #11313A) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-radius: 12px; } /* the rabbi's photo: caption much bolder and clearer */ .rav-hero { position: relative; } .rav-hero figcaption { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,20,22,.55) 40%, rgba(8,20,22,.85) 100%) !important; padding: 40px 14px 16px !important; } .rav-hero figcaption, .rav-hero figcaption * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6) !important; } .rav-hero figcaption h2 { font-size: clamp(1.35rem, 5.6vw, 1.8rem) !important; font-weight: 900 !important; line-height: 1.3; } .rav-hero figcaption .eyebrow { font-weight: 800 !important; font-size: .95rem !important; letter-spacing: .12em; } #modal-box.modal__box--gate form.lead label.approve { background: #F1F6F4 !important; background-image: none !important; border: 1.5px solid #11313A !important; box-shadow: none !important; } /* the rabbi's caption: logo green with a soft glow, on a light veil */ .rav-hero figcaption { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 38%, rgba(255,255,255,.93) 100%) !important; } .rav-hero figcaption, .rav-hero figcaption * { color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.8), 0 0 22px rgba(60,170,140,.45) !important; } /* pop-ups only: logo green with white type (owner, 2.10.2026) */ #modal-box.modal__box, .stimes__box, .toast { background: linear-gradient(180deg, #1D4650 0%, #11313A 60%, #0B2329 100%) !important; border: 1px solid rgba(255,255,255,.35) !important; box-shadow: 0 14px 40px rgba(5,20,24,.45), inset 0 1px 0 rgba(255,255,255,.2) !important; } #modal-box.modal__box *, .stimes__box *, .toast, .toast * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0,0,0,.35) !important; } #modal-box.modal__box input, #modal-box.modal__box textarea, #modal-box.modal__box select { background: #FFFFFF !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: none !important; border: 1.5px solid rgba(255,255,255,.7) !important; } #modal-box.modal__box .btn, #modal-box.modal__box .btn *, #modal-box.modal__box .btn--primary { background: #FFFFFF !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: none !important; } #modal-box.modal__box .modal__close, .stimes__x { background: #FFFFFF !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: none !important; } #modal-box.modal__box--gate form.lead label.approve { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.6) !important; } #modal-box.modal__box--gate .lead__mark { filter: brightness(0) invert(1) !important; } .stimes__row { border-top-color: rgba(255,255,255,.3) !important; } #modal-box .rav-wa, #modal-box .rav-wa * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } #modal-box .rav-hero figcaption { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(11,35,41,.6) 40%, rgba(11,35,41,.92) 100%) !important; } #modal-box .rav-hero figcaption, #modal-box .rav-hero figcaption * { text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 0 16px rgba(120,220,190,.55) !important; } /* the rabbi's caption, final: bold logo green with a soft glow on a light veil (owner, 2.10.2026) */ #modal-box .rav-hero figcaption { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 35%, rgba(255,255,255,.95) 100%) !important; } #modal-box .rav-hero figcaption, #modal-box .rav-hero figcaption * { color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-weight: 900 !important; text-shadow: 0 0 4px #fff, 0 0 10px rgba(255,255,255,.95), 0 0 20px rgba(60,170,140,.6) !important; }/* the rabbi's window: every button in logo green with white type */ #modal-box .rav-pop .btn, #modal-box .rav-pop .btn--primary, #modal-box .rav-pop .rav-ig, #modal-box .rav-pop button.link, #modal-box .rav-pop .rav-wa { background: linear-gradient(180deg, #24525D, #11313A) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(17,49,58,.35) !important; text-shadow: none !important; padding: 12px 18px !important; text-decoration: none !important; } #modal-box .rav-pop .btn *, #modal-box .rav-pop .rav-ig *, #modal-box .rav-pop .rav-wa * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; fill: #FFFFFF; stroke: #FFFFFF; text-shadow: none !important; } /* the rabbi's window: white card, every word in bold logo green; buttons green with white type (owner, 2.10.2026) */ #modal-box.modal__box:has(.rav-pop) { background: #FFFFFF !important; border: 2px solid #11313A !important; } #modal-box .rav-pop, #modal-box .rav-pop *:not(.btn):not(.btn *):not(.rav-ig):not(.rav-ig *):not(.rav-wa):not(.rav-wa *):not(button.link) { color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-weight: 800 !important; } #modal-box .rav-pop h2, #modal-box .rav-pop h2 * { font-weight: 900 !important; } #modal-box .rav-pop p, #modal-box .rav-pop small, #modal-box .rav-pop span { text-shadow: 0 1px 2px rgba(17,49,58,.15) !important; } #modal-box .rav-pop .maaser { background: #F1F6F4 !important; border: 1.5px solid #11313A !important; } /* products stand on pure white — no tinted "pool of light" behind any photo (owner, 2.10.2026) */ .card, .card a, .card__media, .card__media a, .pdp .gallery, .pdp .stage, .pdp .thumbs button, .grid--compact .card a, .cat-photo, .swatch--img { background: #FFFFFF !important; background-image: none !important; } .card img, .card__media img, .pdp .stage img, .pdp .thumbs img { mix-blend-mode: normal !important; filter: none !important; } .card__quick { background: linear-gradient(180deg, #24525D, #11313A) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 0 !important; } /* every green button: a thin gold frame (owner, 2.10.2026) */ .card__quick, .card .btn, .btn--primary, .btn--gold, .btn:not(.btn--ghost):not(.btn--outline), .sb-go, #modal-box .rav-pop .btn, #modal-box .rav-pop .rav-ig, #modal-box .rav-pop .rav-wa, #modal-box .rav-pop button.link, .drawer--cart .btn--primary { background: linear-gradient(180deg, #24525D, #11313A) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #C9A468 !important; box-shadow: inset 0 0 0 1px rgba(232, 207, 152, .35), 0 3px 9px rgba(17, 49, 58, .28) !important; } .card__quick * , .btn:not(.btn--ghost):not(.btn--outline) * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body #main .card .card__quick, html body #main .grid--compact .card__quick { background: linear-gradient(180deg, #24525D, #11313A) !important; background-image: linear-gradient(180deg, #24525D, #11313A) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #C9A468 !important; box-shadow: inset 0 0 0 1px rgba(232,207,152,.35), 0 3px 9px rgba(17,49,58,.28) !important; } /* a collection card on a product photo without background: white card, green type */ .ah-card--light { background-size: contain !important; background-position: center 62% !important; background-color: #FFFFFF !important; border: 1px solid rgba(17,49,58,.2); } .ah-card--light::after { display: none; } .ah-card--light .ah-frame { border-color: rgba(17,49,58,.35); } .ah-card--light .ah-copy b, .ah-card--light .ah-copy small { color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: none !important; } .ah-card--light .ah-btn { background: linear-gradient(180deg, #24525D, #11313A) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1px solid #C9A468; } /* owner, 2.10.2026: NO frames at all — no green/teal circle, no white rectangle, no card shadow. Every product photo stands directly on the site background (white photo backgrounds melt away via multiply). */ .card, .card:hover, .card__media, .card__media a, .card__media--cut a, .card__media--set .card__set, .card__media--cut a:has(img:not([src*="img/cut/"])), .card__media--set .card__set:has(img:not([src*="img/cut/"])), .stage, .stage--hb, .stage--studio, .stage:has(img:not([src*="img/cut/"])):not(.stage--hb), .cat:has(img[src^="http"]), .promo-band__set, .thumbs button { background: transparent !important; box-shadow: none !important; border-color: transparent !important; outline: none !important; } .card__media img, .stage img, .thumbs img, .cat img, .promo-band__set img { mix-blend-mode: multiply; filter: none; } .stage::before, .stage::after, .card__media::before, .card__media::after { display: none !important; } .thumbs button[aria-current="true"], .thumbs button.is-active { border-color: var(--gold) !important; } /* products rest directly on the page — no card boxes, frames or shadows between them (owner, 2.10.2026) */ html body #main .card, html body #main .grid--compact .card, html body #main .card:hover, html body #main .card__media, html body #main .card a { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; border-radius: 0 !important; } html body #main .card::before, html body #main .card::after, html body #main .card__media::before, html body #main .card__media::after { display: none !important; } .price .from, .pdp__price .from { font-size: .72em; font-weight: 600; margin-inline-end: 4px; opacity: .85; } /* owner (2.10.2026, again): NO panel or rectangle behind any product, anywhere — only the product on the page */ html body .is-white, html body #main .is-white, html body .card .is-white { background: transparent !important; background-image: none !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; } html body #main .grid, html body #main .grid > * { background: transparent !important; box-shadow: none !important; border: 0 !important; } /* owner (2.10.2026): every "add to cart" button is always visible (its logo-green colour lives in soldout.css) */ html body #main .card .card__quick { opacity: 1 !important; transform: none !important; } /* product badges: plain green words, no box (owner: nothing framed around products) */ html body #main .card__badge { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-weight: 800 !important; letter-spacing: .04em; padding: 0 !important; } html body .ai-banner { background: linear-gradient(180deg, #24525D, #11313A) !important; border: 1px solid #C9A468 !important; } html body .ai-banner, html body .ai-banner * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: none !important; } .stimes__parasha { border-top: 1px solid rgba(255,255,255,.3); margin-top: 6px; padding-top: 10px; text-align: center; } .stimes__parasha p { margin: 0 0 6px; font-size: .92rem; line-height: 1.5; } .stimes__parasha p:first-child { font-weight: 800; font-size: 1.02rem; } .sb-parasha { display: block; width: 100%; font-weight: 800; color: #11313A; font-size: .95rem; } .sl-parasha { font-size: 1.1rem; font-weight: 700; margin: 6px 0 0; opacity: .95; } /* weekly portion in the Friday Shabbat-times popup: its own centred line (no two-column wrap on phones) */ .stimes__par { margin: 0 0 12px; padding: 10px 8px; text-align: center; border-top: 1px solid rgba(201,169,110,.45); } .stimes__par small { display: block; font-size: .85rem; letter-spacing: .08em; opacity: .85; margin-bottom: 2px; } .stimes__par b { display: block; font-size: 1.35rem; line-height: 1.25; color: #E9D3A0; } @media (max-width: 480px) { .stimes__par b { font-size: 1.2rem; } } /* anything hidden stays hidden, even when a layout rule gives it display:grid (pickup fields on home delivery) */ [hidden], #pickup-fields[hidden] { display: none !important; } html body #cart-count, html body .cart-count, html body #stimes__x, html body .skip-link { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* chat: no green fills anywhere — white surfaces, logo-green type and thin green frames (owner, 2.10.2026) */ html body #chat-panel, html body #chat-panel :where(div, header, footer, form, section, p, span, li, ul) { background-color: #FFFFFF !important; background-image: none !important; } html body #chat-panel, html body #chat-panel * { color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: none !important; } html body #chat-panel { max-width: 100vw; box-sizing: border-box; border: 1.5px solid #11313A !important; } .vol-banner { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center; text-align: center; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #C9A468; background: linear-gradient(180deg, #24525D, #11313A); font-size: .95rem; } html body .vol-banner, html body .vol-banner * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body .vol-banner > b { font-size: 1.05rem; color: #F3DFBF !important; -webkit-text-fill-color: #F3DFBF !important; } .pdp .vol-banner, .product .vol-banner { margin: 12px 0 4px; } .gift-banner { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center; text-align: center; margin: 12px 0 4px; padding: 10px 14px; border-radius: 12px; border: 1.5px dashed #C9A468; background: #FBF7EF; font-size: .95rem; } html body .gift-banner b { font-size: 1.1rem; color: #7E602E !important; -webkit-text-fill-color: #7E602E !important; } /* a little smaller, with the purpose in bold (owner, 8.10.2026: "שייפתח מעט יותר קטן שייראה מודגש שזה לעזור להגיע למוצר ישירות") */ html body #chat-panel { width: min(380px, calc(100vw - 24px)) !important; height: min(500px, calc(100vh - 140px)) !important; } html body #chat-panel .chat__head b { font-size: 1.05rem !important; font-weight: 800 !important; } @media (max-width: 560px) { html body #chat-panel { width: calc(100vw - 20px) !important; height: min(460px, calc(100vh - 120px)) !important; right: 10px !important; } } html body #chat-panel .chat__head { border-bottom: 1.5px solid #11313A !important; box-shadow: none !important; } html body #chat-panel .chat__head svg, html body #chat-panel button svg { stroke: #11313A !important; color: #11313A !important; } html body #chat-panel .msg--bot p, html body #chat-panel .msg--user p { background: #FFFFFF !important; background-image: none !important; border: 1px solid rgba(17,49,58,.35) !important; box-shadow: none !important; } html body #chat-panel .msg--user p { background: #F1F6F4 !important; border-color: #11313A !important; } html body #chat-panel button, html body #chat-panel [data-chat-chip], html body #chat-panel .chat__send { background: #FFFFFF !important; background-image: none !important; border: 1.5px solid #11313A !important; box-shadow: none !important; } html body #chat-panel textarea, html body #chat-panel input { background: #FFFFFF !important; border: 1.5px solid #11313A !important; caret-color: #11313A; } html body #chat-panel textarea::placeholder, html body #chat-panel input::placeholder { color: #6E7F7B !important; -webkit-text-fill-color: #6E7F7B !important; } /* members' club popup before payment (owner, 4.10.2026) */ #modal-box .club-pop { display: grid; gap: 10px; text-align: center; padding: 6px 2px; } #modal-box .club-pop h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.25; text-wrap: balance; margin: 0; } #modal-box .club-pop__eyebrow { font-size: .85rem; letter-spacing: .06em; margin: 0; opacity: .8; } #modal-box .club-pop form { display: grid; gap: 10px; text-align: right; margin-top: 6px; } #modal-box .club-pop .btn { width: 100%; } .summary .club-row span:last-child { font-weight: 800; } /* atmosphere strip on the home page — runs on its own, pauses on touch/hover (owner, 4.10.2026) */ .amb { padding-block: 28px 8px; overflow: hidden; direction: ltr; } .amb__head { direction: rtl; text-align: center; padding-inline: 16px; margin-bottom: 14px; } .amb__head h2 { margin: 0 0 4px; font-size: clamp(1.4rem, 5vw, 2rem); } .amb__head p { margin: 0; } .amb__track { display: flex; width: max-content; direction: ltr; animation: amb-run 90s linear infinite; } .amb:hover .amb__track, .amb:active .amb__track { animation-play-state: paused; } .amb__row { display: flex; gap: 12px; padding-inline-end: 12px; } .amb__row a { position: relative; display: block; width: clamp(200px, 44vw, 300px); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; } .amb__row img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .amb__row a:hover img { transform: scale(1.04); } .amb__row span { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 10px 10px; text-align: center; direction: rtl; font-weight: 800; background: linear-gradient(0deg, rgba(17,49,58,.75), rgba(17,49,58,0)); } html body .amb__row span { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } @keyframes amb-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .amb__track { animation: none; overflow-x: auto; width: auto; } } html body #chat-panel .msg__link, html body #chat-panel a.btn { background: #FFFFFF !important; background-image: none !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; border: 1.5px solid #11313A !important; box-shadow: none !important; } /* mezuzah bundle offer popup */ #modal-box .mz-pop { display: grid; gap: 10px; text-align: center; } #modal-box .mz-pop h2 { margin: 0; font-size: clamp(1.4rem, 5vw, 1.9rem); text-wrap: balance; } #modal-box .mz-pop p { margin: 0; } #modal-box .mz-pop__sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 6px; } #modal-box .mz-pop__sets a { display: grid; gap: 4px; justify-items: center; background: #FFFFFF; border-radius: 6px; padding: 6px; text-decoration: none; } #modal-box .mz-pop__sets img { width: 100%; height: 110px; object-fit: contain; } html body #modal-box .mz-pop__sets span, html body #modal-box .mz-pop__sets b { color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-size: .8rem; line-height: 1.25; } #modal-box .mz-pop .btn { width: 100%; } /* bundle saving line */ .save-line { margin: 4px 0 0; font-weight: 800; font-size: .95rem; color: #11313A; } .gset__price s, .pdp__price s { margin-inline-start: 8px; opacity: .55; font-weight: 600; font-size: .8em; } /* cart: suggestions and the quantity stepper — white with green type, readable (owner, 4.10.2026) */ html body .drawer--cart .upsell__item, html body .upsell__item { background: #FFFFFF !important; background-image: none !important; border: 1.5px solid rgba(17,49,58,.35) !important; box-shadow: 0 2px 8px rgba(17,49,58,.08) !important; } html body .upsell__item, html body .upsell__item * { color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: none !important; } html body .upsell__item .ship-was, html body .upsell__item s { opacity: .55; } html body .upsell__item .btn, html body .upsell__item button { background: linear-gradient(180deg, #24525D, #11313A) !important; border: 1px solid #C9A961 !important; } html body .upsell__item .btn, html body .upsell__item .btn *, html body .upsell__item button, html body .upsell__item button * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body .qty { background: #FFFFFF !important; background-image: none !important; border: 1.5px solid #11313A !important; } html body .qty button, html body .qty input, html body .qty span { background: #FFFFFF !important; color: #11313A !important; -webkit-text-fill-color: #11313A !important; } /* main menu: every tab visible — wraps to a second centred line instead of running off the screen (owner, 4.10.2026) */ html body nav.nav ul { flex-wrap: wrap !important; justify-content: center !important; column-gap: 18px !important; row-gap: 2px !important; } html body nav.nav a { font-size: 15px !important; white-space: nowrap; } @media (min-width: 1000px) { html body .header__inner > nav.nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding-block: 2px 8px; } html body nav.nav ul { column-gap: 16px !important; } } /* cart suggestions: green rows, bold white type with a soft shadow; the button white with green type (owner, 4.10.2026) */ html body .drawer--cart .upsell__item, html body .upsell__item { background: linear-gradient(180deg, #24525D, #11313A) !important; border: 1px solid #C9A961 !important; box-shadow: 0 3px 10px rgba(17,49,58,.25) !important; } html body .upsell__item, html body .upsell__item * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; } html body .upsell__item .ship-was, html body .upsell__item s { opacity: .7; font-weight: 600 !important; } html body .upsell__item .btn, html body .upsell__item button { background: #FFFFFF !important; background-image: none !important; border: 1px solid #C9A961 !important; } html body .upsell__item .btn, html body .upsell__item .btn *, html body .upsell__item button, html body .upsell__item button * { color: #11313A !important; -webkit-text-fill-color: #11313A !important; text-shadow: none !important; } html body .upsell__item img { background: #FFFFFF; border-radius: 6px; } /* bar mitzvah lessons — Noam Eliyahu (owner, 5.10.2026) */ .lessons { display: grid; gap: 18px; padding-block: 8px 40px; } .lessons__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 1.05rem; } .lessons__points li { padding: 12px 16px; border: 1px solid rgba(17,49,58,.2); border-radius: 8px; background: #FFFFFF; } .lessons__points li::before { content: '✓ '; font-weight: 900; } .lessons__quote { text-align: center; font-size: 1.15rem; font-weight: 800; margin: 0; } .lessons__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .lessons__cta .btn { min-width: 200px; } .lessons__h { text-align: center; margin: 10px 0 0; } .lessons__videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; } .lessons__videos video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #11313A; } .lessons__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lessons__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; } .lessons__more { text-align: center; margin: 0; } #modal-box .lessons-pop { display: grid; gap: 10px; text-align: center; } #modal-box .lessons-pop h2 { margin: 0; font-size: clamp(1.4rem, 5vw, 1.9rem); text-wrap: balance; } #modal-box .lessons-pop p { margin: 0; } #modal-box .lessons-pop .btn { width: 100%; } /* the site's own conversions report in #/admin (owner, 4.10.2026) */ .conv-box { margin: 26px 0 30px; padding: 18px; border: 1px solid rgba(17,49,58,.18); border-radius: 16px; background: #fff; } .conv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .conv-head h2 { font-size: 1.35rem; margin: 0; } .conv-days { display: flex; flex-wrap: wrap; gap: 6px; } .conv-days .btn { padding: 7px 14px; font-size: .85rem; } .conv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; } .conv-tile { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #F4F1EA; text-align: center; } .conv-tile b { font-size: 1.35rem; font-variant-numeric: tabular-nums; color: #11313A; } .conv-tile span { font-size: .82rem; color: #555; } .conv-box h3 { font-size: 1.05rem; margin: 18px 0 8px; } .conv-table .admin-row { grid-template-columns: 2fr repeat(5, 1fr); } html body .conv-table .admin-row--head span { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700; } .conv-doc { margin-top: 12px; font-size: .85rem; } .conv-doc code { background: #F4F1EA; padding: 1px 5px; border-radius: 4px; } @media (max-width: 760px) { .conv-table .admin-row { grid-template-columns: 1.6fr repeat(5, 1fr); font-size: .78rem; } } /* 7 October window (owner, 4.10.2026) */ html body #modal-box.modal__box--oct7 { max-width: min(460px, calc(100vw - 24px)) !important; padding: 10px !important; background: #FBF7EF !important; background-image: none !important; } html body #modal-box.modal__box--oct7::before, html body #modal-box.modal__box--oct7::after { display: none !important; } .oct7-pop { display: grid; gap: 10px; } .oct7-pop img { width: 100%; height: auto; max-height: calc(100svh - 140px); object-fit: contain; border-radius: 12px; display: block; } /* bigger product photos everywhere (owner, 4.10.2026): 4 in a row on a computer, one per row on the phone */ html body .grid.grid--compact:not(.grid--big) { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 34px 22px !important; } html body .grid--compact .card__media { aspect-ratio: 1 / 1 !important; } html body .grid--compact:not(.grid--big) .card__media img { padding: 2% !important; } html body .grid--compact .card__title { font-size: 1rem !important; } @media (max-width: 760px) { /* owner, 5.10.2026: big photos, but always at least 2 products in a row — in every category, bag sets included */ html body #main .grid.grid--compact, html body #main .grid.grid--compact.grid--big { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 10px !important; } html body #main .grid--compact .card { padding: 6px 6px 10px !important; } html body #main .grid--compact .card__title { font-size: .9rem !important; line-height: 1.35 !important; } html body #main .grid--compact .price { font-size: 1rem !important; } html body #main .grid--compact .card__quick.card__quick--below { font-size: .8rem !important; padding: 8px 4px !important; } html body #main .grid--compact .card__media img { padding: 0 !important; } html body #main .grid--compact .card__title { font-size: 1.05rem !important; } html body #main .grid--compact .price { font-size: 1.1rem !important; } html body .pdp .stage:not(.stage--hb):not(.stage--studio), html body .pdp .thumbs { max-width: 100% !important; } } html body .pdp .stage:not(.stage--hb):not(.stage--studio), html body .pdp .thumbs { max-width: 560px; } /* the product page's main photo, bigger too */ /* product cards (owner, 4.10.2026): photo → name → "הוסף לסל" → the price, centred under the button */ html body #main .card .card__quick.card__quick--below, html body .search__results .card .card__quick.card__quick--below, html body .drawer .card .card__quick.card__quick--below { position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; display: block !important; width: 100% !important; margin: 10px 0 4px !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; } html body #main .grid--compact .card, html body #main .card { padding-bottom: 12px !important; } html body #main .card .card__body { display: flex; flex-direction: column; align-items: stretch; } html body #main .card .price, html body .search__results .card .price { text-align: center !important; justify-content: center; display: block; margin-top: 4px; } html body .grid.grid--compact:not(.grid--big) { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important; } .sku-line { margin: 4px 0 0; font-size: .85rem; color: #555 !important; -webkit-text-fill-color: #555 !important; direction: rtl; font-variant-numeric: tabular-nums; } /* the simple "what to write on the product" box (owner, 6.10.2026) */ .perso--note { padding: 0 !important; border: 0 !important; background: none !important; } .note-box { display: grid; gap: 6px; margin: 14px 0; padding: 14px 16px; border: 1px solid rgba(17,49,58,.18); border-radius: 14px; background: #fff; } .note-box label { font-weight: 700; font-size: .92rem; margin-top: 4px; } .note-box label small { font-weight: 400; color: #666; } .note-box input, .note-box textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(0,0,0,.2); border-radius: 10px; font: inherit; font-size: 16px; background: #fff; } .note-box .hint-line { margin: 4px 0 0; font-size: .85rem; } /* groom bundles: every bag set / siddur on the site to choose from (owner, 5.10.2026) — a long list scrolls inside its box */ .pick-grid.pick-grid--many { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid rgba(17,49,58,.12); border-radius: 12px; } .pick-grid .pick span small { display: block; color: #24525D !important; -webkit-text-fill-color: #24525D !important; font-weight: 700; } /* groom classic → upgrade to premium (owner, 4.10.2026) */ .upgrade-box { display: grid; gap: 4px; margin: 6px 0 14px; padding: 14px 16px; border-radius: 14px; border: 2px solid #24525D; background: #F4F1EA; text-decoration: none; } .upgrade-box b { color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-size: 1.02rem; } .upgrade-box span { color: #333 !important; -webkit-text-fill-color: #333 !important; font-size: .9rem; } /* sharing a product + search by photo (owner, 4.10.2026) */ .share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; } .share-row > span { font-weight: 700; } .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid #11313A; background: #fff; color: #11313A !important; -webkit-text-fill-color: #11313A !important; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; text-decoration: none; } html body .share-btn--wa { background: #25D366 !important; border-color: #25D366; color: #fff !important; -webkit-text-fill-color: #fff !important; } html body .share-btn--ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF) !important; border: 0; color: #fff !important; -webkit-text-fill-color: #fff !important; } .shot-share { position: fixed; z-index: 9500; left: 50%; bottom: 90px; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.25); } .shot-share span { flex: 1 1 200px; font-weight: 700; } .shot-share__x { border: 0; background: none; font-size: 1.1rem; cursor: pointer; } html body .search__photo { grid-column: 1 / -1; justify-self: start; white-space: normal; text-align: start; font-size: .92rem; margin-top: 4px; cursor: pointer; } .photo-btn { cursor: pointer; } .photo-again { display: flex; justify-content: center; margin-top: 12px; } .photo-wait { text-align: center; padding: 30px 0; font-weight: 700; } /* the "menu" tab: on the right edge, bold and easy to see (owner, 4.10.2026) */ html body .ftabs-launch { left: auto !important; right: 0 !important; top: 46% !important; writing-mode: horizontal-tb !important; flex-direction: column; gap: 4px !important; padding: 14px 12px !important; border-radius: 16px 0 0 16px !important; border: 0 !important; background: linear-gradient(180deg, #24525D, #11313A) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: -4px 6px 18px rgba(17,49,58,.38) !important; font-weight: 700 !important; animation: ftabs-nudge 3.5s ease-in-out 2s 3; } html body .ftabs-launch span { font-size: 1.7rem !important; line-height: 1; color: #fff !important; -webkit-text-fill-color: #fff !important; } html body .ftabs-launch em { display: block !important; font-size: .78rem !important; letter-spacing: .5px; color: #fff !important; -webkit-text-fill-color: #fff !important; } @keyframes ftabs-nudge { 0%, 80%, 100% { transform: translateY(-50%); } 88% { transform: translate(-6px, -50%); } } html body .header__menu svg { stroke-width: 2.3 !important; width: 28px !important; height: 28px !important; } /* the header's ☰ a little bolder too */ @media (max-width: 760px) { html body .ftabs-launch { padding: 12px 10px !important; } html body .ftabs-launch span { font-size: 1.55rem !important; } } /* the Shabbat-times / weekly-portion pop-up and the Shabbat screen were taller than a phone and couldn't scroll (owner, 9.10.2026) */ .stimes { overflow-y: auto; -webkit-overflow-scrolling: touch; place-items: safe center; } .stimes__box { max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #shabbat-lock { overflow-y: auto; -webkit-overflow-scrolling: touch; place-items: safe center; } #shabbat-lock .sl-box { padding-block: 12px; } /* housewarming bundle collage: never cut the bottom row of products — the stage grows with its content (owner, 11.10.2026) */ html body .pdp .stage.stage--hb { max-height: none !important; height: auto !important; overflow: visible !important; } html body .pdp .stage.stage--hb .hb-fig img { max-height: none !important; height: auto !important; } /* rabbi window: the WhatsApp button sits in the middle of the window, under the title — not on top of the photo (owner, 11.10.2026) */ #modal-box .rav-pop .rav-wa { position: static !important; transform: none !important; opacity: 1 !important; animation: none !important; margin: 6px auto 8px !important; justify-content: center; width: min(100%, 340px) !important; max-width: 100% !important; padding: 14px 20px !important; } #modal-box .rav-pop .rav-wa b { font-size: 1.05rem; } /* language button — Hebrew / English (owner, 11.10.2026) */ .lang-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 11px; border: 1.5px solid #24525D; border-radius: 99px; background: #fff; color: #11313A !important; -webkit-text-fill-color: #11313A !important; font: 700 .82rem/1 inherit; cursor: pointer; white-space: nowrap; align-self: center; } .lang-btn:hover { background: #F1F6F4; } @media (max-width: 520px) { .lang-btn { padding: 0 8px; font-size: .74rem; min-height: 32px; } .lang-btn span { display: none; } } html.lang-en body { direction: ltr; text-align: left; } html.lang-en [dir="rtl"]:not([data-noi18n]) { direction: ltr; } /* upgradeable gift boxes on phones (owner, 12.10.2026): the box collage was 2 huge photos per row inside a sticky gallery taller than the screen, so the page could not be scrolled past it. Now: the gallery scrolls with the page, and the products show as a compact grid. */ @media (max-width: 900px) { html body .pdp .gallery:has(.stage--hb) { position: static !important; top: auto !important; } html body .pdp .stage.stage--hb { padding: 10px 6px !important; } html body .pdp .stage--hb .hb-stage { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px 6px !important; align-items: start !important; } html body .pdp .stage--hb .hb-stage .hb-fig { width: auto !important; min-width: 0; padding: 0 !important; gap: 2px !important; } html body .pdp .stage--hb .hb-stage .hb-fig img { width: 100% !important; height: auto !important; aspect-ratio: 1 !important; object-fit: contain !important; } html body .pdp .stage--hb .hb-stage .hb-fig span { font-size: .66rem !important; letter-spacing: 0 !important; line-height: 1.2 !important; text-align: center; } html body .pdp .stage--hb .hb-stage .hb-fig em { font-size: .62rem !important; } html body .pdp .stage--hb .hb-focus { max-width: 240px; margin-bottom: 10px; } html body .pdp .stage--hb .hb-focus img { max-height: 220px !important; } } @media (max-width: 360px) { html body .pdp .stage--hb .hb-stage { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* language button: short label on phones so the logo keeps its place (owner's screenshot, 12.10.2026) */ .lang-btn i { font-style: normal; } .lang-btn .lang-short { display: none; } @media (max-width: 600px) { .lang-btn .lang-long { display: none; } .lang-btn .lang-short { display: inline; } .lang-btn { padding: 0 9px !important; min-width: 0; } } /* "N last units" on a product page — big and bold (owner, 12.10.2026: "תגדילי ותדגישי את הנשארו 50 יחידות") */ html body .restock.restock--last { border: 2.5px solid #B3261E !important; background: #FFF1EF !important; padding: 16px !important; text-align: center; justify-items: center; } html body .restock.restock--last .restock__tag { justify-self: center; padding: 8px 22px !important; background: #B3261E !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: clamp(1.3rem, 5vw, 1.8rem) !important; font-weight: 900 !important; letter-spacing: 0 !important; border-radius: 10px; transform: none !important; position: static !important; } html body .restock.restock--last p { font-size: 1.08rem !important; font-weight: 800 !important; color: #8A1C15 !important; -webkit-text-fill-color: #8A1C15 !important; margin: 0; } html body .units-big { margin: 12px 0 10px; padding: 11px 18px; border-radius: 12px; background: #B3261E; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 900; font-size: clamp(1.3rem, 5.2vw, 1.8rem); line-height: 1.2; text-align: center; box-shadow: 0 8px 22px rgba(179, 38, 30, .3); } /* gift-box options: all of them as small squares with the name, about 5 in a row on a phone (owner, 12.10.2026) */ html body .pdp .pick-grid.pick-grid--hball { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important; gap: 6px !important; max-height: none !important; overflow: visible !important; } html body .pdp .pick-grid--hball .pick { padding: 0 !important; min-width: 0; align-content: start; } html body .pdp .pick-grid--hball .pick img { width: 100% !important; aspect-ratio: 1 !important; height: auto !important; object-fit: contain !important; } html body .pdp .pick-grid--hball .pick span { font-size: .62rem !important; line-height: 1.25 !important; padding: 3px 2px 4px !important; overflow-wrap: anywhere; display: block; } html body .pdp .pick-grid--hball .pick span small { font-size: .62rem !important; margin-top: 2px; } html body .pdp .pick-grid--hball .pick[aria-checked="true"] { outline: 2.5px solid #24525D; outline-offset: -1px; } @media (min-width: 700px) { html body .pdp .pick-grid.pick-grid--hball { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; } html body .pdp .pick-grid--hball .pick span, html body .pdp .pick-grid--hball .pick span small { font-size: .72rem !important; } } /* every siddur as its own clear choice — large tile with the cover and its name (owner, 13.10.2026) */ html body .pdp .swatches.swatches--big { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 8px; } html body .pdp .swatches--big .swatch--img { width: auto !important; height: auto !important; display: grid; gap: 4px; padding: 4px 4px 6px !important; border: 1.5px solid #cfd8d6 !important; border-radius: 10px !important; overflow: visible; } html body .pdp .swatches--big .swatch--img img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; } html body .pdp .swatches--big .swatch--img::after { content: attr(aria-label); font-size: .74rem; font-weight: 700; line-height: 1.25; color: #11313A; text-align: center; } html body .pdp .swatches--big .swatch--img[aria-checked="true"] { border: 2.5px solid #24525D !important; background: #F1F6F4 !important; box-shadow: 0 4px 12px rgba(17,49,58,.18); } /* owner's photos and films on a product page (owner, 13.10.2026) */ .pmedia { margin: 12px 0 4px; } .pmedia > b { display: block; font-size: .9rem; margin-bottom: 6px; } .pmedia__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; } .pmedia__t { position: relative; flex: 0 0 78px; width: 78px; height: 104px; padding: 0; border: 1.5px solid #cfd8d6; border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; } .pmedia__t img { width: 100%; height: 100%; object-fit: cover; display: block; } .pmedia__t span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.5rem; background: rgba(0, 0, 0, .22); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); } /* pre-order line (owner, 13.10.2026): the delivery date of the "בת ישראל" siddurim, on the product page and in the cart */ html body .pre-line { margin: 6px 0 12px; padding: 9px 14px; border-radius: 10px; background: #F4EEE2; color: #17333A !important; -webkit-text-fill-color: #17333A !important; font-weight: 700; font-size: .98rem; line-height: 1.5; text-align: center; } html body .pre-line--cart { margin: 0 0 10px; font-size: .9rem; } /* #/events — Judaica station for events (owner, 14.10.2026) */ html body .ev-page { max-width: 760px; margin: 0 auto; padding: 34px 16px 60px; } html body .ev-head { text-align: center; margin-bottom: 22px; } html body .ev-head h1 { margin: 0 0 8px; font-size: 2rem; } html body .ev-head p { margin: 0; line-height: 1.7; } html body .ev-film video { width: 100%; max-height: 640px; aspect-ratio: 9 / 16; object-fit: cover; display: block; margin: 0 auto 26px; background: #eee; } html body .ev-form, html body .ev-done { background: #F7F2E9; padding: 22px 18px; border-radius: 14px; } html body .ev-form h2, html body .ev-done h2 { margin: 0 0 4px; text-align: center; } html body .ev-sub { text-align: center; margin: 0 0 16px; } html body .ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } html body .ev-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .92rem; } html body .ev-form input, html body .ev-form select, html body .ev-form textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #d9cfbf; border-radius: 10px; font: inherit; background: #fff; } html body .ev-err { color: #B3261E; font-weight: 700; margin: 10px 0 0; } html body .ev-btn { width: 100%; margin-top: 14px; } html body .ev-done { text-align: center; } @media (max-width: 560px) { html body .ev-grid { grid-template-columns: 1fr; } } /* admin screens without the shop menu (owner, 14.10.2026) */ html.is-admin .header .nav, html.is-admin .header__menu, html.is-admin .ftabs-launch { display: none !important; } html body .adm-back { max-width: 1150px; margin: 10px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; } html body .adm-back a { text-decoration: none; padding: 5px 12px; border-radius: 20px; background: #F1E8D6; color: #11313A !important; -webkit-text-fill-color: #11313A !important; font-weight: 700; } .pdp .buy[hidden] { display: none !important; } /* owner, 14.10.2026: bundle options by price level — small squares, cheapest first */ .hb-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin: 8px 0 10px; } .hb-level { display: grid; gap: 2px; padding: 8px 6px; border: 1.5px solid #d9d2c5; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: #11313A; text-align: center; } .hb-level b { font-size: .82rem; line-height: 1.25; } .hb-level small { font-size: .7rem; color: #5B6360; } .hb-level.is-on { border: 2px solid #11313A; background: #11313A; color: #fff; } .hb-level.is-on b, .hb-level.is-on small { color: #fff !important; -webkit-text-fill-color: #fff !important; } .hb-tag { display: block; font-style: normal; font-size: .62rem; font-weight: 800; color: #fff; background: #B08D57; border-radius: 10px; padding: 1px 6px; margin: 0 auto 2px; width: max-content; } .hb-tag--fit { background: #24525D; } /* the "load more options" button stands out (owner, 14.10.2026) */ .hb-more { display: block !important; width: 100%; margin: 10px 0 4px !important; padding: 12px 16px !important; border-radius: 30px !important; background: linear-gradient(135deg, #24525D, #11313A) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800 !important; font-size: .95rem !important; text-decoration: none !important; border: 1px solid #C9A468 !important; box-shadow: 0 4px 12px rgba(17,49,58,.2); } /* bride add-on in groom bundles (owner, 14.10.2026) */ .bride-addon .pick[aria-checked="true"] { border-color: #11313A !important; box-shadow: 0 0 0 2px #11313A; } .bride-gift { margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; background: #FBF3E2; border: 1.5px solid #B08D57; color: #11313A; font-weight: 700; } /* the new menu (owner, 15.10.2026): events first with a small "מומלץ" circle */ .nav-rec { position: relative; } .nav-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-inline-start: 4px; border-radius: 50%; background: #24525D; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: .55rem; font-weight: 800; line-height: 1; vertical-align: middle; border: 1px solid #C9A468; } .mobile-nav .nav-badge { width: 38px; height: 38px; font-size: .6rem; } /* "כל מיני" page */ .more-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .more-cat { display: grid; gap: 8px; align-content: start; } .more-cat__top { display: grid; gap: 8px; text-decoration: none; color: #111 !important; } .more-cat__top img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f4f4f4; } .more-cat__top b { font-size: 1.05rem; font-weight: 700; } .more-cat__kids { display: flex; flex-wrap: wrap; gap: 6px; } .more-cat__kids a { font-size: .8rem; padding: 4px 10px; border: 1px solid #ddd; border-radius: 20px; color: #111 !important; text-decoration: none; } .more-cat__kids a:hover { border-color: #24525D; } /* the rabbi's page */ .rav-page .rav-pop { max-width: 560px; margin: 0 auto; } .rav-page .rav-wa span { display: grid; text-align: start; } /* owner, 15.10.2026: "all the categories go into the hamburger menu — no row on top" (every screen size) */ html:not(.is-admin) .header .nav { display: none !important; } html:not(.is-admin) .header__menu { display: inline-flex !important; } /* hamburger menu 1:1 like Einav Bublil's (owner, 15.10.2026): white panel from the side, a search bar on top, then one plain row after another with thin lines */ .drawer--nav .drawer__panel { background: #fff !important; padding: 0 !important; width: min(82vw, 380px) !important; box-shadow: none !important; } .drawer--nav .drawer__head { padding: 10px 16px !important; border-bottom: 0 !important; } .drawer--nav .drawer__head img { height: 42px; width: auto; } .mobile-nav { list-style: none; margin: 0 !important; padding: 0 !important; display: block !important; columns: auto !important; } .mobile-nav li { display: block !important; margin: 0 !important; border-bottom: 1px solid #ececec; } .mobile-nav li.sep { margin-top: 0 !important; border-top: 0 !important; } .mobile-nav li > a, .mobile-nav li > button { display: flex !important; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 15px 22px !important; font-size: 15px !important; font-weight: 500 !important; color: #111 !important; -webkit-text-fill-color: #111 !important; background: none !important; border: 0 !important; border-radius: 0 !important; text-decoration: none !important; text-align: start; box-shadow: none !important; font-family: inherit; } .mobile-nav li.sub > a { padding-inline-start: 22px !important; font-size: 15px !important; color: #111 !important; } .mobile-nav li > a:hover { background: #f7f7f7 !important; } .mobile-nav .mn-search { box-shadow: 0 2px 6px rgba(0,0,0,.06); border-bottom: 0; margin-bottom: 4px !important; } .mobile-nav .mn-search button { justify-content: space-between !important; padding: 18px 22px !important; font-size: 16px !important; color: #555 !important; -webkit-text-fill-color: #555 !important; cursor: pointer; } .mobile-nav .mn-search svg { width: 22px; height: 22px; fill: none; stroke: #555; stroke-width: 1.5; } .mobile-nav .nav-badge { width: 30px; height: 30px; font-size: .5rem; } /* the phone header like Einav's: menu + cart only (search lives in the menu) */ @media (max-width: 820px) { html.theme-eb:not(.is-admin) .header__actions a[href="#/wishlist"], html.theme-eb:not(.is-admin) .header__actions [data-action="open-search"] { display: none !important; } } /* hamburger fits one screen (owner, 15.10.2026): tighter rows; the other categories and the info links as small two-column links */ .mobile-nav li > a, .mobile-nav li > button { padding: 10px 22px !important; font-size: 14.5px !important; } .mobile-nav .mn-search button { padding: 12px 22px !important; } .mobile-nav .mn-kids, .mobile-nav .mn-info { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 6px 22px 8px; } .mobile-nav .mn-kids a, .mobile-nav .mn-info a { display: block !important; padding: 5px 0 !important; font-size: 13px !important; font-weight: 400 !important; color: #444 !important; -webkit-text-fill-color: #444 !important; text-decoration: none; } .mobile-nav .mn-info { border-bottom: 0 !important; } .mobile-nav .mn-info a { color: #777 !important; -webkit-text-fill-color: #777 !important; font-size: 12px !important; } .drawer--nav .drawer__head { padding: 6px 16px !important; } .drawer--nav .drawer__head img { height: 34px; } /* EB menu — final override of the older dark/gold menu styles (owner, 15.10.2026) */ html body .drawer--nav ul.mobile-nav { display: block !important; padding: 0 !important; gap: 0 !important; grid-template-columns: none !important; overflow: auto; } html body .drawer--nav ul.mobile-nav > li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #ececec !important; background: none !important; } html body .drawer--nav ul.mobile-nav > li > a, html body .drawer--nav ul.mobile-nav > li > button { min-height: 0 !important; height: auto !important; padding: 10px 22px !important; justify-content: flex-start !important; text-align: start !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #111 !important; -webkit-text-fill-color: #111 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; } html body .drawer--nav ul.mobile-nav a::before, html body .drawer--nav ul.mobile-nav a::after { display: none !important; content: none !important; } html body .drawer--nav ul.mobile-nav > li > :not(a):not(button) { display: none !important; } html body .drawer--nav ul.mobile-nav > li.mn-kids, html body .drawer--nav ul.mobile-nav > li.mn-info { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 6px 22px 8px !important; } html body .drawer--nav ul.mobile-nav > li.mn-kids > a, html body .drawer--nav ul.mobile-nav > li.mn-info > a { display: block !important; padding: 5px 0 !important; font-size: 13px !important; font-weight: 400 !important; color: #444 !important; -webkit-text-fill-color: #444 !important; } html body .drawer--nav ul.mobile-nav > li.mn-info > a { font-size: 12px !important; color: #777 !important; -webkit-text-fill-color: #777 !important; } html body .drawer--nav ul.mobile-nav > li.mn-search > button { justify-content: space-between !important; padding: 12px 22px !important; color: #555 !important; -webkit-text-fill-color: #555 !important; font-size: 15px !important; } html body .drawer--nav ul.mobile-nav > li.mn-search { box-shadow: 0 2px 6px rgba(0,0,0,.06); border-bottom: 0 !important; } html body .drawer--nav ul.mobile-nav > li.has-sub > button, html body .drawer--nav ul.mobile-nav .mnav-sub { display: none !important; }