/* ==========================================================================
AMRI Institute - Premium Luxury Dark Mode System Style
========================================================================== */
:root {
--text-navy: #0A2540;
--navy-deep: #051626;
--navy-card: #091F34;
--accent-gold: #C8A24A;
--bg-light: #051626;
--bg-white: #FFFFFF;
--light-gray: #0D2B47;
--text-body: #E2E8F0;
--text-muted: #A0AEC0;
--text-light-muted: #CBD5E1;
--transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
/* Premium Gradient Tokens */
--gradient-luxury-bg: linear-gradient(135deg, #030F1B 0%, #051626 50%, #0A2540 100%);
--gradient-luxury-card: linear-gradient(145deg, #091F34 0%, #051626 100%);
--gradient-gold-metallic: linear-gradient(135deg, #DFBA6B 0%, #C8A24A 50%, #9A7B31 100%);
/* Dynamic Matrix Runtime Coordinate Hooks */
--t-m-x: 12vw; --t-m-y: 215px;
--t-s-x: 18vw; --t-s-y: 215px;
--t-b-x: 24vw; --t-b-y: 215px;
--t-phone-x: 65vw; --t-phone-y: 180px;
}
/* --- Foundation Resets --- */
body {
font-family: 'Inter', sans-serif;
background: var(--gradient-luxury-bg); /* Flat color replaced with luxury radial/linear flow */
background-attachment: fixed;
color: var(--text-body);
overflow-x: hidden;
}
h1, h2, h3, h4, .font-premium {
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
/* Scrollbar Integration */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb { background: var(--accent-gold); border-radius: 3px; }
/* --- Structure Framework Styling --- */
.section-padding { padding: 90px 0; }
.bg-navy-deep { background: var(--gradient-luxury-bg); }
.bg-navy-card { background: var(--gradient-luxury-card); }
.section-title {
color: var(--bg-white);
font-weight: 700;
font-size: 2.3rem;
text-align: center;
margin-bottom: 12px;
}
.section-title::after {
content: ''; display: block; width: 45px; height: 3px;
background: var(--gradient-gold-metallic); margin: 15px auto 0 auto;
}
.section-subtitle {
color: var(--text-muted);
text-align: center;
max-width: 580px;
margin: 0 auto 55px auto;
font-size: 1rem;
}
/* --- Loader Architecture --- */
#loader {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: var(--gradient-luxury-bg); z-index: 10000;
display: flex; justify-content: center; align-items: center;
transition: opacity 0.4s ease;
}
.navy-spinner {
width: 45px; height: 45px;
border: 3px solid rgba(200, 162, 74, 0.1);
border-radius: 50%; border-top-color: var(--accent-gold);
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* --- Top Navigation Header --- */
/* =========================
NAVBAR MAIN (FIXED SIZE)
========================= */
.navbar {
width: calc(100% - 40px);
margin: 12px auto;
padding: 18px 24px;
background: transparent;
border: 1px solid transparent;
border-radius: 18px;
/* Force crisp rendering for the navbar container */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Only transition specific properties to prevent render glitches */
transition:
background 0.45s ease,
backdrop-filter 0.45s ease,
-webkit-backdrop-filter 0.45s ease,
box-shadow 0.45s ease,
border 0.45s ease;
}
/* =========================
NAVBAR SCROLLED
ONLY VISUAL CHANGE
========================= */
.navbar.scrolled {
/* Slightly increased opacity (0.85) prevents background content from bleeding through and causing visual noise/blur */
background: rgba(5, 22, 38, 0.85) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.35),
0 -2px 10px rgba(255, 255, 255, 0.04),
-6px 0 16px rgba(0, 0, 0, 0.12),
6px 0 16px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255,255,255,0.08);
}
/* =========================
BRAND TEXT
========================= */
.navbar-brand {
font-weight: 400;
font-size: .8rem;
font-family: Georgia, "Times New Roman", serif;
letter-spacing: 1.5px;
color: var(--bg-white, #ffffff) !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.1;
-webkit-font-smoothing: antialiased;
}
.navbar-brand.hide-brand {
opacity: 0;
transform: translateY(-15px);
pointer-events: none;
/* Specific transitions only */
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* =========================
LOGO IMAGE (FIXED SIZE)
========================= */
.brand-logo-img {
height: 70px;
width: auto;
object-fit: contain;
}
/* =========================
NAV LINKS (CONSOLIDATED & FIXED)
========================= */
.navbar-nav .nav-link {
color: #ffffff !important;
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 12px;
text-decoration: none;
/* CRITICAL FIX: Force crisp text rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* CRITICAL FIX: Only transition color and opacity. NEVER use 'all' or 'transform' on text. */
transition: color 0.3s ease, opacity 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--accent-gold, #d4af37) !important;
opacity: 1; /* Keep it solid. Fading opacity on blurred backgrounds looks washed out/blurry. */
/* CRITICAL FIX: REMOVED transform: translateY(-2px).
Moving text on the Y-axis over a backdrop-filter background causes
sub-pixel rendering blur and distortion in all major browsers. */
}
/* =========================
TOGGLER
========================= */
.navbar-toggler {
border: none;
box-shadow: none !important;
}
.navbar-toggler:focus {
box-shadow: none !important;
outline: none !important;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.navbar {
width: calc(100% - 20px);
margin: 10px auto;
padding: 16px 18px;
border-radius: 14px;
}
.navbar-brand {
font-size: 0.9rem;
}
.brand-logo-img {
height: 70px;
}
.navbar-nav .nav-link {
margin: 6px 0;
display: inline-block; /* Helps with mobile tap targets and clean rendering */
}
}
/* --- Premium Buttons Layout --- */
.btn-navy-cta {
background: var(--gradient-gold-metallic);
color: var(--navy-deep) !important;
font-size: 0.8rem; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
padding: 12px 26px; border-radius: 4px;
transition: var(--transition-premium);
border: 1px solid var(--accent-gold);
}
.btn-navy-cta:hover {
background: var(--bg-white);
border-color: var(--bg-white);
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(200, 162, 74, 0.4);
}
.btn-outline-light-custom {
background: transparent; color: var(--bg-white);
border: 1px solid rgba(255, 255, 255, 0.3);
font-size: 0.8rem; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
padding: 12px 26px; border-radius: 4px;
transition: var(--transition-premium);
}
.btn-outline-light-custom:hover {
background: var(--bg-white);
color: var(--navy-deep);
transform: translateY(-1px);
}
/* ==========================================================================
SPORTS BOOK STADIUM BACKDROP & HERO AREA
========================================================================== */
.hero-section {
padding: 160px 0 100px 0;
background: var(--gradient-luxury-bg);
min-height: 95vh;
position: relative;
overflow: hidden;
}
.sportsbook-stadium-visual {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: linear-gradient(to bottom, rgba(3, 15, 27, 0.85) 0%, rgba(5, 22, 38, 0.98) 100%),
url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center bottom;
z-index: 1;
}
.sportsbook-data-grid {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
opacity: 0.07;
background-image:
radial-gradient(circle at 30% 20%, transparent 55%, var(--accent-gold) 56%, transparent 58%),
linear-gradient(to right, rgba(200, 162, 74, 0.3) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 37, 64, 0.5) 1px, transparent 1px);
background-size: 400px 400px, 40px 40px, 40px 40px;
z-index: 2;
}
.sportsbook-glow-overlay {
position: absolute;
top: -20%; right: -10%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(200, 162, 74, 0.12) 0%, rgba(10, 37, 64, 0) 70%);
filter: blur(50px);
z-index: 3;
pointer-events: none;
}
.badge-premium {
display: inline-block; background: rgba(200, 162, 74, 0.1);
color: var(--accent-gold); padding: 6px 14px;
font-size: 0.75rem; font-weight: 600;
border-radius: 30px; letter-spacing: 0.5px;
border: 1px solid rgba(200, 162, 74, 0.15);
}
.text-light-muted { color: var(--text-muted) !important; }
.text-gold-accent { color: var(--accent-gold) !important; }
.text-light-muted-all { color: var(--text-light-muted) !important; }
.border-top.border-dark-gray { border-color: rgba(255, 255, 255, 0.08) !important; }
/* ==========================================================================
DYNAMIC RESPONSIVE CHOREOGRAPHED PATH BOUNCING SYSTEM
========================================================================== */
.choreographed-ball-track {
position: absolute;
width: 36px;
height: 36px;
top: 0;
left: 0;
z-index: 50;
pointer-events: none;
transform-origin: bottom center;
animation: masterFlexiblePathEngine 7.5s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.choreographed-ball-skin {
width: 100%;
height: 100%;
border-radius: 50%;
background-size: cover;
background-position: center;
box-shadow: inset -4px -4px 10px rgba(0,0,0,0.4), 2px 3px 8px rgba(0,0,0,0.3);
transform-origin: bottom center;
animation: ballSquashStretch 7.5s infinite linear,
skinDissolveMorph 37.5s infinite steps(1),
continuousSpinning 3s linear infinite;
}
#nodePhoneTop {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 10px; height: 1px;
}
.ball-target-shadow {
position: absolute;
bottom: -4px; left: 50%;
transform: translateX(-50%) scale(0);
width: 24px; height: 4px;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
filter: blur(1px);
pointer-events: none;
z-index: 2;
}
.t-m { animation: shadowFlashM 7.5s infinite linear; }
.t-s { animation: shadowFlashS 7.5s infinite linear; }
.t-b { animation: shadowFlashB 7.5s infinite linear; }
.t-phone {
top: -5px; left: 50%;
width: 45px; height: 6px;
background: rgba(0,0,0,0.6);
animation: shadowFlashPhone 7.5s infinite linear;
}
@keyframes masterFlexiblePathEngine {
0% { transform: translate(var(--t-m-x), -60px); opacity: 0; }
2% { opacity: 1; }
15% { transform: translate(var(--t-m-x), var(--t-m-y)); }
28% { transform: translate(calc((var(--t-m-x) + var(--t-s-x)) / 2), calc(var(--t-m-y) - 90px)); }
40% { transform: translate(var(--t-s-x), var(--t-s-y)); }
51% { transform: translate(calc((var(--t-s-x) + var(--t-b-x)) / 2), calc(var(--t-s-y) - 70px)); }
62% { transform: translate(var(--t-b-x), var(--t-b-y)); }
74% { transform: translate(calc((var(--t-b-x) + var(--t-phone-x)) / 2), calc(var(--t-b-y) - 100px)); }
85% { transform: translate(var(--t-phone-x), var(--t-phone-y)); opacity: 1; }
94% { transform: translate(calc(var(--t-phone-x) + 20px), calc(var(--t-phone-y) - 120px)); opacity: 0; }
100% { transform: translate(var(--t-m-x), -60px); opacity: 0; }
}
@keyframes ballSquashStretch {
0%, 13%, 17%, 38%, 42%, 60%, 64%, 83%, 87%, 94%, 100% { transform: scaleX(1) scaleY(1); }
15%, 40%, 62%, 85% { transform: scaleX(1.32) scaleY(0.68); }
16%, 41%, 63%, 86% { transform: scaleX(0.82) scaleY(1.18); }
}
@keyframes shadowFlashM { 0%, 13%, 17.5%, 100% { transform: translateX(-50%) scale(0); opacity: 0; } 15% { transform: translateX(-50%) scale(1); opacity: 0.7; } }
@keyframes shadowFlashS { 0%, 38%, 42.5%, 100% { transform: translateX(-50%) scale(0); opacity: 0; } 40% { transform: translateX(-50%) scale(1); opacity: 0.7; } }
@keyframes shadowFlashB { 0%, 60%, 64.5%, 100% { transform: translateX(-50%) scale(0); opacity: 0; } 62% { transform: translateX(-50%) scale(1); opacity: 0.7; } }
@keyframes shadowFlashPhone { 0%, 83%, 87.5%, 100% { transform: translateX(-50%) scale(0); opacity: 0; } 85% { transform: translateX(-50%) scale(1); opacity: 0.8; } }
@keyframes continuousSpinning { 100% { transform: rotate(360deg); } }
@keyframes skinDissolveMorph {
0%, 20% {
background-image: url('data:image/svg+xml;utf8,');
}
20%, 40% {
background-image: url('data:image/svg+xml;utf8,');
}
40%, 60% {
background-image: url('data:image/svg+xml;utf8,');
}
60%, 80% {
background-image: url('data:image/svg+xml;utf8,');
}
80%, 100% {
background-image: url('data:image/svg+xml;utf8,');
}
}
@media (max-width: 991.98px) {
.choreographed-ball-track { display: none !important; }
}
/* ==========================================================================
INTERACTIVE SMARTPHONE ENGINE & DYNAMIC INTERFACE
========================================================================== */
.phone-container-wrapper {
position: relative;
width: 320px;
height: 640px;
z-index: 10;
perspective: 1200px;
}
.t-phone { top: -8px !important; bottom: auto !important; }
.virtual-finger {
position: absolute;
width: 38px; height: 38px;
background: rgba(200, 162, 74, 0.4);
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
opacity: 0;
box-shadow: 0 0 15px rgba(0,0,0,0.4), inset 0 0 8px rgba(255,255,255,0.4);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
transform: translate(160px, 400px);
}
.iphone-16-frame {
width: 100%; height: 100%;
background: #1e1e22;
border-radius: 46px;
padding: 10px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5),
inset 0 0 4px rgba(255,255,255,0.4),
0 0 0 3px #3a3b3f;
position: relative;
overflow: hidden;
}
.dynamic-island {
position: absolute;
top: 17px; left: 50%;
transform: translateX(-50%);
width: 90px; height: 25px;
background: #000000;
border-radius: 20px;
z-index: 1000;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
}
.phone-screen-content {
width: 100%; height: 100%;
background: #f4f6f8;
border-radius: 38px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
border: 1px solid #000;
user-select: none;
}
.app-header {
background: var(--bg-white);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.app-logo-brand {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.8rem;
color: var(--text-navy);
letter-spacing: 0.5px;
}
.user-balance-pill {
background: #e2e8f0;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-navy);
}
.bg-danger-soft { background-color: rgba(231, 76, 60, 0.1); }
.extra-small { font-size: 0.75rem; }
.micro-text { font-size: 0.65rem; }
.betting-match-card {
background: var(--bg-white);
border: 1px solid rgba(0,0,0,0.05);
border-radius: 14px;
}
.btn-odds {
background: #f8fafc;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 8px;
padding: 8px 4px;
transition: all 0.2s ease;
}
.btn-odds:hover, .btn-odds.active {
background: var(--text-navy) !important;
border-color: var(--text-navy);
}
.btn-odds:hover *, .btn-odds.active * {
color: var(--bg-white) !important;
}
.promo-mini-card {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
border-radius: 10px;
}
.bet-slip-panel {
position: absolute; bottom: 0; left: 0; width: 100%;
background: var(--bg-white);
border-top: 1px solid rgba(0,0,0,0.08);
border-radius: 20px 20px 0 0;
transform: translateY(105%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 100;
}
.bet-slip-panel.active { transform: translateY(0); }
.fake-input-box {
border: 1px solid rgba(0,0,0,0.1);
border-radius: 6px;
background: var(--bg-white);
}
.fake-input-box.focused {
border-color: var(--text-navy);
box-shadow: 0 0 0 2px rgba(10,37,64,0.1);
}
.winning-notification-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(5, 22, 38, 0.98);
z-index: 1000; opacity: 0; pointer-events: none;
transition: opacity 0.4s ease; border-radius: 38px;
}
.winning-notification-overlay.active { opacity: 1; pointer-events: auto; }
.success-glow-circle {
width: 65px; height: 65px;
background: #2ECC71; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 30px rgba(46, 204, 113, 0.5);
}
.payout-counter-box {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
}
.tracking-wide { letter-spacing: 1px; }
.tracking-wider { letter-spacing: 1.5px; }
/* --- Modern Dark Premium Cards --- */
.modern-dark-card {
background: var(--gradient-luxury-card); /* Converted to premium luxury gradient */
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px; padding: 35px 25px;
height: 100%; transition: var(--transition-premium);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.modern-dark-card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(200, 162, 74, 0.15);
border-color: rgba(200, 162, 74, 0.4);
background: linear-gradient(145deg, #0d2b47 0%, #091F34 100%);
}
.icon-box-navy {
width: 50px; height: 50px; background: rgba(200, 162, 74, 0.1);
border-radius: 6px; display: flex; align-items: center;
justify-content: center; font-size: 1.5rem; color: var(--accent-gold);
margin-bottom: 22px;
}
/* ==========================================================================
INFINITE SCROLL AUTOMATIC MARQUEE SYSTEM (SCROLLS RIGHT)
========================================================================== */
.marquee-container {
width: 100%; overflow: hidden; padding: 10px 0; display: flex; position: relative;
}
.marquee-container::before, .marquee-container::after {
content: ""; position: absolute; top: 0; width: 15%; height: 100%; z-index: 5; pointer-events: none;
}
.marquee-container::before { left: 0; background: linear-gradient(90deg, #030F1B 0%, transparent 100%); }
.marquee-container::after { right: 0; background: linear-gradient(270deg, #051626 0%, transparent 100%); }
.marquee-track { display: flex; width: max-content; animation: scrollRight 35s linear infinite; }
.platform-campaign-card {
width: 280px; height: 80px; margin: 0 15px;
background: linear-gradient(135deg, var(--navy-card) 0%, #0c2b47 100%);
border: 1px solid rgba(200, 162, 74, 0.15);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.3); transition: transform 0.3s ease;
}
.platform-campaign-card span { color: var(--bg-white); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.5px; }
.platform-campaign-card:hover { transform: scale(1.03); border-color: var(--accent-gold); }
@keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }
/* --- Compliance Area --- */
.compliance-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
/* --- Footer Elements --- */
/* ==========================================================================
UPDATED PREMIUM FOOTER INTERFACE
========================================================================== */
.section-padding-footer {
padding: 80px 0 40px 0;
}
.footer-area {
background: linear-gradient(to top, #020a12 0%, #051626 100%); /* Adjusted layer transition */
border-top: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
z-index: 10;
}
/* Brand Architecture */
.footer-brand-logo {
height: 55px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.footer-brand-text-wrapper {
display: flex;
flex-direction: column;
}
.footer-logo {
font-family: 'Cinzel', serif;
font-weight: 700;
color: var(--bg-white);
letter-spacing: 1.5px;
font-size: 1.1rem;
line-height: 1.2;
}
/* Social and Connectivity Anchors */
.social-icon-link {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gradient-luxury-card);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
color: var(--text-light-muted);
font-size: 0.95rem;
text-decoration: none;
transition: var(--transition-premium);
}
.social-icon-link:hover {
color: var(--navy-deep);
background: var(--gradient-gold-metallic);
border-color: var(--accent-gold);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(200, 162, 74, 0.25);
}
.whatsapp-contact-link {
height: 38px;
display: inline-flex;
align-items: center;
padding: 0 16px;
background: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.2);
border-radius: 4px;
color: #2ECC71;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.5px;
transition: var(--transition-premium);
}
.whatsapp-contact-link:hover {
background: #2ECC71;
color: var(--navy-deep) !important;
border-color: #2ECC71;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(46, 204, 113, 0.25);
}
/* Sitemap Column Framework (Normalized Layout Flow) */
.footer-map-header {
font-family: 'Cinzel', serif;
font-size: 0.8rem;
font-weight: 700;
color: var(--accent-gold);
letter-spacing: 1px;
margin-bottom: 20px;
display: block;
position: relative;
clear: both;
}
.footer-map-links li {
margin-bottom: 10px;
}
.footer-map-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.85rem;
font-weight: 400;
transition: var(--transition-premium);
display: inline-block;
}
.footer-map-links a:hover {
color: var(--bg-white);
}
/* Standard Hover Micro-interaction */
@media (min-width: 992px) {
.footer-map-links a:hover {
transform: translateX(-3px);
}
}
@media (max-width: 991px) {
.footer-map-links a:hover {
transform: translateY(-2px);
}
}
.border-dark-gray {
border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Back to Top Component Bound Strictly to Footer Frame */
.back-to-top-footer {
position: absolute;
top: 30px;
right: 40px;
width: 44px;
height: 44px;
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.3);
border-radius: 4px;
color: var(--accent-gold);
font-size: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
z-index: 20;
}
.back-to-top-footer:hover {
background: var(--gradient-gold-metallic);
color: var(--navy-deep);
border-color: var(--accent-gold);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(200, 162, 74, 0.3);
}
/* Responsive adjustments for mobile display alignments */
@media (max-width: 991px) {
.back-to-top-footer {
top: auto;
bottom: 25px;
right: 25px;
}
}
/* ==========================================================================
AMRI INSTITUTIONAL ABOUT SUBPAGE SPECIFIC STYLING MODULE
========================================================================== */
.about-page-body {
background: var(--gradient-luxury-bg);
}
/* ==========================================================================
AMRI MISSION STATEMENT SPECIFIC STYLING MODULE
========================================================================== */
/* Page Foundation */
.mission-page-body {
background: var(--gradient-luxury-bg);
}
/* ==========================================================================
1. HERO BANNER & VISUALS
========================================================================== */
.mission-hero-banner {
min-height: 85vh;
padding-top: 140px;
padding-bottom: 80px;
background: radial-gradient(ellipse at 30% 50%, #0e375a 0%, var(--gradient-luxury-bg) 70%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
}
.min-vh-75 {
min-height: 75vh;
}
.hero-visual-wrapper {
position: relative;
padding: 20px;
}
.hero-mission-img {
width: 100%;
height: auto;
max-height: 520px;
object-fit: cover;
border: 1px solid rgba(200, 162, 74, 0.2);
filter: brightness(0.85) contrast(1.1) saturate(0.9);
transition: var(--transition-premium);
}
.hero-mission-img:hover {
filter: brightness(0.95) contrast(1.05) saturate(1);
border-color: rgba(200, 162, 74, 0.4);
}
/* Decorative Corner Accents */
.visual-frame-accent {
position: absolute;
width: 60px;
height: 60px;
border-color: var(--accent-gold);
border-style: solid;
opacity: 0.6;
transition: var(--transition-premium);
}
.visual-frame-accent.top-start {
top: 0; left: 0;
border-width: 2px 0 0 2px;
}
.visual-frame-accent.bottom-end {
bottom: 0; right: 0;
border-width: 0 2px 2px 0;
}
.hero-visual-wrapper:hover .visual-frame-accent {
opacity: 1;
width: 80px;
height: 80px;
}
/* Floating Insight Card */
.floating-insight-card {
position: absolute;
bottom: 40px;
left: -10px;
background: rgba(9, 31, 52, 0.95);
backdrop-filter: blur(12px);
border: 1px solid rgba(200, 162, 74, 0.25);
animation: floatCard 4s ease-in-out infinite;
z-index: 2;
}
.insight-icon-box {
width: 40px;
height: 40px;
background: rgba(46, 204, 113, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
@keyframes floatCard {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* ==========================================================================
2. TYPOGRAPHY & UTILITY HELPERS
========================================================================== */
.max-600 { max-width: 600px; }
.max-700 { max-width: 760px; }
.tracking-wide { letter-spacing: 3px; }
.hero-text-wrapper p {
font-size: 1.05rem;
font-weight: 400;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.section-title-left {
text-align: left;
margin-bottom: 12px;
}
.section-title-left::after {
content: ''; display: block; width: 45px; height: 3px;
background: var(--gradient-gold-metallic); margin: 15px 0 0 0;
}
/* ==========================================================================
3. PROMOTIONAL MATRIX & TIMELINE CARDS
========================================================================== */
.timeline-metric-card {
background: var(--gradient-luxury-card);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 8px;
height: 100%;
transition: var(--transition-premium);
}
.timeline-metric-card:hover {
transform: translateY(-4px);
border-color: rgba(200, 162, 74, 0.25);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.metric-icon-sphere {
width: 52px;
height: 52px;
background-color: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.15);
border-radius: 50%;
color: var(--accent-gold);
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Concept Grid Badges (Jargon Translation) */
.concept-pill {
background: var(--gradient-luxury-card) !important;
border: 1px solid rgba(200, 162, 74, 0.2);
color: var(--text-light-muted) !important;
padding: 8px 14px !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
letter-spacing: 0.5px;
border-radius: 6px !important;
transition: var(--transition-premium);
}
.concept-pill:hover {
border-color: var(--accent-gold);
color: var(--accent-gold) !important;
}
/* ==========================================================================
4. OPERATIONAL BLUEPRINT & YIELD BOX
========================================================================== */
.financial-yield-box {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.bg-success-soft {
background-color: rgba(46, 204, 113, 0.1) !important;
}
/* ==========================================================================
5. TRANSPARENCY & ELIGIBILITY
========================================================================== */
.transparency-callout {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.transparency-callout::before {
content: '';
position: absolute;
top: 0; left: 0; width: 4px; height: 100%;
background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
}
.state-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.state-pill {
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.25);
color: var(--text-light-muted);
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
transition: var(--transition-premium);
}
.state-pill:hover {
background: rgba(200, 162, 74, 0.15);
color: var(--accent-gold);
transform: translateY(-2px);
}
/* ==========================================================================
6. LEGAL COVENANTS & PROTECTIVE BLOCKS
========================================================================== */
.legal-covenant-container {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.clause-num {
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
min-width: 28px;
padding-top: 2px;
}
.clause-body h4 {
letter-spacing: 0.5px;
}
.border-success-soft { border-color: rgba(46, 204, 113, 0.3) !important; }
.border-gold-soft { border-color: rgba(200, 162, 74, 0.4) !important; }
.border-danger-soft { border-color: rgba(231, 76, 60, 0.25) !important; }
.bg-danger-soft { background-color: rgba(231, 76, 60, 0.1) !important; }
.text-danger-soft { color: #f1948a !important; }
/* ==========================================================================
7. RESPONSIVE ADJUSTMENTS
========================================================================== */
@media (max-width: 991.98px) {
.mission-hero-banner {
min-height: auto;
padding-top: 120px;
padding-bottom: 60px;
text-align: center;
}
.mission-hero-banner .border-top {
justify-content: center;
}
.mission-hero-banner .d-flex.gap-4 {
justify-content: center;
}
.mission-hero-banner h1 br {
display: none;
}
.mission-hero-banner p.pe-lg-4 {
padding-right: 0 !important;
}
/* Center left-aligned titles on mobile */
.section-title-left {
text-align: center;
}
.section-title-left::after {
margin: 15px auto 0 auto;
}
}
/* ==========================================================================
AMRI PREMIUM TERMS AND CONDITION MODAL STYLING
========================================================================== */
.custom-premium-modal {
background: var(--gradient-luxury-card) !important;
border: 1px solid rgba(200, 162, 74, 0.25) !important;
border-radius: 12px !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.border-bottom-custom {
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 20px 24px !important;
}
.border-top-custom {
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 16px 24px !important;
}
.bg-navy-deep-dark {
background-color: rgba(3, 15, 27, 0.4);
}
.custom-modal-close {
opacity: 0.6;
transition: var(--transition-premium);
}
.custom-modal-close:hover {
opacity: 1;
transform: rotate(90deg);
}
.custom-modal-scroll {
padding-left: 24px !important;
padding-right: 24px !important;
max-height: 70vh;
overflow-y: auto;
}
.legal-clause-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
padding-bottom: 14px;
}
.legal-clause-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.custom-premium-modal .clause-num {
font-family: 'Cinzel', serif;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.2;
background: var(--gradient-gold-metallic);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
min-width: 20px;
}
/* Modal Dimmer Backdrop Styling Harmony */
.modal-backdrop {
background-color: #030f1b !important;
}
.modal-backdrop.show {
opacity: 0.85 !important;
}
/* ==========================================================================
PLATFORM TRAINING BACKGROUND LAYER CAROUSEL SYSTEM (COMPLETE MODULE)
========================================================================== */
.platform-bg-carousel-wrapper {
position: absolute;
top: 5%;
left: 0;
width: 35%; /* Restricts the carousel viewport strictly to the left aspect */
height: 90%;
z-index: 1; /* Places behind texts and marquee tracking layers */
pointer-events: auto; /* Retains interactions for mouse hover triggers */
opacity: 0.70; /* Dimmed slightly to keep text completely readable */
mix-blend-mode: screen;
animation: luxuryPlatformFloat 6s ease-in-out infinite;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.platform-bg-carousel-wrapper:hover {
opacity: 0.38;
transform: scale(1.04);
filter: drop-shadow(0 0 25px rgba(200, 162, 74, 0.2));
}
.platform-carousel-img {
width: 100%;
height: 100%;
object-fit: contain; /* Prevents stretching and distortion completely */
background: transparent !important;
border: none !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Smooth Floating Mechanical Animation Path */
@keyframes luxuryPlatformFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* ==========================================================================
PERFECT CROSS-DISSOLVE SYNCHRONIZATION OVERRIDES
========================================================================== */
.platform-bg-carousel-wrapper.carousel-fade .carousel-item {
opacity: 0;
transition-property: opacity;
transition-duration: 0.8s; /* Controls how long the dissolve blend takes */
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.platform-bg-carousel-wrapper.carousel-fade .carousel-item.active,
.platform-bg-carousel-wrapper.carousel-fade .carousel-item-next.carousel-item-start,
.platform-bg-carousel-wrapper.carousel-fade .carousel-item-prev.carousel-item-end {
opacity: 1;
z-index: 2; /* Forces incoming image cleanly over current layout space */
}
.platform-bg-carousel-wrapper.carousel-fade .active.carousel-item-start,
.platform-bg-carousel-wrapper.carousel-fade .active.carousel-item-end {
opacity: 0;
z-index: 1; /* Drops outgoing image to lower priority layer instantly */
transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
SPECIFIC SIZE BOOST FOR SHORT ASSETS (IMAGES 1, 2, AND 4)
========================================================================== */
.platform-bg-carousel-wrapper .carousel-item:nth-child(1) .platform-carousel-img,
.platform-bg-carousel-wrapper .carousel-item:nth-child(2) .platform-carousel-img,
.platform-bg-carousel-wrapper .carousel-item:nth-child(4) .platform-carousel-img {
transform: scale(1.25); /* Increases baseline dimension asset size by 25% */
transform-origin: center center;
}
.platform-bg-carousel-wrapper .carousel-item:nth-child(4) .platform-carousel-img {
transform: scale(1.15); /* Increases baseline dimension asset size by 25% */
transform-origin: center center;
}
.platform-bg-carousel-wrapper .carousel-item:nth-child(2) .platform-carousel-img{
transform: scale(1.34); /* Increases baseline dimension asset size by 25% */
transform-origin: center center;
}
/* Maintenance scale multiplier during macro hover loops */
.platform-bg-carousel-wrapper:hover .carousel-item:nth-child(1) .platform-carousel-img,
.platform-bg-carousel-wrapper:hover .carousel-item:nth-child(2) .platform-carousel-img,
.platform-bg-carousel-wrapper:hover .carousel-item:nth-child(4) .platform-carousel-img {
transform: scale(1.30); /* Retains a clean extra bump logic on container interaction */
}
/* ==========================================================================
RESPONSIVENESS ADAPTATIONS
========================================================================== */
@media (max-width: 991.98px) {
.platform-bg-carousel-wrapper {
width: 45%; /* slightly wider on tablets */
top: 10%;
height: 80%;
}
}
@media (max-width: 575.98px) {
.platform-bg-carousel-wrapper {
width: 75%; /* occupies larger background space safely on mobiles */
left: 50%;
transform: translateX(-50%); /* Centered behind text on mobile for premium look */
opacity: 0.12; /* lowered to combat smaller display contrast restrictions */
height: 75%;
animation: luxuryPlatformFloatMobile 6s ease-in-out infinite; /* Uses isolated transformation matrix */
}
.platform-bg-carousel-wrapper:hover {
transform: translateX(-50%) scale(1.02);
opacity: 0.18;
}
}
/* Dedicated Keyframe loop for Mobile to avoid resetting the layout centering rules */
@keyframes luxuryPlatformFloatMobile {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-12px); }
}
/* ==========================================================================
MARQUEE UNDER-CAROUSEL LAYER STACKING SPECIFICS
========================================================================== */
.platform-marquee-layer {
position: relative;
z-index: 0 !important; /* Drops the sliding track beneath the z-index: 1 carousel */
}
/* Enhances the contrast of your background images over the scrolling marquee texts */
.platform-bg-carousel-wrapper {
z-index: 1 !important; /* Confirms the carousel slides sit above the marquee track */
}
/* ==========================================================================
AMRI COURSE ABOUT PAGE SYSTEM STYLE EXTENSIONS
========================================================================== */
.section-title-left {
color: var(--bg-white);
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 15px;
}
.section-title-left::after {
content: '';
display: block;
width: 35px;
height: 3px;
background: var(--gradient-gold-metallic);
margin: 12px 0 0 0;
}
/* Custom Luxury Range Slider Element Customizations */
.custom-slider-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: var(--light-gray);
border-radius: 4px;
outline: none;
transition: var(--transition-premium);
}
.custom-slider-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--gradient-gold-metallic);
cursor: pointer;
box-shadow: 0 0 10px rgba(200, 162, 74, 0.4);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-slider-range::-webkit-slider-thumb:hover {
transform: scale(1.25);
box-shadow: 0 0 15px rgba(200, 162, 74, 0.6);
}
.custom-slider-range::-moz-range-thumb {
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: var(--gradient-gold-metallic);
cursor: pointer;
box-shadow: 0 0 10px rgba(200, 162, 74, 0.4);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-slider-range::-moz-range-thumb:hover {
transform: scale(1.25);
}
/* ==========================================================================
GLOBAL TYPOGRAPHY CONTRAST SCALE INCREASE
========================================================================== */
/* General paragraph typography */
p,
.hero-subtitle,
.section-subtitle {
font-size: 1.125rem; /* Changed from 1.05rem (~16.8px) to 1.125rem (18px) */
line-height: 1.75;
}
/* Muted text should stay smaller (footer, notes, disclaimers) */
.text-light-muted {
font-size: 0.85rem;
line-height: 1.5;
}
/* Micro text inside phone UI cards */
.phone-screen-content p,
.phone-screen-content .micro-text,
.phone-screen-content .extra-small {
font-size: 0.75rem;
line-height: 1.4;
}
/* Mobile adjustments */
@media (max-width: 575.98px) {
p,
.hero-subtitle,
.section-subtitle {
font-size: 1rem; /* Changed from 0.95rem (~15.2px) to 1rem (16px) for perfect mobile readability */
}
.text-light-muted {
font-size: 0.75rem;
}
}
/* ==========================================================================
UNIFORM LIGHT CONTRAST FOR ALL PARAGRAPHS ON ABOUT PAGE
========================================================================== */
.about-page-body p,
.about-page-body .text-light-muted,
.about-page-body .text-muted,
.about-page-body .micro-text {
color: var(--text-light-muted) !important; /* Forces uniform high-contrast light text */
opacity: 0.95;
}
/* Keeps critical legal warning terms and highlighted text readable */
.about-page-body .text-danger-soft {
color: #f1948a !important;
}
.about-page-body strong,
.about-page-body .text-white {
color: var(--bg-white) !important;
}
.about-page-body .text-gold-accent,
.about-page-body .clause-num {
background: var(--gradient-gold-metallic);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Custom Inputs Harmony Extensions for Enrollment Fields */
.custom-premium-modal .form-control,
.custom-premium-modal .form-select {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 10px 14px;
font-size: 0.85rem;
border-radius: 6px;
transition: var(--transition-premium);
}
.custom-premium-modal .form-control:focus,
.custom-premium-modal .form-select:focus {
background-color: #071f36 !important;
border-color: var(--accent-gold) !important;
box-shadow: 0 0 10px rgba(200, 162, 74, 0.2) !important;
outline: none;
}
/* Ensure native drop-down option lists maintain dark background visibility */
.custom-premium-modal .form-select option {
background: #091F34 !important;
color: var(--bg-white) !important;
}
/* Luxury Checkbox accentuation hook */
.accent-gold-checkbox:checked {
background-color: var(--accent-gold) !important;
border-color: var(--accent-gold) !important;
}
.accent-gold-checkbox {
cursor: pointer;
background-color: var(--navy-deep);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* ==========================================================================
AMRI MASTER UNIFORM HIGH-CONTRAST DARK THEME STYLING TYPOGRAPHY
========================================================================== */
/* Theme Wide Uniform Typography Scaling Filters */
.uniform-dark-theme {
color: #f8f9fa !important;
}
/* Increases standard body elements significantly across grids */
.body-text-uniform {
font-size: 0.95rem !important;
font-weight: 400 !important;
letter-spacing: 0.2px;
}
/* Upgrades subtle/muted micro texts to readable scales over dark cards */
.micro-text,
.text-muted,
.text-light-muted {
font-size: 0.85rem !important;
color: #e2e8f0 !important; /* Soft high-contrast light off-white */
}
/* Premium Light-Contrast Copy Variant */
.text-light-high-contrast {
color: #f1f5f9 !important;
}
/* ==========================================================================
FAQ PAGE — SECTION 1: SUPPORT HUB
========================================================================== */
/* 150px top padding kept to clear the fixed header */
.faq-hub-section {
padding: 150px 0 90px;
background:
radial-gradient(ellipse at 80% 0%, rgba(200, 162, 74, 0.06) 0%, transparent 50%),
var(--gradient-luxury-bg);
}
/* --- Topic Index Cards --- */
.faq-topic-card {
width: 100%;
height: 100%;
background: var(--gradient-luxury-card);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 24px;
text-align: left;
cursor: pointer;
transition: var(--transition-premium);
}
.faq-topic-card:hover {
transform: translateY(-5px);
border-color: rgba(200, 162, 74, 0.35);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px -14px rgba(200, 162, 74, 0.3);
}
.faq-topic-card__icon {
width: 46px; height: 46px;
border-radius: 12px;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.2);
color: var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: var(--transition-premium);
}
.faq-topic-card:hover .faq-topic-card__icon {
background: var(--gradient-gold-metallic);
color: var(--text-navy);
border-color: transparent;
}
.faq-topic-card__num {
color: rgba(200, 162, 74, 0.35);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
.faq-topic-card__title {
color: var(--bg-white);
font-family: 'Cinzel', serif;
font-size: 0.98rem;
letter-spacing: 0.4px;
margin-bottom: 14px;
min-height: 44px;
}
.faq-topic-card__cta {
color: var(--accent-gold);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
}
.faq-topic-card__cta i {
font-size: 1.15rem;
transition: transform 0.3s ease;
}
.faq-topic-card:hover .faq-topic-card__cta i { transform: translateY(3px); }
/* --- Support Strip --- */
.faq-support-strip {
margin-top: 60px;
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.2);
border-radius: 16px;
padding: 28px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
position: relative;
overflow: hidden;
}
.faq-support-strip::before {
content: '';
position: absolute;
left: 0; top: 0;
height: 100%; width: 4px;
background: var(--gradient-gold-metallic);
}
/* ==========================================================================
FAQ ANSWER MODAL
========================================================================== */
.faq-speech-text { display: none !important; }
.faq-modal-content {
background: var(--gradient-luxury-bg);
border: 1px solid rgba(200, 162, 74, 0.3);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(200, 162, 74, 0.25);
}
.faq-modal-header {
padding: 26px 28px;
background: var(--gradient-luxury-card);
border-bottom: 1px solid rgba(200, 162, 74, 0.18);
}
.faq-modal-num {
font-size: 1.8rem;
font-weight: 700;
color: var(--accent-gold);
width: 64px; height: 64px;
border-radius: 14px;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-modal-kicker {
display: block;
font-size: 0.66rem;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.faq-modal-title {
color: var(--bg-white);
font-family: 'Cinzel', serif;
font-size: 1.2rem;
letter-spacing: 0.5px;
margin: 0;
}
.btn-close-faq {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--text-light-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: var(--transition-premium);
}
.btn-close-faq:hover {
background: rgba(231, 76, 60, 0.15);
border-color: rgba(231, 76, 60, 0.4);
color: #f1948a;
}
/* --- Voice Status Bar --- */
.faq-modal-voicebar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 12px 28px;
background: rgba(5, 22, 38, 0.6);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.voice-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--text-muted);
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: var(--transition-premium);
}
.voice-indicator.speaking {
color: var(--accent-gold);
border-color: rgba(200, 162, 74, 0.5);
background: rgba(200, 162, 74, 0.1);
box-shadow: 0 0 18px -4px rgba(200, 162, 74, 0.5);
}
.eq-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq-bars span { width: 3px; height: 4px; border-radius: 2px; background: currentColor; }
.voice-indicator.speaking .eq-bars span { animation: eqBounce 0.8s ease-in-out infinite; }
.eq-bars span:nth-child(2) { animation-delay: 0.15s; }
.eq-bars span:nth-child(3) { animation-delay: 0.3s; }
@keyframes eqBounce {
0%, 100% { height: 4px; }
50% { height: 12px; }
}
.voice-ctrl-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid rgba(200, 162, 74, 0.35);
background: rgba(200, 162, 74, 0.08);
color: var(--accent-gold);
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition-premium);
}
.voice-ctrl-btn:hover {
background: var(--gradient-gold-metallic);
color: var(--text-navy);
border-color: transparent;
}
/* --- Modal Body & Footer --- */
.faq-modal-body {
padding: 28px;
color: var(--text-light-muted);
font-size: 0.95rem;
line-height: 1.75;
max-height: 60vh;
overflow-y: auto;
}
.faq-modal-answer-label {
display: inline-flex;
align-items: center;
color: var(--accent-gold);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 14px;
}
.faq-modal-footer {
padding: 16px 28px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(5, 22, 38, 0.4);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
/* Card CTA icon animation (modal variant) */
.faq-topic-card:hover .faq-topic-card__cta i { transform: translate(2px, -2px); }
/* ==========================================================================
ANSWER COMPONENT STYLES (reused inside modal)
========================================================================== */
.faq-trust-line {
display: flex; align-items: center; gap: 10px;
background: rgba(46, 204, 113, 0.08);
border: 1px solid rgba(46, 204, 113, 0.25);
border-radius: 8px;
padding: 12px 16px;
color: #2ecc71;
font-size: 0.82rem;
font-weight: 600;
}
.faq-stat-chip {
display: inline-flex; align-items: center;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.22);
color: var(--text-light-muted);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.4px;
}
.faq-stat-chip i { color: var(--accent-gold); }
.faq-split-track {
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.split-seg {
padding: 10px 12px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.5px;
text-align: center;
white-space: nowrap;
}
.split-seg--you {
flex: 0 0 70%;
background: linear-gradient(135deg, rgba(46, 204, 113, 0.22), rgba(46, 204, 113, 0.08));
color: #2ecc71;
}
.split-seg--amri {
flex: 0 0 30%;
background: linear-gradient(135deg, rgba(200, 162, 74, 0.28), rgba(200, 162, 74, 0.1));
color: var(--accent-gold);
}
.faq-zero-box {
background: rgba(200, 162, 74, 0.06);
border: 1px dashed rgba(200, 162, 74, 0.35);
border-radius: 8px;
padding: 14px 16px;
font-size: 0.88rem;
}
.faq-req-tile {
background: rgba(200, 162, 74, 0.05);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
padding: 14px 16px;
height: 100%;
}
.req-tile-icon {
width: 42px; height: 42px;
border-radius: 10px;
background: rgba(200, 162, 74, 0.1);
border: 1px solid rgba(200, 162, 74, 0.25);
color: var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
}
.faq-jurisdiction-box {
background: rgba(5, 22, 38, 0.6);
border: 1px dashed rgba(200, 162, 74, 0.3);
border-radius: 10px;
padding: 18px;
}
.faq-jurisdiction-count {
background: rgba(200, 162, 74, 0.12);
color: var(--accent-gold);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.6px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(200, 162, 74, 0.3);
}
.state-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.state-pill {
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.25);
color: var(--text-light-muted);
padding: 4px 12px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.4px;
}
/* ==========================================================================
REVIEWS PAGE — COMPLETE MODULE
========================================================================== */
.reviews-page-body { background: var(--gradient-luxury-bg); }
/* --- Hero --- */
.reviews-hero-banner {
min-height: 70vh;
padding-top: 150px;
padding-bottom: 80px;
background: radial-gradient(ellipse at 50% 40%, #0e375a 0%, var(--gradient-luxury-bg) 75%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* --- Stat Cards --- */
.reviews-stat-card {
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.25);
border-radius: 14px;
padding: 28px 20px;
transition: var(--transition-premium);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.reviews-stat-card:hover {
transform: translateY(-4px);
border-color: rgba(200, 162, 74, 0.45);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px -12px rgba(200, 162, 74, 0.3);
}
.reviews-stat-card__big {
font-size: 3rem;
font-weight: 700;
color: var(--accent-gold);
line-height: 1;
margin-bottom: 8px;
background: var(--gradient-gold-metallic);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.reviews-stat-card__sub { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; margin-bottom: 6px; }
.reviews-stat-card__label {
color: var(--text-muted);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 1.3px;
font-weight: 600;
margin-top: 8px;
}
/* --- Rating Breakdown --- */
.section-padding-sm { padding: 60px 0; }
.rating-breakdown { display: flex; flex-direction: column; gap: 10px; }
.rating-row {
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
gap: 14px;
}
.rating-row__label {
color: var(--text-light-muted);
font-size: 0.85rem;
font-weight: 600;
display: inline-flex;
align-items: center;
}
.rating-row__track {
height: 8px;
background: rgba(255, 255, 255, 0.06);
border-radius: 4px;
overflow: hidden;
}
.rating-row__bar {
height: 100%;
background: var(--gradient-gold-metallic);
border-radius: 4px;
transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.rating-row__count {
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 600;
text-align: right;
}
/* --- Featured Review --- */
.featured-review-card {
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.3);
border-radius: 18px;
padding: 40px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 50px -18px rgba(200, 162, 74, 0.25);
position: relative;
overflow: hidden;
}
.featured-review-card::before {
content: '\201C';
position: absolute;
top: -30px; left: 20px;
font-size: 14rem;
color: rgba(200, 162, 74, 0.06);
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
}
.featured-review-avatar {
width: 110px; height: 110px;
border-radius: 50%;
background: linear-gradient(135deg, #C8A24A 0%, #9A7B31 100%);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 15px 35px rgba(200, 162, 74, 0.3);
}
.avatar-initials {
color: var(--text-navy);
font-size: 2.2rem;
font-weight: 700;
}
.avatar-ring {
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px dashed rgba(200, 162, 74, 0.4);
animation: spin 18s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* --- Review Filter --- */
.review-filter-select {
background: rgba(9, 31, 52, 0.8);
border: 1px solid rgba(200, 162, 74, 0.3);
color: var(--text-light-muted);
padding: 8px 16px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-premium);
}
.review-filter-select:hover, .review-filter-select:focus {
border-color: var(--accent-gold);
color: var(--accent-gold);
outline: none;
}
/* --- Review Cards --- */
.review-card {
background: var(--gradient-luxury-bg);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 24px;
height: 100%;
display: flex;
flex-direction: column;
transition: var(--transition-premium);
}
.review-card:hover {
transform: translateY(-5px);
border-color: rgba(200, 162, 74, 0.35);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 25px -12px rgba(200, 162, 74, 0.2);
}
.review-avatar {
width: 46px; height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.95rem;
color: #fff;
flex-shrink: 0;
letter-spacing: 0.5px;
}
.review-avatar--blue { background: linear-gradient(135deg, #1e5f8e, #0e375a); }
.review-avatar--purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.review-avatar--green { background: linear-gradient(135deg, #059669, #047857); }
.review-avatar--orange { background: linear-gradient(135deg, #ea580c, #c2410c); }
.review-avatar--teal { background: linear-gradient(135deg, #0d9488, #0f766e); }
.review-avatar--pink { background: linear-gradient(135deg, #db2777, #be185d); }
.review-card__name { color: var(--bg-white); font-size: 0.95rem; font-weight: 600; margin: 0; }
.review-verified-badge {
color: var(--accent-gold);
font-size: 0.9rem;
}
.review-card__meta {
color: var(--text-muted);
font-size: 0.72rem;
margin: 2px 0 0;
letter-spacing: 0.3px;
}
.review-card__title {
color: var(--bg-white);
font-family: 'Cinzel', serif;
font-size: 1rem;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 0.3px;
}
.review-card__text {
color: var(--text-light-muted);
font-size: 0.86rem;
line-height: 1.65;
margin-bottom: 14px;
flex-grow: 1;
}
.review-card__footer { margin-top: auto; padding-top: 14px; }
/* --- Review Tags --- */
.review-tag {
display: inline-flex;
align-items: center;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.22);
color: var(--text-light-muted);
padding: 5px 12px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.4px;
transition: var(--transition-premium);
}
.review-tag:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.review-tag i { color: var(--accent-gold); }
.review-tag--sm { font-size: 0.66rem; padding: 4px 10px; }
/* --- Helpful Button --- */
.review-helpful-btn {
background: rgba(200, 162, 74, 0.06);
border: 1px solid rgba(200, 162, 74, 0.22);
color: var(--text-light-muted);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: var(--transition-premium);
}
.review-helpful-btn:hover {
border-color: var(--accent-gold);
color: var(--accent-gold);
background: rgba(200, 162, 74, 0.12);
}
.review-helpful-btn.voted {
background: rgba(46, 204, 113, 0.1);
border-color: rgba(46, 204, 113, 0.4);
color: #2ecc71;
}
.review-helpful-btn.voted i { color: #2ecc71; }
.review-date-chip {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-muted);
padding: 4px 10px;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.4px;
}
/* --- Reviewer CTA Box --- */
.reviewer-cta-box {
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.3);
border-radius: 18px;
padding: 40px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px -18px rgba(200, 162, 74, 0.25);
position: relative;
overflow: hidden;
}
.reviewer-cta-box::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(200, 162, 74, 0.15) 0%, transparent 70%);
border-radius: 50%;
}
.reviewer-cta-icon {
width: 52px; height: 52px;
border-radius: 14px;
background: rgba(200, 162, 74, 0.1);
border: 1px solid rgba(200, 162, 74, 0.3);
color: var(--accent-gold);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
/* --- Responsive --- */
@media (max-width: 991.98px) {
.reviews-hero-banner { min-height: auto; padding-top: 130px; padding-bottom: 60px; }
.featured-review-card { padding: 28px 22px; }
.reviewer-cta-box { padding: 28px 22px; text-align: center; }
.reviewer-cta-box .text-lg-end { text-align: center !important; }
}
@media (max-width: 575.98px) {
.reviews-stat-card__big { font-size: 2.4rem; }
.rating-row { grid-template-columns: 32px 1fr 32px; gap: 10px; }
.rating-row__label { font-size: 0.75rem; }
}
/* ==========================================================================
Video Overview Section — AMRI Institute
========================================================================== */
/* Ambient glow behind the video */
.video-ambient-glow {
position: absolute;
width: 480px;
height: 480px;
border-radius: 50%;
filter: blur(140px);
opacity: 0.35;
pointer-events: none;
z-index: 1;
}
.video-ambient-glow--left {
top: -120px;
left: -160px;
background: radial-gradient(circle, #C8A24A 0%, transparent 70%);
}
.video-ambient-glow--right {
bottom: -160px;
right: -160px;
background: radial-gradient(circle, #0A2540 0%, transparent 70%);
opacity: 0.6;
}
/* Video Stage & Frame */
.video-stage {
position: relative;
}
.video-frame {
position: relative;
border-radius: 20px;
overflow: hidden;
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.25);
box-shadow:
0 30px 60px -20px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(200, 162, 74, 0.08) inset,
0 0 60px -10px rgba(200, 162, 74, 0.15);
}
.video-frame__glow {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(200, 162, 74, 0.08) 0%, transparent 40%);
pointer-events: none;
z-index: 1;
}
/* Aspect Ratio Container */
.video-aspect {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.video-player {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Custom Overlay */
.video-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.video-overlay.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.video-overlay__backdrop {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(5, 22, 38, 0.35) 0%,
rgba(5, 22, 38, 0.75) 100%);
backdrop-filter: blur(2px);
}
.video-overlay__content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
}
.video-overlay__title {
color: #fff;
font-size: 1.6rem;
margin: 0 0 4px;
letter-spacing: 2px;
text-transform: uppercase;
}
.video-overlay__sub {
color: var(--text-light-muted);
margin: 0 0 28px;
font-size: 0.85rem;
letter-spacing: 1px;
}
/* Play Button */
.video-play-btn {
position: relative;
width: 96px;
height: 96px;
border: none;
border-radius: 50%;
background: var(--gradient-gold-metallic);
color: var(--text-navy);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow:
0 15px 40px -10px rgba(200, 162, 74, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.2) inset;
transition: var(--transition-premium);
}
.video-play-btn:hover {
transform: scale(1.08);
box-shadow:
0 20px 50px -10px rgba(200, 162, 74, 0.75),
0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
.video-play-btn .play-icon {
font-size: 2.2rem;
margin-left: 6px; /* optical centering for play triangle */
display: inline-flex;
}
.play-ripple {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(200, 162, 74, 0.6);
animation: ripple 2.4s ease-out infinite;
}
.play-ripple--delayed { animation-delay: 1.2s; }
@keyframes ripple {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.8); opacity: 0; }
}
/* Caption Bar */
.video-caption {
padding: 14px 20px;
background: linear-gradient(180deg, #0A2540 0%, #071A30 100%);
border-top: 1px solid rgba(200, 162, 74, 0.15);
}
.video-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 10px #16a34a;
animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Runtime Pill (desktop) */
.video-runtime-pill {
display: inline-flex;
align-items: center;
padding: 10px 18px;
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.35);
border-radius: 999px;
color: var(--text-light-muted);
font-size: 0.9rem;
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
margin: 0 auto;
}
/* Center the section title within the narrower column */
#video-overview .section-title {
text-align: center;
}
#video-overview .section-title::after {
margin-left: auto;
margin-right: auto;
}
.video-runtime-pill .runtime-value {
color: var(--accent-gold);
font-family: 'Cinzel', serif;
font-weight: 600;
margin-left: 2px;
}
/* Chapters Card */
.video-chapters-card {
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.22);
border-radius: 20px;
padding: 28px;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.chapters-card__header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chapters-list {
list-style: none;
padding: 0;
margin: 0 0 10px;
flex: 1;
}
.chapter-item {
display: flex;
gap: 14px;
padding: 12px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.chapter-item:last-child { border-bottom: none; }
.chapter-index {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(200, 162, 74, 0.12);
color: var(--accent-gold);
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.9rem;
border: 1px solid rgba(200, 162, 74, 0.28);
}
.chapter-title {
color: #fff;
font-family: 'Cinzel', serif;
font-size: 0.95rem;
margin: 0 0 2px;
letter-spacing: 0.3px;
}
.chapter-desc {
color: var(--text-muted);
font-size: 0.78rem;
margin: 0;
line-height: 1.45;
}
/* Responsive */
@media (max-width: 991.98px) {
.video-overlay__title { font-size: 1.25rem; }
.video-play-btn { width: 80px; height: 80px; }
.video-play-btn .play-icon { font-size: 1.8rem; }
}
@media (max-width: 575.98px) {
.video-caption { font-size: 0.78rem; }
.video-chapters-card { padding: 22px; }
}
/* ==========================================================================
TERMS & CONDITIONS PAGE
========================================================================== */
html { scroll-behavior: smooth; }
.terms-page-body { background: var(--gradient-luxury-bg); }
.terms-hero-banner {
min-height: 55vh;
padding-top: 150px;
padding-bottom: 90px;
background: radial-gradient(circle at center, #0e375a 0%, var(--gradient-luxury-bg) 80%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* --- Document Meta Chips --- */
.doc-meta-chip {
display: inline-flex;
align-items: center;
background: rgba(9, 31, 52, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-light-muted);
padding: 8px 16px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
backdrop-filter: blur(8px);
}
.doc-meta-chip i { color: var(--accent-gold); }
.doc-meta-chip--active { border-color: rgba(46, 204, 113, 0.4); color: #2ecc71; }
.doc-meta-chip--active i { color: #2ecc71; }
/* --- Summary Cards (At a Glance) --- */
.terms-summary-card {
display: block;
height: 100%;
background: var(--gradient-luxury-card);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 26px;
text-decoration: none;
transition: var(--transition-premium);
}
.terms-summary-card:hover {
transform: translateY(-5px);
border-color: rgba(200, 162, 74, 0.35);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.summary-card__icon {
width: 46px; height: 46px;
border-radius: 12px;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.2);
color: var(--accent-gold);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: var(--transition-premium);
}
.terms-summary-card:hover .summary-card__icon {
background: var(--gradient-gold-metallic);
color: var(--text-navy);
border-color: transparent;
}
.summary-card__num { color: rgba(200, 162, 74, 0.35); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.summary-card__title { color: var(--bg-white); font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.4px; margin-bottom: 8px; }
.summary-card__text { color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; margin-bottom: 14px; }
.summary-card__cta {
color: var(--accent-gold);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
}
.summary-card__cta i { font-size: 1.1rem; transition: transform 0.3s ease; }
.terms-summary-card:hover .summary-card__cta i { transform: translateY(3px); }
.terms-summary-card--danger:hover { border-color: rgba(231, 76, 60, 0.4); }
/* --- Sticky TOC Card --- */
.toc-card {
background: var(--gradient-luxury-card);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 14px;
padding: 26px;
position: sticky;
top: 130px;
}
.toc-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 8px;
color: var(--text-light-muted);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
border: 1px solid transparent;
margin-bottom: 6px;
transition: var(--transition-premium);
}
.toc-num { color: rgba(200, 162, 74, 0.5); font-weight: 700; }
.toc-link:hover { color: var(--bg-white); background: rgba(200, 162, 74, 0.06); }
.toc-link.active {
color: var(--accent-gold);
background: rgba(200, 162, 74, 0.08);
border-color: rgba(200, 162, 74, 0.25);
}
.toc-link.active .toc-num { color: var(--accent-gold); }
/* Mobile numbered chips */
.toc-chip {
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.3);
color: var(--accent-gold);
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: var(--transition-premium);
}
.toc-chip:hover { background: var(--gradient-gold-metallic); color: var(--text-navy); }
.toc-chip--danger { border-color: rgba(231, 76, 60, 0.4); color: #f1948a; }
.toc-chip--danger:hover { background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; }
/* --- Clause Cards --- */
.clause-card {
background: var(--gradient-luxury-bg);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 30px;
margin-bottom: 24px;
scroll-margin-top: 130px;
transition: var(--transition-premium);
}
.clause-card:hover { border-color: rgba(200, 162, 74, 0.25); }
.clause-card__num {
font-size: 1.7rem;
font-weight: 700;
color: var(--accent-gold);
width: 58px; height: 58px;
border-radius: 14px;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.clause-badge {
display: inline-block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--accent-gold);
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.25);
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 8px;
}
.clause-card__title { color: var(--bg-white); font-family: 'Cinzel', serif; font-size: 1.15rem; letter-spacing: 0.5px; margin: 0; }
.clause-card__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.15);
color: var(--accent-gold);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.clause-card__text { color: var(--text-light-muted); font-size: 0.95rem; line-height: 1.8; }
.clause-keypoint {
display: flex;
gap: 10px;
align-items: flex-start;
background: rgba(200, 162, 74, 0.05);
border-left: 3px solid var(--accent-gold);
border-radius: 0 8px 8px 0;
padding: 12px 16px;
color: var(--text-light-muted);
font-size: 0.84rem;
line-height: 1.6;
}
.clause-keypoint i { color: var(--accent-gold); margin-top: 2px; }
/* Clause 3 split example */
.clause-split-example {
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.split-example-seg {
padding: 10px 12px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.5px;
text-align: center;
white-space: nowrap;
}
.split-example-seg--you {
flex: 0 0 70%;
background: linear-gradient(135deg, rgba(46, 204, 113, 0.22), rgba(46, 204, 113, 0.08));
color: #2ecc71;
}
.split-example-seg--amri {
flex: 0 0 30%;
background: linear-gradient(135deg, rgba(200, 162, 74, 0.28), rgba(200, 162, 74, 0.1));
color: var(--accent-gold);
}
/* Clause 04 — danger variant */
.clause-card--danger { border-color: rgba(231, 76, 60, 0.25); }
.clause-card--danger:hover { border-color: rgba(231, 76, 60, 0.45); }
.clause-card--danger .clause-badge { color: #f1948a; background: rgba(231, 76, 60, 0.1); border-color: rgba(231, 76, 60, 0.3); }
.clause-card--danger .clause-card__num { color: #f1948a; background: rgba(231, 76, 60, 0.08); border-color: rgba(231, 76, 60, 0.3); }
.clause-card--danger .clause-card__icon { color: #f1948a; background: rgba(231, 76, 60, 0.08); border-color: rgba(231, 76, 60, 0.25); }
.clause-card--danger .clause-keypoint { background: rgba(231, 76, 60, 0.06); border-left-color: #e74c3c; }
.clause-card--danger .clause-keypoint i { color: #f1948a; }
/* --- Acknowledgment Box --- */
.ack-box {
max-width: 760px;
background: var(--gradient-luxury-card);
border: 1px solid rgba(200, 162, 74, 0.3);
border-radius: 18px;
padding: 40px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 40px -18px rgba(200, 162, 74, 0.3);
}
.ack-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: var(--transition-premium);
}
.ack-item:hover { border-color: rgba(200, 162, 74, 0.3); }
.ack-item:has(input:checked) {
border-color: rgba(200, 162, 74, 0.4);
background: rgba(200, 162, 74, 0.04);
}
.ack-item input { display: none; }
.ack-checkmark {
width: 22px; height: 22px;
border-radius: 6px;
border: 1px solid rgba(200, 162, 74, 0.4);
background: rgba(200, 162, 74, 0.05);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
transition: var(--transition-premium);
}
.ack-checkmark::after {
content: '\2713';
color: var(--text-navy);
font-size: 0.8rem;
font-weight: 700;
opacity: 0;
transform: scale(0.5);
transition: var(--transition-premium);
}
.ack-item input:checked + .ack-checkmark {
background: var(--gradient-gold-metallic);
border-color: transparent;
}
.ack-item input:checked + .ack-checkmark::after { opacity: 1; transform: scale(1); }
.ack-text { color: var(--text-light-muted); font-size: 0.88rem; line-height: 1.55; }
.ack-item input:checked ~ .ack-text { color: var(--bg-white); }
#acceptTermsBtn:disabled { opacity: 0.45; cursor: not-allowed; }
/* --- Responsive --- */
@media (max-width: 991.98px) {
.clause-card { padding: 24px; }
.ack-box { padding: 28px 22px; }
}
/* ==========================================================================
RESULTS PAGE — COMPLETE MODULE
========================================================================== */
.result-page-body { background: var(--gradient-luxury-bg); }
/* --- Hero --- */
.result-hero-banner {
min-height: 55vh;
padding-top: 150px;
padding-bottom: 90px;
background: radial-gradient(circle at center, #0e375a 0%, var(--gradient-luxury-bg) 80%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* --- Stats Strip --- */
.section-padding-sm { padding: 55px 0; }
.result-stat-card {
background: var(--gradient-luxury-bg);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 24px 18px;
text-align: center;
height: 100%;
transition: var(--transition-premium);
}
.result-stat-card:hover {
transform: translateY(-4px);
border-color: rgba(200, 162, 74, 0.3);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.result-stat-card__icon {
width: 42px; height: 42px;
margin: 0 auto 12px;
border-radius: 50%;
background: rgba(200, 162, 74, 0.08);
border: 1px solid rgba(200, 162, 74, 0.2);
color: var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.result-stat-card__value { color: var(--accent-gold); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.result-stat-card__label {
color: var(--text-muted);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 1.3px;
font-weight: 600;
margin-top: 6px;
}
/* --- Proof Cards --- */
.proof-card {
background: var(--gradient-luxury-card);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: var(--transition-premium);
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.proof-card:hover {
transform: translateY(-5px);
border-color: rgba(200, 162, 74, 0.4);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 35px -14px rgba(200, 162, 74, 0.35);
}
.proof-card__bar {
padding: 14px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.proof-card__id { color: var(--text-light-muted); font-size: 0.8rem; letter-spacing: 1px; }
.proof-card__id i { color: var(--accent-gold); }
.proof-verified {
display: inline-flex;
align-items: center;
color: #2ecc71;
background: rgba(46, 204, 113, 0.08);
border: 1px solid rgba(46, 204, 113, 0.3);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
.proof-card__frame {
position: relative;
background: #04121f;
padding: 12px;
flex-grow: 1;
display: flex;
}
.proof-card__frame img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
transition: var(--transition-premium);
}
.proof-card__frame--featured { min-height: 480px; }
.proof-card__frame--thumb { height: 220px; }
.proof-card:hover .proof-card__frame img { transform: scale(1.02); }
.proof-card__zoom {
position: absolute;
inset: 0;
background: rgba(5, 22, 38, 0.72);
backdrop-filter: blur(3px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--accent-gold);
opacity: 0;
transition: var(--transition-premium);
z-index: 2;
}
.proof-card:hover .proof-card__zoom { opacity: 1; }
.proof-card__zoom i { font-size: 1.8rem; }
.proof-card__zoom span { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.proof-card__caption {
padding: 14px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: var(--bg-white);
font-size: 0.85rem;
font-weight: 600;
}
.proof-card__tag { color: var(--text-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; }
/* --- Lightbox --- */
.lightbox-content {
background: rgba(3, 15, 27, 0.97);
border: 1px solid rgba(200, 162, 74, 0.3);
border-radius: 16px;
padding: 24px;
position: relative;
}
.lightbox-badge {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2ecc71;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
background: rgba(46, 204, 113, 0.08);
border: 1px solid rgba(46, 204, 113, 0.3);
padding: 6px 16px;
border-radius: 999px;
margin-bottom: 18px;
}
.lightbox-badge span { color: var(--text-light-muted); letter-spacing: 0.5px; }
.lightbox-stage img {
max-width: 100%;
max-height: 72vh;
object-fit: contain;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.lightbox-caption { color: var(--text-light-muted); font-size: 0.85rem; margin-top: 14px; letter-spacing: 0.5px; }
.lightbox-close {
position: absolute;
top: 14px; right: 14px;
z-index: 5;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--text-light-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition-premium);
}
.lightbox-close:hover { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.4); color: #f1948a; }
.lightbox-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 46px; height: 46px;
border-radius: 50%;
background: rgba(200, 162, 74, 0.1);
border: 1px solid rgba(200, 162, 74, 0.35);
color: var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: var(--transition-premium);
}
.lightbox-arrow:hover { background: var(--gradient-gold-metallic); color: var(--text-navy); border-color: transparent; }
.lightbox-arrow--prev { left: 14px; }
.lightbox-arrow--next { right: 14px; }
/* --- Integrity Box --- */
.result-integrity-box {
max-width: 900px;
margin: 0 auto;
background: var(--gradient-luxury-bg);
border: 1px solid rgba(200, 162, 74, 0.22);
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
/* --- Responsive --- */
@media (max-width: 991.98px) {
.result-hero-banner { padding-top: 130px; padding-bottom: 70px; min-height: auto; }
.proof-card__frame--featured { min-height: 340px; }
.lightbox-arrow { width: 40px; height: 40px; }
.lightbox-arrow--prev { left: 8px; }
.lightbox-arrow--next { right: 8px; }
}
@media (max-width: 575.98px) {
.proof-card__frame--thumb { height: 200px; }
.proof-card__frame--featured { min-height: 280px; }
}
/* Make Bootstrap validation colors match your gold/navy theme */
#emailAddress.is-valid {
border-color: #28a745 !important;
box-shadow: 0 0 0 0.15rem rgba(40, 167, 69, 0.25);
}
#emailAddress.is-invalid {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
}