@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Italiana&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600&family=Marcellus&family=Montserrat:wght@300;400;500;600&family=Caveat:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap'); /* ============================================================ DARK PEARL — self-contained stylesheet ============================================================ */ /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 20px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scrollbar-width: none; /* default: NO scrollbar (all pages except home) */ } html::-webkit-scrollbar { width: 0; height: 0; display: none; } /* HOME page only () — thin, sharp (square), gold scrollbar, desktop. IMPORTANT (Chromium/Brave): setting the standard scrollbar-width/scrollbar-color properties makes the browser IGNORE all ::-webkit-scrollbar custom styling and render its native thin scrollbar (rounded pill + arrow buttons). So on Chromium we keep them auto and style ONLY via ::-webkit-scrollbar. Firefox (which has no ::-webkit-scrollbar) gets the standard properties inside @supports. */ html.dp_home { scrollbar-width: auto; } /* 4px gutter reserved from first paint (no layout shift), but the gold thumb only appears on the FIRST SCROLL (.dp_scrolled) — by then layout is settled, so the thumb is never seen at a wrong size */ html.dp_home::-webkit-scrollbar { width: 4px; height: 4px; display: block; background-color: var(--deep-teal); } html.dp_home::-webkit-scrollbar-track { background: var(--deep-teal); } html.dp_home::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; } html.dp_home.dp_scrolled::-webkit-scrollbar-thumb { background: rgb(var(--champagne-gold-rgb) / 0.6); } /* sharp, subtle gold */ html.dp_home::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* no arrows */ html.dp_home::-webkit-scrollbar-corner { background: var(--deep-teal); } /* Firefox-only fallback (no ::-webkit-scrollbar support there) */ @supports not selector(::-webkit-scrollbar) { html.dp_home { scrollbar-width: thin; scrollbar-color: transparent var(--deep-teal); } html.dp_home.dp_scrolled { scrollbar-color: rgb(var(--champagne-gold-rgb) / 0.6) var(--deep-teal); } } /* home scrollbar is desktop only — hide on mobile too */ @media (max-width: 860px) { html.dp_home, html.dp_home.dp_scrolled { scrollbar-width: none; } html.dp_home::-webkit-scrollbar, html.dp_home.dp_scrolled::-webkit-scrollbar { width: 0; height: 0; display: none; } } /* clip (not hidden) so body never becomes a scroll container / never blocks vertical scroll on mobile */ html { overflow-x: clip; } body { overflow-x: clip; } @media (max-width: 640px) { html { font-size: 17px; } } body { line-height: 1.5; background: var(--deep-teal); color: var(--warm-ivory); font-family: var(--main-font); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; } ul { list-style: none; } /* Intro curtain — teal screen that slides up off the top on first load */ .dp_intro { position: fixed; inset: 0; background: var(--deep-teal); transform: scaleY(1); transform-origin: top; transition: transform .9s cubic-bezier(.76, 0, .24, 1); z-index: 100000; pointer-events: none; } .dp_intro.is-done { transform: scaleY(0); } @media (prefers-reduced-motion: reduce) { .dp_intro { display: none; } } /* DARK PEARL — BRAND PALETTE OVERRIDE */ /* Deep Teal dominant | Champagne Gold accent | Warm Ivory light base | Near Black */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ html { /* Brand palette */ --deep-teal: #1A3A36; --deep-teal-rgb: 26 58 54; --rich-teal: #22504A; --rich-teal-rgb: 34 80 74; --mid-teal: #2C6860; --mid-teal-rgb: 44 104 96; --lifted-teal: #3A8278; --lifted-teal-rgb: 58 130 120; --champagne-gold: #D4BC8A; --champagne-gold-rgb: 212 188 138; --pale-gold: #E8D5A8; --pale-gold-rgb: 232 213 168; --warm-ivory: #F5EDD6; --warm-ivory-rgb: 245 237 214; --near-black: #111111; --near-black-rgb: 17 17 17; /* Remap theme tokens onto brand palette */ --black: var(--deep-teal); --black-rgb: var(--deep-teal-rgb); --white: var(--warm-ivory); --white-rgb: var(--warm-ivory-rgb); --grey: var(--champagne-gold); --grey-rgb: var(--champagne-gold-rgb); } /* Selection = gold on teal */ ::-moz-selection { color: var(--deep-teal); background: rgb(var(--champagne-gold-rgb) / 90%); } ::selection { color: var(--deep-teal); background: rgb(var(--champagne-gold-rgb) / 90%); } /* Body background stays deep teal via --main-bkg-color = --black */ body { background-color: var(--deep-teal); color: var(--warm-ivory); } /* (scrollbar is defined once at the top — home page only. no body-level rules here.) */ /* Headings — champagne gold for editorial cinematic tone */ :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--warm-ivory); } .text.black :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--deep-teal); } /* Light-mode text blocks (sections with .text.black) sit on ivory */ .text.black { background-color: var(--warm-ivory); color: var(--near-black); } /* CTAs / links accent — champagne gold */ a { color: var(--champagne-gold); } a:hover, a:focus { color: var(--pale-gold); } /* Form / accent buttons */ button, .btn, [type="submit"] { background-color: var(--champagne-gold); color: var(--deep-teal); border-color: var(--champagne-gold); } button:hover, .btn:hover, [type="submit"]:hover { background-color: var(--pale-gold); color: var(--near-black); } /* custom nav/toggle buttons are NOT gold accent buttons — kill the generic bg in every state */ .dp_burger, .dp_burger:hover, .dp_burger:focus, .dp_burger:active, .dp_gal_more_btn, .dp_gal_more_btn:hover, .dp_gal_more_btn:focus { background: none; border: none; color: inherit; -webkit-tap-highlight-color: transparent; } /* Dot/divider elements originally #727272 → mid teal */ #nav_dots .swiper-pagination-bullet, .fake_dots .dot { background-color: var(--mid-teal); } /* Header gradient uses --black-rgb — now teal fade, keeps legibility */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — EDITORIAL SERIF TYPOGRAPHY */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Canela (TRIAL — buy license before production) */ @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-Thin-Trial.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-Light-Trial.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-Regular-Trial.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-Medium-Trial.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-Bold-Trial.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-LightItalic-Trial.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-RegularItalic-Trial.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Canela'; src: url('../fonts/canela/Canela Family/Canela-MediumItalic-Trial.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; } html { --hero-font: 'Canela', 'Italiana', serif; --title-font: 'Canela', 'Bodoni Moda', serif; --main-font: 'Canela', 'Bodoni Moda', serif; --nav-font: 'Montserrat', 'Anek Bangla', sans-serif; } /* Hero title uses Italiana (thin display serif) */ .dp_hero_title, h1.dp_hero_title, .s1 h1.dp_hero_title { font-family: var(--hero-font) !important; font-weight: 400 !important; letter-spacing: 0.03em !important; } /* Editorial refinement on headings — thin, wide, elegant */ :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--title-font) !important; font-weight: 400; letter-spacing: 0.01em; } /* Body copy gets serif weight/leading tuned for readability */ p, .p, li, a, span, div, button, input, textarea, select, label { font-family: var(--main-font); } body { font-family: var(--main-font); font-weight: 400; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Kill handwritten callouts (arrow + cursive text) — off-brand for Dark Pearl */ /* Covers: "Creative in concept, technical in detail", "Style details", any others */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrp_freccetta, .freccia_box { display: none !important; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — HERO (Section 8 / PDF) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_hero { position: relative !important; width: 100% !important; height: 100vh !important; min-height: 640px; overflow: hidden !important; background: var(--deep-teal); display: block !important; } /* Force cover regardless of theme's .bkg_video defaults */ .dp_hero video.bkg_video, .dp_hero .dp_hero_video, video#s1_video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; z-index: 0 !important; transform: none !important; } /* Lighter cinematic veil — preserves footage emotion, adds spot behind copy */ .dp_hero_veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgb(var(--deep-teal-rgb) / 30%) 0%, rgb(var(--deep-teal-rgb) / 10%) 45%, rgb(var(--deep-teal-rgb) / 45%) 100%), linear-gradient(180deg, rgb(var(--deep-teal-rgb) / 25%) 0%, rgb(var(--deep-teal-rgb) / 5%) 40%, rgb(var(--deep-teal-rgb) / 55%) 100%); pointer-events: none; } .dp_hero_inner { position: relative !important; z-index: 2 !important; width: 100%; height: 100%; display: flex !important; flex-direction: column; align-items: center !important; justify-content: center !important; text-align: center; padding-left: 5vw !important; padding-right: 5vw !important; } .dp_hero_copy { max-width: 44rem; color: var(--warm-ivory); text-align: center; margin: 0 auto; text-shadow: 0 2px 24px rgb(0 0 0 / 45%); } /* Staggered cinematic entrance */ @keyframes dpFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes dpFadeIn { from { opacity: 0; } to { opacity: 1; } } .dp_hero_copy > * { opacity: 0; animation: dpFadeUp 1.1s cubic-bezier(.22,.61,.36,1) forwards; } .dp_hero_title { animation-delay: .35s; } .dp_hero_sub { animation-delay: .65s; } .dp_hero_ctas { animation-delay: .95s; } .dp_hero_veil { opacity: 0; animation: dpFadeIn 1.6s ease forwards; } .dp_hero_scroll { opacity: 0; animation: dpFadeIn 1.4s ease .9s forwards; } .dp_hero_eyebrow { font-family: var(--nav-font); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: var(--champagne-gold); margin: 0 0 1.25rem; opacity: 0.95; } .dp_hero_eyebrow { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.62rem !important; letter-spacing: 0.42em !important; text-transform: uppercase !important; color: rgb(var(--champagne-gold-rgb) / 90%) !important; margin: 0 auto 1.5rem !important; display: inline-flex; align-items: center; gap: 0.9rem; opacity: 0.95; } .dp_hero_ebline { display: inline-block; width: 24px; height: 1px; background: rgb(var(--champagne-gold-rgb) / 55%); } .dp_hero_title, h1.dp_hero_title, .s1 h1.dp_hero_title { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(2rem, 3.6vw, 3.2rem) !important; line-height: 1.12 !important; letter-spacing: 0.005em !important; margin: 0 0 1.5rem !important; color: #FBF3DC !important; font-style: normal !important; text-transform: none !important; font-variation-settings: normal !important; text-shadow: 0 2px 28px rgb(0 0 0 / 40%); } .dp_hero_sub { margin: 0 auto 2.5rem !important; color: rgb(var(--warm-ivory-rgb) / 70%) !important; max-width: 28rem; font-size: clamp(0.72rem, 0.82vw, 0.82rem) !important; line-height: 1.7 !important; letter-spacing: 0.08em !important; text-transform: none; font-family: var(--nav-font) !important; font-weight: 300; } .dp_hero_ctas { gap: 1rem; margin: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — FLOATING WHATSAPP */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Kill theme's back-to-top triangle button (sat behind WA float) */ #back_top { display: none !important; } .dp_wa_float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #25D366; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgb(0 0 0 / 22%); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .dp_wa_float:hover { transform: translateY(-1px) scale(1.06); background: #1ebe57; box-shadow: 0 8px 16px rgb(0 0 0 / 30%); color: #ffffff; } .dp_wa_float svg { display: block; width: 16px; height: 16px; } @media (max-width: 640px) { .dp_wa_float { width: 3rem; height: 3rem; right: 1rem; bottom: 1rem; } .dp_wa_float svg { width: 22px; height: 22px; } } .dp_hero_sub { font-family: var(--nav-font); font-weight: 300; font-size: clamp(0.85rem, 1vw, 1rem); line-height: 1.6; max-width: 32rem; margin: 0 auto 2rem; color: rgb(var(--warm-ivory-rgb) / 82%); letter-spacing: 0.02em; } .dp_hero_ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .dp_btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1.1rem; font-family: var(--nav-font); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: none; text-decoration: none; border-radius: 0; border: 1px solid var(--champagne-gold); background: var(--champagne-gold); color: var(--deep-teal); transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; cursor: pointer; line-height: 1; min-width: 0; box-shadow: 0 3px 10px rgb(0 0 0 / 16%); position: relative; overflow: hidden; } .dp_btn:hover { background: transparent; color: var(--warm-ivory); border-color: var(--warm-ivory); transform: translateY(-1px); box-shadow: 0 8px 20px rgb(0 0 0 / 28%); } /* Gold CTA on light (ivory) subpages — hover stays readable */ body.dp_page .dp_btn_gold:hover { background: var(--deep-teal); color: var(--warm-ivory); border-color: var(--deep-teal); } /* WhatsApp green CTA */ .dp_btn.dp_btn_wa { background: #25D366; border-color: #25D366; color: #ffffff; box-shadow: 0 3px 10px rgb(37 211 102 / 30%); } .dp_btn.dp_btn_wa:hover { background: #1ebe57; border-color: #1ebe57; color: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 20px rgb(37 211 102 / 35%); } .dp_btn_wa svg { color: currentColor; opacity: 1; } .dp_hero_meta { font-family: var(--nav-font); font-weight: 300; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--warm-ivory-rgb) / 55%); margin: 0; font-style: normal; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — HEADER / TOP NAV */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_header { position: fixed !important; top: 0; left: 0; width: 100%; z-index: 20 !important; padding: 0.75rem 3vw; background: linear-gradient(to bottom, rgb(var(--deep-teal-rgb) / 55%) 0%, rgb(var(--deep-teal-rgb) / 0%) 100%); pointer-events: none; } .dp_header::before { display: none !important; } .dp_header_inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; pointer-events: auto; } .dp_brand { font-family: var(--title-font); font-size: 0.95rem; letter-spacing: 0.14em; color: var(--warm-ivory); text-decoration: none; justify-self: start; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; } .dp_brand_logo { height: 34px; width: auto; display: block; transition: opacity .25s ease; } .dp_brand:hover .dp_brand_logo { opacity: 0.82; } @media (max-width: 640px) { .dp_brand_logo { height: 26px; } } .dp_nav { display: flex; gap: 1.4rem; justify-self: center; align-items: center; pointer-events: auto; } .dp_nav a { font-family: var(--nav-font); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-ivory); text-decoration: none; opacity: 0.85; transition: opacity .2s ease, color .2s ease; } .dp_nav a:hover { opacity: 1; color: var(--champagne-gold); } .dp_nav_right { justify-self: end; display: flex; align-items: center; } .dp_nav_right a { font-family: var(--nav-font); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-ivory); text-decoration: none; opacity: 0.85; transition: opacity .2s ease, color .2s ease; } .dp_nav_right a:hover { opacity: 1; color: var(--champagne-gold); } /* Hamburger — hidden on desktop */ .dp_burger { display: none; justify-self: end; width: 30px; height: 22px; position: relative; background: none; border: none; padding: 0; cursor: pointer; z-index: 30; pointer-events: auto; } .dp_burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--warm-ivory); transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease, top .35s ease; } .dp_burger span:nth-child(1) { top: 2px; } .dp_burger span:nth-child(2) { top: 10px; } .dp_burger span:nth-child(3) { top: 18px; } body.dp_menu_open .dp_burger span:nth-child(1) { top: 10px; transform: rotate(45deg); } body.dp_menu_open .dp_burger span:nth-child(2) { opacity: 0; } body.dp_menu_open .dp_burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); } @media (max-width: 860px) { .dp_header_inner { grid-template-columns: auto 1fr; } .dp_burger { display: block; grid-column: 2; } /* header must NOT create a containing block, or the fixed nav overlay gets trapped inside the 48px header (backdrop-filter = containing block) */ .dp_header, body.dp_page .dp_header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Fullscreen slide-down menu */ .dp_nav { display: flex !important; position: fixed; inset: 0; width: 100vw; /* grid item has justify-self:center -> force full width */ justify-self: stretch; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; background: var(--deep-teal); /* fully solid — no content bleed through */ overflow: hidden; /* never show a scrollbar inside the menu */ scrollbar-width: none; z-index: 25; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,.61,.36,1), visibility .4s; pointer-events: none; } body.dp_menu_open .dp_nav { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .dp_nav a { font-size: 0.9rem !important; letter-spacing: 0.24em !important; opacity: 0.9; } /* Contact link joins the overlay */ .dp_nav_right { position: fixed; left: 0; right: 0; width: 100vw; /* grid item justify-self:center -> force full width so it centres */ justify-self: stretch; bottom: 18vh; display: flex; justify-content: center; z-index: 26; opacity: 0; visibility: hidden; transition: opacity .4s ease .05s, visibility .4s; pointer-events: none; } body.dp_menu_open .dp_nav_right { opacity: 1; visibility: visible; pointer-events: auto; } .dp_nav_right a { font-size: 0.9rem !important; letter-spacing: 0.24em !important; color: var(--champagne-gold) !important; opacity: 1; } body.dp_menu_open { overflow: hidden; } } /* Nuke legacy hamburger/menu — replaced by dp_header */ .header:not(.dp_header), #hamburger, #close_submenu, #main_nav { display: none !important; } @media (max-width: 640px) { .dp_hero { min-height: 100svh; } .dp_hero_copy { max-width: 100%; } .dp_hero_title { font-size: clamp(1.5rem, 7.5vw, 2.25rem) !important; } .dp_btn { padding: 0.7rem 1.4rem; font-size: 0.66rem; min-width: 0; letter-spacing: 0.16em; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — SCROLL INDICATOR */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_hero_scroll { position: absolute; left: 50%; bottom: 2.25rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; text-decoration: none; color: rgb(var(--warm-ivory-rgb) / 75%); transition: color .25s ease; } .dp_hero_scroll:hover { color: var(--champagne-gold); } .dp_scroll_label { font-family: var(--nav-font); font-weight: 400; font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .dp_scroll_line { width: 1px; height: 28px; background: currentColor; position: relative; overflow: hidden; } .dp_scroll_line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, var(--champagne-gold)); animation: dpScrollDrip 1.8s ease-in-out infinite; } @keyframes dpScrollDrip { 0% { top: -50%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @media (max-width: 640px) { .dp_hero_scroll { bottom: 1.25rem; } .dp_scroll_line { height: 32px; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — PROJECTS SECTION (rebuilt) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_projects { background: var(--warm-ivory) !important; color: var(--deep-teal); padding: 4.5rem 0 3.5rem; overflow: hidden; position: relative; } .dp_projects::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1180px, 88%); height: 1px; background: rgb(var(--deep-teal-rgb) / 15%); } .dp_projects_inner { width: 100%; max-width: none; margin: 0; padding: 0; text-align: center; } .dp_projects_title { font-family: var(--hero-font) !important; font-weight: 400 !important; font-size: clamp(1.6rem, 2.6vw, 2.5rem) !important; line-height: 1.35 !important; letter-spacing: 0.005em !important; color: var(--deep-teal) !important; margin: 0 0 3rem !important; text-transform: none !important; font-style: normal !important; font-variation-settings: normal !important; } .dp_projects_title em { font-family: var(--hero-font); font-style: italic; color: var(--deep-teal); font-weight: 300; } /* Static full-bleed row — subtle gap like reference */ .dp_projects_marquee { width: 100%; overflow: hidden; margin: 0 0 2.5rem; padding: 0 1rem; box-sizing: border-box; } .dp_projects_track { display: flex; align-items: stretch; justify-content: center; gap: 1rem; width: 100%; animation: none !important; } .dp_proj { margin: 0; flex: 0 0 auto; overflow: hidden; background: rgb(var(--deep-teal-rgb) / 6%); height: 42vh; max-height: 340px; min-height: 220px; width: auto; } .dp_proj { position: relative; } .dp_proj img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease; } .dp_proj:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.05)); filter: brightness(0.92); } /* Hover detail overlay — couple name + meta */ .dp_proj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(var(--deep-teal-rgb) / 82%) 100%); opacity: 0; transition: opacity .45s ease; pointer-events: none; z-index: 1; } .dp_proj:hover::after { opacity: 1; } .dp_proj_cap { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.95rem; z-index: 2; display: flex; flex-direction: column; gap: 0.3rem; text-align: left; opacity: 0; transform: translateY(10px); transition: opacity .45s ease .05s, transform .55s cubic-bezier(.22,.61,.36,1) .05s; pointer-events: none; } .dp_proj:hover .dp_proj_cap { opacity: 1; transform: translateY(0); } .dp_proj_name { font-family: 'Canela', 'Italiana', serif; font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.15; color: var(--warm-ivory); letter-spacing: 0.01em; } .dp_proj_meta { font-family: var(--nav-font); font-weight: 400; font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgb(var(--warm-ivory-rgb) / 70%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — SUBPAGES (FAQ / Contact) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ body.dp_page { background: var(--warm-ivory); color: var(--deep-teal); margin: 0; font-family: var(--nav-font); } /* Page hero banner */ .dp_page_hero { position: relative; height: 42vh; min-height: 300px; background: var(--deep-teal); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgb(var(--champagne-gold-rgb) / 15%); } .dp_page_hero_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); } .dp_page_hero_veil { position: absolute; inset: 0; background: rgb(var(--deep-teal-rgb) / 62%); } .dp_page_title { position: relative; z-index: 1; font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important; letter-spacing: 0.02em !important; color: var(--warm-ivory) !important; margin: 0 !important; text-transform: none !important; font-style: normal !important; } /* FAQ accordion */ .dp_faq_wrap { width: min(760px, 88%); margin: 3.5rem auto 4rem; } .dp_faq { border-bottom: 1px solid rgb(var(--deep-teal-rgb) / 15%); padding: 0.25rem 0; } .dp_faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-family: 'Canela', 'Italiana', serif; font-weight: 400; font-size: 1.05rem; color: var(--deep-teal); letter-spacing: 0.01em; transition: color .25s ease; } .dp_faq summary::-webkit-details-marker { display: none; } .dp_faq summary::after { content: "+"; font-family: var(--nav-font); font-weight: 300; font-size: 1.2rem; color: rgb(var(--deep-teal-rgb) / 55%); transition: transform .3s ease, color .25s ease; flex: 0 0 auto; } .dp_faq[open] summary::after { transform: rotate(45deg); color: var(--mid-teal); } .dp_faq summary:hover { color: var(--mid-teal); } .dp_faq p { font-family: var(--nav-font) !important; font-weight: 300 !important; font-size: 0.85rem !important; line-height: 1.8 !important; letter-spacing: 0.02em !important; color: rgb(var(--deep-teal-rgb) / 78%) !important; margin: 0 0 1.25rem !important; max-width: 60ch; } .dp_page_cta { text-align: center; margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .dp_page_cta_line { font-family: 'Canela', 'Italiana', serif !important; font-style: italic !important; font-size: 1rem !important; color: rgb(var(--deep-teal-rgb) / 85%) !important; margin: 0 !important; } /* Contact — two-column editorial layout */ .dp_contact_wrap { width: min(1040px, 90%); margin: 3.5rem auto 4.5rem; display: grid; /* minmax(0, 1fr), not 1fr: an fr track refuses to shrink below its content's min-content width, and the form's is 440px. On a 834px tablet that pushed the whole grid 49px wider than this wrapper and the inputs 8px past the screen edge. */ grid-template-columns: 36% minmax(0, 1fr); gap: 4.5rem; align-items: start; text-align: left; } .dp_contact_side { min-width: 0; } .dp_contact_intro { font-family: 'Canela', 'Italiana', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(0.92rem, 1vw, 1.02rem) !important; line-height: 1.8 !important; color: rgb(var(--deep-teal-rgb) / 88%) !important; margin: 0 0 2.5rem !important; } .dp_contact_block { margin: 0 0 1.9rem; } .dp_contact_label { display: block; font-family: var(--nav-font) !important; font-weight: 500 !important; font-size: 0.56rem !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: rgb(var(--deep-teal-rgb) / 50%) !important; margin: 0 0 0.55rem !important; } .dp_contact_value, .dp_contact_value a { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.82rem !important; line-height: 1.75 !important; letter-spacing: 0.03em !important; color: rgb(var(--deep-teal-rgb) / 85%) !important; margin: 0 !important; text-decoration: none !important; display: inline; } .dp_contact_value { display: block; } .dp_contact_value a { border-bottom: 1px solid rgb(var(--deep-teal-rgb) / 25%); transition: color .25s ease, border-color .25s ease; } .dp_contact_value a:hover { color: var(--mid-teal) !important; border-color: var(--mid-teal); } .dp_contact_socials { display: flex !important; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .dp_contact_socials span { color: rgb(var(--deep-teal-rgb) / 35%); } /* Form */ .dp_form { text-align: left; display: flex; flex-direction: column; gap: 1.1rem; margin: 0 0 1.5rem; } .dp_form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .dp_form label { display: flex; flex-direction: column; gap: 0.45rem; font-family: var(--nav-font); font-weight: 500; font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 65%); } .dp_form input, .dp_form textarea { font-family: var(--nav-font); font-weight: 400; font-size: 0.85rem; color: var(--deep-teal); background: transparent; border: none; border-bottom: 1px solid rgb(var(--deep-teal-rgb) / 30%); padding: 0.5rem 0.1rem; outline: none; transition: border-color .25s ease; border-radius: 0; resize: vertical; } .dp_form input:focus, .dp_form textarea:focus { border-color: var(--mid-teal); } /* The phone number is the only field carrying a placeholder, so a browser-default grey would read as an outlier beside the country code sitting at full strength. Half-strength teal with a little tracking keeps it clearly a hint while still belonging to the same palette as the label above it. */ .dp_form input::placeholder, .dp_form textarea::placeholder { color: rgb(var(--deep-teal-rgb) / 50%); letter-spacing: 0.04em; } /* The wedding date and the country code are both built controls rather than native ones. A browser's calendar and select popups are chrome, not part of the page, so they cannot take the site's colours and arrived as blue system panels in the middle of an ivory form. Everything below is ordinary markup, so it does. */ .dp_form_group { display: flex; flex-direction: column; gap: 0.45rem; } .dp_form_legend { font-family: var(--nav-font); font-weight: 500; font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 65%); } .dp_cc { position: relative; } .dp_cc_btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; font-family: var(--nav-font); font-weight: 400; font-size: 0.85rem; color: var(--deep-teal); background: transparent; border: none; border-bottom: 1px solid rgb(var(--deep-teal-rgb) / 30%); border-radius: 0; padding: 0.5rem 0.1rem; /* inputs use `normal`; the theme's 1.5 on buttons made this row 6px taller */ line-height: normal; cursor: pointer; transition: border-color .25s ease; } .dp_cc_btn:hover { background: transparent; border-bottom-color: rgb(var(--deep-teal-rgb) / 30%); } .dp_cc_btn:focus-visible { outline: none; border-bottom-color: var(--mid-teal); } /* The theme sets a bare `span` to the display serif, which outranks anything these spans would otherwise inherit from their parents. Everything in this field — the code, the country rows, the number — has to read as one control, so state the form font once for the whole subtree. */ .dp_form_tel span { font-family: var(--nav-font); } .dp_cc_val { font-size: 0.85rem; font-weight: 400; line-height: normal; letter-spacing: normal; } .dp_cc_arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgb(var(--deep-teal-rgb) / 55%); transition: transform .2s ease; } .dp_cc.is-open .dp_cc_arrow { transform: rotate(180deg); } .dp_cc_panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max(240px, 100%); background: var(--warm-ivory); border: 1px solid rgb(var(--deep-teal-rgb) / 18%); box-shadow: 0 18px 40px -16px rgb(var(--deep-teal-rgb) / 45%); border-radius: 2px; padding: 0.5rem; } .dp_cc_panel[hidden] { display: none; } .dp_cc_search { width: 100%; font-family: var(--nav-font); font-size: 0.8rem; color: var(--deep-teal); background: transparent; border: none; border-bottom: 1px solid rgb(var(--deep-teal-rgb) / 22%); padding: 0.35rem 0.1rem; outline: none; margin-bottom: 0.35rem; } .dp_cc_list { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; } .dp_cc_list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.4rem; font-family: var(--nav-font); font-size: 0.78rem; color: rgb(var(--deep-teal-rgb) / 85%); cursor: pointer; border-radius: 2px; } .dp_cc_list li[hidden] { display: none; } .dp_cc_list li:hover, .dp_cc_list li.is-active { background: rgb(var(--champagne-gold-rgb) / 30%); color: var(--deep-teal); } .dp_cc_list li[aria-selected="true"] { background: rgb(var(--mid-teal-rgb) / 14%); } .dp_cc_code { color: rgb(var(--deep-teal-rgb) / 55%); font-variant-numeric: tabular-nums; } .dp_cc_empty { margin: 0.4rem; font-family: var(--nav-font); font-size: 0.75rem; color: rgb(var(--deep-teal-rgb) / 50%); } .dp_cc_empty[hidden] { display: none; } /* Wedding date picker. The trigger is built to sit level with the plain inputs beside it, so the row reads as one set of fields rather than a button dropped into a form. */ .dp_dp { position: relative; } .dp_dp_btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-family: var(--nav-font); font-weight: 400; font-size: 0.85rem; color: var(--deep-teal); text-align: left; background: transparent; border: none; border-bottom: 1px solid rgb(var(--deep-teal-rgb) / 30%); border-radius: 0; padding: 0.5rem 0.1rem; /* matches the plain inputs beside it; see the note on .dp_cc_btn */ line-height: normal; cursor: pointer; transition: border-color .25s ease; } .dp_dp_btn:hover { background: transparent; border-bottom-color: rgb(var(--deep-teal-rgb) / 30%); } .dp_dp_btn:focus-visible { outline: none; border-bottom-color: var(--mid-teal); } .dp_dp.is-open .dp_dp_btn { border-bottom-color: var(--mid-teal); } /* The theme puts a bare `span` on the display serif, so say the form font here the same way the phone field does. Empty reads at the placeholder's weight. */ .dp_dp_val { font-family: var(--nav-font); font-size: 0.85rem; line-height: normal; letter-spacing: normal; } .dp_dp_val.is-empty { color: rgb(var(--deep-teal-rgb) / 50%); letter-spacing: 0.04em; } .dp_dp_icon { display: flex; color: rgb(var(--deep-teal-rgb) / 55%); transition: color .25s ease; } .dp_dp_icon svg { width: 15px; height: 15px; } .dp_dp_btn:hover .dp_dp_icon { color: var(--mid-teal); } .dp_dp_panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max(268px, 100%); background: var(--warm-ivory); border: 1px solid rgb(var(--deep-teal-rgb) / 18%); box-shadow: 0 18px 40px -16px rgb(var(--deep-teal-rgb) / 45%); border-radius: 2px; padding: 0.7rem; } .dp_dp_panel[hidden] { display: none; } .dp_dp_head { display: flex; align-items: center; gap: 0.15rem; margin-bottom: 0.55rem; } /* The title takes the free space so the two arrow pairs settle at the edges. */ .dp_dp_title { flex: 1; text-align: center; font-family: var(--nav-font); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep-teal); } .dp_dp_nav { background: transparent; border: none; border-radius: 2px; padding: 0.15rem 0.3rem; font-size: 0.85rem; line-height: 1; color: rgb(var(--deep-teal-rgb) / 55%); cursor: pointer; transition: background .2s ease, color .2s ease; } .dp_dp_nav:hover { background: rgb(var(--champagne-gold-rgb) / 30%); color: var(--deep-teal); } .dp_dp_nav:focus-visible { outline: 1px solid var(--mid-teal); outline-offset: 1px; } .dp_dp_dows, .dp_dp_grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp_dp_dows { margin-bottom: 0.3rem; font-family: var(--nav-font); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 45%); text-align: center; } .dp_dp_day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--nav-font); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: rgb(var(--deep-teal-rgb) / 85%); background: transparent; border: none; border-radius: 2px; padding: 0; cursor: pointer; transition: background .18s ease, color .18s ease; } .dp_dp_day:hover { background: rgb(var(--champagne-gold-rgb) / 30%); color: var(--deep-teal); } .dp_dp_day:focus-visible { outline: 1px solid var(--mid-teal); outline-offset: -1px; } /* Days spilling in from the neighbouring months stay legible but recede, so the month on show reads as a block. */ .dp_dp_day.is-outside { color: rgb(var(--deep-teal-rgb) / 30%); } .dp_dp_day.is-today { box-shadow: inset 0 0 0 1px rgb(var(--mid-teal-rgb) / 45%); } .dp_dp_day.is-selected, .dp_dp_day.is-selected:hover { background: var(--mid-teal); color: var(--warm-ivory); } .dp_dp_foot { display: flex; justify-content: space-between; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid rgb(var(--deep-teal-rgb) / 12%); } .dp_dp_link { background: transparent; border: none; padding: 0.1rem; font-family: var(--nav-font); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 55%); cursor: pointer; transition: color .2s ease; } .dp_dp_link:hover { color: var(--mid-teal); } .dp_dp_link:focus-visible { outline: 1px solid var(--mid-teal); outline-offset: 2px; } /* Phone: a country code beside the number rather than one free-text field. A fixed narrow track for the code, and minmax(0, 1fr) for the number so it can shrink inside the form's grid column instead of forcing the row wider. */ .dp_form_tel { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.6rem; align-items: end; } .dp_form_actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 0.75rem; } .dp_form_wa { font-family: var(--nav-font); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.08em; color: rgb(var(--deep-teal-rgb) / 65%); text-decoration: underline; text-underline-offset: 3px; transition: color .25s ease; } .dp_form_wa:hover { color: var(--mid-teal); } .dp_contact_note { font-family: var(--nav-font) !important; font-weight: 300 !important; font-size: 0.64rem !important; letter-spacing: 0.06em !important; color: rgb(var(--deep-teal-rgb) / 75%) !important; margin: 1.25rem 0 0 !important; /* The cue floats to the column edge, so a ragged line above it ended short and the two right edges did not line up. Justifying closes the gap; the wrapped line here is long enough that it costs under 2px per word space. The last line stays ragged, which is where the cue sits. */ text-align: justify; } /* The cue sits at the end of the note's last line. A right float declared after the text lands on whatever line is current when it is reached, which is the last one, so the note keeps the full column width instead of being squeezed into a narrower flex track and wrapping an extra time. It takes the note's family, size and tracking so the row reads as one line of text; the green is what marks it as the part you can click. */ .dp_contact_cal { float: right; display: inline-block; margin-left: 1.5rem; padding: 0; background: transparent; border: none; font-family: var(--nav-font); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.06em; line-height: 1.7; white-space: nowrap; color: var(--mid-teal); cursor: pointer; transition: color .25s ease; } .dp_contact_cal:hover { color: var(--deep-teal); } .dp_contact_cal:focus-visible { outline: 1px solid var(--mid-teal); outline-offset: 3px; } /* No room beside the text on a phone, so it drops below and keeps to the left edge with everything else. The padding is a tap target at that size. */ @media (max-width: 560px) { .dp_contact_cal { float: none; /* block-level flex, so it breaks onto its own line instead of trailing the sentence; fit-content keeps the tap area on the label, not the column */ display: flex; width: fit-content; margin: 0.4rem 0 0; padding: 0.3rem 0.3rem 0.3rem 0; } } /* Shared page lead paragraph */ .dp_page_lead { font-family: 'Canela', 'Italiana', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important; line-height: 1.8 !important; color: rgb(var(--deep-teal-rgb) / 85%) !important; max-width: 46rem; margin: 0 auto 3rem !important; text-align: center; } .dp_page_hero--tall { height: 56vh; min-height: 380px; } /* ---- FILMS ---- */ .dp_films_wrap { width: min(1080px, 90%); margin: 3.5rem auto 4.5rem; } .dp_films_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .dp_film_card { min-width: 0; } .dp_film_poster { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(var(--deep-teal-rgb) / 8%); } .dp_film_poster img { width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); display: block; transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease; } .dp_film_poster:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.04)); filter: brightness(0.85); } .dp_film_play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgb(var(--warm-ivory-rgb) / 85%); background: rgb(var(--deep-teal-rgb) / 35%); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--warm-ivory); transition: background-color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1); } .dp_film_poster:hover .dp_film_play { background: rgb(var(--champagne-gold-rgb) / 85%); color: var(--deep-teal); transform: translate(-50%, -50%) scale(1.08); } .dp_film_meta { text-align: center; margin-top: 1.1rem; } .dp_film_title { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: 1.15rem !important; color: var(--deep-teal) !important; margin: 0 0 0.3rem !important; text-transform: none !important; } .dp_film_sub { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.58rem !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: rgb(var(--deep-teal-rgb) / 55%) !important; margin: 0 !important; } /* ---- PORTFOLIO ---- */ .dp_pf_wrap { width: min(1180px, 92%); margin: 3.5rem auto 4.5rem; } .dp_pf_section { margin: 0 0 4rem; } .dp_pf_title { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(1.3rem, 1.9vw, 1.8rem) !important; color: var(--deep-teal) !important; margin: 0 0 0.4rem !important; text-align: center; text-transform: none !important; } .dp_pf_note { font-family: var(--nav-font) !important; font-weight: 300 !important; font-size: 0.68rem !important; letter-spacing: 0.14em !important; color: rgb(var(--deep-teal-rgb) / 55%) !important; text-align: center; margin: 0 0 1.75rem !important; } .dp_pf_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .dp_pf_item { margin: 0; position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: rgb(var(--deep-teal-rgb) / 6%); } .dp_pf_item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22,.61,.36,1); } .dp_pf_item:hover img { transform: scale(1.05); } .dp_pf_cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem 1rem 0.85rem; background: linear-gradient(180deg, transparent, rgb(var(--deep-teal-rgb) / 80%)); font-family: 'Canela', 'Italiana', serif; font-style: italic; font-size: 0.82rem; color: var(--warm-ivory); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,.61,.36,1); } .dp_pf_item:hover .dp_pf_cap { opacity: 1; transform: translateY(0); } /* ---- PORTFOLIO GALLERY (even 3-column mosaic grid) ---- */ .dp_gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 0.5rem; margin: 0; } .dp_gallery_clip { position: relative; margin: 0; } /* collapsed: clip the masonry, then fade its OWN alpha to transparent at the bottom with a mask. Masking the content (not an overlay on top) means the images and their cut edges dissolve together — no hairline, no overlay seam, and nothing re-samples during scroll. */ .dp_gallery_clip:not(.is-open) { max-height: 150vh; overflow: hidden; /* long gentle fade that reaches FULLY transparent just above the clip bottom — even across columns, with only a small empty band before the divider */ -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 300px), transparent calc(100% - 24px)); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 300px), transparent calc(100% - 24px)); } /* toggle sits just BELOW the gallery on clean ivory — never over the images */ .dp_gallery_clip + .dp_gal_toggle { margin-top: 0; } /* expanded: no fade band, so add a little breathing room above the divider */ .dp_gallery_clip.is-open + .dp_gal_toggle { margin-top: 1.75rem; } .dp_gal_item { position: relative; overflow: hidden; background: rgb(var(--deep-teal-rgb) / 6%); aspect-ratio: 4 / 5; } .dp_gal_item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease; } /* landscape tiles span two columns. aspect-ratio:auto cancels the portrait ratio so they stretch to the row height set by the portrait sharing the row -> every row stays exactly level */ .dp_gal_wide { grid-column: span 2; aspect-ratio: auto; } .dp_gal_item:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.04)); filter: brightness(0.85); } .dp_gal_item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(var(--deep-teal-rgb) / 82%) 100%); opacity: 0; transition: opacity .45s ease; pointer-events: none; } .dp_gal_item:hover::after { opacity: 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — FILM POPUP */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_vid { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; /* pointer-events as well as visibility: the visibility flip is delayed until the fade finishes, so on its own an interrupted fade would leave an invisible full-screen layer swallowing clicks */ pointer-events: none; transition: opacity .32s ease, visibility 0s linear .32s; } .dp_vid.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .32s ease; } .dp_vid_backdrop { position: absolute; inset: 0; background: rgb(var(--deep-teal-rgb) / 97%); } .dp_vid_frame { position: relative; z-index: 1; width: min(1100px, 92vw); } /* 16:9 box the player fills, so the popup does not resize as the film loads */ .dp_vid_stage { position: relative; aspect-ratio: 16 / 9; background: #0f2b28; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 70px rgb(0 0 0 / 45%); display: flex; align-items: center; justify-content: center; } .dp_vid_stage iframe, .dp_vid_stage video { width: 100%; height: 100%; border: 0; display: block; } .dp_vid_soon { margin: 0; font-family: var(--nav-font); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--warm-ivory-rgb) / 62%); } .dp_vid_title { margin: 0.9rem 0 0; text-align: center; font-family: 'Canela', 'Italiana', serif; font-style: italic; font-size: 1.05rem; color: var(--warm-ivory); } .dp_vid_close { position: absolute; z-index: 2; top: 1.1rem; right: 1.4rem; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0.6rem; color: rgb(var(--warm-ivory-rgb) / 72%); cursor: pointer; transition: color .25s ease; } .dp_vid_close:hover { color: var(--champagne-gold); background: none; } .dp_vid_close:focus-visible { outline: 1px solid var(--champagne-gold); outline-offset: 2px; } @media (max-width: 640px) { .dp_vid_frame { width: 94vw; } .dp_vid_close { top: 0.8rem; right: 0.9rem; } .dp_vid_title { font-size: 0.95rem; } } @media (prefers-reduced-motion: reduce) { .dp_vid, .dp_vid.is-open, .dp_vid_close { transition: none; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — GALLERY LIGHTBOX */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_gal_item { cursor: zoom-in; } .dp_gal_item:focus { outline: none; } .dp_gal_item:focus-visible { outline: 1px solid var(--champagne-gold); outline-offset: 4px; } /* Sits above the header (26) and the WhatsApp float (50); the intro curtain (100000) still wins, though it only exists on the home page. */ .dp_lb { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; opacity: 0; /* visibility rather than display: it fades, and it still drops the three controls out of the tab order while closed */ visibility: hidden; /* Belt and braces with the visibility above. That flip is delayed until the fade ends, so it depends on the transition actually completing; this does not. Without it, an interrupted fade would leave a transparent full-screen layer swallowing every click on the page. */ pointer-events: none; transition: opacity .32s ease, visibility 0s linear .32s; } .dp_lb.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .32s ease; } .dp_lb_backdrop { position: absolute; inset: 0; background: rgb(var(--deep-teal-rgb) / 97%); } .dp_lb_stage { position: relative; z-index: 1; max-width: 92vw; max-height: 84vh; display: flex; pointer-events: none; /* clicks either side of the photo fall through to the backdrop and close */ } .dp_lb_img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 70px rgb(0 0 0 / 45%); pointer-events: none; } /* Only the photo itself takes clicks back off the transparent stage, so a click beside it reaches the backdrop and closes. Scoped to .is-open because pointer-events:auto on a descendant overrides a `none` ancestor, which would otherwise leave the photo clickable while the lightbox is shut. */ .dp_lb.is-open .dp_lb_img { pointer-events: auto; } /* Controls — thin gold strokes, no chrome, matching the site's line work */ .dp_lb_close, .dp_lb_nav { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0.6rem; color: rgb(var(--warm-ivory-rgb) / 72%); cursor: pointer; transition: color .25s ease, transform .25s ease; } .dp_lb_close:hover, .dp_lb_nav:hover { color: var(--champagne-gold); background: none; } .dp_lb_close:focus-visible, .dp_lb_nav:focus-visible { outline: 1px solid var(--champagne-gold); outline-offset: 2px; } .dp_lb_close { top: 1.1rem; right: 1.4rem; } .dp_lb_nav { top: 50%; transform: translateY(-50%); } .dp_lb_prev { left: 1.1rem; } .dp_lb_next { right: 1.1rem; } .dp_lb_prev:hover { transform: translateY(-50%) translateX(-3px); } .dp_lb_next:hover { transform: translateY(-50%) translateX(3px); } .dp_lb_count { position: absolute; z-index: 2; left: 50%; bottom: 1.5rem; transform: translateX(-50%); margin: 0; font-size: 0.7rem; letter-spacing: 0.22em; color: rgb(var(--champagne-gold-rgb) / 70%); } @media (max-width: 640px) { /* Arrows move off the photo's edges and onto the bottom bar, flanking the counter, so they never sit over the picture on a narrow screen. */ .dp_lb_stage, .dp_lb_img { max-width: 100vw; max-height: 74vh; } .dp_lb_nav { top: auto; bottom: 1rem; transform: none; } .dp_lb_prev { left: 22%; } .dp_lb_next { right: 22%; } .dp_lb_prev:hover { transform: none; } .dp_lb_next:hover { transform: none; } .dp_lb_close { top: 0.8rem; right: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .dp_lb, .dp_lb.is-open { transition: none; } .dp_lb_close, .dp_lb_nav { transition: none; } .dp_lb_prev:hover, .dp_lb_next:hover { transform: translateY(-50%); } } /* all items always render; the clip wrapper controls collapse */ .dp_gal_toggle { display: flex; justify-content: center; margin: 0 0 4rem; } /* View More as a line-flanked divider label (matches the site's SEE MORE style) */ .dp_gal_more_btn { display: flex; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; max-width: 420px; margin: 0 auto; padding: 0; background: none; border: 0; cursor: pointer; } .dp_gal_line { flex: 1; height: 1px; background: rgb(var(--deep-teal-rgb) / 30%); } .dp_gal_label { font-family: var(--nav-font); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--deep-teal); white-space: nowrap; transition: color .25s ease, letter-spacing .3s ease; } .dp_gal_more_btn:hover .dp_gal_label { color: var(--mid-teal); letter-spacing: 0.38em; } @media (max-width: 900px) { .dp_gallery { grid-template-columns: repeat(2, 1fr); } .dp_gal_wide { grid-column: span 1; aspect-ratio: 4 / 5; } } @media (max-width: 520px) { .dp_gallery { grid-template-columns: 1fr; } } /* ---- STORY ---- */ .dp_story_head { position: relative; z-index: 1; text-align: center; } .dp_story_eyebrow { font-family: var(--nav-font) !important; font-weight: 500 !important; font-size: 0.58rem !important; letter-spacing: 0.4em !important; text-transform: uppercase !important; color: var(--champagne-gold) !important; margin: 0 0 0.9rem !important; } .dp_story_meta { font-family: var(--nav-font) !important; font-weight: 300 !important; font-size: 0.62rem !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: rgb(var(--warm-ivory-rgb) / 70%) !important; margin: 0.9rem 0 0 !important; } .dp_story_wrap { width: min(920px, 90%); margin: 3.5rem auto 4.5rem; } .dp_story_why { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.68rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgb(var(--deep-teal-rgb) / 55%) !important; text-align: center; max-width: 40rem; margin: 0 auto 2.5rem !important; line-height: 1.9 !important; } .dp_story_body p { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important; line-height: 1.85 !important; color: rgb(var(--deep-teal-rgb) / 88%) !important; max-width: 40rem; margin: 0 auto 2.5rem !important; text-align: center; } .dp_story_row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0 0 2.5rem; } /* More Wedding Stories — compact related-story cards (top of story pages) */ /* Deliberately the widest band on the site, and wider than the article it follows. Four cards at the ~330px they read well at need roughly 1350px once the gaps are counted; anything narrower shrinks them to thumbnails. Reading measure is not a concern here — the row is images, not text. */ .dp_more_stories { width: min(1400px, 92%); margin: 3.5rem auto 1rem; text-align: center; } .dp_more_stories .dp_sec_eyebrow { margin-bottom: 0.4rem; } /* Flex, not a fixed column count, because the number of cards is whatever the CMS leaves behind: five stories show four here, four show three, and so on. A repeat(4, 1fr) grid left three cards hugging the left edge against an empty fourth column. Cards share the row evenly, cap at 340px so a short row does not balloon, and stay centred whatever the count. */ .dp_more_grid { display: flex; justify-content: center; gap: 0.9rem; margin-top: 1.1rem; } .dp_more_card { flex: 1 1 0; min-width: 0; max-width: 340px; position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: rgb(var(--deep-teal-rgb) / 6%); } .dp_more_card img { width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); transition: transform .8s cubic-bezier(.22,.61,.36,1); } .dp_more_card:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.05)); } .dp_more_card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(var(--deep-teal-rgb) / 72%) 100%); } .dp_more_name { position: absolute; left: 0; right: 0; bottom: 0.75rem; z-index: 1; font-family: 'Canela', 'Italiana', serif; font-style: italic; font-size: 1.1rem; color: var(--warm-ivory); } /* Four across only holds on a full-width screen. Below that they go two up — still side by side, and two rows of two rather than four stacked, which on a phone would add roughly 480px of scrolling to the end of every story. */ /* Two up below 900px. max-width matches the basis so an odd card left on the last row stays half-width and centred rather than stretching full width. */ @media (max-width: 900px) { .dp_more_grid { flex-wrap: wrap; } .dp_more_card { flex: 1 1 calc(50% - 0.45rem); max-width: calc(50% - 0.45rem); } } /* Two up on a phone leaves 161px cards, where "Avinash & Shravya" rendered at 155px — six pixels from wrapping. Trimming the name buys enough room that a longer couple name entered later still sits on one line. */ @media (max-width: 640px) { .dp_more_name { font-size: 0.95rem; } } /* ---- BLOG / JOURNAL ---- */ .dp_blog_wrap { width: min(1080px, 90%); margin: 3rem auto 4.5rem; } .dp_blog_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; margin-top: 2.5rem; } .dp_blog_card { display: flex; flex-direction: column; } .dp_blog_thumb { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: rgb(var(--deep-teal-rgb) / 6%); margin-bottom: 1rem; } .dp_blog_thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); transition: transform .8s cubic-bezier(.22,.61,.36,1); } .dp_blog_card:hover .dp_blog_thumb img { transform: scale(calc(var(--dp-zoom, 1) * 1.05)); } .dp_blog_meta_top { display: flex; justify-content: space-between; align-items: center; font-family: var(--nav-font); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.55rem; } .dp_blog_cat { color: var(--mid-teal); font-weight: 500; } .dp_blog_date { color: rgb(var(--deep-teal-rgb) / 55%); } .dp_blog_title { font-family: 'Canela', 'Italiana', serif; font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--deep-teal); margin-bottom: 0.6rem; } .dp_blog_title a { color: inherit; transition: color .25s ease; } .dp_blog_title a:hover { color: var(--mid-teal); } .dp_blog_excerpt { font-family: var(--nav-font); font-weight: 400; font-size: 0.82rem; line-height: 1.7; color: rgb(var(--deep-teal-rgb) / 85%); margin-bottom: 0.95rem; } /* margin-top: auto pushes the link to the bottom of the card, so the links line up across the row regardless of how long each title or excerpt runs */ .dp_blog_more { font-family: var(--nav-font); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--deep-teal); align-self: flex-start; margin-top: auto; } .dp_blog_more::after { content: ""; display: block; height: 1px; background: currentColor; margin-top: 4px; width: 100%; transition: width .3s ease; } .dp_blog_card:hover .dp_blog_more::after { width: 55%; } @media (max-width: 900px) { .dp_blog_grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .dp_blog_grid { grid-template-columns: 1fr; } } /* blog article (post page) */ .dp_article { width: min(720px, 90%); margin: 3rem auto 3rem; } .dp_article .dp_sec_eyebrow { text-align: center; margin-bottom: 0.6rem; } .dp_article p { font-family: var(--nav-font); font-weight: 400; font-size: 0.95rem; line-height: 1.9; color: rgb(var(--deep-teal-rgb) / 90%); margin: 0 0 1.5rem; } .dp_article h2 { font-family: 'Canela', 'Italiana', serif; font-weight: 400; font-size: 1.5rem; color: var(--deep-teal); margin: 2.25rem 0 1rem; } .dp_article blockquote { font-family: 'Canela', 'Italiana', serif; font-style: italic; font-size: 1.4rem; line-height: 1.55; color: var(--deep-teal); text-align: center; margin: 2.5rem auto; max-width: 34rem; } /* Journal posts are authored in markdown now, which wraps quote text in a

. Without this, .dp_article p above wins on the inner element and the pull quote renders as body copy. */ .dp_article blockquote p { font: inherit; color: inherit; margin: 0; } .dp_article_back { display: inline-block; margin-top: 0.5rem; font-family: var(--nav-font); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 70%); transition: color .25s ease; } .dp_article_back:hover { color: var(--mid-teal); } .dp_story_row--offset { grid-template-columns: 1fr 1fr; align-items: start; } .dp_story_img { margin: 0; overflow: hidden; aspect-ratio: 3 / 3.6; background: rgb(var(--deep-teal-rgb) / 6%); } .dp_story_img--wide { aspect-ratio: 16 / 9; margin-bottom: 2.5rem; } .dp_story_img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); display: block; transition: transform 1s cubic-bezier(.22,.61,.36,1); } .dp_story_img:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.03)); } .dp_story_quote { font-family: 'Canela', 'Italiana', serif !important; font-style: italic !important; font-weight: 300 !important; font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important; line-height: 1.65 !important; color: var(--deep-teal) !important; text-align: center; max-width: 38rem; margin: 0 auto 2.5rem !important; padding: 0 !important; border: none !important; quotes: none; } .dp_story_quote::before, .dp_story_quote::after { content: none !important; } .dp_story_quote span { display: block; margin-top: 1rem; font-family: var(--nav-font); font-style: normal; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 55%); } /* ---- DELIVERABLES ---- */ .dp_dl_wrap { width: min(760px, 88%); margin: 3.5rem auto 4.5rem; text-align: center; } .dp_dl_block { margin: 0 0 3.5rem; } .dp_dl_title { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(1.2rem, 1.7vw, 1.6rem) !important; color: var(--deep-teal) !important; margin: 0 0 1.25rem !important; text-transform: none !important; } .dp_dl_title span { display: block; font-family: var(--nav-font); font-weight: 400; font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 50%); margin-top: 0.5rem; } .dp_dl_text { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.88rem !important; line-height: 1.85 !important; color: rgb(var(--deep-teal-rgb) / 92%) !important; max-width: 40rem; margin: 0 auto 1.75rem !important; } .dp_dl_text em { font-style: italic; color: rgb(var(--deep-teal-rgb) / 55%); } .dp_dl_cards { display: flex; justify-content: center; gap: 1.25rem; } .dp_dl_card { border: 1px solid rgb(var(--deep-teal-rgb) / 20%); padding: 1.5rem 2.25rem; display: flex; flex-direction: column; gap: 0.45rem; min-width: 190px; } .dp_dl_num { font-family: 'Canela', 'Italiana', serif; font-weight: 400; font-size: 2rem; color: var(--deep-teal); line-height: 1; } .dp_dl_lbl { font-family: var(--nav-font); font-weight: 400; font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 55%); } .dp_dl_quote { font-family: 'Canela', 'Italiana', serif !important; font-style: italic !important; font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important; color: var(--deep-teal) !important; margin: 0 0 1.25rem !important; } .dp_dl_list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.5rem; } .dp_dl_list li { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.62rem !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--deep-teal) !important; padding: 0.55rem 1.1rem; border: 1px solid rgb(var(--champagne-gold-rgb) / 60%); line-height: 1 !important; } .dp_dl_note, .dp_dl_tnc { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.66rem !important; letter-spacing: 0.06em !important; color: rgb(var(--deep-teal-rgb) / 68%) !important; margin: 0 !important; } .dp_dl_tnc { margin-top: 0.9rem !important; } @media (max-width: 900px) { .dp_films_grid { grid-template-columns: 1fr; gap: 2rem; width: min(420px, 100%); margin: 0 auto; } .dp_pf_grid { grid-template-columns: repeat(2, 1fr); } .dp_story_row, .dp_story_row--offset { grid-template-columns: 1fr; } .dp_dl_cards { flex-direction: column; align-items: center; } } /* ---- ABOUT PAGE ---- */ /* The 1080px cap left 180px of empty margin each side on a 1440 laptop and 420px on a 1920 monitor, which read as dead space rather than as breathing room. Only the pixel cap moves: the 90% still binds on anything under ~1333px wide, so phones and tablets keep exactly the gutters they had. */ .dp_ab_wrap { width: min(1200px, 90%); margin: 0 auto 4.5rem; } .dp_ab_title { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(1.4rem, 2.1vw, 2rem) !important; line-height: 1.25 !important; color: var(--deep-teal) !important; margin: 0 0 1.5rem !important; text-transform: none !important; font-style: normal !important; font-variation-settings: normal !important; } .dp_ab_title em { font-family: 'Canela', 'Italiana', serif; font-style: italic; font-weight: 300; color: var(--mid-teal); } .dp_ab_title--center { text-align: center; } /* Founder */ /* Three columns with the portrait held between them: story on the left, photo in the middle, the founder note on the right. It lives OUTSIDE .dp_ab_wrap in the markup so it can run to 92% of the viewport — roughly 58px of margin at 1440 — while the sections below it stay in the 1200px column. Breaking out with negative margins instead would have measured against the scrollbar and risked a horizontal overflow. The 1700px cap stops the two text columns sprawling on an ultra-wide monitor; the paragraphs also carry their own measure limit, so nothing gets unreadable before it gets there. */ .dp_ab_founder { width: min(1700px, 92%); margin: 3.5rem auto 4.5rem; display: grid; /* The centre column is the NARROWEST of the three, which looks wrong written down and is right on screen: the photograph is portrait, so its height is derived from its width. At 1.1fr it stood 557px tall against 435px of text and swamped both columns. Narrowing it brings its height back in line with the copy either side. */ grid-template-columns: 1fr 0.8fr 1fr; gap: clamp(1.5rem, 3vw, 3.5rem); /* start, not center: it puts "The Story" and "Founder-Led" on the same line as each other and as the top of the photograph. Centring left the two labels 21px out of step, which reads as a mistake rather than a choice. */ align-items: start; } /* Three columns need real width, and the threshold is 1600 rather than 1200 because of how the two sides move against each other: the photograph takes its height from its column width, while the text columns get TALLER as they get narrower. They can only agree at one width, and the copy is set for the wide layout — the text overhangs the photo by 124px at 1600 and 230px at 1440. Below 1600 the spread stops being worth it, so it stacks, and the photo is capped there so a full-width column does not blow it up past a thousand pixels tall. */ @media (max-width: 1600px) { .dp_ab_founder { grid-template-columns: 1fr; gap: 2.5rem; width: min(1100px, 90%); } .dp_ab_founder_img { width: 100%; max-width: 420px; margin-inline: auto; } } /* The founder portrait uses the site's own polaroid, the same one behind the home-page testimonials. Everything below only adapts it to sitting in normal flow — none of the .dp_polaroid rules themselves are touched, so the testimonial stack is unaffected. Three things have to be undone. The polaroid is absolutely positioned and starts transparent because it lives in a crossfading stack; here it is a single card in the grid. And .dp_polaroid_img sizes itself as "height: calc(100% - 1.9rem)", which needs a parent of definite height — in flow there is none, so the picture area takes an aspect ratio instead and the card's height follows from it. */ .dp_ab_founder_img.dp_polaroid { position: relative; inset: auto; opacity: 1; /* Centring belongs here, not only in the two width-specific blocks that used to carry it — between 861 and 1600 neither applied and the card sat hard against the left of its column, where the reveal animation's -56px slide then pushed it off the screen edge. */ justify-self: center; } .dp_ab_founder_img .dp_polaroid_img { height: auto; /* 3/3.8 keeps the card wide and short. That is 16% shorter than the 2:3 photograph it holds, so cover does trim it — the framing below is set to take that off the bottom rather than the face. The phone override stays at 2:3, where there is room for the full frame. */ aspect-ratio: 3 / 3.8; } /* Showing the whole photograph made the card 20% taller than the copy beside it, which is the imbalance that prompted narrowing this column in the first place. Capping the width brings the height back to where it was without cropping anything: the card sizes from its picture, so a narrower card is a shorter one. Only in the three-column layout — stacked, the 420px cap already applies. */ @media (min-width: 1601px) { /* justify-self rather than auto margins: the card is a grid item whose width is capped by max-width, and in that state the browser leaves it aligned to the start instead of letting auto margins absorb the slack — verified by forcing margin:auto inline, which also failed to move it. */ .dp_ab_founder_img.dp_polaroid { max-width: 100%; justify-self: center; } } /* A gentler zoom than the testimonials' 12s drift, which would feel broken on a hover that lasts a moment. */ .dp_ab_founder_img .dp_polaroid_img img { transition: transform 1s cubic-bezier(.22,.61,.36,1); } .dp_ab_founder_img:hover .dp_polaroid_img img { transform: scale(calc(var(--dp-zoom, 1) * 1.03)); } .dp_ab_founder_lead .dp_sec_eyebrow, .dp_ab_founder_more .dp_sec_eyebrow { margin-bottom: 1rem !important; } .dp_ab_founder_lead p, .dp_ab_founder_more p { font-family: var(--nav-font) !important; font-weight: 300 !important; font-size: 0.85rem !important; line-height: 1.85 !important; letter-spacing: 0.02em !important; color: rgb(var(--deep-teal-rgb) / 80%) !important; margin: 0 0 1.2rem !important; max-width: 34rem; } /* Why grid */ /* Matches .dp_ab_founder above it. At 1200 inside the old wrapper this section sat in 360px margins while the story above ran in 110px, so the page visibly narrowed by 250px a third of the way down — which is most of what read as dead space. The columns go from 360px to 527px with it. */ .dp_ab_why { width: min(1700px, 92%); margin: 0 auto 4.5rem; text-align: center; } /* Follows the story section down when that stacks, so the page keeps one width instead of stepping 1100 -> 1325 -> 1200 on the way past. Placed directly after the rule it overrides: a media query adds no specificity, so sitting above it would silently lose. */ @media (max-width: 1600px) { .dp_ab_why { width: min(1100px, 90%); } } .dp_ab_why .dp_sec_eyebrow { margin-bottom: 0.9rem !important; } .dp_ab_why_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; margin-top: 2.5rem; text-align: left; } .dp_ab_why_num { display: block; font-family: 'Canela', 'Italiana', serif; font-style: italic; font-weight: 300; font-size: 1.5rem; color: rgb(var(--champagne-gold-rgb) / 90%); margin: 0 0 0.6rem; } .dp_ab_why_item h3 { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: 1rem !important; color: var(--deep-teal) !important; margin: 0 0 0.5rem !important; text-transform: none !important; line-height: 1.3 !important; } .dp_ab_why_item p { font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.82rem !important; line-height: 1.7 !important; color: rgb(var(--deep-teal-rgb) / 88%) !important; margin: 0 !important; } /* Values strip */ .dp_ab_values { width: min(1700px, 92%); background: var(--deep-teal); /* 4.5rem to match the story and the grid it now sits between, so the three blocks are evenly spaced rather than 90/70/90 */ margin: 0 auto 4.5rem; padding: 3rem 3rem 3.25rem; text-align: center; } .dp_ab_values .dp_sec_eyebrow { margin-bottom: 1.75rem !important; } /* Five across, one column per value. Stacked one-per-row, these five short pairs used 910px of a 1580px panel and left the rest as bare teal — the wider the band got, the worse that looked. Across, each value owns a column and the row spans the full width. */ .dp_ab_values_list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.25rem; text-align: left; align-items: start; } .dp_ab_values_list li { font-size: 1rem; line-height: 1.5; /* the gold hairline gives each column an edge to sit against, so five short blocks read as a set rather than as text floating in a panel */ padding-top: 1rem; border-top: 1px solid rgb(var(--champagne-gold-rgb) / 22%); } .dp_ab_values_list em { font-family: 'Canela', 'Italiana', serif; font-style: italic; font-weight: 300; font-size: 1.1rem; color: var(--warm-ivory); display: block; margin-bottom: 0.5rem; } .dp_ab_values_list span { font-family: var(--nav-font); font-weight: 300; font-size: 0.7rem; letter-spacing: 0.12em; color: rgb(var(--warm-ivory-rgb) / 60%); } @media (max-width: 860px) { .dp_ab_founder { grid-template-columns: 1fr; gap: 2rem; width: 90%; } /* stays portrait when stacked: 4/3 here would have cut roughly half the width off a 2:3 photograph */ .dp_ab_founder_img .dp_polaroid_img { aspect-ratio: 2 / 3; } /* The polaroid ran the full width of the section here, which on a 375px screen is most of it. Sizing from the picture means a narrower card is also a shorter one. Needs .dp_polaroid in the selector: that class sets margin: 0 further down the file and would otherwise win on order, losing the centring. */ .dp_ab_founder_img.dp_polaroid { max-width: 76%; justify-self: center; } .dp_ab_why_grid { grid-template-columns: 1fr; gap: 1.75rem; } /* 90%, matching the sections above — at 92% this panel sat 4px wider each side than the story and the grid, which showed as a misaligned edge */ .dp_ab_values { width: 90%; padding: 2.25rem 1.5rem; } .dp_ab_values_list { grid-template-columns: 1fr; gap: 1.35rem; } .dp_ab_values_list li { display: block; } .dp_ab_values_list li em { display: block; margin: 0 0 0.2rem; text-align: left; } } /* Three across between 861 and 1200: five columns there are only ~142px wide, which wraps every name onto two lines. Deliberately a separate top-level block — nested inside the <=860 query it read as "<=860 AND >=861" and could never match. */ @media (max-width: 1200px) and (min-width: 861px) { .dp_ab_values_list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; } } /* Subpage header: solid teal bar so nav reads on ivory pages */ body.dp_page .dp_header { position: fixed !important; background: rgb(var(--deep-teal-rgb) / 96%); border-bottom: 1px solid rgb(var(--champagne-gold-rgb) / 10%); backdrop-filter: blur(6px); } @media (max-width: 900px) { .dp_contact_wrap { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 640px) { .dp_form_row { grid-template-columns: 1fr; } .dp_page_hero { height: 32vh; min-height: 220px; } .dp_form_actions { flex-direction: column; align-items: flex-start; } } /* ---- Section eyebrow labels ---- */ .dp_sec_eyebrow { font-family: var(--nav-font) !important; font-weight: 500 !important; font-size: 0.6rem !important; line-height: 1 !important; letter-spacing: 0.42em !important; text-transform: uppercase !important; margin: 0 0 1.4rem !important; display: block; text-align: center; } .dp_sec_eyebrow--dark { color: rgb(var(--deep-teal-rgb) / 55%) !important; } .dp_sec_eyebrow--gold { color: var(--champagne-gold) !important; } .dp_sec_eyebrow--left { text-align: left; grid-area: eyebrow; } /* Process head: eyebrow replaces big title */ .dp_process_head .dp_sec_eyebrow { margin-bottom: 0.9rem !important; } /* ---- Scroll reveal (images) ---- The transition stays on .is-in deliberately. Putting it on the base class makes the moment JS adds .dp-reveal animate as a fade-out, which is visible on anything already on screen. translate3d keeps the move on the GPU. */ .dp-reveal { opacity: 0; transform: translate3d(0, 26px, 0); } .dp-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } /* About images — side reveal (left→right and right→left) */ .dp_about_img1.dp-reveal { transform: translate3d(-40px, 0, 0); } .dp_about_img2.dp-reveal { transform: translate3d(40px, 0, 0); } .dp_about_img1.dp-reveal.is-in, .dp_about_img2.dp-reveal.is-in { transform: translate3d(0, 0, 0); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); } /* About page founder portrait — slides in from the left alongside its copy, rather than the default fade-up the other revealed elements use. */ /* The rotate has to be repeated in both, because a transform replaces the polaroid's own rotate() rather than composing with it — a bare translate here quietly straightens the card at the end of the reveal. */ .dp_ab_founder_img.dp-reveal { transform: translate3d(-56px, 0, 0) rotate(-1.5deg); } .dp_ab_founder_img.dp-reveal.is-in { transform: translate3d(0, 0, 0) rotate(-1.5deg); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { .dp-reveal { opacity: 1; transform: none; } } /* About images hover lift */ .dp_about_img:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.03)); } /* Polaroid gentle hover lift */ .dp_polaroid.is-active:hover { transform: translateY(-4px) rotate(-1deg); } /* Natural aspect ratios — width follows height, real gap between, no crop-from-shrink */ .dp_proj--portrait { aspect-ratio: 3 / 4; } .dp_proj--wide { aspect-ratio: 3 / 2; } @media (max-width: 900px) { .dp_proj { height: 40vh; min-height: 240px; max-height: 360px; } } @media (max-width: 520px) { .dp_projects_track { flex-wrap: wrap; } .dp_proj { flex: 1 1 45%; height: auto; min-height: 0; max-height: none; width: auto; aspect-ratio: 3 / 4; } .dp_proj--wide { flex: 1 1 100%; aspect-ratio: 3 / 2; } } .dp_projects_link { display: flex; align-items: center; justify-content: center; gap: 1.75rem; text-decoration: none; max-width: 1100px; margin: 0 auto; } .dp_projects_line { flex: 1; height: 1px; background: rgb(var(--deep-teal-rgb) / 30%); } .dp_projects_label { font-family: var(--nav-font); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--deep-teal); transition: color .25s ease, letter-spacing .3s ease; white-space: nowrap; } .dp_projects_link:hover .dp_projects_label { color: var(--mid-teal); letter-spacing: 0.38em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — TESTIMONIALS (Section 8 / PDF) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Kill legacy -25% margin-bottom the old furniture s2 used (custom.css:1169) */ section#s2_home.dp_testimonials { margin-bottom: 0 !important; } /* Section — modern dark-teal panel with soft radial glow */ .dp_testimonials { background: radial-gradient(ellipse at 30% 40%, var(--rich-teal) 0%, var(--deep-teal) 72%) !important; color: var(--warm-ivory); padding: 4.5rem 0 5rem; position: relative; overflow: hidden; border-top: 1px solid rgb(var(--champagne-gold-rgb) / 15%); border-bottom: none; isolation: isolate; z-index: 1; } /* Head — compact centered eyebrow + heading */ .dp_testi_head { width: 88%; max-width: 900px; margin: 0 auto 2.75rem; text-align: center; } .dp_testi_eyebrow { font-family: var(--nav-font); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase; color: rgb(var(--warm-ivory-rgb) / 75%); margin: 0 0 0.9rem; display: inline-flex; align-items: center; gap: 0.9rem; } .dp_testi_ebline { display: inline-block; width: 26px; height: 1px; background: rgb(var(--champagne-gold-rgb) / 55%); } .dp_testi_heading { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important; line-height: 1.2 !important; letter-spacing: 0.008em !important; color: var(--warm-ivory) !important; margin: 0 !important; text-transform: none !important; font-style: normal !important; font-variation-settings: normal !important; } .dp_testi_heading em { font-family: 'Canela', 'Italiana', serif; font-weight: 300; font-style: italic; } .dp_testimonials::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 90%, rgb(var(--champagne-gold-rgb) / 6%) 0%, transparent 40%), radial-gradient(circle at 15% 15%, rgb(var(--champagne-gold-rgb) / 4%) 0%, transparent 35%); pointer-events: none; z-index: -1; } /* Nuke theme's default blockquote quote glyphs */ .dp_testi_quote::before, .dp_testi_quote::after { content: none !important; display: none !important; } /* Modern floating gold quote mark on the track */ .dp_testi_track { position: relative; } .dp_testi_mark { position: absolute; top: -0.6rem; left: 0; font-family: 'Canela', 'Italiana', serif; font-weight: 300; font-size: 3.75rem; line-height: 0.6; color: rgb(var(--champagne-gold-rgb) / 55%); user-select: none; pointer-events: none; z-index: 0; } /* Photo stack — clean container for polaroid, no corner marks */ .dp_testi_photo_stack { position: relative; overflow: visible !important; background: transparent !important; } /* Footer row — nav dots only, hidden counter fallback */ .dp_testi_footer { display: flex; align-items: center; justify-content: flex-start; padding-left: 1.5rem; margin-top: 0.5rem; } .dp_testi_counter { display: none !important; } /* Grid — image stack + testimonial track */ .dp_testi_inner { width: 88%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; gap: 4.5rem; align-items: center; /* Hands horizontal gestures to the swipe handler while the browser keeps vertical panning, so the page still scrolls normally through this section and there is no horizontal rubber-band. Unset at every width on purpose: touch-action only affects touch input, so a mouse desktop is unchanged and a touch laptop or a tablet wider than the 900px breakpoint still swipes. */ touch-action: pan-y; } /* Photo stack — explicit height so section can never under-measure */ .dp_testi_photo_stack { position: relative; width: 100%; max-width: 430px; height: 540px; margin: 0 auto; background: transparent; } /* Polaroid frame — refined ivory card, subtle tilt, editorial labels */ .dp_polaroid { position: absolute; inset: 0; margin: 0; /* Aged ivory with subtle warmth + SVG paper grain */ background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse at 50% 50%, #F5EDD6 55%, #E8D8B5 100%), #F5EDD6; background-size: 220px 220px, 100%, 100%; background-blend-mode: multiply, normal, normal; padding: 0.65rem 0.65rem 1.9rem; box-shadow: 0 46px 60px -22px rgb(0 0 0 / 45%), 0 24px 44px rgb(0 0 0 / 30%), 0 8px 14px rgb(0 0 0 / 18%), inset 0 0 0 1px rgb(17 17 17 / 4%); opacity: 0; transform: rotate(-1.5deg); transform-origin: center center; /* transform belongs HERE, not only on :hover. Declared solely in the hover rule, the lift animated on the way in and snapped back on the way out, because leaving the hover state drops that rule and with it the transition. Both directions now use the same curve. */ transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); overflow: visible; border-radius: 2px; } .dp_polaroid.is-active { opacity: 1; z-index: 2; /* Scoped to the active card so exactly one layer is promoted, never three. This element carries an SVG-noise background and four stacked shadows; without its own layer the browser repaints all of that on every frame of the lift, which is the other half of why it felt rough. */ will-change: transform; } /* Corner wear/aged tint — soft darkened corners like real polaroid */ .dp_polaroid::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgb(120 90 40 / 22%) 0%, transparent 15%), radial-gradient(circle at 100% 0%, rgb(120 90 40 / 20%) 0%, transparent 15%), radial-gradient(circle at 0% 100%, rgb(120 90 40 / 22%) 0%, transparent 15%), radial-gradient(circle at 100% 100%,rgb(120 90 40 / 20%) 0%, transparent 15%); pointer-events: none; z-index: 1; border-radius: 2px; } .dp_polaroid_img { position: relative; width: 100%; height: calc(100% - 1.9rem); overflow: hidden; background: #EFE3C4; box-shadow: inset 0 0 0 1px rgb(17 17 17 / 5%); z-index: 2; } .dp_polaroid_img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); transition: transform 12s ease-out; filter: contrast(1.02) saturate(0.95) sepia(0.06); } /* Side labels — vertical, both bottom-aligned, consistent orientation */ .dp_polaroid_side { position: absolute; z-index: 3; font-family: var(--nav-font); font-weight: 500; font-size: 0.52rem; letter-spacing: 0.32em; color: rgb(17 17 17 / 75%); text-transform: uppercase; writing-mode: vertical-rl; white-space: nowrap; } .dp_polaroid_side.left { left: 0.12rem; top: 0.35rem; } .dp_polaroid_side.right { right: 0.12rem; top: 0.35rem; } /* Frame code — top-right corner of polaroid film */ .dp_polaroid_dp { position: absolute; z-index: 3; right: 0.12rem; bottom: 2.15rem; font-family: var(--nav-font); font-weight: 500; font-size: 0.52rem; letter-spacing: 0.32em; color: rgb(17 17 17 / 75%); writing-mode: vertical-rl; text-transform: uppercase; white-space: nowrap; } /* Signature — modern serif with italic, subtle rule + meta */ .dp_polaroid_sig { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 0; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; white-space: nowrap; text-align: center; font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-weight: 500; font-style: italic; font-size: 1.25rem; line-height: 1; color: #1A3A36; letter-spacing: 0.01em; } .dp_polaroid_sig::before { content: none; } .dp_polaroid_sig em { font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-style: normal; color: #1A3A36; font-size: 1rem; line-height: 1; display: inline-block; vertical-align: middle; position: relative; top: -1px; } /* Track — quote + attribution with fade transition */ .dp_testi_track { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100%; } .dp_testi_slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .dp_testi_slide.is-active { opacity: 1; pointer-events: auto; position: relative; } .dp_testi_quote { font-family: 'Canela', 'Italiana', serif !important; font-weight: 300; font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.7; color: rgb(var(--warm-ivory-rgb) / 97%); margin: 0 0 2.25rem; quotes: none; max-width: 28rem; position: relative; padding-left: 1.5rem; border-left: 1px solid transparent; background: linear-gradient(var(--champagne-gold), rgb(var(--champagne-gold-rgb) / 15%)) left / 1px 100% no-repeat; } .dp_testi_attr { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 2rem; padding-left: 1.5rem; position: relative; } .dp_testi_attr::before { content: ""; position: absolute; left: 1.5rem; top: -1rem; width: 32px; height: 1px; background: var(--champagne-gold); opacity: 0.65; } .dp_testi_couple { font-family: 'Canela', 'Italiana', serif; font-size: 1.45rem; font-weight: 400; letter-spacing: 0.02em; color: var(--warm-ivory); } .dp_testi_meta { font-family: var(--nav-font); font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgb(var(--warm-ivory-rgb) / 60%); } /* Nav dots — real buttons, hover + focus feedback */ .dp_testi_nav { display: flex; gap: 0.85rem; align-items: center; padding-left: 0; } .dp_testi_dot { appearance: none; background: none; border: none; padding: 0.5rem 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; position: relative; outline: none; box-shadow: none; } .dp_testi_dot::before { content: ""; display: block; width: 26px; height: 1px; background: rgb(var(--warm-ivory-rgb) / 25%); transition: background-color .3s ease, width .45s cubic-bezier(.22,.61,.36,1); } .dp_testi_dot:hover::before { background: rgb(var(--warm-ivory-rgb) / 60%); } .dp_testi_dot.is-active::before { background: var(--champagne-gold); width: 44px; } .dp_testi_dot:focus, .dp_testi_dot:focus-visible { outline: none; box-shadow: none; background: none; } @media (max-width: 900px) { .dp_testimonials { padding: 4rem 0 4.5rem; } .dp_testi_head { margin-bottom: 2.5rem; } .dp_testi_inner { grid-template-columns: 1fr; gap: 2.5rem; width: 92%; } .dp_testi_photo_stack { height: auto; aspect-ratio: 4 / 5; max-height: 460px; max-width: 320px; margin: 0 auto; width: 100%; } .dp_polaroid_sig { left: 50% !important; right: auto !important; transform: translateX(-50%); } /* Stack all three quotes in one grid cell so the row is always as tall as the longest of them. They used to be display:none when inactive, which made the section height follow whichever quote was showing — Avinash & Shravya's wraps to four lines, the other two to three — so the whole page below shifted by 29px on every swipe. Inactive slides now keep their space and only lose their paint (visibility, not display), which also keeps them out of the accessibility tree. */ .dp_testi_track { display: grid; grid-template-columns: minmax(0, 1fr); /* the desktop rule sets justify-content:center, which would otherwise shrink-wrap the column */ grid-template-rows: auto auto; /* row 1 = the stacked quotes, row 2 = the dots */ justify-content: stretch; } .dp_testi_slide { grid-area: 1 / 1; position: relative; opacity: 1; transform: none; filter: none; /* Top-align inside the reserved space. Centred, a short quote sank 15px away from the ❝ mark, which is pinned to the top of the track. This puts the leftover height below the attribution instead, where nothing is drawn. */ justify-content: flex-start; } .dp_testi_slide:not(.is-active) { visibility: hidden; } .dp_testi_footer { grid-area: 2 / 1; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — OUR PROCESS (sticky-scroll) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_process { position: relative; background: var(--deep-teal); color: var(--warm-ivory); isolation: isolate; z-index: 2; border-top: 1px solid rgb(var(--champagne-gold-rgb) / 15%); border-bottom: none; } .dp_process_pin { height: 100vh; min-height: 720px; width: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(4vh + 58px) 4vw 4vh; box-sizing: border-box; background: var(--deep-teal); } .dp_process_head { max-width: 1500px; margin: 0 auto 3vh; width: 100%; text-align: center; } .dp_process_eyebrow { font-family: var(--nav-font); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--champagne-gold); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.9rem; } .dp_process_ebline { display: inline-block; width: 26px; height: 1px; background: rgb(var(--champagne-gold-rgb) / 55%); } .dp_process_title { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(1.3rem, 1.9vw, 1.8rem) !important; line-height: 1.2 !important; letter-spacing: 0.005em !important; color: var(--warm-ivory) !important; margin: 0 0 0.75rem !important; text-transform: none !important; font-style: normal !important; font-variation-settings: normal !important; display: block; } .dp_process_title em { font-family: 'Canela', 'Italiana', serif; font-style: italic; font-weight: 300; color: rgb(var(--champagne-gold-rgb) / 95%); } .dp_process_sub { font-family: var(--nav-font); font-weight: 300; font-size: clamp(0.72rem, 0.8vw, 0.82rem); line-height: 1.6; letter-spacing: 0.06em; color: rgb(var(--warm-ivory-rgb) / 60%); max-width: 34rem; margin: 0 auto; } .dp_process_grid { flex: 1 1 auto; max-width: 1180px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 58% 39%; gap: 3vw; align-items: center; justify-content: center; min-height: 0; } .dp_process_visual { order: 2; } .dp_process_right { order: 1; } /* Right column wrapper: tabs above, step content below */ .dp_process_right { display: flex; flex-direction: column; height: 100%; max-height: 62vh; min-height: 0; } /* Step tabs — wizard rail, clearly a process */ .dp_process_tabs { display: flex; align-items: center; gap: 1.6rem; padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgb(var(--warm-ivory-rgb) / 12%); flex: 0 0 auto; } .dp_process_tab { display: inline-flex; align-items: baseline; gap: 0.45rem; font-family: var(--nav-font); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--warm-ivory-rgb) / 35%); white-space: nowrap; position: relative; padding-bottom: 0.35rem; transition: color .4s ease; } .dp_process_tab b { font-family: 'Canela', 'Italiana', serif; font-weight: 400; font-style: italic; font-size: 0.85rem; letter-spacing: 0; } .dp_process_tab::after { content: ""; position: absolute; left: 0; bottom: -1.45rem; width: 100%; height: 1px; background: var(--champagne-gold); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.22,.61,.36,1); } .dp_process_tab.is-active { color: var(--champagne-gold); } .dp_process_tab.is-active::after { transform: scaleX(1); } /* LEFT — visual */ .dp_process_visual { position: relative; height: 100%; max-height: 62vh; display: flex; align-items: center; gap: 0; } .dp_process_progress { display: none !important; } .dp_process_progress { width: 1px; align-self: stretch; background: rgb(var(--warm-ivory-rgb) / 15%); position: relative; overflow: hidden; flex: 0 0 1px; margin: 3rem 0; } .dp_process_progress_fill { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--champagne-gold); transform-origin: top center; transform: scaleY(0); transition: transform .2s linear; } .dp_process_imgs { position: relative; flex: 1 1 auto; height: 100%; max-height: 62vh; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #0f2b28; box-shadow: 0 40px 60px -22px rgb(0 0 0 / 55%), 0 20px 40px rgb(0 0 0 / 30%); } .dp_process_img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.6s cubic-bezier(.22,.61,.36,1); transform: scale(1.05); } .dp_process_img.is-active { opacity: 1; transform: scale(1); } .dp_process_img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); filter: contrast(1.02) saturate(1.02); } /* RIGHT — steps stack */ .dp_process_steps { position: relative; flex: 1 1 auto; min-height: 0; } .dp_process_step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); pointer-events: none; padding-right: 3vw; } .dp_process_step.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .dp_process_num { display: none !important; } .dp_process_stepttl { font-family: var(--nav-font) !important; font-weight: 500 !important; font-size: 1.05rem !important; line-height: 1 !important; letter-spacing: 0.42em !important; text-transform: uppercase !important; color: var(--champagne-gold) !important; margin: 0 0 1.6rem !important; position: relative; padding-left: 3rem; font-style: normal !important; font-variation-settings: normal !important; } .dp_process_stepttl::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 1px; background: var(--champagne-gold); opacity: 0.7; } .dp_process_body { font-family: 'Canela', 'Italiana', serif !important; font-weight: 400 !important; font-size: clamp(1rem, 1.25vw, 1.25rem) !important; line-height: 1.65 !important; color: rgb(var(--warm-ivory-rgb) / 92%) !important; margin: 0 0 2rem !important; max-width: 30rem; letter-spacing: 0.005em !important; } .dp_process_timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; } .dp_process_timeline li { position: relative; padding-left: 1.1rem; font-family: var(--nav-font) !important; font-weight: 400 !important; font-size: 0.62rem !important; line-height: 1.5 !important; letter-spacing: 0.28em !important; text-transform: uppercase; color: rgb(var(--warm-ivory-rgb) / 70%) !important; } .dp_process_timeline li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--champagne-gold); opacity: 0.75; } .dp_process_cta { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .dp_process_cta_line { font-family: 'Canela', 'Italiana', serif; font-style: italic; font-weight: 400; font-size: clamp(0.95rem, 1.1vw, 1.15rem); color: rgb(var(--warm-ivory-rgb) / 85%); margin: 0; letter-spacing: 0.01em; } .dp_process_cta .dp_btn { transition: background-color .25s ease, color .25s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; } .dp_process_cta .dp_btn:hover { transform: translateY(-1px) scale(1.03); } /* ---- PROCESS as a standalone LIGHT-THEMED page (scoped to body.dp_process_light) ---- */ .dp_process_light .dp_process, .dp_process_light .dp_process_pin { background: var(--warm-ivory); } .dp_process_light .dp_process { color: var(--deep-teal); border-top-color: rgb(var(--deep-teal-rgb) / 10%); } .dp_process_light .dp_process_title { color: var(--deep-teal) !important; } .dp_process_light .dp_process_sub { color: rgb(var(--deep-teal-rgb) / 72%); } .dp_process_light .dp_process_tabs { border-bottom-color: rgb(var(--deep-teal-rgb) / 15%); } .dp_process_light .dp_process_tab { color: rgb(var(--deep-teal-rgb) / 45%); } .dp_process_light .dp_process_tab.is-active { color: var(--deep-teal); } .dp_process_light .dp_process_stepttl { color: var(--deep-teal) !important; } .dp_process_light .dp_process_body { color: rgb(var(--deep-teal-rgb) / 92%) !important; } .dp_process_light .dp_process_timeline li { color: rgb(var(--deep-teal-rgb) / 68%) !important; } .dp_process_light .dp_process_cta_line { color: rgb(var(--deep-teal-rgb) / 85%); } .dp_process_light .dp_sec_eyebrow--gold { color: #b08c4f !important; } /* thin gold accents -> deeper gold so they read on ivory */ .dp_process_light .dp_process_tab::after, .dp_process_light .dp_process_stepttl::before, .dp_process_light .dp_process_timeline li::before, .dp_process_light .dp_process_progress_fill { background: #b08c4f; } /* soften the image-frame shadow for a light page */ .dp_process_light .dp_process_imgs { box-shadow: 0 30px 55px -28px rgb(var(--deep-teal-rgb) / 40%), 0 12px 28px rgb(var(--deep-teal-rgb) / 12%); } @media (max-width: 900px) { /* keep the pinned scroll animation on mobile — single column, image on top crossfading, active step below (same behaviour as desktop, just stacked) */ .dp_process_pin { height: 100vh; height: 100dvh; min-height: 540px; padding: calc(1vh + 58px) 7vw 2vh; justify-content: center; } .dp_process_head { margin-bottom: 1.1rem; } .dp_process_grid { grid-template-columns: 1fr; grid-template-areas: none; gap: 1.1rem; align-items: start; } /* image on top — bigger, taller aspect so subjects aren't cropped hard */ .dp_process_visual { order: 1; height: auto; max-height: none; } /* Each photograph gets a card its own shape, and the card is what carries the rounded corners, the shadow and the crop. The shared box behind them is only a stage: fixed height, no background, nothing visible. That split is what removes the animation problem. Shaping the SHARED box meant its aspect ratio had to change between steps, which warped the photo mid-transition and shoved the text below it up and down by 137px. Shaping each card instead means nothing resizes at all — the cards simply crossfade, exactly as they always did, and the text never moves. `flex: 0 0 auto` stays load-bearing: the base rule's `flex: 1 1 auto` is never reset here, and flex-grow stretching this box is what originally made `width: auto` inert and got the 4/5 ratio discarded. */ .dp_process_imgs { order: 0; flex: 0 0 auto; width: 100%; height: 44vh; height: 44dvh; aspect-ratio: auto; max-height: none; max-width: none; margin: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; } /* the card: centred on the stage, sized from whichever axis its shape needs. Portrait is driven by height because at full width it would overrun the stage; landscape by width because the column is its limit. */ .dp_process_img { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) scale(1.04); border-radius: 14px; overflow: hidden; background: #0f2b28; box-shadow: 0 30px 46px -20px rgb(0 0 0 / 55%), 0 14px 28px rgb(0 0 0 / 28%); } .dp_process_img.is-active { transform: translate(-50%, -50%) scale(1); } .dp_process_img--portrait { height: 100%; width: auto; aspect-ratio: 4 / 5; } .dp_process_img--landscape { width: 100%; height: auto; aspect-ratio: 3 / 2; } .dp_process_progress { display: none !important; } /* steps below — active-only crossfade (absolute); each step centres in its box so short steps don't leave a dead gap under the text */ .dp_process_right { order: 2; position: relative; height: auto; max-height: none; } .dp_process_tabs { display: none; } .dp_process_steps { position: relative; height: auto; min-height: 35vh; min-height: 35dvh; } .dp_process_step { position: absolute; inset: 0; justify-content: center; padding-right: 0; margin: 0; } /* smaller text on mobile */ .dp_process_sub { font-size: 0.82rem !important; line-height: 1.6 !important; } .dp_process_stepttl { font-size: 0.76rem !important; letter-spacing: 0.26em !important; padding-left: 2rem; margin-bottom: 1.1rem !important; } .dp_process_stepttl::before { width: 22px; } .dp_process_body { font-size: 0.85rem !important; line-height: 1.6 !important; margin: 0 0 1.2rem !important; max-width: none; } .dp_process_timeline { gap: 0.5rem 1rem; } .dp_process_timeline li { font-size: 0.55rem !important; letter-spacing: 0.18em !important; } .dp_process_cta { margin-top: 1.5rem; gap: 0.9rem; } } /* reduced motion: don't pin — show all steps stacked, first image only */ @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .dp_process_pin { height: auto; min-height: 0; padding: 4rem 6vw; } .dp_process_steps { min-height: 0; } .dp_process_step { position: relative; inset: auto; opacity: 1; transform: none; margin-bottom: 2.5rem; } .dp_process_img { position: relative; opacity: 1; transform: none; } .dp_process_img:not(:first-child) { display: none; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — ABOUT US (HOTC-style editorial) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_about { background: var(--warm-ivory); color: var(--deep-teal); padding: 3.5rem 0 3rem; overflow: hidden; border-top: 1px solid rgb(var(--champagne-gold-rgb) / 15%); } .dp_about_wrap { width: min(1280px, 92%); margin: 0 auto; display: grid; grid-template-columns: 31% 1fr 34%; grid-template-rows: auto auto auto; grid-template-areas: "eyebrow eyebrow img2" "head head img2" "img1 copy img2"; column-gap: 2.75rem; row-gap: 0; align-items: start; } .dp_about_eyebrow { grid-area: eyebrow; display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem; justify-self: center; font-family: var(--nav-font) !important; font-weight: 400; font-size: 0.6rem !important; letter-spacing: 0.42em; text-transform: uppercase; color: rgb(var(--deep-teal-rgb) / 60%) !important; margin: 0 0 1.4rem !important; position: relative; z-index: 2; } .dp_about_ebline { display: inline-block; width: 26px; height: 1px; background: rgb(var(--champagne-gold-rgb) / 70%); } /* Headline — thin uppercase serif, overlaps right image like reference */ .dp_about_head { grid-area: head; margin: 0 0 2.25rem !important; position: relative; z-index: 2; text-align: center; font-style: normal !important; font-variation-settings: normal !important; } .dp_about_l1, .dp_about_l2 { display: block; font-family: 'Canela', 'Italiana', serif; font-weight: 100; /* sized to fit the two left columns: the negative right margins this used to carry let the lines run under the right-hand photograph */ font-size: clamp(1.5rem, 2.95vw, 2.9rem); line-height: 1.02; letter-spacing: 0.055em; color: var(--deep-teal); text-transform: uppercase; white-space: nowrap; } .dp_about_l1 { margin-right: 0; } .dp_about_l2 { margin-left: 0; margin-right: 0; } @media (max-width: 1180px) { .dp_about_l1 { margin-right: 0; } .dp_about_l2 { margin-right: 0; margin-left: 0; } .dp_about_l1, .dp_about_l2 { white-space: normal; font-size: clamp(1.3rem, 2.6vw, 2rem); } } .dp_about_l2 em { font-family: 'Canela', 'Italiana', serif; font-style: italic; font-weight: 300; text-transform: lowercase; font-size: 0.52em; letter-spacing: 0.03em; color: var(--deep-teal); margin-right: 0.5rem; position: relative; top: -0.22em; } /* Images — muted, filmic */ .dp_about_img { margin: 0; overflow: hidden; background: rgb(var(--deep-teal-rgb) / 6%); } .dp_about_img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); filter: none; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); } .dp_about_img:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.02)); } .dp_about_img1 { grid-area: img1; aspect-ratio: 3 / 3.9; margin-top: 0.4rem; width: 100%; } .dp_about_img2 { grid-area: img2; aspect-ratio: 3 / 4.3; position: relative; z-index: 1; } /* Copy — small bold-ish serif like reference body */ .dp_about_copy { grid-area: copy; padding-top: 0.5rem; text-align: left; max-width: 30rem; } .dp_about_copy p { font-family: 'Canela', 'Italiana', serif !important; font-weight: 500 !important; font-size: clamp(0.78rem, 0.88vw, 0.88rem) !important; line-height: 1.6 !important; letter-spacing: 0.012em !important; color: rgb(var(--deep-teal-rgb) / 90%) !important; margin: 0 0 0.9rem !important; } .dp_about_copy p:last-child { margin-bottom: 0 !important; } .dp_about_cta { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; font-family: var(--nav-font); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; text-decoration: none; color: var(--deep-teal); white-space: nowrap; transition: color .25s ease, letter-spacing .3s ease; } .dp_about_cta::before, .dp_about_cta::after { content: ""; flex: 1; height: 1px; background: rgb(var(--deep-teal-rgb) / 30%); transition: background-color .3s ease; } .dp_about_cta:hover { color: var(--mid-teal); letter-spacing: 0.36em; } .dp_about_cta:hover::before, .dp_about_cta:hover::after { background: rgb(var(--deep-teal-rgb) / 55%); } /* Trust row — wordmark strip in the press-logo slot */ .dp_about_trust { grid-area: logos; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem; margin: 3rem 0 0 !important; font-family: 'Canela', 'Italiana', serif !important; font-weight: 400; font-size: clamp(0.85rem, 1vw, 1rem) !important; letter-spacing: 0.05em; color: rgb(var(--deep-teal-rgb) / 60%) !important; } .dp_about_trust i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--champagne-gold-rgb) / 80%); } @media (max-width: 900px) { .dp_about { padding: 3rem 0 2.5rem; } .dp_about_wrap { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "head" "img1" "copy" "logos"; row-gap: 1.75rem; } .dp_about_img2 { display: none; } .dp_about_img1 { margin-top: 0; aspect-ratio: 4 / 3; } .dp_about_l1, .dp_about_l2 { white-space: normal; margin: 0; } .dp_about_head { margin-bottom: 0 !important; } .dp_about_trust { margin-top: 0 !important; justify-content: center; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — FOOTER (IG strip + bar) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dp_footer { position: relative; background: var(--warm-ivory); width: 100%; } .dp_footer .a_logo { display: none !important; } /* IG strip — ivory panel, teal watermark behind grid */ .dp_ig { position: relative; background: var(--warm-ivory); padding: 2.5rem 0 2.25rem; overflow: hidden; text-align: center; } .dp_ig_watermark { /* In normal flow, not absolutely positioned: at large sizes the heading was overlapping the top row of tiles. Sitting in the flow means it always clears them, whatever the viewport. */ display: block; font-family: 'Canela', 'Italiana', serif; font-weight: 300; /* sized so "Our Instagram" spans ~ the grid width */ font-size: clamp(3.5rem, 9vw, 8.5rem); line-height: 1; white-space: nowrap; color: rgb(var(--deep-teal-rgb) / 12%); pointer-events: none; user-select: none; } .dp_ig_grid { position: relative; z-index: 1; width: min(1200px, 92%); /* the heading is in flow above now, so no clearance margin is needed */ margin: 1.5rem auto 1.75rem; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; aspect-ratio: 5 / 2; } .dp_ig_item { display: block; position: relative; overflow: hidden; background: rgb(var(--deep-teal-rgb) / 6%); height: 100%; } .dp_ig_item:nth-child(n+11) { display: none; } .dp_ig_item img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--dp-focus, center); transform: scale(var(--dp-zoom, 1)); transform-origin: var(--dp-focus, center); transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .4s ease; } .dp_ig_item:hover img { transform: scale(calc(var(--dp-zoom, 1) * 1.05)); filter: brightness(0.55); } .dp_ig_item::after { content: "♥ " attr(data-likes); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--nav-font); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--warm-ivory); opacity: 0; transform: scale(0.92); transition: opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1); pointer-events: none; z-index: 2; } .dp_ig_item:hover::after { opacity: 1; transform: scale(1); } .dp_ig_handle { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--nav-font); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--deep-teal); transition: color .25s ease; } .dp_ig_handle svg { width: 15px; height: 15px; } .dp_ig_handle svg { color: var(--mid-teal); transition: color .25s ease, transform .25s ease; } .dp_ig_handle:hover { color: var(--mid-teal); } .dp_ig_handle:hover svg { transform: scale(1.08); } /* Bar — deep teal, nav left, copyright right */ .dp_footer_bar { background: var(--deep-teal); border-top: 1px solid rgb(var(--champagne-gold-rgb) / 15%); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding: 0.85rem 4vw; } .dp_footer_nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; } .dp_footer_nav a { font-family: var(--nav-font) !important; font-weight: 400; font-size: 0.6rem !important; letter-spacing: 0.12em; text-transform: none; color: rgb(var(--warm-ivory-rgb) / 80%); text-decoration: none; transition: color .2s ease; line-height: 1; } .dp_footer_nav a:hover { color: var(--champagne-gold); } .dp_footer_wa { display: inline-flex; align-items: center; gap: 0.35rem; } .dp_footer_wa svg { width: 12px; height: 12px; color: #25D366; } .dp_footer_wa span { font-family: var(--nav-font); } .dp_footer_copy { font-family: var(--nav-font) !important; font-weight: 300; font-size: 0.58rem !important; letter-spacing: 0.05em; color: rgb(var(--warm-ivory-rgb) / 50%); margin: 0; line-height: 1.4; } .dp_footer_copy span { font-family: var(--nav-font); color: var(--champagne-gold); } @media (max-width: 760px) { .dp_ig { padding: 3.5rem 0 2.5rem; } .dp_ig_grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-template-areas: none; aspect-ratio: auto; width: 92%; } .dp_ig_item { grid-area: auto !important; height: 0; padding-bottom: 100%; } .dp_ig_item:nth-child(n+7) { display: none; } .dp_footer_bar { flex-direction: column; align-items: center; text-align: center; } .dp_footer_nav { justify-content: center; gap: 0.4rem 1.1rem; } .dp_footer_nav a { padding: 0.4rem 0.2rem; } /* comfortable tap target */ } /* Section 5 ("Our mission") — force clear separation from testimonials */ #s5_home { position: relative; background: var(--deep-teal); padding: 5rem 0 4rem !important; z-index: 0; } #s5_home .container { padding-top: 0 !important; padding-bottom: 0 !important; } /* Kill legacy horizontal scroll / swiper leftovers inside our new section */ .dp_projects .swiper, .dp_projects .fake_dots, .dp_projects #nav_dots, .dp_projects .wrp_freccetta { display: none !important; } @media (max-width: 900px) { .dp_projects { padding: 5rem 0 3.5rem; } .dp_projects_title { margin-bottom: 2.5rem !important; } .dp_projects_row { flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; } .dp_proj--1, .dp_proj--2, .dp_proj--3, .dp_proj--4, .dp_proj--5 { width: calc(50% - 0.5rem); height: 55vw; max-width: none; max-height: none; } .dp_proj--3 { width: 100%; height: 60vw; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Cookie banner kill-switch (safety net if any iubenda residue survives) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #iubenda-cs-banner, .iubenda-cs-container, .iubenda-tp-btn, .iub-cs-banner, [id^="iubenda"], [class^="iubenda"], [class*=" iubenda"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* DARK PEARL — RESPONSIVE POLISH (tablet + mobile) */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Tablet */ @media (max-width: 1024px) { /* 901px+ only — below 900px the mobile process block sets its own (larger) gap */ @media (min-width: 901px) { .dp_process_grid { gap: 2.5vw; } } .dp_projects_inner { width: 100%; } .dp_ab_founder { grid-template-columns: 1fr; gap: 2.5rem; width: 90%; } } /* Mobile — global */ @media (max-width: 640px) { /* Hero */ .dp_hero_inner { padding-left: 6vw !important; padding-right: 6vw !important; } .dp_hero_sub { font-size: 0.72rem !important; } /* Testimonials stack + polaroid centred */ .dp_testimonials { padding: 3rem 0 3.5rem; } .dp_testi_quote { font-size: 1rem !important; } /* Process: ensure not pinned, comfortable padding */ .dp_process_pin { height: auto !important; min-height: 0 !important; padding: 3rem 6vw 2rem; } .dp_process_num { font-size: clamp(3rem, 14vw, 4rem); } /* About page */ .dp_ab_why_grid { grid-template-columns: 1fr !important; gap: 1.5rem; } .dp_ab_founder { grid-template-columns: 1fr !important; } .dp_ab_values_list em { font-size: 1rem; } /* Films / gallery already column-based */ .dp_films_grid { grid-template-columns: 1fr !important; width: 100%; } /* Footer nav wraps centred */ .dp_footer_bar { flex-direction: column; text-align: center; gap: 0.75rem; padding: 1.25rem 6vw; } .dp_footer_nav { justify-content: center; gap: 0.75rem 1rem; } .dp_footer_copy { font-size: 0.55rem !important; } /* IG strip tighter */ .dp_ig { padding: 2.5rem 0 2rem; } .dp_ig_watermark { font-size: clamp(2.5rem, 12vw, 4rem); } /* Page hero titles */ .dp_page_title { font-size: clamp(1.4rem, 6vw, 2rem) !important; } /* CTA lines / buttons full-friendly */ .dp_page_cta { padding: 0 6vw; } .dp_form_actions { flex-direction: column; align-items: stretch; } .dp_form_actions .dp_btn { width: 100%; } /* Contact two-col -> one already at 820; ensure form inputs comfy */ .dp_contact_wrap { gap: 2rem; } /* WhatsApp float clears burger visually — nudge up a touch */ .dp_wa_float { right: 1rem; bottom: 1rem; } } /* Very small */ @media (max-width: 380px) { .dp_brand_logo { height: 22px; } .dp_nav a { font-size: 0.8rem !important; } }