/* ============================================================================ MANET / מאנט - site design system (the ONE scoped CSS). Loaded site-wide (WPCode / mu-plugin). Every page body is markup-only, scoped under #manet. Re-implemented from lovable-src via brand/tokens.css. Monochrome greyscale, RTL-first, Heebo. WP-safe: no global bare-tag selectors. ========================================================================== */ /* Heebo loads via preconnect + stylesheet (manet-meta.php), not a render-blocking CSS import. */ #manet { --section-padding: clamp(4rem, 8vh, 8rem); --card-gap: clamp(1.25rem, 2.5vw, 2rem); --maxw: 1180px; --maxw-prose: 68ch; --radius: 0.75rem; --radius-sm: calc(var(--radius) - 4px); --radius-2xl: 16px; --radius-3xl: 24px; --background: 0 0% 100%; --foreground: 0 0% 0%; --card: 0 0% 98%; --primary: 0 0% 0%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 20%; --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; --border: 0 0% 90%; --ring: 0 0% 0%; --destructive: 0 84.2% 60.2%; --shadow-subtle: 0 1px 2px rgba(0,0,0,.08); --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1); --shadow-card-lg: 0 8px 24px rgba(0,0,0,.10); --shadow-elegant: 0 10px 30px -10px rgb(0 0 0 / 0.15); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --wa: #25D366; direction: rtl; color: hsl(var(--foreground)); font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: 'liga' on; -webkit-font-smoothing: antialiased; line-height: 1.65; } #manet *, #manet *::before, #manet *::after { box-sizing: border-box; } #manet img { max-width: 100%; height: auto; display: block; } #manet a { color: inherit; text-decoration: none; } #manet h1, #manet h2, #manet h3, #manet h4 { font-weight: 700; margin: 0; color: inherit; } #manet p { margin: 0; } #manet ul, #manet ol { margin: 0; } #manet h1, #manet h2, #manet h3, #manet p { hyphens: auto; } /* ---- type ---- */ #manet .t-display { font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.04; letter-spacing: -0.02em; } #manet .t-h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; } #manet .t-h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.2; } #manet .t-h4 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; } #manet .t-lead { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.6; } #manet .t-eyebrow { display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; } /* ---- layout ---- */ #manet .mnt-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } #manet .mnt-section { padding-block: var(--section-padding); } #manet .mnt-section--muted { background: hsl(var(--muted)); } #manet .mnt-section--ink { background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); } #manet .mnt-head { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); } #manet .mnt-head--left { margin-inline: 0; text-align: start; } #manet .mnt-head p { color: hsl(var(--muted-foreground)); margin-top: 1rem; } #manet .mnt-measure { max-width: var(--maxw-prose); } /* ---- buttons ---- */ #manet .mnt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: 1.02rem; padding: .95rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: var(--transition-smooth); white-space: nowrap; } #manet .mnt-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } #manet .mnt-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-elegant); } #manet .mnt-btn--wa { background: var(--wa); color: #fff; } #manet .mnt-btn--wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,.35); } #manet .mnt-btn--ghost { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); } #manet .mnt-btn--ghost:hover { background: hsl(var(--card)); } #manet .mnt-btn svg { width: 1.15em; height: 1.15em; } #manet .mnt-cta-row { display: flex; flex-wrap: wrap; gap: .85rem; } #manet .mnt-cta-row--center { justify-content: center; } /* ---- breadcrumbs ---- */ #manet .mnt-crumbs { font-size: .9rem; color: hsl(var(--muted-foreground)); padding-block: 1rem 0; } #manet .mnt-crumbs a:hover { color: hsl(var(--foreground)); text-decoration: underline; } #manet .mnt-crumbs span { margin-inline: .4rem; opacity: .5; } /* ---- hero ---- */ #manet .mnt-hero { padding-block: clamp(3rem, 6vw, 6rem) var(--section-padding); overflow: hidden; } #manet .mnt-hero--center { text-align: center; } #manet .mnt-hero--center .mnt-hero__lead { margin-inline: auto; } #manet .mnt-hero--center .mnt-cta-row { justify-content: center; } #manet .mnt-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; } #manet .mnt-hero__title { margin-bottom: 1.25rem; } #manet .mnt-hero__lead { color: hsl(var(--muted-foreground)); max-width: 52ch; margin-bottom: 2rem; } #manet .mnt-hero__badges { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 0; margin: 2.25rem 0 0; list-style: none; } #manet .mnt-hero__badges li { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: hsl(var(--secondary)); } #manet .mnt-hero__badges li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: hsl(var(--foreground)); } #manet .mnt-hero__media { position: relative; } #manet .mnt-hero__main { width: 100%; border-radius: var(--radius-3xl); box-shadow: var(--shadow-elegant); aspect-ratio: 553/829; object-fit: cover; } #manet .mnt-hero__float { position: absolute; width: 42%; max-width: 220px; border-radius: var(--radius-2xl); box-shadow: var(--shadow-card-lg); border: 4px solid #fff; object-fit: cover; aspect-ratio: 4/3; } #manet .mnt-hero__float--1 { top: 6%; inset-inline-start: -6%; } #manet .mnt-hero__float--2 { bottom: 8%; inset-inline-end: -5%; } /* ---- grids + cards ---- */ #manet .mnt-grid { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; } #manet .mnt-card { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-2xl); padding: clamp(1.5rem, 2.5vw, 2rem); box-shadow: var(--shadow-card); transition: var(--transition-smooth); } #manet .mnt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-lg); } #manet .mnt-card__icon { width: 56px; height: 56px; border-radius: var(--radius); display: grid; place-items: center; background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); margin-bottom: 1.1rem; } #manet .mnt-card__icon svg { width: 27px; height: 27px; } #manet .mnt-card h3 { margin-bottom: .55rem; } #manet .mnt-card p { color: hsl(var(--muted-foreground)); } /* ---- process steps ---- */ #manet .mnt-steps { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; } #manet .mnt-step__num { width: 56px; height: 56px; border-radius: 999px; background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; margin-bottom: 1rem; } #manet .mnt-step h3 { margin-bottom: .5rem; } #manet .mnt-step p { color: hsl(var(--muted-foreground)); } /* ---- two-column lists (services / guests / couple) ---- */ #manet .mnt-two { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; } #manet .mnt-two__col { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-3xl); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--shadow-card); } #manet .mnt-two__col h2, #manet .mnt-two__col h3 { font-size: 1.4rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .55rem; } #manet .mnt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; } #manet .mnt-list li { display: flex; align-items: flex-start; gap: .65rem; color: hsl(var(--secondary)); } #manet .mnt-list .ico { flex: none; } /* ---- pills (area links) ---- */ #manet .mnt-pills { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } #manet .mnt-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .65rem 1.2rem; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); font-weight: 500; transition: var(--transition-smooth); } #manet .mnt-pill:hover { background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); transform: translateY(-2px); } /* ---- event-type cards ---- */ #manet .mnt-events { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; } #manet .mnt-event { display: block; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-2xl); padding: clamp(1.5rem, 2.5vw, 2rem); box-shadow: var(--shadow-card); transition: var(--transition-smooth); text-align: center; } #manet .mnt-event:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-lg); } #manet .mnt-event__emoji { font-size: 2.2rem; display: block; margin-bottom: .75rem; } #manet .mnt-event h3 { margin-bottom: .5rem; } #manet .mnt-event p { color: hsl(var(--muted-foreground)); font-size: .95rem; } /* ---- 404 (branded not-found) ---- */ #manet .mnt-404 .mnt-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem); } #manet .mnt-404__big { font-size: clamp(5.5rem, 22vw, 13rem); font-weight: 900; line-height: .82; letter-spacing: -0.05em; color: hsl(0 0% 91%); margin: 0 0 .25rem; } /* ============ GALLERY · SLIDER · LIGHTBOX (premium) ============ */ /* ---- home showcase slider (multi-card, scroll-snap) ---- */ #manet .mnt-slider { position: relative; } #manet .mnt-slider__frame { position: relative; } #manet .mnt-slider__viewport { display: flex; gap: clamp(.8rem, 1.6vw, 1.3rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 8px 6px; -ms-overflow-style: none; scrollbar-width: none; } #manet .mnt-slider__viewport::-webkit-scrollbar { display: none; } #manet .mnt-slide { flex: 0 0 auto; width: clamp(228px, 66vw, 296px); aspect-ratio: 3/4; position: relative; border: none; padding: 0; margin: 0; background: hsl(var(--muted)); border-radius: var(--radius-2xl); overflow: hidden; scroll-snap-align: center; cursor: zoom-in; box-shadow: var(--shadow-card); transition: box-shadow .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); } #manet .mnt-slide:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); } #manet .mnt-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); } #manet .mnt-slide:hover img { transform: scale(1.07); } #manet .mnt-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.36), transparent 46%); opacity: 0; transition: opacity .45s; pointer-events: none; } #manet .mnt-slide:hover::after, #manet .mnt-slide:focus-visible::after { opacity: 1; } #manet .mnt-slide__zoom { position: absolute; inset-block-end: .85rem; inset-inline-end: .85rem; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.94); color: #111; display: grid; place-items: center; opacity: 0; transform: translateY(10px) scale(.85); transition: opacity .45s, transform .45s; pointer-events: none; } #manet .mnt-slide__zoom svg { width: 19px; height: 19px; } #manet .mnt-slide:hover .mnt-slide__zoom, #manet .mnt-slide:focus-visible .mnt-slide__zoom { opacity: 1; transform: none; } /* arrows */ #manet .mnt-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 54px; height: 54px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-card-lg); cursor: pointer; display: grid; place-items: center; color: hsl(var(--foreground)); transition: transform .3s, background .3s, box-shadow .3s; } #manet .mnt-slider__nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-elegant); } #manet .mnt-slider__nav:active { transform: translateY(-50%) scale(.95); } #manet .mnt-slider__nav--prev { inset-inline-end: -12px; } #manet .mnt-slider__nav--next { inset-inline-start: -12px; } #manet .mnt-slider__nav svg { width: 24px; height: 24px; } @media (max-width: 760px) { #manet .mnt-slider__nav { display: none; } } /* progress + hint */ #manet .mnt-slider__progress { height: 3px; width: min(220px, 60%); margin: 1.4rem auto 0; background: hsl(var(--border)); border-radius: 999px; overflow: hidden; } #manet .mnt-slider__progress span { display: block; height: 100%; width: 0; background: hsl(var(--foreground)); border-radius: 999px; transition: width .18s linear; } #manet .mnt-slider__hint { text-align: center; color: hsl(var(--muted-foreground)); font-size: .9rem; margin-top: .9rem; } @media (min-width: 760px) { #manet .mnt-slider__hint { display: none; } } /* ---- /gallery masonry (owner-managed native Gallery block; JS sets row-spans) ---- */ #manet .wp-block-gallery.mnt-managed-gallery { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 8px; gap: clamp(.7rem,1.5vw,1.1rem); align-items: start; justify-items: stretch; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem,4vw,2.5rem); padding-block: clamp(1rem,2vw,1.5rem) clamp(3rem,6vw,5rem); } #manet .wp-block-gallery.mnt-managed-gallery figure.wp-block-image { display: block; width: auto !important; justify-self: stretch; margin: 0; grid-row-end: span 30; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); position: relative; cursor: zoom-in; transition: box-shadow .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); } #manet .wp-block-gallery.mnt-managed-gallery figure.wp-block-image:hover { box-shadow: var(--shadow-elegant); transform: translateY(-4px); } #manet .wp-block-gallery.mnt-managed-gallery figure.wp-block-image img { width: 100%; height: auto; display: block; transition: transform .8s cubic-bezier(.22,1,.36,1); } #manet .wp-block-gallery.mnt-managed-gallery figure.wp-block-image:hover img { transform: scale(1.05); } #manet .wp-block-gallery.mnt-managed-gallery figure.wp-block-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.3), transparent 50%); opacity: 0; transition: opacity .45s; pointer-events: none; } #manet .wp-block-gallery.mnt-managed-gallery figure.wp-block-image:hover::after { opacity: 1; } #manet .wp-block-gallery.mnt-managed-gallery figcaption { display: none; } @media (min-width: 700px) { #manet .wp-block-gallery.mnt-managed-gallery { grid-template-columns: repeat(3,1fr); } } @media (min-width: 1100px) { #manet .wp-block-gallery.mnt-managed-gallery { grid-template-columns: repeat(4,1fr); } } /* ---- premium lightbox (shared by slider + gallery) ---- */ #manet .mnt-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem,4vw,3rem); background: rgba(8,8,8,.93); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; } #manet .mnt-lightbox.is-open { opacity: 1; visibility: visible; } #manet .mnt-lightbox__stage { position: relative; margin: 0; width: min(94vw, 1180px); height: min(82vh, 900px); display: flex; align-items: center; justify-content: center; transform: scale(.95); transition: transform .5s cubic-bezier(.22,1,.36,1); } #manet .mnt-lightbox.is-open .mnt-lightbox__stage { transform: none; } #manet .mnt-lightbox__img { position: absolute; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,.55); opacity: 0; transform: translateX(var(--enter, 0)) scale(.985); transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1); } #manet .mnt-lightbox__img.is-shown { opacity: 1; transform: none; } #manet .mnt-lightbox__close, #manet .mnt-lightbox__nav { position: absolute; z-index: 2; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, transform .3s, border-color .3s; } #manet .mnt-lightbox__close { top: clamp(1rem,3vw,1.75rem); inset-inline-end: clamp(1rem,3vw,1.75rem); width: 48px; height: 48px; } #manet .mnt-lightbox__close svg { width: 20px; height: 20px; } #manet .mnt-lightbox__close:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); } #manet .mnt-lightbox__nav { top: 50%; width: 56px; height: 56px; transform: translateY(-50%); } #manet .mnt-lightbox__nav:hover { background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.08); } #manet .mnt-lightbox__nav:active { transform: translateY(-50%) scale(.95); } #manet .mnt-lightbox__nav--prev { inset-inline-end: clamp(.5rem,2.5vw,1.75rem); } #manet .mnt-lightbox__nav--next { inset-inline-start: clamp(.5rem,2.5vw,1.75rem); } #manet .mnt-lightbox__nav svg { width: 26px; height: 26px; } #manet .mnt-lightbox__bar { position: absolute; inset-inline: 0; inset-block-end: clamp(.85rem,2.5vw,1.6rem); display: flex; flex-direction: column; align-items: center; gap: .3rem; color: rgba(255,255,255,.85); text-align: center; padding-inline: 4.5rem; } #manet .mnt-lightbox__counter { font-size: .82rem; letter-spacing: .12em; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; } #manet .mnt-lightbox__caption { font-size: .98rem; line-height: 1.5; max-width: 64ch; } @media (max-width: 600px) { #manet .mnt-lightbox__nav { width: 46px; height: 46px; } #manet .mnt-lightbox__bar { padding-inline: 1rem; } } /* ---- forms ---- */ #manet .mnt-form { display: grid; gap: 1.1rem; } #manet .mnt-field { display: grid; gap: .4rem; } #manet .mnt-field label { font-weight: 500; font-size: .98rem; } #manet .mnt-field label .opt { color: hsl(var(--muted-foreground)); font-weight: 400; font-size: .88rem; } #manet .mnt-field input, #manet .mnt-field textarea, #manet .mnt-field select { font-family: inherit; font-size: 1rem; padding: .85rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--background)); color: inherit; width: 100%; } #manet .mnt-field input:focus, #manet .mnt-field textarea:focus, #manet .mnt-field select:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; } /* ---- focus-visible (a11y): visible keyboard ring for every interactive element ---- */ #manet a:focus-visible, #manet button:focus-visible, #manet [tabindex]:focus-visible, #manet .mnt-btn:focus-visible, #manet .mnt-pill:focus-visible, #manet .mnt-faq__q:focus-visible, #manet .mnt-slide:focus-visible, #manet .mnt-slider__nav:focus-visible, #manet .mnt-fab:focus-visible, #manet .mnt-event:focus-visible, #manet .mnt-card:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: 6px; } /* light ring on dark surfaces (CTA band, ink sections, lightbox, FAB) */ #manet .mnt-band a:focus-visible, #manet .mnt-band button:focus-visible, #manet .mnt-section--ink a:focus-visible, #manet .mnt-lightbox button:focus-visible, #manet .mnt-fab:focus-visible { outline-color: #fff; } #manet .mnt-field .help { font-size: .82rem; color: hsl(var(--muted-foreground)); } #manet .mnt-form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } /* ---- CTA band ---- */ #manet .mnt-band { background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); border-radius: clamp(20px, 4vw, 32px); padding: clamp(2.5rem, 6vw, 4rem); text-align: center; } #manet .mnt-band h2 { margin-bottom: 1.5rem; } #manet .mnt-band .mnt-cta-row { justify-content: center; } #manet .mnt-band .mnt-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } #manet .mnt-band .mnt-btn--ghost:hover { background: rgba(255,255,255,.1); } /* ---- FAQ accordion ---- */ #manet .mnt-faq { max-width: 56rem; margin-inline: auto; display: grid; gap: .85rem; } #manet .mnt-faq__item { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); overflow: hidden; } #manet .mnt-faq__q { width: 100%; text-align: start; font-family: inherit; font-weight: 700; font-size: 1.05rem; padding: 1.1rem 1.3rem; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: inherit; } #manet .mnt-faq__q::after { content: "+"; font-weight: 400; font-size: 1.5rem; flex: none; transition: transform .2s; } #manet .mnt-faq__item.is-open .mnt-faq__q::after { transform: rotate(45deg); } #manet .mnt-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } #manet .mnt-faq__a > div { padding: 0 1.3rem 1.2rem; color: hsl(var(--muted-foreground)); } /* ---- pricing ---- */ #manet .mnt-price { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; align-items: stretch; } #manet .mnt-price__card { display: flex; flex-direction: column; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-3xl); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--shadow-card); } #manet .mnt-price__card--featured { border-color: hsl(var(--foreground)); border-width: 2px; box-shadow: var(--shadow-elegant); } #manet .mnt-price__tag { align-self: flex-start; font-size: .8rem; font-weight: 700; background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem; } #manet .mnt-price__name { font-size: 1.4rem; font-weight: 700; } #manet .mnt-price__amount { font-size: 2.4rem; font-weight: 900; margin: .5rem 0 1rem; } #manet .mnt-price__amount small { font-size: 1rem; font-weight: 500; color: hsl(var(--muted-foreground)); } #manet .mnt-price__card .mnt-list { margin-bottom: 1.5rem; } #manet .mnt-price__card .mnt-btn { margin-top: auto; } /* ---- reviews ---- */ #manet .mnt-reviews { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; } #manet .mnt-review { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-2xl); padding: clamp(1.5rem,2.5vw,2rem); box-shadow: var(--shadow-card); } #manet .mnt-review__stars { color: #f5b301; letter-spacing: 2px; margin-bottom: .75rem; } #manet .mnt-review__text { color: hsl(var(--secondary)); margin-bottom: 1rem; } #manet .mnt-review__by { font-weight: 700; } #manet .mnt-review__meta { font-size: .85rem; color: hsl(var(--muted-foreground)); } /* ---- prose (blog article) ---- */ #manet .mnt-prose { max-width: var(--maxw-prose); margin-inline: auto; } #manet .mnt-prose p { margin-bottom: 1.2rem; color: hsl(var(--secondary)); font-size: 1.08rem; } #manet .mnt-prose h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin: 2.2rem 0 1rem; } #manet .mnt-prose h3 { font-size: clamp(1.25rem,2vw,1.6rem); margin: 1.8rem 0 .8rem; } #manet .mnt-prose ul, #manet .mnt-prose ol { margin: 0 0 1.2rem; padding-inline-start: 1.4rem; color: hsl(var(--secondary)); display: grid; gap: .5rem; } #manet .mnt-prose img { border-radius: var(--radius-2xl); margin: 1.5rem 0; } #manet .mnt-prose a { text-decoration: underline; font-weight: 500; } /* ---- comparison table ---- */ #manet .mnt-table-wrap { overflow-x: auto; } #manet .mnt-table { width: 100%; border-collapse: collapse; min-width: 480px; } #manet .mnt-table th, #manet .mnt-table td { padding: .9rem 1rem; text-align: start; border-bottom: 1px solid hsl(var(--border)); } #manet .mnt-table th { font-weight: 700; background: hsl(var(--muted)); } /* ---- WhatsApp FAB ---- */ #manet .mnt-fab { position: fixed; bottom: 1.5rem; inset-inline-start: 1.5rem; z-index: 50; width: 60px; height: 60px; border-radius: 999px; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37,211,102,.45); transition: var(--transition-smooth); } #manet .mnt-fab:hover { transform: scale(1.06); } #manet .mnt-fab svg { width: 32px; height: 32px; } /* ---- toast ---- */ #manet .mnt-toast { position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; z-index: 70; background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); padding: .85rem 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow-elegant); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; pointer-events: none; } #manet .mnt-toast.is-show { opacity: 1; transform: none; } /* ---- scroll reveal ---- */ #manet .mnt-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } #manet .mnt-reveal.is-in { opacity: 1; transform: none; } /* ---- responsive ---- */ @media (min-width: 600px) { #manet .mnt-grid--2 { grid-template-columns: repeat(2,1fr); } #manet .mnt-grid--3 { grid-template-columns: repeat(2,1fr); } #manet .mnt-grid--4 { grid-template-columns: repeat(2,1fr); } #manet .mnt-steps { grid-template-columns: repeat(2,1fr); } #manet .mnt-two { grid-template-columns: 1fr 1fr; } #manet .mnt-events { grid-template-columns: repeat(2,1fr); } #manet .mnt-form__row { grid-template-columns: 1fr 1fr; } } @media (min-width: 760px) { #manet .mnt-hero__grid { grid-template-columns: 1.05fr .95fr; } } @media (min-width: 960px) { #manet .mnt-grid--3 { grid-template-columns: repeat(3,1fr); } #manet .mnt-grid--4 { grid-template-columns: repeat(4,1fr); } #manet .mnt-steps { grid-template-columns: repeat(4,1fr); } #manet .mnt-events { grid-template-columns: repeat(4,1fr); } #manet .mnt-price { grid-template-columns: repeat(3,1fr); } #manet .mnt-reviews { grid-template-columns: repeat(3,1fr); } } @media (prefers-reduced-motion: reduce) { #manet *, #manet *::before, #manet *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } #manet .mnt-reveal { opacity: 1; transform: none; } } /* ============ RICH FOOTER (logo + contact + hours + social + link columns + credit; outside #manet -> .mnt-footer) ============ */ .mnt-footer { background: hsl(0 0% 100%); color: hsl(0 0% 12%); font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; border-top: 1px solid hsl(0 0% 90%); } .mnt-footer *, .mnt-footer *::before, .mnt-footer *::after { box-sizing: border-box; } .mnt-footer a { color: inherit; text-decoration: none; } .mnt-footer__inner { max-width: 1180px; margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 1.5rem; } /* top: contact(+logo) / hours / follow */ .mnt-footer__top { display: grid; gap: 2.25rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; text-align: center; } @media (min-width: 760px) { .mnt-footer__top { grid-template-columns: 1.4fr 1fr 1fr; text-align: start; } } .mnt-footer__logo { display: inline-block; margin-bottom: 1.25rem; } .mnt-footer__logo img { height: 84px !important; width: auto !important; max-width: 240px; } .mnt-footer__h { font-size: 1.05rem; font-weight: 800; color: hsl(0 0% 8%); margin: 0 0 1rem; } .mnt-footer__contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; font-size: .95rem; color: hsl(0 0% 30%); } .mnt-footer__contact-list li { display: flex; align-items: center; gap: .6rem; justify-content: center; } @media (min-width: 760px) { .mnt-footer__contact-list li { justify-content: flex-start; } } .mnt-footer__contact-list a:hover { color: hsl(0 0% 0%); text-decoration: underline; text-underline-offset: 3px; } .mnt-footer__contact-list .is-muted { color: hsl(0 0% 60%); } .mnt-footer__ico { flex: none; width: 18px; height: 18px; color: hsl(0 0% 35%); } .mnt-footer__ico svg { width: 18px; height: 18px; display: block; } .mnt-footer__social { display: flex; gap: .6rem; justify-content: center; } @media (min-width: 760px) { .mnt-footer__social { justify-content: flex-start; } } .mnt-footer__social a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid hsl(0 0% 88%); display: grid; place-items: center; color: hsl(0 0% 15%); transition: background .25s, transform .25s, border-color .25s; } .mnt-footer__social a:hover { background: hsl(0 0% 6%); color: #fff; border-color: hsl(0 0% 6%); transform: translateY(-2px); } .mnt-footer__social svg { width: 18px; height: 18px; } /* link columns */ .mnt-footer__links { display: grid; gap: 1.75rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr 1fr; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid hsl(0 0% 92%); text-align: center; } @media (min-width: 760px) { .mnt-footer__links { grid-template-columns: repeat(4, 1fr); text-align: start; } } .mnt-footer__list { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .6rem; } .mnt-footer__list a { color: hsl(0 0% 38%); font-size: .94rem; transition: color .2s; } .mnt-footer__list a:hover { color: hsl(0 0% 0%); text-decoration: underline; text-underline-offset: 3px; } /* bottom bar */ .mnt-footer__bar { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.5rem; border-top: 1px solid hsl(0 0% 92%); font-size: .85rem; color: hsl(0 0% 45%); } .mnt-footer__bar a:hover { color: hsl(0 0% 0%); text-decoration: underline; text-underline-offset: 2px; } .mnt-footer__legal .sep { margin-inline: .4rem; opacity: .5; } .mnt-footer__credit { color: hsl(0 0% 55%); } .mnt-footer__credit a { font-weight: 700; color: hsl(0 0% 25%); } .mnt-footer a:focus-visible { outline: 2px solid hsl(0 0% 0%); outline-offset: 3px; border-radius: 3px; } @media (max-width: 600px) { .mnt-footer__bar { justify-content: center; text-align: center; flex-direction: column; } } /* ---- Astra header/footer chrome overrides (outside #manet) ---- */ /* header: size the logo down + drop the redundant text title (logo-only header) */ .ast-site-identity .custom-logo-link img, .site-header .custom-logo-link img { max-width: 132px !important; width: auto !important; height: auto !important; } .ast-site-identity .site-title, .site-header .site-title, .site-branding .site-title { display: none !important; } /* remove Astra's default "Powered by Astra" copyright bar — our .mnt-footer replaces it */ .site-below-footer-wrap, .ast-below-footer-wrap, footer .ast-below-footer-section { display: none !important; } /* ============ WEDDING BUDGET CALCULATOR (/calculator) ============ */ #manet .mnt-calc { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-3xl); padding: clamp(1.1rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-card); } #manet .mnt-calc__top { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; padding-bottom: 1.25rem; border-bottom: 1px solid hsl(var(--border)); } #manet .mnt-calc__guests, #manet .mnt-calc__addwrap { display: grid; gap: .4rem; font-weight: 700; font-size: .85rem; } #manet .mnt-calc__guests input, #manet .mnt-calc__add { font: inherit; font-weight: 600; padding: .6rem .8rem; border: 1.5px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--background)); color: hsl(var(--foreground)); } #manet .mnt-calc__guests input { width: 130px; } #manet .mnt-calc__add { min-width: 240px; } #manet .mnt-calc input[type=number] { -moz-appearance: textfield; } #manet .mnt-calc input[type=number]::-webkit-outer-spin-button, #manet .mnt-calc input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #manet .mnt-calc input:focus-visible, #manet .mnt-calc select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; } #manet .mnt-calc__head { display: none; } #manet .mnt-calc__row { position: relative; display: grid; gap: .5rem .9rem; grid-template-columns: 1fr 1fr 1fr; padding: 1rem .25rem; border-top: 1px solid hsl(var(--border)); } #manet .mnt-calc__name { grid-column: 1 / -1; font-weight: 700; font-size: 1.02rem; display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; padding-inline-end: 2.5rem; } #manet .mnt-calc__hook { font-size: .8rem; font-weight: 700; color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 2px; } #manet .mnt-calc__hook:hover { opacity: .65; } #manet .mnt-calc__cell { display: grid; gap: .25rem; min-width: 0; } #manet .mnt-calc__cap { font-size: .72rem; font-weight: 600; color: hsl(var(--muted-foreground)); } #manet .mnt-calc__cell input { font: inherit; width: 100%; padding: .55rem; border: 1.5px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--background)); color: hsl(var(--foreground)); text-align: start; } #manet .mnt-calc__del { position: absolute; top: .9rem; inset-inline-end: 0; width: 30px; height: 30px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: var(--transition-smooth); } #manet .mnt-calc__del:hover { background: hsl(var(--destructive)); color: #fff; border-color: hsl(var(--destructive)); } #manet .mnt-calc__row--magnet { background: hsl(var(--muted)); border-radius: var(--radius-2xl); border-top-color: transparent; box-shadow: inset 3px 0 0 hsl(var(--foreground)); } @media (min-width: 768px) { #manet .mnt-calc__head { display: grid; grid-template-columns: minmax(0,1.9fr) 1fr 1fr 1fr 38px; gap: .9rem; padding: .25rem .25rem .6rem; } #manet .mnt-calc__head span { font-size: .76rem; font-weight: 700; color: hsl(var(--muted-foreground)); } #manet .mnt-calc__row { grid-template-columns: minmax(0,1.9fr) 1fr 1fr 1fr 38px; align-items: center; gap: .9rem; padding: .65rem .25rem; } #manet .mnt-calc__name { grid-column: auto; padding-inline-end: 0; font-size: .98rem; } #manet .mnt-calc__cap { display: none; } #manet .mnt-calc__del { position: static; } } #manet .mnt-calc__summary { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.75rem; } @media (min-width: 768px) { #manet .mnt-calc__summary { grid-template-columns: repeat(5, 1fr); } } #manet .mnt-calc__stat { background: hsl(var(--muted)); border-radius: var(--radius-2xl); padding: 1rem .75rem; text-align: center; } #manet .mnt-calc__stat-label { display: block; font-size: .76rem; color: hsl(var(--muted-foreground)); margin-bottom: .4rem; } #manet .mnt-calc__stat-val { display: block; font-size: 1.15rem; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; } #manet .mnt-calc__stat--accent { background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); } #manet .mnt-calc__stat--accent .mnt-calc__stat-label { color: rgba(255,255,255,.72); } #manet .mnt-calc__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; } #manet .mnt-calc__note { font-size: .85rem; color: hsl(var(--muted-foreground)); }