. */
.rtk-h2 {
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rosies-cyan-text);
margin: 0 0 24px;
position: relative;
}
/* Brand H2 — gold variant (Gala). Same inheritance as .rtk-h2. */
.rtk-h2-yellow {
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rosies-yellow-text);
margin: 0 0 20px;
}
/* Brand H2 — centered variant.
Displayed as inline-block so the box hugs the text; the parent
(e.g. .rtk-mint-band) provides text-align:center to center it.
This is what lets a ::before decorator anchor to the text edge. */
.rtk-h2-centered {
display: inline-block;
position: relative;
color: var(--rosies-cyan-text);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 48px;
text-align: left;
}
/* Brand H3 — smaller cyan uppercase (program-card titles, etc.).
Applied to ; inherits Rift Soft, weight, size,
line-height from the h3 tag rule (Salient panel). */
.rtk-h3 {
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rosies-cyan-text);
margin: 0 0 14px;
}
/* Body copy — Roboto 16/1.6 */
.rtk-body {
font-family: var(--rosies-font-body, 'Roboto'), sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--rosies-ink);
margin: 0 0 18px;
}
.rtk-body-emphasis {
font-style: italic;
font-weight: 400;
color: var(--rosies-ink);
margin-top: 24px;
}
/* Learn More link — cyan uppercase with hover underline PNG */
.rtk-learnmore {
display: inline-block;
font-family: var(--rosies-font-hand, 'Captain Comic'), cursive, sans-serif;
font-weight: 700; /* Per editor request — synthetic bold (Captain Comic ships 400 only) */
font-size: 18px; /* handwritten needs a touch more size than Rift 14px */
letter-spacing: 0.02em; /* looser than geometric 0.08em — lets letterforms breathe */
text-transform: uppercase;
color: var(--rosies-cyan-text);
text-decoration: none;
padding: 4px 2px 8px;
background-image: none;
background-repeat: repeat-x;
background-position: bottom left;
background-size: 100% 6px;
transition: color 0.15s ease;
}
.rtk-learnmore:hover,
.rtk-learnmore:focus {
color: var(--rosies-cyan-text);
background-image: url('/wp-content/themes/rosies/assets/decorators/learnmore-underline.png');
}
/* Orange button — override Salient's .nectar-button.
Usage: */
a.nectar-button.rtk-btn-orange,
.nectar-button.rtk-btn-orange {
background-color: var(--rosies-orange-text) !important;
border-color: var(--rosies-orange-text) !important;
color: #fff !important;
}
a.nectar-button.rtk-btn-orange:hover,
.nectar-button.rtk-btn-orange:hover {
background-color: #9e4e0d !important;
border-color: #9e4e0d !important;
}
/* Mint band — rounded container with mint background.
Wrap in inside [vc_column_text].
Any .rtk-h2-centered child centers automatically because the
band is text-align:center; grids inside restore text-align:left. */
.rtk-mint-band {
background: var(--rosies-mint);
padding: 60px 40px;
margin: 40px 0;
border-radius: 12px;
text-align: center;
}
.rtk-mint-band > .rtk-programs-grid,
.rtk-mint-band > .rtk-20years-grid {
text-align: left;
}
@media (max-width: 768px) {
.rtk-mint-band {
padding: 40px 20px;
}
}
/* Two-column grids for mint-band contents.
Used instead of [vc_row_inner] because wrapping raw HTML around
inner-row shortcodes inside [vc_column_text] is inconsistent. */
.rtk-20years-grid,
.rtk-programs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.rtk-programs-grid {
align-items: start;
gap: 32px;
}
@media (max-width: 768px) {
.rtk-20years-grid,
.rtk-programs-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* Circular photo (20 Years, testimonials) */
.rtk-circle-photo {
display: block;
width: 100%;
max-width: 380px;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.rtk-circle-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Program card — rounded photo + H3 + body + Learn More */
.rtk-program-card {
background: transparent;
padding: 12px;
position: relative;
}
.rtk-program-card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 22px;
margin-bottom: 22px;
}
/* Video thumbnail with generated white circle + cyan play triangle.
Usage: ![]()
isolation:isolate creates a new stacking context so the pseudos
always sit above the ![]()
. */
a.rtk-video-thumb {
position: relative;
display: block;
width: 100%;
max-width: 480px;
aspect-ratio: 16 / 10;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
background: #000;
isolation: isolate;
}
a.rtk-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
}
a.rtk-video-thumb::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transition: transform 0.2s ease;
z-index: 2;
pointer-events: none;
}
a.rtk-video-thumb::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 4px), -50%);
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 22px solid var(--rosies-cyan-text);
z-index: 3;
pointer-events: none;
}
a.rtk-video-thumb:hover::after {
transform: translate(-50%, -50%) scale(1.08);
}
/* If WPBakery wraps the in a via wpautop, neutralize it */
.wpb_text_column p:has(> a.rtk-video-thumb) {
margin: 0;
text-align: center;
}
/* Testimonial block — purple heading + italic quote + attribution.
The header ::before/::after arrow decorators are homepage-specific
and live in homepage.css scoped to .rtk-home.
INTENTIONAL FONT OVERRIDE: this
should NOT be Rift Soft.
Per the live BlueHost site, the "Sharing Experiences" heading
uses Verveine (script). This is the one place a class needs to
override the panel-provided family — the design deliberately
diverges from the site-wide H2 identity. Size/weight follow
Salient's Blockquote setting shape (Verveine Regular 64/66).
Works on ANY H-tag (h1–h6) or plain block, not just . The
original rule was class-only — which should have won on specificity
— but Salient's dynamic-styles.css loads after this file and its
`body hN` rules override same-specificity properties like font-family,
font-weight, and (on h6) text-transform. `!important` on the identity
properties (family, weight, transform) makes the class robust when
applied to h1/h3/h4/h5/h6.
Usage:
Text
Text
... any H tag works. */
.rtk-testimonial-header {
font-family:
var(--rosies-font-script, 'Verveine'), cursive, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(40px, 5.5vw, 64px);
line-height: 1.05;
letter-spacing: 0;
text-transform: none !important; /* scripts should never be uppercased (defeats Salient's h6 uppercase) */
color: var(--rosies-purple-text);
margin: 0 auto 40px;
display: block;
text-align: center;
position: relative;
max-width: 720px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.rtk-testimonial-photo {
display: block;
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 28px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}
.rtk-testimonial-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rtk-testimonial-photo img[src=''],
.rtk-testimonial-photo img:not([src]) {
display: none;
}
.rtk-testimonial-quote {
font-family: var(--rosies-font-body, 'Roboto'), sans-serif;
font-size: 17px;
line-height: 1.6;
color: var(--rosies-ink);
max-width: 640px;
margin: 0 auto 12px;
text-align: center;
font-style: italic;
}
.rtk-testimonial-attribution {
font-family: var(--rosies-font-body, 'Roboto'), sans-serif;
font-size: 15px;
color: var(--rosies-ink-soft);
margin: 0 auto 24px;
text-align: center;
}
/* ============================================================
Testimonial slider — image + text sizing
============================================================
The Salient testimonial style "basic_left_image" renders the
portrait as a 52×52
inside [vc_column_text].
Any .rtk-h2-centered child centers automatically because the
band is text-align:center; grids inside restore text-align:left. */
.rtk-mint-band {
background: var(--rosies-mint);
padding: 60px 40px;
margin: 40px 0;
border-radius: 12px;
text-align: center;
}
.rtk-mint-band > .rtk-programs-grid,
.rtk-mint-band > .rtk-20years-grid {
text-align: left;
}
@media (max-width: 768px) {
.rtk-mint-band {
padding: 40px 20px;
}
}
/* Two-column grids for mint-band contents.
Used instead of [vc_row_inner] because wrapping raw HTML around
inner-row shortcodes inside [vc_column_text] is inconsistent. */
.rtk-20years-grid,
.rtk-programs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.rtk-programs-grid {
align-items: start;
gap: 32px;
}
@media (max-width: 768px) {
.rtk-20years-grid,
.rtk-programs-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* Circular photo (20 Years, testimonials) */
.rtk-circle-photo {
display: block;
width: 100%;
max-width: 380px;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.rtk-circle-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Program card — rounded photo + H3 + body + Learn More */
.rtk-program-card {
background: transparent;
padding: 12px;
position: relative;
}
.rtk-program-card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 22px;
margin-bottom: 22px;
}
/* Video thumbnail with generated white circle + cyan play triangle.
Usage: ![]()
isolation:isolate creates a new stacking context so the pseudos
always sit above the ![]()
. */
a.rtk-video-thumb {
position: relative;
display: block;
width: 100%;
max-width: 480px;
aspect-ratio: 16 / 10;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
background: #000;
isolation: isolate;
}
a.rtk-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
}
a.rtk-video-thumb::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transition: transform 0.2s ease;
z-index: 2;
pointer-events: none;
}
a.rtk-video-thumb::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 4px), -50%);
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 22px solid var(--rosies-cyan-text);
z-index: 3;
pointer-events: none;
}
a.rtk-video-thumb:hover::after {
transform: translate(-50%, -50%) scale(1.08);
}
/* If WPBakery wraps the in a should NOT be Rift Soft.
Per the live BlueHost site, the "Sharing Experiences" heading
uses Verveine (script). This is the one place a class needs to
override the panel-provided family — the design deliberately
diverges from the site-wide H2 identity. Size/weight follow
Salient's Blockquote setting shape (Verveine Regular 64/66).
Works on ANY H-tag (h1–h6) or plain block, not just
via wpautop, neutralize it */ .wpb_text_column p:has(> a.rtk-video-thumb) { margin: 0; text-align: center; } /* Testimonial block — purple heading + italic quote + attribution. The header ::before/::after arrow decorators are homepage-specific and live in homepage.css scoped to .rtk-home. INTENTIONAL FONT OVERRIDE: this