.elementor-kit-7{--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-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .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-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-accent );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-accent );font-weight:400;}.elementor-kit-7 h1{font-family:"Grifo L", Sans-serif;font-size:100px;font-weight:400;text-transform:uppercase;line-height:90px;letter-spacing:-3%;}.elementor-kit-7 h2{font-family:"Grifo L", Sans-serif;font-size:80px;font-weight:400;text-transform:uppercase;line-height:80px;letter-spacing:-3%;}.elementor-kit-7 h3{font-family:"Grifo L", Sans-serif;font-size:36px;font-weight:400;line-height:110%;letter-spacing:-3%;}.elementor-kit-7 h4{font-family:"Grifo L", Sans-serif;font-size:28px;font-weight:400;line-height:100%;letter-spacing:-3%;}.elementor-kit-7 h5{font-family:"Encode Sans", Sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;line-height:140%;letter-spacing:10%;}.elementor-kit-7 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-7 input:not([type="button"]):not([type="submit"]),.elementor-kit-7 textarea,.elementor-kit-7 .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-7 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-7 textarea:focus,.elementor-kit-7 .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-7 h1{font-size:60px;line-height:90%;}.elementor-kit-7 h2{font-size:50px;line-height:90%;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .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-7{font-size:14px;}.elementor-kit-7 h1{font-size:36px;}.elementor-kit-7 h2{font-size:24px;line-height:120%;}.elementor-kit-7 h3{font-size:24px;}.elementor-kit-7 h4{font-size:20px;}.elementor-kit-7 h5{font-size:14px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .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; --Forge_Slate:#333132; --Text:#333132; --Olivewood:#4D4829; --Stone_Husk:#CECCBE; --White:#FFFFFF; --Transparent:#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-17 .render-scroll-sticky::before { top: auto !important; bottom: 14px !important; } html body.page-id-17 .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-17 .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: 195 / 254 !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-934 [data-id="ace3e2e"]::before, html body.page-id-934 [data-id="cba38a5"]::before, html body.page-id-934 [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-934 [data-id="ace3e2e"]::before { content: "01"; top: 0.325em; left: max(-0.3625em, calc(8px - max(20px, (100vw - 1600px) / 2))); } html body.page-id-934 [data-id="cba38a5"]::before { content: "02"; top: 0.575em; left: calc(max(100% - 1011px, 5%) - 0.475em); } html body.page-id-934 [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 *//* End custom CSS */