/* ==========================================================================
Sara Krieger — sara-krieger.com
Static HTML/CSS rebuild (no WordPress)
NOTE ON INLINE STYLES: there are none, anywhere in the HTML. Every
background image lives in the "Image bindings" block near the bottom of this
file. That is what lets the Content-Security-Policy in .htaccess run without
`unsafe-inline` on style-src. If you add a new photo, add a class here —
do not put style="..." on the element.
========================================================================== */
/* ---------- Design tokens ---------- */
:root {
--navy: #0f1626;
--navy-deep: #20335a;
--ink: #333333;
--body: #666666;
--rule: rgba(0, 0, 0, .10);
--tint: #f7f7f7;
--tint-2: rgba(0, 0, 0, .03);
--dark: #1f1f1f;
--accent: #b08d57;
--link: #2ea3f2;
--ok: #1d7a4c;
--err: #b3261e;
--font-script: "Cookie", cursive;
--font-head: "Philosopher", Helvetica, Arial, sans-serif;
--font-serif: "Abhaya Libre", Georgia, "Times New Roman", serif;
--font-ui: "Open Sans", Arial, sans-serif;
--wrap: 1180px;
--header-h: 84px;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
margin: 0;
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.7;
color: var(--body);
background: #fff;
-webkit-font-smoothing: antialiased;
/* clip, not hidden: overflow-x hidden turns into a scroll container
in Chrome, which silently breaks scroll-padding for anchor links (audit
finding on staging). clip clips without creating a scroller; the hidden
line first is the fallback for older engines. */
overflow-x: hidden;
overflow-x: clip;
scroll-padding-top: var(--header-h);
}
img { max-width: 100%; display: block; border: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, h5 {
font-family: var(--font-head);
color: var(--ink);
font-weight: 500;
margin: 0 0 .5em;
line-height: 1.25;
}
h2 { font-size: 40px; }
h3 { font-size: 26px; }
h4 { font-size: 22px; }
.wrap { width: 90%; max-width: var(--wrap); margin: 0 auto; }
.center { text-align: center; }
.serif { font-family: var(--font-serif); font-size: 19px; line-height: 1.75; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: #fff; color: var(--ink); padding: 12px 20px;
font-family: var(--font-ui); font-size: 15px;
}
.skip-link:focus { left: 12px; top: 12px; }
/* small spacing utilities (so no element needs a style attribute) */
.mt-s { margin-top: 18px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: 44px; }
.mb-xs { margin-bottom: 6px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
font-family: var(--font-ui);
font-size: 15px;
letter-spacing: .04em;
padding: 14px 30px;
border: 2px solid var(--ink);
border-radius: 3px;
color: var(--ink);
background: transparent;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--ink); color: #fff; text-decoration: none; }
.btn--solid { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn--solid:hover { background: #16243f; border-color: #16243f; color: #fff; }
.btn--light { border-color: #fff; color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 200;
height: var(--header-h);
display: flex;
align-items: center;
background: transparent;
transition: background .3s, height .3s, box-shadow .3s;
}
.site-header.is-solid,
.site-header.is-opaque {
background: var(--navy);
height: 62px;
box-shadow: 0 1px 12px rgba(0, 0, 0, .28);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand {
font-family: var(--font-script);
font-size: 44px;
line-height: 1;
color: #fff;
opacity: 0;
transform: translateY(-4px);
transition: opacity .3s, transform .3s;
pointer-events: none;
white-space: nowrap;
}
.site-header.is-solid .brand,
.site-header.is-opaque .brand { opacity: 1; transform: none; pointer-events: auto; }
.brand:hover { text-decoration: none; }
.nav-toggle {
display: none;
background: none;
border: 0;
width: 44px; height: 44px;
cursor: pointer;
padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav a {
font-family: var(--font-head);
font-weight: 700;
font-size: 20px;
color: #f5f5f5;
letter-spacing: .01em;
}
.nav a:hover, .nav a.is-active { color: var(--accent); text-decoration: none; }
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: #6d6a64 center / cover no-repeat;
color: #fff;
}
.hero--short { min-height: 74vh; }
.hero__inner { position: relative; z-index: 2; width: 90%; max-width: var(--wrap); margin: 0 auto; padding: 120px 0 60px; }
.hero__inner--right { text-align: right; }
.hero__col--right { max-width: 560px; margin-left: auto; }
.hero__name {
font-family: var(--font-script);
font-weight: 400;
font-size: clamp(64px, 9vw, 100px);
line-height: 1;
color: #fff;
margin: 0 0 4px;
text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero__tag {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(22px, 2.4vw, 32px);
color: #fff;
margin: 0;
text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}
.hero__tag span { white-space: nowrap; }
.hero__badge { position: absolute; right: 24px; bottom: 24px; width: 62px; opacity: .95; }
.hero__title {
font-family: var(--font-head);
font-size: clamp(44px, 6vw, 68px);
color: #fff;
margin: 0 0 18px;
text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.hero__lede {
font-family: var(--font-serif);
font-size: 21px;
line-height: 1.7;
color: #fff;
text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.05)); }
.hero__scrim--right { background: linear-gradient(270deg, rgba(0,0,0,.5), rgba(0,0,0,.05)); }
/* ==========================================================================
Sections
========================================================================== */
.section { padding: 92px 0; }
.section--tint { background: var(--tint-2); }
.section--wash { background: var(--tint); }
.section--dark { background: var(--dark); color: #cfcfcf; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section__title { font-size: clamp(34px, 4vw, 44px); margin-bottom: 34px; }
.h-equip { font-size: 35px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
/* ---------- About ---------- */
.about__body p { font-family: var(--font-serif); font-size: 21px; line-height: 1.85; color: #555; margin: 0 0 1.2em; }
.quote-card {
position: relative;
background: rgba(0, 0, 0, .045);
padding: 40px 34px 30px;
margin: 34px 0 0;
}
.quote-card::before {
content: "”";
position: absolute;
top: -26px; left: 50%;
transform: translateX(-50%);
width: 46px; height: 46px;
display: grid; place-items: center;
border: 2px solid #9aa2b1;
border-radius: 50%;
color: #6b7382;
font: 700 30px/1 Georgia, serif;
background: #fff;
padding-top: 12px;
}
.quote-card p {
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.6;
color: #555;
margin: 0 0 1em;
}
.quote-card cite { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: #777; }
/* height:auto is load-bearing: the ![]()
carries width/height attributes, and
without it the height attribute survives as a presentational hint and
stretches the portrait to its full 2560px. */
.about__media img { width: 100%; height: auto; display: block; }
.socials { display: flex; gap: 14px; justify-content: center; margin-top: 34px; }
.socials a {
width: 54px; height: 54px;
border-radius: 50%;
background: var(--navy-deep);
display: grid; place-items: center;
color: #fff;
}
.socials a:hover { background: var(--navy); text-decoration: none; }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
/* ---------- Equipment ---------- */
.equip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; text-align: center; margin-top: 46px; }
.equip__icon { height: 78px; display: grid; place-items: center; margin-bottom: 18px; }
.equip__icon img { max-height: 78px; width: auto; }
.equip h3 { font-size: 23px; margin-bottom: .3em; }
.equip p { margin: 0; font-size: 16px; line-height: 1.5; }
.equip strong { color: var(--ink); }
/* ---------- Reels ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.split__media { background: #111 center / cover no-repeat; min-height: 380px; }
.split__panel { background: var(--dark); color: #ddd; display: flex; align-items: center; }
.split__panel-inner { padding: 76px 8% 76px 6%; width: 100%; }
.split__panel h2 { color: #fff; font-weight: 600; }
.rule { width: 56px; height: 3px; background: #6f6f6f; margin: 0 0 34px; }
.reel { margin-bottom: 26px; }
.reel__label { font-family: var(--font-ui); font-size: 15px; color: #eaeaea; margin-bottom: 8px; }
audio { width: 100%; height: 40px; }
/* ---------- Network ---------- */
.network { position: relative; background: #6d6a64 center / cover no-repeat; padding: 90px 0; }
.network__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.network__col { display: flex; flex-direction: column; justify-content: center; }
.network h2 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.spots { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.spot { background: #000; margin: 0; }
.spot video { width: 100%; display: block; background: #000; }
.spot figcaption {
font-family: var(--font-ui);
font-size: 13px;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
background: rgba(0, 0, 0, .55);
padding: 8px 10px;
}
/* ==========================================================================
Clients grid
Matches production: five square light-grey tiles per row in the content
column, logo centred in each, 15px gaps. (An auto-scrolling marquee shipped
here briefly; it was built against a mis-rendered crawl of the live site
and is retired — the grid is what production actually shows.)
========================================================================== */
.clients { padding: 84px 0 96px; }
.clients-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px 15px;
margin-top: 34px;
}
.clients-grid figure {
margin: 0;
aspect-ratio: 1 / 1;
background: #ededed;
display: grid;
place-items: center;
padding: 20px;
}
.clients-grid img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* ---------- Looking Back slider ---------- */
.lookback { position: relative; background: #6d6a64 center / cover no-repeat; padding: 90px 0; }
.lookback__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.lookback h2 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.slider { background: rgba(255, 255, 255, .92); padding: 18px; }
.slide { display: none; }
.slide.is-active { display: block; }
.slide video, .slide iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; background: #000; }
.slide__caption { font-family: var(--font-ui); font-size: 14px; color: #333; padding: 10px 2px 0; text-align: center; }
/* Controls styled after production: Previous / Next links above a
"Click to Navigate" caption strip. */
.slider__nav {
display: flex; align-items: center; justify-content: center; gap: 22px;
padding: 8px 4px 0;
}
.slider__nav button {
background: none; border: 0; color: var(--link); font-family: var(--font-ui);
font-size: 16px; line-height: 1.5; cursor: pointer; padding: 0;
text-decoration: underline; text-underline-offset: 2px;
}
.slider__nav button:hover { color: var(--navy-deep); }
.slider__caption {
display: block; text-align: center; margin-top: 10px; padding: 9px 12px;
background: rgba(0, 0, 0, .45); color: #fff;
font-family: var(--font-ui); font-size: 17px; letter-spacing: .02em;
}
.legal { color: rgba(255, 255, 255, .92); font-size: 14px; line-height: 1.6; margin-top: 26px; max-width: 560px; }
/* ---------- Coaching teaser ---------- */
.teaser { text-align: center; padding: 92px 0; background: var(--tint); }
.teaser p { font-family: var(--font-serif); font-size: 22px; max-width: 780px; margin: 0 auto 32px; color: #555; }
/* ==========================================================================
Contact
========================================================================== */
.contact { position: relative; background: #4a4a4a center / cover no-repeat; padding: 90px 0; }
.contact__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); }
.contact__card { position: relative; z-index: 2; background: #fff; padding: 54px 5% 60px; }
.contact__name { font-family: var(--font-script); font-size: 70px; line-height: 1; color: var(--ink); text-align: center; margin: 0 0 18px; }
.contact__meta { text-align: center; font-family: var(--font-ui); font-size: 15px; letter-spacing: .06em; color: #444; margin-bottom: 46px; }
.contact__meta strong { display: block; font-weight: 700; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; }
.rep h3 { font-size: 34px; text-align: center; margin-bottom: 26px; }
.rep img { width: 320px; max-width: 100%; margin: 0 auto 22px; }
.rep p { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: #555; margin: 0 0 1.1em; }
.rep h4 { font-family: var(--font-serif); font-size: 20px; color: var(--ink); margin: 1.4em 0 .3em; }
.form-intro { text-align: center; font-family: var(--font-head); font-size: 22px; color: var(--ink); margin-bottom: 24px; line-height: 1.4; }
.form-intro a { color: var(--ink); }
form.ck { display: grid; gap: 14px; }
form.ck.form--narrow { max-width: 420px; margin: 0 auto; text-align: left; }
form.ck label { font-family: var(--font-ui); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #777; display: block; margin-bottom: 5px; }
form.ck input, form.ck textarea, form.ck select {
width: 100%;
font-family: var(--font-ui);
font-size: 15px;
color: #333;
padding: 12px 14px;
border: 1px solid #d6d6d6;
border-radius: 3px;
background: #fbfbfb;
}
form.ck textarea { min-height: 130px; resize: vertical; }
form.ck input:invalid:not(:placeholder-shown) { border-color: var(--err); }
.form-note { font-size: 13px; color: #888; line-height: 1.5; margin: 0; }
.form-note.is-ok { color: var(--ok); }
.form-note.is-err { color: var(--err); }
/* honeypot — hidden from people, visible to naive bots */
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px; overflow: hidden;
}
/* ==========================================================================
Coaching page
========================================================================== */
.pullquote { text-align: center; max-width: 860px; margin: 0 auto; }
.pullquote p { font-family: var(--font-serif); font-style: italic; font-size: 28px; line-height: 1.5; color: #444; margin: 0 0 .6em; }
.pullquote cite { font-family: var(--font-head); font-style: normal; font-size: 18px; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; margin-top: 50px; }
.card { text-align: center; }
.card__icon { height: 92px; display: grid; place-items: center; margin-bottom: 20px; }
.card__icon img { max-height: 92px; width: auto; }
.card h3 { font-size: 27px; }
.card p { font-size: 16.5px; line-height: 1.75; }
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 46px; }
.testimonial { background: #fff; border: 1px solid var(--rule); padding: 34px 30px; display: flex; flex-direction: column; margin: 0; }
.testimonial p { font-family: var(--font-serif); font-size: 18px; line-height: 1.7; color: #555; flex: 1; margin: 0 0 22px; }
.testimonial__by { display: flex; align-items: center; gap: 14px; }
.testimonial__avatar { width: 58px; height: 58px; border-radius: 50%; background: #ddd center / cover no-repeat; flex: none; }
.testimonial__by strong { display: block; font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.testimonial__by span { font-size: 13.5px; color: #8a8a8a; line-height: 1.35; display: block; }
.classbox { max-width: 720px; margin: 40px auto 0; border: 1px solid var(--rule); padding: 34px; text-align: center; background: #fff; }
.classbox h3 { margin-bottom: .2em; }
.classbox .price { font-family: var(--font-head); font-size: 26px; color: var(--accent); margin: 6px 0; }
.faq { max-width: 900px; margin: 40px auto 0; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
font-family: var(--font-head);
font-size: 21px;
color: var(--ink);
padding: 20px 40px 20px 0;
cursor: pointer;
position: relative;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-size: 26px; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq p { font-family: var(--font-serif); font-size: 18px; line-height: 1.75; margin: 0 0 22px; color: #555; }
.postcard { border: 1px solid var(--rule); background: #fff; padding: 30px; }
.postcard h3 { font-size: 24px; margin-bottom: .3em; }
.postcard .meta { font-size: 13.5px; color: #999; margin-bottom: 12px; }
.postcard p { font-size: 16.5px; }
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 34px; }
/* Full posts (Vocal Points page): one readable column, not the teaser grid. */
.posts--full { grid-template-columns: 1fr; max-width: 860px; margin-left: auto; margin-right: auto; }
.posts--full .postcard { padding: 40px 42px; }
.posts--full .postcard h3 { font-size: 30px; }
.posts--full .postcard h4 { font-size: 21px; margin: 1.4em 0 .4em; }
.posts--full .postcard p, .posts--full .postcard li { font-family: var(--font-serif); font-size: 18.5px; line-height: 1.75; color: #555; }
/* ---------- Vocal Points call-to-action (Coaching page) ---------- */
/* The live site runs this as a full-bleed photo band: the heading stays up on
the tint, then the studio shot spans edge to edge with the card's chrome
dropped and its type reversed out to white. The card stays centred on
.posts--full, as it is everywhere else in the build.
Kept above the photography block on purpose: `background` shorthand here
would blank the image, so .bg--vocalpoints has to be the later rule. */
.vpcta { padding-bottom: 0; }
.vpcta__band {
position: relative;
padding: 78px 0 86px;
background: #111 center / cover no-repeat;
}
/* Scrim. The studio shot is dark but uneven, and the excerpt has to stay
legible wherever `cover` lands the crop. */
.vpcta__band::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .5);
}
.vpcta__band > .wrap { position: relative; z-index: 1; }
.vpcta__band .postcard {
background: transparent;
border: 0;
padding: 0;
text-align: center;
}
.vpcta__band .postcard h3 { font-size: 32px; margin-bottom: .5em; }
.vpcta__band .postcard h3 a { color: #fff; }
.vpcta__band .postcard h3 a:hover { color: #fff; text-decoration: underline; }
/* Beats `.posts--full .postcard p` (same weight, and that rule paints #555). */
.vpcta__band .posts--full .postcard p { color: #f2f2f2; }
.vpcta__band .postcard .btn { margin-top: 14px; }
.posts--full .postcard ul { padding-left: 24px; margin: 0 0 1.2em; }
.posts--full .postcard .meta { margin-bottom: 20px; }
.postcard:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176, 141, 87, .25); }
.postcard h3 a { color: var(--ink); }
.postcard h3 a:hover { color: var(--accent); text-decoration: none; }
/* Post pages (vocal-points/) */
.post-category {
font-family: var(--font-ui);
font-size: 14px;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
opacity: .85;
margin: 0 0 10px;
text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.post-page .meta { font-size: 15px; margin-bottom: 24px; }
.post-page hr { border: 0; border-top: 1px solid var(--rule); margin: 34px 0; }
.accent { color: var(--accent); }
/* ==========================================================================
Music page
========================================================================== */
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 46px; }
.track { text-align: center; }
.track img { width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); margin-bottom: 20px; }
.track h3 { font-size: 24px; margin-bottom: .1em; }
.track .by { font-family: var(--font-serif); font-style: italic; color: #888; margin-bottom: 14px; }
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.videos iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 46px; }
.review { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--rule); padding: 30px; margin: 0; }
.review__logo { width: 92px; height: 92px; flex: none; background: #fff center / contain no-repeat; border: 1px solid var(--rule); }
.review p { font-family: var(--font-serif); font-size: 18.5px; line-height: 1.7; color: #555; margin: 0 0 14px; }
.review cite { font-family: var(--font-head); font-style: normal; font-size: 16px; color: var(--ink); }
.review cite span { display: block; font-family: var(--font-ui); font-size: 13px; color: #999; }
/* ==========================================================================
Footer — replicates production: one slim navy bar, copyright line and the
photographer credit, nothing else.
========================================================================== */
.site-footer {
background: var(--navy);
color: #cfd4dd;
padding: 26px 0;
font-size: 13.5px;
font-weight: 600;
line-height: 1.85;
}
.site-footer a { color: #dfe4ec; }
/* ==========================================================================
Error page
========================================================================== */
.errpage { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 140px 0 90px; }
.errpage h1 { font-family: var(--font-script); font-size: 92px; color: var(--ink); margin: 0; line-height: 1; }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1080px) {
.equip { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
.cards, .testimonials, .tracks { grid-template-columns: 1fr 1fr; }
.clients-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
:root { --header-h: 66px; }
.nav-toggle { display: block; }
.nav {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--navy);
max-height: 0; overflow: hidden;
transition: max-height .3s ease;
}
.nav.is-open { max-height: 420px; }
.nav ul { flex-direction: column; gap: 0; padding: 10px 0; }
.nav li { border-top: 1px solid rgba(255, 255, 255, .08); }
.nav li:first-child { border-top: 0; }
.nav a { display: block; padding: 14px 5%; font-size: 18px; }
.site-header { background: var(--navy); height: var(--header-h); }
.site-header .brand { opacity: 1; transform: none; pointer-events: auto; font-size: 36px; }
.grid2, .split, .network__grid, .lookback__grid, .contact__grid,
.spots, .videos, .reviews, .posts, .site-footer__grid { grid-template-columns: 1fr; }
.split__media { min-height: 300px; }
.split__panel-inner { padding: 60px 6%; }
.section { padding: 66px 0; }
.hero { min-height: 86vh; }
.hero__inner--right { text-align: left; }
.hero__col--right { margin-left: 0; }
.about__media { order: -1; }
}
@media (max-width: 640px) {
.equip, .cards, .testimonials, .tracks { grid-template-columns: 1fr; }
h2 { font-size: 32px; }
.contact__card { padding: 36px 6% 44px; }
.contact__name { font-size: 54px; }
.clients-grid { grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.clients-grid figure { padding: 12px; }
.clients { padding: 60px 0 68px; }
}
/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.site-header, .brand, .nav, .btn { transition: none; }
}
/* ==========================================================================
Image bindings
Every photograph on the site is declared here rather than inline, so the
Content-Security-Policy can forbid inline styles outright.
MIGRATION: these URLs still point at the WordPress uploads folder. After you
copy the media across (see README), replace
https://www.sara-krieger.com/wp-content/uploads/
with
../img/
throughout this block. That is the only place image paths appear in CSS.
========================================================================== */
/* Page + section photography */
.bg--hero { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/SARA_COVER-RETOUCHED-scaled.jpg"); }
.bg--network { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/08/SaraKriegerReels-scaled.jpg"); }
.bg--reels { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2020/09/jonathan-velasquez-c1ZN57GfDB0-unsplash-scaled-1.jpg"); }
.bg--lookback { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/08/SaraKrieger_LookingBackCropped-scaled.jpg"); }
.bg--contact { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2020/11/skside1-scaled.jpg"); }
.bg--coaching { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/08/TEACHING-RETOUCHED-scaled.jpg"); }
.bg--music { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/oscar-keys-ojVMh1QTVGY-unsplash-scaled.jpg"); }
.bg--vocalpoints { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2020/09/jonathan-velasquez-c1ZN57GfDB0-unsplash-scaled-1.jpg"); }
/* Parallax. The live site scroll-locks exactly three photo bands — the hero,
Network and Looking Back — so the copy drifts over a held image. Divi does
it by transforming the background on scroll; background-attachment gets the
same read with no JS.
Must stay after the .hero/.network/.lookback rules above: those set
`background:` shorthand, which resets background-attachment to scroll.
Held back on touch and narrow screens, where iOS Safari renders fixed
backgrounds at the wrong scale and jitters, and for reduced-motion users. */
@media (min-width: 981px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
.bg--hero,
.bg--network,
.bg--lookback {
background-attachment: fixed;
/* Cheat the frame down 100px so Sara's head clears the top edge. `fixed`
sizes and positions the image against the viewport rather than the
band, which crops tighter than plain `center` and clipped her crown.
Offsets here resolve against (viewport height - image height), which is
negative under `cover`; ADDING moves the image down and reveals more of
its top. Flip to a minus to crop tighter instead. */
background-position: center calc(50% + 100px);
}
}
/* Testimonial portraits */
.av--masur { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/08/Richard-Masur-scaled.jpg"); }
.av--stankevich { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/08/GregS.jpeg"); }
.av--horst { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/08/Stephen-Horst.jpeg"); }
.av--errington { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/08/Rachel-Errington.jpg"); }
.av--rose { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2023/09/Tracey-Rose.jpeg"); }
.av--isbell { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2023/09/Sophie-Isbell-.jpeg"); }
/* Press mastheads */
.rv--gq { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/gqlogo.jpg"); }
.rv--nypost { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/NY-Post-Red.png"); }
.rv--nytimes { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/NY-Times.png"); }
.rv--wnyw { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/wnyw.png"); }
.rv--ourtown { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/Our-Town.jpeg"); }
.rv--quintessence { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/Screen-Shot-2021-09-12-at-1.58.53-PM.png"); }
.rv--syracuse { background-image: url("https://www.sara-krieger.com/wp-content/uploads/2021/09/Syracuse-Herald.png"); }