/* Self-hosted fonts. Previously two render-blocking requests to Google (the stylesheet, then the woff2 files it pointed at), which put the font behind a third-party round trip and made text swap in well after first paint. Served from our own origin now and preloaded in the , so the swap window is much smaller. Structure mirrors what Google Fonts served: one file per subset, declared per weight, so rendering is identical to before. */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/playfair-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/playfair-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Shared custom styles for uniquecleaningnw.co.uk. Loaded on every page. */ /* Custom Styles & Utilities */ html { /* FIX: Prevents fixed header from covering content when clicking links */ scroll-padding-top: 100px; } body { font-family: 'Outfit', sans-serif; background-color: #F3FBF3; color: #7C7C78; overflow-x: hidden; } /* Blobs adapted for light theme */ .blob-shape { position: absolute; z-index: -1; filter: blur(80px); opacity: 0.6; } /* Glassmorphism Light */ .glass-nav { background: rgba(243, 251, 243, 0.95); /* Increased opacity for better mobile read */ backdrop-filter: blur(12px); border-bottom: 1px solid rgba(37, 151, 106, 0.1); } .glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } /* Hero Pattern - Subtle dots/grid */ .hero-pattern { background-image: radial-gradient(#94B6A4 1px, transparent 1px); background-size: 32px 32px; opacity: 0.2; } /* Mobile Menu Transition */ #mobile-menu { transition: transform 0.3s ease-in-out; } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); background-color: #25976A; color: white; border-color: transparent; } .service-icon { transition: all 0.3s ease; } .hover-underline { position: relative; } .hover-underline::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: #25976A; transition: width 0.3s ease; } .hover-underline:hover::after { width: 100%; } /* FAQ accordion. Native
so answers stay in the static HTML for crawlers. */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ""; } .faq-chevron { transition: transform 0.25s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-item[open] { border-color: rgba(37, 151, 106, 0.35); } .faq-item summary:focus-visible { outline: 2px solid #25976A; outline-offset: -2px; border-radius: 1rem; } /* Floating hero badges. Previously two GSAP tweens with repeat: -1. An infinite tween means GSAP's requestAnimationFrame ticker never sleeps, so it recalculated and wrote an inline transform every frame for as long as the page was open. As CSS the browser runs this on the compositor and suspends it in a background tab. The delay lets the GSAP intro finish scaling them in first; a CSS animation outranks inline styles, so without it the pop-in would be overridden. Durations are 6s and 7s because the old tweens were 3s / 3.5s each way with yoyo, i.e. a full cycle of twice that. */ @keyframes uc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .animate-float { animation: uc-float 6s ease-in-out 2s infinite; } .animate-float-delayed { animation: uc-float 7s ease-in-out 3s infinite; } @media (prefers-reduced-motion: reduce) { .animate-float, .animate-float-delayed { animation: none; } } /* Inline SVG icons, replacing the Font Awesome webfont. Sized in em and filled with currentColor so every existing Tailwind text-* size and colour utility on the icon keeps working exactly as it did on the old element. The -0.125em baseline nudge is what Font Awesome used. */ .icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; }