/* ========================================================================== iP Base design system (same class names in every theme we build). Colors are NEVER hard-coded: use the palette tokens (--wp--preset--color--*), set in theme.json, changed per client with a style variation or by Claude (update_global_styles) and fine-tuned in Settings → Design. 01 Base 05 Header 02 Sections/tones 06 Cards 03 Eyebrow, lists 07 FAQ (details) 04 Buttons 08 Footer, utilities 09 Page hero, section head, stats, form card ========================================================================== */ /* 01 Base */ html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } img { height: auto; } .wp-site-blocks > * + * { margin-block-start: 0; } /* 02 Sections and tones: a tone only sets the local look; any block works on any tone */ .kit-section { padding-block: var(--wp--preset--spacing--70); } .is-style-tone-light { background: var(--wp--preset--color--light); color: var(--wp--preset--color--text); } .is-style-tone-muted { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--text); } /* Stone: a quiet, warm background for sensitive pages. Variations without a stone color fall back to muted. */ .is-style-tone-stone { background: var(--wp--preset--color--stone, var(--wp--preset--color--muted)); color: var(--wp--preset--color--text); } .is-style-tone-dark, .is-style-tone-accent { color: var(--wp--preset--color--text-inverse); } .is-style-tone-dark { background: var(--wp--preset--color--dark); } .is-style-tone-accent { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); } :is(.is-style-tone-dark, .is-style-tone-accent) :is(h1, h2, h3, h4, h5, h6, p, li, summary, blockquote, cite) { color: inherit; } :is(.is-style-tone-dark, .is-style-tone-accent) a:not(.wp-element-button) { color: inherit; text-decoration-color: currentColor; } .is-style-tone-dark .is-style-card { background: var(--wp--preset--color--dark-alt); border-color: rgba(255, 255, 255, 0.1); } .is-style-tone-muted .is-style-card, .is-style-tone-stone .is-style-card { background: var(--wp--preset--color--light); } /* 03 Eyebrow, step number, checklist */ .is-style-eyebrow { margin-bottom: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent); } :is(.is-style-tone-dark, .is-style-tone-accent) .is-style-eyebrow { color: inherit; opacity: 0.8; } .is-style-step { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: 0; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; color: var(--wp--preset--color--accent); } .is-style-checks { list-style: none; padding-left: 0; } .is-style-checks li { position: relative; padding-left: 1.75rem; margin-block: 0.4rem; } .is-style-checks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.9rem; height: 0.5rem; border-left: 2px solid var(--wp--preset--color--accent); border-bottom: 2px solid var(--wp--preset--color--accent); transform: rotate(-45deg); } /* 04 Buttons */ .wp-block-buttons { gap: 0.75rem; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: inherit; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: transparent; border-color: currentColor; } .is-style-tone-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--text-inverse); color: var(--wp--preset--color--dark); } .wp-element-button { transition: background-color 0.2s, color 0.2s, border-color 0.2s; } /* 05 Header: sticky white bar, one line */ .kit-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--light) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wp--preset--color--border); } .admin-bar .kit-header { top: var(--wp-admin--admin-bar--height, 32px); } .kit-header .wp-block-site-title { margin: 0; } .kit-header .wp-block-button__link { padding: 0.55rem 1rem; font-size: 0.875rem; white-space: nowrap; } @media (max-width: 480px) { .kit-header .wp-block-button { display: none; } } /* 06 Cards */ .is-style-card, .is-style-card-soft { background: var(--wp--preset--color--light); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card); padding: clamp(1.25rem, 2.5vw, 1.75rem); } .is-style-card-soft { background: var(--wp--preset--color--muted); border-color: transparent; } .is-style-card :is(h2, h3, h4):first-child, .is-style-card-soft :is(h2, h3, h4):first-child { margin-top: 0; } .wp-block-image.is-style-rounded img { border-radius: var(--wp--custom--radius--card); } .wp-block-post-featured-image img { border-radius: calc(var(--wp--custom--radius--card) - 4px); } .is-style-card .wp-block-post-featured-image { margin: calc(clamp(1.25rem, 2.5vw, 1.75rem) * -1) calc(clamp(1.25rem, 2.5vw, 1.75rem) * -1) 1rem; } .is-style-card .wp-block-post-featured-image img { border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0; width: 100%; } .wp-block-query-title, .wp-block-term-description { margin-bottom: var(--wp--preset--spacing--40); } .is-style-card .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); } .is-style-card .wp-block-post-title a { color: inherit; text-decoration: none; } .is-style-card .wp-block-post-title a:hover { text-decoration: underline; } .kit-stat .kit-stat__value { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--xx-large); line-height: 1; margin: 0; color: var(--wp--preset--color--accent); } .is-style-tone-dark .kit-stat__value { color: inherit; } .kit-stat .kit-stat__label { margin: 0.35rem 0 0; font-size: var(--wp--preset--font-size--small); opacity: 0.8; } /* 07 FAQ: the "Details" block with the FAQ style. Also feeds FAQPage schema. */ .wp-block-details.is-style-faq { border-bottom: 1px solid var(--wp--preset--color--border); padding-block: 1rem; } .wp-block-details.is-style-faq summary { cursor: pointer; font-weight: 600; font-size: var(--wp--preset--font-size--large); list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .wp-block-details.is-style-faq summary::-webkit-details-marker { display: none; } .wp-block-details.is-style-faq summary::after { content: "+"; font-weight: 400; color: var(--wp--preset--color--accent); } .wp-block-details.is-style-faq[open] summary::after { content: "–"; } .wp-block-details.is-style-faq > :not(summary) { margin-block-start: 0.75rem; color: var(--wp--preset--color--text-muted); } /* 08 Footer, utilities */ .kit-footer { font-size: var(--wp--preset--font-size--small); } .kit-footer .wp-block-navigation { gap: 0.4rem; } .kit-footer a { text-decoration: none; } .kit-footer a:hover { text-decoration: underline; } .kit-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--text-muted); } :is(.is-style-tone-dark, .is-style-tone-accent) .kit-lead { color: inherit; opacity: 0.85; } .kit-dim, .kit-legal { color: var(--wp--preset--color--text-muted); } .kit-legal { font-size: var(--wp--preset--font-size--xs); margin: 0; } .is-style-tone-dark :is(.kit-dim, .kit-legal) { color: inherit; opacity: 0.7; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* 09 Page hero (pages and single items), section head, stats row, form card */ .kit-pagehero { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--50); } .kit-pagehero :is(h1, .wp-block-post-title) { max-width: 900px; margin: 0 0 0.3em; } .kit-pagehero .kit-lead { max-width: 680px; margin: 0; } .kit-head { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: var(--wp--preset--spacing--50); } .kit-head .is-style-eyebrow { justify-content: center; } .kit-head--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--wp--preset--spacing--60); align-items: end; text-align: left; } .kit-head--split > * { margin-block: 0; } .kit-head--split .is-style-eyebrow { grid-column: 1 / -1; justify-content: flex-start; margin-bottom: 0.8rem; } .kit-head--split > :is(h2, h3) { grid-column: 1; } .kit-head--split > p:last-child { grid-column: 2; font-size: var(--wp--preset--font-size--large); } @media (max-width: 781px) { .kit-head--split { grid-template-columns: 1fr; } .kit-head--split > :is(h2, h3), .kit-head--split > p:last-child { grid-column: 1; } .kit-head--split > p:last-child { margin-top: 1rem; } } .kit-stats { gap: 1.5rem; padding-block: 2rem; border-block: 1px solid var(--wp--preset--color--border); } .kit-stats .is-style-card { border: 0; background: none; box-shadow: none; padding: 0; } .kit-stats :is(h2, h3) { line-height: 1; margin: 0 0 0.25rem; } .kit-stats p { margin: 0; font-size: var(--wp--preset--font-size--small); } .kit-formcard { background: var(--wp--preset--color--light); color: var(--wp--preset--color--text); border-radius: var(--wp--custom--radius--card); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--wp--preset--shadow--soft, 0 12px 40px rgba(0, 0, 0, 0.1)); } .kit-foot-title { margin: 0 0 1rem; font-weight: 700; font-size: var(--wp--preset--font-size--small); } .is-style-tone-dark .wp-block-navigation a { color: inherit; opacity: 0.75; } .is-style-tone-dark .wp-block-navigation a:hover { opacity: 1; }