/* | AAGS Calculator — component styles. | Tailwind utility classes are provided by the CDN in the layout; this file | holds the reusable component classes and a few custom rules. Dark mode is | driven by the `.dark` class Tailwind toggles on . */ /* ---- Cards & surfaces ---- */ .card { border-radius: .75rem; border: 1px solid #e2e8f0; background: #ffffff; padding: 1.25rem; } @media (min-width: 640px) { .card { padding: 1.5rem; } } .dark .card { border-color: #1e293b; background: #0f172a; } .result-card { border-radius: .75rem; border: 1px solid #bae6fd; background: #f0f9ff; padding: 1.25rem; } @media (min-width: 640px) { .result-card { padding: 1.5rem; } } .dark .result-card { border-color: #0c4a6e; background: rgba(8, 47, 73, .4); } /* ---- Forms ---- */ .lbl { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .25rem; color: #334155; } .dark .lbl { color: #cbd5e1; } .field { width: 100%; border-radius: .5rem; border: 1px solid #cbd5e1; background: #f8fafc; padding: .5rem .75rem; color: inherit; } .field:focus { outline: none; box-shadow: 0 0 0 2px #0ea5e9; } .dark .field { border-color: #334155; background: #1e293b; } /* ---- Buttons ---- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .5rem; background: #0284c7; color: #fff; font-weight: 600; padding: .625rem 1.25rem; border: none; cursor: pointer; transition: background .15s ease; } .btn-primary:hover { background: #0369a1; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid #cbd5e1; padding: .625rem 1rem; background: transparent; color: inherit; cursor: pointer; transition: background .15s ease; } .btn-ghost:hover { background: #f1f5f9; } .dark .btn-ghost { border-color: #334155; } .dark .btn-ghost:hover { background: #1e293b; } /* ---- Result stats ---- */ .stat { border-radius: .5rem; background: #ffffff; border: 1px solid #e2e8f0; padding: 1rem; } .dark .stat { background: #0f172a; border-color: #1e293b; } .stat-val { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #0369a1; } .dark .stat-val { color: #38bdf8; } .stat-lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-top: .25rem; } .dark .stat-lbl { color: #94a3b8; } .err { font-size: .875rem; color: #dc2626; margin-top: .25rem; } .dark .err { color: #f87171; } /* Love calculator: animated progress bar (no JS needed) */ .love-bar { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #ec4899, #f43f5e, #a855f7); width: var(--love-pct, 0%); animation: loveGrow 0.9s ease-out both; } @keyframes loveGrow { from { width: 0; } to { width: var(--love-pct, 0%); } } .gender-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; font-size: .8rem; color: #fff; } .gender-male { background: #3b82f6; } .gender-female { background: #ec4899; } /* Utility used by tabbed calculators */ .tab-btn.is-active { background: #0284c7; color: #fff; border-color: #0284c7; } [hidden] { display: none !important; }