/* Glass Box Systems — homepage scroll/hero effects Pure CSS3 keyframe animations (compositor-thread friendly: transform/opacity only, nothing that forces layout/paint on scroll). No background-attachment: fixed anywhere — that's the technique that behaves badly on mobile Safari. */ .gb-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 3em; padding: 3em 1.5em; max-width: 1200px; margin: 0 auto; overflow: hidden; } .gb-hero-text { flex: 1 1 320px; min-width: 280px; } .gb-hero-text h1 { font-size: 2.75rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.4em; } /* --- rotating tagline, pure CSS, no JS --- */ .gb-caption { position: relative; display: inline-block; height: 1.4em; min-width: 1px; vertical-align: bottom; } .gb-caption span { position: absolute; left: 0; top: 10px; white-space: nowrap; opacity: 0; transform: translateY(0.3em); animation: gb-caption-cycle 9s infinite; color: var(--ast-global-color-0, #046bd2); font-weight: 700; } .gb-caption span:nth-child(1) { animation-delay: 0s; } .gb-caption span:nth-child(2) { animation-delay: 3s; } .gb-caption span:nth-child(3) { animation-delay: 6s; } @keyframes gb-caption-cycle { 0% { opacity: 0; transform: translateY(0.3em); } 5% { opacity: 1; transform: translateY(0); } 28% { opacity: 1; transform: translateY(0); } 33% { opacity: 0; transform: translateY(-0.3em); } 100% { opacity: 0; } } .gb-hero-sub { font-size: 1.15rem; color: var(--ast-global-color-3, #334155); max-width: 34em; } /* --- hero image: one-time slide-in from off-screen right, settles and stays put (no continuous/looping animation afterward) --- */ .gb-hero-media { flex: 1 1 280px; min-width: 240px; max-width: 380px; margin: 0 auto; overflow: hidden; border-radius: 12px; animation: gb-slide-in-right 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; } .gb-hero-media img { display: block; width: 100%; height: auto; } @keyframes gb-slide-in-right { 0% { transform: translateX(120vw); } 100% { transform: translateX(0); } } /* --- scroll-reveal sections --- Hidden-by-default state only applies when html.js is present (set by a tiny inline script in ). If JS fails to load for any reason, content is just plain visible — never permanently hidden. */ html.js .gb-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform; } .gb-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger children of a revealed group one at a time */ .gb-reveal.is-visible > * { transition-delay: calc(var(--gb-i, 0) * 0.12s); } /* --- accessibility: respect reduced-motion --- */ @media (prefers-reduced-motion: reduce) { .gb-hero-media { animation: none; } .gb-caption span { animation: none; position: static; opacity: 1; display: none; } .gb-caption span:first-child { display: inline; } .gb-reveal { opacity: 1; transform: none; transition: none; } } @media (max-width: 600px) { .gb-hero { padding: 2em 1.2em; gap: 2em; } .gb-hero-text h1 { font-size: 2rem; } } /* --- "Live for:" uptime badge (About page) --- */ .gb-uptime-badge { float: right; margin: 0 0 1.5em 2em; padding: 1.2em 1.5em; border: 1px solid var(--ast-global-color-7, #d1d5db); border-radius: 10px; background: var(--ast-global-color-5, #f0f5fa); text-align: center; min-width: 220px; } .gb-uptime-label { display: flex; align-items: center; justify-content: center; gap: 0.5em; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ast-global-color-3, #334155); margin-bottom: 0.5em; } .gb-uptime-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: gb-pulse 1.6s ease-in-out infinite; flex: none; } @keyframes gb-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(34,197,94,0); } } .gb-uptime-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; color: var(--ast-global-color-2, #1e293b); } @media (prefers-reduced-motion: reduce) { .gb-uptime-dot { animation: none; } } @media (max-width: 600px) { .gb-uptime-badge { float: none; margin: 0 0 1.5em 0; width: 100%; } } /* --- full-bleed particle section (breaks out of the theme's boxed content width to span the full viewport) --- */ .gb-particle-section { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: 42vh; min-height: 280px; max-height: 460px; overflow: hidden; background-image: url('https://scottizen.com/wp-content/uploads/2026/09/leo_visions-hWX2pboBPBk-unsplash-2048x1344.jpg'); background-size: cover; background-position: center; } .gb-particle-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,18,0.25), rgba(8,8,18,0.55)); } .gb-particles { position: absolute; inset: 0; overflow: hidden; } /* Two layers per particle, same idea as Slider Revolution's demo: - .gb-particle (outer): drifts up across the section, fades in/out at the very top/bottom so nothing pops abruptly at the edges of our (short, bounded) banner — the original's full-screen version doesn't need this since edges are off-screen, ours does. - .gb-particle-dot (inner): pulses size + opacity independently via its own faster loop, exactly like the reference's .circle — this is what gives the "growing and shrinking" look, layered on top of the drift instead of replacing it. */ .gb-particle { position: absolute; bottom: -10px; opacity: 0; animation-name: gb-particle-float; animation-timing-function: linear; animation-iteration-count: infinite; } .gb-particle-dot { display: block; width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; background-image: radial-gradient(circle, var(--pcolor, #fff) 0%, var(--pcolor, #fff) 12%, transparent 62%); animation: gb-pulse-scale 2.2s ease-in-out infinite, gb-pulse-fade 1.5s ease-in-out infinite; } @keyframes gb-particle-float { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 0.9; } 100% { transform: translate(var(--drift, 20px), -46vh); opacity: 0; } } @keyframes gb-pulse-scale { 0% { transform: scale(0.4); } 50% { transform: scale(2); } 100% { transform: scale(0.4); } } @keyframes gb-pulse-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .gb-particle { display: none; } } @media (max-width: 600px) { .gb-particle-section { height: 32vh; min-height: 220px; } }