/* ========================================================================== kupp · site.css Shared design system for every page in public/. Order: 1 tokens · 2 base · 3 utilities · 4 layout · 5 header + nav · 6 footer 7 buttons + links · 8 surfaces + loop motif · 9 components (notice, terms, Discord mock, annotations, next-page link, prose) · 10 motion Page-specific CSS belongs in /assets/.css — never edit this file from a page build. See docs/SITE.md. ========================================================================== */ /* 1 · Tokens ------------------------------------------------------------ */ :root{ /* Brand (marketing/kupp-loop-brand-kit/brand-guide.md) */ --blue:#214FE5; /* Loop Blue */ --cream:#FFFEFA; /* Cream */ --mint:#B8DEC8; /* Mint */ --ink:#162447; /* Ink */ /* Derived — every text pairing below is WCAG AA or better */ --blue-deep:#1A3FB8; /* hover on blue buttons; blue text on mint (5.9:1) */ --blue-pale:#DCE4FF; /* small text on blue (5.0:1) */ --paper:#F5F2E9; /* warm second light surface */ --soft:#EEF2FB; /* blue-tinted light surface */ --mint-soft:#E3F1E8; /* pale mint surface */ --muted:#4B5870; /* secondary text on cream/paper/soft/mint-soft (≥6.1:1) */ --muted-dark:#AEB6CE; /* secondary text on ink (7.5:1) */ --line:rgba(22,36,71,.14); --line-strong:rgba(22,36,71,.88); --embed-red:#C8372D; /* the real Discord embed colour (src/kuppresale/discord.py) */ /* Type — Avenir Next per the brand guide. Mono only for real data: times, prices in tables, channel names and DBA terms. Labels and headings are always the sans. */ --font-sans:"Avenir Next",Avenir,"Arial Rounded MT Bold","Trebuchet MS",sans-serif; --font-mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace; --fs-xs:.8125rem; /* 13 */ --fs-sm:.9375rem; /* 15 */ --fs-base:clamp(1.0625rem,1.02rem + .2vw,1.125rem); /* 17 → 18 */ --fs-lead:clamp(1.1875rem,1.1rem + .45vw,1.4375rem);/* 19 → 23 */ --fs-h4:clamp(1.125rem,1.08rem + .2vw,1.25rem); /* 18 → 20 */ --fs-h3:clamp(1.375rem,1.22rem + .7vw,1.875rem); /* 22 → 30 */ --fs-h2:clamp(2rem,1.45rem + 2.4vw,3.5rem); /* 32 → 56 */ --fs-h1:clamp(2.75rem,1.6rem + 5vw,5.75rem); /* 44 → 92 */ --fs-display:clamp(3.25rem,1.4rem + 8.2vw,8.5rem); /* 52 → 136, numbers and one-word statements */ /* Space */ --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-s:1rem; --space-m:1.5rem; --space-l:2rem; --space-xl:3rem; --space-2xl:4.5rem; --space-3xl:7rem; --section:clamp(4rem,2.8rem + 5vw,8.5rem); /* default vertical rhythm */ /* Layout */ --gutter:16px; --wrap:1240px; --grid-gap:clamp(16px,.6rem + 1.2vw,32px); --header-h:64px; /* Shape + depth */ --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:32px; --r-pill:999px; --shadow-float:0 1px 2px rgba(22,36,71,.08),0 14px 34px -14px rgba(22,36,71,.3); --shadow-mock:0 2px 4px rgba(10,18,50,.14),0 40px 80px -28px rgba(10,18,50,.6); --ease:cubic-bezier(.2,.7,.2,1); --focus:var(--blue); } @media (min-width:800px){:root{--gutter:32px;--header-h:76px}} @media (min-width:1200px){:root{--gutter:48px}} /* 2 · Base -------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light;scroll-padding-top:calc(var(--header-h) + 16px)} body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);font:500 var(--fs-base)/1.6 var(--font-sans);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} main{display:block;flex:1 0 auto} img,svg,video{display:block;max-width:100%;height:auto} h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.06;letter-spacing:-.035em;text-wrap:balance} h1{font-size:var(--fs-h1);letter-spacing:-.05em} h2{font-size:var(--fs-h2);letter-spacing:-.045em} h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.025em} h4{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.015em} p,ul,ol,dl,dd,figure,blockquote{margin:0} p,li,dd{text-wrap:pretty} ul[role="list"],ol[role="list"]{list-style:none;padding:0} a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.22em} a:hover{text-decoration-thickness:2px} strong,b{font-weight:700} small{font-size:var(--fs-sm)} em{font-style:italic} hr{border:0;border-top:1px solid var(--line);margin:0} button{font:inherit;color:inherit} ::selection{background:var(--mint);color:var(--ink)} :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px} [hidden]{display:none !important} /* 3 · Utilities --------------------------------------------------------- */ .sr{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} .skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:var(--r-s);font-weight:700;text-decoration:none;--focus:var(--mint)} .skip:focus{top:12px} .mono{font-family:var(--font-mono);font-weight:500;letter-spacing:0} .num{font-variant-numeric:tabular-nums lining-nums} .kr{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} .muted{color:var(--muted)} .lede{font-size:var(--fs-lead);line-height:1.5;max-width:34em} .fine{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)} .measure{max-width:36em} .nowrap{white-space:nowrap} /* 4 · Layout primitives ------------------------------------------------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{--wrap:960px} .wrap--text{--wrap:800px} .section{padding-block:var(--section)} .section--tight{padding-block:calc(var(--section) * .55)} .section--flush-top{padding-top:0} .section--flush-bottom{padding-bottom:0} /* Flow spacing:
*/ .stack>*+*{margin-top:var(--stack,var(--space-s))} /* Wrapping row: buttons, tags */ .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster,var(--space-xs))} /* 12-column grid from 800px. Place children with inline custom properties:
…
…
Below 800px every child is full width, in source order. */ .grid-12{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-row-gap,var(--space-l)) var(--grid-gap)} @media (min-width:800px){ .grid-12{grid-template-columns:repeat(12,minmax(0,1fr))} .grid-12>*{grid-column:var(--start,auto)/span var(--span,12)} } /* Editorial rules */ .rule{border-top:1px solid var(--line-strong)} .rule-soft{border-top:1px solid var(--line)} /* 5 · Header + nav ------------------------------------------------------ */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,254,250,.94);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);transition:box-shadow .25s var(--ease)} .site-header.is-scrolled,.site-header.menu-open{box-shadow:0 1px 0 var(--line),0 12px 28px -20px rgba(22,36,71,.45)} .site-header__inner{display:flex;align-items:center;gap:var(--space-2xs);min-height:var(--header-h)} .site-logo{display:block;flex:none;margin-right:auto;border-radius:var(--r-s)} .site-logo img{width:84px} /* DOM order is logo · menu button · nav · CTA, so that on mobile the menu button is followed by the menu in tab order. Visually the CTA sits first. */ .site-header__cta{flex:none;order:2} .menu-btn{order:3;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:-6px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer} .menu-btn:hover{background:var(--soft)} .menu-btn__bars,.menu-btn__bars::before,.menu-btn__bars::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s var(--ease),background-color .2s var(--ease)} .menu-btn__bars{position:relative} .menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0} .menu-btn__bars::before{top:-6px} .menu-btn__bars::after{top:6px} .menu-btn[aria-expanded="true"] .menu-btn__bars{background:transparent} .menu-btn[aria-expanded="true"] .menu-btn__bars::before{transform:translateY(6px) rotate(45deg)} .menu-btn[aria-expanded="true"] .menu-btn__bars::after{transform:translateY(-6px) rotate(-45deg)} /* Mobile: the nav is a panel that drops below the bar */ .site-nav{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--header-h));overflow-y:auto;background:var(--cream);border-top:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(22,36,71,.4);padding:var(--space-2xs) var(--gutter) var(--space-l)} .site-nav.is-open{display:block} .site-nav__list{list-style:none;margin:0;padding:0} .site-nav__list li{border-bottom:1px solid var(--line)} .site-nav__list a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:.5rem 0;color:var(--ink);font-size:1.375rem;font-weight:700;letter-spacing:-.025em;text-decoration:none} .site-nav__list a::after{content:"→";font-weight:500;color:var(--muted)} .site-nav__list a[aria-current="page"]{color:var(--blue)} .site-nav__list a[aria-current="page"]::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px var(--ink)} .site-nav__account{display:inline-flex;align-items:center;min-height:48px;margin-top:var(--space-s);color:var(--muted);font-weight:600;text-decoration:underline;text-decoration-color:var(--line)} .site-nav__account:hover{color:var(--ink);text-decoration-color:currentColor} .site-nav__account[aria-current="page"]{color:var(--ink)} /* "Om os" lives in the phone menu only; on desktop the footer carries it. */ .site-nav__minor a{font-size:1.125rem;font-weight:600;color:var(--muted)} /* Open phone menu: dim the page behind it and stop it scrolling (site.js sets .nav-open). */ html.nav-open{overflow:hidden} html.nav-open body::after{content:"";position:fixed;inset:0;z-index:40;background:rgba(22,36,71,.4)} @media (min-width:800px){.site-logo img{width:100px}} @media (min-width:960px){ .menu-btn{display:none} .site-header__inner{gap:var(--space-s)} .site-logo{margin-right:0} .site-nav{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--space-s);position:static;max-height:none;overflow:visible;margin-left:var(--space-m);padding:0;background:none;border:0;box-shadow:none} .site-nav__list{display:flex;align-items:center;gap:2px} .site-nav__list li{border:0} .site-nav__list a{min-height:44px;padding:.4rem .9rem;border-radius:var(--r-pill);font-size:.96875rem;font-weight:600;letter-spacing:-.005em} .site-nav__list a::after,.site-nav__list a[aria-current="page"]::after{content:none} .site-nav__list a:hover{background:var(--soft)} .site-nav__list a[aria-current="page"]{background:var(--mint);color:var(--ink)} .site-nav__minor{display:none} .site-nav__account{min-height:44px;margin:0;padding:.4rem .25rem;font-size:.9375rem;text-decoration:none} .site-nav__account:hover{text-decoration:underline} } /* 6 · Footer ------------------------------------------------------------ */ .site-footer{margin-top:auto;background:var(--ink);color:var(--cream);--focus:var(--mint);padding-block:var(--space-2xl) var(--space-l);font-size:var(--fs-sm)} .site-footer__top{display:grid;gap:var(--space-xl)} .site-footer__brand img{width:108px} .site-footer__tag{margin-top:var(--space-m);font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);font-weight:700;line-height:1.02;letter-spacing:-.045em;max-width:9em} .site-footer__tag span{color:var(--mint)} .site-footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-l) var(--space-m)} .site-footer__heading{margin:0 0 var(--space-2xs);font-size:var(--fs-sm);font-weight:700;letter-spacing:0;line-height:1.4;color:var(--muted-dark)} .site-footer__nav ul{list-style:none;margin:0;padding:0} .site-footer__nav a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 0;color:var(--cream);font-size:1rem;font-weight:600;text-decoration:none} .site-footer__nav a:hover{text-decoration:underline;text-decoration-color:var(--mint)} .site-footer__nav a[aria-current="page"]{color:var(--mint)} .site-footer__legal{display:grid;gap:var(--space-2xs);margin-top:var(--space-2xl);padding-top:var(--space-m);border-top:1px solid rgba(255,254,250,.16);color:var(--muted-dark);line-height:1.55} .site-footer__legal a{color:var(--cream)} @media (min-width:640px){.site-footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:960px){ .site-footer__nav a{min-height:0} .site-footer__top{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;column-gap:var(--grid-gap)} .site-footer__nav{padding-top:var(--space-2xs)} .site-footer__legal{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grid-gap)} } /* 7 · Buttons + links --------------------------------------------------- */ .btn{--btn-bg:var(--blue);--btn-fg:var(--cream);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.75rem 1.5rem;border:0;border-radius:var(--r-pill);background:var(--btn-bg);color:var(--btn-fg);font:700 1.0625rem/1.2 var(--font-sans);letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)} .btn:hover{transform:translateY(-1px)} .btn:active{transform:none} .btn--primary{--btn-bg:var(--blue);--btn-fg:var(--cream)} .btn--primary:hover,.btn:not([class*="btn--"]):hover{--btn-bg:var(--blue-deep)} .btn--mint{--btn-bg:var(--mint);--btn-fg:var(--ink)} .btn--mint:hover{box-shadow:inset 0 0 0 2px var(--ink)} .btn--cream{--btn-bg:var(--cream);--btn-fg:var(--blue)} .btn--cream:hover{--btn-fg:var(--ink);box-shadow:0 10px 24px -10px rgba(8,16,48,.6)} .btn--outline{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 2px currentColor} .btn--outline:hover{--btn-bg:var(--ink);--btn-fg:var(--cream);box-shadow:inset 0 0 0 2px var(--ink)} .btn--outline-light{--btn-bg:transparent;--btn-fg:var(--cream);box-shadow:inset 0 0 0 2px currentColor} .btn--outline-light:hover{--btn-bg:var(--cream);--btn-fg:var(--ink)} .btn--sm{min-height:44px;padding:.55rem 1.1rem;font-size:.9375rem} .btn--lg{min-height:58px;padding:1rem 2rem;font-size:1.1875rem} /* Text link with an arrow and a mint underline — secondary actions */ .link-arrow{display:inline-flex;align-items:center;gap:.4em;min-height:44px;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:3px;text-underline-offset:.35em} .link-arrow::after{content:"→";text-decoration:none;display:inline-block;transition:transform .2s var(--ease)} .link-arrow:hover{text-decoration-color:var(--blue)} .link-arrow:hover::after{transform:translateX(3px)} .surface-blue .link-arrow,.surface-ink .link-arrow{color:var(--cream)} /* 8 · Surfaces + the Loop motif ----------------------------------------- */ .surface-blue{background:var(--blue);color:var(--cream);--focus:var(--cream)} .surface-ink{background:var(--ink);color:var(--cream);--focus:var(--mint)} .surface-mint{background:var(--mint);color:var(--ink);--focus:var(--ink)} .surface-paper{background:var(--paper)} .surface-soft{background:var(--soft)} .surface-blue a:not(.btn),.surface-ink a:not(.btn){color:inherit} .surface-blue .fine{color:var(--blue-pale)} .surface-ink .fine{color:var(--muted-dark)} .surface-mint .fine{color:var(--muted)} /* The linked-loop mark as a big, soft shape. Parent needs position:relative and overflow:hidden (or clip). Tune with --loop-size / --loop-color. */ .loop-deco{position:absolute;pointer-events:none;width:var(--loop-size,520px);aspect-ratio:324/244;background:var(--loop-color,rgba(255,254,250,.1));-webkit-mask:url("/assets/kupp-mark.svg") center/contain no-repeat;mask:url("/assets/kupp-mark.svg") center/contain no-repeat} /* 9 · Components -------------------------------------------------------- */ /* Notice bar under the header (?afbrudt=1 etc.) */ .notice{background:var(--mint);color:var(--ink);--focus:var(--ink)} .notice__inner{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;padding-block:.9rem;font-size:var(--fs-sm)} .notice a{color:var(--ink);font-weight:700} /* DBA vocabulary and Discord channel names in running text: Til salg #iphones */ .term{display:inline-block;padding:.02em .45em .06em;border-radius:6px;background:var(--soft);color:var(--ink);font-family:var(--font-mono);font-size:.84em;font-weight:500;letter-spacing:0;line-height:1.5;white-space:nowrap} .surface-blue .term,.surface-ink .term{background:rgba(255,254,250,.14);color:inherit} .surface-mint .term{background:rgba(255,254,250,.6)} .channel{font-family:var(--font-mono);font-size:.9em;font-weight:500;letter-spacing:0;white-space:nowrap} /* ---- Discord mock --------------------------------------------------------- Illustrative only: always pair it with a visible "Eksempel" label and a .mock-note caption. Structure (all parts optional except .dc and .dc-msg):
…# channel, topic, Eksempel label…
…avatar, meta, .dc-embed…
Ny
The embed mirrors src/kuppresale/discord.py: title (link to DBA), "**pris** · by", inline fields Oprettet / Fragt / Lagerplads or Mærke, the listing photo, footer "DBA · Kuppresale" + time. */ .dc{--dc-bg:#1A2242;--dc-side:#141B36;--dc-embed:#222B4E;--dc-text:#E7E9F2;--dc-muted:#A7AFC7;--dc-link:#8FB0FF;--dc-line:rgba(231,233,242,.1);--focus:var(--mint);position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;background:var(--dc-bg);color:var(--dc-text);border-radius:var(--r-l);box-shadow:var(--shadow-mock);font-family:var(--font-sans);font-size:.9375rem;line-height:1.45;text-align:left} .dc__sidebar{display:none;background:var(--dc-side);padding:var(--space-s) var(--space-2xs);font-size:.875rem} .dc__server{padding:0 .5rem var(--space-xs);margin-bottom:var(--space-2xs);border-bottom:1px solid var(--dc-line);font-weight:700} .dc__group{margin:var(--space-xs) .5rem .35rem;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dc-muted)} .dc__channels{list-style:none;margin:0;padding:0} .dc__channels li{overflow:hidden;padding:.28rem .5rem;border-radius:6px;color:var(--dc-muted);white-space:nowrap;text-overflow:ellipsis} .dc__channels li::before{content:"# ";opacity:.7} .dc__channels .is-active{background:rgba(231,233,242,.1);color:var(--dc-text);font-weight:600} .dc__main{min-width:0;display:flex;flex-direction:column} .dc__head{display:flex;align-items:center;gap:.5rem;min-height:48px;padding:.6rem var(--space-s);border-bottom:1px solid var(--dc-line);font-weight:700} .dc__head .dc__hash{color:var(--dc-muted);font-weight:500;font-size:1.25rem;line-height:1} .dc__topic{overflow:hidden;min-width:0;padding-left:.6rem;border-left:1px solid var(--dc-line);color:var(--dc-muted);font-size:.8125rem;font-weight:500;white-space:nowrap;text-overflow:ellipsis} .dc__label{margin-left:auto;flex:none;padding:.15rem .5rem;border-radius:var(--r-pill);background:var(--mint);color:var(--ink);font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.02em} .dc__feed{display:grid;gap:var(--space-m);padding:var(--space-s)} .dc-msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 .85rem} .dc-avatar{width:40px;height:40px;border-radius:50%;background:var(--blue) url("/assets/kupp-avatar.svg") center/cover no-repeat} .dc-msg__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem;line-height:1.3} .dc-name{font-weight:700;color:var(--dc-text)} .dc-app{padding:.05rem .32rem;border-radius:4px;background:var(--blue);color:var(--cream);font-size:.625rem;font-weight:700;letter-spacing:.02em;line-height:1.4;vertical-align:.1em} .dc-time{color:var(--dc-muted);font-size:.75rem} .dc-embed{position:relative;display:grid;gap:.45rem;max-width:432px;margin-top:.4rem;padding:.7rem 1rem .8rem .9rem;border-left:4px solid var(--embed-red);border-radius:4px 8px 8px 4px;background:var(--dc-embed)} .dc-embed__title{color:var(--dc-link);font-weight:700;line-height:1.3} .dc-embed__desc{color:var(--dc-text)} .dc-embed__desc strong{font-weight:700} .dc-embed__fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.5rem .75rem;margin:.1rem 0 0} .dc-embed__fields dt{font-size:.8125rem;font-weight:700;color:var(--dc-text)} .dc-embed__fields dd{margin:0;font-size:.875rem;color:var(--dc-muted)} .dc-embed__image{position:relative;overflow:hidden;margin-top:.3rem;border-radius:6px;background:#2C365E} .dc-embed__image img{width:100%} .dc-embed__foot{font-size:.75rem;color:var(--dc-muted)} .dc-divider{display:flex;align-items:center;gap:.5rem;color:#FF8A8A;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .dc-divider::before{content:"";flex:1;border-top:1px solid currentColor} .dc-divider span{padding:.05rem .35rem;border-radius:4px;background:#FF8A8A;color:#1A2242} @media (max-width:479px){ .dc{font-size:.875rem} .dc-msg{grid-template-columns:32px minmax(0,1fr);gap:0 .65rem} .dc-avatar{width:32px;height:32px} .dc__feed{padding:var(--space-s) .75rem} .dc-embed{padding:.6rem .75rem .7rem} } @media (min-width:1100px){ .dc--with-sidebar{grid-template-columns:188px minmax(0,1fr)} .dc--with-sidebar .dc__sidebar{display:block} } .mock-note{margin-top:var(--space-xs);font-size:var(--fs-xs);line-height:1.5;color:var(--muted)} .surface-blue .mock-note{color:var(--blue-pale)} .surface-ink .mock-note{color:var(--muted-dark)} /* Numbered annotations: a badge inside a mock + a matching list beside it. …
  1. …
*/ .anno{display:inline-grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--mint);color:var(--ink);box-shadow:0 0 0 2px var(--dc-bg,var(--cream));font-size:.8125rem;font-weight:700;line-height:1;vertical-align:.1em} .anno-list{list-style:none;margin:0;padding:0} .anno-list li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.25rem var(--space-xs);padding-block:var(--space-s);border-top:1px solid var(--line)} .anno-list li:last-child{border-bottom:1px solid var(--line)} .anno-list .anno{margin-top:.2rem;box-shadow:none} .anno-list h3{font-size:var(--fs-h4)} .anno-list p{margin-top:.2rem;color:var(--muted)} /* One big editorial link to the next page, at the end of a page. NæstePriser */ .next-page{display:grid;gap:.35rem;padding-block:var(--space-l) var(--space-xl);border-top:2px solid var(--ink);color:var(--ink);text-decoration:none} .next-page__label{font-size:var(--fs-sm);font-weight:600;color:var(--muted)} .next-page__title{display:flex;align-items:baseline;gap:.35em;font-size:var(--fs-h2);font-weight:700;line-height:1.05;letter-spacing:-.045em} .next-page__title::after{content:"→";color:var(--blue);transition:transform .25s var(--ease)} .next-page:hover .next-page__title::after{transform:translateX(.2em)} .next-page__text{max-width:34em;color:var(--muted)} /* Long text (legal pages, Om os). Put .prose on the article/column. */ .prose{max-width:44rem;line-height:1.7} .prose>*+*{margin-top:1em} .prose h1{font-size:clamp(2.25rem,1.6rem + 3vw,3.75rem);line-height:1.04} .prose h2{margin-top:2.4em;font-size:clamp(1.5rem,1.3rem + .9vw,2rem);line-height:1.2;letter-spacing:-.03em} .prose h3{margin-top:1.8em;font-size:1.1875rem;line-height:1.3;letter-spacing:-.015em} .prose h2+*,.prose h3+*{margin-top:.6em} .prose ul,.prose ol{padding-left:1.3em} .prose li+li{margin-top:.4em} .prose li::marker{color:var(--blue)} .prose address{font-style:normal} .prose blockquote{padding-left:1em;border-left:3px solid var(--mint)} .prose code{font-family:var(--font-mono);font-size:.9em} .prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.5} .prose th,.prose td{padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .prose th{font-weight:700} /* 10 · Motion ----------------------------------------------------------- */ @keyframes kupp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes kupp-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} /* Entrance on load:
— use once per page, on the hero */ .enter{animation:kupp-rise .7s var(--ease) both;animation-delay:var(--delay,0s)} .enter-pop{animation:kupp-pop .5s var(--ease) both;animation-delay:var(--delay,0s)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .btn:hover,.link-arrow:hover::after{transform:none} }