/* ============================================================ Depth & Playfulness Utilities (v2) ------------------------------------------------------------ Additive, opt-in utility classes for layered shadows, hover micro-animations, scroll-triggered reveals, soft blurred background "blobs", and the Fredoka playful-font accent. These are meant to be SPRINKLED tastefully on select elements (a stat number, a badge, a card, a section wrapper) — NOT applied wholesale to every element on a page. Pick 1-2 per section max so the playfulness reads as intentional accents, not visual noise. No mouse/cursor/pointer-position tracking anywhere in this file — all motion is hover/focus-triggered (CSS-only) or scroll-triggered via the .in-view class toggled by assets/js/depth-effects.js (IntersectionObserver, no mouse coordinates involved). Brand palette only: navy #170C79 · cream #EFE3CA · teal #56B6C6 · light teal/sky #8ACBD0 · red/coral #FF0052 · pink #FF97D0 (plus white/black). ============================================================ */ /* ── 1. Depth / shadow system ─────────────────────────────── Soft, navy-tinted (not pure black) layered shadows in three tiers. Use on cards, panels, buttons, framed images — anything that should feel like it's lifted off the page. */ .depth-sm { box-shadow: 0 1px 2px rgba(23, 12, 121, 0.06), 0 4px 10px rgba(23, 12, 121, 0.08); } .depth-md { box-shadow: 0 2px 4px rgba(23, 12, 121, 0.07), 0 10px 24px rgba(23, 12, 121, 0.12), 0 1px 0 rgba(255, 255, 255, 0.4) inset; } .depth-lg { box-shadow: 0 4px 8px rgba(23, 12, 121, 0.08), 0 20px 48px rgba(23, 12, 121, 0.18), 0 1px 0 rgba(255, 255, 255, 0.35) inset; } /* Hover-lift: pairs with any depth-* class (or standalone). CSS-transition only — translateY + shadow growth on hover/focus, no JS, no pointer-position math. */ .lift-hover { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease; will-change: transform; } .lift-hover:hover, .lift-hover:focus-visible { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(23, 12, 121, 0.1), 0 28px 56px rgba(23, 12, 121, 0.2); } /* ── 2. Playful micro-animations ──────────────────────────── Hover/focus-triggered and scroll-triggered (.in-view) keyframe animations. Playful bounce easing throughout. */ @keyframes depth-wiggle { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } } /* Small rotation wiggle on hover/focus — great for icons, emoji, small badges. Loops while hovered. */ .wiggle-hover { display: inline-block; transform-origin: 50% 80%; } .wiggle-hover:hover, .wiggle-hover:focus-visible { animation: depth-wiggle 0.6s ease-in-out; } @keyframes depth-pop-in { 0% { opacity: 0; transform: scale(0.85) translateY(18px); } 60% { opacity: 1; transform: scale(1.03) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Scroll-reveal scale+fade with a playful bounce landing. Starts hidden; add .in-view (toggled by depth-effects.js via IntersectionObserver) to play the entrance. Use on cards, section headings, image tiles as they enter view. */ .pop-in { opacity: 0; } .pop-in.in-view { animation: depth-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes depth-badge-bounce { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.12); } 75% { transform: scale(0.94); } 100% { transform: scale(1); } } /* Subtle bounce-in for badges/pills/tags. Same .in-view trigger pattern as .pop-in, but tuned for small, chip-shaped elements. */ .badge-bounce { opacity: 0; } .badge-bounce.in-view { animation: depth-badge-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @media (prefers-reduced-motion: reduce) { .wiggle-hover:hover, .wiggle-hover:focus-visible, .pop-in.in-view, .badge-bounce.in-view, .lift-hover:hover, .lift-hover:focus-visible { animation: none !important; transition: none !important; transform: none !important; } .pop-in, .badge-bounce { opacity: 1; } } /* ── 3. Layered background depth (blurred color blobs) ───── Large, softly blurred radial-gradient circles positioned absolutely behind content to create depth behind a section. Apply to a `position: relative; overflow: hidden;` section wrapper, then add one or two blob children with a placement modifier. Blobs sit at z-index: 0 — make sure section content has z-index: 1+ / position: relative. */ .depth-bg-blob { position: absolute; width: clamp(260px, 34vw, 520px); height: clamp(260px, 34vw, 520px); border-radius: 50%; filter: blur(60px); opacity: 0.28; z-index: 0; pointer-events: none; } /* Color modifiers */ .depth-bg-blob--navy { background: radial-gradient(circle, #170C79 0%, transparent 72%); } .depth-bg-blob--teal { background: radial-gradient(circle, #56B6C6 0%, transparent 72%); } .depth-bg-blob--sky { background: radial-gradient(circle, #8ACBD0 0%, transparent 72%); } .depth-bg-blob--red { background: radial-gradient(circle, #FF0052 0%, transparent 72%); } .depth-bg-blob--pink { background: radial-gradient(circle, #FF97D0 0%, transparent 72%); } /* Placement modifiers */ .depth-bg-blob--top-left { top: -10%; left: -8%; } .depth-bg-blob--top-right { top: -10%; right: -8%; } .depth-bg-blob--bottom-left { bottom: -12%; left: -10%; } .depth-bg-blob--bottom-right { bottom: -12%; right: -10%; } .depth-bg-blob--center { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ── 4. Playful font utility ──────────────────────────────── Fredoka is NMC's third, playful type voice (already loaded via main.css's Google Fonts import). Use on badges, stat numbers, playful section labels/eyebrows, and kid-facing card headings — not on long-form body copy. */ .font-playful { font-family: 'Fredoka', 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.01em; }