/* ─────────────────────────────────────────────────────────────────── shouryashri.art — site.css Design tokens from Phase 4 of the discovery cycle. Type: Fraunces (display) + Inter (body) ─────────────────────────────────────────────────────────────────── */ :root { /* ── Rose palette (unified) ──────────────────────────── Single dark theme across the whole site: black ground, near-white text, rose accent. No light theme — every page is dark + pink. */ --bg: #0B0A0B; /* page background — near-black */ --fg: #F5EFF0; /* foreground text — near-white */ --accent: #D6336B; /* deep magenta-rose — CTAs / hover */ --metal: #EC6E9C; /* ROSE — eyebrows, rules, accents (was gold) */ --teal: #3A5050; /* secondary muted teal — sparing accents */ --muted: rgba(245,239,240,0.62); /* secondary text */ --rule: rgba(245,239,240,0.16); /* hairlines & dividers */ --soft: rgba(245,239,240,0.05); /* faint surfaces (card hover, form fields) */ --shadow: rgba(0,0,0,0.55); /* image-label shadow, gradient overlays */ --rose-soft: rgba(236,110,156,0.10); /* soft rose glow */ /* Legacy aliases — resolved here so all pages share the dark ground. */ --paper: var(--bg); --ink: var(--fg); /* Type families */ --font-display: "Fraunces", "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Type scale (rem) */ --t-h1: 4rem; --t-h2: 2.75rem; --t-h3: 1.75rem; --t-body: 1.0625rem; --t-small: 0.875rem; --t-eyebrow: 0.75rem; /* Layout */ --max-width: 1280px; --gutter: 1.5rem; --page-pad-x: 2rem; --page-pad-md: 4rem; --page-pad-lg: 6rem; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 200ms; } /* Paper theme — applied as on reading pages (case studies, archive, about, engagements). Same palette identity, inverted ground for legibility on long-form text. */ .theme-paper { --bg: #F4EFE7; /* warm cream — page background */ --fg: #1A1714; /* deep ink — text */ /* Re-resolve the legacy aliases at this scope, else body (which uses var(--paper)/var(--ink)) keeps the dark values computed at :root. */ --paper: var(--bg); --ink: var(--fg); --accent: #8A2E48; /* same madder, sits beautifully on paper too */ --metal: #A6852A; /* darker gold for legibility on paper */ --teal: #2C4040; /* slightly deeper teal */ --muted: #7A736B; --rule: #D9D1C2; --soft: rgba(26,23,20,0.04); --shadow: rgba(0,0,0,0.18); } /* ── Reset ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; } ul, ol { list-style: none; margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } /* ── Base ──────────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; color: var(--ink); background: var(--paper); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; margin: 0; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.01em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 1rem; } em, .em-display { font-family: var(--font-display); font-style: italic; } a:not(.btn):not(.site-header__logo):not(.project-card):not(.hero-grid__cell):not(.pcard) { color: var(--metal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } a:not(.btn):not(.site-header__logo):not(.project-card):not(.hero-grid__cell):not(.pcard):hover { opacity: 1; color: var(--accent); } /* ── Layout primitives ─────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); } @media (min-width: 768px) { .container { padding-left: var(--page-pad-md); padding-right: var(--page-pad-md); } } @media (min-width: 1200px) { .container { padding-left: var(--page-pad-lg); padding-right: var(--page-pad-lg); } } .section { padding: 6rem 0; } .section--lg { padding: 8rem 0; } .section--sm { padding: 3.5rem 0; } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.4rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; border-radius: 999px; border: 1px solid transparent; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: var(--accent); } .btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--secondary:hover { background: var(--ink); color: var(--paper); } .btn--small { padding: 0.55rem 1rem; font-size: 0.875rem; } /* ── Availability bar ──────────────────────────────────────────────── */ .availability-bar { background: transparent; color: var(--metal); text-align: center; padding: 0.55rem 1rem; font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 400; border-bottom: 1px solid var(--rule); } /* ── Header / Nav ──────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); transition: background var(--t-fast) var(--ease), opacity 500ms var(--ease), transform 500ms var(--ease); } /* On the home page, float the nav over the hero (out of normal flow), then morph it on scroll past the atmospheric hero. */ .page-home .site-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; } .page-home.is-scrolled .site-header { background: rgba(10,10,10,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--rule); } .page-home .availability-bar { display: none; } /* Surface the booking line inline within the hero on home instead */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem; } .site-header__logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .site-nav ul { display: flex; gap: 2rem; } .site-nav a { font-size: 0.9375rem; color: var(--ink); padding: 0.4rem 0; border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); } .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--ink); } .site-header__menu { display: none; flex-direction: column; gap: 4px; width: 30px; height: 24px; align-items: center; justify-content: center; position: relative; z-index: 60; } .site-header__menu span { width: 22px; height: 1.5px; background: var(--ink); transform-origin: center; transition: transform 220ms var(--ease), opacity 180ms var(--ease); } /* Hamburger morphs to an X when the menu is open */ .site-header__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .site-header__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-header__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* Mobile nav CTA lives inside the menu overlay; hidden on desktop */ .site-nav__cta { display: none; } @media (max-width: 880px) { .site-header__cta { display: none; } .site-header__menu { display: flex; } /* Full-screen overlay drawer */ .site-nav { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5.5rem 1.5rem 2.5rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms; } .site-nav.is-open { opacity: 1; visibility: visible; transform: none; } .site-nav ul { flex-direction: column; gap: 0; width: 100%; max-width: 340px; } .site-nav li { border-bottom: 1px solid var(--rule); } .site-nav li:first-child { border-top: 1px solid var(--rule); } .site-nav a { display: block; text-align: center; padding: 1.15rem 0; font-family: var(--font-display); font-size: 1.6rem; border-bottom: 0; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--metal); border-bottom: 0; } .site-nav__cta { display: inline-flex; margin-top: 2.25rem; } /* Solidify the (otherwise transparent) home header while the menu is open */ .is-menu-open.page-home .site-header { background: var(--bg); } body.is-menu-open { overflow: hidden; } } /* ── Hero ──────────────────────────────────────────────────────────── */ .hero { padding: 3rem 0 2rem; } .hero__text { max-width: 900px; } .hero__eyebrow { margin-bottom: 1.25rem; } .hero__title { font-size: clamp(2.5rem, 5.5vw, var(--t-h1)); max-width: 18ch; } /* Extra-large headline for the photo-led hero — three-word style */ .hero__title--xl { font-size: clamp(2.75rem, 7.5vw, 6.5rem); line-height: 1; letter-spacing: -0.025em; max-width: 20ch; } .hero__subtitle { margin-top: 1.25rem; max-width: 56ch; font-size: 1.25rem; color: var(--muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .hero__media { margin-top: 4rem; aspect-ratio: 16 / 9; background: var(--rule); overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__view-all { margin-top: 1.25rem; text-align: right; font-size: var(--t-small); color: var(--muted); } /* ── Hero bento grid (photo-heavy landing) ─────────────────────── */ .hero-grid { margin-top: 3rem; display: grid; gap: 0.65rem; /* Mobile: simple 2×2 */ grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; } .hero-grid__cell { position: relative; overflow: hidden; background: var(--rule); display: block; isolation: isolate; } .hero-grid__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease), filter 300ms var(--ease); } .hero-grid__cell:hover img { transform: scale(1.035); filter: brightness(0.92); } .hero-grid__label { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; color: var(--paper); display: flex; flex-direction: column; gap: 0.15rem; z-index: 2; text-shadow: 0 1px 12px rgba(0,0,0,0.55); } .hero-grid__discipline { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.85; } .hero-grid__project { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; } /* Subtle gradient overlay at the bottom so label is always legible */ .hero-grid__cell::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 1; } @media (min-width: 880px) { .hero-grid { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 1.05fr 1fr; grid-auto-rows: unset; height: min(72vh, 720px); gap: 0.65rem; } .hero-grid__cell--feature { grid-column: 1; grid-row: 1 / span 2; } .hero-grid__cell--wide { grid-column: 2 / span 2; grid-row: 1; } .hero-grid__project { font-size: 1.5rem; } } /* ── Project cards / Work index ────────────────────────────────────── */ /* Arch gallery grid */ .work-grid { display: grid; grid-template-columns: 1fr; gap: 3.25rem 2rem; } @media (min-width: 620px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .work-grid { grid-template-columns: repeat(3, 1fr); gap: 3.5rem 2.5rem; } } .project-card { display: block; transition: transform 300ms var(--ease); } .project-card:hover { transform: translateY(-5px); } .project-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--rule); overflow: hidden; margin: 0 0 1.25rem; } .project-card__media img { width: 100%; height: 100%; object-fit: cover; } .project-card__badge { position: absolute; bottom: 1rem; left: 1rem; background: var(--paper); padding: 0.4rem 0.75rem; font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; } .project-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin: 0 0 0.4rem; } .project-card__tagline { color: var(--muted); margin: 0 0 0.75rem; font-size: 0.9375rem; } .project-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.25rem 0.6rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); } .tag--year { color: var(--ink); } /* ── Work filter bar ───────────────────────────────────────────────── */ .work-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .work-filters button { padding: 0.45rem 1rem; font-size: 0.875rem; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; transition: all var(--t-fast) var(--ease); } .work-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ── Case study ────────────────────────────────────────────────────── */ .cs-header { padding: 4rem 0 2rem; } .cs-header__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; padding-top: 2rem; margin-top: 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9375rem; } .cs-header__meta strong { color: var(--ink); font-weight: 500; } .cs-hero { aspect-ratio: 16 / 9; background: var(--rule); margin-bottom: 4rem; overflow: hidden; } .cs-hero img { width: 100%; height: 100%; object-fit: cover; } .cs-body { max-width: 64ch; margin: 0 auto; } .cs-body h2 { font-size: 2rem; margin: 4rem 0 1.25rem; } .cs-body p, .cs-body ul { font-size: 1.0625rem; line-height: 1.7; } .cs-body ul { padding-left: 1.25rem; list-style: disc; margin-bottom: 1.5rem; } .cs-figure { margin: 3rem 0; } .cs-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rule); display: block; } .cs-figure figcaption { font-size: var(--t-small); color: var(--muted); margin-top: 0.6rem; text-align: center; } /* Hero / figure variants for transparent character art (no crop, no fill) */ .cs-hero--contain { background: transparent; } .cs-hero--contain img { object-fit: contain; } .cs-figure--contain { text-align: center; } .cs-figure--contain img { aspect-ratio: auto; width: auto; max-width: 100%; max-height: 460px; margin: 0 auto; object-fit: contain; background: transparent; } .cs-figure--row { display: flex; gap: 1.5rem; justify-content: center; align-items: flex-end; flex-wrap: wrap; } .cs-figure--row img { aspect-ratio: auto; width: auto; max-width: 47%; max-height: 360px; object-fit: contain; background: transparent; } /* ── Engagements page ──────────────────────────────────────────────── */ .engagement-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; } @media (min-width: 880px) { .engagement-grid { grid-template-columns: repeat(3, 1fr); } } .engagement { border: 1px solid var(--rule); padding: 2rem; background: var(--soft); } .engagement h3 { margin-bottom: 0.4rem; } .engagement__from { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); margin: 1.5rem 0 0; } .engagement ul { list-style: none; padding: 1.25rem 0 0; border-top: 1px solid var(--rule); margin-top: 1.25rem; } .engagement ul li { padding: 0.4rem 0; color: var(--muted); font-size: 0.9375rem; } /* ── Forms ─────────────────────────────────────────────────────────── */ .form { display: grid; gap: 1.25rem; max-width: 560px; } .form label { display: block; font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.4rem; } .form input, .form select, .form textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--rule); background: var(--paper); font: inherit; color: var(--ink); border-radius: 6px; transition: border-color var(--t-fast) var(--ease); } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); } .form textarea { min-height: 140px; resize: vertical; } .form .hp { position: absolute; left: -9999px; } /* ── Footer ───────────────────────────────────────────────────────── Continuous with body theme. Same bg/fg, hairline rule on top. Works for both dark default and .theme-paper. */ .site-footer { background: var(--bg); color: var(--fg); padding: 6rem 0 3rem; margin-top: 6rem; border-top: 1px solid var(--rule); } .site-footer .eyebrow { color: var(--muted); } .site-footer__lede { max-width: 720px; } .site-footer__lede h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); margin-bottom: 1.25rem; color: var(--fg); } .site-footer__lede h2 em { color: var(--metal); font-style: italic; } .site-footer__lede p { color: var(--muted); margin-bottom: 2rem; } .site-footer__actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* Primary CTA: filled — uses fg as background, bg as text (auto-inverts per theme) */ .site-footer__actions .btn--primary { background: var(--fg); color: var(--bg); border-color: var(--fg); } .site-footer__actions .btn--primary:hover { background: var(--accent); color: var(--fg); border-color: var(--accent); } .site-footer__actions .btn--secondary { border-color: var(--rule); color: var(--fg); } .site-footer__actions .btn--secondary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--rule); } @media (min-width: 720px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } } .site-footer__links a { color: var(--muted); } .site-footer__links a:hover { color: var(--metal); opacity: 1; } .site-footer__links li { padding: 0.2rem 0; } .site-footer__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--muted); } /* ════════════════════════════════════════════════════════════════════ MANDAP — atmospheric hero, custom cursor, nav-fade ════════════════════════════════════════════════════════════════════ */ /* ── Mandap atmospheric hero (full-bleed, dark, centred) ──────────── */ .hero--mandap { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 4rem 2rem 3rem; margin-top: -1px; /* eat the sticky header border on home */ } .hero--mandap .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero--mandap .hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; filter: saturate(0.9); transform: scale(1); animation: mandap-slowzoom 22s ease-in-out infinite alternate; } @keyframes mandap-slowzoom { to { transform: scale(1.08); } } .hero--mandap .hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.9) 100%); } .hero--mandap .hero__content { position: relative; z-index: 1; text-align: center; max-width: 940px; } .hero--mandap .hero__eyebrow { font-family: var(--font-body); font-weight: 400; font-size: var(--t-eyebrow); letter-spacing: 0.3em; text-transform: uppercase; color: var(--metal); margin-bottom: 2.5rem; } .hero--mandap .hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--fg); max-width: none; } .hero--mandap .hero__title em, .hero--mandap .hero__title .em-display { font-style: italic; color: var(--metal); font-weight: 400; } .hero--mandap .hero__rule { width: 60px; height: 1px; background: var(--metal); margin: 2.5rem auto; border: 0; } .hero--mandap .hero__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--fg); opacity: 0.85; max-width: 56ch; margin: 0 auto; } .hero--mandap .hero__actions { margin-top: 3.25rem; justify-content: center; } .hero--mandap .btn--primary, .hero--mandap .btn--secondary { padding: 0.95rem 1.75rem; border-radius: 0; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8125rem; } .hero--mandap .btn--primary { background: transparent; color: var(--metal); border: 1px solid var(--metal); } .hero--mandap .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--fg); } .hero--mandap .btn--secondary { background: transparent; color: var(--fg); border: 1px solid var(--rule); } .hero--mandap .btn--secondary:hover { border-color: var(--fg); } .hero--mandap .hero__scroll { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); font-size: var(--t-eyebrow); letter-spacing: 0.25em; text-transform: uppercase; color: var(--fg); opacity: 0.5; z-index: 1; } .hero--mandap .hero__scroll::before { content: "↓"; display: block; margin-bottom: 0.4rem; font-size: 1rem; } /* ── Dark-theme project cards (Work index, Selected work on home) ─── */ .project-card__title { color: var(--fg); } .project-card__tagline { color: var(--muted); } /* Dark-theme work-grid card on dark background */ :root:not(.theme-paper) .project-card__media, body:not(.theme-paper) .project-card__media { border: 1px solid var(--rule); } /* ── Custom gold cursor (desktop only) ────────────────────────────── */ .mandap-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--metal); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 200ms var(--ease), height 200ms var(--ease), background 200ms var(--ease); mix-blend-mode: difference; opacity: 0; } .mandap-cursor.is-active { opacity: 1; } .mandap-cursor.is-hover { width: 40px; height: 40px; background: rgba(201,162,74,0.35); } @media (hover: none), (max-width: 768px) { .mandap-cursor { display: none !important; } } body.cursor-enabled, body.cursor-enabled * { cursor: none; } body.cursor-enabled a, body.cursor-enabled button, body.cursor-enabled input, body.cursor-enabled textarea, body.cursor-enabled select { cursor: none; } /* ── Eyebrows pick up gold on dark, muted on paper ─────────────────── */ .eyebrow { color: var(--muted); } .hero--mandap .eyebrow, :root:not(.theme-paper) .eyebrow, body:not(.theme-paper) .eyebrow { color: var(--metal); } body.theme-paper .eyebrow { color: var(--muted); letter-spacing: 0.14em; } /* ── Headlines: italic display words pick up metal in both themes ── */ h1 em, h2 em, h3 em, h1 .em-display, h2 .em-display, h3 .em-display { color: var(--metal); font-style: italic; } /* ── Section rules subtler on dark, structural on paper ───────────── */ .rule { background: var(--rule); } /* ── Forms on dark theme ──────────────────────────────────────────── */ body:not(.theme-paper) .form input, body:not(.theme-paper) .form select, body:not(.theme-paper) .form textarea { background: var(--soft); color: var(--fg); border-color: var(--rule); } body:not(.theme-paper) .form input::placeholder, body:not(.theme-paper) .form textarea::placeholder { color: var(--muted); } /* ── Mandap “Selected work” 3-up cards (used on home) ─────────────── */ .pgrid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 3rem; } @media (min-width: 720px) { .pgrid { grid-template-columns: repeat(3, 1fr); } } .pcard { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--rule); text-decoration: none; display: block; } .pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), filter 300ms var(--ease); } .pcard:hover img { transform: scale(1.05); filter: brightness(0.92); } .pcard__wipe { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.85) 100%); pointer-events: none; } .pcard__label { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; color: var(--fg); z-index: 2; } .pcard__label .disc { font-size: var(--t-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--metal); margin-bottom: 0.5rem; display: block; } .pcard__label .proj { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; } body.theme-paper .pcard__wipe { background: linear-gradient(180deg, transparent 40%, rgba(26,23,20,0.85) 100%); } /* ── “Worked with” strip — gold dingbat between names on dark ─────── */ .worked-with { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; align-items: center; padding-top: 1.5rem; list-style: none; } .worked-with li { color: var(--muted); font-size: 0.9375rem; letter-spacing: 0.04em; } .worked-with li:not(:last-child)::after { content: "·"; color: var(--metal); margin-left: 2.5rem; opacity: 0.7; } @media (max-width: 720px) { .worked-with li:not(:last-child)::after { display: none; } } /* ── Testimonial block ────────────────────────────────────────────── */ .testimonial blockquote { color: var(--fg); } .testimonial blockquote::before, .testimonial blockquote::after { color: var(--metal); font-family: var(--font-display); } .testimonial__quote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.35; font-style: italic; margin: 1.5rem 0 2rem; color: var(--fg); } .testimonial__cite { color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; } /* ════════════════════════════════════════════════════════════════════ HOME v4 — illustrative-designer landing · ROSE theme + art direction To revert to the gold scheme, change --metal / --accent below back to #C9A24A / #8A2E48 (or delete this .page-home palette block entirely). ════════════════════════════════════════════════════════════════════ */ /* Premium film-grain overlay (very subtle) — applied site-wide */ body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Shared display heading + lede ────────────────────────────────── */ .display-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.18; letter-spacing: -0.01em; margin: 1rem 0 1.5rem; } .display-h2--lg { font-size: clamp(1.9rem, 4.4vw, 3.25rem); line-height: 1.1; } .lede { font-size: 1.0625rem; color: var(--muted); line-height: 1.75; max-width: 62ch; margin: 0 auto; } .lede--left { margin: 0; max-width: 46ch; color: var(--fg); opacity: 0.9; } /* Two-line hero break only on wider screens + rose glow behind hero */ .hero--mandap .hero__title br { display: none; } @media (min-width: 720px) { .hero--mandap .hero__title br { display: inline; } } .hero--mandap::before { content: ""; position: absolute; z-index: 0; width: 70vw; max-width: 760px; aspect-ratio: 1; left: 50%; top: 46%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--rose-soft), transparent 62%); pointer-events: none; } /* ── Decorative primitives ────────────────────────────────────────── */ .svg-defs { position: absolute; } .deco-dots { position: absolute; width: 180px; height: 180px; background-image: radial-gradient(var(--metal) 1.1px, transparent 1.3px); background-size: 17px 17px; opacity: 0.16; pointer-events: none; z-index: 0; } .deco-dots--tr { top: 2.5rem; right: 2.5rem; } @media (max-width: 760px) { .deco-dots { display: none; } } .deco-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, var(--rose-soft), transparent 60%); pointer-events: none; } /* Hand-drawn squiggle divider */ .divider { display: flex; justify-content: center; padding: 1.5rem var(--page-pad-x); } .squiggle { width: min(190px, 44vw); height: 14px; color: var(--metal); opacity: 0.7; } /* ── Positioning — asymmetric editorial split ─────────────────────── */ .intro { position: relative; overflow: hidden; } .intro__grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; position: relative; z-index: 1; } @media (min-width: 880px) { .intro__grid { grid-template-columns: 1.15fr 0.85fr; gap: 5rem; align-items: start; } } .intro__head .display-h2 { margin-top: 0.5rem; } .intro__body { padding-top: 0.5rem; } .meta-list { margin-top: 2rem; border-top: 1px solid var(--rule); } .meta-list li { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; color: var(--muted); line-height: 1.5; } .meta-list__k { display: inline-block; min-width: 96px; color: var(--metal); font-size: var(--t-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; } /* ── Signature work header ────────────────────────────────────────── */ .sigwork-head { padding-bottom: 0; } .sigwork-head .display-h2 { margin-bottom: 0; } /* ── Feature blocks (flagship case studies) ───────────────────────── */ .feature { padding: 3.5rem 0; } .feature__inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 900px) { .feature__inner { grid-template-columns: 1fr 1fr; gap: 5rem; } .feature--reverse .feature__media { order: 2; } } /* Arch-framed media — temple-niche silhouette (brand-specific motif) */ .feature__media { position: relative; display: block; aspect-ratio: 4 / 5; } .feature__media--arch { overflow: visible; background: transparent; border: 0; } .feature__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; clip-path: url(#arch); transition: transform 800ms var(--ease); } .feature__media--arch:hover .feature__img { transform: scale(1.03); } /* Offset rose echo of the arch, peeking lower-right */ .arch-shadow { position: absolute; inset: 0; z-index: 0; transform: translate(16px, 18px); background: var(--metal); opacity: 0.22; clip-path: url(#arch); } /* Small line-art process inset, lower-left */ .feature__media-inset { position: absolute; z-index: 2; left: -0.5rem; bottom: 1.25rem; width: 30%; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid var(--bg); outline: 1px solid var(--metal); box-shadow: 0 10px 28px var(--shadow); background: var(--bg); } /* In-production placeholder (Shouryakriti, until art lands) */ .feature__media--inprod { display: flex; align-items: center; justify-content: center; text-align: center; } .feature__media--inprod .inprod { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: url(#arch); background: radial-gradient(ellipse at 50% 38%, var(--rose-soft), transparent 70%), var(--soft); border: 0; } .inprod__mark { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 6rem); color: var(--metal); line-height: 1; opacity: 0.9; } .inprod__label { margin-top: 1rem; font-size: var(--t-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .feature__index { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.18em; color: var(--metal); margin-bottom: 1.25rem; } .feature__index::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--metal); vertical-align: middle; margin-right: 0.75rem; } .feature__disc { font-size: var(--t-eyebrow); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } .feature__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.08; margin-bottom: 1.25rem; } .feature__desc { color: var(--muted); line-height: 1.7; max-width: 46ch; } .feature__desc em { color: var(--fg); font-style: italic; font-family: var(--font-display); } .feature__cta { margin-top: 1.75rem; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; } .feature__cta--muted { color: var(--muted); } /* ── The full range — light editorial band ────────────────────────── */ .band-paper { --bg: #F5EFE9; --fg: #1C1A17; --muted: #6E665C; --rule: #E2D8C9; --soft: rgba(0,0,0,0.03); --shadow:rgba(0,0,0,0.16); background: var(--bg); color: var(--fg); } .full-range__head { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 880px) { .full-range__head { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: end; } } .full-range__intro { color: var(--muted); line-height: 1.7; font-size: 0.9375rem; } .umbrellas { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (min-width: 640px) { .umbrellas { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .umbrellas { grid-template-columns: repeat(4, 1fr); } } .umbrella { background: var(--bg); padding: 2.25rem 1.75rem 2.5rem; transition: background var(--t-fast) var(--ease); } .umbrella:hover { background: #FBF7F1; } .umbrella--lead { background: var(--rose-soft); box-shadow: inset 0 3px 0 var(--metal); } .umbrella__no { font-family: var(--font-display); font-size: 1.75rem; color: var(--metal); line-height: 1; display: block; margin-bottom: 1.5rem; } .umbrella__title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; margin-bottom: 0.75rem; } .umbrella__desc { font-size: 0.9375rem; color: var(--muted); line-height: 1.55; } .full-range__cta { text-align: right; margin-top: 2.5rem; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; } /* ── How I work — numbered pillars ────────────────────────────────── */ .approach .eyebrow { text-align: center; } .pillars { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3rem; } @media (min-width: 800px) { .pillars { grid-template-columns: repeat(3, 1fr); } } .pillar { padding-top: 1.5rem; border-top: 1px solid var(--rule); position: relative; } .pillar__no { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--metal); opacity: 0.85; display: block; margin-bottom: 1rem; } .pillar__title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin-bottom: 0.9rem; } .pillar__desc { color: var(--muted); line-height: 1.65; font-size: 0.9375rem; } .pillar__desc em { color: var(--fg); font-style: italic; font-family: var(--font-display); } /* Testimonial relative for glow */ .testimonial { position: relative; overflow: hidden; } /* ════════════════════════════════════════════════════════════════════ MOBILE-FIRST polish — small-screen spacing, type & touch ════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Tighter vertical rhythm so sections don't feel cavernous on a phone */ .section { padding: 3.75rem 0; } .section--lg { padding: 4.5rem 0; } .section--sm { padding: 2.5rem 0; } .feature { padding: 2.5rem 0; } /* Hero: full-width stacked CTAs, easier thumb targets */ .hero--mandap { padding: 5rem 1.5rem 3.5rem; } .hero--mandap .hero__eyebrow { margin-bottom: 1.75rem; letter-spacing: 0.22em; } .hero__actions { flex-direction: column; width: 100%; max-width: 320px; margin-inline: auto; } .hero__actions .btn { width: 100%; justify-content: center; } /* Arch images: a touch shorter so the body copy isn't pushed far down */ .feature__media { aspect-ratio: 4 / 4.4; } .feature__media-inset { left: 0.5rem; width: 33%; } .arch-shadow { transform: translate(10px, 12px); } /* Editorial headings: rein in the largest display size */ .display-h2--lg { font-size: clamp(1.9rem, 8vw, 2.5rem); } /* Meta list: stack key above value so nothing truncates */ .meta-list__k { display: block; min-width: 0; margin-bottom: 0.2rem; } /* Full-range: left-align the trailing link on narrow screens */ .full-range__cta { text-align: left; } /* Comfortable tap targets in the footer */ .site-footer__links a { display: inline-block; padding: 0.35rem 0; } } /* Respect reduced-motion preferences (hero zoom, transitions) */ @media (prefers-reduced-motion: reduce) { .hero--mandap .hero__bg img { animation: none; } * { scroll-behavior: auto !important; } } /* ════════════════════════════════════════════════════════════════════ HERO — KRITI FLOATING CONSTELLATION (mobile-first) Base styles target small screens; min-width queries scale up. ════════════════════════════════════════════════════════════════════ */ .hero--orbit { justify-content: center; } .hero--orbit .hero__scroll { display: none; } .hero--orbit .hero__content { max-width: 23rem; } /* keep text in a central column the poses flank */ .hero--orbit .hero__sub { max-width: 30ch; } .hero--orbit .orbit-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Orbit items — outer handles cursor parallax (JS sets --tx/--ty), inner floats */ .orbit-item { position: absolute; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))); transition: transform 700ms var(--ease); will-change: transform; } .orbit-float { animation: orbit-float 12s ease-in-out infinite; } @keyframes orbit-float { 0% { transform: translate(0, 0); } 25% { transform: translate(5px, -7px); } 50% { transform: translate(0, -11px); } 75% { transform: translate(-5px, -6px); } 100% { transform: translate(0, 0); } } /* Kriti poses — tappable (mobile) / hoverable (desktop) */ .k-pose { pointer-events: auto; cursor: pointer; } .k-pose img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.5)); transition: filter 300ms var(--ease); } /* Playful reaction on hover (desktop) or tap (mobile) */ .k-pose:hover img, .k-pose.is-pop img { animation: kriti-wiggle 0.6s var(--ease); filter: drop-shadow(0 0 16px rgba(236,110,156,0.55)) drop-shadow(0 12px 30px rgba(0,0,0,0.5)); } @keyframes kriti-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-5deg) scale(1.08); } 55% { transform: rotate(4deg) scale(1.06); } 80% { transform: rotate(-2deg) scale(1.03); } } /* Sparkle dust */ .ico { width: 100%; height: 100%; display: block; color: var(--metal); } .m-sparkle1 .ico, .m-sparkle2 .ico, .m-sparkle3 .ico { color: var(--fg); opacity: 0.4; } /* ── MOBILE (base): four prominent poses banded into the top/bottom corners, clear of the centred text column ───────────────────────── */ .k-pose { width: 116px; } /* Standing poses are taller — narrow them so all four read at a similar height. Banded tight into the four corners and kept small so they clear the centred eyebrow + headline column on phones. */ .k-1 { left: 18%; top: 16%; } /* top-left (dhoop, seated) */ .k-2 { left: 82%; top: 16%; width: 92px; } /* top-right (incense, standing) */ .k-3 { left: 18%; top: 88%; } /* bottom-left (craft, seated) */ .k-4 { left: 82%; top: 88%; width: 92px; } /* bottom-right (confident, standing) */ .m-sparkle1 { left: 66%; top: 7%; width: 14px; } .m-sparkle2 { left: 26%; top: 50%; width: 12px; } .m-sparkle3 { display: none; } /* Staggered float so they don't pulse in unison */ .k-2 .orbit-float { animation-duration: 11s; } .k-3 .orbit-float { animation-duration: 8s; animation-delay: -2s; } .k-4 .orbit-float { animation-duration: 12s; animation-delay: -3s; } .m-sparkle1 .orbit-float { animation-duration: 6s; } .m-sparkle2 .orbit-float { animation-duration: 7s; animation-delay: -2s; } /* ── TABLET: bigger poses, pushed further out ─────────────────────── */ @media (min-width: 700px) { .hero--orbit .hero__content { max-width: 640px; } .k-pose { width: 150px; } .k-1 { left: 13%; top: 24%; } .k-2 { left: 87%; top: 21%; } .k-3 { left: 12%; top: 78%; } .k-4 { left: 88%; top: 80%; } .m-sparkle1 { left: 70%; top: 12%; width: 18px; } .m-sparkle2 { left: 28%; top: 64%; width: 14px; } .m-sparkle3 { left: 80%; top: 52%; width: 16px; } } /* ── DESKTOP: full-size poses framing a wide headline ─────────────── */ @media (min-width: 1100px) { .k-pose { width: 172px; } .k-1 { left: 12%; top: 26%; } .k-2 { left: 88%; top: 23%; } .k-3 { left: 13%; top: 76%; } .k-4 { left: 87%; top: 79%; } } /* Mobile: shrink the headline + text column so the banded poses don't crowd it */ @media (max-width: 699px) { .hero--orbit .hero__content { max-width: 21rem; } /* Tighter line-spacing frees vertical room for the larger poses */ .hero--orbit .hero__title { font-size: clamp(2rem, 8.2vw, 2.7rem); line-height: 1.02; } .hero--mandap .hero__eyebrow { margin-bottom: 1.1rem; } .hero--mandap .hero__rule { margin: 1.25rem auto; } .hero--mandap .hero__sub { line-height: 1.35; } .hero--mandap .hero__actions { margin-top: 1.7rem; } .m-sparkle3 { display: block; left: 80%; top: 62%; width: 12px; } /* Phone: make the scrolled home header solid black (no translucency) so page content can't bleed through into the status-bar area above the nav. Desktop keeps the blurred glass header. */ .page-home.is-scrolled .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .orbit-float { animation: none; } .orbit-item { transition: none; } } /* ── Shouryakriti landing feature — mascot in a rose arch niche ────── */ .feature__posebg { position: absolute; inset: 0; z-index: 1; clip-path: url(#arch); background: radial-gradient(ellipse at 50% 34%, rgba(236,110,156,0.18), transparent 70%), var(--soft); } .feature__poseimg { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); width: 80%; height: 94%; object-fit: contain; object-position: bottom; transition: transform 800ms var(--ease); } .feature__media--pose:hover .feature__poseimg { transform: translateX(-50%) scale(1.03); } .feature__media--pose .feature__media-inset { z-index: 3; } /* ════════════════════════════════════════════════════════════════════ CASE STUDY v2 — dark, art-directed (arches, patterns, asymmetry) Scoped under .cv so it never touches the older cs-* case studies. ════════════════════════════════════════════════════════════════════ */ .cv { overflow: clip; } /* ── Hero ─────────────────────────────────────────────────────────── */ .cv-hero { position: relative; padding: clamp(3.5rem, 9vh, 7rem) 0 2.5rem; } .cv-hero__glow { position: absolute; z-index: 0; left: 50%; top: -4%; transform: translateX(-50%); width: min(960px, 96vw); height: 540px; background: radial-gradient(ellipse at 50% 25%, var(--rose-soft), transparent 64%); pointer-events: none; } .cv-hero > .container { position: relative; z-index: 1; max-width: 940px; } .cv-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0.75rem 0 1.25rem; } .cv-hero__title em { font-style: italic; color: var(--metal); } .cv-hero__lede { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.5; color: var(--fg); opacity: 0.85; max-width: 52ch; } /* ── Meta row ─────────────────────────────────────────────────────── */ .cv-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; max-width: 760px; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); list-style: none; } @media (min-width: 720px) { .cv-meta { grid-template-columns: repeat(4, 1fr); } } .cv-meta__k { display: block; font-size: var(--t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--metal); margin-bottom: 0.4rem; } .cv-meta strong { font-weight: 500; color: var(--fg); } /* ── Full-width banner image ──────────────────────────────────────── */ .cv-banner { position: relative; margin: 3.5rem auto 0; max-width: var(--max-width); padding: 0 var(--page-pad-x); } .cv-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 1px solid var(--rule); } .cv-banner--contain img { aspect-ratio: 21 / 9; object-fit: contain; border: 0; background: transparent; } /* ── Body wrap ────────────────────────────────────────────────────── */ .cv-wrap { max-width: 940px; margin: 0 auto; padding: 3.5rem var(--page-pad-x) 0; } /* ── Section: asymmetric (index + title aside | body) ─────────────── */ .cv-sec { display: grid; grid-template-columns: 1fr; gap: 1rem 3.5rem; margin: 3.25rem 0; } @media (min-width: 820px) { .cv-sec { grid-template-columns: 0.8fr 1.2fr; align-items: start; } } .cv-sec__no { font-family: var(--font-display); font-size: 0.9375rem; color: var(--metal); letter-spacing: 0.1em; display: block; } .cv-sec__no::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--metal); vertical-align: middle; margin-right: 0.6rem; } .cv-sec__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.12; margin-top: 0.55rem; } .cv-sec__body p { font-size: 1.0625rem; line-height: 1.75; color: var(--muted); margin: 0 0 1.1em; } .cv-sec__body strong { color: var(--fg); font-weight: 500; } .cv-sec__body em { color: var(--fg); font-family: var(--font-display); font-style: italic; } .cv-sec__body ul { list-style: none; margin: 1.25rem 0; padding: 0; } .cv-sec__body li { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; color: var(--muted); line-height: 1.6; } .cv-sec__body li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--metal); transform: rotate(45deg); } .cv-sec__body li strong { color: var(--fg); } /* ── Figures ──────────────────────────────────────────────────────── */ .cv-fig { margin: 2.75rem auto; max-width: 940px; padding: 0 var(--page-pad-x); } .cv-fig img { width: 100%; display: block; border: 1px solid var(--rule); } .cv-fig figcaption { font-size: var(--t-small); color: var(--muted); margin-top: 0.7rem; text-align: center; } .cv-fig--wide { max-width: var(--max-width); } .cv-fig--row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 680px) { .cv-fig--row { grid-template-columns: 1fr 1fr; } } .cv-fig--row figcaption { grid-column: 1 / -1; } .cv-fig--contain img { border: 0; background: transparent; width: auto; max-width: 100%; max-height: 520px; margin: 0 auto; object-fit: contain; } /* Arch-framed figure (rose niche) */ .cv-fig--arch { display: flex; justify-content: center; } .cv-arch { position: relative; width: min(440px, 82vw); aspect-ratio: 4 / 5; } .cv-arch__shadow { position: absolute; inset: 0; transform: translate(14px, 16px); background: var(--metal); opacity: 0.2; clip-path: url(#arch); } .cv-arch__panel { position: absolute; inset: 0; clip-path: url(#arch); background: radial-gradient(ellipse at 50% 32%, var(--rose-soft), transparent 70%), var(--soft); } .cv-arch img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: url(#arch); border: 0; } .cv-arch--pose img { object-fit: contain; object-position: bottom; padding: 8% 8% 0; } /* ── Pull quote ───────────────────────────────────────────────────── */ .cv-quote { max-width: 820px; margin: 4rem auto; padding: 0 var(--page-pad-x); text-align: center; } .cv-quote::before { content: "\201C"; display: block; font-family: var(--font-display); color: var(--metal); font-size: 4rem; line-height: 0.6; opacity: 0.55; } .cv-quote p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.35; color: var(--fg); margin: 1rem 0 0; } /* ── Packaging placeholder grid ───────────────────────────────────── */ .cv-pack { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; } @media (min-width: 680px) { .cv-pack { grid-template-columns: repeat(3, 1fr); } } .cv-ph { aspect-ratio: 4 / 5; border: 1px dashed var(--rule); background: radial-gradient(ellipse at 50% 35%, var(--rose-soft), transparent 70%), var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6rem; padding: 1rem; } .cv-ph__mark { font-family: var(--font-display); font-size: 2rem; color: var(--metal); opacity: 0.85; line-height: 1; } .cv-ph__label { font-size: var(--t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* ── Next / prev nav ──────────────────────────────────────────────── */ .cv-next { max-width: 940px; margin: 5rem auto 0; padding: 2rem var(--page-pad-x) 0; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } /* Decorative dots helper (standalone, for case-study heroes) */ .cv-dots { position: absolute; z-index: 0; width: 150px; height: 150px; background-image: radial-gradient(var(--metal) 1.1px, transparent 1.3px); background-size: 17px 17px; opacity: 0.14; pointer-events: none; } @media (max-width: 760px) { .cv-dots { display: none; } } @media (prefers-reduced-motion: no-preference) { .cv-fig img, .cv-arch img { transition: transform 700ms var(--ease); } } /* ════════════════════════════════════════════════════════════════════ WORK INDEX — masonry image-forward cards (pcard2) ════════════════════════════════════════════════════════════════════ */ .pcard2__media { position: relative; overflow: hidden; border: 1px solid var(--rule); background: var(--soft); aspect-ratio: 4 / 3; /* default; varied per-card below */ } .pcard2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 750ms var(--ease), filter 400ms var(--ease); } .project-card:hover .pcard2__media img { transform: scale(1.05); } .project-card:hover .pcard2__media { border-color: var(--metal); box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 24px var(--rose-soft); } .pcard2__wipe { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(11,10,11,0.88) 100%); pointer-events: none; } .pcard2__label { position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.05rem; } .pcard2__disc { display: block; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--metal); margin-bottom: 0.35rem; } .pcard2__title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.1; color: var(--fg); } .pcard2__badge { position: absolute; top: 0.9rem; left: 0.9rem; background: rgba(11,10,11,0.7); color: var(--metal); border: 1px solid var(--metal); padding: 0.3rem 0.7rem; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Varied tile heights → the collage rhythm (cycles regardless of source ratio) */ .work-grid .project-card:nth-child(5n+1) .pcard2__media { aspect-ratio: 4 / 5; } .work-grid .project-card:nth-child(5n+2) .pcard2__media { aspect-ratio: 4 / 3; } .work-grid .project-card:nth-child(5n+3) .pcard2__media { aspect-ratio: 1 / 1; } .work-grid .project-card:nth-child(5n+4) .pcard2__media { aspect-ratio: 3 / 4; } .work-grid .project-card:nth-child(5n+5) .pcard2__media { aspect-ratio: 3 / 2; } /* ════════════════════════════════════════════════════════════════════ WORK INDEX — arch gallery (acard): thumbnails in temple-arch niches ════════════════════════════════════════════════════════════════════ */ .acard__arch { position: relative; aspect-ratio: 4 / 5; margin-bottom: 1.15rem; } .acard__shadow { position: absolute; inset: 0; z-index: 0; transform: translate(12px, 15px); background: var(--metal); opacity: 0.18; clip-path: url(#arch); } .acard__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; clip-path: url(#arch); transition: transform 750ms var(--ease), filter 400ms var(--ease); } .project-card:hover .acard__img { transform: scale(1.04); filter: saturate(1.05); } .project-card:hover .acard__shadow { opacity: 0.3; transform: translate(15px, 19px); transition: transform 300ms var(--ease), opacity 300ms var(--ease); } .acard__badge { position: absolute; z-index: 2; top: 1.1rem; left: 50%; transform: translateX(-50%); background: rgba(11,10,11,0.7); color: var(--metal); border: 1px solid var(--metal); padding: 0.3rem 0.75rem; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap; } .acard__meta { text-align: center; } .acard__disc { display: block; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--metal); margin-bottom: 0.4rem; } .acard__title { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.12; color: var(--fg); } /* ════════════════════════════════════════════════════════════════════ ABOUT page — art-directed layout ════════════════════════════════════════════════════════════════════ */ .ab-intro { position: relative; } .ab-intro__grid, .ab-split__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .ab-intro__grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } .ab-split__grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; } } .ab-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 1.5rem; } .ab-h1 em { color: var(--metal); font-style: italic; } .ab-h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1.25rem; } .ab-lede { font-size: 1.2rem; line-height: 1.6; color: var(--muted); } .ab-fig { margin: 0; } .about .cv-arch { width: 100%; max-width: 440px; margin: 0 auto; } .ab-fig--frame img { width: 100%; max-width: 460px; margin: 0 auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); } .ab-creds { display: grid; grid-template-columns: 1fr; gap: 1.5rem; font-size: 1.0625rem; line-height: 1.7; } @media (min-width: 760px) { .ab-creds { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; } .ab-creds > div:last-child { grid-column: 1 / -1; } } .ab-rasa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; } .ab-rasa figure { margin: 0; } .ab-rasa__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; clip-path: url(#arch); transition: transform 700ms var(--ease); } .ab-rasa figure:hover .ab-rasa__img { transform: scale(1.04); } .ab-rasa figcaption { text-align: center; margin-top: 0.7rem; font-size: var(--t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--metal); } @media (max-width: 520px) { .ab-rasa { grid-template-columns: 1fr 1fr; } } /* Credentials list stays single-column when inside the split */ .ab-creds--stack { grid-template-columns: 1fr; } .ab-creds--stack > div:last-child { grid-column: auto; } /* ════════════════════════════════════════════════════════════════════ ENGAGEMENTS page ════════════════════════════════════════════════════════════════════ */ .en-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1rem; } @media (min-width: 760px) { .en-grid { grid-template-columns: repeat(3, 1fr); } } .en-card { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--soft); overflow: hidden; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .en-card:hover { border-color: var(--metal); transform: translateY(-5px); } .en-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--rule); } .en-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .en-card:hover .en-card__media img { transform: scale(1.05); } .en-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.75rem; } .en-card__no { font-size: var(--t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--metal); margin-bottom: 0.6rem; } .en-card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; margin-bottom: 0.75rem; } .en-card__desc { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.1rem; } .en-list { list-style: none; margin: 0 0 1.5rem; padding: 0; } .en-list li { position: relative; padding-left: 1.3rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .en-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--metal); transform: rotate(45deg); } .en-card__from { margin-top: auto; font-family: var(--font-display); font-size: 1.4rem; color: var(--fg); } .en-steps { display: grid; grid-template-columns: 1fr; gap: 2rem 2.5rem; } @media (min-width: 560px) { .en-steps { grid-template-columns: 1fr 1fr; } } .en-step__no { font-family: var(--font-display); font-size: 2rem; color: var(--metal); opacity: 0.85; display: block; margin-bottom: 0.5rem; } .en-step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin-bottom: 0.4rem; } .en-step p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; } .en-nofit { list-style: none; margin: 0; padding: 0; } .en-nofit li { position: relative; padding-left: 1.8rem; margin-bottom: 1rem; color: var(--muted); line-height: 1.6; } .en-nofit li::before { content: "\00d7"; position: absolute; left: 0; top: -0.05em; color: var(--metal); font-size: 1.2rem; } .en-faq { max-width: 760px; margin: 0 auto; } .en-faq__item { border-top: 1px solid var(--rule); padding: 1.6rem 0; } .en-faq__item:last-child { border-bottom: 1px solid var(--rule); } .en-faq__q { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.25; margin-bottom: 0.6rem; } .en-faq__a { color: var(--muted); line-height: 1.7; } .en-cta { text-align: center; margin-top: 4.5rem; } .en-cta h2 { margin-bottom: 1.5rem; } /* Text-only engagement cards — rose top accent in place of the image */ .en-card { border-top: 2px solid var(--metal); } .en-card__body { padding-top: 1.75rem; } /* Case-study sketch figure — full tall line-art, framed, no crop */ .cv-fig--sketch { text-align: center; } .cv-fig--sketch img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; border: 1px solid var(--rule); } /* Case-study time-lapse video */ .cv-video { text-align: center; } .cv-video video { width: auto; max-width: 100%; max-height: 580px; margin: 0 auto; display: block; border: 1px solid var(--rule); background: var(--soft); } /* Brand-mark figure — show a logo/mark in full, capped height, never cropped */ .cv-fig--mark { text-align: center; } .cv-fig--mark img { width: auto; max-width: 100%; max-height: 380px; margin: 0 auto; border: 1px solid var(--rule); } /* Larger figure for detail-dense images (e.g. a brand system sheet) */ .cv-fig--big { text-align: center; } .cv-fig--big img { width: auto; max-width: 100%; max-height: 860px; margin: 0 auto; border: 1px solid var(--rule); } /* Full (non-cropping) banner — for type specimens / full-bleed art that must show whole */ .cv-banner--full img { aspect-ratio: auto; object-fit: contain; } /* Three-up figure row (e.g. packaging variants) */ .cv-fig--row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (min-width: 720px) { .cv-fig--row3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .cv-fig--row3 img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); } .cv-fig--row3 figcaption { grid-column: 1 / -1; }