/* ============================================================ HARBOUR GLASS - Shared Utilities Source: prototype css/main.css + animations.css Containers, glassmorphism primitives, glow, line-mask, svg-draw + morph, scroll-reveal animations, cta-banner. Used across multiple pages. Pure ASCII only. ============================================================ */ /* --- CONTAINERS --- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } /* --- GLASSMORPHISM PANELS --- */ .glass-panel { position: relative; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1rem; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .glass-panel::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 35%, transparent 60%, rgba(122, 79, 151, 0.12) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } .glass-panel--strong { background: rgba(122, 79, 151, 0.12); } .glass-panel--strong::before { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 35%, transparent 55%, rgba(122, 79, 151, 0.18) 100% ); } /* Decorative orbs - place behind glass panels for blur-through depth */ .glass-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .glass-blob--purple { background: radial-gradient(circle, rgba(122, 79, 151, 0.35), transparent 70%); filter: blur(60px); } .glass-blob--blue { background: radial-gradient(circle, rgba(1, 45, 110, 0.4), transparent 70%); filter: blur(60px); } .glass-blob--lime { background: radial-gradient(circle, rgba(186, 211, 0, 0.18), transparent 70%); filter: blur(50px); } .glass-blob--subtle { opacity: 0.5; } /* Architectural circular outlines */ .glass-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(122, 79, 151, 0.12); box-shadow: 0 0 25px rgba(122, 79, 151, 0.06); pointer-events: none; z-index: 0; } .glass-ring--blue { border-color: rgba(1, 45, 110, 0.15); box-shadow: 0 0 20px rgba(1, 45, 110, 0.06); } .glass-ring--lime { border-color: rgba(186, 211, 0, 0.10); box-shadow: 0 0 15px rgba(186, 211, 0, 0.04); } .glass-scene { position: relative; } /* Shimmer for glass panels */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .glass-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 60%, transparent 100% ); background-size: 200% 100%; animation: shimmer 8s linear infinite; pointer-events: none; border-radius: inherit; } /* --- AMBIENT GLOW --- */ .glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.12; pointer-events: none; } .glow--purple { background: var(--purple); } .glow--blue { background: var(--dark-blue); } /* --- SCROLL REVEAL (consumed by animations.js) --- Progressive enhancement: elements are visible by default. Animations.js adds .js-reveal-ready to only after GSAP and ScrollTrigger have loaded successfully, at which point we hide them again so GSAP can drive the reveal. If JS fails entirely, content stays visible. */ .js-reveal-ready [data-reveal] { opacity: 0; will-change: transform, opacity; } .js-reveal-ready [data-reveal="up"] { transform: translateY(40px); } .js-reveal-ready [data-reveal="down"] { transform: translateY(-40px); } .js-reveal-ready [data-reveal="left"] { transform: translateX(-40px); } .js-reveal-ready [data-reveal="right"] { transform: translateX(40px); } .js-reveal-ready [data-reveal="scale"] { transform: scale(0.92); } .js-reveal-ready [data-reveal="fade"] { /* opacity only */ } .js-reveal-ready [data-reveal].is-visible { opacity: 1; transform: translate(0) scale(1); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); } .js-reveal-ready [data-reveal-stagger] > *:not(.glass-blob):not(.glass-ring) { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; } [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; } [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; } [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; } [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; } [data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; } [data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 560ms; } [data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); } /* --- LINE MASK TEXT REVEAL --- */ .line-mask { position: relative; display: block; overflow: clip; } .line-mask .line { display: block; /* GSAP handles the transform - no CSS transition here */ } /* --- SVG DRAWING ANIMATION --- */ .svg-draw path, .svg-draw line, .svg-draw polyline, .svg-draw polygon, .svg-draw rect, .svg-draw circle, .svg-draw ellipse { stroke-dasharray: var(--path-length, 1000); stroke-dashoffset: var(--path-length, 1000); transition: none; fill: none; } /* --- DRAWING-TO-PHOTO MORPH --- */ .morph-container { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 86% 80% at center, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 86% 80% at center, #000 45%, transparent 100%); } .morph-drawing { position: relative; z-index: 2; width: 100%; height: auto; } .morph-drawing svg { width: 100%; height: auto; } .morph-drawing:has(img) { z-index: 4; } .morph-drawing img { width: 100%; height: auto; display: block; object-fit: cover; } .morph-photo { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .morph-photo img { width: 100%; height: 100%; object-fit: cover; } .morph-mask { position: absolute; inset: 0; z-index: 3; background: var(--bg-base); /* GSAP animates opacity 1 -> 0 */ } /* --- HORIZONTAL SCROLL --- */ .horizontal-scroll { overflow: hidden; position: relative; } .horizontal-scroll__track { display: flex; flex-wrap: nowrap; gap: var(--space-lg); } .horizontal-scroll__panel { flex: 0 0 auto; width: 80vw; max-width: 900px; } /* --- PARALLAX --- */ .parallax-container { position: relative; overflow: hidden; } .parallax-bg { position: absolute; inset: -20% 0; z-index: 0; will-change: transform; } .parallax-bg img { width: 100%; height: 100%; object-fit: cover; } .parallax-content { position: relative; z-index: 1; } /* --- COUNTER / STAT --- */ .stat-number { font-variant-numeric: tabular-nums; display: inline-block; } /* --- FLOAT (decorative elements) --- */ @keyframes gentleFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1deg); } } .float-element { animation: gentleFloat 6s var(--ease-in-out) infinite; } /* --- CTA BANNER (shared across pages) --- */ .cta-banner { position: relative; padding-block: var(--space-2xl); overflow: hidden; text-align: center; } .cta-banner__inner { max-width: 700px; margin-inline: auto; } .cta-banner__inner h2 { margin-bottom: var(--space-sm); } .cta-banner__inner p { margin-inline: auto; margin-bottom: var(--space-lg); text-align: center; } .cta-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); } /* --- SUBTLE BACKGROUND EFFECTS --- */ /* bg-gradient-noise: soft purple/navy radial wash. Used on services snapshot to break monotony with the hero bg sitting above. */ .bg-gradient-noise { position: relative; } .bg-gradient-noise::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(122, 79, 151, 0.06), transparent), radial-gradient(ellipse 500px 300px at 80% 70%, rgba(1, 45, 110, 0.06), transparent); pointer-events: none; z-index: 0; } .bg-gradient-noise > * { position: relative; z-index: 1; }