/*
Theme Name: Jeavons Electrical 
Theme URI: 
Author: 
Author URI: 
Description: A modern custom WordPress theme developed from scratch.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 
*/

/* ========================================================= Base ========================================================= */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================= Glass Navigation ========================================================= */ .glass-nav { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } /* ========================================================= Glass Card ========================================================= */ .glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); } /* ========================================================= Dark Glass ========================================================= */ .dark-glass { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); } /* ========================================================= Scroll Reveal ========================================================= */ .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ========================================================= Gradient Text ========================================================= */ .text-gradient { background: linear-gradient( 135deg, #cc0000 0%, #ff4d4d 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ========================================================= Bento Card ========================================================= */ .bento-card { position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; } .bento-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); } .bento-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient( to bottom right, rgba(204, 0, 0, 0.2), transparent ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; } .bento-card:hover::before { opacity: 1; } /* ========================================================= Blob ========================================================= */ .blob { position: absolute; filter: blur(80px); z-index: -1; opacity: 0.4; animation: float 10s ease-in-out infinite; } @keyframes float { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0, 0) scale(1); } }