/* ============================================================= RollingFizz — Main Stylesheet File : rfz-assets/css/rfz-style.css Prefix : rfz- (WordPress-safe, no conflicts with wp- names) Version : 1.0 ============================================================= */ /* ─── TIER 1 · Primitive palette ─────────────────────────────────────────── Raw hex values. Never reference these directly in component rules. These are the "ingredients" — semantic tokens (Tier 2) are the "recipes". ────────────────────────────────────────────────────────────────────────── */ :root { --clr-white: #ffffff; --clr-off: #fafaf7; --clr-paper: #f5f3ec; --clr-border: #e8e4d8; --clr-border2: #d8d2c0; --clr-lemon: #e8d832; --clr-lemon2: #f5e840; --clr-orange: #f07820; --clr-orange2: #f59030; --clr-soda: #a8e0f0; --clr-soda2: #c8eef8; --clr-soda3: #e0f6fc; --clr-green: #70c850; --clr-forest: #1b6b3c; /* logo forest green — Rolling text, accents */ --clr-gold: #d4a000; /* logo warm gold — Fizz text, highlights */ --clr-brand: #1e7a2a; /* Option A CTA green — primary buttons */ --clr-brand-h: #166020; /* Option A CTA hover */ --clr-dark: #0d2818; /* very dark green — replaces near-black */ --clr-mid: #1a3d26; /* dark-mid green */ --clr-muted: #8a8678; --clr-text: #2a2820; /* Fonts — not theme-specific; override in rfz-theme-*.css if needed */ --font-body: 'Poppins',sans-serif; --font-disp: 'Poppins',sans-serif; --font-num: 'Poppins',sans-serif; } /* ─── TIER 2 · Semantic theme tokens ─────────────────────────────────────── These are the only variables component rules should ever use. Defaults here = Citrus theme. The active rfz-theme-*.css loaded in overrides this block to switch the whole site theme in one file swap. ────────────────────────────────────────────────────────────────────────── */ :root { --color-primary: var(--clr-brand); /* primary CTA, brand highlight */ --color-primary-hover: var(--clr-brand-h); /* CTA hover state */ --color-accent1: var(--clr-lemon); /* accent 1 — lemon yellow */ --color-accent1-bright: var(--clr-lemon2); /* accent 1 bright variant */ --color-accent2: var(--clr-soda); /* accent 2 — soda blue */ --color-accent2-mid: var(--clr-soda2); /* accent 2 mid tint */ --color-accent2-light: var(--clr-soda3); /* accent 2 lightest tint */ --color-accent3: var(--clr-green); /* accent 3 — green / success */ --color-bg: var(--clr-white); /* default page background */ --color-bg-alt: var(--clr-off); /* alternate section background */ --color-bg-paper: var(--clr-paper); /* paper tint background */ --color-surface-dark: var(--clr-dark); /* dark sections & headings */ --color-surface-mid: var(--clr-mid); /* mid-dark surfaces */ --color-text: var(--clr-text); /* default body text */ --color-text-muted: var(--clr-muted); /* secondary / subdued text */ --color-border: var(--clr-border); /* card & divider borders */ --color-border-strong: var(--clr-border2); /* stronger border variant */ } /* ─── TIER 3 · Backward-compat aliases ──────────────────────────────────── Maps the old short names (--orange, --dark …) to their semantic counterparts so ALL existing component rules continue to work without a single change. New code should prefer the --color-* names above. ────────────────────────────────────────────────────────────────────────── */ :root { --white: var(--color-bg); --off: var(--color-bg-alt); --paper: var(--color-bg-paper); --border: var(--color-border); --border2: var(--color-border-strong); --lemon: var(--color-accent1); --lemon2: var(--color-accent1-bright); --orange: var(--color-primary); --orange2: var(--color-primary-hover); --soda: var(--color-accent2); --soda2: var(--color-accent2-mid); --soda3: var(--color-accent2-light); --green: var(--color-accent3); --dark: var(--color-surface-dark); --mid: var(--color-surface-mid); --muted: var(--color-text-muted); --text: var(--color-text); } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--white); color:var(--text); font-family:var(--font-body); font-weight:400; font-size:15px; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* ── NAV ─────────────────────────────── */ nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 60px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.95); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); } .nav-logo { font-family:var(--font-num); font-size:22px; font-weight:800; letter-spacing:4px; color:var(--clr-forest); text-decoration:none; } .nav-logo .nl-accent { color:var(--clr-gold); } /* Nav glass icon — slides left→right with spin, then stable */ .nav-glass { height:36px; width:auto; display:inline-block; vertical-align:middle; margin-left:2px; position:relative; top:-2px; transform-origin:center center; animation:glassRollIn 1.8s cubic-bezier(0.22,1,0.36,1) forwards; filter:drop-shadow(0 2px 8px rgba(30,122,42,0.3)); transition:filter 0.3s; } .nav-logo:hover .nav-glass { filter:drop-shadow(0 4px 14px rgba(212,160,0,0.6)) drop-shadow(0 0 6px rgba(30,122,42,0.4)); } @keyframes glassRollIn { 0% { transform:translateX(-280px) rotate(0deg) scale(0.85); opacity:0; } 6% { opacity:1; } 74% { transform:translateX(14px) rotate(730deg) scale(1.05); } 87% { transform:translateX(-5px) rotate(714deg) scale(0.97); } 94% { transform:translateX(3px) rotate(722deg) scale(1.01); } 100% { transform:translateX(0px) rotate(720deg) scale(1); opacity:1; } } .nav-links { display:flex; gap:36px; list-style:none; } .nav-links a { color:var(--muted); text-decoration:none; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; transition:color 0.3s; } .nav-links a:hover { color:var(--orange); } .nav-active { color:var(--clr-gold)!important; } .nav-cta { background:var(--orange); color:#fff; padding:10px 24px; font-size:12px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; display:inline-block; transition:all 0.3s; border-radius:2px; } .nav-cta:hover { background:var(--orange2); } .nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; } .nav-hamburger span { display:block; width:24px; height:2px; background:var(--dark); transition:all 0.3s; } /* Mobile menu */ .mobile-menu { display:none; position:fixed; inset:0; background:rgba(255,255,255,0.98); z-index:99; flex-direction:column; align-items:center; justify-content:center; gap:28px; } .mobile-menu.open { display:flex; } .mobile-menu a { font-family:var(--font-disp); font-size:28px; color:var(--dark); text-decoration:none; font-style:italic; transition:color 0.3s; } .mobile-menu a:hover { color:var(--orange); } .mmclose { position:absolute; top:24px; right:24px; font-size:28px; color:var(--muted); cursor:pointer; } .mob-cta { font-family:var(--font-body) !important; font-style:normal !important; background:var(--orange); color:#fff !important; padding:14px 36px; font-size:13px !important; letter-spacing:2px; text-transform:uppercase; border-radius:2px; } /* ── NAV LOGO · ROLL ANIMATION ───────── */ /* .nl = dark letters (ROLLING) · .nl-accent = orange letters (FIZZ) --i (inline custom property, 1–11) drives the per-letter stagger. */ .nl { display:inline-block; /* Roll-in once on page load; fill:both keeps initial state during delay */ animation:letterRoll 0.7s both; animation-delay:calc(var(--i) * 0.07s); /* Hover-out: snap back together instantly — no stagger on the way down */ transition:translate 0.22s ease, border-bottom-color 0.22s ease; /* Ice border — transparent until hover */ border-bottom:1.5px solid transparent; padding-bottom:1px; } /* Hover-in: wave ripples left → right; letters lift + icy frost line forms */ .nav-logo:hover .nl { translate:0 -4px; border-bottom-color:rgba(212,160,0,0.75); /* Override transition to add per-letter stagger delay on hover-in only */ transition:translate 0.28s ease calc(var(--i) * 0.04s), border-bottom-color 0.28s ease calc(var(--i) * 0.04s); } /* Roll-in keyframes 0% → above, fully spun (-210°), tiny, invisible 58% → overshoots below resting line, slight forward tilt (lands) 74% → bounces back above, slight reverse tilt (first bounce) 87% → micro overshoot below again (settle) 100%→ upright, at rest */ @keyframes letterRoll { 0% { transform:translateY(-48px) rotate(-210deg) scale(0.25); opacity:0; } 58% { transform:translateY(6px) rotate(12deg) scale(1.1); opacity:1; } 74% { transform:translateY(-4px) rotate(-5deg) scale(0.96); } 87% { transform:translateY(2px) rotate(2.5deg) scale(1.02); } 100% { transform:translateY(0) rotate(0deg) scale(1); opacity:1; } } /* ── HERO ────────────────────────────── */ .hero { min-height:100svh; display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; padding:100px 60px 60px; gap:60px; position:relative; background:var(--white); } .hero-blob1 { position:absolute; top:-120px; right:-80px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(232,216,50,0.18) 0%, transparent 70%); pointer-events:none; } .hero-blob2 { position:absolute; bottom:-100px; left:-60px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(240,120,32,0.12) 0%, transparent 70%); pointer-events:none; } .hero-blob3 { position:absolute; top:40%; right:30%; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(168,224,240,0.2) 0%, transparent 70%); pointer-events:none; } .bubble { position:absolute; border-radius:50%; pointer-events:none; animation:floatUp linear infinite; opacity:0; } @keyframes floatUp { 0% { transform:translateY(0) scale(1); opacity:0; } 10% { opacity:0.6; } 90% { opacity:0.3; } 100% { transform:translateY(-100px) scale(0.8); opacity:0; } } .hero-content { position:relative; z-index:2; } .hero-label { display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:24px; opacity:0; animation:fadeUp 0.8s 0.2s forwards; } .hero-label::before { content:''; width:24px; height:2px; background:var(--orange); flex-shrink:0; } .hero-title { font-family:var(--font-disp); font-size:clamp(48px,6.5vw,88px); font-weight:800; line-height:1.0; color:var(--dark); /* No opacity:0 — h1 must be immediately visible for mobile LCP detection */ } .hero-title em { font-style:italic; color:var(--orange); display:block; } .hero-tagline { margin-top:20px; display:inline-flex; align-items:center; gap:10px; opacity:0; animation:fadeUp 0.8s 0.55s forwards; } .tagline-bubble { display:inline-block; padding:6px 16px; border-radius:999px; font-size:12px; letter-spacing:1px; font-weight:700; text-transform:uppercase; } .tb-lemon { background:var(--lemon); color:var(--dark); } .tb-orange { background:var(--orange); color:#fff; } .tb-soda { background:var(--soda); color:var(--dark); } .hero-sub { font-size:15px; color:var(--muted); line-height:1.8; margin-top:24px; max-width:420px; opacity:0; animation:fadeUp 0.8s 0.65s forwards; } .hero-actions { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; opacity:0; animation:fadeUp 0.8s 0.8s forwards; } .btn-primary { background:var(--orange); color:#fff; padding:15px 32px; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; border:none; text-decoration:none; display:inline-block; transition:all 0.3s; border-radius:2px; } .btn-primary:hover { background:var(--orange2); transform:translateY(-1px); } .btn-outline { background:transparent; color:var(--dark); padding:15px 32px; font-family:var(--font-body); font-size:12px; letter-spacing:2px; text-transform:uppercase; border:2px solid var(--border2); text-decoration:none; display:inline-block; transition:all 0.3s; border-radius:2px; } .btn-outline:hover { border-color:var(--orange); color:var(--orange); } .hero-image-panel { position:relative; z-index:2; /* No opacity:0 — image panel must paint immediately for mobile LCP */ display:flex; align-items:center; justify-content:center; } /* Hero stat pills — currently unused; kept for reference */ .hero-pill { position:absolute; background:rgba(255,255,255,0.97); border:1px solid var(--border); border-left:3px solid var(--orange); padding:12px 18px; box-shadow:0 6px 24px rgba(0,0,0,0.14); border-radius:2px; z-index:3; } .hero-pill:nth-child(2) { top:32px; right:-28px; border-left-color:var(--lemon); } .hero-pill:nth-child(3) { top:50%; left:-28px; transform:translateY(-50%); border-left-color:var(--soda); } .hero-pill:nth-child(4) { bottom:80px; right:-28px; border-left-color:var(--green); } .pill-num { font-family:var(--font-num); font-size:28px; color:var(--dark); line-height:1; } .pill-label { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:2px; } .scroll-hint { position:absolute; bottom:32px; left:60px; display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); opacity:0; animation:fadeIn 1s 1.4s forwards; } .scroll-line { width:32px; height:1px; background:var(--border2); position:relative; overflow:hidden; } .scroll-line::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--orange); animation:scrollPulse 2s infinite; } /* ── HERO FIZZ ENHANCEMENTS ──────────── */ .hero-liquid-sheen { position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 70% 50% at 75% 60%, rgba(168,224,240,0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 80% 20%, rgba(232,216,50,0.08) 0%, transparent 50%), radial-gradient(ellipse 40% 60% at 60% 80%, rgba(240,120,32,0.07) 0%, transparent 50%); animation:liquidSheen 8s ease-in-out infinite alternate; } @keyframes liquidSheen { 0% { opacity:0.6; transform:scale(1); } 100% { opacity:1; transform:scale(1.04); } } .hero-fizz-orbit { position:relative; display:flex; align-items:center; justify-content:center; } .fizz-ring { position:absolute; border-radius:50%; border:1.5px solid transparent; pointer-events:none; animation:fizzRingExpand 3.6s ease-out infinite; } .fr1 { width:280px; height:280px; border-color:rgba(240,120,32,0.35); animation-delay:0s; } .fr2 { width:380px; height:380px; border-color:rgba(232,216,50,0.25); animation-delay:1.2s; } .fr3 { width:480px; height:480px; border-color:rgba(168,224,240,0.2); animation-delay:2.4s; } @keyframes fizzRingExpand { 0% { transform:scale(0.65); opacity:0.9; } 100% { transform:scale(1.15); opacity:0; } } /* Orbiting fizz dots */ .fizz-dot { position:absolute; border-radius:50%; pointer-events:none; animation:fizzDotBob ease-in-out infinite; } .fd1 { width:12px; height:12px; background:var(--lemon); top:-24px; left:50%; animation-duration:2.8s; animation-delay:0s; } .fd2 { width:8px; height:8px; background:var(--orange); top:20%; right:-20px; animation-duration:3.2s; animation-delay:0.6s; } .fd3 { width:10px; height:10px; background:var(--soda); bottom:-18px; left:35%; animation-duration:2.5s; animation-delay:1.1s; } .fd4 { width:7px; height:7px; background:var(--green); bottom:25%; left:-16px; animation-duration:3.8s; animation-delay:0.3s; } .fd5 { width:9px; height:9px; background:var(--lemon); top:35%; right:-24px; animation-duration:2.9s; animation-delay:1.8s; } .fd6 { width:6px; height:6px; background:var(--orange); top:70%; left:10%; animation-duration:3.4s; animation-delay:0.9s; } @keyframes fizzDotBob { 0%,100% { transform:translateY(0) scale(1); opacity:0.85; } 50% { transform:translateY(-14px) scale(1.25); opacity:1; } } /* ── HERO FRAME BORDER — running light chaser ── */ .hero-frame-border { position:relative; border-radius:22px; padding:2px; overflow:hidden; /* clips the chaser perfectly to rounded corners */ animation:heroFloat 5s ease-in-out infinite; } /* The rotating comet — conic-gradient spins behind the frame */ .hero-frame-border::before { content:''; position:absolute; width:200%; height:200%; top:-50%; left:-50%; background:conic-gradient( from 0deg at 50% 50%, transparent 0deg, transparent 320deg, rgba(27,107,60,0.5) 338deg, rgba(212,160,0,0.95) 350deg, rgba(255,255,255,1) 356deg, transparent 360deg ); animation:frameChaser 2.5s linear infinite; z-index:0; } @keyframes frameChaser { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } @keyframes heroFloat { 0%,100% { transform:translateY(0px) rotate(-0.5deg); } 50% { transform:translateY(-18px) rotate(0.5deg); } } /* Updated hero machine frame — sits inside .hero-frame-border */ .hero-machine-frame { position:relative; z-index:1; background:linear-gradient(160deg, #fffdf5 0%, #fffaf0 100%); border-radius:20px; overflow:hidden; box-shadow:0 32px 100px rgba(30,122,42,0.15), 0 4px 24px rgba(0,0,0,0.08); } /* old ::before top bar removed — replaced by chaser */ .hero-machine-frame::before { display:none; } .hero-machine-frame img { width:100%; height:500px; object-fit:contain; object-position:center; padding:20px; display:block; position:relative; z-index:1; filter:drop-shadow(0 24px 48px rgba(240,120,32,0.3)) drop-shadow(0 8px 16px rgba(0,0,0,0.15)); } /* Glow pulse behind the image */ .hero-img-glow { position:absolute; inset:-20px; border-radius:24px; pointer-events:none; z-index:0; background:radial-gradient(ellipse at center, rgba(240,120,32,0.12) 0%, transparent 70%); animation:imgGlowPulse 3s ease-in-out infinite; } @keyframes imgGlowPulse { 0%,100% { opacity:0.6; transform:scale(0.95); } 50% { opacity:1; transform:scale(1.05); } } /* Carbonation rising bubbles inside the frame */ .hero-carbonation { position:absolute; bottom:10px; left:0; right:0; height:80%; pointer-events:none; z-index:2; overflow:hidden; border-radius:0 0 18px 18px; } .carb-dot { position:absolute; border-radius:50%; animation:carbRise linear infinite; opacity:0; } .cd1 { width:4px; height:4px; background:rgba(232,216,50,0.7); left:20%; animation-duration:3.2s; animation-delay:0s; bottom:0; } .cd2 { width:3px; height:3px; background:rgba(168,224,240,0.8); left:40%; animation-duration:2.8s; animation-delay:0.7s; bottom:0; } .cd3 { width:5px; height:5px; background:rgba(240,120,32,0.6); left:60%; animation-duration:3.6s; animation-delay:1.4s; bottom:0; } .cd4 { width:3px; height:3px; background:rgba(112,200,80,0.7); left:80%; animation-duration:2.5s; animation-delay:2.1s; bottom:0; } .cd5 { width:4px; height:4px; background:rgba(232,216,50,0.6); left:30%; animation-duration:4s; animation-delay:0.4s; bottom:0; } .cd6 { width:3px; height:3px; background:rgba(168,224,240,0.7); left:55%; animation-duration:3s; animation-delay:1.8s; bottom:0; } .cd7 { width:5px; height:5px; background:rgba(240,120,32,0.5); left:70%; animation-duration:2.7s; animation-delay:2.6s; bottom:0; } .cd8 { width:3px; height:3px; background:rgba(232,216,50,0.8); left:15%; animation-duration:3.8s; animation-delay:3.2s; bottom:0; } @keyframes carbRise { 0% { transform:translateY(0) scale(1); opacity:0; } 10% { opacity:0.9; } 85% { opacity:0.5; } 100% { transform:translateY(-200px) scale(0.6); opacity:0; } } /* ── HERO ICY ENHANCEMENTS ───────────── */ /* Icy atmospheric glow — cool soda-blue radials on image side */ .hero-ice-bg { position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 55% 45% at 72% 55%, rgba(168,224,240,0.12) 0%, transparent 60%), radial-gradient(ellipse 35% 50% at 86% 18%, rgba(200,238,248,0.09) 0%, transparent 55%), radial-gradient(ellipse 40% 35% at 65% 88%, rgba(224,246,252,0.14) 0%, transparent 60%); animation:iceAtmosphere 10s ease-in-out infinite alternate; } @keyframes iceAtmosphere { 0% { opacity:0.5; } 100% { opacity:1; } } /* Glassy icy rising bubbles — transparent with soda-blue border */ .bubble-icy { position:absolute; border-radius:50%; pointer-events:none; animation:iceFloat linear infinite; opacity:0; background:radial-gradient(circle at 35% 32%, rgba(255,255,255,0.55) 0%, rgba(200,238,248,0.1) 45%, transparent 70%); border:1.5px solid rgba(168,224,240,0.65); box-shadow:inset 0 0 7px rgba(255,255,255,0.3), 0 0 10px rgba(168,224,240,0.25); } @keyframes iceFloat { 0% { transform:translateY(0) scale(1); opacity:0; } 10% { opacity:0.75; } 85% { opacity:0.35; } 100% { transform:translateY(-140px) scale(0.65); opacity:0; } } /* Cold mist — dry-ice fog rising from base of machine */ .hero-cold-mist { position:absolute; bottom:-18px; left:-35px; right:-35px; height:120px; pointer-events:none; z-index:1; background:radial-gradient(ellipse 88% 70% at 50% 100%, rgba(168,224,240,0.28) 0%, rgba(200,238,248,0.12) 45%, transparent 70%); filter:blur(12px); animation:mistPulse 5s ease-in-out infinite alternate; } @keyframes mistPulse { 0% { opacity:0.45; transform:scaleX(0.88) scaleY(0.78); } 100% { opacity:1; transform:scaleX(1.1) scaleY(1.38); } } /* Frost shimmer — diagonal ice-light sweep across the machine frame */ .hero-frost-shine { position:absolute; inset:0; border-radius:20px; overflow:hidden; pointer-events:none; z-index:4; } .hero-frost-shine::after { content:''; position:absolute; top:-100%; left:-80%; width:45%; height:350%; background:linear-gradient( 105deg, transparent 0%, rgba(200,238,248,0) 35%, rgba(200,238,248,0.2) 50%, rgba(255,255,255,0.12) 55%, transparent 70% ); animation:frostSweep 6.5s ease-in-out infinite; animation-delay:1.5s; } @keyframes frostSweep { 0% { transform:translateX(-60%) skewX(-15deg); opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { transform:translateX(370%) skewX(-15deg); opacity:0; } } /* Condensation / dew drips sliding down the frame */ .hero-dew-wrap { position:absolute; inset:0; border-radius:20px; overflow:hidden; pointer-events:none; z-index:4; } .dew-drop { position:absolute; width:2.5px; border-radius:0 0 50% 50%; background:linear-gradient(to bottom, rgba(200,238,248,0.85), rgba(168,224,240,0.1)); animation:dewSlide linear infinite; opacity:0; } @keyframes dewSlide { 0% { transform:translateY(-5px) scaleY(0); opacity:0; } 8% { opacity:0.85; transform:scaleY(1); } 78% { opacity:0.5; } 100% { transform:translateY(190px) scaleY(0.4); opacity:0; } } .dd1 { height:14px; left:11%; top:6%; animation-duration:4.2s; animation-delay:0.8s; } .dd2 { height:10px; left:28%; top:4%; animation-duration:5.5s; animation-delay:2.2s; } .dd3 { height:18px; left:48%; top:8%; animation-duration:3.8s; animation-delay:0.3s; } .dd4 { height:12px; left:67%; top:5%; animation-duration:5.1s; animation-delay:3.5s; } .dd5 { height:8px; left:84%; top:3%; animation-duration:4.6s; animation-delay:1.6s; } /* Ice crystal floaters — octagonal shapes drifting + rotating */ .ice-crystal { position:absolute; pointer-events:none; clip-path:polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%); animation:iceCrystalFloat ease-in-out infinite; } @keyframes iceCrystalFloat { 0% { opacity:0; transform:translateY(10px) rotate(0deg) scale(0.7); } 20% { opacity:0.8; } 80% { opacity:0.4; } 100% { opacity:0; transform:translateY(-58px) rotate(65deg) scale(1.1); } } .ic1 { width:12px; height:12px; background:rgba(168,224,240,0.65); top:10%; left:-40px; animation-duration:5.2s; animation-delay:0s; } .ic2 { width:8px; height:8px; background:rgba(224,246,252,0.75); top:30%; right:-32px; animation-duration:4s; animation-delay:1.4s; } .ic3 { width:15px; height:15px; background:rgba(200,238,248,0.55); top:60%; left:-28px; animation-duration:5.8s; animation-delay:0.7s; } .ic4 { width:7px; height:7px; background:rgba(255,255,255,0.82); top:16%; right:-22px; animation-duration:3.8s; animation-delay:2.5s; } .ic5 { width:10px; height:10px; background:rgba(168,224,240,0.7); top:76%; right:-30px; animation-duration:4.6s; animation-delay:1.1s; } .ic6 { width:9px; height:9px; background:rgba(224,246,252,0.65); top:44%; left:-32px; animation-duration:4.3s; animation-delay:3.2s; } /* Ice sparkles — cross-star glints catching light */ .ice-sparkle { position:absolute; pointer-events:none; animation:sparklePulse ease-in-out infinite; } .ice-sparkle::before, .ice-sparkle::after { content:''; position:absolute; border-radius:999px; background:rgba(210,244,255,0.95); top:50%; left:50%; } .ice-sparkle::before { width:2px; height:100%; transform:translate(-50%,-50%); } .ice-sparkle::after { width:100%; height:2px; transform:translate(-50%,-50%); } @keyframes sparklePulse { 0%,100% { opacity:0; transform:scale(0.2) rotate(0deg); } 30%,70% { opacity:1; transform:scale(1) rotate(45deg); } } .is1 { width:10px; height:10px; top:6%; left:16%; animation-duration:2.8s; animation-delay:0.2s; } .is2 { width:14px; height:14px; top:20%; left:83%; animation-duration:3.5s; animation-delay:1.1s; } .is3 { width:8px; height:8px; top:56%; left:7%; animation-duration:2.4s; animation-delay:2.1s; } .is4 { width:16px; height:16px; top:38%; left:91%; animation-duration:4.1s; animation-delay:0.6s; } .is5 { width:9px; height:9px; top:80%; left:24%; animation-duration:3.2s; animation-delay:1.8s; } .is6 { width:12px; height:12px; top:14%; left:70%; animation-duration:2.7s; animation-delay:3.3s; } .is7 { width:7px; height:7px; top:70%; left:80%; animation-duration:3.8s; animation-delay:0.9s; } .is8 { width:11px; height:11px; top:44%; left:44%; animation-duration:2.6s; animation-delay:2.7s; } /* ── TICKER ──────────────────────────── */ .ticker { background:var(--dark); padding:12px 0; overflow:hidden; white-space:nowrap; } .ticker-inner { display:inline-flex; animation:ticker 30s linear infinite; } .ticker-item { font-family:var(--font-num); font-size:14px; letter-spacing:4px; color:rgba(255,255,255,0.5); padding:0 32px; } .ticker-item span { color:var(--orange); } /* ── STAT BAR ────────────────────────── */ .stat-bar { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-bottom:2px solid var(--border); background:var(--white); } /* Controlled by CSS only — no JS toggle, no inline style */ .mobile-stats { display:none; } .sbi { padding:44px 28px; border-right:1px solid var(--border); text-align:center; position:relative; overflow:hidden; } .sbi:last-child { border-right:none; } .sbi::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); } .sbi:nth-child(1)::after { background:var(--lemon); } .sbi:nth-child(2)::after { background:var(--orange); } .sbi:nth-child(3)::after { background:var(--soda); } .sbi:nth-child(4)::after { background:var(--green); } .sbi:hover::after { transform:scaleX(1); } .sbi-num { font-family:var(--font-num); font-size:52px; font-weight:800; color:var(--dark); letter-spacing:-1px; line-height:1; } .sbi-unit { font-family:var(--font-num); font-size:22px; font-weight:600; color:var(--muted); opacity:0.6; } .sbi-desc { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:8px; } /* ── SECTIONS ────────────────────────── */ section { padding:96px 60px; } .section-label { display:inline-flex; align-items:center; gap:10px; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:14px; } .section-label::before { content:''; width:20px; height:2px; background:var(--orange); flex-shrink:0; } .section-title { font-family:var(--font-disp); font-size:clamp(28px,3.8vw,48px); font-weight:700; color:var(--dark); line-height:1.15; margin-bottom:14px; } .section-title em { color:var(--orange); font-style:italic; } /* ── FEATURES ────────────────────────── */ #features { background:var(--white); } #features .section-label, #features .section-title { text-align:center; } .features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; } .feat-card { border:2px solid var(--border); padding:36px; border-radius:4px; transition:all 0.3s; position:relative; overflow:hidden; background:var(--white); } .feat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); } .feat-card:nth-child(1)::before { background:var(--lemon); } .feat-card:nth-child(2)::before { background:var(--orange); } .feat-card:nth-child(3)::before { background:var(--soda); } .feat-card:nth-child(4)::before { background:var(--green); } .feat-card:hover { border-color:var(--border2); box-shadow:0 8px 40px rgba(0,0,0,0.06); } .feat-card:hover::before { transform:scaleX(1); } .feat-icon { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px; } .fi-lemon { background:rgba(232,216,50,0.15); } .fi-orange { background:rgba(240,120,32,0.12); } .fi-soda { background:rgba(168,224,240,0.2); } .fi-green { background:rgba(112,200,80,0.15); } .feat-title { font-family:var(--font-disp); font-size:19px; color:var(--dark); font-weight:700; margin-bottom:8px; } .feat-desc { font-size:14px; color:var(--muted); line-height:1.75; } .feat-tag { display:inline-block; margin-top:12px; font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:999px; font-weight:700; } .ft-lemon { background:rgba(232,216,50,0.2); color:#7a7000; } .ft-orange { background:rgba(240,120,32,0.15); color:#c05000; } .ft-soda { background:rgba(168,224,240,0.25); color:#006080; } .ft-green { background:rgba(112,200,80,0.15); color:#306820; } /* ── HOW IT WORKS ────────────────────── */ /* Explicit padding here overrides the global section rule */ .how-section { background:var(--dark); padding:96px 60px; text-align:center; position:relative; overflow:hidden; } .how-section::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 50% 60% at 10% 50%, rgba(27,107,60,.08) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 90% 50%, rgba(212,160,0,.06) 0%, transparent 60%); pointer-events:none; } .how-section .section-label { color:var(--clr-gold); justify-content:center; display:flex; } .how-section .section-label::before { background:var(--clr-gold); } .how-section .section-title { color:#fff; text-align:center; } .how-section .section-title em { color:var(--clr-gold); } /* ── 4-step grid ── */ .how-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; position:relative; z-index:2; align-items:start; } /* connector line */ .how-steps::before { content:''; position:absolute; top:106px; left:calc(12.5% + 16px); right:calc(12.5% + 16px); height:1px; background:linear-gradient(to right, transparent, var(--clr-gold), var(--clr-gold), transparent); opacity:0.22; } /* GIF frame */ .how-gif-wrap { width:100%; aspect-ratio:3/3.5; border-radius:14px; overflow:hidden; background:#081810; border:1px solid rgba(212,160,0,.18); box-shadow:0 12px 40px rgba(0,0,0,.5); margin-bottom:20px; } .how-gif-wrap img { width:100%; height:100%; object-fit:cover; display:block; } .how-step { padding:0 4px; display:flex; flex-direction:column; align-items:center; } .how-step:last-child { border-right:none; } /* Number badge */ .step-circle { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-num); font-size:16px; font-weight:800; margin:0 auto 16px; position:relative; background:rgba(212,160,0,.12); border:1.5px solid rgba(212,160,0,.45); color:var(--clr-gold); } .step-title { font-family:var(--font-disp); font-size:17px; color:#fff; font-weight:700; margin-bottom:8px; } .step-desc { font-size:13px; color:rgba(255,255,255,0.42); line-height:1.75; } /* ── MODELS ──────────────────────────── */ #models { background:var(--off); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .models-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:48px; } .model-card { background:var(--white); border:2px solid var(--border); border-radius:4px; overflow:hidden; transition:all 0.3s; } .model-card:hover { border-color:var(--orange); box-shadow:0 8px 32px rgba(240,120,32,0.1); transform:translateY(-3px); } .model-img { width:100%; height:180px; object-fit:cover; object-position:center; display:block; filter:saturate(0.7); transition:filter 0.4s; } .model-card:hover .model-img { filter:saturate(1); } .model-body { padding:18px; } .model-name { font-family:var(--font-num); font-size:20px; letter-spacing:3px; color:var(--dark); margin-bottom:6px; } .model-desc { font-size:12px; color:var(--muted); line-height:1.65; } .model-tag { display:inline-block; margin-top:10px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 10px; border-radius:999px; font-weight:700; } .mt1 { background:rgba(232,216,50,0.2); color:#6a6000; } .mt2 { background:rgba(240,120,32,0.15); color:#a04000; } .mt3 { background:rgba(168,224,240,0.25); color:#005870; } .mt4 { background:rgba(112,200,80,0.15); color:#286018; } /* ── FRANCHISE ───────────────────────── */ /* padding:0 overrides the global section { padding:96px 60px } rule */ .franchise { background:var(--white); border-bottom:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; padding:0; } .franchise-left { padding:96px 72px; border-right:1px solid var(--border); background:linear-gradient(135deg, rgba(240,120,32,0.04) 0%, rgba(232,216,50,0.03) 100%); align-self:center; } .franchise-right { padding:96px 72px; } .franchise-pts { list-style:none; margin:28px 0; } .fp { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); } .fp:first-child { border-top:1px solid var(--border); } .fp-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:6px; } .fp-dot.d1 { background:var(--lemon); } .fp-dot.d2 { background:var(--orange); } .fp-dot.d3 { background:var(--soda); } .fp-dot.d4 { background:var(--green); } .fp-title { font-size:14px; font-weight:700; color:var(--dark); margin-bottom:3px; } .fp-desc { font-size:13px; color:var(--muted); line-height:1.65; } /* Enquiry form */ .eq-box { background:var(--off); border:2px solid var(--border); padding:32px; border-radius:4px; margin-bottom:16px; border-top:3px solid var(--orange); } .eq-title { font-family:var(--font-disp); font-size:21px; color:var(--dark); font-weight:700; margin-bottom:10px; } .eq-desc { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:20px; } .eq-input { width:100%; background:#fff; border:1.5px solid var(--border); color:var(--text); padding:12px 16px; font-family:var(--font-body); font-size:14px; margin-bottom:10px; outline:none; transition:border-color 0.3s; border-radius:2px; appearance:none; } .eq-input:focus { border-color:var(--orange); } .eq-input::placeholder { color:var(--muted); } .demo-box { padding:20px; border:1.5px solid var(--border); background:rgba(168,224,240,0.08); border-radius:4px; border-left:3px solid var(--soda); } .demo-label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#008080; margin-bottom:6px; font-weight:700; } .demo-text { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:12px; } .demo-link { color:var(--orange); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:6px; font-weight:700; transition:gap 0.3s; } .demo-link:hover { gap:10px; } /* ── BLOG ────────────────────────────── */ #blog { background:var(--off); border-top:1px solid var(--border); } .blog-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin-top:48px; } .blog-card { background:var(--white); border:1.5px solid var(--border); border-radius:4px; overflow:hidden; transition:all 0.3s; } .blog-card:hover { box-shadow:0 8px 32px rgba(0,0,0,0.07); transform:translateY(-2px); border-color:var(--border2); } .blog-img-wrap { position:relative; overflow:hidden; } .blog-img { width:100%; height:200px; object-fit:cover; display:block; filter:saturate(0.7); transition:transform 0.5s, filter 0.4s; } .blog-card:hover .blog-img { transform:scale(1.03); filter:saturate(1); } .blog-card.featured .blog-img { height:260px; } .blog-img-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(26,26,20,0.5), transparent); pointer-events:none; } .blog-body { padding:22px; } .blog-tag { font-size:10px; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; display:inline-block; padding:3px 10px; border-radius:999px; font-weight:700; } .bt1 { background:rgba(240,120,32,0.12); color:var(--orange); } .bt2 { background:rgba(232,216,50,0.2); color:#6a6000; } .bt3 { background:rgba(168,224,240,0.25); color:#006080; } .blog-title { font-family:var(--font-disp); font-size:17px; color:var(--dark); line-height:1.45; font-weight:700; margin-bottom:8px; } .blog-card.featured .blog-title { font-size:21px; } .blog-excerpt { font-size:13px; color:var(--muted); line-height:1.7; } .blog-read { display:inline-flex; align-items:center; gap:6px; color:var(--orange); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; margin-top:14px; font-weight:700; transition:gap 0.3s; } .blog-read:hover { gap:10px; } /* ── FINAL CTA ───────────────────────── */ .final-cta { background:var(--dark); padding:120px 60px; text-align:center; position:relative; overflow:hidden; } .final-cta::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(232,216,50,0.06) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 70% 50%, rgba(240,120,32,0.08) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 20%, rgba(168,224,240,0.05) 0%, transparent 50%); pointer-events:none; } .cta-decor { position:absolute; font-size:200px; opacity:0.03; pointer-events:none; line-height:1; user-select:none; } .cta-decor.left { left:-40px; top:50%; transform:translateY(-50%); } .cta-decor.right { right:-40px; top:50%; transform:translateY(-50%); } /* CTA rolling glass — hidden until .in-view is added by IntersectionObserver */ .cta-glass-wrap { position:absolute; right:9%; top:50%; transform:translateY(-50%); pointer-events:none; z-index:1; } /* float: only runs after roll-in lands (2.1s delay) */ .cta-glass-wrap.in-view .cta-glass-float { animation:ctaGlassFloat 5s 2.1s ease-in-out infinite; } /* glass: invisible by default; roll-in fires when .in-view is added */ .cta-glass { height:220px; width:auto; display:block; opacity:0; filter:drop-shadow(0 8px 40px rgba(212,160,0,0.55)) drop-shadow(0 0 24px rgba(30,122,42,0.45)); } .cta-glass-wrap.in-view .cta-glass { animation:ctaGlassRoll 1.8s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; } @keyframes ctaGlassRoll { 0% { opacity:0; transform:translateX(-280px) rotate(0deg) scale(0.85); } 6% { opacity:0.9; } 74% { opacity:0.9; transform:translateX(14px) rotate(730deg) scale(1.05); } 87% { transform:translateX(-5px) rotate(714deg) scale(0.97); } 94% { transform:translateX(3px) rotate(722deg) scale(1.01); } 100% { opacity:0.85; transform:translateX(0) rotate(720deg) scale(1); } } @keyframes ctaGlassFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } } .final-cta-inner { position:relative; z-index:2; } .final-cta-title { font-family:var(--font-disp); font-size:clamp(36px,5.5vw,68px); color:#fff; font-weight:900; line-height:1; margin-bottom:8px; } .final-cta-title em { color:var(--orange); font-style:italic; } .final-cta-sub { font-size:15px; color:rgba(255,255,255,0.45); margin-bottom:40px; } .final-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .btn-primary-inv { background:#fff; color:var(--dark); padding:15px 32px; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none; display:inline-block; transition:all 0.3s; border-radius:2px; } .btn-primary-inv:hover { background:var(--lemon); } .btn-orange { background:var(--orange); color:#fff; padding:15px 32px; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none; display:inline-block; transition:all 0.3s; border-radius:2px; } .btn-orange:hover { background:var(--orange2); } /* ── FOOTER ──────────────────────────── */ /* padding-bottom:0 — .footer-bottom handles its own bottom via grid-column + negative margin */ footer { background:var(--white); border-top:1px solid var(--border); padding:60px 60px 0; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; } .footer-brand { font-family:var(--font-num); font-size:28px; letter-spacing:6px; color:var(--clr-forest); margin-bottom:10px; } .footer-brand span { color:var(--clr-gold); } .footer-tagline { font-size:12px; color:var(--muted); letter-spacing:1px; margin-bottom:16px; } .footer-legal { font-size:11px; color:var(--border2); line-height:1.7; margin-bottom:20px; } /* footer animated logo — reuses .nav-logo + .nl + .nav-glass from nav */ .footer-logo-wrap { display:inline-flex; align-items:center; font-size:24px; letter-spacing:5px; margin-bottom:10px; text-decoration:none; } /* Letters + glass: invisible until scroll triggers them (JS adds .rfz-logo-go) */ .footer-logo-wrap .nl { opacity:0; animation:none; } .footer-logo-wrap .nav-glass { opacity:0; animation:none; } /* Triggered — same animations as the top nav logo */ .footer-logo-wrap.rfz-logo-go .nl { animation:letterRoll 0.7s both; animation-delay:calc(var(--i)*0.07s); } .footer-logo-wrap.rfz-logo-go .nav-glass { animation:glassRollIn 1.8s cubic-bezier(0.22,1,0.36,1) forwards; } /* social icons row */ .footer-social { display:flex; gap:10px; margin-top:4px; } .footer-social a { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:transparent; display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; transition:background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s; } .footer-social a:hover { background:var(--clr-forest); border-color:var(--clr-forest); color:#fff; transform:translateY(-2px); } .footer-social svg { width:15px; height:15px; } .footer-col-title { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--orange); margin-bottom:14px; font-weight:700; } .footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; } .footer-links a { font-size:13px; color:var(--muted); text-decoration:none; transition:color 0.3s; } .footer-links a:hover { color:var(--dark); } /* Lives inside