* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family:
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
Arial,
sans-serif;
color: #292824;
background: #f5f3ee;
}
/* ============================================================
HEADER
============================================================ */
header {
position: relative;
width: 100%;
height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
background:
rgba(248,247,243,0.96);
border-bottom:
1px solid #ddd9d0;
z-index: 1000;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
min-width: 230px;
cursor: pointer;
user-select: none;
}
.logo-mark {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.logo-mark img {
display: block;
width: 31px;
height: auto;
max-height: 28px;
object-fit: contain;
}
.logo > span {
font-size: 17px;
font-weight: 600;
letter-spacing: 1.7px;
}
/* ============================================================
JOURNEY SELECTOR
============================================================ */
.journey-selector {
position: absolute;
left: 50%;
top: 50%;
transform:
translate(-50%,-50%);
z-index: 1100;
}
.journey-selector-button {
height: 42px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 13px;
border: 0;
border-radius: 8px;
background: transparent;
color: #292824;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
}
.journey-selector-button:hover,
.journey-selector-button.active {
background:
rgba(220,217,209,0.75);
}
.journey-chevron {
display: inline-block;
font-size: 15px;
transition:
transform 150ms ease;
}
.journey-selector-button.active
.journey-chevron {
transform:
rotate(180deg);
}
.journey-dropdown {
position: absolute;
top:
calc(100% + 8px);
left: 50%;
width: 220px;
padding: 8px;
transform:
translateX(-50%)
translateY(-6px);
opacity: 0;
visibility: hidden;
pointer-events: none;
background:
rgba(248,247,243,0.86);
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
border:
1px solid
rgba(207,203,194,0.85);
border-radius: 12px;
box-shadow:
0 14px 35px
rgba(30,28,24,0.15);
transition:
opacity 150ms ease,
transform 150ms ease,
visibility 150ms ease;
}
.journey-dropdown.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0);
}
.journey-dropdown-item {
width: 100%;
height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 13px;
border: 0;
border-radius: 7px;
background: transparent;
color: #3b3934;
font-family: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.journey-dropdown-item:hover {
background:
rgba(222,219,211,0.75);
}
.journey-dropdown-item.selected {
background:
rgba(215,212,203,0.82);
font-weight: 600;
}
.journey-check {
color: #6c704e;
font-weight: 700;
opacity: 0;
}
.journey-dropdown-item.selected
.journey-check {
opacity: 1;
}
/* ============================================================
TOP CONTROLS
============================================================ */
.top-controls {
min-width: 230px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
}
.search-container {
position: relative;
}
.search-input {
width: 190px;
height: 38px;
padding:
0 39px 0 14px;
border:
1px solid #d6d2c9;
border-radius: 9px;
background:
rgba(224,221,213,0.72);
color: #292824;
font-family: inherit;
font-size: 14px;
outline: none;
}
.search-input::placeholder {
color: #77736c;
}
.search-input:focus {
border-color:
#aaa69c;
background:
rgba(238,236,231,0.95);
}
.search-icon {
position: absolute;
right: 12px;
top: 50%;
width: 18px;
height: 18px;
transform:
translateY(-50%);
fill: none;
stroke: #3f3d38;
stroke-width: 1.8;
pointer-events: none;
}
.filters-button {
height: 40px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
border:
1px solid #d6d2c9;
border-radius: 9px;
background: transparent;
color: #292824;
font-family: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.filters-button:hover,
.filters-button.active {
background:
rgba(222,219,211,0.7);
}
.sliders-icon {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
}
/* ============================================================
MAIN / SIDEBAR
============================================================ */
main {
width: 100%;
height:
calc(100vh - 76px);
display: flex;
}
#sidebar {
position: relative;
width: 240px;
min-width: 240px;
height: 100%;
background:
rgba(247,245,240,0.97);
border-right:
1px solid #ddd9d0;
z-index: 800;
overflow: hidden;
}
.sidebar-main {
padding:
24px 16px;
}
.nav-item {
height: 48px;
display: flex;
align-items: center;
gap: 14px;
padding:
0 13px;
margin-bottom: 3px;
border-radius: 9px;
color: #393732;
font-size: 14px;
cursor: pointer;
}
.nav-item:hover {
background:
rgba(226,223,215,0.55);
}
.nav-item.active {
background:
#dedbd3;
font-weight: 500;
}
.nav-icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
MY JOURNEYS
============================================================ */
.my-journeys-header {
margin-top: 38px;
padding:
0 12px 10px;
display: flex;
align-items: center;
justify-content: space-between;
color: #88837a;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.1px;
}
.my-journeys-header button {
width: 25px;
height: 25px;
border: 0;
background: transparent;
color: #817d74;
cursor: pointer;
font-size: 15px;
}
.my-journeys-list {
overflow: hidden;
max-height: 220px;
transition:
max-height 200ms ease,
opacity 200ms ease;
}
.my-journeys-list.collapsed {
max-height: 0;
opacity: 0;
}
.my-journeys-empty {
padding:
5px 12px 10px;
color: #99958d;
font-size: 12px;
line-height: 1.4;
}
.journey-radio {
height: 36px;
display: flex;
align-items: center;
gap: 10px;
padding:
0 12px;
color: #44423d;
font-size: 14px;
cursor: pointer;
}
.journey-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-mark {
width: 14px;
height: 14px;
border:
1.6px solid #89857d;
border-radius: 50%;
position: relative;
}
.journey-radio input:checked
+ .radio-mark {
border-color:
#575844;
}
.journey-radio input:checked
+ .radio-mark::after {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background:
#575844;
}
/* ============================================================
JOURNEY HEARTS
============================================================ */
.journey-favourites-list {
width: 100%;
}
.journey-choice-row {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 4px;
border-radius: 7px;
transition:
background 120ms ease;
}
.journey-choice-row:hover {
background:
rgba(224,221,213,0.7);
}
.journey-choice {
flex: 1;
display: block;
padding:
13px 11px;
margin-bottom: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: #393732;
font-family: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.journey-heart {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: block;
padding: 0;
margin: 0;
border: 0;
background: transparent;
color: #5b5953;
font-family:
Arial,
sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 42px;
text-align: center;
cursor: pointer;
transition:
transform 120ms ease,
color 120ms ease;
}
.journey-heart.favourited {
color: #11110f;
font-size: 22px;
font-weight: 400;
}
.journey-heart:hover {
transform:
scale(1.12);
}
.journey-heart:focus-visible {
outline:
2px solid #77736b;
outline-offset:
-2px;
border-radius: 6px;
}
/* ============================================================
SIDEBAR PANELS
============================================================ */
.sidebar-panel {
position: absolute;
inset: 0;
padding:
25px 20px;
background:
rgba(247,245,240,0.98);
opacity: 0;
visibility: hidden;
transform:
translateX(-10px);
transition:
opacity 160ms ease,
transform 160ms ease,
visibility 160ms ease;
}
.sidebar-panel.open {
opacity: 1;
visibility: visible;
transform:
translateX(0);
}
.sidebar-back {
border: 0;
background: transparent;
padding: 5px 0;
color: #55524b;
font-family: inherit;
font-size: 14px;
cursor: pointer;
}
.sidebar-panel-title {
margin-top: 30px;
margin-bottom: 20px;
color: #858077;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
}
.entry-list-item {
width: 100%;
display: block;
padding:
13px 11px;
margin-bottom: 4px;
border: 0;
border-radius: 7px;
background: transparent;
color: #393732;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.entry-list-item:hover {
background:
rgba(224,221,213,0.7);
}
.entry-list-item strong {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.entry-list-item span {
color: #858077;
font-size: 12px;
}
.sidebar-stat {
display: flex;
align-items: baseline;
justify-content: space-between;
padding:
13px 5px;
border-bottom:
1px solid #dedbd3;
}
.sidebar-stat strong {
font-size: 23px;
}
.sidebar-stat span {
color: #858077;
font-size: 10px;
letter-spacing: 1px;
}
.settings-row {
display: flex;
justify-content: space-between;
padding:
10px 5px;
border-bottom:
1px solid #e0ddd5;
font-size: 13px;
}
.settings-row span:last-child {
color: #87837a;
}
/* ============================================================
MAP
============================================================ */
.map-area {
position: relative;
flex: 1;
min-width: 0;
height: 100%;
}
#map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.atlas-status {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
padding: 8px 10px;
color: #3d3a34;
background: rgba(255, 253, 247, 0.94);
border: 1px solid #d8d2c6;
border-radius: 4px;
font-size: 12px;
}
.atlas-status.error {
color: #8a3a2a;
}
/* ============================================================
MAP CONTROLS
============================================================ */
.maplibregl-ctrl-group {
border: 0 !important;
border-radius: 8px !important;
overflow: hidden;
box-shadow:
0 2px 10px
rgba(30,28,24,0.12) !important;
}
.maplibregl-ctrl-group button {
width: 38px !important;
height: 38px !important;
background:
rgba(248,247,243,0.94) !important;
}
/* ============================================================
MARKERS
============================================================ */
.tigro-marker {
width: 44px;
height: 56px;
cursor: pointer;
}
.tigro-marker svg {
display: block;
width: 44px;
height: 56px;
}
/* ============================================================
POPUPS
============================================================ */
.maplibregl-popup-content {
padding: 0 !important;
border-radius: 12px !important;
overflow: hidden;
background:
rgba(249,247,242,0.98) !important;
box-shadow:
0 12px 40px
rgba(35,32,27,0.18) !important;
}
.maplibregl-popup-close-button {
width: 30px;
height: 30px;
right: 5px;
top: 5px;
z-index: 5;
border-radius: 50%;
color: #55524c;
font-size: 20px;
}
.tigro-popup {
width: 300px;
padding: 18px;
}
.tigro-popup-image {
display: block;
width: 264px;
height: auto;
max-height: 300px;
object-fit: contain;
margin:
-2px auto 15px;
border-radius: 5px;
}
.tigro-popup-meta {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
color: #858077;
font-size: 10px;
letter-spacing: 1px;
}
.tigro-popup-title {
margin-bottom: 7px;
color: #2e2c28;
font-size: 19px;
font-weight: 600;
line-height: 1.15;
}
.tigro-popup-location {
margin-bottom: 14px;
color: #77736b;
font-size: 12px;
}
.tigro-popup-text {
color: #48453f;
font-size: 13px;
line-height: 1.55;
}
.tigro-popup-divider {
margin:
15px 0;
height: 1px;
background:
#dedbd3;
}
.tigro-popup-details {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 10px;
color: #4e4b45;
font-size: 11px;
}
.tigro-popup-details > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-label {
color: #979188;
font-size: 9px;
letter-spacing: 1px;
}
/* ============================================================
FILTER PANEL
============================================================ */
.filters-panel {
position: absolute;
top: 12px;
right: 12px;
width: 280px;
max-height:
calc(100% - 112px);
overflow-y: auto;
padding:
20px 18px;
background:
rgba(248,247,243,0.92);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
border:
1px solid
rgba(210,207,199,0.85);
border-radius: 14px;
box-shadow:
0 12px 40px
rgba(40,37,31,0.14);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateY(-5px);
transition:
opacity 150ms ease,
transform 150ms ease,
visibility 150ms ease;
z-index: 700;
}
.filters-panel.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateY(0);
}
.filters-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 15px;
border-bottom:
1px solid #dedbd3;
}
.filters-header strong {
font-size: 13px;
letter-spacing: 1.2px;
}
.filters-header button {
width: 30px;
height: 30px;
border: 0;
background: transparent;
color: #4d4a44;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.filter-section {
padding:
17px 0;
border-bottom:
1px solid #dedbd3;
}
.filter-title {
margin-bottom: 13px;
color: #77736b;
font-size: 10px;
letter-spacing: 1px;
}
.filter-section label {
min-height: 35px;
display: flex;
align-items: center;
gap: 10px;
color: #44413b;
font-size: 13px;
cursor: pointer;
}
.filter-section input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color:
#6d704f;
}
.filter-symbol,
.source-symbol {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex:
0 0 14px;
}
.filter-symbol.place,
.source-symbol.tigro {
background: #75683f;
border-radius: 50%;
}
.filter-symbol.space {
width: 12px;
height: 12px;
background: #494842;
}
.filter-symbol.habitat {
background: #676b4c;
border-radius: 50%;
}
.filter-symbol.organism {
background: #65764b;
border-radius:
50% 50% 50% 0;
transform:
rotate(-45deg);
}
.filter-symbol.route {
height: 3px;
background: #55554e;
border-radius: 3px;
}
.filter-symbol.object {
width: 11px;
height: 11px;
background: #986333;
transform:
rotate(45deg);
}
.filter-symbol.intangible {
width: 12px;
height: 12px;
background: #4d4d47;
clip-path:
polygon(
50% 0%,
60% 40%,
100% 50%,
60% 60%,
50% 100%,
40% 60%,
0% 50%,
40% 40%
);
}
.filter-symbol.reverie {
border:
2px dotted #55544d;
border-radius: 50%;
}
.source-symbol.me {
background: #4b4b47;
border-radius: 50%;
}
.source-symbol.historical {
background: #986333;
border-radius: 50%;
}
.source-symbol.community {
background: #8ea0a5;
border-radius: 50%;
}
/* ============================================================
FULL-WIDTH BOTTOM TIMELINE
============================================================ */
.bottom-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 84px;
background:
rgba(248,247,243,0.92);
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
border-top:
1px solid
rgba(221,218,210,0.85);
z-index: 600;
}
.timeline {
position: relative;
width: 100%;
height: 100%;
padding:
15px 45px 5px;
}
.timeline-header {
display: flex;
justify-content: space-between;
color: #89857d;
font-size: 10px;
}
.timeline-track {
position: relative;
width: 100%;
height: 27px;
margin-top: 3px;
}
.timeline-line {
position: absolute;
left: 0;
right: 0;
top: 13px;
height: 1px;
background:
#a9a69e;
}
.timeline-dot {
position: absolute;
top: 8px;
width: 11px;
height: 11px;
transform:
translateX(-50%);
border-radius: 50%;
background:
#696d4e;
z-index: 2;
}
.timeline-slider {
position: absolute;
left: 0;
right: 0;
top: 2px;
width: 100%;
height: 23px;
margin: 0;
appearance: none;
-webkit-appearance: none;
background: transparent;
cursor: ew-resize;
z-index: 3;
}
.timeline-slider::-webkit-slider-runnable-track {
height: 1px;
background: transparent;
}
.timeline-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin-top: -7px;
border:
1px solid #aaa69d;
border-radius: 50%;
background:
#f8f7f3;
}
.timeline-slider::-moz-range-track {
height: 1px;
background: transparent;
}
.timeline-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border:
1px solid #aaa69d;
border-radius: 50%;
background:
#f8f7f3;
}
.timeline-instruction {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 2px;
color: #7e7a72;
font-size: 12px;
}
.timeline-current {
position: absolute;
right: 4px;
bottom: 4px;
color: transparent;
font-size: 1px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
#sidebar {
width: 220px;
min-width: 220px;
}
.search-input {
width: 150px;
}
}
@media (max-width: 850px) {
.logo {
min-width: auto;
}
.logo > span {
font-size: 14px;
}
.journey-selector {
display: none;
}
}
@media (max-width: 700px) {
header {
padding:
0 15px;
}
#sidebar {
width: 190px;
min-width: 190px;
}
.filters-panel {
width: 260px;
}
.search-input {
width: 130px;
}
.timeline {
padding-left: 25px;
padding-right: 25px;
}
}