Layout
Layout rules for all BSS services (edu, data, and portal). Max-width, edge padding, the container utility, and section rhythm are all managed from a single source (globals.css). The core principle: header, body, and footer always align to the same left and right edge.
Max-width (1640)
Every app page uses --content-max: 1640px as its content max-width. The header and footer inner shells use the same value, so the logo, body text, and footer text always sit on the same vertical edge regardless of screen size. Per-page max-widths (e.g., 1320 or 1280) are not allowed.
1640px
Shared max-width for header, body, and footer
Edge Padding
Edge padding prevents content from touching the viewport edge on screens narrower than the max-width. Desktop uses a fluid value proportional to viewport width; mobile uses a fixed 36px. Because header, body, and footer share the same padding, horizontal alignment is always consistent.
clamp(20px, 3vw, 44px)
Active at viewport widths of 640px and above. Scales naturally from 20px on narrow screens, through roughly 28–36px at typical widths, up to a maximum of 44px on wide screens.
36px fixed
The header logo, body text, and footer brand name all start 36px from the left edge, keeping horizontal lines perfectly aligned.
--chrome-pad
Desktop edge padding, left and right. Fluid between 20px and 44px based on viewport width.
36px (fixed)
Mobile edge padding, left and right. Header, body, and footer all share the same 36px, keeping vertical alignment consistent.
Container
.container is the global utility class defined in globals.css. It applies max-width, edge padding, and centering in one class. The header and footer inner shells follow the same rule. Do not define per-page widths or padding.
.container {
width: 100%;
max-width: var(--content-max); /* 1640px */
margin: 0 auto;
padding: 0 var(--chrome-pad); /* clamp(20px, 3vw, 44px) */
}
@media (max-width: 640px) {
.container {
padding: 0 36px;
}
}.container
Global utility defined in globals.css. A single class that centers content within the max-width with correct edge padding.
Section Rhythm
Page body content is divided into sections. Sections are separated by padding-top: 80px and a 1px top hairline to establish vertical rhythm. Section headings are fixed at 27px / 800 / ink-deep. Using the primary color in headings is not allowed.
Section A
Section content area
Section B
Section content area
Section C
Section content area
padding-top
Top spacing between sections. Applied at the start of each section to establish vertical rhythm.
border-top
Section divider hairline. Sits above the padding to visually separate sections.
Guardrails
Max-width = 1640 everywhere
1640px is the content max-width for every app page — edu, data, and portal. Even heavily columned layouts must fit within it.
Consistent edge padding
Header, body, and footer all share the same edge padding — --chrome-pad on desktop and 36px on mobile.
Consistent section rhythm
Section spacing is always 80px + hairline. Do not break the rhythm with ad-hoc margin or padding overrides.
Reuse .container
Never define per-page widths. Always use the global .container class as-is.