/** * CSS Variables for HUMMAN RESEARCH Website * Based on design guide (04_layout/01_design_guide.md) * * Design Priority: * 1. Name-card.png (Business Card Design) - Colors, Logo, Brand Identity * 2. activetheory.net Layout - Layout Structure, Interactions, Motion Effects */ :root { /* ============================================ COLOR SYSTEM ============================================ */ /* Primary Colors (Business Card Based) */ --color-primary-blue: #1E3A8A; /* Royal/Cobalt Blue */ --color-primary-blue-rgb: 30, 58, 138; /* RGB values for rgba() */ --color-metallic-silver: #C0C0C0; /* Metallic Silver */ --color-metallic-silver-rgb: 192, 192, 192; /* RGB values for rgba() */ /* Neutral Colors */ --color-white: #FFFFFF; --color-white-rgb: 255, 255, 255; --color-black: #000000; --color-black-rgb: 0, 0, 0; /* Color Variations */ --color-primary-blue-light: rgba(30, 58, 138, 0.1); --color-primary-blue-dark: #152A5C; --color-metallic-silver-light: #E8E8E8; --color-metallic-silver-dark: #A0A0A0; --color-gray-light: #F5F5F5; --color-gray-medium: #CCCCCC; --color-gray-dark: #999999; /* Lighter for dark background readability */ /* Background Colors */ --bg-primary: #0A0E1A; /* Dark blue-black (Figma style) */ --bg-secondary: var(--color-primary-blue); --bg-overlay: rgba(0, 0, 0, 0.7); /* Text Colors */ --text-primary: var(--color-white); /* Changed to white for dark background */ --text-secondary: var(--color-white); --text-accent: var(--color-metallic-silver); --text-muted: var(--color-gray-dark); /* ============================================ TYPOGRAPHY ============================================ */ /* Font Families */ --font-family-primary: 'Inter', 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'Courier New', Courier, monospace; /* Font Sizes */ --font-size-h1: clamp(2.5rem, 5vw, 4rem); /* 40px - 64px */ --font-size-h2: clamp(2rem, 4vw, 2.5rem); /* 32px - 40px */ --font-size-h3: clamp(1.5rem, 3vw, 1.75rem); /* 24px - 28px */ --font-size-body: clamp(1rem, 2vw, 1.125rem); /* 16px - 18px */ --font-size-small: 0.875rem; /* 14px */ --font-size-caption: 0.75rem; /* 12px */ /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Letter Spacing */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em; /* For uppercase text like "HUMAN RESEARCH" */ /* ============================================ SPACING SYSTEM ============================================ */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ --spacing-4xl: 6rem; /* 96px */ /* ============================================ BORDER & RADIUS ============================================ */ --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius-xl: 16px; --border-radius-full: 9999px; --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 4px; /* ============================================ SHADOWS ============================================ */ --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-xl: 0 20px 25px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); /* Metallic Effect Shadows */ --shadow-metallic: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-emboss: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3); --shadow-deboss: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(255, 255, 255, 0.3); /* ============================================ METALLIC EFFECTS (Business Card Based) ============================================ */ /* Metallic Gradient */ --gradient-metallic: linear-gradient( 135deg, #E8E8E8 0%, #C0C0C0 50%, #A0A0A0 100% ); /* Metallic Text Shadow */ --text-shadow-metallic: 0 2px 4px rgba(0, 0, 0, 0.3); /* Hero Section Gradient (activetheory.net style with business card colors) */ --gradient-hero: linear-gradient( 135deg, var(--color-primary-blue) 0%, var(--color-primary-blue-dark) 50%, var(--color-primary-blue) 100% ); /* Gradient Lighting Effect */ --gradient-lighting: radial-gradient( circle at 30% 20%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100% ); /* ============================================ TRANSITIONS & ANIMATIONS ============================================ */ --transition-fast: 150ms ease-in-out; --transition-base: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; --transition-slower: 800ms ease-in-out; /* Animation Durations */ --animation-duration-fast: 0.2s; --animation-duration-base: 0.3s; --animation-duration-slow: 0.5s; --animation-duration-slower: 0.8s; /* ============================================ BREAKPOINTS (for use in media queries) ============================================ */ --breakpoint-mobile: 320px; --breakpoint-mobile-max: 767px; --breakpoint-tablet: 768px; --breakpoint-tablet-max: 1023px; --breakpoint-desktop: 1024px; --breakpoint-desktop-lg: 1280px; --breakpoint-desktop-xl: 1920px; /* ============================================ Z-INDEX LAYERS ============================================ */ --z-index-base: 1; --z-index-dropdown: 100; --z-index-sticky: 200; --z-index-fixed: 300; --z-index-modal-backdrop: 400; --z-index-modal: 500; --z-index-popover: 600; --z-index-tooltip: 700; --z-index-menu-overlay: 800; /* For activetheory.net style sliding menu */ /* ============================================ LAYOUT ============================================ */ --container-max-width: 1280px; --container-padding-mobile: var(--spacing-md); --container-padding-tablet: var(--spacing-lg); --container-padding-desktop: var(--spacing-xl); /* Section Spacing */ --section-padding-mobile: var(--spacing-2xl); --section-padding-tablet: var(--spacing-3xl); --section-padding-desktop: var(--spacing-4xl); /* ============================================ COMPONENT SPECIFIC VARIABLES ============================================ */ /* Navigation (activetheory.net style) */ --nav-hamburger-size: 24px; --nav-overlay-bg: rgba(0, 0, 0, 0.95); --nav-overlay-transition: var(--transition-slow); /* Buttons (Business Card Based) */ --button-padding-y: var(--spacing-md); --button-padding-x: var(--spacing-xl); --button-border-radius: var(--border-radius-md); --button-transition: var(--transition-base); /* Cards/Sections */ --card-border-radius: var(--border-radius-lg); --card-padding: var(--spacing-xl); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg); /* Hero Section (activetheory.net + Business Card) */ --hero-min-height-mobile: 60vh; --hero-min-height-tablet: 70vh; --hero-min-height-desktop: 80vh; } /* ============================================ DARK MODE SUPPORT (Optional, for future use) ============================================ */ @media (prefers-color-scheme: dark) { :root { /* Dark mode variables can be added here if needed */ /* Currently following business card design which uses light theme */ } }