199 lines
5.1 KiB
CSS
199 lines
5.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
background-color: #F8F9FB;
|
|
color: #1E293B;
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
|
|
/* Custom Swiper Styles */
|
|
.swiper-pagination-bullet-active {
|
|
background: #1976F3 !important;
|
|
width: 24px !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
color: #1976F3 !important;
|
|
background: white;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
border-radius: 50%;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.swiper-button-next::after,
|
|
.swiper-button-prev::after {
|
|
font-size: 16px !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* TechShop-style hero carousel (Slider Revolution-like) */
|
|
.techshop-hero .swiper-wrapper {
|
|
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
|
|
}
|
|
|
|
.techshop-hero-pagination .swiper-pagination-bullet {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
opacity: 1;
|
|
margin: 0 4px !important;
|
|
border-radius: 999px;
|
|
transition: width 0.25s ease, background 0.25s ease;
|
|
}
|
|
|
|
.techshop-hero-pagination .swiper-pagination-bullet-active {
|
|
width: 22px !important;
|
|
background: #1976F3 !important;
|
|
border-radius: 999px !important;
|
|
}
|
|
|
|
/* Layer entrance animations on active slide */
|
|
.techshop-layer {
|
|
opacity: 0;
|
|
transform: translateY(22px);
|
|
transition:
|
|
opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
}
|
|
|
|
.techshop-layer-media {
|
|
transform: translateX(36px);
|
|
}
|
|
|
|
.techshop-hero-bg {
|
|
transform: scale(1.06);
|
|
transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
}
|
|
|
|
.swiper-slide-active .techshop-layer,
|
|
.swiper-slide-duplicate-active .techshop-layer {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
.swiper-slide-active .techshop-layer-1,
|
|
.swiper-slide-duplicate-active .techshop-layer-1 {
|
|
transition-delay: 0.12s;
|
|
}
|
|
|
|
.swiper-slide-active .techshop-layer-2,
|
|
.swiper-slide-duplicate-active .techshop-layer-2 {
|
|
transition-delay: 0.22s;
|
|
}
|
|
|
|
.swiper-slide-active .techshop-layer-3,
|
|
.swiper-slide-duplicate-active .techshop-layer-3 {
|
|
transition-delay: 0.32s;
|
|
}
|
|
|
|
.swiper-slide-active .techshop-layer-4,
|
|
.swiper-slide-duplicate-active .techshop-layer-4 {
|
|
transition-delay: 0.42s;
|
|
}
|
|
|
|
.swiper-slide-active .techshop-layer-media,
|
|
.swiper-slide-duplicate-active .techshop-layer-media {
|
|
transition-delay: 0.18s;
|
|
}
|
|
|
|
.swiper-slide-active .techshop-hero-bg,
|
|
.swiper-slide-duplicate-active .techshop-hero-bg {
|
|
transform: scale(1);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.techshop-hero .swiper-wrapper {
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.techshop-layer,
|
|
.techshop-hero-bg {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* Hide scrollbars but keep scrolling */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Direct font overrides */
|
|
body, p, span, a, input, select, button {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, .font-outfit {
|
|
font-family: 'Outfit', sans-serif;
|
|
}
|
|
|
|
/* Force container max-width to 1400px on large displays */
|
|
@media (min-width: 1400px) {
|
|
.container {
|
|
max-width: 1400px !important;
|
|
}
|
|
}
|
|
|
|
/* Custom Utilities for Purchased Template Colors & Shadows */
|
|
.bg-bgLight { background-color: #F8F9FB; }
|
|
.bg-cardLight { background-color: #FFFFFF; }
|
|
.text-textMain { color: #1E293B; }
|
|
.text-textMuted { color: #64748B; }
|
|
.bg-primary { background-color: #1976F3; }
|
|
.bg-primary-hover:hover { background-color: #1565C0; }
|
|
.bg-primary-light { background-color: #E3F2FD; }
|
|
.text-primary { color: #1976F3; }
|
|
.border-primary { border-color: #1976F3; }
|
|
.shadow-soft { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -1px rgba(0, 0, 0, 0.03); }
|
|
.shadow-soft-hover:hover { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 15px -2px rgba(0, 0, 0, 0.04); }
|
|
|
|
/* Rich HTML product descriptions (bulk import + admin editor) */
|
|
.product-description-html ul,
|
|
.product-description-html ul li {
|
|
list-style-type: disc !important;
|
|
}
|
|
.product-description-html ol,
|
|
.product-description-html ol li {
|
|
list-style-type: decimal !important;
|
|
}
|
|
.product-description-html ul,
|
|
.product-description-html ol {
|
|
padding-left: 1.75rem !important;
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
.product-description-html li {
|
|
display: list-item !important;
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
.product-description-html [style*="text-align: center"],
|
|
.product-description-html p[style*="text-align: center"] {
|
|
text-align: center !important;
|
|
}
|
|
.product-description-html [style*="text-align: right"],
|
|
.product-description-html p[style*="text-align: right"] {
|
|
text-align: right !important;
|
|
}
|
|
.product-description-html [style*="text-align: justify"],
|
|
.product-description-html p[style*="text-align: justify"] {
|
|
text-align: justify !important;
|
|
}
|
|
.product-description-html strong,
|
|
.product-description-html b {
|
|
font-weight: 700;
|
|
}
|