🚀 Days 19–20 – Projects · Day 20

Day 20: Major Project: Full Business Website Redesign

⏱ 5–7 hours📶 Major project🎯 100% self-study

Day 20 / 20

✅ Today you will learn

Audit an existing site and write a redesign brief
Create a brand system: palette, type scale, spacing, shadows
Style 6 real pages with one stylesheet – without changing the HTML
Responsive, dark mode, reduced motion and print support
Test, measure and present the redesign to a client

🏢 In the real world

Mr. Vikas Sharma calls again: “The website works, orders are coming – now make it look like a premium brand before Diwali.” In the real world most front-end work is exactly this: improving an existing site safely. You will take the 6-page site from the HTML course and turn it into a polished brand experience with a single CSS file of about 276 lines. The only HTML change is one Google Fonts link per page.

Before → after

▶ Home page after the redesign (scroll inside; the narrow box shows the tablet layout)

Before (HTML course starter CSS)

System font, plain headings
Flat cards, no hover feedback
Plain tables and lists
No dark mode, no print styles
53 lines, written quickly

After (this project)

Playfair Display + Lato pairing, fluid type scale
Lifting cards, image zoom, organic hero photo
Branded menu tables, timeline, testimonial, FAQ
Automatic dark mode, reduced motion, print
276 lines in 13 documented sections

Phase 1: audit and brief

Problem found	Redesign decision
Looks generic, not “mithai”	Warm cream background, saffron + gold palette, serif headings like traditional sweet boxes
Product photos are plain rectangles	Rounded cards, 4:3 cover crop, gentle zoom on hover
Menu page is a raw table	Dark header row, serif sweet names, right-aligned saffron prices
About page is a wall of text	Timeline with dots for milestones, promise as a two-column card
Phone navigation is cramped	Pill links that scroll sideways under the logo
Night-time visitors	Automatic dark palette from the same tokens

💡 Why not touch the HTML?

The client’s site is live and indexed by Google. Changing only CSS means zero risk to content, links and SEO, and the redesign can be rolled back by restoring one file. It also proves how powerful well-structured semantic HTML is.

Phase 2: the brand system

CSS – 1. design tokens

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --brand: #c2410c;          /* deep saffron – main brand */
  --brand-600: #9a3412;
  --gold: #f59e0b;
  --gold-soft: #fef3c7;
  --on-brand: #ffffff;       /* text colour on brand backgrounds */
  --ink: #2b1a12;            /* headings */
  --text: #44342b;           /* body text */
  --muted: #7c6a5e;
  --line: #f0e2d4;
  --bg: #fffaf3;             /* warm cream page */
  --surface: #ffffff;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 12px 32px rgb(87 46 18 / 10%);
  --shadow-lg: 0 24px 48px rgb(87 46 18 / 18%);
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Lato", system-ui, "Segoe UI", Roboto, sans-serif;
  --container: 1120px;
  --gap: clamp(16px, 3vw, 28px);
}

🟠

Saffron #c2410cButtons, prices, links – 5.2:1 on white

🟡

Gold #f59e0bAccents, dividers, focus rings

🤎

Cocoa #2b1a12Headings, footer, table head

🍦

Cream #fffaf3Page background – warmer than white

Palette inspired by kesar, ghee and sweet-box gold

CSS – 2. base and type scale

/* ---------- 2. BASE / RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}
img, video { display: block; max-width: 100%; height: auto; }
iframe { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
input, select, textarea, button { font: inherit; }
::selection { background: var(--gold-soft); }

/* Skip link (HTML class: .skip) */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

Phase 3: layout and header

CSS – 3. layout + 4. header

/* ---------- 3. LAYOUT HELPERS ---------- */
/* <main> and the header/footer .bar share the same centred width */
main, .bar { width: min(var(--container), 100% - 32px); margin-inline: auto; }
main { padding-block: clamp(24px, 5vw, 48px) 64px; }
main > section, main > article { margin-top: clamp(40px, 7vw, 80px); }
main > section:first-child { margin-top: 0; }

