/* ============================================================================ prakrisht.me — shared stylesheet The organising metaphor is dispersion: one white light split into four wavelengths. Home is the undispersed white light and the only light page; every section page is dark and owns an accent, a display face and a scene. Sections set their accent by `data-section` on . Display faces are bound to the same attribute so a page only needs to declare which section it is — nothing else about type or colour is repeated per page. ========================================================================= */ :root { /* ink */ --ink-dark-bg: #050507; --ink-dark-fg: #ececea; --paper-bg: #e7e7eb; --paper-fg: #0e0e11; /* hairlines */ --rule-dark: #1a1b22; --rule-light: #c6c6cd; /* muted ramp, dark pages */ --muted-1: #9a9da6; /* intro / lede */ --muted-2: #8f929a; /* row description */ --muted-3: #6a6d75; /* metadata, footers */ --muted-4: #565963; /* field labels in the meta card */ --prose-dark: #c9ccd2; /* muted ramp, Home */ --muted-light-1: #43454d; --muted-light-2: #5d5f68; /* the four wavelengths */ --physics: #ff2e21; --ai: #ffa51e; --ventures: #17c95a; --art: #7a2eff; /* geometry */ --gutter: 36px; --radius: 18px; /* resolved per section; neutral is the Archive default */ --accent: var(--ink-dark-fg); --accent-hover: #ffffff; --display: "IBM Plex Mono", ui-monospace, monospace; } /* --- section accents ----------------------------------------------------- */ body[data-section="physics"] { --accent: var(--physics); --accent-hover: #ff6a5f; --display: "Spectral", Georgia, serif; } body[data-section="ai"] { --accent: var(--ai); --accent-hover: #ffc35c; --display: "Space Grotesk", system-ui, sans-serif; } body[data-section="ventures"]{ --accent: var(--ventures); --accent-hover: #5fe98d; --display: "Instrument Sans", system-ui, sans-serif; } body[data-section="art"] { --accent: var(--art); --accent-hover: #a97bff; --display: "Cormorant Garamond", Georgia, serif; } body[data-section="archive"] { --accent: var(--ink-dark-fg); --accent-hover: #ffffff; --display: "IBM Plex Mono", ui-monospace, monospace; } body[data-section="home"] { --display: "Archivo", system-ui, sans-serif; } /* The eyebrow reads at the accent hue, but violet at full saturation is too dark to be legible as 11px text, so Art lifts it. */ body[data-section="art"] { --eyebrow-color: #9a5cff; } body[data-section="archive"] { --eyebrow-color: var(--muted-2); } /* --- base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink-dark-bg); color: var(--ink-dark-fg); } body { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.paper { background: var(--paper-bg); color: var(--paper-fg); } a { color: var(--ink-dark-fg); text-decoration: none; } a:hover { color: #ffffff; } body.paper a { color: var(--paper-fg); } body.paper a:hover { color: #000000; } ::selection { background: var(--accent); color: var(--ink-dark-bg); } body.paper ::selection { background: var(--paper-fg); color: var(--paper-bg); } img { max-width: 100%; } /* Keyboard focus has to survive on both grounds, and the canvas sits behind everything, so the ring carries its own dark outline as a backstop. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } body.paper :focus-visible { outline-color: var(--paper-fg); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--ink-dark-fg); color: var(--ink-dark-bg); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .skip-link:focus { left: var(--gutter); top: 12px; color: var(--ink-dark-bg); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- background layer ---------------------------------------------------- */ canvas[data-spectra] { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; } [data-fallback] { display: none; position: fixed; inset: 0; z-index: 0; } /* Legibility scrim — required on the scenes whose bright regions would otherwise wash out the right-aligned 10px metadata. Sits between canvas and content; the canvas is position:fixed, so a bright patch stays under the same screen coordinates at every scroll position. */ .scrim { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .scrim--art { background: radial-gradient(125% 95% at 100% 0%, rgba(5,5,7,0.30) 0%, rgba(5,5,7,0.78) 48%, rgba(5,5,7,0.90) 100%); } .scrim--archive { background: radial-gradient(125% 95% at 100% 0%, rgba(5,5,7,0.28) 0%, rgba(5,5,7,0.80) 48%, rgba(5,5,7,0.92) 100%); } /* The handoff specifies scrims only for Art and Archive, but the glyphs scene drives bright ribbons straight through the right-aligned 10px metadata — measured 2.67:1. Same corner-weighted wash, tuned lighter so the ribbons still read as the dominant texture. */ .scrim--ai { background: radial-gradient(125% 95% at 100% 0%, rgba(5,5,7,0.18) 0%, rgba(5,5,7,0.60) 48%, rgba(5,5,7,0.78) 100%); } .page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } /* --- nav ----------------------------------------------------------------- */ .nav { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding: 26px var(--gutter); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .nav__wordmark { color: #ffffff; font-weight: 500; } body.paper .nav__wordmark { color: var(--paper-fg); } .nav__links { display: flex; gap: 26px; flex-wrap: wrap; } .nav__link { display: flex; align-items: center; gap: 8px; color: var(--muted-2); } .nav__link:hover { color: #ffffff; } body.paper .nav__link { color: var(--muted-light-2); } body.paper .nav__link:hover { color: var(--paper-fg); } /* the current section burns at full foreground and its swatch glows */ .nav__link[aria-current="page"] { color: #ffffff; } body.paper .nav__link[aria-current="page"] { color: var(--paper-fg); } .nav__link[aria-current="page"] .swatch { box-shadow: 0 0 10px currentColor; } .swatch { width: 2px; height: 11px; flex: none; background: var(--swatch, currentColor); color: var(--swatch); } .swatch--physics { --swatch: var(--physics); } .swatch--ai { --swatch: var(--ai); } .swatch--ventures { --swatch: var(--ventures); } .swatch--art { --swatch: var(--art); } /* --- section header ------------------------------------------------------ */ .page-header { padding: 84px var(--gutter) 0; } /* Deliberately NOT text-transform:uppercase — the λ is a lowercase letter and uppercasing it yields Λ, which is a different character. The eyebrow text is written in caps in the markup instead. */ .eyebrow { margin: 0 0 18px; font-size: 11px; letter-spacing: 0.22em; color: var(--eyebrow-color, var(--accent)); } .page-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(48px, 8vw, 110px); line-height: 0.95; letter-spacing: -0.015em; } body[data-section="ai"] .page-title, body[data-section="ventures"] .page-title { letter-spacing: -0.04em; } body[data-section="art"] .page-title { letter-spacing: -0.005em; } body[data-section="archive"] .page-title { letter-spacing: -0.02em; } /* The prototypes show a lede here. It is deliberately omitted site-wide — Archive is the only page that keeps an intro. */ .lede { margin: 26px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.8; color: var(--muted-1); } .accent-rule { margin-top: 44px; height: 1px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent) 40%, transparent 90%); } /* Archive is the full spectrum, so its rule carries all four wavelengths. */ .accent-rule--spectrum { background: linear-gradient(90deg, var(--physics), var(--ai) 28%, var(--ventures) 56%, var(--art) 84%, transparent); } /* --- list rows ----------------------------------------------------------- */ .rows { flex: 1; padding: 0 var(--gutter) 56px; } .row { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--rule-dark); } .row:hover { color: var(--accent-hover); } .row__title { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: inherit; } .row__meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-3); text-align: right; } .row__desc { font-size: 12px; line-height: 1.7; color: var(--muted-2); } .row__tags { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-3); text-align: right; } /* A row with nowhere to link yet — no published work behind it. */ .row--inert { cursor: default; } .row--inert:hover { color: inherit; } /* --- archive rows -------------------------------------------------------- */ .archive-rows { flex: 1; padding: 8px var(--gutter) 56px; } .arow { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule-dark); color: var(--prose-dark); } .arow:hover { color: #ffffff; } /* muted-4 is the meta-card label tone; over the dither scene it measures below the legibility floor, so the archive index uses muted-3 — the token the system designates for metadata. The specified scrim is left as-is. */ .arow__year { font-size: 11px; color: var(--muted-3); } .arow__body { font-size: 14px; } .arow__name { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: inherit; } .arow__desc { color: var(--muted-3); } .arow__status { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-3); text-align: right; } .archive-intro { margin: 26px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.8; color: var(--muted-1); } /* --- ventures cards ------------------------------------------------------ */ /* Ventures rows are raised onto their own dark glass so the strobes scene reads behind them rather than through the copy. */ .vcard { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: baseline; padding: 24px 32px; margin-top: 14px; border-radius: 18px; /* The strobes scene puts bright green directly behind these cards. At the prototype's 0.55/0.42/0.52 the 10px metadata dropped to ~1.3:1 against it, which is illegible; the backing is carried to 0.80/0.72/0.78 so the scene still reads through the card without eating the text. */ background: linear-gradient(160deg, rgba(5,5,7,0.80), rgba(5,5,7,0.72) 45%, rgba(5,5,7,0.78)); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .vcard:hover { color: var(--accent-hover); } .vcard--lead { padding: 34px 32px; margin-top: 36px; border-radius: 20px; background: linear-gradient(160deg, rgba(5,5,7,0.84), rgba(5,5,7,0.76) 45%, rgba(5,5,7,0.82)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-color: rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } .vcard--second { padding: 28px 32px; margin-top: 18px; border-radius: 20px; } /* archived ventures sit back a step */ .vcard--past { color: var(--muted-1); } .vcard--past:hover { color: var(--prose-dark); } /* muted-4 is a meta-card label colour; over a live shader it falls below legibility, so archived cards keep the designated metadata tone. */ .vcard--past .vcard__meta, .vcard--past .vcard__tags { color: var(--muted-3); } .vcard--past .vcard__desc { color: var(--muted-3); } .vcard__title { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: inherit; } .vcard--lead .vcard__title { font-size: 34px; letter-spacing: -0.025em; } .vcard--second .vcard__title { font-size: 24px; } .vcard__meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-3); text-align: right; } .vcard--lead .vcard__meta { color: var(--ventures); } .vcard__desc { font-size: 12px; line-height: 1.7; color: var(--muted-2); } .vcard--lead .vcard__desc { font-size: 13px; color: var(--muted-1); max-width: 56ch; } .vcard__tags { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-3); text-align: right; } .group-label { margin: 40px 0 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-3); } /* --- home ---------------------------------------------------------------- */ .home-header { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px var(--gutter) 64px; } .home-eyebrow { margin: 0 0 22px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-light-2); } .home-title { margin: 0; font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: clamp(60px, 12.5vw, 184px); line-height: 0.92; letter-spacing: -0.045em; text-wrap: balance; } .tiles { border-top: 1px solid var(--rule-light); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .tile { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 30px; border-bottom: 1px solid var(--rule-light); border-left: 1px solid var(--rule-light); } .tile:first-child { border-left: 0; } .tile:hover { background: rgba(255,255,255,0.55); } .tile__name { font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.025em; } .tile__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted-light-1); } .tile__bar { width: 36px; height: 2px; background: var(--swatch); box-shadow: 0 0 10px color-mix(in srgb, var(--swatch) 60%, transparent); } /* --- project detail ------------------------------------------------------ */ .project { flex: 1; padding: 72px var(--gutter) 64px; max-width: 880px; } .project__title { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6.5vw, 84px); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; } .project__question { margin: 22px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted-1); } .project .accent-rule { margin-top: 40px; } /* the one glass surface, and the only radius, in the system */ .meta-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin-top: 32px; padding: 26px 28px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.06)); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); } .meta-card__field { display: flex; flex-direction: column; gap: 6px; } .meta-card__label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-4); } .meta-card__value { font-size: 12px; color: var(--ink-dark-fg); } .project__links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .project__links a { color: var(--muted-1); text-decoration: underline; text-underline-offset: 3px; } .project__links a:hover { color: #ffffff; } .prose { margin-top: 48px; display: flex; flex-direction: column; gap: 22px; max-width: 64ch; } .prose p { margin: 0; font-family: var(--display); font-weight: 400; font-size: 16.5px; line-height: 1.85; color: var(--prose-dark); text-wrap: pretty; } .prose h2 { margin: 22px 0 0; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .prose h2:first-child { margin-top: 0; } /* asides that qualify a project rather than describe it */ .project-note { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.7; font-style: italic; color: var(--muted-3); } .project-note a { color: var(--muted-1); text-decoration: underline; text-underline-offset: 3px; } .project-note a:hover { color: #ffffff; } /* --- unwritten copy ------------------------------------------------------ Placeholders are deliberately visible. They mark text that has not been written yet and must never be filled with plausible-sounding substitutes. */ .todo { margin: 0; padding: 14px 16px; border: 1px dashed var(--muted-4); border-radius: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.7; letter-spacing: 0.04em; color: var(--muted-3); } .todo::before { content: "TODO: COPY — "; letter-spacing: 0.18em; color: var(--muted-4); } /* --- art ----------------------------------------------------------------- */ .art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; padding: 36px var(--gutter) 0; } .art-cell { display: flex; flex-direction: column; gap: 8px; } .art-cell--wide { grid-column: 1 / -1; height: 380px; } .art-cell--wide .art-frame { flex: 1; } .art-cell__caption { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-3); } .art-frame { aspect-ratio: 4 / 5; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.14); } .art-cell--wide .art-frame { aspect-ratio: auto; } .art-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Slot with no artwork supplied yet — says so rather than showing a void. */ .art-frame--empty { display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-4); } .poem-card { grid-column: 1 / -1; padding: 44px clamp(24px, 6vw, 72px); border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.06)); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); } .poem-card__label { margin: 0 0 22px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow-color, var(--accent)); } /* --- footer -------------------------------------------------------------- */ .site-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: 22px var(--gutter) 26px; border-top: 1px solid var(--rule-dark); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-3); } body.paper .site-footer { border-top: 0; color: var(--muted-light-2); } .site-footer__links { display: flex; gap: 24px; flex-wrap: wrap; } .site-footer a { color: var(--muted-3); text-decoration: underline; text-underline-offset: 3px; } .site-footer a:hover { color: #ffffff; } body.paper .site-footer a { color: var(--muted-light-2); } body.paper .site-footer a:hover { color: var(--paper-fg); } .site-footer a.is-plain { text-decoration: none; } /* --- responsive ---------------------------------------------------------- */ /* The `1fr auto` rows get tight on a phone. Collapse to one column and left-align the metadata that was hugging the right edge. */ @media (max-width: 560px) { :root { --gutter: 20px; } .row, .vcard, .arow { grid-template-columns: 1fr; } .row__meta, .row__tags, .vcard__meta, .vcard__tags, .arow__status { text-align: left; } /* metadata reads before the description once stacked */ .row__meta { order: 2; } .row__desc { order: 3; } .row__tags { order: 4; } .row__title { order: 1; } .vcard__title { order: 1; } .vcard__meta { order: 2; } .vcard__desc { order: 3; } .vcard__tags { order: 4; } .page-header { padding-top: 56px; } .vcard, .vcard--lead, .vcard--second { padding: 22px 20px; } .art-cell--wide { height: 260px; } .poem-card { padding: 28px 22px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { canvas[data-spectra], .scrim, [data-fallback] { display: none !important; } html, body { background: #ffffff; color: #000000; } }