/** * PCF theme base styles. * * Every themable value reads a --pcf-* token. The :root block below holds the * registry DEFAULTS only — live values are injected after this file via * wp_add_inline_style() and win the cascade. Never hard-code a themable value. */ /* ---------------------------------------------------------------- tokens */ :root { --pcf-color-primary: #024e9c; --pcf-color-primary-alt: #0c7bd8; --pcf-color-secondary: #f07d0a; --pcf-color-tertiary: #4ca512; --pcf-color-background: #f7f9fc; --pcf-color-surface: #ffffff; --pcf-color-surface-alt: #edf4fd; --pcf-color-surface-high: #d8e9fb; --pcf-color-text: #0b1f33; --pcf-color-text-muted: #4a5568; --pcf-color-text-invert: #ffffff; --pcf-color-border: #cfe2f7; --pcf-color-overlay: #04305c; --pcf-color-footer-text: #bbd9f7; --pcf-font-heading: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --pcf-font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --pcf-h1-size: 48px; --pcf-h1-lh: 56px; --pcf-h1-weight: 700; --pcf-h2-size: 32px; --pcf-h2-lh: 40px; --pcf-h2-weight: 700; --pcf-h3-size: 24px; --pcf-h3-lh: 32px; --pcf-h3-weight: 600; --pcf-h4-size: 20px; --pcf-h4-lh: 28px; --pcf-h4-weight: 600; --pcf-h5-size: 18px; --pcf-h5-lh: 28px; --pcf-h5-weight: 600; --pcf-h6-size: 16px; --pcf-h6-lh: 24px; --pcf-h6-weight: 700; --pcf-p-size: 16px; --pcf-p-lh: 24px; --pcf-p-weight: 400; --pcf-small-size: 14px; --pcf-small-lh: 20px; --pcf-small-weight: 400; --pcf-hscale-m: 0.72; --pcf-hscale: 1; /* becomes --pcf-hscale-m below 960px */ --pcf-container: 1200px; --pcf-section-gap: 80px; --pcf-gutter: 24px; --pcf-radius-sm: 8px; --pcf-radius: 16px; --pcf-radius-lg: 32px; --pcf-radius-btn: 999px; --pcf-logo-height: 40px; /* header grows with the logo so nothing ever clips or overlaps */ --pcf-header-height: max(76px, calc(var(--pcf-logo-height) + 36px)); /* Utility bar height. Zero unless the header actually renders one, so everything that offsets for the fixed header stays correct either way. The bar collapses on scroll; this is its at-rest height. */ --pcf-topbar-height: 0px; /* Elevation scale. Sixteen one-off box-shadows had accumulated across the theme and the addon, so nothing sat at a predictable height relative to anything else. These five steps replace them. All are mixed from --pcf-color-text, so a palette change carries through and every surface casts light from the same source. */ --pcf-shadow-xs: 0 1px 2px color-mix(in srgb, var(--pcf-color-text) 6%, transparent); --pcf-shadow-sm: 0 4px 10px color-mix(in srgb, var(--pcf-color-text) 8%, transparent); --pcf-shadow-card: 0 12px 28px color-mix(in srgb, var(--pcf-color-text) 9%, transparent); --pcf-shadow-lg: 0 20px 40px color-mix(in srgb, var(--pcf-color-text) 13%, transparent); --pcf-shadow-xl: 0 28px 56px color-mix(in srgb, var(--pcf-color-text) 20%, transparent); /* Coloured lift for primary actions — deliberately not part of the neutral scale, since it signals emphasis rather than height. */ --pcf-shadow-glow: 0 10px 24px color-mix(in srgb, var(--pcf-color-secondary) 35%, transparent); } @media (max-width: 960px) { :root { --pcf-hscale: var(--pcf-hscale-m); } } /* ----------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--pcf-color-background); color: var(--pcf-color-text); font-family: var(--pcf-font-body); font-size: var(--pcf-p-size); line-height: var(--pcf-p-lh); font-weight: var(--pcf-p-weight); -webkit-font-smoothing: antialiased; /* Guard against a stray element widening the page. `hidden` does that but also turns into a scroll container, which silently disables position: sticky on every descendant — .pcf-post__sticky was never actually sticking. `clip` gives the same protection without creating the scroll container, so it wins wherever it is supported. */ overflow-x: hidden; overflow-x: clip; } img { max-width: 100%; height: auto; } figure { margin: 0; } /* ------------------------------------------------------------ typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--pcf-font-heading); color: inherit; margin: 0 0 0.5em; overflow-wrap: break-word; } h1 { font-size: calc(var(--pcf-h1-size) * var(--pcf-hscale)); line-height: calc(var(--pcf-h1-lh) * var(--pcf-hscale)); font-weight: var(--pcf-h1-weight); } h2 { font-size: calc(var(--pcf-h2-size) * var(--pcf-hscale)); line-height: calc(var(--pcf-h2-lh) * var(--pcf-hscale)); font-weight: var(--pcf-h2-weight); } h3 { font-size: calc(var(--pcf-h3-size) * var(--pcf-hscale)); line-height: calc(var(--pcf-h3-lh) * var(--pcf-hscale)); font-weight: var(--pcf-h3-weight); } h4 { font-size: var(--pcf-h4-size); line-height: var(--pcf-h4-lh); font-weight: var(--pcf-h4-weight); } h5 { font-size: var(--pcf-h5-size); line-height: var(--pcf-h5-lh); font-weight: var(--pcf-h5-weight); } h6 { font-size: var(--pcf-h6-size); line-height: var(--pcf-h6-lh); font-weight: var(--pcf-h6-weight); } p { margin: 0 0 1em; font-size: var(--pcf-p-size); line-height: var(--pcf-p-lh); font-weight: var(--pcf-p-weight); } small, .pcf-small { font-size: var(--pcf-small-size); line-height: var(--pcf-small-lh); font-weight: var(--pcf-small-weight); } .pcf-lead { font-size: calc(var(--pcf-p-size) + 2px); line-height: calc(var(--pcf-p-lh) + 4px); } a { color: var(--pcf-color-primary); text-decoration: none; } a:hover { color: var(--pcf-color-primary-alt); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--pcf-color-secondary) 70%, transparent); outline-offset: 2px; } .pcf-icon { font-size: 1.5em; line-height: 1; vertical-align: middle; user-select: none; } /* ---------------------------------------------------------------- layout */ .pcf-container { max-width: var(--pcf-container); margin-inline: auto; padding-inline: var(--pcf-gutter); } .pcf-main--offset { padding-top: calc(var(--pcf-header-height) + var(--pcf-topbar-height, 0px) + 32px); padding-bottom: var(--pcf-section-gap); } /* --------------------------------------------------------------- buttons */ .pcf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 32px; border: 0; border-radius: var(--pcf-radius-btn); font-family: var(--pcf-font-body); font-size: var(--pcf-p-size); font-weight: 700; line-height: 1.4; cursor: pointer; text-decoration: none; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .pcf-btn--donate { /* Deepened from the brand orange so white label text clears WCAG AA (4.5:1); derived from the token, not a second hex. The bright --pcf-color-secondary stays the accent for glows, borders and icons. */ background: color-mix(in srgb, var(--pcf-color-secondary), #000 24%); color: var(--pcf-color-text-invert); } .pcf-btn--donate:hover { transform: scale(1.05); color: var(--pcf-color-text-invert); } .pcf-btn--primary { background: var(--pcf-color-primary); color: var(--pcf-color-text-invert); box-shadow: var(--pcf-shadow-glow); } .pcf-btn--primary:hover { background: var(--pcf-color-primary-alt); color: var(--pcf-color-text-invert); } .pcf-btn--outline { background: transparent; color: var(--pcf-color-text-invert); border: 2px solid color-mix(in srgb, var(--pcf-color-text-invert) 40%, transparent); backdrop-filter: blur(4px); } .pcf-btn--outline:hover { background: var(--pcf-color-text-invert); color: var(--pcf-color-primary); } .pcf-btn--lg { padding: 20px 40px; font-size: calc(var(--pcf-p-size) + 2px); box-shadow: var(--pcf-shadow-xl); } @keyframes pcf-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pcf-color-secondary) 70%, transparent); } 70% { transform: scale(1.05); box-shadow: 0 0 0 15px transparent; } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } } .pcf-btn--pulse { animation: pcf-pulse 2s infinite; } .pcf-btn--pulse:hover { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .pcf-btn--pulse { animation: none; } } /* ---------------------------------------------------------------- header */ .pcf-header { position: fixed; inset: 0 0 auto; z-index: 50; /* Slides out of the way when scrolling down, back on scrolling up. */ transform: translate3d(0, 0, 0); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .pcf-header.is-hidden { transform: translate3d(0, -100%, 0); } /* utility bar ------------------------------------------------------------ */ /* Set on by pcf_header_body_class() only when the bar is rendered, so every fixed-header offset stays correct whether or not it exists. */ body.pcf-has-topbar { --pcf-topbar-height: 40px; } /* The bar sets its own height locally: --pcf-topbar-height on :root stays at the page-offset value, which is 0 when no bar is rendered. */ .pcf-header__top { --pcf-topbar-h: 40px; overflow: hidden; font-size: var(--pcf-small-size, 14px); color: color-mix(in srgb, var(--pcf-color-text-invert, #ffffff) 82%, transparent); background: var(--pcf-color-primary, #024e9c); /* Collapses to nothing on scroll: the site gets a compact bar without losing the contact details on first paint. */ height: var(--pcf-topbar-h); transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .pcf-header.is-scrolled .pcf-header__top { height: 0; opacity: 0; } .pcf-header__top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pcf-gutter, 24px); height: var(--pcf-topbar-h); } .pcf-header__contact { display: flex; gap: 24px; align-items: center; min-width: 0; } .pcf-header__contact-item { display: inline-flex; gap: 7px; align-items: center; color: inherit; white-space: nowrap; transition: color 0.25s ease; } .pcf-header__contact-item:hover { color: var(--pcf-color-text-invert, #ffffff); } .pcf-header__contact-item .pcf-icon { font-size: 17px; opacity: 0.75; } .pcf-header__top .pcf-socials { display: flex; gap: 6px; } .pcf-header__top .pcf-socials__link { display: grid; place-items: center; width: 26px; height: 26px; color: inherit; border-radius: 50%; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .pcf-header__top .pcf-socials__link:hover { color: var(--pcf-color-text-invert, #ffffff); background: color-mix(in srgb, var(--pcf-color-text-invert, #ffffff) 18%, transparent); transform: translateY(-1px); } .pcf-header__top .pcf-socials__link svg { width: 14px; height: 14px; } /* main bar --------------------------------------------------------------- */ .pcf-header__main { position: relative; background: color-mix(in srgb, var(--pcf-color-surface, #ffffff) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--pcf-shadow-xs); transition: background 0.3s ease, box-shadow 0.3s ease; } .pcf-header.is-scrolled .pcf-header__main { background: var(--pcf-color-surface, #ffffff); box-shadow: var(--pcf-shadow-card); } .pcf-header__bar { display: flex; gap: var(--pcf-gutter, 24px); align-items: center; justify-content: space-between; min-height: var(--pcf-header-height, 76px); transition: min-height 0.3s ease; } .pcf-header.is-scrolled .pcf-header__bar { min-height: calc(var(--pcf-header-height, 76px) - 14px); } /* reading-progress hairline along the bottom edge */ .pcf-header__progress { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; pointer-events: none; } .pcf-header__progress i { display: block; width: 100%; height: 100%; background: linear-gradient( 90deg, var(--pcf-color-primary, #024e9c), var(--pcf-color-secondary, #f07d0a) ); border-radius: 0 2px 2px 0; /* --pcf-progress is written by the scroll handler, 0..1 */ transform: scaleX(var(--pcf-progress, 0)); transform-origin: 0 50%; } /* brand ------------------------------------------------------------------ */ .pcf-brand { display: inline-flex; gap: 12px; align-items: center; font-family: var(--pcf-font-heading); font-size: var(--pcf-h4-size, 20px); font-weight: 700; color: var(--pcf-color-primary, #024e9c); } .pcf-brand img, .pcf-brand .custom-logo { width: auto; max-width: 100%; height: auto; /* Honour the custom height on every screen while never overflowing a narrow phone header — the logo scales down proportionally if it would be wider than the space available. */ max-height: var(--pcf-logo-height, 40px); object-fit: contain; transition: max-height 0.3s ease; } .pcf-header.is-scrolled .pcf-brand img, .pcf-header.is-scrolled .pcf-brand .custom-logo { max-height: calc(var(--pcf-logo-height, 40px) - 6px); } .pcf-brand__mark { font-size: 32px; color: var(--pcf-color-secondary, #f07d0a); } .pcf-brand__name { white-space: nowrap; } /* primary nav ------------------------------------------------------------ */ .pcf-nav { position: relative; } .pcf-nav__list { display: flex; gap: 4px; align-items: center; padding: 0; margin: 0; list-style: none; } .pcf-nav__list > li { position: relative; } .pcf-nav__list > li > a { position: relative; z-index: 1; display: block; /* Sentence case at a normal weight: seven shouty uppercase items was the single biggest source of visual noise in the old bar. */ padding: 9px 14px; font-size: var(--pcf-small-size, 14px); font-weight: 600; color: var(--pcf-color-text-muted, #4a5568); white-space: nowrap; border-radius: var(--pcf-radius-btn, 999px); transition: color 0.25s ease; } .pcf-nav__list > li > a:hover, .pcf-nav__list > .current-menu-item > a, .pcf-nav__list > .current_page_item > a, .pcf-nav__list > .current-menu-ancestor > a { color: var(--pcf-color-primary, #024e9c); } .pcf-nav__list > .current-menu-item > a, .pcf-nav__list > .current_page_item > a, .pcf-nav__list > .current-menu-ancestor > a { font-weight: 700; } /* the pill that glides between items; positioned by JS */ .pcf-nav__pill { position: absolute; top: var(--pcf-pill-y, 0); left: 0; z-index: 0; width: var(--pcf-pill-w, 0); height: var(--pcf-pill-h, 0); background: color-mix(in srgb, var(--pcf-color-primary, #024e9c) 9%, transparent); border-radius: var(--pcf-radius-btn, 999px); opacity: 0; transform: translate3d(var(--pcf-pill-x, 0), 0, 0); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .pcf-nav.is-pill-ready .pcf-nav__pill { opacity: 1; } /* dropdowns */ .pcf-nav__list .sub-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; padding: 8px; margin: 0; list-style: none; background: var(--pcf-color-surface, #ffffff); border: 1px solid var(--pcf-color-border, #cfe2f7); border-radius: var(--pcf-radius, 16px); box-shadow: var(--pcf-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: 20% 0; transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s; } .pcf-nav__list li:hover > .sub-menu, .pcf-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .pcf-nav__list .sub-menu a { display: block; padding: 9px 14px; font-size: var(--pcf-small-size, 14px); font-weight: 500; color: var(--pcf-color-text, #0b1f33); border-radius: var(--pcf-radius-sm, 8px); transition: background 0.2s ease, color 0.2s ease; } .pcf-nav__list .sub-menu a:hover { color: var(--pcf-color-primary, #024e9c); background: var(--pcf-color-surface-alt, #edf4fd); } /* header donate button gets a slow sheen so it reads as the primary action */ .pcf-header__actions .pcf-btn--donate { position: relative; overflow: hidden; } .pcf-header__actions .pcf-btn--donate::after { position: absolute; inset: 0 auto 0 -60%; width: 45%; content: ""; background: linear-gradient( 100deg, transparent, color-mix(in srgb, #fff 45%, transparent), transparent ); transform: skewX(-18deg); animation: pcf-sheen 5.5s ease-in-out infinite; } @keyframes pcf-sheen { 0%, 62% { left: -60%; } 86%, 100% { left: 130%; } } /* burger ----------------------------------------------------------------- */ .pcf-burger { display: none; padding: 8px; background: none; border: 0; cursor: pointer; } .pcf-burger__box { display: grid; gap: 5px; place-content: center; width: 26px; } .pcf-burger__line { display: block; width: 26px; height: 2px; background: var(--pcf-color-primary, #024e9c); border-radius: 2px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, width 0.35s ease; } .pcf-burger__line:nth-child(3) { width: 17px; margin-left: auto; } .pcf-burger[aria-expanded="true"] .pcf-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pcf-burger[aria-expanded="true"] .pcf-burger__line:nth-child(2) { opacity: 0; } .pcf-burger[aria-expanded="true"] .pcf-burger__line:nth-child(3) { width: 26px; transform: translateY(-7px) rotate(-45deg); } /* full-screen mobile menu ------------------------------------------------ */ .pcf-mobile-nav { position: fixed; inset: 0; z-index: 49; display: grid; place-items: center; background: color-mix(in srgb, var(--pcf-color-surface, #ffffff) 97%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; } .pcf-mobile-nav.is-open { opacity: 1; visibility: visible; } .pcf-mobile-nav__inner { width: min(560px, 88vw); max-height: 82vh; padding: 24px 0; overflow-y: auto; text-align: center; } .pcf-mobile-nav__list { padding: 0; margin: 0 0 28px; list-style: none; } .pcf-mobile-nav__list > li { opacity: 0; transform: translateY(18px); } /* staggered reveal, one step per item */ .pcf-mobile-nav.is-open .pcf-mobile-nav__list > li { animation: pcf-menu-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(60ms * var(--i, 0)); } @keyframes pcf-menu-in { to { opacity: 1; transform: translateY(0); } } .pcf-mobile-nav__list a { display: inline-block; padding: 10px 0; font-family: var(--pcf-font-heading); font-size: var(--pcf-h3-size, 24px); font-weight: 700; color: var(--pcf-color-text, #0b1f33); transition: color 0.2s ease, transform 0.2s ease; } .pcf-mobile-nav__list a:hover, .pcf-mobile-nav__list .current-menu-item > a { color: var(--pcf-color-primary, #024e9c); transform: translateY(-2px); } .pcf-mobile-nav__list .sub-menu { padding: 0; margin: 4px 0 8px; list-style: none; } .pcf-mobile-nav__list .sub-menu a { font-size: var(--pcf-p-size, 16px); font-weight: 500; color: var(--pcf-color-text-muted, #4a5568); } .pcf-mobile-nav__foot { display: grid; gap: 18px; justify-items: center; padding-top: 22px; border-top: 1px solid var(--pcf-color-border, #cfe2f7); } .pcf-mobile-nav__contact { display: grid; gap: 8px; font-size: var(--pcf-small-size, 14px); } .pcf-mobile-nav__contact a { display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: var(--pcf-color-text-muted, #4a5568); } .pcf-mobile-nav__foot .pcf-socials { display: flex; gap: 14px; } .pcf-mobile-nav__foot .pcf-socials__link { color: var(--pcf-color-primary, #024e9c); } .pcf-mobile-nav__foot .pcf-socials__link svg { width: 18px; height: 18px; } body.pcf-nav-locked { overflow: hidden; } /* responsive -------------------------------------------------------------- */ @media (max-width: 960px) { .pcf-nav, .pcf-header__actions { display: none; } .pcf-burger { display: inline-flex; } .pcf-header__contact-item span { display: none; } .pcf-header__contact { gap: 10px; } } @media (max-width: 640px) { body.pcf-has-topbar { --pcf-topbar-height: 34px; } .pcf-header__top { --pcf-topbar-h: 34px; } .pcf-header__top-inner { justify-content: center; } .pcf-header__contact-item span { display: inline; } .pcf-header__top .pcf-socials { display: none; } .pcf-mobile-nav__list a { font-size: var(--pcf-h4-size, 20px); } } @media (prefers-reduced-motion: reduce) { .pcf-header, .pcf-header__top, .pcf-header__main, .pcf-header__bar, .pcf-nav__pill, .pcf-burger__line, .pcf-mobile-nav { transition-duration: 0.01ms; } .pcf-header__actions .pcf-btn--donate::after { animation: none; } .pcf-mobile-nav.is-open .pcf-mobile-nav__list > li { animation-duration: 0.01ms; animation-delay: 0ms; } } /* ---------------------------------------------------------------- footer */ .pcf-footer { background: var(--pcf-color-primary); color: var(--pcf-color-text-invert); padding: 64px 0 32px; position: relative; overflow: hidden; } .pcf-footer .pcf-brand, .pcf-footer .pcf-brand__name { color: var(--pcf-color-text-invert); } .pcf-footer .pcf-brand__mark { color: var(--pcf-color-secondary); } .pcf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: calc(var(--pcf-gutter) * 2); margin-bottom: 48px; } .pcf-footer__heading { color: var(--pcf-color-text-invert); margin-bottom: 20px; } .pcf-footer__tagline { color: var(--pcf-color-footer-text); font-size: var(--pcf-small-size); line-height: var(--pcf-small-lh); margin: 16px 0 24px; } .pcf-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pcf-footer__menu a, .pcf-footer__contact a { color: var(--pcf-color-footer-text); font-size: var(--pcf-small-size); } .pcf-footer__menu a:hover, .pcf-footer__contact a:hover { color: var(--pcf-color-text-invert); text-decoration: underline; } .pcf-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; color: var(--pcf-color-footer-text); font-size: var(--pcf-small-size); } .pcf-footer__contact li { display: flex; gap: 12px; align-items: flex-start; } .pcf-footer__contact .pcf-icon { color: color-mix(in srgb, var(--pcf-color-text-invert) 70%, var(--pcf-color-primary)); font-size: 20px; } .pcf-socials { display: flex; gap: 12px; } .pcf-socials__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pcf-color-primary-alt); color: var(--pcf-color-text-invert); transition: background-color 0.3s ease, color 0.3s ease; } .pcf-socials__link:hover { background: var(--pcf-color-text-invert); color: var(--pcf-color-primary); } .pcf-socials__link svg { width: 22px; height: 22px; } .pcf-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--pcf-color-text-invert) 20%, transparent); padding-top: 24px; text-align: center; color: var(--pcf-color-footer-text); font-size: var(--pcf-small-size); } .pcf-footer__bottom p { margin: 0; } @media (max-width: 960px) { .pcf-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .pcf-footer__grid { grid-template-columns: 1fr; } } /* --------------------------------------------------- entries & archives */ .pcf-entry__header { margin-bottom: 32px; } .pcf-entry__title { color: var(--pcf-color-primary); } .pcf-entry__meta { color: var(--pcf-color-text-muted); font-size: var(--pcf-small-size); } .pcf-entry__thumb img { border-radius: var(--pcf-radius); } .pcf-entry__content > * + * { margin-top: 1em; } .pcf-entry__content img { border-radius: var(--pcf-radius-sm); } .pcf-archive__header { margin-bottom: 40px; } .pcf-archive__header h1 { color: var(--pcf-color-primary); } .pcf-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pcf-gutter); margin-bottom: 48px; } @media (max-width: 960px) { .pcf-archive__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .pcf-archive__grid { grid-template-columns: 1fr; } } .pcf-card { background: var(--pcf-color-surface); border-radius: var(--pcf-radius); overflow: hidden; box-shadow: var(--pcf-shadow-card); display: flex; flex-direction: column; transition: transform 0.3s ease; } .pcf-card:hover { transform: translateY(-6px); } .pcf-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .pcf-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .pcf-card__meta { color: var(--pcf-color-secondary); font-size: var(--pcf-small-size); font-weight: 700; margin: 0; } .pcf-card__title { margin: 0; } .pcf-card__title a { color: var(--pcf-color-text); } .pcf-card__title a:hover { color: var(--pcf-color-primary); } .pcf-card__excerpt { color: var(--pcf-color-text-muted); font-size: var(--pcf-small-size); } .pcf-card__excerpt p { margin: 0; } .pcf-card__more { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; } .pagination { display: flex; justify-content: center; } .pagination .nav-links { display: flex; gap: 8px; align-items: center; } .pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--pcf-radius-btn); background: var(--pcf-color-surface); font-weight: 700; } .pagination .page-numbers.current { background: var(--pcf-color-primary); color: var(--pcf-color-text-invert); } /* ------------------------------------------------------------- 404/none */ .pcf-404, .pcf-none { text-align: center; padding: var(--pcf-section-gap) 0; } .pcf-404__code { font-size: calc(var(--pcf-h1-size) * 2); line-height: 1; color: color-mix(in srgb, var(--pcf-color-primary) 15%, transparent); margin-bottom: 0; } .pcf-404__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 32px 0; } .pcf-404__search, .pcf-none form { max-width: 420px; margin-inline: auto; } /* ------------------------------------------------------- forms & search */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea, select { width: 100%; padding: 12px 20px; border: 1px solid var(--pcf-color-border); border-radius: var(--pcf-radius-sm); background: var(--pcf-color-surface); color: var(--pcf-color-text); font-family: var(--pcf-font-body); font-size: var(--pcf-p-size); } input:focus, textarea:focus, select:focus { border-color: var(--pcf-color-primary-alt); outline: 2px solid color-mix(in srgb, var(--pcf-color-primary-alt) 30%, transparent); } .search-form { display: flex; gap: 8px; } .search-form .search-submit { flex-shrink: 0; padding: 12px 24px; border: 0; border-radius: var(--pcf-radius-btn); background: var(--pcf-color-primary); color: var(--pcf-color-text-invert); font-weight: 700; cursor: pointer; } /* --------------------------------------------------------- GiveWP skin */ /* Legacy (non-iframed) GiveWP forms inherit the token system. */ .give-form .give-btn, #give-purchase-button, .give-submit { /* Accessible deep-orange (matches the theme donate buttons; AA on white). */ background: color-mix(in srgb, var(--pcf-color-secondary), #000 24%) !important; border: 0 !important; border-radius: var(--pcf-radius-btn) !important; color: var(--pcf-color-text-invert) !important; font-weight: 700 !important; padding: 14px 36px !important; } .give-form .give-donation-amount .give-currency-symbol, .give-form .give-donation-amount .give-text-input { border-color: var(--pcf-color-border) !important; } .give-form .give-donation-levels-wrap .give-btn { background: var(--pcf-color-surface) !important; color: var(--pcf-color-primary) !important; border: 2px solid var(--pcf-color-border) !important; border-radius: var(--pcf-radius) !important; padding: 16px 12px !important; font-weight: 700 !important; } .give-form .give-donation-levels-wrap .give-btn.give-default-level, .give-form .give-donation-levels-wrap .give-btn.give-selected { background: color-mix(in srgb, var(--pcf-color-primary) 5%, var(--pcf-color-surface)) !important; color: var(--pcf-color-primary) !important; border-color: var(--pcf-color-primary) !important; } .give-form .give-donation-levels-wrap .give-btn:hover { border-color: var(--pcf-color-primary) !important; color: var(--pcf-color-primary) !important; } /* Field labels + inputs */ .give-form .give-label { color: var(--pcf-color-text); font-weight: 700; } .give-form input[type="text"], .give-form input[type="email"], .give-form input[type="tel"], .give-form input[type="url"], .give-form input[type="number"], .give-form input[type="password"], .give-form select, .give-form textarea { border: 1px solid var(--pcf-color-border) !important; border-radius: var(--pcf-radius-sm) !important; background: var(--pcf-color-surface) !important; color: var(--pcf-color-text) !important; padding: 12px 16px !important; box-shadow: none !important; } .give-form input:focus, .give-form select:focus, .give-form textarea:focus { border-color: var(--pcf-color-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcf-color-primary) 20%, transparent) !important; outline: none !important; } /* Custom-amount field: currency symbol + input as one rounded pill */ .give-form .give-donation-amount.form-row-wide { display: flex; align-items: stretch; max-width: 340px; border: 1px solid var(--pcf-color-border); border-radius: var(--pcf-radius-sm); overflow: hidden; background: var(--pcf-color-surface); } .give-form .give-donation-amount .give-currency-symbol { display: flex !important; align-items: center; margin: 0 !important; padding: 0 16px !important; background: var(--pcf-color-surface-alt) !important; color: var(--pcf-color-text-muted) !important; border: 0 !important; font-weight: 700; } .give-form .give-donation-amount .give-currency-position-before { order: -1; /* symbol sits before the amount */ } .give-form .give-donation-amount #give-amount, .give-form .give-donation-amount .give-amount-top { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: calc(var(--pcf-h5-size)) !important; font-weight: 700; } /* Payment method: section heading + gateway options as selectable rows */ #give-payment-mode-select { border: 0; margin-top: 24px; padding: 0; } #give-payment-mode-select .give-payment-mode-label { display: block; margin-bottom: 12px; padding: 0; border: 0; color: var(--pcf-color-primary); font-family: var(--pcf-font-heading); font-size: var(--pcf-h5-size); font-weight: 700; } #give-gateway-radio-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } #give-gateway-radio-list > li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border: 1px solid var(--pcf-color-border); border-radius: var(--pcf-radius); background: var(--pcf-color-surface); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } #give-gateway-radio-list > li:hover { border-color: var(--pcf-color-primary); } #give-gateway-radio-list > li.give-gateway-option-selected { border-color: var(--pcf-color-primary); background: color-mix(in srgb, var(--pcf-color-primary) 6%, var(--pcf-color-surface)); } #give-gateway-radio-list label, #give-gateway-radio-list .give-gateway-option { margin: 0; color: var(--pcf-color-text); font-weight: 600; cursor: pointer; } .give-form input[type="radio"], .give-form input[type="checkbox"] { accent-color: var(--pcf-color-primary); width: 18px; height: 18px; margin: 0; } /* Gateway + heading icons. Material Symbols ligatures render as tofu inside CSS ::before with the instanced font, so icons here are inline SVGs painted through a mask — the glyph colour is therefore driven by a token (mask-image = shape, background = colour), never a hard-coded hex. */ .give-form .give-payment-mode-label::before, #give-gateway-radio-list .give-gateway-option::before { content: ""; display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--pcf-gw-icon) center / contain no-repeat; mask: var(--pcf-gw-icon) center / contain no-repeat; } .give-form .give-payment-mode-label { display: flex !important; align-items: center; gap: 10px; color: var(--pcf-color-primary); /* padlock — trust signal on the "Select Payment Method" heading */ --pcf-gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } #give-gateway-radio-list .give-gateway-option { display: inline-flex !important; align-items: center; gap: 10px; color: var(--pcf-color-primary); } /* PayFast → card, Offline → bank, Test/manual → flask. */ #give-gateway-option-pcf_payfast { --pcf-gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); } #give-gateway-option-offline { --pcf-gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10l7-5 7 5v11'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); } #give-gateway-option-manual { --pcf-gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6l-5.5 9.5A2 2 0 0 0 6 21h12a2 2 0 0 0 1.5-3.5L14 9V3'/%3E%3C/svg%3E"); } /* .give-total-wrap wraps the custom-amount input at the top — keep it a plain container (the amount field styles itself). The real "Donation Total" is #give-final-total-wrap, which becomes one clean themed strip. */ .give-form .give-total-wrap { margin: 0 0 8px; } /* Donation total — a centered "Your Impact" card. */ .give-form #give-final-total-wrap { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 28px 0; padding: 28px; background: color-mix(in srgb, var(--pcf-color-primary) 5%, var(--pcf-color-surface)); border: 1px solid color-mix(in srgb, var(--pcf-color-primary) 12%, transparent); border-radius: var(--pcf-radius-lg); text-align: center; } .give-form .give-donation-total-label { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--pcf-color-text-muted) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--pcf-small-size); } .give-form .give-final-total-amount { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--pcf-color-primary) !important; font-family: var(--pcf-font-heading); font-size: var(--pcf-h1-size) !important; line-height: 1.1; font-weight: 700 !important; } /* Glass panel around the whole form (matches the theme card style). */ .give-form-wrap { max-width: 760px; margin-inline: auto !important; } .give-form { max-width: 760px; /* !important defeats GiveWP's own `.give-form{margin:0 …}` so the card actually centres instead of clinging to the left with dead space. */ margin-inline: auto !important; background: color-mix(in srgb, var(--pcf-color-surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--pcf-color-primary-alt) 12%, transparent); border-radius: var(--pcf-radius-lg); box-shadow: var(--pcf-shadow-card); } /* Test-mode notice. GiveWP prints a raw yellow `.give_error.give_warning` banner above the form while the gateway is in test mode; it disappears the moment the site goes live. Until then, tone it down to a compact themed strip (derived from the secondary/orange token) so it stops shouting over the card. */ .give-form-wrap #give_error_test_mode, .give-form-wrap .give_error.give_warning { max-width: 760px; margin: 0 auto 16px; padding: 12px 18px; background: color-mix(in srgb, var(--pcf-color-secondary) 10%, var(--pcf-color-surface)); border: 1px solid color-mix(in srgb, var(--pcf-color-secondary) 30%, transparent); border-radius: var(--pcf-radius-sm); color: var(--pcf-color-text-muted); } .give-form-wrap #give_error_test_mode p, .give-form-wrap .give_error.give_warning p { margin: 0; font-size: var(--pcf-small-size); line-height: var(--pcf-small-lh); } .give-form-wrap #give_error_test_mode strong { color: color-mix(in srgb, var(--pcf-color-secondary), #000 24%); } /* Card padding. give.css ships `#give-recurring-form,form.give-form, form[id*=give-form]{padding:0}` and loads AFTER the theme stylesheet, so a plain `.give-form` rule loses on both specificity and source order — the padding has to be declared on that same selector group and win explicitly. */ #give-recurring-form, form.give-form, form[id*="give-form"] { padding: 35px !important; } /* Give section heading icons a moment of brand colour. */ .give-form .give-donation-levels-wrap { margin-top: 8px; } /* Full-width, prominent submit button. */ #give-purchase-button, .give-submit { display: block !important; width: 100% !important; padding: 20px !important; font-family: var(--pcf-font-heading); font-size: var(--pcf-h5-size) !important; } /* GiveWP renders its single-form template without the theme container, so it ran edge-to-edge and overflowed on mobile. Constrain + pad the whole GiveWP wrapper (featured image + title + form) like the rest of the site, and make the donation-level buttons wrap instead of overflow. */ .pcf-main .give-wrap { max-width: var(--pcf-container, 1200px); margin-inline: auto; padding-inline: 24px; box-sizing: border-box; } .pcf-main .give-wrap * { box-sizing: border-box; } .pcf-main .give-wrap img { max-width: 100%; height: auto; } .give-form .give-donation-levels-wrap.give-list-inline { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; } .give-form .give-donation-levels-wrap.give-list-inline li { margin: 0; flex: 1 1 auto; } .give-form .give-donation-levels-wrap .give-btn { width: 100%; white-space: nowrap; } .pcf-main .give-wrap .give-form-title { white-space: normal; overflow-wrap: break-word; word-break: break-word; } /* Stack GiveWP's two-column single-form layout (featured image | form) on narrow screens so nothing stays too wide and clips. */ @media (max-width: 960px) { .pcf-main .give-wrap #give-sidebar-left, .pcf-main .give-wrap .summary { float: none; width: 100%; margin-left: 0; margin-right: 0; } } @media (max-width: 640px) { .pcf-main .give-wrap { padding-inline: 16px; } /* 35px each side eats too much of a phone viewport — at 320px it leaves the two-up amount buttons (nowrap, 16px/12px padding) too narrow and they overflow the card. Step the padding down instead. */ #give-recurring-form, form.give-form, form[id*="give-form"] { padding: 20px !important; } .give-form .give-donation-levels-wrap.give-list-inline li { flex: 1 1 calc(50% - 6px); } } /* ------------------------------------------------------------ utilities */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important; } .skip-link:focus { clip-path: none; width: auto; height: auto; left: 8px; top: 8px; z-index: 100; background: var(--pcf-color-surface); color: var(--pcf-color-primary); padding: 12px 20px; border-radius: var(--pcf-radius-sm); font-weight: 700; } .pcf-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .pcf-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Grid children arrive in sequence rather than as one block, which reads as deliberate rather than as a page that simply popped in. Matched on the shared __grid / __list naming so it works for every widget without each one having to opt in. The section itself carries the class, so the children only animate once their section is on screen. */ .pcf-reveal [class*="__grid"] > *, .pcf-reveal [class*="__list"] > *, .pcf-reveal [class*="__cards"] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .pcf-reveal.is-visible [class*="__grid"] > *, .pcf-reveal.is-visible [class*="__list"] > *, .pcf-reveal.is-visible [class*="__cards"] > * { opacity: 1; transform: translateY(0); } .pcf-reveal.is-visible [class*="__grid"] > *:nth-child(1), .pcf-reveal.is-visible [class*="__list"] > *:nth-child(1), .pcf-reveal.is-visible [class*="__cards"] > *:nth-child(1) { transition-delay: 0.08s; } .pcf-reveal.is-visible [class*="__grid"] > *:nth-child(2), .pcf-reveal.is-visible [class*="__list"] > *:nth-child(2), .pcf-reveal.is-visible [class*="__cards"] > *:nth-child(2) { transition-delay: 0.16s; } .pcf-reveal.is-visible [class*="__grid"] > *:nth-child(3), .pcf-reveal.is-visible [class*="__list"] > *:nth-child(3), .pcf-reveal.is-visible [class*="__cards"] > *:nth-child(3) { transition-delay: 0.24s; } .pcf-reveal.is-visible [class*="__grid"] > *:nth-child(4), .pcf-reveal.is-visible [class*="__list"] > *:nth-child(4), .pcf-reveal.is-visible [class*="__cards"] > *:nth-child(4) { transition-delay: 0.32s; } .pcf-reveal.is-visible [class*="__grid"] > *:nth-child(n + 5), .pcf-reveal.is-visible [class*="__list"] > *:nth-child(n + 5), .pcf-reveal.is-visible [class*="__cards"] > *:nth-child(n + 5) { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { .pcf-reveal, .pcf-reveal [class*="__grid"] > *, .pcf-reveal [class*="__list"] > *, .pcf-reveal [class*="__cards"] > * { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------------ blog */ .pcf-chip { display: inline-block; padding: 4px 14px; border-radius: var(--pcf-radius-btn); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pcf-chip--primary { background: color-mix(in srgb, var(--pcf-color-primary) 10%, #fff); color: var(--pcf-color-primary); } .pcf-chip--secondary { background: color-mix(in srgb, var(--pcf-color-secondary) 12%, #fff); color: color-mix(in srgb, var(--pcf-color-secondary) 80%, #000); } .pcf-chip--tertiary { background: color-mix(in srgb, var(--pcf-color-tertiary) 10%, #fff); color: var(--pcf-color-tertiary); } .pcf-blog { padding-bottom: var(--pcf-section-gap); } .pcf-blog__heading { color: var(--pcf-color-primary); margin: 0; } .pcf-blog__archive-head { margin-bottom: 40px; } .pcf-blog__description { color: var(--pcf-color-text-muted); margin-top: 8px; } .pcf-featured { position: relative; border-radius: var(--pcf-radius-lg); overflow: hidden; min-height: 480px; display: flex; align-items: flex-end; box-shadow: var(--pcf-shadow-card); margin-bottom: var(--pcf-section-gap); } .pcf-featured__media, .pcf-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pcf-featured:hover .pcf-featured__media img { transform: scale(1.04); } .pcf-featured__media img { transition: transform 0.7s ease; } .pcf-featured__scrim { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--pcf-color-text) 80%, transparent), color-mix(in srgb, var(--pcf-color-text) 20%, transparent) 55%, transparent ); } .pcf-featured__content { position: relative; z-index: 2; max-width: 46rem; padding: 48px; display: grid; gap: 16px; justify-items: start; color: var(--pcf-color-text-invert); } .pcf-featured__chip { display: inline-block; padding: 4px 16px; border-radius: var(--pcf-radius-btn); background: color-mix(in srgb, var(--pcf-color-text-invert) 20%, transparent); backdrop-filter: blur(6px); font-size: var(--pcf-small-size); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pcf-featured__title { margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .pcf-featured__title a { color: inherit; } .pcf-featured__excerpt { color: color-mix(in srgb, var(--pcf-color-text-invert) 90%, transparent); } .pcf-featured__excerpt p { margin: 0; } .pcf-featured__btn { background: var(--pcf-color-surface); color: var(--pcf-color-primary); } .pcf-featured__btn:hover { background: var(--pcf-color-border); color: var(--pcf-color-primary); } .pcf-blog__layout { display: grid; grid-template-columns: 2fr 1fr; gap: calc(var(--pcf-gutter) * 2); align-items: start; } .pcf-blog__head { margin-bottom: 32px; } .pcf-blog__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pcf-gutter); margin-bottom: 48px; } .pcf-blog__grid--three { grid-template-columns: repeat(3, 1fr); } .pcf-story-card { background: var(--pcf-color-surface); border-radius: var(--pcf-radius); overflow: hidden; box-shadow: var(--pcf-shadow-card); display: flex; flex-direction: column; transition: transform 0.3s ease; } .pcf-story-card:hover { transform: translateY(-6px); } .pcf-story-card__media { position: relative; display: block; height: 192px; overflow: hidden; } .pcf-story-card__media img { width: 100%; height: 100%; object-fit: cover; } .pcf-story-card__media .pcf-chip { position: absolute; top: 16px; left: 16px; background: var(--pcf-color-surface); } .pcf-story-card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 28px; } .pcf-story-card__title { margin: 0; font-size: var(--pcf-h4-size); line-height: var(--pcf-h4-lh); } .pcf-story-card__title a { color: var(--pcf-color-text); } .pcf-story-card__title a:hover { color: var(--pcf-color-primary); } .pcf-story-card__excerpt { flex: 1; color: var(--pcf-color-text-muted); } .pcf-story-card__excerpt p { margin: 0; } .pcf-story-card__more { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .pcf-story-card__more .pcf-icon { transition: transform 0.3s ease; font-size: 18px; } .pcf-story-card__more:hover .pcf-icon { transform: translateX(4px); } /* sidebar rail */ .pcf-blog__sidebar { display: grid; gap: var(--pcf-gutter); } .pcf-side-card { background: var(--pcf-color-surface); border-radius: var(--pcf-radius); box-shadow: var(--pcf-shadow-card); padding: 28px; } .pcf-side-card__title { margin: 0 0 16px; } .pcf-side-card__text { font-size: var(--pcf-small-size); line-height: var(--pcf-small-lh); margin-bottom: 20px; } .pcf-side-card--primary { position: relative; overflow: hidden; background: var(--pcf-color-primary); color: var(--pcf-color-text-invert); } .pcf-side-card--primary::after { content: ""; position: absolute; right: -48px; bottom: -48px; width: 190px; height: 190px; border-radius: 50%; background: color-mix(in srgb, var(--pcf-color-text-invert) 6%, transparent); pointer-events: none; } .pcf-side-card--primary .pcf-side-card__title { color: var(--pcf-color-text-invert); } .pcf-side-card--primary .pcf-side-card__text { color: color-mix(in srgb, var(--pcf-color-text-invert) 80%, transparent); } .pcf-side-newsletter { position: relative; z-index: 1; display: grid; gap: 12px; } .pcf-side-newsletter input { background: color-mix(in srgb, var(--pcf-color-text-invert) 10%, transparent); border-color: color-mix(in srgb, var(--pcf-color-text-invert) 25%, transparent); color: var(--pcf-color-text-invert); } .pcf-side-newsletter input::placeholder { color: color-mix(in srgb, var(--pcf-color-text-invert) 60%, transparent); } .pcf-side-cats { display: grid; gap: 4px; } .pcf-side-cats__item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--pcf-radius-sm); color: var(--pcf-color-text-muted); transition: background-color 0.2s ease, color 0.2s ease; } .pcf-side-cats__item:hover { background: var(--pcf-color-surface-alt); color: var(--pcf-color-primary); } .pcf-side-cats__count { background: color-mix(in srgb, var(--pcf-color-primary) 10%, transparent); color: var(--pcf-color-primary); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--pcf-radius-btn); } .pcf-side-card--stat { background: var(--pcf-color-surface-high); box-shadow: none; text-align: center; } .pcf-side-card__icon { font-size: 48px; color: var(--pcf-color-primary); } .pcf-side-card__stat { font-family: var(--pcf-font-heading); font-size: var(--pcf-h2-size); font-weight: 700; color: var(--pcf-color-primary); margin-top: 8px; } .pcf-side-card__stat-label { font-size: var(--pcf-small-size); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pcf-color-text-muted); margin: 8px 0 0; } .pcf-side-card__stat-note { font-size: var(--pcf-small-size); font-style: italic; color: var(--pcf-color-text-muted); margin: 16px 0 0; } @media (max-width: 960px) { .pcf-blog__layout { grid-template-columns: 1fr; } .pcf-blog__grid--three { grid-template-columns: repeat(2, 1fr); } .pcf-featured__content { padding: 28px; } } @media (max-width: 640px) { .pcf-blog__grid, .pcf-blog__grid--three { grid-template-columns: 1fr; } } /* ----------------------------------------------------------- single post */ .pcf-post__hero { margin-bottom: 48px; } .pcf-post__cover { border-radius: var(--pcf-radius-lg); overflow: hidden; box-shadow: var(--pcf-shadow-card); } .pcf-post__cover img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } .pcf-post__panel { position: relative; max-width: 56rem; margin: -72px auto 0; background: var(--pcf-color-surface); border-radius: var(--pcf-radius); box-shadow: var(--pcf-shadow-card); padding: 40px 48px; } .pcf-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; } .pcf-post__meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pcf-small-size); font-weight: 700; color: var(--pcf-color-text-muted); } .pcf-post__meta-item .pcf-icon { font-size: 18px; } .pcf-post__title { margin: 0; color: var(--pcf-color-primary); } .pcf-post__layout { display: grid; grid-template-columns: 2fr 1fr; gap: calc(var(--pcf-gutter) * 2); align-items: start; } .pcf-post__content { font-size: calc(var(--pcf-p-size) + 2px); line-height: 1.7; color: var(--pcf-color-text-muted); } .pcf-post__content > * + * { margin-top: 1.4em; } .pcf-post__content > p:first-of-type::first-letter { float: left; font-size: 3.2em; line-height: 0.85; font-weight: 700; color: var(--pcf-color-primary); padding-right: 12px; } .pcf-post__content h2, .pcf-post__content h3 { color: var(--pcf-color-primary); margin-bottom: 0.4em; } .pcf-post__content img { border-radius: var(--pcf-radius); } .pcf-post__content blockquote { margin: 2em 0; padding: 40px 32px; border-left: 4px solid var(--pcf-color-secondary); background: var(--pcf-color-surface-alt); border-radius: 0 var(--pcf-radius) var(--pcf-radius) 0; } .pcf-post__content blockquote p { margin: 0; font-size: calc(var(--pcf-h3-size) * 0.95); line-height: 1.5; font-style: italic; color: var(--pcf-color-text); } .pcf-post__share { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--pcf-color-border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; } .pcf-post__share-links { display: flex; align-items: center; gap: 12px; } .pcf-post__share-label { font-weight: 700; color: var(--pcf-color-text); font-size: var(--pcf-small-size); } .pcf-post__share-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--pcf-color-surface-alt); color: var(--pcf-color-primary); transition: background-color 0.3s ease, color 0.3s ease; } .pcf-post__share-btn:hover { background: var(--pcf-color-primary); color: var(--pcf-color-text-invert); } .pcf-post__readtime { font-size: var(--pcf-small-size); font-style: italic; color: var(--pcf-color-text-muted); } .pcf-post__sticky { position: sticky; top: calc(var(--pcf-header-height) + 24px); display: grid; gap: var(--pcf-gutter); } .pcf-post__donate { width: 100%; position: relative; z-index: 1; } .pcf-side-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .pcf-side-recent a { font-weight: 700; color: var(--pcf-color-text); } .pcf-side-recent a:hover { color: var(--pcf-color-primary); } .pcf-post__related { margin-top: var(--pcf-section-gap); } .pcf-post__related .pcf-blog__heading { margin-bottom: 32px; } @media (max-width: 960px) { .pcf-post__layout { grid-template-columns: 1fr; } .pcf-post__panel { margin-top: -40px; padding: 28px; } } /* ------------------------------------------------------------------- 404 */ .pcf-404 { padding-block: 32px var(--pcf-section-gap); } .pcf-404__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pcf-gutter) * 2); align-items: center; } .pcf-404__content { display: grid; gap: 24px; justify-items: start; } .pcf-404__pill { display: inline-flex; align-items: center; gap: 8px; background: var(--pcf-color-surface-high); color: var(--pcf-color-primary); padding: 8px 20px; border-radius: var(--pcf-radius-btn); font-size: var(--pcf-small-size); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pcf-404__pill .pcf-icon { font-size: 18px; } .pcf-404__title { margin: 0; color: var(--pcf-color-primary); } .pcf-404__text { margin: 0; max-width: 32rem; color: var(--pcf-color-text-muted); font-size: calc(var(--pcf-p-size) + 2px); line-height: 1.6; } .pcf-404__links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; } .pcf-404__link { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--pcf-color-border); border-radius: var(--pcf-radius); transition: border-color 0.3s ease, background-color 0.3s ease; } .pcf-404__link:hover { border-color: var(--pcf-color-primary); background: var(--pcf-color-surface-alt); } .pcf-404__link-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; transition: background-color 0.3s ease, color 0.3s ease; } .pcf-404__link--primary .pcf-404__link-icon { background: color-mix(in srgb, var(--pcf-color-primary) 10%, transparent); color: var(--pcf-color-primary); } .pcf-404__link--secondary .pcf-404__link-icon { background: color-mix(in srgb, var(--pcf-color-secondary) 12%, transparent); color: var(--pcf-color-secondary); } .pcf-404__link--tertiary .pcf-404__link-icon { background: color-mix(in srgb, var(--pcf-color-tertiary) 10%, transparent); color: var(--pcf-color-tertiary); } .pcf-404__link:hover .pcf-404__link-icon { background: var(--pcf-color-primary); color: var(--pcf-color-text-invert); } .pcf-404__link-title { display: block; font-family: var(--pcf-font-heading); font-size: var(--pcf-h4-size); font-weight: 600; color: var(--pcf-color-primary); } .pcf-404__link--secondary .pcf-404__link-title { color: var(--pcf-color-secondary); } .pcf-404__link--tertiary .pcf-404__link-title { color: var(--pcf-color-tertiary); } .pcf-404__link-text { display: block; font-size: var(--pcf-small-size); color: var(--pcf-color-text-muted); } .pcf-404__actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; } .pcf-404__media { position: relative; } .pcf-404__photo { position: relative; border-radius: var(--pcf-radius-lg); overflow: hidden; box-shadow: var(--pcf-shadow-card); } .pcf-404__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .pcf-404__scrim { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--pcf-color-primary) 40%, transparent), transparent 60% ); } .pcf-404__quote { position: absolute; left: 24px; right: 24px; bottom: 24px; background: color-mix(in srgb, var(--pcf-color-surface) 90%, transparent); backdrop-filter: blur(10px); border-radius: var(--pcf-radius); box-shadow: var(--pcf-shadow-card); padding: 24px; } .pcf-404__quote-text { margin: 0 0 8px; font-family: var(--pcf-font-heading); font-size: var(--pcf-h4-size); font-weight: 600; font-style: italic; color: var(--pcf-color-primary); } .pcf-404__quote-by { margin: 0; font-size: var(--pcf-small-size); font-weight: 700; color: var(--pcf-color-text-muted); } .pcf-404__heart { position: absolute; top: -24px; left: -24px; display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--pcf-color-surface); box-shadow: var(--pcf-shadow-card); } .pcf-404__heart .pcf-icon { font-size: 44px; color: var(--pcf-color-secondary); } @media (max-width: 960px) { .pcf-404__grid { grid-template-columns: 1fr; } .pcf-404__media { order: -1; } .pcf-404__heart { display: none; } } @media (max-width: 640px) { .pcf-404__links { grid-template-columns: 1fr; } }