/* ---------- 4. HEADER & NAVIGATION ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 250 243 / 88%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold-soft); }
header.site nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
header.site nav a {
  display: block; padding: 8px 16px; border-radius: 99px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: .95rem;
  transition: background-color .2s, color .2s;
}
header.site nav a:hover { background: var(--gold-soft); color: var(--brand-600); }
header.site nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }

The HTML had no .container class, so main, .bar share one centring rule – reuse what exists instead of editing HTML.
Spacing between sections uses main > section with clamp(), so it grows smoothly from phone to desktop.
The active page pill comes from the existing aria-current="page" attribute – accessibility and styling from one source.

Phase 4: hero, buttons and product cards

CSS – 5. buttons & hero

/* ---------- 5. BUTTONS & HERO ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 99px; border: 2px solid var(--brand);
  background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px rgb(194 65 12 / 25%);
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.btn:hover { color: var(--on-brand); background: var(--brand-600); transform: translateY(-2px); box-shadow: 0 14px 30px rgb(194 65 12 / 30%); }
.btn:active { transform: translateY(0); }
.btn.alt { background: transparent; color: var(--brand); box-shadow: none; }
.btn.alt:hover { background: var(--gold-soft); color: var(--brand-600); }

.hero {
  display: grid; gap: clamp(24px, 5vw, 64px);
  grid-template-columns: 1.05fr .95fr; align-items: center;
  padding-block: clamp(32px, 6vw, 72px);
  position: relative;
}
.hero::before {                                   /* soft saffron glow behind the photo */
  content: ""; position: absolute; z-index: -1; right: 0; top: 0;
  width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(245 158 11 / 22%), transparent 65%);
}
.hero h1 { letter-spacing: -.01em; }
.hero p:first-of-type { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.hero p:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero picture img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;   /* organic “blob” shape */
  box-shadow: var(--shadow-lg);
  animation: settle 1s ease-out both;
}
@keyframes settle { from { opacity: 0; transform: scale(.94) rotate(-2deg); } }

🧠 The organic photo shape

border-radius accepts eight values (horizontal / vertical radii for each corner). 40% 60% 55% 45% / 45% 40% 60% 55% turns a rectangle into a soft “blob” – a trendy, food-friendly look with zero images or SVG.

CSS – 6. cards & product grid

/* ---------- 6. CARDS & PRODUCT GRID ---------- */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.card:hover img { transform: scale(1.06); }
.card div { padding: 18px 20px 22px; position: relative; background: var(--surface); }
.card h3 { margin-bottom: 4px; }
.card p { margin: 0; color: var(--muted); }
.price { display: block; width: fit-content; margin-top: 10px; padding: 2px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--brand-600); font-weight: 700; }

/* Section headings get a small decorative divider */
main h2 { position: relative; padding-bottom: 14px; }
main h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); }

Phase 5: menu, about and order pages

▶ menu.html – branded price tables and jump links

CSS – 7. tables, lists, FAQ, quotes, timeline

/* ---------- 7. TABLES, LISTS, FAQ, QUOTES ---------- */
/* "Why Jaipur trusts us" list → feature tiles */
section[aria-labelledby="why"] ul { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
section[aria-labelledby="why"] li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
section[aria-labelledby="why"] strong { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--brand); }

/* Testimonial */
figure { margin: 0; }
blockquote { margin: 0; position: relative; background: var(--surface); border-radius: var(--radius); padding: 32px 32px 24px 72px; box-shadow: var(--shadow); font-size: 1.15rem; color: var(--ink); }
blockquote::before { content: "“"; position: absolute; left: 22px; top: 6px; font-family: var(--font-head); font-size: 4.5rem; line-height: 1; color: var(--gold); }
blockquote p { margin: 0; }
figcaption { margin-top: 12px; padding-left: 72px; color: var(--muted); font-style: italic; }

/* FAQ accordion */
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; transition: box-shadow .2s; }
details[open] { box-shadow: var(--shadow); }
summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 20px 16px; margin: 0; color: var(--muted); }

