/* ============================================================================ I ZONE ELECTROMECHANICAL CONTRACTORS LLC (IZEC) Design system — 2026 rebuild Palette derived from the company mark: navy #052E66 / signal red #DB0100 Type: DM Sans (variable) for everything, system mono for instrument type ========================================================================== */ /* ---------- 1. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, svg, video, iframe { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; } /* inline icons: never allowed to size themselves */ .ico { width: 1em; height: 1em; flex: none; } .btn .ico, .tlink .ico, .maplink .ico { width: 14px; height: 14px; } @font-face { font-family: 'DM Sans'; src: url('/media/fonts/dm-sans-variable.ttf') format('truetype'); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('/media/fonts/dm-sans-italic-variable.ttf') format('truetype'); font-weight: 100 1000; font-style: italic; font-display: swap; } /* ---------- 2. TOKENS ---------- */ :root { /* colour */ --ink: #0B1B33; --navy: #052E66; --navy-deep: #041C3E; --navy-mid: #0B3A79; --navy-lift: #1B559B; --signal: #DB0100; --paper: #F2F4F7; --paper-2: #E9ECF1; --surface: #FFFFFF; --panel: #E4E8EE; --line: #D1D7E0; --line-soft: #E2E6EC; --line-dark: rgba(255,255,255,.14); --line-dark-2:rgba(255,255,255,.07); --slate: #4A5468; --slate-2: #5F6B82; --on-dark: rgba(255,255,255,.72); --on-dark-2: rgba(255,255,255,.44); /* type */ --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* metrics */ --gutter: clamp(20px, 4.4vw, 76px); --maxw: 1600px; --hdr-h: 84px; --sec-y: clamp(68px, 8.5vw, 132px); --r: 3px; --ease: cubic-bezier(.22,.61,.36,1); } @media (max-width: 900px) { :root { --hdr-h: 68px; } } /* ---------- 3. BASE ---------- */ body { font-family: var(--sans); font-size: 17px; line-height: 1.68; font-weight: 400; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: var(--navy); color: #fff; } :focus-visible { outline: 2px solid var(--navy-lift); outline-offset: 3px; border-radius: 2px; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .sec { padding-block: var(--sec-y); } .sec--tight { padding-block: clamp(52px, 6vw, 92px); } .rule-top { border-top: 1px solid var(--line); } /* type utilities */ .d1 { font-size: clamp(2.55rem, 6.1vw, 5.1rem); font-weight: 600; line-height: .99; letter-spacing: -.038em; text-wrap: balance; } .d2 { font-size: clamp(1.95rem, 3.5vw, 3.15rem); font-weight: 600; line-height: 1.05; letter-spacing: -.032em; text-wrap: balance; } .d3 { font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 600; line-height: 1.16; letter-spacing: -.024em; } .lead { font-size: clamp(1.02rem, 1.25vw, 1.22rem); line-height: 1.62; font-weight: 350; color: var(--slate); max-width: 62ch; } .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; } .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--navy); display: inline-flex; align-items: center; gap: .7em; } .tag::before { content: ''; width: 18px; height: 2px; background: var(--signal); flex: none; } .tag--light { color: rgba(255,255,255,.74); } .copy p { color: var(--slate); } .copy p + p { margin-top: 1.05em; } .copy strong { color: var(--ink); font-weight: 550; } .copy--dark p { color: var(--on-dark); } .copy--dark strong { color: #fff; font-weight: 500; } /* section head */ .head { display: grid; gap: 1.15rem; } .head .lead { margin-top: .2rem; } .head-row--mid { align-items: center; } .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap; } /* buttons */ .btn { display: inline-flex; align-items: center; gap: .7em; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .95rem 1.5rem; border-radius: var(--r); background: var(--navy); color: #fff; border: 1px solid var(--navy); transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); cursor: pointer; } .btn:hover { background: var(--navy-lift); border-color: var(--navy-lift); } .btn--ghost { background: transparent; color: var(--navy); } .btn--ghost:hover { background: var(--navy); color: #fff; } .btn--onDark { background: #fff; color: var(--navy); border-color: #fff; } .btn--onDark:hover { background: var(--signal); border-color: var(--signal); color: #fff; } .btn--outlineDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); } .btn--outlineDark:hover { background: #fff; color: var(--navy); border-color: #fff; } .btn .arw { transition: transform .22s var(--ease); } .btn:hover .arw { transform: translateX(4px); } .tlink { display: inline-flex; align-items: center; gap: .55em; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--navy); text-decoration: none; padding-bottom: .3rem; border-bottom: 1px solid var(--line); transition: border-color .22s var(--ease), color .22s var(--ease); } .tlink:hover { color: var(--signal); border-color: var(--signal); } .tlink .arw { transition: transform .22s var(--ease); } .tlink:hover .arw { transform: translateX(4px); } .tlink--light { color: #fff; border-color: rgba(255,255,255,.28); } .tlink--light:hover { color: #fff; border-color: #fff; } /* ---------- 4. HEADER ---------- */ .hdr { position: fixed; inset: 0 0 auto; z-index: 300; height: var(--hdr-h); display: flex; align-items: center; transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .hdr-in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); } .brand { flex: none; display: block; line-height: 0; } .brand img { height: clamp(40px, 4.2vw, 58px); width: auto; } .brand .mark-rev { display: block; } .brand .mark-pos { display: none; } .hdr.is-solid .brand .mark-rev { display: none; } .hdr.is-solid .brand .mark-pos { display: block; } .nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); } .nav > li { list-style: none; position: relative; } .nav a { font-size: 13.5px; font-weight: 450; letter-spacing: .01em; text-decoration: none; color: var(--on-dark); padding: .5rem 0; display: inline-flex; align-items: center; gap: .4em; transition: color .2s var(--ease); position: relative; } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease); } .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); } .nav a:hover { color: #fff; } .hdr.is-solid .nav a { color: var(--slate); } .hdr.is-solid .nav a:hover, .hdr.is-solid .nav a[aria-current] { color: var(--ink); } .nav a[aria-current] { color: #fff; } .nav .caret { width: 8px; height: 8px; opacity: .6; } /* dropdown */ .dd { position: absolute; top: calc(100% + 14px); left: -18px; min-width: 268px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 22px 54px rgba(6,25,55,.14); padding: .45rem; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } .has-dd:hover .dd, .has-dd:focus-within .dd { opacity: 1; visibility: visible; transform: none; } .dd::before { content: ''; position: absolute; inset: -16px 0 100% 0; } .dd li { list-style: none; } .dd a { display: block; padding: .7rem .85rem; font-size: 14px; color: var(--slate); border-radius: 2px; transition: background .18s, color .18s; } .dd a::after { display: none; } .hdr .dd a:hover { background: var(--paper-2); color: var(--ink); } .hdr-act { display: flex; align-items: center; gap: 1.1rem; flex: none; } .hdr-tel { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-decoration: none; color: var(--on-dark-2); white-space: nowrap; transition: color .2s; } .hdr-tel:hover { color: #fff; } .hdr.is-solid .hdr-tel { color: var(--slate-2); } .hdr.is-solid .hdr-tel:hover { color: var(--navy); } .hdr-cta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .72rem 1.15rem; border-radius: var(--r); border: 1px solid rgba(255,255,255,.34); color: #fff; transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); white-space: nowrap; } .hdr-cta:hover { background: #fff; color: var(--navy); border-color: #fff; } .hdr.is-solid .hdr-cta { border-color: var(--navy); color: #fff; background: var(--navy); } .hdr.is-solid .hdr-cta:hover { background: var(--signal); border-color: var(--signal); } .hdr.is-drawer, .hdr.is-drawer.is-solid { background: transparent; border-bottom-color: transparent; backdrop-filter: none; } .hdr.is-drawer .brand .mark-rev { display: block; } .hdr.is-drawer .brand .mark-pos { display: none; } /* over the navy drawer the chrome must read light, whatever the page state */ .hdr.is-drawer .burger span, .hdr.is-solid .burger[aria-expanded="true"] span { background: #fff; } .hdr.is-drawer .hdr-cta, .hdr.is-drawer.is-solid .hdr-cta { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); } .hdr.is-drawer .hdr-cta:hover { background: #fff; color: var(--navy); border-color: #fff; } .hdr.is-solid { background: rgba(242,244,247,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } /* burger */ .burger { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; position: relative; flex: none; } .burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform .3s var(--ease), opacity .2s; } .burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 27px; } .hdr.is-solid .burger span { background: var(--ink); } .burger[aria-expanded="true"] span { background: #fff; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 290; background: var(--navy-deep); padding: calc(var(--hdr-h) + 18px) var(--gutter) 2rem; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; } .drawer.is-open { opacity: 1; visibility: visible; transform: none; } .drawer ul { list-style: none; } .drawer > ul > li { border-bottom: 1px solid var(--line-dark-2); } .drawer > ul > li > a { display: block; padding: 1.05rem 0; font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; color: #fff; text-decoration: none; } .drawer .sub { padding: 0 0 .9rem .1rem; display: grid; gap: .1rem; } .drawer .sub a { display: block; padding: .5rem 0; font-size: 14.5px; color: var(--on-dark-2); text-decoration: none; } .drawer .sub a:hover { color: #fff; } .drawer-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .9rem; } .drawer-foot .mono { color: var(--on-dark-2); } .drawer-foot a.big { font-size: 1.15rem; color: #fff; text-decoration: none; font-weight: 500; letter-spacing: -.01em; } body.is-locked { overflow: hidden; } /* ---------- 5. HERO ---------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--navy-deep); overflow: hidden; isolation: isolate; } .hero-stage { position: absolute; inset: 0; z-index: 0; } .hero-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 7s linear; } .hero-stage img.is-active { opacity: .58; transform: scale(1); } .hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(4,20,42,.94) 0%, rgba(4,20,42,.55) 34%, rgba(4,20,42,.28) 62%, rgba(4,20,42,.62) 100%), linear-gradient(to right, rgba(4,20,42,.62) 0%, rgba(4,20,42,0) 62%); } .hero-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%); } .hero-body { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-end; padding-top: calc(var(--hdr-h) + 3rem); padding-bottom: clamp(2.2rem, 4vw, 3.4rem); } .hero-in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .hero-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: clamp(1.2rem, 2.5vw, 2rem); } .hero-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--signal); flex: none; } .hero h1 { color: #fff; max-width: 15ch; text-wrap: balance; font-size: clamp(2.5rem, 5.6vw, 4.9rem); font-weight: 600; line-height: 1.0; letter-spacing: -.04em; } .hero h1 .thin { font-weight: 300; color: rgba(255,255,255,.62); } .hero-sub { margin-top: clamp(1.2rem, 2vw, 1.8rem); max-width: 54ch; font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.65; font-weight: 350; color: rgba(255,255,255,.7); } .hero-cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; gap: .7rem; flex-wrap: wrap; } /* slide register bar */ .hero-reg { position: relative; z-index: 2; border-top: 1px solid var(--line-dark); background: rgba(4,18,38,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero-reg-in { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); min-height: 76px; } .hero-reg-ref { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--signal); flex: none; } .hero-reg-meta { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; } .hero-reg-name { font-size: clamp(.95rem, 1.15vw, 1.08rem); font-weight: 500; color: #fff; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(52vw, 620px); } .hero-reg-loc { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); } .hero-reg-ctrl { display: flex; align-items: center; gap: .35rem; flex: none; } .hero-reg-btn { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); background: transparent; border-radius: 50%; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; } .hero-reg-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); } .hero-reg-btn svg { width: 15px; height: 15px; } .hero-prog { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--signal); width: 0; transition: width .25s linear; } /* ---------- 6. STAT RAIL ---------- */ .rail { background: var(--navy); border-block: 1px solid rgba(255,255,255,.08); } .rail-in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); } .rail-cell { padding: clamp(1.7rem, 3vw, 2.6rem) clamp(.6rem, 2vw, 2rem) clamp(1.7rem, 3vw, 2.6rem) 0; border-left: 1px solid rgba(255,255,255,.1); padding-left: clamp(1rem, 2vw, 2rem); } .rail-cell:first-child { border-left: 0; padding-left: 0; } .rail-n { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; color: #fff; } .rail-n sup { font-size: .42em; font-weight: 500; color: var(--signal); top: -.85em; } .rail-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-top: .7rem; line-height: 1.5; } /* ---------- 7. LEDE / ABOUT ---------- */ .lede-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: clamp(2.4rem, 5vw, 6rem); align-items: start; } .lede-copy { margin-top: 1.8rem; font-size: 1.02rem; } .lede-copy p { line-height: 1.78; } .lede-actions { margin-top: 2.2rem; display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; } .pillars { display: grid; } .pillar { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); } .pillar:last-child { border-bottom: 1px solid var(--line); } .pillar-ico { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--navy); background: var(--surface); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .pillar:hover .pillar-ico { background: var(--navy); color: #fff; border-color: var(--navy); } .pillar-ico svg { width: 18px; height: 18px; } .pillar-h { font-size: 1.02rem; font-weight: 550; letter-spacing: -.012em; } .pillar-b { font-size: 14.8px; line-height: 1.65; color: var(--slate); margin-top: .35rem; } /* ---------- 8. CAPABILITIES ---------- */ .cap { background: var(--navy-deep); color: #fff; } .cap .lead { color: var(--on-dark); } .cap-grid { margin-top: clamp(2.4rem, 4vw, 3.6rem); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: stretch; } .cap-list { border-top: 1px solid var(--line-dark); align-self: start; } .cap-item { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-dark); padding: clamp(1.15rem, 2vw, 1.6rem) 0; cursor: pointer; display: grid; gap: .45rem; transition: padding-left .3s var(--ease); position: relative; } .cap-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--ease); } .cap-item.is-on { padding-left: 1.15rem; } .cap-item.is-on::before { transform: scaleY(1); } .cap-name { font-size: clamp(1.1rem, 1.55vw, 1.42rem); font-weight: 500; letter-spacing: -.022em; color: rgba(255,255,255,.5); transition: color .25s var(--ease); display: flex; align-items: baseline; gap: .8rem; } .cap-item:hover .cap-name, .cap-item.is-on .cap-name { color: #fff; } .cap-body { color: var(--on-dark); font-size: 15px; line-height: 1.7; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s var(--ease), opacity .3s var(--ease); } .cap-body > div { overflow: hidden; } .cap-item.is-on .cap-body { grid-template-rows: 1fr; opacity: 1; } .cap-body p { padding-top: .55rem; max-width: 56ch; } .cap-tags { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .95rem; } .cap-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: .32rem .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; color: rgba(255,255,255,.66); } .cap-stage { position: relative; height: 100%; min-height: 420px; border-radius: var(--r); overflow: hidden; background: #071B39; border: 1px solid var(--line-dark); } .cap-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.2s var(--ease); } .cap-stage img.is-on { opacity: .92; transform: scale(1); } .cap-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,20,42,.6), rgba(4,20,42,0) 55%); pointer-events: none; } /* ---------- 9. FEATURED PROJECTS ---------- */ .feat { margin-top: clamp(2.2rem, 4vw, 3.4rem); display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: repeat(6, 1fr); } .feat > a:nth-child(1) { grid-column: span 6; } .feat > a:nth-child(2), .feat > a:nth-child(3) { grid-column: span 3; } .pcard { text-decoration: none; display: block; color: inherit; } .pcard-img { position: relative; overflow: hidden; border-radius: var(--r); background: var(--paper-2); aspect-ratio: 4/3; } .feat > a:nth-child(1) .pcard-img { aspect-ratio: 21/9; } .pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s var(--ease); } .pcard:hover .pcard-img img { transform: scale(1.045); } .pcard-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,20,42,.5), rgba(4,20,42,0) 52%); opacity: .8; transition: opacity .4s; } .pcard-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 2px; background: rgba(255,255,255,.92); color: var(--navy); font-weight: 600; } .pcard-badge.is-live { background: var(--signal); color: #fff; } .pcard-info { padding-top: 1.05rem; display: grid; gap: .4rem; } .pcard-scope { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); } .pcard-name { font-size: clamp(1.05rem, 1.35vw, 1.35rem); font-weight: 550; letter-spacing: -.022em; line-height: 1.25; transition: color .2s; } .pcard:hover .pcard-name { color: var(--navy-lift); } .pcard-loc { font-size: 14px; color: var(--slate); } /* ---------- 10. PROJECT REGISTER (signature) ---------- */ .reg-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: clamp(2rem, 3.5vw, 3rem); padding-bottom: .9rem; border-bottom: 1px solid var(--ink); } .reg-count { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); } .reg-count b { color: var(--ink); font-weight: 600; } .vswitch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); } .vswitch button { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: .58rem 1rem; background: none; border: 0; cursor: pointer; color: var(--slate); display: inline-flex; align-items: center; gap: .5em; transition: background .2s, color .2s; } .vswitch button + button { border-left: 1px solid var(--line); } .vswitch button[aria-pressed="true"] { background: var(--ink); color: #fff; } .vswitch svg { width: 13px; height: 13px; } .reg { width: 100%; } .reg-row { display: grid; grid-template-columns: 58px minmax(0,2.6fr) minmax(0,1.25fr) minmax(0,1.35fr) minmax(0,1.4fr) 108px 28px; align-items: center; gap: 1rem; padding: 1.02rem .6rem 1.02rem 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; transition: background .22s var(--ease), padding-left .28s var(--ease); position: relative; } .reg-head { font-family: var(--mono); font-size: 9.8px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); padding-block: .7rem; border-bottom: 1px solid var(--line); } .reg-row:not(.reg-head):hover { background: var(--surface); padding-left: .85rem; } .reg-row:not(.reg-head)::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--signal); transform: scaleY(0); transition: transform .26s var(--ease); } .reg-row:not(.reg-head):hover::before { transform: scaleY(1); } .reg-no { font-family: var(--mono); font-size: 11px; color: var(--slate-2); letter-spacing: .06em; } .reg-name { font-size: 15.6px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; } .reg-cell { font-size: 13.6px; color: var(--slate); line-height: 1.4; } .reg-status { justify-self: start; } .pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 2px; border: 1px solid var(--line); color: var(--slate); white-space: nowrap; background: var(--surface); } .pill--live { border-color: rgba(219,1,0,.3); color: var(--signal); background: rgba(219,1,0,.05); } .reg-go { color: var(--slate-2); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; } .reg-row:hover .reg-go { opacity: 1; transform: none; color: var(--navy); } .reg-go svg { width: 15px; height: 15px; } .reg-thumb { display: none; } /* cursor-following preview */ .peek { position: fixed; z-index: 400; width: 288px; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; pointer-events: none; box-shadow: 0 24px 60px rgba(4,20,42,.3); opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .22s var(--ease), transform .28s var(--ease); border: 1px solid rgba(255,255,255,.5); } .peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); } .peek img { width: 100%; height: 100%; object-fit: cover; } /* grid view */ .pgrid { display: grid; gap: clamp(1.1rem, 2vw, 1.9rem) clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); margin-top: 2rem; } .is-hidden { display: none !important; } /* filters */ .filters { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: grid; gap: 1rem; } .frow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .frow-l { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin-right: .4rem; min-width: 54px; } .chip { font-size: 13px; font-weight: 450; padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--slate); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } .chip:hover { border-color: var(--navy); color: var(--ink); } .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; } .chip .n { font-family: var(--mono); font-size: 10px; opacity: .6; margin-left: .45em; } .empty { padding: 3.5rem 0; text-align: center; color: var(--slate); border-bottom: 1px solid var(--line-soft); } /* ---------- 11. SEQUENCE ---------- */ .seq { --seq-pad: clamp(1.3rem, 1.9vw, 1.75rem); margin-top: clamp(2.2rem, 4vw, 3.4rem); display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r); } .seq-step { display: flex; flex-direction: column; padding: var(--seq-pad); border-left: 1px solid var(--line); transition: background .28s var(--ease); } .seq-step:first-child { border-left: 0; } .seq-step:hover { background: var(--surface); } .seq-n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--signal); } .seq-ico { color: var(--navy); margin: 1.15rem 0 1.25rem; } .seq-ico .ico { width: 42px; height: 42px; } .seq-h { font-size: clamp(1rem, 1.15vw, 1.1rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.22; margin-bottom: .55rem; } .seq-b { font-size: 13.8px; line-height: 1.62; color: var(--slate); } /* step 05 carries the CTA, so it sits slightly forward of the rest */ .seq-step--lead { border: 1px solid var(--ink); border-radius: var(--r); margin: -12px -1px; background: var(--surface); box-shadow: 0 14px 34px rgba(6,25,55,.11); position: relative; z-index: 1; } .seq-step--lead:hover { background: var(--surface); } .seq-cta { margin: auto calc(var(--seq-pad) * -1) 0; padding: 1rem var(--seq-pad) 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .9rem; font-size: 13.6px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); text-decoration: none; line-height: 1.25; } .seq-cta .ico { width: 22px; height: 22px; color: var(--signal); } .seq-arw { display: flex; flex: none; transition: transform .22s var(--ease); } .seq-cta:hover .seq-arw { transform: translateX(4px); } .seq-foot { margin-top: clamp(1.7rem, 2.8vw, 2.4rem); text-align: center; font-size: 15px; color: var(--slate); font-weight: 350; } [data-theme="dark"] .seq-ico { color: var(--navy-lift); } [data-theme="dark"] .seq-step--lead { box-shadow: 0 14px 34px rgba(0,0,0,.45); } /* ---------- 12. GALLERY SCROLLER ---------- */ .scroller { margin-top: clamp(2rem, 3.5vw, 3rem); display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); padding-bottom: 1.4rem; /* without this, snapping aligns the first card to the container edge and scrolls straight past the gutter, clipping image one */ scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--line) transparent; cursor: grab; } .scroller.is-drag { cursor: grabbing; scroll-snap-type: none; } .scroller.is-wheel { scroll-snap-type: none; scroll-behavior: auto; } .scroller::-webkit-scrollbar { height: 3px; } .scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .shot { flex: 0 0 auto; width: clamp(232px, 27vw, 400px); aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; background: var(--paper-2); position: relative; } .shot:nth-child(4n+2) { aspect-ratio: 3/4; width: clamp(190px, 20vw, 300px); } .shot img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .8s var(--ease), filter .4s; filter: saturate(.94); } .shot:hover img { transform: scale(1.05); filter: saturate(1.06); } /* ---------- 13. CREDENTIALS ---------- */ .creds-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; margin-top: clamp(2rem, 3.5vw, 3rem); } .acc-list { display: grid; } .acc { display: flex; gap: .9rem; align-items: baseline; padding: .82rem 0; border-top: 1px solid var(--line-soft); font-size: 15.2px; } .acc:last-child { border-bottom: 1px solid var(--line-soft); } .acc::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); flex: none; transform: translateY(-3px); } .certstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .certcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; aspect-ratio: 3/4; display: grid; place-items: center; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; overflow: hidden; } .certcard:hover { box-shadow: 0 16px 38px rgba(6,25,55,.12); transform: translateY(-3px); border-color: var(--navy); } .certcard img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; } /* ---------- 14. CONTACT ---------- */ .contact { background: var(--navy-deep); color: #fff; } .contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(2.2rem, 4vw, 4.5rem); align-items: start; margin-top: clamp(2.2rem, 4vw, 3.2rem); } .offices { display: grid; } .office { padding: 1.4rem 0; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 1.2rem; } .offices .office:last-child { border-bottom: 1px solid var(--line-dark); } .office-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.42); padding-top: .2rem; line-height: 1.5; } .office-v { font-size: 15px; line-height: 1.65; color: var(--on-dark); } .office-v a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .office-v a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.45); } .office-v .strongline { color: #fff; font-weight: 500; } .mapbox { border: 1px solid var(--line-dark); border-radius: var(--r); overflow: hidden; background: #06203F; } .maptabs { display: flex; border-bottom: 1px solid var(--line-dark); } .maptab { flex: 1; background: none; border: 0; cursor: pointer; padding: .95rem 1rem; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); transition: color .2s, background .2s; position: relative; } .maptab + .maptab { border-left: 1px solid var(--line-dark); } .maptab[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.05); } .maptab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--signal); } .mapframe { position: relative; aspect-ratio: 16/11; } .mapframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; visibility: hidden; filter: grayscale(.35) contrast(1.05); } .mapframe iframe.is-on { opacity: 1; visibility: visible; } .maplink { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.15rem; border-top: 1px solid var(--line-dark); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); text-decoration: none; transition: color .2s, background .2s; } .maplink:hover { color: #fff; background: rgba(255,255,255,.04); } /* ---------- 15. CTA BAND ---------- */ .cta { background: var(--navy); color: #fff; padding-block: clamp(3.2rem, 6vw, 5.4rem); position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(90% 120% at 80% 50%, #000, transparent 72%); -webkit-mask-image: radial-gradient(90% 120% at 80% 50%, #000, transparent 72%); } .cta-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem clamp(2rem, 5vw, 5rem); flex-wrap: wrap; } .cta h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 600; letter-spacing: -.032em; line-height: 1.1; max-width: 20ch; } .cta p { color: var(--on-dark-2); margin-top: .8rem; max-width: 46ch; font-size: 15.4px; } .cta-acts { display: flex; gap: .7rem; flex-wrap: wrap; } /* ---------- 16. FOOTER ---------- */ .foot { background: var(--navy-deep); color: #fff; padding-block: clamp(3rem, 5vw, 4.4rem) 0; } .foot-top { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(2.4rem, 4vw, 3.4rem); border-bottom: 1px solid var(--line-dark-2); } .foot-brand img { height: 46px; width: auto; } .foot-tagline { font-size: 14.6px; color: var(--on-dark-2); margin-top: 1.2rem; max-width: 34ch; line-height: 1.7; } .foot-h { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.34); margin-bottom: 1.05rem; } .foot-col ul { list-style: none; display: grid; gap: .55rem; } .foot-col a { font-size: 14.4px; color: var(--on-dark); text-decoration: none; transition: color .2s; } .foot-col a:hover { color: #fff; } .foot-col p { font-size: 14.4px; color: var(--on-dark); line-height: 1.7; } .foot-bot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.5rem 1.8rem; } .foot-bot, .foot-bot a { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); text-decoration: none; } .foot-bot a:hover { color: rgba(255,255,255,.7); } .foot-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; } /* ---------- 17. INTERIOR PAGE HERO ---------- */ .phero { position: relative; background: var(--navy-deep); color: #fff; isolation: isolate; padding-top: calc(var(--hdr-h) + clamp(3rem, 6vw, 5.5rem)); padding-bottom: clamp(2.6rem, 5vw, 4.4rem); overflow: hidden; } .phero-bg { position: absolute; inset: 0; z-index: -2; } .phero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: .42; } .phero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,20,42,.95) 4%, rgba(4,20,42,.55) 52%, rgba(4,20,42,.5) 100%), linear-gradient(to right, rgba(4,20,42,.7), rgba(4,20,42,.1) 70%); } .phero--plain { padding-bottom: clamp(2.2rem, 4vw, 3.4rem); } .phero--plain::after { background: linear-gradient(to bottom right, #04203F, #041C3E 65%); } .crumb { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: clamp(1.4rem, 3vw, 2.4rem); } .crumb a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; } .crumb a:hover { color: #fff; } .crumb .sep { color: rgba(255,255,255,.24); } .crumb .cur { color: #fff; } .phero h1 { font-size: clamp(2.05rem, 4.6vw, 3.9rem); font-weight: 600; line-height: 1.03; letter-spacing: -.038em; max-width: 20ch; text-wrap: balance; } .phero h1 .thin { font-weight: 300; color: rgba(255,255,255,.6); } .phero-meta { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 62ch; font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.65; font-weight: 350; color: rgba(255,255,255,.68); } .phero-meta strong { color: #fff; font-weight: 500; } .phero-facts { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-wrap: wrap; gap: .6rem 2.6rem; } .phero-fact { display: grid; gap: .25rem; } .phero-fact .l { font-family: var(--mono); font-size: 9.6px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); } .phero-fact .v { font-size: 14.6px; color: #fff; font-weight: 450; } /* ---------- 18. PROJECT DETAIL ---------- */ .pd-grid { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } .spec { position: sticky; top: calc(var(--hdr-h) + 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.5rem .4rem; } .spec-h { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .spec-row { padding: .95rem 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: .2rem; } .spec-row:last-of-type { border-bottom: 0; } .spec-l { font-family: var(--mono); font-size: 9.6px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); } .spec-v { font-size: 15.2px; line-height: 1.45; font-weight: 450; } .spec-cta { border-top: 1px solid var(--line); margin: .4rem -1.5rem 0; padding: 1.1rem 1.5rem; } .pgal { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .pgal-item { position: relative; overflow: hidden; border-radius: var(--r); background: var(--paper-2); aspect-ratio: 4/3; } .pgal-item.is-wide { grid-column: span 2; aspect-ratio: 16/9; } .pgal-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .8s var(--ease); } .pgal-item:hover img { transform: scale(1.04); } .pgal-item video { width: 100%; height: 100%; object-fit: cover; background: #000; } .pgal-count { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin-bottom: .9rem; } /* prev / next */ .pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); } .pn-cell { background: var(--paper); text-decoration: none; color: inherit; padding: clamp(1.6rem, 3vw, 2.4rem) 0; display: grid; gap: .5rem; transition: background .25s var(--ease); position: relative; } .pn-cell > * { padding-inline: var(--gutter); } .pn-cell:hover { background: var(--surface); } .pn-cell.next { text-align: right; } .pn-dir { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); } .pn-name { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 550; letter-spacing: -.022em; line-height: 1.25; } .pn-cell.disabled { opacity: .4; pointer-events: none; } /* ---------- 19. GALLERY / CERT PAGES ---------- */ .masonry { columns: 4; column-gap: 10px; } .masonry .mitem { break-inside: avoid; margin-bottom: 10px; border-radius: var(--r); overflow: hidden; background: var(--paper-2); position: relative; } .masonry .mitem img { width: 100%; height: auto; cursor: zoom-in; transition: transform .8s var(--ease), filter .4s; filter: saturate(.94); } .masonry .mitem:hover img { transform: scale(1.035); filter: saturate(1.08); } .certgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.6vw, 1.4rem); } /* ---------- 20. LIGHTBOX ---------- */ .lb { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 5vh 4vw; background: rgba(4,14,30,.96); opacity: 0; pointer-events: none; transition: opacity .26s var(--ease); } .lb.is-open { opacity: 1; pointer-events: auto; } .lb img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 2px; transform: scale(.97); transition: transform .26s var(--ease); } .lb.is-open img { transform: none; } .lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; } .lb-btn:hover { background: rgba(255,255,255,.2); } .lb-btn svg { width: 18px; height: 18px; } .lb-close { top: 20px; right: 22px; } .lb-prev { left: 22px; top: 50%; transform: translateY(-50%); } .lb-next { right: 22px; top: 50%; transform: translateY(-50%); } .lb-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); } /* ---------- 21. LOADER ---------- */ .loader { position: fixed; inset: 0; z-index: 900; background: var(--navy-deep); display: grid; place-items: center; transition: opacity .45s var(--ease), visibility .45s; /* FAIL-SAFE: clears itself even if the script never runs, so a blocked or failed JS request can never leave the visitor on a blank screen. */ animation: loaderFailsafe .5s var(--ease) 2.2s forwards; } @keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .loader.is-out { opacity: 0; visibility: hidden; pointer-events: none; } .loader-in { display: grid; justify-items: center; gap: 1.4rem; } .loader-in img { width: min(268px, 64vw); height: auto; /* the artwork has ~30% transparent padding baked in above/below the mark, so the gap to the bar reads much wider than the bar-to-label gap below it; this cancels that padding to make both gaps match visually. */ margin-bottom: calc(min(268px, 64vw) * -0.108); } .loader-bar { width: min(268px, 64vw); height: 1px; background: rgba(255,255,255,.16); overflow: hidden; } .loader-bar::after { content: ''; display: block; width: 40%; height: 100%; background: var(--signal); animation: sweep 1.05s var(--ease) infinite; } @keyframes sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } } .loader-lbl { font-family: var(--mono); font-size: 9.6px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); } /* ---------- 22. 404 ---------- */ .err { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--hdr-h) + 4rem) var(--gutter) 4rem; background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; } .err::before { content: ''; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 76%); -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 76%); } .err-in { position: relative; max-width: 640px; } .err-code { font-size: clamp(5rem, 16vw, 10rem); font-weight: 600; letter-spacing: -.06em; line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); } .err h1 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; margin-top: 1.6rem; } .err p { color: var(--on-dark-2); margin-top: 1rem; } .err-acts { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; } /* ---------- 23. LONGFORM ---------- */ .prose { max-width: 74ch; } .prose p { color: var(--slate); line-height: 1.85; } .prose p + p { margin-top: 1.15em; } .prose strong { color: var(--ink); font-weight: 550; } .prose h2 { font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; margin-top: 2.4rem; margin-bottom: .7rem; color: var(--ink); } .prose h2:first-child { margin-top: 0; } .prose a { color: var(--navy); } .sig { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .sig-name { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; } .sig-role { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); margin-top: .5rem; font-weight: 500; } .sig-regards { font-size: 1rem; color: var(--slate); margin-bottom: 1.3rem; } .hi { color: var(--navy); font-weight: 600; } .split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem, 4vw, 4rem); } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.6rem, 2.6vw, 2.4rem); } .panel-h { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin-bottom: 1rem; } /* sector / standards cards */ .cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); } .cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .card { position: relative; overflow: hidden; border-radius: var(--r); min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.3rem, 2vw, 1.8rem); color: #fff; isolation: isolate; background: var(--navy-deep); } .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); opacity: .55; } .card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,20,42,.94) 8%, rgba(5,46,102,.6) 55%, rgba(5,46,102,.35) 100%); } .card:hover img { transform: scale(1.06); } .card-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--signal); margin-bottom: .6rem; } .card-h { font-size: 1.1rem; font-weight: 550; letter-spacing: -.02em; line-height: 1.25; } .card-b { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin-top: .5rem; } .card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .9rem; } .card-tag { font-family: var(--mono); font-size: 9.4px; letter-spacing: .1em; text-transform: uppercase; padding: .28rem .5rem; border: 1px solid rgba(255,255,255,.24); border-radius: 2px; color: rgba(255,255,255,.7); } /* values matrix */ .vals { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(.7rem, 1.2vw, 1.1rem); } .val { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.35rem 1rem; display: grid; gap: .75rem; justify-items: center; text-align: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; } .val:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(6,25,55,.1); border-color: var(--navy); } .val-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--navy); } .val-ico svg { width: 17px; height: 17px; } .val-n { font-size: 13px; font-weight: 550; line-height: 1.3; letter-spacing: -.01em; } .vals-core { grid-column: 1 / -1; background: var(--navy); color: #fff; border-radius: var(--r); padding: clamp(1.6rem, 3vw, 2.4rem); text-align: center; border: 0; display: grid; gap: .35rem; place-items: center; } .vals-core .k { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -.03em; } .vals-core .s { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); } /* areas strip */ .areas { background: var(--panel); color: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(1.4rem, 2.4vw, 2rem); } .areas-in { display: flex; align-items: center; gap: 1rem 2.4rem; flex-wrap: wrap; } .areas-l { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); } .areas-list { display: flex; align-items: center; gap: .8rem 1.6rem; flex-wrap: wrap; } .areas-list span { font-size: 14.5px; color: var(--slate); } .areas-list i { width: 3px; height: 3px; border-radius: 50%; background: var(--signal); display: block; } /* ---------- 24. REVEAL ---------- */ .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .rv.in { opacity: 1; transform: none; } .rv-d1 { transition-delay: .06s; } .rv-d2 { transition-delay: .12s; } .rv-d3 { transition-delay: .18s; } .rv-d4 { transition-delay: .24s; } @keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .hero-in > * { animation: riseIn .9s var(--ease) both; } .hero-in > .hero-eyebrow { animation-delay: .1s; } .hero-in > h1 { animation-delay: .2s; } .hero-in > .hero-sub { animation-delay: .34s; } .hero-in > .hero-cta { animation-delay: .46s; } /* ---------- 25. RESPONSIVE ---------- */ @media (max-width: 1280px) { .reg-row { grid-template-columns: 46px minmax(0,2.5fr) minmax(0,1.2fr) minmax(0,1.35fr) 104px 26px; } .reg-client { display: none; } .masonry { columns: 3; } } @media (max-width: 1080px) { .nav, .hdr-tel { display: none; } .burger { display: block; } .hdr-act { gap: .6rem; } .lede-grid { grid-template-columns: 1fr; gap: 2.6rem; } .cap-grid { grid-template-columns: 1fr; } .cap-stage { order: -1; height: auto; min-height: clamp(230px, 66vw, 340px); aspect-ratio: 4/3; } .creds-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .seq { grid-template-columns: repeat(2, 1fr); } .seq-step { border-top: 1px solid var(--line); } .seq-step:nth-child(-n+2) { border-top: 0; } .seq-step:nth-child(odd) { border-left: 0; } .seq-step--lead { grid-column: 1 / -1; margin: -1px; } .pd-grid { grid-template-columns: 1fr; } .spec { position: relative; top: 0; } .foot-top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.4rem; } .cards, .cards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .vals { grid-template-columns: repeat(3, minmax(0,1fr)); } .certstrip { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 860px) { .rail-in { grid-template-columns: repeat(2, 1fr); } .rail-cell { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.4rem; } .rail-cell:nth-child(-n+2) { border-top: 0; } .rail-cell:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid rgba(255,255,255,.1); } .feat > a:nth-child(n) { grid-column: span 6; } .feat > a:nth-child(1) .pcard-img { aspect-ratio: 16/10; } .certgrid { grid-template-columns: repeat(2, 1fr); } .masonry { columns: 2; } .split { grid-template-columns: 1fr; } .pn { grid-template-columns: 1fr; } .pn-cell.next { text-align: left; } .office { grid-template-columns: 1fr; gap: .45rem; } .peek { display: none !important; } } @media (max-width: 720px) { body { font-size: 16px; } .hero { min-height: 100svh; } .hero-body { padding-top: calc(var(--hdr-h) + 2rem); } .hero h1 { font-size: clamp(2.9rem, 12.5vw, 3.7rem); max-width: 12ch; } .hero-sub { font-size: 1rem; max-width: 40ch; } .hero-stage img { object-position: center 38%; } .hero-reg-in { min-height: 66px; flex-wrap: nowrap; } .hero-reg-loc { display: none; } .hero-reg-name { max-width: 46vw; font-size: .9rem; } .hero-reg-btn { width: 36px; height: 36px; } .seq { grid-template-columns: 1fr; } .seq-step, .seq-step:nth-child(odd) { border-left: 0; border-top: 1px solid var(--line); } .seq-step:first-child { border-top: 0; } .seq-step--lead { margin: -1px; } .seq-ico { margin: .9rem 0 1rem; } .cards, .cards--4 { grid-template-columns: 1fr; } .vals { grid-template-columns: repeat(2, minmax(0,1fr)); } .foot-top { grid-template-columns: 1fr; gap: 2rem; } .certstrip { grid-template-columns: repeat(3, 1fr); } .pgal { grid-template-columns: 1fr; } .pgal-item.is-wide { grid-column: span 1; } .pgal-item { aspect-ratio: 4/3; } /* register → stacked rows with thumbnails */ .reg-head { display: none; } .reg-row { grid-template-columns: 62px minmax(0,1fr) auto; grid-template-areas: "thumb name status" "thumb meta status"; gap: .2rem .9rem; padding: .95rem 0; align-items: center; } .reg-row:hover { padding-left: 0; } .reg-no, .reg-client { display: none; } .reg-thumb { display: block; grid-area: thumb; width: 62px; aspect-ratio: 1; border-radius: 2px; overflow: hidden; background: var(--paper-2); } .reg-thumb img { width: 100%; height: 100%; object-fit: cover; } .reg-name { grid-area: name; font-size: 15px; } .reg-sector { grid-area: meta; font-size: 12.4px; color: var(--slate-2); } .reg-sector::after { content: ' · ' attr(data-loc); } .reg-loc { display: none; } .reg-status { grid-area: status; } .reg-go { display: none; } .lb-prev { left: 10px; } .lb-next { right: 10px; } .lb-btn { width: 40px; height: 40px; } } @media (max-width: 520px) { .certgrid, .certstrip { grid-template-columns: repeat(2, 1fr); } .masonry { columns: 1; } .vals { grid-template-columns: 1fr; } .cta-in { display: grid; } .phero-facts { gap: 1rem 1.8rem; } } /* ---------- 26. MOTION PREFERENCES ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .rv { opacity: 1; transform: none; } .hero-stage img.is-active { transform: none; } } /* ---------- 27. PRINT ---------- */ @media print { .hdr, .drawer, .hero-reg, .cta, .foot, .lb, .loader, .peek { display: none !important; } body { background: #fff; color: #000; } } /* ---------- 28. ANCHOR OFFSET ---------- Fixed header would otherwise cover the top of any #-linked section. */ [id] { scroll-margin-top: calc(var(--hdr-h) + 24px); } /* ---------- 29. FINAL POLISH ---------- */ /* the interior hero already carries generous space — don't double it up */ .phero + .sec, .phero + section > .sec { padding-top: clamp(2.4rem, 4.5vw, 3.8rem); } /* project heroes: the photograph is the point, so let it read */ .phero-bg img { opacity: .55; } .phero::after { background: linear-gradient(to top, rgba(4,20,42,.94) 2%, rgba(4,20,42,.5) 55%, rgba(4,20,42,.42) 100%), linear-gradient(to right, rgba(4,20,42,.78), rgba(4,20,42,.06) 72%); } /* the gallery scroller supplies its own lower breathing room */ .sec > .scroller:last-child { margin-bottom: calc(var(--sec-y) * -0.45); } @media (max-width: 560px) { .hero-cta { display: grid; grid-template-columns: 1fr; gap: .55rem; } .hero-cta .btn { justify-content: center; } .hero-eyebrow { font-size: 10px; letter-spacing: .16em; line-height: 1.6; } .cta-acts { display: grid; grid-template-columns: 1fr; gap: .55rem; } .cta-acts .btn { justify-content: center; } } /* ---------- 30. FIXES FROM REVIEW ---------- */ @media (max-width: 1080px) { /* with the nav hidden, push Enquire + menu to the right edge */ .hdr-act { margin-left: auto; } } /* ============================================================================ 31. DARK MODE The site's identity is the navy/red mark, so dark mode keeps the same hues and only moves the ground: paper becomes deep navy, and the sections that were already dark drop further so the rhythm of the page survives. ========================================================================== */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; --ink: #E9EEF7; --navy: #1B4E96; --navy-deep: #060F22; --navy-mid: #2A63B4; --navy-lift: #4A88DD; --paper: #0B1729; --paper-2: #101E35; --surface: #122341; --panel: #16294A; --line: rgba(255,255,255,.13); --line-soft: rgba(255,255,255,.075); --slate: #A6B3C9; --slate-2: #808EA8; } /* navy reads as a button fill on light, but needs lifting when used as text */ [data-theme="dark"] .tag, [data-theme="dark"] .tlink, [data-theme="dark"] .prose a, [data-theme="dark"] .hi, [data-theme="dark"] .sig-role, [data-theme="dark"] .pillar-ico, [data-theme="dark"] .val-ico { color: var(--navy-lift); } [data-theme="dark"] .btn--ghost { color: var(--navy-lift); border-color: var(--navy-lift); } [data-theme="dark"] .btn--ghost:hover { background: var(--navy-lift); color: #06101F; } [data-theme="dark"] .pcard:hover .pcard-name { color: var(--navy-lift); } /* chrome */ [data-theme="dark"] .hdr.is-solid { background: rgba(11,23,41,.92); } [data-theme="dark"] .hdr.is-solid .brand .mark-rev { display: block; } [data-theme="dark"] .hdr.is-solid .brand .mark-pos { display: none; } [data-theme="dark"] .hdr.is-solid .burger span { background: #fff; } [data-theme="dark"] .hdr.is-solid .nav a { color: var(--slate); } [data-theme="dark"] .hdr.is-solid .nav a:hover, [data-theme="dark"] .hdr.is-solid .nav a[aria-current] { color: #fff; } /* surfaces that assumed a light ground */ [data-theme="dark"] .vswitch button[aria-pressed="true"] { background: var(--navy-lift); color: #06101F; } [data-theme="dark"] .reg-bar { border-bottom-color: var(--line); } [data-theme="dark"] .reg-row:not(.reg-head):hover { background: var(--surface); } [data-theme="dark"] .certcard { background: #fff; border-color: rgba(255,255,255,.16); } [data-theme="dark"] .pn-cell { background: var(--paper); } [data-theme="dark"] .pn-cell:hover { background: var(--surface); } [data-theme="dark"] .masonry .mitem img, [data-theme="dark"] .shot img { filter: saturate(.92) brightness(.94); } [data-theme="dark"] .masonry .mitem:hover img, [data-theme="dark"] .shot:hover img { filter: saturate(1.04) brightness(1); } [data-theme="dark"] .areas { background: var(--panel); } [data-theme="dark"] .val:hover, [data-theme="dark"] .certcard:hover { box-shadow: 0 14px 34px rgba(0,0,0,.5); } [data-theme="dark"] .dd { box-shadow: 0 22px 54px rgba(0,0,0,.55); } /* ---------- theme toggle ---------- */ .tbtn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.26); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .tbtn:hover { background: rgba(255,255,255,.14); } .hdr.is-solid .tbtn { border-color: var(--line); color: var(--slate); } .hdr.is-solid .tbtn:hover { background: var(--panel); color: var(--ink); } .hdr.is-drawer .tbtn, .hdr.is-drawer.is-solid .tbtn { border-color: rgba(255,255,255,.26); color: #fff; background: transparent; } .tbtn .ico { width: 16px; height: 16px; grid-area: 1 / 1; } .tbtn .i-sun { display: none; } [data-theme="dark"] .tbtn .i-sun { display: block; } [data-theme="dark"] .tbtn .i-moon { display: none; } /* boxes sized only by aspect-ratio collapse on browsers without it */ @supports not (aspect-ratio: 1 / 1) { .cap-stage { min-height: 320px; } .pcard-img, .pgal-item, .shot { min-height: 220px; } .certcard { min-height: 280px; } } /* ---------- 32. SMALL-SCREEN TRIMS ---------- */ @media (max-width: 560px) { /* stops "since 2006" orphaning onto its own line under the rule */ .ey-since { display: none; } } /* ---------- 33. AUDIT FIXES ---------- */ /* standalone link lists need a ~30px+ touch target */ .foot-col a, .drawer .sub a { display: inline-block; padding-block: .3rem; } .crumb a { padding-block: .3rem; } .tlink { padding-top: .35rem; } /* dark mode corrections found by the contrast audit */ [data-theme="dark"] { /* the mark's red is too dark to read as small type on a dark ground; this is the same hue lifted until it passes AA */ --signal: #FF4B45; } [data-theme="dark"] .cta { background: #10254A; } /* the generic dark badge rule was overriding the red "Ongoing" badge */ [data-theme="dark"] .pcard-badge:not(.is-live) { background: rgba(255,255,255,.9); color: #0B1729; } [data-theme="dark"] .pcard-badge.is-live { background: var(--signal); color: #10100F; } /* ---------- 34. AUDIT ROUND 2 ---------- */ :root { --signal-dark: #FF5A54; } /* the mark's red, lifted for use ON dark */ /* red at 11px on a dark card/hero only reached ~3.2:1 */ .card-n, .hero-reg-ref { color: var(--signal-dark); } .areas-l { color: var(--slate); } .tag--light { color: rgba(255,255,255,.82); } /* touch targets in link lists and breadcrumbs */ .foot-bot a { display: inline-block; padding-block: .35rem; } .crumb a { padding-block: .45rem; } .office-v a { display: inline-block; padding-block: .18rem; } /* ---------- 35. LEGIBILITY ON DARK BANDS ---------- The muted whites in the rail, footer, CTA and office list were between 2.6:1 and 4.4:1. Lifted until they pass AA while keeping the hierarchy. */ :root { --on-dark: rgba(255,255,255,.80); --on-dark-2: rgba(255,255,255,.60); --slate-2: #59657C; } .rail-l { color: rgba(255,255,255,.62); } .foot-h { color: rgba(255,255,255,.54); } .foot-bot, .foot-bot a { color: rgba(255,255,255,.50); } .foot-bot a { padding-block: .45rem; } .office-l { color: rgba(255,255,255,.60); } .maptab { color: rgba(255,255,255,.62); } .cap-tag { color: rgba(255,255,255,.76); } .card-b { color: rgba(255,255,255,.84); } .tag--light { color: rgba(255,255,255,.88); } .pill--live { color: #BE0100; } [data-theme="dark"] .pill--live { color: var(--signal); } /* ---------- 36. TOKEN ORDER CORRECTION ---------- Section 35 re-declared --slate-2 on :root, which (being later in the file) also overrode the dark theme's lighter value. Restore it, and fix the few dark-mode selectors that were still losing to earlier rules. */ [data-theme="dark"] { --slate-2: #8A97AF; } [data-theme="dark"] .rail { background: #12376E; } [data-theme="dark"] .tag--light { color: rgba(255,255,255,.88); } .hero-reg-loc { color: rgba(255,255,255,.62); } /* ---------- 37. REVISION 4 ---------- */ /* the + reads as part of the figure, not a footnote marker */ /* the rail is navy in both themes, so the + always needs the lifted red */ .rail-n .plus { color: var(--signal-dark); font-weight: 600; } /* second call to action under the featured projects */ .feat-more { display: flex; justify-content: center; margin-top: clamp(2rem, 3.5vw, 3rem); } /* ---------- 38. HEADER + TOGGLE + PROJECT CTA ---------- */ /* Desktop only: bring the action group closer to the right edge. Height, logo, fonts and button styles are untouched. */ @media (min-width: 1081px) { .hdr-in { padding-right: clamp(20px, 2.6vw, 44px); } /* the auto margin was on the