/* ============================================================ CUSTOM.CSS — Brand & Design Customization Edison Local Schools Split from Styles.css — contains visual styling, typography, color/font choices, and brand treatment. Styles.css retains the structural layout shell. ============================================================ */ /* overflow-x:clip prevents horizontal scroll WITHOUT creating a scroll container. `overflow: hidden` would clip content but ALSO break `position: sticky` for every descendant (#ucLeftNav_pnlLeftSide left nav, anything else trying to be sticky). `clip` is supported in all modern browsers (Chrome 90+, Firefox 81+, Safari 16+). Fallback for old browsers: declare hidden first, modern browsers use clip. */ body { overflow-x: hidden; /* fallback for older browsers (clip ignored) */ overflow-x: clip; /* modern browsers — keeps sticky working */ } /* ============================================================ SITE SHELL — single source of truth for horizontal alignment Every major section's INNER container uses these vars so the header logo, red sh-strip, dark hero title, breadcrumb row, and main content all start at exactly the same x position. Backgrounds (page-header dark, sh-strip red) stay edge-to-edge; only the inner container is constrained. ============================================================ */ :root { --shell-max: 1400px; --shell-gutter: 40px; } @media (max-width: 1100px) { :root { --shell-gutter: 32px; } } @media (max-width: 640px) { :root { --shell-gutter: 20px; } } .header-container, .sh-strip-inner, .page-header-inner, .interior-wrapper { max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-gutter); box-sizing: border-box; } /* AI search results — fully styled in protected-pages.css */ /* ============================================================ DISTRICT HOMEPAGE — empty-wrapper collapse On the district homepage, Content.aspx.cs sets both ucLeftNav and ucContentPage to Visible=false, but the surrounding
still renders with its padding: 70px 60px 120px — adding ~190px of empty space between the homepage content and the footer. Hide it. ============================================================ */ body.district-home .interior-wrapper { display: none; } /* ============================================================ SCHOOL HOMEPAGES — Vintage photo filter JS adds .school-vintage to when pathname matches /hs, /ms, /es, /ps (with or without .aspx). Scoped to TextWindow content panels only — header, nav, footer, and non-content images are unaffected. ============================================================ */ body.school-vintage [data-comp-kind="Text Window"] img { filter: sepia(0.38) saturate(0.72) contrast(0.82) brightness(1.08); opacity: 0.92; } /* ============================================================ PAGE HEADER VISUALS ============================================================ */ .page-header { background: var(--blue-lt, #eaecf6); position: relative; overflow: hidden; padding-block: 18px 16px; } .page-header-grid { display: none; } h1.page_header { font-family: var(--font-head, 'Oswald', sans-serif); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .02em; color: var(--black) !important; line-height: 1.2; margin: 0 0 2px; } .page-header-accent { display: block; width: 36px; height: 2px; background: var(--orange, #f55400); margin-top: 6px; } /* ============================================================ COMPONENT HEADER TYPOGRAPHY ============================================================ */ h2.component_header { color: var(--blue); font-size: 1.75em; margin-bottom: 8px; font-weight: 600; font-family: var(--font-head, 'Oswald', sans-serif); font-style: normal; text-transform: uppercase; letter-spacing: .02em; } h3.component_title { color: var(--black); font-size: 1.4em; margin-bottom: 6px; font-weight: 600; } /* Text window title label (CMS component span) */ span[id$="lblTextWindowTitle"], span[id$="lblComponentHeaderText"] { display: block; font-family: var(--font-head, 'Oswald', sans-serif); font-size: 2.4rem; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .01em; color: var(--black); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 3px solid var(--orange); line-height: 1.2; } /* Component header (Header.ascx) wraps its text in an

; neutralize the browser's default h1 sizing/margins so it inherits the title styling above. */ span[id$="lblComponentHeaderText"] h1 { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; margin: 0; padding: 0; display: inline; } /* Right (window 2) panel */ #ucContentPage_pnlRightWindowControls { margin-top: 8px; } /* Right (window 2) panel title slightly smaller */ #ucContentPage_pnlRightWindowControls span[id$="lblTextWindowTitle"] { font-size: 2.25rem; padding-bottom: 6px; margin-bottom: 14px; } /* Suppress the
ASP.NET injects after title label */ span[id$="lblTextWindowTitle"] + br { display: none; } /* ============================================================ TEXT WINDOW TYPOGRAPHY ============================================================ */ .textwindow_text h2 { font-family: var(--font-head, 'Oswald', sans-serif); font-size: 1.7rem; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .01em; color: var(--black); margin: 24px 0 12px; line-height: 1.25; } .textwindow_text h3 { font-family: var(--font-head, 'Oswald', sans-serif); font-size: 1.35rem; font-weight: 600; color: var(--black); margin: 20px 0 8px; } .textwindow_text h4 { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--black); margin: 16px 0 6px; } .textwindow_text p { margin-bottom: 14px; } /* Content-area links stand out in IH red with a matching subtle underline. Scoped to .textwindow_text so global navigation / buttons / cards keep their own styling. */ .textwindow_text a { color: var(--red); text-decoration: none; transition: color 0.2s; } .textwindow_text a:hover { color: var(--dark-red); border-bottom-color: var(--dark-red); } /* ============================================================ CONTENT-AREA MEDIA (text windows, news, component bodies) The content column on interior pages got wide after the layout rework, and bare /