/* --------------------------------------------------------------------------- Hangar — warstwa markowa Patrick.pro na Gitei. Zasada: NIE jest to własny motyw Gitei (theme-*.css). To nakładka doklejana w przez custom/templates/custom/header.tmpl, która nadpisuje wyłącznie zmienne CSS wbudowanych motywów. Dzięki temu aktualizacja Gitei nie wymaga przepisywania całego motywu — dochodzą co najwyżej nowe zmienne, a te stare nadal działają. Motywy Gitei rozpoznajemy po atrybucie [data-theme] na : gitea-auto — jasny/ciemny wg ustawienia systemu (domyślny) gitea-light — wymuszony jasny gitea-dark — wymuszony ciemny Paleta: hub/brand/brand-compendium.md, sekcja 4.2. --------------------------------------------------------------------------- */ /* --- Montserrat, self-hosted (OFFLINE_MODE = true, żadnych CDN-ów) --------- */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Skala marki (stała, niezależna od jasny/ciemny) ----------------------- */ :root { /* Fiolet — 7 odcieni z brandbooka + koniec gradientu logo (#291932). Wartości z sufiksem "-x" to kroki pośrednie policzone na potrzeby 14-stopniowej rampy Gitei (hover/active); brandbook ich nie definiuje. */ --pp-violet-900: #170e1c; /* -x */ --pp-violet-850: #291932; /* gradient logo (koniec) */ --pp-violet-800: #3c2449; /* -x */ --pp-violet-700: #4f2f60; /* najciemniejszy */ --pp-violet-650: #5a366d; /* -x */ --pp-violet-600: #653d7b; /* ciemny */ --pp-violet-550: #714489; /* -x */ --pp-violet-500: #7d4b98; /* PODSTAWOWY (logo) */ --pp-violet-450: #8855a4; /* -x */ --pp-violet-400: #935eb0; /* jasny */ --pp-violet-350: #a376bc; /* -x */ --pp-violet-300: #b38ec7; /* jaśniejszy */ --pp-violet-250: #c3a6d3; /* -x */ --pp-violet-200: #d3bedf; /* najjaśniejszy */ --pp-violet-100: #e9dfef; /* -x */ --pp-violet-050: #f4eef7; /* tło / tint */ /* Pomarańcz — akcent CTA. Tylko małe powierzchnie (zasada z brandbooka). */ --pp-orange: #ff791b; --pp-orange-hover: #ec6c12; --pp-orange-tint: #fff0e5; --pp-orange-text: #c25a00; /* Typografia — Gitea wystawia --fonts-override właśnie po to. */ --fonts-override: "Montserrat"; /* Geometria bliżej kompaktowego layoutu Bridge'a (6 px kontrolki / 8 px karty). Brandbook mówi 18 px, ale ten promień powstał dla materiałów marketingowych, nie dla gęstego UI — patrz hub/brand/app-design-system/kompaktowy-layout-pozbruk.md */ --border-radius: 6px; --border-radius-medium: 8px; } /* --- Mapowanie na motyw JASNY --------------------------------------------- */ :root, [data-theme="gitea-light"] { --color-primary: var(--pp-violet-500); --color-primary-contrast: #ffffff; --color-primary-dark-1: var(--pp-violet-550); --color-primary-dark-2: var(--pp-violet-600); --color-primary-dark-3: var(--pp-violet-650); --color-primary-dark-4: var(--pp-violet-700); --color-primary-dark-5: var(--pp-violet-800); --color-primary-dark-6: var(--pp-violet-850); --color-primary-dark-7: var(--pp-violet-900); --color-primary-light-1: var(--pp-violet-450); --color-primary-light-2: var(--pp-violet-400); --color-primary-light-3: var(--pp-violet-350); --color-primary-light-4: var(--pp-violet-300); --color-primary-light-5: var(--pp-violet-250); --color-primary-light-6: var(--pp-violet-200); --color-primary-light-7: var(--pp-violet-050); --color-primary-alpha-10: #7d4b9819; --color-primary-alpha-20: #7d4b9833; --color-primary-alpha-30: #7d4b984b; --color-primary-alpha-40: #7d4b9866; --color-primary-alpha-50: #7d4b9880; --color-primary-alpha-60: #7d4b9899; --color-primary-alpha-70: #7d4b98b3; --color-primary-alpha-80: #7d4b98cc; --color-primary-alpha-90: #7d4b98e1; --color-primary-hover: var(--color-primary-dark-1); --color-primary-active: var(--color-primary-dark-2); /* Znacznik "logo" Gitei (domyślnie zielony) — na fiolet marki. */ --color-logo: var(--pp-violet-500); } /* --- Mapowanie na motyw CIEMNY -------------------------------------------- */ /* Na ciemnym tle #7d4b98 daje kontrast ~2,6:1 — za mało na linki. Rolę koloru podstawowego przejmuje "jaśniejszy" #b38ec7 (~6:1), a tekst na przyciskach jest ciemnofioletowy zamiast białego. Obie wartości pochodzą z brandbooka. */ [data-theme="gitea-dark"] { --color-primary: var(--pp-violet-300); --color-primary-contrast: var(--pp-violet-850); --color-primary-dark-1: var(--pp-violet-250); --color-primary-dark-2: var(--pp-violet-200); --color-primary-dark-3: var(--pp-violet-100); --color-primary-dark-4: var(--pp-violet-050); --color-primary-dark-5: #f8f4fa; --color-primary-dark-6: #fbf9fc; --color-primary-dark-7: #fdfcfe; --color-primary-light-1: var(--pp-violet-400); --color-primary-light-2: var(--pp-violet-500); --color-primary-light-3: var(--pp-violet-600); --color-primary-light-4: var(--pp-violet-700); --color-primary-light-5: var(--pp-violet-800); --color-primary-light-6: var(--pp-violet-850); --color-primary-light-7: var(--pp-violet-900); --color-primary-alpha-10: #b38ec719; --color-primary-alpha-20: #b38ec733; --color-primary-alpha-30: #b38ec74b; --color-primary-alpha-40: #b38ec766; --color-primary-alpha-50: #b38ec780; --color-primary-alpha-60: #b38ec799; --color-primary-alpha-70: #b38ec7b3; --color-primary-alpha-80: #b38ec7cc; --color-primary-alpha-90: #b38ec7e1; --color-primary-hover: var(--color-primary-light-1); --color-primary-active: var(--color-primary-light-2); --color-logo: var(--pp-violet-300); } /* gitea-auto = jasny/ciemny wg systemu. Powtarzamy oba mapowania pod media query, bo [data-theme="gitea-auto"] nie mówi sam z siebie, w którym trybie jest. */ @media (prefers-color-scheme: light) { [data-theme="gitea-auto"] { --color-primary: var(--pp-violet-500); --color-primary-contrast: #ffffff; --color-primary-dark-1: var(--pp-violet-550); --color-primary-dark-2: var(--pp-violet-600); --color-primary-dark-3: var(--pp-violet-650); --color-primary-dark-4: var(--pp-violet-700); --color-primary-dark-5: var(--pp-violet-800); --color-primary-dark-6: var(--pp-violet-850); --color-primary-dark-7: var(--pp-violet-900); --color-primary-light-1: var(--pp-violet-450); --color-primary-light-2: var(--pp-violet-400); --color-primary-light-3: var(--pp-violet-350); --color-primary-light-4: var(--pp-violet-300); --color-primary-light-5: var(--pp-violet-250); --color-primary-light-6: var(--pp-violet-200); --color-primary-light-7: var(--pp-violet-050); --color-primary-alpha-10: #7d4b9819; --color-primary-alpha-20: #7d4b9833; --color-primary-alpha-30: #7d4b984b; --color-primary-alpha-40: #7d4b9866; --color-primary-alpha-50: #7d4b9880; --color-primary-alpha-60: #7d4b9899; --color-primary-alpha-70: #7d4b98b3; --color-primary-alpha-80: #7d4b98cc; --color-primary-alpha-90: #7d4b98e1; --color-primary-hover: var(--color-primary-dark-1); --color-primary-active: var(--color-primary-dark-2); --color-logo: var(--pp-violet-500); } } @media (prefers-color-scheme: dark) { [data-theme="gitea-auto"] { --color-primary: var(--pp-violet-300); --color-primary-contrast: var(--pp-violet-850); --color-primary-dark-1: var(--pp-violet-250); --color-primary-dark-2: var(--pp-violet-200); --color-primary-dark-3: var(--pp-violet-100); --color-primary-dark-4: var(--pp-violet-050); --color-primary-dark-5: #f8f4fa; --color-primary-dark-6: #fbf9fc; --color-primary-dark-7: #fdfcfe; --color-primary-light-1: var(--pp-violet-400); --color-primary-light-2: var(--pp-violet-500); --color-primary-light-3: var(--pp-violet-600); --color-primary-light-4: var(--pp-violet-700); --color-primary-light-5: var(--pp-violet-800); --color-primary-light-6: var(--pp-violet-850); --color-primary-light-7: var(--pp-violet-900); --color-primary-alpha-10: #b38ec719; --color-primary-alpha-20: #b38ec733; --color-primary-alpha-30: #b38ec74b; --color-primary-alpha-40: #b38ec766; --color-primary-alpha-50: #b38ec780; --color-primary-alpha-60: #b38ec799; --color-primary-alpha-70: #b38ec7b3; --color-primary-alpha-80: #b38ec7cc; --color-primary-alpha-90: #b38ec7e1; --color-primary-hover: var(--color-primary-light-1); --color-primary-active: var(--color-primary-light-2); --color-logo: var(--pp-violet-300); } } /* --- Nagłówki: Montserrat semibold, lekko ściągnięty tracking -------------- */ .ui.header, h1, h2, h3, h4, h5 { letter-spacing: -0.01em; } /* --- Strona startowa (custom/templates/home.tmpl) -------------------------- */ .pp-home { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 64px 24px 80px; max-width: 900px; margin: 0 auto; } .pp-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } .pp-hero-mark { width: 84px; height: 84px; } .pp-hero-title { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-dark); } .pp-hero-role { margin: 0; font-size: 18px; font-weight: 500; color: var(--color-primary); } .pp-hero-lead { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--color-text-light-1); text-wrap: pretty; } .pp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; } /* Jedyne miejsce z pomarańczem — zgodnie z zasadą "akcent w małych powierzchniach w kontrze do dominującego fioletu". */ .pp-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--border-radius-medium); background: var(--pp-orange); color: #ffffff; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 2px 4px 12px #00000014; transition: background 0.15s ease; } .pp-btn-primary:hover, .pp-btn-primary:focus-visible { background: var(--pp-orange-hover); color: #ffffff; text-decoration: none; } .pp-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--border-radius-medium); border: 1px solid var(--color-secondary); color: var(--color-text); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .pp-btn-ghost:hover, .pp-btn-ghost:focus-visible { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } .pp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; } .pp-card { border: 1px solid var(--color-light-border); border-radius: var(--border-radius-medium); background: var(--color-box-body); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .pp-card-icon { color: var(--color-primary); display: flex; } .pp-card-icon .svg { width: 20px; height: 20px; } .pp-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text-dark); } .pp-card-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-light-2); text-wrap: pretty; } .pp-card-text code { font-family: var(--fonts-monospace); font-size: 12px; background: var(--color-markup-code-inline); border-radius: 4px; padding: 1px 5px; } .pp-note { font-size: 12.5px; color: var(--color-text-light-3); text-align: center; } @media (max-width: 640px) { .pp-home { padding: 40px 18px 56px; gap: 32px; } .pp-hero-title { font-size: 34px; } }