:root{ --bg:#141519; --card:#202127; --orange:#ff7517; --white:#f6f4f4; --gray:#737373; --gray-light:#b4b4b4; /* EDGES. Before these existed every rule wrote its own, and the site had drifted to TWENTY different border greys and TWENTY THREE orange alphas across 145 uses. Nobody chose them; they accumulated one rule at a time, and it is why edges never quite agreed between sections. --line a hairline inside a card, between rows --edge the outer edge of a card --edge-hi emphasis: a heading rule, a divider meant to be seen --live an interactive or focused border --wash an orange hover fill THESE ARE FOR BORDERS ONLY. A glow and a gradient stop are not edges, and naming them as if they were is how a token stops meaning anything. The shadows and gradients on this site keep their own values on purpose. */ --line:rgba(180,180,180,0.12); --edge:rgba(180,180,180,0.22); --edge-hi:rgba(180,180,180,0.4); --live:rgba(255,117,23,0.5); --wash:rgba(255,117,23,0.12); /* A SOLID hairline, for the places translucency cannot work: a grid with 1px gaps paints the gap with a background, and a translucent one would show whatever is behind rather than a line. Used 15 times, and already aliased as --rule by hand on two pages. Named rather than converted, so no pixel moves. */ --rule:#2b2c33; /* Ink on an orange button, written by hand six times. */ --ink:#171712; /* The light stop of the button and progress gradients. A gradient needs two values, so this is a real colour rather than drift. */ --orange-lite:#ff8a3d; --font-display:"Poppins", "Poppins Fallback", Arial, Helvetica, sans-serif; --font-body:"DM Sans", "DM Sans Fallback", Arial, Helvetica, sans-serif; } *{box-sizing:border-box;margin:0;padding:0;} /* ===== Scrollbars ========================================================== Every scrollable area on the site was drawing the operating system's default bar: a light grey track with arrow buttons at each end, on a page that is almost black. It appears in the episode search results, the card rails, the testimonials, the policy tables and the page itself. These match the site instead. The track is the background, the thumb is the same grey as a card edge, and it warms to orange when you take hold of it. Firefox gets the two-value `scrollbar-color`; everything else gets the ::-webkit- rules, which are also what Chrome, Edge and Safari read. NOT hidden, only quietened. A scrollbar that cannot be seen is a scrollbar nobody knows to use. ========================================================================= */ html{scrollbar-width:thin;scrollbar-color:rgba(180,180,180,0.22) transparent;} *{scrollbar-width:thin;scrollbar-color:rgba(180,180,180,0.22) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-corner{background:transparent;} ::-webkit-scrollbar-thumb{ background:rgba(180,180,180,0.22); border:2px solid transparent;background-clip:padding-box;border-radius:0; } ::-webkit-scrollbar-thumb:hover{background:rgba(255,117,23,0.5);background-clip:padding-box;} ::-webkit-scrollbar-thumb:active{background:var(--orange);background-clip:padding-box;} /* the arrow buttons at each end are the most dated part of the default bar */ ::-webkit-scrollbar-button{display:none;height:0;width:0;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--white); font-family:var(--font-body); font-weight:400; line-height:1.6; overflow-x:hidden; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} /* Custom cursor removed for now, back to default browser cursor */ /* Scoped deliberately. A bare nav{} selector also hits the table of contents on the policy pages, which is correctly marked up as a