/* Theme Name: Jagadananda Author: Jagadananda Description: A contemplative theme for Jagadananda — non-dual meditation, ecological consciousness, and conscious living. Reflections and Writings flow in as ordinary posts in their two categories. Version: 1.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: jagadananda */ :root { --bone: #E7E4D9; --bone-deep: #DBD8CC; --ink: #1B2016; --ink-soft: #40492F; --moss: #4B5B37; --moss-deep: #333D24; --earth: #8A6339; --fern: #1F8B0C; --fern-bright: #2FAE16; --line: #C9BF9E; --night: #131810; --night-deep: #0D110B; --night-text: #E4DFC9; --night-dim: #928C6E; --tui: #16403A; --kowhai: #C79A2E; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bone); color: var(--ink); font-family: 'Newsreader', Georgia, serif; font-size: 19px; line-height: 1.75; font-weight: 400; -webkit-font-smoothing: antialiased; /* Guards against an external stylesheet (Elementor's global kit CSS, or a stray Additional CSS rule in the Customizer) padding and squeezing every section inward. All horizontal spacing in this theme is intentionally applied per-section (see .reflections, .writings, .single-post, section), never on body itself. */ padding: 0 !important; margin: 0 !important; } ::selection { background: var(--fern); color: var(--bone); } h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; line-height: 1.15; } a { color: inherit; } .label { font-family: 'Newsreader', Georgia, serif; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--earth); font-weight: 500; } /* ---------- Navigation ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 20px 5vw; background: transparent; border-bottom: 1px solid transparent; transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; } nav.scrolled { background: rgba(231, 228, 217, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(27, 32, 22, 0.06); } body.night-mode nav.scrolled { background: rgba(19, 24, 16, 0.72); border-bottom: 1px solid rgba(221, 216, 200, 0.08); } nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } nav .brand img { width: 34px; height: 34px; display: block; } nav .wordmark { font-family: 'Fraunces', Georgia, serif; font-size: 17px; letter-spacing: 0.06em; } .wordmark-light, .label-light { font-weight: 300; letter-spacing: 0.08em; text-transform: lowercase; } nav ul { display: flex; gap: 34px; list-style: none; } nav ul a { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); transition: color 0.4s ease; } nav ul a:hover, nav ul a:focus-visible { color: var(--fern); } body.night-mode nav .wordmark, body.night-mode nav .brand, body.night-mode nav ul a { color: var(--night-text); } body.night-mode nav ul a:hover, body.night-mode nav ul a:focus-visible { color: var(--fern); } /* ---------- Hero ---------- This used to be a bare "header" tag selector, which meant it matched EVERY

element on the site — including the small article-head header used for single post titles. That's what was putting a full 100vh-tall grey hero gradient behind every essay and reflection title. Scoped to .hero now so it can only ever match the homepage. */ header.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; padding: 0 6vw; background: linear-gradient(180deg, #C6C7C6 0%, #B7B6A9 55%, #E7E4D9 100%); } /* Valley mist: one continuous field, not scattered puffs. Ten overlapping shapes, heavily blurred, each drifting on its own long independent cycle. */ .mist-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .mist-field svg { width: 100%; height: 100%; display: block; } @media (prefers-reduced-motion: reduce) { .mist-field animateTransform { display: none; } } /* Real silver fern photographs, grounded in the corners rather than floating inside the frame — pushed slightly past the edges with a soft shadow beneath. */ .ground-shadow { position: absolute; bottom: -4%; width: 22%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(19,24,16,0.18) 0%, rgba(19,24,16,0) 70%); z-index: 1; pointer-events: none; } .ground-shadow.left { left: -3%; } .ground-shadow.right { right: -4%; } .fern { position: absolute; bottom: 0; width: 23%; max-width: 300px; min-width: 170px; height: auto; z-index: 2; filter: sepia(6%) saturate(88%) brightness(0.97) contrast(0.97); transform-origin: bottom center; will-change: transform; } .fern.left { left: -2.2%; bottom: -2%; animation: swayLeft 9s ease-in-out infinite; } .fern.right { right: -3.4%; bottom: -2%; animation: swayRight 11s ease-in-out infinite; } @keyframes swayLeft { 0% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.2deg); } 100% { transform: rotate(-1.4deg); } } @keyframes swayRight { 0% { transform: rotate(1.3deg); } 50% { transform: rotate(-1.5deg); } 100% { transform: rotate(1.3deg); } } @media (prefers-reduced-motion: reduce) { .fern { animation: none !important; } } .hero .hero-inner { position: relative; z-index: 3; } .hero h1 { font-size: clamp(30px, 4.4vw, 58px); font-weight: 300; max-width: 17em; letter-spacing: 0.002em; } .hero .name { margin-top: 3em; display: flex; flex-direction: column; align-items: center; gap: 14px; } .hero-subtitle { font-size: 18px; font-weight: 300; font-style: italic; color: var(--ink-soft); max-width: 26em; line-height: 1.6; margin-top: -4px; } .hero .name img { width: 46px; height: 46px; } .hero .name .label { color: var(--fern); } .down-hint { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); width: 1px; height: 56px; background: linear-gradient(var(--fern), transparent); opacity: 0.6; z-index: 3; } /* ---------- Shared section rhythm ---------- */ section { padding: 15vh 6vw; } .measure { max-width: 620px; margin: 0 auto; } .wide { max-width: 1020px; margin: 0 auto; } /* ---------- Welcome ---------- */ .welcome { text-align: center; } .welcome p { font-size: clamp(20px, 2.2vw, 25px); line-height: 1.85; font-weight: 300; color: var(--ink-soft); } .welcome-bird-wrap { display: flex; justify-content: center; margin-top: 9vh; } .welcome-bird { width: 150px; height: auto; transform-origin: center center; animation: welcomeBirdFlight 20s linear infinite; filter: brightness(0.98) contrast(0.96); } /* A true circular loop, computed so rotation always matches the direction of travel: starts flying forward (beak/right side leading), curves up and over the top, down the left side, and back — right becomes top, then left, then bottom, then right again, the way a bird actually banks through a full turn. No mirroring anywhere. */ @keyframes welcomeBirdFlight { 0% { transform: translate(0.00px, 55.00px) rotate(0deg); } 12.5% { transform: translate(28.83px, 43.06px) rotate(-46.55deg); } 25% { transform: translate(31.84px, 23.16px) rotate(-87.01deg); } 37.5% { transform: translate(35.90px, -31.67px) rotate(-133.00deg); } 50% { transform: translate(0.00px, -10.86px) rotate(-191.16deg); } 62.5% { transform: translate(-27.74px, -11.97px) rotate(-215.66deg); } 75% { transform: translate(-48.16px, 6.84px) rotate(-272.02deg); } 87.5% { transform: translate(-20.67px, 46.44px) rotate(-315.59deg); } 100% { transform: translate(0.00px, 55.00px) rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .welcome-bird { animation: none; } } /* ---------- Worldview ---------- */ .worldview { position: relative; padding-top: 8vh; } .twin-fern-wrap { display: flex; justify-content: center; margin-bottom: 5vh; } .twin-fern { width: min(560px, 68%); height: auto; transform-origin: top center; animation: twinFernSway 9s ease-in-out infinite; filter: sepia(6%) saturate(88%) brightness(0.97); } @keyframes twinFernSway { 0% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } 100% { transform: rotate(-1.3deg); } } @media (prefers-reduced-motion: reduce) { .twin-fern { animation: none; } } .worldview .intro { text-align: center; margin-bottom: 10vh; } .worldview .intro h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; margin: 0.6em 0 0.8em; } .worldview .intro p { color: var(--ink-soft); max-width: 34em; margin: 0 auto; } .thread-wrap { position: relative; } .thread { position: absolute; left: 50%; top: 0; bottom: 0; width: 60px; margin-left: -30px; } .thread svg { width: 100%; height: 100%; overflow: visible; } .thread .stem { stroke: var(--moss); stroke-width: 2; fill: none; opacity: 0.75; } .thread .pinnae { stroke: var(--fern); stroke-width: 1.3; fill: none; opacity: 0.5; } .doorway { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; padding: 8vh 0; position: relative; } .doorway .text { grid-column: 1; text-align: right; padding-right: 3vw; } .doorway:nth-child(even) .text { grid-column: 2; text-align: left; padding-right: 0; padding-left: 3vw; } .doorway:nth-child(even) .glyph { grid-column: 1; grid-row: 1; } .doorway h3 { font-size: clamp(24px, 2.6vw, 34px); margin: 0.5em 0 0.6em; font-weight: 500; color: var(--moss-deep); } .doorway p { color: var(--ink-soft); font-size: 18px; } .doorway .enter { display: inline-block; margin-top: 1.4em; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--fern); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color 0.4s ease; } .doorway .enter:hover, .doorway .enter:focus-visible { border-color: var(--fern); } .glyph { display: flex; justify-content: center; align-items: center; } .glyph svg { width: 160px; height: 160px; } .koru-frond { width: 150px; height: auto; transform-origin: center center; animation: koruBreathe 8s ease-in-out infinite; filter: sepia(8%) saturate(85%) brightness(0.98); } .mudra-hand { width: 120px; height: auto; transform-origin: bottom center; animation: mudraRise 7s ease-in-out infinite; filter: sepia(8%) saturate(85%) brightness(0.98); } /* The hand itself stays steady, the way a mudra is meant to be held — but a slight rise and settle runs through it, breath (prana) moving up through something otherwise still, rather than the hand swaying. */ @keyframes mudraRise { 0% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-6px) scale(1.025); } 100% { transform: translateY(0px) scale(1); } } @media (prefers-reduced-motion: reduce) { .mudra-hand { animation: none; } } .mycelium-roots { width: 140px; height: auto; transform-origin: top center; animation: myceliumReach 12s ease-in-out infinite; filter: sepia(8%) saturate(85%) brightness(0.98); } /* Roots don't sway — nothing moves them from outside. What moves is the network itself: a slow, barely-there reach downward and back, the surface mushrooms held fixed while the threads beneath pulse, closer to circulation than to wind. */ @keyframes myceliumReach { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.035) scaleX(0.99); } 100% { transform: scaleY(1) scaleX(1); } } @media (prefers-reduced-motion: reduce) { .mycelium-roots { animation: none; } } .tui-bird { width: 340px; height: auto; transform-origin: 12% 78%; animation: tuiBranchSway 9s ease-in-out infinite; filter: sepia(4%) saturate(92%) brightness(0.98); } /* This bird isn't flying and isn't held still like the mudra — it's perched, gathering. What moves is the branch it's balanced on, rocking gently as branches do, the bird riding it rather than acting on its own. Pivoted from low on the left, roughly where the branch would continue into an unseen tree. */ @keyframes tuiBranchSway { 0% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } 100% { transform: rotate(-1.6deg); } } @media (prefers-reduced-motion: reduce) { .tui-bird { animation: none; } } /* Not a sway — this one holds still and simply breathes, fitting the stillness it sits beside, but pushed enough that the breath is clearly visible rather than merely implied. */ @keyframes koruBreathe { 0% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.06) rotate(2deg); } 100% { transform: scale(1) rotate(-2deg); } } @media (prefers-reduced-motion: reduce) { .koru-frond { animation: none; } } /* ---------- Reflections (night bush) ---------- */ .reflections { background: var(--night); color: var(--night-text); padding: 16vh 6vw 0 6vw; position: relative; } .reflections .bush-line { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; opacity: 0.9; pointer-events: none; } .reflections .stars circle { fill: var(--night-text); opacity: 0.5; } .reflections .content { position: relative; z-index: 2; } .moon-glow { position: absolute; top: 9%; right: 9%; width: 92px; height: 92px; border-radius: 50%; z-index: 1; background: radial-gradient(circle at 30% 28%, rgba(170,164,138,0.35) 0%, rgba(170,164,138,0) 9%), radial-gradient(circle at 62% 56%, rgba(170,164,138,0.25) 0%, rgba(170,164,138,0) 11%), radial-gradient(circle at 42% 68%, rgba(170,164,138,0.22) 0%, rgba(170,164,138,0) 8%), radial-gradient(circle at 35% 32%, #F8F5E9 0%, #E9E4D0 45%, #CAC4A7 75%, #A9A488 100%); animation: moonGlowPulse 10s ease-in-out infinite; } @keyframes moonGlowPulse { 0%, 100% { box-shadow: 0 0 20px 6px rgba(247,244,232,0.18), 0 0 40px 14px rgba(247,244,232,0.08); } 50% { box-shadow: 0 0 28px 9px rgba(247,244,232,0.28), 0 0 50px 18px rgba(247,244,232,0.14); } } @media (prefers-reduced-motion: reduce) { .moon-glow { animation: none; box-shadow: 0 0 24px 7px rgba(247,244,232,0.22), 0 0 45px 15px rgba(247,244,232,0.11); } } .reflections .label { color: var(--night-dim); } .reflections h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 0.4em; font-weight: 300; } .reflections .section-subtitle { font-size: clamp(18px, 1.9vw, 22px); color: var(--night-text); font-weight: 300; margin: 0 0 0.6em; } .reflections .intro-line { color: var(--night-dim); font-style: italic; margin-bottom: 9vh; } .reflection-list { list-style: none; } /* Forest floor at the bottom of the section: full-bleed width via negative margins cancelling the section's own padding, height kept deliberately short so it reads as a footer strip rather than a scene, darkened hard so it feels like moonlit ground rather than the bright daylight illustration it started as, and faded in from the top so there's no hard rectangular edge where it begins. */ .reflections .forest-floor-wrap { position: relative; z-index: 5; margin: 9vh -6vw -3% -6vw; line-height: 0; } .reflections .forest-floor-wrap img { display: block; width: 100%; height: auto; } /* A short, gentle fade at the very top only — the ferns reach the top edge of the source image with no natural headroom, so this stays shallow on purpose rather than cutting across the illustration. */ .reflections .forest-floor-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 18%; background: linear-gradient(to bottom, var(--night) 0%, rgba(19,24,16,0) 100%); pointer-events: none; } .reflection-list li { border-top: 1px solid rgba(228,223,201,0.14); padding: 2.4em 0; } .reflection-list li:last-child { border-bottom: 1px solid rgba(228,223,201,0.14); } .reflection-list a { text-decoration: none; display: block; transition: opacity 0.4s ease; } .reflection-list a:hover, .reflection-list a:focus-visible { opacity: 0.72; } .reflection-list .date { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--night-dim); } .reflection-list h3 { font-size: clamp(21px, 2.2vw, 27px); font-weight: 400; margin: 0.5em 0 0.4em; } .reflection-list p { color: var(--night-dim); font-style: italic; font-size: 17.5px; } .reflections .all { display: inline-block; margin-top: 4em; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--night-dim); border-bottom: 1px solid rgba(228,223,201,0.25); padding-bottom: 3px; transition: color 0.4s ease; } .reflections .all:hover { color: var(--night-text); } .reflections-pagination, .essays-pagination { margin-top: 5em; text-align: center; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; } .reflections-pagination a, .reflections-pagination span, .essays-pagination a, .essays-pagination span { display: inline-block; margin: 0 0.8em; text-decoration: none; padding-bottom: 3px; } .reflections-pagination a, .reflections-pagination span.current { color: var(--night-dim); border-bottom: 1px solid rgba(228,223,201,0.25); } .reflections-pagination a:hover { color: var(--night-text); } .essays-pagination a, .essays-pagination span.current { color: var(--moss-deep); border-bottom: 1px solid var(--line); } .essays-pagination a:hover { color: var(--fern); } .all-light { display: inline-block; margin-top: 3em; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--moss-deep); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color 0.4s ease, border-color 0.4s ease; } .all-light:hover { color: var(--fern); border-color: var(--fern); } /* ---------- Writings ---------- */ .writings { padding: 16vh 6vw; } .eagle-horizon { position: relative; height: clamp(90px, 11vw, 150px); margin-bottom: 4vh; } .eagle-horizon .horizon-line { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .eagle-horizon .eagle { position: absolute; width: clamp(90px, 11vw, 150px); height: auto; filter: sepia(4%) saturate(90%) brightness(0.98); } /* Distant soaring birds — slow, wide, barely-there drift on thermals, nothing like the perched or close-up movement elsewhere on the page. Each on its own long, staggered cycle so they never line up. */ .eagle-1 { top: 8%; left: 4%; animation: soar1 24s ease-in-out infinite; } .eagle-2 { top: 30%; left: 44%; width: clamp(60px, 7vw, 100px); animation: soar2 19s ease-in-out infinite; animation-delay: -6s; } .eagle-3 { top: 4%; left: 78%; animation: soar3 27s ease-in-out infinite; animation-delay: -12s; } @keyframes soar1 { 0%, 100% { transform: translate(0, 0) rotate(-1deg); } 50% { transform: translate(18px, -10px) rotate(1.5deg); } } @keyframes soar2 { 0%, 100% { transform: translate(0, 0) rotate(1deg); } 50% { transform: translate(-14px, 8px) rotate(-1.5deg); } } @keyframes soar3 { 0%, 100% { transform: translate(0, 0) rotate(-1deg); } 50% { transform: translate(-20px, -8px) rotate(1deg); } } @media (prefers-reduced-motion: reduce) { .eagle-1, .eagle-2, .eagle-3 { animation: none; } } @media (max-width: 820px) { .eagle-horizon { display: none; } } .writings .head { margin-bottom: 8vh; } .writings h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 0.4em; font-weight: 500; } .writings .section-subtitle { font-size: clamp(18px, 1.9vw, 22px); color: var(--moss-deep); font-weight: 400; margin: 0 0 0.6em; } .writings .head p { color: var(--ink-soft); } .essay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5vw; } .essay { text-decoration: none; display: block; border-top: 2px solid var(--line); padding-top: 1.8em; transition: opacity 0.4s ease; } .essay:hover, .essay:focus-visible { opacity: 0.7; } .essay .label { color: var(--fern); } .essay h3 { font-size: 23px; font-weight: 500; margin: 0.7em 0 0.55em; } .essay p { color: var(--ink-soft); font-size: 17px; } /* ---------- Closing ---------- */ .closing { background: var(--bone-deep); padding: 16vh 6vw; position: relative; overflow: hidden; } .closing .ocean-waves-wrap { margin: -16vh -6vw 8vh -6vw; line-height: 0; position: relative; background: var(--bone); } .closing .ocean-waves-wrap img { display: block; width: 100%; height: auto; } /* The illustration's bottom edge is solid, opaque water all the way to its own canvas boundary — no natural fade there like the top has. Left alone it just stops dead against the section background. This blends it into that background instead of ending on a hard flat line. */ .closing .ocean-waves-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to bottom, rgba(219,216,204,0) 0%, var(--bone-deep) 100%); pointer-events: none; } .closing .inner { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; gap: 7vw; align-items: center; position: relative; z-index: 2; } .portrait { aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; position: relative; background: linear-gradient(165deg, #C9C3AC, #7C8A5E 55%, #445033); } .portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; } .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .portrait .placeholder-note { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(27,32,22,0.5); } .closing h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 500; margin: 0.6em 0 0.7em; } .closing .bio p { color: var(--ink-soft); margin-bottom: 1.2em; } .closing .guidance-note { font-style: italic; color: var(--moss-deep); font-size: 17px; border-left: 2px solid var(--fern); padding-left: 1em; margin: 1.6em 0; } .closing .guidance-note a { text-decoration: none; border-bottom: 1px solid currentColor; } .closing .about-link { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--fern); border-bottom: 1px solid var(--line); padding-bottom: 3px; } .closing .about-link:hover { border-color: var(--fern); } .letters { max-width: 620px; margin: 14vh auto 0; text-align: center; position: relative; z-index: 2; } .invitation { max-width: 560px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .invitation p { font-size: 18px; font-style: italic; color: var(--ink-soft); line-height: 1.8; margin-top: 1.2em; } .invite-btn { display: inline-block; margin-top: 2em; font-family: 'Newsreader', Georgia, serif; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; background: transparent; color: var(--fern); border: 1px solid var(--line); border-radius: 2px; padding: 12px 28px; cursor: pointer; transition: color 0.4s ease, border-color 0.4s ease; } .invite-btn:hover, .invite-btn:focus-visible { color: var(--moss-deep); border-color: var(--fern); } /* ---------- Invitation contact modal ---------- */ .invite-modal { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; } .invite-modal.open { display: flex; } .invite-modal-backdrop { position: absolute; inset: 0; background: rgba(27,32,22,0.55); } .invite-modal-box { position: relative; background: var(--bone); max-width: 460px; width: 88%; padding: 3em 2.4em; border-radius: 3px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } .invite-modal-box h3 { font-size: 24px; font-weight: 400; margin-bottom: 0.5em; } .invite-modal-sub { font-size: 15px; font-style: italic; color: var(--ink-soft); margin-bottom: 1.6em; } .invite-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; } .invite-modal-close:hover { color: var(--ink); } #inviteForm { display: flex; flex-direction: column; gap: 12px; } #inviteForm input, #inviteForm textarea { font-family: 'Newsreader', Georgia, serif; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink); resize: vertical; } #inviteForm input::placeholder, #inviteForm textarea::placeholder { color: #9B957F; font-style: italic; } #inviteForm button { margin-top: 6px; align-self: center; font-family: 'Newsreader', Georgia, serif; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--fern); color: var(--bone); border: none; border-radius: 2px; padding: 12px 32px; cursor: pointer; transition: background 0.4s ease; } #inviteForm button:hover { background: var(--moss-deep); } .invite-modal-sent { display: none; font-style: italic; color: var(--fern); margin-top: 1em; } .letters h3 { font-size: 26px; font-weight: 500; margin: 0.7em 0 0.6em; } .letters p { color: var(--ink-soft); font-size: 18px; } /* ---------- Brevo signup form, restyled to sit inside the site rather than look like an embedded widget. Brevo's own structural classes (sib-input, entry__field, sib-form-block__button etc.) are left exactly as generated, since their script relies on them for validation and the reCAPTCHA hook — only colour, spacing and type are overridden here. Note: the very first version of this had a bug — Brevo's own inline style="text-align:left" was still sitting on the button's wrapper div (carried over from their original snippet), and an inline style beats ordinary CSS regardless of what's written here, so no amount of styling below could actually center it. That inline style is now removed at the source in front-page.php; centering here is real. */ /* ---------- Brevo signup form. This is now the ONLY stylesheet governing this form — Brevo's own external CSS is deliberately not loaded (see functions.php), so nothing here is fighting a specificity battle against an unknown stylesheet anymore. A couple of base rules from Brevo's original snippet are restored below (message panels hidden until their JS shows one) since those were needed for correct behaviour, not just appearance, and were lost when their