.elementor-kit-327{--e-global-color-primary:#333132;--e-global-color-secondary:#D3C67A;--e-global-color-text:#333132;--e-global-color-accent:#4D4829;--e-global-color-2d42ff8:#CECCBE;--e-global-color-652868d:#FFFFFF;--e-global-color-f3e5898:#02010100;--e-global-typography-primary-font-family:"Grifo L";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Encode Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Encode Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Encode Sans";--e-global-typography-accent-font-weight:400;background-color:var( --e-global-color-2d42ff8 );color:var( --e-global-color-text );font-family:"Encode Sans", Sans-serif;font-size:16px;font-weight:400;line-height:150%;letter-spacing:1.5%;}.elementor-kit-327 button,.elementor-kit-327 input[type="button"],.elementor-kit-327 input[type="submit"],.elementor-kit-327 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Encode Sans", Sans-serif;font-size:20px;font-weight:400;line-height:100%;letter-spacing:0px;color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:9px 40px 11px 40px;}.elementor-kit-327 button:hover,.elementor-kit-327 button:focus,.elementor-kit-327 input[type="button"]:hover,.elementor-kit-327 input[type="button"]:focus,.elementor-kit-327 input[type="submit"]:hover,.elementor-kit-327 input[type="submit"]:focus,.elementor-kit-327 .elementor-button:hover,.elementor-kit-327 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-accent );}.elementor-kit-327 e-page-transition{background-color:#FFBC7D;}.elementor-kit-327 a{color:var( --e-global-color-accent );font-weight:400;}.elementor-kit-327 h1{font-family:"Grifo L", Sans-serif;font-size:100px;font-weight:400;text-transform:uppercase;line-height:90px;letter-spacing:-3%;}.elementor-kit-327 h2{font-family:"Grifo L", Sans-serif;font-size:80px;font-weight:400;text-transform:uppercase;line-height:80px;letter-spacing:-3%;}.elementor-kit-327 h3{font-family:"Grifo L", Sans-serif;font-size:36px;font-weight:400;line-height:110%;letter-spacing:-3%;}.elementor-kit-327 h4{font-family:"Grifo L", Sans-serif;font-size:28px;font-weight:400;line-height:100%;letter-spacing:-3%;}.elementor-kit-327 h5{font-family:"Encode Sans", Sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;line-height:140%;letter-spacing:10%;}.elementor-kit-327 label{color:var( --e-global-color-accent );font-family:"Grifo L", Sans-serif;font-size:16px;font-weight:400;line-height:100%;letter-spacing:-3%;}.elementor-kit-327 input:not([type="button"]):not([type="submit"]),.elementor-kit-327 textarea,.elementor-kit-327 .elementor-field-textual{font-family:"Grifo L", Sans-serif;font-size:20px;font-weight:400;line-height:100%;letter-spacing:-3%;color:var( --e-global-color-accent );accent-color:var( --e-global-color-f3e5898 );background-color:var( --e-global-color-f3e5898 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:20px 20px 20px 20px;padding:10px 20px 10px 20px;}.elementor-kit-327 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-327 textarea:focus,.elementor-kit-327 .elementor-field-textual:focus{color:var( --e-global-color-accent );accent-color:var( --e-global-color-f3e5898 );background-color:var( --e-global-color-f3e5898 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-327 h1{font-size:60px;line-height:90%;}.elementor-kit-327 h2{font-size:50px;line-height:90%;}.elementor-kit-327 button,.elementor-kit-327 input[type="button"],.elementor-kit-327 input[type="submit"],.elementor-kit-327 .elementor-button{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-327{font-size:14px;}.elementor-kit-327 h1{font-size:36px;}.elementor-kit-327 h2{font-size:24px;line-height:120%;}.elementor-kit-327 h3{font-size:24px;}.elementor-kit-327 h4{font-size:20px;}.elementor-kit-327 h5{font-size:14px;}.elementor-kit-327 button,.elementor-kit-327 input[type="button"],.elementor-kit-327 input[type="submit"],.elementor-kit-327 .elementor-button{font-size:15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Harvest_Gold:#D3C67A; --Stone_Husk:#CECCBE; --Olivewood:#4D4829; --White:#FFFFFF; --Transparent:#02010100; --Harvest_Gold_1:#D3C67A; --Forge_Slate:#333132; --Text:#333132; --Olivewood_1:#4D4829; --Stone_Husk_1:#CECCBE; --White_1:#FFFFFF; --Transparent_1:#02010100; } /* Start custom CSS *//* ========================================== Mobile Accordion Typography ========================================== */ @media (max-width: 767px) { html body .e-n-accordion-item-title-text { font-size: 20px !important; line-height: 1.2 !important; } html body .e-n-accordion-item .elementor-widget-text-editor p, html body .e-n-accordion-item .elementor-widget-text-editor li { font-size: 14px !important; line-height: 21px !important; } html body .e-n-accordion-item .elementor-widget-text-editor li > p { margin-bottom: 0 !important; } html body .e-n-accordion-item .elementor-widget-text-editor li { margin-bottom: 6px !important; } html body [data-id="cd76fc3"] { padding-left: 20px !important; padding-right: 20px !important; } html body [data-id="c3e310e"], html body [data-id="c3e310e"] .elementor-icon-list-text { text-wrap: pretty; } } /* CP-QA-AUG26:START */ /* Interiors sub-footer: "Homes arranged just so" was orphaning "so" onto its own line. pretty targets the orphan; balance was tried on the live ad page first and only moved the short line to the top. */ html body [data-id="c3e310e"], html body [data-id="c3e310e"] .elementor-icon-list-text { text-wrap: pretty; } /* CP-QA-AUG26:END */ /* CP-TICKETS-AUG28:START */ /* ---------- CP-98 Interiors: mobile hotspot callouts ---------- Asked for: max-width 150px, 12px left/right padding, mobile p_sm (12px/140%), 12px radius. Vertical padding is left at 16px because only left/right was asked for. Was 280px wide, 16px/20px padding, 14px/21px, 18px radius. */ @media (max-width: 767px) { html body .render-scroll-scene .hotspot-content { max-width: 150px !important; padding-left: 12px !important; padding-right: 12px !important; font-size: 12px !important; line-height: 1.4 !important; border-radius: 12px !important; } } /* ---------- CP-99 Interiors: one scroll prompt instead of two ---------- The "Drag to Explore" band under the image duplicated the in-image SCROLL cue and is not in the mock, so it goes. The SCROLL cue moves from the top of the image to the bottom, over the gradient, as designed. The gradient now fades out with the cue once the user has dragged, so it cannot leave a stray dark band part-way through the image. */ @media (max-width: 767px) { html body .elementor-element-6b939cd { display: none !important; } html body.page-id-413 .render-scroll-sticky::before { top: auto !important; bottom: 14px !important; } html body.page-id-413 .render-scroll-sticky::after { inset: auto auto 0 0 !important; height: 96px !important; background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)) !important; transition: opacity .3s ease !important; } html body.page-id-413 .render-scroll-section.has-manual-scrolled .render-scroll-sticky::after { opacity: 0 !important; } } /* ---------- CP-100 menu sits above the sticky Register Now CTA ---------- Offcanvas panel was z-index 1000 against the CTA's 999999. Only the menu is raised; the CTA is left exactly as built. */ html body #ekit-megamenu-main-menu.elementskit-menu-offcanvas-elements { z-index: 1000000 !important; } /* ---------- CP-101 close icon must not jump ---------- Hamburger sits 20px from the right at every width, centre y 38.5 on phones and 60 on tablet. The close button carried an extra 12px margin, leaving it 12px to the left everywhere, 7.5px low on phones and 14px high on tablet. */ @media (max-width: 1024px) { html body button.elementskit-menu-close.elementskit-menu-toggler { margin: 0 !important; right: 20px !important; top: 24.5px !important; } } @media (min-width: 768px) and (max-width: 1024px) { html body button.elementskit-menu-close.elementskit-menu-toggler { top: 46px !important; } } /* ---------- CP-102 Design: LIVE SLOW floats right ---------- The wordmark was pinned left, which on phones put it underneath the first book cover. Moved to the right edge per the mock, with room reserved at the widths where the columns would otherwise reach it (768 and ~1200 had only 40px of slack). */ html body [data-id="d62dfe7"] { left: auto !important; right: 20px !important; } @media (min-width: 768px) { html body [data-id="76c31f5"] { padding-right: 80px !important; } } @media (max-width: 767px) { html body [data-id="76c31f5"] { padding-right: 55px !important; } } /* ---------- CP-103 Design: top-align the two book labels ---------- The two covers render at different heights (254 vs 260 at 1440) because they have different source ratios, which pushed the right "( Our Book Recommendation )" line below the left one. Both boxes now share one ratio and letterbox rather than stretch, so the lines stay aligned whatever art is dropped in later. */ html body [data-id="0fd523e"], html body [data-id="a442844"] { aspect-ratio: 4 / 5 !important; height: auto !important; object-fit: contain !important; object-position: left bottom !important; } /* ---------- CP-104 home: optically centre the play triangle ---------- The triangle is a CSS border shape. Its bounding box is centred by flex, but a right-pointing triangle carries its visual mass to the left of that box. */ html body .hero-video-toggle.is-paused span:first-child { transform: translateX(2px) !important; } /* CP-TICKETS-AUG28:END */ /* CP-DEV-NUMBERS-AUG28:START */ /* ---------- Developer page: large number callouts ---------- Source: Figma desktop/developer artboard (1:1504, 1760 wide). Grifo 80px, letter-spacing -2.4, #333132. Offsets are taken from each numeral to its own sketch, which is how the artboard is built: 01 sketch.x - 29, sketch.y + 26 02 sketch.x - 38, sketch.y + 46 03 sketch.x - 65, sketch.y - 90 (sits fully above the sketch) The mobile artboard has no large numerals, so this is 768px up, which is also where this two column layout starts. Two layout facts this has to track: - Sketches 1 and 3 sit flush with the page gutter, which is max(20px, (100vw - 1600px) / 2). Below roughly 1660px there is not enough gutter for the full -29 / -65 offset, so it is clamped to keep the numeral 8px inside the viewport. From 1760px up it lands exactly on the Figma offset. Nothing is lost visually below that because the left edge of both sketches is blank paper. - Sketch 2 is right aligned inside its container and caps at 1011px wide, so its left edge is max(100% - 1011px, 5%). The numeral tracks that, which keeps it against the sketch at every width rather than stranded out at the gutter, which is what it was doing before. Offsets are in em so they scale with the numeral down to tablet. */ @media (min-width: 768px) { html body.page-id-405 [data-id="ace3e2e"]::before, html body.page-id-405 [data-id="cba38a5"]::before, html body.page-id-405 [data-id="509e690"]::before { position: absolute; z-index: 2; pointer-events: none; font-family: "Grifo L", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.12; letter-spacing: -0.03em; color: #333132; } html body.page-id-405 [data-id="ace3e2e"]::before { content: "01"; top: 0.325em; left: max(-0.3625em, calc(8px - max(20px, (100vw - 1600px) / 2))); } html body.page-id-405 [data-id="cba38a5"]::before { content: "02"; top: 0.575em; left: calc(max(100% - 1011px, 5%) - 0.475em); } html body.page-id-405 [data-id="509e690"]::before { content: "03"; top: calc(60px - 1.125em); left: max(-0.8125em, calc(8px - max(20px, (100vw - 1600px) / 2))); } } /* CP-DEV-NUMBERS-AUG28:END */ /* CP-TILE-LEGIBILITY-SEP09:START */ /* ---------- homepage CTA tiles: line gap sits on the image edge ---------- Rachell, 09 Sep. The headline stays over the photo, with the space between its two lines landing on the top edge of the image, so line 1 reads on the flat background and line 2 on the photograph. Anchored one line-height below the card top, in em, rather than offset by a fixed number, so the relationship holds at every breakpoint and would survive a change of type size or a rewrap. */ html body [data-id="efb8e6b"], html body [data-id="30187d6"] { top: auto !important; bottom: calc(100% - 1.1em) !important; margin-top: 0 !important; } /* CP-TILE-LEGIBILITY-SEP09:END */ /* CP-INTERIORS-CAROUSEL-SAFARI-OCT1:START */ /* ---------- /interiors/ carousel: correct slide height in Safari ---------- The designer puts aspect-ratio 1.304 on the SLIDE and height:100% on the img. Inside Swiper's flex row, WebKit sizes an aspect-ratio slide from its content's intrinsic size, measuring the img at its natural width (1512px): 1512 / 1.304 = 1159.5px, so every slide locked at ~1160px tall. Releasing the slide's min-height does not help (tested); moving the ratio from the slide onto the img does, in WebKit and Chromium alike, and Chrome draws exactly the same pixels as before (511x392 at 1512, 270x207 at 390). */ html body [data-id="9b1f6ce"] .e-n-carousel .swiper-slide { aspect-ratio: auto !important; } html body [data-id="9b1f6ce"] .e-n-carousel .swiper-slide img { height: auto !important; aspect-ratio: 1.304 / 1 !important; object-fit: cover !important; } /* CP-INTERIORS-CAROUSEL-SAFARI-OCT1:END */ /* CP-CUSTOMIZER-CSS-OCT2:START */ /* Mirror of staging's Customizer > Additional CSS (hello-elementor), not carried over in the 2 Oct launch. Text-link underline animation; also keeps the mobile menu links centred. */ body { overflow-x: hidden !important; } /* ========================================== Global Link Underline Animation Text links only ========================================== */ a:not(.elementor-button):not(.wp-element-button):not(.button):not(.btn):not(.elementor-icon):not(.elementor-social-icon):not(:has(img)):not(.no-underline-flow a) { position: relative; display: inline-block; text-decoration: none !important; } a:not(.elementor-button):not(.wp-element-button):not(.button):not(.btn):not(.elementor-icon):not(.elementor-social-icon):not(:has(img)):not(.no-underline-flow a)::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #4D4829; transition: width .35s ease; pointer-events: none; will-change: width; } a:not(.elementor-button):not(.wp-element-button):not(.button):not(.btn):not(.elementor-icon):not(.elementor-social-icon):not(:has(img)):not(.no-underline-flow a):hover::after, a:not(.elementor-button):not(.wp-element-button):not(.button):not(.btn):not(.elementor-icon):not(.elementor-social-icon):not(:has(img)):not(.no-underline-flow a):focus-visible::after { width: 100%; } /* White Underline Flow */ .white-underline-flow a::after { background: #fff !important; } /* ========================================== Disable Underline Inside Wrapper Add class: no-link-underline ========================================== */ .no-link-underline a::after { display: none !important; content: none !important; } .no-link-underline a { text-decoration: none !important; } /* ========================================== Exclude SVG Logo from underline animation ========================================== */ a.e-svg-base::after { display: none !important; content: none !important; } a.e-svg-base { text-decoration: none !important; } /* CP-CUSTOMIZER-CSS-OCT2:END */ /* CP-RECAPTCHA-OCT3:START */ /* Floating badge hidden; Google's notice is shown under each Spark form instead. visibility (not display:none) so reCAPTCHA v3 keeps scoring submissions. */ .grecaptcha-badge { visibility: hidden !important; } .section-registration .cp-recaptcha-note, .cp-recaptcha-note { margin: 14px 0 0 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; opacity: .85; } .cp-recaptcha-note a { color: inherit !important; display: inline !important; text-decoration: underline !important; } .cp-recaptcha-note a::after { content: none !important; display: none !important; } /* CP-RECAPTCHA-OCT3:END *//* End custom CSS */