/* ============================================ FONT LOADING - Source Sans Pro (same as talgildu.fo) Loaded from Google Fonts in HTML ============================================ */ /* ============================================ CSS VARIABLES & THEME CONFIGURATION Faroese Nature + Nordic Tech Theme ============================================ */ :root { /* Color System - Northern Lights (Norður Ljós) */ /* All text colors meet WCAG 2.1 AA+ contrast requirements (4.5:1 minimum) */ --color-primary: #233A75; /* Deep Navy Blue - Pantone 294 C */ --color-secondary: #1a2d5a; /* Darker navy variation */ --color-accent: #5AB6A0; /* Teal/Turquoise - Pantone 3268 C - main accent */ --color-accent-alt: #1de9b6; /* Light Teal - secondary accent */ --color-background: #0d1629; /* Deep Night Background */ --color-surface: #1a2d5a; /* Night Surface */ --color-text: #ffffff; /* White text - 21:1 contrast on dark background (WCAG AAA) */ --color-text-secondary: rgba(255, 255, 255, 0.95); /* High contrast for accessibility - ~20:1 ratio */ --color-border: rgba(90, 182, 160, 0.3); /* Teal border */ /* Gradients */ --gradient-tech-art: linear-gradient(315deg, #5AB6A0 0%, #1de9b6 50%, #233A75 100%); /* Typography - Source Sans Pro (same as talgildu.fo) */ /* Optimized fallback stack to minimize font flash */ --font-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-heading: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Font Sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Spacing Scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* Z-index Scale */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1040; --z-popover: 1050; --z-tooltip: 1060; } /* ============================================ BASE ELEMENT STYLES ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; max-width: 100vw; width: 100%; } body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-background); line-height: 1.7; min-height: 100vh; overflow-x: clip; max-width: 100vw; width: 100%; position: relative; padding-top: 104px; font-size: 1rem; /* Ensure base font size is readable */ } /* Ensure main content doesn't overflow */ .main { overflow-x: clip; max-width: 100vw; width: 100%; } .container { max-width: var(--max-width); width: 100%; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } p { margin-bottom: var(--space-md); } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } button { cursor: pointer; border: none; background: none; } /* Accessibility */ .skip-to-content { position: absolute; top: -100px; left: 0; background: var(--color-accent); color: white; padding: var(--space-sm) var(--space-md); text-decoration: none; z-index: var(--z-tooltip); font-weight: 600; border-radius: 0 0 var(--radius-md) 0; box-shadow: var(--shadow-lg); } .skip-to-content:focus { top: 0; outline: 3px solid var(--color-accent); outline-offset: 2px; } /* Container Utility */ .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--space-md); } @media (min-width: 768px) { .container { padding-inline: var(--space-xl); } } @media (max-width: 480px) { body { padding-top: 80px; } } /* Screen Reader Only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================ BUTTON UTILITIES ============================================ */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); border: none; border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-base); cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; font-family: var(--font-sans); white-space: nowrap; position: relative; overflow: hidden; } /* Removed button ripple glow effect */ .button span { position: relative; z-index: 1; } .button--primary { background: var(--color-accent); color: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-weight: 700; } .button--primary:hover { background: #6BC9B3; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: translateY(-3px) scale(1.02); } .button--secondary { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.95); border: 2px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .button--secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-3px) scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .button--outline { background: transparent; color: var(--color-text); border: 2px solid var(--color-border); } .button--outline:hover { border-color: var(--color-primary); color: var(--color-primary); } .button--large { padding: var(--space-lg) var(--space-2xl); font-size: var(--text-lg); } .button--small { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); } .button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }