/* * templates-web.css — Website Templates public-site stylesheet. * * ONE shared, responsive stylesheet for all 10 skins x 4 families (plan * §3.1/§3.7). Personality is almost entirely TOKEN-driven: skins.php's * wtEmitThemeCss() emits a `:root{--wt-*}` block ahead of this file (see * wtRenderHead.php) with every colour/radius/shadow/border/font/hero value * a skin needs — this file never hardcodes a skin's colours. The handful of * `[data-skin="…"]` rules below are genuine exceptions (documented inline) * where a token alone can't express the difference. * * Layout hooks: * [data-family] — set on by the render engine (WtEngine:: * assembleDoc()/renderChromeOpen(), class.websitetemplates.php) * [data-wt-family] — set on the inner block wrapper (wtRenderFamily(), * wtRenderBlocks.php, Phase 2) for pages rendered as * full 'wt' documents * Both carry the same 4 values (classic|grid|sidebar|showcase); family rules * below match on either so they work whether an element's family-scoped * ancestor is (chrome-wrapped legacy pages) or the inner wrapper * (full WT page render). * * [data-skin] is set on alongside [data-family] — the 10 skin ids * from wtSchema.php's WT_SKINS. * * No build step (plan constraint) — plain CSS, custom properties, no * preprocessor. Authored mobile-first-adjacent but organised base-then-media * (the prototype has NO responsive CSS at all — every breakpoint here is * new, budgeted work, not a port). */ /* ── Reset (minimal — this file owns the whole public document) ────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--wt-page-bg, #fff); color: var(--wt-body-text, #333); font-family: var(--wt-font-body, system-ui, sans-serif); line-height: 1.5; -webkit-font-smoothing: antialiased; } body[data-skin] { color-scheme: var(--wt-color-scheme, light); } /* Pages that embed the quote widget load the legacy funnel bundle AFTER this file (wtRenderHead.php), and bootstrap.min.css's plain `body{background:#fff; color:#333}` was silently beating the token rule above at equal specificity — on dark/gradient skins the whole mid-page went white with near-white text (premium was unreadable, glass lost its backdrop). The attribute selector out-specifies bootstrap regardless of load order. */ body[data-wt] { background: var(--wt-page-bg, #fff); color: var(--wt-body-text, #333); font-family: var(--wt-font-body, system-ui, sans-serif); line-height: 1.5; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--wt-font-head, inherit); color: var(--wt-ink, inherit); } button { font: inherit; } /* ── Base typography scale (skin supplies weight/tracking, not size) ───── */ h1.wt-h1 { font-weight: var(--wt-heading-weight, 700); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.06; letter-spacing: var(--wt-heading-tracking, 0); margin: 0 0 16px; } h2.wt-h2 { font-weight: var(--wt-heading-weight, 700); font-size: 27px; line-height: 1.12; letter-spacing: var(--wt-heading-tracking, 0); margin: 6px 0 0; } .wt-prose { font-size: 15px; line-height: 1.7; color: var(--wt-body-text); margin: 0 0 15px; } .wt-eyebrow { display: block; font: 700 11px/1.2 var(--wt-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--wt-accent); margin-bottom: 10px; } /* ── Containers / sections (family-aware width, spacing token) ─────────── */ .wt-container { max-width: 760px; margin: 0 auto; padding: 0 26px; } [data-family="grid"] .wt-container, [data-wt-family="grid"] .wt-container, [data-family="sidebar"] .wt-container, [data-wt-family="sidebar"] .wt-container, [data-family="showcase"] .wt-container, [data-wt-family="showcase"] .wt-container { max-width: 1080px; } .wt-section { padding: calc(28px + (var(--wt-section-spacing, 55)) * 0.62px) 26px; } .wt-section-alt { background: var(--wt-alt-bg); color: var(--wt-alt-text, inherit); } /* ── Generic component primitives (shared by chrome + every future block) ─ */ .wt-card { background: var(--wt-surface); border-radius: var(--wt-radius-lg); box-shadow: var(--wt-card-shadow); border: var(--wt-card-border); } .wt-btn { display: inline-block; font-family: var(--wt-font-body); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; border: 0; padding: 13px 22px; border-radius: var(--wt-btn-radius); text-transform: var(--wt-btn-transform); letter-spacing: var(--wt-btn-letter-spacing); white-space: nowrap; text-decoration: none; transition: opacity .15s ease; } .wt-btn:hover { opacity: .88; } /* Solid colour stays as the paint-order fallback; the gradient reads as depth on every skin (design uplift 2026-07 — "gradient colours" wish-list item). */ .wt-btn-primary { background: var(--wt-primary); background-image: linear-gradient(135deg, var(--wt-primary), var(--wt-primary-dark)); color: #fff; } .wt-btn-ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; } .wt-chip { display: inline-block; font: 700 11px/1 var(--wt-font-body); color: var(--wt-accent); background: var(--wt-accent-tint); padding: 6px 10px; border-radius: var(--wt-chip-radius); text-transform: uppercase; letter-spacing: .06em; } .wt-hero { position: relative; overflow: hidden; padding: var(--wt-hero-pad-top) 26px var(--wt-hero-pad-bottom); background: var(--wt-hero-bg); color: var(--wt-hero-text); border-bottom: var(--wt-hero-border); } .wt-hero-scrim { position: absolute; inset: 0; z-index: 1; background: var(--wt-hero-scrim); pointer-events: none; } .wt-hero-content { position: relative; z-index: 2; } .wt-hero-sub { font-size: 16px; line-height: 1.6; color: var(--wt-hero-sub-text); max-width: 560px; margin: 0 auto; } .wt-hero-eyebrow { color: var(--wt-hero-eyebrow); } .wt-watermark { position: absolute; right: -30px; bottom: -40px; z-index: 1; font: 900 300px/1 var(--wt-font-head); color: var(--wt-hero-watermark); pointer-events: none; user-select: none; } .wt-quote-band { padding: 70px 26px; background: var(--wt-quote-bg); color: var(--wt-quote-text); } /* Grid of cards — default 3 columns; the grid family scales via --wt-grid-cols. */ .wt-grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } [data-family="grid"] .wt-grid-cards, [data-wt-family="grid"] .wt-grid-cards { grid-template-columns: repeat(var(--wt-grid-cols, 3), 1fr); } /* Sidebar family: content + sticky aside. */ [data-family="sidebar"] .wt-layout-sidebar, [data-wt-family="sidebar"] .wt-layout-sidebar { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; } .wt-aside { position: sticky; top: 20px; } /* Showcase family: alternating image/text bands. */ [data-family="showcase"] .wt-showcase-row, [data-wt-family="showcase"] .wt-showcase-row { display: flex; gap: 40px; align-items: center; padding: 40px 0; } [data-family="showcase"] .wt-showcase-row:nth-child(even), [data-wt-family="showcase"] .wt-showcase-row:nth-child(even) { flex-direction: row-reverse; } .wt-showcase-row > * { flex: 1 1 0; min-width: 0; } /* ── Flag utility classes ──────────────────────────────────────────────── * Most flag personality (boxy borders, pill radii, glass blur, dark * colour-scheme, uppercase buttons) is already baked into the tokens above * per skin (a boxy skin's --wt-card-shadow is already 'none' and its * --wt-card-border already 2px solid ink — see skins.php). These classes * exist as an OPT-IN escape hatch for a block author who wants a specific * treatment on one element regardless of the active skin (e.g. force a * pill-shaped button inside an otherwise square-cornered skin). Compound * selectors (`.wt-card.wt-boxy`) so they always win over the plain * `.wt-card` rule without needing `!important`. * ────────────────────────────────────────────────────────────────────── */ .wt-card.wt-boxy, .wt-btn.wt-boxy { border: 2px solid var(--wt-ink); box-shadow: none; border-radius: 0; } .wt-nav.wt-glass, .wt-card.wt-glass { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .wt-btn.wt-pill, .wt-chip.wt-pill { border-radius: 999px; } .wt-card.wt-hairline { box-shadow: none; border: 1px solid var(--wt-rule); } .wt-card.wt-thick { border-width: 3px; } .wt-upper { text-transform: uppercase; letter-spacing: .05em; } [data-skin] .wt-dark, .wt-dark { color-scheme: dark; } /* ── [data-skin]-scoped exceptions (where a token alone isn't enough) ───── */ /* Premium is the one genuinely dark skin — set the UA colour-scheme so native form controls / scrollbars follow it instead of rendering as light-on-dark widgets. */ [data-skin="premium"] { color-scheme: dark; } /* Old-school + Bold are the two boxy/upper skins with a heavier nav rule — already carried by --wt-nav-border, called out here only so the nav brand mark (a filled square, see .wt-nav-logo) squares off to match rather than keeping its default rounded corner. */ [data-skin="oldschool"] .wt-nav-logo, [data-skin="bold"] .wt-nav-logo { border-radius: 2px; } /* Minimal's hairline rule + wide letter-spacing reads better with a touch more nav padding than the token-driven default. */ [data-skin="minimal"] .wt-nav-inner { padding-top: 20px; padding-bottom: 20px; } /* ── Nav chrome (blocks/nav.php) ───────────────────────────────────────── * Structural + mobile-hamburger CSS. Colours/borders/radii all come from * tokens (--wt-nav-bg/--wt-nav-border/--wt-logo-radius/--wt-btn-*) so this * section is layout-only. * ────────────────────────────────────────────────────────────────────── */ .wt-nav-wrap { position: relative; z-index: 20; } .wt-nav { background: var(--wt-nav-bg); border-bottom: var(--wt-nav-border); backdrop-filter: blur(var(--wt-blur)); -webkit-backdrop-filter: blur(var(--wt-blur)); } .wt-nav-inner { max-width: 1080px; margin: 0 auto; padding: 16px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wt-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .wt-nav-logo { width: 38px; height: 38px; border-radius: var(--wt-logo-radius); background: var(--wt-primary); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 18px/1 var(--wt-font-head); flex-shrink: 0; } .wt-nav-brand-text { font: 800 16px/1.1 var(--wt-font-head); color: var(--wt-ink); letter-spacing: var(--wt-heading-tracking); } .wt-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; padding: 0; } .wt-nav-toggle span { display: block; width: 100%; height: 2px; background: var(--wt-ink); border-radius: 1px; } .wt-nav-menu { display: flex; align-items: center; gap: 22px; } .wt-nav-list { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .wt-nav-item a { font: 600 13px/1 var(--wt-font-body); color: var(--wt-body-text); text-decoration: none; padding: 6px 0; } .wt-nav-item.wt-nav-active a { color: var(--wt-primary); } .wt-nav-cta { font-size: 12.5px; padding: 10px 16px; } /* ── Footer chrome (blocks/footer.php) ─────────────────────────────────── * footerBg/text always resolve to a dark bg + white text across all 10 * skins (see skins.php --wt-footer-bg — proto's footerStyle.color is a * constant #fff regardless of skin), so text colour is hardcoded here * rather than tokenised for a value that never varies. * ────────────────────────────────────────────────────────────────────── */ .wt-footer { background: var(--wt-footer-bg); color: #fff; } .wt-footer-inner { max-width: 1080px; margin: 0 auto; padding: 46px 26px 34px; } .wt-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-bottom: 28px; } .wt-footer-logo { width: 34px; height: 34px; border-radius: var(--wt-logo-radius); background: var(--wt-primary); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 16px/1 var(--wt-font-head); margin-bottom: 12px; } .wt-footer-brand { font: 800 16px/1.2 var(--wt-font-head); margin-bottom: 4px; } .wt-footer-tagline { font-size: 13px; opacity: .75; } .wt-footer-head { font: 700 12px/1 var(--wt-font-body); text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin-bottom: 12px; } .wt-footer-col a, .wt-footer-col div { display: block; font-size: 13.5px; margin-bottom: 8px; color: #fff; text-decoration: none; opacity: .92; } .wt-footer-areas { display: flex; flex-wrap: wrap; gap: 8px; } .wt-footer-areas .wt-chip { background: rgba(255,255,255,.12); color: #fff; } .wt-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; opacity: .75; } .wt-footer-powered a { color: inherit; text-decoration: underline; } /* ── Responsive breakpoints (authored fresh — the prototype has none) ─── * Mirrors the device-preview widths used elsewhere in the plan (tablet * ~834px, mobile ~390px) without hardcoding to those exact canvas widths. * ────────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { [data-family="sidebar"] .wt-layout-sidebar, [data-wt-family="sidebar"] .wt-layout-sidebar { grid-template-columns: 1fr; } .wt-aside { position: static; } } @media (max-width: 780px) { .wt-nav-toggle { display: flex; } .wt-nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--wt-surface); border-bottom: var(--wt-nav-border); padding: 8px 26px 18px; } .wt-nav-menu.wt-nav-open { display: flex; } .wt-nav-list { flex-direction: column; align-items: stretch; gap: 0; } .wt-nav-item a { display: block; padding: 12px 0; border-bottom: 1px solid var(--wt-rule); } .wt-nav-cta { margin: 14px 0 4px; text-align: center; } } @media (max-width: 640px) { .wt-grid-cards { grid-template-columns: 1fr; } [data-family="showcase"] .wt-showcase-row, [data-wt-family="showcase"] .wt-showcase-row { flex-direction: column; } .wt-hero { padding-left: 20px; padding-right: 20px; } h1.wt-h1 { font-size: clamp(26px, 8vw, 34px); } .wt-footer-bottom { flex-direction: column; align-items: flex-start; } .wt-watermark { display: none; } }