/* Obecné nastavení */
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
}
#calculateDistancesBtn {
display: none;
}
#map-container {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
}
/* Ensures Pixi.js canvas is full-screen */
#pixi-canvas {
display: block;
width: 100%;
height: 100%;
/* Maintain aspect ratio */
object-fit: cover;
/* Ensure the map maintains aspect ratio */
}
/* UI Overlay for buttons */
.ui-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Allows interaction with map */
}
.clickable {
cursor: pointer;
}
h1 {
font-family: "Inknut Antiqua";
font-weight: 300;
font-size: 48px;
text-transform: uppercase;
line-height: 150%;
}
h2 {
font-family: "Inknut Antiqua";
font-weight: 600;
font-size: 20px;
margin: 0;
line-height: 150%;
}
p {
font-family: "Inknut Antiqua";
font-weight: 300;
font-size: 16px;
margin: 0;
line-height: 150%;
}
input {
font-family: "Maitree", serif;
font-weight: 500;
font-size: 20px;
box-sizing: border-box;
height: 44px;
border: none;
padding: 0 10px 0 10px;
border-radius: 10px;
width: 100%;
}
.button-custom {
background: #0F141F;
font-family: "Inknut Antiqua";
font-weight: 300;
font-size: 16px;
line-height: 150%;
color: #FFC58E;
padding: 10px 16px 10px 16px;
border-radius: 10px;
border: none;
width: 100%;
max-width: 280px;
text-transform: uppercase;
white-space: nowrap;
transition: background 0.3s ease;
}
.button-custom:active {
background: #3A4458;
}
.button-secondary {
display: flex;
background: rgba(255, 236, 219, 0.97);
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
font-family: "Inknut Antiqua";
font-weight: 300;
font-size: 16px;
color: #0F141F;
border-radius: 10px;
border: none;
text-transform: uppercase;
white-space: nowrap;
width: 48px;
height: 48px;
justify-content: center;
align-items: center;
transition: background 0.3s ease;
}
.button-secondary:active {
background: #FFF9F3;
}
.secondary-button-image {
background-repeat: no-repeat;
background-size: cover;
height: 30px;
width: 30px;
}
.button-center {
background-image: url('../resources/images/center.svg');
}
.button-zoom-in {
background-image: url('../resources/images/zoom-in.svg');
}
.button-zoom-out {
background-image: url('../resources/images/zoom-out.svg');
}
#progress-info {
display: flex;
box-sizing: border-box;
width: 100%;
flex-direction: row;
gap: 16px;
}
.main-map-controls {
position: fixed;
box-sizing: border-box;
bottom: 16px;
/* Adjust as needed */
left: 50%;
transform: translateX(-50%);
/* Centers it horizontally */
z-index: 100;
width: 100%;
max-width: 600px;
/* Ensures it doesn’t grow too large */
display: flex;
justify-content: center;
/* Centers child elements if needed */
padding: 0 16px 0 16px;
pointer-events: auto;
}
.actions {
position: fixed;
box-sizing: border-box;
top: 16px;
/* Adjust as needed */
right: 16px;
z-index: 100;
width: fit-content;
display: flex;
justify-content: center;
/* Centers child elements if needed */
padding: 0 16px 0 16px;
gap: 10px;
pointer-events: auto;
}
.controls {
display: flex;
box-sizing: border-box;
width: 100%;
max-width: 1000px;
flex-direction: column;
padding: 16px;
background-color: rgba(255, 236, 219, 0.97);
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
border-radius: 16px;
gap: 16px;
color: #0F141F;
}
.controls-text {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.controls-text p {
font-family: "Maitree", serif;
font-weight: 500;
font-size: 20px;
text-align: right;
}
.section-intro {
display: flex;
background: linear-gradient(#DEC359, #BB5F2E);
width: 100%;
row-gap: 50px;
align-items: center;
flex-direction: column;
padding-top: 100px;
}
.logo {
aspect-ratio: 1 / 0.257;
background-image: url("../resources/images/logo.png");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
max-width: 700px;
}
.intro-image {
aspect-ratio: 1 / 0.23;
background-image: url("../resources/images/bg-spolecenstvo.png");
background-size: contain;
width: 100%;
max-width: 1000px;
}
.section-characters {
display: flex;
box-sizing: border-box;
background-color: #0F141F;
width: 100%;
row-gap: 50px;
align-items: center;
flex-direction: column;
padding: 100px 16px 100px 16px;
}
.section-characters h1 {
color: #FFC58E;
}
.card-list {
display: flex;
box-sizing: border-box;
flex-direction: row;
flex-wrap: wrap;
gap: 32px;
width: 100%;
max-width: 1920px;
justify-content: center;
}
.card {
display: flex;
color: #0F141F;
flex-direction: column;
width: 300px;
background-color: #FFC58E;
border-radius: 16px;
padding: 16px;
row-gap: 16px;
}
.progress-text {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.progress-text p {
font-family: "Maitree", serif;
font-weight: 500;
font-size: 20px;
}
.section-gate {
display: flex;
box-sizing: border-box;
background-color: #0F141F;
width: 100%;
padding: 0px 16px 0px 16px;
justify-content: center;
}
.gate {
aspect-ratio: 1 / 1.027;
background-image: url("../resources/images/gate.png");
background-size: contain;
width: 100%;
max-width: 700px;
background-size: contain;
}
.section-achievements {
display: flex;
box-sizing: border-box;
background-color: #FFC58E;
width: 100%;
row-gap: 50px;
align-items: center;
flex-direction: column;
padding: 100px 16px 100px 16px;
}
.section-achievements h1 {
color: #0F141F;
}
.section-mordor {
display: flex;
background: linear-gradient(#FFC58E, #AE2900);
width: 100%;
row-gap: 50px;
align-items: center;
flex-direction: column;
}
.mordor {
aspect-ratio: 1 / 0.8;
background-image: url("../resources/images/mordor.png");
background-size: contain;
width: 100%;
max-width: 1000px;
background-size: contain;
}
.footer {
display: flex;
box-sizing: border-box;
background-color: #0F141F;
padding: 100px 16px 100px 16px;
width: 100%;
justify-content: center;
color: #FFC58E;
flex-direction: column;
gap: 16px;
align-items: center;
}
.footer-actions {
display: flex;
flex-direction: row;
gap: 16px;
width: 100%;
justify-content: center;
}
.logout-button {
color: #FFC58E;
font-family: "Inknut Antiqua";
font-weight: 300;
font-size: 16px;
margin: 0;
line-height: 150%;
text-decoration: underline;
background-color: transparent;
}
.notification {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
max-width: 300px;
width: 100%;
padding: 16px;
text-align: center;
z-index: 1000;
font-family: "Inknut Antiqua";
font-weight: 300;
font-size: 16px;
line-height: 150%;
background-color: rgba(255, 236, 219, 0.97);
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
border-radius: 16px;
gap: 16px;
color: #0F141F;
animation: fadeIn 0.3s ease-in-out, fadeOut 0.5s ease-in-out 6s forwards;
}
/* Fade in and out animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
to {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
}
@media only screen and (max-width: 600px) {
.controls-text {
flex-direction: column;
}
#progress-info {
flex-direction: column;
gap: 16px;
}
.button-custom {
max-width: none;
}
h1 {
font-size: 26px;
}
.section-characters {
row-gap: 30px;
padding: 50px 16px 50px 16px;
}
.section-achievements {
row-gap: 30px;
padding: 50px 16px 50px 16px;
}
}