/* v44 --- polished spacing, dark-mode bg, compact fields, toasts + COMPLETE FINAL FIXES */ /* ----------- base ----------- */ :root{ --bg:#ffffff; --text:#111; --muted:#5b6772; --card:#f8fafc; --card-border:#e6edf3; --brand:#001F35; --accent:#0ea5a6; --btn:#ffc53d; --btn-text:#111; --btn-border:#cda231; --btn-hover:#ffb700; --good:#16a34a; --shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.12); --radius:14px; --radius-pill:999px; --font-sans:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; --font-head:'Montserrat', var(--font-sans); --container:980px; --g:14px; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;font:16px/1.45 var(--font-sans);color:var(--text);background:#f4f6f8;} [hidden], .hidden { display: none !important; visibility: hidden !important; } .leadgate[hidden] { display: none !important; } .only-print { display: none; } .report-logo { display: none; } /* ----------- header ----------- */ .topbar { position: sticky; top: 0; z-index: 9999; background: #0b2b45; color: #eef6ff; border-bottom: 1px solid var(--card-border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand cta"; align-items: center; gap: 16px; } .topbar .brand{display:flex;align-items:center;gap:16px;grid-area: brand;} .logo{width:68px;height:68px;object-fit:contain;border-radius:12px;} .titles h1{margin:0 0 4px;font:700 20px/1.2 var(--font-head);color:#eef6ff;} .titles .tagline{margin:0;color:#d6e6f5;} .titles .mini{margin:6px 0 0;color:#ffffff;opacity:.9;font-size:12px;} .titles .subtitle{margin:0 0 2px;font:600 14px/1.2 var(--font-head);color:#cfe6ff;letter-spacing:.2px;} .topbar .cta-stack{grid-area:cta;display:flex;flex-direction:column;align-items:flex-end;gap:6px;justify-self:end;} .cta-stack .help{text-align:right;max-width:280px;white-space:nowrap;font-size:13px;line-height:1.2;margin:0;} .cta-stack .btn{white-space:nowrap;margin:0;} .switchline{display:inline-flex;align-items:center;gap:8px;position:relative;margin-top:8px;} .switchline input{appearance:none;width:44px;height:24px;border-radius:999px;background:#a3b8cc;outline:none;cursor:pointer;position:relative;} .switchline input:checked{background:#2b9af3} .switchline input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s ease;} .switchline input:checked::after{transform:translateX(20px)} .pill{display:none;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font:600 12px/1 system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#f7c948;border:1px solid #e0b646;color:#111;box-shadow:0 2px 6px rgba(0,0,0,.12),inset 0 -1px 0 rgba(0,0,0,.08);vertical-align:middle;} body.is-pro #proPill{display:inline-flex;} body.is-pro .cta-stack .help, body.is-pro .cta-stack .btn{display:none !important;} @media (max-width:780px){ .topbar{grid-template-columns:1fr;grid-template-areas:"brand" "cta";row-gap:10px;padding:10px 14px;} .topbar .brand{gap:10px;} .topbar .logo{width:48px;height:48px;} .topbar .titles h1{font-size:16px;line-height:1.15;} .topbar .titles .tagline{font-size:11px;line-height:1.2;} .topbar .cta-stack{align-items:flex-end;justify-self:end;} .cta-stack .help{font-size:12px;max-width:100%;} .switchline{margin-top:6px;} } @media (max-width:450px){ .topbar .titles .tagline{font-size:10px;max-width:30ch;} } /* ----------- buttons ----------- */ .btn{appearance:none;border:1px solid var(--btn-border);background:var(--btn);color:var(--btn-text);font-weight:700;padding:12px 16px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow);transition:transform .04s ease,background .15s ease,border-color .15s ease;} .btn:hover{background:var(--btn-hover)} .btn:active{transform:translateY(1px)} .btn.small{padding:8px 12px;font-weight:600;border-radius:10px} .btn.outline{background:transparent;border:1px solid var(--brand);color:#111} .btn.outline:hover{background:#e7f0f8} .primary{background:var(--btn);color:var(--btn-text)} .primary:hover{background:var(--btn-hover)} /* ----------- layout ----------- */ .container{max-width:var(--container);margin:28px auto;padding:0 14px} .card{background:#ffffff;border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:18px 0;} .card h2{font:700 22px/1.2 var(--font-head);margin:0 0 10px} .card .sub{color:var(--muted);margin:0 0 10px;line-height:1.4;} .divider{height:1px;background:var(--card-border);margin:12px 0} .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:end;} .grid label{display:flex;flex-direction:column;gap:6px;font-weight:500;max-width:560px;} .grid .row{display:flex;gap:8px;align-items:center;} .grid .row.height input{width:100%} input,select,textarea{width:100%;padding:10px 12px;border:1px solid #cfd8e3;border-radius:10px;background:#fff;color:var(--text);outline:none;} input::placeholder{color:#9aa7b4} .actions{grid-column:1/-1;display:flex;justify-content:center;margin-top:12px} .disclaimer{grid-column:1/-1;font-size:12px;color:var(--muted);margin:8px 0 0} .spinner{display:flex;gap:12px;align-items:center;justify-content:center;padding:14px} .spinner .wheel{width:26px;height:26px;border-radius:50%;border:3px solid #cbd5e1;border-top-color:#2b9af3;animation:spin 1s linear infinite;} @keyframes spin{to{transform:rotate(360deg)}} .hidden{display:none !important} /* lead gate / modal */ .leadgate{position:fixed;inset:0;background:rgba(17,24,39,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:10000;} .leadcard{background:#fff;color:#111;width:min(560px,94vw);border-radius:16px;padding:18px;box-shadow:var(--shadow);} .leadcard h3{margin:0 0 8px;font:700 18px/1.2 var(--font-head)} .leadcard input{background:#fff} .tiny{font-size:12px;color:#6b7280;margin-top:6px} /* FIX: Center all 3 buttons vertically stacked */ .leadcard .row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;} .leadcard .row .btn,.leadcard .row button{width:100%;max-width:360px;text-align:center;margin:0;} .leadcard .btn#buyMonthly,.leadcard button#buyMonthly{order:1;} .leadcard .btn#buyLifetime,.leadcard button#buyLifetime{order:2;} .leadcard .btn.maybe,.leadcard .btn#proClose,.leadcard button#proClose{background:#6b7280;color:#fff;border:1px solid #6b7280;order:3;opacity:0.9;} .leadcard .btn.maybe:hover,.leadcard .btn#proClose:hover,.leadcard button#proClose:hover{opacity:1;background:#5a6270;} @media (max-width:520px){ .leadcard .row .btn{max-width:100%;} } /* table */ .table{width:100%;border-collapse:collapse} .table th,.table td{border-bottom:1px solid var(--card-border);padding:10px 8px;text-align:left} .hp-table td{white-space:nowrap;} .footer{max-width:var(--container);margin:28px auto;padding:18px 14px;color:#6b7b8a;display:flex;gap:10px;justify-content:space-between;align-items:center} /* ----------- dark mode ----------- */ body.dark{--bg:#0f172a;--text:#e7eef5;--muted:#b9c7d6;--card:#122536;--card-border:#23384b;--brand:#d9ecff;--btn:#ffd769;--btn-text:#0b1a28;--btn-border:#d6b24c;--btn-hover:#ffc940;background:var(--bg);color:var(--text);} body.dark .topbar{background:#071a2f;color:#eaf4ff} body.dark .leadcard{background:#ffffff;color:#111} body.dark .card{background:#ffffff;color:#111;border-color:#e6edf3;} body.dark .card *{color:#111;} body.dark input,body.dark select,body.dark textarea{background:#ffffff;color:#111;border-color:#cfd8e3} body.dark input::placeholder{color:#9aa7b4} /* Keep FREE-area headings/subheads black in Dark Mode */ body.is-dark .card:not(#proBlock .card), body.dark .card:not(#proBlock .card), :root[data-theme="dark"] .card:not(#proBlock .card) { /* lock the token(s) these cards use for titles & text */ --head: #111; --text: #111; } /* Belt & suspenders: directly enforce on common heading tags */ body.is-dark .card:not(#proBlock .card) h1, body.is-dark .card:not(#proBlock .card) h2, body.is-dark .card:not(#proBlock .card) h3, body.is-dark .card:not(#proBlock .card) .tagline, body.dark .card:not(#proBlock .card) h1, body.dark .card:not(#proBlock .card) h2, body.dark .card:not(#proBlock .card) h3, body.dark .card:not(#proBlock .card) .tagline, :root[data-theme="dark"] .card:not(#proBlock .card) h1, :root[data-theme="dark"] .card:not(#proBlock .card) h2, :root[data-theme="dark"] .card:not(#proBlock .card) h3, :root[data-theme="dark"] .card:not(#proBlock .card) .tagline { color: #111 !important; } /* FREE area: keep all body/copy/link/muted text black in Dark Mode */ body.is-dark .card:not(#proBlock .card), body.dark .card:not(#proBlock .card), /* Make all common text inside FREE cards black in dark mode */ :root[data-theme="dark"] .card:not(#proBlock) p, :root[data-theme="dark"] .card:not(#proBlock) li, :root[data-theme="dark"] .card:not(#proBlock) small, :root[data-theme="dark"] .card:not(#proBlock) .help, :root[data-theme="dark"] .card:not(#proBlock) .note, :root[data-theme="dark"] .card:not(#proBlock) .subtle, :root[data-theme="dark"] .card:not(#proBlock) a, :root[data-theme="dark"] .card:not(#proBlock) td, :root[data-theme="dark"] .card:not(#proBlock) th { color: #111 !important; opacity: 1 !important; /* in case something lowered opacity */ text-decoration-color: #111 !important; /* link underline color */ } /* Enforce on typical elements that showed up light */ body.is-dark .card:not(#proBlock .card) p, body.is-dark .card:not(#proBlock .card) li, body.is-dark .card:not(#proBlock .card) small, body.is-dark .card:not(#proBlock .card) .help, body.is-dark .card:not(#proBlock .card) .note, body.is-dark .card:not(#proBlock .card) .muted, body.is-dark .card:not(#proBlock .card) .subtle, body.is-dark .card:not(#proBlock .card) a, body.is-dark .card:not(#proBlock .card) th, body.is-dark .card:not(#proBlock .card) td, body.dark .card:not(#proBlock .card) p, body.dark .card:not(#proBlock .card) li, body.dark .card:not(#proBlock .card) small, body.dark .card:not(#proBlock .card) .help, body.dark .card:not(#proBlock .card) .note, body.dark .card:not(#proBlock .card) .muted, body.dark .card:not(#proBlock .card) .subtle, body.dark .card:not(#proBlock .card) a, body.dark .card:not(#proBlock .card) th, body.dark .card:not(#proBlock .card) td, :root[data-theme="dark"] .card:not(#proBlock .card) p, :root[data-theme="dark"] .card:not(#proBlock .card) li, :root[data-theme="dark"] .card:not(#proBlock .card) small, :root[data-theme="dark"] .card:not(#proBlock .card) .help, :root[data-theme="dark"] .card:not(#proBlock .card) .note, :root[data-theme="dark"] .card:not(#proBlock .card) .muted, :root[data-theme="dark"] .card:not(#proBlock .card) .subtle, :root[data-theme="dark"] .card:not(#proBlock .card) a, :root[data-theme="dark"] .card:not(#proBlock .card) th, :root[data-theme="dark"] .card:not(#proBlock .card) td { color: #111 !important; opacity: 1 !important; /* in case muted styles lower opacity */ } /* ===== FREE cards: force inline/“accent” text to black in Dark Mode ===== */ /* Your Daily Targets — the pale "95 oz/day" and "122–166 g/day" are links/accent text */ body.is-dark #targetsCard a:not(.btn), body.dark #targetsCard a:not(.btn), :root[data-theme="dark"] #targetsCard a:not(.btn) { color: #111 !important; border-bottom-color: #111 !important; /* if you underline links with a border */ opacity: 1 !important; } /* Also catch any muted/subtle spans that may wrap those values */ body.is-dark #targetsCard .muted, body.dark #targetsCard .muted, :root[data-theme="dark"] #targetsCard .muted, body.is-dark #targetsCard .subtle, body.dark #targetsCard .subtle, :root[data-theme="dark"] #targetsCard .subtle { color: #111 !important; opacity: 1 !important; } /* Share/Reviews card — both helper paragraphs */ body.is-dark #shareReviewCard p, body.dark #shareReviewCard p, :root[data-theme="dark"] #shareReviewCard p, body.is-dark #shareReviewCard .lead, body.dark #shareReviewCard .lead, :root[data-theme="dark"] #shareReviewCard .lead, body.is-dark #shareReviewCard .sublead, body.dark #shareReviewCard .sublead, :root[data-theme="dark"] #shareReviewCard .sublead { color: #111 !important; opacity: 1 !important; } /* --- Dark mode: force normal text color in WL + Results cards --- */ body.dark #wlCard h3, body.dark #wlCard p, body.dark #wlCard li, body.dark #wlCard span, body.dark #wlCard strong, body.dark #wlCard em { color: var(--text) !important; } /* keep buttons and links branded */ body.dark #wlCard .btn, body.dark #wlCard a.btn, body.dark #wlCard .btn.outline { color: inherit; } /* Do the same for the "Your Daily Targets" (results) card just in case */ body.dark #results h2, body.dark #results p, body.dark #results li, body.dark #results span, body.dark #results strong, body.dark #results em { color: var(--text) !important; } /* ----------- print ----------- */ @media print{ .no-print,header,.topbar,#leadgate,#resultsProCard{display:none !important;} #results,#wlSection,#proBlock{display:block !important;box-shadow:none;border-color:#e5e7eb;break-inside:auto;page-break-inside:auto;} #results[hidden],#wlSection[hidden],#proBlock[hidden]{display:block !important;} .table{break-inside:auto;page-break-inside:auto;} .table tr{break-inside:avoid;page-break-inside:avoid;page-break-after:auto;} #results,#wlSection,#proBlock{margin-bottom:14px;} .report-logo{display:none !important;} a[href]:after{content:"";} .divider{margin:10px 0;} h2{font:700 18px/1.2 var(--font-head);margin:0 0 8px;} #results h2,#results h3,#wlSection h2{margin:8px 0 6px;} #results p,#wlSection p{margin:6px 0;} #results ul{margin:6px 0 8px 18px;} .table th,.table td{padding:6px 6px;} .topbar .logo{display:none !important;} .report-logo{display:block !important;height:56px;object-fit:contain;margin:0 auto 8px auto;} } @media print and (max-width:780px){ .report-logo{height:42px;margin-bottom:6px;} } /* --- Toasts --- */ .toast-area{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;gap:8px} .toast{background:#374151;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);font:500 14px/1.25 Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease} .toast.show{opacity:1;transform:translateY(0)} .toast.success{background:#16a34a} .toast.error{background:#dc2626} .toast.dark{background:#111827} /* --- compact controls --- */ #calcForm .row{display:flex;align-items:center;gap:10px;} #calcForm input[type="number"]{width:12ch;} #calcForm .row.height input[type="number"]{width:7ch;} #unit,#goalWeightUnit{inline-size:max-content;min-width:7ch;} #activity,#goal{inline-size:max-content;min-width:28ch;} #heightUnit{min-width:9 ch;} #wlSection,#results{margin-top:14px} .card{scroll-margin-top:96px} #proteinBlock p,#proteinBlock ul,#waterBlock p,#nutrientsBlock table{margin-top:4px;margin-bottom:8px} #proteinBlock ul li{margin-bottom:4px} html,body{overflow-x:hidden;} .container{margin:28px auto;padding:0 14px;max-width:var(--container);} .grid .row{flex-wrap:wrap;} @media (max-width:640px){ .grid{grid-template-columns:1fr;} #activity,#goal,#unit,#goalWeightUnit,#heightUnit{width:100% !important;min-width:0 !important;} #calcForm input[type="number"]{width:100%;max-width:100%;} .actions{justify-content:center;} } .footer{position:relative;} .container{margin-left:auto;margin-right:auto;padding-bottom:84px;} /* ==== FREE RESULTS SPACING ==== */ #results,#wlSection{line-height:1.35;} #results h2,#results h3,#wlSection h2,#wlSection h3{margin-top:6px !important;margin-bottom:6px !important;line-height:1.25;font-weight:700;color:var(--brand);} #results p:not(.wl-cta), #wlSection p:not(.wl-cta) { margin-top:3px !important; margin-bottom:6px !important; } #results ul,#wlSection ul{margin-top:3px !important;margin-bottom:6px !important;padding-left:18px;} #results li,#wlSection li{margin:2px 0 !important;line-height:1.35;} .card + .card{margin-top:18px !important;} #wlSection .estimates p{margin:2px 0 !important;} #proteinBlock p,#waterBlock p,#proteinBlock ul{margin-top:3px !important;margin-bottom:6px !important;} #nutrientsBlock table{margin-top:4px !important;} #results p strong,#wlSection p strong{color:var(--brand);} #results .highlight,#wlSection .highlight{color:var(--accent);font-weight:700;} #results table th,#results table td{font-weight:500;} /* ========= PRO AREA FIXES ========= */ #proBlock h1,#proBlock h2,#proBlock h3,#proBlock h4,#proBlock h5,#proBlock h6{color:#000 !important;} #proBlock h2{margin:0 0 6px !important;} #proBlock h3{margin:10px 0 4px !important;font-size:18px;} #proBlock .sub{margin:0 0 8px !important;line-height:1.35;} #proBlock p{margin:3px 0 6px !important;line-height:1.35;} /* CRITICAL FIX: Meals & Snacks - one line per meal */ #proBlock .meal-guide, #proBlock .quick-meals, #proBlock .qs-meals, #proBlock .pro-plan, #proBlock #proPlan{display:block !important;margin:6px 0 10px !important;} #proBlock .meal-guide > *, #proBlock .quick-meals > *, #proBlock .qs-meals > *, #proBlock .pro-plan > *, #proBlock #proPlan > *{display:block !important;width:100% !important;margin:0 0 6px 0 !important;padding:0 !important;line-height:1.35 !important;} #proBlock #dailyMacrosLine{margin:2px 0 10px !important;} /* High-Protein Foods table */ #proBlock table:not(#trackTable):not(#trkTable){table-layout:auto !important;width:100%;margin-top:6px !important;} #proBlock table:not(#trackTable):not(#trkTable) th, #proBlock table:not(#trackTable):not(#trkTable) td{padding:6px 8px !important;white-space:nowrap;} #proBlock table:not(#trackTable):not(#trkTable) th:first-child, #proBlock table:not(#trackTable):not(#trkTable) td:first-child{white-space:normal;} #proBlock table:not(#trackTable):not(#trkTable) th:nth-child(2), #proBlock table:not(#trackTable):not(#trkTable) th:nth-child(3), #proBlock table:not(#trackTable):not(#trkTable) th:nth-child(4), #proBlock table:not(#trackTable):not(#trkTable) td:nth-child(2), #proBlock table:not(#trackTable):not(#trkTable) td:nth-child(3), #proBlock table:not(#trackTable):not(#trkTable) td:nth-child(4){text-align:right;min-width:60px;} #proBlock .track-intro{margin:2px 0 8px !important;} /* DESKTOP FIX 1: Tracking form - LEFT-ALIGNED at left margin */ #proBlock #trackForm, #proBlock #trkGrid{display:block !important;margin:8px 0 !important;} #proBlock #trackForm label, #proBlock #trkGrid label{display:block !important;width:100% !important;margin:0 0 10px 0 !important;text-align:left !important;} #proBlock #trackForm label > span:first-child, #proBlock #trkGrid label > span:first-child{display:block !important;margin-bottom:4px !important;font-weight:500 !important;} #proBlock #trackForm input, #proBlock #trackForm select, #proBlock #trkGrid input, #proBlock #trkGrid select{display:block !important;width:100% !important;max-width:400px !important;box-sizing:border-box !important;margin:0 !important;} #proBlock #trackForm input[type="date"], #proBlock #trkGrid input[type="date"]{appearance:none;-webkit-appearance:none;-moz-appearance:none;} #proBlock #trackForm input[type="checkbox"], #proBlock #trkGrid input[type="checkbox"]{width:auto !important;display:inline-block !important;margin:4px 0 0 0 !important;} #proBlock #trackForm .actions, #proBlock #trkGrid .actions{display:flex !important;justify-content:flex-start !important;gap:10px !important;margin:12px 0 0 0 !important;} /* CRITICAL FIX: Historical table */ #proBlock #trackTableWrap{margin:10px 0 0 0 !important;padding:0 !important;overflow-x:auto !important;} #proBlock #trackTable, #proBlock #trkTable{width:100% !important;border-collapse:collapse !important;border-spacing:0 !important;table-layout:fixed !important;margin:0 !important;} #proBlock #trackTable thead, #proBlock #trackTable tbody, #proBlock #trkTable thead, #proBlock #trkTable tbody{display:table-row-group !important;} #proBlock #trackTable tr, #proBlock #trkTable tr{display:table-row !important;margin:0 !important;padding:0 !important;} #proBlock #trackTable th, #proBlock #trackTable td, #proBlock #trkTable th, #proBlock #trkTable td{padding:4px 8px !important;text-align:center !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;vertical-align:middle !important;font-size:14px !important;border-bottom:1px solid var(--card-border) !important;} #proBlock #trackTable th:first-child, #proBlock #trackTable td:first-child, #proBlock #trkTable th:first-child, #proBlock #trkTable td:first-child{text-align:left !important;} /* CORRECT FIX: Override inline styles and target the right table ID */ /* 1. Override the grid gap that's causing spacing */ #proBlock .grid[style*="gap"], #proBlock div[style*="gap"] { gap: 0 14px !important; /* Keep horizontal gap, remove vertical gap */ } /* 2. Reset table wrapper and table with correct ID */ #proBlock #trkTable, #proBlock table#trkTable, #proBlock .table { border-collapse: collapse !important; border-spacing: 0 !important; margin-top: 8px !important; margin-bottom: 0 !important; width: 100% !important; } /* 3. Universal reset for everything inside the table */ #proBlock #trkTable *, #proBlock table#trkTable *, #proBlock .table * { margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 1 !important; box-sizing: border-box !important; } /* 4. Rebuild table structure */ #proBlock #trkTable thead, #proBlock #trkTable tbody { display: table-row-group !important; } #proBlock #trkTable tr { display: table-row !important; } #proBlock #trkTable th, #proBlock #trkTable td { display: table-cell !important; padding: 4px 8px !important; text-align: center !important; vertical-align: middle !important; border-bottom: 1px solid #e6edf3 !important; line-height: 1.2 !important; font-size: 14px !important; } #proBlock #trkTable th:first-child, #proBlock #trkTable td:first-child { text-align: left !important; } #proBlock #trkTable tbody tr:last-child td { border-bottom: 0 !important; } /* 5. Streak message spacing */ #proBlock #streakMsg, #proBlock p#streakMsg, #proBlock .tiny { margin-top: 8px !important; margin-bottom: 0 !important; padding: 0 !important; line-height: 1.4 !important; } /* Desktop: Uniform column widths */ #proBlock #trackTable thead th:nth-child(1), #proBlock #trackTable tbody td:nth-child(1), #proBlock #trkTable thead th:nth-child(1), #proBlock #trkTable tbody td:nth-child(1){width:20%;} #proBlock #trackTable thead th:nth-child(2), #proBlock #trackTable tbody td:nth-child(2), #proBlock #trkTable thead th:nth-child(2), #proBlock #trkTable tbody td:nth-child(2){width:11%;} #proBlock #trackTable thead th:nth-child(3), #proBlock #trackTable tbody td:nth-child(3), #proBlock #trkTable thead th:nth-child(3), #proBlock #trkTable tbody td:nth-child(3){width:11%;} #proBlock #trackTable thead th:nth-child(4), #proBlock #trackTable tbody td:nth-child(4), #proBlock #trkTable thead th:nth-child(4), #proBlock #trkTable tbody td:nth-child(4){width:11%;} #proBlock #trackTable thead th:nth-child(5), #proBlock #trackTable tbody td:nth-child(5), #proBlock #trkTable thead th:nth-child(5), #proBlock #trkTable tbody td:nth-child(5){width:11%;} #proBlock #trackTable thead th:nth-child(6), #proBlock #trackTable tbody td:nth-child(6), #proBlock #trkTable thead th:nth-child(6), #proBlock #trkTable tbody td:nth-child(6){width:11%;} #proBlock #trackTable thead th:nth-child(7), #proBlock #trackTable tbody td:nth-child(7), #proBlock #trkTable thead th:nth-child(7), #proBlock #trkTable tbody td:nth-child(7){width:12%;} #proBlock #trackTable thead th:nth-child(8), #proBlock #trackTable tbody td:nth-child(8), #proBlock #trkTable thead th:nth-child(8), #proBlock #trkTable tbody td:nth-child(8){width:13%;} /* ========= MOBILE FIXES ========= */ @media (max-width:780px){ #proBlock h3{margin:8px 0 4px !important;font-size:16px;} #proBlock .sub{margin:0 0 6px !important;} #proBlock .meal-guide,#proBlock #proPlan{margin:4px 0 8px !important;} #proBlock .meal-guide > *,#proBlock #proPlan > *{margin:0 0 4px 0 !important;} #proBlock #dailyMacrosLine{margin:2px 0 8px !important;} #proBlock table:not(#trackTable):not(#trkTable){margin-top:4px !important;} #proBlock .track-intro{margin:2px 0 6px !important;} #proBlock #trackTable th, #proBlock #trackTable td, #proBlock #trkTable th, #proBlock #trkTable td{padding:4px 2px !important;font-size:11px !important;} /* Mobile: column widths to fit all within card */ #proBlock #trackTable thead th:nth-child(1), #proBlock #trackTable tbody td:nth-child(1), #proBlock #trkTable thead th:nth-child(1), #proBlock #trkTable tbody td:nth-child(1){width:18%;} #proBlock #trackTable thead th:nth-child(2), #proBlock #trackTable tbody td:nth-child(2), #proBlock #trkTable thead th:nth-child(2), #proBlock #trkTable tbody td:nth-child(2){width:11%;} #proBlock #trackTable thead th:nth-child(3), #proBlock #trackTable tbody td:nth-child(3), #proBlock #trkTable thead th:nth-child(3), #proBlock #trkTable tbody td:nth-child(3){width:11%;} #proBlock #trackTable thead th:nth-child(4), #proBlock #trackTable tbody td:nth-child(4), #proBlock #trkTable thead th:nth-child(4), #proBlock #trkTable tbody td:nth-child(4){width:11%;} #proBlock #trackTable thead th:nth-child(5), #proBlock #trackTable tbody td:nth-child(5), #proBlock #trkTable thead th:nth-child(5), #proBlock #trkTable tbody td:nth-child(5){width:12%;} #proBlock #trackTable thead th:nth-child(6), #proBlock #trackTable tbody td:nth-child(6), #proBlock #trkTable thead th:nth-child(6), #proBlock #trkTable tbody td:nth-child(6){width:11%;} #proBlock #trackTable thead th:nth-child(7), #proBlock #trackTable tbody td:nth-child(7), #proBlock #trkTable thead th:nth-child(7), #proBlock #trkTable tbody td:nth-child(7){width:13%;} #proBlock #trackTable thead th:nth-child(8), #proBlock #trackTable tbody td:nth-child(8), #proBlock #trkTable thead th:nth-child(8), #proBlock #trkTable tbody td:nth-child(8){width:13%;} /* MOBILE FIX 2: Eliminate ALL space between data rows */ #proBlock #trackTable tbody tr, #proBlock #trkTable tbody tr{line-height:1 !important;border-bottom:1px solid var(--card-border) !important;} #proBlock #trackTable tbody td, #proBlock #trkTable tbody td{padding:2px 2px !important;line-height:1 !important;} } @media (max-width:480px){ #proBlock #trackForm, #proBlock #trkGrid{grid-template-columns:1fr !important;} } #proBlock.card{overflow-x:hidden !important;} /* ===== MOTIVATION & FASTING (add-on) ===== */ /* Daily Motivation banner */ .motivation{ margin:14px auto 0; padding:10px 14px; background: var(--btn); /* match yellow buttons */ border:1px solid var(--btn-border); border-radius:10px; color: var(--btn-text); /* readable on yellow */ box-shadow: var(--shadow); font:600 14px/1.35 var(--font-sans); position: relative; } .motivation .title{ font:700 16px/1.2 var(--font-head); margin:0 0 4px; } .motivation .close{ position:absolute; right:10px; top:8px; font-weight:700; cursor:pointer; background:transparent; border:0; color:#6b7280; } @media (max-width:780px){ .motivation{ font-size:13px; } } @keyframes sparkFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Fasting clock */ .fast-card { margin: 10px 0 14px; padding: 12px 14px; background:#f8fafc; border:1px solid var(--card-border); border-radius:12px; } .fast-card h3 { margin: 0 0 8px; font: 700 16px/1.2 var(--font-head); color:#111; } .fast-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .fast-time { font: 700 16px/1 var(--font-sans); } .fast-note { margin:6px 0 0; color: var(--muted); font-size: 12px; } .fast-card .btn.small { padding:8px 12px; border-radius:10px; } /* tighten white space before footer */ .container { padding-bottom: 24px; } /* was likely 48–64 */ .container > :last-child { margin-bottom: 16px; } #proBlock { margin-bottom: 16px; } /* the PRO card (tracking area) */ .card:last-child { margin-bottom: 16px; } /* guard if tracking lives in a .card */ footer#siteFooter { margin-top: 16px; } /* make sure footer tucks up neatly */ /* ==== Share + Review Card ==== */ #shareReviewCard { margin-top: 28px; margin-bottom: 24px; background: var(--card-bg, #fff); border: 1px solid var(--card-border, #e6edf3); border-radius: 12px; padding: 20px 18px; box-shadow: var(--shadow, 0 4px 10px rgba(0,0,0,.04)); text-align: center; } #shareReviewCard h3 { font: 700 18px/1.3 var(--font-head); color: var(--text, #111); margin-bottom: 8px; } #shareReviewCard p { color: var(--muted, #444); font: 400 15px/1.5 var(--font-sans); margin-bottom: 14px; } .share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12px 0 8px; } #shareReviewCard .btn { min-width: 170px; font-weight: 600; } .share-note { font-size: 13px; color: var(--muted, #555); margin-top: 8px; } @media (max-width: 600px) { #shareReviewCard { padding: 16px 14px; } #shareReviewCard h3 { font-size: 16px; } #shareReviewCard p { font-size: 14px; } .share-actions { gap: 10px; } #shareReviewCard .btn { min-width: 140px; font-size: 14px; } } /* --- SAFE RECOVERY OVERRIDES (keep at very bottom) --- */ [hidden], .hidden { display: none !important; visibility: hidden !important; } /* Make sure main content is clickable */ body, .container, header, footer, main { pointer-events: auto !important; } /* Ensure the motivation bar is visible (not collapsed by a stray rule) */ .motivation { display: block !important; } /* ===== FOOTER FIX ===== */ footer#siteFooter { text-align: center; margin: 0 auto; padding: 20px 10px; width: 100%; max-width: 1000px; font-size: 14px; line-height: 1.5; } footer#siteFooter a { color: var(--accent); text-decoration: none; margin: 0 6px; } footer#siteFooter a:hover { text-decoration: underline; } @media (max-width: 768px) { footer#siteFooter { font-size: 13px; padding: 16px 12px; } } /* Fix: dark mode light font for inline numbers in Weight Loss Targets & Dates card */ :root[data-theme="dark"] #wlCard a, :root[data-theme="dark"] #wlCard .accent-text { color: #111 !important; text-decoration-color: #111 !important; opacity: 1 !important; } /* Fix: dark mode light font for accent numbers in Your Daily Targets card */ :root[data-theme="dark"] #waterBlock a, :root[data-theme="dark"] #waterBlock .accent-text, :root[data-theme="dark"] #proteinBlock a, :root[data-theme="dark"] #proteinBlock .accent-text { color: #111 !important; text-decoration-color: #111 !important; opacity: 1 !important; } /* =============================== Dark Mode: make FREE cards read correctly (PRO block keeps its own styling) =============================== */ /* A) Make all standard text inside FREE cards black in dark mode */ body[data-theme="dark"] .card:not(#proBlock) h1, body[data-theme="dark"] .card:not(#proBlock) h2, body[data-theme="dark"] .card:not(#proBlock) h3, body[data-theme="dark"] .card:not(#proBlock) p, body[data-theme="dark"] .card:not(#proBlock) li, body[data-theme="dark"] .card:not(#proBlock) small, body[data-theme="dark"] .card:not(#proBlock) span, body[data-theme="dark"] .card:not(#proBlock) strong, body[data-theme="dark"] .card:not(#proBlock) em, body[data-theme="dark"] .card:not(#proBlock) td, body[data-theme="dark"] .card:not(#proBlock) th { color: #111 !important; opacity: 1 !important; /* in case any muted/opacity utility was applied */ } /* Dark mode: make the two WL numbers (inside ) black on FREE cards */ body[data-theme="dark"] #wlCard strong { color: #111 !important; opacity: 1 !important; } /* Dark mode: force normal black text for all FREE cards (exclude the PRO block) */ :root[data-theme="dark"] .card:not(#proBlock) p, :root[data-theme="dark"] .card:not(#proBlock) li, :root[data-theme="dark"] .card:not(#proBlock) small, :root[data-theme="dark"] .card:not(#proBlock) strong, :root[data-theme="dark"] .card:not(#proBlock) em { color: #111 !important; opacity: 1 !important; /* in case a “muted” style lowered it */ text-decoration-color: #111 !important; } /* Share + Review card (paragraphs above & below the buttons) */ :root[data-theme="dark"] #shareReviewCard p { color: #111 !important; opacity: 1 !important; text-decoration-color: #111 !important; } /* Keep buttons looking branded and not forced to black text */ body[data-theme="dark"] .card:not(#proBlock) .btn, body[data-theme="dark"] .card:not(#proBlock) .btn * { color: inherit !important; } /* Make links in FREE cards black as well (including underlines) */ body[data-theme="dark"] .card:not(#proBlock) a { color: #111 !important; text-decoration-color: #111 !important; opacity: 1 !important; } /* B) Target the specific accent bits you reported as still pale */ /* Weight Loss Targets & Dates card – the two inline number links (e.g., 175 and 189) */ body[data-theme="dark"] #wlCard a, body[data-theme="dark"] #wlCard .accent-text, body[data-theme="dark"] #wlDates a, body[data-theme="dark"] #wlDates .accent-text { color: #111 !important; text-decoration-color: #111 !important; opacity: 1 !important; } /* Your Daily Targets (results) — “95 oz/day” and “122–166 g/day” */ body[data-theme="dark"] #waterBlock a, body[data-theme="dark"] #waterBlock .accent-text, body[data-theme="dark"] #proteinBlock a, body[data-theme="dark"] #proteinBlock .accent-text { color: #111 !important; text-decoration-color: #111 !important; opacity: 1 !important; } /* Share/Review card — the two paragraphs above/below the buttons */ body[data-theme="dark"] #shareReviewCard p, body[data-theme="dark"] #shareReviewCard .share-note { color: #111 !important; opacity: 1 !important; } /* ======================================== SPACING ADJUSTMENTS - PRO & FREE AREAS ======================================== */ /* Free Members - Want Macros Card */ #resultsProCard h2, #resultsProCard p { text-align: center; } #resultsProCard { padding-bottom: 32px; } #resultsProCard .btn { margin-bottom: 24px; } /* Share/Review Card */ #shareReviewCard { padding-top: 24px; } #shareReviewCard h2 { margin-bottom: 16px; } #shareReviewCard > p:first-of-type { margin-bottom: 24px; } #shareReviewCard .actions { margin-bottom: 20px; } #shareReviewCard > p:last-of-type { margin-top: 20px; } /* ═══════════════════════════════════════════════════════════════════════ * HYDRATION TRACKER STYLES - Add to your existing styles.css * Version: 43.00.0 * ═══════════════════════════════════════════════════════════════════════ */ /* Hydration Tracker Container */ .hydration-tracker { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); border: 2px solid #0ea5e9; border-radius: 16px; padding: 24px; margin-top: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .hydration-tracker:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } /* Dark Mode */ body.dark .hydration-tracker { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); border-color: #3b82f6; } /* Header */ .hydration-header { text-align: center; margin-bottom: 24px; } .hydration-header h3 { margin: 0 0 8px 0; font-size: 22px; font-weight: 700; color: #0c4a6e; } body.dark .hydration-header h3 { color: #ffffff; } .hydration-subtitle { margin: 0; font-size: 14px; color: #075985; font-weight: 500; } body.dark .hydration-subtitle { color: #ffffff; } /* Content Layout */ .hydration-content { display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: center; margin-bottom: 24px; } @media (max-width: 600px) { .hydration-content { grid-template-columns: 1fr; gap: 24px; text-align: center; } } /* Ring Container */ .hydration-ring-container { position: relative; width: 140px; height: 140px; margin: 0 auto; } .hydration-ring { width: 100%; height: 100%; transform: rotate(-90deg); } .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 8; } body.dark .ring-bg { stroke: rgba(255, 255, 255, 0.1); } .ring-progress { fill: none; stroke: #0ea5e9; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease; } body.dark .ring-progress { stroke: #60a5fa; } /* Ring Content (Center Text) */ .ring-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .ring-percentage { font-size: 32px; font-weight: 700; color: #0c4a6e; line-height: 1; margin-bottom: 4px; } body.dark .ring-percentage { color: #ffffff; } .ring-label { font-size: 12px; color: #075985; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } body.dark .ring-label { color: #ffffff; } /* Stats */ .hydration-stats { display: flex; flex-direction: column; gap: 12px; } .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(255, 255, 255, 0.6); border-radius: 10px; transition: background 0.2s ease; } body.dark .stat-row { background: rgba(0, 0, 0, 0.2); } .stat-row.highlight { background: rgba(251, 191, 36, 0.3); border: 1px solid #fbbf24; } body.dark .stat-row.highlight { background: rgba(251, 191, 36, 0.15); border-color: #fbbf24; } .stat-label { font-size: 14px; font-weight: 600; color: #075985; } body.dark .stat-label { color: #ffffff; } .stat-value { font-size: 16px; font-weight: 700; color: #0c4a6e; } body.dark .stat-value { color: #ffffff; } /* Input Section */ .hydration-input-section { display: flex; gap: 12px; align-items: stretch; margin-bottom: 16px; } @media (max-width: 600px) { .hydration-input-section { flex-direction: column; } } .input-group { flex: 1; display: flex; align-items: center; background: white; border: 2px solid #0ea5e9; border-radius: 12px; padding: 4px 16px; transition: border-color 0.2s ease; } body.dark .input-group { background: #1e3a8a; border-color: #3b82f6; } .input-group:focus-within { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); } .water-input { flex: 1; border: none; outline: none; font-size: 18px; font-weight: 600; color: #0c4a6e; background: transparent; padding: 12px 8px; min-width: 0; } body.dark .water-input { color: #ffffff; } .water-input::placeholder { color: #94a3b8; } .input-unit { font-size: 14px; font-weight: 600; color: #64748b; margin-left: 8px; } body.dark .input-unit { color: #94a3b8; } .add-water-btn { flex: 0 0 auto; padding: 14px 28px !important; font-size: 16px !important; font-weight: 700 !important; background: #0ea5e9 !important; color: white !important; border: none !important; border-radius: 12px !important; cursor: pointer; transition: all 0.2s ease !important; white-space: nowrap; } .add-water-btn:hover { background: #0284c7 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important; } .add-water-btn:active { transform: translateY(0); } @media (max-width: 600px) { .add-water-btn { width: 100%; } } /* Actions */ .hydration-actions { text-align: center; } .btn-link { background: none; border: none; color: #0c4a6e; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 8px 16px; transition: color 0.2s ease; } body.dark .btn-link { color: #93c5fd; } .btn-link:hover { color: #075985; } body.dark .btn-link:hover { color: #bfdbfe; } /* Success State - Ring turns green when goal reached */ .hydration-tracker[data-complete="true"] .ring-progress { stroke: #16a34a; } body.dark .hydration-tracker[data-complete="true"] .ring-progress { stroke: #4ade80; } /* Animation for adding water */ @keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .hydration-ring-container.adding::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 3px solid #0ea5e9; border-radius: 50%; animation: ripple 0.6s ease-out; } /* Print styles */ @media print { .hydration-tracker { page-break-inside: avoid; border-color: #000 !important; background: #f0f9ff !important; } .hydration-input-section, .hydration-actions { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ * HYDRATION WIDGET - COMPLETE VISUAL FIX * Add this to the END of your styles.css (replace previous hydration fixes) * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * FIX #1: TITLE & SUBTITLE - WHITE TEXT IN DARK MODE * ═══════════════════════════════════════════════════════════════════════ */ /* Title: "💧 Hydration Timeline" - WHITE in dark mode */ body.dark .hydration-header h3, body[data-theme="dark"] .hydration-header h3, :root[data-theme="dark"] .hydration-header h3 { color: #ffffff !important; } /* Subtitle: "Track your daily water intake" - WHITE in dark mode */ body.dark .hydration-subtitle, body[data-theme="dark"] .hydration-subtitle, :root[data-theme="dark"] .hydration-subtitle { color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #2: STAT BOXES - WHITE BACKGROUND WITH BLACK TEXT IN DARK MODE * ═══════════════════════════════════════════════════════════════════════ */ /* Stat boxes: WHITE background in dark mode */ body.dark .stat-row, body[data-theme="dark"] .stat-row, :root[data-theme="dark"] .stat-row { background: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } /* Stat labels: "Consumed:", "Goal:", "Remaining:" - BLACK in dark mode */ body.dark .stat-label, body[data-theme="dark"] .stat-label, :root[data-theme="dark"] .stat-label { color: #111111 !important; font-weight: 600 !important; } /* Stat values: "0 oz", "95 oz" - BLACK in dark mode */ body.dark .stat-value, body[data-theme="dark"] .stat-value, :root[data-theme="dark"] .stat-value { color: #111111 !important; font-weight: 700 !important; } /* Highlighted "Remaining" box - keep yellow tint but with white background */ body.dark .stat-row.highlight, body[data-theme="dark"] .stat-row.highlight, :root[data-theme="dark"] .stat-row.highlight { background: #ffffff !important; border: 2px solid #fbbf24 !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #3: REDUCE OPACITY/LIGHTEN BLUE BACKGROUND IN DARK MODE * ═══════════════════════════════════════════════════════════════════════ */ /* Lighter, less opaque blue background in dark mode */ body.dark .hydration-tracker, body[data-theme="dark"] .hydration-tracker, :root[data-theme="dark"] .hydration-tracker { background: linear-gradient(135deg, rgba(30, 58, 138, 0.6) 0%, rgba(30, 64, 175, 0.6) 100%) !important; border-color: rgba(59, 130, 246, 0.5) !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #4: RING TEXT - WHITE IN DARK MODE * ═══════════════════════════════════════════════════════════════════════ */ /* Ring percentage: "0%" - WHITE in dark mode */ body.dark .ring-percentage, body[data-theme="dark"] .ring-percentage, :root[data-theme="dark"] .ring-percentage { color: #ffffff !important; } /* Ring label: "COMPLETE" - WHITE in dark mode */ body.dark .ring-label, body[data-theme="dark"] .ring-label, :root[data-theme="dark"] .ring-label { color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #5: INPUT BOX - ALWAYS BLACK TEXT (WHITE BACKGROUND) * ═══════════════════════════════════════════════════════════════════════ */ /* Input field: BLACK text on WHITE background (both modes) */ .water-input, .hydration-input-section input[type="number"], input[type="number"].water-input { color: #111111 !important; background: #ffffff !important; font-weight: 600 !important; } /* Placeholder text: gray */ .water-input::placeholder { color: #94a3b8 !important; } /* Input unit "oz": gray */ .input-unit { color: #64748b !important; } body.dark .input-unit, body[data-theme="dark"] .input-unit { color: #94a3b8 !important; } /* Input box container */ body.dark .input-group, body[data-theme="dark"] .input-group { background: #ffffff !important; border-color: rgba(59, 130, 246, 0.5) !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #6: "ADD WATER" BUTTON - WHITE TEXT IN DARK MODE * ═══════════════════════════════════════════════════════════════════════ */ /* "Add Water" button: WHITE text in dark mode */ body.dark .add-water-btn, body[data-theme="dark"] .add-water-btn, :root[data-theme="dark"] .add-water-btn { color: #ffffff !important; background: #0ea5e9 !important; } body.dark .add-water-btn:hover, body[data-theme="dark"] .add-water-btn:hover { background: #0284c7 !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #7: "RESET TODAY" LINK - WHITE TEXT IN DARK MODE * ═══════════════════════════════════════════════════════════════════════ */ /* "Reset Today" link: WHITE in dark mode */ body.dark .btn-link, body[data-theme="dark"] .btn-link, :root[data-theme="dark"] .btn-link { color: #ffffff !important; } body.dark .btn-link:hover, body[data-theme="dark"] .btn-link:hover { color: #bfdbfe !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #8: HIDE DUPLICATE HYDRATION IN PRO AREA * ═══════════════════════════════════════════════════════════════════════ */ /* Hide all hydration elements in PRO block */ #proBlock .hydration-tracker, #proBlock .hydration-header, #proBlock .hydration-content, #proBlock .hydration-ring-container, #proBlock .hydration-stats, #proBlock .hydration-input-section, #proBlock .hydration-actions { display: none !important; visibility: hidden !important; } /* Hide any element with "hydration" in ID or class inside PRO */ #proBlock [id*="hydration"], #proBlock [class*="hydration"] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * FIX #9: LINE 1282 ERROR - STANDARD APPEARANCE PROPERTIES * ═══════════════════════════════════════════════════════════════════════ */ /* Remove number input spinners */ .water-input::-webkit-outer-spin-button, .water-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } /* Remove Firefox number input spinners */ .water-input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* ═══════════════════════════════════════════════════════════════════════ * END COMPLETE VISUAL FIX * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * TASK #2: PROFESSIONAL COLORED BOXES * Add to the END of your styles.css * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * SECTION 1: WEIGHT LOSS TARGETS & DATES - Light Blue Box * ═══════════════════════════════════════════════════════════════════════ */ /* Target the 3 lines below "Weight Loss Targets & Dates" title */ #wlCard p:first-of-type, #wlCard > p:nth-of-type(1) { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 2px solid #60a5fa; border-radius: 12px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 2px 8px rgba(96, 165, 250, 0.15); } /* Dark mode */ body.dark #wlCard p:first-of-type, body.dark #wlCard > p:nth-of-type(1) { background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%); border-color: rgba(96, 165, 250, 0.4); } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 2A: WATER TARGET - Light Cyan Box * ═══════════════════════════════════════════════════════════════════════ */ #waterBlock { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%); border: 2px solid #06b6d4; border-radius: 12px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15); } /* Dark mode */ body.dark #waterBlock { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(14, 165, 233, 0.15) 100%); border-color: rgba(6, 182, 212, 0.4); } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 2B: PROTEIN TARGET - Light Red/Pink Box * ═══════════════════════════════════════════════════════════════════════ */ #proteinBlock { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 2px solid #f87171; border-radius: 12px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 2px 8px rgba(248, 113, 113, 0.15); } /* Dark mode */ body.dark #proteinBlock { background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%); border-color: rgba(248, 113, 113, 0.4); } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 2C: KEY DAILY NUTRIENTS - Light Green Box * ═══════════════════════════════════════════════════════════════════════ */ #nutrientsBlock { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 2px solid #34d399; border-radius: 12px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 2px 8px rgba(52, 211, 153, 0.15); } /* Dark mode */ body.dark #nutrientsBlock { background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%); border-color: rgba(52, 211, 153, 0.4); } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 3A: PRO - DAILY MACROS - Light Purple Box * Make text BIGGER and BOLDER * ═══════════════════════════════════════════════════════════════════════ */ /* Container box */ #proBlock #dailyMacrosSection, #proBlock > .card > div:has(h3:contains("Daily Macros")) { background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%); border: 2px solid #a855f7; border-radius: 12px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15); } /* Target by finding h3 with Daily Macros and styling parent */ #proBlock h3:has-text("Daily Macros"), #proBlock h3:contains("Daily Macros") { font-size: 18px !important; font-weight: 700 !important; } /* Make the macros line BIGGER and BOLDER */ #proBlock #dailyMacrosLine, #proBlock p[id*="macro"], #proBlock p:has-text("Protein") { font-size: 17px !important; font-weight: 700 !important; line-height: 1.5 !important; color: #7c3aed !important; } /* Individual macro values - make them stand out */ #proBlock #dailyMacrosLine strong, #proBlock p[id*="macro"] strong { font-size: 18px !important; font-weight: 800 !important; } /* Dark mode */ body.dark #proBlock #dailyMacrosSection { background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%); border-color: rgba(168, 85, 247, 0.4); } body.dark #proBlock #dailyMacrosLine { color: #c084fc !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 3B: PRO - QUICK STARTER MEAL PLAN - Light Orange Box * ═══════════════════════════════════════════════════════════════════════ */ #proBlock #mealPlanSection, #proBlock .meal-guide, #proBlock #proPlan { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); border: 2px solid #fb923c; border-radius: 12px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 2px 8px rgba(251, 146, 60, 0.15); } /* Dark mode */ body.dark #proBlock #mealPlanSection, body.dark #proBlock .meal-guide, body.dark #proBlock #proPlan { background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%); border-color: rgba(251, 146, 60, 0.4); } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 3C: PRO - HIGH-PROTEIN FOODS - Light Teal Box * ═══════════════════════════════════════════════════════════════════════ */ #proBlock #highProteinSection, #proBlock > .card > div:has(table) { background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); border: 2px solid #14b8a6; border-radius: 12px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15); } /* Dark mode */ body.dark #proBlock #highProteinSection { background: linear-gradient(135deg, rgba(13, 148, 136, 0.15) 0%, rgba(20, 184, 166, 0.15) 100%); border-color: rgba(20, 184, 166, 0.4); } /* ═══════════════════════════════════════════════════════════════════════ * GENERAL IMPROVEMENTS: Section Titles Inside Boxes * ═══════════════════════════════════════════════════════════════════════ */ /* Make section titles inside boxes more prominent */ #waterBlock h3, #proteinBlock h3, #nutrientsBlock h3 { font-size: 17px !important; font-weight: 700 !important; margin-bottom: 10px !important; color: var(--brand) !important; } /* Icons before titles */ #waterBlock h3::before { content: "💧 "; } #proteinBlock h3::before { content: "🥩 "; } #nutrientsBlock h3::before { content: "🌟 "; } /* ═══════════════════════════════════════════════════════════════════════ * RESPONSIVE: Mobile adjustments * ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { #waterBlock, #proteinBlock, #nutrientsBlock, #wlCard p:first-of-type, #proBlock #dailyMacrosSection, #proBlock #mealPlanSection, #proBlock #highProteinSection { padding: 12px 14px; margin: 10px 0; } /* Slightly smaller text on mobile */ #proBlock #dailyMacrosLine { font-size: 15px !important; } #proBlock #dailyMacrosLine strong { font-size: 16px !important; } } /* ═══════════════════════════════════════════════════════════════════════ * PRINT STYLES: Keep boxes visible but simplified * ═══════════════════════════════════════════════════════════════════════ */ @media print { #waterBlock, #proteinBlock, #nutrientsBlock, #wlCard p:first-of-type, #proBlock #dailyMacrosSection, #proBlock #mealPlanSection, #proBlock #highProteinSection { background: #f9fafb !important; border: 1px solid #d1d5db !important; box-shadow: none !important; page-break-inside: avoid; } } /* ═══════════════════════════════════════════════════════════════════════ * END PROFESSIONAL COLORED BOXES * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * COMPLETE CSS FIXES - ADD TO END OF styles.css * Replace any previous "PROFESSIONAL-BOXES" sections with this * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * SECTION 1: WEIGHT LOSS TARGETS - ORANGE BOX (Like Meal Plan) * Box around the 2 bullet points * ═══════════════════════════════════════════════════════════════════════ */ #wlCard ul { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); border: 2px solid #fb923c; border-radius: 12px; padding: 18px 20px; margin: 20px 0 32px 0; box-shadow: 0 2px 8px rgba(251, 146, 60, 0.15); list-style: none; } /* Dark mode */ body.dark #wlCard ul { background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%); border-color: rgba(251, 146, 60, 0.4); } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 2: YOUR DAILY TARGETS - FREE MEMBERS * Water, Protein, and Nutrients boxes with titles INSIDE * ═══════════════════════════════════════════════════════════════════════ */ /* Water Target - Light Cyan */ #waterBlock { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%); border: 2px solid #06b6d4; border-radius: 12px; padding: 18px 20px; margin: 20px 0; box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15); } #waterBlock h3 { margin-top: 0 !important; margin-bottom: 12px !important; font-size: 17px !important; font-weight: 700 !important; color: #0e7490 !important; } /* Dark mode */ body.dark #waterBlock { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(14, 165, 233, 0.15) 100%); border-color: rgba(6, 182, 212, 0.4); } body.dark #waterBlock h3 { color: #67e8f9 !important; } /* Protein Target - Light Red/Pink */ #proteinBlock { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 2px solid #f87171; border-radius: 12px; padding: 18px 20px; margin: 20px 0; box-shadow: 0 2px 8px rgba(248, 113, 113, 0.15); } #proteinBlock h3 { margin-top: 0 !important; margin-bottom: 12px !important; font-size: 17px !important; font-weight: 700 !important; color: #b91c1c !important; } /* Dark mode */ body.dark #proteinBlock { background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%); border-color: rgba(248, 113, 113, 0.4); } body.dark #proteinBlock h3 { color: #fca5a5 !important; } /* Key Daily Nutrients - Light Green */ #nutrientsBlock { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 2px solid #34d399; border-radius: 12px; padding: 18px 20px; margin: 20px 0; box-shadow: 0 2px 8px rgba(52, 211, 153, 0.15); } #nutrientsBlock h3 { margin-top: 0 !important; margin-bottom: 16px !important; font-size: 17px !important; font-weight: 700 !important; color: #047857 !important; } /* Dark mode */ body.dark #nutrientsBlock { background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%); border-color: rgba(52, 211, 153, 0.4); } body.dark #nutrientsBlock h3 { color: #6ee7b7 !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 3: PRO MEMBERS - ALL BOXES STYLED IN JAVASCRIPT * These are already styled inline, but we add dark mode support here * ═══════════════════════════════════════════════════════════════════════ */ /* Daily Summary Dashboard - Blue Box */ body.dark #dailySummaryBox { background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%) !important; border-color: rgba(96, 165, 250, 0.4) !important; } body.dark #dailySummaryBox h3, body.dark #dailySummaryBox > div:first-of-type { color: #93c5fd !important; } /* Daily Macros - Purple Box (already styled inline) */ body.dark #dailyMacrosBox { background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%) !important; border-color: rgba(168, 85, 247, 0.4) !important; } body.dark #dailyMacrosBox h3 { color: #c084fc !important; } body.dark #dailyMacrosBox p { color: #c084fc !important; } /* Meal Plan - Orange Box (already styled inline) */ body.dark #mealPlanBox { background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%) !important; border-color: rgba(251, 146, 60, 0.4) !important; } body.dark #mealPlanBox h3 { color: #fdba74 !important; } body.dark #mealPlanBox p { color: #fed7aa !important; } /* High-Protein Foods - Teal Box (already styled inline) */ body.dark #highProteinBox { background: linear-gradient(135deg, rgba(13, 148, 136, 0.15) 0%, rgba(20, 184, 166, 0.15) 100%) !important; border-color: rgba(20, 184, 166, 0.4) !important; } body.dark #highProteinBox h3 { color: #5eead4 !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 4: REMOVE AUTO-GENERATED ICONS * Remove all ::before pseudo-elements that add icons * ═══════════════════════════════════════════════════════════════════════ */ #waterBlock h3::before, #proteinBlock h3::before, #nutrientsBlock h3::before { content: none !important; display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 5: REMOVE GRAY LINES (OPTIONAL - SAFE TO REMOVE) * The gray separator lines in Hydration Timeline * ═══════════════════════════════════════════════════════════════════════ */ /* Target the gray timeline lines if they exist */ #waterBlock .timeline-separator, #waterBlock hr { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 6: RESPONSIVE - MOBILE ADJUSTMENTS * ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { #waterBlock, #proteinBlock, #nutrientsBlock, #wlCard ul, #dailySummaryBox, #dailyMacrosBox, #mealPlanBox, #highProteinBox { padding: 14px 16px !important; margin: 16px 0 !important; } #waterBlock h3, #proteinBlock h3, #nutrientsBlock h3, #dailySummaryBox h3, #dailyMacrosBox h3, #mealPlanBox h3, #highProteinBox h3 { font-size: 16px !important; } #dailyMacrosBox p { font-size: 15px !important; } } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 7: PRINT STYLES * ═══════════════════════════════════════════════════════════════════════ */ @media print { #waterBlock, #proteinBlock, #nutrientsBlock, #wlCard ul, #dailySummaryBox, #dailyMacrosBox, #mealPlanBox, #highProteinBox { background: #f9fafb !important; border: 1px solid #d1d5db !important; box-shadow: none !important; page-break-inside: avoid; } } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 8: TABLE STYLING INSIDE COLORED BOXES * Make sure tables look good inside colored backgrounds * ═══════════════════════════════════════════════════════════════════════ */ #nutrientsBlock table, #highProteinBox table { background: rgba(255, 255, 255, 0.5); border-radius: 8px; overflow: hidden; } body.dark #nutrientsBlock table, body.dark #highProteinBox table { background: rgba(0, 0, 0, 0.2); } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 9: HYDRATION TIMELINE WIDGET INSIDE WATER BOX * Make sure the cyan widget box inside water box looks good * ═══════════════════════════════════════════════════════════════════════ */ #waterBlock > div[style*="background:#ecfeff"] { background: rgba(236, 254, 255, 0.5) !important; border-color: rgba(165, 243, 252, 0.6) !important; } body.dark #waterBlock > div[style*="background:#ecfeff"] { background: rgba(165, 243, 252, 0.1) !important; border-color: rgba(165, 243, 252, 0.3) !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 10: HIDE DIVIDERS IN YOUR DAILY TARGETS CARD (GROUP B FIX) * User requested removal of gray divider lines between sections * ═══════════════════════════════════════════════════════════════════════ */ .card#results .divider { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION 11: DARK MODE SUPPORT FOR PURPLE WEIGHT LOSS BOX (GROUP A FIX) * Ensure purple gradient looks good in dark mode * ═══════════════════════════════════════════════════════════════════════ */ body.dark #wlSection div[style*="background:linear-gradient(135deg, #e9d5ff"] { background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%) !important; border-color: rgba(168, 85, 247, 0.4) !important; } /* ═══════════════════════════════════════════════════════════════════════ * END COMPLETE CSS FIXES * ═══════════════════════════════════════════════════════════════════════ */