style
/* Ward Photo Directory site styles.
Loaded by the blog template from the post titled style with label css.
Keep this file free of angle brackets, ampersands and quote characters so
it survives being stored as Blogger post content. */
:root {
--wd-ink: #1d2433;
--wd-muted: #5a6275;
--wd-bg: #f6f7fb;
--wd-surface: #ffffff;
--wd-line: #dfe3ec;
--wd-brand: #00008b;
--wd-brand-soft: #e8e8fa;
--wd-leader: #6b3fa0;
--wd-leader-soft: #f1ebf8;
--wd-note: #fff8e5;
--wd-note-line: #f0d68a;
--wd-radius: 10px;
}
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--wd-bg);
color: var(--wd-ink);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.6;
}
/* The template prints each post title as a heading; the page supplies its own. */
.entry-header { display: none; }
.chapter, .post-body { margin: 0; }
.wd {
max-width: 920px;
margin: 0 auto;
padding: 0 16px 48px;
}
.wd a { color: var(--wd-brand); }
.wd h2, .wd h3, .wd h4 { line-height: 1.25; scroll-margin-top: 16px; }
.wd h2 { font-size: 30px; margin: 0 0 12px; }
.wd h3 { font-size: 22px; margin: 36px 0 8px; }
.wd h4 { font-size: 18px; margin: 24px 0 6px; }
.wd p, .wd ul, .wd ol { margin: 0 0 14px; }
.wd li { margin-bottom: 6px; }
.wd code, .wd kbd {
font-family: ui-monospace, Consolas, Menlo, monospace;
font-size: 0.88em;
}
.wd code {
background: var(--wd-brand-soft);
padding: 1px 5px;
border-radius: 4px;
}
.wd kbd {
display: inline-block;
padding: 0 6px;
border: 1px solid var(--wd-line);
border-bottom-width: 2px;
border-radius: 4px;
background: var(--wd-surface);
}
/* Hero */
.wd-hero {
padding: 48px 0 24px;
text-align: center;
}
.wd-hero h1 {
font-size: 44px;
line-height: 1.1;
margin: 0 0 12px;
color: var(--wd-brand);
}
.wd-eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 13px;
font-weight: 600;
color: var(--wd-muted);
margin: 0 0 8px;
}
.wd-lede {
max-width: none;
margin: 0 0 24px;
font-size: 19px;
color: var(--wd-muted);
}
.wd-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.wd-nav a {
padding: 8px 16px;
border: 1px solid var(--wd-brand);
border-radius: 999px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
background: var(--wd-surface);
}
.wd-nav a:hover { background: var(--wd-brand); color: #fff; }
/* Sections */
.wd-section {
background: var(--wd-surface);
border: 1px solid var(--wd-line);
border-radius: var(--wd-radius);
padding: 32px;
margin-top: 32px;
scroll-margin-top: 16px;
}
.wd-audience { border-top: 6px solid var(--wd-brand); }
.wd-audience-leaders { border-top-color: var(--wd-leader); }
.wd-badge {
display: inline-block;
padding: 3px 12px;
border-radius: 999px;
background: var(--wd-brand-soft);
color: var(--wd-brand);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.wd-audience-leaders .wd-badge { background: var(--wd-leader-soft); color: var(--wd-leader); }
.wd-audience h2, .wd-audience h3 { color: var(--wd-brand); }
.wd-audience-leaders h2, .wd-audience-leaders h3 { color: var(--wd-leader); }
/* Getting started steps */
.wd-steps {
list-style: none;
padding: 0;
counter-reset: wdstep;
}
.wd-steps li {
counter-increment: wdstep;
position: relative;
padding-left: 52px;
margin-bottom: 18px;
}
.wd-steps li::before {
content: counter(wdstep);
position: absolute;
left: 0;
top: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--wd-brand);
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.wd-steps h3 { margin: 4px 0 4px; font-size: 19px; }
/* Callouts */
.wd-note {
background: var(--wd-note);
border: 1px solid var(--wd-note-line);
border-radius: var(--wd-radius);
padding: 14px 18px;
margin: 20px 0;
}
.wd-note p:last-child { margin-bottom: 0; }
.wd-example {
background: var(--wd-leader-soft);
border-radius: var(--wd-radius);
padding: 18px 22px;
margin-top: 28px;
}
.wd-example h4 { margin-top: 0; color: var(--wd-leader); }
.wd-todo {
font-style: italic;
color: #b3261e;
}
.wd-code {
background: var(--wd-ink);
color: #f3f4f8;
padding: 14px 18px;
border-radius: 8px;
white-space: pre-wrap;
font-family: ui-monospace, Consolas, Menlo, monospace;
font-size: 15px;
}
/* Tables and definition lists */
.wd-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 16px;
font-size: 16px;
}
.wd-table th, .wd-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--wd-line);
}
.wd-table th { background: var(--wd-bg); font-weight: 600; }
.wd-defs dt { font-weight: 700; margin-top: 12px; }
.wd-defs dd { margin: 2px 0 0 0; color: var(--wd-muted); }
/* Two-up layout */
.wd-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 16px 0;
}
.wd-pair h4 { margin-top: 0; }
/* Screenshots: replace a .wd-shot-placeholder div with an img */
.wd-shot { margin: 20px auto; max-width: 560px; }
.wd-shot-wide { max-width: none; }
.wd-shot img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--wd-line);
border-radius: 8px;
}
.wd-shot-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 20px;
text-align: center;
color: var(--wd-muted);
font-size: 15px;
background: repeating-linear-gradient(45deg, #eef0f6, #eef0f6 12px, #f7f8fb 12px, #f7f8fb 24px);
border: 2px dashed #b8bfd0;
border-radius: 8px;
}
.wd-shot figcaption {
text-align: center;
font-size: 14px;
color: var(--wd-muted);
margin-top: 8px;
}
/* Feedback form */
.wd-form { display: grid; gap: 16px; margin-top: 20px; }
.wd-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.wd-field { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.wd-field em { font-weight: 400; color: var(--wd-muted); }
.wd-field input, .wd-field select, .wd-field textarea {
font: inherit;
font-weight: 400;
padding: 10px 12px;
border: 1px solid #c4cad8;
border-radius: 8px;
background: var(--wd-surface);
color: var(--wd-ink);
width: 100%;
box-sizing: border-box;
}
.wd-field textarea { resize: vertical; }
.wd-field input:focus, .wd-field select:focus, .wd-field textarea:focus {
outline: 2px solid var(--wd-brand);
outline-offset: 1px;
border-color: var(--wd-brand);
}
.wd-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.wd-button {
font: inherit;
font-weight: 700;
padding: 11px 24px;
border: none;
border-radius: 8px;
background: var(--wd-brand);
color: #fff;
cursor: pointer;
}
.wd-button:hover { filter: brightness(1.2); }
.wd-button:disabled { opacity: 0.6; cursor: default; }
.wd-form-status { margin: 0; font-weight: 600; }
.wd-form-ok { color: #1b7a3a; }
.wd-form-error { color: #b3261e; }
/* About */
.wd-about {
display: grid;
grid-template-columns: 200px 1fr;
gap: 28px;
align-items: start;
}
.wd-about-photo { margin: 0; }
.wd-about-photo .wd-shot-placeholder { min-height: 200px; }
.wd a.wd-kofi {
display: inline-block;
padding: 10px 20px;
border-radius: 6px;
background: #72a4f2;
color: #fff;
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.wd a.wd-kofi:hover { filter: brightness(1.08); }
.wd-footer {
text-align: center;
font-size: 14px;
color: var(--wd-muted);
padding-top: 32px;
}
@media (max-width: 640px) {
body { font-size: 16px; }
.wd-hero { padding-top: 28px; }
.wd-hero h1 { font-size: 34px; }
.wd-section { padding: 22px 18px; }
.wd h2 { font-size: 25px; }
.wd-pair, .wd-form-row, .wd-about { grid-template-columns: 1fr; }
.wd-about-photo { max-width: 200px; }
}
@media print {
body { background: #fff; }
.wd-nav, #feedback { display: none; }
.wd-section { border: none; padding: 0; }
}