/* ============================================================================
RESPONSIVE OVERRIDES
----------------------------------------------------------------------------
Loaded LAST so it can override per-page CSS without specificity battles.
Breakpoints (in source-order so narrower rules win the cascade):
1. Tablet 901-1100px — soften 2-col layouts, shrink type
2. Mobile ≤900px — collapse to 1 col, retune type/spacing
3. Phone ≤600px — narrower phone tuning (iPhone, Pixel)
4. Small ≤380px — iPhone SE / 320-class screens
============================================================================ */
/* ============================================================================
TABLET — 901-1100px. Keep 2-col layouts, just tighten everything.
============================================================================ */
@media (min-width: 901px) and (max-width: 1100px) {
/* Sub-page heroes — title takes less width so photos get more breathing room */
.kae-elec__hero, .kae-comms__hero, .kae-serv__hero {
grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
}
.kae-elec__title, .kae-comms__title, .kae-serv__title {
font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}
/* Main 2-col sections: reduce gap so content fits */
.kae-elec__main, .kae-comms__services, .kae-serv__main {
gap: clamp(1.5rem, 1rem + 1vw, 2.5rem);
padding-left: clamp(1.5rem, 1rem + 1vw, 2.5rem);
padding-right: clamp(1.5rem, 1rem + 1vw, 2.5rem);
}
/* Electric markets — keep 2 sub-columns but tighter gap */
.kae-elec__markets { gap: 0 1rem; }
/* Process icons band — tighter padding */
.kae-elec__process-band { padding: 1.25rem 1.5rem; }
.kae-elec__process-labels span { font-size: 0.8125rem; }
/* Contact: smaller title margin so map doesn't overshoot */
.kae-contact__top-text { padding-top: 1rem; }
.kae-contact__title { font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
/* History dateline buttons stay 6-up but text shrinks */
.kae-hist__dateline-btn { font-size: 0.875rem; }
.kae-hist__dateline-label { font-size: 1.5rem; }
/* History timeline rows: middle photo column shrinks */
.kae-hist__row {
grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 320px) minmax(0, 1fr);
}
}
/* ============================================================================
MOBILE — ≤900px. Collapse 2-col → 1-col across the site.
============================================================================ */
@media (max-width: 900px) {
/* Anchor jumps need to land below the 60px mobile header bar. */
html { scroll-padding-top: 60px; }
/* ---- Page roots: turn off the 1920 canvas cap and let content flow. ---- */
/* Use overflow-x: clip (not hidden) so it doesn't implicitly create a
scroll container — which would break position: sticky on descendants
like .kae-hist__dateline. */
.kae-home, .kae-elec, .kae-comms, .kae-serv, .kae-hist, .kae-contact {
max-width: 100%;
overflow-x: clip;
}
/* ---- Shared hero (title + image grid) ---- */
/* Default: single-column hero on mobile — title spans full width, photo
grid below. (Home page overrides to 2 cols so the logo can sit next
to the title.) */
.kae-hero, .kae-elec__hero, .kae-comms__hero, .kae-serv__hero {
grid-template-columns: 1fr;
padding: 1.5rem 1rem;
gap: 1.25rem;
}
/* Hero titles on mobile — keep original sizing. */
.kae-hero__title, .kae-elec__title, .kae-comms__title, .kae-serv__title,
.kae-hist__title, .kae-contact__title {
font-size: clamp(2.25rem, 1.5rem + 3vw, 3rem);
line-height: 1.05;
margin-top: 0;
}
/* Drop the desktop
line breaks on non-home hero titles so the text
reflows to fill the full screen width naturally. (Source HTML has a
space before each
so the words don't run together when joined.) */
.kae-elec__title br, .kae-comms__title br, .kae-serv__title br,
.kae-hist__title br, .kae-contact__title br { display: none; }
/* Home page only: 2-col hero — title in col 1, kaemmerlen logo in col 2,
photo grid spans both cols below. */
.kae-hero {
grid-template-columns: 1fr 1fr;
}
.kae-hero .kae-hero__title { grid-column: 1; }
.kae-hero__grid {
grid-column: 1 / -1;
}
.kae-hero__mobile-logo {
display: block;
grid-column: 2;
grid-row: 1;
width: 100%;
max-width: 180px;
height: auto;
align-self: center;
justify-self: center;
}
/* Hero photo grids: keep the multi-photo composition but shrink to single
column gap so they read as a tidy stack rather than a pixel-perfect grid. */
.kae-hero__row--1, .kae-hero__row--2 {
grid-template-columns: 1fr 1fr; /* 2 photos per row stays nice on phones */
gap: 4px;
}
/* Sub-page hero rows */
.kae-elec__row--top, .kae-elec__row--bot,
.kae-serv__row--top, .kae-serv__row--bot,
.kae-comms__row--top {
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.kae-comms__row--bot { grid-template-columns: 1fr; }
/* Re-cast hero photo aspect-ratios to a single uniform 4:3 — different
bespoke ratios per Figma look weird at phone width. */
.kae-hero__img--1, .kae-hero__img--2, .kae-hero__img--3, .kae-hero__img--4,
.kae-elec__img--1, .kae-elec__img--2, .kae-elec__img--3, .kae-elec__img--4,
.kae-comms__img--1, .kae-comms__img--2,
.kae-serv__img--1, .kae-serv__img--2, .kae-serv__img--3, .kae-serv__img--4 {
aspect-ratio: 4 / 3;
}
.kae-comms__img--3 { aspect-ratio: 16 / 9; } /* full-width comms bottom photo */
/* ---- Home: Welcome — Bob photo (60%) + 100yr logo (40%) share row 1;
testimonial and body group span both cols on rows 2 + 3. */
.kae-welcome {
grid-template-columns: 60% 40%;
padding: 2rem 1.5rem;
column-gap: 1rem;
row-gap: 1.5rem;
width: 100%;
max-width: none;
}
.kae-welcome__photo {
grid-column: 1 !important;
grid-row: 1 !important;
max-width: 100% !important;
align-self: center !important;
}
.kae-welcome__logo {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: start !important;
align-self: center !important;
max-width: 200px !important;
padding-right: 1.25rem !important;
}
.kae-welcome__testimonial {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
max-width: 100% !important;
}
.kae-welcome__body-group {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
max-width: 100% !important;
}
.kae-welcome__body { max-width: 100% !important; }
.kae-welcome__logo {
justify-self: start;
max-width: 220px;
margin-left: 0;
}
.kae-welcome__testimonial { font-size: 1.25rem; line-height: 1.4; }
.kae-welcome__attribution { font-size: 1rem; }
.kae-welcome__body, .kae-welcome__cta { font-size: 1rem; line-height: 1.6; }
/* ---- Home: Divisions (3 circles → 1 column) ---- */
.kae-div { padding: 2rem 1.5rem; }
.kae-div__title, .kae-anniv__title { font-size: 2.25rem; line-height: 1.1; }
.kae-div__grid {
grid-template-columns: 1fr;
padding: 1rem 0 0;
gap: 1.75rem;
}
.kae-home .kae-div__circle, .kae-div__circle { width: 130px; height: 130px; }
.kae-home .kae-div__name, .kae-div__name {
font-size: 1.375rem; line-height: 1;
/* margin-top: 0 — let the circle's own bottom margin set the gap */
/* margin-bottom inherits from home.css (clamp 16-24px) */
}
.kae-home .kae-div__desc, .kae-div__desc {
font-size: 1rem; line-height: 1.45; max-width: 100%;
}
/* ---- Home: 100th anniversary (text + awards stack) ---- */
.kae-anniv {
grid-template-columns: 1fr;
gap: 0;
padding: 0;
width: 100%;
max-width: none;
}
.kae-anniv__main {
padding: 2rem 1.5rem;
width: 100%;
max-width: none;
}
.kae-anniv__body {
font-size: 1rem;
line-height: 1.6;
max-width: none; /* let body fill the column on mobile */
}
.kae-awards { padding: 1.75rem 1.5rem; }
.kae-awards p, .kae-awards li { font-size: 0.9375rem; line-height: 1.55; }
.kae-awards .kae-awards__title { font-size: 1.5rem; margin-bottom: 1rem; }
/* ---- Home: historical logos strip (wrap) ---- */
.kae-historical { padding: 2rem 1.5rem; }
.kae-historical__row { flex-wrap: wrap; justify-content: center; gap: 1rem; padding-bottom: 1.25rem; }
.kae-historical__row img { max-height: 60px; }
.kae-historical__caption { font-size: 1rem; text-align: center; }
/* ---- Electric / Comms / Service: intro band stacks icon over text ---- */
.kae-elec__intro, .kae-comms__intro, .kae-serv__intro {
grid-template-columns: 1fr;
padding: 1.75rem 1.5rem;
gap: 1rem;
}
.kae-elec__intro-icon, .kae-comms__intro-icon, .kae-serv__intro-icon {
width: 60px;
}
.kae-elec__intro-body p, .kae-comms__intro-body, .kae-serv__intro-body {
font-size: 1.0625rem;
line-height: 1.55;
}
/* ---- Electric / Comms / Service: 2-col → 1-col main sections ---- */
.kae-elec__main, .kae-comms__services, .kae-serv__main {
grid-template-columns: 1fr;
padding: 2rem 1.5rem;
gap: 1.75rem;
}
.kae-elec__section-title, .kae-comms__section-title, .kae-serv__section-title {
font-size: 1.625rem;
line-height: 1.1;
}
.kae-elec__body, .kae-comms__body, .kae-serv__body,
.kae-elec__markets-col li, .kae-comms__list li, .kae-serv__list > li {
font-size: 1rem;
line-height: 1.5;
}
.kae-elec__markets-col li, .kae-comms__list li, .kae-serv__list > li {
padding-left: 1.125rem;
}
.kae-elec__markets { grid-template-columns: 1fr; gap: 0.5rem; }
.kae-elec__process-band { padding: 1rem; }
.kae-elec__process-labels span { font-size: 0.6875rem; }
/* Comms photo to the top so it doesn't follow a long bullet list */
.kae-comms__services-photo { order: -1; }
.kae-serv__list li ul li { font-size: 0.9375rem; }
/* ---- Contact ---- */
.kae-contact__top, .kae-contact__bottom {
grid-template-columns: 1fr;
padding: 1.75rem 1.5rem;
gap: 1.25rem;
}
.kae-contact__top-text { padding-top: 0; }
.kae-contact__title { margin-bottom: 0.875rem; }
.kae-contact__intro { font-size: 1.0625rem; max-width: 100%; }
.kae-contact__map { aspect-ratio: 16 / 10; }
.kae-contact__photo { display: none; } /* hide on mobile — saves vertical space */
.kae-contact__form { padding: 0; }
.kae-contact__field input, .kae-contact__field textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */
.kae-contact__submit { min-width: 100%; align-self: stretch; padding: 1rem; }
/* ---- History page ---- */
.kae-hist__photos { grid-template-columns: 1fr 1fr; gap: 4px; padding-top: 2rem; }
.kae-hist__photo { aspect-ratio: 4 / 3 !important; }
.kae-hist__intro { grid-template-columns: 1fr; padding: 1.5rem; gap: 0.75rem; }
.kae-hist__p1 { font-size: 1.0625rem; padding-top: 0; }
.kae-hist__blue { padding: 1rem 1.5rem 0.875rem; gap: 1.5rem; }
.kae-hist__blue-top { grid-template-columns: 1fr; gap: 1.75rem; }
.kae-hist__p { font-size: 1rem; line-height: 1.5; max-width: 100%; }
.kae-hist__100 { margin: 0 auto; max-width: 240px; }
.kae-hist__100-num { font-size: 4.5rem; }
.kae-hist__100-est { font-size: 0.7rem; padding: 0.15rem 0.85rem; }
/* Dateline: interleave button rows with their labels so each label sits
directly under its button. Both ULs flatten via display: contents and
items get explicit grid-row positions in a 4-row x 3-col grid. */
.kae-hist__dateline {
padding: 1.125rem 1.5rem 0.875rem;
top: 60px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem 0.5rem;
}
.kae-hist__dateline-row,
.kae-hist__dateline-labels { display: contents; margin: 0; }
.kae-hist__dateline-item:nth-child(-n+3) { grid-row: 1; }
.kae-hist__dateline-item:nth-child(n+4) { grid-row: 3; }
.kae-hist__dateline-label:nth-child(-n+3) { grid-row: 2; }
.kae-hist__dateline-label:nth-child(n+4) { grid-row: 4; margin-bottom: 0.25rem; }
.kae-hist__dateline-btn { font-size: 0.75rem; height: 2.5rem; border-radius: 8px 8px 4px 4px; max-width: none; padding: 0 0.25rem; }
.kae-hist__dateline-label { font-size: 0.875rem; line-height: 1.2; text-align: center !important; padding-left: 0 !important; white-space: normal; grid-column: auto !important; }
/* Triangle pointers cluttered at this size */
.kae-hist__dateline-item.is-active::after,
.kae-hist__dateline-item.has-arrow::after,
.kae-hist__dateline-btn::after { display: none; }
/* Timeline rows: stack everything in a single column, drop the scattered offsets */
.kae-hist__row {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 1rem;
padding: 1.5rem;
}
.kae-hist__col {
text-align: left !important;
grid-row: auto !important;
grid-column: 1 !important;
}
.kae-hist__media {
grid-column: 1 !important;
grid-row: auto !important;
transform: none !important;
margin: 0 auto !important;
align-self: stretch !important;
width: 100% !important; /* override per-photo --media-w */
max-width: 360px;
}
.kae-hist__media-stack { grid-column: 1 !important; grid-row: auto !important; }
/* Overlap photos sit between sections — on mobile, drop the negative-margin
pull-up since the grayscale alternation is no longer obvious in 1-col. */
.kae-hist__overlap-photo {
margin: 0 auto !important;
max-width: 360px;
width: 100% !important;
transform: none !important; /* clear desktop --offset translateX so photo stays on screen */
}
.kae-hist__entry { font-size: 0.9375rem; line-height: 1.55; }
.kae-hist__entry strong { font-size: 1rem; }
.kae-hist__centennial { padding: 2rem 1.5rem; }
.kae-hist__centennial img { width: 200px; }
}
/* ============================================================================
PHONE — ≤600px. Tighter padding, smaller photos, full-width hero rows.
============================================================================ */
@media (max-width: 600px) {
/* Keep the multi-photo grid (2x2 etc.) on phones — don't collapse to a
single column. Each image stays smaller and the composition reads as a
proper grid below the title. */
.kae-hero__row--1, .kae-hero__row--2,
.kae-elec__row--top, .kae-elec__row--bot,
.kae-serv__row--top, .kae-serv__row--bot,
.kae-comms__row--top {
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.kae-comms__row--bot { grid-template-columns: 1fr; }
/* Squarer aspect-ratio so each photo in the 2-col grid has reasonable height
(4:3 was OK at half-width on tablets; on phones the cells are narrower). */
.kae-hero__img--1, .kae-hero__img--2, .kae-hero__img--3, .kae-hero__img--4,
.kae-elec__img--1, .kae-elec__img--2, .kae-elec__img--3, .kae-elec__img--4,
.kae-comms__img--1, .kae-comms__img--2,
.kae-serv__img--1, .kae-serv__img--2, .kae-serv__img--3, .kae-serv__img--4 {
aspect-ratio: 4 / 3;
}
.kae-comms__img--3 { aspect-ratio: 16 / 9; }
/* Tighter padding everywhere there was 1.5rem */
.kae-hero, .kae-elec__hero, .kae-comms__hero, .kae-serv__hero,
.kae-welcome, .kae-div, .kae-anniv__main, .kae-awards, .kae-historical,
.kae-elec__intro, .kae-comms__intro, .kae-serv__intro,
.kae-elec__main, .kae-comms__services, .kae-serv__main,
.kae-contact__top, .kae-contact__bottom,
.kae-hist__intro, .kae-hist__blue, .kae-hist__row, .kae-hist__dateline,
.kae-hist__centennial {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.kae-contact__photo {
margin-left: -1.25rem;
width: calc(100% + 2.5rem);
}
/* Tighter type on the smallest screens */
.kae-hero__title, .kae-elec__title, .kae-comms__title, .kae-serv__title,
.kae-hist__title, .kae-contact__title {
font-size: clamp(2rem, 1.25rem + 4vw, 2.5rem);
}
.kae-div__title, .kae-anniv__title { font-size: 1.875rem; }
/* History photo strip: keep the 2x2 grid on phones so the photos stay
compact rather than ballooning to full-width single-column. */
.kae-hist__photos { grid-template-columns: 1fr 1fr; gap: 4px; }
.kae-hist__photo { aspect-ratio: 4 / 3 !important; }
/* Historical logos strip: 2-up grid instead of flex-wrap (cleaner) */
.kae-historical__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem 1.25rem; }
}
/* ============================================================================
SMALL — ≤380px. iPhone SE / Galaxy 320-class.
============================================================================ */
@media (max-width: 380px) {
.kae-hero, .kae-elec__hero, .kae-comms__hero, .kae-serv__hero,
.kae-welcome, .kae-div, .kae-anniv__main, .kae-awards,
.kae-elec__intro, .kae-comms__intro, .kae-serv__intro,
.kae-elec__main, .kae-comms__services, .kae-serv__main,
.kae-contact__top, .kae-contact__bottom,
.kae-hist__intro, .kae-hist__blue, .kae-hist__row, .kae-hist__dateline,
.kae-historical, .kae-hist__centennial {
padding-left: 1rem;
padding-right: 1rem;
}
.kae-contact__photo { margin-left: -1rem; width: calc(100% + 2rem); }
.kae-hero__title, .kae-elec__title, .kae-comms__title, .kae-serv__title,
.kae-hist__title, .kae-contact__title { font-size: 1.875rem; }
.kae-welcome__testimonial { font-size: 1.125rem; }
.kae-div__title, .kae-anniv__title { font-size: 1.625rem; }
/* Dateline gets really cramped under 380 — drop the parent grid to 2 cols.
With display: contents on the rows/labels, override the parent grid. */
.kae-hist__dateline { grid-template-columns: repeat(2, 1fr); }
/* 6 buttons + 6 labels in 2 cols → button-rows on rows 1, 3, 5; label-rows on 2, 4, 6 */
.kae-hist__dateline-item:nth-child(1), .kae-hist__dateline-item:nth-child(2) { grid-row: 1; }
.kae-hist__dateline-label:nth-child(1), .kae-hist__dateline-label:nth-child(2) { grid-row: 2; }
.kae-hist__dateline-item:nth-child(3), .kae-hist__dateline-item:nth-child(4) { grid-row: 3; }
.kae-hist__dateline-label:nth-child(3), .kae-hist__dateline-label:nth-child(4) { grid-row: 4; }
.kae-hist__dateline-item:nth-child(5), .kae-hist__dateline-item:nth-child(6) { grid-row: 5; }
.kae-hist__dateline-label:nth-child(5), .kae-hist__dateline-label:nth-child(6) { grid-row: 6; }
}