/* ============================================================ J.ROBERTS SOLID FUEL SERVICES — Design System v3 Premium Chimney & Stove Specialists · Carlow, Ireland Charcoal · Flame · Cream · Copper Fonts: Playfair Display (headings) · Lato (body) ============================================================ */ /* Google Fonts loaded via preconnect tags in each page */ /* ── Design Tokens ──────────────────────────────────────────── */ :root { --charcoal: #1A1A1A; --charcoal-deep: #111111; --charcoal-mid: #252525; --charcoal-light: #383838; --flame: #FF6B35; --flame-light: #FF8C5A; --flame-dark: #E55520; --copper: #B87333; --copper-light: #D4924A; --copper-dark: #9A5E1F; --cream: #FAF3E0; --cream-deep: #F2E8D0; --cream-mid: #EDE0C8; --text: #1A1A1A; --text-on-dark: #FAF3E0; --muted: #6B5540; --muted-dark: #C4A882; --border: rgba(184,115,51,0.18); --border-dark: rgba(255,107,53,0.22); --flame-grad: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 50%, #B87333 100%); --fire-glow: linear-gradient(180deg, #FF6B35 0%, #FF8C5A 40%, #FFB347 100%); --copper-grad: linear-gradient(135deg, #B87333 0%, #D4924A 50%, #B87333 100%); --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --r: 12px; --rl: 20px; --rp: 50px; --sh: 0 2px 20px rgba(60,40,20,0.08); --shm: 0 6px 28px rgba(60,40,20,0.14); --shl: 0 16px 48px rgba(60,40,20,0.18); --shxl: 0 24px 64px rgba(60,40,20,0.22); --sh-glow: 0 0 40px rgba(255,107,53,0.22); --sh-fire: 0 0 60px rgba(255,107,53,0.35), 0 0 120px rgba(184,115,51,0.15); --sh-inner:inset 0 1px 0 rgba(255,255,255,0.06); --fh: 'Playfair Display', Georgia, serif; --fb: 'Lato', system-ui, sans-serif; --fs-xs: clamp(11px, 1.2vw, 12px); --fs-sm: clamp(13px, 1.4vw, 14px); --fs-base: clamp(15px, 1.6vw, 16px); --fs-lg: clamp(18px, 2vw, 20px); --fs-xl: clamp(22px, 2.8vw, 28px); --fs-2xl: clamp(32px, 4.5vw, 54px); --fs-3xl: clamp(40px, 6vw, 68px); --fs-4xl: clamp(48px, 7.5vw, 88px); --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-fire: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-heavy: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 700ms; --nav-h: 76px; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; } body { font-family: var(--fb); background: var(--cream); color: var(--text); overflow-x: hidden; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(255,107,53,0.22); color: var(--charcoal); } /* Grain overlay */ body::after { content:''; position:fixed; inset:0; z-index:2; pointer-events:none; 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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:256px 256px; } h1,h2,h3,h4,h5 { font-family:var(--fh); font-weight:400; line-height:1.08; text-wrap:balance; } img { max-width:100%; display:block; } p { text-wrap:pretty; } a { text-decoration:none; color:inherit; transition:color var(--dur-fast) var(--ease); } ul { list-style:none; } button { cursor:pointer; border:none; background:none; font-family:inherit; } :focus-visible { outline:2.5px solid var(--flame); outline-offset:3px; border-radius:4px; } .skip-to-content { position:absolute; top:-100px; left:20px; z-index:10000; background:var(--flame); color:white; padding:8px 16px; border-radius:var(--r); font-weight:700; transition:top 0.3s; } .skip-to-content:focus { top:20px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ── Layout ─────────────────────────────────────────────────── */ .section { padding: clamp(72px,12vw,140px) clamp(24px,5vw,56px); } .section-dark { background: var(--charcoal); } .section-deepdark{ background: var(--charcoal-deep); } .section-cream { background: var(--cream); } .section-warm { background: var(--cream-deep); } .container { max-width:1200px; margin:0 auto; } .tc { text-align:center; } .tc .sp { margin:0 auto; } /* ── Typography ─────────────────────────────────────────────── */ .eyebrow { font-family:var(--fb); font-size:var(--fs-xs); font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--flame); margin-bottom:var(--space-md); display:block; } .eyebrow-copper { font-family:var(--fb); font-size:var(--fs-xs); font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--copper); margin-bottom:var(--space-md); display:block; } .sh { font-family:var(--fh); font-size:var(--fs-2xl); font-weight:500; color:var(--charcoal); letter-spacing:-0.02em; line-height:1.1; margin-bottom:var(--space-md); } .sh-light { font-family:var(--fh); font-size:var(--fs-2xl); font-weight:500; color:var(--cream); letter-spacing:-0.02em; line-height:1.1; margin-bottom:var(--space-md); } .sp { font-size:var(--fs-base); color:#705D45; line-height:1.75; max-width:560px; } .sp-light { font-size:var(--fs-base); color:var(--muted-dark); line-height:1.75; max-width:560px; } /* ── Buttons ────────────────────────────────────────────────── */ .btn-primary { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#B04000 0%,#C85520 50%,#8B4010 100%); color:white; font-family:var(--fb); font-size:var(--fs-sm); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:16px 36px; border-radius:var(--rp); transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease),filter var(--dur-base) var(--ease); box-shadow:0 4px 20px rgba(255,107,53,0.35); position:relative; overflow:hidden; } .btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 50%); opacity:0; transition:opacity var(--dur-base) var(--ease); pointer-events:none; } .btn-primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 32px rgba(255,107,53,0.50); filter:brightness(1.08); } .btn-primary:hover::before { opacity:1; } .btn-primary:active { transform:translateY(0) scale(0.98); } .btn-outline { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--flame); font-family:var(--fb); font-size:var(--fs-sm); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:15px 35px; border-radius:var(--rp); border:1.5px solid var(--flame); transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease); } .btn-outline:hover { background:var(--flame); color:white; transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,107,53,0.35); } .btn-outline:active { transform:translateY(0) scale(0.98); } .btn-outline-light { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--cream); font-family:var(--fb); font-size:var(--fs-sm); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:15px 35px; border-radius:var(--rp); border:1.5px solid rgba(250,243,224,0.4); transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring); } .btn-outline-light:hover { background:rgba(255,107,53,0.15); border-color:var(--flame); color:var(--flame); transform:translateY(-2px); } .btn-outline-light:active { transform:translateY(0) scale(0.98); } .btn-copper { display:inline-flex; align-items:center; gap:10px; background:var(--copper-grad); color:white; font-family:var(--fb); font-size:var(--fs-sm); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:16px 36px; border-radius:var(--rp); transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease),filter var(--dur-base) var(--ease); box-shadow:0 4px 20px rgba(184,115,51,0.35); } .btn-copper:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 32px rgba(184,115,51,0.50); filter:brightness(1.08); } /* ── Navigation ─────────────────────────────────────────────── */ #site-nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); padding:0 clamp(20px,4vw,48px); display:flex; align-items:center; justify-content:space-between; transition:background 0.4s var(--ease),backdrop-filter 0.4s,box-shadow 0.4s; } #site-nav.nav-scrolled { background:rgba(17,11,8,0.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 1px 0 rgba(255,107,53,0.18),0 4px 24px rgba(0,0,0,0.4); } .nav-logo { font-family:var(--fh); font-size:18px; font-weight:500; color:var(--cream); display:flex; align-items:center; gap:10px; text-decoration:none; } .nav-logo-img { width:38px; height:38px; object-fit:contain; border-radius:6px; filter:drop-shadow(0 0 8px rgba(232,93,38,0.4)); } .nav-logo-mark { width:40px; height:40px; border-radius:10px; background:var(--flame-grad); display:flex; align-items:center; justify-content:center; color:white; font-size:20px; box-shadow:0 0 20px rgba(255,107,53,0.45); } .nav-links { display:flex; align-items:center; gap:28px; } .nav-links a { font-size:13px; font-weight:700; letter-spacing:0.5px; color:rgba(250,243,224,0.8); position:relative; transition:color var(--dur-fast) var(--ease); } .nav-links a:hover, .nav-links a.active { color:var(--cream); } .nav-links a::after { content:''; position:absolute; bottom:-4px; left:50%; right:50%; height:1.5px; background:var(--flame); transition:left var(--dur-base) var(--ease),right var(--dur-base) var(--ease); } .nav-links a:hover::after, .nav-links a.active::after { left:0; right:0; } .nav-dropdown { position:relative; } .nav-dropdown-menu { position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px); background:var(--charcoal-mid); border:1px solid var(--border-dark); border-radius:var(--r); padding:10px 0; min-width:220px; box-shadow:var(--shl); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.25s,transform 0.25s,visibility 0.25s; z-index:9999; max-height:min(80vh, 480px); overflow-y:auto; /* custom scrollbar */ scrollbar-width:thin; scrollbar-color:rgba(255,107,53,0.4) transparent; } .nav-dropdown-menu::-webkit-scrollbar { width:4px; } .nav-dropdown-menu::-webkit-scrollbar-track { background:transparent; } .nav-dropdown-menu::-webkit-scrollbar-thumb { background:rgba(255,107,53,0.4); border-radius:4px; } /* hover only on true pointer (mouse) devices — prevents stuck state on touch */ @media (hover: hover) and (pointer: fine) { .nav-dropdown:hover .nav-dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } } .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.nav-dd-open .nav-dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .nav-dropdown-menu a { display:block; padding:10px 20px; font-size:13px; color:var(--muted-dark); white-space:nowrap; } .nav-dropdown-menu a:hover { color:var(--cream); background:rgba(255,107,53,0.08); } .nav-cta-wrap { display:flex; align-items:center; gap:12px; } .nav-phone-link { font-size:13px; font-weight:700; color:var(--cream); display:flex; align-items:center; gap:6px; } .nav-phone-link svg { color:var(--flame); } .nav-burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; color:var(--cream); font-size:22px; } @media (max-width:900px) { .nav-links, .nav-phone-link { display:none; } .nav-burger { display:flex; } .nav-cta-wrap .btn-primary { padding:10px 20px; font-size:11px; } } .nav-mobile-overlay { position:fixed; inset:0; z-index:999; background:rgba(17,11,8,0.97); backdrop-filter:blur(24px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.25s,visibility 0.25s; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:60px 24px 40px; } .nav-mobile-overlay.open { opacity:1; visibility:visible; pointer-events:auto; } .nav-mobile-overlay a { font-family:var(--fh); font-size:22px; font-weight:400; color:var(--cream); transition:color var(--dur-fast) var(--ease); padding:12px 24px; width:100%; text-align:center; min-height:48px; display:flex; align-items:center; justify-content:center; touch-action:manipulation; -webkit-tap-highlight-color:rgba(255,107,53,0.15); } .nav-mobile-overlay a:active { color:var(--flame); } .nav-mobile-close { position:absolute; top:20px; right:20px; width:44px; height:44px; font-size:28px; color:var(--muted-dark); display:flex; align-items:center; justify-content:center; transition:color var(--dur-fast) var(--ease); } .nav-mobile-close:hover { color:var(--cream); } /* ── Loading Screen ─────────────────────────────────────────── */ #loading-screen { position:fixed; inset:0; z-index:99999; background:var(--charcoal-deep); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity 0.7s var(--ease),visibility 0.7s; } #loading-screen.done { opacity:0; visibility:hidden; pointer-events:none; display:none; } .loading-icon { font-size:52px; animation:flame-pulse 1.2s ease-in-out infinite alternate; } .loading-brand { font-family:var(--fh); font-size:28px; font-weight:500; color:var(--cream); letter-spacing:-0.01em; } .loading-tagline { font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--muted-dark); } .loading-bar-wrap { width:200px; height:2px; background:rgba(250,243,224,0.1); border-radius:2px; overflow:hidden; } .loading-bar { height:100%; width:0; background:var(--flame-grad); border-radius:2px; animation:loading-fill 2s var(--ease-fire) forwards; } @keyframes loading-fill { 0%{width:0} 100%{width:100%} } @keyframes flame-pulse { 0% { transform:scaleY(1) rotate(-1deg); filter:brightness(0.9); } 100%{ transform:scaleY(1.12) rotate(2deg); filter:brightness(1.3) drop-shadow(0 0 12px rgba(255,107,53,0.6)); } } /* ── Hero — Split Layout with Video ─────────────────────────── */ .hero { position:relative; min-height:100dvh; display:flex; align-items:center; padding:0; overflow:hidden; background:#000; } .hero-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; } .hero-video-overlay { position:absolute; inset:0; z-index:1; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.15) 100%), linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.3) 100%); } /* Split layout */ .hero-split { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 0.9fr; align-items:center; gap:var(--space-xl); min-height:100dvh; width:100%; max-width:1400px; margin:0 auto; padding:var(--nav-h) clamp(24px,5vw,64px) 80px; } .hero-content { position:relative; z-index:2; max-width:600px; } .hero-eyebrow { font-family:var(--fb); font-size:var(--fs-xs); font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--flame); margin-bottom:var(--space-lg); display:block; opacity:0; animation:hero-up 0.8s 0.3s var(--ease-spring) forwards; } .hero-title { font-family:var(--fh); font-size:var(--fs-4xl); font-weight:500; color:var(--cream); line-height:1.06; letter-spacing:-0.02em; margin-bottom:var(--space-xl); opacity:0; animation:hero-up 0.9s 0.5s var(--ease-spring) forwards; } .hero-title em { font-style:italic; color:var(--flame); } .hero-subtitle { font-size:var(--fs-lg); color:rgba(250,243,224,0.72); line-height:1.7; max-width:520px; margin-bottom:var(--space-xl); opacity:0; animation:hero-up 0.9s 0.7s var(--ease-spring) forwards; } .hero-cta-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; opacity:0; animation:hero-up 0.9s 0.9s var(--ease-spring) forwards; } .hero-trust { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:16px 24px; background:rgba(250,243,224,0.06); border:1px solid rgba(255,107,53,0.2); border-radius:var(--r); backdrop-filter:blur(8px); margin-top:var(--space-2xl); opacity:0; animation:hero-up 0.9s 1.1s var(--ease-spring) forwards; } .hero-trust-item { font-size:13px; color:rgba(250,243,224,0.75); display:flex; align-items:center; gap:8px; } .hero-trust-item span { color:var(--flame); font-weight:700; } .hero-trust-sep { width:1px; height:20px; background:rgba(255,107,53,0.25); } /* ── Logo Section — Right Side ─────────────────────────────── */ .hero-logo-wrap { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:420px; opacity:0; animation:logo-reveal 1.2s 0.6s var(--ease-spring) forwards; } .hero-logo-img { position:relative; z-index:3; width:clamp(220px, 20vw, 320px); height:auto; filter:drop-shadow(0 0 40px rgba(232,93,38,0.3)) drop-shadow(0 0 80px rgba(139,26,26,0.2)); animation:logo-float 6s ease-in-out infinite; } .hero-logo-glow { position:absolute; z-index:1; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(232,93,38,0.2) 0%, rgba(139,26,26,0.12) 40%, transparent 70%); animation:glow-pulse 4s ease-in-out infinite alternate; } @keyframes logo-reveal { from { opacity:0; transform:scale(0.85) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } } @keyframes logo-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } } @keyframes glow-pulse { from { transform:scale(0.95); opacity:0.7; } to { transform:scale(1.1); opacity:1; } } @keyframes glow-pulse-outer { from { transform:scale(1); opacity:0.5; } to { transform:scale(1.15); opacity:0.9; } } /* Scroll indicator */ .hero-scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(250,243,224,0.45); font-size:10px; letter-spacing:2.5px; text-transform:uppercase; font-family:var(--fb); font-weight:700; animation:scroll-bob 2s ease-in-out infinite; } .hero-scroll-line { width:1px; height:36px; background:linear-gradient(var(--flame),transparent); } @keyframes hero-up { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } @keyframes scroll-bob { 0%,100%{opacity:0.45;transform:translateX(-50%) translateY(0)} 50%{opacity:0.9;transform:translateX(-50%) translateY(6px)} } /* ── Hero Mobile ───────────────────────────────────────────── */ @media(max-width:768px) { .hero-split { grid-template-columns:1fr; text-align:center; padding-top:calc(var(--nav-h) + 20px); gap:var(--space-lg); min-height:auto; } .hero-content { max-width:100%; } .hero-subtitle { max-width:100%; margin-left:auto; margin-right:auto; } .hero-cta-row { justify-content:center; } .hero-trust { justify-content:center; } .hero-logo-wrap { min-height:320px; order:-1; } .hero-logo-img { width:clamp(200px, 50vw, 280px); } .hero-logo-glow { width:260px; height:260px; } .hero-logo-glow-pulse { width:360px; height:360px; } .hero-logo-embers { width:360px; height:360px; } } /* ── Trust Bar ──────────────────────────────────────────────── */ .trust-bar { background:var(--charcoal-mid); padding:16px 0; overflow:hidden; border-top:1px solid rgba(255,107,53,0.15); border-bottom:1px solid rgba(255,107,53,0.15); } .trust-bar-track { display:flex; gap:48px; animation:marquee 45s linear infinite; width:max-content; } .trust-bar-track:hover { animation-play-state:paused; } .trust-item { display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-dark); } .trust-item svg { color:var(--flame); flex-shrink:0; } .trust-item strong { color:var(--cream); } @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ── Brand Statement ────────────────────────────────────────── */ .brand-statement { background:var(--charcoal); text-align:center; padding:clamp(64px,10vw,100px) clamp(20px,4vw,48px); position:relative; overflow:hidden; } .brand-statement::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; background:radial-gradient(circle,rgba(255,107,53,0.07) 0%,transparent 70%); pointer-events:none; } .brand-quote { font-family:var(--fh); font-style:italic; font-size:clamp(22px,3.5vw,44px); font-weight:400; color:var(--cream); line-height:1.4; max-width:820px; margin:0 auto; position:relative; z-index:1; } .brand-quote strong { color:var(--flame); font-style:normal; font-weight:700; } /* ── Section Divider ────────────────────────────────────────── */ .divider-wrap { display:flex; align-items:center; gap:20px; padding:0 clamp(20px,4vw,48px); max-width:1200px; margin:0 auto var(--space-xl); } .divider-line { flex:1; height:1px; background:var(--border); } .divider-line-dark { flex:1; height:1px; background:rgba(255,107,53,0.18); } .divider-flame { color:var(--flame); font-size:18px; animation:flame-pulse 2s ease-in-out infinite alternate; } .divider-copper { color:var(--copper); font-size:16px; } /* ── Bento Services Grid ────────────────────────────────────── */ .bento-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,250px); gap:16px; } .bento-card { position:relative; overflow:hidden; border-radius:var(--rl); background:var(--charcoal-mid); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); transition:transform var(--dur-base) var(--ease-heavy),box-shadow var(--dur-base) var(--ease); } .bento-card:hover { transform:translateY(-5px); box-shadow:var(--sh-fire),inset 0 1px 0 rgba(255,255,255,0.06); } .bento-card.hero-card { grid-column:span 2; grid-row:span 2; } .bento-card img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); } .bento-card:hover img { transform:scale(1.07); } .bento-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(17,11,8,0.88) 100%); } .bento-content { position:absolute; bottom:0; left:0; right:0; padding:28px; transform:translateY(4px); transition:transform var(--dur-base) var(--ease); } .bento-card:hover .bento-content { transform:translateY(0); } .bento-tag { font-family:var(--fb); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--flame); margin-bottom:6px; display:block; } .bento-title { font-family:var(--fh); font-size:var(--fs-base); font-weight:500; color:var(--cream); line-height:1.2; } .bento-card.hero-card .bento-title { font-size:var(--fs-xl); } .bento-arrow { display:inline-flex; align-items:center; gap:8px; color:var(--flame); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-top:10px; opacity:0; transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease); } .bento-card:hover .bento-arrow { opacity:1; transform:translateX(4px); } @media (max-width:900px) { .bento-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; } .bento-card { height:220px; } .bento-card.hero-card { grid-column:span 2; height:280px; } } @media (max-width:600px) { .bento-grid { grid-template-columns:1fr; } .bento-card.hero-card { grid-column:span 1; } } /* ── Tool Cards ─────────────────────────────────────────────── */ .tool-cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:var(--space-2xl); } .tool-card { background:var(--charcoal-mid); border:1px solid var(--border-dark); border-radius:var(--rl); padding:40px; position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); transition:transform var(--dur-base) var(--ease-heavy),border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease); } .tool-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%,rgba(255,107,53,0.08) 0%,transparent 60%); opacity:0; transition:opacity var(--dur-base) var(--ease); pointer-events:none; } .tool-card:hover { transform:translateY(-6px); border-color:rgba(255,107,53,0.45); box-shadow:0 16px 48px rgba(0,0,0,0.3),0 0 40px rgba(255,107,53,0.12); } .tool-card:hover::before { opacity:1; } .tool-card-icon { width:52px; height:52px; background:linear-gradient(135deg,rgba(255,107,53,0.14),rgba(184,115,51,0.14)); border:1px solid rgba(255,107,53,0.25); border-radius:var(--r); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:24px; transition:box-shadow var(--dur-base) var(--ease); } .tool-card:hover .tool-card-icon { box-shadow:0 0 20px rgba(255,107,53,0.35); } .tool-card-name { font-family:var(--fh); font-size:var(--fs-xl); font-weight:500; color:var(--cream); margin-bottom:12px; } .tool-card-desc { font-size:13px; color:var(--muted-dark); line-height:1.65; margin-bottom:24px; } .tool-card-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--flame); transition:gap var(--dur-base) var(--ease); } .tool-card:hover .tool-card-link { gap:14px; } @media (max-width:768px) { .tool-cards-grid { grid-template-columns:1fr; } } /* ── Before/After ───────────────────────────────────────────── */ .ba-wrapper { max-width:1000px; margin:var(--space-2xl) auto 0; } .ba-slider { position:relative; overflow:hidden; border-radius:var(--rl); aspect-ratio:16/9; cursor:ew-resize; user-select:none; box-shadow:var(--sh-fire); } .ba-after, .ba-before { position:absolute; inset:0; width:100%; height:100%; } .ba-after img, .ba-before img { width:100%; height:100%; object-fit:cover; } .ba-before { clip-path:inset(0 50% 0 0); } .ba-glow-line { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:3px; background:linear-gradient(180deg,transparent,var(--flame),var(--copper),var(--flame),transparent); box-shadow:0 0 20px rgba(255,107,53,0.8),0 0 40px rgba(255,107,53,0.4); pointer-events:none; } .ba-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; background:var(--flame-grad); border-radius:50%; border:3px solid rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px rgba(255,107,53,0.7); transition:box-shadow var(--dur-fast) var(--ease); pointer-events:none; } .ba-handle svg { color:white; } .ba-slider:active .ba-handle { box-shadow:0 0 50px rgba(255,107,53,0.95); } .ba-labels { position:absolute; top:20px; left:0; right:0; display:flex; justify-content:space-between; padding:0 20px; pointer-events:none; } .ba-label { font-family:var(--fb); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:var(--rp); backdrop-filter:blur(10px); } .ba-label.before { background:rgba(17,11,8,0.75); color:var(--muted-dark); } .ba-label.after { background:rgba(255,107,53,0.85); color:white; } /* ── Stove Types Comparison ─────────────────────────────────── */ .stove-types-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:var(--space-2xl); } .stove-type-card { background:var(--charcoal-mid); border:1px solid var(--border-dark); border-radius:var(--r); padding:32px 22px; text-align:center; position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); transition:transform var(--dur-base) var(--ease-heavy),border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease); } .stove-type-card:hover, .stove-type-card.active { transform:translateY(-5px); border-color:var(--flame); box-shadow:0 8px 32px rgba(255,107,53,0.2); } .stove-type-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--flame-grad); transform:scaleX(0); transition:transform var(--dur-base) var(--ease); } .stove-type-card:hover::after, .stove-type-card.active::after { transform:scaleX(1); } .stove-type-icon { font-size:36px; margin-bottom:14px; display:block; } .stove-type-name { font-family:var(--fh); font-size:var(--fs-base); font-weight:500; color:var(--cream); margin-bottom:8px; } .stove-type-desc { font-size:11px; color:var(--muted-dark); line-height:1.55; } .stove-type-kw { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--copper); margin-top:8px; } /* ── Process Timeline ───────────────────────────────────────── */ .timeline { position:relative; padding-left:56px; } .timeline::before { content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--flame) 0%,var(--copper) 50%,var(--flame) 100%); } .timeline-item { position:relative; margin-bottom:48px; } .timeline-dot { position:absolute; left:-57px; top:0; width:32px; height:32px; border-radius:50%; background:var(--flame-grad); display:flex; align-items:center; justify-content:center; color:white; font-size:13px; font-weight:700; box-shadow:0 0 18px rgba(255,107,53,0.45); font-family:var(--fh); } .timeline-step { font-family:var(--fb); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--flame); margin-bottom:6px; display:block; } .timeline-title { font-family:var(--fh); font-size:var(--fs-lg); font-weight:500; color:var(--cream); margin-bottom:10px; } .timeline-desc { font-size:14px; color:var(--muted-dark); line-height:1.65; } /* ── Testimonials ───────────────────────────────────────────── */ .testimonial-carousel { position:relative; overflow:hidden; margin-top:var(--space-2xl); } .testimonial-track { display:flex; transition:transform 0.6s var(--ease); } .testimonial-card { flex:0 0 100%; padding:0 8px; } @media(min-width:768px) { .testimonial-card { flex:0 0 calc(100%/3); } } .t-inner { background:white; border-radius:var(--rl); padding:36px; box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,0.8); border:1px solid var(--border); height:100%; transition:transform var(--dur-base) var(--ease-heavy),box-shadow var(--dur-base) var(--ease); } .t-inner:hover { transform:translateY(-5px); box-shadow:var(--shm),0 0 30px rgba(255,107,53,0.08),inset 0 1px 0 rgba(255,255,255,0.8); } .t-stars { display:flex; gap:3px; margin-bottom:14px; color:var(--flame); font-size:15px; } .t-text { font-family:var(--fh); font-size:14px; font-style:italic; color:var(--text); line-height:1.75; margin-bottom:20px; } .t-text::before { content:'"'; color:var(--flame); font-size:28px; line-height:0; vertical-align:-10px; margin-right:4px; } .t-author { display:flex; align-items:center; gap:12px; } .t-avatar { width:42px; height:42px; border-radius:50%; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:17px; color:var(--flame); } .t-name { font-weight:700; font-size:13px; color:var(--text); } .t-loc { font-size:11px; color:var(--muted); } .t-badge { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:var(--rp); background:rgba(255,107,53,0.09); color:var(--flame); border:1px solid rgba(255,107,53,0.2); } .t-nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:var(--space-xl); } .t-btn { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border); background:white; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:16px; transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); } .t-btn:hover { background:var(--flame); border-color:var(--flame); color:white; box-shadow:0 4px 16px rgba(255,107,53,0.3); } .t-dots { display:flex; gap:7px; } .t-dot { width:7px; height:7px; border-radius:50%; background:var(--border); cursor:pointer; transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); } .t-dot.active { background:var(--flame); transform:scale(1.4); } /* ── Stats Bar ──────────────────────────────────────────────── */ .stats-bar { background:var(--charcoal-deep); border-top:1px solid rgba(255,107,53,0.2); border-bottom:1px solid rgba(255,107,53,0.2); } .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; } .stat-item { padding:clamp(32px,5vw,64px) 20px; position:relative; } .stat-item:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background:rgba(255,107,53,0.15); } .stat-num { font-family:var(--fh); font-size:clamp(36px,5vw,62px); font-weight:700; line-height:1; margin-bottom:8px; background:var(--flame-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .stat-label { font-size:12px; color:var(--muted-dark); letter-spacing:0.5px; text-transform:uppercase; font-weight:700; } @media (max-width:600px) { .stats-grid { grid-template-columns:repeat(2,1fr); } .stat-item:nth-child(2)::after { display:none; } } /* ── Gallery Preview ────────────────────────────────────────── */ .gallery-preview-grid { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:240px 240px; gap:12px; } .gallery-preview-item { position:relative; overflow:hidden; border-radius:var(--r); cursor:pointer; } .gallery-preview-item:first-child { grid-row:span 2; } .gallery-preview-item img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); } .gallery-preview-item:hover img { transform:scale(1.08); } .gp-overlay { position:absolute; inset:0; background:rgba(17,11,8,0.5); opacity:0; transition:opacity var(--dur-base) var(--ease); display:flex; align-items:center; justify-content:center; } .gallery-preview-item:hover .gp-overlay { opacity:1; } .gp-icon { color:white; font-size:30px; } @media(max-width:600px) { .gallery-preview-grid { grid-template-columns:1fr 1fr; } .gallery-preview-item:first-child { grid-row:span 1; } } /* ── Final CTA ──────────────────────────────────────────────── */ .final-cta { position:relative; overflow:hidden; text-align:center; padding:clamp(80px,12vw,140px) clamp(20px,4vw,48px); background:var(--charcoal-deep); } .final-cta-bg { position:absolute; inset:0; background-image:url('images/hero.jpg'); background-size:cover; background-position:center; opacity:0.1; } .final-cta-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,rgba(255,107,53,0.12) 0%,transparent 65%); } .final-cta > * { position:relative; z-index:1; } /* ── Footer ─────────────────────────────────────────────────── */ footer { background:var(--charcoal-deep); padding:clamp(48px,8vw,96px) clamp(20px,4vw,48px) 36px; border-top:1px solid rgba(255,107,53,0.15); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-2xl); margin-bottom:var(--space-2xl); } .footer-brand { font-family:var(--fh); font-size:22px; font-weight:500; color:var(--cream); display:flex; align-items:center; gap:12px; margin-bottom:var(--space-lg); } .footer-brand-mark { width:38px; height:38px; border-radius:9px; background:var(--flame-grad); display:flex; align-items:center; justify-content:center; color:white; font-size:17px; } .footer-desc { font-size:13px; color:var(--muted-dark); line-height:1.75; max-width:280px; } .footer-certs { display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--space-lg); } .footer-cert { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:5px 11px; border-radius:var(--rp); background:rgba(255,107,53,0.1); color:var(--flame); border:1px solid rgba(255,107,53,0.22); } .footer-col-h { font-family:var(--fb); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted-dark); margin-bottom:20px; display:block; } .footer-links { display:flex; flex-direction:column; gap:11px; } .footer-links a { font-size:13px; color:rgba(250,243,224,0.58); transition:color var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease); } .footer-links a:hover { color:var(--cream); padding-left:6px; } .footer-contact-row { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(250,243,224,0.68); margin-bottom:12px; } .footer-contact-row svg { color:var(--flame); flex-shrink:0; margin-top:2px; } .footer-bottom { border-top:1px solid rgba(255,107,53,0.1); padding-top:var(--space-lg); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; } .footer-legal { font-size:12px; color:var(--muted-dark); } .footer-legal a { color:var(--flame); } .footer-wa { display:flex; align-items:center; gap:8px; background:#25D366; color:white; padding:9px 20px; border-radius:var(--rp); font-weight:700; font-size:13px; transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease); } .footer-wa:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 6px 20px rgba(37,211,102,0.35); } @media(max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } } @media(max-width:600px) { .footer-grid { grid-template-columns:1fr; } } /* ── Scroll Reveal ──────────────────────────────────────────── */ .reveal { opacity:0; transform:translateY(32px); filter:blur(4px); transition:opacity 0.9s var(--ease-heavy),transform 0.9s var(--ease-heavy),filter 0.9s var(--ease-heavy); } .reveal-left { opacity:0; transform:translateX(-32px); filter:blur(4px); transition:opacity 0.9s var(--ease-heavy),transform 0.9s var(--ease-heavy),filter 0.9s var(--ease-heavy); } .reveal-right { opacity:0; transform:translateX(32px); filter:blur(4px); transition:opacity 0.9s var(--ease-heavy),transform 0.9s var(--ease-heavy),filter 0.9s var(--ease-heavy); } .reveal-scale { opacity:0; transform:scale(0.92); filter:blur(4px); transition:opacity 0.9s var(--ease-heavy),transform 0.9s var(--ease-heavy),filter 0.9s var(--ease-heavy); } .reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible { opacity:1; transform:none; filter:blur(0); } .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .d5{transition-delay:.5s} /* ── Cookie Banner ──────────────────────────────────────────── */ #cookie-banner { position:fixed; bottom:20px; left:20px; right:20px; z-index:9997; max-width:520px; background:var(--charcoal-mid); border:1px solid var(--border-dark); border-radius:var(--rl); padding:24px; box-shadow:var(--shxl); transform:translateY(120%); opacity:0; transition:transform 0.5s var(--ease-spring),opacity 0.5s var(--ease); } #cookie-banner.show { transform:translateY(0); opacity:1; } .ck-title { font-family:var(--fh); font-size:var(--fs-lg); color:var(--cream); margin-bottom:8px; } .ck-text { font-size:13px; color:var(--muted-dark); margin-bottom:18px; line-height:1.6; } .ck-btns { display:flex; gap:10px; } /* ── Page Hero (inner pages) ────────────────────────────────── */ .page-hero { background:var(--charcoal-deep); padding:calc(var(--nav-h) + 56px) clamp(20px,4vw,48px) 72px; position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; inset:0; opacity:0.12; background-image:url('images/hero.jpg'); background-size:cover; background-position:center; pointer-events:none; } .page-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(17,11,8,0.88) 0%,rgba(26,26,26,0.65) 100%); pointer-events:none; } .page-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; } .breadcrumb { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-dark); margin-bottom:var(--space-lg); } .breadcrumb a { color:var(--flame); } .breadcrumb span { color:rgba(250,243,224,0.25); } /* ── Tool Pages ─────────────────────────────────────────────── */ .tool-container { max-width:780px; margin:0 auto; padding:var(--space-2xl) clamp(20px,4vw,48px); } .tool-progress { display:flex; align-items:center; gap:8px; margin-bottom:var(--space-2xl); } .tool-progress-bar { flex:1; height:4px; border-radius:4px; background:var(--border); transition:background 0.4s; } .tool-progress-bar.done { background:var(--flame-grad); } .tool-step { display:none; animation:hero-up 0.4s var(--ease-spring); } .tool-step.active { display:block; } .tool-step-title { font-family:var(--fh); font-size:var(--fs-xl); font-weight:500; color:var(--charcoal); margin-bottom:8px; } .tool-step-sub { font-size:14px; color:var(--muted); margin-bottom:var(--space-lg); } .tool-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:var(--space-lg) 0; } .tool-opt { padding:20px 14px; border-radius:var(--r); border:2px solid var(--border); background:white; text-align:center; cursor:pointer; transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease); } .tool-opt:hover { border-color:var(--flame); transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,107,53,0.15); } .tool-opt.sel { border-color:var(--flame); background:rgba(255,107,53,0.05); box-shadow:0 6px 20px rgba(255,107,53,0.12); } .tool-opt-icon { font-size:28px; margin-bottom:8px; display:block; } .tool-opt-label { font-size:13px; font-weight:700; color:var(--text); } .tool-opt-sub { font-size:11px; color:var(--muted); margin-top:4px; } .tool-nav { display:flex; gap:12px; margin-top:var(--space-xl); } .tool-input { width:100%; padding:13px 15px; border:1.5px solid var(--border); border-radius:var(--r); font-family:var(--fb); font-size:var(--fs-base); color:var(--text); background:white; transition:border-color var(--dur-fast) var(--ease); margin-bottom:12px; } .tool-input:focus { outline:none; border-color:var(--flame); box-shadow:0 0 0 3px rgba(255,107,53,0.08); } .tool-result { background:var(--charcoal); border-radius:var(--rl); padding:40px; text-align:center; margin-top:var(--space-xl); border:1px solid rgba(255,107,53,0.22); } .result-number { font-family:var(--fh); font-size:clamp(44px,8vw,76px); font-weight:700; line-height:1; background:var(--flame-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; } .result-label { font-size:13px; color:var(--muted-dark); margin-bottom:24px; } .result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:var(--space-lg) 0; text-align:left; } .result-card { background:rgba(250,243,224,0.05); border:1px solid rgba(255,107,53,0.15); border-radius:var(--r); padding:16px; } .result-card-label { font-size:11px; color:var(--muted-dark); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; margin-bottom:4px; } .result-card-val { font-family:var(--fh); font-size:var(--fs-lg); color:var(--cream); font-weight:500; } .tool-range { width:100%; margin:var(--space-md) 0; accent-color:var(--flame); height:6px; } .lead-capture { background:white; border-radius:var(--rl); padding:36px; } .lc-title { font-family:var(--fh); font-size:var(--fs-xl); font-weight:500; color:var(--charcoal); margin-bottom:8px; } .lc-sub { font-size:14px; color:var(--muted); margin-bottom:var(--space-lg); } /* ── Forms ──────────────────────────────────────────────────── */ .form-group { margin-bottom:18px; } .form-label { display:block; font-size:13px; font-weight:700; color:var(--text); margin-bottom:7px; letter-spacing:0.5px; } .form-control { width:100%; padding:13px 15px; border:1.5px solid var(--border); border-radius:var(--r); font-family:var(--fb); font-size:var(--fs-base); color:var(--text); background:white; transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); } .form-control:focus { outline:none; border-color:var(--flame); box-shadow:0 0 0 3px rgba(255,107,53,0.08); } .form-control.err { border-color:#DC2626; } .form-err { font-size:12px; color:#DC2626; margin-top:4px; display:none; } .form-err.show { display:block; } textarea.form-control { min-height:120px; resize:vertical; } .gdpr-row { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--muted); line-height:1.5; } .gdpr-row input[type="checkbox"] { margin-top:2px; accent-color:var(--flame); flex-shrink:0; } /* ── Gallery ────────────────────────────────────────────────── */ .gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; } .gallery-item { position:relative; overflow:hidden; border-radius:var(--r); aspect-ratio:4/3; cursor:pointer; } .gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); } .gallery-item:hover img { transform:scale(1.06); } .gi-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(17,11,8,0.8) 100%); opacity:0; transition:opacity var(--dur-base) var(--ease); display:flex; align-items:flex-end; padding:20px; } .gallery-item:hover .gi-overlay { opacity:1; } .gi-title { font-family:var(--fh); font-size:14px; color:var(--cream); } .lightbox { position:fixed; inset:0; z-index:9000; background:rgba(17,11,8,0.96); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.4s,visibility 0.4s; } .lightbox.open { opacity:1; visibility:visible; pointer-events:auto; } .lightbox img { max-width:90vw; max-height:86vh; object-fit:contain; border-radius:var(--r); box-shadow:var(--shxl); } .lb-close { position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,107,53,0.2); color:white; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:background var(--dur-fast) var(--ease); } .lb-close:hover { background:var(--flame); } /* ── Service Page ───────────────────────────────────────────── */ .service-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:var(--space-2xl); } .service-feature { background:var(--cream-deep); border-radius:var(--r); padding:28px; border-left:3px solid var(--flame); transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease); } .service-feature:hover { transform:translateY(-3px); box-shadow:var(--shm); } .sf-icon { font-size:28px; margin-bottom:12px; } .sf-title { font-family:var(--fh); font-size:var(--fs-base); font-weight:500; color:var(--charcoal); margin-bottom:8px; } .sf-desc { font-size:13px; color:var(--muted); line-height:1.6; } /* ── County Page ────────────────────────────────────────────── */ .county-nearby-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:var(--space-lg); } .county-nearby-link { display:flex; align-items:center; gap:8px; padding:14px 16px; background:var(--cream-deep); border-radius:var(--r); border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text); transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease); } .county-nearby-link:hover { border-color:var(--flame); background:rgba(255,107,53,0.05); } .county-nearby-link svg { color:var(--flame); flex-shrink:0; } /* ── About Page ─────────────────────────────────────────────── */ .team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; } .team-card { background:white; border-radius:var(--rl); overflow:hidden; box-shadow:var(--sh); border:1px solid var(--border); transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease); } .team-card:hover { transform:translateY(-4px); box-shadow:var(--shm); } .team-card img { width:100%; aspect-ratio:4/3; object-fit:cover; } .team-card-info { padding:24px; } .team-name { font-family:var(--fh); font-size:var(--fs-lg); font-weight:500; color:var(--charcoal); margin-bottom:4px; } .team-role { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--flame); margin-bottom:10px; } .team-bio { font-size:13px; color:var(--muted); line-height:1.6; } /* ── Contact Map ────────────────────────────────────────────── */ .map-embed { width:100%; height:380px; border-radius:var(--rl); border:none; filter:saturate(0.8); } /* ── Floating WhatsApp Button ────────────────────────────────── */ #wa-fab { position:fixed; bottom:28px; right:28px; z-index:400; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 28px rgba(37,211,102,0.45); transition:transform .3s, box-shadow .3s; text-decoration:none; animation:waPop .6s 1.2s ease both; } #wa-fab:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 10px 36px rgba(37,211,102,0.55); } #wa-fab svg { width:28px; height:28px; fill:#fff; position:relative; z-index:1; } @keyframes waPop { from { opacity:0; transform:scale(0.5); } to { opacity:1; transform:scale(1); } } .wa-pulse { position:absolute; inset:0; border-radius:50%; background:#25D366; animation:waPulse 2.5s ease-out infinite; } @keyframes waPulse { 0% { transform:scale(1); opacity:.5; } 100% { transform:scale(1.65); opacity:0; } } @media print { #wa-fab { display:none!important; } } /* ── Language Selector ────────────────────────────────────────── */ #lang-switcher { position:fixed; right:24px; bottom:100px; z-index:450; font-family:var(--fb); } #lang-btn { display:flex; align-items:center; gap:8px; background:rgba(17,11,8,0.90); color:var(--cream); border:1px solid rgba(255,255,255,0.18); border-radius:100px; padding:9px 15px; font-size:13px; font-weight:600; cursor:pointer; transition:all .25s; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 4px 20px rgba(0,0,0,0.3); white-space:nowrap; } #lang-btn:hover { background:rgba(17,11,8,0.98); border-color:rgba(255,107,53,0.5); transform:translateY(-1px); } #lang-panel { position:absolute; bottom:calc(100% + 10px); right:0; background:#1c130e; border-radius:14px; box-shadow:0 12px 48px rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.1); overflow:hidden; min-width:170px; opacity:0; transform:translateY(8px) scale(0.97); pointer-events:none; transition:all .22s ease; } #lang-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; } .lang-opt { display:flex; align-items:center; gap:10px; width:100%; padding:11px 16px; background:none; border:none; cursor:pointer; font-family:var(--fb); font-size:13.5px; font-weight:500; color:var(--cream); transition:background .15s; text-align:left; } .lang-opt:hover { background:rgba(255,107,53,0.12); } .lang-opt.active { background:rgba(255,107,53,0.18); color:var(--flame); font-weight:700; } .lang-flag { font-size:17px; line-height:1; } .lang-name { flex:1; } .lang-check { color:var(--flame); font-size:12px; font-weight:800; } @media(max-width:560px) { #lang-switcher { right:16px; bottom:90px; } #lang-btn { padding:8px 12px; font-size:12px; } } @media print { #lang-switcher { display:none!important; } } /* ── Print ──────────────────────────────────────────────────── */ @media print { #site-nav,#loading-screen,#cookie-banner,.hero-scroll,.trust-bar,.final-cta,footer { display:none!important; } body { background:white; color:black; } .section { padding:20px 0; } } /* ── Google Translate suppression ── */ .goog-te-banner-frame, .goog-te-gadget, #goog-gt-tt, .goog-te-balloon-frame, .skiptranslate { display: none !important; visibility: hidden !important; } body { top: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } .goog-te-spinner-pos { display: none !important; } /* ── Suppress old floating lang switcher ── */ #lang-switcher { display: none !important; } /* ── Nav lang dropdown ── */ .nav-lang-wrap { position: relative; } .nav-lang-btn { display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.82); font-size: 0.875rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: color 0.2s, background 0.2s; white-space: nowrap; } .nav-lang-btn:hover { color: #fff; background: rgba(255,255,255,0.08); } .nav-lang-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: rgba(6,13,40,0.97); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 8px; min-width: 150px; z-index: 200; box-shadow: 0 16px 48px rgba(0,0,0,0.4); list-style: none; margin: 0; } .nav-lang-panel.open { display: block; } .nav-lang-panel li button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 8px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.82); font-size: 0.875rem; transition: background 0.15s, color 0.15s; } .nav-lang-panel li button:hover { background: rgba(255,255,255,0.07); color: #fff; } .nav-lang-panel li button.active { color: #f5a623; } /* ── Nav WhatsApp ── */ .nav-wa { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: #25d366; color: #fff !important; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: background 0.2s, transform 0.15s; } .nav-wa:hover { background: #1fba58; transform: translateY(-1px); } /* ── Insurance Claim Steps (Solar-style animated) ──────────── */ .claim-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-md); text-align:center; position:relative; padding-top:8px; } /* Connecting gradient line behind the number circles */ .claim-steps::before { content:''; position:absolute; top:36px; left:10%; right:10%; height:2px; background:linear-gradient(to right, var(--flame), var(--copper), var(--flame)); opacity:0.25; z-index:0; } .claim-step { position:relative; z-index:1; } .claim-num { width:66px; height:66px; border-radius:50%; background:var(--flame-grad); color:#fff; font-family:var(--fh); font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-md); box-shadow:0 6px 24px rgba(255,107,53,0.4); position:relative; z-index:1; transition:transform 0.4s var(--ease-heavy), box-shadow 0.4s var(--ease); } .claim-step:hover .claim-num { transform:scale(1.1); box-shadow:0 8px 32px rgba(255,107,53,0.6); } .claim-title { font-family:var(--fh); font-size:15px; font-weight:500; color:var(--cream); margin-bottom:6px; } .claim-desc { font-size:12px; color:var(--muted-dark); line-height:1.6; max-width:160px; margin:0 auto; } /* Light background variant */ .claim-steps-light .claim-title { color:var(--charcoal); } .claim-steps-light .claim-desc { color:var(--muted); max-width:180px; } @media(max-width:768px) { .claim-steps { grid-template-columns:1fr; gap:32px; } .claim-steps::before { top:0; bottom:0; left:33px; right:auto; width:2px; height:auto; } .claim-step { display:grid; grid-template-columns:66px 1fr; gap:var(--space-md); text-align:left; align-items:start; } .claim-num { margin:0; } .claim-title { margin-top:6px; } .claim-desc { max-width:none; } } /* ── Premium Upgrades v3 ───────────────────────────────────── */ /* Staggered reveal delays for card groups */ .reveal.d1 { transition-delay:0.05s; } .reveal.d2 { transition-delay:0.12s; } .reveal.d3 { transition-delay:0.19s; } .reveal.d4 { transition-delay:0.26s; } .reveal.d5 { transition-delay:0.33s; } /* Smoother section transitions with gradient borders */ .section + .section-dark, .section + .section-deepdark, .section-warm + .section-dark, .section-warm + .section-deepdark { border-top:1px solid rgba(255,107,53,0.08); } .section-dark + .section, .section-dark + .section-warm, .section-deepdark + .section, .section-deepdark + .section-warm { border-top:1px solid rgba(184,115,51,0.12); } /* Bento cards — keyboard accessible */ .bento-card:focus-within .bento-arrow, .bento-card:focus-within .bento-overlay { opacity:1; } .bento-card:focus-within { transform:translateY(-3px); box-shadow:0 8px 32px rgba(255,107,53,0.2); } /* Better testimonial card depth */ .t-inner { border-left:3px solid transparent; transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease); } .t-inner:hover { border-left-color:var(--flame); } /* Premium subtle divider between sections */ .divider-wrap { display:flex; align-items:center; gap:16px; padding:var(--space-lg) 0; } .divider-line-dark { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(255,107,53,0.2),transparent); } /* Sticky mobile CTA bar */ .mobile-cta-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:800; background:rgba(17,11,8,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid rgba(255,107,53,0.2); padding:12px 16px; transform:translateY(100%); transition:transform 0.4s var(--ease); } .mobile-cta-bar.visible { transform:translateY(0); } .mobile-cta-bar-inner { display:flex; align-items:center; justify-content:center; gap:10px; max-width:480px; margin:0 auto; } .mobile-cta-bar .btn-primary { padding:12px 24px; font-size:12px; flex:1; justify-content:center; } .mobile-cta-bar .btn-outline-light { padding:12px 20px; font-size:12px; flex:0; white-space:nowrap; } @media (max-width:768px) { .mobile-cta-bar { display:block; } /* Add bottom padding to body so sticky bar doesn't cover content */ .final-cta { padding-bottom:100px; } } /* Tool card hover upgrade — spotlight border effect */ .tool-card { position:relative; transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease); } .tool-card:hover { transform:translateY(-6px); box-shadow:var(--shm),0 0 0 1px rgba(255,107,53,0.15); } /* Stats counter — tabular figures for clean alignment */ .stat-num { font-variant-numeric:tabular-nums; } /* Service type cards — active glow on hover */ .stove-type-card:hover { background:rgba(255,107,53,0.04); } /* Insurance section repair cards — warm shadow on hover */ .insurance-grid > div:hover, .repair-services-grid > div:hover { box-shadow:0 8px 32px rgba(255,107,53,0.12); border-color:rgba(255,107,53,0.25); } /* Page hero sections — better gradient depth */ .page-hero { background:linear-gradient(180deg,var(--charcoal-deep) 0%,var(--charcoal) 60%,rgba(26,26,26,0.95) 100%); } /* Smooth image zoom on gallery hover */ .gallery-preview-item img, .gallery-item img { transition:transform 0.6s var(--ease); } .gallery-preview-item:hover img, .gallery-item:hover img { transform:scale(1.05); } /* Eyebrow labels — add a subtle left accent line variant */ .eyebrow::before { content:''; display:inline-block; width:24px; height:1.5px; background:var(--flame); margin-right:10px; vertical-align:middle; } .tc .eyebrow::before { display:none; } /* Better loading screen transition */ #loading-screen { transition:opacity 0.8s var(--ease-out),visibility 0.8s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .mobile-cta-bar { transition:none; } } /* ── Google Reviews Widget ──────────────────────────────────── */ .google-reviews-row { display: grid; grid-template-columns: repeat(5, 280px); gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(184,115,51,0.3) transparent; } .google-reviews-row::-webkit-scrollbar { height: 4px; } .google-reviews-row::-webkit-scrollbar-track { background: transparent; } .google-reviews-row::-webkit-scrollbar-thumb { background: rgba(184,115,51,0.3); border-radius: 2px; } .g-review-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; padding: 20px; scroll-snap-align: start; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; min-height: 200px; } .g-review-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-2px); } .g-review-see-all { background: linear-gradient(135deg, #fafafa 0%, #f0f4ff 100%); border: 1px dashed #c5d2f6; text-decoration: none; cursor: pointer; align-items: center; justify-content: center; } .g-review-see-all:hover { background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%); border-color: #4285F4; } @media (min-width: 1024px) { .google-reviews-row { grid-template-columns: repeat(5, 1fr); overflow-x: auto; } } @media (max-width: 767px) { .google-reviews-row { grid-template-columns: repeat(5, 260px); } } /* ── Google Translate compatibility ──────────────────────── */ /* When GT is active it adds a 40px bar — shrink hero so it still fills screen */ body.translated-ltr .hero, body.translated-rtl .hero { min-height: calc(100dvh - 40px); } /* Hide GT's own top bar and frame — we use our own switcher */ .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display:none !important; } body { top: 0 !important; } .skiptranslate { display:none !important; }