must not add its own top padding. Used by the home page hero. */ .nv-page--overlay { padding-top: 0; } /* -------------------------------------------------------------------------- 8. HERO SLIDER -------------------------------------------------------------------------- */ .nv-hero { position: relative; min-height: clamp(620px, 88vh, 860px); display: grid; isolation: isolate; background: var(--nv-primary-900); } .nv-hero__slides { position: absolute; inset: 0; overflow: hidden; } .nv-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--nv-ease), visibility 1s; } .nv-hero__slide.is-active { opacity: 1; visibility: visible; } .nv-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 8s linear; } .nv-hero__slide.is-active img { transform: scale(1); } .nv-hero__slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4,20,45,.9) 0%, rgba(5,28,69,.74) 42%, rgba(5,28,69,.3) 78%, rgba(5,28,69,.42) 100%), linear-gradient(180deg, rgba(4,20,45,.6) 0%, transparent 30%, rgba(3,14,32,.5) 100%); } .nv-hero__inner { position: relative; z-index: 2; width: 100%; align-self: center; padding-top: calc(var(--nv-topbar-h) + var(--nv-navbar-h) + clamp(2rem, 5vw, 5rem)); padding-bottom: clamp(4rem, 8vw, 7rem); } .nv-hero__content { max-width: 760px; } .nv-hero__tag { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border-radius: var(--nv-r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(8px); color: #fff; font-size: .84rem; font-weight: 500; letter-spacing: .04em; margin-bottom: 1.5rem; } .nv-hero__tag i { color: var(--nv-accent); } .nv-hero h1 { color: #fff; margin-bottom: 1.25rem; text-wrap: balance; } .nv-hero h1 em { font-style: normal; color: var(--nv-accent); } .nv-hero__text { font-size: clamp(1.02rem, .98rem + .32vw, 1.2rem); color: rgba(255,255,255,.82); max-width: 620px; margin-bottom: 2rem; } .nv-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; } /* per-slide entrance */ .nv-hero__slide-copy > * { opacity: 0; transform: translateY(26px); } .nv-hero__slide-copy.is-active > * { opacity: 1; transform: none; transition: opacity .8s var(--nv-ease), transform .8s var(--nv-ease); } .nv-hero__slide-copy.is-active > *:nth-child(1) { transition-delay: .1s; } .nv-hero__slide-copy.is-active > *:nth-child(2) { transition-delay: .22s; } .nv-hero__slide-copy.is-active > *:nth-child(3) { transition-delay: .34s; } .nv-hero__slide-copy.is-active > *:nth-child(4) { transition-delay: .46s; } .nv-hero__slide-copy:not(.is-active) { display: none; } /* controls */ /* Controls clear the trust strip, which overlaps the hero by ~70px. */ .nv-hero__nav { position: absolute; z-index: 6; bottom: clamp(6rem, 9vw, 7.5rem); right: var(--nv-gutter); display: flex; gap: .6rem; } .nv-hero__arrow { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.1); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background .28s var(--nv-ease), transform .28s var(--nv-ease), color .28s var(--nv-ease); } .nv-hero__arrow:hover { background: #fff; color: var(--nv-primary); transform: translateY(-2px); } .nv-hero__dots { position: absolute; z-index: 6; bottom: clamp(6rem, 9vw, 7.5rem); left: var(--nv-gutter); display: flex; gap: .75rem; align-items: center; } /* The visible mark is a 4px bar, which is far too thin to hit with a thumb. The button is therefore 24px tall (WCAG 2.5.8) with the extra height as transparent padding, and background-clip keeps the paint on the 4px content box so it still reads as a thin bar. */ .nv-hero__dot { width: 42px; height: 24px; border: 0; padding-block: 10px; padding-inline: 0; border-radius: 4px; background: rgba(255,255,255,.3); background-clip: content-box; cursor: pointer; transition: background .3s var(--nv-ease), width .3s var(--nv-ease); } .nv-hero__dot.is-active { background: var(--nv-accent); background-clip: content-box; width: 64px; } /* -------------------------------------------------------------------------- 9. PAGE HERO (inner pages) -------------------------------------------------------------------------- */ .nv-pagehero { position: relative; isolation: isolate; background: var(--nv-grad-deep); color: #fff; padding-top: calc(var(--nv-topbar-h) + var(--nv-navbar-h) + clamp(3rem, 6vw, 6rem)); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); overflow: hidden; } .nv-pagehero__bg { position: absolute; inset: 0; z-index: -2; } .nv-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; } .nv-pagehero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(4,20,45,.94) 0%, rgba(5,28,69,.82) 48%, rgba(5,28,69,.55) 100%), radial-gradient(90% 120% at 88% 0%, rgba(0,174,239,.26), transparent 60%); } .nv-pagehero h1 { color: #fff; margin-bottom: .75rem; } .nv-pagehero p:not(.nv-eyebrow) { color: rgba(255,255,255,.8); max-width: 640px; font-size: 1.08rem; margin: 0; } /* The page-hero label sits under a much larger H1 than a section heading does, so it carries a slightly bigger size. It was already rendering at this size, but only as a side effect of .nv-pagehero p winning on specificity — stating it here makes it a decision rather than an accident. */ .nv-pagehero .nv-eyebrow { font-size: 1.05rem; color: var(--nv-accent); } .nv-crumbs { margin-top: 1.75rem; } .nv-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: .87rem; color: rgba(255,255,255,.6); } .nv-crumbs li + li::before { content: "/"; margin-right: .5rem; color: rgba(255,255,255,.35); } .nv-crumbs a { color: rgba(255,255,255,.82); } .nv-crumbs a:hover { color: var(--nv-accent); } .nv-crumbs [aria-current="page"] { color: var(--nv-accent); } /* -------------------------------------------------------------------------- 10. FEATURE / TRUST STRIP -------------------------------------------------------------------------- */ .nv-strip { position: relative; z-index: 5; margin-top: -70px; } .nv-strip__inner { background: #fff; border-radius: var(--nv-r-lg); box-shadow: var(--nv-sh-lg); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); } .nv-strip__item { display: flex; align-items: flex-start; gap: 1rem; } .nv-strip__item + .nv-strip__item { border-left: 1px solid var(--nv-line); padding-left: clamp(1rem, 2vw, 2rem); } .nv-strip__icon { flex: 0 0 auto; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; font-size: 1.25rem; color: var(--nv-primary); background: var(--nv-grad-soft); } .nv-strip__item h3 { font-size: 1rem; margin-bottom: .2rem; } .nv-strip__item p { font-size: .875rem; color: var(--nv-muted); margin: 0; } /* -------------------------------------------------------------------------- 11. MEDIA + TEXT SPLIT -------------------------------------------------------------------------- */ .nv-figure { position: relative; border-radius: var(--nv-r-lg); overflow: hidden; box-shadow: var(--nv-sh-lg); } .nv-figure img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; } .nv-figure--tall img { aspect-ratio: 3 / 4; } .nv-figure--wide img { aspect-ratio: 16 / 10; } .nv-figure__badge { position: absolute; right: 1.25rem; bottom: 1.25rem; padding: 1rem 1.35rem; border-radius: var(--nv-r); background: rgba(255,255,255,.96); box-shadow: var(--nv-sh-md); text-align: center; } .nv-figure__badge strong { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--nv-primary); } .nv-figure__badge span { font-size: .78rem; color: var(--nv-muted); } .nv-ticks { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .7rem; } .nv-ticks li { display: flex; align-items: flex-start; gap: .75rem; font-size: .97rem; } .nv-ticks i { color: var(--nv-accent); margin-top: .38em; flex: 0 0 auto; } .section--deep .nv-ticks li { color: rgba(255,255,255,.82); } .nv-ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } /* numbered value list */ .nv-steps { list-style: none; margin: 0; padding: 0; counter-reset: nvstep; display: grid; gap: 1.5rem; } .nv-steps li { display: flex; gap: 1.15rem; counter-increment: nvstep; } .nv-steps li::before { content: counter(nvstep, decimal-leading-zero); flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: .95rem; font-weight: 700; color: #fff; background: var(--nv-grad); } .nv-steps h3 { font-size: 1.05rem; margin-bottom: .3rem; } .nv-steps p { font-size: .93rem; color: var(--nv-muted); margin: 0; } /* horizontal process strip */ .nv-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); } .nv-process__item { position: relative; text-align: center; } .nv-process__item::after { content: ""; position: absolute; top: 34px; left: calc(50% + 46px); right: calc(-50% + 46px); height: 2px; background: repeating-linear-gradient(90deg, var(--nv-line) 0 8px, transparent 8px 16px); } .nv-process__item:last-child::after { display: none; } .nv-process__num { width: 68px; height: 68px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 20px; font-size: 1.35rem; color: #fff; background: var(--nv-grad); box-shadow: 0 10px 24px rgba(10,61,145,.24); } .nv-process__item h3 { font-size: 1.05rem; margin-bottom: .4rem; } .nv-process__item p { font-size: .92rem; color: var(--nv-muted); margin: 0; } /* -------------------------------------------------------------------------- 12. COUNTERS -------------------------------------------------------------------------- */ .nv-counters { position: relative; isolation: isolate; background: var(--nv-grad-deep); overflow: hidden; } .nv-counters::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 130% at 82% 8%, rgba(0,174,239,.3), transparent 58%); } .nv-counters__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } .nv-counter { text-align: center; color: #fff; } .nv-counter i { font-size: 1.7rem; color: var(--nv-accent); margin-bottom: .85rem; display: block; } .nv-counter__num { display: flex; align-items: baseline; justify-content: center; gap: .1rem; font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; } .nv-counter__num span:last-child { color: var(--nv-accent); } .nv-counter p { margin: .7rem 0 0; font-size: .93rem; color: rgba(255,255,255,.74); } /* -------------------------------------------------------------------------- 13. TESTIMONIALS -------------------------------------------------------------------------- */ .nv-quotes { position: relative; overflow: hidden; } .nv-quotes__track { display: flex; transition: transform .6s var(--nv-ease); } .nv-quotes__item { flex: 0 0 100%; padding: .5rem; } .nv-quote { background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-r-lg); box-shadow: var(--nv-sh-md); padding: clamp(2rem, 4vw, 3.25rem); text-align: center; max-width: 860px; margin-inline: auto; } .nv-quote__mark { font-size: 2.2rem; color: var(--nv-accent); margin-bottom: 1.25rem; } .nv-quote blockquote { margin: 0 0 1.75rem; font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); line-height: 1.7; color: var(--nv-primary-900); font-weight: 500; } .nv-quote__stars { color: #F2B33D; margin-bottom: 1rem; font-size: .9rem; letter-spacing: .12em; } .nv-quote__who { font-weight: 600; color: var(--nv-primary); } .nv-quote__role { font-size: .87rem; color: var(--nv-muted); } /* Gap is 1rem rather than the .55rem the dots visually need: each button carries an invisible 24px hit area (below) that reaches 7px past the dot on every side, so a tighter gap would make neighbouring targets overlap and a tap near the midpoint ambiguous. */ .nv-dots { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; } .nv-dots button { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(10,61,145,.2); cursor: pointer; transition: background .3s var(--nv-ease), width .3s var(--nv-ease), border-radius .3s var(--nv-ease); } /* WCAG 2.5.8 target size. The dot animates its width and border-radius, so the hit area is a centred overlay rather than padding on the button itself -- padding would distort the shape mid-transition. */ .nv-dots button::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; min-width: 100%; height: 24px; } .nv-dots button.is-active { background: var(--nv-grad); width: 30px; border-radius: 6px; } /* -------------------------------------------------------------------------- 14. BRAND MARQUEE -------------------------------------------------------------------------- */ .nv-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); } .nv-marquee__track { display: flex; width: max-content; animation: nv-scroll 38s linear infinite; } .nv-marquee:hover .nv-marquee__track { animation-play-state: paused; } .nv-marquee__item { flex: 0 0 auto; width: clamp(160px, 16vw, 220px); height: 84px; margin-inline: clamp(.5rem, 1.5vw, 1.5rem); display: grid; place-items: center; padding: 0 1.25rem; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: #fff; color: var(--nv-muted); font-weight: 600; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; filter: grayscale(1); opacity: .62; transition: opacity .3s var(--nv-ease), filter .3s var(--nv-ease), color .3s var(--nv-ease); } .nv-marquee__item:hover { opacity: 1; filter: none; color: var(--nv-primary); } @keyframes nv-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 15. CTA BAND -------------------------------------------------------------------------- */ .nv-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--nv-r-lg); background: var(--nv-grad-deep); color: #fff; padding: clamp(2.5rem, 5vw, 4.5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .nv-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 140% at 92% 12%, rgba(0,174,239,.36), transparent 58%), radial-gradient(60% 120% at 4% 96%, rgba(0,174,239,.16), transparent 60%); } .nv-cta h2 { color: #fff; margin-bottom: .5rem; } .nv-cta p { color: rgba(255,255,255,.78); margin: 0; max-width: 560px; } .nv-cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 16. ACCORDION (FAQ) -------------------------------------------------------------------------- */ .nv-faq .accordion-item { border: 1px solid var(--nv-line); border-radius: var(--nv-r) !important; margin-bottom: 1rem; overflow: hidden; background: #fff; box-shadow: var(--nv-sh-sm); } .nv-faq .accordion-button { padding: 1.35rem 1.6rem; font-size: 1.02rem; font-weight: 600; color: var(--nv-primary-900); background: #fff; box-shadow: none; } .nv-faq .accordion-button:not(.collapsed) { color: var(--nv-primary); background: var(--nv-bg); } .nv-faq .accordion-button:focus { box-shadow: none; border-color: transparent; } .nv-faq .accordion-button::after { width: 1.1rem; height: 1.1rem; background-size: 1.1rem; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A3D91'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); } .nv-faq .accordion-body { padding: 0 1.6rem 1.5rem; color: var(--nv-muted); font-size: .96rem; } /* -------------------------------------------------------------------------- 17. FORMS -------------------------------------------------------------------------- */ .nv-form__group { margin-bottom: 1.15rem; } .nv-form label { display: block; font-size: .87rem; font-weight: 600; color: var(--nv-primary-900); margin-bottom: .45rem; } .nv-form label .req { color: #C4322B; } .nv-form .form-control, .nv-form .form-select { padding: .85rem 1.1rem; font-size: .96rem; border: 1.5px solid var(--nv-line); border-radius: var(--nv-r-sm); background: #fff; color: var(--nv-text); transition: border-color .24s var(--nv-ease), box-shadow .24s var(--nv-ease); } .nv-form .form-control::placeholder { color: #9BAABC; } .nv-form .form-control:focus, .nv-form .form-select:focus { border-color: var(--nv-secondary); box-shadow: 0 0 0 4px rgba(11,106,191,.12); outline: 0; } .nv-form textarea.form-control { min-height: 150px; resize: vertical; } .nv-form .form-control[aria-invalid="true"], .nv-form .form-select[aria-invalid="true"] { border-color: #C4322B; box-shadow: 0 0 0 4px rgba(196,50,43,.1); } .nv-form__error { display: none; margin-top: .4rem; font-size: .82rem; font-weight: 500; color: #C4322B; } .nv-form__error.is-shown { display: block; } .nv-form .form-check-input { border-color: #B7C6D6; } .nv-form .form-check-input:checked { background-color: var(--nv-primary); border-color: var(--nv-primary); } .nv-form .form-check-label { font-size: .88rem; font-weight: 400; color: var(--nv-muted); } /* honeypot — visually gone, still reachable by bots */ .nv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .nv-alert { display: none; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--nv-r-sm); font-size: .93rem; margin-bottom: 1.25rem; } .nv-alert.is-shown { display: flex; } .nv-alert--ok { background: #E8F6EE; color: #1B6B43; border: 1px solid #B8E3CB; } .nv-alert--fail { background: #FDECEA; color: #98221C; border: 1px solid #F4C7C3; } .nv-alert i { margin-top: .18em; } .nv-form__note { font-size: .82rem; color: var(--nv-muted); margin-top: 1rem; } .is-busy { pointer-events: none; opacity: .72; } .nv-spinner { display: none; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: nv-spin .7s linear infinite; } .is-busy .nv-spinner { display: inline-block; } @keyframes nv-spin { to { transform: rotate(360deg); } } /* map placeholder */ .nv-map { position: relative; height: 100%; min-height: 420px; border-radius: var(--nv-r-lg); overflow: hidden; background: radial-gradient(60% 60% at 30% 25%, rgba(0,174,239,.14), transparent 60%), linear-gradient(160deg, #E7F0F9 0%, #D6E6F4 100%); border: 1px solid var(--nv-line); display: grid; place-items: center; text-align: center; padding: 2rem; } .nv-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(10,61,145,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(10,61,145,.07) 1px, transparent 1px); background-size: 44px 44px; } .nv-map__pin { position: relative; font-size: 2.6rem; color: var(--nv-primary); margin-bottom: .75rem; } .nv-map__body { position: relative; } .nv-map__body h3 { font-size: 1.05rem; margin-bottom: .35rem; } .nv-map__body p { font-size: .9rem; color: var(--nv-muted); margin: 0; } .nv-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Address panel drawn over the map. The marker cannot show it: Google strips a label passed next to coordinates, and moving the address into q= hands placement back to the geocoder. Drawing it here keeps the pin exact, keeps the wording ours, and keeps the address in this page's accessibility tree -- the marker's bubble is cross-origin. Top-left on purpose: Google's logo and attribution own the bottom edge and must stay visible. */ .nv-map__card { position: absolute; z-index: 2; top: 1rem; left: 1rem; max-width: min(17rem, calc(100% - 2rem)); padding: .9rem 1rem; text-align: left; border-radius: var(--nv-r); border: 1px solid var(--nv-line); background: rgba(255, 255, 255, .95); box-shadow: var(--nv-sh-sm); } .nv-map__card-name { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 .4rem; font-weight: 600; font-size: .95rem; color: var(--nv-text); } .nv-map__card-name i { color: var(--nv-secondary); } .nv-map__card-addr { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.5; color: var(--nv-muted); } .nv-map__card-link { display: inline-flex; gap: .4rem; align-items: center; padding-block: .25rem; font-size: .85rem; font-weight: 600; color: var(--nv-secondary); text-decoration: none; } .nv-map__card-link:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 18. STORE FILTER -------------------------------------------------------------------------- */ .nv-filter { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-r); box-shadow: var(--nv-sh-sm); margin-bottom: 2.5rem; } .nv-filter__pills { display: flex; gap: .5rem; flex-wrap: wrap; } .nv-pill { padding: .55rem 1.15rem; border-radius: var(--nv-r-pill); border: 1.5px solid var(--nv-line); background: #fff; color: var(--nv-muted); font-size: .875rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .26s var(--nv-ease); } .nv-pill:hover { border-color: var(--nv-secondary); color: var(--nv-primary); } .nv-pill.is-active { background: var(--nv-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(10,61,145,.24); } .nv-search { position: relative; flex: 0 1 300px; } .nv-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--nv-muted); font-size: .9rem; } .nv-search input { width: 100%; padding: .7rem 1rem .7rem 2.6rem; font-size: .92rem; font-family: inherit; border: 1.5px solid var(--nv-line); border-radius: var(--nv-r-pill); color: var(--nv-text); } .nv-search input:focus { outline: 0; border-color: var(--nv-secondary); box-shadow: 0 0 0 4px rgba(11,106,191,.12); } .nv-result-count { font-size: .88rem; color: var(--nv-muted); margin-bottom: 1.5rem; } .nv-result-count strong { color: var(--nv-primary); } .nv-empty { display: none; text-align: center; padding: clamp(3rem, 6vw, 5rem) 1.5rem; border: 1.5px dashed var(--nv-line); border-radius: var(--nv-r-lg); background: var(--nv-bg); } .nv-empty.is-shown { display: block; } .nv-empty i { font-size: 2.4rem; color: var(--nv-line); margin-bottom: 1rem; display: block; } .nv-empty h3 { font-size: 1.1rem; margin-bottom: .4rem; } .nv-empty p { color: var(--nv-muted); font-size: .94rem; margin: 0; } .nv-grid-item.is-hidden { display: none; } /* -------------------------------------------------------------------------- 19. MODAL (quote request) -------------------------------------------------------------------------- */ .modal-content { border: 0; border-radius: var(--nv-r-lg); box-shadow: var(--nv-sh-lg); } .modal-header { padding: 1.75rem 1.75rem 1rem; border-bottom: 0; } .modal-title { font-size: 1.3rem; margin: 0; } .modal-header p { font-size: .92rem; color: var(--nv-muted); margin: .35rem 0 0; } .modal-body { padding: .5rem 1.75rem 1.75rem; } /* -------------------------------------------------------------------------- 20. TIMELINE -------------------------------------------------------------------------- */ .nv-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.5rem; } .nv-timeline::before { content: ""; position: absolute; left: 11px; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(180deg, var(--nv-accent), rgba(10,61,145,.14)); } .nv-timeline li { position: relative; padding-bottom: 2rem; } .nv-timeline li:last-child { padding-bottom: 0; } .nv-timeline li::before { content: ""; position: absolute; left: -2.5rem; top: .5rem; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--nv-accent); box-shadow: 0 0 0 5px rgba(0,174,239,.12); } .nv-timeline h3 { font-size: 1.05rem; margin-bottom: .3rem; } .nv-timeline p { font-size: .93rem; color: var(--nv-muted); margin: 0; } .nv-timeline__when { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nv-secondary); margin-bottom: .35rem; } /* -------------------------------------------------------------------------- 21. FOOTER -------------------------------------------------------------------------- */ .nv-footer { position: relative; background: var(--nv-primary-900); color: rgba(255,255,255,.7); overflow: hidden; } .nv-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 100% at 88% 0%, rgba(11,106,191,.34), transparent 58%); } .nv-footer > * { position: relative; } .nv-footer__main { padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem); } .nv-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: clamp(2rem, 4vw, 3.5rem); } .nv-footer h3 { font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1.35rem; } .nv-footer__logo { height: 58px; width: auto; margin-bottom: 1.35rem; } .nv-footer p { font-size: .93rem; color: rgba(255,255,255,.66); } .nv-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .nv-footer__list a { font-size: .93rem; color: rgba(255,255,255,.68); display: inline-flex; align-items: center; gap: .5rem; } .nv-footer__list a::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem; color: var(--nv-accent); transition: transform .26s var(--nv-ease); } .nv-footer__list a:hover { color: #fff; } .nv-footer__list a:hover::before { transform: translateX(3px); } /* shared by the footer and the mobile drawer — colours are re-stated per context */ .nv-contact-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1rem; } .nv-contact-list li { display: flex; gap: .85rem; font-size: .93rem; color: var(--nv-muted); } .nv-contact-list i { color: var(--nv-secondary); margin-top: .28em; flex: 0 0 auto; } .nv-contact-list a { color: inherit; } .nv-contact-list a:hover { color: var(--nv-primary); } .nv-footer .nv-contact-list li { color: rgba(255,255,255,.72); } .nv-footer .nv-contact-list i { color: var(--nv-accent); } .nv-footer .nv-contact-list a:hover { color: #fff; } .nv-social { display: flex; gap: .6rem; margin-top: 1.5rem; } .nv-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); transition: all .28s var(--nv-ease); } .nv-social a:hover { background: var(--nv-accent); border-color: var(--nv-accent); color: #04203f; transform: translateY(-3px); } .nv-footer__bar { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .87rem; color: rgba(255,255,255,.56); } .nv-footer__bar a { color: rgba(255,255,255,.68); } .nv-footer__bar a:hover { color: var(--nv-accent); } .nv-footer__bar ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 21b. 404 PAGE -------------------------------------------------------------------------- */ .nv-404 { min-height: 100vh; display: grid; align-items: center; } .nv-404__logo { height: 64px; width: auto; } .nv-404__text { max-width: 36rem; margin-inline: auto; } .nv-404 .nv-crumbs ol { justify-content: center; } /* -------------------------------------------------------------------------- 22. BACK TO TOP -------------------------------------------------------------------------- */ .nv-top { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 1030; width: 50px; height: 50px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--nv-grad); color: #fff; font-size: 1rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); box-shadow: 0 10px 26px rgba(10,61,145,.34); transition: opacity .32s var(--nv-ease), transform .32s var(--nv-ease), visibility .32s; } .nv-top.is-shown { opacity: 1; visibility: visible; transform: none; } .nv-top:hover { transform: translateY(-3px); } /* -------------------------------------------------------------------------- 23. SCROLL ANIMATION (replaces AOS — driven by IntersectionObserver in main.js) -------------------------------------------------------------------------- */ /* Everything here is gated behind the `js` class, which the inline script in each page's adds immediately. If JavaScript is disabled or fails to load, the class is never added, these rules never apply, and the content simply renders visible — rather than sitting at opacity:0 forever. */ .js [data-animate] { opacity: 0; transform: translateY(30px); transition: opacity .75s var(--nv-ease), transform .75s var(--nv-ease); will-change: opacity, transform; } .js [data-animate="left"] { transform: translateX(-36px); } .js [data-animate="right"] { transform: translateX(36px); } .js [data-animate="zoom"] { transform: scale(.94); } .js [data-animate="fade"] { transform: none; } .js [data-animate].is-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 24. REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-animate] { opacity: 1 !important; transform: none !important; } .nv-hero__slide img { transform: none; } .nv-marquee__track { animation: none; } } /* -------------------------------------------------------------------------- 25. PRINT -------------------------------------------------------------------------- */ @media print { .nv-header, .nv-top, .nv-hero__nav, .nv-hero__dots, .nv-drawer, .nv-backdrop, .nv-marquee { display: none !important; } .nv-page { padding-top: 0; } body { color: #000; } }