/* Theme Name: Rainbow Anonymous Theme URI: https://rainbowanonymous.org/ Description: Child theme of Spectra One for Rainbow Anonymous. Contains the homepage design system, section styling, and accessibility / performance refinements. All custom classes use the ra- prefix. Author: Rainbow Anonymous Template: spectra-one Version: 3.2.0 Text Domain: ra */ /* IMPORTANT WHEN EDITING The stylesheet is cache-busted by the Version line above. If you change this file, increment that number — otherwise browsers and LiteSpeed Cache will keep serving the previous copy and your edit will appear to have done nothing. */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { --ra-purple: #7027D9; --ra-purple-hover: #7C35DF; --ra-purple-dark: #37105F; --ra-ink: #15121C; --ra-heading: #1D1726; --ra-body: #554D60; --ra-lavender: #F6F0FF; --ra-lavender-lite: #FBF8FF; --ra-cream: #FFF6E5; --ra-white: #FFFFFF; --ra-border: rgba(55, 16, 95, 0.10); --ra-focus: #A855F7; --ra-focus-light: #E9D5FF; /* Purple accent for the active-nav underline. Pitched light enough to clear 3:1 non-text contrast in BOTH header states — the lighter glass at the top of the homepage is the constraint, not the scrolled bar. */ --ra-accent-rule: #DCC2FF; --ra-radius-card: 20px; --ra-radius-panel: 24px; --ra-radius-pill: 999px; --ra-shadow-sm: 0 1px 2px rgba(21, 18, 28, 0.04), 0 4px 16px rgba(55, 16, 95, 0.06); --ra-shadow-md: 0 2px 6px rgba(21, 18, 28, 0.06), 0 12px 32px rgba(55, 16, 95, 0.10); --ra-shadow-lg: 0 4px 10px rgba(21, 18, 28, 0.08), 0 24px 56px rgba(55, 16, 95, 0.14); --ra-max: 1180px; --ra-pad-x: clamp(20px, 4vw, 40px); /* Two stacked sections each contribute this, so the gap between them is double. 88px a side reads generous without leaving a void. */ --ra-section-y: clamp(48px, 7vw, 88px); --ra-ease: cubic-bezier(.2, .7, .2, 1); --ra-rainbow: linear-gradient(90deg, #ef5b5b, #f59e42, #e6c84f, #4fa77d, #5577d8, #8b5bc7); } /* ========================================================================== 2. BASE / TYPOGRAPHY ========================================================================== */ /* Guard only, on body. Deliberately NOT on : clipping the root element is unreliable on iOS Safari around position:fixed descendants, and the mobile menu overlay is exactly that. The real overflow cause is fixed in the layout container rule below, so this is a backstop, not a load-bearing rule. */ body { overflow-x: hidden; } body { color: var(--ra-body); background: var(--ra-white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--ra-heading); } /* Fluid heading scale. Tighter tracking at large sizes reads more premium. */ .ra-h1 { font-size: clamp(2.35rem, 5.4vw, 3.9rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; } .ra-h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); line-height: 1.12; letter-spacing: -0.022em; font-weight: 700; } .ra-h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; } .ra-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ra-purple); margin: 0 0 0.75rem; } .ra-lead { font-size: clamp(1.02rem, 1.35vw, 1.15rem); line-height: 1.7; color: var(--ra-body); max-width: 46ch; } /* Body copy never drops below 16px. */ p { font-size: max(1rem, 1em); } /* Layout container. The theme's constrained layout would otherwise clamp children to its 764px content-size, so the width is set here explicitly. Applied to whatever the section's DIRECT child happens to be, rather than to .ra-container specifically. WordPress regenerates a Group block's wrapper on save and discards raw HTML that isn't part of a block, so the .ra-container div cannot be relied on to survive. Targeting direct children works either way, and because the rule only reaches one level deep the padding is never applied twice. */ .ra-section > :not(.ra-wave), .ra-about-hero > :not(.ra-wave), .ra-container { width: 100%; max-width: var(--ra-max); margin-inline: auto; padding-inline: var(--ra-pad-x); } /* Fixed-size children that must not be stretched or padded by the above. */ .ra-about-hero > .ra-scroll-cue, .ra-section > .ra-scroll-cue { width: 44px; max-width: 44px; padding-inline: 0; } .ra-section { padding-block: var(--ra-section-y); /* Horizontal padding belongs to .ra-container, so cancel the theme's default group padding here to avoid doubling it up. */ padding-inline: 0; position: relative; } /* Stays lavender the whole way down. Fading to white made the boundary with the next section invisible, so the stacked padding read as a dead gap. */ .ra-section--lavender { background: linear-gradient(180deg, var(--ra-lavender) 0%, var(--ra-lavender-lite) 100%); } .ra-section--white { background: var(--ra-white); } /* ========================================================================== 3. HEADER ========================================================================== */ /* Glass header. Interior pages sit on the settled state permanently. */ .ra-header { position: sticky; top: 0; z-index: 100; background-color: rgba(26, 10, 50, 0.92); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid rgba(255, 255, 255, 0.10); transition: background-color 250ms var(--ra-ease), backdrop-filter 250ms var(--ra-ease), -webkit-backdrop-filter 250ms var(--ra-ease), border-color 250ms var(--ra-ease); } /* Homepage at rest: lighter, more transparent glass over the hero. The scrim lives on a pseudo-element rather than the background, because a gradient cannot be smoothly transitioned into a flat colour — this way the two states cross-fade properly instead of snapping. */ body.home .ra-header { position: fixed; inset-inline: 0; background-color: rgba(26, 10, 50, 0); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); border-bottom-color: rgba(255, 255, 255, 0.06); } /* Weighted toward the top, where the nav sits, so links keep their contrast against the brighter part of the photograph. */ body.home .ra-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(24, 10, 46, 0.74) 0%, rgba(24, 10, 46, 0.40) 62%, rgba(24, 10, 46, 0.06) 100%); transition: opacity 250ms var(--ra-ease); } /* Homepage scrolled: settles into deeper purple, stronger blur. */ body.home .ra-header.ra-scrolled { background-color: rgba(26, 10, 50, 0.86); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: rgba(255, 255, 255, 0.10); } body.home .ra-header.ra-scrolled::before { opacity: 0; } /* An element with backdrop-filter becomes the containing block for any position:fixed descendant. The mobile menu overlay is fixed inset:0, so with the blur applied it filled the HEADER rather than the viewport — a purple strip with the links scrolling inside it. Dropping the blur while the menu is open releases the overlay to the full screen. Both selectors are listed so this outranks body.home .ra-header. */ body.home .ra-header:has(.wp-block-navigation__responsive-container.is-menu-open), .ra-header:has(.wp-block-navigation__responsive-container.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: transparent; border-bottom-color: transparent; } body.home .ra-header:has(.wp-block-navigation__responsive-container.is-menu-open)::before { opacity: 0; } .ra-header-inner { max-width: var(--ra-max); margin-inline: auto; padding: 0.9rem var(--ra-pad-x); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Logo: sized by height, never repositioned with negative margins. */ .ra-logo img { display: block; height: 46px; width: auto; max-width: 260px; } .ra-logo a { display: inline-flex; } .ra-header-right { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem); } /* --- Navigation --- */ /* ~10px more breathing room between links than before. */ .ra-nav .wp-block-navigation__container { gap: clamp(1.6rem, 2.8vw, 2.6rem); } /* Resting state: high contrast but deliberately one step below pure white, so hover and the current page have somewhere brighter to go. Still ~13:1 against the header, so readability doesn't suffer. Targets link, label span and any theme-set colour so nothing upstream can dim these to a low-contrast grey. */ .ra-header .ra-nav a, .ra-header .ra-nav .wp-block-navigation-item__content, .ra-header .ra-nav .wp-block-navigation-item__label { /* Warm white rather than pure — a touch of cream reads softer against the purple and stops the header feeling clinical. */ color: rgba(255, 252, 247, 0.89); opacity: 1; } .ra-nav .wp-block-navigation-item__content { position: relative; display: inline-flex; align-items: center; min-height: 44px; /* touch target, all breakpoints */ font-size: 1.03rem; /* ~16.5px */ font-weight: 500; letter-spacing: 0.01em; padding-block: 0.5rem; text-decoration: none; transition: color 180ms var(--ra-ease); } /* Underline slides in from the left. Shape change, not just colour. */ .ra-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; border-radius: 999px; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 180ms var(--ra-ease), background-color 180ms var(--ra-ease); } /* HOVER + KEYBOARD FOCUS — pure white, underline slides in */ .ra-header .ra-nav a:hover, .ra-header .ra-nav a:focus-visible, .ra-header .ra-nav .wp-block-navigation-item__content:hover, .ra-header .ra-nav .wp-block-navigation-item__content:focus-visible { color: #fff; } .ra-nav .wp-block-navigation-item__content:hover::after, .ra-nav .wp-block-navigation-item__content:focus-visible::after { transform: scaleX(1); } /* PRESSED — dims briefly so the click registers visually */ .ra-header .ra-nav a:active, .ra-header .ra-nav .wp-block-navigation-item__content:active { color: rgba(255, 255, 255, 0.72); } .ra-nav .wp-block-navigation-item__content:active::after { background: rgba(255, 255, 255, 0.72); } /* CURRENT PAGE — pure white, weight 700, permanent underline with a thin purple accent beneath it. Three separate cues (colour, weight, rule), so colour is never doing the work alone. aria-current comes from WordPress. */ .ra-header .ra-nav .current-menu-item > .wp-block-navigation-item__content, .ra-header .ra-nav [aria-current="page"] { color: #fff; font-weight: 700; } .ra-nav .current-menu-item > .wp-block-navigation-item__content::after, .ra-nav [aria-current="page"]::after { transform: scaleX(1); background: var(--ra-accent-rule); animation: ra-nav-underline 260ms var(--ra-ease) both; } @keyframes ra-nav-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* KEYBOARD FOCUS RING — distinct from hover, and never removed */ .ra-header .ra-nav a:focus-visible { outline: 3px solid var(--ra-focus-light); outline-offset: 4px; border-radius: 4px; } /* Donate appears as a button on desktop and as a menu item on mobile, so it is never duplicated and never crowds the mobile menu toggle. */ .ra-nav .ra-nav-donate-mobile { display: none; } /* Mobile overlay menu. Keeps core's accessible dialog markup. Core paints the open overlay white whenever the nav block carries no background of its own, and it does so from .wp-block-navigation:not(.has-background) .…is-menu-open:not(.…) which outweighs a plain .ra-nav rule. The result was warm-white links on a white sheet — the menu was opening and was simply invisible. Matching core's selector shape puts the purple back. */ /* Slide-in drawer rather than a full-screen sheet: the panel takes most of the width, the page stays visible and dimmed behind it. The fixed container becomes the scrim; core's inner .__responsive-close element becomes the panel. */ .ra-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open, .ra-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: rgba(16, 6, 34, 0.58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 0; align-items: flex-start; } .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { width: min(84vw, 380px); max-width: min(84vw, 380px); height: 100%; /* core centres this when a modal is open — pin it to the left instead */ margin: 0 auto 0 0; background: #4A1C8C; box-shadow: 10px 0 44px rgba(12, 4, 26, 0.42); overflow-y: auto; overscroll-behavior: contain; animation: ra-drawer-in 280ms var(--ra-ease) both; } @keyframes ra-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; padding-top: 4.25rem; /* clears the close button */ padding-bottom: 1.5rem; } /* Same reasoning for the contents — set explicitly so nothing inherits an unreadable colour from core's white default. Sizing goes on the link only; the label is an inline span and shouldn't carry box properties. */ .ra-nav .wp-block-navigation__responsive-container.is-menu-open a, .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { color: #fff; } /* Left-aligned rows with hairline dividers, the way a drawer reads. */ .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 58px; padding: 0.9rem 1.6rem; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.005em; } .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; align-items: stretch; } .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start; border-bottom: 1px solid rgba(255, 255, 255, 0.13); } .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; } /* Pressed feedback, since there is no hover on touch. */ .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active { background: rgba(255, 255, 255, 0.09); } /* The underline hover treatment is a desktop affordance — pointless on touch and it misaligns the centred items. */ .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { content: none; } /* Current page: a left accent bar reads better than an underline on a left-aligned drawer row. Weight carries it too, so not colour alone. */ .ra-nav .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--ra-accent-rule); background: rgba(255, 255, 255, 0.06); } .ra-nav .wp-block-navigation__responsive-container-open, .ra-nav .wp-block-navigation__responsive-container-close { color: #fff; min-width: 44px; min-height: 44px; } /* The close button sits on the purple sheet, not the header. */ .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; } /* --- Rainbow identity line --- */ .ra-rainbow-line { height: 2px; width: 100%; border: 0; margin: 0; padding: 0; background: var(--ra-rainbow); opacity: 0.78; filter: saturate(0.85); box-shadow: 0 0 10px rgba(139, 91, 199, 0.28); } /* ========================================================================== 4. HOMEPAGE HERO ========================================================================== */ .ra-home-hero.wp-block-cover { min-height: clamp(600px, 88vh, 880px); padding: 0; align-items: center; } .ra-home-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--ra-max); margin-inline: auto; padding: clamp(7rem, 12vw, 9rem) var(--ra-pad-x) clamp(5rem, 9vw, 7rem); } /* Slightly wider so the headline wraps at more natural break points. */ .ra-hero-copy { max-width: 660px; } .ra-home-hero .ra-eyebrow { color: rgba(255, 255, 255, 0.82); } .ra-home-hero .ra-h1 { color: #fff; } .ra-home-hero .ra-lead { color: rgba(255, 255, 255, 0.90); max-width: 34em; } /* "community" — softened rainbow gradient, resolving into the brand purple at the end so it ties back to the identity rather than reading as generic pride clip-art. Falls back to flat purple where background-clip:text is unsupported, and in forced-colours mode, so the word is never invisible. */ /* Full six-colour pride spectrum. Selector is deliberately specific so it beats the heading's own white colour rule. */ .ra-home-hero .ra-h1 .ra-accent, .ra-accent { display: inline-block; color: #C9A5FF; /* fallback if clipping unsupported */ background-image: linear-gradient(95deg, #E8484A 0%, /* red */ #F0863A 20%, /* orange */ #F2C744 38%, /* yellow */ #4FAE7B 56%, /* green */ #4F73D8 76%, /* blue */ #A054D8 100% /* violet */ ); -webkit-background-clip: text; background-clip: text; padding-bottom: 0.06em; /* stops "y" descender being clipped */ } /* Applied separately: if a browser can't clip the background to the text, this never runs and the word stays solid purple rather than invisible. */ @supports (-webkit-background-clip: text) { .ra-home-hero .ra-h1 .ra-accent, .ra-accent { -webkit-text-fill-color: transparent; } } /* Windows High Contrast strips background images — restore solid colour. */ @media (forced-colors: active) { .ra-home-hero .ra-h1 .ra-accent, .ra-accent { background-image: none; -webkit-text-fill-color: revert; color: revert; } } /* Trust line */ .ra-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; margin-top: 1.75rem; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; } .ra-trust-item { display: inline-flex; align-items: center; gap: 0.5rem; } .ra-trust-item svg { width: 17px; height: 17px; flex: none; opacity: 0.85; } /* Soft fade out of the hero, in place of the previous curve. The class name is historical — kept so the homepage markup needs no edit. The section is pulled up over the bottom of the hero and its background starts fully transparent, so the photograph shows through and dissolves into lavender. Two background layers: a fixed-height fade occupying the top strip, then the normal lavender gradient beginning below it — using percentages instead would stretch the fade across the whole section. */ .ra-curve-top { --ra-fade-h: clamp(90px, 10vw, 150px); position: relative; z-index: 2; margin-top: calc(-1 * var(--ra-fade-h)); padding-top: calc(var(--ra-section-y) + var(--ra-fade-h)); border-radius: 0; background: linear-gradient(180deg, rgba(246, 240, 255, 0) 0%, rgba(246, 240, 255, 0.18) 22%, rgba(246, 240, 255, 0.52) 48%, rgba(246, 240, 255, 0.85) 74%, var(--ra-lavender) 100%) top left / 100% var(--ra-fade-h) no-repeat, linear-gradient(180deg, var(--ra-lavender) 0%, var(--ra-lavender-lite) 100%) left var(--ra-fade-h) / 100% calc(100% - var(--ra-fade-h)) no-repeat; } /* Extra breathing room at the base of the hero so the trust line always clears the opaque end of the fade. */ body.home .ra-home-hero .wp-block-cover__inner-container { padding-bottom: clamp(7rem, 11vw, 10rem); } /* ========================================================================== 4b. INTERIOR PAGE HERO ========================================================================== */ /* Same treatment as the homepage hero but shorter, and without the big top padding — on interior pages the header is sticky rather than fixed, so it already occupies space above. */ .ra-page-hero.wp-block-cover { min-height: clamp(360px, 48vh, 500px); padding: 0; align-items: center; } .ra-page-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--ra-max); margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--ra-pad-x); } .ra-page-hero .ra-eyebrow { color: rgba(255, 255, 255, 0.84); } .ra-page-hero .ra-h1 { color: #fff; max-width: 20ch; } .ra-page-hero .ra-lead { color: rgba(255, 255, 255, 0.90); } /* Slightly smaller than the homepage H1 so the homepage keeps top billing. */ .ra-page-hero .ra-h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); } @media (max-width: 782px) { .ra-page-hero .wp-block-cover__background { background: linear-gradient( 180deg, rgba(21, 18, 28, 0.84) 0%, rgba(55, 16, 95, 0.66) 50%, rgba(21, 18, 28, 0.86) 100% ) !important; } } /* ========================================================================== 4c. PROSE ========================================================================== */ /* Readable measure for running text. 68ch keeps lines in the 60–75 character range that reads most comfortably. */ .ra-prose { max-width: 68ch; margin-inline: auto; } .ra-prose h2 { margin: 0 0 1rem; } .ra-prose p { font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.78; margin: 0 0 1.15rem; } .ra-prose p:last-child { margin-bottom: 0; } /* Closing emphasis line — heavier and darker than surrounding body copy. */ .ra-prose .ra-emphasis { color: var(--ra-heading); font-weight: 600; } .ra-note { text-align: center; color: var(--ra-neutral, #6E7787); font-size: 0.95rem; font-style: italic; margin: 0; } /* ========================================================================== 5. SECTION: WE ARE HERE FOR YOU ========================================================================== */ .ra-section-head { text-align: center; max-width: 720px; margin-inline: auto; } .ra-section-head .ra-lead { margin-inline: auto; max-width: 60ch; } .ra-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } .ra-card { position: relative; background: var(--ra-white); border: 1px solid var(--ra-border); border-radius: var(--ra-radius-card); box-shadow: var(--ra-shadow-sm); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: flex-start; text-align: left; /* fallback if no hue modifier is present */ --ra-hue: var(--ra-purple); --ra-hue-soft: rgba(112, 39, 217, 0.10); } /* One hue per card, drawn from the same spectrum as the Impact stats so the colour reads as a system rather than decoration. Applied only to the icon and a faint corner wash — the card itself stays white. */ .ra-card--violet { --ra-hue: #6D28D9; --ra-hue-soft: rgba(109, 40, 217, 0.10); } .ra-card--rose { --ra-hue: #BE185D; --ra-hue-soft: rgba(190, 24, 93, 0.10); } .ra-card--teal { --ra-hue: #0F766E; --ra-hue-soft: rgba(15, 118, 110, 0.10); } .ra-card--amber { --ra-hue: #B45309; --ra-hue-soft: rgba(180, 83, 9, 0.10); } .ra-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(115% 85% at 100% 0%, var(--ra-hue-soft) 0%, transparent 60%); } .ra-card > * { position: relative; z-index: 1; } .ra-card-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ra-hue-soft); color: var(--ra-hue); display: grid; place-items: center; margin-bottom: 1.25rem; } .ra-card-icon svg { width: 26px; height: 26px; } .ra-card h3 { margin: 0 0 0.55rem; } .ra-card p { margin: 0; font-size: 0.97rem; line-height: 1.65; } @media (hover: hover) and (pointer: fine) { .ra-card { transition: transform 200ms var(--ra-ease), box-shadow 200ms var(--ra-ease); } .ra-card:hover { transform: translateY(-4px); box-shadow: var(--ra-shadow-md); } } /* ========================================================================== 6. SECTION: SUPPORT SPLIT PANEL ========================================================================== */ .ra-split-panel { display: grid; grid-template-columns: 47% 53%; align-items: stretch; border-radius: var(--ra-radius-panel); overflow: hidden; box-shadow: var(--ra-shadow-md); border: 1px solid var(--ra-border); background: var(--ra-white); } .ra-split-text { background: linear-gradient(160deg, var(--ra-lavender) 0%, var(--ra-lavender-lite) 100%); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; } .ra-split-text h3 { margin: 0 0 0.75rem; } .ra-split-text .ra-lead { margin-bottom: 1.75rem; } .ra-split-media { position: relative; min-height: 300px; } .ra-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } /* ========================================================================== 7. SECTION: STORIES ========================================================================== */ .ra-stories-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .ra-stories-head h2 { margin: 0; } .ra-link-arrow { color: var(--ra-purple); font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap; padding: 0.5rem 0; display: inline-block; } .ra-link-arrow:hover { color: var(--ra-purple-hover); text-decoration: underline; } /* Query Loop grid. Each post-template item is the card. auto-fit rather than a fixed 3, so two published stories fill the row instead of leaving an empty third column. */ .ra-stories-grid.wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); padding: 0; list-style: none; } .ra-stories-grid > .wp-block-post { background: var(--ra-white); border: 1px solid var(--ra-border); border-radius: var(--ra-radius-card); box-shadow: var(--ra-shadow-sm); overflow: hidden; display: flex; flex-direction: column; margin: 0; } .ra-story-media { margin: 0; overflow: hidden; line-height: 0; } .ra-story-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 320ms var(--ra-ease); } .ra-story-body { padding: 1.35rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .ra-story-pill { margin: 0; } .ra-story-pill a { display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--ra-radius-pill); background: var(--ra-lavender); color: var(--ra-purple-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } .ra-story-pill a:hover { background: #EDE2FF; } .ra-story-title { margin: 0; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; } .ra-story-title a { color: var(--ra-heading); text-decoration: none; } .ra-story-title a:hover { color: var(--ra-purple); } .ra-story-excerpt { margin: 0; font-size: 0.94rem; line-height: 1.6; } .ra-story-excerpt p { margin: 0; } .ra-story-read { margin-top: auto; padding-top: 0.4rem; } .ra-story-read a { color: var(--ra-purple); font-weight: 600; font-size: 0.9rem; text-decoration: none; } .ra-story-read a:hover { text-decoration: underline; } @media (hover: hover) and (pointer: fine) { .ra-stories-grid > .wp-block-post { transition: transform 200ms var(--ra-ease), box-shadow 200ms var(--ra-ease); } .ra-stories-grid > .wp-block-post:hover { transform: translateY(-4px); box-shadow: var(--ra-shadow-md); } .ra-stories-grid > .wp-block-post:hover .ra-story-media img { transform: scale(1.03); } } /* ========================================================================== 8. SECTION: JOIN US + DONATE ========================================================================== */ .ra-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); } .ra-promo { display: grid; grid-template-columns: 1fr; border-radius: var(--ra-radius-panel); overflow: hidden; border: 1px solid var(--ra-border); box-shadow: var(--ra-shadow-sm); } .ra-promo--lavender { background: var(--ra-lavender); } .ra-promo--cream { background: var(--ra-cream); } .ra-promo--cream .ra-eyebrow { color: #8A5A12; } .ra-promo-text { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; } .ra-promo-text h3 { margin: 0 0 0.6rem; } .ra-promo-text .ra-lead { font-size: 1rem; margin-bottom: 1.6rem; } .ra-promo-media { line-height: 0; } .ra-promo-media img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; object-position: 50% 40%; } /* Side-by-side text/image inside each promo on wide screens. Text gets the larger share — at 50% of the container each, a narrower column wrapped the copy to six lines. */ @media (min-width: 1000px) { .ra-promo { grid-template-columns: 1.35fr 0.65fr; align-items: stretch; } } /* ========================================================================== 8b. SECTION: OUR IMPACT ========================================================================== */ .ra-impact { display: grid; grid-template-columns: 0.9fr 1.35fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .ra-impact-intro h2 { margin: 0 0 0.9rem; } .ra-impact-intro .ra-lead { margin: 0; } /* The numbers previously floated in open white. Giving them a tinted panel anchors them, cuts the perceived emptiness, and reuses the card language already established elsewhere on the page. */ .ra-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(30px, 3.6vw, 46px) clamp(18px, 2.2vw, 30px); border: 1px solid var(--ra-border); border-radius: var(--ra-radius-panel); box-shadow: var(--ra-shadow-sm); background: radial-gradient(90% 120% at 100% 0%, rgba(255, 246, 229, 0.75) 0%, transparent 58%), linear-gradient(140deg, #F4EDFF 0%, #FBF8FF 62%, #FFFFFF 100%); } /* Hairline dividers between stats, drawn with a border rather than an extra element so there is nothing to mis-align. */ .ra-stat { text-align: center; padding-inline: clamp(0.5rem, 1.4vw, 1.1rem); border-left: 1px solid var(--ra-border); } .ra-stat:first-child { border-left: 0; } .ra-stat-icon { width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; background: color-mix(in srgb, currentColor 8%, transparent); } .ra-stat-icon svg { width: 26px; height: 26px; } .ra-stat-value { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.35rem; } .ra-stat-label { font-size: 0.94rem; line-height: 1.4; color: var(--ra-body); margin: 0; } /* Each stat takes one hue from the identity spectrum, darkened for legible contrast on a light background. currentColor drives both ring and number. */ .ra-stat--violet { color: #6D28D9; } .ra-stat--rose { color: #BE185D; } .ra-stat--teal { color: #0F766E; } .ra-stat--amber { color: #B45309; } @media (max-width: 1000px) { .ra-impact { grid-template-columns: 1fr; } } @media (max-width: 700px) { .ra-stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; } .ra-stat:nth-child(odd) { border-left: 0; } } /* ========================================================================== 8c. SECTION: COMMUNITY CALL TO ACTION ========================================================================== */ .ra-cta-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(24px, 2.4vw, 30px); padding: clamp(36px, 5.5vw, 68px); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; /* Deep violet → royal purple → magenta. Held dark across the left half so the headline and copy always sit on high contrast. */ background: linear-gradient(112deg, #24083F 0%, #300C58 24%, #4C1D95 46%, #7E22CE 70%, #A21CAF 88%, #BE3A94 100%); background-size: 190% 190%; animation: ra-cta-drift 24s ease-in-out infinite alternate; } @keyframes ra-cta-drift { from { background-position: 12% 50%; } to { background-position: 88% 50%; } } /* Warm rainbow light bleeding in from the right. Screen blend keeps it as light rather than paint, so it reads as a glow, not a stripe. */ .ra-cta-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(88% 118% at 106% 46%, rgba(255, 178, 88, 0.50) 0%, rgba(255, 116, 132, 0.32) 21%, rgba(196, 96, 232, 0.20) 42%, rgba(96, 152, 240, 0.10) 60%, transparent 76%); animation: ra-cta-glow 18s ease-in-out infinite alternate; } @keyframes ra-cta-glow { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; } to { transform: translate3d(-2%, -1.5%, 0) scale(1.06); opacity: 1; } } /* Two faint curved lines plus a fine grain. Both are CSS — no image requests, nothing to lazy-load, no layout cost. */ .ra-cta-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; background-image: radial-gradient(128% 96% at 86% 52%, transparent 57.6%, rgba(255,255,255,0.075) 58%, transparent 58.5%), radial-gradient(142% 108% at 94% 58%, transparent 61.6%, rgba(255,255,255,0.05) 62%, transparent 62.6%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size: auto, auto, 140px 140px; } .ra-cta-icon { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.6rem; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.10); /* subtle glass highlight */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .ra-cta-icon svg { width: 36px; height: 36px; } .ra-cta-panel h2 { color: #fff; margin: 0 0 0.85rem; max-width: 15ch; } .ra-cta-panel .ra-lead { color: rgba(255, 255, 255, 0.90); margin: 0; max-width: 44ch; } .ra-cta-actions { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; } /* Existing button component, recoloured for a dark panel — same shape, sizing and transitions as everywhere else on the site. */ .ra-cta-panel .ra-btn--primary { background: #fff; border-color: #fff; color: #2A0A4E; box-shadow: 0 6px 22px rgba(18, 5, 38, 0.30); } .ra-cta-panel .ra-btn--primary:hover { background: #F6EEFF; border-color: #F6EEFF; box-shadow: 0 10px 30px rgba(18, 5, 38, 0.40); } .ra-cta-panel .ra-btn--secondary { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.66); color: #fff; } .ra-cta-panel .ra-btn--secondary:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; } .ra-cta-panel .ra-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (max-width: 900px) { .ra-cta-panel { grid-template-columns: 1fr; /* right column becomes full-width buttons beneath the copy */ } .ra-cta-panel h2 { max-width: 100%; } .ra-cta-actions .ra-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ra-cta-panel, .ra-cta-panel::before { animation: none; } } /* ========================================================================== 9. BUTTONS ========================================================================== */ /* Scoped to a/button deliberately. Gutenberg buttons are a wrapper
containing the real , and both carry the ra-btn classes — a bare .ra-btn selector therefore painted a pill on the wrapper AND the link, producing a visible button-inside-a-button. */ a.ra-btn, button.ra-btn, .wp-block-button.ra-btn > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.85rem 1.7rem; border-radius: var(--ra-radius-pill); font-size: 0.98rem; font-weight: 600; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 170ms var(--ra-ease), background-color 170ms var(--ra-ease), box-shadow 170ms var(--ra-ease), border-color 170ms var(--ra-ease); } /* Primary */ a.ra-btn--primary, button.ra-btn--primary, .wp-block-button.ra-btn--primary > .wp-block-button__link { background: var(--ra-purple); border-color: var(--ra-purple); color: #fff; box-shadow: 0 2px 8px rgba(55, 16, 95, 0.20); } a.ra-btn--primary:hover, button.ra-btn--primary:hover, .wp-block-button.ra-btn--primary > .wp-block-button__link:hover { background: var(--ra-purple-hover); border-color: var(--ra-purple-hover); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(55, 16, 95, 0.28); } a.ra-btn--primary:active, button.ra-btn--primary:active, .wp-block-button.ra-btn--primary > .wp-block-button__link:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(55, 16, 95, 0.20); } /* Secondary — outlined. On the hero it sits on dark, elsewhere on light. */ a.ra-btn--secondary, button.ra-btn--secondary, .wp-block-button.ra-btn--secondary > .wp-block-button__link { background: transparent; border-color: var(--ra-purple-dark); color: var(--ra-purple-dark); } a.ra-btn--secondary:hover, button.ra-btn--secondary:hover, .wp-block-button.ra-btn--secondary > .wp-block-button__link:hover { background: rgba(112, 39, 217, 0.06); transform: translateY(-2px); } a.ra-btn--secondary:active, button.ra-btn--secondary:active, .wp-block-button.ra-btn--secondary > .wp-block-button__link:active { transform: translateY(0); } .ra-home-hero a.ra-btn--secondary, .ra-home-hero .wp-block-button.ra-btn--secondary > .wp-block-button__link { border-color: rgba(255, 255, 255, 0.72); color: #fff; } .ra-home-hero a.ra-btn--secondary:hover, .ra-home-hero .wp-block-button.ra-btn--secondary > .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } /* Header donate button — must stay the strongest thing in the header. It is the only filled element among text links, sits at weight 700, and carries a purple glow that lifts it off the bar. Colour and shadow only: no movement, no scaling. */ .ra-btn--donate > .wp-block-button__link { background: linear-gradient(135deg, #7F32E4 0%, #6A22CE 100%); color: #fff; border-radius: var(--ra-radius-pill); padding: 0 1.95rem; min-height: 49px; font-size: 0.97rem; font-weight: 700; letter-spacing: 0.01em; display: inline-flex; align-items: center; /* Softer and wider than before — reads as lift rather than a hard edge. */ box-shadow: 0 6px 22px rgba(112, 39, 217, 0.38); transition: background 200ms var(--ra-ease), box-shadow 200ms var(--ra-ease); } .ra-btn--donate > .wp-block-button__link:hover { background: linear-gradient(135deg, #8F44F2 0%, #7A2FDD 100%); box-shadow: 0 8px 28px rgba(139, 61, 240, 0.52); } .ra-btn--donate > .wp-block-button__link:active { background: linear-gradient(135deg, #6A22CE 0%, #5A1BB0 100%); box-shadow: 0 3px 12px rgba(112, 39, 217, 0.40); } .ra-btn--donate > .wp-block-button__link:focus-visible { outline: 3px solid var(--ra-focus-light); outline-offset: 3px; } .ra-btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; } /* ========================================================================== 10. FOCUS STATES (never colour-only, always a visible ring) ========================================================================== */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, .ra-btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ra-focus); outline-offset: 3px; border-radius: 6px; } /* Light ring where the background is dark */ .ra-home-hero a:focus-visible, .ra-home-hero button:focus-visible, .ra-home-hero .wp-block-button__link:focus-visible, .ra-header a:focus-visible, .ra-header button:focus-visible, .ra-footer a:focus-visible, .ra-footer button:focus-visible { outline-color: var(--ra-focus-light); } /* ========================================================================== 11. SCROLL REVEAL ========================================================================== */ /* Only hide reveal elements once JS has confirmed it is running, so a script failure can never leave content permanently invisible. */ .ra-js .ra-reveal { opacity: 0; transform: translateY(18px); } .ra-js .ra-reveal.ra-is-visible { opacity: 1; transform: none; transition: opacity 580ms var(--ra-ease), transform 580ms var(--ra-ease); transition-delay: var(--ra-delay, 0ms); } /* Hero entrance — runs once on load, staggered. */ .ra-hero-anim > * { opacity: 0; transform: translateY(16px); animation: ra-rise 640ms var(--ra-ease) forwards; } .ra-hero-anim > *:nth-child(1) { animation-delay: 60ms; } .ra-hero-anim > *:nth-child(2) { animation-delay: 170ms; } .ra-hero-anim > *:nth-child(3) { animation-delay: 280ms; } .ra-hero-anim > *:nth-child(4) { animation-delay: 390ms; } .ra-hero-anim > *:nth-child(5) { animation-delay: 500ms; } .ra-hero-anim > *:nth-child(6) { animation-delay: 610ms; } /* The WorldPride card sits among these children but runs its own entrance, so it must not inherit the shared rise. */ .ra-hero-anim > .ra-worldpride { animation: ra-wp-in 600ms cubic-bezier(.16,.84,.44,1) both, ra-wp-float 9s ease-in-out 800ms infinite; } @keyframes ra-rise { to { opacity: 1; transform: none; } } /* Very subtle settle on the hero photo. No large zoom. */ .ra-home-hero .wp-block-cover__image-background { animation: ra-settle 1100ms var(--ra-ease) forwards; } @keyframes ra-settle { from { transform: scale(1.02); } to { transform: scale(1); } } /* ========================================================================== 12. BACK TO TOP ========================================================================== */ .ra-scroll-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: var(--ra-purple); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--ra-shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 240ms var(--ra-ease), transform 240ms var(--ra-ease), visibility 240ms var(--ra-ease), background-color 170ms var(--ra-ease); } .ra-scroll-top.ra-is-visible { opacity: 1; visibility: visible; transform: none; } .ra-scroll-top:hover { background: var(--ra-purple-hover); } .ra-scroll-top svg { width: 19px; height: 19px; } /* Keep clear of the cookie re-consent control, which sits bottom-right. */ @media (max-width: 600px) { .ra-scroll-top { bottom: calc(78px + env(safe-area-inset-bottom)); } } /* ========================================================================== 13. FOOTER ========================================================================== */ .ra-footer { background: var(--ra-purple-dark); color: #D9CDEA; } .ra-footer-inner { max-width: var(--ra-max); margin-inline: auto; padding: clamp(48px, 7vw, 76px) var(--ra-pad-x) clamp(28px, 4vw, 40px); } .ra-footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: clamp(1.75rem, 4vw, 3rem); } .ra-footer .ra-logo img { height: 42px; } .ra-footer h2, .ra-footer h3, .ra-footer h4 { color: #fff; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 1rem; } .ra-footer p { color: #C4B6D9; font-size: 0.93rem; line-height: 1.65; } .ra-footer-links a { display: block; color: #C4B6D9; font-size: 0.93rem; text-decoration: none; padding: 0.32rem 0; min-height: 32px; } .ra-footer-links a:hover { color: #fff; text-decoration: underline; } .ra-footer-contact { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.7rem; color: #C4B6D9; font-size: 0.93rem; } .ra-footer-contact a { color: #C4B6D9; text-decoration: none; } .ra-footer-contact a:hover { color: #fff; text-decoration: underline; } .ra-footer-contact svg { width: 17px; height: 17px; flex: none; opacity: 0.8; } .ra-footer-social { display: flex; gap: 0.65rem; margin-top: 1.25rem; } .ra-footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #D9CDEA; transition: background-color 170ms var(--ra-ease), color 170ms var(--ra-ease); } .ra-footer-social a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } .ra-footer-social svg { width: 18px; height: 18px; } .ra-footer-bottom { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: center; } .ra-footer-bottom p { margin: 0; font-size: 0.85rem; color: #A796BF; } /* ========================================================================== 14. RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { .ra-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .ra-card-grid, .ra-stories-grid.wp-block-post-template, .ra-promo-grid { grid-template-columns: 1fr; } .ra-split-panel { grid-template-columns: 1fr; } .ra-split-media { min-height: 260px; } .ra-split-panel .ra-split-text { order: 1; } .ra-split-panel .ra-split-media { order: 2; } } @media (max-width: 782px) { /* Vertical overlay so the people in the hero photo stay visible. */ .ra-home-hero .wp-block-cover__background { background: linear-gradient( 180deg, rgba(21, 18, 28, 0.86) 0%, rgba(55, 16, 95, 0.62) 42%, rgba(55, 16, 95, 0.52) 68%, rgba(21, 18, 28, 0.88) 100% ) !important; /* overrides the Cover block's inline desktop gradient */ } .ra-home-hero.wp-block-cover { min-height: 640px; } .ra-home-hero .wp-block-cover__image-background { object-position: 62% 42% !important; } /* Shorter fade on phones — the hero is only 640px tall here. */ .ra-curve-top { --ra-fade-h: clamp(56px, 14vw, 90px); } .ra-btn-row { gap: 0.7rem; } .ra-btn-row .wp-block-button { flex: 1 1 100%; } .ra-btn-row .wp-block-button__link { width: 100%; } .ra-stories-head { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .ra-footer-grid { grid-template-columns: 1fr; } .ra-logo img { height: 38px; } .ra-header-inner { padding-inline: 20px; } /* Donate stays in the mobile menu, not beside the toggle. */ .ra-header .ra-header-cta { display: none; } .ra-nav .wp-block-navigation__responsive-container.is-menu-open .ra-nav-donate-mobile { display: block; } } /* ========================================================================== 15. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* the drawer appears instantly rather than sliding */ .ra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .ra-js .ra-reveal, .ra-reveal, .ra-hero-anim > * { opacity: 1 !important; transform: none !important; } .ra-card:hover, .ra-stories-grid > .wp-block-post:hover { transform: none; } .ra-stories-grid > .wp-block-post:hover .ra-story-media img { transform: none; } } /* ========================================================================== 17. ABOUT PAGE ========================================================================== */ /* --- Hero ------------------------------------------------------------- */ .ra-about-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(7rem, 11vw, 10rem); background: radial-gradient(60% 55% at 12% 8%, rgba(160, 108, 255, 0.20) 0%, transparent 62%), radial-gradient(55% 50% at 88% 22%, rgba(214, 168, 255, 0.24) 0%, transparent 60%), radial-gradient(70% 60% at 50% 100%, rgba(246, 240, 255, 0.95) 0%, transparent 70%), linear-gradient(170deg, #FDFBFF 0%, #F7F1FF 55%, #F2E9FF 100%); } /* Slow-drifting blurred glow. transform-only, so it stays off the main thread and costs nothing in layout. */ .ra-about-hero::before { content: ""; position: absolute; z-index: -1; top: -22%; right: -12%; width: 58vw; height: 58vw; max-width: 780px; max-height: 780px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(150, 92, 255, 0.20) 0%, rgba(150, 92, 255, 0) 68%); filter: blur(18px); animation: ra-glow-drift 26s ease-in-out infinite alternate; } @keyframes ra-glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 5%, 0) scale(1.12); } } .ra-about-hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; } .ra-about-hero-copy .ra-h1 { margin: 0 0 1.4rem; max-width: 13ch; } /* "journey" keeps the same pride gradient as the homepage headline. */ .ra-about-hero-copy p { max-width: 46ch; } .ra-about-hero-copy p + p { margin-top: 0.9rem; } /* Photograph blends out into the lavender rather than sitting in a hard box — a soft mask on the lower-left edge does the work. */ .ra-about-hero-media { position: relative; border-radius: clamp(20px, 2.2vw, 28px); overflow: hidden; box-shadow: 0 30px 70px rgba(55, 16, 95, 0.18); } .ra-about-hero-media img { display: block; width: 100%; height: 100%; min-height: clamp(300px, 42vw, 470px); object-fit: cover; object-position: 58% 45%; animation: ra-img-settle 1400ms var(--ra-ease) both; } @keyframes ra-img-settle { from { transform: scale(1.05); } to { transform: scale(1); } } /* Trust row on a light background — the hero variant is white-on-dark. */ .ra-trust-light { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2.25rem; margin-top: clamp(2rem, 4vw, 3rem); color: var(--ra-body); font-size: 0.94rem; } .ra-trust-light span { display: inline-flex; align-items: center; gap: 0.55rem; } .ra-trust-light svg { width: 18px; height: 18px; flex: none; color: var(--ra-purple); } /* Layered waves out of the hero. Three paths at different opacities give depth without the single-arc problem a border-radius has. */ .ra-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 9vw, 130px); z-index: -1; display: block; pointer-events: none; } .ra-scroll-cue { display: grid; place-items: center; width: 44px; height: 44px; margin: clamp(1.75rem, 3vw, 2.75rem) auto 0; border-radius: 50%; background: #fff; color: var(--ra-purple); border: 1px solid var(--ra-border); box-shadow: var(--ra-shadow-sm); transition: transform 200ms var(--ra-ease), box-shadow 200ms var(--ra-ease); } .ra-scroll-cue svg { width: 18px; height: 18px; animation: ra-cue 2.4s ease-in-out infinite; } .ra-scroll-cue:hover { box-shadow: var(--ra-shadow-md); } @keyframes ra-cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } /* --- Our story -------------------------------------------------------- */ /* Three columns inside 1180px is tight, so the photo gives ground to the copy — otherwise the quote card squeezes to five short lines. */ .ra-story-grid { display: grid; grid-template-columns: 0.86fr 1.4fr; gap: clamp(1.75rem, 3.2vw, 3rem); align-items: center; } .ra-story-media { border-radius: var(--ra-radius-panel); overflow: hidden; box-shadow: var(--ra-shadow-md); } .ra-story-media img { display: block; width: 100%; height: 100%; min-height: clamp(260px, 30vw, 380px); object-fit: cover; transition: transform 600ms var(--ra-ease); } @media (hover: hover) { .ra-story-media:hover img { transform: scale(1.03); } } .ra-story-copy { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.5rem, 2.5vw, 2.25rem); align-items: start; } .ra-story-text h2 { margin: 0 0 1rem; } .ra-story-text p { font-size: 1rem; line-height: 1.72; margin: 0 0 0.85rem; } .ra-story-text p:last-child { margin-bottom: 0; } .ra-story-text .ra-emphasis { color: var(--ra-purple); font-weight: 600; } .ra-quote-card { background: linear-gradient(160deg, #F4ECFF 0%, #FBF8FF 100%); border: 1px solid var(--ra-border); border-radius: var(--ra-radius-card); padding: clamp(20px, 2.4vw, 30px); position: relative; } .ra-quote-card::before { content: "\201C"; display: block; font-size: 3.2rem; line-height: 0.7; color: var(--ra-purple); opacity: 0.35; margin-bottom: 0.4rem; } .ra-quote-card p { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; color: var(--ra-purple-dark); } /* --- Mission (4 cards) ------------------------------------------------ */ .ra-card-grid--4 { grid-template-columns: repeat(4, 1fr); } /* Purple border on hover, as specified — layered over the existing lift. */ @media (hover: hover) and (pointer: fine) { .ra-card { transition: transform 200ms var(--ra-ease), box-shadow 200ms var(--ra-ease), border-color 200ms var(--ra-ease); } .ra-card:hover { border-color: rgba(112, 39, 217, 0.38); } } .ra-card--centre { align-items: center; text-align: center; } .ra-card--centre .ra-card-icon { margin-inline: auto; } /* --- Values (5 across) ------------------------------------------------ */ .ra-values-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.75rem, 1.6vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); } .ra-value { text-align: center; padding: 0 clamp(0.4rem, 1.2vw, 1rem); border-left: 1px solid var(--ra-border); } .ra-value:first-child { border-left: 0; } .ra-value-icon { width: 54px; height: 54px; margin: 0 auto 0.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--ra-lavender); color: var(--ra-purple); } .ra-value-icon svg { width: 24px; height: 24px; } .ra-value h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.4rem; letter-spacing: -0.005em; } .ra-value p { font-size: 0.9rem; line-height: 1.55; margin: 0; } /* --- How support works ------------------------------------------------ */ /* This is an
    for semantics — the steps are genuinely ordered — so the browser's own markers and 40px indent have to be cleared. Left in, they printed a second set of numbers next to the badges AND pushed the grid wider than its container, overflowing the whole page sideways. */ .ra-journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; } .ra-journey > li { list-style: none; } .ra-journey > li::marker { content: none; } /* The connecting rule sits behind the milestones and draws itself in when the section is revealed — CSS transition driven by the existing IntersectionObserver, so no extra JavaScript. */ .ra-journey::before { content: ""; position: absolute; top: 34px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #C9A5FF 0%, var(--ra-purple) 50%, #C9A5FF 100%); transform: scaleX(0); transform-origin: left center; transition: transform 1200ms var(--ra-ease) 180ms; } .ra-journey.ra-is-visible::before { transform: scaleX(1); } .ra-journey-step { text-align: center; position: relative; } .ra-journey-badge { position: relative; width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8B3DF0 0%, #6A22CE 100%); box-shadow: 0 8px 22px rgba(112, 39, 217, 0.34); } .ra-journey-badge svg { width: 27px; height: 27px; } .ra-journey-num { position: absolute; right: -2px; bottom: -2px; width: 23px; height: 23px; border-radius: 50%; background: #fff; color: var(--ra-purple-dark); border: 1px solid var(--ra-border); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; } .ra-journey-step h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.45rem; } .ra-journey-step p { font-size: 0.92rem; line-height: 1.55; margin: 0; } /* --- Impact quote banner ---------------------------------------------- */ .ra-quote-banner { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ra-radius-panel); padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 84px); text-align: center; color: #fff; } .ra-quote-banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } .ra-quote-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 50% 50%, rgba(76, 29, 149, 0.62) 0%, rgba(36, 8, 63, 0.88) 70%), linear-gradient(100deg, rgba(24, 8, 46, 0.86) 0%, rgba(60, 20, 110, 0.72) 100%); } .ra-quote-banner blockquote { margin: 0; font-size: clamp(1.35rem, 3vw, 2.35rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.02em; max-width: 24ch; margin-inline: auto; } .ra-quote-banner .ra-quote-accent { background: linear-gradient(95deg, #FFB86B 0%, #FF8FB0 40%, #C9A5FF 100%); -webkit-background-clip: text; background-clip: text; font-style: italic; } @supports (-webkit-background-clip: text) { .ra-quote-banner .ra-quote-accent { -webkit-text-fill-color: transparent; } } /* Oversized decorative marks, hidden from assistive tech. */ .ra-quote-mark { position: absolute; font-size: clamp(5rem, 10vw, 9rem); line-height: 1; color: #fff; opacity: 0.16; pointer-events: none; } .ra-quote-mark--open { top: clamp(10px, 2vw, 26px); left: clamp(14px, 3vw, 46px); } .ra-quote-mark--close { bottom: clamp(-14px, -1vw, 0px); right: clamp(14px, 3vw, 46px); } /* --- Final CTA -------------------------------------------------------- */ .ra-belong { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; border-radius: var(--ra-radius-panel); overflow: hidden; border: 1px solid var(--ra-border); box-shadow: var(--ra-shadow-md); background: radial-gradient(70% 90% at 8% 20%, rgba(168, 116, 255, 0.20) 0%, transparent 62%), linear-gradient(120deg, #F3EAFF 0%, #FAF6FF 58%, #F6EFFF 100%); background-size: 160% 160%; animation: ra-belong-drift 22s ease-in-out infinite alternate; } @keyframes ra-belong-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } .ra-belong-copy { padding: clamp(30px, 4.5vw, 60px); display: flex; flex-direction: column; justify-content: center; } .ra-belong-copy h2 { margin: 0 0 0.8rem; } .ra-belong-copy .ra-lead { margin: 0 0 1.8rem; } .ra-belong-media { line-height: 0; } .ra-belong-media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: 55% 50%; } /* Arrow nudges forward on hover — the only motion on these buttons. */ .ra-arrow { transition: transform 200ms var(--ra-ease); } a:hover > .ra-arrow { transform: translateX(3px); } /* --- Image edge fades -------------------------------------------------- */ /* Photographs dissolve into the page on the edge facing their text, instead of stopping at a hard rounded border. Done with a mask rather than an overlay gradient: the hero sits on an animated mesh and the CTA on a drifting gradient, so an overlay would have to match a moving background. A mask removes the pixels instead, letting whatever is actually behind show through — correct at any background. Shadows come off these three: a box-shadow follows the element's box, not the masked shape, so it would draw a hard edge exactly where the image is meant to disappear. */ .ra-about-hero-media, .ra-story-media, .ra-belong-media { box-shadow: none; } /* The hero photograph is bright and sits on lavender, so a short ramp dissolves it invisibly. Left as it is — it works. */ .ra-about-hero-media { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 9%, #000 24%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 9%, #000 24%); } /* These two are darker images meeting near-white backgrounds, so a linear ramp over a quarter of the width leaves a visible grey band with an edge where it stops. A longer, eased falloff spreads that transition far enough that the eye can't find the end of it. Extra stops matter: a two-stop gradient interpolates linearly and bands on dark imagery. */ .ra-belong-media { border-start-start-radius: 0; border-end-start-radius: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.03) 9%, rgba(0,0,0,0.10) 17%, rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.38) 32%, rgba(0,0,0,0.55) 39%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.86) 51%, rgba(0,0,0,0.95) 57%, #000 64%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.03) 9%, rgba(0,0,0,0.10) 17%, rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.38) 32%, rgba(0,0,0,0.55) 39%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.86) 51%, rgba(0,0,0,0.95) 57%, #000 64%); } .ra-story-media { border-start-end-radius: 0; border-end-end-radius: 0; -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.03) 9%, rgba(0,0,0,0.10) 17%, rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.38) 32%, rgba(0,0,0,0.55) 39%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.86) 51%, rgba(0,0,0,0.95) 57%, #000 64%); mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.03) 9%, rgba(0,0,0,0.10) 17%, rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.38) 32%, rgba(0,0,0,0.55) 39%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.86) 51%, rgba(0,0,0,0.95) 57%, #000 64%); } /* Stacked on smaller screens, so the text is below rather than beside — the fade moves to the bottom edge to match. */ @media (max-width: 1000px) { .ra-about-hero-media, .ra-story-media, .ra-belong-media { -webkit-mask-image: linear-gradient(to bottom, #000 68%, rgba(0,0,0,0.45) 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 68%, rgba(0,0,0,0.45) 88%, transparent 100%); } } /* --- About responsive ------------------------------------------------- */ @media (max-width: 1000px) { .ra-about-hero-grid, .ra-story-grid, .ra-story-copy, .ra-belong { grid-template-columns: 1fr; } .ra-card-grid--4 { grid-template-columns: repeat(2, 1fr); } .ra-values-row { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } .ra-value:nth-child(3n+1) { border-left: 0; } .ra-journey { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; } .ra-journey::before { display: none; } .ra-about-hero-copy .ra-h1 { max-width: 100%; } } @media (max-width: 640px) { .ra-card-grid--4 { grid-template-columns: 1fr; } .ra-values-row { grid-template-columns: repeat(2, 1fr); } .ra-value:nth-child(n) { border-left: 0; } .ra-journey { grid-template-columns: 1fr; } .ra-belong-copy .ra-btn-row .ra-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ra-about-hero::before, .ra-belong, .ra-scroll-cue svg, .ra-about-hero-media img { animation: none; } .ra-journey::before { transition: none; transform: scaleX(1); } } /* ========================================================================== 18. WORLDPRIDE AMSTERDAM 2026 — temporary, self-removing after 8 Aug 2026 ========================================================================== */ /* Two nested elements on purpose: the outer carries the entrance and the slow float, the inner carries the hover lift. Both would otherwise animate `transform` on the same element, where the running animation always wins and the hover would simply never appear. */ .ra-worldpride { position: relative; z-index: 3; width: 100%; margin: 1.6rem 0 0; animation: ra-wp-in 600ms cubic-bezier(.16,.84,.44,1) both, ra-wp-float 9s ease-in-out 800ms infinite; } .ra-worldpride[hidden] { display: none; } @keyframes ra-wp-in { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes ra-wp-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -3px, 0); } } /* Ambient glow, sitting behind the card to lift it off the photograph. Deliberately weaker than the card's own shadow so the eye lands on the card first and never resolves the glow as a separate object. */ .ra-worldpride::before { content: ""; position: absolute; inset: -20px -16px -26px; z-index: -1; border-radius: 40px; pointer-events: none; background: radial-gradient(58% 58% at 50% 46%, rgba(150, 92, 255, 0.38) 0%, rgba(150, 92, 255, 0.13) 46%, transparent 72%); filter: blur(18px); } .ra-wp-card { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 23px); /* Light glass. Translucent white over the photograph reads far more expensive than a dark tint, and it lets the brand purple carry the hierarchy instead of everything being white-on-dark. */ background: linear-gradient(160deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 42%), rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 26px 62px rgba(48, 14, 104, 0.30), 0 4px 14px rgba(48, 14, 104, 0.10); color: var(--ra-body); transition: transform 250ms var(--ra-ease), box-shadow 250ms var(--ra-ease); } @media (hover: hover) and (pointer: fine) { .ra-worldpride:hover .ra-wp-card, .ra-worldpride:focus-within .ra-wp-card { transform: translate3d(0, -4px, 0); box-shadow: 0 26px 58px rgba(38, 12, 88, 0.48); } } /* Softened pride spectrum, not saturated. */ .ra-wp-rule { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; background: linear-gradient(90deg, #B78CFF, #FF9ECF, #FFB27A, #FFE08A, #9FE3A8, #8CC5FF, #B78CFF); } /* A light sweep crosses roughly every 12s and is idle the rest of the time — the keyframes hold position for 82% of the cycle. */ .ra-wp-rule::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%); transform: translate3d(-100%, 0, 0); animation: ra-wp-sweep 12s ease-in-out infinite; } @keyframes ra-wp-sweep { 0%, 82% { transform: translate3d(-100%, 0, 0); } 93%, 100% { transform: translate3d(100%, 0, 0); } } /* 1 — Event name. Quietest level: small, tracked, uppercase. */ .ra-wp-eyebrow { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding-right: 1.8rem; /* clears the close button */ font-size: 0.875rem; /* 14px */ font-weight: 600; letter-spacing: 0.075em; line-height: 1.3; text-transform: uppercase; color: var(--ra-purple-dark); } /* Rainbow arc mark, echoing the concentric rings in the logo. Replaces the flag emoji, which rendered differently on every platform and sat oddly next to the site's line icons. */ .ra-wp-mark { width: 20px; height: 20px; flex: none; } /* 2 — Dates. The single loudest element on the card. */ .ra-wp-dates { margin: 0 0 0.7rem; font-size: 1.2rem; /* ~19px */ font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--ra-purple); } /* 3 — Description. Sized to land on three lines at the card's width. */ .ra-wp-body { margin: 0; font-size: 0.97rem; /* ~15.5px */ line-height: 1.62; color: var(--ra-body); } /* 4 — Call to action, given its own area behind a hairline rule. */ .ra-wp-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: clamp(14px, 1.4vw, 18px); padding-top: clamp(14px, 1.4vw, 18px); border-top: 1px solid rgba(55, 16, 95, 0.14); width: 100%; font-size: 0.94rem; font-weight: 600; color: var(--ra-purple); text-decoration: none; transition: color 250ms var(--ra-ease); } .ra-wp-link:hover { color: var(--ra-purple-hover); } .ra-wp-link svg { width: 15px; height: 15px; transition: transform 250ms var(--ra-ease); } .ra-wp-link:hover svg, .ra-wp-link:focus-visible svg { transform: translate3d(3px, -3px, 0); } .ra-wp-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(55, 16, 95, 0.07); color: rgba(55, 16, 95, 0.55); cursor: pointer; transition: background-color 200ms var(--ra-ease), color 200ms var(--ra-ease); } .ra-wp-close:hover { background: rgba(55, 16, 95, 0.14); color: var(--ra-purple-dark); } .ra-wp-close svg { width: 13px; height: 13px; } .ra-worldpride :focus-visible { outline: 3px solid var(--ra-focus-light); outline-offset: 3px; border-radius: 6px; } /* Dismissal — fades and slides up before the element is removed. */ .ra-worldpride.ra-wp-out { animation: none; opacity: 0; transform: translate3d(0, -16px, 0); transition: opacity 300ms var(--ra-ease), transform 300ms var(--ra-ease); pointer-events: none; } /* The short pill label only exists once the card collapses. */ .ra-wp-link-short, .ra-wp-pill-only { display: none; } /* Desktop: floats in the top-right of the hero. The inner container is the positioned ancestor, so the right offset matches the content gutter and the card lines up with the text column's right edge. */ @media (min-width: 1000px) { .ra-worldpride { position: absolute; top: clamp(7.5rem, 12.5vw, 9.5rem); right: var(--ra-pad-x); width: min(352px, 32vw); margin: 0; } /* Once the hero has left the viewport the card collapses to a pill in the corner. A full-size card pinned here would sit over roughly 210px of the content column on a 1400px screen — and read as a banner rather than a notice. The switch isn't animated between positions because it doesn't need to be: the card has already scrolled out of sight by the time this applies, so the pill simply fades in. */ .ra-worldpride.ra-wp-pinned { position: fixed; top: auto; /* clears the back-to-top button, which sits in the same corner */ right: calc(max(20px, env(safe-area-inset-right)) + 58px); bottom: calc(20px + env(safe-area-inset-bottom)); width: auto; max-width: 320px; animation: ra-wp-pill-in 320ms var(--ra-ease) both, ra-wp-float 9s ease-in-out 500ms infinite; } .ra-worldpride.ra-wp-pinned .ra-wp-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.55rem 0.5rem 1rem; border-radius: 999px; } .ra-worldpride.ra-wp-pinned .ra-wp-rule, .ra-worldpride.ra-wp-pinned .ra-wp-eyebrow, .ra-worldpride.ra-wp-pinned .ra-wp-body, .ra-worldpride.ra-wp-pinned .ra-wp-dates, .ra-worldpride.ra-wp-pinned .ra-wp-link-full { display: none; } .ra-worldpride.ra-wp-pinned .ra-wp-link-short { display: inline; } .ra-worldpride.ra-wp-pinned .ra-wp-pill-only { display: inline-flex; } .ra-worldpride.ra-wp-pinned .ra-wp-link { /* the divider and its spacing belong to the full card only */ border-top: 0; margin-top: 0; padding-top: 0; width: auto; white-space: nowrap; } .ra-worldpride.ra-wp-pinned .ra-wp-mark { width: 17px; height: 17px; } /* the glow is sized for the full card; too heavy behind a small pill */ .ra-worldpride.ra-wp-pinned::before { inset: -10px; border-radius: 999px; opacity: 0.7; } .ra-worldpride.ra-wp-pinned .ra-wp-close { position: static; flex: none; width: 26px; height: 26px; } } @keyframes ra-wp-pill-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .ra-worldpride, .ra-worldpride.ra-wp-pinned { animation: none; opacity: 1; transform: none; } .ra-wp-rule::after { animation: none; opacity: 0; } .ra-worldpride:hover .ra-wp-card { transform: none; } } /* ========================================================================== 16. UTILITIES ========================================================================== */ .ra-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }