/* ========================================================================== ReMARCable Foundation: component layer (theme.json handles tokens) ========================================================================== */ :root { --rf-radius: 22px; --rf-radius-sm: 14px; --rf-ease: cubic-bezier(.2, .7, .2, 1); --rf-spring: cubic-bezier(.32, .72, 0, 1); --rf-night: var(--wp--preset--color--brand-night); --rf-brand: var(--wp--preset--color--brand); --rf-deep: var(--wp--preset--color--brand-deep); --rf-header-h: 76px; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rf-header-h) + 16px); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } ::selection { background: var(--rf-brand); color: #fff; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--hope); outline-offset: 3px; border-radius: 6px; } img { height: auto; } h1, h2 { font-stretch: 108%; text-wrap: balance; } p { text-wrap: pretty; } .rf-main > *:first-child, .rf-canvas > .alignfull:first-child { margin-top: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } /* ---------- Header ---------- */ .rf-site-header { position: sticky; top: 0; z-index: 100; } .admin-bar .rf-site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .rf-site-header { top: 0; } } .rf-header { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s; } .is-scrolled .rf-header { border-bottom-color: var(--wp--preset--color--line); box-shadow: 0 10px 30px -18px rgba(13, 29, 57, .35); background: rgba(255, 255, 255, .94); } .rf-brand .wp-block-site-logo img { width: 48px; } .rf-wordmark { display: inline-flex; flex-direction: column; line-height: .92; text-decoration: none; font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--charcoal); } .rf-wordmark__top { font-weight: 800; font-size: 1.28rem; letter-spacing: -.01em; font-stretch: 100%; } .rf-wordmark__top b { color: var(--rf-brand); font-weight: 900; } .rf-wordmark__bot { font-weight: 800; font-size: .98rem; letter-spacing: .145em; color: var(--rf-brand); margin-top: 2px; } .rf-wordmark--light, .rf-wordmark--light .rf-wordmark__top { color: #fff; } .rf-wordmark--light b, .rf-wordmark--light .rf-wordmark__bot { color: #CDCDCD; } .rf-nav a { text-decoration: none; color: var(--wp--preset--color--ink); position: relative; } .rf-nav .wp-block-navigation-item__content:hover { color: var(--rf-brand); } .rf-nav > .wp-block-navigation__container > .wp-block-navigation-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--rf-brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--rf-ease); } .rf-nav > .wp-block-navigation__container > .wp-block-navigation-item > a:hover::after, .rf-nav .current-menu-item > a::after { transform: scaleX(1); } .rf-nav .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--line) !important; border-radius: var(--rf-radius-sm); padding: .5rem !important; box-shadow: var(--wp--preset--shadow--lift); min-width: 240px !important; background: #fff; } .rf-nav .wp-block-navigation__submenu-container a { padding: .6rem .8rem !important; border-radius: 10px; font-weight: 600; } .rf-nav .wp-block-navigation__submenu-container a:hover { background: var(--wp--preset--color--sky); } .rf-btn-donate .wp-block-button__link { box-shadow: 0 8px 20px -8px rgba(58, 110, 219, .7); padding: .75rem 1.5rem; } .rf-btn-donate .wp-block-button__link::before { content: "♥"; margin-right: .45em; font-size: .9em; } .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.35rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; } @media (max-width: 599px) { .rf-wordmark__top { font-size: 1.05rem; } .rf-wordmark__bot { font-size: .8rem; } .rf-brand .wp-block-site-logo img { width: 40px; } .rf-btn-donate .wp-block-button__link { padding: .6rem 1rem; } } /* ---------- Buttons ---------- */ .wp-element-button, .wp-block-button__link { transition: background-color .25s, color .25s, transform .25s var(--rf-ease), box-shadow .25s; } .wp-block-button__link:hover { transform: translateY(-2px); } .wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; } .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: currentColor; } .wp-block-button.is-style-ghost .wp-block-button__link:hover { color: #fff; background: var(--rf-brand); box-shadow: inset 0 0 0 2px var(--rf-brand); } .has-white-color .wp-block-button.is-style-ghost .wp-block-button__link:hover, .rf-dark .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #fff; color: var(--rf-night); box-shadow: inset 0 0 0 2px #fff; } .wp-block-button.is-style-light .wp-block-button__link { background: #fff; color: var(--rf-night); } .wp-block-button.is-style-light .wp-block-button__link:hover { background: var(--wp--preset--color--hope); color: var(--rf-night); } p.rf-arrow a::after, .rf-arrow .wp-block-button__link::after { content: "→"; display: inline-block; margin-left: .5em; transition: transform .25s var(--rf-ease); } p.rf-arrow a:hover::after, .rf-arrow .wp-block-button__link:hover::after { transform: translateX(4px); } .rf-link { font-weight: 700; text-decoration: none !important; } /* ---------- Eyebrow ---------- */ .is-style-eyebrow, .rf-eyebrow { font-family: var(--wp--preset--font-family--body) !important; font-size: .8125rem !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--rf-brand); line-height: 1.3 !important; display: inline-flex; align-items: center; gap: .75rem; font-stretch: 100% !important; } .is-style-eyebrow::before, .rf-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; } .has-text-align-center.is-style-eyebrow { justify-content: center; width: 100%; } .has-white-color .is-style-eyebrow, .rf-dark .is-style-eyebrow { color: #CDCDCD; } .rf-footer__h.is-style-eyebrow { color: #CDCDCD; margin-bottom: 1rem; } .rf-lead { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--muted); line-height: 1.6; } .rf-dark .rf-lead, .has-white-color .rf-lead { color: rgba(255, 255, 255, .82); } .rf-accent { color: var(--rf-brand); } .rf-dark .rf-accent, .has-white-color .rf-accent { color: #CDCDCD; } mark.rf-hl { background: linear-gradient(transparent 62%, rgba(58, 110, 219, .55) 62%); color: inherit; padding: 0 .05em; } /* ---------- Hero (home) ---------- */ .rf-hero.wp-block-cover { min-height: min(92vh, 860px) !important; align-items: flex-end; padding-bottom: clamp(3rem, 8vw, 7rem); padding-top: clamp(6rem, 14vw, 10rem); } .rf-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(13, 29, 57, .88) 0%, rgba(13, 29, 57, .55) 50%, rgba(13, 29, 57, .15) 100%), linear-gradient(180deg, rgba(13, 29, 57, 0) 40%, rgba(13, 29, 57, .85) 100%) !important; opacity: 1 !important; } .rf-hero .wp-block-cover__image-background { transform: scale(1.06); animation: rf-kenburns 18s var(--rf-ease) forwards; } @keyframes rf-kenburns { to { transform: scale(1); } } .rf-hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 4.6rem); font-stretch: 106%; letter-spacing: -.03em; max-width: 19ch; } .rf-hero h1 em { font-style: normal; color: #CDCDCD; } .rf-hero .rf-lead { max-width: 58ch; color: rgba(255, 255, 255, .88); } .rf-hero__badge { display: inline-flex !important; align-items: center; gap: .6rem; padding: .45rem .95rem .45rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); font-size: .875rem !important; font-weight: 600; color: #fff; } .rf-hero__badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--hope); box-shadow: 0 0 0 4px rgba(58, 110, 219, .3); } .rf-scroll-cue { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: 2rem; writing-mode: vertical-rl; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } /* ---------- Inner page hero ---------- */ .rf-page-hero { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--30); } .rf-pagehead.wp-block-cover { min-height: clamp(360px, 52vh, 560px) !important; align-items: flex-end; padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); } .rf-pagehead .wp-block-cover__background { background: linear-gradient(100deg, rgba(13, 29, 57, .96) 0%, rgba(13, 29, 57, .82) 45%, rgba(29, 71, 168, .45) 100%) !important; opacity: 1 !important; } .rf-pagehead h1 { color: #fff; font-stretch: 112%; letter-spacing: -.03em; } .rf-pagehead .rf-lead { color: rgba(255, 255, 255, .85); max-width: 60ch; } .rf-pagehead::after, .rf-band::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 420px; height: 300px; pointer-events: none; opacity: .18; background: radial-gradient(closest-side, #CDCDCD, transparent); } .rf-crumbs { font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .7); letter-spacing: .02em; } .rf-crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; } .rf-crumbs a:hover { color: #fff; text-decoration: underline; } /* ---------- Sections ---------- */ .rf-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); position: relative; } .rf-section--tight { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); } .rf-dark { background: var(--rf-night); color: #fff; } .rf-dark h1, .rf-dark h2, .rf-dark h3, .rf-dark h4 { color: #fff; } .rf-dark a:not(.wp-element-button) { color: #CDCDCD; } .rf-mist { background: var(--wp--preset--color--mist); } .rf-grid-bg { background-image: radial-gradient(rgba(58, 110, 219, .12) 1px, transparent 1px); background-size: 22px 22px; } /* ---------- Stats ---------- */ .rf-stats { position: relative; z-index: 3; margin-top: calc(var(--wp--preset--spacing--60) * -1) !important; } .rf-stats > .wp-block-group { background: #fff; border-radius: var(--rf-radius); box-shadow: var(--wp--preset--shadow--lift); } .rf-stat { padding: clamp(1.25rem, 3vw, 2.25rem); border-left: 1px solid var(--wp--preset--color--line); } .rf-stats .wp-block-column:first-child .rf-stat { border-left: 0; } @media (max-width: 781px) { .rf-stat { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); } .rf-stats .wp-block-column:first-child .rf-stat { border-top: 0; } } .rf-stat__num { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(1.85rem, 2.9vw, 2.6rem) !important; line-height: 1 !important; letter-spacing: -.03em; color: var(--rf-night); font-stretch: 100%; white-space: nowrap; margin: 0 0 .5rem !important; font-variant-numeric: tabular-nums; } .rf-stat__num .rf-accent { color: var(--rf-brand); } .rf-stat__label { font-size: .9375rem; color: var(--wp--preset--color--muted); margin: 0 !important; line-height: 1.45 !important; } /* ---------- Cards ---------- */ .wp-block-group.is-style-card, .rf-card { background: #fff; border-radius: var(--rf-radius); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--wp--preset--shadow--soft); border: 1px solid var(--wp--preset--color--line); transition: transform .4s var(--rf-ease), box-shadow .4s var(--rf-ease); height: 100%; } .wp-block-group.is-style-card:hover, .rf-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); } .wp-block-group.is-style-glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--rf-radius); padding: clamp(1.5rem, 3vw, 2.25rem); backdrop-filter: blur(10px); height: 100%; } .rf-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--wp--preset--color--sky); color: var(--rf-brand); margin-bottom: 1.25rem; } .rf-icon svg { width: 28px; height: 28px; } .rf-dark .rf-icon { background: rgba(143, 177, 255, .14); color: #CDCDCD; } .rf-card h3, .is-style-card h3, .is-style-glass h3 { font-size: var(--wp--preset--font-size--xl); margin-bottom: .6rem; } .wp-block-columns.rf-eq > .wp-block-column { display: flex; flex-direction: column; } .wp-block-columns.rf-eq > .wp-block-column > * { flex: 1; } /* Media cards (impact) */ .rf-mcard { background: #fff; border-radius: var(--rf-radius); overflow: hidden; box-shadow: var(--wp--preset--shadow--soft); border: 1px solid var(--wp--preset--color--line); height: 100%; display: flex; flex-direction: column; transition: transform .4s var(--rf-ease), box-shadow .4s var(--rf-ease); } .rf-mcard:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); } .rf-mcard .wp-block-image { margin: 0 !important; overflow: hidden; aspect-ratio: 4 / 3; } .rf-mcard .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform .8s var(--rf-ease); } .rf-mcard:hover .wp-block-image img { transform: scale(1.05); } .rf-mcard__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; } .rf-mcard__body > * { margin: 0 !important; } .rf-mcard__body h3 { font-size: 1.35rem; } .rf-mcard__body p { color: var(--wp--preset--color--muted); font-size: .96875rem; } .rf-tag { display: inline-block; font-size: .72rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-deep); background: var(--wp--preset--color--sky); padding: .35rem .7rem; border-radius: 999px; align-self: flex-start; } /* ---------- Split media ---------- */ .rf-frame { position: relative; } .rf-frame .wp-block-image { margin: 0; position: relative; z-index: 2; } .rf-frame .wp-block-image img { border-radius: var(--rf-radius); box-shadow: var(--wp--preset--shadow--lift); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .rf-frame::before { content: ""; position: absolute; inset: 8% -6% -6% 10%; background: var(--wp--preset--color--sky); border-radius: calc(var(--rf-radius) + 8px); z-index: 1; } .rf-frame--wide .wp-block-image img { aspect-ratio: 16 / 11; } .rf-frame figcaption { font-size: .75rem !important; color: var(--wp--preset--color--muted); margin-top: .6rem !important; text-align: right; } .rf-float-quote { position: absolute; z-index: 3; left: -8%; bottom: 8%; max-width: 280px; background: var(--rf-night); color: #fff; padding: 1.25rem 1.4rem; border-radius: 18px; box-shadow: var(--wp--preset--shadow--lift); font-size: .95rem; line-height: 1.45; font-weight: 600; } @media (max-width: 781px) { .rf-float-quote { position: relative; left: 0; bottom: 0; margin-top: -2rem; margin-left: 1rem; } } /* ---------- Quote ---------- */ .rf-bigquote { position: relative; } .rf-bigquote blockquote, .rf-bigquote .wp-block-quote { border: 0 !important; padding: 0 !important; margin: 0; } .rf-bigquote .wp-block-quote p { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.3; font-weight: 600; letter-spacing: -.015em; font-stretch: 100%; } .rf-bigquote .wp-block-quote cite { display: block; margin-top: 1.5rem; font-style: normal; font-weight: 700; font-size: .95rem; color: var(--wp--preset--color--muted); } .rf-dark .rf-bigquote .wp-block-quote cite { color: #CDCDCD; } .rf-bigquote::before { content: "\201C"; font-family: Georgia, serif; position: absolute; top: -.35em; left: -.08em; font-size: 9rem; line-height: 1; color: var(--rf-brand); opacity: .25; } /* ---------- CTA band ---------- */ .rf-band { position: relative; overflow: hidden; border-radius: calc(var(--rf-radius) + 10px); background: linear-gradient(120deg, var(--rf-night) 0%, var(--rf-deep) 60%, var(--rf-brand) 100%); color: #fff; padding: clamp(2.25rem, 6vw, 4.5rem) !important; } .rf-band h2 { color: #fff; } .rf-band::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .06); } .rf-band > * { position: relative; z-index: 2; } /* ---------- Partners ---------- */ .rf-logos { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(1rem, 3vw, 2.5rem) !important; align-items: center; } .rf-logos .wp-block-image { margin: 0; display: grid; place-items: center; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 1.25rem; aspect-ratio: 3 / 2; } .rf-logos .wp-block-image img { max-height: 90px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; border-radius: 0 !important; } .rf-logos .wp-block-image:hover img { filter: none; opacity: 1; } /* ---------- Team ---------- */ .rf-team .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: var(--rf-radius); } .rf-team h3 { font-size: 1.4rem; margin: 1rem 0 .15rem; } .rf-role { font-size: .75rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-brand); margin: 0 0 .75rem !important; } .rf-team p:not(.rf-role) { font-size: .95rem; color: var(--wp--preset--color--muted); } /* ---------- Runner cards ---------- */ .rf-runners { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.5rem !important; } .rf-runner { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--rf-radius); overflow: hidden; box-shadow: var(--wp--preset--shadow--soft); display: flex; flex-direction: column; } .rf-runner__top { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.25rem 0; } .rf-runner__top img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 4px var(--wp--preset--color--sky); } .rf-runner__name { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.25rem; line-height: 1.15; color: var(--rf-night); margin: 0; } .rf-runner__meta { font-size: .8rem; font-weight: 700; color: var(--rf-brand); letter-spacing: .06em; text-transform: uppercase; margin: .2rem 0 0; } .rf-runner details { padding: 1rem 1.25rem 1.25rem; font-size: .95rem; color: var(--wp--preset--color--muted); } .rf-runner summary { cursor: pointer; list-style: none; } .rf-runner summary::-webkit-details-marker { display: none; } .rf-runner summary .rf-runner__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .rf-runner details[open] summary .rf-runner__excerpt { display: none; } .rf-runner summary::after { content: "Read story +"; display: inline-block; margin-top: .6rem; font-weight: 700; color: var(--rf-deep); font-size: .875rem; } .rf-runner details[open] summary::after { content: "Show less −"; } .rf-runner details p { margin: .75rem 0 0; } /* ---------- Events ---------- */ .rf-events { display: grid; gap: 1.25rem; } .rf-event { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.5rem; align-items: center; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--rf-radius); padding: 1.25rem 1.5rem; box-shadow: var(--wp--preset--shadow--soft); transition: transform .35s var(--rf-ease), box-shadow .35s var(--rf-ease); } .rf-event:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lift); } .rf-event__date { text-align: center; background: var(--wp--preset--color--sky); border-radius: 16px; padding: .8rem .4rem; color: var(--rf-deep); line-height: 1; } .rf-event__mon { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .rf-event__day { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 2.1rem; margin-top: .25rem; color: var(--rf-night); } .rf-event__yr { display: block; font-size: .75rem; font-weight: 700; margin-top: .3rem; opacity: .7; } .rf-event__title { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .3rem; color: var(--rf-night); } .rf-event__where { font-size: .875rem; font-weight: 700; color: var(--rf-brand); margin: 0 0 .5rem; } .rf-event__desc { font-size: .95rem; color: var(--wp--preset--color--muted); margin: 0; } .rf-event__cta { white-space: nowrap; } .rf-event__cta a { display: inline-block; font-weight: 700; font-size: .875rem; padding: .7rem 1.2rem; border-radius: 999px; background: var(--rf-night); color: #fff !important; text-decoration: none; } .rf-event__cta a:hover { background: var(--rf-brand); } .rf-event.is-past { opacity: .72; } .rf-event.is-past .rf-event__date { background: var(--wp--preset--color--mist); } @media (max-width: 700px) { .rf-event { grid-template-columns: 72px 1fr; } .rf-event__cta { grid-column: 1 / -1; } .rf-event__day { font-size: 1.6rem; } } .rf-empty { padding: 2rem; border: 2px dashed var(--wp--preset--color--line); border-radius: var(--rf-radius); text-align: center; color: var(--wp--preset--color--muted); } /* ---------- Callout / deadline ---------- */ .rf-callout { border-radius: var(--rf-radius); padding: clamp(1.5rem, 4vw, 2.75rem) !important; background: #fff; border: 1px solid var(--wp--preset--color--line); box-shadow: var(--wp--preset--shadow--lift); position: relative; overflow: hidden; } .rf-callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--wp--preset--color--hope), var(--rf-brand)); } .rf-pill { display: inline-flex !important; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; font-size: .78rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #FFF3DE; color: #8A5300; } .rf-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3A6EDB; animation: rf-pulse 1.8s infinite; } @keyframes rf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } } .rf-bigmoney { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(3rem, 8vw, 6.5rem) !important; letter-spacing: -.04em; line-height: .95 !important; color: var(--rf-brand); font-stretch: 112%; font-variant-numeric: tabular-nums; } /* ---------- Gallery ---------- */ .wp-block-gallery.rf-gallery { gap: 12px !important; } .wp-block-gallery.rf-gallery .wp-block-image img { border-radius: 16px !important; transition: transform .6s var(--rf-ease), filter .3s; } .wp-block-gallery.rf-gallery .wp-block-image { overflow: hidden; border-radius: 16px; } .wp-block-gallery.rf-gallery .wp-block-image:hover img { transform: scale(1.04); } /* ---------- Forms ---------- */ .rf-form { display: grid; gap: 1.1rem; } .rf-form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .rf-form label, .rf-form legend { display: block; font-weight: 700; font-size: .875rem; margin-bottom: .4rem; color: var(--rf-night); } .rf-form .req { color: #C2410C; } .rf-form input[type=text], .rf-form input[type=email], .rf-form input[type=tel], .rf-form input[type=date], .rf-form select, .rf-form textarea { width: 100%; font: inherit; font-size: 1rem; padding: .85rem 1rem; border-radius: 12px; border: 1.5px solid #CDD5E3; background: #fff; color: var(--wp--preset--color--ink); transition: border-color .2s, box-shadow .2s; } .rf-form input:focus, .rf-form select:focus, .rf-form textarea:focus { border-color: var(--rf-brand); box-shadow: 0 0 0 4px rgba(58, 110, 219, .15); outline: none; } .rf-form textarea { min-height: 150px; resize: vertical; } .rf-form fieldset { border: 0; padding: 0; margin: 0; } .rf-form .rf-choices { display: flex; flex-wrap: wrap; gap: .5rem; } .rf-form .rf-choices label { font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1.5px solid #CDD5E3; border-radius: 999px; cursor: pointer; margin: 0; font-size: .9rem; } .rf-form .rf-choices input { accent-color: var(--rf-brand); } .rf-form .rf-choices label:has(input:checked) { border-color: var(--rf-brand); background: var(--wp--preset--color--sky); } .rf-form .rf-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; font-size: .92rem; } .rf-form .rf-check input { margin-top: .3rem; accent-color: var(--rf-brand); width: 18px; height: 18px; } .rf-form button { justify-self: start; font: inherit; font-weight: 700; border: 0; cursor: pointer; background: var(--rf-brand); color: #fff; padding: 1rem 2rem; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(58, 110, 219, .8); transition: background .2s, transform .2s; } .rf-form button:hover { background: var(--rf-deep); transform: translateY(-2px); } .rf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .rf-notice { padding: 1rem 1.25rem; border-radius: 14px; font-weight: 600; margin-bottom: 1rem; } .rf-notice--ok { background: #E7F7EE; color: #0F5132; border: 1px solid #B7E4C7; } .rf-notice--err { background: #FDECEC; color: #842029; border: 1px solid #F5C2C7; } .rf-formcard { background: #fff; border-radius: var(--rf-radius); padding: clamp(1.5rem, 4vw, 3rem) !important; box-shadow: var(--wp--preset--shadow--lift); border: 1px solid var(--wp--preset--color--line); } .rf-formcard h2, .rf-formcard h3 { color: var(--rf-night) !important; } /* ---------- Embed (Zeffy) ---------- */ .rf-embed { border-radius: var(--rf-radius); overflow: hidden; background: #fff; box-shadow: var(--wp--preset--shadow--lift); border: 1px solid var(--wp--preset--color--line); } .rf-embed iframe { display: block; width: 100%; min-height: 1120px; border: 0; } /* ---------- Checklist ---------- */ .rf-checks { list-style: none; padding: 0 !important; display: grid; gap: .8rem; } .rf-checks li { position: relative; padding-left: 2.1rem; } .rf-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--rf-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat; } /* ---------- Footer ---------- */ .rf-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; } .rf-footer a:hover { color: #fff; text-decoration: underline; } .rf-footer__links { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .95rem; } .rf-footer__mission { color: rgba(255, 255, 255, .72); max-width: 38ch; margin-top: 1.25rem !important; } .rf-footer__rule { border-color: rgba(255, 255, 255, .14) !important; opacity: 1; } .rf-footer__legal, .rf-footer__legal p { color: rgba(255, 255, 255, .6); font-size: .8125rem; } .rf-social { display: flex; gap: .6rem; margin-top: 1.25rem; padding: 0; list-style: none; } .rf-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: background .25s, transform .25s; } .rf-social a:hover { background: var(--rf-brand); transform: translateY(-2px); } .rf-social svg { width: 18px; height: 18px; fill: #fff; } /* ---------- Reveal ---------- */ @media (prefers-reduced-motion: no-preference) { .js .rf-reveal { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 1s var(--rf-ease), transform 1.1s var(--rf-ease), filter 1s var(--rf-ease); } .js .rf-reveal.is-in { opacity: 1; transform: none; filter: none; } .js .rf-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--rf-ease), transform .8s var(--rf-ease); } .js .rf-stagger.is-in > * { opacity: 1; transform: none; } .js .rf-stagger.is-in > *:nth-child(2) { transition-delay: .08s; } .js .rf-stagger.is-in > *:nth-child(3) { transition-delay: .16s; } .js .rf-stagger.is-in > *:nth-child(4) { transition-delay: .24s; } .js .rf-stagger.is-in > *:nth-child(5) { transition-delay: .32s; } .js .rf-stagger.is-in > *:nth-child(6) { transition-delay: .40s; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- Utilities ---------- */ .rf-mt-0 { margin-top: 0 !important; } .rf-maxw { max-width: 62ch; } .rf-center { text-align: center; margin-left: auto !important; margin-right: auto !important; } .rf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rf-brand .wp-block-site-logo img { filter: brightness(.9) saturate(1.05); } /* Cover containers: align hero content to the site grid */ .rf-hero.wp-block-cover, .rf-pagehead.wp-block-cover { padding-left: 0 !important; padding-right: 0 !important; } .rf-hero.wp-block-cover .wp-block-cover__inner-container, .rf-pagehead.wp-block-cover .wp-block-cover__inner-container { width: 100% !important; max-width: calc(1240px + 2 * clamp(1rem, 4vw, 2.5rem)); margin-inline: auto !important; padding-inline: clamp(1rem, 4vw, 2.5rem); box-sizing: border-box; } .rf-hero .wp-block-cover__inner-container > .alignwide, .rf-pagehead .wp-block-cover__inner-container > .alignwide { max-width: none; margin-left: 0 !important; } .rf-btn-donate .wp-block-button__link { white-space: nowrap; } /* Image framing refinements */ .rf-frame .wp-block-image img { object-position: 50% 22%; } .rf-mcard .wp-block-image { width: 100%; } .rf-mcard .wp-block-image img { object-position: 50% 30%; } .rf-hero .wp-block-cover__image-background { object-position: 72% 35%; } .rf-team .wp-block-image img { object-position: 50% 20%; } /* Band + centered eyebrow + partner grid polish */ .rf-band h1, .rf-band h2, .rf-band h3, .rf-band h4 { color: #fff; } .rf-band .rf-lead, .rf-band p { color: rgba(255, 255, 255, .86); } .rf-band .is-style-eyebrow { color: #CDCDCD; } .has-text-align-center.is-style-eyebrow { display: flex; } .rf-logos { max-width: 960px; margin-inline: auto !important; } .rf-logos .wp-block-image { aspect-ratio: 16 / 9; } .rf-footer__rule.wp-block-separator { width: 100%; max-width: var(--wp--style--global--wide-size) !important; border-top-width: 1px; } .rf-pagehead .wp-block-cover__image-background { object-position: 50% 30%; } .rf-pagehead h1 { max-width: 20ch; } /* Mobile hardening */ .rf-hero.wp-block-cover, .rf-pagehead.wp-block-cover { overflow: hidden; } .rf-form input, .rf-form select, .rf-form textarea { box-sizing: border-box; max-width: 100%; } @media (max-width: 599px) { .rf-formcard { padding: 1.25rem !important; } .rf-float-quote { max-width: none; margin-right: 1rem; } .rf-stats { margin-top: -2rem !important; } } /* ========================================================================== v1.1: Premium layer (island nav, kinetic type, bezels, motion, newsroom) ========================================================================== */ /* ---------- Floating island navigation ---------- */ .rf-site-header { position: sticky; top: 0; height: 0; z-index: 100; overflow: visible; display: flow-root; } /* flow-root stops the island margin collapsing into the page (white strip) */ .rf-site-header > .rf-header, .rf-header { margin: 14px auto 0 !important; width: calc(100% - 2 * clamp(.75rem, 2.5vw, 1.5rem)); max-width: calc(1240px + 3rem); border-radius: 999px; border: 1px solid rgba(13, 29, 57, .07) !important; background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 50px -22px rgba(13, 29, 57, .35); padding: .55rem clamp(.9rem, 2vw, 1.4rem) .55rem clamp(.9rem, 2vw, 1.6rem) !important; transition: transform .6s var(--rf-spring), box-shadow .6s var(--rf-spring), background .4s; view-transition-name: rf-header; } .rf-header > .alignwide { max-width: none !important; } .is-scrolled .rf-header { background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 22px 60px -24px rgba(13, 29, 57, .45); } .is-hidden-nav .rf-header { transform: translateY(calc(-100% - 20px)); } .admin-bar .rf-site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .rf-site-header { top: 46px; } .rf-header { border-radius: 22px; } } /* Pages that don't open with a full-bleed cover need room for the island */ .rf-news, .rf-article, .rf-404, main.rf-main:not(.rf-canvas) > .rf-page-hero:first-child { padding-top: clamp(7rem, 12vw, 9rem) !important; } .rf-hero.wp-block-cover { padding-top: clamp(8rem, 16vw, 11rem) !important; } .rf-pagehead.wp-block-cover { padding-top: clamp(8rem, 14vw, 10rem) !important; } /* Mobile menu: full-screen glass with staggered reveal */ .wp-block-navigation__responsive-container.is-menu-open { background: rgba(13, 29, 57, .94) !important; color: #fff !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 5.5rem 1.75rem 2rem !important; animation: rf-menu-in .5s var(--rf-spring); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff !important; font-size: clamp(1.6rem, 7vw, 2.2rem); font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -.02em; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: .4rem 0 0 1rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.1rem; font-family: var(--wp--preset--font-family--body); font-weight: 600; opacity: .8; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li { animation: rf-item-in .7s var(--rf-spring) both; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(2) { animation-delay: .05s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(3) { animation-delay: .1s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) { animation-delay: .15s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(5) { animation-delay: .2s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(6) { animation-delay: .25s; } .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12) !important; display: grid; place-items: center; top: 1.25rem !important; right: 1.25rem !important; } .wp-block-navigation__responsive-container-close svg { fill: #fff; } .wp-block-navigation__responsive-container-open { width: 42px; height: 42px; border-radius: 50%; background: var(--wp--preset--color--sky); display: grid; place-items: center; } @keyframes rf-menu-in { from { opacity: 0; } } @keyframes rf-item-in { from { opacity: 0; transform: translateY(2.5rem); } } /* ---------- Button-in-button CTAs ---------- */ .rf-arrow .wp-block-button__link { display: inline-flex; align-items: center; gap: .85rem; padding-right: .45rem !important; } .rf-arrow .wp-block-button__link::after { content: "" !important; margin: 0 !important; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: rgba(255, 255, 255, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 15px no-repeat; transition: transform .6s var(--rf-spring), background-color .3s; } .rf-arrow.is-style-light .wp-block-button__link::after { background-color: rgba(13, 29, 57, .08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1B3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); } .rf-arrow .wp-block-button__link:hover::after { transform: translate(3px, -2px) scale(1.08); } .wp-block-button__link:active { transform: scale(.97) !important; } .wp-block-button__link { will-change: transform; } /* ---------- Double-bezel surfaces ---------- */ .rf-mcard, .wp-block-group.is-style-card, .rf-formcard, .rf-event, .rf-callout, .rf-runner, .rf-embed { border-color: transparent !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, .75), 0 0 0 7px rgba(13, 29, 57, .07), 0 30px 60px -30px rgba(13, 29, 57, .3) !important; } .rf-mcard:hover, .wp-block-group.is-style-card:hover, .rf-event:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 0 0 7px rgba(58, 110, 219, .18), 0 40px 70px -30px rgba(13, 29, 57, .38) !important; } .rf-frame .wp-block-image img { box-shadow: 0 0 0 8px rgba(255, 255, 255, .8), 0 0 0 9px rgba(13, 29, 57, .06), 0 40px 80px -36px rgba(13, 29, 57, .45) !important; } .wp-block-group.is-style-glass { backdrop-filter: none !important; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); transition: transform .6s var(--rf-spring), background .4s; } .wp-block-group.is-style-glass:hover { transform: translateY(-6px); background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)) !important; } .rf-icon svg { stroke-width: 1.5; } .rf-dark { background: radial-gradient(1200px 600px at 85% -10%, rgba(58, 110, 219, .35), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(58, 110, 219, .18), transparent 60%), var(--rf-night); } /* ---------- Kinetic headline (JS splits words) ---------- */ .rf-split .rf-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .rf-split .rf-w > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--rf-spring); transition-delay: calc(var(--i) * 45ms + 80ms); } .rf-split.is-split-in .rf-w > span { transform: none; } /* ---------- Scroll-linked depth (progressive; no JS) ---------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .rf-hero .wp-block-cover__image-background, .rf-pagehead .wp-block-cover__image-background { animation: rf-parallax linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } .rf-hero .wp-block-cover__inner-container { animation: rf-heroout linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; } .rf-frame .wp-block-image { animation: rf-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } } @keyframes rf-parallax { from { transform: translateY(0) scale(1.04); } to { transform: translateY(16%) scale(1.12); } } @keyframes rf-heroout { to { opacity: 0; transform: translateY(-10%); } } @keyframes rf-drift { from { transform: translateY(24px); } to { transform: translateY(-24px); } } /* ---------- Page transitions ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); } /* ---------- Kinetic marquee ---------- */ .rf-marquee { overflow: hidden; padding: 1.4rem 0; border-block: 1px solid var(--wp--preset--color--line); background: #fff; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .rf-marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: rf-marquee 48s linear infinite; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.8rem); letter-spacing: -.02em; color: var(--rf-night); white-space: nowrap; align-items: center; } .rf-marquee__track i { font-style: normal; color: var(--rf-brand); font-size: .6em; } .rf-marquee__track .o { -webkit-text-stroke: 1.5px var(--rf-night); color: transparent; } .rf-marquee:hover .rf-marquee__track { animation-play-state: paused; } @keyframes rf-marquee { to { transform: translateX(-50%); } } /* ---------- Reading progress ---------- */ .rf-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 110; pointer-events: none; } .rf-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--wp--preset--color--hope), var(--rf-brand)); transform-origin: 0 50%; transform: scaleX(0); } .admin-bar .rf-progress { top: 32px; } /* ========================================================================== Newsroom ========================================================================== */ .rf-masthead { border-bottom: 3px solid var(--rf-night); padding-bottom: 1.4rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .rf-masthead__top { border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: .8rem; margin-bottom: 1.4rem !important; } .rf-masthead__brand, .rf-masthead__brand a { font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-style: italic; font-size: 1.15rem; color: var(--rf-night); text-decoration: none; margin: 0; } .rf-masthead__date { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; } .rf-masthead__title { font-family: var(--wp--preset--font-family--serif) !important; font-weight: 800 !important; font-size: clamp(2.8rem, 7vw, 5.6rem) !important; letter-spacing: -.035em !important; line-height: .95 !important; font-stretch: 100% !important; margin: 0 0 .75rem !important; } .rf-masthead__dek { font-size: 1.1rem; color: var(--wp--preset--color--muted); max-width: 60ch; margin: 0 0 1.4rem; } .rf-newsnav ul { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; } .rf-newsnav ul::-webkit-scrollbar { display: none; } .rf-newsnav a { display: inline-block; white-space: nowrap; padding: .55rem 1rem; border-radius: 999px; font-size: .875rem; font-weight: 700; text-decoration: none; color: var(--rf-night); background: var(--wp--preset--color--mist); box-shadow: inset 0 0 0 1px var(--wp--preset--color--line); transition: background .3s, color .3s, transform .4s var(--rf-spring); } .rf-newsnav a:hover { transform: translateY(-2px); background: var(--wp--preset--color--sky); } .rf-newsnav a[aria-current] { background: var(--rf-night); color: #fff; box-shadow: none; } .rf-kicker, .rf-kicker a { font-size: .74rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-brand) !important; text-decoration: none; } .rf-kicker { margin: 0 0 .5rem !important; } .rf-kicker .wp-block-post-terms__separator { display: none; } .rf-meta, .rf-meta a { font-size: .8125rem !important; color: var(--wp--preset--color--muted); font-weight: 500; } .rf-dek, .rf-dek p { font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem; line-height: 1.5; color: #3B4252; } .rf-dek--sm, .rf-dek--sm p { font-size: 1.02rem; } .wp-block-post-title a { text-decoration: none; color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--rf-spring); } .wp-block-post-title a:hover, .rf-story__title a:hover { background-size: 100% 2px; } /* Lead story */ .rf-frontpage { margin-bottom: var(--wp--preset--spacing--60) !important; } .rf-lead .wp-block-post-featured-image { margin: 0 0 1.4rem; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(13, 29, 57, .07), 0 40px 80px -40px rgba(13, 29, 57, .5); } .rf-lead .wp-block-post-featured-image img { transition: transform 1.2s var(--rf-spring); } .rf-lead:hover .wp-block-post-featured-image img { transform: scale(1.03); } .rf-lead__title { font-family: var(--wp--preset--font-family--serif) !important; font-weight: 700 !important; font-size: clamp(2rem, 3.8vw, 3.3rem) !important; line-height: 1.05 !important; letter-spacing: -.025em !important; font-stretch: 100% !important; margin: 0 0 .9rem !important; } .rf-rail-title { font-family: var(--wp--preset--font-family--body) !important; font-size: .82rem !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--rf-night); border-top: 3px solid var(--rf-night); padding-top: .8rem; margin: 0 0 1.25rem !important; font-stretch: 100% !important; } .rf-rail-title--light { color: #fff; border-color: #fff; } /* Latest (numbered) */ .rf-latest .wp-block-post-template { counter-reset: rf-n; list-style: none; padding: 0; margin: 0; } .rf-latest__item { position: relative; padding: 0 0 1.2rem 3rem; margin-bottom: 1.2rem !important; border-bottom: 1px solid var(--wp--preset--color--line); } .rf-latest li:last-child .rf-latest__item { border-bottom: 0; } .rf-latest__item::before { counter-increment: rf-n; content: counter(rf-n); position: absolute; left: 0; top: -.2rem; font-family: var(--wp--preset--font-family--serif); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--wp--preset--color--sky); -webkit-text-stroke: 1px var(--rf-brand); } .rf-latest__title { font-family: var(--wp--preset--font-family--serif) !important; font-size: 1.22rem !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; margin: 0 0 .35rem !important; font-stretch: 100% !important; } /* Story cards */ .rf-story { display: flex; flex-direction: column; gap: .45rem; } .rf-story > * { margin: 0 !important; } .rf-story .wp-block-post-featured-image, .rf-story__img { display: block; border-radius: 18px; overflow: hidden; margin-bottom: .75rem !important; aspect-ratio: 3 / 2; } .rf-story__img img, .rf-story .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--rf-spring); } .rf-story:hover img { transform: scale(1.05); } .rf-story__title, .rf-story__title a { font-family: var(--wp--preset--font-family--serif) !important; font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; color: var(--rf-night); text-decoration: none; font-stretch: 100% !important; } .rf-dark .rf-story__title a, .rf-dark .rf-story__title { color: #fff !important; } .rf-dark .rf-meta { color: rgba(255, 255, 255, .6); } .rf-dark .rf-kicker a { color: #CDCDCD !important; } .rf-grid .wp-block-post-template { gap: clamp(1.5rem, 3vw, 2.5rem) !important; } .rf-more { margin-top: var(--wp--preset--spacing--60) !important; } .wp-block-query-pagination { margin-top: 2.5rem; gap: .5rem; font-weight: 700; } .wp-block-query-pagination a, .wp-block-query-pagination .current { padding: .5rem .9rem; border-radius: 999px; text-decoration: none; } .wp-block-query-pagination .current { background: var(--rf-night); color: #fff; } /* Dark rail */ .rf-rail { padding: var(--wp--preset--spacing--60) clamp(1rem, 4vw, 2.5rem); margin-block: var(--wp--preset--spacing--40) !important; } .rf-rail__inner { max-width: 1240px; margin: 0 auto; } .rf-rail__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .rf-rail__head .rf-rail-title { flex: 1; } .rf-rail__all { color: #CDCDCD !important; font-size: .9rem; margin-bottom: 1.25rem; } .rf-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } /* ---------- Article ---------- */ .rf-article__head { max-width: 860px; margin-inline: auto !important; text-align: left; } .rf-crumbs--light, .rf-crumbs--light a { color: var(--wp--preset--color--muted) !important; } .rf-crumbs--light { margin-bottom: 1.25rem; } .rf-article__title { font-family: var(--wp--preset--font-family--serif) !important; font-weight: 800 !important; font-size: clamp(2.3rem, 5.4vw, 4.2rem) !important; line-height: 1.02 !important; letter-spacing: -.03em !important; font-stretch: 100% !important; margin: .2rem 0 1rem !important; text-wrap: balance; } .rf-article__dek, .rf-article__dek p { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; color: #3B4252; font-weight: 400; margin: 0 0 1.75rem; } .rf-article__meta { border-block: 1px solid var(--wp--preset--color--line); padding-block: 1rem; margin-bottom: 2.25rem !important; align-items: center; } .rf-byline--full { display: flex; gap: .8rem; align-items: center; } .rf-byline__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; background: linear-gradient(135deg, var(--rf-brand), var(--rf-night)); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--wp--preset--color--line); } .rf-byline__name { margin: 0 !important; font-weight: 700; font-size: .95rem; color: var(--rf-night); } .rf-byline__meta { margin: 0 !important; font-size: .82rem; color: var(--wp--preset--color--muted); } .rf-article__hero { border-radius: 24px; overflow: hidden; margin-bottom: clamp(2rem, 5vw, 3.5rem) !important; box-shadow: 0 0 0 8px #fff, 0 0 0 9px rgba(13, 29, 57, .06), 0 50px 90px -45px rgba(13, 29, 57, .5); } .rf-prose { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.14rem, 1.35vw, 1.26rem); line-height: 1.75; color: #1d2230; } .rf-prose > * + * { margin-block-start: 1.35em; } .rf-prose p { font-weight: 400; } .rf-prose .rf-lede { font-size: 1.12em; line-height: 1.65; color: var(--rf-night); } .rf-prose .rf-lede strong:first-child { font-family: var(--wp--preset--font-family--body); font-size: .72em; letter-spacing: .12em; color: var(--rf-night); } .rf-prose h2 { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.6rem, 2.6vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; margin-top: 2em; font-stretch: 100%; } .rf-prose a { color: var(--rf-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; } .rf-prose .wp-block-pullquote { border: 0; padding: 1.5rem 0 1.5rem 1.75rem; margin-block: 2.5rem; text-align: left; border-left: 4px solid var(--rf-brand); } .rf-prose .wp-block-pullquote blockquote { margin: 0; } .rf-prose .wp-block-pullquote p { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.3; font-weight: 600; font-style: italic; letter-spacing: -.01em; color: var(--rf-night); } .rf-prose .wp-block-pullquote cite { display: block; margin-top: 1rem; font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-brand); } .rf-prose .rf-endnote { font-family: var(--wp--preset--font-family--body); font-size: 1rem; padding: 1.1rem 1.35rem; background: var(--wp--preset--color--mist); border-radius: 14px; border-left: 4px solid var(--wp--preset--color--hope); } .rf-prose .rf-checks { font-family: var(--wp--preset--font-family--body); font-size: 1.05rem; } .rf-article__foot { margin-top: 3rem !important; } .rf-tags a { display: inline-block; font-size: .8rem; font-weight: 700; padding: .35rem .8rem; border-radius: 999px; background: var(--wp--preset--color--mist); text-decoration: none; color: var(--rf-night); margin: .2rem; } .rf-tags { font-size: .8rem; font-weight: 700; color: var(--wp--preset--color--muted); } .rf-sharebar { border-block: 1px solid var(--wp--preset--color--line); padding-block: 1rem; margin-block: 1.75rem !important; align-items: center; } .rf-sharebar__label { margin: 0; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-night); } .rf-share { display: flex; gap: .45rem; list-style: none; padding: 0; margin: 0; } .rf-share a, .rf-share button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--mist); border: 0; cursor: pointer; position: relative; transition: background .3s, transform .5s var(--rf-spring); } .rf-share a:hover, .rf-share button:hover { background: var(--rf-night); transform: translateY(-3px); } .rf-share svg { width: 17px; height: 17px; fill: var(--rf-night); transition: fill .3s; } .rf-share a:hover svg, .rf-share button:hover svg { fill: #fff; } .rf-copy__ok { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); background: var(--rf-night); color: #fff; font-size: .72rem; font-weight: 700; padding: .3rem .55rem; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--rf-spring); } .rf-copy.is-copied .rf-copy__ok { opacity: 1; transform: translate(-50%, 0); } .rf-authorbox { background: var(--wp--preset--color--mist); border-radius: 22px; padding: 1.5rem !important; gap: 1.1rem !important; } .rf-authorbox .wp-block-site-logo img { width: 56px; background: #fff; border-radius: 50%; padding: 6px; box-shadow: 0 0 0 1px var(--wp--preset--color--line); } .rf-authorbox__name { font-weight: 800; margin: 0 0 .25rem !important; color: var(--rf-night); } .rf-authorbox__bio { font-size: .95rem; color: var(--wp--preset--color--muted); margin: 0 !important; } .rf-related { margin-top: var(--wp--preset--spacing--60) !important; max-width: 1140px; margin-inline: auto !important; } .rf-band__title { font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; color: #fff !important; } /* Home: latest stories rail */ .rf-home-news .rf-related__grid { margin-top: var(--wp--preset--spacing--40); } @media (max-width: 781px) { .rf-latest__item { padding-left: 2.6rem; } .rf-article__meta { gap: 1rem; } .rf-sharebar { justify-content: flex-start !important; gap: .75rem; } } @media (prefers-reduced-motion: reduce) { .rf-marquee__track { animation: none; } .rf-split .rf-w > span { transform: none; } } .rf-latest__item > * { margin-block: 0 .35rem !important; } .rf-article__hero img { width: 100% !important; height: 100% !important; object-fit: cover; } .rf-article__title { max-width: 18ch; } /* Above-the-fold content paints immediately (protects LCP); only the headline words animate. */ .js .rf-hero .rf-reveal, .js .rf-pagehead .rf-reveal, .js .rf-masthead.rf-reveal { opacity: 1 !important; transform: none !important; filter: none !important; } html { overflow-x: clip; } /* ---------- FAQ ---------- */ .rf-faq { display: grid; gap: .75rem; } .rf-faq__h { font-size: var(--wp--preset--font-size--xl) !important; margin: 2.5rem 0 .5rem !important; scroll-margin-top: 120px; } .rf-faq__h:first-child { margin-top: 0 !important; } .rf-faq__item { background: #fff; border-radius: 18px; padding: 0 !important; box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 0 0 6px rgba(13, 29, 57, .07), 0 18px 40px -26px rgba(13, 29, 57, .3); transition: box-shadow .4s var(--rf-spring); } .rf-faq__item[open] { box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 0 0 6px rgba(58, 110, 219, .25), 0 26px 50px -26px rgba(13, 29, 57, .35); } .rf-faq__item summary { list-style: none; cursor: pointer; padding: 1.2rem 3.75rem 1.2rem 1.4rem; font-weight: 700; font-size: 1.06rem; line-height: 1.4; color: var(--rf-night); position: relative; border-radius: 18px; } .rf-faq__item summary::-webkit-details-marker { display: none; } .rf-faq__item summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 2rem; height: 2rem; margin-top: -1rem; border-radius: 50%; background: var(--wp--preset--color--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D47A8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .5s var(--rf-spring), background-color .3s; } .rf-faq__item[open] summary::after { transform: rotate(135deg); background-color: var(--wp--preset--color--hope); } .rf-faq__item summary:hover { color: var(--rf-brand); } .rf-faq__item > :not(summary) { padding: 0 1.4rem 1.3rem; margin: 0; color: #3B4252; } .rf-faq__item[open] > :not(summary) { animation: rf-faq-in .5s var(--rf-spring); } @keyframes rf-faq-in { from { opacity: 0; transform: translateY(-6px); } } .rf-faq-nav { position: sticky; top: 110px; background: var(--wp--preset--color--mist); border-radius: 22px; padding: 1.5rem; } .rf-faq-nav__title { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-brand); margin: 0 0 .75rem; } .rf-faq-nav ul { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .15rem; } .rf-faq-nav ul a { display: block; padding: .5rem .75rem; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--rf-night); transition: background .25s, transform .4s var(--rf-spring); } .rf-faq-nav ul a:hover { background: #fff; transform: translateX(4px); } .rf-faq-nav__cta { font-weight: 700; font-size: .92rem; text-decoration: none; } @media (max-width: 781px) { .rf-faq-nav { position: static; } .rf-faq-nav ul { display: flex; flex-wrap: wrap; gap: .4rem; } .rf-faq-nav ul a { background: #fff; padding: .45rem .8rem; border-radius: 999px; font-size: .88rem; } } /* ---------- Story styles (editor-selectable) ---------- */ .rf-prose .is-style-lede { font-size: 1.12em; line-height: 1.65; color: var(--rf-night); } .rf-prose .is-style-lede strong:first-child { font-family: var(--wp--preset--font-family--body); font-size: .72em; letter-spacing: .12em; color: var(--rf-night); } .rf-keyfacts, .wp-block-group.is-style-keyfacts { font-family: var(--wp--preset--font-family--body); background: var(--wp--preset--color--mist); border-radius: 20px; padding: 1.5rem 1.6rem !important; border-top: 4px solid var(--rf-brand); } .rf-keyfacts h3, .is-style-keyfacts h3 { font-family: var(--wp--preset--font-family--body) !important; font-size: .82rem !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--rf-brand); margin: 0 0 .9rem !important; } .rf-prose .wp-block-gallery, .rf-prose .wp-block-image { margin-block: 2rem; } .rf-prose .wp-block-image img { border-radius: 16px; } .rf-prose figcaption, .rf-prose .wp-element-caption { font-family: var(--wp--preset--font-family--body); font-size: .85rem; color: var(--wp--preset--color--muted); text-align: left; margin-top: .6rem; } /* ---------- YouTube (click-to-play) ---------- */ .rf-yt { margin-block: 2.25rem; } .rf-yt__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(13, 29, 57, .07), 0 30px 60px -30px rgba(13, 29, 57, .5); } .rf-yt__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform 1s var(--rf-spring), filter .4s; } .rf-yt__frame:hover img { transform: scale(1.03); filter: brightness(.85); } .rf-yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rf-yt__play { position: absolute; inset: 0; margin: auto; width: 84px; height: 60px; border: 0; background: none; cursor: pointer; padding: 0; transition: transform .5s var(--rf-spring); } .rf-yt__play svg { width: 100%; height: 100%; } .rf-yt__play svg path:first-child { fill: rgba(13, 29, 57, .82); transition: fill .3s; } .rf-yt__frame:hover .rf-yt__play { transform: scale(1.1); } .rf-yt__frame:hover .rf-yt__play svg path:first-child { fill: #FF0033; } .rf-yt__watch { position: absolute; right: .9rem; bottom: .8rem; font-family: var(--wp--preset--font-family--body); font-size: .75rem; font-weight: 700; color: #fff !important; background: rgba(0, 0, 0, .55); padding: .35rem .7rem; border-radius: 999px; text-decoration: none !important; } .rf-yt.is-playing .rf-yt__watch, .rf-yt.is-playing .rf-yt__play, .rf-yt.is-playing img { display: none; } /* ---------- Comments ---------- */ .rf-comments { max-width: 760px; margin: var(--wp--preset--spacing--60) auto 0 !important; } .rf-comments__count { font-family: var(--wp--preset--font-family--serif) !important; font-size: 1.5rem !important; font-weight: 700 !important; margin: 0 0 1.25rem !important; font-stretch: 100% !important; } .rf-comments .wp-block-comment-template { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; } .rf-comments .wp-block-comment-template ol { list-style: none; padding-left: clamp(1rem, 4vw, 2.5rem); margin-top: 1rem; display: grid; gap: 1rem; border-left: 2px solid var(--wp--preset--color--sky); } .rf-comment { background: #fff; border-radius: 18px; padding: 1.25rem 1.4rem !important; box-shadow: 0 0 0 5px rgba(255, 255, 255, .8), 0 0 0 6px rgba(13, 29, 57, .07), 0 18px 40px -28px rgba(13, 29, 57, .35); } .rf-comment__meta { gap: .35rem .9rem !important; align-items: baseline; margin-bottom: .4rem !important; } .rf-comment .wp-block-comment-author-name { font-weight: 800; color: var(--rf-night); font-size: .98rem; } .rf-comment .wp-block-comment-date, .rf-comment .wp-block-comment-date a, .rf-comment .wp-block-comment-edit-link a { font-size: .8rem; color: var(--wp--preset--color--muted); text-decoration: none; } .rf-comment .wp-block-comment-content { font-family: var(--wp--preset--font-family--serif); font-size: 1.08rem; line-height: 1.65; color: #1d2230; } .rf-comment .wp-block-comment-content p { margin: .4rem 0; } .rf-comment .comment-awaiting-moderation { display: inline-block; font-size: .8rem; font-weight: 700; color: #8A5300; background: #FFF3DE; padding: .25rem .6rem; border-radius: 999px; } .rf-comment .wp-block-comment-reply-link a { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-brand); text-decoration: none; } .rf-comments .comment-respond { background: var(--wp--preset--color--mist); border-radius: 22px; padding: clamp(1.25rem, 4vw, 2rem); margin-top: 1.5rem; } .rf-comments .comment-reply-title { font-family: var(--wp--preset--font-family--serif); font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; color: var(--rf-night); } .rf-comments .comment-reply-title small a { font-family: var(--wp--preset--font-family--body); font-size: .8rem; margin-left: .75rem; } .rf-comment-note { font-size: .9rem; color: var(--wp--preset--color--muted); margin: 0 0 1rem; } .rf-comments .comment-form { display: grid; gap: 1rem; } .rf-comments .comment-form label { display: block; font-weight: 700; font-size: .875rem; margin-bottom: .35rem; color: var(--rf-night); } .rf-comments .comment-form input[type=text], .rf-comments .comment-form input[type=email], .rf-comments .comment-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: .85rem 1rem; border-radius: 12px; border: 1.5px solid #CDD5E3; background: #fff; } .rf-comments .comment-form input:focus, .rf-comments .comment-form textarea:focus { border-color: var(--rf-brand); box-shadow: 0 0 0 4px rgba(58, 110, 219, .15); outline: none; } .rf-comments .comment-form textarea { min-height: 140px; } .rf-comments .comment-form-cookies-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; } .rf-comments .comment-form-cookies-consent label { font-weight: 500; margin: 0; } .rf-comment-submit, .rf-comments .form-submit input[type=submit] { font: inherit; font-weight: 700; border: 0; cursor: pointer; background: var(--rf-brand); color: #fff; padding: .95rem 1.9rem; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(58, 110, 219, .8); transition: background .2s, transform .3s var(--rf-spring); } .rf-comment-submit:hover { background: var(--rf-deep); transform: translateY(-2px); } @media (min-width: 700px) { .rf-comments .comment-form-author, .rf-comments .comment-form-email { display: inline-block; width: calc(50% - .5rem); } .rf-comments .comment-form-author { margin-right: 1rem; } .rf-comments .comment-form { display: block; } .rf-comments .comment-form > p { margin: 0 0 1rem; } } /* ---------- Smart image fit: show the whole photo when a frame would crop it heavily ---------- */ .rf-fit { position: relative; overflow: hidden; isolation: isolate; background: var(--rf-night); } .rf-fit::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--rf-fit-src) center / cover no-repeat; filter: blur(26px) saturate(1.15) brightness(.9); transform: scale(1.08); } .rf-fit img { object-fit: contain !important; object-position: center !important; background: transparent !important; } .rf-fit.rf-frame-img img { box-shadow: none !important; } .rf-frame .wp-block-image.rf-fit { border-radius: var(--rf-radius); box-shadow: 0 0 0 8px rgba(255, 255, 255, .8), 0 0 0 9px rgba(13, 29, 57, .06), 0 40px 80px -36px rgba(13, 29, 57, .45); } .rf-frame .wp-block-image.rf-fit img { box-shadow: none !important; } .rf-team .wp-block-image.rf-fit { border-radius: var(--rf-radius); aspect-ratio: 4 / 5; } .rf-team .wp-block-image.rf-fit img { height: 100%; } .wp-block-gallery .wp-block-image.rf-fit { background: var(--wp--preset--color--mist); } /* Nav: 7 top-level items. Tighten spacing on small laptops; use the hamburger overlay on tablets so the island never wraps to two lines. */ @media (min-width: 1024px) and (max-width: 1199px) { .rf-nav .wp-block-navigation__container { gap: 1.1rem !important; } } @media (min-width: 600px) and (max-width: 1023px) { .rf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .rf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } .rf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; } } /* Full-screen menu overlay: the island's backdrop-filter would otherwise trap the fixed overlay inside the pill. */ .rf-header:has(.is-menu-open) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; } .rf-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 5.5rem 1.75rem 2rem !important; } .admin-bar .rf-nav .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 32px) !important; } .rf-nav .is-menu-open .wp-block-navigation__responsive-container-content, .rf-nav .is-menu-open .wp-block-navigation__container, .rf-nav .is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; text-align: left !important; } .rf-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(7) { animation-delay: .3s; } .rf-footer__logo { display: inline-block; line-height: 0; } .rf-footer__logo img { width: clamp(115px, 10vw, 140px); height: auto; display: block; } .rf-footer__logo:hover { text-decoration: none !important; opacity: .92; } .rf-footer .wp-block-separator.rf-footer__rule { width: 100% !important; } /* ── Sponsorship band (homepage): full-bleed, slim ─────────────── */ .rf-sb-wrap { padding: clamp(3rem, 6vw, 5rem) 0 0 !important; } .rf-sb { position: relative; overflow: hidden; isolation: isolate; width: 100%; background: #0D1D39; color: #fff; border-block: 1px solid rgba(58, 110, 219, .28); } .rf-sb::before { content: ""; position: absolute; top: -140%; right: -5%; width: 55%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, rgba(58, 110, 219, .6), transparent 70%); } .rf-sb::after { content: ""; position: absolute; bottom: -160%; left: -10%; width: 45%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, rgba(58, 110, 219, .2), transparent 70%); } .rf-sb__grid { position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); } .rf-sb__inner { max-width: 1240px; margin: 0 auto; padding: clamp(1.75rem, 3.2vw, 2.5rem) clamp(1.25rem, 3vw, 1.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem clamp(2rem, 5vw, 4rem); } .rf-sb__copy { min-width: 0; max-width: 760px; } .rf-sb__eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .7rem !important; color: #CDCDCD; font-size: .7rem !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .rf-sb__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #3A6EDB; } .rf-sb__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #3A6EDB; animation: rf-sb-ping 2.4s cubic-bezier(.32, .72, 0, 1) infinite; } @keyframes rf-sb-ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(2.2); opacity: 0; } } .rf-sb__title { margin: 0 0 .5rem !important; color: #fff !important; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2.15rem) !important; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; } .rf-sb__title em { font-style: normal; background: linear-gradient(95deg, #CDCDCD 0%, #CDCDCD 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .rf-sb__lead { margin: 0 !important; color: rgba(255, 255, 255, .75); font-size: .98rem; line-height: 1.55; } .rf-sb__ctas { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; } .rf-sb__btn { display: inline-flex; align-items: center; gap: .9rem; padding: .45rem .5rem .45rem 1.4rem; border-radius: 999px; background: linear-gradient(180deg, #3A6EDB, #3A6EDB); color: #0D1D39 !important; font-weight: 800; font-size: 1rem; white-space: nowrap; text-decoration: none !important; box-shadow: 0 14px 34px -14px rgba(58, 110, 219, .8), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .6s cubic-bezier(.32, .72, 0, 1), box-shadow .6s cubic-bezier(.32, .72, 0, 1); } .rf-sb__ico { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #0D1D39; color: #CDCDCD; font-size: .9rem; transition: transform .6s cubic-bezier(.32, .72, 0, 1); } .rf-sb__btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(58, 110, 219, .9), inset 0 1px 0 rgba(255, 255, 255, .5); } .rf-sb__btn:hover .rf-sb__ico { transform: translate(2px, -2px) scale(1.06); } .rf-sb__btn:active { transform: scale(.98); } .rf-sb__link { color: rgba(255, 255, 255, .75) !important; font-weight: 600; font-size: .85rem; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .22); padding-bottom: 1px; transition: color .4s, border-color .4s; } .rf-sb__link:hover { color: #fff !important; border-color: #CDCDCD; } @media (max-width: 860px) { .rf-sb__inner { flex-direction: column; align-items: flex-start; } .rf-sb__ctas { align-items: flex-start; } } @media (max-width: 600px) { .rf-sb__ctas { width: 100%; } .rf-sb__btn { width: 100%; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .rf-sb__dot::after { animation: none; } .rf-sb__btn, .rf-sb__ico { transition: none; } } .rf-form__intro { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: 14px; background: rgba(58, 110, 219, .12); border: 1px solid rgba(58, 110, 219, .4); font-size: .95rem; } /* ── Board members ([rf_board]) ────────────────────────────────── */ .rf-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; } .rf-board__card { padding: .4rem; border-radius: 1.75rem; background: rgba(13, 29, 57, .04); box-shadow: 0 0 0 1px rgba(13, 29, 57, .06); transition: transform .7s cubic-bezier(.32, .72, 0, 1), box-shadow .7s cubic-bezier(.32, .72, 0, 1); } .rf-board__card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(58, 110, 219, .18), 0 30px 60px -30px rgba(13, 29, 57, .35); } .rf-board__core { height: 100%; padding: clamp(1.25rem, 2.2vw, 1.75rem); border-radius: calc(1.75rem - .4rem); background: #fff; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(13, 29, 57, .05); } .rf-board__head { display: flex; align-items: center; gap: 1rem; } .rf-board__head > div:nth-child(2) { flex: 1; min-width: 0; } .rf-board__avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #3A6EDB, #3A6EDB); } .rf-board__img, .rf-board__mono { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 3px solid #fff; } .rf-board__mono { background: #0D1D39; color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; } .rf-board__name { margin: 0 !important; font-family: var(--wp--preset--font-family--display); font-size: 1.3rem !important; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #0D1D39; } .rf-board__role { margin: .3rem 0 0 !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3A6EDB; } .rf-board__li { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(58, 110, 219, .1); color: #3A6EDB !important; transition: background .4s, color .4s, transform .5s cubic-bezier(.32, .72, 0, 1); } .rf-board__li:hover { background: #3A6EDB; color: #fff !important; transform: translateY(-2px); } .rf-board__bio { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(13, 29, 57, .08); font-size: .95rem; line-height: 1.65; color: #595A5C; } .rf-board__bio p { margin: 0 0 .85rem !important; } .rf-board__bio p:last-child { margin-bottom: 0 !important; } @media (prefers-reduced-motion: reduce) { .rf-board__card, .rf-board__li { transition: none; } } .rf-section .rf-board { margin-top: var(--wp--preset--spacing--50); } /* ── Newsletter capture ([rf_newsletter]) ──────────────────────── */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .rf-nl__eyebrow { margin: 0 0 .5rem !important; font-size: .7rem !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #CDCDCD; } .rf-nl__title { margin: 0 0 .4rem !important; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important; line-height: 1.1; letter-spacing: -.03em; color: #fff !important; } .rf-nl__sub { margin: 0 !important; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .72); } .rf-nl__form { margin: 0; min-width: 0; } .rf-nl__row { display: flex; gap: .4rem; padding: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .4s, box-shadow .4s; } .rf-nl__row:focus-within { border-color: rgba(205, 205, 205, .7); box-shadow: 0 0 0 4px rgba(58, 110, 219, .15); } .rf-nl__row input[type=email] { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; color: #fff; font: inherit; font-size: 1rem; padding: .6rem .9rem; outline: none; box-shadow: none !important; } .rf-nl__row input::placeholder { color: rgba(255, 255, 255, .55); } .rf-nl__row button { flex: none; display: inline-flex; align-items: center; gap: .6rem; border: 0; cursor: pointer; padding: .4rem .45rem .4rem 1.2rem; border-radius: 999px; background: linear-gradient(180deg, #3A6EDB, #3A6EDB); color: #0D1D39; font: inherit; font-weight: 800; font-size: .95rem; transition: transform .5s cubic-bezier(.32, .72, 0, 1); } .rf-nl__ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #0D1D39; color: #CDCDCD; transition: transform .5s cubic-bezier(.32, .72, 0, 1); } .rf-nl__row button:hover .rf-nl__ico { transform: translateX(2px); } .rf-nl__row button:active { transform: scale(.97); } .rf-nl__form.is-busy button { opacity: .7; pointer-events: none; } .rf-nl__msg { margin: .6rem 0 0 1rem !important; font-size: .85rem; min-height: 1.2em; color: rgba(255, 255, 255, .8); } .rf-nl__form.is-ok .rf-nl__row { display: none; } .rf-nl__form.is-ok .rf-nl__msg { margin-left: 0 !important; font-size: 1rem; font-weight: 700; color: #CDCDCD; } .rf-nl__form.is-err .rf-nl__msg { color: #FFB4A2; } /* footer strip */ .rf-nl--footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem); box-sizing: border-box; margin: 0 auto var(--wp--preset--spacing--60) !important; border-radius: 1.75rem; background: linear-gradient(120deg, rgba(58, 110, 219, .22), rgba(255, 255, 255, .04) 60%); border: 1px solid rgba(255, 255, 255, .1); } /* in-content card (articles, newsroom) */ .rf-nl--card { box-sizing: border-box; position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3.5vw, 2.25rem); margin: var(--wp--preset--spacing--60) auto !important; max-width: 760px; border-radius: 1.75rem; background: #0D1D39; box-shadow: 0 0 0 .4rem rgba(13, 29, 57, .05), 0 30px 60px -30px rgba(13, 29, 57, .5); } .rf-nl--card::before { content: ""; position: absolute; top: -60%; right: -20%; width: 70%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, rgba(58, 110, 219, .55), transparent 70%); } /* slide-in */ .rf-nl--popup { position: fixed; z-index: 90; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); width: min(400px, calc(100vw - 1.5rem)); padding: 1.6rem 1.5rem 1.3rem; border-radius: 1.5rem; background: #0D1D39; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -24px rgba(0, 0, 0, .6); transform: translateY(24px) scale(.98); opacity: 0; transition: transform .8s cubic-bezier(.32, .72, 0, 1), opacity .5s; } .rf-nl--popup.is-open { transform: none; opacity: 1; } .rf-nl--popup .rf-nl__sub { margin-bottom: 1rem !important; font-size: .9rem; } .rf-nl--popup .rf-nl__title { font-size: 1.35rem !important; padding-right: 1.5rem; } .rf-nl__close { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.2rem; line-height: 1; } .rf-nl__close:hover { background: rgba(255, 255, 255, .2); } @media (max-width: 781px) { .rf-nl--footer { grid-template-columns: 1fr; } } @media (max-width: 480px) { .rf-nl__row { flex-direction: column; border-radius: 1.25rem; } .rf-nl__row button { justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .rf-nl--popup { transition: opacity .2s; transform: none; } } /* signed-out comment prompt */ .rf-join { padding: clamp(1.5rem, 3vw, 2rem); border-radius: 1.5rem; background: linear-gradient(135deg, rgba(58, 110, 219, .08), rgba(58, 110, 219, .08)); border: 1px solid rgba(13, 29, 57, .08); text-align: center; } .rf-join__title { margin: 0 0 .3rem !important; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; color: #0D1D39; } .rf-join__sub { margin: 0 0 1.2rem !important; color: #595A5C; } .rf-join__btns { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .rf-join__btns a { display: inline-flex; align-items: center; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none !important; transition: transform .5s cubic-bezier(.32, .72, 0, 1); } .rf-join__primary { background: #3A6EDB; color: #fff !important; box-shadow: 0 12px 28px -12px rgba(58, 110, 219, .8); } .rf-join__ghost { background: #fff; color: #0D1D39 !important; box-shadow: inset 0 0 0 1.5px rgba(13, 29, 57, .15); } .rf-join__btns a:hover { transform: translateY(-2px); } /* ── App-style mobile (≤781px) ─────────────────────────────────── */ .rf-tabbar { display: none; } html { -webkit-tap-highlight-color: transparent; } a, button { touch-action: manipulation; } @media (max-width: 781px) { body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } .rf-site-header { top: env(safe-area-inset-top); } .admin-bar .rf-site-header { top: 46px; } /* top app bar: brand only (menu + donate live in the tab bar) */ .rf-header .rf-btn-donate, .rf-header .rf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; } .rf-header > .is-content-justification-space-between { justify-content: center !important; min-height: 44px; } .rf-sb__btn { box-sizing: border-box; } /* bottom tab bar */ .rf-tabbar { position: fixed; z-index: 95; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; height: 64px; padding: 0 4px; border-radius: 22px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0 0 1px rgba(13, 29, 57, .07), 0 18px 40px -14px rgba(13, 29, 57, .38); transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .3s; } .rf-tabbar a, .rf-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: #717A8F; text-decoration: none !important; cursor: pointer; transition: color .3s, transform .35s cubic-bezier(.32, .72, 0, 1); } .rf-tabbar a:active, .rf-tabbar button:active { transform: scale(.9); } .rf-tabbar [aria-current="page"] { color: #3A6EDB; } .rf-tabbar a[aria-current="page"]:not(.rf-tabbar__fab)::before { content: ""; position: absolute; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: #3A6EDB; } .rf-tabbar__fab { color: #0D1D39 !important; justify-content: flex-end !important; padding-bottom: 9px !important; } .rf-tabbar__fabbtn { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -30px; border-radius: 19px; background: linear-gradient(180deg, #3A6EDB, #3A6EDB); color: #0D1D39; box-shadow: 0 0 0 5px rgba(255, 255, 255, .95), 0 14px 26px -8px rgba(58, 110, 219, .75); } .rf-tabbar__fabbtn svg { fill: #0D1D39; stroke: #0D1D39; } .has-modal-open .rf-tabbar { opacity: 0; pointer-events: none; transform: translateY(20px); } /* slide-in sits above the tab bar like a sheet */ .rf-nl--popup { left: 10px; right: 10px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); border-radius: 22px; } /* swipeable card rails instead of long stacks */ .rf-main .wp-block-columns.rf-eq, .rf-stats .wp-block-columns { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem)) !important; padding: 6px var(--wp--style--root--padding-right, 1rem) 18px !important; scroll-padding-inline: var(--wp--style--root--padding-left, 1rem); } .rf-main .wp-block-columns.rf-eq::-webkit-scrollbar, .rf-stats .wp-block-columns::-webkit-scrollbar { display: none; } .rf-main .wp-block-columns.rf-eq > .wp-block-column { flex: 0 0 84% !important; max-width: 84%; scroll-snap-align: start; } .rf-stats .wp-block-columns > .wp-block-column { flex: 0 0 62% !important; max-width: 62%; scroll-snap-align: start; } .rf-stats > .wp-block-group { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; overflow: visible !important; } .rf-stats .rf-stat { height: 100%; box-sizing: border-box; padding: 1.1rem 1.2rem !important; border: 0 !important; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 29, 57, .06), 0 14px 30px -18px rgba(13, 29, 57, .35); } /* news lists read like a news app: thumbnail + headline rows */ .rf-grid .rf-story, .rf-home-news .rf-story { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 14px; align-items: start; } .rf-grid .rf-story > .wp-block-post-featured-image, .rf-home-news .rf-story > .wp-block-post-featured-image { grid-row: 1 / span 4; margin: 0 !important; width: 108px; aspect-ratio: 1 !important; border-radius: 16px; overflow: hidden; } .rf-grid .rf-story > .wp-block-post-featured-image img, .rf-home-news .rf-story > .wp-block-post-featured-image img { width: 100%; height: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; } .rf-story .rf-fit::before, .rf-story .rf-fit::after { display: none !important; } .rf-grid .rf-story .rf-dek, .rf-home-news .rf-story .rf-dek { display: none; } .rf-grid .rf-story__title, .rf-home-news .rf-story__title { font-size: 1.05rem !important; line-height: 1.25 !important; margin: .25rem 0 .35rem !important; } .rf-grid .wp-block-post-template > li, .rf-home-news .wp-block-post-template > li { padding: 14px 0; border-bottom: 1px solid rgba(13, 29, 57, .07); margin: 0 !important; } .rf-grid .wp-block-post-template, .rf-home-news .wp-block-post-template { gap: 0 !important; display: block !important; } /* touch feel */ .rf-mcard, .rf-story, .is-style-card, .rf-board__card, .wp-block-button__link, .rf-sb__btn { transition-property: transform, box-shadow, background, color; } .rf-mcard:active, .rf-story:active, .rf-board__card:active, .wp-block-button__link:active { transform: scale(.98); } .wp-block-buttons > .wp-block-button { flex: 1 1 auto; } .wp-block-buttons > .wp-block-button .wp-block-button__link { width: 100%; min-height: 48px; box-sizing: border-box; justify-content: center; } /* footer: compact two-up link lists */ .rf-footer .wp-block-columns { gap: 1.75rem 1rem !important; } .rf-footer .wp-block-columns > .wp-block-column:nth-child(2), .rf-footer .wp-block-columns > .wp-block-column:nth-child(3) { flex: 1 1 42% !important; } .rf-footer .wp-block-columns { flex-wrap: wrap !important; } } @media (display-mode: standalone) { .rf-footer__legal { padding-bottom: 1rem; } } @media (prefers-reduced-motion: reduce) { .rf-tabbar, .rf-tabbar a, .rf-tabbar button { transition: none; } } /* Footer meta row: links + agency credit */ .rf-footer__meta { gap: .4rem 1.25rem !important; } .rf-footer__meta p { margin: 0 !important; } .rf-credit { color: rgba(255, 255, 255, .5); padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .16); } .rf-credit a { color: rgba(255, 255, 255, .85) !important; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: color .4s; } .rf-credit a:hover { color: #CDCDCD !important; } .rf-credit__arrow { display: inline-block; margin-left: .2em; font-size: .9em; transition: transform .5s cubic-bezier(.32, .72, 0, 1); } .rf-credit a:hover .rf-credit__arrow { transform: translate(2px, -2px); } @media (max-width: 600px) { .rf-footer__legal { flex-direction: column; align-items: flex-start !important; gap: .6rem !important; } .rf-credit { padding-left: 0; border-left: 0; } } /* ════════════════════════════════════════════════════════════════ * Brand guide (Ame Creative, 2026): palette, Plus Jakarta Sans, 6px buttons, * Title → Subtitle → Body hierarchy, no rules before headings. * Palette: blue #3A6EDB · gray #595A5C · light gray #CDCDCD · navy #0D1D39 · near-black #242121 · white * ════════════════════════════════════════════════════════════════ */ :root { --rf-h1: clamp(2.4rem, 5vw, 4rem); --rf-h2: clamp(1.9rem, 3.4vw, 2.85rem); --rf-sub: clamp(1.2rem, 1.9vw, 1.5rem); --rf-h3: clamp(1.15rem, 1.5vw, 1.35rem); --rf-title: #0D1D39; --rf-subtitle: #242121; --rf-body: #595A5C; } body { color: var(--rf-body); } h1, h2 { font-stretch: 100% !important; } /* Title (H1) */ h1, .rf-hero h1, .rf-pagehead h1, .rf-article__title, .rf-masthead__title { font-size: var(--rf-h1) !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.08 !important; } /* Section titles (H2), including the former small "eyebrow" labels that name a section */ .wp-block-heading:is(h2):not(.is-style-eyebrow):not(.rf-faq__h), .rf-main h2.is-style-eyebrow:not(:has(+ h2)) { font-size: var(--rf-h2) !important; font-weight: 700 !important; letter-spacing: -.015em !important; line-height: 1.12 !important; text-transform: none !important; color: var(--rf-title); display: block; margin-bottom: .35em !important; } /* Subtitle: the line that follows a section title */ .rf-main h2.is-style-eyebrow + h3, .rf-band h2.is-style-eyebrow + h3 { font-size: var(--rf-sub) !important; font-weight: 500 !important; letter-spacing: -.005em !important; line-height: 1.35 !important; color: var(--rf-subtitle); } .has-text-align-center.is-style-eyebrow + h3 { margin-inline: auto; } /* Card / item titles (H3, H4) */ h3.wp-block-heading:not(h2.is-style-eyebrow + h3), .rf-board__name { font-size: var(--rf-h3) !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--rf-title); } h4.wp-block-heading { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--rf-title); } /* Article body headings */ .rf-prose h2.wp-block-heading { font-size: clamp(1.45rem, 2.3vw, 1.85rem) !important; } .rf-prose, .rf-prose p, .rf-prose li { color: var(--rf-subtitle); } /* Small labels that stay small (dates, kickers, footer columns): no decorative rule */ .is-style-eyebrow::before, .rf-eyebrow::before { content: none !important; display: none !important; } .is-style-eyebrow, .rf-eyebrow { gap: 0 !important; color: var(--wp--preset--color--brand); letter-spacing: .1em; } .rf-rail-title { border-top: 0 !important; padding-top: 0 !important; } .rf-footer__h.is-style-eyebrow { color: #CDCDCD !important; font-size: .78rem !important; } /* Dark sections: same hierarchy, white type */ .rf-dark .wp-block-heading, .has-white-color .wp-block-heading, .rf-band .wp-block-heading, .wp-block-cover .wp-block-heading, .rf-dark h2.is-style-eyebrow + h3, .rf-band h2.is-style-eyebrow + h3 { color: #fff !important; } .rf-dark p, .rf-band p { color: rgba(255, 255, 255, .85); } .rf-band__title { font-size: var(--rf-sub) !important; font-weight: 500 !important; } /* Buttons: brand rectangle (6px), navy; blue on dark backgrounds. No pill shapes, no arrow bubbles. */ .wp-block-button__link, .wp-element-button, .rf-form button, .rf-comment-submit, .rf-comments .form-submit input[type=submit], .rf-sb__btn, .rf-nl__row button, .rf-join__btns a, .rf-event__cta a { border-radius: 6px !important; font-weight: 600 !important; letter-spacing: 0 !important; } .wp-block-button__link, .rf-form button, .rf-join__primary, .rf-event__cta a { background: #0D1D39 !important; color: #fff !important; box-shadow: none !important; } .wp-block-button__link:hover, .rf-form button:hover, .rf-join__primary:hover, .rf-event__cta a:hover { background: #3A6EDB !important; color: #fff !important; transform: translateY(-2px); } .wp-block-button.is-style-ghost .wp-block-button__link, .rf-join__ghost { background: transparent !important; color: #0D1D39 !important; box-shadow: inset 0 0 0 1.5px #0D1D39 !important; } .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #0D1D39 !important; color: #fff !important; } .wp-block-button.is-style-light .wp-block-button__link { background: #fff !important; color: #0D1D39 !important; } .wp-block-button.is-style-light .wp-block-button__link:hover { background: #3A6EDB !important; color: #fff !important; } /* On navy / photo backgrounds */ :is(.rf-dark, .rf-band, .wp-block-cover, .has-brand-night-background-color, .rf-sb, .rf-nl--card, .rf-nl--popup, .rf-footer) .wp-block-button:not(.is-style-light):not(.is-style-ghost) .wp-block-button__link, .rf-sb__btn, .rf-nl__row button { background: #3A6EDB !important; color: #fff !important; box-shadow: none !important; } :is(.rf-dark, .rf-band, .wp-block-cover, .has-brand-night-background-color, .rf-footer) .wp-block-button.is-style-ghost .wp-block-button__link { color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff !important; } :is(.rf-dark, .rf-band, .wp-block-cover, .has-brand-night-background-color, .rf-footer) .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #fff !important; color: #0D1D39 !important; } .rf-sb__btn:hover, .rf-nl__row button:hover { background: #fff !important; color: #0D1D39 !important; } .rf-arrow .wp-block-button__link::after, p.rf-arrow a::after { content: none !important; display: none !important; } .rf-arrow .wp-block-button__link { padding-right: 1.75rem !important; } .rf-sb__ico, .rf-nl__ico { display: none !important; } .rf-sb__btn, .rf-nl__row button { padding: .8rem 1.5rem !important; } .rf-nl__row { border-radius: 8px !important; } .rf-btn-donate .wp-block-button__link { background: #3A6EDB !important; } .rf-btn-donate .wp-block-button__link:hover { background: #0D1D39 !important; } .rf-btn-donate .wp-block-button__link::before { content: none !important; } /* Brand accents: solid brand blue instead of gradients */ .rf-sb__title em { background: none !important; -webkit-text-fill-color: currentColor; color: #3A6EDB !important; } .rf-dark .rf-sb__title em, .rf-sb .rf-sb__title em { color: #fff !important; text-decoration: underline; text-decoration-color: #3A6EDB; text-decoration-thickness: 3px; text-underline-offset: 6px; } .rf-sb__eyebrow, .rf-nl__eyebrow { background: none !important; border: 0 !important; padding: 0 !important; color: #CDCDCD !important; } .rf-board__avatar { background: #3A6EDB !important; } .rf-tabbar__fabbtn { background: #3A6EDB !important; color: #fff !important; } .rf-tabbar__fabbtn svg { fill: #fff !important; stroke: #fff !important; } /* Header: solid white bar so the full-colour logo reads clearly */ .rf-site-header > .rf-header, .rf-header, .is-scrolled .rf-header { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: #EAEAE8 !important; } .rf-header-logo { display: block; line-height: 0; } .rf-header-logo img { width: clamp(150px, 15vw, 190px); height: auto; display: block; } @media (max-width: 781px) { .rf-header-logo img { width: 150px; } } .rf-label { margin: 0 0 .4rem !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3A6EDB; } .rf-label + h3.wp-block-heading { font-size: var(--rf-h2) !important; } .rf-nowrap { white-space: nowrap; } .rf-hero h1 em, .rf-accent, .rf-dark .rf-accent, .has-white-color .rf-accent { color: #3A6EDB !important; } .rf-site-header > .rf-header, .rf-header { border-radius: 14px !important; } /* rf-mobile-news-rows: on phones/tablets, news lists read like a news app (thumb + headline rows). Shortcode-rendered stories use a.rf-story__img, the query-loop ones use the featured-image block; handle both and pin every text node to column 2. On desktop the home rail becomes full image cards. */ @media (max-width: 781px) { .rf-grid .rf-story, .rf-home-news .rf-story { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 14px; align-items: start; } .rf-grid .rf-story > .rf-story__img, .rf-home-news .rf-story > .rf-story__img, .rf-grid .rf-story > .wp-block-post-featured-image, .rf-home-news .rf-story > .wp-block-post-featured-image { grid-row: 1 / span 5; grid-column: 1; margin: 0 !important; width: 108px; aspect-ratio: 1 !important; border-radius: 16px; overflow: hidden; } .rf-grid .rf-story > .rf-story__img img, .rf-home-news .rf-story > .rf-story__img img, .rf-grid .rf-story > .wp-block-post-featured-image img, .rf-home-news .rf-story > .wp-block-post-featured-image img { width: 100%; height: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; object-position: center 25% !important; } .rf-grid .rf-story > :not(.rf-story__img):not(.wp-block-post-featured-image), .rf-home-news .rf-story > :not(.rf-story__img):not(.wp-block-post-featured-image) { grid-column: 2; min-width: 0; } .rf-grid .rf-story .rf-kicker, .rf-home-news .rf-story .rf-kicker { margin: 0 0 .2rem !important; } .rf-grid .rf-story__title, .rf-home-news .rf-story__title { margin: 0 0 .3rem !important; font-size: 1.05rem !important; line-height: 1.25 !important; } .rf-grid .rf-story .rf-meta, .rf-home-news .rf-story .rf-meta { font-size: .78rem !important; } .rf-home-news .rf-story { padding: 14px 0; border-bottom: 1px solid rgba(13, 29, 57, .07); border-radius: 0; } .rf-home-news .rf-story:first-child { border-top: 1px solid rgba(13, 29, 57, .07); } .rf-home-news .rf-related__grid { grid-template-columns: 1fr; row-gap: 0; } } @media (max-width: 599px) { .rf-grid .rf-story, .rf-home-news .rf-story { grid-template-columns: 96px minmax(0, 1fr); } .rf-grid .rf-story > .rf-story__img, .rf-home-news .rf-story > .rf-story__img, .rf-grid .rf-story > .wp-block-post-featured-image, .rf-home-news .rf-story > .wp-block-post-featured-image { width: 96px; } .rf-grid .rf-story__title, .rf-home-news .rf-story__title { font-size: 1.02rem !important; } } @media (min-width: 782px) { .rf-home-news .rf-story { display: flex; flex-direction: column; gap: .45rem; padding: 0; border: 0; } .rf-home-news .rf-story > .rf-story__img { width: 100%; aspect-ratio: 3 / 2 !important; border-radius: 18px; margin: 0 0 .75rem !important; overflow: hidden; } .rf-home-news .rf-story > .rf-story__img img { width: 100%; height: 100% !important; object-fit: cover !important; object-position: center 25% !important; } .rf-home-news .rf-story__title { font-size: 1.25rem !important; line-height: 1.2 !important; } .rf-home-news .rf-related__grid { row-gap: clamp(1.5rem, 3vw, 2.5rem); } } /* rf-story-card-crop: story cards (rails, related, archive grids) crop to fill the 3:2 frame instead of letterboxing portraits with dark bars. Faces sit in the top third, so bias the crop upward. */ .rf-story .rf-story__img.rf-fit img, .rf-story .rf-fit img { object-fit: cover !important; object-position: center 22% !important; width: 100%; height: 100%; } .rf-story .rf-story__img.rf-fit { background: var(--wp--preset--color--mist, #EEF1F6); } @media (max-width: 599px) { .rf-rail .rf-story__img, .rf-related:not(.rf-home-news) .rf-story__img { border-radius: 16px; aspect-ratio: 16 / 10; } } /* ========================================================================== rf-athletes — 2027 Boston Marathon team + Ambassador Athletes rosters Large 4:5 portrait, year chip, name, hometown line, expandable story, fundraising CTA. Spotlight variant for small rosters (ambassadors). ========================================================================== */ .rf-athletes { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem) !important; align-items: stretch; } @media (min-width: 1100px) { .rf-athletes:not(.rf-athletes--spotlight) { grid-template-columns: repeat(4, 1fr); } } .rf-athletes__lead { max-width: 62ch; margin: .75rem 0 0 !important; font-size: 1.05rem; line-height: 1.6; color: var(--wp--preset--color--muted); } .rf-athlete { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: var(--rf-radius); overflow: hidden; box-shadow: 0 0 0 1px rgba(13, 29, 57, .06), 0 1px 2px rgba(13, 29, 57, .05), 0 18px 40px -28px rgba(13, 29, 57, .28); transition: transform .7s var(--rf-spring), box-shadow .7s var(--rf-spring); } .rf-athlete:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(58, 110, 219, .22), 0 1px 2px rgba(13, 29, 57, .05), 0 36px 64px -30px rgba(13, 29, 57, .4); } .rf-athlete:focus-within { box-shadow: 0 0 0 3px rgba(58, 110, 219, .35), 0 36px 64px -30px rgba(13, 29, 57, .4); } .rf-athlete__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--mist); isolation: isolate; } .rf-athlete__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.001); transition: transform 1.2s var(--rf-ease); } .rf-athlete:hover .rf-athlete__media img { transform: scale(1.045); } .rf-athlete__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, rgba(13, 29, 57, 0) 0%, rgba(13, 29, 57, .55) 100%); pointer-events: none; } .rf-athlete__chip { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1; -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 6px 18px -8px rgba(0, 0, 0, .5); } .rf-athlete__chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rf-brand); box-shadow: 0 0 0 3px rgba(58, 110, 219, .35); } .rf-athlete__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.15rem, 1.8vw, 1.5rem) clamp(1.15rem, 1.8vw, 1.5rem) clamp(1.25rem, 1.8vw, 1.5rem); } .rf-athlete__name { margin: 0 !important; font-family: var(--wp--preset--font-family--display); font-weight: 800 !important; font-size: clamp(1.2rem, 1.45vw, 1.4rem) !important; line-height: 1.15 !important; letter-spacing: -.02em; color: var(--rf-night) !important; } .rf-athlete__name small { display: block; margin-top: .15rem; font-size: .68em; font-weight: 600; letter-spacing: 0; color: var(--wp--preset--color--muted); } .rf-athlete__role { margin: .55rem 0 0 !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-brand); } .rf-athlete__role span { color: var(--wp--preset--color--muted); font-weight: 600; letter-spacing: .06em; text-transform: none; } .rf-athlete__role span::before { content: "·"; margin: 0 .45rem; color: var(--wp--preset--color--line); } .rf-athlete__bio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(13, 29, 57, .08); font-size: .95rem; line-height: 1.65; color: var(--wp--preset--color--muted); flex: 1; } .rf-athlete__excerpt { margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .rf-athlete__more { margin-top: .6rem; } .rf-athlete__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .875rem; color: var(--rf-deep); border-radius: 999px; padding: .25rem 0; transition: color .25s; } .rf-athlete__more summary::-webkit-details-marker { display: none; } .rf-athlete__more summary::after { content: "+"; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(58, 110, 219, .1); font-weight: 800; line-height: 1; transition: transform .35s var(--rf-ease), background .25s; } .rf-athlete__more summary:hover { color: var(--rf-brand); } .rf-athlete__more summary:hover::after { background: rgba(58, 110, 219, .18); } .rf-athlete__more[open] summary::after { content: "−"; transform: rotate(180deg); } .rf-athlete__more summary:focus-visible { outline: 2px solid var(--rf-brand); outline-offset: 3px; } .rf-athlete__more > div { margin-top: .75rem; } .rf-athlete__more > div p { margin: 0 0 .8rem !important; } .rf-athlete__more > div p:last-child { margin-bottom: 0 !important; } .rf-athlete__bio:has(.rf-athlete__more[open]) .rf-athlete__excerpt { display: none; } .rf-athlete__more[open] > summary .rf-athlete__more-label::after { content: " less"; } .rf-athlete__more:not([open]) > summary .rf-athlete__more-label::after { content: " full story"; } .rf-athlete__cta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding: .85rem 1.1rem; border-radius: 999px; background: var(--rf-night); color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: .9rem; line-height: 1.2; letter-spacing: -.005em; box-shadow: 0 10px 24px -14px rgba(13, 29, 57, .6); transition: background .3s, transform .35s var(--rf-ease), box-shadow .35s; } .rf-athlete__cta svg { flex: none; width: 1.1rem; height: 1.1rem; transition: transform .35s var(--rf-ease); } .rf-athlete__cta:hover { background: var(--rf-brand); transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(58, 110, 219, .7); } .rf-athlete__cta:hover svg { transform: translateX(4px); } .rf-athlete__cta:focus-visible { outline: 3px solid var(--rf-brand); outline-offset: 3px; } .rf-athlete__cta:active { transform: scale(.985); } /* Spotlight variant: wide horizontal cards for short rosters (Ambassadors) */ .rf-athletes--spotlight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } @media (min-width: 760px) { .rf-athletes--spotlight .rf-athlete { flex-direction: row; } .rf-athletes--spotlight .rf-athlete__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 100%; } .rf-athletes--spotlight .rf-athlete__media::after { inset: 0 0 0 auto; width: 40%; height: 100%; background: linear-gradient(90deg, rgba(13, 29, 57, 0), rgba(13, 29, 57, .18)); } .rf-athletes--spotlight .rf-athlete__body { padding: clamp(1.5rem, 2.4vw, 2.25rem); } .rf-athletes--spotlight .rf-athlete__excerpt { -webkit-line-clamp: 7; } } /* Intro strip above a roster: count + one-line promise */ .rf-roster-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-top: .5rem; } .rf-roster-intro .rf-athletes__lead { margin: 0 !important; } .rf-roster-count { display: inline-flex; align-items: baseline; gap: .5rem; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.03em; color: var(--rf-night); font-variant-numeric: tabular-nums; } .rf-roster-count small { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-brand); } /* Compact cross-link row used under rosters */ .rf-xlink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding: 1.1rem 1.4rem; border-radius: var(--rf-radius-sm); background: #fff; box-shadow: 0 0 0 1px rgba(13, 29, 57, .06); } .rf-xlink p { margin: 0 !important; color: var(--wp--preset--color--muted); } .rf-xlink p b { color: var(--rf-night); } @media (prefers-reduced-motion: reduce) { .rf-athlete, .rf-athlete__media img, .rf-athlete__cta, .rf-athlete__cta svg, .rf-athlete__more summary::after { transition: none; } .rf-athlete:hover { transform: none; } .rf-athlete:hover .rf-athlete__media img { transform: none; } } /* rf-athletes refinements */ .rf-athlete__role span { display: block; margin-top: .3rem; font-size: .8rem; letter-spacing: .02em; } .rf-athlete__role span::before { content: none; } .rf-athlete__cta { font-size: .875rem; }