/* Theme Name: LoveLifePhotography Theme URI: https://reallyforme.com/ Template: rfm-theme-creative Author: Eddie Flores / Guard Agency Description: Love Life Photography child theme on rfm-theme-creative. v1.2.10 replaces the flat Galleries dropdown with a 3-level nested Work menu (6 categories to their individual services), rendered as a desktop mega-panel and as collapsing two-level carets on mobile, and deepens the global hero scrim so white hero text stays readable over light photos. Version: 1.2.16 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: lovelifephotography-child-theme Tags: block-theme, child-theme */ :root{ --ll-ink:#2C353B; --ll-ink2:#39434A; --ll-ink3:#7E858A; --ll-brand:#A56A3C; --ll-brand-dark:#7C4A2C; --ll-tan:#D4B083; --ll-cream:#E8D8BD; --ll-bg:#FAF8F4; --ll-bg2:#F1ECE3; --ll-line:#E7E2D9; } /* shared section helpers */ .ll-eyebrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:14px;font-weight:600;color:var(--ll-brand)} .ll-hero,.ll-story,.ll-services,.ll-duo,.ll-arc,.ll-steps,.ll-member,.ll-stat,.ll-closing{box-sizing:border-box} /* 1. Typewriter hero */ .ll-hero{background:linear-gradient(135deg,#2C353B 0%,#39434A 60%,#2C353B 100%);color:#fff;text-align:center;padding:74px 20px 78px} .ll-hero h1{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:54px;line-height:1.05;margin:14px 0 8px} .ll-hero .ll-rot{color:var(--ll-tan);border-right:3px solid var(--ll-tan);padding-right:4px} .ll-hero p.ll-sub{font-size:20px;color:#E8E6E1;max-width:620px;margin:14px auto 26px} .ll-hero .ll-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .ll-hero .ll-trustline{margin-top:22px;font-size:15px;color:#CFCDC7} .ll-hero .ll-trustline .stars{color:var(--ll-tan);letter-spacing:2px} /* 2. Trust strip */ .ll-trust{background:var(--ll-ink);color:#EDEAE3;display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:18px 20px} .ll-trust span{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:16px} .ll-trust b{color:var(--ll-tan)} /* 3. Ashes-to-dust duotone gallery */ .ll-duo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .ll-duo-grid .d{position:relative;height:300px;border-radius:12px;overflow:hidden;cursor:pointer} .ll-duo-grid .d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.85);transition:filter .55s ease} .ll-duo-grid .d::after{content:"";position:absolute;inset:0;background:#2C353B;opacity:.30;mix-blend-mode:multiply;transition:opacity .55s,background .55s} .ll-duo-grid .d:hover img{filter:grayscale(0) saturate(1.05)} .ll-duo-grid .d:hover::after{opacity:.12;background:var(--ll-brand)} .ll-duo-grid .d b{position:absolute;left:14px;bottom:12px;z-index:2;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:16px;color:#fff;font-weight:700} /* 4. Bento gallery */ .ll-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:10px} .ll-bento i{background-size:cover;background-position:center;border-radius:10px;transition:transform .4s;display:block} .ll-bento i:hover{transform:scale(1.03)} /* 5. Life-arc timeline */ .ll-arc-line{position:relative;height:2px;background:var(--ll-line);margin:46px 10px 8px} .ll-arc-line .node{position:absolute;top:-8px;transform:translateX(-50%);text-align:center} .ll-arc-line .node .dot{width:16px;height:16px;border-radius:50%;background:var(--ll-brand);margin:0 auto;border:3px solid var(--ll-bg);box-shadow:0 0 0 2px var(--ll-tan)} .ll-arc-line .node b{display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:13px;font-weight:700;color:var(--ll-ink);margin-top:10px} /* 6. Story steps timeline */ .ll-step{position:relative;padding:0 0 26px 42px} .ll-step::before{content:"";position:absolute;left:10px;top:6px;bottom:-6px;width:2px;background:var(--ll-line)} .ll-step:last-child::before{display:none} .ll-step .dot{position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--ll-brand);border:3px solid var(--ll-bg);box-shadow:0 0 0 2px var(--ll-tan)} .ll-step .st{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;color:var(--ll-brand)} /* 7. Stat band */ .ll-stat{background:linear-gradient(135deg,#2C353B,#39434A);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:42px 18px} .ll-stat .s{text-align:center} .ll-stat .s b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:44px;color:var(--ll-tan);line-height:1} .ll-stat .s span{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:#CFCDC7;font-weight:600} /* 8. Membership band */ .ll-member{background:linear-gradient(135deg,#39434A,#2C353B);color:#fff;text-align:center;border-radius:16px;padding:46px 28px} .ll-member h2{color:var(--ll-tan)} /* 9. Quick Nav rebrand (kit ships ink+gold; make it Love Life ink+tan) */ .ir-anchor-toggle{background:var(--ll-ink) !important;border-color:rgba(212,176,131,.7) !important} .ir-anchor-toggle .lead,.ir-anchor-list a i{color:var(--ll-tan) !important} .ir-anchor-list a:hover{background:var(--ll-bg2) !important;color:var(--ll-ink) !important} @media(max-width:900px){ .ll-hero h1{font-size:38px} .ll-duo-grid,.ll-stat{grid-template-columns:repeat(2,1fr)} .ll-bento{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .ll-duo-grid,.ll-stat,.ll-bento{grid-template-columns:1fr} .ll-duo-grid .d{height:240px} } /* ============================================================ HEADER (v1.2.0). Love Life header right cluster. The header structure + nav (parts/header.html) uses the PARENT's native wp:navigation block. The parent's main.css styles `header .wp-block-navigation` for desktop dropdowns AND the dark mobile overlay, and the parent's rfm-kit (functions.php, wp_footer) ships the mobile submenu caret toggle JS. The child does NOT opt out of the kit (no rfm_kit_disable filter), so all of that is inherited. This block only styles the phone + CTA cluster the parent doesn't define, and themes both to the Love Life palette via the brand CSS variables. ============================================================ */ /* v1.2.6: the brand is now the native wp:site-logo block (the uploaded horizontal lockup that already contains the wordmark). The old hardcoded img + .ll-brand-word text span are removed. Size the logo tastefully for the bar; it scales down on mobile so it never crowds the hamburger. */ .ll-site-logo{flex-shrink:0;margin:0} .ll-site-logo a{display:inline-flex;align-items:center;text-decoration:none} .ll-site-logo .wp-block-site-logo__image, .ll-site-logo img{display:block;width:auto;height:auto;max-width:200px;max-height:52px} @media(max-width:980px){ .ll-site-logo img{max-width:170px;max-height:44px} } @media(max-width:560px){ .ll-site-logo img{max-width:150px;max-height:40px} } .ll-header-right{display:flex;align-items:center;gap:16px;flex-shrink:0} /* v1.2.6: phone is now a slim utility, NOT a second loud CTA. A compact icon + number, ink-colored, single line. One primary CTA (Book Your Date) leads; the phone is a quiet courtesy line beside it, not a button. */ .ll-header-phone{display:inline-flex;align-items:center;gap:7px;line-height:1;text-decoration:none;color:var(--ll-ink);white-space:nowrap} .ll-header-phone .ll-header-phone-ic{display:inline-flex;align-items:center;color:var(--ll-ink3)} .ll-header-phone .ll-header-phone-ic svg{display:block} .ll-header-phone .num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.01em;color:var(--ll-ink)} .ll-header-phone:hover .num,.ll-header-phone:hover .ll-header-phone-ic{color:var(--ll-brand)} .ll-header-phone:focus-visible{outline:2px solid var(--ll-brand);outline-offset:3px;border-radius:4px} .ll-header-cta{min-height:46px;font-size:15px;padding:11px 22px} /* Phone hides on small screens to keep the bar uncluttered; CTA stays. The parent collapses the nav to the hamburger below 1024px. */ @media(max-width:1279px){ .ll-header-phone{display:none} .ll-header-cta{padding:10px 18px;font-size:14px} } @media(max-width:560px){ /* keep the CTA from crowding the logo on the smallest phones */ .ll-header-cta{padding:9px 14px;font-size:13px} } /* ============================================================ PATTERN-PAGE FULL-WIDTH SAFETY (v1.2.0). Our live pages wrap content in a templateLock:contentOnly group and scope their look to `.entry-content .llp-*`, with sections set to `alignfull`. Under this block theme, wp:post-content renders `.entry-content .wp-block-post-content` and the core layout (theme.json contentSize 760 / wideSize 1160) already breaks `.alignfull` out to the full viewport. That is the proven mechanism. These rules are belt-and-suspenders: they guarantee the lock-group wrapper itself spans full width and that nothing reintroduces horizontal scroll on mobile. They do NOT change our page content; they only widen the wrapper and clip overflow. ============================================================ */ .entry-content .llp-home, .entry-content > .wp-block-group:has(> .llp-home){max-width:100%;width:100%;margin-left:0;margin-right:0} .entry-content .llp-home > .alignfull, .entry-content .llp-home > section{max-width:100%;width:100%;margin-left:0;margin-right:0} .entry-content .llp-home{overflow-x:clip} /* v1.2.6: the desktop bar was decluttered (UX pass). Top-level items dropped from 7 to 5 (About, Services, Memberships, Reviews, Contact); Home is gone because the logo links home, and Journal moved to the footer. With fewer items the bar breathes, so the inline nav gets a roomier gap and can hold a slightly larger, calmer type size. Below 980 the parent collapses to the brand-aware hamburger overlay (untouched). */ @media(min-width:981px){ header .rfm-primary-nav .wp-block-navigation__container{gap:4px 26px} header .rfm-primary-nav a, header .rfm-primary-nav .wp-block-navigation-item__content{font-size:16px;letter-spacing:0} } /* ════════════════════════════════════════════════════════════════════ v1.2.7 (2026-06-19) DARK HEADER (logo contrast fix). The Site Logo is a horizontal lockup (light-grey camera + tan LOVE LIFE + grey PHOTOGRAPHY). On the old light/cream bar it washed out. We paint the whole header bar the deep brand ink (--ll-ink #2C353B) so the logo pops, then flip every header text element to light for contrast: - nav links -> cream (#FAF8F4), hover -> brand gold (--ll-brand) - the Services/Galleries desktop dropdown panel -> dark, items light - the CALL utility (icon + number) -> light, hover gold - the 3-line hamburger bars -> white The gold Book Your Date button already pops on dark, so it is left. The mobile overlay menu (.is-menu-open) is already dark and is NOT touched here. The sticky bottom Call/Book bar sits on its own light bar and is NOT touched here. Scoped to `.rfm-site-header` / `header .rfm-primary-nav` so nothing outside the bar is affected. !important is used only where the parent theme sets a competing color on the same element. ════════════════════════════════════════════════════════════════════ */ /* the bar itself -> subtle on-brand dark gradient (v1.2.9), desktop + mobile. Was a flat var(--ll-ink). The gradient (ink -> ink2 -> ink) reads modern and on-brand while staying dark enough that the cream Site Logo + cream/gold nav links keep full contrast. Pure CSS, zero performance cost. */ .rfm-site-header{background:linear-gradient(100deg,#2C353B 0%,#39434A 55%,#2C353B 100%) !important} /* nav link text -> cream; hover/focus -> brand gold. Covers both the anchor and the parent's inner .wp-block-navigation-item__content span. */ header .rfm-primary-nav a, header .rfm-primary-nav .wp-block-navigation-item__content, header .rfm-primary-nav .wp-block-navigation-submenu>.wp-block-navigation-item__content{ color:var(--ll-cream) !important; } header .rfm-primary-nav a:hover, header .rfm-primary-nav a:focus-visible, header .rfm-primary-nav .wp-block-navigation-item__content:hover, header .rfm-primary-nav .wp-block-navigation-submenu:hover>.wp-block-navigation-item__content{ color:var(--ll-brand) !important; } /* the submenu (Galleries) caret arrow inherits the cream link color */ header .rfm-primary-nav .wp-block-navigation__submenu-icon{color:var(--ll-cream)} header .rfm-primary-nav .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon{color:var(--ll-brand)} /* DESKTOP DROPDOWN PANEL (Galleries). The parent renders the flyout as .wp-block-navigation__submenu-container. On the dark bar that panel must read clearly: dark panel, cream items, gold on hover, a hairline border. */ @media(min-width:981px){ header .rfm-primary-nav .wp-block-navigation__submenu-container{ background:var(--ll-ink2) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 14px 34px rgba(0,0,0,.34); border-radius:8px;padding:6px 0; } header .rfm-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .rfm-primary-nav .wp-block-navigation__submenu-container a{ color:var(--ll-cream) !important; } header .rfm-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover>.wp-block-navigation-item__content, header .rfm-primary-nav .wp-block-navigation__submenu-container a:hover, header .rfm-primary-nav .wp-block-navigation__submenu-container a:focus-visible{ color:var(--ll-brand) !important;background:rgba(255,255,255,.05) !important; } } /* CALL utility -> light on dark. Number + icon were ink-colored for the light bar; flip both to cream, keep the gold hover. */ .ll-header-phone, .ll-header-phone .num{color:var(--ll-cream) !important} .ll-header-phone .ll-header-phone-ic{color:var(--ll-tan) !important} .ll-header-phone:hover .num, .ll-header-phone:hover .ll-header-phone-ic{color:var(--ll-brand) !important} /* 3-LINE HAMBURGER -> white bars on the dark bar (was brand ink). The bars are drawn with currentColor on the open button (v1.2.3), so recoloring the button text recolors all three bars at once. */ @media(max-width:980px){ header .rfm-primary-nav .wp-block-navigation__responsive-container-open{ color:#FFFFFF !important; } } /* ════════════════════════════════════════════════════════════════════ v1.2.2 (2026-06-19) NATIVE STYLING PASS - bring every LLP page to the Integrity standard at the source. Our pages were designed for Divi and are now retrofitted onto the block theme. The parent (rfm-theme-creative) keeps winning conflicts: it underlines content links, forces .entry-content text to dark ink, and injects its own red
chevron over our "+". Each page used to patch this inline. These rules fix it ONCE, globally, scoped to .entry-content [class*="llp-"], so every page benefits at the same time. ════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------- ITEM 1 - KILL STRAY UNDERLINES. The parent + browser default underline content links. On our pattern pages, cards / chips / buttons / eyebrows / nav-like links must be clean. Specificity .entry-content [class*="llp-"] X (0,2,1+) beats the parent's .entry-content rules. We keep a subtle underline ONLY on real inline prose links inside body copy (.whyblock a.il, .intro a, story/why prose). --------------------------------------------------------------------- */ .entry-content [class*="llp-"] a, .entry-content [class*="llp-"] .cc, .entry-content [class*="llp-"] .go, .entry-content [class*="llp-"] .chip, .entry-content [class*="llp-"] .bcard, .entry-content [class*="llp-"] .btn, .entry-content [class*="llp-"] .wp-block-button__link, .entry-content [class*="llp-"] .eb, .entry-content [class*="llp-"] .srow a, .entry-content [class*="llp-"] .b-primary, .entry-content [class*="llp-"] .b-ghost, .entry-content [class*="llp-"] .b-dark{ text-decoration:none; } /* and on hover, so nothing flips an underline back on */ .entry-content [class*="llp-"] a:hover, .entry-content [class*="llp-"] .cc:hover, .entry-content [class*="llp-"] .go:hover, .entry-content [class*="llp-"] .chip:hover, .entry-content [class*="llp-"] .bcard:hover, .entry-content [class*="llp-"] .btn:hover, .entry-content [class*="llp-"] .wp-block-button__link:hover{ text-decoration:none; } /* Genuine inline prose links keep a tasteful underline (body copy only). */ .entry-content [class*="llp-"] .whyblock a.il, .entry-content [class*="llp-"] .intro p a, .entry-content [class*="llp-"] .story p a, .entry-content [class*="llp-"] .why p a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; color:var(--ll-brand); font-weight:600; } /* --------------------------------------------------------------------- ITEM 2 - RE-ASSERT LIGHT-ON-DARK TEXT (parent forces dark ink). The parent sets `.entry-content p:not([class*="rfm-"]):not(.wp-block- paragraph){color:var(--ink2)}` (dark) at (0,2,1). Our dark sections (hero, category hero .llp-chero, dark CTA bands, AI band, stat band, the category-grid card text) need their intended light colors back. Scoping with .entry-content [class*="llp-"] {selector} clears (0,2,1) cleanly. Done globally so home AND every category/other page is fixed. --------------------------------------------------------------------- */ /* category-grid cards (home "What We Capture") */ .entry-content [class*="llp-"] .cc h3{color:#fff} .entry-content [class*="llp-"] .cc .svcs{color:var(--ll-cream)} .entry-content [class*="llp-"] .cc .go{color:var(--ll-tan)} /* trust strip */ .entry-content [class*="llp-"] .trust, .entry-content [class*="llp-"] .trust .t{color:#EDEAE3} .entry-content [class*="llp-"] .trust .t b{color:var(--ll-tan)} /* AI band */ .entry-content [class*="llp-"] .ai h2{color:var(--ll-tan)} .entry-content [class*="llp-"] .ai p{color:#E8E6E1} /* dark closing CTA band */ .entry-content [class*="llp-"] .closing h2{color:#fff} .entry-content [class*="llp-"] .closing h2 .tan{color:var(--ll-tan)} .entry-content [class*="llp-"] .closing p{color:#D7D5CF} /* stat band */ .entry-content [class*="llp-"] .stat .s b{color:var(--ll-tan)} .entry-content [class*="llp-"] .stat .s span{color:#CFCDC7} /* category + about dark hero (.llp-chero on every category/about page) */ .entry-content [class*="llp-"] .llp-chero h1, .entry-content [class*="llp-"] .llp-chero h2{color:#fff} .entry-content [class*="llp-"] .llp-chero h1 .tan, .entry-content [class*="llp-"] .llp-chero .eb{color:var(--ll-tan)} .entry-content [class*="llp-"] .llp-chero p, .entry-content [class*="llp-"] .llp-chero .sub, .entry-content [class*="llp-"] .llp-chero .tl{color:#FAF9F6} /* the dark typewriter hero on the homepage carries inline color, but the nested

still gets hit by the parent ink rule. Re-assert it. */ .entry-content [class*="llp-"] .llp-hero p{color:#F1EFEA} /* --------------------------------------------------------------------- ITEM 3 - FAQ MARKER: exactly ONE clean indicator, no red chevron. The parent injects a RED (#D7263D) downward-chevron SVG via `.wp-block-details summary::after` AND rotates it. Our pages add a brown "+" via the same ::after on the scoped selector, but the parent's `.wp-block-details summary::after` (0,1,1) plus our scoped `.faq summary ::after` can read as two indicators on retrofit. Kill the parent's chevron on our pages and keep the single, tasteful "+" that rotates to an "x" on open. (No red arrow.) --------------------------------------------------------------------- */ .entry-content [class*="llp-"] .wp-block-details summary::-webkit-details-marker, .entry-content [class*="llp-"] .faq summary::-webkit-details-marker, .entry-content [class*="llp-"] details summary::-webkit-details-marker{display:none} .entry-content [class*="llp-"] .wp-block-details summary::marker, .entry-content [class*="llp-"] .faq summary::marker, .entry-content [class*="llp-"] details summary::marker{content:"";display:none} /* ONE indicator: our brown plus. Override the parent's red SVG chevron (it set background-image on ::after) so it cannot show through. */ .entry-content [class*="llp-"] .faq summary::after, .entry-content [class*="llp-"] .wp-block-details summary::after, .entry-content [class*="llp-"] details.wp-block-details > summary::after{ content:"+"; background-image:none; background:none; border:0; position:static; width:auto;height:auto;margin:0; font-size:26px;line-height:1; color:var(--ll-brand); font-weight:400; transform:none; transition:transform .2s ease; } .entry-content [class*="llp-"] .faq details[open] summary::after, .entry-content [class*="llp-"] details.wp-block-details[open] > summary::after{ transform:rotate(45deg); color:var(--ll-brand); } /* --------------------------------------------------------------------- ITEM 4 - REBALANCE "HOW IT WORKS" STEPS. STEP label, title, and description all left-align cleanly along the timeline rail. The parent's single-post / universal-alignment rules can center headings; the LLP step heading is its own font and must stay left. Mobile-first vertical rhythm. --------------------------------------------------------------------- */ .entry-content [class*="llp-"] .steps .step{text-align:left} .entry-content [class*="llp-"] .steps .step .st, .entry-content [class*="llp-"] .steps .step h3, .entry-content [class*="llp-"] .steps .step p{ text-align:left; margin-left:0; margin-right:0; max-width:100%; } .entry-content [class*="llp-"] .steps .step .st{margin:0 0 2px} .entry-content [class*="llp-"] .steps .step h3{margin:0 0 5px;line-height:1.18} .entry-content [class*="llp-"] .steps .step p{margin:0;line-height:1.6} /* a touch more vertical room between steps for premium spacing */ .entry-content [class*="llp-"] .steps .step{padding-bottom:30px} /* --------------------------------------------------------------------- ITEM 5 - ELEGANCE / CENTER UP (contained text bands like Integrity). Integrity contains its reading sections to a calm column instead of stretching text edge to edge. We keep full-bleed for HEROES, the PHOTO CATEGORY GRID, DARK CTA BANDS, and the TRUST STRIP (those want the full viewport). Everywhere TEXT reads better contained (story, how-it-works, faq, journal, why, reviews intro, areas), tighten the inner .wrap so the words sit in a refined column. The sections stay alignfull (background spans edge to edge); only the INNER .wrap content column narrows. This is the elegant move. --------------------------------------------------------------------- */ /* default text-band content column: calmer, contained */ .entry-content [class*="llp-"] .story .wrap, .entry-content [class*="llp-"] .whyblock .wrap, .entry-content [class*="llp-"] .intro{max-width:820px} .entry-content [class*="llp-"] .steps{max-width:720px} .entry-content [class*="llp-"] .faq{max-width:820px} /* the reviews intro + section heads stay centered and contained */ .entry-content [class*="llp-"] .sec-head{max-width:720px;margin-left:auto;margin-right:auto} /* journal grid + areas + how-it-works keep their wider wrap but centered */ .entry-content [class*="llp-"] .bloggrid, .entry-content [class*="llp-"] .chips{margin-left:auto;margin-right:auto} /* NOTE: heroes (.llp-hero/.llp-chero), the category photo grid (.ccgrid), dark CTA bands (.closing/.ai/.member), and the trust strip keep their full-bleed treatment from the page CSS - we do not narrow those. */ /* --------------------------------------------------------------------- ITEM 6 - TESTIMONIAL CAROUSEL (.ll-stage). Auto-rotating horizontal PEEK carousel: one card centered, a sliver of the prev/next card peeking on each side, auto-advance, arrows, swipe, pause on hover. The JS lives in functions.php (theme output, so content sanitizers can never strip it). Holds up to 9 cards. The PEEK effect: the viewport (.ll-stage-vp) is wider than one card and the track centers the active card with side padding, so neighbours show through the gaps. The JS translates the track by one card width per step. --------------------------------------------------------------------- */ .entry-content [class*="llp-"] .ll-stage{position:relative;max-width:1180px;margin:0 auto} .entry-content [class*="llp-"] .ll-stage-vp{overflow:hidden;padding:6px 0 8px} .entry-content [class*="llp-"] .ll-track{display:flex;align-items:stretch;will-change:transform;transition:transform .55s cubic-bezier(.4,0,.2,1)} /* each slide: a peek of the neighbours shows because slide width < 100%. 1 card centered, ~12% peek on each side on desktop. */ .entry-content [class*="llp-"] .ll-track > .ll-rev{flex:0 0 76%;box-sizing:border-box;padding:0 12px} .entry-content [class*="llp-"] .ll-card{background:#fff;border:1px solid var(--ll-line);border-radius:18px;padding:34px 32px;box-shadow:0 14px 36px rgba(44,53,59,.07);height:100%;box-sizing:border-box;transition:opacity .4s ease,transform .4s ease} /* dim + slightly shrink the peeking neighbours so the center reads as the focus */ .entry-content [class*="llp-"] .ll-rev:not(.is-active) .ll-card{opacity:.5;transform:scale(.96)} .entry-content [class*="llp-"] .ll-rev.is-active .ll-card{opacity:1;transform:scale(1)} .entry-content [class*="llp-"] .ll-card .qq{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:60px;color:var(--ll-tan);line-height:.5;height:26px} .entry-content [class*="llp-"] .ll-card .qt{font-size:20px;line-height:1.5;color:var(--ll-ink);margin:6px 0 0} .entry-content [class*="llp-"] .ll-card .stars{color:var(--ll-brand);letter-spacing:2px;font-size:15px;margin-top:14px} .entry-content [class*="llp-"] .ll-card .who{margin-top:14px;padding-top:16px;border-top:1px solid var(--ll-line);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ll-ink);font-weight:700} .entry-content [class*="llp-"] .ll-card .who span{display:block;font-size:13px;color:var(--ll-ink3);text-transform:none;letter-spacing:0;font-weight:400;font-family:'Barlow',sans-serif} /* arrows */ .entry-content [class*="llp-"] .ll-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid var(--ll-line);background:#fff;color:var(--ll-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(44,53,59,.16);transition:background .18s,color .18s,transform .18s} .entry-content [class*="llp-"] .ll-arrow:hover{background:var(--ll-brand);color:#fff;border-color:var(--ll-brand)} .entry-content [class*="llp-"] .ll-arrow svg{width:20px;height:20px} .entry-content [class*="llp-"] .ll-prev{left:6px} .entry-content [class*="llp-"] .ll-next{right:6px} /* dots */ .entry-content [class*="llp-"] .ll-dots{display:flex;justify-content:center;gap:9px;margin-top:20px} .entry-content [class*="llp-"] .ll-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--ll-line-2,#CBC4B8);cursor:pointer;transition:background .2s,transform .2s} .entry-content [class*="llp-"] .ll-dots button[aria-current="true"]{background:var(--ll-brand);transform:scale(1.25)} /* before JS boots, degrade to a clean stacked list (no overflow clipping) */ .entry-content [class*="llp-"] .ll-stage:not(.ll-ready) .ll-track{display:block} .entry-content [class*="llp-"] .ll-stage:not(.ll-ready) .ll-track > .ll-rev{flex:none;width:100%;padding:0 0 18px} .entry-content [class*="llp-"] .ll-stage:not(.ll-ready) .ll-rev .ll-card{opacity:1;transform:none} .entry-content [class*="llp-"] .ll-stage:not(.ll-ready) .ll-arrow, .entry-content [class*="llp-"] .ll-stage:not(.ll-ready) .ll-dots{display:none} @media(max-width:900px){ .entry-content [class*="llp-"] .ll-track > .ll-rev{flex:0 0 84%} .entry-content [class*="llp-"] .ll-arrow{width:42px;height:42px} } @media(max-width:560px){ /* one card with a thin sliver of the next so the user knows to swipe */ .entry-content [class*="llp-"] .ll-track > .ll-rev{flex:0 0 90%;padding:0 8px} .entry-content [class*="llp-"] .ll-card{padding:26px 22px} .entry-content [class*="llp-"] .ll-arrow{display:none} } @media(prefers-reduced-motion:reduce){ .entry-content [class*="llp-"] .ll-track{transition:none} } /* --------------------------------------------------------------------- ITEM 7 - BLOG FEATURED IMAGES AT ANY ASPECT RATIO (the Divi behavior). An infographic, a 16:9 thumbnail, a tall portrait should all just fit and look good, never hard-cropped to a fixed height. (a) SINGLE POST: our child templates/single.html renders the featured image inline (.llp-post-feat). Render it at its natural ratio, responsive width, full content column, no crop. (b) ARCHIVE / BLOG LISTING: the parent caps card thumbs at max-height:360px with object-fit:cover (crops). Release the cap so the natural ratio shows; cards stay tidy because the grid sizes by width. --------------------------------------------------------------------- */ /* (a) single post featured image - natural ratio, no crop */ .llp-single .llp-post-feat, .llp-single .wp-block-post-featured-image{margin:0;width:100%} .llp-single .llp-post-feat img, .llp-single .wp-block-post-featured-image img{ width:100%; height:auto; /* natural aspect ratio */ max-height:none; /* never clamp tall portraits */ aspect-ratio:auto; /* beat any parent fixed ratio */ object-fit:contain; /* never crop the subject */ display:block; border-radius:14px; box-shadow:0 18px 44px rgba(44,53,59,.14); } /* (b) blog/archive listing thumbs - release the parent 360px crop cap */ .rfm-feature img, .rfm-feature .wp-block-post-featured-image img, .rfm-feature .wp-block-image img{ max-height:none; aspect-ratio:auto; object-fit:contain; } /* ════════════════════════════════════════════════════════════════════ v1.2.3 (2026-06-19) MOBILE PASS. Three focused mobile changes, all scoped so desktop is untouched: (1) center the full-screen hamburger overlay menu (links + submenu), (2) a clean 3-line hamburger icon (the parent renders a 2-line SVG), (3) a site-wide sticky bottom CTA bar (Call + Book Your Date), ported from the Integrity Repipe .mobilebar pattern and themed to Love Life. The parent collapses to the hamburger at <=980px, so every mobile rule here keys off that same 980px breakpoint to stay in lockstep. ════════════════════════════════════════════════════════════════════ */ /* ---- (1) CENTER THE MOBILE OVERLAY MENU -------------------------------- When the hamburger is tapped the parent opens a fixed dark overlay (.is-menu-open) but stacks the items left-aligned (align-items:stretch, default left text). Center the whole column horizontally and center the link text + the Services submenu. Scoped to the open state only, so the desktop nav row is never touched. Beats the parent's left-align rules. */ header .rfm-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; width:100% !important;max-width:460px !important;margin:0 auto !important; } header .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item{ width:100% !important;display:flex !important;flex-direction:column !important;align-items:center !important; } /* top-level links: centered text, full-width faint divider */ header .is-menu-open .wp-block-navigation-item__content, header .is-menu-open a{ text-align:center !important;justify-content:center !important;width:100% !important; } /* submenu PARENT ("Services"): label + caret centered on one row */ header .is-menu-open .wp-block-navigation-submenu{ display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;width:100% !important; } header .is-menu-open .wp-block-navigation-submenu>.wp-block-navigation-item__content{ width:auto !important;padding-right:6px !important; } header .is-menu-open .wp-block-navigation-submenu__toggle{ width:auto !important;min-width:0 !important;margin-left:4px !important; } /* submenu GROUP: centered, lighter child links */ header .is-menu-open .wp-block-navigation__submenu-container{ width:100% !important;padding-left:0 !important; } header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .is-menu-open .wp-block-navigation__submenu-container a{ text-align:center !important;justify-content:center !important; } /* ---- (2) CLEAN 3-LINE HAMBURGER ICON ---------------------------------- The parent paints its own SVG into the open button (a 2-line glyph). Hide that SVG and draw three crisp bars with currentColor (brand ink) via a center bar + ::before/::after. 48px tap target (WCAG 2.5.5). Only on the open (closed-menu) button, so the in-overlay close X is left as-is. */ @media(max-width:980px){ header .rfm-primary-nav .wp-block-navigation__responsive-container-open{ position:relative; width:48px;height:48px;min-width:48px; display:flex !important;align-items:center;justify-content:center; color:#FAF8F4 !important; } header .rfm-primary-nav .wp-block-navigation__responsive-container-open svg{display:none !important} /* the three bars: one drawn element + two box-shadow copies above/below */ header .rfm-primary-nav .wp-block-navigation__responsive-container-open::before{ content:""; width:26px;height:2.5px;border-radius:3px; background:currentColor; box-shadow:0 -8px 0 currentColor, 0 8px 0 currentColor; } } /* ---- (3) STICKY BOTTOM MOBILE CTA BAR (site-wide) ---------------------- Injected on every page from functions.php (wp_footer). Two equal halves, fixed to the bottom of the viewport, mobile only. Themed to Love Life: ink call button on the left, gold Book button on the right. z-index 60 to match the parent theme's documented contract (header 50 / CTA 60 / back- to-top 55 / drawer 100000). */ .ll-mobilebar{ display:none; position:fixed;left:0;right:0;bottom:0;z-index:60; gap:10px;padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); /* iOS home-bar safe area */ background:rgba(250,248,244,.98); /* --ll-bg, slightly translucent */ backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-top:1px solid var(--ll-line); box-shadow:0 -6px 20px rgba(44,53,59,.16); box-sizing:border-box; } .ll-mobilebar-btn{ flex:1 1 0;min-width:0; display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:50px;padding:13px 8px; font-family:'Barlow Condensed',sans-serif; font-weight:800;font-size:clamp(13.5px,3.7vw,16px);letter-spacing:0;white-space:nowrap; text-decoration:none;border-radius:12px;text-align:center;line-height:1.1; } .ll-mobilebar-call{ background:var(--ll-ink);color:#fff;border:1px solid var(--ll-ink); } .ll-mobilebar-call .ll-mobilebar-ic{display:inline-flex;align-items:center} .ll-mobilebar-call .ll-mobilebar-ic svg{display:block;width:18px;height:18px} .ll-mobilebar-book{ background:var(--ll-brand);color:#fff;border:1px solid var(--ll-brand); } .ll-mobilebar-btn:active{filter:brightness(.95)} .ll-mobilebar-btn:focus-visible{outline:3px solid var(--ll-tan);outline-offset:2px} /* show the bar only on mobile (parent's hamburger breakpoint) */ @media(max-width:980px){ .ll-mobilebar{display:flex} /* v1.2.5: drop the redundant header Book button on mobile (now in the sticky bar); push hamburger to far right */ .ll-header-right{display:none !important} header .rfm-primary-nav{margin-left:auto !important} /* reserve space so the bar never covers page content; add safe-area too. ~70px bar + safe-area. body.has-sticky-cta is set in functions.php. */ body.has-sticky-cta .wp-site-blocks{ padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px)); } /* lift the parent's floating back-to-top button ABOVE the bar so they never overlap (parent injects .rfm-to-top at bottom:24px, then 92px at <=620px; pin it clear of our bar at all mobile widths). */ .rfm-to-top,.to-top,.mef-scroll-top,.rfm-scroll-top{ bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important; } } /* hide the bar while the mobile nav overlay is open, so it never sits on top of the menu (mirrors the parent's overlay-open-hide for .rfm-to-top). */ body:has(.wp-block-navigation__responsive-container.is-menu-open) .ll-mobilebar{ display:none !important; /* v1.2.12: replaced by the stacked in-menu CTA (.ll-menu-cta) */ } /* respect reduced motion: no transition surprises on the bar */ @media(prefers-reduced-motion:reduce){ .ll-mobilebar-btn{transition:none} } @media print{ .ll-mobilebar{display:none !important} } /* ════════════════════════════════════════════════════════════════════ v1.2.4 (2026-06-19) BLOG INDEX + LISTING THUMBS + MOBILE SERVICES CARET. Four scoped fixes, none touch desktop body pages: (1) Blog index hero: the parent's home.html/index.html ships the Really For Me agency hero copy ("Field notes from the work" / "The blog." / the done-for-you-content paragraph) in a RED eyebrow. We override the blog index with child templates/home.html + index.html carrying Love Life copy; this block themes that hero to the brand (brown eyebrow, brand ink heading, calm contained column). (2) Listing cards: v1.2.2 set archive thumbs to object-fit:contain which letterboxed them (white rails on tall/odd images). Listing/grid cards now use a uniform 16:9 cover thumbnail that fills cleanly. (3) Single post: featured image stays NATURAL ratio (object-fit:contain, height auto) so a full infographic or tall portrait shows uncropped. (4) Mobile Services caret: draw a clear, always-visible down-chevron on the Services submenu toggle in the centered overlay; it rotates 180deg when the submenu is expanded (the parent rfm-kit JS toggles aria-expanded). White to read on the dark overlay. ════════════════════════════════════════════════════════════════════ */ /* ---- (1) BLOG INDEX HERO (Love Life, not Really For Me) ----------------- The child templates/home.html + index.html carry the LLP copy in .llp-blog-hero with .llp-blog-eyebrow / .llp-blog-title / .llp-blog-sub. Theme the hero to the brand: brown eyebrow (NOT the parent red), brand-ink heading, contained calm column. */ .llp-blog-hero{ background:var(--ll-bg); text-align:center; padding:64px 20px 30px; } .llp-blog-hero .rfm-wrap{max-width:760px;margin-left:auto;margin-right:auto} .llp-blog-eyebrow{ color:var(--ll-brand); /* brown, beats the parent's red eyebrow */ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.2em; font-weight:700; font-size:14px; margin:0 0 10px; } .llp-blog-title{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; color:var(--ll-ink); font-size:clamp(32px,5vw,52px); line-height:1.05; letter-spacing:.01em; margin:0 0 14px; } .llp-blog-sub{ color:var(--ll-ink2); font-size:19px; line-height:1.6; max-width:640px; margin:0 auto; } /* ---- (2) LISTING / GRID CARD THUMBS: uniform 16:9 cover ---------------- Override v1.2.2's contain (which letterboxed) AND the parent's 360px cap. Every card thumb is now a clean, uniform 16:9 that fills edge to edge, like a premium blog/YouTube grid. Higher specificity than .rfm-feature img so this wins. (Single-post image is handled separately below, untouched.) */ .rfm-feature img, .rfm-feature .wp-block-post-featured-image img, .rfm-feature .wp-block-image img{ width:100%; height:auto; aspect-ratio:16/9; /* uniform card shape */ max-height:none; object-fit:cover; /* fill, no letterbox */ object-position:center; display:block; } /* ---- (3) SINGLE POST FEATURED IMAGE: natural ratio, uncropped ---------- Re-assert (also set in v1.2.2 ITEM 7) so the listing rule above can never bleed onto the single-post image. Infographics + tall portraits show in full. .llp-single scopes this to the post template only. */ .llp-single .llp-post-feat img, .llp-single .wp-block-post-featured-image img{ width:100%; height:auto; aspect-ratio:auto; /* natural ratio, beat any fixed ratio */ max-height:none; object-fit:contain; /* never crop the subject */ display:block; } /* ---- (4) MOBILE SERVICES CARET (visible down-chevron, rotates on open) -- In the centered dark overlay the Services submenu collapses by default (v1.2.3). Users need a clear cue it expands. Draw a CSS down-chevron on the submenu toggle and rotate it 180deg when aria-expanded="true" (the parent rfm-kit JS sets that). White so it reads on the dark overlay. Scoped to the open overlay so the desktop nav is untouched. We also size the WP-native toggle SVG (if WP renders one) so we never get a double cue. */ @media(max-width:980px){ /* hide the WP-native SVG inside the toggle so our CSS caret is the single, reliable indicator (the native one was not reading on the overlay) */ header .is-menu-open .wp-block-navigation-submenu__toggle svg{display:none !important} /* make the toggle a clear tap target that lays out its caret centered */ header .is-menu-open .wp-block-navigation-submenu__toggle{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important;min-width:34px !important;height:34px !important; margin-left:6px !important;padding:0 4px !important; background:none !important;border:0 !important; color:#fff !important; cursor:pointer; transition:transform .2s ease; } /* the chevron itself: a clean down-caret drawn from two borders */ header .is-menu-open .wp-block-navigation-submenu__toggle::after{ content:""; display:block; width:11px;height:11px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg); margin-top:-4px; transition:transform .2s ease; } /* rotate the whole toggle 180deg when the submenu is open (chevron flips up) */ header .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]{ transform:rotate(180deg); } } /* ════════════════════════════════════════════════════════════════════ v1.2.6 (2026-06-19) DESKTOP NAV DECLUTTER + REAL BRAND LOGO (header + footer) + SLIM PHONE UTILITY. Header: the brand is now the native wp:site-logo block (uploaded horizontal lockup; sizing + the slim phone utility live in the header cluster block above). Footer: the parent's glyph brand mark (a play triangle + short name) is replaced with the same Love Life logo image so the footer carries real brand identity, and it scales down on mobile. The Explore column gained Journal (moved off the top bar) and repointed Reviews to /testimonials/ and Services to /love-stories/. ════════════════════════════════════════════════════════════════════ */ .ll-site-footer .rfm-foot-brand{display:flex;flex-direction:column;gap:14px} .ll-foot-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0} .ll-foot-logo img{display:block;width:auto;height:auto;max-width:220px;max-height:60px} @media(max-width:780px){ .ll-foot-logo img{max-width:190px;max-height:52px} } /* ════════════════════════════════════════════════════════════════════ v1.2.9 (2026-06-20) DARK GRADIENT FOOTER (matches the dark gradient header) + FULL LIGHT-ON-DARK TEXT. The footer was inherited cream (parent .rfm-site-footer{background:var( --bg)}), so the real Love Life logo (a dark lockup) washed into the white. Now the footer carries the SAME ink->ink2->ink gradient as the nav bar, so the logo pops and the chrome bookends the page. Every text element is re-asserted light: headings/labels -> cream, body/links -> light muted #CFCDC7, link hover -> brand gold, dividers -> rgba(255,255,255,.12). Scoped to `.ll-site-footer` (the child wrapper class on parts/footer.html) so it wins over the parent's `.rfm-site-footer` / `.rfm-footer` base at equal-or-higher specificity without touching the parent for other clients. ════════════════════════════════════════════════════════════════════ */ /* the footer shell -> dark gradient, light default text, light top border */ .ll-site-footer.rfm-site-footer, .ll-site-footer{ background:linear-gradient(100deg,#2C353B 0%,#39434A 55%,#2C353B 100%) !important; color:#CFCDC7 !important; border-top:1px solid rgba(255,255,255,.12) !important; } /* brand column blurb (org_description) -> light muted */ .ll-site-footer .rfm-foot-brand p{ color:#CFCDC7 !important; } /* column headings/labels ("Explore", "Reach us") -> cream, was --ink3 dark */ .ll-site-footer .rfm-foot-heading{ color:#FAF8F4 !important; } /* Explore nav links (About / Services / Journal / Reviews / Memberships / Contact) -> light muted, gold on hover/focus. Parent set --ink2 + hover --green-dark; both flipped. */ .ll-site-footer .rfm-foot-nav a{ color:#CFCDC7 !important; } .ll-site-footer .rfm-foot-nav a:hover, .ll-site-footer .rfm-foot-nav a:focus-visible{ color:var(--ll-brand) !important; } /* "Reach us" column (rfm_nap block: NAP lines + the phone/email links). Parent set the column text --ink2 and the links --green; both flipped so nothing is dark-on-dark. */ .ll-site-footer .rfm-foot-col p{ color:#CFCDC7 !important; } .ll-site-footer .rfm-foot-col p a{ color:#FAF8F4 !important; } .ll-site-footer .rfm-foot-col p a:hover, .ll-site-footer .rfm-foot-col p a:focus-visible{ color:var(--ll-brand) !important; } /* kicker (italic tagline) -> cream, divider line -> light hairline */ .ll-site-footer .rfm-foot-kicker{ color:#FAF8F4 !important; border-top:1px solid rgba(255,255,255,.12) !important; } /* copyright line -> light muted (was --ink3 dark) */ .ll-site-footer .rfm-foot-copy{ color:#CFCDC7 !important; } /* the brand logo now sits on dark and pops; keep its sizing rules from v1.2.6 above. No filter needed; the lockup is a light/white PNG-friendly logo that reads on dark. If the served logo ever renders dark-on-dark, the fix is a lighter logo asset, not a CSS hack. */ /* ════════════════════════════════════════════════════════════════════ v1.2.10 (2026-06-20) NESTED "WORK" MEGA-MENU + GLOBAL HERO SCRIM. CHANGE 1 - The top nav item "Galleries" became "Work", a 3-level nested structure: Work -> 6 category submenus -> each category's individual services. parts/header.html now nests a wp:navigation-submenu per category (className ll-mega-cat) inside the top "Work" submenu (className ll-mega). DESKTOP (>=981px): "Work" opens a wide MEGA-PANEL below the bar. The 6 categories lay out as columns (3 col x 2 rows). Each category name is a bold cream heading that links to its category page; its services list below it as a tidy vertical list. We force the nested category containers to always show (no second hover flyout) and lay them inline under the heading. Generous spacing on the dark header palette. MOBILE (<=980px): two levels of carets. "Work" caret expands the 6 categories; each category has its OWN caret expanding its services. Both collapse by default. The parent rfm-kit JS toggles aria-expanded per toggle (e.target.closest), so nesting works natively; we only ADD the level-2 indentation + ensure each nested toggle draws its own caret. The child functions.php adds a small hardening shim so a tap on a nested caret never bubbles up and collapses its parent. CHANGE 2 - Global hero scrim: deepen the readability backing on the homepage hero (.llp-hero-scrim) and every category/service hero (.llp-chero::after) so white headline + body copy clear WCAG ~4.5:1 over light photo frames, while the photo still shows through. ════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── DESKTOP MEGA-PANEL (>=981px). The "Work" flyout becomes a 3x2 grid of category columns. Native WP would render each nested category as its own hover flyout; we override that so everything shows at once in one tidy panel. ───────────────────────────────────────────────────────────────────── */ @media(min-width:981px){ /* the "Work" top-level item is the positioning anchor */ header .rfm-primary-nav .wp-block-navigation-item.ll-mega{position:relative} /* the WORK panel itself: wide, dark, grid of 3 columns x 2 rows. Override the parent's adaptive 2-col mega rule (it triggers at 7+ children) and the base submenu panel styling. */ header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container{ display:grid !important; grid-template-columns:repeat(3, minmax(190px, 1fr)) !important; gap:30px 36px !important; width:max-content !important; max-width:min(92vw, 760px) !important; min-width:0 !important; /* v1.2.13: CENTER the panel under the Work trigger (was right:0, which anchored a 700px+ panel to Work's right edge and pushed it off the LEFT of the screen now that Work sits near the center of the nav). */ left:50% !important;right:auto !important; transform:translateX(-50%) !important; top:100% !important; margin-top:14px !important; padding:30px 34px !important; background:var(--ll-ink2) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 18px 44px rgba(0,0,0,.40) !important; border-radius:12px !important; } /* each CATEGORY = one grid cell. Reset the nested submenu so it is a plain column (heading + service list), NOT a hover flyout. */ header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat{ position:static !important; display:block !important; width:100% !important; } /* CATEGORY HEADING (the nested submenu's own __content / toggle row): bold cream label, links to the category page, sits at the top of the column. Suppress the nested caret arrow on desktop (no flyout cue needed; everything is already visible). */ header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat > .wp-block-navigation-item__content{ font-family:'Barlow Condensed',sans-serif !important; text-transform:uppercase !important; letter-spacing:.06em !important; font-weight:800 !important; font-size:15px !important; color:var(--ll-tan) !important; padding:0 0 10px !important; margin:0 0 8px !important; border-bottom:1px solid rgba(255,255,255,.14) !important; display:block !important; white-space:nowrap !important; } header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat > .wp-block-navigation-item__content:hover, header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat:hover > .wp-block-navigation-item__content{ color:var(--ll-brand) !important; } /* hide the nested category caret arrow on desktop */ header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat > .wp-block-navigation__submenu-icon, header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat > .wp-block-navigation-submenu__toggle{ display:none !important; } /* SERVICE LIST (the level-3 container): force it always visible as a static vertical list under the heading. Kill the hover-flyout positioning + panel chrome so it reads as a clean column. */ header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container{ display:block !important; position:static !important; opacity:1 !important;visibility:visible !important;pointer-events:auto !important; transform:none !important; background:transparent !important; border:0 !important;box-shadow:none !important;border-radius:0 !important; margin:0 !important;padding:0 !important; min-width:0 !important;width:100% !important; } header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container a{ display:block !important; font-family:'Barlow',sans-serif !important; text-transform:none !important; letter-spacing:0 !important; font-weight:500 !important; font-size:15px !important; color:var(--ll-cream) !important; padding:6px 0 !important; background:none !important; white-space:nowrap !important; line-height:1.3 !important; } header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container a:hover, header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container a:focus-visible, header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content{ color:var(--ll-brand) !important; background:none !important; padding-left:4px !important; transition:color .16s ease, padding-left .16s ease; } } /* ───────────────────────────────────────────────────────────────────── MOBILE NESTED CARETS (<=980px). Two collapsible levels in the centered overlay. The parent rfm-kit JS toggles aria-expanded on whichever .wp-block-navigation-submenu__toggle is tapped (closest()), and the parent CSS reveals each toggle's OWN adjacent submenu-container, so nesting works without new JS. These rules add the level-2 indent so the hierarchy reads, ensure BOTH the "Work" caret and each category caret draw a visible chevron (the v1.2.4 caret CSS already targets every toggle), and keep the centered, clean look. ───────────────────────────────────────────────────────────────────── */ @media(max-width:980px){ /* belt-and-suspenders: each level collapses by default and only its own toggle reveals it. (Parent ships these; re-assert in case load order or a future parent change drops them, scoped to our nav.) */ header .rfm-primary-nav .is-menu-open .wp-block-navigation__submenu-container{display:none !important} header .rfm-primary-nav .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container{display:block !important} /* LEVEL 2 (the 6 categories) sit as a centered block under "Work". A subtle top divider sets the group apart from the Work label. */ header .is-menu-open .ll-mega > .wp-block-navigation__submenu-container{ width:100% !important; margin-top:4px !important; padding-top:4px !important; } /* each category row: centered label + its own caret on one line */ header .is-menu-open .ll-mega-cat{ display:flex !important;flex-wrap:wrap !important; justify-content:center !important;align-items:center !important; width:100% !important; } /* category label slightly smaller than top items so the hierarchy reads */ header .is-menu-open .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat > .wp-block-navigation-item__content{ font-size:.94em !important; color:var(--ll-cream) !important; opacity:.95; } /* LEVEL 3 (services) indent slightly + a touch smaller + dimmer so the three levels visibly step inward. Centered to match the overlay. */ header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container{ width:100% !important; padding-left:0 !important; } header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container a{ text-align:center !important;justify-content:center !important; font-size:.86em !important; color:var(--ll-tan) !important; opacity:.92; } /* the level-3 service rows get a slightly tighter vertical rhythm */ header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container > .wp-block-navigation-item{ padding:2px 0 !important; } } /* ───────────────────────────────────────────────────────────────────── CHANGE 2 - GLOBAL HERO SCRIM (text legibility, WCAG ~4.5:1). White hero text was failing contrast on light photo frames. Deepen the dark scrim at the theme level so every hero has a reliable dark backing. ───────────────────────────────────────────────────────────────────── */ /* HOMEPAGE hero overlay (.llp-hero-scrim is an inline-gradient div over the hero photo). Deepen it: a centered radial that is dark behind the headline + paragraph and feathers out so the photo still reads at the edges. */ .entry-content .llp-hero .llp-hero-scrim{ background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(14,17,19,.78) 0%, rgba(14,17,19,.55) 45%, rgba(14,17,19,.30) 100%) !important; } /* CATEGORY / SERVICE hero overlay (.llp-chero::after sits over .llp-chero .bg, which already carries filter:brightness). Deepen the ::after so the centered headline + sub clear contrast on light frames too. Same feather so it stays tasteful, not a black box. */ .entry-content [class*="llp-"] .llp-chero::after{ background:radial-gradient(ellipse 120% 95% at 50% 48%, rgba(14,17,19,.74) 0%, rgba(14,17,19,.52) 46%, rgba(14,17,19,.30) 100%) !important; } /* v1.2.11: MOBILE OVERLAY POLISH. (1) kill the cream/khaki boxes the WP core overlay paints behind expanded submenu items so they read flat on the dark overlay like the top items; (2) light close X (was dark, invisible on dark); (3) center reinforcement; (4) bottom clearance for the persistent Call/Book bar. */ @media(max-width:980px){ header .is-menu-open .wp-block-navigation__submenu-container, header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item, header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .is-menu-open .wp-block-navigation__submenu-container a, header .is-menu-open .wp-block-navigation-item__content, header .is-menu-open .wp-block-navigation-submenu>.wp-block-navigation-item__content{ background:transparent !important;background-color:transparent !important; border:0 !important;box-shadow:none !important;border-radius:0 !important; } header .is-menu-open .wp-block-navigation__container{padding-left:0 !important;padding-right:0 !important} header .wp-block-navigation__responsive-container-close{color:#D4B083 !important;opacity:1 !important} header .wp-block-navigation__responsive-container-close svg{fill:#D4B083 !important;stroke:#D4B083 !important} header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding-bottom:40px !important} } /* ───────────────────────────────────────────────────────────────────── v1.2.12: (A) BULLETPROOF center for the whole Work (.ll-mega) subtree on mobile, and (B) the stacked in-menu CTA (Call khaki + Book burnt-orange) that replaces the cramped two-up bottom bar while the overlay is open. ───────────────────────────────────────────────────────────────────── */ @media(max-width:980px){ /* (A) kill every left indent WP core / the parent add to nested overlay submenus, and center every label + service link as a full-width block. The off-center "pushing left" was WP core's nested padding-inline leaking onto .ll-mega's level-2 and level-3 submenu containers. */ header .is-menu-open .ll-mega .wp-block-navigation__submenu-container{ width:100% !important;max-width:100% !important; padding-left:0 !important;padding-right:0 !important; margin-left:0 !important;margin-right:0 !important; text-align:center !important; } header .is-menu-open .ll-mega .wp-block-navigation-item, header .is-menu-open .ll-mega .ll-mega-cat{ width:100% !important;max-width:100% !important; margin-left:0 !important;margin-right:0 !important; padding-left:0 !important;padding-right:0 !important; text-align:center !important; } header .is-menu-open .ll-mega .wp-block-navigation-item__content, header .is-menu-open .ll-mega a{ text-align:center !important;justify-content:center !important; padding-left:0 !important;padding-right:0 !important; margin-left:auto !important;margin-right:auto !important; } /* category row keeps its label + caret centered together on one line */ header .is-menu-open .ll-mega-cat{ display:flex !important;flex-wrap:wrap !important; justify-content:center !important;align-items:center !important; } header .is-menu-open .ll-mega-cat > .wp-block-navigation-item__content{ width:auto !important;margin:0 !important;padding-right:6px !important; } } /* (B) Stacked in-menu CTA. Lives inside the overlay content (after Contact), hidden everywhere except an OPEN mobile overlay. Two big full-width buttons: Call = khaki (tan) with dark ink text, Book = burnt-orange brand. Both blend warm against the cool-gray menu and give large, separate tap targets. */ .ll-menu-cta{display:none} @media(max-width:980px){ .wp-block-navigation__responsive-container.is-menu-open .ll-menu-cta{ display:flex;flex-direction:column;gap:12px; width:100%;max-width:340px;margin:24px auto 6px;padding:0 8px; box-sizing:border-box; } .ll-menu-cta-btn{ display:flex;align-items:center;justify-content:center;gap:9px; width:100%;min-height:56px;padding:15px 18px;box-sizing:border-box; font-family:'Barlow Condensed',sans-serif;font-weight:800; font-size:18px;letter-spacing:.3px;text-transform:uppercase; text-decoration:none;border-radius:14px;line-height:1.1;text-align:center; } .ll-menu-cta-call{background:var(--ll-tan);color:var(--ll-ink);border:1px solid var(--ll-tan)} .ll-menu-cta-call svg{width:19px;height:19px;display:block;fill:var(--ll-ink)} .ll-menu-cta-book{background:var(--ll-brand);color:#fff;border:1px solid var(--ll-brand)} .ll-menu-cta-btn:active{filter:brightness(.96)} .ll-menu-cta-btn:focus-visible{outline:3px solid #FAF8F4;outline-offset:2px} } /* ═════════════════════════════════════════════════════════════════════ v1.2.14: MOBILE OVERLAY — type hierarchy + regular tap rhythm + ONE shared center axis + inline-right chevron. Per Una's evidence-based spec: Apple HIG 44 / Material 48 / WCAG 2.5.8 tap rows; NN/g short-label all-caps eyebrow for Tier 2; hierarchy via type (size+case+color+weight), NOT indent, so all three tiers sit on one centered axis; chevron absolute right-anchored so it never shifts the label off-axis (root cause of the old drift + the phantom second line that made the menu feel airy). Ladder: Tier1 26/600 cream Title | Tier2 15/600 tan UPPER .14em | Tier3 19/400 gold Title | chevron abs right, tier color. ═════════════════════════════════════════════════════════════════════ */ @media(max-width:980px){ /* rows are positioning context for the absolute chevron; equal side padding on every tier is THE fix that collapses the 3 axes into 1. */ header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item, header .is-menu-open .ll-mega-cat, header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container > .wp-block-navigation-item{ position:relative !important; width:100% !important;max-width:100% !important;margin:0 !important; } header .is-menu-open .ll-mega-cat{display:block !important} /* TIER 1 - About / Work / Reviews / Contact (also the Work label span) */ header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content, header .is-menu-open .wp-block-navigation__container > .ll-mega > .wp-block-navigation-item__content{ display:flex !important;align-items:center !important;justify-content:center !important; width:100% !important;min-height:56px !important;padding:0 16px !important;margin:0 auto !important; box-sizing:border-box !important;text-align:center !important;line-height:1 !important; font-family:'Barlow Condensed',sans-serif !important; font-size:26px !important;font-weight:600 !important;letter-spacing:.01em !important; text-transform:none !important;color:#FAF8F4 !important; } /* TIER 2 - categories: UPPERCASE tan eyebrow */ header .is-menu-open .ll-mega-cat > .wp-block-navigation-item__content{ display:flex !important;align-items:center !important;justify-content:center !important; width:100% !important;min-height:56px !important;padding:0 16px !important;margin:16px auto 0 !important; box-sizing:border-box !important;text-align:center !important;line-height:1.05 !important; font-family:'Barlow Condensed',sans-serif !important; font-size:15px !important;font-weight:600 !important;letter-spacing:.14em !important; text-transform:uppercase !important;color:#D4B083 !important; border-bottom:1px solid rgba(212,176,131,.18) !important; /* faint seam under each category */ } /* TIER 3 - services: Title-case gold, slightly tighter 52px beat */ header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container a{ display:flex !important;align-items:center !important;justify-content:center !important; width:100% !important;min-height:52px !important;padding:0 16px !important;margin:0 auto !important; box-sizing:border-box !important;text-align:center !important;line-height:1 !important; font-family:'Barlow Condensed',sans-serif !important; font-size:19px !important;font-weight:400 !important;letter-spacing:.01em !important; text-transform:none !important;color:#A56A3C !important; } header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active, header .is-menu-open .ll-mega-cat > .wp-block-navigation__submenu-container a:active{ color:#BE7E48 !important;background:rgba(165,106,60,.08) !important; } /* CHEVRON - absolute, right-anchored, vertically centered in its 56px row, so the LABEL stays dead-centered on the shared axis. */ header .is-menu-open .wp-block-navigation-submenu__toggle{ position:absolute !important;right:10px !important;top:0 !important; height:56px !important;width:40px !important;min-width:40px !important; margin:0 !important;padding:0 !important; display:flex !important;align-items:center !important;justify-content:center !important; background:none !important;border:0 !important;z-index:2 !important; transition:transform .22s cubic-bezier(.32,.72,0,1) !important; } header .is-menu-open .ll-mega > .wp-block-navigation-submenu__toggle{color:#FAF8F4 !important} /* Tier1 Work caret: cream */ header .is-menu-open .ll-mega-cat > .wp-block-navigation-submenu__toggle{color:#D4B083 !important} /* Tier2 category caret: tan */ header .is-menu-open .wp-block-navigation-submenu__toggle::after{ content:"" !important;display:block !important; width:10px !important;height:10px !important;margin-top:-4px !important; border-right:2.4px solid currentColor !important;border-bottom:2.4px solid currentColor !important; border-top:0 !important;border-left:0 !important; transform:rotate(45deg) !important;opacity:.75 !important; } header .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]{transform:rotate(180deg) !important} /* reduce-motion: no caret spin transition */ @media(prefers-reduced-motion:reduce){ header .is-menu-open .wp-block-navigation-submenu__toggle{transition:none !important} } } /* ═════════════════════════════════════════════════════════════════════ v1.2.15: DESKTOP nav polish. (1) Bigger nav text (top level 16 -> 18px, mega panel 15 -> 16px). (2) HOVER BRIDGE so the Work mega-panel no longer closes when the cursor crosses the 14px gap between the label and the panel ("no pixels connecting"). Two transparent strips fill the gap and count as part of .ll-mega, so :hover never breaks. CSS-only, no JS timer. ═════════════════════════════════════════════════════════════════════ */ @media(min-width:981px){ /* (1a) bigger top-level nav labels */ header .rfm-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, header .rfm-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content{ font-size:18px !important; } /* (1b) bigger mega category headings + service links */ header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container > .ll-mega-cat > .wp-block-navigation-item__content{ font-size:16px !important; } header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, header .rfm-primary-nav .ll-mega .ll-mega-cat > .wp-block-navigation__submenu-container a{ font-size:16px !important; } /* (2) HOVER BRIDGE ------------------------------------------------------- The panel opens on :hover of .ll-mega and floats 14px below the label (margin-top:14px). Those 14px are dead pixels: crossing them dropped :hover and snapped the panel shut. Both pseudo-elements below belong to .ll-mega (or its panel), are transparent, and occupy the gap, so the hover region is continuous from label to panel. Strip A: always present, sits directly under the Work label (catches the cursor the instant it leaves the label). */ header .rfm-primary-nav .ll-mega::after{ content:"" !important; position:absolute !important; left:50% !important; transform:translateX(-50%) !important; top:100% !important; width:140px !important; height:18px !important; background:transparent !important; pointer-events:auto !important; z-index:1 !important; } /* Strip B: exists while the panel is shown, spans the FULL panel width in the gap (carries the hover the rest of the way to any column). */ header .rfm-primary-nav .ll-mega > .wp-block-navigation__submenu-container::before{ content:"" !important; position:absolute !important; left:0 !important;right:0 !important; top:-18px !important; height:20px !important; background:transparent !important; pointer-events:auto !important; } } /* ═════════════════════════════════════════════════════════════════════ v1.2.16: MOBILE caret clearance. The right-anchored chevron was running under long category labels ("Portraits & Personal Brand", "Family & New Beginnings"). Reserve symmetric side clearance so the label centers in a safe zone and never reaches the caret; nudge the category type a touch smaller/tighter so the longest still fits one line on a phone. ═════════════════════════════════════════════════════════════════════ */ @media(max-width:980px){ header .is-menu-open .ll-mega-cat > .wp-block-navigation-item__content{ font-size:14px !important; letter-spacing:.1em !important; padding-left:52px !important;padding-right:52px !important; white-space:normal !important;line-height:1.15 !important; } header .is-menu-open .ll-mega > .wp-block-navigation-item__content{ padding-left:52px !important;padding-right:52px !important; } header .is-menu-open .wp-block-navigation-submenu__toggle{ right:14px !important;width:34px !important; } }