wrapper around each section. Don't remove the scope from these selectors:
several of them need the extra class to out-specify app.css (see the
specificity note in section 4).
Palette (all pulled from app.css, no new brand colors introduced):
#048194 Columbia teal ā .blue / .blue-bg in app.css
#036776 teal hover ā .admissions .button:hover in app.css
#E0F4F7 pale teal tint ā .college-101 .intro in app.css
Breakpoints match Foundation 5.5.0 (medium = 40.063em, large = 64.063em).
========================================================================== */
.center-for-student-success {
/* Custom properties are for authoring convenience only ā every value is
also written out longhand below so IE11/older Foundation builds still
render correctly. */
--css-teal: #048194;
--css-teal-dark: #036776;
--css-tint: #E0F4F7;
}
/* ----------------------------------------------------------------------------
1. PAGE HEADER ā breadcrumbs + H1 on the teal band
-------------------------------------------------------------------------- */
.center-for-student-success .css-masthead {
background-color: #048194;
background-color: var(--css-teal);
padding: 1.75em 0 2em;
color: #fff;
}
/* app.css sets .breadcrumbs links to #000; invert for the teal band.
The bottom padding is the gap between the trail and the H1 ā Foundation
gives the list no bottom margin, so without it the two sit flush. */
.center-for-student-success .css-masthead .breadcrumbs {
padding: 0 0 1rem;
margin: 0;
background: none;
border: none;
}
.center-for-student-success .css-masthead .breadcrumbs > * {
text-transform: uppercase;
font-size: .6875rem;
letter-spacing: .04em;
}
/* ALL crumbs stay white on the teal band ā including the current page.
The template renders the current crumb as a bare
with
no inside, so an anchor-only rule never reaches it and Foundation's
`.breadcrumbs > .current { color: #333 }` (0,2,0) wins by default. Listing
the itself at (0,3,0) is what actually overrides it. */
.center-for-student-success .css-masthead .breadcrumbs > *,
.center-for-student-success .css-masthead .breadcrumbs > * a,
.center-for-student-success .css-masthead .breadcrumbs > .current,
.center-for-student-success .css-masthead .breadcrumbs > .current a {
color: #fff;
}
.center-for-student-success .css-masthead .breadcrumbs > * a,
.center-for-student-success .css-masthead .breadcrumbs > .current {
font-weight: 700;
text-decoration: none;
}
.center-for-student-success .css-masthead .breadcrumbs > * a:hover,
.center-for-student-success .css-masthead .breadcrumbs > * a:focus {
color: #fff;
text-decoration: underline;
}
.center-for-student-success .css-masthead .breadcrumbs > :before {
color: rgba(255, 255, 255, .7);
margin: 0 .5rem;
}
/* Foundation still emits a ::before on the FIRST crumb ā `content: " "` with
no margin ā purely so the separator rule has something to reset. The margin
above would revive it as a 16px indent (8px each side of a blank space),
pushing the trail out of alignment with the H1. Kill it outright. */
.center-for-student-success .css-masthead .breadcrumbs > :first-child:before {
content: none;
margin: 0;
}
.center-for-student-success .css-masthead h1 {
color: #fff;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
/* ----------------------------------------------------------------------------
2. INTRO ā pale teal band
-------------------------------------------------------------------------- */
.center-for-student-success .css-intro {
background-color: #E0F4F7;
background-color: var(--css-tint);
padding: 2.5em 0 3em;
}
.center-for-student-success .css-intro h2 {
color: #048194;
color: var(--css-teal);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.3;
margin: 0 0 1rem;
}
.center-for-student-success .css-intro p {
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 1.15rem;
}
.center-for-student-success .css-intro p:last-child {
margin-bottom: 0;
}
/* ----------------------------------------------------------------------------
3. SERVICE CARDS
-------------------------------------------------------------------------- */
.center-for-student-success .css-services {
background-color: #fff;
padding: 3.5em 0 1em;
}
.center-for-student-success .css-card {
margin-bottom: 3em;
}
/* Fixed 16:9 media well keeps the two cards in a row aligned even when the
supplied photography has a different intrinsic ratio. */
.center-for-student-success .css-card-media {
display: block;
position: relative;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
background-color: #d8d8d8;
margin-bottom: 1.1rem;
}
.center-for-student-success .css-card-media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit: cover;"; /* object-fit polyfill hook */
}
/* font-style:normal undoes app.css's `article h3 { font-style:italic }`,
which our wrapper would otherwise inherit. */
.center-for-student-success .css-card-title {
font-size: 1.35rem;
font-style: normal;
font-weight: 700;
line-height: 1.3;
margin: 0 0 .65rem;
}
.center-for-student-success .css-card-title a {
color: #048194;
color: var(--css-teal);
text-decoration: underline;
}
.center-for-student-success .css-card-title a:hover,
.center-for-student-success .css-card-title a:focus {
color: #036776;
color: var(--css-teal-dark);
}
.center-for-student-success .css-card p {
font-size: 1.1rem;
line-height: 1.65;
margin-bottom: 1rem;
}
/* Bold, underlined resource links beneath the card copy. Deliberately not
app.css's .link-list ā that variant adds hairline rules and caret glyphs
the comp doesn't show. */
.center-for-student-success .css-link-list {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
}
.center-for-student-success .css-link-list li {
margin-bottom: .55rem;
}
.center-for-student-success .css-link-list li a {
display: inline-block;
color: #000;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
text-decoration: underline;
}
.center-for-student-success .css-link-list li a:hover,
.center-for-student-success .css-link-list li a:focus {
color: #048194;
color: var(--css-teal);
}
/* ----------------------------------------------------------------------------
4. CONTACT / APPOINTMENTS ā teal band
-------------------------------------------------------------------------- */
.center-for-student-success .css-contact {
background-color: #048194;
background-color: var(--css-teal);
color: #fff;
padding: 3em 0 3.5em;
}
/* Keyed to the CLASS, not the tag. The bottom-banner XSLT assigns heading
level by document nesting ā a column's first heading is an (peer of
the intro), a second heading in the same column is an . If this rule
targeted `h2` alone, the stylesheet would be dictating semantics, which is
what previously forced every authored heading to .
The `h2` selector is kept so any already-published markup still renders. */
.center-for-student-success .css-contact h2,
.center-for-student-success .css-contact .css-contact-title {
color: #fff;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
margin: 0 0 1rem;
}
/* A second heading within one column is a genuine sub-heading ā step it down
visually so level and appearance agree. */
.center-for-student-success .css-contact h3.css-contact-title {
font-size: 1.25rem;
margin-top: 1.75rem;
}
/* NOTE ON SPECIFICITY
app.css ships `.admissions p:not(.button:hover) { color:#1E1E1E }` ā the
:not() argument pushes that selector to (0,3,1), so a plain
`.css-contact p` (0,2,1) loses and the copy renders dark-on-teal.
Adding `.columns` matches its weight; being later in the cascade wins.
Same reason for the `a` rules below. */
.center-for-student-success .css-contact .columns p {
color: #fff;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.center-for-student-success .css-contact .columns a {
color: #fff;
text-decoration: none;
}
.center-for-student-success .css-contact .columns a:hover,
.center-for-student-success .css-contact .columns a:focus {
color: #fff;
text-decoration: underline;
}
.center-for-student-success .css-contact .columns a.css-contact-link {
text-decoration: underline;
}
/* ----------------------------------------------------------------------------
5. RESPONSIVE
-------------------------------------------------------------------------- */
/* Small only ā tighten the bands and let the cards run full width. */
@media only screen and (max-width: 40em) {
.center-for-student-success .css-masthead {
padding: 1.25em 0 1.5em;
}
.center-for-student-success .css-masthead h1 {
font-size: 1.75rem;
}
/* The comp drops the breadcrumb trail on mobile ā the sticky nav bar
already carries the section label. (The template also tags the list
`hide-for-small`; this is belt-and-braces.) */
.center-for-student-success .css-masthead .breadcrumbs {
display: none;
}
.center-for-student-success .css-intro {
padding: 1.75em 0 2em;
}
.center-for-student-success .css-intro h2 {
font-size: 1.5rem;
}
/* Body copy steps down ~10% on mobile rather than the flat .875rem it used
to collapse to, which was a ~30% drop against the current desktop sizes.
Intro and card copy are stepped separately so the intro stays the larger
of the two here, exactly as it does at desktop (1.25 / 1.15). */
.center-for-student-success .css-intro p {
font-size: 1.125rem;
}
/* Card copy, the resource links, and the contact band all share 1.15rem at
desktop, so they step down together here ā otherwise whichever one was
left behind would render larger than the copy around it. */
.center-for-student-success .css-card p,
.center-for-student-success .css-link-list li a,
.center-for-student-success .css-contact .columns p {
font-size: 1rem;
}
.center-for-student-success .css-services {
padding: 2em 0 .5em;
}
.center-for-student-success .css-card {
margin-bottom: 2.25em;
}
.center-for-student-success .css-contact {
padding: 2em 0 2.5em;
}
.center-for-student-success .css-contact .columns + .columns {
margin-top: 1.75em;
}
}
/* Medium and up ā restore the comp's headline scale.
NOTE: .css-intro h2 now matches its base value (1.75rem), so this rule is
currently a no-op. Kept as the explicit medium-and-up anchor ā if the base
or small-only size changes again, this is where the desktop size belongs. */
@media only screen and (min-width: 40.063em) {
.center-for-student-success .css-masthead h1 {
font-size: 2.125rem;
}
.center-for-student-success .css-intro h2 {
font-size: 1.75rem;
}
}
/* Large and up ā the comp's content column is a little narrower than
Foundation's default 75rem row. */
@media only screen and (min-width: 64.063em) {
.center-for-student-success .css-masthead .row,
.center-for-student-success .css-intro .row,
.center-for-student-success .css-services .row,
.center-for-student-success .css-contact .row {
max-width: 62.5rem;
}
}
/* ----------------------------------------------------------------------------
6. PRINT
-------------------------------------------------------------------------- */
@media print {
.center-for-student-success .css-masthead,
.center-for-student-success .css-contact {
background-color: transparent !important;
color: #000;
}
.center-for-student-success .css-masthead h1,
.center-for-student-success .css-masthead .breadcrumbs > *,
.center-for-student-success .css-masthead .breadcrumbs > * a,
.center-for-student-success .css-masthead .breadcrumbs > .current,
.center-for-student-success .css-contact h2,
.center-for-student-success .css-contact .css-contact-title,
.center-for-student-success .css-contact .columns p,
.center-for-student-success .css-contact .columns a {
color: #000;
}
}