/* ============================================================ Dastangoi - global styles (tokens, fonts, custom utilities) These are the only styles that live outside index.html. Tailwind itself is loaded from the CDN in index.html; this file only carries the design tokens + the handful of custom utility classes the markup relies on. ============================================================ */ :root { /* Two golds - bright for dark sections, deep for light sections */ --color-gold: #d3ae4f; --color-gold-light: #e8cc7a; --color-gold-dark: #a8882d; --color-ink: #1b1813; --color-charcoal: #222222; --color-stone: #777777; --color-cream: #faf7f0; --color-parchment: #f2ebd9; --color-crimson: #8b1a1a; /* Font stacks - loaded via Google Fonts in index.html. The markup references these the same way the Next build did, e.g. style="font-family: var(--font-playfair)". */ --font-playfair: "Playfair Display", Georgia, serif; --font-inter: "Inter", system-ui, sans-serif; --font-noto-nastaliq: "Noto Nastaliq Urdu", serif; } html { scroll-behavior: smooth; } body { background-color: var(--color-cream); color: var(--color-charcoal); font-family: var(--font-inter), system-ui, sans-serif; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: var(--font-playfair), Georgia, serif; } ::selection { background-color: var(--color-gold); color: var(--color-ink); } /* ============================================================ Custom round cursor (modern dot + trailing ring). Enabled only on fine-pointer devices: the script adds the .cursor-on class to , which hides the native cursor and reveals the two follower elements. #cursor-dot tracks the pointer instantly; #cursor-ring follows with a soft lag and grows when hovering interactive targets. ============================================================ */ .cursor-on, .cursor-on * { cursor: none !important; } #cursor-dot, #cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 9999px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; } .cursor-on #cursor-dot, .cursor-on #cursor-ring { opacity: 1; } #cursor-dot { width: 7px; height: 7px; background: var(--color-gold-dark); } #cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(168, 132, 42, 0.55); transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.3s ease; } #cursor-ring.is-hover { width: 52px; height: 52px; background: rgba(168, 132, 42, 0.12); border-color: rgba(168, 132, 42, 0.8); } /* Inside the performance section the golden Play badge takes over, so the round cursor fades out there. */ .cursor-on.cursor-hide #cursor-dot, .cursor-on.cursor-hide #cursor-ring { opacity: 0; } /* ---- custom utility classes used by the markup ---- */ .section-pad { padding-top: 5.6rem; padding-bottom: 5.6rem; } .font-heading { font-family: var(--font-playfair), Georgia, serif; } .font-body { font-family: var(--font-inter), system-ui, sans-serif; } .font-urdu { font-family: var(--font-noto-nastaliq), serif; } .text-gold { color: var(--color-gold); } .bg-ink { background-color: var(--color-ink); } .bg-parchment { background-color: var(--color-parchment); } .border-gold { border-color: var(--color-gold); } .divider-gold { border-top: 1px solid var(--color-gold); opacity: 0.4; } .persian-bg { background-image: url("assets/images/persian_pattern.jpg"); background-repeat: repeat; background-size: 300px; background-blend-mode: overlay; } /* ============================================================ Scroll-reveal (replaces framer-motion useInView). Elements tagged data-reveal start hidden and animate in when the IntersectionObserver in index.html adds .is-visible. ============================================================ */ [data-reveal] { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } [data-reveal="up"] { transform: translateY(40px); } [data-reveal="up-sm"] { transform: translateY(20px); } [data-reveal="up-xs"] { transform: translateY(14px); } [data-reveal="left"] { transform: translateX(-40px); } [data-reveal="right"] { transform: translateX(40px); } [data-reveal="scale"] { transform: scale(0.97); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Timeline pop-in images: slide in diagonally and rest at an angle. "right" pops up from the bottom-left and settles tilted clockwise; "left" pops up from the bottom-right and settles tilted counter-clockwise. */ [data-pop] { opacity: 0; transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.75, 0.3, 1); will-change: opacity, transform; } [data-pop="right"] { transform: translate(-40px, 48px) rotate(0deg) scale(0.94); } [data-pop="left"] { transform: translate(40px, 48px) rotate(0deg) scale(0.94); } [data-pop="right"].is-visible { opacity: 1; transform: translate(0, 0) rotate(5deg) scale(1); } [data-pop="left"].is-visible { opacity: 1; transform: translate(0, 0) rotate(-5deg) scale(1); } /* ============================================================ Story timeline (reference-style: left image, right chapter list) ============================================================ */ .story-title { color: rgba(27, 24, 19, 0.32); transition: color 0.4s ease; } .story-item:hover .story-title, .story-item.story-on .story-title { color: #1b1813; } .story-era { transition: color 0.4s ease; } .story-item.story-on .story-era { color: #a8842a; } .story-img { opacity: 0; transition: opacity 0.7s ease, transform 6s ease-out; transform: scale(1.04); } .story-img.is-on { opacity: 1; transform: scale(1); } /* ============================================================ Performance ("Watch a Performance") section - cream, lookbook framing: thin video border, static corner crosshairs, a subtle film-grain texture and a soft warm vignette over the canvas. ============================================================ */ /* Subtle film grain over the dark background */ .perf-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Soft warm vignette + a faint gold glow up top over the dark canvas */ .perf-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(211, 174, 79, 0.08), transparent 70%), radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.35) 100%); } /* Minimalist corner crosshairs framing the video */ .perf-cross { position: absolute; width: 16px; height: 16px; z-index: 20; pointer-events: none; } .perf-cross::before, .perf-cross::after { content: ""; position: absolute; background: rgba(211, 174, 79, 0.6); } .perf-cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); } .perf-cross::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); } .perf-cross-tl { top: -8px; left: -8px; } .perf-cross-tr { top: -8px; right: -8px; } .perf-cross-bl { bottom: -8px; left: -8px; } .perf-cross-br { bottom: -8px; right: -8px; } /* Act navigation - static, click only, light on the dark canvas. The underline marks the active (clicked) tab; hover only lifts the text colour, so nothing animates the layout on hover. */ .perf-tab { position: relative; color: rgba(255, 255, 255, 0.8); font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; padding-bottom: 7px; transition: color 0.3s ease; } .perf-tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--color-gold); transition: width 0.35s ease; } .perf-tab:hover { color: #ffffff; } .perf-tab.perf-tab-on { color: var(--color-gold); } .perf-tab.perf-tab-on::after { width: 100%; } /* ============================================================ Collective + Testimonials - restrained premium accents. A framed "seal" monogram (double-ruled, softly lit from within) and a faint inset frame on the quote card that echoes the lookbook crosshairs in the performance section. ============================================================ */ .monogram { position: relative; border: 1px solid rgba(211, 174, 79, 0.35); background: radial-gradient(circle at 50% 36%, rgba(211, 174, 79, 0.18), rgba(211, 174, 79, 0.03) 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: border-color 0.5s ease; } .monogram::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(211, 174, 79, 0.16); pointer-events: none; } .group:hover .monogram { border-color: rgba(211, 174, 79, 0.6); } .quote-card::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(168, 132, 42, 0.14); border-radius: 12px; pointer-events: none; } /* ============================================================ Mahmood Farooqui Speaks - tab switcher (Print / Audio-Visual) ============================================================ */ .mfs-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.5rem; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.4); background: transparent; transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .mfs-tab:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(211, 174, 79, 0.3); } .mfs-tab.mfs-tab-active { border-color: rgba(211, 174, 79, 0.65); color: #D3AE4F; background: rgba(211, 174, 79, 0.07); } /* ---- reduced motion: disable all of the above ---- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } [data-pop] { opacity: 1 !important; } .story-img { transition: opacity 0.2s ease !important; transform: none !important; } }