/* ========================================================================== Pepino server network - shared design system Dark by default (no media query). Light is opt-in: . No external fonts or assets. All type effects come from weight/size/tracking. ========================================================================== */ :root { /* dark is the primary design */ --bg: #070c09; --surface: #101a13; --surface-2: #16241b; --text: #eaf5ea; --text-2: #93ad9c; --border: #1d2e23; --border-2: #2e4736; --accent: #57d97e; /* green */ --punch: #bcf252; /* lime, for emphasis only */ --on-accent: #04140a; --ok: #6ce596; --ok-bg: rgba(60, 200, 110, .14); --down: #ff8f80; --down-bg: rgba(255, 80, 60, .15); --unk: #f4d264; --unk-bg: rgba(240, 200, 60, .14); --radius: 8px; --gutter: 1.1rem; /* page side gutter, see .wrap */ color-scheme: dark; --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Light theme: only when the visitor asks for it (theme.js sets the attribute). A light OS setting alone must NOT flip the site - dark is the default. */ :root[data-theme="light"] { color-scheme: light; --bg: #eef4ec; --surface: #ffffff; --surface-2: #e7f0e5; --text: #0c1710; --text-2: #46604f; --border: #cadfcd; --border-2: #a8c9ae; --accent: #157a3c; --punch: #3c7a12; --on-accent: #ffffff; --ok: #10682f; --ok-bg: #d8f0dc; --down: #9c1c12; --down-bg: #fbe0dd; --unk: #6c4f08; --unk-bg: #f7eccd; } *, *::before, *::after { box-sizing: border-box; } /* Sticky header must not cover an anchor target (e.g. the skip link -> #main). */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.45; color: var(--text); background-color: var(--bg); background-image: radial-gradient(70rem 34rem at 8% -14%, rgba(87, 217, 126, .13), transparent 72%), radial-gradient(46rem 24rem at 100% 0%, rgba(188, 242, 82, .09), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 7px); background-repeat: no-repeat, no-repeat, repeat; min-height: 100vh; } h1, h2 { margin: 0 0 .35em; font-weight: 900; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; } h1 { font-size: clamp(2.7rem, 9vw, 5.2rem); } h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -.02em; } h1 .accent { color: var(--punch); } p { margin: 0 0 .8rem; } a { color: var(--accent); text-underline-offset: 3px; } a:hover { color: var(--punch); } code, kbd { font-family: var(--mono); } :focus-visible { outline: 3px solid var(--punch); outline-offset: 2px; border-radius: 3px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--punch); color: var(--on-accent); padding: .55rem 1rem; font-weight: 800; } .skip-link:focus { left: 0; color: var(--on-accent); } /* --------------------------------------------------------- layout ------- */ /* Every direct page gutter comes from here. Anything that also sets padding on a .wrap element must use padding-top/bottom only, or it wipes the gutter out and the content ends up flush against the viewport edge. */ .wrap { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } main { display: block; padding-bottom: 2.5rem; } /* --------------------------------------------------------- header ------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); } .site-header::after { content: ""; position: absolute; inset: auto 0 -2px 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--punch) 55%, transparent); } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.2rem; padding-top: .5rem; padding-bottom: .5rem; } .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 900; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--text); text-decoration: none; } .brand .logo { width: 26px; height: 26px; color: var(--accent); flex: none; } .brand:hover { color: var(--punch); } .brand .thin { color: var(--text-2); font-weight: 600; letter-spacing: .12em; font-size: .68rem; } .site-nav { margin-left: auto; } .site-nav ul { display: flex; flex-wrap: wrap; gap: .15rem; list-style: none; margin: 0; padding: 0; } .site-nav a { display: block; padding: .3rem .55rem; border-radius: 4px; color: var(--text-2); text-decoration: none; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .site-nav a:hover { background: var(--surface-2); color: var(--text); } .site-nav a[aria-current="page"] { color: var(--on-accent); background: var(--punch); } /* Icon only: no border, no background, no text. The padding is the tap target, the negative margin keeps the icon optically on the page gutter. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: .5rem; margin: -.5rem -.5rem -.5rem 0; border: 0; background: none; color: var(--text-2); cursor: pointer; line-height: 0; } .theme-toggle svg { width: 20px; height: 20px; flex: none; display: block; } .theme-toggle:hover { color: var(--punch); } .theme-toggle:focus-visible { outline: 3px solid var(--punch); outline-offset: 3px; border-radius: 3px; } /* Show the theme you will get: sun while dark is active, moon while light is. */ .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* --------------------------------------------------------- hero --------- */ /* padding-top/bottom only - a `padding` shorthand here would kill the .wrap gutter */ .hero { padding-top: 2.2rem; padding-bottom: 1.4rem; } .hero > :last-child { margin-bottom: 0; } .eyebrow { display: block; margin: 0 0 .55rem; padding-left: .6rem; border-left: 3px solid var(--punch); font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); } .lede { max-width: 46ch; color: var(--text-2); font-size: 1.02rem; } /* An eyebrow starts a new block, so it needs air above it - otherwise the gap between two steps reads exactly like the gaps inside one step. */ * + .eyebrow { margin-top: 1.9rem; } .statline { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 .55rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); } .note { border-left: 3px solid var(--unk); background: var(--unk-bg); color: var(--text); padding: .5rem .75rem; font-size: .9rem; margin: 0 0 .8rem; } .note[hidden] { display: none; } /* the