/* ============================================================ glowup.css — GLOBALNY system wizualny gdzie-paczka.pl Język: industrial / terminal paczkomatu. Żółć InPost + grafit + ciepły papier + koral. Bricolage / Hanken / Space Mono. Ładowany na końcu na KAŻDEJ stronie. ============================================================ */ /* FIX KRYTYCZNY: motyw ustawia html{font-size:62.5%} (rem=10px) → wszystkie fonty ~38% za małe. Przywracamy 16px. */ html { font-size: 100% !important; } :root { --gp-ink: #16150F; --gp-ink-2: #2a281f; --gp-paper: #F4F5F7; --gp-paper-2:#E7EAEF; --gp-yellow: #FFD400; --gp-coral: #FF4D2E; --gp-muted: #76715F; --gp-line: rgba(22,21,15,.12); --gp-radius: 16px; --gp-shadow: 0 4px 22px rgba(22,21,15,.06); --gp-shadow-h: 0 20px 44px -22px rgba(22,21,15,.4); --gp-mono: "Space Mono", ui-monospace, monospace; --gp-disp: "Bricolage Grotesque", "Hanken Grotesk", sans-serif; --gp-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; } /* ---------- baza ---------- */ body { background: var(--gp-paper); color: var(--gp-ink); font-family: var(--gp-body); font-size: 1.0625rem; line-height: 1.6; } h1, h2, h3, h4, h5 { font-family: var(--gp-disp); font-weight: 800; letter-spacing: -.02em; color: var(--gp-ink); line-height: 1.1; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } h3 { font-size: 1.5rem; } a { color: var(--gp-coral); text-decoration: none; } a:hover { color: var(--gp-ink); } .container { max-width: 1180px; } /* ---------- Navbar ---------- */ .navbar { background: #fff !important; border-bottom: 1px solid var(--gp-line) !important; box-shadow: 0 6px 24px rgba(22,21,15,.04); padding: .85rem 0; } .gp-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; } .gp-brand-mark { font-family: var(--gp-disp); font-weight: 800; font-size: 1.25rem; background: var(--gp-yellow); color: var(--gp-ink); width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px rgba(255,212,0,.6); } .gp-brand-mark span { color: var(--gp-coral); } .gp-brand-word { font-family: var(--gp-disp); font-weight: 800; font-size: 1.3rem; color: var(--gp-ink); letter-spacing: -.02em; } .gp-brand-tld { color: var(--gp-muted); } .navbar .nav-link { font-family: var(--gp-body); font-weight: 600; font-size: 1.02rem; color: var(--gp-ink) !important; border-radius: 9px; padding: .45rem .85rem !important; transition: background .14s, color .14s; } .navbar .nav-link:hover, .navbar .nav-link:focus { background: var(--gp-paper-2); color: var(--gp-ink) !important; } .dropdown-menu { border: 1px solid var(--gp-line); border-radius: 12px; box-shadow: var(--gp-shadow-h); padding: .4rem; } .dropdown-item { border-radius: 8px; font-weight: 500; padding: .5rem .75rem; } .dropdown-item:hover { background: var(--gp-paper-2); color: var(--gp-ink); } /* ---------- Karty ---------- */ .card { border: 1px solid var(--gp-line); border-radius: var(--gp-radius); box-shadow: var(--gp-shadow); background: #fff; transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; } .card:hover { transform: translateY(-3px); box-shadow: var(--gp-shadow-h); } .card-header { background: #fff; border-bottom: 1px solid var(--gp-line); font-weight: 700; padding: 1rem 1.15rem; } .card-title { font-family: var(--gp-disp); font-weight: 700; } /* ---------- panele (stary markup paczkomatu/miasta) ---------- */ .panel { background: #fff; border: 1px solid var(--gp-line); border-radius: var(--gp-radius); box-shadow: var(--gp-shadow); overflow: hidden; margin-bottom: 1.25rem; } .panel-heading { background: var(--gp-ink); color: #fff; padding: 1rem 1.25rem; font-weight: 700; font-family: var(--gp-disp); } .panel-title, .panel-heading h3 { color: #fff !important; font-family: var(--gp-disp); margin: 0; } .panel-body { padding: 1.25rem; } /* ---------- Przyciski ---------- */ .btn { border-radius: 11px; font-weight: 600; } .btn-primary { background: var(--gp-ink); border-color: var(--gp-ink); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--gp-coral); border-color: var(--gp-coral); color: #fff; } .btn-outline-primary { color: var(--gp-ink); border-color: var(--gp-ink); } .btn-outline-primary:hover { background: var(--gp-ink); border-color: var(--gp-ink); color: #fff; } .btn-light { background: var(--gp-yellow); border-color: var(--gp-yellow); color: var(--gp-ink); font-weight: 700; } .btn-light:hover { background: #ffdf3a; border-color: #ffdf3a; } /* ---------- Badge / status ---------- */ .badge { border-radius: 999px; font-weight: 600; font-family: var(--gp-mono); } .badge.bg-secondary { background: var(--gp-ink) !important; color: var(--gp-yellow) !important; } .bg-success, .badge.bg-success { background: #1f9d55 !important; } /* ---------- Breadcrumbs ---------- */ .breadcrumb { background: transparent; padding-left: 0; font-size: .95rem; } .breadcrumb a { color: var(--gp-coral); font-weight: 600; } .breadcrumb a:hover { color: var(--gp-ink); } .breadcrumb .active, .breadcrumb-item.active { color: var(--gp-muted); } /* ---------- listy ---------- */ .list-group-item { border-color: var(--gp-line); } .list-group-item a { color: var(--gp-ink); } .list-group-item a:hover { color: var(--gp-coral); } /* ---------- Footer ---------- */ footer.bg-light, footer { background: var(--gp-ink) !important; border-radius: 26px 26px 0 0; margin-top: 4rem !important; color: rgba(242,238,228,.8); } footer .text-muted { color: rgba(242,238,228,.65) !important; } footer a { color: var(--gp-yellow) !important; text-decoration: none; } footer a:hover { color: #fff !important; } /* ---------- drobne ---------- */ img { max-width: 100%; } ::selection { background: var(--gp-yellow); color: var(--gp-ink); } @media (max-width: 768px) { .gp-brand-word { font-size: 1.1rem; } .gp-brand-mark { width: 38px; height: 38px; font-size: 1.1rem; } } /* override Bootswatch panel-info/success/itp. headerów na grafit */ .panel-info > .panel-heading, .panel-success > .panel-heading, .panel-primary > .panel-heading, .panel-default > .panel-heading { background: var(--gp-ink) !important; color: #fff !important; border: none !important; } /* ---------- nagłówek podstrony + kafelki (reużywalne) ---------- */ .gp-page-head { padding: 44px 0 4px; } .gp-eyebrow { font-family: var(--gp-mono); font-size: .85rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gp-muted); display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; } .gp-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gp-coral); } .gp-lead { color: var(--gp-muted); font-size: 1.15rem; margin-top: .4rem; } .gp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 26px 0 8px; } .gp-tile { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: #fff; border: 1px solid var(--gp-line); border-radius: 12px; padding: .85rem 1rem; text-decoration: none; color: var(--gp-ink); font-weight: 600; transition: transform .14s, border-color .14s, box-shadow .14s; } .gp-tile:hover { transform: translateY(-2px); border-color: var(--gp-coral); box-shadow: var(--gp-shadow); color: var(--gp-ink); } .gp-tile .c { font-family: var(--gp-mono); font-size: .8rem; font-weight: 700; background: var(--gp-ink); color: var(--gp-yellow); padding: .2rem .55rem; border-radius: 999px; flex-shrink: 0; }