/* ─── COOL GREEN MEDIA · DESIGN TOKENS + MASTHEAD ────────────────────────── Shared by every page. Drop in : Then mount the masthead by including masthead-bar.html (or pasting the markup) and loading masthead-rates.js after the markup. ─────────────────────────────────────────────────────────────────────────── */ :root { --bg: oklch(0.985 0.008 110); --bg-1: oklch(0.96 0.012 110); --bg-accent: oklch(0.965 0.025 155); --bg-warm: oklch(0.965 0.018 70); --ink: oklch(0.22 0.018 150); --ink-2: oklch(0.42 0.015 150); --ink-3: oklch(0.62 0.012 150); --rule: oklch(0.88 0.01 140); --rule-2: oklch(0.80 0.01 140); --accent: oklch(0.52 0.13 155); --accent-2: oklch(0.72 0.12 155); --accent-bg: oklch(0.93 0.05 155); --warn: oklch(0.55 0.14 55); --warn-bg: oklch(0.93 0.05 55); --peak: oklch(0.68 0.14 30); --peak-bg: oklch(0.90 0.06 30); --display: 'Instrument Serif', Georgia, serif; --ui: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--ui); -webkit-font-smoothing:antialiased; } em, i { font-style: italic; } a { color: inherit; text-decoration: none; } /* ─── Page shell ─── */ .page { max-width: 1360px; margin: 0 auto; padding: 20px 48px 120px; } /* ════════════════════════════════════════════════════════════════════════ COOL GREEN MEDIA · masthead (vanilla, namespaced .cgm-) ════════════════════════════════════════════════════════════════════════ */ /* Top mini-bar: date / center stub / tagline */ .cgm-mini-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); gap: 16px; } .cgm-mini-l { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .cgm-mini-c { display: flex; justify-content: center; align-items: center; } .cgm-mini-r { display: flex; justify-content: flex-end; align-items: center; } .cgm-tagline { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); } /* Dateline-c is the wrapper around the rate pill (positions the picker) */ .cgm-dateline-c { display: flex; align-items: center; gap: 8px; position: relative; } /* Status dot — color reflects current tier */ .cgm-peak-dot { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-bg, rgba(82,163,110,0.2)); } .cgm-peak-dot.is-peak { background: var(--peak, #c7603a); box-shadow: 0 0 0 3px var(--peak-bg, rgba(199,96,58,0.2)); } .cgm-peak-dot.is-partial { background: var(--warn, oklch(0.55 0.14 55)); box-shadow: 0 0 0 3px oklch(0.93 0.05 55 / 0.55); } /* The rate pill button itself */ .cgm-rate-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); padding-bottom: 1px; } .cgm-rate-btn:hover { color: var(--ink); border-color: var(--ink); } .cgm-rate-caret { font-size: 9px; opacity: 0.6; } /* Picker panel */ .cgm-rate-picker { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 60; background: var(--bg); border: 1px solid var(--ink); box-shadow: 0 12px 28px -14px rgba(0,0,0,0.22); min-width: 300px; max-height: 460px; overflow-y: auto; font-family: var(--ui); } .cgm-rate-picker.hidden { display: none; } .cgm-rate-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 6px; border-bottom: 1px solid var(--rule); } .cgm-rate-opt { all: unset; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 10px 14px; cursor: pointer; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--rule); width: 100%; box-sizing: border-box; } .cgm-rate-opt:hover { background: var(--bg-1); } .cgm-rate-opt.on { background: var(--bg-accent, var(--bg-1)); } .cgm-rate-opt .city { font-family: var(--display); font-size: 17px; } .cgm-rate-opt .util { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } .cgm-rate-foot { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3); padding: 10px 14px; text-align: center; } /* Plan picker (above city list when utility has multiple TOU plans) */ #cgm-plan-mount:empty { display: none; } .cgm-plan-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 8px; background: var(--bg-1); } .cgm-plan-list { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 0 14px 12px; border-bottom: 1px solid var(--ink); background: var(--bg-1); } .cgm-plan-opt { all: unset; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 8px 10px; border: 1px solid var(--rule); background: var(--bg); transition: border-color .15s, background .15s; } .cgm-plan-opt:hover { border-color: var(--ink-3); } .cgm-plan-opt.on { border-color: var(--accent); background: var(--bg-accent, var(--bg-1)); } .cgm-plan-opt .cgm-plan-label { font-family: var(--display); font-size: 15px; color: var(--ink); } .cgm-plan-opt.on .cgm-plan-label { color: var(--accent); } .cgm-plan-opt .cgm-plan-now { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } /* Wordmark + hairlines */ .cgm-rule-ink { border-top: 1px solid var(--ink); } .cgm-wordmark { text-align: center; padding: 30px 0 18px; position: relative; } .cgm-wordmark h1 { font-family: var(--display); font-weight: 400; font-size: clamp(64px, 11vw, 150px); line-height: 0.92; letter-spacing: -0.025em; margin: 0; color: var(--ink); display: inline-flex; align-items: center; gap: 0.18em; /* Optical centering: the glyph on the left throws the text off-axis. */ margin-left: calc(-0.5em); } .cgm-wordmark a { color: inherit; text-decoration: none; border: none; display: inline-flex; align-items: center; gap: 0.18em; } .cgm-wordmark img.cgm-glyph { width: 0.82em; height: 0.82em; display: inline-block; position: relative; top: -0.06em; object-fit: contain; image-rendering: -webkit-optimize-contrast; } .cgm-tagline-italic { font-family: var(--display); font-style: italic; font-size: clamp(18px, 1.9vw, 24px); color: var(--ink-2); margin-top: 10px; letter-spacing: 0.025em; line-height: 1.4; text-align: center; } /* Compact wordmark for subpages: */ .masthead-compact .cgm-wordmark { padding: 18px 0 10px; } .masthead-compact .cgm-wordmark h1 { font-size: clamp(40px, 6vw, 76px); } .masthead-compact .cgm-tagline-italic { font-size: clamp(15px, 1.4vw, 18px); } /* Section strip below the wordmark — kicker + return link */ .cgm-section-strip { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--ink); margin-bottom: 28px; } .cgm-section-strip a { color: var(--ink-2); border-bottom: 1px solid var(--rule); text-decoration: none; } .cgm-section-strip em { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; font-style: normal; color: var(--ink-2); } .cgm-section-strip .cgm-strip-mobile-line { display: none; } .cgm-section-strip a:hover { color: var(--accent); border-color: var(--accent); } /* Mobile: stack the mini-bar, left-align the picker, shrink the wordmark to match the EV compare page treatment. */ @media (max-width: 720px) { .cgm-mini-bar { grid-template-columns: 1fr; gap: 8px; text-align: center; } .cgm-mini-l, .cgm-mini-r { justify-content: center; } .cgm-section-strip { flex-direction: column; gap: 6px; align-items: flex-start; } .cgm-section-strip em { display: none; } .cgm-rate-picker { left: 0; transform: none; min-width: 260px; } .cgm-wordmark { padding: 10px 0; } .cgm-wordmark h1 { font-size: clamp(32px, 9vw, 48px); margin-left: 0; /* drop optical offset on mobile */ } .cgm-wordmark img.cgm-glyph { width: 0.88em; height: 0.88em; top: 0; vertical-align: -0.08em; } .cgm-tagline-italic { font-size: 14px; margin-top: 6px; } .cgm-tagline-italic .cgm-tagline-cta { display: block; margin-top: 2px; } .cgm-section-strip .cgm-strip-mobile-line { display: block; margin-top: 4px; } } @media (max-width: 959px) { .page { padding: 16px 20px 80px; } .cgm-wordmark { padding: 18px 0 12px; } }