/* Theme Name: YSPK Theme URI: https://yspk.co Author: YSPK Faith Description: Shared block theme for all YSPK verticals — earth-tone/pastel base palette, torn-paper-edge motif, and layered-depth structure. Each vertical (Faith, Gardening, Food, Education, Finance, DIY, Publishing) is a Multisite sub-site running this same theme; its accent color is set by one line in functions.php (see YSPK_VERTICALS), not by re-theming. Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 8.0 Version: 0.1.0 License: Proprietary Text Domain: yspk */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== Vertical accent-color switch One class on (added in functions.php based on which Multisite sub-site is loaded) repoints the shared `accent` / `accent-tint` tokens at that vertical's preset color. Nothing else in any template or pattern needs to change to "re-skin" a vertical. ========================================================================== */ body.vertical-faith { --wp--preset--color--accent: var(--wp--preset--color--vertical-faith); } body.vertical-gardening { --wp--preset--color--accent: var(--wp--preset--color--vertical-gardening); } body.vertical-food { --wp--preset--color--accent: var(--wp--preset--color--vertical-food); } body.vertical-education { --wp--preset--color--accent: var(--wp--preset--color--vertical-education); } body.vertical-finance { --wp--preset--color--accent: var(--wp--preset--color--vertical-finance); } body.vertical-diy { --wp--preset--color--accent: var(--wp--preset--color--vertical-diy); } body.vertical-publishing { --wp--preset--color--accent: var(--wp--preset--color--vertical-publishing); } /* ========================================================================== Torn-paper-edge motif Applied via clip-path so it works on any background/image without needing a raster asset. Two edges (top/bottom) covers dividers, card tops, and image frames; combine both classes for a fully torn card. ========================================================================== */ .torn-edge-top, .torn-edge-bottom, .torn-edge { position: relative; } .torn-edge-top::before, .torn-edge-bottom::after, .torn-edge::before, .torn-edge::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: inherit; background-color: var(--torn-edge-color, var(--wp--preset--color--base)); clip-path: polygon( 0% 100%, 4% 30%, 8% 80%, 13% 20%, 18% 70%, 23% 10%, 28% 60%, 33% 25%, 38% 75%, 43% 15%, 48% 65%, 53% 30%, 58% 85%, 63% 20%, 68% 70%, 73% 10%, 78% 60%, 83% 25%, 88% 80%, 93% 15%, 100% 100% ); } .torn-edge-top::before, .torn-edge::before { top: -13px; transform: scaleY(-1); } .torn-edge-bottom::after, .torn-edge::after { bottom: -13px; } /* ========================================================================== Layered-depth structural system Depth is a structural language, not a one-off effect: components use one of three depth levels (resting / raised / floating) and may overlap their neighbors on the z-axis, rather than sitting on a single flat plane. ========================================================================== */ .depth-1 { box-shadow: var(--wp--preset--shadow--depth-1); position: relative; z-index: 1; } .depth-2 { box-shadow: var(--wp--preset--shadow--depth-2); position: relative; z-index: 2; } .depth-3 { box-shadow: var(--wp--preset--shadow--depth-3); position: relative; z-index: 3; } .layer-overlap { margin-top: -3rem; } @media (max-width: 600px) { .layer-overlap { margin-top: -1.5rem; } } /* ========================================================================== Component library — shared building blocks ========================================================================== */ .yspk-card { background: var(--wp--preset--color--base-2); border-radius: var(--wp--preset--border--radius, 10px); padding: var(--wp--preset--spacing--50, 1.5rem); } .yspk-section-header { text-align: center; max-width: 42rem; margin-left: auto; margin-right: auto; } .yspk-section-header .yspk-eyebrow { display: inline-block; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--accent); font-weight: 700; margin-bottom: 0.5em; } .yspk-coming-soon-badge { display: inline-block; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3em 0.9em; border-radius: 999px; border: 1px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); } /* ---- Share button (present on every page via the shared pattern) ---- */ .yspk-share { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--border); border-radius: 999px; padding: 0.5em 1.1em; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--contrast); cursor: pointer; } .yspk-share:hover, .yspk-share:focus-visible { background: var(--wp--preset--color--accent-tint); } .yspk-share__icon { width: 1.1em; height: 1.1em; display: block; } .yspk-share__status { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); } /* ---- Mobile nav toggle — enlarge the tap target without enlarging the icon itself (core's own button is a bare 24x24px hit area) ---- */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* ---- Contact Form 7 — match the shared .btn component ---- */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea { width: 100%; padding: 0.6em 0.75em; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; font: inherit; } .wpcf7-form input.wpcf7-submit { display: inline-block; padding: 0.65em 1.25em; border-radius: 6px; border: 1px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font: inherit; font-weight: 600; cursor: pointer; } .wpcf7-form input.wpcf7-submit:hover { opacity: 0.9; } /* ========================================================================== Accessibility baseline ========================================================================== */ /* .skip-link itself is unstyled here on purpose — WordPress core already ships CSS for its own auto-injected skip-link (.skip-link.screen-reader-text) on block themes; adding our own rules would just fight that. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; } img { height: auto; max-width: 100%; } /* Mobile-first: base styles above are single-column/stacked by default; widen only past this breakpoint for multi-column layouts in patterns. */ @media (min-width: 782px) { .yspk-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--50, 1.5rem); } }