/* ================================================================= DAKSM Engineering Industries — Custom Stylesheet Architecture : CSS Custom Properties (Design Tokens) + Tailwind CDN Themes : "Precision" (Light) | "Powerhouse" (Dark) This file is loaded directly in index.html alongside the Tailwind CDN. For the CLI production build, css/input.css @imports this file. Section Map: 1. Design Tokens — Precision (Light) 2. Design Tokens — Powerhouse (Dark) 3. Base Reset & Global Styles 4. Navigation 5. Theme Toggle Button 6. Hero Section 7. Utility Overrides (bridge Tailwind CDN ↔ CSS vars) 8. Animations 9. Scrollbar Styling ================================================================= */ /* ================================================================ 1. DESIGN TOKENS — PRECISION (LIGHT) MODE Default theme. White/Grey backgrounds, Tech Blue accents. ================================================================= */ :root { /* --- Backgrounds --- */ --color-bg-primary: #FDFBF7; --color-bg-secondary: #F5F0E8; --color-bg-tertiary: #EBE4D8; /* --- Accent: Tech Blue --- RGB split enables opacity modifiers e.g. rgba(var(--color-accent-rgb), 0.1) */ --color-accent: #0056B3; --color-accent-rgb: 0, 86, 179; --color-accent-hover: #003D7A; --color-bg-constant: #FDFBF7; /* --- Typography --- */ --color-text-primary: #1A202C; --color-text-secondary: #4A5568; --color-text-muted: #718096; /* --- Borders --- */ --color-border: #D4C9B8; --color-border-subtle: #E5DDD0; /* --- Navigation --- */ --nav-bg: rgba(253, 251, 247, 0.82); --nav-bg-scrolled: rgba(253, 251, 247, 0.97); --nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.07); /* --- Hero --- */ --hero-image-url: url('../public/images/hero.png'); --hero-overlay: linear-gradient( 105deg, rgba(253, 251, 247, 0.97) 0%, rgba(253, 251, 247, 0.90) 40%, rgba(253, 251, 247, 0.75) 65%, rgba(253, 251, 247, 0.60) 100% ); --hero-text-shadow: none; /* --- Toggle --- */ --toggle-track-bg: #EBE4D8; --toggle-thumb-icon: #0056B3; /* --- Elevation Shadows --- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); --shadow-accent: 0 10px 28px -5px rgba(0, 86, 179, 0.30); /* --- Decorative Grid --- */ --grid-dot-color: rgba(0, 86, 179, 0.07); /* --- Transitions --- */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================================ 2. DESIGN TOKENS — POWERHOUSE (DARK) MODE Applied when . Charcoal/Navy bg, Safety Orange. ================================================================= */ .dark { /* --- Backgrounds --- */ --color-bg-primary: #131210; --color-bg-secondary: #1B1916; --color-bg-tertiary: #25221E; /* --- Accent: Safety Orange (muted) --- */ --color-accent: #D45A00; --color-accent-rgb: 212, 90, 0; --color-accent-hover: #B84E00; /* --- Typography --- */ --color-text-primary: #F0F6FC; --color-text-secondary: #8B949E; --color-text-muted: #6E7681; /* --- Borders --- */ --color-border: #332E28; --color-border-subtle: #25221E; /* --- Navigation --- */ --nav-bg: rgba(19, 18, 16, 0.82); --nav-bg-scrolled: rgba(19, 18, 16, 0.97); --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); /* --- Hero --- Image swaps automatically via CSS var when .dark is applied — no JS needed. */ --hero-image-url: url('../public/images/hero.png'); --hero-overlay: linear-gradient( 105deg, rgba(19, 18, 16, 0.97) 0%, rgba(19, 18, 16, 0.90) 40%, rgba(19, 18, 16, 0.75) 65%, rgba(19, 18, 16, 0.60) 100% ); --hero-text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); /* --- Toggle --- */ --toggle-track-bg: #332E28; --toggle-thumb-icon: #FF6B00; /* --- Elevation Shadows --- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -1px rgba(0,0,0,0.35); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.45), 0 4px 6px -2px rgba(0,0,0,0.35); --shadow-accent: 0 10px 28px -5px rgba(255, 107, 0, 0.38); /* --- Decorative Grid --- */ --grid-dot-color: rgba(255, 107, 0, 0.06); } /* ================================================================ 3. BASE RESET & GLOBAL STYLES ================================================================= */ /* Apply color transitions globally when the theme class changes. */ *, *::before, *::after { transition-property: color, background-color, border-color, box-shadow, opacity; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg-primary); color: var(--color-text-primary); overflow-x: hidden; } /* Global focus ring — replaces browser default */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; } /* ================================================================ 4. NAVIGATION ================================================================= */ #navbar { background: var(--nav-bg); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border-bottom: 1px solid transparent; transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } /* Navbar logo badge — keeps original brand colors intact on dark backgrounds */ .navbar-logo { border-radius: 0.75rem; background: transparent; transition: box-shadow var(--transition-base), background var(--transition-base); } .dark .navbar-logo { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); padding: 4px 8px; box-sizing: content-box; } #navbar.is-scrolled { background: var(--nav-bg-scrolled); border-bottom-color: var(--color-border-subtle); box-shadow: var(--nav-shadow); } /* Animated underline on desktop nav links */ .nav-link { position: relative; padding-bottom: 2px; transition: color var(--transition-fast); } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--color-accent); border-radius: 1px; transition: width var(--transition-base); } .nav-link:hover, .nav-link.is-active { color: var(--color-accent); } .nav-link:hover::after, .nav-link.is-active::after { width: 100%; } /* ================================================================ 5. THEME TOGGLE BUTTON Pill-shaped switch. Thumb slides left↔right via CSS transform. Sun/moon icons cross-fade and rotate — zero extra JavaScript. ================================================================= */ .theme-toggle-btn { position: relative; width: 52px; height: 28px; border-radius: 9999px; background-color: var(--toggle-track-bg); border: 1px solid var(--color-border); cursor: pointer; transition: background-color var(--transition-base), border-color var(--transition-base); } /* The sliding circular thumb */ .theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--toggle-thumb-icon); /* Spring-feel ease for the slide */ transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), color var(--transition-base); } /* Slide thumb right in dark mode (track-width 52 - thumb 20 - 2*3 padding = 26px) */ .dark .theme-toggle-thumb { transform: translateX(24px); } /* Sun — visible in light, rotates out in dark */ .theme-icon-sun { width: 13px; height: 13px; opacity: 1; transform: rotate(0deg); transition: opacity 220ms ease, transform 320ms ease; } .dark .theme-icon-sun { opacity: 0; transform: rotate(90deg); } /* Moon — hidden in light, rotates in in dark */ .theme-icon-moon { width: 13px; height: 13px; position: absolute; opacity: 0; transform: rotate(-90deg); transition: opacity 220ms ease, transform 320ms ease; } .dark .theme-icon-moon { opacity: 1; transform: rotate(0deg); } /* ================================================================ 6. HERO SECTION ================================================================= */ .hero-section { background-color: var(--color-bg-primary); min-height: 100svh; /* svh = safe viewport height (handles mobile browser chrome) */ position: relative; } /* Background image — changes automatically via CSS var when .dark toggles. No JavaScript image-swap needed. */ .hero-bg { background-image: var(--hero-image-url); background-position: center right; background-size: cover; background-repeat: no-repeat; transition: opacity 500ms ease; } /* On mobile: center the image and use a top-heavy vertical overlay so the background shows through without sacrificing text readability */ @media (max-width: 767px) { .hero-bg { background-position: center center; } :root .hero-overlay { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.55) 100% ); } .dark .hero-overlay { background: linear-gradient( 180deg, rgba(13, 17, 23, 0.92) 0%, rgba(13, 17, 23, 0.78) 45%, rgba(13, 17, 23, 0.55) 100% ); } } /* Gradient overlay ensures text legibility regardless of image contrast */ .hero-overlay { background: var(--hero-overlay); transition: background var(--transition-slow); } /* Mobile: cover the full hero but reduce overlay opacity so the image shows */ @media (max-width: 767px) { .hero-bg { background-position: center center; background-size: auto; } :root .hero-overlay { background: linear-gradient( 105deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0.45) 100% ) !important; } .dark .hero-overlay { background: linear-gradient( 105deg, rgba(13, 17, 23, 0.80) 0%, rgba(13, 17, 23, 0.65) 50%, rgba(13, 17, 23, 0.42) 100% ) !important; } } /* Subtle text shadow helps readability in dark mode where overlay thins */ .hero-headline { text-shadow: var(--hero-text-shadow); transition: text-shadow var(--transition-slow); } /* Dot-grid decorative background pattern */ .hero-dot-grid { background-image: radial-gradient(var(--grid-dot-color) 1.5px, transparent 1.5px); background-size: 28px 28px; } /* Accent glow on primary CTA hover */ .btn-primary { background-color: var(--color-accent); transition: background-color var(--transition-fast), transform 200ms ease, box-shadow 200ms ease; } .btn-primary:hover { background-color: var(--color-accent-hover); box-shadow: var(--shadow-accent); transform: translateY(-2px); } .btn-outline { border: 2px solid var(--color-accent); color: var(--color-accent); transition: background-color var(--transition-fast), color var(--transition-fast), transform 200ms ease; } .btn-outline:hover { background-color: var(--color-accent); color: #ffffff; transform: translateY(-2px); } /* ================================================================ 7. UTILITY OVERRIDES Bridge the Tailwind CDN static classes to our dynamic CSS vars. !important wins specificity against Tailwind's generated rules. ================================================================= */ /* Accent color */ .text-accent { color: var(--color-accent) !important; } .bg-accent { background-color: var(--color-accent) !important; } .border-accent { border-color: var(--color-accent) !important; } .fill-accent { fill: var(--color-accent) !important; } .ring-accent { --tw-ring-color: var(--color-accent) !important; } .hover\:bg-accent:hover { background-color: var(--color-accent) !important; } .hover\:bg-accent-hover:hover { background-color: var(--color-accent-hover) !important; } .hover\:text-accent:hover { color: var(--color-accent) !important; } .hover\:border-accent:hover { border-color: var(--color-accent) !important; } /* Accent with opacity — used for icon badges, pill backgrounds, etc. */ .bg-accent\/10 { background-color: rgba(var(--color-accent-rgb), 0.10) !important; } .bg-accent\/15 { background-color: rgba(var(--color-accent-rgb), 0.15) !important; } .bg-accent\/20 { background-color: rgba(var(--color-accent-rgb), 0.20) !important; } .border-accent\/30 { border-color: rgba(var(--color-accent-rgb), 0.30) !important; } /* Surface backgrounds */ .bg-surface { background-color: var(--color-bg-primary) !important; } .bg-surface-secondary { background-color: var(--color-bg-secondary) !important; } .bg-surface-tertiary { background-color: var(--color-bg-tertiary) !important; } .hover\:bg-surface-secondary:hover { background-color: var(--color-bg-secondary) !important; } /* Text */ .text-content { color: var(--color-text-primary) !important; } .text-content-secondary { color: var(--color-text-secondary) !important; } .text-muted { color: var(--color-text-muted) !important; } .hover\:text-content:hover { color: var(--color-text-primary) !important; } /* Borders */ .border-border { border-color: var(--color-border) !important; } .border-border-subtle { border-color: var(--color-border-subtle) !important; } /* Shadow */ .shadow-accent { box-shadow: var(--shadow-accent) !important; } /* ================================================================ 8. SITE CONTAINER Single control point for max-width across all pages. Change the percentage below to adjust desktop layout width. ================================================================= */ .site-container { width: 100%; max-width: 80rem; /* 1280px — same as Tailwind max-w-7xl */ margin-left: auto; margin-right: auto; } @media (min-width: 1280px) { /* xl */ .site-container { max-width: 90%; } } /* ================================================================ 9. ANIMATIONS Defined here for CDN usage. The tailwind.config.js keyframes apply only during the CLI production build. ================================================================= */ /* (Sections 10+ renumbered — 10: Scrollbar, 11: WhatsApp, 12: Certs, etc.) */ /* Hero stacked product cards — each card fades + slides in with staggered delay */ @keyframes heroStackIn { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } } .hero-stack-card { opacity: 0; animation: heroStackIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Starts invisible; animation fills in to visible (fill-mode: forwards) */ .will-animate { opacity: 0; } .animate-fade-up { animation: fadeUp 0.65s ease-out forwards; } .animate-fade-in { animation: fadeIn 0.45s ease-out forwards; } /* ================================================================ 9. SCROLLBAR STYLING (Chromium / WebKit) ================================================================= */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } /* ================================================================ 10. WHATSAPP CTA COMPONENTS WhatsApp green (#25D366) is a global brand colour. It stays fixed across both Precision and Powerhouse themes. ================================================================= */ /* ── Floating Action Button ── */ .whatsapp-fab { position: fixed; bottom: 2rem; right: 2rem; z-index: 60; display: inline-flex; align-items: center; height: 3.5rem; border-radius: 9999px; background-color: #25D366; color: #ffffff; text-decoration: none; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45); overflow: hidden; /* Override the global theme transition — prevents colour bleed on theme swap */ transition: box-shadow 300ms ease, transform 300ms ease !important; } .whatsapp-fab:hover { box-shadow: 0 8px 32px rgba(37, 211, 102, 0.60); transform: translateY(-3px); } /* Icon container — always visible, fixed square */ .whatsapp-fab-icon { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Label — slides in on hover via max-width animation */ .whatsapp-fab-label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; max-width: 0; opacity: 0; padding-right: 0; /* Explicit transition overrides the global rule for transform/opacity */ transition: max-width 350ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease 80ms, padding-right 300ms ease !important; } .whatsapp-fab:hover .whatsapp-fab-label { max-width: 10rem; opacity: 1; padding-right: 1.375rem; } /* Pulse ring — fires 3× on load to draw attention, then stops */ .whatsapp-fab::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; border: 2.5px solid #25D366; opacity: 0; animation: wa-pulse 2.4s ease-out 1.8s 3; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.80; } 100% { transform: scale(1.50); opacity: 0; } } /* ── Inline WhatsApp button (hero + contact section) ── */ .btn-whatsapp { background-color: #25D366; color: #ffffff !important; transition: background-color var(--transition-fast), transform 200ms ease, box-shadow 200ms ease !important; } .btn-whatsapp:hover { background-color: #1DA851; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.40); transform: translateY(-2px); } /* ── Contact CTA cards ── */ .contact-cta-card { border-radius: 1.25rem; border: 1.5px solid var(--color-border); background-color: var(--color-bg-primary); padding: 2rem 2rem 2.25rem; display: flex; flex-direction: column; gap: 1.25rem; transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .contact-cta-card:hover { transform: translateY(-5px); } .contact-cta-card.card-whatsapp:hover { border-color: rgba(37, 211, 102, 0.45); box-shadow: 0 14px 36px rgba(37, 211, 102, 0.16); } .contact-cta-card.card-email:hover { border-color: rgba(var(--color-accent-rgb), 0.45); box-shadow: var(--shadow-accent); } /* Icon halo inside the card */ .contact-card-icon { width: 3.25rem; height: 3.25rem; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-card-icon.icon-whatsapp { background-color: rgba(37, 211, 102, 0.12); color: #25D366; } .contact-card-icon.icon-email { background-color: rgba(var(--color-accent-rgb), 0.10); color: var(--color-accent); } .contact-cta-card.card-location:hover { border-color: rgba(var(--color-accent-rgb), 0.45); box-shadow: var(--shadow-accent); } .contact-card-icon.icon-location { background-color: rgba(var(--color-accent-rgb), 0.10); color: var(--color-accent); } /* ================================================================ 11. CERTIFICATION BADGES ================================================================= */ .cert-badge { display: inline-flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.25rem; border-radius: 1rem; border: 1.5px solid var(--color-border); background-color: var(--color-bg-primary); transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .cert-badge:hover { border-color: rgba(var(--color-accent-rgb), 0.40); box-shadow: 0 4px 20px rgba(var(--color-accent-rgb), 0.10); transform: translateY(-2px); } .cert-badge-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background-color: rgba(var(--color-accent-rgb), 0.10); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ================================================================ 12. CAPABILITY CHIPS (testing capabilities) ================================================================= */ .capability-chip { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: rgba(var(--color-accent-rgb), 0.10); color: var(--color-accent); border: 1px solid rgba(var(--color-accent-rgb), 0.30); transition: background-color 200ms ease, transform 200ms ease; } .capability-chip:hover { background-color: rgba(var(--color-accent-rgb), 0.18); transform: translateY(-1px); } /* ================================================================ 13. CLIENT LOGOS ================================================================= */ /* Marquee wrapper — clips overflow and adds edge fade */ .clients-marquee-wrapper { overflow: hidden; -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); } /* The scrolling track — laid out as a single flex row */ .clients-marquee-track { display: flex; gap: 1.5rem; width: max-content; animation: marquee-scroll 32s linear infinite; } /* Pause on hover */ .clients-marquee-wrapper:hover .clients-marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .client-logo-cell { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 1.25rem; width: 10rem; border-radius: 1rem; border: 1.5px solid var(--color-border); background-color: var(--color-bg-constant); transition: box-shadow 250ms ease; } .client-logo-cell:hover { box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.35), 0 6px 24px rgba(var(--color-accent-rgb), 0.12); } .client-logo-img { width: 100%; height: 5.5rem; object-fit: contain; } /* ================================================================ 14. GALLERY LIGHTBOX ================================================================= */ .gallery-lightbox { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.90); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 280ms ease; } .gallery-lightbox.is-open { opacity: 1; pointer-events: auto; } .gallery-lightbox-img { width: min(90vw, 1100px); height: 85vh; border-radius: 0.75rem; object-fit: contain; box-shadow: 0 24px 64px rgba(0,0,0,0.7); transition: opacity 200ms ease; } .gallery-lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.10); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; } .gallery-lightbox-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.50); } .gallery-lightbox-btn.btn-prev { left: 1.25rem; } .gallery-lightbox-btn.btn-next { right: 1.25rem; } .gallery-lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.10); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 200ms ease; } .gallery-lightbox-close:hover { background: rgba(255,255,255,0.25); } .gallery-lightbox-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: 0.8125rem; color: rgba(255,255,255,0.70); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; background: rgba(0,0,0,0.40); padding: 0.375rem 1rem; border-radius: 9999px; } /* Grid thumbnail hover */ .gallery-thumb { position: relative; overflow: hidden; border-radius: 0.75rem; aspect-ratio: 1 / 1; cursor: pointer; background: var(--color-bg-secondary); } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease, filter 300ms ease; } .gallery-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 300ms ease; } .gallery-thumb:hover img { transform: scale(1.07); } .gallery-thumb:hover::after { background: rgba(0,0,0,0.25); } /* Zoom icon overlay on hover */ .gallery-thumb-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; opacity: 0; z-index: 1; transition: opacity 250ms ease; } .gallery-thumb:hover .gallery-thumb-icon { opacity: 1; }