@charset "utf-8"; /* ========================================================================= forked.net — redesign stylesheet (2026) — "Lithograph" theme Hand-written, no framework, no build step. THEME ARCHITECTURE ------------------ Layout / type-scale / spacing tokens are theme-agnostic and live in :root. The COLOR palette lives in swappable theme blocks so a second theme is a token swap, not a rewrite: :root -> warm light palette (default) :root[data-theme="dark"] -> the original dark "Lithograph" palette, kept for a future dark-mode toggle. A dark-mode toggle can later set with no redesign. Existing class/id hooks (#nav, .TableHead, .TableRow, .featurebox, .pagetitle, .content, .sitemap, .sidebar, .legacypage …) are preserved and re-themed so the server-rendered markup and out-of-scope pages keep working. ========================================================================= */ :root{ /* ----- palette: light (default) — neutral white/ink with the gold accent ----- */ --bg: #f5f5f2; /* page background */ --bg-2: #eeeeea; /* recessed surface (warm, ~1 step under bg) */ --bg-3: #e7e7e1; /* recessed card (warm, ~2 steps under bg) */ --fg: oklch(26% 0.018 60); /* warm near-black ink */ --fg-2: oklch(43% 0.018 60); /* secondary text */ --fg-3: oklch(52% 0.020 65); /* muted labels — 52% clears WCAG AA (5.06:1) on --bg for the 10–11px mono labels/footer copy */ --rule: oklch(87% 0.014 80); /* subtle warm hairline */ --rule-2: oklch(78% 0.018 80); /* stronger warm rule */ --accent: oklch(50% 0.12 65); /* burnished gold — 50% gives 5.66:1 on --bg (comfortably clears WCAG AA for the small mono links/order buttons) */ --accent-ink:oklch(48% 0.12 62); /* deeper gold */ /* legacy aliases so existing component CSS re-themes for free */ --ink:var(--fg); --muted:var(--fg-2); --border:var(--rule); --surface:var(--bg-2); --surface-2:var(--bg-3); --header-bg:var(--bg); --header-ink:var(--fg); --accent-dark:var(--fg); /* link hover target */ --on-accent:var(--bg); /* text sitting on a gold fill */ --ok:oklch(72% 0.13 150); /* ----- type (theme-agnostic) ----- */ --serif:"Crimson Pro","Newsreader","Iowan Old Style",Georgia,serif; /* display */ --body: "Newsreader","Iowan Old Style",Georgia,serif; /* body */ --font: var(--body); /* legacy alias */ --mono: "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ----- metrics (theme-agnostic) ----- */ --maxw:1180px; --radius:0; --radius-sm:0; /* Lithograph: sharp corners everywhere */ --shadow:none; --shadow-lg:none; /* Lithograph: no shadows */ --gap:2rem; color-scheme: light; /* native UI (scrollbars, form controls) stays light */ } /* Dark "Lithograph" palette — the original design, preserved verbatim so a dark-mode toggle can set later (no redesign needed). */ :root[data-theme="dark"]{ --bg: oklch(16% 0.012 60); --bg-2: oklch(20% 0.014 60); --bg-3: oklch(25% 0.015 60); --fg: oklch(94% 0.02 80); --fg-2: oklch(70% 0.025 80); --fg-3: oklch(60% 0.02 80); --rule: oklch(36% 0.015 60); --rule-2: oklch(46% 0.02 60); --accent: oklch(80% 0.11 75); --accent-ink:oklch(85% 0.10 75); } /* Auto dark for visitors whose OS prefers dark (no toggle, no JS). Mirrors the [data-theme="dark"] tokens above — KEEP THE TWO IN SYNC. :not([data-theme]) lets a future explicit toggle override this OS default. */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg: oklch(16% 0.012 60); --bg-2: oklch(20% 0.014 60); --bg-3: oklch(25% 0.015 60); --fg: oklch(94% 0.02 80); --fg-2: oklch(70% 0.025 80); --fg-3: oklch(60% 0.02 80); --rule: oklch(36% 0.015 60); --rule-2: oklch(46% 0.02 60); --accent: oklch(80% 0.11 75); --accent-ink:oklch(85% 0.10 75); color-scheme: dark; } } /* ---------- reset / base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; border:0; display:block; } a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--fg); } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3{ font-family:var(--serif); line-height:1.05; font-weight:400; color:var(--fg); margin:0 0 .5em; letter-spacing:-0.02em; } h1{ font-size:clamp(2.4rem,6vw,5rem); } h2{ font-size:clamp(1.6rem,3vw,2.4rem); } h3{ font-size:1.4rem; } p{ margin:0 0 1rem; } em{ font-style:italic; } hr{ border:0; border-top:1px solid var(--rule); margin:2rem 0; } .clear{ clear:both; } .floatleft{ float:left; } /* legacy utilities kept for out-of-scope pages */ .floatright{ float:right; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } .skip-link{ position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--on-accent); padding:.6rem 1rem; z-index:100; } .skip-link:focus{ left:0; } /* ========================================================================= FOLIO (top bar) — restyles .site-header into the masthead/nav ========================================================================= */ .site-header{ background:var(--bg); border-bottom:1px solid var(--rule); } .folio{ display:grid; grid-template-columns:auto 1fr auto auto; position:relative; align-items:center; gap:18px; padding:18px 28px; font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); } /* upper-left placeholder logo */ .folio .logo-ph{ display:inline-grid; place-items:center; width:58px; height:58px; border-radius:999px; border:1px solid var(--accent); font-family:var(--serif); font-style:italic; font-weight:500; font-size:25px; line-height:1; letter-spacing:-0.01em; white-space:nowrap; color:var(--fg); text-decoration:none; text-transform:none; } .folio .logo-ph .dn{ font-style:normal; color:var(--accent); } /* large centered wordmark masthead, below the nav */ .masthead{ text-align:center; padding:30px 28px 40px; border-top:1px solid var(--rule); } .masthead .wordmark{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(3rem,9vw,6rem); line-height:1; letter-spacing:-0.02em; color:var(--fg); text-decoration:none; display:inline-block; } .masthead .wordmark span{ font-style:normal; color:var(--accent); } .folio .folio-center{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--accent); letter-spacing:.06em; text-transform:none; text-align:center; } .folio nav.site-nav{ display:flex; gap:22px; justify-content:flex-end; } .folio #nav{ display:flex; gap:4px; margin-right:-.6rem; } .folio #nav li a{ color:var(--fg-2); font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .6rem; border-radius:0; transition:background-color .18s ease, color .18s ease; } /* subtle rectangular hover: a faint wash of the gold accent (adapts to dark mode) */ .folio #nav li a:hover{ color:var(--fg); background:color-mix(in oklch, var(--accent) 15%, transparent); } .folio #nav li#ip a{ text-transform:none; } .folio #nav .lbl-short{ display:none; } /* .nav-drop wraps the primary nav + the Login/toggle actions. In wide mode it collapses out of layout (display:contents) so the nav stays inline and the actions form their own dropdown; on mobile it becomes one floating panel. */ .nav-drop{ display:contents; } /* Login + theme toggle. In wide mode these live inside the hamburger dropdown (anchored under the toggle, top-right); on mobile they sit at the bottom of the menu panel — see the .nav-toggle-btn rules and the mobile media query. */ .folio-actions{ display:none; flex-direction:column; align-items:flex-end; gap:9px; position:absolute; top:100%; right:0; z-index:50; background:var(--bg); border:1px solid var(--rule); box-shadow:0 8px 18px rgba(0,0,0,.14); padding:12px 16px; } #nav-toggle:checked ~ .nav-drop .folio-actions{ display:flex; } .client-login{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); padding:.32rem .6rem; line-height:1.4; text-decoration:none; white-space:nowrap; border-radius:0; transition:background-color .18s ease, color .18s ease; } .client-login:hover{ color:var(--fg); background:color-mix(in oklch, var(--accent) 15%, transparent); } /* theme toggle (sun/moon) — icon reflects the active theme incl. OS default */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; background:none; border:0; padding:6px; margin:0; cursor:pointer; color:var(--fg-2); line-height:0; } .theme-toggle:hover{ color:var(--accent); } .theme-toggle svg{ width:18px; height:18px; display:block; } .theme-toggle .sun{ display:none; } :root[data-theme="dark"] .theme-toggle .sun{ display:block; } :root[data-theme="dark"] .theme-toggle .moon{ display:none; } @media (prefers-color-scheme:dark){ :root:not([data-theme]) .theme-toggle .sun{ display:block; } :root:not([data-theme]) .theme-toggle .moon{ display:none; } } /* nav toggle (CSS-only checkbox hack) — always shown; ordered to the far right so it sits after the inline primary nav in wide mode */ .nav-toggle{ display:none; } .nav-toggle-btn{ display:block; cursor:pointer; padding:.25rem; justify-self:end; order:1; } .nav-toggle-btn span{ display:block; width:18px; height:1px; background:var(--fg-3); margin:4px 0; opacity:.6; transition:.2s; } .nav-toggle-btn:hover span{ opacity:1; background:var(--fg-2); } /* Progressive collapse. The primary nav stays inline at every width (it never moves into the hamburger — that panel only holds Login + theme toggle, via the wide-mode .folio-actions rules above). As the viewport narrows we shed, in order: (1) the tagline, (2) the full nav labels in favour of short ones. */ /* tagline hides once logo + full nav crowd it off the top row; drop the tagline grid column so the nav stays right-aligned next to the hamburger */ @media (max-width:860px){ .folio{ grid-template-columns:auto 1fr auto; } .folio .folio-center{ display:none; } } /* full labels no longer fit — abbreviate inline (Dedi / VPS / Colo / IPs), still on the top row, never in the burger */ @media (max-width:560px){ .folio #nav .lbl-full{ display:none; } .folio #nav .lbl-short{ display:inline; } } /* smallest phones: abbreviated is final — tighten gaps/size so it still fits */ @media (max-width:360px){ .folio{ padding:18px 18px; } .folio #nav{ gap:2px; } .folio #nav li a{ font-size:11px; letter-spacing:.08em; padding:.3rem .4rem; } } /* ========================================================================= HOME — Lithograph hero / services TOC / pull quote ========================================================================= */ .litho-hero{ padding:70px 28px 50px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; border-bottom:1px solid var(--rule); } .litho-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,7vw,6rem); line-height:.9; letter-spacing:-0.025em; margin:0; text-wrap:balance; color:var(--fg); } .litho-hero h1 em{ font-style:italic; color:var(--accent); } .litho-hero .right .lede{ font-family:var(--body); font-size:19px; line-height:1.5; color:var(--fg-2); margin:0 0 20px; max-width:42ch; } .litho-hero .right .lede::first-letter{ font-family:var(--serif); font-weight:500; font-size:2.6em; line-height:1; color:var(--accent); } .litho-hero .right .meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--fg-3); line-height:1.9; border-top:1px solid var(--rule); padding-top:14px; } .litho-hero .right .meta b{ color:var(--fg); font-weight:600; } .litho-hero .right .meta a{ color:var(--accent); } .litho-hero .right .meta a:hover{ color:var(--fg); } .litho-toc{ padding:56px 28px 60px; } .litho-toc .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); margin-bottom:18px; } .litho-entry{ display:grid; grid-template-columns:60px 1.4fr 1fr auto; gap:28px; padding:28px 0 24px; border-top:1px solid var(--rule); align-items:baseline; position:relative; } /* whole card is clickable: stretch the category link over the entire entry. Hovering anywhere then triggers the name's accent + pointer cursor. */ .litho-entry .name a::after{ content:""; position:absolute; inset:0; } .litho-entry:last-of-type{ border-bottom:1px solid var(--rule); } .litho-entry .roman{ font-family:var(--serif); font-style:italic; font-size:26px; color:var(--accent); } .litho-entry .name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-0.02em; line-height:1; color:var(--fg); margin:0; } .litho-entry .name em{ font-style:italic; } .litho-entry .name a{ color:inherit; text-decoration:none; } .litho-entry .name a:hover{ color:var(--accent); } .litho-entry .desc{ font-family:var(--body); font-size:16px; line-height:1.5; color:var(--fg-2); margin:0; max-width:40ch; } .litho-entry .priceblock{ text-align:right; } .litho-entry .priceblock .from{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); display:block; margin-bottom:4px; } .litho-entry .priceblock .price{ font-family:var(--serif); font-weight:400; font-size:36px; letter-spacing:-0.01em; line-height:1; color:var(--fg); font-variant-numeric:tabular-nums; } .litho-entry .priceblock .price small{ font-family:var(--mono); font-size:13px; color:var(--fg-3); margin-left:4px; } .litho-entry .priceblock a{ display:inline-block; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); position:relative; z-index:1; } .litho-entry .priceblock a:hover{ color:var(--fg); } /* centered bullet points — the home statement block (replaced an older pull quote) */ .litho-statement{ margin:12px 28px 0; padding:56px 28px; text-align:center; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .litho-statement .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); margin-bottom:28px; } .litho-statement ul{ list-style:none; margin:0; padding:0; } .litho-statement li{ font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.35; color:var(--fg); margin-bottom:.55em; } .litho-statement li:last-child{ margin-bottom:0; } .litho-statement li::before{ content:"\2022\00a0\00a0"; color:var(--accent); } .litho-statement li::after{ content:"\00a0\00a0\2022"; color:var(--accent); } @media (max-width:820px){ .litho-hero{ grid-template-columns:1fr; gap:32px; padding:48px 28px 36px; } } @media (max-width:700px){ .litho-entry{ grid-template-columns:auto 1fr; gap:8px 18px; } .litho-entry .roman{ grid-row:1; } .litho-entry .name{ grid-row:1; } .litho-entry .desc{ grid-column:1 / -1; } .litho-entry .priceblock{ grid-column:1 / -1; text-align:left; } } /* ========================================================================= GENERIC CONTENT + INNER PAGES (re-themed via tokens) ========================================================================= */ #main{ display:block; max-width:960px; margin:0 auto; } .content,.section{ padding:2.5rem 0; } .content p,.section p{ color:var(--fg-2); } .lead{ font-family:var(--body); font-size:1.2rem; color:var(--fg-2); max-width:65ch; } .muted{ color:var(--fg-2); } .content a{ text-decoration:underline; text-decoration-color:var(--rule-2); } .content a:hover{ text-decoration-color:var(--accent); } /* inner page title */ .pagetitle{ background:none; color:var(--fg); padding:40px 0 24px; margin:0; border-bottom:1px solid var(--rule); background-image:none; height:auto; width:auto; } .pagetitle h1{ color:var(--fg); margin:0; font-size:clamp(2rem,5vw,3.4rem); } /* ---------- feature boxes (ul.featurebox) ---------- */ .features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; padding:0 28px 40px; } ul.featurebox{ border-top:1px solid var(--rule); padding:24px 24px 24px 0; margin:0; list-style:none; } ul.featurebox li{ color:var(--fg-2); font-family:var(--body); font-size:1rem; line-height:1.5; margin:0 0 .5rem; padding:0 0 0 1.3rem; background:none; position:relative; } ul.featurebox li::before{ content:"\2022"; position:absolute; left:0; color:var(--accent); } ul.featurebox li.security,ul.featurebox li.privacy, ul.featurebox li.speed,ul.featurebox li.support{ font-family:var(--serif); font-size:1.5rem; font-weight:400; color:var(--fg); margin-bottom:.85rem; padding:0; border:0; background:none; height:auto; } ul.featurebox li.security::before,ul.featurebox li.privacy::before, ul.featurebox li.speed::before,ul.featurebox li.support::before{ content:none; } /* ---------- pricing grid (.TableHead / .TableRow) ---------- */ .pricing{ overflow:visible; margin:1.5rem 0; position:relative; } /* fast custom row tooltip (replaces the slow native title); suppressed over the price cell */ .TableRow[data-tip]{ position:relative; } .TableRow[data-tip]::after{ content:attr(data-tip); position:absolute; left:1.5rem; top:calc(100% - .5rem); z-index:6; width:max-content; max-width:440px; background:var(--fg); color:var(--bg); font-family:var(--body); font-size:.85rem; line-height:1.45; padding:.45rem .7rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .1s ease .08s, visibility .1s ease .08s; } .TableRow[data-tip]:hover::after{ opacity:1; visibility:visible; } .TableRow[data-tip]:has(li.order:hover)::after{ opacity:0; visibility:hidden; transition:none; } .TableRow[data-tip=""]::after{ content:none; } /* In dark mode the inverting fg/bg above would make a glaring white tooltip, so use an elevated dark surface with light text instead (both theme paths). */ :root[data-theme="dark"] .TableRow[data-tip]::after{ background:var(--bg-3); color:var(--fg); border:1px solid var(--rule-2); } @media (prefers-color-scheme:dark){ :root:not([data-theme]) .TableRow[data-tip]::after{ background:var(--bg-3); color:var(--fg); border:1px solid var(--rule-2); } } .TableHead,.TableRow{ width:100%; min-width:760px; height:auto; background-image:none; } .TableHead{ background:none; border-bottom:1px solid var(--rule-2); } .TableHead ul,.TableRow ul{ display:flex; align-items:stretch; margin:0; padding:0; } .TableHead li,.TableRow li{ flex:1 1 0; padding:.85rem .6rem; text-align:center; display:flex; align-items:center; justify-content:center; min-width:0; height:auto; line-height:1.3; float:none; } .TableHead li{ color:var(--fg-3); font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; } .TableHead li.product,.TableRow li.product{ flex:2 1 0; justify-content:flex-start; text-align:left; } .TableHead li.order,.TableRow li.order{ flex:1.4 1 0; } .TableHead li.speed,.TableRow li.speed, .TableHead li.storage,.TableRow li.storage{ flex:1.5 1 0; } .TableHead li.ips,.TableRow li.ips{ flex:.7 1 0; } .TableRow{ border-bottom:1px solid var(--rule); background:none; font-size:1rem; color:var(--fg-2); } .TableRow.odd,.TableRow.even{ background:none; } .TableRow.hover,.TableRow:hover{ background:var(--bg-2); } .TableRow li.product{ font-family:var(--serif); font-size:1.3rem; font-weight:400; text-transform:none; color:var(--fg); } .TableRow li.product a{ color:var(--fg); } .TableRow li.cpu,.TableRow li.speed,.TableRow li.memory{ font-family:var(--mono); font-size:.85rem; color:var(--fg-2); } .TableRow li.order{ padding:.5rem; } .TableRow li.order a{ display:inline-block; background:none; color:var(--accent); font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; padding:.5rem; text-align:center; text-decoration:none; height:auto; } .TableRow li.order a:hover{ color:var(--fg); } /* responsive pricing → stacked rows with labels (PHP stays verbatim) */ @media (max-width:820px){ .pricing{ overflow:visible; } .TableRow[data-tip]::after{ display:none; } .TableHead{ display:none; } .TableRow{ min-width:0; margin-bottom:0; border-bottom:1px solid var(--rule-2); padding:1rem 0; } .TableRow ul{ flex-direction:column; } .TableRow li{ justify-content:space-between; text-align:right; padding:.5rem 0; border-bottom:1px solid var(--rule); } .TableRow li:last-child{ border-bottom:0; } .TableRow li::before{ content:attr(data-label); font-family:var(--mono); font-weight:500; color:var(--fg-3); text-transform:uppercase; font-size:.66rem; letter-spacing:.1em; margin-right:1rem; text-align:left; } .TableRow li.product{ font-size:1.4rem; justify-content:flex-start; } .TableRow li.product::before,.TableRow li.order::before{ content:none; } .TableRow li.order{ padding:.5rem 0; justify-content:flex-start; } } /* ========================================================================= FOOTER — restyles #footer into the Lithograph mono columns ========================================================================= */ #footer{ background:none; border-top:1px solid var(--rule); margin-top:3rem; padding:28px 0; color:var(--fg-2); min-height:0; background-image:none; } #footercontent{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:center; column-gap:120px; row-gap:0; width:auto; max-width:960px; font-family:var(--mono); font-size:13.5px; line-height:1.9; } #footer ul.sitemap,#footer ul.contact{ float:none; width:auto; margin:0; text-align:left; } #footer .title{ font-family:var(--mono); color:var(--fg-3); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; } #footer li{ font-size:13.5px; line-height:1.9; color:var(--fg-2); text-align:left; } #footer a{ color:var(--fg); border-bottom:1px solid var(--rule); padding-bottom:1px; } #footer a:hover{ color:var(--accent); border-color:var(--accent); } #footer .social{ margin-top:0; } #footer .social a{ margin-right:1rem; } #copy{ grid-column:1 / -1; border-top:1px solid var(--rule); margin-top:1rem; padding-top:1rem; color:var(--fg-3); font-size:10.5px; letter-spacing:.04em; float:none; margin-right:0; text-align:left; } #copy a{ border:0; } /* generic responsive prose tables on inner pages */ table.report{ width:100%; border-collapse:collapse; } table.report td,table.report th{ padding:.6rem; border-bottom:1px solid var(--rule); font-size:.95rem; color:var(--fg-2); text-align:left; } /* ---------- legacy static pages (about/*, support/*) ---------- */ .legacypage{ padding-bottom:1.5rem; } .legacypage::after{ content:""; display:block; clear:both; } .legacypage .pagetitle{ background:none; color:var(--fg); border-bottom:1px solid var(--rule); padding:40px 0 24px; margin:0 0 1.5rem; } .legacypage .pagetitle h1{ color:var(--fg); margin:0 0 .25rem; } .content h1{ font-family:var(--serif); font-size:2rem; font-weight:400; margin:1rem 0 .5rem; color:var(--fg); } .content h2{ font-family:var(--serif); font-size:1.4rem; font-weight:400; margin:.75rem 0 .5rem; color:var(--fg-2); } .content code{ display:block; font-family:var(--mono); font-style:normal; background:var(--bg-2); border-left:2px solid var(--accent); padding:.75rem 1rem; margin:.4rem 0; color:var(--fg-2); border-radius:0; white-space:normal; font-size:.9rem; } /* section headings clear any figure floated beside the previous block */ .legacypage .content h1{ clear:both; } /* photos set beside body copy (about/network) */ .legacypage .content img.fig{ float:right; max-width:42%; height:auto; margin:.25rem 0 1rem 1.5rem; border:1px solid var(--rule); } @media (max-width:600px){ .legacypage .content img.fig{ float:none; display:block; max-width:100%; margin:.5rem 0 1rem; } } /* sidebar sub-nav */ .sidebar{ width:230px; background:none; min-height:0; padding:0; margin:0 0 1rem; background-image:none; } .sidebar ul li a{ display:block; padding:.5rem .55rem; border-bottom:1px solid var(--rule); color:var(--fg-2); font-family:var(--mono); font-weight:400; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; background:none; background-image:none; height:auto; line-height:1.4; width:auto; text-decoration:none; border-radius:0; transition:background-color .18s ease, color .18s ease; } /* matches the top-nav hover: faint gold rectangle on these mono "menu item" links */ .sidebar ul li a:hover{ color:var(--fg); background:color-mix(in oklch, var(--accent) 15%, transparent); } .sidebar ul li.active a{ color:var(--accent); background:none; width:auto; height:auto; line-height:1.4; background-image:none; } /* content beside the floated sidebar */ .legacypage .content{ width:auto; overflow:hidden; padding:0; } .legacypage .content.floatright{ float:right; width:calc(100% - 260px); } /* contact info table */ table.contactus{ width:100%; border-collapse:collapse; } table.contactus td{ padding:.5rem .6rem; border-bottom:1px solid var(--rule); vertical-align:top; font-size:.95rem; color:var(--fg-2); } table.contactus td p{ margin:0; } @media (max-width:820px){ #footercontent{ grid-template-columns:repeat(2,1fr); } .sidebar,.legacypage .content,.legacypage .content.floatright{ float:none; width:auto; padding:0; } .sidebar ul{ display:flex; flex-wrap:wrap; gap:0 1.2rem; margin-bottom:1rem; } .sidebar ul li a{ border:0; padding:.3rem .5rem; } } @media (max-width:520px){ #footercontent{ grid-template-columns:1fr 1fr; } }