SHOWS
No Shows Currently Scheduled
SHOP
You can find vinyls, cds, and mp3s here!
Booking/
Press
For booking, please contact Laíz here:
contact@Laizmusica.com
You can find my EPK here!
/* NEWSLETTER PAGE STYLES */
/*.newsletter-page { outline: 2px solid #ea18ea; z-index: 100; background: rgba(202, 169, 169, 0.5);}
.form-container { outline: 2px solid #24e26b; }
/*.media-cell {outline: 2px dashed #c7d647; } */
/*.collage-image { outline: 2px solid rgba(0, 255, 0, 0);} */
/* Temporary debug background */
.media-track { border: 7px solid rgba(56, 215, 93, 0); background: rgba(225, 98, 98, 0); }
/*.media-cell { background: rgba(0, 255, 0, 0); }
.media-scene { border: 1px solid red; }*/
/*.sticky-content-wrapper {background: 2px solid rgba(183, 194, 237, 0.85);}*/
/* Main Container */
.media-scene {
position: static !important;
isolation: isolate; /* Creates new stacking context */
will-change: transform; /* GPU layer */
height: 724vh; /* Same as newsletter-page */
width: 100vw;
margin-top: -45vw; /* Pull entire scene up */
padding-top: 35vw; /* Prevent content clipping */
z-index: 35;
display: flex !important; /* Key for sticky children */
flex-direction: column !important;
justify-content: flex-end !important; /* Push to bottom */
}
/* Horizontal Track */
.media-track {
position: sticky !important;
bottom: 0; /* Locks to viewport bottom */
left: 0;
height: 100vh;
width: 100vw;
display: flex;
margin-top: -56vh; /* Pull entire scene up */
padding-top: 60vh; /* Prevent content clipping */
justify-content: center;
align-items: flex-end;
align-self: flex-end !important; /* Match bio-content */
transform-style: preserve-3d !important; /* Match albums */
z-index: 35 !important; /* Match media-scene */
}
/* Individual Cells */
.media-cell {
position: absolute; /* All cells occupy same space */
width: 100%;
max-width: 2500px;
min-width: 950;
height: 100%;
top: 0;
left: 0;
z-index: var(--z-index); /* Controls stacking order */
contain: strict; /* Limits repaints to cell bounds */
backface-visibility: hidden; /* Prevents flickering */
/* Match your album image styling */
transform-style: preserve-3d;
perspective: 800px;
}
/* Debug Labels */
.media-cell::after {
content: attr(data-debug);
position: absolute;
top: 20px;
left: 20px;
color: rgba(255, 255, 255, 0);
font-family: monospace;
background: rgba(0, 0, 0, 0);
padding: 5px;
z-index: 100;
}
/* Collage image styling (matches your albums) */
.collage-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Newsletter page container */
.newsletter-page {
position: static; /* Disable positioning contexts */
min-height: 700vh; /* Maintain your scroll length */
width: 100vw;
/* padding: 0vw; */
z-index: 20; /* Above other content */
overflow: visible !important; /* Let content extend past boundaries */
contain: style !important; /* Prevent layout thrashing */
}
/* Sticky Wrapper Container */
.sticky-content-wrapper {
position: sticky;
top: 75vh; /* Changed from bottom:0 to stick at 50vh */
left: 0;
width: 100%;
height: 100vh;
margin-top: 10vh; /* Pull entire scene up */
justify-content: flex-end;
z-index: 35;
overflow: visible;
pointer-events: none;
transform: translateY(-50%); /* Center vertically */
margin-bottom: 50vh; /* Prevent content jump */
}
/* Inner Content Styles */
.sticky-content-wrapper column-set {
position: relative;
bottom: 0;
width: 100%;
pointer-events: auto;
transform: none;
/* border: 4px solid rgba(0, 216, 255, 0.3); */
}
/* Form container */
.form-container {
position: sticky;
top: 20vh; /* Adjust vertical position */
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 24px;
background: rgba(255,255,255,0);
backdrop-filter: blur(10px);
border-radius: 12px;
}
/* Mailchimp form overrides */
.form-container #mc_embed_signup {
background: rgba(241, 156, 156, 0) !important;
width: 100% !important;
padding: 0 !important;
position: relative; /* Change from sticky to relative */
top: -69vh !important; /* Pull up by 50vh */
margin-bottom: -25vh; /* Compensate for layout shift */
transform: translateY(25vh); /* Fine-tune positioning */
z-index: 40;
font-weight: 700;
font-style: normal;
}
.form-container #mc_embed_signup input,
.form-container #mc_embed_signup label {
color: #ffffff !important;
}
.form-container #mc_embed_signup input {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#mc_embed_signup .button {
background-color: #e17a01 !important; /* Your orange color */
color: #191919 !important; /* Text color */
border: none !important;
}
/* Hover state */
#mc_embed_signup .button:hover {
background-color: #5f948f !important; /* Slightly darker orange */
}
#mc_embed_signup .button {
background-color: #e17a01 !important;
color: #191919 !important;
font-family: Anisette;
font-size: 16px !important;
border-radius: 4px !important;
font-weight: 700 !important;
transition: background-color 0.3s ease !important;
font-style: normal;
}
.socials-content {
position: relative;
width: 100%;
text-align: left; /* Force left alignment */
margin: 0; /* Reset margins */
padding: 0; /* Reset padding */
background: rgba(255, 255, 255, 0); /* Example background */
border-radius: 8px;
}
.media-cell-1 { transform: translateX(-50px) translateY(-180px) scale(0.7); }
.media-cell-2 { transform: translateX(-700px) translateY(-211px) scale(0.9); }
.media-cell-3 { transform: translateX(-648px) translateY(-400px) scale(0.7); }
.media-cell-4 { transform: translateX(300px) translateY(400px) scale(1.2); }
.media-cell-5 { transform: translateX(-900px) translateY(-500px) scale(0.8); }
.media-cell-6 { transform: translateX(700px) translateY(-550px) scale(0.7); }
.media-cell-7 { transform: translateX(-309px) translateY(-489px) scale(0.7); }
.media-cell-8 { transform: translateX(150px) translateY(600px) scale(0.7); }
.media-cell-9 { transform: translateX(500px) translateY(-300px) scale(0.5); }
.media-cell-10 { transform: translateX(50px) translateY(-200px) scale(0.4); }
.page-spacer {
height: 60vh;
}
column-set {
display: flex;
}
.reverse-on-mobile {
display: flex;
}
.socials-section-spacer-top {
height: 60px; /* Equivalent to ~4
tags */
}
@media only screen and (max-width: 768px) {
.bio-content media-item {
width: 90vw !important;
height: 90vw !important;
max-width: 90vw !important;
}
.bio-content {
transform: translateX(-22%) translateY(-50%);
}
.bio-mask {
width: 5vw !important;
}
.album {
width: 90vw !important;
height: 90vw !important;
max-width: 90vw !important;
}
.album media-item {
width: 90vw !important;
height: 90vw !important;
max-width: 90vw !important;
}
.albums-container {
transform: translateX(29%) translateY(0%);
}
.page-spacer {
height: 60vh !important;
min-height: 1px !important; /* Ensures it never collapses */
margin: 0 !important; /* Remove any vertical spacing */
}
.reverse-on-mobile {
flex-direction: column;
}
.reverse-on-mobile column-unit[slot="0"] { order: 1 !important; }
.reverse-on-mobile column-unit[slot="1"] { order: 2 !important; }
.reverse-on-mobile column-unit[slot="2"] { order: 0 !important; }
.reverse-on-mobile column-unit[slot="0"] > h1:nth-of-type(1),
.reverse-on-mobile column-unit[slot="0"] > hr:nth-of-type(1),
.reverse-on-mobile column-unit[slot="0"] > br,
.reverse-on-mobile column-unit[slot="0"] shows-and-info,
.reverse-on-mobile column-unit[slot="0"] > *:not(hr):not(h1) {
margin-left: 20px !important; transform: translateY(-57px) !important;
position: relative; /* Needed for transform */
}
/* Booking section */
.reverse-on-mobile column-unit[slot="0"] > h1:nth-of-type(2),
.reverse-on-mobile column-unit[slot="0"] > hr:nth-of-type(2),
.reverse-on-mobile column-unit[slot="0"] shows-and-info {
margin-left: 20px !important; transform: translateY(-57px) !important;
position: relative; /* Needed for transform */
}
/* Socials section */
.reverse-on-mobile column-unit[slot="2"] #mc_embed_signup h1,
.reverse-on-mobile column-unit[slot="2"] #mc_embed_signup hr,
.reverse-on-mobile column-unit[slot="2"] #mc_embed_signup .socials-content {
margin-left: 20px !important;
padding-left: 0 !important;
}
.socials-section-spacer-top {
height: 3px;
}
.media-scene {
display: none !important;
}
.newsletter-page {
min-height: 100vh !important; /* At least full viewport */
height: auto !important; /* Grow with content */
}
}
@media only screen and (max-width: 768px) {
.media-scene {
display: none !important;
}
}