/* ========================================================================= aarav.me · Editorial (V2-inspired prototype) Quiet room, one weird object, lights stay on. ========================================================================= */ :root { /* Palette — warmer than V2's draft, cooler than V3's bone. Olive accent intentionally avoids the blue-link cliche. */ --bg: #F3F0E9; --bg-deep: #ECE8DD; --fg: #1A1A1A; --fg-muted: #76746B; --rule: rgba(26, 26, 26, 0.10); --rule-strong: rgba(26, 26, 26, 0.22); --accent: #5C6B3E; /* olive */ --accent-hover:#404D2C; --tag-bg: rgba(92, 107, 62, 0.07); /* Type — one sans, one mono. Sans is swappable via data-font on . */ --sans-general: 'General Sans', 'GeneralSans-Variable', system-ui, sans-serif; --sans-geist: 'Geist', system-ui, -apple-system, sans-serif; --sans-manrope: 'Manrope', system-ui, sans-serif; --sans: var(--sans-general); --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --measure: 64ch; --container: 720px; /* Motion — quietly faster than V3. */ --hold: 60ms; --in: 80ms; --out: 40ms; } html[data-font="geist"] { --sans: var(--sans-geist); } html[data-font="manrope"] { --sans: var(--sans-manrope); } /* ========================================================================= RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.7; font-feature-settings: "kern", "liga", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; } img, svg { max-width: 100%; display: block; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } hr { border: 0; margin: 0; } ul, ol { list-style: none; margin: 0; padding: 0; } h1, h2, h3, p { margin: 0; } a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 0.5px; transition: color var(--in) linear var(--hold), border-color var(--in) linear var(--hold); } a:hover, a:focus-visible { color: var(--accent-hover); border-bottom-color: var(--accent-hover); } a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } /* ========================================================================= GRAIN — very subtle, the "one weird object" stays subtle ========================================================================= */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* ========================================================================= SITE HEADER — small wordmark, simple inline nav ========================================================================= */ .site-header { max-width: var(--container); width: 100%; margin: 0 auto; padding: 28px 32px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .wordmark { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); border-bottom: 0; } .wordmark:hover { color: var(--accent-hover); } .site-nav { display: flex; gap: 22px; } .site-nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-muted); border-bottom: 0; padding-bottom: 2px; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); } /* ========================================================================= CONTAINER — single column, generous breathing ========================================================================= */ .container { flex: 1; max-width: var(--container); width: 100%; margin: 0 auto; padding: 56px 32px 80px; } /* ========================================================================= HERO ========================================================================= */ .hero { margin-bottom: 64px; } .status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; } .status__dot { color: var(--accent); font-size: 9px; line-height: 1; animation: breath 2.2s linear infinite; } @keyframes breath { 0%, 100% { opacity: 0.5; } 50% { opacity: 1.0; } } @media (prefers-reduced-motion: reduce) { .status__dot { animation: none; opacity: 1; } } .hero__line { font-family: var(--sans); font-weight: 500; font-size: clamp(34px, 5.5vw, 46px); letter-spacing: -0.025em; line-height: 1.08; color: var(--fg); text-wrap: balance; margin-bottom: 24px; } .hero__sub { font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--fg); max-width: 56ch; text-wrap: pretty; } .hero__sub a { color: var(--fg); border-bottom-color: var(--accent); } /* ========================================================================= DIVIDERS — text-labeled hairlines (── selected work ──) ========================================================================= */ .divider { position: relative; height: 1px; background: var(--rule-strong); margin: 56px 0 32px; scroll-margin-top: 32px; } .divider::before { content: attr(data-label); position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding-right: 14px; background: var(--bg); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.10em; text-transform: lowercase; color: var(--accent); } /* ========================================================================= WORK LIST — name + desc on one row, meta on the other ========================================================================= */ .work { display: flex; flex-direction: column; } .work__row { display: grid; grid-template-columns: 1fr auto; gap: 24px 32px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); position: relative; } .work__row::after { /* invisible right-side arrow that nudges on hover of the name */ content: '→'; position: absolute; right: -22px; top: 22px; font-family: var(--mono); color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity var(--in) linear var(--hold), transform var(--in) linear var(--hold); } .work__row:hover::after, .work__row:focus-within::after { opacity: 1; transform: translateX(0); } .work__name { font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: -0.012em; line-height: 1.3; color: var(--fg); margin-bottom: 4px; } .work__name a { color: var(--fg); border-bottom: 0; } .work__name a:hover { color: var(--accent-hover); } .work__desc { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--fg-muted); } .work__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-family: var(--mono); } .tag { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--tag-bg); padding: 2px 7px; white-space: nowrap; } .work__year { font-size: 12px; letter-spacing: 0.04em; color: var(--fg-muted); margin-left: 4px; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .work__row { grid-template-columns: 1fr; gap: 8px; } .work__meta { justify-content: flex-start; } } /* ========================================================================= MORE — small inline link, e.g. "All work →" ========================================================================= */ .more { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; } .more a { color: var(--accent); border-bottom: 0; } .more a:hover { color: var(--accent-hover); } /* ========================================================================= WRITING LOG — date · [LEVEL] · title / lede ========================================================================= */ .log { display: flex; flex-direction: column; } .log__entry { display: grid; grid-template-columns: 64px 64px 1fr; gap: 12px 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); } .log__date { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .log__level { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-muted); text-transform: uppercase; white-space: nowrap; } .log__level--note { color: var(--accent); } .log__level--log { color: var(--fg-muted); } .log__body { min-width: 0; } .log__title { font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: -0.012em; line-height: 1.3; color: var(--fg); margin-bottom: 4px; } .log__title a { color: var(--fg); border-bottom: 0; } .log__title a:hover { color: var(--accent-hover); } .log__lede { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--fg-muted); } @media (max-width: 560px) { .log__entry { grid-template-columns: auto auto; gap: 4px 12px; } .log__body { grid-column: 1 / -1; } } /* ========================================================================= PROFILE — small desaturated portrait + short prose ========================================================================= */ .profile { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start; padding: 8px 0 0; } .profile__plate { margin: 4px 0 0; } .profile__plate img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(100%) contrast(1.04) brightness(0.98); border: 1px solid var(--rule-strong); } .profile__body p { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--fg); margin-bottom: 14px; max-width: 56ch; } .profile__body p:last-of-type { margin-bottom: 22px; } .links { display: flex; flex-wrap: wrap; gap: 18px; } .links a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); border-bottom: 0; } .links a:hover { color: var(--accent-hover); } @media (max-width: 560px) { .profile { grid-template-columns: 1fr; gap: 20px; } .profile__plate { width: 96px; } } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { max-width: var(--container); width: 100%; margin: 0 auto; padding: 24px 32px 40px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-muted); text-transform: lowercase; } .site-footer p { margin: 0; } /* ========================================================================= TYPE TOGGLE — same widget as V3, sans candidates this time ========================================================================= */ .type-toggle { position: fixed; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 2px; padding: 7px 9px; background: var(--bg-deep); border: 1px solid var(--rule-strong); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: lowercase; z-index: 100; } .type-toggle__label { color: var(--fg-muted); padding-right: 9px; margin-right: 4px; border-right: 1px solid var(--rule-strong); } .type-toggle button { color: var(--fg-muted); padding: 4px 7px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color var(--in) linear var(--hold); } .type-toggle button:hover { color: var(--fg); } .type-toggle button[aria-pressed="true"] { color: var(--accent); } @media (max-width: 560px) { .type-toggle { bottom: 12px; right: 12px; padding: 6px 7px; font-size: 9.5px; } } /* ========================================================================= PRINT ========================================================================= */ @media print { body::before, .type-toggle { display: none; } body { background: white; color: black; } a { color: black; border-bottom: 0; } }