/* style.css Responsive, accessible, light/dark, Chart.js-friendly Drop into your project and ensure has .light-mode or .dark-mode */ /* ============ Reset / Base ============ */ :root{ --bg: #ffffff; --card-bg: #ffffff; --text: #111827; --muted: #6b7280; --accent: #0ea5a4; /* teal */ --accent-2: #6366f1; /* indigo */ --surface: #f8fafc; --border: #e6e9ee; --success: #16a34a; --danger: #ef4444; --glass: rgba(255,255,255,0.6); --shadow: 0 6px 20px rgba(16,24,40,0.06); --radius: 12px; --max-width: 1100px; --container-padding: 1rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.dark-mode { --bg: #0b1020; --card-bg: #071026; --text: #e6eef8; --muted: #94a3b8; --accent: #22d3ee; --accent-2: #8b5cf6; --surface: #061026; --border: rgba(255,255,255,0.06); --glass: rgba(255,255,255,0.04); --shadow: 0 10px 30px rgba(2,6,23,0.6); } /* Minimal reset */ * {box-sizing: border-box;} html,body {height:100%;} body { margin:0; background: linear-gradient(180deg, var(--bg), var(--surface)); color: var(--text); line-height:1.45; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga"; font-size: 16px; } /* Utility */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 1.25rem var(--container-padding); } /* Accessibility helpers */ .hidden { display:none !important; } .visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; } /* ============ Header / Nav ============ */ #main-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4)); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } body.dark-mode #main-header { background: linear-gradient(180deg, rgba(7,16,38,0.6), rgba(7,16,38,0.4)); } .nav-content { display:flex; align-items:center; gap:1rem; justify-content:space-between; padding: 0.5rem 0; } /* Logo */ .logo a { font-weight:700; font-size:1.15rem; color: var(--text); text-decoration:none; display:inline-block; padding:0.25rem 0.5rem; } .logo a:focus { outline: 3px solid rgba(14,165,164,0.18); border-radius:6px; } /* Nav */ #main-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:0.75rem; align-items:center; } #main-nav a { padding: 0.5rem 0.6rem; display:inline-block; color: var(--muted); text-decoration:none; border-radius:8px; font-weight:600; transition: all 160ms ease; } #main-nav a:hover, #main-nav a:focus { color: var(--text); background: var(--glass); transform:translateY(-1px); } #main-nav a.active { color: var(--accent-2); } /* Header controls */ .header-controls { display:flex; gap:0.5rem; align-items:center; } .menu-toggle { display:none; background:transparent; border: none; font-size:1.2rem; padding:0.45rem; border-radius:8px; cursor:pointer; color:var(--muted); } .menu-toggle:focus { outline: 3px solid rgba(99,102,241,0.14); } /* Dark mode switch */ .switch { display:inline-block; position:relative; width:46px; height:26px; } .switch input { display:none; } .slider { position:absolute; cursor:pointer; inset:0; background:transparent; border-radius:999px; border:2px solid var(--border); } .slider:before { content:""; position:absolute; top:50%; left:6px; transform:translateY(-50%); width:18px; height:18px; border-radius:50%; background:var(--card-bg); box-shadow:0 2px 6px rgba(2,6,23,0.08); transition: transform 200ms ease; } input:checked + .slider:before { transform: translateY(-50%) translateX(18px); } .slider.round { border-radius:999px; } /* ============ Hero / Form ============ */ #hero { padding: 2.25rem 0; } .hero-content { display:grid; gap:1rem; align-items:start; } .main-title { margin:0; font-size:clamp(1.5rem, 3vw, 2.25rem); line-height:1.05; } .description { margin:0.25rem 0 1rem; color:var(--muted); max-width:70ch; } /* Form */ #biorhythm-form { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02)); padding:1rem; border-radius:14px; border:1px solid var(--border); max-width:100%; } .form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; align-items:start; } .form-group { display:flex; flex-direction:column; gap:0.4rem; } .form-group label { font-weight:600; color:var(--muted); font-size:0.95rem; } .form-group input[type="date"], .form-group input[type="text"], .form-group input[type="email"], select { padding:0.6rem 0.65rem; border-radius:8px; border:1px solid var(--border); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.01)); color: var(--text); min-height:42px; } .form-group input::placeholder { color: #9aa3b2; } .optional-group { opacity:0.98; } /* Target & button */ .target-group { margin-top:0.5rem; } .btn-calculate { margin-top:0.75rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: white; padding:0.75rem 1rem; border-radius:10px; border: none; font-weight:700; cursor: pointer; box-shadow: 0 10px 25px rgba(99,102,241,0.08); } .btn-calculate:active { transform: translateY(1px); } .btn-calculate:focus { outline: 3px solid rgba(14,165,164,0.18); } /* ============ Output / Chart ============ */ .output-section { padding: 1rem 0 2rem; } .output-container { display:flex; flex-direction:column; gap:1rem; background: var(--card-bg); border-radius:12px; padding:1rem; border:1px solid var(--border); box-shadow: var(--shadow); } .forecast-nav { display:flex; gap:0.5rem; align-items:center; justify-content:space-between; } .nav-btn { background:transparent; border:1px solid var(--border); padding:0.5rem 0.6rem; border-radius:8px; cursor:pointer; color:var(--muted); } .nav-btn:focus { outline: 3px solid rgba(99,102,241,0.12); } .chart-area { width:100%; display:block; padding:0.75rem 0; } .chart-area canvas { width:100% !important; height: 360px !important; display:block; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); } /* Summary area */ .summary-area { display:grid; gap:0.5rem; } .summary-area h3 { margin:0; font-size:1.05rem; } #daily-summary-text { color:var(--muted); padding:0.5rem 0; } #compatibility-summary { margin-top:0.5rem; padding:0.6rem; border-radius:10px; border:1px dashed var(--border); } /* Extra features */ .extra-features { display:flex; gap:0.5rem; flex-wrap:wrap; } .btn-feature { background:transparent; border:1px solid var(--border); padding:0.5rem 0.7rem; border-radius:8px; cursor:pointer; color:var(--text); } .disclaimer-text { font-size:0.9rem; color:var(--muted); margin-top:0.5rem; } /* ============ Info / Cards ============ */ .info-section, .benefits-section, .faq-section, .blog-teaser { padding: 1.5rem 0; } .benefit-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1rem; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius:12px; padding:0.9rem; border:1px solid var(--border); box-shadow: var(--shadow); } .card-title { margin:0 0 0.5rem 0; font-size:1rem; color:var(--accent-2); } /* FAQ */ .faq-list { display:grid; gap:0.5rem; } .faq-question { width:100%; text-align:left; background:transparent; border:1px solid var(--border); padding:0.6rem 0.8rem; border-radius:10px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; color:var(--text); font-weight:600; } .faq-question .icon { font-weight:700; color:var(--muted); margin-left:0.75rem; } .faq-answer { padding:0.6rem 0.75rem; color:var(--muted); } /* Blog & cards */ .blog-articles { display:grid; gap:1rem; grid-template-columns: repeat(2,1fr); } /* Footer */ footer { margin-top:2rem; border-top:1px solid var(--border); padding:1.5rem 0; background: transparent; } .footer-content { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem; align-items:start; } .footer-links ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.35rem; } .footer-links a { text-decoration:none; color:var(--muted); } .footer-links a:hover { color:var(--text); } /* ============ Responsive ============ */ @media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } .benefit-cards { grid-template-columns: repeat(2,1fr); } .blog-articles { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; } .chart-area canvas { height: 320px !important; } } @media (max-width: 720px) { #main-nav { display:none; } .menu-toggle { display:inline-block; } .logo a { font-size:1rem; } .benefit-cards { grid-template-columns: 1fr; } .chart-area canvas { height: 260px !important; } .nav-content { gap:0.5rem; } } /* Mobile menu (simple) */ .mobile-nav { display:none; } .mobile-nav.open { display:block; position:absolute; top:64px; right:12px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:0.5rem; box-shadow: 0 12px 30px rgba(2,6,23,0.12); } /* ============ Tiny touch-ups ============ */ a, button { -webkit-tap-highlight-color: transparent; } button { font-family: inherit; } input, button, select, textarea { font-family: inherit; } /* Focus-visible for keyboard users */ :focus { outline: none; } :focus-visible { outline: 3px solid rgba(99,102,241,0.12); border-radius:8px; } /* Chart.js canvas safe container (helps responsiveness) */ .chart-area { position: relative; min-height: 220px; } /* Print-friendly */ @media print { body { background: #fff; color:#000; } #main-header, .extra-features, .menu-toggle, .header-controls { display:none !important; } .container { padding:0; max-width:100%; } .chart-area canvas { height: 420px !important; } } /* ============ Helpful small classes ============ */ .kicker { text-transform:uppercase; font-size:0.75rem; color:var(--muted); letter-spacing:0.06em; } .lead { font-size:1.05rem; color:var(--muted); } /* Small state colors for compatibility text */ .compat-good { color: var(--success); font-weight:700; } .compat-bad { color: var(--danger); font-weight:700; }