/* trailheadfp.com — the whole of the site's CSS.
*
* Replaces publicstyle.css and responsive.css (the CMS's own, kept for their
* palette and nothing else), mbcsmbmcp.css (the "Easy Button & Menu Maker"
* widget, which shipped HamburgerEnabled:false and therefore no mobile menu
* at all), layerslider.css + its fullwidth skin, feature.presenter,
* instalink, html5lightbox, Window.Metro.css and Telerik's WebResource.axd
* stylesheets.
*
* The CMS had NO on any page: phones were 302'd to a
* separate site under /mobile/. That site is gone; this stylesheet is what
* replaces it.
*
* Layout is grid/flex on real elements. The six-row
* shell, the .contentTable inside every row and the
wrappers are
* gone.
*/
/* ----------------------------------------------------------------- tokens */
:root {
/* read off the live pages, not chosen: the masthead and every heading are
#2A6786, the bands #EDEDED, the footer #6F6F6F */
--brand: #2a6786;
--brand-deep: #1d4a61;
--brand-tint: #e7eff3;
--ink: #1a1a1a;
--muted: #55565a;
/* The CMS's grey. It is the footer's BACKGROUND, where it is fixed, and
it was also its heading colour - where it is not safe: #6F6F6F on the
#EDEDED band is 4.25:1, which passes for a 40px heading and fails for
the 18.4px one the home page's feature cards come down to on a phone.
Two tokens, because one of them can move and the other cannot. #666 is
4.86:1 on the band and 5.74:1 on white, and is four shades from what the
CMS chose. Solved, not nudged. */
--grey: #6f6f6f; /* the footer band - do not darken, it is a surface */
--grey-text: #666666; /* every grey heading */
--band: #ededed;
--bg: #ffffff;
--line: #d8d8d8;
--shell: 1220px;
--radius: 10px;
/* named, because the welcome portrait has to cancel exactly this much to
sit flush on the band below it */
--section-pad: clamp(2.4rem, 1.6rem + 2.6vw, 4.2rem);
/* the masthead's measured height; the script keeps it true. This is the
value the drawer uses before the script has run. */
--head: 137px;
/* The width at which the bar becomes a drawer. A media query cannot read a
custom property, so the number below is repeated in the @media rule near
the foot of this file and the two MUST be changed together;
harness/drawer.js asserts that they agree, because a harness carrying its
own stale copy of a breakpoint reports its own drift as a site bug.
Derived from a measurement, not chosen: the CMS's logo renders 315px and
its six-item bar 793px, and at the sizes set here the bar needs 1004px
beside a 260px logo. */
--nav-break: 1079.98px;
--sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--display: "Barlow", "Open Sans", "Segoe UI", Arial, sans-serif;
/* The live site loads TWO Barlow faces, 300 and 400, via
`css?family=Barlow` and `css?family=Barlow:300`. Measured on it:
"LET'S GO TOGETHER" at 85px comes out 756px wide at 400, 500, 600 AND
700 - every weight above 400 resolves to the same face - and 829px at
300. So every heading and the hero slogan on the current site are Barlow
REGULAR, and a build that loads a real 700 renders them visibly heavier.
Declared explicitly rather than left to fall back, because whether a
browser synthesises bold from a 400 face is not something to leave to
the browser.
Set to 600 at the client's request: a real Barlow SemiBold, which is
heavier than the current site renders and lighter than the 700 this
build started with. The face is loaded, so nothing here is synthesised -
change this number and the Google Fonts URL in build.py together, or the
browser silently falls back to whichever weight IS loaded. */
--display-weight: 600;
}
/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* clipped on BOTH, or the root still scrolls sideways */
html, body { overflow-x: clip; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 18px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
h1, h2, h3, h4 {
font-family: var(--display); font-weight: var(--display-weight);
line-height: 1.12; margin: 0 0 .5em; color: var(--brand);
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.2rem); color: var(--grey-text); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); color: var(--grey-text); }
p { margin: 0 0 1.1em; }
address { font-style: normal; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
:focus-visible { outline: 3px solid #b23f00; outline-offset: 2px; }
::selection { background: var(--brand); color: #fff; }
.shell {
width: 100%; max-width: var(--shell); margin-inline: auto;
padding-inline: clamp(18px, 4vw, 34px);
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
position: absolute; left: 10px; top: -70px; z-index: 300;
background: #fff; color: var(--brand); padding: 12px 18px;
border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
text-decoration: none; font-weight: 700; transition: top .15s;
}
.skip:focus { top: 10px; }
/* The CMS's animated blue rule. It was a `width:1px` div growing to 300px
over three seconds on every page load, which meant the heading it belongs
to sat over a moving line for three seconds. Same mark, drawn once. */
.rule { width: 190px; height: 5px; background: var(--brand); margin: 0 0 1.1rem; border: 0; }
.rule-centre { margin-inline: auto; }
/* -------------------------------------------------------- Font Awesome */
/* The client's Pro kit is a JS kit with `asyncLoading` on: it rewrites each
into an