/* Theme Name: Fencing Roots Theme URI: https://fencingroots.org Author: Fencing Roots Author URI: https://fencingroots.org Description: Custom WordPress theme for Fencing Roots — a youth-led 501(c)(3) using fencing as a developmental tool. Warm cream ground with gold growth and an oxblood root system. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fencing-roots Tags: custom-menu, custom-logo, translation-ready, blog */ /* ══════════════════════════════════════════════ DESIGN TOKENS ══════════════════════════════════════════════ */ :root { --cream: #f7f3e3; --gold: #c97b5d; --gold-2: #a8623f; /* CTA yellow — the comp uses a brighter, more saturated accent for the "Donate Now" button than the terracotta used for the tree/ wordmark/links (measured from inspiration-colors/new-format-02.svg, cls-19: #f4c117). Keeping them as separate tokens on purpose. */ --cta: #f4c117; --cta-2: #c89e12; --fg: #1a1814; --mu: #6b6458; --mu-2: #a8a090; --oxblood: #5c1f27; --oxblood-2:#43161d; --white: #ffffff; --border: rgba(26,24,20,.12); --border-2: rgba(26,24,20,.22); --border-dark: rgba(1,1,1,.55); --gold-border: rgba(201,123,93,.35); --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* "Didot" first = the real font, uploaded via WordPress's native Font Library (Appearance > Editor > Styles > Typography > Fonts, or Customizer > Additional CSS @font-face). Fallbacks cover the case where it isn't installed. */ --font-display: 'Didot', 'Bodoni Moda', 'Bodoni MT', Georgia, serif; --nav-height: 72px; --max-width: 1200px; --content-width:760px; /* Homepage gutter — measured directly from the inspiration-colors/ new-format-02.svg comp: the Menu button, paragraph text and roots-section text all sit ~17.5% in from the viewport edge (87.68 / 500.86 svg units). vw (clamped) keeps that ratio steady across breakpoints instead of collapsing to a thin fixed padding on ordinary desktop widths. Caps at 1280px viewport width — the .hero__headline / .wordmark--hero vw coefficients are deliberately chosen to cap at that same 1280px point (and .hero__canopy / .roots__tree scale off this gutter via the grid column, so they track it automatically) so nothing drifts out of proportion with anything else while a desktop window is resized. */ --hero-gutter: clamp(1.25rem, 17.5vw, 14rem); --transition: .22s ease; --shadow-sm: 0 1px 3px rgba(26,24,20,.06), 0 1px 2px rgba(26,24,20,.04); --shadow-md: 0 4px 16px rgba(26,24,20,.08), 0 2px 6px rgba(26,24,20,.05); } /* ══════════════════════════════════════════════ RESET & BASE ══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { background: var(--cream); color: var(--fg); font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; width: 100%; /* Was .site's job in the old classic templates — block templates don't wrap output in an extra div, so the sticky-footer flex layout lives directly on body instead (block-template canvas already renders a real with body_class() applied). */ position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .site-main { flex: 1; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--gold); } button, input, textarea, select { font-family: inherit; } ul { list-style: none; } .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: 2rem; } .container--narrow { max-width: var(--content-width); margin-inline: auto; padding-inline: 2rem; } /* ══════════════════════════════════════════════ TYPOGRAPHY ══════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--fg); } h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); } h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); } h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); } h4 { font-size: 1.25rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } p { margin-bottom: 1.4rem; color: var(--mu); } p:last-child { margin-bottom: 0; } .lead { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; color: var(--mu); letter-spacing: .01em; } blockquote { border-left: 2px solid var(--gold); padding: 1rem 1.5rem; margin: 2rem 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--mu); } /* Wordmark — reserved for the "Fencing Roots" logotype only */ .wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; line-height: 120px; } /* ══════════════════════════════════════════════ DIVIDER ══════════════════════════════════════════════ */ .divider { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 0 auto 2.5rem; border: none; } .divider--left { margin-left: 0; } .divider--light { background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); } .divider--spaced { margin-top: 1.5rem; } /* ══════════════════════════════════════════════ BUTTONS Small rounded rectangles, not pills — the comp's Menu/Donate buttons are compact with a subtle radius (measured rx/height ratio from the SVG comp is ~0.12), not a fully-rounded pill. ══════════════════════════════════════════════ */ .btn, .wp-block-button__link { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .95rem; border-radius: 6px; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; line-height: 1.4; letter-spacing: .02em; cursor: pointer; border: 1px solid transparent; background: transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; } .btn--donate, .btn--primary { background: var(--cta); color: var(--fg); border-color: var(--cta); } .btn--donate:hover, .btn--primary:hover { background: var(--cta-2); border-color: var(--cta-2); color: var(--fg); } /* Menu + Donate get larger text than other buttons — its own class (added alongside .btn--menu-toggle / .btn--donate in the markup) instead of a font-size bolted onto those rules, so it's obvious at a glance and never depends on cascade order against the base .btn rule. */ .btn--lg { font-size: 1rem; } .wp-block-button__link { background: var(--gold); color: var(--white); border-color: var(--gold); } .wp-block-button__link:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--white); } .btn--outline { background: transparent; color: var(--fg); border-color: var(--border-2); } .btn--outline:hover { border-color: var(--gold); color: var(--gold); } /* Menu toggle — thin, crisp dark hairline outline (comp: stroke #010101, 0.25px on a ~250-unit canvas — a solid dark 1px reads the same at web scale), not the softer/fainter outline used elsewhere. */ .btn--menu-toggle { background: transparent; color: var(--fg); border-color: var(--border-dark); } .btn--menu-toggle:hover { border-color: var(--gold); color: var(--gold); } /* ══════════════════════════════════════════════ SECTIONS ══════════════════════════════════════════════ */ .section { padding-block: 6rem; } .section--sm { padding-block: 3.5rem; } .section--lg { padding-block: 9rem; } .section__eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .section__title { margin-bottom: 1.25rem; } .section__lead { max-width: 580px; } /* ══════════════════════════════════════════════ FRONT-PAGE HERO ══════════════════════════════════════════════ */ .hero { position: relative; padding: clamp(1.5rem, 4vw, 3rem) 0 0; overflow: visible; } /* Full-bleed row, proportional gutters (--hero-gutter) instead of a centered fixed max-width — matches the comp's ~17.5%-per-side inset. Column ratio (~1 : 1.8) is measured from the comp too: the text block occupies roughly the left third, the tree/wordmark column the remaining two-thirds. */ .hero__row { width: 100%; padding-inline: var(--hero-gutter); display: grid; grid-template-columns: 1fr 1.8fr; /* end (not center) — .hero__copy's paragraph text rewraps to more/ fewer lines as the column narrows or widens, which changes its height in sudden jumps rather than smoothly. .hero__copy is already the taller column at realistic desktop widths, so center-aligning let that jumpy height push .hero__canopy-col's slack (and the wordmark's distance from the oxblood border below) around unpredictably. Bottom-aligning instead pins the wordmark to a fixed distance from the row's bottom edge regardless of how the text column's height fluctuates. */ align-items: end; gap: 2rem; } /* Menu/Donate — on the Home page these live inside the hero copy column itself (not a separate site-wide header bar), matching the comp exactly. */ .hero__nav { display: flex; align-items: center; gap: .75rem; margin-bottom: clamp(2.5rem, 6vw, .5rem); } /* align-self overrides .hero__row's align-items: end for this column only — .hero__canopy-col stays bottom-pinned (see the note on .hero__row above; that stability logic still applies to it), while .hero__copy itself is free to center within the row's height. */ .hero__copy { text-align: left; align-self: center; } .hero__headline { font-family: var(--font-sans); font-weight: 700; /* 3.25vw reaches its 2.6rem cap at exactly 1280px viewport width — the same point --hero-gutter caps at (see below) — so the headline keeps growing in step with the gutter/canopy/wordmark all the way through ordinary desktop widths instead of flattening out around ~760px and then visually shrinking relative to everything else that keeps scaling past it. */ font-size: clamp(1.4rem, 3.25vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; color: var(--fg); margin-bottom: 1.75rem; } .hero__headline span { display: block; } .hero__headline span:nth-child(2) { padding-left: 2.55em; } .hero__headline span:nth-child(3) { padding-left: 1.1em; } .hero__sub { font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--mu); line-height: 1.75; max-width: 420px; letter-spacing: .01em; margin-bottom: 10px; } .hero__sub p { font-size: inherit; color: inherit; line-height: inherit; margin-bottom: 0; } /* useInnerBlocksProps wraps the block's InnerBlocks in one extra div — cover both "no wrapper" and "one wrapper div" so the reset applies either way. */ .hero__sub > *:first-child, .hero__sub > div > *:first-child { margin-top: 0; } .hero__sub > *:last-child, .hero__sub > div > *:last-child { margin-bottom: 0; } /* Same specificity as the :last-child reset above (two classes/pseudo) so this wins by source order and can still set its own margin. */ .hero__sub .hero__subheadline { font-style: italic; margin-bottom: 40px; } /* Right column — holds the canopy+trunk and, directly beneath it in the same column, the wordmark, so they always share one horizontal center. */ .hero__canopy-col { text-align: center; } /* Fixed (not fluid) breathing room below the wordmark, now that .hero__row bottom-aligns this column — keeps the wordmark's distance from the oxblood border constant at every desktop width instead of flush against it. 10px matches .roots__art's own padding-top, so the wordmark and the hilt sit an equal distance from the border on their respective sides of it. Scoped to desktop only so it doesn't add extra space in the stacked tablet/mobile layout. */ @media (min-width: 901px) { .hero__canopy-col { padding-bottom: 10px; } } /* Canopy + trunk: the real artwork, layered as two absolutely-stacked SVGs that share one crop of the source file's viewBox, so they stay in exact registration. */ /* margin-inline: auto (not 0) is what keeps this centered on the column's true center at every viewport width, matching the wordmark below (also centered) and .roots__tree (same width formula) — see the note on .roots__tree for why all three need to share one sizing strategy instead of each scaling independently. */ .hero__canopy { position: relative; width: min(100%, 660px); aspect-ratio: 235 / 135; margin-inline: auto; margin-bottom: -50px; } .hero__canopy svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hero__tree { color: var(--gold); z-index: 2; } .hero__trunk-svg { color: var(--fg); z-index: 1; } /* Blade "extension" — assets/js/blade-animation.js positions/sizes this fixed-position bar on every scroll tick, growing it from the bottom tip of .hero__trunk-svg down toward the hilt in .roots__art, so the blade visually keeps extending downward as the page scrolls. Width is also set by JS (proportional to the blade's own rendered width, so it stays visually as thick as the blade at every viewport size). Zero height/opacity by default so nothing shows before JS measures the real gap (and nothing shows at all if JS is unavailable). */ .blade-extension { position: fixed; top: 0; left: 0; width: 2px; height: 0; background: var(--fg); opacity: 0; pointer-events: none; z-index: 1; border-radius: 2px; } /* Tablet & mobile — stack into one column, art on top, everything centered underneath it. */ @media (max-width: 900px) { .hero__row { grid-template-columns: 1fr; text-align: center; gap: 20px; } .hero__copy { text-align: center; } .hero__nav { justify-content: center; margin-bottom: 20px; } .hero__sub { margin-inline: auto; } .hero__canopy-col { order: -1; } /* Less overlap once the art itself is smaller than its 660px desktop cap — a fixed -50px reads as a much bigger bite out of a shrunk canopy, so scale it down along with the viewport. */ .hero__canopy { margin-bottom: -30px; } .wordmark { line-height: 60px; } .roots__row { gap: 0px !important; padding: 0 20px 20px !important;} /* Desktop stacks "Take Root / Belong / Thrive" as three staircased lines — on tablet/mobile there's no room for that staircase, so run them in a single centered row instead (wrapping if it ever gets too tight for the viewport). */ .hero__headline { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .5em; row-gap: .15em; margin-bottom: 1.2rem; } .hero__headline span { display: inline; padding-left: 0; } .roots__copy { gap: 0 !important; height: 110px;} .hero__headline span:nth-child(2) { padding-left: 0em; } .hero__headline span:nth-child(3) { padding-left: 0em; } } @media (max-width: 600px) { /* --hero-gutter's 17.5vw is calibrated for desktop proportions — on a phone that eats most of the width, so switch to a flat gutter. */ .hero__row, .roots__row { padding-inline: 1.25rem; gap: 1.5rem; } .hero__nav { flex-wrap: wrap; margin-bottom: 1.0rem; } .hero__canopy { margin-bottom: -18px; } } /* Individual leaves (cls-13 paths not part of the branch skeleton). Filled with --cream (rather than the SVG's own fill="none") so they read as solid shapes instead of thin outlines once they fall/fade past the hero and drift over the darker oxblood roots section. */ .leaf { fill: var(--cream); transform-box: fill-box; transform-origin: center; } /* Flutter — idle animation on load */ @keyframes leaf-flutter { 0% { transform: rotate(calc(var(--rot, 0deg) - 3deg)) translateY(0); } 50% { transform: rotate(calc(var(--rot, 0deg) + 3deg)) translateY(-2px); } 100% { transform: rotate(calc(var(--rot, 0deg) - 3deg)) translateY(0); } } .leaf-flutter { animation: leaf-flutter var(--dur, 3.4s) ease-in-out infinite; animation-delay: var(--delay, 0s); transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: reduce) { .leaf-flutter { animation: none; } } .wordmark--hero { /* 5.31vw reaches its 4.25rem cap at 1280px too (was 5vw, capping at ~1360px) — see the note on .hero__headline for why every fluid hero value needs to hit its ceiling at the same viewport width. */ font-size: clamp(3.2rem, 5.31vw, 4.25rem); color: var(--fg); margin-top: 0; } /* ══════════════════════════════════════════════ ROOTS SECTION ══════════════════════════════════════════════ */ .roots { position: relative; background: var(--oxblood); color: rgba(255,255,255,.92); padding: 0; overflow: hidden; } /* One row, two columns — mirrors .hero__row exactly (same gutter, same 1 : 1.8 column ratio, same gap), text on the left and the hilt/root art on the right, vertically centered together. The comp has these side by side, not stacked. */ .roots__row { width: 100%; padding-inline: var(--hero-gutter); display: grid; grid-template-columns: 1fr 1.8fr; align-items: center; gap: 2rem; } .roots__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .roots__item p { color: rgba(255,255,255,.78); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.35; margin-bottom: 0; } .roots__item strong { color: var(--white); font-weight: 700; } /* align-self: start (instead of the row's default centered alignment) pulls the art up against the section's top edge, matching the comp — otherwise it centers against the taller text column next to it. padding-top is the actual (fixed, non-drifting) gap kept between the section's top edge and the hilt — see the transform note on .roots__tree for why the hilt needs *some* positioning help to land right under it in the first place. */ .roots__art { text-align: center; align-self: start; padding-top: 10px; } /* Hilt (épée guard/pommel) + root tendrils — one asset, recolored white. Shares the exact width formula and centering as .hero__canopy above (same column width, same 660px cap, same margin:auto) so the two pieces of artwork — and the trunk/hilt lines inside them — stay registered with each other at every viewport width instead of scaling independently. The source file's viewBox originally had ~35% empty space above the hilt baked in. A transform/negative-margin can shift the *painted* art up to hide that, but the element's layout box stays the source viewBox's full (padded) size regardless — so the "removed" empty space just reappears as slack at the *bottom* of the box instead, inflating .roots__row's height on desktop and the gap to the text below it on tablet/mobile. Cropping the viewBox itself (in template-home.php) to the artwork's real bounding box — instead of faking it with a transform — is what actually removes that dead space from layout, not just from the painted result. */ .roots__tree { display: block; margin: 0 auto 2rem; width: min(100%, 660px); height: auto; color: var(--white); } /* The two solid-fill paths inside .roots__tree are the épée guard/pommel and grip (the "hilt"), not root tendrils — give them their own fill so they render black while everything else (the stroke-only root lines) keeps inheriting white from .roots__tree's color above. The white outline separates the black hilt from the oxblood background behind it; vector-effect keeps it a literal 1px regardless of how much the SVG itself is scaled up by width: min(100%, 660px) above. */ .roots__hilt { fill: var(--fg); stroke: var(--white); stroke-width: 1px; vector-effect: non-scaling-stroke; } @media (max-width: 900px) { .roots__row { grid-template-columns: 1fr; text-align: center; } .roots__copy { align-items: center; } .roots__art { order: -1; } } /* Optional — only rendered by template-home.php when a page's block content has more than one block (the first always fills .hero__sub above). Reuses .entry-content's existing block spacing/typography so anything added here matches every other page on the site. */ .home-extra { padding-block: 4rem; } /* ══════════════════════════════════════════════ POSTS / ARCHIVE ══════════════════════════════════════════════ */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; } .post-card { display: flex; flex-direction: column; } .post-card__thumbnail { aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; margin-bottom: 1.25rem; } .post-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .post-card:hover .post-card__thumbnail img { transform: scale(1.03); } .post-card__category { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; } .post-card__title { font-size: 1.35rem; margin-bottom: .6rem; line-height: 1.25; } .post-card__title a:hover { color: var(--gold); } .post-card__excerpt { color: var(--mu); font-size: .9rem; line-height: 1.65; } .post-card__meta { margin-top: auto; padding-top: 1rem; font-size: .78rem; color: var(--mu-2); letter-spacing: .04em; } /* ══════════════════════════════════════════════ SINGLE POST / PAGE ══════════════════════════════════════════════ */ .entry-header { padding-block: 4rem 2rem; text-align: center; } .entry-header--left { padding-top: 2rem; text-align: left; } .entry-header__category { font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .entry-header__title { max-width: 820px; margin-inline: auto; } .entry-header__meta { font-size: .8rem; color: var(--mu-2); letter-spacing: .05em; margin-top: 1.25rem; } .entry-content { padding-block: 3rem; } .entry-content > * + * { margin-top: 1.4rem; } .entry-content h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); margin-top: 3rem; margin-bottom: .75rem; } .entry-content h3 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: .5rem; } .entry-content ul, .entry-content ol { padding-left: 1.2rem; color: var(--mu); } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content li { margin-bottom: .4rem; } .entry-content a { color: var(--gold); border-bottom: 1px solid var(--gold-border); transition: border-color var(--transition); } .entry-content a:hover { border-color: var(--gold-2); } .entry-content img { border-radius: 6px; } .entry-content hr { border: none; border-top: 1px solid var(--border); margin-block: 3rem; } .page-links { padding-top: 2rem; font-size: .85rem; color: var(--mu-2); } /* ══════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════ */ .pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; padding-block: 3rem; } .pagination a, .pagination span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 3px; font-size: .85rem; transition: border-color var(--transition), color var(--transition); } .pagination a:hover { border-color: var(--gold); color: var(--gold); } .pagination .current { background: var(--gold); color: var(--white); border-color: var(--gold); } /* ══════════════════════════════════════════════ 404 / EMPTY STATES ══════════════════════════════════════════════ */ .error-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; } .error-page .wp-block-buttons { margin-top: 1.5rem; } .error-page__code { font-size: 8rem; font-family: var(--font-display); color: var(--gold); opacity: .25; line-height: 1; } .error-page__title { font-size: 2rem; margin-bottom: 1rem; } .error-page__body { color: var(--mu); max-width: 420px; } /* ══════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════ */ .site-footer { position: relative; z-index: 2; background: var(--fg); color: rgba(247,243,227,.55); padding-block: 4rem 2.5rem; } .footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(247,243,227,.1); margin-bottom: 2rem; } .footer__brand .wordmark { color: var(--gold); font-size: 1.5rem; } .footer__tagline { font-size: .85rem; color: rgba(247,243,227,.45); line-height: 1.7; max-width: 280px; margin-top: 1rem; } .footer__nav-title { font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(247,243,227,.3); margin-bottom: 1rem; } .footer__nav ul { list-style: none; } .footer__nav li + li { margin-top: .5rem; } .footer__nav a { font-size: .85rem; color: rgba(247,243,227,.55); transition: color var(--transition); } .footer__nav a:hover { color: var(--gold); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .75rem; letter-spacing: .05em; } .footer__copyright { color: rgba(247,243,227,.3); } .footer__legal { display: flex; gap: 1.25rem; } .footer__legal a { color: rgba(247,243,227,.45); } .footer__legal a:hover { color: var(--gold); } /* ══════════════════════════════════════════════ UTILITIES ══════════════════════════════════════════════ */ .text-gold { color: var(--gold); } .text-muted { color: var(--mu); } .text-center { text-align: center; } .text-upper { text-transform: uppercase; letter-spacing: .1em; font-size: .8em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } } @media (max-width: 600px) { .footer__inner { grid-template-columns: 1fr; } .container, .container--narrow { padding-inline: 1.25rem; } .section { padding-block: 4rem; } } /* ══════════════════════════════════════════════ WORDPRESS CORE / EDITOR CLASSES ══════════════════════════════════════════════ */ .alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; } .alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: calc(var(--max-width) + 4rem); margin-inline: auto; } .alignfull { max-width: 100%; } .wp-caption { font-size: .8rem; color: var(--mu-2); margin-top: .4rem; text-align: center; }