Project: Style the Shop

This project puts the whole module to work on the shop's home page. You add four finishing touches to styles.css: a sale badge, a header that stays at the top, a quieter footer and roomier cards. Each one uses an idea you already know, and none of them needs !important.

A variable on :root gives a value a name, and a selector with more classes beats one with fewer, wherever it sits in the file. Here is the idea on the prices:

:root {
  --accent: #c60;
}

.products .price {
  color: var(--accent);
}

Two classes beat the one in .price, so every price in the list would get #c60. Two more ideas: position: sticky with top: 0 keeps an element at the top of the window while the page scrolls, and properties like color and font-size set on a parent are inherited by the text inside it. The check's browser never scrolls or draws: it prints which declaration wins and where it comes from.

The check must print:

#lamp .badge  color: #fff              <- .sale .badge
              background-color: #c60  <- .sale .badge
header        position: sticky        <- header
              top: 0                  <- header
              background-color: #fff  <- header
footer p      color: #777             <- inherited, footer
              font-size: 14px         <- inherited, footer
#mug          padding: 16px           <- .products .card

Your task: add --sale: #c60 and --muted: #777 to :root. Write a .sale .badge rule with white text on var(--sale). Make the header sticky at top: 0 with a white background. Give the footer the muted color and 14px text, and give .products .card a padding of var(--gap).

Assignment
Follow the Coding Tutorial to add the sale badge, the sticky header, the muted footer and the card padding to styles.css, with variables and no !important.

Hint
If a new declaration doesn't win, count the classes in each selector and give yours one more, instead of using !important. A new variable changes nothing until a rule reads it with var().