/* ========================================================================== Global — page ground, typography, section rhythm ========================================================================== */ /* --- The ground ---------------------------------------------------------- Figma stacks three 1440×2559 velvet plates down the page. Tiling that texture puts a visible seam every plate, so it is painted once as a fixed backdrop instead — same surface, no joins, at any page height. */ html { background-color: var(--ink-deepest); } body { color: var(--gold); font-family: var(--font-ui); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; } /* The velvet itself. */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("../assets/images/bg-velvet.png") center center / cover no-repeat; } /* A dark vignette over it, so the texture never reads as wallpaper. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(125% 85% at 50% 0%, rgba(0,0,0,0) 45%, rgba(20,1,1,0.5) 100%); } main { position: relative; z-index: var(--z-content); } .footer { position: relative; z-index: var(--z-content); } /* Lenis drives scrolling; it needs the page to not fight it. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* Reference-counted scroll lock (smooth-scroll.js). On so it holds with or without Lenis — the mobile sheet and any future loader share it. */ html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden; } /* --- Containers ---------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .col-narrow { max-width: var(--col-narrow); margin-inline: auto; } .col-cards { max-width: var(--col-cards); margin-inline: auto; } .col-wide { max-width: var(--col-wide); margin-inline: auto; } /* --- Section rhythm ------------------------------------------------------ One spacing scale, applied on the section element only, so nothing downstream has to cancel it out. */ .section { position: relative; padding-block: clamp(3.5rem, 2.2rem + 5.5vw, 7rem); } .section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); } .section--flush { padding-block: 0; } /* --- Typography ---------------------------------------------------------- Erstoria → Playfair Display. Figma sets 48px/50px with -0.4px tracking: a line-height just above the cap height, which is what gives the headings their tight, engraved look. Keep that ratio as the type scales. */ .display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: 1.042; letter-spacing: -0.4px; color: var(--gold); text-wrap: balance; } .display--center { text-align: center; } .lede { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-lede); line-height: 1.35; color: var(--gold); text-wrap: balance; } .prose { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-body); line-height: 1.55; color: var(--rose); max-width: 62ch; /* keeps the measure under 80 characters */ } .gujarati { font-family: var(--font-gujarati); font-weight: 700; } /* --- Ornament layers ----------------------------------------------------- Decorative artwork is inert: never focusable, never a hit target. */ .ornament { position: absolute; pointer-events: none; user-select: none; z-index: 0; } /* A 1298x120 band of lotus motifs that frames a section heading, one motif at each end. Centred on the section, never rotated. */ .ornament--florals { top: clamp(2rem, 1rem + 4vw, 4.5rem); left: 0; right: 0; margin-inline: auto; width: min(1298px, 96%); height: auto; } /* --- Utility -------------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 200; background: var(--gold); color: var(--gold-ink); padding: 0.75rem 1.25rem; border-radius: 0 0 8px 8px; font-weight: 600; transition: transform var(--t-fast) var(--ease-out); } .skip-link:focus { transform: translate(-50%, 0); } /* --- Entrance state ------------------------------------------------------ GSAP sets the final values. These are the "before" states, applied only when JS is running so a no-JS page still shows all of its content. */ .js [data-reveal] { opacity: 0; } .js [data-reveal-y] { opacity: 0; transform: translateY(28px); } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal-y] { opacity: 1; transform: none; } }