html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(
circle at center,
#031832 0%,
#0d3d69 40%,
#ffffff 85%
);
}
#globe {
width: 100%;
height: 100vh;
}
#globe canvas {
background: transparent !important;
}
/*==================================================
LEGEND
Version: v2.5.8 - Worn Map Style
==================================================*/
#legend {
position: fixed;
bottom: 20px;
left: 20px;
color: rgb(11, 11, 11);
font-family: Georgia, serif;
font-size: 14px;
z-index: 10000;
}
#legend {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 10000;
font-family: 'Special Elite', serif;
font-size: 14px;
}
#legend div:not(.legend-title),
#legend label {
text-shadow:
0 1px 4px white;
}
#legend .legend-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
color: #4a6741;
text-shadow: 0 1px 4px white;
}
#info {
display: none;
position: fixed;
top: 100px;
right: 40px;
width: 300px;
padding: 20px;
background: white);
color: #222;
border-radius: 10px;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 5px 15px rgba(0,0,0,.3);
font-family: Georgia, serif;
z-index: 10000;
}
#book-title {
margin-top: 10px;
margin-bottom: 12px;
font-size: 26px;
color: #3b2f2f;
}
#book-author {
font-style: italic;
color: #6b5b4b;
margin-bottom: 10px;
}
#book-location {
font-weight: bold;
color: #4a6741;
}
#book-description {
line-height: 1.5;
margin-top: 15px;
}
#close-card {
position: absolute;
top: 10px;
right: 15px;
border: none;
background: transparent;
font-size: 20px;
cursor: pointer;
color: #555;
}
#info {
position: fixed;
top: 20px;
right: 20px;
width: 250px;
padding: 20px;
background: white;
color: black;
border: 3px solid black;
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 10000;
}
#amazon-link {
display: inline-block;
margin-top: 20px;
padding: 12px 18px;
background: #c68b3c;
color: white;
text-decoration: none;
border-radius: 25px;
font-family: Arial, sans-serif;
font-weight: bold;
transition: transform .2s;
}
#amazon-link:hover {
transform: scale(1.05);
}
#hover-card {
display: none;
position: fixed;
width: 220px;
padding: 15px;
background: #fffaf0;
color: #2b2b2b;
border-radius: 12px;
border: 1px solid #d8c3a5;
box-shadow: 0 6px 18px rgba(0,0,0,.25);
font-family: Georgia, serif;
pointer-events: none;
z-index: 20000;
}
#book-cover {
width: 120px;
height: 180px;
object-fit: cover;
display: block;
margin: 0 auto 15px auto;
}
#search-bar{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:10px;
z-index:20000;
}
#search-input{
width:350px;
padding:12px;
font-size:16px;
border-radius:25px;
border:none;
outline:none;
}
#search-button{
border:none;
border-radius:25px;
padding:12px 18px;
cursor:pointer;
font-size:18px;
}
#search-container {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 350px;
z-index: 20000;
}
#search-input {
width: 100%;
padding: 12px 18px;
font-size: 16px;
border-radius: 25px;
border: 1px solid #ccc;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
#search-results {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
width: 300px;
max-height: 300px;
overflow-y: auto;
z-index: 20000;
background: white;
color: black;
border: 2px solid black;
border-radius: 10px;
padding: 10px;
}
#search-results div {
padding: 8px;
cursor: pointer;
}
.search-item {
padding: 10px;
cursor: pointer;
font-family: Georgia, serif;
}
.search-item:hover {
background: #f2ead3;
}
.map-pin {
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
}
.pin-head {
width: 22px;
height: 22px;
background: #d62828;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
position: absolute;
top: 0;
left: 1px;
box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.pin-head::after {
content: "";
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
}
.map-pin {
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
}
.map-pin {
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
z-index: 9999;
}
#book-genres {
margin-top: 15px;
}
.genre-badge {
display: inline-block;
margin: 4px;
padding: 6px 12px;
background: #7a5c2e;
color: white;
border-radius: 20px;
font-size: .85rem;
cursor: pointer;
transition: .2s;
}
.genre-badge:hover {
background: #a07b3d;
transform: translateY(-2px);
}
#story-locations {
margin-top: 15px;
}
.location-badge {
display: inline-block;
margin: 6px 5px;
padding: 6px 12px;
background: #355c7d;
color: white;
border-radius: 20px;
font-size: .85rem;
}
#story-locations h4 {
margin-bottom: 8px;
}
#location-type {
margin-top: 10px;
font-size: .9rem;
font-style: italic;
}
/*==================================================
LOCATION CARD
Version: v2.4
==================================================*/
#location-card {
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 320px;
max-height: 80vh;
overflow-y: auto;
background: white;
border-radius: 12px;
padding: 20px;
display: none;
z-index: 20000;
}
#close-location-card {
float: right;
border: none;
background: transparent;
font-size: 20px;
cursor: pointer;
position: relative;
z-index: 20001;
}
#search-results:empty {
display: none;
}
#book-location:hover {
color: #c68b3c;
text-decoration: underline;
}