* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background:
radial-gradient(
circle at top,
#111b29 0%,
#080b10 38%,
#05070a 100%
);
background-attachment: fixed;
color: #ffffff;
font-family:
Arial,
Helvetica,
sans-serif;
min-height: 100vh;
}
/* HEADER */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background:
rgba(5, 7, 10, 0.92);
backdrop-filter: blur(12px);
border-bottom:
1px solid rgba(255,255,255,0.08);
}
.header-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
width: 100%;
margin: 0 auto;
}
.brand {
color: #ffffff;
text-decoration: none;
font-size: 24px;
font-weight: 400;
letter-spacing: 8px;
}
.main-nav {
display: flex;
align-items: center;
gap: 38px;
margin: 0;
}
.main-nav a {
color: #9da7b5;
text-decoration: none;
font-size: 12px;
letter-spacing: 2px;
transition:
color 0.2s;
}
.main-nav a:hover {
color: #d7b46a;
}
/* MAIN */
main {
min-height: 70vh;
}
/* FOOTER */
.site-footer {
text-align: center;
padding:
60px 20px 40px;
border-top:
1px solid rgba(255,255,255,0.08);
color: #7f8997;
}
.footer-brand {
color: #ffffff;
font-size: 20px;
letter-spacing: 7px;
margin-bottom: 10px;
}
.footer-text {
font-size: 11px;
letter-spacing: 2px;
margin-bottom: 25px;
}
.copyright {
font-size: 11px;
}
/* MOBILE HEADER */
.mobile-menu-button {
display: none;
}
@media (max-width: 700px) {
.header-inner {
height: auto;
min-height: 80px;
padding: 10px 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
}
.logo {
display: flex;
align-items: center;
margin: 0;
}
.logo img {
display: block;
}
.mobile-menu-button {
display: block;
background: transparent;
border: 0;
color: #d7b46a;
font-size: 28px;
cursor: pointer;
padding: 10px;
}
.main-nav {
display: none;
position: absolute;
top: 90px;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background: #080b10;
border:
1px solid rgba(255,255,255,.08);
padding: 10px 0;
}
.main-nav.mobile-open {
display: flex;
}
.main-nav a {
display: block;
padding: 15px 20px;
font-size: 11px;
text-align: center;
border-bottom:
1px solid rgba(255,255,255,.06);
}
.main-nav a:last-child {
border-bottom: 0;
}
}
/* HERO */
.hero {
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 20px;
background:
radial-gradient(
circle at 50% 35%,
rgba(55, 95, 145, 0.18),
transparent 30%
),
radial-gradient(
circle at 65% 50%,
rgba(215, 180, 106, 0.08),
transparent 25%
);
}
.hero-content {
max-width: 900px;
}
.hero-name {
font-size:
clamp(45px, 9vw, 100px);
letter-spacing:
clamp(10px, 2vw, 24px);
font-weight: 300;
margin-left: 20px;
}
.hero-line {
width: 100px;
height: 1px;
margin: 30px auto;
background:
linear-gradient(
90deg,
#6d93bd,
#d7b46a
);
}
.hero-tagline {
color: #aab3bf;
font-size: 12px;
letter-spacing: 4px;
margin-bottom: 40px;
}
.hero-button {
display: inline-block;
padding: 15px 30px;
color: #ffffff;
text-decoration: none;
font-size: 11px;
letter-spacing: 3px;
border:
1px solid #8b7447;
transition: 0.25s;
}
.hero-button:hover {
background: #d7b46a;
color: #080b10;
}
/* LATEST RELEASE */
.latest-release {
width: 90%;
max-width: 1050px;
margin: 0 auto;
padding: 40px 0 120px;
}
.section-label {
color: #d7b46a;
font-size: 11px;
letter-spacing: 4px;
margin-bottom: 25px;
}
.release-card {
display: grid;
grid-template-columns:
minmax(250px, 420px)
1fr;
gap: 60px;
align-items: center;
}
.release-artwork img,
.artwork-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 4px;
}
.artwork-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle,
#17263a,
#090d13
);
border:
1px solid #253348;
color: #d7b46a;
font-size: 100px;
font-family: Georgia, serif;
}
.release-small {
color: #768292;
font-size: 10px;
letter-spacing: 3px;
margin-bottom: 15px;
}
.release-info h2 {
font-size:
clamp(30px, 5vw, 52px);
font-weight: 300;
margin:
0 0 10px;
}
.release-artist {
color: #d7b46a;
letter-spacing: 4px;
font-size: 12px;
margin-bottom: 30px;
}
.release-info p {
color: #a2acb9;
line-height: 1.8;
max-width: 550px;
}
.release-info audio {
width: 100%;
margin-top: 20px;
}
@media (max-width: 750px) {
.hero {
min-height: 500px;
}
.release-card {
grid-template-columns:
1fr;
gap: 35px;
}
}
/* REYVARA PLAYER */
body {
padding-bottom: 105px;
}
.reyvara-player {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
min-height: 95px;
padding: 14px 28px;
display: grid;
grid-template-columns:
minmax(230px, 1fr)
minmax(350px, 2fr)
minmax(130px, .6fr);
align-items: center;
gap: 30px;
background:
rgba(7, 10, 15, .97);
border-top:
1px solid rgba(215,180,106,.25);
backdrop-filter:
blur(15px);
}
.rp-track {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.rp-artwork-wrap {
width: 62px;
height: 62px;
flex: 0 0 62px;
}
.rp-artwork,
.rp-artwork-placeholder {
width: 62px;
height: 62px;
object-fit: cover;
border-radius: 3px;
}
.rp-artwork-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle,
#17263a,
#090d13
);
border:
1px solid #26364a;
color: #d7b46a;
font-family:
Georgia, serif;
font-size: 28px;
}
.rp-info {
min-width: 0;
}
.rp-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
margin-bottom: 6px;
}
.rp-artist {
color: #d7b46a;
font-size: 9px;
letter-spacing: 3px;
}
.rp-main {
width: 100%;
}
.rp-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 9px;
}
.rp-buttons button {
width: 34px;
height: 34px;
border: 0;
background: transparent;
color: #b8c0ca;
cursor: pointer;
font-size: 13px;
}
.rp-buttons .rp-play {
width: 42px;
height: 42px;
border:
1px solid #9b804c;
border-radius: 50%;
color: #ffffff;
}
.rp-buttons button:hover {
color: #d7b46a;
}
.rp-progress-row {
display: grid;
grid-template-columns:
42px 1fr 42px;
align-items: center;
gap: 10px;
color: #7f8997;
font-size: 10px;
}
.rp-progress-row input,
.rp-volume input {
width: 100%;
accent-color: #d7b46a;
cursor: pointer;
}
.rp-volume {
display: grid;
grid-template-columns:
30px 1fr;
align-items: center;
gap: 10px;
color: #7f8997;
font-size: 9px;
letter-spacing: 1px;
}
@media (max-width: 800px) {
body {
padding-bottom: 150px;
}
.reyvara-player {
grid-template-columns:
1fr;
gap: 10px;
padding:
12px 18px;
}
.rp-volume {
display: none;
}
.rp-artwork-wrap {
width: 45px;
height: 45px;
flex-basis: 45px;
}
.rp-artwork,
.rp-artwork-placeholder {
width: 45px;
height: 45px;
}
}
.release-play-button {
margin-top: 25px;
padding: 14px 24px;
background: transparent;
color: #ffffff;
border: 1px solid #8b7447;
font-size: 10px;
letter-spacing: 2px;
cursor: pointer;
transition: .25s;
}
.release-play-button:hover {
background: #d7b46a;
color: #080b10;
}
/* MUSIC PAGE */
.music-page {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding:
70px 0 120px;
}
.music-heading {
margin-bottom: 50px;
}
.music-heading h1 {
margin:
5px 0 15px;
font-size:
clamp(42px, 6vw, 70px);
font-weight: 300;
letter-spacing: 3px;
}
.music-heading p {
margin: 0;
color: #8f99a7;
font-size: 14px;
letter-spacing: 1px;
}
/* GRID */
.music-grid {
display: grid;
grid-template-columns:
repeat(
auto-fill,
minmax(240px, 1fr)
);
gap: 45px 30px;
}
/* CARD */
.music-card {
min-width: 0;
}
.music-artwork {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #0d1219;
border:
1px solid rgba(
255,
255,
255,
.08
);
}
.music-artwork img,
.music-artwork-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.music-artwork-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle at 50% 40%,
#1b3048,
#0b1017 60%,
#06080c
);
color: #d7b46a;
font-family:
Georgia,
serif;
font-size: 90px;
}
/* PLAY BUTTON */
.music-play-overlay {
position: absolute;
left: 50%;
top: 50%;
transform:
translate(-50%, -50%);
width: 65px;
height: 65px;
border-radius: 50%;
border:
1px solid rgba(
215,
180,
106,
.85
);
background:
rgba(
5,
8,
12,
.78
);
color: #ffffff;
font-size: 20px;
cursor: pointer;
opacity: 0;
transition:
opacity .25s,
background .25s,
transform .25s;
}
.music-artwork:hover
.music-play-overlay {
opacity: 1;
}
.music-play-overlay:hover {
background: #d7b46a;
color: #080b10;
transform:
translate(-50%, -50%)
scale(1.08);
}
/* TRACK INFO */
.music-card-info {
padding-top: 16px;
}
.music-card-info h2 {
margin:
0 0 10px;
font-size: 18px;
font-weight: 400;
line-height: 1.35;
}
.music-card-meta {
display: flex;
justify-content:
space-between;
gap: 20px;
color: #d7b46a;
font-size: 10px;
letter-spacing: 2px;
}
.music-release-date {
margin-top: 8px;
color: #697483;
font-size: 11px;
}
.music-empty {
padding:
60px 0;
color: #8993a1;
}
/* MOBILE */
@media (max-width: 600px) {
.music-page {
padding-top: 45px;
}
.music-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
30px 15px;
}
.music-card-info h2 {
font-size: 14px;
}
.music-play-overlay {
opacity: 1;
width: 50px;
height: 50px;
}
}
@media (max-width: 400px) {
.music-grid {
grid-template-columns:
1fr;
}
}
/* INDIVIDUAL TRACK PAGE */
.track-page {
width: 90%;
max-width: 1100px;
margin: 0 auto;
padding: 60px 0 120px;
}
.track-back {
display: inline-block;
margin-bottom: 40px;
color: #7f8997;
text-decoration: none;
font-size: 10px;
letter-spacing: 2px;
}
.track-back:hover {
color: #d7b46a;
}
.track-layout {
display: grid;
grid-template-columns:
minmax(280px, 480px)
1fr;
gap: 70px;
align-items: center;
}
.track-page-artwork img,
.track-page-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.track-page-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle at 50% 40%,
#1b3048,
#0b1017 60%,
#06080c
);
border:
1px solid rgba(
255,
255,
255,
.08
);
color: #d7b46a;
font-family: Georgia, serif;
font-size: 130px;
}
.track-page-info h1 {
margin: 5px 0 20px;
font-size:
clamp(38px, 6vw, 65px);
font-weight: 300;
line-height: 1.05;
}
.track-details {
display: flex;
gap: 25px;
color: #7f8997;
font-size: 11px;
letter-spacing: 2px;
margin-bottom: 30px;
}
.track-main-play {
padding: 15px 26px;
background: transparent;
border:
1px solid #8b7447;
color: #ffffff;
font-size: 10px;
letter-spacing: 2px;
cursor: pointer;
}
.track-main-play:hover {
background: #d7b46a;
color: #080b10;
}
.track-description {
margin-top: 35px;
max-width: 550px;
color: #9ba5b2;
line-height: 1.8;
}
.lyrics-section,
.video-section {
max-width: 750px;
margin-top: 90px;
padding-top: 40px;
border-top:
1px solid rgba(
255,
255,
255,
.08
);
}
.lyrics {
color: #aab2bd;
line-height: 2;
font-size: 15px;
}
.youtube-button {
display: inline-block;
padding: 14px 24px;
color: #ffffff;
border:
1px solid #8b7447;
text-decoration: none;
font-size: 10px;
letter-spacing: 2px;
}
.youtube-button:hover {
background: #d7b46a;
color: #080b10;
}
@media (max-width: 750px) {
.track-layout {
grid-template-columns: 1fr;
gap: 35px;
}
}
.music-track-link {
color: #ffffff;
text-decoration: none;
}
.music-track-link:hover {
color: #d7b46a;
}
/* ABOUT PAGE */
.about-page {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 70px 0 120px;
}
.about-intro {
padding-bottom: 50px;
border-bottom:
1px solid rgba(255,255,255,.08);
}
.about-intro h1 {
margin: 10px 0;
font-size:
clamp(55px, 10vw, 110px);
font-weight: 300;
letter-spacing:
clamp(8px, 2vw, 20px);
}
.about-tagline {
color: #d7b46a;
font-size: 11px;
letter-spacing: 5px;
}
.about-content {
max-width: 700px;
margin-top: 50px;
}
.about-lead {
margin-bottom: 35px;
color: #ffffff;
font-size:
clamp(23px, 3vw, 32px);
font-weight: 300;
line-height: 1.5;
}
.about-content p {
color: #9ca6b3;
font-size: 15px;
line-height: 1.9;
margin-bottom: 25px;
}
.about-button {
display: inline-block;
margin-top: 25px;
padding: 15px 25px;
color: #ffffff;
text-decoration: none;
border: 1px solid #8b7447;
font-size: 10px;
letter-spacing: 2px;
transition: .25s;
}
.about-button:hover {
background: #d7b46a;
color: #080b10;
}
/* CONTACT PAGE */
.contact-page {
width: 90%;
max-width: 900px;
margin: 0 auto;
padding: 70px 0 130px;
}
.contact-heading {
max-width: 650px;
margin-bottom: 55px;
}
.contact-heading h1 {
margin: 10px 0 20px;
font-size:
clamp(42px, 7vw, 75px);
font-weight: 300;
line-height: 1.1;
}
.contact-heading p {
color: #9ca6b3;
font-size: 15px;
line-height: 1.8;
}
/* FORM */
.contact-form {
max-width: 700px;
}
.contact-field {
margin-bottom: 25px;
}
.contact-field label {
display: block;
margin-bottom: 9px;
color: #d7b46a;
font-size: 9px;
letter-spacing: 3px;
}
.contact-field input,
.contact-field textarea {
width: 100%;
padding: 15px;
background: #0d1219;
color: #ffffff;
border:
1px solid #29313d;
border-radius: 3px;
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color .2s;
}
.contact-field input:focus,
.contact-field textarea:focus {
border-color: #8b7447;
}
.contact-field textarea {
min-height: 180px;
resize: vertical;
}
.contact-submit {
margin-top: 10px;
padding: 15px 27px;
background: transparent;
color: #ffffff;
border: 1px solid #8b7447;
font-size: 10px;
letter-spacing: 2px;
cursor: pointer;
transition: .25s;
}
.contact-submit:hover {
background: #d7b46a;
color: #080b10;
}
/* REYVARA HEADER LOGO */
.logo {
display: flex;
align-items: center;
height: 82px;
text-decoration: none;
}
.logo img {
display: block;
width: auto;
height: 75px;
object-fit: contain;
}
/* NEW RELEASE SIGNUP */
.release-signup {
width: 90%;
max-width: 1100px;
margin: 30px auto 110px;
padding: 65px 40px;
text-align: center;
background:
radial-gradient(
circle at center,
#121d2a 0%,
#0b1119 55%,
#080b10 100%
);
border:
1px solid rgba(215,180,106,.18);
}
.release-signup-inner {
max-width: 620px;
margin: 0 auto;
}
.release-signup h2 {
margin: 12px 0 15px;
color: #ffffff;
font-size:
clamp(27px, 4vw, 42px);
font-weight: 300;
letter-spacing: 5px;
}
.release-signup p {
margin: 0 auto 30px;
color: #939daa;
font-size: 14px;
line-height: 1.7;
}
.release-signup-form {
display: flex;
max-width: 520px;
margin: 0 auto;
}
.release-signup-form input {
flex: 1;
min-width: 0;
padding: 15px 17px;
background: #0a0f16;
color: #ffffff;
border: 1px solid #29313d;
border-right: 0;
outline: none;
font-family: inherit;
}
.release-signup-form input::placeholder {
color: #697381;
}
.release-signup-form button {
padding: 0 25px;
background: transparent;
color: #d7b46a;
border: 1px solid #8b7447;
font-size: 10px;
letter-spacing: 2px;
}
.release-signup-form input:disabled,
.release-signup-form button:disabled {
opacity: .75;
}
.release-signup-note {
margin-top: 14px;
color: #5f6874;
font-size: 8px;
letter-spacing: 3px;
}
@media (max-width: 600px) {
.release-signup {
padding:
50px 20px;
}
.release-signup-form {
display: block;
}
.release-signup-form input {
width: 100%;
border-right:
1px solid #29313d;
}
.release-signup-form button {
width: 100%;
padding: 15px;
margin-top: 10px;
}
}
/* LEGAL PAGES */
.legal-page {
width: 90%;
max-width: 1100px;
margin: 0 auto;
padding: 70px 0 120px;
}
.legal-inner {
max-width: 780px;
}
.legal-page h1 {
margin: 12px 0 8px;
font-size: clamp(32px, 5vw, 48px);
font-weight: 300;
letter-spacing: 6px;
}
.legal-updated {
margin-bottom: 50px;
color: #697381;
font-size: 11px;
letter-spacing: 1px;
}
.legal-page section {
margin-bottom: 38px;
}
.legal-page h2 {
margin-bottom: 12px;
color: #d7b46a;
font-size: 12px;
font-weight: 400;
letter-spacing: 3px;
}
.legal-page p {
margin: 0 0 14px;
color: #aab2bd;
font-size: 14px;
line-height: 1.8;
}
/* MUSIC LICENSE */
.license-credit {
margin: 22px 0;
padding: 20px 22px;
background: #0d1219;
border: 1px solid #29313d;
border-left: 3px solid #d7b46a;
color: #ffffff;
font-size: 14px;
line-height: 1.8;
}
.license-credit-label {
margin-bottom: 8px;
color: #d7b46a;
font-size: 9px;
letter-spacing: 3px;
}
/* CONTACT FORM MESSAGES */
.contact-success,
.contact-error {
width: 100%;
padding: 18px 20px;
margin: 0 0 40px 0;
font-size: 13px;
line-height: 1.6;
border-radius: 3px;
}
.contact-success {
background: #14251c;
border: 1px solid #28563a;
color: #b8d8c3;
}
.contact-error {
background: #2b1618;
border: 1px solid #6a3035;
color: #e0b5b8;
}
.release-signup-note {
font-size: 15px;
margin-top: 16px;
line-height: 1.5;
}
.release-signup-message {
margin-top: 30px;
font-size: 16px !important;
line-height: 1.5;
font-weight: 500;
}
/* ========================================
FINAL RESPONSIVE HEADER
======================================== */
/* DESKTOP - NEVER SHOW HAMBURGER */
.mobile-menu-button {
display: none !important;
}
/* MOBILE */
@media screen and (max-width: 700px) {
.header-inner {
height: auto;
min-height: 90px;
padding: 10px 15px;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
}
.logo {
height: 70px;
}
.logo img {
height: 65px;
}
/* SHOW HAMBURGER */
.mobile-menu-button {
display: block !important;
background: transparent;
border: 0;
color: #d7b46a;
font-size: 28px;
padding: 10px;
cursor: pointer;
}
/* HIDE DESKTOP MENU */
.main-nav {
display: none !important;
position: absolute;
top: 90px;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
padding: 10px 0;
background: #080b10;
border-top:
1px solid rgba(255,255,255,.08);
}
/* SHOW MENU ONLY AFTER ☰ IS PRESSED */
.main-nav.mobile-open {
display: flex !important;
}
.main-nav a {
display: block;
width: 100%;
padding: 15px 20px;
text-align: center;
font-size: 11px;
border-bottom:
1px solid rgba(255,255,255,.06);
}
}
.android-coming-soon {
padding: 80px 20px;
margin-bottom: 80px;
background: #0b0f15;
border-top: 1px solid #1b222c;
border-bottom: 1px solid #1b222c;
text-align: center;
}
.android-coming-soon-inner {
max-width: 700px;
margin: 0 auto;
}
.android-icon {
width: 64px;
height: 64px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d7b46a;
border-radius: 50%;
color: #d7b46a;
font-size: 30px;
}
.android-coming-soon h2 {
margin: 12px 0 18px;
color: #ffffff;
font-size: 30px;
font-weight: 400;
letter-spacing: 4px;
}
.android-coming-soon p {
max-width: 560px;
margin: 0 auto 28px;
color: #8993a1;
font-size: 16px;
line-height: 1.7;
}
.android-coming-badge {
display: inline-block;
padding: 12px 20px;
border: 1px solid #d7b46a;
border-radius: 3px;
color: #d7b46a;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
}
.about-app {
margin-top: 30px;
margin-bottom: 30px;
color: #ffffff;
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
}
.about-app span {
margin-left: 10px;
color: #d7b46a;
}