/* * ═══════════════════════════════════════════════════════════════════ * THIRD SPACE STUDIOS — SHARED STYLESHEET * tss-styles.css * * This is the single source of truth for all shared styles across * the Third Space Studios website. Every page links to this file. * * Usage in every page : * * (or "../tss-styles.css" if in a subdirectory) * * Sections: * 1. Reset & Base * 2. Grain overlay * 3. Navigation * 4. Buttons * 5. Section base (eyebrow, section-h2, section-pad) * 6. Glass card system * 7. Scroll reveal * 8. Animations & keyframes * 9. Footer * 10. Cookie consent banner * 11. Lead magnet popup * 12. Contact form * 13. Responsive * ═══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── 1. RESET & BASE ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Roboto Condensed', sans-serif; background: #1A1A1A; color: #fff; overflow-x: clip; /* clip not hidden — avoids breaking backdrop-filter */ } /* ───────────────────────────────────────────── 2. GRAIN OVERLAY Fixed full-screen film grain at 2.5% opacity ───────────────────────────────────────────── */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; } /* ───────────────────────────────────────────── 3. NAVIGATION ───────────────────────────────────────────── */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10, 10, 10, 0); border-bottom: 1px solid rgba(255,255,255,0); transition: background 0.4s ease, border-color 0.4s ease; } /* Blur pseudo-element — always present so it can be transitioned */ #nav::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: -1; } #nav.scrolled { background: rgba(10, 10, 10, 0.6); border-bottom: 1px solid rgba(255,255,255,0.07); } #nav.scrolled::before { opacity: 1; } .nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 4rem; transition: padding 0.3s ease; } #nav.scrolled .nav-inner { padding: 1rem 4rem; } .nav-logo img { height: 36px; width: auto; transition: height 0.3s; } #nav.scrolled .nav-logo img { height: 30px; } .nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; } .nav-links a { font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: #FDD122; } /* Dropdown trigger */ .nav-dropdown { position: relative; } .nav-dropdown > button { font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0; transition: color 0.2s; } .nav-dropdown > button:hover, .nav-dropdown:hover > button { color: #FDD122; } .nav-dropdown > button::after { content: ''; display: inline-block; width: 8px; height: 5px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); opacity: 0.6; } .nav-dropdown:hover > button::after { transform: rotate(180deg); opacity: 1; } /* Liquid glass dropdown */ .dropdown-menu { position: absolute; top: calc(100% + 0.85rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 260px; padding: 0.5rem; overflow: hidden; border-radius: 18px; background: linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.08) 100%); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.14), 0 24px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1); } .dropdown-menu::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5) 30%, rgba(253,209,34,0.15) 50%, rgba(255,255,255,0.5) 70%, transparent); border-radius: 999px; pointer-events: none; z-index: 2; } .dropdown-menu::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(105deg, transparent 35%, rgba(253,209,34,0.05) 44%, rgba(180,140,255,0.03) 50%, transparent 62%); animation: dropdownShimmer 7s ease-in-out infinite; pointer-events: none; z-index: 0; } /* Invisible bridge fills the gap between button and menu so hover doesn't drop */ .nav-dropdown > button::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 260px; height: 1.2rem; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown.open .dropdown-menu { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .dropdown-menu a { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1.1rem; border-radius: 12px; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.18s, background 0.18s; } .dropdown-menu a::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(253,209,34,0.35); flex-shrink: 0; transition: background 0.18s, transform 0.18s; } .dropdown-menu a:hover { color: #fff; background: rgba(255,255,255,0.07); } .dropdown-menu a:hover::before { background: #FDD122; transform: scale(1.4); } /* Nav CTA button */ .nav-cta { font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; position: relative; display: inline-block; padding: 0.7rem 1.6rem; text-decoration: none; color: #000; background: #FDD122; border: none; border-radius: 100px; overflow: hidden; box-shadow: 0 2px 10px rgba(253,209,34,0.2), inset 0 1px 0 rgba(255,255,255,0.38), inset -3px -3px 7px rgba(0,0,0,0.16), inset 3px 0 7px rgba(0,0,0,0.10); transition: background 0.2s, box-shadow 0.25s, transform 0.15s; } .nav-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.05) 45%, transparent 65%); pointer-events: none; border-radius: 100px; } .nav-cta:hover { background: #ffe040; box-shadow: 0 5px 20px rgba(253,209,34,0.3), inset 0 1px 0 rgba(255,255,255,0.42), inset -4px -4px 9px rgba(0,0,0,0.18), inset 4px 0 9px rgba(0,0,0,0.12); transform: translateY(-1px); } .nav-cta:active { transform: translateY(0); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: #fff; transition: transform 0.3s, opacity 0.3s; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { display: none; position: fixed; inset: 0; background: #000; z-index: 999; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: 'Oswald', sans-serif; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s; } .mobile-menu a:hover { color: #FDD122; } .mobile-menu .mobile-cta { color: #000; background: #FDD122; padding: 0.9rem 2.5rem; margin-top: 1rem; border-radius: 100px; box-shadow: 0 4px 20px rgba(253,209,34,0.25), inset 0 1px 0 rgba(255,255,255,0.38), inset -3px -3px 8px rgba(0,0,0,0.16), inset 3px 0 8px rgba(0,0,0,0.10); } /* ───────────────────────────────────────────── 4. BUTTONS ───────────────────────────────────────────── */ /* btn-primary — Yellow pill, black text, Artlist-style */ .btn-primary { font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; position: relative; display: inline-block; padding: 1rem 2.2rem; text-decoration: none; color: #000; background: #FDD122; border: none; border-radius: 100px; overflow: hidden; box-shadow: 0 2px 14px rgba(253,209,34,0.22), inset 0 1px 0 rgba(255,255,255,0.42), inset -3px -3px 8px rgba(0,0,0,0.18), inset 3px 0 8px rgba(0,0,0,0.12); transition: background 0.2s, box-shadow 0.25s, transform 0.15s; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 45%, transparent 65%); pointer-events: none; border-radius: 100px; } .btn-primary:hover { background: #ffe040; box-shadow: 0 6px 28px rgba(253,209,34,0.35), inset 0 1px 0 rgba(255,255,255,0.45), inset -4px -4px 10px rgba(0,0,0,0.2), inset 4px 0 10px rgba(0,0,0,0.14); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: 2px solid rgba(253,209,34,0.7); outline-offset: 3px; } /* btn-outline — Ghost glass pill, white text, turns yellow on hover */ .btn-outline { font-family: 'Oswald', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; position: relative; display: inline-block; padding: 0.9rem 2.2rem; text-decoration: none; color: rgba(255,255,255,0.82); background: linear-gradient(155deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.05) 100%); border: 1px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.28); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22), inset -3px -3px 8px rgba(0,0,0,0.2), inset 3px 0 8px rgba(0,0,0,0.14), 0 4px 20px rgba(0,0,0,0.22); border-radius: 100px; overflow: hidden; transition: box-shadow 0.25s, transform 0.15s, border-color 0.25s, color 0.2s; } .btn-outline::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,0.14) 0%, transparent 55%); pointer-events: none; border-radius: 100px; } .btn-outline:hover { color: #FDD122; border-color: rgba(253,209,34,0.35); border-top-color: rgba(253,209,34,0.6); box-shadow: inset 0 1px 0 rgba(253,209,34,0.18), inset 0 -1px 0 rgba(0,0,0,0.28), inset -4px -4px 10px rgba(0,0,0,0.22), inset 4px 0 10px rgba(0,0,0,0.16), 0 6px 28px rgba(253,209,34,0.10); transform: translateY(-1px); } .btn-outline:focus-visible { outline: 1px solid rgba(253,209,34,0.5); outline-offset: 3px; } .btn-outline:active { transform: translateY(0); } /* btn-ghost — Text only, white, arrow indicator */ .btn-ghost { font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,0.6); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; } .btn-ghost:hover { color: #fff; } .btn-ghost:focus-visible { outline: 1px solid rgba(255,255,255,0.4); outline-offset: 3px; } .btn-ghost svg { transition: transform 0.2s; } .btn-ghost:hover svg { transform: translateY(3px); } /* ───────────────────────────────────────────── 5. SECTION BASE ───────────────────────────────────────────── */ .section-pad { padding: 7rem 4rem; } /* Eyebrow — small yellow uppercase label with leading line */ .eyebrow { font-family: 'Oswald', sans-serif; font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; color: #FDD122; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .eyebrow::before { content: ''; width: 24px; height: 1px; background: #FDD122; } /* Section heading */ .section-h2 { font-family: 'Oswald', sans-serif; font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: 0.01em; } .section-h2 em { font-style: normal; color: #FDD122; } /* Section divider top rule */ .section-border-top { border-top: 1px solid rgba(253,209,34,0.08); } /* ───────────────────────────────────────────── 6. GLASS CARD SYSTEM Use these classes to build any glass surface. ───────────────────────────────────────────── */ /* Standard glass card — used for service cards, testimonial cards, VSR card, contact form */ .glass-tile { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border: 1px solid rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.22); border-left-color: rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.14), 0 20px 60px rgba(0,0,0,0.35); border-radius: 20px; transition: box-shadow 0.5s, border-color 0.5s, background 0.5s; } /* Specular top highlight */ .glass-tile::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38) 35%, rgba(253,209,34,0.10) 50%, rgba(255,255,255,0.38) 65%, transparent); border-radius: 999px; pointer-events: none; } /* Shimmer sweep on hover */ .glass-tile::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(105deg, transparent 35%, rgba(253,209,34,0.04) 44%, rgba(180,140,255,0.02) 50%, rgba(253,209,34,0.02) 56%, transparent 65%); opacity: 0; transition: opacity 0.6s, transform 0.7s; transform: translateX(-40%); pointer-events: none; z-index: 0; } .glass-tile:hover { background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 50%, rgba(253,209,34,0.03) 100%); border-color: rgba(255,255,255,0.11); border-top-color: rgba(253,209,34,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.16), 0 28px 80px rgba(0,0,0,0.38), 0 0 50px rgba(253,209,34,0.03); } .glass-tile:hover::before { opacity: 1; transform: translateX(40%); } /* Trusted By logo card — larger, more prominent glass */ .glass-card { position: relative; z-index: 1; border-radius: 24px; padding: 2.75rem 3.5rem; background: linear-gradient(160deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.05) 70%, rgba(255,255,255,0.09) 100%); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border: 1px solid rgba(255,255,255,0.10); border-top-color: rgba(255,255,255,0.35); border-left-color: rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18), 0 30px 80px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; } .glass-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(105deg, transparent 30%, rgba(253,209,34,0.06) 38%, rgba(180,140,255,0.05) 42%, rgba(100,200,255,0.04) 46%, rgba(253,209,34,0.03) 50%, transparent 58%); animation: shimmerSweep 8s ease-in-out infinite; pointer-events: none; z-index: 2; } .glass-card::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55) 25%, rgba(253,209,34,0.15) 50%, rgba(255,255,255,0.55) 75%, transparent); border-radius: 999px; pointer-events: none; z-index: 3; } /* ───────────────────────────────────────────── 7. SCROLL REVEAL ───────────────────────────────────────────── */ .reveal { opacity: 1; transform: translateY(0); } body.js-reveal .reveal.hidden-init { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } body.js-reveal .reveal.hidden-init.visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: 0.1s !important; } .delay-2 { transition-delay: 0.2s !important; } .delay-3 { transition-delay: 0.3s !important; } .delay-4 { transition-delay: 0.4s !important; } /* ───────────────────────────────────────────── 8. ANIMATIONS & KEYFRAMES ───────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes dropdownShimmer { 0%, 100% { transform: translateX(-40%); } 50% { transform: translateX(40%); } } @keyframes shimmerSweep { 0% { transform: translateX(-30%) rotate(0deg); } 50% { transform: translateX(30%) rotate(0deg); } 100% { transform: translateX(-30%) rotate(0deg); } } @keyframes glassGlow { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 1; transform: scale(1.03); } } /* ───────────────────────────────────────────── 9. FOOTER ───────────────────────────────────────────── */ footer { background: #000; border-top: 1px solid rgba(255,255,255,0.05); padding: 2.5rem 4rem; display: flex; justify-content: space-between; align-items: center; } .footer-logo { height: 28px; width: auto; opacity: 0.6; transition: opacity 0.2s; } .footer-logo:hover { opacity: 1; } .footer-links { display: flex; gap: 2rem; } .footer-links a { font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: rgba(255,255,255,0.6); } .footer-tagline { font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.2); font-style: italic; } /* ───────────────────────────────────────────── 10. COOKIE CONSENT BANNER ───────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 9000; background: linear-gradient(155deg, rgba(20,20,20,0.92) 0%, rgba(10,10,10,0.96) 100%); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255,255,255,0.10); border-top-color: rgba(255,255,255,0.20); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 16px 48px rgba(0,0,0,0.55); animation: cookieSlideUp 0.4s cubic-bezier(0.4,0,0.2,1) forwards; } @keyframes cookieSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .cookie-banner__inner { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .cookie-banner__text p { font-size: 0.88rem; color: rgba(255,255,255,0.62); line-height: 1.6; margin: 0; font-weight: 300; } .cookie-banner__text strong { color: rgba(255,255,255,0.85); font-weight: 600; } .cookie-banner__text a { color: rgba(253,209,34,0.75); text-decoration: none; } .cookie-banner__text a:hover { color: #FDD122; } .cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; } .cookie-btn { font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; border: none; cursor: pointer; padding: 0.6rem 1.2rem; border-radius: 100px; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; position: relative; } .cookie-btn--secondary { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.12); } .cookie-btn--secondary:hover { background: rgba(255,255,255,0.13); color: #fff; transform: translateY(-1px); } .cookie-btn--primary { background: #FDD122; color: #000; box-shadow: 0 2px 12px rgba(253,209,34,0.25), inset 0 1px 0 rgba(255,255,255,0.35); } .cookie-btn--primary::before { content: ''; position: absolute; inset: 0; border-radius: 100px; background: linear-gradient(155deg, rgba(255,255,255,0.22) 0%, transparent 55%); pointer-events: none; } .cookie-btn--primary:hover { background: #ffe040; transform: translateY(-1px); box-shadow: 0 5px 20px rgba(253,209,34,0.32); } .cookie-modal { position: fixed; inset: 0; z-index: 9100; } .cookie-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); } .cookie-modal__box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, 90vw); background: linear-gradient(155deg, rgba(25,25,25,0.97) 0%, rgba(12,12,12,0.99) 100%); border: 1px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.22); border-radius: 20px; padding: 2.5rem; box-shadow: 0 32px 80px rgba(0,0,0,0.6); } .cookie-modal__close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); border-radius: 50%; width: 32px; height: 32px; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .cookie-modal__close:hover { background: rgba(255,255,255,0.12); color: #fff; } .cookie-modal__box h3 { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.75rem; color: #fff; } .cookie-modal__box > p { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 1.5rem; } .cookie-pref { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .cookie-pref__info { display: flex; flex-direction: column; gap: 0.25rem; } .cookie-pref__info strong { font-size: 0.9rem; color: rgba(255,255,255,0.85); } .cookie-pref__info span { font-size: 0.8rem; color: rgba(255,255,255,0.38); } .cookie-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; } .cookie-toggle input { display: none; } .cookie-toggle span { position: absolute; inset: 0; border-radius: 100px; background: rgba(255,255,255,0.12); transition: background 0.25s; } .cookie-toggle span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: transform 0.25s, background 0.25s; } .cookie-toggle input:checked + span { background: #FDD122; } .cookie-toggle input:checked + span::after { transform: translateX(20px); background: #000; } .cookie-toggle--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .cookie-toggle--disabled span { background: rgba(253,209,34,0.4); } .cookie-toggle--disabled span::after { transform: translateX(20px); background: #000; } /* ───────────────────────────────────────────── 11. LEAD MAGNET POPUP ───────────────────────────────────────────── */ .leadmagnet-overlay { position: fixed; inset: 0; z-index: 8900; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: fadeIn 0.35s ease forwards; } .leadmagnet-modal { position: relative; width: min(900px, 100%); background: linear-gradient(155deg, rgba(22,22,22,0.97) 0%, rgba(10,10,10,0.99) 100%); border: 1px solid rgba(255,255,255,0.10); border-top-color: rgba(255,255,255,0.22); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 40px 100px rgba(0,0,0,0.7); overflow: hidden; animation: popupIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; } @keyframes popupIn { from { opacity: 0; transform: scale(0.92) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } .leadmagnet-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); border-radius: 50%; width: 34px; height: 34px; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .leadmagnet-close:hover { background: rgba(255,255,255,0.12); color: #fff; } .leadmagnet-content { display: grid; grid-template-columns: 1fr 1fr; } .leadmagnet-left { padding: 3rem; background: linear-gradient(145deg, rgba(253,209,34,0.05) 0%, transparent 60%); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; justify-content: center; } .leadmagnet-eyebrow { font-family: 'Oswald', sans-serif; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #FDD122; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; } .leadmagnet-eyebrow::before { content: ''; width: 20px; height: 1px; background: #FDD122; } .leadmagnet-title { font-family: 'Oswald', sans-serif; font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; color: #fff; margin-bottom: 1.25rem; } .leadmagnet-title em { font-style: normal; color: #FDD122; } .leadmagnet-desc { font-size: 0.92rem; line-height: 1.7; color: rgba(255,255,255,0.6); font-weight: 300; margin-bottom: 1.5rem; } .leadmagnet-points { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .leadmagnet-points li { font-size: 0.88rem; color: rgba(255,255,255,0.65); padding-left: 1.25rem; position: relative; } .leadmagnet-points li::before { content: '→'; position: absolute; left: 0; color: #FDD122; font-size: 0.75rem; } .leadmagnet-right { padding: 3rem; display: flex; align-items: center; } .leadmagnet-form-wrap { width: 100%; } .leadmagnet-form-label { font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 1.25rem; display: block; } .leadmagnet-form { display: flex; flex-direction: column; gap: 0.85rem; } .leadmagnet-form input { width: 100%; font-family: 'Roboto Condensed', sans-serif; font-size: 0.95rem; font-weight: 300; color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 0.8rem 1rem; outline: none; -webkit-appearance: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .leadmagnet-form input::placeholder { color: rgba(255,255,255,0.22); } .leadmagnet-form input:focus { border-color: rgba(253,209,34,0.45); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(253,209,34,0.06); } .leadmagnet-submit { margin-top: 0.25rem; width: 100%; text-align: center; justify-content: center; } .leadmagnet-privacy { font-size: 0.75rem; color: rgba(255,255,255,0.3); margin-top: 0.75rem; text-align: center; } .leadmagnet-privacy a { color: rgba(253,209,34,0.5); text-decoration: none; } .leadmagnet-success { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; padding: 2rem 0; } .leadmagnet-success span { font-size: 2.5rem; color: #FDD122; } .leadmagnet-success p { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.6; } /* ───────────────────────────────────────────── 12. CONTACT FORM ───────────────────────────────────────────── */ .contact-form-wrap { position: relative; overflow: hidden; padding: 2.75rem 2.5rem; background: linear-gradient(155deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.04) 100%); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border: 1px solid rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 20px 60px rgba(0,0,0,0.3); border-radius: 20px; } .contact-form-wrap::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32) 35%, rgba(253,209,34,0.08) 50%, rgba(255,255,255,0.32) 65%, transparent); border-radius: 999px; pointer-events: none; } .contact-form { display: flex; flex-direction: column; gap: 1.1rem; } .form-row { width: 100%; } .form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .contact-form label { font-family: 'Oswald', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); } .form-required { color: #FDD122; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; font-family: 'Roboto Condensed', sans-serif; font-size: 0.95rem; font-weight: 300; color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-top-color: rgba(255,255,255,0.05); border-radius: 10px; padding: 0.75rem 1rem; outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.22); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: rgba(253,209,34,0.45); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(253,209,34,0.06); } .contact-form textarea { resize: vertical; min-height: 110px; } .form-select-wrap { position: relative; } .form-select-wrap select { padding-right: 2.5rem; cursor: pointer; } .form-select-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; background: rgba(255,255,255,0.35); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; } .contact-form select option { background: #1a1a1a; color: #fff; } .form-group--checkbox { margin-top: 0.25rem; } .form-checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-size: 0.82rem; color: rgba(255,255,255,0.45); line-height: 1.5; text-transform: none; letter-spacing: 0; font-family: 'Roboto Condensed', sans-serif; } .form-checkbox-label a { color: rgba(253,209,34,0.7); text-decoration: none; } .form-checkbox-label a:hover { color: #FDD122; } .form-checkbox-label input[type="checkbox"] { display: none; } .form-checkbox-custom { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; background: rgba(255,255,255,0.05); transition: background 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; } .form-checkbox-label input:checked + .form-checkbox-custom { background: #FDD122; border-color: #FDD122; } .form-checkbox-label input:checked + .form-checkbox-custom::after { content: ''; width: 10px; height: 6px; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg) translateY(-1px); } .form-submit { margin-top: 0.5rem; width: 100%; text-align: center; justify-content: center; } .form-success, .form-error { margin-top: 1rem; padding: 1rem 1.25rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.6; } .form-success { background: rgba(253,209,34,0.08); border: 1px solid rgba(253,209,34,0.2); color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 0.75rem; } .form-success-icon { font-size: 1.2rem; color: #FDD122; } .form-error { background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.2); color: rgba(255,255,255,0.7); } .form-error a { color: #FDD122; } /* ───────────────────────────────────────────── 13. RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 1024px) { .contact-inner { grid-template-columns: 1fr; gap: 3rem; } } @media (max-width: 900px) { .section-pad { padding: 5rem 1.5rem; } footer { flex-direction: column; gap: 1.25rem; text-align: center; } .footer-links { justify-content: center; } .form-row--2col { grid-template-columns: 1fr; } .contact-form-wrap { padding: 2rem 1.5rem; } .cookie-banner__inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 768px) { .nav-inner { padding: 1rem 1.5rem; } .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } } @media (max-width: 680px) { .leadmagnet-content { grid-template-columns: 1fr; } .leadmagnet-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 2rem 1.75rem; } .leadmagnet-right { padding: 2rem 1.75rem; } }