/* Menu tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 8px; }
caption { text-align: left; font-weight: 700; color: var(--muted); padding: 0 4px 10px; caption-side: top; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { background: var(--ink); color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
tbody th { font-family: var(--font-head); color: var(--ink); }
tbody td:last-child { font-weight: 700; color: var(--brand); text-align: right; white-space: nowrap; }
thead th:last-child { text-align: right; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: #fffbeb; }
h2 small { font-family: var(--font-body); font-size: .95rem; color: var(--muted); font-weight: 400; }

/* In-page "Jump to" navigation on the menu page */
main nav[aria-label="Menu sections"] p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
main nav[aria-label="Menu sections"] a { padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--surface); }
main nav[aria-label="Menu sections"] a:hover { border-color: var(--brand); }

/* About page: timeline list and promise definitions */
article ol { list-style: none; padding: 0; margin: 0 0 32px; border-left: 3px solid var(--gold); }
article ol li { position: relative; padding: 4px 0 18px 24px; }
article ol li::before { content: ""; position: absolute; left: -10px; top: 10px; width: 17px; height: 17px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
article ol time { font-weight: 700; color: var(--brand); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
dl dt, dl dd { padding: 16px 20px; border-bottom: 1px solid var(--line); margin: 0; }
dl dt { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--brand); }
dl dd { color: var(--text); }
dl dt:last-of-type, dl dd:last-of-type { border-bottom: 0; }
dfn { font-style: normal; font-weight: 700; color: var(--brand); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

HTML that already existed	Selector used	Result
<section aria-labelledby="why"> <ul>	section[aria-labelledby="why"] ul	Plain list → 4 feature tiles in a grid
<blockquote> + <figcaption>	blockquote::before	Big gold quote mark
<ol> of milestones with <time>	article ol li::before	Vertical timeline with dots
<dl> promise	dl { grid-template-columns: max-content 1fr }	Two-column promise card
<nav aria-label="Menu sections">	attribute selector	Jump links become pills
<tbody> last <td>	tbody td:last-child	Saffron, right-aligned prices

⚠️ The trade-off of structural selectors

Selectors like section[aria-labelledby="why"] ul are fine for a redesign where HTML must not change, but they are tied to the markup. When you are allowed to edit HTML, prefer BEM classes (Day 17) – e.g. class="features".

▶ about.html – story, video, timeline and promise card

▶ contact.html – try submitting with a wrong mobile number

CSS – 8. forms, 9. about media, 10. footer & utility pages

/* ---------- 8. FORMS (contact page) ---------- */
form { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); display: grid; gap: 18px; max-width: 620px; }
label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
input:not([type="radio"], [type="checkbox"]), select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(194 65 12 / 15%); }
input:user-invalid, select:user-invalid { border-color: #dc2626; }
input:user-valid:not([type="checkbox"], [type="radio"]) { border-color: #16a34a; }
small { color: var(--muted); font-size: .85rem; }
fieldset { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
legend { font-weight: 700; color: var(--ink); padding: 0 6px; }
fieldset label { display: inline; font-weight: 400; margin: 0; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); vertical-align: middle; }
form > div:has(input[type="checkbox"]) label { display: inline; font-weight: 400; }
form .btn { justify-self: start; border: 0; }
form + h2 { margin-top: 56px; }
iframe { width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- 9. ABOUT PAGE MEDIA ---------- */
article video { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: #000; }
article figure figcaption { padding-left: 0; text-align: center; }
article > p:first-of-type { font-size: 1.2rem; max-width: 60ch; }

/* ---------- 10. FOOTER & UTILITY PAGES ---------- */
footer.site { margin-top: 64px; background: var(--ink); color: #e9d8c8; }
footer.site .bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 40px; }
footer.site address { font-style: normal; line-height: 1.9; }
footer.site strong { font-family: var(--font-head); font-size: 1.3rem; color: #fff; }
footer.site a { color: var(--gold); }
footer.site small { color: #c9b8a8; }

/* thank-you.html and 404.html have no site header: centre their <main> */
body:not(:has(header.site)) > main { min-height: 90vh; display: grid; place-content: center; text-align: center; }
body:not(:has(header.site)) > main p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

input:not([type="radio"], [type="checkbox"]) styles text fields without breaking radios and checkboxes.
:user-invalid / :user-valid colour the borders only after the customer has typed (Day 15).
body:not(:has(header.site)) > main detects the thank-you and 404 pages (they have no header) and centres them – no extra class needed.

Phase 6: responsive, dark mode, motion and print

CSS – 11 to 13

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero picture { order: -1; }                       /* photo first on phones */
  header.site .bar { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 10px; }
  header.site nav ul { overflow-x: auto; scrollbar-width: none; }   /* pills scroll sideways */
  header.site nav a { white-space: nowrap; background: var(--surface); border: 1px solid var(--line); }
  blockquote { padding: 56px 22px 22px; }
  dl { grid-template-columns: 1fr; }
  dl dt { border-bottom: 0; padding-bottom: 0; }
  blockquote::before { top: 4px; }
  figcaption { padding-left: 0; }
}
@media (max-width: 520px) {
  th, td { padding: 12px; }
  tbody td:nth-child(2) { font-size: .9rem; color: var(--muted); }
}

/* ---------- 12. DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fdf2e6; --text: #e9dccf; --muted: #b9a797;
    --line: #3a2a20; --bg: #1a120d; --surface: #241912;
    --gold-soft: #3d2a12; --brand: #f97316; --brand-600: #fb923c; --on-brand: #1a120d;
    --shadow: 0 12px 32px rgb(0 0 0 / 40%); --shadow-lg: 0 24px 48px rgb(0 0 0 / 55%);
  }
  header.site { background: rgb(26 18 13 / 88%); }
  thead th { background: #3a2a20; }
  tbody tr:hover { background: #2d2017; }
  footer.site { background: #120c08; }
}

/* ---------- 13. MOTION & PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  header.site, footer.site, .btn, iframe, video { display: none !important; }
  body { background: #fff; color: #000; }
  .card, table, blockquote, form { box-shadow: none; border: 1px solid #ccc; }
}

Feature	How it works
Phone layout (≤ 820px)	Hero stacks with the photo first (order: -1); nav pills scroll sideways
Small phones (≤ 520px)	Tighter table cells, muted descriptions
Dark mode	Only tokens change; --on-brand flips to dark text so orange buttons keep 6.6:1 contrast
Reduced motion	All animations and transitions effectively off
Print	Header, footer, buttons, map and video hidden; shadows replaced by borders

Phase 7: test, measure and present

Check	Result in our build
Horizontal overflow at 1280px and 375px (all 6 pages)	0px ✅
Body text contrast (light / dark)	11.4:1 / 13.7:1 ✅
Button contrast (light / dark)	5.2:1 / 6.6:1 ✅
Muted text contrast	5.0:1 ✅
HTML changed	Only one Google Fonts <link> per page ✅
Keyboard	Skip link, gold focus rings on every link, field and button ✅

1Take before/after screenshots of every page on phone and laptop
2Write a one-page summary: problems found → what changed → measured results
3Upload the new css/style.css to a staging copy first and let the client approve
4Back up the old style.css, then upload to the live site
5Bump the file name or add ?v=2 to the link so browsers fetch the new CSS
6Ask for a review / testimonial – and add the project to your portfolio

Delivering a redesign professionally

Extend it (homework challenges)

Add a manual theme switch button with data-theme (Day 12) – the JS course will save the choice.
Create a festive “Diwali mode” by overriding 4 tokens under a .diwali class on <body>.
Add a skeleton loader for the product grid (Day 14) for when products come from a database.
Convert the structural selectors to BEM classes now that you may edit the HTML.
Run Lighthouse on every page and reach 95+ in Accessibility and Best Practices.

Complete stylesheet

The complete project (6 HTML pages, images, video, robots.txt, sitemap.xml and this stylesheet) is in the free CSS course kit download.

CSS – css/style.css (complete)

/* =============================================================
   Sharma Sweets – complete redesign (CSS course, Day 20)
   The HTML from the HTML course is unchanged except for one
   Google Fonts <link>. Everything you see comes from this file.

   1. Design tokens        6. Cards & product grid
   2. Base / reset         7. Tables, lists, FAQ, quotes
   3. Layout helpers       8. Forms
   4. Header & navigation  9. About page media
   5. Buttons & hero      10. Footer, utility pages
                          11. Responsive  12. Dark mode  13. Motion & print
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --brand: #c2410c;          /* deep saffron – main brand */
  --brand-600: #9a3412;
  --gold: #f59e0b;
  --gold-soft: #fef3c7;
  --on-brand: #ffffff;       /* text colour on brand backgrounds */
  --ink: #2b1a12;            /* headings */
  --text: #44342b;           /* body text */
  --muted: #7c6a5e;
  --line: #f0e2d4;
  --bg: #fffaf3;             /* warm cream page */
  --surface: #ffffff;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 12px 32px rgb(87 46 18 / 10%);
  --shadow-lg: 0 24px 48px rgb(87 46 18 / 18%);
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Lato", system-ui, "Segoe UI", Roboto, sans-serif;
  --container: 1120px;
  --gap: clamp(16px, 3vw, 28px);
}

/* ---------- 2. BASE / RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}
img, video { display: block; max-width: 100%; height: auto; }
iframe { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
input, select, textarea, button { font: inherit; }
::selection { background: var(--gold-soft); }

/* Skip link (HTML class: .skip) */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- 3. LAYOUT HELPERS ---------- */
/* <main> and the header/footer .bar share the same centred width */
main, .bar { width: min(var(--container), 100% - 32px); margin-inline: auto; }
main { padding-block: clamp(24px, 5vw, 48px) 64px; }
main > section, main > article { margin-top: clamp(40px, 7vw, 80px); }
main > section:first-child { margin-top: 0; }

/* ---------- 4. HEADER & NAVIGATION ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 250 243 / 88%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold-soft); }
header.site nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
header.site nav a {
  display: block; padding: 8px 16px; border-radius: 99px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: .95rem;
  transition: background-color .2s, color .2s;
}
header.site nav a:hover { background: var(--gold-soft); color: var(--brand-600); }
header.site nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }

/* ---------- 5. BUTTONS & HERO ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 99px; border: 2px solid var(--brand);
  background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px rgb(194 65 12 / 25%);
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.btn:hover { color: var(--on-brand); background: var(--brand-600); transform: translateY(-2px); box-shadow: 0 14px 30px rgb(194 65 12 / 30%); }
.btn:active { transform: translateY(0); }
.btn.alt { background: transparent; color: var(--brand); box-shadow: none; }
.btn.alt:hover { background: var(--gold-soft); color: var(--brand-600); }

.hero {
  display: grid; gap: clamp(24px, 5vw, 64px);
  grid-template-columns: 1.05fr .95fr; align-items: center;
  padding-block: clamp(32px, 6vw, 72px);
  position: relative;
}
.hero::before {                                   /* soft saffron glow behind the photo */
  content: ""; position: absolute; z-index: -1; right: 0; top: 0;
  width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(245 158 11 / 22%), transparent 65%);
}
.hero h1 { letter-spacing: -.01em; }
.hero p:first-of-type { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.hero p:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero picture img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;   /* organic “blob” shape */
  box-shadow: var(--shadow-lg);
  animation: settle 1s ease-out both;
}
@keyframes settle { from { opacity: 0; transform: scale(.94) rotate(-2deg); } }

/* ---------- 6. CARDS & PRODUCT GRID ---------- */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.card:hover img { transform: scale(1.06); }
.card div { padding: 18px 20px 22px; position: relative; background: var(--surface); }
.card h3 { margin-bottom: 4px; }
.card p { margin: 0; color: var(--muted); }
.price { display: block; width: fit-content; margin-top: 10px; padding: 2px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--brand-600); font-weight: 700; }

/* Section headings get a small decorative divider */
main h2 { position: relative; padding-bottom: 14px; }
main h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); }

