/** * JakToMám — Modern Theme * Activated by data-theme="modern" on . * Overrides CSS custom properties and adds glassmorphism, gradients, softer UI. * Inspired by astro-hero.css design language. */ /* ── Token overrides ──────────────────────────────────────────────── */ [data-theme="modern"] { /* Pozadí */ --color-bg: #f7f9fd; --color-surface: rgba(255, 255, 255, 0.82); --color-surface-2: rgba(248, 251, 255, 0.9); --color-surface-3: rgba(240, 245, 255, 0.85); /* Nav */ --color-nav: #141428; /* Akcent — jemnější modrá/fialová */ --color-accent: #4f8fe8; --color-accent-hover: #2e6fd0; --color-accent-light: rgba(79, 143, 232, 0.10); /* Bordery — semi-transparentní */ --color-border: rgba(72, 115, 196, 0.12); --color-border-2: rgba(72, 115, 196, 0.18); --color-border-focus: #4f8fe8; /* Zaoblení — větší */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; /* Stíny — barevné (modré), ne černé */ --shadow-sm: 0 2px 6px rgba(37, 60, 120, 0.06); --shadow-md: 0 4px 16px rgba(37, 60, 120, 0.08); --shadow-lg: 0 8px 32px rgba(37, 60, 120, 0.12); --shadow-card: 0 4px 20px rgba(37, 60, 120, 0.10); } /* ── Body gradient background ─────────────────────────────────────── */ [data-theme="modern"] body { background: linear-gradient(180deg, #f7f9fd 0%, #eef4ff 60%, #f7f9fd 100%); background-attachment: fixed; } /* ── Cards — glassmorphism ────────────────────────────────────────── */ [data-theme="modern"] .card { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(72, 115, 196, 0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(37, 60, 120, 0.08); } /* ── Buttons — gradient + colored shadow ──────────────────────────── */ [data-theme="modern"] .btn { border-radius: 0; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } [data-theme="modern"] .btn:hover { transform: translateY(-1px); } /* Primary buttons get gradient */ [data-theme="modern"] .btn-primary, [data-theme="modern"] .btn[style*="background:#1a1a2e"], [data-theme="modern"] .btn[style*="background: #1a1a2e"] { background: linear-gradient(135deg, #4f8fe8 0%, #2e6fd0 100%) !important; box-shadow: 0 8px 20px rgba(79, 143, 232, 0.25); } [data-theme="modern"] .btn-primary:hover { box-shadow: 0 12px 28px rgba(79, 143, 232, 0.35); } /* ── Nav — subtle gradient ────────────────────────────────────────── */ [data-theme="modern"] nav { background: linear-gradient(180deg, #16162e 0%, #121228 100%); border-bottom: 1px solid rgba(79, 143, 232, 0.08); } /* ── Badges — pill shape ──────────────────────────────────────────── */ [data-theme="modern"] .badge { border-radius: 0; padding-left: .65em; padding-right: .65em; } /* ── Form inputs ──────────────────────────────────────────────────── */ [data-theme="modern"] input[type=text], [data-theme="modern"] input[type=email], [data-theme="modern"] input[type=password], [data-theme="modern"] textarea, [data-theme="modern"] select { border-radius: 0; border-color: rgba(72, 115, 196, 0.15); background: rgba(255, 255, 255, 0.7); } [data-theme="modern"] input:focus, [data-theme="modern"] textarea:focus, [data-theme="modern"] select:focus { border-color: #4f8fe8; box-shadow: 0 0 0 3px rgba(79, 143, 232, 0.12); } /* ── Footer ───────────────────────────────────────────────────────── */ [data-theme="modern"] footer { background: linear-gradient(180deg, #12122a 0%, #0e0e22 100%); border-top: 1px solid rgba(79, 143, 232, 0.06); } /* ── Flash messages ───────────────────────────────────────────────── */ [data-theme="modern"] .flash, [data-theme="modern"] .error, [data-theme="modern"] .info { border-radius: 0; backdrop-filter: blur(8px); } /* ── Cookie bar ───────────────────────────────────────────────────── */ [data-theme="modern"] #cookie-bar { background: rgba(255, 255, 255, 0.92); border-top: 1px solid rgba(72, 115, 196, 0.12); backdrop-filter: blur(12px); color: #374151; } [data-theme="modern"] #cookie-bar button { background: linear-gradient(135deg, #4f8fe8, #2e6fd0); border-radius: 0; } /* ── Dropdown menus ───────────────────────────────────────────────── */ [data-theme="modern"] .admin-dropdown-inner { border-radius: 0; border: 1px solid rgba(72, 115, 196, 0.10); box-shadow: 0 8px 32px rgba(37, 60, 120, 0.14); backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.95); } /* ── Guest tab ────────────────────────────────────────────────────── */ [data-theme="modern"] #guest-tab-panel { border-radius: 0; border-color: rgba(72, 115, 196, 0.12); backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.92); } /* ── Page-specific: Homepage ──────────────────────────────────────── */ [data-theme="modern"] .hp-hero { background: linear-gradient(180deg, #f7f9fd 0%, #eef4ff 100%); } [data-theme="modern"] .hp-feature-card, [data-theme="modern"] .hp-card { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(72, 115, 196, 0.10); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(37, 60, 120, 0.08); } /* ── Page-specific: Overview ──────────────────────────────────────── */ [data-theme="modern"] .ov-card, [data-theme="modern"] .overview-card { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(72, 115, 196, 0.10); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(37, 60, 120, 0.08); } /* ── Page-specific: Ceník ─────────────────────────────────────────── */ [data-theme="modern"] .plan-card { background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(72, 115, 196, 0.12); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(37, 60, 120, 0.08); } [data-theme="modern"] .plan-card:hover { box-shadow: 0 8px 32px rgba(37, 60, 120, 0.14); transform: translateY(-2px); } /* ── Page-specific: Pre-map ───────────────────────────────────────── */ [data-theme="modern"] .premap-card, [data-theme="modern"] .queue-card { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(72, 115, 196, 0.10); backdrop-filter: blur(10px); } /* ── Transitions ──────────────────────────────────────────────────── */ [data-theme="modern"] .card, [data-theme="modern"] .plan-card { transition: box-shadow .25s ease, transform .25s ease, background .25s ease; }