/* ================================================================= DIVYA CHAUHAN · A LOVE GALLERY Premium animated personal website ----------------------------------------------------------------- SECTIONS IN THIS FILE 1. Design tokens (colours, fonts, easing) -> :root 2. Base / reset 3. Background FX (gradient, beams, particles, cursor) 4. Preloader & Lock screen 5. Navigation 6. Hero 7. Buttons (magnetic) 8. 3D Photo Gallery 9. About 10. Timeline 11. Favourite Moments (carousel) 12. Love Notes (flip cards) 13. Social links 14. Footer 15. Reveal-on-scroll helper 16. Responsive / mobile ================================================================= */ /* ============================ 1. TOKENS ========================== */ :root { /* Pastel romantic palette — tweak these to re-skin the whole site */ --bg-1: #1a1026; /* deep plum night */ --bg-2: #2a1338; /* twilight */ --rose: #ff9ecb; /* soft rose */ --rose-deep: #ff6fa5; /* deeper pink */ --lilac: #c3a9ff; /* lilac */ --gold: #ffd9a8; /* warm gold */ --cream: #fff6fb; /* near-white text */ --muted: #d8c7e6; /* muted lavender text */ --glass: rgba(255, 255, 255, 0.08); --glass-brd: rgba(255, 255, 255, 0.18); --grad-warm: linear-gradient(120deg, var(--rose), var(--lilac)); --grad-soft: linear-gradient(135deg, #ffb6d5, #b9a7ff 60%, #ffd9a8); --font-serif: "Cormorant Garamond", Georgia, serif; --font-sans: "Poppins", system-ui, sans-serif; --font-script: "Great Vibes", cursive; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* smooth deceleration */ --ease-soft: cubic-bezier(0.65, 0, 0.35, 1); --shadow-soft: 0 30px 60px -20px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 40px rgba(255, 158, 203, 0.45); --maxw: 1200px; } /* ============================ 2. BASE =========================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; } /* Lenis handles smooth scroll */ /* Kill horizontal overflow at BOTH html and body. Off-canvas / decorative fixed & absolute elements overflow the element (not ), so clipping body alone let the page grow to ~1560px on phones — which made mobile browsers zoom out and text/cards look cramped and overlapping. `overflow-x: clip` clips without creating a scroll container, so it does not break sticky pinning or the horizontal editorial section. */ html, body { overflow-x: clip; max-width: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--cream); background: var(--bg-1); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; cursor: none; /* replaced by custom cursor on desktop */ } /* keep native cursor on touch / no-hover devices */ @media (hover: none) { body { cursor: auto; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.1; margin: 0; } p { margin: 0; } /* section scaffolding */ .section { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 9rem 1.5rem; z-index: 2; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 4rem; } .section-kicker { display: inline-block; font-family: var(--font-sans); letter-spacing: 0.35em; text-transform: uppercase; font-size: 0.72rem; color: var(--rose); margin-bottom: 1rem; } .section-title { font-size: clamp(2.2rem, 5vw, 3.6rem); background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-desc { color: var(--muted); margin-top: 1rem; font-size: 1.02rem; } /* ===================== 3. BACKGROUND FX ======================== */ /* Animated gradient wash that slowly drifts */ .bg-gradient { position: fixed; inset: 0; z-index: 0; background: radial-gradient(closest-side at 20% 25%, rgba(255,111,165,0.28), transparent 70%), radial-gradient(closest-side at 80% 30%, rgba(195,169,255,0.26), transparent 70%), radial-gradient(closest-side at 50% 85%, rgba(255,217,168,0.20), transparent 70%), linear-gradient(180deg, var(--bg-1), var(--bg-2)); background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%; animation: gradientDrift 22s ease-in-out infinite; } @keyframes gradientDrift { 0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } 50% { background-position: 100% 50%, 0% 50%, 50% 0%, 0 0; } } /* Soft diagonal light beams */ .light-beams { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .beam { position: absolute; top: -40%; width: 24vw; height: 180vh; background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent); filter: blur(40px); transform: rotate(18deg); opacity: 0.5; animation: beamSweep 16s ease-in-out infinite; } .beam-1 { left: 8%; animation-delay: 0s; } .beam-2 { left: 45%; animation-delay: -5s; opacity: 0.35; } .beam-3 { left: 78%; animation-delay: -9s; opacity: 0.4; } @keyframes beamSweep { 0%, 100% { transform: rotate(18deg) translateY(0); opacity: 0.25; } 50% { transform: rotate(18deg) translateY(-6%); opacity: 0.55; } } /* Particle canvas */ .particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; } /* Cursor glow */ .cursor-glow { position: fixed; top: 0; left: 0; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,158,203,0.22), transparent 60%); pointer-events: none; z-index: 9998; mix-blend-mode: screen; transition: opacity 0.3s ease; will-change: transform; } .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--cream); pointer-events: none; z-index: 9999; will-change: transform; transition: width 0.2s ease, height 0.2s ease, background 0.2s ease; } .cursor-dot.is-hover { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(255,158,203,0.35); } @media (hover: none) { .cursor-glow, .cursor-dot { display: none; } } /* ================= 4. PRELOADER & LOCK SCREEN ================= */ .preloader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; background: var(--bg-1); transition: opacity 0.8s ease, visibility 0.8s ease; } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader-heart { fill: var(--rose-deep); animation: beat 1.1s var(--ease-soft) infinite; filter: drop-shadow(0 0 18px rgba(255,111,165,0.7)); } .preloader-text { color: var(--muted); letter-spacing: 0.18em; font-size: 0.8rem; text-transform: uppercase; } @keyframes beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.18); } 40% { transform: scale(0.96); } } /* Lock / password screen */ .lock-screen { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; transition: opacity 0.7s var(--ease-out), visibility 0.7s; } .lock-screen.is-open { opacity: 0; visibility: hidden; pointer-events: none; } .lock-card { max-width: 460px; width: 100%; text-align: center; padding: 3rem 2.4rem; border-radius: 28px; } .lock-heart { fill: var(--rose-deep); margin-bottom: 1.2rem; animation: beat 1.4s var(--ease-soft) infinite; filter: drop-shadow(0 0 16px rgba(255,111,165,0.6)); } .lock-title { font-size: 2rem; margin-bottom: 0.6rem; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; } .lock-sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.8rem; } .lock-form { display: flex; flex-direction: column; gap: 0.9rem; } .lock-input { width: 100%; padding: 1rem 1.2rem; border-radius: 14px; background: rgba(255,255,255,0.07); border: 1px solid var(--glass-brd); color: var(--cream); font-family: var(--font-sans); font-size: 1rem; text-align: center; outline: none; transition: border 0.3s, box-shadow 0.3s; } .lock-input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255,158,203,0.18); } .lock-input::placeholder { color: rgba(216,199,230,0.6); } .lock-hint { color: rgba(216,199,230,0.55); font-size: 0.78rem; margin-top: 1.2rem; } .lock-error { color: #ff8fa3; font-size: 0.85rem; min-height: 1.2em; margin-top: 0.4rem; } .lock-card.shake { animation: shake 0.4s; } @keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} } /* Glassmorphism utility — richer frost + glowing inner border + sheen */ .glass { position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); border: 1px solid var(--glass-brd); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.25), /* top sheen */ inset 0 0 30px rgba(255,158,203,0.06); /* soft inner glow */ } /* animated glowing border that traces the card edge on hover */ .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(130deg, rgba(255,158,203,0.7), rgba(195,169,255,0.0) 40%, rgba(255,217,168,0.6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s var(--ease-out); pointer-events: none; } .glass:hover::after { opacity: 1; } /* ====================== 5. NAVIGATION ========================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem clamp(1.2rem, 4vw, 3rem); transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s; } .nav.is-scrolled { background: rgba(26,16,38,0.55); backdrop-filter: blur(14px); padding-top: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .nav-logo { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; letter-spacing: 0.05em; } .nav-logo span { color: var(--rose); } .nav-links { display: flex; gap: 2rem; } .nav-link { position: relative; font-size: 0.9rem; color: var(--muted); transition: color 0.3s; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--grad-warm); transition: width 0.35s var(--ease-out); } .nav-link:hover { color: var(--cream); } .nav-link:hover::after { width: 100%; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; } .nav-toggle span { width: 26px; height: 2px; background: var(--cream); transition: 0.3s; border-radius: 2px; } .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity: 0; } .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ========================= 6. HERO ============================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem; z-index: 2; overflow: hidden; } .hero-content { position: relative; z-index: 3; max-width: 820px; } .hero-eyebrow { font-family: var(--font-script); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--rose); margin-bottom: 0.4rem; } .hero-title { font-size: clamp(3.4rem, 11vw, 8rem); line-height: 0.95; margin-bottom: 1.4rem; } .hero-name { display: block; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgba(255,111,165,0.35)); } .hero-name--script { font-family: var(--font-script); font-weight: 400; font-size: 0.7em; margin-top: -0.1em; } .hero-tagline { color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.25rem); max-width: 520px; margin: 0 auto 2.4rem; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Floating parallax photo layers */ .hero-parallax { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .float-layer { position: absolute; border-radius: 18px; object-fit: cover; box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,0.14); opacity: 0.85; will-change: transform; animation: floaty 9s ease-in-out infinite; } .float-layer:nth-child(1){ top: 14%; left: 7%; width: 190px; height: 240px; animation-delay: 0s; } .float-layer:nth-child(2){ top: 60%; left: 12%; width: 150px; height: 200px; animation-delay: -2s; } .float-layer:nth-child(3){ top: 18%; right: 9%; width: 160px; height: 210px; animation-delay: -4s; } .float-layer:nth-child(4){ top: 62%; right: 7%; width: 140px; height: 185px; animation-delay: -6s; } @keyframes floaty { 0%,100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-22px) rotate(2deg); } } /* drifting SVG hearts container (filled by JS) */ .hero-hearts { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .drift-heart { position: absolute; bottom: -40px; fill: var(--rose); opacity: 0; animation: driftUp linear forwards; } @keyframes driftUp { 0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; } 10% { opacity: 0.8; } 100% { transform: translateY(-110vh) scale(1.1) rotate(40deg); opacity: 0; } } /* morphing blob */ .morph-blob { position: absolute; z-index: 0; width: 60vmin; height: 60vmin; right: -10vmin; bottom: -10vmin; opacity: 0.5; filter: blur(6px); } /* scroll cue */ .scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.4); border-radius: 14px; z-index: 4; } .scroll-cue span { position: absolute; top: 8px; left: 50%; width: 5px; height: 8px; margin-left: -2.5px; border-radius: 4px; background: var(--cream); animation: scrollDot 1.6s ease infinite; } @keyframes scrollDot { 0%{ transform: translateY(0); opacity: 1; } 100%{ transform: translateY(16px); opacity: 0; } } /* ===================== 7. BUTTONS (magnetic) ================== */ .btn { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 2rem; border-radius: 50px; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; color: #2a1338; cursor: pointer; border: 0; background: var(--grad-warm); box-shadow: 0 12px 30px -8px rgba(255,111,165,0.6); transition: transform 0.25s var(--ease-out), box-shadow 0.3s; will-change: transform; overflow: hidden; } .btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent); transform: translateX(-120%); transition: transform 0.6s var(--ease-out); } .btn:hover::before { transform: translateX(120%); } .btn:hover { box-shadow: 0 18px 40px -8px rgba(255,111,165,0.8); } .btn span { position: relative; z-index: 1; } .btn--ghost { background: transparent; color: var(--cream); border: 1px solid var(--glass-brd); box-shadow: none; } .btn--ghost:hover { background: rgba(255,255,255,0.08); } /* ==================== 8. 3D PHOTO GALLERY ==================== */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; perspective: 1400px; } .photo-card { position: relative; border-radius: 22px; transform-style: preserve-3d; will-change: transform; } .photo-card__inner { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,0.12); } .photo-card__inner img { width: 100%; height: 420px; object-fit: cover; transition: transform 0.6s var(--ease-out); } .photo-card:hover .photo-card__inner img { transform: scale(1.08); } /* moving shine sweep on hover */ .photo-card__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s var(--ease-out); pointer-events: none; } .photo-card:hover .photo-card__shine { transform: translateX(100%); } .photo-card__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem; background: linear-gradient(0deg, rgba(20,10,30,0.85), transparent); transform: translateY(12px); opacity: 0; transition: 0.45s var(--ease-out); transform: translateZ(40px) translateY(12px); /* pops forward in 3D */ } .photo-card:hover .photo-card__caption { opacity: 1; transform: translateZ(60px) translateY(0); } .photo-card__caption h3 { font-size: 1.4rem; } .photo-card__caption p { color: var(--rose); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; } /* ========================= 9. ABOUT ========================= */ .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: center; } .about-photo { position: relative; display: flex; justify-content: center; } .frame-3d { position: relative; border-radius: 24px; overflow: hidden; transform-style: preserve-3d; border: 1px solid rgba(255,255,255,0.16); box-shadow: var(--shadow-soft); max-width: 420px; } .frame-3d img { width: 100%; height: 540px; object-fit: cover; } .frame-3d__glow { position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(255,158,203,0.25); border-radius: 24px; pointer-events: none; } .about-ring { position: absolute; inset: -28px; width: calc(100% + 56px); height: calc(100% + 56px); z-index: -1; opacity: 0.5; } .about-ring circle { fill: none; stroke: url(#blobGrad); stroke: var(--rose); stroke-width: 1; stroke-dasharray: 6 10; animation: spin 26s linear infinite; transform-origin: center; } @keyframes spin { to { transform: rotate(360deg); } } .about-text p { color: var(--muted); margin-top: 1.2rem; font-size: 1.05rem; } .about-text .section-title { text-align: left; } .about-text .section-kicker { display: block; } .about-facts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .about-facts li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--cream); padding: 0.7rem 1rem; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); } .about-facts span { font-size: 1.2rem; } /* Prevent CSS grid "blowout": grid items default to min-width:auto, so a child whose min-content is wider than the track (e.g. the two-column about-facts on a phone) forces the whole column — and its text — wider than the screen, causing clipped/overflowing paragraphs. min-width:0 lets the flexible tracks shrink so text wraps instead of overflowing. */ .about-grid, .about-text, .about-photo, .gallery-grid > *, .notes-grid > *, .social-grid > * { min-width: 0; } .about-facts, .about-facts li { min-width: 0; } .about-facts li { overflow-wrap: anywhere; } /* ======================== 10. TIMELINE ====================== */ .timeline-track { position: relative; max-width: 880px; margin: 0 auto; } .timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,0.12); } .timeline-progress { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--grad-warm); box-shadow: 0 0 14px rgba(255,111,165,0.7); } .tl-item { position: relative; width: 50%; padding: 1.4rem 2.6rem; } .tl-item:nth-child(odd) { left: 0; text-align: right; } .tl-item:nth-child(even) { left: 50%; } .tl-dot { position: absolute; top: 2.2rem; width: 18px; height: 18px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 6px rgba(255,158,203,0.2), 0 0 18px rgba(255,111,165,0.8); } .tl-item:nth-child(odd) .tl-dot { right: -9px; } .tl-item:nth-child(even) .tl-dot { left: -9px; } .tl-card { padding: 1.5rem 1.7rem; border-radius: 18px; transition: transform 0.4s var(--ease-out), box-shadow 0.4s; } .tl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); } .tl-date { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); } .tl-card h3 { font-size: 1.5rem; margin: 0.4rem 0 0.5rem; } .tl-card p { color: var(--muted); font-size: 0.95rem; } /* =================== 11. FAVOURITE MOMENTS ================== */ .momentsSwiper { padding: 2rem 0 4rem; overflow: visible; } .moment-slide { width: 360px; height: 460px; border-radius: 24px; overflow: hidden; position: relative; box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,0.14); transition: filter 0.5s; filter: brightness(0.6); } .swiper-slide-active.moment-slide { filter: brightness(1.05); } .moment-slide img { width: 100%; height: 100%; object-fit: cover; } .moment-slide__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem; font-family: var(--font-serif); font-size: 1.5rem; background: linear-gradient(0deg, rgba(20,10,30,0.9), transparent); } .momentsSwiper .swiper-pagination-bullet { background: var(--rose); opacity: 0.4; } .momentsSwiper .swiper-pagination-bullet-active { opacity: 1; box-shadow: 0 0 10px var(--rose); } .momentsSwiper .swiper-button-next, .momentsSwiper .swiper-button-prev { color: var(--rose); } .momentsSwiper .swiper-button-next::after, .momentsSwiper .swiper-button-prev::after { font-size: 1.6rem; } /* ===================== 12. LOVE NOTES ====================== */ .notes { position: relative; } .notes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; perspective: 1400px; } .flip-card { height: 260px; } .flip-card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease-out); } /* Flip on hover (desktop) OR when JS toggles .is-flipped on tap (touch). */ .flip-card:hover .flip-card__inner, .flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); } .flip-card__front, .flip-card__back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 1.6rem; text-align: center; } .flip-card__front { background: linear-gradient(160deg, rgba(255,158,203,0.16), rgba(195,169,255,0.12)); } .flip-heart { font-size: 2.6rem; } .flip-card__front h3 { font-size: 1.3rem; color: var(--cream); } .flip-card__back { transform: rotateY(180deg); } .flip-card__back p { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.4; color: var(--cream); font-style: italic; } /* drifting love-note words */ .floating-notes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .floating-notes span { position: absolute; font-family: var(--font-script); font-size: 2rem; color: rgba(255,158,203,0.18); animation: floatNote 18s ease-in-out infinite; } .floating-notes span:nth-child(1){ top: 10%; left: 6%; animation-delay: 0s; } .floating-notes span:nth-child(2){ top: 70%; left: 14%; animation-delay: -4s; } .floating-notes span:nth-child(3){ top: 30%; right: 10%; animation-delay: -8s; } .floating-notes span:nth-child(4){ top: 80%; right: 18%; animation-delay: -12s; } .floating-notes span:nth-child(5){ top: 50%; left: 45%; animation-delay: -6s; } @keyframes floatNote { 0%,100%{ transform: translateY(0) rotate(-4deg); } 50%{ transform: translateY(-30px) rotate(4deg); } } /* ====================== 13. SOCIAL ========================= */ .social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .social-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; padding: 2.2rem 1.2rem; border-radius: 22px; transition: transform 0.3s var(--ease-out), box-shadow 0.3s; will-change: transform; } .social-card:hover { box-shadow: var(--shadow-glow); } .social-icon { width: 42px; height: 42px; fill: var(--rose); transition: transform 0.4s var(--ease-out), fill 0.3s; } .social-card:hover .social-icon { transform: scale(1.18) rotate(-6deg); fill: var(--cream); } .social-name { font-family: var(--font-serif); font-size: 1.25rem; } .social-handle { font-size: 0.82rem; color: var(--muted); } /* ======================= 14. FOOTER ======================== */ .footer { position: relative; z-index: 2; text-align: center; padding: 5rem 1.5rem 4rem; } .footer-heart { fill: var(--rose-deep); animation: beat 1.6s var(--ease-soft) infinite; margin-bottom: 0.8rem; } .footer-line { font-family: var(--font-serif); font-size: 1.4rem; } .footer-sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; } /* ================= 15. REVEAL-ON-SCROLL ==================== */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } /* respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } } /* =============== 17. CINEMATIC HERO ADD-ONS ================ */ /* Ken-Burns background — slow zoom/pan. Replace the image URL below. */ .hero-kenburns { position: absolute; inset: 0; z-index: 0; background: url("../images/dc-01.jpg") center/cover no-repeat; filter: saturate(115%) brightness(0.55); transform: scale(1.15); animation: kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns { 0% { transform: scale(1.15) translate(0, 0); } 100% { transform: scale(1.3) translate(-3%, -2%); } } /* darkening vignette so text stays readable over any photo */ .hero-vignette { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, rgba(20,10,30,0.75) 100%), linear-gradient(180deg, rgba(26,16,38,0.4), rgba(26,16,38,0.85)); } /* line masks for the dramatic name reveal (text slides up from behind) */ .line-mask { display: block; overflow: hidden; padding: 0 0.08em; } /* CSS-only reveal so the name is ALWAYS shown even if GSAP fails to load from its CDN (e.g. slow/blocked network). GSAP, when present, animates the same property to the same end state, so the two never disagree at rest. */ .line-mask .hero-name { display: block; transform: translateY(115%); animation: heroNameReveal 1.1s var(--ease-out) 0.6s both; } @keyframes heroNameReveal { from { transform: translateY(115%); } to { transform: translateY(0); } } /* JS adds .hero-in once loaded → text animates up; this is the fallback */ .hero-in .line-mask .hero-name { transform: translateY(0); } /* ============ 18. EDITORIAL HORIZONTAL SCROLL ============= */ .editorial { position: relative; z-index: 2; } .editorial-sticky { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; } .editorial-overlay { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); text-align: center; z-index: 3; pointer-events: none; } .editorial-track { display: flex; gap: 2.5rem; padding: 0 12vw; will-change: transform; } .ed-panel { position: relative; flex: 0 0 auto; width: 60vh; max-width: 460px; height: 76vh; max-height: 680px; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,0.14); } .ed-panel img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .ed-panel figcaption { position: absolute; left: 0; bottom: 0; padding: 1.6rem; font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: 0.02em; background: linear-gradient(0deg, rgba(20,10,30,0.85), transparent); width: 100%; } /* ================== 19. THREE.JS 3D RING ================== */ .ring3d { text-align: center; } .ring-wrap { position: relative; width: 100%; height: 520px; margin: 0 auto; } #ringCanvas { width: 100%; height: 100%; display: block; cursor: grab; } #ringCanvas:active { cursor: grabbing; } .ring-hint { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); pointer-events: none; } /* ================= 20. FEATURED IG REEL =================== */ .reel { text-align: center; } .reel-embed { max-width: 560px; margin: 0 auto; padding: 1rem; border-radius: 26px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft), 0 0 50px rgba(255,158,203,0.25); } /* self-hosted video — portrait reel ratio, rounded, plays inline */ .reel-video { display: block; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #000; } /* ==================== 16. RESPONSIVE ======================= */ @media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .notes-grid { grid-template-columns: repeat(2, 1fr); } .social-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-text .section-title, .about-text .section-kicker { text-align: center; display: block; } .about-facts { max-width: 460px; margin-inline: auto; } } @media (max-width: 760px) { .section { padding: 6rem 1.2rem; } /* mobile nav drawer */ .nav-links { position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px); flex-direction: column; justify-content: center; gap: 2rem; padding: 2rem; background: rgba(26,16,38,0.92); backdrop-filter: blur(18px); transform: translateX(100%); transition: transform 0.45s var(--ease-out); border-left: 1px solid rgba(255,255,255,0.08); } .nav-links.is-open { transform: translateX(0); } .nav-toggle { display: flex; z-index: 600; } .nav-link { font-size: 1.2rem; } .float-layer { display: none; } /* declutter hero on small screens */ .ed-panel { width: 70vw; height: 60vh; } .ring-wrap { height: 400px; } .timeline-line { left: 18px; } .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 3rem; padding-right: 0; } .tl-item .tl-dot { left: 9px !important; right: auto !important; } .moment-slide { width: 260px; height: 360px; } } @media (max-width: 520px) { .gallery-grid, .notes-grid, .social-grid { grid-template-columns: 1fr; } .about-facts { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; } }