/* ---------- 7. TABLES, LISTS, FAQ, QUOTES ---------- */
/* "Why Jaipur trusts us" list → feature tiles */
section[aria-labelledby="why"] ul { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
section[aria-labelledby="why"] li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
section[aria-labelledby="why"] strong { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--brand); }

/* Testimonial */
figure { margin: 0; }
blockquote { margin: 0; position: relative; background: var(--surface); border-radius: var(--radius); padding: 32px 32px 24px 72px; box-shadow: var(--shadow); font-size: 1.15rem; color: var(--ink); }
blockquote::before { content: "“"; position: absolute; left: 22px; top: 6px; font-family: var(--font-head); font-size: 4.5rem; line-height: 1; color: var(--gold); }
blockquote p { margin: 0; }
figcaption { margin-top: 12px; padding-left: 72px; color: var(--muted); font-style: italic; }

/* FAQ accordion */
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; transition: box-shadow .2s; }
details[open] { box-shadow: var(--shadow); }
summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 20px 16px; margin: 0; color: var(--muted); }

/* Menu tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 8px; }
caption { text-align: left; font-weight: 700; color: var(--muted); padding: 0 4px 10px; caption-side: top; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { background: var(--ink); color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
tbody th { font-family: var(--font-head); color: var(--ink); }
tbody td:last-child { font-weight: 700; color: var(--brand); text-align: right; white-space: nowrap; }
thead th:last-child { text-align: right; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: #fffbeb; }
h2 small { font-family: var(--font-body); font-size: .95rem; color: var(--muted); font-weight: 400; }

/* In-page "Jump to" navigation on the menu page */
main nav[aria-label="Menu sections"] p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
main nav[aria-label="Menu sections"] a { padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--surface); }
main nav[aria-label="Menu sections"] a:hover { border-color: var(--brand); }

