will
0a8631a0f2
deploy / deploy (push) Successful in 4s
Replaces the hero_heading/subheading/intro param-driven layout with a plain markdown body (headshot, Creative Help, Technical Help, bio), so layouts/index.html just renders .Content. Headshot is served from the Linode bucket (same convention as the freebie PDF) rather than committed to git. CSS floats the photo left with the first list wrapping beside it, matching the site's font/color patterns. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
328 lines
6.9 KiB
CSS
328 lines
6.9 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
|
|
/* Palette: slate blue (firm/trustworthy) + dusty rose (warmth/reassurance)
|
|
+ teal (clarity/action) + warm taupe (grounding), on a cream base.
|
|
"Gentle but firm" — bold blue header, soft cream body, energetic teal
|
|
CTAs, rose as the one purely decorative/interactive touch. */
|
|
--bg: #faf8f4;
|
|
--bg-raised: #f5f1e8;
|
|
--fg: #333333;
|
|
--fg-muted: #6b6560;
|
|
--border: #e5ddd0;
|
|
|
|
--slate: #4a6fa5;
|
|
--rose: #d9a9b0;
|
|
--teal: #009688;
|
|
--taupe: #b19a75;
|
|
|
|
--heading: var(--slate);
|
|
--accent: var(--slate);
|
|
--accent-fg: #ffffff;
|
|
/* Darkened from --teal: #009688 white-on-teal was 3.67:1, fails WCAG AA
|
|
(needs 4.5:1) for button-label-sized text. This hits 4.90:1. */
|
|
--cta: #007f73;
|
|
--cta-fg: #ffffff;
|
|
|
|
--radius: 0.5rem;
|
|
--max-width: 42rem;
|
|
|
|
--font-heading: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
--font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
--font-accent: "Source Code Pro", "Courier New", monospace;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #1c1917;
|
|
--bg-raised: #262220;
|
|
--fg: #f0ebe3;
|
|
--fg-muted: #a89e92;
|
|
--border: #3a352f;
|
|
|
|
--slate: #8fa8d1;
|
|
--rose: #e6c3ca;
|
|
--teal: #2dd4c4;
|
|
--taupe: #cbb190;
|
|
|
|
--heading: var(--slate);
|
|
--accent: var(--slate);
|
|
--accent-fg: #14161a;
|
|
--cta: var(--teal);
|
|
--cta-fg: #0f1115;
|
|
}
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
line-height: 1.6;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: var(--accent); }
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top: 0;
|
|
z-index: 100;
|
|
background: var(--cta);
|
|
color: var(--cta-fg);
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: 0 0 var(--radius) 0;
|
|
}
|
|
.skip-link:focus {
|
|
left: 0;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: var(--font-heading);
|
|
color: var(--heading);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
code, kbd, .accent-text {
|
|
font-family: var(--font-accent);
|
|
}
|
|
|
|
/* Header: the "firm leadership" statement — solid, confident, warm text
|
|
rather than stark white, with a rose touch on interaction. */
|
|
header.site {
|
|
background: var(--slate);
|
|
}
|
|
header.site .inner {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 1.25rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
header.site .brand {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
color: var(--bg);
|
|
text-decoration: none;
|
|
}
|
|
header.site nav {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
header.site nav a {
|
|
color: var(--bg);
|
|
opacity: 0.85;
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
}
|
|
/* Rose as text color here would be ~2.5:1 against the blue header — too
|
|
low-contrast to read. Keep the text legible, use rose as an underline
|
|
instead so the "gentle" accent doesn't cost readability. */
|
|
header.site nav a:hover {
|
|
opacity: 1;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--rose);
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 3px;
|
|
}
|
|
/* The default --cta focus ring is only ~1:1 against this header's own
|
|
background — swap in the header's own text color, already proven at
|
|
4.82:1 against slate blue. */
|
|
header.site a:focus-visible {
|
|
outline-color: var(--bg);
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 4rem 1.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Footer: grounding warm-taupe band bookending the blue header. */
|
|
footer.site {
|
|
background: var(--bg-raised);
|
|
border-top: 1px solid var(--taupe);
|
|
margin-top: 2rem;
|
|
}
|
|
footer.site .inner {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
font-size: 0.85rem;
|
|
color: var(--fg-muted);
|
|
}
|
|
footer.site nav {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
}
|
|
footer.site nav a {
|
|
color: var(--slate);
|
|
text-decoration: none;
|
|
}
|
|
/* Same reasoning as the header nav: rose text on this background is
|
|
~1.8:1, nearly invisible. Underline instead of recoloring. */
|
|
footer.site nav a:hover {
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--rose);
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: var(--radius);
|
|
background: var(--cta);
|
|
color: var(--cta-fg);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
border: none;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { opacity: 0.9; }
|
|
|
|
/* Explicit, high-contrast focus ring everywhere — the default browser
|
|
outline can get lost against the colored header/footer bands. */
|
|
a:focus-visible, button:focus-visible {
|
|
outline: 2px solid var(--cta);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
input, textarea {
|
|
width: 100%;
|
|
padding: 0.65rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-raised);
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
input:focus, textarea:focus {
|
|
outline: 2px solid var(--cta);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.field-honeypot {
|
|
position: absolute;
|
|
left: -9999px;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Course landing pages (layouts/courses/single.html) */
|
|
.course-hero {
|
|
text-align: center;
|
|
}
|
|
.course-subhead {
|
|
font-style: italic;
|
|
color: var(--fg-muted);
|
|
margin-top: 0;
|
|
}
|
|
.course-value-prop {
|
|
font-size: 1.05rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
.course-social-proof {
|
|
font-style: italic;
|
|
font-size: 0.9rem;
|
|
color: var(--fg-muted);
|
|
}
|
|
.enroll-form {
|
|
max-width: 24rem;
|
|
margin: 1.5rem auto;
|
|
text-align: left;
|
|
}
|
|
.enroll-status {
|
|
text-align: center;
|
|
}
|
|
|
|
.course-credibility,
|
|
.course-curriculum {
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 2rem;
|
|
margin: 3rem 0;
|
|
}
|
|
.course-bullets {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 1.5rem 0 0;
|
|
}
|
|
.course-bullets li {
|
|
position: relative;
|
|
padding-left: 1.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.course-bullets li::before {
|
|
content: "✓";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--cta);
|
|
font-weight: 700;
|
|
}
|
|
.course-curriculum-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 1.5rem 0 0;
|
|
}
|
|
.course-curriculum-list li {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.course-day-label {
|
|
font-family: var(--font-heading);
|
|
color: var(--cta);
|
|
font-weight: 700;
|
|
}
|
|
.course-repeat-cta {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
/* Home page: hero photo floats left, first list wraps beside it, second
|
|
section clears below once the photo's height runs out. */
|
|
main img {
|
|
float: left;
|
|
width: 220px;
|
|
height: auto;
|
|
margin: 0 1.5rem 1rem 0;
|
|
border-radius: var(--radius);
|
|
}
|
|
main h2:nth-of-type(2) {
|
|
clear: left;
|
|
}
|
|
@media (max-width: 30rem) {
|
|
main img {
|
|
float: none;
|
|
width: 100%;
|
|
max-width: 220px;
|
|
margin: 0 auto 1.5rem;
|
|
display: block;
|
|
}
|
|
}
|