/*
Theme Name: Parasha
Theme URI: https://parashayoga.org
Author: Parasha Yoga Foundation
Author URI: https://parashayoga.org
Description: Block theme for the Parasha Yoga Foundation — Rishikesh-based yoga, meditation and healing. Deep navy grounds, gold accents, warm paper neutrals, serif headings with a light sans body. Includes patterns for teacher-training (TTC) program pages and booking-ready calls to action.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.21.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parasha
Tags: block-patterns, block-styles, full-site-editing, custom-colors, custom-logo
*/
/* ------------------------------------------------------------------
Brand aliases — mirror the Parasha design-system tokens onto the
WordPress preset variables so values stay in sync with theme.json.
------------------------------------------------------------------- */
:root {
--parasha-border: var(--wp--preset--color--border);
--parasha-gold: var(--wp--preset--color--gold);
--parasha-ring-focus: 0 0 0 3px rgba(193, 145, 63, 0.30);
}
::selection {
background: rgba(193, 145, 63, 0.25);
}
/* Gold focus ring, brand-wide */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: var(--parasha-ring-focus);
border-color: var(--parasha-gold);
}
/* ------------------------------------------------------------------
Eyebrow — uppercase Karla kicker above headings
------------------------------------------------------------------- */
.p-eyebrow {
font-family: var(--wp--preset--font-family--ui);
font-size: 13px;
font-weight: 400;
letter-spacing: var(--wp--custom--tracking--eyebrow);
text-transform: uppercase;
color: var(--wp--preset--color--gold);
}
/* ------------------------------------------------------------------
Badges / pills
------------------------------------------------------------------- */
.p-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--wp--preset--font-family--ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--wp--custom--radius--pill);
}
/* ------------------------------------------------------------------
Buttons — secondary styles (primary comes from theme.json)
------------------------------------------------------------------- */
.wp-block-button.is-style-parasha-ghost .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--navy-700);
border-color: var(--wp--preset--color--navy-700);
}
.wp-block-button.is-style-parasha-ghost .wp-block-button__link:hover {
background: var(--wp--preset--color--navy-700);
color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-parasha-on-dark .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--gold-soft);
border-color: var(--wp--preset--color--gold-soft);
}
.wp-block-button.is-style-parasha-on-dark .wp-block-button__link:hover {
background: rgba(230, 201, 143, 0.14);
color: var(--wp--preset--color--gold-soft);
}
/* ------------------------------------------------------------------
Fact / schedule rows — hairline-separated definition rows
------------------------------------------------------------------- */
.p-row {
border-bottom: 1px solid var(--parasha-border);
}
.p-row:last-child {
border-bottom: 0;
}
/* ------------------------------------------------------------------
Checklists (pricing tiers)
------------------------------------------------------------------- */
ul.p-check {
list-style: none;
padding-left: 0;
margin: 0;
}
ul.p-check li {
padding-left: 26px;
position: relative;
margin-bottom: 12px;
font-size: 15px;
}
ul.p-check li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--wp--preset--color--gold);
font-weight: 600;
}
/* Long checklists flow into two columns on wider screens */
@media (min-width: 782px) {
ul.p-check-cols {
columns: 2;
column-gap: 44px;
}
ul.p-check-cols li {
break-inside: avoid;
}
}
/* ------------------------------------------------------------------
FAQ accordions (core/details with .p-faq)
------------------------------------------------------------------- */
.p-faq {
border-bottom: 1px solid var(--parasha-border);
padding: 4px 0;
}
.p-faq > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding: 22px 0;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(19px, 2vw, 22px);
font-weight: 600;
color: var(--wp--preset--color--navy-700);
transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-faq > summary::-webkit-details-marker {
display: none;
}
.p-faq > summary::after {
content: "+";
flex: 0 0 auto;
font-family: var(--wp--preset--font-family--ui);
font-size: 24px;
font-weight: 300;
line-height: 1;
color: var(--wp--preset--color--gold);
}
.p-faq[open] > summary::after {
content: "–";
}
.p-faq > summary:hover,
.p-faq[open] > summary {
color: var(--wp--preset--color--gold-700);
}
.p-faq > :not(summary) {
padding-bottom: 22px;
max-width: 62ch;
}
/* ------------------------------------------------------------------
In-page anchor tab bar (sticky under the hero)
------------------------------------------------------------------- */
.p-tabbar {
border-bottom: 1px solid var(--parasha-border);
}
.p-tabbar a {
display: inline-block;
font-family: var(--wp--preset--font-family--ui);
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
color: var(--wp--preset--color--navy-500);
padding: 18px 0;
border-bottom: 2px solid transparent;
transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-tabbar a:hover,
.p-tabbar a[aria-current] {
color: var(--wp--preset--color--navy-700);
font-weight: 700;
border-bottom-color: var(--wp--preset--color--gold);
}
/* Anchor targets land below the sticky bar (header + the tab bar's own height) */
.p-anchor {
scroll-margin-top: calc(var(--p-header-h, 71px) + 62px);
}
/* The tab bar sticks via CSS, not a block position attribute — one rule, and
it can't be lost when a page is re-rendered from a pattern. */
.p-tabbar {
position: sticky;
top: 0;
z-index: 20;
}
/* ------------------------------------------------------------------
Self-check list — "is this for you", upgraded by initSelfCheck()
------------------------------------------------------------------- */
.p-selfcheck > * {
border-radius: 6px;
transition:
background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-selfcheck > [role="checkbox"] {
cursor: pointer;
padding-left: 10px;
padding-right: 10px;
margin-left: -10px;
}
.p-selfcheck > [role="checkbox"]:hover {
background-color: rgba(193, 145, 63, 0.07);
}
.p-selfcheck > [role="checkbox"]:focus-visible {
outline: 2px solid var(--wp--preset--color--gold);
outline-offset: 2px;
}
/* the ✦ becomes the tick when a line is chosen */
.p-selfcheck > [role="checkbox"][aria-checked="true"] {
background-color: rgba(193, 145, 63, 0.13);
}
.p-selfcheck > [role="checkbox"][aria-checked="true"] > p:first-child {
visibility: hidden;
position: relative;
}
.p-selfcheck > [role="checkbox"][aria-checked="true"] > p:first-child::after {
content: "✓";
visibility: visible;
position: absolute;
inset: 0;
color: var(--wp--preset--color--gold-700);
font-weight: 700;
}
.p-selfcheck > [role="checkbox"][aria-checked="true"] > p:last-child {
font-weight: 600;
color: var(--wp--preset--color--navy-700);
}
.p-selfcheck-tally {
margin-top: 30px;
text-align: center;
font-family: var(--wp--preset--font-family--ui);
font-size: 14px;
letter-spacing: 0.5px;
color: var(--wp--preset--color--muted-2);
transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-selfcheck-tally.is-warm {
color: var(--wp--preset--color--gold-700);
font-weight: 600;
}
/* ------------------------------------------------------------------
Card hover lift
------------------------------------------------------------------- */
.p-lift {
transition:
transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-lift:hover {
transform: translateY(-5px);
box-shadow: var(--wp--preset--shadow--deep);
}
@media (prefers-reduced-motion: reduce) {
.p-lift:hover {
transform: none;
}
}
/* ------------------------------------------------------------------
Hero — slow, breath-like Ken Burns drift on cover imagery
------------------------------------------------------------------- */
@keyframes parasha-kenburns {
from { transform: scale(1); }
to { transform: scale(1.06); }
}
.p-hero .wp-block-cover__image-background {
animation: parasha-kenburns 24s var(--wp--custom--motion--ease-in-out, ease-in-out) alternate infinite;
}
@media (prefers-reduced-motion: reduce) {
.p-hero .wp-block-cover__image-background {
animation: none;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ------------------------------------------------------------------
Utility bar (top strip above the main nav)
------------------------------------------------------------------- */
.p-utility-bar {
font-family: var(--wp--preset--font-family--ui);
font-size: 12px;
letter-spacing: 1px;
}
.p-utility-bar a {
color: inherit;
}
.p-utility-bar a:hover {
color: var(--wp--preset--color--gold-soft);
}
/* ------------------------------------------------------------------
Stat figures (At a Glance)
------------------------------------------------------------------- */
.p-stat {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 32px;
line-height: 1;
color: var(--wp--preset--color--navy-700);
}
/* Featured pricing tier */
.p-tier-featured {
border: 2px solid var(--wp--preset--color--gold);
}
/* Navigation current-page emphasis */
.wp-block-navigation .current-menu-item > a {
color: var(--wp--preset--color--navy-700);
font-weight: 600;
}
/* ==================================================================
HOME — atmosphere, mandala, reveals
================================================================== */
@keyframes p-mist-drift {
0%, 100% { transform: translateX(-2%); opacity: 0.55; }
50% { transform: translateX(2%); opacity: 0.9; }
}
@keyframes p-om-glow {
0%, 100% { opacity: 0.9; text-shadow: 0 2px 12px rgba(12,20,38,0.9), 0 0 8px rgba(240,212,154,0.15); }
50% { opacity: 1; text-shadow: 0 2px 12px rgba(12,20,38,0.9), 0 0 26px rgba(240,212,154,0.6); }
}
@keyframes p-spin-slow {
to { transform: rotate(360deg); }
}
@keyframes p-float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* hero layers (inside the cover block) */
.p-home-hero { isolation: isolate; }
.p-home-hero .p-home-canvas {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.p-home-hero .wp-block-cover__inner-container { position: static; }
.p-home-hero .p-hero-mist {
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 50% 100%, rgba(214,180,120,0.16), transparent 55%);
animation: p-mist-drift 16s ease-in-out infinite;
pointer-events: none;
}
.p-home-hero .p-hero-vignette {
position: absolute;
inset: 0;
background: radial-gradient(58% 42% at 50% 48%, rgba(10,16,32,0.4), transparent 72%);
pointer-events: none;
}
.p-home-hero .p-hero-birds {
position: absolute;
top: 130px;
left: calc(50% - 460px);
opacity: 0.45;
animation: p-float-y 7s ease-in-out infinite;
pointer-events: none;
}
.p-home-hero .p-hero-content { position: relative; z-index: 2; }
.p-hero-om {
font-family: var(--wp--preset--font-family--sanskrit);
font-size: 32px;
color: #f0d49a;
animation: p-om-glow 4.5s ease-in-out infinite;
}
.p-hero-shadowed { text-shadow: 0 2px 30px rgba(20,30,50,0.5); }
.p-hero-shadowed-sm { text-shadow: 0 2px 12px rgba(12,20,38,0.9), 0 0 3px rgba(12,20,38,0.7); }
/* mandala centerpiece (Welcome section) */
.p-mandala {
position: relative;
width: min(340px, 70vw);
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.p-mandala::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(230,201,143,0.28) 0%, rgba(230,201,143,0.05) 55%, transparent 72%);
}
.p-mandala .ring-1,
.p-mandala .ring-2,
.p-mandala .ring-3 {
position: absolute;
border-radius: 50%;
}
.p-mandala .ring-1 { inset: 6%; border: 1px solid rgba(230,201,143,0.35); }
.p-mandala .ring-2 { inset: 15%; border: 1px dashed rgba(230,201,143,0.4); animation: p-spin-slow 70s linear infinite; }
.p-mandala .ring-3 { inset: 25%; border: 1px solid rgba(230,201,143,0.5); }
.p-mandala .p-mandala-core {
position: relative;
width: 50%;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 14px 40px rgba(10,20,40,0.4);
border: 3px solid rgba(230,201,143,0.7);
}
.p-mandala .p-mandala-core img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
}
/* founder offset frame */
.p-founder-frame { position: relative; }
.p-founder-frame::before {
content: "";
position: absolute;
top: -18px;
left: -18px;
width: 160px;
height: 160px;
border: 1px solid var(--wp--preset--color--gold);
}
/* testimonial speech bubble */
.p-bubble {
position: relative;
background: #fff;
border: 1px solid #eee2ce;
box-shadow: 0 14px 34px rgba(40,45,60,0.06);
}
.p-bubble::after {
content: "";
position: absolute;
bottom: -9px;
left: 44px;
width: 18px;
height: 18px;
background: #fff;
border-right: 1px solid #eee2ce;
border-bottom: 1px solid #eee2ce;
transform: rotate(45deg);
}
/* newsletter Om watermark + pill form */
.p-om-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--wp--preset--font-family--sanskrit);
font-size: clamp(170px, 24vw, 300px);
color: rgba(230,201,143,0.05);
line-height: 1;
pointer-events: none;
}
.p-newsletter-form {
display: flex;
max-width: 520px;
margin: 34px auto 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(230,201,143,0.4);
border-radius: 48px;
padding: 6px;
}
.p-newsletter-form input[type="email"] {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
padding: 14px 24px;
font-family: var(--wp--preset--font-family--body);
font-size: 15px;
color: var(--wp--preset--color--on-dark);
}
.p-newsletter-form input::placeholder { color: rgba(243,237,224,0.55); }
.p-newsletter-form button {
background: var(--wp--preset--color--gold);
color: #fff;
border: 0;
padding: 14px 34px;
border-radius: 40px;
font-family: var(--wp--preset--font-family--ui);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
.p-newsletter-form button:hover { background: var(--wp--preset--color--gold-700); }
/* category tiles */
.p-tile { position: relative; overflow: hidden; }
.p-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--wp--custom--motion--dur-breath) var(--wp--custom--motion--ease-out);
}
.p-tile:hover img { transform: scale(1.05); }
.p-tile .p-tile-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(26,43,71,0.12), rgba(26,43,71,0.72));
}
.p-tile .p-tile-label {
position: absolute;
left: 26px;
bottom: 24px;
font-family: var(--wp--preset--font-family--heading);
font-size: 24px;
color: #fff;
letter-spacing: 1px;
z-index: 1;
}
/* gold link with underline */
.p-link-more a {
font-family: var(--wp--preset--font-family--ui);
font-size: 14px;
letter-spacing: 1px;
color: var(--wp--preset--color--navy-700);
border-bottom: 1px solid var(--wp--preset--color--gold);
padding-bottom: 4px;
}
/* ------------------------------------------------------------------
Lineage timeline (About) — a vertical rule with gold waymarks
------------------------------------------------------------------- */
.p-timeline {
position: relative;
padding-left: clamp(24px, 3vw, 34px);
border-left: 2px solid rgba(91, 110, 82, 0.4);
}
.p-timeline-item {
position: relative;
}
.p-timeline-item::before {
content: "";
position: absolute;
left: calc(-1 * clamp(24px, 3vw, 34px) - 7px);
top: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wp--preset--color--gold);
border: 2px solid var(--wp--preset--color--paper);
box-shadow: 0 0 0 2px var(--wp--preset--color--green);
}
/* on cream sections the dot's inner ring has to match the section, not paper */
.has-cream-background-color .p-timeline-item::before {
border-color: var(--wp--preset--color--cream);
}
/* ------------------------------------------------------------------
A day's rhythm (Hatha TTC) — the hours in their own column, the day
beside them. Separate from .p-timeline above (About's lineage), which
keeps its heavier three-ring waymarks: as eight stacked label/text
pairs this read as a bare list, which is not what a day looks like.
------------------------------------------------------------------- */
.p-schedule {
--p-schedule-gutter: clamp(20px, 2.4vw, 30px);
position: relative;
padding-left: var(--p-schedule-gutter);
/* The section centres its text, which left every hour and activity floating
in the middle of its column. A day reads as a left-aligned list. */
text-align: left;
}
/* A narrower measure than alignwide, or the hours sit a third of a screen away
from the activities they belong to. Three classes because the block's own
layout rule for `.alignwide` children is two, and this has to win it without
reaching for !important. */
.wp-site-blocks .wp-block-group.p-schedule,
.wp-site-blocks .p-schedule-note {
max-width: 44rem;
margin-inline: auto;
}
/* The footnote belongs to the schedule, so it lines up with the hours instead of
sitting out at the section's left edge. */
.wp-site-blocks .p-schedule-note {
/* border-box, or the gutter padding sits outside the 44rem and the note
lands 30px left of the hours instead of under them. */
box-sizing: border-box;
padding-left: clamp(20px, 2.4vw, 30px);
text-align: left;
}
/* The rows use flow layout, not constrained (see inc/teacher-trainings.php):
constrained gives every child `margin-inline: auto` plus a content-size cap,
which re-centred both paragraphs inside their grid columns and left an activity
hundreds of pixels from its hour. These resets are belt-and-braces so the
columns alone decide placement. */
.p-schedule-item > * {
margin-inline: 0;
max-width: none;
width: 100%;
}
/* The hour sits tight against the activity it belongs to rather than drifting
toward the middle of its column. */
.p-schedule-item > .p-eyebrow {
text-align: left;
}
/* The rule fades out at both ends, so the day opens and closes rather
than stopping on a hard edge. */
.p-schedule::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
bottom: 0.35em;
width: 2px;
border-radius: 2px;
background: linear-gradient(
to bottom,
transparent,
rgba(91, 110, 82, 0.42) 9%,
rgba(91, 110, 82, 0.42) 91%,
transparent
);
}
.p-schedule-item {
position: relative;
}
/* A hollow gold ring, so it needs no knowledge of the section colour
behind it — unlike the filled dot the lineage timeline uses. */
.p-schedule-item::before {
content: "";
position: absolute;
left: calc(-1 * var(--p-schedule-gutter) - 4px);
top: 0.45em;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--wp--preset--color--gold);
background: transparent;
transition:
background 420ms var(--wp--custom--motion--ease-out),
transform 420ms var(--wp--custom--motion--ease-out);
}
.p-schedule-item:hover::before {
background: var(--wp--preset--color--gold);
transform: scale(1.3);
}
/* From mid-size up the hour sits in its own column so the rows line up
as a clock instead of eight label-above-text pairs. */
@media (min-width: 720px) {
.p-schedule-item {
display: grid;
/* Wide enough for "EARLY MORNING" at the eyebrow's 6px tracking, which
wrapped to two lines in a narrower column. */
grid-template-columns: clamp(9.5rem, 14vw, 11.5rem) 1fr;
column-gap: clamp(16px, 2vw, 26px);
align-items: baseline;
}
}
/* Each row arrives just after the one above it, so the day reads downward
as it appears. Delays sit on the reveal transition set in .p-js .p-reveal
and are flattened under prefers-reduced-motion with it. */
.p-js .p-schedule-item:nth-child(2) { transition-delay: 70ms; }
.p-js .p-schedule-item:nth-child(3) { transition-delay: 140ms; }
.p-js .p-schedule-item:nth-child(4) { transition-delay: 210ms; }
.p-js .p-schedule-item:nth-child(5) { transition-delay: 280ms; }
.p-js .p-schedule-item:nth-child(6) { transition-delay: 350ms; }
.p-js .p-schedule-item:nth-child(7) { transition-delay: 420ms; }
.p-js .p-schedule-item:nth-child(8) { transition-delay: 490ms; }
.p-js .p-schedule-item:nth-child(n + 9) { transition-delay: 560ms; }
/* ------------------------------------------------------------------
Numbered rows (About — what the ashram offers)
------------------------------------------------------------------- */
.p-num {
font-family: var(--wp--preset--font-family--heading);
font-style: italic;
font-size: 26px;
line-height: 1.2;
color: var(--wp--preset--color--gold);
}
/* ------------------------------------------------------------------
Pull quote — a gold-ruled aside
------------------------------------------------------------------- */
.p-pull {
margin: 0;
padding: 4px 0 4px 26px;
border-left: 2px solid var(--wp--preset--color--green);
font-family: var(--wp--preset--font-family--heading);
font-style: italic;
font-size: 22px;
line-height: 1.55;
color: var(--wp--preset--color--navy-700);
}
/* ------------------------------------------------------------------
Location pill — a soft gold chip for a place line
------------------------------------------------------------------- */
.p-pill {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 8px 16px;
border-radius: var(--wp--custom--radius--pill);
background: rgba(230, 201, 143, 0.18);
border: 1px solid rgba(230, 201, 143, 0.4);
font-family: var(--wp--preset--font-family--ui);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--wp--preset--color--gold-soft);
}
/* The pill was written for a single location chip on a dark hero, so the base
rule above is gold-soft on a translucent gold wash. Once the teacher-training
pages used it for a run of audience chips on cream, that colour became
unreadable — pale gold on pale sand.
So: navy is the DEFAULT (light sections are the common case), and the dark
treatment is reinstated for any pill inside a cover. It has to be a
descendant selector, not a child one — core wraps cover content in
.wp-block-cover__inner-container and the pill usually sits in a group inside
that, so `:not(.wp-block-cover) > * > .p-pill` matched the hero pills too and
turned them navy on navy. */
.p-pill {
background: rgba(193, 145, 63, 0.1);
border-color: rgba(193, 145, 63, 0.32);
color: var(--wp--preset--color--navy-700);
letter-spacing: 1.6px;
}
.wp-block-cover .p-pill {
background: rgba(230, 201, 143, 0.18);
border-color: rgba(230, 201, 143, 0.4);
color: var(--wp--preset--color--gold-soft);
letter-spacing: 2.5px;
}
/* Long audience labels read better in sentence case than shouted in caps at
2.5px tracking — 10 of them in a row is a lot of uppercase. */
.p-pill.p-pill--label,
#who .p-pill {
text-transform: none;
letter-spacing: 0.2px;
font-size: 13px;
font-family: var(--wp--preset--font-family--body);
}
/* ------------------------------------------------------------------
Embedded map (Plan a Visit)
------------------------------------------------------------------- */
.p-map {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--wp--preset--shadow--deep);
background: var(--wp--preset--color--cream-card);
}
.p-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
/* the default Google tile palette runs cold against the cream page */
filter: saturate(0.82) sepia(0.06);
}
.p-map-link {
margin: 14px 0 0;
font-family: var(--wp--preset--font-family--ui);
font-size: 13px;
letter-spacing: 1px;
}
.p-map-link a {
color: var(--wp--preset--color--navy-700);
border-bottom: 1px solid var(--wp--preset--color--gold);
padding-bottom: 3px;
text-decoration: none;
}
@media (max-width: 781px) {
.p-map { aspect-ratio: 4 / 3.4; }
}
/* ------------------------------------------------------------------
Clickable card — the whole card is one link.
The card's heading holds the only anchor (so the accessible name is
the offering title, and there is exactly one tab stop), and that
anchor's ::after is stretched over the card to catch the click.
------------------------------------------------------------------ */
.p-card-link {
position: relative;
overflow: hidden;
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.p-card-link :is(h2, h3, h4) a {
color: inherit;
text-decoration: none;
}
/* The stretched ::after resolves against the nearest positioned ancestor, and
core gives the card's inner constrained group `position: relative` — which
would shrink the hit area to just the text block. Take that back so the card
itself is the containing block. */
.p-card-link > .wp-block-group,
.p-card-link > .wp-block-group.is-layout-constrained {
position: static;
}
.p-card-link :is(h2, h3, h4) a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.p-card-link img {
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-card-link:hover {
transform: translateY(-4px);
box-shadow: var(--wp--preset--shadow--raised);
}
.p-card-link:hover img {
transform: scale(1.04);
}
.p-card-link:hover :is(h2, h3, h4) a,
.p-card-link:focus-within :is(h2, h3, h4) a {
color: var(--wp--preset--color--gold-700);
}
/* keyboard focus has to be visible on the card, not just the text */
.p-card-link:focus-within {
outline: 2px solid var(--wp--preset--color--gold);
outline-offset: 3px;
}
.p-card-link :is(h2, h3, h4) a:focus-visible {
outline: none;
}
/* the "Explore →" affordance is decoration; the card is the link */
.p-card-cue {
margin-top: 4px;
font-family: var(--wp--preset--font-family--ui);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--wp--preset--color--gold-700);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-card-link:hover .p-card-cue {
transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
.p-card-link,
.p-card-link img,
.p-card-cue {
transition: none;
}
.p-card-link:hover {
transform: none;
}
.p-card-link:hover img {
transform: none;
}
.p-card-link:hover .p-card-cue {
transform: none;
}
}
/* scroll reveals — breath-like rise */
/* Scroll reveal. Scoped to .p-js (set in the head by parasha_print_script_marker)
so the hidden start state exists only where JavaScript can undo it. */
.p-js .p-reveal {
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.9s var(--wp--custom--motion--ease-out),
transform 0.9s var(--wp--custom--motion--ease-out);
will-change: opacity, transform;
}
.p-js .p-reveal.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.p-js .p-reveal {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0s;
}
}
/* section radial glow (Welcome, Newsletter) */
.p-glow-navy { position: relative; }
.p-glow-navy::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 40%, rgba(193,145,63,0.21), transparent 55%);
pointer-events: none;
}
.p-glow-navy > *:not(.p-om-watermark) { position: relative; }
.p-glow-navy > .p-om-watermark { position: absolute; }
/* category tile strip */
.p-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.p-tiles .p-tile { height: 230px; display: block; }
@media (max-width: 1024px) {
.p-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.p-tiles { grid-template-columns: 1fr; }
}
/* volunteer column divider */
@media (min-width: 782px) {
.p-col-divider { border-right: 1px solid rgba(255,255,255,0.14); }
}
/* ==================================================================
Forms (Contact Form 7) — warm paper card, gold focus
================================================================== */
.p-form-card {
background: var(--wp--preset--color--cream-card);
border: 1px solid var(--wp--preset--color--border);
border-radius: 8px;
box-shadow: var(--wp--preset--shadow--card);
padding: clamp(24px, 4vw, 44px);
}
.wpcf7 label {
display: block;
font-family: var(--wp--preset--font-family--ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--wp--preset--color--navy-700);
margin-bottom: 18px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
display: block;
width: 100%;
margin-top: 8px;
background: var(--wp--preset--color--paper);
border: 1px solid var(--wp--preset--color--border);
border-radius: 6px;
padding: 13px 16px;
font-family: var(--wp--preset--font-family--body);
font-weight: 300;
font-size: 16px;
color: var(--wp--preset--color--ink);
}
.wpcf7 textarea { min-height: 130px; resize: vertical; }
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
outline: none;
border-color: var(--wp--preset--color--gold);
box-shadow: var(--parasha-ring-focus);
}
.wpcf7 input[type="submit"] {
background: var(--wp--preset--color--gold);
color: #fff;
border: 0;
border-radius: 2px;
padding: 16px 34px;
font-family: var(--wp--preset--font-family--ui);
font-weight: 700;
font-size: 14px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: background var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--gold-700); }
.wpcf7 .wpcf7-not-valid-tip {
font-family: var(--wp--preset--font-family--body);
font-size: 13px;
text-transform: none;
letter-spacing: 0;
color: var(--wp--preset--color--terracotta);
margin-top: 6px;
}
.wpcf7 form .wpcf7-response-output {
margin: 24px 0 0;
padding: 14px 18px;
border-radius: 6px;
border: 1px solid var(--wp--preset--color--border);
font-size: 15px;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: var(--wp--preset--color--green);
color: var(--wp--preset--color--green);
background: rgba(91, 110, 82, 0.07);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
border-color: var(--wp--preset--color--terracotta);
color: var(--wp--preset--color--terracotta);
background: rgba(168, 84, 47, 0.06);
}
/* ==================================================================
Full-bleed sections sit flush — no cream gap between them
================================================================== */
.wp-block-post-content.is-layout-constrained > .alignfull {
margin-block-start: 0;
margin-block-end: 0;
}
/* ==================================================================
Buttons — lift, glow, and a slow sheen that sweeps on hover
================================================================== */
.wp-block-button__link,
.wpcf7 input[type="submit"],
.parasha-upi-link {
position: relative;
overflow: hidden;
transition:
transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
/* gold primary gets a quiet gradient so light appears to fall on it */
.wp-block-button:not(.is-style-parasha-ghost):not(.is-style-parasha-on-dark) .wp-block-button__link:not(.has-background),
.wpcf7 input[type="submit"],
.parasha-upi-link {
background-image: linear-gradient(115deg, #cb9a47 0%, #c1913f 55%, #b3843a 100%);
}
/* the sheen — a band of light that crosses the button, breath-paced */
.wp-block-button__link::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%) no-repeat;
background-size: 260% 100%;
background-position: 140% 0;
transition: background-position var(--wp--custom--motion--dur-breath) var(--wp--custom--motion--ease-out);
pointer-events: none;
}
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
background-position: -40% 0;
}
/* lift + variant-tinted glow */
.wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover,
.parasha-upi-link:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(193, 145, 63, 0.32);
}
.wp-block-button__link:active,
.wpcf7 input[type="submit"]:active {
transform: translateY(0);
transition-duration: var(--wp--custom--motion--dur-fast);
box-shadow: 0 4px 10px rgba(193, 145, 63, 0.22);
}
.wp-block-button .wp-block-button__link[class*="navy"]:hover {
box-shadow: 0 12px 26px rgba(20, 33, 54, 0.35);
}
.wp-block-button.is-style-parasha-ghost .wp-block-button__link:hover {
box-shadow: 0 12px 26px rgba(34, 53, 90, 0.22);
}
.wp-block-button.is-style-parasha-on-dark .wp-block-button__link:hover {
box-shadow: 0 12px 30px rgba(230, 201, 143, 0.22);
}
@media (prefers-reduced-motion: reduce) {
.wp-block-button__link,
.wpcf7 input[type="submit"],
.parasha-upi-link { transition: none; }
.wp-block-button__link:hover { transform: none; }
.wp-block-button__link::after { display: none; }
}
/* ==================================================================
Premium pass — sticky shrinking header, grain, transitions, finish
================================================================== */
/* sticky header that condenses on scroll — the whole header sticks,
with the utility bar tucked just above the viewport */
header.wp-block-template-part {
position: sticky;
top: -35px;
z-index: 40;
}
/* The condensing header animates its own height; scroll anchoring would
compensate each frame and make the page fight the user's scroll. */
body {
overflow-anchor: none;
}
/* The palette slug "border" makes WP emit `.has-border-color { color: … !important }`
— the same class core adds to any block with a custom border color. A block
with a border but no chosen text color must not get hairline-colored text. */
.has-border-color:not(.has-text-color) {
color: inherit !important;
}
.p-site-nav {
transition:
padding var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out),
box-shadow var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out);
}
html.p-scrolled .p-site-nav {
padding-top: 6px !important;
padding-bottom: 6px !important;
box-shadow: 0 10px 30px rgba(60, 40, 20, 0.10);
}
.p-site-nav .wp-block-site-logo img {
transition: width var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out),
height var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out);
}
html.p-scrolled .p-site-nav .wp-block-site-logo img {
width: 38px !important;
height: 38px !important;
}
html.p-scrolled .p-site-nav .wp-block-site-title { display: none; }
/* Sticky in-page tab bar sits below the nav. `--p-header-h` is the header's
stuck (visible) height — measured and kept current by initHeaderHeight() in
parasha-ui.js, because the header has three rows, two heights and a
breakpoint that swaps the nav row for the hamburger. These are only the
pre-JS starting values. */
:root { --p-header-h: 71px; }
html.p-scrolled { --p-header-h: 51px; }
@media (min-width: 1025px) {
:root { --p-header-h: 179px; }
html.p-scrolled { --p-header-h: 136px; }
}
.p-tabbar { top: var(--p-header-h); transition: top var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out); }
/* film grain — an almost invisible texture that makes flat color feel like paper */
body::after {
content: "";
position: fixed;
inset: -50%;
width: 200%;
height: 200%;
pointer-events: none;
z-index: 9999;
opacity: 0.028;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* cross-fade page transitions (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.45s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
/* gold-on-navy scrollbar */
html {
scrollbar-color: rgba(193, 145, 63, 0.6) rgba(20, 33, 54, 0.15);
}
body::-webkit-scrollbar { width: 11px; }
body::-webkit-scrollbar-track { background: #ece1cd; }
body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #c1913f, #a97e2f);
border-radius: 6px;
border: 2px solid #ece1cd;
}
/* typographic finish */
.wp-block-post-content p,
.wp-block-pullquote p,
blockquote p {
hanging-punctuation: first;
}
/* drop cap on journal articles */
.single-post .wp-block-post-content > p:first-of-type::first-letter {
font-family: var(--wp--preset--font-family--display);
font-size: 3.6em;
line-height: 0.82;
float: left;
padding: 0.06em 0.12em 0 0;
color: var(--wp--preset--color--gold);
}
/* breathing scroll cue at the base of the hero */
.p-scroll-cue {
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(240, 212, 154, 0.85);
font-family: var(--wp--preset--font-family--ui);
font-size: 10px;
letter-spacing: 3.5px;
text-transform: uppercase;
text-decoration: none;
animation: p-cue-breathe 4.5s ease-in-out infinite;
}
.p-scroll-cue span.line {
display: block;
width: 1px;
height: 34px;
background: linear-gradient(180deg, rgba(240, 212, 154, 0.9), transparent);
}
@keyframes p-cue-breathe {
0%, 100% { opacity: 0.55; transform: translateX(-50%) translateY(0); }
50% { opacity: 1; transform: translateX(-50%) translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
.p-scroll-cue { animation: none; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}
/* header: true centering — grid (1fr auto 1fr) instead of space-between,
so the logo is centered on the page regardless of side-group widths */
.p-site-nav > .alignwide {
display: grid !important;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.p-site-nav > .alignwide > :first-child { justify-self: start; }
.p-site-nav > .alignwide > :nth-child(2) { justify-self: center; }
.p-site-nav > .alignwide > :last-child { justify-self: end; }
@media (max-width: 781px) {
.p-site-nav > .alignwide { grid-template-columns: auto 1fr auto; }
}
/* logo: redraw a clean circular edge so the disc never looks clipped */
.p-site-nav .wp-block-site-logo img,
.wp-block-template-part footer .wp-block-site-logo img {
border-radius: 50%;
background: #fff;
padding: 3px;
box-shadow: 0 0 0 1px var(--wp--preset--color--border);
}
/* ==================================================================
Gatherings — event cards with serif date tiles
================================================================== */
.p-gatherings {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
max-width: var(--wp--style--global--wide-size);
margin: 0 auto;
}
.p-gathering {
display: flex;
gap: 22px;
background: var(--wp--preset--color--cream-card);
border: 1px solid var(--wp--preset--color--border);
border-radius: 8px;
padding: 30px 28px;
box-shadow: var(--wp--preset--shadow--card);
transition:
transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}
.p-gathering:hover {
transform: translateY(-4px);
box-shadow: var(--wp--preset--shadow--deep);
}
.p-gathering-date {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 64px;
height: fit-content;
padding: 12px 10px 10px;
background: var(--wp--preset--color--paper);
border: 1px solid var(--wp--preset--color--border);
border-top: 3px solid var(--wp--preset--color--gold);
border-radius: 6px;
}
.p-gathering-date .wd {
font-family: var(--wp--preset--font-family--ui);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--wp--preset--color--muted-2);
}
.p-gathering-date .day {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 34px;
line-height: 1.05;
color: var(--wp--preset--color--navy-700);
}
.p-gathering-date .mo {
font-family: var(--wp--preset--font-family--ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--wp--preset--color--terracotta);
}
.p-gathering-body { min-width: 0; display: flex; flex-direction: column; }
.p-gathering-title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 23px;
line-height: 1.25;
margin: 0 0 8px;
}
.p-gathering-title a { color: var(--wp--preset--color--navy-700); text-decoration: none; }
.p-gathering-title a:hover { color: var(--wp--preset--color--gold); }
.p-gathering-when {
font-family: var(--wp--preset--font-family--ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--wp--preset--color--terracotta);
margin-bottom: 4px;
}
.p-gathering-venue {
font-family: var(--wp--preset--font-family--ui);
font-size: 12px;
letter-spacing: 1px;
color: var(--wp--preset--color--muted-2);
margin-bottom: 10px;
}
.p-gathering-excerpt {
font-size: 15px;
font-weight: 300;
line-height: 1.7;
color: var(--wp--preset--color--muted);
margin: 0 0 18px;
}
.p-gathering-cta {
margin-top: auto;
align-self: flex-start;
font-family: var(--wp--preset--font-family--ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--wp--preset--color--gold);
text-decoration: none;
border-bottom: 1px solid rgba(193, 145, 63, 0.4);
padding-bottom: 3px;
transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-gathering-cta span { display: inline-block; transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out); }
.p-gathering-cta:hover { color: var(--wp--preset--color--gold-700); }
.p-gathering-cta:hover span { transform: translateX(4px); }
.p-gatherings-empty {
text-align: center;
padding: 40px 0;
color: var(--wp--preset--color--muted-2);
}
.p-gatherings-empty .p-gatherings-om {
display: block;
font-family: var(--wp--preset--font-family--sanskrit);
font-size: 30px;
color: var(--wp--preset--color--gold);
margin-bottom: 10px;
}
/* ==================================================================
Responsive pass — phones & tablets (2026-07-05)
The desktop composition (two-row ceremonial header, 4-across grids)
is deliberate; below 1024px it must recompose, not just shrink.
================================================================== */
/* --- tablet & phone: one-row header, hamburger through 1024 -------- */
@media (max-width: 1024px) {
/* sides size to content so nothing gets squeezed into wrapping */
.p-site-nav > .alignwide { grid-template-columns: auto 1fr auto; }
/* logo + wordmark: one compact row instead of the stacked column */
.p-site-nav > .alignwide > :nth-child(2) {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 12px;
}
/* the disc never deforms — when space runs out the wordmark yields */
.p-site-nav .wp-block-site-logo { flex: 0 0 auto; }
.p-site-nav .wp-block-site-logo img {
width: 42px !important;
height: 42px !important;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.p-site-nav > .alignwide > :nth-child(2) { min-width: 0; }
.p-site-nav .wp-block-site-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.p-site-nav .wp-block-site-title a { white-space: nowrap; }
.p-site-nav { padding-top: 10px !important; padding-bottom: 10px !important; }
.p-site-nav .wp-block-navigation.is-content-justification-right { flex-wrap: nowrap; }
.p-site-nav .wp-block-button__link { white-space: nowrap; }
}
/* narrow tablets: not enough room for About/Events beside the wordmark;
they live in the footer (and Events doubles as Retreats in the menu) */
@media (min-width: 641px) and (max-width: 767px) {
.p-site-nav .wp-block-navigation.is-content-justification-right { display: none; }
}
/* --- phone: slim the chrome to one quiet line ----------------------- */
@media (max-width: 640px) {
/* utility bar: keep only the links row; location lives in the footer */
.p-utility-bar .alignwide > p:first-child { display: none; }
.p-utility-bar { padding-top: 7px !important; padding-bottom: 7px !important; }
/* the Shop link is still a placeholder — don't spend phone width on it */
.p-utility-bar .alignwide > p:last-child > a:first-child { display: none; }
/* About/Events live in the footer; Donate stays */
.p-site-nav .wp-block-navigation.is-content-justification-right { display: none; }
.p-site-nav .wp-block-button__link { padding: 9px 18px !important; font-size: 12px !important; white-space: nowrap; }
.p-site-nav .wp-block-site-title,
.p-site-nav .wp-block-site-title a { font-size: 12.5px !important; letter-spacing: 2.5px; }
.p-site-nav > .alignwide > :nth-child(2) { flex-wrap: nowrap !important; }
}
/* below desktop, nothing may drag the page sideways — inner scrollers
(swipe rows, chip bars) keep their own overflow untouched */
@media (max-width: 1024px) {
html { overflow-x: clip; }
}
/* --- WP grid sections: recompose below the desktop ------------------ */
/* photo-tile grids become a swipeable row with a peek of the next card */
@media (max-width: 640px) {
.entry-content .wp-block-group.is-layout-grid:has(img) {
display: flex !important;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.entry-content .wp-block-group.is-layout-grid:has(img)::-webkit-scrollbar { display: none; }
.entry-content .wp-block-group.is-layout-grid:has(img) > * {
flex: 0 0 72%;
scroll-snap-align: start;
}
/* text grids (values, stats) read as a single calm column */
.entry-content .wp-block-group.is-layout-grid:not(:has(img)) {
grid-template-columns: 1fr !important;
}
}
/* tablets: 4-across becomes a generous 2×2 */
@media (min-width: 641px) and (max-width: 1024px) {
.entry-content .wp-block-group.is-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* --- TTC sticky section nav: swipeable chips, never wraps ----------- */
@media (max-width: 900px) {
.p-tabbar p {
white-space: nowrap;
overflow-x: auto;
scrollbar-width: none;
/* soft fade hints that the row continues */
-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.p-tabbar p::-webkit-scrollbar { display: none; }
.p-tabbar a { padding: 14px 0; font-size: 13px; }
.p-tabbar { top: 56px; }
html.p-scrolled .p-tabbar { top: 56px; }
.p-anchor { scroll-margin-top: 118px; }
}
/* ==================================================================
Mega menu — full-screen navigation takeover
Marcellus links with Devanagari numerals, a temple-arch photo panel
that answers the pointer, staggered entrance. WP navigation markup
(overlayMenu:always) is kept for accessibility; this is skin + JS.
================================================================== */
/* the trigger: quiet, inks like the rest of the chrome */
.p-site-nav .wp-block-navigation__responsive-container-open {
color: var(--wp--preset--color--navy-700);
}
/* full-screen navy takeover */
.p-site-nav .p-mega-nav .wp-block-navigation__responsive-container.is-menu-open {
background:
radial-gradient(90% 70% at 82% 18%, rgba(193, 145, 63, 0.16), transparent 62%),
linear-gradient(160deg, #142136 0%, #1a2b47 55%, #22355a 100%);
color: var(--wp--preset--color--paper);
padding: 0;
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__responsive-dialog {
width: 100%;
height: 100%;
}
/* content becomes a stage: links left, arch visual right, meta below */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__responsive-container-content {
display: grid !important;
grid-template-columns: 1.1fr 0.9fr;
grid-template-rows: 1fr auto;
align-items: center;
width: 100%;
height: 100%;
padding: clamp(70px, 10vh, 110px) clamp(24px, 6vw, 96px) clamp(20px, 4vh, 40px);
gap: clamp(18px, 4vw, 56px);
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container {
display: block;
counter-reset: pmenu;
max-height: 100%;
overflow-y: auto;
scrollbar-width: none;
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container::-webkit-scrollbar {
display: none;
}
/* Top level only — the `>` matters: submenu s also carry
.wp-block-navigation-item and would otherwise inherit display type,
the Devanagari counter and the rise animation. */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
display: block;
counter-increment: pmenu;
margin: clamp(2px, 1vh, 10px) 0;
opacity: 0;
transform: translateY(26px);
animation: p-menu-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.11s; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.17s; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.23s; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.29s; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.35s; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7) { animation-delay: 0.41s; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n + 8) { animation-delay: 0.47s; }
@keyframes p-menu-rise {
to { opacity: 1; transform: none; }
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
position: relative;
display: inline-block;
font-family: var(--wp--preset--font-family--serif-alt);
font-size: clamp(24px, 4.2vh, 44px);
line-height: 1.16;
color: #f3ede0;
padding-left: clamp(44px, 5vw, 66px);
transition:
color var(--wp--custom--motion--dur-base, 0.3s) ease,
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Devanagari numerals as waymarks */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
content: counter(pmenu, devanagari);
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
font-family: var(--wp--preset--font-family--sanskrit);
font-size: clamp(13px, 1.8vh, 17px);
color: rgba(230, 201, 143, 0.75);
letter-spacing: 2px;
}
/* growing gold rule under the hovered line */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: clamp(44px, 5vw, 66px);
right: 100%;
bottom: 2px;
height: 1px;
background: linear-gradient(90deg, var(--wp--preset--color--gold), transparent);
transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--gold-soft, #e6c98f);
transform: translateX(10px);
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus::after {
right: -14px;
}
/* ---- overlay submenus: quiet columns under their parent -------------
Core makes submenus static + visible inside `is-menu-open`, so these
are always on screen. They must read as supporting text, never as
another row of display type. */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container {
position: static !important;
display: flex !important;
/* core sets column direction for the static overlay submenu — override it,
or six children stack into six rows and the overlay overflows */
flex-direction: row !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 2px clamp(18px, 2.4vw, 38px);
width: auto;
min-width: 0;
margin: 6px 0 2px;
padding: 0 0 0 clamp(44px, 5vw, 66px);
border: 0;
background: transparent !important;
opacity: 1;
visibility: visible;
box-shadow: none;
}
/* level-2 items are columns in the row, not full-width rows */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
width: auto;
min-width: 0;
flex: 0 0 auto;
margin: 0;
}
/* level 2 leaf links and level 3 links */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: block;
padding: 2px 0;
font-family: var(--wp--preset--font-family--ui);
font-size: clamp(11px, 1.5vh, 13px);
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(243, 237, 224, 0.72);
white-space: nowrap;
transition: color 0.25s ease;
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--gold-soft, #e6c98f);
}
/* a level-2 group (Yoga / Meditation / Pranayama) becomes a labelled column */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
display: block;
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation-item__content {
color: rgba(230, 201, 143, 0.9);
letter-spacing: 2.4px;
pointer-events: none;
}
/* level 3 sits directly beneath its group label, stacked not wrapped */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
display: block !important;
margin: 0;
padding: 0 0 0 10px;
border-left: 1px solid rgba(230, 201, 143, 0.24);
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
text-transform: none;
letter-spacing: 0.6px;
font-size: clamp(11px, 1.45vh, 13px);
}
/* everything is expanded — the toggle chevrons are noise */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-icon {
display: none;
}
/* the arch: photos crossfade as the pointer moves through the list */
.p-menu-visual {
grid-column: 2;
grid-row: 1;
position: relative;
justify-self: center;
width: min(100%, 400px);
aspect-ratio: 3 / 4;
margin: 0;
border-radius: 999px 999px 20px 20px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(230, 201, 143, 0.35),
0 0 0 9px rgba(20, 33, 54, 0.6),
0 0 0 10px rgba(230, 201, 143, 0.25);
opacity: 0;
animation: p-menu-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
.p-menu-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.07);
transition: opacity 0.55s ease, transform 6s linear;
}
.p-menu-visual img.is-active {
opacity: 1;
transform: scale(1);
}
.p-menu-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 62%, rgba(20, 33, 54, 0.5));
pointer-events: none;
}
/* meta strip along the bottom of the takeover */
.p-menu-meta {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px 28px;
flex-wrap: wrap;
border-top: 1px solid rgba(230, 201, 143, 0.22);
padding-top: 16px;
font-family: var(--wp--preset--font-family--ui);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(243, 237, 224, 0.7);
}
.p-menu-meta a { color: #e6c98f; text-decoration: none; }
.p-menu-meta a:hover { color: #f0d49a; }
.p-menu-meta .p-menu-mantra { font-family: var(--wp--preset--font-family--sanskrit); text-transform: none; letter-spacing: 1px; }
/* close: a slim gold ring that turns as you reach for it */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__responsive-container-close {
position: absolute;
top: max(18px, 3vh);
right: max(22px, 4vw);
width: 50px;
height: 50px;
display: grid;
place-items: center;
border: 1px solid rgba(230, 201, 143, 0.5);
border-radius: 50%;
color: #e6c98f;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__responsive-container-close:hover {
transform: rotate(90deg);
background: rgba(230, 201, 143, 0.12);
}
/* phones & small tablets: arch crowns the list, everything scrolls */
@media (max-width: 900px), (max-height: 620px) {
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__responsive-container-content {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
align-items: start;
overflow-y: auto;
padding-top: clamp(64px, 9vh, 84px);
}
.p-menu-visual {
grid-column: 1;
grid-row: 1;
width: min(52vw, 230px);
aspect-ratio: 4 / 4.6;
}
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container { grid-row: 2; align-self: center; }
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: clamp(24px, 4.4vh, 40px); }
.p-menu-meta { grid-column: 1; grid-row: 3; justify-content: flex-start; }
/* A wrapped row of groups reads as scrappy at phone widths — the columns
break in different places depending on label length. Stack it. */
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation__submenu-container {
flex-direction: column !important;
gap: 0;
padding-left: clamp(44px, 5vw, 66px);
}
}
@media (prefers-reduced-motion: reduce) {
.p-site-nav .p-mega-nav .is-menu-open .wp-block-navigation-item,
.p-menu-visual { animation: none; opacity: 1; transform: none; }
.p-menu-visual img { transition: opacity 0.2s ease; transform: none; }
}
/* ==================================================================
Desktop navigation bar (.p-nav-row / .p-desktop-nav)
The nav gets its own row under the centred logo, so six top-level
items and their panels have the full content width instead of being
squeezed against the wordmark.
Three levels are shown in ONE panel — Yoga / Meditation / Prāṇāyāma
become column headings with Beginners / Advanced beneath each. No
nested flyouts, so nothing has to be hover-chased.
Below 1025px this row is hidden and the .p-mega-nav hamburger
overlay takes over.
================================================================== */
.p-nav-row {
position: relative;
z-index: 30;
}
/* --- the bar ------------------------------------------------------- */
.p-desktop-nav .wp-block-navigation__container {
gap: 0;
flex-wrap: nowrap;
}
/* The label and its chevron are separate flex children of the , so the
spacing and the underline belong to the item — put padding on the anchor and
the chevron drifts a whole gutter away from its own label. */
.p-desktop-nav .wp-block-navigation__container > .wp-block-navigation-item {
display: flex;
align-items: center;
padding: 0 clamp(10px, 1.3vw, 18px);
border-bottom: 2px solid transparent;
transition: border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-desktop-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
display: block;
padding: 15px 0;
font-family: var(--wp--preset--font-family--ui);
font-size: 14px;
letter-spacing: 0.6px;
font-weight: 500;
white-space: nowrap;
color: var(--wp--preset--color--navy-700);
transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-desktop-nav .wp-block-navigation__container > .wp-block-navigation-item:hover,
.p-desktop-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
.p-desktop-nav .wp-block-navigation__container > .wp-block-navigation-item:has(> .wp-block-navigation-item__content[aria-current]) {
border-bottom-color: var(--wp--preset--color--gold);
}
.p-desktop-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.p-desktop-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.p-desktop-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current] {
color: var(--wp--preset--color--gold-700);
}
/* the chevron on a parent item — quiet, and it turns when the panel is open */
.p-desktop-nav .wp-block-navigation__submenu-icon {
margin: 0 0 0 4px;
padding: 0;
min-width: 0;
color: var(--wp--preset--color--muted-2);
background: transparent;
transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-desktop-nav .wp-block-navigation__submenu-icon svg {
width: 11px;
height: 11px;
}
.p-desktop-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.p-desktop-nav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
transform: rotate(180deg);
}
/* --- the dropdown panel -------------------------------------------
Core closes a submenu with `height: 0; width: 0; overflow: hidden` and only
reopens it for `aria-expanded="true"` (its Interactivity API) — the CSS
`:focus-within` branch is explicitly excluded for `.open-on-hover-click`.
Rather than depend on that script, the panel is always laid out here and
shown by our own `:hover` / `:focus-within`, so pointer and keyboard behave
identically. The forced height/width/overflow keep core's closed values from
collapsing the panel in either state. */
.p-desktop-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
top: 100%;
left: 50%;
height: auto !important;
width: auto !important;
overflow: visible !important;
transform: translateX(-50%) translateY(8px);
min-width: 232px;
padding: 20px 26px;
background: var(--wp--preset--color--paper);
border: 1px solid var(--wp--preset--color--border);
border-top: 2px solid var(--wp--preset--color--gold);
border-radius: 0 0 8px 8px;
box-shadow: 0 22px 48px rgba(60, 40, 20, 0.16);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard),
transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
visibility var(--wp--custom--motion--dur-base) linear;
}
.p-desktop-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
.p-desktop-nav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* A hover bridge across the gap between the bar and the panel, so the pointer
can travel down without the panel closing under it. */
.p-desktop-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -10px;
height: 10px;
}
/* links inside a panel */
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: block;
padding: 7px 0;
font-family: var(--wp--preset--font-family--body);
font-size: 15px;
letter-spacing: 0;
font-weight: 400;
white-space: nowrap;
color: var(--wp--preset--color--ink);
border: 0;
border-radius: 0;
background: transparent;
transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-standard);
}
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--gold-700);
background: transparent;
}
/* --- mega panels: links on the left, a picture on the right --------
`.p-mm` / `.p-mm-wide` are added by initDesktopMega() once it has injected
the visual, so a panel never gets mega layout without an image in it. */
.p-desktop-nav .wp-block-navigation__container > .has-child > .p-mm {
--mm-vis: 226px;
--mm-pad: clamp(24px, 2.4vw, 34px);
--mm-gap: clamp(24px, 2.6vw, 44px);
display: grid;
gap: 6px var(--mm-gap);
align-items: start;
/* `align-content` defaults to stretch on a grid, so the min-height reserved
for the picture was being handed to the rows — which is where the dead
space between the overview link and the columns came from. */
align-content: start;
/* right-hand space is reserved by padding, not a grid column — see the
note on .p-mm-visual below */
padding: 26px calc(var(--mm-pad) + var(--mm-vis) + var(--mm-gap)) 24px var(--mm-pad);
/* just enough that the picture is never a sliver; the links drive the rest */
min-height: 212px;
}
/* two-level panels (Retreats, About Us): a single link column */
.p-desktop-nav .wp-block-navigation__container > .has-child > .p-mm:not(.p-mm-wide) {
grid-template-columns: minmax(150px, 1fr);
min-width: 452px;
}
/* Practices: a discipline per column, the overview spanning them */
.p-desktop-nav .wp-block-navigation__container > .has-child > .p-mm-wide {
--mm-vis: 286px;
grid-template-columns: repeat(4, minmax(106px, 1fr));
}
/* The wide panel is a true mega panel — full content width, not tethered to the
width of its own menu item. Making the parent static hands the
positioning context to .p-nav-row, which spans the row inside its gutters. */
.p-desktop-nav .wp-block-navigation__container > .has-child:has(> .p-mm-wide) {
position: static;
}
.p-desktop-nav .wp-block-navigation__container > .has-child > .p-mm-wide {
left: 0;
right: 0;
transform: translateY(8px);
min-width: 0;
border-radius: 0 0 10px 10px;
}
.p-desktop-nav .wp-block-navigation__container > .has-child:hover > .p-mm-wide,
.p-desktop-nav .wp-block-navigation__container > .has-child:focus-within > .p-mm-wide {
transform: translateY(0);
}
/* the overview link ("All Practices") spans the link columns, not the picture */
.p-desktop-nav .p-mm-wide > .wp-block-navigation-link {
grid-column: 1 / -2;
margin-bottom: 6px;
padding-bottom: 12px;
border-bottom: 1px solid var(--wp--preset--color--border);
}
.p-desktop-nav .p-mm-wide > .wp-block-navigation-link .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--ui);
font-size: 13px;
letter-spacing: 0.4px;
font-weight: 500;
}
/* the discipline groups sit on one row, in source order */
.p-desktop-nav .p-mm-wide > .wp-block-navigation-submenu {
grid-row: 2;
}
/* --- the picture ---------------------------------------------------- */
/* The picture is positioned, not placed in the grid. As a grid item it would
have to span every content row, and the row count differs per panel (and the
rows are implicit, so `grid-row: 1 / -1` resolves to a single row) — which
inflated row 1 to the image's height and left a dead gap under the overview
link. Absolute keeps the links' layout independent of the image's height. */
.p-desktop-nav .p-mm-visual {
position: absolute;
top: 26px;
bottom: 24px;
right: var(--mm-pad);
width: var(--mm-vis);
margin: 0;
padding: 0;
}
/* Fills the panel's content height rather than setting it from an aspect ratio —
otherwise the picture column runs deeper than the links and the panel carries
a band of empty space. The photo is cover-cropped to whatever height results. */
.p-desktop-nav .p-mm-frame {
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
background: var(--wp--preset--color--sand);
box-shadow: 0 10px 26px rgba(60, 40, 20, 0.16);
}
.p-desktop-nav .p-mm-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.05);
transition: opacity 0.45s ease, transform 3s linear;
}
.p-desktop-nav .p-mm-frame img.is-active {
opacity: 1;
transform: scale(1);
}
/* scrim so the label holds over any photograph */
.p-desktop-nav .p-mm-frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 38%, rgba(20, 33, 54, 0.86));
pointer-events: none;
}
.p-desktop-nav .p-mm-caption {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding: 14px 16px 15px;
}
.p-desktop-nav .p-mm-caption strong {
display: block;
margin-bottom: 3px;
font-family: var(--wp--preset--font-family--ui);
font-size: 10.5px;
letter-spacing: 2.2px;
text-transform: uppercase;
font-weight: 600;
color: var(--wp--preset--color--gold-soft);
}
.p-desktop-nav .p-mm-caption span {
display: block;
font-size: 12.5px;
line-height: 1.5;
color: rgba(253, 251, 245, 0.9);
}
/* Narrower desktops can't afford five columns — drop the picture rather than
squeeze the links, which is what made the old menu feel messy. */
@media (max-width: 1200px) {
.p-desktop-nav .p-mm-visual {
display: none;
}
/* reclaim the space the picture was reserving */
.p-desktop-nav .wp-block-navigation__container > .has-child > .p-mm {
padding-right: var(--mm-pad);
min-height: 0;
}
.p-desktop-nav .wp-block-navigation__container > .has-child > .p-mm-wide {
grid-template-columns: repeat(4, minmax(104px, 1fr));
}
.p-desktop-nav .wp-block-navigation__container > .has-child > .p-mm:not(.p-mm-wide) {
min-width: 232px;
}
}
@media (prefers-reduced-motion: reduce) {
.p-desktop-nav .p-mm-frame img {
transition: opacity 0.2s ease;
transform: none;
}
.p-desktop-nav .p-mm-frame img.is-active {
transform: none;
}
}
/* level 2 inside the Practices panel = a column heading, not a link to chase */
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
display: block;
}
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation-item__content {
padding: 0 0 6px;
font-family: var(--wp--preset--font-family--ui);
font-size: 11px;
letter-spacing: 2.2px;
text-transform: uppercase;
font-weight: 600;
color: var(--wp--preset--color--gold-700);
pointer-events: none;
}
/* its chevron would be meaningless — the children are already visible */
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
display: none;
}
/* Level 3 sits statically under its heading instead of flying out.
Core keeps a closed submenu at `height: 0; overflow: hidden` (it animates
height open) — so opacity/visibility alone leaves it collapsed and invisible.
Both have to be taken back. */
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
position: static !important;
display: block !important;
height: auto !important;
min-height: 0;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
min-width: 0;
width: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 5px 0;
font-size: 14px;
color: var(--wp--preset--color--muted);
}
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.p-desktop-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--gold-700);
}
/* --- the desktop/mobile switch ------------------------------------ */
/* Above 1024 the bar is the navigation, so the hamburger goes away. */
@media (min-width: 1025px) {
.p-site-nav .p-mega-nav {
display: none;
}
/* The brand row is a three-slot grid. `display: none` takes the hamburger
out of grid flow, so the remaining two children would slide into slots 1
and 2 and pull the logo off centre — pin them to the slots they belong in.
(`:nth-child` still counts the hidden element, so the indexes hold.) */
.p-site-nav > .alignwide {
grid-template-columns: 1fr auto 1fr;
}
.p-site-nav > .alignwide > :nth-child(2) {
grid-column: 2;
justify-self: center;
}
.p-site-nav > .alignwide > :last-child {
grid-column: 3;
justify-self: end;
}
}
/* Below 1025 the hamburger overlay is the navigation. */
@media (max-width: 1024px) {
.p-nav-row {
display: none;
}
}
/* ==================================================================
Display type, Sanskrit sub-headings, prominent menu trigger
================================================================== */
/* Rozha One — the bundled ITF display face finally does the talking.
H1s and stat numerals only; Cormorant keeps everything else. */
h1,
.p-hero h1 {
font-family: var(--wp--preset--font-family--display);
font-weight: 400;
letter-spacing: 0.005em;
line-height: 1.18;
}
.p-stat {
font-family: var(--wp--preset--font-family--display);
font-weight: 400;
}
/* Devanagari line beneath important headings:
साधना
right after the heading */
.p-devanagari-sub {
font-family: var(--wp--preset--font-family--sanskrit);
font-size: clamp(16px, 2vw, 20px);
color: var(--wp--preset--color--gold);
letter-spacing: 1.5px;
margin-top: -4px;
margin-bottom: 18px;
opacity: 0.85;
}
/* the Sanskrit line sits wherever its heading sits */
.has-text-align-center + .p-devanagari-sub { text-align: center; }
.has-text-align-right + .p-devanagari-sub { text-align: right; }
/* On dark covers the dark gold + 0.85 opacity disappears — go light and solid. */
.wp-block-cover .p-devanagari-sub {
color: var(--wp--preset--color--gold-soft);
opacity: 1;
}
/* Devanagari conjuncts + vowel marks need headroom or they clip. */
.has-sanskrit-font-family {
line-height: 1.5;
}
/* ------------------------------------------------------------------
Hero scrim — directional darkening so copy stays legible over
bright photography. `dimRatio` alone can't do this: WordPress only
ships dim-opacity classes in steps of 10 (has-background-dim-82
matches nothing and silently falls back to opacity .5), and an even
dim washes the whole photo out to keep one corner readable.
------------------------------------------------------------------- */
/* ::after is the last child, so it paints over the copy unless the
inner container is lifted into its own stacking position. */
.p-hero-scrim > .wp-block-cover__inner-container {
position: relative;
z-index: 1;
}
.p-hero-scrim::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(16, 26, 46, 0.86) 0%,
rgba(16, 26, 46, 0.7) 38%,
rgba(16, 26, 46, 0.22) 72%,
rgba(16, 26, 46, 0) 100%
);
}
/* Centered hero copy wants an even veil, not a side scrim. */
.p-hero-scrim.p-hero-scrim-center::after {
background: linear-gradient(
180deg,
rgba(16, 26, 46, 0.42) 0%,
rgba(16, 26, 46, 0.66) 55%,
rgba(16, 26, 46, 0.8) 100%
);
}
/* No horizontal room to fade on phones — veil the whole frame. */
@media (max-width: 781px) {
.p-hero-scrim::after {
background: linear-gradient(
180deg,
rgba(16, 26, 46, 0.62) 0%,
rgba(16, 26, 46, 0.78) 100%
);
}
}
/* menu trigger: a gold-ringed circle with a MENU wordmark — obviously a door */
.p-site-nav .wp-block-navigation__responsive-container-open {
position: relative;
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid rgba(193, 145, 63, 0.55);
border-radius: 50%;
color: var(--wp--preset--color--navy-700);
transition: background 0.3s ease, box-shadow 0.3s ease;
animation: p-menu-pulse 3s ease-out 1.5s 3;
}
.p-site-nav .wp-block-navigation__responsive-container-open::after {
content: "MENU";
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
font-family: var(--wp--preset--font-family--ui);
font-size: 10px;
font-weight: 700;
letter-spacing: 3.5px;
color: var(--wp--preset--color--navy-500);
}
.p-site-nav .wp-block-navigation__responsive-container-open:hover {
background: rgba(193, 145, 63, 0.12);
}
@keyframes p-menu-pulse {
0% { box-shadow: 0 0 0 0 rgba(193, 145, 63, 0.35); }
70% { box-shadow: 0 0 0 13px rgba(193, 145, 63, 0); }
100% { box-shadow: 0 0 0 0 rgba(193, 145, 63, 0); }
}
/* phones + tablets: the ringed icon says it all — no MENU wordmark */
@media (max-width: 1024px) {
.p-site-nav .wp-block-navigation__responsive-container-open::after { display: none; }
}
@media (max-width: 640px) {
.p-site-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.p-site-nav .wp-block-navigation__responsive-container-open { animation: none; }
}
/* founder offset frame: tuck the accent inside the phone gutter */
@media (max-width: 640px) {
.p-founder-frame::before { top: -10px; left: -10px; width: 90px; height: 90px; }
}
/* ==================================================================
HERO — polished cinematic slider (parasha-home.js initHeroSlider):
a golden-dust WebGL canvas floats over slides that FADE OVER each
other (incoming fades in above the outgoing — never a dark dip),
the active image drifts in a slow Ken Burns, and the title reveals
word by word through staggered masks, separate from the image.
================================================================== */
.p-hero-3d {
position: relative;
overflow: hidden;
min-height: clamp(560px, 92vh, 880px);
background: #0d1526;
isolation: isolate;
}
.p-hero-3d-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 4; /* dust floats over imagery + scrim, under the text/controls */
pointer-events: none;
}
.p-hero-3d-stage {
position: absolute;
inset: 0;
z-index: 1;
}
/* Slides stack; the incoming one fades in ABOVE the outgoing (which keeps
opacity 1 underneath via .is-leaving), so the background never shows
through mid-transition — this is what killed the flicker. */
.p-hero-3d-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
z-index: 1;
transition: opacity 1200ms cubic-bezier(0.33, 0, 0.2, 1), visibility 0s linear 1200ms;
pointer-events: none;
}
.p-hero-3d-slide.is-active {
opacity: 1;
visibility: visible;
z-index: 3;
transition: opacity 1200ms cubic-bezier(0.33, 0, 0.2, 1);
pointer-events: auto;
}
.p-hero-3d-slide.is-leaving {
opacity: 1;
visibility: visible;
z-index: 2;
transition: none;
}
/* the image layer: still by default; the active slide breathes through a
slow Ken Burns settle (zoom-out reads calmer than zoom-in) */
.p-hero-3d-media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
/* MUST equal the keyframes' `from` scale. When they differed (1.04 here vs
1.1 in the animation) attaching the animation snapped the image a full
0.06 of scale in one frame — the visible jerk on every slide change. */
transform: scale(1.06);
z-index: 1;
backface-visibility: hidden;
will-change: transform;
}
@keyframes p-hero-kenburns {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
/* Runs for the whole crossfade, not just while active. The outgoing slide stays
fully opaque underneath the incoming one for FADE_MS (see .is-leaving), so
dropping the animation when `is-active` came off snapped its transform back to
the base scale in plain sight. Keeping the identical shorthand on both classes
lets the animation carry on uninterrupted instead of restarting.
Duration matches the 7s autoplay interval so it finishes rather than being cut. */
.p-hero-3d-slide.is-active .p-hero-3d-media,
.p-hero-3d-slide.is-leaving .p-hero-3d-media {
animation: p-hero-kenburns 7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.p-hero-3d-scrim {
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(120% 85% at 50% 18%, rgba(13, 21, 38, 0.12), transparent 42%),
linear-gradient(180deg, rgba(13, 21, 38, 0.34) 0%, rgba(13, 21, 38, 0.54) 52%, rgba(13, 21, 38, 0.82) 100%);
}
.p-hero-3d-content {
position: relative;
z-index: 3;
width: min(860px, 90%);
margin: 0 auto;
padding: 40px 0;
text-align: center;
}
.p-hero-3d-eyebrow {
justify-content: center;
margin-bottom: 18px;
font-size: 13px;
letter-spacing: 6px;
color: var(--wp--preset--color--gold-soft);
}
.p-hero-3d-title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: clamp(34px, 5vw, 60px);
line-height: 1.12;
color: var(--wp--preset--color--paper);
margin: 0 0 22px;
}
.p-hero-3d-slide.is-brand .p-hero-3d-title {
font-size: clamp(40px, 6.5vw, 82px);
}
.p-hero-3d-excerpt {
font-size: var(--wp--preset--font-size--lg);
line-height: 1.8;
color: rgba(253, 251, 245, 0.92);
max-width: 620px;
margin: 0 auto 34px;
}
.p-hero-3d-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
/* --- word-mask title reveal ----------------------------------------
parasha-home.js wraps each title word as
word; the outer span clips, the
inner one rises out of the mask with a per-word delay. */
.p-hero-3d-title .p-w {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.08em; /* keep descenders (g, y, ṛ) inside the mask */
margin-bottom: -0.08em;
}
.p-hero-3d-title .p-w > span {
display: inline-block;
transform: translateY(118%);
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--w-delay, 0s);
}
.p-hero-3d-slide.is-active .p-hero-3d-title .p-w > span {
transform: none;
}
/* eyebrow, excerpt and buttons rise as soft blocks around the words */
.p-hero-3d-slide .p-hero-anim {
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.8s ease,
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-hero-3d-slide.is-active .p-hero-anim {
opacity: 1;
transform: none;
}
.p-hero-3d-slide.is-active .p-hero-om.p-hero-anim { transition-delay: 0.1s; }
.p-hero-3d-slide.is-active .p-hero-3d-eyebrow.p-hero-anim { transition-delay: 0.2s; }
.p-hero-3d-slide.is-active .p-hero-3d-excerpt.p-hero-anim { transition-delay: 0.75s; }
.p-hero-3d-slide.is-active .p-hero-3d-buttons.p-hero-anim { transition-delay: 0.95s; }
/* --- controls: arrows + dots -------------------------------------- */
.p-hero-controls {
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
}
.p-hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
line-height: 1;
color: var(--wp--preset--color--gold-soft);
background: rgba(20, 33, 54, 0.32);
border: 1px solid rgba(230, 201, 143, 0.4);
border-radius: 999px;
cursor: pointer;
pointer-events: auto;
backdrop-filter: blur(4px);
transition: background var(--wp--custom--motion--dur-base, 300ms) ease, border-color 300ms ease;
}
.p-hero-nav:hover {
background: rgba(20, 33, 54, 0.6);
border-color: var(--wp--preset--color--gold-soft);
}
.p-hero-prev { left: clamp(10px, 2vw, 28px); }
.p-hero-next { right: clamp(10px, 2vw, 28px); }
.p-hero-dots {
position: absolute;
left: 0;
right: 0;
bottom: 26px;
display: flex;
gap: 10px;
justify-content: center;
pointer-events: auto;
}
.p-hero-dot {
width: 9px;
height: 9px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(230, 201, 143, 0.7);
background: transparent;
cursor: pointer;
transition: width var(--wp--custom--motion--dur-base, 300ms) ease, background 300ms ease;
}
.p-hero-dot.is-active {
width: 26px;
background: var(--wp--preset--color--gold-soft);
}
@media (prefers-reduced-motion: reduce) {
.p-hero-3d-slide { transition: opacity 0.2s linear; }
.p-hero-3d-slide.is-active .p-hero-3d-media,
.p-hero-3d-slide.is-leaving .p-hero-3d-media { animation: none; }
.p-hero-3d-media { transform: none; will-change: auto; }
.p-hero-3d-slide .p-hero-anim { opacity: 1; transform: none; transition: none; }
.p-hero-3d-title .p-w > span { transform: none; transition: none; }
}
@media (max-width: 640px) {
.p-hero-3d { min-height: 72vh; }
.p-hero-nav { width: 38px; height: 38px; font-size: 24px; }
}
/* ==================================================================
Responsive polish — 2026-07-11 mobile/iPad audit
(header wordmark overflow, 3D hero arrows over text, footer columns)
================================================================== */
/* Phones + tablets: the "Parasha Yoga Foundation" wordmark is wider than the
compact header's centre column — it spilled under Donate on phones and
truncated to "FOUNDA…" on iPad. The logo disc already carries the brand, so
retire the text below the desktop breakpoint (full wordmark returns ≥1025). */
@media (max-width: 1024px) {
.p-site-nav .wp-block-site-title { display: none !important; }
.p-site-nav > .alignwide > :nth-child(2) { justify-content: center; }
}
/* Home 3D hero on phones: the ‹ › arrows sat over the centred text. On touch,
dots + swipe are enough — hide the arrows and give the stage room for the
tallest (brand) slide so nothing clips. */
@media (max-width: 600px) {
.p-hero-3d { min-height: 94vh; }
.p-hero-nav { display: none; }
.p-hero-3d-content { width: min(860px, 88%); padding: 24px 0; }
.p-hero-3d-excerpt {
font-size: var(--wp--preset--font-size--md);
line-height: 1.62;
margin-bottom: 24px;
}
.p-hero-3d-slide.is-brand .p-hero-3d-title { font-size: clamp(34px, 8.5vw, 46px); }
.p-hero-3d .p-hero-om { margin-bottom: 6px; }
.p-hero-dots { bottom: 18px; }
}
/* Tablets keep the arrows, so narrow the hero text to clear the ‹ › gutters. */
@media (min-width: 601px) and (max-width: 1024px) {
.p-hero-3d-content { width: min(720px, 76%); }
}
/* Footer: the four link columns stacked into one long ribbon on phones and
iPad portrait. Lay them out as a calm 2×2 while the brand + address block
spans full width (the default 4-across returns at the ≥782px desktop nav). */
@media (max-width: 781px) {
.wp-block-group.has-navy-900-background-color > .wp-block-columns {
flex-direction: row !important;
flex-wrap: wrap;
gap: 32px 22px;
}
.wp-block-group.has-navy-900-background-color > .wp-block-columns > .wp-block-column {
flex-basis: calc(50% - 11px) !important;
flex-grow: 0;
}
.wp-block-group.has-navy-900-background-color > .wp-block-columns > .wp-block-column:first-child {
flex-basis: 100% !important;
margin-bottom: 6px;
}
}
/* ==================================================================
Media-text sections + heading word-break — 2026-07-12
================================================================== */
/* Headings must wrap at spaces, never mid-word. A stray `word-break: break-word`
default was splitting the flagship title into "Antaryatr / a". Break a word
only if it genuinely cannot fit (overflow-wrap), never by preference. */
.wp-block-heading,
.p-hero-3d-title,
.wp-block-media-text__content h2 {
word-break: normal;
overflow-wrap: break-word;
hyphens: none;
}
/* Full-bleed media-text (Antaryātra flagship, Retreat Centre) is a cramped
50/50 on tablets — the text column gets too narrow for the display heading.
Stack image-over-content at full width below the desktop breakpoint. */
@media (max-width: 1024px) {
.wp-block-media-text {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
}
.wp-block-media-text > .wp-block-media-text__media {
grid-column: 1 !important;
grid-row: 1 !important;
}
.wp-block-media-text > .wp-block-media-text__content {
grid-column: 1 !important;
grid-row: 2 !important;
}
/* image-fill figures paint via background-image with an absolutely-placed
![]()
, so they have no intrinsic height once stacked — give them one */
.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
height: clamp(300px, 46vw, 440px);
}
}
/* ------------------------------------------------------------------
Instagram section — [parasha_instagram] wrapper + Smash Balloon skin
Free plugin markup: #sb_instagram .sbi_photo (grid) etc. We restyle
the grid to match the brand and gate its own header/loadmore chrome.
------------------------------------------------------------------- */
.p-ig {
background: var(--wp--preset--color--paper);
text-align: center;
}
.p-ig-inner {
max-width: var(--wp--style--global--content-size, 1240px);
margin-inline: auto;
}
.p-ig-eyebrow { margin-bottom: 16px; }
.p-ig-heading {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(30px, 4vw, 44px);
line-height: 1.12;
color: var(--wp--preset--color--navy-900);
margin: 0 0 14px;
font-weight: 500;
}
.p-ig-intro {
max-width: 560px;
margin: 0 auto 40px;
color: var(--wp--preset--color--muted);
line-height: 1.8;
font-size: var(--wp--preset--font-size--md, 1.05rem);
}
.p-ig-feed { margin-bottom: 40px; }
/* Smash Balloon: hide its own header/bio/follow button/load-more —
we provide our own brand header and follow CTA. */
#sb_instagram .sbi_header_outer,
#sb_instagram .sbi_header_wrap,
#sb_instagram #sbi_load,
#sb_instagram .sbi_follow_btn { display: none !important; }
/* Grid: even gutters, brand corner radius, quiet hover lift */
#sb_instagram { padding: 0 !important; }
#sb_instagram #sbi_images { padding: 0 !important; }
#sb_instagram .sbi_photo,
#sb_instagram #sbi_images .sbi_item {
border-radius: var(--wp--custom--radius--md, 10px);
overflow: hidden;
}
#sb_instagram .sbi_photo {
position: relative;
transition: transform .4s ease, box-shadow .4s ease;
}
#sb_instagram .sbi_photo:hover {
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(20, 33, 54, 0.16);
}
/* subtle navy scrim + gold ring on hover to tie into the palette */
#sb_instagram .sbi_photo::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: inherit;
transition: border-color .4s ease;
pointer-events: none;
}
#sb_instagram .sbi_photo:hover::after {
border-color: rgba(193, 145, 63, 0.55);
}
/* Follow button — pill matching the brand, gold hairline */
.p-ig-follow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--wp--preset--font-family--ui);
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--wp--preset--color--navy-900);
text-decoration: none;
padding: 14px 30px;
border: 1px solid var(--wp--preset--color--gold);
border-radius: var(--wp--custom--radius--pill, 999px);
transition: background .3s ease, color .3s ease;
}
.p-ig-follow:hover {
background: var(--wp--preset--color--navy-900);
color: var(--wp--preset--color--on-dark);
border-color: var(--wp--preset--color--navy-900);
}
.p-ig-follow-icon { display: inline-flex; }