/* ========================================================================== base.css -- reset and element defaults -------------------------------------------------------------------------- Deliberately small. The page has a handful of elements, so a full reset framework would be more code than the site itself. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* -------------------------------------------------------------------------- Two background layers, reproducing the original's: html green -- propagates to the canvas, so it is what shows in the overscroll gutters when you rubber-band past either end body cream -- paints the document box itself, and is the field the tagline, hours and Instagram icon sit on The order matters. If had no background, the body's cream would propagate to the canvas instead and the green would never appear. -------------------------------------------------------------------------- */ html { background-color: var(--ydb-green); } body { margin: 0; background-color: var(--ydb-cream); color: var(--ydb-ink); /* Matches the original, which never set a body font and inherited the UA default. Nothing on the page actually renders with it -- every text element sets its own. */ font-family: sans-serif; font-size: 16px; } img { display: block; max-width: 100%; } h1, h2, h3, p, ul, figure, address { margin: 0; padding: 0; } ul { list-style: none; } address { font-style: normal; } a { color: inherit; } /* -------------------------------------------------------------------------- Skip link -- keyboard users can jump past the banner. Off-screen until focused, so it contributes nothing to layout and cannot affect parity. -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 12px 20px; background: var(--ydb-green); color: var(--ydb-ink); font-family: var(--font-footer); font-size: 14px; text-decoration: none; } .skip-link:focus { left: 0; } /* Visible focus ring for keyboard navigation. The original had none. */ a:focus-visible { outline: 2px solid var(--ydb-ink); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }