/* Pindu Labs — landing + legal pages. Aesthetic: editorial / academic letterpress. Whisper-warm paper, ink, hairline rules, serif display, mono eyebrows, one rationed terracotta accent. Flat, bordered, printed. (Labs palette per the 2026-05 design direction.) The research blog uses its own /css/ stack; this file styles the landing and the privacy/legal pages. */ :root { /* Palette — Labs */ --paper: #F4F2EC; /* whisper-warm paper background */ --surface: #FFFFFF; /* cards, figures */ --ink: #122A2B; /* primary text */ --muted: #5A6F70; /* secondary text */ --teal: #1F827D; /* sober teal — links, marks */ --teal-bright: #3BA5A0; /* hover */ --terracotta: #B36743; /* rationed accent — a single pop */ --terracotta-wash: rgba(179, 103, 67, 0.12); --hairline: rgba(18, 42, 43, 0.14); --hairline-soft: rgba(18, 42, 43, 0.08); /* Theme tokens (light) */ --bg: var(--paper); --text: var(--ink); --link: var(--teal); --link-hover: var(--teal-bright); --border: var(--hairline); /* Type */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-zh: "Noto Serif SC", "IBM Plex Serif", serif; /* Prose body: Latin in Plex Sans, CJK falls through to Noto Serif SC */ --font-prose: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Serif SC", sans-serif; --fs-eyebrow: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1.0625rem; /* 17px */ --fs-lg: 1.25rem; --fs-display: clamp(2.2rem, 1.4rem + 3.2vw, 3.4rem); --lh-body: 1.6; --lh-tight: 1.12; /* Spacing */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 80px; --space-7: 120px; /* Geometry — flat & printed */ --radius: 3px; --radius-sm: 2px; --radius-pill: 999px; --maxw: 1080px; --maxw-prose: 680px; /* Bridge — token names consumed by the shared prose.css / resource.css. Mapped onto Labs values so the blog reskins from this single source. */ --brand: var(--teal); --accent: var(--terracotta); --overlay-surface: rgba(18, 42, 43, 0.035); --shadow: 0 1px 2px rgba(18, 42, 43, 0.05); --shadow-hover: 0 4px 16px rgba(18, 42, 43, 0.10); --backdrop-blur-sm: saturate(160%) blur(6px); --transition-fast: 0.18s; --font-size-xs: var(--fs-eyebrow); --font-size-sm: var(--fs-sm); --font-size-base: var(--fs-base); --font-size-lg: var(--fs-lg); --font-size-xl: 1.4rem; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --letter-spacing-tight: 0.12em; --line-height-tight: 1.25; --line-height-normal: var(--lh-body); } @media (prefers-color-scheme: dark) { :root { --paper: #0F2122; --surface: #16302F; --ink: #ECEAE1; --muted: #9DAFAD; --teal: #5FB8B2; --teal-bright: #9BD8D4; --terracotta: #D08A63; --terracotta-wash: rgba(208, 138, 99, 0.16); --hairline: rgba(236, 234, 225, 0.16); --hairline-soft: rgba(236, 234, 225, 0.08); --overlay-surface: rgba(236, 234, 225, 0.05); --shadow: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.40); } } /* Manual theme overrides set by the navbar toggle on (persisted in localStorage). They mirror the values above / the base :root so an explicit choice wins over the system preference. */ html.theme-dark { --paper: #0F2122; --surface: #16302F; --ink: #ECEAE1; --muted: #9DAFAD; --teal: #5FB8B2; --teal-bright: #9BD8D4; --terracotta: #D08A63; --terracotta-wash: rgba(208, 138, 99, 0.16); --hairline: rgba(236, 234, 225, 0.16); --hairline-soft: rgba(236, 234, 225, 0.08); --overlay-surface: rgba(236, 234, 225, 0.05); --shadow: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.40); } html.theme-light { --paper: #F4F2EC; --surface: #FFFFFF; --ink: #122A2B; --muted: #5A6F70; --teal: #1F827D; --teal-bright: #3BA5A0; --terracotta: #B36743; --terracotta-wash: rgba(179, 103, 67, 0.12); --hairline: rgba(18, 42, 43, 0.14); --hairline-soft: rgba(18, 42, 43, 0.08); --overlay-surface: rgba(18, 42, 43, 0.035); --shadow: 0 1px 2px rgba(18, 42, 43, 0.05); --shadow-hover: 0 4px 16px rgba(18, 42, 43, 0.10); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); display: flex; flex-direction: column; min-height: 100vh; } p { margin: 0 0 var(--space-3); } p:last-child { margin-bottom: 0; } a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.18s ease; } a:hover, a:focus-visible { color: var(--link-hover); } a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; } strong { font-weight: 600; color: var(--text); } .icon-external { width: 0.74em; height: 0.74em; margin-left: 0.28em; vertical-align: -0.02em; opacity: 0.7; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--space-1) var(--space-2); z-index: 10; } .skip-link:focus { left: var(--space-2); top: var(--space-2); } /* ---------- Shared container ---------- */ .container { width: 65%; max-width: 1400px; margin-inline: auto; padding-inline: var(--space-4); } @media (max-width: 1024px) { .container { width: 90%; } } @media (max-width: 600px) { .container { width: 100%; } } /* ---------- Navbar ---------- */ .site-header { border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); } .brand { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--text); } .brand:hover, .brand:focus-visible { color: var(--text); } .brand-mark { display: inline-flex; } .brand-mark img { display: block; height: 28px; width: auto; } /* Show the ink mark in light, the pale mark in dark; the toggle's html class wins over the system preference. */ .brand-mark .mark-dark { display: none; } @media (prefers-color-scheme: dark) { .brand-mark .mark-light { display: none; } .brand-mark .mark-dark { display: block; } } html.theme-dark .brand-mark .mark-light { display: none; } html.theme-dark .brand-mark .mark-dark { display: block; } html.theme-light .brand-mark .mark-light { display: block; } html.theme-light .brand-mark .mark-dark { display: none; } .brand-text { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; } .site-nav { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; /* push nav + toggles to the right of the brand */ font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.01em; } .site-nav a { color: var(--muted); text-decoration: none; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--text); } .site-nav a[aria-current="page"] { color: var(--text); } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--muted); cursor: pointer; transition: color 0.18s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text); } .theme-toggle svg { display: block; width: 18px; height: 18px; } /* Sun/moon visibility per theme lives in shared/css/components.css. */ /* ---------- Hamburger (mobile only) ---------- */ .nav-toggle { display: none; /* shown below the nav breakpoint */ align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--muted); cursor: pointer; transition: color 0.18s ease; } .nav-toggle:hover, .nav-toggle:focus-visible { color: var(--text); } .nav-toggle svg { display: block; width: 22px; height: 22px; } /* ---------- Layout ---------- */ main { flex: 1; } /* landing: vertically center the hero between header and footer */ main.landing { display: flex; flex-direction: column; justify-content: center; } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 1.6fr 1fr; /* copy leads; research card is a tidy sidebar */ gap: var(--space-6); align-items: center; padding-block: var(--space-5); width: 100%; } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-3); } .hero h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.018em; margin: 0 0 var(--space-4); text-wrap: balance; } /* One intermediate body level for the positioning paragraphs */ .hero-body { font-size: var(--fs-base); color: var(--text); margin-bottom: var(--space-3); } .hero-body:last-child { margin-bottom: 0; } .hero-body a { font-weight: 500; } /* ---------- Hero feature column (card styles live in research-card.css) ---------- */ .hero-feature { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 440px; justify-self: end; } .all-research { align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); text-decoration: none; } .all-research:hover, .all-research:focus-visible { color: var(--text); text-decoration: underline; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); } .site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; padding-block: var(--space-4); } .site-footer p { margin: 0; } .site-footer a { color: var(--muted); } .site-footer a:hover, .site-footer a:focus-visible { color: var(--link-hover); } /* ---------- Legal / prose pages (privacy) ---------- */ .legal { max-width: var(--maxw-prose); margin-inline: auto; padding-block: var(--space-6); } .legal h1 { font-family: var(--font-serif); font-weight: 600; font-size: 2.2rem; line-height: var(--lh-tight); letter-spacing: -0.015em; margin: 0 0 var(--space-2); } .legal .meta { font-family: var(--font-mono); color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); } .legal h2 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; line-height: 1.25; margin: var(--space-5) 0 var(--space-2); } /* ---------- Entrance (one orchestrated load) ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .reveal-1 { animation-delay: 0.05s; } .reveal-2 { animation-delay: 0.15s; } .reveal-3 { animation-delay: 0.25s; } .reveal-4 { animation-delay: 0.38s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; animation: none; } } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-6); } .hero-feature { max-width: 420px; justify-self: center; } } /* Collapse the nav into a hamburger drawer on narrow screens */ @media (max-width: 680px) { .site-header { position: relative; } /* anchor the drawer */ .nav-toggle { display: inline-flex; } .theme-toggle { margin-left: auto; } /* nav leaves the flow; pin toggles right */ .site-nav { position: absolute; top: 100%; left: 0; right: 0; margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); z-index: var(--z-sticky, 10); display: none; /* collapsed until toggled */ } .site-nav.active { display: flex; } .site-nav a { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); } .site-nav a:first-child { border-top: none; } } @media (max-width: 560px) { .container { padding-inline: var(--space-3); } }