/* ── Next Phase Solar · Blog post shared styles ─ */ :root { --dark: #0B0E17; --paper: #d9dfe8; --surface: #ffffff; --bdr: #E5E7EB; --txt: #111827; --txt-2: #374151; --muted: #6B7280; --yellow: #FFAC00; --yellow-h: #E09600; --yellow-dk: #92660A; --blue: #00AEEF; --blue-h: #0090CC; --green: #16A34A; --green-h: #15803d; --accent: #FFAC00; /* overridden per cluster on */ --accent-rgb: 255,172,0; --fh: 'Barlow Condensed', system-ui, sans-serif; --fb: 'Inter', system-ui, sans-serif; --fm: 'JetBrains Mono', ui-monospace, monospace; --r: 12px; --touch: 44px; } body.cluster-residential { --accent: #16A34A; --accent-rgb: 22,163,74; } body.cluster-commercial { --accent: #00AEEF; --accent-rgb: 0,174,239; } body.cluster-electrical { --accent: #FFAC00; --accent-rgb: 255,172,0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--dark); } body { font-family: var(--fb); font-size: 16px; line-height: 1.65; color: var(--txt); background: var(--paper); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; transition: color .15s; } a:hover { color: color-mix(in srgb, var(--accent) 70%, #000 30%); } img { max-width: 100%; display: block; } .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; } .narrow { max-width: 760px; } /* Nav (matches site) */ .nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; flex-wrap: wrap; } .nav__logo { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; } .nav__logo__txt { font-family: var(--fb); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35; color: #fff; } .nav__logo__txt em { color: var(--yellow); font-style: normal; } .nav__links { display: none; flex-wrap: wrap; gap: 8px 20px; align-items: center; } @media (min-width: 900px) { .nav__links { display: flex; } } .nav__links a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.72); } .nav__links a:hover { color: #fff; } .nav__cta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } .nav__phone { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 22px; font-family: var(--fb); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; } .btn-y { background: var(--accent); color: var(--dark); } .btn-y:hover { background: color-mix(in srgb, var(--accent) 82%, #000 18%); color: var(--dark); } .btn-lg { min-height: 48px; padding: 0 28px; font-size: 14px; } /* Article hero */ .post-hero { position: relative; background: var(--dark); margin-top: calc(-1 * (68px + env(safe-area-inset-top, 0px))); padding: calc(68px + 72px + env(safe-area-inset-top, 0px)) 0 72px; overflow: hidden; color: #fff; } .post-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 560px at 78% 18%, rgba(var(--accent-rgb), 0.22), transparent 62%), radial-gradient(700px 420px at 8% 82%, rgba(var(--accent-rgb), 0.09), transparent 65%); z-index: 0; } .post-hero > * { position: relative; z-index: 1; } .crumbs { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-bottom: 18px; letter-spacing: 0.04em; text-transform: uppercase; } .crumbs a { color: rgba(255,255,255,0.85); } .crumbs a:hover { color: var(--accent); } .post-hero .cat { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; } .post-hero h1 { font-family: var(--fh); font-weight: 800; font-size: clamp(2.1rem, 5.2vw, 3.4rem); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.03; margin: 0 0 20px; max-width: 880px; color: #fff; } .post-hero h1 .acc { color: var(--accent); } .post-hero .lead { font-size: 17px; color: rgba(255,255,255,0.7); max-width: 740px; line-height: 1.7; } .post-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; font-size: 13px; color: rgba(255,255,255,0.55); } .post-meta strong { color: #fff; font-weight: 600; margin-right: 4px; } /* Body */ .post-body { padding: 64px 0 32px; background: var(--paper); } .post-body .container { display: grid; gap: 48px; grid-template-columns: 1fr; } @media (min-width: 960px) { .post-body .container { grid-template-columns: minmax(0,1fr) 280px; } } .post-main { background: var(--surface); border: 1px solid var(--bdr); border-radius: 16px; padding: 40px 44px; box-shadow: 0 8px 32px rgba(15,23,42,0.05); } @media (max-width: 600px) { .post-main { padding: 28px 22px; } } .tldr { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.02) 100%); border: 1px solid rgba(var(--accent-rgb), 0.35); border-left: 4px solid var(--accent); border-radius: 10px; padding: 20px 24px; margin-bottom: 32px; } .tldr h2 { font-family: var(--fh); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 10px; font-weight: 800; } .tldr ul { list-style: none; padding: 0; margin: 0; } .tldr li { position: relative; padding: 4px 0 4px 22px; font-size: 15px; color: var(--txt-2); line-height: 1.6; } .tldr li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .post-main h2 { font-family: var(--fh); font-weight: 800; font-size: 28px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--txt); margin: 36px 0 14px; line-height: 1.1; } .post-main h2:first-child { margin-top: 0; } .post-main h3 { font-family: var(--fh); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--txt); margin: 24px 0 10px; letter-spacing: -0.01em; } .post-main p { color: var(--txt-2); margin-bottom: 14px; font-size: 16px; line-height: 1.75; } .post-main ul, .post-main ol { padding-left: 22px; margin-bottom: 14px; color: var(--txt-2); } .post-main li { margin-bottom: 6px; line-height: 1.65; } .post-main strong { color: var(--txt); font-weight: 700; } .post-main em { color: var(--txt-2); font-style: italic; } .fact { background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 18px 0; font-size: 15px; color: var(--txt-2); } .fact strong { color: var(--txt); } .ptable { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bdr); } .ptable th, .ptable td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--bdr); vertical-align: top; } .ptable th { background: #f3f4f6; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); } .ptable tr:last-child td { border-bottom: 0; } .ptable .good { color: #16a34a; font-weight: 700; } .ptable .bad { color: #dc2626; font-weight: 700; } .faq { background: #fff; border: 1px solid var(--bdr); border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; } .faq summary { cursor: pointer; font-family: var(--fh); font-weight: 700; font-size: 17px; color: var(--txt); list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 22px; margin-left: 14px; transition: transform 0.2s; } .faq[open] summary::after { transform: rotate(45deg); } .faq p { margin-top: 10px; color: var(--txt-2); font-size: 14.5px; line-height: 1.7; } .callout-cta { margin: 36px 0 0; padding: 28px 26px; background: linear-gradient(135deg, var(--dark) 0%, #1a1f35 100%); color: #fff; border-radius: 12px; text-align: center; } .callout-cta h3 { font-family: var(--fh); font-size: 22px; text-transform: uppercase; margin-bottom: 8px; color: #fff; } .callout-cta p { color: rgba(255,255,255,0.68); font-size: 14px; margin-bottom: 16px; } /* Author block */ .author-block { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--bdr); background: #fff; border-radius: 12px; margin-top: 32px; } .author-block .ab-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #000 40%) 100%); display: flex; align-items: center; justify-content: center; color: var(--dark); font-family: var(--fh); font-weight: 800; font-size: 20px; flex-shrink: 0; } .author-block .ab-txt { font-size: 14px; color: var(--txt-2); line-height: 1.5; } .author-block .ab-txt strong { color: var(--txt); display: block; margin-bottom: 2px; } /* Aside / sticky */ .post-aside { align-self: start; } @media (min-width: 960px) { .post-aside { position: sticky; top: 88px; } } .aside-card { background: var(--surface); border: 1px solid var(--bdr); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; } .aside-card h4 { font-family: var(--fh); font-size: 13px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 12px; } .aside-card a { display: block; font-size: 14px; color: var(--txt-2); padding: 5px 0; line-height: 1.45; } .aside-card a:hover { color: var(--accent); } .aside-cta { background: var(--dark); color: #fff; border-radius: 14px; padding: 22px 22px; } .aside-cta h4 { font-family: var(--fh); font-size: 18px; color: #fff; text-transform: uppercase; margin-bottom: 8px; letter-spacing: -0.01em; } .aside-cta p { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 16px; line-height: 1.5; } /* Related */ .related { padding: 48px 0 72px; background: var(--paper); } .related h2 { font-family: var(--fh); font-size: 24px; text-transform: uppercase; color: var(--txt); margin-bottom: 22px; letter-spacing: -0.02em; } .related-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 720px) { .related-grid { grid-template-columns: repeat(3, 1fr); } } .rel-card { background: var(--surface); border: 1px solid var(--bdr); border-radius: 12px; padding: 20px 20px; transition: transform .25s ease, border-color .2s ease, box-shadow .2s ease; } .rel-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 32px rgba(15,23,42,0.08); } .rel-card .rc-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; margin-bottom: 8px; display: block; } .rel-card h3 { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--txt); text-transform: uppercase; line-height: 1.15; margin-bottom: 8px; letter-spacing: -0.01em; } .rel-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; } /* Footer (reuse) */ .site-footer { position: relative; background: linear-gradient(180deg, #0b0e17 0%, #050810 100%); padding: 72px 0 0; overflow: hidden; border-top: 1px solid rgba(var(--accent-rgb), 0.18); } .footer-inner { position: relative; z-index: 2; } .footer-top { display: grid; grid-template-columns: minmax(260px, 1.05fr) 2.6fr; gap: 44px; padding-bottom: 40px; } .footer-brand { max-width: 340px; } .footer-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; margin-bottom: 16px; } .footer-logo__txt { font-family: var(--fh); font-weight: 800; font-size: 16px; line-height: 1.15; color: #fff; } .footer-logo__txt em { display: inline-block; color: #FFAC00; font-style: normal; font-size: 11px; letter-spacing: 0.2em; margin-top: 2px; } .footer-tagline { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.5); margin: 0; } .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } .footer-col h4 { font-family: var(--fh); font-weight: 800; font-size: 13px; color: #fff; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.14em; } .footer-col a, .footer-col span { display: block; font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; padding: 5px 0; } .footer-col a:hover { color: #fff; } .footer-divider { height: 1px; background: rgba(255,255,255,0.08); } .footer-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 0 calc(56px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: rgba(255,255,255,0.42); flex-wrap: wrap; } .footer-meta a { color: rgba(255,255,255,0.6); } .footer-watermark { position: absolute; left: 0; right: 0; bottom: -1.5vw; font-family: var(--fh); font-weight: 900; font-size: clamp(84px, 17vw, 240px); line-height: 0.82; letter-spacing: -0.03em; text-align: center; color: transparent; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0) 85%); -webkit-background-clip: text; background-clip: text; white-space: nowrap; pointer-events: none; user-select: none; z-index: 1; } @media (max-width: 900px) { .site-footer { padding-top: 56px; } .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; } .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; } .footer-watermark { font-size: 20vw; bottom: -2vw; } .footer-meta { justify-content: flex-start; padding: 18px 0 calc(36px + env(safe-area-inset-bottom, 0px)); } }