/* ========================================================= AV FAB.TECH — custom styles Tailwind (CDN) handles layout/utilities; this file holds everything Tailwind does not: motion, overlays, form states and print rules. Motion rules: transform + opacity only, one shared easing curve, and everything switches off under prefers-reduced-motion. ========================================================= */ /* Palette sampled from the AV FAB.TECH logo. */ :root { --brand-400: #4a87c8; --brand-500: #1f66b4; --brand-600: #0f4d92; --brand-800: #072a52; --spark-400: #fbbf24; --spark-500: #f59e0b; --ink-950: #020617; --whatsapp: #25d366; /* motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* entrances, reveals, menus */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* hovers and small state changes */ --dur-reveal: 780ms; --dur-hover: 420ms; --dur-page: 420ms; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; /* clears the sticky header on anchor jumps */ } body { overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ---------- Accessibility ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1.25rem; background: var(--ink-950); color: #fff; font-weight: 700; border-radius: 0 0 0.75rem 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; } /* Logo lockups keep their own proportions regardless of utility classes. */ .site-logo { width: auto; max-width: 100%; object-fit: contain; } /* ========================================================= PAGE TRANSITIONS Pure CSS on the way in (so the page is never blank if JS fails); JS adds .is-leaving on the way out. ========================================================= */ body { animation: pageIn var(--dur-page) var(--ease) backwards; } /* opacity only: a transform on would become the containing block for position:fixed children (the floating WhatsApp button) while it runs. */ @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } body.is-leaving { opacity: 0; transition: opacity 240ms var(--ease-soft); } /* ---------- Header ---------- */ .site-header { transition: box-shadow 400ms var(--ease-soft), background-color 400ms var(--ease-soft); } .site-header.is-stuck { box-shadow: 0 10px 30px -12px rgba(2, 6, 23, 0.25); } /* ---------- Hero ---------- */ .hero-overlay { background: linear-gradient( 90deg, rgba(2, 6, 23, 0.94) 0%, rgba(2, 6, 23, 0.72) 45%, rgba(2, 6, 23, 0.15) 100% ); } @media (max-width: 640px) { .hero-overlay { background: linear-gradient( 180deg, rgba(2, 6, 23, 0.88) 0%, rgba(2, 6, 23, 0.8) 60%, rgba(2, 6, 23, 0.9) 100% ); } } /* Very slow drift on the hero photo — 1.5% over 24s, barely perceptible. JS may add a small parallax offset on top via --hero-shift. */ .hero-media { transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.05); animation: heroDrift 24s var(--ease-soft) forwards; will-change: transform; } @keyframes heroDrift { from { transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.05); } to { transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1); } } /* Hero copy rises in on load, one element after another. Gated on html.is-ready (set by JS after the first paint) because Tailwind's CDN build injects its stylesheet late — without the gate the first half of the entrance plays before anything is on screen. */ html.js .hero-rise > * { opacity: 0; } html.js.is-ready .hero-rise > * { animation: riseIn 900ms var(--ease) forwards; } html.js.is-ready .hero-rise > *:nth-child(1) { animation-delay: 120ms; } html.js.is-ready .hero-rise > *:nth-child(2) { animation-delay: 220ms; } html.js.is-ready .hero-rise > *:nth-child(3) { animation-delay: 320ms; } html.js.is-ready .hero-rise > *:nth-child(4) { animation-delay: 420ms; } html.js.is-ready .hero-rise > *:nth-child(5) { animation-delay: 520ms; } @keyframes riseIn { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } /* ---------- Scroll reveal ---------- */ html.js .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: var(--reveal-delay, 0ms); } html.js .reveal.is-visible { opacity: 1; transform: none; } /* directional variants */ html.js .reveal-left { transform: translate3d(-28px, 0, 0); } html.js .reveal-right { transform: translate3d(28px, 0, 0); } html.js .reveal-scale { transform: scale(0.97); } html.js .reveal-left.is-visible, html.js .reveal-right.is-visible, html.js .reveal-scale.is-visible { transform: none; } /* ---------- Hover motion ---------- Tailwind supplies the properties and durations; these rules only swap in the shared easing so every hover feels the same. */ a, button, article, figure, input, select, textarea, .gallery-img, .site-logo { transition-timing-function: var(--ease-soft); } article { transition-duration: var(--dur-hover); } /* Service / content cards: lift a little further, land softly. */ article.reveal:hover, article.card-lift:hover { box-shadow: 0 26px 50px -22px rgba(2, 6, 23, 0.4); } /* Card media zoom (uses Tailwind's group-hover:scale-105). */ article img { transition-duration: 900ms; } /* Buttons and pills get a gentle press. */ a[class*="rounded-"]:active, button[class*="rounded-"]:active { transform: scale(0.98); } /* ---------- Gallery ---------- */ .gallery-img { transition: transform 1000ms var(--ease); } .gallery-img:hover { transform: scale(1.06); } /* ---------- Mobile navigation ---------- */ .mobile-nav { max-height: 0; overflow: hidden; transition: max-height 460ms var(--ease); } .mobile-nav.is-open { /* tall enough for every item; scrolls instead of clipping on short screens */ max-height: min(80vh, 40rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* menu rows fade up one after another while the panel opens */ .mobile-nav.is-open > div > * { animation: riseIn 460ms var(--ease) backwards; } .mobile-nav.is-open > div > *:nth-child(1) { animation-delay: 60ms; } .mobile-nav.is-open > div > *:nth-child(2) { animation-delay: 110ms; } .mobile-nav.is-open > div > *:nth-child(3) { animation-delay: 160ms; } .mobile-nav.is-open > div > *:nth-child(4) { animation-delay: 210ms; } .mobile-nav.is-open > div > *:nth-child(5) { animation-delay: 260ms; } .mobile-nav.is-open > div > *:nth-child(6) { animation-delay: 310ms; } .mobile-nav.is-open > div > *:nth-child(7) { animation-delay: 360ms; } .nav-burger { /* the three bars must stack; the button itself is a row flex container */ flex-direction: column; } .nav-burger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transition: width 320ms var(--ease), margin 320ms var(--ease), transform 320ms var(--ease), opacity 200ms var(--ease-soft); } .nav-burger span + span { margin-top: 4.5px; } /* staggered widths — 100% / 60% / 80%, left aligned within a 20px block */ .nav-burger span:nth-child(2) { width: 12px; margin-right: 8px; } .nav-burger span:nth-child(3) { width: 16px; margin-right: 4px; } .nav-burger:active { transform: scale(0.94); } /* open: bars equalise, then cross into a clean X */ .nav-burger[aria-expanded="true"] span { width: 20px; margin-right: 0; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Mobile submenu ---------- */ .submenu { max-height: 0; overflow: hidden; transition: max-height 400ms var(--ease); } .submenu.is-open { max-height: 18rem; } .submenu-chevron { transition: transform 320ms var(--ease); } [aria-expanded="true"] .submenu-chevron { transform: rotate(180deg); } /* ---------- Desktop services dropdown ---------- */ .group .invisible { transform: translate3d(-50%, -6px, 0); transition: opacity 260ms var(--ease-soft), transform 260ms var(--ease-soft), visibility 260ms; } .group:hover .invisible, .group:focus-within .invisible { transform: translate3d(-50%, 0, 0); } /* ---------- Floating WhatsApp ---------- */ .whatsapp-pulse { position: fixed; /* set by utility classes too; kept for the ring below */ animation: waFloat 5.5s var(--ease-soft) infinite; } /* expanding ring — transform + opacity only */ .whatsapp-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.55); animation: waRing 3s var(--ease) infinite; pointer-events: none; } @keyframes waRing { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.32); opacity: 0; } 100% { transform: scale(1.32); opacity: 0; } } /* a slow breath so it reads as "live" without nagging */ @keyframes waFloat { 0%, 88%, 100% { transform: translate3d(0, 0, 0); } 93% { transform: translate3d(0, -5px, 0); } } /* ---------- Forms ---------- */ .form-note { display: none; border-radius: 0.75rem; padding: 0.85rem 1rem; font-size: 0.875rem; font-weight: 700; } .form-note.is-visible { display: block; animation: riseIn 420ms var(--ease) backwards; } .form-note--ok { background: #ecfdf5; color: #065f46; } .form-note--err { background: #fef2f2; color: #991b1b; } /* ---------- Motion / print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } .reveal, html.js .hero-rise > *, html.js.is-ready .hero-rise > * { opacity: 1; transform: none; animation: none; } .hero-media { transform: none; animation: none; } .whatsapp-pulse::after { animation: none; opacity: 0.5; } body.is-leaving { opacity: 1; transform: none; } } @media print { header, .whatsapp-pulse, form, .no-print { display: none !important; } body { background: #fff; color: #000; animation: none; } .reveal, html.js .hero-rise > * { opacity: 1 !important; transform: none !important; animation: none !important; } }