/* === FoliHub · Underwater (light edition) === Same vibe (blue gradient + bubbles + wave) with the GPU-heavy bits trimmed — no backdrop-filter, fewer/slower bubbles, bigger tile so fewer repaints. Honors prefers-reduced-motion. */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); /* ---------- Animations ---------- */ @keyframes fh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ---------- Page ground ---------- Stack: 1. wave silhouette at the bottom edge (static SVG) 2. soft sun-ray glow from upper corners 3. base sky-to-ocean gradient All composited once at paint time — zero animation cost. */ .fh-linkfolio { position: relative; overflow: hidden; min-height: 100svh; font-family: 'Quicksand', system-ui, sans-serif; color: #0c4a6e; background: url("data:image/svg+xml;utf8,") bottom / 100% 70px no-repeat, radial-gradient(ellipse 60% 40% at 30% 0%, rgba(255,255,255,.55), transparent 60%), radial-gradient(ellipse 50% 35% at 70% 0%, rgba(254,243,199,.35), transparent 60%), linear-gradient(180deg, #e0f2fe 0%, #bae6fd 35%, #7dd3fc 70%, #38bdf8 100%); } /* Animated bubbles — 3 per tile, 400×800 (sparse), slow rise. Bigger tile = fewer instances tiled across the page = fewer bubbles the compositor has to push around per frame. */ .fh-linkfolio::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 400px 800px; background-repeat: repeat; } /* Lift content above the deco layers */ .fh-hero, .fh-links, .fh-footer { position: relative; z-index: 1; } /* ---------- Hero ---------- */ .fh-hero { padding: 56px 24px 28px; text-align: center; } .fh-avatar { width: 96px !important; height: 96px !important; border-radius: 50% !important; border: 3px solid rgba(255,255,255,.85) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 28px rgba(125,211,252,.5), 0 8px 22px rgba(2,132,199,.25) !important; animation: fh-float 4s ease-in-out infinite !important; } .fh-display-name { font-size: clamp(1.75rem, 5vw, 2.5rem) !important; font-weight: 700 !important; color: #0c4a6e !important; margin-top: 18px !important; letter-spacing: -0.02em !important; text-shadow: 0 1px 2px rgba(255,255,255,.7) !important; } .fh-tagline { color: #075985 !important; font-size: 0.9375rem !important; font-style: italic !important; margin-top: 4px !important; } /* ---------- Buttons (translucent white, NO backdrop-filter) ---------- Frosted-glass look without the GPU cost: solid rgba white at 65% opacity sits on the gradient and reads as soft glass. The visual loses the live-blur of what's behind, but on a uniform gradient ground that's barely noticeable, and the page stops re-blurring on every scroll frame. */ .fh-links { gap: 10px !important; padding: 16px 14px 32px !important; max-width: 540px; margin: 0 auto; } .fh-link-button { background: rgba(255,255,255,.65) !important; border: 1px solid rgba(255,255,255,.8) !important; border-radius: 16px !important; padding: 20px 18px !important; color: #0c4a6e !important; font-weight: 500 !important; box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 4px 14px rgba(2,132,199,.10) !important; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease !important; } .fh-link-button:hover { transform: translateY(-2px) !important; background: rgba(255,255,255,.85) !important; border-color: rgba(56,189,248,.55) !important; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(2,132,199,.20) !important; } .fh-link-icon { color: #0284c7 !important; } /* Primary / starred = ocean tide */ .fh-link-primary { background: linear-gradient(135deg, #38bdf8, #0284c7) !important; color: #ffffff !important; border-color: rgba(255,255,255,.45) !important; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px rgba(2,132,199,.35) !important; } .fh-link-primary:hover { background: linear-gradient(135deg, #0ea5e9, #0369a1) !important; } .fh-link-primary .fh-link-icon { color: #ffffff !important; } /* Text dividers */ .fh-text-block--header { color: #0369a1 !important; letter-spacing: 0.15em !important; font-weight: 600 !important; } .fh-footer { color: #0369a1 !important; font-size: 0.75rem !important; } /* ---------- Reduced motion + low-end devices ---------- Visitors who turn on iOS/Android "Reduce Motion" or who set prefers-reduced-motion in OS get a static version: no avatar float, no rising bubbles. Same colours, same layout — just stops the browser doing per-frame work. */ @media (prefers-reduced-motion: reduce) { .fh-avatar { animation: none !important; } .fh-linkfolio::after { display: none !important; } }