/* ══════════════════════════════════════════════ BOMBAY17 — Jewel Cinematic v5.0 Rich dark tones + floral color vibrancy ══════════════════════════════════════════════ */ /* ── Variables ─────────────────────────────── */ :root { /* Base backgrounds – jewel tones, not plain black */ --base: #0f0c10; --plum: #180d16; --night: #0a0c18; --forest: #090e09; --wine: #140810; --indigo: #0b0914; --teal: #080e0c; /* Accent colors – vivid floral palette */ --rose: #f0507a; --rose-d: #c43560; --rose-glow: rgba(240,80,122,.18); --gold: #d4a843; --gold-2: #f0cc70; --gold-glow: rgba(212,168,67,.15); --lav: #b07fd4; --lav-glow: rgba(176,127,212,.14); --sage: #6ab87a; --sage-glow: rgba(106,184,122,.12); --coral: #f07855; --coral-glow:rgba(240,120,85,.12); /* Text */ --ivory: #faf5ee; --ivory-60: rgba(250,245,238,.6); --ivory-30: rgba(250,245,238,.3); /* Fonts */ --ff-d: 'Cormorant Garamond', Georgia, serif; --ff-b: 'Plus Jakarta Sans', system-ui, sans-serif; --ease: cubic-bezier(.16,1,.3,1); --ease-snap: cubic-bezier(.76,0,.24,1); } /* ── Reset ─────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--ff-b); background: var(--base); color: var(--ivory); overflow-x: hidden; line-height: 1.7; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button { font-family: inherit; } /* ── Page Transition ───────────────────────── */ /* Rose-gold curtain sweeps in from right, chapter name ghosted */ .page-curtain { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(135deg, var(--rose-d) 0%, #0f0c10 55%); transform: translateX(110%); transition: transform .55s var(--ease-snap); display: flex; align-items: flex-end; padding: 3rem 3.5rem; pointer-events: none; } .page-curtain.covering { transform: translateX(0); pointer-events: all; } .curtain-chapter { font-family: var(--ff-d); font-size: clamp(4rem, 12vw, 10rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: rgba(250,245,238,.07); user-select: none; } /* Fade only — NO transform on , otherwise becomes the containing block for position:fixed and breaks the Fancybox overlay (it would anchor to the document instead of the viewport). */ @keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } } body.page-enter { animation: pageEnter .6s var(--ease) forwards; } /* ── Loader ─────────────────────────────────── */ .page-loader { position: fixed; inset: 0; z-index: 10000; background: var(--base); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; transition: opacity .7s ease, visibility .7s ease; } .page-loader.hidden { opacity: 0; visibility: hidden; } .loader-brand { font-family: var(--ff-d); font-size: 1.8rem; font-weight: 300; letter-spacing: .4em; text-transform: uppercase; color: var(--ivory); } .loader-bar-wrap { width: 160px; height: 1px; background: rgba(255,255,255,.1); overflow: hidden; } .loader-bar-fill { height: 100%; background: linear-gradient(to right, var(--rose), var(--gold)); animation: loadBar 1.6s var(--ease) forwards; } @keyframes loadBar { from { width: 0; } to { width: 100%; } } /* ── Utilities ─────────────────────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; } .text-center { text-align: center; } .eyebrow { display: block; font-size: .65rem; letter-spacing: .35em; text-transform: uppercase; margin-bottom: 1.5rem; } .eyebrow-rose { color: var(--rose); } .eyebrow-gold { color: var(--gold); } .eyebrow-lav { color: var(--lav); } .eyebrow-sage { color: var(--sage); } .eyebrow-coral { color: var(--coral); } /* ── Keyframes ─────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pulseGlow { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .7; transform: scale(1.08); } } /* ── Scroll reveal ─────────────────────────── */ .reveal { opacity: 0; transform: translateY(42px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.visible { opacity: 1; transform: none; } .reveal-left { transform: translateX(-42px); } .reveal-right { transform: translateX( 42px); } .reveal-left.visible, .reveal-right.visible { transform: none; } .reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; } .reveal-d4 { transition-delay: .4s; } .reveal-d5 { transition-delay: .5s; } /* ── Buttons ─────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 2.4rem; font-size: .74rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; border: none; cursor: pointer; transition: all .35s ease; } .btn-rose { background: var(--rose); color: #fff; } .btn-rose:hover { background: var(--rose-d); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(196,53,96,.35); } .btn-gold { background: var(--gold); color: var(--base); } .btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(212,168,67,.35); } .btn-outline { background: transparent; color: var(--ivory); border: 1px solid var(--ivory-30); } .btn-outline:hover { border-color: var(--rose); color: var(--rose); } .btn-ghost { background: transparent; color: var(--rose); border: 1px solid rgba(240,80,122,.4); } .btn-ghost:hover { background: var(--rose); color: #fff; box-shadow: 0 8px 28px rgba(240,80,122,.3); } .btn-ghost-gold { background: transparent; color: var(--gold); border: 1px solid rgba(212,168,67,.4); } .btn-ghost-gold:hover { background: var(--gold); color: var(--base); } /* ══════════════════════════════════ HEADER — always transparent, jewel frosted on scroll ══════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 2rem 0; transition: padding .4s ease, background .4s ease, backdrop-filter .4s ease, border-color .4s; border-bottom: 1px solid transparent; } .site-header.scrolled { padding: 1.1rem 0; background: rgba(15,12,16,.88); backdrop-filter: blur(24px) saturate(1.5); border-color: rgba(240,80,122,.12); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .logo { display: flex; align-items: center; } .logo-img { height: 100px; width: auto; display: block; object-fit: contain; transition: height .4s ease; } .site-header.scrolled .logo-img { height: 54px; } .nav-list { display: flex; align-items: center; gap: 2.5rem; } .nav-list a { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ivory-60); transition: color .25s; position: relative; } .nav-list a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--rose); transition: width .3s ease; } .nav-list a:hover, .nav-list a.active { color: var(--ivory); } .nav-list a:hover::after, .nav-list a.active::after { width: 100%; } .nav-cta { color: var(--rose) !important; border: 1px solid rgba(240,80,122,.4) !important; padding: .55rem 1.3rem; transition: all .3s ease !important; } .nav-cta:hover { background: var(--rose) !important; color: #fff !important; } .nav-cta::after { display: none !important; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .hamburger span { display: block; width: 24px; height: 1px; background: var(--ivory); transition: all .3s ease; } .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); } /* Mobile nav */ .mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 998; opacity: 0; visibility: hidden; transition: all .3s; } .mobile-overlay.active { opacity: 1; visibility: visible; } .mobile-nav { position: fixed; top: 0; right: 0; width: min(320px,85vw); height: 100vh; background: var(--plum); z-index: 999; padding: 4rem 2.5rem; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease), visibility .4s; border-left: 1px solid rgba(240,80,122,.15); visibility: hidden; } .mobile-nav.open { transform: none; visibility: visible; } .mobile-nav a { padding: 1.1rem 0; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ivory-60); border-bottom: 1px solid rgba(255,255,255,.05); transition: color .2s; } .mobile-nav a:hover { color: var(--rose); } .mobile-nav-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; cursor: pointer; color: var(--ivory-60); font-size: 1.1rem; transition: color .2s; } .mobile-nav-close:hover { color: var(--rose); } /* Scroll top + WhatsApp */ .scroll-top { position: fixed; bottom: 5.5rem; right: 2rem; width: 40px; height: 40px; background: rgba(240,80,122,.12); border: 1px solid rgba(240,80,122,.3); color: var(--rose); cursor: pointer; font-size: .8rem; display: flex; align-items: center; justify-content: center; z-index: 900; opacity: 0; visibility: hidden; transition: all .3s; } .scroll-top.visible { opacity: 1; visibility: visible; } .scroll-top:hover { background: var(--rose); color: #fff; } .whatsapp-float { position: fixed; bottom: 2rem; right: 2rem; width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; z-index: 900; box-shadow: 0 4px 20px rgba(37,211,102,.3); transition: transform .25s, box-shadow .25s; } .whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(37,211,102,.45); } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 1001; background: linear-gradient(to right, var(--rose), var(--gold), var(--lav)); width: 0; transition: width .1s linear; } /* ══════════════════════════════════ CH 1 — HERO (deep plum + rose glow) ══════════════════════════════════ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--plum); padding: 9rem 0 5rem; } /* Ambient color glows */ .hero::before { content: ''; position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(240,80,122,.25) 0%, transparent 70%); top: -150px; right: -150px; animation: pulseGlow 6s ease-in-out infinite; } .hero::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(176,127,212,.18) 0%, transparent 70%); bottom: -100px; left: -100px; animation: pulseGlow 8s ease-in-out infinite reverse; } .hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.45) saturate(1.15); will-change: transform; } /* Fallback: poster image shows until video loads / if no video file */ @media (prefers-reduced-motion: reduce) { .hero-video { filter: brightness(.45) saturate(1.15); } .hero-video:not([src]) { display: none; } } .hero-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,16,.95) 0%, rgba(15,12,16,.3) 50%, rgba(15,12,16,.5) 100%); } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 1050px; padding: 0 2rem; } .hero-eyebrow { display: block; font-size: .7rem; letter-spacing: .38em; text-transform: uppercase; color: var(--rose); margin-bottom: 2.5rem; opacity: 0; animation: fadeUp .8s .6s ease forwards; } .hero h1 { font-family: var(--ff-d); font-size: clamp(4rem, 11vw, 10rem); font-weight: 300; line-height: .95; letter-spacing: -.02em; color: var(--ivory); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp .9s .85s ease forwards; } .hero h1 em { font-style: italic; color: var(--rose); display: block; } .hero-rule { display: flex; align-items: center; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; opacity: 0; animation: fadeIn .8s 1.1s ease forwards; } .hero-rule-line { width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); opacity: .7; } .hero-rule-line:last-child { background: linear-gradient(to left, transparent, var(--gold)); } .hero-rule-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } .hero-occasions { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ivory-60); margin-bottom: 3.5rem; opacity: 0; animation: fadeUp .8s 1.2s ease forwards; } .hero-occasions span { color: var(--gold); } .hero-actions { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s 1.4s ease forwards; } .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .75rem; color: var(--ivory-60); font-size: .58rem; letter-spacing: .25em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: fadeIn 1s 2s ease forwards; } .hero-scroll-line { width: 1px; height: 55px; background: linear-gradient(var(--rose), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity:.9; transform:scaleY(1); } 50% { opacity:.3; transform:scaleY(.55); } } /* ══════════════════════════════════ CH 2 — OCCASIONS (midnight blue + lavender) ══════════════════════════════════ */ .occasions-section { padding: 8rem 0 5rem; background: var(--night); background-image: radial-gradient(ellipse at 20% 60%, var(--lav-glow) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, var(--rose-glow) 0%, transparent 45%); overflow: hidden; } .occasions-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; } .occasions-title { font-family: var(--ff-d); font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 300; color: var(--ivory); line-height: 1.1; } .occasions-title em { font-style: italic; color: var(--lav); } .occasions-hint { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ivory-60); } .occasions-strip { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; cursor: grab; } .occasions-strip::-webkit-scrollbar { display: none; } .occasions-strip.grabbing { cursor: grabbing; } .occ-card { flex: 0 0 270px; height: 480px; position: relative; overflow: hidden; background: var(--plum); transition: flex .55s var(--ease); } .occ-card:hover { flex: 0 0 430px; } .occ-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.4) saturate(1.3); transition: filter .5s ease, transform .5s ease; } .occ-card:hover .occ-bg { filter: brightness(.55) saturate(1.5); transform: scale(1.04); } .occ-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; } .occ-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,24,.9) 0%, rgba(10,12,24,.1) 55%, transparent 100%); } .occ-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; } .occ-num { font-family: var(--ff-d); font-size: .7rem; letter-spacing: .2em; margin-bottom: .5rem; opacity: 0; transform: translateY(8px); transition: all .35s .05s ease; } .occ-card:hover .occ-num { opacity: 1; transform: none; } .occ-name { font-family: var(--ff-d); font-size: 2rem; font-weight: 300; color: var(--ivory); line-height: 1.1; } .occ-sub { font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; margin-top: .5rem; opacity: 0; transform: translateY(8px); transition: all .35s .1s ease; } .occ-card:hover .occ-sub { opacity: 1; transform: none; } /* Per-card accent colors */ .occ-card:nth-child(1) .occ-ph { color: var(--rose); } .occ-card:nth-child(1) .occ-num, .occ-card:nth-child(1) .occ-sub { color: var(--rose); } .occ-card:nth-child(2) .occ-ph { color: var(--lav); } .occ-card:nth-child(2) .occ-num, .occ-card:nth-child(2) .occ-sub { color: var(--lav); } .occ-card:nth-child(3) .occ-ph { color: var(--gold); } .occ-card:nth-child(3) .occ-num, .occ-card:nth-child(3) .occ-sub { color: var(--gold); } .occ-card:nth-child(4) .occ-ph { color: var(--sage); } .occ-card:nth-child(4) .occ-num, .occ-card:nth-child(4) .occ-sub { color: var(--sage); } .occ-card:nth-child(5) .occ-ph { color: var(--coral); } .occ-card:nth-child(5) .occ-num, .occ-card:nth-child(5) .occ-sub { color: var(--coral); } .occ-card:nth-child(6) .occ-ph { color: var(--rose); } .occ-card:nth-child(6) .occ-num, .occ-card:nth-child(6) .occ-sub { color: var(--rose); } .occ-card:nth-child(7) .occ-ph { color: var(--lav); } .occ-card:nth-child(7) .occ-num, .occ-card:nth-child(7) .occ-sub { color: var(--lav); } .occ-card:nth-child(8) .occ-ph { color: var(--gold); } .occ-card:nth-child(8) .occ-num, .occ-card:nth-child(8) .occ-sub { color: var(--gold); } /* ══════════════════════════════════ CH 3 — MANIFESTO (deep plum + gold) ══════════════════════════════════ */ .manifesto-section { padding: 10rem 0; background: var(--wine); background-image: radial-gradient(ellipse at 50% 50%, var(--gold-glow) 0%, transparent 65%); text-align: center; position: relative; overflow: hidden; } .manifesto-ghost { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--ff-d); font-size: clamp(8rem, 22vw, 24rem); font-weight: 700; color: rgba(212,168,67,.04); white-space: nowrap; pointer-events: none; user-select: none; } .manifesto-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 2rem; } .manifesto-line { display: block; font-family: var(--ff-d); font-size: clamp(1.8rem, 4vw, 3.6rem); font-weight: 300; line-height: 1.25; color: var(--ivory); opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .manifesto-line.visible { opacity: 1; transform: none; } .manifesto-line:nth-child(2) { color: var(--ivory-60); transition-delay: .2s; } .manifesto-line:nth-child(3) { transition-delay: .4s; } .manifesto-line em { font-style: italic; color: var(--gold); } .manifesto-hr { width: 1px; height: 70px; margin: 3.5rem auto; background: linear-gradient(to bottom, var(--gold), transparent); } .manifesto-sub { font-size: .88rem; color: var(--ivory-60); letter-spacing: .05em; } /* ══════════════════════════════════ CH 4 — PROCESS (dark forest + sage) ══════════════════════════════════ */ .process-section { padding: 8rem 0; background: var(--forest); background-image: radial-gradient(ellipse at 80% 50%, var(--sage-glow) 0%, transparent 55%), radial-gradient(ellipse at 10% 20%, var(--gold-glow) 0%, transparent 45%); } .process-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 7rem; align-items: start; } .process-sticky { position: sticky; top: 7rem; } .process-intro-title { font-family: var(--ff-d); font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 300; color: var(--ivory); line-height: 1.2; margin-bottom: 1.5rem; } .process-intro-title em { font-style: italic; color: var(--sage); } .process-intro-desc { font-size: .88rem; color: var(--ivory-60); line-height: 1.8; } .process-steps { display: flex; flex-direction: column; } .process-step { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem; padding: 2.5rem 0; border-bottom: 1px solid rgba(255,255,255,.05); opacity: .3; transition: opacity .4s; } .process-step:first-child { padding-top: 0; } .process-step:hover, .process-step.active { opacity: 1; } .ps-num { font-family: var(--ff-d); font-size: .85rem; color: var(--sage); padding-top: .3rem; } .ps-title { font-family: var(--ff-d); font-size: 1.4rem; font-weight: 400; color: var(--ivory); margin-bottom: .5rem; } .ps-desc { font-size: .83rem; color: var(--ivory-60); line-height: 1.75; } /* ══════════════════════════════════ CH 5 — CREATIONS (indigo + lavender) ══════════════════════════════════ */ .creations-section { padding: 8rem 0; background: var(--indigo); background-image: radial-gradient(ellipse at 15% 30%, var(--lav-glow) 0%, transparent 50%), radial-gradient(ellipse at 90% 80%, var(--rose-glow) 0%, transparent 50%); } .creations-section h2 em { font-style: italic; color: var(--lav); } .creations-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 3rem 0; } .ctab { padding: .5rem 1.2rem; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-60); border: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: all .25s; background: none; } .ctab.active, .ctab:hover { border-color: var(--lav); color: var(--lav); } .creations-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .cr-item { position: relative; overflow: hidden; background: var(--plum); cursor: pointer; } .cr-item:nth-child(1) { grid-column: span 7; aspect-ratio: 16/9; } .cr-item:nth-child(2) { grid-column: span 5; aspect-ratio: 4/5; } .cr-item:nth-child(3), .cr-item:nth-child(4), .cr-item:nth-child(5) { grid-column: span 4; aspect-ratio: 1; } .cr-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; filter: saturate(1.1); } .cr-item:hover img { transform: scale(1.05); } .cr-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,9,20,.9) 0%, transparent 50%); opacity: 0; transition: opacity .4s; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; } .cr-item:hover .cr-overlay { opacity: 1; } .cr-overlay h4 { font-family: var(--ff-d); font-size: 1.2rem; font-weight: 300; color: var(--ivory); margin-bottom: .25rem; } .cr-overlay span { font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lav); } .cr-ph { width: 100%; height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: var(--lav); opacity: .15; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; } .cr-ph i { font-size: 2rem; } /* ── Creations card slider ─────────── */ .cr-slider { position: relative; margin-top: 1rem; } .cr-track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 1rem .25rem 1.5rem; -ms-overflow-style: none; /* hide scrollbar IE/Edge */ scrollbar-width: none; /* hide scrollbar Firefox */ } .cr-track::-webkit-scrollbar { display: none; } /* hide scrollbar Chrome/Safari */ .cr-card { position: relative; flex: 0 0 auto; width: clamp(240px, 26vw, 320px); aspect-ratio: 3/4; border-radius: 22px; overflow: hidden; scroll-snap-align: start; cursor: pointer; background: var(--plum); box-shadow: 0 18px 40px rgba(0,0,0,.4); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .cr-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; filter: saturate(1.12) brightness(.92); } .cr-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(0,0,0,.55); } .cr-card:hover img { transform: scale(1.07); } .cr-card-info { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; background: linear-gradient(to top, rgba(11,9,20,.92) 0%, rgba(11,9,20,.25) 45%, transparent 70%); } .cr-card-cat { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); margin-bottom: .35rem; } .cr-card-info h4 { font-family: var(--ff-d); font-weight: 300; font-size: 1.25rem; color: var(--ivory); line-height: 1.25; } .cr-nav { display: flex; justify-content: center; gap: 1rem; margin-top: .5rem; } .cr-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); color: var(--ivory); cursor: pointer; transition: all .3s var(--ease); } .cr-btn:hover { background: var(--lav); border-color: var(--lav); color: var(--base); transform: scale(1.08); } .cr-btn:active { transform: scale(.96); } /* ══════════════════════════════════ CH 6 — TRANSFORMATION (deep wine + rose) ══════════════════════════════════ */ .transform-section { padding: 8rem 0; background: var(--wine); background-image: radial-gradient(ellipse at 60% 80%, var(--rose-glow) 0%, transparent 55%); } .transform-section h2 em { font-style: italic; color: var(--rose); } .ba-wrap { max-width: 1080px; margin: 4rem auto 0; padding: 0 2.5rem; } .ba-slider { position: relative; overflow: hidden; cursor: ew-resize; user-select: none; aspect-ratio: 16/8; background: var(--plum); border: 1px solid rgba(240,80,122,.1); } .ba-before, .ba-after { position: absolute; inset: 0; } .ba-before img, .ba-after img { width: 100%; height: 100%; object-fit: cover; } .ba-before-ph { width: 100%; height: 100%; background: var(--indigo); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: var(--ivory-60); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .ba-before-ph i { font-size: 2.5rem; color: var(--ivory-30); } .ba-after { clip-path: inset(0 50% 0 0); } .ba-after-ph { width: 100%; height: 100%; background: var(--wine); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: var(--rose); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .ba-after-ph i { font-size: 2.5rem; } .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--rose); transform: translateX(-50%); z-index: 10; box-shadow: 0 0 20px var(--rose-glow); } .ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--rose); border: 3px solid var(--base); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; gap: .2rem; box-shadow: 0 0 24px rgba(240,80,122,.5); } .ba-label { position: absolute; bottom: 1rem; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; padding: .35rem .75rem; background: rgba(0,0,0,.65); color: var(--ivory); } .ba-before .ba-label { left: 1rem; } .ba-after .ba-label { right: 1rem; color: var(--rose); } /* ══════════════════════════════════ CH 7 — PHILOSOPHY (full image) ══════════════════════════════════ */ .philosophy-section { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5rem 0; } .phil-bg { position: absolute; inset: 0; background-image: url('../images/about-main.jpg'); background-size: cover; background-position: center; filter: brightness(.22) saturate(1.4); transform: scale(1.06); transition: transform 10s ease; } .phil-bg.zoomed { transform: scale(1); } .phil-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(240,80,122,.15) 0%, rgba(15,12,16,.4) 70%); } .phil-content { position: relative; z-index: 2; text-align: center; max-width: 820px; padding: 0 2rem; } .phil-quote { font-family: var(--ff-d); font-size: clamp(1.8rem, 4vw, 3.5rem); font-weight: 300; font-style: italic; line-height: 1.3; color: var(--ivory); } .phil-quote em { font-style: normal; color: var(--rose); } .phil-attr { display: block; margin-top: 2rem; font-size: .65rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); opacity: .9; } /* ══════════════════════════════════ CH 8 — CLIENT STORIES (deep indigo + rose/violet) ══════════════════════════════════ */ .stories-section { padding: 8rem 0; background: #0c0914; background-image: radial-gradient(ellipse at 70% 30%, rgba(176,127,212,.14) 0%, transparent 50%), radial-gradient(ellipse at 10% 80%, var(--rose-glow) 0%, transparent 50%); } .stories-section h2 em { font-style: italic; color: var(--rose); } .stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 2px; margin-top: 4rem; } .story-card { padding: 2.5rem; background: rgba(22,13,22,.8); border: 1px solid rgba(255,255,255,.04); position: relative; overflow: hidden; transition: background .3s, border-color .3s; } .story-card::after { content: '\201C'; position: absolute; top: 1rem; right: 1.5rem; font-family: var(--ff-d); font-size: 5rem; line-height: 1; color: var(--rose); opacity: .08; } .story-card:hover { background: rgba(30,15,28,.9); border-color: rgba(240,80,122,.15); } .story-stars { display: flex; gap: .25rem; color: var(--gold); font-size: .7rem; margin-bottom: 1.25rem; } .story-quote { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 300; font-style: italic; color: var(--ivory); line-height: 1.65; margin-bottom: 2rem; } .story-client { display: flex; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06); } .story-av-ph { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: var(--rose-glow); border: 1px solid rgba(240,80,122,.3); display: flex; align-items: center; justify-content: center; font-family: var(--ff-d); font-size: 1.1rem; color: var(--rose); } .story-av img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .story-name { font-size: .85rem; font-weight: 500; color: var(--ivory); } .story-event { font-size: .68rem; color: var(--rose); letter-spacing: .04em; margin-top: .15rem; } /* ══════════════════════════════════ CH 9 — BEHIND SCENES (teal + coral) ══════════════════════════════════ */ .behind-section { padding: 8rem 0; background: var(--teal); background-image: radial-gradient(ellipse at 50% 50%, var(--coral-glow) 0%, transparent 55%), radial-gradient(ellipse at 90% 10%, var(--gold-glow) 0%, transparent 45%); overflow: hidden; } .behind-section h2 em { font-style: italic; color: var(--coral); } .behind-track { display: flex; gap: 3rem; padding: 3rem 2.5rem; overflow-x: auto; scrollbar-width: none; cursor: grab; } .behind-track::-webkit-scrollbar { display: none; } .behind-track.grabbing { cursor: grabbing; } .behind-step { flex: 0 0 260px; position: relative; } .behind-step::after { content: '→'; position: absolute; right: -2.2rem; top: 5.5rem; font-size: 1.3rem; color: var(--coral); opacity: .35; } .behind-step:last-child::after { display: none; } .behind-img { height: 200px; background: rgba(8,14,12,.8); display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: .35; border: 1px solid rgba(255,255,255,.06); overflow: hidden; margin-bottom: 1.5rem; } .behind-img img { width: 100%; height: 100%; object-fit: cover; opacity: 3; } .behind-step-num { font-family: var(--ff-d); font-size: .65rem; letter-spacing: .25em; margin-bottom: .5rem; } .behind-step-title { font-family: var(--ff-d); font-size: 1.25rem; font-weight: 300; color: var(--ivory); margin-bottom: .5rem; } .behind-step-desc { font-size: .8rem; color: var(--ivory-60); line-height: 1.75; } /* Per-step colors */ .behind-step:nth-child(odd) .behind-img { color: var(--coral); border-color: rgba(240,120,85,.15); } .behind-step:nth-child(odd) .behind-step-num { color: var(--coral); } .behind-step:nth-child(even) .behind-img { color: var(--gold); border-color: rgba(212,168,67,.15); } .behind-step:nth-child(even) .behind-step-num { color: var(--gold); } /* ══════════════════════════════════ CLOSING CTA (rose glow) ══════════════════════════════════ */ .cta-close { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--plum); padding: 7rem 0 6rem; } .cta-close-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center bottom, rgba(196,53,96,.45) 0%, var(--plum) 60%); } /* Floating color orbs */ .cta-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; } .cta-orb-1 { width: 400px; height: 400px; top: -100px; right: -80px; background: rgba(240,80,122,.18); animation: float 8s ease-in-out infinite; } .cta-orb-2 { width: 300px; height: 300px; bottom: -80px; left: -50px; background: rgba(176,127,212,.15); animation: float 10s ease-in-out infinite reverse; } .cta-close-content { position: relative; z-index: 1; text-align: center; padding: 0 2rem; max-width: 900px; } .cta-close h2 { font-family: var(--ff-d); font-size: clamp(3rem, 9vw, 8rem); font-weight: 300; line-height: .95; color: var(--ivory); margin-bottom: 2rem; } .cta-close h2 em { font-style: italic; color: var(--rose); display: block; } .cta-close p { font-size: .95rem; color: var(--ivory-60); margin-bottom: 3rem; } .cta-close-actions { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } /* ══════════════════════════════════ FOOTER ══════════════════════════════════ */ .site-footer { background: #0a0708; border-top: 1px solid rgba(240,80,122,.1); padding: 5rem 0 2.5rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 4rem; margin-bottom: 4rem; } .footer-brand-name { font-family: var(--ff-d); font-size: 1.7rem; font-weight: 300; color: var(--ivory); display: block; margin-bottom: .2rem; } .footer-brand-tag { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--rose); display: block; margin-bottom: 1.5rem; } .footer-brand p { font-size: .83rem; color: var(--ivory-60); line-height: 1.8; margin-bottom: 1.75rem; } .footer-socials { display: flex; gap: .75rem; } .footer-soc { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--ivory-60); font-size: .82rem; transition: all .25s; } .footer-soc:hover { border-color: var(--rose); color: var(--rose); } .footer-title { font-family: var(--ff-d); font-size: 1rem; font-weight: 400; color: var(--ivory); margin-bottom: 1.5rem; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: .75rem; } .footer-links a { font-size: .78rem; color: var(--ivory-60); transition: color .2s; } .footer-links a:hover { color: var(--rose); } .footer-contact-item { display: flex; gap: 1rem; align-items: flex-start; font-size: .8rem; color: var(--ivory-60); margin-bottom: .9rem; } .footer-contact-item i { color: var(--rose); margin-top: .15rem; flex-shrink: 0; } .footer-contact-item a { color: var(--ivory-60); transition: color .2s; } .footer-contact-item a:hover { color: var(--rose); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .7rem; color: rgba(250,245,238,.25); letter-spacing: .06em; } /* ══════════════════════════════════ INNER PAGE HERO ══════════════════════════════════ */ .page-hero { position: relative; padding: 10rem 0 5rem; min-height: 52vh; display: flex; align-items: center; overflow: hidden; background: var(--plum); } .page-hero-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.28) saturate(1.3); } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,12,16,.95) 0%, rgba(15,12,16,.5) 70%, transparent 100%); } .page-hero-content { position: relative; z-index: 2; max-width: 700px; } .breadcrumb { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-60); } .breadcrumb a { color: var(--ivory-60); transition: color .2s; } .breadcrumb a:hover { color: var(--rose); } .breadcrumb .sep { color: var(--ivory-30); } .breadcrumb .current { color: var(--gold); } .page-hero h1 { font-family: var(--ff-d); font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--ivory); margin-bottom: 1.2rem; } .page-hero h1 em { font-style: italic; color: var(--rose); } .page-hero > .container > .page-hero-content p { font-size: .92rem; color: var(--ivory-60); max-width: 520px; line-height: 1.75; } /* Ambient glow per page */ .page-hero-glow-rose::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(240,80,122,.2) 0%, transparent 70%); top: -100px; right: 5%; } .page-hero-glow-lav::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(176,127,212,.2) 0%, transparent 70%); top: -100px; right: 5%; } .page-hero-glow-gold::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(212,168,67,.18) 0%, transparent 70%); top: -80px; right: 5%; } .page-hero-glow-sage::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(106,184,122,.18) 0%, transparent 70%); top: -80px; right: 5%; } /* coral-glow var fallback */ :root { --coral-glow: rgba(240,120,85,.12); } /* ── Section containers ──────────── */ .section-block { padding: 7rem 0; } .section-block-sm { padding: 4rem 0; } .section-block-alt-plum { background: var(--plum); } .section-block-alt-night { background: var(--night); } .section-block-alt-wine { background: var(--wine); } .section-block-alt-forest{ background: var(--forest); } .section-block-alt-teal { background: var(--teal); } .section-block-alt-indigo{ background: var(--indigo); } .section-block-alt-base { background: var(--base); } .section-head { margin-bottom: 4rem; } .section-head.center { text-align: center; } .section-title-xl { font-family: var(--ff-d); font-size: clamp(2.2rem, 4.5vw, 4.5rem); font-weight: 300; color: var(--ivory); line-height: 1.1; } .section-title-xl em { font-style: italic; } .section-title-lg { font-family: var(--ff-d); font-size: clamp(1.8rem, 3.5vw, 3.5rem); font-weight: 300; color: var(--ivory); line-height: 1.15; } .section-title-lg em { font-style: italic; } .section-body { font-size: .9rem; color: var(--ivory-60); line-height: 1.8; margin-top: 1.2rem; max-width: 600px; } .section-rule { width: 50px; height: 1px; margin: 1.5rem 0; } .section-rule.center { margin-inline: auto; } /* ── Two-column layout ───────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .two-col.flip { direction: rtl; } .two-col.flip > * { direction: ltr; } .img-cinematic { position: relative; overflow: hidden; aspect-ratio: 4/5; /* Organic floral blob shape */ border-radius: 62% 38% 34% 66% / 58% 32% 68% 42%; box-shadow: 0 0 0 2px rgba(240,80,122,.3), 0 0 40px rgba(240,80,122,.12), 0 28px 72px rgba(0,0,0,.5); transition: border-radius 9s ease-in-out, box-shadow .5s ease; } /* Slowly morph the blob on hover — looks alive */ .img-cinematic:hover { border-radius: 42% 58% 66% 34% / 38% 68% 32% 62%; box-shadow: 0 0 0 2px rgba(212,168,67,.4), 0 0 50px rgba(212,168,67,.14), 0 28px 72px rgba(0,0,0,.5); } .img-cinematic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15); transition: transform .7s ease; } .img-cinematic:hover img { transform: scale(1.05); } /* Petal accent ring — thin gradient outline that follows the blob */ .img-cinematic::before { content: ''; position: absolute; inset: -3px; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, var(--rose), var(--gold), var(--lav), var(--rose)); opacity: .55; } .img-cinematic::after { display: none; } .img-cinematic-ph { width: 100%; height: 100%; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--dark-2); border: 1px solid rgba(255,255,255,.06); border-radius: inherit; } /* ── Stats strip ─────────────────── */ .stats-strip { padding: 5rem 0; background: linear-gradient(135deg, var(--wine) 0%, var(--plum) 50%, var(--night) 100%); background-image: radial-gradient(ellipse at 50% 50%, var(--rose-glow) 0%, transparent 60%); } .stats-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .stat-num { font-family: var(--ff-d); font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; line-height: 1; color: var(--ivory); margin-bottom: .5rem; } .stat-num span { color: var(--rose); } .stat-label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-60); } /* ── Values / Feature cards ──────── */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 4rem; } .value-card { padding: 2.5rem; background: var(--plum); border: 1px solid rgba(255,255,255,.04); transition: background .3s, border-color .3s; position: relative; overflow: hidden; } .value-card:hover { background: rgba(24,13,22,.9); border-color: rgba(240,80,122,.12); } .value-card-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.5rem; background: var(--rose-glow); } .value-card-icon.lav { background: var(--lav-glow); color: var(--lav); } .value-card-icon.gold { background: var(--gold-glow); color: var(--gold); } .value-card-icon.sage { background: var(--sage-glow); color: var(--sage); } .value-card-icon.coral{ background: var(--coral-glow); color: var(--coral); } .value-card-icon.rose { color: var(--rose); } .value-card h3 { font-family: var(--ff-d); font-size: 1.25rem; font-weight: 400; color: var(--ivory); margin-bottom: .75rem; } .value-card p { font-size: .83rem; color: var(--ivory-60); line-height: 1.75; } /* ── Check list ──────────────────── */ .check-list { list-style: none; display: flex; flex-direction: column; gap: .9rem; margin: 1.5rem 0; } .check-list li { display: flex; align-items: flex-start; gap: .9rem; font-size: .88rem; color: var(--ivory-60); line-height: 1.5; } .check-list li i { color: var(--rose); margin-top: .15rem; flex-shrink: 0; } /* ── Gallery masonry ─────────────── */ .gallery-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: 3rem 0; } .filter-btn { padding: .5rem 1.2rem; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-60); border: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: all .25s; background: none; } .filter-btn.active, .filter-btn:hover { border-color: var(--rose); color: var(--rose); } .gallery-masonry { columns: 3; column-gap: 3px; } .gallery-item { break-inside: avoid; display: block; position: relative; overflow: hidden; margin-bottom: 3px; cursor: pointer; background: var(--plum); } .gallery-item img { width: 100%; display: block; transition: transform .6s ease; filter: saturate(1.1); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,16,.85) 0%, transparent 50%); opacity: 0; transition: opacity .4s; display: flex; align-items: flex-end; padding: 1.2rem; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-item-overlay span { font-family: var(--ff-d); font-size: 1rem; color: var(--ivory); font-style: italic; } .gallery-zoom { position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; background: rgba(240,80,122,.8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; opacity: 0; transition: opacity .3s; } .gallery-item:hover .gallery-zoom { opacity: 1; } .gallery-ph { break-inside: avoid; margin-bottom: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: var(--dark-2); color: var(--rose); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; opacity: .35; } .gallery-ph i { font-size: 1.8rem; } /* ── Projects grid ───────────────── */ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 4rem; } .project-card { position: relative; overflow: hidden; display: block; aspect-ratio: 3/4; background: var(--plum); cursor: pointer; } .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; filter: saturate(1.1); } .project-card:hover img { transform: scale(1.05); } .project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,16,.92) 0%, transparent 55%); opacity: 0; transition: opacity .4s; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.8rem; } .project-card:hover .project-overlay { opacity: 1; } .project-type-tag { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); margin-bottom: .4rem; } .project-overlay h3 { font-family: var(--ff-d); font-size: 1.3rem; font-weight: 300; color: var(--ivory); margin-bottom: .5rem; } .project-overlay p { font-size: .78rem; color: var(--ivory-60); margin-bottom: 1rem; } .project-ph { width: 100%; aspect-ratio: 3/4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: var(--dark-2); color: var(--lav); opacity: .2; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; } .project-ph i { font-size: 2rem; } /* ── Services sections ───────────── */ .svc-includes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; margin: 1.5rem 0; } .svc-include-item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--ivory-60); } .svc-include-item i { flex-shrink: 0; font-size: .7rem; } /* ── Contact ─────────────────────── */ .contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; } .contact-info-card { background: var(--plum); border: 1px solid rgba(240,80,122,.1); padding: 2.5rem; } .contact-info-card h3 { font-family: var(--ff-d); font-size: 1.8rem; font-weight: 300; color: var(--ivory); margin-bottom: .5rem; } .contact-info-card > p { font-size: .85rem; color: var(--ivory-60); margin-bottom: 2rem; line-height: 1.75; } .c-item { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.5rem; } .c-item-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--rose-glow); display: flex; align-items: center; justify-content: center; color: var(--rose); font-size: .9rem; } .c-item-text h4 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; } .c-item-text p, .c-item-text a { font-size: .85rem; color: var(--ivory-60); } .c-item-text a:hover { color: var(--rose); } .c-socials { display: flex; gap: .6rem; margin-top: 1.5rem; } .c-soc { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--ivory-60); font-size: .82rem; transition: all .25s; } .c-soc:hover { border-color: var(--rose); color: var(--rose); } /* Form card */ .form-card { background: var(--night); border: 1px solid rgba(176,127,212,.1); padding: 2.5rem; } .form-card h2 { font-family: var(--ff-d); font-size: 2rem; font-weight: 300; color: var(--ivory); margin-bottom: .5rem; } .form-card > p { font-size: .85rem; color: var(--ivory-60); margin-bottom: 2rem; line-height: 1.75; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .form-group { margin-bottom: 1.2rem; } .form-group label { display: block; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ivory-60); margin-bottom: .5rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: .85rem 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--ivory); font-family: var(--ff-b); font-size: .88rem; transition: border-color .25s, background .25s; outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--rose); background: rgba(240,80,122,.05); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--ivory-30); } .form-group select option { background: var(--night); color: var(--ivory); } .form-group textarea { resize: vertical; min-height: 130px; } .form-msg { padding: 1rem 1.2rem; margin-bottom: 1.2rem; font-size: .85rem; } .form-msg.success { background: var(--sage-glow); border: 1px solid rgba(106,184,122,.3); color: var(--sage); } .form-msg.error { background: var(--rose-glow); border: 1px solid rgba(240,80,122,.3); color: var(--rose); } /* Map */ .map-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.06); } .map-wrap iframe { display: block; filter: saturate(1.6) brightness(1.05) contrast(1.05); } /* ── Single project view ─────────── */ .project-detail { max-width: 960px; margin: 0 auto; } .project-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 3rem 0; } .project-meta-card { padding: 1.5rem; background: var(--plum); border: 1px solid rgba(255,255,255,.05); } .project-meta-card .label { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; display: block; } .project-meta-card .value { font-family: var(--ff-d); font-size: 1.1rem; color: var(--ivory); } .project-gallery-grid { columns: 3; column-gap: 3px; } .project-gallery-grid a { break-inside: avoid; display: block; margin-bottom: 3px; } .project-gallery-grid img { width: 100%; display: block; filter: saturate(1.1); } /* Testimonials page card */ .testi-card { padding: 2.5rem; background: var(--plum); border: 1px solid rgba(255,255,255,.04); position: relative; transition: background .3s, border-color .3s; } .testi-card::after { content: '\201C'; position: absolute; top: 1rem; right: 1.5rem; font-family: var(--ff-d); font-size: 5rem; line-height: 1; color: var(--gold); opacity: .07; } .testi-card:hover { background: rgba(24,13,22,.9); border-color: rgba(212,168,67,.12); } .testi-stars { display: flex; gap: .25rem; color: var(--gold); font-size: .72rem; margin-bottom: 1.2rem; } .testi-quote { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 300; font-style: italic; color: var(--ivory); line-height: 1.65; margin-bottom: 2rem; } .testi-client { display: flex; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06); } .testi-av-ph { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: var(--gold-glow); border: 1px solid rgba(212,168,67,.3); display: flex; align-items: center; justify-content: center; font-family: var(--ff-d); font-size: 1.1rem; color: var(--gold); } .testi-av img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .testi-name { font-size: .85rem; font-weight: 500; color: var(--ivory); } .testi-event { font-size: .68rem; color: var(--gold); letter-spacing: .04em; margin-top: .15rem; } /* ══════════════════════════════════ RESPONSIVE ══════════════════════════════════ */ @media (max-width:1024px) { .process-layout { grid-template-columns: 1fr; gap: 3rem; } .process-sticky { position: static; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } .creations-grid { grid-template-columns: 1fr 1fr; } .cr-item { grid-column: span 1 !important; aspect-ratio: 4/3 !important; } .two-col { grid-template-columns: 1fr; gap: 3rem; } .two-col.flip { direction: ltr; } .contact-layout { grid-template-columns: 1fr; } .stats-strip-grid { grid-template-columns: repeat(2, 1fr); } .cards-grid { grid-template-columns: 1fr 1fr; } .projects-grid { grid-template-columns: 1fr 1fr; } .project-meta-grid { grid-template-columns: 1fr 1fr; } } @media (max-width:768px) { .nav-list { display: none; } .hamburger { display: flex; } .occasions-header { flex-direction: column; align-items: flex-start; } .occ-card { flex: 0 0 240px; height: 400px; } .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .stories-grid { grid-template-columns: 1fr; } .creations-grid { grid-template-columns: 1fr; } .ba-slider { aspect-ratio: 4/3; } .hero-actions { flex-direction: column; align-items: center; } .cta-close-actions { flex-direction: column; align-items: center; } .gallery-masonry { columns: 2; } .cards-grid { grid-template-columns: 1fr; } .projects-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .project-meta-grid { grid-template-columns: 1fr; } .project-gallery-grid { columns: 2; } } @media (max-width:480px) { .container { padding: 0 1.25rem; } .gallery-masonry { columns: 1; } .projects-grid { grid-template-columns: 1fr; } .stats-strip-grid { grid-template-columns: repeat(2,1fr); } } /* ══════════════════════════════════════════════ Fancybox v5 — jewel-dark theme + forced image fit The image is constrained to the viewport so it never overflows and hides the backdrop / thumbnails / toolbar. ══════════════════════════════════════════════ */ .fancybox__container { --fancybox-bg: rgba(9, 7, 11, .98); } .fancybox__backdrop { background: rgba(9, 7, 11, .98) !important; } /* Padding around the slide so the image sits inside, not edge-to-edge */ .fancybox__slide { padding: 3vmin 3vmin 0 !important; } /* Force the image to fit fully within the viewport */ .fancybox__content { max-width: 94vw !important; max-height: 86vh !important; } .fancybox-image { max-width: 94vw !important; max-height: 86vh !important; width: auto !important; height: auto !important; object-fit: contain !important; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } /* Caption */ .fancybox__caption { font-family: var(--ff-d); font-size: 1.1rem; letter-spacing: .02em; color: var(--ivory) !important; } /* Thumbnail strip */ .fancybox__thumbs { --f-thumb-width: 84px; --f-thumb-height: 60px; } .fancybox__thumbs.is-classic { --f-thumb-opacity: .4; --f-thumb-hover-opacity: 1; --f-thumb-selected-opacity: 1; } .f-thumbs__slide__button { border-radius: 6px; } /* Buttons themed to ivory */ .fancybox__nav, .fancybox__toolbar { --fancybox-color: #faf5ee; --fancybox-hover-color: #fff; }