/* nano.css v0.2 — Editorial cream + banknote navy + dot grid. * Reset po cięciu pluginów: jeden akcent (navy), jedna tekstura (dot grid), * jeden typ koloru (cream + ink + navy). Patrz design-ideas/*.png. */ :host, :root { --nz-sans: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif; --nz-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --nz-font: var(--nz-sans); /* Paleta: cream paper + ink + navy accent. Brak dollar-grey, brak hue 90°. */ --nz-bg: hsl(42 18% 94%); /* cream paper */ --nz-bg-elevated: hsl(42 14% 90%); /* cards / chrome strip */ --nz-soft: hsl(42 8% 82%); /* button resting / inert */ --nz-faint: hsl(0 0% 42%); --nz-muted: hsl(0 0% 30%); --nz-fg-soft: hsl(0 0% 22%); --nz-fg: hsl(0 0% 11%); /* ink */ /* Sidebar = ten sam cream, hairline border odróżnia */ --nz-sidebar-bg: var(--nz-bg); /* Banknote navy — JEDYNY akcent. Używany dla active link, primary button, * cover chip, highlight w mockupach (3 kafelki — jeden navy, reszta cream). */ --nz-accent: hsl(218 38% 22%); --nz-accent-soft: hsl(218 28% 38%); --nz-accent-dark: hsl(218 50% 15%); --nz-accent-fg: var(--nz-bg); /* text na navy */ --nz-focus: var(--nz-accent); --nz-radius: 4px; --nz-radius-sm: 2px; --nz-radius-pill: 999px; --nz-control-h: 31px; /* Fibonacci spacing */ --nz-1: 5px; --nz-2: 8px; --nz-3: 13px; --nz-4: 21px; --nz-5: 34px; --nz-6: 55px; --nz-7: 89px; --nz-8: 144px; --nz-9: 233px; --nz-text-xs: 11px; --nz-text-sm: 13px; --nz-text-base: 15px; --nz-text-lg: 21px; --nz-text-xl: clamp(21px, 1.8vw, 26px); --nz-text-2xl: clamp(26px, 2.6vw, 34px); --nz-text-3xl: clamp(34px, 4vw, 55px); /* Leading — oś line-height dla PROZY/UI. Nagłówki mają własny display-ramp * inline (.95/1/1.1/1.2/1.25), bo leading nagłówka jest size-specific — to * skala, nie dryf. Tu 3 tokeny zamiast ~11 surowych wartości w body/UI. */ --nz-leading-tight: 1.25; /* UI ciasne: card-title, q-sm, fiszka-front */ --nz-leading-normal: 1.4; /* proza skupiona: passage, assist-msg, card */ --nz-leading-prose: 1.5; /* proza do czytania: body, textarea, body-copy */ /* Measure — oś szerokości tekstu (ch). 2 tokeny zamiast 7 surowych near-dupów. * (--nz-measure-wide 90ch usunięty — 0 konsumentów po cięciu .nz-container-wide; §4). */ --nz-measure-narrow: 34ch; /* headline/lead (pytanie flow: .passage.is-lead) */ --nz-measure-prose: 65ch; /* komfortowa proza do czytania (body, read-along, lead, hint, blockquote) */ --nz-content-max: 1080px; /* maks. szerokość treści w #center (header/main/chrome) */ --nz-rule: 1px solid var(--nz-fg); } * { box-sizing: border-box } /* Dot grid — JEDYNA tekstura tła (zamiast paper noise z v0.1). Każdy mockup * ma tę samą subtelną kropkową siatkę 16px. Mask via radial-gradient: 1px * kropka, low opacity, fixed do viewportu (nie scrolluje). */ body { margin: 0; color: var(--nz-fg); font: 400 var(--nz-text-sm)/var(--nz-leading-prose) var(--nz-sans); -webkit-font-smoothing: antialiased; font-feature-settings: "kern","liga"; /* Dot grid: dollar-bill ciemnozielony (hsl 148 32% 28% = engraving ink), * opacity 15% — delikatniejsze niż poprzednie 22% black ink. */ background: radial-gradient(circle at 1px 1px, hsl(148 32% 28% / 15%) 1px, transparent 0) 0 0 / 16px 16px, var(--nz-bg); overflow-x: hidden; } ::selection { background: var(--nz-accent); color: var(--nz-accent-fg) } /* ===== TYPO ===== */ h1,h2,h3,h4,h5,h6 { margin: 0; color: var(--nz-fg); font-family: var(--nz-sans); text-wrap: balance } h1 { font-size: var(--nz-text-3xl); font-weight: 700; line-height: .95; letter-spacing: -.035em; margin-bottom: var(--nz-4) } h2 { font-size: var(--nz-text-3xl); font-weight: 600; line-height: 1; letter-spacing: -.025em; margin-bottom: var(--nz-4) } h3 { font-size: var(--nz-text-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; margin-bottom: var(--nz-3) } h4 { font-size: var(--nz-text-xl); font-weight: 600; line-height: 1.2; margin-bottom: var(--nz-2) } h5 { font-size: var(--nz-text-lg); font-weight: 600; line-height: 1.25; margin-bottom: var(--nz-2) } h6 { font-family: var(--nz-mono); font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--nz-muted); margin-bottom: var(--nz-2) } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0 } * + h1 { margin-top: var(--nz-6) } * + h2 { margin-top: var(--nz-5) } * + h3 { margin-top: var(--nz-4) } * + h4,*+h5 { margin-top: var(--nz-3) } * + h6 { margin-top: var(--nz-4) } .nz-kicker + h1, .nz-kicker + h2, .nz-kicker + h3 { margin-top: 0 } p { margin: 0 0 var(--nz-3); max-width: var(--nz-measure-prose); text-wrap: pretty } p:last-child { margin: 0 } p.lead { font-size: var(--nz-text-base); color: var(--nz-muted); margin-bottom: var(--nz-5); max-width: var(--nz-measure-prose); line-height: var(--nz-leading-prose) } small { font-family: var(--nz-mono); font-size: var(--nz-text-xs); color: var(--nz-muted); letter-spacing: .06em; text-transform: uppercase } em { font-style: italic } strong, b { font-weight: 600 } a { color: var(--nz-fg); text-decoration: underline; text-underline-offset: 4px; font-weight: 500 } a:hover { color: var(--nz-accent) } hr { border: 0; border-top: var(--nz-rule); margin: var(--nz-5) 0 } blockquote { margin: var(--nz-5) 0; padding-left: var(--nz-3); border-left: 2px solid var(--nz-fg); font-style: italic; max-width: var(--nz-measure-prose) } /* nz-kicker — drukarski label, używany jako `{NAMESPACE}` chip na cover oraz nad h1 * w pluginach. W mockupach renderowany w klamrach: `{SUBJECTS}` `{MARKETPLACE}` etc. */ .nz-kicker { display: inline-block; font-family: var(--nz-mono); font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--nz-muted); margin: 0 0 var(--nz-3) } .nz-kicker + h1, .nz-kicker + h2 { margin-top: 0 } /* ===== BUTTONS — 2 warianty: default (soft) + primary (navy) ===== */ button, .nz-btn { font: 500 var(--nz-text-sm)/1 var(--nz-sans); padding: 9px 16px; background: var(--nz-soft); color: var(--nz-fg); border: 1px solid color-mix(in srgb, var(--nz-fg) 22%, transparent); border-radius: var(--nz-radius); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } button:hover { background: color-mix(in srgb, var(--nz-fg) 8%, var(--nz-soft)); border-color: var(--nz-fg) } button:focus-visible { outline: 2px solid var(--nz-accent); outline-offset: 2px } button:disabled { opacity: .35; cursor: not-allowed } button:disabled:hover { background: var(--nz-soft); border-color: color-mix(in srgb, var(--nz-fg) 22%, transparent) } button.primary, button.accent { background: var(--nz-accent); color: var(--nz-accent-fg); border-color: var(--nz-accent); font-weight: 600; letter-spacing: .04em; padding: 10px 18px; } button.primary:hover, button.accent:hover { background: var(--nz-accent-dark); border-color: var(--nz-accent-dark); } button.danger { background: var(--nz-fg); color: var(--nz-bg); border-color: var(--nz-fg); font-weight: 600; padding: 10px 18px; } button.danger:hover { background: var(--nz-accent-dark); border-color: var(--nz-accent-dark) } button.ghost { background: transparent; border-color: transparent; padding: 6px 10px } button.ghost:hover { background: var(--nz-soft); border-color: transparent; color: var(--nz-fg) } /* ===== INPUTS ===== */ input, textarea, select { font: inherit; font-family: var(--nz-sans); font-size: var(--nz-text-sm); width: 100%; padding: 8px 13px; background: var(--nz-bg); color: var(--nz-fg); border: 1px solid color-mix(in srgb, var(--nz-fg) 22%, transparent); border-radius: var(--nz-radius); transition: border-color .12s, box-shadow .12s; } input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--nz-fg) 45%, transparent) } input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--nz-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nz-accent) 22%, transparent); } input::placeholder, textarea::placeholder { color: var(--nz-faint) } input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0 var(--nz-2) 0 0; accent-color: var(--nz-accent); padding: 0; box-shadow: none } textarea { min-height: var(--nz-7); resize: vertical; line-height: var(--nz-leading-prose) } label { display: block; font-family: var(--nz-sans); font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-muted); margin-bottom: var(--nz-1) } form { display: flex; flex-direction: column; gap: var(--nz-3) } /* ===== LISTS, TABLES, CODE, DETAILS ===== */ ul, ol { margin: 0 0 var(--nz-3); padding-left: var(--nz-4) } li { margin-bottom: var(--nz-1) } table { border-collapse: collapse; width: 100%; margin: var(--nz-5) 0; font-variant-numeric: tabular-nums; font-size: var(--nz-text-sm) } th, td { padding: 10px 14px; border-bottom: var(--nz-rule); text-align: left } th { font-family: var(--nz-mono); font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--nz-muted); border-bottom: 2px solid var(--nz-fg) } code, pre, kbd { font-family: var(--nz-mono); font-size: .92em } code { padding: 2px 6px; background: var(--nz-soft) } pre { padding: var(--nz-3); background: var(--nz-soft); border-left: 2px solid var(--nz-fg); overflow-x: auto; margin: var(--nz-3) 0; line-height: var(--nz-leading-prose) } details { margin: var(--nz-3) 0; border-top: var(--nz-rule); padding: var(--nz-3) 0 } details summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--nz-2); font-family: var(--nz-mono); font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase } details summary::-webkit-details-marker { display: none } details summary::after { content: "+"; margin-left: auto; font-family: var(--nz-sans); color: var(--nz-muted) } details[open] > summary::after { content: "−" } details > *:not(summary) { margin-top: var(--nz-3) } /* ===== UTILITIES ===== */ /* .nz-pill — status/ocena (commandbar pos, oceny). .nz-label — drukarski kicker (kanon). */ .nz-pill { display: inline-block; padding: 2px 10px; border-radius: var(--nz-radius-pill); border: 1px solid var(--nz-fg); font-family: var(--nz-mono); font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--nz-fg); background: var(--nz-bg) } .nz-label { display: inline-block; font-family: var(--nz-mono); font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--nz-muted) } .muted { color: var(--nz-muted) } /* rola: tekst drugorzędny/inert (globalne utility) */ /* .ico — Tabler-style SVG icon przez mask-image (sidebar links). */ .ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; background: currentColor; -webkit-mask: var(--ico-url) center / contain no-repeat; mask: var(--ico-url) center / contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; flex-shrink: 0; } /* ===== SHELL ===== */ #app { display: flex; flex-direction: row; height: 100vh; background: transparent; transform: translateX(-220px); transition: transform 300ms cubic-bezier(.4, 0, .2, 1) } #app.left-open { transform: translateX(0) } aside.left { padding: var(--nz-4) var(--nz-3); background: var(--nz-sidebar-bg); display: flex; flex-direction: column; width: 220px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--nz-fg) } #left-toggle { position: absolute; top: 8px; left: 8px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--nz-fg); background: var(--nz-bg); color: var(--nz-fg); border-radius: var(--nz-radius); cursor: pointer; padding: 0; transition: background .12s } #left-toggle svg { width: 20px; height: 20px } #left-toggle:hover { background: var(--nz-soft) } #center > header { padding-left: 54px } aside.left strong { display: block; font-family: var(--nz-sans); font-size: var(--nz-text-lg); font-weight: 700; letter-spacing: -.03em; color: var(--nz-fg); margin: 0 0 var(--nz-5); padding-inline: var(--nz-3) } aside.left nav { display: flex; flex-direction: column; gap: var(--nz-1) } aside.left #pl-bottom { margin-top: auto; padding-top: var(--nz-3); border-top: 1px solid color-mix(in srgb, var(--nz-fg) 22%, transparent) } aside.left #pl-bottom:empty { display: none } aside.left nav a { display: flex; align-items: center; gap: var(--nz-2); padding: var(--nz-2) var(--nz-3); color: var(--nz-fg-soft); text-decoration: none; font-size: var(--nz-text-sm); font-weight: 500; border-radius: var(--nz-radius); transition: background .12s, color .12s } aside.left nav a:hover { background: var(--nz-soft); color: var(--nz-fg) } aside.left nav a.active { background: var(--nz-accent); color: var(--nz-accent-fg) } #center { min-width: 100vw; display: flex; flex-direction: column; height: 100vh; background: transparent; position: relative; flex: 1 1 auto; overflow: hidden } #center > header, #center > footer { flex: none } #center > main { flex: 1 1 0; min-height: 0 } main { padding: var(--nz-4); min-width: 0; overflow-x: hidden; overflow-y: auto; background: transparent; } main > * { max-width: var(--nz-content-max); margin-inline: auto } main .hint { color: var(--nz-muted); margin-top: var(--nz-5); font-size: var(--nz-text-base) } aside.right { background: var(--nz-bg-elevated); padding: var(--nz-4); width: 320px; flex-shrink: 0; overflow-y: auto; border-left: 1px solid var(--nz-fg) } aside.right[hidden] { display: none } /* Mobile: aside.right = fixed slide-in drawer z prawej krawędzi. * * GOTCHA — transformed ancestor: #app ma `transform: translateX(-220px)` (left * drawer mechanic, commit b4c3ffc). Per CSS spec: element z transform staje się * containing block dla position:fixed descendants. Czyli aside.right z `inset: 0 * 0 0 auto` anchor-uje się do prawej krawędzi #app (nie viewport-a). #app jest * 100vw + 220px wide, przesunięte -220px → prawa krawędź jest na pozycji * (viewport_right + 0) ale element widziany jest po -220px translation #app-a. * * Kompensacja: dodaj +220px do każdego transform na aside.right. Gdy left drawer * otwarty (#app.left-open: translateX(0)), kompensata znika — patrz override niżej. * * Element zostaje w DOM gdy [hidden] (override globalnego display:none) żeby * slide-out animation zdążyła odlecieć. */ @media (max-width: 719px) { aside.right { position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(86vw, 360px); height: 100vh; max-height: 100dvh; transform: translateX(220px); /* visible: kompensata -220 */ transition: transform 300ms cubic-bezier(.4, 0, .2, 1); box-shadow: -8px 0 32px hsl(0 0% 0% / .25); border-left: 1px solid var(--nz-fg); } aside.right[hidden] { display: block; /* override display:none */ transform: translateX(calc(100% + 220px)); /* hidden: own-width + 220 = off-screen */ pointer-events: none; box-shadow: none; } /* Left drawer otwarty → #app transform: 0 → kompensata znika */ #app.left-open aside.right { transform: translateX(0); } #app.left-open aside.right[hidden] { transform: translateX(100%); } /* Backdrop dim — overlay #center gdy drawer prawy otwarty. pointer-events:none * — user zamyka close button w panelu (panel-head w plugins/vendor/aside.js), * shell-level [data-close] delegation chowa drawer. Backdrop = visual only. */ #app:has(aside.right:not([hidden]))::before { content: ""; position: fixed; inset: 0; z-index: 99; background: hsl(0 0% 0% / .4); pointer-events: none; animation: nz-backdrop-fade 200ms cubic-bezier(.4, 0, .2, 1); } @keyframes nz-backdrop-fade { from { opacity: 0 } to { opacity: 1 } } } @media (min-width: 720px) { #left-toggle { display: none } #app { display: grid; grid-template-columns: 220px minmax(0, 1fr); width: auto; transform: none; transition: none; overflow: visible } #app:has(aside.right:not([hidden])) { grid-template-columns: 220px minmax(0, 1fr) 360px } aside.left { width: auto; height: 100vh; position: sticky; top: 0; overflow-y: auto; padding: var(--nz-5) var(--nz-4) } #center { height: 100vh; min-width: 0; min-height: 0; overflow: hidden } #center > header { padding-left: 0 } main { overflow-y: auto; padding: var(--nz-5) var(--nz-6) } aside.right { width: auto; height: 100vh; position: sticky; top: 0; overflow-y: auto; padding: var(--nz-5) var(--nz-4) } } @media (min-width: 1200px) { main { padding: var(--nz-6) var(--nz-7) } #app:has(aside.right:not([hidden])) { grid-template-columns: 220px minmax(0, 1fr) 420px } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== CHROME STRIP (header + footer w #center) ===== */ :root { --nz-chrome-pad-min: var(--nz-4) } @media (min-width: 720px) { :root { --nz-chrome-pad-min: var(--nz-6) } } @media (min-width: 1200px) { :root { --nz-chrome-pad-min: var(--nz-7) } } #center > header { --chrome-pad-block: var(--nz-1) } #center > footer { --chrome-pad-block: var(--nz-3) } @media (min-width: 720px) { #center > header { --chrome-pad-block: var(--nz-2) } #center > footer { --chrome-pad-block: var(--nz-4) } } @media (min-width: 1200px) { #center > header { --chrome-pad-block: var(--nz-3) } #center > footer { --chrome-pad-block: var(--nz-5) } } #center > header, #center > footer { --chrome-pad-inline: max(var(--nz-chrome-pad-min), calc((100% - var(--nz-content-max)) / 2)); padding-block: var(--chrome-pad-block); padding-inline: var(--chrome-pad-inline); min-height: 0; background: var(--nz-bg); } #center > header { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-3) var(--nz-4); border-bottom: 1px solid color-mix(in srgb, var(--nz-fg) 22%, transparent); } #center > footer { display: flex; flex-direction: column; gap: var(--nz-3); border-top: 1px solid color-mix(in srgb, var(--nz-fg) 22%, transparent); } #center > header:empty, #center > footer:empty { display: none } #center > footer { padding-bottom: calc(var(--chrome-pad-block) + env(safe-area-inset-bottom, 0px)) } /* Chrome-strip header min-height (footer/commandbar dziedziczy z bloku wyżej). */ #center > header { min-height: calc(var(--nz-control-h) + 2 * var(--chrome-pad-block)); } /* ===== Scrollbar ===== */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--nz-fg) 22%, transparent) transparent } *::-webkit-scrollbar { width: 8px; height: 8px } *::-webkit-scrollbar-track { background: transparent } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--nz-fg) 22%, transparent); border-radius: var(--nz-radius); } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--nz-fg) 45%, transparent) } *::-webkit-scrollbar-thumb:active { background: var(--nz-fg) } *::-webkit-scrollbar-corner { background: transparent }