/* ════════════════════════════════════════════════════════════ benefit.css — shared styles for the six membership benefit detail pages. Same v10 design language as index.html: breathing pastel mesh, glass header, charcoal pills, Lora + Nunito Sans. Zero JavaScript anywhere; motion is pure CSS and respects prefers-reduced-motion. ════════════════════════════════════════════════════════════ */ :root { --green-white: #E8EBE0; --surface: #F0EDE6; --white: #FFFFFF; --pill: #1C1C1E; --pill-pressed: #3A3A3C; --coral: #E8614D; --ink: #333333; --ink-soft: #6B665F; --border: #CCC9BE; --mesh-aqua: 92, 200, 214; --mesh-gold: 255, 209, 102; --mesh-blush: 247, 151, 163; --mesh-lav: 168, 148, 226; --brand-grad: linear-gradient(100deg, #FF9F4A 0%, #F0564A 42%, #C557C9 78%, #7B6CF0 100%); --glass: rgba(255, 255, 255, 0.66); --glass-border: rgba(255, 255, 255, 0.75); --shadow-soft: 0 1px 5px rgba(0, 0, 0, 0.06); --shadow-card: 0 6px 26px rgba(51, 51, 51, 0.10); --radius-xl: 22px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Nunito Sans", system-ui, sans-serif; color: var(--ink); background: linear-gradient(160deg, #F2F6EE 0%, #F3EFEA 100%); line-height: 1.65; font-size: 17px; overflow-x: hidden; } h1, h2, h3 { font-family: "Lora", Georgia, serif; font-weight: 600; line-height: 1.2; } .wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; position: relative; } /* Breathing mesh (same pools as the home page) */ .mesh { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .mesh span { position: absolute; border-radius: 50%; will-change: transform, opacity; } .pool-aqua { left: -45vw; top: -18vh; width: 135vw; height: 52vh; opacity: 0.66; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--mesh-aqua), 1) 0%, rgba(var(--mesh-aqua), 0.35) 68%, rgba(var(--mesh-aqua), 0) 100%); animation: breatheA 11s ease-in-out infinite; } .pool-gold { left: 42vw; top: -10vh; width: 115vw; height: 46vh; opacity: 0.66; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--mesh-gold), 1) 0%, rgba(var(--mesh-gold), 0.35) 68%, rgba(var(--mesh-gold), 0) 100%); animation: breatheB 13s ease-in-out infinite; } .pool-blush { left: -38vw; top: 62vh; width: 122vw; height: 48vh; opacity: 0.66; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--mesh-blush), 1) 0%, rgba(var(--mesh-blush), 0.35) 68%, rgba(var(--mesh-blush), 0) 100%); animation: breatheC 9.5s ease-in-out infinite; } .pool-lav { left: 38vw; top: 66vh; width: 128vw; height: 50vh; opacity: 0.66; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--mesh-lav), 1) 0%, rgba(var(--mesh-lav), 0.35) 68%, rgba(var(--mesh-lav), 0) 100%); animation: breatheD 14s ease-in-out infinite; } .heart { left: 6vw; top: 26vh; width: 88vw; height: 36vh; opacity: 0.9; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 252, 1) 0%, rgba(255, 255, 252, 0.35) 68%, rgba(255, 255, 252, 0) 100%); } @keyframes breatheA { 50% { transform: translate(18px, 14px) scale(1.18); opacity: 0.53; } } @keyframes breatheB { 50% { transform: translate(-16px, 20px) scale(1.12); opacity: 0.56; } } @keyframes breatheC { 50% { transform: translate(14px, -16px) scale(1.15); opacity: 0.59; } } @keyframes breatheD { 50% { transform: translate(-14px, -12px) scale(1.10); opacity: 0.53; } } @media (prefers-reduced-motion: reduce) { .mesh span { animation: none !important; } html { scroll-behavior: auto; } * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } } /* Floating glass squircle header (Meela-style) */ header { position: sticky; top: 14px; z-index: 50; padding: 0 16px; } .nav { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: 1032px; margin: 0 auto; padding: 0 12px 0 24px; background: rgba(255, 255, 255, 0.42); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 26px; box-shadow: 0 8px 30px rgba(51, 51, 51, 0.10); } .brand { font-family: "Lora", serif; font-size: 24px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: 0.2px; } .brand em { font-style: normal; color: var(--coral); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .brand em { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } } .nav-links { display: flex; gap: 26px; align-items: center; } .nav-links a { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink-soft); transition: color .15s ease; } .nav-links a:hover { color: var(--ink); } .nav .btn { padding: 9px 18px; font-size: 14px; } .nav .btn-pill { color: var(--white); } @media (max-width: 880px) { .nav-links a:not(.btn) { display: none; } } /* Article */ main { padding: 72px 0 88px; } .kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); background: rgba(28, 28, 30, 0.05); border: 1px solid rgba(28, 28, 30, 0.15); padding: 6px 14px; border-radius: 9999px; margin-bottom: 18px; } main h1 { font-size: clamp(32px, 4.5vw, 46px); margin-bottom: 16px; } main .lede { font-size: 19.5px; color: var(--ink-soft); margin-bottom: 36px; max-width: 36em; } main h2 { font-size: 24px; margin: 36px 0 10px; } main p { color: var(--ink-soft); margin-bottom: 14px; max-width: 42em; } main p strong { color: var(--ink); } /* ══ MEMBER VIDEO SLOT (ElliQ-style feature demo) ══════════ One per benefit page. At launch, replace the inner .video-brief with a real