/* ============================================================ Jamie Richmond — portfolio "White Velvet" palette · Ill Wind device · warm cream / cool ink ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Newsreader:ital,opsz,wght@1,6..72,300;1,6..72,400&display=swap'); :root{ /* ---- structural (theme-independent) ---- */ --line: color-mix(in srgb, var(--ink) 16%, transparent); --line-soft: color-mix(in srgb, var(--ink) 9%, transparent); /* accent aliases — mapped from the active theme so existing rules theme automatically */ --rust: var(--c-year); --rust-deep: var(--c-year-deep, var(--c-year)); --slate: var(--c-date); --slate-deep: var(--c-date-deep, var(--c-date)); /* career-log mapping: years use one accent, dates the other (swappable) */ --year-col: var(--c-year); --date-col: var(--c-date); /* type */ --grotesque: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --serif: "Newsreader", Georgia, serif; /* metrics */ --gutter: clamp(22px, 5vw, 88px); --maxw: 1180px; } /* ============================================================ THEMES — set on . Default = White Velvet. --c-year = primary accent (YEAR markers, links, the dot) --c-date = secondary accent (DD·MM dates, tags, placeholders) ============================================================ */ :root, :root[data-theme="white-velvet"]{ --paper:#E8E4D3; --paper-deep:#E0DBC9; --paper-raise:#EFEBDF; --ink:#232F32; --ink-2:#57554C; --faint:#9B9889; --c-year:#A84D2C; --c-year-deep:#76341C; --c-date:#5B757C; --c-date-deep:#3F5257; --wc-img:url("wc-white-velvet.png"); } /* Radiohead — sage / olive / earth */ :root[data-theme="radiohead"]{ --paper:#E3E1D4; --paper-deep:#DAD8C8; --paper-raise:#ECEADF; --ink:#2B3434; --ink-2:#5D6059; --faint:#A0A59A; --c-year:#7A7440; --c-year-deep:#5D5A41; --c-date:#5E7375; --c-date-deep:#4A5757; --wc-img:url("wc-radiohead.png"); } /* Mr Morale — warm brown sepia */ :root[data-theme="mr-morale"]{ --paper:#E4DACE; --paper-deep:#DBCFC0; --paper-raise:#EDE4D8; --ink:#2C221F; --ink-2:#74685A; --faint:#A89A8A; --c-year:#915C3F; --c-year-deep:#653F2A; --c-date:#8A6F63; --c-date-deep:#7B635C; --wc-img:url("wc-mr-morale.png"); } /* The Colour In Anything — cool blues */ :root[data-theme="colour-in-anything"]{ --paper:#ECEFF4; --paper-deep:#DFE5EC; --paper-raise:#F2F4F8; --ink:#2E3F55; --ink-2:#5A6B7E; --faint:#8FA0B2; --c-year:#4A6383; --c-year-deep:#2E3F55; --c-date:#8296AE; --c-date-deep:#63758B; --wc-img:url("wc-colour-in-anything.png"); } /* GNX — cool monochrome grey */ :root[data-theme="gnx"]{ --paper:#F1F1F1; --paper-deep:#E6E6E7; --paper-raise:#F7F7F7; --ink:#232629; --ink-2:#5E6165; --faint:#A6A6A6; --c-year:#42474C; --c-year-deep:#232629; --c-date:#838D96; --c-date-deep:#62697A; --wc-img:url("wc-gnx.png"); } /* swap which accent is year vs date */ :root[data-swap="1"]{ --year-col:var(--c-date); --date-col:var(--c-year); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background-color:var(--paper); color:var(--ink); font-family:var(--grotesque); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:.005em; } /* velvet grain lives on the body background (see above) */ ::selection{ background:var(--rust); color:var(--paper); } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .mono{ font-family:var(--mono); } .label{ font-family:var(--mono); font-size:11.5px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); } .faint{ color:var(--faint); } /* ============================================================ Top bar ============================================================ */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px var(--gutter); font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); transition:background .4s ease, border-color .4s ease, color .4s ease; border-bottom:1px solid transparent; } .topbar.solid{ background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1); border-bottom:1px solid var(--line-soft); } .topbar a.mark{ color:var(--ink); letter-spacing:.16em; } .topbar nav{ display:flex; gap:26px; } .topbar nav a{ position:relative; transition:color .25s; } .topbar nav a:hover{ color:var(--rust); } .topbar nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--rust); transition:right .3s ease; } .topbar nav a:hover::after{ right:0; } .topbar nav a.active{ color:var(--ink); } .topbar nav a.active::after{ right:0; background:var(--c-year); } @media (max-width:620px){ .topbar nav a.hide-sm{ display:none; } } /* ============================================================ Project motifs — abstract data-viz, palette-aware ============================================================ */ .motif{ position:absolute; inset:6%; width:auto; height:auto; display:block; } .thumb[data-motif]::before, .gthumb[data-motif]::before, .figure[data-motif]::before{ content:none; } .thumb .ph, .gthumb .ph, .figure .ph{ z-index:2; } .motif .s-year{ stroke:var(--c-year); } .motif .s-date{ stroke:var(--c-date); } .motif .s-ink{ stroke:var(--ink); } .motif .s-faint{ stroke:var(--faint); } .motif .f-year{ fill:var(--c-year); } .motif .f-date{ fill:var(--c-date); } .motif .f-ink{ fill:var(--ink); } .motif .f-faint{ fill:var(--faint); } /* ============================================================ Landing — the business card / Ill Wind device ============================================================ */ .hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 64px; } .hero-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); } /* the card block: name + contact above rule, role below */ .card-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:nowrap; } .name{ font-family:var(--grotesque); font-weight:700; font-size:clamp(2.7rem, 10vw, 8.2rem); line-height:.92; letter-spacing:-.02em; margin:0; text-transform:uppercase; } .name .ln{ display:block; } .contact{ text-align:right; font-family:var(--mono); font-size:13px; line-height:1.9; letter-spacing:.01em; color:var(--ink-2); padding-bottom:.5em; flex-shrink:0; } @media (max-width:760px){ .card-head{ flex-wrap:wrap; } .contact{ text-align:left; width:100%; padding-bottom:0; margin-top:8px; } } .contact a{ display:block; transition:color .22s; } .contact a:hover{ color:var(--rust); } .contact .em{ color:var(--ink); } /* the hairline rule (Ill Wind device) */ .rule{ height:1px; background:var(--ink); margin:18px 0 16px; transform-origin:left center; transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); } .rule.in{ transform:scaleX(1); } .card-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap; } .role{ font-family:var(--mono); font-size:clamp(13px, 1.5vw, 17px); letter-spacing:.42em; text-transform:uppercase; color:var(--ink); margin:0; } .avail{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:9px; } .dot{ width:7px; height:7px; border-radius:50%; background:var(--rust); box-shadow:0 0 0 0 var(--rust); animation:pulse 2.6s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--rust) 55%,transparent); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } .scroll-cue{ margin-top:auto; padding-top:54px; display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); } .scroll-cue .ln2{ width:42px; height:1px; background:var(--faint); } /* ============================================================ Section scaffold ============================================================ */ .section{ padding:clamp(64px,9vw,128px) 0; } .sec-head{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:16px; margin-bottom:46px; } .sec-head h2{ font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin:0; color:var(--ink); } .sec-head .idx{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--faint); } /* ============================================================ Selected work ============================================================ */ .work-list{ display:flex; flex-direction:column; } .work{ display:grid; grid-template-columns: 64px 1fr 248px; gap:clamp(20px,4vw,56px); align-items:center; padding:34px 0; border-top:1px solid var(--line); } .work:last-child{ border-bottom:1px solid var(--line); } .work .wn{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--faint); align-self:start; padding-top:6px; } .work:hover .wn{ color:var(--rust); } .work-main{ min-width:0; } .work-title{ display:flex; align-items:center; gap:14px; font-family:var(--grotesque); font-weight:600; font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.04; letter-spacing:-.01em; margin:0 0 10px; } .work-title .arr{ font-size:.62em; color:var(--rust); opacity:0; transform:translate(-6px,2px); transition:opacity .3s, transform .3s; } .work:hover .work-title .arr{ opacity:1; transform:translate(0,2px); } .work-desc{ color:var(--ink-2); max-width:46ch; margin:0 0 16px; font-size:16px; text-wrap:pretty; } .tags{ display:flex; flex-wrap:wrap; gap:8px; } .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-deep); border:1px solid var(--line); border-radius:2px; padding:4px 9px; transition:color .22s ease, border-color .22s ease, background-color .22s ease; } /* outline tags: subtle accent shift on hover */ .tag:hover{ color:var(--c-year); border-color:color-mix(in srgb,var(--c-year) 55%,transparent); } /* SOLID tag style — . Fills with the secondary accent; shifts to the primary accent on hover (mirrors project hover). */ :root[data-tags="solid"] .tag{ color:var(--paper); background-color:var(--c-date); border-color:transparent; } :root[data-tags="solid"] .tag:hover{ background-color:var(--c-year); color:var(--paper); border-color:transparent; } .thumb{ aspect-ratio:16/10; width:100%; background:var(--paper-raise); border:1px solid var(--line); position:relative; overflow:hidden; filter:saturate(.9); transition:transform .5s cubic-bezier(.2,.7,.2,1); } .work:hover .thumb{ transform:translateY(-4px); } /* striped placeholder */ .thumb::before{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb,var(--slate) 28%, transparent) 11px 12px); } .thumb .ph{ position:absolute; left:10px; bottom:8px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-deep); background:color-mix(in srgb,var(--paper) 70%, transparent); padding:2px 6px; } @media (max-width:780px){ .work{ grid-template-columns:44px 1fr; } .work .thumb{ display:none; } } .see-all{ margin-top:34px; display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); } .see-all .ln2{ width:30px; height:1px; background:var(--ink); transition:width .3s; } .see-all:hover{ color:var(--rust); } .see-all:hover .ln2{ width:52px; background:var(--rust); } /* ============================================================ Career log — pg-lang inspired ============================================================ */ .log{ max-width:920px; } .year{ display:flex; align-items:baseline; gap:18px; border-top:1px solid var(--line); padding-top:12px; margin-top:30px; } .year:first-child{ margin-top:0; } .year .yn{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--year-col); } .year .yc{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--faint); opacity:.7; } .entries{ margin:6px 0 8px; } .entry{ display:grid; grid-template-columns:78px 1fr; gap:clamp(14px,3vw,38px); padding:11px 0; align-items:baseline; } .entry .date{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--date-col); white-space:nowrap; padding-top:1px; } .entry .ev{ margin:0; font-size:17px; color:var(--ink); text-wrap:pretty; } .entry .aside{ display:block; margin-top:5px; font-family:var(--serif); font-style:italic; font-weight:300; font-size:16.5px; line-height:1.5; color:var(--ink-2); letter-spacing:.005em; } /* all dates share --date-col; all years share --year-col (set above) */ @media (max-width:520px){ .entry{ grid-template-columns:62px 1fr; gap:14px; } } /* ============================================================ Footer ============================================================ */ .foot{ background:var(--paper-deep); border-top:1px solid var(--ink); padding:30px 0; } .foot-bar{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .foot-bar .fb-name{ color:var(--ink); } .foot-contact{ display:flex; gap:24px; } .foot-contact a{ color:var(--ink-2); transition:color .2s; } .foot-contact a:hover{ color:var(--c-year); } @media (max-width:620px){ .foot-bar{ flex-direction:column; align-items:flex-start; gap:16px; } } /* ============================================================ Reveal motion ============================================================ */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; } .reveal.d3{ transition-delay:.21s; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .rule{ transform:scaleX(1); transition:none; } .dot{ animation:none; } } /* ============================================================ Background modes — solid (default) = flat paper. grain = velvet speckle. watercolour = palette-matched wash behind a paper veil. ============================================================ */ /* Grain — fine velvet speckle tiled over the paper */ :root[data-bg="grain"] body{ background-image:url("grain.png"); background-repeat:repeat; background-size:128px 128px; } :root[data-bg="grain"] .foot{ background-color:var(--paper-deep); background-image:url("grain.png"); background-repeat:repeat; background-size:128px 128px; background-blend-mode:multiply; } /* Watercolour — palette-matched artwork, softened by a paper veil so type stays legible. Fixed so the wash sits calmly behind content. */ :root[data-bg="watercolour"]{ --wc-veil: color-mix(in srgb, var(--paper) 58%, transparent); } :root[data-bg="watercolour"] body{ background-image:linear-gradient(var(--wc-veil), var(--wc-veil)), var(--wc-img, none); background-repeat:no-repeat, no-repeat; background-size:cover, cover; background-position:center, center; background-attachment:fixed, fixed; } :root[data-bg="watercolour"] .foot{ background-color:var(--paper-deep); background-image:linear-gradient( color-mix(in srgb, var(--paper-deep) 52%, transparent), color-mix(in srgb, var(--paper-deep) 52%, transparent)), var(--wc-img, none); background-repeat:no-repeat, no-repeat; background-size:cover, cover; background-position:center, center bottom; background-attachment:fixed, fixed; } /* lift cards/figures a touch so type stays crisp over a wash */ :root[data-bg="watercolour"] .thumb, :root[data-bg="watercolour"] .gthumb, :root[data-bg="watercolour"] .figure{ box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%, transparent); } /* ============================================================ Stack — consolidated tools, grouped. Quiet, log-like. ============================================================ */ .stack{ display:flex; flex-direction:column; } .stack-section{ padding-top:clamp(6px,1.5vw,20px); } .stack-section .sec-head{ margin-bottom:6px; } .stack-row{ display:grid; grid-template-columns:170px 1fr; gap:clamp(16px,3vw,40px); align-items:baseline; padding:15px 0; border-top:1px solid var(--line); } .stack-row:last-child{ border-bottom:1px solid var(--line); } .stack-cat{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); } .stack-row .tags{ gap:8px; } @media (max-width:620px){ .stack-row{ grid-template-columns:1fr; gap:10px; padding:13px 0; } }