/* Theme Name: SmartPharmaRX Custom Theme Theme URI: https://smartpharmarx.com Author: SmartPharmaRX Author URI: https://smartpharmarx.com Description: A custom Gutenberg block theme for SmartPharmaRX, built from the SPRX Web Refresh Figma design. Colors, fonts, button styles, heading sizes, and spacing are all editable from the Site Editor. Version: 1.0.0 Requires at least: 6.6 Requires PHP: 7.4 Tested up to: 6.7 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: sprx-custom */ :where(.wp-site-blocks) > * { margin-block-start: 0px; } /* Base resets not covered by theme.json */ *, *::before, *::after { box-sizing: border-box; } img, svg, video { max-width: 100%; height: auto; display: block; } a { transition: color 0.15s ease-in-out; } /* Quality Care You Can Count On - match Figma node 225:622 (desktop) / 216:669 (mobile) */ .quality-care-text-col .is-style-eyebrow { color: #CC4100; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 2.08px; line-height: 20px; } .is-style-card { position: relative; width: 100%; max-width: 282px; min-height: 216px; background-color: #FFFFFF; border: 3px solid #DBECF9; border-radius: 8px; padding: 24px 19px 20px 0; box-sizing: border-box; overflow: visible; } /* Figma draws the Licensing page's process cards at 200px tall, against the homepage's 216px - same card, shorter copy block. */ .quality-care-section--compact .is-style-card { min-height: 200px; } .is-style-card .pill-label { position: static; /* Figma sizes all four pills identically - 250x47 on desktop, 276x47 on mobile - instead of letting each one hug its own label. Without the fixed width the longest label ("Reliable Fulfillment & Service") wraps to a second line, growing that one pill to 54px and knocking its card's body copy out of alignment with the other three. */ width: 250px; max-width: 100%; height: 47px; margin: 0 0 19px 0; display: inline-flex; align-items: center; padding: 0 24px; white-space: nowrap; box-sizing: border-box; background-image: linear-gradient(158.1325587637785deg, rgb(219, 236, 249) 5.303%, rgb(162, 205, 255) 94.177%); border-top-right-radius: 99px; border-bottom-right-radius: 99px; color: #2E4DA1; font-size: 15px; font-weight: 700; line-height: 1; overflow: hidden; } @media screen and (max-width: 782px) { .is-style-card .pill-label { width: 276px; } } .is-style-card p.has-small-font-size { position: static; width: auto; margin: 0 0 0 24px; /* WP's own generated ".has-small-font-size" rule ships with !important (core does this for every font-size preset class), which otherwise beats this rule regardless of specificity. */ font-size: 14px !important; font-weight: 400; color: #000000; line-height: 1.4; } /* Cards grid: 2x2 on desktop via the block's own "grid" layout support (columnCount:2 in the pattern's attrs). On mobile this becomes a swipeable one-at-a-time carousel instead - Figma's mobile frame shows a dedicated "Scroll" frame + 4-dot pagination, not a stacked grid. Behavior lives in assets/js/quality-care-slider.js. */ @media (max-width: 782px) { .quality-care-text-col h2 { font-size: 34px !important; } /* Figma's mobile text stack (eyebrow/heading/body/button) uses a 16px gap - tighter than desktop's 24px. */ .quality-care-text-stack { gap: 16px !important; } /* Figma stacks the text column above the cards with a 32px gap on mobile, vs the 70px side-by-side column gap on desktop. */ .quality-care-row { gap: 32px !important; } .quality-care-cards { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 0 !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .quality-care-cards::-webkit-scrollbar { display: none !important; height: 0 !important; } .quality-care-cards .is-style-card { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; } .quality-care-dots { justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 24px !important; } .quality-care-dots .dot { width: 9px !important; height: 9px !important; padding: 0 !important; border-radius: 999px !important; border: 1.5px solid var(--wp--preset--color--orange) !important; background: transparent !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } .quality-care-dots .dot.is-active { background: var(--wp--preset--color--orange) !important; } } /* Homepage: caps long paragraphs to a readable measure when centered */ .measure { max-width: 640px; margin-left: auto; margin-right: auto; } /* Shared by the mobile-carousel dot indicators (how-we-work, quality-care) - hidden on desktop (those sections show every item at once there, so a "which slide is active" indicator doesn't apply) and revealed only under the mobile breakpoint, where each section becomes a one-at-a-time swipe carousel. Not used by facility-dots - that carousel is a real slider on both breakpoints, so its dots stay visible unconditionally. !important on both rules: the group block's own generated layout styles (e.g. "body .is-layout-flex { display:flex }") outrank a plain class selector on specificity alone, regardless of source order, and would otherwise force these visible on desktop no matter what "display" says here. */ .mobile-dots-only { display: none !important; } @media (max-width: 782px) { .mobile-dots-only { display: flex !important; } } /* All three dot rows are plain "is-layout-flow" groups now, which makes WP apply its own default block-gap spacing - margin-block-start on every child except the first, driven by a --wp--style--block-gap custom property inherited from whichever ancestor last set one (here, the theme's root blockGap, 24px). facility-dots happens to sit inside .facilities-row, which explicitly zeroes blockGap, so it dodges this by accident; the other two don't, so dots 2+ were pushed down and out of line with the first. Spacing between dots is already handled by the explicit "gap" below, so this default flow-margin is never wanted here regardless of what any ancestor happens to set. */ /* Figma's Providers 3-up (376:2900) is inset to 920px inside the 1200px section - three 280px items with 40px gaps - rather than spreading across the full width like the homepage/licensing 4-ups. Labels sit on a 240px measure, which is what breaks "Allergy or / Sensitivity / Considerations" onto three lines. */ .how-we-work-section--three-up { padding-bottom: 56px !important; } .how-we-work-section--three-up .wp-block-columns { max-width: 920px; margin-inline: auto; } .how-we-work-section--three-up .wp-block-column > h4 { max-width: 240px; margin-inline: auto; } .how-we-work-slider-dots > *, .quality-care-dots > *, .facility-dots > * { margin-block-start: 0 !important; } /* How We Work Smarter - match Figma node 225:666. Ring effect around each icon circle is a box-shadow (not a second nested element) - a solid colored spread outside the circle's own edge. Two shadow layers instead of one: per Figma, this isn't a solid ring flush against the circle - it's a separate outer ring circle (white fill, 3px stroke) sitting 11px away from the inner circle. The first shadow (white, 11px spread) fills that gap so it reads as empty space rather than solid color, and the second (3px further out, in the ring's stroke color) draws just the border itself. */ .icon-circle { width: 130px; height: 130px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 !important; box-shadow: 0 0 0 11px #ffffff, 0 0 0 14px #DBECF9; } .icon-circle img { width: 93px; height: auto; } .how-we-work-section h2 em { display: block; font-size: 31px; } .how-we-work-section .wp-block-columns { position: relative; margin-top: 40px !important; } .how-we-work-section .wp-block-columns::before { content: ""; position: absolute; top: 65px; left: 12.5%; right: 12.5%; height: 2px; background-color: #DBECF9; z-index: 0; } .how-we-work-section .wp-block-column { position: relative; z-index: 1; } .how-we-work-section h4.wp-block-heading { font-size: 20px !important; line-height: 1 !important; /* Figma's 10px gap is measured from the icon ring's true visual edge, but .icon-circle's box-shadow ring spreads 14px outside its own box without affecting layout - a plain 10px margin here would leave the ring visually overlapping the heading. 10 + 14 = 24px restores the intended 10px of actual clear space above the text. */ margin-top: 24px !important; margin-bottom: 0 !important; } .how-we-work-section .wp-block-column > p.has-small-font-size { font-size: 16px !important; line-height: 1.4 !important; margin-top: 10px !important; } /* How We Work Smarter: mobile swipe-carousel + dot pagination. Markup/behavior lives in assets/js/how-we-work-slider.js (enqueued from functions.php); this is just the styling half. */ @media (max-width: 781px) { .how-we-work-section h2 { line-height: 31px !important; } .how-we-work-section .wp-block-columns { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 0 !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .how-we-work-section .wp-block-columns::-webkit-scrollbar { display: none !important; height: 0 !important; } /* The desktop connecting line runs across the full row - doesn't make sense once mobile shows one step at a time in the carousel. */ .how-we-work-section .wp-block-columns::before { display: none !important; } .how-we-work-section .wp-block-columns > .wp-block-column { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; margin-bottom: 0 !important; /* .icon-circle's box-shadow draws an 11px ring outside its own box. overflow-x:auto above forces overflow-y to auto too (an axis can't stay "visible" once the other axis isn't), which starts clipping anything flush against the container's edge - the icon-circle sat at the very top of the column with zero space above it, so the ring's top edge was exactly what got clipped. This padding gives it room. */ padding-top: 16px !important; } .how-we-work-slider-dots { justify-content: center !important; align-items: center !important; gap: 10px !important; margin-top: 24px !important; } .how-we-work-slider-dots .dot { width: 9px !important; height: 9px !important; padding: 0 !important; border-radius: 999px !important; border: 1.5px solid var(--wp--preset--color--orange) !important; background: transparent !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } .how-we-work-slider-dots .dot.active { background: var(--wp--preset--color--orange) !important; } } /* See Our Facilities - match Figma node 625:4224 (desktop) / 152:4447 (mobile) */ .facilities-section { position: relative; } .facilities-bg { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 375px; width: 100%; z-index: 0; pointer-events: none; border-radius: 8px; } .facilities-row { position: relative; z-index: 1; flex-wrap: nowrap; padding: 0 102px; gap: 103px; /* Vertical centering is NOT set here as align-items - core WP ships ".wp-block-columns { align-items: normal !important; }", which always wins over a plain align-items rule on this same element regardless of specificity. The working, !important-free fix is verticalAlignment on the wp:columns/wp:column blocks themselves (see facilities.php), which renders "align-self: center" on each column - a different property on the child, entirely unaffected by the parent's !important. */ } /* Cancel the automatic block-gap top margin WordPress adds between this row and the .facilities-bg block before it. Without this, the row sits slightly below the section's true vertical center (since only its top gets pushed down, not its bottom), while .facilities-bg centers itself on the section - so the peach band ends up a few pixels off from the photo/text row it's supposed to sit behind. The competing core rule is ":root :where(.is-layout-constrained) > *" - the :where() wrapper makes it contribute zero specificity, so its effective specificity is just one pseudo-class. A two-class selector reliably outranks that without needing !important. */ .facilities-section .facilities-row { margin-top: 0; } .facilities-image-col { position: relative; flex: 0 0 408px; max-width: 408px; } .facilities-text-col { flex: 1 1 auto; max-width: 485px; } .facility-photo-frame { position: relative; box-sizing: border-box; width: 100%; height: 496px; padding: 12px; border: 3px solid var(--wp--preset--color--peach-border); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0; overflow: hidden; } /* Facility photo slider: a real multi-slide track. Behavior lives in assets/js/facilities-slider.js. overflow-x:auto + scroll-snap gives touch swipe for free; the next-button/dots below call scrollTo() against the same scroll position so both input styles drive one mechanism instead of two. */ .facility-slides { width: 100%; height: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .facility-slides::-webkit-scrollbar { display: none; height: 0; } .facility-slide { position: relative; flex: 0 0 100%; max-width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; } .facility-slide .wp-block-image { width: 100%; height: 100%; margin: 0; } .facility-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; } .facility-slider-chrome { position: absolute; inset: 0; pointer-events: none; } .facility-tag-pill { position: absolute; /* Figma's 44px/44px offset is measured from the photo frame's true outer edge (border included - the frame's 3px stroke is INSIDE its own bounds). This pill's actual positioning context is .facility-slide, which already sits inset 15px (12px padding + 3px border) inside that edge, so 44 - 15 = 29px here lands it at the correct 44px overall. */ top: 29px; left: 29px; /* The sitewide default block-gap margin (24px top margin on any non-first child in a constrained-layout container) still applies to absolutely-positioned elements - margin isn't suppressed by position:absolute, it just shifts the offset box. Without zeroing it here, the pill renders 24px lower than its top value says. */ margin: 0; background: #fff; color: #2E4DA1; font-weight: 700; font-size: 12px; padding: 8px 16px; border-radius: 4px; pointer-events: auto; line-height: 1; } .facility-dots { position: absolute; bottom: 44px; left: 44px; display: flex; align-items: center; gap: 8px; pointer-events: auto; } /* Figma specifies 12px dots (not 8px) */ .facility-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); border: 1px solid #fff; display: block; padding: 0; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; } .facility-dot.is-active { background: #CC4100; border-color: #CC4100; } .facility-next-btn { position: absolute; /* Figma's 28px/28px offset is from the photo frame's true outer edge. This button's positioning context is .facility-slider-chrome, which fills the frame's padding-box (inset 3px by the frame's own border), so 28 - 3 = 25px here lands it at the correct 28px overall. */ bottom: 25px; right: 25px; width: 36px; height: 36px; border-radius: 8px; background: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); pointer-events: auto; padding: 0; } .facilities-text-col .is-style-eyebrow { color: #CC4100; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 2.08px; line-height: 20px; } @media (max-width: 782px) { .facilities-section { padding-left: 20px !important; padding-right: 20px !important; } .facilities-row { flex-wrap: wrap; padding: 0; gap: 24px; } .facilities-image-col, .facilities-text-col { flex: 1 1 100%; max-width: 100%; } /* Figma's mobile photo runs edge-to-edge (flush with the phone's screen edges), unlike the text column which stays inset - so the image column alone cancels the section's 20px side padding here instead of the whole row being full-bleed. */ .facilities-image-col { margin-left: -20px; margin-right: -20px; } .facility-photo-frame { /* Figma's mobile "Image" auto-layout slot is declared at a fixed 212px, but the actual photo inside it is a fixed 354x396px group with flex-shrink:0 - taller than its own slot, so it renders past that boundary rather than getting clipped to it. Sizing by the photo's real aspect ratio instead lets it render at its natural, much taller height. */ height: auto; aspect-ratio: 354 / 396; /* Per Figma (node 152-4447/4449): mobile rounds only the top two corners, unlike desktop's uniform 12px on all four. */ border-radius: 12px 12px 0 0; } /* Per Figma (node 152-4447): the peach panel doesn't sit behind the whole card - it only starts around the photo's own vertical midpoint (photo overlaps up out of the top of it) and then runs behind the text below, however long that text is. Anchoring to the section's bottom edge (instead of a height percentage of the whole section) means this stays correct no matter how much the caption/paragraph text changes later - only the top offset needs to track the photo, which is sized purely from its own aspect-ratio (354/396) against the now-edge-to-edge column width (100vw, since .facilities-image-col cancels the section's 20px side padding above): half that height is 0.5 * 1.119 * 100vw = 55.95vw, plus the section's 48px top padding. height:auto needs !important - .facilities-bg is a wp:spacer block (switched from an empty wp:group to dodge the editor's "choose a layout" placeholder), and spacer always emits its height as an inline style, which otherwise beats this rule regardless of the media query or source order. */ .facilities-bg { top: calc(48px + 55.95vw); bottom: 0; height: auto !important; transform: none; } /* Figma shows the exact same 36x36 button chrome on mobile as desktop (not a larger 48x48 box) - only its position shifts to track the taller, aspect-ratio-driven photo. */ .facility-next-btn { bottom: 35px; right: 37px; } /* Figma keeps the dots overlaid on the photo near its bottom-left corner on mobile too (same treatment as desktop), not converted into a static in-flow row below the whole card. */ .facility-dots { bottom: 50px; left: 47px; } .facilities-section h2 { font-size: 34px !important; } /* Figma's mobile Content stack (eyebrow/heading/body/button) uses an 8px gap - tighter than desktop's 24px. The gap comes from the block's own blockGap style attribute (24px, matching desktop), so it needs a CSS override here rather than a separate mobile-only attribute value. */ .facilities-text-col .wp-block-group { gap: 8px !important; } } /* Same WP core block-editor CSS (.block-editor-block-list__layout .block-editor-block-list__block { position: relative }) that demotes .subpage-hero-bg from absolute to relative inside the editor (see that pattern's own comment for the full explanation) demotes every other absolutely-positioned decorative element here too, since each is itself a block wrapper the editor applies that rule to. Without this, the photo frame's tag pill, dots, next-button chrome, and the peach background all collapse into normal document flow inside the editor, stacking on top of each other instead of overlaying the photo. */ .editor-styles-wrapper .facilities-bg, .editor-styles-wrapper .facility-slider-chrome, .editor-styles-wrapper .facility-tag-pill, .editor-styles-wrapper .facility-dots, .editor-styles-wrapper .facility-next-btn { position: absolute !important; } /* Header: floats transparently over the hero photo per Figma (nav sits on top of the hero image instead of pushing it down) - but ONLY on the homepage. header.html is a single shared template part used on every page, so without scoping this to body.home, every other page (with no hero behind it) would get the same absolute positioning: unwanted blank space above the header and the header sitting outside the document flow entirely instead of at the true top of the page. */ body.home .site-header-float { position: absolute; top: 42px; left: 0; right: 0; z-index: 50; background: transparent !important; } body.home .site-header-float .wp-block-group { padding-top: 0; padding-bottom: 0; } /* With the header floated out of normal flow above, WordPress's default block-gap margin between top-level site-block children (header, main, footer) has nothing left to space it from and just pushes main/hero down by that amount for no reason - only relevant on the homepage, where the header is floating; every other page still needs that gap since its header renders in normal flow. */ body.home .wp-site-blocks > main { margin-block-start: 0; } /* When logged in, WordPress pushes the whole page down by the admin bar's height (32px on desktop, 46px on screens <= 782px) via a margin-top on the html element, so nothing ends up hidden underneath it. A position:absolute element with no positioned ancestor is placed relative to the initial containing block and doesn't automatically shift with that margin, so the floating homepage header needs its own top offset increased by the same amount to stay correctly placed below the admin bar instead of drifting behind/under it. */ body.admin-bar.home .site-header-float { top: calc(42px + 32px); } @media screen and (max-width: 782px) { body.admin-bar.home .site-header-float { top: calc(42px + 46px); } } /* Hero: values measured directly from the Figma mobile frame (node 216:583) via the Figma API - frame is 402x672, headline starts 186px from the top, buttons end 124px from the bottom. The desktop-measured 262px/218px/803px values were far too large relative to a narrow mobile viewport - they'd eat most of the screen as empty space above/below the text instead of leaving room to see the photo. Also re-centers the background crop further left so the vial bottles (which sit near the left edge of the source photo) stay visible instead of being cropped out by a dead-center 50% 50% cover crop on a much narrower box. */ @media screen and (max-width: 782px) { .site-hero { min-height: 672px !important; padding-top: 186px !important; padding-bottom: 124px !important; background-position: 20% 50% !important; } /* H1: Figma's mobile type spec is smaller and tighter than the fluid clamp() we generate from the desktop scale (which resolves to ~55.6px at this width, vs the 51px Figma actually calls for) - overriding explicitly rather than retuning the shared clamp curve, since that curve is also used by every other heading on the site. */ .site-hero h1 { font-size: 51px !important; line-height: 1 !important; letter-spacing: -0.51px !important; } /* Subhead: Figma specifies italic at 32px/40px line-height, weight 600 - none of which the shared "x-large" preset (which also resolves too small at this width, ~26px vs the needed 32px) was providing. */ .site-hero p { font-size: 32px !important; line-height: 40px !important; font-style: italic !important; } /* Buttons: side-by-side on desktop per Figma, but stacked on mobile - scoped to this specific instance via .site-hero-buttons rather than all core/buttons blocks site-wide, since other sections may want to stay horizontal on mobile. Figma's mobile buttons frame uses a 24px gap between the stacked buttons. */ .site-hero-buttons { flex-direction: column !important; gap: 24px !important; } } /* Figma draws the hero button pairs at a matched 160px wide (For Providers / For Patients), not hugging each label. */ .site-hero-buttons .wp-block-button__link, .subpage-hero-buttons .wp-block-button__link { min-width: 160px; } /* Core ships is-style-outline with its own em-based padding (0.667em/1.333em) plus a 2px border, which overrides the button preset and renders these at 37px instead of Figma's 50px. Padding is 2px lighter than the solid buttons' 18/24 so the border makes up the difference and both variants come out at the same 50px box. */ .wp-block-button.is-style-outline > .wp-block-button__link { padding: 16px 22px; border-width: 2px; } /* Mobile nav: core's navigation block defaults to a fixed/100vw-100vh overlay with the nav's own (white) text color carried over, which on this site's white dropdown background renders as invisible white-on- white text. header.wp-block-group is the nearest ancestor of the responsive container, so making it the positioning context (position: relative is a no-op visually) lets the dropdown be anchored with top:100% instead of the default fixed full-viewport box. */ @media screen and (max-width: 782px) { /* The off-canvas mobile nav sits at translateX(-100%) while closed (see .wp-block-navigation__responsive-container below) so it can slide in from the left - meaning its box occupies real layout space one full viewport-width to the left of the visible area (x:-100% to x:0) even though nothing is visibly there. With nothing clipping that, the page's scrollable width doubles to fit it, which is why the container could measure 1000px+ wide and the page could scroll horizontally. overflow-x:hidden here clips that phantom space without affecting normal vertical scrolling. Needs to be on both html and body - body's overflow alone gets propagated to the viewport by the browser rather than actually clipping at the body box, in a document like this one where html itself doesn't already set its own overflow. */ html, body { overflow-x: hidden; } /* body.home .site-header-float sets position:absolute + top:42px so the header floats over the hero image. That rule already makes the header a valid containing block on its own, so it's left untouched here. Non-home pages render the header in normal static flow with no containing block for the dropdown below, so :not(.home) gets its own position:relative - explicitly with top:0, since a bare position:relative here would otherwise still inherit top:42px from the (non-matching, but same-specificity-tier) site-header-float rule above and shift the header down while ALSO reserving its original flow space, doubling up into a 72px blank gap above the header. */ body:not(.home) header.wp-block-group.alignfull { position: relative; top: 0; } /* Core gives nav.wp-block-navigation its own position:relative, and in its collapsed mobile state (just the hamburger button visible) its box is only ~24px wide - that becomes the containing block for the absolutely-positioned dropdown below, shrinking it to match instead of the intended full header width. Neutralizing it here bubbles the containing-block lookup up to header.wp-block-group.alignfull instead. */ .wp-block-navigation { position: static !important; } .wp-block-navigation__responsive-container { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100% !important; align-self: stretch !important; flex-basis: 100% !important; height: 100vh !important; max-height: none; overflow-y: auto; justify-content: flex-start !important; /* Slide in from the left instead of just appearing. Core sets display:none while closed (not just the .is-menu-open class), and display can't be transitioned/animated - display:none to display:flex is an instant snap with no in-between frame. Forcing display:flex unconditionally here means the only thing that changes on open/close is transform, which DOES animate. Off-screen via translateX(-100%) (instead of display:none) keeps it out of sight and out of the way while closed; pointer-events:none stops it from intercepting clicks/taps meant for the page behind it. */ display: flex !important; transform: translateX(-100%); transition: transform 0.5s ease; pointer-events: none; /* Core ties background-color and padding directly to the .is-menu-open class with !important and no transition of their own - background-color:inherit (transparent here) and a clamp()-based padding both apply ONLY while .is-menu-open is present. The instant that class is removed to start closing, both snap away immediately while only transform animates smoothly over 0.5s - for that whole 0.5s the (still visible) text slides across the hero photo with no white panel or padding behind it. Setting both unconditionally here (same on open and closed) means nothing but position moves during the transition. */ background-color: #fff !important; padding: 16px !important; } /* Matches core's own closed-state selector exactly so this rule ties at specificity with core's !important background-color:inherit and wins on source order (this stylesheet loads after core's). */ .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) { background-color: #fff !important; } .wp-block-navigation__responsive-container.is-menu-open { pointer-events: auto; transform: translateX(0); /* Core plays its own translateY fade-in-from-bottom animation on .is-menu-open (@keyframes overlay-menu__fade-in-animation), with animation-fill-mode:forwards - meaning even after it finishes, its last keyframe (translateY(0)) keeps overriding our translateX slide-in, since an animation's (even a finished, fill-forwards one's) hold on a property outranks a plain transition on the same property. Disabling it is what lets our own transform drive the opening motion instead of core's. */ animation: none !important; } .wp-block-navigation__responsive-dialog { margin-top: 0; } .wp-block-navigation__responsive-container-content { align-items: flex-start !important; /* Core's own .is-menu-open:not(.disable-default-overlay) .content selector sets padding-top: calc(2rem + 24px) - a longer, more specific selector chain that beats a plain class rule regardless of source order, so !important is needed here to actually win. */ padding-top: 0px !important; } .wp-block-navigation__responsive-container .wp-block-navigation__container { align-items: flex-start !important; } .wp-block-navigation__responsive-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container .wp-block-navigation-item__label { color: var(--wp--preset--color--charcoal) !important; } /* Close button ("X") inherits the nav's overlayTextColor:white - needs its own charcoal to be visible against the dropdown's white background. */ .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-close svg { color: var(--wp--preset--color--charcoal) !important; fill: var(--wp--preset--color--charcoal) !important; } /* The desktop pill nav bar (navy gradient + generous padding, meant to wrap visible text links) is the direct parent of the nav block. On mobile only the collapsed hamburger button shows inside it, so that same pill styling renders as a stray blue rounded rectangle behind the icon instead of a nav bar. Stripped down to a plain transparent wrapper here so just the icon shows on the hero photo, per Figma. */ .site-header-float .has-subpage-hero-gradient-gradient-background { background: none !important; padding: 0 !important; border-radius: 0 !important; } /* Core's hamburger icon ships as 2 bars, not the standard 3-line hamburger. Hiding the built-in SVG and drawing 3 bars with a single pseudo-element instead: the element itself is the middle bar, and its box-shadow duplicates it 7px above and below for the other two - avoids needing a second pseudo-element or touching the block markup. */ .wp-block-navigation__responsive-container-open svg { display: none; } .wp-block-navigation__responsive-container-open { position: relative; width: 24px; height: 24px; } .wp-block-navigation__responsive-container-open::before { content: ""; position: absolute; top: 50%; left: 2px; right: 2px; height: 1.5px; background: #fff; transform: translateY(-50%); box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; } } /* Subpage header - match Figma node 622:2029 (desktop) / mobile Top Nav inside node 216:1099's "Hero" group. Unlike the homepage's floating header, this one renders in normal document flow (no hero photo behind it to float over) with a plain transparent background, colored logo, and dark nav text - so it needs none of .site-header-float's position: absolute/body.home scoping. The mobile hamburger dropdown behavior itself (.wp-block-navigation__responsive-container and friends, above) is already generic/unscoped, so it's reused as-is; only the closed-state hamburger icon color needs overriding here, since that rule draws white bars unconditionally for the homepage's navy-pill context. */ .site-header-plain { position: relative; z-index: 10; } .site-nav-plain.site-nav-plain .wp-block-navigation-item__content { color: #185293 !important; font-size: 16px; } .site-nav-plain .current-menu-item > .wp-block-navigation-item__content { font-weight: 700; } @media screen and (max-width: 782px) { .site-header-plain .wp-block-navigation__responsive-container-open::before { background: #185293; box-shadow: 0 -7px 0 #185293, 0 7px 0 #185293; } .site-header-plain { padding-top: 24px !important; } /* Figma's mobile nav is inset 40px, not the desktop 120px gutter. */ .site-header-plain, .site-header-float { padding-left: 40px !important; padding-right: 40px !important; } } /* Subpage "Hero With Image" - match Figma node 222:4227 (desktop) / 222:1753 (mobile). Figma's gradient is one continuous 500px band that the nav sits ON TOP of, not a separate strip above it - so the plain header (rendered first in document order, 110px tall at desktop) needs to visually float over the TOP of this pattern's gradient, the same way .site-header-float floats over the homepage hero. Pulling this section up by the header's own height with a negative margin slides it underneath the header (z-index below it), and padding-top grows by that same amount so the text content lands at the same visual position as before - net result, the gradient now runs uninterrupted from the true top of the page. */ .subpage-hero-section { position: relative; z-index: 2; /* Pulls up by exactly the header's height so the gradient band starts at the very top of the page and the nav floats on it, as Figma draws it. Header is 42px top padding + the 54px logo + 9px of nav line box. */ margin-top: -105px !important; padding-top: 174px; padding-bottom: 0; } .subpage-hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 502px; z-index: 0; } /* The negative margin above only makes sense with the real site header (header.html) actually rendered directly above this pattern, floating over it - true on the front end, but the block editor previews/edits patterns without any surrounding template part, so there's nothing there to pull up underneath; left as-is, the pull-up just clips the top of the gradient off inside the editor canvas. .editor-styles-wrapper is the wrapper WP puts around editor content specifically for cases like this - scoped here to cancel ONLY the pull-up itself. Padding-top and the gradient's height are deliberately left unchanged, so the proportions (gradient height, text position within it) still match the front end exactly - the only difference is an empty stretch of gradient at the top where the real nav would be floating, which the editor has no way to render since the header lives outside this pattern entirely. */ .editor-styles-wrapper .subpage-hero-section { margin-top: 0 !important; } /* The editor's own block-wrapper CSS (.block-editor-block-list__layout .block-editor-block-list__block { position: relative }) outranks a plain single-class selector on specificity (two classes vs one), demoting this from absolute to relative - which turns it into a normal 502px-tall flow element instead of an overlay, shoving the actual content down by its own height on top of the padding that's already reserving that same space. */ .editor-styles-wrapper .subpage-hero-bg { position: absolute !important; } .subpage-hero-row { position: relative; z-index: 1; gap: 100px; margin-top: 0 !important; } .subpage-hero-text-col { max-width: 690px; } /* Figma sets the hero sub on its own 460px measure inside the 690px column, which balances it onto two roughly even lines. At the column's full width the first line runs to 654px and the second orphans to one word. */ /* !important and the extra class are both needed to outrank core's constrained-layout rule (.is-layout-constrained > :where(...)), which sets margin-left/right:auto !important and would otherwise centre the 460px measure inside the 690px column instead of flushing it left. */ .subpage-hero-text-col p { margin-right: auto !important; margin-left: 0 !important; } /* Licensing sets its sub on a 460px measure so it balances onto two lines; Providers uses the column's full 690px for three. Opt-in per page. */ .subpage-hero-text-col p.hero-sub-narrow { max-width: 460px; } /* Figma offsets the photo 24px above the text block's top (image y=149 vs hero text y=173) rather than top-aligning the two columns. */ .subpage-hero-row .subpage-hero-image-col { margin-top: -25px; } /* Photo frame: 12px inset (border + padding) between the frame's outer edge and the photo, matching Figma's Placeholder Image measurements exactly (409x496 outer frame, 385x472 inner photo - 12px on every side). */ .subpage-hero-photo-frame { border: 3px solid #84a5f2; border-radius: 12px; padding: 9px; } .subpage-hero-photo-frame img { display: block; width: 100%; border-radius: 8px; } @media screen and (max-width: 782px) { /* Mobile header is only 89px tall (vs 110px at desktop - smaller padding and no full-height logo row), so the desktop overlap amount overshoots here and needs its own value. */ .subpage-hero-row .subpage-hero-image-col { margin-top: 0; } .subpage-hero-section { margin-top: -87px !important; /* single column on mobile - no photo offset */ padding-top: 129px; padding-bottom: 40px; } /* .subpage-hero-bg is a wp:spacer block (see the "Trusted" pattern's editor-placeholder fix elsewhere in this file for why), which always emits its height as an inline style - that inline value otherwise beats this rule regardless of media query, so !important is required. 726px reaches about 63% of the way down the photo beneath it, matching Figma's mobile hero (node 222:1753: Background is 813px tall against a Hero group starting at 0, while the photo starts at 502px - the gradient covers roughly 62.7% of the photo's own height, not just its top edge). */ .subpage-hero-bg { height: 726px !important; } .editor-styles-wrapper .subpage-hero-section { margin-top: 0 !important; } .subpage-hero-row { gap: 40px; } .subpage-hero-text-col, .subpage-hero-image-col { flex-basis: 100% !important; } /* Figma's mobile hero (node 222:1753) insets the photo 12px from each screen edge - tighter than the text column's own gutter, but not fully edge-to-edge either. */ .subpage-hero-image-col { padding: 0 12px; box-sizing: border-box; } /* Figma's mobile hero (222:1490) keeps the heading and paragraph LEFT aligned on a 40px gutter - only the button row is centred. Measured off the 402px frame: heading lines start at x=46/45 and the three paragraph lines all start at x=41/41/42 while their right edges vary, so the text is flush left, not centred. The text column itself carries no gutter, which is why centring it happened to look inset. */ .subpage-hero-text-col { text-align: left; } .subpage-hero-text-col h1, .subpage-hero-text-col p { padding-left: 40px; padding-right: 40px; box-sizing: border-box; } /* Providers' title needs a wider box than the 40px gutter allows: "Individualized" is 325.6px at the mobile 51px size against 295px of measure, so it was breaking mid-word. Figma solves it the same way - that hero's title sits in a 378px box (12px gutters) while its paragraph keeps the 40px one (386:2650 vs 386:2651). */ .subpage-hero-section--wide-title .subpage-hero-text-col h1 { padding-left: 12px; padding-right: 12px; } .subpage-hero-text-col h1 { font-size: 51px !important; line-height: 1 !important; letter-spacing: -0.51px !important; } .subpage-hero-text-col p { font-size: 24px !important; line-height: 1.33 !important; } .subpage-hero-buttons { justify-content: center; } } /* Our Solutions - match Figma node 225:607 (desktop) / 216:670 (mobile). Figma's "Our Solutions" group is a 1200x554 union bounding box of a 1176x530 photo (flush to the group's top-left) and a 1176x527 peach shadow offset 24px right / 27px down from it (so it peeks out bottom-right of the photo) - not a padded wrapper, so the frame itself carries the 1200 max-width and the photo/shadow are sized/positioned directly off of it. */ .solutions-frame { position: relative; max-width: 1200px; margin-left: auto; margin-right: auto; } .solutions-shadow { position: absolute; top: 27px; left: 24px; right: 0; bottom: -24px; background: var(--wp--preset--color--peach-light); border-radius: 16px; z-index: 1; } .solutions-photo { position: relative; z-index: 2; max-width: 1176px; margin-top: 0; overflow: hidden; } /* Text content, absolutely positioned over the left side of the photo. top:50%+translateY(-50%) keeps it vertically centered regardless of how tall the eyebrow/heading/paragraph/button stack ends up being (Figma shows 111px above and 111px below inside the 530px-tall photo). */ .solutions-content { position: absolute; z-index: 3; top: 50%; left: 8.78%; width: 38.76%; max-width: 456px; transform: translateY(-50%); } .solutions-eyebrow { color: #ffaf89; font-family: var(--wp--preset--font-family--inter); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; } /* Decorative composition (translucent pill + live "Quality Compounding" text), absolutely positioned over the right side of the photo per Figma percentages. */ .solutions-decor-wrap { position: absolute; z-index: 3; inset: 0; pointer-events: none; } .solutions-decor-wrap > * { pointer-events: auto; } .solutions-pill { position: absolute; z-index: 2; left: 70.61%; top: 43.77%; width: 19.93%; height: 19.25%; margin: 0; display: flex; align-items: center; background: rgba(255, 255, 255, 0.22); border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; padding: 0 var(--wp--preset--spacing--md); box-sizing: border-box; } .solutions-pill-text { color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--inter); font-style: italic; font-size: var(--wp--preset--font-size--medium-large); font-weight: 500; line-height: 1.21; } @media (max-width: 782px) { .solutions-frame { margin: 0 !important; max-width: none; } .solutions-shadow { display: none; } /* Figma's mobile card is full-bleed (edge to edge, square corners) at the same fixed 530px height as desktop - not the flattened/static image the old theme fell back to. The frame carries no side padding, so dropping its max-width and the photo's own max-width lets the photo reach the viewport edges naturally, no negative margins needed. */ .solutions-photo { max-width: none; border-radius: 0 !important; /* Figma's mobile crop keeps more of the vial in view and crops the right-side decoration away entirely, rather than centering. */ background-position: 42% 30% !important; } .solutions-decor-wrap, .solutions-pill { display: none; } .solutions-content { top: 50%; left: 10%; right: 6%; width: auto; max-width: none; transform: translateY(-50%); } .solutions-eyebrow { color: #ffffff; } .solutions-content h2 { font-size: 32px !important; } } /* Body paragraph fixed sizing, sitewide: theme.json's fluid typography setting doesn't just fluidify presets - it also silently converts ANY custom pixel style.typography.fontSize on a block into a clamp() (e.g. 16px becomes clamp(14px, ..., 16px)), so these render smaller than Figma's flat 16px at every breakpoint on narrow viewports. Kept out of each pattern's own block style attribute (which is what triggers the clamp conversion) and set here instead, as plain non-fluid CSS. */ .how-we-work-section p.measure, .facilities-text-col p, .quality-care-text-col p, .solutions-content p, .partner-cta-content p.measure { font-size: 16px; } /* Your Partner in Smarter Compounding - match Figma node 225:595 (desktop) / 216:675 (mobile). Background image/treatment intentionally left as the old theme's existing asset per direct instruction, not re-matched to Figma. */ .partner-cta-section { position: relative; display: flex; align-items: center; justify-content: center; background-position: center; background-repeat: no-repeat; } @media (max-width: 782px) { .partner-cta-section { margin: 0 !important; } .partner-cta-section h2 { font-size: 34px !important; } } /* Footer - match Figma node 216:676 (mobile). Figma's fill is a diagonal navy gradient, not the flat slate-blue the old theme used. */ .site-footer { background: linear-gradient(135deg, #185293 0%, #003366 100%); } /* Figma's home nav sits on the light #E2F2FF -> #B7D9FF pill with #185293 links, not the navy pill with white links this was built with. The colour lives here rather than on the block because core/navigation only honours the textColor preset attribute and #185293 isn't in the palette (it is, though, the same blue as .site-footer's gradient start and the Trusted card's badge labels). */ .site-header-float .site-nav, .site-header-float .site-nav a { color: #185293; } footer .legitscript { margin-left: auto; } /* Figma places the footer's four columns on fixed offsets inside the 1200px content box - 0 / 276 / 500 / 842 - rather than spacing them with the 115px and 165px flex gaps this was built with. Those gaps left column one only 113px of room, which wrapped "Licensing & Standards" and "GLP-1 Therapies" onto second lines and pushed the footer to 749px tall against the design's 657px. */ @media screen and (min-width: 783px) { .footer-columns-row, .footer-menus-flex { gap: 0; } .footer-menus-flex { flex: 0 0 842px; } .footer-menus-flex > .wp-block-group:nth-child(1) { flex: 0 0 276px; } .footer-menus-flex > .wp-block-group:nth-child(2) { flex: 0 0 224px; } .footer-menus-flex > .wp-block-group:nth-child(3) { flex: 0 0 342px; } .footer-accreditations { flex: 1 1 auto; } /* The 1x19px rules Figma draws between the logo and the tagline, between each privacy link, and before the "compounded in the USA" mark. Drawn as pseudo-elements so they stay out of the DOM and simply don't render at the mobile breakpoint, where the design stacks these rows instead. */ .footer-top-row, .footer-privacy-row, .footer-legal-row { gap: 0; } .footer-top-row > p::before, .footer-privacy-row > p:not(:last-child)::after, .footer-legal-row > p::after { content: ""; display: inline-block; width: 1px; height: 19px; background: currentColor; opacity: 0.6; vertical-align: -4px; } .footer-top-row > p::before { margin: 0 46px; } .footer-privacy-row > p:not(:last-child)::after { margin: 0 35px; } .footer-legal-row > p::after { margin: 0 29px; } } /* Accreditation rows - 32px badge, 14px gap, 15px label, 36px pitch. Same construction as the Trusted card's badge list, reversed out white for the footer's dark blue. */ .footer-accreditation-item { align-items: center; gap: 14px; margin-top: 0 !important; } .footer-accreditation-icon { width: 32px; height: 32px; flex-shrink: 0; } .footer-accreditation-icon svg { display: block; } /* Matches the .trusted-badge-item fix: core/html renders inside a sandboxed editor preview whose wrapper otherwise fills the available flex space. */ .editor-styles-wrapper .footer-accreditation-item .wp-block-html { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; overflow: hidden; } .footer-accreditation-label { font-family: var(--wp--preset--font-family--plus-jakarta-sans); font-size: 15px; font-weight: 700; line-height: 1; color: var(--wp--preset--color--white); margin: 0; white-space: nowrap; } /* The logo/tagline row and the menu-columns + accreditation badges row are built with flexWrap:"nowrap" and desktop-only gaps as large as 165px - intentionally, so they keep sitting in one row exactly as designed on desktop (the accreditation column belongs to the right of the three menu columns, all in a single line). But that same nowrap forces the row to lay out at its full natural width regardless of actual screen size on narrow viewports, which both breaks the page out wider than the viewport and scatters content instead of stacking. So flex-wrap is force-switched to "wrap" here, mobile-only. Figma's mobile footer uses one consistent 24px gap between every stacked item (logo/tagline, dividers, menu columns, badges, legal links), so every wrapped gap below matches that instead of the old theme's inconsistent 16px/12px one-offs. */ .mobile-only { display: none; } @media (max-width: 782px) { .desktop-only { display: none; } .mobile-only { display: block; } footer .wp-block-group .footer-logo { flex-wrap: wrap; } footer .wp-block-group .legitscript { position: absolute; right: 0; top: 0; } footer .wp-block-group .footer-links { border-bottom: 1px solid var(--wp--preset--color--white); flex-direction: column; gap: 30px; padding-bottom: 30px; } footer .wp-block-group .footer-accreditations { border-top: 1px solid var(--wp--preset--color--white); padding-top: 30px; } footer .wp-block-group .footer-links .footer-menus-flex { align-items: flex-start; } footer .footer-legal { align-items: flex-start; border-bottom: 1px solid var(--wp--preset--color--white); flex-direction: column; gap: 24px; padding-bottom: 24px; } .site-footer { padding-top: 64px !important; padding-bottom: 64px !important; } .footer-top-row { flex-wrap: wrap !important; gap: 24px !important; } .footer-top-row img { width: 134px !important; } .footer-columns-row { flex-wrap: wrap !important; gap: 24px !important; } .footer-menus-flex { flex-direction: column !important; gap: 24px !important; width: 100% !important; } .footer-columns-row > .footer-mobile-divider { flex-basis: 100% !important; width: 100% !important; } /* The badge row sits top-right beside the logo on mobile, which the absolute rule above positions against this row. */ .footer-top-row { position: relative; } .footer-accreditation-label { white-space: normal; } .footer-privacy-row { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; } .footer-legal-row { gap: 24px !important; row-gap: 24px !important; } footer.wp-block-group { padding-left: 40px !important; padding-right: 40px !important; } footer.wp-block-group > * + * { margin-block: 24px 0px !important; } .footer-mobile-divider { display: block !important; } } /* The one separator between the logo/tagline row and the menu columns already exists and works for both breakpoints as-is. The rest of the footer nav stacks single-column on mobile with a divider before the accreditation badges, before the privacy-links row, and before the "do not sell" row, reusing the same is-style-wide separator. Kept hidden on desktop (that layout only needs the one existing divider) and shown only under the mobile breakpoint above. */ .footer-mobile-divider { display: none; } /* The footer's left/right padding was hardcoded to the 3xl spacing token (80px) on all sides, independent of what the rest of the page uses for its horizontal gutter. header.html and trust-badges.php both use the md token (24px) as their left/right gutter, so matching that here instead on desktop - the site's actual "natural" horizontal padding. Mobile gets its own explicit 40px above (a one-off value picked directly for that breakpoint, not a reusable design token, matching Figma). */ @media (min-width: 783px) { footer.wp-block-group { padding-left: var(--wp--preset--spacing--md) !important; padding-right: var(--wp--preset--spacing--md) !important; } } /* Where We Operate - match Figma node 222:1187 (desktop) / 222:4223 (mobile). Desktop's background fades from transparent (behind the map) to a light blue-gray (behind the text column) - mobile has no map, so it just gets a simpler, symmetric wash instead. Figma's full-page frame (216:758) shows this section's top edge flush with the Hero's gradient bottom (Map Section starts at exactly Hero-background-bottom, no gap) - the Hero's photo is what bleeds past that shared edge, so it visually overlaps on top of this section's own background. Pulling this section up to close the gap that would otherwise come from subpage-hero-section's own bottom padding plus the sitewide block-gap margin recreates that flush boundary, and the negative margin needs the same !important as the header/hero overlap to beat the WP core block-gap rule fighting for the same property. z-index is raised above this section's own (1) so the hero's photo - inside a section that stacks at z-index:2 - paints on top during the overlap instead of being covered by this section's own background. */ .where-we-operate-section { position: relative; z-index: 1; /* Figma starts this band at y=500 with the hero photo bleeding over it. */ margin-top: -146px !important; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, transparent 35%, #e2f0f9 100%); } /* Same reasoning as .editor-styles-wrapper .subpage-hero-section above - the pull-up only makes sense with the real hero-with-image photo actually bleeding down from directly above it, which the editor can't reproduce in isolation (each pattern previews independently), so it just clips this section's own top content instead. */ .editor-styles-wrapper .where-we-operate-section { margin-top: 0 !important; } .where-we-operate-row { gap: 24px; } .where-we-operate-map-col img { display: block; width: 100%; height: auto; } .where-we-operate-legend { margin-top: 42px !important; gap: 16px; justify-content: center; } .legend-item { align-items: center; gap: 4px; } .legend-swatch { width: 16px; height: 16px; border-radius: 2px; flex-shrink: 0; } /* Swatches mirror the US Map plugin's configured state fills (us_map option: upclr_*) so the legend still reads against the interactive map that replaced the static illustration. */ .legend-swatch-licensed { background: #0f43b7; } .legend-swatch-pending { background: #477cb2; } .legend-swatch-coming-soon { background: #e0f3ff; } .legend-label { font-size: 12px; font-weight: 500; color: #2a2a2a; margin: 0; } /* Fixed (non-fluid) sizes, kept out of the block's own JSON style attribute deliberately - theme.json's fluid typography setting silently converts any raw px fontSize placed there into a clamp(), which caps this heading/paragraph at the wrong size on wide viewports. */ .where-we-operate-heading { font-size: 40px; } .where-we-operate-text-col p { font-size: 16px; } @media screen and (max-width: 782px) { /* The hero-photo-overlap effect above is desktop-only (see the comment on the base .where-we-operate-section rule) - mobile's hero stacks the photo above the text with no bleed to overlap into, so the same pull-up just shoves this section's heading behind the photo instead. Restoring the normal in-flow top margin here undoes that for mobile. Background gradient angle/stops are computed from Figma's own mobile fill data (node 222:4223's Background rect) - transparent at the top, fading to solid #e2f0f9 by ~77% down, then staying solid to the bottom. This is a different angle from the desktop version's own gradient (they're independently authored fills in Figma, not the same value at two breakpoints), so it's not just reusing the desktop rule with a converted angle. */ .where-we-operate-section { margin-top: 0 !important; background: linear-gradient(251deg, transparent 0%, #e2f0f9 77%); min-height: 0 !important; padding-top: 64px; padding-bottom: 57px; } /* Figma's mobile layout (node 222:1463, the full page frame) DOES include the map - it's just laid out as a separate "Map" frame overlapping this section's bottom rather than living inside the "Where We Operate" component frame itself, which is why fetching that component in isolation earlier looked map-less. Text comes first on mobile (map-col is second in the DOM, matching desktop's left-to-right order), so `order` flips the visual stacking without touching the markup. */ .where-we-operate-row { gap: 52px; } .where-we-operate-map-col { display: block; order: 2; flex-basis: 100% !important; max-width: 100% !important; } .where-we-operate-map-col img { max-width: 90%; margin: 0 auto; } /* A percentage max-width doesn't work here - the legend's font sizes are fixed px (not fluid, matching the rest of this pattern), so its content doesn't shrink with viewport width the way a percentage container would. Sizing to its own content and centering that box avoids squeezing the labels into a wrap. */ .where-we-operate-legend { width: fit-content; margin-left: auto !important; margin-right: auto !important; } .legend-label { white-space: nowrap; } .where-we-operate-text-col { order: 1; text-align: center; } /* The heading/paragraph/button group was flush against the screen edges with no inset of its own. */ .where-we-operate-text-inner { padding-left: 40px; padding-right: 40px; } .where-we-operate-text-col h2 { font-size: 40px !important; line-height: 1 !important; } .where-we-operate-text-col p { font-size: 16px !important; line-height: 1.4 !important; } .where-we-operate-text-col .wp-block-buttons { justify-content: center; } } /* Trusted - match Figma node 713:3624 (desktop) / 216:584 (mobile). Card gradient angle is computed from the figma fill's own gradient handle positions (~158deg) - close to but distinct from the existing subpage-hero-gradient preset (135deg), so it's hardcoded here rather than reusing that token. */ .trusted-section { padding-left: var(--wp--preset--spacing--md); padding-right: var(--wp--preset--spacing--md); } .trusted-card { max-width: 996px; margin: 0 auto; padding: 72px 141px; border-radius: 8px; background: linear-gradient(158deg, #e2f2ff 0%, #b7d9ff 100%); position: relative; } /* Fixed (non-fluid) sizes - kept out of the blocks' own JSON style attribute deliberately, same reasoning as elsewhere in this file: theme.json's fluid typography setting silently converts any raw px fontSize placed there into a clamp(). */ .trusted-heading { font-size: 40px; text-align: center; } .trusted-text { font-size: 16px; text-align: center; max-width: 670px; margin-left: auto; margin-right: auto; } .trusted-badges-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 20px; row-gap: 16px; margin-top: 24px !important; } /* WP's sitewide block-gap rule adds margin-top to every non-first flow child, including these grid items - since grid row height is auto (tallest cell in the row), that stray margin was inflating whole rows unevenly (rows paired with a margin-having item became 56px instead of 32px) and bottom-aligning the taller cell's icon within it, which is what made the columns look uneven and the gaps inconsistent. */ .trusted-badge-item { align-items: center; gap: 16px; margin-top: 0 !important; } .trusted-badge-icon { width: 32px; height: 32px; flex-shrink: 0; } .trusted-badge-icon svg { display: block; } /* The icon is a wp:html block (needed since it's a raw inline SVG, not a real block) so the editor renders it inside a sandboxed preview iframe whose wrapper defaults to filling the available flex space - same root cause as the legend-swatch fix in the Where We Operate pattern, just here on the wrapper WP itself renders (.wp-block-html) rather than on our own class, since core/html doesn't support a custom className. */ .editor-styles-wrapper .trusted-badge-item .wp-block-html { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; overflow: hidden; } .trusted-badge-label { font-family: var(--wp--preset--font-family--plus-jakarta-sans); font-size: 15px; font-weight: 700; line-height: 1; color: #185293; margin: 0; white-space: nowrap; } .trusted-legitscript-badge { position: absolute; right: 40px; bottom: 40px; width: 67px; margin: 0 !important; } .trusted-legitscript-badge img { display: block; width: 100%; height: auto; } @media screen and (max-width: 782px) { .trusted-section { margin: 0 !important; padding: 0 !important; } .trusted-card { max-width: none; border-radius: 0; padding: 40px 40px 64px; } .trusted-heading { font-size: 34px; } .trusted-badges-list { display: flex; flex-direction: column; gap: 24px; } .trusted-legitscript-badge { right: 24px; bottom: 24px; } /* Desktop keeps labels on one line and lets the longer ones overflow into the column gap (matching Figma, where several labels are already wider than their own nominal column). Mobile has no second column to overflow into, and Figma's own mobile frame shows "Accredited PCAB Compounding Pharmacy" legitimately wrapping to two lines there, so normal wrapping is restored here. */ .trusted-badge-label { white-space: normal; } } /* Hero (Practice/Contact page) - match Figma node 233:651 (desktop) / 234:4182 (mobile). Same header-float technique as subpage-hero-section: the real site header floats over this gradient's top edge, so this section gets pulled up by the header's own height and padding-top grows by that same amount to keep the text at the same visual position. */ .practice-hero-section { position: relative; z-index: 2; margin-top: -105px !important; padding-top: 189px; padding-bottom: 115px; } .editor-styles-wrapper .practice-hero-section { margin-top: 0 !important; } /* Figma's Patients rhythm: 88 hero->bio, 88 bio->pricing, 96 pricing->CTA, 120 CTA->footer. The shared facilities and pricing sections carry different values on home, licensing and providers, so these are scoped. */ .facilities-section--bio { padding-top: 64px; padding-bottom: 64px; } /* Compound selector so this beats the base .pharmacy-pricing-section rule, which is defined later in the file. */ .pharmacy-pricing-section.pharmacy-pricing-section--patient { padding: 72px 0 59px; } /* Patients' closing CTA is a centred 1176x457 card on the light gradient with a 1px #84A5F2 outline offset +25/+32 behind it (797:2867 + 797:2898). The homepage shares this class but is a full-bleed photo band, hence a modifier rather than a change to the base rule. */ .partner-cta-section--card { background: none !important; padding: 96px 0 120px !important; margin-top: 0 !important; min-height: 0 !important; } .partner-cta-section--card > .wp-block-columns { position: relative; /* Fixed rather than max-width: the columns carry inline flex-basis and clamp() margins, so left to themselves they size to content (1159px) instead of filling Figma's 1176px card. */ width: 1176px; max-width: 100%; margin-inline: auto; min-height: 457px; align-items: center; background: linear-gradient(140.37deg, #e2f2ff 5.303%, #b7d9ff 94.177%); border-radius: 24px; padding: 68px 0; box-sizing: border-box; } /* Figma insets the card's content 96px on both sides (797:2872). Desktop only - on mobile the photo goes full-bleed, and these outrank the mobile reset on specificity if left unscoped. */ @media screen and (min-width: 783px) { .partner-cta-section--card > .wp-block-columns > .wp-block-column:first-child { margin-left: 96px !important; } .partner-cta-section--card > .wp-block-columns > .wp-block-column:last-child { margin-right: 96px !important; } } .partner-cta-section--card > .wp-block-columns::after { content: ""; position: absolute; inset: 32px -25px -32px 25px; border: 1px solid #84a5f2; border-radius: 24px; z-index: -1; pointer-events: none; } /* Figma 797:2907 gives the Patients CTA the same mobile treatment as the Providers support card: the photo goes full-bleed, the band starts beneath it, and the heading then the two stacked buttons sit on a 40px gutter. */ @media screen and (max-width: 782px) { .partner-cta-section--card { padding: 48px 0 !important; } .partner-cta-section--card > .wp-block-columns { width: 100%; max-width: none; min-height: 0; flex-wrap: wrap; gap: 24px; padding: 0 0 48px; border-radius: 0; } .partner-cta-section--card > .wp-block-columns::after { display: none; } .partner-cta-section--card > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; margin: 0 !important; } .partner-cta-section--card > .wp-block-columns > .wp-block-column:last-child { padding: 0 40px !important; box-sizing: border-box; } .partner-cta-section--card .wp-block-buttons { flex-direction: column; align-items: flex-start; } } .practice-hero-heading { font-size: 64px; text-align: center; } .practice-hero-text { font-family: var(--wp--preset--font-family--archivo); font-size: 24px; line-height: 1.33; text-align: center; margin-top: 16px; } @media screen and (max-width: 782px) { .practice-hero-section { margin-top: -87px !important; padding-top: 129px; padding-bottom: 48px; padding-left: 40px; padding-right: 40px; } .editor-styles-wrapper .practice-hero-section { margin-top: 0 !important; } .practice-hero-heading { font-size: 51px; line-height: 1 !important; } .practice-hero-text { font-size: 24px; } } /** * Practice form (Gravity Forms "Practice") - match Figma nodes 233:651 * (desktop default), 234:3430 (desktop selected), 234:4182 (mobile). * Adapted from shinerx-custom-theme's Contact Us form (same mechanism: * numbered HTML-field question headers between real inputs, one * continuous Gravity Forms form rather than separate block content * interleaved between fields), re-themed to SmartPharmaRX's own palette. * * Desktop: the gradient wash (practice-gradient, continuing from the * hero above) stays visible on this section's own background, but the * questions themselves sit on a white, rounded "card" (Figma's Questions * frame is a solid white 1200px-wide, 16px-radius rect - not part of the * shared gradient at all). Card padding (64px/204px) is sized so its * content lands at exactly 792px wide (1200 - 204*2), matching the * hero's own contentSize instead of needing a second nested constraint. */ .practice-form-section { margin-top: 0 !important; padding-top: 64px; padding-bottom: 134px; } /* The Questions frame is a white 1200px panel on the page gradient - measured off 234:3430, white runs x121-1314 and y495-3053 with the gradient visible either side. Questions sit 792px wide inside it, hence the 204px inset. */ .practice-form-card { background: var(--wp--preset--color--white); border-radius: 16px; padding: 64px 204px; } /* ================================================================ Contact form - Forminator, built to Figma 233:651 (unselected) / 234:3430 (selected). Replaces the Gravity Forms styling that went with the previous form plugin. ================================================================ */ .practice-form-section .forminator-ui.forminator-custom-form { font-family: var(--wp--preset--font-family--inter); counter-reset: sprx-question; } /* Forminator puts 30px under every row. All of this form's spacing is set explicitly from the frame (64px between questions, 24px between a heading and its answers, 24px between field rows), so that stray margin only ever inflates it - it was what made Q5's rows sit on a 118px pitch instead of the 88px Figma draws. */ .practice-form-section .forminator-row { margin-bottom: 0 !important; } /* --- numbered question heading (Forminator "section" field) --- */ .practice-form-section .forminator-field-section { counter-increment: sprx-question; text-align: center; margin-top: 64px; } .practice-form-section .forminator-row:first-child .forminator-field-section { margin-top: 0; } .practice-form-section .forminator-field-section .forminator-field::before { content: counter(sprx-question) "."; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 9999px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--interstate); font-size: 26px; font-weight: 700; line-height: 1; } .practice-form-section .forminator-title { font-family: var(--wp--preset--font-family--interstate); font-size: 36px; line-height: 40px; font-weight: 700; color: var(--wp--preset--color--ink); margin: 0; } .practice-form-section .forminator-subtitle { font-family: var(--wp--preset--font-family--inter); font-size: 16px; line-height: 22px; font-weight: 400; color: var(--wp--preset--color--ink); margin: 16px 0 0; } /* The section heading already carries the question, so each field's own label is kept for screen readers only rather than repeated on screen. */ .practice-form-section .forminator-field-radio .forminator-label, .practice-form-section .forminator-field-select .forminator-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- answer options: two 56px pills per row (Figma: 384px cols, 24px gutter) --- */ .practice-form-section .forminator-field-radio [role="radiogroup"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; } .practice-form-section label.forminator-radio { display: flex; align-items: center; gap: 16px; min-height: 56px; /* Forminator puts 10px vertical margins on each option and omits the bottom one on the last - inside a grid that inflates the 24px gap to 44px and leaves the final option 10px taller than the rest. */ margin: 0 !important; padding: 0 24px; border: 1px solid #989898; border-radius: 16px; background: var(--wp--preset--color--white); font-size: 16px; line-height: 1.3; color: var(--wp--preset--color--ink); cursor: pointer; } /* Checkbox options share the radio option's box treatment. */ .practice-form-section label.forminator-checkbox { display: flex; align-items: center; gap: 16px; min-height: 56px; /* Forminator puts 10px vertical margins on each option and omits the bottom one on the last - inside a grid that inflates the 24px gap to 44px and leaves the final option 10px taller than the rest. */ margin: 0 !important; padding: 0 24px; border: 1px solid #989898; border-radius: 16px; background: var(--wp--preset--color--white); font-size: 16px; line-height: 1.3; color: var(--wp--preset--color--ink); cursor: pointer; } .practice-form-section label.forminator-checkbox:has(input:checked) { background: var(--wp--preset--color--peach-light); border-width: 2px; border-color: var(--wp--preset--color--ink); padding: 0 23px; } /* Selected (234:3430): peach fill with a 2px ink border. */ .practice-form-section label.forminator-radio:has(input:checked) { background: var(--wp--preset--color--peach-light); border-width: 2px; border-color: var(--wp--preset--color--ink); padding: 0 23px; } /* Forminator hides its own .forminator-radio-bullet in this design variant and shows the native input, so the control is styled on the input itself. */ .practice-form-section label.forminator-radio input[type="radio"] { appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; border: 1px solid #989898; border-radius: 9999px; background: transparent; cursor: pointer; } .practice-form-section label.forminator-radio input[type="radio"]:checked { border-color: var(--wp--preset--color--ink); background-color: var(--wp--preset--color--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 4.4 8 11 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 9px; } .practice-form-section label.forminator-radio .forminator-radio-label { margin: 0; } /* --- state multiselect (Q2) --- */ .practice-form-section .forminator-field-select { margin-top: 24px; } .practice-form-section .forminator-field-select .forminator-description { font-style: italic; text-align: center; font-size: 16px; margin: -14px 0 14px; color: var(--wp--preset--color--ink); } /* Figma (233:994) draws the control and the chosen states as two separate things: a 56px bordered box, then the state tags on their own row beneath it. Select2 renders both inside one