/* ================================================================ Girl Harmony - Direction A: "Bloom" Soft, dreamy, premium. Lavender-to-peach mesh canvas, frosted glass surfaces, violet-to-pink gradient actions, luminous ring. Every selector is scoped under :root[data-gh-theme="bloom"] (set by the first script in index.html). Only the bloom-* @keyframes are global, since at-rules cannot take a selector. Body font: Plus Jakarta Sans, bundled in assets/fonts (fonts.css). Dark mode ("Bloom Night") lives in theme-bloom-night.css. ================================================================ */ /* ---------------------------------------------------------------- 1. TOKENS ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] { /* Brand accent: plum becomes Bloom violet */ --gh-plum-900: #23163F; --gh-plum-700: #5236C9; --gh-plum-500: #6A4BE6; --gh-plum-300: #A996F7; --gh-plum-200: #DCD2FF; --gh-plum-100: #ECE6FF; --gh-plum-50: #F6F2FF; /* "Cocoa" text ramp becomes deep ink + violet greys */ --gh-cocoa-900: #170D2E; --gh-cocoa-700: #23163F; --gh-cocoa-500: #4F4370; --gh-cocoa-300: #5F5383; /* "Cream" surfaces become lilac mist */ --gh-cream-50: #F7F3FF; --gh-cream-100: #F2EDFD; --gh-cream-200: #E7E0F8; --gh-cream-300: #D5CAEF; /* Blush */ --gh-pink-700: #B8457C; --gh-pink-500: #E8619F; --gh-pink-300: #F9B8D3; --gh-pink-100: #FFE3EE; --gh-pink-50: #FFF3F8; /* Phase identity: rose, mint, butter, lavender */ --gh-menstrual: #CC3A72; --gh-menstrual-soft: #FFE1EC; --gh-follicular: #5ECDA4; --gh-follicular-soft: #DDF6EC; --gh-ovulation: #F9C25B; --gh-ovulation-soft: #FFF2D2; --gh-luteal: #8E6CF0; --gh-luteal-soft: #ECE5FF; /* Semantic */ --gh-success: #34A57B; --gh-warning: #F0A54A; --gh-error: #D9405F; --gh-info: #5B8DEF; --gh-gold-500: #F9C25B; --gh-gold-100: #FFF2D2; /* Theme */ --bg: #F6F1FF; --bg-elevated: #FFFFFF; --bg-card: #F4EFFE; --bg-tint: #EEE8FF; --bg-tint-pink: #FFE6F0; --border: #EAE3F9; --border-strong: #D8CDF2; --text: #23163F; --text-muted: #4F4370; --text-subtle: #5F5383; --text-inverse: #FFFFFF; --accent: #6A4BE6; --accent-text: #FFFFFF; --accent-on-dark: #FFD3E6; --action: #E8619F; --action-text: #23163F; /* Elevation: soft coloured glows instead of brown drop shadows */ --shadow-sm: 0 1px 2px rgba(64, 40, 150, 0.05), 0 6px 18px -8px rgba(98, 70, 220, 0.14); --shadow-md: 0 12px 30px -12px rgba(98, 70, 220, 0.24); --shadow-lg: 0 18px 48px -14px rgba(80, 52, 190, 0.28); --shadow-xl: 0 28px 70px -18px rgba(80, 52, 190, 0.34); --shadow-plum: 0 12px 28px -8px rgba(106, 75, 230, 0.50); --shadow-pink: 0 12px 28px -8px rgba(232, 97, 159, 0.45); /* Radii: generous and soft */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 26px; --r-2xl: 32px; /* Type */ --font-display: "Choclement", "Cormorant Garamond", "Playfair Display", Georgia, serif; --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; /* Bloom-only helpers */ --bloom-ink: #23163F; --bloom-violet: #6A4BE6; --bloom-violet-deep: #5236C9; --bloom-grad: linear-gradient(118deg, #6246DE 0%, #8A49D8 52%, #C4468B 100%); /* pink end deepened so white labels pass AA */ --bloom-grad-soft: linear-gradient(135deg, #6A4BE6 0%, #8F4FD6 100%); --bloom-grad-hero: radial-gradient(70% 90% at 100% 0%, rgba(255, 160, 205, 0.55) 0%, rgba(255, 160, 205, 0) 62%), radial-gradient(60% 80% at 0% 100%, rgba(126, 182, 255, 0.22) 0%, rgba(126, 182, 255, 0) 60%), linear-gradient(140deg, #6246DE 0%, #7647DA 55%, #5B37C4 100%); --bloom-glass: rgba(255, 255, 255, 0.62); --bloom-glass-strong: rgba(255, 255, 255, 0.82); --bloom-glass-border: rgba(255, 255, 255, 0.92); --bloom-blur: blur(18px) saturate(150%); --bloom-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 34px -16px rgba(98, 70, 220, 0.28), 0 2px 6px -2px rgba(98, 70, 220, 0.08); --bloom-mesh: radial-gradient(110% 55% at 0% 0%, rgba(197, 178, 255, 0.62) 0%, rgba(197, 178, 255, 0) 62%), radial-gradient(85% 45% at 100% 4%, rgba(255, 196, 223, 0.62) 0%, rgba(255, 196, 223, 0) 64%), radial-gradient(90% 45% at 100% 60%, rgba(214, 200, 255, 0.42) 0%, rgba(214, 200, 255, 0) 62%), radial-gradient(100% 50% at 0% 100%, rgba(255, 222, 204, 0.75) 0%, rgba(255, 222, 204, 0) 62%), radial-gradient(80% 40% at 100% 100%, rgba(255, 238, 200, 0.6) 0%, rgba(255, 238, 200, 0) 60%), linear-gradient(180deg, #F3EDFF 0%, #FAF4FC 48%, #FFF5EF 100%); } /* ---------------------------------------------------------------- 2. CANVAS ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] body, :root[data-gh-theme="bloom"] .device { background: var(--bg); } :root[data-gh-theme="bloom"] ::selection { background: #DCD2FF; color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .screen, :root[data-gh-theme="bloom"] .bestie-screen, :root[data-gh-theme="bloom"] .welcome, :root[data-gh-theme="bloom"] .auth-screen { background: var(--bloom-mesh); } :root[data-gh-theme="bloom"] .splash { background: radial-gradient(80% 55% at 50% 30%, rgba(255, 186, 216, 0.6), transparent 70%), radial-gradient(70% 50% at 50% 90%, rgba(150, 120, 255, 0.35), transparent 70%), linear-gradient(180deg, #F6F1FF 0%, #ECE4FF 100%); } @media (min-width: 900px) { :root[data-gh-theme="bloom"] .app-stage { background: linear-gradient(135deg, #F6F1FF 0%, #FBEFF7 55%, #FFF1E8 100%); } } /* ---------------------------------------------------------------- 3. TYPE ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] body { letter-spacing: -0.005em; } :root[data-gh-theme="bloom"] .today-greet, :root[data-gh-theme="bloom"] .onb-title, :root[data-gh-theme="bloom"] .premium-h1 { background: linear-gradient(100deg, #23163F 0%, #3A2380 60%, #5A3BD0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .today-greet { font-size: 28px; } :root[data-gh-theme="bloom"] .today-greet-sub { color: var(--text-muted); font-weight: 500; } :root[data-gh-theme="bloom"] .section-title, :root[data-gh-theme="bloom"] .top-bar-title, :root[data-gh-theme="bloom"] .cal-month-title, :root[data-gh-theme="bloom"] .you-name, :root[data-gh-theme="bloom"] .stat-tile-value, :root[data-gh-theme="bloom"] .health-stat-num, :root[data-gh-theme="bloom"] .predict-value { color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .section-title-row .see-all, :root[data-gh-theme="bloom"] .see-all { color: var(--bloom-violet); font-weight: 700; } :root[data-gh-theme="bloom"] .t-caption { color: var(--text-muted); } /* ---------------------------------------------------------------- 4. TOP BAR ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .top-bar-title { line-height: 1.05; text-wrap: balance; } :root[data-gh-theme="bloom"] .top-bar-back, :root[data-gh-theme="bloom"] .top-bar .top-bar-action { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -10px rgba(98, 70, 220, 0.35); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .top-bar .top-bar-action[data-route="you"] { background: transparent; } /* ---------------------------------------------------------------- 5. BUTTONS ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .btn { font-weight: 700; letter-spacing: 0.005em; } :root[data-gh-theme="bloom"] .btn-primary, :root[data-gh-theme="bloom"] .btn-rose { background: var(--bloom-grad); color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(40, 10, 90, 0.18), 0 12px 26px -10px rgba(106, 75, 230, 0.65), 0 6px 16px -8px rgba(207, 76, 147, 0.5); text-shadow: 0 1px 1px rgba(40, 14, 100, 0.25); } :root[data-gh-theme="bloom"] .btn-primary:hover:not(:disabled), :root[data-gh-theme="bloom"] .btn-rose:hover:not(:disabled) { background: var(--bloom-grad); filter: brightness(1.04) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 16px 32px -10px rgba(106, 75, 230, 0.7), 0 8px 20px -8px rgba(207, 76, 147, 0.55); } :root[data-gh-theme="bloom"] .btn-primary:disabled, :root[data-gh-theme="bloom"] .btn-rose:disabled { opacity: 1; background: linear-gradient(118deg, #E6DEFB 0%, #EEDDF5 52%, #F8E0EC 100%); color: #5F5383; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); text-shadow: none; } :root[data-gh-theme="bloom"] .btn-secondary { background: var(--bloom-glass-strong); color: var(--bloom-ink); border: 1px solid var(--bloom-glass-border); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(98, 70, 220, 0.4); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"] .btn-secondary:hover:not(:disabled) { background: #fff; } :root[data-gh-theme="bloom"] .btn-ghost { color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .btn-ghost:hover:not(:disabled) { background: rgba(106, 75, 230, 0.08); } :root[data-gh-theme="bloom"] .btn-cocoa { background: var(--bloom-ink); color: #fff; box-shadow: 0 12px 26px -12px rgba(35, 22, 63, 0.6); } /* ---------------------------------------------------------------- 6. GLASS SURFACES (cards, tiles, lists) ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .card, :root[data-gh-theme="bloom"] .stat-tile, :root[data-gh-theme="bloom"] .predict, :root[data-gh-theme="bloom"] .tip-card, :root[data-gh-theme="bloom"] .health-strip, :root[data-gh-theme="bloom"] .wear-card, :root[data-gh-theme="bloom"] .wear-tile, :root[data-gh-theme="bloom"] .you-list, :root[data-gh-theme="bloom"] .quiz-block, :root[data-gh-theme="bloom"] .product-card, :root[data-gh-theme="bloom"] .cal-sugg-card, :root[data-gh-theme="bloom"] .plan-card { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); border-radius: var(--r-xl); box-shadow: var(--bloom-card-shadow); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"] .card-tinted { background: radial-gradient(120% 140% at 0% 0%, rgba(220, 208, 255, 0.95) 0%, rgba(220, 208, 255, 0) 60%), radial-gradient(120% 140% at 100% 100%, rgba(255, 220, 236, 0.9) 0%, rgba(255, 220, 236, 0) 60%), rgba(255, 255, 255, 0.55); border-color: var(--bloom-glass-border); } :root[data-gh-theme="bloom"] .card-clickable:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 18px 38px -16px rgba(98, 70, 220, 0.36); } :root[data-gh-theme="bloom"] .card-clickable.is-selected { border-color: var(--bloom-violet); background: radial-gradient(120% 160% at 0% 0%, rgba(236, 230, 255, 0.95), rgba(255, 255, 255, 0.85) 70%); box-shadow: 0 0 0 3px rgba(106, 75, 230, 0.14), 0 16px 34px -16px rgba(106, 75, 230, 0.5); } :root[data-gh-theme="bloom"] .divider { background: rgba(106, 75, 230, 0.1); } /* Phase tagline card on Today: phase-tinted glass */ :root[data-gh-theme="bloom"] .card-tinted[style*="--gh-follicular-soft"] { background: radial-gradient(90% 140% at 0% 0%, #CDF2E2 0%, rgba(205, 242, 226, 0) 70%), radial-gradient(90% 140% at 100% 100%, #E4F7FF 0%, rgba(228, 247, 255, 0) 70%), rgba(255, 255, 255, 0.6) !important; } :root[data-gh-theme="bloom"] .card-tinted[style*="--gh-menstrual-soft"] { background: radial-gradient(90% 140% at 0% 0%, #FFD3E3 0%, rgba(255, 211, 227, 0) 70%), radial-gradient(90% 140% at 100% 100%, #FFE6DA 0%, rgba(255, 230, 218, 0) 70%), rgba(255, 255, 255, 0.6) !important; } :root[data-gh-theme="bloom"] .card-tinted[style*="--gh-ovulation-soft"] { background: radial-gradient(90% 140% at 0% 0%, #FFEAB8 0%, rgba(255, 234, 184, 0) 70%), radial-gradient(90% 140% at 100% 100%, #FFE0EC 0%, rgba(255, 224, 236, 0) 70%), rgba(255, 255, 255, 0.6) !important; } :root[data-gh-theme="bloom"] .card-tinted[style*="--gh-luteal-soft"] { background: radial-gradient(90% 140% at 0% 0%, #DED3FF 0%, rgba(222, 211, 255, 0) 70%), radial-gradient(90% 140% at 100% 100%, #FFE0EE 0%, rgba(255, 224, 238, 0) 70%), rgba(255, 255, 255, 0.6) !important; } /* ---------------------------------------------------------------- 7. CHIPS, PILLS, INPUTS, CONTROLS ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .chip { background: var(--bloom-glass-strong); border: 1px solid rgba(106, 75, 230, 0.14); color: var(--bloom-ink); font-weight: 600; box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(98, 70, 220, 0.35); } @media (hover: hover) { :root[data-gh-theme="bloom"] .chip:hover { background: #fff; } } :root[data-gh-theme="bloom"] .chip.is-selected, :root[data-gh-theme="bloom"] .chip.is-active { background: var(--bloom-grad-soft); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px -8px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"] .chip.chip-danger { color: #B8304E; border-color: #F6CCD6; background: rgba(255, 255, 255, 0.6); } :root[data-gh-theme="bloom"] .pill { background: rgba(255, 255, 255, 0.7); color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .pill-plum { background: #ECE6FF; color: #5236C9; } :root[data-gh-theme="bloom"] .pill-luteal { background: #ECE5FF; color: #5236C9; } :root[data-gh-theme="bloom"] .pill-sage, :root[data-gh-theme="bloom"] .pill-follicular{ background: #DDF6EC; color: #1F6E50; } :root[data-gh-theme="bloom"] .pill-menstrual, :root[data-gh-theme="bloom"] .pill-rose { background: #FFE1EC; color: #A3275A; } :root[data-gh-theme="bloom"] .pill-ovulation, :root[data-gh-theme="bloom"] .pill-gold { background: #FFF2D2; color: #8A5A0C; } :root[data-gh-theme="bloom"] .input, :root[data-gh-theme="bloom"] .textarea, :root[data-gh-theme="bloom"] .select { background: rgba(255, 255, 255, 0.8); border: 1.5px solid #E3DAF8; border-radius: 18px; color: var(--bloom-ink); box-shadow: inset 0 1px 2px rgba(98, 70, 220, 0.05); } :root[data-gh-theme="bloom"] .input::placeholder, :root[data-gh-theme="bloom"] .textarea::placeholder { color: var(--text-subtle); } :root[data-gh-theme="bloom"] .input:focus, :root[data-gh-theme="bloom"] .textarea:focus, :root[data-gh-theme="bloom"] .select:focus { border-color: #8E6CF0; background: #fff; box-shadow: 0 0 0 4px rgba(122, 92, 240, 0.16); } :root[data-gh-theme="bloom"] .field-label { color: var(--text-muted); } :root[data-gh-theme="bloom"] .switch { background: #E3DAF8; } :root[data-gh-theme="bloom"] .switch.is-on { background: var(--bloom-grad-soft); } :root[data-gh-theme="bloom"] .switch::after { box-shadow: 0 2px 8px rgba(80, 52, 190, 0.25); } :root[data-gh-theme="bloom"] .progress-bar, :root[data-gh-theme="bloom"] .confidence-bar, :root[data-gh-theme="bloom"] .predict-bar { background: rgba(106, 75, 230, 0.12); } :root[data-gh-theme="bloom"] .progress-bar-fill, :root[data-gh-theme="bloom"] .confidence-bar-fill { background: linear-gradient(90deg, #8E6CF0 0%, #E8619F 100%); box-shadow: 0 0 10px rgba(232, 97, 159, 0.35); } :root[data-gh-theme="bloom"] .unit-pill.is-active { background: var(--bloom-grad-soft); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"] .avatar { background: linear-gradient(135deg, #E6DDFF 0%, #FFE0EE 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 16px -8px rgba(106, 75, 230, 0.45); } :root[data-gh-theme="bloom"] .avatar-wrap .avatar-edit-badge { background: var(--bloom-grad-soft); border-color: #fff; } :root[data-gh-theme="bloom"] .row-icon { background: linear-gradient(135deg, #F0EAFF 0%, #FFEAF2 100%); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); } :root[data-gh-theme="bloom"] .row-subtitle, :root[data-gh-theme="bloom"] .row-trail { color: var(--text-muted); } :root[data-gh-theme="bloom"] .row + .row { border-top-color: rgba(106, 75, 230, 0.1); } /* Brand mark: violet to blush */ :root[data-gh-theme="bloom"] linearGradient[id^="bm-"] stop:nth-of-type(1) { stop-color: #F08CBC; } :root[data-gh-theme="bloom"] linearGradient[id^="bm-"] stop:nth-of-type(2) { stop-color: #8E6CF0; } :root[data-gh-theme="bloom"] linearGradient[id^="bm-"] stop:nth-of-type(3) { stop-color: #5236C9; } /* ---------------------------------------------------------------- 8. TAB BAR: floating frosted pill + glowing Log orb ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .tab-bar { left: 14px; right: 14px; bottom: 16px; height: 68px; padding: 4px 6px; border-radius: 34px; background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: inset 0 1px 0 #fff, 0 22px 44px -16px rgba(80, 52, 190, 0.42), 0 4px 12px -4px rgba(80, 52, 190, 0.12); } :root[data-gh-theme="bloom"] .tab { color: var(--gh-cocoa-300); font-weight: 600; } :root[data-gh-theme="bloom"] .tab.is-active { color: var(--bloom-violet-deep); font-weight: 700; } :root[data-gh-theme="bloom"] .tab.is-active .tab-icon { color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .tab-indicator { background: linear-gradient(135deg, #E9E1FF 0%, #FFE2EF 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 6px 14px -8px rgba(106, 75, 230, 0.5); } :root[data-gh-theme="bloom"] .tab.is-fab .tab-icon { background: radial-gradient(80% 80% at 30% 20%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%), linear-gradient(140deg, #6A4BE6 0%, #9A4CD6 55%, #E2609F 100%); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 14px 30px -6px rgba(106, 75, 230, 0.6), 0 8px 22px -6px rgba(232, 97, 159, 0.5); animation: bloom-fab-glow 4s ease-in-out infinite; } :root[data-gh-theme="bloom"] .tab.is-fab .tab-icon::after { background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%); } :root[data-gh-theme="bloom"] .tab.is-fab span:not(.tab-icon) { color: var(--bloom-violet-deep); font-weight: 700; } /* Soft fade under the floating bar so scrolled content melts into the canvas */ :root[data-gh-theme="bloom"] .device:has(> .tab-bar:not([hidden])) > #screen-mount::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; background: linear-gradient(180deg, rgba(255, 245, 240, 0) 0%, rgba(255, 244, 240, 0.8) 55%, rgba(255, 244, 240, 0.94) 100%); pointer-events: none; z-index: 19; } @keyframes bloom-fab-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 14px 30px -6px rgba(106, 75, 230, 0.6), 0 8px 22px -6px rgba(232, 97, 159, 0.5); } 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 16px 38px -6px rgba(106, 75, 230, 0.7), 0 10px 28px -4px rgba(232, 97, 159, 0.6); } } /* ---------------------------------------------------------------- 9. PHASE RING (Today hero) ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .phase-ring::before { content: ""; position: absolute; inset: -4%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0) 48%, rgba(186, 160, 255, 0.42) 60%, rgba(255, 176, 214, 0.32) 70%, rgba(255, 210, 190, 0) 80%); filter: blur(10px); pointer-events: none; } :root[data-gh-theme="bloom"] .phase-ring svg { filter: drop-shadow(0 12px 28px rgba(122, 92, 240, 0.26)); } :root[data-gh-theme="bloom"] .phase-ring-track { stroke: rgba(255, 255, 255, 0.85); } :root[data-gh-theme="bloom"] .phase-ring-prog { filter: drop-shadow(0 0 8px rgba(255, 140, 192, 0.55)) drop-shadow(0 6px 12px rgba(122, 92, 240, 0.4)); } :root[data-gh-theme="bloom"] #gh-ring-grad stop:nth-of-type(1) { stop-color: #FF8CC0; } :root[data-gh-theme="bloom"] #gh-ring-grad stop:nth-of-type(2) { stop-color: #A98BFF; } :root[data-gh-theme="bloom"] #gh-ring-grad stop:nth-of-type(3) { stop-color: #6246DE; } :root[data-gh-theme="bloom"] .phase-ring-glass { background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.72) 55%, rgba(246, 240, 255, 0.7) 100%); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 #fff, inset 0 -14px 30px rgba(186, 160, 255, 0.2), 0 20px 44px -12px rgba(106, 75, 230, 0.28); } :root[data-gh-theme="bloom"] .phase-ring-bead i { background: linear-gradient(140deg, #FF8FC0 0%, #7B5CF0 100%); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 0 18px 4px rgba(240, 111, 168, 0.55); animation: bloom-bead 2.8s ease-in-out infinite; } @keyframes bloom-bead { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 0 14px 3px rgba(240, 111, 168, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5), 0 0 24px 8px rgba(240, 111, 168, 0.7); } } :root[data-gh-theme="bloom"] .phase-ring-day { background: linear-gradient(180deg, #2B1A55 0%, #5A3BD0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .phase-ring-status { color: var(--text-muted); font-weight: 600; } /* Phase label colours are inline: retune them for AA on the glass disc */ :root[data-gh-theme="bloom"] .phase-ring-label[style*="#A6477A"] { color: #B32B63 !important; } :root[data-gh-theme="bloom"] .phase-ring-label[style*="#7C9A78"] { color: #1F7A57 !important; } :root[data-gh-theme="bloom"] .phase-ring-label[style*="#C9912F"] { color: #93600D !important; } :root[data-gh-theme="bloom"] .phase-ring-label[style*="#6B4C9A"] { color: #5236C9 !important; } /* ---------------------------------------------------------------- 10. TODAY ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .qa { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); border-radius: 22px; color: var(--text-muted); box-shadow: var(--bloom-card-shadow); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"] .qa.is-logged { background: linear-gradient(150deg, rgba(232, 224, 255, 0.95) 0%, rgba(255, 228, 240, 0.9) 100%); border-color: rgba(106, 75, 230, 0.55); color: var(--bloom-violet-deep); box-shadow: 0 0 0 3px rgba(106, 75, 230, 0.1), 0 12px 26px -14px rgba(106, 75, 230, 0.55); } :root[data-gh-theme="bloom"] .bestie-card { background: radial-gradient(70% 90% at 100% 0%, rgba(255, 160, 205, 0.55) 0%, rgba(255, 160, 205, 0) 62%), radial-gradient(60% 80% at 0% 100%, rgba(126, 182, 255, 0.22) 0%, rgba(126, 182, 255, 0) 60%), linear-gradient(140deg, #6246DE 0%, #7647DA 55%, #5B37C4 100%); background-size: 160% 160%, 100% 100%, 100% 100%; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 22px 44px -18px rgba(98, 70, 220, 0.65), 0 10px 24px -14px rgba(232, 97, 159, 0.5); } :root[data-gh-theme="bloom"] .bestie-card::before { background: radial-gradient(circle, rgba(255, 196, 224, 0.5), transparent 70%); } :root[data-gh-theme="bloom"] .bestie-card-label { opacity: 0.92; } :root[data-gh-theme="bloom"] .bestie-card-cta { background: rgba(36, 14, 104, 0.22); border: 1px solid rgba(255, 255, 255, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :root[data-gh-theme="bloom"] .bestie-inline { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); color: var(--bloom-violet-deep); font-weight: 600; box-shadow: var(--bloom-card-shadow); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"] .bestie-inline:hover { background: rgba(255, 255, 255, 0.85); } :root[data-gh-theme="bloom"] .bestie-inline-dot { background: linear-gradient(135deg, #8E6CF0, #E8619F); box-shadow: 0 0 0 4px rgba(142, 108, 240, 0.18), 0 0 10px rgba(232, 97, 159, 0.5); } :root[data-gh-theme="bloom"] .bestie-inline-arrow { color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .health-stat + .health-stat, :root[data-gh-theme="bloom"] .wear-stat + .wear-stat { border-left-color: rgba(106, 75, 230, 0.12); } :root[data-gh-theme="bloom"] .health-stat-label, :root[data-gh-theme="bloom"] .predict-label, :root[data-gh-theme="bloom"] .stat-tile-label, :root[data-gh-theme="bloom"] .wear-stat-lbl { color: var(--text-muted); } :root[data-gh-theme="bloom"] .predict-bar-fill[style*="--gh-cocoa-500"] { background: linear-gradient(90deg, #FFC49A, #F2876B) !important; } :root[data-gh-theme="bloom"] .predict-bar-fill[style*="--gh-follicular"] { background: linear-gradient(90deg, #8EE3C2, #3FBF92) !important; } :root[data-gh-theme="bloom"] .predict-bar-fill[style*="--gh-pink-500"] { background: linear-gradient(90deg, #FFB0D0, #E8619F) !important; } :root[data-gh-theme="bloom"] .predict-bar-fill[style*="--gh-menstrual"] { background: linear-gradient(90deg, #F58DB2, #CC3A72) !important; } :root[data-gh-theme="bloom"] .tip-card-emoji { background: linear-gradient(135deg, #EDE6FF 0%, #FFE6F0 100%); border-radius: 18px; } :root[data-gh-theme="bloom"] .tip-card-body, :root[data-gh-theme="bloom"] .predict-foot, :root[data-gh-theme="bloom"] .stat-tile-foot { color: var(--text-muted); } /* Girl Chocolate cards: keep them dark-luxe but in the Bloom family */ :root[data-gh-theme="bloom"] .choc-card, :root[data-gh-theme="bloom"] .choc-strip, :root[data-gh-theme="bloom"] .shop-hero, :root[data-gh-theme="bloom"] .bday-gift { background: radial-gradient(80% 100% at 100% 0%, rgba(255, 160, 205, 0.45), transparent 60%), linear-gradient(140deg, #5B40D8 0%, #3B2486 100%); color: #fff; box-shadow: 0 18px 40px -18px rgba(80, 52, 190, 0.7); } :root[data-gh-theme="bloom"] .choc-card { border-radius: 28px; } :root[data-gh-theme="bloom"] .choc-pill { background: var(--bloom-grad); box-shadow: 0 8px 20px -8px rgba(232, 97, 159, 0.6); } :root[data-gh-theme="bloom"] .choc-card > div[style*="pink-300"] { color: #FFD6E8 !important; } :root[data-gh-theme="bloom"] .choc-eyebrow, :root[data-gh-theme="bloom"] .choc-strip-eyebrow, :root[data-gh-theme="bloom"] .choc-strip-cta { color: #FFD3E6; } /* ---------------------------------------------------------------- 11. CALENDAR ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .cal-hero { background: var(--bloom-grad-hero); border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 24px 48px -20px rgba(98, 70, 220, 0.7), 0 10px 26px -16px rgba(232, 97, 159, 0.5); } :root[data-gh-theme="bloom"] .cal-hero-eyebrow { opacity: 0.92; } :root[data-gh-theme="bloom"] .cal-hero-day { opacity: 0.95; } :root[data-gh-theme="bloom"] .cal-hero-insight { background: rgba(36, 14, 104, 0.2); border: 1px solid rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); border-radius: 20px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } :root[data-gh-theme="bloom"] .cal-hero-seg span { background: rgba(255, 255, 255, 0.26); } :root[data-gh-theme="bloom"] .cal-hero-seg span.on { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); } :root[data-gh-theme="bloom"] .cal-hero-cta { color: var(--bloom-violet-deep); } :root[data-gh-theme="bloom"] .cal-flowbar { height: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 10px 22px -12px rgba(98, 70, 220, 0.45); } :root[data-gh-theme="bloom"] .cal-flowbar i + i { box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.9); } :root[data-gh-theme="bloom"] .cal-flowbar i[style*="--gh-menstrual"] { background: linear-gradient(90deg, #E2558B, #F28DB4) !important; } :root[data-gh-theme="bloom"] .cal-flowbar i[style*="--gh-follicular"] { background: linear-gradient(90deg, #7EDDB8, #A9EBD0) !important; } :root[data-gh-theme="bloom"] .cal-flowbar i[style*="--gh-ovulation"] { background: linear-gradient(90deg, #FFD27A, #FFE3A6) !important; } :root[data-gh-theme="bloom"] .cal-flowbar i[style*="--gh-luteal"] { background: linear-gradient(90deg, #9F82F6, #C7B5FF) !important; } :root[data-gh-theme="bloom"] .cal-todaypin { background: #fff; width: 4px; box-shadow: 0 0 0 2px rgba(106, 75, 230, 0.85), 0 4px 10px rgba(80, 52, 190, 0.35); } :root[data-gh-theme="bloom"] .cal-todaypin::after { background: #fff; border-color: var(--bloom-violet); box-shadow: 0 0 10px rgba(232, 97, 159, 0.6); } :root[data-gh-theme="bloom"] .cal-flowlabels { color: var(--text-subtle); font-weight: 600; } :root[data-gh-theme="bloom"] .cal-step:not(:last-child)::before { background: linear-gradient(180deg, rgba(142, 108, 240, 0.4), rgba(232, 97, 159, 0.25)); } :root[data-gh-theme="bloom"] .cal-dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 6px 14px -6px rgba(98, 70, 220, 0.45); } :root[data-gh-theme="bloom"] .cal-step-name { color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .cal-step.is-done .cal-step-name, :root[data-gh-theme="bloom"] .cal-step.is-done .cal-step-when { color: var(--text-subtle); } :root[data-gh-theme="bloom"] .cal-step-when { color: var(--text-muted); } :root[data-gh-theme="bloom"] .cal-badge-now { background: var(--bloom-grad-soft); color: #fff; padding: 3px 8px; box-shadow: 0 4px 10px -4px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"] .cal-step-desc, :root[data-gh-theme="bloom"] .cal-empty-prompt, :root[data-gh-theme="bloom"] .cal-viewmonth { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); border-radius: 20px; color: var(--text-muted); box-shadow: var(--bloom-card-shadow); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"] .cal-viewmonth { border-radius: 22px; } :root[data-gh-theme="bloom"] .cal-viewmonth.is-open { background: rgba(246, 242, 255, 0.85); border-color: #C9B9FA; } :root[data-gh-theme="bloom"] .cal-vm-chev { background: linear-gradient(135deg, #EDE6FF, #FFE6F0); color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .cal-dow { color: var(--text-subtle); } :root[data-gh-theme="bloom"] .cal-day:hover { background: rgba(106, 75, 230, 0.08); } :root[data-gh-theme="bloom"] .cal-day.is-period { background: linear-gradient(140deg, #E2558B, #C93A70); color: #fff; box-shadow: 0 4px 10px -4px rgba(204, 58, 114, 0.6); } :root[data-gh-theme="bloom"] .cal-day.is-predicted-period { border-color: #D24C80; color: #B32B63; } :root[data-gh-theme="bloom"] .cal-day.is-fertile { background: #DDF6EC; color: #1F5E46; } :root[data-gh-theme="bloom"] .cal-day.is-ovulation { background: #FFF2D2; color: #6F470A; box-shadow: inset 0 0 0 1.5px #F9C25B; } :root[data-gh-theme="bloom"] .cal-day.is-today.is-today { background: var(--bloom-grad-soft); color: #fff; box-shadow: 0 6px 14px -4px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"] .cal-day.is-selected { outline-color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .cal-day-dot { background: #E8619F; } :root[data-gh-theme="bloom"] .cal-sugg-kicker { color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .cal-sugg-meta { color: var(--text-muted); } :root[data-gh-theme="bloom"] .cal-insight-tile { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 222, 236, 0.95), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(222, 211, 255, 0.95), transparent 60%), rgba(255, 255, 255, 0.6); border: 1px solid var(--bloom-glass-border); border-radius: 26px; box-shadow: var(--bloom-card-shadow); } :root[data-gh-theme="bloom"] .cal-insight-kicker { color: var(--bloom-violet-deep); } :root[data-gh-theme="bloom"] .cal-insight-link { color: var(--bloom-violet-deep); } /* ---------------------------------------------------------------- 12. INSIGHTS ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .stat-tile-unit { color: var(--text-muted); } :root[data-gh-theme="bloom"] .bar-chart-bar { background: linear-gradient(180deg, #8E6CF0 0%, #F29BC2 100%); border-radius: 10px; } :root[data-gh-theme="bloom"] .bar-chart-lbl, :root[data-gh-theme="bloom"] .yoy-year { color: var(--text-subtle); } :root[data-gh-theme="bloom"] .yoy-bars { background: rgba(106, 75, 230, 0.08); } /* ---------------------------------------------------------------- 13. BESTIE CHAT ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .bestie-screen { background: radial-gradient(90% 40% at 0% 0%, rgba(197, 178, 255, 0.55), transparent 65%), radial-gradient(80% 40% at 100% 30%, rgba(255, 200, 225, 0.5), transparent 65%), radial-gradient(100% 45% at 50% 100%, rgba(255, 224, 206, 0.7), transparent 65%), linear-gradient(180deg, #F3EDFF 0%, #F9F1FC 55%, #FFF4EE 100%); } :root[data-gh-theme="bloom"] .bestie-header { background: rgba(255, 255, 255, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 10px 30px -22px rgba(80, 52, 190, 0.5); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); } :root[data-gh-theme="bloom"] .bestie-header .top-bar-action { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .bestie-avatar-cute { background: radial-gradient(circle at 30% 28%, #FFE3EF 0%, #F9B8D3 48%, #A98BFF 100%); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 8px 20px -6px rgba(232, 97, 159, 0.55); } :root[data-gh-theme="bloom"] .bestie-avatar::after { background: #34A57B; } :root[data-gh-theme="bloom"] .bestie-name { color: var(--bloom-ink); font-weight: 700; } :root[data-gh-theme="bloom"] .bestie-status { color: #1C7550; font-weight: 600; } :root[data-gh-theme="bloom"] .bubble { border-radius: 24px; font-size: 14.5px; } :root[data-gh-theme="bloom"] .bubble-them { background: rgba(255, 255, 255, 0.82); color: var(--bloom-ink); border: 1px solid rgba(255, 255, 255, 0.95); border-bottom-left-radius: 8px; box-shadow: inset 0 1px 0 #fff, 0 12px 28px -16px rgba(80, 52, 190, 0.35); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"] .bubble-me { background: var(--bloom-grad-soft); color: #fff; border-bottom-right-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 28px -14px rgba(106, 75, 230, 0.7); } :root[data-gh-theme="bloom"] .bubble-time { color: var(--text-subtle); } :root[data-gh-theme="bloom"] .bubble-them .cite { background: #ECE6FF; color: #5236C9; } :root[data-gh-theme="bloom"] .bubble-them a { color: #5236C9; border-bottom-color: #5236C9; } :root[data-gh-theme="bloom"] .bestie-quick-chip { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95); color: #5236C9; font-weight: 700; box-shadow: inset 0 1px 0 #fff, 0 8px 20px -12px rgba(80, 52, 190, 0.45); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"] .bestie-quick-chip:hover { background: #fff; border-color: #C9B9FA; } :root[data-gh-theme="bloom"] .chat-input { background: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 -12px 30px -24px rgba(80, 52, 190, 0.5); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } :root[data-gh-theme="bloom"] .chat-input input { background: rgba(255, 255, 255, 0.9); border: 1.5px solid #E3DAF8; color: var(--bloom-ink); box-shadow: inset 0 1px 2px rgba(98, 70, 220, 0.06); } :root[data-gh-theme="bloom"] .chat-input input::placeholder { color: var(--text-subtle); } :root[data-gh-theme="bloom"] .chat-input input:focus { border-color: #8E6CF0; box-shadow: 0 0 0 4px rgba(122, 92, 240, 0.14); } :root[data-gh-theme="bloom"] .chat-mic { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 8px 18px -10px rgba(80, 52, 190, 0.4); } :root[data-gh-theme="bloom"] .chat-mic.is-listening { background: var(--bloom-grad-soft); } :root[data-gh-theme="bloom"] .chat-send { background: linear-gradient(140deg, #6A4BE6 0%, #9A4CD6 60%, #E2609F 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px -8px rgba(106, 75, 230, 0.65); } :root[data-gh-theme="bloom"] .breath-orb { background: radial-gradient(circle at 30% 30%, #FFD0E3, #A98BFF 60%, #6A4BE6); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 50px -10px rgba(106, 75, 230, 0.6); } /* ---------------------------------------------------------------- 14. YOU ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .you-hero { background: radial-gradient(70% 70% at 50% 18%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%); } :root[data-gh-theme="bloom"] .you-hero .avatar { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(169, 150, 247, 0.35), 0 20px 40px -14px rgba(106, 75, 230, 0.55); } :root[data-gh-theme="bloom"] .you-sub { color: var(--text-muted); font-weight: 500; } :root[data-gh-theme="bloom"] .you-section-title { color: var(--text-subtle); letter-spacing: 0.12em; } :root[data-gh-theme="bloom"] .you-list { padding: 0 var(--s-4); } :root[data-gh-theme="bloom"] .you-list .row { border-radius: 0; } :root[data-gh-theme="bloom"] .coming-soon-pill { background: #ECE6FF; color: #5236C9; } /* "Try Premium" card: inline violet-to-pink gradient, deepened for white text */ :root[data-gh-theme="bloom"] .card[style*="var(--gh-plum-500), var(--gh-pink-500)"] { background: radial-gradient(70% 120% at 100% 100%, rgba(255, 150, 200, 0.55) 0%, rgba(255, 150, 200, 0) 65%), radial-gradient(60% 100% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(120deg, #5F43DC 0%, #7A47D8 55%, #9A48C6 100%) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 22px 40px -18px rgba(106, 75, 230, 0.75), 0 10px 24px -14px rgba(232, 97, 159, 0.55); } /* ---------------------------------------------------------------- 15. SHEETS + LOG ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .sheet-backdrop { background: rgba(46, 26, 96, 0.3); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); } :root[data-gh-theme="bloom"] .sheet { /* Tint stays in the top 96px: horizontally scrolling rows below (log tabs) are composited on the flat base colour, so a tint behind them would seam. */ background: linear-gradient(180deg, rgba(252, 250, 255, 0) 0px, #FCFAFF 96px), linear-gradient(100deg, #EEE6FF 0%, #F8EEFB 55%, #FFE9F1 100%); border-top: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 -24px 60px -20px rgba(46, 26, 96, 0.4); } :root[data-gh-theme="bloom"] .sheet-handle { background: #D5CAEF; width: 44px; } :root[data-gh-theme="bloom"] .log-tab { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(106, 75, 230, 0.12); color: var(--text-muted); box-shadow: inset 0 1px 0 #fff; } :root[data-gh-theme="bloom"] .log-tab.is-active { background: var(--bloom-grad-soft); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 12px -6px rgba(106, 75, 230, 0.7); } :root[data-gh-theme="bloom"] .log-tabs { padding-left: 2px; padding-right: 2px; } :root[data-gh-theme="bloom"] .log-section-title { color: var(--bloom-ink); } :root[data-gh-theme="bloom"] .log-foot { background: linear-gradient(180deg, rgba(252, 250, 255, 0) 0%, #FCFAFF 30%); } :root[data-gh-theme="bloom"] .flow-opt, :root[data-gh-theme="bloom"] .mood-opt { background: #fff; border: 1.5px solid #EDE6FB; border-radius: 20px; color: var(--text-muted); box-shadow: 0 8px 20px -14px rgba(80, 52, 190, 0.4); } :root[data-gh-theme="bloom"] .flow-opt.is-selected { background: linear-gradient(160deg, #FFE7F0 0%, #FFD6E5 100%); border-color: #CC3A72; color: #A3275A; box-shadow: 0 0 0 3px rgba(204, 58, 114, 0.12), 0 12px 22px -12px rgba(204, 58, 114, 0.6); } :root[data-gh-theme="bloom"] .mood-opt.is-selected { background: linear-gradient(160deg, #F1ECFF 0%, #E6DDFF 100%); border-color: var(--bloom-violet); color: var(--bloom-violet-deep); box-shadow: 0 0 0 3px rgba(106, 75, 230, 0.12), 0 12px 22px -12px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"] .timer-tile { background: #fff; border: 1.5px solid #EDE6FB; box-shadow: 0 10px 24px -16px rgba(80, 52, 190, 0.4); } :root[data-gh-theme="bloom"] .timer-tile.is-running { border-color: var(--bloom-violet); background: linear-gradient(160deg, #F6F2FF, #FFF0F6); } :root[data-gh-theme="bloom"] .timer-action { color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .timer-sub { color: var(--text-muted); } :root[data-gh-theme="bloom"] .pinned-section { background: linear-gradient(150deg, #F3EEFF 0%, #FFF0F6 100%); border: 1px solid #fff; box-shadow: 0 10px 24px -16px rgba(80, 52, 190, 0.4); } :root[data-gh-theme="bloom"] .pinned-section .log-section-title { color: var(--bloom-violet-deep); } :root[data-gh-theme="bloom"] .sheet .chip:not(.is-selected) { background: #fff; } :root[data-gh-theme="bloom"] #log-multi { color: var(--bloom-violet) !important; } /* ---------------------------------------------------------------- 16. PREMIUM / PAYWALL ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .card-tinted[style*="var(--gh-plum-500), var(--gh-plum-900)"] { background: radial-gradient(60% 55% at 50% 0%, rgba(255, 176, 214, 0.55) 0%, rgba(255, 176, 214, 0) 100%), radial-gradient(70% 80% at 0% 100%, rgba(120, 170, 255, 0.25) 0%, rgba(120, 170, 255, 0) 70%), radial-gradient(70% 80% at 100% 100%, rgba(255, 150, 200, 0.35) 0%, rgba(255, 150, 200, 0) 70%), linear-gradient(160deg, #6A4BE6 0%, #5B3AD0 60%, #4A2DB0 100%) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 26px 50px -22px rgba(80, 52, 190, 0.8), 0 10px 26px -16px rgba(232, 97, 159, 0.55); } :root[data-gh-theme="bloom"] .paywall-plan.is-recommended { border: 1.5px solid var(--bloom-violet); box-shadow: 0 0 0 4px rgba(106, 75, 230, 0.12), 0 18px 36px -18px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"] .premium-hero { background: radial-gradient(circle at 50% 0%, rgba(220, 208, 255, 0.9), transparent 70%); } :root[data-gh-theme="bloom"] .premium-badge { background: var(--bloom-grad); } :root[data-gh-theme="bloom"] .premium-feature-icon { background: linear-gradient(135deg, #EDE6FF, #FFE6F0); } :root[data-gh-theme="bloom"] .plan-card.is-selected { border-color: var(--bloom-violet); background: linear-gradient(160deg, rgba(246, 242, 255, 0.95), rgba(255, 240, 246, 0.9)); } :root[data-gh-theme="bloom"] .plan-card-tag { background: var(--bloom-grad); } /* ---------------------------------------------------------------- 17. ONBOARDING ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .onb-progress { height: 6px; background: rgba(106, 75, 230, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); } :root[data-gh-theme="bloom"] .onb-progress-fill { background: linear-gradient(90deg, #8E6CF0 0%, #E8619F 100%); box-shadow: 0 0 12px rgba(232, 97, 159, 0.5); } :root[data-gh-theme="bloom"] .onb-step { color: var(--text-subtle); font-weight: 700; } :root[data-gh-theme="bloom"] .onb-sub { color: var(--text-muted); } :root[data-gh-theme="bloom"] .onb-head .top-bar-action { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -10px rgba(98, 70, 220, 0.35); } :root[data-gh-theme="bloom"] .onb-foot { position: relative; background: transparent; box-shadow: none; } :root[data-gh-theme="bloom"] .onb-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; background: linear-gradient(180deg, rgba(255, 244, 240, 0) 0%, rgba(255, 244, 240, 0.85) 100%); pointer-events: none; } :root[data-gh-theme="bloom"] .onb-skip-pill { background: var(--bloom-glass-strong); border-color: var(--bloom-glass-border); } :root[data-gh-theme="bloom"] .onb .card-clickable { border-radius: 24px; } @media (hover: none) { :root[data-gh-theme="bloom"] .onb .card-clickable:hover { background: var(--bloom-glass); } } :root[data-gh-theme="bloom"] .welcome-title, :root[data-gh-theme="bloom"] .splash-logo { color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .welcome-dot { background: #D5CAEF; } :root[data-gh-theme="bloom"] .welcome-dot.is-active { background: var(--bloom-grad-soft); } /* ---------------------------------------------------------------- 18. PMDD CHECK-IN (DRSP) ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .drsp-domain { color: var(--text-subtle); letter-spacing: 0.1em; } :root[data-gh-theme="bloom"] .drsp-day { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); border-radius: 18px; color: var(--text-muted); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(80, 52, 190, 0.4); } :root[data-gh-theme="bloom"] .drsp-day.is-active { background: var(--bloom-grad-soft); border-color: transparent; color: #fff; box-shadow: 0 12px 22px -10px rgba(106, 75, 230, 0.7); } :root[data-gh-theme="bloom"] .drsp-day-dot { border-color: #C9BCEB; } :root[data-gh-theme="bloom"] .drsp-dot { background: rgba(255, 255, 255, 0.9); border: 1.5px solid #E3DAF8; border-radius: 14px; color: var(--text-muted); } :root[data-gh-theme="bloom"] .drsp-dot.is-under { background: #ECE6FF; border-color: #ECE6FF; color: #5236C9; } :root[data-gh-theme="bloom"] .drsp-dot.is-on { background: var(--bloom-grad-soft); border-color: transparent; color: #fff; box-shadow: 0 8px 16px -6px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"] .drsp-val { color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .drsp-num { color: var(--text-subtle); } :root[data-gh-theme="bloom"] .drsp-item + .drsp-item { border-top-color: rgba(106, 75, 230, 0.1); } :root[data-gh-theme="bloom"] .drsp-scale { color: var(--text-muted); } /* ---------------------------------------------------------------- 19. TOAST + MISC ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .toast { background: rgba(35, 22, 63, 0.88); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; box-shadow: 0 18px 40px -14px rgba(35, 22, 63, 0.6); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } :root[data-gh-theme="bloom"] .spinner { border-color: #E3DAF8; border-top-color: var(--bloom-violet); } :root[data-gh-theme="bloom"] .empty { color: var(--text-muted); } :root[data-gh-theme="bloom"] .bday-overlay { background: rgba(46, 26, 96, 0.45); } :root[data-gh-theme="bloom"] .bday-card { background: radial-gradient(120% 80% at 100% 0%, rgba(255, 186, 216, 0.6), transparent 60%), linear-gradient(160deg, #FBF8FF 0%, #ECE4FF 100%); } :root[data-gh-theme="bloom"] .article-cover { background: linear-gradient(135deg, #6A4BE6, #E8619F); } /* ---------------------------------------------------------------- 20. COMPLETE PROFILE ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"] .row-trail span[aria-label="Answered"] { background: #DDF6EC !important; color: #1F7A57 !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8); } /* Inline progress fills (profile card, symptom patterns, locked insights) */ :root[data-gh-theme="bloom"] div[style*="height:100%"][style*="background: var(--gh-plum-500)"] { background: linear-gradient(90deg, #8E6CF0 0%, #E8619F 100%) !important; } /* You has no top bar: fade content out before it reaches the status bar. The mask is on the scroller box, so at rest (hero padding) nothing changes. */ :root[data-gh-theme="bloom"] .screen.is-active .scroll:has(> .you-hero) { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 44px, #000 76px); mask-image: linear-gradient(180deg, transparent 0, transparent 44px, #000 76px); } /* ---------------------------------------------------------------- Android: live backdrop blur on many stacked surfaces can drop frames on mid- and low-end phones, so the glass turns into a slightly more opaque frost there. The canvas behind is a smooth gradient, so the look barely changes. (native-shell-android is set in app.js.) ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"].native-shell-android { --bloom-blur: none; --bloom-glass: rgba(255, 255, 255, 0.78); } /* ================================================================ Screen sweep A: onboarding, sign-in, paywall, shop ================================================================ */ /* ================================================================ Bloom sweep A: first-run, onboarding, premium and shop screens. Splash, welcome, auth, onboarding (core + extras), cycles-manual, transfer-resume, privacy-promise, complete-profile, paywall, manage-plan, redeem, shop, product, checkout, shop-orders. Loaded after theme-bloom.css. Colour and surface rules are light mode only (:not(.theme-dark)); Bloom Night handles dark mode. Pure layout fixes use the plain Bloom scope. ================================================================ */ /* ---------------------------------------------------------------- 0. GLOBAL: closed bottom sheet The closed sheet sits just below the screen, and its upward glow leaked a grey band along the bottom of every screen without a tab bar (splash, welcome, auth, onboarding, shop...). ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"]:not(.theme-dark) .sheet:not(.is-open) { box-shadow: none; } /* ---------------------------------------------------------------- 1. WELCOME CAROUSEL ART The slide illustrations are inline SVG in the old dusty plum, rose, sage and honey. Retint them to the Bloom palette (violet, blush, mint, butter) so they match the brand mark and the Today ring. ---------------------------------------------------------------- */ /* Slide 1: brand mark + halo. The mark's gradient vector lies outside the scaled glyph, so only the first stop shows: make that the Bloom violet. */ :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g0 stop:nth-of-type(1) { stop-color: #FFB0D4; stop-opacity: 0.55; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g0 stop:nth-of-type(2) { stop-color: #B9A3FF; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g0m stop:nth-of-type(1) { stop-color: #7A5BEF; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g0m stop:nth-of-type(2) { stop-color: #6A4BE6; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g0m stop:nth-of-type(3) { stop-color: #5236C9; } /* Slides 2 to 4: blush to violet gradients */ :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g1a stop:nth-of-type(1), :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g3a stop:nth-of-type(1) { stop-color: #FF8CC0; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g1a stop:nth-of-type(2), :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g3a stop:nth-of-type(2) { stop-color: #6246DE; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g2a stop:nth-of-type(1) { stop-color: #FF9CCB; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g2a stop:nth-of-type(2) { stop-color: #6A4BE6; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g3b stop:nth-of-type(1) { stop-color: #A98BFF; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g3b stop:nth-of-type(2) { stop-color: #5236C9; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g3c stop:nth-of-type(1) { stop-color: #FFE3EE; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art #g3c stop:nth-of-type(2) { stop-color: #ECE6FF; } /* Accent shapes (SVG presentation attributes; there are no classes to hook) */ :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art [stroke="#9DB89A"] { stroke: #5ECDA4; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art [fill="#9DB89A"] { fill: #5ECDA4; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art [fill="#E8A4B8"] { fill: #F06FA8; } :root[data-gh-theme="bloom"]:not(.theme-dark) .welcome-art [fill="#F2C57C"] { fill: #F9C25B; } /* ---------------------------------------------------------------- 2. AUTH ---------------------------------------------------------------- */ :root[data-gh-theme="bloom"]:not(.theme-dark) .auth-title { background: linear-gradient(100deg, #23163F 0%, #3A2380 60%, #5A3BD0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--bloom-ink); } :root[data-gh-theme="bloom"]:not(.theme-dark) .auth-promise { background: var(--bloom-glass); border: 1px solid var(--bloom-glass-border); border-radius: 20px; color: var(--text-muted); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -16px rgba(98, 70, 220, 0.35); -webkit-backdrop-filter: var(--bloom-blur); backdrop-filter: var(--bloom-blur); } :root[data-gh-theme="bloom"]:not(.theme-dark) .auth-promise strong { color: var(--bloom-ink); } :root[data-gh-theme="bloom"]:not(.theme-dark) .auth-link { color: var(--bloom-violet-deep); text-decoration-color: rgba(82, 54, 201, 0.45); } :root[data-gh-theme="bloom"]:not(.theme-dark) .auth-or::before, :root[data-gh-theme="bloom"]:not(.theme-dark) .auth-or::after { background: rgba(106, 75, 230, 0.14); } /* Error lines are inline var(--gh-error): too light for small text on lilac */ /* Clerk widget (web only; it cannot load outside girlharmony.com, so this is unverified in the preview). Hooks are the classes js/auth.js passes in. */ :root[data-gh-theme="bloom"]:not(.theme-dark) .clerk-mount .gh-clerk-primary { background: var(--bloom-grad) !important; border: 0 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 26px -10px rgba(106, 75, 230, 0.65) !important; } :root[data-gh-theme="bloom"]:not(.theme-dark) .clerk-mount .gh-clerk-title { color: var(--bloom-ink) !important; } :root[data-gh-theme="bloom"]:not(.theme-dark) .clerk-mount .gh-clerk-subtitle { color: var(--text-muted) !important; } :root[data-gh-theme="bloom"]:not(.theme-dark) .clerk-mount .cl-footerActionLink { color: var(--bloom-violet-deep) !important; } :root[data-gh-theme="bloom"]:not(.theme-dark) #auth-err, :root[data-gh-theme="bloom"]:not(.theme-dark) #onb-age-note { color: #B8304E !important; } /* ---------------------------------------------------------------- 3. ONBOARDING STEPS ---------------------------------------------------------------- */ /* Scrolled options melt under the progress header instead of a hard cut */ :root[data-gh-theme="bloom"] .onb-body { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px); mask-image: linear-gradient(180deg, transparent 0, #000 14px); } /* Goal cards: a pre-selected goal is rendered with inline plum-50 + border, which stuck on the card after picking another one. Let the class decide. */ :root[data-gh-theme="bloom"]:not(.theme-dark) .onb .card-clickable[data-goal]:not(.is-selected) { background: var(--bloom-glass) !important; border-color: var(--bloom-glass-border) !important; } :root[data-gh-theme="bloom"]:not(.theme-dark) .onb .card-clickable[data-goal].is-selected { background: radial-gradient(120% 160% at 0% 0%, rgba(236, 230, 255, 0.95), rgba(255, 255, 255, 0.85) 70%) !important; border-color: var(--bloom-violet) !important; } /* "Switching from another app?" shortcut on the last-period step */ :root[data-gh-theme="bloom"]:not(.theme-dark) .onb .card[data-route="cycles-manual"], :root[data-gh-theme="bloom"]:not(.theme-dark) .card:has(#onb-quick-catchup) { background: radial-gradient(120% 140% at 0% 0%, rgba(220, 208, 255, 0.95) 0%, rgba(220, 208, 255, 0) 60%), radial-gradient(120% 140% at 100% 100%, rgba(255, 220, 236, 0.9) 0%, rgba(255, 220, 236, 0) 60%), rgba(255, 255, 255, 0.6) !important; border: 1px solid var(--bloom-glass-border) !important; } :root[data-gh-theme="bloom"]:not(.theme-dark) .onb .card[data-route="cycles-manual"] svg { color: var(--bloom-violet); } :root[data-gh-theme="bloom"]:not(.theme-dark) #onb-quick-catchup { color: var(--bloom-violet-deep); font-weight: 700; } /* "Why we ask" (shift step): inline plum-50 flattened the tinted card */ :root[data-gh-theme="bloom"]:not(.theme-dark) .onb .card-tinted[style*="--gh-plum-50"] { background: radial-gradient(120% 140% at 0% 0%, rgba(220, 208, 255, 0.95) 0%, rgba(220, 208, 255, 0) 60%), radial-gradient(120% 140% at 100% 100%, rgba(255, 220, 236, 0.9) 0%, rgba(255, 220, 236, 0) 60%), rgba(255, 255, 255, 0.55) !important; } /* Previous-app picker: the two non-app badges were old plum and sage */ :root[data-gh-theme="bloom"]:not(.theme-dark) .onb [data-prev-app="other"] .brand-mark { background: var(--bloom-grad-soft) !important; box-shadow: 0 6px 14px -6px rgba(106, 75, 230, 0.6); } :root[data-gh-theme="bloom"]:not(.theme-dark) .onb [data-prev-app="none"] .brand-mark { background: linear-gradient(140deg, #DDF6EC 0%, #B6EAD3 100%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); } :root[data-gh-theme="bloom"]:not(.theme-dark) .onb .brand-mark-img { border-color: rgba(106, 75, 230, 0.12); } /* Birth control: two-line labels ("Tubal / sterilization") centred */ :root[data-gh-theme="bloom"] .onb .chip[data-bc] { text-align: left; } /* Focus areas: tall two-line tiles read better as soft tiles than stadiums */ :root[data-gh-theme="bloom"] .onb .chip[data-focus] { border-radius: 24px; } /* Body basics: unit toggle + wheel pickers */ :root[data-gh-theme="bloom"]:not(.theme-dark) .unit-pill:not(.is-active) { background: var(--bloom-glass-strong); border-color: rgba(106, 75, 230, 0.14); color: var(--bloom-ink); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(98, 70, 220, 0.35); } :root[data-gh-theme="bloom"]:not(.theme-dark) .onb select.input { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235236C9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; } /* Loading step: inline old cream-to-lilac backdrop */ :root[data-gh-theme="bloom"]:not(.theme-dark) .screen[data-screen="onb-loading"] .onb { background: var(--bloom-mesh) !important; } /* ---------------------------------------------------------------- 4. IMPORT HELP (onb-transfer, transfer-resume, cycles-manual) ---------------------------------------------------------------- */ /* Numbered export steps: the global list reset hid the numbers the ordered list (and its indent) was built for. */ :root[data-gh-theme="bloom"] .screen[data-screen="onb-transfer"] ol, :root[data-gh-theme="bloom"] .screen[data-screen="transfer-resume"] ol { list-style: decimal; } :root[data-gh-theme="bloom"]:not(.theme-dark) .screen[data-screen="onb-transfer"] ol li::marker, :root[data-gh-theme="bloom"]:not(.theme-dark) .screen[data-screen="transfer-resume"] ol li::marker { color: var(--bloom-violet); font-weight: 700; } /* "Heads up" note: inline cream-100 */ :root[data-gh-theme="bloom"]:not(.theme-dark) .screen[data-screen="onb-transfer"] .card-tinted[style*="--gh-cream-100"], :root[data-gh-theme="bloom"]:not(.theme-dark) .screen[data-screen="transfer-resume"] .card-tinted[style*="--gh-cream-100"] { background: rgba(255, 255, 255, 0.5) !important; border: 1px solid var(--bloom-glass-border); box-shadow: inset 0 1px 0 #fff; } /* Quick catch-up: