/*
/***********************Under guidance of Asst. Prof. Mahendra Gattu (NIT, Raurkel, Oddisa*******************************************-->
*/
:root {
/* Colors */
--color-background: rgba(252, 252, 249, 1);
--color-surface: rgba(255, 255, 253, 1);
--color-text: rgba(19, 52, 59, 1);
--color-text-secondary: rgba(98, 108, 113, 1);
--color-primary: rgba(33, 128, 141, 1);
--color-primary-hover: rgba(29, 116, 128, 1);
--color-primary-active: rgba(26, 104, 115, 1);
--color-secondary: rgba(94, 82, 64, 0.12);
--color-secondary-hover: rgba(94, 82, 64, 0.2);
--color-secondary-active: rgba(94, 82, 64, 0.25);
--color-border: rgba(94, 82, 64, 0.2);
--color-btn-primary-text: rgba(252, 252, 249, 1);
--color-card-border: rgba(94, 82, 64, 0.12);
--color-card-border-inner: rgba(94, 82, 64, 0.12);
--color-error: rgba(192, 21, 47, 1);
--color-success: rgba(33, 128, 141, 1);
--color-warning: rgba(168, 75, 47, 1);
--color-info: rgba(98, 108, 113, 1);
--color-focus-ring: rgba(33, 128, 141, 0.4);
--color-select-caret: rgba(19, 52, 59, 0.8);
/* Common style patterns */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for opacity control */
--color-success-rgb: 33, 128, 141;
--color-error-rgb: 192, 21, 47;
--color-warning-rgb: 168, 75, 47;
--color-info-rgb: 98, 108, 113;
/* Typography */
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, monospace;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 24px;
--font-size-4xl: 30px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 550;
--font-weight-bold: 600;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--letter-spacing-tight: -0.01em;
/* Spacing */
--space-0: 0;
--space-1: 1px;
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
/* Border Radius */
--radius-sm: 6px;
--radius-base: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
0 2px 4px -1px rgba(0, 0, 0, 0.02);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
0 4px 6px -2px rgba(0, 0, 0, 0.02);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
/* Animation */
--duration-fast: 150ms;
--duration-normal: 250ms;
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
/* Layout */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
}
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
--color-background: rgba(31, 33, 33, 1);
--color-surface: rgba(38, 40, 40, 1);
--color-text: rgba(245, 245, 245, 1);
--color-text-secondary: rgba(167, 169, 169, 0.7);
--color-primary: rgba(50, 184, 198, 1);
--color-primary-hover: rgba(45, 166, 178, 1);
--color-primary-active: rgba(41, 150, 161, 1);
--color-secondary: rgba(119, 124, 124, 0.15);
--color-secondary-hover: rgba(119, 124, 124, 0.25);
--color-secondary-active: rgba(119, 124, 124, 0.3);
--color-border: rgba(119, 124, 124, 0.3);
--color-error: rgba(255, 84, 89, 1);
--color-success: rgba(50, 184, 198, 1);
--color-warning: rgba(230, 129, 97, 1);
--color-info: rgba(167, 169, 169, 1);
--color-focus-ring: rgba(50, 184, 198, 0.4);
--color-btn-primary-text: rgba(19, 52, 59, 1);
--color-card-border: rgba(119, 124, 124, 0.2);
--color-card-border-inner: rgba(119, 124, 124, 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--button-border-secondary: rgba(119, 124, 124, 0.2);
--color-border-secondary: rgba(119, 124, 124, 0.2);
--color-select-caret: rgba(245, 245, 245, 0.8);
/* Common style patterns - updated for dark mode */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for dark mode */
--color-success-rgb: 50, 184, 198;
--color-error-rgb: 255, 84, 89;
--color-warning-rgb: 230, 129, 97;
--color-info-rgb: 167, 169, 169;
}
}
/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
--color-background: rgba(31, 33, 33, 1);
--color-surface: rgba(38, 40, 40, 1);
--color-text: rgba(245, 245, 245, 1);
--color-text-secondary: rgba(167, 169, 169, 0.7);
--color-primary: rgba(50, 184, 198, 1);
--color-primary-hover: rgba(45, 166, 178, 1);
--color-primary-active: rgba(41, 150, 161, 1);
--color-secondary: rgba(119, 124, 124, 0.15);
--color-secondary-hover: rgba(119, 124, 124, 0.25);
--color-secondary-active: rgba(119, 124, 124, 0.3);
--color-border: rgba(119, 124, 124, 0.3);
--color-error: rgba(255, 84, 89, 1);
--color-success: rgba(50, 184, 198, 1);
--color-warning: rgba(230, 129, 97, 1);
--color-info: rgba(167, 169, 169, 1);
--color-focus-ring: rgba(50, 184, 198, 0.4);
--color-btn-primary-text: rgba(19, 52, 59, 1);
--color-card-border: rgba(119, 124, 124, 0.15);
--color-card-border-inner: rgba(119, 124, 124, 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--color-border-secondary: rgba(119, 124, 124, 0.2);
--color-select-caret: rgba(245, 245, 245, 0.8);
/* Common style patterns - updated for dark mode */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for dark mode */
--color-success-rgb: 50, 184, 198;
--color-error-rgb: 255, 84, 89;
--color-warning-rgb: 230, 129, 97;
--color-info-rgb: 167, 169, 169;
}
[data-color-scheme="light"] {
--color-background: rgba(252, 252, 249, 1);
--color-surface: rgba(255, 255, 253, 1);
--color-text: rgba(19, 52, 59, 1);
--color-text-secondary: rgba(98, 108, 113, 1);
--color-primary: rgba(33, 128, 141, 1);
--color-primary-hover: rgba(29, 116, 128, 1);
--color-primary-active: rgba(26, 104, 115, 1);
--color-secondary: rgba(94, 82, 64, 0.12);
--color-secondary-hover: rgba(94, 82, 64, 0.2);
--color-secondary-active: rgba(94, 82, 64, 0.25);
--color-border: rgba(94, 82, 64, 0.2);
--color-btn-primary-text: rgba(252, 252, 249, 1);
--color-card-border: rgba(94, 82, 64, 0.12);
--color-card-border-inner: rgba(94, 82, 64, 0.12);
--color-error: rgba(192, 21, 47, 1);
--color-success: rgba(33, 128, 141, 1);
--color-warning: rgba(168, 75, 47, 1);
--color-info: rgba(98, 108, 113, 1);
--color-focus-ring: rgba(33, 128, 141, 0.4);
/* RGB versions for light mode */
--color-success-rgb: 33, 128, 141;
--color-error-rgb: 192, 21, 47;
--color-warning-rgb: 168, 75, 47;
--color-info-rgb: 98, 108, 113;
}
/* Base styles */
html {
font-size: var(--font-size-base);
font-family: var(--font-family-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text);
letter-spacing: var(--letter-spacing-tight);
}
h1 {
font-size: var(--font-size-4xl);
}
h2 {
font-size: var(--font-size-3xl);
}
h3 {
font-size: var(--font-size-2xl);
}
h4 {
font-size: var(--font-size-xl);
}
h5 {
font-size: var(--font-size-lg);
}
h6 {
font-size: var(--font-size-md);
}
p {
margin: 0 0 var(--space-16) 0;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
color: var(--color-primary-hover);
}
code,
pre {
font-family: var(--font-family-mono);
font-size: calc(var(--font-size-base) * 0.95);
background-color: var(--color-secondary);
border-radius: var(--radius-sm);
}
code {
padding: var(--space-1) var(--space-4);
}
pre {
padding: var(--space-16);
margin: var(--space-16) 0;
overflow: auto;
border: 1px solid var(--color-border);
}
pre code {
background: none;
padding: 0;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-16);
border-radius: var(--radius-base);
font-size: var(--font-size-base);
font-weight: 500;
line-height: 1.5;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-standard);
border: none;
text-decoration: none;
position: relative;
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn--primary {
background: var(--color-primary);
color: var(--color-btn-primary-text);
}
.btn--primary:hover {
background: var(--color-primary-hover);
}
.btn--primary:active {
background: var(--color-primary-active);
}
.btn--secondary {
background: var(--color-secondary);
color: var(--color-text);
}
.btn--secondary:hover {
background: var(--color-secondary-hover);
}
.btn--secondary:active {
background: var(--color-secondary-active);
}
.btn--outline {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text);
}
.btn--outline:hover {
background: var(--color-secondary);
}
.btn--sm {
padding: var(--space-4) var(--space-12);
font-size: var(--font-size-sm);
border-radius: var(--radius-sm);
}
.btn--lg {
padding: var(--space-10) var(--space-20);
font-size: var(--font-size-lg);
border-radius: var(--radius-md);
}
.btn--full-width {
width: 100%;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Form elements */
.form-control {
display: block;
width: 100%;
padding: var(--space-8) var(--space-12);
font-size: var(--font-size-md);
line-height: 1.5;
color: var(--color-text);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
transition: border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
textarea.form-control {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
}
select.form-control {
padding: var(--space-8) var(--space-12);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: var(--select-caret-light);
background-repeat: no-repeat;
background-position: right var(--space-12) center;
background-size: 16px;
padding-right: var(--space-32);
}
/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
select.form-control {
background-image: var(--select-caret-dark);
}
}
/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
background-image: var(--select-caret-dark);
}
[data-color-scheme="light"] select.form-control {
background-image: var(--select-caret-light);
}
.form-control:focus {
border-color: var(--color-primary);
outline: var(--focus-outline);
}
.form-label {
display: block;
margin-bottom: var(--space-8);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.form-group {
margin-bottom: var(--space-16);
}
/* Card component */
.card {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card__body {
padding: var(--space-16);
}
.card__header,
.card__footer {
padding: var(--space-16);
border-bottom: 1px solid var(--color-card-border-inner);
}
/* Status indicators - simplified with CSS variables */
.status {
display: inline-flex;
align-items: center;
padding: var(--space-6) var(--space-12);
border-radius: var(--radius-full);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.status--success {
background-color: rgba(
var(--color-success-rgb, 33, 128, 141),
var(--status-bg-opacity)
);
color: var(--color-success);
border: 1px solid
rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}
.status--error {
background-color: rgba(
var(--color-error-rgb, 192, 21, 47),
var(--status-bg-opacity)
);
color: var(--color-error);
border: 1px solid
rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}
.status--warning {
background-color: rgba(
var(--color-warning-rgb, 168, 75, 47),
var(--status-bg-opacity)
);
color: var(--color-warning);
border: 1px solid
rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}
.status--info {
background-color: rgba(
var(--color-info-rgb, 98, 108, 113),
var(--status-bg-opacity)
);
color: var(--color-info);
border: 1px solid
rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}
/* Container layout */
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-16);
padding-left: var(--space-16);
}
@media (min-width: 640px) {
.container {
max-width: var(--container-sm);
}
}
@media (min-width: 768px) {
.container {
max-width: var(--container-md);
}
}
@media (min-width: 1024px) {
.container {
max-width: var(--container-lg);
}
}
@media (min-width: 1280px) {
.container {
max-width: var(--container-xl);
}
}
/* Utility classes */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-4 {
gap: var(--space-4);
}
.gap-8 {
gap: var(--space-8);
}
.gap-16 {
gap: var(--space-16);
}
.m-0 {
margin: 0;
}
.mt-8 {
margin-top: var(--space-8);
}
.mb-8 {
margin-bottom: var(--space-8);
}
.mx-8 {
margin-left: var(--space-8);
margin-right: var(--space-8);
}
.my-8 {
margin-top: var(--space-8);
margin-bottom: var(--space-8);
}
.p-0 {
padding: 0;
}
.py-8 {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.px-8 {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
.py-16 {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.px-16 {
padding-left: var(--space-16);
padding-right: var(--space-16);
}
.block {
display: block;
}
.hidden {
display: none;
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
:focus-visible {
outline: var(--focus-outline);
outline-offset: 2px;
}
/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
border: 1px solid var(--color-border-secondary);
}
@font-face {
font-family: 'FKGroteskNeue';
src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
format('woff2');
}
/* Monument Explorer - Advanced CSS with 3D effects, animations and interactions */
/* Custom Properties and Variables */
:root {
--monument-red: #8B4513;
--monument-white: #FFFAFA;
--monument-grey: #708090;
--ambient-light: rgba(255, 248, 220, 0.6);
--shadow-color: rgba(0, 0, 0, 0.25);
--glow-primary: rgba(33, 128, 141, 0.4);
--glow-secondary: rgba(255, 193, 133, 0.6);
--time-dawn: rgba(242, 166, 94, 0.7);
--time-noon: rgba(255, 255, 253, 0.9);
--time-dusk: rgba(221, 85, 85, 0.7);
--time-night: rgba(31, 64, 104, 0.8);
--particle-color-1: rgba(255, 255, 255, 0.8);
--particle-color-2: rgba(255, 244, 214, 0.6);
--3d-perspective: 1000px;
--transition-slow: 1.2s cubic-bezier(0.16, 1, 0.3, 1);
--transition-medium: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--monument-shadow-length: 20px;
--monument-shadow-blur: 15px;
--monument-shadow-opacity: 0.3;
--gradient-primary: linear-gradient(135deg, #1FB8CD, #172A3A);
--gradient-secondary: linear-gradient(135deg, #FFC185, #944454);
--gradient-accent: linear-gradient(135deg, #DB4545, #964325);
}
/* Typography Extensions */
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.title-line {
display: block;
transform: translateY(50px);
opacity: 0;
animation: slideUpFade 1s forwards;
}
.line-1 {
animation-delay: 0.2s;
}
.line-2 {
animation-delay: 0.4s;
}
.line-3 {
animation-delay: 0.6s;
}
/* Custom Cursor */
#custom-cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
display: none;
}
.cursor-trail {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--color-primary);
transform: scale(0.8);
opacity: 0.8;
transition: all 0.05s ease;
}
.cursor-glow {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--glow-primary);
filter: blur(5px);
transform: scale(1);
opacity: 0.5;
top: -5px;
left: -5px;
}
@media (pointer: fine) {
body {
cursor: none;
}
#custom-cursor {
display: block;
}
a, button, [role="button"], .clickable {
cursor: none;
}
}
/* Loading Screen Styles */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-background);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}
.loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
}
.monument-builder {
position: relative;
width: 200px;
height: 200px;
perspective: var(--3d-perspective);
}
.stone-block {
position: absolute;
background-color: var(--monument-red);
border: 1px solid rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
opacity: 0;
transform: translateY(20px) rotateX(45deg) rotateZ(0deg);
animation: buildMonument 2s forwards infinite;
}
.block-1 {
width: 100px;
height: 30px;
bottom: 0;
left: 50px;
animation-delay: 0s;
}
.block-2 {
width: 90px;
height: 30px;
bottom: 30px;
left: 55px;
animation-delay: 0.4s;
}
.block-3 {
width: 80px;
height: 30px;
bottom: 60px;
left: 60px;
animation-delay: 0.8s;
}
.block-4 {
width: 70px;
height: 30px;
bottom: 90px;
left: 65px;
animation-delay: 1.2s;
}
.block-5 {
width: 60px;
height: 40px;
bottom: 120px;
left: 70px;
border-radius: 30px 30px 0 0;
animation-delay: 1.6s;
}
.loading-text {
text-align: center;
}
.progress-bar {
width: 300px;
height: 6px;
background-color: var(--color-secondary);
border-radius: var(--radius-full);
margin: var(--space-16) 0;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--gradient-primary);
width: 0%;
border-radius: var(--radius-full);
animation: loadingProgress 3.5s ease-out forwards;
}
.loading-status {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* Particle System */
.particle-system {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
/* Navigation */
.floating-nav {
position: fixed;
top: var(--space-16);
left: 50%;
transform: translateX(-50%);
z-index: 100;
width: 95%;
max-width: 1200px;
background-color: rgba(var(--color-surface), 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-md);
padding: var(--space-12) var(--space-16);
transition: all var(--transition-fast);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
position: relative;
perspective: var(--3d-perspective);
}
.logo-3d {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
letter-spacing: 1px;
color: var(--color-primary);
transform-style: preserve-3d;
animation: float 3s ease-in-out infinite;
}
.logo-shadow {
position: absolute;
bottom: -8px;
left: 10%;
width: 80%;
height: 4px;
border-radius: var(--radius-full);
background-color: var(--shadow-color);
filter: blur(4px);
opacity: 0.5;
animation: shadowPulse 3s ease-in-out infinite;
}
.nav-links {
display: flex;
gap: var(--space-20);
}
.nav-link {
position: relative;
padding: var(--space-8) var(--space-4);
text-decoration: none;
color: var(--color-text);
font-weight: var(--font-weight-medium);
transition: var(--transition-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-primary);
transition: width var(--transition-fast);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.link-glow {
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 10px;
background-color: var(--glow-primary);
border-radius: var(--radius-full);
filter: blur(8px);
opacity: 0;
transition: opacity var(--transition-fast);
}
.nav-link:hover .link-glow,
.nav-link.active .link-glow {
opacity: 0.5;
}
.nav-controls {
display: flex;
gap: var(--space-12);
}
.control-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-secondary);
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: var(--transition-fast);
position: relative;
}
.control-btn:hover {
background-color: var(--color-secondary-hover);
}
.sun-moon-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #FFD700, #FFA500);
position: relative;
transition: var(--transition-fast);
}
.sun-moon-icon::after {
content: '';
position: absolute;
top: 0;
right: -4px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--color-secondary);
transform: scale(0);
transition: var(--transition-fast);
}
[data-color-scheme="dark"] .sun-moon-icon {
background: linear-gradient(135deg, #CCCCCC, #E6E6E6);
}
[data-color-scheme="dark"] .sun-moon-icon::after {
transform: scale(1);
}
.audio-icon {
width: 20px;
height: 20px;
position: relative;
}
.audio-icon::before {
content: '';
position: absolute;
top: 7px;
left: 0;
width: 10px;
height: 6px;
background-color: var(--color-text);
clip-path: polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%);
}
.audio-icon::after {
content: '';
position: absolute;
top: 5px;
right: 0;
width: 10px;
height: 10px;
border: 2px solid var(--color-text);
border-left: none;
border-radius: 0 50% 50% 0;
}
.audio-off .audio-icon::after {
display: none;
}
.audio-off .audio-icon::before {
opacity: 0.5;
}
/* Hero Section */
.hero-section {
position: relative;
width: 100vw;
height: 100vh;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin:0;
padding: 0; /* Remove any padding */
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.gradient-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
animation: orbPulse 8s infinite alternate;
}
.orb-1 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 20%;
left: 10%;
animation-delay: 0s;
}
.orb-2 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 10%;
right: 15%;
animation-delay: 2s;
}
.orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 15%;
right: 20%;
animation-delay: 4s;
}
.hero-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
padding: 0 var(--space-16);
z-index: 1;
perspective: var(--3d-perspective);
}
.hero-text {
flex: 1;
max-width: 600px;
}
.hero-title {
font-size: 4rem;
font-weight: var(--font-weight-bold);
line-height: 1.1;
margin-bottom: var(--space-16);
}
.hero-subtitle {
position: relative;
display: inline-block;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.04em;
background: linear-gradient(90deg, #111 10%, #12b3b6 40%, #222 60%, #12b3b6 90%);
background-size: 200% auto;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:
0 2px 16px #12b3b699,
0 0 32px #111a1f88;
filter: drop-shadow(0 0 6px #12b3b688);
opacity: 1;
overflow: hidden;
}
.hero-subtitle span {
opacity: 0;
filter: blur(4px); /* Lower blur for better readability */
transform: translateY(32px) scale(0.98);
display: inline-block;
transition:
opacity 0.7s cubic-bezier(.5,0,.2,1),
filter 0.7s cubic-bezier(.5,0,.2,1),
transform 0.7s cubic-bezier(.5,0,.2,1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: opacity, filter, transform;
}
.hero-subtitle span.animated {
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1.04);
animation: metallicSweep 2.8s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes metallicSweep {
0% {
background-position: 0% 50%;
text-shadow: 0 0.1px 16px #12b3b699, 0 0 32px #111a1f88;
}
50% {
background-position: 100% 50%;
text-shadow: 0 0.1px 28px #12b3b6cc, 0 0 48px #12b3b6cc;
}
100% {
background-position: 0% 50%;
text-shadow: 0 0.1px 16px #12b3b699, 0 0 32px #111a1f88;
}
}
/* Remove blue focus outline if any accidental focus occurs */
.hero-subtitle:focus,
.hero-subtitle span:focus {
outline: none;
box-shadow: none;
}
.hero-actions {
display: flex;
gap: var(--space-16);
opacity: 0;
transform: translateY(20px);
animation: fadeIn 1s forwards 1s;
}
.hero-btn {
position: relative;
overflow: hidden;
}
.btn-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.btn-shimmer {
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
transition: var(--transition-fast);
}
.hero-btn:hover .btn-shimmer {
top: -50%;
left: -50%;
transition: var(--transition-slow);
}
@media (max-width: 600px) {
.hero-section {
width: 90vw;
height: calc(90vw * 1.2); /* 500:600 ratio = 1:1.2 */
padding-top: 40px;
}
}
.hero-3d-scene {
width: 100%;
height: 100vh;
position: relative;
perspective: var(--3d-perspective);
}
/*India-map-container*/
body {
background: transparent; /* or rgba(0,0,0,0) if inside another container */
margin: 0;
font-family: 'Segoe UI', sans-serif;
}
.hero-section,
#map-container {
width: 100vw;
height: 100vh;
min-width: 100vw;
min-height: 100vh;
max-width: 100vw;
max-height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#map-container svg {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
object-fit: contain;
top: 0; left: 0;
}
/* Optional: Hide scrollbars visually in all browsers */
#map-container {
scrollbar-width: none; /* Firefox */
}
#map-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
#popup-menu {
position: fixed;
background: rgba(255, 255, 255, 0.15); /* translucent white */
border-radius: 20px;
padding: 24px 32px;
color: #fff;
min-width: 280px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.25);
opacity: 0;
pointer-events: none;
z-index: 1000;
transition: opacity 0.3s ease, transform 0.3s ease;
/* Remove centering transform, position will be set dynamically */
top: 0;
left: 0;
transform: translate(0, 0);
}
#popup-menu.active {
opacity: 1;
pointer-events: auto;
}
#popup-menu h2 {
margin: 0 0 12px 0;
font-weight: 600;
font-size: 1.4em;
text-align: center;
color: #ffd700;
}
#popup-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#popup-menu li {
margin: 10px 0;
cursor: pointer;
font-size: 1.1em;
transition: color 0.2s ease, transform 0.3s ease;
}
#popup-menu li:hover {
color: #fff;
transform: scale(1.05) translateX(6px);
}
/* Sublist styles */
.sublist {
margin-left: 18px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
transform: translateY(10px);
pointer-events: none;
color: #bbf7d0;
font-size: 1em;
}
.sublist.active {
max-height: 400px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.sublist li {
font-size: 1em;
color: #bbf7d0;
margin: 6px 0;
transition: color 0.2s, transform 0.3s;
}
.sublist li:hover {
color: #fff;
transform: scale(1.05) translateX(6px);
}
/* 3D effect on map region hover (Tamil Nadu, Bihar, etc.) */
#INTN.state,
#INTN.Tamil\ Nadu,
#INBR.state,
#INBR.Bihar,
#INAN.state,
#TNAN.Andaman\and\Nicobar,
#INTG.state,
#INTG.Telangana,
#INAP.state,
#INAP.Andhra\Pradesh,
#INAR.state,
#INAR.Arunachal\Pradesh,
#INTAS.state,
#INAS.Assam,
#INCT.state,
#INCT.Chhattisgarh,
#INCH.state,
#INCH.Chandigarh,
#INDH.state,
#INDH.Dādra\and\Nagar\Haveli\and\Damān\and\Diu,
#INDL.state,
#INDL.Delhi,
#INGA.state,
#INGA.Goa,
#INGJ.state,
#INGJ.Gujarat,
#INHR.state,
#INHR.Haryana,
#INHP.state,
#INHP.Himachal\Pradesh,
#INJH.state,
#INJH.Jharkhand,
#INKA.state,
#INKA.Karnataka,
#INKL.state,
#INKL.Kerala,
#INMP.state,
#INMP.Madhya\Pradesh,
#INMH.state,
#INMH.Maharashtra,
#INMN.state,
#INMN.Manipur,
#INML.state,
#INML.Meghalaya,
#INTG.state,
#INMZ.Mizoram,
#INNL.state,
#INNL.Nagaland,
#INOR.state,
#INOR.Odisha,
#INPB.state,
#INPB.Punjab,
#INPY.state,
#INPY.Puducherry,
#INRJ.state,
#INRJ.Rajasthan,
#INTG.state,
#INSK.Sikkim,
#INTR.state,
#INTR.Tripura,
#INUT.state,
#INUT.Uttaranchal,
#INUP.state,
#INUP.Uttar\Pradesh,
#INWB.state,
#INWB.West\Bengal,
#INLD.state,
#INLD.Lakshadweep,
#INLA.state,
#INLA.Ladakh,
#INJK.state,
#INJK.Jammu\and\Kashmir
{
transition: filter 0.3s, transform 0.3s;
cursor: pointer;
}
#INTN.state:hover,
#INTN.Tamil\ Nadu:hover,
#INBR.state:hover,
#INBR.Bihar:hover
#INAN.state:hover,
#TNAN.Andaman\and\Nicobar:hover,
#INTG.state:hover,
#INTG.Telangana:hover,
#INAP.state:hover,
#INAP.Andhra\Pradesh:hover,
#INAR.state:hover,
#INAR.Arunachal\Pradesh:hover,
#INTAS.state:hover,
#INAS.Assam:hover,
#INCT.state:hover,
#INCT.Chhattisgarh:hover,
#INCH.state:hover,
#INCH.Chandigarh:hover,
#INDH.state:hover,
#INDH.Dādra\and\Nagar\Haveli\and\Damān\and\Diu:hover,
#INDL.state:hover,
#INDL.Delhi:hover,
#INGA.state:hover,
#INGA.Goa:hover,
#INGJ.state:hover,
#INGJ.Gujarat:hover,
#INHR.state:hover,
#INHR.Haryana:hover,
#INHP.state:hover,
#INHP.Himachal\Pradesh:hover,
#INJH.state:hover,
#INJH.Jharkhand:hover,
#INKA.state:hover,
#INKA.Karnataka:hover,
#INKL.state:hover,
#INKL.Kerala:hover,
#INMP.state:hover,
#INMP.Madhya\Pradesh:hover,
#INMH.state:hover,
#INMH.Maharashtra:hover,
#INMN.state:hover,
#INMN.Manipur:hover,
#INML.state:hover,
#INML.Meghalaya:hover,
#INTG.state:hover,
#INMZ.Mizoram:hover,
#INNL.state:hover,
#INNL.Nagaland:hover,
#INOR.state:hover,
#INOR.Odisha:hover,
#INPB.state:hover,
#INPB.Punjab:hover,
#INPY.state:hover,
#INPY.Puducherry:hover,
#INRJ.state:hover,
#INRJ.Rajasthan:hover,
#INTG.state:hover,
#INSK.Sikkim:hover,
#INTR.state:hover,
#INTR.Tripura:hover,
#INUT.state:hover,
#INUT.Uttaranchal:hover,
#INUP.state:hover,
#INUP.Uttar\Pradesh:hover,
#INWB.state:hover,
#INWB.West\Bengal:hover,
#INLD.state:hover,
#INLD.Lakshadweep:hover,
#INLA.state:hover,
#INLA.Ladakh:hover,
#INJK.state:hover,
#INJK.Jammu\and\Kashmir:hover {
filter: drop-shadow(0 0 16px #5a0006) brightness(1.2);
transform: scale(1.03) perspective(600px) rotateX(4deg) rotateZ(-2deg);
}
.scroll-indicator {
position: absolute;
bottom: var(--space-32);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
animation: fadeIn 1s forwards 1.5s;
padding:0;
}
.scroll-line {
width: 2px;
height: 30px;
background-color: var(--color-primary);
position: relative;
overflow: hidden;
}
.scroll-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-surface);
animation: scrollLine 2s infinite;
}
.scroll-text {
margin-top: var(--space-8);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
letter-spacing: 1px;
}
/*Explore More*/
:root {
--parchment: #f9f6e7;
--limestone: #a89f91;
--bronze: #b08d57;
--scroll: #ede3c6;
--border: #bca87e;
--shadow: 0 4px 24px 0 rgba(60, 45, 15, 0.13);
--font: 'EB Garamond', serif;
}
.medieval-modal-section {
max-width: 700px;
margin: 2rem auto;
font-family: var(--font);
background: var(--parchment);
border-radius: 18px;
box-shadow: var(--shadow);
border: 2px solid var(--border);
overflow: hidden;
transition: box-shadow 0.3s;
}
.modal-header {
width: 100%;
background: linear-gradient(90deg, var(--scroll) 60%, var(--limestone) 100%);
color: #3b2f15;
font-size: 1.5rem;
font-family: var(--font);
font-weight: 700;
padding: 1.2rem 1.5rem;
border: none;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
box-shadow: 0 2px 12px 0 rgba(176, 141, 87, 0.10);
transition: background 0.3s;
position: relative;
outline: none;
}
.modal-header:hover, .modal-header:focus {
background: linear-gradient(90deg, var(--scroll) 60%, var(--bronze) 100%);
box-shadow: 0 4px 20px 0 rgba(176, 141, 87, 0.18);
}
.header-icon {
width: 32px;
height: 32px;
display: inline-block;
margin-right: 0.7rem;
vertical-align: middle;
}
.scroll-icon {
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
animation: scrollWobble 1.8s infinite;
}
@keyframes scrollWobble {
0%, 100% { transform: rotate(-5deg);}
50% { transform: rotate(7deg);}
}
.chevron-icon {
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
transition: transform 0.4s cubic-bezier(.65,.05,.36,1);
}
.modal-header[aria-expanded="true"] .chevron-icon {
transform: rotate(180deg);
}
.modal-content {
background: var(--parchment);
border-top: 2px solid var(--border);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
box-shadow: 0 2px 12px 0 rgba(176, 141, 87, 0.10) inset;
will-change: max-height, opacity;
}
.modal-content.open {
opacity: 1;
}
.materials-table {
display: flex;
flex-direction: column;
gap: 1.2rem;
padding: 1.5rem;
}
.material-row {
background: linear-gradient(90deg, #fffbe6 80%, #ede3c6 100%);
border-radius: 12px;
box-shadow: 0 2px 10px 0 rgba(176, 141, 87, 0.09);
display: flex;
align-items: flex-start;
gap: 1.2rem;
padding: 1.2rem 1rem;
transition: box-shadow 0.3s, transform 0.3s;
position: relative;
cursor: pointer;
border: 1.5px solid var(--border);
}
.material-row:hover {
box-shadow: 0 6px 24px 0 rgba(176, 141, 87, 0.18);
transform: translateY(-2px) scale(1.015);
border-color: var(--bronze);
}
.material-icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
margin-top: 0.5rem;
}
.hammer-icon {
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
animation: hammerSwing 1.3s infinite;
}
@keyframes hammerSwing {
0%, 100% { transform: rotate(-8deg);}
50% { transform: rotate(10deg);}
}
.material-info {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.2rem;
}
.material-name {
font-size: 1.2rem;
font-weight: 700;
color: var(--bronze);
font-family: var(--font);
flex: 1 1 120px;
min-width: 120px;
}
.material-thumb img {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
border: 2px solid var(--limestone);
box-shadow: 0 2px 8px 0 rgba(176, 141, 87, 0.13);
background: #fff;
transition: box-shadow 0.3s, border-color 0.3s;
}
.material-row:hover .material-thumb img {
border-color: var(--bronze);
box-shadow: 0 4px 16px 0 rgba(176, 141, 87, 0.19);
}
.material-def {
font-size: 1rem;
color: #3b2f15;
flex: 2 1 220px;
min-width: 150px;
font-family: var(--font);
opacity: 0.88;
}
.details-btn {
background: linear-gradient(90deg, var(--bronze) 60%, var(--limestone) 100%);
color: #fffbe6;
font-family: var(--font);
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 6px;
padding: 0.7rem 1.3rem;
margin-left: auto;
box-shadow: 0 2px 8px 0 rgba(176, 141, 87, 0.10);
cursor: pointer;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
outline: none;
position: relative;
overflow: hidden;
}
.details-btn:hover, .details-btn:focus {
background: linear-gradient(90deg, var(--bronze) 40%, var(--scroll) 100%);
color: var(--bronze);
box-shadow: 0 4px 16px 0 rgba(176, 141, 87, 0.19);
}
.details-btn::after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s;
pointer-events: none;
}
.details-btn:active::after {
width: 120%;
height: 200%;
transition: width 0.2s, height 0.2s;
}
@media (max-width: 700px) {
.materials-table {
padding: 1rem 0.4rem;
gap: 0.7rem;
}
.material-row {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
padding: 1rem 0.6rem;
}
.material-info {
flex-direction: column;
gap: 0.7rem;
align-items: flex-start;
}
.material-name, .material-def {
min-width: 0;
width: 100%;
}
.details-btn {
width: 100%;
margin: 0.5rem 0 0 0;
}
}
/* Monuments Section */
.monuments-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: var(--space-32);
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
}
.section-title {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-8);
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: var(--color-primary);
border-radius: var(--radius-full);
}
.section-subtitle {
color: var(--color-text-secondary);
max-width: 600px;
margin: var(--space-16) auto 0;
}
.section-header.visible {
opacity: 1;
transform: translateY(0);
}
.sun-controls {
max-width: 800px;
margin: 0 auto var(--space-32);
padding: var(--space-16);
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-sm);
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
transition-delay: 0.2s;
}
.sun-controls.visible {
opacity: 1;
transform: translateY(0);
}
.sun-slider-container {
margin-bottom: var(--space-16);
}
.sun-slider {
width: 100%;
margin: var(--space-8) 0;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: linear-gradient(to right, var(--time-dawn), var(--time-noon), var(--time-dusk), var(--time-night));
border-radius: var(--radius-full);
outline: none;
}
.sun-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary);
border: 2px solid var(--color-surface);
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: var(--transition-fast);
}
.sun-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.time-labels {
display: flex;
justify-content: space-between;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.lighting-info {
display: flex;
align-items: center;
justify-content: space-between;
}
.sun-position {
width: 120px;
height: 60px;
border-radius: 120px 120px 0 0;
border: 1px solid var(--color-border);
border-bottom: none;
position: relative;
}
.sun-indicator {
width: 16px;
height: 16px;
background: radial-gradient(circle, #FFD700, #FFA500);
border-radius: 50%;
position: absolute;
bottom: 0;
left: 52px;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
transform-origin: bottom center;
transform: rotate(90deg) translateY(-52px) rotate(-90deg);
transition: transform var(--transition-medium);
}
.lighting-stats {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.monuments-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-32);
justify-content: center;
margin-top: var(--space-32);
}
.monument-card {
width: 350px;
height: 500px;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition-medium);
opacity: 0;
transform: translateY(50px);
perspective: var(--3d-perspective);
}
.monument-card.visible {
opacity: 1;
transform: translateY(0);
}
.monument-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.monument-3d-container {
height: 250px;
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, var(--time-noon), var(--color-background));
transition: var(--transition-medium);
}
.monument-scene {
width: 100%;
height: 100%;
perspective: var(--3d-perspective);
display: flex;
align-items: center;
justify-content: center;
}
.monument-3d {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(20deg);
transition: transform var(--transition-medium);
}
.monument-card:hover .monument-3d {
transform: rotateX(15deg) rotateY(40deg);
}
.monument-shadow {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%) rotateX(90deg);
width: 80%;
height: 20px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
filter: blur(5px);
}
.monument-structure {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
/* Taj Mahal */
.dome-monument .monument-structure {
transform-style: preserve-3d;
}
.dome-base-3d {
width: 120px;
height: 40px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 40px;
transform: translateZ(0);
}
.dome-main {
width: 80px;
height: 120px;
position: absolute;
bottom: 40px;
left: 60px;
transform-style: preserve-3d;
}
.dome-main::before {
content: '';
position: absolute;
width: 80px;
height: 80px;
bottom: 40px;
background-color: var(--monument-white);
border-radius: 50% 50% 0 0;
}
.dome-main::after {
content: '';
position: absolute;
width: 80px;
height: 40px;
bottom: 0;
background-color: var(--monument-white);
}
.minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.minaret {
width: 15px;
height: 100px;
position: absolute;
background-color: var(--monument-white);
}
.minaret-1 {
bottom: 0;
left: 20px;
transform: translateZ(20px);
}
.minaret-2 {
bottom: 0;
right: 20px;
transform: translateZ(20px);
}
.minaret-3 {
bottom: 0;
left: 20px;
transform: translateZ(-20px);
}
.minaret-4 {
bottom: 0;
right: 20px;
transform: translateZ(-20px);
}
/* Red Fort */
.fort-monument .monument-structure {
transform-style: preserve-3d;
}
.fort-walls {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.fort-wall-3d {
position: absolute;
background-color: var(--monument-red);
}
.wall-front {
width: 160px;
height: 80px;
bottom: 0;
left: 20px;
transform: translateZ(40px);
}
.wall-side {
width: 80px;
height: 80px;
bottom: 0;
left: 20px;
transform: rotateY(90deg) translateZ(20px);
}
.wall-back {
width: 160px;
height: 80px;
bottom: 0;
left: 20px;
transform: translateZ(-40px);
}
.fort-towers {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.tower {
width: 30px;
height: 100px;
position: absolute;
background-color: var(--monument-red);
}
.tower-1 {
bottom: 0;
left: 20px;
transform: translateZ(40px);
}
.tower-2 {
bottom: 0;
right: 20px;
transform: translateZ(40px);
}
/* Qutub Minar */
.minaret-monument .monument-structure {
transform-style: preserve-3d;
}
.minaret-tower {
position: absolute;
width: 40px;
height: 180px;
bottom: 0;
left: 80px;
transform-style: preserve-3d;
}
.minaret-section {
position: absolute;
background-color: var(--monument-red);
left: 0;
}
.section-1 {
width: 40px;
height: 40px;
bottom: 0;
}
.section-2 {
width: 35px;
height: 35px;
bottom: 40px;
left: 2.5px;
}
.section-3 {
width: 30px;
height: 35px;
bottom: 75px;
left: 5px;
}
.section-4 {
width: 25px;
height: 35px;
bottom: 110px;
left: 7.5px;
}
.section-5 {
width: 20px;
height: 30px;
bottom: 145px;
left: 10px;
border-radius: 50% 50% 0 0;
}
.minaret-balconies {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.balcony {
position: absolute;
width: 50px;
height: 5px;
left: 75px;
background-color: var(--monument-white);
border-radius: 2px;
}
.balcony-1 {
bottom: 40px;
}
.balcony-2 {
bottom: 75px;
}
.balcony-3 {
bottom: 110px;
}
.monument-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.monument-info {
padding: var(--space-16);
}
.monument-type {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-12);
}
.monument-description {
margin-bottom: var(--space-16);
font-size: var(--font-size-sm);
line-height: 1.6;
}
.monument-stats {
display: flex;
gap: var(--space-8);
margin-bottom: var(--space-16);
flex-wrap: wrap;
}
.stat {
flex: 1;
min-width: 70px;
background-color: var(--color-secondary);
padding: var(--space-8);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
align-items: center;
}
.stat-label {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
}
.stat-value {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.explore-btn {
width: 100%;
}
/* Games Section */
.games-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
}
.games-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-32);
justify-content: center;
margin-top: var(--space-32);
}
.game-card {
width: 350px;
height: 450px;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition-medium);
opacity: 0;
transform: translateY(50px);
}
.game-card.visible {
opacity: 1;
transform: translateY(0);
}
.game-interface {
display: none;
/* other styles */
}
.game-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.game-preview {
height: 200px;
position: relative;
overflow: hidden;
}
.game-3d-scene {
width: 100%;
height: 100%;
perspective: var(--3d-perspective);
display: flex;
align-items: center;
justify-content: center;
}
/* Architect Game Elements */
.building-blocks {
display: flex;
gap: var(--space-16);
transform-style: preserve-3d;
animation: rotateBlocks 10s infinite linear;
}
.block {
width: 50px;
height: 30px;
transform-style: preserve-3d;
position: relative;
}
.block::before,
.block::after {
content: '';
position: absolute;
top: 0;
left: 0;
}
.block::before {
width: 100%;
height: 100%;
transform: translateZ(15px);
}
.block::after {
width: 30px;
height: 100%;
transform: rotateY(90deg) translateZ(-15px);
}
.block-stone::before,
.block-stone::after {
background-color: var(--monument-red);
}
.block-marble::before,
.block-marble::after {
background-color: var(--monument-white);
}
.block-granite::before,
.block-granite::after {
background-color: var(--monument-grey);
}
.construction-grid {
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(var(--color-primary-rgb), 0) 0%, rgba(var(--color-primary-rgb), 0.5) 50%, rgba(var(--color-primary-rgb), 0) 100%);
}
.construction-grid::before,
.construction-grid::after {
content: '';
position: absolute;
width: 100%;
height: 80px;
}
.construction-grid::before {
bottom: 0;
background: repeating-linear-gradient(
to right,
rgba(var(--color-primary-rgb), 0.1) 0px,
rgba(var(--color-primary-rgb), 0.1) 1px,
transparent 1px,
transparent 20px
);
}
.construction-grid::after {
bottom: 0;
background: repeating-linear-gradient(
to bottom,
rgba(var(--color-primary-rgb), 0.1) 0px,
rgba(var(--color-primary-rgb), 0.1) 1px,
transparent 1px,
transparent 20px
);
}
/* Timeline Game Elements */
.time-portal {
position: relative;
width: 100%;
height: 100%;
perspective: var(--3d-perspective);
display: flex;
align-items: center;
justify-content: center;
}
.portal-rings {
position: relative;
width: 150px;
height: 150px;
transform-style: preserve-3d;
}
.ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 4px solid var(--color-primary);
transform: translate(-50%, -50%) rotateX(70deg);
}
.ring-1 {
width: 150px;
height: 150px;
opacity: 0.3;
animation: pulsateRing 3s infinite;
}
.ring-2 {
width: 120px;
height: 120px;
opacity: 0.5;
animation: pulsateRing 3s infinite 0.5s;
}
.ring-3 {
width: 90px;
height: 90px;
opacity: 0.7;
animation: pulsateRing 3s infinite 1s;
}
.historical-scenes {
position: absolute;
width: 100%;
height: 100%;
}
.scene {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity var(--transition-medium);
}
.scene.ancient {
opacity: 0.2;
}
/* Physics Game Elements */
.physics-demo {
position: relative;
width: 100%;
height: 100%;
perspective: var(--3d-perspective);
}
.stress-visualization {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.stress-lines {
position: absolute;
width: 150px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: repeating-linear-gradient(
135deg,
rgba(var(--color-error-rgb), 0) 0px,
rgba(var(--color-error-rgb), 0) 5px,
rgba(var(--color-error-rgb), 0.2) 5px,
rgba(var(--color-error-rgb), 0.2) 10px
);
opacity: 0;
animation: pulseOpacity 3s infinite;
}
.force-arrows {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.force-arrows::before,
.force-arrows::after {
content: '';
position: absolute;
width: 50px;
height: 10px;
background-color: rgba(var(--color-warning-rgb), 0.7);
top: 50%;
clip-path: polygon(0 30%, 80% 30%, 80% 0, 100% 50%, 80% 100%, 80% 70%, 0 70%);
animation: moveArrow 3s infinite;
}
.force-arrows::before {
left: 20%;
transform: translateY(-50%);
}
.force-arrows::after {
right: 20%;
transform: translateY(-50%) rotateY(180deg);
animation-delay: 1.5s;
}
.structure-test {
position: absolute;
width: 80px;
height: 120px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.test-monument {
width: 100%;
height: 100%;
background-color: var(--monument-red);
clip-path: polygon(0 100%, 20% 100%, 20% 40%, 40% 40%, 40% 100%, 60% 100%, 60% 40%, 80% 40%, 80% 100%, 100% 100%, 100% 0, 0 0);
transform-origin: center bottom;
animation: wobbleStructure 5s infinite;
}
.load-indicator {
position: absolute;
width: 120px;
height: 20px;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(var(--color-error-rgb), 0.2);
border-radius: var(--radius-sm);
}
.load-indicator::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 70%;
background-color: rgba(var(--color-error-rgb), 0.7);
border-radius: var(--radius-sm);
animation: loadIncrease 5s infinite;
}
.game-info {
padding: var(--space-16);
}
.game-info h3 {
margin-bottom: var(--space-8);
}
.game-info p {
margin-bottom: var(--space-16);
font-size: var(--font-size-sm);
line-height: 1.6;
}
.game-features {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
margin-bottom: var(--space-16);
}
.feature {
font-size: var(--font-size-xs);
background-color: var(--color-secondary);
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-full);
color: var(--color-text-secondary);
}
.play-btn {
width: 100%;
}
/* Game Interface */
.game-interface {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1200px;
height: 80vh;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
z-index: 1000;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.game-interface.active {
opacity: 1;
visibility: visible;
}
.game-header {
display: flex;
align-items: center;
padding: var(--space-16);
border-bottom: 1px solid var(--color-card-border-inner);
}
.game-header h3 {
flex: 1;
}
.game-progress {
display: flex;
align-items: center;
gap: var(--space-12);
margin-right: var(--space-16);
}
.game-progress .progress-bar {
width: 200px;
margin: 0;
}
.progress-text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
white-space: nowrap;
}
.close-game {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
padding: 0;
border-radius: 50%;
}
.game-content {
display: flex;
flex: 1;
overflow: hidden;
}
.game-viewport {
flex: 3;
display: flex;
flex-direction: column;
border-right: 1px solid var(--color-card-border-inner);
}
.construction-area {
flex: 1;
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, var(--color-background), rgba(var(--color-text-rgb), 0.05));
}
.build-grid {
position: absolute;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, rgba(var(--color-primary-rgb), 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.1) 1px, transparent 1px);
background-size: 40px 40px;
transform-origin: center;
transform: rotateX(60deg);
transform-style: preserve-3d;
}
.placed-blocks {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
perspective: var(--3d-perspective);
}
.game-controls {
height: 120px;
padding: var(--space-16);
display: flex;
gap: var(--space-16);
border-top: 1px solid var(--color-card-border-inner);
}
.material-palette {
display: flex;
gap: var(--space-12);
}
.material-option {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
cursor: pointer;
opacity: 0.6;
transition: var(--transition-fast);
}
.material-option.active {
opacity: 1;
}
.material-option:hover {
opacity: 0.8;
}
.material-preview {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
}
.stone-material {
background-color: var(--monument-red);
}
.marble-material {
background-color: var(--monument-white);
}
.granite-material {
background-color: var(--monument-grey);
}
.material-option span {
font-size: var(--font-size-xs);
}
.build-tools {
display: flex;
gap: var(--space-8);
}
.tool-btn {
padding: var(--space-8) var(--space-12);
background-color: var(--color-secondary);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
cursor: pointer;
transition: var(--transition-fast);
}
.tool-btn.active {
background-color: var(--color-primary);
color: var(--color-btn-primary-text);
}
.tool-btn:hover:not(.active) {
background-color: var(--color-secondary-hover);
}
.game-sidebar {
flex: 1;
padding: var(--space-16);
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.challenge-info {
margin-bottom: var(--space-16);
}
.challenge-info h4 {
margin-bottom: var(--space-8);
}
.stability-meter {
margin-bottom: var(--space-16);
}
.stability-gauge {
height: 12px;
background-color: var(--color-secondary);
border-radius: var(--radius-full);
margin: var(--space-8) 0;
overflow: hidden;
}
.gauge-fill {
height: 100%;
width: 85%;
background: linear-gradient(to right, var(--color-error), var(--color-warning), var(--color-success));
border-radius: var(--radius-full);
}
.stability-text {
font-size: var(--font-size-sm);
color: var(--color-success);
}
.game-actions {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--space-8);
}
body {
background: transparent; /* or rgba(0,0,0,0) if inside another container */
margin: 0;
font-family: 'Segoe UI', sans-serif;
}
#popup-menu {
position: fixed;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 24px 32px;
color: #fff;
min-width: 280px;
max-width: 380px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.25);
opacity: 0;
pointer-events: none;
z-index: 1000;
transition: opacity 0.3s ease, transform 0.3s ease;
top: 0;
left: 0;
transform: translate(0, 0);
max-height: 70vh; /* This is key */
overflow-y: auto; /* This is key */
overflow-x: hidden;
display: flex;
flex-direction: column;
}
#popup-menu.active {
opacity: 1;
pointer-events: auto;
}
#popup-menu h2 {
margin: 0 0 12px 0;
font-weight: 600;
font-size: 1.4em;
text-align: center;
color: #ffd700;
}
/* Make the UL fill the available space and be scrollable if needed */
#popup-menu ul {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
min-height: 0; /* Important for flex children to allow shrinking */
}
#popup-menu li {
margin: 10px 0;
cursor: pointer;
font-size: 1.1em;
transition: color 0.2s ease, transform 0.3s ease;
}
#popup-menu li:hover {
color: #fff;
transform: scale(1.05) translateX(6px);
}
#popup-menu::-webkit-scrollbar {
width: 8px;
}
#popup-menu::-webkit-scrollbar-thumb {
background: #444;
border-radius: 4px;
}
/* Sublist styles */
.sublist {
margin-left: 18px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
transform: translateY(10px);
pointer-events: none;
color: #bbf7d0;
font-size: 1em;
}
.sublist.active {
max-height: none; /* Allow sublist to fully expand */
opacity: 1;
transform: translateY(0);
pointer-events: auto;
overflow: visible;
}
.sublist li {
font-size: 1em;
color: #bbf7d0;
margin: 6px 0;
transition: color 0.2s, transform 0.3s;
}
.sublist li:hover {
color: #fff;
transform: scale(1.05) translateX(6px);
}
/* Optional: Nicer scrollbar */
#popup-menu::-webkit-scrollbar {
width: 8px;
}
#popup-menu::-webkit-scrollbar-thumb {
background: #444;
border-radius: 4px;
}
/* 3D effect on map region hover (Tamil Nadu, Bihar, etc.) */
#INTN.state,
#INTN.Tamil\ Nadu,
#INBR.state,
#INBR.Bihar,
#INAN.state,
#TNAN.Andaman\and\Nicobar,
#INTG.state,
#INTG.Telangana,
#INAP.state,
#INAP.Andhra\Pradesh,
#INAR.state,
#INAR.Arunachal\Pradesh,
#INTAS.state,
#INAS.Assam,
#INCT.state,
#INCT.Chhattisgarh,
#INCH.state,
#INCH.Chandigarh,
#INDH.state,
#INDH.Dādra\and\Nagar\Haveli\and\Damān\and\Diu,
#INDL.state,
#INDL.Delhi,
#INGA.state,
#INGA.Goa,
#INGJ.state,
#INGJ.Gujarat,
#INHR.state,
#INHR.Haryana,
#INHP.state,
#INHP.Himachal\Pradesh,
#INJH.state,
#INJH.Jharkhand,
#INKA.state,
#INKA.Karnataka,
#INKL.state,
#INKL.Kerala,
#INMP.state,
#INMP.Madhya\Pradesh,
#INMH.state,
#INMH.Maharashtra,
#INMN.state,
#INMN.Manipur,
#INML.state,
#INML.Meghalaya,
#INTG.state,
#INMZ.Mizoram,
#INNL.state,
#INNL.Nagaland,
#INOR.state,
#INOR.Odisha,
#INPB.state,
#INPB.Punjab,
#INPY.state,
#INPY.Puducherry,
#INRJ.state,
#INRJ.Rajasthan,
#INTG.state,
#INSK.Sikkim,
#INTR.state,
#INTR.Tripura,
#INUT.state,
#INUT.Uttaranchal,
#INUP.state,
#INUP.Uttar\Pradesh,
#INWB.state,
#INWB.West\Bengal,
#INLD.state,
#INLD.Lakshadweep,
#INLA.state,
#INLA.Ladakh,
#INJK.state,
#INJK.Jammu\and\Kashmir
{
transition: filter 0.3s, transform 0.3s;
cursor: pointer;
}
#INTN.state:hover,
#INTN.Tamil\ Nadu:hover,
#INBR.state:hover,
#INBR.Bihar:hover
#INAN.state:hover,
#TNAN.Andaman\and\Nicobar:hover,
#INTG.state:hover,
#INTG.Telangana:hover,
#INAP.state:hover,
#INAP.Andhra\Pradesh:hover,
#INAR.state:hover,
#INAR.Arunachal\Pradesh:hover,
#INTAS.state:hover,
#INAS.Assam:hover,
#INCT.state:hover,
#INCT.Chhattisgarh:hover,
#INCH.state:hover,
#INCH.Chandigarh:hover,
#INDH.state:hover,
#INDH.Dādra\and\Nagar\Haveli\and\Damān\and\Diu:hover,
#INDL.state:hover,
#INDL.Delhi:hover,
#INGA.state:hover,
#INGA.Goa:hover,
#INGJ.state:hover,
#INGJ.Gujarat:hover,
#INHR.state:hover,
#INHR.Haryana:hover,
#INHP.state:hover,
#INHP.Himachal\Pradesh:hover,
#INJH.state:hover,
#INJH.Jharkhand:hover,
#INKA.state:hover,
#INKA.Karnataka:hover,
#INKL.state:hover,
#INKL.Kerala:hover,
#INMP.state:hover,
#INMP.Madhya\Pradesh:hover,
#INMH.state:hover,
#INMH.Maharashtra:hover,
#INMN.state:hover,
#INMN.Manipur:hover,
#INML.state:hover,
#INML.Meghalaya:hover,
#INTG.state:hover,
#INMZ.Mizoram:hover,
#INNL.state:hover,
#INNL.Nagaland:hover,
#INOR.state:hover,
#INOR.Odisha:hover,
#INPB.state:hover,
#INPB.Punjab:hover,
#INPY.state:hover,
#INPY.Puducherry:hover,
#INRJ.state:hover,
#INRJ.Rajasthan:hover,
#INTG.state:hover,
#INSK.Sikkim:hover,
#INTR.state:hover,
#INTR.Tripura:hover,
#INUT.state:hover,
#INUT.Uttaranchal:hover,
#INUP.state:hover,
#INUP.Uttar\Pradesh:hover,
#INWB.state:hover,
#INWB.West\Bengal:hover,
#INLD.state:hover,
#INLD.Lakshadweep:hover,
#INLA.state:hover,
#INLA.Ladakh:hover,
#INJK.state:hover,
#INJK.Jammu\and\Kashmir:hover {
filter: drop-shadow(0 0 16px #5a0006) brightness(1.2);
transform: scale(1.03) perspective(600px) rotateX(4deg) rotateZ(-2deg);
}
/* Material Laboratory Section */
.laboratory-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
}
.lab-interface {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-32);
}
.material-analysis {
display: flex;
flex-direction: column;
gap: var(--space-16);
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
}
.material-analysis.visible {
opacity: 1;
transform: translateY(0);
}
.material-selector {
display: flex;
justify-content: center;
gap: var(--space-24);
}
.material-sample {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
cursor: pointer;
opacity: 0.6;
transition: var(--transition-fast);
}
.material-sample.active {
opacity: 1;
}
.material-sample:hover:not(.active) {
opacity: 0.8;
}
.sample-cube {
width: 60px;
height: 60px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
transition: transform var(--transition-fast);
}
.sample-cube::before,
.sample-cube::after,
.sample-cube span {
position: absolute;
width: 100%;
height: 100%;
content: '';
top: 0;
left: 0;
}
.sample-cube::before {
transform: rotateY(90deg) translateZ(30px);
}
.sample-cube::after {
transform: rotateX(90deg) translateZ(30px);
}
.sandstone-cube,
.sandstone-cube::before,
.sandstone-cube::after {
background-color: var(--monument-red);
}
.marble-cube,
.marble-cube::before,
.marble-cube::after {
background-color: var(--monument-white);
}
.granite-cube,
.granite-cube::before,
.granite-cube::after {
background-color: var(--monument-grey);
}
.material-sample:hover .sample-cube {
transform: rotateX(-30deg) rotateY(-40deg);
}
.analysis-display {
display: flex;
gap: var(--space-24);
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
padding: var(--space-24);
box-shadow: var(--shadow-md);
}
.material-3d-view {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.rotating-sample {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
perspective: var(--3d-perspective);
position: relative;
}
.sample-3d {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
animation: rotateBlock 20s infinite linear;
display: none;
}
.sample-3d.active {
display: block;
}
.sample-3d::before,
.sample-3d::after,
.sample-3d span {
position: absolute;
width: 100%;
height: 100%;
content: '';
top: 0;
left: 0;
}
.sample-3d::before {
transform: rotateY(90deg) translateZ(75px);
}
.sample-3d::after {
transform: rotateX(90deg) translateZ(75px);
}
.sandstone-3d,
.sandstone-3d::before,
.sandstone-3d::after {
background-color: var(--monument-red);
}
.marble-3d,
.marble-3d::before,
.marble-3d::after {
background-color: var(--monument-white);
}
.granite-3d,
.granite-3d::before,
.granite-3d::after {
background-color: var(--monument-grey);
}
.analysis-tools {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
.analysis-btn {
flex: 1;
min-width: 120px;
padding: var(--space-8) var(--space-12);
background-color: var(--color-secondary);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
cursor: pointer;
transition: var(--transition-fast);
}
.analysis-btn:hover {
background-color: var(--color-secondary-hover);
}
.material-properties {
flex: 1;
}
.material-properties h3 {
margin-bottom: var(--space-16);
}
.property-grid {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-bottom: var(--space-20);
}
.property {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.property-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.property-bar {
height: 8px;
background-color: var(--color-secondary);
border-radius: var(--radius-full);
overflow: hidden;
}
.property-fill {
height: 100%;
background-color: var(--color-primary);
border-radius: var(--radius-full);
transition: width var(--transition-medium);
}
.property-fill[data-property="density"] {
background-color: var(--color-primary);
}
.property-fill[data-property="hardness"] {
background-color: var(--color-warning);
}
.property-fill[data-property="durability"] {
background-color: var(--color-success);
}
.property-value {
font-size: var(--font-size-sm);
text-align: right;
color: var(--color-text-secondary);
}
.material-description {
margin-top: var(--space-16);
}
.material-description h4 {
margin-bottom: var(--space-8);
}
.experiment-zone {
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
transition-delay: 0.2s;
}
.experiment-zone.visible {
opacity: 1;
transform: translateY(0);
}
.experiment-zone h3 {
text-align: center;
margin-bottom: var(--space-20);
}
.test-environment {
display: flex;
gap: var(--space-24);
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
padding: var(--space-24);
box-shadow: var(--shadow-md);
}
.test-specimen {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: center;
justify-content: center;
}
.specimen-holder {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
perspective: var(--3d-perspective);
}
.test-sample {
width: 60px;
height: 60px;
background-color: var(--monument-red);
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.test-sample::before,
.test-sample::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.test-sample::before {
background-color: var(--monument-red);
transform: rotateY(90deg) translateZ(30px);
}
.test-sample::after {
background-color: var(--monument-red);
transform: rotateX(90deg) translateZ(30px);
}
.test-apparatus {
display: flex;
width: 100%;
justify-content: space-around;
}
.compression-tester,
.weather-chamber {
width: 80px;
height: 60px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
position: relative;
}
.compression-tester::before {
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 15px;
background-color: var(--color-primary);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.weather-chamber::after {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 60px;
height: 40px;
background: repeating-linear-gradient(
45deg,
rgba(var(--color-primary-rgb), 0.1),
rgba(var(--color-primary-rgb), 0.1) 5px,
rgba(var(--color-primary-rgb), 0.2) 5px,
rgba(var(--color-primary-rgb), 0.2) 10px
);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.test-controls {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.test-parameters {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.parameter {
display: flex;
align-items: center;
}
.parameter label {
width: 120px;
font-size: var(--font-size-sm);
}
.parameter input {
flex: 1;
margin: 0 var(--space-12);
}
.test-results {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: center;
}
.result-display {
width: 100%;
}
.stress-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
}
.indicator-label {
font-size: var(--font-size-sm);
}
.stress-gauge {
width: 150px;
height: 75px;
border-radius: 75px 75px 0 0;
border: 2px solid var(--color-border);
border-bottom: none;
position: relative;
background: linear-gradient(to right, var(--color-success), var(--color-warning), var(--color-error));
}
.gauge-needle {
position: absolute;
bottom: 0;
left: 75px;
width: 2px;
height: 65px;
background-color: var(--color-text);
transform-origin: bottom center;
transform: rotate(-90deg);
transition: transform var(--transition-medium);
}
.stress-status {
font-weight: var(--font-weight-medium);
color: var(--color-success);
}
/* Timeline Section */
.timeline-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
}
.timeline-interface {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-32);
}
.time-navigator {
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
}
.time-navigator.visible {
opacity: 1;
transform: translateY(0);
}
.timeline-track {
position: relative;
padding: var(--space-32) 0;
}
.timeline-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background-color: var(--color-border);
transform: translateY(-50%);
}
.time-periods {
display: flex;
justify-content: space-between;
}
.time-period {
position: relative;
cursor: pointer;
transition: var(--transition-fast);
}
.period-marker {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--color-secondary);
border: 2px solid var(--color-border);
position: relative;
z-index: 1;
transition: var(--transition-fast);
}
.time-period.active .period-marker {
background-color: var(--color-primary);
transform: scale(1.2);
}
.period-label {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
transition: var(--transition-fast);
}
.time-period.active .period-label {
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.time-portal-viewer {
display: flex;
gap: var(--space-32);
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
transition-delay: 0.2s;
}
.time-portal-viewer.visible {
opacity: 1;
transform: translateY(0);
}
.portal-frame {
flex: 2;
height: 400px;
position: relative;
perspective: var(--3d-perspective);
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--color-secondary);
}
.portal-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.historical-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
.historical-scene.active {
display: block;
}
.scene-3d {
width: 100%;
height: 70%;
position: relative;
perspective: var(--3d-perspective);
display: flex;
align-items: center;
justify-content: center;
}
.ancient-temple {
width: 200px;
height: 150px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(20deg);
}
.temple-base {
width: 200px;
height: 20px;
background-color: var(--monument-grey);
position: absolute;
bottom: 0;
}
.temple-pillars {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.pillar {
width: 20px;
height: 100px;
background-color: var(--monument-grey);
position: absolute;
bottom: 20px;
}
.pillar-1 {
left: 20px;
}
.pillar-2 {
left: 60px;
}
.pillar-3 {
left: 120px;
}
.pillar-4 {
left: 160px;
}
.temple-roof {
width: 220px;
height: 40px;
background-color: var(--monument-grey);
position: absolute;
bottom: 120px;
left: -10px;
transform: perspective(100px) rotateX(20deg);
}
.mughal-palace {
width: 200px;
height: 160px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(20deg);
}
.palace-dome {
width: 80px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
top: 0;
left: 60px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
}
.palace-walls {
width: 160px;
height: 80px;
background-color: var(--monument-red);
position: absolute;
bottom: 0;
left: 20px;
transform-style: preserve-3d;
}
.palace-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.palace-minarets .minaret {
width: 15px;
height: 120px;
background-color: var(--monument-red);
position: absolute;
bottom: 0;
}
.minaret-left {
left: 10px;
}
.minaret-right {
right: 10px;
}
.scene-info {
height: 30%;
padding: var(--space-16);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(var(--color-surface-rgb), 0.9);
}
.scene-info h3 {
margin-bottom: var(--space-8);
}
.scene-info p {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.period-details {
flex: 1;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-md);
padding: var(--space-24);
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.dynasty-info {
display: none;
}
.dynasty-info.active {
display: block;
}
.dynasty-info h3 {
margin-bottom: var(--space-16);
}
.dynasty-features {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-bottom: var(--space-16);
}
.feature-item {
font-size: var(--font-size-sm);
}
.architectural-evolution h4 {
margin-bottom: var(--space-8);
}
.architectural-evolution ul {
padding-left: var(--space-16);
}
.architectural-evolution li {
margin-bottom: var(--space-8);
font-size: var(--font-size-sm);
}
/* Achievements Section */
.achievements-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
}
.achievements-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-24);
justify-content: center;
margin-top: var(--space-32);
}
.achievement-card {
width: 300px;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-md);
padding: var(--space-16);
display: flex;
gap: var(--space-16);
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
}
.achievement-card.visible {
opacity: 1;
transform: translateY(0);
}
.achievement-icon {
width: 80px;
height: 80px;
perspective: var(--3d-perspective);
}
.trophy-3d {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotateTrophy 10s infinite linear;
}
.trophy-cup {
width: 60px;
height: 40px;
background: linear-gradient(to right, #FFD700, #FFA500);
position: absolute;
top: 10px;
left: 10px;
clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
transform-style: preserve-3d;
}
.trophy-base {
width: 40px;
height: 20px;
background: linear-gradient(to right, #FFD700, #FFA500);
position: absolute;
bottom: 10px;
left: 20px;
transform-style: preserve-3d;
}
.achievement-glow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, rgba(255, 215, 0, 0) 70%);
filter: blur(10px);
animation: pulseTrophy 3s infinite;
}
.locked-trophy {
opacity: 0.3;
}
.lock-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(var(--color-text-rgb), 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.lock-overlay::before {
content: '🔒';
font-size: 24px;
}
.achievement-info {
flex: 1;
}
.achievement-info h3 {
margin-bottom: var(--space-4);
}
.achievement-info p {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-12);
}
.achievement-progress {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.achievement-progress .progress-bar {
width: 100%;
margin: 0;
}
.achievement-progress span {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
text-align: right;
}
/* Language Switcher */
.language-switcher {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
padding: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 2px solid var(--color-primary);
}
.cartoon-select {
background: transparent;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-family: 'Fredoka', cursive;
font-weight: 500;
color: var(--color-text);
cursor: pointer;
outline: none;
min-width: 120px;
}
.cartoon-select:hover {
background: var(--color-secondary);
}
.language-switcher {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
border-radius: 30px;
padding: 8px 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
border: 2px solid var(--color-primary);
animation: float 3s ease-in-out infinite;
}
.cartoon-select {
background: none;
border: none;
padding: 8px 20px;
font-family: 'Fredoka', cursive;
font-size: 1.1em;
color: var(--color-primary);
cursor: pointer;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.cartoon-select:hover {
transform: scale(1.05);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* Add to style.css */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes buildMonument {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes rotateMap {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.particle {
position: absolute;
background: var(--particle-color-1);
border-radius: 50%;
pointer-events: none;
}
/* Medieval Temple Model */
.medieval-temple {
top: 25%;
left: 15%;
animation: float 5s infinite ease-in-out 0.5s;
}
.temple-model {
transform-style: preserve-3d;
}
.temple-base {
width: 70px;
height: 30px;
background-color: var(--monument-grey);
position: absolute;
bottom: 0;
left: 5px;
}
.temple-shikhara {
width: 40px;
height: 80px;
background-color: var(--monument-red);
position: absolute;
bottom: 30px;
left: 20px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.temple-mandapa {
width: 80px;
height: 20px;
background-color: var(--monument-grey);
position: absolute;
bottom: 10px;
left: 0;
}
/* Colonial Building Model */
.colonial-building {
top: 35%;
left: 65%;
animation: float 5s infinite ease-in-out 1.5s;
}
.colonial-model {
transform-style: preserve-3d;
}
.colonial-base {
width: 90px;
height: 40px;
background-color: var(--monument-red);
position: absolute;
bottom: 0;
left: 0;
}
.colonial-dome {
width: 50px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
bottom: 40px;
left: 20px;
border-radius: 50% 50% 0 0;
}
.colonial-tower {
width: 15px;
height: 70px;
background-color: var(--monument-red);
position: absolute;
bottom: 40px;
left: 75px;
}
/* Modern Building Model */
.modern-building {
top: 45%;
left: 40%;
animation: float 5s infinite ease-in-out 2.5s;
}
.modern-model {
transform-style: preserve-3d;
}
.modern-base {
width: 60px;
height: 80px;
background: linear-gradient(135deg, #708090, #A9A9A9);
position: absolute;
bottom: 0;
left: 10px;
}
.modern-structure {
width: 80px;
height: 60px;
background: linear-gradient(135deg, #2F4F4F, #708090);
position: absolute;
bottom: 20px;
left: 0;
}
.modern-facade {
width: 70px;
height: 50px;
background: repeating-linear-gradient(
90deg,
rgba(255,255,255,0.2) 0px,
rgba(255,255,255,0.2) 5px,
transparent 5px,
transparent 10px
);
position: absolute;
bottom: 25px;
left: 5px;
}
/* Enhanced Animation */
@keyframes float {
0%, 100% {
transform: translateY(0px) rotateY(0deg);
}
25% {
transform: translateY(-8px) rotateY(90deg);
}
50% {
transform: translateY(-15px) rotateY(180deg);
}
75% {
transform: translateY(-8px) rotateY(270deg);
}
}
/* Hover Effects for Interactive Elements */
.dynasty-info:hover .floating-monument {
transform: translateZ(30px) scale(1.2);
transition: all 0.3s ease;
}
/* Newsletter Subscription Section */
.newsletter-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.newsletter-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.newsletter-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.newsletter-orb-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 10%;
left: 5%;
animation: orbPulse 12s infinite alternate;
}
.newsletter-orb-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 15%;
right: 10%;
animation: orbPulse 15s infinite alternate 3s;
}
.newsletter-orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 50%;
right: 30%;
animation: orbPulse 10s infinite alternate 6s;
}
.newsletter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--space-32);
align-items: center;
opacity: 0;
transform: translateY(50px);
transition: var(--transition-medium);
}
.newsletter-container.visible {
opacity: 1;
transform: translateY(0);
}
.newsletter-form-wrapper {
flex: 2;
background-color: rgba(var(--color-surface-rgb), 0.95);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Form Monument Scene */
.form-monument-scene {
display: flex;
justify-content: center;
margin-bottom: var(--space-24);
perspective: var(--3d-perspective);
}
.subscription-monument {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
animation: floatMonument 6s infinite ease-in-out;
}
.subscription-taj {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(20deg);
}
.subscription-dome {
width: 60px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
top: 20px;
left: 30px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-base {
width: 100px;
height: 30px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 10px;
transform: translateZ(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.subscription-minarets .minaret {
width: 8px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.subscription-glow {
position: absolute;
width: 120%;
height: 30px;
bottom: -15px;
left: -10%;
background: radial-gradient(ellipse at center,
rgba(var(--color-primary-rgb), 0.6) 0%,
rgba(var(--color-primary-rgb), 0) 70%);
filter: blur(8px);
transform: rotateX(90deg) translateZ(-10px);
animation: pulseGlow 4s infinite alternate;
}
/* Newsletter Form */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.newsletter-input-group {
position: relative;
}
.input-container {
position: relative;
}
.newsletter-input {
width: 100%;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
font-size: var(--font-size-lg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-background);
color: var(--color-text);
transition: all var(--transition-fast);
position: relative;
z-index: 2;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}
.newsletter-input:focus + .newsletter-label,
.newsletter-input:not(:placeholder-shown) + .newsletter-label {
transform: translateY(-35px) scale(0.85);
color: var(--color-primary);
background-color: var(--color-background);
padding: 0 var(--space-8);
}
.newsletter-label {
position: absolute;
left: var(--space-20);
top: var(--space-16);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
pointer-events: none;
transition: all var(--transition-fast);
transform-origin: left center;
}
/* Animations */
@keyframes floatMonument {
0%, 100% {
transform: rotateX(15deg) rotateY(20deg) translateY(0px);
}
50% {
transform: rotateX(15deg) rotateY(20deg) translateY(-10px);
}
}
@keyframes pulseGlow {
0% {
opacity: 0.6;
transform: rotateX(90deg) translateZ(-10px) scale(1);
}
100% {
opacity: 0.8;
transform: rotateX(90deg) translateZ(-10px) scale(1.1);
}
}
@keyframes counterBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-container {
flex-direction: column;
gap: var(--space-24);
}
.newsletter-stats {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-form-wrapper {
padding: var(--space-20);
}
.newsletter-section {
padding: var(--space-24) var(--space-12);
}
}
/* Newsletter Subscription Section */
.newsletter-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.newsletter-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.newsletter-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.newsletter-orb-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 10%;
left: 5%;
animation: orbPulse 12s infinite alternate;
}
.newsletter-orb-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 15%;
right: 10%;
animation: orbPulse 15s infinite alternate 3s;
}
.newsletter-orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 50%;
right: 30%;
animation: orbPulse 10s infinite alternate 6s;
}
.newsletter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--space-32);
align-items: center;
opacity: 0;
transform: translateY(50px);
transition: var(--transition-medium);
}
.newsletter-container.visible {
opacity: 1;
transform: translateY(0);
}
.newsletter-form-wrapper {
flex: 2;
background-color: rgba(var(--color-surface-rgb), 0.95);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Form Monument Scene */
.form-monument-scene {
display: flex;
justify-content: center;
margin-bottom: var(--space-24);
perspective: var(--3d-perspective);
}
.subscription-monument {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
animation: floatMonument 6s infinite ease-in-out;
}
.subscription-taj {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(20deg);
}
.subscription-dome {
width: 60px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
top: 20px;
left: 30px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-base {
width: 100px;
height: 30px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 10px;
transform: translateZ(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.subscription-minarets .minaret {
width: 8px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.subscription-glow {
position: absolute;
width: 120%;
height: 30px;
bottom: -15px;
left: -10%;
background: radial-gradient(ellipse at center,
rgba(var(--color-primary-rgb), 0.6) 0%,
rgba(var(--color-primary-rgb), 0) 70%);
filter: blur(8px);
transform: rotateX(90deg) translateZ(-10px);
animation: pulseGlow 4s infinite alternate;
}
/* Newsletter Form */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.newsletter-input-group {
position: relative;
}
.input-container {
position: relative;
}
.newsletter-input {
width: 100%;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
font-size: var(--font-size-lg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-background);
color: var(--color-text);
transition: all var(--transition-fast);
position: relative;
z-index: 2;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}
.newsletter-input:focus + .newsletter-label,
.newsletter-input:not(:placeholder-shown) + .newsletter-label {
transform: translateY(-35px) scale(0.85);
color: var(--color-primary);
background-color: var(--color-background);
padding: 0 var(--space-8);
}
.newsletter-label {
position: absolute;
left: var(--space-20);
top: var(--space-16);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
pointer-events: none;
transition: all var(--transition-fast);
transform-origin: left center;
}
.newsletter-preferences {
margin: var(--space-16) 0;
}
.preference-options {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-12);
}
.preference-option {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
transition: var(--transition-fast);
}
.preference-option:hover {
transform: translateX(5px);
}
.preference-option input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
position: relative;
transition: var(--transition-fast);
}
.preference-option input[type="checkbox"]:checked + .checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.preference-option input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.newsletter-btn {
position: relative;
padding: var(--space-16) var(--space-24);
font-size: var(--font-size-lg);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-fast);
}
.newsletter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.3);
}
.newsletter-stats {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.stat-card {
background-color: rgba(var(--color-surface-rgb), 0.9);
border-radius: var(--radius-lg);
padding: var(--space-20);
text-align: center;
border: 1px solid var(--color-card-border);
backdrop-filter: blur(10px);
transition: var(--transition-fast);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-8);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.newsletter-privacy {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: center;
margin-top: var(--space-8);
}
/* Success Modal */
.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.success-modal.active {
display: flex;
}
.success-content {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-32);
text-align: center;
max-width: 400px;
width: 90%;
}
.success-monument {
margin-bottom: var(--space-16);
display: flex;
justify-content: center;
}
.success-taj-3d {
width: 80px;
height: 80px;
position: relative;
animation: rotateTrophy 3s infinite linear;
}
.success-dome {
width: 50px;
height: 50px;
background-color: var(--monument-white);
border-radius: 50% 50% 0 0;
position: absolute;
top: 10px;
left: 15px;
}
.success-base {
width: 70px;
height: 20px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 5px;
}
.success-close {
margin-top: var(--space-16);
width: 100%;
}
/* Animations */
@keyframes floatMonument {
0%, 100% {
transform: rotateX(15deg) rotateY(20deg) translateY(0px);
}
50% {
transform: rotateX(15deg) rotateY(20deg) translateY(-10px);
}
}
@keyframes pulseGlow {
0% {
opacity: 0.6;
transform: rotateX(90deg) translateZ(-10px) scale(1);
}
100% {
opacity: 0.8;
transform: rotateX(90deg) translateZ(-10px) scale(1.1);
}
}
@keyframes counterBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes newsletterFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-container {
flex-direction: column;
gap: var(--space-24);
}
.newsletter-stats {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-form-wrapper {
padding: var(--space-20);
}
.newsletter-section {
padding: var(--space-24) var(--space-12);
}
}
/* Newsletter Subscription Section */
.newsletter-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.newsletter-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.newsletter-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.newsletter-orb-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 10%;
left: 5%;
animation: orbPulse 12s infinite alternate;
}
.newsletter-orb-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 15%;
right: 10%;
animation: orbPulse 15s infinite alternate 3s;
}
.newsletter-orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 50%;
right: 30%;
animation: orbPulse 10s infinite alternate 6s;
}
.newsletter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--space-32);
align-items: center;
opacity: 0;
transform: translateY(50px);
transition: var(--transition-medium);
}
.newsletter-container.visible {
opacity: 1;
transform: translateY(0);
}
.newsletter-form-wrapper {
flex: 2;
background-color: rgba(var(--color-surface-rgb), 0.95);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Form Monument Scene */
.form-monument-scene {
display: flex;
justify-content: center;
margin-bottom: var(--space-24);
perspective: var(--3d-perspective);
}
.subscription-monument {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
animation: floatMonument 6s infinite ease-in-out;
}
.subscription-taj {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(20deg);
}
.subscription-dome {
width: 60px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
top: 20px;
left: 30px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-base {
width: 100px;
height: 30px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 10px;
transform: translateZ(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.subscription-minarets .minaret {
width: 8px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.subscription-glow {
position: absolute;
width: 120%;
height: 30px;
bottom: -15px;
left: -10%;
background: radial-gradient(ellipse at center,
rgba(var(--color-primary-rgb), 0.6) 0%,
rgba(var(--color-primary-rgb), 0) 70%);
filter: blur(8px);
transform: rotateX(90deg) translateZ(-10px);
animation: pulseGlow 4s infinite alternate;
}
/* Newsletter Form */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.newsletter-input-group {
position: relative;
}
.input-container {
position: relative;
}
.newsletter-input {
width: 100%;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
font-size: var(--font-size-lg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-background);
color: var(--color-text);
transition: all var(--transition-fast);
position: relative;
z-index: 2;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}
.newsletter-input:focus + .newsletter-label,
.newsletter-input:not(:placeholder-shown) + .newsletter-label {
transform: translateY(-35px) scale(0.85);
color: var(--color-primary);
background-color: var(--color-background);
padding: 0 var(--space-8);
}
.newsletter-label {
position: absolute;
left: var(--space-20);
top: var(--space-16);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
pointer-events: none;
transition: all var(--transition-fast);
transform-origin: left center;
}
.newsletter-preferences {
margin: var(--space-16) 0;
}
.preference-options {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-12);
}
.preference-option {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
transition: var(--transition-fast);
}
.preference-option:hover {
transform: translateX(5px);
}
.preference-option input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
position: relative;
transition: var(--transition-fast);
}
.preference-option input[type="checkbox"]:checked + .checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.preference-option input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.newsletter-btn {
position: relative;
padding: var(--space-16) var(--space-24);
font-size: var(--font-size-lg);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-fast);
}
.newsletter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.3);
}
.newsletter-stats {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.stat-card {
background-color: rgba(var(--color-surface-rgb), 0.9);
border-radius: var(--radius-lg);
padding: var(--space-20);
text-align: center;
border: 1px solid var(--color-card-border);
backdrop-filter: blur(10px);
transition: var(--transition-fast);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-8);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.newsletter-privacy {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: center;
margin-top: var(--space-8);
}
/* Success Modal */
.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.success-modal.active {
display: flex;
}
.success-content {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-32);
text-align: center;
max-width: 400px;
width: 90%;
}
.success-monument {
margin-bottom: var(--space-16);
display: flex;
justify-content: center;
}
.success-taj-3d {
width: 80px;
height: 80px;
position: relative;
animation: rotateTrophy 3s infinite linear;
}
.success-dome {
width: 50px;
height: 50px;
background-color: var(--monument-white);
border-radius: 50% 50% 0 0;
position: absolute;
top: 10px;
left: 15px;
}
.success-base {
width: 70px;
height: 20px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 5px;
}
.success-close {
margin-top: var(--space-16);
width: 100%;
}
/* Animations */
@keyframes floatMonument {
0%, 100% {
transform: rotateX(15deg) rotateY(20deg) translateY(0px);
}
50% {
transform: rotateX(15deg) rotateY(20deg) translateY(-10px);
}
}
@keyframes pulseGlow {
0% {
opacity: 0.6;
transform: rotateX(90deg) translateZ(-10px) scale(1);
}
100% {
opacity: 0.8;
transform: rotateX(90deg) translateZ(-10px) scale(1.1);
}
}
@keyframes counterBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes newsletterFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-container {
flex-direction: column;
gap: var(--space-24);
}
.newsletter-stats {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-form-wrapper {
padding: var(--space-20);
}
.newsletter-section {
padding: var(--space-24) var(--space-12);
}
}
/* Newsletter Subscription Section */
.newsletter-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.newsletter-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.newsletter-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.newsletter-orb-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 10%;
left: 5%;
animation: orbPulse 12s infinite alternate;
}
.newsletter-orb-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 15%;
right: 10%;
animation: orbPulse 15s infinite alternate 3s;
}
.newsletter-orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 50%;
right: 30%;
animation: orbPulse 10s infinite alternate 6s;
}
.newsletter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--space-32);
align-items: center;
opacity: 0;
transform: translateY(50px);
transition: var(--transition-medium);
}
.newsletter-container.visible {
opacity: 1;
transform: translateY(0);
}
.newsletter-form-wrapper {
flex: 2;
background-color: rgba(var(--color-surface-rgb), 0.95);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Form Monument Scene */
.form-monument-scene {
display: flex;
justify-content: center;
margin-bottom: var(--space-24);
perspective: var(--3d-perspective);
}
.subscription-monument {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
animation: floatMonument 6s infinite ease-in-out;
}
.subscription-taj {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(20deg);
}
.subscription-dome {
width: 60px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
top: 20px;
left: 30px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-base {
width: 100px;
height: 30px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 10px;
transform: translateZ(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.subscription-minarets .minaret {
width: 8px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.subscription-glow {
position: absolute;
width: 120%;
height: 30px;
bottom: -15px;
left: -10%;
background: radial-gradient(ellipse at center,
rgba(var(--color-primary-rgb), 0.6) 0%,
rgba(var(--color-primary-rgb), 0) 70%);
filter: blur(8px);
transform: rotateX(90deg) translateZ(-10px);
animation: pulseGlow 4s infinite alternate;
}
/* Newsletter Form */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.newsletter-input-group {
position: relative;
}
.input-container {
position: relative;
}
.newsletter-input {
width: 100%;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
font-size: var(--font-size-lg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-background);
color: var(--color-text);
transition: all var(--transition-fast);
position: relative;
z-index: 2;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}
.newsletter-input:focus + .newsletter-label,
.newsletter-input:not(:placeholder-shown) + .newsletter-label {
transform: translateY(-35px) scale(0.85);
color: var(--color-primary);
background-color: var(--color-background);
padding: 0 var(--space-8);
}
.newsletter-label {
position: absolute;
left: var(--space-20);
top: var(--space-16);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
pointer-events: none;
transition: all var(--transition-fast);
transform-origin: left center;
}
.newsletter-preferences {
margin: var(--space-16) 0;
}
.preference-options {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-12);
}
.preference-option {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
transition: var(--transition-fast);
}
.preference-option:hover {
transform: translateX(5px);
}
.preference-option input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
position: relative;
transition: var(--transition-fast);
}
.preference-option input[type="checkbox"]:checked + .checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.preference-option input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.newsletter-btn {
position: relative;
padding: var(--space-16) var(--space-24);
font-size: var(--font-size-lg);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-fast);
}
.newsletter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.3);
}
.newsletter-stats {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.stat-card {
background-color: rgba(var(--color-surface-rgb), 0.9);
border-radius: var(--radius-lg);
padding: var(--space-20);
text-align: center;
border: 1px solid var(--color-card-border);
backdrop-filter: blur(10px);
transition: var(--transition-fast);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-8);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.newsletter-privacy {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: center;
margin-top: var(--space-8);
}
/* Success Modal */
.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.success-modal.active {
display: flex;
}
.success-content {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-32);
text-align: center;
max-width: 400px;
width: 90%;
}
.success-monument {
margin-bottom: var(--space-16);
display: flex;
justify-content: center;
}
.success-taj-3d {
width: 80px;
height: 80px;
position: relative;
animation: rotateTrophy 3s infinite linear;
}
.success-dome {
width: 50px;
height: 50px;
background-color: var(--monument-white);
border-radius: 50% 50% 0 0;
position: absolute;
top: 10px;
left: 15px;
}
.success-base {
width: 70px;
height: 20px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 5px;
}
.success-close {
margin-top: var(--space-16);
width: 100%;
}
/* Animations */
@keyframes floatMonument {
0%, 100% {
transform: rotateX(15deg) rotateY(20deg) translateY(0px);
}
50% {
transform: rotateX(15deg) rotateY(20deg) translateY(-10px);
}
}
@keyframes pulseGlow {
0% {
opacity: 0.6;
transform: rotateX(90deg) translateZ(-10px) scale(1);
}
100% {
opacity: 0.8;
transform: rotateX(90deg) translateZ(-10px) scale(1.1);
}
}
@keyframes counterBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes newsletterFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-container {
flex-direction: column;
gap: var(--space-24);
}
.newsletter-stats {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-form-wrapper {
padding: var(--space-20);
}
.newsletter-section {
padding: var(--space-24) var(--space-12);
}
}
/* Newsletter Subscription Section */
.newsletter-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.newsletter-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.newsletter-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.newsletter-orb-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 10%;
left: 5%;
animation: orbPulse 12s infinite alternate;
}
.newsletter-orb-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 15%;
right: 10%;
animation: orbPulse 15s infinite alternate 3s;
}
.newsletter-orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 50%;
right: 30%;
animation: orbPulse 10s infinite alternate 6s;
}
.newsletter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--space-32);
align-items: center;
opacity: 0;
transform: translateY(50px);
transition: var(--transition-medium);
}
.newsletter-container.visible {
opacity: 1;
transform: translateY(0);
}
.newsletter-form-wrapper {
flex: 2;
background-color: rgba(var(--color-surface-rgb), 0.95);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Form Monument Scene */
.form-monument-scene {
display: flex;
justify-content: center;
margin-bottom: var(--space-24);
perspective: var(--3d-perspective);
}
.subscription-monument {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
animation: floatMonument 6s infinite ease-in-out;
}
.subscription-taj {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(20deg);
}
.subscription-dome {
width: 60px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
top: 20px;
left: 30px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-base {
width: 100px;
height: 30px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 10px;
transform: translateZ(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.subscription-minarets .minaret {
width: 8px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.subscription-glow {
position: absolute;
width: 120%;
height: 30px;
bottom: -15px;
left: -10%;
background: radial-gradient(ellipse at center,
rgba(var(--color-primary-rgb), 0.6) 0%,
rgba(var(--color-primary-rgb), 0) 70%);
filter: blur(8px);
transform: rotateX(90deg) translateZ(-10px);
animation: pulseGlow 4s infinite alternate;
}
/* Newsletter Form */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.newsletter-input-group {
position: relative;
}
.input-container {
position: relative;
}
.newsletter-input {
width: 100%;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
font-size: var(--font-size-lg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-background);
color: var(--color-text);
transition: all var(--transition-fast);
position: relative;
z-index: 2;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}
.newsletter-input:focus + .newsletter-label,
.newsletter-input:not(:placeholder-shown) + .newsletter-label {
transform: translateY(-35px) scale(0.85);
color: var(--color-primary);
background-color: var(--color-background);
padding: 0 var(--space-8);
}
.newsletter-label {
position: absolute;
left: var(--space-20);
top: var(--space-16);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
pointer-events: none;
transition: all var(--transition-fast);
transform-origin: left center;
}
.newsletter-preferences {
margin: var(--space-16) 0;
}
.preference-options {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-12);
}
.preference-option {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
transition: var(--transition-fast);
}
.preference-option:hover {
transform: translateX(5px);
}
.preference-option input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
position: relative;
transition: var(--transition-fast);
}
.preference-option input[type="checkbox"]:checked + .checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.preference-option input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.newsletter-btn {
position: relative;
padding: var(--space-16) var(--space-24);
font-size: var(--font-size-lg);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-fast);
}
.newsletter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.3);
}
.newsletter-stats {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.stat-card {
background-color: rgba(var(--color-surface-rgb), 0.9);
border-radius: var(--radius-lg);
padding: var(--space-20);
text-align: center;
border: 1px solid var(--color-card-border);
backdrop-filter: blur(10px);
transition: var(--transition-fast);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-8);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.newsletter-privacy {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: center;
margin-top: var(--space-8);
}
/* Success Modal */
.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.success-modal.active {
display: flex;
}
.success-content {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-32);
text-align: center;
max-width: 400px;
width: 90%;
}
.success-monument {
margin-bottom: var(--space-16);
display: flex;
justify-content: center;
}
.success-taj-3d {
width: 80px;
height: 80px;
position: relative;
animation: rotateTrophy 3s infinite linear;
}
.success-dome {
width: 50px;
height: 50px;
background-color: var(--monument-white);
border-radius: 50% 50% 0 0;
position: absolute;
top: 10px;
left: 15px;
}
.success-base {
width: 70px;
height: 20px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 5px;
}
.success-close {
margin-top: var(--space-16);
width: 100%;
}
/* Animations */
@keyframes floatMonument {
0%, 100% {
transform: rotateX(15deg) rotateY(20deg) translateY(0px);
}
50% {
transform: rotateX(15deg) rotateY(20deg) translateY(-10px);
}
}
@keyframes pulseGlow {
0% {
opacity: 0.6;
transform: rotateX(90deg) translateZ(-10px) scale(1);
}
100% {
opacity: 0.8;
transform: rotateX(90deg) translateZ(-10px) scale(1.1);
}
}
@keyframes counterBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes newsletterFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-container {
flex-direction: column;
gap: var(--space-24);
}
.newsletter-stats {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-form-wrapper {
padding: var(--space-20);
}
.newsletter-section {
padding: var(--space-24) var(--space-12);
}
}
/* Newsletter Subscription Section */
.newsletter-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.newsletter-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.newsletter-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.newsletter-orb-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 10%;
left: 5%;
animation: orbPulse 12s infinite alternate;
}
.newsletter-orb-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 15%;
right: 10%;
animation: orbPulse 15s infinite alternate 3s;
}
.newsletter-orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 50%;
right: 30%;
animation: orbPulse 10s infinite alternate 6s;
}
.newsletter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--space-32);
align-items: center;
opacity: 0;
transform: translateY(50px);
transition: var(--transition-medium);
}
.newsletter-container.visible {
opacity: 1;
transform: translateY(0);
}
.newsletter-form-wrapper {
flex: 2;
background-color: rgba(var(--color-surface-rgb), 0.95);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Form Monument Scene */
.form-monument-scene {
display: flex;
justify-content: center;
margin-bottom: var(--space-24);
perspective: var(--3d-perspective);
}
.subscription-monument {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
animation: floatMonument 6s infinite ease-in-out;
}
.subscription-taj {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(20deg);
}
.subscription-dome {
width: 60px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
top: 20px;
left: 30px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-base {
width: 100px;
height: 30px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 10px;
transform: translateZ(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.subscription-minarets .minaret {
width: 8px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.subscription-glow {
position: absolute;
width: 120%;
height: 30px;
bottom: -15px;
left: -10%;
background: radial-gradient(ellipse at center,
rgba(var(--color-primary-rgb), 0.6) 0%,
rgba(var(--color-primary-rgb), 0) 70%);
filter: blur(8px);
transform: rotateX(90deg) translateZ(-10px);
animation: pulseGlow 4s infinite alternate;
}
/* Newsletter Form */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.newsletter-input-group {
position: relative;
}
.input-container {
position: relative;
}
.newsletter-input {
width: 100%;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
font-size: var(--font-size-lg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-background);
color: var(--color-text);
transition: all var(--transition-fast);
position: relative;
z-index: 2;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}
.newsletter-input:focus + .newsletter-label,
.newsletter-input:not(:placeholder-shown) + .newsletter-label {
transform: translateY(-35px) scale(0.85);
color: var(--color-primary);
background-color: var(--color-background);
padding: 0 var(--space-8);
}
.newsletter-label {
position: absolute;
left: var(--space-20);
top: var(--space-16);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
pointer-events: none;
transition: all var(--transition-fast);
transform-origin: left center;
}
.newsletter-preferences {
margin: var(--space-16) 0;
}
.preference-options {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-12);
}
.preference-option {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
transition: var(--transition-fast);
}
.preference-option:hover {
transform: translateX(5px);
}
.preference-option input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
position: relative;
transition: var(--transition-fast);
}
.preference-option input[type="checkbox"]:checked + .checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.preference-option input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.newsletter-btn {
position: relative;
padding: var(--space-16) var(--space-24);
font-size: var(--font-size-lg);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-fast);
}
.newsletter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.3);
}
.newsletter-stats {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.stat-card {
background-color: rgba(var(--color-surface-rgb), 0.9);
border-radius: var(--radius-lg);
padding: var(--space-20);
text-align: center;
border: 1px solid var(--color-card-border);
backdrop-filter: blur(10px);
transition: var(--transition-fast);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-8);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.newsletter-privacy {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: center;
margin-top: var(--space-8);
}
/* Success Modal */
.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.success-modal.active {
display: flex;
}
.success-content {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-32);
text-align: center;
max-width: 400px;
width: 90%;
}
.success-monument {
margin-bottom: var(--space-16);
display: flex;
justify-content: center;
}
.success-taj-3d {
width: 80px;
height: 80px;
position: relative;
animation: rotateTrophy 3s infinite linear;
}
.success-dome {
width: 50px;
height: 50px;
background-color: var(--monument-white);
border-radius: 50% 50% 0 0;
position: absolute;
top: 10px;
left: 15px;
}
.success-base {
width: 70px;
height: 20px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 5px;
}
.success-close {
margin-top: var(--space-16);
width: 100%;
}
/* Animations */
@keyframes floatMonument {
0%, 100% {
transform: rotateX(15deg) rotateY(20deg) translateY(0px);
}
50% {
transform: rotateX(15deg) rotateY(20deg) translateY(-10px);
}
}
@keyframes pulseGlow {
0% {
opacity: 0.6;
transform: rotateX(90deg) translateZ(-10px) scale(1);
}
100% {
opacity: 0.8;
transform: rotateX(90deg) translateZ(-10px) scale(1.1);
}
}
@keyframes counterBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes newsletterFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-container {
flex-direction: column;
gap: var(--space-24);
}
.newsletter-stats {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-form-wrapper {
padding: var(--space-20);
}
.newsletter-section {
padding: var(--space-24) var(--space-12);
}
}
/* Newsletter Subscription Section */
.newsletter-section {
padding: var(--space-32) var(--space-16);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.newsletter-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.newsletter-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.newsletter-orb-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #1FB8CD, #5D878F);
top: 10%;
left: 5%;
animation: orbPulse 12s infinite alternate;
}
.newsletter-orb-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #FFC185, #D2BA4C);
bottom: 15%;
right: 10%;
animation: orbPulse 15s infinite alternate 3s;
}
.newsletter-orb-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #B4413C, #964325);
top: 50%;
right: 30%;
animation: orbPulse 10s infinite alternate 6s;
}
.newsletter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--space-32);
align-items: center;
opacity: 0;
transform: translateY(50px);
transition: var(--transition-medium);
}
.newsletter-container.visible {
opacity: 1;
transform: translateY(0);
}
.newsletter-form-wrapper {
flex: 2;
background-color: rgba(var(--color-surface-rgb), 0.95);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Form Monument Scene */
.form-monument-scene {
display: flex;
justify-content: center;
margin-bottom: var(--space-24);
perspective: var(--3d-perspective);
}
.subscription-monument {
position: relative;
width: 120px;
height: 120px;
transform-style: preserve-3d;
animation: floatMonument 6s infinite ease-in-out;
}
.subscription-taj {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(20deg);
}
.subscription-dome {
width: 60px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
top: 20px;
left: 30px;
border-radius: 50% 50% 0 0;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-base {
width: 100px;
height: 30px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 10px;
transform: translateZ(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.subscription-minarets {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.subscription-minarets .minaret {
width: 8px;
height: 80px;
background-color: var(--monument-white);
position: absolute;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.subscription-glow {
position: absolute;
width: 120%;
height: 30px;
bottom: -15px;
left: -10%;
background: radial-gradient(ellipse at center,
rgba(var(--color-primary-rgb), 0.6) 0%,
rgba(var(--color-primary-rgb), 0) 70%);
filter: blur(8px);
transform: rotateX(90deg) translateZ(-10px);
animation: pulseGlow 4s infinite alternate;
}
/* Newsletter Form */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.newsletter-input-group {
position: relative;
}
.input-container {
position: relative;
}
.newsletter-input {
width: 100%;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
font-size: var(--font-size-lg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-background);
color: var(--color-text);
transition: all var(--transition-fast);
position: relative;
z-index: 2;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.15);
}
.newsletter-input:focus + .newsletter-label,
.newsletter-input:not(:placeholder-shown) + .newsletter-label {
transform: translateY(-35px) scale(0.85);
color: var(--color-primary);
background-color: var(--color-background);
padding: 0 var(--space-8);
}
.newsletter-label {
position: absolute;
left: var(--space-20);
top: var(--space-16);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
pointer-events: none;
transition: all var(--transition-fast);
transform-origin: left center;
}
.newsletter-preferences {
margin: var(--space-16) 0;
}
.preference-options {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-12);
}
.preference-option {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
transition: var(--transition-fast);
}
.preference-option:hover {
transform: translateX(5px);
}
.preference-option input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
position: relative;
transition: var(--transition-fast);
}
.preference-option input[type="checkbox"]:checked + .checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.preference-option input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.newsletter-btn {
position: relative;
padding: var(--space-16) var(--space-24);
font-size: var(--font-size-lg);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-fast);
}
.newsletter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.3);
}
.newsletter-stats {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.stat-card {
background-color: rgba(var(--color-surface-rgb), 0.9);
border-radius: var(--radius-lg);
padding: var(--space-20);
text-align: center;
border: 1px solid var(--color-card-border);
backdrop-filter: blur(10px);
transition: var(--transition-fast);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-8);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.newsletter-privacy {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: center;
margin-top: var(--space-8);
}
/* Success Modal */
.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.success-modal.active {
display: flex;
}
.success-content {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-32);
text-align: center;
max-width: 400px;
width: 90%;
}
.success-monument {
margin-bottom: var(--space-16);
display: flex;
justify-content: center;
}
.success-taj-3d {
width: 80px;
height: 80px;
position: relative;
animation: rotateTrophy 3s infinite linear;
}
.success-dome {
width: 50px;
height: 50px;
background-color: var(--monument-white);
border-radius: 50% 50% 0 0;
position: absolute;
top: 10px;
left: 15px;
}
.success-base {
width: 70px;
height: 20px;
background-color: var(--monument-white);
position: absolute;
bottom: 0;
left: 5px;
}
.success-close {
margin-top: var(--space-16);
width: 100%;
}
/* Animations */
@keyframes floatMonument {
0%, 100% {
transform: rotateX(15deg) rotateY(20deg) translateY(0px);
}
50% {
transform: rotateX(15deg) rotateY(20deg) translateY(-10px);
}
}
@keyframes pulseGlow {
0% {
opacity: 0.6;
transform: rotateX(90deg) translateZ(-10px) scale(1);
}
100% {
opacity: 0.8;
transform: rotateX(90deg) translateZ(-10px) scale(1.1);
}
}
@keyframes counterBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes newsletterFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.newsletter-container {
flex-direction: column;
gap: var(--space-24);
}
.newsletter-stats {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-form-wrapper {
padding: var(--space-20);
}
.newsletter-section {
padding: var(--space-24) var(--space-12);
}
}
/*Team Section*/
:root {
/* Spacing */
--space-8: 8px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
/* Colors */
--color-primary: #21808d;
--color-surface: #fff;
--color-card-border: #e0e0e0;
--color-text-secondary: #666;
--color-success: #2ecc71;
--color-error: #e74c3c;
/* Shadows */
--shadow-md: 0 2px 12px rgba(33, 128, 141, 0.08);
--shadow-lg: 0 4px 24px rgba(33, 128, 141, 0.16);
/* Font sizes */
--font-size-sm: 0.95rem;
--font-size-base: 1.08rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-3xl: 2.2rem;
/* Font weights */
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* Border radius */
--radius-lg: 16px;
--radius-full: 999px;
/* Transition */
--transition-medium: all 0.4s cubic-bezier(.4,0,.2,1);
}
/* Team Credits Section CSS */
.credits-section {
padding: var(--space-32);
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(33, 128, 141, 0.05) 0%,
rgba(255, 193, 133, 0.05) 50%,
rgba(144, 68, 84, 0.05) 100%);
}
.section-header {
text-align: center;
margin-bottom: var(--space-32);
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
}
.section-header.visible {
opacity: 1;
transform: translateY(0);
}
.section-title {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-8);
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: var(--color-primary);
border-radius: var(--radius-full);
}
.section-subtitle {
color: var(--color-text-secondary);
max-width: 800px;
margin: var(--space-16) auto 0;
}
.team-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-32);
max-width: 1200px;
margin: 0 auto;
}
.team-member {
width: 280px;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-card-border);
transition: var(--transition-medium);
opacity: 0;
transform: translateY(50px);
}
.team-member.visible {
opacity: 1;
transform: translateY(0);
}
.team-member:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.image-container {
height: 280px;
overflow: hidden;
position: relative;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.team-member:hover .image-container img {
transform: scale(1.05);
}
.member-details {
padding: var(--space-16);
text-align: center;
position: relative;
}
.member-details::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, var(--color-primary), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.team-member:hover .member-details::before {
transform: scaleX(1);
}
.member-name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: 5px;
color: var(--color-primary);
}
.member-role {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin-bottom: 10px;
}
.member-institute {
font-size: var(--font-size-sm);
font-style: italic;
}
.professor-section {
margin-top: var(--space-32);
text-align: center;
opacity: 0;
transform: translateY(30px);
transition: var(--transition-medium);
transition-delay: 0.2s;
}
.professor-section.visible {
opacity: 1;
transform: translateY(0);
}
.professor-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-16);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
}
.professor-card {
width: 320px;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-card-border);
border-left: 4px solid var(--color-primary);
margin: 0 auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.professor-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.professor-image {
height: 320px;
overflow: hidden;
position: relative;
}
.professor-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.professor-card:hover .professor-image img {
transform: scale(1.05);
}
.professor-details {
padding: var(--space-16);
text-align: center;
}
.professor-name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: 5px;
color: var(--color-primary);
}
.professor-role {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
}
@media (max-width: 768px) {
.team-container {
gap: var(--space-24);
}
.team-member {
width: 100%;
max-width: 320px;
}
.professor-card {
width: 100%;
max-width: 320px;
}
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes buildMonument {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes rotateMap {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.particle {
position: absolute;
background: var(--particle-color-1);
border-radius: 50%;
pointer-events: none;
}
/* Medieval Temple Model */
.medieval-temple {
top: 25%;
left: 15%;
animation: float 5s infinite ease-in-out 0.5s;
}
.temple-model {
transform-style: preserve-3d;
}
.temple-base {
width: 70px;
height: 30px;
background-color: var(--monument-grey);
position: absolute;
bottom: 0;
left: 5px;
}
.temple-shikhara {
width: 40px;
height: 80px;
background-color: var(--monument-red);
position: absolute;
bottom: 30px;
left: 20px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.temple-mandapa {
width: 80px;
height: 20px;
background-color: var(--monument-grey);
position: absolute;
bottom: 10px;
left: 0;
}
/* Colonial Building Model */
.colonial-building {
top: 35%;
left: 65%;
animation: float 5s infinite ease-in-out 1.5s;
}
.colonial-model {
transform-style: preserve-3d;
}
.colonial-base {
width: 90px;
height: 40px;
background-color: var(--monument-red);
position: absolute;
bottom: 0;
left: 0;
}
.colonial-dome {
width: 50px;
height: 60px;
background-color: var(--monument-white);
position: absolute;
bottom: 40px;
left: 20px;
border-radius: 50% 50% 0 0;
}
.colonial-tower {
width: 15px;
height: 70px;
background-color: var(--monument-red);
position: absolute;
bottom: 40px;
left: 75px;
}
/* Modern Building Model */
.modern-building {
top: 45%;
left: 40%;
animation: float 5s infinite ease-in-out 2.5s;
}
.modern-model {
transform-style: preserve-3d;
}
.modern-base {
width: 60px;
height: 80px;
background: linear-gradient(135deg, #708090, #A9A9A9);
position: absolute;
bottom: 0;
left: 10px;
}
.modern-structure {
width: 80px;
height: 60px;
background: linear-gradient(135deg, #2F4F4F, #708090);
position: absolute;
bottom: 20px;
left: 0;
}
.modern-facade {
width: 70px;
height: 50px;
background: repeating-linear-gradient(
90deg,
rgba(255,255,255,0.2) 0px,
rgba(255,255,255,0.2) 5px,
transparent 5px,
transparent 10px
);
position: absolute;
bottom: 25px;
left: 5px;
}
/* Enhanced Animation */
@keyframes float {
0%, 100% {
transform: translateY(0px) rotateY(0deg);
}
25% {
transform: translateY(-8px) rotateY(90deg);
}
50% {
transform: translateY(-15px) rotateY(180deg);
}
75% {
transform: translateY(-8px) rotateY(270deg);
}
}
/* Hover Effects for Interactive Elements */
.dynasty-info:hover .floating-monument {
transform: translateZ(30px) scale(1.2);
transition: all 0.3s ease;
}
/* Audio Panel */
.audio-panel {
position: fixed;
bottom: var(--space-32);
right: var(--space-32);
width: 300px;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-lg);
padding: var(--space-16);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--transition-fast);
}
.audio-panel.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.audio-controls {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.volume-control {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.volume-control label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.audio-options {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.audio-option {
display: flex;
align-items: center;
gap: var(--space-8);
}
.audio-option label {
font-size: var(--font-size-sm);
}
/* Animation Keyframes */
@keyframes loadingProgress {
0% { width: 0; }
60% { width: 80%; }
100% { width: 100%; }
}
@keyframes buildMonument {
0% {
opacity: 0;
transform: translateY(20px) rotateX(45deg) rotateZ(0deg);
}
20% {
opacity: 1;
transform: translateY(0) rotateX(45deg) rotateZ(0deg);
}
90%, 100% {
opacity: 1;
transform: translateY(0) rotateX(45deg) rotateZ(0deg);
}
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
@keyframes shadowPulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.8); }
}
@keyframes slideUpFade {
0% { transform: translateY(50px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes rotateMap {
0% { transform: rotateY(0deg) rotateX(10deg); }
100% { transform: rotateY(360deg) rotateX(10deg); }
}
@keyframes scrollLine {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes orbPulse {
0% { transform: scale(1); opacity: 0.4; }
50% { transform: scale(1.1); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.4; }
}
@keyframes rotateBlocks {
0% { transform: rotateY(0deg) rotateX(20deg); }
100% { transform: rotateY(360deg) rotateX(20deg); }
}
@keyframes pulsateRing {
0% { transform: translate(-50%, -50%) rotateX(70deg) scale(1); opacity: 0.7; }
50% { transform: translate(-50%, -50%) rotateX(70deg) scale(1.1); opacity: 0.4; }
100% { transform: translate(-50%, -50%) rotateX(70deg) scale(1); opacity: 0.7; }
}
@keyframes pulseOpacity {
0%, 100% { opacity: 0; }
50% { opacity: 0.8; }
}
@keyframes moveArrow {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-50%) translateX(10px); }
}
@keyframes wobbleStructure {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
75% { transform: rotate(-1deg); }
}
@keyframes loadIncrease {
0%, 100% { width: 30%; }
50% { width: 80%; }
}
@keyframes rotateBlock {
0% { transform: rotateY(0deg) rotateX(20deg); }
100% { transform: rotateY(360deg) rotateX(20deg); }
}
@keyframes pulseTrophy {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.1); }
}
@keyframes rotateTrophy {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
/* Utility Classes */
.hidden {
display: none !important;
}
/* Media Queries */
@media (max-width: 1024px) {
.hero-content {
flex-direction: column;
gap: var(--space-32);
}
.hero-text {
text-align: center;
}
.hero-actions {
justify-content: center;
}
.analysis-display {
flex-direction: column;
}
.test-environment {
flex-direction: column;
}
.time-portal-viewer {
flex-direction: column;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.monuments-grid,
.games-grid,
.achievements-grid {
gap: var(--space-16);
}
.monument-card,
.game-card {
width: 100%;
max-width: 350px;
}
.game-viewport {
flex: 1;
}
.game-sidebar {
display: none;
}
}
.is-code-btn {
background-color: var(--color-primary) !important;
color: var(--color-btn-primary-text) !important;
font-weight: var(--font-weight-medium);
border: 2px solid var(--color-primary);
position: relative;
overflow: hidden;
}
.is-code-btn:hover {
background-color: var(--color-primary-hover) !important;
border-color: var(--color-primary-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
.is-code-standards {
margin-top: var(--space-16);
padding: var(--space-16);
background-color: var(--color-secondary);
border-radius: var(--radius-sm);
border-left: 4px solid var(--color-primary);
}
.standard-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border);
}
.standard-label {
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
font-size: var(--font-size-xs);
min-width: 80px;
}
.lime-mortar-cube,
.lime-mortar-cube::before,
.lime-mortar-cube::after {
background-color: #E8E4D8;
}
.egg-white-lime-cube,
.egg-white-lime-cube::before,
.egg-white-lime-cube::after {
background-color: #F5F5F0;
}
.honey-lime-cube,
.honey-lime-cube::before,
.honey-lime-cube::after {
background-color: #E6D9B8;
}
.coconut-fiber-lime-cube,
.coconut-fiber-lime-cube::before,
.coconut-fiber-lime-cube::after {
background-color: #D9C9A3;
}
.teak-wood-cube,
.teak-wood-cube::before,
.teak-wood-cube::after {
background-color: #B68D4C;
}
.sample-3d.lime-mortar-3d,
.sample-3d.lime-mortar-3d::before,
.sample-3d.lime-mortar-3d::after {
background-color: #E8E4D8;
}
.sample-3d.egg-white-lime-3d,
.sample-3d.egg-white-lime-3d::before,
.sample-3d.egg-white-lime-3d::after {
background-color: #F5F5F0;
}
.sample-3d.honey-lime-3d,
.sample-3d.honey-lime-3d::before,
.sample-3d.honey-lime-3d::after {
background-color: #E6D9B8;
}
.sample-3d.coconut-fiber-lime-3d,
.sample-3d.coconut-fiber-lime-3d::before,
.sample-3d.coconut-fiber-lime-3d::after {
background-color: #D9C9A3;
}
.sample-3d.teak-wood-3d,
.sample-3d.teak-wood-3d::before,
.sample-3d.teak-wood-3d::after {
background-color: #B68D4C;
}
.compliance-indicator {
display: inline-flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
margin-left: var(--space-8);
}
.compliance-indicator.compliant {
background-color: rgba(var(--color-success-rgb), 0.1);
color: var(--color-success);
border: 1px solid rgba(var(--color-success-rgb), 0.3);
}