/* * Global styles for Ian Burgos' website. * The palette and typography evoke a modern classical aesthetic inspired by * professional musician portfolios. The layout is responsive to ensure a * pleasant experience on mobile, tablet and desktop devices. */ /* Base reset and typography */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; color: #333; background-color: #fdfdfd; line-height: 1.6; } /* * Apply a fixed full-screen image behind all content. This pseudo * element sits at the bottom of the stacking context (negative * z-index) so that every section appears to slide over the hero * photograph as the user scrolls, similar to the seamless * experience on Sean Kennard’s website. A subtle dark overlay is * applied on top to ensure text remains legible. */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('assets/closeup1.jpg'); background-size: cover; background-position: center; z-index: -2; transform: translateZ(0); } /* When the page scrolls past the first section (about), * apply an alternate background image. A class is toggled on * the element by JavaScript to switch images. */ body.alt-bg::before { background-image: url('assets/hero2.jpg'); } /* Dark overlay on top of the background image */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: -1; } h1, h2 { font-family: 'Playfair Display', serif; color: #242424; margin-bottom: 0.5em; } /* Override hero heading color to stand out on dark background */ #hero .hero-content h1 { color: #ffffff; font-family: 'Cinzel', serif; } #hero .hero-content .tagline { color: #d7c79d; } /* Navigation styling */ .nav { width: 100%; padding: 1rem 2rem; position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; z-index: 10; font-size: 1rem; color: #fff; } .nav .logo { font-size: 1.4rem; font-weight: 700; font-family: 'Cinzel', serif; } .nav-links { list-style: none; display: flex; gap: 1.5rem; } .nav-links a { color: #fff; text-decoration: none; transition: color 0.3s ease; } .nav-links a:hover { color: #f5d042; } /* Hero section * * The top section of the site is purely a container for the name * and tagline. The actual background image is now fixed on the * via a pseudo element so it stays put as visitors * scroll. This approach echoes the seamless feel of the * reference site where the opening portrait remains behind the * content. We avoid setting a background on the hero itself so * that the image can be controlled globally from the body ::before * rule below. */ #hero { height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; } /* Semi-transparent overlay for readability on the hero text. * Match the global overlay opacity so there are no visible * differences when sections overlap the hero background. */ #hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* The hero overlay is now fully transparent because a global * overlay is applied on the body. This prevents a darker * patch appearing where the hero ends and ensures a consistent * opacity across the entire background image. */ background: transparent; z-index: 0; } .hero-content { position: relative; z-index: 1; color: #fff; } .hero-content h1 { font-size: 3rem; font-weight: 700; } .hero-content p { /* hide default paragraph styling in favour of tagline class */ display: none; } /* Section containers */ section { padding: 4rem 0; } .container { width: 90%; max-width: 1000px; margin: 0 auto; } /* About section layout */ .about-flex { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; } /* About section * Provide a subtle diagonal transition from the hero. The clip-path * creates a slanted top edge so the hero background peeks through * before the beige content begins. */ #about { background-color: #ffffff; clip-path: polygon(0 0, 100% 8vh, 100% 100%, 0 100%); padding-top: 6vh; } .about-image { flex: 1 1 40%; min-width: 260px; } .about-image img { width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); object-fit: cover; } .about-text { flex: 1 1 55%; } .about-text p { margin-top: 0.5rem; color: #333; } /* Highlights section * Use a soft beige background and a clipped top edge to mimic the * diagonal transition seen on the reference site. The clip-path * creates a slanted top border where the background image is still * visible behind the opening portion of the section. Adjust * percentages to fine-tune the slope of the edge. */ /* News section (formerly highlights) */ #news { background-color: #f8f5ee; clip-path: polygon(0 6vh, 100% 0, 100% 100%, 0 100%); } .highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2rem; } .highlight-card { background-color: #fff; border: 1px solid #e4dfd0; border-radius: 8px; padding: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 0.75rem; } .highlight-date { font-family: 'Playfair Display', serif; font-size: 0.9rem; color: #b3a57e; border-bottom: 1px solid #e4dfd0; padding-bottom: 0.25rem; margin-bottom: 0.5rem; } .highlight-card h3 { font-size: 1.3rem; color: #242424; } .highlight-card p { font-size: 0.95rem; line-height: 1.5; color: #555; } /* Photo row */ .photo-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin-top: 1.5rem; } .photo-row img { flex: 0 0 auto; width: 240px; height: 240px; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); scroll-snap-align: start; transition: transform 0.3s ease; } .photo-row img:hover { transform: scale(1.05); } /* Listen section */ #listen { background-color: #0d0d0d; color: #fff; text-align: center; padding: 4rem 0; } #listen h2 { color: #f5d042; margin-bottom: 1rem; } .streaming-icons { display: flex; justify-content: center; gap: 2rem; font-size: 2.5rem; flex-wrap: wrap; } .streaming-icons a { color: #fff; transition: color 0.3s ease; } .streaming-icons a:hover { color: #f5d042; } /* Contact section */ #contact { background-color: #f8f5ee; text-align: center; padding: 4rem 0; } .contact-container h2 { margin-bottom: 0.5rem; } .contact-container p { margin-bottom: 0.5rem; } .contact-container .instagram a { font-size: 1.2rem; font-weight: 600; color: #0077b6; text-decoration: none; } .contact-container .instagram a:hover { text-decoration: underline; } /* Tagline and scroll arrow */ .hero-content .tagline { font-size: 1.3rem; margin-top: 0.7rem; font-weight: 300; letter-spacing: 0.5px; display: block; } .scroll-down { display: inline-block; margin-top: 2rem; font-size: 2rem; color: #f5d042; text-decoration: none; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(-3px); } } /* Media section */ .video-container { margin: 1rem 0; position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; } .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .streaming { margin-top: 1rem; } .streaming a { color: #0077b6; text-decoration: none; } .streaming a:hover { text-decoration: underline; } /* Media section * Place the video and description on a solid surface so the * underlying portrait doesn’t compete with the content. The top * diagonal edge mirrors the highlights section for cohesion. */ #media { background-color: #ffffff; clip-path: polygon(0 0, 100% 6vh, 100% 100%, 0 100%); padding-top: 6vh; } /* Gallery styling */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; } /* Gallery section * Use a soft off-white background to separate the photo row from the * fixed hero image behind. A diagonal top edge ties in with other * sections. */ #gallery { background-color: #f8f5ee; clip-path: polygon(0 0, 100% 6vh, 100% 100%, 0 100%); padding-top: 6vh; } .gallery-grid img { width: 100%; display: block; border-radius: 6px; object-fit: cover; height: 300px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-grid img:hover { transform: scale(1.03); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } /* Contact section */ #contact p { margin-top: 0.5rem; } .instagram a { font-size: 1.2rem; font-weight: 600; color: #0077b6; text-decoration: none; } .instagram a:hover { text-decoration: underline; } /* Footer */ footer { background-color: #0a0a0a; color: #ccc; text-align: center; padding: 1rem 0; font-size: 0.9rem; } /* Responsive typography */ @media (max-width: 600px) { .hero-content h1 { font-size: 2.2rem; } .hero-content p { font-size: 1rem; } .nav { flex-direction: column; align-items: flex-start; } .nav-links { flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } }