/* ==========================================================================
AGNES SCOTT COLLEGE — OUTCOMES PAGE · v4
/outcomes · Cascade CMS
--------------------------------------------------------------------------
v4 IS A REDUCTION, NOT A RESTYLE.
v3.1 matched the site's visual devices faithfully but used fourteen of
them, repeated the same figures in three places, and hid three quarters of
its data behind year tabs. v4 keeps the devices that were measured off the
live site and throws the rest away.
SEVEN DEVICES, REUSED
bracket tile the site's signature stat mark (#prestige-pane .tile)
horizontal bar ONE chart language — stacked for composition, single for
participation. There is no second chart grammar.
split feature the one photographic moment (campaign "Securing our Future")
gradient band the one saturated colour moment (homepage 230deg wash)
card alumnae, static
accordion site core
list / pill supporting detail
REMOVED FROM v3.1, DELIBERATELY
donut wrong form for close values (47 vs 41); the stacked bar
reads more accurately and freed the tabs
year tabs a prospective student does not browse the Class of 2022.
Four years now show at once, which is both simpler and
more persuasive
circle badges three 150px discs for 46 / 67 / 2 — a hero moment the
fact had not earned. The counts ride the list instead
campaign grid a third way of showing a headline number; the bracket
tile already does that job
mosaic / panels the page now leans on type, colour and space, and needs
two photographs rather than eight
carousel four placeholder cards on a Flickity dependency, with no
content to fill them
hero stat disc repeated the number the bracket tiles carry ten inches
lower
GROUND
White is the default. Exactly three colour moments in the whole page — the
hero, the STEM feature, the Scotties Link band. v3.1 alternated a tinted
band nearly every section, which reads as stripes rather than rhythm.
BRAND
Scottie Purple PMS 267 #633296 — "should always take center stage"
Black 6 #101820 · PMS 430 #7C8886 · yellow #FBD132 · orange #F7A51E
Three purples are live on the site (#633296 brand/token, #5F259F homepage,
#5C2D91 campaign). This kit uses the brand value.
INSTALL
1. Append this file to /assets/css/styles.css.
2. Add outcomes.js before the closing body tag, after the core bundle.
========================================================================== */
/* --------------------------------------------------------------------------
0. TOKENS
-------------------------------------------------------------------------- */
.oc {
--oc-purple: var(--purple, #633296);
--oc-purple-dark: var(--purple-dark, #4a2670);
--oc-yellow: var(--yellow, #fbd132);
--oc-orange: var(--orange, #f7a51e);
--oc-gray-light: var(--gray-light, #f6f6f9);
--oc-sans: var(--sans, expo-sans-pro, "Helvetica Neue", Arial, sans-serif);
--oc-serif: var(--serif, miller-display, Georgia, "Times New Roman", serif);
--oc-ink: #1c1c1c;
--oc-ink-2: #4a4a4a;
--oc-ink-3: #6b6b73;
--oc-rule: #e4e4ea;
--oc-hair: #eeeef2;
/* The homepage's 230deg wash, measured verbatim. Sits over solid purple and
doubles as the accent rule under headings — which is how the site uses it. */
--oc-grad: linear-gradient(230deg,
rgba(247,165,30,.8) 0,
rgba(247,165,30,.2) 35%,
rgba(247,165,30,.1) 40%,
rgba(247,165,30,.05) 45%,
rgba(247,165,30,.024) 50%,
rgba(247,165,30,.01) 55%,
rgba(0,0,0,0) 60%);
--oc-dots: radial-gradient(circle at 20px 20px, rgba(255,255,255,.06) 2px, rgba(0,0,0,0) 2px);
/* DATA PALETTE — all three slots are official Agnes Scott brand colours.
#633296 Scottie Purple PMS 267 · #DE5126 PMS 1665 · #00A27A PMS 334
Validated all-pairs, light mode: lightness band PASS · chroma floor PASS ·
CVD separation PASS (worst dE 10.3, deuteranopia) · normal-vision floor
PASS (dE 28.6) · contrast PASS (all >= 3:1). Brand yellow and orange never
carry data. */
--oc-data-1: #633296;
--oc-data-2: #de5126;
--oc-data-3: #00a27a;
--oc-ease: cubic-bezier(.22, 1, .36, 1);
/* TYPE SCALE — read straight out of /assets/css/styles.css so this page
sits on the same steps as the rest of the site. The site uses fixed
steps with breakpoints, not fluid type, so there is no clamp() here.
.75 h5, h6, .button, .card-slider__meta, .breadcrumbs
.9375 .text-small, .stats__description
1.0625 body, h4
1.375 h3
1.5 .text-large
2 h2
2.375 h1, .card-slider__heading -> 3.25rem at 80em
2.625 .hero__heading -> 4.6875rem at 80em
3 .stats__value -> 4rem at 64em, 5rem at 80em
(styles.css uses duplicate-declaration fallbacks, so the LAST font-size
in a rule is the live one — .stats__value is 3rem, not the 2rem above it.) */
--oc-fs-xs: .75rem; --oc-lh-xs: 1.5;
--oc-fs-sm: .9375rem; --oc-lh-sm: 1.4;
--oc-fs-base: 1.0625rem; --oc-lh-base: 1.471;
--oc-fs-md: 1.375rem; --oc-lh-md: 1.182;
--oc-fs-lg: 1.5rem; --oc-lh-lg: 1.167;
--oc-fs-xl: 2rem; --oc-lh-xl: 1.094;
--oc-fs-2xl: 2.375rem; --oc-lh-2xl: 1.058;
--oc-fs-hero: 2.625rem; --oc-lh-hero: 1;
--oc-fs-stat: 3rem; --oc-lh-stat: 1.094;
font-family: var(--oc-sans);
font-size: var(--oc-fs-base);
line-height: var(--oc-lh-base);
color: var(--oc-ink-2);
-webkit-font-smoothing: antialiased;
}
/* The site's own responsive steps: h1 and .hero__heading grow at 80em,
.stats__value at 64em and again at 80em. */
@media (min-width: 64em) { .oc { --oc-fs-stat: 4rem; } }
@media (min-width: 80em) {
.oc { --oc-fs-2xl: 3.25rem; --oc-fs-hero: 4.6875rem; --oc-fs-stat: 5rem; }
}
/* --------------------------------------------------------------------------
1. LAYOUT
-------------------------------------------------------------------------- */
.oc, .oc *, .oc *::before, .oc *::after { box-sizing: border-box; }
.oc { display: block; position: relative; }
.oc p { margin: 0 0 1.25rem; }
.oc > * > :last-child { margin-bottom: 0; }
.oc-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.oc-inner--center { max-width: 46rem; margin: 0 auto; text-align: center; }
.oc-inner--read { max-width: 46rem; }
.oc--bleed {
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
}
.oc--pad { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.oc--pad-t{ padding-top: 5.5rem; }
.oc--tint { background-color: var(--oc-gray-light); }
.oc--plum { background-color: var(--oc-purple); color: #fff; }
.oc--flush{ overflow: hidden; }
@media (max-width: 48rem) { .oc--pad, .oc--pad-t { padding-top: 3.5rem; } .oc--pad { padding-bottom: 3.5rem; } }
/* A hairline between sections, so white-on-white still has rhythm. */
.oc--divide { border-top: 1px solid var(--oc-hair); }
/* --------------------------------------------------------------------------
2. TYPOGRAPHY
-------------------------------------------------------------------------- */
.oc-eyebrow {
font-family: var(--oc-sans); font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); font-weight: 700;
letter-spacing: .11em; text-transform: uppercase;
color: var(--oc-purple); margin: 0 0 1rem;
}
.oc--plum .oc-eyebrow, .oc-hero .oc-eyebrow,
.oc-grad .oc-eyebrow, .oc-feature .oc-eyebrow { color: var(--oc-yellow); }
.oc-display {
font-family: var(--oc-serif); font-weight: 400;
font-size: var(--oc-fs-2xl);
line-height: var(--oc-lh-2xl); letter-spacing: -.005em;
color: var(--oc-ink); margin: 0 0 1.25rem;
}
.oc--plum .oc-display, .oc-grad .oc-display, .oc-feature .oc-display { color: #fff; }
.oc-h3 {
font-family: var(--oc-sans); font-size: var(--oc-fs-xs); font-weight: 700;
line-height: var(--oc-lh-xs); letter-spacing: .11em; text-transform: uppercase;
color: var(--oc-purple); margin: 0 0 1.25rem;
padding-bottom: .75rem; border-bottom: 2px solid var(--oc-rule);
}
.oc-lede {
font-family: var(--oc-serif);
font-size: var(--oc-fs-lg); line-height: var(--oc-lh-lg);
color: var(--oc-ink); margin: 0 0 1.5rem;
}
.oc-note { font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); color: var(--oc-ink-3); margin: 1.75rem 0 0; }
.oc--plum .oc-note, .oc-grad .oc-note { color: rgba(255,255,255,.82); }
/* The accent rule: brand gradient over purple. */
.oc-accent::after {
content: ""; display: block; width: 120px; height: 4px;
background-color: var(--oc-purple); background-image: var(--oc-grad);
margin: 1.5rem 0 0;
}
.oc-inner--center .oc-accent::after { margin-left: auto; margin-right: auto; }
:where(.oc) :where(a) { color: var(--oc-purple); text-decoration: underline; text-underline-offset: .15em; }
:where(.oc) :where(a:hover, a:focus) { color: var(--oc-purple-dark); }
:where(.oc--plum, .oc-grad, .oc-feature, .oc-hero) :where(a) { color: #fff; }
.oc :focus-visible { outline: 3px solid var(--oc-orange); outline-offset: 3px; }
.oc-visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
3. THE MAGNOLIA — the college's real mark, used twice on the page
-------------------------------------------------------------------------- */
.oc-magnolia {
position: absolute; z-index: 0; pointer-events: none;
width: 760px; height: 760px; max-width: 88vw;
background-repeat: no-repeat; background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%20390%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M195%200c107.52%200%20195%2087.478%20195%20195%200%20107.52-87.478%20195-195%20195C87.48%20390%200%20302.522%200%20195%200%2087.48%2087.472%200%20195%200zm129.88%20203.24c-62.76%208.994-112.65%2058.883-121.65%20121.64%204.203%207.69%208.474%2015.587%208.474%2020.47%200%20.172-.023.337-.029.509%208.611%2010.178%2021.465%2016.662%2035.845%2016.662%2025.936%200%2046.961-21.025%2046.961-46.967%200-23.57-17.37-43.084-40.008-46.446-5.38-.806-9.509-5.45-9.509-11.058%200-6.181%205.01-11.184%2011.184-11.184%205.312%200%209.738%203.705%2010.881%208.668%204.34%2021.448%2023.295%2037.595%2046.023%2037.595%2025.942%200%2046.967-21.025%2046.967-46.96%200-13.655-5.849-25.932-15.152-34.508-4.906-.246-12.534-4.351-19.99-8.422zm-259.76.006c-7.445%204.06-15.049%208.154-19.961%208.417-9.303%208.576-15.152%2020.853-15.152%2034.507%200%2025.936%2021.025%2046.96%2046.961%2046.96%2022.734%200%2041.689-16.146%2046.029-37.594%201.144-4.963%205.57-8.669%2010.881-8.669%206.175%200%2011.178%205.01%2011.178%2011.184%200%205.61-4.128%2010.252-9.509%2011.058-22.637%203.363-40.008%2022.877-40.008%2046.452%200%2025.936%2021.03%2046.961%2046.967%2046.961%2014.363%200%2027.206-6.466%2035.817-16.628-.006-.183-.028-.36-.028-.543%200-4.883%204.27-12.779%208.468-20.464-8.994-62.76-58.883-112.65-121.64-121.64zM195%2031.806c-7.085%200-12.848%205.764-12.848%2012.848%200%203.974%204.54%2012.299%208.194%2018.983l.411.755-.085.629c-9.023%2064.96-60.69%20116.63-125.65%20125.65l-.635.086-.75-.406c-6.683-3.654-15.008-8.2-18.982-8.2-7.085%200-12.848%205.764-12.848%2012.848s5.763%2012.854%2012.848%2012.854c3.974%200%2012.299-4.546%2018.983-8.2l.749-.41.635.09c64.96%209.018%20116.63%2060.69%20125.65%20125.65l.085.63-.423.766c-3.642%206.684-8.182%2014.998-8.182%2018.966%200%207.084%205.764%2012.854%2012.848%2012.854s12.854-5.77%2012.854-12.854c0-3.974-4.546-12.293-8.194-18.978l-.417-.755.086-.635c9.022-64.96%2060.69-116.63%20125.65-125.64l.634-.091.755.417c6.684%203.648%2015.004%208.194%2018.978%208.194%207.085%200%2012.848-5.77%2012.848-12.854s-5.764-12.848-12.848-12.848c-3.974%200-12.293%204.54-18.978%208.194l-.755.411-.634-.086c-64.961-9.017-116.63-60.69-125.65-125.65l-.086-.628.412-.755c3.653-6.684%208.199-15.01%208.199-18.983%200-7.085-5.77-12.848-12.854-12.848zm-.497%2052.197c13.952%2054.534%2056.966%2097.553%20111.5%20111.5-54.534%2013.952-97.548%2056.972-111.5%20111.5-13.952-54.528-56.966-97.548-111.5-111.5%2054.534-13.947%2097.548-56.966%20111.5-111.5zm0%2064.709c-25.843%200-46.797%2020.949-46.797%2046.791s20.954%2046.791%2046.797%2046.791%2046.79-20.949%2046.79-46.791-20.948-46.791-46.79-46.791zm-52-121.14c-25.935%200-46.966%2021.025-46.966%2046.967%200%2023.569%2017.37%2043.084%2040.014%2046.446%205.375.806%209.503%205.45%209.503%2011.058%200%206.181-5.003%2011.184-11.178%2011.184-5.312%200-9.738-3.705-10.881-8.668-4.34-21.448-23.295-37.595-46.029-37.595-25.936%200-46.961%2021.025-46.961%2046.96%200%2013.61%205.804%2025.84%2015.049%2034.417%204.906.206%2012.574%204.334%2020.064%208.428%2062.76-9%20112.65-58.89%20121.64-121.65-4.197-7.685-8.468-15.581-8.468-20.464%200-.154.023-.303.023-.458-8.611-10.16-21.448-16.628-35.811-16.628zm105.02%200c-14.374%200-27.222%206.478-35.84%2016.656.007.143.024.286.024.429%200%204.688-3.937%2012.147-7.965%2019.54l-.503.924c9%2062.76%2058.889%20112.65%20121.65%20121.64%207.501-4.094%2015.187-8.233%2020.093-8.428%209.24-8.577%2015.044-20.807%2015.044-34.41%200-25.936-21.025-46.967-46.961-46.967-22.73%200-41.69%2016.153-46.03%2037.601-1.143%204.963-5.569%208.669-10.874%208.669-6.181%200-11.184-5.01-11.184-11.184%200-5.61%204.128-10.252%209.514-11.058%2022.631-3.363%2040.002-22.877%2040.002-46.452%200-25.936-21.025-46.961-46.967-46.961z%22%2F%3E%3C%2Fsvg%3E");
top: 50%; left: -190px; transform: translateY(-50%);
}
.oc-magnolia--right { left: auto; right: -190px; }
.oc--plum .oc-magnolia, .oc-grad .oc-magnolia, .oc-feature .oc-magnolia { opacity: .09; }
.oc-hero .oc-magnolia { opacity: .14; }
@media (max-width: 48rem) { .oc-magnolia { width: 440px; height: 440px; } }
/* --------------------------------------------------------------------------
4. SITE-CORE TIE-INS
-------------------------------------------------------------------------- */
/* ---- inline links on the dark bands ----------------------------------
The site core styles every as purple text with a purple 1px underline
drawn as a background-image gradient. On a white page that is correct; on
our purple and gradient bands it is purple-on-purple, which measured about
1:1 against the band and was effectively invisible on the live page.
This was missed for a while because the preview's stand-in for the core
styles no at all, so the link inherited white and looked fine locally.
The stand-in now carries the real rule, and contrast.mjs sees it.
Restated in our own terms: white text, yellow underline, yellow on hover.
.button is excluded - it is a solid block with its own colours. So is
.oc-cta__link: those are full-width block links, so a 100%-wide "underline"
painted as a background image runs the entire width of the cell and reads
as a stray rule under the row rather than as an underline. */
.oc--plum a:not(.button):not(.oc-jump__link):not(.oc-cta__link),
.oc-grad a:not(.button):not(.oc-jump__link):not(.oc-cta__link),
.oc-feature a:not(.button):not(.oc-jump__link):not(.oc-cta__link),
.oc-hero a:not(.button):not(.oc-jump__link):not(.oc-cta__link) {
color: #fff;
background-image: linear-gradient(var(--oc-yellow), var(--oc-yellow));
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
text-decoration: none;
}
.oc--plum a:not(.button):not(.oc-jump__link):not(.oc-cta__link):hover,
.oc-grad a:not(.button):not(.oc-jump__link):not(.oc-cta__link):hover,
.oc-feature a:not(.button):not(.oc-jump__link):not(.oc-cta__link):hover,
.oc-hero a:not(.button):not(.oc-jump__link):not(.oc-cta__link):hover {
color: var(--oc-yellow);
}
.oc-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.oc-faq .accordion { margin: 2.5rem 0 0; }
.counter { font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
5. HERO — editorial opener. No stat disc: the bracket tiles below carry
the numbers, and repeating them here made the page feel padded.
-------------------------------------------------------------------------- */
.oc-hero {
position: relative; color: #fff; overflow: hidden;
background-color: var(--oc-purple-dark);
background-size: cover; background-position: center 28%;
min-height: 34rem; display: flex; align-items: flex-end;
}
.oc-hero::after {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(16,10,26,.15) 0%, rgba(16,10,26,.5) 48%, rgba(16,10,26,.88) 100%);
}
.oc-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 9rem; padding-bottom: 4rem; }
.oc-hero__text { max-width: 40rem; }
.oc-hero__title {
font-family: var(--oc-serif); font-weight: 400;
font-size: var(--oc-fs-hero);
line-height: var(--oc-lh-hero); letter-spacing: -.01em; color: #fff; margin: 0 0 1.25rem;
}
.oc-hero__note { font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); color: rgba(255,255,255,.82); margin: 1rem 0 0; max-width: 34rem; }
.oc-hero__lede {
font-family: var(--oc-serif);
font-size: var(--oc-fs-lg); line-height: var(--oc-lh-lg);
color: rgba(255,255,255,.95); margin: 0;
}
/* --------------------------------------------------------------------------
6. JUMP NAV
-------------------------------------------------------------------------- */
.oc-jump { border-bottom: 1px solid var(--oc-rule); background: #fff; position: sticky; top: 0; z-index: 20; }
.oc-jump__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; justify-content: center; }
.oc-jump__list li { font-size: 0; }
.oc-jump__link {
display: inline-block; padding: 1.125rem 1.25rem;
font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
color: var(--oc-ink); text-decoration: none; border-bottom: 3px solid transparent;
transition: color 200ms ease, border-color 200ms ease;
}
.oc-jump__link:hover, .oc-jump__link:focus { color: var(--oc-purple); border-bottom-color: var(--oc-yellow); text-decoration: none; }
.oc-jump__link--active { color: var(--oc-purple); border-bottom-color: var(--oc-purple); }
.oc-anchor { display: block; height: 0; scroll-margin-top: 5rem; }
@media (max-width: 48rem) {
.oc-jump__list { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
.oc-jump__list::-webkit-scrollbar { display: none; }
.oc-jump__link { white-space: nowrap; padding: .9rem 1rem; }
.oc-anchor { scroll-margin-top: 4rem; }
}
/* --------------------------------------------------------------------------
7. BRACKET TILES — #prestige-pane .tile, to measurement.
30x30 corner rules at 4px, 8px radius, purple top-left / yellow
bottom-right, on a transparent tile. Three-up here, not four: three
numbers is what the page actually has to say up front.
-------------------------------------------------------------------------- */
.oc-tiles {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none;
}
@media (max-width: 62rem) { .oc-tiles { grid-template-columns: 1fr; gap: 2rem; max-width: 32rem; margin: 0 auto; } }
.oc-tile { position: relative; padding: 2.5rem 1.5rem 1.75rem; border-radius: 8px; text-align: center; color: var(--oc-ink); }
.oc-tile::before, .oc-tile::after { content: ""; position: absolute; width: 30px; height: 30px; border: 4px solid transparent; }
.oc-tile::before {
top: 0; left: 0; border-right: 0; border-bottom: 0;
border-top-color: var(--oc-purple); border-left-color: var(--oc-purple);
border-top-left-radius: 8px;
}
.oc-tile::after {
bottom: 0; right: 0; border-left: 0; border-top: 0;
border-bottom-color: var(--oc-yellow); border-right-color: var(--oc-yellow);
border-bottom-right-radius: 8px;
}
.oc-tile__value {
display: block; font-family: var(--oc-sans); font-weight: 700;
font-size: var(--oc-fs-stat); line-height: var(--oc-lh-stat);
color: var(--oc-purple); margin-bottom: .75rem;
}
.oc-tile__label { font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); color: var(--oc-ink); margin: 0 auto; max-width: 20rem; }
/* --------------------------------------------------------------------------
8. THE ONE CHART LANGUAGE
Stacked for composition, single-series for participation. Same rail, same
radii, same label treatment, so the reader learns it once.
-------------------------------------------------------------------------- */
.oc-chart { margin: 0; }
.oc-chart__title { font-family: var(--oc-sans); font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); font-weight: 700; color: var(--oc-ink); margin: 0 0 .35rem; }
.oc-chart__sub { font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); color: var(--oc-ink-3); margin: 0 0 2rem; }
/* ---- legend ---- */
.oc-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.oc-legend li { display: flex; align-items: center; gap: .5rem; font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); font-weight: 600; color: var(--oc-ink-2); }
.oc-legend__swatch { width: .75rem; height: .75rem; border-radius: 2px; flex: 0 0 auto; }
/* ---- stacked composition bar ---- */
.oc-stack { list-style: none; margin: 0; padding: 0; }
.oc-stack__row + .oc-stack__row { margin-top: 1rem; }
.oc-stack__row--lead + .oc-stack__row { margin-top: 2.25rem; }
.oc-stack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap; }
@media (max-width: 34rem) { .oc-stack__head { display: block; } .oc-stack__meta { margin-top: .15rem; } }
.oc-stack__year { display: block; font-family: var(--oc-sans); font-weight: 700; font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--oc-ink-3); }
.oc-stack__row--lead .oc-stack__year { font-size: var(--oc-fs-sm); color: var(--oc-purple); }
.oc-stack__meta { display: block; font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); color: var(--oc-ink-3); }
.oc-stack__bar { display: flex; gap: 2px; height: 18px; }
.oc-stack__row--lead .oc-stack__bar { height: 36px; }
.oc-stack__seg {
position: relative; min-width: 2px;
display: flex; align-items: center; justify-content: center;
width: var(--w);
background: var(--seg);
transition: width 900ms var(--oc-ease), filter 200ms ease;
}
.oc-js .oc-stack__seg { width: 0; transition-delay: calc(var(--i) * 90ms); }
.oc-js .is-inview .oc-stack__seg { width: var(--w); }
.oc-stack__bar > .oc-stack__seg:first-child { border-radius: 3px 0 0 3px; }
.oc-stack__bar > .oc-stack__seg:last-child { border-radius: 0 3px 3px 0; }
.oc-stack__seg-label {
/* 1.25rem/700 puts this in WCAG's large-text band (>=18.66px bold), where
the threshold is 3:1. White on PMS 1665 measures 3.95:1 — it passes as
large text and fails as small, and at 36px bar height the larger label is
the better design anyway. */
font-family: var(--oc-sans); font-size: var(--oc-fs-md); font-weight: 700; color: #fff;
white-space: nowrap; opacity: 1; line-height: 1;
}
.oc-js .oc-stack__seg-label { opacity: 0; transition: opacity 300ms ease; transition-delay: calc(700ms + var(--i) * 90ms); }
.oc-js .is-inview .oc-stack__seg-label { opacity: 1; }
.oc-stack__row:not(.oc-stack__row--lead) .oc-stack__seg-label { display: none; }
.oc-stack__seg:hover { filter: brightness(1.08); }
/* ---- single-series participation bar ---- */
.oc-bars { list-style: none; margin: 0; padding: 0; }
.oc-bars__row { padding: 1.125rem 0; }
.oc-bars__row + .oc-bars__row { border-top: 1px solid var(--oc-hair); }
.oc-bars__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .625rem; }
.oc-bars__label { display: block; font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); font-weight: 600; color: var(--oc-ink); }
.oc-bars__value { display: block; font-family: var(--oc-sans); font-size: var(--oc-fs-md); line-height: var(--oc-lh-md); font-weight: 700; color: var(--oc-purple); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.oc-bars__rail { display: block; position: relative; height: 12px; background: var(--oc-gray-light); border-radius: 3px; overflow: hidden; }
.oc-bars__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--oc-data-1); border-radius: 3px; }
.oc-js .oc-bars__fill { width: 0; transition: width 900ms var(--oc-ease); transition-delay: calc(var(--i) * 110ms); }
.oc-js .is-inview .oc-bars__fill { width: var(--w); }
.oc-bars__sub { display: block; font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); color: var(--oc-ink-3); margin-top: .5rem; }
/* ---- four-year consistency strip ---- */
.oc-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--oc-rule); list-style: none; margin: 2.5rem 0 0; padding: 0; border-radius: 4px; overflow: hidden; }
@media (max-width: 34rem) { .oc-years { grid-template-columns: repeat(2, 1fr); } }
.oc-years__cell { background: #fff; padding: 1.25rem 1rem; text-align: center; }
.oc-years__value { display: block; font-family: var(--oc-sans); font-weight: 700; font-size: var(--oc-fs-xl); line-height: var(--oc-lh-xl); color: var(--oc-purple); margin-bottom: .35rem; }
.oc-years__label { display: block; font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--oc-ink-3); }
/* ---- data table ---- */
.oc-datatable { margin-top: 2rem; font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); }
.oc-datatable > summary {
cursor: pointer; list-style: none;
font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); font-weight: 700; letter-spacing: .11em;
text-transform: uppercase; color: var(--oc-purple); padding: .5rem 0;
}
.oc-datatable > summary::-webkit-details-marker { display: none; }
.oc-datatable > summary::before { content: "\002B\00a0\00a0"; font-weight: 700; }
.oc-datatable[open] > summary::before { content: "\2212\00a0\00a0"; }
/* Wide tables scroll horizontally on narrow screens. The wrapper is
focusable because a scrollable region must be reachable by keyboard. */
.oc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; }
.oc-tablewrap:focus-visible { outline: 3px solid var(--oc-orange); outline-offset: 2px; }
.oc-datatable table { width: 100%; min-width: 30rem; border-collapse: collapse; }
.oc-datatable caption { text-align: left; font-size: var(--oc-fs-sm); color: var(--oc-ink-3); padding-bottom: .75rem; }
.oc-datatable th, .oc-datatable td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--oc-hair); }
.oc-datatable thead th { font-size: var(--oc-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--oc-ink-3); }
.oc-datatable td + td, .oc-datatable th + th { text-align: right; }
/* ---- tooltip ---- */
.oc-tip {
position: fixed; z-index: 60; pointer-events: none;
background: var(--oc-ink); color: #fff;
font-family: var(--oc-sans); font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm);
padding: .5rem .7rem; max-width: 16rem; border-radius: 4px;
opacity: 0; transform: translate(-50%,-115%) scale(.96);
transition: opacity 120ms ease, transform 120ms ease;
}
.oc-tip.is-visible { opacity: 1; transform: translate(-50%,-125%) scale(1); }
.oc-tip__name { display: block; font-weight: 700; }
.oc-tip__value { display: block; color: var(--oc-yellow); font-weight: 700; }
/* --------------------------------------------------------------------------
9. ACCEPTANCE RATES — ten programmes, eight of them identical.
A grouped statement plus the two exceptions says it faster than ten bars.
-------------------------------------------------------------------------- */
.oc-rates { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
@media (max-width: 56rem) { .oc-rates { grid-template-columns: 1fr; gap: 2.5rem; } }
.oc-rates__hero { font-family: var(--oc-sans); font-weight: 700; font-size: var(--oc-fs-stat); line-height: var(--oc-lh-stat); color: var(--oc-purple); margin: 0 0 .5rem; }
.oc-rates__heroLabel { font-family: var(--oc-serif); font-size: var(--oc-fs-lg); line-height: var(--oc-lh-lg); color: var(--oc-ink); margin: 0 0 1.5rem; }
.oc-rates__list { list-style: none; margin: 0; padding: 0; columns: 2 11rem; column-gap: 2rem; }
.oc-rates__list li { font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); padding: .3rem 0 .3rem 1rem; position: relative; break-inside: avoid; }
.oc-rates__list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; background: var(--oc-yellow); border-radius: 1px; }
.oc-rates__rest { list-style: none; margin: 0; padding: 0; }
.oc-rates__rest li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--oc-hair); }
.oc-rates__rest li:first-child { border-top: 1px solid var(--oc-hair); }
.oc-rates__name { font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); color: var(--oc-ink); }
.oc-rates__pct { font-family: var(--oc-sans); font-weight: 700; font-size: var(--oc-fs-md); line-height: var(--oc-lh-md); color: var(--oc-purple); font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
10. SPLIT FEATURE — campaign "Securing our Future", to measurement.
Purple field with the dot pattern, circular image bleeding off the edge.
-------------------------------------------------------------------------- */
.oc-feature {
position: relative; overflow: hidden; color: #fff;
background-color: var(--oc-purple);
background-image: var(--oc-dots); background-size: 40px 40px;
padding: 5rem 2.5rem;
}
.oc-feature__grid { display: flex; align-items: center; gap: 4rem; max-width: 72rem; margin: 0 auto; position: relative; z-index: 1; }
.oc-feature__media { flex: 0 0 auto; width: 30rem; max-width: 42%; margin: -1rem 0 -5rem -1rem; }
.oc-feature__img {
display: block; width: 100%; height: auto; /* height:auto is load-bearing —
an img with a height attribute resolves height from it, which beats
aspect-ratio and stretches the circle into an ellipse. */
aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
background: var(--oc-purple-dark);
}
.oc-feature__body { flex: 1 1 auto; min-width: 0; }
.oc-feature__body p { color: rgba(255,255,255,.94); }
@media (max-width: 62rem) {
.oc-feature { padding: 3.5rem 1.5rem; }
.oc-feature__grid { flex-direction: column; gap: 2.5rem; }
.oc-feature__media { width: 17rem; max-width: 70%; margin: 0; }
}
/* ---- --wash: the homepage "Lead the Future of Healthcare" composition ----
Same split as above, but rebuilt to match the core .feature component:
the 230deg orange wash instead of the dot field, and a square-cornered
image instead of a circle. Measured off .feature__container on the live
homepage, so the two read as the same device.
WHY NOT JUST USE THE CORE .feature MARKUP: it clips its image with
clip-path:url(#ellipse), which needs an SVG present
in the document. That def comes from the homepage template, so a page that
lacks it gets undefined behaviour - Chrome ignores the reference, other
engines can drop the element entirely. Core also expects ~13KB of inline
ornament SVG, which is not something to hand-paste into a WYSIWYG. This
modifier gets the same look with no document-level dependencies.
Text stays left-aligned beside the image; .oc-grad centres its text, which
is right for a full-width band but wrong next to a picture. */
.oc-feature--wash {
background-image: var(--oc-grad);
background-size: auto;
}
.oc-feature--wash .oc-feature__img {
aspect-ratio: 3 / 2;
border-radius: 0;
}
.oc-feature--wash .oc-feature__media {
width: 34rem; max-width: 46%;
margin: 0; /* square image sits in the band, not bleeding */
}
.oc-feature--wash .oc-feature__grid { align-items: center; }
@media (max-width: 62rem) {
.oc-feature--wash .oc-feature__media { width: 100%; max-width: 30rem; }
}
/* --------------------------------------------------------------------------
11. GRADIENT BAND — the homepage wash, measured verbatim
-------------------------------------------------------------------------- */
.oc-grad {
position: relative; overflow: hidden; color: #fff; text-align: center;
background-color: var(--oc-purple);
background-image: var(--oc-grad);
padding: 5rem 1.5rem;
}
.oc-grad p { color: #fff; }
/* --------------------------------------------------------------------------
12. LISTS + PILLS
-------------------------------------------------------------------------- */
.oc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 3.5rem; }
.oc-list { list-style: none; margin: 0; padding: 0; }
.oc-list li { font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm); padding: .45rem 0 .45rem 1rem; position: relative; break-inside: avoid; }
.oc-list li::before { content: ""; position: absolute; left: 0; top: .82em; width: 5px; height: 5px; background: var(--oc-yellow); border-radius: 1px; }
.oc-list--2col { columns: 2 9rem; column-gap: 2rem; }
.oc-list__count { color: var(--oc-purple); font-weight: 700; white-space: nowrap; }
.oc-pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.oc-pills li {
font-size: var(--oc-fs-sm); font-weight: 600; line-height: var(--oc-lh-sm);
background: #fff; color: var(--oc-ink);
box-shadow: inset 0 0 0 1px var(--oc-rule); border-radius: 999px;
padding: .625rem 1rem;
}
.oc-feature .oc-pills li { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
/* --------------------------------------------------------------------------
13. CARDS — alumnae. Static, no carousel dependency.
-------------------------------------------------------------------------- */
.oc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 3rem; list-style: none; margin: 0; padding: 0; }
.oc-card { text-align: center; }
.oc-card__media { display: block; width: 11rem; height: 11rem; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--oc-gray-light) center/cover no-repeat; }
.oc-card__name { font-family: var(--oc-sans); font-size: var(--oc-fs-md); line-height: var(--oc-lh-md); font-weight: 700; color: var(--oc-purple); margin: 0 0 .25rem; }
.oc-card__meta { font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--oc-ink-3); margin: 0 0 1rem; }
.oc-card__quote { font-family: var(--oc-serif); font-size: var(--oc-fs-md); line-height: 1.35; color: var(--oc-ink); margin: 0 0 1rem; }
.oc-card__link { font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
/* --------------------------------------------------------------------------
14. FAQ — variant (module 12b only)
-------------------------------------------------------------------------- */
.oc-faq-alt { border-top: 1px solid var(--oc-rule); margin-top: 2.5rem; }
.oc-faq-alt__item { border-bottom: 1px solid var(--oc-rule); }
.oc-faq-alt__item > summary { cursor: pointer; list-style: none; padding: 1.125rem 3.5rem 1.125rem 0; position: relative; font-family: var(--oc-sans); font-weight: 700; font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); color: var(--oc-purple); }
.oc-faq-alt__item > summary::-webkit-details-marker { display: none; }
.oc-faq-alt__item > summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease; }
.oc-faq-alt__item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.oc-faq-alt__body { padding: 0 0 1.5rem; }
/* --------------------------------------------------------------------------
15. REDUCED MOTION · PRINT · FORCED COLORS
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.oc *, .oc *::before, .oc *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
.oc-js .oc-stack__seg { width: var(--w); }
.oc-js .oc-bars__fill { width: var(--w); }
.oc-js .oc-stack__seg-label { opacity: 1; }
}
@media print {
.oc-jump, .oc-magnolia { display: none; }
.oc-js .oc-stack__seg { width: var(--w); }
.oc-js .oc-bars__fill { width: var(--w); }
.oc-js .oc-stack__seg-label { opacity: 1; }
.accordion__content { display: block !important; }
.oc-datatable > summary { display: none; }
.oc-hero, .oc-grad, .oc-feature { min-height: auto; color: #000; background: none; }
.oc-hero::after { display: none; }
.oc-hero__title, .oc-hero__lede { color: #000; }
}
@media (forced-colors: active) {
.oc-stack__seg, .oc-bars__fill, .oc-legend__swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
.oc-tile { border: 1px solid CanvasText; }
}
/* --------------------------------------------------------------------------
v5 — COPY-NEEDED MARKER
Every string on this page is the client's own wording, taken verbatim from
their content document, EXCEPT what is wrapped in this marker. If you can
see a bracket, that text is ours and is waiting on them. Nothing here is
meant to survive to publication.
-------------------------------------------------------------------------- */
.oc-need {
display: inline-block;
font-family: var(--oc-sans);
font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm);
font-weight: 700; letter-spacing: .02em;
color: #8a5a00; background: #fff5d6;
border: 1px dashed #c8991f; border-radius: 2px;
padding: .15em .5em; margin: .1em 0;
text-transform: none;
}
.oc--plum .oc-need, .oc-grad .oc-need, .oc-feature .oc-need, .oc-hero .oc-need {
color: #3d2a00; background: #ffe9a8; border-color: #ffe9a8;
}
.oc-need--block { display: block; margin: 1rem auto; max-width: 40rem; text-align: center; }
/* --------------------------------------------------------------------------
v5 — PIE CHART (the client's content document specifies "[Pie chart]")
A pie is a weak form for 47 vs 41 — the two angles are nearly identical and
the eye cannot rank them. Since the directive is explicit, the mitigation is
to never make the reader judge an angle: every slice is direct-labelled with
the client's own "Employed: 47%" string, and the same three lines are
repeated as text beside the chart. The chart is decoration over a list that
already says everything.
Palette validated with the dataviz six-checks script: all pass, worst
adjacent pair deltaE 10.3 under deuteranopia.
-------------------------------------------------------------------------- */
.oc-pie__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 3.5rem; justify-content: center; }
.oc-pie { flex: 0 0 auto; width: 20rem; max-width: 100%; height: auto; display: block; }
/* NO transform here. A CSS transform-origin on an SVG element collides with
the element's own rotate() presentation attribute - the two resolve in
different coordinate systems and the slices rendered 347px outside the
viewBox, painting nothing. The start angle is baked into stroke-dashoffset
instead, so the slices carry no transform at all. */
.oc-js .oc-animate .oc-pie__slice { opacity: 0; transition: opacity .6s ease; }
.oc-js .oc-animate.is-inview .oc-pie__slice { opacity: 1; }
.oc-js .oc-animate.is-inview .oc-pie__slice:nth-child(2) { transition-delay: .12s; }
.oc-js .oc-animate.is-inview .oc-pie__slice:nth-child(3) { transition-delay: .24s; }
.oc-pie__key { flex: 1 1 18rem; max-width: 26rem; list-style: none; margin: 0; padding: 0; }
.oc-pie__key li {
display: flex; align-items: baseline; gap: .75rem;
font-size: var(--oc-fs-md); line-height: var(--oc-lh-md);
padding: .7rem 0; border-bottom: 1px solid var(--oc-hair);
}
.oc-pie__key li:first-child { border-top: 1px solid var(--oc-hair); }
.oc-pie__swatch { flex: 0 0 auto; width: .9rem; height: .9rem; border-radius: 2px; transform: translateY(.05em); }
.oc-pie__callout {
margin: 2.5rem auto 0; max-width: 46rem; text-align: center;
font-family: var(--oc-serif); font-size: var(--oc-fs-lg); line-height: var(--oc-lh-lg);
color: var(--oc-ink);
}
.oc--plum .oc-pie__callout, .oc-grad .oc-pie__callout { color: #fff; }
/* ---- verbatim figure lists (the prior class years) ---- */
.oc-figs { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.oc-figs__group { margin: 0; }
.oc-figs__head { font-family: var(--oc-sans); font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--oc-purple); margin: 0 0 1rem; }
.oc-figs__list { list-style: none; margin: 0; padding: 0; }
.oc-figs__list li { font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); padding: .5rem 0; border-bottom: 1px solid var(--oc-hair); }
.oc-figs__list li:first-child { border-top: 1px solid var(--oc-hair); }
/* ---- verbatim bar rows: the client's whole sentence is the label ---- */
.oc-vbar { list-style: none; margin: 2rem 0 0; padding: 0; }
.oc-vbar li { padding: 1.25rem 0; border-bottom: 1px solid var(--oc-hair); }
.oc-vbar li:first-child { border-top: 1px solid var(--oc-hair); }
.oc-vbar__label { display: block; font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); color: var(--oc-ink); margin-bottom: .6rem; }
.oc-vbar__rail { display: block; position: relative; height: 12px; background: var(--oc-hair); border-radius: 6px; overflow: hidden; }
.oc-vbar__fill { display: block; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--oc-data-1); border-radius: 6px; }
.oc-vbar li:nth-child(2) .oc-vbar__fill { background: var(--oc-data-2); }
.oc-js .oc-animate .oc-vbar__fill { width: 0; transition: width .9s cubic-bezier(.22,.61,.36,1); }
.oc-js .oc-animate.is-inview .oc-vbar__fill { width: var(--w); }
/* ==========================================================================
v6 — ALIGNMENT WITH CORE COMPONENTS
Everything below either reproduces a component that already exists on
agnesscott.edu, or extends one of ours to match how the site behaves.
Values are measured off the live stylesheet, not guessed.
========================================================================== */
/* ---- section nav, matching .secnav / .secnav--alt --------------------
The site's own in-page nav (Summit, Ring Leaders). We reuse the CORE class
names, so on the live site every rule below is already supplied by
styles.css and these are only the preview's stand-in plus two additions:
1. core hides .secnav__list below 64em and reveals it with the
.secnav__toggle button. That is core JS, and it works - but on a long
single page like this one the nav earns its place on mobile too, so
.oc-secnav shows it as a scrolling row instead.
2. an active state, which core has no equivalent for (its nav links to
other PAGES; ours links within one).
-------------------------------------------------------------------- */
.oc-secnav .secnav__list a { text-decoration: none; }
.oc-secnav .secnav__list a.is-current { color: var(--oc-purple); }
@media (max-width: 63.99em) {
.oc-secnav .secnav__toggle { display: none; }
.oc-secnav .secnav__list { display: block; }
.oc-secnav .secnav__list ul {
display: flex; flex-wrap: nowrap; overflow-x: auto;
margin: 1rem 0 0; scrollbar-width: none;
}
.oc-secnav .secnav__list ul::-webkit-scrollbar { display: none; }
.oc-secnav .secnav__list li {
flex: 0 0 auto; width: auto; margin: 0 1.5rem 0 0; padding: .5rem 0;
text-align: left; white-space: nowrap;
}
}
/* ---- long lists split into two columns -------------------------------
Twenty graduate institutions in one column makes the section twice as tall
as it needs to be. column-count keeps the client's order (reading down,
then across) and collapses to one column when there is no room. */
.oc-list--split { column-count: 2; column-gap: 2.5rem; }
.oc-list--split li { break-inside: avoid; }
@media (max-width: 40rem) { .oc-list--split { column-count: 1; } }
/* ---- figure stats, matching the site's stat treatment ----------------
The "Connecting You to Success" block on the Affordability page and
"The Agnes Advantage" on the homepage both set a large purple figure over
a small description. Same shape here.
The client writes each of these as one line - "Employed: 58%" - so the
figure and its label are split at THEIR OWN colon. No word is changed,
reordered or added. */
.oc-stat { margin: 0 0 1.75rem; }
.oc-stat:last-child { margin-bottom: 0; }
.oc-stat__value {
display: block; font-family: var(--oc-sans); font-weight: 700;
font-size: var(--oc-fs-stat); line-height: var(--oc-lh-stat);
color: var(--oc-purple); font-variant-numeric: tabular-nums;
}
.oc-stat__label {
display: block; font-size: var(--oc-fs-sm); line-height: var(--oc-lh-sm);
color: var(--oc-ink-2); margin-top: .35rem;
}
.oc-yearcol { padding-top: 1.5rem; border-top: 3px solid var(--oc-purple); }
.oc-yearcol > h3 {
font-family: var(--oc-sans); font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs);
font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
color: var(--oc-ink-3); margin: 0 0 1.5rem;
}
/* ---- horizontal rate bars -------------------------------------------
Ranked part-to-whole against a common 100% scale, so the two rates that
are NOT 100% are visible at a glance instead of buried in a list.
The client writes each as one line - "Chiropractic School – 100%" - and it
is split at THEIR OWN dash into a label and a value. Nothing is reworded.
Single series, so one hue: the dataviz rule is that colour should not
encode anything here, because nothing varies but length. */
.oc-rates2 { list-style: none; margin: 2rem 0 0; padding: 0; }
.oc-rates2 li { padding: .9rem 0; border-bottom: 1px solid var(--oc-hair); }
.oc-rates2 li:first-child { border-top: 1px solid var(--oc-hair); }
.oc-rates2__row { display: flex; align-items: baseline; gap: 1rem; }
.oc-rates2__name { flex: 1 1 auto; font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); color: var(--oc-ink); }
.oc-rates2__pct {
flex: 0 0 auto; font-family: var(--oc-sans); font-weight: 700;
font-size: var(--oc-fs-md); line-height: var(--oc-lh-md);
color: var(--oc-purple); font-variant-numeric: tabular-nums;
}
.oc-rates2__rail { display: block; position: relative; height: 10px; margin-top: .55rem; background: var(--oc-hair); border-radius: 5px; overflow: hidden; }
.oc-rates2__fill { display: block; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--oc-purple); border-radius: 5px; }
.oc-js .oc-animate .oc-rates2__fill { width: 0; transition: width .9s cubic-bezier(.22,.61,.36,1); }
.oc-js .oc-animate.is-inview .oc-rates2__fill { width: var(--w); }
/* ---- the pie sits in a card, like the site's boxed stat blocks ------- */
.oc-panel {
background: #fff; border: 1px solid var(--oc-rule);
padding: 3rem 2.5rem; margin: 0 auto; max-width: 60rem;
}
@media (max-width: 48rem) { .oc-panel { padding: 2rem 1.25rem; } }
.oc--tint .oc-panel { box-shadow: 0 0 1rem .5rem var(--oc-gray-light); }
/* ---- callout, matching the pulled-quote weight on the campaign page --- */
.oc-callout {
margin: 2.5rem auto 0; max-width: 46rem;
padding-left: 1.5rem; border-left: 4px solid var(--oc-yellow);
font-family: var(--oc-serif); font-size: var(--oc-fs-lg); line-height: var(--oc-lh-lg);
color: var(--oc-ink); text-align: left;
}
.oc--plum .oc-callout, .oc-grad .oc-callout, .oc-feature .oc-callout { color: #fff; }
/* ---- [Callout] built on the core .feature component ------------------
The client marks two moments [Callout]. Both are now the site's own
.feature band - the one behind "Lead the Future of Healthcare" and "Build
Your Advantage" - minus the image, which is how "You are Known Here" is
built on the homepage.
ONE OVERRIDE IS REQUIRED. .feature__interior is a flex row and
.feature__content is width:calc(50% - 1rem) at >=64em, sized to sit beside
.feature__media. Drop the image and the copy stays in the left half with
the right half empty. This gives the content the full band and centres it.
Everything else - the 230deg wash, the acanthus at 10% opacity, the serif
heading, the yellow span - is core, inherited from styles.css on the live
site.
-------------------------------------------------------------------- */
.oc-featcallout .feature__content {
width: 100%; max-width: 52rem; margin: 0 auto; text-align: center;
}
/* The client's sentence is the whole callout, so it carries heading weight
rather than sitting as body copy under a heading they did not write. It is
a , not an
- the section already has its heading, and a second h2
here would break the outline. */
.oc-featcallout .feature__heading { margin: 0; }
/* ==========================================================================
v7 — TABBED CLASS-YEAR STATS, OPENING STATEMENT, LIST REFINEMENT
========================================================================== */
/* ---- tabs: the core .tabs component, with two additions ---------------
Core supplies the whole look (grey toggle, purple active with yellow text,
panels hidden except after the active toggle) and core scripts.js binds the
clicks. Ours adds:
1. NO-JS SAFETY. Core hides every .tabs__content and reveals one with a
class its JavaScript sets. With JS off that would hide three of the four
class years - the client's data, invisible. So the default here is every
panel open, and the tab behaviour only switches on once .oc-js is
present. Nothing is ever hidden from a reader without JavaScript.
2. The toggles read as a segmented control rather than full-width bars,
which is what makes this compact enough to replace four sections.
-------------------------------------------------------------------- */
.oc-tabs .tabs { margin: 0; }
.oc-tabs .tabs__content { display: block; } /* no-JS default */
.oc-js .oc-tabs .tabs__content { display: none; }
.oc-js .oc-tabs .tabs__toggle--active + .tabs__content { display: block; }
.oc-tabs .tabs__toggle {
font-family: var(--oc-sans); font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs);
letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
padding: 1.1rem 1.25rem; text-align: center;
}
/* Without JS each panel needs its own label, since they are all open at once.
With JS the toggle above the panel is the label, so this is suppressed. */
.oc-tabs .tabs__content > .oc-tabs__caption { display: block; }
.oc-js .oc-tabs .tabs__content > .oc-tabs__caption { display: none; }
.oc-tabs__caption {
font-family: var(--oc-sans); font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs);
font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
color: var(--oc-purple); margin: 0 0 1.25rem;
}
.oc-tabs .tabs__content { margin-top: 2.5rem; }
/* ---- donut + legend --------------------------------------------------- */
.oc-donut__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 3.5rem; }
.oc-donut { flex: 0 0 auto; width: 17rem; max-width: 100%; height: auto; display: block; }
.oc-donut__label { font-family: var(--oc-sans); font-weight: 700; font-size: 7px; fill: #fff; }
.oc-js .oc-animate .oc-donut__slice, .oc-js .oc-animate .oc-donut__label { opacity: 0; transition: opacity .5s ease; }
.oc-js .oc-animate.is-inview .oc-donut__slice, .oc-js .oc-animate.is-inview .oc-donut__label { opacity: 1; }
.oc-key { flex: 1 1 20rem; list-style: none; margin: 0; padding: 0; }
.oc-key li {
display: flex; align-items: center; gap: 1rem;
padding: 1.1rem 0; border-bottom: 1px solid var(--oc-hair);
}
.oc-key li:first-child { border-top: 1px solid var(--oc-hair); }
.oc-key__swatch { flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 2px; }
.oc-key__name { flex: 1 1 auto; font-size: var(--oc-fs-base); line-height: var(--oc-lh-base); color: var(--oc-ink); }
.oc-key__value {
flex: 0 0 auto; font-family: var(--oc-sans); font-weight: 700;
font-size: var(--oc-fs-xl); line-height: 1; color: var(--oc-ink);
font-variant-numeric: tabular-nums;
}
/* ---- opening statement ------------------------------------------------
The centred treatment from the earlier preview: yellow rule, the first
sentence at lede weight, the rest smaller. NOTE the heading that sat above
this in that version - "Careers, built deliberately" - was OURS, not the
client's, so it is not here. The rule opens the section instead. */
.oc-statement { max-width: 52rem; margin: 0 auto; text-align: center; }
/* The yellow rule used to live here, from when this section had no heading.
The heading now carries it via .oc-rule - two would draw two lines. */
.oc-statement__lede {
font-family: var(--oc-serif); font-size: var(--oc-fs-lg); line-height: 1.35;
color: var(--oc-ink); margin: 0 0 1.25rem;
}
.oc-statement__body {
font-size: var(--oc-fs-base); line-height: var(--oc-lh-base);
color: var(--oc-ink-2); margin: 0;
}
/* ---- list columns: heading weight from the earlier preview ------------ */
.oc-cols > div > .oc-figs__head,
.oc-cols > div > .oc-h3.oc-figs__head {
font-family: var(--oc-sans); font-size: var(--oc-fs-base); line-height: var(--oc-lh-base);
font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--oc-purple); margin: 0 0 1.25rem;
}
/* Fellowship counts. The client writes "Fulbright Scholars- 46 students";
the line is split at THEIR OWN hyphen and the count is set in purple. No
punctuation is invented - the colour is the separator, which is why no
dash is added back in. */
.oc-count { font-weight: 700; color: var(--oc-purple); }
/* ---- callout bands, full width ---------------------------------------
The homepage's "You are Known Here" band runs edge to edge; the Summit
.feature sits inset behind the page gutters. These go full width.
THIS NEEDS THE BREAKOUT, not just a padding reset. Core .feature is
max-width:none but it still lives inside Cascade's .main__content, which
measures 800px on the live page - so removing its padding alone would only
widen it to 800px. The negative-margin bleed is what escapes the container,
the same technique .oc--bleed uses on the sections.
.feature__interior keeps its own max-width:80rem and gutters, so the
background runs edge to edge while the words stay in the page's measure -
which is exactly how the homepage band is built.
Specificity: .feature.oc-featcallout (0,2,0) beats core's .feature (0,1,0)
at every breakpoint, so no !important and no source-order dependency. */
.feature.oc-featcallout {
/* Flush, not floating. These bands sit between full-width tinted sections;
a vertical margin left a white stripe above and below each one. */
margin: 0 calc(50% - 50vw);
padding-left: 0; padding-right: 0;
width: auto; max-width: none;
overflow: hidden; /* the acanthus overhangs; clip it here
rather than let it push the page wide */
}
/* The acanthus can sit either side. Alternating gives the two bands some
rhythm; the leaf is mirrored so it still grows inward from the edge. */
.oc-featcallout--left .feature__bg__image {
right: auto; left: -3rem; transform: scaleX(-1);
}
/* ---- section nav, full width -----------------------------------------
The --alt variant sizes each item at calc(33% - 1.5rem), so five links
wrapped 3 + 2 inside the page gutters and read as cramped. Full-bleed
container, and the items share one row via flex:1 rather than a fixed
percentage - so it stays even whatever the link count becomes. */
.oc-secnav {
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
padding-left: 0; padding-right: 0;
}
.oc-secnav .secnav__container { max-width: 84rem; }
/* Core sets these labels at 1.0625rem bold, which suits its own short link
text ("Team of Advisors"). The client's section headings are long and in
caps, and three of five still wrapped to two lines at 1600px. Dropping to
the site's small uppercase nav step - the same .75rem used by breadcrumbs,
buttons and eyebrows - fits every label on one line and reads as in-page
navigation rather than a heading row. */
.oc-secnav .secnav__list {
font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs);
letter-spacing: .06em; text-transform: uppercase;
}
@media (min-width: 64em) {
.oc-secnav .secnav__list ul { margin: 0; flex-wrap: nowrap; gap: 1.5rem; }
.oc-secnav .secnav__list li {
flex: 1 1 0; width: auto; margin: 0; padding: 0 0 .75rem;
/* Equal-width items stretch to the tallest, so the dashed rules already
line up. Centring the label inside keeps a one-line item level with a
two-line one instead of hanging it from the top. */
display: flex; align-items: center; justify-content: center;
}
.oc-secnav .secnav__list a { display: block; padding: 0; }
}
/* ---- "Where Scotties go next" ----------------------------------------
Centred serif heading over a yellow rule, then the three lists.
NOTE: the heading itself is OUR copy, not the client's - see
PROVENANCE.md. Their own headings are the three column headings below it,
which are set from their document verbatim and only uppercased by CSS. */
.oc-rule { text-align: center; margin: 0 0 3rem; }
.oc-rule::after {
content: ""; display: block; width: 5rem; height: 4px;
background: var(--oc-yellow); margin: 1.25rem auto 0;
}
.oc-list--2col { column-count: 2; column-gap: 2.5rem; }
.oc-list--2col li { break-inside: avoid; }
@media (max-width: 40rem) { .oc-list--2col { column-count: 1; } }
.oc-list__count { font-weight: 700; color: var(--oc-purple); white-space: nowrap; }
/* ---- experiential tabs ------------------------------------------------
The client's combined figure for each year, then whatever rows they
actually reported. A year with one row shows one row - nothing is invented
to fill the space. */
.oc-callout--flush { margin: 0; max-width: none; }
/* Second series on the experiential bars, so the two measures read apart.
Same token the donut's third slice uses. */
.oc-bars__fill--3 { background: var(--oc-data-3); }
.oc-callout__value {
display: block; font-family: var(--oc-sans); font-size: var(--oc-fs-stat);
line-height: 1; font-weight: 700; color: var(--oc-purple);
font-variant-numeric: tabular-nums; margin-bottom: .5rem;
}
.oc-callout__text { margin: 0; }
.oc-bars__scale {
display: flex; justify-content: space-between;
font-size: var(--oc-fs-xs); color: var(--oc-ink-3); margin-top: .5rem;
border-top: 1px solid var(--oc-hair); padding-top: .5rem;
}
/* ---- STEM: two columns ------------------------------------------------ */
.oc-cols--2 { grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 56rem) { .oc-cols--2 { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.oc-collist { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.oc-collist li {
position: relative; padding: .625rem 0 .625rem 1.25rem;
border-bottom: 1px solid var(--oc-hair);
}
.oc-collist li::before {
content: ""; position: absolute; left: 0; top: 1.05rem;
width: 7px; height: 7px; background: var(--oc-yellow);
}
/* The chart title was removed from the rates panel, so the list is now the
first child - drop its leading margin rather than leaving a gap where a
heading used to be. */
.oc-panel > :first-child { margin-top: 0; }
/* Static-grid alternate to the alumnae carousel. Four across at desktop,
2x2 below - four profiles never strand an orphan on a row of their own. */
.oc-cards--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .oc-cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 34rem) { .oc-cards--4 { grid-template-columns: 1fr; } }
/* Disclosure table under the rates chart. */
.oc-datatable { margin-top: 1.5rem; font-size: var(--oc-fs-sm); }
.oc-datatable > summary {
cursor: pointer; list-style: none; font-size: var(--oc-fs-xs);
font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
color: var(--oc-purple); padding: .5rem 0;
}
.oc-datatable > summary::-webkit-details-marker { display: none; }
.oc-datatable > summary::before { content: "\002B\00a0\00a0"; font-weight: 700; }
.oc-datatable[open] > summary::before { content: "\2212\00a0\00a0"; }
.oc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: .5rem; }
.oc-tablewrap:focus-visible { outline: 3px solid var(--oc-orange); outline-offset: 2px; }
.oc-datatable table { width: 100%; border-collapse: collapse; }
.oc-datatable th, .oc-datatable td {
text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--oc-hair);
}
.oc-datatable thead th {
font-size: var(--oc-fs-xs); text-transform: uppercase;
letter-spacing: .08em; color: var(--oc-ink-3);
}
.oc-datatable td { text-align: right; font-variant-numeric: tabular-nums; }
/* ---- quiet band: full width, no wash ---------------------------------
Scotties Link sits directly under the 80% callout. Two purple gradients
back to back read as one long slab, so this one is light and the callout
above it lands. */
.oc-quiet { background: #fff; position: relative; overflow: hidden; }
.oc-magnolia--quiet { opacity: .05; color: var(--oc-purple); }
/* ---- final CTA -------------------------------------------------------
Rings drawn in CSS rather than loaded as an image - nothing to 404, and it
scales cleanly. Clipped by the section, anchored off the left edge. */
.oc-cta { position: relative; overflow: hidden; }
.oc-cta__rings {
position: absolute; left: -9rem; top: 50%; transform: translateY(-50%);
width: 30rem; height: 30rem; border-radius: 50%; pointer-events: none;
background:
radial-gradient(circle,
transparent 0 27%, rgba(255,255,255,.07) 27% 33%, transparent 33% 46%,
rgba(255,255,255,.05) 46% 49%, transparent 49% 66%,
rgba(255,255,255,.06) 66% 70%, transparent 70%);
}
@media (max-width: 60rem) { .oc-cta__rings { display: none; } }
.oc-cta .oc-inner { position: relative; }
.oc-cta__list {
list-style: none; margin: 3rem 0 0; padding: 0;
display: grid; grid-template-columns: 1fr; gap: 0;
border-top: 1px solid rgba(255,255,255,.25);
}
@media (min-width: 56rem) {
.oc-cta__list { grid-template-columns: repeat(4, 1fr); border-top: 0; }
.oc-cta__list li + li { border-left: 1px solid rgba(255,255,255,.25); }
}
.oc-cta__list li { border-bottom: 1px solid rgba(255,255,255,.25); }
@media (min-width: 56rem) { .oc-cta__list li { border-bottom: 0; } }
.oc-cta__list a {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1.25rem 1.5rem; color: #fff; text-decoration: none;
font-size: var(--oc-fs-xs); line-height: var(--oc-lh-xs);
font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.oc-cta__list a:hover, .oc-cta__list a:focus-visible { color: var(--oc-yellow); }
/* Arrow as generated content: decorative, never announced, and it keeps the
link's text node exactly the label so the provenance walker sees "Apply"
and not "Apply→". */
.oc-cta__list a::after { content: "\2192"; font-size: 1.125rem; line-height: 1; }
/* three-up profile grid */
.oc-cards--3 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .oc-cards--3 { grid-template-columns: repeat(3, 1fr); } }
/* ---- explicit heading colours ----------------------------------------
VERIFIED IN THE LIVE STYLESHEET. The rule that wins is
.container--component h1, .container--component h2, ... { color: purple }
specificity (0,1,1). A single class like .oc-hero__title is (0,1,0) and
LOSES to it - which is why the hero title kept rendering purple on purple
even after it was given an explicit white. Inheritance never entered into
it; the site rule matches the heading element directly.
So every heading colour here carries at least two classes, and the dark-band
overrides carry three so they cannot be beaten by the light-band rule at
equal specificity on source order alone. */
.oc .oc-display, .oc .oc-h2, .oc .oc-h3,
.oc .oc-chart__title, .oc .oc-figs__head, .oc .oc-card__name {
color: var(--oc-purple);
}
.oc.oc-hero .oc-hero__title,
.oc.oc--plum .oc-display, .oc.oc--plum .oc-h2, .oc.oc--plum .oc-h3,
.oc.oc-grad .oc-display, .oc.oc-grad .oc-h2, .oc.oc-grad .oc-h3,
.oc.oc-feature .oc-display, .oc.oc-feature .oc-h2, .oc.oc-feature .oc-h3,
.feature .feature__container .feature__heading {
color: #fff;
}
/* ---- portrait placeholder, in CSS not inline -------------------------
VERIFIED ON THE LIVE PAGE: Cascade strips an inline style attribute whose
value contains a data: URI - .oc-card__media arrived with no style attribute
at all, so the placeholders were invisible. Ordinary url() paths survive
(the hero background made it through intact), so this is specific to data:.
The placeholder therefore lives here, as a class. When the real portraits
arrive, put them on the element as an ordinary inline background-image with
a normal path - that is not stripped:
style="background-image:url('/assets/images/outcomes/alumna-1.jpg')" */
.oc-card__media {
background-color: #ded9e8;
background-image:
radial-gradient(circle at 50% 38%, #c3bcd4 0 22%, transparent 22%),
radial-gradient(circle at 50% 108%, #c3bcd4 0 42%, transparent 42%);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
/* ==========================================================================
TEMPLATE ADJUSTMENTS
Two things the Cascade template does that this page needs undone. Both are
scoped as tightly as the markup allows, and both are documented here rather
than left as inline styles on the page so they survive a re-paste.
========================================================================== */
/* The template always emits an empty hero block before the content container.
With no image and no heading it renders as a blank band that pushes the
page down. This page supplies its own hero (module 01), so the template's
is hidden.
NOTE: outcomes.css is linked only on this page, so hiding .hero here is
safe. If this stylesheet is ever loaded somewhere that DOES use the native
hero, scope this to the page instead - e.g. body.outcomes .hero. */
.hero { display: none; }
/* The content container carries a 6.25rem top margin, which on this page sits
between the site header and our own full-bleed hero as dead white space.
NOT :first-of-type - the template's empty .hero is also a div and precedes
it, so the container is the SECOND div among its siblings and that selector
never matched. Verified on the live page: this pair zeroes the first
container and leaves the second one on the page untouched. */
.hero + .container--component { margin-top: 0; }
.container--component:first-child { margin-top: 0; }