BSB Part 4B: Polish and Refine

Apply cascade cleanup, detail selectors, pseudo-elements, and restrained motion to bring the Black Swan Bistro site to a polished finish.

Tutorial Introduction

This tutorial is a structured polish pass. You will work through the Black Swan Bistro site in four focused passes, each building on the last:

1. Cascade cleanup — audit specificity and simplify selectors
2. Detail selectors — add hover states, focus styles, and decorative pseudo-elements
3. Restrained motion — add transitions and transforms to interactive moments
4. Final review — check accessibility, reduced motion, and overall feel

Each pass is short and focused. You are not rewriting the site. You are making targeted improvements that show you understand the tools from the last two tutorials well enough to apply them to a real project.

What Polish Means in CSS

Polish is the difference between a page that works and a page that feels considered. It shows up in small details:

• Links that respond smoothly to hover instead of snapping to a new colour
• Cards that lift slightly when interactive, signalling that they lead somewhere
• Navigation that shows focus states for keyboard users
• Decorative touches with pseudo-elements instead of extra HTML
• A stylesheet that is easy to read and change because specificity is low and selectors are clear

None of these changes are large on their own. Together, they signal care and intention. And the process of adding them teaches restraint — knowing when a detail helps and when it just adds noise.

Pass 1: Cascade Cleanup

Before adding any new CSS, clean up what you have. High specificity and unnecessary selector chains make every future change harder. This pass makes the stylesheet easier to work with.

Audit Specificity

Open DevTools on each page and look for crossed-out styles in the Styles panel. Each crossed-out rule is a specificity conflict. Ask:

• Is the winning selector more specific than it needs to be?
• Are there ID selectors that could be replaced with classes?
• Are there long descendant chains like .hero .container .section-title that could be a single class?

Write down each problem you find. You do not need to fix everything at once — just build a clear picture before changing anything.

Simplify Selectors

For each problem in your audit, rewrite the selector to be as simple as possible while keeping the same visual result. The pattern is usually the same:

• Replace ID selectors with class selectors
• Replace long descendant chains with a single purpose-named class
• Remove !important by fixing the specificity conflict underneath

After each change, check the page in the browser. If it looks the same, the simplification worked. If something breaks, you have found a specificity dependency worth understanding.

Pass 2: Detail Selectors

With a cleaner stylesheet, you can now add interactive and decorative detail with confidence that new rules will not fight old ones.

Pseudo-classes for Interaction

Review every interactive element on the site — links, buttons, cards that contain links, and navigation items. Each one should have clear :hover and :focus-visible states.

• Navigation links: a colour or underline shift on hover, plus a visible focus ring
• Buttons: a background or shadow change that signals interactivity
• Cards with links: consider styling the whole card on :hover and :focus-within

The key rule: every interactive element should look different in its hovered and focused state. If it looks the same regardless of interaction, the user has no feedback.

Pseudo-elements for Decoration

Pseudo-elements let you add decorative detail without touching the HTML. Use them for:

• Section dividers between content areas
• Subtle accent lines under headings
• Decorative marks next to the active navigation link

Keep pseudo-element decoration modest. One or two well-placed touches improve the feel. Five or six make the page feel noisy.

/* Example: accent line under section titles */
.section-title::after {
    content: '';
    display: block;
    width: 3rem;
    height: 2px;
    background-color: var(--color-golden-orange);
    margin-top: 0.5rem;
}

Pass 3: Restrained Motion

Motion draws attention. Used well, it signals that the page is responding to the user. Used carelessly, it makes the page feel slow or distracting.

Transitions on Interactive Elements

Add transitions to the interactive states you created in Pass 2. The rules are simple:

• Only transition the properties you are changing — never use transition: all
• Keep durations between 0.15s and 0.3s for interactive feedback
• Use ease or ease-out for most hover transitions

/* Navigation link transition */
.site-nav__link {
    transition: color 0.2s ease;
}

/* Button transition */
.button {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

Transforms for Subtle Depth

A small translateY on card hover gives a sense of lift without physically moving content around the page. Pair it with a soft box-shadow change for depth:

.menu-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-card:hover,
.menu-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

Restraint matters here. A 2px lift is enough to signal interactivity. More than 4px starts to feel like the card is jumping off the page.

Guarding with prefers-reduced-motion

Every transition and transform you add needs a reduced-motion fallback. Place this at the end of your stylesheet:

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

This is not a nice-to-have. It is an accessibility requirement. Users with motion sensitivity, vestibular disorders, or a preference for calm interfaces depend on this media query working correctly.

Test it: in macOS, go to System Settings → Accessibility → Display → Reduce motion. In DevTools, open the Rendering panel and emulate prefers-reduced-motion: reduce. Every transition on the site should effectively disappear.

Pass 4: Final Review

The last pass is a full walkthrough. Open each page and check:

1. Consistency: do hover states, focus styles, and card lifts feel the same across all pages?
2. Reduced motion: enable the preference and verify all motion stops
3. Keyboard navigation: tab through every page and check that focus-visible styles appear on every interactive element
4. Specificity: open DevTools one more time and confirm there are no unnecessary overrides left
5. Feel: does the site feel considered, or does it feel over-decorated?

If something feels like too much, remove it. The best polish passes end with fewer lines of CSS than you expected, not more.

.site-nav__link {
  transition: color 0.2s ease;
}

.site-nav__link:hover {
  color: var(--color-golden-orange);
}

.menu-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-card:hover,
.menu-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Recap

In this tutorial, you applied a structured polish workflow to the Black Swan Bistro site:

1. Cascade cleanup made the stylesheet easier to work with by removing specificity conflicts
2. Detail selectors added hover, focus, and decorative refinements
3. Restrained motion gave interactive elements smooth, purposeful transitions
4. Final review checked accessibility, consistency, and overall feel

This four-pass structure is not specific to the bistro. You can apply it to any project when the layout is working but the experience is not yet polished.