/* ----------------------------------------------------------
johnf.build — bespoke, hand-built. No framework.
Palette carries through from the old site:
cream #fffff0
teal #218da6
coral #f56358
peach #feb2ad
ink #2a2326
---------------------------------------------------------- */
:root {
--cream: #fffff0;
--cream-2: #fdf6dc;
--teal: #218da6;
--teal-deep: #166073;
--coral: #f56358;
--coral-deep: #c0392b; /* coral at body-text sizes; clears WCAG AA (5.4:1 on white/cream) */
--peach: #feb2ad;
--ink: #2a2326;
--ink-soft: #5a4f53;
--paper-line: #e6d9b8;
--font-serif: "Fraunces", Georgia, "Iowan Old Style", serif;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-hand: "Caveat", "Bradley Hand", cursive;
--measure: 62ch;
--gutter: clamp(1rem, 3vw, 2rem);
--rhythm: clamp(1rem, 1.5vw, 1.5rem);
--radius: 14px;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
color-scheme: light;
background: var(--cream);
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
line-height: 1.65;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* ----- Skip link & focus ----- */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--ink);
color: var(--cream);
padding: 0.5rem 1rem;
text-decoration: none;
z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible {
outline: 2px dashed var(--teal);
outline-offset: 3px;
border-radius: 2px;
}
/* ----- Layout primitives ----- */
.wrap {
width: min(100% - 2rem, 70rem);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ----- Headings ----- */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 600;
line-height: 1.15;
margin: 0 0 0.5em;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 {
font-size: clamp(2.4rem, 5.5vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
margin-top: 0;
margin-bottom: 0.75em;
position: relative;
display: inline-block;
/* own stacking context so the z-index:-1 underline can't escape to
and get painted behind the body background once a section's reveal settles */
isolation: isolate;
}
/* hand-drawn underline behind h2 */
h2::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.2em;
height: 0.5em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: -1;
opacity: 0.55;
}
h3 {
font-size: clamp(1.2rem, 1.6vw, 1.45rem);
}
p { margin: 0 0 var(--rhythm); max-width: var(--measure); text-wrap: pretty; }
strong { color: var(--ink); }
em { color: var(--teal-deep); font-style: italic; }
/* ----- Links ----- */
a {
color: var(--teal-deep);
text-decoration: none;
background-image: linear-gradient(120deg, var(--peach) 0%, var(--peach) 100%);
background-repeat: no-repeat;
background-size: 100% 0.18em;
background-position: 0 92%;
transition: background-size 0.18s ease, color 0.18s ease;
padding: 0 0.06em;
}
a:hover, a:focus-visible {
background-size: 100% 80%;
color: var(--ink);
}
/* ----- Site header ----- */
.site-header {
border-bottom: 1px dashed var(--paper-line);
background-color: rgba(255, 255, 240, 0.88);
/* flat-top hexagon honeycomb: no vertical edges, so it reads as a beehive, not a grid.
Kept very faint (low opacity, large cells) so it never competes with the nav text. */
background-image: url("data:image/svg+xml;utf8,");
background-size: 44px 25.4px;
backdrop-filter: blur(6px);
position: sticky;
top: 0;
z-index: 50;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.mark {
font-family: var(--font-hand);
font-size: 2rem;
line-height: 1;
color: var(--ink);
background: none;
padding: 0;
display: inline-flex;
align-items: center;
gap: 0.15rem;
}
.mark:hover { background: none; color: var(--teal-deep); }
.mark-ink { display: inline-block; transform: rotate(-4deg); }
.mark-dot {
width: 0.45rem;
height: 0.45rem;
background: var(--coral);
border-radius: 50%;
transform: translateY(0.6rem);
}
.primary-nav {
display: flex;
gap: clamp(0.75rem, 2vw, 1.5rem);
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.95rem;
}
/* ----- Hero ----- */
.hero {
padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
}
/* Hero: copy on the left, taped-up selfie on the right */
.hero--with-portrait .hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
.hero--with-portrait .hero-copy { min-width: 0; }
.hero-portrait {
margin: 0.5rem 0 0;
justify-self: end;
background: #fff;
padding: 0.7rem 0.7rem 0;
border-radius: 3px;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.05),
0 10px 26px rgba(42, 35, 38, 0.16);
transform: rotate(2.2deg);
position: relative;
transition: transform 0.3s ease;
}
.hero-portrait:hover { transform: rotate(0) scale(1.015); }
.hero-portrait img {
display: block;
width: clamp(11rem, 17vw, 15rem);
height: auto;
border-radius: 2px;
}
.hero-portrait figcaption {
font-family: var(--font-hand);
font-size: 1.3rem;
color: var(--ink);
text-align: center;
padding: 0.5rem 0.25rem 0.7rem;
line-height: 1.1;
}
/* bit of washi tape holding it to the wall */
.hero-portrait-tape {
position: absolute;
top: -0.85rem;
left: 50%;
width: 5.5rem;
height: 1.7rem;
transform: translateX(-50%) rotate(-3deg);
background: rgba(245, 99, 88, 0.22);
border: 1px solid rgba(245, 99, 88, 0.3);
}
@media (max-width: 46rem) {
.hero--with-portrait .hero-inner { grid-template-columns: 1fr; }
.hero--with-portrait .hero-portrait {
order: -1;
justify-self: center;
transform: rotate(-2deg);
}
}
.eyebrow {
font-family: var(--font-hand);
font-size: clamp(1.5rem, 2vw, 2rem);
color: var(--teal-deep);
margin: 0 0 0.5rem;
transform: rotate(-1.5deg);
display: inline-block;
}
.wave {
display: inline-block;
animation: wave 2.4s ease-in-out infinite;
transform-origin: 70% 80%;
}
@keyframes wave {
0%, 60%, 100% { transform: rotate(0); }
10% { transform: rotate(14deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(14deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(10deg); }
}
.hero h1 {
margin-block: 0.2em 0.4em;
}
.hand {
font-family: var(--font-hand);
font-weight: 700;
color: var(--teal-deep);
display: inline-block;
transform: rotate(-2deg);
padding: 0 0.05em;
}
.hand--coral { color: var(--coral); transform: rotate(1.5deg); }
.lede {
font-size: clamp(1.1rem, 1.3vw, 1.3rem);
color: var(--ink-soft);
max-width: 38rem;
}
.hero-squiggle {
display: block;
width: clamp(8rem, 22vw, 14rem);
margin-top: 1.5rem;
color: var(--coral);
opacity: 0.7;
}
/* ----- "What I'm looking for" callout ----- */
.looking-for {
position: relative;
margin: 2rem 0 0;
max-width: 38rem;
padding: 1.4rem 1.6rem;
background: #fff;
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 30px -18px rgba(42, 35, 38, 0.25);
border: 1.5px solid rgba(245, 99, 88, 0.4);
transform: rotate(-0.4deg);
}
.looking-for::before {
content: "★";
position: absolute;
top: -0.6rem;
left: -0.6rem;
width: 1.8rem;
height: 1.8rem;
background: var(--coral);
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.95rem;
transform: rotate(-8deg);
}
.looking-for-label {
font-family: var(--font-hand);
font-size: 1.4rem;
color: var(--teal-deep);
margin: 0 0 0.2rem;
line-height: 1;
}
.looking-for-body {
font-size: 1rem;
line-height: 1.5;
color: var(--ink);
margin: 0;
max-width: none;
}
/* ----- Stats strip ----- */
.stats {
padding-block: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
border-top: 1px dashed var(--paper-line);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
gap: clamp(1rem, 2.5vw, 2rem);
align-items: end;
}
.stat {
text-align: left;
padding: 0.5rem 0;
}
.stat-num {
font-family: var(--font-serif);
font-weight: 700;
font-size: clamp(2.2rem, 4vw, 3.2rem);
line-height: 1;
color: var(--teal-deep);
margin: 0 0 0.3rem;
letter-spacing: -0.02em;
}
.stat-unit {
font-size: 0.55em;
font-weight: 500;
color: var(--ink-soft);
margin-left: 0.15em;
letter-spacing: 0;
}
.stat-label {
font-size: 0.9rem;
color: var(--ink-soft);
margin: 0;
max-width: none;
line-height: 1.3;
}
.stat-num--hand {
font-family: var(--font-hand);
color: var(--coral);
font-size: clamp(2.4rem, 4.5vw, 3.6rem);
transform: rotate(-2deg);
transform-origin: left bottom;
}
/* ----- Two-column with margin note ----- */
.two-col {
display: grid;
gap: clamp(1.5rem, 4vw, 4rem);
grid-template-columns: minmax(0, 1fr);
padding-block: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 800px) {
.two-col { grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr); align-items: start; }
}
.two-col-main p { max-width: 38rem; }
.margin-note {
border-left: 1px dashed var(--paper-line);
padding: 0.5rem 0 0.5rem 1rem;
margin-top: 4rem;
}
.note-hand {
font-family: var(--font-hand);
font-size: clamp(1.4rem, 1.8vw, 1.7rem);
line-height: 1.25;
color: var(--teal-deep);
margin: 0;
transform: rotate(-1deg);
}
.aside {
font-family: var(--font-hand);
font-size: clamp(1.3rem, 1.5vw, 1.6rem);
color: var(--coral);
margin-block: 0.5em 1.5em;
}
.aside--block {
display: block;
margin: 0 0 1rem;
}
/* ----- Sections ----- */
section {
padding-block: clamp(2.5rem, 5vw, 4.5rem);
border-top: 1px dashed var(--paper-line);
}
.hero { border-top: none; }
.section-lede {
font-size: 1.1rem;
color: var(--ink-soft);
max-width: 44rem;
}
/* ----- Polaroids ----- */
.polaroids {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: clamp(1.5rem, 4vw, 3rem);
margin-block: 2rem 3rem;
justify-items: center;
}
.polaroid {
background: #fff;
padding: 0.9rem 0.9rem 1.4rem;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.04),
0 6px 18px rgba(42, 35, 38, 0.12);
max-width: 22rem;
margin: 0;
transition: transform 0.3s ease;
}
.polaroid--tilt-left { transform: rotate(-2deg); }
.polaroid--tilt-right { transform: rotate(2.2deg); }
.polaroid--wide { max-width: 38rem; }
.polaroid:hover { transform: rotate(0) scale(1.015); }
.polaroid-img {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: var(--cream-2);
}
.polaroid-img--wide { aspect-ratio: 16 / 10; }
/* ----- Button row ----- */
.button-row {
margin-top: 2.5rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.polaroid figcaption {
font-family: var(--font-hand);
font-size: 1.4rem;
color: var(--ink);
text-align: center;
margin-top: 0.6rem;
line-height: 1.1;
}
/* ----- Products ----- */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-top: 2rem;
}
.product-card {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(42, 35, 38, 0.18);
transition: transform 0.18s ease, box-shadow 0.18s ease;
position: relative;
}
.product-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius);
border: 1px solid rgba(33, 141, 166, 0.12);
pointer-events: none;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 32px -12px rgba(42, 35, 38, 0.22); }
.product-link {
display: flex;
flex-direction: column;
height: 100%;
background: none;
color: inherit;
padding: 0;
}
.product-link:hover { background: none; color: inherit; }
.product-thumb {
width: 100%;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center top;
background-color: var(--cream-2);
}
.product-body {
padding: 1.1rem 1.2rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.product-body h3 {
margin: 0;
color: var(--ink);
}
.product-tag {
font-size: 0.85rem;
color: var(--coral-deep);
font-weight: 500;
margin: 0;
letter-spacing: 0.01em;
}
.product-desc {
font-size: 0.95rem;
color: var(--ink-soft);
margin: 0.3rem 0 0;
max-width: none;
}
.product-cta {
margin-top: 0.7rem;
font-weight: 600;
color: var(--teal-deep);
font-size: 0.95rem;
}
.product-link--static { cursor: default; }
.product-card--static:hover {
transform: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(42, 35, 38, 0.18);
}
/* ----- Tech list ----- */
.tech-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}
.tech-list li {
background: #fff;
border: 1px solid var(--paper-line);
padding: 0.4rem 0.85rem;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 500;
color: var(--ink);
transition: transform 0.15s ease, border-color 0.15s ease;
}
.tech-list li:nth-child(3n) { transform: rotate(-1deg); }
.tech-list li:nth-child(3n+1) { transform: rotate(0.8deg); }
.tech-list li:hover { border-color: var(--teal); }
/* ----- Fun list ----- */
.fun-list {
list-style: none;
padding: 0;
margin: 0;
}
.fun-list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.85rem;
max-width: var(--measure);
}
.fun-list li::before {
content: "✶";
position: absolute;
left: 0;
top: 0;
color: var(--coral);
font-size: 1.1rem;
}
/* ----- Testimonials ----- */
.quote {
margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
background: #fff;
border-radius: var(--radius);
padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 30px -16px rgba(42, 35, 38, 0.18);
max-width: 52rem;
}
.quote::before {
content: "\201C";
position: absolute;
top: -0.2em;
left: 0.4em;
font-family: var(--font-serif);
font-size: 5.5rem;
color: var(--peach);
line-height: 1;
}
.quote blockquote {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.2vw, 1.2rem);
font-weight: 500;
line-height: 1.5;
color: var(--ink);
}
.quote blockquote p { max-width: none; margin: 0; }
.quote blockquote strong { color: var(--teal-deep); }
.quote figcaption {
margin-top: 1rem;
font-size: 0.9rem;
color: var(--ink-soft);
font-style: italic;
}
.quote:nth-child(even) { transform: rotate(-0.3deg); }
.quote:nth-child(odd) { transform: rotate(0.3deg); }
/* ----- Footer ----- */
.site-footer {
margin-top: clamp(3rem, 6vw, 5rem);
padding-block: 3rem;
border-top: 1px dashed var(--paper-line);
background: var(--cream-2);
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.signature {
font-family: var(--font-hand);
font-size: 2.4rem;
color: var(--teal-deep);
margin: 0;
transform: rotate(-3deg);
}
.footer-meta {
font-size: 0.85rem;
color: var(--ink-soft);
margin: 0;
}
/* ----- Reveal on scroll ----- */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* ----- Motion preferences ----- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.wave { animation: none; }
.polaroid, .product-card, .hero-portrait { transition: none; }
.hero-portrait, .hero-portrait:hover { transform: none; }
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ----- Print ----- */
@media print {
.site-header, .site-footer, .hero-squiggle { display: none; }
body { background: #fff; color: #000; }
a { color: #000; background: none; text-decoration: underline; }
}