/* aaroncphelps.com — the Notes article template (v1). Ported from design/note-v1. One layout, content-driven: each note sits on one of the homepage tile colours by category (data-category on : psychology is lavender, systems sage, product sky, ux light orange), with a sticky rail (back link, meta, contents with a roaming orange pixel, sign-off), a 21px reading column, a paper browser-window example, a pixel-cell reading-progress strip along the top edge, and a charcoal close (next note, footer) that echoes the homepage ending. Two categories vary it. UX (design/note-ninety-second): a light-orange page with warm greys, the cursor and the progress cells in ink (orange has no contrast on that ground) and a full-orange close with paper type. Ethics (design/note-friction): the homepage's paper grey with neutral greys, the homepage's grain, the cursor and the cells in ink, no rail promise, and the charcoal close with the orange last domino. Three type voices only: Alpina for the statements and ledes, GT America Expanded for display, Extended for reading. Alpina Typewriter appears in the rail meta and the byline and nowhere else. A note loads fonts.css and this stylesheet only. */ :root { --paper: #e8e6e1; --charcoal: #2b2b29; --orange: #c9502b; --ink: #2b2b29; --rule: rgba(43, 43, 41, .22); --gutter: clamp(24px, 2.8vw, 52px); /* the category sets the page colour and its two greys */ --page: #cbc7dc; --muted: #5f5b6b; --body: #3a3841; } body[data-category="psychology"] { --page: #cbc7dc; --muted: #5f5b6b; --body: #3a3841; } body[data-category="systems"] { --page: #d3d9c3; --muted: #5e6355; --body: #383b33; } body[data-category="product"] { --page: #9fd3ec; --muted: #4b5f6b; --body: #2f3a41; } body[data-category="ux"] { --page: #ecc6b0; --page-deep: #e0ad91; --muted: #7a4a36; --body: #46302a; } body[data-category="ethics"] { --page: #e8e6e1; --page-deep: #dcd9d2; --muted: #6b6b67; --body: #585855; --rule: rgba(43, 43, 41, .18); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; isolation: isolate; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; } a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; } img { max-width: 100%; display: block; } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--orange); color: var(--paper); padding: 12px; transform: translateY(-200%); } .skip-link:focus { transform: none; } /* ---------- the fixed layers ---------- */ /* a faint dot screen, like the homepage, fading out before the reading column */ .screen { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(43, 43, 41, .18) .7px, transparent 1px); background-size: 10px 10px; -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .5) 30%, transparent 55%); mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .5) 30%, transparent 55%); } /* film grain, lighter than the homepage's and multiplied into the colour */ .grain { position: fixed; inset: -25%; width: 150%; height: 150%; pointer-events: none; z-index: 20; background-image: url("/assets/home/grain.png"); background-size: 155px 155px; opacity: .06; mix-blend-mode: multiply; animation: grain-shift .24s steps(1) infinite; will-change: transform; } /* on paper grey the grain is the homepage's: overlaid, a touch stronger, slower */ body[data-category="ethics"] .grain { opacity: .12; mix-blend-mode: overlay; animation-duration: .4s; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-1%, 3%); } 80% { transform: translate(3%, -1%); } } /* reading progress: a row of pixel cells in the top edge that fills as you read (note.js builds the cells and lights them); the last one is orange */ .progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 13; display: grid; grid-template-columns: repeat(var(--cells, 60), 1fr); gap: 2px; padding: 0 2px; pointer-events: none; } .progress i { background: var(--ink); opacity: .12; transition: opacity .2s linear; } .progress i.on { opacity: .9; } .progress i.on:last-child { background: var(--orange); opacity: 1; } /* on the UX ground the cells, the completing one included, stay ink */ body[data-category="ux"] .progress i { opacity: .14; } body[data-category="ux"] .progress i.on { opacity: .9; } body[data-category="ux"] .progress i.on:last-child { background: var(--ink); opacity: 1; } /* and on paper grey */ body[data-category="ethics"] .progress i { opacity: .14; } body[data-category="ethics"] .progress i.on { opacity: .9; } body[data-category="ethics"] .progress i.on:last-child { background: var(--ink); opacity: 1; } /* ---------- masthead and the brand mark ---------- */ /* under the difference blend the white type reads as ink on the page colour and as paper on the charcoal close */ .masthead { position: fixed; inset: 0 0 auto; z-index: 12; display: flex; justify-content: space-between; align-items: center; padding: 24px var(--gutter); mix-blend-mode: difference; color: #fff; } .masthead nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 52px); font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; } .masthead nav a[aria-current] { border-bottom: 1px solid currentColor; padding-bottom: 4px; } .masthead nav a:hover { opacity: .55; } /* the falling dominoes (design/homepage-v10/BRAND-MARK.md): nine bars that topple left to right on hover and stand back up on leave. The a.wordmark:hover selectors must out-rank the rest-state delays that follow, so keep the order */ .wordmark{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:-.01em;color:inherit;text-decoration:none} .wordmark:hover{opacity:1} /* override any global link-dim on hover — the animation is the hover state */ .site-foot a.wordmark:hover { opacity: 1; } .mark{display:inline-flex;align-items:flex-end;gap:5px;height:22px;padding-right:12px} .mark i{width:2px;height:22px;background:var(--ink);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.4,.9,.5,1)} .mark i:last-child{background:var(--orange);width:2.5px} a.wordmark:hover .mark i{transform:rotate(52deg)} a.wordmark:hover .mark i:nth-child(1){transition-delay:0s} a.wordmark:hover .mark i:nth-child(2){transition-delay:.06s} a.wordmark:hover .mark i:nth-child(3){transition-delay:.12s} a.wordmark:hover .mark i:nth-child(4){transition-delay:.18s} a.wordmark:hover .mark i:nth-child(5){transition-delay:.24s} a.wordmark:hover .mark i:nth-child(6){transition-delay:.3s} a.wordmark:hover .mark i:nth-child(7){transition-delay:.36s} a.wordmark:hover .mark i:nth-child(8){transition-delay:.42s} a.wordmark:hover .mark i:nth-child(9){transition-delay:.5s;transform:rotate(44deg)} .wordmark .mark i:nth-child(9){transition-delay:0s} .wordmark .mark i:nth-child(8){transition-delay:.05s} .wordmark .mark i:nth-child(7){transition-delay:.1s} .wordmark .mark i:nth-child(6){transition-delay:.15s} .wordmark .mark i:nth-child(5){transition-delay:.2s} .wordmark .mark i:nth-child(4){transition-delay:.25s} .wordmark .mark i:nth-child(3){transition-delay:.3s} .wordmark .mark i:nth-child(2){transition-delay:.35s} .wordmark .mark i:nth-child(1){transition-delay:.4s} /* masthead sits under mix-blend-mode:difference, so everything is white there (incl. the orange bar) */ .masthead .mark i,.masthead .mark i:last-child{background:#fff} /* ---------- icons and type roles ---------- */ .ar { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -.08em; flex: none; transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .ar-up { transform: rotate(-45deg); } .px { width: .9em; height: .9em; fill: currentColor; display: inline-block; vertical-align: -.05em; flex: none; } .px-back { transform: rotate(-135deg); } /* the one Typewriter voice: the rail meta and the byline */ .caption { font-family: var(--caption); font-weight: 300; font-style: italic; font-size: 15px; letter-spacing: .01em; color: var(--muted); } /* the small uppercase labels are GT America Extended, never Typewriter */ .label { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .turn { font-family: var(--turn); font-weight: 700; font-style: italic; letter-spacing: -.01em; } /* a typed word: a snap, not a fade */ .hw { display: inline-block; opacity: 0; transition: opacity .1s linear; } .hw.on { opacity: 1; } .ulink { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; min-width: 200px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; border-bottom: 1px solid currentColor; padding-bottom: 10px; } .ulink:hover { opacity: .7; } /* ---------- layout: the rail left, the reading column right ---------- */ .page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 40px var(--gutter); padding: 0 var(--gutter); } .rail { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 34px; padding-bottom: 40px; } .back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; } .back:hover { opacity: .6; } .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; } .meta .tag { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .meta .draft { border: 1px solid var(--rule); padding: 4px 8px; } /* the contents: a rule above and between, and an orange pixel that glides to the current section */ .toc { position: relative; border-top: 1px solid var(--rule); } .toc li { border-bottom: 1px solid var(--rule); } .toc a { display: block; padding: 15px 0 15px 16px; font-family: var(--sans); font-weight: 400; font-size: 16px; letter-spacing: -.005em; line-height: 1.35; color: var(--muted); transition: color .3s; } .toc a:hover, .toc a[aria-current] { color: var(--ink); } .toc .cursor { position: absolute; left: 0; width: 5px; height: 5px; background: var(--orange); top: var(--y, 22px); transition: top .45s cubic-bezier(.16, 1, .3, 1); opacity: 0; } .toc.has-cur .cursor { opacity: 1; } body[data-category="ux"] .toc .cursor, body[data-category="ethics"] .toc .cursor { background: var(--ink); } .rail .promise { font-family: var(--lede); font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.15; color: var(--body); } /* ---------- the article ---------- */ .article { max-width: 680px; padding: 150px 0 0; } .hero h1 { font-family: var(--statement); font-weight: 700; font-size: clamp(40px, 4.6vw, 72px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; margin: 0 0 30px; } .hero .lede { font-family: var(--lede); font-weight: 300; font-style: italic; font-size: clamp(25px, 2.2vw, 36px); line-height: 1.12; color: var(--body); max-width: 30ch; } .byline { display: flex; gap: 18px; margin: 32px 0 0; padding-bottom: 40px; border-bottom: 1px solid var(--rule); } .short { margin: 44px 0 0; padding: 28px 0 0; border-top: 2px solid var(--ink); } .short .label { margin-bottom: 14px; } .short p { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.3; letter-spacing: -.015em; max-width: 30ch; } .body { font-size: 21px; line-height: 1.52; letter-spacing: -.005em; color: var(--body); } .body h2 { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.05; letter-spacing: -.025em; color: var(--ink); margin: 88px 0 28px; scroll-margin-top: 120px; text-wrap: balance; } .body h2 .n { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; } .body p { margin: 0 0 26px; max-width: 34em; } .body strong { font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .body p .turn { color: var(--ink); font-size: 1.05em; } /* the example: a paper browser window, two screens side by side */ .example { margin: 44px 0 52px; } .win { background: var(--paper); color: var(--charcoal); box-shadow: 0 30px 60px rgba(43, 43, 41, .18); border: 1px solid rgba(43, 43, 41, .18); } /* on paper grey the window is a shade lighter than the page, so it reads as a card */ body[data-category="ethics"] .win { background: #f4f3f0; box-shadow: 0 30px 60px rgba(43, 43, 41, .14); } .win .bar { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(43, 43, 41, .16); background: rgba(43, 43, 41, .04); } .win .lights { display: flex; gap: 5px; } .win .lights i { width: 8px; height: 8px; background: rgba(43, 43, 41, .22); } .win .lights i:first-child { background: var(--orange); } .win .url { font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: var(--muted); background: #fff; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win .url b { font-weight: 400; color: var(--charcoal); } .example .screens { display: grid; grid-template-columns: 1fr 1fr; } .example .screen-a { border-right: 1px solid rgba(43, 43, 41, .16); } .example .pane { padding: 28px 30px 34px; } .example h3 { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; margin: 0 0 18px; } .example .row { border: 1px solid rgba(43, 43, 41, .22); padding: 12px 14px; font-size: 15px; color: var(--body); margin-bottom: 8px; } /* a secondary "button" row in the left pane: a tinted block, no rule */ .example .row.cta { background: rgba(43, 43, 41, .08); border-color: transparent; font-family: var(--display); font-weight: 700; } .example .primary { background: var(--orange); color: #fff; border: 0; font-family: var(--display); font-weight: 700; font-size: 15px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .example .hint { font-size: 15px; color: var(--muted); margin-top: 14px; line-height: 1.4; } .example figcaption { padding: 18px 0 0; max-width: 34em; font-size: 15px; line-height: 1.45; color: var(--muted); } /* the checklist: markers are growing pixel clusters, one to four squares */ .check { margin: 36px 0 0; border-top: 1px solid var(--rule); } .check .label { padding: 18px 0 6px; } .check li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 19px; line-height: 1.4; color: var(--ink); } .dots { display: grid; grid-template-columns: repeat(2, 5px); grid-auto-rows: 5px; gap: 3px; margin-top: 7px; } .dots i { background: var(--orange); } .further { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--rule); } .further .label { margin-bottom: 14px; } .further a { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); } .further a:hover .title { opacity: .6; } .further .title { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; } .further .src { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); } /* ---------- the close: the next note and the footer, on charcoal ---------- */ .close { margin-top: 120px; background: var(--charcoal); color: var(--paper); --ink: #e8e6e1; --muted: #a9a8a3; --body: #c4c2bc; --rule: rgba(232, 230, 225, .22); padding: 0 var(--gutter); } /* the UX close is full orange with paper type; the footer wordmark's last domino goes paper, since orange would vanish into the band */ body[data-category="ux"] .close { background: var(--orange); --ink: #f3e9e1; --muted: #f0cfc0; --body: #f6e2d6; --rule: rgba(243, 233, 225, .3); } body[data-category="ux"] .close .site-foot .mark i:last-child { background: var(--paper); } .next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 40px var(--gutter); padding: 14vh 0 12vh; } .next a { display: block; } .next a:hover .nt { opacity: .7; } .next .nt { font-family: var(--statement); font-weight: 700; font-size: clamp(34px, 3.6vw, 60px); line-height: .96; letter-spacing: -.02em; margin: 14px 0 20px; transition: opacity .3s; } .next .nd { font-size: 19px; line-height: 1.4; color: var(--body); max-width: 32ch; } .next .ulink { margin-top: 36px; } .site-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0 36px; border-top: 1px solid var(--rule); } .site-foot a:hover { opacity: .6; } .site-foot .caption { font-size: 14px; letter-spacing: .02em; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .page, .next { grid-template-columns: 1fr; gap: 28px; } .rail { position: static; padding-top: 120px; gap: 24px; } .rail .promise, .toc { display: none; } .article { padding-top: 0; } .example .screens { grid-template-columns: 1fr; } .example .screen-a { border-right: 0; border-bottom: 1px solid rgba(43, 43, 41, .16); } .body { font-size: 19px; } } /* ---------- reduced motion & print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .grain { animation: none; } *, *::before, *::after { transition: none !important; animation: none !important; } .hw { opacity: 1; } .mark i { transition: none; } } @media print { .screen, .grain, .progress, .skip-link { display: none; } .hw { opacity: 1 !important; } .rail { position: static; } }