/* ================================================ File: style.css Subject: Bachelor Thesis — FX Triangular Visualization Author: Felix Vadakumchery ================================================ ARCHITECTURE OVERVIEW --------------------- 1. CSS CUSTOM PROPERTIES (":root" block) All colours, spacing steps, radii, and font stacks are defined as CSS variables in :root. Changing a single variable here updates every rule that references it — no grep-and-replace required. 2. DARK MODE OVERRIDE ([data-theme="dark"]) A single attribute selector block at the bottom re-declares only the colour variables that differ in dark mode. Every layout rule, spacing rule, and component rule written against :root variables works in both themes automatically without any duplication. The data-theme attribute is set on by the anti-flash inline script before CSS loads, so the correct palette is always in effect from the very first paint. 3. RESET AND BASE (*, html, body) Zeroes browser default margins and enforces border-box sizing globally. 4. LAYOUT SKELETON The page uses a three-column flex row inside .app-main: [control-panel] [sidebar-toggle] [chart-section] [events-panel] .app-main has a fixed height of 100vh minus the header so the chart section fills the viewport without a scrollbar. 5. COMPONENT SECTIONS (in order) Header → Main layout → Control panel → Sidebar toggle → Form elements → Date presets → Currency selectors → Date inputs → Generate / Reset buttons → Error message → Sanity check → Chart section → Loading spinner → Download bar → Animation bar → Notes toggle → Data notes → Utility class → Dark mode overrides → Theme toggle → Header navigation → About page layout → About sections → Table → Math blocks → Info button / tooltip pattern → View tabs → View panels → Download group → EUR note → Events panel → Responsive breakpoints (≤1024px, ≤768px) 6. RESPONSIVE BREAKPOINTS Two @media blocks near the bottom handle tablet-landscape (≤1024px) and tablet-portrait (≤768px) screen widths. The desktop layout (>1024px) is the default, written without any media query. ================================================ */ /* ------------------------------------------------ CSS CUSTOM PROPERTIES (VARIABLES) Central colour and spacing definitions for the light theme (default). Changing a single value here updates every rule that references it. Dark mode counterparts live in the [data-theme="dark"] block below. ------------------------------------------------ */ :root { /* Color palette — UZH brand style */ --color-bg: #ffffff; /* Main background — white */ --color-surface: #f4f6fa; /* Panel background — light blue-grey */ --color-border: #dde2ea; /* Subtle borders */ --color-accent: #0028a5; /* UZH Blue — primary accent */ --color-accent-hover: #001f8a; /* Darker UZH Blue on hover */ --color-text: #1c1c1c; /* Primary text — near black */ --color-text-muted: #5f6b7a; /* Secondary text — medium grey */ --color-success: #057a55; /* Green for sanity check */ --color-error: #c81e1e; /* Red for error messages */ /* Currency axis colors — kept in sync with getChartColors() in main.js */ --color-currency-a: #0028a5; --color-currency-b: #057a55; --color-currency-c: #be185d; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* Border radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Typography */ --font-main: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; } /* ------------------------------------------------ RESET AND BASE STYLES Removes browser default margins and sets a consistent box model across all elements. ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font-main); background-color: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.6; /* Smooth font rendering on macOS */ -webkit-font-smoothing: antialiased; } /* ------------------------------------------------ HEADER Top bar with application title and subtitle. ------------------------------------------------ */ .app-header { background-color: var(--color-surface); border-bottom: 3px solid var(--color-accent); padding: var(--spacing-lg) var(--spacing-xl); } .header-content { max-width: 1400px; margin: 0 auto; } .header-brand { display: flex; align-items: center; gap: var(--spacing-lg); } .uzh-logo-link { display: flex; align-items: center; flex-shrink: 0; } .uzh-logo { height: 52px; width: auto; } .app-title { font-size: 22px; font-weight: 600; color: var(--color-text); letter-spacing: -0.3px; } .app-subtitle { font-size: 13px; color: var(--color-text-muted); margin-top: var(--spacing-xs); } /* ------------------------------------------------ MAIN LAYOUT Five-column flex row: [control-panel 240px] [sidebar-toggle 16px] [chart-section flex:1] [events-toggle 24px] [events-panel 260px] Fixed height = viewport minus header avoids a page-level scrollbar so the chart can fill the remaining vertical space entirely. The 1400px max-width centres content on very wide monitors. ------------------------------------------------ */ .app-main { display: flex; height: calc(100vh - 73px); /* Full height minus header — 73px is the measured header height */ max-width: 1400px; margin: 0 auto; gap: 0; } /* ------------------------------------------------ CONTROL PANEL Left sidebar containing all user inputs (currency selectors, date range, granularity, normalization, generate/reset buttons, sanity check). The sidebar-collapse mechanism works by animating width + min-width to 0 with CSS transition (0.25s). Setting overflow:hidden prevents content from bleeding outside the zero-width box during the animation. JavaScript adds/removes the "collapsed" class via toggleSidebar() in main.js. ------------------------------------------------ */ .control-panel { width: 240px; min-width: 240px; background-color: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--spacing-md); overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-md); transition: width 0.25s ease, min-width 0.25s ease, padding 0.25s ease; } /* Collapsed state — all three animated properties must reach 0 simultaneously so content disappears cleanly without clipping artefacts. */ .control-panel.collapsed { width: 0; min-width: 0; padding: 0; overflow: hidden; border-right: none; } /* ------------------------------------------------ SIDEBAR TOGGLE STRIP A 16px-wide