/* ========================================================================== Better Build - custom site CSS Performance fixes, accordions, smooth scroll, scroll animations, page transitions and the blog article template. Loaded after the Webflow stylesheets on every page, paired with js/better-build-custom.js. ========================================================================== */ /* ---------- Layout stability ---------- */ /* Images carry width/height attributes; this keeps their ratio wherever the Webflow classes only set a width. Classes that set a height still win. */ img { height: auto; } .tech-text-time, .efficient-number { font-variant-numeric: tabular-nums; } /* The skewed accent shape beside the LGSF image pokes 13px past the screen on phones and made the whole page scroll sideways. Clip keeps it visible inside the section without creating a scroll container. */ .new-way-section { overflow-x: clip; } /* ---------- Lighter background images on phones ---------- */ @media (max-width: 767px) { .hero-section { background-image: linear-gradient(#0000009e, #6660), url('../images/betterbuild-hero-image-p-1080.avif'); } .contact-hero { background-image: url('../images/bluecontactheroimage-p-1080.avif'); } .cta-section { background-image: linear-gradient(0deg, var(--colors--dark), #161616b3 40%, #16161600 66%, #16161600), url('../images/contactvbg-p-1080.avif'); } } /* ---------- FAQ and specification accordions ---------- */ /* Driven by .is-open (see initAccordions in the JS) instead of a Webflow interaction, so every accordion behaves the same and CMS-rendered lists work without webflow.js. Put .is-open in the HTML for items that start open. */ .faq-head { cursor: pointer; } .faq-head:focus-visible { outline: 2px solid var(--colors--brand); outline-offset: 6px; border-radius: 2px; } .faq-body { display: grid; grid-template-rows: 0fr; height: auto !important; transition: grid-template-rows .55s cubic-bezier(.33, 1, .68, 1); } .faq-body > * { min-height: 0; overflow: hidden; } .faq-body-inner { padding: 0; margin: 0; } .faq-wrapper.is-open .faq-body { grid-template-rows: 1fr; } .faq-plus-wrapper { transition: transform .5s cubic-bezier(.33, 1, .68, 1); } .faq-plus-line { transition: transform .5s cubic-bezier(.33, 1, .68, 1); } .faq-plus-line._2 { transform: rotate(0deg) !important; } .faq-wrapper.is-open .faq-plus-wrapper { transform: rotate(180deg); } .faq-wrapper.is-open .faq-plus-line._2 { transform: rotate(90deg) !important; } /* ---------- Lenis smooth scroll ---------- */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- Hero intro ---------- */ /* html.bb-motion is set in only when motion is allowed, and removed by the script (or by a 3.5s safety timeout), so content is never lost. Keep this list in sync with HERO in better-build-custom.js. */ html.bb-motion :is( .hero-wrapper > .main-h1, .hero-p-wrapper, .about-hero .main-h1, .about-hero .main-paragraph, .about-hero .image-3, .houses-hero .main-h1, .houses-hero .houses-label, .houses-hero .house-hero-p, .technology-hero .tech-box-1 > *, .technology-hero .tech-box-2, .blogs-hero .label-wrapper, .blogs-hero .main-h1, .contact-hero .contact-h1-wrapper, .contact-hero .contact-main-row, .contact-hero .whatsapp-wrapper, .contact-hero .w-form, .house-details-hero-row > *, .blog-details-hero .breadcrumbs, .blog-details-hero .label-wrapper, .blog-details-hero .main-h1, .blog-details-hero .blog-details-lede, .blog-details-hero .blog-details-image ) { opacity: 0; } /* Line masks created by SplitText - a little room so descenders are not clipped */ .bb-mask-line-mask { padding-bottom: .12em; margin-bottom: -.12em; } /* Footer wordmark rises out of its own box */ .big-logo-wrapper { overflow: hidden; } /* ---------- Page transitions ---------- */ /* One dark curtain, pure CSS. Leaving: the script adds html.bb-leaving and navigates when the curtain has risen. Arriving: html.bb-enter (set in ) draws the curtain on the first paint and it slides away straight away - nothing waits for scripts or the CDN. */ .bb-curtain, html.bb-enter body::before { position: fixed; inset: 0; z-index: 10001; pointer-events: none; background-color: var(--colors--dark, #050f15); } .bb-curtain { transform: translateY(100%); box-shadow: inset 0 3px 0 var(--colors--brand, #1988ff); } html.bb-leaving .bb-curtain { transform: translateY(0); pointer-events: auto; transition: transform .46s cubic-bezier(.76, 0, .24, 1); } html.bb-enter body::before { content: ""; box-shadow: inset 0 -3px 0 var(--colors--brand, #1988ff); animation: bb-curtain-out .55s cubic-bezier(.76, 0, .24, 1) .05s both; } @keyframes bb-curtain-out { from { transform: translateY(0); } to { transform: translateY(-100%); } } /* ---------- Blog article template (blog-details-template.html) ---------- */ .blog-details-hero { padding-top: 10rem; } .breadcrumbs-list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.4; color: var(--colors--dark-65); } .breadcrumbs-list li { display: flex; align-items: center; gap: .5rem; } .breadcrumbs-list li + li::before { content: "ยท"; } .breadcrumb-link { color: inherit; text-decoration: none; transition: color .2s ease; } .breadcrumb-link:hover { color: var(--colors--dark); } .breadcrumb-current { color: var(--colors--dark); } .blog-details-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 2rem 4rem; margin-top: 3.5rem; } .blog-details-title-box { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .main-h1.blog-details-h1 { max-width: 16ch; font-size: 3.25rem; font-weight: 500; letter-spacing: -1.2px; text-wrap: balance; } .blog-details-lede { justify-self: end; max-width: 26rem; margin: 0; color: var(--colors--dark-65); font-size: .9375rem; line-height: 1.55; } .blog-details-image { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 4px; margin-top: 2.5rem; } .blog-article-section { padding-top: 5rem; padding-bottom: 2rem; } /* Rich text from the CMS editor: style tags, not classes, so whatever the admin panel outputs (h2, h3, p, lists, quotes, figures, tables) looks right. */ .blog-rich-text { max-width: 36rem; margin-left: auto; margin-right: auto; color: var(--colors--dark-75); font-size: 1rem; line-height: 1.65; letter-spacing: -.1px; } .blog-rich-text > :first-child { margin-top: 0; } .blog-rich-text h2 { margin: 2.75rem 0 .75rem; color: var(--colors--dark); font-size: 1.5rem; font-weight: 500; line-height: 1.25; letter-spacing: -.4px; } .blog-rich-text h3 { margin: 2rem 0 .5rem; color: var(--colors--dark); font-size: 1.2rem; font-weight: 500; line-height: 1.3; } .blog-rich-text p { margin: 0 0 1rem; } .blog-rich-text ul, .blog-rich-text ol { margin: 0 0 1.25rem; padding-left: 1.25rem; } .blog-rich-text li { margin-bottom: .4rem; } .blog-rich-text a { color: var(--colors--brand); text-underline-offset: 2px; } .blog-rich-text strong { color: var(--colors--dark); font-weight: 500; } .blog-rich-text blockquote { margin: 2rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid var(--colors--brand); color: var(--colors--dark); font-size: 1.125rem; line-height: 1.5; } .blog-rich-text figure { margin: 2.5rem 0; } .blog-rich-text figure img, .blog-rich-text > img { display: block; width: 100%; border-radius: 4px; } .blog-rich-text figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--colors--dark-65); } .blog-rich-text table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .9375rem; } .blog-rich-text th, .blog-rich-text td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #16161614; } @media (max-width: 991px) { .blog-details-head { grid-template-columns: 1fr; } .blog-details-lede { justify-self: start; } .main-h1.blog-details-h1 { font-size: 2.75rem; } } @media (max-width: 767px) { .blog-details-hero { padding-top: 7.5rem; } .main-h1.blog-details-h1 { font-size: 2.2rem; } .blog-details-image { aspect-ratio: 4 / 3; } .blog-article-section { padding-top: 3rem; } } @media (prefers-reduced-motion: reduce) { .faq-body, .faq-plus-wrapper, .faq-plus-line { transition: none; } } /* ---------- House detail page (project-details-template.html) on smaller screens ---------- The Webflow layout only defines desktop grids for these blocks, so on phones the five fact boxes, the specification and the floor plan ran off the screen. */ @media (max-width: 991px) { .house-small-info-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); } .included-main-layout { grid-template-columns: minmax(0, 1fr); grid-row-gap: 2.5rem; } .medium-container { padding-left: 32px; padding-right: 32px; } .layout-wrapper { grid-template-columns: minmax(0, 1fr); grid-row-gap: 2.5rem; padding-top: 3rem; padding-bottom: 3rem; } .layout-image { height: auto; object-fit: contain; } .house-details-hero-price { font-size: 2.25rem; } } @media (max-width: 767px) { .house-details-overlay { padding-bottom: 32px; } .house-details-hero-row { flex-direction: column; align-items: flex-start; gap: 14px; } .house-details-hero-price-wrapper { gap: 4px; } .house-details-hero-price { font-size: 2rem; } .house-small-info-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 10px; grid-row-gap: 10px; } .house-small-info-layout-box { padding: 16px; } .house-small-info-layout-box:last-child { grid-column: 1 / -1; } .house-small-info-layout-icon { width: 2.25rem; height: 2.25rem; margin-bottom: .75rem; } .included-main-paragraph { font-size: 1.0625rem; } .included-inner-row-box { grid-template-columns: minmax(0, 1fr); grid-row-gap: 0; } .included-row._2 { grid-template-columns: minmax(0, 1fr); grid-row-gap: 4px; } .faq-wrapper._2 { padding: 18px; } .padding-global._100 { padding-top: 3.5rem; } .medium-container { padding-left: 16px; padding-right: 16px; } .layout-wrapper { padding-top: 2rem; padding-bottom: 2rem; } }