/* Pozivnica - Eventspark-derived theme (light default, dark via [data-theme="dark"]) */ /* ========================================== CSS Variables (Design Tokens) ========================================== */ :root { color-scheme: light; /* Colors - light theme (default) */ --bg-base: #FAFAFA; --bg-elevated: #FFFFFF; --bg-highlight: #EEEEF1; --bg-press: #E2E2E7; --bg-card: #FFFFFF; --bg-card-hover: #F4F4F6; --text-base: #19192E; --text-subdued: #6F6F7B; --text-secondary: #45455A; --text-disabled: #A0A0AC; --accent-primary: #E44479; --accent-primary-hover: #DF2060; --accent-secondary: #19192E; --essential-negative: #EF4343; --essential-warning: #E8A530; --essential-positive: #33998B; --border-color: #E8E8E8; --border-color-light: #D6D6D6; /* Shadows - light theme (default) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-card: 0 10px 15px rgba(0, 0, 0, 0.1); /* Typography */ --font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-secondary: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-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: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Transitions - signature easing curve applied everywhere */ --transition-fast: 200ms cubic-bezier(0.22, 1, 0.36, 1); --transition-base: 400ms cubic-bezier(0.22, 1, 0.36, 1); --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1); /* 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. --accent-primary/--accent-primary-hover/--accent-secondary are NOT overridden here - the brand pink stays fixed across themes, matching the style guide's explicit "primary/ring stay fixed" principle. --essential-warning/--essential-positive/--shadow-* are also not overridden - the guide's own dark block never varies them either, so they're now theme-invariant (a real behavior change from before, when this app varied almost everything between themes). */ [data-theme="dark"] { color-scheme: dark; --bg-base: #0F0F1A; --bg-elevated: #151523; --bg-highlight: #272735; --bg-press: #1A1A28; --bg-card: #151523; --bg-card-hover: #272735; --text-base: #F2F2F3; --text-subdued: #878792; --text-secondary: #B8B8C0; --text-disabled: #4A4A5A; --essential-negative: #7C1D1D; --border-color: #2B2B3B; --border-color-light: #3D3D4F; } /* ========================================== 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; } /* Smooth hash-link scrolling is a compositor tax on phones (and ignored under prefers-reduced-motion). Desktop-only. */ @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { html { 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-family: var(--font-display); 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