/* Alias the retired display fonts to Helvetica so EVERY existing font-family:'Manrope' / 'Instrument Serif' declaration (headings, design names, em accents — even ones with no fallback) resolves to Helvetica instead of the browser's default serif. */ @font-face{font-family:'Manrope';src:local('Helvetica Neue'),local('Helvetica'),local('Arial');font-weight:100 900;font-display:swap} @font-face{font-family:'Instrument Serif';src:local('Helvetica Neue'),local('Helvetica'),local('Arial');font-style:normal;font-display:swap} @font-face{font-family:'Instrument Serif';src:local('Helvetica Neue'),local('Helvetica'),local('Arial');font-style:italic;font-display:swap} /* =================================================================== SUNEX STONES — SHARED BRAND SYSTEM (corporate navy rebrand) Linked LAST in on every page, so it governs the whole site from one file. Navy #1F365C · Warm White #FAF9F7 · White #FFFFFF · Stone #6F7683 · Light borders #E8EBF0 · Muted Bronze #B08D57 (sparse). Helvetica for headings/UI, Inter for body. No serif, grain, or eyebrows. =================================================================== */ /* palette — re-points each page's existing --l-* tokens + legacy --orange */ :root{ --l-bg:#FAF9F7; --l-surf:#FFFFFF; --l-line:#E8EBF0; --l-ink:#1F365C; --l-soft:#6F7683; --l-gold:#B08D57; --orange:#B08D57; --navy:#1F365C; --navy-d:#16294a; --warm:#FAF9F7; --stone:#6F7683; --line:#E8EBF0; --bronze:#B08D57; } /* type system */ body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--stone);background:var(--l-bg)} /* one heading family site-wide — !important beats each page's per-section rules */ h1,h2,h3,h4,h5,.disp,.hero-h1,.page-hero h1{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;letter-spacing:-.015em} /* neutralise the italic-serif display flourish everywhere (em inside any heading) */ h1 em,h2 em,h3 em,h4 em,.hero-h1 em,.page-hero h1 em{ font-family:inherit!important;font-style:normal!important;color:inherit!important;letter-spacing:inherit} /* remove AI-template signals: film grain + decorative eyebrows/kickers */ body::after{display:none} .eyebrow,.hero-eyebrow,.craft-eyebrow,.quality-eyebrow,.sample-eyebrow,.disc-eyebrow, .lifeband .cap .kick,.af-kick{display:none} /* ---- NAVIGATION — fully transparent over the hero, frosted only on scroll ---- */ /* default (pages WITHOUT a hero, e.g. forms): frosted navy so links stay readable */ #nav{background:rgba(31,54,92,.82);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)} #nav .bar{border-bottom:1px solid rgba(255,255,255,.1)} /* transparent at the top of any page that HAS a hero; the video shows fully through */ body:has(.hero) #nav:not(.scrolled), body:has(.page-hero) #nav:not(.scrolled){background:linear-gradient(180deg,rgba(13,20,34,.52) 0%,rgba(13,20,34,.22) 54%,rgba(13,20,34,0) 100%);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none} body:has(.hero) #nav:not(.scrolled) .bar, body:has(.page-hero) #nav:not(.scrolled) .bar{border-bottom-color:transparent} /* on scroll: subtle frosted navy + soft shadow for readability over content */ #nav.scrolled{background:rgba(31,54,92,.9);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 10px 30px -20px rgba(15,25,45,.55)} .nav-links a{color:rgba(255,255,255,.82)} .nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{color:#fff} .nav-links a::after{background:var(--bronze)} .navcta{color:#fff;border-color:rgba(255,255,255,.32)} .navcta:hover,.navcta:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff} .navcta .arw{color:var(--bronze)} /* ---- FULL-VIEWPORT HERO — homepage slab video + interior page banners ---- */ .hero{padding:0;background:#0c1018} .hero-stage{height:100vh;height:100svh;max-height:none;border-radius:0;box-shadow:none;background:#0c1018} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transform:translateZ(0);backface-visibility:hidden;will-change:transform} /* fade-to-black dissolve at the loop seam (driven by JS near the clip's start/end) */ .hero-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:2;transition:opacity .55s ease-in-out} .hero-fade.on{opacity:1} /* interior page heroes: stronger text-forward overlay so the image recedes and the heading leads */ .page-hero .ph-tint{background:linear-gradient(180deg,rgba(10,14,22,.5) 0%,rgba(10,14,22,.36) 42%,rgba(10,14,22,.82) 100%)} /* very subtle overlay: soft top scrim (nav legibility), left + bottom for the copy */ .hero-shade{z-index:1;background: linear-gradient(to bottom,rgba(12,16,24,.42) 0%,rgba(12,16,24,.1) 15%,transparent 34%,transparent 60%,rgba(12,16,24,.36) 100%), linear-gradient(90deg,rgba(12,16,24,.5) 0%,rgba(12,16,24,.2) 34%,transparent 60%)} .hero-content{opacity:1;transform:translateY(-50%);z-index:3} .page-hero{min-height:100vh;min-height:100svh} @media(max-width:900px){ .hero-stage{height:100vh;height:100svh} .page-hero{min-height:100vh;min-height:100svh} } @media(max-width:640px){ .hero-content{transform:none;top:auto;bottom:0} .hero-shade{background:linear-gradient(to top,rgba(8,11,17,.74) 0%,rgba(8,11,17,.34) 26%,transparent 50%),linear-gradient(to bottom,rgba(8,11,17,.44),transparent 20%)} } /* ---- BUTTONS — navy primary, navy-outline secondary, bronze on focus ---- */ .btn-primary,.sample .btn-primary{background:var(--navy);color:#fff} .btn-primary .arw path,.sample .btn-primary .arw path{stroke:#fff} .btn-primary:hover,.btn-primary:focus-visible,.sample .btn-primary:hover,.sample .btn-primary:focus-visible{background:var(--navy-d);color:#fff;box-shadow:0 14px 30px -18px rgba(31,54,92,.55)} .btn-secondary,.faq .btn-secondary,.sample .btn-secondary{border-color:var(--navy);color:var(--navy)} .btn-secondary:hover,.btn-secondary:focus-visible,.faq .btn-secondary:hover,.faq .btn-secondary:focus-visible,.sample .btn-secondary:hover,.sample .btn-secondary:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy)} .btn:focus-visible{outline:2px solid var(--bronze);outline-offset:3px} /* ---- one deliberate navy feature band (homepage "How we work") ---- */ .trade{background:var(--navy);color:#fff} .trade-head h2{color:#fff} .trade-head .hp{color:rgba(255,255,255,.74)} .ts-num,.ts-ic{color:var(--bronze)} .ts h3{color:#fff} .ts p{color:rgba(255,255,255,.72)} .trade-steps .ts + .ts{border-left-color:rgba(255,255,255,.14)} .trade .btn-primary{background:#fff;color:var(--navy)} .trade .btn-primary .arw path{stroke:#1F365C} .trade .btn-primary:hover,.trade .btn-primary:focus-visible{background:var(--bronze);color:#fff;box-shadow:none} .trade .btn-secondary{border-color:rgba(255,255,255,.45);color:#fff} .trade .btn-secondary:hover,.trade .btn-secondary:focus-visible{background:#fff;color:var(--navy);border-color:#fff} /* ---- FOOTER — navy bookend ---- */ .site-footer{background:var(--navy);color:#fff;border-top-color:rgba(255,255,255,.12)} /* ---- surfaces + image frames — restrained, squared, consistent ---- */ .cred-card{border:1px solid var(--line)} .finishes-media{border:1px solid var(--line)} .about-facility{border-color:var(--line)} /* ---- SHARPER, ARCHITECTURAL CORNERS — away from soft SaaS radii ---- */ /* ALL images & media: sharp, clean edges — no rounded corners anywhere */ .hero-stage,.hero-video,.page-hero,.page-hero .ph-bg,.matband,.lifeband, .finishes-media,.craft-media,.sample-media,.about-facility,.plate .ph,.appcard, .brz-card,.insp-item,.circ-ph,.perf-ph,.surf .ph,.surf-ph,.s-card,.surf-card, .two .media,.media,.finish,.finish-tex,.craft-stats{border-radius:0} /* buttons + small ui chips: minimal 2px */ .btn,.navcta,.disc-link,.faq-inline-cta,.hero-cta,.hero-cta-2, .cred-card,.member,.member .mono,.vmj-item,.faq-ic,.brz-arw,.foot-social a{border-radius:2px} /* ============ WHY-SUNEX PAGE REFINEMENTS ============ */ /* more breathing room between sections */ .sec{padding:clamp(5.5rem,10vw,9rem) 0} .two .media{box-shadow:0 40px 82px -48px rgba(15,25,45,.3)} /* Principles — navy gradient cards, centred, premium */ .principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem);margin-top:clamp(2.6rem,4.5vw,3.6rem)} .principle{position:relative;text-align:center;padding:clamp(2.6rem,4vw,3.4rem) clamp(1.6rem,2.4vw,2.2rem);color:#fff;background:linear-gradient(158deg,#22406e 0%,#1F365C 46%,#16294a 100%);border:1px solid rgba(255,255,255,.07);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .principle::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% -18%,rgba(176,141,87,.18),transparent 62%)} .principle:hover{transform:translateY(-4px);box-shadow:0 34px 62px -34px rgba(15,25,45,.5)} .principle .p-n{position:relative;display:inline-block;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.26em;color:#C9A66B;margin-bottom:1.1rem} .principle h3{position:relative;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:clamp(1.25rem,1.7vw,1.5rem);letter-spacing:-.01em;color:#fff;margin:0 0 .7rem} .principle p{position:relative;color:rgba(255,255,255,.75);font-weight:300;font-size:.95rem;line-height:1.7;max-width:30ch;margin:0 auto} @media(max-width:760px){.principle-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}} /* Certifications — scrolling logo marquee (matches homepage) */ .cert-band{padding:clamp(1rem,2vw,1.8rem) 0;margin-top:clamp(1.8rem,3vw,2.6rem)} .cert-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .cm-track{display:flex;align-items:center;width:max-content;animation:certScroll 42s linear infinite;will-change:transform;transform:translateZ(0)} .cert-marquee:hover .cm-track{animation-play-state:paused} .cert-band .clogo{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:clamp(78px,8vw,112px);margin-right:clamp(3rem,7vw,7rem)} .cert-band .clogo img{max-height:clamp(64px,7vw,96px);max-width:clamp(150px,17vw,230px);width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .45s var(--ease),opacity .45s var(--ease)} .cert-band .clogo:hover img{filter:grayscale(0);opacity:1} @keyframes certScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media(prefers-reduced-motion:reduce){.cm-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:1.5rem}.cert-marquee{-webkit-mask-image:none;mask-image:none}.cert-band .clogo[aria-hidden="true"]{display:none}} /* One design, three finishes — real texture previews + subtle hover */ .finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.6rem);margin-top:clamp(2.6rem,4.5vw,3.6rem)} .finish{background:#fff;border:1px solid var(--l-line);overflow:hidden;transition:box-shadow .5s var(--ease),transform .5s var(--ease)} .finish:hover{transform:translateY(-4px);box-shadow:0 32px 60px -38px rgba(31,54,92,.32)} /* cropped tight to the quartz SURFACE only — a premium material swatch, no slab edges/base */ .finish-tex{position:relative;aspect-ratio:3/2;background-image:url("finishes-trio.webp");background-size:405% auto;background-repeat:no-repeat;transition:transform .7s var(--ease)} .finish:hover .finish-tex{transform:scale(1.06)} .finish-tex::after{content:attr(data-finish);position:absolute;left:0;bottom:0;padding:.5rem .85rem;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,rgba(15,25,45,.6),transparent);opacity:0;transition:opacity .4s var(--ease)} .finish:hover .finish-tex::after{opacity:1} .finish-body{padding:clamp(1.3rem,2.2vw,1.8rem)} .finish .f-n{font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--l-gold)} .finish h3{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:clamp(1.15rem,1.5vw,1.35rem);color:var(--l-ink);margin:.6rem 0 .5rem;letter-spacing:-.01em} .finish p{color:var(--l-soft);font-weight:300;font-size:.93rem;line-height:1.68} @media(max-width:760px){.finish-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}} /* capability stats — keep the country row on one line, align labels, emphasise large format */ .st .n{white-space:nowrap} .st .l{min-height:2.4em} .st.feature{background:linear-gradient(158deg,#22406e,#1F365C)!important} .st.feature .n{color:#fff} .st.feature .l{color:rgba(255,255,255,.72)} /* subtle navy accent on the large-format differentiator */ .why-item.feature .why-ic{border-color:rgba(31,54,92,.34);background:rgba(31,54,92,.07);color:#1F365C} .why-item.feature h3{color:#1F365C} /* ============ BUTTONS — text only, centred, balanced ============ */ /* remove all icons (arrows / ticks) from buttons — text only */ .btn svg,.btn .arw,.navcta .arw,.faq-inline-cta .arw,.disc-link .arw{display:none!important} .btn,.navcta,.faq-inline-cta,.disc-link{justify-content:center;gap:0;text-align:center} .btn{white-space:nowrap} /* equal width + height for side-by-side button pairs */ .hero-actions .btn,.hero-cta-row .btn,.sample-actions .btn,.trade-cta .btn{flex:1 1 0} .hero-cta-row,.trade-cta{max-width:560px;margin-left:auto;margin-right:auto} @media(max-width:640px){ .hero-actions,.hero-cta-row,.sample-actions,.trade-cta{width:100%;flex-direction:column;align-items:stretch;gap:.7rem} .hero-actions .btn,.hero-cta-row .btn,.sample-actions .btn,.trade-cta .btn, .about-cta .btn,.close-cta .btn,.serve-cta .btn,.finishes-cta .btn,.craft-cta .btn,.faq-more .btn{width:100%;max-width:none} } /* ────────────────────────────────────────────────────────────── INTERIOR HEROES → unified to the HOMEPAGE hero text treatment left-aligned · vertically centred · compact medium-weight head (matches .hero-h1 / .hero-sub on index.html) ────────────────────────────────────────────────────────────── */ .page-hero{align-items:center} .ph-inner{max-width:none;width:100%;margin:0;text-align:left; display:flex;flex-direction:column;align-items:flex-start; padding:92px clamp(1.8rem,6vw,6rem)} .ph-inner .eyebrow{align-self:flex-start;justify-content:flex-start} .ph-inner h1{font-weight:500;font-size:clamp(2rem,3.35vw,3.15rem); line-height:1.14;letter-spacing:-.025em;max-width:none; width:min(60%,600px);margin:0;text-shadow:0 2px 40px rgba(0,0,0,.4)} .ph-inner h1 em{font-weight:500} .ph-inner .lead{font-weight:300;font-size:clamp(1rem,1.05vw,1.1rem); line-height:1.75;max-width:44ch;text-align:left; margin:clamp(1.2rem,2vw,1.6rem) 0 0} @media(max-width:900px){ .ph-inner h1{width:min(80%,560px)} .ph-inner .lead{max-width:52ch} } @media(max-width:640px){ .page-hero{align-items:flex-end} .ph-inner{padding:0 clamp(1.3rem,5vw,1.7rem) clamp(2.6rem,9vw,3.4rem)} .ph-inner h1{width:100%;font-size:clamp(1.6rem,5.4vw,2rem);line-height:1.2} .ph-inner .lead{max-width:none} } /* interior-hero CTA row: left-align under the text (was centred) */ .ph-inner .hero-cta-row{margin-left:0;margin-right:0;max-width:min(60%,600px);justify-content:flex-start} @media(max-width:640px){.ph-inner .hero-cta-row{max-width:none;width:100%}}