/* ==========================================================================
known_signal: style.css (shared by index, portfolio and about)
Mobile-first. The base rules are the phone layout; the @media blocks only
add what changes on bigger screens.
Contents
0. Font files (@font-face) <- swap the typeface here
1. Tokens (colors, fonts, bevels) <- re-theme here
2. Base + helpers
3. Icons
4. Buttons
5. Header (wordmark, path, boot bar)
6. Menu popover
7. Window shell (titlebar, body, well) <- used on every page
8. Greeting window + action row (home)
9. Workspace + floating canvas <- the "window manager" layout
10. Artwork windows
11. About: control-panel (tabs, meters, slider, properties)
========================================================================== */
/* 0. FONT FILES
--------------------------------------------------------------------------
Put the font files in the fonts/ folder next to this file. The browser
tries each src left to right and uses the first that loads, so the .woff2
is used once it exists and the .ttf covers you until then. */
@font-face {
font-family: "Terminess";
src: url("fonts/terminess-regular.woff2") format("woff2"),
url("fonts/TerminessNerdFontPropo-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Optional real italic for the path readout. Uncomment only once the file
exists, or italic text falls back to generic monospace.
@font-face {
font-family: "Terminess";
src: url("fonts/terminess-italic.woff2") format("woff2"),
url("fonts/TerminessNerdFontPropo-Italic.ttf") format("truetype");
font-weight: 400; font-style: italic; font-display: swap;
}
*/
/* 1. TOKENS
-------------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* surfaces */
--void: #020a0f;
--panel: #061923;
--slab: #0b1f2c;
/* text */
--cream: #f5e6d3;
--bright: #fff6ec;
--steel: #3a5568;
/* signal colors */
--blue: #12305c;
--blue-hi: #1c4a8c;
--amber: #ffb84d;
--cyan: #1ad4f0;
--warn: #db662d;
/* the four lines that make up every bevel */
--hi: #4a6a80;
--hi2: #1e3a4d;
--lo: #000000;
--lo2: #03101a;
/* fonts (see section 0 for the file) */
--font-display: "Terminess", ui-monospace, "Cascadia Mono", Menlo, monospace;
--font-ui: "Terminess", ui-monospace, "Cascadia Mono", Menlo, monospace;
/* Light comes from the upper left. No blur anywhere. */
--bevel-raised:
inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo),
inset 2px 2px 0 var(--hi2), inset -2px -2px 0 var(--lo2);
--bevel-sunken:
inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi),
inset 2px 2px 0 var(--lo2), inset -2px -2px 0 var(--hi2);
/* layout knobs */
--page-pad: 1rem;
--edge: clamp(1rem, 4vw, 4rem); /* gap from the left screen edge to the main window */
--win-w: 22rem; /* width of a floating window on desktop */
--step: 2.25rem; /* cascade offset between stacked windows */
/* Dither grain. --dither-cell is the pixel size of one tile: smaller =
finer, denser, more holes. --dither-ink is the color of the dots. */
--dither-cell: 2px;
--dither-ink: var(--void);
/* Background field (script.js section 1d). Three tones that sit just above
the void so the characters read as a faint glow, not a pattern. Raise
them to make the field louder, lower them to make it vanish. */
--field-1: #06141d; /* faintest characters */
--field-2: #0a2233; /* mid */
--field-3: #123152; /* peak, the brightest it ever gets */
}
/* 2. BASE + HELPERS
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--void);
color: var(--cream);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr;
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.5;
}
a { color: var(--cyan); }
::selection { background: var(--blue-hi); color: var(--bright); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sr-only {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
/* 3. ICONS
-------------------------------------------------------------------------- */
/* Shapes live in one hidden sprite at the top of each HTML file.
Every icon is . */
.icon {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
shape-rendering: crispEdges;
}
/* 4. BUTTONS
-------------------------------------------------------------------------- */
.btn {
--pad-y: .5rem;
--pad-x: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3rem;
padding: var(--pad-y) var(--pad-x);
border: 0;
border-radius: 0;
background: var(--slab);
color: var(--cream);
box-shadow: var(--bevel-raised);
font-family: var(--font-display);
font-size: .9375rem;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .btn:hover { color: var(--bright); } }
/* Pressed = sunken + blue fill + amber text, label drops 1px. */
.btn:active {
background: var(--blue);
color: var(--amber);
box-shadow: var(--bevel-sunken);
padding: calc(var(--pad-y) + 1px) calc(var(--pad-x) - 1px)
calc(var(--pad-y) - 1px) calc(var(--pad-x) + 1px);
}
.btn--menu { letter-spacing: .4em; text-indent: .4em; }
/* Square icon-only button (the restore-windows one in the header). */
.btn--icon {
--pad-x: .25rem;
--pad-y: .25rem;
width: 3rem;
padding: .25rem;
}
.btn--icon .icon { width: 1.25rem; height: 1.25rem; }
/* The arrow takes a quarter turn, in steps, when you press it. */
.btn--icon .icon { transition: transform .2s steps(4); }
.btn--icon:active .icon { transform: rotate(-90deg); transition: none; }
body:has(#menu:popover-open) .btn--menu {
background: var(--blue);
color: var(--amber);
box-shadow: var(--bevel-sunken);
}
/* 5. HEADER
-------------------------------------------------------------------------- */
.site-header {
position: sticky; /* stays above the floating windows */
top: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "brand menu" "path path";
align-items: center;
gap: .75rem 1rem;
padding: var(--page-pad);
padding-inline: max(var(--page-pad), env(safe-area-inset-left))
max(var(--page-pad), env(safe-area-inset-right));
background: var(--slab);
box-shadow: var(--bevel-raised), 0 2px 0 var(--lo);
}
.brand {
grid-area: brand;
font-family: var(--font-display);
font-size: clamp(1.15rem, 5.2vw, 2.1rem);
line-height: 1;
color: var(--bright);
text-decoration: none;
white-space: nowrap;
}
.header-actions { grid-area: menu; display: flex; gap: .5rem; justify-self: end; }
.path { grid-area: path; }
.path__text {
margin: 0 0 .4rem;
font-size: .8125rem;
font-style: italic;
letter-spacing: .04em;
}
.segbar {
display: flex;
gap: 3px;
height: 2rem;
padding: 3px;
background: var(--void);
box-shadow: var(--bevel-sunken);
}
.segbar__blocks { flex: 1; display: flex; gap: 2px; }
.segbar__blocks i { flex: 1; background: var(--blue); }
.segbar__check {
display: grid; place-items: center;
width: 1.5rem; background: var(--amber); color: var(--void);
}
/* script.js adds .is-booting while it counts the blocks up. */
.segbar.is-booting .segbar__blocks i:not(.on) { background: var(--panel); }
.segbar.is-booting .segbar__check { visibility: hidden; }
@media (min-width: 48rem) {
.site-header {
grid-template-columns: 1fr minmax(18rem, 30rem) 1fr;
grid-template-areas: "brand path menu";
}
}
/* 6. MENU POPOVER
-------------------------------------------------------------------------- */
.menu {
width: min(20rem, calc(100% - 2rem));
padding: 0;
border: 0;
color: var(--cream);
overflow: hidden;
box-shadow: var(--bevel-raised), 0 0 0 2px var(--lo);
}
/* Full-screen dither that dims the page and pulls focus to the menu.
A dark wash for overall darkness, plus a fine 75%-coverage checker
(three dark quadrants per tile, one tiny hole) for the dense grain. */
.menu::backdrop {
background-color: rgba(0, 0, 0, .45);
background-image:
conic-gradient(var(--dither-ink) 0 75%, transparent 0);
background-size: var(--dither-cell) var(--dither-cell);
}
.menu__list { list-style: none; margin: 0; padding: .5rem; }
.menu__list a,
.menu__list button {
display: block;
width: 100%;
padding: .875rem 1rem;
border: 0;
border-left: 4px solid transparent;
background: none;
color: var(--cream);
font-family: var(--font-display);
font-size: 1.0625rem;
letter-spacing: .08em;
text-align: left;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
}
.menu__list a:hover, .menu__list a:focus-visible,
.menu__list button:hover, .menu__list button:focus-visible {
background: var(--blue);
border-left-color: var(--amber);
color: var(--bright);
}
/* current page */
.menu__list [aria-current="page"] {
border-left-color: var(--amber);
color: var(--amber);
}
/* 7. WINDOW SHELL
-------------------------------------------------------------------------- */
.window { background: var(--slab); box-shadow: var(--bevel-raised); }
.titlebar {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: space-between;
gap: .25rem;
min-height: 2.75rem;
padding: .25rem;
background: linear-gradient(90deg, var(--panel) 0 20%, var(--blue) 20% 100%);
box-shadow: inset 0 -2px 0 var(--lo);
}
/* Dithered fade across the titlebar: dense at the left, thinning to the right.
Both layers use the fine --dither-cell grain in dark ink.
::before = 75%-coverage grain (heavy) over the left ~60%
::after = 50%-coverage grain (lighter) carrying it to ~85%
The two overlap so the density steps down smoothly. */
.titlebar::before, .titlebar::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.titlebar::before {
background: conic-gradient(var(--dither-ink) 0 75%, transparent 0) 0 0 / var(--dither-cell) var(--dither-cell);
mask-image: linear-gradient(90deg, #000 0 35%, transparent 62%);
}
.titlebar::after {
background: conic-gradient(var(--dither-ink) 25%, transparent 0 50%, var(--dither-ink) 0 75%, transparent 0) 0 0 / var(--dither-cell) var(--dither-cell);
mask-image: linear-gradient(90deg, transparent 0 30%, #000 55% 78%, transparent 88%);
}
.titlebar__title {
padding-left: .5rem;
font-family: var(--font-display);
font-size: .9375rem;
letter-spacing: .08em;
color: var(--bright);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.titlebar__controls { display: flex; gap: .25rem; margin-left: auto; }
.winbtn {
display: grid; place-items: center;
width: 2.25rem; height: 2.25rem;
padding: 0; border: 0; border-radius: 0;
background: var(--slab); color: var(--bright);
box-shadow: var(--bevel-raised);
cursor: pointer; touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.winbtn:active { background: var(--blue); color: var(--amber); box-shadow: var(--bevel-sunken); }
.winbtn[aria-disabled="true"] { color: var(--steel); cursor: default; }
.window__body { padding: .5rem; }
.window.is-minimized .window__body { display: none; }
.window.is-closed { display: none; }
.well {
padding: 1rem;
background: var(--void);
box-shadow: var(--bevel-sunken);
text-align: center;
}
/* 8. GREETING WINDOW + ACTION ROW (home)
-------------------------------------------------------------------------- */
.well__label {
margin: 0 0 1.5rem;
color: var(--warn);
font-size: .8125rem;
letter-spacing: .04em;
text-align: left;
}
.msg {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.05rem, 4.2vw, 1.45rem);
line-height: 1.4;
color: var(--bright);
}
.msg h1, .msg p { margin: 0; font: inherit; }
.msg > span { display: block; }
.meter {
--fill: 30%;
height: 8px;
margin: 1.5rem 0;
border: 0;
background: linear-gradient(90deg, var(--blue-hi) var(--fill), transparent 0), var(--panel);
box-shadow: var(--bevel-sunken);
}
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-top: .5rem;
}
.actions .btn { order: 1; }
.hint {
order: 2;
grid-column: 1 / -1;
display: grid; place-items: center;
margin: 0; padding: .5rem;
background: var(--void);
box-shadow: var(--bevel-sunken);
color: var(--warn);
font-size: .8125rem;
letter-spacing: .04em;
text-align: center;
}
@media (min-width: 40rem) {
.actions { grid-template-columns: auto 1fr auto; }
.actions .btn:first-child { order: 0; }
.actions .btn:last-child { order: 2; }
.hint { order: 1; grid-column: auto; }
}
/* 9. WORKSPACE + FLOATING CANVAS
--------------------------------------------------------------------------
Phone & tablet: one tidy column, every window full width, in normal flow.
Desktop (>=72rem): the canvas becomes a positioned area and the windows
inside it float and overlap. script.js then raises the one you click and
lets you drag it by its titlebar. */
main {
display: grid;
align-content: start;
justify-items: stretch;
padding: 1.5rem var(--page-pad) 3rem;
}
.workspace { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
.canvas { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 72rem) {
main { justify-items: start; }
/* HOME: greeting window offset from the left, canvas fills the rest. */
.workspace--home { flex-direction: row; align-items: flex-start; gap: var(--edge); }
.workspace--home > .window--main {
flex: 0 0 38rem;
max-width: 44vw;
margin-left: var(--edge);
}
.workspace--home > .canvas { flex: 1 1 auto; }
/* The canvas is now a free-floating surface. Its children are absolute. */
.canvas {
position: relative;
display: block;
min-height: var(--canvas-h, 44rem);
}
.canvas > .window {
position: absolute;
width: var(--win-w);
/* Position each window one of two ways:
- give it --x / --y (inline) to place it exactly (a scatter), or
- give it --i and it falls into a cascade, stepping down-right.
--x is a % of the canvas width; --y is in rem.
min() keeps a window fully on-screen: it never sits so far right
that its 22rem body spills past the canvas edge. */
left: min(var(--x, calc(1rem + var(--i, 0) * var(--step))),
100% - var(--win-w) - 1rem);
top: var(--y, calc(1rem + var(--i, 0) * var(--step)));
}
.canvas > .window.is-active { box-shadow: var(--bevel-raised), 0 0 0 2px var(--amber); }
.canvas .titlebar { cursor: move; touch-action: none; } /* draggable handle */
/* Portfolio holds more windows, so it needs a taller surface. */
.canvas--portfolio { --canvas-h: 54rem; }
}
/* 10. ARTWORK WINDOWS
-------------------------------------------------------------------------- */
.well--art { margin: 0; padding: 4px; text-align: start; }
.well--art img { display: block; width: 100%; height: auto; }
/* 11. ABOUT: CONTROL PANEL
-------------------------------------------------------------------------- */
.panel-wrap { width: 100%; display: grid; justify-items: center; }
.window--panel { width: min(100%, 56rem); }
/* Notebook tabs. The active tab joins the panel below it. */
.tabs {
display: flex;
flex-wrap: wrap;
gap: .25rem;
padding: .5rem .5rem 0;
}
.tab {
padding: .6rem 1.1rem;
border: 0;
background: var(--slab);
color: var(--cream);
box-shadow: var(--bevel-raised);
font-family: var(--font-display);
font-size: .9375rem;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
}
.tab[aria-selected="true"] {
background: var(--blue);
color: var(--bright);
box-shadow: var(--bevel-raised), inset 0 -3px 0 var(--amber);
}
.tabpanels { padding: .5rem; }
.tabpanel { padding: 1.25rem; background: var(--void); box-shadow: var(--bevel-sunken); }
.tabpanel[hidden] { display: none; }
.tabpanel h2 {
margin: 0 0 1rem;
font-family: var(--font-display);
font-size: 1.0625rem;
letter-spacing: .06em;
color: var(--amber);
}
.tabpanel p { margin: 0 0 1rem; max-width: 60ch; }
.tabpanel p:last-child { margin-bottom: 0; }
/* Properties sheet: label / value rows, like a Win98 settings list. */
.props { display: grid; gap: 2px; margin: 0 0 1rem; }
.props > div {
display: grid;
grid-template-columns: 9rem 1fr;
gap: .5rem;
padding: .55rem .75rem;
background: var(--panel);
}
.props dt { margin: 0; color: var(--cyan); }
.props dd { margin: 0; color: var(--cream); }
@media (max-width: 30rem) {
.props > div { grid-template-columns: 1fr; gap: .1rem; }
}
/* Disclosure button that reveals more text. */
.reveal {
display: inline-flex; align-items: center; gap: .5rem;
margin-top: .25rem; padding: .5rem 1rem;
border: 0; background: var(--slab); color: var(--cream);
box-shadow: var(--bevel-raised);
font-family: var(--font-display); font-size: .875rem; letter-spacing: .04em;
text-transform: uppercase; cursor: pointer;
}
.reveal:active { box-shadow: var(--bevel-sunken); background: var(--blue); color: var(--amber); }
.reveal .icon { transition: transform .12s; }
.reveal[aria-expanded="true"] .icon { transform: rotate(90deg); }
.reveal__target[hidden] { display: none; }
.reveal__target { margin-top: 1rem; }
/* Skill meters: segmented bars (on-brand progress blocks), display only. */
.meters { display: grid; gap: .9rem; margin: 0; }
.meter-row { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.meter-row__head { display: flex; justify-content: space-between; align-items: baseline; }
.meter-row__name { letter-spacing: .04em; }
.meter-row__val { color: var(--amber); font-size: .8125rem; }
.bar {
--val: 50; /* 0..100, set inline per row */
height: 1.25rem;
padding: 3px;
background-color: var(--void);
box-shadow: var(--bevel-sunken);
/* Two layers, both clipped to the content box:
top = the void "gaps" punched every 9px (a 2px-wide void stripe)
base = the blue fill, shown only up to --val% of the width
The gaps sit over the fill, so the fill reads as separate blocks. */
background-image:
repeating-linear-gradient(90deg, transparent 0 7px, var(--void) 7px 9px),
linear-gradient(90deg, var(--blue-hi) 0 calc(var(--val) * 1%), var(--panel) 0);
background-clip: content-box, content-box;
background-origin: content-box;
}
/* Interactive slider (the one that reveals info). Native range, Win98 look. */
.scrubber { margin-top: .5rem; }
.scrubber__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.scrubber__year { color: var(--amber); font-family: var(--font-display); font-size: 1rem; }
.slider98 {
-webkit-appearance: none; appearance: none;
width: 100%; height: 1.75rem; margin: 0;
background: transparent; cursor: pointer;
}
.slider98::-webkit-slider-runnable-track {
height: 10px;
background: linear-gradient(90deg, var(--blue-hi) calc(var(--p, 0) * (100% - 14px) + 7px), transparent 0),
var(--void);
box-shadow: var(--bevel-sunken);
}
.slider98::-moz-range-track {
height: 10px;
background: linear-gradient(90deg, var(--blue-hi) calc(var(--p, 0) * (100% - 14px) + 7px), transparent 0),
var(--void);
box-shadow: var(--bevel-sunken);
}
.slider98::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 24px; margin-top: -7px;
background: var(--amber); box-shadow: var(--bevel-raised);
}
.slider98::-moz-range-thumb {
width: 14px; height: 24px; border: 0; border-radius: 0;
background: var(--amber); box-shadow: var(--bevel-raised);
}
.slider98:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.scrubber__out {
margin-top: .9rem; padding: .9rem 1rem;
background: var(--panel); box-shadow: var(--bevel-sunken);
min-height: 3.5rem;
}
.scrubber__out strong { color: var(--cyan); font-weight: 400; }
/* 12. MOTION
--------------------------------------------------------------------------
script.js drives these: it types the wordmark on load, blinks a caret, and
fires the glitch on the greeting now and then. Everything here is gated by
the reduced-motion block at the very bottom. */
/* Wordmark caret — an amber block that blinks after the typed text.
(Amber = cursor, per the Ghost-Shells palette.) script.js adds .is-typing
while characters are still appearing, which holds the caret steady. */
.brand__caret {
display: inline-block;
width: .5em;
height: 1em;
margin-left: .06em;
translate: 0 .12em; /* sit it on the baseline */
background: var(--amber);
animation: caret-blink 1s steps(1) infinite;
}
.brand.is-typing .brand__caret { animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* Greeting "signal lock" — one quick flicker as the window arrives. */
.window--intro-boot { animation: intro-boot .5s steps(3) 1; }
@keyframes intro-boot {
0% { opacity: .2; }
40% { opacity: 1; }
55% { opacity: .5; }
100% { opacity: 1; }
}
/* Text glitch — chromatic split + jitter + a sliced "artifact" offset.
script.js adds .glitch to a single line for a few hundred ms, then removes
it. The ::after is a clone of the text (its content comes from data-text,
which script.js sets) shoved sideways and clipped to one band. */
.glitch { position: relative; animation: glitch-jitter .3s steps(2) 2; }
.glitch::after {
content: attr(data-text);
position: absolute;
left: 0; top: 0;
width: 100%;
text-align: inherit;
color: var(--cyan);
mix-blend-mode: screen;
clip-path: inset(40% 0 35% 0);
translate: .12em 0;
pointer-events: none;
}
@keyframes glitch-jitter {
0% { transform: translateX(0); text-shadow: none; }
25% { transform: translateX(-2px); text-shadow: .06em 0 var(--warn), -.06em 0 var(--cyan); }
50% { transform: translateX(2px); text-shadow: -.05em 0 var(--amber), .05em 0 var(--cyan); }
75% { transform: translateX(-1px); text-shadow: .04em 0 var(--warn), -.04em 0 var(--cyan); }
100% { transform: translateX(0); text-shadow: none; }
}
/* reduced motion: hold everything still. */
/* Background character field. script.js adds the