/* ============================================================ PHARR — Tweak themes (index only) Three expressive axes driven by attributes: data-mood · data-density · data-headline Each reshapes tokens that cascade through the whole page. ============================================================ */ /* ---------- MOOD — palette & emotional register ---------- */ /* Royal = the default token set; declared for an explicit reset. */ html[data-mood="royal"] { --blue: #2347cf; --blue-bright: #335ce6; --blue-deep: #15307f; --blue-tint: #dfe6fb; --bg-navy: #0e1c3d; --bg-navy-2: #11224a; --bg-blue: #eef2fd; --bg-soft: #f4f6fb; } /* Steel — cooler, desaturated, institutional. Reads sober & engineered. */ html[data-mood="steel"] { --blue: #2f5d86; --blue-bright: #3d77a8; --blue-deep: #1b3a55; --blue-tint: #d9e4ee; --bg-navy: #16242e; --bg-navy-2: #1b2d3a; --bg-blue: #e9eff4; --bg-soft: #f1f5f7; --ink: #15222c; --ink-soft: #46555f; } /* Sunbelt — warm terracotta accent over warm neutrals. Regional, inviting. */ html[data-mood="sunbelt"] { --blue: #c25a2c; --blue-bright: #dd7440; --blue-deep: #8f3f1c; --blue-tint: #f3e1d4; --bg-navy: #211a13; --bg-navy-2: #2a2018; --bg-blue: #fbf0e7; --bg-soft: #f8f3ec; --ink: #221a12; --ink-soft: #5a4d40; } /* Smooth the recolor when switching moods. */ html[data-mood] body, html[data-mood] .site-header, html[data-mood] .btn, html[data-mood] .svc-card, html[data-mood] .stat, html[data-mood] .hero { transition: background-color .5s var(--ease), color .5s var(--ease); } /* ---------- DENSITY — spatial rhythm ---------- */ html[data-density="compact"] { --section-y: clamp(40px, 4.6vw, 74px); } html[data-density="compact"] .hero { padding-top: clamp(172px, 18vh, 196px); padding-bottom: clamp(30px, 4vw, 52px); } html[data-density="compact"] .hero__copy { gap: 16px; } html[data-density="compact"] .svc-grid, html[data-density="compact"] .stats-grid { margin-top: 34px; } html[data-density="compact"] .stats__head { margin-bottom: 32px; } html[data-density="spacious"] { --section-y: clamp(104px, 13vw, 196px); } html[data-density="spacious"] .hero { padding-top: clamp(190px, 23vh, 250px); padding-bottom: clamp(72px, 10vw, 128px); } html[data-density="spacious"] .hero__copy { gap: 34px; } html[data-density="spacious"] .svc-grid { margin-top: 74px; } html[data-density="spacious"] .stats__head { margin-bottom: 72px; } /* ---------- HEADLINE — typographic personality ---------- */ /* Geometric = default Outfit. */ html[data-headline="editorial"] { --font-display: "Spectral", Georgia, serif; } html[data-headline="editorial"] h1, html[data-headline="editorial"] h2, html[data-headline="editorial"] h3, html[data-headline="editorial"] h4 { letter-spacing: -0.004em; font-weight: 600; } html[data-headline="editorial"] .display, html[data-headline="editorial"] .hero h1, html[data-headline="editorial"] .page-hero h1 { letter-spacing: -0.008em; font-weight: 500; } html[data-headline="editorial"] .display em, html[data-headline="editorial"] .hero h1 em { font-style: italic; } html[data-headline="industrial"] { --font-display: "Saira Condensed", "Arial Narrow", sans-serif; } html[data-headline="industrial"] h1, html[data-headline="industrial"] h2, html[data-headline="industrial"] h3, html[data-headline="industrial"] h4 { letter-spacing: 0.004em; font-weight: 600; text-transform: uppercase; } html[data-headline="industrial"] .eyebrow { letter-spacing: 0.18em; } html[data-headline="industrial"] .display, html[data-headline="industrial"] .hero h1, html[data-headline="industrial"] .page-hero h1 { letter-spacing: 0.01em; font-weight: 700; } /* Condensed metrics let the hero headline breathe a little wider. */ html[data-headline="industrial"] .hero h1 { max-width: 15ch; }