/* ============================================================ Melaaura — Materials & Finishes section family (rey-child) Shared by every melaaura_mat_* Elementor widget. Rides on melaaura-home-base (fonts, .mh tokens, scroll-reveal). ============================================================ */ .mh.mat{ --mat-ink:#16130F; --mat-ink-soft:#2A2621; --mat-stone:#6B655B; --mat-mute:#8B8174; --mat-gold:#B28C3F; --mat-gold-soft:#C7A664; --mat-ivory:#FBF9F5; --mat-paper:#F3F0E9; --mat-dark:#14120F; --mat-line:rgba(22,19,15,.12); --mat-line-soft:rgba(22,19,15,.07); --mat-max:1500px; --mat-pad:clamp(20px,4vw,80px); --mat-radius:14px; position:relative; background:var(--mat-ivory); color:var(--mat-ink); } /* full-bleed background, contained content — matches the header */ .mh.mat{ width:100%; } .mat__wrap{ max-width:var(--mat-max); margin:0 auto; padding-left:var(--mat-pad); padding-right:var(--mat-pad); } .mat__wrap--narrow{ max-width:1080px; } /* ── themes ─────────────────────────────────────────────── */ /* Modifiers must out-specify `.mh.mat` (0,2,0) or the ivory base wins and the dark sections render light-on-light. Keep the `.mh.mat` prefix. */ .mh.mat.mat--paper{ background:var(--mat-paper); } .mh.mat.mat--white{ background:#FFFFFF; } .mh.mat.mat--dark{ background:var(--mat-dark); --mat-ink:#F3EFE8; --mat-ink-soft:#DCD6CB; --mat-stone:#A9A196; --mat-mute:#8C857A; --mat-line:rgba(243,239,232,.16); --mat-line-soft:rgba(243,239,232,.09); color:#F3EFE8; } .mat--dark h1,.mat--dark h2,.mat--dark h3,.mat--dark h4, .mat--dark .mat-hero__title,.mat--dark .mat-sec__title, .mat--dark .mat-story__title,.mat--dark .mat-cta__title{ color:#F3EFE8 !important; } /* ── shared type ────────────────────────────────────────── */ .mat-eyebrow{ font-family:'DM Sans',sans-serif !important; font-size:12px; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--mat-mute); margin:0; } .mat-sec{ padding:clamp(64px,8vw,132px) 0; } .mat-sec--tight{ padding:clamp(44px,5vw,80px) 0; } .mat-sec__head{ max-width:900px; } .mat-sec__head--center{ margin-left:auto; margin-right:auto; text-align:center; } .mat-sec__title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:400; font-size:clamp(34px,5.4vw,68px); line-height:1.0; letter-spacing:-.012em; margin:18px 0 0; color:var(--mat-ink); } .mat-sec__title em{ font-style:italic; color:inherit; } .mat-sec__lede{ font-weight:300; font-size:clamp(15px,1.08vw,17.5px); line-height:1.82; color:#4B463F; margin:20px 0 0; max-width:63ch; } .mat-sec__head--center .mat-sec__lede{ margin-left:auto; margin-right:auto; } .mat-rule{ height:1px; background:var(--mat-line); border:0; margin:0; } .mat-rule--gold{ height:1px; width:56px; background:var(--mat-line); border:0; margin:26px 0 0; } .mat-sec__head--center .mat-rule--gold{ margin-left:auto; margin-right:auto; } /* ── shared CTA pill (matches header "Request a Quote") ─── */ .mat-btn{ display:inline-flex; align-items:center; gap:12px; font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:14px 26px; border-radius:999px; white-space:nowrap; cursor:pointer; background:#16130F; color:#FFFFFF; border:1px solid #16130F; transition:background .45s cubic-bezier(.22,.61,.36,1), color .45s ease, border-color .45s ease, transform .3s ease; } .mat-btn:hover{ background:transparent; color:#16130F; } .mat--dark .mat-btn{ background:#F3EFE8; color:#14120F; border-color:#F3EFE8; } .mat--dark .mat-btn:hover{ background:transparent; color:#F3EFE8; } .mat-btn--ghost{ background:transparent; color:var(--mat-ink); border-color:currentColor; } .mat-btn--ghost:hover{ background:var(--mat-ink); color:var(--mat-ivory); } .mat--dark .mat-btn--ghost{ background:transparent; color:#F3EFE8; border-color:rgba(243,239,232,.5); } .mat--dark .mat-btn--ghost:hover{ background:#F3EFE8; color:#14120F; border-color:#F3EFE8; } .mat-btn svg{ flex:0 0 auto; } .mat-link{ display:inline-flex; align-items:center; gap:10px; font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mat-ink); text-decoration:none; transition:gap .3s ease, color .3s ease; } .mat-link:hover{ gap:16px; color:var(--mat-mute); } .mat--dark .mat-link:hover{ color:#F3EFE8; } .mh.mat a:focus-visible, .mh.mat button:focus-visible{ outline:2px solid var(--mat-gold); outline-offset:3px; border-radius:4px; } /* ============================================================ 1 · HERO The theme header is `position:fixed` and 80px tall, and the page reserves that space above the content. Pull the stage up by exactly that amount so the image runs full-bleed under the header, then give the body the same value back as padding so the copy lands where it did before. ============================================================ */ .mat-hero{ padding:0; margin-top:calc(-1 * var(--mat-hdr-h,80px)); } .mat-hero__stage{ position:relative; overflow:hidden; min-height:calc(var(--mat-hero-h,clamp(520px,78vh,860px)) + var(--mat-hdr-h,80px)); padding-top:var(--mat-hdr-h,80px); display:flex; align-items:flex-end; background:#1A1713; } .mat-hero__img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 52%; transform:scale(1.06); animation:mela-kenburns 22s ease-out forwards; } .mat-hero__veil{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(10,9,7,.42) 0%, rgba(10,9,7,.10) 30%, rgba(10,9,7,.55) 72%, rgba(10,9,7,.86) 100%); } .mat-hero__veil::after{ content:""; position:absolute; inset:0; background:rgba(10,9,7,calc(var(--mat-hero-tint,18) / 100)); } .mat-hero__body{ position:relative; z-index:2; width:100%; padding-top:clamp(120px,16vh,200px); padding-bottom:clamp(46px,6vw,76px); color:#FFFFFF; } /* pinned directly under the fixed header, above the hero copy */ .mat-hero__crumbs{ position:absolute; left:0; right:0; z-index:3; top:calc(var(--mat-hdr-h,80px) + 22px); display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:'DM Sans',sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72); text-shadow:0 1px 10px rgba(0,0,0,.5); } .mat-hero__crumbs a{ color:inherit; text-decoration:none; transition:color .25s ease; } .mat-hero__crumbs a:hover{ color:#FFFFFF; } .mat-hero__crumbSep{ opacity:.45; } .mat-hero__crumbCur{ opacity:.9; } .mat-hero__eyebrow{ color:rgba(255,255,255,.82) !important; text-shadow:0 1px 10px rgba(0,0,0,.5); } .mat-hero__title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:300; color:#FFFFFF !important; font-size:clamp(48px,8vw,118px); line-height:.94; letter-spacing:-.02em; margin:20px 0 0; max-width:16ch; text-shadow:0 1px 1px rgba(0,0,0,.28), 0 2px 12px rgba(0,0,0,.32); } .mat-hero__title em{ font-style:italic; color:inherit; } .mat-hero__lede{ font-size:clamp(15px,1.2vw,18px); line-height:1.68; color:rgba(255,255,255,.9); margin:24px 0 0; max-width:56ch; text-shadow:0 1px 8px rgba(0,0,0,.4); } .mat-hero__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-top:clamp(30px,4vw,54px); } .mat-hero__facts{ display:flex; gap:clamp(26px,3.4vw,58px); flex-wrap:wrap; } .mat-hero__fact{ min-width:0; } .mat-hero__factN{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:clamp(28px,3vw,42px); font-weight:300; line-height:1; color:#FFFFFF; } .mat-hero__factL{ font-family:'DM Sans',sans-serif !important; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:8px; } .mat-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; } .mat-hero__ctas .mat-btn{ background:rgba(255,255,255,.96); color:#16130F; border-color:rgba(255,255,255,.96); } .mat-hero__ctas .mat-btn:hover{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.8); } .mat-hero__ctas .mat-btn--ghost{ background:rgba(10,8,6,.18); color:#FFFFFF; border-color:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } .mat-hero__ctas .mat-btn--ghost:hover{ background:#FFFFFF; color:#16130F; border-color:#FFFFFF; } @media (max-width:767px){ .mat-hero__stage{ min-height:var(--mat-hero-h,clamp(460px,72vh,640px)); } .mat-hero__foot{ flex-direction:column; align-items:flex-start; } .mat-hero__facts{ gap:24px; } } /* ============================================================ 2 · INDEX (numbered family list) ============================================================ */ .mat-index__grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(34px,5vw,90px); align-items:start; margin-top:clamp(38px,4vw,62px); } .mat-index__figure{ position:relative; overflow:hidden; border-radius:var(--mat-radius); aspect-ratio:4/5; background:var(--mat-paper); } .mat-index__img{ transition:transform 1.6s cubic-bezier(.22,.61,.36,1); } .mat-index__figure:hover .mat-index__img{ transform:scale(1.1); } .mat-index__cap{ position:absolute; left:18px; bottom:16px; z-index:2; font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#FFFFFF; text-shadow:0 1px 10px rgba(0,0,0,.6); } .mat-index__list{ margin-top:-6px; } .mat-index__row{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:clamp(12px,1.6vw,26px); align-items:baseline; padding:clamp(16px,1.5vw,22px) 0; border-bottom:1px solid var(--mat-line-soft); text-decoration:none; color:inherit; position:relative; transition:padding-left .35s cubic-bezier(.22,.61,.36,1); } .mat-index__row:first-child{ border-top:1px solid var(--mat-line-soft); } a.mat-index__row:hover{ padding-left:12px; } a.mat-index__row::before{ content:""; position:absolute; left:0; top:0; bottom:-1px; width:2px; background:var(--mat-ink); transform:scaleY(0); transform-origin:top; transition:transform .38s cubic-bezier(.22,.61,.36,1); } a.mat-index__row:hover::before{ transform:scaleY(1); } .mat-index__num{ font-family:'DM Sans',sans-serif !important; font-size:11px; font-weight:400; letter-spacing:.18em; color:var(--mat-mute); } .mat-index__name{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:clamp(21px,2vw,28px); font-weight:400; line-height:1.24; color:var(--mat-ink); transition:color .28s ease; } a.mat-index__row:hover .mat-index__name{ color:var(--mat-mute); } .mat-index__note{ font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.05em; color:var(--mat-mute); text-align:right; max-width:20ch; } @media (max-width:900px){ .mat-index__grid{ grid-template-columns:1fr; } .mat-index__figure{ aspect-ratio:16/10; } .mat-index__row{ grid-template-columns:34px minmax(0,1fr); } .mat-index__note{ grid-column:2; text-align:left; max-width:none; margin-top:5px; } } /* ============================================================ 3 · FAMILIES (big image cards) ============================================================ */ .mat-fam__grid{ display:grid; gap:clamp(14px,1.6vw,26px); margin-top:clamp(38px,4vw,60px); grid-template-columns:repeat(var(--mat-fam-cols,4),minmax(0,1fr)); } .mat-fam__card{ position:relative; display:block; overflow:hidden; border-radius:var(--mat-radius); background:var(--mat-paper); text-decoration:none; color:#FFFFFF; aspect-ratio:var(--mat-fam-ratio,4/3); transform:translateZ(0); } .mat-fam__img{ transition:transform 1.5s cubic-bezier(.22,.61,.36,1); } .mat-fam__card:hover .mat-fam__img{ transform:scale(1.11); } .mat-fam__scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,8,6,.10) 0%, rgba(10,8,6,.16) 38%, rgba(10,8,6,.62) 74%, rgba(10,8,6,.88) 100%); transition:background .5s ease; } .mat-fam__card:hover .mat-fam__scrim{ background:linear-gradient(180deg, rgba(10,8,6,.16) 0%, rgba(10,8,6,.28) 38%, rgba(10,8,6,.74) 74%, rgba(10,8,6,.93) 100%); } .mat-fam__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(18px,1.8vw,26px); } .mat-fam__num{ font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.72); display:block; } .mat-fam__name{ display:block; font-family:'Cormorant Garamond',Georgia,serif !important; font-size:clamp(23px,2.1vw,31px); font-weight:300; line-height:1.1; color:#FFFFFF; margin-top:9px; text-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 14px rgba(0,0,0,.34); } .mat-fam__meta{ display:block; font-family:'DM Sans',sans-serif !important; font-size:12px; line-height:1.55; color:rgba(255,255,255,.78); margin-top:9px; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease, margin-top .5s ease; } .mat-fam__card:hover .mat-fam__meta, .mat-fam__card:focus-visible .mat-fam__meta{ max-height:120px; opacity:1; } .mat-fam__go{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#FFFFFF; } @media (max-width:1024px){ .mat-fam__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .mat-fam__grid{ grid-template-columns:1fr; } .mat-fam__card{ aspect-ratio:4/3; } .mat-fam__meta{ max-height:120px; opacity:1; } } /* ============================================================ 4 · PALETTE (the swatch library) ============================================================ */ .mat-pal__filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(30px,3vw,44px); padding-bottom:22px; border-bottom:1px solid var(--mat-line-soft); } .mat-pal__filter{ font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mat-stone); cursor:pointer; background:transparent; border:1px solid var(--mat-line); border-radius:999px; padding:9px 18px; min-height:38px; transition:background .3s ease, color .3s ease, border-color .3s ease; } .mat-pal__filter:hover{ color:var(--mat-ink); border-color:var(--mat-ink); } .mat-pal__filter.is-on{ background:var(--mat-ink); color:var(--mat-ivory); border-color:var(--mat-ink); } .mat--dark .mat-pal__filter.is-on{ background:#F3EFE8; color:#14120F; border-color:#F3EFE8; } .mat-pal__group{ margin-top:clamp(34px,3.6vw,58px); } .mat-pal__group[hidden]{ display:none; } .mat-pal__groupHead{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--mat-line-soft); } .mat-pal__groupName{ font-family:'DM Sans',sans-serif !important; font-size:12px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--mat-mute); } .mat-pal__groupNote{ font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.05em; color:var(--mat-mute); } .mat-pal__grid{ display:grid; gap:clamp(14px,1.5vw,24px) clamp(10px,1.1vw,18px); margin-top:clamp(20px,2vw,30px); grid-template-columns:repeat(var(--mat-cols,4),minmax(0,1fr)); } .mat-pal__sw{ display:block; width:100%; text-align:left; padding:0; border:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; font-family:inherit; color:inherit; } .mat-pal__frame{ position:relative; display:block; overflow:hidden; aspect-ratio:var(--mat-sw-ratio,1/1); border-radius:var(--mat-sw-radius,10px); background:var(--mat-paper); box-shadow:inset 0 0 0 1px var(--mat-line-soft); transition:box-shadow .35s ease, transform .5s cubic-bezier(.22,.61,.36,1); } .mat-pal__img{ transition:transform 1.2s cubic-bezier(.22,.61,.36,1); } .mat-pal__chip{ position:absolute; inset:0; } .mat-pal__sw:hover .mat-pal__frame, .mat-pal__sw:focus-visible .mat-pal__frame{ box-shadow:inset 0 0 0 1px rgba(178,140,63,.55), 0 16px 34px -20px rgba(22,19,15,.4); transform:translateY(-3px); } .mat-pal__sw:hover .mat-pal__img{ transform:scale(1.13); } .mat-pal__zoom{ position:absolute; right:9px; bottom:9px; z-index:2; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.9); color:#16130F; opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .3s ease; } .mat-pal__sw:hover .mat-pal__zoom, .mat-pal__sw:focus-visible .mat-pal__zoom{ opacity:1; transform:none; } .mat-pal__name{ display:block; font-family:'DM Sans',sans-serif !important; font-size:12px; font-weight:400; letter-spacing:.02em; text-transform:none; color:var(--mat-ink); margin-top:11px; line-height:1.35; } .mat-pal__sub{ display:block; font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.03em; color:#6B655B; margin-top:3px; line-height:1.4; } .mat-pal__foot{ margin-top:clamp(28px,3vw,44px); padding-top:18px; border-top:1px solid var(--mat-line); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .mat-pal__note{ font-family:'DM Sans',sans-serif !important; font-size:11.5px; line-height:1.6; color:var(--mat-mute); max-width:70ch; } .mat-pal__empty{ font-family:'DM Sans',sans-serif !important; font-size:13px; color:var(--mat-mute); padding:30px 0; } @media (max-width:1024px){ .mat-pal__grid{ grid-template-columns:repeat(min(var(--mat-cols,4),4),minmax(0,1fr)); } } @media (max-width:767px){ .mat-pal__grid{ grid-template-columns:repeat(min(var(--mat-cols,4),3),minmax(0,1fr)); gap:16px 10px; } } @media (max-width:440px){ .mat-pal__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ── lightbox ── */ .mat-lb{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px); background:rgba(12,10,8,.82); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:opacity .34s ease, visibility .34s; } .mat-lb.is-open{ opacity:1; visibility:visible; } .mat-lb__inner{ position:relative; display:flex; flex-direction:column; align-items:center; max-width:min(720px,90vw); width:100%; transform:scale(.965); opacity:0; transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease; } .mat-lb.is-open .mat-lb__inner{ transform:none; opacity:1; } .mat-lb__frame{ width:100%; aspect-ratio:1/1; max-height:62vh; overflow:hidden; border-radius:16px; background:#221F1A; box-shadow:0 40px 90px -40px rgba(0,0,0,.8); } .mat-lb__frame img{ width:100%; height:100%; object-fit:cover; display:block; } .mat-lb__cap{ text-align:center; margin-top:22px; color:#FFFFFF; } .mat-lb__grp{ font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.7); } .mat-lb__name{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; font-size:clamp(26px,3.4vw,40px); line-height:1.1; margin-top:10px; color:#FFFFFF; } .mat-lb__sub{ font-family:'DM Sans',sans-serif; font-size:12.5px; letter-spacing:.05em; color:rgba(255,255,255,.68); margin-top:8px; } .mat-lb__close, .mat-lb__nav{ position:absolute; z-index:3; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.16); color:#FFFFFF; border:1px solid rgba(255,255,255,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .3s ease, color .3s ease, border-color .3s ease; } .mat-lb__close:hover,.mat-lb__nav:hover{ background:#FFFFFF; color:#16130F; border-color:#FFFFFF; } .mat-lb__close{ top:-64px; right:0; } .mat-lb__nav--prev{ left:-68px; top:calc(31vh - 24px); } .mat-lb__nav--next{ right:-68px; top:calc(31vh - 24px); } @media (max-width:900px){ .mat-lb__close{ top:-58px; right:-4px; } .mat-lb__nav{ top:auto; bottom:-70px; } .mat-lb__nav--prev{ left:calc(50% - 62px); } .mat-lb__nav--next{ right:calc(50% - 62px); } .mat-lb__inner{ padding-bottom:60px; } } /* ============================================================ 5 · SPEC STRIP ============================================================ */ .mat-spec__box{ border-top:1px solid var(--mat-line); background:var(--mat-paper); padding:clamp(24px,2.6vw,38px) clamp(22px,2.6vw,40px); border-radius:0 0 var(--mat-radius) var(--mat-radius); } .mat--dark .mat-spec__box{ background:rgba(243,239,232,.05); } .mat-spec__grid{ display:grid; gap:clamp(20px,2.4vw,40px); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .mat-spec__label{ font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mat-mute); margin-bottom:8px; } .mat-spec__val{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:clamp(18px,1.5vw,22px); font-weight:400; line-height:1.34; color:var(--mat-ink); } .mat-spec__note{ font-family:'DM Sans',sans-serif !important; font-size:11.5px; line-height:1.65; color:var(--mat-mute); margin-top:20px; padding-top:16px; border-top:1px solid var(--mat-line-soft); } /* ============================================================ 6 · STORY (editorial split + steps) ============================================================ */ .mat-story__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4.4vw,84px); align-items:center; } .mat-story--flip .mat-story__media{ order:2; } .mat-story__media{ display:grid; gap:14px; } .mat-story__figure{ position:relative; overflow:hidden; border-radius:var(--mat-radius); aspect-ratio:var(--mat-story-ratio,4/5); background:var(--mat-paper); } .mat-story__figure--wide{ aspect-ratio:16/10; } .mat-story__img{ transition:transform 1.6s cubic-bezier(.22,.61,.36,1); } .mat-story__figure:hover .mat-story__img{ transform:scale(1.09); } .mat-story__duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .mat-story__badge, .mat-index__cap{ position:absolute; left:14px; bottom:12px; z-index:2; font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#FFF; background:rgba(10,8,6,.52); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:7px 12px; border-radius:999px; text-shadow:none; } .mat-story__title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:400; font-size:clamp(32px,4.4vw,58px); line-height:1.02; letter-spacing:-.012em; margin:16px 0 0; color:var(--mat-ink); } .mat-story__title em{ font-style:italic; color:inherit; } .mat-story__body{ font-weight:300; font-size:clamp(15px,1.08vw,17.5px); line-height:1.82; color:#4B463F; margin:22px 0 0; } .mat-story__body p{ margin:0 0 14px; } .mat-story__body p:last-child{ margin-bottom:0; } .mat-story__steps{ margin-top:clamp(26px,3vw,40px); display:grid; gap:0; } .mat-story__step{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; padding:16px 0; border-top:1px solid var(--mat-line-soft); } .mat-story__step:last-child{ border-bottom:1px solid var(--mat-line-soft); } .mat-story__stepN{ font-family:'DM Sans',sans-serif !important; font-size:11px; font-weight:400; letter-spacing:.16em; color:var(--mat-mute); padding-top:4px; } .mat-story__stepT{ font-family:'DM Sans',sans-serif !important; font-size:15px; font-weight:500; letter-spacing:0; color:var(--mat-ink); } .mat-story__stepB{ font-weight:300; font-size:14.5px; line-height:1.7; color:#6B655B; margin-top:6px; } .mat-story__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(26px,3vw,38px); } @media (max-width:900px){ .mat-story__grid{ grid-template-columns:1fr; } .mat-story--flip .mat-story__media{ order:0; } .mat-story__figure{ aspect-ratio:16/11; } } /* ============================================================ 7 · PIECES (products made in this material) ============================================================ */ .mat-pieces__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; } .mat-pieces__nav{ display:flex; gap:9px; } .mat-pieces__navbtn{ width:42px; height:42px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--mat-ink); border:1px solid var(--mat-line); transition:background .3s ease, color .3s ease, border-color .3s ease; } .mat-pieces__navbtn:hover{ background:var(--mat-ink); color:var(--mat-ivory); border-color:var(--mat-ink); } .mat--dark .mat-pieces__navbtn:hover{ background:#F3EFE8; color:#14120F; border-color:#F3EFE8; } .mat-pieces__scroller{ display:flex; gap:clamp(14px,1.6vw,24px); margin-top:clamp(26px,3vw,42px); overflow-x:auto; scroll-behavior:smooth; cursor:grab; padding-bottom:6px; -webkit-overflow-scrolling:touch; } .mat-pieces__scroller.is-dragging{ cursor:grabbing; scroll-behavior:auto; } .mat-pieces__scroller a,.mat-pieces__scroller img{ -webkit-user-drag:none; user-select:none; } .mat-pieces__card{ flex:0 0 clamp(230px,25vw,300px); text-decoration:none; color:inherit; display:block; } .mat-pieces__frame{ position:relative; display:block; overflow:hidden; border-radius:var(--mat-radius); aspect-ratio:1/1; background:var(--mat-paper); } .mat-pieces__img{ transition:transform 1.4s cubic-bezier(.22,.61,.36,1); } .mat-pieces__card:hover .mat-pieces__img{ transform:scale(1.1); } .mat-pieces__name{ display:block; font-family:'Cormorant Garamond',Georgia,serif !important; font-size:clamp(20px,1.7vw,25px); font-weight:400; line-height:1.24; color:var(--mat-ink); margin-top:14px; } .mat-pieces__meta{ display:block; font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mat-mute); margin-top:6px; } @media (max-width:560px){ .mat-pieces__card{ flex:0 0 74%; } } /* ============================================================ 8 · CTA (sampling band) ============================================================ */ .mat-cta{ position:relative; overflow:hidden; } .mat-cta__bg{ position:absolute; inset:0; z-index:0; width:100% !important; height:100% !important; object-fit:cover !important; opacity:var(--mat-cta-bg-op,.24); } .mat-cta__wrapRel{ position:relative; z-index:2; } .mat-cta__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,4vw,80px); align-items:center; } .mat-cta__title{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:400; font-size:clamp(34px,4.6vw,60px); line-height:1.02; letter-spacing:-.012em; margin:16px 0 0; color:var(--mat-ink); } .mat-cta__title em{ font-style:italic; color:inherit; } .mat-cta__body{ font-weight:300; font-size:clamp(15px,1.08vw,17.5px); line-height:1.82; color:var(--mat-stone); margin:22px 0 0; max-width:52ch; } .mat-cta__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(24px,3vw,34px); } .mat-cta__card{ background:var(--mat-paper); border-top:1px solid var(--mat-line); padding:clamp(26px,2.6vw,38px); border-radius:0 0 var(--mat-radius) var(--mat-radius); } .mat--dark .mat-cta__card{ background:rgba(243,239,232,.06); } .mat-cta__row + .mat-cta__row{ margin-top:20px; } .mat-cta__rowL{ font-family:'DM Sans',sans-serif !important; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mat-mute); margin-bottom:7px; } .mat-cta__rowV{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:clamp(18px,1.4vw,21px); font-weight:400; line-height:1.4; color:var(--mat-ink); } .mat-cta__rowV a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--mat-line); transition:border-color .3s ease, color .3s ease; } .mat-cta__rowV a:hover{ color:var(--mat-mute); border-color:var(--mat-mute); } @media (max-width:900px){ .mat-cta__grid{ grid-template-columns:1fr; } } /* ============================================================ KIT OVERRIDE — MUST STAY LAST The Elementor global kit writes `.elementor-kit-2529 h1…h6 { … }` (specificity 0,1,1) which silently beats every single-class rule in this file. Re-assert the full heading spec, scoped to the widget root so nothing outside .mh.mat is touched. See memory: melaaura-elementor-kit-heading-override. ============================================================ */ .mh.mat h1,.mh.mat h2,.mh.mat h3,.mh.mat h4,.mh.mat h5,.mh.mat h6{ font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif !important; font-weight:400 !important; text-transform:none !important; letter-spacing:-.015em !important; color:var(--mat-ink) !important; margin-top:0; } .mh.mat .mat-hero__title{ font-size:clamp(48px,8vw,118px) !important; line-height:.94 !important; font-weight:300 !important; color:#FFFFFF !important; letter-spacing:-.02em !important; } .mh.mat .mat-sec__title{ font-size:clamp(34px,5.4vw,68px) !important; line-height:1.0 !important; } .mh.mat .mat-story__title{ font-size:clamp(32px,4.4vw,58px) !important; line-height:1.02 !important; } .mh.mat .mat-cta__title{ font-size:clamp(34px,4.6vw,60px) !important; line-height:1.02 !important; } .mh.mat h1 em,.mh.mat h2 em,.mh.mat h3 em{ font-style:italic !important; } .mh.mat .mat-hero__title em{ color:inherit !important; } .mh.mat .mat-sec__title em, .mh.mat .mat-story__title em, .mh.mat .mat-cta__title em{ color:inherit !important; } .mat--dark.mh.mat h1,.mat--dark.mh.mat h2,.mat--dark.mh.mat h3, .mat--dark.mh.mat h4,.mat--dark.mh.mat h5,.mat--dark.mh.mat h6{ color:#F3EFE8 !important; } /* sans-serif headings used as labels (kit would re-serif / re-size them) */ .mh.mat h2.mat-eyebrow,.mh.mat h3.mat-eyebrow,.mh.mat h4.mat-eyebrow, .mh.mat h3.mat-pal__groupName,.mh.mat h4.mat-pal__groupName{ font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; font-size:11px !important; font-weight:500 !important; line-height:1.4 !important; letter-spacing:.26em !important; text-transform:uppercase !important; } .mh.mat h2.mat-eyebrow,.mh.mat h3.mat-eyebrow,.mh.mat h4.mat-eyebrow{ color:var(--mat-mute) !important; } .mh.mat h3.mat-pal__groupName,.mh.mat h4.mat-pal__groupName{ color:var(--mat-ink) !important; letter-spacing:.24em !important; } /* ── reduced motion ─────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .mh.mat *, .mh.mat *::before, .mh.mat *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } .mat-hero__img{ animation:none; } } /* ============================================================ BUTTON RESET — MUST STAY LAST Rey styles every bare