/* Theme Name: Webster Land Services Theme URI: https://websterlandservices.com Author: Webster Land Services Author URI: https://websterlandservices.com Description: A bold, industrial WordPress theme for Webster Land Services. Classic theme w/ Gutenberg block-pattern support. All visual styling is centralized here so patterns remain pure markup. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: webster-land-services Tags: construction, excavation, block-patterns, custom-menu, featured-images, threaded-comments */ /* ============================================================= Webster Land Services — WordPress Plumbing Layer ----------------------------------------------------------- The CANONICAL visual stylesheet is assets/css/design-system.css (it is shared with the static design mockups and owns every design token, color, and component visual). This file is enqueued AFTER it and contains ONLY the rules required to make Gutenberg's classic-theme markup (core/group, core/columns, core/cover) render the design-system layouts correctly, plus a few WP-only UI pieces (breadcrumb, alignwide/full, screen-reader). DO NOT add brand colors or component visuals here — edit the design system instead. All var(--wls-*) tokens resolve from there. ============================================================= */ /* ----- Constrained-layout horizontal padding ----- When a wls-section is a core/group with constrained layout, the inner children get a max-width via inline CSS variables. We add a horizontal pad so content doesn't kiss the edge on small screens. */ .wls-section > * { padding-left: var(--wls-container-pad); padding-right: var(--wls-container-pad); } .wls-section > .alignfull, .wls-section > .alignwide { padding-left: 0; padding-right: 0; } /* Force our grid wrappers to be CSS grid even when WP applies columns/flex defaults, and beat the constrained-layout cascade that would otherwise center each child. */ .wls-card-grid, .wls-services-grid, .wls-value-banner__grid, .wls-stats__grid, .wls-featured-strip, .wls-project-grid, .wls-statement__grid { display: grid !important; width: 100% !important; max-width: none !important; } /* WP injects a `.wp-block-group__inner-container` between a group block and its inner blocks in classic themes (no theme.json). That extra wrapper would become the only grid item, making everything stack. `display: contents` collapses it out of the layout tree so the actual inner blocks become the grid items. */ .wls-card-grid > .wp-block-group__inner-container, .wls-services-grid > .wp-block-group__inner-container, .wls-value-banner__grid > .wp-block-group__inner-container, .wls-stats__grid > .wp-block-group__inner-container, .wls-featured-strip > .wp-block-group__inner-container, .wls-project-grid > .wp-block-group__inner-container, .wls-statement__grid > .wp-block-group__inner-container { display: contents; } .wls-card-grid > *, .wls-services-grid > *, .wls-value-banner__grid > *, .wls-stats__grid > *, .wls-featured-strip > *, .wls-project-grid > *, .wls-statement__grid > *, .wls-statement__grid > .wp-block-group__inner-container > *, .wls-card-grid > .wp-block-group__inner-container > *, .wls-services-grid > .wp-block-group__inner-container > *, .wls-value-banner__grid > .wp-block-group__inner-container > *, .wls-stats__grid > .wp-block-group__inner-container > *, .wls-featured-strip > .wp-block-group__inner-container > *, .wls-project-grid > .wp-block-group__inner-container > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; min-width: 0; } /* Default desktop column counts — lowered breakpoints so 1024px viewports work. minmax(0, 1fr) prevents columns from blowing out to natural content width. */ @media (min-width: 720px) { .wls-value-banner__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .wls-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .wls-featured-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .wls-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 880px) { .wls-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .wls-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .wls-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1100px) { .wls-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .wls-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ----- Breadcrumb (WP-only UI; not in the design system) ----- Recolored for the dark-first design. Sits below the sticky mega-nav. */ .wls-breadcrumb { background: var(--wls-color-ink-2); border-bottom: 1px solid var(--wls-color-line); padding: 0.75rem 0; font-size: 0.8125rem; color: var(--wls-color-muted); } .wls-breadcrumb a { color: var(--wls-color-muted); } .wls-breadcrumb a:hover { color: var(--wls-color-primary); } .wls-breadcrumb .separator { margin: 0 0.5rem; color: var(--wls-color-line-2); } .wls-breadcrumb .current { color: #fafaf9; font-weight: 700; } /* ----- Main layout ----- The mega-nav is position:sticky (not fixed), so no top padding is needed; just guarantee a minimum height for short pages. */ .wls-site-main { min-height: 50vh; } /* ============================================================= WP BLOCK PLUMBING Rules that make Gutenberg's classic-theme markup render the design-system layouts correctly. Visuals live in design-system.css. ============================================================= */ /* When wls-media-split is rendered as core/columns */ .wls-media-split.wp-block-columns { gap: 4rem !important; align-items: center; } .wls-media-split.wp-block-columns .wp-block-column { flex-basis: 0 !important; } /* Card link wrapped in a paragraph (block-friendly) */ .wls-card__link-wrap { margin: 0; } .wls-card__link-wrap .wls-card__link { display: inline-flex; } /* Cover block used as hero */ .wls-hero.wp-block-cover { min-height: clamp(420px, 65vh, 680px); padding: clamp(4rem, 10vw, 7rem) var(--wls-container-pad); align-items: center; justify-content: flex-start; } /* Force the dark dim overlay regardless of which core block styles are loaded. The .wp-block-cover__background span carries this opacity. */ .wls-hero.wp-block-cover .wp-block-cover__background { opacity: 0.6 !important; background-color: var(--wls-color-ink) !important; } /* Beat WP's constrained-layout !important rules that auto-center the inner container, and pin it to the left of the hero. */ .wls-hero.wp-block-cover .wp-block-cover__inner-container { width: 100% !important; max-width: 640px !important; margin-left: clamp(1rem, 6vw, 5rem) !important; margin-right: 0 !important; } /* Outline button on the hero: invert to white-on-transparent so it's visible against the dark image overlay. */ .wls-hero .is-style-outline .wp-block-button__link { color: #fff !important; border-color: #fff; background: transparent; } .wls-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--wls-color-ink) !important; } /* Section wrappers with constrained layout: kill the auto h-pad on full-bleed children */ .wls-value-banner > *, .wls-stats > *, .wls-hero > * { padding-left: 0; padding-right: 0; } /* ============================================================= EDITOR-FRIENDLY DECORATIVE HOOKS All icons and decorative rules are rendered via CSS pseudo- elements keyed off modifier classes. Patterns stay pure content (headings, paragraphs, images, buttons) so authors never see raw HTML or broken preview blocks in the editor. ============================================================= */ /* Heading rule: short red pill bar below. Add className "wls-heading--rule" to any core/heading block (optionally centered). */ .wls-heading--rule::after { content: ""; display: block; width: 64px; height: 8px; background: var(--wls-color-rule); margin-top: 1rem; margin-bottom: 0.5rem; } .wls-heading--rule.has-text-align-center::after { margin-left: auto; margin-right: auto; } /* ---- Card icons (Who We Serve, Values) ---- Owned by design-system.css (white-stroke variants). ---- */ /* ---- Value banner item icons (white on red) ---- */ .wls-value-banner__item--commercial::before, .wls-value-banner__item--ontime::before, .wls-value-banner__item--licensed::before, .wls-value-banner__item--quote::before { content: ""; display: block; width: 32px; height: 32px; margin: 0 auto 0.75rem; background-size: 28px 28px; background-position: center; background-repeat: no-repeat; } .wls-value-banner__item--commercial::before { background-image: url("data:image/svg+xml;utf8,"); } .wls-value-banner__item--ontime::before { background-image: url("data:image/svg+xml;utf8,"); } .wls-value-banner__item--licensed::before { background-image: url("data:image/svg+xml;utf8,"); } .wls-value-banner__item--quote::before { background-image: url("data:image/svg+xml;utf8,"); } /* ---- core/columns used as our multi-up grids ---- Gutenberg renders core/columns as flexbox columns by default, which works in BOTH the editor canvas and the front end. We just decorate them with our visual language. */ .wls-cols-value-banner.wp-block-columns { gap: 1.5rem !important; margin: 0 auto !important; } /* Force the columns block itself to occupy its full parent width. WP's flex layout container can otherwise shrink to content width. */ .wp-block-columns.wls-cols-value-banner, .wp-block-columns.wls-cols-stats, .wp-block-columns.wls-cols-cards, .wp-block-columns.wls-cols-strip, .wp-block-columns.wls-cols-safety, .wp-block-columns.wls-cols-services { width: 100% !important; } /* Force equal-width columns regardless of content size. Without this, core/column defaults can leave columns at content width on classic themes (no theme.json), causing them to bunch to one side. */ .wp-block-columns.wls-cols-value-banner > .wp-block-column, .wp-block-columns.wls-cols-stats > .wp-block-column, .wp-block-columns.wls-cols-cards > .wp-block-column, .wp-block-columns.wls-cols-strip > .wp-block-column, .wp-block-columns.wls-cols-safety > .wp-block-column, .wp-block-columns.wls-cols-services > .wp-block-column { flex: 1 1 0 !important; min-width: 0 !important; } .wls-cols-safety.wp-block-columns { gap: 2rem !important; } .wls-cols-value-banner .wp-block-column { text-align: center; padding: 0.5rem 1rem; } @media (min-width: 782px) { .wls-cols-value-banner .wp-block-column { border-left: 1px solid var(--wls-color-primary-dark); } .wls-cols-value-banner .wp-block-column:first-child { border-left: 0; } } .wls-cols-cards.wp-block-columns { gap: 2rem !important; } .wls-cols-stats.wp-block-columns { gap: 2rem !important; margin: 0 auto !important; } .wls-cols-stats .wp-block-column { text-align: center; } .wls-cols-strip.wp-block-columns { gap: 0.5rem !important; } /* Recent Projects strip: force all three images to one uniform height so the differing source aspect ratios don't leave a column short. The strip renders as core/image blocks (figure > a > img) inside equal-width columns. */ .wls-cols-strip .wp-block-image { margin: 0; } .wls-cols-strip .wp-block-image, .wls-cols-strip .wp-block-image a { display: block; width: 100%; } .wls-cols-strip .wp-block-image img { display: block; width: 100%; height: 250px; object-fit: cover; } @media (max-width: 781px) { .wls-cols-strip .wp-block-image img { height: 220px; } } /* What We Do — services tile grid expressed via core/columns + paragraphs. (Tile visuals owned by design-system.css; this is just column gap.) */ .wls-cols-services.wp-block-columns { gap: 0.5rem !important; } .wls-services-grid__item { margin: 0 0 0.5rem !important; } /* What We Do outer split: keep at 40/60 on desktop, stack on mobile. */ .wls-cols-what-we-do.wp-block-columns { gap: 3rem !important; } /* Home quote: 62/38 split (form + contact aside). Column widths come from the per-column flex-basis; this just forces the columns block to full width and sets the gap. Stacks on mobile via WP's default column behavior. */ .wls-cols-quote.wp-block-columns { gap: 4rem !important; width: 100% !important; align-items: start; } @media (max-width: 781px) { .wls-cols-quote.wp-block-columns { gap: 3rem !important; } } /* ----- Utility / typography helpers for patterns ----- */ .wls-text-center { text-align: center; } .wls-max-readable { max-width: 42rem; margin-left: auto; margin-right: auto; } /* ----- Alignwide / full WP-compat ----- */ .alignwide { max-width: 1400px; margin-left: auto; margin-right: auto; } .alignfull { width: 100%; margin-left: 0; margin-right: 0; } /* ----- Screen-reader utility ----- */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }