diff --git a/css/styles.css b/css/styles.css index 494e137..cda9d76 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3261,6 +3261,114 @@ button, input, select, textarea { } } +/* -------------------------------------------------------------------------- + Accessibility (WCAG 2.1 AA) & Compliance Design System + -------------------------------------------------------------------------- */ +.skip-link { + position: absolute; + top: -120px; + left: 20px; + background: var(--gold-400); + color: var(--primary-950); + padding: 12px 22px; + font-weight: 700; + font-size: 0.95rem; + border-radius: 0 0 8px 8px; + z-index: 99999; + text-decoration: none; + transition: top 0.25s ease; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); +} + +.skip-link:focus { + top: 0; + outline: 3px solid #fff; + outline-offset: 2px; +} + +.compliance-section { + margin-top: 32px; + background: rgba(15, 23, 42, 0.7); + border: 1.5px solid rgba(212, 175, 55, 0.3); + border-radius: 12px; + padding: 24px; + backdrop-filter: blur(10px); +} + +.compliance-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 18px; + margin-top: 14px; +} + +.compliance-item { + background: rgba(30, 41, 59, 0.6); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px; + padding: 18px; + transition: transform 0.2s ease, border-color 0.2s ease; +} + +.compliance-item:hover { + transform: translateY(-2px); + border-color: rgba(212, 175, 55, 0.4); +} + +.compliance-item h4 { + font-size: 0.96rem; + font-weight: 700; + color: var(--gold-300); + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; +} + +.compliance-item h4 svg { + color: var(--gold-400); + flex-shrink: 0; +} + +.compliance-item p { + font-size: 0.83rem; + color: var(--slate-300); + line-height: 1.55; + margin: 0; +} + +.form-privacy-note { + font-size: 0.82rem; + color: var(--slate-500); + margin-top: 12px; + text-align: center; + line-height: 1.45; +} + +.footer-legal-bar { + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 12px; + font-size: 0.8rem; + color: var(--slate-400); +} + +.footer-legal-bar a { + color: var(--gold-400); + text-decoration: underline; + transition: color 0.2s ease; +} + +.footer-legal-bar a:hover { + color: #fff; +} + + diff --git a/index.html b/index.html index 72c3dae..b1e3b16 100644 --- a/index.html +++ b/index.html @@ -157,6 +157,9 @@ + + +
@@ -1060,6 +1063,55 @@ Connect with Us + + + @@ -1171,6 +1223,9 @@ +

+ 🔒 Privacy Protected: Your details are encrypted and strictly confidential. Used solely for pastoral correspondence. We never share or sell personal information. +

@@ -1226,12 +1281,12 @@ -