/* ============================================================ The Medical Fitout — Client-side PM + Builder ============================================================ */ /* Brand font (Archivo) loaded from Google Fonts in . No local @font-face declarations needed. */ :root { /* The Medical Fitout brand palette. --brown is the primary brand color (kept as the variable name so all the existing references continue to work). For TMF we use deep teal #004346. */ --brown: #004346; --brown-soft: rgba(0, 67, 70, 0.7); --teal: #004346; --teal-mid: #508991; --teal-light: #74B3CE; --accent-green: #00B3A2; --grey: #3d4a57; --grey-soft: rgba(61, 74, 87, 0.6); --grey-faint: rgba(61, 74, 87, 0.25); --grey-bg: #f5f5f3; --white: #ffffff; --black: #172A3A; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* TMF brand font: Archivo (single family across body + headings). */ --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-serif: "Archivo", "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Standard accessible "visually hidden" pattern: present for screen readers and search engines, removed from visual layout without affecting flow. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html, body { font-family: var(--font-body); color: var(--grey); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; line-height: 1.5; scroll-behavior: smooth; overflow-x: clip; } /* Headings + UI labels keep the original sans (Hanken Grotesk). Logos keep the serif (Italiana). Everything else is Blacker Sans. */ h1, h2, h3, h4, h5, h6, .col-heading, .heading, .feature-title, .feature-meta, .menu-main-nav, .footer-col, .pill, .filter-bar button, .index-row, .index-filters, .feature-explore, .feature-meta, .team-card .info, .team-detail-card .info, .team-detail .name, .team-detail .role, .value-card .name, .service-card .label .name, .service-detail-img .name, .service-card-cta, .nur-logo { font-family: var(--font-sans); } .nur-logo { font-family: var(--font-serif); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; } /* -------- Logo (NUR text - legacy) -------- */ .nur-logo { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.04em; line-height: 1; display: inline-block; user-select: none; } /* -------- Logo (TMF SVG image) -------- The Medical Fitout logo is an SVG that we display in 3 places: the page loader, the top header, and the footer. Aspect ratio 2048:1365 is roughly 3:2. */ .tmf-logo { display: inline-block; line-height: 0; user-select: none; } .tmf-logo img { display: block; width: auto; height: 100%; } /* Top header: scale logo to fit the 160px header band. We render BOTH variants (white-on-dark + dark-on-light) and cross-fade them via opacity based on the .is-dark class JS toggles when you scroll past the hero. New brandmark aspect ratio is 640:382 ≈ 1.676:1. */ .top-header .tmf-logo { position: relative; display: inline-block; height: 84px; width: calc(84px * 640 / 382); /* preserve new brandmark ratio */ pointer-events: auto; cursor: pointer; } .top-header .tmf-logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s ease; } .top-header .tmf-logo--dark { opacity: 0; } /* dark navy logo, used over light backgrounds */ .top-header .tmf-logo--light { opacity: 1; } /* white logo, used over dark hero */ .top-header.is-dark .tmf-logo--dark { opacity: 1; } .top-header.is-dark .tmf-logo--light { opacity: 0; } /* Larger logo + vertical padding on About / Our Process / Projects (desktop) */ body:has(#page-about.is-active) .top-header, body:has(#page-partnerships.is-active) .top-header, body:has(#page-projects.is-active) .top-header { height: auto; padding-top: 24px; padding-bottom: 24px; } body:has(#page-about.is-active) .top-header .tmf-logo, body:has(#page-partnerships.is-active) .top-header .tmf-logo, body:has(#page-projects.is-active) .top-header .tmf-logo { height: 190px; width: calc(190px * 640 / 382); } /* Mobile: bigger logo, tighter left edge, vertical breathing room */ @media (max-width: 768px) { body:has(#page-about.is-active) .top-header, body:has(#page-partnerships.is-active) .top-header, body:has(#page-projects.is-active) .top-header { height: auto; padding-top: 26px; padding-bottom: 26px; padding-left: 18px; } body:has(#page-about.is-active) .top-header .tmf-logo, body:has(#page-partnerships.is-active) .top-header .tmf-logo, body:has(#page-projects.is-active) .top-header .tmf-logo { height: 100px; width: calc(100px * 640 / 382); } } /* Page loader: large centered white logo on the deep-teal brand background */ .page-loader .loader-logo { width: min(360px, 78vw); height: auto; } .page-loader .loader-logo img { width: 100%; height: auto; } /* ============================================================ Animated brandmark used in the page loader. All sizes are derived from the wrapper width so the whole thing scales as one block - so we keep the proportions of the brand pack at every screen size. ============================================================ */ .tmf-animated-logo { --tmf-w: min(567px, 84vw); width: var(--tmf-w); font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; color: #ffffff; display: inline-block; text-align: left; } .tmf-animated-logo .tal-the { font-size: calc(var(--tmf-w) * 30 / 567); font-weight: 600; letter-spacing: 0.42em; margin-bottom: calc(var(--tmf-w) * 14 / 567); line-height: 1; } .tmf-animated-logo .tal-medical { color: #fff; font-size: calc(var(--tmf-w) * 118 / 567); font-weight: 800; line-height: 0.9; letter-spacing: 0; } .tmf-animated-logo .tal-ecg { display: block; width: 100%; height: auto; margin: calc(var(--tmf-w) * 8 / 567) 0 calc(var(--tmf-w) * 14 / 567); overflow: visible; /* dot glow can spill past the viewBox */ } .tmf-animated-logo .tal-fitout { font-size: calc(var(--tmf-w) * 64 / 567); font-weight: 600; display: flex; justify-content: space-between; width: 100%; line-height: 1; } .tmf-animated-logo .pdot { /* dot animation disabled — asset kept, animation off */ display: none; } /* Footer: same white-on-dark version, slightly muted */ .footer .tmf-logo.footer-logo { height: auto; width: min(280px, 60vw); display: inline-block; } .footer .tmf-logo.footer-logo img { width: 100%; height: auto; opacity: 0.94; } /* -------- Top header (logo top-left) -------- */ .top-header { position: fixed; top: 0; left: 0; right: 0; height: 160px; display: flex; align-items: center; justify-content: flex-start; padding-left: 56px; z-index: 50; pointer-events: none; transition: opacity .4s ease; } .top-header.is-hidden { opacity: 0; pointer-events: none; } /* Hide the small top-left logo on the home/landing page — it has its own large hero logo */ body:has(#page-home.is-active) .top-header { opacity: 0; pointer-events: none; } .top-header .nur-logo { font-size: 108px; color: var(--white); text-shadow: 0 0 6px rgba(0,0,0,0.18); pointer-events: auto; cursor: pointer; transition: color .3s ease; } .top-header.is-dark .nur-logo { color: var(--brown); text-shadow: none; } /* -------- Side menu trigger (left edge bar) -------- */ .side-rail { position: fixed; top: 0; left: 0; width: 50px; height: 100vh; background: rgba(0, 0, 0, 0.21); display: flex; align-items: center; justify-content: center; z-index: 49; cursor: pointer; transition: background .3s ease, width .35s var(--ease); } .side-rail:hover { background: rgba(0, 0, 0, 0.32); } .side-rail.on-light { background: rgba(69,46,21,0.08); } .side-rail.on-light:hover { background: rgba(69,46,21,0.18); } .side-rail svg { width: 18px; height: 30px; fill: var(--white); transition: fill .3s ease, transform .35s var(--ease); } .side-rail.on-light svg { fill: var(--brown); } /* -------- Top-right burger button (mobile only - shown via media query) -------- */ .burger-btn { display: none; /* desktop hides this; mobile @media unhides */ position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0; border-radius: 50%; z-index: 90; /* above menu-panel so the close-tap target stays accessible */ cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: background .25s ease, transform .35s var(--ease); } .burger-btn .burger-line { display: block; width: 18px; height: 1.5px; background: var(--brown); transition: transform .3s ease, opacity .25s ease; } .burger-btn.is-on { background: rgba(255,255,255,0.98); } .burger-btn.is-on .burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger-btn.is-on .burger-line:nth-child(2) { opacity: 0; } .burger-btn.is-on .burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* -------- Slide-out menu panel -------- */ .menu-panel { position: fixed; top: 0; left: 0; width: 404px; max-width: 90vw; height: 100vh; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--white); transform: translateX(-100%); transition: transform .55s var(--ease); z-index: 80; padding: 60px 50px; display: flex; flex-direction: column; justify-content: space-between; } .menu-panel.is-open { transform: translateX(0); } .menu-close { position: absolute; top: 28px; right: 28px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--white); } .menu-close::before { content: "×"; line-height: 0; } .menu-main-nav { margin-top: 80px; } .menu-main-nav a { display: block; font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase; padding: 18px 0; color: rgba(255,255,255,0.85); transition: color .25s ease, padding-left .25s ease; position: relative; } .menu-main-nav a:hover { color: var(--white); padding-left: 18px; } .menu-main-nav a.is-active { color: var(--white); padding-left: 18px; } .menu-main-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--white); transition: width .25s ease; } .menu-main-nav a:hover::before, .menu-main-nav a.is-active::before { width: 12px; } .menu-footer { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.75); letter-spacing: 0.01em; } .menu-footer .label { letter-spacing: 0.2em; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 18px; display:block;} .menu-footer a { color: rgba(255,255,255,0.9); transition: color .2s; font-size: 14px; } .menu-footer a:hover { color: var(--white); } .menu-socials { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; } .menu-socials a { letter-spacing: 0.15em; text-transform: uppercase; font-size: 12px; } .menu-divider { border-top: 0.5px solid rgba(255,255,255,0.25); margin: 22px 0 14px; } /* -------- Right floating utility cluster (audio toggle, scroll hint) -------- */ .utility-rail { position: fixed; top: 50%; right: 28px; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 26px; } .utility-rail .scroll-label { display: none; } /* scroll indicator removed */ .audio-toggle { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; position: relative; transition: background .3s, border-color .3s; } .audio-toggle:hover { background: rgba(255,255,255,0.18); } .utility-rail.on-light .audio-toggle { background: rgba(69,46,21,0.04); border-color: rgba(69,46,21,0.35); } .utility-rail.on-light .audio-toggle:hover { background: rgba(69,46,21,0.1); } .audio-toggle .bars { display: flex; align-items: center; gap: 3px; height: 16px; } .audio-toggle .bars span { display: block; width: 2px; background: var(--white); border-radius: 2px; height: 4px; transition: height .2s ease; } .utility-rail.on-light .audio-toggle .bars span { background: var(--brown); } .audio-toggle.is-playing .bars span:nth-child(1) { animation: bar 1s ease-in-out infinite .0s; } .audio-toggle.is-playing .bars span:nth-child(2) { animation: bar 1s ease-in-out infinite .15s; } .audio-toggle.is-playing .bars span:nth-child(3) { animation: bar 1s ease-in-out infinite .3s; } .audio-toggle.is-playing .bars span:nth-child(4) { animation: bar 1s ease-in-out infinite .45s; } @keyframes bar { 0%, 100% { height: 4px; } 50% { height: 14px; } } .audio-toggle .label { position: absolute; right: 54px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.6); opacity: 0; transition: opacity .25s; pointer-events: none; } .utility-rail.on-light .audio-toggle .label { color: rgba(102,102,102,0.6); } .audio-toggle:hover .label { opacity: 1; } /* -------- Page transitions -------- */ .page { display: none; opacity: 0; transition: opacity .6s ease; } .page.is-active { display: block; opacity: 1; } .page-loader { position: fixed; inset: 0; background: #004346; /* brand teal so the loader matches the logo font colour */ color: var(--white); z-index: 200; display: flex; align-items: center; justify-content: center; /* Visible by default so the very first paint (before JS runs) is the brown NUR splash, not a brief blank/poster flash from the hero video. JS fades it out once the hero video's first frame is actually ready. */ opacity: 1; pointer-events: auto; transition: opacity .5s ease; } .page-loader.is-on { opacity: 1; pointer-events: auto; } /* The "off" state (no .is-on class) needs to override the default visible styles above so the fade-out actually happens on subsequent route changes. */ .page-loader:not(.is-on) { opacity: 0; pointer-events: none; } .page-loader .nur-logo { font-size: 48px; opacity: 0.4; text-align: center; display: inline-block; min-width: 120px; /* reserves space so any font-load reflow is invisible */ font-feature-settings: normal; } /* ============================================================ HERO SECTION ============================================================ */ .hero { position: relative; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; background: #172A3A; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 4%, rgba(0,0,0,0) 22%, rgba(0,0,0,0.55) 100%); z-index: 2; } /* Landing hero uses the new video (no white-frame artifact to mask), so drop the heavy top-darkening gradient that was needed for the old source file. */ .hero--landing::before { background: none; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 8s ease-out; transform: scale(1.05); } .hero.is-loaded .hero-bg { transform: scale(1); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 1; /* Scale slightly larger than container so white edge frames on the source video are pushed outside the overflow:hidden boundary and clipped away. */ transform: scale(1.06); transition: transform 12s ease-out; } .hero.is-loaded .hero-video { transform: scale(1.06); } /* ============================================================ Animated brandmark hero (replaces the old video hero). Navy backdrop, brandmark centered, tagline still bottom-right. ============================================================ */ .hero--brandmark { background: #172A3A; } .hero--brandmark::before { /* Subtle vignette so the tagline still has separation from the brandmark. Lighter than the video hero's overlay so we don't dull the brand. */ background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%); } .hero-brandmark { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; } .hero-brandmark .tmf-animated-logo { /* Bigger than the loader, fills the hero comfortably across screen sizes */ --tmf-w: min(820px, 78vw); } .hero-tagline { position: absolute; right: 75px; bottom: 50px; text-align: right; z-index: 3; color: var(--white); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; max-width: 744px; font-weight: 400; opacity: 0; transform: translateY(20px); animation: fadeUp 1.6s var(--ease) 1.2s forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } .hero-scroll-cue { display: none; /* scroll cue removed */ } .hero-scroll-cue::after { content: ""; width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* hero variants */ /* Hero backgrounds use the real clinic photography. The landing hero is served by the video, these are the still fallbacks + the inner-page heros. */ .hero--landing .hero-bg { background-image: url("assets/aes-luxe-waiting.jpg"); } .hero--about .hero-bg { background-image: url("assets/aes-reception-green.jpg"); } .hero--projects .hero-bg { background-image: url("assets/feature-radiology-waiting.jpg"); } /* Desktop only: crop the Gemini watermark from the bottom-right of the Projects hero by scaling the image up + anchoring to the top-left, so the bottom-right corner of the source image is pushed past the parent's overflow:hidden boundary. Same trick as the home hero-video. */ @media (min-width: 769px) { .hero--projects .hero-bg, .hero.is-loaded .hero--projects .hero-bg { transform: scale(1.12) !important; transform-origin: top left !important; } } .hero--acquisitions .hero-bg { background-image: url("assets/feature-ct-scanner.jpg"); } .hero--partnerships .hero-bg { background-image: url("assets/feature-ct-scanner.jpg"); } .hero--joint-ventures .hero-bg { background-image: url("assets/feature-ct-scanner.jpg"); } .hero--project-detail .hero-bg { background-image: url("assets/feature-xray-room.jpg"); } /* ============================================================ PAGE TITLE TAGLINE (right aligned, large) ============================================================ */ .page-title-right { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 400; } /* ============================================================ GENERIC SECTIONS ============================================================ */ .section { padding: 130px 75px; position: relative; } .section-narrow { padding: 100px 75px; } .divider { height: 1px; background: var(--grey-soft); margin: 0 75px; } /* Two-column layout */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .col-heading { font-size: clamp(26px, 2.4vw, 35px); line-height: 1.25; letter-spacing: -0.02em; color: var(--brown); font-weight: 400; max-width: 620px; } .col-body p { font-size: 18px; line-height: 1.65; color: var(--brown); margin-bottom: 1.4em; } .col-body p:last-child { margin-bottom: 0; } .col-body--brown p { color: var(--brown); } .eyebrow { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brown); margin-bottom: 24px; font-weight: 500; } /* ============================================================ INTRO SCROLL SECTION (landing page) - Big text on left, three stacked images on right that scroll faster ============================================================ */ .intro-scroll { position: relative; padding: 140px 75px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .intro-scroll-text { position: sticky; top: 140px; max-width: 620px; } .intro-scroll-text h2 { font-size: clamp(26px, 2.4vw, 35px); line-height: 1.25; letter-spacing: -0.01em; color: var(--brown); font-weight: 400; } .intro-scroll-imgs { display: flex; flex-direction: column; gap: 30px; } .intro-scroll-body p { font-size: 18px; line-height: 1.65; color: var(--brown); margin-bottom: 1.4em; } .intro-scroll-body .body-list { list-style: none; margin: 0 0 1.4em; padding: 0; } .intro-scroll-body .body-list li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.55; color: var(--brown); margin-bottom: 12px; } .intro-scroll-body .body-list li:last-child { margin-bottom: 0; } .intro-scroll-body .body-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); } .intro-scroll-img { width: 100%; aspect-ratio: 635 / 390; background-image: url("assets/feature-ct-room.jpg"); background-size: cover; background-position: center; } /* First intro image (CT room) zoomed in slightly */ .intro-scroll-img:not(.alt):not(.alt2) { background-size: 115%; } .intro-scroll-img.alt { background-image: url("assets/aes-waiting-arch.jpg"); } .intro-scroll-img.alt2 { background-image: url("assets/aes-corridor-plant.jpg"); } /* Project detail page - use clinic-grade examples */ #page-project-detail .intro-scroll-img { background-image: url("assets/aes-reception-olive.jpg"); } #page-project-detail .intro-scroll-img.alt { background-image: url("assets/aes-curved-waiting.jpg"); } #page-project-detail .intro-scroll-img.alt2 { background-image: url("assets/aes-sterilization.jpg"); } /* ============================================================ MAP SECTION ============================================================ */ .map-section { padding: 100px 75px 130px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: start; } .map-section .col-heading { color: var(--brown); max-width: 420px; font-size: 28px; line-height: 1.05; } .map-section .col-body p { color: var(--brown); max-width: 420px; } /* Wide variant: text above, full-bleed horizontal map underneath */ .map-section.map-section--wide { display: block !important; grid-template-columns: none; padding: 100px 75px 130px; } .map-section--wide .map-section-intro { max-width: 780px; margin: 0 0 50px; } .map-section--wide .col-heading { max-width: 780px; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.1; } .map-section--wide .col-body p { max-width: 780px; } .map-section--wide .au-map-leaflet { aspect-ratio: 16 / 9; /* horizontal banner that fits Australia's proportions */ width: 100%; } @media (max-width: 700px) { .map-section--wide { padding: 60px 24px 80px; } .map-section--wide .map-section-intro { margin-bottom: 28px; } .map-section--wide .au-map-leaflet { aspect-ratio: 4 / 3; } } /* ============================================================ Interactive Australia map (Leaflet) ============================================================ */ .au-map-wrap { position: relative; } .au-map-leaflet { width: 100%; aspect-ratio: 4 / 3; background: #ffffff; outline: none; position: relative; z-index: 1; } .au-map-wrap .leaflet-container { background: #ffffff; outline: none; font-family: var(--font-sans); } .au-map-reset { position: absolute; top: 14px; right: 14px; /* moved to top-right so it doesn't sit over Leaflet's +/- controls */ z-index: 1000; background: var(--white); border: 1px solid rgba(102,102,102,0.3); color: var(--brown); font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; border-radius: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: none; transition: background .2s, color .2s; } .au-map-reset:hover { background: var(--brown); color: var(--white); } /* Suburb labels (white-stroked text floating over the map) */ .leaflet-marker-icon.nur-suburb-label { background: none !important; border: none !important; box-shadow: none !important; font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff; white-space: nowrap; text-align: center; pointer-events: none; } /* Popups - styled to match the NUR brand */ .au-map-wrap .leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 4px 18px rgba(0,0,0,0.12); padding: 0; } .au-map-wrap .leaflet-popup-content { margin: 0; } .au-map-wrap .leaflet-popup-tip { box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .nur-popup { font-family: var(--font-sans); min-width: 240px; padding: 16px 18px; font-size: 13px; color: var(--grey); } .nur-popup h3 { font-size: 14px; color: var(--brown); margin-bottom: 10px; padding-bottom: 8px; line-height: 1.4; border-bottom: 1px solid rgba(102,102,102,0.25); font-weight: 500; letter-spacing: 0.01em; } .nur-popup table { width: 100%; border-collapse: collapse; } .nur-popup td { padding: 4px 0; } .nur-popup td:first-child { color: var(--grey); } .nur-popup td:last-child { text-align: right; font-weight: 500; color: var(--brown); } .nur-popup-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(102,102,102,0.15); } .nur-popup-nav button { background: transparent; border: 0; color: var(--brown); font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 0; cursor: pointer; transition: opacity .2s; } .nur-popup-nav button:hover { opacity: 0.7; } .nur-popup-nav .counter { font-size: 11px; color: var(--grey); } @media (max-width: 700px) { .au-map-leaflet { aspect-ratio: 1 / 1; } } /* (Removed: leftover .au-map-wrap rule from the old static-SVG map era - it had max-width: 780px which was pinning the Leaflet container too narrow.) */ .au-map-wrap-legacy-removed-1 .au-map-img { width: 100%; height: 100%; object-fit: contain; display: block; } .au-map-wrap .pin { position: absolute; width: 18px; height: 18px; background: #5c5c5c; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; transition: transform .25s ease; } .au-map-wrap .pin--lg { width: 28px; height: 28px; } .au-map-wrap .pin--sm { width: 14px; height: 14px; } .au-map-wrap .pin--xs { width: 8px; height: 8px; } .au-map-wrap .pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid #5c5c5c; opacity: 0; animation: pinPulse 2.8s ease-out infinite; } @keyframes pinPulse { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } } .au-map-wrap .pin:hover { transform: translate(-50%, -50%) scale(1.25); } .au-map-wrap .pin .tip { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--brown); color: var(--white); padding: 6px 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transition: opacity .25s; pointer-events: none; } .au-map-wrap .pin:hover .tip { opacity: 1; } /* ============================================================ CONTACT FORM ============================================================ */ .contact-section { padding: 70px 75px 130px; position: relative; } .contact-section .heading { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -0.02em; color: var(--brown); font-weight: 400; max-width: 780px; margin-bottom: 20px; } .contact-section .sub { font-size: 21px; color: var(--brown); max-width: 700px; margin-bottom: 52px; line-height: 1.65; } /* ----- "Let's talk" CTA + image block (shared by Partner + Projects) ----- */ .lets-talk-grid { display: flex; flex-direction: column; gap: 0; margin-top: 30px; } .lets-talk-cta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); border-bottom: 1px solid var(--grey); padding-bottom: 4px; transition: color .2s ease, gap .25s ease; } .lets-talk-cta:hover { color: var(--brown); border-bottom-color: var(--brown); } .lets-talk-img { width: 100%; aspect-ratio: 853 / 390; background: url("assets/feature-reception.jpg") center / cover no-repeat; } .contact-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px 32px; margin-top: 60px; } .contact-form .field { position: relative; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 0; border-bottom: 1px solid var(--grey-soft); background: transparent; padding: 14px 0 10px; font-family: inherit; font-size: 14px; color: var(--brown); outline: none; transition: border-color .25s ease; appearance: none; -webkit-appearance: none; } .contact-form textarea { resize: none; min-height: 80px; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--brown); } .contact-form label { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; } .contact-form .field--full { grid-column: span 3; } .contact-form .field--half { grid-column: span 1; } .contact-form .pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .contact-form .pill { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; padding: 9px 18px; border: 1px solid var(--grey-soft); color: var(--grey); border-radius: 999px; transition: all .25s ease; cursor: pointer; } .contact-form .pill:hover { border-color: var(--brown); color: var(--brown); } .contact-form .pill.is-on { background: var(--brown); color: var(--white); border-color: var(--brown); } .contact-submit { grid-column: span 3; display: flex; justify-content: flex-end; margin-top: 12px; } .contact-submit button { background: var(--brown); color: var(--white); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 36px; transition: background .25s ease, transform .25s ease; } .contact-submit button:hover { background: #2a1c0d; transform: translateY(-1px); } .contact-submit button:active { transform: translateY(0); } .form-success { grid-column: span 3; padding: 24px; border: 1px solid var(--brown); color: var(--brown); font-size: 14px; background: rgba(69,46,21,0.04); display: none; } .form-success.is-on { display: block; animation: fadeUp .5s var(--ease); } /* ============================================================ PROJECTS FEATURE (carousel) ============================================================ */ .projects-feature { position: relative; height: 1050px; overflow: hidden; background: var(--black); } .feature-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .feature-slide.is-on { opacity: 1; } .feature-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%); } /* Real clinic photography, ties each carousel slide to the matching project's hero shot. */ .feature-slide[data-img="1"] { background-image: url("assets/feature-ct-room.jpg"); } .feature-slide[data-img="2"] { background-image: url("assets/aes-dental-garden-view.jpg"); background-size: cover; background-position: center center; } .feature-slide[data-img="3"] { background-image: url("assets/feature-specialist-centre.jpg"); background-size: cover; background-position: center center; } .feature-overlay { position: absolute; inset: 0; padding: 150px 75px 75px; color: var(--white); display: flex; flex-direction: column; justify-content: space-between; } .feature-top-line, .feature-bot-line { position: absolute; left: 73px; right: 73px; height: 1px; background: var(--white); opacity: 0.35; pointer-events: none; } .feature-top-line { top: 130px; } .feature-bot-line { bottom: 40px; } .feature-meta-top { display: flex; justify-content: space-between; } .feature-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 14px; } .feature-title { font-size: clamp(40px, 5vw, 72px); font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 12px; } .feature-meta { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; } .feature-bottom { display: flex; justify-content: space-between; align-items: flex-end; } .feature-controls { display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 0.1em; } .feature-controls button { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); transition: all .25s ease; } .feature-controls button:hover { background: rgba(255,255,255,0.15); border-color: var(--white); } .feature-controls .indicator { padding: 0 12px; } .feature-explore { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 6px; transition: border-color .25s ease, gap .25s ease; } .feature-explore:hover { border-color: var(--white); gap: 18px; } .feature-body { max-width: 420px; text-align: right; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); } /* ============================================================ FOOTER ============================================================ */ .footer { position: relative; background: var(--black); color: var(--white); height: 720px; overflow: hidden; padding: 100px 75px; display: flex; flex-direction: column; justify-content: space-between; } .footer { --footer-img: url("assets/feature-reception.jpg"); } .footer::before { content: ""; position: absolute; /* Inset to top/left only and overflow on the bottom/right by ~6%, pushing any AI watermark (e.g. Gemini badge) past the parent's overflow:hidden boundary. */ top: 0; left: 0; right: -6%; bottom: -6%; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), var(--footer-img) center / cover no-repeat; transition: background-image 1.2s ease; z-index: 0; } .footer > * { position: relative; z-index: 1; } .footer-top-line, .footer-bot-line { position: absolute; left: 72px; right: 72px; height: 1px; background: rgba(255,255,255,0.6); z-index: 1; } .footer-top-line { top: 100px; } .footer-bot-line { bottom: 100px; } .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; } .footer-col { display: flex; flex-direction: column; gap: 22px; } .footer-col a { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.9); transition: color .2s ease, padding-left .25s ease; width: fit-content; } .footer-col a:hover { color: var(--white); padding-left: 6px; } .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 30px; } .footer-logo { font-size: 92px; font-family: var(--font-serif); letter-spacing: 0.06em; line-height: 1; } .footer-phone { font-size: 18px; font-weight: 600; letter-spacing: 0.04em; color: var(--white); } .footer-phone:hover { color: var(--teal-light); } .footer-copy { font-size: 14px; letter-spacing: 0.05em; color: rgba(255,255,255,0.9); } /* ============================================================ ABOUT - Services strip (Land / Design / Build / Invest) ============================================================ */ .services-strip { display: grid; /* 4×2 grid — 8 specialisation tiles in two equal rows. */ grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; } .service-card { position: relative; /* Portrait aspect (4:5) makes each tile substantially taller AND larger on desktop, giving the hover-revealed body copy room to breathe so the longest sentences never clip. */ aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer; background: var(--brown); } .service-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .9s var(--ease); } .service-card:hover .bg { transform: scale(1.06); } .service-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%); pointer-events: none; } .service-card .label { position: absolute; top: 26px; left: 26px; color: var(--white); z-index: 2; } .service-card .label .name { display: block; /* 4-column grid: tiles are narrower so scale the heading down */ font-size: clamp(16px, 1.45vw, 22px); font-weight: 400; letter-spacing: -0.02em; line-height: 1; } .service-card .label .sub { display: block; font-size: 14px; letter-spacing: 0.01em; opacity: 0.9; margin-top: 8px; } .service-card .body { position: absolute; /* Sits below the label, above the CTA. Left-aligned bullet list reveals on hover. */ top: 68px; bottom: 68px; left: 22px; right: 22px; display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; color: rgba(255,255,255,0.95); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.55; transform: translateY(8px); opacity: 0; overflow: hidden; /* never spill past the tile */ transition: opacity .35s var(--ease), transform .35s var(--ease); z-index: 2; } /* Bullet list inside service tile body */ .service-card .body ul { list-style: none; padding: 0; margin: 0; width: 100%; } .service-card .body li { padding: 3px 0 3px 14px; position: relative; line-height: 1.45; } .service-card .body li::before { content: "–"; position: absolute; left: 0; opacity: 0.65; } /* 8 service tile image mappings */ .service-card[data-svc="gp"] .bg { background-image: url("assets/tmf-gp.jpg"); } .service-card[data-svc="radiology"] .bg { background-image: url("assets/feature-ct-scanner.jpg"); } .service-card[data-svc="specialist"] .bg { background-image: url("assets/tmf-specialist.jpg"); } .service-card[data-svc="allied"] .bg { background-image: url("assets/tmf-allied.jpg"); } .service-card[data-svc="pharmacy"] .bg { background-image: url("assets/tmf-pharmacy.jpg"); } .service-card[data-svc="dental"] .bg { background-image: url("assets/tmf-dental.jpg"); } .service-card[data-svc="surgery"] .bg { background-image: url("assets/tmf-surgery.jpg"); } .service-card[data-svc="hospital"] .bg { background-image: url("assets/tmf-hospital.jpg"); } /* Hover state: reveal the body + darken the card. Body sits between the always-visible title (top) and the CTA (bottom), so they never overlap. */ .service-card:hover .body { opacity: 1; transform: translateY(0); } .service-card::after { transition: background .35s var(--ease); } .service-card:hover::after { background: rgba(0,0,0,0.62); } /* Keep the label visible at all times - body copy is positioned below it so there's no overlap to manage. */ .service-card .label { transition: opacity .35s var(--ease), transform .35s var(--ease); } /* "Click for more" hint in the bottom-right corner of every service tile. */ .service-card-cta { position: absolute; right: 26px; bottom: 26px; z-index: 2; color: rgba(255,255,255,0.9); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.5); pointer-events: none; transition: gap .25s ease, border-color .25s ease; } .service-card-cta::after { content: "\2192"; font-size: 13px; } .service-card:hover .service-card-cta { gap: 14px; border-bottom-color: var(--white); color: var(--white); } /* Desktop only: hide the "Click for more" CTA on the value tiles (Craft/Capital/Communication/Commitment). They're read-only on desktop so the CTA would be misleading. Mobile (≤768px) keeps the CTA. */ @media (min-width: 769px) { .values-strip--4 .value-card .service-card-cta { display: none !important; } } /* Service detail overlay (expanded) */ .service-detail { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); z-index: 110; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s ease; } .service-detail.is-on { display: flex; opacity: 1; } .service-detail-inner { width: min(1200px, 92vw); height: min(800px, 90vh); background: var(--white); display: grid; grid-template-columns: 417px 1fr; position: relative; overflow: hidden; transform: translateY(20px); transition: transform .45s var(--ease); } .service-detail.is-on .service-detail-inner { transform: translateY(0); } .service-detail-img { background-size: cover; background-position: center; position: relative; } .service-detail-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 100%); } .service-detail-img .name { position: absolute; top: 30px; left: 30px; font-size: 35px; color: var(--white); font-weight: 400; letter-spacing: -0.02em; z-index: 2; } .service-detail-body { padding: 70px 60px; overflow-y: auto; color: var(--grey); } .service-detail-body h3 { font-size: 28px; color: var(--grey); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 22px; line-height: 1.2; } .service-detail-body p { font-size: 14px; line-height: 1.65; margin-bottom: 1.2em; } .service-detail-body .scope-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown); margin: 24px 0 12px; display: block; } .service-detail-body ul { list-style: none; padding: 0; } .service-detail-body li { font-size: 14px; line-height: 1.7; color: var(--grey); padding-left: 0; } .service-detail-body .cta { display: inline-block; margin-top: 30px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown); border-bottom: 1px solid var(--brown); padding-bottom: 4px; cursor: pointer; } .service-detail-close { position: absolute; top: 24px; right: 28px; font-size: 11px; letter-spacing: 0.25em; color: var(--grey); cursor: pointer; z-index: 3; } .service-detail-close:hover { color: var(--brown); } /* ============================================================ PROJECTS GRID ============================================================ */ .grid-intro { padding: 130px 75px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .filter-bar { display: flex; gap: 38px; padding: 32px 75px 28px; border-bottom: 1px solid var(--grey-soft); margin: 0 0 50px; font-size: 14px; letter-spacing: 0.05em; } .filter-bar button { color: var(--brown); transition: color .2s ease, opacity .2s ease; padding-bottom: 2px; border-bottom: 1px solid transparent; opacity: 0.6; } .filter-bar button:hover { opacity: 1; } .filter-bar button.is-on { opacity: 1; } .filter-bar button.is-on { color: var(--brown); border-bottom-color: var(--brown); } .filter-bar button:hover { color: var(--brown); } .project-grid { padding: 0 75px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px 60px; } .project-card { cursor: pointer; display: block; } .project-card .img { width: 100%; aspect-ratio: 635 / 376; background-size: cover; background-position: center; background-color: var(--brown); overflow: hidden; position: relative; } .project-card .img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .35s ease; } .project-card:hover .img::after { background: rgba(0,0,0,0.15); } .project-card .img-inner { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 1s var(--ease); } .project-card:hover .img-inner { transform: scale(1.04); } /* Status pill that sits on top of the project image (e.g. "In Progress") */ .project-card .project-status { position: absolute; top: 16px; left: 16px; z-index: 3; background: rgba(255,255,255,0.92); color: var(--brown); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; pointer-events: none; } .project-card .meta { display: flex; justify-content: space-between; margin-top: 20px; font-size: 18px; letter-spacing: 0.01em; color: var(--brown); } .project-card .meta .right { color: var(--brown); } /* Cards whose source image already includes the caption strip baked in (e.g. Fuel Station - Freehold). Show the image at its full aspect and suppress the duplicate HTML caption row. */ .project-card--baked .img { aspect-ratio: auto; padding-bottom: 0; height: auto; } .project-card--baked .img-inner { position: static; width: 100%; aspect-ratio: 1296 / 800; background-size: contain; background-repeat: no-repeat; background-color: transparent; } .project-card--baked .meta { display: none; } /* Imaging Medical Centre photos: lighter sky band at the top + occasional faded edge pixels - zoom slightly and recentre so the building fills the visible card area without showing those grey borders. */ .project-card .img-inner[style*="project-victoria-point"], .project-card .img-inner[style*="project-browns-plains"], .project-card .img-inner[style*="project-greenslopes"], .project-card .img-inner[style*="project-sinnamon-park"], .project-card .img-inner[style*="project-gympie"] { background-size: 120% auto !important; background-position: center 60% !important; } .grid-cta { text-align: center; margin: 40px 0 100px; } .grid-cta button { background: var(--brown); color: var(--white); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 36px; transition: background .25s, transform .25s; } .grid-cta button:hover { background: #2a1c0d; transform: translateY(-1px); } /* Index list */ .index-section { padding: 0 75px 130px; } .index-section h2 { font-size: 52px; color: var(--brown); letter-spacing: -0.02em; font-weight: 400; margin-bottom: 30px; border-bottom: 1px solid var(--grey-soft); padding-bottom: 18px; } .index-filters { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-bottom: 14px; } .index-filters button { background: transparent; border: 0; color: var(--grey); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .index-filters button:hover { color: var(--brown); } .index-filters button.is-on { color: var(--brown); border-bottom-color: var(--brown); } .index-filters-sep { display: inline-block; width: 1px; height: 14px; background: var(--grey-faint); } .index-row { display: grid; grid-template-columns: 60px 2fr 1.2fr; gap: 24px; padding: 14px 0; font-size: 14px; border-bottom: 1px solid rgba(102,102,102,0.15); color: var(--grey); align-items: center; cursor: pointer; transition: color .2s ease, padding-left .25s ease; } .index-row.head { color: var(--brown); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; cursor: default; border-bottom: 1px solid var(--grey-soft); } .index-row:not(.head):hover { color: var(--brown); padding-left: 8px; } .index-row.is-hidden { display: none; } /* ============================================================ PARTNERSHIPS - diagram ============================================================ */ .partnership-diagram { padding: 80px 75px 130px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .partnership-diagram .img { width: 100%; aspect-ratio: 417 / 429; /* Numbered corridor reads as a visual metaphor for the three roles */ background: url("assets/aes-corridor-numbered.jpg") center / cover no-repeat; } .diagram-list { border-top: 1px solid var(--grey-faint); } .diagram-row { display: grid; grid-template-columns: 50px 1fr 2fr; gap: 30px; padding: 26px 0; border-bottom: 1px solid var(--grey-faint); align-items: start; } .diagram-row .num { color: var(--brown); font-size: 18px; } .diagram-row .title { color: var(--brown); font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; line-height: 1.3; } .diagram-row .desc { color: var(--grey); font-size: 17px; line-height: 1.6; } /* Lead sentence above the bullets, larger + darker to anchor each role */ .diagram-row .desc-lead { color: var(--brown); font-size: 17px; line-height: 1.5; font-weight: 500; margin-bottom: 14px; } .diagram-row .desc-list { list-style: none; padding: 0; margin: 0; } .diagram-row .desc-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.55; margin-bottom: 8px; color: var(--grey); } .diagram-row .desc-list li::before { /* Small ECG-tick reminder of the brand mark */ content: ""; position: absolute; left: 0; top: 0.75em; width: 10px; height: 2px; background: var(--brown); border-radius: 2px; } .diagram-row .desc-list li:last-child { margin-bottom: 0; } .diagram-row .title-sub { display: block; font-size: 0.75em; font-weight: 400; opacity: 0.6; letter-spacing: 0; margin-top: 3px; } /* Vertical barrier connectors between the three diagram rows */ .diagram-barrier { display: grid; grid-template-columns: 50px 1fr 2fr; gap: 30px; padding: 4px 0; align-items: center; } .barrier-spacer { /* empty num column */ } .barrier-arrows-vert { display: flex; justify-content: flex-start; align-items: center; color: var(--teal-mid); } .barrier-desc-text { display: flex; flex-direction: column; gap: 6px; } .barrier-label { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-mid); } .barrier-sub { font-size: 13px; color: var(--grey-soft); line-height: 1.5; max-width: 480px; } /* ============================================================ PARTNERSHIP DIAGRAM — model intro + relationship flow ============================================================ */ /* Explanatory paragraph above the flow diagram */ .diagram-intro { font-size: 16px; line-height: 1.75; color: var(--grey); max-width: 620px; margin-bottom: 36px; padding-top: 6px; } /* Three-box horizontal relationship flow */ .rel-flow { display: flex; align-items: stretch; gap: 0; margin-bottom: 44px; } .rf-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 18px 12px; border: 1.5px solid var(--grey-faint); border-radius: 3px; min-width: 0; } .rf-node--pm { background: var(--brown); border-color: var(--brown); padding-top: 22px; padding-bottom: 22px; } .rf-label { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--brown); } .rf-node--pm .rf-label { color: #fff; } .rf-sub { font-size: 11px; color: var(--grey-soft); line-height: 1.35; } .rf-node--pm .rf-sub { color: rgba(255,255,255,0.65); } .rf-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 3px; } .rf-conn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; flex-shrink: 0; color: var(--teal-mid); } .rf-conn-label { font-size: 9px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--teal-mid); text-align: center; line-height: 1.45; } /* Bullet list inside Client box */ .rf-bullets { list-style: none; padding: 0; margin: 5px 0 0; display: flex; flex-direction: column; gap: 3px; } .rf-bullets li { font-size: 10px; color: var(--grey-soft); position: relative; padding-left: 11px; line-height: 1.45; text-align: left; } .rf-bullets li::before { content: ""; position: absolute; left: 1px; top: 0.58em; width: 4px; height: 4px; border-radius: 50%; background: var(--teal-mid); } /* Interactive hover + active states */ .rf-node { cursor: pointer; transition: background 0.18s, border-color 0.18s; } .rf-node--client:hover, .rf-node--builder:hover { background: rgba(0,67,70,0.07); border-color: rgba(0,67,70,0.3); } .rf-node--pm:hover { background: #005a5e; } .rf-node--client.is-rf-active, .rf-node--builder.is-rf-active { background: rgba(0,67,70,0.1); border-color: var(--brown); } .rf-node--pm.is-rf-active { background: #005a5e; } /* Panel show/hide */ .rf-panel { display: none; } .rf-panel.is-rf-active { display: grid; } /* ============================================================ STICKY PROJECT ENQUIRY BUTTON — fixed bottom-right ============================================================ */ .sticky-enquiry { position: fixed; bottom: 28px; right: 28px; z-index: 9000; background: var(--brown); color: var(--white); font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border-radius: 3px; box-shadow: 0 6px 24px rgba(0,0,0,0.22); opacity: 0; pointer-events: none; transform: translateY(8px); transition: background 0.2s var(--ease), transform 0.3s var(--ease), box-shadow 0.2s var(--ease), opacity 0.3s ease; } .sticky-enquiry.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .sticky-enquiry:hover { background: var(--teal-mid); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.28); } @media (max-width: 600px) { .sticky-enquiry { bottom: 16px; right: 16px; font-size: 10px; padding: 12px 18px; } } /* ============================================================ PM MODEL — three-card Client / Doctor-Side PM / Builder ============================================================ */ .pm-model { padding: 0 75px 100px; max-width: 1400px; margin: 0 auto; } .pm-model-title { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; color: var(--brown); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 18px; } .pm-model-intro { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--brown); max-width: 760px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 16px; } .pm-model-how { font-size: 17px; line-height: 1.7; color: var(--grey); max-width: 720px; margin-bottom: 52px; } /* 5-col grid: card | connector | card | connector | card */ .pm-grid { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: stretch; gap: 0; } /* Card shell */ .pm-card { border: 1.5px solid var(--grey-faint); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; user-select: none; background: var(--white); } /* Doctor-Side PM: now white like the other two cards */ .pm-card--pm { background: var(--white); border-color: var(--grey-faint); } /* ALL cards: hover + open → dark teal */ .pm-card:hover, .pm-card.is-open { background: var(--brown); border-color: var(--brown); box-shadow: 0 6px 28px rgba(0,67,70,0.18); } /* Placeholder image block */ .pm-card-media { width: 100%; } .pm-ph { width: 100%; aspect-ratio: 4 / 3; background: var(--grey-bg); border-bottom: 1px solid var(--grey-faint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #a0adb8; } .pm-ph--inv { background: rgba(255,255,255,0.07); border-bottom-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.35); } .pm-ph-icon { width: 26px; height: 26px; } .pm-ph-text { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* Card body */ .pm-card-body { padding: 28px 26px 36px; flex: 1; display: flex; flex-direction: column; } .pm-badge { display: inline-block; align-self: flex-start; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 2px; margin-bottom: 8px; } /* Number tag */ .pm-num { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--teal-mid); margin-bottom: 8px; transition: color 0.25s ease; } .pm-card:hover .pm-num, .pm-card.is-open .pm-num { color: rgba(255,255,255,0.5); } /* Title */ .pm-title { font-size: clamp(18px, 1.7vw, 26px); font-weight: 700; color: var(--brown); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; transition: color 0.25s ease; } .pm-card:hover .pm-title, .pm-card.is-open .pm-title { color: #fff; } /* Roles */ .pm-roles { font-size: 13px; color: var(--teal-mid); line-height: 1.5; margin-bottom: 16px; transition: color 0.25s ease; } .pm-card:hover .pm-roles, .pm-card.is-open .pm-roles { color: rgba(255,255,255,0.6); } /* Lead text */ .pm-lead { font-size: 15px; color: var(--grey); line-height: 1.65; font-weight: 400; margin-bottom: 18px; transition: color 0.25s ease; } .pm-card:hover .pm-lead, .pm-card.is-open .pm-lead { color: rgba(255,255,255,0.82); } /* Bullet list — hidden by default, JS sets height via scrollHeight */ .pm-list { list-style: none; padding: 0; margin: 0; overflow: hidden; height: 0; opacity: 0; transition: height 0.4s ease, opacity 0.3s ease, padding-top 0.3s ease; } .pm-card.is-open .pm-list { opacity: 1; padding-top: 14px; } .pm-list li { font-size: 13px; color: var(--grey); line-height: 1.6; padding-left: 15px; position: relative; margin-bottom: 8px; transition: color 0.25s ease; } .pm-card:hover .pm-list li, .pm-card.is-open .pm-list li { color: rgba(255,255,255,0.82); } .pm-list li:last-child { margin-bottom: 0; } .pm-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1.5px; background: var(--teal-mid); opacity: 0.5; border-radius: 2px; transition: background 0.25s ease, opacity 0.25s ease; } .pm-card:hover .pm-list li::before, .pm-card.is-open .pm-list li::before { background: rgba(255,255,255,0.6); opacity: 1; } /* Expand cue — sits between pm-lead and pm-list */ .pm-expand-cue { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grey-faint); transition: border-color 0.25s ease; } .pm-card:hover .pm-expand-cue, .pm-card.is-open .pm-expand-cue { border-top-color: rgba(255,255,255,0.2); } .pm-expand-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-mid); transition: color 0.25s ease; } .pm-card:hover .pm-expand-label, .pm-card.is-open .pm-expand-label { color: rgba(255,255,255,0.7); } .pm-expand-icon { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--teal-mid); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--teal-mid); transition: transform 0.3s ease, border-color 0.25s ease, color 0.25s ease; flex-shrink: 0; } .pm-expand-icon::before { content: "+"; } .pm-card:hover .pm-expand-icon, .pm-card.is-open .pm-expand-icon { border-color: rgba(255,255,255,0.55); color: rgba(255,255,255,0.7); } .pm-card.is-open .pm-expand-icon { transform: rotate(45deg); } /* Connectors */ .pm-conn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 4px; color: var(--teal-mid); } .pm-conn-h { display: block; } .pm-conn-v { display: none; } .pm-conn-lbl { font-size: 8.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; text-align: center; color: var(--teal-mid); line-height: 1.4; } /* ---- Responsive — tablet (≤1100px) ---- */ @media (max-width: 1100px) { .pm-model { padding: 0 40px 80px; } .pm-grid { grid-template-columns: 1fr 48px 1fr 48px 1fr; } .pm-card-body { padding: 22px 18px 28px; } .pm-conn-lbl { display: none; } } /* ---- Responsive — narrow tablet / large mobile (≤880px) — stack ---- */ @media (max-width: 880px) { .pm-model { padding: 0 30px 70px; } .pm-grid { grid-template-columns: 1fr; max-width: 540px; } .pm-conn { flex-direction: row; justify-content: center; padding: 10px 0; gap: 12px; } .pm-conn-h { display: none; } .pm-conn-v { display: block; } .pm-conn-lbl { display: block; font-size: 9px; } } /* ---- Responsive — mobile portrait (≤600px) ---- */ @media (max-width: 600px) { .pm-model { padding: 0 20px 56px; } .pm-grid { max-width: none; } .pm-list li { font-size: 12.5px; } .pm-lead { font-size: 14px; } } /* ============================================================ JOINT VENTURES - three-step form ============================================================ */ .jv-section { padding: 130px 75px; max-width: 1400px; margin: 0 auto; } .jv-intro { font-size: 19px; line-height: 1.65; color: var(--brown); max-width: 820px; margin-bottom: 70px; } .jv-steps { display: flex; flex-direction: column; gap: 90px; /* Wider container so the step content has more horizontal room */ max-width: 1200px; } .jv-step { display: grid; /* Marker column slightly slimmer; content column gets the rest, with a hard cap so super-wide viewports don't stretch lines past readable length. */ grid-template-columns: 80px minmax(0, 1fr); gap: 48px; position: relative; } .jv-step .num { position: relative; z-index: 2; /* sits above the vertical line so the line doesn't show through */ width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--brown); background: var(--white); /* solid fill so the line is hidden where they overlap */ color: var(--brown); font-size: 14px; display: flex; align-items: center; justify-content: center; } .jv-step::before { content: ""; position: absolute; left: 16px; top: 32px; width: 1px; height: calc(100% + 90px); background: var(--brown); opacity: 0.3; } .jv-step:last-child::before { display: none; } .jv-step h3 { font-size: clamp(24px, 2.2vw, 30px); color: var(--brown); font-weight: 400; letter-spacing: -0.01em; margin-bottom: 12px; line-height: 1.25; } .jv-step .hint { font-size: 17px; color: var(--grey); margin-bottom: 28px; line-height: 1.55; max-width: 720px; } /* Process-step accordion (phases 1–3) */ .jv-steps--process .jv-step { cursor: pointer; } /* Hover highlight box via pseudo-element (doesn't affect layout) */ .jv-steps--process .jv-step::after { content: ""; position: absolute; inset: -14px -18px; border-radius: 8px; background: rgba(0,67,70,0.04); border: 1.5px solid rgba(0,67,70,0.14); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 0; } .jv-steps--process .jv-step:hover::after, .jv-steps--process .jv-step.is-open::after { opacity: 1; } /* hint text — hidden by default, JS sets height via scrollHeight */ .jv-steps--process .jv-step .hint { overflow: hidden; height: 0; opacity: 0; margin-bottom: 0; transition: height 0.4s ease, opacity 0.3s ease, margin-bottom 0.3s ease; } .jv-steps--process .jv-step.is-open .hint { opacity: 1; margin-bottom: 28px; } /* +/– toggle on process step h3 */ .jv-steps--process .jv-step h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; position: relative; z-index: 1; } .jv-steps--process .jv-step h3::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--brown); opacity: 0.4; flex-shrink: 0; transition: transform 0.3s ease, opacity 0.2s; line-height: 1; } .jv-steps--process .jv-step:hover h3::after { opacity: 0.8; } .jv-steps--process .jv-step.is-open h3::after { transform: rotate(45deg); opacity: 0.9; } /* Number circle fills on hover */ .jv-steps--process .jv-step .num { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; position: relative; z-index: 1; } .jv-steps--process .jv-step:hover .num, .jv-steps--process .jv-step.is-open .num { background: var(--brown); color: #fff; border-color: var(--brown); } .jv-options { display: flex; gap: 14px; flex-wrap: wrap; } .jv-option { padding: 14px 28px; border: 1px solid var(--grey-soft); font-size: 16px; color: var(--grey); border-radius: 999px; cursor: pointer; transition: all .2s ease; } .jv-option:hover { border-color: var(--brown); color: var(--brown); } .jv-option.is-on { background: var(--brown); border-color: var(--brown); color: var(--white); } .jv-input { border: 0; border-bottom: 1px solid var(--grey-soft); font-size: 17px; color: var(--brown); padding: 14px 0 10px; width: 100%; max-width: 720px; outline: none; background: transparent; font-family: inherit; } .jv-input:focus { border-color: var(--brown); } /* The 4th step's contact form lays out wider in the JV section so the First Name / Last Name / Email / Phone row breathes horizontally. */ .jv-step .contact-form { max-width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 28px 32px; } .jv-step .contact-form .field--full { grid-column: 1 / -1; } .jv-step .contact-form .contact-submit { grid-column: 1 / -1; justify-self: end; } @media (max-width: 900px) { .jv-step .contact-form { grid-template-columns: 1fr 1fr; } } /* ============================================================ PROJECT DETAIL ============================================================ */ .project-detail-hero .project-meta { position: absolute; bottom: 70px; left: 75px; right: 75px; z-index: 3; color: var(--white); display: flex; justify-content: space-between; align-items: flex-end; } .project-detail-hero .back-link { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; opacity: 0.85; display: inline-block; } .project-detail-hero .back-link:hover { opacity: 1; } .project-detail-hero h1 { font-size: clamp(28px, 3vw, 44px); font-weight: 400; letter-spacing: -0.01em; line-height: 1; } .project-detail-hero .credits { display: grid; grid-template-columns: 100px 1fr; gap: 4px 14px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.9); min-width: 280px; } .project-detail-hero .credits .label { color: rgba(255,255,255,0.65); } .project-enquiry { padding: 80px 75px 130px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .project-enquiry-form { max-width: 600px; } .project-enquiry-form .contact-form { grid-template-columns: 1fr 1fr; } .project-enquiry-form .field--full { grid-column: span 2; } .project-enquiry-form .contact-submit { grid-column: span 2; } .project-enquiry-form .heading { color: var(--brown); font-size: 24px; margin-bottom: 24px; font-weight: 400; } .project-map { width: 100%; aspect-ratio: 525 / 322; background: url("assets/map-maroubra.png") center / cover no-repeat; position: relative; } .project-map::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.15); } .map-pin-detail { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; background: var(--brown); border-radius: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; color: var(--white); font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.04em; } .map-pin-detail::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--brown); opacity: 0; animation: pinPulse 2.5s ease-out infinite; } /* ============================================================ Scroll reveal ============================================================ */ .reveal { opacity: 1; transform: none; transition: none; } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .1s; } .reveal[data-delay="2"] { transition-delay: .2s; } .reveal[data-delay="3"] { transition-delay: .3s; } .reveal[data-delay="4"] { transition-delay: .4s; } /* ============================================================ Misc ============================================================ */ ::selection { background: var(--brown); color: var(--white); } /* Custom scrollbar - keep neutral */ body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background: transparent; } body::-webkit-scrollbar-thumb { background: rgba(69,46,21,0.25); border-radius: 4px; } body::-webkit-scrollbar-thumb:hover { background: rgba(69,46,21,0.5); } /* Responsive */ /* Collapse the partnership diagram earlier than the rest of the layout. At 1101-1280px the right-hand description column was getting squeezed so badly that words broke awkwardly. Force the single-column stacked layout (image, then number/title/description rows) at the wider range. */ @media (max-width: 1280px) { .partnership-diagram { grid-template-columns: 1fr !important; gap: 50px; } .partnership-diagram .img { max-width: 560px; margin: 0 auto; } .diagram-row { grid-template-columns: 60px 1fr 2fr !important; gap: 24px; } .diagram-row .title { font-size: 22px; line-height: 1.3; } .diagram-row .desc { font-size: 17px; line-height: 1.6; max-width: 720px; } } @media (max-width: 1100px) { .two-col, .intro-scroll, .map-section, .grid-intro, .project-enquiry { grid-template-columns: 1fr; gap: 50px; } .intro-scroll-text { position: static; } /* 8-tile services-strip: drop from 4 cols to 2 cols at tablet width */ .services-strip { grid-template-columns: repeat(2, 1fr); } .project-grid { grid-template-columns: 1fr; } .contact-form { grid-template-columns: 1fr 1fr; } .contact-form .field--full { grid-column: span 2; } .contact-submit { grid-column: span 2; } /* At this width, stack number/title/description vertically inside each row. */ .diagram-row { grid-template-columns: 60px 1fr !important; grid-template-areas: "num title" ". desc"; gap: 14px 24px; } .diagram-row .num { grid-area: num; } .diagram-row .title { grid-area: title; font-size: 22px; line-height: 1.25; } .diagram-row .desc { grid-area: desc; font-size: 17px; line-height: 1.6; max-width: 720px; } } @media (max-width: 700px) { .section, .intro-scroll, .map-section, .contact-section, .grid-intro, .partnership-diagram, .jv-section, .project-enquiry, .index-section, .filter-bar, .project-grid { padding-left: 24px; padding-right: 24px; } .footer { padding: 80px 24px; } .footer-bottom { gap: 18px; } .footer-logo { font-size: 62px; } .hero-tagline { right: 24px; max-width: 80%; bottom: 80px; } .top-header { height: 100px; } .top-header .nur-logo { font-size: 64px; } .services-strip { grid-template-columns: 1fr; padding: 0; } .values-strip { grid-template-columns: 1fr; padding: 0; } .team-grid { grid-template-columns: 1fr; padding: 0 24px; } .feature-overlay { padding: 130px 24px 60px; } .feature-top-line, .feature-bot-line { left: 22px; right: 22px; } .index-row { grid-template-columns: 0.5fr 2fr 1.5fr 1.2fr; font-size: 12px; } } /* ============================================================ ABOUT - Values pair (Communication / Commitment) ============================================================ */ .values-strip-wrap { padding-bottom: 0; } .values-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; } /* Was 4-up - now 2x2 grid to match the service tiles above. Each tile is roughly 2x bigger than the old 4-up row, giving the labels and body copy real breathing room. */ .values-strip--4 { grid-template-columns: repeat(2, 1fr); } .value-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brown); cursor: default; /* read-only - no click action */ } .values-strip--4 .value-card { /* Shorter than the service tiles above — keeps the values section compact without crowding the label and body copy. */ aspect-ratio: 3 / 2; } /* Subtle horizontal scroll hint label below the 4-up strip */ .values-strip-scroll-hint { text-align: center; margin-top: 28px; font-size: 11px; letter-spacing: 0.25em; color: var(--grey); text-transform: uppercase; } .value-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .9s var(--ease); } .value-card:hover .bg { transform: scale(1.04); } .value-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.7) 100%); pointer-events: none; } .value-card .label { position: absolute; top: 32px; left: 32px; z-index: 2; color: var(--white); } .value-card .label .name { display: block; font-size: clamp(28px, 2.4vw, 35px); font-weight: 400; letter-spacing: -0.02em; line-height: 1; } .value-card .body { position: absolute; left: 32px; right: 32px; bottom: 32px; color: rgba(255,255,255,0.92); font-size: 14px; line-height: 1.55; max-width: 480px; z-index: 2; } /* Body copy hidden by default, fades in on hover. The taller aspect-ratio gives the body more vertical room so even the longest copy ("Communication" tile - ~41 words) is never clipped. */ .values-strip--4 .value-card .body { top: 110px; bottom: 36px; /* less padding than service tiles since no CTA pill */ left: 36px; right: 36px; display: flex; align-items: center; justify-content: center; max-width: none; text-align: center; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; transform: translateY(8px); opacity: 0; overflow: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease); } .values-strip--4 .value-card:hover .body { opacity: 1; transform: translateY(0); } /* Match the service tile gradient + hover-darken treatment exactly. */ .values-strip--4 .value-card::after { background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%); transition: background .35s var(--ease); } .values-strip--4 .value-card:hover::after { background: rgba(0,0,0,0.62); } .values-strip--4 .value-card:hover .bg { transform: scale(1.06); } /* Match service-tile label position + sizing exactly. */ .values-strip--4 .value-card .label { top: 26px; left: 26px; right: 26px; max-width: calc(100% - 52px); } .values-strip--4 .value-card .label .name { font-size: clamp(18px, 1.65vw, 24px); letter-spacing: -0.02em; line-height: 1.2; word-break: normal; overflow-wrap: break-word; hyphens: none; } @media (max-width: 1100px) { .values-strip--4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .values-strip--4 { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .values-strip { grid-template-columns: 1fr; } /* Single value-card (non-4up variant) is landscape on narrow tablets */ .values-strip:not(.values-strip--4) .value-card { aspect-ratio: 16 / 9; } } /* ============================================================ ABOUT - Team grid ============================================================ */ .team-section { padding-top: 100px; padding-bottom: 100px; } /* Equipment partners marquee banner */ .partners-section { padding: 88px 0; background: var(--grey-bg); border-bottom: 1px solid var(--grey-faint); } .partners-container { max-width: 1400px; margin: 0 auto; padding: 0 0; } .partners-section .eyebrow { font-size: clamp(20px, 2.2vw, 30px); font-weight: 400; letter-spacing: -0.02em; text-transform: none; color: var(--brown); text-align: center; margin: 0 0 52px; font-family: var(--font-sans); } .partners-section .marquee { position: relative; overflow: hidden; } .partners-section .marquee::before, .partners-section .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 2; pointer-events: none; } .partners-section .marquee::before { left: 0; background: linear-gradient(to right, var(--grey-bg), transparent); } .partners-section .marquee::after { right: 0; background: linear-gradient(to left, var(--grey-bg), transparent); } .partners-section .marquee-track { display: flex; width: max-content; animation: partners-marquee 40s linear infinite; } .partners-section .marquee-track:hover { animation-play-state: paused; } .partners-section .logo-item { flex-shrink: 0; padding: 0 3rem; height: 7rem; display: flex; align-items: center; justify-content: center; } .partners-section .logo-item img { height: 3.8rem; max-width: 200px; width: auto; object-fit: contain; opacity: 0.45; filter: grayscale(100%); transition: opacity 0.3s; } .partners-section .logo-item img:hover { opacity: 0.85; filter: none; } @keyframes partners-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 75px; max-width: 920px; /* keep cards a comfortable size on wide screens */ margin: 0 auto; } .team-card { position: relative; aspect-ratio: 308 / 400; /* exact ratio of the new Frame 24/25 photos after caption crop */ overflow: hidden; background: #1a1a1a; cursor: pointer; display: block; width: 100%; padding: 0; border: 0; text-align: left; } .team-card .bg { position: absolute; inset: 0; /* Source images are now pre-cropped (no light strip on top, no caption on bottom) so we can just use cover with center positioning. */ background-size: cover; background-position: center top; background-color: #1a1a1a; filter: grayscale(1) contrast(1) brightness(1.15); transition: transform .9s var(--ease), filter .6s ease; } .team-card:hover .bg { transform: scale(1.03); filter: grayscale(1) contrast(1.05) brightness(1.22); } /* Soft gradient at the bottom so the HTML caption sits cleanly over the photo. */ .team-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; } .team-card .info { position: absolute; left: 24px; bottom: 24px; z-index: 2; color: var(--white); display: flex; flex-direction: column; gap: 4px; } .team-card .info .role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; } .team-card .info .name { font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; } /* (Removed: older duplicate rules that were overlaying a horizontal grey gradient across the entire card. The bottom-only gradient mask above is the canonical version.) */ /* ============================================================ TEAM DETAIL OVERLAY (split view: card | bio panel | card) ============================================================ */ .team-detail { position: fixed; inset: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); z-index: 110; display: none; opacity: 0; transition: opacity .35s ease; overflow-y: auto; } .team-detail.is-open { display: block; opacity: 1; } .team-detail-grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr) minmax(260px, 320px); gap: 48px; padding: 90px 90px; max-width: 1400px; margin: 0 auto; min-height: 100vh; align-items: center; } .team-detail-card { position: relative; aspect-ratio: 308 / 400; overflow: hidden; background: #1a1a1a; cursor: pointer; display: block; width: 100%; padding: 0; border: 0; text-align: left; transition: filter .35s ease, transform .35s ease; } .team-detail-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center top; background-color: #1a1a1a; filter: grayscale(1); transition: filter .35s ease; } .team-detail-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; } .team-detail-card .info { position: absolute; left: 22px; bottom: 22px; z-index: 2; color: var(--white); display: flex; flex-direction: column; gap: 4px; } .team-detail-card .info .role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; } .team-detail-card .info .name { font-size: clamp(18px, 1.4vw, 22px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; } /* Inactive card is dimmed and slightly smaller */ .team-detail-card.is-inactive .bg { filter: grayscale(1) brightness(0.45) opacity(0.65); } .team-detail-card.is-inactive { transform: scale(0.96); } .team-detail-card.is-active .bg { filter: grayscale(1) contrast(1) brightness(1.1); } .team-detail-body { color: var(--grey); max-width: 640px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 24px 8px; } .team-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; } .team-detail-header .role { display: block; font-size: 14px; color: var(--grey); margin-bottom: 6px; } .team-detail-header .name { font-size: clamp(32px, 3vw, 44px); color: var(--brown); font-weight: 400; letter-spacing: -0.02em; margin: 0; line-height: 1.05; } .team-detail-close { background: transparent; border: 0; color: var(--grey); font-size: 14px; cursor: pointer; padding: 4px 8px; transition: color .2s ease; } .team-detail-close:hover { color: var(--brown); } .team-detail-tagline { font-size: clamp(20px, 1.8vw, 26px); color: var(--brown); font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 28px; } .team-detail-bio p { font-size: 15px; line-height: 1.65; color: var(--grey); margin-bottom: 16px; } @media (max-width: 1100px) { .team-detail-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "card-left card-right" "bio bio"; padding: 60px 40px; gap: 24px; align-items: start; } .team-detail-card:first-of-type { grid-area: card-left; } .team-detail-card:last-of-type { grid-area: card-right; } .team-detail-body { grid-area: bio; max-width: 100%; padding: 12px 0 0; } .team-detail-header { margin-bottom: 24px; } } @media (max-width: 600px) { .team-detail-grid { grid-template-columns: 1fr; grid-template-areas: "card-left" "bio" "card-right"; padding: 60px 24px; } } /* ============================================================ MOBILE OPTIMIZATION PASS Tablet ≤ 768px, mobile ≤ 480px. Goal: fluid layouts, single-column stacks, touch-friendly tap targets, readable typography, no horizontal overflow. ============================================================ */ @media (max-width: 768px) { html, body { font-size: 16px; } /* Section paddings tighten on tablet */ .section, .intro-scroll, .map-section, .contact-section, .grid-intro, .partnership-diagram, .jv-section, .project-enquiry, .index-section, .filter-bar, .project-grid, .team-grid, .map-section--svg { padding-left: 24px; padding-right: 24px; } .section { padding-top: 80px; padding-bottom: 80px; } /* Stack every 2-col / 3-col into single column */ .two-col, .intro-scroll, .map-section, .grid-intro, .partnership-diagram, .project-enquiry { grid-template-columns: 1fr !important; gap: 32px; } .services-strip, .values-strip, .values-strip--4, .project-grid, .team-grid, .footer-nav, .feature-bottom, .feature-meta-top { grid-template-columns: 1fr !important; gap: 12px; } .team-grid { max-width: 480px; } /* Hero scales nicely - large headlines wrap cleanly */ .hero { min-height: 560px; } .hero-tagline { right: 24px; max-width: 86%; font-size: clamp(26px, 7vw, 38px); bottom: 60px; } /* Top NUR wordmark sized down for small viewports */ .top-header { height: 100px; } .top-header .nur-logo { font-size: 56px; } /* Headline + body sizes */ .col-heading { font-size: clamp(22px, 5vw, 30px); line-height: 1.3; } .col-body p { font-size: 17px; line-height: 1.6; } .heading { font-size: clamp(24px, 6vw, 32px); } .feature-title { font-size: clamp(36px, 9vw, 56px) !important; } .feature-body { max-width: 100% !important; text-align: left !important; } .index-section h2 { font-size: 40px; } /* Service / Value cards stack into single column at full width */ .service-card { aspect-ratio: 16 / 11; } .value-card { aspect-ratio: 16 / 10; } .values-strip--4 .value-card { aspect-ratio: 16 / 10; } .service-card .label, .value-card .label { top: 24px; left: 24px; } .service-card .label .name, .value-card .label .name { font-size: 28px; } .service-card .body { font-size: 16px; bottom: 24px; left: 24px; right: 24px; } .values-strip--4 .value-card .body { font-size: 16px; } /* Touch-friendly buttons + nav links */ .menu-main-nav a { font-size: 18px; padding: 14px 0; } .menu-panel { padding: 50px 30px; width: min(360px, 92vw); } .footer-col a { padding: 6px 0; } .pill, .jv-option, .filter-bar button { padding: 12px 18px; min-height: 40px; } button, .contact-submit button { min-height: 44px; } .index-row { font-size: 13px; } /* Map silhouette + headline stack */ .au-map-wrap { max-width: 100%; } /* Footer */ .footer { height: auto; min-height: 600px; padding: 60px 24px 40px; } .footer-logo { font-size: 56px; } .footer-bottom { gap: 12px; } /* Carousel reduce height + lighter padding */ .projects-feature { height: 720px; } .feature-overlay { padding: 120px 24px 60px; } .feature-top-line, .feature-bot-line { left: 22px; right: 22px; } /* Contact form: collapse to single column */ .contact-form { grid-template-columns: 1fr !important; } .contact-form .field--full, .contact-submit { grid-column: span 1; } .contact-submit { justify-self: stretch; } .contact-submit button { width: 100%; } /* Index table: tighter columns */ .index-row { grid-template-columns: 36px 1.5fr 1.2fr 1fr !important; gap: 12px; } .index-filters { gap: 16px; row-gap: 10px; } /* Side rail / utility rail tucked away on mobile */ .side-rail { width: 40px; } .utility-rail { right: 12px; gap: 18px; } .utility-rail .scroll-label { font-size: 9px; } .audio-toggle { width: 36px; height: 36px; } /* JV form spacing */ .jv-step { grid-template-columns: 40px 1fr !important; gap: 18px; } .jv-options { gap: 8px; } /* About hero NUR header doesn't overlap content too much */ .top-header.is-hidden { opacity: 0; } } /* Small phones */ @media (max-width: 480px) { html, body { font-size: 16px; line-height: 1.55; } .section { padding-top: 60px; padding-bottom: 60px; } .section, .intro-scroll, .map-section, .contact-section, .grid-intro, .partnership-diagram, .jv-section, .project-enquiry, .index-section, .filter-bar, .project-grid, .team-grid, .map-section--svg { padding-left: 20px; padding-right: 20px; } .hero { min-height: 480px; } .hero-tagline { font-size: clamp(22px, 8vw, 32px); bottom: 48px; } .top-header { height: 80px; } .top-header .nur-logo { font-size: 44px; } .col-heading { font-size: clamp(20px, 6vw, 26px); } .col-body p { font-size: 16px; } .feature-title { font-size: clamp(32px, 10vw, 44px) !important; } /* Index table: drop year column on smallest screens to avoid overflow */ .index-row { grid-template-columns: 30px 1.4fr 1.2fr 0.9fr 0.9fr !important; font-size: 12px; gap: 8px; } /* Service cards body smaller */ .service-card .body { font-size: 12px; } .values-strip--4 .value-card .body { font-size: 14px; } /* Menu panel fills almost the whole screen */ .menu-panel { width: 100vw; max-width: 100vw; padding: 40px 24px; } .menu-main-nav { margin-top: 60px; } .menu-main-nav a { font-size: 17px; } /* Bigger tap targets for filters */ .filter-bar { flex-wrap: wrap; gap: 8px; } .filter-bar button { padding: 10px 14px; } /* Footer logo */ .footer-logo { font-size: 46px; } .footer { padding: 50px 20px 30px; } /* Carousel narrower */ .projects-feature { height: 560px; } .feature-overlay { padding: 100px 20px 50px; } /* Team detail modal */ .team-detail-grid { padding: 50px 16px; gap: 18px; } .team-detail-card { max-width: 100%; } } /* Universal hardening - images always fluid, never overflow */ img, video, svg { max-width: 100%; height: auto; } .hero-video { height: 100%; } /* ============================================================ MOBILE POLISH PASS (May 2026) Targeted fixes for iPhone Safari issues: - Brown bands at top/bottom of browser chrome (safe areas) - Hero video cropped or showing play button - About tiles single-column instead of 2x2 - Projects feature carousel jumbled under side rail - Footer dumping all 3 cols into one long stack - Partner page "Let's talk" courtyard image too small ============================================================ */ @media (max-width: 768px) { /* ----- Safe area fix: page paints under the iPhone notch / home bar ----- */ /* Body stays white so all the white sections (intro, map, contact, About) read correctly. The browser chrome (status bar / home indicator) is controlled by the tag in index.html. */ html, body { background: #ffffff; } body { min-height: 100vh; min-height: 100svh; } /* ----- Hero video: full viewport on mobile, centered crop ----- */ .hero { /* 100svh = "small viewport height" - accounts for iOS browser chrome collapsing/expanding, unlike 100vh which is fixed at largest height. */ height: 100svh; min-height: 100svh; max-height: 100svh; } .hero-video { width: 100%; height: 100%; object-fit: cover; /* Center the crop so the most interesting part of the frame is visible. */ object-position: center center; /* Scale slightly to push white edge frames outside overflow:hidden boundary, same fix as desktop. */ transform: scale(1.06) !important; } .hero.is-loaded .hero-video { transform: scale(1.06) !important; } .hero-tagline { /* Account for the iPhone home indicator with safe-area-inset */ bottom: calc(60px + env(safe-area-inset-bottom)); right: calc(24px + env(safe-area-inset-right)); } /* ----- About page: keep tiles as 2x2 grid on mobile ----- */ .services-strip, .values-strip--4 { grid-template-columns: 1fr 1fr !important; gap: 10px; } /* Tiles are smaller on phone so trim font sizes to fit */ .service-card, .values-strip--4 .value-card { aspect-ratio: 4 / 5; /* portrait so two side-by-side look balanced */ } .service-card .label, .values-strip--4 .value-card .label { top: 14px; left: 14px; } .service-card .label .name, .values-strip--4 .value-card .label .name { font-size: 18px; letter-spacing: -0.01em; } .service-card .body, .values-strip--4 .value-card .body { font-size: 12px; line-height: 1.45; top: 60px; bottom: 14px; left: 14px; right: 14px; } /* "Click for more" CTA is restored in the later mobile pass below */ /* ----- Projects feature carousel: keep clear of left side rail, lighter chrome ----- */ .projects-feature { height: 75svh; min-height: 540px; } .feature-overlay { /* Left padding leaves room for the side rail; right padding pulls in */ padding: 90px 24px 70px 60px; } .feature-top-line { top: 90px; left: 58px; right: 22px; } .feature-bot-line { bottom: 50px; left: 58px; right: 22px; } .feature-meta-top { display: flex !important; flex-direction: column !important; gap: 8px; } .feature-meta-top > div:last-child { align-self: flex-start !important; } .feature-title { font-size: clamp(32px, 8.5vw, 48px) !important; line-height: 1.05 !important; } .feature-meta { font-size: 10px; letter-spacing: 0.16em; } .feature-bottom { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 18px; } .feature-controls { flex-wrap: wrap; gap: 12px; } .feature-controls .feature-explore { width: 100%; margin-top: 4px; } .feature-body { font-size: 13px; line-height: 1.55; max-width: 100%; text-align: left; } /* ----- Map on mobile: tighter and more legible ----- */ .map-section--wide { padding: 60px 24px 60px; } .map-section--wide .col-heading { font-size: clamp(22px, 5.5vw, 28px); line-height: 1.2; } .map-section--wide .au-map-leaflet { aspect-ratio: 1 / 1.05; } .au-map-leaflet { aspect-ratio: 1 / 1.05; } .au-map-reset { font-size: 10px; padding: 7px 11px; } /* ----- Consistent horizontal padding for ALL sections on mobile ----- */ .section, .intro-scroll, .map-section, .map-section--wide, .contact-section, .grid-intro, .partnership-diagram, .jv-section, .project-enquiry, .index-section, .filter-bar, .project-grid, .services-strip, .values-strip, .values-strip--4, .team-grid { padding-left: 24px !important; padding-right: 24px !important; } /* ----- Footer (mobile): stacked rows -------------------------------- 1. Big NUR logo at top 2. Main nav (HOME ABOUT ... CONTACT) as a vertical list 3. Horizontal divider line 4. Socials (Instagram ... LinkedIn) as a single horizontal row 5. Legal (Privacy Newsletter Terms) as another horizontal row 6. Tiny copyright at the very bottom --------------------------------------------------------------------- */ .footer { padding: 70px 24px calc(20px + env(safe-area-inset-bottom)); height: auto; min-height: 0; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 0; } /* Hide the desktop absolute hairlines - on mobile we draw our own divider between nav and socials with a border. */ .footer-top-line, .footer-bot-line { display: none !important; } /* Use CSS grid so we can put the main nav on row 1 (spanning both cols) then the socials column on row 2-col-1 and the legal column on row 2-col-2 -- two vertical lists side by side under the hairline. */ .footer-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-areas: "main main" "social legal" !important; column-gap: 24px !important; row-gap: 28px !important; margin-top: 26px !important; } /* Main nav: vertical column, full width */ .footer-col--main { grid-area: main !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .footer-col--main a { font-size: 13px; letter-spacing: 0.2em; padding: 2px 0; } /* Socials column - vertical list, below the divider line */ .footer-col--social { grid-area: social !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,0.4); } /* Legal column - vertical list, next to socials, also under the line */ .footer-col--legal { grid-area: legal !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,0.4); } .footer-col--social a, .footer-col--legal a { font-size: 12px; letter-spacing: 0.2em; padding: 2px 0; color: rgba(255,255,255,0.85); } /* The big NUR logo + tiny copyright at the very bottom */ .footer-bottom { order: 4 !important; margin-top: 30px; gap: 8px !important; align-items: flex-start !important; } .footer-logo { font-size: 56px !important; } .footer-copy { font-size: 10.5px !important; letter-spacing: 0.04em !important; opacity: 0.75; } /* ----- Partner page: bigger Let's talk image + cleaner layout ----- */ /* Make the "Let's talk" 2-col grid stack on mobile so the courtyard image takes the full width and reads as a hero rather than a thumbnail. */ #page-partnerships .contact-section .reveal[data-delay="2"] { grid-template-columns: 1fr !important; gap: 30px !important; align-items: stretch !important; } #page-partnerships .contact-section .reveal[data-delay="2"] > div[style*="aspect-ratio"] { aspect-ratio: 16 / 10 !important; width: 100% !important; } #page-partnerships .partnership-diagram .img { width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 10 !important; } #page-partnerships .diagram-row { grid-template-columns: 44px 1fr !important; grid-template-areas: "num title" ". desc" !important; gap: 10px 16px !important; padding: 22px 0 !important; } #page-partnerships .diagram-row .num { grid-area: num; font-size: 14px; } #page-partnerships .diagram-row .title { grid-area: title; font-size: 18px; line-height: 1.3; } #page-partnerships .diagram-row .desc { grid-area: desc; font-size: 15px; line-height: 1.55; } /* Tighten partner hero text and JV section spacing */ #page-partnerships .jv-section { padding-left: 24px; padding-right: 24px; /* Tighter top padding so there isn't a giant blank gap above the "Every partnership is structured..." intro on mobile. */ padding-top: 20px !important; } /* And tighter bottom padding on the diagram itself so the two sections sit close together. */ #page-partnerships .partnership-diagram { padding-bottom: 40px !important; } #page-partnerships .jv-intro { font-size: 16px !important; line-height: 1.55 !important; } #page-partnerships .jv-step h3 { font-size: 17px; line-height: 1.35; } #page-partnerships .jv-step .hint { font-size: 13px; } /* ----- Side rail narrower so it doesn't dominate small screens ----- */ .side-rail { width: 34px; } } /* Very small phones (iPhone SE, narrow Androids) */ @media (max-width: 420px) { .hero-tagline { font-size: clamp(22px, 7.5vw, 30px); } .feature-title { font-size: 30px !important; } .feature-overlay { padding: 100px 22px 60px 22px !important; } .footer-logo { font-size: 54px; } .footer-col a { font-size: 12px; letter-spacing: 0.14em; } } /* ============================================================ MOBILE POLISH PASS 2 (May 2026) - Replace left side-rail with top-right burger - Carousel: title sits cleanly above the top hairline - Service + value tiles much bigger, body text always visible - Service detail modal: stacks to single column, scrollable - Team detail modal: bio sits BELOW the active card (was sandwiched between) - Partner hero: reframed so more of the building shows - JV step 3: textarea instead of input so long answers don't clip ============================================================ */ @media (max-width: 768px) { /* ----- Hide the left side rail; show the top-right burger instead ----- */ .side-rail { display: none !important; } .burger-btn { display: flex; } /* ----- Carousel chrome: line above the title with breathing room ----- */ .feature-overlay { /* No left side-rail to clear, so reset to symmetrical padding */ padding: 110px 24px 70px 24px !important; } .feature-top-line { top: 70px !important; left: 22px !important; right: 22px !important; } .feature-bot-line { bottom: 50px !important; left: 22px !important; right: 22px !important; } .feature-title { font-size: clamp(34px, 9vw, 50px) !important; line-height: 1 !important; /* The title now sits ~30px below the white hairline for a clean kicker */ margin-top: 0 !important; } /* ----- Service + values tiles: bigger, body always visible, no clipping ----- */ .services-strip, .values-strip--4 { grid-template-columns: 1fr 1fr !important; gap: 12px; padding: 0 18px !important; } /* ----- Single-column tile layout on mobile ----- One tile per row gives each photo the full viewport width minus a small inner gutter, so they don't feel cramped like the old 2x2 grid. */ .services-strip, .values-strip--4 { grid-template-columns: 1fr !important; padding: 0 20px !important; gap: 16px !important; } /* Reset the wrapping section padding so the tiles use the full mobile viewport width (minus the 20px inner gutter set on the strip). */ .section:has(> .services-strip), .section:has(> .values-strip--4) { padding-left: 0 !important; padding-right: 0 !important; } /* Landscape aspect (4:3) - photo reads as a proper hero strip on phone */ .service-card, .values-strip--4 .value-card { aspect-ratio: 4 / 3 !important; } /* Title sits at the top */ .service-card .label, .values-strip--4 .value-card .label { top: 14px !important; left: 12px !important; right: 12px !important; } /* Labels overflow safety for long words ("Communication" / "Commitment") */ .service-card .label, .values-strip--4 .value-card .label { top: 20px !important; left: 22px !important; right: 22px !important; max-width: 100% !important; overflow: hidden; } .service-card .label .name, .values-strip--4 .value-card .label .name { /* Bigger heading now that each tile is full-width on mobile */ font-size: 28px !important; letter-spacing: -0.02em !important; line-height: 1 !important; display: block !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ----- TILE BODY (hidden by default, revealed on tap) ----- Body sits hidden behind a dark overlay; on tap (.is-touched on the card, or via the modal for service tiles) it reveals with the gradient deepening so the text reads cleanly. */ .service-card .body, .values-strip--4 .value-card .body { position: absolute !important; inset: 70px 22px 60px 22px !important; /* below title, above CTA */ max-width: none !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; font-size: 14px !important; line-height: 1.5 !important; color: rgba(255,255,255,0.98); overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: none; /* Hidden by default - revealed via .is-touched (value tiles) */ opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; } /* Tap-to-reveal on value tiles - body fades in over the image */ .values-strip--4 .value-card.is-touched .body { opacity: 1; transform: none; } /* When a value tile is touched, deepen the gradient so the white text reads */ .values-strip--4 .value-card.is-touched::after { background: rgba(0, 0, 0, 0.7) !important; } /* "Click for more" CTA — bottom-right of every tile */ .service-card-cta { display: inline-flex !important; left: auto !important; right: 22px !important; bottom: 18px !important; font-size: 11px !important; letter-spacing: 0.22em !important; gap: 8px !important; padding-bottom: 3px !important; border-bottom-width: 1px !important; color: rgba(255,255,255,0.95) !important; z-index: 3 !important; /* always above the body overlay */ } /* When a value tile is touched, swap the CTA wording cue ("Tap to close") via opacity dim - keeps the same visual element but signals state. */ .value-card.is-touched .service-card-cta { opacity: 0.5 !important; } /* Both card types are tappable on mobile */ .value-card { cursor: pointer !important; } /* Darken the bg permanently on mobile so the always-visible text reads */ .service-card::after, .values-strip--4 .value-card::after { background: linear-gradient(rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.75) 100%) !important; } /* Value tiles aren't clickable */ .values-strip--4 .value-card { cursor: default !important; } /* ----- Service detail modal: single column, image on top, scrollable ----- */ .service-detail-inner { width: 100vw !important; height: 100svh !important; max-height: 100svh !important; grid-template-columns: 1fr !important; grid-template-rows: 32vh 1fr !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } .service-detail-img { min-height: 32vh; } .service-detail-img .name { top: 24px; left: 24px; font-size: 28px; } .service-detail-body { padding: 30px 24px 60px !important; overflow-y: visible; } .service-detail-body h3 { font-size: 22px !important; } .service-detail-body p, .service-detail-body li { font-size: 14px !important; line-height: 1.6 !important; } .service-detail-close { top: 14px !important; right: 16px !important; background: rgba(255,255,255,0.92); padding: 8px 12px; border-radius: 4px; } /* ----- Team detail modal: only the active person's card shown ----- */ .team-detail-grid { grid-template-columns: 1fr !important; padding: 60px 20px calc(40px + env(safe-area-inset-bottom)) !important; gap: 18px !important; grid-template-areas: "card" "bio" !important; } /* Both cards collapse to the same grid area - only the active one is shown */ .team-detail-card:first-of-type, .team-detail-card:last-of-type { grid-area: card; } .team-detail-body { grid-area: bio; } /* Hide the non-active card entirely on mobile (no dimmed sibling) */ .team-detail-grid.member-usman .team-detail-card[data-member="nofel"], .team-detail-grid.member-nofel .team-detail-card[data-member="usman"] { display: none !important; } .team-detail-card { aspect-ratio: 4 / 5; max-width: 100%; } /* Active card always full opacity */ .team-detail-card.is-active { opacity: 1; transform: none; } .team-detail-body { padding: 14px 4px 0 !important; } .team-detail-body .name { font-size: 26px !important; } .team-detail-bio p { font-size: 15px !important; line-height: 1.6 !important; } /* ----- "Let's talk" stacks on mobile - link on top, image full width below ----- */ .lets-talk-grid { grid-template-columns: 1fr !important; gap: 28px !important; align-items: stretch !important; margin-top: 24px !important; } .lets-talk-img { aspect-ratio: 16 / 10 !important; } /* ----- Partner hero: reframe to show more of the building ----- */ .hero--partnerships .hero-bg { /* Source image is wide; shift framing right and zoom out slightly so the whole architecture composition reads, not just one corner. */ background-position: 70% center !important; background-size: cover !important; transform: none !important; } .hero.is-loaded .hero--partnerships .hero-bg, .hero--partnerships.is-loaded .hero-bg { transform: none !important; } /* ----- About hero: edge-to-edge cover, anchored to top so we see the upper architecture instead of just the entrance. No scale transform = no grey/dark bars around the image. ----- */ .hero--about .hero-bg { background-size: cover !important; background-position: center 30% !important; transform: none !important; background-color: transparent !important; } .hero.is-loaded .hero--about .hero-bg, .hero--about.is-loaded .hero-bg { transform: none !important; } /* ----- JV form: textarea + input never clip on mobile ----- */ .jv-input, .jv-textarea { font-size: 15px !important; padding: 12px 0 10px !important; max-width: 100% !important; } .jv-textarea { resize: vertical; border-bottom: 1px solid var(--grey-soft); min-height: 110px; /* tall enough for the full 4-row placeholder to show */ font-family: inherit; /* Crucial: textarea content (and placeholder) must wrap inside the box */ white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; padding-bottom: 16px !important; } textarea.jv-input::placeholder, .jv-textarea::placeholder { white-space: pre-wrap !important; overflow-wrap: break-word !important; } input.jv-input::placeholder { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } /* Smallest phones (iPhone SE etc) - inherits the big title + body settings from the main mobile @media block; no override needed. */ /* ============================================================ TILE / CARD OVERFLOW SAFETY Stops any label, caption, body or status pill from spilling over the tile boundary at any viewport width. ============================================================ */ .service-card, .value-card, .project-card .img, .team-card, .team-detail-card { overflow: hidden; } .service-card .label, .value-card .label { /* Cap the label width so long names never escape the tile or run under the "click for more" CTA in the bottom-right. */ max-width: calc(100% - 56px); word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; } .service-card .label .name, .value-card .label .name { word-break: break-word; } .service-card .body, .value-card .body { /* Constrain the centred body copy to the inner padded box so it can never reach the edges, regardless of viewport. */ max-width: calc(100% - 56px); margin-inline: auto; word-wrap: break-word; overflow-wrap: anywhere; } .service-card-cta { /* If the parent tile is too narrow for the CTA + the label, the CTA shrinks rather than wrapping the label on top of it. */ max-width: calc(100% - 52px); white-space: nowrap; } .project-card .meta { /* Caption row: stack instead of overlap when the card is narrow. */ flex-wrap: wrap; row-gap: 4px; column-gap: 12px; } .project-card .meta span { min-width: 0; } .project-card .meta .right { text-align: right; } .project-card .project-status { /* Pin to the top-left of the image; if the image is narrow the pill stays compact and still readable. */ max-width: calc(100% - 32px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Diagram row collapses cleanly when narrow */ @media (max-width: 768px) { .diagram-row { grid-template-columns: 36px 1fr !important; grid-template-areas: "num title" "num desc"; gap: 10px 16px; } .diagram-row .num { grid-area: num; } .diagram-row .title { grid-area: title; font-size: 18px; } .diagram-row .desc { grid-area: desc; font-size: 15px; } } /* ── Enquiry form: progressive step reveal ──────────────────────────────── */ .jv-steps--enquiry { gap: 0; /* spacing is handled by padding inside each wrapper */ } .jv-steps--enquiry .jv-step::before { display: none; /* no connector lines in the enquiry form */ } /* Wrapper that slides in when a step unlocks */ .jv-step-wrap { overflow: hidden; padding-top: 80px; /* provides the spacing between steps */ transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s; } .jv-step-wrap--locked { height: 0; opacity: 0; pointer-events: none; padding-top: 0; /* no padding while hidden so zero-height is truly zero */ } /* ── Hero video: grey overlay + centered logo ───────────────────────────── */ .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); z-index: 2; } .hero-logo-center { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; } .hero-logo-center img { width: min(680px, 78vw); height: auto; /* Nudge down slightly so the wordmark sits at the optical centre ("THE" is small up top, which makes dead-centre read as too high). */ transform: translateY(4vh); } /* ── Address autocomplete dropdown (enquiry location field) ─────────────── */ .addr-ac-wrap { position: relative; } .addr-ac-list { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: var(--white); border: 1px solid var(--grey-faint); border-top: none; box-shadow: 0 10px 28px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto; z-index: 60; display: none; } .addr-ac-list.is-open { display: block; } .addr-ac-item { padding: 12px 14px; font-size: 15px; color: var(--grey); cursor: pointer; border-bottom: 1px solid var(--grey-faint); } .addr-ac-item:last-child { border-bottom: none; } .addr-ac-item:hover, .addr-ac-item.is-active { background: var(--grey-bg); color: var(--brown); } /* ── Home: who we work with ─────────────────────────────────────────────── */ .clients-section { padding-top: 80px; padding-bottom: 80px; } .clients-lead { font-size: 19px; line-height: 1.6; color: var(--grey); max-width: 760px; margin-top: 20px; } .clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 54px; } .clients-card { border-top: 2px solid var(--brown); padding: 24px 4px 0; } .clients-card h3 { font-size: 20px; color: var(--brown); font-weight: 500; margin-bottom: 12px; letter-spacing: -0.01em; } .clients-card p { font-size: 15.5px; line-height: 1.6; color: var(--grey); } @media (max-width: 900px) { .clients-section { padding-top: 56px; padding-bottom: 56px; } .clients-grid { grid-template-columns: 1fr; gap: 8px; } .clients-card { padding-top: 22px; padding-bottom: 22px; } } /* ── Home: compact model strip (Client -> PM -> Builder) ────────────────── */ .model-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 28px; align-items: stretch; margin-top: 54px; } .model-strip-card { border: 1px solid var(--grey-faint); border-radius: 4px; padding: 30px 28px; background: var(--white); /* Flex column so the short cards can center their copy and match the taller PM card's height cleanly, keeping the row visually balanced. */ display: flex; flex-direction: column; } .model-strip-card--pm { border-color: var(--brown); background: rgba(0, 67, 70, 0.04); } /* The two short cards (Client / Builder) vertically center their copy so they don't look top-heavy next to the taller, text-rich PM card. */ .model-strip-card:not(.model-strip-card--pm) { justify-content: center; } .model-strip-num { display: block; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; color: var(--teal-mid); margin-bottom: 12px; } .model-strip-card h3 { font-size: 21px; color: var(--brown); font-weight: 500; margin-bottom: 10px; } .model-strip-card p { font-size: 15.5px; color: var(--grey); line-height: 1.55; } .model-strip-list { list-style: none; margin: 16px 0 0; padding: 0; } .model-strip-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--grey); margin-bottom: 9px; } .model-strip-list li:last-child { margin-bottom: 0; } .model-strip-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); } .model-strip-arrow { align-self: center; color: var(--brown); font-size: 22px; opacity: 0.65; } .model-strip-link { display: inline-block; margin-top: 36px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown); border-bottom: 1px solid var(--brown); padding-bottom: 3px; } .model-strip-link:hover { color: var(--teal-mid); border-color: var(--teal-mid); } @media (max-width: 900px) { .model-strip { grid-template-columns: 1fr; gap: 14px; } .model-strip-arrow { transform: rotate(90deg); justify-self: center; } } /* ── Our Process: journey intro with stat rail ──────────────────────────── */ .journey-intro-grid { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 90px; align-items: start; } .journey-stats { display: flex; flex-direction: column; gap: 40px; padding-top: 8px; } .journey-stat .n { display: block; font-family: var(--font-sans); font-size: clamp(40px, 3.6vw, 56px); font-weight: 300; color: var(--brown); line-height: 1; margin-bottom: 8px; } .journey-stat .d { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-soft); } @media (max-width: 900px) { .journey-intro-grid { grid-template-columns: 1fr; gap: 40px; } .journey-stats { flex-direction: row; flex-wrap: wrap; gap: 28px; } .journey-stat { min-width: 130px; } } /* ── Mobile: hero-logo-center vertical breathing room, centred ──────────── */ @media (max-width: 768px) { .hero-logo-center { justify-content: center; align-items: center; padding: 80px 24px 70px; } .hero-logo-center img { width: min(300px, 72vw); } } /* ── Mobile: swap Our Process hero to portrait image ────────────────────── */ @media (max-width: 768px) { .hero--partnerships .hero-bg { background-image: url("assets/process-mobile.jpg") !important; background-position: center center !important; background-size: cover !important; } }