Template D (MEC) – Legacy CSS Checklist

For reconciling the public Template D website (apps/center-website) with the historic Mall Template (template_d_master.css, template_d/style.css). The goal is a consistent end state in the code – not a 1:1 reproduction of the legacy !important layers.

Principle (always the same)

1. Read Legacy: What selectors and values does template_d_master.css set? What does template_d/style.css (or other page CSS) override – particularly at the same breakpoints?
2. Note Conflict: If two sources contradict each other, which is visually valid on the reference site (or which file is loaded later and wins)?
3. Document End State: One line per token (color, spacing, font, size, z-index) – the effective value after merging.
4. A Clean Rule: Under [data-template="mec-template-d"] in apps/center-website/app/globals.css (or specifically in component Tailwind when it only concerns layout). Avoid broad !important cascades; deliberately choose specificity.
5. React Markup: Classes from the legacy naming scheme only when sensible; otherwise prefix mec-d-… for new, clearly assigned blocks (e.g., .mec-d-angebot-val). Inline styles only for dynamic values (e.g., Hero colors).

Breakpoints and Order

• Legacy often uses overlapping max-width media queries (e.g., ≤670px and 481px–670px).
• Later or more specific rules in their own stylesheet must appear in globals.css after broader queries when the effective live state corresponds to the “narrower” override.
• Briefly comment in CSS: “First …, then …, so that … wins.”

Sources in Repository (Reference)

• Master: typically template_d_master.css (Project Import / Theme Reference).
• Overrides: template_d/style.css.

Specific paths may vary depending on the working copy; search in the project for home-infobox-angebote, item-price, mec-d-, template_d.

Checklist per UI Block

Block	Legacy Selectors (Keywords)	Status / Note
Page Grid #container	body, #container, background #eae9e7	See mec-import.md
Header + Language	header, #header-main, #lang-container (template_d/style.css: top/left, not right)	Boxed like #container: header fixed with max-width: 1440, left: 0, right: 0, margin: 0 auto (centered strip on wide viewports). Language switcher: first child of header#cc-parent like header.tpl. Logo: #logo-container table / #logo-picture table-cell
Desktop Navigation	.navigation, dropdown, active state	Effective rule: .mec-d-nav-link and others
Offer Box Heading	.home-infobox-angebote-title, link “To offer”	Master + style.css merged
Offer Box Tile	.item-price, .offer-green, .item-text, .item-image, Slick Dots	Classes: .mec-d-angebot-val, -caption, -old-price, ul.mec-d-angebote-dots, li.is-active
Hero Slider	.home-slider, .home-slider-badge, .slick-dots, teaser.css title/text	sliderLayout="template-d": section .home-slider, Dots .mec-d-home-slider-dots / .mec-d-home-slider-dot, Badge .home-slider-badge, arrows off; title/position further CMS-based
Three Large Info Tiles	.home-infobox-3, .box-title, .home-infobox-3 p, SVG illustration	Master .box-title brings bottom: 60px — for .home-infobox-3 .box-title in globals.css bottom: auto, otherwise spacing from title to subtitle is incorrect. Line height as legacy (line-height: normal). Title/P left, max-width ~52%; 30px/700, 18px/400; SVG unchanged
Four Lottie Tiles	.home-infobox-4, Anim-IDs	Live reference: splitInfobox4Title (word 1 / rest or \n), CSS mec-d-infobox4-line1, line2, sub (not style.css 30px/30px)
Footer Logo Slider	template_d_master.css .shop-slider (145px, padding 75px, white); template_grooss.js Slick 6/3/2, autoplay 2000ms	.mec-d-footer-shop-slider + Embla (footer.tsx); dimensions & breakpoints in globals.css
Shop Lists A–Z	.shop-list (template_d_master.css)	globals.css under .content-cms ul.shop-list
Service Tiles	.service, .icon, .title; style.css #808080	service.tsx only icon + title; globals.css (250px / 200px ≤960px, title 14px ≤960px)
Subpage Header	.subpage-header 360px, .title, svg 360×360 right	subpage-header.tsx: height 360 desktop, SVG at outer header right 0; .title 70px / top 60px / -10deg, line 1 800, following 300
Shop Detail / Shopping World	#shop-details, .offer-*, …	Pull as needed (partially already own components)

Edit New Block: Add a line in the table, enter legacy keywords, and set status to "done" or refer to PR/issue after implementation.

Quality Check Before Merge

• No unnecessary !important; briefly justify conflicts with Tailwind.
• Markup uses the documented classes (no duplicated inline styles for static values).
• Add to mec-import.md only if user-visible behavior changes (one sentence is often sufficient).
• npx tsc --noEmit in the affected app package green.

See Also

• MEC Import – Data flow and feature overview