/**
* Rosies reusable site-wide components.
*/
/* --------------------------------------------------------------------------
* Donate artwork link
*
* WordPress menus: add `rtk-menu-donate` to the menu item's CSS Classes field.
* Other content: add `rtk-menu-donate` directly to an anchor element.
* Keep the link text as "Donate" so it remains available to screen readers.
* -------------------------------------------------------------------------- */
.rtk-menu-donate > a,
a.rtk-menu-donate {
display: inline-block !important;
width: 105px;
min-width: 105px;
height: 32px;
padding: 0 !important;
overflow: hidden;
vertical-align: middle;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
background-color: transparent !important;
background-image: url('../decorators/donate.svg') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
border: 0 !important;
box-shadow: none !important;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.rtk-menu-donate > a > span,
a.rtk-menu-donate > span {
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
}
.rtk-menu-donate > a:hover,
a.rtk-menu-donate:hover {
opacity: 0.75;
transform: translateY(-1px);
}
.rtk-menu-donate > a:focus-visible,
a.rtk-menu-donate:focus-visible {
outline: 2px solid #f58221;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.rtk-menu-donate > a,
a.rtk-menu-donate {
transition: none;
}
}
/* ==========================================================================
* 20-anniversary primitives (added by 20-anniversary-patch-01)
*
* Six site-wide primitives introduced by /20th-anniversary/. All reusable
* on any page that opts in via el_class (on the row/column) or class on
* the element itself.
* ========================================================================== */
/* --------------------------------------------------------------------------
* Section header — cyan Rift Soft
*
* Reusable centered section H2 in cyan (design system primary heading color).
*
* Usage:
* [vc_column_text]
RTKids in Action
[/vc_column_text]
* -------------------------------------------------------------------------- */
.rtk-section-header-cyan {
font-family: var(--rosies-font-display, 'Rift Soft'), 'Impact', sans-serif;
font-weight: 500;
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.1;
letter-spacing: 0.04em;
text-transform: uppercase;
/* NO hardcoded color — manage via inline style on the child in Bakery.
* Pattern:
Learning for Life
* (The "cyan" in the class name reflects the DEFAULT usage; actual color is per-instance.) */
/* NO hardcoded text-align — inherit from parent column's desktop/tablet/phone_text_alignment.
* Set desktop_text_alignment="left" or "center" on the [vc_column] in Bakery. */
margin: 0 0 48px;
}
/* --------------------------------------------------------------------------
* Page hero H1 — cyan Rift Soft
*
* Used for large page-title H1s like "20TH ANNIVERSARY".
*
* Usage:
*
…
* -------------------------------------------------------------------------- */
.rtk-page-hero-h1 {
font-family: var(--rosies-font-display, 'Rift Soft'), 'Impact', sans-serif;
font-weight: 500;
font-size: 60px; /* Match Salient dynamic "body h1" base rule (homepage H1) at desktop */
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
/* NO hardcoded color — manage via inline color on the in Bakery */
text-align: left;
margin: 0;
display: inline-flex;
align-items: center; /* Center H1 text vertically against decorator so no dead space below title */
gap: 20px;
}
/* --------------------------------------------------------------------------
* Hero with corner decorator + title (full-viewport-width photo)
*
* Layout model:
*
* [ title strip — padding above decorator + decorator + H1 inline ]
* [ full-viewport-width photo ]
*
* The title strip is a normal-flow block. It has a NEGATIVE MARGIN-BOTTOM
* on itself — this pulls the following sibling (the photo) upward, so the
* decorator (which extends to the strip's bottom) drapes onto the photo's
* top edge. Overlap distance is controlled by the strip's negative margin.
*
* Verified against production /20th-anniversary/ screenshot (Aug 2026):
* - Photo top edge is ~110px below the page top
* - Decorator is ~94px tall
* - Decorator sits ~62% in the white strip, ~38% (~36px) overlapping photo
*
* Row shortcode requirements:
* [vc_row type="full_width_content" content_placement="stretch"
* el_class="rtk-hero-with-corner-decorator"
* top_padding="0" bottom_padding="0"]
* [vc_column column_padding_position="none" width="1/1"]
* [vc_column_text el_class="rtk-hero-title-overlay"]
*
*
* Page Title
*
* [/vc_column_text]
* [image_with_animation image_url="XXX" el_class="rtk-hero-photo-fullbleed"]
* [/vc_column]
* [/vc_row]
* -------------------------------------------------------------------------- */
.rtk-hero-with-corner-decorator {
position: relative;
overflow: visible !important;
padding: 0 !important;
}
/* --- Title strip (white band above the photo) ---------------------------
* Normal-flow block. Padding-top defines white space above decorator;
* negative margin-bottom pulls the photo below up so decorator drapes.
*
* Numbers below produce: ~28px of white above decorator, ~58px of white
* around decorator's upper portion, ~36px of decorator hanging over photo.
* ------------------------------------------------------------------------- */
.rtk-hero-with-corner-decorator .rtk-hero-title-overlay {
position: relative;
z-index: 2;
padding: 0 0 0 0; /* no top padding — pulls row up as tight to header as possible */
padding-left: max(40px, 3vw);
margin: 0 0 -158px 0; /* NEGATIVE = photo rises 158px; ~ 50% of 317px decorator */
background: transparent;
}
.rtk-hero-with-corner-decorator .rtk-hero-title-overlay .wpb_wrapper,
.rtk-hero-with-corner-decorator .rtk-hero-title-overlay p {
margin: 0;
padding: 0;
}
/* --- Inline decorator SVG next to the H1 title -------------------------- */
.rtk-hero-decorator-inline {
/* Sized to match production visual scale at 1440 viewport.
* Parent
is display:inline-flex, which without flex:0 0 auto would stretch it.
* Width tuned so the green circle matches production's green circle at ~127px. */
display: block;
flex: 0 0 auto;
width: 340px !important;
height: 317px !important;
position: relative;
top: 80px; /* Nudge decorator down 80px vs H1 baseline */
z-index: 3;
}
.rtk-hero-title-text {
display: inline-block;
position: relative;
top: -40px; /* Nudge H1 text up 40px vs vertical center of decorator */
}
/* Desktop-only: tighten the header → photo gap by 60px. Three coordinated
* moves so title + decorator + photo all shift up together:
* - .rtk-hero-title-overlay margin-bottom: -158 → -218 (photo up 60)
* - .rtk-hero-decorator-inline top: 80 → 20 (decorator up 60)
* - .rtk-hero-title-text top: -40 → -100 (H1 text up 60)
*
* Placed AFTER the base rules for these three selectors so cascade
* source-order lets the media-query values win at equal specificity.
* Tablet/mobile unchanged. */
@media (min-width: 1000px) {
.rtk-hero-with-corner-decorator .rtk-hero-title-overlay {
margin-bottom: -218px;
}
.rtk-hero-decorator-inline {
top: 20px;
}
.rtk-hero-title-text {
top: -100px;
}
}
/* --- Full-viewport-width photo -------------------------------------------
* Salient's image_with_animation wraps the in .img-with-aniamtion-wrap
* (yes, that's a Salient typo in the class name — must be matched exactly)
* (block, width:auto by default). We force the outer wrap + the to
* 100vw and left-shift so it starts at the viewport left edge, regardless
* of any residual container padding.
* ------------------------------------------------------------------------- */
.rtk-hero-with-corner-decorator .rtk-hero-photo-fullbleed,
.rtk-hero-with-corner-decorator .img-with-aniamtion-wrap:has(> .inner > .hover-wrap > .hover-wrap-inner > .rtk-hero-photo-fullbleed) {
display: block;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
position: relative;
z-index: 1;
}
.rtk-hero-with-corner-decorator .rtk-hero-photo-fullbleed img,
.rtk-hero-with-corner-decorator img.rtk-hero-photo-fullbleed {
display: block;
width: 100%;
height: 425px; /* Match production hero height at 1440 */
object-fit: cover; /* Crop, don't distort — preserves source aspect */
object-position: center center;/* Trim equally from top and bottom (default) */
margin: 0;
}
/* --------------------------------------------------------------------------
* Hero crop-anchor modifiers (site-wide)
*
* Add ONE of the following classes to the header [vc_row] alongside
* .rtk-hero-with-corner-decorator to steer which vertical slice of the
* hero photo is preserved when the 425px box cover-crops it. All three are
* horizontally centered — only the vertical anchor changes.
*
* .rtk-hero-crop-top Keep the TOP of the photo, trim the bottom.
* .rtk-hero-crop-center Keep the MIDDLE (same as the default).
* .rtk-hero-crop-bottom Keep the BOTTOM of the photo, trim the top.
*
* Usage in Bakery Row Settings > Extra Class Name:
* rtk-hero-with-corner-decorator rtk-hero-crop-top
* -------------------------------------------------------------------------- */
.rtk-hero-crop-top .rtk-hero-photo-fullbleed img,
.rtk-hero-crop-top img.rtk-hero-photo-fullbleed {
object-position: center top;
}
.rtk-hero-crop-center .rtk-hero-photo-fullbleed img,
.rtk-hero-crop-center img.rtk-hero-photo-fullbleed {
object-position: center center;
}
.rtk-hero-crop-bottom .rtk-hero-photo-fullbleed img,
.rtk-hero-crop-bottom img.rtk-hero-photo-fullbleed {
object-position: center bottom;
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 999px) {
.rtk-hero-with-corner-decorator .rtk-hero-photo-fullbleed img,
.rtk-hero-with-corner-decorator img.rtk-hero-photo-fullbleed {
height: 340px; /* Proportional to 425 at desktop */
}
.rtk-hero-decorator-inline {
width: 220px !important;
height: 205px !important;
top: 52px; /* 80 × (220/340) proportional shift */
}
.rtk-hero-with-corner-decorator .rtk-hero-title-overlay {
padding-top: 0;
margin-bottom: -102px; /* ~50% of 205px */
}
.rtk-page-hero-h1 {
font-size: 42px; /* Match Salient dynamic H1 at 691–999px */
gap: 14px;
}
.rtk-hero-title-text {
top: -28px; /* -40 × (42/60) proportional shift */
}
}
@media (max-width: 600px) {
.rtk-hero-with-corner-decorator .rtk-hero-photo-fullbleed img,
.rtk-hero-with-corner-decorator img.rtk-hero-photo-fullbleed {
height: 260px; /* Proportional to 425 at desktop */
}
.rtk-hero-with-corner-decorator .rtk-hero-title-overlay {
padding-top: 0;
padding-left: 16px;
margin-bottom: -70px; /* ~50% of 140px */
}
.rtk-hero-decorator-inline {
width: 150px !important;
height: 140px !important;
top: 35px; /* 80 × (150/340) proportional shift */
}
.rtk-page-hero-h1 {
font-size: 39px; /* Match Salient dynamic H1 at ≤690px */
gap: 10px;
}
.rtk-hero-title-text {
top: -26px; /* -40 × (39/60) proportional shift */
}
}
/* --------------------------------------------------------------------------
* Portrait — dark blue frame decorator
*
* Wraps an [image_with_animation] portrait with a square dashed dark-blue
* SVG frame (DarkBlueFrame.svg, attachment ID 278) painted BEHIND the
* portrait via ::before. Portrait itself is rendered circular by
* border_radius="500px" on image_with_animation.
*
* Frame source SVG is 206x206, stroke #005E8E. We paint via CSS
* background-image so the frame scales cleanly with the portrait wrapper.
*
* Usage: el_class="rtk-portrait-frame-darkblue" on the column that
* contains the portrait image_with_animation.
* -------------------------------------------------------------------------- */
.rtk-portrait-frame-darkblue {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.rtk-portrait-frame-darkblue::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 340px;
height: 340px;
transform: translate(-50%, -50%) rotate(-8deg);
background-image: url("/wp-content/uploads/2026/08/DarkBlueFrame.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
pointer-events: none;
}
.rtk-portrait-frame-darkblue .wpb_wrapper,
.rtk-portrait-frame-darkblue .img-with-aniamtion-wrap,
.rtk-portrait-frame-darkblue .img-with-animation {
position: relative;
z-index: 1;
}
@media (max-width: 999px) {
.rtk-portrait-frame-darkblue::before {
/* Frame must be BIGGER than the 300px photo cap on tablet so it
* remains visible around the portrait. Was 280 (smaller than the
* photo) which fully covered the frame with the photo. */
width: 360px;
height: 360px;
}
}
@media (max-width: 600px) {
.rtk-portrait-frame-darkblue::before {
/* Frame must be BIGGER than the 240px photo cap so it's visible
* around/behind the portrait. Was 240 (same as photo) which made
* the frame invisible — fully covered by the photo. */
width: 290px;
height: 290px;
}
}
/* --------------------------------------------------------------------------
* Portrait — blue radiating sunburst frame decorator
*
* Wraps an [image_with_animation] portrait with a hand-drawn radiating
* sunburst of short blue lines (BlueFrame_SharingMentor.svg, attachment
* ID 528) painted BEHIND the portrait via ::before. Portrait itself is
* rendered circular by border_radius="500px" on image_with_animation.
*
* Frame source SVG is 190x190 (perfect square, 1:1), fill #009CD8. We
* paint via CSS background-image so it scales cleanly with the portrait
* wrapper. NO rotation — the burst artwork is symmetric and reads best
* upright; the asymmetric spacing of the paths themselves provides the
* hand-drawn feel.
*
* Sizing matches .rtk-portrait-frame-darkblue (340 desktop / 360 tablet /
* 290 mobile) — the frame must be BIGGER than the portrait's photo cap
* at every breakpoint so the radiating lines are visible around/behind
* the portrait, not fully covered by it.
*
* Usage: class="rtk-portrait-frame-blueframe" on the column that
* contains the portrait image_with_animation.
* -------------------------------------------------------------------------- */
.rtk-portrait-frame-blueframe {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.rtk-portrait-frame-blueframe::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 340px;
height: 340px;
transform: translate(-50%, -50%);
background-image: url("/wp-content/uploads/2026/08/BlueFrame_SharingMentor.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
pointer-events: none;
}
.rtk-portrait-frame-blueframe .wpb_wrapper,
.rtk-portrait-frame-blueframe .img-with-aniamtion-wrap,
.rtk-portrait-frame-blueframe .img-with-animation {
position: relative;
z-index: 1;
}
@media (max-width: 999px) {
.rtk-portrait-frame-blueframe::before {
/* Frame must be BIGGER than the 300px photo cap on tablet so the
* radiating lines remain visible around the portrait. */
width: 360px;
height: 360px;
}
}
@media (max-width: 600px) {
.rtk-portrait-frame-blueframe::before {
/* Frame must be BIGGER than the 240px photo cap so it's visible
* around/behind the portrait. */
width: 290px;
height: 290px;
}
}
/* Grow In on scroll — the sunburst starts hidden at 0.8× scale and
* expands to 1.0× scale + full opacity as the row enters the viewport.
* The .rtk-bounce-play class is added by the shared IntersectionObserver
* in custom.js when the column scrolls into view. Fires ONCE per page
* load. Uses the same JS observer as .rtk-portrait-frame-darkblue and
* .rtk-testimonial-with-orange-arrow — no new observer needed. */
@keyframes rtk-frame-grow {
0% {
transform: translate(-50%, -50%) scale(0.6);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.rtk-portrait-frame-blueframe::before {
/* Start hidden — the ::before is added at page load, but we don't
* want the sunburst to flash on first paint before the observer
* runs. Set opacity: 0 as the base state; the grow-in animation
* fills it in when .rtk-bounce-play is added. */
opacity: 0;
}
.rtk-portrait-frame-blueframe.rtk-bounce-play::before {
animation: rtk-frame-grow 0.9s ease-out 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
/* Respect user's OS-level motion preferences — no scale-in, just show
* the sunburst immediately at full size / full opacity. */
.rtk-portrait-frame-blueframe::before {
opacity: 1;
}
.rtk-portrait-frame-blueframe.rtk-bounce-play::before {
animation: none;
}
}
/* --------------------------------------------------------------------------
* Testimonial quote block
*
* Large serif italic quote + attribution below. Reusable inside any
* two/three-column testimonial layout.
*
* Usage on a [vc_column_text] block containing:
*
"..."
*
— Name, Role
*
* (The wrapping [vc_column_text] gets no special class; the two
s do.)
* -------------------------------------------------------------------------- */
.rtk-testimonial-quote-text {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
font-style: italic;
font-weight: 400;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.5;
/* NO hardcoded color — manage via inline style on the child in Bakery.
* Pattern:
"quote"
*/
margin: 0 0 8px;
/* Salient's .wpb_text_column p { padding-bottom: 1.5em } would otherwise
add ~33px of phantom gap between the quote and the attribution. Kill it. */
padding-bottom: 0 !important;
}
.rtk-testimonial-quote-attribution {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
font-style: normal;
font-weight: 700;
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.4;
/* NO hardcoded color — manage via inline style on the child in Bakery.
* Pattern:
— Name, Role
*/
margin: 0;
text-transform: none;
letter-spacing: 0.01em;
padding-bottom: 0 !important;
}
/* --------------------------------------------------------------------------
* Orange curly-arrow accent (photo → quote pointer)
*
* Absolute-positioned orange curly arrow (Quote_ArrowOrange.svg, ID 277)
* that sits in the gutter between a portrait column (left) and a quote
* column (right), pointing from portrait → quote. Painted as a CSS
* background so no image_with_animation markup is needed inside the row.
*
* Usage on the ROW that contains the portrait+quote columns:
* el_class="rtk-testimonial-with-orange-arrow"
*
* The arrow is anchored to the RIGHT column's left edge (i.e. the gutter),
* NOT to the row's center. This means the arrow travels with the columns
* when the row has asymmetric horizontal padding (e.g. right_padding_desktop
* to push content leftward). Vertically centered on the right column.
* -------------------------------------------------------------------------- */
.rtk-testimonial-with-orange-arrow {
position: relative;
overflow: visible !important;
}
/* Anchor the arrow to the right (quote) column's own box.
*
* NB: Salient nests both columns inside an intermediate `.row_col_wrap_12`
* wrapper, so `.rtk-...-arrow > .wpb_column` matches NOTHING. Using the
* adjacent-sibling combinator (.wpb_column + .wpb_column) reliably picks
* the SECOND column without caring about the wrapper depth. */
.rtk-testimonial-with-orange-arrow .wpb_column + .wpb_column {
position: relative;
}
/* Orange arrow position: base is top:50% / left:-60px on the second column.
* On /who-we-are/ (rtk-work-of-heart-row), we nudge it UP 140px and RIGHT 50px
* from the shared base. We keep the shared rule shared and scope the offset
* to the who-we-are row so other pages using the primitive are unaffected. */
.rtk-testimonial-with-orange-arrow .wpb_column + .wpb_column::before {
content: '';
position: absolute;
top: 50%;
left: -60px;
width: 90px;
height: 150px;
transform: translateY(-50%) rotate(15deg);
transform-origin: 50% 50%;
background-image: url("/wp-content/uploads/2026/08/Quote_ArrowOrange.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 3;
pointer-events: none;
}
/* Who-we-are page nudge: up 140px, right 50px vs the shared base. */
.rtk-work-of-heart-row.rtk-testimonial-with-orange-arrow .wpb_column + .wpb_column::before {
left: -10px; /* -60 + 50 = -10 */
transform: translateY(calc(-50% - 140px)) rotate(15deg);
}
/* --- Bounce animation --------------------------------------------------- */
/* The row gets `.rtk-bounce-play` added by JS (see theme's rtk-bounce.js /
* bounce IntersectionObserver in functions.php) when it first scrolls into
* view. The pseudo-element then runs a vertical bob 3 times and stops.
*
* IMPORTANT: the animation's transform MUST preserve the base transform
* (translateY(-50%) rotate(15deg)) or the arrow will jump to the top-left
* of the column when the animation kicks off. That's what the keyframes
* below do — each frame is the base transform PLUS a small extra Y delta. */
@keyframes rtk-arrow-bob {
0% { transform: translateY(-50%) rotate(15deg); }
25% { transform: translateY(calc(-50% - 12px)) rotate(15deg); }
50% { transform: translateY(-50%) rotate(15deg); }
75% { transform: translateY(calc(-50% - 6px)) rotate(15deg); }
100% { transform: translateY(-50%) rotate(15deg); }
}
/* Who-we-are page has base transform of translateY(calc(-50% - 140px)),
* so its bounce keyframes must preserve that offset or the arrow will
* jump back down when the animation kicks off. */
@keyframes rtk-arrow-bob-whoweare {
0% { transform: translateY(calc(-50% - 140px)) rotate(15deg); }
25% { transform: translateY(calc(-50% - 152px)) rotate(15deg); }
50% { transform: translateY(calc(-50% - 140px)) rotate(15deg); }
75% { transform: translateY(calc(-50% - 146px)) rotate(15deg); }
100% { transform: translateY(calc(-50% - 140px)) rotate(15deg); }
}
.rtk-work-of-heart-row.rtk-testimonial-with-orange-arrow.rtk-bounce-play .wpb_column + .wpb_column::before {
animation: rtk-arrow-bob-whoweare 0.9s ease-in-out 3;
}
.rtk-testimonial-with-orange-arrow.rtk-bounce-play .wpb_column + .wpb_column::before {
animation: rtk-arrow-bob 0.9s ease-in-out 3;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.rtk-testimonial-with-orange-arrow.rtk-bounce-play .wpb_column + .wpb_column::before,
.rtk-testimonial-with-orange-arrow-left.rtk-bounce-play .wpb_column:first-of-type::before,
.rtk-testimonial-with-orange-arrow-right.rtk-bounce-play .wpb_column + .wpb_column::before {
animation: none;
}
}
/* --- .rtk-testimonial-with-orange-arrow-left ---------------------------
* Mirror of the original, but the arrow lives on the FIRST column
* (photo/left) pointing INWARD toward the quote on the right.
* Uses arroworange-left.svg (points down-and-right).
*
* Same 90x150 size, same 15deg rotation, same bounce behavior.
* Anchored at the RIGHT edge of the first column (right: -60px)
* so it sits in the gutter between the two columns.
* -------------------------------------------------------------------- */
.rtk-testimonial-with-orange-arrow-left {
position: relative;
overflow: visible !important;
}
.rtk-testimonial-with-orange-arrow-left .wpb_column:first-of-type {
position: relative;
}
.rtk-testimonial-with-orange-arrow-left .wpb_column:first-of-type::before {
content: '';
position: absolute;
top: 50%;
right: -60px;
width: 90px;
height: 150px;
transform: translateY(-50%) rotate(15deg);
transform-origin: 50% 50%;
background-image: url("../decorators/arroworange-left.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 3;
pointer-events: none;
}
.rtk-testimonial-with-orange-arrow-left.rtk-bounce-play .wpb_column:first-of-type::before {
animation: rtk-arrow-bob 0.9s ease-in-out 3;
}
/* --- .rtk-testimonial-with-orange-arrow-right --------------------------
* Same anchor as the original (second column, left edge) but uses
* arroworange-right.svg (points down-and-left).
*
* Same 90x150 size, same 15deg rotation, same bounce behavior.
* -------------------------------------------------------------------- */
.rtk-testimonial-with-orange-arrow-right {
position: relative;
overflow: visible !important;
}
.rtk-testimonial-with-orange-arrow-right .wpb_column + .wpb_column {
position: relative;
}
.rtk-testimonial-with-orange-arrow-right .wpb_column + .wpb_column::before {
content: '';
position: absolute;
top: 50%;
left: -60px;
width: 90px;
height: 150px;
transform: translateY(-50%) rotate(15deg);
transform-origin: 50% 50%;
background-image: url("../decorators/arroworange-right.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 3;
pointer-events: none;
}
.rtk-testimonial-with-orange-arrow-right.rtk-bounce-play .wpb_column + .wpb_column::before {
animation: rtk-arrow-bob 0.9s ease-in-out 3;
}
/* --- rtk-photo-circle: cap portraits on Chesney + Lauren rows -----------
*
* The image_with_animation shortcode has max_width="300px" — that value
* applies at desktop, but on smaller viewports Salient's responsive
* defaults can let the wrapper drift, so the portrait looks oversized
* relative to its column. Pin the wrapper explicitly:
* ≤999px (tablet): still 300px — tablet columns are wide enough
* ≤600px (mobile): 240px — matches the site-wide .rtk-photo-circle
* primitive default (in decorators.css) so mobile
* reads consistently with the alumni-row circles.
*
* Scoped to the two testimonial rows so we don't upsize the alumni-row
* circles on desktop.
* -------------------------------------------------------------------- */
.rtk-testimonial-with-orange-arrow .rtk-photo-circle,
.rtk-testimonial-with-orange-arrow .img-with-aniamtion-wrap,
.rtk-portrait-frame-darkblue .rtk-photo-circle,
.rtk-portrait-frame-darkblue .img-with-aniamtion-wrap {
max-width: 300px !important;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.rtk-testimonial-with-orange-arrow .rtk-photo-circle,
.rtk-testimonial-with-orange-arrow .img-with-aniamtion-wrap,
.rtk-portrait-frame-darkblue .rtk-photo-circle,
.rtk-portrait-frame-darkblue .img-with-aniamtion-wrap {
max-width: 240px !important;
}
}
/* --- DarkBlue frame bounce ---------------------------------------------- */
/* The Lauren column (.rtk-portrait-frame-darkblue) gets `.rtk-bounce-play`
* added by the same JS observer when it first scrolls into view. The frame
* (::before pseudo) then runs a softer, slower vertical bob 2 times and
* rests. The frame is bigger than the arrow so a subtler motion feels less
* busy while still catching the eye.
*
* IMPORTANT: the frame's base transform is `translate(-50%,-50%) rotate(-8deg)`,
* so every keyframe must preserve those axes and only add a small extra Y
* delta — otherwise the frame will jump to the top-left of the column when
* the animation kicks off. */
@keyframes rtk-frame-bob {
0% { transform: translate(-50%, -50%) rotate(-8deg); }
25% { transform: translate(-50%, calc(-50% - 8px)) rotate(-8deg); }
50% { transform: translate(-50%, -50%) rotate(-8deg); }
75% { transform: translate(-50%, calc(-50% - 4px)) rotate(-8deg); }
100% { transform: translate(-50%, -50%) rotate(-8deg); }
}
.rtk-portrait-frame-darkblue.rtk-bounce-play::before {
animation: rtk-frame-bob 1.4s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
.rtk-portrait-frame-darkblue.rtk-bounce-play::before {
animation: none;
}
}
@media (max-width: 999px) {
.rtk-testimonial-with-orange-arrow .wpb_column + .wpb_column::before {
width: 60px;
height: 100px;
left: -40px;
}
}
/* Mobile arrow + Hawaii quote padding moved to bottom of file (patch-17) to
* clear later `!important` base rules that were zeroing out the padding.
* See "Cascade source order" section at file end. */
/* ==========================================================================
* Flickity carousel — hand-drawn PNG arrows
*
* Uses the theme's blue PNG arrows sitting at:
* wp-content/themes/rosies/assets/decorators/arrow-blue-left.png
* wp-content/themes/rosies/assets/decorators/arrow-blue-right.png
*
* Same visual family as the home testimonial carousel's purple arrows;
* different color asset per section (purple on home, blue here).
*
* Two positioning variants — pick ONE per carousel:
*
* .rtk-carousel-arrows-navy-midslide
* Arrows vertically centered on the slides. Use when there is NO
* header above the carousel.
*
* .rtk-carousel-arrows-navy-flanking
* Arrows lifted up to flank the section H2 above the carousel
* (e.g. RTKIDS IN ACTION on /20th-anniversary/).
*
* Class goes on the ROW (or any ancestor) that contains a Flickity carousel.
* To use a different color arrow: add another PNG pair to the decorators
* folder and add a new selector overriding `background-image`.
* ========================================================================== */
/* --- Shared: PNG arrow paint + button chrome reset ----------------------- */
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button {
width: 100px !important;
height: 40px !important;
background-color: transparent !important;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button.previous,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.previous {
background-image: url("../decorators/arrow-blue-left.png") !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button.next,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.next {
background-image: url("../decorators/arrow-blue-right.png") !important;
}
/* Hide Flickity's default inline SVG chevron */
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button .flickity-button-icon,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button .flickity-button-icon,
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button svg,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button svg {
display: none !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button::before,
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button::after,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button::before,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button::after {
content: none !important;
display: none !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button:hover,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button:hover {
opacity: 0.65 !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity {
padding-top: 0;
padding-bottom: 0;
}
/* --- VARIANT A: midslide (arrows centered on slides) --------------------- */
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button {
top: 50% !important;
transform: translateY(-50%);
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button.previous {
left: -20px !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button.next {
right: -20px !important;
}
/* --- VARIANT B: flanking (arrows lifted to section heading line) --------- */
/* Anchored to top of the .nectar-flickity container. To align vertically
with the H1 above, offset must equal:
(gap between H1 bottom and flickity top) + (H1 height / 2) + (arrow height / 2)
Measured post-tightening: gap ~90px, H1 62px, arrow 40px
=> 90 + 31 - 20 = 101px above flickity top */
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button {
top: auto !important;
bottom: calc(100% + 101px);
transform: none;
}
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.previous {
left: 15% !important;
}
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.next {
right: 15% !important;
}
/* --- Mobile responsive (both variants) ----------------------------------- */
@media (max-width: 999px) {
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.previous {
left: 5% !important;
}
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.next {
right: 5% !important;
}
}
@media (max-width: 600px) {
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button {
width: 40px !important;
height: 24px !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button::before,
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button::before {
width: 40px;
height: 16px;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button.previous {
left: -5px !important;
}
.rtk-carousel-arrows-navy-midslide .nectar-flickity .flickity-prev-next-button.next {
right: -5px !important;
}
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button {
bottom: calc(100% + 36px);
}
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.previous {
left: 3% !important;
}
:is(.rtk-carousel-arrows-navy-flanking, .rtk-gallery-row) .nectar-flickity .flickity-prev-next-button.next {
right: 3% !important;
}
}
/* ==========================================================================
* WHO WE ARE — patch-01 additions to components.css
*
* Site-wide primitives introduced by /who-we-are/. All classes are prefixed
* `rtk-` and follow existing naming conventions. Nothing here overrides an
* existing rule; append as-is to the end of components.css.
* ========================================================================== */
/* --------------------------------------------------------------------------
* rtk-verveine-quote / rtk-verveine-attribution
*
* Pull-quote typography matching production (Elementor build measured via
* getComputedStyle on 2026-08-28):
* - Quote body: Verveine 46px / weight 400 / color #059dd9 / line-height 46px
* - Attribution: Verveine 30px / weight 400 / color #333333
*
* Usage inside a [vc_column_text] block:
*
"It's like living in Hawaii..."
*
- Rosie O'Donnell
*
* Verveine is already registered via --rosies-font-script.
* -------------------------------------------------------------------------- */
.rtk-verveine-quote {
font-family: var(--rosies-font-script) !important;
font-size: 46px !important;
font-weight: 400 !important;
color: #059dd9 !important;
line-height: 46px !important;
margin: 0 0 18px 0 !important;
}
.rtk-verveine-attribution {
font-family: var(--rosies-font-script) !important;
font-size: 30px !important;
font-weight: 400 !important;
color: #333333 !important;
line-height: 32px !important;
margin: 0 !important;
}
/* Defensive: WordPress wpautop / Bakery visual editor can inject a stray
* or empty between the quote and the attribution when the two
* tags are separated by a newline in the shortcode source. Neutralize both. */
.rtk-verveine-quote + br,
.rtk-verveine-quote + p:empty {
display: none !important;
}
/* THE REAL FIX (patch-10):
* Salient's core stylesheet applies `padding-bottom: 1.5em` to every
* inside `.wpb_text_column` (Bakery's default text-column wrapper).
* At the quote's 46px font-size, that's 46 × 1.5 = 69px of INTERNAL padding
* baked into the quote's own box — not a margin, not another element, not
* wpautop. The text sits ~69px above the paragraph's bottom edge, and the
* attribution starts right after (only 4px of collapsed margin gap between
* the two boxes). Visually that reads as a huge gap.
*
* Fix: zero out padding AND margin on both paragraphs, then reintroduce a
* small deliberate gap via the quote's margin-bottom. */
.rtk-verveine-quote {
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
.rtk-verveine-attribution {
margin: 0 !important;
padding: 0 !important;
}
/* Responsive scaling: tablet/mobile shrink so quote fits narrower columns. */
@media (max-width: 999px) {
.rtk-verveine-quote { font-size: 38px !important; line-height: 40px !important; }
.rtk-verveine-attribution{ font-size: 26px !important; line-height: 28px !important; }
}
@media (max-width: 600px) {
.rtk-verveine-quote { font-size: 32px !important; line-height: 34px !important; }
.rtk-verveine-attribution{ font-size: 22px !important; line-height: 24px !important; }
}
/* --------------------------------------------------------------------------
* rtk-timeline-carousel — WHO WE ARE timeline (3-slide Flickity carousel)
*
* Replicates production's Slider Revolution timeline (3 slides, background
* silhouette shared across slides, milestone entries in a stagger layout).
* Production's mechanism is per-layer absolute x/y coordinates; we mirror
* those coordinates 1:1 inside each slide container.
*
* Container shape (all coordinates match production data-xy exactly):
* Slide viewport: 1180px wide × 555px tall (matches production canvas
* at desktop, minus flanking arrow space)
*
* Row 1: 3 items at (x:90, x:550, x:950), (y:140 label / y:170 body)
* Row 2 (slides 1-2): 2 items offset at (x:300, x:767), (y:334 label / y:364 body)
* Row 2 (slide 3): 3 items at (x:241, x:597, x:934), (y:365 body)
*
* Each milestone is 209px wide. Date = Rift Soft Demi 30px #f58221.
* Body = Roboto 20px #333333, line-height 26px.
*
* Usage on the row:
* el_class="rtk-timeline-row"
* Usage on the Salient carousel wrapping the 3 slides:
* el_class="rtk-timeline-carousel"
* Each slide is a [vc_column_text] with raw HTML per the shortcode.
* -------------------------------------------------------------------------- */
.rtk-timeline-row {
position: relative;
}
/* The Flickity carousel wrapper — no viewport padding, cell = full width. */
.rtk-timeline-carousel .nectar-flickity {
overflow: visible;
}
.rtk-timeline-carousel .nectar-flickity .cell {
width: 100%;
padding: 0;
}
/* Slide canvas — fixed height matches production coordinate system. */
.rtk-timeline-slide {
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
height: 555px;
}
/* Individual milestone card (absolute-positioned inside slide canvas). */
.rtk-milestone {
position: absolute;
width: 209px;
}
.rtk-milestone-date {
font-family: var(--rosies-font-display) !important;
font-weight: 500 !important;
font-size: 30px !important;
color: #f58221 !important;
line-height: 26px !important;
margin: 0 0 8px 0 !important;
text-transform: none !important;
}
.rtk-milestone-body {
font-family: var(--rosies-font-body) !important;
font-weight: 400 !important;
font-size: 20px !important;
color: #333333 !important;
line-height: 26px !important;
margin: 0 !important;
}
/* Position each milestone by matching data-xy from production RevSlider.
* On slides 1 and 2: 3-over-2 stagger. On slide 3: 3-over-3 full grid.
* Positions are set inline in the shortcode via style="left:X;top:Y" so
* each slide can override with its own coordinate set. */
/* Tablet: collapse to a 2-column grid, drop absolute positioning. */
@media (max-width: 999px) {
.rtk-timeline-slide {
height: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 30px;
padding: 20px 40px;
}
.rtk-milestone {
position: static;
width: auto;
left: auto !important;
top: auto !important;
}
}
/* Mobile: single column stack. Padding moved to bottom-of-file overrides
* (patch-17) to beat later `!important` base rules; keep only the
* grid/typography here. */
@media (max-width: 600px) {
.rtk-timeline-slide {
grid-template-columns: 1fr;
gap: 32px;
}
.rtk-milestone-date { font-size: 26px !important; }
.rtk-milestone-body { font-size: 18px !important; line-height: 24px !important; }
}
/* --------------------------------------------------------------------------
* rtk-community-circle — WHO WE ARE Our Community section (Staff / Board /
* Donors & Partners circles).
*
* Each circle is a link containing an SVG (image_with_animation with
* link_url set). The SVGs already contain the color fill and label text —
* this primitive just handles sizing, hover, and centering.
*
* Usage: apply el_class="rtk-community-circle" to the image_with_animation
* shortcode (or wrap in a linked column with this class).
* -------------------------------------------------------------------------- */
.rtk-community-circle {
display: block;
max-width: 260px;
margin: 0 auto;
transition: transform 0.25s ease-out;
}
.rtk-community-circle:hover,
.rtk-community-circle:focus-visible {
transform: scale(1.04);
}
.rtk-community-circle img {
display: block;
width: 100%;
height: auto;
}
/* Mobile + tablet cap: hold the circles to a comfortable size on narrow
* viewports (the 1/3 column would otherwise let them scale up unnecessarily).
* Applies whether the class lands on the img itself (via el_class) or on
* the Salient .img-with-aniamtion-wrap parent. */
@media (max-width: 999px) {
.rtk-community-row .rtk-community-circle,
.rtk-community-row img.rtk-community-circle,
.rtk-community-row .img-with-aniamtion-wrap:has(.rtk-community-circle) {
max-width: 242px !important;
margin: 0 auto !important;
}
}
/* --------------------------------------------------------------------------
* rtk-hero-title — H1 overlaid on the /who-we-are/ composite hero image
*
* Production spec (measured via getComputedStyle on 2026-08-28):
* Font: Rift Soft Medium 56px / 700 / #ffffff / line-height 56px
* Position: 40px right and 100px down from the image's top-left corner
* Image renders at 1300px wide × ~440px tall at desktop.
*
* Approach: make the column (which centers the hero image) also center a
* relative-positioned wrapper matching the image's box. The H1 is absolutely
* positioned inside that wrapper at percentage offsets so it scales
* proportionally with the image on smaller viewports.
*
* Offsets as % of the image box (1300×440):
* left: 40/1300 = 3.08%
* top: 100/440 = 22.73%
* -------------------------------------------------------------------------- */
.rtk-hero-composite .wpb_wrapper {
position: relative;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.rtk-hero-composite .rtk-hero-title-overlay {
position: absolute !important;
top: 22.73%; /* 100px / 440px */
left: 6.15%; /* 80px / 1300px — was 3.08% (40px); shifted +40px right per user */
margin: 0 !important;
padding: 0 !important;
z-index: 3;
pointer-events: none;
}
.rtk-hero-composite .rtk-hero-title {
font-family: 'Rift Soft', sans-serif !important;
/* Fluid scaling: font-size tracks viewport width so the H1 stays
* proportional to the hero image at every breakpoint (no stepped jumps).
*
* Target ratios (measured against the composite hero image):
* 1440px viewport → image ~1200px wide → H1 56px (~4.7% of viewport)
* 375px viewport → image ~330px wide → H1 18px (~4.8% of viewport)
*
* clamp(min, 3.9vw, max):
* - At 1440vw: 3.9vw = 56.16px → caps at max 56px
* - At 1000vw: 3.9vw = 39px
* - At 768vw: 3.9vw = 30px
* - At 480vw: 3.9vw = 18.72px
* - At 375vw: 3.9vw = 14.6px → floors at min 18px */
font-size: clamp(18px, 3.9vw, 56px) !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* --------------------------------------------------------------------------
* rtk-signature-inline — Rosie's signature image at the end of the letter
*
* Sized modestly (~120px wide) and left-aligned so it reads as part of
* the letter's closing rather than a decorative asset.
* -------------------------------------------------------------------------- */
/* Left-align by defeating Salient's centered wrapper.
*
* Salient's [image_with_animation] renders this DOM (verified via live inspect):
* .img-with-aniamtion-wrap.left ← Level 4, 300px wide, symmetric 198px LR margin (centers itself)
* .inner ← Level 3
* .hover-wrap ← Level 2
* .hover-wrap-inner ← Level 1
* ← Level 0, 210px, margin-right: 90px (Salient's centering math)
*
* Two things centering the signature:
* 1) The wrapper has symmetric margin-left/right: 198px (auto-centering).
* 2) The IMG has a 90px right margin from Salient's own math.
* Both must be neutralized. Deep :has() walks through Salient's exact nesting. */
.img-with-aniamtion-wrap:has(.rtk-signature-inline) {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
max-width: 210px !important;
width: 210px !important;
}
.img-with-aniamtion-wrap:has(.rtk-signature-inline) .inner,
.img-with-aniamtion-wrap:has(.rtk-signature-inline) .hover-wrap,
.img-with-aniamtion-wrap:has(.rtk-signature-inline) .hover-wrap-inner {
margin-left: 0 !important;
margin-right: 0 !important;
width: 210px !important;
max-width: 210px !important;
}
.rtk-signature-inline {
display: block;
max-width: 210px !important;
width: 210px !important;
height: auto !important;
margin: 12px 0 0 0 !important;
}
/* --------------------------------------------------------------------------
* rtk-row-1200 — widen a Salient in-container row's content area to 1200px
*
* Salient's default .container caps content at ~1180px. When a page needs
* an exact 1200px content area (Our Mission, A Work of Heart on /who-we-are/),
* add class="... rtk-row-1200" to the [vc_row]. Salient DOM inside a
* [vc_row type="in_container"]:
*
* .container ← THIS is what we widen (parent, via :has)
* └ .wpb_row.rtk-row-1200 ← the row (our class lives here)
* └ .row_col_wrap_12 ← intermediate wrapper (also widened)
* └ .wpb_column ...
*
* We widen both the grandparent .container (via :has()) and the inner
* .row_col_wrap_12 to 1200px. Below 1200px viewport, everything reverts
* to 100% width so the responsive cascade behaves normally.
* -------------------------------------------------------------------------- */
.container:has(> .rtk-row-1200) {
max-width: 1200px !important;
width: 100%;
}
.rtk-row-1200 .row_col_wrap_12 {
max-width: 1200px !important;
}
@media (max-width: 1200px) {
.container:has(> .rtk-row-1200),
.rtk-row-1200 .row_col_wrap_12 {
max-width: 100% !important;
}
}
/* --------------------------------------------------------------------------
* /who-we-are/ timeline carousel — Flickity-based replacement for the
* failed [nectar_slider location="none"]. Recreates production's RevSlider
* layout (which pixel-positions 5–6 milestone text layers on top of a
* shared crowd-silhouette background image) in a native Salient/Bakery
* [carousel script="flickity"] with 3 [item] slides.
*
* Structure:
* .rtk-timeline-row (background image #338, WhoWeAre_Timeline)
* └ [carousel].rtk-timeline-carousel.rtk-carousel-arrows-navy-flanking
* └ [item].rtk-timeline-slide × 3
* └ .rtk-timeline-canvas (position: relative, fixed height)
* └ .rtk-milestone[×5-6] (position: absolute at production x/y)
* ├ .rtk-milestone-date (Rift Soft Demi 30px orange)
* └ .rtk-milestone-body (Roboto 20px #333 lh 26px)
*
* Production coordinates are used verbatim — the canvas is 1240px wide
* (matches production's slide-local layout width, x-coords 90..1042).
* -------------------------------------------------------------------------- */
.rtk-timeline-row {
/* overflow visible so Flickity arrows can extend past the row edges
without being clipped (midslide variant sits at left/right -20px). */
overflow: visible;
}
.rtk-timeline-carousel .flickity-viewport {
overflow: visible !important;
}
.rtk-timeline-slide {
padding: 0 !important;
}
.rtk-timeline-canvas {
position: relative;
width: 100%;
max-width: 1240px;
height: 500px;
margin: 0 auto;
}
.rtk-milestone {
position: absolute;
width: 209px;
}
.rtk-milestone-date {
font-family: 'Rift Soft', sans-serif !important;
font-weight: 600 !important;
font-size: 30px !important;
line-height: 26px !important;
color: #f58221 !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.rtk-milestone-body {
font-family: 'Roboto', sans-serif !important;
font-weight: 400 !important;
font-size: 20px !important;
line-height: 26px !important;
color: #333333 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Responsive: at tablet + below, the pixel-absolute stagger doesn't fit.
* Fall back to a stacked column of milestones per slide. Canvas becomes
* auto-height; each .rtk-milestone becomes a static block. */
@media (max-width: 999px) {
.rtk-timeline-canvas {
height: auto;
padding: 20px 20px 40px 20px;
}
.rtk-milestone {
position: static !important;
width: 100%;
max-width: 480px;
margin: 0 auto 24px auto;
text-align: left;
}
.rtk-milestone-date {
font-size: 26px !important;
}
.rtk-milestone-body {
font-size: 18px !important;
line-height: 24px !important;
}
}
@media (max-width: 600px) {
.rtk-milestone-date {
font-size: 22px !important;
line-height: 22px !important;
}
.rtk-milestone-body {
font-size: 16px !important;
line-height: 22px !important;
}
}
/* ==========================================================================
* PATCH-17 — Cascade source-order overrides
*
* The following rules MUST sit at the bottom of this file. They override
* earlier `!important` base rules that would otherwise zero out our
* mobile-only offsets. Specifically:
*
* - `.rtk-timeline-slide { padding: 0 !important; }` (base rule near end
* of file) was killing our mobile 20px 20px 20px 90px padding.
* - `.rtk-verveine-quote { padding: 0 !important; }` (patch-10 fix, also
* later in the file) was killing our mobile padding-left: 70px.
*
* Skill rule: any @media block that overrides an equal-specificity base
* rule must be placed AFTER that base rule in the same file. We restate
* the mobile-only offsets here, at the very bottom, with `!important`.
* ========================================================================== */
/* Milestones — left-arrow clearance across the entire stacked range.
* Salient collapses the 2-column tablet grid to a single column somewhere
* between ~950 and 600px (parent column width, not viewport width, drives
* the effective columns), so the left arrow overlaps milestone text at any
* width ≤999px, not just ≤600px. Apply the 38px left offset uniformly. */
@media (max-width: 999px) {
.rtk-timeline-slide {
padding: 20px 20px 20px 38px !important;
}
}
/* --------------------------------------------------------------------------
* Hawaii pull-quote — orange companion arrow on tablet + mobile
*
* Salient's default column grid stacks the row's two columns as soon as the
* viewport drops below ~1000px. Once stacked, the desktop pseudo (which
* lives on the 2nd/photo column via `.wpb_column + .wpb_column::before`)
* ends up clipped at the far left of the now-full-width column and reads
* as visual noise. So across the entire stacked range (≤999px):
* 1) hide the desktop column-2 pseudo
* 2) paint a smaller companion arrow as ::before on the quote paragraph
* itself, with 70px of padding-left on the quote to give the arrow room.
* -------------------------------------------------------------------------- */
@media (max-width: 999px) {
/* Kill the desktop column-2 pseudo — it's mis-anchored once columns stack. */
.rtk-work-of-heart-row.rtk-testimonial-with-orange-arrow .wpb_column + .wpb_column::before {
display: none !important;
}
.rtk-work-of-heart-row .rtk-verveine-quote,
.rtk-work-of-heart-row .rtk-verveine-attribution {
padding-left: 70px !important;
}
.rtk-work-of-heart-row .rtk-verveine-quote {
position: relative;
}
.rtk-work-of-heart-row .rtk-verveine-quote::before {
content: '';
position: absolute;
top: 50%;
left: -10px;
width: 55px;
height: 90px;
transform: translateY(-50%) rotate(15deg);
transform-origin: 50% 50%;
background-image: url("/wp-content/uploads/2026/08/Quote_ArrowOrange.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 3;
pointer-events: none;
}
.rtk-work-of-heart-row.rtk-bounce-play .rtk-verveine-quote::before {
animation: rtk-arrow-bob 0.9s ease-in-out 3;
}
}
/* ==========================================================================
* /our-founder/ page — patch-03
* ==========================================================================
*
* Two page-scoped classes. Both use net-new class names (grep-confirmed
* they don't appear anywhere else in components.css), so no risk of leaking
* to /who-we-are/, /20th-anniversary/, /musical-documentary/, or homepage.
*
* 1. .rtk-ourfounder-decorator — page-scoped variant of two-circles corner
* decorator, uses two-circles_founder.svg instead of the shared
* core-programs_two-circles.svg. Painted as ::before on the image wrapper.
*
* 2. .rtk-ourfounder-about-photo — forces the About-row photo (image 381)
* to a landscape 400×280 aspect via aspect-ratio + object-fit: cover.
* Design calls for a landscape rectangle regardless of source aspect.
* ========================================================================== */
/* Scope: WPBakery renders the column as
* .rtk-ourfounder-decorator > .vc_column-inner > .wpb_wrapper > [children]
* The [image_with_animation] wrappers are direct children of .wpb_wrapper,
* interleaved with any inner rows (.wpb_row). `:first-of-type` on the img
* wrapper matches ONLY the first .img-with-aniamtion-wrap sibling under
* .wpb_wrapper (image 615 / actii-upper-school-insert.jpg). Additional
* images later in the same column (like actii-study-group-insert.jpg
* = image 626) get NO decorator, because they are not the first-of-type.
*
* IMPORTANT: `:first-of-type` matches by TAG NAME (`div`) among the
* wrapper's children. Both img-wrappers AND inner rows are
*