/* ============================================================================ Brad Fitch — portfolio Vanilla CSS. Mobile-first. Theming is one attribute swap on . ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { /* Surfaces */ --bg: #BFDCEC; /* landing background, light */ --bg-dim: #D4E7F2; /* case-study route background, light */ --surface: #E8EFF4; /* case-study panel / modal panel */ --surface-solid: #FFFFFF; /* toggle track, small chrome */ /* Ink */ --ink: #0F2417; /* 11.4:1 on --bg */ --ink-muted: #3E5A48; /* 6.0:1 on --bg-dim — used for de-emphasised chrome */ /* Blocks */ --block-case: #0F2417; --block-case-ink: #EAF2EC; /* 16.3:1 */ --block-products: #3BA5D0; --block-products-ink: #0F2417; /* 5.82:1 — white here would be 2.81:1 */ /* Dialog panel — its own token so it does not follow the Case Studies block into lime when the theme flips. */ --panel: #0F2417; --panel-ink: #EAF2EC; /* Accent */ --accent: #F5D547; --accent-ink: #0F2417; /* 11.3:1 */ /* Geometry */ --radius-block: 22px; --radius-panel: 20px; --radius-pill: 999px; --gap: clamp(0.75rem, 2.2vw, 1.25rem); --pad-page: clamp(1rem, 4vw, 2.75rem); --measure: 68ch; /* ~65–75 characters */ /* Motion — total landing entrance stays under 300ms */ --dur-fast: 120ms; --dur: 180ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } [data-theme="dark"] { --bg: #0F2417; --bg-dim: #0A1A10; --surface: #16321F; --surface-solid: #EAF2EC; --ink: #EAF2EC; /* 16.3:1 on --bg, 12.2:1 on --surface */ --ink-muted: #9CB4A4; /* 7.4:1 on --bg-dim */ --block-case: #A3B93C; --block-case-ink: #0F2417; /* 7.44:1 — white here would be 2.20:1 */ --block-products: #3BA5D0; --block-products-ink: #0F2417; --panel: #16321F; /* lifted off the page, 12.2:1 with --panel-ink */ --panel-ink: #EAF2EC; } /* -------------------------------------------------------------- baseline -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--pad-page); gap: clamp(1.25rem, 3vw, 2rem); font-family: Arial, Helvetica, sans-serif; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.55; color: var(--ink); background: var(--bg); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* The case-study route dims the page behind the panel, as in the mockup. */ body.is-case { background: var(--bg-dim); } h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; } p { margin: 0; } img, video { display: block; max-width: 100%; } /* Class-level `display` would otherwise beat the UA rule for [hidden], and the router leans on [hidden] for every view. */ [hidden] { display: none !important; } a { color: inherit; } .icon { width: 1em; height: 1em; flex: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------ focus ring -- */ /* Ring colour is inherited per surface so it always clears 3:1 where it lands. */ :root { --focus-ring: var(--ink); } :where(a, button, select, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; } /* Route changes move focus to the new view's heading so screen readers land in the right place. The heading is not interactive, so it gets no ring. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } .skip-link { position: absolute; left: var(--pad-page); top: 0.5rem; z-index: 50; padding: 0.6rem 1rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-weight: bold; text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* ---------------------------------------------------------------- header -- */ .site-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 1.5rem; } .brand { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.35rem); font-weight: bold; letter-spacing: -0.01em; text-decoration: none; } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); } .site-nav__link { display: inline-flex; align-items: center; gap: 0.45rem; font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .site-nav__link:hover { border-bottom-color: currentColor; } .site-nav__link .icon { font-size: 1.15em; } /* On a case-study route the header steps back, per the mockup, but stays above 4.5:1 against the dimmed background. */ body.is-case .site-header { color: var(--ink-muted); } body.is-case .brand { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem); } body.is-case .site-nav__link { font-size: 0.9rem; } /* ----------------------------------------------------------------- views -- */ main { min-width: 0; } .view--landing { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.75rem); height: 100%; } /* ----------------------------------------------------------------- intro -- */ .intro { max-width: var(--measure); display: flex; flex-direction: column; gap: 0.85rem; } .intro__lede { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2rem); letter-spacing: -0.01em; } .intro__body { max-width: var(--measure); } /* ---------------------------------------------------------------- blocks -- */ .blocks { display: grid; grid-template-columns: 1fr; gap: var(--gap); flex: 1; align-content: stretch; } @media (min-width: 768px) { .blocks { grid-template-columns: 1fr 1fr; } } .block { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: clamp(200px, 34vh, 360px); padding: clamp(1.1rem, 3vw, 1.75rem); border: none; border-radius: var(--radius-block); font: inherit; text-align: left; text-decoration: none; cursor: pointer; /* background-color is in here so the block re-tints on the same timing as the body text. Fading one without the other flashes low contrast mid-swap. */ transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* Ring drawn inside the block, where the contrast is known. */ .block:focus-visible { outline-offset: -8px; } .block--case { background: var(--block-case); color: var(--block-case-ink); --focus-ring: var(--block-case-ink); } .block--products { background: var(--block-products); color: var(--block-products-ink); --focus-ring: var(--block-products-ink); } .block__title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: bold; } .block:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); } .block:active { transform: translateY(-1px); } /* ----------------------------------------------------------------- pills -- */ /* The 2px ink border is load-bearing: #F5D547 on #3BA5D0 is only 1.94:1 and on #A3B93C only 1.52:1, so the fill alone would not meet WCAG 1.4.11 (3:1) for a control boundary. The border does. */ .pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.95rem; border: 2px solid var(--accent-ink); border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 0.9rem; font-weight: bold; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .block:hover .pill, .pill:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgb(0 0 0 / 0.25); } .pill:focus-visible { --focus-ring: var(--accent-ink); } .pill--next { font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem); padding: 0.6rem 1.25rem; } /* -------------------------------------------------------------- icon btn -- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: var(--radius-pill); background: none; color: var(--ink); font-size: 1.5rem; line-height: 0; cursor: pointer; transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .icon-btn:hover { transform: scale(1.1); } /* ----------------------------------------------------------- case studies -- */ .view--case { display: flex; flex-direction: column; gap: clamp(1rem, 3vw, 1.5rem); padding: clamp(0.85rem, 2.5vw, 1.5rem); border-radius: var(--radius-panel); background: var(--surface); transition: background-color var(--dur) var(--ease); } /* Sticky, not scroll-locked: the page itself is the only scroll container. */ .case__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; background: var(--surface); transition: background-color var(--dur) var(--ease); } .case-select { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; /* so the pill can shrink instead of pushing the close button off a narrow screen */ flex: 0 1 auto; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); background: var(--block-case); color: var(--block-case-ink); --focus-ring: var(--block-case-ink); max-width: min(100%, 34rem); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .case-select__label { font-weight: bold; white-space: nowrap; } /* Under ~480px the label goes to assistive tech only and the study name keeps the room. The