/* Skip Link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--accent-color); color: white; padding: var(--space-sm) var(--space-md); z-index: var(--z-maximum); transition: top var(--transition-base); } .skip-link:focus { top: 0; outline: 2px solid var(--accent-color); outline-offset: 2px; } /* 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: 0; } /* Focus Styles */ :focus { outline: 2px solid var(--accent-color); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } /* Interactive Elements */ button, a, input, textarea, select { cursor: pointer; } button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: 0.7; } /* Form Validation */ input:invalid, textarea:invalid { border-color: var(--error-red); } .input-wrapper { position: relative; } .error-message { color: var(--error-red); font-size: var(--font-size-sm); margin-top: var(--space-xs); } /* High Contrast Mode */ @media (forced-colors: active) { :root { --accent-color: CanvasText; --text-color: CanvasText; --bg-primary: Canvas; } .service-card, .vision-item { border: 1px solid CanvasText; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-in, .fade-in-scroll, .service-card:hover, .shooting-star { animation: none !important; transform: none !important; } } /* Color Contrast */ .light-theme { --text-color: #333333; /* WCAG AAA compliant */ } .dark-theme { --text-color: #F2F2F2; /* WCAG AAA compliant */ } /* Form Labels */ label { display: block; margin-bottom: var(--space-xs); font-weight: 500; } /* ARIA States */ [aria-invalid="true"] { border-color: var(--error-red); } [aria-busy="true"] { cursor: progress; } [aria-disabled="true"] { cursor: not-allowed; opacity: 0.7; } /* Keyboard Navigation */ a:focus, button:focus, input:focus, textarea:focus, select:focus, [tabindex="0"]:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(21, 52, 209, 0.2); } /* Form Feedback */ .form-feedback { padding: var(--space-sm); border-radius: var(--border-radius-sm); margin-top: var(--space-md); } .form-feedback.success { background-color: rgba(76, 175, 80, 0.1); color: var(--success-green); } .form-feedback.error { background-color: rgba(244, 67, 54, 0.1); color: var(--error-red); } /* Loading States */ .loading { position: relative; } .loading::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } /* Input Icons */ .input-wrapper i { position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%); color: var(--text-color); opacity: 0.7; } .input-wrapper input, .input-wrapper textarea { padding-left: calc(var(--space-lg) + var(--space-sm)); } /* Cookie Consent */ .cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-primary); padding: var(--space-lg); box-shadow: var(--shadow-lg); display: none; justify-content: center; align-items: center; gap: var(--space-md); z-index: var(--z-modal); } .cookie-buttons { display: flex; gap: var(--space-sm); } .cookie-button { padding: var(--space-sm) var(--space-md); border-radius: var(--border-radius-sm); border: none; font-weight: 500; transition: var(--transition-base); } .cookie-button.accept { background: var(--accent-color); color: white; } .cookie-button.reject { background: transparent; border: 1px solid var(--border-color); color: var(--text-color); }