Template Grooss (MEC "beige") - Legacy CSS Checklist

Pixel-perfect workflow for the public Template Grooss website (apps/center-website/components/templates/mec-template-grooss). The source is the live MEC template (mec-templates/site_templates/templates/template_grooss/*.tpl + mec-templates/sites/assets/css/template_grooss.css and template_grooss_teaser.css).

Goal: Visually identical to the original (order, colors, dimensions, fonts, hover/active states). Technically clean: one rule per block in apps/center-website/components/templates/mec-template-grooss/template-grooss-home.css under [data-template="mec-template-grooss"], clear React components, no !important cascades except where the original uses them.

Approach per Block

1. Read Original: What selectors and values are set in template_grooss.css / template_grooss_teaser.css? Which areas will be overwritten later?
2. Effective End State: One line per token (color, spacing, font, size, z-index) – the value after merging the layers.
3. One Clean Rule: Under [data-template="mec-template-grooss"] in the template's template-grooss-home.css. Own name classes with prefix mec-grooss-… for new components (e.g., .mec-grooss-angebote-track).
4. React Markup: Adopt legacy classes from the markup if the style rule requires them (e.g., .home-infobox-top .box, .box-title, .home-infobox-angebote-content .item-price). Otherwise, own mec-grooss-… classes.
5. Track Status: Update the table row or add a new row.

Status per UI Block

Block	Legacy Selectors / File	Status
Hero Slider (.home-slider)	template_grooss_teaser.css .home-slider { height: 680px }, .home-slider-item { height: 680 }, .home-slider-title { font-size: 100; "Blog" }, .home-slider-text { font-size: 24 }, Slick-Dots bottom right (right: 60; bottom: 25; white 20×20 border 3 #fff)	deliberately reused from D – Center-specific style classes per slide (.ostern-b-tuete, .weihnachten, …) cannot be reproduced; Template D provides a generic Hero component for that
First Top Row (.home-infobox-top)	template_grooss.css .home-infobox-top .box { width: 50%; padding-bottom: 25%; float: left; background: #fff }, img { width: 100% }	done – InfoTilesGrooss, original classes, aspect ratio 2:1
Offers Slider (.home-infobox-angebote)	template_grooss.css .home-infobox-angebote-title { top: 95; left: 60; font-size: 52; "Blog"; width: 140 }, -link { bottom: 35; left: 60; font-size: 24; #EF4741 }, .item-price { width 122; height 122; rounded; #EF4741 }, .item-price.offer-green { #A4C556 }, .item-image img { max 320×320 }, Slick-Dots centered at the bottom	done – MecGroossAngeboteSlider (Embla loop, dots react to selectedScrollSnap); item markup 1:1 (price circle, image block, text block)
Second Top Row (.home-infobox-top Index 2)	same rules as row 1	done – rendered through the same Box markup
Bottom Row (.home-infobox-bottom)	template_grooss.css .home-infobox-bottom .box { width: 25%; padding-bottom: 25%; cursor: pointer; float: left }, p { position: absolute; bottom: 0; text-align: center; width: 100%; font-size: 24 }	done – Box markup with variant="bottom", centered subtitle without title (original: only <p> + <img>)
.box-title (Top Box Title)	template_grooss.css .box-title { position: absolute; font-size: 68px; font-family: "Blog"; bottom: 60; left: 60 }	done – statically positioned, var(--font-mec-blog)
Header (light header, sticky, white logo bar + transparent nav)	template_grooss.css Lines 148–207 (header { position: fixed; max-width: 1440; height 134/96/60 }, #logo-container { display: table }), Lines 669–771 (nav { height: 170; absolute }, nav:hover { rgba(0,0,0,.5) }, li.current/active/a:hover { border-bottom: 1px #fff }, nav.subpage { display: none }, @media max-1024 { nav { display: none }})	done – sticky header, logo bar, transparent nav 134/96/60 px adopted; active/current highlight via usePathname (1:1 original look with white border-bottom). Deliberate deviation: no dark submenu stripe on subpages (original nav.subpage), search field in nav (#search-row) and 5 hamburger variants omitted – instead, a modern hamburger + mobile menu (see deviation table).
Footer (light footer with navigation + description + logo + social)	template_grooss.css Lines 776–882, 952–986 (footer { background: #E5E5E5; padding: 55 0 205 0 }, #footer-row-1 { width: 320; border-right: 1 #808080 }, #footer-row-2 { color #808080; border-right; uppercase title }, #footer-row-3 { width: 270; logo grayscale; social round 40×40 #808080 }, mobile <960: stacking, padding 12 0 18)	done – original IDs (#footer-row-1/2/3), dimensions 320/flex/270, divider lines #808080, logo box 170×80 with border-bottom, round social buttons. Padding-bottom reduced to 55 px (original 205 px for absolute go-to-top bubble; not relevant, as no go-to-top anymore).
Footer Shop Logo Strip (.shop-slider, max 35 logos, grayscale → hover color)	template_grooss.css Lines 3827–3911 (.shop-slider { padding: 0 75; bg #fff; }, .shop-slider-item { height: 150 }, .shop-slider-item img { max 120×120 }) + Slick loop from template_grooss.js (6/3/2 visible, autoplay 2 s)	done – _mec-shared/footer-shop-logo-slider with classPrefix="grooss", max 35 logos (like original if index == 35 break), padding: 0 75/50/30 px and flex 1/6 → 1/3 → 1/2 steps (1:1 slick behavior). Embla loop + autoplay 2 s, hover pause; no visible arrows (Slick default), padding provides lateral space.
Responsive Reductions	@media (961-1200): title 40+49, @media (max-960): bottom 50% 50%, top 100% 50%, @media (max-670): font-size 14/24/16, item-price 62×62, @media (max-480): item-image top 45	done – steps 1200 / 1024 / 960 / 670 / 480 px implemented 1:1

Deliberate Deviations from the Original

Element	Status	Justification
Hero Slider per-Slide Styles (.ostern-b-tuete, .weihnachten, .facebook, …)	not adopted	These are editorially maintained CSS snippets per slide; in Cockpit, slides come from the dashboard – pixel-perfect per-slide styling cannot be replicated there without the full style catalog.
Slick Slider → Embla	technically cleaner	Slick requires jQuery; Embla is react-native and provides the same loop/autoplay function. Class names .slick-dots, .slick-active are maintained for appearance.
Original Tailwind Offers Block from the first version	removed	Additionally lay between the Hero and info boxes. Original has the slider within the first top box; this is now implemented 1:1.
Bottom Box Cursor pointer always	like original	Even if no link is set – behavior like in the original retained, as clickable targets via Smarty helper always exist there.
Header Search Field (#search-row in the nav)	omitted	The global search UX is handled in Cockpit on a dedicated search page, no inline search in the header. Original style rules continue to exist (Lines 233–288), but will no longer be referenced.
5 different hamburger icons (#sticky-nav-icon, #subpage-nav-icon, #mobile-nav-icon, …)	one component	Original switches between three hamburger DOM nodes depending on the page and scroll. Modern pattern: one hamburger button with lucide-react icon, identical mobile off-canvas menu everywhere.
nav.subpage { background: rgba(0,0,0,.5) }	omitted	On subpages, the nav remains transparent (hover still makes it dark). This avoids an optical break between the hero slider page and, for example, the shop detail; the active navigation is instead clearly marked by current/active border-bottom.
Footer Shop Slider: no Slick arrows	deliberate	Original Slick renders small left/right chevron arrows. Embla loop runs here auto + hover-pause; the padding 0 75 px retains the appearance of the original (lateral "columns").
Footer Bottom Padding 55 px instead of 205 px	deliberate	In the original, bottom padding makes room for an absolute "goto-top" bubble (#goto-top { right: 40; top: 45 }). The bubble is not reproduced in Cockpit; therefore, no 150 px dead space under the footer.

Quality Check before Merge

• Visual comparison of affected blocks against template_grooss.css and live site completed.
• No new !important without justification (original uses !important in few places, which were deliberately adopted).
• Markup uses documented classes/IDs (no duplicated inline styles for static values).
• This file updated (status/new row).
• npx tsc --noEmit in apps/center-website package is green.

See also

• Template A Legacy CSS Checklist – sister checklist, same workflow
• Template D Legacy CSS Checklist
• Shared MEC Components (_mec-shared/)