/* One stylesheet, both sites. The only thing that differs between nanocms.co.uk and nanocart.co.uk is --accent, set on by each page. */ :root{ --paper:#ffffff; --wash:#f5f7fa; --ink:#0f1216; --body:#3f4652; --muted:#5c646f; --line:rgba(15,18,22,.09); --edge:rgba(15,18,22,.14); --glass:rgba(255,255,255,.72); --accent:#5b3dd6; /* overridden per site */ --accent-wash:rgba(91,61,214,.07); --shadow-sm:0 1px 2px rgba(15,18,22,.05), 0 3px 10px rgba(15,18,22,.05); --shadow-md:0 2px 5px rgba(15,18,22,.05), 0 16px 36px -12px rgba(15,18,22,.16); --font:'Host Grotesk', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace; --wrap:1136px; /* six steps, each a real jump; the old page had fourteen sizes inside one ratio */ --t-h1:clamp(2.6rem,5.6vw,3.75rem); --t-h2:clamp(1.85rem,3.4vw,2.4rem); --t-h3:1.15rem; --t-body:17px; --t-small:14px; --t-micro:12px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;} body{ margin:0;background:var(--paper);color:var(--body); font-family:var(--font);font-size:var(--t-body);line-height:1.62; -webkit-font-smoothing:antialiased; } /* the surfaces we did not draw still carry the design */ ::selection{background:var(--accent-wash);color:var(--ink)} html{scrollbar-color:rgba(15,18,22,.26) transparent;scrollbar-width:thin} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:rgba(15,18,22,.2);border-radius:20px;border:3px solid var(--paper)} ::-webkit-scrollbar-thumb:hover{background:rgba(15,18,22,.32)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;color:var(--ink);letter-spacing:-.03em;line-height:1.08; font-weight:600;text-wrap:balance} h1{font-size:var(--t-h1);letter-spacing:-.04em} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);letter-spacing:-.02em} p{margin:0;text-wrap:pretty} strong{color:var(--ink);font-weight:600} code,kbd,pre{font-family:var(--mono)} .skip{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;border-radius:0 0 10px 0; background:var(--ink);color:#fff;font-size:var(--t-small);font-weight:600} .skip:focus{left:0} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,34px)} section{padding-block:clamp(58px,7.5vw,96px)} section[id]{scroll-margin-top:112px} /* a single soft wash, no plotted grid: the grid read as decoration and only existed behind the hero anyway */ body::before{content:"";position:fixed;inset:0;z-index:-1; background:radial-gradient(62% 42% at 50% -8%, var(--accent-wash), transparent 70%), linear-gradient(180deg,#fdfdfe 0%, var(--wash) 52%, #ffffff 100%)} /* ---------- bar ---------- */ /* the scrim covers the whole sticky box. Previously the pill covered 56 of 70px and page content scrolled visibly through the 14px strip above it. */ .bar{position:sticky;top:0;z-index:40;padding:22px 0 12px} .bar::before{content:"";position:absolute;inset:0;pointer-events:none; /* the scrim used to be painted solid white, which wiped the page wash out of the top strip of every page. Paint the page's own wash instead, fixed to the viewport so it lines up with body::before exactly. */ background:radial-gradient(62% 42% at 50% -8%, var(--accent-wash), transparent 70%), linear-gradient(180deg,#fdfdfe 0%, var(--wash) 52%, #ffffff 100%); background-attachment:fixed; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent)} .bar__in{position:relative;display:flex;align-items:center;gap:16px; min-height:54px;padding:0 10px 0 16px;border-radius:999px; border:1px solid var(--line);background:var(--glass); backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%); box-shadow:var(--shadow-sm)} .mark{display:inline-flex;align-items:center;gap:9px;white-space:nowrap; font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.02em} .mark i{width:9px;height:9px;border-radius:3px;background:var(--accent);font-style:normal} .mark span{color:var(--muted);font-weight:500} /* the sibling link: reads as a toggle, is two domains */ .sib{display:inline-flex;padding:3px;border-radius:999px;background:rgba(15,18,22,.05); border:1px solid transparent} .sib a,.sib span{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600; color:var(--muted);white-space:nowrap} .sib [aria-current]{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)} .sib a:hover{color:var(--ink)} .bar nav{margin-left:auto;display:flex;gap:2px} .bar nav a{padding:8px 11px;border-radius:9px;font-size:var(--t-small);color:var(--muted)} .bar nav a:hover{color:var(--ink);background:rgba(15,18,22,.05)} .bar .gh{margin-left:auto;display:inline-flex;align-items:center;gap:7px; padding:7px 13px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink); border:1px solid var(--line);background:rgba(255,255,255,.75)} .bar nav + .gh{margin-left:0} .bar .gh:hover{border-color:var(--edge)} .bar .gh svg{width:15px;height:15px} /* below 820 the section links move to their own row instead of disappearing */ @media (max-width:820px){ .bar{padding-top:16px} .bar__in{flex-wrap:wrap;padding:8px 10px;gap:10px;border-radius:20px} .bar nav{margin-left:0;order:3;width:100%;gap:2px;overflow-x:auto; padding-top:8px;border-top:1px solid var(--line);scrollbar-width:none} .bar nav::-webkit-scrollbar{display:none} .bar nav a{white-space:nowrap;padding:8px 10px} .bar .gh{margin-left:auto} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 20px;border-radius:11px;font-family:var(--font); font-size:15px;font-weight:600;border:1px solid transparent} .btn--solid{background:var(--ink);color:#fff} .btn--solid:hover{background:#000} .btn--ghost{border-color:var(--edge);background:var(--paper);color:var(--ink)} .btn--ghost:hover{border-color:rgba(15,18,22,.3)} /* ---------- hero ---------- */ .hero{padding-top:clamp(30px,4.5vw,56px);padding-bottom:clamp(30px,4vw,52px)} .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.5vw,58px);align-items:center} @media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:34px}} .hero h1 em{font-style:normal;color:var(--accent)} .hero__sub{margin-top:20px;max-width:50ch} .hero__cmd{margin-top:24px;display:inline-flex;align-items:center;gap:11px; padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper); font-family:var(--mono);font-size:13px;color:var(--ink);box-shadow:var(--shadow-sm)} .hero__cmd span{color:var(--muted)} .hero__cta{margin-top:24px;display:flex;gap:11px;flex-wrap:wrap;align-items:center} .hero__meta{margin-top:14px;font-size:var(--t-small);color:var(--muted)} .hero__meta b{color:var(--ink);font-weight:600} /* ---------- code plate ---------- */ .plate{border-radius:16px;border:1px solid var(--line);background:var(--glass); backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:var(--shadow-md);overflow:hidden} .plate__bar{display:flex;align-items:center;gap:7px;padding:11px 15px; border-bottom:1px solid var(--line);background:rgba(255,255,255,.55)} .plate__bar i{width:9px;height:9px;border-radius:50%;background:rgba(15,18,22,.13)} .plate__file{margin-left:7px;font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)} .plate pre{margin:0;padding:18px 20px;font-size:13px;line-height:1.8;color:var(--ink); overflow-x:auto;white-space:pre-wrap;word-break:break-word} .k{color:var(--accent)} .s{color:#0a6f59} .c{color:var(--muted)} /* ---------- facts ---------- */ /* real dt/dd pairs, and the first column answers "is this alive?" */ .facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0; border-block:1px solid var(--line)} .facts>div{padding:18px 0} .facts>div+div{border-left:1px solid var(--line);padding-left:20px} .facts dt{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin:0} .facts dd{margin:6px 0 0;font-size:1.18rem;font-weight:600;color:var(--ink); letter-spacing:-.02em;font-variant-numeric:tabular-nums} .facts dd small{display:block;margin-top:2px;font-size:var(--t-small);font-weight:400;color:var(--muted)} @media (max-width:720px){ .facts{grid-template-columns:repeat(2,1fr)} .facts>div:nth-child(odd){border-left:0;padding-left:0} .facts>div:nth-child(n+3){border-top:1px solid var(--line)} } /* ---------- prose ---------- */ .lede{max-width:66ch} .lede p{margin-top:16px} .lede p+p{margin-top:12px} /* ---------- panels ---------- */ .panels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px} @media (max-width:860px){.panels{grid-template-columns:1fr}} .panel{padding:22px;border-radius:14px;border:1px solid var(--line);background:var(--paper)} .panel p{margin-top:8px;font-size:var(--t-small);color:var(--muted);line-height:1.6} .panel code{display:inline-block;margin-top:13px;padding:3px 8px;border-radius:6px; background:var(--accent-wash);color:var(--accent);font-size:var(--t-micro)} /* ---------- features ---------- */ .feats{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(26px,5vw,56px)} @media (max-width:760px){.feats{grid-template-columns:1fr}} .feat{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)} .feat svg{width:16px;height:16px;flex:0 0 auto;margin-top:4px;color:var(--accent)} .feat b{display:block;color:var(--ink);font-weight:600;font-size:var(--t-body)} .feat span{display:block;margin-top:2px;font-size:var(--t-small);color:var(--muted);line-height:1.55} .feats h3{grid-column:1/-1;margin-top:26px;font-size:var(--t-micro);font-family:var(--mono); letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400} .feats h3:first-child{margin-top:0} /* ---------- install ---------- */ .steps{margin-top:32px;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,48px);align-items:start} @media (max-width:860px){.steps{grid-template-columns:1fr}} .step{padding:15px 0;border-top:1px solid var(--line)} .step b{color:var(--ink);font-weight:600} .step p{margin-top:3px;font-size:var(--t-small);color:var(--muted)} /* ---------- close ---------- */ .close{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:26px; padding:26px 28px;border-radius:16px;border:1px solid var(--line);background:var(--paper); box-shadow:var(--shadow-sm)} .close p{max-width:52ch;font-size:var(--t-small);color:var(--muted)} .close a.inline{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .close__act{margin-left:auto;text-align:right} .close__act .btn{width:100%} .close__act small{display:block;margin-top:9px;font-size:var(--t-micro);color:var(--muted); font-family:var(--mono)} @media (max-width:680px){ .close{padding:22px} .close__act{margin-left:0;width:100%;text-align:left} } /* the blog demo renders its attribution as a