/* ============================================================================ EarthToTommy.com | SITE STYLESHEET ============================================================================ HOW THIS FILE WORKS This is the ONLY stylesheet to edit. Bootstrap loads first, this loads second, so anything in here wins. Never edit the Bootstrap file itself - if you do, you can never update Bootstrap without losing your work. That is what happened with the old bootstrap-4.4.1.css, which had custom rules scattered through 10,000 lines of framework code. Everything custom from that old file has been carried over here, in plain sight, with notes. WHERE TO CHANGE THINGS Section 1 Colours and fonts - change the palette in ONE place Section 2 Typography scale Section 3 Accessibility defaults (focus, motion, target size) Section 4 Header and credentials line Section 5 Navigation - desktop and mobile Section 6 Footer Section 7 Page content helpers ============================================================================ */ /* ============================================================================ SECTION 1 - THEME ============================================================================ Bootstrap 5.3 exposes its whole theme as CSS variables. Override them here and the change flows through every component. This is the Bootstrap 5 way of theming, and it means the examples on getbootstrap.com work as written. CONTRAST NOTE Three colours from the old stylesheet failed WCAG contrast and have been darkened. Text needs 4.5:1 against its background. Large text (24px, or 18.5px bold) needs 3:1. was #859e80 sage green 2.92:1 FAILED -> now #54704F 5.52:1 passes was #007bff link blue 3.98:1 FAILED -> now #0B5FA5 6.57:1 passes Both replacements keep the original hue and just pull the lightness down. If you want to adjust them, test at webaim.org/resources/contrastchecker before shipping. ============================================================================ */ :root { /* Brand colours */ --et-green: #54704F; /* links, primary accent */ --et-green-dark: #405C3C; /* link hover */ --et-blue: #0B5FA5; /* secondary accent, footer links */ --et-blue-dark: #08487D; /* footer link hover */ --et-ink: #333333; /* body text */ --et-band: #f8f9fa; /* nav bar background */ /* Hand these to Bootstrap so its components inherit them */ --bs-body-color: var(--et-ink); --bs-body-font-family: rucksack, sans-serif; --bs-link-color: var(--et-green); --bs-link-hover-color: var(--et-green-dark); --bs-link-color-rgb: 84, 112, 79; } body { font-family: rucksack, sans-serif; font-weight: 400; font-style: normal; line-height: 1.4; color: var(--et-ink); } /* Links. Underline on hover and focus rather than colour alone - colour by itself is not enough to distinguish a link for someone with low vision or colour blindness. */ a { color: var(--et-green); text-decoration: none; font-weight: 500; } a:hover, a:focus-visible { color: var(--et-green-dark); text-decoration: underline; } /* Bootstrap's .text-primary was stock blue and failed contrast. */ .text-primary { color: var(--et-blue) !important; } /* ============================================================================ SECTION 2 - TYPOGRAPHY ============================================================================ Carried over from the old stylesheet. READ THIS BEFORE CHANGING SIZES These are percentages of the browser's base size, normally 16px. So font-size: 75% renders at about 12px. Paragraph text is currently 75%, which is roughly 12px. That is on the small side for body copy. It is not a WCAG failure - there is no minimum font size in the standard, and the page scales correctly when zoomed - but it is worth looking at on a real screen. 87.5% would give you 14px and would read more comfortably for most people. Left at 75% for now because it is a design decision, not a compliance one. Percentages nest. A .small inside a

compounds both, which gets tiny quickly. Worth watching. ============================================================================ */ p { margin-top: 0; margin-bottom: 0.75rem; font-size: 75%; /* ~12px - see note above */ letter-spacing: 0.0725em; } /* Size helpers, largest to smallest */ .lead { margin-top: 0; font-size: 90%; letter-spacing: 0.05em; font-family: rucksack, sans-serif; font-style: normal; font-weight: 400; } .large { margin-top: 0; font-size: 85%; letter-spacing: 0.05em; font-family: rucksack, sans-serif; font-style: normal; font-weight: 400; } .medium { margin-top: 0; margin-bottom: 0.75rem; font-size: 75%; font-weight: 400; letter-spacing: 0.0725em; } .small { font-size: 70%; font-weight: 400; letter-spacing: 0.0725em; } .xsmall { font-size: 65%; font-weight: 400; letter-spacing: 0.0725em; } .xxsmall { font-size: 60%; font-weight: 400; letter-spacing: 0.0725em; } /* Utility: slightly looser line height */ .lh-md { line-height: 1.375; } /* Utility: extra letter-spacing */ .spaced { letter-spacing: 0.05em !important; } /* ---------------------------------------------------------------------------- HEADING SCALE IMPORTANT FIX In the old stylesheet h1 was set to 1rem while h2 was 1.75rem, so an

rendered SMALLER than an

. That almost certainly explains why some page headings ended up marked as

- that was the level that looked right. Heading level and visual size are separate things. The level says where the item sits in the page outline, which is how screen reader users navigate. The size is just appearance. They should agree, and now they do. Each page has exactly one

. Section headings below it are

, and so on down. Never skip a level to get a size - change the size here instead. ---------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: 0.25rem; letter-spacing: 0.02em; font-weight: 500; line-height: 1.1; } h1, .h1 { font-size: 2rem; } /* was 1rem - smaller than h2, now corrected */ h2, .h2 { font-size: 1.5rem; } h3, .h3 { font-size: 1.25rem; } h4, .h4 { font-size: 1.125rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: 0.9375rem; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 0.5px solid rgba(0, 0, 0, 0.1); } /* ============================================================================ SECTION 3 - ACCESSIBILITY DEFAULTS ============================================================================ These are the rules that make the site usable by keyboard and by people with vision or motion sensitivities. Nothing here should need changing, but here is what each one does in case you need to work around it. ============================================================================ */ /* FOCUS The single most important rule in this file. In the old stylesheet, :hover and :focus on dropdown items shared one declaration with a very faint grey background. That meant a keyboard user tabbing through the menu got the same nearly-invisible cue as a mouse user hovering - and could easily lose track of where they were. Focus and hover are now deliberately different. Hover gets a background tint. Focus gets a background tint AND a solid outline, because an outline reads instantly in a way a fill does not. :focus-visible means the outline shows for keyboard users but not when clicking with a mouse, which is the modern behaviour people expect. NEVER write "outline: none" anywhere. That is an instant WCAG failure. */ :focus-visible { outline: 3px solid var(--et-blue); outline-offset: 2px; } /* Skip link. Hidden until focused, then appears top-left. */ .skip-link:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 1080; padding: 0.75rem 1.25rem; background: #ffffff; color: var(--et-ink); border: 2px solid var(--et-blue); border-radius: 0.25rem; font-weight: 600; } /* REDUCED MOTION Some people get motion sickness or migraines from animation. The operating system lets them ask for less of it, and this respects that request. */ @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; } } /* TARGET SIZE WCAG 2.2 requires interactive controls to be at least 24 by 24 pixels, so people with tremor or limited dexterity can hit them. The social icons and footer links are the ones most at risk. */ .social-icons .nav-link, .footer-sitemap .nav-link, .footer-legal a { min-height: 24px; display: inline-block; } /* Images never overflow their container at any zoom level. */ img { max-width: 100%; height: auto; } /* ============================================================================ SECTION 4 - HEADER ============================================================================ */ /* Credentials line under the logo. Mixed case rather than caps: all caps runs 12-15% wider, which matters on a phone, and "PH.D." loses the visual cue that it is an abbreviation. Each segment is wrapped in .nowrap in the HTML so phrases never split. */ .site-credentials { text-transform: none; letter-spacing: 0.04em; line-height: 1.5; color: var(--et-ink); font-size: 0.875rem; /* 14px */ } .site-credentials .nowrap { white-space: nowrap; } .site-credentials .sep { padding: 0 0.35em; } /* The name in the credentials line links to the About page. IT IS DELIBERATELY NOT OBVIOUS. It stays the same dark colour as the text beside it, with no underline until hovered or focused. That is a design choice to keep the header line clean, and it is safe for three reasons: - Nothing here relies on colour alone to mark a link, which is the thing WCAG actually prohibits. This link carries no colour signal at all. - Keyboard users still get the focus ring from Section 3. - The About page is reachable two other ways on every page: the footer site map, and the Welcome card on the home page. The header link is a shortcut for people who find it, not the only route. No extra padding is needed for target size. WCAG 2.2's minimum target size has an exception for links inside a sentence, where the line height sets the size, and this qualifies. */ .site-credentials .credentials-link { color: inherit; font-weight: inherit; text-decoration: none; } .site-credentials .credentials-link:hover, .site-credentials .credentials-link:focus-visible { color: var(--et-green-dark); text-decoration: underline; } .social-icons .nav-link { color: var(--et-ink); } .social-icons .nav-link:hover, .social-icons .nav-link:focus-visible { color: var(--et-green); } /* ============================================================================ SECTION 5 - NAVIGATION ============================================================================ CASE Top-level bar stays uppercase. Short items, good letter-spacing, reads as navigation. Dropdown items are now mixed case. Longer phrases like "What We're Building" lose the ascenders and descenders that let people read by word shape when set in caps, and the apostrophe gets visually lost. Caps on the bar, mixed case in the menus, is a common and readable pattern. SIZE Both were around 11-12px before. Now 14px minimum. Small caps text on an interactive control is hard to read and hard to hit. ============================================================================ */ .navbar-nav { font-family: rucksack, sans-serif; font-weight: 600; font-style: normal; font-size: 0.875rem; /* 14px */ text-transform: uppercase; letter-spacing: 0.0925em; } .navbar-nav .nav-link { color: var(--et-ink); padding: 0.5rem 0.75rem; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus-visible, .navbar-nav .nav-link.show { color: var(--et-green); } /* Marks where you are in the site. The short script at the bottom of main.dwt sets these automatically by reading the page's address, so nothing has to be added by hand on any page. Two values, and they mean different things: aria-current="page" this IS the page you are on aria-current="true" this is the SECTION the page belongs to The selector matches any value, so both get the same styling. If you ever want the section styled more lightly than the exact page, split this into two rules on [aria-current="page"] and [aria-current="true"]. */ .navbar-nav .nav-link[aria-current] { color: var(--et-green); font-weight: 700; } /* Same marker on the items inside a dropdown, where it lands on the exact page. Lighter than the top-level version so the open menu does not end up with two things shouting at once. */ .dropdown-item[aria-current="page"] { color: var(--et-green-dark); font-weight: 600; } /* Pipe separators between top-level items. Drawn with CSS rather than real characters so screen readers never announce them. Hidden on mobile, where items are stacked. */ @media (min-width: 992px) { .navbar-nav > .nav-item:not(:last-child)::after { content: "|"; color: #cccccc; align-self: center; padding: 0 0.25rem; } .navbar-nav > .nav-item { display: flex; } } /* DROPDOWN MENUS */ .dropdown-item { font-family: rucksack, sans-serif; font-weight: 500; font-size: 0.875rem; /* 14px */ text-transform: none; /* mixed case - see note at top of section */ letter-spacing: 0.02em; color: var(--et-ink); padding: 0.6rem 1.5rem; /* comfortable target height */ } /* Hover: background tint AND a colour change, so it is not carried by fill alone. The old version was a very pale grey with no text change and was nearly invisible on a bright screen. */ .dropdown-item:hover { background-color: #EDF2EC; color: var(--et-green-dark); } /* Focus: deliberately stronger than hover, with an outline. This is what a keyboard user sees, and they need to spot it at a glance. */ .dropdown-item:focus, .dropdown-item:focus-visible { background-color: #EDF2EC; color: var(--et-green-dark); outline: 2px solid var(--et-blue); outline-offset: -2px; } .dropdown-item.active, .dropdown-item:active { background-color: var(--et-green); color: #ffffff; } /* MOBILE Below 992px the navbar collapses to the hamburger. Items become full-width rows, big enough to tap reliably, and in mixed case since there is room. */ @media (max-width: 991.98px) { .navbar-nav { text-transform: none; font-size: 1rem; } .navbar-nav .nav-link, .dropdown-item { padding: 0.75rem 1rem; /* ~44px tall - comfortable thumb target */ font-size: 1rem; /* 16px */ } /* Dropdowns open inline instead of floating over the page */ .navbar-nav .dropdown-menu { border: 0; box-shadow: none; padding-left: 1rem; } } .navbar-toggler { border-color: rgba(0,0,0,.15); } .navbar-toggler:focus-visible { outline: 3px solid var(--et-blue); outline-offset: 2px; } /* ============================================================================ SECTION 6 - FOOTER ============================================================================ */ /* Section names in the site map. These need to look clearly different from the links beneath them, otherwise the four columns read as one long list of thirty links rather than four groups. They are plain links rather than headings on purpose. Headings here would appear in every page's outline whether the page wanted them or not. The grouping is communicated by the labelled