. That wrapper is doing real work, not decoration: - The reset below only applies inside it, so it cannot flatten Bricks headings or ACSS spacing anywhere else on the site. - Component classes are prefixed `m-`, so a Bricks-authored `.card` or `.badge` dropped inside a plugin section does not collide with ours. - Tokens are prefixed `--m-`, so nothing here reads or writes an ACSS variable. This file has no dependency on the site's framework at all. Nothing consumes this file yet. It is enqueued but inert until each surface is rewritten onto it, one at a time. Adding it cannot change how any existing page looks. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Inter -------------------------------------------------------------------------- Self-hosted variable Inter. One file per subset covering the whole 100-900 weight axis, so every weight the UI uses costs a single download instead of one request per cut. Paths are relative to this stylesheet, which is what makes them survive the plugin being installed under any directory name. font-display: swap renders the fallback immediately and swaps Inter in when it arrives. The alternative, `block`, leaves invisible text for up to three seconds on a slow connection. The latin-ext file carries the accented characters the French and other Latin-script translations need. unicode-range means a purely English page never downloads it. Hebrew is NOT covered — Inter has no Hebrew glyphs. Hebrew interface text falls through to --m-font-he. See the note on that token below. -------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/web/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/web/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- The two dialog hosts are listed alongside .mishnah-ui because they are not inside it - SweetAlert and Plainsheet both append to , and the .mishnah-ui wrapper lives *within* the popup they create. Without this the host's own rules below (background-color, color, box-shadow) reference tokens that do not exist at that level, the declarations are invalid at computed-value time, and the popup renders with no background at all. -------------------------------------------------------------------------- */ .mishnah-ui, .swal2-popup.mishnah-ui-modal, .pbs-container.mishnah-ui-sheet { /* ====================================================================== BRAND — the five colors, and the only block you should need to edit. Every accent in the plugin derives from these. Nothing below references a raw color, so changing a value here re-skins every surface at once. They are HSL channel triplets rather than hex so that any of them can be used at a custom alpha — hsl(var(--m-brand) / 12%) — which a hex cannot do without a second token for every opacity. The hex you gave me is in the comment beside each one; to change a color, convert the new hex to HSL and replace the three numbers. hex HSL was (ACSS) used for ------------ --------------------- ----------------- ------------------ #2e77d1 213 64% 50% --primary-medium primary actions #da6648 12 66% 57% --action links, hovers #0a1a2e 213 64% 11% --primary high-emphasis fill #121416 210 10% 8% --base body text #392e1d 36 33% 17% --accent warm emphasis ====================================================================== */ --m-brand: 213 64% 50%; /* #2e77d1 */ --m-action: 12 66% 57%; /* #da6648 */ --m-navy: 213 64% 11%; /* #0a1a2e */ --m-umber: 36 33% 17%; /* #392e1d */ /* ---- Derived from the brand ------------------------------------------- Same hue, shifted lightness. Kept as their own tokens rather than computed inline so a hover or a wash can be hand-tuned without touching the base color. ----------------------------------------------------------------------- */ --m-brand-hover: 213 64% 42%; /* #2560a8 — darker step of --m-brand */ --m-brand-ink: 0 0% 100%; /* text on a brand-filled surface */ --m-brand-soft: 213 85% 96%; /* #eef4fd — tinted wash */ --m-brand-border: 213 60% 86%; /* #c5d9f3 */ --m-action-hover: 12 60% 48%; /* #c44f31 */ --m-action-soft: 12 70% 96%; /* #fdefec */ /* Surfaces and text */ --m-bg: 0 0% 100%; --m-fg: 210 10% 8%; /* #121416 — your --base */ --m-card: 0 0% 100%; --m-card-fg: 210 10% 8%; --m-muted: 210 8% 96%; --m-muted-fg: 210 6% 44%; --m-hover: 210 8% 96%; /* hover wash. Named --m-hover, not --m-accent, so it is never confused with your ACSS --accent (#392e1d), which is a dark warm brown. */ --m-hover-fg: 210 10% 8%; /* "Ink" — the near-black fill for the single highest-emphasis button on a view. Your --primary navy rather than a neutral black. */ --m-ink: 213 64% 11%; /* #0a1a2e */ --m-ink-fg: 0 0% 98%; --m-border: 210 8% 90%; --m-input: 210 8% 90%; --m-ring: 213 64% 11%; --m-danger: 0 72% 51%; --m-danger-fg: 0 0% 98%; /* Warning. Added for the organisation statuses - an application that is pending is neither an error nor a success, and painting it as either misreports it. Reserved for state, like --m-danger; never an accent. */ --m-warn: 32 85% 32%; --m-warn-soft: 40 90% 94%; --m-warn-border: 38 75% 80%; /* --- Data colors ------------------------------------------------------- The track is a lighter step of the SAME hue as the fill, so a bar reads as one scale rather than two unrelated colors. Green means ONE thing here: finished. It was briefly doing double duty - "available to pledge" in the visitor's dialog and "complete" in the owner's - which also meant the default state of most perek tiles was the loudest colour on screen. Available is neutral now. --m-viz-open is the older available-green (#2fb64d) the perek chips on the manage-pledge page still use, as literal hex. Kept as a token so that screen can be moved onto it when it is rebuilt, and so the value has one recorded home rather than being retyped from memory. ----------------------------------------------------------------------- */ --m-viz-fill: 213 64% 50%; /* matches --m-brand */ --m-viz-track: 213 85% 89%; --m-viz-open: 133 59% 45%; /* #2fb64d — legacy "available" chips */ --m-viz-open-border: 141 100% 26%; /* #00861e */ --m-viz-done: 120 86% 34%; /* #0ca30c — finished */ --m-viz-done-track: 120 60% 88%; --m-success-text: 120 100% 19%; /* green that is actually readable as text */ /* Type 16px, matching the site's body scale. Expressed in rem against the site's 62.5% root, so 1.6rem = 16px - the same convention the rest of your CSS is authored in. */ --m-text-base: 1.6rem; --m-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Hebrew *interface* text — names in form fields, chart headings. Mishnah body text keeps Taamey D; a text face is wrong at UI sizes. */ --m-font-he: "Heebo", "Assistant", "Arial Hebrew", var(--m-font); --m-radius: 1.04rem; /* ---- Page width -------------------------------------------------------- The plugin does NOT constrain page width. Its screens are dropped inside a Bricks container, and that container is what lines them up with the header and footer - two things both setting a max-width is how they end up disagreeing by a few pixels. Set --m-page-max to a length if you ever need the plugin to constrain itself instead (standalone shortcode, no container around it). --m-measure-* are different in kind: those are READING measures, not page width. A form column and a hero paragraph have an optimum line length regardless of how wide the page is, so they stay capped. ----------------------------------------------------------------------- */ --m-page-max: none; --m-page-pad: 0rem; /* Gap between the dashboard sidebar and its content. Not a page gutter - set it to 0 to butt the two columns together. */ --m-dash-gutter: 3.2rem; --m-measure-form: 70.4rem; /* Wider, for a form carrying side-by-side cards rather than single fields */ --m-measure-form-wide: 92rem; --m-measure-hero: 73.6rem; --m-shadow-sm: 0 1px 2px 0 hsl(240 6% 10% / 0.05); --m-shadow-md: 0 4px 6px -1px hsl(240 6% 10% / 0.07), 0 2px 4px -2px hsl(240 6% 10% / 0.05); --m-shadow-lg: 0 10px 20px -5px hsl(240 6% 10% / 0.10), 0 4px 8px -4px hsl(240 6% 10% / 0.06); --m-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- 1b. Section reset Automatic.css pads every section that is not inside another section: :where(section:not(section section)) { padding-block: var(--section-padding-block); padding-inline: var(--gutter); } That is a page-layout rule, and it was landing on the plugin's own sections - .m-seder-group, .m-submissions, .m-chart-hero, .m-section - none of which want it. They space themselves, and they sit inside a container that already supplies the page gutter, so the framework's padding was a second one inside the first. `:where()` scores zero, so anything of ours wins. But it only wins on properties we actually declare, which is why this states both axes rather than trusting a shorthand elsewhere to cover it. Sections that DO want padding set it in their own rule, after this. -------------------------------------------------------------------------- */ .mishnah-ui section { padding-block: 0; padding-inline: 0; } /* -------------------------------------------------------------------------- 2. Scoped reset Deliberately narrow. It normalises the elements the plugin actually emits and leaves everything else to the theme, because this selector still matches anything a Bricks user nests inside a plugin section. -------------------------------------------------------------------------- */ .mishnah-ui, .mishnah-ui *, .mishnah-ui *::before, .mishnah-ui *::after { box-sizing: border-box; } .mishnah-ui { font-family: var(--m-font); font-size: var(--m-text-base); line-height: 1.5; color: hsl(var(--m-fg)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mishnah-ui h1, .mishnah-ui h2, .mishnah-ui h3, .mishnah-ui h4, .mishnah-ui p, .mishnah-ui figure, .mishnah-ui blockquote, .mishnah-ui dl, .mishnah-ui dd { margin: 0; } /* * Headings inside the app use the UI face, not the site's display face. * * The theme sets a display font on h1-h6 globally, which is right for a * marketing page and wrong for an interface: at 12-15px, a display face * applied to two dozen small section labels reads as noise rather than * personality. * * h1 is left out on purpose - the one main heading per screen keeps the site * font, so the app still looks like part of the site. */ .mishnah-ui h2, .mishnah-ui h3, .mishnah-ui h4, .mishnah-ui h5, .mishnah-ui h6 { font-family: var(--m-font); } .mishnah-ui ul, .mishnah-ui ol { margin: 0; padding: 0; list-style: none; } .mishnah-ui a { color: inherit; text-decoration: none; } .mishnah-ui button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } .mishnah-ui svg { display: block; flex-shrink: 0; } .mishnah-ui :focus-visible { outline: 2px solid hsl(var(--m-ring)); outline-offset: 2px; border-radius: calc(var(--m-radius) - 4px); } /* Visible to screen readers, not to eyes. Used for table captions and for labels whose text would be redundant next to an icon. */ .mishnah-ui .m-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Button -------------------------------------------------------------------------- ACSS collision guard, first. Automatic.css styles buttons with a SUBSTRING match: [class*="btn--"]:where(:not(.btn--none, .wp-block-button)) { ... } That matches m-btn--brand, m-icon-btn--ghost, m-icon-btn--danger and every other modifier here, because each of them contains the characters "btn--". The plugin is meant to be free of ACSS, and by specificity it very nearly is: that selector scores 0-1-0 (`:where()` contributes nothing), so .mishnah-ui .m-btn at 0-2-0 wins every property we actually declare. The leak was the properties we did NOT declare. min-inline-size in particular - ACSS sets it to var(--btn-min-width), and an icon button with a min width is a wide button with a small glyph in the middle, which is why they kept rendering as rectangles however the radius was set. So this block declares the full set that rule touches. Nothing in it is a design decision: each value is either the property's initial value or what the primitives below would have inherited anyway. It sits BEFORE them so the real rules win on order - put it after, and `border-color: transparent` would flatten the outline and danger borders. Remove ACSS from the site and every declaration here is still correct, and does nothing. -------------------------------------------------------------------------- */ .mishnah-ui .m-btn, .mishnah-ui .m-icon-btn, .mishnah-ui .m-link-btn { min-inline-size: 0; font-style: normal; text-transform: none; letter-spacing: normal; text-align: center; text-decoration: none; border-style: solid; border-color: transparent; } .mishnah-ui .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; height: 3.6rem; padding: 0 1.4rem; border-radius: calc(var(--m-radius) - 2px); font-size: 1.6rem; font-weight: 500; white-space: nowrap; transition: background-color 0.15s var(--m-ease), box-shadow 0.15s var(--m-ease), transform 0.1s var(--m-ease); } .mishnah-ui .m-btn svg { width: 1.6rem; height: 1.6rem; } .mishnah-ui .m-btn--sm { height: 3.2rem; padding: 0 1.2rem; font-size: 1.5rem; } .mishnah-ui .m-btn--lg { height: 4.6rem; padding: 0 2.2rem; font-size: 1.7rem; } /* Ink — highest emphasis, one per view */ .mishnah-ui .m-btn--ink { background-color: hsl(var(--m-ink)); color: hsl(var(--m-ink-fg)); box-shadow: var(--m-shadow-sm); } .mishnah-ui .m-btn--ink:hover { background-color: hsl(var(--m-ink) / 0.88); box-shadow: var(--m-shadow-md); } .mishnah-ui .m-btn--ink:active { transform: translateY(1px); box-shadow: var(--m-shadow-sm); } /* Brand — the action that commits to something (pledge, create) */ .mishnah-ui .m-btn--brand { background-color: hsl(var(--m-brand)); color: hsl(var(--m-brand-ink)); box-shadow: var(--m-shadow-sm); } .mishnah-ui .m-btn--brand:hover { background-color: hsl(var(--m-brand-hover)); } .mishnah-ui .m-btn--brand:active { transform: translateY(1px); } .mishnah-ui .m-btn--outline { border: 1px solid hsl(var(--m-input)); background-color: hsl(var(--m-bg)); color: hsl(var(--m-fg)); box-shadow: var(--m-shadow-sm); } .mishnah-ui .m-btn--outline:hover { background-color: hsl(var(--m-hover)); border-color: hsl(var(--m-fg) / 0.2); } /* Destructive actions stay outlined until clicked. A filled red button in a dialog footer competes with the confirm action next to it. */ .mishnah-ui .m-btn--danger { border: 1px solid hsl(var(--m-danger) / 0.3); background-color: transparent; color: hsl(var(--m-danger)); } .mishnah-ui .m-btn--danger:hover { background-color: hsl(var(--m-danger) / 0.08); border-color: hsl(var(--m-danger) / 0.5); } .mishnah-ui .m-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* A button that reads as a link — bulk actions like "Select all" */ .mishnah-ui .m-link-btn { padding: 0; font-size: 1.5rem; font-weight: 500; color: hsl(var(--m-brand)); text-decoration: underline; text-underline-offset: 2px; } .mishnah-ui .m-link-btn:hover { color: hsl(var(--m-brand-hover)); } /* Round icon-only button */ .mishnah-ui .m-icon-btn { display: grid; place-items: center; /* A