/* Pozivnica - Spotify-Inspired Theme (light default, dark via [data-theme="dark"]) */ /* ========================================== CSS Variables (Design Tokens) ========================================== */ :root { color-scheme: light; /* Colors - light theme (default) */ --bg-base: #ffffff; --bg-elevated: #f7f7f7; --bg-highlight: #ececec; --bg-press: #e0e0e0; --bg-card: #ffffff; --bg-card-hover: #f5f5f5; --text-base: #191414; --text-subdued: #6a6a6a; --text-secondary: #535353; --text-disabled: #b3b3b3; --accent-primary: #1ed760; --accent-primary-hover: #19b954; --accent-secondary: #1aa34e; --essential-negative: #e91429; --essential-warning: #c67c00; --essential-positive: #1aa34e; --border-color: #e0e0e0; --border-color-light: #cccccc; /* Shadows - light theme (default) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.14); /* Typography */ --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-secondary: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Playfair Display', Georgia, serif; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* Layout */ --sidebar-width: 280px; --header-height: 64px; --mobile-nav-height: 64px; --content-max-width: 1400px; } /* Dark theme - opted into via , set from the "theme" cookie (see getTheme() in internal/server/htmx_helpers.go). Light (:root above) is the default for logged-out/first-visit users. */ [data-theme="dark"] { color-scheme: dark; --bg-base: #121212; --bg-elevated: #181818; --bg-highlight: #282828; --bg-press: #000000; --bg-card: #181818; --bg-card-hover: #282828; --text-base: #ffffff; --text-subdued: #b3b3b3; --text-secondary: #a7a7a7; --text-disabled: #535353; --accent-primary: #1ed760; --accent-primary-hover: #1fdf64; --accent-secondary: #1db954; --essential-negative: #e91429; --essential-warning: #ffa42b; --essential-positive: #1ed760; --border-color: #282828; --border-color-light: #404040; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5); } /* ========================================== Reset & Base Styles ========================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-primary); background-color: var(--bg-base); color: var(--text-base); line-height: 1.5; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } [hidden] { display: none !important; } /* ========================================== Typography ========================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1rem; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .text-subdued { color: var(--text-subdued); } /* ========================================== App Layout ========================================== */ .app-container { display: flex; min-height: 100vh; min-height: 100dvh; } .main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: var(--mobile-nav-height); } .content-area { flex: 1; min-width: 0; padding: var(--spacing-lg); max-width: var(--content-max-width); width: 100%; margin: 0 auto; } @media (max-width: 1024px) { .main-content { margin-left: 0; } } /* ========================================== Sidebar ========================================== */ .sidebar { width: var(--sidebar-width); height: 100vh; height: 100dvh; position: fixed; left: 0; top: 0; background: var(--bg-base); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; /* Above .mobile-nav (also z-index 100) - as an off-canvas drawer on mobile, the sidebar needs to sit in front of the fixed bottom nav bar, not tie with it and lose on DOM order. */ z-index: 150; transition: transform var(--transition-slow); } .sidebar-header { padding: var(--spacing-lg); border-bottom: 1px solid var(--border-color); } .sidebar-logo { display: flex; align-items: center; gap: var(--spacing-sm); } .logo-icon { width: 32px; height: 32px; fill: var(--accent-primary); } .logo-text { font-size: 1.25rem; font-weight: 700; font-family: var(--font-secondary); } .sidebar-nav { flex: 1; padding: var(--spacing-md); overflow-y: auto; } .nav-list { display: flex; flex-direction: column; gap: var(--spacing-xs); } .nav-link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); color: var(--text-subdued); font-weight: 500; transition: all var(--transition-fast); } .nav-link:hover { color: var(--text-base); background: var(--bg-highlight); } .nav-link.active { color: var(--text-base); background: var(--bg-highlight); } /* Same look as .nav-link but reset for a