/* ========================================================================== EUROBOND SEALANT — Landing Page Seal It Once. Trust It Forever. ========================================================================== */ :root{ /* --- Brand palette (per brief) --- */ --navy: #16326B; --navy-deep: #0E2350; --navy-mid: #1D3E82; --steel: #2C5AA0; /* 589 accent */ --green: #2F9E52; /* 550 accent */ --orange: #E8621A; /* CTA + Euro General accent */ --orange-lt: #F0731F; --ink: #1B2430; --ink-60: rgba(27,36,48,0.64); --ink-40: rgba(27,36,48,0.42); --paper: #FFFFFF; --mist: #F4F6F9; --mist-deep: #E9ECF2; --line: rgba(22,50,107,0.12); --line-strong: rgba(22,50,107,0.22); --f-display: 'Poppins', sans-serif; --f-body: 'Open Sans', sans-serif; --radius-s: 6px; --radius-m: 14px; --radius-l: 26px; --container: 1520px; --gutter: clamp(1.25rem, 3.5vw, 4rem); --ease: cubic-bezier(.22,.9,.32,1); --header-h: 84px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; } h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.12; margin:0; color:var(--navy); letter-spacing:-0.01em; } p{ margin:0; } .container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } :focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:3px; } .visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .eyebrow{ font-family:var(--f-body); font-weight:700; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--orange); display:inline-flex; align-items:center; gap:0.6em; } .eyebrow::before{ content:""; width:26px; height:3px; background:var(--orange); display:inline-block; border-radius:2px; } .eyebrow.-onlight{ color:var(--orange-lt); } /* ========================================================================== Hexagon motif — signature element ========================================================================== */ .hex-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .hex-field svg{ position:absolute; opacity:0.08; } .hex-icon-wrap{ width:64px; height:64px; flex:none; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); background:linear-gradient(155deg, var(--navy), var(--navy-mid)); display:flex; align-items:center; justify-content:center; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .hex-icon-wrap svg{ width:30px; height:30px; color:#fff; } /* ========================================================================== Buttons ========================================================================== */ .btn{ display:inline-flex; align-items:center; gap:0.6em; font-family:var(--f-display); font-weight:700; font-size:0.92rem; padding:0.95em 1.8em; border-radius:999px; border:2px solid var(--orange); background:var(--orange); color:#fff; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease; position:relative; overflow:hidden; white-space:nowrap; } .btn::after{ content:""; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(232,98,26,0.5); transition:box-shadow .5s var(--ease); } .btn:hover{ transform:translateY(-3px); background:var(--orange-lt); box-shadow:0 14px 30px rgba(232,98,26,0.35); } .btn:hover::after{ box-shadow:0 0 0 10px rgba(232,98,26,0); } .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.6); } .btn-ghost:hover{ background:rgba(255,255,255,0.12); box-shadow:none; } .btn-navy{ background:var(--navy); border-color:var(--navy); } .btn-navy:hover{ background:var(--navy-mid); box-shadow:0 14px 30px rgba(22,50,107,0.3); } .btn-block{ width:100%; justify-content:center; } .btn-sm{ padding:0.65em 1.3em; font-size:0.8rem; } /* ========================================================================== Header / nav ========================================================================== */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:200; height:var(--header-h); display:flex; align-items:center; transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; } .site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; } .site-header.-scrolled{ background:rgba(255,255,255,0.96); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(15,35,80,0.08); } .site-header .logo-img{ height:34px; width:auto; transition:filter .3s ease; } .site-header:not(.-scrolled) .logo-img{ filter:brightness(0) invert(1); } .nav-primary{ display:flex; align-items:center; gap:2.1rem; } .nav-primary a{ font-family:var(--f-display); font-weight:600; font-size:0.86rem; letter-spacing:0.02em; color:#fff; position:relative; padding:0.4rem 0.1rem; transition:color .25s ease; } .site-header.-scrolled .nav-primary a{ color:var(--navy); } .nav-primary a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2.5px; background:var(--orange); transition:right .3s var(--ease); border-radius:2px; } .nav-primary a:hover::after, .nav-primary a.-active::after{ right:0; } .nav-primary a.-active{ color:var(--orange)!important; } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; width:44px; height:44px; position:relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:10px; right:10px; height:2.5px; border-radius:2px; background:#fff; transition:transform .3s ease, opacity .3s ease, background .3s ease; } .site-header.-scrolled .nav-toggle span, .site-header.-scrolled .nav-toggle span::before, .site-header.-scrolled .nav-toggle span::after{ background:var(--navy); } .nav-toggle span{ top:21px; } .nav-toggle span::before{ top:-8px; } .nav-toggle span::after{ top:8px; } .nav-toggle[aria-expanded="true"] span{ background:transparent!important; } .nav-toggle[aria-expanded="true"] span::before{ transform:translateY(8px) rotate(45deg); background:var(--navy)!important; } .nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-8px) rotate(-45deg); background:var(--navy)!important; } @media (max-width:980px){ .nav-primary{ position:fixed; top:var(--header-h); left:0; right:0; height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h)); background:#fff; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:2.4rem var(--gutter); gap:1.7rem; transform:translateX(100%); transition:transform .4s var(--ease); z-index:150; overflow-y:auto; } .nav-primary.-open{ transform:translateX(0); } .nav-primary a{ color:var(--navy)!important; font-size:1.3rem; } .nav-toggle{ display:block; } .nav-cta-desktop{ display:none; } } @media (min-width:981px){ .nav-toggle{ display:none; } } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding-top:var(--header-h); overflow:hidden; background:linear-gradient(180deg, rgba(9,20,45,0.88) 0%, rgba(14,35,80,0.82) 45%, rgba(14,35,80,0.94) 100%), var(--navy-deep); background-size:cover; background-position:center; } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-bg img{ width:100%; height:100%; object-fit:cover; } .hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,20,45,0.86) 0%, rgba(14,35,80,0.78) 40%, rgba(8,18,42,0.96) 100%); } .hero-content{ position:relative; z-index:2; padding-block:6rem 5rem; } @media (max-width:600px){ .hero-content{ padding-block:2.2rem 3rem; } } .hero-eyebrow{ color:#ffb27a; } .hero h1{ color:#fff; font-size:clamp(2.6rem, 6.5vw, 5.2rem); font-weight:800; margin-top:1.2rem; letter-spacing:-0.015em; } .hero h1 .line{ display:block; overflow:hidden; } .hero h1 .line span{ display:inline-block; transform:translateY(110%); transition:transform .9s var(--ease); } .hero.-loaded h1 .line span{ transform:translateY(0); } .hero h1 .line:nth-child(2) span{ transition-delay:.12s; } .hero h1 .orange{ color:var(--orange); } .hero .sub{ color:rgba(255,255,255,0.82); font-size:clamp(1.05rem,2vw,1.3rem); max-width:46ch; margin-top:1.6rem; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s; } .hero.-loaded .sub{ opacity:1; transform:translateY(0); } .hero-actions{ display:flex; gap:1.1rem; margin-top:2.6rem; flex-wrap:wrap; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease) .65s, transform .8s var(--ease) .65s; } .hero.-loaded .hero-actions{ opacity:1; transform:translateY(0); } .scroll-indicator{ position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:0.5rem; color:rgba(255,255,255,0.7); font-family:var(--f-display); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; } .scroll-indicator .dot-track{ width:2px; height:34px; background:rgba(255,255,255,0.25); border-radius:2px; position:relative; overflow:hidden; } .scroll-indicator .dot-track::after{ content:""; position:absolute; left:0; top:0; width:100%; height:12px; background:var(--orange); border-radius:2px; animation:scrolldrop 1.8s ease-in-out infinite; } @keyframes scrolldrop{ 0%{ transform:translateY(-100%); } 60%{ transform:translateY(220%);} 100%{ transform:translateY(220%);} } /* ========================================================================== Trust strip ========================================================================== */ .trust-strip{ background:var(--navy); padding-block:2.6rem; position:relative; overflow:hidden; } .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; z-index:1; min-width:0; } .trust-item{ text-align:center; min-width:0; } .trust-item .num{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem,3.5vw,2.6rem); color:#fff; display:flex; align-items:baseline; justify-content:center; gap:0.15em; } .trust-item .num .suffix{ color:var(--orange); font-size:0.7em; margin-inline:0.12em; } .trust-item .label{ font-size:0.82rem; color:rgba(255,255,255,0.7); margin-top:0.4rem; font-weight:600; letter-spacing:0.02em; } @media (max-width:760px){ .trust-grid{ grid-template-columns:repeat(2,1fr); row-gap:2.2rem; } } /* ========================================================================== Section scaffolding ========================================================================== */ section{ position:relative; } .sec-pad{ padding-block:clamp(3.5rem,8vw,7rem); } #products.sec-pad{ padding-top:clamp(1.6rem,3vw,2.6rem); } #products .section-head{ margin-bottom:0; } #products .section-head p{ margin-top:0.5rem; } .section-head{ max-width:680px; } .section-head h2{ margin-top:0.8rem; font-size:clamp(1.9rem,4vw,2.9rem); } .section-head p{ margin-top:1.1rem; color:var(--ink-60); font-size:1.1rem; } .section-head.-center{ margin-inline:auto; text-align:center; } .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.-in{ opacity:1; transform:translateY(0); } .reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal-stagger.-in > *{ opacity:1; transform:translateY(0); } .reveal-stagger.-in > *:nth-child(1){ transition-delay:.05s; } .reveal-stagger.-in > *:nth-child(2){ transition-delay:.12s; } .reveal-stagger.-in > *:nth-child(3){ transition-delay:.19s; } .reveal-stagger.-in > *:nth-child(4){ transition-delay:.26s; } .reveal-stagger.-in > *:nth-child(5){ transition-delay:.33s; } /* ========================================================================== About / Why Choose ========================================================================== */ .about-split{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; min-width:0; } .about-split > *{ min-width:0; } .about-split p{ margin-top:1.2rem; color:var(--ink-60); font-size:1.05rem; } @media (max-width:860px){ .about-split{ grid-template-columns:1fr; } .about-split > *:first-child{ order:2; } .about-split > .skyline-art{ order:1; } } .skyline-art{ position:relative; } .skyline-art svg{ width:100%; height:auto; } .why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.3rem; margin-top:3.5rem; } @media (max-width:1100px){ .why-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:680px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:420px){ .why-grid{ grid-template-columns:1fr; } } .why-grid > *{ min-width:0; } .why-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.8rem 1.5rem; display:flex; flex-direction:column; gap:1rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease; } .why-card:hover{ transform:translateY(-8px); box-shadow:0 24px 46px rgba(22,50,107,0.14); border-color:transparent; } .why-card:hover .hex-icon-wrap{ transform:rotate(8deg) scale(1.06); } .why-card h4{ font-size:1.02rem; margin-top:1rem; } .why-card p{ color:var(--ink-60); font-size:0.88rem; } @media (max-width:420px){ .why-grid{ gap:0.55rem; margin-top:1.3rem; } .why-card{ padding:0.85rem 0.9rem; gap:0.4rem; } .why-card-head{ display:flex; align-items:flex-start; gap:0.8rem; } .why-card-text{ flex:1; min-width:0; } .why-card-text h4{ margin-top:0; } .why-card .hex-icon-wrap{ width:48px; height:48px; flex:none; } .why-card .hex-icon-wrap svg{ width:23px; height:23px; } .why-card h4{ font-size:0.8rem; line-height:1.25; } .why-card p{ margin-top:0.3rem; font-size:0.72rem; line-height:1.35; } } /* ========================================================================== Products showcase — tabbed ========================================================================== */ .products-section{ background:var(--mist); } .product-tabs-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-top:1.5rem; border-bottom:2px solid var(--line); } .product-tabs{ display:flex; gap:0.7rem; flex-wrap:wrap; } .product-slider-arrows{ display:flex; gap:0.5rem; padding-bottom:0.7rem; flex:none; } .slider-arrow{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line-strong); background:#fff; color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease, transform .25s ease; } .slider-arrow svg{ width:18px; height:18px; } .slider-arrow:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px); } .product-tab{ font-family:var(--f-display); font-weight:700; font-size:1rem; padding:1rem 1.6rem; background:none; border:none; cursor:pointer; color:var(--ink-60); position:relative; display:flex; align-items:center; gap:0.6rem; transition:color .3s ease; } .product-tab .dot{ width:9px; height:9px; border-radius:50%; background:var(--tab-accent, var(--navy)); } .product-tab::after{ content:""; position:absolute; left:0.4rem; right:0.4rem; bottom:-2px; height:3px; background:var(--tab-accent, var(--orange)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); border-radius:3px 3px 0 0; } .product-tab.-active{ color:var(--navy); } .product-tab.-active::after{ transform:scaleX(1); } .product-tab:hover{ color:var(--navy); } .product-panels{ position:relative; margin-top:1.8rem; touch-action:pan-y; min-width:0; } .product-panel{ display:none; grid-template-columns:0.78fr 1.22fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:start; min-width:0; } .product-panel > *{ min-width:0; } .product-panel.-active{ display:grid; animation:panelIn .6s var(--ease); } @keyframes panelIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} } .product-visual{ position:relative; border-radius:var(--radius-l); overflow:hidden; background:linear-gradient(155deg, var(--panel-accent-soft, #eef1f6), #fff 65%); display:flex; align-items:center; justify-content:center; padding:1.3rem; aspect-ratio:3/2.9; position:sticky; top:calc(var(--header-h) + 16px); } .product-visual img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 30px 34px rgba(15,30,60,0.22)); } .product-visual .hexbg{ position:absolute; inset:0; opacity:0.5; } .product-digit{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.3rem,4.3vw,3.6rem); line-height:0.9; color:var(--panel-accent, var(--navy)); letter-spacing:-0.02em; } .product-digit.-word{ font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.05; } .product-category{ font-family:var(--f-display); font-weight:700; font-size:1.16rem; color:var(--navy); margin-top:0.3rem; } .product-desc{ margin-top:0.5rem; color:var(--ink-60); font-size:1rem; line-height:1.5; max-width:56ch; } .badge-row{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.7rem; } .badge{ display:inline-flex; align-items:center; gap:0.4rem; background:#fff; border:1.5px solid var(--line-strong); border-radius:999px; padding:0.4em 0.85em; font-size:0.8rem; font-weight:700; color:var(--navy); } .badge .bdot{ width:6px; height:6px; border-radius:50%; background:var(--panel-accent, var(--orange)); } .app-list{ margin-top:0.6rem; display:grid; grid-template-columns:1fr 1fr; gap:0.35rem 1rem; } .app-list li{ display:flex; align-items:flex-start; gap:0.45rem; font-size:0.94rem; color:var(--ink); line-height:1.4; } .app-list li svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--panel-accent, var(--orange)); } @media (max-width:560px){ .app-list{ grid-template-columns:1fr; } } .swatch-row{ display:flex; flex-wrap:wrap; gap:0.5rem 0.7rem; margin-top:0.45rem; } .swatch{ display:flex; flex-direction:column; align-items:center; gap:0.25rem; } .swatch .dot{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,0.14); box-shadow:0 2px 6px rgba(0,0,0,0.08); } .swatch span{ font-size:0.68rem; color:var(--ink-60); text-align:center; max-width:64px; } .spec-toggle{ margin-top:2rem; width:100%; display:flex; align-items:center; justify-content:space-between; background:#fff; border:1.5px solid var(--line-strong); border-radius:var(--radius-s); padding:1rem 1.3rem; font-family:var(--f-display); font-weight:700; color:var(--navy); cursor:pointer; } .spec-toggle .plus{ position:relative; width:18px; height:18px; flex:none; } .spec-toggle .plus::before,.spec-toggle .plus::after{ content:""; position:absolute; background:var(--panel-accent, var(--orange)); border-radius:2px; transition:transform .3s ease, opacity .3s ease; } .spec-toggle .plus::before{ left:0; top:8px; width:18px; height:2.5px; } .spec-toggle .plus::after{ left:8px; top:0; width:2.5px; height:18px; } .spec-toggle.-open .plus::after{ transform:rotate(90deg); opacity:0; } .spec-panel{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); } .spec-panel.-open{ max-height:1400px; } .spec-panel-inner{ padding-top:1.2rem; } .spec-group-label{ font-family:var(--f-display); font-weight:700; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:var(--panel-accent, var(--navy)); padding:0.5rem 0.9rem; border-radius:6px 6px 0 0; margin-top:1rem; } .spec-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); } .spec-table th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-60); padding:0.6rem 0.8rem; border-bottom:2px solid var(--line-strong); } .spec-table td{ padding:0.6rem 0.8rem; font-size:0.86rem; border-bottom:1px solid var(--line); } .spec-table tr:last-child td{ border-bottom:none; } .product-cta-row{ display:flex; gap:1rem; margin-top:0.75rem; flex-wrap:wrap; } @media (max-width:860px){ .product-panel{ grid-template-columns:1fr; } .product-visual{ position:relative; top:0; aspect-ratio:4/3.4; padding:1.4rem; } .product-tabs{ gap:0.2rem; } .product-tab{ padding:0.85rem 1.1rem; font-size:0.92rem; } } @media (max-width:480px){ .product-tabs-row{ gap:0.4rem; margin-top:1.6rem; } .product-tabs{ flex-wrap:nowrap; gap:0; } .product-tab{ padding:0.6rem 0.5rem; font-size:0.78rem; gap:0.3rem; white-space:nowrap; } .product-tab .dot{ width:6px; height:6px; } .product-slider-arrows{ gap:0.35rem; padding-bottom:0.5rem; } .slider-arrow{ width:30px; height:30px; } .slider-arrow svg{ width:14px; height:14px; } } @media (max-width:480px){ .product-visual{ aspect-ratio:3/2.5; } } /* ========================================================================== Coverage calculator ========================================================================== */ .calc-section{ background:var(--navy); position:relative; overflow:hidden; } .calc-section .section-head h2, .calc-section .section-head p{ color:#fff; } .calc-section .section-head p{ color:rgba(255,255,255,0.72); } .calc-card{ background:#fff; border-radius:var(--radius-l); padding:clamp(1.8rem,4vw,3rem); margin-top:3rem; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); min-width:0; } .calc-card > *{ min-width:0; } @media (max-width:860px){ .calc-card{ grid-template-columns:1fr; } } .calc-field{ margin-bottom:1.8rem; } .calc-field label{ display:flex; justify-content:space-between; font-family:var(--f-display); font-weight:700; color:var(--navy); font-size:0.95rem; margin-bottom:0.7rem; } .calc-field label .val{ color:var(--orange); font-family:var(--f-body); font-weight:700; } .calc-field input[type="range"]{ width:100%; height:6px; border-radius:4px; background:var(--mist-deep); appearance:none; outline:none; } .calc-field input[type="range"]::-webkit-slider-thumb{ appearance:none; width:24px; height:24px; border-radius:50%; background:var(--orange); border:4px solid #fff; box-shadow:0 2px 10px rgba(232,98,26,0.5); cursor:pointer; } .calc-field input[type="range"]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--orange); border:4px solid #fff; box-shadow:0 2px 10px rgba(232,98,26,0.5); cursor:pointer; } .calc-field .num-input{ width:100%; margin-top:0.7rem; padding:0.7em 1em; border-radius:var(--radius-s); border:1.5px solid var(--line-strong); font-family:var(--f-body); font-size:1rem; color:var(--navy); } .calc-results{ display:flex; flex-direction:column; gap:1rem; } .calc-result-hero{ background:linear-gradient(135deg, var(--navy), var(--navy-mid)); border-radius:var(--radius-m); padding:1.6rem; color:#fff; text-align:center; } .calc-result-hero .v{ font-family:var(--f-display); font-weight:800; font-size:2.4rem; color:var(--orange-lt); } .calc-result-hero .l{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; margin-top:0.3rem; color:rgba(255,255,255,0.75); } .calc-cart-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; min-width:0; } .calc-cart-grid > *{ min-width:0; } @media (max-width:360px){ .calc-cart-grid{ grid-template-columns:1fr 1fr; } } .calc-cart{ background:var(--mist); border-radius:var(--radius-s); padding:1rem 0.6rem; text-align:center; border:1.5px solid transparent; transition:border-color .3s ease; } .calc-cart:hover{ border-color:var(--orange); } .calc-cart .sz{ font-family:var(--f-display); font-weight:700; color:var(--navy); font-size:0.85rem; } .calc-cart .len{ font-family:var(--f-display); font-weight:800; color:var(--orange); font-size:1.3rem; margin-top:0.3rem; } .calc-cart .lenlabel{ font-size:0.68rem; color:var(--ink-60); text-transform:uppercase; letter-spacing:0.04em; } .calc-note{ font-size:0.78rem; color:var(--ink-40); margin-top:0.4rem; } /* ========================================================================== Application guide (caulking steps) — static merged grid ========================================================================== */ .guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.8rem; min-width:0; } .guide-grid > *{ min-width:0; } @media (max-width:900px){ .guide-grid{ grid-template-columns:repeat(2,1fr); } } .guide-card{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-m); padding:1.8rem 1.6rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease; } .guide-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(22,50,107,0.1); border-color:transparent; } .guide-card-head{ display:flex; align-items:center; gap:0.8rem; } .guide-card .idx{ width:40px; height:40px; border-radius:50%; background:var(--orange); color:#fff; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800; font-size:1.05rem; } .guide-card h4{ font-size:1.05rem; color:var(--navy); } .guide-card p{ margin-top:0.6rem; color:var(--ink-60); font-size:0.9rem; } @media (max-width:600px){ .guide-grid{ grid-template-columns:repeat(2,1fr); gap:0.6rem; margin-top:1.4rem; } .guide-card{ padding:0.9rem 0.8rem; } .guide-card-head{ gap:0.5rem; } .guide-card .idx{ width:26px; height:26px; font-size:0.78rem; } .guide-card h4{ font-size:0.78rem; line-height:1.2; } .guide-card p{ margin-top:0.35rem; font-size:0.72rem; line-height:1.35; } } /* ========================================================================== CTA / Contact ========================================================================== */ .cta-section{ position:relative; background:var(--navy-deep); overflow:hidden; } .cta-bg{ position:absolute; inset:0; z-index:0; } .cta-bg img{ width:100%; height:100%; object-fit:cover; opacity:0.35; } .cta-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,20,45,0.92), rgba(9,20,45,0.97)); } .cta-grid{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem); min-width:0; } .cta-grid > *{ min-width:0; } @media (max-width:900px){ .cta-grid{ grid-template-columns:1fr; } } .cta-info h2{ color:#fff; font-size:clamp(2rem,4vw,2.8rem); } .cta-info p{ color:rgba(255,255,255,0.72); margin-top:1.1rem; font-size:1.05rem; max-width:44ch; } .cta-detail-list{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.1rem; } .cta-detail{ display:flex; gap:0.9rem; align-items:flex-start; } .cta-detail svg{ width:20px; height:20px; color:var(--orange); flex:none; margin-top:2px; } .cta-detail a, .cta-detail span{ color:rgba(255,255,255,0.85); font-size:0.94rem; } .cta-detail a:hover{ color:var(--orange-lt); } .cta-social{ display:flex; gap:1rem; margin-top:1.8rem; } .cta-social a{ width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .3s ease; } .cta-social a:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-3px); } .cta-social svg{ width:18px; height:18px; } .contact-form{ background:#fff; border-radius:var(--radius-l); padding:clamp(1.8rem,4vw,3rem); min-width:0; box-sizing:border-box; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; min-width:0; } .form-field{ display:flex; flex-direction:column; gap:0.5rem; min-width:0; } .form-field.-full{ grid-column:1/-1; } .form-field label{ font-family:var(--f-display); font-weight:600; font-size:0.82rem; color:var(--navy); } .form-field input, .form-field select, .form-field textarea{ width:100%; min-width:0; box-sizing:border-box; font-family:var(--f-body); font-size:0.98rem; padding:0.85em 1em; border-radius:var(--radius-s); border:1.5px solid var(--line-strong); background:var(--mist); color:var(--ink); transition:border-color .25s ease, background .25s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--orange); background:#fff; outline:none; } .form-field textarea{ resize:vertical; min-height:110px; } .form-status{ margin-top:1rem; font-weight:600; color:var(--green); display:none; } .form-status.-show{ display:block; } @media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:var(--navy-deep); padding:4rem 0 2rem; color:rgba(255,255,255,0.7); } .footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,0.12); } .footer-logo img{ height:32px; filter:brightness(0) invert(1); } .footer-tag{ font-family:var(--f-display); font-weight:700; color:var(--orange-lt); font-size:0.85rem; margin-top:0.8rem; letter-spacing:0.04em; } .footer-top p{ margin-top:1rem; font-size:0.85rem; max-width:32ch; color:rgba(255,255,255,0.55); } .footer-col h5{ font-family:var(--f-display); font-weight:700; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; color:#fff; margin-bottom:1rem; } .footer-col li{ margin-bottom:0.65rem; } .footer-col a{ font-size:0.88rem; color:rgba(255,255,255,0.65); transition:color .2s ease; } .footer-col a:hover{ color:var(--orange-lt); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.8rem; padding-top:1.6rem; font-size:0.78rem; color:rgba(255,255,255,0.45); } @media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .footer-top{ grid-template-columns:1fr; gap:1.5rem; padding-bottom:1.8rem; } .site-footer{ padding:2.5rem 0 1.5rem; } .footer-col h5{ margin-bottom:0.7rem; } .footer-col li{ margin-bottom:0.45rem; } .footer-logo p{ margin-top:0.6rem; } } /* ========================================================================== Sticky mobile quote button ========================================================================== */ .mobile-quote-fab{ display:none; position:fixed; right:1rem; bottom:1rem; z-index:190; } @media (max-width:760px){ .mobile-quote-fab{ display:block; } } .mobile-quote-fab .btn{ box-shadow:0 10px 24px rgba(232,98,26,0.4); padding:0.7em 1.3em; font-size:0.82rem; } /* ========================================================================== Standalone content pages (Privacy Policy) ========================================================================== */ .page-hero{ padding-top:calc(var(--header-h) + 3.5rem); padding-bottom:2.5rem; background:var(--navy); position:relative; overflow:hidden; } .page-hero h1{ color:#fff; font-size:clamp(2rem,4.5vw,3rem); margin-top:0.8rem; } .page-hero p{ color:rgba(255,255,255,0.72); margin-top:1rem; max-width:60ch; } .legal-body{ max-width:760px; } .legal-body h2{ font-size:1.3rem; margin-top:2.4rem; margin-bottom:0.8rem; color:var(--navy); } .legal-body h2:first-child{ margin-top:0; } .legal-body p{ color:var(--ink-60); margin-bottom:1rem; font-size:0.98rem; } .legal-body ul{ padding-left:1.4rem; list-style:disc; margin-bottom:1rem; } .legal-body li{ color:var(--ink-60); margin-bottom:0.5rem; font-size:0.98rem; } .legal-updated{ font-family:var(--f-display); font-weight:600; font-size:0.82rem; color:var(--orange); display:block; margin-bottom:2rem; } /* ========================================================================== Spec download button ========================================================================== */ .spec-download-btn{ margin-top:0.75rem; width:100%; display:flex; align-items:center; justify-content:center; gap:0.6rem; background:var(--panel-accent, var(--navy)); color:#fff; border:none; border-radius:var(--radius-s); padding:0.65rem 1.1rem; font-family:var(--f-display); font-weight:700; font-size:0.86rem; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s ease; } .spec-download-btn svg{ width:17px; height:17px; flex:none; } .spec-download-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(22,50,107,0.25); filter:brightness(1.06); } /* ========================================================================== Download-gate modal ========================================================================== */ .modal-overlay{ position:fixed; inset:0; z-index:400; background:rgba(9,20,45,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:1.2rem; opacity:0; pointer-events:none; transition:opacity .3s ease; } .modal-overlay.-open{ opacity:1; pointer-events:auto; } .modal-card{ background:#fff; border-radius:var(--radius-l); padding:clamp(1.8rem,4vw,2.6rem); max-width:460px; width:100%; position:relative; transform:translateY(18px) scale(0.98); transition:transform .35s var(--ease); max-height:90vh; overflow-y:auto; } .modal-overlay.-open .modal-card{ transform:translateY(0) scale(1); } .modal-close{ position:absolute; top:1.1rem; right:1.1rem; width:34px; height:34px; border-radius:50%; background:var(--mist); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--navy); transition:background .2s ease; } .modal-close:hover{ background:var(--mist-deep); } .modal-close svg{ width:16px; height:16px; } .modal-eyebrow{ font-family:var(--f-display); font-weight:700; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); } .modal-card h3{ margin-top:0.6rem; font-size:1.35rem; color:var(--navy); } .modal-card .product-name{ font-size:0.9rem; color:var(--ink-60); margin-top:0.4rem; } .modal-form{ margin-top:1.6rem; display:flex; flex-direction:column; gap:1rem; } .modal-form label{ font-family:var(--f-display); font-weight:600; font-size:0.82rem; color:var(--navy); display:block; margin-bottom:0.5rem; } .modal-form input{ width:100%; padding:0.8em 1em; border-radius:var(--radius-s); border:1.5px solid var(--line-strong); background:var(--mist); font-family:var(--f-body); font-size:0.98rem; color:var(--ink); } .modal-form input:focus{ border-color:var(--orange); background:#fff; outline:none; } .modal-note{ font-size:0.76rem; color:var(--ink-40); margin-top:0.2rem; } .modal-success{ display:none; text-align:center; padding:1rem 0; } .modal-success.-show{ display:block; } .modal-success svg{ width:52px; height:52px; color:var(--green); margin-bottom:1rem; } .modal-success h4{ font-size:1.15rem; color:var(--navy); } .modal-success p{ margin-top:0.5rem; color:var(--ink-60); font-size:0.92rem; } /* ========================================================================== Global mobile compaction pass — tighter section rhythm on small screens ========================================================================== */ @media (max-width:600px){ .sec-pad{ padding-block:2.5rem; } .trust-strip{ padding-block:1.6rem; } .why-grid{ margin-top:1.6rem; } .product-tabs-row{ margin-top:1.6rem; } .product-panels{ margin-top:1.6rem; } .calc-card{ margin-top:1.6rem; } .guide-grid{ margin-top:1.4rem; } .about-split{ gap:1.6rem; } .hero-actions{ margin-top:1.4rem; } .section-head p{ margin-top:0.6rem; } section .section-head h2{ margin-top:0.4rem; } } /* ========================================================================== Language switcher — fully custom UI (Google's own widget stays hidden) ========================================================================== */ /* Google's widget must stay actually rendered (not display:none) for its internal