/* ─────────────────────────────────────────────────────────────────────── varadb.com — global styles Port of src/layouts/ArchiveLayout.astro (is:global) + BottomNav.astro Theme tokens switch via [data-mode] / [data-type] on . ─────────────────────────────────────────────────────────────────────── */ /* ── Design tokens ─────────────────────────────────────────────────── */ :root, [data-mode="light"] { --bg: #ffffff; --fg: #1c1b18; --line: #2a2925; --line-faint: #e2e2e2; --muted: #7a7466; --stripe-a: #f0f0f0; --stripe-b: #f8f8f8; --card-border: #d8d8d8; --serif: 'Helvetica Neue', Helvetica, Arial, sans-serif; } [data-mode="dark"] { --bg: #0d0d0f; --fg: #ededed; --line: #d8d8d8; --line-faint: #2c2c30; --muted: #8c8c8c; --stripe-a: #1b1b1e; --stripe-b: #161618; --card-border: #3a3a3e; } [data-mode="blueprint"] { --bg: #13357e; --fg: #eef3ff; --line: #aec3f4; --line-faint: #2c4fa0; --muted: #9fb4e6; --stripe-a: #1b428f; --stripe-b: #173a83; --card-border: #3f63bd; } [data-type="helvetica"] { --serif: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ── Reset / base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--fg); font-family: var(--serif); transition: background .25s ease, color .25s ease; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } /* Auto-hide scrollbars on the panes — visible only while actively scrolling */ .pane::-webkit-scrollbar-thumb { background: transparent; transition: background .35s ease; } .pane.scrolling::-webkit-scrollbar-thumb { background: var(--card-border); } .pane { scrollbar-color: transparent transparent; transition: scrollbar-color .35s ease; } .pane.scrolling { scrollbar-color: var(--card-border) transparent; } /* ── Red reticle cursor (home / practice / about) ────────────────────── Crosshair over the canvas; the OS hand over anything clickable. */ html.cross-cursor, html.cross-cursor * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='17'%20height='17'%20viewBox='0%200%2034%2034'%3E%3Cg%20stroke='%23ff0000'%20stroke-width='3'%20stroke-linecap='round'%3E%3Cline%20x1='17'%20y1='3'%20x2='17'%20y2='13'/%3E%3Cline%20x1='17'%20y1='21'%20x2='17'%20y2='31'/%3E%3Cline%20x1='3'%20y1='17'%20x2='13'%20y2='17'/%3E%3Cline%20x1='21'%20y1='17'%20x2='31'%20y2='17'/%3E%3C/g%3E%3C/svg%3E") 8 8, crosshair; } html.cross-cursor a, html.cross-cursor button, html.cross-cursor .nav-toggle { cursor: pointer; /* standard OS hand (Windows hand) */ } /* clickable project rows (and the Practice intro) keep the OS hand over title + description */ html.cross-cursor #leftPane .meta, html.cross-cursor #leftPane .meta * { cursor: pointer; } /* ── Archive shell ─────────────────────────────────────────────────── */ .archive-root { height: 100vh; } .frame { height: 100%; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; position: relative; } /* ── Panes ─────────────────────────────────────────────────────────── */ .panes { flex: 1; min-height: 0; display: flex; align-items: stretch; } .pane { min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; } /* ── Scroll snapping ─────────────────────────────────────────────────── The left pane snaps each project block into full view, so no zoom level ever leaves you looking at half a section. */ #leftPane { scroll-snap-type: y mandatory; scroll-padding-top: 0; } #leftPane .meta { scroll-snap-align: start; scroll-snap-stop: always; } /* "more below" affordance — sits at the bottom of the left pane */ .scroll-hint { position: absolute; bottom: 44px; display: flex; flex-direction: row; align-items: baseline; gap: 7px; z-index: 5; padding: 4px 8px 4px 0; background: transparent; border: none; cursor: pointer; color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .04em; transition: opacity .25s ease, color .15s ease; } .scroll-hint:hover { color: var(--fg); } .scroll-hint .lbl { white-space: nowrap; } .scroll-hint .chev { font-size: 13px; line-height: 1; } .pane-head { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 46px 8px 1.5rem; display: flex; justify-content: space-between; font-size: 11px; font-weight: bold; letter-spacing: .02em; } .pane-head .muted { color: var(--muted); font-weight: normal; white-space: nowrap; } .pane-head #leftCount { display: none; } /* ── Divider ───────────────────────────────────────────────────────── */ .divider { flex: none; width: 13px; cursor: col-resize; background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; } .divider .grip { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 9px; } .divider .grip .bar { width: 1px; height: 26px; background: var(--muted); } /* ── Entropy fold (closed by default; folded-page tab unfolds it) ───── */ .entropy-pane { flex: 0 0 42%; overflow-x: hidden; overflow-y: auto; } .archive-root[data-entropy="closed"] .entropy-pane { flex-basis: 0 !important; opacity: 0; border-left: 0; pointer-events: none; } .archive-root[data-entropy="open"] .entropy-pane { opacity: 1; } .archive-root[data-entropy="closed"] #divider { display: none; } .archive-root #leftPane { flex: 1 1 auto; } /* the folded-corner tab — a dog-eared page in the top-right of the frame */ .fold-tab { position: absolute; top: 0; right: 0; z-index: 6; width: 40px; height: 40px; padding: 0; border: none; background: transparent; cursor: pointer; } .fold-tab::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 40px 40px 0; border-color: transparent var(--line) transparent transparent; transition: border-color .2s ease; } /* the underside of the fold — a paler triangle for depth */ .fold-tab::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 26px 26px 0; border-color: transparent var(--bg) transparent transparent; opacity: .55; } .fold-tab:hover::before { border-color: transparent var(--fg) transparent transparent; } .archive-root[data-entropy="open"] .fold-tab::before { border-width: 40px 40px 0 0; border-color: var(--line) transparent transparent transparent; } .archive-root[data-entropy="open"] .fold-tab:hover::before { border-color: var(--fg) transparent transparent transparent; } .archive-root[data-entropy="open"] .fold-tab::after { border-width: 26px 26px 0 0; border-color: var(--bg) transparent transparent transparent; } /* ── Practice pane content (PracticePane.astro) ────────────────────── */ .figure { padding: 12px 12px 12px 1.5rem; } .figure .slot { border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient( 135deg, var(--stripe-a) 0 9px, var(--stripe-b) 9px 18px ); } .figure .slot img { width: 100%; height: 100%; object-fit: cover; display: block; } .figure .slot .ph { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); letter-spacing: .04em; } .meta { display: grid; grid-template-columns: 25% 1fr; /* each project fills the pane, so snapping lands on one complete project */ min-height: var(--pane-h, 100svh); border-top: 1px solid var(--line); } .meta:last-child { border-bottom: 1px solid var(--line); } .meta .name { padding: 10px 12px 10px 1.5rem; font-size: 12px; font-weight: 700; } .meta .name a:hover { text-decoration: underline; text-underline-offset: 2px; } .meta .body { padding: 10px 12px; border-left: 1px solid var(--line-faint); font-size: 12px; line-height: 1.5; } .meta .body p { margin: 0 0 12px; } .meta .body a { color: var(--fg); } .meta .body .it { font-style: italic; } /* empty section message */ .pane-empty { padding: 24px 12px 24px 1.5rem; font-size: 12px; color: var(--muted); } /* ── Entropy pane ──────────────────────────────────────────────────── */ .entropy { margin: 0; padding: 16px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.3; color: var(--line); white-space: pre; } /* ── Home page (index.astro) ───────────────────────────────────────── */ .home { padding: 48px 40px; display: flex; flex-direction: column; gap: 18px; } .home-name { margin: 0; font-size: 1.25rem; font-weight: 400; color: var(--fg); } .home-sub { margin: 0; font-size: 0.85rem; color: var(--muted); } .home-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.9375rem; } .home-nav a { color: var(--fg); text-decoration: none; } .home-nav a:hover { text-decoration: underline; text-underline-offset: 2px; } .home-nav .sep { color: var(--muted); user-select: none; } /* "+" toggle that reveals the in-progress sections */ .home-nav .nav-toggle { appearance: none; -webkit-appearance: none; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--fg); font-family: inherit; font-size: inherit; font-weight: 700; line-height: 1; } .home-nav .nav-toggle:hover { color: var(--muted); } /* ── Section + about pages ─────────────────────────────────────────── */ .section-content { display: flex; flex-direction: column; min-height: 100%; padding: 40px 1.5rem 24px; } .section-body { margin-top: 40px; } .section-source { margin-top: auto; padding-top: 24px; font-size: 0.75rem; color: var(--muted); } .placeholder { font-size: 1rem; color: var(--muted); margin: 0; } /* ── Bottom nav (BottomNav.astro) ──────────────────────────────────── */ .nav { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--line); font-size: 12px; flex-shrink: 0; } .nav > div { padding: 7px 12px; } .nav > div:first-child { padding-left: 1.5rem; } .nav > div:last-child { padding-right: 1.5rem; } /* footer breadcrumb (replaces the old pane header) */ .nav .crumb { display: flex; align-items: center; gap: 6px; } .nav .crumb a { color: var(--fg); text-decoration: none; } .nav .crumb a:hover { text-decoration: underline; text-underline-offset: 2px; } .nav .crumb .sep { color: var(--muted); user-select: none; } .nav .crumb > span:last-child { font-weight: 700; } .nav a { color: var(--fg); text-decoration: none; } .nav a:hover { text-decoration: underline; } .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; } .nav .centre { display: flex; flex-wrap: nowrap; justify-content: center; gap: 1.5rem; } .nav .right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } /* the three footer controls share one box: even gaps, one optical centre. min-width (not width) so the Devanagari language labels can grow without clipping while staying centred. */ .nav button { appearance: none; -webkit-appearance: none; border: none; background: transparent; cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1; color: var(--fg); padding: 0; min-width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .nav button svg { display: block; } .nav button:hover { color: var(--muted); } .wordmark { color: var(--fg); font-size: 12px; letter-spacing: .02em; } /* copyright line — very light text, per the design */ .wordmark.copyright { color: var(--muted); font-size: 11px; opacity: .7; margin-right: 14px; white-space: nowrap; } /* ── Info modal (site guide) ──────────────────────────────────────── */ .info-overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .45); } .info-overlay[hidden] { display: none; } .info-modal { position: relative; width: 100%; max-width: 440px; max-height: 80vh; overflow-y: auto; padding: 28px 28px 24px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); } .info-modal h2 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .info-modal dl { margin: 0; } .info-modal dt { font-size: 12px; font-weight: 700; margin-top: 14px; } .info-modal dt:first-child { margin-top: 0; } .info-modal dd { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .info-modal .info-close { position: absolute; top: 12px; right: 12px; padding: 4px; border: none; background: transparent; font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1; color: var(--fg); cursor: pointer; } .info-modal .info-close:hover { color: var(--muted); } /* ── Mobile ────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .panes { flex-direction: column; } .pane { height: auto; overflow-y: visible; } .divider { display: none; } } /* ── Focus styles ──────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════ Deep Seas layout — derived from "Portfolio execution" (Figma capture). Geometry measured from the PDF, not eyeballed. On a 1596pt page: full-bleed media x 128 → 1464 (the container) content column x 208 → 1386 (inset 6% inside it) left column x 208 → 950 (63%) gutter → (5.7%) right text column x 1017 → 1386 (31.3%) The signature move is a section heading (or image) hard left and a narrow body column hard right, top-aligned, with a wide empty gutter between. Type: heading 35pt / question 24pt / body 16pt → ratio 2.19 : 1.5 : 1. ══════════════════════════════════════════════════════════════════════ */ .ds { max-width: 1160px; margin: 0 auto; padding: 64px 24px 96px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 14px; line-height: 1.55; } /* headings stay in the site's sans, as in the source design */ .ds h1, .ds .ds-h { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; } /* ── Hero ──────────────────────────────────────────────────────────── */ .ds-hero { text-align: center; margin: 0 0 80px; } .ds-mark { width: 56px; height: auto; display: block; margin: 0 auto 40px; } .ds-hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; } .ds-hero .lede { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.2; } /* three contiguous squares — no gap in the source */ .ds-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 56px 0 0; } .ds-triptych img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .ds-caption-c { max-width: 52%; margin: 40px auto 0; font-size: 13px; line-height: 1.5; color: var(--muted); } /* ── Full-bleed media (spans the whole container) ──────────────────── */ /* natural aspect: the source mixes 16:9 stills, 4:1 strips and tall portraits, so nothing is force-cropped */ .ds-bleed { margin: 0 0 80px; } .ds-bleed img { display: block; width: 100%; height: auto; } /* two images side by side, unequal as in the source */ .ds-pair { display: grid; grid-template-columns: 45fr 55fr; gap: 16px; margin: 0 0 80px; } .ds-pair img { display: block; width: 100%; height: auto; } /* contact sheet — dense grid of show photographs, text may take a cell */ .ds-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 80px; } .ds-grid3 img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .ds-grid3 .span2 { grid-column: span 2; } .ds-grid3 .cell-text { font-size: 21px; line-height: 1.35; align-self: end; } .ds-bleed figcaption, .ds-split figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); } /* ── The workhorse split: heading/image left, text hard right ──────── */ .ds-split { display: grid; grid-template-columns: 63% 31.3%; gap: 5.7%; align-items: start; margin: 0 6% 80px; } .ds-split > figure { margin: 0; } .ds-split img { display: block; width: 100%; height: auto; } .ds-h { margin: 0; font-size: 30px; line-height: 1.2; } /* the V1 show poster sits under its heading, not at column width */ .ds-poster { margin: 40px 0 0; max-width: 58%; } .ds-text > p { margin: 0 0 20px; } .ds-text > p:last-child { margin-bottom: 0; } .ds-text strong { font-weight: 700; } /* the two research questions run larger than body copy */ .ds-q { font-size: 21px; line-height: 1.35; } .ds-q p { margin: 0 0 28px; } .ds-q p:last-child { margin-bottom: 0; } /* the rules list — each rule its own beat */ .ds-rules p { margin: 0 0 22px; } .ds-rules p:last-child { margin-bottom: 0; } .ds-note { margin: 0 6% 80px; font-size: 12px; color: var(--muted); } /* ── Closing colophon ────────────────────────────────────────────────── The page is bookended: it opens centred (hero), runs asymmetric through the body, then returns to centre for bibliography / credits / north star. */ .ds-rule { border: none; border-top: 1px solid var(--line-faint); margin: 96px 0; } .ds-center { max-width: 56%; margin: 0 auto 88px; text-align: center; } .ds-center h2 { font-size: 21px; font-weight: 700; margin: 0 0 28px; letter-spacing: .02em; } .ds-center h3 { font-size: 14px; font-weight: 700; margin: 28px 0 16px; } .ds-center p { margin: 0 0 20px; } .ds-center p:last-child { margin-bottom: 0; } /* credit entries: name over role */ .ds-credit { margin: 0 0 24px; } .ds-credit strong { display: block; font-weight: 700; } .ds-credit span { color: var(--muted); } .ds-nstar { counter-reset: nstar; list-style: none; margin: 0; padding: 0; } .ds-nstar li { counter-increment: nstar; margin: 0 0 16px; } .ds-nstar li::before { content: counter(nstar) ". "; } .ds-developed { margin: 0 0 24px; font-size: 11px; color: var(--muted); } .ds-logos { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; } .ds-logos img { display: block; height: 44px; width: auto; } .ds-logos img.tall { height: 64px; } @media (max-width: 767px) { .ds { padding: 40px 20px 64px; } .ds-hero h1, .ds-hero .lede, .ds-h { font-size: 22px; } .ds-caption-c { max-width: 100%; } .ds-split { grid-template-columns: 1fr; gap: 20px; margin: 0 0 48px; } .ds-note { margin: 0 0 48px; } .ds-q { font-size: 18px; } .ds-pair { grid-template-columns: 1fr; } .ds-grid3 { grid-template-columns: repeat(2, 1fr); gap: 6px; } .ds-grid3 .cell-text { font-size: 16px; grid-column: span 2; } .ds-center { max-width: 100%; } .ds-rule { margin: 56px 0; } .ds-logos { gap: 28px; } }