diff --git a/index.html b/index.html index 3050f4a..df18720 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ - Cineasthesia — by Michelle Sam - + HOME — An Immersive Art Exhibit & Fire-Proof Housing Prototype + @@ -48,7 +48,7 @@ } nav.scrolled { - background: rgba(60, 36, 21, 0.95); + background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(10px); padding: 0.8rem 2rem; } @@ -99,57 +99,75 @@ position: relative; min-height: 100vh; display: flex; - align-items: flex-end; - padding: 6rem 4rem 4rem; + align-items: center; + justify-content: center; + text-align: center; + padding: 6rem 2rem; + background: var(--midnight); + overflow: hidden; + } + + .hero::before { + content: ''; + position: absolute; + inset: 0; background: - linear-gradient(180deg, rgba(10,10,15,0.3) 0%, rgba(60,36,21,0.7) 100%), - url('img/worlding-hero.jpg') center center / cover no-repeat; + radial-gradient(ellipse at 30% 50%, rgba(198, 139, 63, 0.08) 0%, transparent 60%), + radial-gradient(ellipse at 70% 40%, rgba(74, 103, 65, 0.06) 0%, transparent 50%); } .hero-content { - max-width: 700px; + position: relative; + max-width: 750px; } - .hero-accent { - width: 50px; - height: 4px; - background: var(--gold); + .hero-overline { + font-size: 0.7rem; + letter-spacing: 0.3em; + text-transform: uppercase; + color: var(--gold); margin-bottom: 1.5rem; } .hero-title { font-family: 'Bebas Neue', sans-serif; - font-size: clamp(3rem, 7vw, 5.5rem); - letter-spacing: 0.1em; + font-size: clamp(5rem, 14vw, 10rem); + letter-spacing: 0.15em; color: var(--sand); - line-height: 1; - margin-bottom: 0.5rem; + line-height: 0.9; + margin-bottom: 1.5rem; } .hero-subtitle { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-style: italic; - color: var(--sand-dark); - margin-bottom: 1rem; + color: rgba(245, 237, 224, 0.6); + margin-bottom: 2rem; + line-height: 1.5; } - .hero-desc { - font-size: 0.9rem; - color: rgba(245, 237, 224, 0.7); - max-width: 550px; - line-height: 1.8; + .hero-cta { + display: inline-block; + color: var(--gold); + text-decoration: none; + font-size: 0.8rem; + letter-spacing: 0.15em; + text-transform: uppercase; + padding: 0.8rem 2.5rem; + border: 1px solid rgba(198, 139, 63, 0.4); + transition: all 0.3s; + } + + .hero-cta:hover { + background: rgba(198, 139, 63, 0.15); + border-color: var(--gold); } /* SECTIONS */ - section { - padding: 7rem 2rem; - } + section { padding: 7rem 2rem; } - .inner { - max-width: 1100px; - margin: 0 auto; - } + .inner { max-width: 1100px; margin: 0 auto; } .section-label { font-size: 0.7rem; @@ -182,117 +200,54 @@ background: rgba(60, 36, 21, 0.1); } - /* ABOUT */ - .about-section { - background: var(--sand); - } + /* CONCEPT — two-column intro */ + .concept-section { background: var(--sand); } - .about-grid { - display: flex; + .concept-grid { + display: grid; + grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } - .about-photo { - flex: 0 0 300px; - height: 400px; - object-fit: cover; - filter: grayscale(0.2); + .concept-visual { + position: relative; } - .about-info { flex: 1; } + .concept-visual img { + width: 100%; + height: 480px; + object-fit: cover; + } - .about-name { + .concept-visual .overlay-tag { + position: absolute; + bottom: 1.5rem; + left: 1.5rem; + background: rgba(10, 10, 15, 0.85); + color: var(--gold); + font-size: 0.7rem; + letter-spacing: 0.15em; + text-transform: uppercase; + padding: 0.5rem 1rem; + } + + .concept-text h3 { font-family: 'Bebas Neue', sans-serif; - font-size: 2rem; + font-size: 1.6rem; letter-spacing: 0.06em; color: var(--earth); - margin-bottom: 0.3rem; + margin-bottom: 1rem; } - .about-role { - font-size: 0.8rem; - color: var(--gold); - letter-spacing: 0.1em; - text-transform: uppercase; - margin-bottom: 1.5rem; - } - - .about-bio { + .concept-text p { font-size: 0.95rem; color: var(--text-body); line-height: 1.8; margin-bottom: 1rem; } - /* PROJECTS */ - .projects-section { - background: var(--earth); - color: var(--sand); - } - - .projects-section .section-label { color: var(--gold-light); } - .projects-section .section-title { color: var(--sand); } - - .project-card { - display: flex; - gap: 3rem; - margin-bottom: 5rem; - align-items: center; - } - - .project-card:last-child { margin-bottom: 0; } - .project-card.reverse { flex-direction: row-reverse; } - - .project-img { - flex: 0 0 50%; - height: 360px; - object-fit: cover; - } - - .project-info { flex: 1; } - - .project-tag { - font-size: 0.7rem; - letter-spacing: 0.15em; - text-transform: uppercase; - color: var(--gold-light); - margin-bottom: 0.5rem; - } - - .project-name { - font-family: 'Bebas Neue', sans-serif; - font-size: 2rem; - letter-spacing: 0.06em; - color: var(--sand); - margin-bottom: 0.5rem; - } - - .project-desc { - font-size: 0.9rem; - color: rgba(245, 237, 224, 0.75); - line-height: 1.8; - margin-bottom: 1.5rem; - } - - .project-link { - display: inline-block; - color: var(--gold); - text-decoration: none; - font-size: 0.8rem; - letter-spacing: 0.15em; - text-transform: uppercase; - padding: 0.7rem 2rem; - border: 1px solid rgba(198, 139, 63, 0.4); - transition: all 0.3s; - } - - .project-link:hover { - background: rgba(198, 139, 63, 0.15); - border-color: var(--gold); - } - - /* IMMERSIVE */ + /* IMMERSIVE — dark section */ .immersive-section { background: var(--midnight); color: var(--sand); @@ -371,55 +326,99 @@ letter-spacing: 0.1em; } - /* WORLDING */ - .worlding-section { - background: var(--sand); + /* SHELTER — fire-proof housing */ + .shelter-section { + background: var(--earth); + color: var(--sand); } - .worlding-hero-img { - width: 100%; - max-height: 500px; - object-fit: cover; - margin-bottom: 3rem; + .shelter-section .section-label { color: var(--gold-light); } + .shelter-section .section-title { color: var(--sand); } + + .shelter-text { + font-size: 1rem; + color: rgba(245, 237, 224, 0.75); + line-height: 1.8; + max-width: 800px; + margin-bottom: 1.5rem; } - .worlding-grid { + .shelter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } - .worlding-card { + .shelter-card { text-align: center; } - .worlding-card img { + .shelter-card img { width: 100%; - height: 200px; + height: 220px; object-fit: cover; margin-bottom: 1rem; } - .worlding-card h3 { + .shelter-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: 0.06em; - color: var(--earth); + color: var(--sand); margin-bottom: 0.5rem; } - .worlding-card p { + .shelter-card p { font-size: 0.85rem; - color: var(--text-muted); + color: rgba(245, 237, 224, 0.6); line-height: 1.6; } - /* TEAM */ - .team-section { - background: var(--sand-dark); + /* ABOUT */ + .about-section { background: var(--sand); } + + .about-grid { + display: flex; + gap: 4rem; + align-items: center; } + .about-photo { + flex: 0 0 300px; + height: 400px; + object-fit: cover; + filter: grayscale(0.2); + } + + .about-info { flex: 1; } + + .about-name { + font-family: 'Bebas Neue', sans-serif; + font-size: 2rem; + letter-spacing: 0.06em; + color: var(--earth); + margin-bottom: 0.3rem; + } + + .about-role { + font-size: 0.8rem; + color: var(--gold); + letter-spacing: 0.1em; + text-transform: uppercase; + margin-bottom: 1.5rem; + } + + .about-bio { + font-size: 0.95rem; + color: var(--text-body); + line-height: 1.8; + margin-bottom: 1rem; + } + + /* TEAM */ + .team-section { background: var(--sand-dark); } + .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); @@ -465,6 +464,19 @@ line-height: 1.7; } + /* IMAGE BREAKS */ + .img-break { + width: 100%; + overflow: hidden; + } + + .img-break img { + width: 100%; + height: 400px; + object-fit: cover; + display: block; + } + /* FOOTER */ footer { background: var(--earth); @@ -516,19 +528,6 @@ color: rgba(245, 237, 224, 0.35); } - /* IMAGE BREAKS */ - .img-break { - width: 100%; - overflow: hidden; - } - - .img-break img { - width: 100%; - height: 400px; - object-fit: cover; - display: block; - } - /* SCROLL REVEAL */ .reveal { opacity: 0; @@ -548,7 +547,7 @@ top: 0; right: -100%; width: 280px; height: 100vh; - background: rgba(60, 36, 21, 0.98); + background: rgba(10, 10, 15, 0.98); flex-direction: column; padding: 5rem 2rem; transition: right 0.4s; @@ -561,6 +560,13 @@ section { padding: 4rem 1.5rem; } + .concept-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .concept-visual img { height: 300px; } + .about-grid { flex-direction: column; gap: 2rem; @@ -572,21 +578,11 @@ height: 300px; } - .project-card, .project-card.reverse { - flex-direction: column; - } - - .project-img { - flex: none; - width: 100%; - height: 250px; - } - .gallery-grid { grid-template-columns: repeat(2, 1fr); } - .worlding-grid, .team-grid { + .shelter-grid, .team-grid { grid-template-columns: 1fr; } @@ -602,12 +598,12 @@