/* About page: timeline list and promise definitions */
article ol { list-style: none; padding: 0; margin: 0 0 32px; border-left: 3px solid var(--gold); }
article ol li { position: relative; padding: 4px 0 18px 24px; }
article ol li::before { content: ""; position: absolute; left: -10px; top: 10px; width: 17px; height: 17px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
article ol time { font-weight: 700; color: var(--brand); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
dl dt, dl dd { padding: 16px 20px; border-bottom: 1px solid var(--line); margin: 0; }
dl dt { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--brand); }
dl dd { color: var(--text); }
dl dt:last-of-type, dl dd:last-of-type { border-bottom: 0; }
dfn { font-style: normal; font-weight: 700; color: var(--brand); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ---------- 8. FORMS (contact page) ---------- */
form { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); display: grid; gap: 18px; max-width: 620px; }
label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
input:not([type="radio"], [type="checkbox"]), select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(194 65 12 / 15%); }
input:user-invalid, select:user-invalid { border-color: #dc2626; }
input:user-valid:not([type="checkbox"], [type="radio"]) { border-color: #16a34a; }
small { color: var(--muted); font-size: .85rem; }
fieldset { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
legend { font-weight: 700; color: var(--ink); padding: 0 6px; }
fieldset label { display: inline; font-weight: 400; margin: 0; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); vertical-align: middle; }
form > div:has(input[type="checkbox"]) label { display: inline; font-weight: 400; }
form .btn { justify-self: start; border: 0; }
form + h2 { margin-top: 56px; }
iframe { width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- 9. ABOUT PAGE MEDIA ---------- */
article video { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: #000; }
article figure figcaption { padding-left: 0; text-align: center; }
article > p:first-of-type { font-size: 1.2rem; max-width: 60ch; }

/* ---------- 10. FOOTER & UTILITY PAGES ---------- */
footer.site { margin-top: 64px; background: var(--ink); color: #e9d8c8; }
footer.site .bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 40px; }
footer.site address { font-style: normal; line-height: 1.9; }
footer.site strong { font-family: var(--font-head); font-size: 1.3rem; color: #fff; }
footer.site a { color: var(--gold); }
footer.site small { color: #c9b8a8; }

/* thank-you.html and 404.html have no site header: centre their <main> */
body:not(:has(header.site)) > main { min-height: 90vh; display: grid; place-content: center; text-align: center; }
body:not(:has(header.site)) > main p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero picture { order: -1; }                       /* photo first on phones */
  header.site .bar { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 10px; }
  header.site nav ul { overflow-x: auto; scrollbar-width: none; }   /* pills scroll sideways */
  header.site nav a { white-space: nowrap; background: var(--surface); border: 1px solid var(--line); }
  blockquote { padding: 56px 22px 22px; }
  dl { grid-template-columns: 1fr; }
  dl dt { border-bottom: 0; padding-bottom: 0; }
  blockquote::before { top: 4px; }
  figcaption { padding-left: 0; }
}
@media (max-width: 520px) {
  th, td { padding: 12px; }
  tbody td:nth-child(2) { font-size: .9rem; color: var(--muted); }
}

/* ---------- 12. DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fdf2e6; --text: #e9dccf; --muted: #b9a797;
    --line: #3a2a20; --bg: #1a120d; --surface: #241912;
    --gold-soft: #3d2a12; --brand: #f97316; --brand-600: #fb923c; --on-brand: #1a120d;
    --shadow: 0 12px 32px rgb(0 0 0 / 40%); --shadow-lg: 0 24px 48px rgb(0 0 0 / 55%);
  }
  header.site { background: rgb(26 18 13 / 88%); }
  thead th { background: #3a2a20; }
  tbody tr:hover { background: #2d2017; }
  footer.site { background: #120c08; }
}

/* ---------- 13. MOTION & PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  header.site, footer.site, .btn, iframe, video { display: none !important; }
  body { background: #fff; color: #000; }
  .card, table, blockquote, form { box-shadow: none; border: 1px solid #ccc; }
}

🏅 Job skills unlocked today

✔ Audit a live site and plan a safe redesign✔ Build a brand system with tokens and a type scale✔ Style complete multi-page sites from one stylesheet✔ Test, document and deliver a redesign like a professional

Practice tasks

🏋️ Practice – do it yourself

Task 1: Create a “Diwali mode” by adding class="diwali" to <body> and overriding --brand, --gold, --bg and --ink inside .diwali.

Task 2: Restyle the 404 page with a big animated 🍬 (keyframes bounce) that stops for reduced-motion users.

Task 3: Pick a real local business near you, audit its website with the Phase 1 table and write a redesign brief.

Quick quiz

🧠 Quick Quiz – test yourself

1. Why redesign with CSS only?

Separation of concerns pays off.

2. How does the active nav pill get its style?

Reuses accessibility markup.

3. Dark-mode orange buttons stay readable because…

6.6:1 contrast.

4. body:not(:has(header.site)) > main targets…

:has() as a parent selector.

5. After uploading a new style.css, visitors still see the old design. Fix?

Browser cache.

Interview corner

💼 Interview Corner

Tell me about a project where you improved an existing website.

STAR: Situation – a working but plain 6-page business site before a festival; Task – premium look without risking SEO; Action – audit, brand tokens, type scale, component styles via existing semantic hooks (aria-current, landmarks), responsive + dark + print, contrast and overflow testing, staging approval; Result – one documented stylesheet, 0 overflow, ≥ 5:1 contrast, HTML untouched, easy rollback.

How do you deploy CSS changes safely?

Work on a staging copy, keep the old file as a backup, test key pages and devices, version the asset URL to bust caches, deploy during low traffic, and verify in production with DevTools (Network: correct file loaded).

Summary

Audit → brief → tokens → base → layout → components → pages → responsive → dark → print.
Reuse existing semantic HTML hooks; change one file, not the markup.
Measure: overflow, contrast, keyboard, Lighthouse.
Deliver with staging, backups, cache-busting and a short report.

➡️ Next

🎉 CSS course complete! Next: the 30-day JavaScript course – make this website interactive with a cart, filters, form validation and data from APIs.

Frequently Asked Questions

What should I learn next?

JavaScript – the 30-day course adds a live cart, theme switch memory, form messages and data from APIs to these same pages.

Can I use this design for a real client?

Yes – the code is yours to learn from and adapt. Replace the sample business details, photos and text with the client’s own.

← CSS (20 Days)