/* ============================================================ VS Sport Custom Styles Phase 1: homepage redesign per Figma Loaded via custom.rain layout ============================================================ Iteration 1 scope: - Design tokens (CSS custom properties) - Hide BLOGS & NIEUWS section - Hero collage typography - Button standardization (orange CTA) - Section spacing globals - Categories block heading Stylesheet load order: this file is the LAST stylesheet linked in custom.rain, so plain selectors generally win against style.css / settings.css. !important is reserved for overrides where the theme uses inline style or higher-specificity rules. ============================================================ */ /* === DESIGN TOKENS === Brand colours below are visual approximations from Figma screenshots. Verify exact hex values against Figma styles before locking. */ :root { /* Brand colors (verified against Figma node 25:3411) */ --vs-orange: #EC6729; --vs-orange-hover: #D45620; --vs-text-primary: #1A1A1A; --vs-text-secondary: #6B6B6B; --vs-text-muted: #999999; --vs-bg-white: #FFFFFF; --vs-bg-light: #F7F7F7; --vs-border-light: #E5E5E5; /* Spacing */ --vs-section-pad-y: 80px; --vs-section-pad-y-mobile: 48px; --vs-container-pad-x: 30px; /* Typography */ --vs-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --vs-font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; /* Radii and transitions */ --vs-radius-button: 4px; --vs-radius-card: 8px; --vs-transition: 0.2s ease-out; } /* === HIDE BLOGS & NIEUWS SECTION === Phase 1 stopgap: the homepage blogs block is hidden via CSS because the underlying admin toggle (theme.show_homepage_blogs) is not exposed in this fork's theme settings UI. Phase 2 should either surface that toggle or remove the include from index.rain. Selector intentionally limited to #home-blogs (the non-combined layout's blog wrapper). combine_blogs_and_categories is off in admin settings, so blogs always render here. The bare .container.blogs class is reused elsewhere on the homepage (e.g. the tagcloud) and must not be hidden. */ #home-blogs { display: none !important; } /* === HERO COLLAGE TYPOGRAPHY === Highlights blocks (.banners-home-block) sit on dark imagery; text stays white. Switching from the theme's default ALL-CAPS heavy weight to a softer mixed-case treatment per Figma. */ .banners-home-block .banner-text-block h3 { color: #FFFFFF; font-family: var(--vs-font-heading); font-size: 44px; font-weight: 700; text-transform: none; letter-spacing: -0.3px; line-height: 1.15; } .banners-home-block .banner-text-block span { color: #FFFFFF; font-family: var(--vs-font-body); font-size: 16px; font-weight: 400; opacity: 0.95; margin-bottom: 20px; display: block; } @media (max-width: 768px) { .banners-home-block .banner-text-block h3 { font-size: 32px; } } /* === BUTTON STANDARDIZATION === Orange CTA per Figma. The theme's has no template-aware class (custom.rain emits ), so we cannot scope by template. Instead, enumerate the homepage container scopes to keep these rules from affecting buttons on cart, product, account and other pages. !important is still needed because style.css's .button background is driven by theme settings and uses higher specificity. */ .banners-home .button, #home-products .button, #home-categories .button, .homepage-brands .button { background-color: var(--vs-orange) !important; color: #FFFFFF !important; border: none; padding: 14px 32px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--vs-radius-button); transition: background-color var(--vs-transition); } .banners-home .button:hover, #home-products .button:hover, #home-categories .button:hover, .homepage-brands .button:hover { background-color: var(--vs-orange-hover) !important; } /* === SECTION SPACING GLOBALS === Top-level homepage sections get consistent vertical breathing room. The theme's existing .rowmargin80 utility is uneven across blocks, so we set padding directly on the wrapping section IDs. */ #home-products, .homepage-brands, #home-categories { padding-top: var(--vs-section-pad-y); padding-bottom: var(--vs-section-pad-y); } @media (max-width: 768px) { #home-products, .homepage-brands, #home-categories { padding-top: var(--vs-section-pad-y-mobile); padding-bottom: var(--vs-section-pad-y-mobile); } } /* === CATEGORIES BLOCK HEADING === Pretitle "Sporten" (h4) + title "Waar ben je naar opzoek?" (h3), both rendered from theme.pretitle_categories and theme.title_categories settings. */ #home-categories h4.headline { color: var(--vs-orange); font-family: var(--vs-font-heading); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; } #home-categories h3.headline { color: var(--vs-text-primary); font-family: var(--vs-font-heading); font-size: 36px; font-weight: 700; text-transform: none; margin-bottom: 32px; } @media (max-width: 768px) { #home-categories h3.headline { font-size: 28px; } } /* === SPORT TILES (HORIZONTAL SCROLL) === Transforms the categories grid into a horizontally scrollable row of fixed-width tiles. Native scroll with snap-to-tile, scrollbar visually hidden. Catalog cells are Bootstrap col-* divs in markup; we override their grid behaviour with flex. The tile-h3 selector is scoped under .row.catalog so it doesn't collide with #home-categories h3.headline (which lives in a .col-md-12 wrapper above and would otherwise match a bare [class*="col-"] h3 selector). */ #home-categories .row.catalog { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 24px; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin-left: 0; margin-right: 0; padding-bottom: 16px; scrollbar-width: none; -ms-overflow-style: none; } #home-categories .row.catalog::-webkit-scrollbar { display: none; } #home-categories .row.catalog > [class*="col-"] { flex: 0 0 auto; width: 280px; padding-left: 0; padding-right: 0; scroll-snap-align: start; margin: 0; } #home-categories .row.catalog .cf { display: none !important; } #home-categories .cat-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--vs-radius-card); display: block; } #home-categories .row.catalog [class*="col-"] h3 { font-family: var(--vs-font-heading); font-size: 18px; font-weight: 700; color: var(--vs-text-primary); text-transform: none; margin-top: 16px; margin-bottom: 0; background: none !important; padding: 0; } @media (max-width: 768px) { #home-categories .row.catalog > [class*="col-"] { width: 220px; } #home-categories .row.catalog [class*="col-"] h3 { font-size: 16px; margin-top: 12px; } } /* === POPULAIRE PRODUCTEN (PRODUCT CARDS + CAROUSEL FEEL) === Card structure (from products.rain, type=featured/newest/popular): .product-block-holder -- outer card, has data hooks for JS .product-block -- inner card we treat as visual surface .product-label.highlight-bg -- sale/label badge (top-left) .product-block-image > a > img + .himage -- image + hover overlay .product-block-reviews -- yotpo or local stars a.button.product-block-quick.quickshop -- "Quick shop" CTA h4 > a.title -- product title .product-block-meta-holder > .product-block-meta .product-block-desc .product-block-price > span.price-old + price text The button has Bootstrap .hidden-sm .hidden-xs .hidden-xxs in markup, so hover-reveal here only takes effect on desktop. */ #home-products .nav-tabs { display: none !important; } #home-products h3.headline { font-family: var(--vs-font-heading); font-size: 36px; font-weight: 700; color: var(--vs-text-primary); text-transform: none; margin-bottom: 32px; } /* Card surface */ #home-products .product-block { background-color: var(--vs-bg-white); border: none; border-radius: var(--vs-radius-card); padding: 16px; box-shadow: none; transition: box-shadow var(--vs-transition); } #home-products .product-block-holder:hover .product-block { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } /* Image: float centered against neutral background */ #home-products .product-block-image { background-color: var(--vs-bg-light); border-radius: var(--vs-radius-card); padding: 24px; overflow: hidden; } #home-products .product-block-image img { width: 100%; height: auto; object-fit: contain; display: block; } /* Sale / label badge */ #home-products .product-label, #home-products .product-label.highlight-bg { background-color: var(--vs-orange) !important; color: #FFFFFF !important; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 4px 10px; border-radius: var(--vs-radius-button); } /* Title: regular weight, dark, mixed-case, 2-line clamp */ #home-products .product-block h4 { margin-top: 16px; margin-bottom: 8px; } #home-products .product-block h4 a.title { font-family: var(--vs-font-body); font-size: 15px; font-weight: 500; color: var(--vs-text-primary); text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } /* Price block: bold current price, muted strikethrough */ #home-products .product-block-price { font-family: var(--vs-font-heading); font-size: 18px; font-weight: 700; color: var(--vs-text-primary); } #home-products .product-block-price .price-old { font-weight: 400; color: var(--vs-text-muted); text-decoration: line-through; font-size: 14px; margin-right: 8px; } /* Quick shop button: hidden by default, fades in on card hover. The .hidden-sm/xs/xxs classes in markup keep it off mobile entirely. */ #home-products .product-block-quick { opacity: 0; transition: opacity var(--vs-transition); pointer-events: none; } #home-products .product-block-holder:hover .product-block-quick { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { #home-products h3.headline { font-size: 28px; } #home-products .product-block { padding: 12px; } #home-products .product-block-image { padding: 16px; } #home-products .product-block h4 a.title { font-size: 14px; } #home-products .product-block-price { font-size: 16px; } } /* --- Suppress sub-blocks and polish (iteration 4) --- */ /* Per docs/products_layout_diagnosis.md: Branch 1 (the one rendering on the homepage) emits these optional sub-blocks based on per-product data and global theme settings. They don't appear in the Figma tile design, so we hide them on the homepage only. */ #home-products .product-block-stock, #home-products .product-block-reviews, #home-products .product-block-desc, #home-products .price-strict, #home-products .unit-price, #home-products .quick-order, #home-products .countdown-holder { display: none !important; } /* The theme adds .hidehover to title/price when keep_stock or reviews are on (because it normally swaps them for the description on hover). With the description hidden above, .hidehover would just make the title/price fade on hover with nothing replacing them. Reset to keep them visible. */ #home-products .hidehover { opacity: 1 !important; visibility: visible !important; } /* Heading override: replace theme's "Discover our products" / "Ontdek onze producten" with "Populaire producten" via ::before, since the underlying text comes from a hardcoded translation key in index.rain (`{{ 'Discover our products' | t }}`) that's not exposed via theme settings. */ #home-products h3.headline { text-align: left !important; font-size: 0 !important; margin-bottom: 32px !important; } #home-products h3.headline::before { content: "Populaire producten"; display: block; font-family: var(--vs-font-heading); font-size: 36px; font-weight: 700; color: var(--vs-text-primary); text-transform: none; text-align: left; letter-spacing: -0.3px; line-height: 1.2; } @media (max-width: 768px) { #home-products h3.headline::before { font-size: 28px; } } /* === PRODUCT CARD - FIGMA NODE 25:3411 ALIGNMENT (iteration 5) === Reshapes the card to match Figma's spec: - No card chrome (transparent surface, no padding/border-radius) - Image area is 1:1 with #FAFAFA bg, image cover, no padding - "Bestellen" button overlaid at the bottom of the image area - Title 16px Montserrat 600, price 14px Montserrat regular The button lives as a DOM sibling of the image (not a child), so we use CSS Grid to stack image, label, and button into the same grid row. The label aligns top-left, the button stretches and aligns bottom. Iteration 3's hover-reveal (opacity 0 → 1) is preserved unchanged. */ #home-products .product-block { background: transparent; padding: 0; border-radius: 0; box-shadow: none; display: grid; grid-template-rows: auto auto auto; row-gap: 8px; } /* Iteration 4's hover applied a shadow to the whole card. With no card surface, the shadow has nothing to lift — move it onto the image area. */ #home-products .product-block-holder:hover .product-block { box-shadow: none; } #home-products .product-block-holder:hover .product-block-image { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } /* Image area: 1:1, neutral bg, image fills via cover. Override iteration 3's contain + 24px padding. */ #home-products .product-block-image { grid-row: 1; grid-column: 1; aspect-ratio: 1 / 1; width: 100%; background-color: #FAFAFA; border-radius: var(--vs-radius-card); overflow: hidden; padding: 0; position: relative; margin-bottom: 4px; transition: box-shadow var(--vs-transition); } #home-products .product-block-image > a { display: block; width: 100%; height: 100%; } #home-products .product-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Sale label: stack into image cell, top-left, above image and button */ #home-products .product-label, #home-products .product-label.highlight-bg { grid-row: 1; grid-column: 1; align-self: start; justify-self: start; margin: 12px; z-index: 2; position: relative; } /* Button: pill, overlaid at bottom of image. Reuses .product-block-quick's iteration 3 hover-reveal opacity. Pill styling overrides iteration 1's .button rule (4px radius, uppercase, 14/32 padding) without !important because this rule has equal specificity and comes later in source. */ #home-products .product-block-quick { grid-row: 1; grid-column: 1; align-self: end; justify-self: stretch; margin: 0 12px 12px 12px; z-index: 2; background-color: var(--vs-orange); color: #FFFFFF; border: none; border-radius: 1000px; padding: 10px 16px; font-family: var(--vs-font-heading); font-size: 0; /* hides theme's "Quick shop" text node */ text-transform: none; letter-spacing: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } /* Restore icon size (font-size: 0 on parent collapsed it). Theme uses theme.cart_icon — could be shopping-bag, shopping-cart, etc. If admin sets it to "shopping-bag", visual matches Figma exactly. */ #home-products .product-block-quick .fa { font-size: 16px; } /* Inject "Bestellen" label. Note: ::after uses the heading font, not FA. */ #home-products .product-block-quick::after { content: "Bestellen"; font-family: var(--vs-font-heading); font-size: 14px; font-weight: 600; } /* Title: 16px Montserrat SemiBold. Override iteration 3 (15px, weight 500, body font) by selector specificity match + later source order. */ #home-products .product-block > h4 { grid-row: 2; grid-column: 1; margin-top: 4px; margin-bottom: 0; } #home-products .product-block > h4 a.title { font-family: var(--vs-font-heading); font-size: 16px; font-weight: 600; /* line-clamp from iteration 3 still applies */ } /* Price: 14px Montserrat regular. Override iteration 3's bold-18px. */ #home-products .product-block-meta-holder { grid-row: 3; grid-column: 1; } #home-products .product-block-price { font-family: var(--vs-font-heading); font-size: 14px; font-weight: 400; color: var(--vs-text-primary); } /* Strikethrough old price stays muted (iteration 3 rule still applies, but tighten font size for the new smaller price baseline) */ #home-products .product-block-price .price-old { font-size: 12px; } @media (max-width: 768px) { #home-products .product-block > h4 a.title { font-size: 14px; } #home-products .product-block-price { font-size: 13px; } #home-products .product-block-quick::after { font-size: 13px; } } /* --- Iteration 6 fixes (post-preview review) --- 1. Strip any gray borders the theme's style.css applies to the card. 2. Pin the button to explicit width (justify-self:stretch was losing against an unknown theme rule, leaving the button right-aligned). 3. More vertical breathing room between rows so the price doesn't crowd the card below it on hover. */ #home-products .product-block, #home-products .product-block-holder, #home-products .row.productsrow > [class*="col-"] { border: none; } #home-products .product-block-quick { width: calc(100% - 24px); max-width: calc(100% - 24px); margin: 0 12px 12px 12px; box-sizing: border-box; float: none; } #home-products .row.productsrow > [class*="col-"] { margin-bottom: 40px; } @media (max-width: 768px) { #home-products .row.productsrow > [class*="col-"] { margin-bottom: 24px; } } /* --- Iteration 7: cascade override (theme is winning) --- The iteration 6 defenses weren't enough. Most likely: - Theme's style.css has !important or higher-specificity border rules on .product-block / .product-block-holder. - Theme positions .product-block-quick absolutely (the original Quick Shop CTA was probably an absolute-positioned overlay), so my grid placement and width calc resolve against the wrong containing block. Forcing with !important to defeat. This is blunt; if a future iteration reveals the actual theme rule we can swap !important for higher- specificity selectors. */ /* Strip ALL borders/outlines/shadows from the card chrome */ #home-products .product-block, #home-products .product-block-holder { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } /* Force grid display on .product-block — defeat any theme override */ #home-products .product-block { display: grid !important; grid-template-rows: auto auto auto !important; row-gap: 8px !important; padding: 0 !important; } /* Pin the button as a grid item, kill any absolute positioning */ #home-products .product-block-quick { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; grid-row: 1 !important; grid-column: 1 !important; align-self: end !important; justify-self: stretch !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; margin: 0 12px 12px 12px !important; box-sizing: border-box !important; } /* Re-establish hover shadow on image only (in case the !important box-shadow:none above swept up too much) */ #home-products .product-block-holder:hover .product-block-image { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; } /* --- Iteration 8: lock meta layout on hover --- The theme's :hover on .product-block-holder is pushing the title + meta block downward (likely transform: translateY or padding-top) to make room for the original Quick Shop button slot between title and price. With our button overlaid on the image, that downward shift is no longer needed; lock the meta area in place. */ #home-products .product-block-holder:hover .product-block-meta-holder, #home-products .product-block-holder:hover .product-block-meta, #home-products .product-block-holder:hover .product-block-price { transform: none !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: static !important; top: auto !important; } /* Title keeps its 4px top gap from iteration 5 — explicit so the lock above doesn't collapse the spacing between image and title */ #home-products .product-block-holder:hover .product-block > h4 { transform: none !important; margin-top: 4px !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: static !important; top: auto !important; }