/* ---------- Popup Animation Variables ---------- */
:root {
--content-typewriter-speed: 120ms;
--content-fade-duration: 0.6s;
--content-fade-stagger: 250ms;
--content-animation-delay: 300ms;
--content-fade-start-delay: 300ms;
--content-switch-fade-duration: 0.2s;
/* same as var(--cream) */
--cream-filter: invert(88%) sepia(28%) saturate(308%) hue-rotate(347deg)
/* same as var(--orange) */
brightness(106%) contrast(97%);
--orange-filter: invert(33%) sepia(99%) saturate(901%) hue-rotate(358deg)
brightness(102%) contrast(101%);
}
/* ---------- Content Animation Styles ---------- */
main h2,
main h3,
main h4,
main p,
main ul,
main ol,
main div,
main iframe,
main section {
opacity: 0;
}
main h2 {
transition: opacity calc(var(--content-fade-duration) / 2) ease;
font-size: clamp(1.8rem, 1.2vw + 0.2rem, 2.2rem);
}
main h3 {
margin-bottom: 0.2rem;
font-size: clamp(1.2rem, 0.8vw + 0.3rem, 1.4rem);
}
main h4 {
margin-bottom: 0.2rem;
font-size: clamp(1rem, 0.6vw + 0.2rem, 1.2rem);
}
body.content-mode main {
opacity: 1;
visibility: visible;
transition:
opacity var(--popup-fade-in-duration) ease,
visibility var(--popup-fade-in-duration) ease;
}
/* Content switching state */
body.content-mode main.switching {
opacity: 0;
transition: opacity var(--content-switch-fade-duration) ease-out;
}
main p {
margin-bottom: 0.4rem;
font-size: clamp(0.85rem, 0.5vw + 0.3rem, 1rem);
line-height: 1.5;
}
.link-icon {
width: 1rem;
height: 1rem;
vertical-align: -0.2rem;
transition: filter 0.3s ease;
filter: var(--orange-filter);
}
a {
color: var(--orange);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--cream);
}
a:hover .link-icon {
filter: var(--cream-filter);
}
.emph {
color: var(--orange);
font-weight: bold;
}
.spotify-widget {
margin: 0.5rem 0;
border: none;
}
/* ---------- Now Page Selector ---------- */
.now-selector {
display: flex;
gap: 0.8rem;
margin: 0rem 0 0.3rem 0;
opacity: 0;
transition: opacity var(--content-fade-duration) ease-in-out;
}
.now-selector.loaded {
opacity: 1;
}
.now-selector select {
font-family: var(--font-mono);
font-size: clamp(1.2rem, 0.8vw + 0.3rem, 1.4rem);
background: transparent;
color: var(--cream);
border: none;
padding: 0;
padding-right: 0.7rem;
cursor: pointer;
transition: all 0.3s ease;
width: auto;
min-width: fit-content;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
vertical-align: baseline;
line-height: 1;
position: relative;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right center;
background-size: 0.6rem;
}
.now-selector select:hover {
color: var(--orange);
background-image: url('data:image/svg+xml;utf8,');
}
.now-selector select:focus {
outline: none;
}
.now-selector select:disabled {
color: var(--light-grey);
cursor: not-allowed;
opacity: 0.6;
}
.now-selector select:disabled:hover {
color: var(--light-grey);
}
/* ---------- Mobile Selector Styles ---------- */
@media (max-width: 600px) {
.now-selector {
flex-direction: row;
gap: 0.5rem;
margin: 0rem 0 0.3rem 0;
}
.now-selector select {
font-size: clamp(1.2rem, 0.8vw + 0.3rem, 1.4rem);
width: auto;
min-width: fit-content;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
vertical-align: baseline;
line-height: 1;
}
}
.face-image {
width: clamp(100px, 12vw, 160px);
height: clamp(100px, 12vw, 160px);
border-radius: 50%;
border: 1px solid var(--dark-grey);
object-fit: cover;
float: right;
margin-left: clamp(1rem, 2vw, 2rem);
margin-top: clamp(1rem, 2vw, 2rem);
margin-bottom: 1rem;
transform: scale(1.3);
}
/* ---------- Desktop Styles ---------- */
main {
padding: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem)
clamp(1rem, 2vw, 2rem);
overflow-y: auto;
transition:
opacity var(--popup-fade-out-duration) ease,
visibility var(--popup-fade-out-duration) ease,
min-height 0.3s ease;
visibility: hidden;
position: absolute;
right: 5rem;
top: 50%;
transform: translateY(-50%);
width: 45%;
max-height: calc(100vh - 8rem);
background-color: transparent;
color: var(--cream);
border: 2px solid var(--orange);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 10;
opacity: 0;
/* Prevent size jumping during content load */
min-height: 200px;
}
/* ---------- Large Screen Styles ---------- */
@media (min-width: 1400px) {
main {
padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2rem, 3.5vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
right: clamp(3rem, 5vw, 8rem);
}
}
@media (min-width: 1800px) {
main {
right: clamp(4rem, 6vw, 10rem);
}
}
}
@media (min-width: 1800px) {
main {
width: clamp(600px, 35%, 1000px);
right: clamp(4rem, 6vw, 10rem);
}
}
/* ---------- Mobile Styles ---------- */
@media (max-width: 600px) {
main {
width: 90%;
max-width: 400px;
padding: 1rem;
transition:
opacity var(--popup-fade-out-duration) ease,
visibility var(--popup-fade-out-duration) ease;
opacity: 0;
visibility: hidden;
position: absolute;
right: 1rem;
top: 42vh;
left: auto;
bottom: auto;
max-height: calc(100vh - 55vh);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Override desktop centering */
transform: none;
}
main.popup-scrollable {
overflow-y: auto;
}
body.content-mode main {
opacity: 1;
background-color: transparent;
color: var(--cream);
border: 2px solid var(--orange);
transition:
opacity var(--popup-fade-in-duration) ease,
visibility var(--popup-fade-in-duration) ease;
/* Override desktop centering */
transform: none;
}
/* Mobile content switching state */
body.content-mode main.switching {
opacity: 0;
transition: opacity var(--content-switch-fade-duration) ease-out;
/* Preserve mobile positioning */
width: 90%;
max-width: 400px;
right: 1rem;
top: 42vh;
transform: none;
}
/* Mobile responsive for intro section and face image */
.intro-section {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.face-image {
float: none;
display: block;
margin: 0 auto 1rem auto;
width: 100px;
height: 100px;
transform: scale(1.2);
}
}