/* ============================================================= markulie.github.io — one stylesheet for every page. The old site repeated ~430 lines of this in each of nine files. Anything you change here changes everywhere, which is the whole point of it being one file. Contents 1. Font 2. Tokens 3. Reset 4. Layout primitives 5. Prose 6. Buttons 7. Header 8. Footer 9. Particle field 10. Project cards 11. Page-specific 12. Motion preferences ============================================================= */ /* --- 1. Font ------------------------------------------------- */ /* Share Tech Mono, SIL Open Font License 1.1. Served from here rather than fonts.googleapis.com: no third-party DNS + TLS before the font can even be requested, and nothing is disclosed to another origin. */ @font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/share-tech-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- 2. Tokens ----------------------------------------------- */ /* Light is the base; dark is opted into per page with . No JavaScript, so no flash. */ :root { --void: #f3f2ee; --panel: #ffffff; --panel-2: #eae8e2; --line: #d9d6cf; --text: #14171a; --muted: #5c6166; --signal: #c2410c; --signal-hi: #9a3412; --blue: #1f6fb2; --green: #1f8f5f; --mono: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --gutter: clamp(1.25rem, 4vw, 3.5rem); --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.875rem); --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem); --step-1: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); --step-2: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem); --step-3: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); --radius: 10px; --radius-sm: 3px; --header-h: 72px; --measure: 68ch; } :root[data-theme='dark'] { --void: #0d0f10; --panel: #15181b; --panel-2: #1b1f23; --line: #2a3034; --text: #edefef; --muted: #9aa2a8; --signal: #ff5a1f; --signal-hi: #ff7440; --blue: #3e8ede; --green: #4cc38a; } /* --- 3. Reset ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { min-height: 100svh; display: flex; flex-direction: column; background: var(--void); color: var(--text); font-family: var(--sans); font-size: var(--step-0); line-height: 1.6; overflow-x: clip; /* a wide child must never scroll the page sideways */ -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; text-wrap: balance; font-weight: 600; } p { text-wrap: pretty; } ul, ol { padding-left: 1.25rem; } ::selection { background: var(--signal); color: var(--void); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; } /* --- 4. Layout primitives ------------------------------------ */ main { flex: 1 0 auto; padding-top: var(--header-h); /* clear the fixed header */ } .section { padding-block: clamp(3rem, 8vw, 6rem); padding-inline: var(--gutter); } /* Hidden on screen, still announced by screen readers. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 0.5rem; top: -100%; z-index: 100; background: var(--signal); color: var(--void); padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--mono); font-size: var(--step--1); text-decoration: none; transition: top 0.2s ease; } .skip-link:focus-visible { top: 0.5rem; } .section-head { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: clamp(2rem, 5vw, 3rem); text-align: center; } .section-head h1, .section-head h2 { font-family: var(--mono); font-size: var(--step-1); letter-spacing: 0.08em; text-transform: uppercase; } .section-head .meta, .meta { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; } /* --- 5. Prose ------------------------------------------------ */ .prose { max-width: var(--measure); margin-inline: auto; } .prose > * + * { margin-top: 1.1em; } .prose p, .prose li { color: var(--muted); line-height: 1.75; } .prose h2 { font-family: var(--mono); font-size: var(--step-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-top: 2.5em; } .prose h3 { font-size: var(--step-1); color: var(--text); margin-top: 2em; } .prose h2 + *, .prose h3 + * { margin-top: 0.75em; } .prose strong, .prose b { color: var(--text); font-weight: 600; } .prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--signal); text-decoration-thickness: 1px; } .prose a:hover { color: var(--signal); } .prose li::marker { color: var(--signal); } .prose li + li { margin-top: 0.5em; } .prose figure { margin-block: 2rem; } .prose figure img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); } .prose figcaption { font-family: var(--mono); font-size: var(--step--1); color: var(--muted); text-align: center; margin-top: 0.75rem; } .prose .lead { color: var(--text); font-size: var(--step-1); } /* Video embeds keep a 16:9 box instead of a fixed pixel size, so they cannot overflow a phone the way the old 560x315 iframes did. */ .embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); margin-block: 1.5rem; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .callout { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.5rem); } .callout p { color: var(--text); } /* --- 6. Buttons ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1.5rem; min-height: 44px; cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .btn:hover { border-color: var(--signal); color: var(--signal); background: var(--panel-2); transform: translateY(-2px); } .btn .arrow { transition: transform 0.25s ease; } .btn:hover .arrow { transform: translateX(4px); } .btn--primary { background: var(--signal); color: var(--void); border-color: var(--signal); font-weight: 700; } .btn--primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); color: var(--void); } /* --- 7. Header ----------------------------------------------- */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); padding-inline: var(--gutter); font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; background: color-mix(in srgb, var(--void) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .site-header[data-scrolled='true'] { border-bottom-color: var(--line); } .brand { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--step-0); white-space: nowrap; } .brand__blink { width: 8px; height: 8px; flex: none; background: var(--signal); animation: blink 2.2s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.35; } } .brand__label { color: var(--muted); letter-spacing: 0.1em; font-size: var(--step--1); /* Reserve the widest role so the header never reflows mid-type. */ min-width: 17ch; white-space: nowrap; } .brand__label::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 2px; background: var(--signal); vertical-align: -0.15em; animation: caret 1s steps(1) infinite; } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); } .site-nav a { color: var(--muted); text-decoration: none; text-transform: uppercase; padding-block: 0.5rem; transition: color 0.2s ease; } .site-nav a:hover { color: var(--text); } /* `display: none` on the button itself, not on a wrapper — an empty wrapper would still be a flex item and shove the nav off the right edge into the middle of the header. */ .menu-toggle { display: none; flex-direction: column; place-items: center; gap: 4px; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .menu-toggle:hover { border-color: var(--signal); color: var(--signal); } .menu-toggle .bar { display: block; width: 18px; height: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; } .menu-toggle[aria-expanded='true'] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded='true'] .bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded='true'] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 768px) { .brand__label { display: none; } .menu-toggle { display: flex; } /* The drawer is fixed, so the header row is just brand + toggle. */ .site-nav { position: fixed; inset-block-start: var(--header-h); inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding-inline: var(--gutter); background: var(--void); border-bottom: 1px solid var(--line); display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.28s ease, visibility 0.28s; } .site-nav > * { overflow: hidden; } .site-nav[data-open='true'] { grid-template-rows: 1fr; visibility: visible; } .site-nav a { display: flex; align-items: center; min-height: 44px; padding-block: 1rem; border-top: 1px solid var(--line); font-size: var(--step-0); } .site-nav a:first-child { border-top: none; } } /* --- 8. Footer ----------------------------------------------- */ .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; padding: 1.75rem var(--gutter); border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--step--1); color: var(--muted); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-block: -0.7rem; } .site-footer a { display: inline-flex; align-items: center; min-height: 44px; /* tap target without loosening the visual rhythm */ color: var(--muted); text-decoration: none; transition: color 0.2s ease; } .site-footer a:hover { color: var(--text); } @media (max-width: 560px) { .site-footer { flex-direction: column; align-items: flex-start; } } /* --- 9. Particle field --------------------------------------- */ #flowField { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; background: var(--void); pointer-events: none; } /* The canvas reads this element's box for the collector position, so the drawn circle and the clickable target cannot drift apart. */ .target-hit { position: fixed; top: calc(var(--header-h) + 14px); right: clamp(1.25rem, 4vw, 3.5rem); width: 56px; height: 56px; border-radius: 50%; background: transparent; border: none; padding: 0; cursor: pointer; z-index: 40; } @media (max-width: 768px) { .target-hit { top: calc(var(--header-h) + 8px); width: 48px; height: 48px; } } /* --- 10. Project cards --------------------------------------- */ .grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); } .card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease; } .card:hover, .card:focus-within { border-color: var(--signal); transform: translateY(-4px); } /* Stretch the title link over the card so the whole surface is clickable while the accessible name stays on the real anchor. */ .card__title a::after { content: ''; position: absolute; inset: 0; } .card__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel-2); } /* Images are already cropped to 4:3 at export; object-fit is a safety net for a source too small to reach the smallest width. */ .card__art img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease, transform 0.5s ease; } .card:hover .card__art img { filter: saturate(1.25) contrast(1.08); transform: scale(1.03); } .card__art::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--void) 1px, transparent 1px), linear-gradient(90deg, var(--void) 1px, transparent 1px); background-size: 14px 14px; opacity: 0; transition: opacity 0.35s ease; mix-blend-mode: overlay; pointer-events: none; } .card:hover .card__art::after { opacity: 0.5; } .card__date { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.06em; color: #fff; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); padding: 0.25rem 0.5rem; border-radius: 2px; } .card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem 1.25rem; flex: 1; } .card__title { font-size: var(--step-1); font-weight: 600; } .card__title a { text-decoration: none; color: var(--text); } /* External-link marker. Needs its own breathing room — it sits directly after the title text with no whitespace in the markup. */ .card__ext { display: inline-block; margin-left: 0.35em; font-size: 0.7em; color: var(--muted); vertical-align: super; } .card__desc { font-size: var(--step--1); color: var(--muted); line-height: 1.55; flex: 1; } .card__tools { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.66rem; } .card__tools li { color: var(--muted); border: 1px solid var(--line); padding: 0.15rem 0.45rem; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.04em; } /* --- 11. Page-specific --------------------------------------- */ /* index — the original opened on a deep gap, then the grid. */ #work { padding-top: clamp(5rem, 16vh, 11.5rem); } .contact { text-align: center; background: transparent; border: none; } .contact h2 { font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 1rem; } .contact p { color: var(--muted); margin-bottom: 2.25rem; } .contact__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; } /* about */ .about { display: flex; flex-direction: column; align-items: center; text-align: center; } .about__photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); margin-bottom: 28px; } .about article { max-width: 60ch; } .about p { color: var(--muted); line-height: 1.75; font-size: 15px; margin-bottom: 16px; text-align: justify; hyphens: auto; } .about p:last-child { margin-bottom: 0; } /* light-of-life press list */ .press { list-style: none; padding: 0; } .press li { padding: 1rem 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: baseline; } .press__links { display: flex; gap: 1rem; font-family: var(--mono); font-size: var(--step--1); flex: none; } /* luneta */ .luneta-head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-bottom: clamp(2rem, 5vw, 3rem); text-align: center; } .luneta-logo { width: min(500px, 80vw); } .luneta-icon { width: 120px; border-radius: 26%; transition: transform 0.6s ease; } .luneta-icon:hover { transform: scale(1.12); } .press--stacked li { display: block; padding: 1.25rem 0; } .press__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; font-family: var(--mono); font-size: var(--step--1); } /* privacy contact table */ .contact-list { font-family: var(--mono); font-size: var(--step--1); margin-top: 1rem; } .contact-list div { display: flex; justify-content: space-between; gap: 1.25rem; padding: 0.75rem 0; border-top: 1px solid var(--line); } .contact-list dt { color: var(--muted); } .contact-list dd { margin: 0; text-align: right; color: var(--text); font-weight: 600; } @media (max-width: 560px) { .contact-list div { flex-direction: column; gap: 0.25rem; } .contact-list dd { text-align: left; } } /* 404 */ .notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; min-height: 60svh; } .notfound .code { font-family: var(--mono); font-size: var(--step-3); color: var(--signal); letter-spacing: 0.1em; } .notfound h1 { font-family: var(--mono); font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.06em; } .notfound .muted { color: var(--muted); max-width: 44ch; } .notfound__links { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 1rem; } /* playa */ .playa-hero { position: relative; min-height: min(88svh, 900px); display: grid; place-items: center; padding: clamp(4rem, 12vh, 8rem) var(--gutter); overflow: hidden; isolation: isolate; } .playa-hero__media { position: absolute; inset: 0; z-index: -1; } .playa-hero__media img, .playa-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .playa-hero__media video { opacity: 0; transition: opacity 0.8s ease; } .playa-hero__media video[data-playing='true'] { opacity: 1; } .playa-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3) 40%, var(--void) ); } .playa-hero__content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } .playa-hero__logo { width: min(500px, 78vw); } .playa-hero__meta { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: #d7d9db; } .jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; padding: 2rem var(--gutter); font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; } .jump a { color: var(--muted); text-decoration: none; padding-block: 0.4rem; } .jump a:hover { color: var(--signal); } .feature { position: relative; display: grid; align-items: center; min-height: min(80svh, 720px); padding: clamp(3rem, 8vw, 6rem) var(--gutter); isolation: isolate; overflow: hidden; } .feature__bg { position: absolute; inset: 0; z-index: -1; } .feature__bg img { width: 100%; height: 100%; object-fit: cover; } .feature__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, var(--void), rgba(0, 0, 0, 0.35) 22%, rgba(0, 0, 0, 0.35) 78%, var(--void) ); } .feature__box { width: min(460px, 100%); background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); } .feature[data-side='right'] .feature__box { justify-self: end; } .feature[data-side='left'] .feature__box { justify-self: start; } .feature__box h2 { font-family: var(--mono); font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.06em; } .feature__box p { color: var(--muted); margin-top: 0.4rem; margin-bottom: 1.1rem; } .feature__box img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); } @media (max-width: 900px) { .feature { min-height: 0; } .feature[data-side] .feature__box { justify-self: center; } } /* --- 12. Motion preferences ---------------------------------- */ @keyframes caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .brand__label::after { display: none; } }