/* Aquamor — Resin System/Cartridge Life Estimator Plugin-embed stylesheet (V10 → embed split) DESIGN TOKENS aligned to live aquamor.com (Divi theme): Primary blue: #144A8E (site primary) Accent blue: #29AAE2 (site secondary / CTA) Aquamor brand: #4AADD4 (internal accent; kept for wave/highlights) Body text: #1A1A1A Background: #FFFFFF (always light — no dark mode) Surface: #F9FAFB Surface2: #F3F4F6 Border: #E5E7EB Muted text: #6B7280 Font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif (matches Divi system-font stack; Jeremy's theme font inherits for headings) DARK MODE: intentionally removed. prefers-color-scheme media query is NOT present. The tool always renders in light mode to match aquamor.com. HOST PAGE PROVIDES: surrounding , , body font/color base, WordPress header/footer chrome. This file scopes all rules under .aqest-wrap to avoid collisions with Divi or other plugin styles. */ /* ── CUSTOM PROPERTIES (light-only) ─────────────────────────── */ .aqest-wrap { --aq-blue: #29AAE2; /* site secondary — used for CTAs, borders, accents */ --aq-primary: #144A8E; /* site primary — used for title strip, strong UI anchors */ --aq-dark: #1A1A1A; --aq-light-blue: #E6F5FB; --aq-red: #DC3545; --aq-amber: #F59E0B; --aq-green: #10B981; --aq-gray: #6B7280; --bg: #FFFFFF; --surface: #F9FAFB; --surface2: #F3F4F6; --text: #1A1A1A; --text-muted: #6B7280; --border: #E5E7EB; --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--text); line-height: 1.6; } .aqest-wrap *, .aqest-wrap *::before, .aqest-wrap *::after { box-sizing: border-box; } /* ── TOOL HEADER (internal — replaces standalone page header) ── */ /* NOTE: The .aqest-header is intentionally compact — it shows the tool title + PDF/Print controls only. The site's real Aquamor header/footer is provided by the WordPress page template. */ .aqest-header { background: var(--surface); border-bottom: 3px solid var(--aq-blue); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-radius: 10px 10px 0 0; } .aqest-header-title { font-size: 1rem; font-weight: 700; color: var(--aq-primary); margin: 0; letter-spacing: 0.01em; } .aqest-header-sub { font-size: 0.78rem; color: var(--text-muted); margin: 2px 0 0; } .header-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── PRINT & PDF BUTTONS ─────────────────────────────────────── */ .btn-print { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 500; transition: all 0.2s; } .btn-print:hover { border-color: var(--aq-gray); background: var(--border); } .btn-pdf { background: var(--aq-blue); border: 1px solid var(--aq-blue); border-radius: 20px; padding: 6px 16px; cursor: pointer; color: #ffffff; font-size: 13px; font-weight: 600; transition: all 0.2s; white-space: nowrap; } .btn-pdf:hover { background: var(--aq-primary); border-color: var(--aq-primary); } .btn-pdf:disabled { opacity: 0.65; cursor: wait; } /* ── WAVE ACCENT ─────────────────────────────────────────────── */ .wave-accent { height: 5px; background: linear-gradient(90deg, var(--aq-primary) 0%, var(--aq-blue) 50%, var(--aq-primary) 100%); opacity: 0.30; } /* ── PAGE TITLE STRIP ────────────────────────────────────────── */ .page-title-strip { background: var(--aq-primary); color: #fff; text-align: center; padding: 14px 24px 12px; } .page-title-strip h1 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.02em; } .page-title-strip p { margin: 4px 0 0; font-size: 0.8rem; opacity: 0.88; } /* ── MAIN CONTENT ────────────────────────────────────────────── */ .main { max-width: 680px; margin: 0 auto; padding: 28px 20px 44px; } /* ── FORM CARD ───────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: 12px; padding: 24px 24px 20px; box-shadow: var(--shadow-md); margin-bottom: 20px; } .card-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 18px; display: flex; align-items: center; gap: 8px; } .card-title::after { content: ''; flex: 1; height: 2px; background: var(--border); border-radius: 1px; } /* ── FORM FIELDS ─────────────────────────────────────────────── */ .aqest-wrap .field-group { margin-bottom: 18px; } .aqest-wrap label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .helper-text { font-size: 0.775rem; color: var(--text-muted); margin-bottom: 7px; line-height: 1.4; } .aqest-wrap input[type="number"] { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; appearance: textfield; -moz-appearance: textfield; } .aqest-wrap input[type="number"]::-webkit-inner-spin-button, .aqest-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .aqest-wrap input[type="number"]:focus { outline: none; border-color: var(--aq-blue); box-shadow: 0 0 0 3px rgba(41,170,226,0.18); } .aqest-wrap input[type="number"]::placeholder { color: var(--text-muted); } /* Water input: number + unit dropdown side-by-side */ .water-input-row { display: flex; gap: 10px; align-items: stretch; } .water-input-row input[type="number"] { flex: 1; } .aqest-wrap select { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.88rem; font-family: inherit; cursor: pointer; transition: border-color 0.2s; min-width: 0; flex-shrink: 0; width: auto; } .aqest-wrap select:focus { outline: none; border-color: var(--aq-blue); box-shadow: 0 0 0 3px rgba(41,170,226,0.18); } /* EC conversion factor row */ .ec-factor-row { display: none; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; background: var(--surface2); border-radius: 8px; font-size: 0.83rem; color: var(--text-muted); } .ec-factor-row.visible { display: flex; } .ec-factor-row label { margin: 0; font-weight: 500; font-size: 0.83rem; white-space: nowrap; } .ec-factor-row input[type="number"] { width: 80px; padding: 6px 10px; font-size: 0.88rem; } /* Reliability badge */ .reliability-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; } .rel-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; } .rel-badge.high { background: #d1fae5; color: #065f46; } .rel-badge.medium { background: #fef3c7; color: #92400e; } .rel-badge.low { background: #ffedd5; color: #9a3412; } .reliability-note { color: var(--text-muted); font-size: 0.78rem; } /* Warning callout (TDS/EC) */ .warn-callout { display: none; margin-top: 10px; padding: 9px 13px; background: #fef3c7; border-left: 3px solid var(--aq-amber); border-radius: 6px; font-size: 0.8rem; color: #78350f; line-height: 1.5; } .warn-callout.visible { display: block; } /* Calculate button */ .btn-calculate { display: block; width: 100%; padding: 14px; background: var(--aq-blue); color: #fff; border: none; border-radius: 10px; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s; letter-spacing: 0.02em; margin-top: 4px; font-family: inherit; } .btn-calculate:hover { background: var(--aq-primary); } .btn-calculate:active { transform: scale(0.99); } /* ── RESULT CARD ─────────────────────────────────────────────── */ .result-card { background: var(--surface); border-radius: 12px; padding: 24px; box-shadow: var(--shadow-md); margin-bottom: 20px; border-top: 4px solid var(--aq-blue); display: none; } .result-card.visible { display: block; } .result-headline { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .result-gallons { font-size: 2.4rem; font-weight: 800; color: var(--text); line-height: 1.1; } .result-gallons span { font-size: 1rem; font-weight: 500; color: var(--text-muted); display: block; margin-top: 4px; } .result-badge-wrap { padding-top: 6px; } /* Confidence badge */ .conf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; } .conf-badge.high { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; } .conf-badge.medium { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .conf-badge.low { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; } .result-days { margin-top: 16px; padding: 14px 16px; background: var(--aq-light-blue); border-radius: 8px; font-size: 0.92rem; color: var(--aq-dark); display: none; } .result-days.visible { display: block; } .result-days strong { font-size: 1.1rem; } .replacement-guidance { margin-top: 16px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; padding: 12px 14px; border-left: 3px solid var(--aq-blue); background: var(--surface2); border-radius: 0 6px 6px 0; } /* ── COLLAPSIBLE EDUCATION SECTION ───────────────────────────── */ .edu-section { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; } .edu-toggle { width: 100%; background: none; border: none; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--text); font-size: 0.95rem; font-weight: 700; font-family: inherit; text-align: left; border-bottom: 1px solid transparent; transition: border-color 0.2s, background 0.2s; } .edu-toggle:hover { background: var(--surface2); } .edu-toggle.open { border-bottom-color: var(--border); } .section-arrow { font-size: 0.8rem; color: var(--aq-blue); transition: transform 0.2s; flex-shrink: 0; } .section-arrow.open { transform: rotate(90deg); } .section-body { display: none; padding: 20px 22px 24px; } .section-body.open { display: block; } .edu-h3 { font-size: 0.9rem; font-weight: 700; color: var(--aq-blue); margin: 18px 0 6px; } .edu-h3:first-child { margin-top: 0; } .edu-p { font-size: 0.875rem; color: var(--text); margin: 0 0 8px; line-height: 1.6; } .edu-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin: 12px 0; } .edu-table th { background: var(--surface2); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--border); } .edu-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; } .edu-table tr:last-child td { border-bottom: none; } /* ── DISCLAIMER ──────────────────────────────────────────────── */ .disclaimer { font-size: 0.775rem; color: var(--text-muted); line-height: 1.55; text-align: center; padding: 0 8px 8px; } /* ── TOOL FOOTER ─────────────────────────────────────────────── */ .aqest-footer { text-align: center; padding: 20px 24px 24px; color: var(--text-muted); font-size: 0.75rem; border-top: 1px solid var(--border); margin-top: 8px; } /* ── CATALOG SELECTOR PANEL ──────────────────────────────────── */ .catalog-panel { background: var(--surface); border-radius: 12px; padding: 22px 24px 18px; box-shadow: var(--shadow-md); margin-bottom: 16px; border-left: 4px solid var(--aq-blue); } .catalog-panel-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 4px; } .catalog-panel-subtitle { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 14px; line-height: 1.4; } #catalog-select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.88rem; font-family: inherit; cursor: pointer; transition: border-color 0.2s; min-height: 42px; } #catalog-select:focus { outline: none; border-color: var(--aq-blue); box-shadow: 0 0 0 3px rgba(41,170,226,0.18); } .catalog-manual-link { font-size: 0.8rem; color: var(--text-muted); margin: 8px 0 0; } .catalog-manual-link a { color: var(--aq-blue); text-decoration: none; font-weight: 500; } .catalog-manual-link a:hover { text-decoration: underline; } /* Selected item info panel */ .catalog-info-panel { display: none; margin-top: 14px; padding: 14px 16px; background: var(--aq-light-blue); border-radius: 8px; font-size: 0.86rem; line-height: 1.55; color: var(--aq-dark); } .catalog-info-panel.visible { display: block; } .catalog-info-title { font-weight: 700; font-size: 0.9rem; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chip { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; } .chip-cartridge { background: #dbeafe; color: #1e40af; } .chip-system { background: #ede9fe; color: #5b21b6; } .chip-wac { background: #d1fae5; color: #065f46; } .chip-sac { background: #fef3c7; color: #92400e; } .catalog-info-desc { margin: 0 0 4px; color: var(--text); } .catalog-info-app { margin: 0 0 8px; color: var(--text-muted); font-size: 0.83rem; } .catalog-info-caveat { font-size: 0.78rem; color: var(--text-muted); font-style: italic; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; } /* ── RESIN EXPLAINER ─────────────────────────────────────────── */ .resin-explainer { display: none; font-size: 0.82rem; line-height: 1.5; margin: 6px 0 8px; padding: 7px 11px; border-radius: 7px; font-weight: 500; } .resin-explainer.wac { background: #d1fae5; color: #065f46; border-left: 3px solid #059669; } .resin-explainer.sac { background: #fef3c7; color: #92400e; border-left: 3px solid #d97706; } .resin-explainer.visible { display: block; } /* "Filled from catalog" indicator */ .grains-filled-note { display: none; font-size: 0.78rem; color: #065f46; margin-top: 5px; font-weight: 600; } .grains-filled-note.visible { display: block; } /* ── HELP LAYER ──────────────────────────────────────────────── */ .help-intro { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; border-left: 4px solid var(--aq-blue); } .help-intro-toggle { width: 100%; background: none; border: none; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--text); font-size: 0.9rem; font-weight: 600; font-family: inherit; text-align: left; transition: background 0.2s; gap: 10px; } .help-intro-toggle:hover { background: var(--surface2); } .help-intro-body { display: none; padding: 0 20px 20px; } .help-intro-body.open { display: block; } .help-intro-h { font-size: 0.8rem; font-weight: 700; color: var(--aq-blue); margin: 16px 0 5px; text-transform: uppercase; letter-spacing: 0.05em; } .help-intro-p { font-size: 0.875rem; color: var(--text); margin: 0 0 6px; line-height: 1.6; } .help-intro-list { margin: 4px 0 0 0; padding-left: 20px; font-size: 0.875rem; color: var(--text); line-height: 1.7; } .help-icon-wrap { position: relative; display: inline-block; vertical-align: middle; margin-left: 5px; } .help-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: pointer; user-select: none; line-height: 1; transition: background 0.15s, border-color 0.15s, color 0.15s; flex-shrink: 0; } .help-icon:hover, .help-icon.active { background: var(--aq-blue); border-color: var(--aq-blue); color: #fff; } .help-tooltip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 200; background: #1f2937; color: #f3f4f6; font-size: 0.8rem; line-height: 1.55; padding: 10px 13px; border-radius: 8px; width: 270px; box-shadow: 0 4px 16px rgba(0,0,0,0.28); font-weight: 400; } .help-tooltip.visible { display: block; } .help-tooltip.flip-left { left: auto; right: 0; } .help-tooltip-close { display: none; position: absolute; top: 6px; right: 8px; font-size: 12px; cursor: pointer; opacity: 0.65; } @media (hover: none) { .help-tooltip-close { display: block; } } .label-help-row { display: flex; align-items: center; margin-bottom: 6px; } .label-help-row label { margin-bottom: 0; } .unit-tip-bar { font-size: 0.78rem; color: var(--text-muted); margin-top: 7px; padding: 8px 11px; background: var(--surface2); border-radius: 6px; border-left: 2px solid var(--aq-blue); line-height: 1.5; display: none; } .unit-tip-bar.visible { display: block; } .howto-link { display: inline-block; font-size: 0.8rem; color: var(--aq-blue); cursor: pointer; font-weight: 500; border-bottom: 1px dashed currentColor; margin-top: 8px; background: none; border-top: none; border-left: none; border-right: none; padding: 0; font-family: inherit; } .howto-body { display: none; margin-top: 12px; padding: 16px 18px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); } .howto-body.open { display: block; } .howto-step { display: flex; gap: 12px; margin-bottom: 14px; } .howto-step:last-child { margin-bottom: 0; } .howto-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--aq-blue); color: #fff; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .howto-text { font-size: 0.875rem; color: var(--text); line-height: 1.6; } .howto-text strong { color: var(--text); } /* ── GLOSSARY ────────────────────────────────────────────────── */ .glossary-section { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; } .glossary-toggle { width: 100%; background: none; border: none; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--text); font-size: 0.95rem; font-weight: 700; font-family: inherit; text-align: left; border-bottom: 1px solid transparent; transition: border-color 0.2s, background 0.2s; } .glossary-toggle:hover { background: var(--surface2); } .glossary-toggle.open { border-bottom-color: var(--border); } .glossary-body { display: none; padding: 18px 22px 22px; } .glossary-body.open { display: block; } .glossary-grid { column-gap: 28px; } @media (min-width: 520px) { .glossary-grid { columns: 2; } } .glossary-term { margin-bottom: 14px; break-inside: avoid; } .g-dt { font-size: 0.875rem; font-weight: 700; color: var(--text); margin: 0 0 2px; } .g-dd { font-size: 0.83rem; color: var(--text-muted); margin: 0; line-height: 1.55; } /* ── PRINT ───────────────────────────────────────────────────── */ @media print { .help-intro, .help-icon-wrap, .help-tooltip, .unit-tip-bar, .howto-link, .howto-body, .glossary-section { display: none !important; } .aqest-header { position: relative !important; box-shadow: none !important; } .aqest-wrap { --bg: #ffffff; --surface: #ffffff; --surface2: #f8f9fa; --text: #1a1a1a; --text-muted: #555555; --border: #d1d5db; --shadow: none; --shadow-md: none; } body { background: #ffffff !important; color: #1a1a1a !important; } .section-body { display: block !important; } .section-arrow { display: none !important; } -webkit-print-color-adjust: exact; print-color-adjust: exact; .result-card { display: block !important; } .result-days { display: block !important; } .card, .result-card, .edu-section { box-shadow: none !important; break-inside: avoid; } .main { padding: 16px 20px; } .btn-calculate { display: none !important; } .header-controls, .btn-print, .btn-pdf, .no-print { display: none !important; } .conf-badge.high { background: #d1fae5 !important; color: #065f46 !important; } .conf-badge.medium { background: #fef3c7 !important; color: #92400e !important; } .conf-badge.low { background: #ffedd5 !important; color: #9a3412 !important; } .warn-callout { background: #fef3c7 !important; color: #78350f !important; } } /* ── MOBILE ──────────────────────────────────────────────────── */ @media (max-width: 600px) { .aqest-header { padding: 10px 14px; border-radius: 0; } .main { padding: 18px 12px 36px; } .card { padding: 18px 14px 16px; } .result-card { padding: 18px 14px; } .result-gallons { font-size: 2rem; } .water-input-row { flex-direction: column; } .aqest-wrap select { width: 100%; } .header-controls { gap: 6px; } .btn-print, .btn-pdf { padding: 5px 10px; font-size: 12px; } .catalog-panel { padding: 16px 14px 14px; } .catalog-info-title { flex-direction: column; align-items: flex-start; gap: 4px; } } @media (max-width: 480px) { .page-title-strip h1 { font-size: 1rem; } }