/* buszido.pl — motyw glass (glassmorphism) + travel + aplikacja */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); :root { /* Główna paleta — rebranding purpura/cyjan */ --accent: #b026ff; --accent-text: #ffffff; --surf: #1a0035; --surf2: #2a0050; --gold: #ffcc00; --cyan: #00d4f5; --bg-primary: #0d0618; --bg-navbar: #1a0035; --bg-card: #1a0035; --bg-input: #1a0035; --bg-panel: #2a0050; --bg-notification: #2a0050; --bg-btn-secondary: #2a0050; --bg-btn-neutral: #1a0035; /* Glass — półprzezroczyste warstwy */ --glass-bg: rgba(26, 0, 53, 0.72); --glass-bg-strong: rgba(26, 0, 53, 0.9); --glass-border: rgba(176, 38, 255, 0.3); --glass-blur: 12px; --glass-blur-strong: 20px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); /* Tekst */ --text-primary: #f0e0ff; --text-secondary: rgba(240, 224, 255, 0.78); --text-muted: rgba(240, 224, 255, 0.5); /* Obramowania */ --border: rgba(176, 38, 255, 0.22); --border-strong: rgba(176, 38, 255, 0.4); --border-focus: #b026ff; /* Cienie — miękkie, głębia */ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(176, 38, 255, 0.25); --radius-card: 20px; --radius-glass: 16px; /* Statusy systemu */ --status-new: #b026ff; --status-progress: #ffcc00; --status-ok: #00d4f5; --status-cancel: #f87171; --status-pending: #94a3b8; /* Przyciski */ --btn-primary-bg: #b026ff; --btn-primary-text: #ffffff; --btn-primary-hover: #7a00cc; --btn-secondary-bg: #2a0050; --btn-secondary-text: #b026ff; --btn-neutral-bg: #1a0035; --btn-neutral-text: #f0e0ff; /* Legacy (kompatybilność) */ --bg-secondary: #1a0035; --accent-hover: #7a00cc; --accent-light: rgba(176, 38, 255, 0.15); --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } /* Tryb jasny — tło bez obrazka, karty półprzezroczyste */ [data-theme="light"] { --bg-primary: #f1f5f9; --bg-navbar: rgba(255,255,255,0.9); --bg-secondary: #e2e8f0; --bg-card: rgba(255,255,255,0.85); --glass-bg: rgba(255,255,255,0.7); --glass-border: rgba(0,0,0,0.08); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --border: rgba(0,0,0,0.1); --border-strong: rgba(176, 38, 255, 0.45); --accent: #b026ff; --btn-primary-hover: #7a00cc; --accent-light: rgba(176, 38, 255, 0.12); } [data-theme="light"] body { background-image: none; } [data-theme="light"] body::before { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); } /* Pierwsze malowanie — unika białego zanim załaduje się body/tło */ html { background-color: var(--bg-primary); } body { background: var(--bg-primary); background-image: url(https://images.unsplash.com/photo-1486496146582-9ffcd0b2b2b1?w=1920&q=40); background-size: cover; background-attachment: fixed; background-position: center; color: var(--text-primary); font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; transition: background 0.3s ease, color 0.2s ease; } /* * `background-attachment: fixed` zmusza przeglądarkę do przemalowania tła przy * każdej klatce przewijania — na telefonach to główne źródło szarpania (zdjęcie * tła ma 1920 px). Na ekranach dotykowych przewijamy tło razem z treścią; * wizualnie nie widać różnicy, bo i tak przykrywa je ciemna nakładka body::before. */ @media (hover: none), (max-width: 900px) { body { background-attachment: scroll; } } body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(13,6,24,0.92) 0%, rgba(13,6,24,0.97) 100%); pointer-events: none; z-index: -1; } /* Karty — kolor, zaokrąglenie, cień, hover glow */ .card, .section, .country-tooltip, .tool-card, .calc-form, .hub-card, .full-list-card, .packing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: box-shadow 0.25s ease, border-color 0.25s ease; } .card:hover, .hub-card:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(176, 38, 255, 0.25); } /* Przycisk główny */ .btn-primary, button.btn-primary, a.btn-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border: none; font-weight: 700; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; } .btn-primary:hover { background: var(--btn-primary-hover) !important; box-shadow: 0 4px 20px rgba(176, 38, 255, 0.35); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Przycisk drugorzędny */ .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--accent-light); border-color: var(--accent); } /* Przycisk neutralny */ .btn-neutral { background: var(--btn-neutral-bg); color: var(--btn-neutral-text); border: 1px solid var(--border); } /* Pola formularza */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], select, textarea { background: var(--bg-input) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; transition: border-color 0.2s, box-shadow 0.2s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus) !important; box-shadow: 0 0 0 3px var(--accent-light); } /* Logo i akcenty (marka w navbarze — .logo bez wymuszania koloru globalnie) */ .accent, .accent span { color: var(--accent) !important; } .logo-animated em { font-style: normal !important; font-weight: 300 !important; color: #e8e6e0 !important; } .logo-animated .logo-dot { color: #ffcc00 !important; font-weight: 800 !important; } /* Pasek statusu na kartach zleceń */ .status-bar { height: 4px; border-radius: var(--radius-card) var(--radius-card) 0 0; } .status-new { background: var(--status-new); } .status-progress { background: var(--status-progress); } .status-ok { background: var(--status-ok); } .status-cancel { background: var(--status-cancel); } .status-pending { background: var(--status-pending); } /* Etykiety statusów (tekst) */ .badge-status-new { color: var(--status-new); } .badge-status-progress { color: var(--status-progress); } .badge-status-ok { color: var(--status-ok); } .badge-status-cancel { color: var(--status-cancel); } .badge-status-pending { color: var(--status-pending); } /* Oceny — gwiazdki */ .star-rating { color: var(--accent); } /* Powiadomienia */ .notification { background: var(--bg-notification); border-left: 4px solid var(--accent); } /* Dolna nawigacja mobilna — glass */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur-strong)); -webkit-backdrop-filter: blur(var(--glass-blur-strong)); border-top: 1px solid var(--glass-border); padding: 0.5rem 0.75rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3); } .bottom-nav-inner { max-width: 480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-decoration: none; border-radius: 10px; transition: color 0.2s, background 0.2s; } .bottom-nav a:hover, .bottom-nav a:focus { color: var(--accent); background: var(--accent-light); } .bottom-nav a .icon { font-size: 1.2rem; } .bottom-nav .nav-cta { background: var(--accent); color: var(--accent-text); font-weight: 700; padding: 0.5rem 0.75rem; } .bottom-nav .nav-cta:hover { background: var(--accent-hover); color: var(--accent-text); } @media (max-width: 768px) { .bottom-nav { display: block; } body.has-bottom-nav { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } }