@invisibleloop/pulse 0.12.3 → 0.14.2

package/docs/public/sparkys.css

@@ -0,0 +1,349 @@
+/*
+ * sparkys.css — Sparkys Electrical template styles
+ * Navy + amber. Light theme.
+ */
+
+/* ── Palette tokens ─────────────────────────────────────────────────────── */
+[data-theme="light"] {
+  --ui-bg:           #f7f9fc;
+  --ui-surface:      #ffffff;
+  --ui-surface-2:    #eef2f8;
+  --ui-border:       #d6deea;
+  --ui-text:         #0f172a;
+  --ui-muted:        #475569;
+  --ui-accent:       #0a3160;
+  --ui-accent-hover: #082748;
+  --ui-accent-dim:   #e3ecf7;
+  --ui-accent-text:  #ffffff;
+
+  --brand-amber:        #b56f00;
+  --brand-amber-soft:   #fff4dd;
+  --brand-amber-strong: #f4a721;
+  --brand-navy-deep:    #062247;
+  --brand-white:        #ffffff;
+  --brand-mist:         #cfd8e6;
+  --brand-overlay-12:   rgba(255, 255, 255, 0.12);
+}
+
+/* ── Base ───────────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  line-height: 1.6;
+}
+
+.brand-mark {
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  font-size: var(--ui-text-lg);
+  color: var(--ui-accent);
+}
+
+/* ── Top utility strip ─────────────────────────────────────────────────── */
+/* top-strip rendered via topStrip() component — background/color set inline */
+.ui-top-strip {
+  max-width: none;
+  padding-inline: var(--ui-space-6);
+}
+.ui-top-strip a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 600;
+}
+.ui-top-strip a:hover { text-decoration: underline; }
+
+/* ── Hero ──────────────────────────────────────────────────────────────── */
+.hero-split {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  min-height: 70vh;
+  background: var(--ui-bg);
+}
+.hero-split__text {
+  padding: var(--ui-space-16) var(--ui-space-8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 640px;
+  margin-left: auto;
+  width: 100%;
+}
+.hero-split__eyebrow {
+  font-size: var(--ui-text-sm);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--ui-accent);
+  margin-bottom: var(--ui-space-4);
+}
+.hero-split__title {
+  font-size: clamp(2.25rem, 5vw, 3.75rem);
+  font-weight: 800;
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  color: var(--ui-text);
+  margin-bottom: var(--ui-space-5);
+}
+.hero-split__subtitle {
+  font-size: var(--ui-text-lg);
+  color: var(--ui-muted);
+  margin-bottom: var(--ui-space-8);
+  max-width: 52ch;
+}
+.hero-split__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-3);
+  margin-bottom: var(--ui-space-8);
+}
+.hero-split__trust {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-5);
+  font-size: var(--ui-text-sm);
+  color: var(--ui-muted);
+  font-weight: 600;
+}
+/* trustList() inside trust slot — override default small size */
+.hero-split__trust .ui-trust-list-item {
+  font-weight: 600;
+}
+
+.hero-split__panel {
+  background: linear-gradient(160deg, var(--ui-accent) 0%, var(--brand-navy-deep) 100%);
+  color: var(--brand-white);
+  padding: var(--ui-space-12) var(--ui-space-8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--ui-space-8);
+  position: relative;
+  overflow: hidden;
+}
+.hero-split__panel::before {
+  content: "";
+  position: absolute;
+  inset: auto -40px -40px auto;
+  width: 220px;
+  height: 220px;
+  background: var(--brand-amber-strong);
+  opacity: 0.18;
+  border-radius: 50%;
+}
+.hero-split__panel-title {
+  font-size: var(--ui-text-sm);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--brand-amber-strong);
+  position: relative;
+}
+.hero-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ui-space-6);
+  position: relative;
+}
+.hero-stat__value {
+  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--brand-white);
+  line-height: 1;
+  margin-bottom: var(--ui-space-2);
+}
+.hero-stat__label {
+  font-size: var(--ui-text-sm);
+  color: var(--brand-mist);
+}
+.hero-stat__rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  color: var(--brand-amber-strong);
+}
+
+/* ── Section base ─────────────────────────────────────────────────────── */
+.section {
+  padding: var(--ui-space-16) var(--ui-space-6);
+}
+.section--alt { background: var(--ui-surface-2); }
+.section__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.section__head {
+  max-width: 640px;
+  margin: 0 auto var(--ui-space-12);
+  text-align: center;
+}
+.section__eyebrow {
+  font-size: var(--ui-text-sm);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--ui-accent);
+  margin-bottom: var(--ui-space-3);
+}
+.section__title {
+  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--ui-text);
+  margin-bottom: var(--ui-space-4);
+}
+.section__subtitle {
+  font-size: var(--ui-text-lg);
+  color: var(--ui-muted);
+}
+
+/* ── Services grid — serviceCard() component ───────────────────────────── */
+.services {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--ui-space-5);
+}
+/* serviceCard() title size override */
+.services .ui-service-card-title {
+  font-size: var(--ui-text-xl);
+  font-weight: 700;
+}
+.services .ui-service-card-desc {
+  font-size: var(--ui-text-base);
+}
+.services .ui-service-card--linked:hover {
+  transform: translateY(-2px);
+}
+
+/* ── Why grid ──────────────────────────────────────────────────────────── */
+.why {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--ui-space-6);
+}
+.why__item {
+  padding: var(--ui-space-6);
+  border-left: 3px solid var(--brand-amber-strong);
+  background: var(--ui-surface);
+}
+.why__title {
+  font-size: var(--ui-text-xl);
+  font-weight: 700;
+  color: var(--ui-text);
+  margin-bottom: var(--ui-space-2);
+}
+.why__body {
+  color: var(--ui-muted);
+}
+
+/* ── Testimonial ───────────────────────────────────────────────────────── */
+.quote {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.quote__mark {
+  font-size: var(--ui-text-4xl);
+  color: var(--brand-amber-strong);
+  font-weight: 800;
+  line-height: 1;
+  margin-bottom: var(--ui-space-3);
+}
+.quote__text {
+  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
+  font-weight: 500;
+  color: var(--ui-text);
+  line-height: 1.45;
+  margin-bottom: var(--ui-space-6);
+}
+.quote__cite {
+  color: var(--ui-muted);
+  font-size: var(--ui-text-sm);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+/* ── Contact strip ─────────────────────────────────────────────────────── */
+.contact-strip {
+  background: var(--ui-accent);
+  color: var(--brand-white);
+  padding: var(--ui-space-12) var(--ui-space-6);
+}
+.contact-strip__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: var(--ui-space-10);
+  align-items: center;
+}
+.contact-strip__title {
+  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: var(--ui-space-3);
+  color: var(--brand-white);
+}
+.contact-strip__lead {
+  font-size: var(--ui-text-lg);
+  color: var(--brand-mist);
+}
+.contact-strip__details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+.contact-strip__details .ui-contact-row {
+  flex-direction: column;
+}
+.contact-strip__details .ui-contact-row-item {
+  color: var(--brand-white);
+  font-weight: 600;
+  font-size: var(--ui-text-lg);
+}
+.contact-strip__details .ui-contact-row-item a { color: var(--brand-white); }
+.contact-strip__details .ui-contact-row-item a:hover { color: var(--brand-amber-strong); }
+.contact-strip__details .ui-contact-row-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--brand-overlay-12);
+  display: grid;
+  place-items: center;
+  line-height: 0;
+  color: var(--brand-white);
+}
+
+/* ── Footer overrides ──────────────────────────────────────────────────── */
+.site-footer__brand {
+  color: var(--brand-white);
+  font-weight: 800;
+  font-size: var(--ui-text-lg);
+  letter-spacing: -0.01em;
+}
+.ui-footer .site-footer__brand { color: var(--brand-white); }
+.ui-footer {
+  background: var(--brand-navy-deep);
+  color: var(--brand-mist);
+}
+.ui-footer a           { color: var(--brand-mist); }
+.ui-footer a:hover     { color: var(--brand-white); }
+.ui-footer .ui-footer-legal,
+.ui-footer p           { color: var(--brand-mist); }
+
+/* ── Responsive ───────────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .hero-split               { grid-template-columns: 1fr; min-height: auto; }
+  .hero-split__text         { padding: var(--ui-space-12) var(--ui-space-6); margin: 0 auto; }
+  .hero-split__panel        { padding: var(--ui-space-10) var(--ui-space-6); }
+  .services                 { grid-template-columns: repeat(2, 1fr); }
+  .why                      { grid-template-columns: 1fr; }
+  .contact-strip__inner     { grid-template-columns: 1fr; }
+}
+@media (max-width: 600px) {
+  .services   { grid-template-columns: 1fr; }
+  .hero-stats { grid-template-columns: 1fr; }
+  .section    { padding: var(--ui-space-12) var(--ui-space-5); }
+}