/* ------------------------
Global and Base Styles
------------------------- */
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
font-family: 'League Spartan', sans-serif;
background-color: #2D6056;
background-image: url('/static/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-blend-mode: multiply; /* darker result: fixes the color blending problem */
cursor: url('data:image/svg+xml;utf8,') 16 16, auto;
}
/* Chess-themed cursor for interactive elements */
button, a, .nav-link, .stat-link, .download-button, .share-button, #submitBtn, #loadDashboardBtn {
cursor: url('data:image/svg+xml;utf8,') 16 16, pointer;
}
/* Special cursor for the main generate button */
.cta-button {
cursor: url('data:image/svg+xml;utf8,') 18 18, pointer;
}
/* Cursor trail effect */
.cursor-trail {
position: fixed;
width: 6px;
height: 6px;
background: radial-gradient(circle, rgba(67, 233, 123, 0.9) 0%, rgba(67, 233, 123, 0.6) 50%, transparent 100%);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: trailFade 2.5s ease-out forwards;
}
@keyframes trailFade {
0% {
opacity: 1;
transform: scale(1.2);
}
20% {
opacity: 0.8;
transform: scale(1);
}
60% {
opacity: 0.4;
transform: scale(0.8);
}
100% {
opacity: 0;
transform: scale(0.2);
}
}
/* Checkmate trail elements */
.checkmate-trail {
position: fixed;
width: 12px;
height: 12px;
pointer-events: none;
z-index: 9998;
animation: checkmateTrailFade 3s ease-out forwards;
}
@keyframes checkmateTrailFade {
0% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
30% {
opacity: 0.8;
transform: scale(1.2) rotate(90deg);
}
70% {
opacity: 0.3;
transform: scale(0.8) rotate(270deg);
}
100% {
opacity: 0;
transform: scale(0.3) rotate(360deg);
}
}
/* Checkmate symbols */
.checkmate-king {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.checkmate-crown {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.checkmate-sword {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.checkmate-star {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
/* Click effect */
.click-effect {
position: fixed;
width: 20px;
height: 20px;
background: radial-gradient(circle, rgba(67, 233, 123, 1) 0%, rgba(67, 233, 123, 0.6) 50%, transparent 100%);
border-radius: 50%;
pointer-events: none;
z-index: 10000;
animation: clickRipple 0.6s ease-out forwards;
}
@keyframes clickRipple {
0% {
opacity: 1;
transform: scale(0.5);
}
50% {
opacity: 0.7;
transform: scale(1.5);
}
100% {
opacity: 0;
transform: scale(2.5);
}
}
/* Chess piece click effects */
.chess-piece-click {
position: fixed;
width: 24px;
height: 24px;
pointer-events: none;
z-index: 10001;
animation: chessPieceEmit 1.2s ease-out forwards;
}
@keyframes chessPieceEmit {
0% {
opacity: 1;
transform: scale(0.3) translateY(0px);
}
30% {
opacity: 1;
transform: scale(1.2) translateY(-20px);
}
100% {
opacity: 0;
transform: scale(0.8) translateY(-40px);
}
}
/* Individual chess piece styles */
.chess-king {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.chess-queen {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.chess-bishop {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.chess-knight {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.chess-rook {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.chess-pawn {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
/* Knight trail effect */
.knight-trail {
position: fixed;
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,') no-repeat center;
pointer-events: none;
z-index: 9998;
animation: knightTrailFade 1.2s ease-out forwards;
}
@keyframes knightTrailFade {
0% {
opacity: 0.8;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 0.4;
transform: scale(0.8) rotate(180deg);
}
100% {
opacity: 0;
transform: scale(0.3) rotate(360deg);
}
}
#background, #overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
pointer-events: none;
}
#overlay {
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
#contentContainer {
overflow-y: visible;
min-height: 100vh;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 16px;
box-sizing: border-box;
}
/* ------------------------
Main Entry Section
------------------------- */
.main-entry {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
}
/* Enhanced Input Styles */
.main-entry input[type="text"],
.main-entry select {
width: 100%;
max-width: 400px;
padding: 20px 24px;
font-family: 'League Spartan', sans-serif;
font-size: 18px;
font-weight: 600;
color: #EEEED5;
background: linear-gradient(135deg, rgba(45, 96, 86, 0.9) 0%, rgba(74, 124, 89, 0.9) 100%);
border: 3px solid rgba(238, 238, 213, 0.3);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
0 4px 16px rgba(238, 238, 213, 0.1),
inset 0 1px 0 rgba(238, 238, 213, 0.2);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
}
.main-entry input[type="text"]:focus,
.main-entry select:focus {
border-color: #EEEED5;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.25),
0 8px 24px rgba(238, 238, 213, 0.2),
inset 0 1px 0 rgba(238, 238, 213, 0.3);
transform: translateY(-2px);
}
.main-entry input[type="text"]:hover,
.main-entry select:hover {
border-color: rgba(238, 238, 213, 0.6);
box-shadow:
0 10px 36px rgba(0, 0, 0, 0.22),
0 6px 20px rgba(238, 238, 213, 0.15),
inset 0 1px 0 rgba(238, 238, 213, 0.25);
}
.main-entry input[type="text"]::placeholder {
color: rgba(238, 238, 213, 0.7);
font-weight: 500;
}
.main-entry select {
cursor: pointer;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 20px center;
padding-right: 50px;
}
.main-entry select option {
background: #2D6056;
color: #EEEED5;
font-weight: 600;
padding: 12px;
}
/* Input container for better spacing */
.input-container {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 400px;
align-items: center;
}
/* Label styling */
.input-label {
color: #EEEED5;
font-family: 'League Spartan', sans-serif;
font-size: 16px;
font-weight: 600;
text-align: center;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Dashboard Button Animations */
@keyframes pulse {
0% { opacity: 0.5; transform: scale(1); }
100% { opacity: 1; transform: scale(1.05); }
}
@keyframes glow {
0% { opacity: 0.2; transform: scale(1); }
100% { opacity: 0.4; transform: scale(1.1); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-8px); }
60% { transform: translateY(-4px); }
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
/* Enhanced Load Dashboard Button Hover Effects */
#loadDashboardBtn:hover {
transform: translateY(-8px) scale(1.05) !important;
box-shadow: 0 16px 60px rgba(45, 96, 86, 0.5), 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(238, 238, 213, 0.3) !important;
background: linear-gradient(135deg, #3a6b5f 0%, #5a8c6a 50%, #3a6b5f 100%) !important;
}
#loadDashboardBtn:active {
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 8px 30px rgba(45, 96, 86, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(238, 238, 213, 0.25) !important;
}
/* ------------------------
Stats Section
------------------------- */
.stats-container {
width: 100%;
max-width: 1600px;
min-height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 20px;
box-sizing: border-box;
position: relative;
z-index: 0;
overflow-x: visible;
}
.background-overlay, .background-overlay-second {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.content-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: grid;
gap: 28px;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
/* ------------------------
Row Layouts
------------------------- */
.row-0, .row-1, .row-2, .row-3 {
display: grid;
width: 100%;
justify-content: center;
gap: 30px;
margin-bottom: 10px;
}
.row-0 {
grid-template-columns: 1fr;
text-align: center;
}
.row-1, .row-2 {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.row-3 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
}
/* ------------------------
Stat Boxes
------------------------- */
.stat-box {
padding: 20px;
background: #EEEED5;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 12px;
box-sizing: border-box;
}
.stat-box.no-bg {
background: none;
box-shadow: none;
align-items: center;
}
.stat-box.center {
text-align: center;
align-items: center;
}
/* ------------------------
Text Styling
------------------------- */
.stat-title, .stat-value, .stat-details, .stat-opponent, .stat-opening {
color: #0A4345;
font-family: 'League Spartan', sans-serif;
line-height: 100%;
}
.stat-title {
font-size: 18.26px;
font-weight: 400;
}
.stat-title.large {
font-size: 26px;
font-weight: 600;
}
.stat-value {
font-size: 32.38px;
font-weight: 700;
}
.stat-details, .stat-opponent, .stat-opening {
font-size: 18px;
font-weight: 700;
}
/* ------------------------
Profile Section
------------------------- */
.profile-stats-container {
display: flex;
align-items: center;
}
.profile-stats-container img {
width: 110px;
height: 110px;
border-radius: 50%;
object-fit: cover;
}
/* Row 0 Custom Layout */
.row-profile {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 1133.87px;
height: 115.46px;
}
/* Header title */
.stats-header-title {
color: #EEEED5;
font-size: 40px;
font-family: 'League Spartan', sans-serif;
font-weight: 500;
line-height: 100%;
text-align: center;
}
/* Profile container (image + ratings) */
.profile-stats-container-custom {
display: flex;
align-items: center;
}
.profile-avatar {
border-radius: 50%;
width: 100px;
height: 100px;
margin-right: 50px;
margin-bottom: 50px;
}
.profile-ratings-row {
display: flex;
gap: 35px;
flex: 1;
margin-bottom: 50px;
}
.profile-rating-box {
flex: 1;
padding: 20px;
border-radius: 8px;
}
/* Images section */
#imagesContainerCustom {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 30px;
margin-top: 100px;
}
.images-header {
color: #EEEED5;
font-size: 40px;
font-family: 'League Spartan', sans-serif;
font-weight: 500;
line-height: 100%;
text-align: center;
}
.images-container img {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: contain;
margin: 20px;
}
/* ------------------------
Images Section
------------------------- */
#imagesContainer {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 100px 0 30px;
width: 100%;
box-sizing: border-box;
}
#imagesContainer img {
max-width: 100%;
border-radius: 12px;
object-fit: contain;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* ------------------------
Download Button
------------------------- */
.download-button {
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: 'League Spartan', sans-serif;
margin: 20px 0;
align-self: center;
position: relative;
z-index: 10;
}
.download-button:hover {
background-color: #45a049;
}
/* Section Title */
.stat-section-header {
color: #EEEED5;
font-size: 40px;
font-family: 'League Spartan', sans-serif;
font-weight: 500;
line-height: 100%;
text-align: center;
margin: 40px 0 20px;
}
/* Special stat box layout */
.stat-box2 {
padding: 20px;
background: #EEEED5;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 12px;
box-sizing: border-box;
}
/* Link inside stat box */
.stat-link {
color: #1b4e7d;
font-weight: bold;
text-decoration: underline;
margin-top: 8px;
}
.stat-link:hover {
color: #0d365f;
}
/* Optional: smaller date styling */
.stat-date {
font-size: 16px;
font-weight: 600;
color: #0A4345;
}
/* ------------------------
Responsive Design
------------------------- */
@media (max-width: 768px) {
.main-entry, .content-container, .stats-container {
padding: 12px;
}
.row-1, .row-2, .row-3 {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stat-title {
font-size: 16px;
}
.stat-value {
font-size: 24px;
}
.stat-details, .stat-opponent, .stat-opening {
font-size: 14px;
}
.stat-box {
padding: 12px;
}
.profile-stats-container img {
width: 90px;
height: 90px;
}
.download-button {
font-size: 14px;
padding: 10px 16px;
}
}
@media (max-width: 480px) {
.row-1, .row-2, .row-3 {
grid-template-columns: 1fr;
}
.content-container, .stats-container {
padding: 10px;
}
.stat-box {
width: 100%;
}
.download-button {
width: 100%;
}
}
/* ------------------------
Images
------------------------- */
img {
max-width: 100%;
height: auto;
border-radius: 8px;
object-fit: contain;
}
/* Navigation Styles */
.nav-link.active {
background-color: rgba(238, 238, 213, 0.2) !important;
border: 2px solid #EEEED5 !important;
}
.nav-link:hover {
background-color: rgba(238, 238, 213, 0.1) !important;
transform: translateY(-2px);
}
/* Page Content Styles */
.page-content {
min-height: calc(100vh - 80px);
padding-top: 20px;
}
/* Responsive Navigation */
@media (max-width: 768px) {
#navigation .nav-link {
font-size: 14px !important;
padding: 8px 10px !important;
}
#navigation {
padding: 10px 0 !important;
}
#navigation > div {
flex-direction: column;
gap: 15px;
}
#contentContainer {
margin-top: 120px !important;
}
}
@media (max-width: 480px) {
#navigation .nav-link {
font-size: 12px !important;
padding: 6px 8px !important;
}
#navigation span {
font-size: 20px !important;
}
#navigation img {
height: 30px !important;
}
}
/* CTA Button Styles */
.cta-button {
width: 100%;
max-width: unset;
height: 44px;
padding: 0 24px;
font-family: 'League Spartan', sans-serif;
font-weight: 700;
font-size: 20px;
color: #EEEED5;
background: linear-gradient(90deg, #4A7C59 0%, #2D6056 100%);
border: none;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(45, 96, 86, 0.15);
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
position: relative;
outline: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.cta-button:hover:not(:disabled), .cta-button:focus:not(:disabled) {
background: linear-gradient(90deg, #2D6056 0%, #4A7C59 100%);
box-shadow: 0 6px 20px rgba(45, 96, 86, 0.22);
transform: translateY(-2px) scale(1.02);
}
.cta-button:active:not(:disabled) {
background: #2D6056;
transform: scale(0.98);
}
.cta-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Spinner for button */
.cta-spinner {
border: 3px solid #EEEED5;
border-top: 3px solid #4A7C59;
border-radius: 50%;
width: 22px;
height: 22px;
animation: spin 0.8s linear infinite;
display: inline-block;
vertical-align: middle;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Top Loading Bar */
#loadingBar {
width: 100%;
height: 8px;
background: transparent;
border-radius: 4px;
margin-top: 8px;
overflow: hidden;
position: relative;
}
.loadingBarFill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #4A7C59 0%, #2D6056 100%);
border-radius: 4px;
transition: width 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
opacity: 0.05;
min-width: 0px;
}