/** Shopify CDN: Minification failed Line 276:46 Unexpected "}" **/ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600;700;900&family=Playfair+Display:ital,wght@1,700&display=swap'); /* ============================================ STILL KING CULTURE Shopify Theme CSS v1.0 Brand: stillkingculture.com ============================================ */ :root { --skc-black: #0A0A0A; --skc-gold: #C9A84C; --skc-gold-2: #D4AF37; --skc-white: #F5F5F0; --skc-purple: #1A0A2E; --skc-red: #8B1A1A; --skc-gray: #888888; --skc-gray-2: #1E1E1E; --skc-gray-3: #111111; --skc-font-display: 'Bebas Neue', sans-serif; --skc-font-body: 'Montserrat', sans-serif; --skc-font-accent: 'Playfair Display', serif; --skc-page-width: 1200px; --skc-section-gap: 80px; --skc-radius: 8px; --skc-radius-lg: 14px; --skc-transition: 0.25s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.skc-body { background: var(--skc-black); color: var(--skc-white); font-family: var(--skc-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--skc-gold); text-decoration: none; transition: color var(--skc-transition); } a:hover { color: var(--skc-gold-2); } button { cursor: pointer; font-family: var(--skc-font-body); } .skc-container { max-width: var(--skc-page-width); margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .skc-container { padding: 0 40px; } } .skc-section { padding: var(--skc-section-gap) 0; } .skc-section-header { text-align: center; margin-bottom: 48px; } .skc-eyebrow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--skc-gold); margin-bottom: 12px; } .skc-section-title { font-family: var(--skc-font-display); font-size: 48px; letter-spacing: 0.08em; color: var(--skc-white); line-height: 1; margin-bottom: 12px; } .skc-section-title-bar { width: 48px; height: 3px; background: var(--skc-gold); margin: 12px auto 0; } .skc-section-cta { text-align: center; margin-top: 40px; } .skc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--skc-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 28px; border-radius: var(--skc-radius); border: 2px solid transparent; transition: all var(--skc-transition); cursor: pointer; text-decoration: none; white-space: nowrap; } .skc-btn--primary { background: var(--skc-gold); color: var(--skc-black); border-color: var(--skc-gold); } .skc-btn--primary:hover { background: var(--skc-gold-2); border-color: var(--skc-gold-2); color: var(--skc-black); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.35); } .skc-btn--outline { background: transparent; color: var(--skc-gold); border-color: var(--skc-gold); } .skc-btn--outline:hover { background: var(--skc-gold); color: var(--skc-black); transform: translateY(-2px); } .skc-btn--product { background: var(--skc-gold); color: var(--skc-black); border: 2px solid var(--skc-gold); width: 100%; margin-top: 12px; padding: 12px; font-size: 10px; letter-spacing: 0.18em; border-radius: var(--skc-radius); } .skc-btn--product:hover { background: var(--skc-gold-2); border-color: var(--skc-gold-2); } .skc-btn--product:disabled { background: var(--skc-gray-2); color: var(--skc-gray); border-color: var(--skc-gray-2); cursor: not-allowed; } .skc-btn--full { width: 100%; } .skc-checkout-btn { background: var(--skc-gold); color: var(--skc-black); border-color: var(--skc-gold); font-size: 13px; padding: 16px; } .skc-checkout-btn:hover { background: var(--skc-gold-2); } .skc-announcement { background: var(--skc-gold); padding: 9px 24px; overflow: hidden; } .skc-announcement__inner { display: flex; align-items: center; justify-content: center; gap: 12px; } .skc-announcement__text { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--skc-black); text-align: center; } .skc-header { position: sticky; top: 0; z-index: 100; background: rgba(10,10,10,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(201,168,76,0.15); } .skc-header__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 24px; } .skc-header__logo-link { display: flex; align-items: center; gap: 10px; } .skc-header__brand-name { font-family: var(--skc-font-display); font-size: 22px; letter-spacing: 0.12em; color: var(--skc-white); line-height: 1; } .skc-header__brand-name span { color: var(--skc-gold); display: block; font-size: 13px; letter-spacing: 0.2em; } .skc-header__nav { display: none; } @media (min-width: 900px) { .skc-header__nav { display: flex; align-items: center; } } .skc-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; } .skc-nav__link { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--skc-white); padding: 8px 14px; border-radius: 6px; transition: all var(--skc-transition); display: block; } .skc-nav__link:hover { color: var(--skc-gold); } .skc-nav__dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: var(--skc-gray-3); border: 1px solid var(--skc-gray-2); border-radius: var(--skc-radius); min-width: 180px; padding: 8px 0; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: all var(--skc-transition); z-index: 200; list-style: none; } .skc-nav__item--has-dropdown:hover .skc-nav__dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); } .skc-header__icons { display: flex; align-items: center; gap: 4px; } .skc-header__icon-btn { background: none; border: none; color: var(--skc-white); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all var(--skc-transition); position: relative; } .skc-header__icon-btn:hover { color: var(--skc-gold); background: rgba(201,168,76,0.1); } .skc-cart-count { position: absolute; top: 4px; right: 4px; background: var(--skc-gold); color: var(--skc-black); font-size: 9px; font-weight: 800; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .skc-hamburger { display: block; width: 20px; height: 2px; background: var(--skc-white); position: relative; transition: all var(--skc-transition); } .skc-hamburger::before,.skc-hamburger::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--skc-white); transition: all var(--skc-transition); } .skc-hamburger::before { top: -6px; } .skc-hamburger::after { top: 6px; } .skc-mobile-menu { background: var(--skc-gray-3); border-top: 1px solid var(--skc-gray-2); max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .skc-mobile-menu.open { max-height: 600px; } .skc-mobile-menu__inner { padding: 24px; } .skc-mobile-nav__link { display: block; padding: 14px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--skc-white); } .skc-mobile-nav__link:hover { color: var(--skc-gold); } .skc-search-bar { background: var(--skc-gray-3); border-top: 1px solid var(--skc-gray-2); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .skc-search-bar.open { max-height: 80px; } .skc-search-bar__form { display: flex; align-items: center; max-width: 600px; margin: 0 auto; padding: 12px 24px; gap: 8px; } .skc-search-bar__input { flex: 1; background: var(--skc-gray-2); border: 1px solid rgba(201,168,76,0.3); border-radius: var(--skc-radius); color: var(--skc-white); padding: 10px 16px; font-size: 14px; font-family: var(--skc-font-body); outline: none; } .skc-search-bar__input:focus { border-color: var(--skc-gold); } .skc-hero { position: relative; background: var(--skc-black); background-size: cover; background-position: center; display: flex; align-items: center; overflow: hidden; } .skc-hero__overlay { position: absolute; inset: 0; z-index: 1; } .skc-hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .skc-particle { position: absolute; opacity: 0; animation: skc-particle-float 6s ease-in-out infinite; } .skc-particle--1 { top: 10%; left: 5%; animation-delay: 0s; animation-duration: 7s; } .skc-particle--2 { top: 20%; left: 15%; animation-delay: 1s; animation-duration: 8s; } .skc-particle--3 { top: 5%; left: 35%; animation-delay: 2s; animation-duration: 6s; } .skc-particle--4 { top: 15%; left: 55%; animation-delay: 0.5s; animation-duration: 9s; } .skc-particle--5 { top: 8%; left: 70%; animation-delay: 1.5s; animation-duration: 7s; } .skc-particle--6 { top: 25%; left: 85%; animation-delay: 3s; animation-duration: 8s; } .skc-particle--7 { top: 40%; left: 90%; animation-delay: 2.5s; animation-duration: 6s; } .skc-particle--8 { top: 60%; left: 80%; animation-delay: 0.8s; animation-duration: 9s; } .skc-particle--9 { top: 75%; left: 65%; animation-delay: 1.8s; animation-duration: 7s; } .skc-particle--10 { top: 80%; left: 40%; animation-delay: 3.5s; animation-duration: 8s; } .skc-particle--11 { top: 70%; left: 20%; animation-delay: 2.2s; animation-duration: 6s; } .skc-particle--12 { top: 50%; left: 8%; animation-delay: 4s; animation-duration: 9s; } @keyframes skc-particle-float { 0% { opacity: 0; transform: translateY(20px) scale(0.8); } 30% { opacity: 0.3; } 70% { opacity: 0.15; } 100% { opacity: 0; transform: translateY(-40px) scale(1.1); } } .skc-hero__content { position: relative; z-index: 2; text-align: center; width: 100%; padding: 80px 24px; } .skc-hero__crown { display: flex; justify-content: center; margin-bottom: 24px; } .skc-crown-animate .skc-crown-svg { animation: skc-crown-shimmer 3s ease-in-out infinite; } @keyframes skc-crown-shimmer { 0%,100% { filter: drop-shadow(0 0 8px rgba(201,168,76,0.4)); } 50% { filter: drop-shadow(0 0 24px rgba(201,168,76,0.8)); } } .skc-hero__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--skc-gold); margin-bottom: 16px; } .skc-hero__heading { font-family: var(--skc-font-display); font-size: clamp(60px, 10vw, 110px); letter-spacing: 0.06em; color: var(--skc-white); line-height: 1; margin-bottom: 16px; } .skc-hero__subheading { font-family: var(--skc-font-accent); font-style: italic; font-size: clamp(16px, 2vw, 22px); color: rgba(245,245,240,0.7); margin-bottom: 36px; } .skc-hero__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .skc-scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(201,168,76,0.8), transparent); margin: 0 auto; animation: skc-scroll-pulse 2s ease-in-out infinite; } @keyframes skc-scroll-pulse { 0%,100% { opacity: 0.4; height: 40px; } 50% { opacity: 1; height: 56px; } } .skc-marquee { background: var(--skc-gold); overflow: hidden; padding: 10px 0; } .skc-marquee__track { display: flex; } .skc-marquee__content { display: flex; align-items: center; gap: 20px; white-space: nowrap; animation: skc-marquee 24s linear infinite; flex-shrink: 0; } .skc-marquee__text { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--skc-black); } @keyframes skc-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .skc-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (min-width: 768px) { .skc-product-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; } } .skc-product-card { background: var(--skc-gray-3); border: 1px solid var(--skc-gray-2); border-radius: var(--skc-radius-lg); overflow: hidden; transition: transform var(--skc-transition), box-shadow var(--skc-transition); } .skc-product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.3); } .skc-product-card__image-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--skc-gray-2); } .skc-product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .skc-product-card__img--secondary { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } .skc-product-card:hover .skc-product-card__img--primary { transform: scale(1.04); } .skc-product-card:hover .skc-product-card__img--secondary { opacity: 1; } .skc-product-card__badge { position: absolute; top: 12px; left: 12px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } .skc-product-card__badge--sale { background: var(--skc-gold); color: var(--skc-black); } .skc-product-card__badge--sold-out { background: var(--skc-gray-2); color: var(--skc-gray); } .skc-product-card__info { padding: 16px; } .skc-product-card__vendor { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--skc-gold); margin-bottom: 4px; } .skc-product-card__title { font-size: 14px; font-weight: 700; margin-bottom: 8px; } .skc-product-card__title-link { color: var(--skc-white); } .skc-product-card__title-link:hover { color: var(--skc-gold); } .skc-price { font-size: 15px; font-weight: 700; color: var(--skc-white); } .skc-price--sale { color: var(--skc-gold); } .skc-price--compare { font-size: 12px; font-weight: 400; color: var(--skc-gray); } .skc-brand-story__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 768px) { .skc-brand-story__grid { grid-template-columns: 1fr 1fr; } } .skc-brand-story__img { width: 100%; border-radius: var(--skc-radius-lg); aspect-ratio: 4/5; object-fit: cover; } .skc-brand-story__placeholder { aspect-ratio: 4/5; background: var(--skc-gray-3); border: 1px solid var(--skc-gray-2); border-radius: var(--skc-radius-lg); display: flex; align-items: center; justify-content: center; } .skc-brand-story__body { color: var(--skc-gray); margin: 16px 0 24px; line-height: 1.8; } .skc-brand-story__stats { display: flex; gap: 32px; margin-top: 28px; } .skc-stat__value { font-family: var(--skc-font-display); font-size: 32px; letter-spacing: 0.06em; color: var(--skc-gold); } .skc-stat__label { font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--skc-gray); margin-top: 2px; } .skc-testimonials { background: var(--skc-gray-3); } .skc-testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .skc-testimonials__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .skc-testimonials__grid { grid-template-columns: repeat(3, 1fr); } } .skc-testimonial-card { background: var(--skc-black); border: 1px solid var(--skc-gray-2); border-radius: var(--skc-radius-lg); padding: 28px; transition: box-shadow var(--skc-transition); } .skc-testimonial-card:hover { box-shadow: 0 8px 32px rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.2); } .skc-testimonial-card__quote { font-size: 14px; color: var(--skc-white); line-height: 1.65; margin-bottom: 16px; font-style: italic; } .skc-testimonial-card__stars { color: var(--skc-gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; } .skc-testimonial-card__name { font-size: 12px; font-weight: 700; color: var(--skc-white); display: block; } .skc-testimonial-card__location { font-size: 11px; color: var(--skc-gray); display: block; margin-top: 2px; } .skc-collection-banner { position: relative; min-height: 280px; display: flex; align-items: center; overflow: hidden; } .skc-collection-banner__overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.7); } .skc-collection-banner__content { position: relative; z-index: 1; padding: 48px 24px; text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .skc-collection-banner__title { font-family: var(--skc-font-display); font-size: 52px; letter-spacing: 0.08em; color: var(--skc-white); } .skc-collection-banner__desc { color: var(--skc-gray); max-width: 600px; } .skc-collection-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; } .skc-collection-count { font-size: 12px; color: var(--skc-gray); } .skc-sort-select { background: var(--skc-gray-3); border: 1px solid var(--skc-gray-2); color: var(--skc-white); padding: 8px 14px; border-radius: var(--skc-radius); font-size: 12px; font-family: var(--skc-font-body); cursor: pointer; outline: none; } .skc-sort-select:focus { border-color: var(--skc-gold); } .skc-product__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; } @media (min-width: 768px) { .skc-product__grid { grid-template-columns: 1fr 1fr; } } .skc-product__main-image { border-radius: var(--skc-radius-lg); overflow: hidden; } .skc-product__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .skc-product__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .skc-product__thumb { width: 70px; height: 70px; border-radius: var(--skc-radius); overflow: hidden; border: 2px solid var(--skc-gray-2); cursor: pointer; background: none; padding: 0; transition: border-color var(--skc-transition); } .skc-product__thumb:hover,.skc-product__thumb.active { border-color: var(--skc-gold); } .skc-product__thumb img { width: 100%; height: 100%; object-fit: cover; } .skc-product__vendor { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--skc-gold); margin-bottom: 8px; } .skc-product__title { font-family: var(--skc-font-display); font-size: 36px; letter-spacing: 0.06em; margin-bottom: 16px; } .skc-product__option { margin-bottom: 20px; } .skc-product__option-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--skc-gray); display: block; margin-bottom: 10px; } .skc-product__option-btns { display: flex; gap: 8px; flex-wrap: wrap; } .skc-option-btn { background: var(--skc-gray-3); border: 1px solid var(--skc-gray-2); color: var(--skc-white); font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: var(--skc-radius); cursor: pointer; transition: all var(--skc-transition); } .skc-option-btn:hover,.skc-option-btn.active { border-color: var(--skc-gold); color: var(--skc-gold); background: rgba(201,168,76,0.08); } .skc-qty-selector { display: flex; align-items: center; gap: 0; width: fit-content; border: 1px solid var(--skc-gray-2); border-radius: var(--skc-radius); overflow: hidden; } .skc-qty-btn { background: var(--skc-gray-3); border: none; color: var(--skc-white); width: 40px; height: 40px; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all var(--skc-transition); } .skc-qty-btn:hover { background: var(--skc-gold); color: var(--skc-black); } .skc-qty-input { width: 56px; text-align: center; background: var(--skc-gray-3); border: none; border-left: 1px solid var(--skc-gray-2); border-right: 1px solid var(--skc-gray-2); color: var(--skc-white); font-size: 14px; font-family: var(--skc-font-body); height: 40px; outline: none; } .skc-product__trust { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; padding: 16px; background: var(--skc-gray-3); border: 1px solid var(--skc-gray-2); border-radius: var(--skc-radius); } .skc-trust-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--skc-gray); } .skc-product__accordion { border-top: 1px solid var(--skc-gray-2); margin-top: 16px; } .skc-accordion-btn { width: 100%; background: none; border: none; color: var(--skc-white); text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color var(--skc-transition); } .skc-accordion-btn:hover { color: var(--skc-gold); } .skc-accordion-icon { color: var(--skc-gold); font-size: 18px; } .skc-accordion-panel { overflow: hidden; transition: max-height 0.3s ease; } .skc-accordion-panel--closed { max-height: 0; } .skc-page-title { font-family: var(--skc-font-display); font-size: 40px; letter-spacing: 0.08em; } .skc-cart-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 768px) { .skc-cart-layout { grid-template-columns: 1fr 360px; } } .skc-cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--skc-gray-2); } .skc-cart-item__img-wrap { border-radius: var(--skc-radius); overflow: hidden; background: var(--skc-gray-3); } .skc-cart-item__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .skc-cart-item__title { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .skc-cart-item__price { font-size: 15px; font-weight: 700; color: var(--skc-white); margin-bottom: 12px; } .skc-cart-summary__card { background: var(--skc-gray-3); border: 1px solid var(--skc-gray-2); border-radius: var(--skc-radius-lg); padding: 28px; position: sticky; top: 90px; } .skc-cart-summary__title { font-family: var(--skc-font-display); font-size: 22px; letter-spacing: 0.08em; } .skc-cart-summary__row { width: 100%; display: flex; justify-content: space-between; font-size: 14px; color: var(--skc-gray); } .skc-cart-empty { text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .skc-cart-empty h2 { font-family: var(--skc-font-display); font-size: 32px; letter-spacing: 0.08em; } .skc-404__inner { text-align: center; padding: 80px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .skc-404__code { font-family: var(--skc-font-display); font-size: 120px; letter-spacing: 0.08em; color: var(--skc-gold); line-height: 1; } .skc-404__title { font-family: var(--skc-font-display); font-size: 36px; letter-spacing: 0.08em; } .skc-404__body { color: var(--skc-gray); max-width: 440px; } .skc-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; } .skc-pagination__btn { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--skc-gold); padding: 10px 20px; border: 1px solid var(--skc-gold); border-radius: var(--skc-radius); transition: all var(--skc-transition); } .skc-pagination__btn:hover { background: var(--skc-gold); color: var(--skc-black); } .skc-cart-drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .skc-cart-drawer.open { pointer-events: auto; } .skc-cart-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.3s; } .skc-cart-drawer.open .skc-cart-drawer__overlay { opacity: 1; } .skc-cart-drawer__panel { position: absolute; top: 0; right: 0; width: 100%; max-width: 420px; height: 100%; background: var(--skc-gray-3); border-left: 1px solid var(--skc-gray-2); transform: translateX(100%); transition: transform 0.35s ease; display: flex; flex-direction: column; } .skc-cart-drawer.open .skc-cart-drawer__panel { transform: translateX(0); } .skc-cart-drawer__header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--skc-gray-2); } .skc-cart-drawer__title { font-family: var(--skc-font-display); font-size: 22px; letter-spacing: 0.08em; flex: 1; } .skc-cart-drawer__close { background: none; border: none; color: var(--skc-gray); font-size: 26px; line-height: 1; transition: color var(--skc-transition); } .skc-cart-drawer__close:hover { color: var(--skc-white); } .skc-cart-drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; } .skc-cart-drawer__footer { padding: 20px 24px; border-top: 1px solid var(--skc-gray-2); } .skc-toast { position: fixed; bottom: 32px; right: 32px; background: var(--skc-gold); color: var(--skc-black); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 24px; border-radius: var(--skc-radius); opacity: 0; transform: translateY(12px); transition: all 0.3s; pointer-events: none; z-index: 9999; } .skc-toast.show { opacity: 1; transform: translateY(0); } .skc-footer { background: var(--skc-gray-3); border-top: 1px solid var(--skc-gray-2); } .skc-footer__top { padding: 64px 0 48px; } .skc-footer__grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 640px) { .skc-footer__grid { grid-template-columns: 1fr 2fr; } } .skc-footer__brand-name { font-family: var(--skc-font-display); font-size: 26px; letter-spacing: 0.12em; color: var(--skc-white); line-height: 1.1; } .skc-footer__brand-name span { color: var(--skc-gold); } .skc-footer__tagline { font-family: var(--skc-font-accent); font-style: italic; color: var(--skc-gray); font-size: 13px; } .skc-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } @media (min-width: 768px) { .skc-footer__nav { grid-template-columns: repeat(3, 1fr); } } .skc-footer__nav-heading { font-family: var(--skc-font-display); font-size: 16px; letter-spacing: 0.14em; color: var(--skc-white); margin-bottom: 16px; } .skc-footer__nav-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .skc-footer__nav-link { font-size: 12px; color: var(--skc-gray); transition: color var(--skc-transition); } .skc-footer__nav-link:hover { color: var(--skc-gold); } .skc-footer__bottom { border-top: 1px solid var(--skc-gray-2); padding: 20px 0; } .skc-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .skc-footer__copy { font-size: 11px; color: var(--skc-gray); } @media (max-width: 640px) { .skc-section-title { font-size: 32px; } .skc-hero__heading { font-size: 56px; } .skc-cart-item { grid-template-columns: 80px 1fr auto; gap: 12px; } .skc-product__title { font-size: 28px; } } :focus-visible { outline: 2px solid var(--skc-gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } } }