/** * Voge Shop — assets/css/main.css * Full design system: tokens, reset, layout, components, animations, responsive. * All classes prefixed with `voge-` to ensure Elementor compatibility. * * Sections: * 1. Design Tokens (CSS Custom Properties) * 2. Base Reset * 3. Utility Classes * 4. Layout * 5. Navbar * 6. Buttons * 7. Hero Section * 8. Features Bar * 9. Products Section + Cards * 10. Reviews Section + Cards * 11. Footer * 12. Scroll-Reveal Animations * 13. Responsiveness (≤768px) */ /* =========================================================================== 1. DESIGN TOKENS =========================================================================== */ :root { /* Color Palette — Dark Mode */ --voge-bg: #0f0f0f; --voge-fg: #ffffff; --voge-card-bg: rgba(23, 23, 23, 0.40); --voge-primary: #10b981; /* Emerald-500 */ --voge-primary-dark: #059669; /* Emerald-600 */ --voge-primary-glow: rgba(16, 185, 129, 0.50); --voge-primary-subtle: rgba(16, 185, 129, 0.10); --voge-primary-border: rgba(16, 185, 129, 0.20); --voge-muted: rgba(255, 255, 255, 0.60); --voge-muted-low: rgba(255, 255, 255, 0.45); --voge-border: rgba(255, 255, 255, 0.05); --voge-border-hover: rgba(16, 185, 129, 0.30); --voge-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.30); --voge-star-color: #f59e0b; --voge-wa-green: #25d366; --voge-wa-green-dark: #20bd5a; --voge-wa-shadow: rgba(37, 211, 102, 0.40); --voge-emerald-orb: rgba(6, 78, 59, 0.30); /* Typography */ --voge-font-body: 'Inter', system-ui, sans-serif; --voge-font-heading: 'Outfit', system-ui, sans-serif; /* Spacing */ --voge-container-max: 1280px; --voge-container-px: 1.5rem; /* px-6 ≈ 24px */ /* Radius */ --voge-radius-sm: 0.5rem; --voge-radius-md: 0.75rem; --voge-radius-lg: 1rem; --voge-radius-xl: 1.5rem; --voge-radius-full: 9999px; /* Transitions */ --voge-transition: all 0.3s ease; --voge-transition-fast: all 0.15s ease; } /* =========================================================================== 2. BASE RESET =========================================================================== */ .voge-site *, .voge-site *::before, .voge-site *::after { box-sizing: border-box; margin: 0; padding: 0; } .voge-site { font-family: var(--voge-font-body); background-color: var(--voge-bg); color: var(--voge-fg); overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .voge-site h1, .voge-site h2, .voge-site h3, .voge-site h4, .voge-site h5, .voge-site h6 { font-family: var(--voge-font-heading); letter-spacing: -0.025em; font-weight: 700; line-height: 1.2; } .voge-site a { text-decoration: none; color: inherit; } .voge-site img { max-width: 100%; display: block; } .voge-site ul { list-style: none; } /* Also apply background to the so WP doesn't show a white flash */ body.dark { background-color: var(--voge-bg); color: var(--voge-fg); } /* =========================================================================== 3. UTILITY CLASSES =========================================================================== */ /* Glass morphism panel */ .voge-glass { background: var(--voge-card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--voge-border); box-shadow: var(--voge-glass-shadow); } /* Emerald glow text shadow */ .voge-text-glow { text-shadow: 0 0 20px var(--voge-primary-glow); } /* Subtle grid overlay */ .voge-bg-grid { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); } /* =========================================================================== 4. LAYOUT =========================================================================== */ .voge-container { max-width: var(--voge-container-max); margin-inline: auto; padding-inline: var(--voge-container-px); width: 100%; } /* =========================================================================== 5. NAVBAR =========================================================================== */ .voge-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(15, 15, 15, 0.60); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--voge-border); transition: box-shadow 0.3s ease, background 0.3s ease; } .voge-nav.scrolled { background: rgba(15, 15, 15, 0.90); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50); } .voge-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 5rem; /* h-20 */ gap: 1rem; } /* Logo */ .voge-nav__logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .voge-nav__logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--voge-radius-sm); } .voge-nav__logo-text { font-family: var(--voge-font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.025em; color: var(--voge-fg); } /* Desktop Links */ .voge-nav__links { display: flex; align-items: center; gap: 2rem; } .voge-nav__link { font-size: 0.875rem; font-weight: 500; color: var(--voge-muted); transition: var(--voge-transition-fast); } .voge-nav__link:hover { color: var(--voge-primary); } /* =========================================================================== 6. BUTTONS =========================================================================== */ .voge-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--voge-font-body); font-weight: 600; font-size: 0.9375rem; border: none; cursor: pointer; text-decoration: none; border-radius: var(--voge-radius-full); padding: 0.625rem 1.5rem; transition: var(--voge-transition); white-space: nowrap; line-height: 1; } /* Primary — Emerald */ .voge-btn--primary { background: var(--voge-primary); color: #000; box-shadow: 0 0 30px -5px var(--voge-primary-glow); } .voge-btn--primary:hover { background: var(--voge-primary-dark); box-shadow: 0 0 40px -5px var(--voge-primary-glow); transform: translateY(-1px); } /* Ghost / Outline */ .voge-btn--ghost { background: rgba(255, 255, 255, 0.05); color: var(--voge-fg); border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(8px); } .voge-btn--ghost:hover { background: rgba(255, 255, 255, 0.10); } /* WhatsApp Green */ .voge-btn--whatsapp { background: var(--voge-wa-green); color: #fff; box-shadow: 0 4px 15px var(--voge-wa-shadow); } .voge-btn--whatsapp:hover { background: var(--voge-wa-green-dark); transform: translateY(-2px); box-shadow: 0 6px 20px var(--voge-wa-shadow); } /* Pulsing animation variant */ .voge-btn--pulse { animation: voge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .voge-btn--pulse:hover { animation: none; transform: scale(1.05); } /* Large size modifier */ .voge-btn--lg { font-size: 1.125rem; padding: 0.875rem 2rem; height: 3.5rem; } /* =========================================================================== 7. ICONS =========================================================================== */ .voge-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .voge-icon--xs { width: 1rem; height: 1rem; } .voge-icon--sm { width: 1.25rem; height: 1.25rem; } .voge-icon--star { width: 1.125rem; height: 1.125rem; color: var(--voge-star-color); } /* =========================================================================== 8. HERO SECTION =========================================================================== */ .voge-hero { position: relative; padding-top: 12rem; /* pt-48 at desktop */ padding-bottom: 8rem; /* pb-32 at desktop */ min-height: 90vh; display: flex; align-items: center; overflow: hidden; } /* --- Background --- */ .voge-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .voge-hero__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.30; } .voge-hero__bg-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 15, 15, 0.40) 0%, rgba(15, 15, 15, 0.80) 60%, #0f0f0f 100%); } .voge-hero__bg-grid { position: absolute; inset: 0; opacity: 0.10; mix-blend-mode: overlay; background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); } /* Glowing orbs */ .voge-hero__orb { position: absolute; border-radius: var(--voge-radius-full); pointer-events: none; z-index: -1; } .voge-hero__orb--left { top: 25%; left: 25%; width: 500px; height: 500px; background: var(--voge-primary-subtle); filter: blur(120px); } .voge-hero__orb--right { bottom: 0; right: 25%; width: 400px; height: 400px; background: var(--voge-emerald-orb); filter: blur(100px); } /* --- Content --- */ .voge-hero__content { position: relative; z-index: 10; width: 100%; } .voge-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: var(--voge-radius-full); background: var(--voge-primary-subtle); border: 1px solid var(--voge-primary-border); color: var(--voge-primary); font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem; } .voge-hero__heading { font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; max-width: 48rem; } .voge-hero__heading-accent { color: var(--voge-primary); -webkit-text-fill-color: var(--voge-primary); text-shadow: 0 0 20px var(--voge-primary-glow); } .voge-hero__sub { font-size: 1.125rem; color: var(--voge-muted); max-width: 42rem; margin-bottom: 2.5rem; font-weight: 300; line-height: 1.75; } .voge-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; } /* =========================================================================== 9. FEATURES BAR =========================================================================== */ .voge-features { position: relative; z-index: 20; border-top: 1px solid var(--voge-border); border-bottom: 1px solid var(--voge-border); background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(12px); padding-top: 2rem; padding-bottom: 2rem; } .voge-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .voge-feature-item { display: flex; align-items: center; gap: 1rem; } .voge-feature-item__icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: var(--voge-radius-full); background: var(--voge-primary-subtle); border: 1px solid var(--voge-primary-border); color: var(--voge-primary); display: flex; align-items: center; justify-content: center; } .voge-feature-item__title { font-family: var(--voge-font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--voge-fg); margin-bottom: 0.125rem; } .voge-feature-item__desc { font-size: 0.8125rem; color: var(--voge-muted); } /* =========================================================================== 10. PRODUCTS SECTION + CARDS =========================================================================== */ .voge-products-section { position: relative; z-index: 10; padding-top: 6rem; padding-bottom: 6rem; } /* Section Header */ .voge-section-header { margin-bottom: 4rem; display: flex; justify-content: space-between; align-items: flex-end; } .voge-section-header--center { flex-direction: column; align-items: center; text-align: center; } .voge-section-header__title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; } .voge-section-header__sub { color: var(--voge-muted); font-size: 1.125rem; max-width: 36rem; font-weight: 300; } /* Grid */ .voge-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* Card */ .voge-card { position: relative; border-radius: var(--voge-radius-xl); padding: 0.5rem; display: flex; flex-direction: column; background: var(--voge-card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--voge-border); box-shadow: var(--voge-glass-shadow); transition: var(--voge-transition); } .voge-card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.50); border-color: var(--voge-border-hover); } /* Card Image Wrapper */ .voge-card__img-wrap { position: relative; aspect-ratio: 4 / 3; border-radius: var(--voge-radius-lg); overflow: hidden; margin-bottom: 1.5rem; background: rgba(0, 0, 0, 0.50); border: 1px solid var(--voge-border); } .voge-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .voge-card:hover .voge-card__img { transform: scale(1.05); } .voge-card__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 15, 15, 0.80) 0%, transparent 60%); opacity: 0.50; pointer-events: none; } .voge-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 10; background: var(--voge-primary); color: #000; font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: var(--voge-radius-full); text-transform: uppercase; letter-spacing: 0.08em; } /* Card Body */ .voge-card__body { padding: 0 1rem 1rem; flex: 1; display: flex; flex-direction: column; } .voge-card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; transition: color 0.2s ease; } .voge-card:hover .voge-card__title { color: var(--voge-primary); } .voge-card__desc { font-size: 0.875rem; color: var(--voge-muted); margin-bottom: 1.5rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.7; white-space: pre-line; } .voge-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--voge-border); } .voge-card__price { font-size: 1.125rem; font-weight: 700; color: var(--voge-fg); } /* =========================================================================== 11. REVIEWS SECTION + CARDS =========================================================================== */ .voge-reviews-section { position: relative; z-index: 10; padding-top: 6rem; padding-bottom: 6rem; background: rgba(0, 0, 0, 0.40); border-top: 1px solid var(--voge-border); } .voge-reviews-section__bg-grid { position: absolute; inset: 0; opacity: 0.03; mix-blend-mode: overlay; pointer-events: none; background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); } .voge-reviews-section__inner { position: relative; } .voge-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* Review Card */ .voge-review-card { background: var(--voge-card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--voge-border); box-shadow: var(--voge-glass-shadow); border-radius: var(--voge-radius-xl); padding: 2rem; position: relative; transition: var(--voge-transition); } .voge-review-card__stars { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; } .voge-review-card__text { font-size: 1.0625rem; line-height: 1.75; font-weight: 300; color: #e5e7eb; /* gray-200 */ margin-bottom: 2rem; } .voge-review-card__author { display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.10); padding-top: 1.5rem; } .voge-review-card__avatar { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--voge-radius-full); background: rgba(16, 185, 129, 0.20); border: 1px solid rgba(16, 185, 129, 0.30); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: var(--voge-primary); } .voge-review-card__name { font-family: var(--voge-font-heading); font-weight: 700; font-size: 0.875rem; margin-bottom: 0.125rem; } .voge-review-card__role { font-size: 0.75rem; color: var(--voge-muted); } /* =========================================================================== 12. FOOTER =========================================================================== */ .voge-footer { padding-top: 3rem; padding-bottom: 3rem; border-top: 1px solid var(--voge-border); background: var(--voge-bg); position: relative; z-index: 10; } .voge-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } .voge-footer__logo { display: flex; align-items: center; gap: 0.5rem; } .voge-footer__logo-img { width: 32px; height: 32px; object-fit: contain; border-radius: var(--voge-radius-sm); } .voge-footer__logo-text { font-family: var(--voge-font-heading); font-weight: 700; color: var(--voge-fg); letter-spacing: -0.025em; } .voge-footer__copy { font-size: 0.875rem; color: var(--voge-muted); } .voge-footer__social { display: flex; gap: 1rem; } .voge-footer__social-link { width: 2.5rem; height: 2.5rem; border-radius: var(--voge-radius-full); background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: var(--voge-muted); transition: var(--voge-transition-fast); } .voge-footer__social-link:hover { background: var(--voge-primary); color: #000; } /* =========================================================================== 13. PAGE TEMPLATE (page.php) =========================================================================== */ .voge-page-content { padding-top: 8rem; padding-bottom: 4rem; min-height: 60vh; } .voge-page-content__inner { max-width: 56rem; } .voge-page-article__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 2rem; } .voge-page-article__content { color: var(--voge-muted); line-height: 1.8; font-size: 1.0625rem; } .voge-page-article__content p { margin-bottom: 1rem; } /* =========================================================================== 14. SCROLL-REVEAL ANIMATIONS =========================================================================== */ @keyframes voge-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes voge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } /* Initial state — hidden and shifted down */ .scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--reveal-delay, 0s); } /* Triggered state — visible */ .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } /* Hero elements animate in immediately on page load */ .voge-hero .scroll-reveal { animation: voge-fadeInUp 0.6s ease forwards; } .voge-hero .voge-hero__badge { animation-delay: 0.0s; } .voge-hero .voge-hero__heading { animation-delay: 0.15s; } .voge-hero .voge-hero__sub { animation-delay: 0.30s; } .voge-hero .voge-hero__ctas { animation-delay: 0.45s; } /* =========================================================================== 15. RESPONSIVE — ≤1024px (tablet) =========================================================================== */ @media (max-width: 1024px) { .voge-products-grid { grid-template-columns: repeat(2, 1fr); } } /* =========================================================================== 16. RESPONSIVE — ≤768px (mobile) =========================================================================== */ @media (max-width: 768px) { /* Navbar */ .voge-nav__links { display: none; /* collapse on mobile */ } .voge-nav__inner { padding-inline: 1rem; } /* Hero */ .voge-hero { padding-top: 8rem; padding-bottom: 4rem; min-height: auto; } .voge-hero__heading { font-size: clamp(2.25rem, 10vw, 3rem); } .voge-hero__ctas { flex-direction: column; } .voge-btn--lg { width: 100%; justify-content: center; } /* Features */ .voge-features__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } /* Products */ .voge-products-grid { grid-template-columns: 1fr; } /* Reviews */ .voge-reviews-grid { grid-template-columns: 1fr; } /* Footer */ .voge-footer__inner { flex-direction: column; align-items: center; text-align: center; } } /* =========================================================================== 17. ELEMENTOR SAFETY LAYER Prevent Elementor's global styles from overriding Voge theme styles. =========================================================================== */ /* Ensure Elementor buttons inside voge-site don't reset our button styles */ .voge-site .elementor-button { font-family: var(--voge-font-body); } /* Prevent Elementor from stripping our body background */ body.dark.elementor-page { background-color: var(--voge-bg) !important; }