/** * Scouting HRM - Base Styles * * Global design tokens, typography, and utilities * Loaded on all public pages */ /* ========================================================================== CSS Variables - Scouting Nederland Brand Colors & Design Tokens ========================================================================== */ :root { /* Primary brand colors */ --scouting-orange: #F58220; --scouting-orange-light: #FF9D4D; --scouting-orange-dark: #D96D0C; --scouting-green: #00A859; --scouting-green-light: #33B97A; --scouting-green-dark: #008545; /* Supporting colors */ --scouting-blue: #009FE3; --scouting-blue-light: #33B2E9; --scouting-blue-dark: #007CB5; --scouting-purple: #93328E; --scouting-purple-light: #A95BA5; --scouting-purple-dark: #752871; --scouting-red: #E30613; --scouting-red-light: #E93842; --scouting-red-dark: #B5050F; --scouting-yellow: #FFD700; /* Aliases for templates (matching Laravel theme.ts) */ --color-orange: #F58220; --color-green: #00A859; --color-blue: #009FE3; --color-purple: #93328E; --color-red: #E30613; /* Neutral colors */ --grey-50: #FAFAFA; --grey-100: #F5F5F5; --grey-200: #EEEEEE; --grey-300: #E0E0E0; --grey-400: #BDBDBD; --grey-500: #9E9E9E; --grey-600: #757575; --grey-700: #616161; --grey-800: #424242; --grey-900: #212121; /* Text colors */ --text-primary: #212121; --text-secondary: #666666; --text-muted: #9E9E9E; /* Background colors */ --bg-white: #FFFFFF; --bg-light: #F5F5F5; --bg-dark: #212121; /* Typography */ --font-family: 'Nunito Sans', 'Open Sans', 'Helvetica Neue', Arial, sans-serif; --font-family-display: 'Bangers', 'Impact', sans-serif; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 50px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* Z-indexes */ --z-dropdown: 100; --z-header: 1000; --z-modal: 2000; /* Input system */ --input-height: 2.75rem; --input-padding-vertical: 0.625rem; --input-padding-horizontal: 1rem; --input-icon-spacing: 0.5rem; --input-border: 1px; --input-border-color: var(--grey-300); --input-border-radius: var(--radius-pill); --button-height: var(--input-height); --button-padding: var(--spacing-sm) var(--spacing-lg); --button-border: 2px; } /* ========================================================================== Global page-level overrides These must stay outside .shrm-page-content because they target / which sit above the plugin wrapper. ========================================================================== */ /* WordPress injects `html { margin-top: 32px }` for the admin bar even when the bar is not visible. Our plugin hides the admin bar on all frontend pages, so we remove the offset here to prevent a gap above the header. */ html { margin-top: 0 !important; } /* ========================================================================== Scoped Plugin Reset & Typography ALL generic element rules are scoped under .shrm-page-content so they never leak into Elementor headers, footers, or any third-party content that sits outside the plugin wrapper. ========================================================================== */ .shrm-page-content *, .shrm-page-content *::before, .shrm-page-content *::after { box-sizing: border-box; } .shrm-page-content { font-family: var(--font-family); font-size: 1rem; line-height: 1.6; color: var(--text-primary); } /* ========================================================================== Typography ========================================================================== */ .shrm-page-content h1, .shrm-page-content h2, .shrm-page-content h3, .shrm-page-content h4, .shrm-page-content h5, .shrm-page-content h6 { margin: 0; font-weight: 700; line-height: 1.2; } .shrm-page-content h1 { font-size: 2.25rem; } .shrm-page-content h2 { font-size: 1.875rem; } .shrm-page-content h3 { font-size: 1.5rem; } .shrm-page-content h4 { font-size: 1.25rem; } .shrm-page-content h5 { font-size: 1.125rem; } .shrm-page-content h6 { font-size: 1rem; } .shrm-page-content p { margin: 0 0 1rem; } .shrm-page-content a { color: var(--scouting-blue); text-decoration: none; transition: color var(--transition-fast); } .shrm-page-content a:hover { color: var(--scouting-blue-dark); } /* ========================================================================== Utility Classes ========================================================================== */ .shrm-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .shrm-text-center { text-align: center; } .shrm-text-left { text-align: left; } .shrm-text-right { text-align: right; } .shrm-mt-sm { margin-top: var(--spacing-sm); } .shrm-mt-md { margin-top: var(--spacing-md); } .shrm-mt-lg { margin-top: var(--spacing-lg); } .shrm-mt-xl { margin-top: var(--spacing-xl); } .shrm-mb-sm { margin-bottom: var(--spacing-sm); } .shrm-mb-md { margin-bottom: var(--spacing-md); } .shrm-mb-lg { margin-bottom: var(--spacing-lg); } .shrm-mb-xl { margin-bottom: var(--spacing-xl); } .shrm-p-sm { padding: var(--spacing-sm); } .shrm-p-md { padding: var(--spacing-md); } .shrm-p-lg { padding: var(--spacing-lg); } .shrm-p-xl { padding: var(--spacing-xl); } /* Prose / Rich text styling */ .shrm-prose { line-height: 1.7; color: var(--text-primary); } .shrm-prose p { margin: 0 0 0.75rem; } .shrm-prose ul, .shrm-prose ol { padding-left: 1.5rem; margin: 0 0 0.75rem; } .shrm-prose li { margin-bottom: 0.25rem; } /* Helper classes */ .shrm-hidden { display: none !important; } .shrm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .shrm-flex { display: flex; align-items: center; } .shrm-grid { display: grid; }