/* ========================================================================= ONE Piece — homepage ------------------------------------------------------------------------- Split out of style.css so it can be loaded on the front end for is_front_page() only — every other page was paying for ~7KB of CSS it could never use — AND handed to the block editor, so the owner sees the real design while she edits instead of a column of unstyled text. That second one was the actual complaint: the homepage was editable but unreadable. Every rule is scoped to the homepage wrapper, design tokens included. The wrapper is spelled :is(#ophome, .ophome, body[data-resizable-iframe-connected]) because the homepage has to be styled in THREE different documents, and it is a different element in each: front end #ophome the wrapper block's anchor renders as an id editor canvas .ophome the anchor does NOT render here — the block list overwrites id with the block's own client id (measured: block-1db501fe-…), so an ID selector can never match. Hence the matching className on the same block. block preview body[…] core/html previews inside a sandboxed iframe with its own document, containing the section markup and nothing above it. That body is the only ancestor available. :is() takes the specificity of its most specific argument, so all three score (1,0,0) — exactly what #ophome scored. The cascade balance against theme.json global styles and core block CSS is unchanged, which a bare .ophome would have quietly lost. The sandbox arm is why these styles are registered only on the front page's edit screen (see functions.php): body[data-resizable-iframe-connected] is every SandBox in the editor, including the ones core/embed uses, and an embedded video elsewhere on the site should not inherit homepage tokens. ========================================================================= */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]){ --canvas:#F6F1E8;--surface:#FFFFFF;--surface-2:#EFE7D8; --ink:#2A2320;--ink-soft:#655B4C;--line:#E4D9C6; --brass:#B08542;--brass-deep:#7D5A20;--bordeaux:#8A2C3B;--wood:#9C7A4E;--sand:#EADFC9; --btn-bg:#2A2320;--btn-ink:#F6F1E8; --shadow:0 22px 60px rgba(42,35,32,.18);--shadow-sm:0 8px 22px rgba(42,35,32,.12); --radius:18px;--ease:cubic-bezier(.2,.7,.2,1); --fd:'Frank Ruhl Libre','David Libre',serif;--fb:'Heebo','Assistant',Arial,sans-serif; direction:rtl;background:var(--canvas);color:var(--ink);font-family:var(--fb);line-height:1.65;letter-spacing:0;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative; } :is(#ophome,.ophome,body[data-resizable-iframe-connected]) *{box-sizing:border-box} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) h1,:is(#ophome,.ophome,body[data-resizable-iframe-connected]) h2,:is(#ophome,.ophome,body[data-resizable-iframe-connected]) h3{font-family:var(--fd);line-height:1.13;font-weight:700;margin:0;color:var(--ink);text-wrap:balance} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) p{margin:0} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) img{max-width:100%;display:block} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) a{color:inherit;text-decoration:none} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .ltr{direction:ltr;unicode-bidi:isolate} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .wrap{max-width:1220px;margin:0 auto;padding:0 24px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) :focus-visible{outline:3px solid var(--brass-deep);outline-offset:3px;border-radius:5px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;font-family:var(--fb);font-weight:700;font-size:1.04rem;padding:16px 34px;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);min-height:54px;box-shadow:0 8px 20px rgba(42,35,32,.16);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background-color .2s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .btn:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(42,35,32,.24)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .btn:active{transform:translateY(-1px)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .btn.wa{background:#25623f;color:#fff} /* The WhatsApp glyph, as a mask rather than an inline inside the link. Reason: the link now lives in a core/paragraph so its label is editable, and RichText strips tags it does not know — the would vanish the first time she edited the wording. currentColor keeps it matching whatever the button is (.custom .btn repaints this one cream-on-dark). The path is the same one the inline icon used; stroke is opaque black because a CSS mask reads alpha. */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .btn.wa::before{content:"";flex:0 0 18px;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.6 7.1L4 20l1.5-4.2A8 8 0 1 1 20 11.5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.6 7.1L4 20l1.5-4.2A8 8 0 1 1 20 11.5Z'/%3E%3C/svg%3E") center/contain no-repeat} /* The outline variant. Was four declarations in a style="" attribute on the "הסיפור המלא" link — the kind of thing that does not survive being edited. */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .btn.ghost:hover{border-color:var(--brass);box-shadow:none} /* The

that carries a .btn in converted sections exists only to be a block; it must not add the paragraph rhythm around it. */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .op-btnrow{margin:0} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .ic{display:inline-flex;vertical-align:-3px}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .ic svg{display:block} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .kicker{font-size:.82rem;font-weight:700;letter-spacing:0;color:var(--brass-deep);margin-bottom:12px;display:inline-flex;align-items:center;gap:9px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .kicker::before{content:"";width:28px;height:1.5px;background:var(--brass)} /* hero: one warm field, a row of real mezuzahs (grounded) on the left, copy on the right */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(84vh,720px);overflow:hidden;padding:48px 0;background:radial-gradient(125% 125% at 42% 42%,#F8F2E4 0%,#ECDEC7 66%,#E2D3B7 100%)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__inner{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:flex;align-items:center;gap:clamp(16px,4vw,56px)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__copy{flex:0 0 42%;display:flex;flex-direction:column;justify-content:center} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__copyin{width:100%;text-align:right} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero h1{font-size:clamp(3rem,7vw,5.4rem);color:var(--ink);letter-spacing:-.01em;line-height:.97} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero h1 .lite{font-weight:300;display:block} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero h1 .heavy{font-weight:900;color:var(--bordeaux);display:block} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__sub{font-size:clamp(1.06rem,2.1vw,1.26rem);color:var(--ink-soft);max-width:32ch;margin:22px 0 30px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__link{color:var(--brass-deep);font-weight:700;text-underline-offset:3px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__link:hover{text-decoration:underline} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__meta{margin-top:30px;display:flex;gap:12px 22px;flex-wrap:wrap;font-size:.9rem;color:var(--ink-soft);border-top:1px solid rgba(42,35,32,.14);padding-top:18px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__meta span{display:inline-flex;align-items:center;gap:7px}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__meta b{color:var(--brass-deep)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hero__stage{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.8vw,28px)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz{position:relative;transform-origin:bottom center;animation:hsway 7s ease-in-out infinite} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz img{display:block;width:auto;filter:drop-shadow(0 14px 20px rgba(40,24,10,.4));animation:opprod 1s var(--ease) both} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:84%;height:15px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(28,16,7,.4),transparent 72%);filter:blur(5px)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(1) img{height:min(50vh,400px);animation-delay:.1s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(2) img{height:min(54vh,432px);animation-delay:.22s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(3) img{height:min(47vh,376px);animation-delay:.34s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(4) img{height:min(52vh,414px);animation-delay:.46s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(1){animation-delay:0s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(2){animation-delay:1.4s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(3){animation-delay:.6s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .hmz:nth-child(4){animation-delay:2s} @keyframes opprod{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes hsway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .up{opacity:0;transform:translateY(24px);animation:opup .9s var(--ease) forwards} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .up.d1{animation-delay:.1s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .up.d2{animation-delay:.2s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .up.d3{animation-delay:.32s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .up.d4{animation-delay:.46s} @keyframes opup{to{opacity:1;transform:none}} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .marq{background:var(--ink);color:var(--canvas);overflow:hidden;white-space:nowrap;padding:13px 0} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .marq__t{display:inline-block;font-family:var(--fd);font-size:1.12rem;font-weight:500;animation:opmarq 30s linear infinite} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .marq__t b{color:var(--brass)}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .marq__t span{margin:0 20px;opacity:.45} @keyframes opmarq{to{transform:translateX(50%)}} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .sec{padding:88px 0} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .sec.tint{background:var(--surface-2)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .shead{margin-bottom:38px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .shead h2{font-size:clamp(2rem,4.6vw,3rem)} /* Excludes the two paragraphs that are NOT the lede. Once a section is converted to blocks the kicker and the "more" link become

(a core/paragraph always renders a

), and this rule would otherwise override .kicker's font-size and push the link down by 10px. Sections still stored as raw HTML are unaffected — their kicker is a

, so the :not() never matches anything that used to match. */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .shead p:not(.kicker):not(.shead__more){color:var(--ink-soft);max-width:48ch;margin-top:10px;font-size:1.04rem} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .shead a{color:var(--brass-deep);font-weight:700;white-space:nowrap;text-underline-offset:2px;transition:text-underline-offset .2s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .shead a:hover{text-decoration:underline;text-underline-offset:5px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .rev{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .rev.in{opacity:1;transform:none} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .stg>:nth-child(2){transition-delay:.08s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .stg>:nth-child(3){transition-delay:.16s}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .stg>:nth-child(4){transition-delay:.24s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;display:block;box-shadow:0 4px 14px rgba(42,35,32,.06)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:var(--brass)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card__media{position:relative;overflow:hidden;background:#efe7d8} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card__media img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s var(--ease)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card.stand .card__media img{aspect-ratio:1/1} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card:hover .card__media img{transform:scale(1.05)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card__media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -42px 42px -32px rgba(30,18,8,.28)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .badge{position:absolute;inset-block-start:12px;inset-inline-start:12px;background:var(--bordeaux);color:#fff;font-size:.73rem;font-weight:700;padding:6px 12px;border-radius:999px;z-index:2;box-shadow:0 4px 10px rgba(138,44,59,.3)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card__body{padding:16px 17px 19px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .card__name{font-weight:600;font-size:.98rem;margin-bottom:10px;min-height:2.6em;color:var(--ink)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .price{display:flex;align-items:baseline;gap:9px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .price .now{font-family:var(--fd);font-weight:700;font-size:1.34rem;color:var(--ink)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .price .was{font-size:.9rem;color:var(--ink-soft);text-decoration:line-through} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .uniq{font-size:.79rem;color:var(--bordeaux);font-weight:600;margin-top:9px;display:flex;align-items:center;gap:6px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .uniq::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bordeaux)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband{position:relative;overflow:hidden;min-height:54vh;display:flex;align-items:center;color:#F5EFE3;background:#1c150c} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to left,rgba(18,12,6,.82),rgba(18,12,6,.32) 58%,rgba(18,12,6,.5))} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband .wrap{position:relative;z-index:2} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband .kicker{color:#e6c48a}:is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband .kicker::before{background:#e6c48a} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband h2{color:#fff;font-size:clamp(1.9rem,4.4vw,2.9rem);max-width:20ch} /* :not(.kicker) for the third time — see .shead p. In block form the kicker is a

, and a tag-qualified rule outranks the class rule that styles it. */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .vidband p:not(.kicker){color:#ece3d1;max-width:42ch;margin-top:14px;font-size:1.1rem} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .wall{column-count:4;column-gap:16px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .wall a{display:block;margin-bottom:16px;break-inside:avoid;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 6px 18px rgba(42,35,32,.12);transition:transform .3s var(--ease),box-shadow .3s} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .wall a:hover{transform:translateY(-4px);box-shadow:var(--shadow)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .wall img{width:100%;transition:transform .5s var(--ease)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .wall a:hover img{transform:scale(1.04)} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .stats{border-radius:24px;padding:56px 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;box-shadow:var(--shadow);background-size:cover;background-position:center} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .stat .n{font-family:var(--fd);font-weight:300;font-size:clamp(2.8rem,7vw,4.4rem);line-height:1;color:#e8c07a;font-variant-numeric:tabular-nums} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .stat .n b{font-weight:900} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .stat .l{margin-top:10px;font-size:1rem;color:#ece2ce} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .split h2{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:18px} /* Same exclusion as .shead p, for the same reason: in block form the kicker and the button row are

, and this rule outranks .kicker on font-size. */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .split p:not(.kicker):not(.op-btnrow){color:var(--ink-soft);font-size:1.07rem;margin-bottom:14px} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .portrait{aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#efe7d8} :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .portrait img{width:100%;height:100%;object-fit:cover} /* core/image wraps the in a

, which would break the img's height:100% (it would resolve against an auto-height figure and object-fit would have nothing to cover). Pass the portrait's 4/5 box through. */ :is(#ophome,.ophome,body[data-resizable-iframe-connected]) .portrait .wp-block-image{height:100%;margin:0} /* The photo is no longer a background-image on this element — it is a real core/image behind the copy, exactly like .vidband's