/* ─── SHOP ENTRY SECTION (index.html) ─────────────────────────────────────── */
/* This is the gateway section on the homepage that links to shop.html */
.shop-entry-section {
padding: 120px 8%;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.shop-entry-inner {
text-align: center;
}
.shop-entry-eyebrow {
display: inline-block;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--accent);
opacity: 0.9;
margin-bottom: 24px;
}
.shop-entry-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.05em;
color: var(--text-primary);
margin-bottom: 24px;
line-height: 1;
}
.shop-entry-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 80px;
line-height: 1.8;
font-weight: 300;
}
/* Category Cards Grid */
.shop-entry-categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 960px;
margin: 0 auto 60px;
}
.shop-cat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
text-decoration: none;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
min-height: 200px;
}
.shop-cat-card::after {
content: '';
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.25; /* Always visible but subtle */
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 0;
filter: brightness(0.5) saturate(0.8);
transform: scale(1.05);
}
.shop-cat-card:nth-child(1):hover::after { background-image: url('../images/cat_tracklights.webp'); }
.shop-cat-card:nth-child(2):hover::after { background-image: url('../images/cat_downlights.webp'); }
.shop-cat-card:nth-child(3):hover::after { background-image: url('../images/cat_spots.webp'); }
.shop-cat-card:nth-child(4):hover::after { background-image: url('../images/cat_outdoor.webp'); }
.shop-cat-card:nth-child(5):hover::after { background-image: url('../images/cat_profiles.webp'); }
.shop-cat-card:nth-child(6):hover::after { background-image: url('../images/cat_studio_abby.webp'); }
.shop-cat-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.shop-cat-card:hover::after {
opacity: 0.8;
filter: brightness(0.7) saturate(1.1);
transform: scale(1);
}
.shop-cat-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.5s ease;
z-index: 1;
}
.shop-cat-icon svg {
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.shop-cat-card:hover .shop-cat-icon svg {
transform: scale(1.1);
filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
}
.shop-cat-name {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
transition: all 0.4s ease;
z-index: 1;
}
.shop-cat-card:hover .shop-cat-name {
transform: translateY(-2px);
letter-spacing: 0.02em;
}
.shop-cat-count {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
z-index: 1;
}
.shop-cat-card:hover .shop-cat-count {
color: #fff;
opacity: 0.9;
}
/* CTA Button */
.shop-entry-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-primary);
font-family: inherit;
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.02em;
border-radius: 100px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
}
.shop-entry-cta:hover {
background: var(--text-primary);
color: #000;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}
.shop-entry-cta svg {
transition: transform 0.3s ease;
}
.shop-entry-cta:hover svg {
transform: translateX(4px);
}
/* Responsive */
@media (max-width: 768px) {
.shop-entry-categories {
grid-template-columns: repeat(2, 1fr);
}
.shop-entry-section {
padding: 60px 5%;
}
}
@media (max-width: 480px) {
.shop-entry-categories {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.shop-cat-card {
padding: 20px 12px;
}
.shop-cat-icon {
width: 56px;
height: 56px;
}
.shop-cat-name { font-size: 0.85rem; }
.shop-cat-count { font-size: 0.68rem; }
}
/ * L i g h t M o d e O v e r r i d e s f o r E c o m m e r c e S e c t i o n * /
. l i g h t - m o d e . s h o p - c a t - c a r d {
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 5 ) ;
b o r d e r : 1 p x s o l i d r g b a ( 4 5 , 3 6 , 3 0 , 0 . 1 ) ;
}
. l i g h t - m o d e . s h o p - c a t - c a r d : h o v e r {
b o r d e r - c o l o r : r g b a ( 1 3 9 , 6 9 , 1 9 , 0 . 4 ) ;
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 ) ;
b o x - s h a d o w : 0 2 0 p x 4 0 p x r g b a ( 4 5 , 3 6 , 3 0 , 0 . 1 ) ;
}
. l i g h t - m o d e . s h o p - c a t - n a m e {
c o l o r : # 2 d 2 4 1 e ;
t e x t - s h a d o w : n o n e ;
}
. l i g h t - m o d e . s h o p - c a t - c o u n t {
c o l o r : # 5 f 4 b 3 2 ;
}
. l i g h t - m o d e . s h o p - c a t - c a r d : h o v e r . s h o p - c a t - c o u n t {
c o l o r : # 2 d 2 4 1 e ;
}
. l i g h t - m o d e . s h o p - e n t r y - c t a {
b o r d e r - c o l o r : r g b a ( 4 5 , 3 6 , 3 0 , 0 . 2 ) ;
c o l o r : # 2 d 2 4 1 e ;
}
. l i g h t - m o d e . s h o p - e n t r y - c t a : h o v e r {
b a c k g r o u n d : # 2 d 2 4 1 e ;
c o l o r : # f c f a f 7 ;
}
. l i g h t - m o d e . s h o p - c a t - c a r d : : a f t e r {
f i l t e r : b r i g h t n e s s ( 1 . 1 ) c o n t r a s t ( 0 . 9 ) ;
o p a c i t y : 0 . 1 5 ;
}
. l i g h t - m o d e . s h o p - c a t - c a r d : h o v e r : : a f t e r {
o p a c i t y : 0 . 4 ;
}