/* ========================================================================== IBD Delta, design system layer Tokens live in theme.json; this file holds only what theme.json cannot express. ========================================================================== */ /* Border-box reset. WordPress block themes ship no global box-sizing rule, so any padded box that a grid or flex parent stretches ends up taller than its track by exactly its padding + border. That is what pushed the package cards and the testimonial cards into each other on narrow viewports. */ *,*::before,*::after{box-sizing:border-box} :root{ --ibd-ink: var(--wp--preset--color--contrast); --ibd-ink-2: var(--wp--preset--color--contrast-2); --ibd-muted: var(--wp--preset--color--muted); --ibd-faint: #78705F; --ibd-line: var(--wp--preset--color--line); --ibd-hair: #F1EBE1; --ibd-primary: var(--wp--preset--color--primary); --ibd-primary-2: var(--wp--preset--color--primary-2); --ibd-accent: var(--wp--preset--color--accent); --ibd-accent-2: var(--wp--preset--color--accent-2); --ibd-soft: var(--wp--preset--color--soft); --ibd-tint: #EFE8D9; --ibd-panel: var(--wp--preset--color--panel); --ibd-surface: var(--wp--preset--color--surface); --ibd-r: 10px; --ibd-rs: 8px; --ibd-sh: 0 1px 2px rgba(35,32,25,.045), 0 12px 28px -20px rgba(60,46,24,.28); --ibd-shl: 0 1px 2px rgba(35,32,25,.04); } body{-webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ---------- brand marks ---------- */ .ibd-gem{width:var(--gem,19px);height:var(--gem,19px);flex:none;color:var(--ibd-accent);display:inline-block;line-height:0} .ibd-brand .ibd-gem{width:42px;height:42px;transform:rotate(7deg);transform-origin:50% 55%} .ibd-gem svg{width:100%;height:100%;display:block} /* The bullet is the logo silhouette, so the mark above a heading and the mark in the header are the same gem at two sizes. */ :root{--ibd-gem-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 9 7 4h10l4.5 5L12 20.5Z'/%3E%3C/svg%3E")} .ibd-dmd{width:13px;height:11.5px;background:currentColor;flex:none;display:inline-block; -webkit-mask:var(--ibd-gem-mask) center/contain no-repeat; mask:var(--ibd-gem-mask) center/contain no-repeat} .ibd-tri{width:0;height:0;display:inline-block;flex:none; border-inline-start:6px solid transparent;border-inline-end:6px solid transparent; border-bottom:10px solid var(--ibd-primary)} /* ---------- eyebrow label ---------- */ .ibd-label{display:inline-flex;align-items:center;gap:11px;font-size:1rem;letter-spacing:.11em; font-weight:600;color:var(--ibd-primary);text-transform:none;margin:0 0 1.3rem} .ibd-label .ibd-dmd{color:var(--ibd-accent)} .ibd-label .ibd-tri{border-bottom-color:var(--ibd-accent)} /* Latin inside Hebrew copy — same family, tuned tracking */ .ibd-en{font-weight:500;letter-spacing:.06em} /* ---------- header ---------- */ .ibd-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--wp--preset--color--base) 90%,transparent); backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .3s} .ibd-header.is-stuck{border-bottom-color:var(--ibd-line);box-shadow:0 6px 18px -16px rgba(51,39,26,.5)} .ibd-header{transition:border-color .3s,box-shadow .3s} .ibd-header .wp-block-group{transition:padding .28s ease} .ibd-brand__tag{max-height:none;opacity:1} .ibd-brand{display:flex;align-items:center;gap:12px;text-decoration:none} .ibd-brand__name{font-weight:700;font-size:1.36rem;letter-spacing:-.02em;line-height:1.24;display:block;color:var(--ibd-ink)} .ibd-brand__tag{display:block;font-size:.82rem;font-weight:400;color:var(--ibd-muted);line-height:1.35} .ibd-header .wp-block-navigation{font-size:1.02rem;font-weight:400} .ibd-header .wp-block-navigation a{color:var(--ibd-ink-2);text-decoration:none;padding-bottom:4px;position:relative} .ibd-header .wp-block-navigation a::after{content:"";position:absolute;bottom:0;inset-inline-end:0;width:0;height:1.5px; background:var(--ibd-primary);transition:width .28s} .ibd-header .wp-block-navigation a:hover{color:var(--ibd-primary)} .ibd-header .wp-block-navigation a:hover::after{width:100%} @media(max-width:920px){.ibd-header .ibd-hide-mobile{display:none}} /* the nav block keeps its own hamburger at small sizes — never hide it */ .ibd-header .wp-block-navigation{display:flex} /* ---------- cards ---------- */ .ibd-card{background:var(--ibd-surface);border:1px solid var(--ibd-line);border-radius:var(--ibd-rs); box-shadow:var(--ibd-shl);height:100%} .ibd-card--pad{padding:1.6rem 1.5rem} .ibd-card__kicker{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ibd-primary);font-weight:600;margin-bottom:.7rem} /* ---------- pull quote panel ---------- */ .ibd-panel{background:var(--ibd-panel);color:#fff;border-radius:var(--ibd-r)} .ibd-panel :where(h1,h2,h3,p){color:#fff} .ibd-panel .ibd-dim{color:#B4AB98} .ibd-panel .ibd-label{color:var(--ibd-accent-2)} /* ---------- journey ---------- */ .ibd-journey{position:relative;padding-inline-start:44px;margin-top:2.6rem} .ibd-journey::before{content:"";position:absolute;inset-inline-start:14px;top:12px;bottom:12px;width:1.5px; background:linear-gradient(var(--ibd-line),var(--ibd-primary))} .ibd-step{position:relative;padding-bottom:2.2rem;z-index:1} .ibd-step:last-child{padding-bottom:0} .ibd-step::before{content:"";position:absolute;inset-inline-start:-37px;top:8px;width:11px;height:15px; background:var(--ibd-primary);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%)} .ibd-step:last-child::before{background:var(--ibd-panel)} .ibd-step h3{margin:0 0 .35rem} .ibd-step p{margin:0;color:var(--ibd-muted)} /* ---------- promise ---------- */ .ibd-promise{position:relative;background:var(--ibd-surface);border:1px solid var(--ibd-line); border-radius:var(--ibd-r);box-shadow:var(--ibd-shl);text-align:center} .ibd-promise::before{content:"";position:absolute;top:-1px;inset-inline-start:50%;transform:translateX(50%); width:64px;height:2px;background:var(--ibd-accent)} /* ---------- package cards ---------- */ .ibd-pack{display:flex;flex-direction:column;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s} .ibd-pack:hover{transform:translateY(-3px);box-shadow:var(--ibd-sh);border-color:var(--ibd-primary)} .ibd-pack__verb{display:inline-block;background:var(--ibd-soft);color:var(--ibd-primary);font-size:1.4rem; font-weight:700;padding:.25rem 1rem;border-radius:6px;margin-bottom:1rem;align-self:flex-start;letter-spacing:-.03em} .ibd-pack__sub{display:block;font-size:.72rem;letter-spacing:.15em;color:var(--ibd-faint); text-transform:uppercase;font-weight:500;margin-bottom:.9rem} .ibd-pack__meta{margin-top:auto;padding-top:1rem;border-top:1px solid var(--ibd-hair)} .ibd-pack__price{display:block;font-size:1.4rem;font-weight:700;letter-spacing:-.03em;color:var(--ibd-ink)} .ibd-pack__note{font-size:.82rem;color:var(--ibd-muted)} .ibd-pack.is-featured{border-color:var(--ibd-accent)} .ibd-pack.is-featured::before{content:"";position:absolute;top:-1px;inset-inline:22px;height:2px;background:var(--ibd-accent)} .ibd-pack.is-featured .ibd-pack__verb{background:#F3EDE0;color:var(--ibd-primary)} /* ---------- media frame placeholder ---------- */ .ibd-frame{position:relative;border:1px solid var(--ibd-line);border-radius:var(--ibd-r);background:var(--ibd-tint); display:grid;place-items:center;overflow:hidden;aspect-ratio:4/5} .ibd-frame--square{aspect-ratio:1/1} .ibd-frame::before{content:"";position:absolute;inset:0; background:repeating-linear-gradient(-45deg,transparent 0 15px,rgba(107,83,44,.06) 15px 16px)} .ibd-frame__cap{position:relative;z-index:2;text-align:center;padding:1.5rem} .ibd-frame__cap b{display:block;font-size:.92rem;font-weight:600;color:var(--ibd-primary)} .ibd-frame__cap span{display:block;font-size:.75rem;color:var(--ibd-muted);margin-top:.4rem;line-height:1.7} .ibd-frame__cap .ibd-gem{color:var(--ibd-primary);margin-bottom:.8rem} /* ---------- real portraits ---------- */ .ibd-portrait{margin:0 0 0 auto;border-radius:var(--ibd-r);overflow:hidden;background:var(--ibd-tint); border:1px solid var(--ibd-line);line-height:0;max-width:400px} .ibd-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;aspect-ratio:4/5} .ibd-portrait--square img{aspect-ratio:1/1} @media(max-width:880px){.ibd-portrait{max-width:330px;margin-inline:auto}} @media(max-width:520px){.ibd-portrait{max-width:250px}} /* ---------- testimonials ---------- */ .ibd-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem} @media(max-width:900px){.ibd-quotes{grid-template-columns:1fr}} .ibd-quote{margin:0;padding:1.7rem 1.6rem 1.5rem;display:flex;flex-direction:column;position:relative} .ibd-quote__pillar{display:inline-block;align-self:flex-start;font-size:.68rem;letter-spacing:.15em; text-transform:uppercase;font-weight:600;color:var(--ibd-primary);background:var(--ibd-soft); padding:.25rem .7rem;border-radius:var(--ibd-rb,6px);margin-bottom:1rem} .ibd-quote blockquote{margin:0;padding:0;border:0;font-size:1.02rem;line-height:1.72;color:var(--ibd-ink-2);flex:1} .ibd-quote blockquote em{font-style:normal;font-weight:600;color:var(--ibd-ink); box-shadow:inset 0 -0.42em 0 rgba(169,136,78,.22)} .ibd-quote figcaption{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--ibd-hair); display:flex;flex-direction:column;gap:.12rem} .ibd-quote figcaption b{font-size:.95rem;font-weight:600;color:var(--ibd-ink)} .ibd-quote figcaption span{font-size:.82rem;color:var(--ibd-muted)} .ibd-quote.is-key{border-color:var(--ibd-accent)} .ibd-quote.is-key::before{content:"";position:absolute;top:-1px;inset-inline:22px;height:2px;background:var(--ibd-accent)} /* ---------- placeholder notice (content pending) ---------- */ .ibd-placeholder{border:1px dashed var(--ibd-accent);background:#F3EDE0;border-radius:var(--ibd-r);text-align:center} .ibd-placeholder b{display:block;color:var(--ibd-primary);font-weight:700;margin-bottom:.5rem} /* ---------- footer ---------- */ .ibd-footer{background:#211E18;color:#958D7E} .ibd-footer :where(h3,h4){color:#fff;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600} .ibd-footer a{color:#958D7E;text-decoration:none} .ibd-footer a:hover{color:var(--ibd-accent-2);text-decoration:none} .ibd-footer .ibd-brand__name{color:#fff} .ibd-footer .ibd-brand__tag{color:#958D7E} /* ---------- tap targets (WCAG 2.5.8: 24px minimum) ---------- */ :where(.wp-block-list) li a{min-height:24px} /* ---------- hero support line ---------- */ .ibd-herolead{display:flex;gap:14px;align-items:flex-start;margin-top:2.1rem;padding-top:1.5rem; border-top:1px solid var(--ibd-line);max-width:44ch} .ibd-herolead p{margin:0;font-size:1rem;line-height:1.65;color:var(--ibd-muted);max-width:38ch;text-wrap:pretty} .ibd-herolead .ibd-gem{margin-top:3px;width:17px;height:17px;opacity:.8} /* ---------- headings that must hold one line on desktop ---------- */ @media(min-width:1024px){.ibd-nowrap{white-space:nowrap;max-width:none}} /* ---------- QA corrections ---------- */ /* outline button must match the solid button's box exactly */ .wp-block-button.is-style-outline > .wp-block-button__link{ padding:calc(1rem - 1px) calc(1.9rem - 1px);border-width:1px;border-style:solid;line-height:inherit} /* the sticky header CTA is persistent utility, not a fourth shout */ .ibd-header .wp-block-button__link{font-size:1.02rem;padding:.7rem 1.3rem} /* keep prose in a readable measure at tablet widths */ main :where(p:not(.ibd-label):not(.has-text-align-center)){max-width:68ch} .ibd-panel p,.ibd-quote blockquote{max-width:none} /* testimonial text should not sit below body size */ .ibd-quote blockquote{font-size:1.15rem} /* stacked layouts: a full-width 4:5 portrait swallows the fold */ @media(max-width:880px){ .ibd-portrait img{aspect-ratio:3/2} .ibd-portrait--square img{aspect-ratio:3/2} } @media(max-width:520px){.ibd-portrait img,.ibd-portrait--square img{aspect-ratio:4/5}} /* ---------- readability pass: explanatory copy ---------- */ .ibd-card p,.ibd-step p,.ibd-pack p{font-size:1.15rem;line-height:1.72} .ibd-card__kicker{font-size:.95rem;letter-spacing:.1em;text-transform:none;margin-bottom:.55rem} .ibd-step h3{font-size:1.5rem} .ibd-step p{color:var(--ibd-muted)} .ibd-journey{padding-inline-start:50px} .ibd-step{padding-bottom:2.6rem} /* ---------- package cards: never collide, readable ---------- */ .ibd-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:3rem;align-items:stretch} @media(max-width:1000px){.ibd-packs{grid-template-columns:1fr;max-width:560px;margin-inline:auto}} .ibd-pack{min-width:0} .ibd-pack__verb{font-size:1.6rem;padding:.3rem 1.1rem;margin-bottom:1.1rem} .ibd-pack__sub{font-size:.9rem;letter-spacing:.12em;margin-bottom:1rem} .ibd-pack h3{font-size:1.3rem;margin-bottom:.25rem} .ibd-pack__meta{margin-top:1.4rem;padding-top:1.1rem} .ibd-pack__price{font-size:1.6rem} .ibd-pack__note{font-size:.95rem} /* ---------- flagship business section ---------- */ .ibd-deep{background:var(--wp--preset--color--deep,#33271A);color:#F2EDE4} .ibd-deep :where(h1,h2,h3,p,span,div,small){color:inherit} .ibd-deep .ibd-label{color:var(--ibd-accent-2)} .ibd-deep .ibd-label .ibd-dmd{color:var(--ibd-accent-2)} .ibd-deep .ibd-tri{border-bottom-color:var(--ibd-accent-2)} .ibd-deep .ibd-lead,.ibd-deep p{color:#D9D0C2} .ibd-bedo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2.6rem;align-items:stretch} @media(max-width:860px){.ibd-bedo{grid-template-columns:1fr}} .ibd-bedo > div{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13); border-radius:var(--ibd-rs);padding:1.6rem 1.5rem;min-width:0} .ibd-bedo b{display:block;font-size:1.5rem;font-weight:700;color:var(--ibd-accent-2); margin-bottom:.6rem;letter-spacing:.02em} .ibd-bedo span{display:block;font-size:1.05rem;line-height:1.7;color:#D9D0C2} .ibd-bizfoot{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center;justify-content:space-between; margin-top:2.8rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.14)} .ibd-bizfoot__price{min-width:0} .ibd-bizfoot__price b{display:block;font-size:2.05rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:#fff} .ibd-bizfoot__price span{display:block;font-size:1rem;font-weight:400;letter-spacing:0;color:#BFB4A2;margin-top:.35rem} @media(max-width:640px){.ibd-bizfoot{flex-direction:column;align-items:stretch;text-align:start} .ibd-bizfoot .ibd-btn{width:100%}} /* ---------- testimonials: tighter, larger, never collide ---------- */ .ibd-quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:stretch} @media(max-width:1000px){.ibd-quotes{grid-template-columns:1fr;max-width:600px;margin-inline:auto}} .ibd-quote{min-width:0;padding:1.8rem 1.7rem 1.5rem} .ibd-quote blockquote{font-size:1.15rem;line-height:1.74} .ibd-quote figcaption{margin-top:.9rem;padding-top:.8rem} .ibd-quote figcaption b{font-size:1.02rem} .ibd-quote figcaption span{font-size:.92rem} .ibd-quote__pillar{font-size:.86rem;letter-spacing:.1em;text-transform:none;padding:.3rem .85rem;margin-bottom:1.1rem} /* ---------- utility ---------- */ .ibd-lead{font-size:clamp(1.2rem,1.02rem + .72vw,1.46rem);line-height:1.62;color:var(--ibd-ink-2);max-width:34ch} .ibd-measure{max-width:58ch} .ibd-hairline{border-top:1px solid var(--ibd-line)} :where(a,button,.wp-block-button__link):focus-visible{outline:2px solid var(--ibd-primary);outline-offset:3px;border-radius:3px} /* reveal on scroll — progressive enhancement only */ .ibd-reveal{opacity:0;transform:translateY(18px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)} .ibd-reveal.is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.ibd-reveal{opacity:1;transform:none;transition:none}} .no-js .ibd-reveal{opacity:1;transform:none} /* ================================================================== REVISION PASS · typography, buttons, Insight form, new sections ================================================================== */ /* ---------- larger explanatory copy ---------- */ .ibd-body-lg{font-size:1.15rem;line-height:1.78} @media(max-width:600px){.ibd-body-lg{font-size:1.08rem}} .ibd-deep__h{font-size:clamp(1.9rem,1.25rem + 2.4vw,2.9rem);line-height:1.22;letter-spacing:-.025em; font-weight:700;margin:0 0 1.1rem;max-width:20ch;text-wrap:balance} .ibd-deep__lead{font-size:1.15rem;line-height:1.78;max-width:60ch;margin:0;color:#D9D0C2} .ibd-label--on-dark{color:var(--ibd-accent-2)} /* ---------- standalone button system (outside wp-block-button) ---------- */ .ibd-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:inherit;font-weight:600;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em; padding:1rem 1.9rem;border-radius:var(--ibd-rs,6px);text-decoration:none;border:1px solid transparent; min-height:48px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s} .ibd-btn:hover{transform:translateY(-1px)} .ibd-btn--gold{background:var(--ibd-primary,#6B532C);color:#fff} .ibd-btn--gold:hover{background:var(--ibd-primary-h,#7A5C2E);color:#fff} .ibd-deep .ibd-btn--gold{background:var(--ibd-accent-2,#C6A575);color:#241B10} .ibd-deep .ibd-btn--gold:hover{background:#D6B788;color:#241B10} .ibd-btn--outline{background:transparent;color:var(--ibd-primary,#6B532C);border-color:currentColor} .ibd-btn--outline:hover{background:var(--ibd-primary,#6B532C);color:#fff;border-color:var(--ibd-primary,#6B532C)} .ibd-btn--lg{font-size:1.12rem;padding:1.15rem 2.4rem;min-height:54px} @media(max-width:600px){.ibd-btn{font-size:1.06rem;width:100%}} /* ---------- Insight offer + lead form ---------- */ .ibd-insight{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.8rem,4vw,3.4rem);align-items:start} @media(max-width:940px){.ibd-insight{grid-template-columns:1fr;gap:2.2rem}} .ibd-insight__copy{min-width:0} .ibd-insight__h{font-size:clamp(2rem,1.3rem + 2.5vw,3rem);line-height:1.18;letter-spacing:-.03em; font-weight:700;margin:0 0 1rem;color:#fff} .ibd-insight__lead{font-size:1.18rem;line-height:1.72;color:#D8D0BF;margin:0;max-width:42ch} .ibd-ticks{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.85rem} .ibd-ticks li{position:relative;padding-inline-start:26px;color:#D8D0BF;font-size:1.12rem;line-height:1.62} .ibd-ticks li .ibd-dmd{position:absolute;inset-inline-start:0;top:.5em;color:var(--ibd-accent-2,#C6A575)} .ibd-form{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.15); border-radius:10px;padding:clamp(1.5rem,3vw,2.1rem);min-width:0} .ibd-form__h{font-size:1.32rem;font-weight:700;color:#fff;margin:0 0 .35rem;line-height:1.3} .ibd-form__sub{font-size:1rem;color:#B4AB98;margin:0 0 1.5rem;line-height:1.6} .ibd-form__row{margin-bottom:1.05rem} .ibd-form label{display:block;font-size:.98rem;font-weight:500;color:#D8D0BF;margin-bottom:.42rem} .ibd-form input[type=text],.ibd-form input[type=tel],.ibd-form input[type=email]{ width:100%;box-sizing:border-box;font-family:inherit;font-size:1.06rem;line-height:1.4; padding:.85rem 1rem;min-height:50px;color:#fff;background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.22);border-radius:6px;transition:border-color .2s,background .2s} .ibd-form input::placeholder{color:#8A8172} .ibd-form input:focus{outline:none;border-color:var(--ibd-accent-2,#C6A575);background:rgba(0,0,0,.3)} .ibd-form input[aria-invalid=true]{border-color:#D98A6A} .ibd-form .ibd-btn{width:100%;margin-top:.5rem} .ibd-form__hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ibd-form__fine{font-size:.92rem;color:#9A9182;line-height:1.6;margin:1.05rem 0 0} .ibd-form__price{display:flex;align-items:baseline;gap:.5rem;margin:0 0 1.4rem; padding-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.13)} .ibd-form__price b{font-size:1.85rem;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1} .ibd-form__price span{font-size:.98rem;color:#B4AB98} .ibd-form__msg{margin:0 0 1.1rem;padding:.85rem 1rem;border-radius:6px;font-size:1rem;line-height:1.55} .ibd-form__msg.is-ok{background:rgba(198,165,117,.16);border:1px solid rgba(198,165,117,.42);color:#EFE4D2} .ibd-form__msg.is-err{background:rgba(217,138,106,.14);border:1px solid rgba(217,138,106,.44);color:#F2DDD3} /* ---------- courses teaser (catalog removed from homepage) ---------- */ .ibd-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3.4rem);align-items:center} @media(max-width:900px){.ibd-teaser{grid-template-columns:1fr;gap:1.8rem}} .ibd-teaser__copy,.ibd-teaser__side{min-width:0} .ibd-teaser h2{margin:0 0 1rem} .ibd-teaser__lead{font-size:1.15rem;line-height:1.78;color:var(--ibd-ink-2);margin:0;max-width:46ch} .ibd-teaser__list{list-style:none;margin:0 0 1.9rem;padding:0;display:grid;gap:.85rem} .ibd-teaser__list li{position:relative;padding-inline-start:26px;font-size:1.15rem;line-height:1.62;color:var(--ibd-ink-2)} .ibd-teaser__list li .ibd-dmd{position:absolute;inset-inline-start:0;top:.42em;color:var(--ibd-primary,#6B532C)} /* ---------- about, imageless ---------- */ .ibd-about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.6rem,4vw,3.4rem);align-items:start} @media(max-width:900px){.ibd-about{grid-template-columns:1fr;gap:1.4rem}} .ibd-about__head,.ibd-about__body{min-width:0} .ibd-about h2{margin:0} .ibd-about__body p{font-size:1.15rem;line-height:1.8;max-width:58ch;margin:0 0 1.15rem;color:var(--ibd-ink-2)} .ibd-about__body .ibd-btn{margin-top:.6rem} /* ---------- closing CTA ---------- */ .ibd-finalcta{text-align:center} .ibd-finalcta__h{font-size:clamp(1.85rem,1.2rem + 2.4vw,2.95rem);line-height:1.22;letter-spacing:-.03em; font-weight:700;color:#fff;margin:0 auto 1.3rem;max-width:34ch;text-wrap:pretty} @media(max-width:640px){.ibd-finalcta__h br{display:none}} .ibd-finalcta__lead{font-size:clamp(1.15rem,1.02rem + .6vw,1.35rem);line-height:1.68;color:#D8D0BF; margin:0 auto 2.2rem;max-width:44ch} @media(max-width:600px){.ibd-finalcta .ibd-btn{width:100%}} /* ---------- anchored sections must clear the sticky header ---------- */ html{scroll-padding-top:92px} @media(max-width:920px){html{scroll-padding-top:78px}} [id]{scroll-margin-top:0} /* No smooth scrolling: the page is long enough that a 3,000px animated jump disorients more than it helps, and it makes anchor CTAs feel unresponsive. */ /* ---------- RTL: a narrower max-width must not centre the block ---------- WordPress's constrained layout gives every direct child `margin-inline:auto`. Anything we cap with a max-width therefore drifts to the middle of the column instead of hugging the start (right) edge. Two defences: 1. a raw-HTML section that still needs one emits ONE wrapper element, so only that wrapper is a layout child; 2. anything promoted to a real core block carries the escape below instead, because an inline style would make the block invalid in Gutenberg. */ .ibd-secwrap{max-width:none} /* WordPress emits `margin-left/right:auto !important` on constrained-layout children, which even an inline style cannot beat. This is the opt-in escape. */ main .ibd-startedge{margin-inline-start:0!important;margin-inline-end:auto!important} /* ---------- bidi: Latin product names must not be reordered ---------- isolate is what keeps a trailing ™ or slash attached to its own run. No nowrap: the footer columns are narrow and these names must still wrap. */ .ibd-footer [dir="ltr"]{unicode-bidi:isolate} /* ---------- inline link that acts as a control needs a 24px hit area ---------- */ main p > a[href="/clients/"]{display:inline-block;padding-block:.25rem} /* ================================================================== FINAL REFINEMENT PASS ================================================================== */ /* ---------- header: keep the enlarged nav from crowding ---------- */ @media(max-width:1100px){.ibd-header .wp-block-navigation{font-size:.96rem}} /* the tagline stays on at every width; it just tightens on small screens */ @media(max-width:600px){ .ibd-header .ibd-brand .ibd-gem{width:36px;height:36px} .ibd-header .ibd-brand__name{font-size:1.2rem} .ibd-header .ibd-brand__tag{font-size:.75rem} } /* ---------- hero: the support line holds one desktop line ---------- */ .ibd-herolead--wide{max-width:none} @media(min-width:1024px){.ibd-herolead--wide p{white-space:nowrap}} /* ---------- Insight form: price lives in the packages section only ---------- */ .ibd-form__note{margin:0 0 1.5rem;padding-bottom:1.2rem;font-size:1.04rem;color:#C6BCA8; border-bottom:1px solid rgba(255,255,255,.13)} /* ---------- the pack-card hover, extended to the other card families ---------- Same restrained language: 3px lift, the standing shadow, a gold border. */ .ibd-bedo__item,.ibd-quote{transition:transform .25s,box-shadow .25s,border-color .25s,background-color .25s} .ibd-bedo__item:hover{transform:translateY(-3px);border-color:var(--ibd-accent-2,#C6A575); background:rgba(255,255,255,.085);box-shadow:0 14px 30px -22px rgba(0,0,0,.85)} .ibd-quote:hover{transform:translateY(-3px);box-shadow:var(--ibd-sh);border-color:var(--ibd-accent)} @media(hover:none){ .ibd-bedo__item:hover,.ibd-quote:hover,.ibd-pack:hover{transform:none;box-shadow:var(--ibd-shl)} } /* ---------- footer: an explicit RTL grid, not stacked columns ---------- */ .ibd-footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.4rem 2.2rem;align-items:start} @media(max-width:1000px){.ibd-footgrid{grid-template-columns:1fr 1fr;gap:2.4rem 2rem}} @media(max-width:620px){.ibd-footgrid{grid-template-columns:1fr;gap:2.2rem}} .ibd-footgrid > *{min-width:0} .ibd-footgrid__blurb{margin:1.1rem 0 0;font-size:1rem;line-height:1.75;color:#958D7E;max-width:34ch} .ibd-footer .ibd-brand{margin:0} .ibd-footer .ibd-brand .ibd-gem{width:46px;height:46px} .ibd-footer .ibd-brand__name{font-size:1.36rem;color:#fff} .ibd-footer .ibd-brand__tag{font-size:.88rem;color:#A79E8D;max-height:none;opacity:1} .ibd-footcol__h{font-size:1.02rem;font-weight:600;color:#fff;margin:0 0 1rem; letter-spacing:-.01em;text-transform:none} .ibd-footcol ul,.ibd-footgrp ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem} .ibd-footcol li,.ibd-footgrp li{margin:0} .ibd-footcol a,.ibd-footgrp a{color:#B7AE9D;text-decoration:none;font-size:1rem;line-height:1.5; display:inline-block;padding-block:.1rem;transition:color .2s} .ibd-footcol a:hover,.ibd-footgrp a:hover{color:var(--ibd-accent-2,#C6A575)} .ibd-footbottom{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between; align-items:center;margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.11)} .ibd-footbottom p{margin:0;font-size:.92rem;color:#8C8474;line-height:1.6;max-width:none} .ibd-footbottom a{color:#8C8474;text-decoration:none} .ibd-footbottom a:hover{color:#B7AE9D} @media(max-width:620px){.ibd-footbottom{justify-content:flex-start}} /* ---------- bidi: Latin runs keep their own direction everywhere ---------- */ .ibd-footer [dir="ltr"]{unicode-bidi:isolate} /* ---------- footer diamond leans right, matching the header ---------- */ .ibd-footer .ibd-brand .ibd-gem{transform:rotate(7deg);transform-origin:50% 55%} /* ================================================================== COMPONENT LIBRARY Styles for the reusable patterns under "דלתא · רכיבים לשימוש חוזר". Everything here reuses the tokens already defined above; no new colours. ================================================================== */ /* ---------- generic three-up grid ---------- */ .ibd-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem; margin-top:2.6rem;align-items:stretch} @media(max-width:1000px){.ibd-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.ibd-grid3{grid-template-columns:1fr}} .ibd-grid3 > *{min-width:0} .ibd-grid3 h3{font-size:1.3rem;margin:0 0 .5rem} .ibd-grid3 p{margin:0} /* the same restrained hover the offer cards use, as an opt-in class */ .ibd-hoverable{transition:transform .25s,box-shadow .25s,border-color .25s} .ibd-hoverable:hover{transform:translateY(-3px);box-shadow:var(--ibd-sh);border-color:var(--ibd-accent)} @media(hover:none){.ibd-hoverable:hover{transform:none;box-shadow:var(--ibd-shl)}} /* ---------- FAQ: native details/summary, no JavaScript ---------- */ .ibd-faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(1.6rem,4vw,3.4rem);align-items:start} @media(max-width:900px){.ibd-faqwrap{grid-template-columns:1fr;gap:1.6rem}} .ibd-faqwrap h2{margin:0} .ibd-faq{display:grid;gap:.7rem;min-width:0} .ibd-faq details{background:var(--ibd-surface);border:1px solid var(--ibd-line); border-radius:var(--ibd-rs);overflow:hidden;transition:border-color .25s,box-shadow .25s} .ibd-faq details[open]{border-color:var(--ibd-accent);box-shadow:var(--ibd-shl)} .ibd-faq summary{cursor:pointer;list-style:none;padding:1.15rem 1.4rem; font-size:1.12rem;font-weight:600;color:var(--ibd-ink);line-height:1.5; display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px} .ibd-faq summary::-webkit-details-marker{display:none} .ibd-faq summary::after{content:"";flex:none;width:10px;height:10px; border-inline-start:2px solid var(--ibd-primary);border-bottom:2px solid var(--ibd-primary); transform:rotate(-45deg);transition:transform .25s;margin-top:-4px} .ibd-faq details[open] summary::after{transform:rotate(135deg);margin-top:2px} .ibd-faq summary:hover{color:var(--ibd-primary)} .ibd-faq__a{padding:0 1.4rem 1.3rem} .ibd-faq__a p{margin:0;font-size:1.1rem;line-height:1.75;color:var(--ibd-ink-2);max-width:62ch} /* ---------- breadcrumbs ---------- */ .ibd-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem; font-size:.98rem;color:var(--ibd-muted);margin:0 0 1.6rem} .ibd-crumbs a{color:var(--ibd-muted);text-decoration:none;padding-block:.2rem;transition:color .2s} .ibd-crumbs a:hover{color:var(--ibd-primary)} .ibd-crumbs span[aria-hidden]{opacity:.5} .ibd-crumbs [aria-current]{color:var(--ibd-ink-2)} /* ---------- product hero ---------- */ .ibd-prodhero__h{font-size:clamp(2.1rem,1.3rem + 3vw,3.6rem);line-height:1.12; letter-spacing:-.035em;font-weight:700;margin:0 0 1.1rem;max-width:20ch;text-wrap:balance} .ibd-prodhero__lead{font-size:clamp(1.18rem,1.02rem + .7vw,1.42rem);line-height:1.62; color:var(--ibd-ink-2);margin:0 0 2rem;max-width:46ch} .ibd-prodhero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.6rem} @media(max-width:600px){.ibd-prodhero__cta{flex-direction:column}} .ibd-facts{list-style:none;display:flex;flex-wrap:wrap;gap:1rem 2.6rem;margin:0;padding:1.5rem 0 0; border-top:1px solid var(--ibd-line)} .ibd-facts li{display:flex;flex-direction:column;gap:.2rem;min-width:0} .ibd-facts b{font-size:.95rem;letter-spacing:.1em;color:var(--ibd-primary);font-weight:600} .ibd-facts span{font-size:1.08rem;color:var(--ibd-ink-2)} /* ---------- product pricing block ---------- */ .ibd-pricebox{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(1.6rem,4vw,3rem);align-items:start; background:var(--ibd-surface);border:1px solid var(--ibd-line);border-radius:var(--ibd-r); box-shadow:var(--ibd-shl);padding:clamp(1.8rem,4vw,3rem)} @media(max-width:860px){.ibd-pricebox{grid-template-columns:1fr}} .ibd-pricebox > *{min-width:0} .ibd-pricebox h2{font-size:1.7rem;margin:0 0 1.3rem} .ibd-ticks--light li{color:var(--ibd-ink-2)} .ibd-ticks--light li .ibd-dmd{color:var(--ibd-primary)} .ibd-pricebox__buy{background:var(--ibd-soft);border-radius:var(--ibd-rs); padding:1.7rem 1.5rem;text-align:center} .ibd-pricebox__amount{display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.04em; line-height:1;color:var(--ibd-ink)} .ibd-pricebox__note{display:block;font-size:1rem;color:var(--ibd-muted);margin:.6rem 0 1.4rem} .ibd-pricebox__buy .ibd-btn{width:100%} .ibd-pricebox__fine{font-size:.95rem;color:var(--ibd-muted);line-height:1.6;margin:1rem 0 0} /* ================================================================== BLOG The archive previously rendered title + excerpt only; every one of the 53 posts has a featured image and none of them was being shown. ================================================================== */ .ibd-blog h1{margin-bottom:.6rem} .ibd-postlist{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:1.2rem} .ibd-postlist > li{margin:0} .ibd-postcard{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:clamp(1.1rem,2.5vw,2rem);align-items:center; background:var(--ibd-surface);border:1px solid var(--ibd-line);border-radius:var(--ibd-rs); box-shadow:var(--ibd-shl);padding:1.2rem; transition:transform .25s,box-shadow .25s,border-color .25s} .ibd-postcard:hover{transform:translateY(-3px);box-shadow:var(--ibd-sh);border-color:var(--ibd-accent)} @media(hover:none){.ibd-postcard:hover{transform:none;box-shadow:var(--ibd-shl)}} @media(max-width:720px){.ibd-postcard{grid-template-columns:1fr;gap:1rem}} .ibd-postcard > *{min-width:0} .ibd-postcard__img{margin:0} .ibd-postcard__img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px} .ibd-postcard__img a{display:block;line-height:0} /* a post with no featured image must not leave a hole in the grid */ .ibd-postcard__img:empty{display:none} .ibd-postcard:has(.ibd-postcard__img:empty){grid-template-columns:1fr} .ibd-postcard__body{display:flex;flex-direction:column;gap:.5rem} .ibd-postcard__date{margin:0;color:var(--ibd-muted);font-size:.98rem;letter-spacing:.02em} .ibd-postcard__title{margin:0;line-height:1.28;letter-spacing:-.02em} .ibd-postcard__title a{color:var(--ibd-ink);text-decoration:none;transition:color .2s} .ibd-postcard__title a:hover{color:var(--ibd-primary)} .ibd-postcard__ex{margin:0;font-size:1.08rem;line-height:1.7;color:var(--ibd-ink-2);max-width:64ch} .ibd-postcard__ex .wp-block-post-excerpt__more-link{display:inline-block;margin-top:.5rem; color:var(--ibd-primary);font-weight:600;text-decoration:none;padding-block:.2rem} .ibd-pagination{margin-top:3rem;gap:.5rem;font-size:1.05rem} .ibd-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 .7rem;border-radius:6px;text-decoration:none; color:var(--ibd-ink-2);border:1px solid transparent;transition:background .2s,border-color .2s,color .2s} .ibd-pagination .page-numbers:hover{color:var(--ibd-primary);border-color:var(--ibd-line);background:var(--ibd-soft)} .ibd-pagination .page-numbers.current{background:var(--ibd-primary);color:#fff;font-weight:600} /* ---------- single post ---------- */ .ibd-single__meta{color:var(--ibd-muted);font-size:1rem;margin:0 0 1.6rem} /* ---------- optional marketing consent, visibly separate from the enquiry ---------- */ .ibd-form__opt{display:flex;align-items:flex-start;gap:.7rem;margin:1.3rem 0 0; padding:.9rem 1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); border-radius:6px;cursor:pointer;transition:border-color .2s,background .2s} .ibd-form__opt:hover{border-color:rgba(198,165,117,.45);background:rgba(255,255,255,.075)} .ibd-form__opt input{flex:none;width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--ibd-accent-2,#C6A575);cursor:pointer} .ibd-form__opt span{font-size:.98rem;line-height:1.6;color:#C6BCA8} .ibd-form__opt:focus-within{border-color:var(--ibd-accent-2,#C6A575)} /* ========================================================================== Stage 4 — page components ========================================================================== */ /* Two-column prose. Collapses to one column before the lines get too short to read comfortably, not at an arbitrary device width. */ .ibd-twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 3rem;margin-top:1.6rem} .ibd-twocol > *{min-width:0} .ibd-twocol p{margin:0 0 1rem;font-size:1.1rem;line-height:1.72;color:var(--ibd-ink-2)} .ibd-twocol p:last-child{margin-bottom:0} .ibd-twocol h3{font-size:1.24rem;margin:0 0 .6rem;color:var(--ibd-ink)} @media(max-width:820px){.ibd-twocol{grid-template-columns:1fr;gap:1.4rem}} /* Ordered stack — BE / DO / HAVE and other numbered sequences. The mark is a fixed-width column so the headings align on the start edge. */ .ibd-stack{display:grid;gap:1px;background:var(--ibd-line);border:1px solid var(--ibd-line);border-radius:var(--ibd-r);overflow:hidden} .ibd-stack__item{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1.4rem; align-items:start;padding:1.6rem 1.7rem;background:var(--wp--preset--color--base)} .ibd-stack__item > div{min-width:0} .ibd-stack__mark{display:inline-flex;align-items:center;justify-content:center; min-height:38px;padding:.2rem .7rem;border-radius:var(--ibd-rs); background:var(--ibd-soft);color:var(--ibd-primary); font-size:1.15rem;font-weight:700;letter-spacing:.08em} .ibd-stack h3{font-size:1.26rem;margin:0 0 .45rem;line-height:1.35;color:var(--ibd-ink)} .ibd-stack p{margin:0;font-size:1.06rem;line-height:1.68;color:var(--ibd-ink-2)} @media(max-width:640px){ .ibd-stack__item{grid-template-columns:1fr;gap:.9rem;padding:1.4rem 1.2rem} .ibd-stack__mark{justify-self:start} } /* Fit / not-fit columns */ .ibd-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:2rem} .ibd-fit > *{min-width:0} .ibd-fit__col{padding:1.7rem 1.6rem;border:1px solid var(--ibd-line);border-radius:var(--ibd-r); background:var(--wp--preset--color--base)} .ibd-fit__col h3{font-size:1.2rem;margin:0;color:var(--ibd-ink)} .ibd-fit__col--no{background:var(--ibd-surface);border-color:var(--ibd-hair)} @media(max-width:820px){.ibd-fit{grid-template-columns:1fr}} /* The tick list is styled for dark panels by default; on light sections it needs the ink colours, which is what these two contexts supply. */ .ibd-fit .ibd-ticks li,.ibd-twocol .ibd-ticks li{color:var(--ibd-ink-2)} .ibd-fit .ibd-ticks li .ibd-dmd,.ibd-twocol .ibd-ticks li .ibd-dmd{color:var(--ibd-primary)} .ibd-ticks--no li{color:var(--ibd-muted)} .ibd-x{position:absolute;inset-inline-start:0;top:.34em;width:12px;height:12px;flex:none;display:inline-block} .ibd-x::before,.ibd-x::after{content:"";position:absolute;inset-inline-start:0;top:5px; width:12px;height:1.5px;background:var(--ibd-faint);border-radius:2px} .ibd-x::before{transform:rotate(45deg)} .ibd-x::after{transform:rotate(-45deg)} /* A short grounded caveat under a section. Deliberately quiet. */ .ibd-note{margin-top:1.8rem;font-size:.98rem;line-height:1.62;color:var(--ibd-muted)} .ibd-textlink{color:var(--ibd-primary);text-decoration:none;border-bottom:1px solid var(--ibd-accent); padding-bottom:1px;transition:color .2s,border-color .2s} .ibd-textlink:hover{color:var(--ibd-ink);border-color:var(--ibd-primary)} /* Whole-card links: the card keeps its own look, the link keeps its semantics. */ a.ibd-pack{text-decoration:none;color:inherit} a.ibd-pack h2,a.ibd-pack h3{color:var(--ibd-ink)} .ibd-pack h2{font-size:1.42rem;margin:0 0 .2rem;line-height:1.25} .ibd-pack__for{font-size:.92rem;color:var(--ibd-muted);margin:0 0 .8rem} .ibd-pack__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem; font-size:.98rem;font-weight:600;color:var(--ibd-primary)} .ibd-pack__go::after{content:"‹";font-size:1.15em;line-height:1;transition:transform .2s} a.ibd-pack:hover .ibd-pack__go::after{transform:translateX(-3px)} /* Dark flagship hero — the business page only. */ .ibd-prodhero--deep{background:var(--ibd-panel);color:#F3EEE5} .ibd-prodhero--deep .ibd-prodhero__h,.ibd-prodhero--deep .ibd-prodhero__lead{color:#F3EEE5} .ibd-prodhero--deep .ibd-label{color:var(--ibd-accent-2,#C6A575)} .ibd-prodhero--deep .ibd-tri{border-bottom-color:var(--ibd-accent-2,#C6A575)} .ibd-prodhero__h--long{font-size:clamp(1.6rem,1.05rem + 2.1vw,2.5rem);line-height:1.32;max-width:26ch} .ibd-crumbs--light a,.ibd-crumbs--light [aria-current]{color:#C9C0AF} .ibd-crumbs--light a:hover{color:var(--ibd-accent-2,#C6A575)} .ibd-facts--light{border-top-color:rgba(255,255,255,.14)} .ibd-facts--light b{color:var(--ibd-accent-2,#C6A575)} .ibd-facts--light span{color:#E2DACB} .ibd-btn--onlight{border-color:rgba(255,255,255,.4);color:#F3EEE5} .ibd-btn--onlight:hover{border-color:var(--ibd-accent-2,#C6A575);color:#fff} /* Pull quote inside a light section. Not a testimonial — a stated principle. */ .ibd-quotebox{margin:2.2rem 0 0;padding:1.6rem 1.8rem;border-radius:var(--ibd-r); background:var(--ibd-soft);border-inline-start:3px solid var(--ibd-accent)} .ibd-quotebox p{margin:0;font-size:clamp(1.15rem,1rem + .6vw,1.38rem);line-height:1.6; font-weight:600;color:var(--ibd-ink);max-width:46ch} /* ========================================================================== Structure stabilization pass ========================================================================== */ /* Sticky header, actually sticky. The template part used to emit its own
wrapper, and a sticky element can never travel outside its parent's box — so the bar scrolled away with a wrapper exactly its own height. The wrapper is gone from the templates; this rule neutralises it if a customised part reintroduces one. */ .wp-block-template-part:has(> .ibd-header){display:contents} /* The stuck state stays a settle, not a jump: the tagline folds and the mark eases down by 8px over the same 0.28s the padding uses. */ /* Blog archive subtitle */ .ibd-blog__sub{margin:.6rem 0 2.2rem;font-size:clamp(1.06rem,.98rem + .4vw,1.24rem); line-height:1.6;color:var(--ibd-muted);max-width:44ch} /* Lecture cards. Three across, then two, then one — the fourth and fifth sit centred on the second row rather than stranded at one edge. */ .ibd-lect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem; justify-content:center} .ibd-lect__card{min-width:0;background:var(--ibd-surface);border:1px solid var(--ibd-line); border-radius:var(--ibd-r);box-shadow:var(--ibd-shl);padding:1.9rem 1.7rem; display:flex;flex-direction:column; transition:transform .25s,box-shadow .25s,border-color .25s} .ibd-lect__card:hover{transform:translateY(-3px);box-shadow:var(--ibd-sh);border-color:var(--ibd-accent)} @media(hover:none){.ibd-lect__card:hover{transform:none;box-shadow:var(--ibd-shl)}} .ibd-lect__field{display:inline-block;align-self:flex-start;margin-bottom:1rem; padding:.24rem .8rem;border-radius:6px;background:var(--ibd-soft); color:var(--ibd-primary);font-size:.86rem;font-weight:600;letter-spacing:.04em} .ibd-lect__card h2{font-size:1.28rem;line-height:1.38;margin:0 0 .7rem;color:var(--ibd-ink)} .ibd-lect__card p{margin:0;font-size:1.03rem;line-height:1.68;color:var(--ibd-ink-2)} @media(max-width:1000px){ .ibd-lect{grid-template-columns:repeat(2,minmax(0,1fr))} .ibd-lect__card:last-child{grid-column:1/-1;max-width:calc(50% - .65rem);justify-self:center} } @media(max-width:640px){ .ibd-lect{grid-template-columns:1fr} .ibd-lect__card:last-child{grid-column:auto;max-width:none} } .ibd-pricebox__vat{display:block;font-size:.92rem;color:var(--ibd-muted);margin-top:-.2rem} /* Testimonial wall. Twelve quotes of very different lengths: a grid would force short ones to the height of the longest in their row, so this flows in columns instead and each card keeps its natural height. */ .ibd-quotewall{columns:3;column-gap:1.2rem;margin-top:2.4rem} @media(max-width:1000px){.ibd-quotewall{columns:2}} @media(max-width:680px){.ibd-quotewall{columns:1;max-width:600px;margin-inline:auto}} .ibd-quotewall .ibd-quote{break-inside:avoid;margin:0 0 1.2rem;display:block;height:auto} .ibd-quotewall .ibd-quote blockquote p{margin:0;font-size:1.06rem;line-height:1.72;color:var(--ibd-ink-2)} .ibd-quote figcaption.ibd-quote__who{display:flex;flex-direction:row;align-items:center;gap:.9rem; margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--ibd-hair)} .ibd-quote__who > span{display:flex;flex-direction:column;gap:.12rem;min-width:0;text-align:start} .ibd-quote__img{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover; background:var(--ibd-tint);border:1px solid var(--ibd-hair)} .ibd-quote__role{font-size:.9rem;color:var(--ibd-muted);line-height:1.4} /* Hero with a video beside the copy. The frame keeps 16:9 without the padding-top hack so the iframe cannot drift out of its box. */ .ibd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.4rem;align-items:center} @media(max-width:900px){.ibd-split{grid-template-columns:1fr;gap:1.8rem}} .ibd-split__copy{min-width:0} .ibd-split__media{min-width:0} .ibd-video{position:relative;aspect-ratio:16/9;border-radius:var(--ibd-r);overflow:hidden; border:1px solid var(--ibd-line);box-shadow:var(--ibd-sh);background:var(--ibd-panel)} .ibd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* Two-price offer blocks */ .ibd-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;margin-top:2.2rem} @media(max-width:820px){.ibd-offers{grid-template-columns:1fr}} .ibd-offer{position:relative;min-width:0;display:flex;flex-direction:column; background:var(--ibd-surface);border:1px solid var(--ibd-line);border-radius:var(--ibd-r); box-shadow:var(--ibd-shl);padding:1.9rem 1.8rem} .ibd-offer h3{margin:0 0 .5rem;font-size:1.3rem;color:var(--ibd-ink)} .ibd-offer__price{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.04em;color:var(--ibd-ink)} .ibd-offer .ibd-ticks{margin-top:1.2rem;flex:1} .ibd-offer .ibd-ticks li{color:var(--ibd-ink-2)} .ibd-offer .ibd-ticks li .ibd-dmd{color:var(--ibd-primary)} .ibd-offer .ibd-btn{margin-top:1.6rem;width:100%;text-align:center;justify-content:center} .ibd-offer--best{border-color:var(--ibd-accent);background:var(--wp--preset--color--base)} .ibd-offer--best::before{content:"";position:absolute;top:-1px;inset-inline:22px;height:2px;background:var(--ibd-accent)} .ibd-offer__flag{position:absolute;top:-.85rem;inset-inline-end:1.6rem;background:var(--ibd-accent); color:#2A2118;font-size:.82rem;font-weight:700;padding:.22rem .8rem;border-radius:6px} /* Seven items no longer fit on one line below ~900px, and a two-row menu inside a sticky bar looks broken. WordPress flips the navigation to its overlay at 600px; these two rules move that switch to 900px using the block's own markup, so the hamburger and the overlay behave exactly as they already do on a phone. */ @media(min-width:600px) and (max-width:1024px){ .ibd-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none} .ibd-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex} .ibd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{display:flex} } /* With the menu collapsed there is room for the CTA again, so it only drops away on genuinely narrow phones. */ @media(max-width:1024px){.ibd-header .ibd-hide-mobile{display:block}} @media(max-width:600px){.ibd-header .ibd-hide-mobile{display:none}} /* Latin trademark strings inside Hebrew need their own bidi run, or the ™ jumps to the wrong end of the name. */ .ibd-en[dir="ltr"]{unicode-bidi:isolate;display:inline-block} /* About hero: copy beside the portrait, using the same split as the course pages. The image column is narrower here so the portrait does not dominate the page. */ .ibd-split--about{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3rem;align-items:center} @media(max-width:900px){.ibd-split--about{grid-template-columns:1fr;gap:2rem}} .ibd-split--about .ibd-portrait{margin:0} .ibd-split--about .ibd-portrait img{width:100%;height:auto;display:block;border-radius:var(--ibd-r)} @media(max-width:900px){.ibd-split--about .ibd-portrait{max-width:340px}} /* Sibling navigation: from a course page back to its category and across to the pages beside it, so an inner page is never a dead end. */ .ibd-sibnav{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem; padding-top:1.4rem;border-top:1px solid var(--ibd-line)} .ibd-sibnav__lead{font-size:.95rem;font-weight:600;color:var(--ibd-faint);letter-spacing:.04em} .ibd-sibnav a{color:var(--ibd-primary);text-decoration:none;font-size:1.02rem; border-bottom:1px solid transparent;transition:border-color .2s,color .2s} .ibd-sibnav a:hover{border-bottom-color:var(--ibd-accent);color:var(--ibd-ink)} .ibd-sibnav__all{margin-inline-start:auto;font-weight:600} @media(max-width:600px){.ibd-sibnav__all{margin-inline-start:0}} /* Breadcrumb bar prepended to legacy pages that still use the default template. */ .ibd-crumbwrap{margin-bottom:1.6rem} /* Two groups now share a footer column, so a heading that follows a list needs air above it. Nothing else about the footer changes. */ .ibd-footgrp + .ibd-footgrp,.ibd-brand + .ibd-footgrp{margin-top:1.7rem} /* An item whose page does not exist yet sits in the list without a link. */ .ibd-footcol li > span,.ibd-footgrp li > span{color:#B7AE9D;font-size:1rem;line-height:1.5} /* ---------- sticky header vs. the WordPress admin bar ---------- For a logged-in user the admin bar occupies the top of the viewport: absolute and 32px tall at desktop widths, fixed and 46px tall at 782px and below. A header pinned to top:0 slides underneath it and the brand line gets clipped. WordPress publishes the bar's height as --wp-admin--admin-bar--height and updates it at that same breakpoint, so the sticky offset follows it. The media query repeats the value as a fallback for older installs. Logged out, body.admin-bar is absent and the header stays at top:0. z-index stays 50 — far below the admin bar's 99999 — so the header covers page content and never the bar. */ body.admin-bar .ibd-header{top:var(--wp-admin--admin-bar--height,32px)} @media screen and (max-width:782px){ body.admin-bar .ibd-header{top:var(--wp-admin--admin-bar--height,46px)} } /* Anchor targets were offset for a header sitting at the very top; with the bar pushing it down, the landing point moves by the same amount. */ html:has(body.admin-bar){scroll-padding-top:calc(92px + var(--wp-admin--admin-bar--height,32px))} @media(max-width:920px){ html:has(body.admin-bar){scroll-padding-top:calc(78px + var(--wp-admin--admin-bar--height,46px))} } /* At 600px and below WordPress switches the bar to position:absolute, so it scrolls away with the page. Holding the header 46px down there would leave a permanent gap under a bar that is no longer on screen, so the offset is released and the header returns to the top edge. */ @media screen and (max-width:600px){ body.admin-bar .ibd-header{top:0} html:has(body.admin-bar){scroll-padding-top:78px} } /* Social row in the contact column. Icons only, so each link carries an aria-label; the row keeps the same muted-to-gold behaviour as the text links. */ .ibd-footcol ul.ibd-social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem} .ibd-social li{margin:0} .ibd-social a{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.16); color:#B7AE9D;transition:color .2s,border-color .2s,background-color .2s} .ibd-social a:hover{color:var(--ibd-accent-2,#C6A575);border-color:var(--ibd-accent-2,#C6A575); background:rgba(198,165,117,.08)} .ibd-social svg{width:15px;height:15px;fill:currentColor;display:block} /* ---------- mobile menu: full-screen overlay ---------- The header carries backdrop-filter, and a filtered element becomes the containing block for its fixed-position descendants. That trapped the open navigation overlay inside the header bar — a 72px-tall strip with a taller list scrolling invisibly inside it. Dropping the filter only while the menu is open lets the overlay resolve against the viewport again, which is what WordPress's own inset:0 expects. */ .ibd-header:has(.wp-block-navigation__responsive-container.is-menu-open){backdrop-filter:none} .ibd-header .wp-block-navigation__responsive-container.is-menu-open{ background:var(--wp--preset--color--base); padding:0;overflow-y:auto} /* never cover the admin bar */ body.admin-bar .ibd-header .wp-block-navigation__responsive-container.is-menu-open{ top:var(--wp-admin--admin-bar--height,32px)} .ibd-header .is-menu-open .wp-block-navigation__responsive-container-content{ width:100%;padding:.6rem 1.5rem 2.4rem} .ibd-header .is-menu-open ul.wp-block-navigation__container{ width:100%;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap} .ibd-header .is-menu-open .wp-block-navigation-item{ width:100%;border-bottom:1px solid var(--ibd-line)} .ibd-header .is-menu-open .wp-block-navigation-item:last-child{border-bottom:0} .ibd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ display:block;width:100%;padding:1.05rem .2rem; font-size:1.18rem;line-height:1.4;color:var(--ibd-ink)} /* the desktop underline animation has no place in a stacked list */ .ibd-header .is-menu-open .wp-block-navigation-item__content::after{display:none} .ibd-header .is-menu-open .wp-block-navigation-item__content:hover{color:var(--ibd-primary)} .ibd-header .wp-block-navigation__responsive-container-close{ color:var(--ibd-ink);padding:.6rem} .ibd-header .wp-block-navigation__responsive-container-close svg{width:26px;height:26px} /* ---------- footer groups: static on desktop, collapsible on mobile ---------- Each group is a
so the open/closed state is native and keyboard accessible. delta.js keeps every group open above 1000px and closes them below, so the desktop footer is unchanged and the phone footer starts as a short list of headings. With JS off the groups stay open — today's behaviour. */ .ibd-footgrp{margin:0} .ibd-footgrp > summary{list-style:none;cursor:default} .ibd-footgrp > summary::-webkit-details-marker{display:none} .ibd-footgrp > summary::marker{content:""} .ibd-footgrp > ul{margin-top:0} @media(max-width:1000px){ .ibd-footgrp{border-bottom:1px solid rgba(255,255,255,.12)} .ibd-footgrp + .ibd-footgrp,.ibd-brand + .ibd-footgrp{margin-top:0} .ibd-footgrp > summary{cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:1rem;padding:.95rem 0;margin:0; -webkit-tap-highlight-color:transparent} /* chevron rotates to point down when the group is open */ .ibd-footgrp > summary::after{content:"";flex:none;width:9px;height:9px; border-inline-end:1.5px solid var(--ibd-accent-2,#C6A575); border-bottom:1.5px solid var(--ibd-accent-2,#C6A575); transform:rotate(-45deg);margin-block-start:-4px;transition:transform .2s} .ibd-footgrp[open] > summary::after{transform:rotate(45deg);margin-block-start:2px} .ibd-footgrp > ul{padding-bottom:1rem} .ibd-footcol{margin:0} } /* The contact column carries the social row at its foot, level with the second row of groups rather than floating up under the phone number. */ .ibd-footgrid > .ibd-footcol--contact{display:flex;flex-direction:column;align-self:stretch} .ibd-footcol--contact ul.ibd-social{margin-top:auto;padding-top:2.4rem} @media(max-width:1000px){ .ibd-footcol--contact ul.ibd-social{margin-top:0;padding-top:1.4rem} } /* In the single-column footer every group carries its own divider, so the grid's row gap would break the accordion into uneven blocks. */ @media(max-width:620px){.ibd-footgrid{row-gap:0}} /* Desktop: the business group aligns under the wordmark rather than under the diamond, and drops onto the bottom baseline shared by the other columns. */ @media(min-width:1001px){ .ibd-footgrid__brand .ibd-footgrp{margin-block-start:59px;margin-inline-start:58px} .ibd-footcol--contact ul.ibd-social{padding-top:0} } /* Phones: one flow instead of a grid, so the groups can be ordered independently of the desktop columns. Processes lead; business follows. */ @media(max-width:620px){ .ibd-footgrid{display:flex;flex-direction:column;gap:0;align-items:stretch} .ibd-footgrid__brand,.ibd-footgrid > .ibd-footcol{display:contents} .ibd-footgrid__brand > .ibd-brand{order:1} .ibd-footgrp--processes{order:2} .ibd-footgrp--business{order:3} .ibd-footgrp--lectures{order:4} .ibd-footgrp--personal{order:5} .ibd-footgrp--training{order:6} .ibd-footgrp--contact{order:7} .ibd-footcol--contact .ibd-social{order:8} } /* ---- Delta core pages, master-brief pass ------------------------------- */ /* the ecology line under the four journey steps */ .ibd-ecology{margin:2.2rem auto 0;max-width:62ch;text-align:center; font-size:1.06rem;line-height:1.72;color:var(--ibd-ink-2)} /* the recommended-entry badge on the Insight card */ .ibd-pack{position:relative} .ibd-pack__badge{position:absolute;top:-.72rem;inset-inline-end:1.4rem; display:inline-block;padding:.3rem .7rem;border-radius:999px; background:var(--ibd-accent);color:#2A2113; font-size:.74rem;font-weight:600;letter-spacing:.06em;white-space:nowrap} .ibd-pack__fit{margin:.9rem 0 0;font-size:.99rem;line-height:1.65;color:var(--ibd-ink-2)} .ibd-pack__fit b{color:var(--ibd-ink);font-weight:600} .ibd-packs__lead{margin:1.6rem 0 0;max-width:62ch;font-size:1.1rem;line-height:1.72;color:var(--ibd-ink-2)} .ibd-packs__note{margin:2rem 0 0;max-width:70ch;font-size:1rem;line-height:1.7;color:var(--ibd-ink-2)} .ibd-packs__note a{color:var(--ibd-primary)} /* Breakthrough: the two systems the process works on */ .ibd-bizdual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:1.6rem} @media(max-width:860px){.ibd-bizdual{grid-template-columns:1fr}} .ibd-bizdual p{margin:0;font-size:1.03rem;line-height:1.72;color:#D9D0C2; padding-inline-start:1rem;border-inline-start:2px solid var(--ibd-accent-2,#C6A575)} .ibd-bizdual b{color:#fff;font-weight:600} /* the self-study alternative under the Method closing CTA */ .ibd-finalcta__alt{margin:1.5rem 0 0;font-size:1rem;line-height:1.7;color:#BFB4A2} .ibd-finalcta__alt a{color:var(--ibd-accent-2,#C6A575);text-decoration:none; border-bottom:1px solid rgba(198,165,117,.45)} .ibd-finalcta__alt a:hover{border-bottom-color:var(--ibd-accent-2,#C6A575)} /* Breakthrough sub-headline, one step under the section H2 */ .ibd-deep__sub{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.6;font-weight:600; max-width:58ch;margin:.9rem 0 0;color:var(--ibd-accent-2,#C6A575)} /* the two closing lines of the Insight panel copy column */ .ibd-insight__more{margin:1.3rem 0 0;font-size:1.03rem;line-height:1.7;color:var(--ibd-ink-2)} .ibd-insight__facts{margin:.9rem 0 0;font-size:1.03rem;line-height:1.7;font-weight:600;color:var(--ibd-ink)} /* ---- newsletter exit ramp --------------------------------------------- */ .ibd-nl{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.6rem);align-items:center} @media(max-width:900px){.ibd-nl{grid-template-columns:1fr;gap:2rem}} .ibd-nl__copy h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);line-height:1.3;margin:.5rem 0 0} .ibd-nl__lead{margin:1rem 0 0;font-size:1.08rem;line-height:1.75;color:var(--ibd-ink-2);max-width:52ch} .ibd-nl__form{background:var(--ibd-surface,#fff);border:1px solid var(--ibd-line); border-radius:var(--ibd-r);padding:clamp(1.4rem,3vw,2.2rem)} .ibd-nl__form form{margin:0} .ibd-nl__form p{margin:0 0 1rem} .ibd-nl__form p:last-child{margin-bottom:0} .ibd-nl__form label{display:block;font-size:.95rem;font-weight:600;color:var(--ibd-ink);margin-bottom:.4rem} .ibd-nl__form input[type=text],.ibd-nl__form input[type=email]{ width:100%;padding:.8rem .9rem;font:inherit;font-size:1rem;color:var(--ibd-ink); background:#fff;border:1px solid var(--ibd-line);border-radius:10px} .ibd-nl__form input[type=text]:focus,.ibd-nl__form input[type=email]:focus{ outline:2px solid var(--ibd-accent-2,#C6A575);outline-offset:1px;border-color:transparent} .ibd-nl__form .ibd-mcconsent{display:flex;gap:.6rem;align-items:flex-start; font-size:.92rem;font-weight:400;line-height:1.6;color:var(--ibd-ink-2)} .ibd-nl__form .ibd-mcconsent input[type=checkbox]{margin-top:.25rem;flex:none;accent-color:var(--ibd-primary)} .ibd-nl__form .ibd-mcconsent a{color:var(--ibd-primary)} .ibd-nl__form input[type=submit]{width:100%;cursor:pointer;font:inherit;font-size:1.02rem;font-weight:600; padding:.9rem 1.4rem;border:0;border-radius:999px;background:var(--ibd-accent);color:#2A2113} .ibd-nl__form input[type=submit]:hover{filter:brightness(.96)} .ibd-nl__form .mc4wp-alert{margin:1rem 0 0;font-size:.98rem;line-height:1.6} .ibd-nl__form .mc4wp-success{color:#2F6B45} .ibd-nl__form .mc4wp-error{color:#8C3A2E} /* ================================================================== EDITABILITY PASS — measures moved out of inline styles ------------------------------------------------------------------ Gutenberg validates every block against what its own save() would emit, so a hand-written style="max-width:…" on a Heading or a Paragraph marks the block "invalid" and locks it out of normal editing. The measures below are exactly the values those inline styles carried, moved here unchanged and scoped to the section they belong to, so the rendering is identical and the blocks stay editable. Nothing here introduces a new value. ================================================================== */ #problem .ibd-startedge{max-width:24ch!important} #regression .ibd-startedge{max-width:28ch!important} #ladder .ibd-startedge{max-width:24ch!important} main .ibd-panel > p.has-xxl-font-size, main .ibd-promise > p.has-xxl-font-size{max-width:32ch!important;margin-inline:auto!important} /* Copy promoted out of a raw-HTML wrapper becomes a direct child of the constrained layout, so it needs the same RTL escape as .ibd-startedge (see "RTL: a narrower max-width must not centre the block" above): without it a capped measure drifts to the middle of the column. */ main .ibd-deep__h, main .ibd-deep__sub, main .ibd-deep__lead, main .ibd-packs__lead{margin-inline-start:0!important;margin-inline-end:auto!important} /* The closing CTA's gold button is raw HTML, so promoting the copy around it to real blocks made the link a direct layout child and WordPress started giving it the block gap. It never had a top margin; this keeps it at zero. */ main .ibd-finalcta > a.ibd-btn{margin-block-start:0} /* ================================================================== HEADER DROPDOWNS ------------------------------------------------------------------ Three top-level items carry a short submenu. Core supplies the markup and the show/hide behaviour; everything below is the brand surface for it. Nothing here touches the top-level bar itself. The navigation still collapses to the overlay at 1024px, so these rules only apply on real desktop widths. ================================================================== */ .ibd-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container{ background-color:var(--wp--preset--color--base); border:1px solid var(--ibd-line); border-radius:var(--ibd-rs,6px); box-shadow:0 18px 40px -26px rgba(51,39,26,.55); padding:.4rem 0; width:max-content!important;min-width:14rem;max-width:min(24rem,88vw); inset-block-start:calc(100% + .55rem); /* Core pins the panel with `left:0`, which in an RTL bar drops it to the wrong side of its own item and pushes it toward the screen edge. The panel has to hang from the item's start (right) edge and open inward. Physical properties with !important because core's own rule wins on specificity, the same escape used for .ibd-startedge above. */ right:0!important;left:auto!important; } /* The 0.55rem gap between the trigger and the panel has to stay hoverable, or the panel closes while the pointer crosses it. */ .ibd-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before{ content:"";position:absolute;inset-inline:0;bottom:100%;height:.6rem; } .ibd-header .wp-block-navigation__submenu-container .wp-block-navigation-item{width:100%} .ibd-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ display:block;width:100%;padding:.52rem 1.15rem; font-size:.99rem;line-height:1.5;color:var(--ibd-ink-2);white-space:nowrap; /* A Latin product name inside an RTL menu needs its own bidi run, or a trailing ™ lands at the wrong end of the name. */ unicode-bidi:plaintext;text-align:start; } .ibd-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{display:none} .ibd-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .ibd-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{ color:var(--ibd-primary);background:var(--ibd-tint,#F3EDE0); } /* A Latin product name that ends in a trademark sign needs its own LTR run, or the sign is pushed to the wrong end of the name by the RTL context. */ .ibd-header .ibd-nav-ltr .wp-block-navigation-item__label{ direction:ltr;unicode-bidi:isolate;display:inline-block; } .ibd-header .wp-block-navigation__submenu-icon{margin-inline-start:.28rem;padding:0} .ibd-header .wp-block-navigation__submenu-icon svg{width:.7em;height:.7em} /* ---------- the same three groups inside the mobile overlay ---------- */ .ibd-header .is-menu-open .wp-block-navigation__submenu-container{ position:static;opacity:1;visibility:visible; background:transparent;border:0;box-shadow:none; min-width:0;width:100%;padding:0 0 .55rem;margin:0; } .ibd-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{border-bottom:0} .ibd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ padding:.5rem 1.2rem .5rem 0;font-size:1.02rem;color:var(--ibd-ink-2); unicode-bidi:plaintext; } .ibd-header .is-menu-open .wp-block-navigation__submenu-icon{display:none} /* ---------- the CTA has to stay reachable on a phone ---------- Above 600px the header still shows the real button. Below it the button is hidden for width, so the same call to action rides at the foot of the open overlay instead. */ .ibd-header .wp-block-navigation-item.ibd-nav-cta, .ibd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.ibd-nav-cta{display:none} @media(max-width:600px){ .ibd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.ibd-nav-cta{ display:block;border-bottom:0;margin-top:1.3rem} .ibd-header .is-menu-open .ibd-nav-cta .wp-block-navigation-item__content{ background:var(--ibd-primary);color:#fff;border-radius:var(--ibd-rs,6px); text-align:center;font-weight:600;padding:1rem 1.2rem; } .ibd-header .is-menu-open .ibd-nav-cta .wp-block-navigation-item__content:hover{ background:var(--ibd-primary-h,#7A5C2E);color:#fff; } } /* ================================================================== EDITABILITY PASS — homepage components as real blocks ------------------------------------------------------------------ The four "what happened to you" cards used to be one raw-HTML grid with an inline