/* Enhanced styling for table of contents */
:root {
--gold-gradient: linear-gradient(135deg, #ffcb45 0%, #ffdf65 100%);
--gold-gradient-animated: linear-gradient(135deg, #ffdf65 0%, #ffcb45 50%, #ffdf65 100%);
--gold-subtle: rgba(255, 203, 69, 0.8);
--gold-muted: rgba(255, 203, 69, 0.5);
--gold-accent: #ffcb45;
--dark-overlay: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
--heading-font: 'Teko', sans-serif;
}
body {
background-color: #0c0c0c !important;
background-image: none !important;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0;
color: #e4e4e4;
}
.chapter-page {
background-color: #121212;
background-image:
radial-gradient(circle at 10% 0%, rgba(228, 170, 54, 0.07) 0%, transparent 40%),
radial-gradient(circle at 90% 90%, rgba(228, 170, 54, 0.07) 0%, transparent 40%);
border-radius: 4px;
border: 1px solid rgba(228, 170, 54, 0.15);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
margin: 2rem auto;
max-width: 1200px;
overflow: hidden;
}
/* Enhanced, more elegant header */
.header {
background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%);
border-bottom: 1px solid rgba(228, 170, 54, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 3rem;
position: relative;
overflow: hidden;
}
.header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--gold-gradient);
opacity: 0.6;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 70% 50%, rgba(228, 170, 54, 0.08) 0%, transparent 70%);
opacity: 0.1;
z-index: 0;
}
.header-logo-container {
position: relative;
z-index: 2;
width: 250px;
height: auto;
}
.header-logo {
width: 100%;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
transition: all 0.3s ease;
}
.header-logo-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(228, 170, 54, 0.15) 0%, transparent 70%);
filter: blur(10px);
z-index: -1;
}
.header-title-container {
position: relative;
z-index: 2;
}
.header-title {
font-family: var(--heading-font);
font-size: 32pt;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 3px;
text-shadow: 0 2px 10px rgba(228, 170, 54, 0.3);
position: relative;
text-transform: uppercase;
}
.header-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 60px;
height: 3px;
background: var(--gold-gradient);
}
/* Cover page styling */
.cover-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 70vh;
padding: 3rem;
text-align: center;
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),
url('https://images.unsplash.com/photo-1517029729535-f92e34cf6899?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.cover-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(228, 170, 54, 0.2) 0%, transparent 70%);
z-index: 1;
}
.cover-content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: linear-gradient(to top, rgba(18, 18, 18, 1), transparent);
z-index: 1;
}
.cover-logo {
width: 300px;
filter: drop-shadow(0 4px 12px rgba(228, 170, 54, 0.4));
margin-bottom: 2rem;
position: relative;
z-index: 2;
animation: gentle-pulse 4s infinite ease-in-out;
}
@keyframes gentle-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.cover-title {
font-family: var(--heading-font);
font-size: 48pt;
margin: 0 0 1rem;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 2px;
text-shadow: 0 2px 15px rgba(228, 170, 54, 0.5);
position: relative;
z-index: 2;
text-transform: uppercase;
animation: fadeInUp 1s ease-out forwards;
}
.cover-subtitle {
font-family: 'Lato', sans-serif;
font-size: 20pt;
color: #ffffff;
margin: 0 0 2rem;
margin-top:10px;
position: relative;
z-index: 2;
font-weight: 300;
letter-spacing: 2px;
opacity: 0;
animation: fadeInUp 1s ease-out 0.3s forwards;
}
.cover-tagline {
max-width: 600px;
font-size: 16pt;
line-height: 1.6;
margin-bottom: 3rem;
position: relative;
z-index: 2;
color: rgba(255, 255, 255, 0.9);
opacity: 0;
animation: fadeInUp 1s ease-out 0.6s forwards;
}
.cover-decor {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--gold-gradient);
z-index: 3;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Table of contents styling */
.chapter-content {
padding: 3rem;
position: relative;
background: linear-gradient(0deg, rgba(228, 170, 54, 0.02) 0%, transparent 100%);
}
.toc-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 2rem;
}
.toc-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(228, 170, 54, 0.15);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
}
.toc-item:nth-child(2) { animation-delay: 0.1s; }
.toc-item:nth-child(3) { animation-delay: 0.2s; }
.toc-item:nth-child(4) { animation-delay: 0.3s; }
.toc-item:nth-child(5) { animation-delay: 0.4s; }
.toc-item:nth-child(6) { animation-delay: 0.5s; }
.toc-item:nth-child(7) { animation-delay: 0.6s; }
.toc-item:nth-child(8) { animation-delay: 0.7s; }
.toc-item:nth-child(9) { animation-delay: 0.8s; }
.toc-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--gold-gradient);
opacity: 0;
transition: opacity 0.3s ease;
}
.toc-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
background: rgba(228, 170, 54, 0.05);
border-color: rgba(228, 170, 54, 0.3);
}
.toc-item:hover::before {
opacity: 1;
}
.toc-item-left {
display: flex;
flex-direction: column;
}
.toc-chapter {
font-family: var(--heading-font);
font-size: 1.5rem;
color: #e4aa36;
margin-bottom: 0.5rem;
letter-spacing: 1px;
}
.toc-title {
font-size: 1.2rem;
color: #ffffff;
font-weight: 400;
}
.toc-item:hover .toc-title {
color: #f2c94c;
}
.toc-item::after {
content: '\2192'; /* Unicode right arrow */
font-size: 1.5rem;
color: rgba(228, 170, 54, 0.5);
transition: all 0.3s ease;
opacity: 0;
transform: translateX(-20px);
}
.toc-item:hover::after {
opacity: 1;
transform: translateX(0);
}
.highlight-box {
margin-top: 3rem;
padding: 2rem;
background: linear-gradient(135deg, rgba(228, 170, 54, 0.1) 0%, rgba(228, 170, 54, 0.05) 100%);
border-radius: 8px;
border: 1px solid rgba(228, 170, 54, 0.2);
position: relative;
overflow: hidden;
opacity: 0;
animation: fadeInUp 0.8s ease-out 0.6s forwards;
}
.highlight-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 70% 30%, rgba(228, 170, 54, 0.15) 0%, transparent 70%);
opacity: 0.5;
}
.highlight-box p {
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.highlight-box p:last-child {
margin-bottom: 0;
}
.highlight-box strong {
color: #e4aa36;
}
/* Scroll indicator */
.scroll-indicator {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--gold-gradient);
z-index: 1000;
width: 0%;
transition: width 0.2s ease;
}
/* Enhanced navigation buttons */
.nav-buttons {
display: flex;
justify-content: space-between;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
.start-button, .next-button {
background: linear-gradient(135deg, #111111 0%, #222222 100%);
color: #e4aa36;
padding: 12px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
border: 1px solid rgba(228, 170, 54, 0.3);
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
margin: 0 10px;
white-space: nowrap;
opacity: 0;
animation: fadeInUp 0.6s ease-out 0.8s forwards;
}
.start-button:hover, .next-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
border-color: rgba(228, 170, 54, 0.6);
color: #f2c94c;
}
.start-button::before, .next-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(228, 170, 54, 0.1) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.start-button:hover::before, .next-button:hover::before {
opacity: 1;
}
.next-button .arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.next-button:hover .arrow {
transform: translateX(3px);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.header {
flex-direction: column;
align-items: center;
padding: 1.5rem;
}
.header-logo-container {
width: 180px !important;
margin-bottom: 1rem;
}
.header-title {
font-size: 24pt !important;
text-align: center;
}
.cover-content {
padding: 2rem 1rem;
}
.cover-logo {
width: 200px;
}
.cover-title {
font-size: 32pt;
}
.cover-subtitle {
font-size: 16pt;
}
.cover-tagline {
font-size: 14pt;
}
.chapter-content {
padding: 2rem 1.5rem;
}
.toc-chapter {
font-size: 1.2rem;
}
.toc-title {
font-size: 1rem;
}
.nav-buttons {
flex-direction: column;
gap: 15px;
align-items: center;
}
.start-button, .next-button {
width: 100%;
text-align: center;
margin: 0;
}
}
/* Site Footer */
.site-footer {
padding: 1.5rem 0;
margin-top: 2rem;
text-align: center;
border-top: 1px solid rgba(228, 170, 54, 0.2);
}
.footer-content {
max-width: 800px;
margin: 0 auto;
}
.footer-links {
margin-bottom: 0.8rem;
}
.footer-link {
color: #e4aa36;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.footer-link:hover {
color: #f2c94c;
text-decoration: underline;
}
.footer-divider {
margin: 0 10px;
color: rgba(228, 170, 54, 0.5);
}
.footer-copyright {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.cover-content.certificate-style {
padding: 0;
min-height: 90vh;
background-image: url('illustrations/editorial_pose_female_model_red_skirt_black_gloves_vintage_aesthetic.jpg');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cover-content.certificate-style::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.4) 40%,
rgba(0, 0, 0, 0.4) 60%,
rgba(0, 0, 0, 0.7) 100%
), radial-gradient(circle at 70% 30%, rgba(228, 170, 54, 0.1) 0%, transparent 70%) !important;
z-index: 1;
}
.cover-content.certificate-style .certificate-top,
.cover-content.certificate-style .certificate-middle,
.cover-content.certificate-style .certificate-bottom {
position: relative;
z-index: 2;
}
/* Logo and header section */
.cover-content.certificate-style .certificate-logo {
width: 180px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
transition: all 0.5s ease;
margin: 15px auto;
display: block;
}
.cover-content.certificate-style .certificate-subtitle-text.presents {
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
margin: 8px 0 3px;
position: relative;
display: inline-block;
padding: 4px 15px;
}
/* Main title styling - more book-like */
.cover-content.certificate-style .certificate-title-text {
font-size: 32px;
line-height: 1.1;
font-weight: 700;
color: #e4aa36;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 8px 0;
padding: 8px 16px;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(228, 170, 54, 0.3);
position: relative;
border: 1px solid rgba(228, 170, 54, 0.6);
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.5);
}
/* Subtitle styling - more concise */
.cover-content.certificate-style .certificate-subtitle-text.tagline {
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
margin: 15px auto 25px;
color: #fff;
position: relative;
display: inline-block;
padding: 5px 12px;
background: rgba(0, 0, 0, 0.6);
border-radius: 2px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
border-left: 1px solid #e4aa36;
border-right: 1px solid #e4aa36;
}
/* Completely new ultra-sleek bullet points design with enhanced animation and effects */
.cover-content.certificate-style .cert-bullet-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
padding: 0;
margin: 15px 0;
list-style-type: none;
}
.cover-content.certificate-style .cert-bullet-list li {
position: relative;
width: calc(50% - 6px);
font-size: 14px;
line-height: 1.4;
background: rgba(0, 0, 0, 0.4);
padding: 12px 15px 12px 65px;
border-radius: 8px;
backdrop-filter: blur(4px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(228, 170, 54, 0.2);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(228, 170, 54, 0.05);
overflow: hidden;
z-index: 1;
}
.cover-content.certificate-style .cert-bullet-list li:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50px;
background: var(--gold-gradient);
z-index: 1;
transition: all 0.3s ease;
}
.cover-content.certificate-style .cert-bullet-list li:after {
content: '�';
position: absolute;
left: 19px;
top: 50%;
transform: translateY(-50%);
color: #000;
font-weight: 900;
font-size: 24px;
z-index: 2;
transition: all 0.3s ease;
}
.cover-content.certificate-style .cert-bullet-list li:hover {
transform: translateX(5px) translateY(-5px);
background: rgba(0, 0, 0, 0.65);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(228, 170, 54, 0.2);
border-color: rgba(228, 170, 54, 0.4);
}
.cover-content.certificate-style .cert-bullet-list li:hover:before {
background-image: linear-gradient(135deg, #f2c94c 0%, #e4aa36 50%, #f2c94c 100%);
box-shadow: 0 0 20px rgba(228, 170, 54, 0.6);
animation: shimmer 2s infinite linear;
background-size: 200% 100%;
}
.cover-content.certificate-style .cert-bullet-list li:hover:after {
transform: translateY(-50%) scale(1.2);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@keyframes shimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.cover-content.certificate-style .cert-bullet-list li strong {
display: block;
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 50%, #e4aa36 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 18px;
margin-bottom: 5px;
letter-spacing: 1px;
text-shadow: 0 2px 10px rgba(228, 170, 54, 0.3);
text-transform: uppercase;
transition: all 0.3s ease;
}
.cover-content.certificate-style .cert-bullet-list li:hover strong {
text-shadow: 0 0 15px rgba(228, 170, 54, 0.6);
letter-spacing: 1.2px;
}
/* Enhanced button animation */
.instant-access-button {
position: relative;
margin: 30px auto 20px;
text-align: center;
width: fit-content;
}
.instant-access-button a {
display: inline-block;
background: linear-gradient(135deg, #111111 0%, #222222 100%);
color: #e4aa36;
padding: 14px 28px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
border: 1px solid rgba(228, 170, 54, 0.3);
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
white-space: nowrap;
}
.instant-access-button a:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
border-color: rgba(228, 170, 54, 0.6);
color: #f2c94c;
}
.instant-access-button a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(228, 170, 54, 0.1) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.instant-access-button a:hover::before {
opacity: 1;
}
.instant-access-button a span svg {
margin-left: 8px;
vertical-align: middle;
transition: transform 0.3s ease;
}
.instant-access-button a:hover span svg {
transform: translateX(3px);
}
.free-badge {
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 100%);
color: #000000;
padding: 12px 30px;
border-radius: 50px;
font-weight: bold;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
margin: 25px auto 30px;
display: inline-block;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
transition: all 0.3s ease;
overflow: hidden;
}
.free-badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.free-badge:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(228, 170, 54, 0.4);
}
.free-badge:hover::before {
opacity: 1;
}
/* Integration styles for certificate cover and TOC */
.chapter-page.certificate-intro {
margin-bottom: 0;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.chapter-page.toc-section {
margin-top: 0;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #0c0c0c;
}
.section-transition {
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background: linear-gradient(to bottom, rgba(18, 18, 18, 0.9), #0c0c0c);
overflow: hidden;
}
.transition-arrow {
font-size: 28px;
color: #e4aa36;
animation: bounce 2s infinite;
position: relative;
z-index: 5;
opacity: 0.8;
}
.transition-line {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(228, 170, 54, 0.3), transparent);
transform: translate(-50%, -50%);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}
.toc-intro {
text-align: center;
margin-bottom: 20px;
color: #e4aa36;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Visual consistency between sections */
.header {
margin-top: 0;
background: linear-gradient(180deg, #0c0c0c 0%, #141414 100%);
}
.cover-content.certificate-style {
padding: 0;
min-height: 85vh;
background-image: url('illustrations/editorial_pose_female_model_red_skirt_black_gloves_vintage_aesthetic.jpg');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cover-content.certificate-style::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.4) 40%,
rgba(0, 0, 0, 0.4) 60%,
rgba(0, 0, 0, 0.7) 100%
), radial-gradient(circle at 70% 30%, rgba(228, 170, 54, 0.1) 0%, transparent 70%) !important;
z-index: 1;
}
.toc-item {
border-color: rgba(228, 170, 54, 0.2);
}
/* Common gold accent styling */
.toc-chapter, .certificate-title-text, .certificate-free-text {
color: #e4aa36;
}
@media (max-width: 768px) {
.section-transition {
height: 60px;
}
}
/* Message styling */
.certificate-message {
font-size: 16px;
line-height: 1.5;
max-width: 80%;
margin: 0px auto 0;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.6);
padding: 25px 30px;
border-radius: 8px;
border: 1px solid rgba(228, 170, 54, 0.4);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
font-weight: 400;
text-align: left;
position: relative;
z-index: 2;
}
.certificate-message p {
margin-bottom: 12px;
}
.certificate-message .message-title {
color: #e4aa36;
font-weight: 700;
font-size: 18px;
margin-bottom: 15px;
letter-spacing: 0.5px;
}
.certificate-message .message-signature {
font-style: italic;
text-align: right;
margin-top: 15px;
color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 768px) {
.certificate-message {
font-size: 14px;
padding: 20px;
max-width: 90%;
}
.certificate-message .message-title {
font-size: 16px;
}
}
.certificate-style {
position: relative;
}
.instant-access-button {
position: absolute;
bottom: 30px;
transform: translateX(-50%);
z-index: 10;
animation: float 3s ease-in-out infinite;
}
.instant-access-button a {
display: block;
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 100%);
color: #000;
font-weight: 700;
letter-spacing: 1px;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 5px 25px rgba(228, 170, 54, 0.5);
text-transform: uppercase;
font-size: 16px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.instant-access-button a:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(228, 170, 54, 0.7);
}
.instant-access-button a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.instant-access-button a:hover::before {
left: 100%;
}
.instant-access-button a span {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.instant-access-button a span svg {
margin-left: 8px;
animation: bounce 1s infinite alternate;
}
@keyframes float {
0% { transform: translateX(-50%) translateY(0px); }
50% { transform: translateX(-50%) translateY(-8px); }
100% { transform: translateX(-50%) translateY(0px); }
}
@keyframes bounce {
from { transform: translateX(0); }
to { transform: translateX(5px); }
}
@media (max-width: 768px) {
.instant-access-button a {
padding: 12px 20px;
font-size: 14px;
}
}
.cover-content.certificate-style .certificate-course-description .intro-text {
margin: 15px 0;
font-size: 17px;
line-height: 1.5;
text-align: center;
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(228, 170, 54, 0.3);
padding-bottom: 15px;
margin-bottom: 20px;
}
/* Custom styles for the certificate subtitle and bullet points */
.cover-content.certificate-style .certificate-subtitle-text.tagline {
font-size: 28px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
margin: 25px auto;
color: #fff;
position: relative;
display: inline-block;
padding: 10px 30px;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
border-left: 3px solid #e4aa36;
border-right: 3px solid #e4aa36;
}
.cover-content.certificate-style .certificate-subtitle-text.tagline:before,
.cover-content.certificate-style .certificate-subtitle-text.tagline:after {
content: '';
position: absolute;
top: 50%;
width: 60px;
height: 2px;
background: linear-gradient(90deg, rgba(228, 170, 54, 0), #e4aa36, rgba(228, 170, 54, 0));
transform: translateY(-50%);
}
.cover-content.certificate-style .certificate-subtitle-text.tagline:before {
left: -70px;
}
.cover-content.certificate-style .certificate-subtitle-text.tagline:after {
right: -70px;
}
.cover-content.certificate-style .certificate-course-description .course-headline {
font-weight: 800;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 32px;
margin-bottom: 10px;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(228, 170, 54, 0.5);
position: relative;
display: block;
padding-bottom: 15px;
}
.cover-content.certificate-style .certificate-course-description .free-tag {
display: block;
width: max-content;
font-weight: 700;
font-size: 18px;
color: #000;
background: var(--gold-gradient);
padding: 8px 24px;
border-radius: 30px;
margin: 15px auto 25px;
text-align: center;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(228, 170, 54, 0.3);
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
z-index: 2;
transform: rotate(-1deg);
transition: all 0.3s ease;
}
.cover-content.certificate-style .certificate-course-description .free-tag:hover {
transform: rotate(0deg) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(228, 170, 54, 0.4);
}
.cover-content.certificate-style .cert-bullet-list {
padding-left: 0;
margin-top: 25px;
list-style-type: none;
}
.cover-content.certificate-style .cert-bullet-list li {
position: relative;
margin-bottom: 14px;
font-size: 16px;
line-height: 1.4;
background: rgba(0, 0, 0, 0.5);
padding: 12px 15px 12px 30px;
border-radius: 8px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
overflow: hidden;
}
.cover-content.certificate-style .cert-bullet-list li:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20px;
background: var(--gold-gradient);
z-index: 1;
}
.cover-content.certificate-style .cert-bullet-list li:after {
content: '�';
position: absolute;
left: 19px;
top: 50%;
transform: translateY(-50%);
color: #000;
font-weight: 900;
font-size: 24px;
z-index: 2;
}
.cover-content.certificate-style .cert-bullet-list li:hover {
transform: translateX(5px) translateY(-3px);
background: rgba(0, 0, 0, 0.6);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(228, 170, 54, 0.3);
}
.cover-content.certificate-style .cert-bullet-list li:hover:before {
background: linear-gradient(135deg, #f2c94c 0%, #e4aa36 100%);
box-shadow: 0 0 15px rgba(228, 170, 54, 0.6);
}
.cover-content.certificate-style .cert-bullet-list li strong {
display: block;
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 50%, #e4aa36 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 18px;
margin-bottom: 5px;
letter-spacing: 1px;
text-shadow: none;
text-transform: uppercase;
}
/* End custom styles */
/* NEW - Ultra premium header section with advanced styling */
.premium-header-section {
position: relative;
padding: 80px 0 50px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
z-index: 5;
}
.premium-header-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
z-index: -1;
}
.premium-header-logo {
width: 220px;
margin-bottom: 40px;
filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.6));
position: relative;
z-index: 5;
animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(1deg); }
100% { transform: translateY(0) rotate(0deg); }
}
.premium-header-presents {
font-size: 16px;
letter-spacing: 12px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 35px;
font-weight: 300;
position: relative;
overflow: hidden;
display: inline-block;
padding: 0 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
animation: fadeSlideUp 0.8s ease-out;
}
.premium-header-presents::before,
.premium-header-presents::after {
content: '';
position: absolute;
top: 50%;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
animation: expandWidth 1.5s ease-out forwards;
transform: scaleX(0);
transform-origin: center;
}
.premium-header-presents::before {
left: -65px;
}
.premium-header-presents::after {
right: -65px;
}
@keyframes expandWidth {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
.title-container {
position: relative;
margin-bottom: 25px;
padding: 25px 40px;
border: 1px solid transparent;
background: rgba(0, 0, 0, 0.5);
max-width: 85%;
transform-style: preserve-3d;
perspective: 1000px;
animation: fadeScale 1s ease-out;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.title-container::before {
content: '';
position: absolute;
inset: -3px;
border: 2px solid transparent;
background: linear-gradient(135deg, var(--gold-accent), transparent 30%, transparent 70%, var(--gold-accent)) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: borderGlow 4s linear infinite;
}
@keyframes borderGlow {
0% { filter: drop-shadow(0 0 8px rgba(228, 170, 54, 0.4)); }
50% { filter: drop-shadow(0 0 15px rgba(228, 170, 54, 0.7)); }
100% { filter: drop-shadow(0 0 8px rgba(228, 170, 54, 0.4)); }
}
.premium-header-title {
font-family: var(--heading-font);
font-size: 55px;
line-height: 1.1;
letter-spacing: 2px;
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 50%, #e4aa36 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
margin: 0;
padding: 0;
text-shadow: 0 2px 15px rgba(228, 170, 54, 0.5);
position: relative;
animation: titleShine 8s linear infinite;
background-size: 200% auto;
word-spacing: 0.1em; /* Add word spacing */
}
@keyframes titleShine {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.premium-header-subtitle {
position: relative;
font-size: 20px;
font-weight: 400;
letter-spacing: 4px;
text-transform: uppercase;
color: #fff;
margin: 0 0 25px;
padding: 15px 30px;
display: inline-block;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.6), transparent);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
animation: fadeSlideUp 1.2s ease-out;
}
.premium-header-subtitle::before,
.premium-header-subtitle::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-color: var(--gold-accent);
opacity: 0.8;
}
.premium-header-subtitle::before {
top: 0;
left: 0;
border-top: 1px solid var(--gold-accent);
border-left: 1px solid var(--gold-accent);
animation: cornerFadeIn 1.5s ease-out forwards;
}
.premium-header-subtitle::after {
bottom: 0;
right: 0;
border-bottom: 1px solid var(--gold-accent);
border-right: 1px solid var(--gold-accent);
animation: cornerFadeIn 1.5s ease-out forwards;
}
@keyframes cornerFadeIn {
0% { width: 0; height: 0; opacity: 0; }
100% { width: 30px; height: 30px; opacity: 0.8; }
}
.tagline-container {
position: relative;
margin-bottom: 40px;
padding: 25px 40px;
background: rgba(0, 0, 0, 0.6);
max-width: 90%;
border-radius: 6px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
transform: perspective(1000px) rotateX(2deg);
animation: fadeSlideUp 1.4s ease-out;
overflow: hidden;
}
.tagline-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
animation: shine 8s infinite linear;
}
@keyframes shine {
0% { transform: rotate(30deg) translateX(-100%); }
100% { transform: rotate(30deg) translateX(100%); }
}
.premium-header-tagline {
font-family: var(--heading-font);
font-size: 38px;
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 50%, #e4aa36 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0;
animation: pulse 4s infinite ease-in-out;
text-shadow: 0 0 10px rgba(228, 170, 54, 0.3);
}
@keyframes pulse {
0% { text-shadow: 0 0 10px rgba(228, 170, 54, 0.3); }
50% { text-shadow: 0 0 20px rgba(228, 170, 54, 0.6); }
100% { text-shadow: 0 0 10px rgba(228, 170, 54, 0.3); }
}
.premium-header-badge {
display: inline-block;
padding: 10px 20px;
background: rgba(0, 0, 0, 0.5);
color: rgba(228, 170, 54, 0.9);
font-weight: 500;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 2px;
position: relative;
overflow: hidden;
animation: fadeScale 1.6s ease-out;
border: 1px solid rgba(228, 170, 54, 0.3);
backdrop-filter: blur(4px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.premium-header-badge::before,
.premium-header-badge::after {
content: '';
position: absolute;
width: 15px;
height: 1px;
background: rgba(228, 170, 54, 0.6);
top: 50%;
transform: translateY(-50%);
}
.premium-header-badge::before {
left: -25px;
}
.premium-header-badge::after {
right: -25px;
}
.premium-header-badge:hover {
background: rgba(0, 0, 0, 0.6);
color: rgba(228, 170, 54, 1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.premium-header-badge {
font-size: 13px;
padding: 8px 16px;
}
}
/* Animation keyframes */
@keyframes fadeSlideUp {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeScale {
0% { opacity: 0; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
/* 3D corner accents */
.corner-accent {
position: absolute;
width: 80px;
height: 80px;
pointer-events: none;
z-index: 2;
opacity: 0;
animation: fadeIn 1.8s ease-out forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.top-left {
top: 0;
left: 0;
border-top: 2px solid var(--gold-accent);
border-left: 2px solid var(--gold-accent);
box-shadow: -5px -5px 15px rgba(228, 170, 54, 0.3);
}
.top-right {
top: 0;
right: 0;
border-top: 2px solid var(--gold-accent);
border-right: 2px solid var(--gold-accent);
box-shadow: 5px -5px 15px rgba(228, 170, 54, 0.3);
}
.bottom-left {
bottom: 0;
left: 0;
border-bottom: 2px solid var(--gold-accent);
border-left: 2px solid var(--gold-accent);
box-shadow: -5px 5px 15px rgba(228, 170, 54, 0.3);
}
.bottom-right {
bottom: 0;
right: 0;
border-bottom: 2px solid var(--gold-accent);
border-right: 2px solid var(--gold-accent);
box-shadow: 5px 5px 15px rgba(228, 170, 54, 0.3);
}
/* Particle effect */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.particle {
position: absolute;
display: block;
background: rgba(228, 170, 54, 0.2);
border-radius: 50%;
pointer-events: none;
}
.particle:nth-child(1) {
width: 6px;
height: 6px;
top: 20%;
left: 20%;
animation: particleFloat 15s infinite linear;
}
.particle:nth-child(2) {
width: 8px;
height: 8px;
top: 70%;
left: 80%;
animation: particleFloat 25s infinite linear;
}
.particle:nth-child(3) {
width: 5px;
height: 5px;
top: 40%;
left: 60%;
animation: particleFloat 20s infinite linear;
}
.particle:nth-child(4) {
width: 7px;
height: 7px;
top: 80%;
left: 10%;
animation: particleFloat 18s infinite linear;
}
.particle:nth-child(5) {
width: 4px;
height: 4px;
top: 30%;
left: 90%;
animation: particleFloat 22s infinite linear;
}
@keyframes particleFloat {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(30px, 20px) rotate(90deg); }
50% { transform: translate(0, 40px) rotate(180deg); }
75% { transform: translate(-30px, 20px) rotate(270deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}
@media (max-width: 768px) {
.premium-header-section {
padding: 50px 15px 40px;
}
.premium-header-logo {
width: 180px;
margin-bottom: 25px;
}
.premium-header-presents {
font-size: 14px;
letter-spacing: 8px;
margin-bottom: 25px;
}
.title-container {
max-width: 95%;
padding: 15px 20px;
margin-bottom: 35px;
}
.premium-header-title {
font-size: 38px;
letter-spacing: 1px;
}
.premium-header-subtitle {
font-size: 16px;
letter-spacing: 3px;
margin-bottom: 35px;
padding: 10px 20px;
}
.tagline-container {
max-width: 95%;
padding: 20px 25px;
margin-bottom: 30px;
}
.premium-header-tagline {
font-size: 28px;
}
.premium-header-badge {
font-size: 16px;
padding: 12px 25px;
}
.corner-accent {
width: 50px;
height: 50px;
}
}
/* Premium description section styling */
.premium-content-section {
position: relative !important;
z-index: 1 !important;
overflow: hidden !important;
margin: 0 auto 58px;
max-width: 90%;
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.5);
border-radius: 6px;
padding: 40px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(228, 170, 54, 0.15);
animation: fadeSlideUp 1.2s ease-out;
}
.premium-section-header {
text-align: center;
font-family: var(--heading-font);
font-size: 32px;
margin: 0 0 25px;
color: var(--gold-accent);
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
text-shadow: 0 2px 10px rgba(228, 170, 54, 0.3);
position: relative;
display: inline-block;
width: 100%;
}
.premium-section-header::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: var(--gold-gradient);
opacity: 0.8;
}
.premium-intro {
font-size: 18px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
text-align: center;
// margin-bottom: 30px;
font-weight: 400;
max-width: 90%;
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 20px;
}
.premium-content-headline {
font-family: var(--heading-font);
font-size: 36px;
text-align: center;
margin: 0 0 25px;
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 50%, #e4aa36 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
}
.premium-bullet-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
list-style-type: none;
padding: 0;
margin: 25px 0;
}
.premium-bullet-item {
position: relative;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(228, 170, 54, 0.3);
border-radius: 8px;
padding: 18px 20px 18px 55px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.premium-bullet-item:hover {
transform: translateY(-5px);
border-color: #e4aa36;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 15px rgba(228, 170, 54, 0.2);
}
.premium-bullet-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #e4aa36, #f2c94c);
transition: all 0.3s ease;
}
.premium-bullet-item:hover::before {
width: 8px;
}
.premium-bullet-icon {
position: absolute;
left: 20px;
top: 22px;
font-size: 20px;
color: #e4aa36;
background: linear-gradient(135deg, #e4aa36, #f2c94c);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
transition: all 0.3s ease;
animation: pulse-glow 2s infinite alternate;
}
@keyframes pulse-glow {
0% {
text-shadow: 0 0 5px rgba(228, 170, 54, 0.5);
transform: scale(1);
}
100% {
text-shadow: 0 0 15px rgba(228, 170, 54, 0.8), 0 0 30px rgba(228, 170, 54, 0.4);
transform: scale(1.25);
}
}
.premium-bullet-item:hover .premium-bullet-icon {
animation: pulse-glow-fast 0.6s infinite alternate;
}
@keyframes pulse-glow-fast {
0% {
text-shadow: 0 0 8px rgba(228, 170, 54, 0.7);
transform: scale(1.2);
}
100% {
text-shadow: 0 0 20px rgba(228, 170, 54, 1), 0 0 40px rgba(228, 170, 54, 0.6);
transform: scale(1.4);
}
}
.premium-bullet-title {
display: block;
font-size: 18px;
font-weight: 700;
color: #e4aa36;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.premium-bullet-item:hover .premium-bullet-title {
transform: translateX(5px);
color: #f2c94c;
text-shadow: 0 0 10px rgba(228, 170, 54, 0.3);
}
.premium-bullet-text {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
transition: all 0.3s ease;
}
.premium-bullet-item:hover .premium-bullet-text {
color: #ffffff;
}
@media (max-width: 768px) {
.premium-bullet-list {
grid-template-columns: 1fr;
}
.premium-bullet-item {
padding: 15px 15px 15px 50px;
}
.premium-bullet-icon {
left: 15px;
top: 18px;
}
.premium-bullet-title {
font-size: 16px;
}
}
/* Free emphasis styling */
.free-emphasis {
color: #ffcb45;
font-weight: 700;
font-size: 1em;
letter-spacing: 0.5px;
text-transform: uppercase;
text-shadow: 0 0 5px rgba(255, 203, 69, 0.5);
}
.free-badge {
position: absolute;
top: -15px;
right: -15px;
background: linear-gradient(135deg, #ffcb45 0%, #ffdf65 50%, #ffcb45 100%);
color: #000;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
padding: 8px 15px;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 203, 69, 0.4);
letter-spacing: 1px;
transform: rotate(5deg);
z-index: 10;
animation: pulse 2s infinite ease-in-out;
}
.premium-subtitle {
text-align: center;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
margin: 3px 0 30px;
font-style: italic;
line-height: 1.5;
}
.premium-subtitle .free-emphasis {
font-style: normal;
}
.free-footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(255, 203, 69, 0.2);
font-size: 18px;
font-weight: 600;
color: #fff;
letter-spacing: 0.5px;
}
.free-callout {
display: inline-block;
animation: pulse 2s infinite ease-in-out;
font-weight: 700;
color: #ffcb45;
text-shadow: 0 0 8px rgba(255, 203, 69, 0.6);
}
@media (max-width: 768px) {
.free-badge {
font-size: 12px;
padding: 6px 12px;
top: -10px;
right: -10px;
}
.premium-subtitle {
font-size: 14px;
margin: 3px 0 25px;
}
.free-footer {
font-size: 16px;
margin-top: 25px;
}
}
/* Style for the new section header */
.premium-section-header {
text-align: center;
font-family: var(--heading-font);
font-size: 32px;
margin: 0 0 25px;
background: linear-gradient(135deg, #e4aa36 0%, #f2c94c 50%, #e4aa36 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
text-shadow: 0 2px 10px rgba(228, 170, 54, 0.3);
position: relative;
display: inline-block;
width: 100%;
}
.premium-section-header::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: var(--gold-gradient);
opacity: 0.8;
}
@media (max-width: 768px) {
.premium-section-header {
font-size: 26px;
letter-spacing: 1px;
}
}
/* Advanced cinematic background transition effect */
.cinematic-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0;
}
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.05);
transition: opacity 2s ease-in-out, transform 10s ease-out, filter 3s ease;
opacity: 0;
z-index: 1;
filter: brightness(0.8) contrast(1.05) saturate(1) blur(0px);
}
.bg-image.active {
opacity: 0.95;
transform: scale(1.15);
filter: brightness(0.9) contrast(1.05) saturate(1.1) blur(0px);
animation: subtle-enhance 10s forwards ease-out;
}
.bg-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
mix-blend-mode: multiply;
}
@keyframes subtle-enhance {
0% {
filter: brightness(0.7) contrast(1.05) saturate(0.9) blur(1px);
transform: scale(1.05);
}
30% {
filter: brightness(0.85) contrast(1.05) saturate(1.1) blur(0px);
transform: scale(1.1);
}
70% {
filter: brightness(0.95) contrast(1.05) saturate(1.15) blur(0px);
transform: scale(1.13);
}
100% {
filter: brightness(0.9) contrast(1.05) saturate(1.1) blur(0px);
transform: scale(1.15);
}
}
/* Advanced 3D parallax effects */
.parallax-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: transform;
transition: transform 0.1s linear;
}
.floating-particle-system {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 3;
}
/* Glowing particles with advanced behavior */
.glow-particle {
position: absolute;
border-radius: 50%;
filter: blur(6px);
opacity: 0;
background: radial-gradient(circle at center, rgba(255, 203, 69, 0.8) 0%, rgba(255, 203, 69, 0.2) 50%, transparent 70%);
animation: float-appear 10s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
mix-blend-mode: screen;
}
@keyframes float-appear {
0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
10% { opacity: 0.8; transform: translate(10px, -10px) scale(1); }
50% { opacity: 0.5; transform: translate(20px, -30px) scale(0.8); }
90% { opacity: 0.2; transform: translate(5px, -60px) scale(0.6); }
100% { opacity: 0; transform: translate(0, -70px) scale(0.2); }
}
/* Glitter effect particles */
.glitter {
position: absolute;
width: 4px;
height: 4px;
background-color: rgba(255, 203, 69, 0.8);
border-radius: 50%;
pointer-events: none;
opacity: 0;
z-index: 5;
box-shadow: 0 0 6px 2px rgba(255, 203, 69, 0.4);
animation: glitter-fade 3s infinite linear;
}
@keyframes glitter-fade {
0% { opacity: 0; transform: scale(0.3); }
50% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.3); }
}
/* Light rays effect */
.light-rays {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 0%, rgba(255, 203, 69, 0.05) 50%, transparent 100%);
mix-blend-mode: overlay;
z-index: 2;
opacity: 0;
transform: translateY(-30%) rotate(0deg) scale(2);
animation: ray-rotate 20s infinite linear;
pointer-events: none;
}
@keyframes ray-rotate {
0% { opacity: 0; transform: translateY(-30%) rotate(0deg) scale(2); }
20% { opacity: 0.5; transform: translateY(-10%) rotate(72deg) scale(2); }
40% { opacity: 0.3; transform: translateY(10%) rotate(144deg) scale(2); }
60% { opacity: 0.5; transform: translateY(30%) rotate(216deg) scale(2); }
80% { opacity: 0.3; transform: translateY(10%) rotate(288deg) scale(2); }
100% { opacity: 0; transform: translateY(-30%) rotate(360deg) scale(2); }
}
/* Liquid wave animation at the bottom */
.liquid-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 180px;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
z-index: 5;
animation: wave-move 20s linear infinite;
opacity: 0.7;
pointer-events: none;
}
.liquid-wave:nth-child(2) {
height: 150px;
background: url('data:image/svg+xml;utf8,');
animation: wave-move 15s linear infinite;
animation-delay: -5s;
opacity: 0.4;
}
@keyframes wave-move {
0% { background-position: 0 0; }
100% { background-position: 100% 0; }
}
/* 3D depth dust particles */
.dust-particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
pointer-events: none;
opacity: 0.3;
animation: dust-float 25s infinite linear;
z-index: 3;
}
@keyframes dust-float {
0% { transform: translate3d(0, 0, 0) rotate(0deg); }
25% { transform: translate3d(100px, 50px, 50px) rotate(90deg); }
50% { transform: translate3d(50px, 100px, -50px) rotate(180deg); }
75% { transform: translate3d(-50px, 50px, 50px) rotate(270deg); }
100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}
/* Ripple effect */
.ripple {
position: absolute;
border: 2px solid rgba(255, 203, 69, 0.4);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
animation: ripple-effect 3s ease-out forwards;
z-index: 4;
}
@keyframes ripple-effect {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(10); opacity: 0; }
}
/* Dynamic spotlight effect */
.spotlight {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle at center, rgba(255, 203, 69, 0.2) 0%, transparent 70%);
border-radius: 50%;
filter: blur(30px);
opacity: 0;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 2;
animation: spotlight-pulse 8s infinite ease-in-out;
mix-blend-mode: screen;
}
@keyframes spotlight-pulse {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.2); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
/* Vignette effect */
.vignette {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 150px 60px rgba(0, 0, 0, 0.8);
pointer-events: none;
z-index: 4;
}
/* Premium 3D effect for content boxes */
.premium-content-section {
transform-style: preserve-3d;
perspective: 1000px;
}
.premium-content-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
transform: translateZ(-10px);
z-index: -1;
}
/* Advanced smoke effect */
.smoke-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.smoke {
position: absolute;
width: 300px;
height: 300px;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
opacity: 0;
filter: blur(40px);
pointer-events: none;
z-index: 2;
mix-blend-mode: screen;
animation: smoke-rise 20s infinite ease-out;
}
@keyframes smoke-rise {
0% { opacity: 0; transform: translateY(100px) scale(1); }
20% { opacity: 0.2; transform: translateY(50px) scale(1.2); }
80% { opacity: 0.1; transform: translateY(-100px) scale(1.5); }
100% { opacity: 0; transform: translateY(-200px) scale(2); }
}
/* Magnetic text effect */
.magnetic-text {
display: inline-block;
transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
cursor: default;
}
/* Sparkling stars */
.star {
position: absolute;
width: 2px;
height: 2px;
background-color: white;
border-radius: 50%;
opacity: 0;
z-index: 3;
animation: twinkle 5s infinite ease-in-out;
}
.star::before, .star::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
border-radius: 50%;
}
.star::before {
transform: rotate(45deg) scale(5, 1);
opacity: 0.3;
}
.star::after {
transform: rotate(-45deg) scale(5, 1);
opacity: 0.3;
}
@keyframes twinkle {
0%, 100% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1); }
}
/* Camera flash effect */
.camera-flash {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0;
pointer-events: none;
z-index: 1000;
}
/* Lens flare */
.lens-flare {
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
filter: blur(10px);
opacity: 0;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 3;
mix-blend-mode: screen;
}
/* Color overlay effect for mood transitions */
.color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(76, 0, 128, 0.3) 0%, rgba(255, 0, 0, 0.1) 100%);
opacity: 0;
pointer-events: none;
z-index: 2;
mix-blend-mode: overlay;
transition: opacity 4s ease-in-out;
}
.color-overlay.active {
opacity: 1;
}
/* Floating elements with mouse interaction */
.floating-element {
position: absolute;
z-index: 5;
opacity: 0.7;
pointer-events: none;
transition: transform 0.3s ease-out;
border-radius: 50%;
}
.floating-element.top-left {
top: 10%;
left: 10%;
width: 100px;
height: 100px;
/*border-top: 1px solid rgba(228, 170, 54, 0.4);
border-left: 1px solid rgba(228, 170, 54, 0.4);*/
animation: float-rotate 25s infinite linear;
}
.floating-element.bottom-right {
bottom: 15%;
right: 15%;
width: 150px;
height: 150px;
border: 1px solid rgba(228, 170, 54, 0.2);
border-radius: 50%;
animation: float-scale 15s infinite alternate ease-in-out;
}
.floating-element.center {
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: radial-gradient(circle at center, rgba(228, 170, 54, 0.05) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: pulse-scale 10s infinite alternate ease-in-out;
}
@keyframes float-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes float-scale {
0% { transform: scale(0.8); opacity: 0.2; }
100% { transform: scale(1.2); opacity: 0.4; }
}
@keyframes pulse-scale {
0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.2; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
}
/* Additional mobile fixes for outline and spacing issues */
@media (max-width: 768px) {
.title-container, .tagline-container {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: rgba(0, 0, 0, 0.5) !important;
}
.title-container::before, .tagline-container::before,
.title-container::after, .tagline-container::after {
display: none !important;
}
.corner-accent {
display: none !important;
}
.floating-element, .parallax-layer {
display: none !important;
}
/* Fix spacing of titles on mobile */
.premium-header-title {
font-size: 32px !important;
letter-spacing: 1px !important;
word-spacing: 4px !important;
}
.premium-header-tagline {
font-size: 22px !important;
word-spacing: 4px !important;
}
.premium-header-badge {
font-size: 14px !important;
}
}
/* Remove any square outlines from all elements */
.title-container, .tagline-container, .premium-content-section, .certificate-message,
.floating-element, .corner-accent, .premium-header-section, .chapter-page {
}
.title-container::before, .tagline-container::before {
border-radius: 0 !important;
outline: none !important;
}
/* Add more hypnotic wave effects - DISABLED */
.hypnotic-wave {
display: none !important; /* Disabled to prevent visual issues */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, transparent 0%, transparent 60%, rgba(228, 170, 54, 0.05) 100%);
opacity: 0;
z-index: -100;
pointer-events: none;
mix-blend-mode: overlay;
}
@keyframes hypnotic-pulse {
0% { transform: scale(0.8); opacity: 0.1; }
50% { transform: scale(1.2); opacity: 0.3; }
100% { transform: scale(0.8); opacity: 0.1; }
}
/* Add neon glow effects to various elements */
.neon-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 30px rgba(228, 170, 54, 0.2);
opacity: 0;
pointer-events: none;
z-index: 3;
animation: neon-flicker 8s infinite;
}
@keyframes neon-flicker {
0%, 100% { opacity: 0; }
5%, 10% { opacity: 0.1; }
15% { opacity: 0.3; }
20%, 80% { opacity: 0; }
85%, 90% { opacity: 0.2; }
95% { opacity: 0; }
}
/* Add laser beam effect */
.laser-beam {
position: absolute;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(228, 170, 54, 0.7), transparent);
transform-origin: center;
opacity: 0;
pointer-events: none;
z-index: 4;
filter: blur(1px);
animation: laser-sweep 25s infinite ease-in-out;
}
@keyframes laser-sweep {
0%, 100% { opacity: 0; transform: translateX(-100%) rotate(0deg); }
10%, 90% { opacity: 0.7; }
50% { transform: translateX(200%) rotate(0deg); }
}
/* Add floating holographic elements */
.holographic-element {
position: absolute;
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(228, 170, 54, 0.05) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(228, 170, 54, 0.05) 100%);
border-radius: 0;
transform: rotate(45deg);
opacity: 0.2;
pointer-events: none;
z-index: 2;
filter: blur(3px);
animation: holo-float 20s infinite ease-in-out;
mix-blend-mode: screen;
}
@keyframes holo-float {
0% { transform: rotate(45deg) translateY(0) scale(1); opacity: 0.1; }
50% { transform: rotate(225deg) translateY(-20px) scale(1.2); opacity: 0.3; }
100% { transform: rotate(405deg) translateY(0) scale(1); opacity: 0.1; }
}
/* Cinematic blinking dots effect */
.cinematic-dot {
position: absolute;
width: 4px;
height: 4px;
background-color: rgba(228, 170, 54, 0.7);
border-radius: 50%;
opacity: 0;
pointer-events: none;
z-index: 3;
filter: blur(1px);
animation: dot-blink 4s infinite;
}
@keyframes dot-blink {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
/* Neo-pixel trails effect */
.pixel-trail {
display: none !important; /* Completely hide pixel trails */
position: absolute;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(228, 170, 54, 0.3), transparent);
opacity: 0;
pointer-events: none;
z-index: 2;
animation: trail-move 15s infinite linear;
}
@keyframes trail-move {
0% { opacity: 0; transform: translateY(-100%); }
10% { opacity: 0.05; }
90% { opacity: 0.05; }
100% { opacity: 0; transform: translateY(100%); }
}
/* Remove the laser-beam effect that's causing vertical lines */
.laser-beam {
display: none !important;
}
/* Add a CSS rule to remove any vertical borders or lines */
.cover-content.certificate-style,
.premium-content-section,
.title-container,
.tagline-container,
.certificate-message,
.premium-header-section {
background-image: none !important;
border-left: none !important;
border-right: none !important;
}
.cover-content.certificate-style::before {
/* Keep the gradient overlay but remove any vertical lines */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.4) 40%,
rgba(0, 0, 0, 0.4) 60%,
rgba(0, 0, 0, 0.7) 100%
), radial-gradient(circle at 70% 30%, rgba(228, 170, 54, 0.1) 0%, transparent 70%) !important;
}
/* Additional CSS to remove any potential vertical lines */
*::before, *::after {
border-left: none !important;
border-right: none !important;
}
/* Update the script to not create laser beams */
document.addEventListener('DOMContentLoaded', function() {
// Remove any existing laser beams
document.querySelectorAll('.laser-beam').forEach(el => el.remove());
});
/* Remove vertical lines effect */
body::before {
content: none !important;
}
body::after {
content: none !important;
}
/* Prevent any background patterns that might create vertical lines */
body, html, .chapter-page, .cover-content, .premium-header-section {
background-image: none !important;
}
/* Target specific vertical line elements */
.vertical-line,
.animated-line,
.laser-beam,
.grid-overlay,
.grid-effect,
.vertical-gradient {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Remove any vertical borders that might create lines */
* {
border-left: none !important;
border-right: none !important;
}
/* Fix for any ::after or ::before pseudo-elements that might create vertical lines */
*::before, *::after {
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
}
/* Add a dark radial gradient instead for depth without lines */
body::before {
content: '' !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: radial-gradient(circle at center, rgba(20, 20, 20, 1) 0%, rgba(12, 12, 12, 1) 100%) !important;
z-index: -1 !important;
}
/* Reset the body::before with the fixed background */
body::before {
content: none !important;
}
/* Add a background limited to the premium-content-section */
.premium-content-section {
position: relative !important;
z-index: 1 !important;
overflow: hidden !important;
}
.premium-content-section::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: radial-gradient(circle at center, rgba(20, 20, 20, 1) 0%, rgba(10, 10, 10, 1) 100%) !important;
z-index: -1 !important;
opacity: 0.85 !important;
}
/* Add animated gradients below the premium-content-section */
.certificate-message {
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
background: rgba(12, 12, 12, 0.7) !important;
}
.certificate-message::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(45deg,
rgba(20, 20, 20, 1) 0%,
rgba(30, 30, 30, 1) 25%,
rgba(20, 20, 20, 1) 50%,
rgba(30, 30, 30, 1) 75%,
rgba(20, 20, 20, 1) 100%) !important;
z-index: -1 !important;
background-size: 400% 400% !important;
animation: gradient-shift 15s ease infinite !important;
opacity: 0.9 !important;
}
@keyframes gradient-shift {
0% { background-position: 0% 50% }
50% { background-position: 100% 50% }
100% { background-position: 0% 50% }
}
/* Add subtle animated particles to the certificate-message section */
.certificate-message::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image:
radial-gradient(circle at 10% 20%, rgba(228, 170, 54, 0.05) 0%, transparent 15%),
radial-gradient(circle at 90% 80%, rgba(228, 170, 54, 0.05) 0%, transparent 15%),
radial-gradient(circle at 50% 50%, rgba(228, 170, 54, 0.05) 0%, transparent 25%) !important;
z-index: -1 !important;
animation: pulse-glow 8s ease-in-out infinite alternate !important;
opacity: 0.6 !important;
}
@keyframes pulse-glow {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.7; transform: scale(1.1); }
}
/* Fix mobile viewport scaling issues */
@media (max-width: 768px) {
body, html {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
.certificate-message::before,
.premium-content-section::before {
background-size: 100% 100% !important;
transform: none !important;
}
}
/* Hide all laser beams with CSS only */
.laser-beam {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Additional CSS to remove any potential vertical lines */
*::before, *::after {
border-left: none !important;
border-right: none !important;
}
/* Hide laser beams with CSS only instead of using JavaScript */
.laser-beam {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Remove vertical lines effect */
body::before {
content: none !important;
}
body::after {
content: none !important;
}
/* Prevent any background patterns that might create vertical lines */
body, html, .chapter-page, .cover-content, .premium-header-section {
background-image: none !important;
}
/* Make sure all background elements are properly horizontally centered */
.premium-content-section::before,
.certificate-message::before,
.certificate-message::after,
.cinematic-background,
.bg-image {
background-position: center top !important;
background-repeat: no-repeat !important;
background-size: cover !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
max-width: 100vw !important;
}
/* Fix for square particles - ensure all particle elements are circular */
.particles .particle,
.particle,
.glow-particle,
.glitter,
.dust-particle {
border-radius: 50% !important;
overflow: hidden !important;
}
/* Enhanced floating element animations */
.floating-element {
position: absolute;
z-index: 5;
opacity: 0.7;
pointer-events: none;
transition: transform 0.3s ease-out;
animation: enhanced-float 20s infinite alternate ease-in-out;
}
.floating-element.top-left {
top: 10%;
left: 10%;
width: 100px;
height: 100px;
border-top: 1px solid rgba(228, 170, 54, 0.4);
border-left: 1px solid rgba(228, 170, 54, 0.4);
animation: enhanced-float-rotate 25s infinite linear;
}
.floating-element.bottom-right {
bottom: 15%;
right: 15%;
width: 150px;
height: 150px;
border: 1px solid rgba(228, 170, 54, 0.2);
border-radius: 50%;
animation: enhanced-float-scale 15s infinite alternate ease-in-out;
}
.floating-element.center {
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: radial-gradient(circle at center, rgba(228, 170, 54, 0.05) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: enhanced-pulse-scale 10s infinite alternate ease-in-out;
}
@keyframes enhanced-float-rotate {
0% { transform: rotate(0deg) translate(0, 0); }
25% { transform: rotate(90deg) translate(20px, 15px); }
50% { transform: rotate(180deg) translate(0, 30px); }
75% { transform: rotate(270deg) translate(-20px, 15px); }
100% { transform: rotate(360deg) translate(0, 0); }
}
@keyframes enhanced-float-scale {
0% { transform: scale(0.8) translate(0, 0); opacity: 0.2; }
25% { transform: scale(0.9) translate(15px, -15px); opacity: 0.3; }
50% { transform: scale(1.1) translate(30px, 0); opacity: 0.4; }
75% { transform: scale(1.0) translate(15px, 15px); opacity: 0.3; }
100% { transform: scale(1.2) translate(0, 30px); opacity: 0.4; }
}
@keyframes enhanced-pulse-scale {
0% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); opacity: 0.2; }
25% { transform: translate(-45%, -52%) scale(1.1) rotate(5deg); opacity: 0.3; }
50% { transform: translate(-50%, -55%) scale(1.3) rotate(0deg); opacity: 0.4; }
75% { transform: translate(-55%, -52%) scale(1.1) rotate(-5deg); opacity: 0.3; }
100% { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); opacity: 0.5; }
}
/* Shooting stars effect */
.shooting-star {
position: absolute;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(228, 170, 54, 1));
border-radius: 50%;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
opacity: 0;
z-index: 6;
pointer-events: none;
animation: shooting-star-animation 3s ease-out infinite;
}
.shooting-star::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 2px;
background: linear-gradient(90deg, rgba(228, 170, 54, 0.3), transparent);
border-radius: 50%;
filter: blur(1px);
}
@keyframes shooting-star-animation {
0% {
opacity: 0;
width: 0;
transform: translateX(0) translateY(0);
}
10% {
opacity: 1;
width: 100px;
}
20%, 100% {
opacity: 0;
width: 0;
transform: translateX(100vw) translateY(50vh);
}
}
/* FPS counter styles */
#fps-counter {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
z-index: 9999;
user-select: none;
display: none;
}
/* Debug panel styles */
#effects-debug-panel {
position: fixed;
top: 40px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(228, 170, 54, 0.4);
color: #fff;
padding: 15px;
border-radius: 6px;
font-family: sans-serif;
font-size: 14px;
z-index: 9999;
width: 200px;
display: none;
max-height: 80vh;
overflow-y: auto;
}
#effects-debug-panel h3 {
margin: 0 0 10px;
color: #e4aa36;
font-size: 16px;
border-bottom: 1px solid rgba(228, 170, 54, 0.3);
padding-bottom: 5px;
}
#effects-debug-panel label {
display: block;
margin: 8px 0;
cursor: pointer;
}
#effects-debug-panel input[type="checkbox"] {
margin-right: 8px;
}
#debug-toggle {
position: fixed;
top: 10px;
right: 10px;
background: rgba(228, 170, 54, 0.8);
color: #000;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
z-index: 10000;
}
#debug-toggle:hover {
background: rgba(228, 170, 54, 1);
}
/* Fix for square particles - ensure all particle elements are circular */
.particles .particle,
.particle,
.glow-particle,
.glitter,
.dust-particle {
border-radius: 50% !important;
overflow: hidden !important;
}
/* FPS counter styles */
#fps-counter {
position: fixed;
display:block;
width: 100px;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
z-index: 9999;
user-select: none;
}
/* Effects toggle button */
#effects-toggle {
position: fixed;
top: 10px;
right: 90px;
background: rgba(228, 170, 54, 0.8);
color: #000;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
z-index: 10000;
font-family: sans-serif;
font-size: 14px;
width:100px;
}
#effects-toggle:hover {
background: rgba(228, 170, 54, 1);
}
/* Remove disabled effects */
.light-rays,
.liquid-wave,
.liquid-wave:nth-child(2),
.ripple,
.spotlight,
.vignette,
.smoke-container,
.smoke,
.star,
.lens-flare,
.color-overlay,
.floating-element,
.shooting-star {
display: none;
}
/* Add these rules to prevent text flickering during animations and scrolling on mobile */
/* Hardware acceleration for premium header section */
.premium-header-section {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Fix for yellow text elements that flicker during scroll/animation */
.premium-header-title,
.premium-header-subtitle,
.premium-header-tagline,
.premium-header-presents,
.premium-header-badge,
.premium-section-header,
.free-emphasis,
.premium-content-headline,
.premium-subtitle,
.free-badge,
.premium-bullet-title,
.free-footer,
.free-callout,
.featured-quote,
.bullet-list strong,
.toc-title,
.toc-chapter {
/* Prevent text layer conflicts with animations */
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
/* Force text to render on its own layer */
isolation: isolate;
/* Reduce repaint during animations */
z-index: 5;
position: relative;
}
/* Specifically target any elements with yellow text color */
.premium-header-tagline,
.premium-header-badge,
.free-emphasis,
.free-badge,
.free-callout,
.featured-quote,
[style*="color: #e4aa36"],
[style*="color:#e4aa36"] {
/* Extra protection for yellow text elements */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Optimize background transitions to reduce impact on text rendering */
.bg-image {
/* Force background images onto their own layer */
will-change: opacity, transform;
/* Reduce animations on mobile */
@media (max-width: 768px) {
transition-property: opacity;
transition-duration: 700ms;
}
}
/* Adjust animation performance on mobile */
@media (max-width: 768px) {
/* Reduce animation complexity on mobile */
.cinematic-background,
.fog-effect,
.mystery-overlay {
will-change: auto; /* Hint to browser about animation properties */
transform: translateZ(0);
}
/* Optimize animation timings on mobile */
@keyframes fog-drift {
0% { background-position: 0 0; }
100% { background-position: 100% 100%; }
}
/* Use more efficient box-shadow for mobile */
.vignette-effect {
box-shadow: inset 0 0 80px 30px rgba(0,0,0,0.4);
}
}
/* Mobile optimization for background images to prevent text flickering */
@media (max-width: 768px) {
/* Simplify background transitions on mobile to prevent flickering */
.bg-image {
transition: opacity 700ms ease-out !important;
transform: none !important;
animation: none !important;
filter: brightness(0.9) !important;
will-change: opacity !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bg-image.active {
opacity: 0.95 !important;
transform: none !important;
filter: brightness(0.9) saturate(1.1) !important;
}
/* Force text to stay on top layer on mobile */
.premium-header-title,
.premium-header-subtitle,
.premium-header-tagline,
.premium-header-presents,
.premium-header-badge,
.premium-section-header,
.free-emphasis,
.free-badge,
.free-callout,
.featured-quote {
z-index: 10 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* Higher stacking context for text */
position: relative;
/* Text rendering optimizations */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Prevent repaints */
will-change: transform;
}
/* Reduce animation complexity for background container */
.cinematic-background {
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Reduce frequency of background changes on mobile */
@keyframes slow-change {
0% { opacity: 0.95; }
100% { opacity: 0.95; }
}
}
/* Mobile responsive fixes for background images */
@media (max-width: 768px) {
.cinematic-background,
.bg-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background-position: center center !important;
background-size: cover !important;
transform: none !important;
}
.premium-header-section {
overflow: hidden !important;
position: relative !important;
}
.premium-content-section {
padding: 20px !important;
}
.cover-content.certificate-style {
background-position: center center !important;
}
/* Fix for positioning on small screens */
.premium-bullet-icon {
position: absolute;
left: 15px;
top: 18px;
font-size: 18px;
}
/* Improve text readability on mobile */
.premium-intro {
font-size: 16px !important;
line-height: 1.5 !important;
}
.premium-content-headline {
font-size: 28px !important;
}
.premium-subtitle {
font-size: 16px !important;
}
/* Responsive header adjustments */
.premium-header-title {
font-size: 32px !important;
margin: 10px 0 !important;
}
.premium-header-subtitle {
font-size: 18px !important;
}
.premium-header-presents {
font-size: 12px !important;
}
}
/* Add decorative line styling */
.decorative-line {
height: 2px;
width: 180px;
background: linear-gradient(90deg, rgba(228, 170, 54, 0), rgba(228, 170, 54, 1), rgba(228, 170, 54, 0));
margin: 15px auto 25px;
position: relative;
}
.decorative-line::after {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 4px;
background: rgba(228, 170, 54, 0.3);
filter: blur(2px);
border-radius: 2px;
}
/* Free Bubble Badge Styling */
.free-bubble-badge {
position: absolute;
bottom: -15px;
right: -15px;
z-index: 100;
animation: float-badge 2s ease-in-out infinite alternate, appear 0.8s ease forwards;
transform-origin: center center;
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
transform: scale(0.75) rotate(-8deg);
}
.free-bubble-inner {
background: linear-gradient(135deg, #ffcb45 0%, #f2c94c 100%);
color: #000;
font-weight: 800;
font-size: 14px;
padding: 8px 14px;
border-radius: 50px;
position: relative;
text-align: center;
letter-spacing: 0.5px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.5);
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.3);
transform: rotate(-5deg);
animation: pulse-glow-badge 1.5s infinite alternate;
}
.free-bubble-inner::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 50px;
background: linear-gradient(135deg, rgba(255, 203, 69, 0.5) 0%, rgba(242, 201, 76, 0.2) 100%);
animation: pulse-outline 1.5s infinite alternate;
z-index: -1;
}
/* Mobile responsiveness for badge */
@media (max-width: 768px) {
.free-bubble-badge {
bottom: -10px;
right: -5px;
transform: scale(0.65) rotate(-8deg);
}
.free-bubble-inner {
font-size: 12px;
padding: 6px 12px;
}
}
/* Share Button and Modal Styling */
.share-button {
position: fixed;
bottom: 25px;
right: 25px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f2c94c 0%, #e4aa36 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
z-index: 1000;
transition: all 0.3s ease;
}
.share-button svg {
color: #000;
transition: transform 0.3s ease;
}
.share-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(228, 170, 54, 0.3);
}
.share-button:hover svg {
transform: scale(1.1);
}
.share-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1001;
align-items: center;
justify-content: center;
}
.share-modal.active {
display: flex;
animation: fadeIn 0.3s ease;
}
.share-modal-content {
background-color: #121212;
width: 90%;
max-width: 500px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
animation: scaleIn 0.3s ease;
}
.share-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: linear-gradient(to right, #121212, #1a1a1a);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.share-modal-header h3 {
color: #f2c94c;
margin: 0;
font-weight: 700;
font-size: 18px;
}
.close-modal {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.close-modal:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.share-modal-body {
padding: 20px;
color: #fff;
}
.share-buttons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin: 15px 0;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 6px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
color: #fff;
font-weight: 600;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.share-btn svg {
margin-right: 8px;
width: 18px;
height: 18px;
fill: currentColor;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.share-btn.facebook {
background-color: #3b5998;
}
.share-btn.twitter {
background-color: #1da1f2;
}
.share-btn.linkedin {
background-color: #0077b5;
}
.share-btn.whatsapp {
background-color: #25d366;
}
.share-btn.email {
background-color: #ea4335;
}
.share-btn.copy {
background-color: #6c757d;
}
.copy-link-area {
margin-top: 15px;
position: relative;
}
#copy-link-input {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.05);
color: #fff;
font-size: 14px;
}
#copy-confirmation {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background-color: #4caf50;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
#copy-confirmation.show {
opacity: 1;
}
.native-share-message {
text-align: center;
margin: 20px 0;
font-size: 18px;
}
/* Alert for when sharing is not supported */
.share-error {
background-color: #ff5252;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
display: none;
}
/* Animation keyframes */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes scaleIn {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.share-button {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
}
.share-buttons {
grid-template-columns: repeat(2, 1fr);
}
}