/* ============================================================ BASE — "David Marius" identity (navy + cream, light-dominant). Supersedes the old cosmic-purple direction. Tokens, buttons, header/footer, section primitives (light + dark + fixed-bg), and the progressive-enhancement reveal system live here. ============================================================ */ :root{ --navy:#1C2838; --navy-deep:#2c3e50; --navy-ink:#0f1925; --navy-90:rgba(28,40,56,.90); --navy-overlay-top:rgba(28,40,56,.80); --navy-overlay-bot:rgba(28,40,56,.74); --white:#ffffff; --light:#f5f5f5; --cream:#faf8f5; --muted:#475563; --line:rgba(28,40,56,.14); --line-light:rgba(255,255,255,.28); --maxw:1200px; --ease:cubic-bezier(.4,0,.2,1); /* ---- BRAND ACCENTS (from the logo) ---- Navy stays the structural base; these are the purple accents. On LIGHT surfaces use --indigo for text (AA-safe); --violet for fills/buttons; on DARK surfaces use --lavender. --magenta is a rare "pop" for one element only. --gold is the connecting thread. */ --violet:#7C3AED; /* lit violet — primary accent / CTA fills */ --indigo:#3614C9; /* deep signature swirl — accent text on light */ --lavender:#C9A9F5; /* glow accent on dark (logo faces) */ --lavender-soft:#E5D6FA; --magenta:#C026D3; /* bright pop / featured CTA */ --violet-ink:#2A0E5C; /* deep violet for text on lavender fills */ --violet-deep:#1C0B4D; /* deep royal indigo — dark "feature" sections */ --shadow-violet:rgba(76,29,149,.22); /* ---- rounded "sensual-editorial" geometry (adopted from reference) ---- */ --radius-pill:999px; /* buttons → full pill */ --radius-card:24px; /* cards / posters */ --radius-box:16px; /* info boxes, date cards */ /* ---- per-page fixed background image hook ---- Default dark-section backdrop for the HOME. Override per page by setting --section-bg on a body class or on an individual section (see .fixed-bg / "per-page background" note in home.css). */ --section-bg:url('../img/bg-night-sky-moon.jpg'); } /* force RTL on the front-end regardless of WP locale */ html{direction:rtl;scroll-behavior:smooth;} body{ background:var(--cream); color:var(--navy); font-family:var(--wp--preset--font-family--body,'EB Garamond','Frank Ruhl Libre',serif); font-size:1.125rem; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} h1,h2,h3,h4{ font-family:var(--wp--preset--font-family--heading,'Work Sans','Heebo',sans-serif); font-weight:400;line-height:1.22;letter-spacing:.2px;color:var(--navy); } /* ---------- section primitives ---------- */ .section{position:relative;padding-block:clamp(64px,9vw,120px);} .section--light{background:var(--light);} .section--cream{background:var(--cream);} .section--white{background:var(--white);} .section--dark{background:var(--navy);color:var(--white);} .section--dark :is(h1,h2,h3,h4){color:var(--white);} /* ---------- DARK image sections: fixed "held" backdrop ---------- A photographic / illustrated background is pinned in the viewport (background-attachment:fixed) while content scrolls over it. A navy gradient overlay keeps white text >= WCAG AA. The bg lives in ::before; overlay in ::after; content above both. Per-page background: the image is read from --section-bg, defined in :root (home default). To use a DIFFERENT image on another page, set --section-bg on that template's class or on the section group's own className, e.g.: .page-events .fixed-bg{--section-bg:url('../img/bg-other.jpg');} ----------------------------------------------------------------- */ .section--image,.fixed-bg{position:relative;color:var(--white);background:var(--navy);isolation:isolate;} .section--image::before,.fixed-bg::before{ content:"";position:absolute;inset:0;z-index:-2; background-image:var(--section-bg); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; /* the "held in place" effect */ } .section--image::after,.fixed-bg::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,var(--navy-overlay-top),var(--navy-overlay-bot)); } .section--image :is(h1,h2,h3,h4),.fixed-bg :is(h1,h2,h3,h4){color:var(--white);} .t-dark,.section--image,.fixed-bg{color:var(--white);} /* ============================================================ SENSUAL-EDITORIAL PATTERNS (adopted from reference, brand-mapped) Reusable utilities: a frosted info box, a date/location card, and a deep-violet "feature" section. Apply via block "Additional CSS class". ============================================================ */ /* frosted info box — floats over a hero image without hiding it */ .glass-box{ background:rgba(255,255,255,.9);color:var(--navy); border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-box); padding:clamp(1.4rem,3vw,2.4rem); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 24px 60px rgba(28,11,77,.28); } .glass-box :is(h1,h2,h3,h4){color:var(--navy);} /* date / location card — deep violet, white text, rounded */ .date-card{ background:var(--violet-deep);color:var(--white); border-radius:var(--radius-box);text-align:center; padding:clamp(1.1rem,2.4vw,1.8rem) clamp(1.4rem,3vw,2.4rem); box-shadow:0 18px 44px rgba(28,11,77,.4); } .date-card :is(h1,h2,h3,h4,p){color:var(--white);margin:0;} .date-card .date-card__date{ font-family:var(--wp--preset--font-family--heading); font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:1px;margin-bottom:.3rem; } /* deep-violet "feature" section — high-contrast highlight band with a faint hypnotic-spiral texture (the logo motif, not a hard pattern) */ .section--feature{ background:var(--violet-deep);color:var(--white);position:relative;isolation:isolate; } .section--feature::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background: radial-gradient(60% 90% at 80% 0%,rgba(124,58,237,.35),transparent 60%), radial-gradient(50% 80% at 10% 100%,rgba(192,38,211,.22),transparent 60%); } .section--feature :is(h1,h2,h3,h4){color:var(--white);} .section--feature .eyebrow{color:var(--lavender);opacity:1;} /* fixed-bg mobile fallback: background-attachment:fixed is janky/broken on iOS and most mobile browsers — degrade to a normal scrolling cover image. */ @media (max-width:820px){ .section--image::before,.fixed-bg::before{background-attachment:scroll;} } /* ---------- eyebrow / lede helpers ---------- */ .eyebrow{ font-family:var(--wp--preset--font-family--heading,'Work Sans','Heebo',sans-serif); font-size:.8rem;letter-spacing:4px;text-transform:uppercase; opacity:.65;font-weight:500; } .lede{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.8;} /* Latin tokens keep bidi clean inside Hebrew runs */ .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;} /* ============================================================ BUTTONS — outline + filled, navy / light variants. Core block markup is

…

so we style the inner link. .btn-wa kept for header/footer parts. ============================================================ */ .wp-block-button__link,.btn-wa{ font-family:var(--wp--preset--font-family--heading,'Work Sans','Heebo',sans-serif); font-size:1rem;font-weight:500;letter-spacing:1.5px; padding:.85rem 2rem;border:2px solid transparent;border-radius:var(--radius-pill); min-height:46px;line-height:1.2;text-decoration:none; display:inline-flex;align-items:center;gap:.5rem; transition:background .25s var(--ease),color .25s var(--ease), border-color .25s var(--ease),transform .2s var(--ease); } .wp-block-button__link:hover{transform:translateY(-2px);} .wp-block-button__link:focus-visible,.btn-wa:focus-visible{ outline:3px solid var(--navy-deep);outline-offset:3px; } /* default (outline navy) — used on light sections */ .wp-block-button .wp-block-button__link{ background:transparent;border-color:var(--navy);color:var(--navy); } .wp-block-button .wp-block-button__link:hover{background:var(--navy);color:var(--white);} /* filled → VIOLET (primary brand CTA, site-wide; readable on light + dark) */ .btn-filled .wp-block-button__link{background:var(--violet);border-color:var(--violet);color:var(--white);} .btn-filled .wp-block-button__link:hover{background:var(--indigo);border-color:var(--indigo);color:var(--white);} /* outline light — on dark/image sections */ .btn-outline-light .wp-block-button__link{background:transparent;border-color:var(--white);color:var(--white);} .btn-outline-light .wp-block-button__link:hover{background:var(--white);color:var(--navy);} /* filled light — on dark/image sections (violet, white text) */ .btn-filled-light .wp-block-button__link{background:var(--violet);border-color:var(--violet);color:var(--white);} .btn-filled-light .wp-block-button__link:hover{background:var(--indigo);border-color:var(--indigo);color:var(--white);} /* WhatsApp button (header/footer parts) — filled navy pill-free David look */ .btn-wa{background:var(--navy);color:var(--white);font-weight:500;} .btn-wa:hover{background:var(--navy-ink);color:var(--white);transform:translateY(-2px);} /* ---- BRAND ACCENT BUTTONS (opt-in via block class) ---- filled violet — primary brand CTA, readable on light AND dark sections */ .btn-violet .wp-block-button__link,a.btn-violet{ background:var(--violet);border-color:var(--violet);color:var(--white); } .btn-violet .wp-block-button__link:hover,a.btn-violet:hover{ background:var(--indigo);border-color:var(--indigo);color:var(--white); } /* outline violet — on light sections */ .btn-violet-outline .wp-block-button__link{ background:transparent;border-color:var(--violet);color:var(--indigo); } .btn-violet-outline .wp-block-button__link:hover{ background:var(--violet);border-color:var(--violet);color:var(--white); } /* ============================================================ HEADER — navy David header ============================================================ */ .site-header{ background:var(--navy-deep);color:var(--white); padding:16px clamp(1.1rem,4vw,2.5rem); position:relative;z-index:100; } .site-header :is(a,.wp-block-site-title a){color:var(--white);text-decoration:none;} /* visible keyboard focus on the dark header (nav links, site title, CTA) */ .site-header :is(a,button,.wp-block-navigation-item__content):focus-visible{ outline:3px solid var(--white);outline-offset:3px;border-radius:2px; } .site-header .wp-block-site-title{ font-family:var(--wp--preset--font-family--heading,'Work Sans','Heebo',sans-serif); font-size:1.4rem;letter-spacing:1px;font-weight:500; } .site-header .wp-block-navigation{font-family:var(--wp--preset--font-family--body,serif);} .site-header .wp-block-navigation a{opacity:.92;font-size:1.05rem;} .site-header .wp-block-navigation a:hover{opacity:1;color:var(--lavender);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--lavender);} .site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open{ background:var(--navy-deep); } .site-header .btn-wa{ padding:.55rem 1.4rem;font-size:.9rem;min-height:auto; background:var(--violet);border:2px solid var(--violet);color:var(--white); letter-spacing:1px; } .site-header .btn-wa:hover{background:var(--indigo);border-color:var(--indigo);color:var(--white);} .site-header p{margin:0;} /* ---- nav dropdown submenus (open on hover, David navy) ---- */ .site-header .wp-block-navigation .wp-block-navigation__submenu-container{ background:var(--navy-deep); border:1px solid rgba(255,255,255,.14); min-width:250px;padding:.4rem 0;border-radius:4px; box-shadow:0 16px 44px -14px rgba(0,0,0,.55); text-align:right; } .site-header .wp-block-navigation__submenu-container li{margin:0;} .site-header .wp-block-navigation__submenu-container a, .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label{ display:block;padding:.15rem 0;font-size:1rem;color:var(--white)!important;opacity:.92; white-space:nowrap;text-decoration:none; } .site-header .wp-block-navigation__submenu-container li > a{padding:.6rem 1.25rem;} .site-header .wp-block-navigation__submenu-container a:hover, .site-header .wp-block-navigation__submenu-container a:hover .wp-block-navigation-item__label{ opacity:1;background:rgba(255,255,255,.10);color:var(--white)!important; } /* show submenu on hover (desktop) */ @media (min-width:861px){ .site-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container, .site-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container{ visibility:visible;opacity:1;display:block; } } /* ============================================================ FOOTER — navy David footer ============================================================ */ .site-footer{background:var(--navy);color:var(--white);padding-block:56px;} .site-footer :is(h1,h2,h3,h4){color:var(--white);} .site-footer a{color:var(--white);opacity:.85;text-decoration:none;} .site-footer a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;} .site-footer a:focus-visible{outline:3px solid var(--white);outline-offset:2px;} /* ============================================================ SCROLL REVEAL — progressive-enhancement system. Hidden pre-animation state scoped UNDER `.reveal-ready` (added to by reveal.js only when JS runs AND no reduced-motion). Without JS, in the editor, or with reduced motion: fully visible. ============================================================ */ .reveal-ready .reveal{ opacity:0;transform:translateY(24px); transition:opacity .8s var(--ease),transform .8s var(--ease); will-change:opacity,transform; } .reveal-ready .reveal.is-in{opacity:1;transform:none;} .reveal-ready .reveal-group > .reveal{transition-delay:calc(var(--i,0) * .09s);} .reveal-ready .reveal-group > .reveal:nth-child(1){transition-delay:0s;} .reveal-ready .reveal-group > .reveal:nth-child(2){transition-delay:.12s;} .reveal-ready .reveal-group > .reveal:nth-child(3){transition-delay:.24s;} .reveal-ready .reveal-group > .reveal:nth-child(4){transition-delay:.36s;} .reveal-ready .reveal-group > .reveal:nth-child(5){transition-delay:.48s;} .reveal-ready .reveal-group > .reveal:nth-child(6){transition-delay:.60s;} @media (prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important;} .reveal-ready .reveal, .reveal-ready .reveal.is-in{opacity:1!important;transform:none!important;transition:none!important;} } /* ===================================================================== CROSS-LINK "deepen" band — bridges between blog articles, series and workshops (rendered by the_content filter in functions.php). ===================================================================== */ .xlink-deepen{margin:clamp(2.5rem,5vw,4rem) auto 0;border-radius:var(--radius-card,18px); background:linear-gradient(150deg,#2a1163,#1c0b4d 60%,#160a3e);color:#fff; padding:clamp(1.8rem,4vw,3rem);box-shadow:0 24px 60px var(--shadow-violet,rgba(40,16,90,.4));} .xl-inner{max-width:920px;margin-inline:auto;text-align:center;} .xl-eyebrow{margin:0 0 .5rem;font-weight:500;letter-spacing:.18em;font-size:.82rem;color:var(--lavender,#c9a9f5);} .xl-title{margin:0 0 1.6rem;color:#fff;font-size:clamp(1.4rem,3vw,2rem);} .xl-cards{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;} .xl-card{flex:1 1 240px;max-width:340px;display:flex;flex-direction:column;gap:.3rem; background:rgba(255,255,255,.08);border:1px solid rgba(201,169,245,.25);border-radius:var(--radius-card,16px); padding:1.1rem 1.3rem;text-decoration:none;color:#fff;transition:transform .25s,background .25s,border-color .25s;} .xlink-deepen a.xl-card,.xlink-deepen a.xl-card:hover,.xlink-deepen a.xl-card:focus, .xlink-deepen a.xl-card:visited{color:#fff;text-decoration:none;} .xl-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.14);border-color:rgba(201,169,245,.55);} .xlink-deepen .xl-name{font-weight:700;font-size:1.08rem;line-height:1.3;color:#fff;} .xlink-deepen .xl-card:hover .xl-name{color:#fff;} .xlink-deepen .xl-sub{font-size:.86rem;color:rgba(255,255,255,.72);} /* === header logo lockup === */ .site-header .site-logo-lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none} .site-header .site-logo-mark{height:42px;width:auto;display:block} .site-header .site-logo-word{font-family:'Rubik',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:.5px;color:#fff;line-height:1} .site-header .site-logo-lockup:hover .site-logo-word{color:var(--lavender,#C9A9F5)} @media(max-width:600px){.site-header .site-logo-word{font-size:1.05rem}.site-header .site-logo-mark{height:36px}}