/* ========================================================================== Builders Alliance — Custom Overrides This file contains CSS custom properties (variables) for the light/dark color system derived from: - Figma design (homepage Variation 1B) - Go Arch light/dark theme color mapping LIGHT MODE: Default (no class needed) DARK MODE: Add class "dark-mode" to Sessions: Use var(--ba-*) variables instead of hardcoded colors. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONT VARIABLES -------------------------------------------------------------------------- Font origins: - Oswald: Go Arch — headings, titles, nav labels - Montserrat: Go Arch — body text, buttons, UI elements - Poppins: Larson (via Figma) — body alt, descriptions, captions -------------------------------------------------------------------------- */ :root { /* --- Font Families --- */ --ba-font-heading: 'Oswald', sans-serif; --ba-font-body: 'Montserrat', sans-serif; --ba-font-body-alt: 'Poppins', sans-serif; /* --- Font Weights --- */ --ba-weight-light: 300; --ba-weight-regular: 400; --ba-weight-bold: 700; /* --- Font Sizes (exact Figma values) --- */ --ba-fs-xs: 12px; /* strip index, small labels */ --ba-fs-sm: 13px; /* nav links, phone, toggle */ --ba-fs-base: 14px; /* CTA buttons */ --ba-fs-md: 15px; /* strip title/location, body alt */ --ba-fs-body: 16px; /* prev/next controls, default body */ --ba-fs-lg: 18px; /* large body, small headings */ --ba-fs-copy-xl: 20px; /* hero description */ --ba-fs-xl: 24px; /* counter total "/ 04" */ --ba-fs-2xl: 25px; /* section sub-headings */ --ba-fs-3xl: 30px; /* section titles */ --ba-fs-4xl: 35px; /* sub-hero headings */ --ba-fs-5xl: 48px; /* logo "BUILDERS ALLIANCE" */ --ba-fs-6xl: 50px; /* hero title */ --ba-fs-hero: 96px; /* slide counter "01" */ /* --- Line Heights (exact Figma values) --- */ --ba-lh-tight: 16px; /* prev/next controls */ --ba-lh-btn: 20px; /* CTA buttons */ --ba-lh-nav: 21.38px;/* nav links, phone, toggle */ --ba-lh-strip-index: 22px; /* strip index "01" */ --ba-lh-strip: 25px; /* strip title, strip location */ --ba-lh-body: 26.4px; /* body paragraphs */ --ba-lh-subtitle: 33px; /* col-about-title (30px h3) */ --ba-lh-service: 24.3px; /* service item labels (18px h4) */ --ba-lh-desc: 38.5px; /* hero description, section title */ --ba-lh-logo: 48px; /* logo stacked text */ --ba-lh-hero-title: 80px; /* hero title */ --ba-lh-hero: 96px; /* slide counter "01" */ /* --- Letter Spacing (exact Figma values) --- */ --ba-ls-none: 0; /* logo, hero desc, strip items */ --ba-ls-wide: 2.1px; /* CTA button */ --ba-ls-wider: 2.4px; /* counter total "/ 04" */ --ba-ls-widest: 3.6px; /* section labels */ --ba-ls-nav: 4.147px;/* nav links, phone, toggle — most used */ --ba-ls-spread: 4.8px; /* testimonial names */ --ba-ls-controls: 5.12px; /* prev/next controls */ --ba-ls-display: 9.6px; /* slide counter "01" */ --ba-ls-ultra: 11.2px; /* uppercase hero labels */ --ba-ls-hero-title: 16px; /* hero title "THE ART OF EXECUTION" */ } /* -------------------------------------------------------------------------- 2. COLOR VARIABLES -------------------------------------------------------------------------- */ :root { /* --- Backgrounds --- */ --ba-bg-primary: #ffffff; --ba-bg-secondary: #f4f4f4; --ba-bg-tertiary: #f6f5f3; /* --- Text --- */ --ba-text-primary: #3d3d3d; --ba-text-secondary: #757575; --ba-text-muted: #999999; --ba-text-mid: #666666; --ba-text-dark: #363636; --ba-text-black: #111111; /* --- Accent / Brand Gold --- */ --ba-accent: #c5a47e; --ba-accent-secondary: #b19777; --ba-accent-hover: #cc9f6b; --ba-accent-overlay: rgba(197, 164, 126, 0.84); --ba-accent-shadow: rgba(197, 164, 126, 0.5); /* --- Borders & Dividers --- */ --ba-border: #c5c4c2; --ba-border-light: #ebebeb; --ba-border-subtle: #ededed; /* --- Panels --- */ --ba-panel-strip: #ebebeb; /* hero strip background per Figma */ /* --- UI / Overlays --- */ --ba-nav-bg: rgba(255, 255, 255, 0.95); --ba-overlay-subtle: rgba(0, 0, 0, 0.05); --ba-overlay-medium: rgba(0, 0, 0, 0.1); --ba-overlay-dark: rgba(0, 0, 0, 0.6); --ba-shadow: rgba(197, 164, 126, 0.5); /* --- Buttons --- */ --ba-btn-bg: #f3f3f3; --ba-btn-text: #666666; /* --- Vertical Page Lines --- */ --ba-page-line-color-content: rgba(61, 61, 61, 0.06); --ba-page-line-color-overlay: rgba(255, 255, 255, 0.08); --ba-page-line-1: calc(50% - 570px); --ba-page-line-2: calc(50% - 190px); --ba-page-line-3: calc(50% + 190px); --ba-page-line-4: calc(50% + 570px); } body.dark-mode { /* --- Backgrounds --- */ --ba-bg-primary: #272727; --ba-bg-secondary: #2b2b2b; --ba-bg-tertiary: #323232; /* --- Text --- */ --ba-text-primary: #ffffff; --ba-text-secondary: rgba(255, 255, 255, 0.5); --ba-text-muted: #686868; --ba-text-mid: #5e5e5e; --ba-text-dark: #ededed; --ba-text-black: #ffffff; /* --- Accent / Brand Gold (stays the same) --- */ --ba-accent: #c5a47e; --ba-accent-secondary: #b19777; --ba-accent-hover: #d4b08a; --ba-accent-overlay: rgba(197, 164, 126, 0.84); --ba-accent-shadow: rgba(0, 0, 0, 0.3); /* --- Borders & Dividers --- */ --ba-border: #646464; --ba-border-light: #474747; --ba-border-subtle: #474747; /* --- Panels --- */ --ba-panel-strip: #323232; /* dark equivalent of #ebebeb strip */ /* --- UI / Overlays --- */ --ba-nav-bg: rgba(50, 50, 50, 0.95); --ba-overlay-subtle: rgba(255, 255, 255, 0.05); --ba-overlay-medium: rgba(255, 255, 255, 0.1); --ba-overlay-dark: rgba(0, 0, 0, 0.6); --ba-shadow: rgba(0, 0, 0, 0.3); /* --- Buttons --- */ --ba-btn-bg: #323232; --ba-btn-text: #ffffff; /* --- Vertical Page Lines --- */ --ba-page-line-color-content: rgba(255, 255, 255, 0.08); } /* -------------------------------------------------------------------------- Global Loader -------------------------------------------------------------------------- */ .ba-loader { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.985); transition: opacity 0.45s ease, visibility 0.45s ease; } .ba-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .ba-loader__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 260px; min-height: 260px; padding: 28px; } .ba-loader__spinner { position: relative; width: 180px; height: 180px; border-radius: 50%; border: 3px solid rgba(0, 40, 86, 0.3); } .ba-loader__spinner::before { content: ""; position: absolute; border-radius: 50%; inset: -7px; background: conic-gradient( from 0deg, rgba(0, 40, 86, 0.2) 0deg 288deg, #002856 288deg 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); animation: baLoaderRingRotate 1s linear infinite; } .ba-loader__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .ba-loader__icon { width: 78px; height: auto; } .ba-loader__part { fill: #002856; fill-opacity: 0; stroke: rgba(0, 40, 86, 0.25); stroke-width: 2; animation: baLoaderPartReveal 2.4s ease infinite; } .ba-loader__part--middle { animation-delay: 0s; } .ba-loader__part--bottom { animation-delay: 0.25s; } .ba-loader__part--body { animation-delay: 0.5s; } @keyframes baLoaderPartReveal { 0%, 80%, 100% { fill-opacity: 0; } 15%, 58% { fill-opacity: 1; } } @keyframes baLoaderRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ba-loader__motto { font-family: var(--ba-font-body); font-weight: 800; font-size: 20px; letter-spacing: 4.5px; text-transform: uppercase; color: #002856; margin: 24px 0 0; white-space: nowrap; position: relative; } .ba-loader__tm { font-size: 7px; font-weight: 800; letter-spacing: 0; vertical-align: super; margin-left: 2px; } body.dark-mode .ba-loader { background: rgba(39, 39, 39, 0.97); } body.dark-mode .ba-loader__spinner { border-color: #ffffff; } body.dark-mode .ba-loader__spinner::before { background: conic-gradient( from 0deg, rgba(0, 40, 86, 0.22) 0deg 288deg, #002856 288deg 360deg ); } body.dark-mode .ba-loader__part { fill: #ffffff; stroke: rgba(255, 255, 255, 0.3); } body.dark-mode .ba-loader__motto { color: #ffffff; } @media (max-width: 767px) { .ba-loader__inner { min-width: 210px; min-height: 210px; padding: 20px; } .ba-loader__spinner { width: 150px; height: 150px; } .ba-loader__icon { width: 64px; } .ba-loader__motto { font-size: 13px; letter-spacing: 4.5px; margin-top: 18px; } } /* -------------------------------------------------------------------------- Cursor + Scroll Top -------------------------------------------------------------------------- */ .ba-mouse-pointer { position: fixed; top: 50%; left: -100px; width: 10px; height: 10px; pointer-events: none; box-sizing: border-box; z-index: 9999; transition-property: width, height, background; transition-timing-function: cubic-bezier(.19, .94, .336, 1); border-radius: 50%; overflow: hidden; font-size: 16px; text-indent: 0; border: none; mix-blend-mode: normal; background-color: #111111; box-shadow: 0 0 0 transparent; transform: translate(200%, 200%); opacity: 0.9; } body.dark-mode .ba-mouse-pointer { background-color: #ffffff; } body.out .ba-mouse-pointer { width: 0; height: 0; } .ba-scroll-top { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: clamp(44px, 4.8vw, 56px); height: clamp(44px, 4.8vw, 56px); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ba-accent); color: #ffffff; box-shadow: 0 16px 30px rgba(197, 164, 126, 0.26); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease; z-index: 9998; } .ba-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .ba-scroll-top:hover, .ba-scroll-top:focus { background: var(--ba-accent-hover); box-shadow: 0 18px 34px rgba(197, 164, 126, 0.34); outline: none; } .ba-scroll-top__icon { display: block; width: 10px; height: 10px; border-top: 3px solid #ffffff; border-right: 3px solid #ffffff; transform: rotate(-45deg) translateY(2px); } body.dark-mode .ba-scroll-top { color: #ffffff; } @media (hover: none), (pointer: coarse) { .ba-mouse-pointer { display: none; } } @media (max-width: 767px) { .ba-scroll-top { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); } } /* -------------------------------------------------------------------------- Global Page-Load Reveal -------------------------------------------------------------------------- */ html.ba-js body:not(.ba-page-ready) .ba-header, html.ba-js body:not(.ba-page-ready) .layout > .ba-hero, html.ba-js body:not(.ba-page-ready) .layout > .ba-inner-hero, html.ba-js body:not(.ba-page-ready) .content > *, html.ba-js body:not(.ba-page-ready) .footer { opacity: 0; transform: translateY(18px); } html.ba-js .ba-header, html.ba-js .layout > .ba-hero, html.ba-js .layout > .ba-inner-hero, html.ba-js .content > *, html.ba-js .footer { transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } html.ba-js body.ba-page-ready .ba-header { transition-delay: 0.04s; } html.ba-js body.ba-page-ready .layout > .ba-hero, html.ba-js body.ba-page-ready .layout > .ba-inner-hero { transition-delay: 0.1s; } html.ba-js body.ba-page-ready .content > * { transition-delay: 0.16s; } html.ba-js body.ba-page-ready .footer { transition-delay: 0.22s; } @media (prefers-reduced-motion: reduce) { html.ba-js .ba-header, html.ba-js .layout > .ba-hero, html.ba-js .layout > .ba-inner-hero, html.ba-js .content > *, html.ba-js .footer, .ba-loader, .ba-loader__spinner, .ba-loader__spinner::before, .ba-loader__letter, .ba-loader__letter::before { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; } } /* -------------------------------------------------------------------------- Scroll Reveal -------------------------------------------------------------------------- */ html.ba-js .ba-scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--ba-reveal-delay, 0ms); will-change: opacity, transform; } html.ba-js .ba-scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.ba-js .ba-scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- Media Motion -------------------------------------------------------------------------- */ .ba-media-motion { overflow: hidden; } .ba-media-motion__asset { transform: translate3d(0, 18px, 0) scale(1.045); transform-origin: center center; transition: transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } .ba-media-motion.is-visible .ba-media-motion__asset { transform: translate3d(0, 0, 0) scale(1); } .ba-projects-grid .project figure.ba-media-motion, .ba-blog-list .blog-thumbnail-img.ba-media-motion, .ba-single-post__figure.ba-media-motion { border-radius: inherit; } @media (max-width: 767px) { .ba-media-motion__asset { transform: translate3d(0, 12px, 0) scale(1.025); } } @media (prefers-reduced-motion: reduce) { .ba-media-motion__asset { transform: none !important; transition: none !important; } } @media (max-width: 1199px) { :root { --ba-page-line-1: calc(50% - 470px); --ba-page-line-2: calc(50% - 156.67px); --ba-page-line-3: calc(50% + 156.67px); --ba-page-line-4: calc(50% + 470px); } } @media (max-width: 991px) { :root { --ba-page-line-1: calc(50% - 360px); --ba-page-line-2: calc(50% - 120px); --ba-page-line-3: calc(50% + 120px); --ba-page-line-4: calc(50% + 360px); } } @media (max-width: 767px) { :root { --ba-page-line-1: 15px; --ba-page-line-2: calc(15px + ((100% - 30px) / 3)); --ba-page-line-3: calc(15px + (((100% - 30px) * 2) / 3)); --ba-page-line-4: calc(100% - 15px); } } /* ========================================================================== 3. GO ARCH BASE OVERRIDES ========================================================================== Go Arch css/style.css is the DARK variant and hardcodes dark backgrounds. We override them here with our CSS variables so light mode = white, dark mode = dark (matching the original Go Arch colors). ========================================================================== */ /* Body: the main culprit — Go Arch sets #272727 bg + white text */ body { background-color: var(--ba-bg-primary) !important; color: var(--ba-text-secondary); } *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Go Arch brand panel (if still used on inner pages) */ .brand-panel { background: var(--ba-bg-primary) !important; } .brand-panel .brand__info { background-color: var(--ba-bg-secondary) !important; } /* Go Arch vertical panel */ .vertical-panel { background-color: var(--ba-bg-secondary) !important; } /* Go Arch content sections */ .content { background-color: var(--ba-bg-primary); } /* Global vertical guide lines across the regular content area. Heroes keep their own line overlays; all non-hero sections and the footer share one centralized content-layer line system. */ .content { position: relative; isolation: isolate; } .content::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--ba-page-line-color-content), var(--ba-page-line-color-content)), linear-gradient(var(--ba-page-line-color-content), var(--ba-page-line-color-content)), linear-gradient(var(--ba-page-line-color-content), var(--ba-page-line-color-content)), linear-gradient(var(--ba-page-line-color-content), var(--ba-page-line-color-content)); background-repeat: no-repeat; background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%; background-position: var(--ba-page-line-1) 0, var(--ba-page-line-2) 0, var(--ba-page-line-3) 0, var(--ba-page-line-4) 0; } .content > * { position: relative; z-index: 1; } /* The old end-of-content line markup becomes redundant once content lines are centralized. */ .content > .page-lines { display: none; } /* Go Arch section backgrounds that default to dark */ .section-default { background-color: var(--ba-bg-primary); } /* Go Arch text color overrides */ .layout p, .layout .section-default p { color: var(--ba-text-secondary); } .layout h1, .layout h2, .layout h3, .layout h4, .layout h5, .layout h6 { color: var(--ba-text-primary); } /* Go Arch accent color (keep gold) */ .text-primary { color: var(--ba-accent) !important; } /* Go Arch project details bg */ .project-details-item:nth-child(even) .project-details-info { background-color: var(--ba-bg-secondary) !important; } /* Magnific popup overlay */ .mfp-bg { background-color: var(--ba-bg-primary) !important; } /* Go Arch footer area */ .footer-default { background-color: var(--ba-bg-primary); color: var(--ba-text-secondary); } /* ========================================================================== 4. HEADER ========================================================================== */ /* --- Header: Transparent overlay on hero --- */ .ba-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; padding: 0; } .ba-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 34px 58px 0; position: relative; } .ba-header-right { display: flex; align-items: center; gap: 80px; } /* --- Logo --- */ .ba-logo { display: flex; text-decoration: none; line-height: 1; flex-shrink: 0; } .ba-logo-img { max-width: 200px; height: auto; transition: filter 0.25s ease; } .ba-logo:hover .ba-logo-img { filter: brightness(1.4); } .ba-logo:hover, .ba-logo:focus { text-decoration: none; } /* --- Phone number --- */ .ba-header-phone { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-light); font-size: var(--ba-fs-sm); line-height: var(--ba-lh-nav); letter-spacing: var(--ba-ls-nav); text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; margin-left: auto; /* push phone + nav + toggle to the right of logo */ } .ba-header-phone:hover { color: var(--ba-accent); text-decoration: none; } /* --- Desktop Navigation --- */ .ba-header-nav { display: flex; align-items: center; } .ba-nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 66px; } .ba-nav-menu li { position: relative; } .ba-nav-menu li a { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-light); font-size: var(--ba-fs-sm); line-height: var(--ba-lh-nav); letter-spacing: var(--ba-ls-nav); text-transform: uppercase; color: #fff; text-decoration: none; transition: color 0.3s ease; white-space: nowrap; } .ba-nav-menu li a:hover, .ba-nav-menu li.current-menu-item > a, .ba-nav-menu li.active > a { color: var(--ba-accent); } /* Dropdown submenu */ .ba-nav-menu li ul { display: none; position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.85); padding: 18px 0; min-width: 200px; z-index: 110; list-style: none; margin: 0; border-radius: 8px; } .ba-nav-menu li:hover > ul { display: block; } .ba-nav-menu li ul li a { display: block; padding: 12px 25px; font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-xs); letter-spacing: 1.5px; text-transform: uppercase; } /* --- Light / Dark Toggle --- */ .ba-theme-toggle { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .ba-toggle-label { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-light); font-size: var(--ba-fs-sm); line-height: var(--ba-lh-nav); letter-spacing: var(--ba-ls-nav); text-transform: uppercase; color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: color 0.3s ease; } .ba-toggle-label.active { color: var(--ba-accent); } .ba-toggle-divider { font-family: var(--ba-font-heading); font-size: var(--ba-fs-sm); color: rgba(255, 255, 255, 0.3); margin: 0 2px; } /* Toggle switch */ .ba-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; cursor: pointer; } .ba-toggle-switch input { opacity: 0; width: 0; height: 0; } .ba-toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.2); border: 1px solid var(--ba-accent); border-radius: 24px; transition: all 0.3s ease; } .ba-toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: var(--ba-accent); border-radius: 50%; transition: transform 0.3s ease; } .ba-toggle-switch input:checked + .ba-toggle-slider { background-color: rgba(255, 255, 255, 0.1); border-color: var(--ba-accent); } .ba-toggle-switch input:checked + .ba-toggle-slider::before { transform: translateX(20px); } /* Sun/Moon icons inside toggle pill */ .ba-toggle-icon { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; transition: opacity 0.3s ease; } .ba-toggle-icon--sun { left: 4px; opacity: 1; } .ba-toggle-icon--moon { left: 24px; opacity: 0; } /* When dark mode is checked, show moon, hide sun */ .ba-toggle-switch input:checked ~ .ba-toggle-slider .ba-toggle-icon--sun, .ba-toggle-switch input:checked + .ba-toggle-slider .ba-toggle-icon--sun { opacity: 0; } .ba-toggle-switch input:checked ~ .ba-toggle-slider .ba-toggle-icon--moon, .ba-toggle-switch input:checked + .ba-toggle-slider .ba-toggle-icon--moon { opacity: 1; } /* --- Mobile Header (hidden on desktop) --- */ .ba-mobile-nav-shell { display: none; position: relative; z-index: 102; } .ba-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 0; } .ba-logo-mobile .ba-logo-line { font-size: 30px; line-height: 30px; color: var(--ba-border); } .ba-hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; width: 30px; height: 24px; align-items: stretch; justify-content: center; } .ba-hamburger-bar { width: 30px; height: 2px; background-color: #ffffff; transition: all 0.3s ease; transform-origin: center; } .ba-hamburger.is-open .ba-hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ba-hamburger.is-open .ba-hamburger-bar:nth-child(2) { opacity: 0; } .ba-hamburger.is-open .ba-hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .ba-mobile-menu { display: none; position: absolute; top: calc(100% + 12px); left: 20px; right: 20px; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(61, 61, 61, 0.08); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12); padding: 12px 22px 24px; } .ba-mobile-menu.open { display: block; } .ba-mobile-menu-list, .ba-mobile-menu .ba-nav-menu { list-style: none; margin: 0; padding: 0; display: block; } .ba-mobile-menu-list li, .ba-mobile-menu .ba-nav-menu li { border-top: 1px solid rgba(61, 61, 61, 0.08); margin: 0; position: relative; } .ba-mobile-menu-list li.menu-item-has-children > a, .ba-mobile-menu .ba-nav-menu li.menu-item-has-children > a { padding-right: 46px; } .ba-mobile-menu-list li:first-child, .ba-mobile-menu .ba-nav-menu li:first-child { border-top: 0; } .ba-mobile-menu-list li a, .ba-mobile-menu .ba-nav-menu li a { display: block; font-family: var(--ba-font-heading); font-weight: var(--ba-weight-light); font-size: 15px; line-height: 1.4; letter-spacing: var(--ba-ls-nav); text-transform: uppercase; color: var(--ba-text-primary); text-decoration: none; padding: 15px 2px 14px; transition: color 0.3s ease; white-space: normal; } .ba-mobile-menu-list li a:hover, .ba-mobile-menu .ba-nav-menu li a:hover, .ba-mobile-menu-list li.current-menu-item > a, .ba-mobile-menu .ba-nav-menu li.current-menu-item > a { color: var(--ba-accent); } .ba-mobile-submenu-toggle { position: absolute; top: 0; right: 0; width: 42px; height: 46px; border: 0; background: transparent; padding: 0; cursor: pointer; } .ba-mobile-submenu-toggle::before { content: ''; display: block; width: 10px; height: 10px; margin: 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--ba-accent); transform: rotate(45deg); transition: transform 0.25s ease; } .ba-mobile-menu-list li.is-open > .ba-mobile-submenu-toggle::before, .ba-mobile-menu .ba-nav-menu li.is-open > .ba-mobile-submenu-toggle::before { transform: rotate(225deg); } .ba-mobile-menu-list li ul, .ba-mobile-menu .ba-nav-menu li ul { display: none; list-style: none; margin: 0; padding: 0 0 10px 18px; } .ba-mobile-menu-list li.is-open > ul, .ba-mobile-menu .ba-nav-menu li.is-open > ul { display: block; } .ba-mobile-menu-list li ul li, .ba-mobile-menu .ba-nav-menu li ul li { border-top: 0; } .ba-mobile-menu-list li ul li a, .ba-mobile-menu .ba-nav-menu li ul li a { font-size: 13px; letter-spacing: 3px; padding: 9px 2px; } .ba-mobile-theme-toggle { display: flex; align-items: center; gap: 8px; margin-top: 0; padding-top: 10px; padding-bottom: 2px; border-top: 1px solid rgba(61, 61, 61, 0.08); } .ba-mobile-theme-toggle .ba-toggle-label { color: rgba(61, 61, 61, 0.62); } .ba-mobile-theme-toggle .ba-toggle-label.active { color: var(--ba-accent); } .ba-mobile-theme-toggle .ba-toggle-divider { color: rgba(61, 61, 61, 0.3); } /* --- Responsive: switch to mobile header below 1150px --- */ @media (max-width: 1150px) { .ba-header-inner { display: none; } .ba-mobile-nav-shell { display: block; } } /* --- When NOT over the hero (inner pages), use solid background --- */ .ba-header--solid { background-color: var(--ba-bg-primary); position: relative; } .ba-header--solid .ba-logo-line { color: var(--ba-text-primary); } .ba-header--solid .ba-header-phone, .ba-header--solid .ba-nav-menu li a { color: var(--ba-text-primary); } .ba-header--solid .ba-toggle-label { color: var(--ba-text-muted); } .ba-header--solid .ba-toggle-label.active { color: var(--ba-accent); } .ba-header--solid .ba-toggle-divider { color: var(--ba-text-muted); } .ba-header--solid .ba-toggle-slider { background-color: var(--ba-border-light); border-color: var(--ba-accent); } .ba-header--solid .ba-hamburger-bar { background-color: var(--ba-text-primary); } .ba-header--solid .ba-mobile-menu { background: rgba(255, 255, 255, 0.97); border-color: rgba(61, 61, 61, 0.08); } .ba-header--solid .ba-mobile-menu-list li, .ba-header--solid .ba-mobile-menu .ba-nav-menu li, .ba-header--solid .ba-mobile-theme-toggle { border-top-color: rgba(61, 61, 61, 0.08); } .ba-header--solid .ba-mobile-menu-list li a, .ba-header--solid .ba-mobile-menu .ba-nav-menu li a { color: var(--ba-text-primary); } .ba-header--solid .ba-mobile-menu-list li a:hover, .ba-header--solid .ba-mobile-menu .ba-nav-menu li a:hover, .ba-header--solid .ba-mobile-menu-list li.current-menu-item > a, .ba-header--solid .ba-mobile-menu .ba-nav-menu li.current-menu-item > a { color: var(--ba-accent); } body.dark-mode .ba-mobile-header { background: transparent; box-shadow: none; } body.dark-mode .ba-logo-mobile .ba-logo-line { color: #ffffff; background: none; } body.dark-mode .ba-hamburger-bar { background-color: #ffffff; } body.dark-mode .ba-mobile-menu { background: rgba(43, 43, 43, 0.96); border-color: rgba(197, 164, 126, 0.18); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22); } body.dark-mode .ba-mobile-menu-list li, body.dark-mode .ba-mobile-menu .ba-nav-menu li, body.dark-mode .ba-mobile-theme-toggle { border-top-color: rgba(255, 255, 255, 0.1); } body.dark-mode .ba-mobile-menu-list li a, body.dark-mode .ba-mobile-menu .ba-nav-menu li a { color: #ffffff; } body.dark-mode .ba-mobile-menu-list li a:hover, body.dark-mode .ba-mobile-menu .ba-nav-menu li a:hover, body.dark-mode .ba-mobile-menu-list li.current-menu-item > a, body.dark-mode .ba-mobile-menu .ba-nav-menu li.current-menu-item > a, body.dark-mode .ba-mobile-menu-list li.current-menu-ancestor > a, body.dark-mode .ba-mobile-menu .ba-nav-menu li.current-menu-ancestor > a { color: var(--ba-accent); } body.dark-mode .ba-mobile-theme-toggle .ba-toggle-label { color: rgba(255, 255, 255, 0.5); } body.dark-mode .ba-mobile-theme-toggle .ba-toggle-label.active { color: var(--ba-accent); } body.dark-mode .ba-mobile-theme-toggle .ba-toggle-divider { color: rgba(255, 255, 255, 0.3); } /* ========================================================================== 5. HERO SECTION ========================================================================== */ /* --- Hero wrapper: full viewport, relative for overlays --- */ .ba-hero { position: relative; min-height: 100vh; overflow: hidden; background-color: #1a1a1a; } /* --- RevSlider wrapper inside hero --- */ .ba-hero .rev_slider_wrapper { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; } .ba-hero .rev_slider { position: relative; height: 100% !important; } .ba-hero .rev_slider::after { display: none; } .ba-hero .rev_slider .slotholder::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.60) 100%); } .ba-hero-page-lines { z-index: 2; pointer-events: none; background-image: linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)), linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)), linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)), linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)); background-repeat: no-repeat; background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%; background-position: var(--ba-page-line-1) 0, var(--ba-page-line-2) 0, var(--ba-page-line-3) 0, var(--ba-page-line-4) 0; } .ba-hero-page-lines .container, .ba-inner-hero .page-lines .container { display: none; } .ba-inner-hero .page-lines { z-index: 1; pointer-events: none; background-image: linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)), linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)), linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)), linear-gradient(var(--ba-page-line-color-overlay), var(--ba-page-line-color-overlay)); background-repeat: no-repeat; background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%; background-position: var(--ba-page-line-1) 0, var(--ba-page-line-2) 0, var(--ba-page-line-3) 0, var(--ba-page-line-4) 0; } /* --- Slide text styles --- */ .ba-hero .slide-title { font-family: var(--ba-font-heading) !important; font-weight: var(--ba-weight-regular) !important; font-size: 42px !important; line-height: var(--ba-lh-hero-title) !important; color: #fff !important; text-transform: uppercase !important; letter-spacing: var(--ba-ls-hero-title) !important; text-align: right !important; margin-right: calc(var(--ba-ls-hero-title) * -1) !important; padding: 0 !important; } .ba-hero .ba-hero-slide-counter { display: inline-flex !important; align-items: flex-start !important; color: #ffffff !important; text-align: right !important; padding: 0 !important; } .ba-hero .ba-hero-slide-counter__current { color: var(--ba-accent) !important; font-family: var(--ba-font-heading) !important; font-size: var(--ba-fs-hero) !important; font-weight: var(--ba-weight-regular) !important; letter-spacing: var(--ba-ls-display) !important; line-height: var(--ba-lh-hero) !important; } .ba-hero .ba-hero-slide-counter__total { color: var(--ba-text-mid) !important; font-family: var(--ba-font-heading) !important; font-size: var(--ba-fs-xl) !important; font-weight: var(--ba-weight-regular) !important; letter-spacing: var(--ba-ls-wider) !important; line-height: 1 !important; margin-left: 12px; margin-top: 16px; } .ba-hero .slide-subtitle { font-family: var(--ba-font-body) !important; font-weight: var(--ba-weight-regular) !important; font-size: var(--ba-fs-copy-xl) !important; line-height: var(--ba-lh-desc) !important; color: rgba(255, 255, 255, 0.9) !important; text-align: right !important; padding: 0 !important; } /* --- CTA Button (pill shape, gold) --- */ .ba-hero-cta { display: inline-flex; align-items: center; gap: 0; background-color: var(--ba-accent); color: #fff; font-family: var(--ba-font-body); font-size: var(--ba-fs-base); font-weight: var(--ba-weight-regular); line-height: var(--ba-lh-btn); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; text-decoration: none; padding: 15px 31px; border-radius: 30px; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; white-space: nowrap; } .ba-hero-cta:hover, .ba-hero-cta:focus { background-color: var(--ba-accent); color: #fff; text-decoration: none; box-shadow: 0 0 18px rgba(197, 164, 126, 0.55), 0 0 36px rgba(197, 164, 126, 0.25); transform: translateY(-1px); } .ba-hero .ba-hero-cta-layer { padding: 0 !important; } .ba-hero .ba-hero-cta .icon-next { margin-left: 0.52em; } .ba-hero-cta-arrow { font-size: 18px; line-height: 1; } .btn, .ba-hero-cta, .ba-homepage-2-hero__cta { transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .btn .icon-next, .ba-hero-cta .icon-next, .ba-homepage-2-hero__cta-arrow { transition: transform 0.25s ease; } .btn:hover, .btn:focus, .ba-hero-cta:hover, .ba-hero-cta:focus, .ba-homepage-2-hero__cta:hover, .ba-homepage-2-hero__cta:focus { transform: translateY(-1px); } .btn:hover .icon-next, .btn:focus .icon-next, .ba-hero-cta:hover .icon-next, .ba-hero-cta:focus .icon-next, .ba-homepage-2-hero__cta:hover .ba-homepage-2-hero__cta-arrow, .ba-homepage-2-hero__cta:focus .ba-homepage-2-hero__cta-arrow { transform: translateX(2px); } /* --- Social Rail (left side, anchored to bottom of hero) --- */ .ba-hero-social-rail { position: absolute; left: 60px; bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 42px; width: 38px; z-index: 10; } .ba-hero-social-rail__line { display: block; width: 1px; height: 61px; background-color: rgba(255, 255, 255, 0.8); } .ba-hero-social-list { display: flex; flex-direction: column; gap: 34px; list-style: none; margin: 0; padding: 0; } .ba-hero-social-list a { color: #fff; font-size: 24px; text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; display: inline-flex; } .ba-hero-social-list a:hover, .ba-hero-social-list a:focus { color: var(--ba-accent); transform: translateY(-2px); } /* --- PREV / NEXT Controls --- */ .ba-hero-controls { position: absolute; bottom: 98px; left: 46%; transform: translateX(-50%); display: flex; gap: 42px; z-index: 10; } /* Override Go Arch arrow positioning — they use absolute by default, we position them inside the ba-hero-controls flex container instead */ .ba-hero-controls .ba-hero-control { position: static; font-family: var(--ba-font-heading); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); line-height: var(--ba-lh-tight); letter-spacing: var(--ba-ls-controls); } /* --- Bottom Project Strip --- */ .ba-hero-strip { position: absolute; bottom: 0; right: 0; width: min(975px, 100%); z-index: 10; display: flex; align-items: flex-end; } .ba-hero-strip::before { content: ''; position: absolute; top: 0; left: -86px; width: calc(100% + 86px); height: 150px; background-color: var(--ba-panel-strip); } /* Slide counter (big 01 / 04) */ .ba-hero-strip__counter { position: absolute; left: -72px; top: 18px; display: flex; align-items: flex-start; z-index: 2; } .ba-hero-strip__current { color: var(--ba-accent); font-family: var(--ba-font-heading); font-size: var(--ba-fs-hero); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-display); line-height: var(--ba-lh-hero); } .ba-hero-strip__total { color: var(--ba-text-mid); font-family: var(--ba-font-heading); font-size: var(--ba-fs-xl); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-wider); line-height: 0; margin-left: 12px; margin-top: 15px; } /* Project tab items */ .ba-hero-strip__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; z-index: 1; width: 100%; } .ba-hero-strip__items::after { content: ''; position: absolute; bottom: 0; left: var(--strip-indicator-x, 0); width: var(--strip-indicator-w, 25%); height: 2px; background-color: var(--ba-accent-secondary); transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .ba-hero-strip__item { background-color: transparent; min-height: auto; padding: 0 16px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; } .ba-hero-strip__index { display: block; font-family: var(--ba-font-body-alt); font-size: var(--ba-fs-xs); font-weight: var(--ba-weight-regular); color: var(--ba-text-secondary); line-height: var(--ba-lh-strip-index); } .ba-hero-strip__location { display: block; font-family: var(--ba-font-body-alt); font-size: var(--ba-fs-md); font-weight: var(--ba-weight-regular); color: var(--ba-text-secondary); line-height: var(--ba-lh-strip); } .ba-hero-strip__title { font-family: var(--ba-font-body-alt); font-size: var(--ba-fs-md); font-weight: var(--ba-weight-bold); color: var(--ba-text-secondary); line-height: var(--ba-lh-strip); margin: 0; text-transform: uppercase; } .ba-hero-strip__item.is-active .ba-hero-strip__index, .ba-hero-strip__item.is-active .ba-hero-strip__title, .ba-hero-strip__item.is-active .ba-hero-strip__location { color: var(--ba-accent-secondary); } /* --- Responsive: 1399px — tighten header + hero for 1280–1399px viewports --- */ @media (max-width: 1399px) { /* HEADER: reduce padding, nav gaps, toggle margin to fit ~1164px */ .ba-header-inner { padding: 34px 38px 0; gap: 24px; } .ba-nav-menu { gap: 36px; } .ba-theme-toggle { margin-left: 0; } .ba-header-phone { font-size: 12px; letter-spacing: 3.6px; } /* LOGO: shrink from 35px to 30px */ .ba-logo-line { font-size: var(--ba-fs-3xl); /* was: var(--ba-fs-4xl) = 35px */ line-height: var(--ba-fs-3xl); /* was: var(--ba-fs-4xl) = 35px */ } /* HERO SLIDE CONTENT: scale down for smaller viewports */ .ba-hero .slide-title { font-size: clamp(30px, 3.1vw, 40px) !important; line-height: clamp(44px, 4.6vw, 60px) !important; letter-spacing: clamp(8px, 0.8vw, 11px) !important; margin-right: calc(clamp(8px, 0.8vw, 11px) * -1) !important; } .ba-hero .ba-hero-slide-counter__current { font-size: 78px !important; line-height: 78px !important; } .ba-hero .slide-subtitle { font-size: 17px !important; /* was: 20px (--ba-fs-copy-xl) */ line-height: 32px !important; /* was: 38.5px (--ba-lh-desc) */ } /* HERO */ .ba-hero-social-rail { left: 40px; } .ba-hero-controls { left: 49%; } } @media (max-width: 1199px) { .ba-hero-strip { width: min(100%, 860px); } .ba-hero-strip::before { left: 0; width: 100%; } .ba-hero-strip__counter { left: 22px; } .ba-hero-strip__items { padding-left: 200px; } .ba-hero-controls { bottom: 124px; gap: 28px; left: 52%; } } @media (max-width: 991px) { .ba-hero-social-rail { bottom: 60px; gap: 28px; left: 18px; } .ba-hero-social-list { gap: 22px; } .ba-hero-social-list a { font-size: 20px; } .ba-hero-controls { bottom: 182px; left: 50%; } .ba-hero-strip { width: 100%; } .ba-hero .ba-hero-slide-counter__current { font-size: 64px !important; line-height: 64px !important; } .ba-hero .ba-hero-slide-counter__total { font-size: 20px !important; margin-top: 10px; margin-left: 8px; } .ba-hero .slide-title { font-size: 38px !important; line-height: 54px !important; letter-spacing: 9px !important; margin-right: -9px !important; } .ba-hero .slide-subtitle { font-size: 18px !important; line-height: 32px !important; } .ba-hero-strip__items { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 200px; } } @media (min-width: 768px) and (max-width: 991px) and (min-height: 1000px) { .ba-hero .slide-title { font-size: 44px !important; line-height: 60px !important; letter-spacing: 10px !important; margin-right: -10px !important; } .ba-hero .slide-subtitle { font-size: 19px !important; line-height: 34px !important; } .ba-hero .ba-hero-slide-counter__current { font-size: 70px !important; line-height: 70px !important; } .ba-hero .ba-hero-slide-counter__total { font-size: 21px !important; margin-top: 11px; } } @media (max-width: 767px) { .ba-hero { min-height: auto; } .ba-hero-social-rail { bottom: auto; left: 16px; top: 148px; width: 28px; } .ba-hero-social-rail__line { height: 44px; } .ba-hero-social-list a { font-size: 18px; } .ba-hero .ba-hero-slide-counter__current { font-size: 56px !important; line-height: 56px !important; } .ba-hero .ba-hero-slide-counter__total { font-size: 18px !important; margin-top: 9px; margin-left: 8px; } .ba-hero-controls { bottom: auto; left: auto; margin: 0 18px 0 56px; position: relative; transform: none; } .ba-hero-strip { position: relative; width: 100%; } .ba-hero-strip::before { height: 100%; } .ba-hero-strip__counter { left: 16px; position: relative; top: 0; align-items: center; } .ba-hero-strip__current { font-size: 72px; } .ba-hero-strip__items { grid-template-columns: 1fr; padding-left: 0; padding-top: 8px; } .ba-hero-strip__item { min-height: 0; padding: 16px; } } /* --- Homepage Hero v2: upper stage + lower strip bar --- */ .ba-hero { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; } .ba-hero-main { position: relative; flex: 0 0 80vh; height: 80vh; min-height: 0; overflow: hidden; } .ba-hero-main::after { display: none; } .ba-hero .rev_slider_wrapper { position: relative; inset: 0; width: 100%; height: 100%; z-index: 0; } .ba-hero .rev_slider_wrapper::before { display: none; } .ba-hero .rev_slider .tp-caption, .ba-hero .rev_slider .tp-parallax-wrap, .ba-hero .rev_slider .tp-mask-wrap { z-index: 2 !important; } .ba-hero-page-lines { position: absolute; inset: 0; } .ba-hero-social-rail { bottom: 30px; } .ba-hero-counter { position: absolute; top: 24%; right: clamp(48px, 11vw, 215px); display: flex; align-items: flex-start; z-index: 10; } .ba-hero-counter__current { color: var(--ba-accent); font-family: var(--ba-font-heading); font-size: var(--ba-fs-hero); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-display); line-height: var(--ba-lh-hero); } .ba-hero-counter__total { color: var(--ba-text-mid); font-family: var(--ba-font-heading); font-size: var(--ba-fs-xl); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-wider); line-height: 1; margin-left: 12px; margin-top: 16px; } .ba-hero-strip-bar { position: relative; flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 800px) minmax(0, 1fr); align-items: stretch; gap: 24px; background-color: var(--ba-panel-strip); min-height: 0; padding: 0 clamp(22px, 4vw, 70px); } .ba-hero-strip { position: relative; right: auto; bottom: auto; width: 100%; display: block; padding-top: 0; align-self: stretch; } .ba-hero-strip::before { display: none; } .ba-hero-strip__items { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; width: 100%; height: 100%; } .ba-hero-strip__item { min-height: auto; padding: 0 15px; display: flex; flex-direction: column; justify-content: center; } .ba-hero-strip-nav { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; display: inline-flex; align-items: center; background: transparent; border: 0; padding: 0; margin: 0; color: #212121; font-family: var(--ba-font-heading); font-size: 13px; font-weight: var(--ba-weight-regular); line-height: 1; letter-spacing: var(--ba-ls-controls); text-transform: uppercase; align-self: center; transition: color 0.2s ease; } .ba-hero-strip-nav--prev { justify-self: start; } .ba-hero-strip-nav--next { justify-self: end; } .ba-hero-strip-bar .arrow-left:before, .ba-hero-strip-bar .arrow-right:after { display: inline-block; opacity: 1; width: 1.05em; height: 0.82em; background-size: 1.05em 0.82em; filter: brightness(0) saturate(100%); transition: filter 0.2s ease; } .ba-hero-strip-bar .arrow-left:after, .ba-hero-strip-bar .arrow-right:before { display: inline-block; color: #212121; } .ba-hero-strip-bar .arrow-left:before { margin-right: 0.62em; } .ba-hero-strip-bar .arrow-right:after { margin-left: 0.62em; } body.dark-mode .ba-hero-strip-nav { color: #ffffff; } body.dark-mode .ba-hero-strip-bar .arrow-left:after, body.dark-mode .ba-hero-strip-bar .arrow-right:before { color: #ffffff; } body.dark-mode .ba-hero-strip-bar .arrow-left:before, body.dark-mode .ba-hero-strip-bar .arrow-right:after { filter: brightness(0) saturate(100%) invert(1); } .ba-hero-strip-nav:hover, .ba-hero-strip-nav:focus-visible { color: var(--ba-accent); } .ba-hero-strip-bar .arrow-left:hover:after, .ba-hero-strip-bar .arrow-left:focus-visible:after, .ba-hero-strip-bar .arrow-right:hover:before, .ba-hero-strip-bar .arrow-right:focus-visible:before { color: var(--ba-accent); } .ba-hero-strip-bar .arrow-left:hover:before, .ba-hero-strip-bar .arrow-left:focus-visible:before, .ba-hero-strip-bar .arrow-right:hover:after, .ba-hero-strip-bar .arrow-right:focus-visible:after { filter: brightness(0) saturate(100%) invert(70%) sepia(13%) saturate(852%) hue-rotate(346deg) brightness(90%) contrast(88%); } @media (max-width: 1399px) { .ba-hero-counter { right: clamp(36px, 8vw, 150px); } } @media (max-width: 1199px) { .ba-hero-strip-bar { grid-template-columns: 160px minmax(0, 1fr) 160px; gap: 18px; padding-inline: 20px; } } @media (max-width: 991px) { .ba-hero-main { flex-basis: 80vh; height: 80vh; } .ba-hero-counter { top: 29%; right: 30px; } .ba-hero-counter__current { font-size: 78px; line-height: 78px; } .ba-hero-strip-bar { grid-template-columns: 120px minmax(0, 1fr) 120px; } .ba-hero-strip__items { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 767px) { .ba-hero { height: 100dvh; min-height: 100dvh; } .ba-hero-main { flex: 0 0 calc(100dvh - 84px); height: calc(100dvh - 84px); } .ba-hero-social-rail { left: 0; right: 0; bottom: 32px; width: 100%; flex-direction: row; align-items: flex-end; justify-content: center; gap: 0; padding: 0; } .ba-hero .ba-hero-slide-counter { width: calc(100vw - 30px) !important; justify-content: flex-end !important; } .ba-hero .ba-hero-slide-counter__current { font-size: 42px !important; line-height: 42px !important; letter-spacing: 9.6px !important; } .ba-hero .ba-hero-slide-counter__total { font-size: 14px !important; margin-top: 6px !important; margin-left: 8px !important; letter-spacing: 2.4px !important; } .ba-hero-strip-bar { flex: 0 0 84px; min-height: 84px; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 38px; background-color: var(--ba-panel-strip); align-items: center; } .ba-hero-strip-nav { justify-self: start; padding-top: 0; align-self: center; font-size: 16px; letter-spacing: 5.12px; color: var(--ba-text-primary); } .ba-hero-strip-nav--next { justify-self: end; } .ba-hero-strip { display: none; } .ba-hero-social-rail__line { display: none; } .ba-hero-social-list { flex-direction: row; align-items: center; justify-content: center; gap: 40px; } .ba-hero-social-list a { font-size: 26px; color: rgba(255, 255, 255, 0.78); } .ba-hero .slide-title { font-size: clamp(18px, 5.5vw, 24px) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: clamp(6px, 2.5vw, 10px) !important; text-align: right !important; margin-right: -10px !important; width: calc(100vw - 30px) !important; max-width: none !important; } .ba-hero .slide-subtitle { font-size: 16px !important; line-height: normal !important; text-align: right !important; width: calc(100vw - 30px) !important; max-width: none !important; } .ba-hero .ba-hero-cta-layer { width: calc(100vw - 30px) !important; max-width: none !important; display: flex !important; justify-content: flex-end !important; padding: 0 16px 0 0 !important; } .ba-hero-cta { font-size: 12px; line-height: 18px; letter-spacing: 2.1px; padding: 12px 26px; } } @media (max-width: 479px) { .ba-hero-main { flex: 0 0 calc(100dvh - 84px); height: calc(100dvh - 84px); } .ba-hero-social-rail { bottom: 32px; padding: 0; } .ba-hero-strip-bar { padding: 0 36px; } .ba-hero-social-list { gap: 40px; } .ba-hero-social-list a { font-size: 24px; } } /* ========================================================================== 5b. PROJECTS / SERVICES GRID ========================================================================== */ .ba-projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .ba-projects-grid .project { overflow: hidden; } .ba-projects-grid .project figure { height: 100%; } .ba-projects-grid .project figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 480 / 880; } .projects.ba-projects--no-heading { padding-top: 0; } .projects.ba-projects--no-heading .section-content { margin-top: 0; } @media (max-width: 991px) { .ba-projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .ba-projects-grid { grid-template-columns: 1fr; } .ba-projects-grid .project { height: 24vh; } } /* ========================================================================== 6. TESTIMONIALS SECTION Figma node 97:3590 — title + full-width bg image + 3 cards + dots ========================================================================== */ /* --- Section Title: Oswald 400, 35px, gold, ls 11.2px --- */ .testimonials .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: var(--ba-lh-desc); letter-spacing: var(--ba-ls-ultra); color: var(--ba-accent); text-transform: uppercase; text-align: center; } /* --- Fade title: same treatment as Clients (shared rule below in Clients section) --- */ /* --- Full-width background image area (Figma 97:3595) --- */ .ba-testimonials-bg { background-position: center; background-size: cover; background-repeat: no-repeat; padding: 120px 0; margin-top: 65px; } /* --- OWL Carousel: card spacing + equal height --- */ .ba-testimonials-carousel .owl-wrapper { display: flex !important; } .ba-testimonials-carousel .owl-item { display: flex; padding: 0 15px; } /* --- Card: white bg, gold border, 5px radius, 95% opacity --- */ .ba-testimonial-card { display: flex; flex-direction: column; max-width: 490px; background-color: #ffffff; border: 1px solid var(--ba-accent-secondary); border-radius: 5px; padding: 35px 37px 40px 45px; opacity: 0.95; } /* --- Quote mark: Montserrat Bold, 80px, gold #B19777 --- */ .ba-testimonial-quote { font-family: var(--ba-font-body); font-weight: var(--ba-weight-bold); font-size: 80px; line-height: 40.8px; color: var(--ba-accent-secondary); margin-bottom: 20px; } /* --- Testimonial text: Montserrat 400, 16px/26.4px, #999 --- */ .ba-testimonial-text { flex: 1; margin-bottom: 30px; } .ba-testimonial-text p { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-body); line-height: var(--ba-lh-body); color: var(--ba-text-muted); } /* --- Author row --- */ .ba-testimonial-author { display: flex; align-items: center; } /* --- Name: Montserrat Bold, 18px, ls 4.8px, #272727, uppercase --- */ .ba-testimonial-name { font-family: var(--ba-font-body); font-weight: var(--ba-weight-bold); font-size: var(--ba-fs-lg); line-height: 39.594px; letter-spacing: var(--ba-ls-spread); text-transform: uppercase; color: #272727; margin: 0 0 2px; } /* --- Role: Montserrat 400, 14px, ls 2.1px, #B19777, uppercase --- */ .ba-testimonial-role { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-base); line-height: 20px; letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-accent-secondary); } /* --- OWL Carousel pagination dots (moved outside .ba-testimonials-bg via JS) --- */ .testimonials .owl-pagination { display: flex; justify-content: center; gap: 10px; padding: 35px 0 0; } .testimonials .owl-page span { display: block; width: 9px; height: 9px; border-radius: 50%; background-color: var(--ba-border); cursor: pointer; transition: background-color 0.3s ease; } .testimonials .owl-page.active span { background-color: var(--ba-accent-secondary); } /* --- Responsive: scale down card content for smaller screens --- */ @media (max-width: 1399px) { .ba-testimonials-bg { padding: 90px 0; /* was: 120px */ } .ba-testimonial-card { padding: 28px 30px 32px 36px; /* was: 35px 37px 40px 45px */ } .ba-testimonial-quote { font-size: 60px; /* was: 80px */ line-height: 32px; /* was: 40.8px */ margin-bottom: 14px; /* was: 20px */ } .ba-testimonial-text p { font-size: 14px; /* was: 16px */ line-height: 23px; /* was: 26.4px */ } .ba-testimonial-text { margin-bottom: 22px; /* was: 30px */ } .ba-testimonial-avatar { width: 72px; /* was: 91px */ height: 72px; } .ba-testimonial-name { font-size: var(--ba-fs-body); /* was: 18px → 16px */ line-height: 32px; /* was: 39.594px */ letter-spacing: var(--ba-ls-widest); /* was: 4.8px → 3.6px */ } .ba-testimonial-role { font-size: var(--ba-fs-xs); /* was: 14px → 12px */ line-height: 18px; /* was: 20px */ } } @media (max-width: 991px) { .ba-testimonial-card { max-width: 100%; } .ba-testimonials-bg { padding: 80px 0; } } @media (max-width: 767px) { .ba-testimonial-card { padding: 25px 30px 30px; } .ba-testimonial-quote { font-size: 60px; line-height: 30px; } .ba-testimonial-avatar { width: 70px; height: 70px; } .ba-testimonial-name { font-size: var(--ba-fs-body); letter-spacing: var(--ba-ls-widest); } .ba-testimonials-bg { padding: 60px 0; margin-top: 40px; } } /* ========================================================================== DARK MODE — TESTIMONIALS ========================================================================== */ body.dark-mode .ba-testimonial-card { background-color: var(--ba-bg-tertiary); border-color: var(--ba-border); } body.dark-mode .ba-testimonial-name { color: var(--ba-text-primary); } body.dark-mode .ba-testimonial-text p { color: var(--ba-text-muted); } /* ========================================================================== 7. CONTACT SECTION Figma node 97:3643 — title + 2 address cols + contact form ========================================================================== */ /* --- Section Title: Oswald 400, 35px, #3d3d3d + gold accent --- */ .contacts .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: 38.5px; letter-spacing: var(--ba-ls-ultra); color: #3d3d3d; text-transform: uppercase; text-align: center; } body.dark-mode .contacts .section-title { color: #ffffff; } /* --- Footer row: align both columns to same top edge --- */ .contacts .section-content .row-base { display: flex; align-items: flex-start; } .contacts .section-content .col-base { margin-top: 44px; } /* --- Address columns: Montserrat 400, 18px, #747474, ls 1.98px --- */ .contacts .col-address { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-lg); line-height: 30px; letter-spacing: 1.98px; color: #747474; padding-top: 0; } .contacts .col-address a { color: inherit; text-decoration: none; } .contacts .col-address a:hover { color: inherit; text-decoration: none; } .footer-office { margin-bottom: 16px; } .footer-office:last-child { margin-bottom: 0; } .footer-office__label { display: block; font-weight: var(--ba-weight-semibold); color: var(--ba-text-primary); text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 4px; } body.dark-mode .footer-office__label { color: #ffffff; } /* --- Form inputs: light bg, rounded, dark placeholder --- */ .contacts .form-control, .contacts textarea.form-control { background-color: #f3f3f3; border: 1px solid #f3f3f3; border-radius: 12px; height: 58px; padding-left: 23px; font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-body); color: #333; } .contacts textarea.form-control { height: 126px; padding-top: 18px; } .contacts .form-control:focus { border-color: var(--ba-accent); } .contacts .form-control::-moz-placeholder { color: #666; opacity: 1; } .contacts .form-control:-ms-input-placeholder { color: #666; } .contacts .form-control::-webkit-input-placeholder { color: #666; } /* --- Submit button --- */ .contacts .form-submit { margin-top: 1.2em; } /* --- CF7 form overrides --- */ .ba-footer-cf7-wrap .wpcf7-form p { margin-bottom: 0; } .ba-footer-cf7-wrap .wpcf7-form .form-submit { margin-top: 1.2em; text-align: right; } .ba-footer-cf7-wrap .wpcf7-form .form-submit p { display: inline-block; position: relative; margin: 0; } .ba-footer-cf7-wrap .form-submit .btn-shadow-2 { color: #ffffff; } .ba-footer-cf7-wrap .wpcf7-form .wpcf7-spinner { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; } .ba-footer-cf7-wrap .wpcf7-form .wpcf7-spinner::before { font-family: 'FontAwesome'; content: '\f054'; font-size: 10px; color: #fff; } .ba-footer-cf7-wrap .wpcf7-form .wpcf7-spinner.active::before { content: none; } .ba-footer-cf7-wrap .wpcf7 .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; font-family: var(--ba-font-body); font-size: var(--ba-fs-base); } .ba-footer-cf7-wrap .wpcf7 .wpcf7-not-valid-tip { font-family: var(--ba-font-body); font-size: 12px; color: #e74c3c; margin-top: 4px; } /* --- Responsive --- */ @media (min-width: 992px) and (max-width: 1199px) { .contacts .col-address { font-size: 16px; letter-spacing: 1.8px; line-height: 28px; } } @media (max-width: 991px) { .contacts .section-content .row-base { flex-direction: column; } .contacts .col-address { margin-bottom: 20px; } } @media (max-width: 767px) { .contacts .col-address { font-size: var(--ba-fs-body); line-height: 26px; letter-spacing: 1.5px; } .contacts .form-control, .contacts textarea.form-control { height: 50px; font-size: var(--ba-fs-base); } .contacts textarea.form-control { height: 110px; } } /* ========================================================================== DARK MODE — CONTACT ========================================================================== */ body.dark-mode .contacts .col-address { color: var(--ba-text-muted); } body.dark-mode .contacts .form-control, body.dark-mode .contacts textarea.form-control { background-color: var(--ba-bg-tertiary); border-color: var(--ba-border); color: var(--ba-text-primary); } body.dark-mode .contacts .form-control::-moz-placeholder { color: var(--ba-text-muted); } body.dark-mode .contacts .form-control:-ms-input-placeholder { color: var(--ba-text-muted); } body.dark-mode .contacts .form-control::-webkit-input-placeholder { color: var(--ba-text-muted); } /* ========================================================================== 8. FOOTER Figma node 97:3677 — brand name left + copyright right ========================================================================== */ .footer { text-align: center; margin: 0; padding: 0; font-size: 12px; color: #aaa; } .ba-footer-separator-shell { padding: 0 15px; border-top: 1px solid #e5e5e5; } .ba-footer-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; } .ba-footer-brand { text-align: left; } .ba-footer-logo { font-family: var(--ba-font-body); font-weight: var(--ba-weight-bold); font-size: 28.65px; line-height: 28.65px; color: #3d3d3d; text-transform: uppercase; letter-spacing: 0; } .ba-footer-copy { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-body); line-height: var(--ba-lh-body); color: #aaa; text-align: right; } /* --- Responsive --- */ @media (max-width: 767px) { .ba-footer-row { flex-direction: column; gap: 2px; text-align: center; } .ba-footer-brand, .ba-footer-copy { text-align: center; } .ba-footer-logo { font-size: 22px; } .ba-footer-copy { font-size: var(--ba-fs-base); } } /* ========================================================================== DARK MODE — FOOTER ========================================================================== */ body.dark-mode .ba-footer-row { border-top-color: transparent; } body.dark-mode .ba-footer-separator-shell { border-top-color: transparent; } body.dark-mode .ba-footer-logo { color: var(--ba-text-primary); } body.dark-mode .ba-footer-copy { color: var(--ba-text-muted); } /* ========================================================================== 7. ABOUT PAGE ========================================================================== */ /* --- Reusable Inner Hero Banner --- */ .ba-inner-hero { background-image: var(--ba-inner-hero-bg); background-position: center center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; min-height: 100vh; /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); */ } .ba-inner-hero > .container { position: relative; width: 100%; z-index: 2; } /* Override Go Arch's heavy dark gradient with a very light full-frame tint. */ .ba-inner-hero.main-inner:after { background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.60) 100%); } .ba-inner-hero__content { margin-left: auto; padding-left: 60px; padding-right: 60px; position: relative; z-index: 2; } /* Keep inner hero titles white regardless of site theme mode. */ .layout .ba-inner-hero__title, .ba-inner-hero__title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); color: #ffffff; font-size: var(--ba-fs-6xl); line-height: var(--ba-lh-hero-title); letter-spacing: var(--ba-ls-hero-title); margin: 0; text-align: right; text-transform: uppercase; overflow: hidden; } .layout .ba-inner-hero__subtitle, .ba-inner-hero__subtitle { color: var(--ba-accent); font-family: var(--ba-font-body); font-size: 18px; font-weight: var(--ba-weight-bold); letter-spacing: 3.6px; line-height: 32px; margin: 40px 0 0 auto; text-align: right; max-width: 860px; padding-left: 20px; box-sizing: border-box; text-transform: uppercase; } /* --- Char-by-char animation (replicates Rev Slider splitin:chars) --- */ .ba-split-chars .ba-char-word { display: inline-block; white-space: nowrap; } .ba-split-chars .ba-char { display: inline-block; opacity: 0; transform: translateX(105%) rotateX(45deg) rotateZ(90deg); animation: ba-char-in 2s cubic-bezier(0.7, 0, 0.3, 1) forwards; } .ba-split-chars .ba-char-space { display: inline-block; width: 0.35em; } @keyframes ba-char-in { to { opacity: 1; transform: translateX(0) rotateX(0) rotateZ(0); } } /* Social rail z-index within main-inner */ .ba-inner-hero__social-rail, .ba-about-social-rail { z-index: 3; opacity: 0; animation: ba-fade-in 1s ease 1.5s forwards; } @keyframes ba-fade-in { to { opacity: 1; } } /* --- Inner Hero Responsive --- */ @media (min-width: 1400px) { .layout .ba-inner-hero__title, .ba-inner-hero__title { font-size: 8vmin; line-height: 1.2; letter-spacing: 0.32em; } .layout .ba-inner-hero__subtitle, .ba-inner-hero__subtitle { font-size: 24px; letter-spacing: 4.8px; line-height: 39.6px; } } @media (max-width: 1399px) { .ba-inner-hero__subtitle { max-width: none; padding-left: 20px; } } @media (max-width: 991px) { .ba-inner-hero__content { padding-left: 60px; padding-right: 60px; } .ba-inner-hero__subtitle { font-size: 18px; letter-spacing: 3px; line-height: 30px; margin-top: 34px; padding-left: 20px; } } @media (max-width: 767px) { .ba-inner-hero.main-inner { min-height: 100svh; padding: 20vmin 0; display: flex; align-items: center; } .ba-inner-hero + .content { padding-top: 24px; } .ba-inner-hero__content { padding-left: 0; padding-right: 0; } .ba-inner-hero__social-rail { top: auto; bottom: 24px; left: 16px; width: 28px; } .layout .ba-inner-hero__title, .ba-inner-hero__title { font-size: clamp(28px, 7vw, 35px); letter-spacing: clamp(6px, 2vw, 11.2px); line-height: 1.35; } .ba-inner-hero__subtitle { font-size: 16px; letter-spacing: 2.2px; line-height: 28px; margin-top: 24px; padding-left: 20px; } } @media (max-width: 549px) { .layout .ba-inner-hero__title, .ba-inner-hero__title { font-size: clamp(34px, 9vw, 44px); letter-spacing: clamp(5px, 1.5vw, 8px); line-height: 1.2; } } @media (max-width: 479px) { .ba-inner-hero + .content { padding-top: 18px; } .ba-inner-hero__content { padding-left: 0; padding-right: 0; } .layout .ba-inner-hero__title, .ba-inner-hero__title { font-size: clamp(36px, 8.5vw, 42px); letter-spacing: clamp(4px, 1.2vw, 7px); line-height: 1.2; } .ba-inner-hero__subtitle { font-size: var(--ba-fs-base); letter-spacing: 1.6px; line-height: 24px; padding-left: 0; } } /* --- Steel Hero Variant --- */ .ba-inner-hero--steel { background-color: #ffffff; background-position: center center; background-image: none !important; min-height: 100vh; padding: 16vmin 0; } .ba-inner-hero--steel.main-inner:after { display: none; } .ba-inner-hero--steel .ba-inner-hero__content { margin-left: 0; padding-left: 0; padding-right: 0; padding-top: 28px; text-align: center; } .ba-inner-hero--steel > .container { max-width: 80%; } .layout .ba-inner-hero--steel .ba-inner-hero__title, .ba-inner-hero--steel .ba-inner-hero__title { color: #212121; font-size: 96px; line-height: 1.2; letter-spacing: 30.72px; margin-right: 0; text-align: center; } .layout .ba-inner-hero--steel .ba-inner-hero__subtitle, .ba-inner-hero--steel .ba-inner-hero__subtitle { color: var(--ba-accent); font-size: 24px; font-weight: var(--ba-weight-bold); line-height: 39.6px; letter-spacing: 4.8px; margin: 26px auto 0; max-width: 1113px; padding-left: 0; text-align: center; } .ba-inner-hero--steel .ba-inner-hero__social-rail .ba-hero-social-rail__line { background: var(--ba-border); } .ba-inner-hero--steel .ba-hero-social-list a, .ba-inner-hero--steel .ba-hero-social-list i { color: #212121; } body.page-template-page-service-child-steel .ba-header--solid { position: absolute; background-color: transparent; } body.page-template-page-service-child-steel .ba-header--solid .ba-logo-line, body.page-template-page-service-child-steel .ba-header--solid .ba-header-phone, body.page-template-page-service-child-steel .ba-header--solid .ba-nav-menu li a, body.page-template-page-service-child-steel .ba-header--solid .ba-toggle-label { color: #111111; } body.page-template-page-service-child-steel .ba-header--solid .ba-nav-menu li.current-menu-item > a { color: var(--ba-accent); } body.page-template-page-service-child-steel .ba-header--solid .ba-hamburger-bar { background-color: #111111; } body.page-template-page-service-child-steel .ba-header--solid .ba-logo-img { filter: invert(1); } body.page-template-page-service-child-steel .ba-header--solid .ba-nav-menu li ul li a { color: #ffffff; } body.page-template-page-service-child-steel.dark-mode .ba-header--solid .ba-nav-menu li ul li a { color: #ffffff; } body.page-template-page-service-child-steel.dark-mode .ba-header--solid .ba-logo-img { filter: none; } body.page-template-page-service-child-steel.dark-mode .ba-inner-hero--steel, body.dark-mode .ba-inner-hero--steel { background-color: #000000; } body.page-template-page-service-child-steel.dark-mode .layout .ba-inner-hero--steel .ba-inner-hero__title, body.page-template-page-service-child-steel.dark-mode .ba-inner-hero--steel .ba-inner-hero__title, body.page-template-page-service-child-steel.dark-mode .ba-header--solid .ba-logo-line, body.page-template-page-service-child-steel.dark-mode .ba-header--solid .ba-header-phone, body.page-template-page-service-child-steel.dark-mode .ba-header--solid .ba-nav-menu li a, body.page-template-page-service-child-steel.dark-mode .ba-header--solid .ba-toggle-label, body.page-template-page-service-child-steel.dark-mode .ba-inner-hero--steel .ba-hero-social-list a, body.page-template-page-service-child-steel.dark-mode .ba-inner-hero--steel .ba-hero-social-list i { color: #ffffff; } body.page-template-page-service-child-steel.dark-mode .ba-header--solid .ba-hamburger-bar { background-color: #ffffff; } body.page-template-page-service-child-steel.dark-mode .ba-inner-hero--steel .ba-inner-hero__social-rail .ba-hero-social-rail__line { background: rgba(255, 255, 255, 0.3); } /* --- Single Blog Post: same inverted header as Steel page --- */ body.single-post .ba-header--solid .ba-logo-line, body.single-post .ba-header--solid .ba-header-phone, body.single-post .ba-header--solid .ba-nav-menu li a, body.single-post .ba-header--solid .ba-toggle-label { color: #111111; } body.single-post .ba-header--solid .ba-nav-menu li.current-menu-item > a { color: var(--ba-accent); } body.single-post .ba-header--solid .ba-hamburger-bar { background-color: #111111; } body.single-post .ba-header--solid .ba-logo-img { filter: invert(1); } body.single-post .ba-header--solid .ba-nav-menu li ul li a { color: #ffffff; } body.single-post.dark-mode .ba-header--solid .ba-logo-img { filter: none; } body.single-post.dark-mode .ba-header--solid .ba-logo-line, body.single-post.dark-mode .ba-header--solid .ba-header-phone, body.single-post.dark-mode .ba-header--solid .ba-nav-menu li a, body.single-post.dark-mode .ba-header--solid .ba-toggle-label { color: #ffffff; } body.single-post.dark-mode .ba-header--solid .ba-hamburger-bar { background-color: #ffffff; } body.single-post.dark-mode .ba-header--solid .ba-nav-menu li ul li a { color: #ffffff; } @media (max-width: 1399px) { .layout .ba-inner-hero--steel .ba-inner-hero__title, .ba-inner-hero--steel .ba-inner-hero__title { font-size: 72px; letter-spacing: 18px; } .layout .ba-inner-hero--steel .ba-inner-hero__subtitle, .ba-inner-hero--steel .ba-inner-hero__subtitle { font-size: 20px; line-height: 32px; letter-spacing: 4px; max-width: 920px; } } @media (max-width: 991px) { .ba-inner-hero--steel > .container { max-width: 100%; } .layout .ba-inner-hero--steel .ba-inner-hero__title, .ba-inner-hero--steel .ba-inner-hero__title { font-size: 58px; letter-spacing: 12px; } .layout .ba-inner-hero--steel .ba-inner-hero__subtitle, .ba-inner-hero--steel .ba-inner-hero__subtitle { font-size: 18px; line-height: 30px; letter-spacing: 3px; margin-top: 22px; max-width: 760px; } } @media (max-width: 767px) { .ba-inner-hero--steel .ba-inner-hero__content { padding-left: 18px; padding-right: 18px; } .layout .ba-inner-hero--steel .ba-inner-hero__title, .ba-inner-hero--steel .ba-inner-hero__title { font-size: 44px; line-height: 1.18; letter-spacing: 8px; } .layout .ba-inner-hero--steel .ba-inner-hero__subtitle, .ba-inner-hero--steel .ba-inner-hero__subtitle { font-size: 16px; line-height: 26px; letter-spacing: 2px; margin-top: 18px; } } @media (max-width: 479px) { .layout .ba-inner-hero--steel .ba-inner-hero__title, .ba-inner-hero--steel .ba-inner-hero__title { font-size: 34px; line-height: 1.16; letter-spacing: 5px; } .layout .ba-inner-hero--steel .ba-inner-hero__subtitle, .ba-inner-hero--steel .ba-inner-hero__subtitle { font-size: 14px; line-height: 22px; letter-spacing: 1.4px; } } /* --- Steel Service Overview --- */ .service-steel-overview.section { padding: 50px 0; } .service-steel-overview .section-content { margin-top: 0; } .service-steel-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; } .service-steel-overview__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 30px; max-width: 585px; } .service-steel-overview__card { width: 100%; max-width: 150px; min-height: 150px; padding: 34px 22px 30px; background: #f8f8f8; overflow: visible; } .service-steel-overview__value { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 700; line-height: 1; color: #222222; } .service-steel-overview__label { margin-top: 10px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 400; line-height: 13.2px; letter-spacing: 3.3px; color: #555555; text-transform: uppercase; max-width: none; white-space: nowrap; width: max-content; } .service-steel-overview__text { max-width: 585px; } .service-steel-overview__text p { margin: 0; font-family: var(--ba-font-body); font-size: 20px; font-weight: 400; line-height: 38.5px; color: #747474; } .service-steel-overview__text p:first-child { margin-top: -9px; } .service-steel-overview__text p + p { margin-top: 20px; } body.dark-mode .service-steel-overview__card { background: var(--ba-bg-secondary); } body.dark-mode .service-steel-overview__value { color: var(--ba-text-primary); } body.dark-mode .service-steel-overview__label { color: var(--ba-text-secondary); } body.dark-mode .service-steel-overview__text p { color: var(--ba-text-secondary); } @media (max-width: 1199px) { .service-steel-overview__stats { gap: 30px 24px; } .service-steel-overview__card { max-width: 136px; min-height: 136px; padding: 28px 20px 24px; } } @media (max-width: 991px) { .service-steel-overview__grid { grid-template-columns: 1fr; gap: 40px; } .service-steel-overview__stats, .service-steel-overview__text { max-width: none; } .service-steel-overview__text p { font-size: 16px; line-height: 26px; } } @media (max-width: 767px) { .service-steel-overview__stats { gap: 20px 16px; } .service-steel-overview__card { max-width: 120px; min-height: 120px; padding: 22px 16px 18px; } .service-steel-overview__value { font-size: 34px; } .service-steel-overview__label { margin-top: 8px; font-size: 10px; line-height: 12px; letter-spacing: 2.6px; } } @media (max-width: 479px) { .service-steel-overview__stats { gap: 14px 12px; } .service-steel-overview__card { max-width: 108px; min-height: 108px; padding: 18px 14px 16px; } .service-steel-overview__value { font-size: 28px; } .service-steel-overview__label { letter-spacing: 2px; } .service-steel-overview__text p { font-size: 14px; line-height: 22px; } } /* --- Steel Service Feature Slider --- */ .service-steel-feature-slider .section-content { margin-top: 0; } .service-steel-feature-slider__frame { position: relative; } .service-steel-feature-slider__stage { position: relative; min-height: 696px; touch-action: pan-y; } .service-steel-feature-slider__slide { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 0, 0); pointer-events: none; will-change: opacity, transform, clip-path; } .service-steel-feature-slider__slide.is-active, .service-steel-feature-slider__slide.is-entering, .service-steel-feature-slider__slide.is-leaving { pointer-events: auto; } .service-steel-feature-slider__slide.is-active { opacity: 1; z-index: 2; } .service-steel-feature-slider__slide.is-entering, .service-steel-feature-slider__slide.is-leaving { z-index: 3; } .service-steel-feature-slider__image-wrap { position: relative; width: calc(100% - 145px); min-height: 696px; overflow: hidden; will-change: transform, opacity, clip-path; } .service-steel-feature-slider__image { display: block; width: 100%; height: 696px; object-fit: cover; } .service-steel-feature-slider__controls { position: absolute; right: 40px; top: calc(50% - 220px); display: flex; align-items: center; gap: 56px; z-index: 5; } .service-steel-feature-slider__control { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; font-family: var(--ba-font-heading); font-size: 16px; font-weight: var(--ba-weight-regular); line-height: 1; letter-spacing: 5.12px; text-transform: uppercase; color: #212121; transition: color 0.25s ease, transform 0.25s ease; } .service-steel-feature-slider__control:hover, .service-steel-feature-slider__control:focus { color: var(--ba-accent); } .service-steel-feature-slider__control--prev, .service-steel-feature-slider__control--next { color: rgba(33, 33, 33, 0.92); } body.dark-mode .service-steel-feature-slider__control--prev, body.dark-mode .service-steel-feature-slider__control--next { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22); } .service-steel-feature-slider__control-label { display: inline-block; transition: transform 0.26s ease, opacity 0.26s ease; } .service-steel-feature-slider__control-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 1em; line-height: 1; transition: transform 0.26s ease, opacity 0.26s ease; } .service-steel-feature-slider__control--prev:hover .service-steel-feature-slider__control-arrow, .service-steel-feature-slider__control--prev:focus .service-steel-feature-slider__control-arrow { transform: translate3d(-2px, 0, 0); } .service-steel-feature-slider__control--next:hover .service-steel-feature-slider__control-arrow, .service-steel-feature-slider__control--next:focus .service-steel-feature-slider__control-arrow { transform: translate3d(2px, 0, 0); } .service-steel-feature-slider__control--prev:hover .service-steel-feature-slider__control-label, .service-steel-feature-slider__control--prev:focus .service-steel-feature-slider__control-label { transform: translate3d(-2px, 0, 0); } .service-steel-feature-slider__control--next:hover .service-steel-feature-slider__control-label, .service-steel-feature-slider__control--next:focus .service-steel-feature-slider__control-label { transform: translate3d(2px, 0, 0); } .service-steel-feature-slider__card { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 360px; padding: 30px; background: var(--ba-accent); z-index: 4; overflow: hidden; will-change: transform, opacity; } .service-steel-feature-slider__card--size-a { width: 320px; height: 220px; } .service-steel-feature-slider__card--size-b { width: 360px; height: 244px; } .service-steel-feature-slider__card--size-c { width: 400px; height: 268px; } .service-steel-feature-slider__card--size-d { width: 440px; height: 292px; } .service-steel-feature-slider__card-title { display: block; font-family: var(--ba-font-heading); font-size: 30.4px; font-weight: var(--ba-weight-regular); line-height: 45.6px; text-transform: uppercase; color: #ffffff; } .service-steel-feature-slider__card-title span { display: inline; } .service-steel-feature-slider__card-text { margin-top: 14px; font-family: var(--ba-font-body); font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.96); } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering, .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving { opacity: 1; transform: none; animation: none; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering.is-next .service-steel-feature-slider__image { animation: baSteelImageTrackInNext 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving.is-next .service-steel-feature-slider__image { animation: baSteelImageTrackOutNext 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering.is-prev .service-steel-feature-slider__image { animation: baSteelImageTrackInPrev 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving.is-prev .service-steel-feature-slider__image { animation: baSteelImageTrackOutPrev 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Steel slider experiment: disable gold-card motion and keep the overlay visually permanent while only the image stage animates. .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card { animation: baSteelCardIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving .service-steel-feature-slider__card { animation: baSteelCardOut 0.34s ease both; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card-title span, .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card-text { animation: baSteelCardTextDropIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; } */ .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card { opacity: 1; animation: none; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving .service-steel-feature-slider__card { opacity: 0; animation: none; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card-title span, .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card-text { animation: baSteelCardTextDropIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving .service-steel-feature-slider__card-title span, .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving .service-steel-feature-slider__card-text { opacity: 1; transform: none; animation: none; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering.is-next { animation: baSteelCurtainInNext 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-leaving.is-next { animation: baSteelCurtainOutNext 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering.is-prev { animation: baSteelCurtainInPrev 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-leaving.is-prev { animation: baSteelCurtainOutPrev 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering.is-next .service-steel-feature-slider__image-wrap { animation: baSteelImageInNext 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-leaving.is-next .service-steel-feature-slider__image-wrap { animation: baSteelImageOutNext 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering.is-prev .service-steel-feature-slider__image-wrap { animation: baSteelImageInPrev 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-leaving.is-prev .service-steel-feature-slider__image-wrap { animation: baSteelImageOutPrev 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card { animation: baSteelCardIn 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-leaving .service-steel-feature-slider__card { animation: baSteelCardOut 0.38s ease both; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card-title span, .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card-text { animation: baSteelCardTextIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; } @keyframes baSteelCurtainInNext { from { opacity: 0; clip-path: inset(0 0 0 24%); transform: translate3d(24px, 0, 0) scale(1.03); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0) scale(1); } } @keyframes baSteelCurtainOutNext { from { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0) scale(1); } to { opacity: 0; clip-path: inset(0 24% 0 0); transform: translate3d(-18px, 0, 0) scale(0.985); } } @keyframes baSteelCurtainInPrev { from { opacity: 0; clip-path: inset(0 24% 0 0); transform: translate3d(-24px, 0, 0) scale(1.03); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0) scale(1); } } @keyframes baSteelCurtainOutPrev { from { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0) scale(1); } to { opacity: 0; clip-path: inset(0 0 0 24%); transform: translate3d(18px, 0, 0) scale(0.985); } } @keyframes baSteelImageInNext { from { transform: translate3d(28px, 0, 0) scale(1.06); } to { transform: translate3d(0, 0, 0) scale(1); } } @keyframes baSteelImageOutNext { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-20px, 0, 0) scale(0.985); } } @keyframes baSteelImageInPrev { from { transform: translate3d(-28px, 0, 0) scale(1.06); } to { transform: translate3d(0, 0, 0) scale(1); } } @keyframes baSteelImageOutPrev { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(20px, 0, 0) scale(0.985); } } @keyframes baSteelCardIn { from { opacity: 0; transform: translate3d(0, calc(-50% + 28px), 0); } to { opacity: 1; transform: translate3d(0, -50%, 0); } } @keyframes baSteelCardOut { from { opacity: 1; transform: translate3d(0, -50%, 0); } to { opacity: 0; transform: translate3d(0, calc(-50% + 14px), 0); } } @keyframes baSteelCardTextIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes baSteelImageTrackInNext { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes baSteelImageTrackOutNext { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } @keyframes baSteelImageTrackInPrev { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes baSteelImageTrackOutPrev { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } } @keyframes baSteelCardTextDropIn { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (max-width: 1199px) { .service-steel-feature-slider__stage { min-height: 620px; } .service-steel-feature-slider__image-wrap { width: calc(100% - 120px); min-height: 620px; } .service-steel-feature-slider__image { height: 620px; } .service-steel-feature-slider__controls { top: 116px; right: 28px; gap: 36px; } } @media (max-width: 991px) { .service-steel-feature-slider__stage { min-height: 520px; } .service-steel-feature-slider__image-wrap { width: 100%; min-height: 520px; } .service-steel-feature-slider__image { height: 520px; } .service-steel-feature-slider__controls { top: 22px; right: 22px; gap: 24px; } .service-steel-feature-slider__card { right: 22px; width: 320px; } .service-steel-feature-slider__card--size-a, .service-steel-feature-slider__card--size-b, .service-steel-feature-slider__card--size-c, .service-steel-feature-slider__card--size-d { width: 320px; height: 220px; } } @media (min-width: 768px) and (max-width: 991px) { .service-steel-feature-slider__frame { display: flex; flex-direction: column; gap: 22px; } .service-steel-feature-slider__stage { min-height: 0; overflow: hidden; } .service-steel-feature-slider__slide { position: relative; opacity: 1; transform: none; } .service-steel-feature-slider__slide.is-entering, .service-steel-feature-slider__slide.is-leaving { position: absolute; inset: 0; width: 100%; } .service-steel-feature-slider__slide:not(.is-active):not(.is-entering):not(.is-leaving) { display: none; } .service-steel-feature-slider__image-wrap { width: min(72%, 520px); min-height: 0; aspect-ratio: 646 / 782; margin: 0 auto; } .service-steel-feature-slider__image { width: 100%; height: 100%; } .service-steel-feature-slider__card { position: static; transform: none; width: 100%; margin: 0 auto; height: 220px; padding: 28px 24px; } .service-steel-feature-slider__controls { position: static; width: 100%; margin-top: 0; justify-content: space-between; gap: 24px; } .service-steel-feature-slider__control { flex: 1 1 0; font-size: 15px; letter-spacing: 4px; text-shadow: none; } .service-steel-feature-slider__control--prev { justify-content: flex-start; } .service-steel-feature-slider__control--next { justify-content: flex-end; } } @media (min-width: 992px) and (max-height: 760px) { .service-steel-feature-slider.section { padding-top: 48px; padding-bottom: 48px; } .service-steel-feature-slider__stage { min-height: 500px; } .service-steel-feature-slider__image-wrap { width: calc(100% - 120px); min-height: 500px; } .service-steel-feature-slider__image { height: 500px; } .service-steel-feature-slider__controls { top: 70px; right: 28px; gap: 32px; } .service-steel-feature-slider__card { right: 22px; padding: 24px; } .service-steel-feature-slider__card-title { font-size: 26px; line-height: 38px; } .service-steel-feature-slider__card-text { font-size: 15px; line-height: 24px; } .service-steel-feature-slider__card--size-a, .service-steel-feature-slider__card--size-b, .service-steel-feature-slider__card--size-c, .service-steel-feature-slider__card--size-d { width: 320px; height: 220px; } } @media (max-width: 767px) { .service-steel-feature-slider__frame { display: flex; flex-direction: column; gap: 18px; } .service-steel-feature-slider__stage { min-height: 0; overflow: hidden; } .service-steel-feature-slider__slide { position: relative; opacity: 1; transform: none; } .service-steel-feature-slider__slide.is-entering, .service-steel-feature-slider__slide.is-leaving { position: absolute; inset: 0; width: 100%; } .service-steel-feature-slider__slide:not(.is-active):not(.is-entering):not(.is-leaving) { display: none; } .service-steel-feature-slider__image-wrap { width: min(78%, 360px); min-height: 0; aspect-ratio: 646 / 782; margin: 0 auto; } .service-steel-feature-slider__image { width: 100%; height: 100%; } .service-steel-feature-slider__controls { position: static; justify-content: space-between; gap: 18px; width: 100%; margin: 0; } .service-steel-feature-slider__control { flex: 1 1 0; font-size: 14px; letter-spacing: 3.6px; color: #212121; text-shadow: none; } .service-steel-feature-slider__control--prev, .service-steel-feature-slider__control--next { color: #212121; } .service-steel-feature-slider__control--prev { justify-content: flex-start; } .service-steel-feature-slider__control--next { justify-content: flex-end; } .service-steel-feature-slider__card { position: static; transform: none; width: 100%; margin: 0; height: 180px; padding: 24px 20px; } .service-steel-feature-slider__card-title { font-size: 24px; line-height: 34px; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card { animation: baSteelCardInMobile 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; } .service-steel-feature-slider[data-slider-effect="curtain"] .service-steel-feature-slider__slide.is-leaving .service-steel-feature-slider__card { animation: baSteelCardOutMobile 0.28s ease both; } /* Mobile experiment: keep the steel gold card static for slide-left too. .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-entering .service-steel-feature-slider__card { animation: baSteelCardInMobile 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; } .service-steel-feature-slider[data-slider-effect="slide-left"] .service-steel-feature-slider__slide.is-leaving .service-steel-feature-slider__card { animation: baSteelCardOutMobile 0.28s ease both; } */ } @media (max-width: 479px) { .service-steel-feature-slider__image-wrap { width: 80%; } .service-steel-feature-slider__controls { gap: 14px; } .service-steel-feature-slider__control { font-size: 13px; letter-spacing: 2.8px; } .service-steel-feature-slider__card { height: 180px; padding: 20px 16px; } .service-steel-feature-slider__card-title { font-size: 20px; line-height: 28px; } .service-steel-feature-slider__card-text { font-size: 14px; line-height: 22px; } } @media (min-width: 480px) and (max-width: 767px) { .service-steel-feature-slider__image-wrap { width: 80%; height: 400px; aspect-ratio: auto; max-width: none; } .service-steel-feature-slider__controls { width: 100%; max-width: none; } .service-steel-feature-slider__card { width: 100%; max-width: none; } } @media (max-width: 767px) { body.dark-mode .service-steel-feature-slider__control { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22); } body.dark-mode .service-steel-feature-slider__control--prev, body.dark-mode .service-steel-feature-slider__control--next { color: rgba(255, 255, 255, 0.94); } } @keyframes baSteelCardInMobile { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes baSteelCardOutMobile { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, 10px, 0); } } /* --- Single Blog Post --- */ .ba-single-post-content { padding-top: 170px; } .ba-single-post.section { padding-top: 0; padding-bottom: 66px; } .ba-single-post .section-content { margin-top: 0; } .ba-single-post__header, .ba-single-post__intro, .ba-single-post__body, .ba-single-post__figure, .ba-single-post__back-wrap { width: 100%; max-width: 1140px; } .ba-single-post__header { margin: 0 0 34px; } .ba-single-post__date { display: inline-block; margin-bottom: 28px; font-family: var(--ba-font-heading); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); line-height: var(--ba-fs-body); letter-spacing: var(--ba-ls-controls); text-transform: uppercase; color: var(--ba-accent); } .layout .ba-single-post__title, .ba-single-post__title { margin: 0; max-width: 1140px; font-family: var(--ba-font-heading); font-size: 42px; font-weight: var(--ba-weight-regular); line-height: 64px; letter-spacing: 12px; text-transform: uppercase; color: #212121; } .ba-single-post__intro { margin-bottom: 48px; font-size: var(--ba-fs-body); line-height: var(--ba-lh-body); color: var(--ba-text-secondary); } .ba-single-post__body { font-size: var(--ba-fs-body); line-height: var(--ba-lh-body); color: var(--ba-text-secondary); } .ba-single-post__body > *:first-child { margin-top: 0; } .ba-single-post__body h1, .ba-single-post__body h2, .ba-single-post__body h3, .ba-single-post__body h4, .ba-single-post__body h5, .ba-single-post__body h6 { margin-bottom: 3em; color: var(--ba-text-primary); } .ba-single-post__body p { margin-bottom: 3em; } .ba-single-post__body img { max-width: 100%; height: auto; margin-bottom: 3em; } .ba-single-post__figure { margin: 0 0 3em; } .ba-single-post__image { display: block; width: 100%; height: auto; } .ba-single-post__back-wrap { margin-top: 40px; } .ba-single-post__back { display: inline-flex; align-items: center; gap: 4px; font-family: var(--ba-font-heading); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); line-height: var(--ba-fs-body); letter-spacing: var(--ba-ls-controls); text-transform: uppercase; color: var(--ba-accent); text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; } .ba-single-post__back:hover, .ba-single-post__back:focus { color: var(--ba-accent-hover); text-decoration: none; transform: translateX(-2px); } body.dark-mode .ba-single-post__title { color: var(--ba-text-primary); } @media (max-width: 1399px) { .ba-single-post-content { padding-top: 150px; } .layout .ba-single-post__title, .ba-single-post__title { font-size: 38px; line-height: 58px; letter-spacing: 10px; } } @media (max-width: 991px) { .ba-single-post-content { padding-top: 132px; } .layout .ba-single-post__title, .ba-single-post__title { font-size: 32px; line-height: 48px; letter-spacing: 7px; } .ba-single-post__intro { margin-bottom: 34px; } .ba-single-post__figure { margin-bottom: 34px; } } @media (max-width: 767px) { .ba-single-post-content { padding-top: 110px; } .ba-single-post.section { padding-bottom: 54px; } .ba-single-post__date { margin-bottom: 20px; font-size: 14px; letter-spacing: 3.6px; } .layout .ba-single-post__title, .ba-single-post__title { font-size: 28px; line-height: 42px; letter-spacing: 6px; } .ba-single-post__intro, .ba-single-post__body { font-size: 14px; line-height: 24px; } } @media (max-width: 479px) { .ba-single-post-content { padding-top: 98px; } .layout .ba-single-post__title, .ba-single-post__title { font-size: 24px; line-height: 36px; letter-spacing: 4px; } .ba-single-post__back { font-size: 14px; letter-spacing: 3.2px; } } /* --- About Text Section (Figma node 97:3745) --- */ /* Section padding: Figma 50px top/bottom, not Go Arch's 5em (80px) */ .about-text.section { padding: 50px 0; } .blog-intro.about-text.section { padding-bottom: 0; } /* Kill Go Arch's .entry horizontal padding — container already handles it */ .about-text .entry { padding: 0; } /* Title: Montserrat 400, 57.6px (Go Arch default 3.6em is correct), line-height 63.36px */ .about-text .entry-title { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); color: var(--ba-text-primary); line-height: 63.36px; margin-bottom: 56px; /* Figma gap between title and text: 56.38px */ } /* Body: Montserrat 400, 20px/38.5px, #747474 */ .about-text .entry-text { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-body); line-height: var(--ba-lh-body); color: var(--ba-text-secondary); } /* --- About Text Responsive --- */ @media (max-width: 1399px) { .about-text .entry-title { font-size: 2.8em; line-height: 1.1; margin-bottom: 40px; } } @media (max-width: 991px) { .about-text .entry-title { font-size: 2.2em; margin-bottom: 30px; } } @media (max-width: 767px) { .about-text.section { padding: 35px 0; } .blog-intro.about-text.section { padding-bottom: 0; } .about-text .entry-title { font-size: 1.8em; margin-bottom: 24px; } .about-text .entry-text { font-size: var(--ba-fs-base); line-height: 24px; } } @media (max-width: 479px) { .about-text.section { padding: 25px 0; } .blog-intro.about-text.section { padding-bottom: 0; } .about-text .entry-title { font-size: 1.5em; margin-bottom: 20px; } .about-text .entry-text { font-size: var(--ba-fs-base); line-height: 24px; } } /* --- About Services Section (Figma node 97:3752) — 2×2 grid --- */ /* Section title: same pattern as all homepage sections */ .about-services .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: var(--ba-lh-desc); letter-spacing: var(--ba-ls-ultra); color: var(--ba-text-primary); text-transform: uppercase; text-align: center; } /* 2×2 grid: Figma gap-x 56px, gap-y 106px */ .about-services .ba-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 56px; row-gap: 106px; } /* Each service item */ a.service-grid-item { color: inherit; text-decoration: none; display: block; } a.service-grid-item:hover { color: inherit; text-decoration: none; } .about-services .service-grid-item img { height: 60px; width: auto; margin-bottom: 24px; } .about-services .service-grid-item h4 { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-lg); line-height: 24.3px; letter-spacing: var(--ba-ls-widest); color: var(--ba-text-primary); text-transform: uppercase; margin: 0 0 20px; } .about-services .service-grid-item p { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-lg); line-height: 37.8px; letter-spacing: 2.16px; color: var(--ba-text-secondary); margin: 0; } /* --- About Services Responsive --- */ @media (max-width: 1399px) { .about-services .ba-services-grid { column-gap: 40px; row-gap: 70px; } .about-services .service-grid-item p { font-size: var(--ba-fs-body); line-height: 30px; } } @media (max-width: 991px) { .about-services .ba-services-grid { column-gap: 30px; row-gap: 50px; } .about-services .service-grid-item h4 { font-size: var(--ba-fs-body); } .about-services .service-grid-item p { font-size: var(--ba-fs-base); line-height: 26px; letter-spacing: 1px; } } @media (max-width: 767px) { .about-services.section { padding: 35px 0; } } @media (max-width: 600px) { .about-services .ba-services-grid { grid-template-columns: 1fr; row-gap: 40px; } .about-services .service-grid-item { text-align: center; justify-self: center; } } @media (max-width: 479px) { .about-services.section { padding: 25px 0; } .about-services .service-grid-item img { height: 45px; margin-bottom: 16px; } .about-services .service-grid-item h4 { margin-bottom: 14px; } .about-services .service-grid-item p { line-height: 24px; } } /* --- Services Focus Section --- */ .services-focus .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: var(--ba-lh-desc); letter-spacing: var(--ba-ls-ultra); color: var(--ba-text-primary); text-transform: uppercase; text-align: center; padding-bottom: 40px; } .services-focus .section-content { margin-top: 3.3em; } .services-focus__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .services-focus__heading { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-xl); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-text-primary); margin: 0 0 15px; } .services-focus__text { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-body); line-height: var(--ba-lh-body); color: var(--ba-text-secondary); margin: 0 0 12px; } .services-focus__text:last-child { margin-bottom: 0; } @media (max-width: 767px) { .services-focus__grid { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 767px) { .services-focus.section { padding: 35px 0; } .services-focus__text { font-size: var(--ba-fs-base); line-height: 24px; } } @media (max-width: 479px) { .services-focus.section { padding: 25px 0; } .services-focus__text { font-size: var(--ba-fs-base); line-height: 24px; } } /* --- Careers: Why Work With Us --- */ .careers-why .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-6xl); line-height: var(--ba-lh-hero-title); letter-spacing: var(--ba-ls-hero-title); color: var(--ba-text-primary); text-align: center; text-transform: uppercase; } .careers-why .section-content { margin-top: 60px; } .careers-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; } .careers-why__item-title { color: var(--ba-text-primary); font-family: var(--ba-font-body); font-size: var(--ba-fs-lg); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-widest); line-height: 24.3px; margin: 0 0 20px; text-transform: uppercase; } .careers-why__item-text { color: var(--ba-text-secondary); font-family: var(--ba-font-body); font-size: var(--ba-fs-lg); font-weight: var(--ba-weight-regular); line-height: 37.8px; margin: 0; } @media (max-width: 1399px) { .careers-why .section-title { font-size: 42px; line-height: 64px; letter-spacing: 13px; } .careers-why__grid { column-gap: 40px; } .careers-why__item-text { font-size: var(--ba-fs-body); line-height: 30px; } } @media (max-width: 991px) { .careers-why .section-title { font-size: 34px; line-height: 1.35; letter-spacing: 10px; } .careers-why .section-content { margin-top: 44px; } .careers-why__grid { column-gap: 30px; } .careers-why__item-title { font-size: var(--ba-fs-body); } .careers-why__item-text { font-size: var(--ba-fs-base); line-height: 26px; } } @media (max-width: 767px) { .careers-why.section { padding: 35px 0; } .careers-why .section-title { font-size: 28px; letter-spacing: 8px; } .careers-why .section-content { margin-top: 32px; } .careers-why__grid { grid-template-columns: 1fr; row-gap: 34px; } } @media (max-width: 479px) { .careers-why.section { padding: 25px 0; } .careers-why .section-title { font-size: 24px; letter-spacing: 6px; } .careers-why__item-title { margin-bottom: 14px; } .careers-why__item-text { line-height: 24px; } } /* --- Careers: Open Positions --- */ .careers-open-positions .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-6xl); line-height: var(--ba-lh-hero-title); letter-spacing: var(--ba-ls-hero-title); color: var(--ba-text-primary); text-align: center; text-transform: uppercase; } .careers-open-positions .section-content { margin-top: 60px; } .careers-open-positions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .careers-job-card { background-color: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; min-height: 408px; padding: 58px 66px 46px; } .careers-job-card__title { color: #000000; font-family: var(--ba-font-body-alt); font-size: 20px; font-weight: var(--ba-weight-bold); line-height: 23px; margin: 0; } .careers-job-card__type { color: #666666; font-family: var(--ba-font-body); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); line-height: 22.86px; margin: 12px 0 0; } .careers-job-card__description { color: #747474; font-family: var(--ba-font-body); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); line-height: 22.86px; margin: 34px 0 0; } .careers-job-card__location { align-items: center; color: #747474; display: flex; font-family: var(--ba-font-body); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); gap: 12px; line-height: 22.86px; margin-top: 28px; } .careers-job-card__location img { flex-shrink: 0; height: 19px; width: 17px; } .careers-job-card__divider { border-top: 1px solid #bfbfbf; margin-top: auto; width: 100%; } .careers-job-card__cta-wrap { margin-top: 18px; text-align: right; } .careers-job-card__cta { color: var(--ba-accent); display: inline-block; font-family: var(--ba-font-heading); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-controls); line-height: var(--ba-fs-body); text-decoration: none; text-transform: uppercase; } .careers-job-card__cta:hover, .careers-job-card__cta:focus { color: var(--ba-accent-hover); text-decoration: none; } body.dark-mode .careers-job-card { background-color: var(--ba-bg-tertiary); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } body.dark-mode .careers-job-card__title { color: var(--ba-text-primary); } body.dark-mode .careers-job-card__type, body.dark-mode .careers-job-card__description, body.dark-mode .careers-job-card__location { color: var(--ba-text-muted); } body.dark-mode .careers-job-card__divider { border-color: var(--ba-border); } @media (max-width: 1399px) { .careers-open-positions .section-title { font-size: 42px; line-height: 64px; letter-spacing: 13px; } .careers-job-card { padding: 48px 42px 40px; } } @media (max-width: 991px) { .careers-open-positions .section-title { font-size: 34px; letter-spacing: 10px; line-height: 1.35; } .careers-open-positions .section-content { margin-top: 44px; } .careers-open-positions__grid { gap: 30px; } .careers-job-card { min-height: 0; padding: 38px 30px 34px; } } @media (max-width: 767px) { .careers-open-positions.section { padding: 35px 0; } .careers-open-positions .section-title { font-size: 28px; letter-spacing: 8px; } .careers-open-positions .section-content { margin-top: 32px; } .careers-open-positions__grid { grid-template-columns: 1fr; } } @media (max-width: 479px) { .careers-open-positions.section { padding: 25px 0; } .careers-open-positions .section-title { font-size: 24px; letter-spacing: 6px; } .careers-job-card { padding: 30px 22px 28px; } .careers-job-card__description, .careers-job-card__type, .careers-job-card__location { font-size: var(--ba-fs-base); line-height: 22px; } } /* --- About Awards Section (Figma node 97:3859) --- */ /* Section title: "Our" dark, "Awards" gold */ .about-awards .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: var(--ba-lh-desc); letter-spacing: var(--ba-ls-ultra); color: var(--ba-text-primary); text-transform: uppercase; text-align: center; } /* 4×2 grid layout */ .ba-awards-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px; align-items: center; justify-items: center; } .ba-awards-gallery a { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; cursor: pointer; } .ba-awards-gallery img { max-height: 100px; width: auto; opacity: 0.5; filter: grayscale(1); transition: opacity 0.3s ease; } .ba-awards-gallery a:hover img { opacity: 1; } body.dark-mode .ba-awards-gallery img { filter: grayscale(1) invert(1) brightness(1.2); } body.dark-mode .ba-awards-gallery a:hover img { filter: grayscale(1) invert(1) brightness(1.5); } /* Magnific Popup lightbox overlay — Figma gradient */ .ba-awards-lightbox-open .mfp-bg { background: linear-gradient(180deg, rgba(241, 241, 241, 0.80) 33.17%, rgba(215, 215, 215, 0.80) 117.88%); opacity: 1; } .dark-mode.ba-awards-lightbox-open .mfp-bg { background: linear-gradient(180deg, rgba(30, 30, 30, 0.90) 33.17%, rgba(15, 15, 15, 0.90) 117.88%); opacity: 1; } /* Certificate frame: padded wrapper outside the image */ .ba-awards-lightbox-open .mfp-image-holder .mfp-content { max-width: min(1040px, calc(100vw - 240px)); } .ba-awards-lightbox-open .mfp-figure { line-height: 0; } .ba-awards-lightbox-open .mfp-figure:after { display: none; } .ba-awards-lightbox-open .mfp-figure figure { margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } .ba-awards-lightbox-open .mfp-img { margin: 0 auto; max-height: calc(100vh - 100px) !important; padding: 0; border-radius: 20px; box-shadow: 0 24px 56px rgba(19, 18, 17, 0.16); } .ba-awards-lightbox-open .mfp-bottom-bar, .ba-awards-lightbox-open .mfp-title, .ba-awards-lightbox-open .mfp-counter { display: none !important; } /* Close button */ .ba-awards-lightbox-open .mfp-image-holder .mfp-close { color: var(--ba-text-primary); width: 44px; height: 44px; font-size: 36px; line-height: 44px; opacity: 0.5; padding: 0; right: -58px; text-align: center; top: 0; transition: opacity 0.3s ease; } .ba-awards-lightbox-open .mfp-image-holder .mfp-close:hover, .ba-awards-lightbox-open .mfp-image-holder .mfp-close:focus { opacity: 1; } /* --- Custom PREV / NEXT controls from the BA design --- */ .ba-awards-lightbox-open .ba-awards-lightbox__nav { align-items: center; background: none; border: 0; color: var(--ba-text-primary); cursor: pointer; display: inline-flex; gap: 12px; height: auto; margin: 0; opacity: 1; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; width: auto; z-index: 10; } .ba-awards-lightbox-open .ba-awards-lightbox__nav:active { margin-top: 0; } .ba-awards-lightbox-open .ba-awards-lightbox__nav:before, .ba-awards-lightbox-open .ba-awards-lightbox__nav:after, .ba-awards-lightbox-open .ba-awards-lightbox__nav .mfp-a, .ba-awards-lightbox-open .ba-awards-lightbox__nav .mfp-b { content: none !important; display: none !important; } .ba-awards-lightbox-open .ba-awards-lightbox__nav--left { left: 40px; } .ba-awards-lightbox-open .ba-awards-lightbox__nav--right { flex-direction: row-reverse; right: 40px; } .ba-awards-lightbox-open .ba-awards-lightbox__label { color: inherit; font-family: var(--ba-font-heading); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-controls); line-height: var(--ba-lh-tight); text-transform: uppercase; } .ba-awards-lightbox-open .ba-awards-lightbox__arrow { background-color: currentColor; display: block; height: 16px; opacity: 0.28; transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease; width: 21px; -webkit-mask: center / contain no-repeat url('../img/img-icon/awards-nav-prev.svg'); mask: center / contain no-repeat url('../img/img-icon/awards-nav-prev.svg'); } .ba-awards-lightbox-open .ba-awards-lightbox__nav--right .ba-awards-lightbox__arrow { -webkit-mask-image: url('../img/img-icon/awards-nav-next.svg'); mask-image: url('../img/img-icon/awards-nav-next.svg'); } .ba-awards-lightbox-open .ba-awards-lightbox__nav:hover, .ba-awards-lightbox-open .ba-awards-lightbox__nav:focus { color: var(--ba-accent); } .ba-awards-lightbox-open .ba-awards-lightbox__nav:hover .ba-awards-lightbox__arrow, .ba-awards-lightbox-open .ba-awards-lightbox__nav:focus .ba-awards-lightbox__arrow { opacity: 1; } .ba-awards-lightbox-open .ba-awards-lightbox__nav--left:hover .ba-awards-lightbox__arrow, .ba-awards-lightbox-open .ba-awards-lightbox__nav--left:focus .ba-awards-lightbox__arrow { transform: translateX(-2px); } .ba-awards-lightbox-open .ba-awards-lightbox__nav--right:hover .ba-awards-lightbox__arrow, .ba-awards-lightbox-open .ba-awards-lightbox__nav--right:focus .ba-awards-lightbox__arrow { transform: translateX(2px); } /* --- About Awards Responsive --- */ @media (max-width: 991px) { .ba-awards-gallery { grid-template-columns: repeat(4, 1fr); gap: 25px 15px; } .ba-awards-gallery img { max-height: 80px; } .ba-awards-lightbox-open .mfp-image-holder .mfp-content { max-width: calc(100vw - 168px); } .ba-awards-lightbox-open .mfp-image-holder .mfp-close { right: -46px; } .ba-awards-lightbox-open .ba-awards-lightbox__nav--left { left: 24px; } .ba-awards-lightbox-open .ba-awards-lightbox__nav--right { right: 24px; } } @media (max-width: 767px) { .about-awards.section { padding: 35px 0; } .ba-awards-gallery { grid-template-columns: repeat(4, 1fr); gap: 20px 10px; } .ba-awards-gallery img { max-height: 65px; opacity: 0.85; } .ba-awards-lightbox-open .mfp-image-holder .mfp-content { max-width: calc(100vw - 56px); } .ba-awards-lightbox-open .mfp-figure figure { padding: 0; border-radius: 0; } .ba-awards-lightbox-open .mfp-img { border-radius: 20px; } .ba-awards-lightbox-open .mfp-image-holder .mfp-close { right: 0; top: -48px; } .ba-awards-lightbox-open .ba-awards-lightbox__nav { gap: 8px; } .ba-awards-lightbox-open .ba-awards-lightbox__nav--left { left: 14px; } .ba-awards-lightbox-open .ba-awards-lightbox__nav--right { right: 14px; } .ba-awards-lightbox-open .ba-awards-lightbox__label { font-size: var(--ba-fs-sm); letter-spacing: 3px; } .ba-awards-lightbox-open .ba-awards-lightbox__arrow { height: 14px; width: 18px; } } @media (max-width: 479px) { .about-awards.section { padding: 25px 0; } .ba-awards-gallery { grid-template-columns: repeat(2, 1fr); gap: 20px; } .ba-awards-gallery img { max-height: 55px; } } /* ========================================================================== 8. HOMEPAGE 2 ========================================================================== */ .ba-homepage-2-page { background-color: var(--ba-bg-primary); } .ba-homepage-2-header { left: 0; padding: 34px 58px 0; position: absolute; right: 0; top: 0; z-index: 30; } .ba-homepage-2-header__inner { align-items: center; display: flex; gap: 34px; } .ba-homepage-2-logo { color: var(--ba-border); display: inline-flex; flex-direction: column; line-height: 0.92; text-decoration: none; } .ba-homepage-2-logo:hover, .ba-homepage-2-logo:focus { color: #ffffff; text-decoration: none; } .ba-homepage-2-logo__line { display: block; font-family: var(--ba-font-body); font-size: var(--ba-fs-5xl); font-weight: var(--ba-weight-bold); letter-spacing: 0; } .ba-homepage-2-phone { color: #ffffff; font-family: var(--ba-font-heading); font-size: var(--ba-fs-sm); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-controls); margin-left: auto; text-decoration: none; text-transform: uppercase; white-space: nowrap; } .ba-homepage-2-phone:hover, .ba-homepage-2-phone:focus { color: var(--ba-accent); text-decoration: none; } .ba-homepage-2-nav { flex: 0 1 auto; } .ba-homepage-2-nav ul { align-items: center; display: flex; gap: 47px; list-style: none; margin: 0; padding: 0; } .ba-homepage-2-nav li { margin: 0; } .ba-homepage-2-nav a { color: #ffffff; display: inline-block; font-family: var(--ba-font-heading); font-size: var(--ba-fs-sm); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-controls); text-decoration: none; text-transform: uppercase; transition: color 0.25s ease, opacity 0.25s ease; } .ba-homepage-2-nav a:hover, .ba-homepage-2-nav a:focus, .ba-homepage-2-nav .current-menu-item > a, .ba-homepage-2-nav .current_page_item > a, .ba-homepage-2-nav .active > a { color: var(--ba-accent); } .ba-homepage-2-toggle { margin-left: 12px; } .ba-homepage-2-mobile { align-items: center; display: none; justify-content: space-between; } .ba-homepage-2-logo--mobile .ba-homepage-2-logo__line { font-size: 32px; line-height: 0.95; } .ba-homepage-2-hamburger .ba-hamburger-bar { background-color: #ffffff; } .ba-homepage-2-mobile-menu { background: rgba(14, 17, 19, 0.94); margin-top: 18px; } .ba-homepage-2-mobile-menu ul { list-style: none; margin: 0; padding: 0; } .ba-homepage-2-mobile-menu a { color: #ffffff; display: block; font-family: var(--ba-font-heading); font-size: var(--ba-fs-base); letter-spacing: var(--ba-ls-wide); padding: 10px 0; text-decoration: none; text-transform: uppercase; } .ba-homepage-2-mobile-menu li + li a { border-top: 1px solid rgba(255, 255, 255, 0.08); } .ba-homepage-2-mobile-utilities { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 24px; padding-top: 18px; } .ba-homepage-2-phone--mobile { display: inline-block; margin-bottom: 16px; } .ba-homepage-2-main { position: relative; } .ba-homepage-2-hero { align-items: stretch; background-image: linear-gradient(90deg, rgba(13, 19, 22, 0.36) 0%, rgba(101, 109, 112, 0.14) 38%, rgba(222, 218, 212, 0.18) 100%), var(--ba-homepage-2-bg); background-position: center center; background-size: cover; min-height: 1000px; overflow: hidden; position: relative; } .ba-homepage-2-hero::before { background: linear-gradient(180deg, rgba(92, 101, 104, 0.16) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.12) 100%); content: ''; inset: 0; pointer-events: none; position: absolute; } .ba-homepage-2-social-rail { align-items: center; bottom: 178px; display: flex; flex-direction: column; gap: 42px; left: 44px; position: absolute; width: 38px; z-index: 5; } .ba-homepage-2-social-rail__line { background-color: rgba(255, 255, 255, 0.8); display: block; height: 61px; width: 1px; } .ba-homepage-2-social-list { display: flex; flex-direction: column; gap: 34px; list-style: none; margin: 0; padding: 0; } .ba-homepage-2-social-list a { color: #ffffff; display: inline-flex; font-size: 29px; text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; } .ba-homepage-2-social-list a:hover, .ba-homepage-2-social-list a:focus { color: var(--ba-accent); transform: translateY(-2px); } .ba-homepage-2-hero__content { display: flex; justify-content: flex-end; padding: 236px 112px 278px; position: relative; z-index: 4; } .ba-homepage-2-hero__copy { max-width: 760px; text-align: center; } .ba-homepage-2-hero__title { color: #ffffff; font-family: var(--ba-font-heading); font-size: var(--ba-fs-6xl); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-hero-title); line-height: 1.6; margin: 0; text-transform: uppercase; } .ba-homepage-2-hero__description { color: rgba(255, 255, 255, 0.9); font-family: var(--ba-font-body); font-size: var(--ba-fs-copy-xl); font-weight: var(--ba-weight-regular); line-height: 1.9; margin: 22px auto 0; max-width: 610px; } .ba-homepage-2-hero__cta { align-items: center; background-color: var(--ba-accent); border-radius: 999px; color: #ffffff; display: inline-flex; gap: 10px; font-family: var(--ba-font-body); font-size: var(--ba-fs-base); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-wide); margin-top: 24px; min-width: 194px; justify-content: center; padding: 17px 32px; text-decoration: none; text-transform: uppercase; transition: background-color 0.25s ease, transform 0.25s ease; } .ba-homepage-2-hero__cta:hover, .ba-homepage-2-hero__cta:focus { background-color: var(--ba-accent-hover); color: #ffffff; text-decoration: none; transform: translateY(-1px); } .ba-homepage-2-hero__cta-arrow { font-size: 18px; line-height: 1; } .ba-homepage-2-hero__controls { bottom: 98px; display: flex; gap: 42px; left: 46.8%; position: absolute; transform: translateX(-50%); z-index: 6; } .ba-homepage-2-hero__control { background: transparent; border: 0; color: #ffffff; cursor: pointer; font-family: var(--ba-font-heading); font-size: var(--ba-fs-body); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-controls); padding: 0; text-transform: uppercase; transition: color 0.25s ease, opacity 0.25s ease; } .ba-homepage-2-hero__control:hover, .ba-homepage-2-hero__control:focus { color: var(--ba-accent); } .ba-homepage-2-hero__control--prev::before, .ba-homepage-2-hero__control--next::after { color: rgba(255, 255, 255, 0.28); font-size: 20px; position: relative; top: -1px; } .ba-homepage-2-hero__control--prev::before { content: '\2190'; margin-right: 14px; } .ba-homepage-2-hero__control--next::after { content: '\2192'; margin-left: 14px; } .ba-homepage-2-strip { bottom: 0; position: absolute; right: 0; width: min(975px, 100%); z-index: 5; } .ba-homepage-2-strip::before { background-color: var(--ba-bg-primary); content: ''; height: 150px; left: -86px; position: absolute; top: 0; width: calc(100% + 86px); } .ba-homepage-2-strip__counter { align-items: flex-start; display: flex; left: -72px; position: absolute; top: 18px; z-index: 2; } .ba-homepage-2-strip__current { color: var(--ba-accent); font-family: var(--ba-font-heading); font-size: var(--ba-fs-hero); font-weight: var(--ba-weight-regular); letter-spacing: var(--ba-ls-display); line-height: 1; } .ba-homepage-2-strip__total { color: var(--ba-text-mid); font-family: var(--ba-font-heading); font-size: var(--ba-fs-xl); letter-spacing: var(--ba-ls-wider); line-height: 1; margin-left: 12px; margin-top: 15px; } .ba-homepage-2-strip__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 1; } .ba-homepage-2-strip__item { background-color: transparent; border-bottom: 2px solid transparent; min-height: 150px; padding: 30px 16px 24px; } .ba-homepage-2-strip__item.is-active { border-bottom-color: var(--ba-accent-secondary); } .ba-homepage-2-strip__index, .ba-homepage-2-strip__location { color: var(--ba-text-secondary); display: block; font-family: var(--ba-font-body-alt); font-size: var(--ba-fs-xs); font-weight: var(--ba-weight-regular); line-height: 1.85; } .ba-homepage-2-strip__title { color: var(--ba-text-secondary); font-family: var(--ba-font-body-alt); font-size: var(--ba-fs-md); font-weight: var(--ba-weight-bold); line-height: 1.7; margin: 0; text-transform: uppercase; } .ba-homepage-2-strip__item.is-active .ba-homepage-2-strip__index, .ba-homepage-2-strip__item.is-active .ba-homepage-2-strip__title, .ba-homepage-2-strip__item.is-active .ba-homepage-2-strip__location { color: var(--ba-accent-secondary); } body.dark-mode .ba-homepage-2-header .ba-homepage-2-logo, body.dark-mode .ba-homepage-2-phone, body.dark-mode .ba-homepage-2-nav a, body.dark-mode .ba-homepage-2-social-list a, body.dark-mode .ba-homepage-2-hero__title, body.dark-mode .ba-homepage-2-hero__description, body.dark-mode .ba-homepage-2-hero__control { color: #ffffff; } body.dark-mode .ba-homepage-2-strip::before { background-color: var(--ba-bg-tertiary); } body.dark-mode .ba-homepage-2-strip__total { color: var(--ba-text-secondary); } body.dark-mode .ba-homepage-2-strip__index, body.dark-mode .ba-homepage-2-strip__title, body.dark-mode .ba-homepage-2-strip__location { color: var(--ba-text-secondary); } @media (max-width: 1399px) { .ba-homepage-2-header { padding: 30px 34px 0; } .ba-homepage-2-header__inner { gap: 24px; } .ba-homepage-2-nav ul { gap: 28px; } .ba-homepage-2-hero__content { padding: 220px 64px 280px 200px; } .ba-homepage-2-hero__controls { left: 49%; } .ba-homepage-2-social-rail { left: 26px; } } @media (max-width: 1199px) { .ba-homepage-2-phone { display: none; } .ba-homepage-2-hero { min-height: 940px; } .ba-homepage-2-hero__content { padding: 210px 44px 252px 190px; } .ba-homepage-2-hero__title { font-size: var(--ba-fs-5xl); letter-spacing: 13px; } .ba-homepage-2-hero__description { font-size: var(--ba-fs-lg); line-height: 1.8; } .ba-homepage-2-hero__controls { bottom: 124px; gap: 28px; left: 52%; } .ba-homepage-2-strip { width: min(100%, 860px); } .ba-homepage-2-strip::before { left: 0; width: 100%; } .ba-homepage-2-strip__counter { left: 22px; } .ba-homepage-2-strip__items { padding-left: 128px; } } @media (max-width: 991px) { .ba-homepage-2-header { padding: 24px 20px 0; } .ba-homepage-2-header__inner { display: none; } .ba-homepage-2-mobile { display: flex; } .ba-homepage-2-hero { min-height: 920px; } .ba-homepage-2-social-rail { bottom: 208px; gap: 28px; left: 18px; } .ba-homepage-2-social-list { gap: 22px; } .ba-homepage-2-social-list a { font-size: 22px; } .ba-homepage-2-hero__content { justify-content: center; padding: 170px 24px 302px; } .ba-homepage-2-hero__copy { max-width: 620px; } .ba-homepage-2-hero__title { font-size: var(--ba-fs-4xl); letter-spacing: 10px; line-height: 1.5; } .ba-homepage-2-hero__description { font-size: var(--ba-fs-body); line-height: 1.9; max-width: 520px; } .ba-homepage-2-hero__controls { bottom: 182px; left: 50%; } .ba-homepage-2-strip { width: 100%; } .ba-homepage-2-strip__items { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 176px; } } @media (max-width: 767px) { .ba-homepage-2-header { padding: 18px 16px 0; } .ba-homepage-2-logo--mobile .ba-homepage-2-logo__line { font-size: 26px; } .ba-homepage-2-hero { min-height: auto; padding-bottom: 0; } .ba-homepage-2-social-rail { bottom: auto; left: 16px; top: 148px; width: 28px; } .ba-homepage-2-social-rail__line { height: 44px; } .ba-homepage-2-social-list a { font-size: 18px; } .ba-homepage-2-hero__content { padding: 148px 18px 48px 56px; } .ba-homepage-2-hero__copy { max-width: none; text-align: left; } .ba-homepage-2-hero__title { font-size: var(--ba-fs-3xl); letter-spacing: 7px; line-height: 1.45; } .ba-homepage-2-hero__description { font-size: var(--ba-fs-base); line-height: 1.8; margin-left: 0; max-width: 100%; } .ba-homepage-2-hero__cta { min-width: 0; padding: 15px 24px; } .ba-homepage-2-hero__controls { bottom: auto; left: auto; margin: 0 18px 0 56px; position: relative; transform: none; } .ba-homepage-2-strip { position: relative; width: 100%; } .ba-homepage-2-strip::before { height: 100%; } .ba-homepage-2-strip__counter { align-items: center; left: 16px; position: relative; top: 0; } .ba-homepage-2-strip__current { font-size: 72px; } .ba-homepage-2-strip__items { grid-template-columns: 1fr; padding-left: 0; padding-top: 8px; } .ba-homepage-2-strip__item { min-height: 0; padding: 16px; } } /* --- Prevent fade-title text from causing horizontal scrollbar --- */ .section { overflow: hidden; } /* --- Fade titles: bottom-align with section title for all sections (except About) --- */ /* .section-header already has position: relative from GoArch (style.css:559) */ /* Position by LEFT EDGE (not center) so all texts start at the same place */ /* regardless of text length ("Clients" vs "Testimonials") */ .fade-title-left { left: -3% !important; /* slight overshoot past container edge */ top: auto !important; /* clear GoArch's top: 0.03em */ bottom: 0 !important; /* anchor to section-header bottom */ line-height: 0.65 !important; /* tighten box — text sits near edge */ transform: none !important; /* no shift — position by left edge */ } .contacts .fade-title-right { left: auto !important; /* clear GoArch's left: 100% */ right: -3% !important; /* overshoot past container right edge */ top: auto !important; bottom: 0 !important; line-height: 0.65 !important; transform: none !important; white-space: nowrap; /* keep "Get in touch" on one line */ } /* ========================================================================== 9. ABOUT SECTION ========================================================================== Figma node 1:742 — "About" section 3 columns: description | 4 service items | image ========================================================================== */ /* --- Section Title: Oswald 400, 35px, ls 11.2px --- */ .about .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: var(--ba-lh-desc); letter-spacing: var(--ba-ls-ultra); color: var(--ba-text-primary); text-transform: uppercase; text-align: center; } /* --- Column title: Montserrat 400, 30px/33px --- */ .about .col-about-title { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-3xl); line-height: var(--ba-lh-subtitle); letter-spacing: var(--ba-ls-none); color: var(--ba-text-primary); } /* --- Body text: Montserrat 400, 16px/26.4px --- */ .about .col-about-info p { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-body); line-height: var(--ba-lh-body); color: var(--ba-text-secondary); } /* --- Service labels: Montserrat 400, 18px/24.3px, ls 3.6px --- */ .about .service-item h4 { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-lg); line-height: var(--ba-lh-service); letter-spacing: var(--ba-ls-widest); color: var(--ba-text-primary); text-transform: uppercase; } /* Service items: 40px gap between items, 14.4px gap icon→label */ .about .service-item { margin-bottom: 40px; } .about .service-item:last-child { margin-bottom: 0; } .about .service-item h4 { margin-top: 14px; } .about .col-about-services-grid { display: block; } /* --- Image: box shadow per Figma --- */ .about .col-about-img img { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } /* ========================================================================== 10. EXPERIENCE SECTION — Text Parallax Fix ========================================================================== GoArch uses mix-blend-mode: darken with a #272727 bg + white text. That only works on dark backgrounds. For light mode we flip it: white bg + black text + mix-blend-mode: lighten. ========================================================================== */ .text-parallax-content { background: #ffffff !important; color: #000 !important; mix-blend-mode: lighten !important; } body.dark-mode .text-parallax-content { background: #272727 !important; color: #fff !important; mix-blend-mode: darken !important; } /* ========================================================================== 11. CLIENTS SECTION ========================================================================== Figma node 97:3569 - Faded "Clients" bg text: Montserrat Bold, 172.8px, 3.5% opacity - Section title: Oswald 400, 35px, ls 11.2px - Logo grid: 2 rows x 5, 20% opacity - CTA: gold pill button (uses GoArch .btn base) ========================================================================== */ /* --- Section title --- */ .clients .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: var(--ba-lh-desc); letter-spacing: var(--ba-ls-ultra); color: var(--ba-text-primary); text-transform: uppercase; text-align: center; } .about .fade-title-left, .clients .fade-title-left, .testimonials .fade-title-left, .contacts .fade-title-right { font-family: var(--ba-font-body); font-weight: var(--ba-weight-bold); color: var(--ba-text-black); opacity: 0.035; } body.home .about.section, body.home .clients.section, body.home .testimonials.section { padding-top: 10em; } /* --- Clients Logo Grid --- */ .clients-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4em 1.8em; list-style: none; padding: 0; margin: 0; } .clients-grid__cell { display: flex; align-items: center; justify-content: center; } .clients-grid__img { width: 170px; height: auto; opacity: 1; transition: transform 0.3s ease, filter 0.7s ease, opacity 0.7s ease; } .clients-grid__img:hover { transform: scale(1.03); } .clients-grid__img.is-swapping { opacity: 0; filter: blur(8px); } @media (max-width: 991px) { .clients-grid { grid-template-columns: repeat(4, 1fr); gap: 2em 1.2em; } .clients-grid__cell:nth-child(n+13) { display: none; } .clients-grid__img { width: 100%; max-width: 140px; height: auto; } } @media (max-width: 549px) { .about .col-about-spec { text-align: center; } .about .col-about-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 24px; } .about .col-about-services-grid .service-item { margin-bottom: 0; } .clients-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6em 1em; } .clients-grid__cell:nth-child(n+10) { display: none; } .clients-grid__img { width: 100%; max-width: 120px; height: auto; } } /* --- CTA button: override GoArch's montserratsemibold with our Montserrat --- */ /* Figma: Montserrat Regular 400, 14px/20px, ls 2.1px, #C5A47E bg, white text */ /* GoArch .btn base already matches all values except font-family */ .btn { font-family: var(--ba-font-body); font-weight: var(--ba-weight-regular); } .btn:hover, .btn:focus { background-color: #c5a47e; box-shadow: 0 0 18px rgba(197, 164, 126, 0.55), 0 0 36px rgba(197, 164, 126, 0.25); } /* --- Service Child Standard Template --- */ .service-child-intro.section { padding-top: 56px; } .service-project-gallery.section { padding-bottom: 0; } .service-project-gallery .section-title { font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: var(--ba-fs-4xl); line-height: var(--ba-lh-desc); letter-spacing: var(--ba-ls-ultra); color: var(--ba-text-primary); text-transform: uppercase; text-align: center; } .service-project-gallery__tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; margin: 63px 0 24px; padding-bottom: 12px; } .service-project-gallery__tab { border: 0; background: transparent; padding: 0; font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: 16px; line-height: 16px; letter-spacing: 5.12px; color: #272727; text-transform: uppercase; transition: color 0.25s ease, opacity 0.25s ease; } .service-project-gallery__tab:hover, .service-project-gallery__tab:focus, .service-project-gallery__tab.is-active { color: var(--ba-accent); } .service-project-gallery__stage { position: relative; height: 943px; overflow: hidden; } .service-project-gallery__slide { position: absolute; inset: 0; display: flex; align-items: stretch; background-image: var(--ba-service-project-bg); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s ease, visibility 0.45s ease; } .service-project-gallery__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .service-project-gallery__slide-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.34) 58%, rgba(0, 0, 0, 0.42) 100%); } .service-project-gallery__slide-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; min-height: 943px; padding: 138px 0 110px; } .layout .service-project-gallery__overlay-title, .service-project-gallery__overlay-title { margin: 0; font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: clamp(52px, 5vw, 76px); line-height: 1.1; letter-spacing: clamp(12px, 1.6vw, 24px); color: #ffffff; text-transform: uppercase; } .service-project-gallery__overlay-title span { display: block; } .service-project-gallery__location { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-family: var(--ba-font-body); font-weight: var(--ba-weight-bold); font-size: 14px; line-height: 39.594px; letter-spacing: 2.56px; color: var(--ba-accent); text-transform: uppercase; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); } .service-project-gallery__location img { width: 11px; height: 16px; flex: 0 0 auto; transform: scaleY(-1); } .service-project-gallery__controls { display: flex; align-items: center; gap: 52px; margin-top: 22px; } .service-project-gallery__control { display: inline-flex; align-items: center; gap: 20px; border: 0; background: transparent; padding: 0; font-family: var(--ba-font-heading); font-weight: var(--ba-weight-regular); font-size: 16px; line-height: 16px; letter-spacing: 5.12px; color: #ffffff; text-transform: uppercase; transition: opacity 0.25s ease; } .service-project-gallery__control:hover, .service-project-gallery__control:focus { opacity: 0.75; } .service-project-gallery__control img { display: block; width: 20.8px; height: 16px; flex: 0 0 auto; } body.dark-mode .service-project-gallery__tab { color: rgba(255, 255, 255, 0.75); } body.dark-mode .service-project-gallery__tab:hover, body.dark-mode .service-project-gallery__tab:focus, body.dark-mode .service-project-gallery__tab.is-active { color: var(--ba-accent); } @media (max-width: 1599px) { .service-project-gallery__stage { height: 820px; } .service-project-gallery__slide-content { min-height: 820px; } } @media (max-width: 1399px) { .service-project-gallery .section-title { font-size: 30px; line-height: 34px; letter-spacing: 9px; } .service-project-gallery__tabs { gap: 18px 28px; margin-top: 48px; } .service-project-gallery__stage { height: 760px; } .service-project-gallery__slide-content { min-height: 760px; padding: 120px 0 96px; } .service-project-gallery__overlay-title { font-size: 60px; line-height: 1.1; letter-spacing: 18px; } } @media (max-width: 991px) { .service-child-intro.section { padding-top: 44px; } .service-project-gallery .section-title { font-size: 26px; line-height: 30px; letter-spacing: 7px; } .service-project-gallery__tabs { gap: 16px 22px; margin-top: 40px; } .service-project-gallery__tab { font-size: 14px; line-height: 14px; letter-spacing: 3.8px; } .service-project-gallery__stage { height: 620px; } .service-project-gallery__slide-content { min-height: 620px; padding: 104px 0 80px; } .service-project-gallery__overlay-title { font-size: 46px; line-height: 1.1; letter-spacing: 14px; } .service-project-gallery__location { line-height: 28px; } } @media (max-width: 767px) { .service-child-intro.section { padding-top: 35px; } .service-project-gallery.section { padding-top: 35px; } .service-project-gallery__tabs { gap: 14px 18px; margin-top: 32px; margin-bottom: 18px; } .service-project-gallery__stage { height: 520px; } .service-project-gallery__slide-content { min-height: 520px; max-width: 100%; padding: 84px 0 58px; } .service-project-gallery__overlay-title { font-size: 34px; line-height: 42px; letter-spacing: 8px; } .service-project-gallery__location { margin-top: 20px; font-size: 12px; letter-spacing: 2px; } .service-project-gallery__controls { gap: 30px; margin-top: 18px; } .service-project-gallery__control { gap: 12px; font-size: 13px; line-height: 13px; letter-spacing: 3px; } } @media (max-width: 479px) { .service-child-intro.section { padding-top: 25px; } .service-project-gallery.section { padding-top: 25px; } .service-project-gallery .section-title { font-size: 22px; line-height: 28px; letter-spacing: 5px; } .service-project-gallery__stage { height: 80vh; } .service-project-gallery__slide-content { min-height: 80vh; padding: 70px 0 44px; } .service-project-gallery__overlay-title { font-size: 26px; line-height: 32px; letter-spacing: 5px; } .service-project-gallery__controls { flex-wrap: wrap; gap: 16px 24px; } } @media (min-width: 768px) { .service-project-gallery__slide-content { min-height: 720px; } } @media (min-width: 768px) and (min-height: 512px) { .service-project-gallery__stage { height: 100vh; } .service-project-gallery__slide-content { min-height: 100vh; } } /* ========================================================================== BLOG LIST ========================================================================== */ .ba-blog-list .blog { background-color: var(--ba-bg-primary); border-radius: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); overflow: hidden; min-height: 522px; } .ba-blog-list .blog-thumbnail-bg { right: 0; border-radius: 0; background-position: center center; } .ba-blog-list .blog-thumbnail-img img { width: 100%; border-radius: 0; } .ba-blog-list .blog-info { min-height: 522px; padding: 84px 72px 72px 60px; } .ba-blog-list .blog-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; line-height: 23px; letter-spacing: 0; text-transform: none; margin: 0 0 24px; } .ba-blog-list .blog-title a { color: #000000; } .ba-blog-list .blog-title a:hover, .ba-blog-list .blog-title a:focus { color: var(--ba-accent); text-decoration: none; } .ba-blog-list .blog-info p { font-family: var(--ba-font-body); font-size: 16px; line-height: 22.86px; color: #747474; } .ba-blog-list .blog-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--ba-font-body); font-size: 16px; line-height: 22.86px; color: #666666; overflow: visible; } .ba-blog-list .blog-meta .author, .ba-blog-list .blog-meta .time { float: none; color: #666666; } @media (min-width: 992px) { .ba-blog-list .blog-meta .time-year { display: none; } } /* --- Contact Map Section --- */ .contact-map.section { position: relative; padding: 0; min-height: 620px; overflow: hidden; } .contact-map__canvas, .contact-map__embed { display: block; width: 100%; height: 100%; } .contact-map__canvas { position: absolute; inset: 0; } .contact-map__embed { border: 0; filter: saturate(0.95) contrast(1.02); } .contact-map__panel { position: relative; z-index: 1; display: flex; justify-content: flex-end; min-height: 620px; pointer-events: none; } .contact-map__panel-inner { width: min(39%, 440px); min-height: 620px; padding: 72px 56px; background: rgba(197, 164, 126, 0.84); backdrop-filter: blur(1px); color: #ffffff; pointer-events: auto; } .contact-map__item + .contact-map__item { margin-top: 56px; } .contact-map__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--ba-font-heading); font-size: 16px; font-weight: var(--ba-weight-light); letter-spacing: 6px; line-height: 1.2; text-transform: uppercase; color: #ffffff; } .contact-map__label i { font-size: 13px; } .contact-map__value { display: grid; gap: 6px; font-family: var(--ba-font-body); font-size: 16px; font-weight: var(--ba-weight-regular); line-height: 1.7; letter-spacing: 1.4px; color: rgba(255, 255, 255, 0.96); } .contact-map__value a, .contact-map__value span { color: inherit; } .contact-map__value a:hover, .contact-map__value a:focus { color: #ffffff; } body.dark-mode .contact-map__panel-inner { background: rgba(177, 151, 119, 0.9); } @media (max-width: 1199px) { .contact-map.section, .contact-map__panel { min-height: 580px; } .contact-map__panel-inner { width: min(43%, 420px); min-height: 580px; padding: 64px 44px; } .contact-map__item + .contact-map__item { margin-top: 46px; } } @media (max-width: 991px) { .contact-map.section, .contact-map__panel { min-height: 560px; } .contact-map__panel-inner { width: min(48%, 380px); min-height: 560px; padding: 52px 34px; } .contact-map__label { gap: 8px; margin-bottom: 14px; font-size: 14px; letter-spacing: 4.8px; } .contact-map__value { font-size: 15px; line-height: 1.6; letter-spacing: 1.1px; } .contact-map__item + .contact-map__item { margin-top: 34px; } } @media (max-width: 767px) { .contact-map.section { display: block !important; min-height: 0 !important; overflow: visible; } .contact-map__canvas { position: static !important; inset: auto !important; display: block !important; width: 100% !important; height: 360px !important; } .contact-map__embed { width: 100% !important; height: 100% !important; display: block !important; } .contact-map__panel { display: block !important; position: static !important; width: 100% !important; min-height: 0 !important; pointer-events: auto; background: rgba(197, 164, 126, 0.92) !important; } .contact-map__panel-inner { width: 100% !important; min-height: 0 !important; max-width: none !important; padding: 38px 24px !important; background: transparent !important; backdrop-filter: none !important; } .contact-map__label { font-size: 13px; letter-spacing: 4px; } .contact-map__label i { font-size: 12px; } .contact-map__value { font-size: 14px; line-height: 1.55; letter-spacing: 0.8px; } .contact-map__item + .contact-map__item { margin-top: 28px; } } @media (max-width: 479px) { .contact-map__canvas { height: 300px; } .contact-map__panel { background: rgba(197, 164, 126, 0.96); } .contact-map__panel-inner { padding: 32px 20px; } .contact-map__label { margin-bottom: 12px; letter-spacing: 3.2px; } .contact-map__value { font-size: 13px; line-height: 1.5; letter-spacing: 0.5px; } .contact-map__item + .contact-map__item { margin-top: 24px; } } @media (max-width: 767px) { body.dark-mode .contact-map__panel { background: rgba(177, 151, 119, 0.94); } } .ba-blog-list .blog-meta .author-name { font-weight: 700; } .ba-blog-list .blog-info .blog-meta { border-top: 1px solid #999999; margin-top: 18px; padding-top: 20px; } .ba-blog-list .read-more { display: inline-flex; align-items: center; gap: 8px; padding-right: 0; margin-top: 56px; background: none; color: var(--ba-accent); font-family: var(--ba-font-heading); font-size: 16px; line-height: 16px; letter-spacing: 5.12px; text-transform: uppercase; } .ba-blog-list .read-more::after { content: "\2192"; font-size: 15px; line-height: 1; transition: transform 0.2s ease; } .ba-blog-list .read-more:hover, .ba-blog-list .read-more:focus { color: var(--ba-accent); text-decoration: none; } .ba-blog-list .read-more:hover::after, .ba-blog-list .read-more:focus::after { transform: translateX(2px); } body.dark-mode .ba-blog-list .blog { background-color: var(--ba-bg-secondary); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); } body.dark-mode .ba-blog-list .blog-title a { color: var(--ba-text-primary); } body.dark-mode .ba-blog-list .blog-info p, body.dark-mode .ba-blog-list .blog-meta, body.dark-mode .ba-blog-list .blog-meta .author, body.dark-mode .ba-blog-list .blog-meta .time { color: var(--ba-text-muted); } @media (max-width: 991px) { .ba-blog-list .blog { margin-bottom: 32px; min-height: 0; } .ba-blog-list .blog-info { min-height: 0; padding: 36px 32px 34px; } } @media (max-width: 767px) { .ba-blog-list .blog-title { font-size: 22px; line-height: 1.25; } .ba-blog-list .blog-info p { font-size: 14px; line-height: 22px; } .ba-blog-list .blog-meta { font-size: 14px; line-height: 20px; } .ba-blog-list .read-more { margin-top: 28px; font-size: 14px; letter-spacing: 4px; } }