diff --git a/assets/css/main.css b/assets/css/main.css
index 2dab484..9ea2140 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -19,7 +19,9 @@
--heading: var(--slate);
--accent: var(--slate);
--accent-fg: #ffffff;
- --cta: var(--teal);
+ /* Darkened from --teal: #009688 white-on-teal was 3.67:1, fails WCAG AA
+ (needs 4.5:1) for button-label-sized text. This hits 4.90:1. */
+ --cta: #007f73;
--cta-fg: #ffffff;
--radius: 0.5rem;
@@ -65,6 +67,20 @@ body {
a { color: var(--accent); }
+.skip-link {
+ position: absolute;
+ left: -9999px;
+ top: 0;
+ z-index: 100;
+ background: var(--cta);
+ color: var(--cta-fg);
+ padding: 0.75rem 1.25rem;
+ border-radius: 0 0 var(--radius) 0;
+}
+.skip-link:focus {
+ left: 0;
+}
+
h1, h2, h3 {
font-family: var(--font-heading);
color: var(--heading);
@@ -107,7 +123,22 @@ header.site nav a {
text-decoration: none;
font-size: 0.95rem;
}
-header.site nav a:hover { opacity: 1; color: var(--rose); }
+/* Rose as text color here would be ~2.5:1 against the blue header — too
+ low-contrast to read. Keep the text legible, use rose as an underline
+ instead so the "gentle" accent doesn't cost readability. */
+header.site nav a:hover {
+ opacity: 1;
+ text-decoration: underline;
+ text-decoration-color: var(--rose);
+ text-decoration-thickness: 2px;
+ text-underline-offset: 3px;
+}
+/* The default --cta focus ring is only ~1:1 against this header's own
+ background — swap in the header's own text color, already proven at
+ 4.82:1 against slate blue. */
+header.site a:focus-visible {
+ outline-color: var(--bg);
+}
main {
flex: 1;
@@ -143,7 +174,14 @@ footer.site nav a {
color: var(--slate);
text-decoration: none;
}
-footer.site nav a:hover { color: var(--rose); }
+/* Same reasoning as the header nav: rose text on this background is
+ ~1.8:1, nearly invisible. Underline instead of recoloring. */
+footer.site nav a:hover {
+ text-decoration: underline;
+ text-decoration-color: var(--rose);
+ text-decoration-thickness: 2px;
+ text-underline-offset: 3px;
+}
.btn {
display: inline-block;
@@ -159,6 +197,13 @@ footer.site nav a:hover { color: var(--rose); }
}
.btn:hover { opacity: 0.9; }
+/* Explicit, high-contrast focus ring everywhere — the default browser
+ outline can get lost against the colored header/footer bands. */
+a:focus-visible, button:focus-visible {
+ outline: 2px solid var(--cta);
+ outline-offset: 2px;
+}
+
label {
display: block;
font-weight: 600;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6766028..cf80d68 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -17,10 +17,12 @@
{{ end }}
+ Skip to content
+
-
+
{{ block "main" . }}{{ end }}