/* SD Pen Club site styles. Shared by every page; link as /assets/site.css. PALETTE Every color below reads from the tokens in :root. The navy is --ink. To make a black version, swap that one line, for example: --ink: #111418; --ink-deep and --ink-shadow are mixed from --ink (see the @supports block under :root), so the deep hover shade, the footer and every shadow follow the swap on their own. The fixed values next to them are fallbacks for old browsers and match the navy build exactly. --teal is the accent and stays put in either version. MOTION All movement lives in @media (prefers-reduced-motion: no-preference) blocks, so reduced motion gets a still page. Anything that starts hidden (scroll reveal, the nib drawing) is also gated behind the "js" class that site.js puts on , so the page stays fully visible when JavaScript fails. The hero entrance is pure CSS keyframes that end on the element's normal style, so it never needs JavaScript. */ :root { --ink: #082F48; --ink-deep: #061F31; --teal: #4B8EA2; --text: #1C2230; --muted: #5E6573; --line: #E6E8EC; --soft: #F7F8FA; --white: #FFFFFF; --radius: 10px; --wrap: 1120px; --read: 640px; --gutter: 24px; --header-h: 76px; --glass: rgba(0, 0, 0, .48); --teal-deep: #35768A; --teal-soft: #9CC1CC; --on-ink: #FFFFFF; --on-ink-muted: rgba(255, 255, 255, .76); --on-ink-line: rgba(255, 255, 255, .16); --ink-texture: rgba(255, 255, 255, .035); --ink-shadow: rgba(8, 47, 72, .16); --focus: var(--teal); --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); } @supports (color: color-mix(in srgb, red, blue)) { :root { /* 66% ink with a near black gives exactly #061F31 from the navy. */ --ink-deep: color-mix(in srgb, var(--ink) 66%, #020004); --ink-shadow: color-mix(in srgb, var(--ink) 16%, transparent); --teal-soft: color-mix(in srgb, var(--teal) 55%, #FFFFFF); } } /* Base */ * { box-sizing: border-box; } html { scroll-padding-top: 88px; } body { margin: 0; font-family: "Open Sans", system-ui, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--text); background: var(--white); } h1, h2, h3 { font-family: Arimo, Arial, sans-serif; font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0 0 .6em; letter-spacing: -.01em; } p { margin: 0 0 1.2em; } a { color: var(--ink); } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } section { padding: 128px 0; } section + section { border-top: 1px solid var(--line); } .kicker { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin: 0 0 18px; } .hidden { position: absolute; left: -9999px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Text links: a quiet resting underline, and a full one that sweeps in on hover and focus. */ :where(main p, main li, .site-footer) a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; } @supports (color: color-mix(in srgb, red, blue)) { :where(main p, main li, .site-footer) a:not(.btn) { text-decoration: none; background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent)); background-size: 0% 1.5px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease-out), color .2s ease; } :where(main p, main li, .site-footer) a:not(.btn):is(:hover, :focus-visible) { background-size: 100% 1.5px, 100% 1px; } } /* Ink surfaces: navy with white type. Reuse .on-ink on any band, card or footer. */ .on-ink { background-color: var(--ink); color: var(--on-ink); --focus: var(--teal-soft); } .on-ink :is(h1, h2, h3) { color: var(--on-ink); } .on-ink p { color: var(--on-ink-muted); } .on-ink a:not(.btn) { color: var(--on-ink); } .on-ink .kicker { color: var(--teal-soft); } .ink-texture { background-image: repeating-linear-gradient(135deg, var(--ink-texture) 0 1px, transparent 1px 16px); } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: background-color .35s ease, border-color .3s ease, box-shadow .3s ease; } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 24px -20px var(--ink-shadow); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); border-radius: 6px; transition: color .35s ease; } .logo svg { width: 36px; height: 36px; flex: none; } .logo svg :is(line, circle) { transition: stroke .35s ease, fill .35s ease; } .logo-text { display: flex; flex-direction: column; line-height: 1.05; } .logo-text strong { font-family: Arimo, Arial, sans-serif; font-size: 18px; letter-spacing: .06em; } .logo-text span { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-top: 4px; transition: color .35s ease; } .nav-toggle { background: none; border: 0; padding: 10px; cursor: pointer; color: var(--ink); border-radius: 8px; transition: color .35s ease; } .nav-toggle svg { width: 26px; height: 26px; } .nav-panel { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; display: none; box-shadow: 0 18px 30px -24px var(--ink-shadow); } .nav-panel.open { display: block; } .nav-panel a { display: block; color: var(--ink); text-decoration: none; font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: color .2s ease; } .nav-panel a:last-child { border-bottom: 0; } .nav-panel a:focus-visible { outline-offset: -2px; border-radius: 4px; } @media (min-width: 900px) { .nav-toggle { display: none; } .nav-panel { position: static; display: flex !important; gap: 36px; background: none; border: 0; padding: 0; box-shadow: none; } .nav-panel a { position: relative; border: 0; font-size: 15px; padding: 6px 0; color: var(--muted); } .nav-panel a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: right center; } .nav-panel a:is(:hover, :focus-visible) { color: var(--ink); } .nav-panel a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left center; } .nav-panel a:focus-visible { outline-offset: 4px; } } /* Header over the photo hero (homepage, class .over-hero). At the top of the page it is clear with white type; it turns back into the white header as soon as the page scrolls (site.js adds .scrolled) or the phone menu opens (.menu-open). The hero's own top shade keeps the white type readable. A