/* Dokumentacja OG-E — jedna długa strona z bocznym spisem treści. Mobile-first: weryfikacja najpierw przy 360–430 px; strona nigdy nie scrolluje się w poziomie. Dwa motywy (ciemny domyślny, jasny) sterowane tokenami na html[data-theme] — przełącznik w nagłówku, boot w . */ /* ============================== Tokeny ============================== */ :root { /* Geometria / typografia wspólna dla motywów */ --col: 760px; /* szerokość kolumny treści */ --toc-w: 248px; /* szerokość spisu treści (desktop) */ --hdr-h: 56px; /* wysokość sticky-nagłówka */ --r-lg: 16px; --r-md: 10px; --r-sm: 6px; --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; } html[data-theme='dark'] { color-scheme: dark; --bg: #0a0f16; --bg-soft: #0d131c; --surface: #111825; --surface-2: #16202f; --border: #1e2a3a; --border-strong: #2c3b4f; --text: #dce5ef; --text-2: #97a6b8; --text-3: #6b7a8c; --heading: #f0f5fa; --accent: #e6c054; /* złoto OG-E */ --accent-soft: rgba(230, 192, 84, 0.1); --accent-line: rgba(230, 192, 84, 0.35); --accent-text: #eccb6d; /* złoto jako TEKST (kontrast na ciemnym) */ --accent-ink: #211703; /* tekst NA złotym tle */ --warn: #e0b45f; --warn-soft: rgba(224, 180, 95, 0.1); --warn-line: rgba(224, 180, 95, 0.4); --link: #85b9e8; --code-bg: #0d1520; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5); --hdr-bg: rgba(10, 15, 22, 0.82); --scrim: rgba(2, 5, 9, 0.6); --ph-a: #0e1620; --ph-b: #111b27; } html[data-theme='light'] { color-scheme: light; --bg: #f6f7f9; --bg-soft: #eef1f5; --surface: #ffffff; --surface-2: #f3f5f8; --border: #e1e6ed; --border-strong: #ccd5df; --text: #29343f; --text-2: #5b6b7b; --text-3: #8494a4; --heading: #141d26; --accent: #c99b1f; --accent-soft: rgba(201, 155, 31, 0.09); --accent-line: rgba(201, 155, 31, 0.4); --accent-text: #8a6a12; --accent-ink: #211703; --warn: #a97b17; --warn-soft: rgba(196, 148, 43, 0.1); --warn-line: rgba(196, 148, 43, 0.45); --link: #145e9e; --code-bg: #eef1f5; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 12px 36px rgba(16, 24, 40, 0.16); --hdr-bg: rgba(246, 247, 249, 0.85); --scrim: rgba(20, 29, 38, 0.45); --ph-a: #eef1f5; --ph-b: #e7ebf1; } /* ============================== Baza ============================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; overflow-x: hidden; -webkit-text-size-adjust: 100%; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } code { font-family: var(--font-mono); font-size: 0.86em; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 5px; word-break: break-word; } p { margin: 10px 0; } ul { margin: 10px 0; padding-left: 22px; } li { margin: 5px 0; } li::marker { color: var(--accent-text); } strong { color: var(--heading); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 10px 16px; border-radius: 0 0 var(--r-md) 0; } .skip-link:focus { left: 0; } /* ============================== Nagłówek ============================== */ .site-hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr-h); background: var(--hdr-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-hdr-inner { max-width: calc(var(--toc-w) + var(--col) + 88px); height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--heading); } .brand:hover { text-decoration: none; } .brand-mark { display: inline-grid; place-items: center; height: 30px; padding: 0 9px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #8a5c00)); color: var(--accent-ink); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; } .brand-name { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-2); } .hdr-actions { display: flex; align-items: center; gap: 10px; } /* Przełącznik języka — segmentowany, wspólny styl obu przycisków. */ .lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); overflow: hidden; } .lang-switch a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-2); transition: color 0.15s, background 0.15s; } .lang-switch a:hover { color: var(--heading); text-decoration: none; } .lang-switch a.is-active { color: var(--accent-ink); background: var(--accent); } .theme-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .theme-btn:hover { color: var(--heading); border-color: var(--border-strong); } /* W ciemnym motywie pokazujemy słońce (przełącz na jasny) i odwrotnie. */ html[data-theme='dark'] .ico-moon { display: none; } html[data-theme='light'] .ico-sun { display: none; } /* ============================== Układ ============================== */ .layout { display: grid; grid-template-columns: 1fr; max-width: var(--col); margin: 0 auto; padding: 24px 16px 40px; } main { min-width: 0; } .site-foot { max-width: calc(var(--toc-w) + var(--col) + 88px); margin: 24px auto 0; padding: 20px 16px 32px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); } /* ============================== Hero ============================== */ .hero { margin-bottom: 20px; } .hero-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); } h1 { margin: 0 0 10px; font-size: clamp(30px, 6vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--heading); } .hero-sub { display: block; font-size: 0.5em; font-weight: 600; letter-spacing: 0.01em; color: var(--text-2); margin-top: 2px; } .hero-lead { font-size: 18px; line-height: 1.6; color: var(--text); margin: 0 0 14px; } .hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; } .hero-chips li { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 4px 12px; } .statement { font-size: 14.5px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 12px 16px; margin: 12px 0; box-shadow: var(--shadow); } .statement strong { color: var(--accent-text); } .hero-meta { color: var(--text-2); font-size: 14px; margin-top: 16px; } /* ============================== Kategorie ============================== */ .cat-block { margin-top: 48px; scroll-margin-top: calc(var(--hdr-h) + 16px); } .cat-hdr h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: clamp(21px, 4vw, 25px); font-weight: 750; letter-spacing: -0.01em; color: var(--heading); } .cat-count { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .cat-blurb { color: var(--text-2); font-size: 15px; margin: 0 0 4px; max-width: 62ch; } /* ============================== Blok funkcji ============================== */ .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 18px 18px; margin: 20px 0; box-shadow: var(--shadow); scroll-margin-top: calc(var(--hdr-h) + 16px); } .feature.is-flagship { border-color: var(--accent-line); } .feature-hdr { margin-bottom: 4px; } .feature-name { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--heading); } /* Nazwa jest zarazem linkiem-kotwicą (klik = URL sekcji w pasku adresu). */ .feature-anchor { color: inherit; } .feature-anchor:hover { color: var(--accent-text); text-decoration: none; } .flag-tag { display: inline-block; vertical-align: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 9px; margin-left: 8px; } .feature-lead { font-size: 15.5px; color: var(--text-2); margin: 0; } /* ---- Sekcje funkcji: labelowane bloki oddzielone linią (bez kart-w-karcie) */ .fsec { border-top: 1px solid var(--border); padding: 14px 0 2px; margin: 16px 0 0; } .fsec-label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); } /* Kolorowy znacznik sekcji (pasek, nie glif). */ .fsec-label::before { content: ''; width: 14px; height: 3px; border-radius: 2px; background: var(--border-strong); flex: none; } .fsec-idea .fsec-label::before, .fsec-value .fsec-label::before { background: var(--accent); } .fsec p, .fsec ul { max-width: 68ch; } .fsec > :last-child { margin-bottom: 8px; } /* Fair-play — mocniejsza, akcentowa identyfikacja. */ .fsec-fair { border-top: 0; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-md); padding: 12px 16px 6px; margin-top: 18px; } .fsec-fair .fsec-label { color: var(--accent-text); } .fsec-fair .fsec-label::before { background: var(--accent); } .fsec-fair.is-borderline { background: var(--warn-soft); border-color: var(--warn-line); } .fsec-fair.is-borderline .fsec-label { color: var(--warn); } .fsec-fair.is-borderline .fsec-label::before { background: var(--warn); } .fp-note { background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13.5px; } .fp-note strong { color: var(--warn); } /* Dodatkowe informacje — natywny
, domyślnie zwinięte. */ .fsec-details summary { cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; } .fsec-details summary::-webkit-details-marker { display: none; } /* Wskaźnik zwinięcia: chevron rysowany borderem (nie glif tekstowy). */ .fsec-details summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; flex: none; } .fsec-details[open] summary::after { transform: rotate(225deg) translateY(-1px); } .fsec-details summary:hover { color: var(--text-2); } /* ============================== Zrzuty / makiety ============================== */ .shots { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 2px; } .shot { margin: 0; } .shot-zoom { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; font: inherit; } .shot-zoom img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 1px solid var(--border); border-radius: var(--r-md); } .shot figcaption { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.45; } /* Żywy komponent (site/demos/*) — prawdziwy kod OG-E wklejony w stronę. Nosi własne style inline, więc tu tylko scena: ciemne tło dashboardu, żeby element czytał się tak jak w produkcie, i poziomy scroll wewnątrz ramki na wąskim ekranie (strona nigdy nie przewija się w bok). */ .shot-demo { padding: 14px; background: #0b0f14; border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; } .shot-demo > * { margin: 0 auto; } .shot-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: repeating-linear-gradient(45deg, var(--ph-a), var(--ph-a) 12px, var(--ph-b) 12px, var(--ph-b) 24px); border: 1px dashed var(--border-strong); border-radius: var(--r-md); } .shot-ph-tag { font: 12px/1 var(--font-mono); color: var(--text-3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 9px; } @media (min-width: 640px) { .shots { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } } /* ============================== Lightbox (podgląd zrzutu) ============================== */ body.lightbox-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(0, 0, 0, 0.82); } .lightbox[hidden] { display: none; } .lightbox-img { max-width: min(94vw, 1100px); max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox-caption { color: #e8e8ec; font-size: 13px; text-align: center; max-width: 700px; } .lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.18); } /* ============================== Spis treści ============================== */ .toc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); margin: 0 0 10px; } .toc-list { list-style: none; margin: 0; padding: 0; } .toc-cat { margin-top: 16px; } .toc-cat:first-child { margin-top: 0; } .toc-cat > a { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-text); padding: 3px 0; } .toc-item > a { display: block; font-size: 13.5px; color: var(--text-2); padding: 4px 0 4px 12px; border-left: 2px solid var(--border); transition: color 0.12s, border-color 0.12s; } .toc-item > a:hover { color: var(--heading); text-decoration: none; } .toc a.active { color: var(--heading); border-left-color: var(--accent); text-decoration: none; } .toc-cat > a.active { color: var(--accent-text); } /* Mobilny przełącznik spisu (w duchu FAB-a OG-E) + przyciemnienie tła */ .toc-fab { position: fixed; z-index: 60; right: 16px; bottom: 16px; font: 700 14px var(--font-sans); letter-spacing: 0.01em; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 999px; padding: 13px 20px; box-shadow: var(--shadow-lg); cursor: pointer; } .toc-scrim { position: fixed; inset: 0; z-index: 54; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.15s; } /* Mobile (domyślnie): spis jako wysuwany panel, ukryty do czasu tapnięcia */ .toc { position: fixed; z-index: 56; top: 0; left: 0; width: min(84vw, 320px); height: 100dvh; background: var(--surface); border-right: 1px solid var(--border); padding: 18px 16px 24px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-102%); transition: transform 0.18s ease; } body.toc-open .toc { transform: translateX(0); } body.toc-open .toc-scrim { opacity: 1; pointer-events: auto; } /* ============================== Desktop ============================== */ @media (min-width: 1040px) { .toc-fab, .toc-scrim { display: none; } .layout { grid-template-columns: var(--toc-w) minmax(0, var(--col)); max-width: calc(var(--toc-w) + var(--col) + 88px); gap: 56px; padding: 36px 24px 64px; } .toc { position: static; width: auto; height: auto; background: transparent; border-right: 0; padding: 0; transform: none; overflow: visible; } .toc-inner { position: sticky; top: calc(var(--hdr-h) + 24px); max-height: calc(100vh - var(--hdr-h) - 48px); overflow-y: auto; padding-right: 8px; } .feature { padding: 26px 26px 22px; } .fsec-fair { padding: 14px 18px 8px; } }