best shot

website-7sys/css/accessibility.css

@@ -1,4 +1,22 @@
-/* Accessibility */
+/* 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;
@@ -7,5 +25,217 @@
     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);
+}