/* ============================================================ PCM Memorial Website — styles.css ============================================================ */ /* --- Google Fonts are loaded in HTML --- */ /* ---- CSS Variables ---- */ :root { --parchment: #FDF6EC; --cream-mid: #F5ECD8; --white-warm: #FFFDF7; --text-dark: #2C1810; --text-light: #6B4C3B; --maroon: #800020; --maroon-dark: #5c0018; --gold: #C4956A; --gold-light: #E8D5B7; --card-border: #E8D5B7; --nav-height: 64px; } /* ---- Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Lato', sans-serif; font-weight: 300; background: var(--parchment); color: var(--text-dark); line-height: 1.8; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* ---- Typography ---- */ h1, h2, h3, .serif { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--maroon); letter-spacing: 0.01em; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } /* ---- Utility ---- */ .container { max-width: 1100px; margin: 0 auto; padding: 0 60px; } .eyebrow { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } /* ---- Fade-in Scroll Animations ---- */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease-out, transform 0.65s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================================ NAVIGATION ============================================================ */ #main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); background: rgba(253, 246, 236, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--card-border); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 60px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-om { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold); line-height: 1; } .nav-name { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--maroon); letter-spacing: 0.03em; } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--text-light); transition: color 0.2s; } .nav-links a:hover { color: var(--maroon); } /* Hamburger (mobile only) */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--maroon); transition: all 0.3s; } /* Mobile nav open state */ .nav-mobile-open .nav-links { display: flex; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0; background: rgba(253, 246, 236, 0.98); padding: 20px 30px; border-bottom: 1px solid var(--card-border); gap: 16px; } /* ============================================================ SECTION DIVIDER ============================================================ */ .section-divider { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px 60px; background: var(--parchment); } .divider-line { flex: 1; max-width: 180px; height: 1px; background: var(--gold); opacity: 0.6; } .divider-motif { font-size: 1rem; color: var(--gold); letter-spacing: 0.2em; } /* ============================================================ GANESHA BANNER ============================================================ */ .ganesha-banner { background: var(--parchment); text-align: center; padding-top: calc(var(--nav-height) + 32px); padding-bottom: 24px; } .ganesha-svg { width: 170px; height: 170px; margin: 0 auto; } .ganesha-caption { font-family: 'Cormorant Garamond', serif; font-size: 0.9rem; font-weight: 400; color: var(--gold); letter-spacing: 0.2em; margin-top: 10px; } /* ============================================================ HERO SECTION — split layout ============================================================ */ .hero { display: flex; min-height: 90vh; background: var(--parchment); } /* Left: full-height photo */ .hero-photo-side { width: 50%; position: relative; overflow: hidden; flex-shrink: 0; } .hero-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } /* Soft right-edge fade into parchment */ .hero-photo-side::after { content: ''; position: absolute; top: 0; right: 0; width: 90px; height: 100%; background: linear-gradient(to right, transparent, var(--parchment)); pointer-events: none; } /* Right: info panel */ .hero-info-side { width: 50%; display: flex; align-items: center; justify-content: center; padding: 80px 60px 80px 40px; } .hero-content { max-width: 440px; animation: heroFadeIn 1.1s ease-out 0.3s both; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3.2vw, 3.4rem); font-weight: 600; color: var(--maroon); letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 14px; } .hero-dates { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 400; font-style: italic; color: var(--gold); margin-bottom: 16px; letter-spacing: 0.05em; } .hero-tagline { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 400; color: var(--text-light); letter-spacing: 0.06em; margin-bottom: 24px; line-height: 1.8; } .hero-rule { border: none; border-top: 1px solid var(--gold-light); width: 160px; margin: 0 0 20px; } .hero-family { font-family: 'Lato', sans-serif; font-size: 0.84rem; font-weight: 300; color: var(--text-light); line-height: 2.1; letter-spacing: 0.03em; } /* ============================================================ SHARED SECTION STYLES ============================================================ */ .section { padding: 90px 0; scroll-margin-top: var(--nav-height); } .section.alt { background: var(--cream-mid); } .section-header { text-align: center; margin-bottom: 56px; } .section-header h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 14px; line-height: 1.2; } .section-subtitle { font-size: 0.98rem; color: var(--text-light); max-width: 640px; margin: 0 auto; line-height: 1.8; } /* ============================================================ TIMELINE SECTION ============================================================ */ .timeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .timeline-card { background: var(--white-warm); border: 1px solid var(--card-border); border-radius: 8px; padding: 28px 26px; transition: box-shadow 0.25s, transform 0.25s; } .timeline-card:hover { box-shadow: 0 6px 24px rgba(128, 0, 32, 0.08); transform: translateY(-3px); } .timeline-year { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 700; color: var(--maroon); line-height: 1; margin-bottom: 10px; } .timeline-event { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .timeline-desc { font-size: 0.88rem; color: var(--text-light); line-height: 1.7; margin-bottom: 0; } .timeline-card.placeholder { border-style: dashed; opacity: 0.55; } .timeline-card.placeholder .timeline-year { color: var(--gold); } /* ============================================================ GALLERY SECTION ============================================================ */ .gallery-wrapper { position: relative; max-width: 860px; margin: 0 auto; } .gallery-frame { position: relative; background: var(--cream-mid); border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; min-height: 480px; display: flex; align-items: center; justify-content: center; } .gallery-img { max-height: 580px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; transition: opacity 0.4s ease; } .gallery-img.transitioning { opacity: 0; } .gallery-counter { position: absolute; top: 16px; right: 20px; font-size: 0.75rem; font-weight: 400; color: var(--text-light); background: rgba(253, 246, 236, 0.85); padding: 4px 10px; border-radius: 20px; letter-spacing: 0.05em; } .gallery-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 0 4px; } .gallery-btn { background: none; border: 1px solid var(--card-border); color: var(--maroon); font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; line-height: 1; } .gallery-btn:hover { background: var(--maroon); color: var(--parchment); border-color: var(--maroon); } .gallery-caption { text-align: center; font-style: italic; font-size: 0.88rem; color: var(--text-light); padding: 0 20px; min-height: 1.6em; line-height: 1.6; } /* ============================================================ WRITINGS SECTION ============================================================ */ .writings-col { max-width: 800px; margin: 0 auto; } .journal-card { background: var(--white-warm); border: 1px solid var(--card-border); border-radius: 8px; padding: 36px 40px; position: relative; margin-bottom: 8px; } /* Kolam corner flourishes */ .journal-card::before, .journal-card::after { content: '✦'; position: absolute; font-size: 0.7rem; color: var(--gold); opacity: 0.6; } .journal-card::before { top: 12px; left: 14px; } .journal-card::after { bottom: 12px; right: 14px; } .journal-entry-label { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .journal-title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--maroon); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--card-border); line-height: 1.3; } .journal-text { font-size: 0.94rem; color: var(--text-dark); line-height: 1.95; } .journal-text p { margin-bottom: 1.1em; } /* Divider between cards */ .card-divider { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 0; } .card-divider span { flex: 1; max-width: 120px; height: 1px; background: var(--gold-light); } .card-divider-motif { color: var(--gold); font-size: 0.8rem; flex: none !important; max-width: none !important; height: auto !important; background: none !important; } /* ============================================================ TRIBUTE / LETTER SECTION ============================================================ */ .tribute-card { background: var(--white-warm); border: 1px solid var(--card-border); border-radius: 8px; padding: 44px 48px; position: relative; max-width: 800px; margin: 0 auto; } .tribute-card::before, .tribute-card::after { content: '✦'; position: absolute; font-size: 0.7rem; color: var(--gold); opacity: 0.6; } .tribute-card::before { top: 12px; left: 14px; } .tribute-card::after { bottom: 12px; right: 14px; } .tribute-byline { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--card-border); } .tribute-text { font-size: 0.96rem; color: var(--text-dark); line-height: 2; } .tribute-text p { margin-bottom: 1.2em; } .tribute-text p:last-child { margin-bottom: 0; } .tribute-quote { margin: 28px 0; padding: 22px 28px; border-left: 3px solid var(--gold); background: var(--parchment); border-radius: 0 6px 6px 0; } .tribute-quote p { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; font-weight: 400; color: var(--maroon); line-height: 2; margin-bottom: 10px; } .tribute-quote cite { font-family: 'Lato', sans-serif; font-size: 0.75rem; font-style: normal; font-weight: 400; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; } @media (max-width: 768px) { .tribute-card { padding: 28px 24px; } .tribute-quote { padding: 16px 20px; } } /* ============================================================ CLOSING / DIYA SECTION ============================================================ */ .closing-section { background: var(--parchment); padding: 100px 0 80px; text-align: center; } .diya-svg { width: 110px; height: auto; margin: 0 auto 32px; } .flame-outer { animation: flicker 2.2s ease-in-out infinite; transform-origin: 60px 74px; } .flame-inner { animation: flicker 1.7s ease-in-out infinite reverse; transform-origin: 60px 71px; } .flame-glow { animation: glow 2.2s ease-in-out infinite; } @keyframes flicker { 0%, 100% { transform: scale(1, 1) rotate(0deg); } 20% { transform: scale(0.92, 1.07) rotate(-1.5deg); } 50% { transform: scale(1.06, 0.93) rotate(1.2deg); } 80% { transform: scale(0.94, 1.04) rotate(-0.6deg); } } @keyframes glow { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.55; } } .closing-name { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; color: var(--maroon); letter-spacing: 0.04em; margin-bottom: 8px; } .closing-dates { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-style: italic; color: var(--text-light); letter-spacing: 0.06em; } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--parchment); border-top: 1px solid var(--card-border); text-align: center; padding: 36px 24px; } .footer-love { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; color: var(--maroon); margin-bottom: 8px; } .footer-copy { font-size: 0.78rem; font-weight: 400; color: var(--text-light); letter-spacing: 0.06em; } /* ============================================================ FLOATING AUDIO PLAYER ============================================================ */ .audio-player { position: fixed; bottom: 28px; right: 28px; z-index: 500; display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; } .audio-toggle { width: 48px; height: 48px; border-radius: 50%; background: var(--maroon); color: var(--parchment); border: none; cursor: pointer; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(128, 0, 32, 0.35); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; flex-shrink: 0; } .audio-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(128, 0, 32, 0.5); } .audio-toggle.playing { background: var(--maroon-dark); animation: audioPulse 2.5s ease-in-out infinite; } @keyframes audioPulse { 0%, 100% { box-shadow: 0 4px 18px rgba(128, 0, 32, 0.35); } 50% { box-shadow: 0 4px 28px rgba(128, 0, 32, 0.65); } } .audio-label { font-family: 'Cormorant Garamond', serif; font-size: 0.78rem; font-style: italic; color: var(--text-light); background: rgba(253, 246, 236, 0.92); padding: 5px 12px; border-radius: 20px; border: 1px solid var(--card-border); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; } .audio-player:hover .audio-label { opacity: 1; transform: translateX(0); } /* ============================================================ GUEST BOOK SECTION ============================================================ */ .guestbook-section { background: var(--parchment); } .guestbook-form-wrap { max-width: 680px; margin: 0 auto 52px; background: var(--white-warm); border: 1px solid var(--card-border); border-radius: 12px; padding: 40px 48px; position: relative; } .guestbook-form-wrap::before, .guestbook-form-wrap::after { content: '✦'; position: absolute; font-size: 0.7rem; color: var(--gold); opacity: 0.6; } .guestbook-form-wrap::before { top: 14px; left: 16px; } .guestbook-form-wrap::after { bottom: 14px; right: 16px; } .guestbook-form { display: flex; flex-direction: column; gap: 22px; } .gb-field { display: flex; flex-direction: column; gap: 8px; } .gb-label { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.67rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .gb-optional { font-weight: 300; text-transform: none; letter-spacing: 0.04em; font-size: 0.76rem; color: var(--text-light); } .gb-input, .gb-textarea { font-family: 'Lato', sans-serif; font-size: 0.92rem; font-weight: 300; color: var(--text-dark); background: var(--parchment); border: 1px solid var(--card-border); border-radius: 6px; padding: 12px 16px; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; outline: none; resize: vertical; line-height: 1.6; } .gb-input:focus, .gb-textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.15); } .gb-input::placeholder, .gb-textarea::placeholder { color: var(--text-light); opacity: 0.65; } .gb-upload-area { position: relative; border: 1.5px dashed var(--card-border); border-radius: 6px; background: var(--parchment); cursor: pointer; transition: border-color 0.2s; min-height: 82px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gb-upload-area:hover { border-color: var(--gold); } .gb-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .gb-upload-label { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; color: var(--text-light); font-size: 0.85rem; pointer-events: none; text-align: center; } .gb-upload-icon { font-size: 1.1rem; color: var(--gold); } .gb-upload-preview { width: 100%; max-height: 200px; object-fit: cover; border-radius: 4px; display: block; } .gb-submit-btn { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; color: var(--parchment); background: var(--maroon); border: none; border-radius: 6px; padding: 14px 40px; cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; align-self: flex-start; box-shadow: 0 4px 16px rgba(128, 0, 32, 0.22); } .gb-submit-btn:hover { background: var(--maroon-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(128, 0, 32, 0.32); } .gb-submit-btn:active { transform: translateY(0); } /* Entries list */ .guestbook-entries { max-width: 680px; margin: 0 auto; } .guestbook-entries-header { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; font-style: italic; color: var(--gold); text-align: center; margin-bottom: 28px; letter-spacing: 0.06em; } .gb-entry { background: var(--white-warm); border: 1px solid var(--card-border); border-radius: 8px; padding: 28px 32px; position: relative; animation: gbEntryAppear 0.45s ease-out both; } @keyframes gbEntryAppear { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .gb-entry::before, .gb-entry::after { content: '✦'; position: absolute; font-size: 0.65rem; color: var(--gold); opacity: 0.5; } .gb-entry::before { top: 10px; left: 12px; } .gb-entry::after { bottom: 10px; right: 12px; } .gb-delete-btn { position: absolute; top: 14px; right: 16px; font-family: 'Lato', sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); background: none; border: 1px solid var(--card-border); border-radius: 4px; padding: 4px 10px; cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s; } .gb-entry:hover .gb-delete-btn { opacity: 1; } .gb-delete-btn:hover { color: var(--maroon); border-color: var(--maroon); } .gb-entry-name { font-family: 'Cormorant Garamond', serif; font-size: 1.18rem; font-weight: 600; color: var(--maroon); margin-bottom: 4px; } .gb-entry-date { font-size: 0.7rem; font-weight: 400; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; } .gb-entry-message { font-size: 0.93rem; color: var(--text-dark); line-height: 1.9; margin-bottom: 0; } .gb-entry-image { margin-top: 18px; border-radius: 6px; max-width: 100%; max-height: 280px; object-fit: cover; border: 1px solid var(--card-border); display: block; } .gb-entry-caption { margin-top: 8px; font-style: italic; font-size: 0.82rem; color: var(--text-light); margin-bottom: 0; } .gb-empty-state { text-align: center; color: var(--text-light); font-style: italic; font-size: 0.92rem; padding: 32px 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .container { padding: 0 40px; } .nav-inner { padding: 0 40px; } .section-divider { padding: 18px 40px; } .timeline-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .container { padding: 0 24px; } .nav-inner { padding: 0 24px; } .section-divider { padding: 14px 24px; } /* Mobile nav */ .nav-links { display: none; gap: 0; } .nav-hamburger { display: flex; } .nav-name { font-size: 0.9rem; } .section { padding: 64px 0; } /* Hero stacks on mobile: photo on top, text below */ .hero { flex-direction: column; min-height: unset; } .hero-photo-side { width: 100%; height: 75vw; min-height: 320px; max-height: 520px; } .hero-photo-img { object-position: center 30%; } .hero-photo-side::after { display: none; } .hero-info-side { width: 100%; padding: 40px 24px 56px; justify-content: flex-start; } .hero-content { max-width: 100%; } .timeline-grid { grid-template-columns: 1fr; gap: 16px; } .gallery-frame { min-height: 300px; } .gallery-img { max-height: 400px; } .journal-card { padding: 26px 24px; } .guestbook-form-wrap { padding: 28px 24px; } .gb-entry { padding: 22px 22px; } .ganesha-svg { width: 110px; } .section-header { margin-bottom: 40px; } .section-header h2 { font-size: 1.9rem; } .closing-section { padding: 70px 0 60px; } } @media (max-width: 480px) { .hero-tagline { font-size: 0.92rem; letter-spacing: 0.04em; } .gallery-btn { width: 38px; height: 38px; font-size: 1.2rem; } .closing-name { font-size: 1.7rem; } }