@charset "utf-8";
/*
* ============================================================
* KAREN KARDASHA / UNIVERSO KARDASHA
* Luxury Gold & Shimmer Theme Override
* ============================================================
*
* This stylesheet overrides the Youth template's default
* style.css to create a premium gold aesthetic.
*
* Load AFTER style.css and plugins.css:
*
*
* Also add Playfair Display to your :
*
*
* Color Palette:
* Gold primary ......... #D4AF37
* Gold light ........... #E8C84A
* Rose-gold ............ #B76E79
* Champagne ............ #F7E7CE
* Deep black ........... #0A0A0A
* Soft white ........... #E8E8E8
*
* ============================================================
*/
/* ==========================================================
0. GOOGLE FONT IMPORT
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap');
/* ==========================================================
1. KEYFRAME ANIMATIONS
========================================================== */
/* Gold shimmer — sweeps a highlight band across text */
@keyframes goldShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Pulsating gold glow for interactive elements */
@keyframes goldGlow {
0%, 100% { box-shadow: 0 0 5px rgba(212,175,55,0.3); }
50% { box-shadow: 0 0 20px rgba(212,175,55,0.6),
0 0 40px rgba(212,175,55,0.2); }
}
/* Sparkle micro-animation for pseudo-element particles */
@keyframes sparkle {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}
/* Subtle floating glow for decorative accents */
@keyframes floatGlow {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(-6px); opacity: 1; }
}
/* Gold pulse for the preloader spinner */
@keyframes goldPulse {
0% { border-top-color: #D4AF37; }
33% { border-top-color: #F7E7CE; }
66% { border-top-color: #B76E79; }
100% { border-top-color: #D4AF37; }
}
/* ==========================================================
2. BASE & BODY
========================================================== */
body {
background: #0A0A0A !important;
color: #9A9A9A;
}
/* Selection highlight — gold on black */
::-moz-selection {
background: #D4AF37 !important;
color: #0A0A0A !important;
}
::selection {
background: #D4AF37 !important;
color: #0A0A0A !important;
}
/* ==========================================================
3. LINKS — gold on hover
========================================================== */
a:hover,
a:focus {
color: #D4AF37 !important;
}
p a {
color: #D4AF37 !important;
}
p a:hover,
p a:visited,
p a:active,
p a:focus {
color: #E8C84A !important;
}
/* ==========================================================
4. SECTION SHARED — dark sections, gold accents
========================================================== */
.section a,
.section a:hover,
.section a:visited,
.section a:active,
.section a:focus {
color: #D4AF37 !important;
}
/* Section title underline → gold gradient with glow */
.section-links:after,
.section-title:after {
background: linear-gradient(90deg, #D4AF37, #B76E79) !important;
background-color: transparent !important;
height: 2px !important;
width: 30px !important;
box-shadow: 0 0 8px rgba(212,175,55,0.35);
}
.section-title:hover:after {
background: linear-gradient(90deg, #E8C84A, #D4AF37) !important;
width: 45px !important;
box-shadow: 0 0 14px rgba(212,175,55,0.5);
}
/* Section title typography — wider spacing */
.section-title {
letter-spacing: 4px !important;
}
/* Section subtitles — champagne warmth */
.section-all-subtitle,
.section-contact-subtitle {
color: #F7E7CE !important;
}
.section-contact-subtitle-first {
color: #F7E7CE !important;
}
/* ==========================================================
5. QUOTATION MARKS — gold, semi-transparent
========================================================== */
.quote-mark-l,
.quote-mark-r {
color: #D4AF37 !important;
opacity: 0.5;
}
/* ==========================================================
6. HOME / HERO PAGE
========================================================== */
/* Dark overlay with subtle gold radial gradient */
.home-page-overlay {
background: rgba(10, 10, 10, 0.78) !important;
background-image: radial-gradient(
ellipse at 50% 40%,
rgba(212,175,55,0.06) 0%,
transparent 70%
) !important;
}
.home-page-overlay.light {
background: rgba(10, 10, 10, 0.78) !important;
background-image: radial-gradient(
ellipse at 50% 40%,
rgba(212,175,55,0.06) 0%,
transparent 70%
) !important;
}
/* Hero h1 — Playfair Display with gold shimmer */
h1.home-page-title,
h1.home-page-title.light {
font-family: 'Playfair Display', serif !important;
font-weight: 700 !important;
letter-spacing: 8px !important;
background: linear-gradient(
90deg,
#D4AF37,
#F7E7CE,
#D4AF37,
#B76E79,
#D4AF37
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: goldShimmer 4s linear infinite;
text-shadow: none !important;
}
/* Hero h2 subtitle — champagne */
h2.home-page-title,
h2.home-page-title.light,
h2.home-page-title.light a {
color: #F7E7CE !important;
}
/* ==========================================================
7. NAVIGATION
========================================================== */
/* Overlay — deep black */
.navigation-overlay {
background: rgba(10, 10, 10, 0.97) !important;
}
/* Menu links — white → gold hover with glow */
.menu-link,
.menu-link.dark {
color: #FFFFFF !important;
}
.menu-link:hover,
.menu-link.dark:hover {
color: #D4AF37 !important;
text-shadow: 0 0 12px rgba(212,175,55,0.4) !important;
}
.menu-link:after,
.menu-link.dark:after {
background-color: #D4AF37 !important;
}
.menu-link:hover:after,
.menu-link.dark:hover:after {
background-color: #D4AF37 !important;
}
/* Nav social icons — white → gold */
ul.social-icons a,
ul.social-icons.dark a {
color: #FFFFFF !important;
}
ul.social-icons a:hover,
ul.social-icons.dark a:hover {
color: #D4AF37 !important;
opacity: 1 !important;
}
/* ==========================================================
8. ABOUT SECTION
========================================================== */
.section-about {
background: #0A0A0A !important;
}
.section-about .section-title {
color: #FFFFFF !important;
}
.section-about p {
color: #9A9A9A !important;
}
/* ==========================================================
9. FACTS SECTION — dark with gold overlay gradient
========================================================== */
.section-facts {
background: #0A0A0A !important;
position: relative;
}
/* Gold overlay gradient via box-shadow (no extra markup needed) */
.section-facts::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(212,175,55,0.05) 0%,
transparent 50%,
rgba(183,110,121,0.04) 100%
);
pointer-events: none;
z-index: 0;
}
.facts-counter-number {
color: #D4AF37 !important;
text-shadow: 0 0 20px rgba(212,175,55,0.4);
}
.facts-counter-title {
color: #F7E7CE !important;
}
.facts-counter-description {
color: #E8E8E8 !important;
}
.facts-counter-description .fa {
color: #D4AF37 !important;
}
/* ==========================================================
10. SERVICES SECTION
========================================================== */
.section-services {
background: #0F0F0F !important;
}
.section-services .section-title {
color: #FFFFFF !important;
}
/* Service icons — gold, slightly larger */
.services-img {
color: #D4AF37 !important;
font-size: 40px !important;
}
.services-img span {
color: #D4AF37 !important;
font-size: 40px !important;
}
/* Service titles — white, hover → gold (kept for compatibility) */
.services-title {
color: #FFFFFF !important;
transition: color 0.3s ease;
}
.services-description,
.services-description p {
color: #9A9A9A !important;
}
/* ==========================================================
11. WORKS / PORTFOLIO SECTION
========================================================== */
.section-works {
background: #0A0A0A !important;
}
.section-works .section-title {
color: #FFFFFF !important;
}
/* ==========================================================
12. TESTIMONIALS SECTION — dark with gold shimmer
========================================================== */
.section-testimonials {
background: #0A0A0A !important;
position: relative;
overflow: hidden;
}
/* Subtle gold shimmer overlay */
.section-testimonials::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(212,175,55,0.03) 25%,
rgba(212,175,55,0.06) 50%,
rgba(212,175,55,0.03) 75%,
transparent 100%
);
animation: goldShimmer 8s linear infinite;
pointer-events: none;
z-index: 0;
}
.testimonials-quote p {
color: #E8E8E8 !important;
position: relative;
z-index: 1;
}
.testimonials-signature {
color: #D4AF37 !important;
position: relative;
z-index: 1;
}
.testimonials-quote-img {
position: relative;
z-index: 1;
border: 2px solid rgba(212,175,55,0.3);
}
/* ==========================================================
13. NEWS SECTION
========================================================== */
.section-news {
background: #111111 !important;
}
.section-news .section-title {
color: #FFFFFF !important;
}
.news-title {
color: #FFFFFF !important;
}
.news-title a {
color: #FFFFFF !important;
}
.news-title a:hover {
color: #D4AF37 !important;
}
.news-date {
color: #D4AF37 !important;
}
.news-hover:hover .news-date {
color: #E8C84A !important;
}
.section-news p {
color: #9A9A9A !important;
}
/* ==========================================================
14. CONTACT SECTION
========================================================== */
.section-contact {
background: #0A0A0A !important;
}
.section-contact .section-title {
color: #FFFFFF !important;
}
.section-contact p {
color: #9A9A9A !important;
}
/* Form inputs — gold border on focus */
#form input,
.section-contact textarea {
border-bottom-color: rgba(212,175,55,0.3) !important;
color: #E8E8E8 !important;
background: none !important;
}
#form input:focus,
.section-contact textarea:focus {
border-bottom-color: #D4AF37 !important;
box-shadow: 0 1px 0 0 rgba(212,175,55,0.3);
}
/* Placeholder text */
#form input::-webkit-input-placeholder,
.section-contact textarea::-webkit-input-placeholder {
color: #666 !important;
}
#form input:-moz-placeholder,
.section-contact textarea:-moz-placeholder {
color: #666 !important;
}
#form input::-moz-placeholder,
.section-contact textarea::-moz-placeholder {
color: #666 !important;
}
#form input:-ms-input-placeholder,
.section-contact textarea:-ms-input-placeholder {
color: #666 !important;
}
/* Submit button — gold bg, black text */
.submit-button {
background: #D4AF37 !important;
color: #0A0A0A !important;
font-weight: 600 !important;
letter-spacing: 3px !important;
border: none !important;
transition: all 0.4s ease !important;
}
.submit-button::before {
background: #E8C84A !important;
}
.submit-button:hover {
background: #E8C84A !important;
color: #0A0A0A !important;
box-shadow: 0 0 20px rgba(212,175,55,0.5),
0 0 40px rgba(212,175,55,0.2) !important;
}
/* ==========================================================
15. SKILLS BAR — gold gradient fill
========================================================== */
.skillbar-bar {
background: linear-gradient(
90deg,
#B76E79,
#D4AF37,
#E8C84A
) !important;
box-shadow: 0 0 6px rgba(212,175,55,0.25);
}
.skillbar-title {
color: #E8E8E8 !important;
background: #0A0A0A !important;
padding-right: 8px !important;
z-index: 1;
}
.skillbar {
height: 28px !important;
margin-bottom: 35px !important;
}
.skillbar-bar {
margin-top: 12px;
}
.skill-bar-percent {
color: #D4AF37 !important;
top: -2px !important;
}
.skill-bar-percent {
color: #D4AF37 !important;
}
/* ==========================================================
16. FOOTER SECTION
========================================================== */
.section-footer {
background: #0A0A0A !important;
}
/* Footer logo — gold glow border */
.footer-logo {
border: none !important;
box-shadow: none !important;
padding: 6px;
}
/* Footer social icons — dim → gold with glow */
ul.social-icons-footer a {
color: #555555 !important;
opacity: 1 !important;
transition: all 0.4s ease !important;
}
ul.social-icons-footer a:hover {
color: #D4AF37 !important;
opacity: 1 !important;
text-shadow: 0 0 10px rgba(212,175,55,0.4);
}
/* Footer divider line — gold gradient */
.lineOT-footer {
background: linear-gradient(
90deg,
transparent,
#D4AF37,
#B76E79,
#D4AF37,
transparent
) !important;
height: 1px !important;
}
/* Copyright links — dim → gold */
.copy {
color: #555555 !important;
}
.copy a,
.copy a:hover {
color: #555555 !important;
transition: color 0.3s ease;
}
.copy a:hover {
color: #D4AF37 !important;
}
/* ==========================================================
17. PAGE WRAPPER — dark background
========================================================== */
.page-wrapper {
background: #0A0A0A !important;
}
/* ==========================================================
18. PRELOADER — gold spinner
========================================================== */
#preloader {
background: #0A0A0A !important;
}
.loader {
border-color: rgba(212,175,55,0.15) !important;
}
.loader span {
border-top-color: #D4AF37 !important;
animation: goldPulse 2s ease-in-out infinite;
}
/* ==========================================================
19. SCROLLBAR — thin gold on dark
========================================================== */
/* Webkit browsers */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #0A0A0A;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #D4AF37, #B76E79);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #E8C84A, #D4AF37);
}
/* Firefox */
html {
scrollbar-width: thin;
scrollbar-color: #D4AF37 #0A0A0A;
}
/* ==========================================================
20. SPARKLE PSEUDO-ELEMENT UTILITY
Use on containers that want decorative gold sparkles.
Apply class .gold-sparkle to any element.
========================================================== */
.gold-sparkle::after {
content: "";
position: absolute;
top: 10%;
right: 10%;
width: 4px;
height: 4px;
background: #D4AF37;
border-radius: 50%;
box-shadow: 0 0 6px 2px rgba(212,175,55,0.6);
animation: sparkle 3s ease-in-out infinite;
pointer-events: none;
}
/* ==========================================================
21. GOOGLE MAPS — dark filter
========================================================== */
.section-google-maps {
background: #0A0A0A !important;
}
#map-wrapper {
filter: grayscale(100%) invert(90%) contrast(90%);
opacity: 0.7;
transition: opacity 0.4s ease;
}
#map-wrapper:hover {
opacity: 1;
}
/* ==========================================================
22. OWL CAROUSEL DOTS & ARROWS — gold
========================================================== */
.owl-dot span {
background: rgba(212,175,55,0.3) !important;
}
.owl-dot.active span,
.owl-dot:hover span {
background: #D4AF37 !important;
}
.owl-prev,
.owl-next {
color: #D4AF37 !important;
}
.owl-prev:hover,
.owl-next:hover {
color: #E8C84A !important;
}
/* ==========================================================
23. SECTION DARK TEXT OVERRIDE
White text on dark backgrounds where the template
originally assumes light backgrounds.
========================================================== */
.section-title {
color: #FFFFFF !important;
}
.section p {
color: #9A9A9A !important;
}
h3 {
color: #E8E8E8 !important;
}
/* ==========================================================
24. HEADINGS GLOBAL — ensure visibility on dark bg
========================================================== */
h1, h2, h3, h4, h5, h6 {
color: #FFFFFF;
}
/* ==========================================================
25. DIVIDERS — gold tint
========================================================== */
.divider-line {
background: rgba(212,175,55,0.15) !important;
}
/* ==========================================================
26. SEARCH MODAL — dark gold
========================================================== */
.search-modal {
background: #0A0A0A !important;
border: 1px solid rgba(212,175,55,0.2) !important;
}
.search-modal input {
color: #E8E8E8 !important;
border-bottom-color: rgba(212,175,55,0.3) !important;
}
.search-modal input:focus {
border-bottom-color: #D4AF37 !important;
}
/* ==========================================================
27. KEN BURNS OVERLAY — darker for readability
========================================================== */
.home-page-overlay-gradient {
background: linear-gradient(
to bottom,
rgba(10, 10, 10, 0.85) 0%,
rgba(10, 10, 10, 0.3) 100%
) !important;
}
/* ==========================================================
28. WORKS HOVER — gold accent
========================================================== */
.works-link-hover {
background: rgba(10, 10, 10, 0.85) !important;
}
.works-title {
color: #FFFFFF !important;
}
.works-description {
color: #D4AF37 !important;
}
/* ==========================================================
29. RESPONSIVE — reduced motion
========================================================== */
@media (prefers-reduced-motion: reduce) {
h1.home-page-title,
h1.home-page-title.light {
animation: none !important;
background: none !important;
-webkit-text-fill-color: #D4AF37 !important;
color: #D4AF37 !important;
}
.section-testimonials::before {
animation: none !important;
}
.loader span {
animation: none !important;
border-top-color: #D4AF37 !important;
}
.gold-sparkle::after {
animation: none !important;
opacity: 0.7;
}
.submit-button {
transition: none !important;
}
body::after {
animation: none !important;
}
.page-wrapper::before,
.page-wrapper::after {
animation: none !important;
}
.influence-card {
transition: none !important;
}
}
/* Mobile — ensure gold effects render cleanly */
@media only screen and (max-width: 640px) {
h1.home-page-title,
h1.home-page-title.light {
letter-spacing: 4px !important;
}
.section-title {
letter-spacing: 2px !important;
}
.submit-button {
width: 100% !important;
}
::-webkit-scrollbar {
width: 4px;
}
}
@media only screen and (max-width: 880px) {
h1.home-page-title,
h1.home-page-title.light {
letter-spacing: 5px !important;
}
}
/* ==========================================================
30. LOGO — subtle gold tint for dark theme
========================================================== */
.logo-img:before,
.logo-img-dark:before,
.footer-logo:before {
display: none !important;
content: none !important;
}
/* ==========================================================
KK TEXT LOGO — GOLD SHIMMER
========================================================== */
.kk-logo-text {
font-family: 'Playfair Display', serif !important;
font-weight: 700 !important;
font-size: 28px !important;
letter-spacing: 6px !important;
background: linear-gradient(90deg, #D4AF37, #F7E7CE, #D4AF37, #B76E79, #D4AF37) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: goldShimmer 3s linear infinite !important;
text-shadow: none !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
background-image: none;
cursor: pointer;
}
.logo .kk-logo-text {
position: relative;
padding: 5px 0;
}
.logo .kk-logo-text::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 1px;
background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}
.footer-logo.kk-logo-text {
font-size: 36px !important;
letter-spacing: 8px !important;
margin-bottom: 20px;
text-align: center;
background-image: none;
width: auto !important;
height: auto !important;
}
/* ==========================================================
ENHANCED GOLD GLITTER & SPARKLE EFFECTS
========================================================== */
/* ---- FULL PAGE GOLDEN ATMOSPHERE ---- */
/* Global gold ambient glow - covers entire page */
.page-wrapper {
position: relative;
}
.page-wrapper::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background:
radial-gradient(ellipse 600px 400px at 10% 20%, rgba(212,175,55,0.06) 0%, transparent 70%),
radial-gradient(ellipse 500px 500px at 90% 60%, rgba(183,110,121,0.05) 0%, transparent 70%),
radial-gradient(ellipse 800px 300px at 50% 80%, rgba(212,175,55,0.04) 0%, transparent 70%),
radial-gradient(ellipse 400px 600px at 75% 10%, rgba(247,231,206,0.05) 0%, transparent 70%),
radial-gradient(ellipse 600px 400px at 25% 70%, rgba(212,175,55,0.04) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: ambientGoldShift 12s ease-in-out infinite alternate;
}
@keyframes ambientGoldShift {
0% { opacity: 0.6; transform: scale(1); }
33% { opacity: 0.9; transform: scale(1.05); }
66% { opacity: 0.7; transform: scale(0.98); }
100% { opacity: 1; transform: scale(1.02); }
}
/* Floating gold dust particles — across all sections */
.page-wrapper::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 200vw;
height: 200vh;
background-image:
radial-gradient(1.5px 1.5px at 5% 8%, rgba(212,175,55,0.5) 1px, transparent 0),
radial-gradient(1px 1px at 12% 35%, rgba(247,231,206,0.4) 1px, transparent 0),
radial-gradient(2px 2px at 18% 62%, rgba(212,175,55,0.35) 1px, transparent 0),
radial-gradient(1px 1px at 24% 15%, rgba(183,110,121,0.3) 1px, transparent 0),
radial-gradient(1.5px 1.5px at 31% 78%, rgba(212,175,55,0.4) 1px, transparent 0),
radial-gradient(1px 1px at 37% 42%, rgba(247,231,206,0.35) 1px, transparent 0),
radial-gradient(2px 2px at 44% 88%, rgba(212,175,55,0.3) 1px, transparent 0),
radial-gradient(1.5px 1.5px at 51% 25%, rgba(183,110,121,0.25) 1px, transparent 0),
radial-gradient(1px 1px at 58% 55%, rgba(212,175,55,0.45) 1px, transparent 0),
radial-gradient(2px 2px at 64% 5%, rgba(247,231,206,0.3) 1px, transparent 0),
radial-gradient(1px 1px at 71% 72%, rgba(212,175,55,0.4) 1px, transparent 0),
radial-gradient(1.5px 1.5px at 78% 38%, rgba(183,110,121,0.35) 1px, transparent 0),
radial-gradient(2px 2px at 84% 92%, rgba(212,175,55,0.3) 1px, transparent 0),
radial-gradient(1px 1px at 91% 18%, rgba(247,231,206,0.4) 1px, transparent 0),
radial-gradient(1.5px 1.5px at 96% 65%, rgba(212,175,55,0.35) 1px, transparent 0),
radial-gradient(1px 1px at 7% 48%, rgba(212,175,55,0.3) 1px, transparent 0),
radial-gradient(2px 2px at 42% 12%, rgba(247,231,206,0.25) 1px, transparent 0),
radial-gradient(1px 1px at 67% 95%, rgba(212,175,55,0.4) 1px, transparent 0),
radial-gradient(1.5px 1.5px at 88% 52%, rgba(183,110,121,0.3) 1px, transparent 0),
radial-gradient(1px 1px at 33% 82%, rgba(212,175,55,0.35) 1px, transparent 0);
pointer-events: none;
z-index: 1;
animation: dustFloat 20s linear infinite;
opacity: 0.7;
}
@keyframes dustFloat {
0% { transform: translate(0, 0); }
25% { transform: translate(-3%, -2%); }
50% { transform: translate(-5%, -4%); }
75% { transform: translate(-2%, -6%); }
100% { transform: translate(0, 0); }
}
/* Gold edge light on left & right of entire page */
body::before,
body::after {
content: '';
position: fixed;
top: 0;
width: 150px;
height: 100vh;
pointer-events: none;
z-index: 999;
opacity: 0.4;
}
body::before {
left: 0;
background: linear-gradient(90deg, rgba(212,175,55,0.08) 0%, transparent 100%);
}
body::after {
right: 0;
background: linear-gradient(-90deg, rgba(212,175,55,0.08) 0%, transparent 100%);
}
/* Gold glow spots that drift — large soft orbs */
@keyframes driftOrb1 {
0% { transform: translate(0, 0) scale(1); opacity: 0.04; }
25% { transform: translate(30px, -50px) scale(1.2); opacity: 0.07; }
50% { transform: translate(-20px, -30px) scale(0.9); opacity: 0.05; }
75% { transform: translate(10px, 20px) scale(1.1); opacity: 0.06; }
100% { transform: translate(0, 0) scale(1); opacity: 0.04; }
}
@keyframes driftOrb2 {
0% { transform: translate(0, 0) scale(1); opacity: 0.03; }
33% { transform: translate(-40px, 30px) scale(1.3); opacity: 0.06; }
66% { transform: translate(25px, -40px) scale(0.8); opacity: 0.04; }
100% { transform: translate(0, 0) scale(1); opacity: 0.03; }
}
/* Section-level gold ambience */
.section {
position: relative;
overflow: hidden;
}
.section::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
top: -100px;
right: -100px;
animation: driftOrb1 15s ease-in-out infinite;
}
.section::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(183,110,121,0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
bottom: -80px;
left: -80px;
animation: driftOrb2 18s ease-in-out infinite;
}
/* Alternate orb positions for every other section */
.section:nth-child(even)::before {
top: auto;
bottom: -100px;
right: auto;
left: -100px;
}
.section:nth-child(even)::after {
bottom: auto;
top: -80px;
left: auto;
right: -80px;
}
@keyframes sparkleField {
0% { opacity: 0.4; }
50% { opacity: 0.8; }
100% { opacity: 0.4; }
}
/* Glowing gold borders on section titles */
.section-title {
text-shadow: 0 0 10px rgba(212,175,55,0.2) !important;
}
.section-title::after {
box-shadow: 0 0 10px rgba(212,175,55,0.3), 0 0 20px rgba(212,175,55,0.1) !important;
}
/* ==========================================================
INFLUENCE CARDS — new dedicated card system (replaces services-hover)
========================================================== */
.influence-card {
background: linear-gradient(145deg, #1a1a1a, #242424);
border: 1px solid rgba(212,175,55,0.12);
border-radius: 8px;
padding: 35px 25px 30px;
text-align: center;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
height: 100%;
}
.influence-card:hover {
transform: translateY(-8px);
border-color: rgba(212,175,55,0.5);
box-shadow:
0 8px 30px rgba(212,175,55,0.12),
0 0 50px rgba(212,175,55,0.06),
0 0 80px rgba(212,175,55,0.03);
}
.influence-card-icon {
font-size: 38px;
color: #D4AF37;
margin-bottom: 18px;
transition: transform 0.6s ease, text-shadow 0.4s ease;
}
.influence-card:hover .influence-card-icon {
transform: rotateY(360deg);
text-shadow: 0 0 15px rgba(212,175,55,0.5);
}
.influence-card-title {
font-family: 'Montserrat', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: uppercase;
color: #fff !important;
margin-bottom: 12px;
letter-spacing: 1px;
transition: color 0.3s ease;
}
.influence-card:hover .influence-card-title {
color: #D4AF37 !important;
}
.influence-card-desc {
color: #9A9A9A;
font-size: 14px;
line-height: 1.7;
}
/* ==========================================================
SHOP CARDS
========================================================== */
.shop-card {
background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
border: 1px solid rgba(212,175,55,0.12);
border-radius: 4px;
overflow: hidden;
transition: all 0.3s ease;
}
.shop-card:hover {
border-color: rgba(212,175,55,0.45);
box-shadow: 0 0 25px rgba(212,175,55,0.12);
transform: translateY(-4px);
}
.shop-badge {
position: absolute;
top: 10px;
left: 10px;
background: #D4AF37;
color: #0A0A0A;
padding: 4px 12px;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.shop-card-title {
color: #fff !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 12px !important;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px !important;
}
.shop-card-price {
color: #D4AF37 !important;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.shop-card-btn {
display: inline-block;
border: 1px solid #D4AF37;
color: #D4AF37 !important;
padding: 7px 20px;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none !important;
font-family: 'Montserrat', sans-serif;
transition: all 0.3s ease;
}
.shop-card-btn:hover,
.shop-card-btn:focus {
background: #D4AF37 !important;
color: #0A0A0A !important;
}
/* Fix View Full Store button — override global a:hover gold color */
a[style*="background:#D4AF37"]:hover,
a[style*="background: #D4AF37"]:hover {
color: #0A0A0A !important;
}
/* ==========================================================
LUXURY PARTICLES — floating gold dust across entire page
========================================================== */
@keyframes luxuryFloat {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 0.8; }
100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}
@keyframes luxuryTwinkle {
0%, 100% { opacity: 0.2; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1.2); }
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
background-image:
radial-gradient(1px 1px at 10% 20%, rgba(212,175,55,0.6) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 25% 45%, rgba(232,200,74,0.5) 50%, transparent 50%),
radial-gradient(1px 1px at 40% 15%, rgba(247,231,206,0.4) 50%, transparent 50%),
radial-gradient(2px 2px at 55% 65%, rgba(212,175,55,0.3) 50%, transparent 50%),
radial-gradient(1px 1px at 70% 30%, rgba(183,110,121,0.4) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 85% 55%, rgba(212,175,55,0.5) 50%, transparent 50%),
radial-gradient(1px 1px at 15% 70%, rgba(232,200,74,0.3) 50%, transparent 50%),
radial-gradient(2px 2px at 50% 85%, rgba(212,175,55,0.4) 50%, transparent 50%),
radial-gradient(1px 1px at 90% 10%, rgba(247,231,206,0.5) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 35% 90%, rgba(212,175,55,0.35) 50%, transparent 50%),
radial-gradient(1px 1px at 60% 40%, rgba(183,110,121,0.3) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 5% 50%, rgba(212,175,55,0.45) 50%, transparent 50%),
radial-gradient(1px 1px at 75% 75%, rgba(232,200,74,0.4) 50%, transparent 50%),
radial-gradient(2px 2px at 95% 35%, rgba(212,175,55,0.3) 50%, transparent 50%),
radial-gradient(1px 1px at 20% 95%, rgba(247,231,206,0.35) 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 45% 5%, rgba(212,175,55,0.4) 50%, transparent 50%);
animation: luxuryTwinkle 4s ease-in-out infinite alternate;
}
/* Floating gold orb particles */
.page-wrapper::before {
content: '';
position: fixed;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,0.04) 0%, transparent 70%);
top: 20%;
right: -5%;
pointer-events: none;
z-index: 0;
animation: driftOrb1 12s ease-in-out infinite alternate;
}
.page-wrapper::after {
content: '';
position: fixed;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, rgba(183,110,121,0.03) 0%, transparent 70%);
bottom: 15%;
left: -3%;
pointer-events: none;
z-index: 0;
animation: driftOrb2 15s ease-in-out infinite alternate;
}
/* Gold ambient glow on hero — large soft organic orbs */
.home-page {
position: relative;
overflow: hidden;
}
.home-page::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 120%;
height: 140%;
background:
radial-gradient(ellipse 40% 50% at 20% 50%, rgba(212,175,55,0.12) 0%, transparent 70%),
radial-gradient(ellipse 35% 45% at 80% 30%, rgba(183,110,121,0.08) 0%, transparent 70%),
radial-gradient(ellipse 50% 30% at 50% 80%, rgba(212,175,55,0.06) 0%, transparent 60%),
radial-gradient(ellipse 30% 40% at 70% 70%, rgba(247,231,206,0.07) 0%, transparent 60%);
pointer-events: none;
z-index: 2;
animation: heroGoldBreathe 8s ease-in-out infinite alternate;
}
.home-page::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle 3px at 15% 25%, rgba(212,175,55,0.6) 1px, transparent 2px),
radial-gradient(circle 2px at 35% 65%, rgba(247,231,206,0.5) 1px, transparent 2px),
radial-gradient(circle 3px at 55% 15%, rgba(212,175,55,0.4) 1px, transparent 2px),
radial-gradient(circle 2px at 75% 45%, rgba(183,110,121,0.5) 1px, transparent 2px),
radial-gradient(circle 2px at 25% 85%, rgba(212,175,55,0.45) 1px, transparent 2px),
radial-gradient(circle 3px at 65% 75%, rgba(247,231,206,0.4) 1px, transparent 2px),
radial-gradient(circle 2px at 85% 20%, rgba(212,175,55,0.5) 1px, transparent 2px),
radial-gradient(circle 2px at 45% 50%, rgba(183,110,121,0.35) 1px, transparent 2px),
radial-gradient(circle 3px at 10% 60%, rgba(247,231,206,0.45) 1px, transparent 2px),
radial-gradient(circle 2px at 90% 80%, rgba(212,175,55,0.4) 1px, transparent 2px);
pointer-events: none;
z-index: 2;
animation: dustFloat 25s linear infinite;
opacity: 0.6;
}
@keyframes heroGoldBreathe {
0% { opacity: 0.6; transform: scale(1) rotate(0deg); }
50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
100% { opacity: 0.7; transform: scale(0.98) rotate(-1deg); }
}
/* Enhanced gold glow on skill bars */
.skillbar-bar {
box-shadow: 0 0 8px rgba(212,175,55,0.4), 0 0 16px rgba(212,175,55,0.15) !important;
}
/* Gold line separators between sections */
.section + .section {
border-top: 1px solid rgba(212,175,55,0.08) !important;
}
/* Facts section — organic gold glow wash */
.section-facts {
position: relative;
overflow: hidden;
}
.section-facts::before {
content: '';
position: absolute;
top: -50%;
left: -25%;
width: 150%;
height: 200%;
background:
radial-gradient(ellipse 60% 50% at 30% 50%, rgba(212,175,55,0.1) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 70% 40%, rgba(183,110,121,0.07) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 50% 70%, rgba(247,231,206,0.08) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
animation: heroGoldBreathe 10s ease-in-out infinite alternate;
}
.section-facts::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle 2px at 8% 20%, rgba(212,175,55,0.6) 1px, transparent 2px),
radial-gradient(circle 1.5px at 22% 60%, rgba(247,231,206,0.5) 1px, transparent 2px),
radial-gradient(circle 2px at 38% 30%, rgba(212,175,55,0.45) 1px, transparent 2px),
radial-gradient(circle 1.5px at 52% 80%, rgba(183,110,121,0.4) 1px, transparent 2px),
radial-gradient(circle 2px at 68% 15%, rgba(212,175,55,0.5) 1px, transparent 2px),
radial-gradient(circle 1.5px at 82% 55%, rgba(247,231,206,0.45) 1px, transparent 2px),
radial-gradient(circle 2px at 92% 75%, rgba(212,175,55,0.4) 1px, transparent 2px);
pointer-events: none;
z-index: 1;
animation: sparkleField 6s ease-in-out infinite alternate;
}
/* Gold shimmer on streaming buttons */
.streaming-link {
position: relative !important;
overflow: hidden !important;
}
.streaming-link::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.2), transparent) !important;
transition: left 0.5s ease !important;
}
.streaming-link:hover::before {
left: 100% !important;
}
.streaming-link:hover {
background: rgba(212,175,55,0.1) !important;
box-shadow: 0 0 20px rgba(212,175,55,0.2) !important;
}
/* Enhanced testimonials — organic gold atmosphere */
.section-testimonials {
position: relative;
overflow: hidden;
}
.section-testimonials::before {
content: '';
position: absolute;
top: -30%;
left: -20%;
width: 140%;
height: 160%;
background:
radial-gradient(ellipse 50% 60% at 20% 40%, rgba(212,175,55,0.08) 0%, transparent 60%),
radial-gradient(ellipse 45% 50% at 80% 60%, rgba(183,110,121,0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 20%, rgba(247,231,206,0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
animation: ambientGoldShift 14s ease-in-out infinite alternate;
}
.testimonials-quote p {
position: relative;
}
.testimonials-quote-img img {
box-shadow: 0 0 20px rgba(212,175,55,0.25), 0 0 40px rgba(212,175,55,0.1) !important;
}
/* Footer — golden atmosphere */
.section-footer {
position: relative;
overflow: hidden;
}
.section-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse 50% 80% at 50% 0%, rgba(212,175,55,0.06) 0%, transparent 60%),
radial-gradient(ellipse 30% 50% at 10% 50%, rgba(183,110,121,0.04) 0%, transparent 50%),
radial-gradient(ellipse 30% 50% at 90% 50%, rgba(247,231,206,0.04) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.section-footer .section-content {
position: relative;
z-index: 2;
}
/* Gold accent on about quote */
.quotations {
border-left: 2px solid rgba(212,175,55,0.3) !important;
padding-left: 20px !important;
}
/* Golden glow on submit button */
.submit-button {
position: relative !important;
overflow: hidden !important;
}
.submit-button::after {
content: '' !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%) !important;
animation: goldGlow 3s ease-in-out infinite !important;
pointer-events: none !important;
}
/* Enhanced preloader with gold shimmer */
#preloader {
background: #0A0A0A !important;
}
/* Navigation toggle bars — gold */
.navigation-toggle-bars {
background: #D4AF37 !important;
}
/* Ensure section content stays above particle overlays */
.section .container,
.section .container-fluid {
position: relative;
z-index: 2;
}
.facts-counter-wrapper {
position: relative;
z-index: 2;
}
/* ==========================================================
END OF KAREN KARDASHA LUXURY GOLD THEME
========================================================== */