/* Luna โ€” Menstrual Health & Wellness Calming, inclusive design with soft earth + rose palette */ :root { --bg: #fef8f7; --bg-soft: #fdf2f0; --text: #4a3c3a; --text-muted: #8b7572; --accent: #c97b8b; --accent-light: #e8c4cc; --accent-dark: #a85d6d; --lavender: #b8a9c4; --sage: #a8b5a0; --blush: #f5e6e8; --footer-bg: #7d5c64; --white: #fff; --shadow: rgba(74, 60, 58, 0.06); --shadow-strong: rgba(74, 60, 58, 0.1); --radius: 16px; --radius-sm: 10px; --font-sans: 'Outfit', system-ui, sans-serif; --font-serif: 'Playfair Display', Georgia, serif; /* Breakpoints (for reference in media queries) */ --bp-mobile: 599px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px; --touch-min: 44px; /* Offset so fixed header doesn't cover content when scrolling to anchors */ --header-height: 5.5rem; } /* ----- Feminine theme overrides (choose via data-theme on ) ----- */ html[data-theme="lavender"] { --bg: #f8f6fb; --bg-soft: #f2eff8; --text: #3d3846; --text-muted: #6b6374; --accent: #8b7aa8; --accent-light: #c4b8d4; --accent-dark: #6b5d84; --lavender: #9d8fb8; --sage: #9fa89a; --blush: #e8e4f0; --footer-bg: #6b5d84; --shadow: rgba(61, 56, 70, 0.06); --shadow-strong: rgba(61, 56, 70, 0.1); } html[data-theme="sage"] { --bg: #f6f8f5; --bg-soft: #eef2ec; --text: #3d4639; --text-muted: #6b7564; --accent: #7a9b6e; --accent-light: #b8c9b2; --accent-dark: #5d7a54; --lavender: #9aab9e; --sage: #8b9d85; --blush: #e4ebe2; --footer-bg: #5d7a54; --shadow: rgba(61, 70, 57, 0.06); --shadow-strong: rgba(61, 70, 57, 0.1); } html[data-theme="coral"] { --bg: #fef8f6; --bg-soft: #fdf2ed; --text: #4a3d38; --text-muted: #8b7268; --accent: #c97b6b; --accent-light: #e8c4bc; --accent-dark: #a85d50; --lavender: #c4a89e; --sage: #a8b5a0; --blush: #f5e8e4; --footer-bg: #a85d50; --shadow: rgba(74, 61, 56, 0.06); --shadow-strong: rgba(74, 61, 56, 0.1); } html[data-theme="mauve"] { --bg: #f9f7f9; --bg-soft: #f3eff3; --text: #463d46; --text-muted: #756b75; --accent: #9b7a9b; --accent-light: #d4c4d4; --accent-dark: #7a5d7a; --lavender: #b8a0b8; --sage: #a8a5a8; --blush: #ebe4eb; --footer-bg: #7a5d7a; --shadow: rgba(70, 61, 70, 0.06); --shadow-strong: rgba(70, 61, 70, 0.1); } html[data-theme="peach"] { --bg: #fefaf7; --bg-soft: #fdf5ef; --text: #4a4238; --text-muted: #8b7d68; --accent: #c9a87b; --accent-light: #e8d4bc; --accent-dark: #a88a5d; --lavender: #c4b8a8; --sage: #b5b0a0; --blush: #f5efe6; --footer-bg: #a88a5d; --shadow: rgba(74, 66, 56, 0.06); --shadow-strong: rgba(74, 66, 56, 0.1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Reserve space at top when scrolling to anchors so fixed header doesn't cover content */ scroll-padding-top: var(--header-height); } /* Extra offset on scroll targets (works with scrollIntoView and hash links) */ [id] { scroll-margin-top: var(--header-height); } body { margin: 0; font-family: var(--font-sans); scroll-behavior: smooth; font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* When opened as installed app (Android / iOS โ€œAdd to Home Screenโ€) */ .pwa-standalone body { min-height: 100vh; min-height: -webkit-fill-available; } .pwa-standalone .header { padding-top: env(safe-area-inset-top); } /* Skip link */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 200; padding: 0.75rem 1rem; background: var(--accent); color: var(--white); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); transition: top 0.2s; } .skip-link:focus { top: 1rem; outline: 2px solid var(--text); outline-offset: 2px; } /* Header */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(254, 248, 247, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--shadow); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .nav { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .logo { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: 0.02em; } .nav-group { display: flex; align-items: center; gap: 1rem; } .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .nav-links { gap: 1rem; } .nav-links a, .nav-links .nav-tab { color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s, background 0.2s; } .nav-links a:hover, .nav-links .nav-tab:hover { color: var(--accent); } .nav-tab { display: inline-block; padding: 0.35rem 0.75rem; background: none; border: none; border-radius: var(--radius-sm); font-family: var(--font-sans); cursor: pointer; } .nav-tab.active { color: var(--accent); font-weight: 600; background: var(--blush); } /* Learn submenu (dropdown) */ .nav-item-has-sub { position: relative; } .nav-learn-wrap { position: relative; display: inline-block; } .nav-learn-sub { position: absolute; top: 100%; left: 0; min-width: 12rem; margin: 0.25rem 0 0; padding: 0.5rem 0; list-style: none; background: var(--white); border-radius: var(--radius-sm); box-shadow: 0 0.5rem 1.5rem var(--shadow-strong); border: 1px solid var(--shadow-strong); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s; z-index: 100; } .nav-learn-wrap:hover .nav-learn-sub, .nav-learn-wrap:focus-within .nav-learn-sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav-learn-sub li { margin: 0; } .nav-learn-sub a { display: block; padding: 0.5rem 1rem; font-size: 0.9rem; color: var(--text-muted); text-decoration: none; transition: color 0.2s, background 0.2s; } .nav-learn-sub a:hover { color: var(--accent); background: var(--blush); } /* Theme switcher โ€” right side of nav, separated from tabs */ .theme-switcher { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; padding-left: 1rem; border-left: 1px solid var(--shadow-strong); flex-shrink: 0; } .theme-switcher-label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .theme-select { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; padding: 0.4rem 1.75rem 0.4rem 0.65rem; border: none; border-radius: var(--radius-sm); background: var(--blush); color: var(--text-muted); cursor: pointer; min-height: 2rem; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%238b7572' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; transition: color 0.2s, background 0.2s; } .theme-select:hover { color: var(--accent); background-color: var(--bg-soft); } .theme-select:focus { outline: none; color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); } /* Tab panels: show one at a time */ .tab-panel { display: none; } .tab-panel.active { display: block; } /* Quick jump inside Learn panel */ .learn-quick-nav { padding: 1rem 1.5rem; margin: 0 auto 1rem; max-width: 900px; background: var(--white); border-radius: var(--radius); box-shadow: 0 2px 12px var(--shadow); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .learn-quick-label { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text); } .learn-quick-nav a { font-size: 0.9rem; color: var(--accent); text-decoration: none; } .learn-quick-nav a:hover { text-decoration: underline; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 1px; } /* Hero */ .hero { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 6rem 1.5rem 4rem; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(233, 196, 204, 0.4), transparent), radial-gradient(ellipse 60% 40% at 80% 70%, rgba(184, 169, 196, 0.2), transparent), var(--bg); } .hero-content { position: relative; max-width: 640px; text-align: center; } .hero-tagline { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 0.75rem; } .hero-title { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 400; line-height: 1.2; margin: 0 0 1rem; color: var(--text); } .hero-title em { font-style: italic; color: var(--accent-dark); } .hero-title .hero-tagline { display: block; font-size: 1.2rem; font-weight: 400; opacity: 0.95; margin-top: 0.35rem; } .hero-desc { font-size: 1.1rem; color: var(--text-muted); margin: 0 0 2rem; } /* Buttons */ .btn { display: inline-block; padding: 0.85rem 1.75rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; text-decoration: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .btn-primary { background: var(--accent); color: var(--white); } .btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 24px var(--shadow-strong); } /* Sections */ .section { padding: 4rem 1.5rem; } .container { max-width: 900px; margin: 0 auto; } .section-title { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 400; margin: 0 0 0.75rem; color: var(--text); } .section-tagline { display: block; font-size: 0.75em; font-weight: 400; opacity: 0.9; margin-top: 0.2rem; } .section-intro { font-size: 1.05rem; color: var(--text-muted); margin: 0 0 2.5rem; max-width: 600px; } /* Medical disclaimer */ .medical-disclaimer { margin-bottom: 2.5rem; padding: 1.5rem; background: var(--blush, rgba(245, 230, 232, 0.5)); border-radius: var(--radius); border-left: 4px solid var(--accent); } .medical-disclaimer .section-title { margin-bottom: 0.5rem; } .medical-disclaimer .section-intro { margin-bottom: 0; } /* Legal / policy content */ .legal-content { max-width: 640px; } .legal-content p { margin-bottom: 1rem; } .legal-content p:last-child { margin-bottom: 0; } /* About cards */ .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .card { background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: 0 4px 20px var(--shadow); transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px var(--shadow-strong); } .card-icon { font-size: 1.25rem; color: var(--accent-light); margin-bottom: 1rem; } .card h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text); } .card p { margin: 0; font-size: 0.95rem; color: var(--text-muted); } /* Phases */ .phases { background: var(--bg-soft); } .phases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } .phase-card { padding: 1.75rem; border-radius: var(--radius); border-left: 4px solid; } .phase-menstrual { border-color: var(--accent); background: rgba(201, 123, 139, 0.12); } .phase-follicular { border-color: var(--sage); background: rgba(168, 181, 160, 0.12); } .phase-ovulatory { border-color: var(--lavender); background: rgba(184, 169, 196, 0.12); } .phase-luteal { border-color: var(--accent-dark); background: rgba(168, 93, 109, 0.1); } .phase-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); display: block; margin-bottom: 0.5rem; } .phase-card h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; } .phase-card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Wellness */ .wellness-list { display: flex; flex-direction: column; gap: 1.5rem; } .wellness-item { background: var(--white); padding: 1.5rem 2rem; border-radius: var(--radius); box-shadow: 0 2px 16px var(--shadow); } .wellness-item h4 { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--accent-dark); } .wellness-item p { margin: 0; color: var(--text-muted); } /* Tracker */ .tracker { background: var(--bg-soft); } .tracker .section-title { padding-top: 1.25rem; padding-bottom: 0.5rem; } .tracker-card { background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: 0 4px 24px var(--shadow); } .tracker-form { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end; margin-bottom: 1.5rem; } .tracker-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--text); } .tracker-form input { padding: 0.65rem 1rem; font-family: var(--font-sans); font-size: 1rem; border: 1px solid var(--shadow-strong); border-radius: var(--radius-sm); background: var(--bg); min-width: 180px; } .tracker-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 125, 106, 0.2); } .tracker-result { padding-top: 1.5rem; border-top: 1px solid var(--shadow); } .tracker-result.hidden { display: none !important; } .result-phase { font-size: 1.25rem; font-weight: 600; color: var(--accent-dark); margin: 0 0 0.5rem; } .result-details, .result-next { margin: 0; color: var(--text-muted); font-size: 0.95rem; } /* Resources */ .resources-list { list-style: none; margin: 0; padding: 0; } .resources-list li { padding: 1rem 0; border-bottom: 1px solid var(--shadow); color: var(--text-muted); font-size: 0.95rem; } .resources-list li:last-child { border-bottom: none; } .resources-list strong { color: var(--text); } /* Footer */ .footer { background: var(--footer-bg); color: var(--blush); padding: 2.5rem 1.5rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); text-align: center; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin-bottom: 1.25rem; } .footer-nav a { color: var(--blush); text-decoration: none; font-size: 0.95rem; font-weight: 500; opacity: 0.95; } .footer-nav a:hover { text-decoration: underline; opacity: 1; } .footer-brand { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 0.5rem; } .footer-tagline { display: block; font-size: 0.9em; opacity: 0.9; } .footer-credit { font-size: 0.9rem; opacity: 0.9; margin: 0 0 0.5rem; } .footer-credit a, .footer-credit .footer-link { color: var(--accent); text-decoration: underline; transition: color 0.2s; } .footer-credit a:hover, .footer-credit .footer-link:hover { color: var(--accent-light); opacity: 1; } .footer-email { font-size: 0.9rem; margin: 0 0 0.5rem; } .footer-email a { color: inherit; text-decoration: underline; } .footer-disclaimer { font-size: 0.85rem; opacity: 0.85; margin: 0; } /* Hero buttons */ .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .btn-secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); } .btn-secondary:hover { background: var(--accent); color: var(--white); } /* Wellness grid */ .wellness-grid { display: grid; gap: 1.5rem; } .wellness-card { background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: 0 2px 16px var(--shadow); } .wellness-phase { font-size: 1.1rem; font-weight: 600; color: var(--accent-dark); margin: 0 0 1rem; } .wellness-card ul { margin: 0; padding-left: 1.25rem; color: var(--text-muted); font-size: 0.95rem; } .wellness-card li { margin-bottom: 0.5rem; } .wellness-card strong { color: var(--text); } /* Tracker actions & saved msg */ .tracker-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .tracker-saved-msg { font-size: 0.9rem; color: var(--sage); margin: 0 0 1rem; } .today-tip { margin-top: 1rem; padding: 1rem; background: var(--bg-soft); border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--text-muted); } .today-tip strong { color: var(--text); } /* Insight bar (today's phase when tracker data saved) */ .insight-bar { background: linear-gradient(135deg, rgba(201, 123, 139, 0.2), rgba(184, 169, 196, 0.15)); border-bottom: 1px solid var(--shadow); padding: 1rem 1.5rem; } .insight-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: 900px; margin: 0 auto; } .insight-phase { font-weight: 600; color: var(--accent-dark); } .insight-tip { flex: 1; min-width: 200px; font-size: 0.95rem; color: var(--text-muted); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; } .btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); } .btn-outline:hover { background: var(--accent); color: var(--white); } .btn-icon { min-width: 40px; padding: 0.5rem; background: var(--bg-soft); border: 1px solid var(--shadow-strong); color: var(--text); font-size: 1.1rem; } .btn-icon:hover { background: var(--accent-light); border-color: var(--accent); color: var(--white); } /* Period quick log */ .period-quick-log { background: var(--white); padding: 1.5rem 2rem; border-radius: var(--radius); box-shadow: 0 2px 16px var(--shadow); margin-bottom: 1.5rem; } .period-quick-label { font-weight: 600; color: var(--text); margin: 0 0 0.75rem; font-size: 0.95rem; } .period-quick-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .period-history { font-size: 0.9rem; color: var(--text-muted); margin: 1rem 0 0; } /* Cycle calendar */ .calendar-wrap { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--shadow); } .calendar-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; } .calendar-title::before { content: '๐Ÿ“…'; font-size: 1.25rem; } .calendar-hint { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.75rem; } .calendar-summary { padding: 0.75rem 1rem; margin-bottom: 1rem; background: var(--blush); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); font-size: 0.9rem; color: var(--text); } .calendar-summary-inner { max-width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; } .calendar-summary-item:not(:last-child)::after { content: '|'; margin-left: 1rem; color: var(--text-muted); font-weight: normal; } .calendar-detail-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.75rem 0 0; } .calendar-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; } .calendar-nav .btn-icon { border-radius: 50%; transition: background 0.2s, transform 0.2s; } .calendar-nav .btn-icon:hover { transform: scale(1.08); } .calendar-month { font-weight: 600; min-width: 160px; text-align: center; color: var(--text); font-size: 1rem; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 0.85rem; } .calendar-no-data { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 1rem; margin: 0; } .calendar-day { aspect-ratio: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 8px; background: var(--bg-soft); color: var(--text-muted); cursor: default; transition: transform 0.15s, box-shadow 0.15s; position: relative; } .calendar-day:not(.weekday):hover { transform: scale(1.05); box-shadow: 0 4px 12px var(--shadow-strong); } .calendar-day .cal-num { font-weight: 600; font-size: 0.9rem; } .calendar-day .cal-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; line-height: 1.1; } .calendar-day .cal-cycle-day { font-size: 0.6rem; color: var(--text-muted); font-weight: 500; } .calendar-day .cal-period-day { font-size: 0.55rem; color: var(--accent-dark); font-weight: 600; } .calendar-day .cal-logged { font-size: 0.6rem; color: var(--sage); } .calendar-day .cal-icon { font-size: 0.65rem; line-height: 1; display: block; } .calendar-day.period { background: linear-gradient(135deg, rgba(201, 123, 139, 0.45), rgba(168, 93, 109, 0.35)); color: var(--text); border: 1px solid rgba(201, 123, 139, 0.4); } .calendar-day.period.period-start { border-left-width: 3px; border-left-color: var(--accent-dark); } .calendar-day.logged-period { box-shadow: inset 0 0 0 2px var(--sage); } .calendar-day.logged-period .cal-logged { color: var(--sage); } .calendar-day.period .cal-icon-period { color: var(--accent-dark); } .calendar-day.fertile { background: linear-gradient(135deg, rgba(184, 169, 196, 0.4), rgba(168, 150, 190, 0.3)); color: var(--text); border: 1px solid rgba(184, 169, 196, 0.45); } .calendar-day.fertile .cal-icon-fertile { color: var(--lavender); } .calendar-day.ovulation { background: linear-gradient(135deg, rgba(184, 169, 196, 0.55), rgba(168, 150, 190, 0.45)); color: var(--text); border: 1px solid var(--lavender); box-shadow: 0 0 0 1px rgba(184, 169, 196, 0.3); } .calendar-day.ovulation .cal-icon-ovulation { color: var(--lavender); font-size: 0.75rem; } .calendar-day.today { outline: 2px solid var(--accent); outline-offset: 2px; font-weight: 600; background: rgba(201, 123, 139, 0.12); } .calendar-day.today.period { background: linear-gradient(135deg, rgba(201, 123, 139, 0.5), rgba(168, 93, 109, 0.4)); } .calendar-day.today.fertile, .calendar-day.today.ovulation { background: linear-gradient(135deg, rgba(184, 169, 196, 0.5), rgba(168, 150, 190, 0.4)); } .calendar-day .cal-icon-today { color: var(--accent); } .calendar-day.other-month { opacity: 0.55; } .calendar-day.other-month.period, .calendar-day.other-month.fertile, .calendar-day.other-month.ovulation { opacity: 0.85; } .calendar-day.weekday { font-weight: 600; color: var(--text); background: transparent; font-size: 0.75rem; min-height: 0; cursor: default; } .calendar-day.weekday:hover { transform: none; box-shadow: none; } .calendar-day.weekday .weekday-abbr { display: inline-block; } /* Legend */ .calendar-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--shadow-strong); font-size: 0.85rem; color: var(--text-muted); } .legend-item { display: inline-flex; align-items: center; gap: 0.4rem; } .legend-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 0.7rem; line-height: 1; } .legend-period .legend-icon { background: rgba(201, 123, 139, 0.5); color: var(--accent-dark); } .legend-period-start .legend-icon { background: transparent; color: var(--accent-dark); border: 1px solid var(--accent-dark); } .legend-logged .legend-icon { background: var(--sage); color: var(--white); } .legend-fertile .legend-icon { background: rgba(184, 169, 196, 0.45); color: var(--lavender); } .legend-ovulation .legend-icon { background: rgba(184, 169, 196, 0.6); color: var(--lavender); border: 1px solid var(--lavender); } .legend-icon-today { color: var(--accent); background: transparent; } .legend-today .legend-icon { border: 2px solid var(--accent); background: transparent; } /* Phase card expandable tips */ .phase-card .phase-tips { margin-top: 1rem; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 0.75rem; } .phase-card .phase-tips summary { font-size: 0.9rem; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; } .phase-card .phase-tips summary::-webkit-details-marker { display: none; } .phase-card .phase-tips summary::after { content: ' +'; font-weight: 400; } .phase-card .phase-tips[open] summary::after { content: ' โˆ’'; } .phase-card .phase-tips ul { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.9rem; color: var(--text-muted); } .phase-card .phase-tips li { margin-bottom: 0.25rem; } /* Symptom history */ .symptom-history { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--shadow); } .symptom-history h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--text); } .symptom-history-list { display: flex; flex-direction: column; gap: 0.5rem; } .symptom-history-item { font-size: 0.9rem; color: var(--text-muted); padding: 0.5rem 0; border-bottom: 1px solid var(--shadow); } .symptom-history-item strong { color: var(--text); } .symptom-history-item .tags { margin-top: 0.25rem; } .symptom-history-empty { font-size: 0.9rem; color: var(--text-muted); font-style: italic; } /* Print */ .print-actions { text-align: center; padding: 1rem 1.5rem; } .print-area { padding: 2rem; max-width: 700px; margin: 0 auto; font-size: 0.95rem; } .print-area.hidden { display: none !important; } @media print { .no-print, .header, .nav, .hero, .insight-bar, .hero-buttons, .period-quick-log, .tracker-form, .calendar-wrap, .symptom-form, .symptom-options, .print-actions, .faq summary, .phase-tips { display: none !important; } .print-area.hidden { display: block !important; } body { background: #fff; color: #000; } } /* Symptoms */ .symptoms { background: var(--bg-soft); } .symptom-card { background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: 0 4px 24px var(--shadow); } .symptom-date { font-weight: 600; color: var(--text); margin: 0 0 1rem; } .symptom-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .symptom-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--text-muted); cursor: pointer; } .symptom-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); } .symptom-saved { font-size: 0.9rem; color: var(--sage); margin: 1rem 0 0; } /* Learn (glossary + myth vs fact) */ .learn { background: var(--bg-soft); } .learn-grid { display: grid; gap: 2rem; } @media (min-width: 700px) { .learn-grid { grid-template-columns: 1fr 1fr; } } .learn-block { background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: 0 2px 16px var(--shadow); } .learn-block h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; color: var(--accent-dark); } .glossary { margin: 0; } .glossary dt { font-weight: 600; color: var(--text); margin-top: 1rem; font-size: 0.95rem; } .glossary dt:first-child { margin-top: 0; } .glossary dd { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; } .myth-list { display: flex; flex-direction: column; gap: 1.25rem; } .myth-item { padding-bottom: 1rem; border-bottom: 1px solid var(--shadow); } .myth-item:last-child { border-bottom: none; padding-bottom: 0; } .myth-item .myth { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.35rem; font-style: italic; } .myth-item .fact { font-size: 0.95rem; color: var(--text); margin: 0; } /* Provider checklist */ .provider-checklist { background: var(--bg-soft); } .checklist-card { background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: 0 2px 16px var(--shadow); } .provider-checklist-list { list-style: none; margin: 0; padding: 0; } .provider-checklist-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--shadow); } .provider-checklist-list li:last-child { border-bottom: none; } .check-label { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: var(--text); cursor: pointer; } .check-label input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); flex-shrink: 0; } .checklist-note { margin: 1.25rem 0 0; font-size: 0.85rem; color: var(--text-muted); } /* Period history list */ .period-history-list-wrap { margin-top: 1rem; } .period-history-list-wrap h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text); } .period-history-list { margin: 0; padding-left: 1.25rem; font-size: 0.9rem; color: var(--text-muted); } .period-history-list li { margin-bottom: 0.25rem; } .tracker-last-saved { font-size: 0.85rem; color: var(--sage); margin: 0.5rem 0 0; } /* FAQ */ .faq-subheading { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 1.5rem 0 0.5rem; padding-bottom: 0.25rem; } .faq-subheading:first-of-type { margin-top: 0; } .faq-list { display: flex; flex-direction: column; gap: 0.5rem; } .faq-item { background: var(--white); border-radius: var(--radius); box-shadow: 0 2px 12px var(--shadow); overflow: hidden; } .faq-item summary { padding: 1.25rem 1.5rem; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; transition: background 0.2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; float: right; font-size: 1.25rem; color: var(--accent); } .faq-item[open] summary::after { content: 'โˆ’'; } .faq-item summary:hover { background: var(--bg-soft); } .faq-item p { margin: 0; padding: 0 1.5rem 1.25rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; } /* Expand list (conditions, life stages, nutrition, symptoms guide, products) */ .conditions, .life-stages, .nutrition, .symptoms-guide, .products { background: var(--bg-soft); } .expand-list { display: flex; flex-direction: column; gap: 0.5rem; } .expand-item { background: var(--white); border-radius: var(--radius); box-shadow: 0 2px 12px var(--shadow); overflow: hidden; } .expand-item summary { padding: 1rem 1.25rem; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; transition: background 0.2s; } .expand-item summary::-webkit-details-marker { display: none; } .expand-item summary::after { content: '+'; float: right; font-size: 1.1rem; color: var(--accent); } .expand-item[open] summary::after { content: 'โˆ’'; } .expand-item summary:hover { background: var(--bg-soft); } .expand-item p { margin: 0; padding: 0 1.25rem 1rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; } .expand-item strong { color: var(--text); } /* Resources grid */ .resources-grid { display: grid; gap: 1.25rem; } @media (min-width: 600px) { .resources-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } .resources-grid .learn-block h3 { font-size: 1rem; margin-bottom: 0.5rem; } .resources-grid .learn-block p { font-size: 0.9rem; color: var(--text-muted); margin: 0; } /* ========== Responsive: Mobile, Tablet, Desktop ========== */ /* ----- Mobile (phones, small screens) ----- */ @media (max-width: 599px) { main { padding-top: env(safe-area-inset-top); } .section { padding: 2rem 1rem; } .container { padding-left: 1rem; padding-right: 1rem; } .hero { min-height: 70vh; padding: 5rem 1rem 3rem; } .hero-title { font-size: 1.85rem; } .hero-desc { font-size: 1rem; } .hero-buttons { flex-direction: column; width: 100%; max-width: 280px; margin: 0 auto; } .hero-buttons .btn { width: 100%; min-height: var(--touch-min); padding: 1rem 1.5rem; } .section-title { font-size: 1.5rem; } .section-intro { font-size: 0.95rem; margin-bottom: 1.5rem; } .about-grid { grid-template-columns: 1fr; gap: 1rem; } .phases-grid { grid-template-columns: 1fr; gap: 1rem; } .phase-card { padding: 1.25rem; } .learn-quick-nav { padding: 0.75rem 1rem; margin-bottom: 0.75rem; gap: 0.5rem 0.75rem; } .learn-quick-nav a { font-size: 0.85rem; } .tracker-card, .symptom-card, .wellness-card, .card { padding: 1.25rem 1rem; } .tracker-form { flex-direction: column; align-items: stretch; gap: 1rem; } .tracker-form input { min-width: 0; min-height: var(--touch-min); font-size: 1rem; } .tracker-actions { flex-direction: column; gap: 0.5rem; } .tracker-actions .btn { width: 100%; min-height: var(--touch-min); padding: 1rem; } .period-quick-buttons { flex-direction: column; } .period-quick-buttons .btn { min-height: var(--touch-min); padding: 1rem; } .calendar-grid { gap: 3px; font-size: 0.8rem; } .calendar-day { min-height: 38px; aspect-ratio: 1; } .calendar-day .cal-num { font-size: 0.85rem; } .calendar-legend { gap: 0.75rem; font-size: 0.8rem; } .calendar-summary-inner { flex-direction: column; gap: 0.35rem; } .calendar-summary-item:not(:last-child)::after { display: none; } .calendar-detail-hint { font-size: 0.75rem; } .btn, .btn-primary, .btn-secondary, .btn-outline { min-height: var(--touch-min); padding: 0.85rem 1.25rem; } .btn-icon { min-width: var(--touch-min); min-height: var(--touch-min); padding: 0.75rem; } .symptom-options { grid-template-columns: 1fr; gap: 0.5rem; } .symptom-check { min-height: var(--touch-min); padding: 0.5rem 0; } .symptom-check input { width: 1.25rem; height: 1.25rem; } .expand-item summary, .faq-item summary { padding: 1rem 1rem; } .footer { padding: 1.5rem 1rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } .medical-disclaimer { padding: 1rem; } .insight-bar-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .insight-bar-inner .btn { width: 100%; max-width: 200px; } } /* ----- Tablet (768px and up: show nav tabs, 2-col where useful) ----- */ @media (min-width: 600px) and (max-width: 1023px) { .section { padding: 3rem 1.5rem; } .container { max-width: 720px; } .hero { min-height: 75vh; padding: 5.5rem 1.5rem 4rem; } .about-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .phases-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .wellness-grid { grid-template-columns: 1fr; } .learn-quick-nav { max-width: 720px; } .tracker-form { flex-wrap: wrap; } .tracker-form label { flex: 1 1 200px; } .tracker-form input { min-width: 0; } .calendar-day { min-height: 42px; } .learn-grid { grid-template-columns: 1fr; } .resources-grid { grid-template-columns: repeat(2, 1fr); } } /* ----- Desktop (1024px+) ----- */ @media (min-width: 1024px) { .section { padding: 4rem 2rem; } .container { max-width: 900px; padding-left: 1.5rem; padding-right: 1.5rem; } .hero { min-height: 85vh; padding: 6rem 2rem 4rem; } .hero-content { max-width: 640px; } .about-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .phases-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .wellness-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .learn-quick-nav { max-width: 900px; padding: 1rem 1.5rem; } .tracker-form label { flex: 0 0 auto; } .calendar-wrap { max-width: 560px; } .calendar-day { min-height: 44px; } } /* ----- Wide desktop (1280px+) ----- */ @media (min-width: 1280px) { .nav { max-width: 1200px; padding: 1rem 2rem; } .container { max-width: 1000px; } .learn-quick-nav { max-width: 1000px; } } /* ----- Nav: hide tabs on small screens, show hamburger ----- */ @media (max-width: 767px) { .nav-group { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); padding: 1.25rem 1.5rem; gap: 1rem; border-bottom: 1px solid var(--shadow); box-shadow: 0 8px 24px var(--shadow); flex-direction: column; align-items: stretch; } .nav.open .nav-group { display: flex; } .nav.open .nav-links { display: flex; flex-direction: column; gap: 0.25rem; } .nav.open .nav-tab { display: block; width: 100%; text-align: left; padding: 0.85rem 1rem; min-height: var(--touch-min); border-radius: var(--radius-sm); } .nav.open .nav-tab:hover { background: var(--bg-soft); } /* Learn suboptions visible when nav open (mobile) */ .nav.open .nav-learn-sub { position: static; opacity: 1; visibility: visible; transform: none; margin: 0.25rem 0 0 1rem; padding: 0.25rem 0; box-shadow: none; border: none; background: transparent; } .nav.open .nav-learn-sub a { padding: 0.5rem 0.75rem; min-height: var(--touch-min); display: flex; align-items: center; } .theme-switcher { margin-left: 0.5rem; padding-left: 0.5rem; border-left: none; } .theme-switcher-label { display: none; } .theme-select { min-width: 5.5rem; } .nav-toggle { display: flex; min-width: var(--touch-min); min-height: var(--touch-min); align-items: center; justify-content: center; margin-left: auto; } } /* ----- Tablet/desktop: ensure nav group and tabs visible ----- */ @media (min-width: 768px) { .nav-toggle { display: none; } .nav-group { display: flex; } .nav-links { display: flex; } }