or hooks anywhere in this sheet. Every selector targets a real element, an ARIA attribute, or one of the handful of classes already present in planning.html (.python, .classic, .prereqs, .course, .comment). Colour values, the font stack, the 776/1176px measures and the nav metrics are taken from UCLA's own Design System as shipped on physicalsciences.ucla.edu. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* UCLA palette */ --ucla-blue: #2774ae; --darker-blue: #005587; --darkest-blue: #003b5c; --lighter-blue: #8bb8ee; --lightest-blue: #daebfe; --link-blue: #005587; --ucla-gold: #ffd100; --darker-gold: #ffc72c; --darkest-gold: #ffb81c; --gold-tint: #fff3cc; /* gold at ~20%, for table column fills */ --gray-03: #f7f7f7; --gray-05: #f2f2f2; --gray-10: #e5e5e5; --gray-20: #cccccc; --gray-60: #666666; --gray-80: #333333; /* Type */ --font: Helvetica, Roboto, Arial, "Lucida Grande", sans-serif; /* Measures */ --content: 776px; --wide: 1176px; --gutter: clamp(1rem, 4vw, 2rem); /* Logo: UCLA requires >= 30px high online for the boxed mark, and clear space on all sides equal to the width of the letter "U" — which in this artwork is 65/168.84 = 38.5% of the logo's height. 40% is used here. */ --logo-height: 40px; --logo-clear: calc(var(--logo-height) * 0.4); } @media (min-width: 48em) { :root { --logo-height: 56px; } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: 1rem; line-height: 1.5; color: var(--gray-80); background-color: #fff; } /* Skip link — the nav repeats on every page, so SC 2.4.1 needs this. It is the first child of , hence the selector. */ body > a:first-child { position: absolute; top: 0; left: 50%; z-index: 100; transform: translateY(-200%); padding: 0.5rem 1rem; background-color: var(--link-blue); color: #fff; font-weight: 700; text-decoration: none; transition: transform 0.2s; } body > a:first-child:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 3. Layout without wrappers Full-bleed backgrounds and rules with content held to a centred measure, achieved with padding alone so that no container elements are needed. -------------------------------------------------------------------------- */ header, footer { padding-inline: max(var(--gutter), (100% - var(--wide)) / 2); } main { flex: 1; padding-inline: max(var(--gutter), (100% - var(--content)) / 2); padding-block: clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 7vw, 4.5rem); } /* -------------------------------------------------------------------------- 4. Header -------------------------------------------------------------------------- */ header { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--logo-clear); border-top: 8px solid var(--ucla-blue); border-bottom: 1px solid var(--gray-20); padding-block-start: var(--logo-clear); } /* The campus logo. Per UCLA brand guidelines: no shadow, no tint, no grayscale, no reshaping, aspect ratio preserved, minimum clear space on every side. Do not add filter/opacity/border-radius here. */ header > img { display: block; height: var(--logo-height); width: auto; margin: var(--logo-clear) 0; } /* Program name. Kept visually separate from the logo by the full clear space, so the two do not read as an unofficial department lockup. */ header > p { margin: var(--logo-clear) 0; font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem); font-weight: 700; line-height: 1.2; } header > p > a { color: var(--gray-80); text-decoration: none; } header > p > a:visited { color: var(--gray-80); } header > p > a:hover, header > p > a:focus-visible { color: var(--link-blue); text-decoration: underline; } /* -------------------------------------------------------------------------- 5. Navigation Desktop: a horizontal bar; the courses group is a

disclosure whose panel is absolutely positioned so opening it never shifts the page. Mobile: everything stacks and the same

becomes an inline accordion — nothing is hidden behind a toggle. -------------------------------------------------------------------------- */ header > nav { flex-basis: 100%; /* Clearance for the focus ring, which sits outside the item (outline-offset: 0) and would otherwise cross the header's bottom rule. Must be at least the ring's width — see the gap note below. */ margin-block-end: 4px; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { position: relative; } /* Small screens: the items flow and wrap rather than stacking one per row, which keeps the whole menu visible without pushing the page content off the first screen — and without hiding anything behind a toggle. */ nav > ul { display: flex; flex-wrap: wrap; /* 4px on both axes so a focused item's ring, which sits 3px outside the item, clears its neighbours and the row above. Keep this >= the ring's width if that ever changes. */ gap: 4px; } /* The courses group takes a row to itself so its accordion opens cleanly. */ nav > ul > li:has(> details) { flex-basis: 100%; } nav a, nav summary { padding: 0.5rem 0.75rem; min-height: 44px; /* SC 2.5.8 target size */ line-height: 1.75rem; font-size: 1rem; font-weight: 700; color: var(--link-blue); text-decoration: none; border-bottom: 4px solid transparent; } nav a { display: block; } /*

keeps its native display: list-item. Overriding display here (to block or flex) strips the element's button role in some browsers and leaves it exposed as a generic container, so the marker is removed with list-style instead. */ nav summary { display: list-item; list-style: none; cursor: pointer; } nav summary::-webkit-details-marker { display: none; } nav a:visited { color: var(--link-blue); } nav a:hover, nav summary:hover { background-color: var(--ucla-blue); color: #fff; } nav a:focus-visible, nav summary:focus-visible { background-color: #fff; color: var(--link-blue); outline: 3px solid var(--link-blue); outline-offset: 0px; } nav a:focus-visible:hover, nav summary:focus-visible:hover { background-color: var(--lightest-blue); } /* Current page marker — driven by aria-current, no extra class needed. */ nav a[aria-current="page"] { border-bottom-color: var(--ucla-gold); } /* ...and the courses group is marked current when it contains the current page. */ nav details:has(a[aria-current="page"]) > summary { border-bottom-color: var(--ucla-gold); } /* Our own disclosure arrow, in place of the suppressed native marker. */ nav summary::after { content: ""; display: inline-block; margin-left: 0.5em; vertical-align: 0.15em; border: 0.3em solid transparent; border-top-color: currentColor; border-bottom: 0; } nav details[open] > summary::after { transform: rotate(180deg); vertical-align: 0.05em; } /* On small screens the submenu opens inline, as an accordion. */ nav details > ul { background-color: var(--gray-03); border-top: 1px solid var(--gray-10); } nav details > ul a { padding-left: 2rem; font-weight: 400; } /* The course links inside the panel are the one place the ring has to sit INSIDE the item: they are stacked flush within a bordered box, so a ring growing outward would cross the panel's border and its neighbours. The top-level bar has 4px gaps and can afford outline-offset: 0; this cannot. */ nav details > ul a:focus-visible { outline-offset: -3px; } /* An inset ring would clip a border-bottom, so for these links only the current-page marker underlines the text itself. It sits inside the content box, so the ring cannot touch it, and it hugs the label rather than running the full width of the panel. */ nav details > ul a[aria-current="page"] { border-bottom-color: transparent; text-decoration: underline; text-decoration-color: var(--ucla-gold); text-decoration-thickness: 4px; text-underline-offset: 4px; } @media (min-width: 48em) { nav > ul > li:has(> details) { flex-basis: auto; } /* Slightly tighter than UCLA's own metrics: this menu carries seven top-level items with long labels. At these values they occupy 1149px including the 4px gaps, so they hold a single row down to about 1214px and wrap gracefully below that. */ nav a, nav summary { padding: 0.625rem 0.625rem 0.5rem; font-size: 1.0625rem; white-space: nowrap; } /* Dropdown panel */ nav details[open] > ul { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 100%; background-color: #fff; border: 1px solid var(--gray-20); /* border-top: 0; Uncomment to drop the panel's top edge, so it hangs from the summary instead of reading as a closed box. Kept rather than deleted because on the eight course pages the summary carries the gold current-page bar directly above this border; if that doubled gold-then-grey line ever looks wrong, reopening the top is the fix. */ box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); } nav details > ul a { padding-left: 0.625rem; } nav details > ul li + li { border-top: 1px solid var(--gray-10); } } /* -------------------------------------------------------------------------- 6. Typography -------------------------------------------------------------------------- */ h1, h2, h3 { font-weight: 700; line-height: 1.125; text-wrap: balance; color: var(--gray-80); } /* At 200% text zoom on a narrow screen a single long word ("Computing", "Introduction") is wider than the column. Allow breaking rather than letting it push the page sideways (SC 1.4.4 / SC 1.4.10). */ h1, h2, h3, p, li, td, th, caption { overflow-wrap: break-word; } h1 { font-size: clamp(2.25rem, 0.991rem + 2.626vw, 3rem); margin: 0 0 1.5rem; } h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 2.5rem 0 1rem; } h3 { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); margin: 2rem 0 0.75rem; } p { margin: 0 0 1rem; text-wrap: pretty; } /* Nested lists on the course pages run three deep; vary the markers so the levels stay legible. */ main ul { margin: 0 0 1rem; padding-left: 1.5rem; } main li { margin-bottom: 0.375rem; } main ul ul { margin-top: 0.375rem; margin-bottom: 0.5rem; list-style-type: circle; } main ul ul ul { list-style-type: square; } /* -------------------------------------------------------------------------- 7. Sections Flat, like the UCLA reference page: no cards, just rhythm and a hairline between top-level sections. Nested sections stay plain. -------------------------------------------------------------------------- */ main > section + section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--gray-10); } /* The same hairline closes off the page heading. */ main > h1 { padding-bottom: 1.25rem; border-bottom: 1px solid var(--gray-10); } main > section > h2:first-child { margin-top: 0; } main section section { margin-top: 1.5rem; } /* -------------------------------------------------------------------------- 8. Links -------------------------------------------------------------------------- */ main a { color: var(--link-blue); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } main a:visited { color: var(--darkest-blue); } main a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--link-blue); outline-offset: 2px; } /* -------------------------------------------------------------------------- 9. Tables -------------------------------------------------------------------------- */ table { border-collapse: collapse; border: 1px solid var(--gray-20); margin: 0 0 1.5rem; font-size: 0.9375rem; } caption { padding: 0.75rem 0; font-weight: 700; text-align: left; color: var(--gray-80); } th, td { border: 1px solid var(--gray-20); padding: 0.5rem 0.875rem; text-align: center; } thead th { background-color: var(--darker-blue); color: #fff; border-color: var(--darker-blue); } tbody th { background-color: var(--gray-05); font-weight: 700; } /* The track table is the one table with a . Its header cells stay transparent so the Python-centric blue and Classic gold bands run the full height of the table and the two tracks read as continuous columns. */ table:has(colgroup) thead th, table:has(colgroup) tbody th[scope="col"] { background-color: transparent; color: var(--gray-80); border-color: var(--gray-20); } /* Wide tables scroll inside their own labelled region rather than forcing the page sideways (SC 1.4.10). The region is keyboard reachable via tabindex="0" in the markup, and named by its table's . */ section[aria-labelledby] { overflow-x: auto; } section[aria-labelledby] > table { min-width: 100%; } /* Track table column fills. Only background, border, width and visibility apply to , and any td background would paint over these — so this table is deliberately not striped. Colour is reinforcement only; the colgroup headers already name the two tracks in text (SC 1.4.1). */ .prereqs { background-color: #fff; } .python { background-color: var(--lightest-blue); } .classic { background-color: var(--gold-tint); } /* -------------------------------------------------------------------------- 10. Course planner -------------------------------------------------------------------------- */ select.course { font-family: inherit; font-size: 1rem; padding: 0.375rem 0.5rem; min-height: 44px; border: 1px solid var(--gray-60); border-radius: 4px; background-color: var(--gray-05); color: var(--gray-80); } td.comment { color: var(--gray-80); } /* Reserve the width of the longest comment the planner can produce, so the columns do not jump as messages appear and disappear. The text is zero height, clipped and hidden from assistive technology — it only contributes to the column's intrinsic width. Measured against every string planner.js can emit: this one is the widest at 237px, ahead of "You need to take 10A or 16A first." at 224px. If the comment wording in planner.js changes, re-check which is longest. */ td.comment::after { content: "You have already taken this course."; display: block; height: 0; overflow: hidden; visibility: hidden; white-space: nowrap; } /* -------------------------------------------------------------------------- 11. Footer -------------------------------------------------------------------------- */ footer { background-color: var(--darker-blue); border-top: 4px solid var(--ucla-gold); padding-block: 2rem; color: #fff; } footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; } footer a { color: #fff; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } footer a:visited { color: #fff; } footer a:hover { color: var(--ucla-gold); } footer :focus-visible { outline-color: var(--ucla-gold); } /* -------------------------------------------------------------------------- 12. Preferences and print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media print { body > a:first-child, header > nav, footer { display: none; } body { color: #000; } main { padding: 0; } section[aria-labelledby] { overflow-x: visible; } table { font-size: 9pt; } thead th { background-color: transparent; color: #000; border-color: #000; } main a { color: #000; } }