/* ============================================================ Lunar Calendar — Design System v4 Generated with AI assistance. Reviewed/edited by team. Three themes: Rose (default), Dark Midnight, Light Muted Rose theme inspired by: pink hearts, lotus, Celtic knot logo WHY: CSS custom properties (tokens) for every colour allow instant theme switching without any JS DOM manipulation— we only swap the data-theme attribute on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); /* === Rose Theme (Default) — Soft, Readable Pink === */ :root, [data-theme="rose"] { --font: 'Inter', sans-serif; --font-display: 'Inter', sans-serif; --bg: #f5d3de; /* Rose: Slightly darker blush background for less eye strain */ --surface: rgba(255, 240, 245, 0.75); --surface2: rgba(255, 228, 237, 0.82); --surface3: rgba(255, 218, 228, 0.90); --border: rgba(255, 255, 255, 0.70); /* MAXIMUM contrast text on pink */ --text: #1a050b; --text2: #40101f; --text3: #6b223c; --primary: #c93b66; --primary-rgb: 201, 59, 102; --primary-soft: rgba(201, 59, 102, 0.15); --primary-hover: #a62a4f; --accent: #d96287; --accent-soft: rgba(217, 98, 135, 0.18); --accent-glow: rgba(217, 98, 135, 0.4); --phase-men: #d93d3d; --phase-men-soft: rgba(217, 61, 61, 0.18); --phase-fol: #4d9461; --phase-fol-soft: rgba(77, 148, 97, 0.18); --phase-ovu: #e69c1e; --phase-ovu-soft: rgba(230, 156, 30, 0.18); --phase-lut: #765bc2; --phase-lut-soft: rgba(118, 91, 194, 0.18); --success: #429e59; --success-soft: rgba(66, 158, 89, 0.18); --error: #d93d3d; --error-soft: rgba(255, 215, 215, 0.65); --warning: #e69c1e; --warning-soft: rgba(230, 156, 30, 0.18); --tag-stress: #c93b66; --tag-energy: #e69c1e; --tag-sleep: #4d9461; /* Softer corners */ --radius: 24px; --radius-sm: 100px; --radius-lg: 32px; /* Softer shadows — less harsh, more diffused */ --shadow: 0 4px 20px rgba(160, 60, 90, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(240, 180, 200, 0.25); --shadow-lg: 0 10px 36px rgba(160, 60, 90, 0.20), inset 0 2px 3px rgba(255, 255, 255, 0.7), inset 0 -3px 10px rgba(240, 180, 200, 0.20); --shadow-glow: 0 0 20px rgba(217, 98, 135, 0.4); --nav-bg: rgba(252, 232, 240, 0.85); --nav-blur: blur(24px); /* Glass tokens */ --glass-glare: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); --glass-border-strong: rgba(255, 255, 255, 0.80); --glass-glare-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); --glass-input-bg: rgba(255, 240, 246, 0.6); --glass-input-border: rgba(255, 255, 255, 0.6); --glass-input-focus: rgba(255, 255, 255, 0.95); --glass-input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04); --glass-btn-bg: rgba(255, 255, 255, 0.6); --glass-btn-border: rgba(255, 255, 255, 0.85); --glass-btn-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8); --gradient-primary: linear-gradient(135deg, #d96287, #b22d56); --gradient-secondary: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 235, 242, 0.4) 100%); --gradient-hero: radial-gradient(circle at top right, #ffebf0 0%, #f5d3de 50%, #e0b4c5 100%); --gradient-auth: radial-gradient(circle at center, #ffdbe6 0%, #f5d3de 40%, #c593a8 100%); } /* === Light Theme — Genuine Warm Amber/Peach === */ [data-theme="light"] { /* Warm earthy amber/orange background - deeper, more colorful */ --bg: #fae4cd; --surface: rgba(253, 234, 215, 0.85); --surface2: rgba(250, 224, 200, 0.90); --surface3: rgba(245, 214, 185, 0.95); --border: rgba(255, 248, 240, 0.80); /* Very dark rich brown for readability */ --text: #21130a; --text2: #402615; --text3: #6b4124; --primary: #c95c26; --primary-rgb: 201, 92, 38; --primary-soft: rgba(201, 92, 38, 0.15); --primary-hover: #a64618; --accent: #d97d36; --accent-soft: rgba(217, 125, 54, 0.18); --accent-glow: rgba(217, 125, 54, 0.35); --phase-men: #bd4033; --phase-men-soft: rgba(189, 64, 51, 0.15); --phase-fol: #48874c; --phase-fol-soft: rgba(72, 135, 76, 0.15); --phase-ovu: #c98528; --phase-ovu-soft: rgba(201, 133, 40, 0.15); --phase-lut: #66759e; --phase-lut-soft: rgba(102, 117, 158, 0.15); --success-soft: rgba(77, 139, 90, 0.15); --error-soft: rgba(189, 64, 51, 0.15); --tag-stress: #bd4033; --tag-energy: #c98528; --tag-sleep: #48874c; --shadow: 0 4px 18px rgba(100, 50, 20, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 6px rgba(160, 90, 40, 0.08); --shadow-lg: 0 10px 32px rgba(100, 50, 20, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 8px rgba(160, 90, 40, 0.12); --shadow-glow: 0 0 24px rgba(217, 125, 54, 0.25); /* Warm nav — golden/amber tint */ --nav-bg: rgba(250, 230, 210, 0.85); --nav-blur: blur(24px); --glass-glare: linear-gradient(180deg, rgba(255, 255, 250, 0.4) 0%, rgba(255, 255, 250, 0) 100%); --glass-border-strong: rgba(255, 250, 240, 0.6); --glass-glare-strong: linear-gradient(180deg, rgba(255, 255, 250, 0.5), rgba(255, 255, 250, 0)); --glass-input-bg: rgba(252, 238, 222, 0.65); --glass-input-border: rgba(255, 250, 240, 0.6); --glass-input-focus: rgba(255, 255, 250, 0.95); --glass-input-shadow: inset 0 2px 4px rgba(100, 50, 20, 0.05); --glass-btn-bg: rgba(252, 238, 222, 0.6); --glass-btn-border: rgba(255, 250, 240, 0.6); --glass-btn-shadow: inset 0 2px 4px rgba(255, 255, 250, 0.4); --gradient-secondary: linear-gradient(180deg, rgba(255, 255, 250, 0.65) 0%, rgba(250, 230, 210, 0.45) 100%); --gradient-primary: linear-gradient(135deg, #d97d36, #c95c26); --gradient-hero: linear-gradient(160deg, #fae4cd 0%, #f5d4b5 50%, #e6bb91 100%); --gradient-auth: linear-gradient(160deg, #e6bb91 0%, #f5d4b5 40%, #fae4cd 100%); } /* === Brightness & Logo Styles === */ [data-brightness="dim"] { filter: brightness(0.85); } [data-brightness="bright"] { filter: brightness(1.15); } .bg-watermark { position: fixed; top: 50%; left: 50%; width: 120vw; height: 120vw; max-width: 600px; max-height: 600px; transform: translate(-50%, -50%); background-image: url('/img/logo.jpg'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.05; pointer-events: none; z-index: -1; mix-blend-mode: multiply; } [data-theme="dark"] .bg-watermark { mix-blend-mode: screen; opacity: 0.07; } .nav-brand-logo { height: 28px; width: auto; margin-right: 8px; mix-blend-mode: multiply; } [data-theme="dark"] .nav-brand-logo { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg); } /* === Dark Theme — Pink/Purple Night === */ [data-theme="dark"] { --bg: #140b12; --surface: rgba(33, 20, 31, 0.65); --surface2: rgba(43, 25, 41, 0.7); --surface3: rgba(56, 33, 53, 0.85); --border: rgba(255, 255, 255, 0.1); --text: #f5e4ed; --text2: #cfb1c3; --text3: #a37f94; --primary: #d46399; --primary-rgb: 212, 99, 153; --primary-soft: rgba(212, 99, 153, 0.15); --primary-hover: #e87eb0; --accent: #a366cc; --accent-soft: rgba(163, 102, 204, 0.12); --accent-glow: rgba(212, 99, 153, 0.15); --phase-men: #e07070; --phase-men-soft: rgba(224, 112, 112, 0.12); --phase-fol: #6db876; --phase-fol-soft: rgba(109, 184, 118, 0.1); --phase-ovu: #e8b87a; --phase-ovu-soft: rgba(232, 184, 122, 0.1); --phase-lut: #9a8ad4; --phase-lut-soft: rgba(154, 138, 212, 0.1); --success-soft: rgba(109, 184, 118, 0.1); --error-soft: rgba(224, 112, 112, 0.1); --warning-soft: rgba(232, 184, 122, 0.1); --tag-stress: #e07070; --tag-energy: #e8b87a; --tag-sleep: #6db876; --shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.04), inset 0 -2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.06), inset 0 -4px 16px rgba(0, 0, 0, 0.5); /* WHY higher shadow-glow opacity: on dark backgrounds, the subtle pink glow around cards creates a premium "neon" feel */ --shadow-glow: 0 0 30px rgba(224, 127, 154, 0.12); --nav-bg: rgba(11, 13, 20, 0.8); --nav-blur: blur(20px); /* WHY slightly brighter glass borders: on pure-dark backgrounds, 0.08 borders become invisible — 0.14 gives a subtle edge */ --glass-glare: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%); --glass-border-strong: rgba(255, 255, 255, 0.16); --glass-glare-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); --glass-input-bg: rgba(0, 0, 0, 0.3); --glass-input-border: rgba(255, 255, 255, 0.1); --glass-input-focus: rgba(255, 255, 255, 0.25); --glass-input-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); --glass-btn-bg: rgba(30, 36, 52, 0.6); --glass-btn-border: rgba(255, 255, 255, 0.12); --glass-btn-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05); --gradient-secondary: linear-gradient(180deg, rgba(53, 33, 50, 0.5) 0%, rgba(31, 20, 30, 0.8) 100%); --gradient-primary: linear-gradient(135deg, #b04e81, #d46399); --gradient-hero: linear-gradient(160deg, #140b12 0%, #261221 100%); --gradient-auth: linear-gradient(160deg, #1f0b1a 0%, #261221 30%, #30172a 60%, #140b12 100%); } /* === Reset & Base === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.65; transition: background 0.4s, color 0.3s; -webkit-font-smoothing: antialiased; } ::selection { background: rgba(var(--primary-rgb), 0.2); } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary-hover); } img { max-width: 100%; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; } /* === Layout — Single column, centered, mobile-first === */ /* WHY: single-column max 560px ensures perfect mobile readability and prevents awkward 2-column breaks on tablets */ .container { max-width: 560px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 480px; margin: 0 auto; padding: 0 20px; } /* Articles Grid */ .grid-articles { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .grid-articles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } } /* Uniform selector grid — for number pickers, radio groups etc. WHY: fixed 44×44 tap targets meet accessibility guidelines and centering via justify-content ensures clean alignment */ .selector-grid { display: grid; grid-template-columns: repeat(auto-fit, 44px); gap: 8px; justify-content: center; } .selector-grid label { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text2); transition: all 0.2s; text-align: center; } .selector-grid label:hover { border-color: var(--primary); color: var(--primary); } .selector-grid label.active, .selector-grid input:checked+span { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } /* Emoji selector row — for 1-5 scales with emojis */ .emoji-selector { display: flex; gap: 8px; justify-content: center; } .emoji-selector label { display: flex; flex-direction: column; align-items: center; width: 52px; height: 56px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; font-size: 22px; transition: all 0.2s; padding-top: 6px; gap: 2px; } .emoji-selector label small { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; } .emoji-selector label:hover { border-color: var(--primary); transform: translateY(-2px); } .emoji-selector label.active { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 0 12px var(--accent-glow); } /* === Top Nav — Frosted === */ .nav { background: var(--nav-bg); backdrop-filter: var(--nav-blur); -webkit-backdrop-filter: var(--nav-blur); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; z-index: 100; } .nav-brand { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--primary); display: flex; align-items: center; gap: 8px; } .nav-brand:hover { text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .nav-link { padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text2); font-size: 13px; font-weight: 500; transition: all 0.2s; } .nav-link:hover { color: var(--primary); background: var(--primary-soft); text-decoration: none; } .nav-link.active { color: var(--primary); background: var(--primary-soft); } .nav-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-soft); } /* === Cards & Glassmorphism === */ .card { background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius); border: 2px solid var(--border); padding: 24px; box-shadow: var(--shadow); transition: box-shadow 0.3s, transform 0.2s, background 0.3s; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: var(--glass-glare); pointer-events: none; z-index: 0; border-radius: var(--radius) var(--radius) 0 0; } .card>* { position: relative; z-index: 1; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--shadow-glow); } .card-glass { background: var(--gradient-secondary); border-radius: var(--radius-lg); border: 3px solid var(--glass-border-strong); padding: 32px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .card-glass::before { content: ''; position: absolute; top: 2%; left: 2%; right: 2%; height: 30%; border-radius: calc(var(--radius-lg) - 4px); background: var(--glass-glare-strong); pointer-events: none; z-index: 0; } .card-glass>* { position: relative; z-index: 1; } .card--phase { text-align: center; padding: 40px 24px; position: relative; overflow: hidden; background: var(--gradient-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .card--phase::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 150%; height: 120%; background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* === Phase Badge === */ .phase-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 18px; border-radius: 100px; font-weight: 600; font-size: 14px; font-family: var(--font); transition: all 0.2s; } .phase-badge.menstruation { background: var(--phase-men-soft); color: var(--phase-men); } .phase-badge.follicular { background: var(--phase-fol-soft); color: var(--phase-fol); } .phase-badge.ovulation { background: var(--phase-ovu-soft); color: var(--phase-ovu); } .phase-badge.luteal { background: var(--phase-lut-soft); color: var(--phase-lut); } /* === Confidence === */ .confidence { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); padding: 4px 14px; border-radius: 100px; background: var(--surface2); } .confidence-dot { width: 8px; height: 8px; border-radius: 50%; } .confidence-dot.low { background: var(--error); box-shadow: 0 0 6px var(--error); } .confidence-dot.medium { background: var(--warning); box-shadow: 0 0 6px var(--warning); } .confidence-dot.high { background: var(--success); box-shadow: 0 0 6px var(--success); } /* === Stats Grid === */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 20px 0; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 14px; text-align: center; transition: all 0.3s; } .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--primary); line-height: 1; } .stat-label { font-size: 11px; color: var(--text3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; } /* === Circular Cycle Graph === */ .cycle-ring-wrap { display: flex; justify-content: center; align-items: center; margin: 24px auto; position: relative; max-width: 320px; } .cycle-ring-wrap svg { width: 100%; height: auto; } .cycle-ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .cycle-ring-day { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--text); line-height: 1; } .cycle-ring-label { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; } /* === Buttons === */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.25s; text-decoration: none; font-family: var(--font); } .btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.2); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.3); text-decoration: none; color: #fff; } .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface3); text-decoration: none; } .btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover { background: var(--primary-soft); text-decoration: none; } .btn-danger { background: var(--error-soft); color: var(--error); } .btn-danger:hover { background: var(--error); color: #fff; text-decoration: none; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-lg { padding: 14px 28px; font-size: 15px; } .btn--full { width: 100%; justify-content: center; } /* === Forms === */ .form-group { margin-bottom: 24px; } .form-label { display: block; font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .form-select, .form-textarea { width: 100%; padding: 14px 20px; border: 2px solid var(--glass-input-border); border-radius: var(--radius-sm); background: var(--glass-input-bg); box-shadow: var(--glass-input-shadow); color: var(--text); font-size: 15px; font-weight: 500; font-family: var(--font); transition: all 0.3s; } .form-textarea { border-radius: var(--radius); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; background: var(--surface); border-color: var(--glass-input-focus); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 4px var(--primary-soft); } .form-hint { font-size: 12px; color: var(--text3); margin-top: 4px; } .form-checkbox-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; } /* Custom date slider appearance */ input[type="date"] { -webkit-appearance: none; appearance: none; font-family: var(--font); } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.5); cursor: pointer; } [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); } /* === Alerts === */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px; border-left: 3px solid; } .alert-error { background: var(--error-soft); color: var(--error); border-color: var(--error); } .alert-success { background: var(--success-soft); color: var(--success); border-color: var(--success); } .alert-info { background: var(--surface2); color: var(--text); border-color: var(--primary); } .alert-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); } /* === Knowledge Cards === */ .knowledge-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: var(--surface); transition: all 0.3s; position: relative; } .knowledge-card:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); border-color: var(--primary-soft); } .knowledge-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .knowledge-card p { font-size: 14px; color: var(--text2); line-height: 1.7; } /* === Table === */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { background: var(--surface2); color: var(--text3); padding: 10px 12px; text-align: left; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: middle; } tr:hover td { background: var(--surface2); } /* === Badges === */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; } .badge-purple { background: var(--primary-soft); color: var(--primary); } .badge-green { background: var(--success-soft); color: var(--success); } .badge-red { background: var(--error-soft); color: var(--error); } .badge-gray { background: var(--surface3); color: var(--text2); } /* === Auth Pages — Mystical Portal === */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--gradient-auth); position: relative; overflow: hidden; } .auth-page::before { content: ''; position: absolute; top: 15%; left: 10%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.06) 0%, transparent 70%); animation: glow1 12s ease-in-out infinite; } .auth-page::after { content: ''; position: absolute; bottom: 10%; right: 15%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.04) 0%, transparent 65%); animation: glow2 16s ease-in-out infinite; } @keyframes glow1 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(30px, -20px) scale(1.1); opacity: 1; } } @keyframes glow2 { 0%, 100% { transform: translate(0, 0); opacity: 0.4; } 50% { transform: translate(-20px, 30px); opacity: 0.8; } } .auth-card { width: 100%; max-width: 420px; background: rgba(20, 14, 28, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: var(--radius-lg); padding: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); border: 1px solid rgba(var(--primary-rgb), 0.12); position: relative; z-index: 1; } .auth-logo { text-align: center; font-size: 52px; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(var(--primary-rgb), 0.3)); } .auth-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; text-align: center; margin-bottom: 6px; color: #f0e8ee; } .auth-subtitle { font-size: 14px; color: #b08798; text-align: center; margin-bottom: 28px; } .auth-page .form-input { background: rgba(12, 10, 18, 0.6); border-color: rgba(var(--primary-rgb), 0.15); color: #f0e8ee; } .auth-page .form-input::placeholder { color: #6b5060; } .auth-page .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); } .auth-page .form-label { color: #b08798; } .auth-page .form-hint { color: #6b5060; } .auth-page a { color: var(--primary); } /* === Page header === */ .page-header { padding: 32px 0 24px; } .page-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--text); } .page-subtitle { font-size: 15px; color: var(--text2); margin-top: 4px; } /* === Theme Toggle === */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-size: 14px; color: var(--text2); transition: all 0.2s; } .theme-toggle:hover { background: var(--surface2); color: var(--primary); } /* === Markdown preview === */ .markdown-preview { font-size: 14px; color: var(--text); line-height: 1.7; } .markdown-preview strong { font-weight: 600; } .markdown-preview li { margin-left: 20px; margin-bottom: 4px; } /* === Avatar === */ .avatar { border-radius: 50%; object-fit: cover; } .avatar-placeholder { border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; } /* === Admin === */ .admin-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 60px); } .admin-sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 24px 14px; } .admin-content { padding: 32px; } .admin-nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text2); font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.2s; margin-bottom: 3px; } .admin-nav-item:hover, .admin-nav-item.active { background: var(--primary-soft); color: var(--primary); text-decoration: none; } /* === Cycle Timeline Strip (horizontal scroll) === */ .cycle-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cycle-strip::-webkit-scrollbar { display: none; } .cycle-day { flex-shrink: 0; width: 40px; height: 48px; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--text2); background: var(--surface2); gap: 2px; transition: all 0.15s; cursor: default; } .cycle-day.today { outline: 2px solid var(--primary); box-shadow: 0 0 10px var(--accent-glow); } .cycle-day.menstruation { background: var(--phase-men-soft); color: var(--phase-men); } .cycle-day.follicular { background: var(--phase-fol-soft); color: var(--phase-fol); } .cycle-day.ovulation { background: var(--phase-ovu-soft); color: var(--phase-ovu); } .cycle-day.luteal { background: var(--phase-lut-soft); color: var(--phase-lut); } .cycle-day .day-num { font-size: 13px; font-weight: 700; } /* === Disclaimer === */ .disclaimer { font-size: 11px; color: var(--text3); text-align: center; padding: 10px 16px; background: var(--surface2); border-radius: var(--radius-sm); margin-top: 16px; } /* =================================== Mobile-first responsive =================================== */ @media (max-width: 768px) { .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { border-right: none; border-bottom: 1px solid var(--border); padding: 12px; display: flex; flex-wrap: wrap; gap: 4px; } .admin-sidebar p, .admin-sidebar hr { display: none; } .admin-content { padding: 16px; } .nav { padding: 0 12px; height: 56px; } .nav-links { gap: 2px; } .nav-link { padding: 6px 8px; font-size: 12px; } .nav-link span { display: none; } .container { padding: 0 14px; } .card { padding: 18px; } .auth-card { padding: 28px 20px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat { padding: 14px 10px; } .stat-value { font-size: 24px; } .page-title { font-size: 24px; } table { font-size: 12px; } th, td { padding: 8px 8px; } .cycle-ring-wrap { max-width: 260px; } .cycle-ring-day { font-size: 34px; } } @media (max-width: 420px) { .nav-brand { font-size: 17px; } .stats-grid { grid-template-columns: 1fr; } .auth-card { padding: 24px 16px; } .btn-lg { padding: 12px 24px; font-size: 14px; } } /* Smooth transitions */ .card, .stat, .nav, .knowledge-card, .btn, .form-input, .admin-sidebar, .admin-nav-item, .badge, .phase-badge, .cycle-day { transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } /* === Reports View Styles (Moved from EJS) === */ .view-tabs { display: flex; gap: 4px; background: var(--surface2); border-radius: 100px; padding: 4px; margin-bottom: 20px; justify-content: center; } .view-tab { flex: 1; text-align: center; padding: 10px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--text3); cursor: pointer; transition: all 0.2s; border: none; background: none; } .view-tab.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3); } .view-tab:hover:not(.active) { color: var(--text); } .view-section { display: none; } .view-section.active { display: block; } /* Calendar grid */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-header { font-size: 11px; font-weight: 700; color: var(--text3); text-align: center; padding: 4px; } .cal-day { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text2); position: relative; text-decoration: none; } .cal-day.has-log { font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); } .cal-day.today { background: var(--primary-soft); border: 2px solid var(--primary); } .cal-day .cal-dot { position: absolute; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; } .cal-dots-container { position: absolute; bottom: 2px; display: flex; gap: 2px; justify-content: center; width: 100%; } .cal-dot { width: 5px; height: 5px; border-radius: 50%; } .cal-dot.bleeding { background: #e07070; } .cal-dot.pain { background: #e8a838; } .cal-dot.stress { background: var(--tag-stress); } .cal-dot.energy { background: var(--tag-energy); } .cal-dot.sleep { background: var(--tag-sleep); } .cal-dot.success { background: var(--success); } /* Summary metric card */ .metric-card { padding: 16px; background: var(--surface); border-radius: 16px; border: 1px solid var(--border); text-align: center; } .metric-card .metric-value { font-size: 28px; font-weight: 700; color: var(--primary); } .metric-card .metric-label { font-size: 12px; color: var(--text3); margin-top: 4px; } .metric-card .metric-emoji { font-size: 24px; display: block; margin-bottom: 4px; } /* Reports Layout Helpers */ .reports-container { padding-top: 24px; padding-bottom: 60px; } .text-center { text-align: center; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .pb-2 { padding-bottom: 8px; } .font-weight-bold { font-weight: 700; } .font-weight-semibold { font-weight: 600; } .text-sm { font-size: 13px; } .text-xs { font-size: 11px; } .text-lg { font-size: 18px; } .text-xl { font-size: 22px; } .text-subtext { color: var(--text3); } .text-secondary { color: var(--text2); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .col-span-2 { grid-column: span 2; } .flex-center { display: flex; justify-content: center; align-items: center; } .flex-wrap { display: flex; flex-wrap: wrap; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .legend-color { width: 8px; height: 8px; border-radius: 50%; } .alert-red { background: rgba(220,53,69,0.1); color: #e04050; border: 1px solid rgba(220,53,69,0.2); } .dl-container { padding-top: 24px; padding-bottom: 60px; } .dl-head { text-align: center; padding-top: 10px; } .dl-back-link { font-size: 14px; color: var(--text3); margin-bottom: 12px; display: inline-block; } .dl-card-spacing { margin-bottom: 20px; } .dl-section-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--primary); } .dl-flow-grid { display: flex; gap: 8px; justify-content: space-between; } .dl-flow-item { flex: 1; text-align: center; cursor: pointer; } .dl-flow-badge { width: 100%; padding: 10px 0; border-radius: 8px; border: 1px solid var(--border); } .dl-flow-hint { display: flex; justify-content: space-between; } .dl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .dl-mt-10 { margin-top: 10px; } .dl-range-input { width: 100%; accent-color: var(--primary); } .dl-range-val { text-align: center; font-weight: bold; color: var(--primary); } .dl-tags-grid { display: flex; flex-wrap: wrap; gap: 8px; } .dl-tag-label { cursor: pointer; } .dl-tag-badge { padding: 8px 16px; border: 1px solid var(--border); } .dl-mb-0 { margin-bottom: 0px !important; margin: 0px; } .dl-range-success { width: 100%; accent-color: var(--success); } .dl-range-warning { width: 100%; accent-color: var(--warning); } .dl-emoji-row { display: flex; justify-content: space-between; font-size: 18px; } .dl-mb-16 { margin-bottom: 16px; } .dl-flex-end { display: flex; align-items: flex-end; padding-bottom: 10px; } .dl-med-row { display: flex; gap: 8px; margin-bottom: 8px; } .dl-med-lg { flex: 2; } .dl-med-sm { flex: 1; } .dl-att-desc { font-size: 13px; color: var(--text3); margin-bottom: 12px; } .dl-att-grid { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .dl-att-item { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .dl-att-img { width: 100%; height: 100%; object-fit: cover; } .dl-del-btn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; } .dl-file-input { padding: 8px; } /* ============================================================ Cycle History Layout (MVC Refactor) ============================================================ */ .history-container { padding-top: 32px; padding-bottom: 48px; } .history-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .history-empty { text-align: center; padding: 48px; } .history-empty-icon { font-size: 48px; margin-bottom: 16px; } .history-notes { color: var(--text2); max-width: 240px; } /* ============================================================ Learn / Knowledge Layout (MVC Refactor) ============================================================ */ .learn-container { padding-top: 32px; padding-bottom: 64px; } .learn-header { text-align: center; margin-bottom: 32px; } .learn-title { font-size: 32px; } .learn-subtitle { max-width: 520px; margin: 8px auto 0; } .learn-filters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .inactive-filter { opacity: 0.6; font-size: 13px; } .active-filter { box-shadow: var(--shadow); font-size: 13px; } .active-filter-all { box-shadow: var(--shadow); font-size: 13px; } .learn-empty { text-align: center; padding: 48px; } .learn-empty-icon { font-size: 40px; margin-bottom: 12px; } .learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .learn-card { display: flex; flex-direction: column; } .learn-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 16px; } .learn-badges { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .learn-phase-badge { font-size: 11px; padding: 2px 10px; } .learn-item-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; } .learn-item-body { font-size: 14px; color: var(--text2); line-height: 1.7; flex: 1; } .learn-disclaimer { margin-top: 32px; }