/* Envision Exhibitions - production landing Visual system: Direction 05 mockup + real brand palette (2026-07-30 assets) */ :root{ --bg:#0A0F1E; /* Envision Navy */ --bg-2:#0C1222; --panel:#232836; /* Steel Grey */ --card:#0E1526; --border:#1E2A44; --border-soft:#243252; --text:#F2F4F7; /* Platinum */ --muted:#8B95A9; --muted-2:#5C6B84; --cyan:#00CFE8; /* Electric Cyan */ --blue:#0D47A1; /* Industry Blue */ --purple:#6B21A8; /* Premium Purple */ --grad:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%); /* neue-haas-grotesk-display activates as soon as an Adobe Fonts web-project is added to ; until then Hanken Grotesk renders */ --font-heading:'neue-haas-grotesk-display', 'Hanken Grotesk', 'Inter', -apple-system, sans-serif; --font-body:'neue-haas-grotesk-text', 'Inter', -apple-system, sans-serif; } @font-face{ font-family:'Inter'; src:url('assets/fonts/InterVariable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Hanken Grotesk'; src:url('assets/fonts/HankenGrotesk.woff2') format('woff2'); font-weight:300 900; font-style:normal; font-display:swap; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } /* anchor targets land below the sticky nav instead of underneath it */ #top, section[id]{ scroll-margin-top:78px; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } } body{ font-family:var(--font-body); background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-anchor:none; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .container{ max-width:1180px; margin:0 auto; padding:0 32px; } /* ---------- Buttons ---------- Outlined at rest, filled with the accent on hover, with a light sweep across the face. Cyan carries the primary action, purple the secondary. */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-heading); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; white-space:nowrap; padding:14px 28px; border-radius:6px; cursor:pointer; background:transparent; border:1px solid transparent; transition:background 300ms ease-in, color 300ms ease-in, border-color 300ms ease-in, box-shadow 300ms ease-in; } .btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } .btn:active{ box-shadow:none; } .btn::after{ content:""; position:absolute; top:7%; left:-30%; width:34px; height:86%; background:#fff; opacity:0; transform:skewX(-20deg); box-shadow:0 0 40px 18px rgba(255,255,255,0.5); pointer-events:none; } .btn:hover::after{ animation:btn-shine 720ms ease-out; } @keyframes btn-shine{ 0%{ left:-30%; opacity:0; } 22%{ opacity:0.5; } 100%{ left:118%; opacity:0; } } .btn-primary{ border-color:var(--cyan); color:#DFF8FD; } .btn-primary:hover{ background:var(--cyan); color:#06131F; box-shadow:0 0 30px 5px rgba(0,207,232,0.5); } .btn-ghost{ border-color:rgba(242,244,247,0.42); color:var(--text); } .btn-ghost:hover{ background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 0 30px 5px rgba(107,33,168,0.6); } /* ---------- Skip link (keyboard users) ---------- */ .skip-link{ position:absolute; left:16px; top:-52px; z-index:200; padding:11px 18px; border-radius:6px; background:var(--cyan); color:#06131F; font-family:var(--font-heading); font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; transition:top 200ms ease; } .skip-link:focus{ top:14px; outline:2px solid #fff; outline-offset:2px; } /* ---------- Nav ---------- */ .nav{ position:sticky; top:0; z-index:100; background:rgba(10,15,30,0.92); backdrop-filter:blur(6px); border-bottom:1px solid rgba(30,42,68,0.6); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; } .brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; } .brand-mark{ width:42px; height:42px; } .brand-divider{ width:1px; height:34px; background:var(--border-soft); } .brand-name{ display:block; font-family:var(--font-heading); font-size:18px; font-weight:700; letter-spacing:0.18em; color:#fff; line-height:1; } .brand-sub{ display:flex; align-items:center; gap:7px; font-size:8px; font-weight:500; letter-spacing:0.3em; color:var(--muted); line-height:1; margin-top:5px; } .brand-sub::before, .brand-sub::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg, var(--cyan), var(--purple)); opacity:0.7; } .nav-links{ display:flex; align-items:center; gap:32px; margin-left:auto; } .nav-links a{ font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:#C6CEDC; padding:6px 0; transition:color 200ms ease; } .nav-links a:hover{ color:#fff; } .nav-links a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } .nav-cta{ padding:12px 22px; } @media (max-width:920px){ .nav-links{ display:none; } } /* on a phone the header only has room for a short label, so "Make an" drops away and the lockup tightens rather than letting the button wrap */ @media (max-width:600px){ .nav-inner{ gap:14px; } .nav-cta-long{ display:none; } .nav-cta{ padding:10px 16px; font-size:11px; letter-spacing:0.1em; } .brand{ gap:11px; min-width:0; } .brand-mark{ width:36px; height:36px; } .brand-divider{ height:28px; } .brand-name{ font-size:15px; letter-spacing:0.15em; } .brand-sub{ font-size:7px; letter-spacing:0.24em; gap:6px; margin-top:4px; } } /* ---------- Hero ---------- */ .hero{ position:relative; overflow:hidden; background:var(--bg); min-height:calc(100svh - 78px); display:flex; flex-direction:column; justify-content:center; } .hero-bg{ position:absolute; inset:-8% 0 0 0; height:116%; will-change:transform; } .hero-bg picture, .hero-bg img{ width:100%; height:100%; } .hero-bg img{ object-fit:cover; object-position:24% 40%; } .hero-fallback{ position:absolute; inset:0; } .hero-bg::after{ content:""; position:absolute; inset:0; z-index:2; background: linear-gradient(270deg, rgba(10,15,30,0.82) 0%, rgba(10,15,30,0.68) 34%, rgba(10,15,30,0.3) 66%, rgba(10,15,30,0.12) 100%), linear-gradient(0deg, rgba(10,15,30,0.85) 0%, rgba(10,15,30,0) 30%); } .hero > .container{ position:relative; z-index:1; width:100%; } .hero-content{ padding:104px 0 88px; max-width:640px; margin-left:auto; } .hero-eyebrow{ display:flex; align-items:center; gap:16px; font-size:12px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; color:var(--cyan); } .hero-eyebrow::before{ content:""; width:44px; height:1px; background:linear-gradient(90deg, var(--cyan), var(--purple)); } .hero h1{ font-family:var(--font-heading); font-size:clamp(2.3rem, 5.2vw, 3.8rem); font-weight:800; line-height:1.05; letter-spacing:-0.005em; text-transform:uppercase; color:#fff; margin-top:22px; } .hero h1 .grad-line{ background:linear-gradient(92deg, var(--cyan) 0%, #7DB8FF 55%, #A855F7 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-desc{ font-size:16px; color:#AEB8C9; max-width:430px; margin-top:24px; line-height:1.75; } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; } /* hero load reveal - JS-gated */ .js .reveal{ opacity:0; transform:translateY(14px); } .js .reveal.in{ opacity:1; transform:none; transition:opacity 440ms ease, transform 440ms ease; } /* ---------- Hero base strip (inside the copy column) ---------- */ .hero-base-inner{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; border-top:1px solid rgba(139,149,169,0.35); padding-top:20px; margin-top:40px; } .hero-base-item{ display:flex; align-items:baseline; gap:9px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#C6CEDC; } .hero-base-item strong{ font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--cyan); line-height:1; } .hero-base-sep{ width:5px; height:5px; transform:rotate(45deg); background:var(--cyan); opacity:0.85; flex:0 0 auto; } @media (max-width:640px){ .hero-content{ padding:72px 0 56px; } .hero-base-inner{ gap:16px; } } /* ---------- Section furniture ---------- */ .eyebrow{ font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); } .section-head{ display:flex; align-items:center; gap:18px; } .section-no{ font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:0.08em; color:var(--cyan); } .section-rule{ height:1px; flex:0 0 64px; background:linear-gradient(90deg, var(--cyan), rgba(0,207,232,0)); } /* ---------- Why Envision: pinned scroll scenes ---------- Each value pins for a screen of scrolling. Scroll progress wipes the photograph from desaturated to full colour and brings the copy in. */ .trust{ background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:56px 0 0; --nav-h:78px; } /* each value holds the frame while colour fills the photograph top to bottom */ .scene{ position:relative; height:185vh; } .scene:last-child{ margin-bottom:70px; } .scene-sticky{ position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h)); min-height:520px; overflow:hidden; } .scene-grid{ height:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); } .scene.is-reversed .scene-media{ order:2; } .scene-media{ position:relative; overflow:hidden; background:var(--bg); } .scene-media picture, .scene-media img{ width:100%; height:100%; display:block; } .scene-media img{ object-fit:cover; object-position:50% 45%; } .scene-base img{ filter:grayscale(1) brightness(0.55) contrast(1.06); } .scene-paint{ position:absolute; inset:0; will-change:clip-path; } /* the wipe only starts hidden when JS is there to drive it; without JS the colour photograph simply shows in full */ .js .scene-paint{ clip-path:inset(0 0 100% 0); } .scene-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(10,15,30,0) 64%, rgba(10,15,30,0.5) 100%); } .scene.is-reversed .scene-media::after{ background:linear-gradient(270deg, rgba(10,15,30,0) 64%, rgba(10,15,30,0.5) 100%); } .scene-copy{ display:flex; align-items:center; padding:0 clamp(24px, 5vw, 76px); } .scene-inner{ max-width:440px; } .scene-no{ display:block; font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:0.24em; color:var(--cyan); margin-bottom:14px; } .scene-title{ font-family:var(--font-heading); font-size:clamp(1.9rem, 3.6vw, 3rem); font-weight:800; line-height:1.05; letter-spacing:-0.005em; text-transform:uppercase; color:#fff; } .scene-text{ font-size:15.5px; line-height:1.8; color:#C6CEDC; margin-top:24px; padding-top:24px; border-top:1px solid rgba(139,149,169,0.32); } .scene-points{ list-style:none; margin-top:24px; } .scene-points li{ position:relative; padding-left:20px; margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--muted); } .scene-points li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; transform:rotate(45deg); background:linear-gradient(135deg, var(--cyan), var(--purple)); } /* copy arrives in steps as the colour climbs */ .js .step{ opacity:0; transform:translateY(30px); transition:opacity 800ms ease, transform 860ms cubic-bezier(.22,.61,.36,1); } .js .step.is-in{ opacity:1; transform:none; } @media (max-width:900px){ .scene{ height:auto; } .scene:last-child{ margin-bottom:56px; } .scene-sticky{ position:relative; top:0; height:auto; min-height:0; overflow:visible; } /* the scenes sit outside .container so they can bleed on desktop; stacked on a phone they need the container's own gutter back */ .scene-grid{ grid-template-columns:1fr; max-width:1180px; margin:0 auto; padding:0 32px; } .scene.is-reversed .scene-media{ order:0; } .scene-media{ aspect-ratio:4/3; border-radius:12px; } .scene-media::after, .scene.is-reversed .scene-media::after{ background:linear-gradient(0deg, rgba(10,15,30,0.5) 0%, rgba(10,15,30,0) 44%); } .scene-copy{ padding:24px 0 52px; } .scene-inner{ max-width:none; } } @media (prefers-reduced-motion:reduce){ .scene{ height:auto; } .scene-sticky{ position:relative; top:0; height:auto; overflow:visible; } .scene-paint{ clip-path:none !important; } .js .step{ opacity:1; transform:none; } } /* ---------- Services ---------- */ .services{ padding:74px 0 84px; } .section-title{ font-family:var(--font-heading); font-size:clamp(1.75rem, 3.4vw, 2.6rem); font-weight:800; line-height:1.1; letter-spacing:-0.005em; text-transform:uppercase; color:#fff; margin-top:20px; } .section-title .tint{ background:linear-gradient(92deg, var(--cyan) 0%, #7DB8FF 55%, #A855F7 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .svc{ display:grid; gap:34px 46px; margin-top:44px; grid-template-columns:minmax(0, 0.86fr) minmax(0, 1.14fr); align-items:start; } .svc-list{ display:flex; flex-direction:column; } .svc-row{ position:relative; display:flex; align-items:center; gap:16px; width:100%; padding:17px 4px; cursor:pointer; background:none; border:none; border-top:1px solid var(--border); font:inherit; color:inherit; text-align:left; transition:padding-left 320ms ease; } .svc-row:last-child{ border-bottom:1px solid var(--border); } .svc-row:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; } .svc-row.is-active{ padding-left:12px; } .svc-row::before{ content:""; position:absolute; left:0; top:-1px; bottom:0; width:2px; background:linear-gradient(180deg, var(--cyan), var(--purple)); transform:scaleY(0); transform-origin:top; transition:transform 360ms ease; } .svc-row.is-active::before{ transform:scaleY(1); } .svc-icon{ flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-soft); border-radius:9px; background:rgba(14,21,38,0.7); transition:border-color 320ms ease, background 320ms ease; } .svc-icon svg{ width:20px; height:20px; stroke:var(--muted); transition:stroke 320ms ease; } .svc-row.is-active .svc-icon{ border-color:rgba(0,207,232,0.55); background:rgba(0,207,232,0.08); } .svc-row.is-active .svc-icon svg{ stroke:var(--cyan); } .svc-name{ flex:1 1 auto; font-family:var(--font-heading); font-size:14.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#AEB8C9; transition:color 320ms ease; } .svc-row.is-active .svc-name{ color:#fff; } .svc-mark{ flex:0 0 auto; width:22px; height:1px; background:var(--border-soft); transition:width 360ms ease, background 360ms ease; } .svc-row.is-active .svc-mark{ width:34px; background:linear-gradient(90deg, var(--cyan), var(--purple)); } .svc-stage{ position:relative; min-height:1px; } .svc-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card); } .svc-card[hidden]{ display:none; } .svc-img{ display:block; aspect-ratio:4/3; overflow:hidden; } .svc-img img{ width:100%; height:100%; object-fit:cover; display:block; } .svc-copy{ padding:22px 26px 26px; } .svc-copy h3{ font-family:var(--font-heading); font-size:17px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#fff; } .svc-copy p{ font-size:14px; line-height:1.7; color:var(--muted); margin-top:10px; max-width:56ch; } .js .svc-card.is-entering{ animation:svc-in 460ms ease both; } @keyframes svc-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media (max-width:900px){ .svc{ grid-template-columns:1fr; gap:26px; } .svc-stage{ order:-1; } .svc-copy{ padding:20px 20px 22px; } } /* ---------- Client journey ---------- */ .journey{ background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:74px 0 80px; --stage-gap:20px; } .stages{ display:grid; gap:0 var(--stage-gap); margin-top:46px; grid-template-columns:repeat(6, minmax(0, 1fr)); list-style:none; } .stage{ display:flex; flex-direction:column; min-width:0; } .stage-photo{ display:block; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--border); border-radius:8px; } .stage-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.8) brightness(0.8); transform:scale(1.02); transition:transform 620ms cubic-bezier(.22,.61,.36,1), filter 420ms ease; } .stage:hover .stage-photo img, .stage:focus-within .stage-photo img{ transform:scale(1.09); filter:saturate(1) brightness(1); } /* connecting rail with a node per stage */ .stage-rail{ position:relative; display:block; height:38px; } .stage-rail::before{ content:""; position:absolute; top:50%; left:50%; right:calc(-1 * var(--stage-gap) - 50%); height:1px; background:var(--border-soft); } /* the sequence ends in an arrow, as in the client's own storyboard */ .stage:last-child .stage-rail::before{ right:7px; } .stage:last-child .stage-rail::after{ content:""; position:absolute; top:50%; right:2px; width:6px; height:6px; margin-top:-3.5px; border-top:1px solid var(--border-soft); border-right:1px solid var(--border-soft); transform:rotate(45deg); } .stage-dot{ position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--bg-2); border:1px solid var(--muted-2); transition:border-color 320ms ease, background 320ms ease, transform 320ms ease; } .stage:hover .stage-dot, .stage:focus-within .stage-dot{ transform:scale(1.5); border-color:var(--cyan); background:var(--cyan); } .stage-icon{ display:block; width:26px; height:26px; transition:transform 420ms cubic-bezier(.22,.61,.36,1); } .stage-icon svg{ width:26px; height:26px; stroke:#8FA0BC; transition:stroke 320ms ease; } .stage:hover .stage-icon, .stage:focus-within .stage-icon{ transform:scale(1.18); transform-origin:left center; } .stage:hover .stage-icon svg, .stage:focus-within .stage-icon svg{ stroke:var(--cyan); } .stage h3{ font-family:var(--font-heading); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#E7ECF4; margin-top:16px; } .stage p{ font-size:12.5px; line-height:1.65; color:var(--muted); margin-top:9px; } @media (max-width:1024px){ .stages{ display:flex; gap:var(--stage-gap); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; margin-left:-32px; margin-right:-32px; padding-left:32px; padding-right:32px; scrollbar-width:thin; } .stage{ flex:0 0 240px; scroll-snap-align:start; } .stage-rail::before{ right:calc(-1 * var(--stage-gap) - 50%); } } @media (max-width:520px){ .stage{ flex:0 0 214px; } } /* ---------- Bespoke / craftsmanship ---------- */ .bespoke{ padding:76px 0 84px; } .bespoke-lead{ display:grid; gap:34px 46px; margin-top:44px; grid-template-columns:minmax(0, 1.12fr) minmax(0, 0.88fr); align-items:center; } .bespoke-figure{ border:1px solid var(--border); border-radius:12px; overflow:hidden; } .bespoke-figure img{ width:100%; height:auto; display:block; aspect-ratio:1100/740; object-fit:cover; } .bespoke-intro{ font-size:15.5px; line-height:1.75; color:#C6CEDC; max-width:52ch; } .bespoke-label{ font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--cyan); margin-top:30px; } .materials{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; list-style:none; } .materials li{ font-size:11.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#AEB8C9; border:1px solid var(--border-soft); border-radius:100px; padding:8px 14px; transition:border-color 260ms ease, color 260ms ease, background 260ms ease; } .materials li:hover{ border-color:rgba(0,207,232,0.5); color:#fff; background:rgba(0,207,232,0.07); } .mosaic-label{ font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-top:58px; } .mosaic{ display:grid; gap:12px; margin-top:18px; list-style:none; grid-template-columns:repeat(4, minmax(0, 1fr)); } .tile{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:9px; aspect-ratio:4/5; } .tile img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.85) brightness(0.82); transform:scale(1); transition:transform 640ms cubic-bezier(.22,.61,.36,1), filter 400ms ease; } .tile:hover img, .tile:focus-within img{ transform:scale(1.1); filter:saturate(1) brightness(1); } .tile-cap{ position:absolute; left:0; right:0; bottom:0; padding:32px 14px 13px; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:linear-gradient(0deg, rgba(10,15,30,0.94) 30%, rgba(10,15,30,0)); opacity:0; transform:translateY(8px); transition:opacity 340ms ease, transform 340ms ease; } .tile:hover .tile-cap, .tile:focus-within .tile-cap{ opacity:1; transform:none; } @media (max-width:900px){ .bespoke-lead{ grid-template-columns:1fr; gap:26px; } .mosaic{ grid-template-columns:repeat(2, minmax(0, 1fr)); } /* no hover on touch: keep the captions readable */ .tile-cap{ opacity:1; transform:none; } } /* ---------- Behind the build (full-bleed band) ---------- */ .build{ position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:82px 0 78px; } .build-bg{ position:absolute; inset:0; } .build-bg picture, .build-bg img{ width:100%; height:100%; display:block; } .build-bg img{ object-fit:cover; object-position:72% 50%; } .build-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,15,30,0.97) 0%, rgba(10,15,30,0.92) 40%, rgba(10,15,30,0.62) 72%, rgba(10,15,30,0.42) 100%), linear-gradient(0deg, rgba(10,15,30,0.7) 0%, rgba(10,15,30,0) 40%); } .build-inner{ position:relative; z-index:1; } .build-copy{ font-size:15.5px; line-height:1.8; color:#C6CEDC; max-width:52ch; margin-top:22px; } .phases{ display:grid; gap:2px 24px; margin-top:44px; list-style:none; grid-template-columns:repeat(4, minmax(0, 1fr)); max-width:940px; } .phase{ padding-top:16px; border-top:1px solid rgba(139,149,169,0.4); position:relative; } .phase::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg, var(--cyan), var(--purple)); transform:scaleX(0); transform-origin:left; transition:transform 420ms ease; } .phase:hover::before, .phase:focus-within::before{ transform:scaleX(1); } .phase-name{ display:block; font-family:var(--font-heading); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff; } .phase-note{ display:block; font-size:12.5px; line-height:1.65; color:var(--muted); margin-top:8px; } @media (max-width:900px){ .build-bg img{ object-position:64% 50%; } .phases{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 20px; } } @media (max-width:520px){ .phases{ grid-template-columns:1fr; } } /* ---------- Customer care ---------- */ .care{ padding:78px 0 84px; } .care-grid{ display:grid; gap:40px 54px; grid-template-columns:minmax(0, 1fr) minmax(0, 0.92fr); align-items:center; } .care-intro{ font-size:16px; line-height:1.8; color:#C6CEDC; max-width:46ch; margin-top:22px; } .pillars{ display:grid; gap:24px 30px; margin-top:38px; list-style:none; grid-template-columns:repeat(2, minmax(0, 1fr)); } .pillar{ position:relative; padding-left:16px; } .pillar::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:2px; background:var(--border-soft); transition:background 360ms ease; } .pillar:hover::before, .pillar:focus-within::before{ background:linear-gradient(180deg, var(--cyan), var(--purple)); } .pillar-name{ display:block; font-family:var(--font-heading); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff; } .pillar-note{ display:block; font-size:13px; line-height:1.65; color:var(--muted); margin-top:8px; } .care-cta{ margin-top:40px; } .care-figure{ border:1px solid var(--border); border-radius:12px; overflow:hidden; } .care-figure img{ width:100%; height:auto; display:block; aspect-ratio:1000/860; object-fit:cover; } @media (max-width:900px){ .care-grid{ grid-template-columns:1fr; gap:30px; } .care-figure{ order:-1; } .pillars{ gap:22px 24px; } } @media (max-width:520px){ .pillars{ grid-template-columns:1fr; } } /* ---------- Enquiry ---------- */ .enquiry{ background:var(--bg-2); border-top:1px solid var(--border); padding:78px 0 86px; } .enquiry-grid{ display:grid; gap:40px 54px; grid-template-columns:minmax(0, 0.86fr) minmax(0, 1.14fr); align-items:start; } .enquiry-note{ font-size:15.5px; line-height:1.8; color:#C6CEDC; max-width:44ch; margin-top:22px; } .enquiry-points{ list-style:none; margin-top:26px; } .enquiry-points li{ position:relative; padding-left:20px; margin-top:11px; font-size:13.5px; color:var(--muted); } .enquiry-points li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; transform:rotate(45deg); background:linear-gradient(135deg, var(--cyan), var(--purple)); } .enquiry-card{ background:var(--card); border:1px solid var(--border-soft); border-radius:14px; padding:30px 30px 32px; } .field{ display:block; margin-top:18px; } .enquiry-card > .field:first-child{ margin-top:0; } .field-row{ display:grid; gap:18px; grid-template-columns:repeat(2, minmax(0, 1fr)); } .field label{ display:block; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; } .field label span{ color:var(--cyan); } .field input, .field select, .field textarea{ width:100%; font:inherit; font-size:14.5px; color:var(--text); background:rgba(10,15,30,0.75); border:1px solid var(--border-soft); border-radius:7px; padding:12px 13px; transition:border-color 220ms ease, background 220ms ease; } .field textarea{ resize:vertical; min-height:104px; } .field select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, #8B95A9 50%), linear-gradient(135deg, #8B95A9 50%, transparent 50%); background-position:calc(100% - 19px) 20px, calc(100% - 13px) 20px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; } .field input:hover, .field select:hover, .field textarea:hover{ border-color:#31436E; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); background:rgba(10,15,30,0.95); } .field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#E4736B; } .field-error{ display:none; font-size:12px; color:#E4736B; margin-top:7px; } .field.has-error .field-error{ display:block; } /* honeypot: off screen, never shown, never focusable */ .hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .enquiry-submit{ margin-top:26px; width:100%; } .enquiry-submit[disabled]{ opacity:0.6; cursor:progress; } .form-status{ font-size:13.5px; line-height:1.6; margin-top:16px; min-height:1px; } .form-status.is-ok{ color:#5FD3A8; } .form-status.is-bad{ color:#E4736B; } @media (max-width:900px){ .enquiry-grid{ grid-template-columns:1fr; gap:30px; } .enquiry-card{ padding:24px 22px 26px; } } @media (max-width:520px){ .field-row{ grid-template-columns:1fr; } } /* ---------- Enquiry: direct contact ---------- */ .enquiry-direct{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(139,149,169,0.3); } .enquiry-direct-label{ font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; } .enquiry-direct a{ display:block; font-size:14.5px; color:#C6CEDC; margin-top:7px; transition:color 220ms ease; } .enquiry-direct a:hover{ color:#fff; } .enquiry-direct a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } /* ---------- Footer ---------- */ .foot{ background:var(--bg); border-top:1px solid var(--border); padding:52px 0 30px; } .foot-grid{ display:grid; gap:36px 40px; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } .foot-brand-col .brand{ margin-bottom:18px; } .foot-line{ font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); } .foot-tag{ font-size:13.5px; color:var(--muted-2); margin-top:10px; } .foot-head{ font-family:var(--font-heading); font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#fff; margin-bottom:16px; } .foot-contact{ display:block; font-size:13.5px; color:#AEB8C9; margin-top:9px; transition:color 220ms ease; } .foot-contact:hover{ color:#fff; } .foot-contact:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } .foot-address{ font-style:normal; font-size:13.5px; line-height:1.75; color:#AEB8C9; } .foot-links{ display:flex; flex-direction:column; gap:9px; } .foot-links a{ font-size:13.5px; color:#AEB8C9; transition:color 220ms ease; } .foot-links a:hover{ color:#fff; } .foot-links a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } .foot-base{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--border); font-size:12px; color:var(--muted-2); } .foot-legal{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px; } .foot-credit a{ color:var(--muted); border-bottom:1px solid rgba(139,149,169,0.32); transition:color 220ms ease, border-color 220ms ease; } .foot-credit a:hover{ color:var(--cyan); border-color:var(--cyan); } .foot-credit a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } .foot-top-link{ font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); transition:color 220ms ease; } .foot-top-link:hover{ color:#fff; } .foot-top-link:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } @media (max-width:900px){ .foot-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .foot-brand-col{ grid-column:1 / -1; } } @media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; gap:28px; } } /* below-fold reveal (IntersectionObserver) */ .js .reveal-io{ opacity:0; transform:translateY(16px); } .js .reveal-io.in{ opacity:1; transform:none; transition:opacity 430ms ease, transform 430ms ease; } /* short viewports: shrink the hero stack so nothing clips */ @media (max-height:820px){ .hero-content{ padding:48px 0 36px; } } @media (max-height:700px){ .hero-content{ padding:24px 0 18px; } .hero h1{ font-size:clamp(1.85rem, 4.3vw, 2.6rem); } .hero h1{ margin-top:16px; } .hero-eyebrow{ font-size:11px; } .hero-desc{ margin-top:14px; font-size:14px; } .hero-actions{ margin-top:22px; } .hero-actions .btn{ padding:12px 22px; } .hero-base-inner{ padding-top:14px; margin-top:24px; } }