/* ══════════════════════════════════════════════════════════════════════════ sebascev.dev — see homepage-spec.md Every colour comes from a token. Nothing here is a literal colour except the six palette definitions below. ══════════════════════════════════════════════════════════════════════════ */ /* ── Fonts ───────────────────────────────────────────────────────────────── Two pinned instances of Archivo (variable, wdth + wght axes), subset to latin and instanced so the display cut carries no variation data at all. Display: wdth 75 / wght 700. Text: wdth 100 / wght 400-700. */ @font-face { font-family: 'Archivo Display'; src: url('/fonts/archivo-display.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo Text'; src: url('/fonts/archivo-text.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* Without JS no palette class is set, so p1 is the fallback ground. This block MUST stay above the palette classes: `:root` and `.p1` carry the same specificity, so whichever is declared last wins. Below them it would override every palette class and pin the whole site to p1. */ :root { --field:#073c39; --chalk:#f0eade; --mid:#8fada9; --pop:#d6e04b; --deep:#052b29; --hair:rgb(240 234 222 / .16); --space-page: clamp(22px, 4.4vw, 52px); --space-section: clamp(38px, 5.5vw, 66px); --mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Palettes ────────────────────────────────────────────────────────────── Applied as a class on by the inline script in . Adding a seventh: --mid on --field must reach 4.5:1, --pop on --field 3:1. */ .p1 { --field:#073c39; --chalk:#f0eade; --mid:#8fada9; --pop:#d6e04b; --deep:#052b29; --hair:rgb(240 234 222 / .16); } .p2 { --field:#9723c9; --chalk:#fdfd96; --mid:#e3dff2; --pop:#ffdb58; --deep:#000000; --hair:rgb(253 253 150 / .26); } .p3 { --field:#4a1220; --chalk:#f4ebe3; --mid:#c4a29c; --pop:#e8a33d; --deep:#2e0a14; --hair:rgb(244 235 227 / .18); } .p4 { --field:#14304f; --chalk:#eef3f7; --mid:#93aec6; --pop:#ff7a5c; --deep:#0b1d31; --hair:rgb(238 243 247 / .17); } .p5 { --field:#ede6da; --chalk:#1a1a17; --mid:#6b6459; --pop:#2f6f4e; --deep:#f5f1e8; --hair:rgb(26 26 23 / .20); } .p6 { --field:#8c3a1e; --chalk:#fff4e6; --mid:#ecc6b2; --pop:#7dc6d6; --deep:#4a1c0c; --hair:rgb(255 244 230 / .20); } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; } body { background: var(--field); color: var(--chalk); font-family: 'Archivo Text', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page { min-height: 100vh; padding: var(--space-page) var(--space-page) clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: var(--space-section); } /* ── Masthead ────────────────────────────────────────────────────────────── Top-right is deliberately empty — see spec §5.3. */ .head { display: flex; flex-direction: column; } .wordmark { margin: 0; font-family: 'Archivo Display', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(44px, 11vw, 84px); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: .84; } .wordmark i { font-style: normal; color: var(--pop); } .intro { margin: clamp(16px, 2.2vw, 24px) 0 0; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.6; color: var(--mid); max-width: 46ch; } .intro b { color: var(--chalk); font-weight: 600; } /* ── Section header ──────────────────────────────────────────────────────── Colour and the rule mark structure; SIZE marks content. The section title stays smaller than the tile names it introduces — if it were equal or larger the two would compete. */ .sec { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 26px); } .sec-head { display: flex; flex-direction: column; gap: clamp(7px, 1vw, 11px); } .sec-titlerow { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); } .sec-title { margin: 0; font-family: 'Archivo Display', sans-serif; font-size: clamp(15px, 1.9vw, 23px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1; color: var(--pop); white-space: nowrap; } .sec-line { flex: 1; height: 1px; background: var(--hair); } .sec-count { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--mid); opacity: .7; font-variant-numeric: tabular-nums; } .sec-sub { margin: 0; font-size: clamp(13px, 1.2vw, 14px); line-height: 1.5; color: var(--mid); max-width: 56ch; } /* ── Grid ────────────────────────────────────────────────────────────────── Hairlines are drawn PER TILE with a 1px ring, never bled through the container background. Bleeding renders a filled rectangle wherever a cell is missing — three tiles in a two-column grid is the common case. */ .grid { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 1px; } .cell { background: var(--field); box-shadow: 0 0 0 1px var(--hair); padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: clamp(9px, 1vw, 13px); transition: background .18s ease, color .18s ease; } /* :active included so a tap on a phone gives feedback before navigation. */ .cell:hover, .cell:focus-visible, .cell:active { background: var(--pop); color: var(--deep); } .idx { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); } .cell:hover .idx, .cell:focus-visible .idx, .cell:active .idx { color: var(--deep); opacity: .72; } .cell h3 { margin: 0; font-family: 'Archivo Display', sans-serif; font-size: clamp(26px, 2.6vw, 31px); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; } .cell p { margin: auto 0 0; font-size: 13px; line-height: 1.5; color: var(--mid); } .cell:hover p, .cell:focus-visible p, .cell:active p { color: var(--deep); } .arrow { width: 1em; height: 1em; vertical-align: -.12em; margin-left: .2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Line-break hints in tile names are desktop-only. */ @media (max-width: 599px) { .lb { display: none; } } @media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } /* a lone trailing tile spans the row rather than orphaning */ .grid > :last-child:nth-child(odd) { grid-column: span 2; } .cell { min-height: 170px; } } @media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } .grid > :last-child:nth-child(odd) { grid-column: auto; } .grid:has(> :nth-child(5)) > :last-child:nth-child(3n+1) { grid-column: span 3; } } /* ── Footer ──────────────────────────────────────────────────────────────── Two tiers, one hairline. `.rule` is the colophon row — a link group, the palette picker, a link group — and `.fine` sits under it at a smaller size with no rule of its own, so the eye reads one footer block that trails off rather than two stacked bars. Both link groups share `.links`: the two halves are the same component, and only the mobile stacking tells them apart. */ .foot { margin-top: auto; } .foot b { color: var(--pop); font-weight: 600; } .rule { padding-top: clamp(18px, 2.4vw, 26px); border-top: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; font-size: 13px; color: var(--mid); } .links { display: flex; gap: 16px; flex-wrap: wrap; } .links a:hover { color: var(--pop); } .fine { margin: clamp(14px, 1.8vw, 20px) 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 6px 24px; flex-wrap: wrap; color: var(--mid); } /* is the semantic here, but its default 80% would compound off the parent — pin it instead so both halves stay on the same optical step. */ .fine small { font-size: 11px; letter-spacing: .03em; } @media (max-width: 599px) { .rule { justify-content: flex-start; gap: 12px; } /* The leading group takes its own line so it never interleaves with the picker and the trailing group as the row wraps. */ .links-lead { flex: 1 0 100%; } /* Stacked, left-aligned: two short strings pinned to opposite edges of a narrow screen read as unrelated fragments. */ .fine { justify-content: flex-start; flex-direction: column; } } /* ── Palette picker ──────────────────────────────────────────────────────── Collapsed to a single dot showing the current palette. Hidden entirely without JS, since it would do nothing. */ html:not(.js) .swatcher { display: none; } .swatcher { display: flex; align-items: center; gap: 10px; } .swatcher button { appearance: none; cursor: pointer; padding: 0; background: transparent; border: 0; font: inherit; display: grid; place-items: center; } .trigger { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3), 0 0 0 1px var(--hair); transition: box-shadow .2s ease, transform .2s ease; } .trigger:hover { transform: scale(1.09); } .swatcher[data-open="true"] .trigger { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3), 0 0 0 2px var(--chalk); } .tray { display: flex; align-items: center; gap: 7px; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-width .34s cubic-bezier(.2,.75,.3,1), opacity .22s ease, margin-left .34s; } .swatcher[data-open="true"] .tray { max-width: 340px; opacity: 1; pointer-events: auto; margin-left: 4px; } .dots { display: flex; gap: 7px; } .dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .28); transition: transform .2s ease, box-shadow .2s ease; } .dot:hover { transform: scale(1.18); } .dot[aria-current="true"] { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .28), 0 0 0 2px var(--chalk); } .pname { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); white-space: nowrap; } /* Touch targets are decided by POINTER TYPE, not width — a narrow window on a laptop is still a mouse, and a large tablet is still a finger. */ @media (pointer: coarse) { .trigger { width: 26px; height: 26px; } .dot { width: 16px; height: 16px; } .swatcher button { padding: 6px; margin: -6px; } .dots { gap: 10px; } } /* ── Palette crossfade ───────────────────────────────────────────────────── Duration is a variable so one declaration serves both a crisp tile hover and a slow palette morph. .morphing is added by app.js for 750ms. */ .morphing, .morphing * { transition: background-color .75s ease, color .75s ease, border-color .75s ease, box-shadow .75s ease !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }