/* ========================================================================== Hass — base stylesheet: reset, design tokens, shared layout, header, footer. Plain CSS only. Mobile-first. Reference frames: desktop 1600, laptop 1338, mobile 393. Never fix pixel widths; use %, flex and grid. ========================================================================== */ /* ---- Design tokens (from Figma) ---- */ :root { --red: #bd3926; --dark: #343538; --beige: #f5e9d9; --black: #080808; --white: #ffffff; /* Option 1 is a dark page: everything below the hero sits on Dark. */ --color-bg: #343538; --color-text: #ffffff; --color-muted: rgba(255, 255, 255, 0.8); --color-border: rgba(255, 255, 255, 0.12); --gallery-bg: #232426; --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-alt: "Inter", system-ui, sans-serif; --font-ar: "Roboto", system-ui, sans-serif; /* Content column is 1200px inside the 1600px frame; header a touch wider. */ --container-max: 1200px; --container-wide: 1456px; --container-pad: clamp(1rem, 5vw, 3rem); --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; /* 36px top offset + 88px logo at the 1600 reference frame. */ --header-h: clamp(80px, 8vw, 124px); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Lenis smooth scroll (assets/js/smooth-scroll.js) toggles these classes on ; scroll-behavior must be auto while Lenis drives the scroll. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth, html.lenis { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; overflow-x: hidden; /* guard against any full-bleed overflow at 393px */ } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); font-weight: 600; line-height: 1.2; } p { margin: 0 0 var(--space-md); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } /* ---- Layout helpers ---- --container-* is the CONTENT width (as measured in Figma), so the gutter is added outside it — otherwise the pad eats into the column and content lands too far in (e.g. the 1456 header would start at x=120 instead of Figma's 72). */ .container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin-inline: auto; padding-inline: var(--container-pad); } .container--wide { max-width: calc(var(--container-wide) + 2 * var(--container-pad)); } .section { padding-block: clamp(3rem, 7vw, 6rem); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Buttons / CTA ---- ONE geometry for every CTA in the design (hero, feature banners, ready CTA): 56 tall, 38/29 padding, 6 gap, Poppins Medium 15.333/17.733 uppercase, 25.14 icon. Variants change colour only. Figma's nominal py-13 would give 46 — the frame's fixed 56 is what's real. */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 29px 0 38px; gap: 6px; font-family: var(--font-body); font-weight: 500; font-size: 15.333px; line-height: 17.733px; letter-spacing: 0; text-transform: uppercase; border: 1px solid var(--red); background: var(--red); color: var(--white); transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease; } .btn:hover { opacity: 0.9; } .btn--outline { background: transparent; color: var(--color-text); } .btn--outline:hover { background: var(--red); color: var(--white); opacity: 1; } /* Outlined in white — for CTAs sitting on dark imagery (hero). */ .btn--light { background: transparent; border-color: var(--white); color: var(--white); } .btn--light:hover { background: var(--red); border-color: var(--red); color: var(--white); opacity: 1; } .btn__icon { width: 18px; height: 18px; flex: none; } /* ========================================================================== Header ========================================================================== */ /* Transparent bar overlaying the dark hero, so all chrome is white. */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; color: var(--white); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: clamp(1rem, 2.25vw, 36px) 0; } /* flex, not inline-flex: an inline-level box adds descender space below the logo, which made the brand 98px tall and pushed the nav row 5px off centre. */ .site-header__logo { display: flex; } .site-header__logo img, .custom-logo { height: clamp(48px, 5.5vw, 88px); width: auto; } .site-title { font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; } /* Right-hand group: menu items → hamburger → language, 60px apart (Figma). */ .site-header__actions { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 60px); } .site-nav__menu { display: flex; align-items: center; gap: 41px; font-weight: 700; font-size: 16px; line-height: 1.108; color: inherit; white-space: nowrap; } .site-nav__menu a:hover { color: var(--red); } .site-header__lang { color: inherit; font-family: var(--font-ar); font-weight: 600; font-size: 16px; line-height: 1.5; } /* Hamburger — always visible (Figma shows it on desktop too). The bars stay at the design's 34x32; the box is padded out to a 44px tap target. */ .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8.5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .nav-toggle span { display: block; height: 1.5px; width: 34px; background: currentColor; border-radius: 255px; transition: transform 0.25s ease, opacity 0.2s ease; } /* ========================================================================== Slide-in menu drawer (opened by the hamburger) ========================================================================== */ .site-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .site-drawer.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s ease; } .site-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .site-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(500px, 88vw); background: var(--dark); border-left: 1px solid rgba(255, 255, 255, 0.06); color: var(--white); /* Top pad puts the first link's centre at y=196 in the 1600x900 frame. */ padding: clamp(4.5rem, 18.4vh, 166px) clamp(1.5rem, 4vw, 61px) 2rem; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .site-drawer.is-open .site-drawer__panel { transform: translateX(0); } /* 33px glyph in the design; padded out to a 44px tap target. */ .site-drawer__close { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--white); cursor: pointer; } .site-drawer__close svg { width: 33px; height: 33px; } .site-drawer__menu { display: flex; flex-direction: column; font-weight: 400; font-size: clamp(1.5rem, 2vw, 32px); line-height: 1.865; letter-spacing: -0.01em; text-transform: capitalize; } .site-drawer__menu a { opacity: 0.6; transition: opacity 0.2s ease; } .site-drawer__menu a:hover, .site-drawer__menu a:focus-visible, .site-drawer__menu .current-menu-item > a { opacity: 1; color: inherit; } /* Lock body scroll while the drawer is open. */ body.is-drawer-open { overflow: hidden; } /* ========================================================================== Footer ========================================================================== */ /* Reference frame 1600x696 (below the Ready CTA): columns at x=120 y=126, newsletter at x=1079, socials at y=467, rule at y=619 (1400 wide, x=100), legal bar at y=649. Text boxes are cap-trimmed in the design, so single-line items use line-height:0.7em (Poppins' cap height) and the gaps land right. */ .site-footer { background: var(--color-bg); color: var(--white); } .site-footer__inner { max-width: calc(1360px + 2 * var(--container-pad)); } .site-footer__bottom-wrap { max-width: calc(1400px + 2 * var(--container-pad)); } .site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 3rem; padding-top: clamp(3rem, 7.875vw, 126px); } .site-footer__cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.5rem 103px; } .footer-col { display: flex; flex-direction: column; gap: 40px; } .footer-col__heading { margin: 0; font-family: var(--font-body); font-size: clamp(1.25rem, 1.5vw, 24px); font-weight: 400; line-height: 0.7em; } .footer-col__links { display: flex; flex-direction: column; gap: 20px; font-family: var(--font-body); font-size: 16px; line-height: 0.7em; } .footer-col__links a:hover { color: var(--red); } .footer-contact__label { margin: 0; text-transform: uppercase; line-height: 0.7em; } /* Newsletter */ .footer-newsletter { flex: 0 1 400px; } /* Single column on small screens, and the mobile design leads with the newsletter: Subscribe -> Quick links -> About Hass -> Contact -> Socials. Reordering here rather than in the markup keeps the desktop DOM order (and so the desktop tab order) exactly as it was. */ @media (max-width: 900px) { .footer-newsletter { order: -1; flex-basis: 100%; } } .newsletter-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 51.273px; padding-inline: 16.343px; border: 1px solid #979797; } .newsletter-form input { flex: 1; min-width: 0; background: none; border: 0; color: var(--white); font-family: var(--font-body); font-size: 16px; } .newsletter-form input::placeholder { color: #979797; } .newsletter-form button { background: none; border: 0; color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 25.138px; height: 25.138px; padding: 0; flex: none; } /* CF7 newsletter variant: the bordered box wraps just the input row (CF7's

), so validation messages sit below it. The email fills the row; the submit is the same 25px arrow button as the plain form (arrow as a background SVG). */ .newsletter-form--cf7 { display: block; height: auto; padding: 0; border: 0; } .newsletter-form--cf7 .wpcf7-form > p { display: flex; align-items: center; gap: 1rem; height: 51.273px; margin: 0; padding-inline: 16.343px; border: 1px solid #979797; } .newsletter-form--cf7 br { display: none; } .newsletter-form--cf7 .wpcf7-form-control-wrap { flex: 1; min-width: 0; } .newsletter-form--cf7 input[type="email"] { width: 100%; background: none; border: 0; padding: 0; color: var(--white); font-family: var(--font-body); font-size: 16px; } .newsletter-form--cf7 input[type="email"]::placeholder { color: #979797; } .newsletter-form--cf7 input[type="email"]:focus { outline: none; } .newsletter-form--cf7 .wpcf7-submit { flex: none; width: 25.138px; height: 25.138px; padding: 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 14L14 4M14 4H6M14 4V12' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 18px 18px; color: transparent; font-size: 0; cursor: pointer; } .newsletter-form--cf7 .wpcf7-spinner { display: none; } .newsletter-form--cf7 .wpcf7-response-output { margin: 10px 0 0; padding: 0; border: 0; font-family: var(--font-body); font-size: 13px; color: var(--white); } /* Socials — its own block under the columns (y=467), not in the newsletter. */ /* Columns run 126..287.6; the socials heading sits at 467, hence 179.4. */ .footer-socials-block { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; padding-top: clamp(2.5rem, 11.2vw, 179.4px); } .footer-socials__heading { margin: 0; font-family: var(--font-body); font-size: clamp(1.125rem, 1.375vw, 22px); font-weight: 400; line-height: 0.7em; } .footer-socials { display: flex; gap: 10px; opacity: 0.8; } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; } .footer-socials a:hover { background: var(--white); color: var(--dark); } .footer-socials svg { width: 16px; height: 16px; fill: currentColor; } /* Footer bottom bar */ .site-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; /* Socials block ends at 562.4; the rule is at 619. */ margin-top: clamp(2rem, 3.54vw, 56.6px); padding-block: 30px 37px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--font-body); font-size: 14px; line-height: 0.7em; opacity: 0.6; } /* The copyright's spacing around the "|" is typed by the editor; HTML would otherwise collapse it (the design has four spaces each side). */ .site-footer__copy { margin: 0; white-space: pre-wrap; } .site-footer__legal { display: flex; gap: 56px; flex-wrap: wrap; } /* Floating WhatsApp */ /* 56px, 88px in from the bottom-right corner of the 1600x900 frame. */ .whatsapp-float { position: fixed; right: clamp(1rem, 5.5vw, 88px); bottom: clamp(1rem, 5.5vw, 88px); z-index: 50; width: 56px; height: 56px; border-radius: 50px; background: #00c361; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .whatsapp-float svg { width: 34px; height: 34px; fill: currentColor; } /* ========================================================================== Reusable components ========================================================================== */ /* Full-bleed feature banner — ONE component, shared by Kitchens and Wardrobes (and reusable on the inner pages: the frames are structurally identical). Reference frame 1600x900: title cap-top y=585, desc y=659 w=486, CTA y=741 h=56, all at x=99.78. Figma offsets Wardrobes' copy to 116.78 — a slip, so both use one offset here. */ .feature-banner { position: relative; /* Width must be explicit: once max-height below clamps the height, the aspect-ratio would otherwise run backwards and shrink the WIDTH to keep 16:9, leaving the "full-bleed" banner short of the viewport edge. */ width: 100%; aspect-ratio: 1600 / 900; min-height: 420px; /* Never taller than the screen — the same rule the heroes use (.section--hero, .page-hero). Without it the 16:9 ratio wins on wide monitors: a 1920-wide viewport makes the banner 1080 tall, so the section overflows the fold and has to be scrolled to be seen whole. Capping lets the background crop horizontally (object-fit: cover) instead. */ max-height: 100svh; overflow: hidden; color: var(--white); } .feature-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Angled scrim: 1063.266 x 731.894, pinned bottom-left, behind the copy. */ .feature-banner__scrim { position: absolute; left: 0; bottom: 0; width: 66.454%; height: 81.321%; opacity: 0.7; background: linear-gradient(219.055deg, rgba(0, 0, 0, 0) 43.316%, rgba(0, 0, 0, 0.81) 81.812%); pointer-events: none; z-index: 1; } /* Copy block spans y=585..797 of 900, so it sits 103 off the bottom. Centred content column (1400.44 = the 1600 frame minus the 99.78 gutters) so the copy stays in the layout on wide screens instead of hugging the viewport edge. */ .feature-banner__inner { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 6.4375vw, 103px); z-index: 2; max-width: calc(1400.44px + 2 * var(--container-pad)); margin-inline: auto; padding-inline: var(--container-pad); } /* The design's one big display title — feature banners AND page heroes. line-height = Inter's cap height reproduces Figma's text-box cap trim, so the box spans cap-top to baseline exactly (single line). */ .feature-banner__title, .page-hero__title { margin: 0; font-family: var(--font-alt); font-weight: 600; font-size: clamp(2.25rem, 4.594vw, 73.507px); letter-spacing: 0.17em; text-transform: uppercase; line-height: 0.727em; color: var(--white); } .feature-banner__desc { max-width: 486px; margin: 16.37px 0 0; font-family: var(--font-alt); font-weight: 400; font-size: 16px; line-height: 20px; } .feature-banner__cta { margin-top: 46.19px; } @media (max-width: 900px) { .feature-banner { aspect-ratio: auto; min-height: 560px; } .feature-banner__desc { margin-top: 1rem; } .feature-banner__cta { margin-top: 1.75rem; } } /* Shared page hero — the 842-tall banner every inner page opens with. Reference frame 1600x842: title cap-top y=720 at x=71.69 (aligned to the header, not the banners' 99.78). Two 354-tall scrims: one under the header, one under the title. */ .page-hero { position: relative; display: flex; align-items: flex-end; /* Every hero on the site is 900px tall, but never taller than the viewport — same rule as the home hero, so the title never lands below the fold on wide or short screens. */ min-height: min(900px, 100svh); overflow: hidden; background: var(--color-bg); } .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .page-hero__scrim { position: absolute; left: 0; width: 100%; height: 42.043%; /* 354 of 842 */ z-index: 1; pointer-events: none; } .page-hero__scrim--top { top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0)); } .page-hero__scrim--bottom { bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62)); } /* Title column: same 1440 content column and bottom padding as the home hero (.hero__inner), so the inner-page hero title sits bottom-left, aligned to the content column on every width instead of hugging the viewport edge. */ .page-hero__inner { position: relative; z-index: 2; max-width: calc(1440px + 2 * var(--container-pad)); padding-top: calc(var(--header-h) + 2rem); padding-bottom: clamp(2rem, 5.8vw, 52px); } @media (max-width: 900px) { .page-hero { min-height: min(720px, 100svh); } } /* ========================================================================== Shared CTA band (home "Ready", listing "Download Brochure") — Option 1. Reference frame 1600x519: copy column 655 wide at x=200, vertically centred; blocks are gap:42 apart measured on CAP-TRIMMED boxes (heading 29 tall, desc 45.53, button 56). Decoration: 298x519 flush to the right edge. ========================================================================== */ .section--ready { position: relative; display: flex; align-items: center; min-height: 519px; background: var(--color-bg); overflow: hidden; /* Full-width hairline separating the CTA from the section above it. The border sits outside the padding box, so it spans the whole viewport width, above the corner decoration. Shared by every page that uses this band. */ border-top: 1px solid rgba(255, 255, 255, 0.12); } /* 298 of 1600, full height, hard right. */ .ready__decoration { position: absolute; top: 0; right: 0; bottom: 0; width: 18.625%; background-repeat: no-repeat; background-position: right center; background-size: 100% 100%; pointer-events: none; } .ready__inner { position: relative; z-index: 1; width: 100%; } .ready__content { display: flex; flex-direction: column; gap: 42px; max-width: 655px; } /* line-height = Poppins' cap height, which trims the box to 29 as in Figma. */ .ready__heading { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.75rem, 2.625vw, 42px); line-height: 0.7em; letter-spacing: -0.04em; color: var(--white); } /* Two lines at 28 = 56; Figma trims that to 45.53, hence the negative block margins — the gap:42 above must land on the trimmed box, not the line box. Width is the 655 column, NOT a fixed box: Figma's text boxes auto-hug their copy (551.41 on Home, 631.87 on the listings), so pinning either one would reflow the other page's text. */ .ready__desc { margin-block: -5.235px; max-width: 655px; font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.125vw, 18px); line-height: 28px; color: var(--white); } .ready__cta { align-self: flex-start; } @media (max-width: 768px) { /* The mobile design keeps this decoration and makes it BIGGER — a broad vertical motif 411 of the 440 frame, sitting behind the copy rather than beside it. Hiding it (as this used to) is what left the band flat and 306 tall against the design's 717. */ .ready__decoration { right: 0; left: 20.36%; /* 89.6 of the 440 frame */ width: auto; background-position: center; opacity: 0.5; /* keeps the copy legible on top */ } .section--ready { /* 717 of the 440 frame; the copy is centred in it, as in the design. */ min-height: 163vw; padding-block: clamp(2.5rem, 8vw, 4rem); } .ready__content { gap: 28px; } /* line-height: 0.7em is a single-line cap-trim — it assumes the heading never wraps. It does here, and the two lines then overlap by ~8px. Give it a real line box back once wrapping is possible. */ .ready__heading { line-height: 1.16; } } /* Centred intro block — shared by the home page and the detail pages. Only the surrounding spacing differs, so that stays in each section's own CSS. */ .intro__heading { margin: 0 auto; max-width: 1600px; font-family: var(--font-body); font-weight: 500; font-size: clamp(1.75rem, 3.125vw, 50px); line-height: normal; letter-spacing: -0.01em; color: var(--white); } .intro__desc { max-width: 968px; margin: clamp(1.5rem, 4.25vw, 68px) auto 0; font-family: var(--font-body); font-weight: 500; font-size: clamp(1rem, 1.25vw, 20px); line-height: normal; color: var(--white); opacity: 0.8; } @media (max-width: 600px) { .intro__heading { font-size: clamp(1.5rem, 7vw, 1.75rem); } } /* About two-column feature row — ONE layout shared by three About sections (The Company, Manufacturing, Driven by Quality); only the image side flips. Reference frame: 87px gap, image 584.34x526.912, text column ~540, heading Poppins Medium 38/50, description 16px at 80% opacity 13 below. */ /* Looser vertical rhythm than the generic .section (About's Figma frames sit ~140-215px apart); About-only, so the home baseline is untouched. */ .about-row { padding-block: clamp(3rem, 9.4vw, 150px); } .about-row__inner { display: flex; align-items: center; gap: clamp(2rem, 5.44vw, 87px); } .about-row--reverse .about-row__inner { flex-direction: row-reverse; } .about-row__text { flex: 1 1 0; max-width: 540px; } .about-row__heading { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: clamp(1.75rem, 2.375vw, 38px); line-height: 1.316; /* 50 / 38 */ letter-spacing: -0.01em; color: var(--white); } .about-row__desc { margin: 13px 0 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--white); opacity: 0.8; } .about-row__media { flex: 0 0 auto; width: min(584.34px, 48.7%); aspect-ratio: 584.34 / 526.912; overflow: hidden; } .about-row__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .about-row__inner, .about-row--reverse .about-row__inner { flex-direction: column; align-items: stretch; } .about-row__text { flex: 1 1 auto; max-width: none; } .about-row__media { width: 100%; } } /* Blog post card — shared by the Media feed grid and the related-news sidebar. The design frames the whole card (369.5x376.6, faint 0.19 white border) with the image inset at the top and the date/title padded inside. Height is fixed in the design (376.6); here it's a min so long titles don't clip. */ .post-card { display: flex; flex-direction: column; min-height: 376.6px; border: 1px solid rgba(255, 255, 255, 0.19); } .post-card__media { display: block; aspect-ratio: 367.5 / 223.6; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.19); background: rgba(255, 255, 255, 0.04); } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .post-card:hover .post-card__media img { transform: scale(1.05); } /* date sits 18 below the image, title 29.6 below the image top of its block. */ .post-card__date { margin: 18px 0 0; padding-inline: 22.96px; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--white); opacity: 0.8; } .post-card__title { margin: 9.6px 0 22px; padding-inline: 22.96px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 24px; color: var(--white); opacity: 0.8; } .post-card__title a:hover { color: var(--red); opacity: 1; } /* Related-news variant: a horizontal card (image left, text right), no frame. */ .post-card--related { flex-direction: row; gap: 16px; align-items: center; min-height: 0; border: 0; } .post-card--related .post-card__media { flex: 0 0 45%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.19); } .post-card--related .post-card__date { margin-top: 0; padding-inline: 0; } .post-card--related .post-card__title { margin: 8px 0 0; padding-inline: 0; font-size: 16px; line-height: 22px; } /* ========================================================================== Scroll-reveal — one subtle system, applied by assets/js/reveal.js. Elements fade in and rise 20px as they enter the viewport, once. The list below is the single source of truth for WHAT reveals; reveal.js observes the same selectors. Only active with JS (.has-js) and without reduced-motion, so content is always visible if either is missing. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .has-js .intro__heading, .has-js .intro__desc, .has-js .section--stats .stat, .has-js .feature-banner__inner, .has-js .section--collage .collage, .has-js .section--collage .finishes, .has-js .openings__body, .has-js .openings__media, .has-js .awards__heading, .has-js .awards__grid .award, .has-js .about-row__text, .has-js .about-row__media, .has-js .about-vision__text, .has-js .about-vision__collage, .has-js .about-awards__heading, .has-js .about-awards__grid .about-award, .has-js .ready__content, .has-js .feed__grid .post-card, .has-js .listing__grid .card, .has-js .article__main, .has-js .article__aside, .has-js .contact__intro, .has-js .contact__card, .has-js .book-form { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; } /* Doubled class bumps specificity to (0,3,0) so it beats the 3-class hiding selectors above (e.g. .has-js .section--stats .stat) by source order. */ .has-js .is-revealed.is-revealed { opacity: 1; transform: none; } } /* Subtle image zoom on hover, across the content sections below the hero. Only on real hover devices and when motion is allowed. The image containers already clip (overflow:hidden), so the scale reads as a slow push-in. Card media (.card/.post-card) has its own rule with the same feel. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .stat__image img, .feature-banner__bg, .collage__item img, .openings__image img, .gallery__item img, .about-row__media img, .about-vision__photo { transition: transform 0.6s ease; } .stat__image:hover img, .feature-banner:hover .feature-banner__bg, .collage__item:hover img, .openings__image:hover img, .gallery__item:hover img, .about-row__media:hover img, .about-vision__collage:hover .about-vision__photo { transform: scale(1.05); } } /* ========================================================================== Breakpoints ========================================================================== */ /* Tablet / mobile: hide the inline menu — the hamburger + drawer take over. */ @media (max-width: 900px) { .site-nav__menu { display: none; } } /* Mobile: stack footer bottom bar. */ @media (max-width: 600px) { .site-footer__bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Shared CF7 form — the dark field look, the Interested-In toggle, and the red submit. Used by any page that wraps a CF7 form in .book-form (Book Free Design + For Professionals enquiry). Fields 51.273 tall, #919191 border. ========================================================================== */ .book-form { max-width: 686px; margin-inline: auto; } .book-form .wpcf7-form { display: flex; flex-direction: column; /* Uniform 25px between every group (the name/phone row is its own group), so the gap is consistent whatever way CF7 wraps the fields into

/

. */ gap: 25px; } .book-form .wpcf7-form > p { margin: 0; display: flex; flex-direction: column; gap: 25px; } .book-form br { display: none; } /* Name + phone on one row. CF7 may wrap the two fields in a

inside the row, so flex that

too — works whether the spans are direct children or nested. */ .book-form .book-row, .book-form .book-row > p { display: flex; gap: 24.5px; margin: 0; } .book-form .book-row > p { flex: 1; } .book-form .book-row .wpcf7-form-control-wrap { flex: 1; min-width: 0; } .book-form .wpcf7-form-control-wrap { display: block; } .book-form input[type="text"], .book-form input[type="tel"], .book-form input[type="email"], .book-form input[type="date"], .book-form select, .book-form textarea { width: 100%; height: 51.273px; border: 1px solid #919191; padding: 12.258px 16.343px; background: transparent; color: var(--white); font-family: var(--font-body); font-size: 16px; line-height: normal; border-radius: 0; appearance: none; } .book-form textarea { height: 126px; resize: vertical; } .book-form input::placeholder, .book-form textarea::placeholder { color: #919191; } .book-form input:focus, .book-form select:focus, .book-form textarea:focus { outline: none; border-color: var(--white); } .book-form input[type="date"] { color: #919191; } .book-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } .book-form input[type="date"]:valid { color: var(--white); } .book-form .book-interest__label { display: block; /* No extra margin — the flex gap already spaces it 25px from the toggle, matching every other field gap. */ margin-bottom: 0; font-family: var(--font-body); font-weight: 500; font-size: 14.301px; line-height: 20.429px; color: var(--white); } .book-form .wpcf7-radio { display: flex; gap: 16px; } .book-form .wpcf7-list-item { position: relative; flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; height: 47px; border: 1px solid #919191; transition: border-color 0.2s ease; } .book-form .wpcf7-list-item input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .book-form .wpcf7-list-item-label { font-family: var(--font-body); font-size: 16px; line-height: 1; color: #919191; pointer-events: none; transition: color 0.2s ease; } .book-form .wpcf7-list-item:hover, .book-form .wpcf7-list-item:has(input:checked) { border-color: var(--white); } .book-form .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label { color: var(--white); font-weight: 500; } .book-form .wpcf7-submit { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; height: 56px; padding: 0 60px 0 38px; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 14L14 4M14 4H6M14 4V12' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 29px center; border: 0; color: var(--white); font-family: var(--font-body); font-weight: 500; font-size: 15.333px; line-height: 17.733px; text-transform: uppercase; cursor: pointer; border-radius: 0; transition: opacity 0.2s ease; } .book-form .wpcf7-submit:hover { opacity: 0.9; } .book-form .wpcf7-response-output { margin: 8px 0 0; padding: 10px 14px; font-size: 14px; color: var(--white); } .book-form .wpcf7-not-valid-tip { color: #ffb4a8; font-size: 13px; } @media (max-width: 600px) { .book-form .book-row { flex-direction: column; gap: 25px; } .book-form .wpcf7-radio { flex-wrap: wrap; } }