/* Desktop vs Figma fixes: home. Scope with body.page-id-N and @media (min-width: 768px). Scoped to >=1025px: mobile-nav.js zooms the artboard-sized layout from 1025 up, while 768-1024 keeps the build's own tablet flow (fixed 1512 widths here would clip there). Homepage, Figma frame 1:2 (1512 x 9512), verified at a 1512px viewport (mobile-nav.js applies no zoom there) with an anchor checker: Figma node y/x/w/h vs live box, 3px tolerance. Section offsets quoted below are Figma artboard y values. */ @media (min-width: 1025px) { /* ── Buttons ─────────────────────────────────────────────────────────── Height, radius and inner shadow are site-wide now (custom.css, >=768px). Figma sizes these homepage CTAs to fixed widths narrower than label + 22px padding, so their inline padding is reduced to keep one line. */ body.home .elementor-element-c954591 > a.e-button-base, body.home .elementor-element-035d063 > a.e-button-base, body.home .elementor-element-52be995 > a.e-button-base, body.home .elementor-element-ab2a4d5 > a.e-button-base, body.home .elementor-element-dd085ae > a.e-button-base, body.home .sh-newsletter-form .e-form__buttons .elementor-button { padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap !important; } /* ── Hero ────────────────────────────────────────────────────────────── Stag at y=353 (was 360). The wordmark lockup carries Figma's "Rectangle 1": the H crossbar running on across the A (283x19 at x=882 y=680), which the exported SVG lacks. */ body.home .elementor-element-36e1ab2 > img[src*="hero_deer"] { margin-top: 60px !important; } body.home .elementor-element-36e1ab2 > .sh-wordmark-desktop { content: url('../../img/socialhart-wordmark-hbar.svg'); margin-top: 126px !important; } /* ── For Founders block + ticker ──────────────────────────────────────── Ticker rule at y=1754 and a 70px band (was 1756 / 71px), so the dark panel starts at 1824. */ body.home .elementor-element-dd05eee { padding-bottom: 171px !important; } body.home .elementor-element-e0207cf { padding-bottom: 16px !important; } /* Sub-pixel drift: each heading below sat 1px low against its eyebrow. */ body.home .elementor-element-dd05eee > h2 { margin-top: 34px !important; } body.home .elementor-element-c954591 > h2, body.home .elementor-element-035d063 > h2 { margin-top: 11px !important; } /* ── "You're on the bright path" ─────────────────────────────────────── Copy runs in a 450px measure (2/5/4 lines; the build's 497px gave 2/4/3), the CTA sits 23px under the last line, the panel is 929px. */ body.home .elementor-element-c954591 { padding-bottom: 73px !important; } body.home .elementor-element-c954591 > h2 ~ p { max-width: 450px !important; } /* Figma breaks after "manifestation." with a hard line separator; 400px is under the 409px "…manifestation. Let's" run. */ body.home .elementor-element-c954591 > h2 + p { max-width: 400px !important; } body.home .elementor-element-c954591 > a.e-button-base { margin-top: 1px !important; min-width: 232px !important; width: 232px !important; } /* Past the 1512 design the photo half kept growing with the window and, being object-fit: cover at a fixed 929px height, zoomed in - by 2560 the arched mirror top was cropped away. The photo now keeps its 756x929 design size against the right edge and the maroon copy panel takes the extra width. At 1512 both are exactly half, as before. */ @media (min-width: 1513px) { body.home .elementor-element-afa2f29 > img.e-image-base { flex: 0 0 756px !important; width: 756px !important; max-width: 756px !important; } body.home .elementor-element-afa2f29 > .elementor-element-c954591 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; } } /* ── Testimonial marble ──────────────────────────────────────────────── Figma fills a 1827x861 rectangle at x=-158 y=2639 (1.149x the 1590x895 asset, cropped 83px top and bottom) and the band shows from y=2753, under the photo panel, to the torn drips around y=3474-3532, which hang ~45px over the sand founder band. The build stretched the asset to the section box (object-fit: fill), squeezing the texture. */ body.home .elementor-element-72a9033 { overflow: visible !important; clip-path: inset(0 0 -80px 0); z-index: 3 !important; } body.home .elementor-element-72a9033 > img { width: 1827px !important; max-width: none !important; height: 1028px !important; inset-block-start: -197px !important; inset-inline-start: calc(50% - 914px) !important; object-fit: fill !important; } /* Past ~1735px the fixed 1827px marble no longer reaches both edges (46px cream gaps at 1920). Stretch it horizontally only: the texture is abstract, and keeping the 1028px height keeps the torn bottom edge and its drips exactly where the frame puts them (scaling proportionally pushed the tear below the clip and left a straight cut). */ @media (min-width: 1736px) { body.home .elementor-element-72a9033 > img { width: calc(100% + 93px) !important; inset-inline-start: -46.5px !important; } } /* quote y=2959, attribution 3227, founder band 3473 (section 720px). The "Success stories" button added under the attribution (client QA, not in the frame) is 96px with its gap; it came out of the 228px bottom padding so the section stays 720px and the drips still hang over the founder band instead of ending above a cream strip. */ body.home .elementor-element-7715b76 { min-height: 0 !important; padding-bottom: 132px !important; } body.home .elementor-element-7715b76 > p { margin-top: 43px !important; } /* ── Meet the founder ────────────────────────────────────────────────── Sand band 896px (y=3473-4369); eyebrow 127px into it; the gilt frame's ink box sits 176px into the band (Figma 148-599 x 3649-4223). The composite photo keeps its 1:1 scale; the 44px above it is plain sand, mostly under the marble drips. */ body.home .sh-founder-section { min-height: 896px !important; } /* The portrait is its own image so it can be swapped in Elementor without touching the design: .sh-founder-frame is the panel, the image sits in the frame's opening, and the frame, tag and diamond ground are drawn over it from founder-frame-overlay.png (the original 758x852 composite with the opening cut out). The overlay is centred and bottom-aligned, as the composite was; its top 30px (dark marble-drip smudges baked into the design export) are transparent so the tile shows there instead. */ body.home .sh-founder-section > .sh-founder-frame { position: relative !important; display: block !important; flex: 0 0 50% !important; width: 50% !important; height: 896px !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background-color: #DCC38B !important; /* Everything around the photo is filled with the asset's own diamond ground: a seamless 147x198 tile built as the per-pixel median of every pattern-only margin of the asset (reconstructs its argyle to within 0.6 levels; a straight crop carried a JPEG seam column). It is phased to the centred, bottom-aligned image - asset pixel (0,300) lands at x = 50% of the panel minus 379px, y = 44 + 300 - so the argyle continues unbroken above the photo (behind the marble drips) and, on panels wider than the 758px asset (>1516px viewports), out to both edges instead of stopping in a visible seam. */ background-image: url('../../img/founder-argyle-tile.png') !important; background-repeat: repeat !important; background-position: calc(50% - 305.5px) 344px !important; align-self: flex-start !important; } body.home .sh-founder-frame::after { content: ''; position: absolute; inset: 0; background: url('../../img/founder-frame-overlay.webp') 50% 100% / 758px 852px no-repeat; pointer-events: none; } /* The opening is 381x501 at (188,168) in the composite, which starts 44px down and 379px left of the panel's centre. The image runs 5px under the frame on every side. */ body.home .sh-founder-frame > .sh-founder-photo { position: absolute !important; top: 207px !important; left: calc(50% - 196px) !important; width: 391px !important; max-width: none !important; height: 511px !important; padding: 0 !important; margin: 0 !important; background: none !important; object-fit: cover !important; object-position: 50% 15% !important; } body.home .elementor-element-035d063 { padding-top: 127px !important; padding-bottom: 62px !important; } body.home .elementor-element-035d063 > a.e-button-base { min-width: 141px !important; width: 141px !important; } /* "socialhart has worked with" sits 9px below the strip's centre line. */ body.home .elementor-element-941f1c8 > p { position: relative !important; top: 9px !important; } /* ── The Services ────────────────────────────────────────────────────── The first service row starts 141px under the spa-day line (y=5369); rows are 229px (40/149/40) except Timeless Marketing Tips, 236px (47/149/40). Headings sit 27px right of the thumbnail (x=191) in a 544px measure (395px for Tips, two lines); the copy column stays at x=862. space-between had pushed every heading to x=255. */ /* Live Figma (rendered 2026-09-17 at 100%) opens the list with a full-width double rule at y=5339 / 5366 that the earlier PDF reference had dropped, along with the Etched row's heading and photo. The intro now ends at the first rule (141 -> 110px) and the rules are borders. */ body.home .elementor-element-8890028 { padding-bottom: 110px !important; } body.home .elementor-element-0c9b4b4 { border-top: 1px solid #3B1919 !important; padding-top: 26px !important; } body.home .elementor-element-0c9b4b4 > .elementor-element-e85a054 { border-top: 1px solid #3B1919 !important; } /* 900px measure reproduces Figma's breaks ("…CONTRACTS. / JUST WHAT…"): "DRAWN-OUT CONTRACTS. JUST" is exactly 909px, the frame's box width. */ body.home .elementor-element-8890028 > h3:first-of-type { max-width: 900px !important; } body.home .elementor-element-0c9b4b4 > .e-flexbox-base { justify-content: flex-start !important; } /* Figma's 229px row pitch includes the 1px rule, so rows are 228px. */ body.home .elementor-element-0c9b4b4 > .e-flexbox-base { padding-bottom: 39px !important; } /* Etched (live frame): photo 5406, heading ink 5441, copy ink 5434, rule 5594 - a 39px top pad and copy set 7px lower than centre. Radiance then carries the frame's extra 4px so every rule below keeps its position. */ body.home .elementor-element-0c9b4b4 > .elementor-element-e85a054 { padding-top: 39px !important; } body.home .elementor-element-0c9b4b4 > .elementor-element-e85a054 > .e-paragraph-base { position: relative !important; top: 7px !important; } body.home .elementor-element-0c9b4b4 > .elementor-element-62b0b0f { padding-top: 44px !important; } body.home .elementor-element-0c9b4b4 > .elementor-element-9c4cd5d { padding-top: 47px !important; } body.home .elementor-element-0c9b4b4 > .e-flexbox-base > .e-heading-base { flex: 0 0 auto !important; width: 544px !important; margin-left: 27px !important; } body.home .elementor-element-0c9b4b4 > .elementor-element-9c4cd5d > .e-heading-base { width: 395px !important; } body.home .elementor-element-0c9b4b4 > .e-flexbox-base > .e-paragraph-base { margin-left: auto !important; } /* Figma sets the four-line copy of Radiance and Spree 4px above centre, and the two-line Tips heading 26px under the row's top padding. */ body.home .elementor-element-0c9b4b4 > .elementor-element-62b0b0f > .e-paragraph-base, body.home .elementor-element-0c9b4b4 > .elementor-element-4c53215 > .e-paragraph-base { margin-top: -8px !important; } body.home .elementor-element-0c9b4b4 > .elementor-element-9c4cd5d > .e-heading-base { align-self: flex-start !important; margin-top: 26px !important; } body.home .elementor-element-52be995 > a.e-button-base { min-width: 256px !important; width: 256px !important; } /* ── Blog ────────────────────────────────────────────────────────────── Cards are 488px wide on a 475px pitch (x=37/512/987, overlapping by 13px) with the 436px image centred; "view all" is 212px. The luggage tag is 274x283 with its right edge 198px from the viewport edge. */ body.home .elementor-element-cea9573 > .e-flexbox-base { flex: 0 0 488px !important; width: 488px !important; max-width: none !important; } body.home .elementor-element-cea9573 > .e-flexbox-base + .e-flexbox-base { margin-left: -13px !important; } /* The three cards span 1438px. At 1512 that leaves the frame's 37px each side, so centring the row is identical there and keeps it centred on wider screens (at 1920 it was pinned left, 37-1475). */ body.home .elementor-element-cea9573 { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } /* Cards overlap by 13px, so full-measure real titles ran into each other ("…YOUR BRANDHOW TO…"); Figma's titles never exceed ~440px. */ body.home .elementor-element-cea9573 > .e-flexbox-base > h4 { padding: 0 20px !important; box-sizing: border-box !important; } /* "view all resources" ends 84px above the olive band (y=7708 / 7792). */ body.home .elementor-element-ab2a4d5 { padding-bottom: 84px !important; } body.home .elementor-element-ab2a4d5 > a.e-button-base { min-width: 212px !important; width: 212px !important; } body.home .elementor-element-9f9419c > img[src*="tag_transparent"] { width: 274px !important; height: 283px !important; object-fit: contain !important; inset-inline-end: 198px !important; inset-block-end: -188px !important; } /* ── Content coal band ────────────────────────────────────────────────── */ body.home .elementor-element-dd085ae > a.e-button-base { min-width: 238px !important; width: 238px !important; } /* ── Newsletter band ─────────────────────────────────────────────────── 263px pink band with hairline rules (y=8490-8753). Heading at x=47, 56px down; form top-aligned 13px lower: two 339x55 fields at x=774 and x=1126 (13px apart), a 281x51 button 17px under them at x=774. The build centred everything vertically in a 283px band with 299px fields and a 631px-wide button. */ body.home .elementor-element-fc65b74 { height: 263px !important; min-height: 0 !important; border-top: 1px solid #3B1919; border-bottom: 1px solid #3B1919; box-sizing: border-box !important; } body.home .elementor-element-1b6d130 { align-items: flex-start !important; padding: 55px 47px 0 !important; } body.home .sh-newsletter-form { flex: 0 0 691px !important; width: 691px !important; margin-top: 13px !important; } body.home .sh-newsletter-form .elementor-form-fields-wrapper { margin: 0 !important; column-gap: 13px !important; row-gap: 17px !important; } body.home .sh-newsletter-form .elementor-field-group { flex: 0 0 339px !important; width: 339px !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } body.home .sh-newsletter-form .elementor-field-group.e-form__buttons { flex: 0 0 100% !important; width: 100% !important; justify-content: flex-start !important; } body.home .sh-newsletter-form input.elementor-field-textual { height: 55px !important; padding: 0 19px !important; border: 1px solid #3B1919 !important; border-radius: 0 !important; background: transparent !important; font-family: 'Source Serif Pro', Georgia, serif !important; font-size: 20px !important; letter-spacing: -0.6px !important; color: #3B1919 !important; } body.home .sh-newsletter-form input.elementor-field-textual::placeholder { color: #3B1919 !important; opacity: 1 !important; } body.home .sh-newsletter-form .e-form__buttons .elementor-button { flex: 0 0 auto !important; min-width: 281px !important; width: 281px !important; } /* ── Footer ──────────────────────────────────────────────────────────── NAVIGATION at x=1143 and CONNECT at x=1358 (navigation links inset 4px to x=1147); wordmark 1414x186 at x=51 y=9243, 26px above the legal bar; legal text 17px into the bar. */ body.home .elementor-element-5787a2a { gap: 0 !important; } body.home .elementor-element-b9d2512 { flex: 0 0 215px !important; width: 215px !important; } body.home .elementor-element-be2a39e { flex: 0 0 107px !important; width: 107px !important; } body.home .elementor-element-b9d2512 > p:not(:first-child) { padding-left: 4px !important; } /* 394px: Figma wraps "and / grows" (the 396px run just misses its 396px box). */ body.home .elementor-element-9ea8b76 > p { max-width: 394px !important; } body.home .elementor-element-c3d7822 { padding: 256px 47px 26px 51px !important; } body.home .elementor-element-c3d7822 > img { width: 1414px !important; max-width: 100% !important; height: 186px !important; margin: 0 !important; object-fit: fill !important; } body.home .elementor-element-9de18a6 { padding: 17px 50px 23px 47px !important; } } /* ── "Let's make diamonds" (client QA #10; moved 2026-10-04) ────────────── The button first went under the hero headline. The client asked for it to sit in the block below instead, under the "1:1 SEO content strategy" heading and its paragraph, so the hero is back to its Figma spacing (the rules that pulled the deer and wordmark in around the button are gone). That block is cream, so the button takes the sand fill the other buttons on cream use ("Learn more"). */ body.home .elementor-element-dd05eee > .sh-cta-diamonds { margin-top: 40px !important; background-color: var(--color-sand, #DCC38B) !important; align-self: center !important; } /* ── Envelope (client QA #17: "envelope looks off"; redone 2026-10-05) ──── Figma draws ONE envelope: tilted, with the stag, its ink 449px wide at x=964, starting 108px above the maroon blog band and reaching 234px into it. That is envelope_clean2.png as first built (500px wide, 62px from the right, hanging 251px below the services section), so those values stand and nothing here resizes it. What looked off was a second, flat envelope (.sh-blog-envelope, home_blog_envelope.png) added later to the blog section in the belief that the envelope had never been built; it showed as a darker shape behind the real one. It is hidden. An earlier pass at this item had instead shrunk the real envelope to 457px and lifted it 70px, which moved it away from the design; that rule is gone. */ .sh-blog-envelope { display: none !important; } /* ── Tablet (768-1024, laid out at 1024 and scaled) ─────────────────────── Two faults seen in the 2026-10-04 visual QA; nothing here applies at 1025px and up or on phones. */ @media (min-width: 768px) and (max-width: 1024px) { /* The Services list: the >=1025 rules that open the list with a double rule and space it from the intro do not apply here, so the Etched row sat directly under the "spa day" line with no rule, and its heading ran straight into its description (0px between the two columns). */ body.home .elementor-element-8890028 { padding-bottom: 80px !important; } body.home .elementor-element-0c9b4b4 { border-top: 1px solid #3B1919 !important; padding-top: 26px !important; } body.home .elementor-element-0c9b4b4 > .elementor-element-e85a054 { border-top: 1px solid #3B1919 !important; padding-top: 40px !important; } body.home .elementor-element-0c9b4b4 > .e-flexbox-base > .e-paragraph-base { flex: 0 0 384px !important; width: 384px !important; margin-left: 28px !important; } /* Luggage tag: pinned 190px from the right it hung across the end of the "view all resources" button. Move it clear of the button. */ body.home .elementor-element-9f9419c > img[src*="tag_transparent"] { inset-inline-end: 60px !important; } }