337 lines
4.9 KiB
Text
337 lines
4.9 KiB
Text
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg: #180e2c;
|
|
--fg: white;
|
|
--accent-clr: #a87dff;
|
|
--link: #a87dff;
|
|
--positive: #4eff93;
|
|
--negative: #c83867;
|
|
|
|
--font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
margin: 0;
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
position: relative;
|
|
text-decoration: none;
|
|
color: var(--link);
|
|
}
|
|
|
|
a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: currentColor;
|
|
opacity: 0;
|
|
transform-origin: left center;
|
|
transform: scaleX(0);
|
|
transition: transform 300ms, opacity 300ms;
|
|
transition-delay: 50ms;
|
|
}
|
|
|
|
a:hover::after {
|
|
opacity: 1;
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
button {
|
|
display: block;
|
|
background: none;
|
|
color: inherit;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
min-height: 100svh;
|
|
}
|
|
|
|
.hero {
|
|
width: 100%;
|
|
min-height: 16rem;
|
|
position: relative;
|
|
display: flex;
|
|
padding: 2rem;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(0 0 0 / 0.2);
|
|
}
|
|
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
background-image: linear-gradient(90deg, #130b23a8 300px, #130b2338 600px);
|
|
}
|
|
|
|
.hero-message {
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-cover {
|
|
user-select: none;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
object-fit: cover;
|
|
object-position: left 60%;
|
|
mask-image: linear-gradient(
|
|
100deg,
|
|
rgba(0, 0, 0, 0) 10%,
|
|
rgba(0, 0, 0, 0.01) 15%,
|
|
rgba(0, 0, 0, 0.05) 20%,
|
|
rgba(0, 0, 0, 0.5) 60%,
|
|
white 100%
|
|
);
|
|
}
|
|
|
|
.blahaj-select-buttons {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.blahaj-select-buttons button {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
padding: 0.4rem;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.blahaj-select-buttons button::after {
|
|
content: '';
|
|
background-color: var(--accent-clr);
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 2px;
|
|
opacity: 0;
|
|
transition: opacity 200ms;
|
|
}
|
|
|
|
.blahaj-select-buttons button[selected]::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.display-image-wrapper {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 10rem;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 6px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
.display-image {
|
|
grid-column: 1/2;
|
|
grid-row: 1/2;
|
|
position: relative;
|
|
width: fit-content;
|
|
height: 100%;
|
|
min-height: 0;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.display-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.display-image-badge {
|
|
position: absolute;
|
|
right: 0.2rem;
|
|
top: 1.2rem;
|
|
transform: rotate(8deg);
|
|
padding: 0.2rem 0.4rem;
|
|
background-color: var(--accent-clr);
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 10px 12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.main-content {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.country-filter-search {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border: none;
|
|
padding: 0.8rem 0.4rem;
|
|
color: inherit;
|
|
font: inherit;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.listings-wrapper {
|
|
display: grid;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.listings {
|
|
grid-column: 1/2;
|
|
grid-row: 1/2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.country-listings {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 6px;
|
|
padding: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.country-listings.unavailable .country-listings-open-button {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.country-listings-emoji {
|
|
position: relative;
|
|
padding-right: 1.25rem;
|
|
}
|
|
|
|
.country-listings-emoji::after {
|
|
z-index: 15;
|
|
background-image: url(/blobhaj.svg);
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 1.5rem;
|
|
top: 0px;
|
|
height: 2rem;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
}
|
|
|
|
.country-listings-open-button {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.country-listings-open-button h2 {
|
|
text-align: left;
|
|
width: fit-content;
|
|
margin: 0;
|
|
}
|
|
|
|
.country-listings-open-button h2::after {
|
|
display: inline-block;
|
|
margin-left: 0.5rem;
|
|
content: '↴';
|
|
transition: transform 200ms;
|
|
transition-delay: 50ms;
|
|
transition-timing-function: cubic-bezier(0.61, 0.76, 0.34, 1.73);
|
|
}
|
|
|
|
.country-listings-open-button:hover h2::after {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.country-listings-content {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.listing {
|
|
display: block;
|
|
background: rgb(0 0 0 / 0.2);
|
|
border-radius: 0.5rem;
|
|
padding: 0.25rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.listing.positive h3 {
|
|
color: var(--positive);
|
|
}
|
|
|
|
.listing.negative h3 {
|
|
color: var(--negative);
|
|
}
|
|
|
|
.address {
|
|
font-size: 0.8rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.links {
|
|
background-color: rgb(0 0 0 / 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.error {
|
|
color: var(--negative);
|
|
}
|