/* ============================================================================ AMP · ALICE MARKET PLACE — IMAGERY / VISUALS LAYER Self-generated visual system: animated background field + reusable SVG motifs. NO stock · NO logos · NO downloads · 100% self-authored SVG / CSS / canvas. Brand: navy #06101F · gold #C9A84C · cream #F3EFE6 · IBM Plex. Consumes canonical tokens from amp-design-system.css (--amp-*). ALL motion is reduced-motion gated (safe-static by default at the bottom). Author: AMP Imagery/Visuals Engineer · 2026-06-03 ---------------------------------------------------------------------------- Include order in : 1. amp-design-system.css (tokens — REQUIRED first) 2. amp-visuals.css (this file) 3. amp-field.js (background field module) ========================================================================== */ /* Local fallbacks so this file degrades gracefully if tokens absent. */ .amp-vis { --av-navy-deep: var(--amp-navy-deep, #06101F); --av-navy: var(--amp-navy, #0A1A3D); --av-navy-lift: var(--amp-navy-lift, #0F2256); --av-gold: var(--amp-gold, #C9A84C); --av-gold-lt: var(--amp-gold-lt, #D9BA72); --av-gold-hot: var(--amp-gold-hot, #FFD56B); --av-cream: var(--amp-cream, #F3EFE6); --av-gold-fog: var(--amp-gold-fog, rgba(201,168,76,0.18)); --av-ease-inout: var(--amp-ease-inout, cubic-bezier(0.65,0,0.35,1)); --av-ease: var(--amp-ease, cubic-bezier(0.16,0.84,0.36,1)); } /* ============================================================================ 1 · GLOBAL ANIMATED BACKGROUND FIELD Sunflower-dawn gradient + drifting motes. One fixed layer behind all content. The motes canvas is painted by amp-field.js (one shared rAF, off-screen aware). ========================================================================== */ .amp-field { position: fixed; inset: 0; z-index: -1; /* behind every page section */ pointer-events: none; overflow: hidden; background: var(--av-navy-deep, #06101F); } /* 1a · Dawn gradient wash — sunflower light breaking low-center over navy. Two radial pools (gold glow + lift) over a navy vertical base. Drifts slowly. */ .amp-field__dawn { position: absolute; inset: -8% -8% -8% -8%; /* bleed so drift never reveals an edge */ background: radial-gradient(120% 80% at 50% 108%, rgba(201,168,76,0.22) 0%, rgba(201,168,76,0.10) 22%, rgba(201,168,76,0.00) 52%), radial-gradient(90% 70% at 78% 8%, rgba(15,34,86,0.55) 0%, rgba(15,34,86,0.00) 60%), linear-gradient(180deg, var(--av-navy-deep, #06101F) 0%, #081427 46%, var(--av-navy, #0A1A3D) 100%); will-change: transform; transform: translate3d(0,0,0); animation: amp-field-drift 40s var(--av-ease-inout, ease-in-out) infinite; } /* 1b · Aurora mesh — soft secondary gold/navy pools, low opacity, slow drift. Offset phase + direction from the dawn so the field never pulses in lockstep. */ .amp-field__mesh { position: absolute; inset: -12%; opacity: 0.55; background: radial-gradient(40% 38% at 20% 30%, rgba(217,186,114,0.10) 0%, transparent 60%), radial-gradient(46% 44% at 82% 64%, rgba(15,34,86,0.40) 0%, transparent 62%), radial-gradient(34% 32% at 60% 12%, rgba(201,168,76,0.07) 0%, transparent 60%); will-change: transform; transform: translate3d(0,0,0); animation: amp-field-mesh 56s var(--av-ease-inout, ease-in-out) infinite; } /* 1c · Grain — self-generated SVG turbulence, tiled, ~3% opacity. Tactile, static. */ .amp-field__grain { position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* 1d · Motes canvas — painted by amp-field.js. Sits above gradients, below grain. If JS never runs (or reduced-motion), this stays an empty, invisible canvas. */ .amp-field__motes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; } @keyframes amp-field-drift { 0% { transform: translate3d(0, 0, 0) scale(1.02); } 50% { transform: translate3d(-1.4%, -1.2%, 0) scale(1.05); } 100% { transform: translate3d(0, 0, 0) scale(1.02); } } @keyframes amp-field-mesh { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(2.2%, 1.6%, 0) rotate(0.6deg); } 100% { transform: translate3d(0, 0, 0); } } /* ============================================================================ 2 · SUNFLOWER MARK — inline SVG helper sizing (mark itself in sunflower-mark.svg) currentColor-driven so it inherits gold from context. Use as hero accent. ========================================================================== */ .amp-mark { display: inline-block; color: var(--av-gold, #C9A84C); width: 64px; height: 64px; flex: none; } .amp-mark svg { width: 100%; height: 100%; display: block; fill: currentColor; } .amp-mark--lg { width: 120px; height: 120px; } .amp-mark--xl { width: 200px; height: 200px; } .amp-mark--watermark { position: absolute; opacity: 0.05; color: var(--av-gold, #C9A84C); pointer-events: none; z-index: 0; } /* Optional slow rotation — gated off under reduced motion below. */ .amp-mark--spin svg { transform-origin: 50% 50%; animation: amp-mark-spin 90s linear infinite; will-change: transform; } @keyframes amp-mark-spin { to { transform: rotate(360deg); } } /* ============================================================================ 3 · CAPITAL-STACK DIAGRAM — sizing + draw-on-scroll for capital-stack.svg No numbers / no returns — label slots only (filled in markup, compliant). ========================================================================== */ .amp-stack { display: block; width: 100%; max-width: 520px; margin: 0 auto; } .amp-stack svg { width: 100%; height: auto; display: block; } /* Draw-on-scroll: tiers fade+rise in sequence once .is-visible is added by JS/observer. Static (visible) by default so no-JS and reduced-motion are correct. */ .amp-stack .av-tier { opacity: 1; transform: none; } .amp-stack[data-draw="on"] .av-tier { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--av-ease, ease), transform 700ms var(--av-ease, ease); } .amp-stack[data-draw="on"].is-visible .av-tier { opacity: 1; transform: none; } .amp-stack[data-draw="on"].is-visible .av-tier:nth-child(1) { transition-delay: 0ms; } .amp-stack[data-draw="on"].is-visible .av-tier:nth-child(2) { transition-delay: 90ms; } .amp-stack[data-draw="on"].is-visible .av-tier:nth-child(3) { transition-delay: 180ms; } .amp-stack[data-draw="on"].is-visible .av-tier:nth-child(4) { transition-delay: 270ms; } /* ============================================================================ 4 · SECTOR ICONOGRAPHY — sizing for the sprite glyphs (amp-icons.svg) Compliant categories ONLY: income / growth / alternatives / venture + platform glyphs: education / secondaries / provenance. Single stroke weight, gold on transparent. Use via . ========================================================================== */ .amp-icon { display: inline-block; width: 40px; height: 40px; color: var(--av-gold, #C9A84C); flex: none; } .amp-icon svg, .amp-icon use { width: 100%; height: 100%; } .amp-icon--lg { width: 56px; height: 56px; } .amp-icon--sm { width: 28px; height: 28px; } /* Standalone sprite reference convenience */ svg.amp-icon-svg { width: 40px; height: 40px; display: inline-block; vertical-align: middle; } svg.amp-icon-svg .av-stroke { stroke: currentColor; fill: none; } svg.amp-icon-svg { color: var(--av-gold, #C9A84C); } /* ============================================================================ 5 · STAT-BLOCK COMPLIANCE HELPER Keeps the mandated disclosure adjacent to any figure surface this layer touches. ========================================================================== */ .amp-vis-disclosure { display: block; font-family: var(--amp-mono, monospace); font-size: 11px; letter-spacing: 0.04em; color: var(--amp-dim, rgba(232,228,214,0.50)); margin-top: var(--amp-s3, 12px); } /* ============================================================================ 6 · REDUCED-MOTION — HARD KILL-SWITCH (non-negotiable) No motion when the user prefers reduced motion. Field becomes a static dawn; mark/stack/icons render in their final, fully-legible state. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .amp-field__dawn, .amp-field__mesh { animation: none !important; transform: none !important; } .amp-field__motes { display: none !important; } /* canvas also halted in JS */ .amp-mark--spin svg { animation: none !important; } .amp-stack[data-draw="on"] .av-tier { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (prefers-reduced-motion:reduce){ }