/* ========================================================================== UbuntuBLD Building Construction — components Red (#E03C31) + Black (#111111) design system, transferred from reference ========================================================================== */ /* ========================================================================== Guide byline + summary answer The byline states who wrote the guide and when it was last reviewed; the summary answers the guide's question directly before the article begins. ========================================================================== */ .article-byline { margin-bottom: var(--space-3); color: var(--color-text-body-light); font-size: var(--text-xs); letter-spacing: 0.02em; } .article-summary { margin-bottom: var(--space-5); padding-left: var(--space-4); border-left: 3px solid var(--color-red); font-size: 1.05rem; font-weight: 500; line-height: 1.65; } /* ========================================================================== Inline text links The global reset strips link styling (base.css: a { color: inherit }), which suits nav items and cards but leaves links inside body copy invisible. Prose links carry .text-link: underlined in the inherited text colour so contrast is unaffected, brand red on hover and focus. ========================================================================== */ .text-link { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .text-link:hover, .text-link:focus-visible { color: var(--color-red); } /* ========================================================================== TopUtilityBar ========================================================================== */ .top-bar { background: var(--color-white); color: var(--color-text-body); font-size: var(--text-xs); border-bottom: 1px solid var(--color-border-light); } .top-bar__inner { width: min(100% - (var(--page-gutter) * 2), var(--container-content)); margin-inline: auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); height: 40px; } .top-bar__divider { width: 1px; height: 14px; background: var(--color-border-light); } .top-bar__address { display: none; align-items: center; gap: 6px; margin: 0; margin-right: auto; } .top-bar__links { display: flex; align-items: center; gap: var(--space-5); } /* Only the tel/mail glyphs directly inside the link row go red. The social icons live one level deeper (.top-bar__social > a), so excluding them here keeps them white on their red circle instead of red-on-red. */ .top-bar__address .icon, .top-bar__links > a > .icon { width: 14px; height: 14px; color: var(--color-red); flex-shrink: 0; } .top-bar__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-body); font-weight: 600; } .top-bar__links a:hover, .top-bar__links a:focus-visible { color: var(--color-red); } .top-bar__social { display: inline-flex; align-items: center; gap: var(--space-2); } .top-bar__social .social-icon { width: 26px; height: 26px; } .top-bar__social .social-icon .icon { width: 13px; height: 13px; /* Belt-and-braces: stays white even if a broader .icon colour rule changes */ color: var(--color-white); } @media (min-width: 768px) { .top-bar__address { display: flex; } } @media (max-width: 767px) { .top-bar__links a[href^="tel:"] { display: none; } .top-bar__divider { display: none; } .top-bar__social { display: none; } } /* ========================================================================== SiteHeader / Navigation / Dropdowns ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 500; background: var(--color-white); border-bottom: 1px solid var(--color-border-light); height: var(--header-height); display: flex; align-items: center; transition: height var(--motion-fast), box-shadow var(--motion-fast); } .site-header__mark { flex-shrink: 0; } .site-header.is-stuck { height: var(--header-height-sticky); box-shadow: var(--shadow-sm); } .site-header__inner { width: min(100% - (var(--page-gutter) * 2), var(--container-content)); margin-inline: auto; display: flex; align-items: center; gap: var(--space-5); } /* Logo is the black wordmark on transparent — it now sits directly on the white header, so no backdrop chip is needed there. The mobile off-canvas panel is dark, so its logo keeps a white chip (rule further down). */ .site-header__logo { display: flex; align-items: center; margin-right: auto; background: transparent; padding: 0; } .site-header__inner .site-header__logo { background: transparent; padding: 0; } /* Close button sits alone now the logo is gone from the panel */ .nav-mobile__top { display: flex; justify-content: flex-end; } /* Logo sits inside the fixed 80px header band (64px when sticky) — sizing it larger does not change the band height, the flex centring absorbs it. */ .site-header__logo .site-header__mark { height: 62px; width: auto; transition: height var(--motion-fast); } .site-header.is-stuck .site-header__logo .site-header__mark { height: 48px; } @media (max-width: 479px) { .site-header__logo .site-header__mark { height: 52px; } .site-header.is-stuck .site-header__logo .site-header__mark { height: 42px; } } .nav-desktop__actions { display: flex; align-items: center; gap: var(--space-2); /* Breathing room between the last menu link (Projects) and the CTA button cluster, so the buttons read as a separate group. */ margin-left: var(--space-5); } .nav-mobile__address { display: flex; align-items: flex-start; gap: 8px; margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-text-on-dark-muted); } .nav-mobile__address .icon { width: 14px; height: 14px; color: var(--color-accent-line); flex-shrink: 0; margin-top: 2px; } .nav-desktop { display: none; } .nav-desktop__list { display: flex; align-items: center; gap: var(--space-6); } .nav-desktop__item { position: relative; padding-top: 10px; } .nav-desktop__item:not(:last-child)::after { content: ""; position: absolute; right: calc(var(--space-6) / -2 - 0.5px); top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--color-border-light); } .nav-desktop__link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--color-black); font-size: 0.72rem; line-height: 21px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 10px; position: relative; } .nav-desktop__link::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 3px; background: var(--color-red); opacity: 0; transition: opacity var(--motion-fast); } .nav-desktop__item.is-active > .nav-desktop__link, .nav-desktop__link:hover, .nav-desktop__link:focus-visible { color: var(--color-red); } .nav-desktop__item.is-active > .nav-desktop__link::before { opacity: 1; } .nav-desktop__caret { display: block; width: 12px; height: 12px; flex: 0 0 12px; transition: transform var(--motion-fast); } .nav-desktop__item.is-open .nav-desktop__caret { transform: rotate(180deg); } .nav-desktop__cta { border-radius: var(--radius-pill); padding: 9px 18px; font-size: 0.72rem; min-height: 38px; text-transform: uppercase; letter-spacing: 0.04em; } .nav-mobile__cta, .nav-mobile__contact .btn { border-radius: var(--radius-pill); padding: 11px 24px; text-transform: uppercase; letter-spacing: 0.04em; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-red); color: var(--color-white); flex-shrink: 0; } .social-icon:hover, .social-icon:focus-visible { background: var(--color-red-hover); } .social-icon .icon { width: 16px; height: 16px; } /* Services / Locations dropdown */ .services-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; max-height: 70vh; overflow-y: auto; background: var(--color-white); border: 1px solid var(--color-border-light); border-top: 2px solid var(--color-red); border-radius: 0 0 4px 4px; padding: var(--space-3) 0; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--motion-fast), transform var(--motion-fast), visibility var(--motion-fast); } .nav-desktop__item.is-open .services-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .services-dropdown__link { display: block; padding: 10px 24px; color: var(--color-black); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-left: 3px solid transparent; } .services-dropdown__link:hover, .services-dropdown__link:focus-visible { background: rgba(224, 60, 49, 0.08); border-left-color: var(--color-red); } /* Mobile trigger */ .nav-mobile-trigger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--color-red); border: 1px solid var(--color-red); border-radius: 0; color: var(--color-white); margin-left: auto; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); } .nav-mobile-trigger:hover, .nav-mobile-trigger:focus-visible { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); } .nav-mobile-trigger .icon { width: 26px; height: 26px; } /* Mobile off-canvas nav */ .nav-mobile { position: fixed; top: var(--mobile-nav-top, calc(var(--header-height-sticky) + 10px)); right: 12px; width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - var(--mobile-nav-top, var(--header-height-sticky)) - 12px); z-index: 600; padding: 10px; background: linear-gradient(145deg, rgba(17, 17, 17, 0.96), rgba(5, 5, 5, 0.98)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; box-shadow: 0 24px 65px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(0.96); transform-origin: top right; transition: opacity var(--motion-fast), transform var(--motion-base), visibility var(--motion-fast); overflow-y: auto; } .nav-mobile.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .nav-mobile__close { width: 44px; height: 44px; background: transparent; border: none; color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; } .nav-mobile__close .icon { width: 24px; height: 24px; } .nav-mobile__body { padding: 0; } .nav-mobile__body::before { content: "Navigation"; display: block; padding: 5px 12px 9px; color: rgba(255, 255, 255, 0.46); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .nav-mobile__cta { margin: 0 2px 8px; min-height: 44px; border-radius: 12px; } .nav-mobile__list { display: flex; flex-direction: column; gap: 3px; counter-reset: mobile-nav; } .nav-mobile__link { counter-increment: mobile-nav; display: flex; align-items: center; gap: 11px; padding: 8px 12px; color: rgba(255, 255, 255, 0.84); font-weight: 600; font-size: 0.9rem; min-height: 43px; border: 1px solid transparent; border-radius: 12px; transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); } .nav-mobile__link::before { content: "0" counter(mobile-nav); width: 24px; flex: none; color: rgba(255, 255, 255, 0.34); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; } .nav-mobile__link:hover, .nav-mobile__link:focus-visible { color: var(--color-white); background: rgba(255, 255, 255, 0.06); transform: translateX(2px); } /* The running number turns red on hover / keyboard focus */ .nav-mobile__link:hover::before, .nav-mobile__link:focus-visible::before { color: var(--color-red); } .nav-mobile__link[aria-current="page"] { color: var(--color-white); background: linear-gradient(90deg, rgba(224, 60, 49, 0.34), rgba(224, 60, 49, 0.1)); } .nav-mobile__link[aria-current="page"]::before { color: var(--color-red); } .nav-mobile__link .nav-desktop__caret { margin-left: auto; transition: transform var(--motion-fast); } .nav-mobile__item.is-open .nav-desktop__caret { transform: rotate(180deg); } .nav-mobile__submenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-base); } .nav-mobile__item.is-open .nav-mobile__submenu { grid-template-rows: 1fr; } .nav-mobile__submenu-inner { overflow: hidden; padding-left: 35px; } .nav-mobile__sublink { padding: 9px 12px; color: var(--color-text-on-dark-muted); font-size: 0.78rem; font-weight: 600; min-height: 39px; display: flex; align-items: center; border-left: 1px solid rgba(253, 185, 19, 0.22); } .nav-mobile__sublink:hover, .nav-mobile__sublink:focus-visible { color: var(--color-white); } .nav-mobile__contact { margin: 10px 2px 2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: grid; gap: 8px; } body.nav-open { overflow: hidden; } body.nav-open .nav-mobile-trigger { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); } body.nav-open::after { content: ""; position: fixed; inset: var(--mobile-nav-overlay-top, var(--header-height-sticky)) 0 0; z-index: 590; background: rgba(5, 12, 16, 0.3); } /* The horizontal nav needs room for six items plus the two buttons. Below 1200px they no longer fit on one line, so the mobile drawer (which carries the same items) takes over. Keep the 1200 in main.js in step with this. */ @media (min-width: 1200px) { .nav-desktop { display: flex; align-items: center; } .nav-mobile-trigger { display: none; } } /* ========================================================================== Breadcrumbs ========================================================================== */ .breadcrumbs { padding-block: var(--space-3); } .breadcrumbs__list, .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-body-light); } .breadcrumbs__list li, .breadcrumbs ol li { display: flex; align-items: center; gap: var(--space-2); } .breadcrumbs__list a, .breadcrumbs ol a { color: var(--color-text-body); font-weight: 600; } .breadcrumbs__list a:hover, .breadcrumbs ol a:hover { color: var(--color-red); } .breadcrumbs__list li:not(:last-child)::after, .breadcrumbs ol li:not(:last-child)::after { content: "/"; color: var(--color-border-light); } .on-dark .breadcrumbs__list, .on-dark .breadcrumbs__list a, .on-dark .breadcrumbs ol, .on-dark .breadcrumbs ol a, .inner-hero .breadcrumbs__list, .inner-hero .breadcrumbs__list a, .inner-hero .breadcrumbs ol, .inner-hero .breadcrumbs ol a { color: rgba(255, 255, 255, 0.85); } .inner-hero .breadcrumbs__list li:not(:last-child)::after, .inner-hero .breadcrumbs ol li:not(:last-child)::after { color: rgba(255, 255, 255, 0.4); } /* ========================================================================== Hero Slider (homepage) ========================================================================== */ .hero-slider { position: relative; min-height: clamp(650px, calc(100svh - 118px), 850px); overflow: hidden; isolation: isolate; background: var(--color-black); color: var(--color-white); } .hero-slider__track, .hero-slide { position: absolute; inset: 0; } .hero-slider__track { position: static; } .hero-slide { z-index: 0; opacity: 0; visibility: hidden; transition: opacity 900ms ease, visibility 900ms ease; } .hero-slide.is-active { z-index: 1; opacity: 1; visibility: visible; } .hero-slide__bg, .hero-slide picture { position: absolute; inset: 0; display: block; } .hero-slide__img, .hero-slide__image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.045); transition: transform 7s ease; } .hero-slide.is-active .hero-slide__img, .hero-slide.is-active .hero-slide__image { transform: scale(1); } /* Full-slide dark overlay for text legibility */ .hero-slide__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.15) 100%); } .hero-slide__content { position: absolute; z-index: 2; top: 47%; left: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2)); width: min(800px, calc(100% - (var(--page-gutter) * 2))); transform: translateY(-50%); } .hero-slide__eyebrow { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); color: var(--color-accent-line); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .hero-slide__eyebrow-line { width: 72px; height: 1px; background: currentColor; } .hero-slide__text { position: relative; width: fit-content; max-width: 680px; margin-bottom: var(--space-6); padding: 0.65rem 1.5rem 0.8rem 0.6rem; isolation: isolate; } .hero-slide__text::before { position: absolute; z-index: -1; inset: -1.2rem -6rem -1.2rem -2rem; background: radial-gradient(ellipse at 28% 50%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0.3) 60%, transparent 78%); content: ""; filter: blur(14px); pointer-events: none; } .hero-slide__title { max-width: 680px; margin-bottom: var(--space-5); color: var(--color-white); font-size: clamp(2.8rem, 5.3vw, 5.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.68); } .hero-slide__copy { max-width: 590px; margin-bottom: 0; color: rgba(255, 255, 255, 0.9); font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.7; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82); } .hero-slide__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } .hero-slide__actions .btn { min-height: 54px; padding-inline: var(--space-5); border-radius: var(--radius-button); letter-spacing: 0.06em; text-transform: uppercase; } /* Frosted-glass treatment for the white (secondary) hero button: translucent white panel, backdrop blur, light rim + inner highlight. */ .hero-slide__actions .btn-secondary { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.7); color: var(--color-black); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.25); transition: background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); } .hero-slide__actions .btn-secondary:hover, .hero-slide__actions .btn-secondary:focus-visible { background: rgba(255, 255, 255, 0.78); border-color: #ffffff; color: var(--color-black); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 36px rgba(0, 0, 0, 0.32); } /* Fallback for browsers without backdrop-filter: use a more opaque panel */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-slide__actions .btn-secondary { background: rgba(255, 255, 255, 0.85); } } .hero-slider__utility { position: absolute; z-index: 3; right: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2)); bottom: var(--space-7); left: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2)); display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; } .hero-slider__features, .hero-slider__controls { display: flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(15, 22, 26, 0.74); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); pointer-events: auto; } .hero-feature { display: flex; min-width: 132px; align-items: center; gap: var(--space-3); padding: 18px; border-right: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; line-height: 1.45; text-transform: uppercase; } .hero-feature:last-child { border-right: 0; } .hero-feature .icon { width: 28px; height: 28px; color: var(--color-red); } .hero-slider__controls { align-items: center; gap: var(--space-2); padding: var(--space-3); } .hero-slider__arrow { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: var(--color-white); background: transparent; font-size: 16px; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .hero-slider__arrow:hover, .hero-slider__arrow:focus-visible { color: var(--color-black); background: var(--color-white); } .hero-slider__arrow .icon { width: 20px; height: 20px; } .hero-slider__count { display: flex; align-items: baseline; gap: var(--space-2); min-width: 92px; padding-inline: var(--space-3); color: rgba(255, 255, 255, 0.66); } .hero-slider__count .hero-slider__current { color: var(--color-white); font-size: var(--text-2xl); font-weight: 500; } .hero-slider__dots { position: absolute; z-index: 4; right: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2)); top: 50%; display: grid; gap: var(--space-3); transform: translateY(-50%); } .hero-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.48); cursor: pointer; transition: height var(--motion-fast), border-radius var(--motion-fast), background var(--motion-fast); } .hero-slider__dot.is-active { height: 30px; border-radius: var(--radius-pill); background: var(--color-white); } @media (max-width: 1023px) { .hero-slider { min-height: 720px; } .hero-slide__content { top: 42%; } .hero-slider__features { display: none; } .hero-slider__utility { justify-content: flex-end; } } @media (max-width: 767px) { .hero-slider { min-height: 680px; } .hero-slide__img, .hero-slide__image { object-position: 60% center; } .hero-slide__content { top: 44%; width: calc(100% - (var(--page-gutter) * 2)); } .hero-slide__eyebrow { font-size: 0.7rem; letter-spacing: 0.13em; } .hero-slide__eyebrow-line { width: 42px; } .hero-slide__title { font-size: clamp(2.35rem, 11vw, 3.5rem); } .hero-slide__copy { max-width: 100%; line-height: 1.55; } .hero-slide__text { max-width: 100%; padding: 0.5rem 0.75rem 0.65rem 0.25rem; } .hero-slide__actions { gap: var(--space-3); } .hero-slide__actions .btn { width: 100%; min-height: 50px; } .hero-slider__utility { bottom: var(--space-5); } .hero-slider__controls { margin-left: auto; padding: var(--space-2); } .hero-slider__arrow { width: 40px; height: 40px; } .hero-slider__count { min-width: 72px; padding-inline: var(--space-2); } .hero-slider__count .hero-slider__current { font-size: var(--text-xl); } .hero-slider__dots { top: auto; right: auto; bottom: 94px; left: var(--page-gutter); display: flex; align-items: center; } .hero-slider__dot.is-active { width: 30px; height: 8px; } } @media (prefers-reduced-motion: reduce) { .hero-slide, .hero-slide__img, .hero-slide__image { transition: none; } } /* ========================================================================== InnerPageHero ========================================================================== */ .inner-hero { background: var(--color-black); color: var(--color-white); padding-block: clamp(2.5rem, 6vw, 4.5rem); } .inner-hero__title { color: var(--color-white); font-size: var(--text-h1-inner); margin-bottom: var(--space-4); max-width: 820px; } .inner-hero__subtitle { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.92); max-width: 640px; margin-bottom: var(--space-6); } .inner-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } .inner-hero .btn-primary { background: var(--color-white); color: var(--color-black); border-color: var(--color-white); } .inner-hero .btn-primary:hover, .inner-hero .btn-primary:focus-visible { background: var(--color-bg-soft); color: var(--color-black); } .inner-hero--image { position: relative; isolation: isolate; overflow: hidden; background-color: var(--color-black); /* Default photo. Without it, pages that use .inner-hero--image with no page-specific modifier (the 11 location pages) left the custom property unset, which made the whole background-image declaration invalid — losing the gradient as well, so the hero rendered as a plain black band. Narrow screens get the 1280px copy instead of the 1920px original. */ --inner-hero-image: url("/assets/images/slider/sub-pages-hero-sections.webp"); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.68) 48%, rgba(0, 0, 0, 0.28) 100%), var(--inner-hero-image); background-position: center; background-size: cover; } .inner-hero--image .container { position: relative; z-index: 1; } .inner-hero--image .inner-hero__title { font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.68); } .inner-hero--image .inner-hero__title > span { display: block; margin-bottom: 0.55rem; color: var(--color-accent-line); font-size: 0.32em; font-weight: 700; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; } @media (max-width: 767px) { .inner-hero--image { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 100%), var(--inner-hero-image); } } /* ========================================================================== Section heading + eyebrow helpers ========================================================================== */ .section-heading { max-width: 760px; margin-bottom: var(--space-7); } .section-heading--center { margin-inline: auto; text-align: center; } .section-heading__title, .section-heading h2, .section__heading { margin-bottom: var(--space-3); color: var(--color-black); font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 700; line-height: 1.15; } /* Display-size section heading — same type scale as .hero-slide__title, kept on a semantic

. Needs the compound selectors below to out-rank the base `.section-heading h2` rule above (0,1,1), which would otherwise win and reset the size. */ .section-heading h2.section-heading__title--display, .section-heading .section-heading__title--display, .section-heading__title--display { margin-bottom: var(--space-3); font-size: 60px; font-weight: 500; letter-spacing: -0.035em; line-height: 62px; } @media (max-width: 767px) { .section-heading h2.section-heading__title--display, .section-heading .section-heading__title--display, .section-heading__title--display { font-size: clamp(2.35rem, 11vw, 3.5rem); line-height: 1.05; } } .section-heading__lead, .section-heading p { color: var(--color-text-body); font-size: var(--text-lg); } /* Section headings sitting on a dark band must invert. `.section-heading h2` otherwise ties with `.section--dark h2` and wins on load order, leaving a black heading on a black background. */ .section--dark .section-heading__title, .section--dark .section-heading h2, .section--dark .section-heading h3 { color: var(--color-text-on-dark); } .section--dark .section-heading__lead, .section--dark .section-heading p { color: rgba(255, 255, 255, 0.85); } .section__heading { margin-bottom: var(--space-5); } /* Eyebrow: small uppercase label with optional trailing accent line */ .section-heading__eyebrow, .eyebrow { display: inline-flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-3); color: var(--color-red); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .section-heading__eyebrow .section-heading__line { width: 74px; height: 1px; background: var(--color-accent-line); } /* Accent pill — slim rounded badge shown above a section heading. Transparent fill with a soft (semi-transparent) red rim. */ .section-heading__pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; margin: 0 0 var(--space-3); padding: 5px 14px; border: 1px solid rgba(224, 60, 49, 0.45); border-radius: var(--radius-pill); background: transparent; color: var(--color-red); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; } /* Caption under a display-size heading — 18px on a 30px line, light weight */ .section-heading h2.section-heading__title--display + .section-heading__lead, .section-heading .section-heading__title--display + .section-heading__lead { max-width: 620px; margin-inline: auto; font-size: 1.125rem; line-height: 30px; font-weight: 300; } .eyebrow--on-dark { color: var(--color-accent-line); } /* ========================================================================== ServiceCard / ServiceGrid ========================================================================== */ .service-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); } /* Variant A: article.service-card (homepage) — media + overlay + body */ .service-card { position: relative; display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border-light); overflow: hidden; } .service-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; } .service-card__media img, .service-card__img, .service-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-base); } .service-card:hover .service-card__media img, .service-card:focus-within .service-card__media img, .service-card:hover .service-card__img, .service-card:hover .service-card__image { transform: scale(1.03); } /* Direct image (services hub) */ .service-card > .service-card__image { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; } /* Bottom gradient over the image so the overlaid title stays legible */ .service-card__media::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.45) 58%, rgba(0, 0, 0, 0.8) 100%); content: ""; pointer-events: none; } /* Large image-overlaid card title */ .service-card__overlay-title { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; margin: 0; padding: var(--space-6); color: var(--color-white); font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9); } .service-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; /* Minimum breathing room between title, text and the CTA button, so the card never looks cramped when a description is absent. */ gap: var(--space-5); } .service-card__title { color: var(--color-red); font-size: var(--text-xl); line-height: 1.25; margin: 0; } .service-card__text { color: var(--color-text-body); margin: 0; flex: 1; } .service-card__link { align-self: flex-start; position: relative; z-index: 3; /* Pushes the button to the bottom so buttons line up across a row of equal-height cards. */ margin-top: auto; /* Long labels like "Explore Construction Suppliers" carry .btn's white-space: nowrap and would otherwise widen the card past the viewport, causing horizontal page scroll on phones. */ max-width: 100%; } @media (max-width: 767px) { .service-card__link { white-space: normal; text-align: center; line-height: 1.35; } } /* Variant B: a.service-card (locations) — compact linked card */ a.service-card { padding: var(--space-5); color: var(--color-black); transition: border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); } a.service-card h3 { color: var(--color-red); font-size: var(--text-lg); margin-bottom: var(--space-2); } a.service-card p { color: var(--color-text-body); margin: 0; font-size: 0.95rem; } a.service-card:hover, a.service-card:focus-visible { border-color: var(--color-red); transform: translateY(-3px); box-shadow: var(--shadow-sm); } @media (min-width: 768px) { .service-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Generic Cards (projects, guides) ========================================================================== */ .cards { display: grid; gap: var(--card-gap); } .cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { position: relative; display: flex; flex-direction: column; min-height: 100%; background: var(--color-white); border: 1px solid var(--color-border-light); border-top: 4px solid var(--color-black); padding: var(--space-6); transition: border-color var(--motion-fast), transform var(--motion-fast); } .card:hover, .card:focus-within { border-top-color: var(--color-red); transform: translateY(-3px); } .card__media { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5); aspect-ratio: 4 / 3; overflow: hidden; } .card__img, .card__media img { width: 100%; height: 100%; object-fit: cover; } .card__body { display: flex; flex: 1; flex-direction: column; /* Consistent spacing between title, text and CTA regardless of which pieces are present. */ gap: var(--space-4); } .card__title, .card h3 { margin: 0; color: var(--color-red); font-size: var(--text-xl); line-height: 1.2; } .card__text, .card p { flex: 1; margin: 0; color: var(--color-text-body); } .card__link, .card > .btn, .card .btn { align-self: flex-start; /* Keep CTAs aligned along the bottom of equal-height cards. */ margin-top: auto; } /* Small accent pill CTA — compact outlined badge, fills red on hover */ .card__link--pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 5px 14px; border: 1px solid rgba(224, 60, 49, 0.45); border-radius: var(--radius-pill); background: transparent; color: var(--color-red); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); } .card__link--pill:hover, .card__link--pill:focus-visible { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); } @media (max-width: 1023px) { .cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .cards.cols-3 { grid-template-columns: 1fr; } } /* ========================================================================== TrustPillars / ValueCard ========================================================================== */ .trust-pillars { background: var(--color-black); } .trust-pillars__grid, .trust-pillars > .value-card + .value-card, .trust-pillars { display: grid; } .trust-pillars__grid { grid-template-columns: 1fr; gap: 0; width: min(100% - (var(--page-gutter) * 2), var(--container-content)); margin-inline: auto; } /* About page: .trust-pillars is the direct grid container inside .container */ .trust-pillars:not(.section) { grid-template-columns: 1fr; gap: 0; width: 100%; } .value-card { padding: var(--space-6); border-bottom: 1px solid var(--color-border-dark); color: var(--color-text-on-dark); } .value-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--color-red); color: var(--color-white); margin-bottom: var(--space-4); } .value-card__icon .icon { width: 24px; height: 24px; } .value-card__label { display: block; font-size: var(--text-sm); color: var(--color-text-on-dark-muted); margin-bottom: var(--space-1); } .value-card__title, .value-card__value { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-3); color: var(--color-white); } .value-card__text { font-size: var(--text-base); color: var(--color-text-on-dark-muted); margin: 0; } .value-card--accent { background: var(--color-red); } .value-card--accent .value-card__label, .value-card--accent .value-card__text { color: #ffffff; } /* The accent card is itself red, so its icon inverts to white-on-red rather than red-on-red (which would be invisible). */ .value-card--accent .value-card__icon { background: var(--color-white); color: var(--color-red); } @media (min-width: 768px) { .trust-pillars__grid, .trust-pillars:not(.section) { grid-template-columns: repeat(2, 1fr); } .value-card { border-bottom: none; border-right: 1px solid var(--color-border-dark); } .value-card:nth-child(2n) { border-right: none; } .value-card:nth-child(1), .value-card:nth-child(2) { border-bottom: 1px solid var(--color-border-dark); } } @media (min-width: 1024px) { .trust-pillars__grid, .trust-pillars:not(.section) { grid-template-columns: repeat(4, 1fr); } .value-card, .value-card:nth-child(1), .value-card:nth-child(2) { border-bottom: none; border-right: 1px solid var(--color-border-dark); } .value-card:last-child { border-right: none; } } /* ========================================================================== ImageTextSplit ========================================================================== */ .image-text-split { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; } .image-text-split__media, .image-text-split__image { position: relative; aspect-ratio: 4 / 3; } .image-text-split__media img, .image-text-split__image img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--color-border-light); } .image-text-split__body h2 { margin-bottom: var(--space-5); color: var(--color-black); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; } .image-text-split__body .eyebrow, .image-text-split__body .section-heading__eyebrow { margin-bottom: var(--space-4); } .image-text-split__body p { color: var(--color-text-body); font-size: 16px; line-height: 1.8; } .image-text-split__body .btn { margin-top: var(--space-4); } .image-text-split--reverse .image-text-split__media, .image-text-split--reverse .image-text-split__image { order: -1; } @media (min-width: 1024px) { .image-text-split { grid-template-columns: 1fr 1fr; } .image-text-split--reverse .image-text-split__media, .image-text-split--reverse .image-text-split__image { order: 1; } } /* ========================================================================== BenefitsGrid ========================================================================== */ .benefits-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); } .benefit-item { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-border-light); border-top: 4px solid var(--color-black); transition: border-color var(--motion-fast), transform var(--motion-fast); } .benefit-item:hover, .benefit-item:focus-within { border-top-color: var(--color-red); transform: translateY(-3px); } .benefit-item__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: rgba(224, 60, 49, 0.1); color: var(--color-red); font-size: 0.72rem; font-weight: 800; margin-bottom: var(--space-4); } .benefit-item__title { margin-bottom: var(--space-3); color: var(--color-red); font-size: var(--text-xl); line-height: 1.2; } .benefit-item__text { flex: 1; color: var(--color-text-body); margin: 0; } .benefit-item > .btn { align-self: flex-start; margin-top: var(--space-5); } @media (min-width: 768px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .benefits-grid--3 { grid-template-columns: repeat(3, 1fr); } } /* Centred call to action closing a section (e.g. "View All Services") */ .section-cta { display: flex; justify-content: center; margin-top: var(--space-7); } .section-cta .icon { width: 18px; height: 18px; transition: transform var(--motion-fast); } .section-cta .btn:hover .icon, .section-cta .btn:focus-visible .icon { transform: translateX(4px); } /* ========================================================================== ProcessBand — "How We Get It Done" Two-tone heading, pill CTA + circular arrow, 3 numbered steps divided by hairline rules with a circular arrow marker on each divider. ========================================================================== */ .process-band { background: var(--color-white); } .process-band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-7); } .process-band__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); color: var(--color-text-body); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; } .process-band__eyebrow::before { width: 28px; height: 2px; background: var(--color-red); content: ""; } .process-band__title { margin: 0; color: var(--color-black); font-family: var(--font-heading); font-size: 60px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.03; } .process-band__title span { color: var(--color-red); } /* Learn More pill + circular arrow button */ .process-band__cta { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .process-band__cta-label { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: var(--radius-pill); background: var(--color-red); color: var(--color-white); font-size: var(--text-sm); font-weight: 700; transition: background-color var(--motion-fast); } .process-band__cta-arrow { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--color-black); color: var(--color-white); transition: transform var(--motion-fast), background-color var(--motion-fast); } .process-band__cta-arrow .icon { width: 20px; height: 20px; } .process-band__cta:hover .process-band__cta-label, .process-band__cta:focus-visible .process-band__cta-label { background: var(--color-red-hover); } .process-band__cta:hover .process-band__cta-arrow, .process-band__cta:focus-visible .process-band__cta-arrow { transform: translateX(4px); } /* Steps */ .process-band__steps { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-light); } .process-band__step { position: relative; padding: var(--space-7) var(--space-7) 0 0; border-right: 1px solid var(--color-border-light); } /* Steps after the first get left padding so their content clears the circular arrow marker that sits on the divider. */ .process-band__step + .process-band__step { padding-left: var(--space-7); } .process-band__step:last-child { border-right: 0; padding-right: 0; } .process-band__badge { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: var(--space-5); padding: 6px 18px; border-radius: var(--radius-pill); background: var(--color-black); color: var(--color-white); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .process-band__step-title { margin: 0 0 var(--space-3); color: var(--color-black); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; } .process-band__step-text { margin: 0; color: var(--color-text-body); font-size: var(--text-base); line-height: 1.7; } /* Circular arrow marker straddling each divider, level with the badge */ .process-band__step:not(:last-child)::after { position: absolute; z-index: 2; top: var(--space-7); right: -17px; width: 34px; height: 34px; border-radius: 50%; background-color: var(--color-red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; content: ""; } @media (min-width: 768px) { .process-band__steps { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .process-band__head { align-items: flex-start; flex-direction: column; } .process-band__title { font-size: clamp(2.35rem, 11vw, 3.5rem); } .process-band__cta { width: 100%; } .process-band__cta-label { flex: 1; } /* The `.step + .step` left-padding rule has higher specificity than a bare `.step` rule, so it must be reset here too or steps 2-3 stay indented. */ .process-band__step, .process-band__step + .process-band__step { padding: var(--space-6) 0; border-right: 0; border-bottom: 1px solid var(--color-border-light); } .process-band__step:last-child { border-bottom: 0; padding-bottom: 0; } .process-band__step:not(:last-child)::after { top: auto; right: auto; bottom: -17px; left: 0; } } @media (prefers-reduced-motion: reduce) { .process-band__cta-label, .process-band__cta-arrow { transition: none; } } /* ========================================================================== AboutIntro + AboutFeature — About page opening section Two-tone heading with a lead/CTA row, then an image with a corner badge beside a dark panel that rotates between mission-style statements. ========================================================================== */ .about-intro__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); color: var(--color-text-body); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; } .about-intro__eyebrow::before { width: 28px; height: 2px; background: var(--color-red); content: ""; } .about-intro__title { margin: 0; font-family: var(--font-heading); font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; } .about-intro__title span, .about-intro__title em { display: block; font-style: normal; } .about-intro__title span { color: var(--color-red); } .about-intro__title em { color: var(--color-black); } /* Copy 75% / call to action 25% */ .about-intro__row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); } .about-intro__lead { margin: 0; color: var(--color-text-body); font-size: var(--text-base); line-height: 28px; } @media (min-width: 900px) { .about-intro__row { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; } .about-intro__cta { justify-self: end; } } /* Learn More pill + circular arrow button (shared with the process band) */ .about-intro__cta { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .about-intro__cta-label { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: var(--radius-pill); background: var(--color-red); color: var(--color-white); font-size: var(--text-sm); font-weight: 700; transition: background-color var(--motion-fast); } .about-intro__cta-arrow { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--color-black); color: var(--color-white); transition: transform var(--motion-fast); } .about-intro__cta-arrow .icon { width: 20px; height: 20px; } .about-intro__cta:hover .about-intro__cta-label, .about-intro__cta:focus-visible .about-intro__cta-label { background: var(--color-red-hover); } .about-intro__cta:hover .about-intro__cta-arrow, .about-intro__cta:focus-visible .about-intro__cta-arrow { transform: translateX(4px); } /* Image + dark panel */ .about-feature { display: grid; gap: var(--card-gap); margin-top: var(--space-8); } .about-feature__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-bg-soft); } .about-feature__media img { width: 100%; height: 100%; object-fit: cover; } .about-feature__badge { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-red); color: var(--color-white); } .about-feature__badge strong { padding-right: var(--space-3); border-right: 2px solid rgba(255, 255, 255, 0.45); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1; } .about-feature__badge span { font-size: var(--text-sm); font-weight: 700; line-height: 1.25; } .about-feature__panel { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding: clamp(2rem, 4vw, 3rem); background: var(--color-black); color: var(--color-white); } .about-feature__slides { /* Keeps the panel height stable as slides change length */ display: grid; } .about-feature__slides > * { grid-area: 1 / 1; } .about-feature__text { margin: 0; color: var(--color-text-on-dark); font-size: var(--text-base); line-height: 28px; } .about-feature__text[hidden] { display: none; } .about-feature__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .about-feature__label { color: var(--color-red); font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.15; } .about-feature__arrows { display: flex; flex-shrink: 0; gap: var(--space-3); } .about-feature__arrow { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: transparent; color: var(--color-white); cursor: pointer; transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); } .about-feature__arrow .icon { width: 18px; height: 18px; } .about-feature__arrow--next { background: var(--color-red); border-color: var(--color-red); } .about-feature__arrow:hover, .about-feature__arrow:focus-visible { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); } .about-feature__arrow--next:hover, .about-feature__arrow--next:focus-visible { background: var(--color-red-hover); border-color: var(--color-red-hover); } @media (min-width: 992px) { .about-feature { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } /* Line the label + arrows row up with the KZN badge on the photo. The badge is centred on the photo's bottom edge, so the foot's centre has to sit the same distance up from the panel's bottom edge — i.e. half the difference between the badge height and the foot height. */ .about-feature__panel { padding-bottom: calc((68px - 44px) / 2); } } @media (max-width: 767px) { .about-intro__cta { width: 100%; } .about-intro__cta-label { flex: 1; } .about-feature__badge { padding: var(--space-3) var(--space-4); } .about-feature__badge strong { font-size: var(--text-2xl); } } @media (prefers-reduced-motion: reduce) { .about-intro__cta-label, .about-intro__cta-arrow { transition: none; } } /* ========================================================================== WelcomeSection — home page band directly below the hero Two-tone heading + service tag pills on the left; a circular "Get In Touch" badge (rotates on scroll) and copy on the right. ========================================================================== */ .welcome { background: var(--color-white); } .welcome__grid { display: grid; gap: var(--space-7); } .welcome__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); color: var(--color-text-body); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; } .welcome__eyebrow::before { width: 28px; height: 2px; background: var(--color-red); content: ""; } .welcome__title { margin: 0 0 var(--space-7); font-family: var(--font-heading); font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; } .welcome__title span, .welcome__title em { display: block; font-style: normal; } .welcome__title span { color: var(--color-black); } .welcome__title em { color: var(--color-red); } /* 3-up grid so the pills sit in even columns rather than ragging */ .welcome__tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 0; padding: 0; list-style: none; } .welcome__tag { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 16px; border: 1px solid var(--color-border-light); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-black); font-size: var(--text-xs); font-weight: 600; line-height: 1.2; text-align: center; transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); } a.welcome__tag:hover, a.welcome__tag:focus-visible { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); } .welcome__aside { display: grid; align-content: start; gap: var(--space-6); } /* Circular badge — black patterned disc behind, white disc with the rotating text in front, red accent core in the middle. */ .welcome__badge { position: relative; display: grid; width: 136px; height: 136px; place-items: center; justify-self: end; } .welcome__badge-disc { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-black); background-image: repeating-linear-gradient( 45deg, transparent 0 6px, rgba(255, 255, 255, 0.09) 6px 7px ); transform: translateX(-30%); } .welcome__badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--color-white); will-change: transform; } .welcome__badge-text { fill: var(--color-black); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .welcome__badge-core { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: var(--color-red); color: var(--color-white); transition: background-color var(--motion-fast), transform var(--motion-fast); } .welcome__badge-core .icon { width: 22px; height: 22px; } .welcome__badge-arrow { transform: rotate(-45deg); } .welcome__badge:hover .welcome__badge-core, .welcome__badge:focus-visible .welcome__badge-core { background: var(--color-red-hover); transform: scale(1.08); } .welcome__text { position: relative; margin: 0; padding-left: var(--space-5); color: var(--color-text-body); font-size: var(--text-base); line-height: 1.75; } .welcome__text::before { position: absolute; top: 6px; bottom: 6px; left: 0; width: 2px; background: var(--color-red); content: ""; } @media (min-width: 900px) { /* 60 / 40 split — keeps the copy column close to the tag pills */ .welcome__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; } .welcome__badge { width: 152px; height: 152px; } .welcome__badge-core { width: 66px; height: 66px; } } @media (max-width: 599px) { /* Two columns on a phone keeps the labels readable */ .welcome__tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .welcome__tag { min-height: 36px; padding: 6px 10px; } } @media (prefers-reduced-motion: reduce) { .welcome__badge-ring { will-change: auto; } .welcome__badge-core { transition: none; } } /* ========================================================================== ProcessSteps ========================================================================== */ .process-steps { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); } .process-steps__item, .process-step { position: relative; padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-border-light); } .process-steps__number, .process-step__number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-red); color: var(--color-white); font-weight: 700; margin-bottom: var(--space-4); } .process-steps__item h3, .process-step__title { font-size: var(--text-lg); margin-bottom: var(--space-2); } .process-steps__item p, .process-step__text { color: var(--color-text-body); margin: 0; } @media (min-width: 768px) { .process-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(5, 1fr); } } /* ========================================================================== FAQAccordion ========================================================================== */ .faq-list { border-top: 1px solid var(--color-border-light); } .faq-item { border-bottom: 1px solid var(--color-border-light); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-weight: 700; font-size: var(--text-lg); color: var(--color-black); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .icon { width: 20px; height: 20px; color: var(--color-red); flex-shrink: 0; transition: transform var(--motion-fast); } .faq-item[open] summary .icon { transform: rotate(45deg); } .faq-item__answer { padding-bottom: var(--space-5); color: var(--color-text-body); max-width: var(--container-narrow); } /* ========================================================================== ContactLayout ========================================================================== */ .contact-layout { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } /* `1fr` resolves to minmax(auto, 1fr), so a child with wide content can push the column past the container and cause horizontal page scroll on phones. Allowing the items to shrink keeps the grid inside its container. */ .contact-layout > * { min-width: 0; } /* Form column — red, square corners */ .contact-form-panel { padding: var(--space-7); background: var(--color-accent-band); color: var(--color-white); } .contact-form-panel__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); color: var(--color-accent-line); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .contact-form-panel__eyebrow::before { width: 28px; height: 2px; background: var(--color-accent-line); content: ""; } .contact-form-panel__heading { margin: 0 0 var(--space-6); color: var(--color-white); } /* Contact form — paired fields, two per row, tight vertical rhythm */ .contact-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-bottom: var(--space-2); } .contact-form__row .form-field { margin-bottom: 0; } .contact-form ::placeholder { color: rgba(255, 255, 255, 0.75); opacity: 1; } .contact-form select option { background: #8f2318; color: var(--color-white); } /* Consent row: message and validation text stack, not sit side by side */ .form-consent { margin-bottom: var(--space-4); } .form-consent .form-field__error { margin-top: 6px; } /* Per-field validation message */ .form-field__error { display: block; margin-top: 5px; color: var(--color-white); font-size: var(--text-xs); font-weight: 600; line-height: 1.4; } .form-field__error::before { content: "! "; color: var(--color-accent-line); font-weight: 700; } /* Invalid field gets a light rim so it stands out on the red panel */ .contact-form-panel .form-field input:invalid:not(:placeholder-shown), .contact-form-panel .form-field textarea:invalid:not(:placeholder-shown) { border-color: rgba(255, 255, 255, 0.7); } /* Status banner on the red panel */ .contact-form-panel .form-status { border-color: var(--color-white); background: rgba(0, 0, 0, 0.28); color: var(--color-white); } .contact-form-panel .form-status--success { border-left-color: var(--color-success); } .contact-form-panel .form-status--error { border-left-color: var(--color-accent-line); } /* The default red focus ring would be invisible on a red panel */ .contact-form-panel input:focus-visible, .contact-form-panel select:focus-visible, .contact-form-panel textarea:focus-visible, .contact-form-panel .form-consent__label input:focus-visible { outline-color: var(--color-white); } @media (min-width: 600px) { .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .contact-form-panel { padding: var(--space-6) var(--space-5); } } .contact-panel { background: var(--color-black); color: var(--color-white); padding: var(--space-7); } .contact-panel__heading { color: var(--color-white); margin-bottom: var(--space-5); } @media (min-width: 1024px) { .contact-layout { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; } .contact-form-panel { height: 100%; } } .contact-panel__item { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border-dark); } .contact-panel__item:last-child { border-bottom: none; } .contact-panel__item .icon { width: 22px; height: 22px; color: var(--color-red); flex-shrink: 0; margin-top: 2px; } .contact-panel__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-on-dark-muted); margin: 0 0 2px; } .contact-panel__value { font-weight: 600; margin: 0; } .contact-panel__value a { color: var(--color-white); text-decoration: none; } .contact-panel__value a:hover, .contact-panel__value a:focus-visible { color: var(--color-accent-line); } /* ========================================================================== Contact form ========================================================================== */ .contact-form .form-field { margin-bottom: var(--space-5); } .form-field__required { color: var(--color-red); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea { width: 100%; min-height: 48px; padding: 0.75rem 1rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-button); /* Dark red field on the red panel */ background: rgba(0, 0, 0, 0.25); color: var(--color-white); font: inherit; } .contact-form textarea { min-height: 110px; resize: vertical; } /* Required-field marker sits on red, so it needs a light tone */ .contact-form-panel .form-field__required { color: var(--color-accent-line); } .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--color-red); outline-offset: 1px; border-color: var(--color-red); } .form-consent__label { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-body); } .form-consent__label input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; } /* ========================================================================== FinalCTA ========================================================================== */ .final-cta { position: relative; display: grid; min-height: 300px; place-items: center; /* Clips the decorative glow behind .final-cta__text-panel, which is inset horizontally and would otherwise poke past the viewport on phones and create a few px of horizontal page scroll. */ overflow: hidden; background-color: var(--color-black); background-image: url("/assets/images/bg.jpg"); background-position: center; background-size: cover; color: var(--color-white); text-align: center; padding-block: var(--section-padding); } .final-cta .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .final-cta__text-panel { position: relative; width: fit-content; max-width: 980px; margin-bottom: var(--space-6); padding: var(--space-4) var(--space-6); isolation: isolate; } .final-cta__text-panel::before { position: absolute; z-index: -1; inset: -2.5rem -7rem; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.25) 66%, transparent 82%); content: ""; filter: blur(14px); } .final-cta__title { color: var(--color-white); margin-bottom: var(--space-4); font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.68); } .final-cta__text { color: rgba(255, 255, 255, 0.92); max-width: 640px; margin-inline: auto; margin-bottom: 0; font-size: var(--text-lg); line-height: 1.7; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82); } .final-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); } .final-cta .btn-primary { background: var(--color-red); color: var(--color-white); border-color: var(--color-red); } .final-cta .btn-primary:hover, .final-cta .btn-primary:focus-visible { background: var(--color-red-hover); border-color: var(--color-red-hover); } @media (max-width: 767px) { .final-cta { min-height: auto; padding-block: clamp(4rem, 14vw, 6rem); } .final-cta__text-panel { padding-inline: var(--space-3); } .final-cta__text-panel::before { inset: -2rem -1.5rem; } .final-cta__title { font-size: clamp(2rem, 9vw, 3rem); } .final-cta__actions, .final-cta__actions .btn { width: 100%; } } /* ========================================================================== SiteFooter ========================================================================== */ .site-footer { background: var(--color-black); color: var(--color-text-on-dark); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-block: clamp(2.5rem, 5vw, 4rem); } .footer-col__heading { color: var(--color-white); font-size: 22px; font-weight: 500; margin-bottom: var(--space-5); } .footer-col__list li { border-bottom: 1px dotted var(--color-border-dark); } .footer-col__list a { display: block; padding-block: 7px; color: var(--color-text-on-dark); font-size: 15px; font-weight: 500; line-height: 1.2; } .footer-col__list a:hover, .footer-col__list a:focus-visible { color: var(--color-red); } .footer-address { display: grid; gap: var(--space-4); font-size: 14px; color: var(--color-white); font-style: normal; line-height: 22px; margin-bottom: var(--space-4); } .footer-address__item { display: flex; align-items: flex-start; gap: var(--space-3); } .footer-address__item .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--color-red); } /* Branch name shown above each address */ .footer-address__label { display: block; margin-bottom: 4px; color: var(--color-red); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .footer-address a { color: var(--color-white); } .footer-address a:hover, .footer-address a:focus-visible { color: var(--color-red); } .footer-expert { background: var(--color-red); padding: 28px; } .footer-expert__heading { color: var(--color-white); font-size: 22px; font-weight: 500; margin-bottom: var(--space-5); } .footer-expert__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); } .footer-expert .btn-secondary { justify-content: flex-start; min-height: 42px; padding: 10px 18px; font-size: 14px; } .footer-expert .btn-secondary .icon { width: 18px; height: 18px; } .footer-social-heading { color: var(--color-white); font-size: 20px; font-weight: 500; margin-bottom: var(--space-3); } .footer-social { display: flex; gap: var(--space-2); } .footer-social .social-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--color-white); background: rgba(255, 255, 255, 0.16); } .footer-social .social-icon:hover, .footer-social .social-icon:focus-visible { color: var(--color-black); background: var(--color-white); } .footer-social .social-icon .icon { width: 17px; height: 17px; } /* Credit link in the footer bottom bar. Scoped to out-rank `.site-footer__bottom-inner a { color: inherit }`. */ .site-footer__bottom-inner .site-footer__credit { color: var(--color-red); font-weight: 700; text-decoration: none; } .site-footer__bottom-inner .site-footer__credit:hover, .site-footer__bottom-inner .site-footer__credit:focus-visible { color: var(--color-red); text-decoration: underline; } .site-footer__bottom { border-top: 1px solid var(--color-border-dark); padding-block: 28px; } .site-footer__bottom-inner { display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; color: var(--color-white); } .site-footer__bottom-inner strong, .site-footer__bottom-inner a { color: inherit; font-weight: 700; } .site-footer__bottom-inner a:hover, .site-footer__bottom-inner a:focus-visible { color: var(--color-red); } .site-footer__bottom-inner span { margin-inline: 8px; color: var(--color-accent-line); } .footer-legal { display: flex; gap: var(--space-4); margin-left: auto; } .footer-legal a { color: var(--color-text-on-dark-muted); font-size: var(--text-xs); } .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--color-white); } @media (max-width: 767px) { .footer-legal { justify-content: center; margin: var(--space-3) 0 0; } } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.3fr 0.82fr 0.92fr 1.12fr; gap: 32px; } .site-footer__bottom-inner { flex-direction: row; justify-content: flex-start; } } /* ========================================================================== ImageDecoration — corner dot grids + accent corner brackets Used on the intro image of each service page. Deliberately no border and no drop shadow: just the corner marks. ========================================================================== */ .img-deco { position: absolute; z-index: 1; pointer-events: none; } /* One L-shaped bracket at the top-right corner, drawn in black */ .img-deco--frame { inset: -16px; background-image: linear-gradient(var(--color-black), var(--color-black)), linear-gradient(var(--color-black), var(--color-black)); background-repeat: no-repeat; background-size: 64px 2px, 2px 64px; background-position: right top, right top; } /* Dot grid at the bottom-left — accent red, 6 across x 4 down */ .img-deco--dots { width: 84px; height: 56px; background-image: radial-gradient(currentColor 1.8px, transparent 1.9px); background-size: 14px 14px; color: var(--color-red); } .img-deco--dots-bl { bottom: -16px; left: -16px; } /* The text column is taller than the photo, so centre alignment pushed the eyebrow above the image. Top-align these splits so the eyebrow sits level with the picture corner itself, not with the decoration bracket. */ .image-text-split:has(.img-deco) { align-items: start; } /* Soft black wash over the bottom-left corner of the photo so the red dots read clearly against it. Scoped with :has() so only the decorated service images get it — the location and project pages share this class. */ .image-text-split__image:has(.img-deco)::after { position: absolute; z-index: 0; inset: 0; background: radial-gradient( 115% 92% at 0% 100%, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 24%, rgba(0, 0, 0, 0.26) 46%, rgba(0, 0, 0, 0) 68% ); content: ""; pointer-events: none; } @media (max-width: 767px) { /* Keep the marks clear of the viewport edge on small screens */ .img-deco--frame { inset: -10px; background-size: 40px 2px, 2px 40px; } .img-deco--dots { width: 60px; height: 40px; background-image: radial-gradient(currentColor 1.3px, transparent 1.4px); background-size: 10px 10px; } .img-deco--dots-bl { bottom: -10px; left: -10px; } } /* ========================================================================== ArticleSplit — guide detail pages, image 40% / text 60% ========================================================================== */ .article-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } .article-split__media { overflow: hidden; background: var(--color-bg-soft); } .article-split__media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; } @media (min-width: 900px) { .article-split { grid-template-columns: 1fr 3fr; /* 25 / 75 */ gap: var(--space-8); align-items: start; } /* The 75% column is wider than the default narrow measure, so let the article fill it rather than leaving a gap on the right. */ .article-split .article-layout { max-width: none; } /* Long guides scroll past the image — pin it so it stays in view */ .article-split__media { position: sticky; top: calc(var(--header-height-sticky) + var(--space-6)); } } /* Eyebrow above the first article heading. Sits at the very top of the text column so it lines up with the top edge of the image beside it. */ .article-eyebrow { display: flex; /* block-level so it starts flush with the column top */ align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); color: var(--color-red); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; } .article-eyebrow::before { width: 28px; height: 2px; background: var(--color-red); content: ""; } /* The eyebrow takes the top slot, so the heading that follows it loses the large gap it normally carries. */ .article-split .article-layout > .article-eyebrow + h2 { margin-top: 0; } /* ========================================================================== ProjectOverview — copy on the left, details table on the right ========================================================================== */ /* Two content sections stacked back-to-back would otherwise add their full padding together, leaving a 192px void between them. */ .section--tight-top { padding-top: clamp(28px, 4vw, 48px); } .section--tight-bottom { padding-bottom: clamp(28px, 4vw, 48px); } .project-overview { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } .project-overview__body h2 { margin-bottom: var(--space-5); color: var(--color-black); } .project-overview__body p { margin: 0; color: var(--color-text-body); line-height: 1.75; } .project-overview__body p + p { margin-top: var(--space-4); } /* Red details panel */ .project-details { padding: var(--space-6); background: var(--color-accent-band); color: var(--color-white); } .project-details__heading { margin: 0 0 var(--space-5); color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; } /* Square-bordered table frame */ .project-details__table-wrap { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.4); } .project-details__table { width: 100%; border-collapse: collapse; } .project-details__table th, .project-details__table td { padding: 14px 16px; font-size: var(--text-sm); line-height: 1.5; text-align: left; vertical-align: top; } .project-details__table th { width: 42%; border-right: 1px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); font-weight: 600; } .project-details__table td { color: var(--color-white); font-weight: 700; } .project-details__table tr + tr th, .project-details__table tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.4); } @media (min-width: 900px) { .project-overview { grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr); gap: var(--space-8); align-items: start; } } @media (max-width: 767px) { .project-details { padding: var(--space-5); } .project-details__table th, .project-details__table td { padding: 11px 13px; } } /* ========================================================================== LuxuryCarousel — project gallery Cross-fading stage, thumbnail rail, counter, and click-to-zoom. ========================================================================== */ .lux-carousel { position: relative; } .lux-carousel__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-black); } .lux-carousel__track { position: absolute; inset: 0; } .lux-carousel__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 800ms ease; pointer-events: none; } .lux-carousel__slide.is-active { opacity: 1; pointer-events: auto; } .lux-carousel__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Slow push-in on the visible slide */ .lux-carousel__slide.is-active img { transform: scale(1.045); } /* Zoom affordance */ .lux-carousel__zoom { position: absolute; top: 50%; left: 50%; display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: rgba(17, 17, 17, 0.45); color: var(--color-white); cursor: zoom-in; opacity: 0; transform: translate(-50%, -50%) scale(0.88); transition: opacity 320ms ease, transform 320ms ease, background-color 320ms ease, border-color 320ms ease; } .lux-carousel__zoom .icon { width: 24px; height: 24px; } .lux-carousel__slide.is-active:hover .lux-carousel__zoom, .lux-carousel__zoom:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .lux-carousel__zoom:hover { background: var(--color-red); border-color: var(--color-red); } /* Prev / next */ .lux-carousel__nav { position: absolute; z-index: 3; top: 50%; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(17, 17, 17, 0.45); color: var(--color-white); cursor: pointer; transform: translateY(-50%); transition: background-color var(--motion-fast), border-color var(--motion-fast); } .lux-carousel__nav .icon { width: 22px; height: 22px; } .lux-carousel__nav--prev { left: 18px; } .lux-carousel__nav--next { right: 18px; } .lux-carousel__nav:hover, .lux-carousel__nav:focus-visible { background: var(--color-red); border-color: var(--color-red); } /* Counter */ .lux-carousel__counter { position: absolute; z-index: 3; right: 0; bottom: 0; padding: 12px 20px; background: var(--color-black); color: var(--color-white); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.16em; } .lux-carousel__counter b { color: var(--color-accent-line); font-weight: 700; } /* Thumbnail rail */ .lux-carousel__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .lux-carousel__thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--color-black); cursor: pointer; opacity: 0.45; transition: opacity var(--motion-fast); } .lux-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; } .lux-carousel__thumb::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--color-red); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1); } .lux-carousel__thumb:hover, .lux-carousel__thumb:focus-visible { opacity: 0.8; } .lux-carousel__thumb.is-active { opacity: 1; } .lux-carousel__thumb.is-active::after { transform: scaleX(1); } /* ========================================================================== Lightbox — click any gallery image to zoom ========================================================================== */ .lux-lightbox { position: fixed; z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); inset: 0; padding: clamp(16px, 4vw, 56px); background: rgba(10, 10, 10, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; } .lux-lightbox.is-open { opacity: 1; visibility: visible; } /* 78vh leaves room for the caption and the surrounding padding. A percentage max-height does not resolve here because the flex/grid area is content-sized. */ .lux-lightbox__img { max-width: 100%; max-height: 78vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: scale(0.96); transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1); } .lux-lightbox.is-open .lux-lightbox__img { transform: scale(1); } .lux-lightbox__close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(17, 17, 17, 0.6); color: var(--color-white); cursor: pointer; transition: background-color var(--motion-fast), border-color var(--motion-fast); } .lux-lightbox__close .icon { width: 22px; height: 22px; } .lux-lightbox__close:hover, .lux-lightbox__close:focus-visible { background: var(--color-red); border-color: var(--color-red); } .lux-lightbox__caption { flex-shrink: 0; margin: 0; color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); letter-spacing: 0.06em; text-align: center; } @media (max-width: 767px) { .lux-carousel__stage { aspect-ratio: 4 / 3; } .lux-carousel__nav { width: 44px; height: 44px; } .lux-carousel__nav--prev { left: 10px; } .lux-carousel__nav--next { right: 10px; } .lux-carousel__thumbs { gap: 6px; } .lux-carousel__counter { padding: 8px 14px; font-size: var(--text-xs); } } @media (prefers-reduced-motion: reduce) { .lux-carousel__slide, .lux-carousel__slide img, .lux-carousel__zoom, .lux-lightbox, .lux-lightbox__img, .lux-carousel__thumb::after { transition: none; } .lux-carousel__slide.is-active img { transform: none; } } /* ========================================================================== FAQ — accordion above the final CTA ========================================================================== */ .faq-section { background: var(--color-white); /* Own top spacing, on top of the preceding section's bottom padding. */ padding-top: 80px; } /* Scoped to out-rank `.section-heading h2` and `.section-heading p`, which are (0,1,1) and would otherwise win over a single class. */ .section-heading .faq-section__heading { margin: 0 0 var(--space-4); color: var(--color-black); font-family: var(--font-heading); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 41px; } .section-heading .faq-section__caption { max-width: 74ch; margin: 0 auto; color: var(--color-text-body); font-size: 14px; line-height: 26px; } .faq { display: grid; gap: 8px; max-width: 900px; margin: var(--space-7) auto 0; } .faq__item { border: 1px solid var(--color-border-light); background: var(--color-white); transition: background-color var(--motion-fast), border-color var(--motion-fast); } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 22px 26px; color: var(--color-black); font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 21px; cursor: pointer; list-style: none; } /* Hide the native disclosure triangle */ .faq__question::-webkit-details-marker { display: none; } .faq__question::marker { content: ""; } /* Plus / minus indicator */ .faq__icon { position: relative; flex: none; width: 18px; height: 18px; } .faq__icon::before, .faq__icon::after { position: absolute; top: 50%; left: 0; width: 18px; height: 2px; background: currentColor; content: ""; } .faq__icon::before { transform: translateY(-50%); } .faq__icon::after { transform: translateY(-50%) rotate(90deg); transition: transform var(--motion-base); } .faq__item[open] .faq__icon::after { transform: translateY(-50%) rotate(0deg); } /* Open item fills with red. Uses the deepened accent-band red rather than the brand red — white body text only clears AA contrast on the darker tone. */ .faq__item[open] { border-color: var(--color-accent-band); background: var(--color-accent-band); } .faq__item[open] .faq__question { color: var(--color-white); } /* Animating wrapper. Padding lives on the inner

so that at height:0 the whole block (including its spacing) collapses cleanly. */ .faq__answer { overflow: hidden; height: auto; color: var(--color-white); font-size: 14px; font-weight: 400; line-height: 20px; } .faq__answer p { margin: 0; padding: 0 26px 24px; } @media (max-width: 767px) { .section-heading .faq-section__heading { font-size: 30px; line-height: 35px; } .faq__question { gap: var(--space-4); padding: 18px 18px; } .faq__answer p { padding: 0 18px 20px; } } /* ========================================================================== Legal Content ========================================================================== */ .legal-content { color: var(--color-text-body); } .legal-content h2 { margin-top: var(--space-7); margin-bottom: var(--space-4); color: var(--color-black); font-size: 28px; line-height: 30px; } .legal-content p + p { margin-top: var(--space-4); } .legal-notice { margin-bottom: var(--space-7); padding: var(--space-5); background: var(--color-bg-soft); border-left: 3px solid var(--color-red); } .legal-notice strong { display: block; margin-bottom: var(--space-2); color: var(--color-black); } .legal-notice p { margin: 0; } /* ========================================================================== Accent section band (red) — full-bleed coloured band with inverted content. Add class="section--accent" alongside class="section". ========================================================================== */ .section--accent { background: var(--color-accent-band); color: var(--color-white); } .section--accent .section-heading__title, .section--accent .section-heading h2, .section--accent h2, .section--accent h3 { color: var(--color-white); } .section--accent .section-heading__lead, .section--accent .section-heading p { color: rgba(255, 255, 255, 0.94); } .section--accent .section-heading__pill { border-color: rgba(255, 255, 255, 0.55); color: var(--color-white); } /* Cards on the band sit flush with the red, defined by a soft white rim */ .section--accent .nearby-grid__item { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: var(--color-white); } .section--accent .nearby-grid__item:hover, .section--accent .nearby-grid__item:focus-visible { background: rgba(17, 17, 17, 0.28); border-color: var(--color-white); color: var(--color-white); } .section--accent .nearby-grid__item p { color: var(--color-text-on-dark-muted); } /* ========================================================================== ProjectTiles — 4-up image cards with a slide-up CTA ========================================================================== */ .project-grid { display: grid; /* One per row on phones — the tiles carry a title and description, so they need the full width to stay readable. */ grid-template-columns: 1fr; gap: var(--card-gap); } @media (min-width: 600px) { .project-grid { grid-template-columns: repeat(2, 1fr); } } .project-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-black); /* Enlarges on hover; z-index keeps it above its neighbours */ transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 420ms ease; } .project-tile:hover, .project-tile:focus-visible { z-index: 3; transform: scale(1.035); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32); } .project-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* Legibility scrim, deepened on hover */ .project-tile::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0.8) 100%); content: ""; pointer-events: none; transition: opacity var(--motion-base); } .project-tile:hover img, .project-tile:focus-visible img { transform: scale(1.06); } /* Bottom stack: description (revealed on hover) above the CTA bar */ .project-tile__foot { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; } .project-tile__body { display: grid; gap: 4px; padding: 0 18px 14px; color: var(--color-white); opacity: 0; transform: translateY(10px); transition: opacity 300ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); } .project-tile:hover .project-tile__body, .project-tile:focus-visible .project-tile__body { opacity: 1; transform: translateY(0); } .project-tile__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); } .project-tile__text { font-size: var(--text-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.86); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); } /* CTA bar is now permanently visible — this used to be the hover state */ .project-tile__cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: 15px 18px; background: var(--color-red); color: var(--color-white); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; } .project-tile__cta .icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--motion-fast); } .project-tile:hover .project-tile__cta .icon, .project-tile:focus-visible .project-tile__cta .icon { transform: translateX(5px); } /* Touch devices have no hover, so an overlay would hide the photo behind the text. Stack them into a card instead: image, then copy, then the CTA. */ @media (hover: none) { .project-tile { display: flex; flex-direction: column; aspect-ratio: auto; background: var(--color-white); border: 1px solid var(--color-border-light); } .project-tile img, .project-tile:hover img, .project-tile:focus-visible img { aspect-ratio: 4 / 3; height: auto; transform: none; } /* The scrim only exists to make overlaid text readable */ .project-tile::after { display: none; } .project-tile:hover, .project-tile:focus-visible { transform: none; box-shadow: none; } .project-tile__foot { position: static; display: flex; flex: 1; flex-direction: column; } .project-tile__body { flex: 1; gap: 6px; padding: var(--space-4); background: var(--color-white); opacity: 1; transform: none; } .project-tile__title, .project-tile__text { text-shadow: none; } .project-tile__title { color: var(--color-black); } .project-tile__text { color: var(--color-text-body); } } @media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(4, 1fr); } } /* 3-up variant used by the "Related Projects" grids on service pages */ @media (min-width: 600px) { .project-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .project-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { .project-tile img, .project-tile__cta, .project-tile__cta .icon { transition: none; } } /* ========================================================================== Nearby Areas Grid ========================================================================== */ .nearby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); } .nearby-grid__item { display: block; padding: var(--space-4); background: var(--color-bg-soft); border: 1px solid var(--color-border-light); font-weight: 600; color: var(--color-black); transition: border-color var(--motion-fast), color var(--motion-fast); } .nearby-grid__item:hover, .nearby-grid__item:focus-visible { border-color: var(--color-red); color: var(--color-red); } .nearby-grid__item h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); color: inherit; } .nearby-grid__item p { margin: 0; font-size: 0.9rem; font-weight: 400; color: var(--color-text-body); } @media (min-width: 768px) { .nearby-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .nearby-grid { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== Article / Guide Layout ========================================================================== */ .article-layout { max-width: var(--container-narrow); } .article-layout h2 { margin-top: var(--space-8); } .article-layout p { line-height: 1.8; } .article-layout ul { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-5); } .article-layout ul li { margin-bottom: var(--space-2); } /* ========================================================================== Gallery Grid ========================================================================== */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); } .gallery-grid__item { background: none; border: none; padding: 0; display: block; width: 100%; position: relative; overflow: hidden; } .gallery-grid__item img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Form Status Messages ========================================================================== */ .form-status { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-red); border-left-width: 4px; background: rgba(224, 60, 49, 0.08); color: var(--color-black); font-weight: 700; } .form-status--success { border-color: var(--color-success); background: rgba(47, 125, 74, 0.1); } .form-status--error, .form-status--invalid { border-color: var(--color-error); background: rgba(179, 58, 58, 0.1); } /* ========================================================================== Page-specific hero image classes ========================================================================== */ /* All inner-page heroes share one banner image; the About page has its own. */ .inner-hero--services, .inner-hero--locations, .inner-hero--projects, .inner-hero--guides, .inner-hero--contact, .inner-hero--building, .inner-hero--roofing, .inner-hero--developments, .inner-hero--plumbing, .inner-hero--suppliers { --inner-hero-image: url("/assets/images/slider/sub-pages-hero-sections.webp"); } .inner-hero--about { --inner-hero-image: url("/assets/images/slider/about-us-hero.webp"); } /* Narrow screens get the 1280px copies. This block must stay after the modifiers above, or they would win the cascade. head.php preloads the same files with matching media queries. */ @media (max-width: 800px) { .inner-hero--image, .inner-hero--locations, .inner-hero--projects, .inner-hero--guides, .inner-hero--contact, .inner-hero--building, .inner-hero--roofing, .inner-hero--developments, .inner-hero--plumbing, .inner-hero--suppliers { --inner-hero-image: url("/assets/images/slider/sub-pages-hero-sections-1280.webp"); } .inner-hero--about { --inner-hero-image: url("/assets/images/slider/about-us-hero-1280.webp"); } }