@font-face {
font-family: "teenlite";
src: url(../fonts/teenlite.ttf);
}
@font-face {
font-family: "Vazir";
src: url(../fonts/Vazir-Medium.woff2),
url(../fonts/Vazir-Medium.woff),
url(../fonts/Vazir-Medium.ttf);
}
:root {
--colorofdetails: #ea580c;
--accent-hover: #c2410c;
--progress-fill: #ea580c;
--white: #ffffff;
--bg-color: #ffffff;
--card-bg: #faf6f3;
--modal-bg: #ffffff;
--header-bg: #141210;
--text-color: #1c1917;
--text-secondary: #78716c;
--border-color: #e7e5e4;
--border-strong: #d6d3d1;
--hover-overlay: rgba(28, 25, 23, 0.06);
--glass-bg: rgba(255, 255, 255, 0.8);
--shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
--shadow-lg: 0 12px 28px rgba(28, 25, 23, 0.12);
--progress-bg: #e7e5e4;
}
html.dark {
--bg-color: #141210;
--card-bg: #1e1b18;
--modal-bg: #1e1b18;
--text-color: #fafaf9;
--text-secondary: #a8a29e;
--border-color: #2c2926;
--border-strong: #3f3b37;
--hover-overlay: rgba(255, 255, 255, 0.07);
--glass-bg: rgba(30, 27, 24, 0.8);
--shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
--progress-bg: #2c2926;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
*:focus{
outline: none;
}
*:focus-visible{
outline: 2px solid var(--colorofdetails);
outline-offset: 2px;
border-radius: 4px;
}
html, body{
width: 100%;
position: relative;
overflow-x: hidden;
}
body {
margin: 0;
background: var(--bg-color);
color: var(--text-color);
direction: ltr;
letter-spacing: 1.4px;
font-family: 'teenlite', 'Vazir', sans-serif;
transition: background 0.3s, color 0.3s;
min-height: 100vh;
min-height: 100dvh;
padding-bottom: 180px;
}
a, button, .song-item, .artist-card, .playlist-card, .recent-card, [data-link], .menu-item {
cursor: pointer;
}
.drag-scroll {
cursor: grab;
}
.drag-scroll.dragging {
cursor: grabbing;
user-select: none;
scroll-behavior: auto;
}
.main-header {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
padding: 12px 28px;
position: sticky;
top: 0;
z-index: 1000;
transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
html.dark .main-header {
box-shadow: 0 4px 12px rgba(160, 176, 217, 0.15);
}
.logo a {
color: var(--text-color);
text-decoration: none;
font-size: 32px;
font-weight: 800;
font-family: 'teenlite', sans-serif;
letter-spacing: -0.5px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.2s, transform 0.2s;
display: inline-block;
letter-spacing: 1.5px;
font-family: "teenlite";
user-select: none;
}
.logo a:hover {
opacity: 0.9;
transform: scale(1.02);
}
.right-side {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
.profile-trigger {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 50%;
color: var(--text-color);
transition: background 0.2s;
}
.menu-toggle {
background: var(--bg-color);
border: none;
color: var(--text-color);
width: 44px;
height: 44px;
padding: 0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, transform 0.1s, box-shadow 0.2s, color 0.2s;
line-height: 1;
}
.menu-toggle svg {
width: 26px;
height: 26px;
transition: transform 0.2s;
}
.menu-toggle:hover svg {
transform: scale(1.1);
}
.menu-toggle .icon-close {
display: none;
}
.menu-toggle.open .icon-menu {
display: none;
}
.menu-toggle.open .icon-close {
display: block;
}
.nav-menu {
display: none;
direction: rtl;
position: absolute;
top: 75px;
right: 20px;
background: var(--card-bg);
padding: 12px 6px;
border-radius: 20px;
flex-direction: column;
gap: 4px;
z-index: 1001;
border: 1px solid var(--border-color);
min-width: 200px;
transform-origin: top right;
animation: menuAppear 0.2s ease-out;
user-select: none;
}
@keyframes menuAppear {
from {
opacity: 0;
transform: scale(0.95) translateY(-8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.nav-menu a {
color: var(--text-color);
text-decoration: none;
padding: 12px 18px;
border-radius: 14px;
font-weight: 600;
font-size: 1rem;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 12px;
}
.nav-menu a:hover {
background: var(--hover-overlay);
}
.nav-menu a.active {
background: var(--colorofdetails);
color: white;
}
.nav-divider {
height: 1px;
background: var(--border-color);
margin: 6px 12px;
}
.nav-theme-group {
padding: 4px 18px 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.nav-section-label {
font-weight: 600;
display: flex;
align-items: center;
gap: inherit;
justify-content: flex-start;
}
.theme-options {
display: flex;
gap: 6px;
background: var(--bg-color);
padding: 4px;
border-radius: 12px;
border: 1px solid var(--border-color);
}
.theme-option {
flex: 1;
border: none;
background: none;
color: var(--text-secondary);
padding: 7px 6px;
border-radius: 9px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s;
font-family: 'Vazir', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.theme-option:hover{
color: var(--text-color);
background-color: var(--hover-overlay);
}
.theme-option.active {
background: var(--colorofdetails);
color: white;
}
.nav-donate-trigger {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 18px;
border-radius: 14px;
border: none;
background: none;
color: var(--text-color);
font-weight: 600;
font-size: 1.1rem;
font-family: 'Vazir', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
cursor: pointer;
transition: background 0.2s;
}
.nav-donate-trigger svg {
flex-shrink: 0;
}
.nav-donate-trigger svg path {
fill: var(--text-color);
}
.nav-donate-trigger:hover {
background: var(--hover-overlay);
}
@media (max-width: 600px) {
.right-side{
gap: 0;
}
.menu-toggle {
font-size: 24px;
}
.menu-toggle::before{
font-size: 25px;
}
.nav-menu {
top: 65px;
right: 10px;
min-width: 180px;
}
.nav-menu a {
padding: 10px 16px;
font-size: 1rem;
}
}
.donate-modal-overlay {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
z-index: 2000;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.donate-modal-overlay.show {
opacity: 1;
}
.donate-modal {
background: var(--modal-bg);
color: var(--text-color);
padding: 36px 28px;
border-radius: 32px;
max-width: 420px;
width: 90%;
text-align: center;
position: relative;
border: 1px solid var(--border-color);
transform: scale(0.9) translateY(20px);
opacity: 0;
user-select: none;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease,
background 0.3s;
}
.donate-modal-overlay.show .donate-modal {
transform: scale(1) translateY(0);
opacity: 1;
}
.donate-modal h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.4;
color: var(--text-color);
direction: rtl;
}
.donate-modal h2 span {
display: inline-block;
animation: heartbeat 1.5s ease infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
25% { transform: scale(1.2); }
50% { transform: scale(1.1); }
}
.close-modal {
position: absolute;
top: 16px;
right: 18px;
font-size: 28px;
cursor: pointer;
color: var(--text-color);
opacity: 0.7;
background: none;
border: none;
padding: 6px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, opacity 0.2s, transform 0.1s, color 0.2s;
}
.close-modal:hover {
background: var(--hover-overlay);
opacity: 1;
color: var(--colorofdetails);
}
.donate-button {
display: inline-block;
margin-top: 24px;
padding: 14px 36px;
background: var(--colorofdetails);
color: white;
text-decoration: none;
border-radius: 60px;
font-weight: bold;
font-size: 1.2rem;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
border: none;
cursor: pointer;
}
.donate-button:hover {
transform: translateY(-4px);
background: var(--accent-hover);
}
.donate-button:active {
transform: translateY(0);
}
.donate-note {
margin-top: 16px;
font-size: 0.9rem;
opacity: 0.7;
}
.top-search-bar {
padding: 20px;
display: flex;
justify-content: center;
}
.search-box {
display: flex;
max-width: 500px;
width: 100%;
user-select: none;
}
#searchInput {
flex: 1;
padding: 12px 15px;
border: 2px solid var(--border-color);
border-radius: 30px 0 0 30px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1.1px;
background: var(--card-bg);
color: var(--text-color);
outline: none;
font-family: inherit;
}
.search-btn {
background: var(--colorofdetails);
border: none;
padding: 0 20px;
border-radius: 0 30px 30px 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
display: none;
position: fixed;
z-index: 1500;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
transition: backdrop-filter 0.3s;
scrollbar-width: thin;
scrollbar-color: var(--colorofdetails) var(--white);
}
.modal-content {
background: var(--modal-bg);
color: var(--text-color);
margin: 8% auto;
padding: 0;
border-radius: 28px;
width: 90%;
max-width: 520px;
max-height: 70vh;
max-height: 70dvh;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--border-color);
transition: background 0.3s, box-shadow 0.3s;
}
.modal-header {
padding: 20px 24px 12px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-header h3 {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
color: var(--text-color);
}
.modal-close-btn {
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: var(--text-color);
opacity: 0.7;
padding: 6px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, opacity 0.2s, transform 0.1s;
}
.modal-close-btn:hover {
background: var(--hover-overlay);
opacity: 1;
color: var(--colorofdetails);
}
#resultsContainer {
overflow-y: auto;
padding: 12px 8px;
scrollbar-width: thin;
scrollbar-color: var(--colorofdetails) var(--border-color);
}
#resultsContainer::-webkit-scrollbar {
width: 6px;
}
#resultsContainer::-webkit-scrollbar-track {
background: var(--border-color);
border-radius: 10px;
}
#resultsContainer::-webkit-scrollbar-thumb {
background: var(--colorofdetails);
border-radius: 10px;
}
.result-item {
padding: 14px 18px;
margin-bottom: 4px;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
background: transparent;
color: var(--text-color);
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.result-item:hover{
color: var(--colorofdetails);
}
.result-item::before {
content: "♪";
font-size: 1.3rem;
color: var(--colorofdetails);
}
.result-item:hover::before {
opacity: 1;
}
.no-results {
text-align: center;
padding: 40px 20px;
opacity: 0.7;
color: var(--text-color);
font-style: italic;
}
@media (max-width: 600px) {
.modal-content {
margin: 5% auto;
border-radius: 24px;
}
.modal-header {
padding: 16px 20px 10px;
}
.result-item {
padding: 12px 14px;
}
}
main {
margin-left: 100px;
margin-right: 100px;
}
.section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 3px;
}
.section-header h2 {
margin: 0;
padding-left: 0;
}
.section-all-btn {
color: var(--colorofdetails);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
display: flex;
align-items: center;
gap: 6px;
transition: transform 0.2s, color 0.2s;
padding: 6px 12px;
border: 1px solid var(--colorofdetails);
border-radius: 40px;
background: var(--hover-overlay);
}
.section-all-btn:hover {
transform: translateX(4px);
color: white;
background: var(--colorofdetails);
}
.section-all-btn span {
font-size: 1.2rem;
line-height: 1;
}
.artists-section {
padding: 20px 0;
user-select: none;
}
.artists-section h2 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 20px;
padding-left: 28px;
color: var(--text-color);
position: relative;
display: flex;
align-items: center;
}
.artists-section h2::before,
.artists-section h2::after {
content: "";
position: absolute;
left: 8px;
width: 3px;
background-color: var(--colorofdetails);
border-radius: 2px;
}
.artists-section h2::before {
height: 14px;
top: 50%;
transform: translateY(-44%);
}
.artists-section h2::after {
height: 24px;
top: 50%;
transform: translateY(-46%);
left: 16px;
}
.artists-flex {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: visible;
padding: 10px 20px 20px;
margin: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--colorofdetails) var(--border-color);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.artists-flex::-webkit-scrollbar {
height: 4px;
}
.artists-flex::-webkit-scrollbar-track {
background: var(--border-color);
border-radius: 10px;
}
.artists-flex::-webkit-scrollbar-thumb {
background: var(--colorofdetails);
border-radius: 10px;
}
.artist_link {
text-decoration: none;
color: inherit;
user-select: none;
-webkit-user-drag: none;
}
.artist-card {
position: relative;
background: var(--card-bg);
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
width: 160px;
text-align: center;
padding: 0 0 16px 0;
box-shadow: var(--shadow);
transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
border: 1px solid var(--border-color);
}
.artist-card img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
-webkit-user-drag: none;
user-select: none;
}
.artist-card p {
font-weight: 700;
font-size: 1.2rem;
margin: 14px 8px 6px;
color: var(--text-color);
letter-spacing: 1px;
transition: color 0.2s;
}
.grid-count {
padding: 0 20px;
margin-top: 12px;
color: var(--text-secondary);
font-size: 0.9rem;
direction: rtl;
}
.page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
z-index: 50;
transition: background 0.3s;
}
.toolbar-right {
display: flex;
align-items: center;
min-width: 60px;
justify-content: flex-end;
}
.toolbar-center {
flex: 1;
text-align: center;
}
.page-title {
font-size: 1.8rem;
font-weight: 800;
margin: 0;
color: var(--text-color);
letter-spacing: 1px;
width: fit-content;
padding-left: 4%;
}
.toolbar-btn {
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
padding: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.1s, color 0.2s;
text-decoration: none;
}
.toolbar-btn:hover {
background: var(--hover-overlay);
color: var(--text-color);
}
.detail-hero {
display: flex;
gap: 24px;
align-items: flex-end;
padding: 24px 20px;
border-bottom: 1px solid var(--border-color);
flex-wrap: wrap;
direction: rtl;
user-select: none;
}
.hero-artwork {
position: relative;
width: 170px;
height: 170px;
border-radius: 16px;
overflow: hidden;
flex-shrink: 0;
background: var(--border-color);
box-shadow: var(--shadow);
}
.hero-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
-webkit-user-drag: none;
user-select: none;
}
.hero-artwork-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.hero-info {
flex: 1;
min-width: 220px;
display: flex;
flex-direction: column;
gap: 6px;
}
.hero-eyebrow {
font-size: 1rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
width: max-content;
direction: ltr;
}
.hero-title {
font-size: 2rem;
font-weight: 800;
color: var(--text-color);
line-height: 1.2;
margin: 0;
}
.hero-meta {
font-size: 0.9rem;
color: var(--text-secondary);
}
.hero-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
flex-wrap: wrap;
direction: rtl;
}
.hero-play-all-btn, .hero-shuffle-btn {
display: flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 0 20px;
height: 40px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
border: none;
direction: rtl;
font-family: 'Vazir', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.hero-play-all-btn {
background: var(--colorofdetails);
color: white;
}
.hero-play-all-btn:hover {
background: var(--accent-hover);
}
.hero-shuffle-btn {
background: transparent;
color: var(--text-color);
border: 1px solid var(--border-strong);
}
.hero-shuffle-btn:hover {
background: var(--hover-overlay);
}
.hero-share-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.hero-share-btn:hover {
background: var(--hover-overlay);
color: var(--colorofdetails);
}
@media (max-width: 600px) {
.detail-hero {
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
}
.hero-info {
align-items: center;
}
.hero-actions {
justify-content: center;
}
}
.condensed-toolbar {
position: fixed;
top: 70px;
left: 0;
right: 0;
z-index: 900;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
backdrop-filter: blur(10px);
}
.condensed-toolbar.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
top: 0;
}
.condensed-title {
font-weight: 700;
font-size: 1.1rem;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 600px) {
.condensed-toolbar {
top: 60px;
}
}
.toast-message {
visibility: hidden;
min-width: 200px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 30px;
padding: 10px 20px;
position: fixed;
z-index: 100000;
left: 50%;
bottom: 100px;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
direction: rtl;
}
.toast-message.show {
visibility: visible;
opacity: 1;
}
@media (max-width: 768px) {
main {
margin-left: 30px;
margin-right: 30px;
}
}
@media (max-width: 600px) {
main {
margin-left: 0;
margin-right: 0;
}
.page-toolbar {
padding: 12px 16px;
}
.page-title {
font-size: 1.5rem;
max-width: 60vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.toolbar-btn {
padding: 8px;
}
}
.playlists-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-top: 20px;
}
.playlist-card-link {
text-decoration: none;
color: inherit;
}
.playlist-card {
position: relative;
background: var(--card-bg);
border-radius: 20px;
overflow: hidden;
width: 160px;
text-align: center;
padding: 0 0 16px 0;
box-shadow: var(--shadow);
transition: all 0.3s;
border: 1px solid var(--border-color);
}
.playlist-card img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
.playlist-card-placeholder {
width: 100%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: var(--border-color);
color: var(--text-secondary);
}
.playlist-container {
padding: 30px 0px;
user-select: none;
}
.playlist-container h2 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 20px;
padding-left: 28px;
color: var(--text-color);
position: relative;
display: flex;
align-items: center;
}
.playlist-container h2::before,
.playlist-container h2::after {
content: "";
position: absolute;
left: 8px;
width: 3px;
background-color: var(--colorofdetails);
border-radius: 2px;
}
.playlist-container h2::before {
height: 14px;
top: 50%;
transform: translateY(-40%);
}
.playlist-container h2::after {
height: 24px;
top: 50%;
transform: translateY(-45%);
left: 16px;
}
.playlists-wrapper {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 20px;
overflow-x: auto;
overflow-y: visible;
padding: 10px 40px 20px;
margin: 0 -20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--colorofdetails) var(--border-color);
}
.playlists-wrapper a {
text-decoration: none;
color: inherit;
user-select: none;
-webkit-user-drag: none;
display: flex;
align-items: stretch;
}
.playlist {
background: var(--card-bg);
border-radius: 24px;
overflow: hidden;
width: 170px;
text-align: center;
transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
border: 1px solid var(--border-color);
padding: 0 0 18px 0;
}
.playlist img {
width: 100%;
height: 170px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
-webkit-user-drag: none;
}
.playlist-title {
display: block;
font-weight: 700;
font-size: 1.2rem;
margin: 16px 8px 6px;
color: var(--text-color);
letter-spacing: -0.2px;
transition: color 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@media (max-width: 600px) {
.playlist {
width: 150px;
}
.playlist img {
height: 150px;
}
.playlist-title {
font-size: 1rem;
}
}
.song-list {
list-style: none;
padding: 0 20px;
max-width: 800px;
margin: 0 auto;
}
.song-item {
display: flex;
align-items: center;
padding: 12px 15px;
background: var(--card-bg);
border-radius: 12px;
margin-bottom: 8px;
transition: background 0.2s, border-color 0.2s;
border-left: 4px solid transparent;
}
.song-item.now-playing {
border-left-color: var(--colorofdetails);
}
.song-item:hover{
background: var(--hover-overlay);
}
.song-cover {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
margin-right: 12px;
background: var(--border-color);
}
.song-cover-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.song-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
}
.song-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.song-title {
font-weight: 600;
font-size: 1rem;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.song-artist {
font-size: 0.85rem;
opacity: 0.75;
color: var(--text-secondary, var(--text-color));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.song-index-number {
margin-right: 15px;
min-width: 30px;
font-weight: 600;
color: var(--colorofdetails);
user-select: none;
}
.song-play-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
transition: opacity 0.2s, transform 0.1s;
}
.song-item:hover .song-play-btn {
opacity: 1;
transform: scale(1.1);
}
.song-icon {
fill: var(--text-color);
transition: fill 0.2s;
}
.song-menu-container {
position: relative;
margin-right: 12px;
}
.song-menu-btn {
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
opacity: 0.6;
transition: opacity 0.2s, background 0.2s, transform 0.1s;
}
.song-menu-btn:hover {
opacity: 1;
background: var(--hover-overlay);
transform: scale(1.05);
}
.song-menu-dropdown {
position: absolute;
top: 100%;
right: 0;
border-radius: 16px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
min-width: max-content;
z-index: 1001;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
padding: 6px;
backdrop-filter: blur(8px);
background: var(--glass-bg);
}
.song-menu-container.open .song-menu-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.song-item:last-child .song-menu-dropdown {
top: auto;
bottom: 100%;
margin-bottom: 8px;
margin-top: 0;
}
.song-item:last-child .song-menu-container.open .song-menu-dropdown {
transform: translateY(-3px);
}
.menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 12px;
text-decoration: none;
color: var(--text-color);
font-weight: 500;
font-family:"teenlite", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
transition: background 0.2s, color 0.2s;
border: none;
background: none;
width: 100%;
cursor: pointer;
font-size: 0.95rem;
letter-spacing: 0.7px;
}
.menu-item:hover {
background: var(--colorofdetails);
color: white;
}
.menu-item svg {
flex-shrink: 0;
}
.lyrics-modal-content {
max-width: 600px;
}
.lyrics-body {
padding: 20px;
white-space: pre-wrap;
line-height: 1.9;
font-size: 1.1rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
max-height: 60vh;
max-height: 60dvh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--colorofdetails) var(--white);
}
html.dark .lyrics-body{
scrollbar-color: var(--colorofdetails) var(--border-color);
}
.lyrics-body::-webkit-scrollbar {
width: 6px;
}
.lyrics-body::-webkit-scrollbar-track {
background: var(--border-color);
border-radius: 10px;
}
.lyrics-body::-webkit-scrollbar-thumb {
background: var(--colorofdetails);
border-radius: 10px;
}
@media (max-width: 600px) {
.song-item {
padding: 10px 12px;
}
.song-title {
font-size: 0.95rem;
}
.song-artist {
font-size: 0.8rem;
}
.song-index-number {
min-width: 25px;
margin-right: 10px;
}
.song-menu-btn {
padding: 4px;
}
.menu-item {
padding: 8px 5px;
font-size: 0.9rem;
}
}
/* ============================================================
PLAYER — single-row mini bar (mobile-first), full row on
desktop, and the expanded "now playing" view.
Navy/slate-blue surface, distinct between light and dark mode
(unlike the rest of the site's warm-stone palette) — the
orange accent (--colorofdetails / --progress-fill) is kept
for the progress bar and active toggle states, since
orange-on-navy reads as a deliberate, premium contrast.
============================================================ */
#player {
--player-bg: #faf6f3;
--player-text: #1c1917;
--player-text-secondary: #78716c;
--player-hover: rgba(28, 25, 23, 0.06);
--player-track: #e7e5e4;
--player-play-btn-bg: #1c1917;
--player-play-btn-fg: #fafaf9;
--player-divider: #e7e5e4;
}
html.dark #player {
--player-bg: #0f172a;
--player-text: #f1f5f9;
--player-text-secondary: #94a3b8;
--player-hover: rgba(255, 255, 255, 0.08);
--player-track: #263449;
--player-play-btn-bg: #f1f5f9;
--player-play-btn-fg: #0f172a;
--player-divider: #2c3b52;
}
#player {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 72px;
background: var(--player-bg);
color: var(--player-text);
z-index: 1000;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
border-radius: 16px 16px 0 0;
overflow: hidden;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
}
#player svg{
fill: var(--text-color);
}
.mobile-progress-line {
height: 3.5px;
background: var(--text-secondary);
flex-shrink: 0;
}
.mobile-progress-fill {
height: 100%;
width: 0%;
background: var(--progress-fill);
transition: width 0.15s linear;
}
.player-mini-row {
display: flex;
align-items: center;
gap: 10px;
min-height: 64px;
}
.player-mini-info {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.player-mini-info .cover-art {
width: 42px;
height: 42px;
border-radius: 7px;
flex-shrink: 0;
background: var(--player-hover);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--player-text-secondary);
}
.player-mini-info .cover-art img {
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
}
.player-mini-info .song-details {
display: flex;
flex-direction: column;
min-width: 0;
}
.player-mini-info .song-name {
font-size: 14px;
font-weight: 600;
color: var(--player-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-mini-info .artist-name {
font-size: 12px;
color: var(--player-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.add-to-playlist-btn {
flex-shrink: 0;
color: var(--player-text-secondary);
display: none;
}
.add-to-playlist-btn.active {
color: var(--colorofdetails);
}
.player-mini-center {
display: flex;
align-items: center;
gap: 10px;
}
.player-transport-controls {
display: flex;
align-items: center;
gap: 8px;
}
.play-pause-btn-lg {
background: var(--colorofdetails);
color: var(--player-play-btn-fg);
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
transition: transform 0.15s;
}
.play-pause-btn-lg svg{
color: var(--text-color);
}
.play-pause-btn-lg:hover {
transform: scale(1.06);
background-color: var(--accent-hover);
}
#player:not(.expanded) #shuffle-btn,
#player:not(.expanded) #repeat-btn {
display: none;
}
.player-progress-row {
display: none;
align-items: center;
gap: 8px;
width: 100%;
}
.progress-time {
font-size: 12px;
color: var(--player-text-secondary);
min-width: 30px;
flex-shrink: 0;
user-select: none;
}
#current-time { text-align: right; }
#duration-time { text-align: left; }
.progress-bar-wrapper {
flex: 1;
position: relative;
height: 14px;
display: flex;
align-items: center;
cursor: pointer;
}
.player-progress-track {
width: 100%;
height: 3px;
background: var(--player-track);
border-radius: 2px;
position: relative;
}
.player-progress-fill {
height: 100%;
width: 0%;
background: var(--progress-fill);
border-radius: 2px;
}
.player-progress-handle {
position: absolute;
top: 50%;
left: 0%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--progress-fill);
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
.progress-bar-wrapper:hover .player-progress-handle,
.progress-bar-wrapper.dragging .player-progress-handle {
opacity: 1;
}
.progress-tooltip {
position: absolute;
bottom: 100%;
margin-bottom: 8px;
transform: translateX(50%);
background: #000;
color: #fff;
font-size: 11px;
padding: 3px 7px;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s, visibility 0.15s;
pointer-events: none;
white-space: nowrap;
}
.progress-tooltip.show {
opacity: 1;
visibility: visible;
}
.player-mini-right {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.player-mini-right #mini-lyrics-btn,
.player-mini-right #expand-btn,
.player-mini-right #close-btn {
display: none;
}
.player-mini-right #close-btn {
margin-left: 4px;
padding-left: 10px;
border-left: 1px solid var(--player-divider);
border-radius: 0;
}
.player-mini-right #close-btn:hover {
background: rgba(234, 88, 12, 0.15);
color: var(--colorofdetails);
}
.player-ctrl-btn {
background: none;
border: none;
color: var(--player-text);
cursor: pointer;
padding: 7px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s, transform 0.1s;
}
.player-ctrl-btn svg{
color: var(--text-color);
}
.player-ctrl-btn:hover {
background: var(--player-hover);
}
#repeat-btn.active svg{
color: var(--colorofdetails);
}
#shuffle-btn.active svg{
fill: var(--colorofdetails);
}
@media (min-width: 769px) {
#player {
max-height: 96px;
}
.mobile-progress-line {
display: none;
}
.player-mini-row{
padding: 10px;
}
.player-mini-info {
flex: 0 0 auto;
width: 280px;
}
.player-mini-info .cover-art {
width: 54px;
height: 54px;
}
.add-to-playlist-btn {
display: flex;
}
.play-pause-btn-lg {
width: 38px;
height: 38px;
}
#player:not(.expanded) #shuffle-btn,
#player:not(.expanded) #repeat-btn {
display: flex;
}
.player-mini-center {
flex: 1;
flex-direction: column;
gap: 6px;
max-width: 640px;
margin: 0 auto;
}
.player-transport-controls {
gap: 20px;
}
#player:not(.expanded) .player-progress-row {
display: flex;
}
.player-mini-right {
flex: 0 0 auto;
width: 280px;
justify-content: flex-end;
gap: 4px;
}
.player-mini-right #mini-lyrics-btn,
.player-mini-right #expand-btn,
.player-mini-right #close-btn {
display: flex;
}
}
#player.expanded {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
z-index: 2000;
border-radius: 0;
box-shadow: none;
padding: 0 20px 24px;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
overscroll-behavior: contain;
}
body.player-expanded {
overflow: hidden;
overscroll-behavior-y: none;
}
.expanded-topbar {
display: none;
align-items: center;
justify-content: space-between;
padding: 16px 4px;
order: 1;
}
#player.expanded .expanded-topbar {
display: flex;
}
.expanded-topbar-label {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--player-text-secondary);
user-select: none;
}
#player.expanded .mobile-progress-line {
display: none;
}
.expanded-content {
display: none;
flex-direction: column;
align-items: center;
order: 2;
flex: 1;
justify-content: center;
min-height: 0;
overflow-y: auto;
}
#player.expanded .expanded-content {
display: flex;
}
.expanded-artwork {
width: min(70vw, 320px);
height: min(70vw, 320px);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
background: var(--player-hover);
color: var(--player-text-secondary);
margin-bottom: 24px;
flex-shrink: 0;
}
.expanded-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
}
.expanded-info {
text-align: center;
margin-bottom: 4px;
}
.expanded-song-title {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: var(--player-text);
text-decoration: none;
margin-bottom: 4px;
}
.expanded-song-artist {
display: block;
font-size: 0.95rem;
color: var(--player-text-secondary);
text-decoration: none;
}
#player.expanded .player-mini-row {
order: 3;
flex-direction: column;
padding: 0;
min-height: 0;
}
#player.expanded .player-mini-info,
#player.expanded .player-mini-right {
display: none;
}
#player.expanded .player-mini-center {
width: 100%;
max-width: 420px;
margin: 0 auto;
flex-direction: column;
gap: 10px;
}
#player.expanded #shuffle-btn,
#player.expanded #prev-btn,
#player.expanded #next-btn,
#player.expanded #repeat-btn {
display: flex;
}
#player.expanded .player-transport-controls {
gap: 22px;
}
#player.expanded .play-pause-btn-lg {
width: 56px;
height: 56px;
}
#player.expanded .player-progress-row {
display: flex;
}
.expanded-actions {
display: none;
align-items: center;
justify-content: center;
gap: 28px;
order: 4;
padding-top: 20px;
flex-shrink: 0;
}
#player.expanded .expanded-actions {
display: flex;
}
.expanded-actions .player-ctrl-btn {
color: var(--player-text-secondary);
}
@media (min-width: 769px) {
#player.expanded {
padding: 0 20px 40px;
}
.expanded-artwork {
width: min(40vw, 380px);
height: min(40vw, 380px);
}
}
/* The lyrics modal must render above the expanded player (z-index 2000),
otherwise opening lyrics while expanded puts the modal visually behind
the full-screen player and it looks like nothing happened. */
#lyricsModal {
z-index: 2600;
}
.playlist-panel {
position: fixed;
top: 0;
right: -340px;
width: 320px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
background: color-mix(in srgb, var(--card-bg) 75%, transparent);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow: -8px 0 25px rgba(0, 0, 0, 0.06);
z-index: 2000;
transition: right 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
display: flex;
flex-direction: column;
color: var(--text-color);
border-left: 1px solid var(--border-color);
border-radius: 24px 0 0 24px;
overflow: hidden;
}
.playlist-panel.open {
right: 0;
}
.playlist-panel-header {
padding: 24px 20px 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
background:transparent;
}
.playlist-panel-header h3 {
font-size: 1.3rem;
font-weight: 700;
margin: 0;
color: var(--text-color);
letter-spacing: 0.5px;
}
#close-playlist-panel {
background: none;
border: none;
color: var(--text-color);
font-size: 28px;
cursor: pointer;
padding: 6px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s, transform 0.1s;
opacity: 0.7;
}
#close-playlist-panel:hover {
background: var(--hover-overlay);
opacity: 1;
color: var(--colorofdetails);
}
.playlist-panel-content {
flex: 1;
overflow-y: auto;
padding: 8px;
padding-top: 12px;
padding-bottom: 40px;
scrollbar-width: thin;
scrollbar-color: var(--colorofdetails) var(--border-color);
}
.playlist-panel-content::-webkit-scrollbar {
width: 6px;
}
.playlist-panel-content::-webkit-scrollbar-track {
background: var(--border-color);
border-radius: 10px;
}
.playlist-panel-content::-webkit-scrollbar-thumb {
background: var(--colorofdetails);
border-radius: 10px;
}
.playlist-panel-item {
display: flex;
align-items: center;
padding: 12px 10px;
margin-bottom: 6px;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
background: transparent;
border: 1px solid transparent;
}
.playlist-panel-item:hover {
background: var(--hover-overlay);
border-color: var(--border-color);
transform: translateX(-4px);
}
.playlist-panel-item.active {
background: var(--colorofdetails);
color: white;
border-color: transparent;
}
.playlist-panel-item.active .playlist-panel-index,
.playlist-panel-item.active .playlist-panel-title,
.playlist-panel-item.active .playlist-panel-artist {
color: white;
opacity: 1;
}
.playlist-panel-index {
opacity: 0.7;
min-width: 15px;
font-weight: 600;
font-size: 0.9rem;
color: var(--text-color);
transition: color 0.2s;
}
.playlist-panel-title {
flex: 1;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-color);
transition: color 0.2s;
}
.playlist-panel-artist {
font-size: 0.8rem;
opacity: 0.65;
margin-left: 12px;
font-weight: 400;
color: var(--text-color);
transition: color 0.2s;
white-space: nowrap;
}
.playlist-panel-empty {
text-align: center;
padding: 40px 20px;
opacity: 0.6;
color: var(--text-color);
}
.artists-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-top: 20px;
will-change: transform;
transform: translateZ(0);
}
.artist-card-link {
text-decoration: none;
color: inherit;
contain: layout style paint;
content-visibility: auto;
contain-intrinsic-size: 216px;
}
.artist-card-placeholder {
width: 100%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: var(--border-color);
color: var(--text-secondary);
}
@media (max-width: 480px) {
.expanded-topbar{
padding-bottom: 0;
padding-top: 20px;
}
.playlist-panel {
width: 280px;
border-radius: 20px 0 0 20px;
}
.playlist-panel-header {
padding: 20px 16px 12px;
}
.playlist-panel-item {
padding: 10px 5px;
}
}
.song-item.shared-song {
border-left: 6px solid var(--colorofdetails);
animation: pulseHighlight 1.5s ease-in-out;
}
@keyframes pulseHighlight {
0%, 100% { background: var(--card-bg); }
50% { background: rgba(255, 22, 75, 0.15); }
}
.aboutME {
max-width: 800px;
margin: 40px auto;
padding: 24px 28px;
background: var(--card-bg);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: background 0.3s, box-shadow 0.3s;
}
.aboutME h3 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 0;
margin-bottom: 20px;
color: var(--text-color);
text-align: center;
letter-spacing: 0.5px;
}
.updates-table {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.update-row {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 12px 16px;
background: var(--bg-secondary, rgba(255,255,255,0.04));
border-radius: 12px;
transition: background 0.2s;
}
.update-row:hover {
background: var(--bg-hover, rgba(255,255,255,0.08));
}
.update-version {
flex-shrink: 0;
min-width: 60px;
font-weight: 700;
font-size: 1.1rem;
color: var(--colorofdetails, #ea580c);
padding-top: 2px;
}
.update-dates {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
align-items: center;
}
.date-tag {
display: inline-block;
padding: 2px 12px;
background: var(--tag-bg, rgba(234, 88, 12, 0.12));
color: var(--tag-text, #ea580c);
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.3px;
transition: background 0.2s, color 0.2s;
}
.dark .date-tag {
--tag-bg: rgba(234, 88, 12, 0.2);
--tag-text: #f59e0b;
}
.copyright {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.9rem;
color: var(--text-muted, #888);
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.copyright svg {
display: inline-block;
vertical-align: middle;
}
@media (max-width: 600px) {
.aboutME {
padding: 18px 16px;
margin: 20px 12px;
}
.update-row {
flex-direction: column;
gap: 8px;
padding: 14px;
}
.update-version {
min-width: auto;
font-size: 1rem;
}
.date-tag {
font-size: 0.75rem;
padding: 2px 10px;
}
}
@media (max-width: 600px) {
.logo a {
font-size: 25px;
}
#player {
padding: 10px;
padding-bottom: 15px;
}
#player-time-info {
min-width: 60px;
font-size: 12px;
}
}
.hidden {
display: none !important;
}
.contact-section {
max-width: 800px;
margin: 30px auto 20px;
padding: 16px 20px;
background: var(--card-bg);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 20px;
transition: background 0.3s;
}
.contact-header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.contact-title {
font-weight: 600;
font-size: 1.05rem;
color: var(--text-color);
letter-spacing: 0.3px;
}
.contact-links {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: transparent;
color: var(--text-muted, #888);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.25s ease;
cursor: pointer;
}
.contact-link:hover {
color: var(--colorofdetails, #ea580c);
border-color: var(--colorofdetails, #ea580c);
background: rgba(234, 88, 12, 0.05);
}
.contact-link:active {
transform: translateY(0);
}
.contact-link svg {
flex-shrink: 0;
}
@media (max-width: 600px) {
.contact-section {
flex-direction: column;
align-items: flex-start;
padding: 14px 16px;
margin: 20px 12px 16px;
}
.contact-links {
width: 100%;
justify-content: flex-start;
gap: 12px;
}
.contact-link {
padding: 8px 14px;
}
}