/* Angus Lewington — lewington.online Identity: precise, grounded, built-to-last. Olive accent on clean white, one committed dark-olive band. Deliberately unlike the Alien IT space theme. */ /* self-hosted variable fonts (latin) — no third-party render-blocking request */ @font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('/assets/fonts/hanken.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Spline Sans Mono'; src: url('/assets/fonts/spline.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } :root { /* surfaces */ --bg: oklch(0.992 0 0); --surface: oklch(0.970 0.006 115); --line: oklch(0.895 0.010 115); /* ink */ --ink: oklch(0.235 0.012 110); --ink-soft: oklch(0.405 0.014 112); --ink-mute: oklch(0.530 0.013 112); /* brand — olive */ --olive: oklch(0.500 0.098 116); --olive-ink: oklch(0.430 0.090 118); /* links on white */ --olive-deep: oklch(0.270 0.038 124); /* dark band bg */ --olive-deep2: oklch(0.235 0.034 126); --olive-bright:oklch(0.800 0.140 116); /* accent on dark */ /* on-dark ink */ --paper: oklch(0.955 0.010 110); --paper-soft:oklch(0.820 0.018 112); --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, monospace; --maxw: 72rem; --gutter: clamp(1.25rem, 5vw, 4rem); --radius: 14px; --z-base: 1; --z-sticky: 100; --z-skip: 200; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: #fbfbf9; background: var(--bg); color: #2c2c27; color: var(--ink); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; margin: 0; } p { margin: 0; text-wrap: pretty; } a { color: var(--olive-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } strong { font-weight: 600; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--olive-bright); color: var(--olive-deep2); } .skip { position: absolute; left: 0; top: 0; transform: translateY(-120%); z-index: var(--z-skip); background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; border-radius: 0 0 10px 0; font-weight: 500; text-decoration: none; } .skip:focus { transform: translateY(0); } :focus-visible { outline: 2.5px solid var(--olive); outline-offset: 3px; border-radius: 3px; } /* ---------- shared layout ---------- */ main > section { padding-inline: var(--gutter); } .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .section-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); } .section-head__note { margin-top: 0.6rem; color: var(--ink-soft); font-size: 1.0625rem; max-width: 46ch; } /* ---------- header ---------- */ .site { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem var(--gutter); background: color-mix(in oklch, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .site.is-stuck { border-bottom-color: var(--line); background: color-mix(in oklch, var(--bg) 97%, transparent); } .mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); } .mark__glyph { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--olive-deep); color: var(--paper); } .mark__name { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.02rem; } .nav { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.75rem); } .nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem; } .nav a:hover { color: var(--ink); } .nav__cta { color: var(--ink) !important; border: 1px solid var(--line); border-radius: 999px; padding: 0.42rem 0.95rem; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .nav__cta:hover { border-color: var(--olive); background: var(--surface); } .nav a:not(.nav__cta) { display: none; } @media (min-width: 720px) { .nav a:not(.nav__cta) { display: inline; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: clip; display: flex; align-items: center; min-height: min(88svh, 760px); padding-block: clamp(3rem, 9vw, 6rem); } .hero__deco { position: absolute; inset: 0; z-index: 0; color: var(--olive); pointer-events: none; display: grid; justify-items: end; align-items: center; } .hero__deco svg { width: clamp(420px, 60vw, 760px); height: auto; opacity: 0.10; transform: translateX(22%); } .hero__deco .contours circle { transition: none; } .hero__inner { position: relative; z-index: 1; max-width: 40ch; } .tag { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; color: var(--olive-ink); margin-bottom: 1.4rem; } .hero__name { font-size: clamp(2.9rem, 2rem + 9vw, 5.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; margin-bottom: 1.4rem; } .hero__name span { display: block; } .hero__lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.1rem; max-width: 22ch; } .hero__sub { color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.2rem); max-width: 40ch; margin-bottom: 2rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-weight: 500; font-size: 1rem; padding: 0.7rem 1.25rem; border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform 0.18s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .btn--solid { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } .btn--solid:hover { background: var(--olive-deep); border-color: var(--olive-deep); color: var(--paper); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--olive); color: var(--ink); transform: translateY(-2px); } /* ---------- about ---------- */ .about { padding-block: clamp(3.5rem, 8vw, 7rem); max-width: var(--maxw); margin-inline: auto; } .about__body { display: grid; gap: 1.25rem; max-width: 60ch; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.6; color: var(--ink-soft); } .about__body strong { color: var(--ink); } .facts { margin: 1rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2.5rem; } .facts div { display: grid; gap: 0.15rem; } .facts dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink-mute); } .facts dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.01em; } .facts a { color: var(--olive-ink); text-decoration: none; } .facts a:hover { text-decoration: underline; } /* ---------- work ---------- */ .work { padding-block: clamp(2rem, 5vw, 4rem); max-width: var(--maxw); margin-inline: auto; } .work__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .work__list li { border-bottom: 1px solid var(--line); } .work__list li span { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1rem + 2.2vw, 2.4rem); letter-spacing: -0.025em; color: var(--ink); padding: clamp(0.7rem, 1.6vw, 1.15rem) 0; transition: color 0.2s var(--ease), transform 0.25s var(--ease); } .work__list li:hover span { color: var(--olive); transform: translateX(0.6rem); } .work__foot { margin-top: 1.75rem; color: var(--ink-soft); font-size: 1.0625rem; } .work__foot a { font-weight: 500; text-decoration: none; } .work__foot a:hover { text-decoration: underline; } /* ---------- principles (dark band) ---------- */ .principles { background: var(--olive-deep); color: var(--paper); padding-block: clamp(4rem, 9vw, 8rem); margin-block: clamp(2rem, 5vw, 4rem); } .principles__inner { max-width: var(--maxw); margin-inline: auto; } .principles .section-head h2 { color: var(--paper); } .principles .section-head__note { color: var(--paper-soft); } .creed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; } @media (min-width: 760px) { .creed { grid-template-columns: 1fr 1fr; } } .creed li { padding: clamp(1.4rem, 2.5vw, 2rem) 0; border-top: 1px solid color-mix(in oklch, var(--paper) 16%, transparent); } @media (min-width: 760px) { .creed li { padding-inline: 0 2.5rem; } .creed li:nth-child(even) { padding-inline: 2.5rem 0; border-left: 1px solid color-mix(in oklch, var(--paper) 16%, transparent); } } .creed h3 { font-size: 1.4rem; color: var(--olive-bright); letter-spacing: -0.02em; margin-bottom: 0.5rem; } .creed p { color: var(--paper-soft); font-size: 1.0625rem; line-height: 1.55; max-width: 40ch; } /* ---------- contact ---------- */ .contact { padding-block: clamp(3rem, 7vw, 6rem); max-width: var(--maxw); margin-inline: auto; } .contact__lead { font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); max-width: 38ch; color: var(--ink); margin-bottom: 2rem; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; } .contact__links { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ---------- footer ---------- */ .foot { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; max-width: var(--maxw); margin-inline: auto; } .foot__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; } .foot__meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-mute); } /* ---------- motion ---------- Gated on .reveal-ready, which site.js adds only once it can observe. If JS never runs, nothing is hidden — content ships visible, never blank. */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); } .reveal-ready [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal-ready .hero [data-reveal] { transform: translateY(14px); } .reveal-ready .hero.in [data-reveal] { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal-ready .hero.in .tag { transition-delay: 0.05s; } .reveal-ready .hero.in .hero__name { transition-delay: 0.12s; } .reveal-ready .hero.in .hero__lead { transition-delay: 0.24s; } .reveal-ready .hero.in .hero__sub { transition-delay: 0.32s; } .reveal-ready .hero.in .cta-row { transition-delay: 0.40s; } .hero__deco svg { animation: drift 26s ease-in-out infinite alternate; } @keyframes drift { to { transform: translateX(15%); } } @media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal], .reveal-ready .hero [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__deco svg { animation: none; } .btn:hover, .work__list li:hover span { transform: none; } } /* ---------- copy-email affordance ---------- Sits beside the mailto button in the contact section. A real