/* ========================================================= Brutalist single-screen portfolio — bento grid. All sections visible at once. Click one to focus it; the others blur. Coral-red accent + acid-yellow focus fill. Light & dark themes via data-theme on . Re-theme via the custom properties in :root. ========================================================= */ :root { --bg: #e9e7e0; /* paper */ --bg-2: #f4f2ec; /* lighter surface */ --ink: #0a0a0a; /* near-black: text + gridlines */ --ink-dim: #555149; /* muted text */ --accent: #ff3b30; /* coral red */ --on-accent: #ffffff; /* text on accent */ --pop: #e8ff00; /* acid yellow detail */ /* Selected-panel tokens — fixed in BOTH themes so the yellow fill always carries dark text + a readable coral highlight. */ --active-bg: #e8ff00; --active-ink: #0a0a0a; --active-accent: #ff3b30; --active-field: #fdfdfb; --display: "Archivo", "Arial Narrow", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, Consolas, monospace; --gutter: clamp(0.9rem, 2.5vw, 2rem); --grid-gap: 2px; --line: 2px solid var(--ink); --ease: cubic-bezier(0.4, 0.05, 0.1, 1); --topbar: 52px; --footbar: 36px; color-scheme: light; } /* ---------- Dark theme: ink↔bg flip (lines go light on dark) ---------- */ :root[data-theme="dark"] { --bg: #16150f; /* dark paper */ --bg-2: #201f17; /* raised surface */ --ink: #f2efe6; /* light: text + gridlines */ --ink-dim: #9d978a; /* muted text */ --accent: #ff5a4d; /* brighter coral for dark */ --on-accent: #ffffff; --pop: #e8ff00; color-scheme: dark; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 0.95rem; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, dl { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Archivo needs explicit weights — keep display/hero text on the lighter side */ .brand, .stats dd, .proj-name, .stack-k, .contact-email { font-weight: 700; } .statement, .contact-title { font-weight: 600; } .skip-link { position: absolute; left: -999px; top: 0.4rem; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 0.5rem 1rem; font-weight: 700; font-size: 0.8rem; } .skip-link:focus { left: 0.4rem; } /* ---------- Full-layout flow-field background ---------- */ /* Fixed paper (or dark) canvas behind everything; panels float over it as translucent tiles so the drift shows through every section. */ #flowfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.75; } /* ---------- Stage ---------- */ .stage { position: relative; z-index: 1; height: 100svh; display: flex; flex-direction: column; background: transparent; gap: var(--grid-gap); } .topbar, .footbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); gap: 1rem; background: var(--bg); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(3px); } .topbar { height: var(--topbar); border-bottom: var(--line); } .footbar { height: var(--footbar); border-top: var(--line); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--ink-dim); text-transform: uppercase; } .footbar .hint { color: var(--accent); font-weight: 700; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; } .brand-box { width: 14px; height: 14px; background: var(--accent); } .topbar-meta { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-dim); text-transform: uppercase; } /* ---------- Theme toggle ---------- */ .topbar-right { display: inline-flex; align-items: center; gap: clamp(0.6rem, 2vw, 1rem); min-width: 0; } .theme-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; border: var(--line); background: var(--bg); color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 0.36rem 0.6rem; transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease); } .theme-toggle:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); } .theme-toggle:active { transform: none; box-shadow: none; } /* moon (light mode) → crescent via inset notch */ .theme-ico { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: inset -4px -3px 0 0 var(--bg); } /* sun (dark mode) → full yellow disc */ :root[data-theme="dark"] .theme-ico { background: var(--pop); box-shadow: none; } /* ---------- Bento grid ---------- */ .panels { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--grid-gap); background: transparent; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1.15fr 1fr 1fr; grid-template-areas: "home home work" "about stack work" "about contact contact"; /* animate the layout when the active section grows wider */ transition: grid-template-columns 0.45s var(--ease), grid-template-rows 0.45s var(--ease); } /* The active section expands — its column/row tracks grow, the rest shrink. (Desktop only; mobile is a single column.) */ @media (min-width: 821px) { .panels:has([data-panel="home"].is-active) { grid-template-columns: 1.7fr 1fr 0.75fr; grid-template-rows: 1.55fr 0.8fr 0.8fr; } .panels:has([data-panel="about"].is-active) { grid-template-columns: 1.9fr 0.8fr 0.8fr; grid-template-rows: 0.85fr 1.05fr 1.05fr; } .panels:has([data-panel="work"].is-active) { grid-template-columns: 1fr 0.8fr 1.7fr; } .panels:has([data-panel="stack"].is-active) { grid-template-columns: 0.95fr 1.6fr 0.85fr; grid-template-rows: 0.8fr 1.6fr 0.8fr; } .panels:has([data-panel="contact"].is-active) { grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: 0.85fr 0.8fr 1.7fr; } } .panel[data-panel="home"] { grid-area: home; } .panel[data-panel="about"] { grid-area: about; } .panel[data-panel="work"] { grid-area: work; } .panel[data-panel="stack"] { grid-area: stack; } .panel[data-panel="contact"] { grid-area: contact; } .panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; /* transparent tile so the fixed flow field shows through at full strength behind the content; ring draws the gridline. */ background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); display: flex; flex-direction: column; transition: filter 0.4s var(--ease), opacity 0.4s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease); } /* focus behaviour: blur everything that isn't active */ .panels.has-active .panel:not(.is-active) { filter: blur(3.5px) grayscale(0.5); opacity: 0.4; } .panel:not(.is-active) { cursor: pointer; } /* selected → acid-yellow fill, dark text (identical in light & dark) */ .panel.is-active { background: var(--active-bg); color: var(--active-ink); z-index: 2; } /* ---------- Panel head (toggle) ---------- */ .panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; border-bottom: var(--line); padding: 0.55rem var(--gutter); color: inherit; font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } .p-num { color: var(--accent); } .panel.is-active .panel-head { border-color: var(--on-accent); } .panel.is-active .p-num { color: var(--pop); } .panel:not(.is-active):hover .panel-head { background: var(--ink); color: var(--bg); } .panel:not(.is-active):hover .p-num { color: var(--accent); } /* No scrollbars in the resting collage; a focused panel may scroll if it must. */ .panel-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: var(--gutter); } .panel.is-active .panel-body { overflow: auto; } /* ---------- Home ---------- */ .home-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } .status-dot { width: 9px; height: 9px; background: var(--accent); } .is-active .eyebrow { color: var(--on-accent); } .is-active .status-dot { background: var(--pop); } .big-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 5.5vw, 4rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0; text-transform: uppercase; white-space: nowrap; } .home-lede { max-width: 34ch; font-size: 0.82rem; color: var(--ink-dim); margin: 0; line-height: 1.5; } .is-active .home-lede { color: rgba(255,255,255,0.85); } .home-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-family: var(--mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; padding: 0.7rem 1.1rem; border: var(--line); background: var(--bg); color: var(--ink); transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.18s, color 0.18s; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } .btn:active { transform: translate(0, 0); box-shadow: none; } .btn-fill { background: var(--accent); color: var(--on-accent); border-color: var(--ink); } .btn-line { background: var(--bg); } .is-active .btn { box-shadow: none; } .is-active .btn-fill { background: var(--ink); color: var(--on-accent); } .is-active .btn:hover { box-shadow: 4px 4px 0 var(--ink); } /* ---------- Image placeholders ---------- */ .ph { position: relative; width: 100%; background: var(--bg-2); border: var(--line); display: grid; place-items: center; color: var(--ink-dim); overflow: hidden; } .ph::after { /* brutalist X-cross */ content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ink) 50%, transparent calc(50% + 1px)), linear-gradient(to bottom left, transparent calc(50% - 1px), var(--ink) 50%, transparent calc(50% + 1px)); opacity: 0.12; } .ph-label { position: relative; z-index: 1; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; } .ph[data-ratio="portrait"] { aspect-ratio: 4 / 5; } .about-portrait img { width: 100%; height: 100%; object-fit: cover; } /* ---------- About ---------- */ .statement { font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 1rem; text-transform: uppercase; } .statement em { font-style: normal; color: var(--accent); } .is-active .statement em { color: var(--pop); } .about-row { display: flex; gap: 1rem; align-items: flex-start; } .muted { color: var(--ink-dim); font-size: 0.8rem; margin: 0; flex: 1 1 auto; } .is-active .muted { color: rgba(255,255,255,0.85); } .about-portrait { flex: 0 0 clamp(90px, 12vw, 130px); } .stats { display: flex; gap: 1.5rem; margin-top: 1rem; padding-top: 0.9rem; border-top: var(--line); } .is-active .stats { border-color: var(--on-accent); } .stats dd { margin: 0; font-family: var(--display); font-size: 1.8rem; line-height: 1; color: var(--accent); } .is-active .stats dd { color: var(--pop); } .stats dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-dim); margin-top: 0.25rem; } .is-active .stats dt { color: rgba(255,255,255,0.8); } /* ---------- Work ---------- */ .proj-list { display: flex; flex-direction: column; } .proj { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0; border-bottom: var(--line); transition: padding-left 0.18s var(--ease); } .proj:last-child { border-bottom: 0; } .proj:hover { padding-left: 0.5rem; } /* square bullet — same brutalist mark as .brand-box / .status-dot */ .proj-bullet { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.45rem; background: var(--accent); } .proj:hover .proj-bullet { background: var(--ink); } .is-active .proj-bullet { background: var(--active-accent); } .proj-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .proj-name { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.9vw, 1.4rem); line-height: 1.05; text-transform: uppercase; } .proj-desc { font-size: 0.7rem; color: var(--ink-dim); margin-top: 0.3rem; line-height: 1.45; } .is-active .proj-desc { color: var(--active-ink); } .proj-tags { font-size: 0.62rem; color: var(--accent); margin-top: 0.35rem; letter-spacing: 0.04em; font-weight: 700; } .is-active .proj-tags { color: var(--active-accent); } .proj-year { font-size: 0.74rem; font-weight: 700; flex: 0 0 auto; } .is-active .proj { border-color: var(--active-ink); } /* ---------- Stack ---------- */ .stack-list { display: flex; flex-direction: column; gap: 0.5rem; } .stack-list li { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.5rem; border-bottom: var(--line); font-size: 0.8rem; } .stack-list li:last-child { border-bottom: 0; } .is-active .stack-list li { border-color: var(--on-accent); } .stack-k { flex: 0 0 auto; font-family: var(--display); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.04em; } .is-active .stack-k { color: var(--pop); } /* ---------- Contact ---------- */ .contact-body { display: flex; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; } .contact-left { flex: 1 1 220px; } .contact-title { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 0.9; margin: 0 0 0.75rem; text-transform: uppercase; } .contact-email { display: inline-block; font-family: var(--display); font-size: clamp(1rem, 2vw, 1.4rem); border-bottom: 3px solid var(--accent); padding-bottom: 2px; } .is-active .contact-email { border-color: var(--pop); } .contact-socials { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1rem; } .contact-socials a { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; border-bottom: 2px solid transparent; } .contact-socials a:hover { border-color: currentColor; } .contact-form { flex: 1 1 240px; display: flex; flex-direction: column; gap: 0.6rem; } .field { display: flex; flex-direction: column; gap: 0.2rem; } .field label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-dim); } .is-active .field label { color: rgba(255,255,255,0.8); } .field input, .field textarea { background: var(--bg-2); border: var(--line); color: var(--ink); font: inherit; font-size: 0.8rem; padding: 0.45rem 0.55rem; resize: none; } .field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; } .is-active .field input, .is-active .field textarea { background: rgba(255,255,255,0.95); border-color: var(--on-accent); } .contact-form .btn { align-self: flex-start; } .form-note { font-size: 0.7rem; font-weight: 700; color: var(--accent); min-height: 1em; margin: 0; } .is-active .form-note { color: var(--pop); } /* ---------- Richness: ghost numerals, depth, hover affordance ---------- */ /* keep real content above the giant background numeral */ .panel-body, .panel-head { position: relative; z-index: 1; } /* oversized, faded section number bleeding off the corner (brutalist) */ .panel::before { position: absolute; right: -0.06em; bottom: -0.22em; z-index: 0; font-family: var(--display); font-size: clamp(5rem, 13vw, 10rem); line-height: 1; color: var(--ink); opacity: 0.05; pointer-events: none; transition: opacity 0.35s var(--ease), color 0.35s var(--ease); } .panel[data-panel="home"]::before { content: "00"; } .panel[data-panel="about"]::before { content: "01"; } .panel[data-panel="work"]::before { content: "02"; } .panel[data-panel="stack"]::before { content: "03"; } .panel[data-panel="contact"]::before { content: "04"; } .panel.is-active::before { opacity: 0.1; color: var(--active-ink); } /* active panel lifts off the grid for depth */ .panel.is-active { box-shadow: 0 12px 34px rgba(10, 10, 10, 0.22); } /* hovering a blurred panel previews it: sharpen + brighten */ .panels.has-active .panel:not(.is-active):hover { filter: blur(1px) grayscale(0.15); opacity: 0.85; } /* ---------- Responsive ---------- */ /* Tablet / small laptop: keep the bento but ease the proportions. */ @media (min-width: 821px) and (max-width: 1100px) { .panels { grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 1.1fr 1fr 1fr; } :root { --topbar: 48px; } } /* Stacked single column — content flows, the page scrolls. */ @media (max-width: 820px) { body { overflow: auto; } .stage { height: auto; min-height: 100svh; } .panels { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "home" "about" "work" "stack" "contact"; } /* let content set the height and the page scroll — no inner clipping */ .panel { min-height: auto; overflow: visible; } .panel-body { overflow: visible; } .panels.has-active .panel:not(.is-active) { filter: blur(2px) grayscale(0.35); opacity: 0.55; } .panel.is-active { box-shadow: none; } .topbar-meta { display: none; } .home-body { min-height: 56vh; } /* hero still feels full-height */ } /* Phones. */ @media (max-width: 560px) { :root { --gutter: 1.1rem; } .topbar { height: auto; padding-block: 0.5rem; } .about-row { flex-direction: column; } .about-portrait { flex: 0 0 auto; width: 60%; max-width: 200px; } .contact-body { flex-direction: column; } .contact-form { flex-basis: auto; } .stats { gap: 1.1rem; } .stats dd { font-size: 1.5rem; } .home-actions { width: 100%; } .home-actions .btn { flex: 1 1 auto; justify-content: center; } .footbar .hint { display: none; } .footbar { justify-content: center; } } /* Tiny phones: drop the toggle label to just the icon, tighten type. */ @media (max-width: 380px) { .theme-label { display: none; } .theme-toggle { padding: 0.4rem; } .brand { font-size: 0.9rem; } .proj { gap: 0.5rem; } .ph-mini { width: 34px; height: 26px; } } /* ---------- Active = acid-yellow fill: keep content legible ---------- Uses the fixed --active-* tokens so the selected panel reads the same in light AND dark mode: dark text + coral highlights on yellow. (Placed last so it overrides the earlier white-on-fill rules.) */ .panel.is-active .panel-head { border-color: var(--active-ink); } .panel.is-active .p-num, .is-active .statement em, .is-active .stats dd, .is-active .stack-k, .is-active .form-note { color: var(--active-accent); } .is-active .status-dot { background: var(--active-accent); } .is-active .eyebrow, .is-active .home-lede, .is-active .muted, .is-active .stats dt, .is-active .proj-desc, .is-active .field label { color: var(--active-ink); } .is-active .stats, .is-active .proj, .is-active .stack-list li { border-color: var(--active-ink); } .is-active .contact-email { border-color: var(--active-ink); } .is-active .field input, .is-active .field textarea { background: var(--active-field); border-color: var(--active-ink); color: var(--active-ink); } /* filled button on the yellow panel stays a fixed dark chip (both themes) */ .is-active .btn-fill { background: var(--active-ink); color: #fff; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } #flowfield { display: none; } }