/* ================================================================
Rukhsar Rehman — Official Website · V2
----------------------------------------------------------------
Premium · cinematic · editorial · mobile-first
Deep charcoal · ivory cream · champagne gold · burgundy accent
Cormorant Garamond (display) · Inter (text)
================================================================ */
/* ---------- 1. Tokens (edit colours / sizes here) ---------- */
:root {
/* Surfaces */
--color-bg: #0c0a08; /* near-black charcoal */
--color-bg-soft: #14110d;
--color-bg-cream: #f4ecdd; /* ivory / warm cream */
--color-cream: #f4ecdd;
--color-cream-2: #ebe0c9;
--color-cream-3: #e2d5b9;
/* Text */
--color-text: #1a1612;
--color-text-soft: #4a4138;
--color-muted: #897f72;
--color-line: rgba(201, 163, 90, 0.22);
--color-line-strong: rgba(201, 163, 90, 0.42);
/* Accents */
--color-gold: #c9a35a;
--color-gold-2: #e3c98e;
--color-gold-deep: #8c6f3a;
--color-burgundy: #6a1f2a;
--color-burgundy-2:#48141c;
/* Type */
--font-serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Geometry */
--radius: 2px;
--radius-lg: 6px;
--container: 1240px;
--header-h: 68px;
/* Shadows */
--shadow-1: 0 1px 2px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.18);
--shadow-2: 0 2px 6px rgba(0,0,0,0.25), 0 18px 48px rgba(0,0,0,0.35);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
margin: 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease); }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: 0.005em;
line-height: 1.15;
margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }
em { font-style: italic; color: var(--color-gold-deep); }
::selection { background: var(--color-gold); color: var(--color-bg); }
/* Keyboard focus — gold ring across the site, except inside form inputs
where the existing gold border is already the focus indicator. */
:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 3px;
border-radius: 1px;
}
.btn:focus-visible { outline-offset: 4px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }
/* Skip link — invisible until keyboard focus, then slides in. */
.skip-link {
position: fixed;
top: -120px;
left: 12px;
padding: 12px 18px;
background: var(--color-bg);
color: var(--color-gold);
border: 1px solid var(--color-gold);
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
z-index: 200;
transition: top 0.25s var(--ease);
}
/* Only reveal the skip-link on real keyboard navigation
(`:focus-visible`). Programmatic `.focus()` calls — e.g. the
Back-to-Top button — must not slide it into view. V15. */
.skip-link:focus-visible {
top: 12px;
outline: none;
}
/* ---------- 3. Layout helpers ---------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
/* V9 — tighter section rhythm: less vertical air, more editorial pace. */
.section {
padding: clamp(44px, 5.5vw, 80px) 0;
position: relative;
}
.section-dark {
background: var(--color-bg);
color: var(--color-cream);
}
.section-dark .section-title,
.section-dark h3 { color: var(--color-cream); }
.section-dark p { color: rgba(244, 236, 221, 0.78); }
.section-head {
text-align: center;
max-width: 680px;
margin: 0 auto clamp(28px, 4vw, 44px);
}
.section-title {
font-size: clamp(1.95rem, 4vw, 3rem);
margin-bottom: 0.35em;
}
.section-title::after {
content: "";
display: block;
width: 48px;
height: 1px;
background: var(--color-gold);
margin: 16px auto 0;
}
.two-col .section-title::after,
.theatre-text .section-title::after,
.contact-text .section-title::after { margin-left: 0; margin-right: 0; }
.section-sub {
color: var(--color-text-soft);
font-size: 1rem;
margin: 0;
}
.section-dark .section-sub { color: rgba(244, 236, 221, 0.7); }
.eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--color-gold);
margin: 0 0 14px;
}
.eyebrow-dark { color: var(--color-gold-deep); }
.two-col {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
@media (min-width: 880px) {
.two-col { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.muted-note {
text-align: center;
margin: 32px 0 0;
color: var(--color-text-soft);
font-size: 0.92rem;
}
.muted-note-left { text-align: left; }
.section-dark .muted-note { color: rgba(244, 236, 221, 0.6); }
.muted-note a { color: var(--color-gold); border-bottom: 1px solid var(--color-line); }
.lead {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.2rem, 1.8vw, 1.4rem);
line-height: 1.5;
color: var(--color-text);
margin-bottom: 20px;
}
/* ---------- 4. Buttons ---------- */
.btn {
display: inline-block;
padding: 13px 26px;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.3s var(--ease);
text-align: center;
}
.btn-gold {
background: var(--color-gold);
color: var(--color-bg);
border-color: var(--color-gold);
}
.btn-gold:hover {
background: var(--color-gold-2);
border-color: var(--color-gold-2);
transform: translateY(-1px);
box-shadow: 0 10px 30px rgba(201, 163, 90, 0.28);
}
.btn-ghost {
background: transparent;
color: var(--color-cream);
border-color: rgba(244, 236, 221, 0.55);
}
.btn-ghost:hover {
background: rgba(244, 236, 221, 0.08);
border-color: var(--color-cream);
}
.btn-block { width: 100%; }
/* ---------- 5. Sticky navigation ---------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(12, 10, 8, 0.5);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-scrolled {
background: rgba(12, 10, 8, 0.94);
border-color: rgba(201, 163, 90, 0.18);
}
.nav-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-cream); }
.brand-mark {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.05em;
width: 36px; height: 36px;
display: inline-flex;
align-items: center; justify-content: center;
border: 1px solid var(--color-gold);
color: var(--color-gold);
border-radius: 50%;
}
/* V45 — image-based variant of the brand mark.
Used in the header and the footer to show the RR monogram
crest (`assets/images/branding/rr-logo.png`) in place of
the original text "RR". The crest already has its own
circular border + laurel wreath, so the text-style border,
border-radius and ink colour from `.brand-mark` are
neutralised here. The container keeps its 36 × 36 box so
the rest of the header layout / gap stays bit-identical
to the pre-V45 text mark. */
.brand-mark-logo {
border: 0;
background: transparent;
border-radius: 0;
color: transparent;
letter-spacing: 0;
padding: 0;
overflow: visible;
}
.brand-mark-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Footer brand-mark sits in a more spacious area than the
header, so we let it render at 52 × 52 — still small and
restrained, but visible as a proper crest above the
wordmark + tagline. */
.brand-mark-footer {
width: 52px;
height: 52px;
}
.brand-name {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.04em;
}
.site-nav ul { display: flex; align-items: center; gap: 24px; }
.site-nav a {
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(244, 236, 221, 0.82);
position: relative;
padding: 6px 0;
}
.site-nav a:hover { color: var(--color-gold); }
.site-nav a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--color-gold);
transition: width 0.3s var(--ease);
}
.site-nav a:hover::after { width: 100%; }
.nav-cta {
border: 1px solid var(--color-gold);
padding: 8px 18px !important;
border-radius: var(--radius);
color: var(--color-gold) !important;
}
.nav-cta:hover {
background: var(--color-gold);
color: var(--color-bg) !important;
}
.nav-cta::after { display: none; }
/* Mobile toggle */
.nav-toggle {
display: none;
background: none;
border: 0;
width: 36px; height: 36px;
position: relative;
z-index: 110;
}
.nav-toggle span {
display: block;
width: 22px; height: 1.5px;
background: var(--color-cream);
margin: 5px auto;
transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px) {
.nav-toggle { display: block; }
/* V13 — mobile nav: solid dark panel under the sticky header,
not a transparent overlay. The header (z-index 100) stays on
top so the brand mark and the close button remain visible
while the menu is open. The panel fills the viewport with
`100svh`, so iOS Safari's URL bar doesn't crop the items. */
.site-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* fallback */
height: 100svh; /* respects mobile dynamic viewport */
background: var(--color-bg);
transform: translateY(-100%);
transition: transform 0.4s var(--ease);
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
z-index: 99; /* below the header so the close X stays clickable */
}
.site-nav.open { transform: translateY(0); }
.site-nav ul {
flex-direction: column;
gap: 12px;
text-align: center;
padding: var(--header-h) 24px 24px;
width: 100%;
}
.site-nav a {
font-size: 0.88rem;
letter-spacing: 0.18em;
padding: 6px 0;
color: rgba(244, 236, 221, 0.92);
}
.site-nav .nav-cta {
margin-top: 8px;
padding: 10px 22px !important;
}
}
/* ---------- 6. HERO ---------- */
/* V30 — final wide hero asset is now live on disk.
The image assets/images/hero-portrait.png (1672 × 941,
16:9) is a manually composed wide hero with the entire
approved Design 2 layout baked in:
- Rukhsar on the right, full standing figure visible
- sunset / beach extended across the full hero width
- left ~35–45% smoothly darkened for the text column
- warm cinematic black / gold tonality
- no hard split, no boxed-image effect
CSS no longer tries to construct any of that. It just
fills the hero area with the image at `cover` / `center`.
The overlay is a soft readability layer only — since the
dark text zone is already in the photo, the overlay does
NOT need to add a heavy left dim; doing so would
over-darken the image. */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-cream);
overflow: hidden;
padding: calc(var(--header-h) + 24px) 24px 90px;
/* Deep warm-black fallback. Only paints if the image
fails to load. */
background: #0a0604;
}
/* Hero image
------------------------------------------------------------------
Single background-image: the new manually-composed wide
hero. `cover` + `center center` fills the hero with no
right-side panel behaviour, no letterbox seam, and no
reliance on a portrait fallback file (which V29 used and
which has been removed from the folder).
------------------------------------------------------------------ */
.hero-image {
position: absolute; inset: 0;
background-image: url("assets/images/hero-portrait.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* V30 — minimal readability overlay. The wide hero image
already carries its own darkened-left text zone, so this
overlay does NOT add a heavy left dim. It only adds a
tiny extra cushion at the very bottom edge so the credit
marquee strip retains contrast against the brightest
horizon pixels, and a very mild left tint to insure
against any future image revision being a stop brighter.
Top stays clear; right side fully transparent. */
.hero-overlay {
position: absolute; inset: 0;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(6, 4, 3, 0.20) 0%,
rgba(6, 4, 3, 0.10) 35%,
rgba(6, 4, 3, 0) 70%),
linear-gradient(180deg,
rgba(6, 4, 3, 0) 0%,
rgba(6, 4, 3, 0) 72%,
rgba(6, 4, 3, 0.30) 100%);
}
/* V31 / V32 — mobile / tablet hero crop fix.
--------------------------------------------------------------
The wide 16:9 hero image (`hero-portrait.png`, 1672 × 941)
has Rukhsar on the RIGHT side of the composition. On a
portrait phone viewport, `cover` scales the image by height,
so the horizontal window is only ~28% of the image width.
The V30 default `background-position: center center` cropped
to ~36–64% of image (no Rukhsar). V31 tried `78% center`
which still landed in the bright sun-reflection band with
Rukhsar barely creeping into the right edge.
V32 pushes the anchor all the way to `right center` so the
visible window maps to roughly the **right 28% of the image
width (~72–100%)** — putting Rukhsar's body and face firmly
into the centre of the phone viewport, with the warm
sunset glow framing her.
The desktop hero (`@media (min-width: 1024px)` further below)
keeps `background-position: center center` and is unaffected.
Because the right-edge crop removes ALL of the image's
baked-in dark text zone (which sits at 0–15% of image width)
and replaces the underlying texture with bright cream saree
+ warm water, the V32 overlay is strengthened across the
text band. Vertical gradient only (mobile text is
`text-align: center`, so a horizontal left-dim wouldn't sit
behind it). Top stays light so the sky reads; deep dim
across the title / lede / button band; deepest at the
bottom for credit marquee contrast.
*/
@media (max-width: 1023px) {
.hero-image {
/* V33 — back off from `right center` (100%) to 88%.
`right center` jammed Rukhsar's right edge / saree
pallu flush against the viewport's right edge with no
breathing room. At 88% the visible window maps to
roughly the image's **63–91% horizontal band** — her
full upper body / face / saree drape sits centred in
the phone viewport with a small breathing margin on
both sides. Desktop block (min-width: 1024px) still
uses `center center` and is unaffected. */
background-position: 88% center;
}
.hero-overlay {
background:
linear-gradient(180deg,
rgba(6, 4, 3, 0.25) 0%,
rgba(6, 4, 3, 0.10) 12%,
rgba(6, 4, 3, 0.30) 24%,
rgba(6, 4, 3, 0.52) 40%,
rgba(6, 4, 3, 0.68) 56%,
rgba(6, 4, 3, 0.80) 74%,
rgba(6, 4, 3, 0.90) 90%,
rgba(6, 4, 3, 0.92) 100%);
}
}
/* Subtle film-grain layer adds the cinematic feel */
/* V19 — grain disabled. The clean baked-on-black portrait + pure
black hero canvas should read sharp and uncluttered, no film
noise. Rule kept (display:none) so the texture pattern is still
in the codebase if a future cinematic pass wants to opt back in. */
.hero-grain {
display: none;
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.12;
mix-blend-mode: overlay;
background-image:
radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1px);
background-size: 3px 3px, 5px 5px;
background-position: 0 0, 1px 2px;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 860px;
text-align: center;
animation: heroFadeIn 1.4s var(--ease) both;
padding: 0 8px;
}
.hero-eyebrow {
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-gold);
margin: 0 0 18px;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}
.hero-eyebrow .dot { color: var(--color-gold-deep); opacity: 0.7; }
.hero-title {
font-size: clamp(2.6rem, 8.5vw, 6.4rem);
font-weight: 400;
letter-spacing: 0.012em;
line-height: 0.98;
margin: 0 0 0.18em;
color: var(--color-cream);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
/* Decorative gold divider between title and tagline */
.hero-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 12px 0 18px;
}
.hero-divider .d-line {
width: 38px; height: 1px;
background: var(--color-gold);
}
.hero-divider .d-mark {
font-size: 0.55rem;
color: var(--color-gold);
letter-spacing: 0.05em;
line-height: 1;
}
.hero-tagline {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.1rem, 2.4vw, 1.55rem);
letter-spacing: 0.14em;
color: var(--color-gold-2);
margin: 0 0 22px;
}
.hero-lede {
font-size: 1.02rem;
line-height: 1.75;
max-width: 600px;
margin: 0 auto 32px;
color: rgba(244, 236, 221, 0.86);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
/* Hero credit ticker — adds cinematic actor-website feel */
.hero-marquee {
position: absolute;
left: 0; right: 0;
bottom: 28px;
z-index: 2;
border-top: 1px solid rgba(201, 163, 90, 0.22);
border-bottom: 1px solid rgba(201, 163, 90, 0.22);
padding: 12px 0;
background: rgba(12, 10, 8, 0.35);
backdrop-filter: blur(4px);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-marquee-track {
display: inline-flex;
align-items: center;
gap: 36px;
white-space: nowrap;
animation: marqueeSlide 55s linear infinite;
will-change: transform;
}
.hero-marquee-track span {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
letter-spacing: 0.1em;
color: rgba(244, 236, 221, 0.78);
flex-shrink: 0;
}
.hero-marquee-track span.m-dot { color: var(--color-gold); }
@keyframes marqueeSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.hero-scroll {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
width: 22px; height: 36px;
border: 1px solid rgba(244, 236, 221, 0.55);
border-radius: 12px;
z-index: 2;
}
.hero-scroll span {
display: block;
width: 2px; height: 8px;
background: var(--color-gold);
margin: 8px auto 0;
border-radius: 2px;
animation: scrollDot 1.6s ease-in-out infinite;
}
@media (max-width: 720px) {
.hero { min-height: 100svh; padding-bottom: 110px; }
.hero-marquee { bottom: 0; }
.hero-marquee-track span { font-size: 0.95rem; }
.hero-scroll { display: none; }
.hero-eyebrow { font-size: 0.62rem; gap: 6px; letter-spacing: 0.34em; }
.hero-actions .btn { padding: 12px 20px; font-size: 0.74rem; }
}
/* ================================================================
V25 — Desktop Hero, Design 2 (sunset cinematic, text-left)
----------------------------------------------------------------
Replaces the V16 split layout. The new direction:
- Full-bleed sunset hero image fills the entire viewport
(no 50 % column crop, no `contain` letterbox).
- .hero-overlay applies a horizontal LEFT → RIGHT dark
gradient so the left half is dim enough for cream text
while the right half stays clear and shows Rukhsar against
the warm sunset.
- .hero-content sits LEFT, left-aligned, with a max-width
that keeps the right half visually clear of text.
- Marquee stays full-width at the bottom.
- All copy unchanged. No statistics, no counters.
================================================================ */
@media (min-width: 1024px) {
.hero {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 0;
/* V29 — same dark fallback as the base rule. No more
CSS-constructed warm gradient: the wide hero image
carries the entire design (warm sunset across the
hero, left-side darkening baked in). */
background: #0a0604;
}
/* Visual layers fill the entire hero. The image is the
source of truth for the V29 design; the overlay is only
a soft readability dim. */
.hero-image,
.hero-overlay {
inset: 0;
width: 100%;
height: 100%;
}
.hero-image {
/* V30 — single wide hero image (`hero-portrait.png`,
1672 × 941, 16:9), pre-composed with the entire
Design 2 layout baked in. CSS just fills the hero
with it at `cover` + `center center`. Identical to
the base rule; kept here for explicitness. */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* V30 — minimal readability overlay on desktop too.
Because the image already has its dark text zone baked
in, the overlay is intentionally very light — adding a
heavier left dim here would OVER-DARKEN the photo and
muddy the warm sunset tones the design depends on. The
mild gradient below just provides a tiny safety cushion
for the cream-and-gold text and a very subtle bottom
darken so the marquee strip retains contrast. */
.hero-overlay {
display: block;
background:
linear-gradient(90deg,
rgba(6, 4, 3, 0.22) 0%,
rgba(6, 4, 3, 0.12) 32%,
rgba(6, 4, 3, 0.04) 55%,
rgba(0, 0, 0, 0) 72%),
linear-gradient(180deg,
rgba(6, 4, 3, 0) 0%,
rgba(6, 4, 3, 0) 72%,
rgba(6, 4, 3, 0.28) 100%);
}
/* Left-aligned text block. max-width keeps the block to the
left third / left half of the viewport so Rukhsar on the
right stays fully visible. */
.hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 540px;
margin: 0 0 0 clamp(36px, 6vw, 100px);
padding: clamp(80px, 10vh, 130px) 24px clamp(90px, 12vh, 140px) 0;
text-align: left;
align-self: center;
}
.hero-eyebrow,
.hero-divider,
.hero-actions {
justify-content: flex-start;
}
.hero-lede {
margin: 0 0 32px 0;
max-width: 480px;
}
.hero-marquee {
bottom: 0;
left: 0;
right: 0;
}
.hero-scroll { display: none; }
}
/* On the smallest phones, stack hero buttons full-width for tap-friendliness */
@media (max-width: 420px) {
.hero-actions {
flex-direction: column;
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.hero-actions .btn { width: 100%; }
}
@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollDot {
0% { transform: translateY(0); opacity: 1; }
60% { transform: translateY(12px); opacity: 0.2; }
100% { transform: translateY(0); opacity: 1; }
}
/* ---------- 7. ABOUT ---------- */
.section-about { background: var(--color-cream); }
.about-grid { gap: 56px; }
.about-image {
position: relative;
}
.about-image .image-frame {
width: 100%;
aspect-ratio: 3 / 4;
background:
url("assets/images/about-new-rukhsar-01.jpeg") center 25% / cover no-repeat,
linear-gradient(160deg, #2a2018 0%, #0c0a08 100%);
border: 1px solid var(--color-line-strong);
position: relative;
box-shadow: var(--shadow-2);
}
.about-image .image-frame::before {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(201, 163, 90, 0.45);
pointer-events: none;
}
.frame-caption {
display: block;
margin-top: 12px;
font-size: 0.74rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--color-muted);
}
.about-text p {
color: var(--color-text-soft);
font-size: 1.02rem;
}
.fact-list {
margin-top: 28px;
border-top: 1px solid var(--color-line);
}
.fact-list li {
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px;
padding: 13px 0;
border-bottom: 1px solid var(--color-line);
font-size: 0.96rem;
}
.fact-list li span {
color: var(--color-muted);
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
align-self: center;
}
.fact-list li strong {
color: var(--color-text);
font-weight: 500;
font-family: var(--font-serif);
font-size: 1.1rem;
}
/* ---------- 8. FEATURED CREDITS ---------- */
.section-featured {
background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-2) 100%);
}
/* V9 — credit cards now match the compact rhythm of Film & OTT. */
.credit-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.credit-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.credit-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-2);
border-color: var(--color-gold);
}
.credit-poster {
aspect-ratio: 2 / 3;
background: linear-gradient(150deg, #1a1310 0%, #08060a 100%);
position: relative;
overflow: hidden;
}
.credit-poster::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(201, 163, 90, 0.30);
pointer-events: none;
z-index: 2;
}
/* Editorial poster placeholder label */
.poster-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.2rem;
letter-spacing: 0.06em;
text-align: center;
padding: 0 14px;
color: rgba(201, 163, 90, 0.7);
z-index: 1;
}
/* When real posters are added at the paths below, they replace the placeholder. */
.credit-poster[data-poster="pk"] { background-image: url("assets/posters/pk.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="uri"] { background-image: url("assets/posters/uri.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="83"] { background-image: url("assets/posters/83.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="sarkar"] { background-image: url("assets/posters/sarkar.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="d"] { background-image: url("assets/posters/d.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="gone-game"] { background-image: url("assets/posters/gone-game.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="night-manager"] { background-image: url("assets/posters/night-manager.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="khuda-haafiz"] { background-image: url("assets/posters/khuda-haafiz-2.jpg"),linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-poster[data-poster="nirbhaya"] { background-image: url("assets/posters/nirbhaya.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.credit-meta {
padding: 14px 16px 18px;
border-top: 1px solid var(--color-line);
}
.credit-tag {
font-size: 0.64rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0 0 5px;
}
.credit-meta h3 {
font-size: 1.08rem;
margin: 0 0 4px;
color: var(--color-text);
line-height: 1.25;
}
.credit-year {
font-size: 0.78rem;
color: var(--color-muted);
margin: 0;
}
/* ---------- 9. FILM & OTT (compact card grid) ---------- */
.film-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.film-card {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(201, 163, 90, 0.18);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.film-card:hover {
transform: translateY(-4px);
border-color: var(--color-gold);
background: rgba(201, 163, 90, 0.05);
}
.film-poster {
aspect-ratio: 2 / 3;
background: linear-gradient(150deg, #1a1310 0%, #08060a 100%);
position: relative;
}
.film-poster::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(201, 163, 90, 0.22);
pointer-events: none;
}
.film-poster[data-poster="pk"] { background-image: url("assets/posters/pk.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="uri"] { background-image: url("assets/posters/uri.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="83"] { background-image: url("assets/posters/83.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="sarkar"] { background-image: url("assets/posters/sarkar.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="d"] { background-image: url("assets/posters/d.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="khuda-haafiz"] { background-image: url("assets/posters/khuda-haafiz-2.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="yaad-rakhegi-duniya"]{ background-image: url("assets/posters/yaad-rakhegi-duniya.jpg"),linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="inteha-pyar-ki"] { background-image: url("assets/posters/inteha-pyar-ki.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="gone-game"] { background-image: url("assets/posters/gone-game.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="night-manager"] { background-image: url("assets/posters/night-manager.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
/* Forward-compatible poster paths for the broader V8 filmography.
The files don't exist yet — placeholders show until they do. */
.film-poster[data-poster="god-tussi-great-ho"] { background-image: url("assets/posters/god-tussi-great-ho.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="stoneman-murders"] { background-image: url("assets/posters/the-stone-man-murders.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="shaitan"] { background-image: url("assets/posters/shaitan.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="bheja-fry-2"] { background-image: url("assets/posters/bheja-fry-2.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="the-body"] { background-image: url("assets/posters/the-body.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="take-off"] { background-image: url("assets/posters/take-off.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="haq-se"] { background-image: url("assets/posters/haq-se.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="lahore-1947"] { background-image: url("assets/posters/lahore-1947.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="uttar-da-puttar"] { background-image: url("assets/posters/uttar-da-puttar.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
/* V26 — additional film posters newly added to assets/posters/.
Filenames use the exact casing found on disk (mind Benny-Babloo
capital B's — important for Linux/GoDaddy case-sensitive paths). */
.film-poster[data-poster="knock-out"] { background-image: url("assets/posters/knock-out.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="kaccha-limboo"] { background-image: url("assets/posters/kaccha-limboo.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="life-ki-toh-lag-gayi"] { background-image: url("assets/posters/life-ki-toh-lag-gayi.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="operation-fryday"] { background-image: url("assets/posters/operation-fryday.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="benny-babloo"] { background-image: url("assets/posters/Benny-Babloo.jpg"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="love-games"] { background-image: url("assets/posters/love-games.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="thanks-maa"] { background-image: url("assets/posters/thanks-maa.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
.film-poster[data-poster="accident-on-hill-road"] { background-image: url("assets/posters/accident-on-hill-road.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: center; }
/* V34 — Tumse Milkar moved from Television to Film.
V35 — `background-position` shifted from `center` (50%) to
`25% center`. The supplied Tumse Milkar artwork is a wide
~16:9 landscape poster, but the film card is a 2:3 portrait
tile. With `cover`, the image scales to fill height and the
horizontal crop window is ~37% of image width — default
`center` landed that window on the title text + male co-star
and clipped Rukhsar's face. At `25% center` the window
slides left to roughly image x 16–53%, framing Rukhsar's
face cleanly with the title still peeking in on the right
for context. */
.film-poster[data-poster="tumse-milkar"] { background-image: url("assets/posters/tumse-milkar.png"), linear-gradient(150deg,#1a1310,#08060a); background-size: cover; background-position: 25% center; }
/* Upcoming-card styling — burgundy accent distinguishes
forthcoming projects from released work without being loud. */
.film-tag.film-tag-upcoming {
background: var(--color-burgundy);
color: var(--color-cream);
}
.film-card.film-card-upcoming {
border-color: rgba(106, 31, 42, 0.5);
}
.film-card.film-card-upcoming:hover {
border-color: var(--color-burgundy);
background: rgba(106, 31, 42, 0.06);
}
.film-meta {
padding: 14px 16px 18px;
border-top: 1px solid rgba(201, 163, 90, 0.18);
}
.film-tag {
display: inline-block;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-bg);
background: var(--color-gold);
padding: 3px 8px;
border-radius: 1px;
margin-bottom: 8px;
}
.film-meta h3 {
font-size: 1.05rem;
margin: 0 0 4px;
color: var(--color-cream);
line-height: 1.25;
}
.film-meta p {
font-size: 0.78rem;
color: rgba(244, 236, 221, 0.55);
margin: 0;
letter-spacing: 0.05em;
}
/* ---------- 10. TELEVISION ---------- */
.section-television {
background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-2) 100%);
}
/* V23 — Hindi Television redesigned as a compact horizontal
editorial grid. The previous V12 thumbnail layout was making
the section ~700 px tall on mobile; this version uses thin
borders, small numerals and refined typography to fit every
credit on roughly 200–300 px of vertical space.
Layout: 1 column on mobile, 2 on tablet, 3 × 3 on desktop.
The TV image files in `assets/tv/` are kept for future use
but no longer referenced by CSS or HTML. */
.tv-list {
list-style: none;
padding: 0;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--color-line);
max-width: 720px;
}
@media (min-width: 600px) {
.tv-list {
grid-template-columns: repeat(2, 1fr);
column-gap: 32px;
max-width: 920px;
}
}
@media (min-width: 1024px) {
.tv-list {
grid-template-columns: repeat(3, 1fr);
column-gap: 40px;
max-width: 1080px;
}
}
.tv-item {
display: grid;
grid-template-columns: 28px 1fr;
column-gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--color-line);
transition: padding 0.3s var(--ease);
}
.tv-item:hover { padding-left: 6px; }
.tv-num {
grid-row: 1 / span 2;
font-family: var(--font-serif);
font-size: 0.95rem;
letter-spacing: 0.08em;
color: var(--color-gold-deep);
align-self: start;
padding-top: 3px;
}
.tv-item h3 {
grid-column: 2;
grid-row: 1;
font-size: clamp(1rem, 1.3vw, 1.12rem);
margin: 0 0 4px;
line-height: 1.2;
font-weight: 500;
color: var(--color-text);
}
.tv-tag {
grid-column: 2;
grid-row: 2;
font-size: 0.62rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--color-muted);
white-space: nowrap;
}
/* ---------- 11. THEATRE ---------- */
.theatre-section { position: relative; }
.theatre-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(106, 31, 42, 0.30), transparent 55%),
radial-gradient(circle at 10% 90%, rgba(201, 163, 90, 0.10), transparent 50%);
pointer-events: none;
}
.theatre-grid {
display: grid;
gap: 36px;
grid-template-columns: 1fr;
align-items: center;
position: relative;
}
@media (min-width: 880px) {
.theatre-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; }
}
.theatre-list {
margin-top: 20px;
border-top: 1px solid var(--color-line);
}
.theatre-list li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 0;
border-bottom: 1px solid var(--color-line);
}
.theatre-list strong {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--color-cream);
font-weight: 500;
}
.theatre-list span {
color: rgba(244, 236, 221, 0.62);
font-size: 0.84rem;
letter-spacing: 0.06em;
}
.theatre-quote {
position: relative;
padding: 38px 28px 30px;
border: 1px solid rgba(201, 163, 90, 0.45);
background: linear-gradient(180deg, rgba(106,31,42,0.18) 0%, rgba(12,10,8,0.4) 100%);
text-align: left;
}
.theatre-quote::before,
.theatre-quote::after {
content: "";
position: absolute;
width: 28px; height: 28px;
border: 1px solid var(--color-gold);
}
.theatre-quote::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.theatre-quote::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* Theatre feature card (neutral content; replaces the V2 quote) */
.theatre-feature .feature-eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-gold);
margin: 0 0 16px;
}
.theatre-feature .feature-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.6vw, 2.8rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: 0.01em;
color: var(--color-cream);
margin: 0 0 6px;
}
.theatre-feature .feature-byline {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.1rem;
color: var(--color-gold-2);
margin: 0 0 18px;
}
.theatre-feature .feature-body {
font-size: 0.96rem;
line-height: 1.7;
color: rgba(244, 236, 221, 0.78);
margin: 0;
}
/* ---------- 12. ENDORSEMENTS ---------- */
.section-brands { background: var(--color-cream-2); }
/* Brand grid: 2-up on small mobile, 3-up from 600px upward.
This keeps the 9 brands in a clean 3 × 3 on tablet & desktop. */
.brand-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
.brand-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
.brand-tile {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid var(--color-line);
background: #fff;
padding: 22px 12px;
min-height: 100px;
cursor: default;
transition: all 0.35s var(--ease);
position: relative;
}
@media (min-width: 600px) {
.brand-tile { padding: 26px 16px; min-height: 116px; }
}
.brand-tile::before {
content: "";
position: absolute;
inset: 8px;
border: 1px solid transparent;
transition: border-color 0.4s var(--ease);
pointer-events: none;
}
.brand-tile:hover {
background: var(--color-bg);
transform: translateY(-3px);
}
.brand-tile:hover::before { border-color: rgba(201, 163, 90, 0.4); }
.brand-tile:hover .brand-title { color: var(--color-gold-2); }
.brand-tile:hover .brand-cat { color: var(--color-gold-deep); }
.brand-title {
font-family: var(--font-serif);
font-size: 1.15rem;
letter-spacing: 0.04em;
color: var(--color-text);
transition: color 0.35s var(--ease);
}
.brand-cat {
margin-top: 6px;
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-muted);
transition: color 0.35s var(--ease);
}
@media (min-width: 600px) {
.brand-title { font-size: 1.4rem; }
.brand-cat { margin-top: 8px; font-size: 0.68rem; letter-spacing: 0.3em; }
}
/* ---------- 13. GALLERY ---------- */
.section-gallery { background: var(--color-cream); }
/* Editorial 5-tile arrangement.
Mobile: stacked. Tablet+: a feature tile + 4 supporting tiles. */
.gallery-grid {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.gallery-grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
}
}
.g-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 28px 26px;
background: linear-gradient(135deg, #1a1310 0%, #2a1f17 100%);
border-radius: var(--radius);
overflow: hidden;
color: var(--color-cream);
min-height: 220px;
cursor: pointer;
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.g-tile::before {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(201, 163, 90, 0.25);
pointer-events: none;
z-index: 2;
transition: border-color 0.4s var(--ease);
}
.g-tile::after {
content: attr(data-cat);
position: absolute;
top: 16px; right: 22px;
font-family: var(--font-serif);
font-size: 0.85rem;
letter-spacing: 0.18em;
color: var(--color-gold);
z-index: 3;
}
.g-tile:hover {
transform: scale(1.01);
box-shadow: var(--shadow-2);
}
.g-tile:hover::before { border-color: var(--color-gold); }
.g-tile-cat {
position: relative;
z-index: 3;
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
font-weight: 500;
line-height: 1.1;
margin-bottom: 6px;
}
.g-tile-meta {
position: relative;
z-index: 3;
font-size: 0.86rem;
color: rgba(244, 236, 221, 0.7);
margin-bottom: 12px;
}
.g-tile-tag {
position: relative;
z-index: 3;
display: inline-block;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-gold);
border-top: 1px solid rgba(201, 163, 90, 0.4);
padding-top: 10px;
width: fit-content;
}
/* Subtle dark gradient overlay so text remains readable when real images land */
.g-tile {
background-color: #1a1310;
}
.g-tile::after { content: attr(data-cat); }
/* V14 — gallery covers now point at category subfolders.
The first image in each category subfolder is the tile's cover
image, which keeps continuity when the lightbox opens (the
visitor sees the same frame they tapped). */
.g-tile-1 { background-image: linear-gradient(180deg, rgba(12,10,8,0.45), rgba(12,10,8,0.82)), url("assets/images/gallery/portraits/G8.png"); background-size: cover; background-position: center 22%; }
.g-tile-2 { background-image: linear-gradient(180deg, rgba(12,10,8,0.40), rgba(12,10,8,0.78)), url("assets/images/gallery/editorial/G3.png"); background-size: cover; background-position: center 18%; }
.g-tile-3 { background-image: linear-gradient(180deg, rgba(12,10,8,0.45), rgba(12,10,8,0.82)), url("assets/images/gallery/screen/G2.png"); background-size: cover; background-position: center 30%; }
.g-tile-4 { background-image: linear-gradient(180deg, rgba(12,10,8,0.45), rgba(12,10,8,0.82)), url("assets/images/gallery/theatre/G12.png"); background-size: cover; background-position: center 12%; }
.g-tile-5 { background-image: linear-gradient(180deg, rgba(12,10,8,0.50), rgba(12,10,8,0.85)), url("assets/images/gallery/behind-the-scene/G6.png");background-size: cover; background-position: center 22%; }
/* Editorial layout for the 5-tile gallery on tablet+
Row 1: [Portraits 2 cols] [Editorial 2x2 — feature]
Row 2: [Screen ][Theatre ] [Editorial 2x2 continues]
Row 3: [Behind the Scenes — full-width band ]
This avoids any orphan tiles and gives a true editorial rhythm. */
@media (min-width: 720px) {
.g-tile-1 { grid-column: 1 / span 2; grid-row: 1; } /* Portraits */
.g-feature { grid-column: 3 / span 2; grid-row: 1 / span 2; min-height: 0; } /* Editorial */
.g-tile-3 { grid-column: 1; grid-row: 2; } /* Screen */
.g-tile-4 { grid-column: 2; grid-row: 2; } /* Theatre */
.g-tile-5 { grid-column: 1 / span 4; grid-row: 3; } /* BTS — bottom band */
}
/* ================================================================
V38 — One-album gallery
----------------------------------------------------------------
Replaces the V14 five-category layout above. The .g-tile* rules
are kept intact above but no HTML element references them
anymore — they are dormant in case a future version restores the
category gallery. Only the .album-* rules below are active.
Layout:
- 4-column grid on desktop / tablet
- Tile 1 (feature) spans 2 columns × 2 rows
- Tiles 2–9 are uniform 1×1 cells around it
- 2-column grid on mobile (≤ 720 px); feature becomes uniform
- Real ![]()
tags with native lazy-loading (no CSS background
trickery) so the browser handles loading + decoding properly
================================================================ */
.album-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 0 0 28px;
}
.album-tile {
position: relative;
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
border: 1px solid var(--color-line);
background: #0c0a08;
cursor: pointer;
transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
-webkit-tap-highlight-color: transparent;
}
.album-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
filter: saturate(1.02);
}
.album-tile::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(12,10,8,0) 55%, rgba(12,10,8,0.45) 100%);
opacity: 0.7;
transition: opacity 0.45s var(--ease);
}
.album-tile:hover,
.album-tile:focus-visible {
border-color: var(--color-gold);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
outline: none;
}
.album-tile:hover img,
.album-tile:focus-visible img {
transform: scale(1.04);
}
.album-tile:hover::after,
.album-tile:focus-visible::after {
opacity: 0.3;
}
/* Tablet+ : 4 columns. The feature keeps its ORIGINAL V38 shape
— a 2×2 grid area with a 1:1 (square) intrinsic aspect — so
the rest of the gallery alignment is preserved exactly. The
row tracks are sized to the surrounding 3:4 portrait tiles
(~4W/3 each), and because the feature's intrinsic height (2W)
is shorter than its 2-row span (~8W/3), a horizontal blank
strip naturally appears below the feature inside cols 1–2.
V40 fills that strip — and only that strip — with album-11
via the `.album-tile-eyes` rule below. No tile is moved. */
@media (min-width: 720px) {
.album-grid {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.album-tile-feature {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: 1 / 1;
/* V42 — anchor to the TOP of the 2×2 cell area so the
1:1 aspect-ratio is the source of truth for height
(some browsers otherwise apply `align-self: stretch`
by default, fight the aspect-ratio, and either
stretch the feature container to fill the cell
vertically — wiping out the natural gap below — or
render inconsistently). With `align-self: start`,
the feature image always sits at the top and the
gap below is predictable for the `.album-tile-eyes`
strip placement below. */
align-self: start;
}
/* V40 — minimal, desktop-only gap-fill.
Album-11 (close-up eyes frame) is placed EXPLICITLY in the
same grid area as the feature's row-2 half (cols 1–2,
row 2), but with `align-self: end` so its box anchors to
the bottom of that row. Combined with `aspect-ratio: 3 / 1`
(very wide & short), it occupies exactly the blank strip
left by the feature's 1:1 aspect — it does NOT overlap the
feature image (which sits at the top of its cell) and does
NOT push any other tile out of place.
`object-position: center 30%` biases the cover crop upward
so the eyes read inside the wide aspect.
The rule is scoped to (min-width: 720px); on phones/tablets
below that, album-11 inherits the default .album-tile box
and stacks naturally as the 10th tile in the 2-col grid. */
/* V43 — eyes strip moved out of V41/V42 overlay position (row
2 bottom-anchored inside the feature's 2×2 cell area) into
its OWN dedicated row 3, cols 1–2. The strip now stretches
to fill the row 3 cell area naturally (no align-self / no
aspect mismatch with the rest of the row). Aspect 3:2
matches the 2-col-wide / 1-row-tall rectangle of cells at
standard tile aspect 3:4 — i.e., the strip is the same
height as the row 3 portrait tiles next to it
(album-24 and album-29), keeping the row visually level. */
.album-tile-eyes {
grid-column: 1 / span 2;
grid-row: 3 / 4;
aspect-ratio: 3 / 2;
}
/* V43 — `object-position` for the album-11 close-up. The
source is a tall portrait of the eyes/upper-face with
hair across; biasing slightly above centre keeps the eyes
prominent inside the wider 3:2 banner aspect. */
.album-tile-eyes img {
object-position: center 30%;
}
/* V43 — per-image crops for the two new tiles that landed in
row 3 cols 3-4. album-24 has Rukhsar's face on the upper-
right of the source frame, so we shift the cover crop a
touch right + up. album-29's face sits near the top so we
bias upward; horizontal center is fine. */
.album-tile-24 img {
object-position: 60% 30%;
}
.album-tile-29 img {
object-position: center 25%;
}
}
/* Center the "View full album" CTA below the grid */
.album-actions {
display: flex;
justify-content: center;
margin: 4px 0 18px;
}
.album-view-all {
/* inherits .btn .btn-gold styling */
letter-spacing: 0.18em;
}
/* ---------- 14. PRESS / MEDIA ---------- */
.section-press { background: var(--color-bg); }
.press-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.press-card {
position: relative;
padding: 26px 22px 22px;
border: 1px solid rgba(201, 163, 90, 0.22);
background: rgba(255, 255, 255, 0.02);
transition: all 0.4s var(--ease);
display: flex;
flex-direction: column;
}
.press-card:hover {
border-color: var(--color-gold);
background: rgba(201, 163, 90, 0.05);
transform: translateY(-3px);
}
.press-num {
font-family: var(--font-serif);
font-size: 0.88rem;
letter-spacing: 0.3em;
color: var(--color-gold);
margin-bottom: 16px;
text-transform: uppercase;
}
.press-card h3 {
font-size: 1.35rem;
margin: 0 0 10px;
color: var(--color-cream);
}
.press-card p {
font-size: 0.94rem;
color: rgba(244, 236, 221, 0.72);
margin: 0 0 18px;
line-height: 1.6;
}
.press-tag {
margin-top: auto;
display: inline-block;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-muted);
border-top: 1px solid rgba(201, 163, 90, 0.18);
padding-top: 14px;
}
.press-card-cta {
background: linear-gradient(180deg, rgba(201,163,90,0.10), rgba(106,31,42,0.18));
border-color: var(--color-gold);
}
.press-link {
margin-top: auto;
display: inline-block;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-gold);
border-top: 1px solid rgba(201, 163, 90, 0.4);
padding-top: 14px;
}
.press-link:hover { color: var(--color-gold-2); }
/* ---------- 15. CONTACT / BOOKING ---------- */
.section-contact {
background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-2) 100%);
}
.contact-grid { gap: 36px; align-items: start; }
.contact-text p {
color: var(--color-text-soft);
font-size: 1rem;
}
.contact-list {
margin-top: 28px;
border-top: 1px solid var(--color-line);
}
.contact-list li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 0;
border-bottom: 1px solid var(--color-line);
}
.contact-list span {
font-size: 0.7rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--color-muted);
}
.contact-list strong {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--color-text);
font-weight: 500;
}
.contact-list strong a {
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-line);
padding-bottom: 1px;
transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-list strong a:hover {
color: var(--color-gold-deep);
border-bottom-color: var(--color-gold);
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
background: #fff;
padding: 24px;
border: 1px solid var(--color-line);
box-shadow: var(--shadow-1);
position: relative;
}
.contact-form::before {
content: "";
position: absolute;
inset: -1px;
border: 1px solid transparent;
pointer-events: none;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label {
font-size: 0.7rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--color-muted);
}
.field input,
.field select,
.field textarea {
font-family: var(--font-sans);
font-size: 0.98rem;
padding: 12px 14px;
border: 1px solid var(--color-line);
background: #faf3e3;
color: var(--color-text);
border-radius: var(--radius);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-muted); opacity: 0.7; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--color-gold);
background: #fff;
}
.field textarea { resize: vertical; min-height: 110px; }
.form-note {
margin: 0;
font-size: 0.9rem;
color: var(--color-gold-deep);
text-align: center;
grid-column: 1 / -1;
}
@media (max-width: 600px) {
.contact-form { grid-template-columns: 1fr; padding: 22px; }
}
/* ---------- 16. FOOTER ---------- */
.site-footer {
background: #07060a;
color: rgba(244, 236, 221, 0.72);
padding: 56px 0 0;
border-top: 1px solid rgba(201, 163, 90, 0.18);
}
.footer-inner {
display: grid;
gap: 32px;
grid-template-columns: 1fr;
padding-bottom: 40px;
}
@media (min-width: 760px) {
.footer-inner { grid-template-columns: 1fr 2fr 1fr; align-items: center; }
}
.footer-brand .brand-mark { margin-bottom: 10px; }
.footer-brand .brand-name { display: block; color: var(--color-cream); margin-top: 6px; }
.footer-tag {
font-family: var(--font-serif);
font-style: italic;
letter-spacing: 0.14em;
color: var(--color-gold);
margin: 6px 0 0;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 16px 26px;
justify-content: center;
}
.footer-nav a {
font-size: 0.74rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.footer-nav a:hover { color: var(--color-gold); }
.footer-social {
display: flex;
gap: 22px;
justify-content: flex-end;
}
@media (max-width: 759px) {
.footer-social { justify-content: center; }
}
.footer-social a {
font-size: 0.74rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-cream);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
}
.footer-social a:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.06);
padding: 20px 24px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-muted);
max-width: var(--container);
margin: 0 auto;
}
/* ---------- 17. Reveal-on-scroll ---------- */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- 18. Image fallback rules ----------
The site is designed to look intentional whether real photos
exist or not.
How it works:
- Each image area uses a CSS background-image with a graceful
gradient fallback baked in. If the image file is missing,
the gradient quietly takes over.
- For the Featured Credits cards, an italic gold "poster label"
sits over the placeholder gradient so empty cards still read
as designed editorial slots, not broken images.
- When a real poster IS supplied, JavaScript probes the URL.
On successful load, it adds the class `.has-image` to that
card's poster element so the placeholder label fades out and
only the real image is visible.
Result:
- All images present → clean cinematic posters, no labels.
- Some images present → loaded ones show real artwork; the
rest show elegant placeholders.
- No images at all → entire site still looks intentional.
---------------------------------------------------------------- */
/* Fade out the italic placeholder label once the real poster loads. */
.credit-poster.has-image .poster-label {
opacity: 0;
visibility: hidden;
transition: opacity 0.45s ease, visibility 0.45s ease;
}
/* Slight tonal lift on the about portrait once the real photo loads,
so the gold inner border reads against a real image instead of the
dark gradient placeholder. */
.about-image .image-frame.has-image::before {
border-color: rgba(244, 236, 221, 0.35);
}
/* Once the real hero portrait has loaded, the grain is already at
a low base opacity (0.12) so it never muddies the photograph.
This rule is kept as a guard in case the base grain opacity is
raised in future. */
.hero-image.has-image ~ .hero-grain { opacity: 0.12; }
/* Pre-load shimmer for empty film-card poster blocks — keeps them
feeling like cinema posters rather than empty boxes. */
.film-poster:not(.has-image)::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(115deg,
rgba(201, 163, 90, 0.00) 30%,
rgba(201, 163, 90, 0.06) 50%,
rgba(201, 163, 90, 0.00) 70%);
pointer-events: none;
z-index: 1;
}
/* ---------- V13 — Mobile compact cards ----------
Force a 2-column grid for Selected Work and Cinema & Streaming
on small phones, with smaller meta padding and type. Keeps the
poster from dominating the screen. */
@media (max-width: 600px) {
.credit-grid,
.film-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px;
}
.credit-meta,
.film-meta {
padding: 10px 12px 14px;
}
.credit-meta h3,
.film-meta h3 {
font-size: 0.95rem;
line-height: 1.2;
}
.credit-tag,
.film-tag {
font-size: 0.56rem;
letter-spacing: 0.26em;
padding: 2px 6px;
margin-bottom: 5px;
}
.credit-year,
.film-meta p {
font-size: 0.7rem;
}
.poster-label {
font-size: 0.95rem;
padding: 0 10px;
}
}
/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.hero-marquee-track { animation: none !important; }
}
/* ================================================================
20. Gallery lightbox (V9)
----------------------------------------------------------------
In-page modal that opens when a gallery tile is clicked. Hidden
by default. JS toggles `.is-open` and locks body scroll.
No external libraries.
================================================================ */
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(8, 6, 5, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.lightbox.is-open { display: flex; }
.lightbox-figure {
margin: 0;
max-width: min(900px, 100%);
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
animation: lbFadeIn 0.35s var(--ease) both;
}
.lightbox-img {
display: block;
max-width: 100%;
max-height: 80vh;
width: auto;
height: auto;
object-fit: contain;
border: 1px solid rgba(201, 163, 90, 0.35);
background: #08060a;
}
.lightbox-caption {
margin-top: 14px;
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
color: var(--color-gold);
letter-spacing: 0.06em;
text-align: center;
}
.lightbox-close {
position: absolute;
top: 18px;
right: 22px;
width: 44px; height: 44px;
background: transparent;
border: 1px solid rgba(244, 236, 221, 0.4);
color: var(--color-cream);
font-family: var(--font-sans);
font-size: 1.5rem;
font-weight: 300;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.lightbox-close:hover {
border-color: var(--color-gold);
color: var(--color-gold);
background: rgba(201, 163, 90, 0.06);
transform: scale(1.05);
}
@keyframes lbFadeIn {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
@media (max-width: 600px) {
.lightbox { padding: 12px; }
.lightbox-img { max-height: 72vh; }
.lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
.lightbox-caption { font-size: 0.9rem; }
}
/* V14 — prev / next / counter for multi-image gallery navigation */
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px; height: 48px;
background: transparent;
border: 1px solid rgba(244, 236, 221, 0.4);
color: var(--color-cream);
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 300;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
z-index: 1;
}
.lightbox-prev { left: 22px; padding-right: 4px; }
.lightbox-next { right: 22px; padding-left: 4px; }
.lightbox-prev:hover,
.lightbox-next:hover {
border-color: var(--color-gold);
color: var(--color-gold);
background: rgba(201, 163, 90, 0.06);
transform: translateY(-50%) scale(1.05);
}
.lightbox-counter {
display: block;
margin-top: 8px;
font-family: var(--font-sans);
font-size: 0.66rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(244, 236, 221, 0.6);
text-align: center;
}
@media (max-width: 600px) {
.lightbox-prev, .lightbox-next {
width: 40px; height: 40px;
font-size: 1.5rem;
}
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-counter { font-size: 0.6rem; }
}
/* V14 — Floating back-to-top button -------------------------------
Fixed bottom-right. Appears after the user has scrolled. Smooth-
scrolls to the top on click. Sits below the header (z 100) and
the lightbox (z 200) so it never interferes with either. */
/* V15 — back-to-top sized down a touch, with a slightly more
restrained opacity, so it reads as a discreet utility rather
than a primary control. Still tappable (44 × 44 minimum on
mobile per the Apple HIG). */
.back-to-top {
position: fixed;
bottom: 16px;
right: 16px;
width: 44px;
height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(12, 10, 8, 0.85);
border: 1px solid rgba(201, 163, 90, 0.7);
color: var(--color-gold);
border-radius: 50%;
font-family: var(--font-sans);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease),
transform 0.3s var(--ease), background 0.25s var(--ease),
color 0.25s var(--ease), border-color 0.25s var(--ease);
z-index: 95;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--color-gold);
color: var(--color-bg);
border-color: var(--color-gold);
}
.back-to-top .bt-arrow {
font-size: 1rem;
line-height: 1;
}
.back-to-top .bt-text {
font-size: 0.46rem;
letter-spacing: 0.26em;
text-transform: uppercase;
margin-top: 1px;
}
@media (min-width: 600px) {
.back-to-top {
bottom: 20px;
right: 20px;
width: 46px;
height: 46px;
}
.back-to-top .bt-arrow { font-size: 1.1rem; }
.back-to-top .bt-text { font-size: 0.5rem; }
}
/* ================================================================
21. Brand Films & Commercials (V11)
----------------------------------------------------------------
Local commercial / short-film video cards.
- Each card uses native