/* ========================================================================== STITCH DESIGN SYSTEM Upload to: /wp-content/mu-plugins/stitch/stitch-design-system.css Loaded by: /wp-content/mu-plugins/stitch-design-system.php RULES OF THE ROAD 1. Every custom class in this file is prefixed `stitch-`. No exceptions. WordPress stamps generic words onto (page, home, single, blog, archive, search, error404, logged-in, admin-bar...). A selector that reuses one of those silently styles the entire body. Never do it. 2. There are NO bare element selectors at the top level. No `body {}`, no `h1 {}`, no `a {}`. Element styling only ever appears nested under a `.stitch-` wrapper, so nothing here can leak into theme chrome, Elementor widgets, or WooCommerce templates you didn't mean to touch. 3. Colors are tokens. If you find yourself typing a hex value into a page, the token is missing — add it here instead. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* ---- The mesh ------------------------------------------------------- The base rhythm unit. Every spacing value, every scallop, every stitch dash is derived from this. Change it once and the whole system rescales. Verification target: getComputedStyle(document.body) .getPropertyValue('--stitch-mesh').trim() === '13px' -------------------------------------------------------------------- */ --stitch-mesh: 13px; /* ---- Color: the eleven globals -------------------------------------- These names mirror the Elementor Global Colors exactly. Semantic on purpose: a color can change without the name becoming a lie. -------------------------------------------------------------------- */ --stitch-page: #FFFFFF; /* 1 Page */ --stitch-ink: #3A2A2E; /* 2 Ink */ --stitch-action: #C8383C; /* 3 Action */ --stitch-action-text: #B13135; /* 4 Action Text */ --stitch-panel: #FAE9EA; /* 5 Panel */ --stitch-accent: #6F91BE; /* 6 Accent */ --stitch-accent-text: #4B6281; /* 7 Accent Text */ --stitch-calm: #D3DFCD; /* 8 Calm */ --stitch-rule: #EDDCDE; /* 9 Rule */ --stitch-border-control: #908687; /* 10 Border Control */ --stitch-muted: #6A5D60; /* 11 Muted */ /* Derived, non-global helpers. Not Elementor tokens — internal only. */ --stitch-action-deep: #9C2A2E; --stitch-ink-soft: rgba(58, 42, 46, 0.62); --stitch-shadow: rgba(58, 42, 46, 0.10); /* ---- Type families -------------------------------------------------- */ --stitch-font-display: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", Georgia, serif; --stitch-font-body: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---- Type scale ------------------------------------------------------ The clamp() values Elementor's Global Fonts size field will not accept. Elementor holds the static px fallback; this file supplies the fluid scaling. See section 6 for how it gets applied. -------------------------------------------------------------------- */ --stitch-fs-h1: clamp(38px, 5.5vw, 66px); --stitch-fs-h2: clamp(30px, 3.6vw, 42px); --stitch-fs-h3: 22px; --stitch-fs-h4: 18px; --stitch-fs-body: 18px; --stitch-fs-lede: clamp(19px, 2vw, 23px); --stitch-fs-small: 14px; --stitch-fs-eyebrow: 13px; --stitch-fs-button: 15px; --stitch-lh-h1: 1.05; --stitch-lh-h2: 1.15; --stitch-lh-h3: 1.3; --stitch-lh-h4: 1.35; --stitch-lh-body: 1.75; --stitch-lh-lede: 1.6; --stitch-lh-small: 1.5; --stitch-lh-eyebrow: 1.4; --stitch-lh-button: 1; --stitch-ls-h1: -0.015em; --stitch-ls-h2: -0.01em; --stitch-ls-eyebrow: 0.12em; /* ---- Spacing scale (all mesh multiples) ----------------------------- */ --stitch-space-1: calc(var(--stitch-mesh) * 0.5); /* 6.5px */ --stitch-space-2: var(--stitch-mesh); /* 13px */ --stitch-space-3: calc(var(--stitch-mesh) * 2); /* 26px */ --stitch-space-4: calc(var(--stitch-mesh) * 3); /* 39px */ --stitch-space-5: calc(var(--stitch-mesh) * 5); /* 65px */ --stitch-space-6: calc(var(--stitch-mesh) * 8); /* 104px */ /* ---- Stitch primitives ---------------------------------------------- */ --stitch-dash: 7px; /* stitch length */ --stitch-dash-gap: 5px; /* gap between */ --stitch-thread: 2px; /* thread weight */ --stitch-scallop-w: calc(var(--stitch-mesh) * 2); /* 26px */ --stitch-scallop-h: var(--stitch-mesh); /* 13px */ /* ---- Layout ---------------------------------------------------------- */ --stitch-content-width: 1140px; --stitch-measure: 68ch; /* readable prose cap */ --stitch-radius: 6px; --stitch-radius-lg: 14px; } /* ========================================================================== 2. THE SCALLOP DIVIDER The Step 7 verification target. If this does not render as a row of blush half-circles on the live page, the mu-plugin is not loading. Nothing else in this file will be working either. ========================================================================== */ .stitch-scallop-divider { position: relative; display: block; width: 100%; height: var(--stitch-scallop-h, 13px); margin: var(--stitch-space-4, 39px) 0; background-repeat: repeat-x; background-position: 0 0; background-size: var(--stitch-scallop-w, 26px) var(--stitch-scallop-h, 13px); /* var() fallbacks are deliberate: this rule is the Step 7 verification target, so it must render even if a token is missing or overridden. */ background-image: radial-gradient( circle var(--stitch-mesh, 13px) at 50% 0, var(--stitch-panel, #FAE9EA) 0 calc(var(--stitch-mesh, 13px) - 0.5px), rgba(255, 255, 255, 0) var(--stitch-mesh, 13px) ); } /* The dashed seam that runs along the top of the scallops. */ .stitch-scallop-divider::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0; border-top: var(--stitch-thread, 2px) dashed var(--stitch-rule, #EDDCDE); } /* Scallops hanging upward instead of down. */ .stitch-scallop-divider--flip { transform: scaleY(-1); } /* Deeper variant for section transitions. */ .stitch-scallop-divider--lg { --stitch-scallop-w: calc(var(--stitch-mesh) * 3.5); --stitch-scallop-h: calc(var(--stitch-mesh) * 1.75); } /* Scallops in a different fill — use on a Panel background. */ .stitch-scallop-divider--page { background-image: radial-gradient( circle var(--stitch-mesh) at 50% 0, var(--stitch-page) 0 calc(var(--stitch-mesh) - 0.5px), rgba(255, 255, 255, 0) var(--stitch-mesh) ); } .stitch-scallop-divider--calm { background-image: radial-gradient( circle var(--stitch-mesh) at 50% 0, var(--stitch-calm) 0 calc(var(--stitch-mesh) - 0.5px), rgba(255, 255, 255, 0) var(--stitch-mesh) ); } /* ========================================================================== 3. SEAMS, RULES AND EDGES ========================================================================== */ /* A plain stitched seam — the workhorse horizontal rule. */ .stitch-seam { display: block; width: 100%; height: 0; margin: var(--stitch-space-4) 0; border: 0; border-top: var(--stitch-thread) dashed var(--stitch-rule); } .stitch-seam--ink { border-top-color: var(--stitch-border-control); } .stitch-seam--action { border-top-color: var(--stitch-action); } .stitch-seam--short { width: calc(var(--stitch-mesh) * 5); margin-left: 0; margin-right: auto; border-top-width: 3px; border-top-color: var(--stitch-action); } /* Pinking-shears zigzag edge. Sits at the bottom of a colored section. */ .stitch-pinked-edge { display: block; width: 100%; height: var(--stitch-mesh); background-repeat: repeat-x; background-size: calc(var(--stitch-mesh) * 1.4) var(--stitch-mesh); background-image: linear-gradient(135deg, var(--stitch-panel) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(225deg, var(--stitch-panel) 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 0, 0 0; } /* An outlined "basting stitch" box you can drop around anything. */ .stitch-basted { border: var(--stitch-thread) dashed var(--stitch-border-control); border-radius: var(--stitch-radius); padding: var(--stitch-space-3); } /* ========================================================================== 4. SURFACES ========================================================================== */ .stitch-panel { background-color: var(--stitch-panel); color: var(--stitch-ink); padding: var(--stitch-space-4); border-radius: var(--stitch-radius-lg); } .stitch-panel--calm { background-color: var(--stitch-calm); } .stitch-panel--page { background-color: var(--stitch-page); } /* Panel with an inset stitched outline — the signature surface. */ .stitch-panel--stitched { position: relative; } .stitch-panel--stitched::after { content: ""; position: absolute; inset: var(--stitch-space-2); border: var(--stitch-thread) dashed var(--stitch-page); border-radius: var(--stitch-radius); pointer-events: none; } .stitch-panel--calm.stitch-panel--stitched::after { border-color: var(--stitch-page); } .stitch-card { background-color: var(--stitch-page); color: var(--stitch-ink); border: 1px solid var(--stitch-rule); border-radius: var(--stitch-radius-lg); padding: var(--stitch-space-4); box-shadow: 0 2px 0 0 var(--stitch-rule); } .stitch-card--raised { box-shadow: 0 6px 20px -8px var(--stitch-shadow), 0 2px 0 0 var(--stitch-rule); } /* Full-bleed escape from a boxed container. Watch for a ~15px scrollbar sliver on Windows — add overflow-x:hidden to the wrapper only if it shows. */ .stitch-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ========================================================================== 5. TYPE UTILITIES Add these in an Elementor widget's Advanced -> CSS Classes field. They give you the fluid clamp() scaling that the Global Fonts size field cannot hold. They are deliberately scoped to the widget wrapper, its inner container, and the common inner tags, so one class works on Heading, Text Editor and HTML widgets alike. ========================================================================== */ .stitch-display-1, .stitch-display-1 .elementor-heading-title, .stitch-display-1 .elementor-widget-container > :is(h1, h2, h3, h4, p) { font-family: var(--stitch-font-display); font-weight: 600; font-size: var(--stitch-fs-h1); line-height: var(--stitch-lh-h1); letter-spacing: var(--stitch-ls-h1); color: var(--stitch-ink); } .stitch-display-2, .stitch-display-2 .elementor-heading-title, .stitch-display-2 .elementor-widget-container > :is(h1, h2, h3, h4, p) { font-family: var(--stitch-font-display); font-weight: 600; font-size: var(--stitch-fs-h2); line-height: var(--stitch-lh-h2); letter-spacing: var(--stitch-ls-h2); color: var(--stitch-ink); } .stitch-h3, .stitch-h3 .elementor-heading-title, .stitch-h3 .elementor-widget-container > :is(h1, h2, h3, h4, p) { font-family: var(--stitch-font-body); font-weight: 700; font-size: var(--stitch-fs-h3); line-height: var(--stitch-lh-h3); color: var(--stitch-ink); } .stitch-h4, .stitch-h4 .elementor-heading-title, .stitch-h4 .elementor-widget-container > :is(h1, h2, h3, h4, p) { font-family: var(--stitch-font-body); font-weight: 700; font-size: var(--stitch-fs-h4); line-height: var(--stitch-lh-h4); color: var(--stitch-ink); } .stitch-lede, .stitch-lede .elementor-widget-container > :is(p, div) { font-family: var(--stitch-font-body); font-weight: 400; font-size: var(--stitch-fs-lede); line-height: var(--stitch-lh-lede); color: var(--stitch-ink); } .stitch-body-type, .stitch-body-type .elementor-widget-container > :is(p, div, li) { font-family: var(--stitch-font-body); font-weight: 400; font-size: var(--stitch-fs-body); line-height: var(--stitch-lh-body); color: var(--stitch-ink); } .stitch-small-type, .stitch-small-type .elementor-widget-container > :is(p, div, li) { font-family: var(--stitch-font-body); font-weight: 500; font-size: var(--stitch-fs-small); line-height: var(--stitch-lh-small); color: var(--stitch-muted); } .stitch-eyebrow, .stitch-eyebrow .elementor-heading-title, .stitch-eyebrow .elementor-widget-container > :is(p, div, h1, h2, h3, h4, h5, h6) { font-family: var(--stitch-font-body); font-weight: 700; font-size: var(--stitch-fs-eyebrow); line-height: var(--stitch-lh-eyebrow); letter-spacing: var(--stitch-ls-eyebrow); text-transform: uppercase; color: var(--stitch-action-text); } .stitch-eyebrow--accent, .stitch-eyebrow--accent .elementor-heading-title { color: var(--stitch-accent-text); } .stitch-eyebrow--muted, .stitch-eyebrow--muted .elementor-heading-title { color: var(--stitch-muted); } /* Color-only utilities. */ .stitch-ink-color, .stitch-ink-color .elementor-heading-title { color: var(--stitch-ink); } .stitch-action-color, .stitch-action-color .elementor-heading-title { color: var(--stitch-action-text); } .stitch-accent-color, .stitch-accent-color .elementor-heading-title { color: var(--stitch-accent-text); } .stitch-muted-color, .stitch-muted-color .elementor-heading-title { color: var(--stitch-muted); } /* Cap line length for readability without touching the container width. */ .stitch-measure { max-width: var(--stitch-measure); } .stitch-measure-center { max-width: var(--stitch-measure); margin-left: auto; margin-right: auto; } /* ========================================================================== 6. GLOBAL TYPOGRAPHY PATCH *** WEEK TWO — LEAVE COMMENTED FOR NOW *** Elementor stores each Global Font as a CSS variable named after a generated ID, e.g. --e-global-typography-a1b2c3d-font-size. Those IDs do not exist until the globals are created in Step 5, so they cannot be written here yet. Once Cowork reports the generated IDs (see the setup reference doc), paste them below and uncomment. That makes the fluid clamp() scaling apply to EVERY widget using the global — no per-widget utility class needed, and the utility classes in section 5 become a convenience rather than a requirement. :root { --e-global-typography-DISPLAYH1ID-font-size: var(--stitch-fs-h1); --e-global-typography-DISPLAYH2ID-font-size: var(--stitch-fs-h2); --e-global-typography-LEDEID-font-size: var(--stitch-fs-lede); } ========================================================================== */ /* ========================================================================== 7. BUTTONS Use the Elementor Button widget where you can — it is editable in-panel and keeps click tracking intact. These classes go in its CSS Classes field. `.stitch-button` on a raw is for HTML widgets and email templates. ========================================================================== */ .stitch-button, .stitch-button-style .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--stitch-space-1); font-family: var(--stitch-font-body); font-weight: 700; font-size: var(--stitch-fs-button); line-height: var(--stitch-lh-button); letter-spacing: 0.01em; text-decoration: none; text-align: center; padding: var(--stitch-space-2) var(--stitch-space-4); border-radius: var(--stitch-radius); border: var(--stitch-thread) solid var(--stitch-action); background-color: var(--stitch-action); color: var(--stitch-page); cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; } .stitch-button:hover, .stitch-button:focus-visible, .stitch-button-style .elementor-button:hover, .stitch-button-style .elementor-button:focus-visible { background-color: var(--stitch-action-deep); border-color: var(--stitch-action-deep); color: var(--stitch-page); transform: translateY(-1px); } .stitch-button:focus-visible, .stitch-button-style .elementor-button:focus-visible { outline: var(--stitch-thread) dashed var(--stitch-ink); outline-offset: 3px; } /* Outline variant. */ .stitch-button--ghost, .stitch-button-ghost .elementor-button { background-color: transparent; color: var(--stitch-action-text); border: var(--stitch-thread) dashed var(--stitch-action); } .stitch-button--ghost:hover, .stitch-button-ghost .elementor-button:hover { background-color: var(--stitch-panel); border-style: solid; color: var(--stitch-action-text); } /* Quiet secondary action. */ .stitch-button--accent, .stitch-button-accent .elementor-button { background-color: var(--stitch-accent); border-color: var(--stitch-accent); color: var(--stitch-page); } .stitch-button--accent:hover, .stitch-button-accent .elementor-button:hover { background-color: var(--stitch-accent-text); border-color: var(--stitch-accent-text); } .stitch-button--wide, .stitch-button-wide .elementor-button { width: 100%; } /* ========================================================================== 8. SMALL COMPONENTS ========================================================================== */ .stitch-badge { display: inline-block; font-family: var(--stitch-font-body); font-weight: 700; font-size: var(--stitch-fs-eyebrow); line-height: var(--stitch-lh-eyebrow); letter-spacing: var(--stitch-ls-eyebrow); text-transform: uppercase; padding: var(--stitch-space-1) var(--stitch-space-2); border-radius: 999px; background-color: var(--stitch-panel); color: var(--stitch-action-text); border: 1px dashed var(--stitch-action); } .stitch-badge--calm { background-color: var(--stitch-calm); color: var(--stitch-ink); border-color: var(--stitch-border-control); } /* The brand motif as a decorative element. Point --stitch-flower-src at the Media Library URL once stitched-flower.svg is uploaded. */ .stitch-flower { display: inline-block; width: calc(var(--stitch-mesh) * 4); height: calc(var(--stitch-mesh) * 4); background-image: var(--stitch-flower-src, none); background-repeat: no-repeat; background-position: center; background-size: contain; } .stitch-flower--sm { width: calc(var(--stitch-mesh) * 2); height: calc(var(--stitch-mesh) * 2); } .stitch-flower--lg { width: calc(var(--stitch-mesh) * 7); height: calc(var(--stitch-mesh) * 7); } /* Centered motif with seams running out to either side. */ .stitch-flower-divider { display: flex; align-items: center; gap: var(--stitch-space-3); margin: var(--stitch-space-5) 0; } .stitch-flower-divider::before, .stitch-flower-divider::after { content: ""; flex: 1 1 auto; height: 0; border-top: var(--stitch-thread) dashed var(--stitch-rule); } /* A quote/callout with a stitched left edge. */ .stitch-quote { margin: var(--stitch-space-4) 0; padding: var(--stitch-space-2) 0 var(--stitch-space-2) var(--stitch-space-3); border-left: 3px dashed var(--stitch-action); font-family: var(--stitch-font-display); font-size: var(--stitch-fs-lede); line-height: var(--stitch-lh-lede); color: var(--stitch-ink); } /* ========================================================================== 9. PROSE The only place element selectors appear — and only nested under .stitch-prose. Wrap long-form copy (a Text Editor widget, a blog template) in this class. ========================================================================== */ .stitch-prose { font-family: var(--stitch-font-body); font-size: var(--stitch-fs-body); line-height: var(--stitch-lh-body); color: var(--stitch-ink); } .stitch-prose h1, .stitch-prose h2 { font-family: var(--stitch-font-display); font-weight: 600; color: var(--stitch-ink); } .stitch-prose h1 { font-size: var(--stitch-fs-h1); line-height: var(--stitch-lh-h1); letter-spacing: var(--stitch-ls-h1); } .stitch-prose h2 { font-size: var(--stitch-fs-h2); line-height: var(--stitch-lh-h2); letter-spacing: var(--stitch-ls-h2); margin-top: var(--stitch-space-5); } .stitch-prose h3, .stitch-prose h4 { font-family: var(--stitch-font-body); font-weight: 700; color: var(--stitch-ink); margin-top: var(--stitch-space-4); } .stitch-prose h3 { font-size: var(--stitch-fs-h3); line-height: var(--stitch-lh-h3); } .stitch-prose h4 { font-size: var(--stitch-fs-h4); line-height: var(--stitch-lh-h4); } .stitch-prose p, .stitch-prose ul, .stitch-prose ol { margin-bottom: var(--stitch-space-3); } .stitch-prose a { color: var(--stitch-action-text); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; text-decoration-thickness: 1px; } .stitch-prose a:hover { color: var(--stitch-action); text-decoration-style: solid; } .stitch-prose li { margin-bottom: var(--stitch-space-1); } .stitch-prose hr { border: 0; border-top: var(--stitch-thread) dashed var(--stitch-rule); margin: var(--stitch-space-5) 0; } .stitch-prose blockquote { margin: var(--stitch-space-4) 0; padding-left: var(--stitch-space-3); border-left: 3px dashed var(--stitch-action); font-family: var(--stitch-font-display); font-size: var(--stitch-fs-lede); line-height: var(--stitch-lh-lede); } .stitch-prose img { max-width: 100%; height: auto; border-radius: var(--stitch-radius); } /* ========================================================================== 10. SPACING HELPERS ========================================================================== */ .stitch-stack > * + * { margin-top: var(--stitch-space-3); } .stitch-stack-sm > * + * { margin-top: var(--stitch-space-2); } .stitch-stack-lg > * + * { margin-top: var(--stitch-space-4); } .stitch-pad-sm { padding: var(--stitch-space-3); } .stitch-pad { padding: var(--stitch-space-4); } .stitch-pad-lg { padding: var(--stitch-space-5); } .stitch-section { padding-top: var(--stitch-space-6); padding-bottom: var(--stitch-space-6); } .stitch-section-sm { padding-top: var(--stitch-space-5); padding-bottom: var(--stitch-space-5); } /* ========================================================================== 11. RESPONSIVE Elementor's default breakpoints: mobile <=767, tablet <=1024. ========================================================================== */ @media (max-width: 1024px) { :root { --stitch-space-6: calc(var(--stitch-mesh) * 6); } } @media (max-width: 767px) { :root { --stitch-space-5: calc(var(--stitch-mesh) * 3.5); --stitch-space-6: calc(var(--stitch-mesh) * 4.5); } .stitch-panel, .stitch-card { padding: var(--stitch-space-3); } .stitch-button, .stitch-button-style .elementor-button { padding: var(--stitch-space-2) var(--stitch-space-3); } } /* ========================================================================== 12. ACCESSIBILITY ========================================================================== */ @media (prefers-reduced-motion: reduce) { .stitch-button, .stitch-button-style .elementor-button { transition: none; } .stitch-button:hover, .stitch-button-style .elementor-button:hover { transform: none; } } .stitch-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }