/** * KS Category Showcase - Frontend Styles * * @package KS_Category_Showcase */ /* Base showcase reset */ .kscs-showcase { box-sizing: border-box; width: 100%; } .kscs-showcase *, .kscs-showcase *::before, .kscs-showcase *::after { box-sizing: border-box; } .kscs-showcase a { text-decoration: none; } /* Section header */ .kscs-section-header { text-align: center; margin-bottom: 30px; } .kscs-section-title { font-size: 28px; font-weight: 700; color: #333; margin: 0 0 8px 0; padding: 0; } .kscs-section-subtitle { font-size: 15px; color: #777; margin: 0; padding: 0; } /* Grid */ .kscs-grid { display: grid; list-style: none; margin: 0; padding: 0; } /* Item base */ .kscs-item { position: relative; } .kscs-item-link { display: flex; flex-direction: column; align-items: center; text-decoration: none !important; transition: all 0.3s ease; height: 100%; } .kscs-item-link:focus { outline: 2px solid #0073aa; outline-offset: 2px; } /* Image */ .kscs-cat-image { display: block; max-width: 100%; height: auto; object-fit: contain; } .kscs-placeholder { display: block; } /* Content */ .kscs-item-content { display: flex; flex-direction: column; align-items: center; } .kscs-cat-name { display: block; text-align: center; /* break-word split long DK words mid-letter ("Containerkr og"). overflow-wrap only breaks as a last resort and keeps whole words intact; hyphens:auto adds a proper hyphen when a word genuinely must break. Requires lang="da" on . */ overflow-wrap: break-word; word-break: normal; hyphens: auto; } .kscs-cat-count { display: block; text-align: center; } /* Hover Effects */ .kscs-hover-scale .kscs-item-link:hover { transform: scale(1.05); } .kscs-hover-lift .kscs-item-link:hover { transform: translateY(-5px); } .kscs-hover-glow .kscs-item-link:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .kscs-hover-border-color .kscs-item-link:hover { border-color: #e74c3c; } .kscs-hover-fade .kscs-item-link:hover { opacity: 0.85; } /* Shadow presets */ .kscs-shadow-small .kscs-item-link { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .kscs-shadow-medium .kscs-item-link { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .kscs-shadow-large .kscs-item-link { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .kscs-shadow-hover-small .kscs-item-link:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .kscs-shadow-hover-medium .kscs-item-link:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .kscs-shadow-hover-large .kscs-item-link:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } /* Grid overlay layout image transition */ .kscs-layout-grid .kscs-cat-image { transition: transform 0.3s ease; } .kscs-layout-grid .kscs-item-link:hover .kscs-cat-image { transform: scale(1.1); } /* Banner layout responsiveness */ @media (max-width: 575px) { .kscs-layout-banner .kscs-banner-wrap { flex-direction: column; text-align: center; } .kscs-layout-banner .kscs-banner-content { align-items: center; } /* Slightly smaller card names on phones so long DK words ("Containerkrog", "Kædesurring") fit on one line instead of wrapping to two. !important is needed because the per-section inline