/* MyBigBill Design System — single source of truth for tokens and base components. * Link this before any page-specific styles. * Fonts (load once in ): * Fraunces (display numerics, headings), Inter (body/UI), JetBrains Mono (data/labels) */ :root { /* Surfaces */ --paper: #FAF8F3; --card: #FFFFFF; --line: #E7E3D8; --line-soft: #EFECE3; /* Text */ --ink: #16241D; --ink-soft: #46544C; --muted: #6E7A72; /* Brand */ --green: #1E5631; --green-bright:#2E7D32; --green-wash: #EAF1EA; /* Semantic: peak = expensive = warm; off-peak = cheap = green */ --clay: #B45F3D; --clay-wash: #F4E7DF; /* Peak hour cost (TOU ribbon, legend, tick) - distinct from --clay warnings */ --peak: #7A3030; --peak-wash: #F0E3E3; /* Accents */ --bronze: #9A7B4F; --gold: #C9A24B; /* Brand green — extended for dark surfaces */ --green-on-dark: #7FB08A; /* accessible green text/icon on espresso */ --green-glow: rgba(46,125,50,.18); /* Dark mode: marketing surfaces (hero, solar band, final CTA) */ --espresso: #1C140F; /* near-black brown page bg */ --espresso-2: #241A13; /* raised card on espresso */ --espresso-line: #3A2B20; /* hairline border on espresso */ --cream: #F4EFE6; /* primary text on dark */ --cream-soft: #C9BCAD; /* muted text on dark */ /* Shadow / geometry */ --shadow: 0 1px 2px rgba(22,36,29,.04), 0 8px 24px rgba(22,36,29,.05); --shadow-lg: 0 2px 6px rgba(22,36,29,.05), 0 24px 60px rgba(0,0,0,.18); --radius: 14px; /* Legacy aliases — kept so existing JS-generated HTML keeps working */ --navy: var(--green); --forest: var(--green); --savings-green: var(--green-bright); --cream: var(--paper); --cream-dark: #EFECE3; --text-primary: var(--ink); --text-secondary:var(--ink-soft); --text-muted: var(--muted); --border: var(--line); --border-light: var(--line-soft); --red-500: #C0392B; --red-700: #922B21; --emerald-500: var(--green); --amber-500: var(--clay); --lime-400: var(--green-bright); --stone-400: var(--muted); --stone-600: var(--ink-soft); } /* ── Reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── Typography helpers ───────────────────────────────────────── */ .num { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); } .muted { color: var(--muted); } /* ── Nav (sticky, translucent) ────────────────────────────────── */ .mbb-nav { background: rgba(250,248,243,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .mbb-nav-inner { max-width: 1080px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; } .mbb-logo { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: var(--ink); text-decoration: none; } .mbb-logo-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .mbb-nav-actions { display: flex; gap: 14px; align-items: center; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; border-radius: 10px; transition: transform .12s, box-shadow .12s; text-decoration: none; } .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .btn-primary { background: var(--green); color: #fff; padding: 11px 18px; font-size: 14px; box-shadow: 0 6px 16px rgba(30,86,49,.20); } .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink-soft); padding: 11px 16px; font-size: 14px; font-weight: 500; } .btn-large { padding: 15px 30px; font-size: 15px; border-radius: 11px; box-shadow: 0 6px 18px rgba(30,86,49,.22); } .btn-large:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(30,86,49,.28); } /* ── Layout helpers ───────────────────────────────────────────── */ .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ── Summary strip (4 stat cards) ────────────────────────────── */ .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); } .stat .label { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .stat .value { display: flex; align-items: baseline; gap: 6px; } .stat .value .big { font-family: 'Fraunces', serif; font-weight: 500; font-size: 34px; line-height: 1; color: var(--ink); } .stat .value .unit { font-size: 14px; color: var(--muted); font-weight: 500; } .stat .foot { font-size: 12.5px; color: var(--muted); margin-top: 9px; } .stat.accent .value .big { color: var(--green); } .stat .plan-tag { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 22px; color: var(--green); } .stat .plan-tag.plan-badge-warn { font-size: 14px; color: var(--clay); background: var(--clay-wash); border-radius: 6px; padding: 3px 8px; } .stat .plan-tag.plan-badge-info { color: var(--muted); font-size: 22px; } .mbb-banner { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; font-family: 'Inter', sans-serif; } .mbb-banner--info { background: #FDF6E3; border: 1px solid #E8D9A8; } .mbb-banner__text strong { font-family: 'Fraunces', serif; } /* ── Panel ────────────────────────────────────────────────────── */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; margin-top: 14px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .panel-head h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: -.01em; } .panel-head .hint { font-size: 12.5px; color: var(--muted); } /* ── Signature: cost ribbon ───────────────────────────────────── */ .ribbon { display: flex; width: 100%; height: 46px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); } .ribbon .seg { display: flex; align-items: center; justify-content: center; } .ribbon .seg .seg-lab { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; padding: 0 8px; } .seg.peak { background: var(--peak); } .seg.off { background: var(--green); } .seg.base { background: var(--bronze); } .ribbon-key { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; } .keyitem { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); } .keyitem .sw { width: 11px; height: 11px; border-radius: 3px; } .sw.peak { background: var(--peak); } .sw.off { background: var(--green); } .sw.base { background: var(--bronze); } /* Line-item table */ .lines { margin-top: 22px; border-top: 1px solid var(--line-soft); } .line { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--line-soft); } .line .tick { width: 11px; height: 11px; border-radius: 3px; flex: none; } .tick.peak { background: var(--peak); } .tick.off { background: var(--green); } .tick.base { background: var(--bronze); } .line .desc .t { font-weight: 550; font-size: 14.5px; } .line .desc .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .line .rate { font-size: 13px; color: var(--ink-soft); text-align: right; min-width: 130px; } .line .rate .small { font-size: 11px; color: var(--muted); display: block; } .line .amt { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; text-align: right; min-width: 90px; } .line.total { border-bottom: none; padding-top: 16px; } .line.total .desc .t { font-weight: 600; } .line.total .amt { font-size: 20px; color: var(--green); } .reconcile { margin-top: 14px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .reconcile svg { flex: none; } /* ── Free insight banner ──────────────────────────────────────── */ .insight { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, #16241D, #1E3A2A); color: #EAF1EA; border-radius: var(--radius); padding: 22px 24px; margin-top: 14px; } .insight .ico { width: 40px; height: 40px; border-radius: 11px; background: rgba(201,162,75,.18); color: var(--gold); display: flex; align-items: center; justify-content: center; flex: none; } .insight h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: #fff; } .insight p { font-size: 14px; color: #C8D6CC; margin-top: 5px; max-width: 64ch; } /* ── NEM warning (clay) ───────────────────────────────────────── */ .nem { display: flex; gap: 16px; align-items: flex-start; border: 1px solid #E6C9B6; background: var(--clay-wash); border-radius: var(--radius); padding: 22px 24px; margin-top: 14px; } .nem .ico { width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--clay); display: flex; align-items: center; justify-content: center; flex: none; border: 1px solid #E6C9B6; } .nem h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: #7A3D24; } .nem p { font-size: 13.5px; color: #6B4231; margin-top: 5px; max-width: 60ch; } .nem .proj { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; color: var(--clay); margin-top: 10px; } /* ── Rate comparison ──────────────────────────────────────────── */ .compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; } .planbox { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: #FCFBF7; } .planbox.best { border-color: var(--green); background: var(--green-wash); } .planbox .pl { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .planbox.best .pl { color: var(--green); } .planbox .pn { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 22px; margin-top: 8px; } .planbox .pc { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; margin-top: 14px; } .planbox .pc span { font-size: 13px; color: var(--muted); font-family: 'Inter', sans-serif; } .compare .arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .compare .arrow .save { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--green); white-space: nowrap; } .compare .arrow .lab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* ── Anomalies / bill checks ──────────────────────────────────── */ .anoms { display: flex; flex-direction: column; gap: 10px; } .anom { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: #FCFBF7; } .anom .a-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--green-wash); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; } .anom .a-ico.warn { background: var(--clay-wash); color: var(--clay); } .anom .a-t { font-weight: 550; font-size: 14px; } .anom .a-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; } /* ── Recommendations ──────────────────────────────────────────── */ .recs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rec { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #FCFBF7; display: flex; flex-direction: column; } .rec-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .rec h3 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; } .conf { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; flex: none; } .conf.high { background: var(--green-wash); color: var(--green); } .conf.med { background: #F3EEDF; color: var(--bronze); } .conf.low { background: #F0EFEE; color: var(--muted); } .rec p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; } .rec .est { margin-top: 12px; display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--muted); } .rec .est b { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--green); } /* ── Save-results card ────────────────────────────────────────── */ .save-card { background: linear-gradient(135deg, #1E5631, #2E7D32); border-radius: 18px; padding: 34px; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; margin-top: 18px; } .save-card h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 23px; color: #fff; } .save-card p { font-size: 14px; color: #D8E8DC; margin-top: 6px; max-width: 48ch; } .save-form { display: flex; gap: 10px; flex-wrap: wrap; } .save-form input { font-family: 'Inter', sans-serif; font-size: 15px; padding: 13px 16px; border: none; border-radius: 10px; min-width: 220px; } .save-form input:focus { outline: 3px solid var(--gold); outline-offset: 2px; } /* ── Email capture (processing wait + results opt-in) ─────────── */ .mbb-wait-capture { margin-top: 24px; padding: 18px 20px; background: #FCFBF7; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; } .mbb-wait-capture__label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; } .mbb-wait-capture__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .mbb-wait-capture__hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; } .mbb-wait-capture__confirm { font-size: 14px; font-weight: 600; color: var(--green); } .mbb-input { font-family: 'Inter', sans-serif; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 220px; background: #fff; color: var(--ink); } .mbb-input:focus { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--green); } .mbb-btn-secondary { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--green); background: #fff; color: var(--green); cursor: pointer; transition: background .12s; } .mbb-btn-secondary:hover { background: var(--green-wash); } .mbb-btn-secondary:disabled { opacity: .6; cursor: not-allowed; } .mbb-btn-primary { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; padding: 13px 20px; border-radius: 10px; border: none; background: var(--green); color: #fff; cursor: pointer; box-shadow: 0 6px 16px rgba(30,86,49,.20); transition: transform .12s; } .mbb-btn-primary:hover { transform: translateY(-1px); } .mbb-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; } .mbb-capture-card { background: #FCFBF7; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; margin-top: 18px; text-align: left; } .mbb-capture-card__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; color: var(--ink); } .mbb-capture-card__body { font-size: 14px; color: var(--ink-soft); margin-top: 6px; max-width: 56ch; } .mbb-capture-card .mbb-input { width: 100%; margin-top: 14px; } .mbb-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-top: 12px; } .mbb-capture-card .mbb-btn-primary { margin-top: 16px; } .mbb-capture-card__fineprint { font-size: 12px; color: var(--muted); margin-top: 10px; } .mbb-capture-confirm { display: flex; align-items: center; gap: 8px; background: var(--green-wash); color: var(--green); border-radius: var(--radius); padding: 16px 20px; font-size: 14px; font-weight: 600; margin-top: 18px; } .mbb-capture-confirm svg { flex: none; width: 18px; height: 18px; } /* ── Chip / period badge ──────────────────────────────────────── */ .period-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--ink-soft); box-shadow: var(--shadow); } .period-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); } /* ── Loading spinner ──────────────────────────────────────────── */ .mbb-loading { text-align: center; padding: 100px 24px; } .mbb-spinner { width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: mbb-spin .8s linear infinite; margin: 0 auto 18px; } @keyframes mbb-spin { to { transform: rotate(360deg); } } /* ── Entrance animation ───────────────────────────────────────── */ .rise { opacity: 0; transform: translateY(10px); animation: mbb-rise .55s cubic-bezier(.2,.7,.2,1) forwards; } .d1 { animation-delay: .04s; } .d2 { animation-delay: .10s; } .d3 { animation-delay: .16s; } .d4 { animation-delay: .22s; } .d5 { animation-delay: .28s; } @keyframes mbb-rise { to { opacity: 1; transform: none; } } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 880px) { .summary { grid-template-columns: 1fr 1fr; } .compare { grid-template-columns: 1fr; gap: 12px; } .compare .arrow { flex-direction: row; gap: 12px; } .recs { grid-template-columns: 1fr; } .save-card { grid-template-columns: 1fr; text-align: center; } .save-form { justify-content: center; } } @media (max-width: 560px) { .wrap { padding: 0 16px; } .summary { grid-template-columns: 1fr 1fr; gap: 10px; } .stat .value .big { font-size: 26px; } .ribbon .seg .seg-lab { font-size: 10px; } .line { grid-template-columns: 14px 1fr auto; gap: 10px; } .line .rate { display: none; } } @media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } .btn { transition: none; } .mbb-spinner { animation: none; } } #freeInsight { margin-bottom: 28px; } #billMeta > * { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(22, 36, 29, 0.04); border-radius: 12px; }