/* Brand Portal — base stylesheet. * * Color and typography tokens (--bp-color-*, --bp-font-*, --bp-base-font-size) are emitted * inline in by inc/css-vars.php with sensible defaults, so they are ALWAYS defined * by the time this stylesheet loads. Do not re-declare them here — later declarations win * in the cascade and would override the brand values from Brand Settings. * * Only tokens that do NOT vary per-brand (layout sizing, radii, shadows) are defined here. */ :root { --bp-radius: 4px; --bp-gap: 1.5rem; /* 70rem = 1120px at a 16px root — the standard content column used across the theme. */ --bp-container: 70rem; --bp-container-narrow: 70rem; --bp-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .06); } *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--bp-base-font-size); } body { margin: 0; font-family: var(--bp-font-body); color: var(--bp-color-text); background: var(--bp-color-background); line-height: 1.55; -webkit-font-smoothing: antialiased; position: relative; /* Sticky-footer pattern: body fills the viewport, the footer's `margin-top: auto` * (in the .site-footer rule) eats the leftover space so the footer pins to the * bottom whenever content is shorter than the viewport. 100dvh handles the * mobile URL-bar resize correctly; 100vh stays as fallback for older browsers. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* Paper-texture overlay. Fixed positioning so it tiles seamlessly through long scrolls * without any repaint cost — pointer-events:none so it never blocks clicks. */ body::before { content: ''; position: fixed; inset: 0; background-image: var(--bp-bg-texture, none); background-repeat: repeat; pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--bp-font-heading); line-height: 1.15; /* Balanced vertical breathing room — top space matches the bottom so headings * don't feel glued to the content above them. :first-child rule below removes * the top space when a heading opens a section (matches natural reading flow). */ margin: 1.5em 0 1em; text-transform: var(--bp-heading-transform, none); letter-spacing: var(--bp-heading-letter-spacing, normal); color: var(--bp-color-heading, var(--bp-color-text)); } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } /* Decorative accent underline — a short horizontal bar below each heading, capped at * 5em so it stays proportional on wide containers. Scales with font-size (because em), * so h1 gets a longer bar than h4. */ h1::after, h2::after, h3::after, h4::after, h5::after, h6::after { content: ""; display: block; width: 50%; max-width: 3em; height: 5px; background: var(--bp-color-accent); margin: .3em auto 0; } /* * Clamp max (desktop) values bumped ~30% for stronger hierarchy on large viewports. * Mobile minimums left at their original, comfortable values. * Preferred (viewport-linked) tuned so the transition between the two stays smooth. */ h1 { font-size: clamp(2rem, 5vw, 4.25rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 3rem); } h3 { font-size: clamp(1.35rem, 1.8vw, 1.75rem); } p { margin: 0 0 1em; } a { color: var(--bp-color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } img, svg { max-width: 100%; height: auto; display: block; } /* -------- Utilities -------- */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important; } .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem 1rem; background: var(--bp-color-primary); color: #fff; border-radius: var(--bp-radius); z-index: 9999; text-decoration: none; } .bp-container { max-width: var(--bp-container); margin: 0 auto; padding: 0 1.25rem; } .bp-container--narrow { max-width: var(--bp-container-narrow); } .bp-section { padding: 2rem 0; } .bp-section--cta { padding: 1.5rem 0; text-align: center; } .bp-section--content { padding: 1.5rem 0; text-align: center; } .bp-section__cta-wrap { margin: 1.5rem 0 0; } .bp-section--headline { padding: 2.5rem 0 1rem; text-align: center; } .bp-headline__sub { margin-top: -.25rem; } .bp-section__title { text-align: center; margin-bottom: 1.5rem; } .bp-section__subtitle { text-align: center; opacity: .7; margin-bottom: 2rem; } .bp-prose { font-size: 1.0625rem; } .bp-prose > :first-child { margin-top: 0; } .bp-prose > :last-child { margin-bottom: 0; } /* * Block-editor alignment — when admin picks "Wide width" or "Full width" on a block * (typically a Vimeo embed, image, or gallery), break the block out of the narrow * content container so it reaches the viewport edges. Standard calc trick: the * element's own 50% minus 50vw puts its left edge at the viewport's left edge. */ .bp-prose .alignfull, .bp-section--content .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .bp-prose .alignwide, .bp-section--content .alignwide { width: 90vw; max-width: 90vw; margin-left: calc(50% - 45vw); margin-right: calc(50% - 45vw); } /* WP's embed blocks use a figure wrapper with its own width — reset it so the iframe * inside fills the alignfull / alignwide container. */ .bp-prose .wp-block-embed.alignfull .wp-block-embed__wrapper, .bp-prose .wp-block-embed.alignwide .wp-block-embed__wrapper { width: 100%; } /* * Responsive media inside prose. Catches: * - Raw pasted