/* Panampilly Nagar Fest — Recap page Ported from the Lovable "Panampilly Nagar Fest Recap" React project. Design tokens + typography classes below are a direct port of that project's src/styles.css .ed* system. Layout classes (pnf-*) are new, translating its Tailwind utility usage into plain CSS since this site has no build step. */ /* css/style.css only sets overflow-x:hidden on body, not html — on iOS Safari, horizontal-scroll containment is tied to , so rotated/ absolutely-positioned photos bleeding past the edge (the pile, the "how word got around" mosaic) can leave draggable blank space on the right on some phones even though this never reproduces in Chromium. overflow-x:clip (not hidden) avoids forcing overflow-y to auto as a side effect (a real bug hit earlier in this file). css/style.css's `body { overflow-x: hidden; }` has the exact same problem — it left body's overflow-y at its default `visible`, which the spec then force- computes to `auto` since overflow-x is non-visible, turning body into its own scroll container with a second scrollbar and janky scroll handoff between it and . Override it here the same way. */ html { overflow-x: clip; } body { overflow-x: clip; } .pnf { --ed-bg: #f8f5ef; --ed-bg-2: #efeae0; --ed-ink: #14110d; --ed-ink-soft: #5a544a; --ed-muted: #8a8479; --ed-red: #e02424; --ed-red-deep: #b41d1d; --ed-line: rgba(20, 17, 13, 0.12); --ed-serif: "Playfair Display", "Fraunces", "Times New Roman", serif; --ed-sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif; --ed-mono: "JetBrains Mono", ui-monospace, monospace; background: var(--ed-bg); color: var(--ed-ink); font-family: var(--ed-sans); -webkit-font-smoothing: antialiased; position: relative; } .pnf-serif { font-family: var(--ed-serif); } .pnf-mono { font-family: var(--ed-mono); } .pnf-red { color: var(--ed-red); } .pnf-display { font-family: var(--ed-serif); font-weight: 700; letter-spacing: -0.03em; line-height: 0.92; } .pnf-display-italic { font-family: var(--ed-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; } .pnf-eyebrow { font-family: var(--ed-mono); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--ed-ink-soft); } .pnf-bignum { font-family: var(--ed-serif); font-weight: 700; letter-spacing: -0.055em; line-height: 0.82; color: var(--ed-red); font-size: clamp(5rem, 26vw, 20rem); } .pnf-photo { overflow: hidden; background: var(--ed-bg-2); display: block; } .pnf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .pnf-photo:hover img { transform: scale(1.03); } .pnf-container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { .pnf-container { padding: 0 3rem; } } /* Reveal-on-scroll reuses the site's .animate-on-scroll mechanism (see css/style.css) — sections here just opt in with that class. */ /* ---------------- hero ---------------- */ .pnf-hero { position: relative; height: 100vh; overflow: hidden; background: #000; } .pnf-hero-media { position: absolute; inset: 0; transform: translateY(calc(var(--p, 0) * 25%)) scale(calc(1 + var(--p, 0) * 0.12)); will-change: transform; } .pnf-hero-media img, .pnf-hero-media video { width: 100%; height: 100%; object-fit: cover; } .pnf-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.78) 100%); } .pnf-hero-content { position: absolute; inset-inline: 0; bottom: 0; padding: 0 1.5rem 4rem; z-index: 2; opacity: calc(1 - var(--p, 0) * 1.3); } @media (min-width: 768px) { .pnf-hero-content { padding: 0 3rem 6rem; } } .pnf-hero-eyebrow { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; } .pnf-hero-title { color: #fff; font-size: clamp(3rem, 14vw, 9rem); } .pnf-hero-tagline { color: rgba(255,255,255,0.85); font-size: clamp(1.1rem, 3vw, 1.9rem); margin-top: 1.5rem; max-width: 40rem; } .pnf-hero-sponsor { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; } .pnf-hero-sponsor-label { color: rgba(255, 255, 255, 0.75); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } .pnf-hero-sponsor-logo { height: 34px; width: auto; max-width: 110px; object-fit: contain; } .pnf-hero-scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); color: rgba(255,255,255,0.7); z-index: 2; opacity: calc(1 - var(--p, 0) * 1.3); } .pnf-hero-video { z-index: 3; width: 34vw; max-width: 170px; } @media (min-width: 768px) { .pnf-hero-video { position: absolute; top: 50%; right: 2.5rem; transform: translateY(-50%); max-width: 200px; } } @media (min-width: 900px) { .pnf-hero-video { right: 4rem; max-width: 240px; } } .pnf-hero-video .pnf-eyebrow { color: rgba(255, 255, 255, 0.85); text-align: center; margin-bottom: 0.75rem; } /* Below 768px the video was an absolute overlay pinned near the top-right, which on shorter phones (iPhone SE etc.) landed on top of the bottom- anchored eyebrow/title text - there's no reliable fixed offset that clears every mobile viewport height at once. Instead, flow it in after the text as a normal block, letting the hero grow past 100vh on short screens rather than risk overlap. */ @media (max-width: 767px) { .pnf-hero { height: auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; } .pnf-hero-content { position: relative; inset-inline: auto; bottom: auto; order: 1; padding-bottom: 1.5rem; } .pnf-hero-video { position: relative; order: 2; width: 60vw; max-width: 260px; margin: 0.5rem auto 0; } .pnf-hero-scroll { position: relative; order: 3; left: auto; bottom: auto; transform: none; margin: 1.5rem auto 1.5rem; } } /* fade-up on load, staggered (hero content isn't scroll-revealed — it's already on screen at load) */ @keyframes pnfFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .pnf-hero-eyebrow, .pnf-hero-title, .pnf-hero-tagline, .pnf-hero-sponsor { animation: pnfFadeUp 1s cubic-bezier(0.22,1,0.36,1) both; } .pnf-hero-eyebrow { animation-delay: 0.3s; } .pnf-hero-title { animation-delay: 0.5s; } .pnf-hero-tagline { animation-delay: 0.9s; } .pnf-hero-sponsor { animation-delay: 1.1s; } /* opacity-only fade for the hero video card — it's centered via transform:translateY(-50%), so (unlike the fade-up above) the reveal animation must never touch transform, or it'll clobber the centering once the animation finishes. */ @keyframes pnfFadeIn { from { opacity: 0; } to { opacity: 1; } } .pnf-hero-video { opacity: 0; animation: pnfFadeIn 1s cubic-bezier(0.22,1,0.36,1) 1.1s both; } /* ---------------- sponsor ---------------- */ .pnf-sponsor { display: flex; align-items: center; justify-content: center; gap: 0.85rem; padding: 2.5rem 1.5rem 0.5rem; text-align: center; } .pnf-sponsor img { height: 68px; width: auto; max-width: 130px; object-fit: contain; } /* ---------------- big number ---------------- */ .pnf-bignum-section { position: relative; min-height: 90vh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 3rem 0; } .pnf-bignum-photo { position: absolute; width: 38vw; max-width: 380px; aspect-ratio: 3/4; box-shadow: 0 25px 60px rgba(0,0,0,0.3); opacity: clamp(0, calc(var(--p, 0) * 4), 1); will-change: transform; } .pnf-bignum-photo.left { left: 0; top: 10%; transform: translate3d(calc(-40vw + var(--p, 0) * 48vw), 0, 0) rotate(calc(-12deg + var(--p, 0) * 16deg)); } .pnf-bignum-photo.right { right: 0; bottom: 10%; width: 42vw; max-width: 440px; aspect-ratio: 4/5; transform: translate3d(calc(40vw - var(--p, 0) * 48vw), 0, 0) rotate(calc(10deg - var(--p, 0) * 16deg)); } .pnf-bignum-text { position: relative; z-index: 2; text-align: center; padding: 0 1.5rem; } .pnf-bignum-text .pnf-eyebrow { margin-bottom: 2rem; } .pnf-bignum-caption { font-size: clamp(1.25rem, 4vw, 2.25rem); margin-top: 1.5rem; max-width: 40rem; margin-inline: auto; } /* ---------------- how word got around ---------------- */ .pnf-heard { padding: 3rem 1.5rem; } @media (min-width: 900px) { .pnf-heard { padding: 5rem 3rem; } } .pnf-heard-text { max-width: 42rem; margin-inline: auto; text-align: center; } .pnf-heard-story { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45; color: var(--ed-ink-soft); margin-top: 1.25rem; } .pnf-heard-story .t1 { font-weight: 700; font-size: 1.7em; line-height: 1; display: inline-block; } /* ---------------- photo pile ---------------- */ .pnf-pile { position: relative; padding: 4rem 0; background: #000; } .pnf-pile-intro { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto 3rem; } .pnf-pile-intro .pnf-eyebrow { color: rgba(255, 255, 255, 0.7); } .pnf-pile-intro .pnf-heat-story { color: rgba(255, 255, 255, 0.85); } .pnf-pile-intro .pnf-heat-story .cat { color: #fff; } .pnf-closing { background: #000; padding: 4rem 0; } @media (min-width: 768px) { .pnf-closing { padding: 6rem 0; } } .pnf-closing-text { max-width: 40rem; margin-inline: auto; text-align: center; font-size: clamp(1.2rem, 2.8vw, 1.7rem); line-height: 1.55; font-style: italic; color: rgba(255, 255, 255, 0.82); } .pnf-closing-highlight { font-weight: 700; font-style: normal; color: var(--ed-red); } .pnf-pile-scatter { position: relative; width: 100%; height: 108vw; min-height: 780px; max-height: 1180px; overflow-x: clip; /* keeps the intentional top/bottom bleed, kills horizontal bleed */ } @media (min-width: 768px) { /* the first row of photos bleeds up to --y:-9% above this container by design - without extra clearance here, that bleed lands on top of the intro text added above it. */ .pnf-pile-scatter { margin-top: 8rem; } } .pnf-pile-photo { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 3/4; border-radius: 0.6rem; box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); cursor: pointer; rotate: var(--r, 0deg); scale: 1; z-index: 2; transition: scale 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .pnf-pile-photo img { border-radius: inherit; } .pnf-pile-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; } .pnf-pile-photo.is-throbbing::after { border: 4px solid #f0c04a; animation: pnfBurst 2.8s linear; } @keyframes pnfBurst { 0%, 35% { scale: 1; opacity: 1; border-width: 4px; box-shadow: 0 0 24px 6px rgba(240, 192, 74, 0.7); } 100% { scale: 1.5; opacity: 0; border-width: 1px; box-shadow: 0 0 34px 12px rgba(240, 192, 74, 0); } } @media (prefers-reduced-motion: reduce) { .pnf-pile-photo.is-throbbing::after { animation: none; opacity: 0; } } .pnf-pile-photo.is-throbbing { scale: 1.07; z-index: 10; } .pnf-pile-photo:hover { scale: 1.35; z-index: 20; box-shadow: 0 30px 70px rgba(0,0,0,0.7); } @media (max-width: 767px) { .pnf-pile-scatter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; height: auto; min-height: 0; max-height: none; } .pnf-pile-photo { position: relative; left: auto; top: auto; width: 100%; rotate: 0deg; } .pnf-pile-photo:nth-child(3n+1) { rotate: -3deg; } .pnf-pile-photo:nth-child(3n+2) { rotate: 2deg; margin-top: 1.25rem; } .pnf-pile-photo:nth-child(3n+3) { rotate: -2deg; } .pnf-pile-photo:hover { scale: 1.08; z-index: 5; } } /* Pile lightbox: clicking a pile photo (desktop or mobile) opens it centered at full resolution — hover/in-place zoom is just a CSS scale-up of the same rendered image, so it doesn't hold clarity at larger sizes. */ .pnf-pile-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.92); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .pnf-pile-lightbox.is-open { opacity: 1; pointer-events: auto; } .pnf-pile-lightbox img { max-width: 100%; max-height: 100%; border-radius: 0.6rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } /* ---------------- category heatmap (told as a story, not a chart) ---------------- */ .pnf-heatmap-head { margin-bottom: 2.5rem; } .pnf-heat-story { max-width: 46rem; font-weight: 400; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--ed-ink-soft); line-height: 1.55; } .pnf-heat-story .cat { font-weight: 700; color: var(--ed-ink); } /* ---------------- quote over photo, with the testimonial sharing the backdrop ---------------- */ .pnf-quote { position: relative; min-height: 85vh; overflow: hidden; display: flex; align-items: center; background: var(--ed-bg); } .pnf-quote-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; padding: 4rem 1.5rem; } @media (min-width: 900px) { .pnf-quote-inner { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; padding: 3rem; gap: 2rem; } } .pnf-quote-text { color: var(--ed-ink); max-width: 34rem; text-align: center; } .pnf-quote-mark { font-family: var(--ed-serif); color: var(--ed-red); font-size: 6rem; line-height: 1; margin-bottom: 1rem; } .pnf-quote-text blockquote { font-family: var(--ed-serif); font-style: italic; font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.15; } .pnf-quote-video { width: 100%; max-width: 220px; flex-shrink: 0; } .pnf-quote-video--wide { max-width: 380px; } .pnf-quote-video .pnf-eyebrow { color: var(--ed-ink-soft); text-align: center; margin-bottom: 1rem; } .pnf-testimonial-video-wrap { border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); } .pnf-testimonial-video { display: block; width: 100%; height: auto; }