/* ============================================================================ SHINE GIFTS — Corporate Website Stylesheet Custom CSS layer used alongside the Tailwind CDN utility classes. Built & maintained by Skewfield — https://www.skewfield.com ============================================================================ */ /* ========================================================================== 1. GLOBAL FONTS IMPORT (Optimized Performance Bundle) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Montserrat:wght@700;800;900&family=Raleway:ital,wght@0,700;1,400&display=swap'); /* ========================================================================== 2. HERO TYPEWRITER & MICRO-INTERACTIONS ========================================================================== */ .typewriter-action { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 900; background: linear-gradient(135deg, #004B93 0%, #00A3E0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; vertical-align: bottom; min-height: 1.2em; line-height: 1.2; white-space: pre-wrap; word-break: break-word; max-width: 100%; } .service-name-static { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 900; color: #111827; -webkit-text-fill-color: #111827; margin-right: 0.15em; } .typewriter-cursor-big { display: inline-block; width: 4px; height: 0.85em; background-color: #0052B4; margin-left: 2px; vertical-align: bottom; animation: blink 0.9s step-end infinite; -webkit-text-fill-color: initial; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .headline-wrapper { position: relative; min-height: 1.2em; /* Ensures the container doesn't collapse */ display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; } .hero-slide { transition: opacity 0.6s ease; } .shadow-3d { box-shadow: 0 20px 40px -12px rgba(0,80,180,0.15); } .service-tag { transition: all 0.2s; } .service-tag.active { border-color: #004B93; background-color: #004B93; color: white; } .service-tag:not(.active) { border-color: #d1d5db; background-color: white; color: #4b5563; } /* ========================================================================== 3. SYSTEM DESIGN VARIABLES & RESET ========================================================================== */ :root { --bg: #ffffff; --text: #111827; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { font-family: 'Inter', sans-serif; /* !important is needed here because also carries Tailwind's "bg-gray-50" utility class in the HTML, which is a class selector and would otherwise win over this plain "body" element selector even though this rule comes later in the file. This is what was causing the rest of the page to look slightly grayer than the hero. */ background: var(--bg) !important; color: var(--text); } /* Global Typography Overrides */ h1, h2, h3, h4, .font-heading { font-family: 'Montserrat', sans-serif !important; } /* ========================================================================== 4. NAVIGATION & BRAND LOCKUP ========================================================================== */ .logo-skew { font-family: 'Raleway', sans-serif; font-style: italic; font-weight: 300; color: rgb(167, 161, 161); } .logo-field { font-family: 'Montserrat', sans-serif; font-style: normal; margin-left: -1.4px; color: rgb(167, 161, 161); } /* Fine-tune spacing between the two logo wordmark halves */ .logo-skew + .logo-field { margin-left: -7px; } .nav-link.active { color: #0052B4 !important; border-bottom: 2px solid #00A3E0 !important; padding-bottom: 4px; } /* ========================================================================== 5. STRUCTURAL UTILITIES & SCROLL ANIMATIONS ========================================================================== */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 1.5s ease-out forwards; } .animate-fadeInUp { animation: fadeInUp 1.2s ease-out forwards; } #home img.animate-fadeIn { transform: translate3d(0, var(--scroll-offset, 0px), 0); will-change: transform; } /* ========================================================================== 6. CLIENT LOGO MARQUEE ========================================================================== */ .animate-marquee { animation: scroll-left 35s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - 4rem)); } } /* ========================================================================== 7. SPA ENGINE PERFORMANCE UTILITIES ========================================================================== */ /* Prevents layout flashes while sections are fetched over HTTP */ #spa-container:empty { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ffffff; } /* Hard override utilities to ensure smooth product catalog filtering transitions */ .product-item { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } /* Global interaction helper to prevent dynamic buttons from blocking click events */ .filter-btn *, .mat-btn *, #btn-toggle-insights *, #menu-toggle-btn * { pointer-events: none; } /* ========================================================================== 8. MOBILE CEILING ANCHOR FIX (PREVENTS 30% SCROLL JUMP) ========================================================================== */ @media (max-width: 767px) { html, body { /* Stops browser scroll-anchoring engines from pulling pages past bounds */ overflow-anchor: none !important; scroll-padding-top: 0px !important; } header.sticky { position: fixed !important; /* Forces fixed rendering frame over sticky constraints */ top: 0 !important; left: 0 !important; width: 100% !important; transform: none !important; /* Clears hidden animation calculations */ } /* Adds a safe gap to the top section so it doesn't get hidden behind the fixed bar */ #home { margin-top: 80px !important; } } /* ========================================================================== 9. TABLET CARD COMPONENTS (BLUE GLOW AURA) ========================================================================== */ .tablet-card { background-color: #ffffff; /* Crisp white background */ transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Elegant blue tint surround shadow layout */ box-shadow: 0 4px 20px -2px rgba(0, 82, 180, 0.08), /* Soft primary blue underglow */ 0 2px 12px -4px rgba(0, 163, 224, 0.12), /* Ambient secondary cyan wrap */ 0 0 0 1px rgba(0, 82, 180, 0.05); /* Ultra crisp hair-thin outer frame */ } /* Dynamic Interaction Hover State */ .tablet-card:hover { transform: translateY(-5px); /* Tablet lift-off simulation */ /* Deepened blue halo aura expansion on user hover action */ box-shadow: 0 20px 35px -5px rgba(0, 82, 180, 0.14), 0 10px 20px -8px rgba(0, 163, 224, 0.18), 0 0 0 1.5px rgba(0, 82, 180, 0.15); }