/* ============================================================ byone.dev — base styles ------------------------------------------------------------ Minimal modern aesthetic. Single source of truth for the main site. Project pages under /projects// should NOT import this — they own their own design. Sections: 1. Theming — palette + data-theme overrides 2. Tokens — typography, spacing, layout 3. Reset & base — element defaults 4. Layout — page shell, container, nav, footer 5. Components — hero, list, article, theme-switcher 6. Utilities — small helpers, motion ============================================================ */ /* ---------- 1. Theming -------------------------------------- */ /* Every color is declared once via the CSS light-dark() function. The active value is picked based on `color-scheme`, which we control through [data-theme] on : [no attribute] → color-scheme: light dark (follows OS) data-theme="dark" → color-scheme: dark (forced dark) data-theme="light"→ color-scheme: light (forced light) To add/edit a color, change it in ONE place below. */ :root { color-scheme: light dark; --color-bg: light-dark(#fafaf7, #0e0e0c); --color-surface: light-dark(#ffffff, #161614); --color-text: light-dark(#111111, #f2f0eb); --color-muted: light-dark(#6b6b6b, #a8a59e); --color-faint: light-dark(#a0a0a0, #6a675f); --color-border: light-dark(#e8e6e1, #26241f); --color-accent: light-dark(#ff5722, #ff7a4d); --color-accent-soft: light-dark(#fff1ec, #2a1810); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---------- 2. Tokens --------------------------------------- */ :root { /* Type ---- --font-sans — geometric sans for headers + UI labels. Real Futura on macOS; Jost (Google Fonts) elsewhere. --font-serif — body serif, designed for screen reading. Source Serif 4, with system serif fallbacks. Per the design rule: headers use weight contrast, not italic. */ --font-sans: "Futura", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Cambria, Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Spacing scale (rem-based) */ --size-1: 0.25rem; --size-2: 0.5rem; --size-3: 0.75rem; --size-4: 1rem; --size-6: 1.5rem; --size-8: 2rem; --size-12: 3rem; --size-16: 4rem; --size-24: 6rem; /* Layout */ --content-width: 680px; --wide-width: 960px; /* Misc */ --radius: 8px; --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- 3. Reset & base --------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-serif); font-size: 18px; line-height: 1.65; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-border); transition: border-color var(--transition), color var(--transition); } a:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); } h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; margin: 0; } h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 400; letter-spacing: -0.025em; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); } h3 { font-size: 1.35rem; } /* Inside headers means "secondary line" — lighter weight, not italic. */ h1 em, h2 em, h3 em, h4 em { font-style: normal; font-weight: 300; } p { margin: 0 0 var(--size-4); } small { color: var(--color-muted); font-size: 0.85rem; } ::selection { background: var(--color-accent); color: #fff; } /* ---------- 4. Layout --------------------------------------- */ .page { display: flex; flex-direction: column; min-height: 100vh; } .container { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--size-6); } .container--wide { max-width: var(--wide-width); } /* Navigation */ .nav { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); background: color-mix(in srgb, var(--color-bg) 80%, transparent); border-bottom: 1px solid var(--color-border); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--size-4) var(--size-6); max-width: var(--wide-width); margin: 0 auto; } .nav__brand { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 500; border-bottom: none; letter-spacing: -0.01em; } .nav__brand:hover { color: var(--color-accent); } .nav__links { display: flex; gap: var(--size-6); list-style: none; margin: 0; padding: 0; } .nav__links a { border-bottom: none; font-size: 0.95rem; color: var(--color-muted); } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-text); } @media (max-width: 540px) { .nav__links { gap: var(--size-4); } .nav__links a { font-size: 0.85rem; } } /* Main */ main { flex: 1; padding: var(--size-16) 0 var(--size-24); } /* Footer */ .footer { border-top: 1px solid var(--color-border); padding: var(--size-8) 0; margin-top: var(--size-16); color: var(--color-muted); font-size: 0.9rem; } .footer__inner { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--size-6); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--size-4); } .footer__socials { display: flex; gap: var(--size-4); list-style: none; padding: 0; margin: 0; } .footer__socials a { border-bottom: none; } .footer__socials a:hover { color: var(--color-accent); } /* ---------- 5. Components ----------------------------------- */ /* Hero */ .hero { padding: var(--size-16) 0 var(--size-12); } .hero__eyebrow { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--size-4); } .hero__title { margin-bottom: var(--size-6); } .hero__lede { font-size: 1.2rem; color: var(--color-muted); max-width: 560px; } /* Sections */ .section + .section { margin-top: var(--size-16); } .section__title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--size-8); padding-bottom: var(--size-3); border-bottom: 1px solid var(--color-border); } .section__title a { font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-muted); border-bottom: none; } .section__title a:hover { color: var(--color-accent); } /* Lists (articles / projects) */ .list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .list__item { display: flex; flex-direction: column; gap: var(--size-2); padding: var(--size-6) 0; border-bottom: 1px solid var(--color-border); } .list__item:last-child { border-bottom: none; } .list__item a { border-bottom: none; display: flex; flex-direction: column; gap: var(--size-2); } .list__item a:hover .list__title { color: var(--color-accent); } .list__meta { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); } .list__title { font-family: var(--font-sans); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; transition: color var(--transition); } .list__desc { color: var(--color-muted); margin: 0; font-size: 0.95rem; } /* Connect ------- The compact "Let's connect!" block that opens the home page in place of a traditional hero. A small headline above a centred row of outline icons + uppercase labels. Quieter than a hero — the page's voice is in the manifesto below. */ .connect { padding: var(--size-12) 0 var(--size-8); text-align: center; } .connect__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-8); margin: 0; padding: 0; } .connect__links a { display: inline-flex; flex-direction: column; align-items: center; gap: var(--size-3); padding: var(--size-2) var(--size-3); color: var(--color-muted); border-bottom: none; transition: color var(--transition); } .connect__links a:hover { color: var(--color-accent); } .connect__links svg { width: 28px; height: 28px; display: block; } .connect__links span { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } @media (max-width: 420px) { .connect__links { gap: var(--size-6); } .connect__links svg { width: 24px; height: 24px; } .connect__links span { font-size: 0.65rem; letter-spacing: 0.15em; } } /* Home intro ---------- The manifesto that opens the home page above the connect icons: a pulled quote (Blue Eye Samurai) followed by a short personal note. Narrow measure, left-aligned, deliberately quiet. */ .intro { max-width: 620px; margin: var(--size-12) auto; font-size: 1.05rem; line-height: 1.75; } .intro__heading { font-family: var(--font-sans); font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 var(--size-8); } .intro__heading b { font-weight: 700; color: var(--color-accent); } .intro__quote { margin: 0 0 var(--size-8); padding-left: var(--size-4); border-left: 2px solid var(--color-accent); color: var(--color-muted); font-style: italic; } .intro__quote cite { display: block; margin-top: var(--size-4); font-style: normal; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-faint); } .intro p { margin: 0 0 var(--size-4); } .intro p:last-child { margin-bottom: 0; } /* Manifesto --------- The four-paragraph intro that sits before the project list (on /projects/) and above the projects preview (on /). Slightly larger serif body, narrow measure, a single hairline rule on top to separate it from whatever comes before. Deliberately quiet — the words carry the page, not the chrome. */ .manifesto { max-width: 580px; margin: var(--size-12) 0 var(--size-8); font-size: 1.05rem; line-height: 1.75; counter-reset: note; } .manifesto p { position: relative; padding-left: 3rem; margin: 0 0 var(--size-6); counter-increment: note; } .manifesto p:last-of-type { margin-bottom: 0; } .manifesto p::before { content: counter(note, decimal-leading-zero); position: absolute; left: 0; bottom: 0; font-family: var(--font-sans); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.25em; color: var(--color-faint); line-height: 1; } /* Article cards ------------- Home page cards for recent articles. Header + preview + meta line (date / read time / image count). Roomier than .list__item — meant for skimming a small set on the home page. */ .article-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .article-card { border-bottom: 1px solid var(--color-border); } .article-card:last-child { border-bottom: none; } .article-card a { display: flex; flex-direction: column; gap: var(--size-3); padding: var(--size-6) 0; border-bottom: none; } .article-card a:hover .article-card__title { color: var(--color-accent); } .article-card__title { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0; transition: color var(--transition); } .article-card__preview { margin: 0; color: var(--color-muted); font-size: 0.98rem; line-height: 1.55; } .article-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--size-2); font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-faint); } .article-card__meta time { font-variant-numeric: tabular-nums; } /* Project previews ---------------- Each preview adopts the parent project's visual identity. The base .project-card class just gives a card frame; per-project modifier classes (.project-card--) bring in palette, typography, ornament. Add a new modifier when shipping a new project — the home page card should match its detail page. */ .project-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--size-4); } .section > .project-list:first-child { margin-top: var(--size-8); } .project-card { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition); } .project-card a { display: block; padding: var(--size-12) var(--size-8); border-bottom: none; } /* --japan : borrows the PRJ.JPN identity from /projects/japan/. Cream paper, Futura caps title, Hi-no-Maru red dot, Cormorant italic subtitle. Tokens duplicated here on purpose — the home page must not depend on the project's own stylesheet. */ .project-card--japan { background: light-dark(#f4f1ea, #191815); border-color: light-dark(#d8d2c4, #2a2723); } .project-card--japan:hover { border-color: light-dark(#bc002d, #dc143c); } .project-card--japan .project-card__title { font-family: "Futura", "Jost", sans-serif; font-weight: 700; font-size: clamp(2.5rem, 7vw, 4rem); letter-spacing: -0.01em; line-height: 0.95; margin: 0; color: light-dark(#181818, #ece7da); } .project-card--japan .project-card__title .dot { color: light-dark(#bc002d, #dc143c); } .project-card--japan .project-card__subtitle { font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1rem; line-height: 1.4; color: light-dark(#6e6a62, #8c8678); margin: var(--size-3) 0 0; max-width: 22rem; } /* --generative : Creative Coding. A programmatic stack of parallel horizontal ridgelines, drawn with p5.js by /assets/js/generative-preview.js. The lines are stroked only (no fill), so the canvas is transparent and the black card surface shows through; just the ridgelines are painted in --card-line (white). Fixed white-on- black "Unknown Pleasures" palette on both themes — Futura-bold white title over a clean upper band; light-gray subtitle in the site body serif. */ .project-card--generative { position: relative; background: #000; border-color: #2a2a2a; --card-line: #f0f0f0; } .project-card--generative:hover { border-color: var(--color-accent); } .project-card--generative .project-card__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .project-card--generative .project-card__canvas canvas { display: block; width: 100%; height: 100%; } .project-card--generative a { position: relative; z-index: 1; } .project-card--generative .project-card__title { font-family: "Futura", "Jost", sans-serif; font-weight: 700; /* Same type scale as PRJ.JPN's title so both preview cards size from one rule and stand the same height in the list. "Creative Coding" still fits one line at the 4rem desktop cap and through the 7vw range. */ font-size: clamp(2.5rem, 7vw, 4rem); letter-spacing: -0.01em; line-height: 0.95; margin: 0; color: #fff; } .project-card--generative .project-card__subtitle { font-family: var(--font-serif); font-weight: 400; font-size: 1.1rem; line-height: 1.4; color: #b3b3b3; margin: var(--size-3) 0 0; max-width: 22rem; } /* Article body */ .article { padding: var(--size-8) 0; } .article__header { margin-bottom: var(--size-12); } .article__meta { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); margin-bottom: var(--size-4); } .article__title { margin-bottom: var(--size-4); } .article__lede { font-size: 1.15rem; color: var(--color-muted); } .prose > * + * { margin-top: var(--size-4); } .prose h2 { margin-top: var(--size-12); margin-bottom: var(--size-4); } .prose h3 { margin-top: var(--size-8); margin-bottom: var(--size-2); } .prose blockquote { border-left: 2px solid var(--color-accent); padding-left: var(--size-4); margin: var(--size-6) 0; color: var(--color-muted); font-style: italic; font-size: 1.2rem; line-height: 1.5; } .prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-accent-soft); padding: 0.15em 0.4em; border-radius: 4px; } .prose pre { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--size-4); border-radius: var(--radius); overflow-x: auto; } .prose pre code { background: none; padding: 0; } .prose hr { border: none; border-top: 1px solid var(--color-border); margin: var(--size-12) 0; } /* Theme switcher (Custom Element ) */ theme-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--color-border); border-radius: 100px; background: var(--color-surface); } .theme-switcher__btn { appearance: none; background: transparent; border: 0; padding: 6px 10px; border-radius: 100px; color: var(--color-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--transition), background var(--transition); } .theme-switcher__btn:hover { color: var(--color-text); } .theme-switcher__btn[aria-pressed="true"] { color: var(--color-text); background: var(--color-bg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); } .theme-switcher__btn svg { width: 16px; height: 16px; display: block; } .theme-switcher__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ---------- 6. Utilities ------------------------------------ */ .muted { color: var(--color-muted); } .accent { color: var(--color-accent); } .serif { font-family: var(--font-serif); } .mono { font-family: var(--font-mono); } .tag { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 100px; padding: 2px 10px; } @media (prefers-reduced-motion: no-preference) { .fade-in { animation: fade-in 600ms cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } }