Oliver
251bec598b
Replaces the navy/pink direction with the reference's own language: paper ground, black ink, hairline rules, Playfair Display for display, Inter tracked caps for labels, italic serif for dates, boxed modules, three-column card grid, black rectangular buttons. Sections in the required order: 1. Latest Tips and Tricks - three clickable cards, category band, serif headline, description, reading time, View all tips. 2. Featured Module - Inventory in a bordered plate: manifest facts, description, three benefits, Explore module CTA. 3. Latest News from the Community - three rows with date, headline, excerpt and source, pulled from the OCA repositories. Nav, welcome copy, mail form, contact address and picture credits preserved. 44px touch targets on phones, visible focus rings.
657 lines
15 KiB
CSS
657 lines
15 KiB
CSS
/* ============================================================
|
|
The OC Guy — editorial rebuild
|
|
Design language from the VITA reference: paper ground, black
|
|
ink, hairline rules, didone serif display, tiny tracked caps
|
|
for labels, italic serif meta, boxed modules, 3-column cards.
|
|
============================================================ */
|
|
|
|
:root {
|
|
--paper: #fbfaf7;
|
|
--ink: #111110;
|
|
--muted: #6c6a66;
|
|
--rule: rgba(17, 17, 16, 0.16);
|
|
--rule-strong: rgba(17, 17, 16, 0.42);
|
|
--tint: #f2f0ec;
|
|
|
|
--serif: "Playfair Display", "Times New Roman", Georgia, serif;
|
|
--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
|
|
--pad: clamp(16px, 3.2vw, 40px);
|
|
--max: 1180px;
|
|
--gap: clamp(24px, 3vw, 44px);
|
|
|
|
--step-xs: 11px;
|
|
--step-sm: 13px;
|
|
--step-body: 16px;
|
|
--step-lead: clamp(17px, 1.1vw, 19px);
|
|
--step-h3: clamp(19px, 1.5vw, 23px);
|
|
--step-h2: clamp(30px, 3.4vw, 46px);
|
|
--step-display: clamp(40px, 6.4vw, 92px);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
font-size: var(--step-body);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
img { display: block; max-width: 100%; height: auto; }
|
|
a { color: inherit; }
|
|
button, input { font: inherit; color: inherit; }
|
|
|
|
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
|
|
::selection { background: var(--ink); color: var(--paper); }
|
|
|
|
.sr-only {
|
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
|
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
}
|
|
|
|
.skip {
|
|
position: fixed; top: 8px; left: 8px; z-index: 60;
|
|
padding: 10px 16px; background: var(--ink); color: var(--paper);
|
|
font-size: var(--step-sm); text-decoration: none;
|
|
transform: translateY(-160%); transition: transform 220ms ease;
|
|
}
|
|
.skip:focus { transform: translateY(0); }
|
|
|
|
/* ---------- masthead ---------- */
|
|
|
|
.masthead {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: clamp(20px, 3vw, 34px) var(--pad) 18px;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: end;
|
|
gap: 14px;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.wordmark {
|
|
font-family: var(--serif);
|
|
font-weight: 700;
|
|
font-size: clamp(40px, 6.2vw, 76px);
|
|
letter-spacing: -0.035em;
|
|
line-height: 0.86;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: clamp(12px, 1.8vw, 26px);
|
|
font-size: var(--step-xs);
|
|
font-weight: 500;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
.nav a { text-decoration: none; padding: 6px 0; }
|
|
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
|
|
|
|
.nav-cta {
|
|
grid-column: 2;
|
|
justify-self: end;
|
|
margin-top: 10px;
|
|
padding: 9px 18px;
|
|
border: 1px solid var(--ink);
|
|
font-size: var(--step-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
transition: background-color 160ms ease, color 160ms ease;
|
|
}
|
|
.nav-cta:hover, .nav-cta:focus-visible { background: var(--ink); color: var(--paper); }
|
|
|
|
/* ---------- lead ---------- */
|
|
|
|
.lead {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: var(--gap) var(--pad) clamp(36px, 5vw, 64px);
|
|
display: grid;
|
|
grid-template-columns: 3fr 7fr;
|
|
grid-template-areas:
|
|
"side media"
|
|
"side caption";
|
|
column-gap: var(--gap);
|
|
row-gap: 22px;
|
|
}
|
|
|
|
.lead-side { grid-area: side; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 36px); }
|
|
|
|
.box {
|
|
border: 1px solid var(--rule-strong);
|
|
padding: 22px 20px 20px;
|
|
}
|
|
.box-kicker {
|
|
margin: 0 0 12px;
|
|
font-size: var(--step-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
.box-lede {
|
|
margin: 0 0 18px;
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: var(--step-lead);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 44px;
|
|
padding: 0 22px;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
border: 1px solid var(--ink);
|
|
border-radius: 0;
|
|
font-size: var(--step-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: background-color 160ms ease, color 160ms ease;
|
|
}
|
|
.btn:hover, .btn:focus-visible { background: transparent; color: var(--ink); }
|
|
|
|
.side-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-top: 1px solid var(--rule);
|
|
font-size: var(--step-sm);
|
|
line-height: 1.5;
|
|
}
|
|
.side-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
|
|
.side-kicker {
|
|
display: block;
|
|
font-size: var(--step-xs);
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 3px;
|
|
}
|
|
.side-list a { text-decoration: underline; text-underline-offset: 3px; }
|
|
|
|
.lead-media { grid-area: media; }
|
|
.lead-media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 42%; }
|
|
|
|
.lead-caption { grid-area: caption; max-width: 36em; }
|
|
|
|
.meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 14px;
|
|
margin: 0 0 12px;
|
|
font-size: var(--step-xs);
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.meta span:first-child { color: var(--ink); font-weight: 600; }
|
|
|
|
h1 {
|
|
margin: 0 0 12px;
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: clamp(26px, 3.1vw, 42px);
|
|
line-height: 1.1;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.standfirst {
|
|
margin: 0;
|
|
font-family: var(--serif);
|
|
font-size: var(--step-lead);
|
|
line-height: 1.55;
|
|
color: #2a2926;
|
|
}
|
|
|
|
/* ---------- section frame ---------- */
|
|
|
|
.section {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: clamp(34px, 4.5vw, 56px) var(--pad) 0;
|
|
}
|
|
|
|
.section-head {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: baseline;
|
|
column-gap: 16px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--ink);
|
|
margin-bottom: clamp(22px, 3vw, 36px);
|
|
}
|
|
|
|
.initial {
|
|
font-family: var(--serif);
|
|
font-size: clamp(54px, 7.4vw, 96px);
|
|
line-height: 0.7;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0;
|
|
font-family: var(--sans);
|
|
font-size: var(--step-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
.section-title em {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: var(--step-h3);
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.more {
|
|
font-size: var(--step-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--ink);
|
|
padding-bottom: 2px;
|
|
justify-self: end;
|
|
}
|
|
.more:hover, .more:focus-visible { background: var(--ink); color: var(--paper); }
|
|
|
|
/* ---------- cards ---------- */
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 20px clamp(12px, 1.8vw, 24px) 22px;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--rule);
|
|
transition: background-color 200ms ease;
|
|
}
|
|
.card + .card { border-left: 1px solid var(--rule); }
|
|
.card:hover, .card:focus-visible { background: var(--tint); }
|
|
|
|
.card-img {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
object-position: 50% 45%;
|
|
background: var(--tint);
|
|
}
|
|
|
|
.card-cat {
|
|
display: block;
|
|
padding: 7px 0;
|
|
border-top: 1px solid var(--rule);
|
|
border-bottom: 1px solid var(--rule);
|
|
text-align: center;
|
|
font-size: var(--step-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.card h3 {
|
|
margin: 2px 0 0;
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: var(--step-h3);
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-desc {
|
|
margin: 0;
|
|
font-size: var(--step-sm);
|
|
line-height: 1.5;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.card-meta {
|
|
margin-top: auto;
|
|
padding-top: 6px;
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: var(--step-sm);
|
|
color: var(--muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.card:hover h3, .card:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
|
|
|
|
/* ---------- featured module ---------- */
|
|
|
|
.feature {
|
|
display: grid;
|
|
grid-template-columns: 4fr 7fr;
|
|
border: 1px solid var(--ink);
|
|
}
|
|
|
|
.feature-plate {
|
|
padding: clamp(20px, 2.4vw, 30px);
|
|
border-right: 1px solid var(--ink);
|
|
background: var(--tint);
|
|
}
|
|
|
|
.plate-kicker {
|
|
margin: 0 0 18px;
|
|
font-size: var(--step-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.plate-name {
|
|
margin: 0;
|
|
font-family: var(--serif);
|
|
font-size: clamp(34px, 4vw, 56px);
|
|
line-height: 0.95;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.plate-facts {
|
|
margin: 22px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-top: 1px solid var(--rule-strong);
|
|
font-size: var(--step-sm);
|
|
}
|
|
.plate-facts li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.plate-facts span {
|
|
font-size: var(--step-xs);
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.plate-note {
|
|
margin: 18px 0 0;
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: var(--step-sm);
|
|
line-height: 1.45;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.feature-body { padding: clamp(22px, 2.8vw, 36px); }
|
|
|
|
.feature-name {
|
|
margin: 0 0 12px;
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: clamp(24px, 2.6vw, 34px);
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.feature-body > p { margin: 0 0 20px; max-width: 40em; }
|
|
|
|
.benefits {
|
|
margin: 0 0 24px;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.benefits li {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
font-size: var(--step-sm);
|
|
line-height: 1.5;
|
|
color: var(--muted);
|
|
}
|
|
.benefits strong {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
font-family: var(--serif);
|
|
font-size: var(--step-body);
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
|
|
.feature-note {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: var(--step-sm);
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ---------- community news ---------- */
|
|
|
|
.news { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
|
|
|
|
.news li {
|
|
display: grid;
|
|
grid-template-columns: 120px 1fr 190px;
|
|
gap: 20px;
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.news-date {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: var(--step-sm);
|
|
color: var(--muted);
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.news-body h3 {
|
|
margin: 0 0 6px;
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: var(--step-h3);
|
|
line-height: 1.2;
|
|
}
|
|
.news-body h3 a { text-decoration: none; }
|
|
.news-body h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
|
|
.news-body p { margin: 0; font-size: var(--step-sm); line-height: 1.5; color: var(--muted); max-width: 52em; }
|
|
|
|
.news-source {
|
|
font-size: var(--step-xs);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
text-align: right;
|
|
padding-top: 6px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* ---------- ask ---------- */
|
|
|
|
.ask {
|
|
max-width: var(--max);
|
|
margin: clamp(40px, 6vw, 72px) auto 0;
|
|
padding: 0 var(--pad);
|
|
}
|
|
.ask-inner {
|
|
border-top: 1px solid var(--ink);
|
|
border-bottom: 1px solid var(--ink);
|
|
padding: clamp(26px, 3vw, 40px) 0;
|
|
display: grid;
|
|
grid-template-columns: 3fr 7fr;
|
|
gap: var(--gap);
|
|
align-items: start;
|
|
}
|
|
.ask h2 {
|
|
margin: 0;
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: var(--step-h2);
|
|
line-height: 1.05;
|
|
}
|
|
.ask-lede { margin: 8px 0 0; font-family: var(--serif); font-style: italic; color: var(--muted); }
|
|
|
|
.ask-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
|
|
.ask-form label {
|
|
flex: 0 0 100%;
|
|
font-size: var(--step-xs);
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.ask-form input {
|
|
flex: 1 1 240px;
|
|
min-height: 44px;
|
|
padding: 0 14px;
|
|
background: transparent;
|
|
border: 1px solid var(--rule-strong);
|
|
border-radius: 0;
|
|
font-size: var(--step-body);
|
|
}
|
|
.ask-form input:focus-visible { border-color: var(--ink); }
|
|
|
|
/* ---------- footer ---------- */
|
|
|
|
.foot {
|
|
margin-top: clamp(48px, 7vw, 88px);
|
|
background: var(--ink);
|
|
color: #f4f2ee;
|
|
padding: clamp(32px, 4vw, 52px) var(--pad) 24px;
|
|
}
|
|
|
|
.foot-name {
|
|
max-width: var(--max);
|
|
margin: 0 auto 26px;
|
|
font-family: var(--serif);
|
|
font-weight: 700;
|
|
font-size: clamp(44px, 9vw, 116px);
|
|
line-height: 0.86;
|
|
letter-spacing: -0.035em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.foot-cols {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 24px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.foot-note { margin: 0; max-width: 34em; font-family: var(--serif); font-style: italic; font-size: var(--step-sm); line-height: 1.5; }
|
|
|
|
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: var(--step-xs); letter-spacing: 0.16em; text-transform: uppercase; }
|
|
.foot-links a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 2px; }
|
|
.foot-links a:hover { border-color: #fff; }
|
|
|
|
.foot-credits {
|
|
max-width: var(--max);
|
|
margin: 22px auto 0;
|
|
font-size: var(--step-xs);
|
|
line-height: 1.6;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
.foot-credits a { color: rgba(255, 255, 255, 0.82); }
|
|
|
|
/* ---------- motion ---------- */
|
|
|
|
html.js [data-rv] {
|
|
opacity: 0;
|
|
transform: translateY(14px);
|
|
transition: opacity 520ms ease, transform 520ms ease;
|
|
}
|
|
html.js [data-rv].rv-in { opacity: 1; transform: none; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
html.js [data-rv] { opacity: 1; transform: none; transition: none; }
|
|
}
|
|
|
|
/* ---------- tablet ---------- */
|
|
|
|
@media (max-width: 900px) {
|
|
.lead {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "media" "caption" "side";
|
|
}
|
|
.lead-side { flex-direction: row; flex-wrap: wrap; }
|
|
.box { flex: 1 1 240px; }
|
|
.side-list { flex: 1 1 260px; }
|
|
|
|
.feature { grid-template-columns: 1fr; }
|
|
.feature-plate { border-right: 0; border-bottom: 1px solid var(--ink); }
|
|
|
|
.news li { grid-template-columns: 96px 1fr; }
|
|
.news-source { grid-column: 2; text-align: left; padding-top: 0; }
|
|
|
|
.ask-inner { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ---------- phone ---------- */
|
|
|
|
@media (max-width: 680px) {
|
|
.masthead { grid-template-columns: 1fr; align-items: start; gap: 12px; }
|
|
.nav { gap: 14px; }
|
|
.nav-cta { grid-column: 1; justify-self: start; margin-top: 0; }
|
|
|
|
.lead-side { flex-direction: column; }
|
|
|
|
.cards { grid-template-columns: 1fr; }
|
|
.card { padding: 18px 0 22px; }
|
|
.card + .card { border-left: 0; }
|
|
.card-img { aspect-ratio: 16 / 9; }
|
|
|
|
.section-head { grid-template-columns: auto 1fr; row-gap: 10px; }
|
|
.more { grid-column: 1 / -1; justify-self: start; }
|
|
|
|
.news li { grid-template-columns: 1fr; gap: 8px; }
|
|
.news-date, .news-source { padding-top: 0; }
|
|
|
|
.ask-form input { flex: 1 1 100%; }
|
|
.ask-form .btn { width: 100%; }
|
|
|
|
.foot-cols { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ---------- touch targets on phones ---------- */
|
|
@media (max-width: 680px) {
|
|
.nav a,
|
|
.more,
|
|
.foot-links a,
|
|
.side-list a,
|
|
.news-body h3 a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 44px;
|
|
}
|
|
.nav-cta { min-height: 44px; }
|
|
.foot-links { gap: 10px 18px; }
|
|
}
|