/* SBR base — design tokens (mirror theme.json) + shared components + utilities. Loaded site-wide. Keep small. */ :root{ /* ===== Incentive / Hiki — Ink & Gold ===== Canonical mood: brand-assets/logo/logo-concepts-v1.html. These short aliases are the single source every component reads (buttons, kickers, hero, all section blocks). They MIRROR theme.json. */ --ink:#12161C; --ink-2:#191F28; --brand-deep:#0B0E12; --paper:#F6F2E9; --surface:#fff; /* --accent = gold (buttons/decoration). --accent-hi = bright highlight. --accent-strong is the text-on-light variant (deepened gold) — passes WCAG AA (≈4.5:1) on --paper for kicker/em/link text. */ --accent:#C8A24C; --accent-hi:#E3C57E; --accent-strong:#8A6A1E; --accent-ink:#14110A; /* cool-grey neutrals tuned to the blue-ink (#12161C), not the old warm browns. */ --line:#E3DFD6; --fg-soft:#363B43; --fg-mute:#697079; --on-dark:#F6F2E9; --on-dark-soft:#B4BAC2; --on-dark-mute:#9AA0A8; --ff:'Heebo',system-ui,sans-serif; --shadow-card:0 2px 6px rgba(18,22,28,.10),0 26px 50px -22px rgba(18,22,28,.5); --shadow-btn:0 14px 28px -12px rgba(200,162,76,.55); } html,body{overflow-x:clip} /* Full-bleed page background — paper extends edge-to-edge so the inner content container (max-width:1240px) doesn't leave white margins on either side of the viewport on archive / single / static pages. */ html{background:var(--paper)} body{font-family:var(--ff);background:var(--paper);color:var(--ink)} /* CTA buttons — primary (filled, sliding arrow) + link (animated underline). Global icon sizing inside any sbr-btn: prevents stretched SVGs in flex rows (e.g., 100%-wide form submit buttons where the arrow would otherwise fill). */ .sbr-btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff);font-weight:700;font-size:16.5px;border:0;border-radius:8px;padding:16px 28px;cursor:pointer;text-decoration:none;transition:background .2s,box-shadow .25s,transform .2s,filter .2s} .sbr-btn--sm{padding:11px 20px;font-size:15px} .sbr-btn--primary{background:var(--accent);color:var(--accent-ink)} /* Hover = glow + lift, NOT dim. Keep the lively amber, add a warm halo and a subtle rise so the button feels more prominent on hover, not muted. */ .sbr-btn--primary:hover{background:var(--accent);filter:brightness(1.05);box-shadow:0 10px 26px -8px rgba(224,162,60,.65),0 2px 10px rgba(224,162,60,.4);transform:translateY(-2px)} .sbr-btn--primary:active{transform:translateY(0);filter:brightness(1)} .sbr-btn>svg{width:18px;height:18px;flex:0 0 auto} .sbr-btn--primary>svg:not(.sbr-lf__spin){transition:transform .25s} .sbr-btn--primary:hover>svg:not(.sbr-lf__spin){transform:translateX(-6px)} .sbr-btn--primary .sbr-arw{width:18px;height:18px;transition:transform .25s} .sbr-btn--primary:hover .sbr-arw{transform:translateX(-6px)} .sbr-link{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--ff);font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;padding:6px 2px} .sbr-link .sbr-ico{width:18px;height:18px} .sbr-link::after{content:"";position:absolute;inset-inline:2px;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s} .sbr-link:hover::after{transform:scaleX(1)} /* eyebrow / kicker */ .sbr-kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff);font-weight:600;font-size:13px;letter-spacing:.14em} .sbr-kicker__bar{width:24px;height:2px;background:var(--accent);display:inline-block} .sbr-kicker__ln{width:30px;height:1.5px;background:var(--accent);opacity:.55;display:inline-block} /* Hebrew headings: relieve the cramped default tracking — small positive value, just enough to breathe without disconnecting letters. */ h1,h2,h3{letter-spacing:.01em} .sbr-hero__title{letter-spacing:.015em} .sbr-stars{color:var(--accent);letter-spacing:1px} /* atmosphere: subtle film grain (data-URI, no request) */ .sbr-grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* motion: LCP-safe staggered reveal (H1 paints immediately) */ @media (prefers-reduced-motion: no-preference){ @keyframes sbr-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes sbr-settle{from{transform:translateY(10px)}to{transform:none}} .sbr-reveal{opacity:0;animation:sbr-rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)} .sbr-reveal-h1{animation:sbr-settle .55s ease both} } /* Non-hero pages: the sticky header sits in normal flow, so no content offset is needed. Hero pages: header is a fixed transparent overlay; the hero paints under it by design. */ /* Pages built from full-bleed SBR section blocks (hero / process) own their own vertical rhythm — drop the .site-main padding and inter-block margins so the dark bands sit flush. */ .sbr-fullbleed #primary{padding-block:0} .sbr-fullbleed .entry-content>*{margin-block:0} /* Archive + team + project + archive-project: each section inside these templates manages its own gutter and explicitly opts into full-bleed dark CTAs / heros without using the `100vw + margin:calc(50% - 50vw)` escape trick — so the parent `.site-main` MUST be edge-to-edge (no padding, no max-width) for those CTAs to reach the viewport edges. NOTE: `.site-main--service` is INTENTIONALLY OMITTED here. The 3 service layouts (sbr-sd--a/b/c) put their gutter ON the main element via `.sbr-sd--a{max-width:1160px;padding:30px 24px 70px}` etc., and the dark sections that NEED to be full-bleed (layout B hero, layout C band) already use the `width:100vw; margin-inline:calc(50% - 50vw)` escape. Resetting main here would re-introduce the edge-hugging bug Shai flagged 2026-06-03. The `html` prefix bumps specificity from (0,1,0) → (0,1,1) so we win against the legacy `.site-main` rule in style.css (which loads AFTER base.css). */ html .site-main--archive, html .site-main--team, html .site-main--project, html .site-main--archive-project, html .site-main--blog, html .site-main--post, html .site-main--404, html .site-main--ty, html .site-main--service-area{padding-block:0;padding-inline:0;max-width:none;margin:0} /* WhatsApp — small recognizable green CTA. Utility-bar link (desktop) + floating mobile button. Skipped on contact / thanks pages via PHP. */ .sbr-util__wa{display:inline-flex;align-items:center;gap:6px;color:#25D366;font-weight:600} .sbr-util__wa:hover{color:#1ea554} .sbr-util__wa svg{width:15px;height:15px;flex:0 0 auto} .sbr-wa-float{position:fixed;bottom:24px;inset-inline-end:24px;z-index:60; width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff; display:none;align-items:center;justify-content:center;text-decoration:none; box-shadow:0 12px 28px -10px rgba(37,211,102,.55),0 0 0 1px rgba(0,0,0,.04); transition:transform .2s ease,box-shadow .2s ease} .sbr-wa-float:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(37,211,102,.65),0 0 0 1px rgba(0,0,0,.04)} .sbr-wa-float svg{width:32px;height:32px;display:block} @media(max-width:780px){ .sbr-wa-float{display:inline-flex;bottom:max(20px,env(safe-area-inset-bottom));inset-inline-end:max(18px,env(safe-area-inset-right))} } @media(prefers-reduced-motion:reduce){.sbr-wa-float{transition:none}} /* Archive layout switcher (admin-only) — small pill bar above the services archive list that lets the admin flip between editorial and photo layouts via ?layout=photo. Styles live here so both archive CSS bundles can render it consistently. Hidden from regular visitors by the PHP helper. */ .sbr-arch__switcher{max-width:1200px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:12.5px;color:var(--fg-mute);line-height:1.2} .sbr-arch__switcher b{color:var(--ink);font-weight:600;margin-inline-end:4px} .sbr-arch__switcher a{color:var(--fg-mute);text-decoration:none;padding:5px 11px;border-radius:99px; border:1px solid var(--line);background:var(--surface);transition:background .2s,color .2s,border-color .2s} .sbr-arch__switcher a:hover{background:var(--paper);color:var(--ink);border-color:var(--accent)} .sbr-arch__switcher a.is-active{background:var(--ink);color:var(--accent);border-color:var(--ink);font-weight:600} .sbr-arch__switcher-hint{font-size:11px;color:var(--fg-mute);opacity:.7;margin-inline-start:auto} @media(max-width:560px){.sbr-arch__switcher-hint{margin-inline-start:0;width:100%}} /* Breadcrumbs — RankMath-rendered, kit-styled. Auto on every non-front page. On full-bleed hero pages, sits as a hairline band right above the hero. */ .sbr-crumbs{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:2} .sbr-crumbs__in{max-width:1240px;margin:0 auto;padding:10px 48px;font-size:13.5px;color:#5f666f;line-height:1.4}/* a11y: match crumb link color so link & surrounding text are identical (link-in-text-block) + 4.5:1 on cream */ .sbr-crumbs__in p,.sbr-crumbs__in nav{margin:0} .sbr-crumbs a{color:#5f666f;text-decoration:none;transition:color .2s}/* a11y: 4.5:1 on --paper cream (was --fg-mute #697079 = 4.48, just under) */ .sbr-crumbs a:hover{color:var(--accent-strong)} .sbr-crumbs .separator{color:var(--accent);margin:0 6px;opacity:.7} .sbr-crumbs .last,.sbr-crumbs [aria-current]{color:var(--ink);font-weight:600} @media(max-width:680px){.sbr-crumbs__in{padding:9px 22px;font-size:12.5px}} /* ===================================================================== PROSE · shared rich-text styling — `.sbr-prose` only. --------------------------------------------------------------------- Originally I tried targeting both `.entry-content` AND `.sbr-prose` for typography (h2/p/ul/blockquote/etc.) since "typography is safe on block pages". WRONG: dark-background blocks (CTA banner, process-steps, stats counter) rely on their own light text color, but `.entry-content p {color: var(--fg-soft)}` (medium gray) wins specificity over the block's inheritance and turns text invisible on dark surfaces. Now: ALL prose styling — both layout AND typography — is scoped to `.sbr-prose` only. Long-form templates opt in by adding the class. Block-based pages (home/about/contact) keep their own block typography. ===================================================================== */ /* Default leading & color for the prose container. Per-layout rules can override specific elements but should not redefine the whole system. */ .sbr-prose{color:var(--ink);font-size:17px;line-height:1.85} /* --- Headings (H1 belongs to the page chrome, not prose) --- */ .sbr-prose h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin-block:40px 14px} .sbr-prose h3{font-size:clamp(19px,2vw,22px);font-weight:700;line-height:1.3;color:var(--ink);margin-block:28px 10px} .sbr-prose h4{font-size:17.5px;font-weight:700;color:var(--ink);margin-block:22px 8px} .sbr-prose h2:first-child, .sbr-prose h3:first-child{margin-top:0} /* --- Paragraph + emphasis --- IMPORTANT: use margin-block-end / margin-bottom only — never the `margin` shorthand here. The shorthand would expand to `margin-left:0` etc., which beats the `margin-inline:auto` centering the prose column system applies to direct children. Same rule for all the per-element typography below. */ .sbr-prose p{margin-bottom:18px;color:var(--fg-soft)} .sbr-prose p:last-child{margin-bottom:0} .sbr-prose strong{color:var(--ink);font-weight:700} .sbr-prose em{font-style:italic} .sbr-prose small{font-size:.85em;color:var(--fg-mute)} /* --- Lists. RTL: bullets/numbers sit on the visual RIGHT. Custom amber marker via ::marker for both ul + ol — recognizable kit accent. --- */ .sbr-prose ul,.sbr-prose ol{margin-bottom:20px;padding-inline-start:26px;color:var(--fg-soft)} .sbr-prose li{margin-bottom:8px;line-height:1.7} .sbr-prose li::marker{color:var(--accent-strong);font-weight:700} .sbr-prose ol{padding-inline-start:30px} .sbr-prose ol li{padding-inline-start:4px} /* Nested lists tighter and dimmed one notch */ .sbr-prose ul ul,.sbr-prose ul ol,.sbr-prose ol ul,.sbr-prose ol ol{margin-block:8px} /* --- Inline links inside body copy (NOT buttons / nav). Amber kit accent. Scoped to text-bearing containers so CTAs in the same prose tree keep their own styling. Editors writing in Gutenberg produce link tags with no class — the :where() keeps specificity at (0,1,0) so any explicit class on a link still wins. --- */ :where(.sbr-prose) :is(p,li,td,th,blockquote,figcaption) a{ color:var(--accent-strong); text-decoration:underline; text-decoration-color:rgba(224,162,60,.40); text-decoration-thickness:1.5px; text-underline-offset:3px; transition:color .15s,text-decoration-color .15s} :where(.sbr-prose) :is(p,li,td,th,blockquote,figcaption) a:hover{ color:var(--ink);text-decoration-color:var(--accent)} /* --- Blockquote — amber border-inline-start (visual right in RTL) + italic --- */ .sbr-prose blockquote{ margin-block:24px;padding:14px 22px; border-inline-start:4px solid var(--accent); background:rgba(224,162,60,.06); border-radius:0 10px 10px 0; color:var(--ink);font-size:18px;line-height:1.7;font-style:italic} .sbr-prose blockquote p:last-child{margin-bottom:0} .sbr-prose blockquote cite{ display:block;margin-top:8px;font-size:14px;font-style:normal;color:var(--fg-mute)} /* --- HR — subtle hairline, breathing room --- */ .sbr-prose hr{ border:0;height:1px;background:var(--line);margin-block:36px} /* --- Inline code & pre — minimal, readable. Kit isn't dev-doc-heavy but when editors paste code (or RankMath emits a snippet) it shouldn't break. --- */ .sbr-prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:rgba(29,26,22,.06);padding:.15em .4em;border-radius:5px;color:var(--ink)} .sbr-prose pre{ background:#1d1a16;color:#f4f1ea;padding:18px 22px;border-radius:12px; overflow-x:auto;font-size:14px;line-height:1.6;margin-bottom:24px} .sbr-prose pre code{background:0;padding:0;color:inherit} /* --- Figures & images. Default: rounded + soft shadow. Width is governed by the prose-column system below — figure/img inherit max-width from their grid placement. --- */ .sbr-prose figure{margin-block:24px} .sbr-prose img{ max-width:100%;height:auto;border-radius:12px;display:block; box-shadow:0 12px 28px -16px rgba(29,26,22,.25)} .sbr-prose figcaption{ margin-top:8px;font-size:14px;color:var(--fg-mute);text-align:center;line-height:1.5} /* ===================================================================== PROSE COLUMN SYSTEM — three width tiers via WP alignment classes --------------------------------------------------------------------- The pattern Medium / Substack / NYT / WP Twenty-Twenty-Four use: text holds a narrow readable column (~720px = ~65 Hebrew chars per line), while media/tables/cover-images opt INTO wider tiers via the alignment buttons in the Gutenberg editor (אזורי יישור). Editor experience: - Plain block (no alignment) → 720px (default reading) - "Wide width" button (alignwide) → 1080px (bold figure) - "Full width" button (alignfull) → fills the parent container - "Align left/right" (alignleft/right) → float inline-start/end with text wrapping Customizable via CSS variables on any container: --prose-w narrow text column max (default 720px) --prose-wide-w alignwide max (default 1080px) ===================================================================== */ /* IMPORTANT scoping decision: the layout / alignment rules below target `.sbr-prose` ONLY (not `.entry-content`). The `.entry-content` class is added by WordPress on every page/post wrapper — including block-based pages like Home/About/Contact that use full-bleed sbr/* blocks. Clamping their direct children to 720px would shrink every hero/section to a narrow column. So we use an OPT-IN class — long-form templates (service singles, blog single, project body, team bio, service-area pages) add `sbr-prose` to their content wrapper; block-based templates don't. Per-element typography (h2/p/ul/table/blockquote/etc., further up) still targets both `.entry-content` and `.sbr-prose` — it's safe on block pages because block elements have their own class selectors that win specificity. */ .sbr-prose{ --prose-w:720px; --prose-wide-w:1080px} /* Default placement: every direct child of prose caps at --prose-w and centers inside the available container. */ .sbr-prose > *{max-width:var(--prose-w);margin-inline:auto} /* WIDE — figure/table/etc. breaks out of the reading column. */ .sbr-prose > .alignwide{max-width:var(--prose-wide-w)} /* FULL — fills the prose container (not the viewport — for true 100vw bands use a
outside the prose container with the `width:100vw; margin-inline:calc(50% - 50vw)` escape). */ .sbr-prose > .alignfull{max-width:none} .sbr-prose > .alignfull img{width:100%;border-radius:0;box-shadow:none} /* CENTER — explicit centering (effectively the default). */ .sbr-prose > .aligncenter{margin-inline:auto} /* LEFT / RIGHT — logical floats. RTL: alignleft hugs visual RIGHT (start); alignright hugs visual LEFT (end). Matches WP core RTL convention. */ .sbr-prose > .alignleft{ float:inline-start; margin-block:6px 14px;margin-inline-end:24px;margin-inline-start:0; max-width:min(45%,420px)} .sbr-prose > .alignright{ float:inline-end; margin-block:6px 14px;margin-inline-start:24px;margin-inline-end:0; max-width:min(45%,420px)} /* Mobile: floats stack full-width. */ @media(max-width:680px){ .sbr-prose > .alignleft, .sbr-prose > .alignright{ float:none;margin:18px auto;max-width:100%} } /* === Gutenberg Media+Text — image+text side-by-side, RTL-safe === */ .sbr-prose > .wp-block-media-text{ display:grid; grid-template-columns:50% 50%; gap:32px;align-items:center; max-width:var(--prose-wide-w); margin:36px auto} .sbr-prose > .wp-block-media-text .wp-block-media-text__media{margin:0} .sbr-prose > .wp-block-media-text .wp-block-media-text__media img{ width:100%;height:auto;border-radius:12px; box-shadow:0 12px 28px -16px rgba(29,26,22,.25)} .sbr-prose > .wp-block-media-text .wp-block-media-text__content > *{margin-inline:0;max-width:none} @media(max-width:680px){ .sbr-prose > .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:1fr;gap:20px} } /* ===================================================================== ADDITIONAL GUTENBERG BLOCKS — kit-styled defaults so editors who drop in any common block get a result that looks on-brand without thinking. ===================================================================== */ /* Gallery: responsive grid, default 3-up, kit border-radius + shadow */ .sbr-prose > .wp-block-gallery{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;max-width:var(--prose-wide-w);margin-block:30px} .sbr-prose > .wp-block-gallery figure{margin:0} .sbr-prose > .wp-block-gallery img{ width:100%;height:100%;object-fit:cover;aspect-ratio:4/3; border-radius:10px} /* Gallery `columns-N` modifier — Gutenberg adds this class for explicit column counts */ .sbr-prose > .wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)} .sbr-prose > .wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)} .sbr-prose > .wp-block-gallery.columns-4{grid-template-columns:repeat(4,1fr)} @media(max-width:680px){ .sbr-prose > .wp-block-gallery, .sbr-prose > .wp-block-gallery.columns-3, .sbr-prose > .wp-block-gallery.columns-4{grid-template-columns:repeat(2,1fr);gap:10px} } /* Columns block: editor can split content into N equal columns */ .sbr-prose > .wp-block-columns{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px;max-width:var(--prose-wide-w);margin-block:30px;align-items:start} .sbr-prose > .wp-block-columns .wp-block-column{min-width:0} .sbr-prose > .wp-block-columns .wp-block-column > *{max-width:none} @media(max-width:680px){ .sbr-prose > .wp-block-columns{grid-template-columns:1fr;gap:24px} } /* Cover block: a full-bleed band with overlay text. Behaves like alignwide by default (kit prefers wide cover bands over forced 100vw). Editor can opt into alignfull for true edge-to-edge. */ .sbr-prose > .wp-block-cover{ max-width:var(--prose-wide-w); min-height:340px;border-radius:14px;overflow:hidden; margin-block:30px; display:grid;place-items:center} .sbr-prose > .wp-block-cover.alignfull{border-radius:0} .sbr-prose > .wp-block-cover .wp-block-cover__inner-container{ max-width:680px;text-align:center;color:#fff;padding:36px 24px} .sbr-prose > .wp-block-cover h1, .sbr-prose > .wp-block-cover h2, .sbr-prose > .wp-block-cover h3, .sbr-prose > .wp-block-cover p{color:inherit} /* Pullquote — big bold quote that stands out from blockquote. Wider tier. */ .sbr-prose > .wp-block-pullquote{ max-width:var(--prose-wide-w); margin-block:32px;padding:28px 24px; border-block:2px solid var(--accent); background:transparent;text-align:center} .sbr-prose > .wp-block-pullquote p{ font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.4; color:var(--ink);margin-bottom:10px;max-width:none} .sbr-prose > .wp-block-pullquote cite{ display:block;font-size:14px;color:var(--fg-mute);font-style:normal} /* Buttons block: center the row, allow editor to use Gutenberg buttons + keep kit's CTA style untouched (.sbr-btn rules win because higher specificity). */ .sbr-prose > .wp-block-buttons{ display:flex;flex-wrap:wrap;gap:14px;justify-content:center; margin-block:24px} .sbr-prose > .wp-block-buttons .wp-block-button__link{ display:inline-flex;align-items:center;gap:10px; background:var(--accent);color:var(--ink); padding:13px 24px;border-radius:10px; font-weight:700;font-size:15.5px;text-decoration:none; transition:background .2s,transform .2s} .sbr-prose > .wp-block-buttons .wp-block-button__link:hover{ background:var(--accent-strong);transform:translateY(-1px);color:#fff} /* Embed block (YouTube / Vimeo / Twitter / etc.): responsive iframe. Default narrow; alignwide makes it bigger; alignfull edge-to-edge. */ .sbr-prose > .wp-block-embed{margin-block:30px} .sbr-prose > .wp-block-embed .wp-block-embed__wrapper{ position:relative;padding-bottom:56.25%;height:0;overflow:hidden; border-radius:12px;background:rgba(0,0,0,.05)} .sbr-prose > .wp-block-embed iframe{ position:absolute;inset:0;width:100%;height:100%;border:0} /* Audio/Video blocks: just align with the kit aesthetic */ .sbr-prose > .wp-block-audio audio, .sbr-prose > .wp-block-video video{width:100%;display:block;border-radius:10px} /* --- Tables. Common for kit pages: pricing comparison, feature matrix, service tiers. Mobile gets horizontal scroll inside a wrapper. The kit already ships a `.sbr-tw` wrapper helper in PHP — but raw from the editor also renders well via these rules. --- */ .sbr-prose table{ width:100%;border-collapse:collapse;margin-block:24px; font-size:15.5px;background:#fff; border:1px solid var(--line);border-radius:12px;overflow:hidden} .sbr-prose thead{background:var(--ink);color:#fff} .sbr-prose th{ padding:13px 16px;text-align:start;font-weight:700;font-size:14px; letter-spacing:-.005em;color:#fff;border-bottom:0} .sbr-prose td{ padding:13px 16px;border-top:1px solid var(--line);color:var(--ink);vertical-align:top} /* Zebra rows for scannability */ .sbr-prose tbody tr:nth-child(even){background:rgba(29,26,22,.025)} .sbr-prose tbody tr:hover{background:rgba(224,162,60,.05)} /* ===================================================================== MOBILE TABLES — card-stack by default (premium UX), horizontal-scroll as opt-out for data-heavy / no-thead tables. --------------------------------------------------------------------- Default behavior (tables WITH a thead): - thead is hidden - each tbody row becomes a card (bordered, padded, rounded) - each
renders as a "label value" row inside the card, where the label comes from `data-label` (auto-injected by prose-tables.js from the matching ) - reads naturally on phone screens; no horizontal scroll needed Editor opt-out: - add CSS class `is-scroll` to the table (Block Editor → Advanced → Additional CSS Class) - falls back to horizontal scroll mode (kit's old behavior) Tables WITHOUT a thead automatically fall to horizontal scroll too — we have no label source for cards. The old `table{min-width:540px}` rule was REMOVED — it caused intrinsic min-content sizing to propagate up through figure → prose → article on mobile, inflating the whole layout to 540px wide on 390px viewports (Shai's overflow bug 2026-06-03). The card-stack uses display:block, no min-width, so the table no longer constrains its ancestors. */ @media(max-width:680px){ /* === CARD STACK (default for tables with thead) === */ .sbr-prose table:has(thead):not(.is-scroll){ display:block;min-width:0;border:0;background:transparent; border-radius:0;box-shadow:none;overflow:visible} .sbr-prose table:has(thead):not(.is-scroll) thead{display:none} .sbr-prose table:has(thead):not(.is-scroll) tbody{display:block} .sbr-prose table:has(thead):not(.is-scroll) tr{ display:block;background:#fff;border:1px solid var(--line); border-radius:12px;padding:14px 16px;margin-bottom:12px} /* keep zebra band — slightly more subtle to suit the card paper */ .sbr-prose table:has(thead):not(.is-scroll) tbody tr:nth-child(even){background:rgba(29,26,22,.03)} .sbr-prose table:has(thead):not(.is-scroll) td{ display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:9px 0;border-top:1px solid var(--line);border-bottom:0; font-size:15px;color:var(--ink)} .sbr-prose table:has(thead):not(.is-scroll) td:first-child{border-top:0;padding-top:2px} .sbr-prose table:has(thead):not(.is-scroll) td:last-child{padding-bottom:2px} /* Label (column header) — bold + dim. Comes from data-label, injected by JS. */ .sbr-prose table:has(thead):not(.is-scroll) td::before{ content:attr(data-label); font-weight:700;color:var(--fg-mute);font-size:13px; flex:0 0 auto;text-align:start} /* === HORIZONTAL SCROLL (opt-out + tables without thead) === */ .sbr-prose > figure.wp-block-table, .sbr-prose > figure:has(table:not([class*="is-scroll"]):not(:has(thead))){ overflow-x:auto;-webkit-overflow-scrolling:touch; max-width:100%;min-width:0} /* `min-width` on the table is what triggers the horizontal scroll — only apply it to tables we WANT to scroll (no-thead OR opted-in). Without `min-width`, the inner table just shrinks to fit and becomes illegible — defeating the purpose. */ .sbr-prose table.is-scroll, .sbr-prose table:not(:has(thead)){min-width:540px} } /* --- Highlighted callout — `.sbr-callout` wrapper for editors who want a visible "note" box inside body copy. Wrap any block content in a div with this class. Not required — but kit-supported. --- */ .sbr-prose .sbr-callout{ background:rgba(224,162,60,.08); border:1px solid rgba(224,162,60,.30); border-inline-start:4px solid var(--accent); border-radius:12px;padding:18px 22px;margin-block:24px;color:var(--ink)} .sbr-prose .sbr-callout p:last-child{margin-bottom:0}