.elementor-kit-25{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-4975227:#F3EFE7;--e-global-color-dcfe52a:#0F3D3E;--e-global-color-6a318ff:#147D7E;--e-global-color-30bd770:#9ADAD6;--e-global-color-b2c3d1d:#E56556;--e-global-color-29b61b5:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-1e5b694-font-family:"Poppins";--e-global-typography-1e5b694-font-size:56px;--e-global-typography-1e5b694-font-weight:700;--e-global-typography-1e5b694-text-transform:uppercase;--e-global-typography-1e5b694-line-height:1.2em;--e-global-typography-1e5b694-letter-spacing:0.5px;--e-global-typography-1e5b694-word-spacing:0px;--e-global-typography-7d02a24-font-family:"Poppins";--e-global-typography-7d02a24-font-size:40px;--e-global-typography-7d02a24-font-weight:600;--e-global-typography-7d02a24-letter-spacing:0px;--e-global-typography-7d02a24-word-spacing:0px;--e-global-typography-54278c0-font-family:"Poppins";--e-global-typography-54278c0-font-weight:400;--e-global-typography-54278c0-letter-spacing:0px;--e-global-typography-f525eac-font-family:"Nunito";--e-global-typography-f525eac-font-size:14px;--e-global-typography-f525eac-font-weight:600;--e-global-typography-d2954d5-font-family:"Nunito";--e-global-typography-d2954d5-font-size:18px;--e-global-typography-d2954d5-font-weight:400;color:var( --e-global-color-dcfe52a );font-family:"Nunito", Sans-serif;font-size:18px;font-weight:600;}.elementor-kit-25 e-page-transition{background-color:#FFBC7D;}.elementor-kit-25 a{color:var( --e-global-color-dcfe52a );font-family:"Nunito", Sans-serif;font-size:18px;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-25{--e-global-typography-1e5b694-font-size:40px;--e-global-typography-7d02a24-font-size:32px;--e-global-typography-f525eac-font-size:16px;--e-global-typography-f525eac-line-height:1.4em;--e-global-typography-d2954d5-font-size:16px;--e-global-typography-d2954d5-line-height:1.5em;font-size:16px;line-height:1.4em;}.elementor-kit-25 a{font-size:16px;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-25{--e-global-typography-1e5b694-font-size:32px;--e-global-typography-7d02a24-font-size:24px;--e-global-typography-f525eac-font-size:13px;--e-global-typography-f525eac-line-height:1.4em;--e-global-typography-d2954d5-font-size:16px;--e-global-typography-d2954d5-line-height:1.5em;font-size:13px;line-height:1.4em;}.elementor-kit-25 a{font-size:13px;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================== */ /* Global knobs (timeline spine) */ /* ============================== */ :root{ --spineTop: 140px; /* distance from viewport top where the wavy line starts */ --spineWidth: 34px; /* visual rail width */ --spineTile: 160px; /* vertical repeat size of the SVG segment */ } /* ===== Timeline wrapper – no rail here, just a container ===== */ .timeline-wrapper{ position: relative; overflow: visible; z-index: 0; } /* (intentionally removed .timeline-wrapper::before; rail now lives on .timeline-content) */ /* Aha 6 gets its own short fade-in timeline segment */ #aha6::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 50vh; /* Goes halfway down the section */ width: var(--spineWidth); pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='160' viewBox='0 0 40 160' fill='none'%3E%3Cpath d='M20 0 C24 20 16 40 20 60 S24 100 20 120 S16 140 20 160' stroke='%23147D7E' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='0 7'/%3E%3C/svg%3E"); background-size: 50px 200px; background-position: top center; mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100% ); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100% ); } /* ===== Nodes (red dots) ===== */ .aha-section{ position: relative; } .aha-section .timeline-node{ position: absolute; top: var(--nodeOffset, 120px); left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #E95A4A; box-shadow: 0 0 0 4px rgba(233,90,74,.25); z-index: 9; /* keep highest */ pointer-events: none; } .aha-section .timeline-node.is-active{ box-shadow: 0 0 0 6px rgba(233,90,74,.35); } @media (max-width: 767px){ :root{ --spineTop: 100px; } .aha-section .timeline-node{ box-shadow: 0 0 0 3px rgba(233,90,74,.20); } } /* =============================================== */ /* Aha #1 – legacy single bars (kept for safety) */ /* =============================================== */ .bars-row{ display:flex; gap:28px; align-items:flex-end; width:100%; max-width:520px; margin-top:12px; } .bars-row .elementor-widget-html{ flex:1 1 0; min-width:0; } .bar{ position:relative; width:100%; } .bar__track{ height:180px; background:#EAF5F4; border-radius:12px; box-shadow:inset 0 2px 6px rgba(0,0,0,.06); display:flex; align-items:flex-end; overflow:hidden; } .bar__fill{ width:72%; margin:0 auto 10px; border-radius:10px; transition:height 800ms ease-out; } .bar--abs .bar__fill{ height:35%; background:#8CA3A3; } .bar--sau .bar__fill{ height:65%; background:#E95A4A; } .bar--wand .bar__fill{ height:85%; background:#147D7E; } .bar::before{ content: attr(data-value); position:absolute; top:-36px; left:50%; transform:translateX(-50%); font-weight:800; font-size:28px; line-height:1; color:#147D7E; } .bar::after{ content: attr(data-label); position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); font-weight:600; font-size:16px; line-height:1.2; color:#0F3D3E; } @media (max-width: 767px){ .bars-row{ gap:16px; } .bar__track{ height:140px; } .bar::before{ top:-28px; font-size:22px; } .bar::after{ bottom:-24px; font-size:14px; } } /* =============================================== */ /* Aha #1 – grid layout (percents, bars, labels) */ /* =============================================== */ .bar-graph{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 180px auto; align-items:end; column-gap:28px; row-gap:10px; text-align:center; } .bar-graph .bars-row{ display: contents; } .bar-graph .bars-row .elementor-widget-html:nth-child(1){ grid-column:1; grid-row:2; } .bar-graph .bars-row .elementor-widget-html:nth-child(2){ grid-column:2; grid-row:2; } .bar-graph .bars-row .elementor-widget-html:nth-child(3){ grid-column:3; grid-row:2; } .bar-graph .pct{ font-size:clamp(28px,3.4vw,44px); line-height:1; font-weight:800; letter-spacing:.5px; color:#1C7D7E; } .bar-graph .pct.abs{ color:#8CA3A3; } .bar-graph .pct.sau{ color:#E95A4A; } .bar-graph .pct.wand{ color:#147D7E; } .bar-graph .lbl{ text-transform:none; font-weight:600; color:#0F3D3E; margin-top:4px; } /* ===================================================== */ /* Aha #1 – grouped mini-bars + legend (current design) */ /* ===================================================== */ .mw-gbars{ --card-bg:#FFEFE9; --ink:#0F3D3E; --sleep:#9FDAD6; --happy:#E95A4A; --conf:#147D7E; --rail:#DDE3E5; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:28px 28px 22px; background:var(--card-bg); border-radius:18px; box-shadow:0 12px 24px rgba(15,61,62,0.06); } .mw-gbars__phase{ display:flex; flex-direction:column; gap:10px; } .mw-gbars__title{ margin:0 0 6px 0; font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--ink); text-align:center; } .mw-gbars__cluster{ background:#ECFAF8; border-radius:14px; padding:14px 14px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.04); display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:14px; min-height:140px; overflow:hidden; } /* single mini bar */ .mw-gbar{ --h:50%; position:relative; height:var(--h); border-radius:10px; background:var(--rail); display:flex; align-items:flex-end; justify-content:center; overflow:visible; } .mw-gbar::before{ content:""; position:absolute; inset:auto 18% 8px 18%; height:calc(var(--h) - 16px); border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, currentColor 90%); box-shadow:0 8px 14px rgba(0,0,0,.08); } .mw--sleep{ color:var(--sleep); } .mw--happy{ color:var(--happy); } .mw--conf{ color:var(--conf); } .mw-gbar::after{ content: attr(data-pct); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); font-weight:800; font-size:28px; line-height:1; color:var(--ink); opacity:.9; } /* ===================================================== */ /* Aha #1 – mini-matrix (3 metrics per pillar) */ /* (your three HTML widgets use this) */ /* ===================================================== */ .mini-bars{ display:flex; align-items:flex-end; justify-content:center; gap:12px; height:180px; padding:18px 18px 14px; background:#F7FBFB; border-radius:14px; box-shadow: inset 0 2px 6px rgba(0,0,0,.06); position:relative; overflow:visible; } .mini{ --h:50%; width:18px; height:var(--h); border-radius:10px; background:#147D7E; transition:height 600ms ease-out; position:relative; } /* shorten the light track hint so it never rises above the white card */ .mini::before{ content:""; position:absolute; inset:auto -6px 0 -6px; height:calc(100% + 16px); background:#EAF5F4; border-radius:12px; z-index:-1; } .mini.sleep{ background:#2F9E9E; } .mini.happy{ background:#E95A4A; } .mini.confidence{ background:#0F6C6D; } /* keep the card stable on hover (no extra outer shadow/lift) */ .mini-bars:hover{ box-shadow: inset 0 2px 6px rgba(0,0,0,.06); transform:none; } /* ===== Final tooltip: use data-tip on .mini-bars (NOT title) ===== */ .mw-gbars .mini-bars[data-tip]{ position:relative; overflow:visible; } .mw-gbars .mini-bars[data-tip]:hover::after{ content: attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:#0F3D3E; color:#fff; font-size:12px; line-height:1.28; padding:8px 10px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.18); z-index:20; max-width:480px; white-space:normal; word-break:normal; overflow-wrap:normal; hyphens:manual; text-align:left; pointer-events:none; } /* =============================================== */ /* Aha #1 – grid row extension to include legend */ /* =============================================== */ .bar-graph{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto auto auto auto; column-gap:28px; row-gap:10px; align-items:end; text-align:center; } .bar-graph .mw-gbars{ grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:28px; } .bar-graph .pct.abs{ grid-column:1; grid-row:1; } .bar-graph .pct.sau{ grid-column:2; grid-row:1; } .bar-graph .pct.wand{ grid-column:3; grid-row:1; } .bar-graph .lbl.abs{ grid-column:1; grid-row:3; } .bar-graph .lbl.sau{ grid-column:2; grid-row:3; } .bar-graph .lbl.wand{ grid-column:3; grid-row:3; } .bar-graph .mw-gbars__legend, .bar-graph .mw-legend{ grid-column:1 / -1; grid-row:4; display:flex; justify-content:center; align-items:center; gap:18px; margin-top:6px; } @media (max-width: 767px){ .bar-graph{ column-gap:18px; row-gap:8px; } .bar-graph .mw-gbars{ column-gap:18px; } .bar-graph .mw-gbars__legend, .bar-graph .mw-legend{ gap:12px; } } /* ============================== */ /* Aha #2 – slopegraph card */ /* ============================== */ .mw-slopecard{ background:#FDF3EF; border-radius:20px; box-shadow:0 8px 22px rgba(15,61,62,.09); padding:18px 20px 24px; max-width:680px; } .mw-sub{ color:#0F3D3E; font-size:16px; font-weight:600; margin:0 0 12px; } .mw-slope{ position:relative; } .mw-slope__svg{ width:100%; height:auto; display:block; } .mw-slope__line{ fill:none; stroke:#E95A4A; stroke-width:4; stroke-linecap:round; filter: drop-shadow(0 2px 4px rgba(0,0,0,.08)); } .mw-slope__dots circle{ fill:#0F6B6C; stroke:#fff; stroke-width:2; } .mw-slope__dots circle:hover{ fill:#0B4F50; } /* NOTE: For numeric values on the slope, use native on each SVG circle. */ .mw-slope__x{ display:grid; grid-template-columns:repeat(5,1fr); margin:12px 4px 28px; padding:0; list-style:none; color:#0F3D3E; font-weight:600; font-size:15px; text-align:center; column-gap:12px; } @media (max-width: 767px){ .mw-slopecard{ padding:14px; } .mw-slope__x{ font-size:14px; row-gap:4px; } } /* --- Aha #1 fixes: let tooltips show, keep tracks tidy, style legend --- */ /* Let anything inside the mini-bar card (including tooltips) escape */ .mw-gbars__cluster{ overflow: visible !important; } /* Shorten the light track so it never sticks out */ .mini::before{ height: calc(100% + 18px); /* safe, no overflow */ } /* Tooltip driven by data-tip on the .mini-bars wrapper */ .mini-bars[data-tip]{ position: relative; } .mini-bars[data-tip]:hover::after{ content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: #0F3D3E; color: #fff; font-size: 12px; line-height: 1.3; padding: 8px 10px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.18); max-width: 520px; /* wider so it doesn’t break mid-word */ white-space: normal; word-break: keep-all; hyphens: auto; text-align: center; z-index: 20; } .mini-bars[data-tip]:hover::before{ content: ""; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px) rotate(45deg); width: 12px; height: 12px; background: #0F3D3E; border-radius: 2px; z-index: 19; } /* Remove the hover glow/lift on the mini-bar card */ .mini-bars:hover{ box-shadow: inset 0 2px 6px rgba(0,0,0,.06); transform: none; } /* Legend styles (your Legend HTML is correct) */ .mw-gbars__legend{ grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 6px; font-size: 14px; color: #0F3D3E; } .mw-gbars__legend .key{ display: inline-flex; align-items: center; gap: 8px; } .mw-gbars__legend .sw{ width: 14px; height: 14px; border-radius: 4px; display:inline-block; } .sw--sleep{ background:#2F9E9E; } .sw--happy{ background:#E95A4A; } .sw--conf { background:#0F6C6D; } /* Ensure Elementor wrappers don’t clip the tooltip */ .bar-graph, .bar-graph .elementor-widget-container, .bar-graph .elementor-widget, .bar-graph .elementor-column, .bar-graph .elementor-container{ overflow: visible !important; } /* Aha #3 – Sleep card */ .mw-sleepcard{ --ink:#0F3D3E; --teal:#0F6C6D; --peach:#FDF3EF; --mint:#DAF3F1; --good:#1E8B84; /* up */ --bad:#E95A4A; /* down */ display:grid; grid-template-columns: 1fr 1.35fr; gap:28px; align-items:center; background:var(--peach); border-radius:20px; box-shadow:0 12px 28px rgba(15,61,62,.10); padding:24px 28px; } /* Left: breathing orb */ .mw-orb{ position:relative; width:min(260px, 52vw); aspect-ratio:1/1; margin-inline:auto; border-radius:50%; background: radial-gradient(ellipse at center, rgba(31,128,124,.35), rgba(31,128,124,0) 60%); filter: blur(0.2px); animation: mw-breathe 4.2s ease-in-out infinite; } @keyframes mw-breathe{ 0% { box-shadow: 0 0 0 0 rgba(31,128,124,.28), 0 0 120px 40px rgba(31,128,124,.28) inset; } 50% { box-shadow: 0 0 0 0 rgba(31,128,124,.18), 0 0 140px 60px rgba(31,128,124,.38) inset; } 100%{ box-shadow: 0 0 0 0 rgba(31,128,124,.28), 0 0 120px 40px rgba(31,128,124,.28) inset; } } .mw-moon{ position:absolute; inset:0; margin:auto; width:68%; height:68%; display:block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.10)); } /* Right: metrics */ .mw-sleepcard__right{ color:var(--ink); } .mw-sub{ margin:0 0 12px; font-size:18px; font-weight:700; color:var(--ink); } .mw-metrics{ list-style:none; margin:0; padding:0; display:grid; gap:14px; } .mw-metric{ display:grid; grid-template-columns: 1fr auto; grid-template-rows:auto auto; column-gap:14px; align-items:center; } .mw-metric__label{ grid-column:1; grid-row:1; font-weight:600; } .mw-meter{ grid-column:1; grid-row:2; height:10px; border-radius:999px; background:#E9F5F5; overflow:hidden; position:relative; } .mw-fill{ position:absolute; inset:0 auto 0 0; width: calc(var(--pct,0) * 1%); background: linear-gradient(90deg, rgba(31,128,124,.25), var(--mint)); border-radius:999px; } .mw-delta{ grid-column:2; grid-row:1 / span 2; align-self:center; font-weight:800; letter-spacing:.2px; padding:.15rem .5rem; border-radius:10px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 6px rgba(0,0,0,.08); } /* Color by direction */ .mw-metric[data-dir="up"] .mw-fill{ background: linear-gradient(90deg, rgba(30,139,132,.22), rgba(30,139,132,.85)); } .mw-metric[data-dir="up"] .mw-delta{ color:#fff; background: var(--good); } .mw-metric[data-dir="down"] .mw-fill{ background: linear-gradient(90deg, rgba(233,90,74,.18), rgba(233,90,74,.80)); } .mw-metric[data-dir="down"] .mw-delta{ color:#fff; background: var(--bad); } .mw-footnote{ margin:10px 0 0; font-size:12px; opacity:.75; } /* Responsive */ @media (max-width: 900px){ .mw-sleepcard{ grid-template-columns:1fr; text-align:left; } .mw-orb{ width:min(220px, 60vw); } } /* Aha #3 – breathing moon orb */ /* speed knob: smaller = faster */ :root{ --sleep-breathe: 1.8s; } /* try 1.6s–2.2s */ .mw-sleepcard__left{ display:grid; place-items:center; } /* sized container for the artwork */ .sleep-orb{ position: relative; width: min(260px, 52vw); aspect-ratio: 1 / 1; margin-inline: auto; border-radius: 50%; isolation: isolate; /* keeps the glow behind the moon */ } /* animated teal glow w/ soft edges */ .sleep-orb::before{ content:""; position:absolute; inset:-14%; border-radius:50%; background: radial-gradient(circle at 50% 45%, rgba(20,125,126,.60) 0%, rgba(20,125,126,.38) 32%, rgba(20,125,126,.20) 58%, rgba(20,125,126,.08) 75%, rgba(20,125,126,0) 100%); filter: blur(4px); z-index:-1; animation: sleep-breathe var(--sleep-breathe) ease-in-out infinite alternate; } /* gentle breathe (scale + opacity) */ @keyframes sleep-breathe{ from{ transform:scale(.92); opacity:.85; } to { transform:scale(1.08); opacity:1; } } /* the moon icon itself */ .sleep-orb .mw-moon{ position:absolute; inset:0; margin:auto; width:72%; height:72%; display:block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.10)); } /* Keep stat circles perfectly round and tidy */ .stat-circle{aspect-ratio:1/1} .stat-circle .elementor-counter-number-suffix{margin-left:2px} .stat-circle .elementor-text-editor{text-align:center} .stat-circle:hover{transform:scale(1.02);transition:transform .15s ease} /* Larger, softer pulsing heart */ .pulse-heart { display: block; margin: 16px auto 8px; width: 76px; /* was ~48 */ height: 76px; animation: pulse 3s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(20,125,126,.25)); } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } 100% { transform: scale(1); opacity: 1; } } /* stat card core */ .stat-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; max-width:260px; width:100%; margin-inline:auto; } /* unify icon/Lottie sizing */ .stat-col .elementor-widget-lottie, .stat-col .elementor-widget-icon, .stat-col .elementor-widget-image{ width:120px; height:120px; } @media (max-width:1024px){ .stat-col{ gap:12px; } .stat-col .elementor-widget-lottie, .stat-col .elementor-widget-icon, .stat-col .elementor-widget-image{ width:96px; height:96px; } } @media (max-width:767px){ .stat-col .elementor-widget-lottie, .stat-col .elementor-widget-icon, .stat-col .elementor-widget-image{ width:84px; height:84px; } } .sphere-main { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #fce6f0 0%, #d9b3d0 100%); position: absolute; z-index: 0; transform: scale(0); opacity: 0; animation: expandSphere 1s ease-out forwards; } @keyframes expandSphere { 0% {transform: scale(0); opacity: 0;} 60% {transform: scale(3); opacity: .6;} 100% {transform: scale(2.5); opacity: .3;} } .pill-subheader { display:inline-block; padding:4px 18px; border-radius:50px; background:#823957; color:#fff; opacity:0; animation: fadeIn 1s .8s forwards; } @keyframes fadeIn {to{opacity:1;}} /* ============ AHA #6 — Single, consolidated styles ============ */ /* 1) Anchor + breathing room */ #aha6 { margin-bottom: 0 !important; padding-bottom: clamp(10px, 1.2vw, 18px); /* prevents glow clipping */ background-size: cover; background-position: 50% 50%; overflow: visible; /* let glows breathe */ } /* Aha Row anchors absolutely-positioned spheres */ .aha-row, #aha6 .aha-row { position: relative; min-height: 90vh; max-width: 1200px; width: 100%; margin: 0 auto; text-align: center; } /* 2) Center stack (pill + headline) */ .mw-center{ position: absolute; left:50%; top:50%; transform: translate(-50%, calc(-50% - 24px)); /* nudge up */ z-index: 20; display:flex; flex-direction:column; align-items:center; text-align:center; } .mw-center .pill-subheader, .mw-pill{ display:inline-block; padding:8px 14px; border-radius:999px; background:#3b8989; color:#fff; font-weight:600; letter-spacing:.02em; opacity:0; animation: mw-fadeUp 500ms ease-out 500ms forwards; } .mw-center .elementor-heading-title, .mw-headline{ margin: 8px 0 6px; opacity:0; font-size: clamp(46px, 5.4vw, 60px); line-height:1.08; animation: mw-fadeUp 500ms ease-out 300ms forwards; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } @keyframes mw-fadeUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} } /* 3) Main frosted sphere behind the headline */ .sphere-main{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) scale(0); width: 220px; height: 220px; border-radius:50%; /* MAXIMUM frosted glass effect */ background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(40px) saturate(200%) brightness(1.1); -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.1); border: 1.5px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.05), 0 0 80px rgba(20, 125, 126, 0.2); opacity: 0; z-index: 5; } @keyframes expandSphere { 0% {transform: translate(-50%,-50%) scale(0); opacity: 0;} 60% {transform: translate(-50%,-50%) scale(3.2); opacity: .6;} 100%{transform: translate(-50%,-50%) scale(2.8); opacity: .28;} } /* 4) Data spheres (positions are within .aha-row) */ .mw-sphere{ position:absolute; z-index:4; opacity:0; transform: scale(.86); } .mw-sphere .bubble{ border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:14px; background: radial-gradient(circle at 35% 35%, #cfeee9 0%, #9fd9d0 60%, #76c5bb 100%); box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 0 40px rgba(118,197,187,.30); } /* Typography inside bubbles: Poppins for kicker/value, Nunito for desc */ .mw-sphere .kicker, .mw-sphere .value{ color:#0e2f2f; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .mw-sphere .kicker{ font-size:20px; font-weight:800; line-height:1.1; margin:0 0 2px 0; } .mw-sphere .value { font-size:30px; font-weight:800; line-height:1.1; margin:0; } .mw-sphere .desc { font: 400 14px/1.2 "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:#0e2f2f; opacity:.95; margin-top:5px; } /* Sizes */ .mw-sphere.s1 .bubble{ width:300px; height:300px; } /* Menopause TL */ .mw-sphere.s2 .bubble{ width:280px; height:280px; } /* Gen Z TR */ .mw-sphere.s3 .bubble{ width:320px; height:320px; } /* Parents BL */ .mw-sphere.s4 .bubble{ width:340px; height:340px; } /* LGBTQ+ BR */ .mw-sphere.s5 .bubble{ width:260px; height:260px; } /* Depression bottom center */ /* Subtle color variance per bubble */ .mw-sphere.s1 .bubble{ background: radial-gradient(circle at 35% 35%, #cfeee9 0%, #9fd9d0 55%, #6fc2b7 100%); } .mw-sphere.s2 .bubble{ background: radial-gradient(circle at 35% 35%, #d9f2ee 0%, #a7e1d8 55%, #79cbbf 100%); } .mw-sphere.s3 .bubble{ background: radial-gradient(circle at 35% 35%, #d7f0ec 0%, #a1ddd4 55%, #6dbfb4 100%); } .mw-sphere.s4 .bubble{ background: radial-gradient(circle at 35% 35%, #caebe6 0%, #95d6cd 55%, #66b9ad 100%); } .mw-sphere.s5 .bubble{ background: radial-gradient(circle at 35% 35%, #e2f5f2 0%, #b8e7df 55%, #86d0c5 100%); } /* Desktop positions */ .mw-sphere.s1{ left: 11%; top: 2.5%; } /* Menopause */ .mw-sphere.s2{ right: 7%; top: 1.5%; } /* Gen Z */ .mw-sphere.s3{ left: 10%; bottom: 1%; } /* Parents */ .mw-sphere.s4{ right: 8%; bottom: 0%; } /* LGBTQ+ */ .mw-sphere.s5{ left: 50%; top: 84%; transform: translateX(-50%); } /* Depression */ /* Animation keyframes (+ stagger) */ @keyframes mw-pop { 0%{opacity:0; transform: scale(.86);} 60%{opacity:.6; transform:scale(1.05);} 100%{opacity:1; transform:scale(1);} } /* Default (paused) vs when in view (IO adds .in-view to #aha6) */ #aha6 .sphere-main, #aha6 .mw-sphere{ opacity:0; transform:scale(.86); } #aha6.in-view .sphere-main{ animation: expandSphere 1s ease-out forwards; } #aha6.in-view .mw-sphere.s1{ animation: mw-pop .60s ease-out .70s forwards; } #aha6.in-view .mw-sphere.s2{ animation: mw-pop .60s ease-out .90s forwards; } #aha6.in-view .mw-sphere.s5{ animation: mw-pop .60s ease-out 1.10s forwards; } #aha6.in-view .mw-sphere.s3{ animation: mw-pop .60s ease-out 1.30s forwards; } #aha6.in-view .mw-sphere.s4{ animation: mw-pop .60s ease-out 1.50s forwards; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ #aha6 .sphere-main, #aha6 .mw-sphere, #aha6 .mw-center *{ animation: none !important; opacity: 1; transform: none !important; } } /* Tablet tuning (nudge to avoid overlaps) */ @media (max-width: 1024px){ #aha6 .aha-row{ min-height: 95vh; } .sphere-main{ width: 200px; height: 200px; } /* Bigger bubbles on tablet - keep visual impact */ .mw-sphere .bubble{ width: 240px; height: 240px; } .mw-sphere.s5 .bubble{ width: 220px; height: 220px; } /* Better positioning - create clear corners */ .mw-sphere.s1{ left: 6%; top: 3%; } /* Menopause - top left */ .mw-sphere.s2{ right: 6%; top: 3%; } /* Gen Z - top right */ .mw-sphere.s3{ left: 6%; bottom: 5%; } /* Parents - bottom left */ .mw-sphere.s4{ right: 6%; bottom: 5%; } /* LGBTQ+ - bottom right */ .mw-sphere.s5{ left: 50%; top: 80%; transform: translateX(-50%); } /* Depression - bottom center */ } /* ===== Aha 6 — Mobile layout (headline orb + trailing spheres) ===== */ @media (max-width: 767px){ /* Taller canvas so the bottom bubble never spills into the next section */ #aha6 .aha-row{ min-height: 185vh; /* was 150vh */ padding-top: 2vh; padding-bottom: 6vh; } /* Headline cluster sits high, big smooth orb */ #aha6 .mw-center{ top: 18%; transform: translate(-50%, -50%); } #aha6 .sphere-main{ width: 240px; /* larger “hero” circle behind the headline */ height: 240px; } /* Uniform mobile bubble size + readable type */ #aha6 .mw-sphere .bubble{ width: 170px; height: 170px; padding: 12px; } #aha6 .mw-sphere .kicker{ font-size: 16px; } #aha6 .mw-sphere .value { font-size: 26px; } #aha6 .mw-sphere .desc { font-size: 12px; line-height: 1.28; } /* Trailing layout — staggered so text never overlaps other bubbles */ /* MENOPAUSE (upper-left of trail) */ #aha6 .mw-sphere.s1{ left: 14%; top: 36%; transform: none; } /* GEN Z (upper-right of trail) */ #aha6 .mw-sphere.s2{ right: 10%; top: 34%; left: auto; } /* PARENTS (middle-left) */ #aha6 .mw-sphere.s3{ left: 12%; top: 56%; } /* LGBTQ+ (middle-right) */ #aha6 .mw-sphere.s4{ right: 8%; top: 64%; left: auto; } /* DEPRESSION (bottom, centered-left so it doesn’t clip below) */ #aha6 .mw-sphere.s5{ left: 18%; top: 80%; transform: none; } /* Keep the dotted node centered on the headline area */ #aha6 .timeline-node{ top: clamp(96px, 22vh, 24vh); } } /* Tiny phones safety net (≤360px wide): slightly smaller bubbles & taller canvas */ @media (max-width: 360px){ #aha6 .aha-row{ min-height: 200vh; } #aha6 .mw-sphere .bubble{ width: 156px; height: 156px; } #aha6 .sphere-main{ width: 220px; height: 220px; } } /* Center the dotted spine node on the headline */ #aha6 .timeline-node{ top: clamp(110px, 50vh - 12px, 52%); } /* === Aha 6 fine-tunes === */ /* Desktop: lift Depression so the caption doesn't clip */ #aha6 .mw-sphere.s5{ top: 77.5%; /* was 84% */ transform: translateX(-50%); } /* Tablet: reduce bubble size slightly + nudge to relieve overlaps */ @media (max-width: 1024px){ /* give the layout a touch more room vertically */ #aha6 .aha-row{ min-height: 95vh; } /* smaller bubbles on tablet */ #aha6 .mw-sphere .bubble{ width:205px; height:205px; } #aha6 .mw-sphere.s5 .bubble{ width:190px; height:190px; } /* nudges: pull Meno & Gen Z outward; raise LGBTQ+; keep Parents left */ #aha6 .mw-sphere.s1{ left: 3%; top: 1%; } #aha6 .mw-sphere.s2{ right:3%; top: 2%; } #aha6 .mw-sphere.s3{ left: 3%; bottom: 4%; } #aha6 .mw-sphere.s4{ right:1%; bottom: 10%; } #aha6 .mw-sphere.s5{ top: 83%; } } /* AHA #6 — mobile spacing tighten (paste at end) */ @media (max-width: 767px){ /* keep headline where you liked it */ #aha6 .mw-center{ top:16%; transform: translate(-50%, -50%); } /* pull Menopause + Gen Z up under the headline */ #aha6 .mw-sphere.s1{ left:14%; top: 26%; transform:none; } /* was 44% */ #aha6 .mw-sphere.s2{ right:10%; left:auto; top: 40%; } /* was 44% */ /* nudge the rest to keep the stagger clean */ #aha6 .mw-sphere.s3{ left:12%; top: 52%; } /* was 62% */ #aha6 .mw-sphere.s4{ right:8%; left:auto; top: 64%; } /* was 70% */ #aha6 .mw-sphere.s5{ left:18%; top: 76%; transform:none; } /* was 86% */ /* slightly shorter canvas so the stack feels tighter */ #aha6 .aha-row{ min-height: 185vh; } /* was 195vh */ } .aha-row{ position: relative; } @media (max-width: 767px){ /* Hide the main vertical rail */ .timeline-content::before{ display: none; } /* Hide Aha 6’s short rail segment */ #aha6::before{ display: none; } } @media (max-width: 767px){ /* Hide all timeline nodes (dots) on mobile */ .aha-section .timeline-node, #aha6 .timeline-node{ display: none; } } /* Anything that should float above the rail */ .over-rail{ position: relative; z-index: 5; /* > rail’s 2 */ } /* ========= Explore / Dig Into the Data ========= */ .mw-explore{ max-width: 1100px; margin: 0 auto; } .mw-explore-intro{ text-align: left; margin-bottom: 28px; } .mw-explore-heading{ font-size: 26px; letter-spacing: .12em; text-transform: uppercase; color: #0F3D3E; margin: 0 0 8px; } .mw-explore-kicker{ margin: 0 0 8px; font-weight: 700; color: #0F3D3E; } .mw-explore-body{ margin: 0; max-width: 520px; color: #0F3D3E; opacity: .85; } /* Cards grid */ .mw-explore-links{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; } /* Individual card */ .mw-explore-card{ position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(15,61,62,0.08); text-decoration: none; color: #0F3D3E; transition: transform .18s ease, box-shadow .18s ease; } .mw-explore-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,61,62,0.12); } /* Top pill label */ .mw-explore-chip{ align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #EAF5F4; color: #147D7E; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Title + body */ .mw-explore-card h3{ margin: 4px 0 2px; font-size: 16px; line-height: 1.3; font-weight: 700; } .mw-explore-card p{ margin: 0; font-size: 14px; line-height: 1.4; opacity: .85; } /* "Coming soon" tag */ .mw-explore-tag{ position: absolute; top: 14px; right: 18px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #E95A4A; color: #fff; } /* Slight visual difference for upcoming items */ .mw-explore-card.is-soon{ background: #FDF3EF; } /* Responsive tweaks */ @media (max-width: 767px){ .mw-explore-intro{ text-align: left; } .mw-explore-heading{ font-size: 22px; } } .aha-moment-label{ display:inline-block; font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; background:#C7E5E3; /* brand teal tint */ color:#0F3D3E; /* dark text */ border-radius:50px; padding:6px 16px; margin-bottom:12px; } /* ===== Tablet (portrait) hotfixes ===== */ @media (min-width:768px) and (max-width:1024px) and (orientation:portrait){ /* 1) Aha #3 – stack icon above card so the chart never squishes */ .mw-aha3 .wrap{ grid-template-columns: 1fr !important; /* was 340px 1fr */ gap: 22px !important; align-items: start !important; } .mw-aha3 .sleep-orb{ max-width: 320px; margin-inline: auto; } .mw-aha3 .card{ max-width: 700px; margin: 0 auto; } /* 3) Aha #6 bubbles – enlarge circles and slightly reduce type so text fits */ #aha6 .mw-sphere .bubble{ width: 265px !important; height: 265px !important; padding: 14px !important; } #aha6 .mw-sphere.s5 .bubble{ /* bottom/center bubble */ width: 240px !important; height: 240px !important; } #aha6 .mw-sphere .kicker{ font-size: 18px !important; } #aha6 .mw-sphere .value { font-size: 28px !important; } #aha6 .mw-sphere .desc { font-size: 13px !important; line-height: 1.28; } /* small positional nudges to keep spacing clean */ #aha6 .mw-sphere.s1{ left: 6%; top: 4%; } #aha6 .mw-sphere.s2{ right: 6%; top: 4%; } #aha6 .mw-sphere.s3{ left: 6%; bottom: 6%; } #aha6 .mw-sphere.s4{ right: 4%; bottom: 10%; } #aha6 .mw-sphere.s5{ left: 50%; top: 83%; transform: translateX(-50%); } } /* Safety: never clip tooltips or charts */ .mw-aha3, .mw-aha3 .wrap, .bar-graph, .bar-graph .elementor-container{ overflow: visible !important; } #aha6::before { left: calc(50% + 9px); /* or left: 50%; transform: translateX(3px) on top of the existing translate */ } /* Move node for Aha #1 – down & a few px to the right */ #aha1 .timeline-node { left: calc(50% + 8px); top: calc(var(--nodeOffset,120px) + 44px); } #aha2 .timeline-node { left: calc(50% + 8px); top: calc(var(--nodeOffset,120px) + 72px); } /* Move node for Aha #3 – drop down & to the right */ #aha3 .timeline-node { left: calc(50% + 8px); top: calc(var(--nodeOffset,120px) + -20px); } /* Move node for Aha #4 – raise up by ~20px */ #aha4 .timeline-node { left: calc(50% + 8px); top: calc(var(--nodeOffset,120px) - 86px); /* left remains 50% unless you want shift */ } /* Move node for Aha #5 – down and to the right */ #aha5 .timeline-node { left: calc(50% + 7px); top: calc(var(--nodeOffset,120px) + 50px); } /* TEMP: hide Aha 6 "Parents" bubble (sphere s3) across all breakpoints */ #aha6 .mw-sphere.s3 { display: none !important; }/* End custom CSS */