/* ---------------- Signature Section Styling ---------------- */
.signature-section {
margin-top: 80px;
margin-bottom: 40px;
width: 100%;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: center;
}
.signature-divider {
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent, #D4A574, transparent);
margin-bottom: 30px;
box-shadow: 0 0 3px #D4A574;
opacity: 0.7;
}
.signature-content {
display: flex;
align-items: center;
gap: 15px;
font-family: 'Courier New', Courier, monospace;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.signature-content:hover {
opacity: 1;
}
.signature-text {
font-size: 1.1em;
color: #D4A574;
text-shadow: 0 0 3px #D4A574;
letter-spacing: 1px;
}
.signature-link {
display: inline-flex;
align-items: center;
text-decoration: none;
transition: transform 0.2s ease, filter 0.2s ease;
}
.signature-link:hover {
transform: scale(1.1);
}
.x-logo {
width: 24px;
height: 24px;
/* Amber filter for dark theme */
filter: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(600%) hue-rotate(345deg) brightness(1.1);
transition: filter 0.3s ease;
/* Ensure transparency is preserved */
background: transparent !important;
}
.signature-link:hover .x-logo {
/* Brighter amber hover filter that maintains transparency */
filter: brightness(0) saturate(100%) invert(85%) sepia(25%) saturate(600%) hue-rotate(345deg) brightness(1.3);
}
/* ---------------- Responsive tweaks for signature ---------------- */
@media (max-width: 600px) {
.signature-section {
margin-top: 60px;
}
.signature-content {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 10px;
}
.signature-text {
font-size: 1em;
white-space: nowrap;
flex-shrink: 0;
}
.signature-link {
display: inline-flex;
flex-shrink: 0;
}
.x-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
}
}
/* ---------------- Company Info Styling ---------------- */
.company-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 25px;
margin-bottom: 10px;
font-family: 'Courier New', Courier, monospace;
opacity: 0.85;
font-size: 0.95em;
letter-spacing: 0.5px;
flex-wrap: wrap;
}
.info-text {
color: #D4A574;
text-shadow: 0 0 2px rgba(212, 165, 116, 0.4);
}
.info-separator {
color: #D4A574;
opacity: 0.6;
margin: 0 4px;
}
.info-email {
color: #D4A574;
text-decoration: none;
text-shadow: 0 0 2px rgba(212, 165, 116, 0.4);
transition: text-shadow 0.3s ease, color 0.3s ease;
border-bottom: 1px solid transparent;
}
.info-email:hover {
text-shadow: 0 0 5px #D4A574;
border-bottom: 1px solid #D4A574;
color: #E8C4A0;
}
/* Responsive tweaks for company info */
@media (max-width: 600px) {
.company-info {
margin-top: 20px; /* match footer-links gap */
font-size: 1em;
}
}
@media (max-width: 400px) {
.company-info {
font-size: 0.9em;
gap: 10px;
}
.info-separator {
margin: 0 2px;
}
}
/* Footer links styling */
.footer-links {
font-size: 0.8em;
margin-top: 20px;
text-align: center;
opacity: 0.8;
font-family: 'JetBrains Mono', monospace;
}
.footer-links a {
color: #D4A574;
text-decoration: none;
margin: 0 12px;
transition: text-shadow 0.3s ease;
}
.footer-links a:hover {
text-shadow: 0 0 5px #D4A574;
}
.footer-links span {
color: #D4A574;
opacity: 0.6;
}
/* Contact button wrapper */
.contact-button-wrapper {
text-align: center;
margin-bottom: 20px; /* same spacing as footer-links margin-top */
margin-top: 40px;
}
/* ═══════════════════════════════════════════════════════════════════
WORLD-CLASS CONTACT/SIGNUP BUTTON (Amber) - Dark Theme
═══════════════════════════════════════════════════════════════════ */
.contact-btn {
background-color: #D4A574;
border: 2px solid #D4A574;
color: #000000;
padding: 14px 28px;
margin: 10px 0;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1.5px;
min-width: 160px;
cursor: pointer;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: 'JetBrains Mono', monospace;
font-size: 0.95em;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(212, 165, 116, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-font-smoothing: antialiased;
}
.contact-btn:hover,
.contact-btn:focus {
background-color: #E8C4A0;
border-color: #E8C4A0;
color: #000000;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212, 165, 116, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(212, 165, 116, 0.3);
outline: none;
}
.contact-btn:active,
.contact-btn:active:focus {
background-color: #A67B5B;
border-color: #A67B5B;
color: #000000;
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
outline: none;
}
/* ═══════════════════════════════════════════════════════════════════
WORLD-CLASS BACK/PRICING BUTTONS (Amber) - Dark Theme
═══════════════════════════════════════════════════════════════════ */
#back-btn,
#start-btn {
background-color: #D4A574;
border: 2px solid #D4A574;
color: #000000;
padding: 14px 28px;
min-width: 140px;
font-size: 0.95em;
font-weight: 600;
letter-spacing: 1.5px;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(212, 165, 116, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
-webkit-font-smoothing: antialiased;
}
#back-btn:hover,
#back-btn:focus,
#start-btn:hover,
#start-btn:focus {
background-color: #E8C4A0;
border-color: #E8C4A0;
color: #000000;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212, 165, 116, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(212, 165, 116, 0.3);
outline: none;
}
#back-btn:active,
#back-btn:active:focus,
#start-btn:active,
#start-btn:active:focus {
background-color: #A67B5B;
border-color: #A67B5B;
color: #000000;
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* About page specific overrides for amber theme */
body.about-page .terminal-container {
background-image: repeating-linear-gradient(
0deg,
rgba(212, 165, 116, 0.03) 0px,
rgba(212, 165, 116, 0.03) 1px,
transparent 1px,
transparent 3px
);
box-shadow:
0 0 20px rgba(212, 165, 116, 0.3),
inset 0 0 20px rgba(212, 165, 116, 0.1);
}
/* Remove the conflicting scan lines layer to prevent flickering */
body.about-page .terminal-content::before {
display: none;
}
body.about-page .about-quote {
background: rgba(212, 165, 116, 0.05);
}
/* ========================================
SCROLLBAR STYLING (matching hc_chip.html)
======================================== */
::-webkit-scrollbar {
width: 12px;
}
html.theme-dark ::-webkit-scrollbar-track {
background: #111;
}
html.theme-dark ::-webkit-scrollbar-thumb {
background: #D4A574;
border-radius: 6px;
}
html.theme-dark ::-webkit-scrollbar-thumb:hover {
background: #E8C4A0;
}
html.theme-light ::-webkit-scrollbar-track {
background: #f0f0f0;
}
html.theme-light ::-webkit-scrollbar-thumb {
background: #1F75FE;
border-radius: 6px;
}
html.theme-light ::-webkit-scrollbar-thumb:hover {
background: #1565D8;
}
/* Page-specific scrollbar override */
/* Clean scrolling setup for About page */
body.about-page {
background: #000000 !important; /* Force black background for about page */
overflow-y: auto; /* allow page scrolling */
height: auto; /* let content define height */
min-height: 100vh; /* ensure full viewport coverage */
/* Webview compatibility for smooth scrolling */
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
body.about-page .terminal-container {
background: #000000 !important; /* Force black background for about page */
overflow: visible; /* no container scrolling */
height: auto; /* let content define height */
min-height: 100vh; /* ensure full viewport coverage */
justify-content: flex-start; /* top align */
/* Webview scroll support */
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
body.about-page .terminal-content {
background: #000000 !important; /* Force black background for about page */
overflow: visible; /* prevent nested scrollbars */
height: auto; /* let content define height */
justify-content: flex-start; /* top align */
align-items: flex-start; /* left-top align */
}
body.about-page .about-section {
overflow: visible; /* disable inner scrollbar */
max-height: none; /* let content define height */
/* Force momentum scrolling for webview compatibility */
-webkit-overflow-scrolling: touch;
/* Ensure touch events work properly */
touch-action: pan-y;
}
/* Mobile-specific fixes */
@media (max-width: 768px) {
body.about-page {
min-height: 100vh; /* use standard viewport height */
min-height: 100svh; /* use small viewport height where supported */
/* Force touch scrolling on mobile */
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
body.about-page .terminal-container {
min-height: 100vh;
min-height: 100svh; /* use small viewport height where supported */
}
/* Ensure signature has proper spacing at bottom */
.signature-content {
margin-bottom: 0; /* gap controlled by company-info margin-top */
}
/* Mobile-specific spacing fixes for about-quote and feature-list */
.feature-box {
margin-top: 25px; /* Slightly less spacing on mobile */
}
.about-quote + .about-text .feature-box,
.about-text:has(.about-quote) + .about-text .feature-box {
margin-top: 30px; /* Consistent mobile spacing */
}
}
/* Webview-specific fixes for app environments */
@media (max-width: 768px) {
/* Ensure scrolling works in iOS/Android webview */
body.about-page {
position: relative;
overflow-x: hidden;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
}
/* Prevent any container from blocking scroll */
body.about-page .terminal-container,
body.about-page .terminal-content,
body.about-page .about-section {
position: relative;
overflow: visible;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
}
/* ---- Explicit font-family for about page text (prevent serif fallback) ---- */
.about-text p,
.about-title h1,
.about-quote,
.membership-quote h3 {
font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
}
/* ---- About page feature list ---- */
.feature-list {
list-style: none; /* remove default bullets */
padding-left: 0; /* align left with parent */
margin: 15px 0; /* Add vertical spacing around feature lists */
text-align: left; /* ensure left alignment */
}
.feature-list li {
margin: 6px 0; /* spacing between items */
color: #D4A574; /* match quote accent color */
font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
}
/* --- Remove background box around features --- */
.feature-box {
background: none;
border: none;
padding: 0; /* maintain spacing handled by list */
margin-top: 30px; /* Add spacing after about-quote */
}
/* --- Update primary quote box color --- */
.about-text p.main-quote,
.about-text div.main-quote.membership-quote {
border: 1px solid #D4A574;
background: rgba(212, 165, 116, 0.05);
color: #D4A574 !important; /* ensure text turns amber */
}
/* Ensure the membership quote box has proper styling */
.membership-quote {
padding: 20px;
margin: 20px 0;
margin-bottom: 60px; /* replaces
before ABOUT heading */
border-radius: 8px;
}
/* Ensure proper spacing between about-quote and following content */
.about-quote + .about-text,
.about-text .about-quote + * {
margin-top: 30px;
}
/* Specific spacing for feature-box following about-quote */
.about-quote + .about-text .feature-box,
.about-text:has(.about-quote) + .about-text .feature-box {
margin-top: 35px;
}
/* =============================================
JOURNEY STEPS SECTION
Clean, minimal design for all platforms
============================================= */
.journey-section {
width: 100%;
max-width: 800px;
margin: 45px auto 40px auto;
padding: 0 24px;
box-sizing: border-box;
}
.journey-steps {
display: flex;
flex-direction: column;
gap: 28px;
}
.journey-step {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: 20px;
border-left: 2px solid rgba(212, 165, 116, 0.25);
position: relative;
transition: border-color 0.3s ease;
}
.journey-step::before {
content: '';
position: absolute;
left: -5px;
top: 0;
width: 8px;
height: 8px;
background: #D4A574;
border-radius: 50%;
opacity: 0.8;
transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.journey-step:hover {
border-color: rgba(212, 165, 116, 0.5);
}
.journey-step:hover::before {
opacity: 1;
box-shadow: 0 0 10px rgba(212, 165, 116, 0.6);
}
.step-num {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.7em;
font-weight: 500;
color: #D4A574;
letter-spacing: 2px;
opacity: 0.7;
display: block;
margin-bottom: 2px;
}
.step-title {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 1em;
font-weight: 600;
color: #D4A574;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
transition: text-shadow 0.3s ease;
}
.journey-step:hover .step-title {
text-shadow: 0 0 8px rgba(212, 165, 116, 0.4);
}
.step-desc {
font-family: 'Courier New', Courier, monospace;
font-size: 0.9em;
color: #b0b0b0;
line-height: 1.55;
margin: 0;
}
/* =============================================
JOURNEY: TABLET (769px - 1024px)
============================================= */
@media (min-width: 769px) and (max-width: 1024px) {
.journey-section {
max-width: 700px;
padding: 0 32px;
}
.journey-steps {
gap: 26px;
}
}
/* =============================================
JOURNEY: MOBILE (768px and below)
============================================= */
@media (max-width: 768px) {
.journey-section {
margin: 38px auto 35px auto;
padding: 0 20px;
}
.journey-steps {
gap: 24px;
}
.journey-step {
padding-left: 18px;
gap: 5px;
}
.journey-step::before {
width: 7px;
height: 7px;
left: -4.5px;
}
.step-num {
font-size: 0.65em;
}
.step-title {
font-size: 0.92em;
}
.step-desc {
font-size: 0.85em;
line-height: 1.5;
}
}
/* =============================================
JOURNEY: SMALL MOBILE (480px and below)
============================================= */
@media (max-width: 480px) {
.journey-section {
margin: 32px auto 30px auto;
padding: 0 16px;
}
.journey-steps {
gap: 22px;
}
.journey-step {
padding-left: 16px;
gap: 4px;
}
.journey-step::before {
width: 6px;
height: 6px;
left: -4px;
}
.step-num {
font-size: 0.6em;
letter-spacing: 1.5px;
}
.step-title {
font-size: 0.85em;
letter-spacing: 0.5px;
}
.step-desc {
font-size: 0.8em;
line-height: 1.45;
}
}
/* =============================================
JOURNEY: PWA STANDALONE MODE
============================================= */
@media (display-mode: standalone) {
.journey-section {
padding: 0 24px;
}
.journey-step {
/* Ensure touch-friendly spacing */
min-height: 44px;
}
}
/* PWA Mobile */
@media (display-mode: standalone) and (max-width: 768px) {
.journey-section {
margin: 35px auto 32px auto;
padding: 0 20px;
}
.journey-steps {
gap: 26px;
}
.journey-step {
padding-left: 18px;
/* Better touch targets */
padding-top: 4px;
padding-bottom: 4px;
}
}
/* PWA Small Mobile */
@media (display-mode: standalone) and (max-width: 480px) {
.journey-section {
padding: 0 16px;
}
.journey-steps {
gap: 24px;
}
}
/* =============================================
LIGHT THEME: JOURNEY STEPS
============================================= */
html.theme-light .journey-step {
border-left-color: rgba(31, 117, 254, 0.25);
}
html.theme-light .journey-step:hover {
border-left-color: rgba(31, 117, 254, 0.5);
}
html.theme-light .journey-step::before {
background: #1F75FE;
}
html.theme-light .journey-step:hover::before {
box-shadow: 0 0 10px rgba(31, 117, 254, 0.6);
}
html.theme-light .step-num {
color: #1F75FE;
}
html.theme-light .step-title {
color: #1F75FE;
}
html.theme-light .journey-step:hover .step-title {
text-shadow: 0 0 8px rgba(31, 117, 254, 0.4);
}
html.theme-light .step-desc {
color: #555555;
}
/* Amber headings */
.yellow-title h1 {
color: #D4A574;
text-shadow: 0 0 5px #D4A574;
}
/* Scroll Reveal Animation Styles */
.reveal-element {
opacity: 0;
transform: translateY(30px);
filter: blur(2px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-delay: 0ms;
/* Performance optimizations for mobile */
will-change: transform, opacity, filter;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* Ensure smooth touch scrolling */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.reveal-element.revealed {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
/* Remove will-change after animation completes */
will-change: auto;
}
/* Staggered reveal for list items */
.feature-list .reveal-element {
transition-delay: 0ms;
}
.feature-list .reveal-element:nth-child(1) { transition-delay: 100ms; }
.feature-list .reveal-element:nth-child(2) { transition-delay: 200ms; }
.feature-list .reveal-element:nth-child(3) { transition-delay: 300ms; }
.feature-list .reveal-element:nth-child(4) { transition-delay: 400ms; }
.feature-list .reveal-element:nth-child(5) { transition-delay: 500ms; }
.feature-list .reveal-element:nth-child(6) { transition-delay: 600ms; }
/* Staggered reveal for journey steps */
.journey-step.reveal-element {
transform: translateY(15px);
transition-duration: 0.6s;
}
.journey-step.reveal-element.revealed {
transform: translateY(0);
}
.journey-steps .journey-step.reveal-element:nth-child(1) { transition-delay: 50ms; }
.journey-steps .journey-step.reveal-element:nth-child(2) { transition-delay: 150ms; }
.journey-steps .journey-step.reveal-element:nth-child(3) { transition-delay: 250ms; }
/* Staggered reveal for paragraphs within the same section */
.about-text .reveal-element:nth-child(1) { transition-delay: 0ms; }
.about-text .reveal-element:nth-child(2) { transition-delay: 200ms; }
.about-text .reveal-element:nth-child(3) { transition-delay: 400ms; }
/* Special reveal for titles */
.about-title.reveal-element {
transform: translateY(20px);
transition-duration: 0.6s;
}
/* Special reveal for images */
.about-image-section.reveal-element {
transform: translateY(40px) scale(0.95);
transition-duration: 1s;
}
.about-image-section.reveal-element.revealed {
transform: translateY(0) scale(1);
}
/* Quote special effect */
.about-quote.reveal-element {
transform: translateY(25px);
transition-duration: 1s;
transition-delay: 300ms;
}
/* Signature section special reveal */
.signature-section .reveal-element {
transform: translateY(20px);
transition-duration: 0.7s;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.reveal-element {
opacity: 0.3;
transform: none;
filter: none;
transition: opacity 0.3s ease;
}
.reveal-element.revealed {
opacity: 1;
transform: none;
filter: none;
}
}
/* Ensure animations work smoothly on mobile */
@media (max-width: 768px) {
.reveal-element {
transform: translateY(20px);
transition-duration: 0.6s;
/* Optimize for mobile performance */
filter: blur(1px); /* Reduce blur on mobile */
transition-property: transform, opacity, filter;
}
.about-image-section.reveal-element {
transform: translateY(25px) scale(0.98);
/* Remove scale on very small devices to improve performance */
}
/* Remove blur entirely on older/slower mobile devices */
@media (max-width: 480px) {
.reveal-element {
filter: none;
transition-property: transform, opacity;
}
.reveal-element.revealed {
filter: none;
}
.about-image-section.reveal-element {
transform: translateY(15px); /* No scale on small devices */
}
.about-image-section.reveal-element.revealed {
transform: translateY(0);
}
}
}
/* Enhanced touch scrolling fixes for mobile/PWA */
@media (max-width: 768px) {
/* Force hardware acceleration and smooth scrolling */
body.about-page {
-webkit-overflow-scrolling: touch !important;
overflow-scrolling: touch;
/* Prevent scroll anchoring issues */
overflow-anchor: none;
/* Improve touch responsiveness */
touch-action: pan-y !important;
/* Force hardware acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: scroll-position;
}
body.about-page .terminal-container {
/* Prevent container from interfering with scroll */
touch-action: pan-y !important;
-webkit-overflow-scrolling: touch;
/* Remove any potential scroll conflicts */
overflow: visible;
}
body.about-page .terminal-content {
/* Ensure content doesn't interfere with scroll */
touch-action: pan-y !important;
overflow: visible;
/* Force GPU acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body.about-page .about-section {
/* Prevent nested scroll conflicts */
overflow: visible !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-y !important;
}
}
/* PWA-specific scroll optimizations */
@media (display-mode: standalone) {
body.about-page {
/* PWA viewport optimization */
min-height: 100vh;
min-height: 100svh;
/* Enhanced touch scrolling for PWA */
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
overscroll-behavior: contain;
}
}
/* --- Align image with navigation buttons without moving buttons --- */
.about-section {
position: relative; /* establish stacking context */
}
.about-nav-buttons {
position: relative; /* restore original flow */
margin: 20px 0 30px 0; /* original spacing */
padding: 0 10px;
z-index: 3; /* keep buttons above image */
}
.about-image-section {
position: relative;
margin-top: -36px; /* pull image upward so its top aligns under buttons */
z-index: 1; /* image behind buttons */
/* Ensure no dark background during loading */
background: transparent !important;
background-color: transparent !important;
overflow: hidden; /* clip video edge artifacts */
border-radius: 12px; /* match video border-radius */
}
/* Critical image loading states - prevent black backgrounds */
.about-image {
/* Default transparent background */
background: transparent !important;
background-color: transparent !important;
/* Ensure proper display during loading */
opacity: 1;
transition: opacity 0.3s ease;
/* Rounded corners for main images */
border-radius: 12px;
}
/* Keep small logo image without rounded corners */
.about-image.logo-art-7 {
border-radius: 0;
}
/* Enhanced critical image loading states */
.about-image[data-critical] {
/* Force transparent background for critical images */
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
/* Prevent any dark loading backgrounds */
border: none !important;
box-shadow: none !important;
/* Smooth loading transition */
opacity: 1;
transition: opacity 0.2s ease;
}
/* Loading state styling - use light pattern instead of dark */
.about-image.image-loading {
background: #555 !important;
background-image: repeating-linear-gradient(45deg, #555, #555 8px, #666 8px, #666 16px) !important;
animation: loadingPulse 2s ease-in-out infinite !important;
opacity: 0.8;
}
/* Error state styling - avoid pure black */
.about-image.image-error {
background: #444 !important;
background-image: repeating-linear-gradient(45deg, #444, #444 10px, #666 10px, #666 20px) !important;
border: 2px dashed #888 !important;
opacity: 0.7;
}
/* Successful load state - clear all backgrounds */
.about-image.image-loaded {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
animation: none !important;
opacity: 1 !important;
border: none !important;
box-shadow: none !important;
}
/* Loading animation */
@keyframes loadingPulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 0.6; }
}
/* Spacer replacing empty headings */
.about-spacer {
height: 60px;
}
/* --- SITE FEATURES specific styling --- */
.site-features-title h1 {
color: #FFFFFF; /* white text */
margin-top: 60px; /* space above heading (below quote) */
}
/* --- Center signature divider and add spacing --- */
.signature-divider {
margin: 40px auto 30px auto; /* reduce vertical gap */
}
/* Desktop-specific styling for logo_art_front_7.jpg */
.about-image.logo-art-7 {
width: 40% !important;
max-width: 450px !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
object-fit: contain; /* Ensure proper aspect ratio */
}
/* --- Mobile full-screen image styling --- */
@media (max-width: 768px) {
.about-image-section {
margin: 20px -24px; /* negative margin to counteract section padding */
padding: 0 16px; /* add horizontal padding for image */
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw; /* full viewport width */
}
.about-image {
width: 100%; /* full width of container (minus padding) */
max-width: none; /* remove max-width constraint */
height: auto;
display: block;
}
/* Specific fix for logo_art_front_7.jpg to prevent stretching */
.about-image.logo-art-7 {
width: 35% !important;
max-width: 300px !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
object-fit: contain; /* Ensure proper aspect ratio */
}
}
/* ---- Mobile responsive pricing modal fixes - BROWSER ONLY ---- */
/* Fix modal height for smaller mobile BROWSER screens (not PWA/app view) */
@media (max-width: 600px) and (display-mode: browser) {
.pricing-modal {
padding: 10px;
height: 100vh;
height: 100svh; /* use small viewport height where supported */
/* Don't set display here - let JavaScript control show/hide */
align-items: center;
justify-content: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pricing-content {
width: 100%;
max-width: 95%;
/* Ensure content fits within viewport with proper margins */
max-height: calc(100vh - 40px);
max-height: calc(100svh - 40px);
margin: 20px auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Ensure proper scrolling behavior */
overscroll-behavior: contain;
}
}
/* Extra small screens (iPhone SE, older Android) - BROWSER ONLY */
@media (max-width: 375px) and (max-height: 667px) and (display-mode: browser) {
.pricing-modal {
padding: 5px;
}
.pricing-content {
max-height: calc(100vh - 30px);
max-height: calc(100svh - 30px);
margin: 15px auto;
padding: 15px;
}
.pricing-content h2 {
font-size: 1.1em;
margin-bottom: 10px;
}
.pricing-content li {
font-size: 0.85em;
margin-bottom: 4px;
}
.plan-divider {
margin: 15px 0;
}
}
/* Very small screens (iPhone 5/SE 1st gen) - BROWSER ONLY */
@media (max-width: 320px) and (max-height: 568px) and (display-mode: browser) {
.pricing-content {
max-height: calc(100vh - 20px);
max-height: calc(100svh - 20px);
margin: 10px auto;
padding: 12px;
}
.pricing-content h2 {
font-size: 1em;
margin-bottom: 8px;
}
.pricing-content li {
font-size: 0.8em;
margin-bottom: 3px;
}
.plan-divider {
margin: 12px 0;
}
.modal-close-btn {
top: 5px;
right: 5px;
padding: 5px 8px;
font-size: 0.9em;
}
}
/* Landscape orientation on mobile - BROWSER ONLY */
@media (max-width: 768px) and (orientation: landscape) and (display-mode: browser) {
.pricing-modal {
align-items: flex-start;
padding-top: 10px;
}
.pricing-content {
max-height: calc(100vh - 20px);
max-height: calc(100svh - 20px);
margin: 10px auto;
}
}
/* Fallback for browsers that don't support display-mode - use touch detection */
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
/* Only apply to mobile browsers, not PWA */
body:not(.pwa-standalone) .pricing-modal {
padding: 10px;
height: 100vh;
height: 100svh;
/* Don't set display here - let JavaScript control show/hide */
align-items: center;
justify-content: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body:not(.pwa-standalone) .pricing-content {
width: 100%;
max-width: 95%;
max-height: calc(100vh - 40px);
max-height: calc(100svh - 40px);
margin: 20px auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
}
/* JavaScript-enhanced mobile browser detection (already exists in main CSS) */
body.mobile-browser .pricing-modal {
padding: 10px;
height: 100vh;
height: 100svh;
/* Don't set display here - let JavaScript control show/hide */
align-items: center;
justify-content: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.mobile-browser .pricing-content {
width: 100%;
max-width: 95%;
max-height: calc(100vh - 40px);
max-height: calc(100svh - 40px);
margin: 20px auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* About page specific pricing modal styling */
#pricingModal .pricing-content {
color: #FFFFFF !important;
}
#pricingModal .pricing-content h2 {
color: #D4A574 !important;
text-shadow: none !important;
}
#pricingModal .pricing-content li {
color: #FFFFFF !important;
}
/* Keep the ▸ arrow symbols amber - only for pricing modal, not legal modals */
#pricingModal .pricing-content:not(.privacy-policy-modal-content):not(.terms-service-modal-content):not(.legal-disclaimer-modal-content) li::first-letter {
color: #D4A574 !important;
}
/* Remove white first-letter effect for legal modals in about.html - let first letter match rest of text */
#privacyPolicyModal .pricing-content li::first-letter,
#legalDisclaimerModal .pricing-content li::first-letter,
#termsServiceModal .pricing-content li::first-letter {
color: inherit !important;
}
/* Make h3 headers inside li elements amber */
#pricingModal .pricing-content li h3 {
color: #D4A574 !important;
}
/* Make all h3 elements amber throughout the page */
h3 {
color: #D4A574 !important;
text-shadow: 0 0 5px #D4A574;
font-weight: 600;
margin: 15px 0 10px 0;
}
/* Special styling for ONLY the specific membership features section */
.membership-features h3,
.membership-features .feature-list li {
background: linear-gradient(
90deg,
#f5f5f0 0%,
#f5f5f0 25%,
#D4A574 35%,
#E8C4A0 50%,
#D4A574 65%,
#f5f5f0 75%,
#f5f5f0 100%
);
background-size: 300% 100%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: gradientShift 15s ease-in-out infinite;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Slower gradient animation */
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
25% {
background-position: 25% 50%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 75% 50%;
}
}
/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
.membership-features h3,
.membership-features .feature-list li {
color: #f5f5f0;
text-shadow: 0 0 8px rgba(212, 165, 116, 0.3);
-webkit-text-fill-color: unset;
background: none;
}
}
/* Ensure h3 elements have proper spacing and visibility for the specific section */
.membership-features h3 {
margin: 20px 0 15px 0;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
}
/* Keep dividers amber */
#pricingModal .plan-divider {
background: linear-gradient(90deg, transparent, #D4A574 50%, transparent) !important;
}
/* Keep close button amber */
#pricingModal .modal-close-btn {
border: 2px solid #D4A574 !important;
color: #D4A574 !important;
box-shadow: 0 0 10px #D4A574 !important;
}
#pricingModal .modal-close-btn:hover,
#pricingModal .modal-close-btn:focus {
background: #D4A574 !important;
color: #000 !important;
box-shadow: 0 0 20px #D4A574 !important;
}
/* Fix for Windows Desktop PWA – ensure footer links are always visible */
@media (display-mode: standalone) and (min-width: 769px) {
.footer-links {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ============ FULL SCREEN SYSTEM MATRIX OVERLAY ============ */
.membership-matrix {
/* Full screen overlay positioning */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background:
radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%),
repeating-linear-gradient(
0deg,
rgba(212, 165, 116, 0.02) 0px,
rgba(212, 165, 116, 0.02) 1px,
transparent 1px,
transparent 4px
);
backdrop-filter: blur(3px);
z-index: 10000;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 20px;
font-family: 'JetBrains Mono', monospace;
/* Animated grid lines */
background-image:
repeating-linear-gradient(
0deg,
rgba(212, 165, 116, 0.03) 0px,
rgba(212, 165, 116, 0.03) 1px,
transparent 1px,
transparent 20px
),
repeating-linear-gradient(
90deg,
rgba(212, 165, 116, 0.02) 0px,
rgba(212, 165, 116, 0.02) 1px,
transparent 1px,
transparent 20px
);
}
/* Animated scanning lines */
.membership-matrix::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #D4A574 30%, #D4A574 70%, transparent);
animation: scanLineTop 6s ease-in-out infinite;
z-index: 1;
}
.membership-matrix::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #D4A574 30%, #D4A574 70%, transparent);
animation: scanLineBottom 6s ease-in-out infinite 3s;
z-index: 1;
}
@keyframes scanLineTop {
0%, 100% { opacity: 0; transform: scaleX(0); }
20%, 80% { opacity: 1; transform: scaleX(1); }
}
@keyframes scanLineBottom {
0%, 100% { opacity: 0; transform: scaleX(0); }
20%, 80% { opacity: 1; transform: scaleX(1); }
}
/* Matrix Container */
.matrix-container {
width: 100%;
max-width: 1400px;
background:
linear-gradient(145deg, rgba(0, 0, 0, 0.9), rgba(212, 165, 116, 0.03)),
radial-gradient(circle at 70% 30%, rgba(212, 165, 116, 0.05) 0%, transparent 50%);
border: 2px solid #D4A574;
border-radius: 16px;
box-shadow:
0 0 40px rgba(212, 165, 116, 0.4),
inset 0 0 40px rgba(212, 165, 116, 0.05),
0 0 100px rgba(212, 165, 116, 0.2);
overflow: hidden;
position: relative;
z-index: 2;
}
/* Matrix Header - Enhanced */
.matrix-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
background:
linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(212, 165, 116, 0.08)),
linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent);
border-bottom: 3px solid #D4A574;
position: relative;
}
.matrix-header::before {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #D4A574, transparent);
box-shadow: 0 0 10px #D4A574;
}
.matrix-corner {
padding: 25px 20px;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(212, 165, 116, 0.05)),
radial-gradient(circle at center, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 2px solid #D4A574;
position: relative;
text-align: center;
}
.matrix-corner::before {
content: '';
position: absolute;
top: 10px;
right: 10px;
width: 8px;
height: 8px;
background: #00ff00;
border-radius: 50%;
animation: pulse 2s infinite;
box-shadow: 0 0 10px #00ff00;
}
.matrix-label {
color: #D4A574;
font-size: 1.2em;
font-weight: 700;
letter-spacing: 3px;
text-shadow: 0 0 15px #D4A574;
}
/* Close Button - Responsive for all screen sizes */
.matrix-close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.8);
border: 2px solid #D4A574;
color: #D4A574;
font-size: 1.8em;
font-weight: 700;
cursor: pointer;
box-shadow: 0 0 15px rgba(212, 165, 116, 0.4);
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
border-radius: 10px;
z-index: 10;
line-height: 1;
text-align: center;
padding: 0;
margin: 0;
}
.matrix-close-btn:hover,
.matrix-close-btn:focus {
background: #D4A574;
color: #000;
box-shadow: 0 0 25px rgba(212, 165, 116, 0.6);
outline: none;
transform: scale(1.05);
}
.plan-header {
padding: 20px 15px;
text-align: center;
border-right: 1px solid rgba(212, 165, 116, 0.4);
position: relative;
transition: all 0.4s ease;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(212, 165, 116, 0.02));
cursor: pointer;
}
.plan-header:hover {
background:
linear-gradient(135deg, rgba(212, 165, 116, 0.1), rgba(212, 165, 116, 0.05)),
radial-gradient(circle at center, rgba(212, 165, 116, 0.15) 0%, transparent 70%);
box-shadow: inset 0 0 30px rgba(212, 165, 116, 0.2);
transform: translateY(-2px);
}
.plan-tier {
font-size: 0.7em;
color: rgba(255, 255, 255, 0.5);
font-weight: 300;
letter-spacing: 2px;
margin-bottom: 8px;
}
.plan-title {
font-size: 1.3em;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 4px;
text-shadow: 0 0 12px #D4A574;
letter-spacing: 1px;
}
.plan-subtitle {
font-size: 0.8em;
color: #D4A574;
margin-bottom: 12px;
opacity: 0.9;
letter-spacing: 1px;
}
.plan-price {
font-size: 1em;
color: #D4A574;
font-weight: 600;
background:
linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(212, 165, 116, 0.08));
padding: 8px 12px;
border-radius: 6px;
border: 1px solid rgba(212, 165, 116, 0.5);
text-shadow: 0 0 8px #D4A574;
margin-bottom: 8px;
display: inline-block;
}
/* Make dollar signs in plan prices green (only for prices starting with $) */
.basic-plan .plan-price::first-letter,
.premium-plan .plan-price::first-letter,
.max-plan .plan-price::first-letter {
color: #00ff00 !important;
}
/* Matrix Body - Enhanced */
.matrix-body {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 100%),
radial-gradient(ellipse at top left, rgba(212, 165, 116, 0.03) 0%, transparent 50%);
}
.feature-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
border-bottom: 1px solid rgba(212, 165, 116, 0.2);
transition: all 0.4s ease;
position: relative;
}
.feature-row:hover {
background:
linear-gradient(90deg, rgba(212, 165, 116, 0.05), rgba(212, 165, 116, 0.08), rgba(212, 165, 116, 0.05));
box-shadow:
inset 0 0 20px rgba(212, 165, 116, 0.1),
0 0 20px rgba(212, 165, 116, 0.1);
}
.feature-row:hover::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, transparent, #D4A574, transparent);
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from { height: 0; top: 50%; }
to { height: 100%; top: 0; }
}
.feature-row:last-child {
border-bottom: none;
}
.feature-name {
padding: 25px 20px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(212, 165, 116, 0.03));
border-right: 2px solid #D4A574;
position: relative;
}
.feature-name::before {
content: '';
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: 2px;
height: 60%;
background: linear-gradient(180deg, transparent, #D4A574, transparent);
opacity: 0.6;
}
.feature-icon {
color: #D4A574;
font-size: 1em;
animation: pulse 3s ease-in-out infinite alternate;
margin-right: 8px;
flex-shrink: 0;
}
.feature-label {
color: #FFFFFF;
font-weight: 600;
font-size: 1em;
letter-spacing: 0.5px;
}
.feature-code {
color: rgba(255, 255, 255, 0.4);
font-size: 0.7em;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.feature-value {
padding: 25px 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-right: 1px solid rgba(212, 165, 116, 0.2);
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease;
position: relative;
gap: 6px;
}
.feature-value:hover {
background:
linear-gradient(135deg, rgba(212, 165, 116, 0.08), rgba(212, 165, 116, 0.04));
transform: scale(1.02);
}
.value-highlight {
font-size: 1.6em;
font-weight: 700;
color: #D4A574;
text-shadow: 0 0 12px #D4A574;
margin-bottom: 2px;
}
.value-unit {
font-size: 0.75em;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
/* New Progress Bars */
.value-bar {
width: 80%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.bar-fill {
height: 100%;
background: linear-gradient(90deg, #D4A574, #D4A574);
border-radius: 2px;
transition: width 1s ease-out;
box-shadow: 0 0 6px rgba(212, 165, 116, 0.6);
}
.bar-fill.infinite {
background: linear-gradient(90deg, #D4A574, #D4A574, #D4A574);
animation: infiniteFlow 2s ease-in-out infinite;
}
.bar-fill.disabled {
background: rgba(255, 255, 255, 0.2);
width: 0 !important;
}
@keyframes infiniteFlow {
0%, 100% { background-position: -200% 0; }
50% { background-position: 200% 0; }
}
/* Status indicators */
.value-status {
font-size: 0.65em;
font-weight: 600;
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
.status-locked {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
}
.status-active {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
text-shadow: 0 0 6px #00ff00;
}
.value-radius {
font-size: 0.7em;
color: rgba(255, 255, 255, 0.6);
background: rgba(212, 165, 116, 0.1);
padding: 2px 6px;
border-radius: 8px;
border: 1px solid rgba(212, 165, 116, 0.3);
}
.value-disabled {
font-size: 1.4em;
color: rgba(255, 255, 255, 0.3);
font-weight: 700;
}
.value-active {
font-size: 1.6em;
color: #00ff00;
text-shadow: 0 0 15px #00ff00;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 10px #00ff00; }
to { text-shadow: 0 0 25px #00ff00, 0 0 35px #00ff00; }
}
/* Plan-specific styling */
.free-plan { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); }
.basic-plan { background: linear-gradient(135deg, rgba(212, 165, 116, 0.06), rgba(212, 165, 116, 0.02)); }
.premium-plan { background: linear-gradient(135deg, rgba(212, 165, 116, 0.10), rgba(212, 165, 116, 0.04)); }
.max-plan { background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(212, 165, 116, 0.06)); }
/* Enhanced Matrix Footer */
.matrix-footer {
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(212, 165, 116, 0.05)),
linear-gradient(180deg, rgba(212, 165, 116, 0.1), transparent);
border-top: 3px solid #D4A574;
padding: 25px 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.terminal-prompt {
display: flex;
align-items: center;
gap: 10px;
font-size: 1em;
}
.prompt-symbol {
color: #00ff00 !important;
font-weight: 700;
font-size: 1.2em;
}
.prompt-text {
color: #FFFFFF;
opacity: 0.9;
letter-spacing: 0.5px;
}
.cursor-blink {
color: #D4A574;
animation: blink 1.2s step-end infinite;
font-size: 1.1em;
}
.system-info {
display: flex;
gap: 20px;
font-size: 0.8em;
opacity: 0.7;
}
.info-item {
color: rgba(255, 255, 255, 0.6);
letter-spacing: 1px;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@keyframes pulse {
from { opacity: 0.6; }
to { opacity: 1; }
}
/* ============ RESPONSIVE MOBILE MATRIX ============ */
@media (max-width: 1024px) {
.membership-matrix {
padding: 20px 15px;
}
.matrix-container {
max-width: 100%;
border-radius: 12px;
}
.matrix-header,
.feature-row {
grid-template-columns: 1.8fr 0.9fr 0.9fr 0.9fr 0.9fr;
}
.plan-title {
font-size: 1.1em;
}
.value-highlight {
font-size: 1.4em;
}
}
@media (max-width: 768px) {
.membership-matrix {
padding: 15px 5px;
}
/* Smaller close button on mobile */
.matrix-close-btn {
top: 25px;
right: 10px;
width: 40px;
height: 40px;
font-size: 1.4em;
line-height: 1;
text-align: center;
padding: 0;
margin: 0;
}
}
/* PWA Mobile Safe Area Adjustments */
@media (max-width: 768px) and (display-mode: standalone) {
.matrix-close-btn {
top: calc(35px + env(safe-area-inset-top, 20px));
}
}
@media (max-width: 480px) and (display-mode: standalone) {
.matrix-close-btn {
top: calc(33px + env(safe-area-inset-top, 20px));
}
}
@media (max-width: 320px) and (display-mode: standalone) {
.matrix-close-btn {
top: calc(30px + env(safe-area-inset-top, 20px));
}
}
/* iOS PWA Specific - Additional padding for devices with notches */
@supports (-webkit-touch-callout: none) {
@media (max-width: 768px) and (display-mode: standalone) {
.matrix-close-btn {
top: calc(35px + max(env(safe-area-inset-top, 20px), 25px));
}
}
@media (max-width: 480px) and (display-mode: standalone) {
.matrix-close-btn {
top: calc(33px + max(env(safe-area-inset-top, 20px), 25px));
}
}
@media (max-width: 320px) and (display-mode: standalone) {
.matrix-close-btn {
top: calc(30px + max(env(safe-area-inset-top, 20px), 25px));
}
}
}
/* Fallback for older browsers or specific Android devices */
@media (max-width: 768px) {
body.pwa-standalone .matrix-close-btn {
top: 50px; /* Fallback padding for status bar */
}
}
@media (max-width: 480px) {
body.pwa-standalone .matrix-close-btn {
top: 48px;
}
}
@media (max-width: 320px) {
body.pwa-standalone .matrix-close-btn {
top: 45px;
}
.matrix-header,
.feature-row {
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
font-size: 0.85em;
}
.matrix-corner {
padding: 15px 8px;
min-height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.matrix-label {
font-size: 0.9em;
letter-spacing: 2px;
line-height: 1;
margin: 0;
}
.plan-header {
padding: 15px 6px;
min-height: 70px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.plan-tier {
font-size: 0.55em;
margin-bottom: 2px;
margin-top: 0;
line-height: 1;
}
.plan-title {
font-size: 0.85em;
margin-bottom: 2px;
line-height: 1;
}
.plan-subtitle {
font-size: 0.65em;
margin-bottom: 4px;
line-height: 1;
}
.plan-price {
font-size: 0.75em;
padding: 4px 6px;
margin-bottom: 0;
}
.feature-name {
padding: 12px 8px;
min-height: 70px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 6px;
}
.feature-name::before {
left: 4px;
width: 1px;
height: 50%;
}
.feature-icon {
font-size: 0.8em;
margin-right: 4px;
flex-shrink: 0;
}
.feature-text-group {
display: flex;
flex-direction: column;
gap: 1px;
}
.feature-label {
font-size: 0.75em;
line-height: 1.2;
word-break: break-word;
}
.feature-code {
font-size: 0.6em;
margin-top: 0;
}
.feature-value {
padding: 12px 4px;
min-height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3px;
}
.value-highlight {
font-size: 1em;
line-height: 1;
}
.value-unit {
font-size: 0.6em;
margin-bottom: 4px;
text-align: center;
}
.value-bar {
width: 85%;
height: 3px;
}
.value-status {
font-size: 0.55em;
padding: 2px 4px;
}
.value-radius {
font-size: 0.6em;
padding: 1px 4px;
}
.matrix-footer {
padding: 15px 10px;
gap: 10px;
}
.system-info {
font-size: 0.7em;
gap: 10px;
text-align: center;
}
}
/* Ultra-compact mobile */
@media (max-width: 480px) {
.membership-matrix {
padding: 10px 3px;
}
/* Even smaller close button on small mobile */
.matrix-close-btn {
top: 23px;
right: 8px;
width: 35px;
height: 35px;
font-size: 1.2em;
}
.matrix-header,
.feature-row {
grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 0.9fr;
font-size: 0.75em;
}
.matrix-corner {
padding: 12px 4px;
min-height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.matrix-label {
font-size: 0.75em;
letter-spacing: 1px;
line-height: 1;
margin: 0;
}
.plan-header {
padding: 12px 3px;
min-height: 60px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.plan-tier {
font-size: 0.5em;
margin-bottom: 1px;
margin-top: 0;
line-height: 1;
}
.plan-title {
font-size: 0.75em;
margin-bottom: 1px;
line-height: 1;
}
.plan-subtitle {
font-size: 0.6em;
margin-bottom: 3px;
line-height: 1;
}
.plan-price {
font-size: 0.65em;
padding: 3px 4px;
margin-bottom: 0;
}
.feature-name {
padding: 10px 4px;
min-height: 60px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 4px;
}
.feature-name::before {
left: 2px;
width: 1px;
height: 40%;
}
.feature-icon {
font-size: 0.7em;
margin-right: 3px;
flex-shrink: 0;
}
.feature-text-group {
display: flex;
flex-direction: column;
gap: 1px;
}
.feature-label {
font-size: 0.65em;
line-height: 1.1;
}
.feature-code {
font-size: 0.55em;
margin-top: 0;
}
.feature-value {
padding: 10px 2px;
min-height: 60px;
gap: 2px;
}
.value-highlight {
font-size: 0.9em;
}
.value-unit {
font-size: 0.55em;
margin-bottom: 3px;
}
.value-bar {
width: 90%;
height: 2px;
}
.value-status {
font-size: 0.5em;
padding: 1px 3px;
}
.value-radius {
font-size: 0.55em;
padding: 1px 3px;
}
.matrix-footer {
padding: 12px 8px;
gap: 8px;
}
.system-info {
font-size: 0.65em;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
}
/* Extra small devices */
@media (max-width: 320px) {
.membership-matrix {
padding: 8px 2px;
}
/* Tiny close button on extra small screens */
.matrix-close-btn {
top: 20px;
right: 5px;
width: 30px;
height: 30px;
font-size: 1em;
}
.matrix-header,
.feature-row {
grid-template-columns: 1.2fr 0.85fr 0.85fr 0.85fr 0.85fr;
font-size: 0.7em;
}
.matrix-corner {
padding: 10px 3px;
min-height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.matrix-label {
font-size: 0.7em;
line-height: 1;
margin: 0;
}
.plan-header {
padding: 10px 2px;
min-height: 50px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.plan-tier {
font-size: 0.45em;
margin-bottom: 1px;
margin-top: 0;
line-height: 1;
}
.plan-title {
font-size: 0.7em;
margin-bottom: 1px;
line-height: 1;
}
.plan-subtitle {
font-size: 0.55em;
margin-bottom: 2px;
line-height: 1;
}
.plan-price {
font-size: 0.6em;
padding: 2px 3px;
margin-bottom: 0;
}
.feature-name {
padding: 8px 3px;
min-height: 50px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 3px;
}
.feature-name::before {
left: 1px;
width: 1px;
height: 30%;
}
.feature-icon {
font-size: 0.6em;
margin-right: 2px;
flex-shrink: 0;
}
.feature-text-group {
display: flex;
flex-direction: column;
gap: 0px;
}
.feature-label {
font-size: 0.6em;
}
.feature-code {
font-size: 0.5em;
}
.feature-value {
padding: 8px 1px;
min-height: 50px;
}
.value-highlight {
font-size: 0.8em;
}
.value-unit {
font-size: 0.5em;
}
.matrix-footer {
padding: 10px 5px;
}
.system-info {
font-size: 0.6em;
gap: 8px;
}
}
/* PWA-specific spacing for about page content */
body.pwa-standalone .feature-box {
margin-top: 30px; /* Consistent spacing in PWA mode */
}
body.pwa-standalone .about-quote + .about-text .feature-box,
body.pwa-standalone .about-text:has(.about-quote) + .about-text .feature-box {
margin-top: 35px; /* Ensure proper separation in PWA */
}
/* =============================================
Privacy Policy Modal Styles
============================================= */
/* Privacy Policy Modal - Small Text Style */
/* Privacy Policy Modal - Base styling */
#privacyPolicyModal.pricing-modal {
display: none;
position: fixed;
inset: 0;
padding: 24px;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.88);
z-index: 20000;
overflow-y: auto;
}
#privacyPolicyModal.pricing-modal.modal-force-visible {
display: flex !important;
width: 100vw;
height: 100vh;
padding: 24px;
}
#privacyPolicyModal.pricing-modal.modal-open {
display: flex;
}
#privacyPolicyModal .pricing-content.privacy-policy-modal-content {
position: relative;
width: clamp(320px, 78vw, 980px);
max-height: 88vh;
overflow-y: auto;
padding: 48px 36px 36px 36px;
background: #050505;
border: 2px solid #D4A574;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(212, 165, 116, 0.22);
border-radius: 12px;
color: #f3f3f3;
}
#privacyPolicyModal .pricing-content.modal-content-force-size {
display: block !important;
min-width: clamp(320px, 80vw, 600px) !important;
min-height: clamp(260px, 60vh, 520px) !important;
}
#privacyPolicyModal .modal-close-btn {
position: absolute;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
background: transparent;
border: 2px solid #D4A574;
color: #D4A574;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
line-height: 1;
}
#privacyPolicyModal .modal-close-btn:hover,
#privacyPolicyModal .modal-close-btn:focus {
background: #D4A574;
color: #050505;
box-shadow: 0 0 14px rgba(212, 165, 116, 0.45);
}
.privacy-policy-content-inner {
font-size: 0.85em;
line-height: 1.7;
color: #f0f0f0;
}
.privacy-policy-content-inner h2 {
font-size: 1.9em;
color: #D4A574;
text-align: center;
margin-bottom: 16px;
text-shadow: 0 0 6px rgba(212, 165, 116, 0.35);
}
.privacy-policy-content-inner h3,
.privacy-policy-content-inner h4,
.privacy-policy-content-inner strong,
.privacy-policy-content-inner li strong {
color: #D4A574;
}
.privacy-policy-content-inner h3 {
font-size: 1.25em;
margin-top: 26px;
margin-bottom: 12px;
}
.privacy-policy-content-inner h4 {
font-size: 1.05em;
margin-top: 18px;
margin-bottom: 8px;
font-weight: 600;
}
.privacy-policy-content-inner p {
font-size: 1em;
color: #d8d8d8;
margin-bottom: 14px;
line-height: 1.65;
}
.privacy-policy-content-inner ul,
.privacy-policy-content-inner ol {
margin-left: 22px;
margin-bottom: 18px;
}
.privacy-policy-content-inner li {
font-size: 0.96em;
color: #d0d0d0;
margin-bottom: 9px;
line-height: 1.6;
}
.privacy-policy-content-inner .effective-date {
text-align: center;
font-size: 0.95em;
color: #D4A574;
margin-bottom: 24px;
font-style: italic;
}
.privacy-policy-content-inner .policy-intro,
.privacy-policy-content-inner .emphasis-box,
.privacy-policy-content-inner .contact-info {
padding: 16px;
border-radius: 6px;
border-left: 3px solid #D4A574;
background: rgba(212, 165, 116, 0.12);
margin: 20px 0;
}
.privacy-policy-content-inner .emphasis-box strong,
.privacy-policy-content-inner .final-statement {
color: #D4A574;
}
.privacy-policy-content-inner .policy-section {
margin-bottom: 32px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(212, 165, 116, 0.18);
}
.privacy-policy-content-inner .policy-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.privacy-policy-content-inner .final-statement {
text-align: center;
font-style: italic;
margin-top: 32px;
font-size: 1.05em;
}
@media (max-width: 768px), (display-mode: standalone) {
#privacyPolicyModal.pricing-modal {
padding: 16px;
}
/* Only apply flex display when modal is open */
#privacyPolicyModal.pricing-modal.modal-open {
display: flex !important;
align-items: center;
justify-content: center;
}
#privacyPolicyModal .pricing-content.privacy-policy-modal-content {
width: min(95vw, 600px);
padding: 32px 22px 24px 22px;
border-radius: 10px;
max-height: 90vh;
margin: auto;
}
#privacyPolicyModal .modal-close-btn {
top: 12px;
right: 12px;
width: 36px;
height: 36px;
font-size: 1.2em;
}
.privacy-policy-content-inner {
font-size: 0.78em;
}
}
@media (max-width: 768px) and (orientation: landscape) and (display-mode: browser) {
#privacyPolicyModal.pricing-modal {
padding: 12px;
}
#privacyPolicyModal.pricing-modal.modal-open {
display: flex !important;
align-items: flex-start;
padding-top: 24px;
}
#privacyPolicyModal .pricing-content.privacy-policy-modal-content {
width: min(96vw, 600px);
padding: 28px 18px 20px 18px;
border-radius: 8px;
max-height: 88vh;
}
#privacyPolicyModal .modal-close-btn {
top: 8px;
right: 8px;
width: 32px;
height: 32px;
font-size: 1.1em;
}
.privacy-policy-content-inner {
font-size: 0.72em;
}
}
html.theme-light #privacyPolicyModal .pricing-content.privacy-policy-modal-content {
background: #f8f8f8;
border: 2px solid #fac929;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
color: #1b1b1b;
}
html.theme-light #privacyPolicyModal .privacy-policy-content-inner {
color: #333333;
}
html.theme-light #privacyPolicyModal .privacy-policy-content-inner p,
html.theme-light #privacyPolicyModal .privacy-policy-content-inner li {
color: #4a4a4a;
}
html.theme-light #privacyPolicyModal .privacy-policy-content-inner .policy-intro,
html.theme-light #privacyPolicyModal .privacy-policy-content-inner .emphasis-box,
html.theme-light #privacyPolicyModal .privacy-policy-content-inner .contact-info {
background: rgba(250, 201, 41, 0.16);
border-left-color: #fac929;
}
html.theme-light #privacyPolicyModal .modal-close-btn {
background: transparent;
border: 2px solid #fac929;
color: #fac929;
}
html.theme-light #privacyPolicyModal .modal-close-btn:hover,
html.theme-light #privacyPolicyModal .modal-close-btn:focus {
background: #fac929;
color: #f8f8f8;
}
/* =============================================
Legal Disclaimer Modal Styles (same as Privacy Policy)
============================================= */
/* Legal Disclaimer Modal - Base styling */
#legalDisclaimerModal.pricing-modal {
display: none;
position: fixed;
inset: 0;
padding: 24px;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.88);
z-index: 20000;
overflow-y: auto;
}
#legalDisclaimerModal.pricing-modal.modal-force-visible {
display: flex !important;
width: 100vw;
height: 100vh;
padding: 24px;
}
#legalDisclaimerModal.pricing-modal.modal-open {
display: flex;
}
#legalDisclaimerModal .pricing-content.legal-disclaimer-modal-content {
position: relative;
width: clamp(320px, 78vw, 980px);
max-height: 88vh;
overflow-y: auto;
padding: 48px 36px 36px 36px;
background: #050505;
border: 2px solid #D4A574;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(212, 165, 116, 0.22);
border-radius: 12px;
color: #f3f3f3;
}
#legalDisclaimerModal .pricing-content.modal-content-force-size {
display: block !important;
min-width: clamp(320px, 80vw, 600px) !important;
min-height: clamp(260px, 60vh, 520px) !important;
}
#legalDisclaimerModal .modal-close-btn {
position: absolute;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
background: transparent;
border: 2px solid #D4A574;
color: #D4A574;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
line-height: 1;
}
#legalDisclaimerModal .modal-close-btn:hover,
#legalDisclaimerModal .modal-close-btn:focus {
background: #D4A574;
color: #050505;
box-shadow: 0 0 14px rgba(212, 165, 116, 0.45);
}
.legal-disclaimer-content-inner {
font-size: 0.85em;
line-height: 1.7;
color: #f0f0f0;
}
.legal-disclaimer-content-inner h2 {
font-size: 1.9em;
color: #D4A574;
text-align: center;
margin-bottom: 16px;
text-shadow: 0 0 6px rgba(212, 165, 116, 0.35);
}
.legal-disclaimer-content-inner h3,
.legal-disclaimer-content-inner h4,
.legal-disclaimer-content-inner strong,
.legal-disclaimer-content-inner li strong {
color: #D4A574;
}
.legal-disclaimer-content-inner h3 {
font-size: 1.25em;
margin-top: 26px;
margin-bottom: 12px;
}
.legal-disclaimer-content-inner h4 {
font-size: 1.05em;
margin-top: 18px;
margin-bottom: 8px;
font-weight: 600;
}
.legal-disclaimer-content-inner p {
font-size: 1em;
color: #d8d8d8;
margin-bottom: 14px;
line-height: 1.65;
}
.legal-disclaimer-content-inner ul,
.legal-disclaimer-content-inner ol {
margin-left: 22px;
margin-bottom: 18px;
}
.legal-disclaimer-content-inner li {
font-size: 0.96em;
color: #d0d0d0;
margin-bottom: 9px;
line-height: 1.6;
}
.legal-disclaimer-content-inner .effective-date {
text-align: center;
font-size: 0.95em;
color: #D4A574;
margin-bottom: 24px;
font-style: italic;
}
.legal-disclaimer-content-inner .policy-intro,
.legal-disclaimer-content-inner .emphasis-box,
.legal-disclaimer-content-inner .contact-info {
padding: 16px;
border-radius: 6px;
border-left: 3px solid #D4A574;
background: rgba(212, 165, 116, 0.12);
margin: 20px 0;
}
.legal-disclaimer-content-inner .emphasis-box strong,
.legal-disclaimer-content-inner .final-statement {
color: #D4A574;
}
.legal-disclaimer-content-inner .policy-section {
margin-bottom: 32px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(212, 165, 116, 0.18);
}
.legal-disclaimer-content-inner .policy-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.legal-disclaimer-content-inner .final-statement {
text-align: center;
font-style: italic;
margin-top: 32px;
font-size: 1.05em;
}
@media (max-width: 768px), (display-mode: standalone) {
#legalDisclaimerModal.pricing-modal {
padding: 16px;
}
/* Only apply flex display when modal is open */
#legalDisclaimerModal.pricing-modal.modal-open {
display: flex !important;
align-items: center;
justify-content: center;
}
#legalDisclaimerModal .pricing-content.legal-disclaimer-modal-content {
width: min(95vw, 600px);
padding: 32px 22px 24px 22px;
border-radius: 10px;
max-height: 90vh;
margin: auto;
}
#legalDisclaimerModal .modal-close-btn {
top: 12px;
right: 12px;
width: 36px;
height: 36px;
font-size: 1.2em;
}
.legal-disclaimer-content-inner {
font-size: 0.78em;
}
}
@media (max-width: 768px) and (orientation: landscape) and (display-mode: browser) {
#legalDisclaimerModal.pricing-modal {
padding: 12px;
}
#legalDisclaimerModal.pricing-modal.modal-open {
display: flex !important;
align-items: flex-start;
padding-top: 24px;
}
#legalDisclaimerModal .pricing-content.legal-disclaimer-modal-content {
width: min(96vw, 600px);
padding: 28px 18px 20px 18px;
border-radius: 8px;
max-height: 88vh;
}
#legalDisclaimerModal .modal-close-btn {
top: 8px;
right: 8px;
width: 32px;
height: 32px;
font-size: 1.1em;
}
.legal-disclaimer-content-inner {
font-size: 0.72em;
}
}
html.theme-light #legalDisclaimerModal .pricing-content.legal-disclaimer-modal-content {
background: #f8f8f8;
border: 2px solid #fac929;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
color: #1b1b1b;
}
html.theme-light #legalDisclaimerModal .legal-disclaimer-content-inner {
color: #333333;
}
html.theme-light #legalDisclaimerModal .legal-disclaimer-content-inner p,
html.theme-light #legalDisclaimerModal .legal-disclaimer-content-inner li {
color: #4a4a4a;
}
html.theme-light #legalDisclaimerModal .legal-disclaimer-content-inner .policy-intro,
html.theme-light #legalDisclaimerModal .legal-disclaimer-content-inner .emphasis-box,
html.theme-light #legalDisclaimerModal .legal-disclaimer-content-inner .contact-info {
background: rgba(250, 201, 41, 0.16);
border-left-color: #fac929;
}
html.theme-light #legalDisclaimerModal .modal-close-btn {
background: transparent;
border: 2px solid #fac929;
color: #fac929;
}
html.theme-light #legalDisclaimerModal .modal-close-btn:hover,
html.theme-light #legalDisclaimerModal .modal-close-btn:focus {
background: #fac929;
color: #f8f8f8;
}
/* =============================================
Terms of Service Modal Styles (same as Privacy Policy and Legal Disclaimer)
============================================= */
/* Terms of Service Modal - Base styling */
#termsServiceModal.pricing-modal {
display: none;
position: fixed;
inset: 0;
padding: 24px;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.88);
z-index: 20000;
overflow-y: auto;
}
#termsServiceModal.pricing-modal.modal-force-visible {
display: flex !important;
width: 100vw;
height: 100vh;
padding: 24px;
}
#termsServiceModal.pricing-modal.modal-open {
display: flex;
}
#termsServiceModal .pricing-content.terms-service-modal-content {
position: relative;
width: clamp(320px, 78vw, 980px);
max-height: 88vh;
overflow-y: auto;
padding: 48px 36px 36px 36px;
background: #050505;
border: 2px solid #D4A574;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(212, 165, 116, 0.22);
border-radius: 12px;
color: #f3f3f3;
}
#termsServiceModal .pricing-content.modal-content-force-size {
display: block !important;
min-width: clamp(320px, 80vw, 600px) !important;
min-height: clamp(260px, 60vh, 520px) !important;
}
#termsServiceModal .modal-close-btn {
position: absolute;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
background: transparent;
border: 2px solid #D4A574;
color: #D4A574;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
line-height: 1;
}
#termsServiceModal .modal-close-btn:hover,
#termsServiceModal .modal-close-btn:focus {
background: #D4A574;
color: #050505;
box-shadow: 0 0 14px rgba(212, 165, 116, 0.45);
}
.terms-service-content-inner {
font-size: 0.85em;
line-height: 1.7;
color: #f0f0f0;
}
.terms-service-content-inner h2 {
font-size: 1.9em;
color: #D4A574;
text-align: center;
margin-bottom: 16px;
text-shadow: 0 0 6px rgba(212, 165, 116, 0.35);
}
.terms-service-content-inner h3,
.terms-service-content-inner h4,
.terms-service-content-inner strong,
.terms-service-content-inner li strong {
color: #D4A574;
}
.terms-service-content-inner h3 {
font-size: 1.25em;
margin-top: 26px;
margin-bottom: 12px;
}
.terms-service-content-inner h4 {
font-size: 1.05em;
margin-top: 18px;
margin-bottom: 8px;
font-weight: 600;
}
.terms-service-content-inner p {
font-size: 1em;
color: #d8d8d8;
margin-bottom: 14px;
line-height: 1.65;
}
.terms-service-content-inner ul,
.terms-service-content-inner ol {
margin-left: 22px;
margin-bottom: 18px;
}
.terms-service-content-inner li {
font-size: 0.96em;
color: #d0d0d0;
margin-bottom: 9px;
line-height: 1.6;
}
.terms-service-content-inner .effective-date {
text-align: center;
font-size: 0.95em;
color: #D4A574;
margin-bottom: 24px;
font-style: italic;
}
.terms-service-content-inner .policy-intro,
.terms-service-content-inner .emphasis-box,
.terms-service-content-inner .contact-info {
padding: 16px;
border-radius: 6px;
border-left: 3px solid #D4A574;
background: rgba(212, 165, 116, 0.12);
margin: 20px 0;
}
.terms-service-content-inner .emphasis-box strong,
.terms-service-content-inner .final-statement {
color: #D4A574;
}
.terms-service-content-inner .policy-section {
margin-bottom: 32px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(212, 165, 116, 0.18);
}
.terms-service-content-inner .policy-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.terms-service-content-inner .final-statement {
text-align: center;
font-style: italic;
margin-top: 32px;
font-size: 1.05em;
}
@media (max-width: 768px), (display-mode: standalone) {
#termsServiceModal.pricing-modal {
padding: 16px;
}
/* Only apply flex display when modal is open */
#termsServiceModal.pricing-modal.modal-open {
display: flex !important;
align-items: center;
justify-content: center;
}
#termsServiceModal .pricing-content.terms-service-modal-content {
width: min(95vw, 600px);
padding: 32px 22px 24px 22px;
border-radius: 10px;
max-height: 90vh;
margin: auto;
}
#termsServiceModal .modal-close-btn {
top: 12px;
right: 12px;
width: 36px;
height: 36px;
font-size: 1.2em;
}
.terms-service-content-inner {
font-size: 0.78em;
}
}
@media (max-width: 768px) and (orientation: landscape) and (display-mode: browser) {
#termsServiceModal.pricing-modal {
padding: 12px;
}
#termsServiceModal.pricing-modal.modal-open {
display: flex !important;
align-items: flex-start;
padding-top: 24px;
}
#termsServiceModal .pricing-content.terms-service-modal-content {
width: min(96vw, 600px);
padding: 28px 18px 20px 18px;
border-radius: 8px;
max-height: 88vh;
}
#termsServiceModal .modal-close-btn {
top: 8px;
right: 8px;
width: 32px;
height: 32px;
font-size: 1.1em;
}
.terms-service-content-inner {
font-size: 0.72em;
}
}
html.theme-light #termsServiceModal .pricing-content.terms-service-modal-content {
background: #f8f8f8;
border: 2px solid #fac929;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
color: #1b1b1b;
}
html.theme-light #termsServiceModal .terms-service-content-inner {
color: #333333;
}
html.theme-light #termsServiceModal .terms-service-content-inner p,
html.theme-light #termsServiceModal .terms-service-content-inner li {
color: #4a4a4a;
}
html.theme-light #termsServiceModal .terms-service-content-inner .policy-intro,
html.theme-light #termsServiceModal .terms-service-content-inner .emphasis-box,
html.theme-light #termsServiceModal .terms-service-content-inner .contact-info {
background: rgba(250, 201, 41, 0.16);
border-left-color: #fac929;
}
html.theme-light #termsServiceModal .modal-close-btn {
background: transparent;
border: 2px solid #fac929;
color: #fac929;
}
html.theme-light #termsServiceModal .modal-close-btn:hover,
html.theme-light #termsServiceModal .modal-close-btn:focus {
background: #fac929;
color: #f8f8f8;
}
/* =============================================
TECH PILLARS SECTION - Interactive Cards & Swipe Carousel
============================================= */
/* Section Container */
.tech-pillars-section {
width: 100%;
max-width: 1400px;
margin: 60px auto 80px auto;
padding: 0 20px;
position: relative;
}
/* Header */
.tech-pillars-header {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.pillars-title {
font-size: 2.8em;
color: #D4A574;
text-shadow: 0 0 20px rgba(212, 165, 116, 0.6);
letter-spacing: 8px;
margin-bottom: 15px;
font-weight: 700;
text-transform: uppercase;
position: relative;
display: inline-block;
}
.pillars-title::before,
.pillars-title::after {
content: '◈';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #00d9ff;
font-size: 0.6em;
animation: pillarTitlePulse 3s ease-in-out infinite;
}
.pillars-title::before {
left: -40px;
}
.pillars-title::after {
right: -40px;
}
@keyframes pillarTitlePulse {
0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}
.pillars-subtitle {
font-size: 1.1em;
color: #00d9ff;
letter-spacing: 3px;
text-transform: uppercase;
opacity: 0.9;
font-weight: 400;
text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}
/* ==================== DESKTOP CARDS ==================== */
.tech-pillars-desktop {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 350px));
gap: 30px;
perspective: 1000px;
justify-content: center;
}
.tech-pillars-mobile {
display: none;
}
/* Individual Card */
.tech-pillar-card {
position: relative;
height: 420px;
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-style: preserve-3d;
cursor: pointer;
}
.tech-pillar-card.flipped {
transform: rotateY(180deg);
}
/* Card Front */
.pillar-card-front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: linear-gradient(145deg, rgba(0, 0, 0, 0.95), rgba(212, 165, 116, 0.05));
border: 2px solid #D4A574;
border-radius: 20px;
padding: 40px 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.4s ease;
box-shadow:
0 0 30px rgba(212, 165, 116, 0.3),
inset 0 0 30px rgba(212, 165, 116, 0.05);
overflow: hidden;
}
.pillar-card-front::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #D4A574, #00d9ff, #D4A574);
border-radius: 20px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
animation: borderRotate 3s linear infinite;
}
@keyframes borderRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.tech-pillar-card:hover .pillar-card-front::before {
opacity: 0.4;
}
.tech-pillar-card:hover .pillar-card-front {
border-color: #00d9ff;
box-shadow:
0 0 40px rgba(0, 217, 255, 0.5),
0 0 60px rgba(212, 165, 116, 0.3),
inset 0 0 40px rgba(0, 217, 255, 0.1);
transform: translateY(-10px) scale(1.02);
}
.pillar-icon {
font-size: 4em;
margin-bottom: 25px;
color: #D4A574;
text-shadow: 0 0 30px rgba(212, 165, 116, 0.8);
animation: iconFloat 3s ease-in-out infinite;
transition: all 0.4s ease;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
.tech-pillar-card:hover .pillar-icon {
color: #00d9ff;
text-shadow: 0 0 40px rgba(0, 217, 255, 1);
transform: translateY(-20px) scale(1.1) rotate(360deg);
}
.pillar-title {
font-size: 1.8em;
color: #FFFFFF;
letter-spacing: 3px;
margin-bottom: 15px;
font-weight: 700;
text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
transition: all 0.4s ease;
}
.tech-pillar-card:hover .pillar-title {
color: #00d9ff;
text-shadow: 0 0 20px rgba(0, 217, 255, 0.8);
}
.pillar-tagline {
font-size: 1em;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 2px;
margin-bottom: 30px;
font-style: italic;
transition: all 0.4s ease;
}
.tech-pillar-card:hover .pillar-tagline {
color: #00d9ff;
text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}
.pillar-expand-hint {
font-size: 0.9em;
color: #D4A574;
letter-spacing: 2px;
padding: 12px 24px;
border: 2px solid #D4A574;
border-radius: 30px;
background: rgba(212, 165, 116, 0.1);
transition: all 0.4s ease;
text-transform: uppercase;
font-weight: 600;
}
.tech-pillar-card:hover .pillar-expand-hint {
background: #00d9ff;
border-color: #00d9ff;
color: #000;
box-shadow: 0 0 20px rgba(0, 217, 255, 0.8);
transform: scale(1.05);
}
/* Card Back */
.pillar-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: linear-gradient(145deg, rgba(0, 0, 0, 0.98), rgba(0, 217, 255, 0.08));
border: 2px solid #00d9ff;
border-radius: 20px;
padding: 30px;
transform: rotateY(180deg);
overflow-y: auto;
box-shadow:
0 0 40px rgba(0, 217, 255, 0.4),
inset 0 0 30px rgba(0, 217, 255, 0.1);
}
.pillar-close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
background: rgba(0, 0, 0, 0.8);
border: 2px solid #00d9ff;
border-radius: 50%;
color: #00d9ff;
font-size: 1.4em;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.pillar-close-btn:hover {
background: #00d9ff;
color: #000;
box-shadow: 0 0 20px rgba(0, 217, 255, 0.8);
transform: rotate(90deg) scale(1.1);
}
.pillar-content-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.pillar-content-title {
color: #00d9ff;
font-size: 1.6em;
letter-spacing: 3px;
margin-bottom: 20px;
text-align: center;
text-shadow: 0 0 15px rgba(0, 217, 255, 0.6);
font-weight: 700;
padding-bottom: 15px;
border-bottom: 2px solid rgba(0, 217, 255, 0.3);
}
.pillar-content-text {
flex: 1;
overflow-y: auto;
padding-right: 10px;
}
.pillar-content-text p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95em;
line-height: 1.7;
margin-bottom: 15px;
text-align: left;
}
.pillar-content-text p:first-child {
color: #D4A574;
}
/* ==================== MOBILE CAROUSEL ==================== */
@media (max-width: 768px) {
.tech-pillars-desktop {
display: none;
}
.tech-pillars-mobile {
display: block;
width: 100%;
position: relative;
padding: 20px 0;
}
.mobile-pillars-instructions {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
animation: instructionsPulse 2s ease-in-out infinite;
}
@keyframes instructionsPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.swipe-arrow {
font-size: 2em;
color: #00d9ff;
text-shadow: 0 0 15px rgba(0, 217, 255, 0.8);
animation: arrowBounce 1.5s ease-in-out infinite;
}
.swipe-arrow.left {
animation-delay: 0s;
}
.swipe-arrow.right {
animation-delay: 0.75s;
}
@keyframes arrowBounce {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-8px); }
}
.swipe-arrow.right {
animation-name: arrowBounceRight;
}
@keyframes arrowBounceRight {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(8px); }
}
.swipe-text {
font-size: 1em;
color: #D4A574;
letter-spacing: 3px;
font-weight: 700;
text-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
}
.mobile-pillars-carousel {
position: relative;
width: 100%;
overflow: hidden;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
.mobile-pillar-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 450px;
background: linear-gradient(145deg, rgba(0, 0, 0, 0.95), rgba(0, 217, 255, 0.05));
border: 2px solid #00d9ff;
border-radius: 20px;
padding: 35px 25px;
opacity: 0;
transform: translateX(100%);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow:
0 0 30px rgba(0, 217, 255, 0.3),
inset 0 0 30px rgba(0, 217, 255, 0.05);
pointer-events: none;
}
.mobile-pillar-slide.active {
position: relative;
opacity: 1;
transform: translateX(0);
pointer-events: all;
z-index: 2;
}
.mobile-pillar-slide.exit-left {
opacity: 0;
transform: translateX(-100%) scale(0.9);
}
.mobile-pillar-slide.enter-right {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
.mobile-pillar-slide.exit-right {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
.mobile-pillar-slide.enter-left {
opacity: 0;
transform: translateX(-100%) scale(0.9);
}
.mobile-pillar-header {
text-align: center;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(0, 217, 255, 0.3);
}
.mobile-pillar-icon {
font-size: 3.5em;
color: #00d9ff;
text-shadow: 0 0 25px rgba(0, 217, 255, 0.8);
margin-bottom: 15px;
animation: mobileIconPulse 3s ease-in-out infinite;
}
@keyframes mobileIconPulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.1); opacity: 1; }
}
.mobile-pillar-title {
font-size: 1.8em;
color: #FFFFFF;
letter-spacing: 3px;
margin-bottom: 10px;
font-weight: 700;
text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.mobile-pillar-tagline {
font-size: 0.95em;
color: #D4A574;
letter-spacing: 2px;
font-style: italic;
text-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
}
.mobile-pillar-content {
padding: 10px 0;
}
.mobile-pillar-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95em;
line-height: 1.7;
margin-bottom: 15px;
text-align: left;
}
.mobile-pillar-content p:first-child {
color: #00d9ff;
font-weight: 600;
}
/* Navigation Dots */
.mobile-pillars-dots {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
padding: 20px 0;
}
.pillar-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: 2px solid #D4A574;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
}
.pillar-dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: #00d9ff;
border-radius: 50%;
transition: all 0.4s ease;
}
.pillar-dot.active {
background: #00d9ff;
border-color: #00d9ff;
box-shadow: 0 0 15px rgba(0, 217, 255, 0.8);
transform: scale(1.3);
}
.pillar-dot.active::before {
width: 20px;
height: 20px;
opacity: 0.3;
}
.pillar-dot:not(.active):hover {
background: rgba(212, 165, 116, 0.5);
border-color: #D4A574;
box-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
transform: scale(1.1);
}
}
/* PWA-specific optimizations */
@media (display-mode: standalone) {
.tech-pillar-card {
/* Optimize card performance in PWA */
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mobile-pillar-slide {
/* Optimize mobile carousel in PWA */
will-change: transform, opacity;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
.tech-pillars-desktop {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.tech-pillar-card {
height: 400px;
}
}
/* Extra small mobile */
@media (max-width: 480px) {
.pillars-title {
font-size: 2em;
letter-spacing: 4px;
}
.pillars-title::before,
.pillars-title::after {
font-size: 0.5em;
}
.pillars-title::before {
left: -30px;
}
.pillars-title::after {
right: -30px;
}
.pillars-subtitle {
font-size: 0.9em;
letter-spacing: 2px;
}
.mobile-pillar-slide {
min-height: 420px;
padding: 30px 20px;
}
.mobile-pillar-title {
font-size: 1.5em;
letter-spacing: 2px;
}
.mobile-pillar-content p {
font-size: 0.9em;
}
}
/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
.tech-pillar-card,
.pillar-icon,
.mobile-pillar-slide,
.pillar-dot,
.swipe-arrow {
animation: none !important;
transition: none !important;
}
.tech-pillar-card.flipped {
transform: none;
}
.mobile-pillar-slide.active {
opacity: 1;
transform: none;
}
}
/* =============================================
LIGHT THEME STYLES FOR ABOUT FIRSTLOOK PAGE
============================================= */
/* Light theme primary accent color */
html.theme-light {
--about-accent: #1F75FE;
--about-accent-hover: #1557c7;
--about-accent-glow: rgba(31, 117, 254, 0.4);
--about-text-primary: #000000;
--about-text-secondary: #333333;
--about-text-muted: #666666;
--about-bg-primary: #f8f8f8;
--about-bg-secondary: #ffffff;
--about-border: #cccccc;
--about-border-accent: #1F75FE;
}
/* Light Theme: Page Background */
html.theme-light body.about-page {
background: #f8f8f8 !important;
}
html.theme-light body.about-page .terminal-container {
background: #f8f8f8 !important;
background-image: repeating-linear-gradient(
0deg,
rgba(31, 117, 254, 0.03) 0px,
rgba(31, 117, 254, 0.03) 1px,
transparent 1px,
transparent 3px
) !important;
box-shadow:
0 0 20px rgba(31, 117, 254, 0.1),
inset 0 0 20px rgba(31, 117, 254, 0.05) !important;
}
html.theme-light body.about-page .terminal-content {
background: #f8f8f8 !important;
}
/* Light Theme: Signature Section */
html.theme-light .signature-divider {
background: linear-gradient(90deg, transparent, #1F75FE, transparent);
box-shadow: 0 0 3px #1F75FE;
}
html.theme-light .signature-text {
color: #1F75FE;
text-shadow: none;
}
html.theme-light .x-logo {
filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) brightness(0.25);
}
html.theme-light .signature-link:hover .x-logo {
filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) brightness(0.15);
}
/* Light Theme: Company Info */
html.theme-light .info-text {
color: #1F75FE;
text-shadow: none;
}
html.theme-light .info-separator {
color: #1F75FE;
}
html.theme-light .info-email {
color: #1F75FE;
text-shadow: none;
}
html.theme-light .info-email:hover {
text-shadow: 0 0 5px rgba(31, 117, 254, 0.5);
border-bottom: 1px solid #1F75FE;
color: #1557c7;
}
/* Light Theme: Footer Links */
html.theme-light .footer-links a {
color: #1F75FE;
}
html.theme-light .footer-links a:hover {
text-shadow: 0 0 5px rgba(31, 117, 254, 0.5);
}
html.theme-light .footer-links span {
color: #1F75FE;
}
/* Light Theme: Contact/Signup Button (Solid Blue) */
html.theme-light .contact-btn {
background-color: #1F75FE;
border: 2px solid #1F75FE;
color: #ffffff;
box-shadow: 0 4px 14px rgba(31, 117, 254, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
html.theme-light .contact-btn:hover,
html.theme-light .contact-btn:focus {
background-color: #3A8FFF;
border-color: #3A8FFF;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(31, 117, 254, 0.4), 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(31, 117, 254, 0.2);
}
html.theme-light .contact-btn:active,
html.theme-light .contact-btn:active:focus {
background-color: #1660D8;
border-color: #1660D8;
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(31, 117, 254, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Light Theme: Navigation Buttons (Back & Pricing) - Solid Blue */
html.theme-light #back-btn,
html.theme-light #start-btn {
background-color: #1F75FE;
border: 2px solid #1F75FE;
color: #ffffff;
box-shadow: 0 4px 14px rgba(31, 117, 254, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
html.theme-light #back-btn:hover,
html.theme-light #back-btn:focus,
html.theme-light #start-btn:hover,
html.theme-light #start-btn:focus {
background-color: #3A8FFF;
border-color: #3A8FFF;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(31, 117, 254, 0.4), 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(31, 117, 254, 0.2);
}
html.theme-light #back-btn:active,
html.theme-light #back-btn:active:focus,
html.theme-light #start-btn:active,
html.theme-light #start-btn:active:focus {
background-color: #1660D8;
border-color: #1660D8;
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(31, 117, 254, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Light Theme: About Quote */
html.theme-light body.about-page .about-quote {
background: rgba(31, 117, 254, 0.08);
color: #000000;
}
html.theme-light .about-text p.main-quote,
html.theme-light .about-text div.main-quote.membership-quote {
border: 1px solid #1F75FE;
background: rgba(31, 117, 254, 0.08);
color: #000000 !important;
}
/* Light Theme: Feature List */
html.theme-light .feature-list li {
color: #1F75FE;
}
/* Light Theme: Membership Features - Gradient text */
html.theme-light .membership-features h3,
html.theme-light .membership-features .feature-list li {
background: linear-gradient(
90deg,
#1F75FE 0%,
#333333 25%,
#1F75FE 50%,
#333333 75%,
#1F75FE 100%
);
background-size: 300% 100%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Light Theme: About Titles */
html.theme-light .about-title h1 {
color: #000000;
text-shadow: none;
}
/* Light Theme: About Text */
html.theme-light .about-text p {
color: #333333;
}
/* Light Theme: Yellow headings override */
html.theme-light .yellow-title h1 {
color: #1F75FE;
text-shadow: none;
}
/* Light Theme: H3 headings */
html.theme-light h3 {
color: #1F75FE !important;
text-shadow: none;
}
/* Light Theme: Site Features Title */
html.theme-light .site-features-title h1 {
color: #000000;
}
/* =============================================
LIGHT THEME: TECH PILLARS SECTION
============================================= */
/* Light Theme: Pillars Title */
html.theme-light .pillars-title {
color: #1F75FE;
text-shadow: 0 0 15px rgba(31, 117, 254, 0.4);
}
html.theme-light .pillars-title::before,
html.theme-light .pillars-title::after {
color: #1F75FE;
}
html.theme-light .pillars-subtitle {
color: #333333;
text-shadow: none;
}
/* Light Theme: Desktop Cards */
html.theme-light .pillar-card-front {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(31, 117, 254, 0.08));
border: 2px solid #1F75FE;
box-shadow:
0 0 20px rgba(31, 117, 254, 0.2),
inset 0 0 20px rgba(31, 117, 254, 0.05);
}
html.theme-light .pillar-card-front::before {
background: linear-gradient(45deg, #1F75FE, #00d9ff, #1F75FE);
}
html.theme-light .tech-pillar-card:hover .pillar-card-front {
border-color: #1557c7;
box-shadow:
0 0 30px rgba(31, 117, 254, 0.4),
0 0 50px rgba(31, 117, 254, 0.2),
inset 0 0 30px rgba(31, 117, 254, 0.1);
}
html.theme-light .pillar-icon {
color: #1F75FE;
text-shadow: 0 0 20px rgba(31, 117, 254, 0.6);
}
html.theme-light .tech-pillar-card:hover .pillar-icon {
color: #1557c7;
text-shadow: 0 0 30px rgba(31, 117, 254, 0.8);
}
html.theme-light .pillar-title {
color: #000000;
text-shadow: none;
}
html.theme-light .tech-pillar-card:hover .pillar-title {
color: #1F75FE;
text-shadow: 0 0 15px rgba(31, 117, 254, 0.5);
}
html.theme-light .pillar-tagline {
color: #666666;
}
html.theme-light .tech-pillar-card:hover .pillar-tagline {
color: #1F75FE;
text-shadow: 0 0 8px rgba(31, 117, 254, 0.3);
}
html.theme-light .pillar-expand-hint {
color: #1F75FE;
border: 2px solid #1F75FE;
background: rgba(31, 117, 254, 0.1);
}
html.theme-light .tech-pillar-card:hover .pillar-expand-hint {
background: #1F75FE;
border-color: #1F75FE;
color: #ffffff;
box-shadow: 0 0 15px rgba(31, 117, 254, 0.6);
}
/* Light Theme: Card Back */
html.theme-light .pillar-card-back {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(31, 117, 254, 0.08));
border: 2px solid #1F75FE;
box-shadow:
0 0 30px rgba(31, 117, 254, 0.3),
inset 0 0 20px rgba(31, 117, 254, 0.05);
}
html.theme-light .pillar-close-btn {
background: rgba(255, 255, 255, 0.9);
border: 2px solid #1F75FE;
color: #1F75FE;
}
html.theme-light .pillar-close-btn:hover {
background: #1F75FE;
color: #ffffff;
box-shadow: 0 0 15px rgba(31, 117, 254, 0.6);
}
html.theme-light .pillar-content-title {
color: #1F75FE;
text-shadow: none;
border-bottom: 2px solid rgba(31, 117, 254, 0.3);
}
html.theme-light .pillar-content-text p {
color: #333333;
}
html.theme-light .pillar-content-text p:first-child {
color: #1F75FE;
}
/* =============================================
LIGHT THEME: MOBILE CAROUSEL
============================================= */
@media (max-width: 768px) {
html.theme-light .swipe-arrow {
color: #1F75FE;
text-shadow: 0 0 10px rgba(31, 117, 254, 0.5);
}
html.theme-light .swipe-text {
color: #1F75FE;
text-shadow: none;
}
html.theme-light .mobile-pillar-slide {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(31, 117, 254, 0.08));
border: 2px solid #1F75FE;
box-shadow:
0 0 25px rgba(31, 117, 254, 0.2),
inset 0 0 25px rgba(31, 117, 254, 0.05);
}
html.theme-light .mobile-pillar-header {
border-bottom: 2px solid rgba(31, 117, 254, 0.3);
}
html.theme-light .mobile-pillar-icon {
color: #1F75FE;
text-shadow: 0 0 20px rgba(31, 117, 254, 0.6);
}
html.theme-light .mobile-pillar-title {
color: #000000;
text-shadow: none;
}
html.theme-light .mobile-pillar-tagline {
color: #1F75FE;
text-shadow: none;
}
html.theme-light .mobile-pillar-content p {
color: #333333;
}
html.theme-light .mobile-pillar-content p:first-child {
color: #1F75FE;
}
html.theme-light .pillar-dot {
background: rgba(31, 117, 254, 0.2);
border: 2px solid #1F75FE;
}
html.theme-light .pillar-dot.active {
background: #1F75FE;
border-color: #1F75FE;
box-shadow: 0 0 12px rgba(31, 117, 254, 0.6);
}
html.theme-light .pillar-dot:not(.active):hover {
background: rgba(31, 117, 254, 0.4);
border-color: #1F75FE;
box-shadow: 0 0 8px rgba(31, 117, 254, 0.4);
}
}
/* =============================================
LIGHT THEME: MODALS
============================================= */
/* Light Theme: Pricing Modal styling (matches match.html) */
html.theme-light #pricingModal {
background-color: rgba(248, 248, 248, 0.9) !important;
}
html.theme-light #pricingModal .pricing-content {
background-color: #f8f8f8 !important;
color: #000000 !important;
border: 2px solid #1F75FE !important;
box-shadow: 0 0 15px #1F75FE !important;
}
html.theme-light #pricingModal .pricing-content h2 {
color: #1F75FE !important;
text-shadow: none !important;
}
html.theme-light #pricingModal .pricing-content li {
color: #000000 !important;
}
/* Light theme: Keep the ▸ arrow symbols cyan */
html.theme-light #pricingModal .pricing-content li::first-letter {
color: #1F75FE !important;
text-shadow: none !important;
}
/* Light theme: Make h3 headers inside li elements cyan */
html.theme-light #pricingModal .pricing-content li h3 {
color: #1F75FE !important;
text-shadow: none !important;
}
html.theme-light #pricingModal .plan-divider {
background: linear-gradient(90deg, transparent, #1F75FE 50%, transparent) !important;
}
/* Light theme: X close button inverted (outline style by default) */
html.theme-light #pricingModal .modal-close-btn {
background-color: #f8f8f8 !important;
color: #000000 !important;
border: 2px solid #000000 !important;
box-shadow: none !important;
transition: all 0.3s ease !important;
}
html.theme-light #pricingModal .modal-close-btn:hover,
html.theme-light #pricingModal .modal-close-btn:focus {
background-color: #000000 !important;
color: #f8f8f8 !important;
border-color: #000000 !important;
box-shadow: 0 0 20px #000000 !important;
}
/* =============================================
LIGHT THEME: FULL SCREEN SYSTEM MATRIX OVERLAY
(Matches match.html membership pricing popup)
============================================= */
html.theme-light .membership-matrix {
background:
radial-gradient(circle at center, rgba(248, 248, 248, 0.98) 0%, rgba(240, 240, 240, 0.99) 100%),
repeating-linear-gradient(
0deg,
rgba(31, 117, 254, 0.03) 0px,
rgba(31, 117, 254, 0.03) 1px,
transparent 1px,
transparent 4px
);
background-image:
repeating-linear-gradient(
0deg,
rgba(31, 117, 254, 0.03) 0px,
rgba(31, 117, 254, 0.03) 1px,
transparent 1px,
transparent 20px
),
repeating-linear-gradient(
90deg,
rgba(31, 117, 254, 0.02) 0px,
rgba(31, 117, 254, 0.02) 1px,
transparent 1px,
transparent 20px
);
}
html.theme-light .membership-matrix::before {
background: linear-gradient(90deg, transparent, #1F75FE 30%, #1F75FE 70%, transparent);
}
html.theme-light .membership-matrix::after {
background: linear-gradient(90deg, transparent, #1F75FE 30%, #1F75FE 70%, transparent);
}
/* Light theme matrix container */
html.theme-light .matrix-container {
background:
linear-gradient(145deg, rgba(248, 248, 248, 0.9), rgba(31, 117, 254, 0.03)),
radial-gradient(circle at 70% 30%, rgba(31, 117, 254, 0.05) 0%, transparent 50%);
border: 2px solid #1F75FE;
box-shadow:
0 0 40px rgba(31, 117, 254, 0.4),
inset 0 0 40px rgba(31, 117, 254, 0.05),
0 0 100px rgba(31, 117, 254, 0.2);
}
/* Light theme matrix header */
html.theme-light .matrix-header {
background:
linear-gradient(135deg, rgba(31, 117, 254, 0.15), rgba(31, 117, 254, 0.08)),
linear-gradient(0deg, rgba(248, 248, 248, 0.3), transparent);
border-bottom: 3px solid #1F75FE;
}
html.theme-light .matrix-header::before {
background: linear-gradient(90deg, transparent, #1F75FE, transparent);
box-shadow: 0 0 10px #1F75FE;
}
/* Light theme matrix corner */
html.theme-light .matrix-corner {
background:
linear-gradient(135deg, rgba(248, 248, 248, 0.9), rgba(31, 117, 254, 0.05)),
radial-gradient(circle at center, rgba(31, 117, 254, 0.1) 0%, transparent 70%);
border-right: 2px solid #1F75FE;
}
html.theme-light .matrix-corner::before {
background: #00ff00;
box-shadow: 0 0 10px #00ff00;
}
html.theme-light .matrix-label {
color: #1F75FE;
text-shadow: 0 0 15px #1F75FE;
}
/* Light theme close button */
html.theme-light .matrix-close-btn {
background: rgba(248, 248, 248, 0.8);
border: 2px solid #1F75FE;
color: #1F75FE;
box-shadow: 0 0 15px rgba(31, 117, 254, 0.4);
}
html.theme-light .matrix-close-btn:hover,
html.theme-light .matrix-close-btn:focus {
background: #1F75FE;
color: #f8f8f8;
box-shadow: 0 0 25px rgba(31, 117, 254, 0.6);
}
/* Light theme plan headers */
html.theme-light .plan-header {
background: linear-gradient(135deg, rgba(248, 248, 248, 0.7), rgba(31, 117, 254, 0.02));
border-right: 1px solid rgba(31, 117, 254, 0.4);
}
html.theme-light .plan-header:hover {
background:
linear-gradient(135deg, rgba(31, 117, 254, 0.1), rgba(31, 117, 254, 0.05)),
radial-gradient(circle at center, rgba(31, 117, 254, 0.15) 0%, transparent 70%);
box-shadow: inset 0 0 30px rgba(31, 117, 254, 0.2);
}
html.theme-light .plan-tier {
color: rgba(0, 0, 0, 0.5);
}
html.theme-light .plan-title {
color: #000000;
text-shadow: 0 0 12px #1F75FE;
}
html.theme-light .plan-subtitle {
color: #1F75FE;
}
html.theme-light .plan-price {
color: #1F75FE;
background:
linear-gradient(135deg, rgba(31, 117, 254, 0.15), rgba(31, 117, 254, 0.08));
border: 1px solid rgba(31, 117, 254, 0.5);
text-shadow: 0 0 8px #1F75FE;
}
/* Light theme: Keep dollar signs green */
html.theme-light .basic-plan .plan-price::first-letter,
html.theme-light .premium-plan .plan-price::first-letter,
html.theme-light .max-plan .plan-price::first-letter {
color: #00ff00 !important;
}
/* Light theme matrix body */
html.theme-light .matrix-body {
background:
linear-gradient(180deg, rgba(248, 248, 248, 0.95) 0%, rgba(248, 248, 248, 0.9) 100%),
radial-gradient(ellipse at top left, rgba(31, 117, 254, 0.03) 0%, transparent 50%);
}
html.theme-light .feature-row {
border-bottom: 1px solid rgba(31, 117, 254, 0.2);
}
html.theme-light .feature-row:hover {
background:
linear-gradient(90deg, rgba(31, 117, 254, 0.05), rgba(31, 117, 254, 0.08), rgba(31, 117, 254, 0.05));
box-shadow:
inset 0 0 20px rgba(31, 117, 254, 0.1),
0 0 20px rgba(31, 117, 254, 0.1);
}
html.theme-light .feature-row:hover::before {
background: linear-gradient(180deg, transparent, #1F75FE, transparent);
}
/* Light theme feature names */
html.theme-light .feature-name {
background:
linear-gradient(135deg, rgba(248, 248, 248, 0.9), rgba(31, 117, 254, 0.03));
border-right: 2px solid #1F75FE;
}
html.theme-light .feature-name::before {
background: linear-gradient(180deg, transparent, #1F75FE, transparent);
}
html.theme-light .feature-icon {
color: #1F75FE;
}
html.theme-light .feature-label {
color: #000000;
}
html.theme-light .feature-code {
color: rgba(0, 0, 0, 0.4);
}
/* Light theme feature values */
html.theme-light .feature-value {
background: rgba(248, 248, 248, 0.6);
border-right: 1px solid rgba(31, 117, 254, 0.2);
}
html.theme-light .feature-value:hover {
background:
linear-gradient(135deg, rgba(31, 117, 254, 0.08), rgba(31, 117, 254, 0.04));
}
html.theme-light .value-highlight {
color: #1F75FE;
text-shadow: 0 0 12px #1F75FE;
}
html.theme-light .value-unit {
color: rgba(0, 0, 0, 0.7);
}
/* Light theme progress bars */
html.theme-light .value-bar {
background: rgba(0, 0, 0, 0.1);
}
html.theme-light .bar-fill {
background: linear-gradient(90deg, #1F75FE, #1F75FE);
box-shadow: 0 0 6px rgba(31, 117, 254, 0.6);
}
html.theme-light .bar-fill.infinite {
background: linear-gradient(90deg, #1F75FE, #1F75FE, #1F75FE);
}
html.theme-light .bar-fill.disabled {
background: rgba(0, 0, 0, 0.2);
}
/* Light theme status indicators */
html.theme-light .status-locked {
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.5);
}
html.theme-light .status-active {
background: rgba(31, 117, 254, 0.2);
color: #000000;
text-shadow: none;
font-weight: normal;
}
html.theme-light .value-radius {
color: rgba(0, 0, 0, 0.6);
background: rgba(31, 117, 254, 0.1);
border: 1px solid rgba(31, 117, 254, 0.3);
}
html.theme-light .value-disabled {
color: rgba(0, 0, 0, 0.3);
}
html.theme-light .value-active {
color: #00ff00;
text-shadow: 0 0 15px #00ff00;
}
/* Light theme plan-specific styling */
html.theme-light .free-plan {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
}
html.theme-light .basic-plan {
background: linear-gradient(135deg, rgba(31, 117, 254, 0.06), rgba(31, 117, 254, 0.02));
}
html.theme-light .premium-plan {
background: linear-gradient(135deg, rgba(31, 117, 254, 0.10), rgba(31, 117, 254, 0.04));
}
html.theme-light .max-plan {
background: linear-gradient(135deg, rgba(31, 117, 254, 0.15), rgba(31, 117, 254, 0.06));
}
/* Light theme matrix footer */
html.theme-light .matrix-footer {
background:
linear-gradient(135deg, rgba(248, 248, 248, 0.95), rgba(31, 117, 254, 0.05)),
linear-gradient(180deg, rgba(31, 117, 254, 0.1), transparent);
border-top: 3px solid #1F75FE;
}
html.theme-light .prompt-symbol {
color: #00ff00 !important;
}
html.theme-light .prompt-text {
color: #000000;
}
html.theme-light .cursor-blink {
color: #1F75FE;
}
html.theme-light .info-item {
color: rgba(0, 0, 0, 0.6);
}
/* Light theme glow animation - use green like match.html */
html.theme-light .value-active {
animation: glowGreenLight 2s ease-in-out infinite alternate;
}
@keyframes glowGreenLight {
from { text-shadow: 0 0 10px #00ff00; }
to { text-shadow: 0 0 25px #00ff00, 0 0 35px #00ff00; }
}
/* =============================================
LIGHT THEME: IMAGE LOADING STATES
============================================= */
html.theme-light .about-image.image-loading {
background: #dddddd !important;
background-image: repeating-linear-gradient(45deg, #dddddd, #dddddd 8px, #eeeeee 8px, #eeeeee 16px) !important;
}
html.theme-light .about-image.image-error {
background: #cccccc !important;
background-image: repeating-linear-gradient(45deg, #cccccc, #cccccc 10px, #eeeeee 10px, #eeeeee 20px) !important;
border: 2px dashed #999999 !important;
}
/* =============================================
WORLD-CLASS DOS BUTTON (Solid) - Light Theme
============================================= */
html.theme-light .dos-button {
background-color: #1F75FE;
border: 2px solid #1F75FE;
color: #ffffff;
padding: 14px 28px;
min-width: 140px;
font-size: 0.95em;
font-weight: 600;
letter-spacing: 1.5px;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(31, 117, 254, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
-webkit-font-smoothing: antialiased;
}
html.theme-light .dos-button:hover,
html.theme-light .dos-button:focus {
background-color: #3A8FFF;
border-color: #3A8FFF;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(31, 117, 254, 0.4), 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(31, 117, 254, 0.2);
outline: none;
}
html.theme-light .dos-button:active {
background-color: #1660D8;
border-color: #1660D8;
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(31, 117, 254, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* =============================================
CONTACT BUTTON DESKTOP OVERRIDES
============================================= */
.contact-button-wrapper {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
box-sizing: border-box;
}
.contact-btn {
width: 100%;
max-width: 100%;
min-width: unset;
padding: 14px 30px;
border-radius: 12px;
}
@media (max-width: 768px) {
.contact-button-wrapper {
padding: 0 24px;
}
.contact-btn {
padding: 12px 24px;
}
}
@media (max-width: 480px) {
.contact-button-wrapper {
padding: 0 20px;
}
.contact-btn {
padding: 12px 20px;
}
}
/* =============================================
CONTACT BUTTON SPACING (ABOVE SIGNATURE)
============================================= */
.contact-button-wrapper {
margin-top: 90px;
margin-bottom: 70px;
}
.signature-divider {
margin-top: 0;
}
@media (max-width: 768px) {
.contact-button-wrapper {
margin-top: 60px;
margin-bottom: 55px;
}
}
@media (max-width: 480px) {
.contact-button-wrapper {
margin-top: 50px;
margin-bottom: 45px;
}
}