/* ===================================================================== Northern Access Floors — Website V2 Original nafl.co.uk design language (corporate blues, system fonts, soft-glide motion + scroll-reveal) applied to the new content. ===================================================================== */ :root { --navy: #0b3b6f; --navy-dark: #072a51; --blue: #1663ac; --blue-bright: #2b7fd0; /* primary CTA / accents */ --blue-pale: #e9f1fa; /* tinted section background */ --blue-border: #c7dbef; --ink: #22303d; --ink-soft: #51677c; --white: #ffffff; --grad: #0b3b6f; --radius: 8px; --shadow: 0 4px 18px rgba(11, 59, 111, 0.12); --shadow-hover: 0 18px 40px rgba(11, 59, 111, 0.16); --w-page: 1200px; --w-content: 1140px; --w-text: 800px; /* ---------- Motion system ---------- Durations: micro (state), standard (movement), enter (entrances). Nothing longer. Easing: ease-enter settles out long; ease-state for hover/press/toggle. Only transform + opacity are animated anywhere. */ --dur-micro: 150ms; --dur-standard: 250ms; --dur-enter: 400ms; --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --ease-state: cubic-bezier(0.4, 0, 0.2, 1); --stagger: 70ms; /* Legacy aliases so pre-existing rules inherit the system above */ --dur-fast: var(--dur-micro); --dur: var(--dur-standard); --dur-slow: var(--dur-standard); --ease: var(--ease-state); /* Elevation ladder — rest / raised (hover) / pressed */ --shadow-rest: 0 1px 3px rgba(11, 59, 111, 0.08); --shadow-raised: 0 12px 28px rgba(11, 59, 111, 0.18); --shadow-press: 0 1px 2px rgba(11, 59, 111, 0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; } h1 { font-size: 2.6rem; margin-bottom: 0.4em; } h2 { font-size: 2rem; margin-bottom: 0.6em; } h3 { font-size: 1.25rem; margin-bottom: 0.4em; } h4 { font-size: 1.02rem; margin-bottom: 0.4em; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } a { color: var(--blue); text-decoration: none; transition: color var(--dur-micro) var(--ease-state); } a:hover { color: var(--blue-bright); } img { max-width: 100%; display: block; } /* ---------- Content links: underline wipes in from the left ---------- transform on a pseudo-element, never text-decoration. Buttons/cards excluded. */ .prose a:not(.btn), .site-footer a, .note a, .tick-list a, .top-bar a { position: relative; text-decoration: none; } .prose a:not(.btn)::after, .site-footer a::after, .note a::after, .tick-list a::after, .top-bar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-standard) var(--ease-state); } .prose a:not(.btn):hover::after, .site-footer a:hover::after, .note a:hover::after, .tick-list a:hover::after, .top-bar a:hover::after, .prose a:not(.btn):focus-visible::after, .site-footer a:focus-visible::after, .tick-list a:focus-visible::after, .top-bar a:focus-visible::after { transform: scaleX(1); } /* ---------- Entrances ---------- Pre-hidden ONLY under .js-ready (set by an inline script in ), so with JS disabled everything renders normally. transform + opacity only → no layout shift. */ .js-ready .section-head, .js-ready .card, .js-ready .cta-band, .js-ready .prose, .js-ready .product-shot { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js-ready .section-head.is-in, .js-ready .card.is-in, .js-ready .cta-band.is-in, .js-ready .prose.is-in, .js-ready .product-shot.is-in { opacity: 1; transform: none; will-change: auto; } /* Hero animates on load (not on scroll) — starts immediately, no flash */ .js-ready .hero h1, .js-ready .hero p.lead, .js-ready .hero .btn-row { animation: enter-up var(--dur-enter) var(--ease-enter) both; } .js-ready .hero p.lead { animation-delay: var(--stagger); } .js-ready .hero .btn-row { animation-delay: calc(var(--stagger) * 2); } @keyframes enter-up { from { opacity: 0; transform: translateY(24px); } } /* ---------- Reduced motion: kill all movement, keep everything visible ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .js-ready .section-head, .js-ready .card, .js-ready .cta-band, .js-ready .prose, .js-ready .product-shot, .js-ready .hero h1, .js-ready .hero p.lead, .js-ready .hero .btn-row { opacity: 1 !important; transform: none !important; will-change: auto !important; } .btn:hover, .btn:active, .card:hover, .js-ready .card.is-in:hover, .to-top.show:hover, .to-top.show:active, .nav-toggle:active, .mobile-bar a:active, .consent input:hover, .consent input:active { transform: none !important; } .card:hover .media-card-img img, .product-card:hover .product-thumb img, .js-ready .card.is-in:hover .media-card-img img { transform: none !important; } } /* Focus rings: always visible, never animated away */ :focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; transition: none; } .hero :focus-visible, .cta-band :focus-visible, .top-bar :focus-visible, .site-footer :focus-visible, .section--navy :focus-visible { outline-color: var(--white); } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 24px; } .wrap-wide { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 24px; } .prose { max-width: var(--w-text); } .section { padding: 68px 0; } .section--grey { background: var(--blue-pale); } .section--navy { background: var(--navy); color: #dbe6f0; } .section--navy h2, .section--navy h3 { color: var(--white); } .section-head { max-width: 60em; margin-bottom: 40px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.78rem; color: var(--blue-bright); margin-bottom: 10px; } .lead { font-size: 1.15rem; color: var(--ink-soft); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 0; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; border: 2px solid transparent; box-shadow: var(--shadow-rest); transition: background-color var(--dur-micro) var(--ease-state), color var(--dur-micro) var(--ease-state), border-color var(--dur-micro) var(--ease-state), transform var(--dur-micro) var(--ease-state), box-shadow var(--dur-micro) var(--ease-state); } /* Press state carries the tactility — lifts on hover, sinks under the finger */ .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised); text-decoration: none; } .btn:active { transform: translateY(1px); box-shadow: var(--shadow-press); } .btn-primary { background: var(--blue-bright); color: var(--white); border-color: var(--blue-bright); } .btn-primary:hover { background: var(--blue); border-color: var(--blue); color: var(--white); } .btn-secondary { background: transparent; color: var(--blue); border-color: var(--blue); } .btn-secondary:hover { background: var(--blue); color: var(--white); } .btn-ghost { background: transparent; color: var(--white); border-color: var(--white); } .btn-ghost:hover { background: var(--white); color: var(--navy); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } /* ---------- Top bar ---------- */ .top-bar { background: var(--navy-dark); color: #cfe0f2; font-size: 0.88rem; } .top-bar .wrap-wide { display: flex; justify-content: flex-end; gap: 28px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; } .top-bar a { color: #cfe0f2; } .top-bar a:hover { color: var(--white); text-decoration: none; } /* ---------- Header / nav ---------- */ /* Sticky header: settles from flat/solid to blurred + lifted once scrolled past ~80px. Background/shadow only — never padding or height, so it can't shift layout. */ .site-header { background: var(--white); border-bottom: 3px solid var(--blue); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-rest); transition: box-shadow var(--dur-standard) var(--ease-state), background-color var(--dur-standard) var(--ease-state); } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; } .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .logo-img { height: 52px; width: auto; transform: translateY(-8px); } /* Scrolled state: translucent + blurred so content passes under it, and it lifts */ .site-header.scrolled { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 6px 24px rgba(11, 59, 111, 0.14); } .main-nav ul { list-style: none; display: flex; align-items: center; gap: 2px; } .main-nav > ul > li { position: relative; } .main-nav > ul > li > a { position: relative; display: block; padding: 10px 12px; color: var(--navy); font-weight: 600; font-size: 0.95rem; border-radius: 6px; transition: color var(--dur-fast) var(--ease); } .main-nav > ul > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--blue-bright); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) var(--ease); } .main-nav > ul > li > a:hover::after { transform: scaleX(1); } .main-nav > ul > li.nav-cta > a::after { display: none; } .main-nav a:hover { color: var(--blue-bright); text-decoration: none; } .main-nav .nav-cta a { background: var(--blue-bright); color: var(--white); margin-left: 8px; border-radius: 0; } .main-nav .nav-cta a:hover { background: var(--blue); color: var(--white); } .main-nav .nav-cta a.active { color: var(--white); } /* keep CTA text visible on its own page */ .has-dropdown > a { padding-right: 24px; } .has-dropdown > a::before { content: "\25BE"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 0.7em; color: var(--ink-soft); transition: transform var(--dur) var(--ease); } @media (hover: hover) and (pointer: fine) { .has-mega:hover > a::before { transform: translateY(-50%) rotate(180deg); } } .main-nav > ul > li > a.active { color: var(--blue-bright); } .main-nav > ul > li > a.active::after { transform: scaleX(1); } /* ---------- Mega menu (full-width, professional) ---------- */ .main-nav > ul > li.has-mega { position: static; } .mega { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1px solid var(--blue-border); border-top: 3px solid var(--blue-bright); border-radius: 0 0 16px 16px; box-shadow: 0 28px 60px rgba(11,59,111,0.22); padding: 30px 34px 32px; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .mega::before { content: ""; position: absolute; top: -26px; left: 0; right: 0; height: 26px; } /* hover bridge */ @media (hover: hover) and (pointer: fine) { .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s; } } .mega-inner { display: grid; grid-template-columns: 1fr 270px; gap: 36px; } .mega-groups { display: grid; gap: 4px 30px; } .mega-cols-3 { grid-template-columns: repeat(3, 1fr); } .mega-cols-2 { grid-template-columns: repeat(2, 1fr); } .mega-head { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; color: var(--ink-soft); margin: 10px 0 6px; padding-left: 13px; } .mega-col:first-child .mega-head { margin-top: 0; } .mega-item { display: block; padding: 8px 13px; border-radius: 9px; opacity: 0; transform: translateY(9px); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } @media (hover: hover) and (pointer: fine) { .has-mega:hover .mega-item, .has-mega:focus-within .mega-item { opacity: 1; transform: none; } .has-mega:hover .mega-col:nth-child(2) .mega-item { transition-delay: 0.05s; } .has-mega:hover .mega-col:nth-child(3) .mega-item { transition-delay: 0.1s; } } .mega-item:hover { background: var(--blue-pale); text-decoration: none; } .mega-item strong { display: block; color: var(--navy); font-size: 0.98rem; font-weight: 600; transition: color var(--dur-fast) var(--ease); } .mega-item small { display: block; color: var(--ink-soft); font-size: 0.8rem; } .mega-item:hover strong { color: var(--blue-bright); } .mega-feature { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(155deg, var(--navy), var(--blue)); color: var(--white); border-radius: 13px; padding: 26px; text-decoration: none; overflow: hidden; position: relative; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .mega-feature::after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.07); } .mega-feature:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11,59,111,0.4); text-decoration: none; } .mega-feature strong { display: block; font-size: 1.12rem; color: var(--white); margin-bottom: 8px; position: relative; } .mega-feature p { font-size: 0.85rem; color: #dce9f7; margin-bottom: 16px; position: relative; } .mega-feature-btn { display: inline-block; font-weight: 700; font-size: 0.9rem; color: #bfe0ff; position: relative; transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease); } .mega-feature:hover .mega-feature-btn { color: #fff; transform: translateX(4px); } .nav-toggle { display: none; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--navy); cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background-color var(--dur-micro) var(--ease-state), transform var(--dur-micro) var(--ease-state), color var(--dur-micro) var(--ease-state); } .nav-toggle:hover { background: var(--blue-pale); color: var(--blue-bright); } .nav-toggle:active { transform: scale(0.92); } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--navy); color: var(--white); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(1100px 460px at 78% -12%, rgba(43,127,208,0.40), transparent 60%), repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 46px), linear-gradient(180deg, #0d3d73 0%, #0b3b6f 100%); } .hero .wrap { position: relative; z-index: 1; } .hero-inner { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: center; padding: 96px 0; } .hero h1 { color: var(--white); margin-bottom: 18px; max-width: 15em; } .hero p.lead { font-size: 1.2rem; color: #dce9f7; max-width: 34em; } .hero-media { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/10; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero--compact .hero-inner { grid-template-columns: 1fr; padding: 56px 0; } .hero--compact .hero-media { display: none; } /* ---------- Video hero ---------- Looping muted background video behind the copy. A soft left-weighted gradient keeps the white text legible without a heavy uniform scrim. Navy shows through if the video is unavailable (element background) so text is always readable. */ .hero--video::before { display: none; } .hero--video .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } /* Hide the native play-button overlay iOS/Safari shows on a not-yet-playing video */ .hero-video::-webkit-media-controls, .hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } .hero--video::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,32,60,0.72) 0%, rgba(8,32,60,0.34) 48%, rgba(8,32,60,0.10) 100%); } .hero--video .wrap { position: relative; z-index: 2; } /* Mobile: skip the 4MB autoplay, fall back to the navy hero */ @media (max-width: 767px) { .hero--video .hero-video { display: none; } .hero--video::after { display: none; } } /* ---------- Photo hero ---------- Full-bleed background image behind the copy. Several source photos are very bright, so the legibility gradient is strong on the left (where the headline sits) and fades to reveal the image on the right. */ .hero--photo::before { display: none; } .hero--photo .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7,26,51,0.92) 0%, rgba(7,26,51,0.72) 32%, rgba(7,26,51,0.40) 62%, rgba(7,26,51,0.12) 100%); } .hero--photo .wrap { position: relative; z-index: 2; } /* Mobile: keep the image but darken more evenly so text stays readable */ @media (max-width: 767px) { .hero--photo::after { background: linear-gradient(180deg, rgba(7,26,51,0.78) 0%, rgba(7,26,51,0.62) 60%, rgba(7,26,51,0.55) 100%); } } /* Image placeholder */ .img-ph { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 14px, rgba(255,255,255,0.02) 14px, rgba(255,255,255,0.02) 28px); color: #a9c1d8; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 0.85rem; width: 100%; height: 100%; min-height: 230px; } .section--grey .img-ph, .plain .img-ph { background: repeating-linear-gradient(45deg, #dde8f3, #dde8f3 14px, #e7f0f8 14px, #e7f0f8 28px); color: #7690a7; border-radius: var(--radius); } /* ---------- Proof strip ---------- */ .proof-strip { background: linear-gradient(180deg, #f6f7f9 0%, #e6e9ed 100%); border-top: 1px solid #d7dce1; border-bottom: 1px solid #d1d6db; } .proof-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 26px; padding-bottom: 26px; } .proof-item { display: flex; flex-direction: column; gap: 2px; } .proof-item strong { color: var(--navy); font-size: 1rem; } .proof-item span { font-size: 0.85rem; color: var(--ink-soft); } /* ---------- Card grids ---------- */ .card-grid { display: grid; gap: 26px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--blue-border); border-radius: 12px; padding: 30px 26px; box-shadow: var(--shadow-rest); display: flex; flex-direction: column; transition: transform var(--dur-standard) var(--ease-state), box-shadow var(--dur-standard) var(--ease-state), border-color var(--dur-standard) var(--ease-state); } /* Top accent wipes in from the left on hover — clean by default, alive on hover */ .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue-bright), var(--blue)); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-standard) var(--ease-state); z-index: 1; } .card:hover, .js-ready .card.is-in:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); border-color: var(--blue-bright); } .card:hover::before { transform: scaleX(1); } .card:hover { will-change: transform; } .card h3 { color: var(--navy); } /* Editorial eyebrow label (accent line + spaced uppercase) — not a pill/chip */ .card .tag { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--blue); background: none; border: 0; padding: 0; margin-bottom: 14px; transition: color var(--dur-fast) var(--ease); } .card .tag::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--blue-bright); flex: none; transition: width var(--dur) var(--ease); } .card:hover .tag { color: var(--navy); } .card:hover .tag::before { width: 34px; } .card p { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 16px; } .card .card-link { margin-top: auto; font-weight: 600; font-size: 0.95rem; color: var(--blue-bright); } .card .card-link::after { content: " \2192"; display: inline-block; transition: transform var(--dur) var(--ease); } .card:hover .card-link::after { transform: translateX(5px); } .media-card { padding: 0; overflow: hidden; border-top: 1px solid var(--blue-border); } /* Fixed height (not aspect-ratio, which the image's own size overrides) so every project card has an identical image band — portrait photos crop instead of stretching the card */ .media-card .media-card-img { height: 210px; overflow: hidden; } .media-card .media-card-img .img-ph { min-height: 0; height: 100%; } .media-card .media-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-standard) var(--ease-state); } /* Image moves inside its frame; the frame itself never moves (overflow clipped above) */ .card:hover .media-card-img img, .js-ready .card.is-in:hover .media-card-img img { transform: scale(1.04); } /* Official Tate product render — no frame, sits directly on the page/card */ .product-shot { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .product-shot img { max-width: 100%; max-height: 420px; width: auto; height: auto; } /* Thumbnail on product cards. Fixed height (not aspect-ratio) so every render — square or landscape — centres in an identical box and card text lines up. */ .product-card .product-thumb { display: flex; align-items: center; justify-content: center; height: 168px; margin-bottom: 18px; overflow: hidden; } .product-card .product-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; transition: transform var(--dur-standard) var(--ease-state); } .product-card:hover .product-thumb img, .js-ready .product-card.is-in:hover .product-thumb img { transform: scale(1.04); } .media-card .media-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } /* ---------- CTA band ---------- */ .cta-band { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; box-shadow: var(--shadow); } .cta-band h2 { color: var(--white); margin-bottom: 6px; } .cta-band p { color: #cfe0f2; margin: 0; max-width: 560px; } /* ---------- Lists ---------- */ .tick-list { list-style: none; } .tick-list li { position: relative; padding: 8px 0 8px 34px; } .tick-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--blue-pale); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231663ac' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; transition: background-color var(--dur-fast) var(--ease); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .split > * { min-width: 0; } .note { background: var(--blue-pale); border-left: 4px solid var(--blue-bright); border-radius: 6px; padding: 18px 22px; font-size: 0.95rem; color: var(--ink); margin: 24px 0; } /* ---------- Forms ---------- */ .form-card { background: var(--white); border: 1px solid var(--blue-border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; min-width: 0; } .field.full { grid-column: 1 / -1; } .field label { font-weight: 600; font-size: 0.88rem; color: var(--navy); } .field input, .field select, .field textarea { width: 100%; max-width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1rem; padding: 11px 13px; border: 1px solid var(--blue-border); border-radius: 6px; background: var(--white); color: var(--ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--blue-bright); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(43,127,208,0.18); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 1px; } .consent input { cursor: pointer; transition: transform var(--dur-micro) var(--ease-state); } .consent input:hover { transform: scale(1.1); } .consent input:active { transform: scale(0.95); } .field textarea { min-height: 120px; resize: vertical; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-soft); } .consent input { margin-top: 4px; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy); color: #b9cbdb; padding: 56px 0 0; font-size: 0.95rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; } .site-footer h4 { color: var(--white); margin-bottom: 14px; font-size: 1rem; } .site-footer ul { list-style: none; } .site-footer li { margin-bottom: 9px; } .site-footer a { color: #b9cbdb; } .site-footer a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 46px; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: #8ba3b8; } /* ---------- Sticky mobile contact bar ---------- */ .mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; background: var(--navy); border-top: 2px solid var(--blue-bright); } .mobile-bar a { flex: 1; text-align: center; color: var(--white); font-weight: 600; font-size: 0.8rem; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: background-color var(--dur-micro) var(--ease-state), transform var(--dur-micro) var(--ease-state); } .mobile-bar a:hover { text-decoration: none; background: rgba(255,255,255,0.08); } .mobile-bar a:active { transform: translateY(1px); } .mobile-bar a.primary:hover { background: var(--blue); } .mobile-bar a.primary { background: var(--blue-bright); } .mobile-bar .ic { font-size: 1.05rem; } /* ---------- Back to top ---------- */ .to-top { position: fixed; right: 24px; bottom: 24px; z-index: 110; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease), visibility 0s linear var(--dur); } .to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease), visibility 0s; } .to-top.show:hover { background: var(--blue-bright); transform: translateY(-1px); box-shadow: var(--shadow-raised); } .to-top.show:active { transform: translateY(1px); box-shadow: var(--shadow-press); } /* Anchor jumps clear the sticky header */ :target { scroll-margin-top: 100px; } /* Mega menu: brief close delay so it doesn't snap shut on a cut corner (desktop only) */ @media (min-width: 1161px) { .has-mega .mega { transition-delay: 0.12s; } .has-mega:hover .mega, .has-mega:focus-within .mega { transition-delay: 0s; } } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1160px) { .nav-toggle { display: block; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 3px solid var(--blue); box-shadow: var(--shadow); padding: 10px 16px 20px; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .main-nav.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .main-nav > ul > li > a { padding: 12px 10px; border-bottom: 1px solid var(--blue-border); } .main-nav > ul > li > a::after { display: none; } .main-nav .nav-cta a { margin: 12px 0 0; text-align: center; justify-content: center; } .has-dropdown > a::before { top: 22px; transform: none; } .has-mega.open > a::before { transform: rotate(180deg); } /* Mega becomes a stacked accordion on mobile */ .main-nav > ul > li.has-mega { position: static; } .mega { position: static; opacity: 1; visibility: hidden; transform: none; pointer-events: auto; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 14px; max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); } .mega::before { display: none; } .mega-inner { grid-template-columns: 1fr; gap: 6px; } .mega-groups { grid-template-columns: 1fr !important; gap: 0; } .mega-item { opacity: 1; transform: none; padding: 10px 12px; } .mega-head { margin: 14px 0 4px; padding-left: 12px; } .mega-feature { display: none; } .has-mega.open .mega { max-height: 1600px; visibility: visible; padding-bottom: 12px; } } @media (max-width: 960px) { h1 { font-size: 2.1rem; } h2 { font-size: 1.7rem; } .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 60px 0; } .hero-media { display: none; } .split { grid-template-columns: 1fr; gap: 30px; } .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(2, 1fr); } .proof-strip .wrap { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .cta-band { padding: 34px 28px; } } @media (max-width: 620px) { body { font-size: 16px; padding-bottom: 60px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } .section { padding: 48px 0; } .logo-img { height: 44px; } .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .top-bar { display: none; } .mobile-bar { display: flex; } /* Top-bar hidden here but the fixed mobile bar sits at the bottom — let the scrollable nav reach nearer the top and keep its last items above the bar */ .main-nav { max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); padding-bottom: 88px; } .cta-band { flex-direction: column; align-items: flex-start; } .to-top { bottom: 72px; right: 14px; width: 42px; height: 42px; } /* clear the sticky contact bar */ }