): - gallery-v-default → grid padrão - gallery-v-masonry → layout masonry (ajuste auto 1–3 colunas) - gallery-v-overlay → texto sobreposto na imagem [4] DEPOIMENTOS (aplicar no

): - (default) → card claro + carrossel - testimonials-v-cards → cards degradê (brand→brand-2) - testimonials-v-overlay → bg imagem c/ overlay escuro - testimonials-v-altgrid → slides variando layout (normal, invertido, central) - testimonials-v-split → card split com faixa lateral alternada NOTA: Navegação (setas/indicadores) adapta: - .section.soft → estilo escuro - .testimonials-v-overlay → estilo claro ========================================================================== */ /* ========================= 1) VARIÁVEIS & TEMAS ========================= */ :root{ --brand:#0ea5e9; --brand-2:#22c55e; --text:#0f172a; --muted:#64748b; --bg:#ffffff; --bg-soft:#f8fafc; --accent:#e2f2ff; --radius:1.25rem; --shadow:0 10px 30px rgba(2,6,23,.08); --hero-img:url('https://picsum.photos/1600/900?random=21'); --hero-band-h:42vh; --masonry-gap:1.5rem; --section-py:clamp(48px, 8vw, 80px); --gallery-bg-mix:14%; --gallery-sep-mix:28%; --bg-gallery: color-mix(in oklch, var(--brand) var(--gallery-bg-mix), var(--bg) calc(100% - var(--gallery-bg-mix))); --gallery-sep: color-mix(in oklch, var(--brand) var(--gallery-sep-mix), var(--bg) calc(100% - var(--gallery-sep-mix))); } .theme-ocean{ --brand:#2563eb; --brand-2:#06b6d4; --accent:#e1eaff; --bg-soft:#f5f7ff; --gallery-bg-mix:12%; --gallery-sep-mix:28%; } .theme-sunset{ --brand:#f97316; --brand-2:#ef4444; --accent:#fff1e6; --bg-soft:#fff7f1; --gallery-bg-mix:5%; --gallery-sep-mix:40%; } .theme-forest{ --brand:#15803d; --brand-2:#4ade80; --accent:#e6f9ec; --bg-soft:#f4faf6; --gallery-bg-mix:10%; --gallery-sep-mix:26%; } .theme-rose{ --brand:#db2777; --brand-2:#f472b6; --accent:#fff0f7; --bg-soft:#fff7fb; --gallery-bg-mix:8%; --gallery-sep-mix:30%; } .theme-lavender{ --brand:#7c3aed; --brand-2:#a78bfa; --accent:#f5f0ff; --bg-soft:#faf7ff; --gallery-bg-mix:14%; --gallery-sep-mix:28%; } .theme-sand{ --brand:#d97706; --brand-2:#facc15; --accent:#fff8eb; --bg-soft:#fffdf8; --gallery-bg-mix:6%; --gallery-sep-mix:34%; } .theme-midnight{ --brand:#0f172a; --brand-2:#334155; --accent:#e5f0ff; --bg-soft:#f3f6fc; --gallery-bg-mix:16%; --gallery-sep-mix:22%; } .theme-mint{ --brand:#10b981; --brand-2:#34d399; --accent:#e8fff7; --bg-soft:#f6fffc; --gallery-bg-mix:12%; --gallery-sep-mix:28%; } .theme-coral{ --brand:#e11d48; --brand-2:#fb7185; --accent:#fff0f2; --bg-soft:#fff8f9; --gallery-bg-mix:7%; --gallery-sep-mix:32%; } .theme-aurora{ --brand:#06b6d4; --brand-2:#8b5cf6; --accent:#f0faff; --bg-soft:#f9f6ff; --gallery-bg-mix:12%; --gallery-sep-mix:26%; } /* =================== 2) BASE TIPOGRAFIA & UTILITÁRIOS =================== */ body{ color:var(--text); background:var(--bg); } h1{ font-size:28px!important; } a.bg-white:hover { background-color: var(--brand-2)!important; } .text-muted{ color:var(--muted)!important; } .btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; } .btn-brand:hover{ background-color: var(--brand-2)!important; border-color:#0b8ccd; color:#fff; } .btn-ghost{ background:transparent; border:1px solid var(--brand); color:var(--brand); } .btn-ghost:hover{ background:var(--accent); } .badge-tag{ background:var(--accent); color:var(--brand); border:0; } .chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .75rem; border-radius:999px; border:1px solid rgba(2,6,23,.08); background:#fff; } .shadow-soft{ box-shadow:var(--shadow); } .rounded-xl{ border-radius:var(--radius)!important; } .object-fit-cover{ object-fit:cover; } /* ============================ 3) NAVBAR & CONTATOS ============================ */ .navbar{ background:#fff; } .navbar .nav-link{ color:var(--text); } .navbar .nav-link:hover{ color:var(--brand); } .nav-contacts a{ text-decoration:none; } .ig-link{ color:#e1306c; line-height:1; display:inline-flex; align-items:center; } .wa-inline{ color:#25d366; display:inline-flex; align-items:center; gap:.4rem; padding:.375rem .5rem; border-radius:999px; line-height:1; } .wa-inline i{ font-size:1.05rem; transform:translateY(1px); } .wa-inline:hover{ background:rgba(37,211,102,.08); } .tel-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(2,6,23,.08); background:#fff; color:var(--text); line-height:1; } .tel-chip i{ color:var(--brand); } .btn-ghost.wa-link{ border:none; background:transparent; padding:0; } .navbar-toggler{ border-color:rgba(0,0,0,.1); } .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(0,0,0,.05); } /* ================================ 4) HERO BASE ================================ */ .hero{ position:relative; color:#fff; min-height:72vh; display:grid; place-items:center; } .hero .hero-block{ background:transparent; border:0; margin-top: 80px;} .hero-card{ background:rgba(255,255,255,.08); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); } .hero h1{ font-weight:800; letter-spacing:-.02em; } .hero p{ color:#e2e8f0; } .kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--brand); background:var(--accent); padding:.25rem .75rem; border-radius:999px; } /* ---------------------------- 4.1 HERO: DEFAULT ---------------------------- */ .hero-v-default .hero, html:not([class*="hero-v-"]) .hero{ background:linear-gradient(to bottom right, rgba(15,23,42,.65), rgba(15,23,42,.35)), var(--hero-img) center/cover no-repeat fixed; } /* -------------------------- 4.2 HERO: CARD À DIREITA -------------------------- */ .hero-v-card-right .hero{ background:linear-gradient(90deg, rgba(15,23,42,.65) 0%, rgba(15,23,42,.35) 45%, rgba(15,23,42,0) 100%), var(--hero-img) center/cover no-repeat; min-height:70vh; } .hero-v-card-right .hero .hero-block{ background:rgba(255,255,255,.92); border:1px solid rgba(2,6,23,.08); color:var(--text); backdrop-filter:blur(4px); margin-top:10vh; margin-bottom:10vh; } .hero-v-card-right .hero .btn-ghost{ background:#fff; } .hero-v-card-right .hero p{ color:var(--muted); } @media (min-width:992px){ .hero-v-card-right .hero .hero-block{ margin-left:auto; width:min(720px,90%); } } @media (max-width:991.98px){ .hero-v-card-right .hero{ min-height:auto; padding:48px 0; } .hero-v-card-right .hero .hero-block{ margin:24px auto 0; } } /* ------------------------- 4.3 HERO: FAIXA COM OVERLAP ------------------------ */ .hero-v-band-overlap .hero{ background:none; padding:0 0 6rem; color:var(--text); } .hero-v-band-overlap .hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:var(--hero-band-h); min-height:260px; background:linear-gradient(to bottom, rgba(15,23,42,.55), rgba(15,23,42,.15)), var(--hero-img) center/cover no-repeat; z-index:0; } .hero-v-band-overlap .hero .hero-block{ position:relative; z-index:1; background:#fff; border:1px solid rgba(2,6,23,.08); max-width:920px; margin:0 auto; transform:translateY(calc(var(--hero-band-h) - 60%)); } .hero-v-band-overlap .hero p{ color:var(--muted); } .hero-v-band-overlap .btn-ghost{ background:#fff; } @media (max-width:991.98px){ .hero-v-band-overlap .hero::before{ height:36vh; min-height:220px; } .hero-v-band-overlap .hero{ padding-bottom:4.5rem; } .hero-v-band-overlap .hero .hero-block{ transform:translateY(calc(36vh - 50%)); margin-top:20px; padding:1rem 1.125rem; } } @media (max-width:575.98px){ .hero-v-band-overlap .hero::before{ height:32vh; min-height:200px; } .hero-v-band-overlap .hero .hero-block{ transform:translateY(calc(32vh - 40% + 24px)); } } /* ================================ 5) SEÇÕES ================================ */ .section{ padding:80px 0; } .section.soft{ background:var(--bg-soft); } /* =============================== 6) SERVIÇOS =============================== */ .service-card{ border:0; background:#fff; transition:transform .2s ease, box-shadow .2s ease; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); } .service-card:hover{ transform:translateY(-4px); } .service-media{ flex:0 0 40%; max-height:220px; overflow:hidden; } .service-media img{ width:100%; height:100%; object-fit:cover; } .service-body{ padding:1.25rem; } /* ----------- 6.1 ≥ LG ----------- */ @media (min-width:992px){ .service-card.d-lg-flex{ align-items:stretch; } .service-card.d-lg-flex .service-media{ flex:0 0 40%; max-height:none; } .service-card.d-lg-flex .service-media .ratio{ height:100%; } .service-card.d-lg-flex .service-media .ratio::before{ padding-top:0; } .service-card.d-lg-flex .service-media img{ width:100%; height:100%; object-fit:cover; } .service-card.d-lg-flex .service-body{ flex:1 1 auto; } /* -------- 6.3 Alternância de imagem (≥ LG) -------- */ .services-flip-even-right #services .row.gy-4 > [class*="col-"]:nth-child(even) .service-media{ order:2; } .services-flip-even-right #services .row.gy-4 > [class*="col-"]:nth-child(odd) .service-media{ order:0; } .services-flip-odd-right #services .row.gy-4 > [class*="col-"]:nth-child(odd) .service-media{ order:2; } .services-flip-odd-right #services .row.gy-4 > [class*="col-"]:nth-child(even) .service-media{ order:0; } } /* ----------- 6.2 < LG ----------- */ @media (max-width:991.98px){ .service-card{ display:block; } .service-media{ max-height:none; } .service-media img{ width:100%; height:auto; display:block; } .service-body{ padding:1rem 1rem 1.25rem; } } /* ======================= 7) FILTROS / BRANDS / RODAPÉ ======================= */ .filters{ display:flex; flex-wrap:wrap; gap:.5rem; } .filters .filter{ cursor:pointer; } .filters .active{ background:var(--brand); color:#fff; border-color:var(--brand); } .brands img{ filter:grayscale(1); opacity:.8; transition:opacity .2s; max-height:48px; } .brands img:hover{ opacity:1; filter:grayscale(0); } footer{ background:#0f172a; color:#cbd5e1; padding:28px 0; } /* =================== 8) DEPOIMENTOS – BASE & CONTROLES =================== */ #testimonials .testimonial-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(2,6,23,.06); } #testimonials .testimonial-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; } .section.soft:not(.testimonials-v-overlay) .carousel-control-prev-icon, .section.soft:not(.testimonials-v-overlay) .carousel-control-next-icon{ filter:none; background-image:none; width:2rem; height:2rem; border:2px solid var(--muted); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:"Font Awesome 7 Pro"; font-weight:900; font-size:1rem; } .section.soft:not(.testimonials-v-overlay) .carousel-control-prev-icon::after{ content:"\f104"; } .section.soft:not(.testimonials-v-overlay) .carousel-control-next-icon::after{ content:"\f105"; } .section.soft:not(.testimonials-v-overlay) .carousel-indicators [data-bs-target]{ background-color:var(--muted); } .section.soft:not(.testimonials-v-overlay) .carousel-indicators .active{ background-color:var(--brand); } /* ----------------------- 8.A VARIAÇÃO: ALTGRID ----------------------- */ .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card .d-flex{ flex-direction:row-reverse; text-align:right; } .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card p{ text-align:right; } .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(3) .testimonial-card .d-flex{ flex-direction:column; align-items:center; text-align:center; gap:.75rem; } .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(3) .testimonial-avatar{ width:88px; height:88px; box-shadow:0 6px 18px rgba(2,6,23,.12); } .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(3) .testimonial-card{ position:relative; } .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(3) .testimonial-card::before{ content:"\f10d"; font-family:"Font Awesome 7 Pro"; font-weight:900; position:absolute; left:1.25rem; top:1rem; font-size:1.5rem; color:color-mix(in srgb, var(--brand) 50%, #fff); opacity:.25; } @media (max-width:575.98px){ .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card .d-flex{ flex-direction:row; text-align:left; } .testimonials-v-altgrid #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card p{ text-align:left; } } /* ------------------------ 8.B VARIAÇÃO: SPLIT ------------------------ */ .testimonials-v-split #carouselTestimonials .testimonial-card{ position:relative; display:grid; grid-template-columns:260px 1fr; align-items:center; overflow:hidden; } .testimonials-v-split #carouselTestimonials .testimonial-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:260px; background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 65%, #fff) 0%, color-mix(in srgb, var(--brand-2) 40%, #fff) 100%); opacity:.15; pointer-events:none; } .testimonials-v-split #carouselTestimonials .testimonial-card > .d-flex{ grid-column:1; grid-row:1; flex-direction:column; align-items:center; text-align:center; } .testimonials-v-split #carouselTestimonials .testimonial-card > p{ grid-column:2; grid-row:1; margin:0; } .testimonials-v-split #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card{ grid-template-columns:1fr 260px; } .testimonials-v-split #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card::before{ inset:0 0 0 auto; left:auto; right:0; } .testimonials-v-split #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card > .d-flex{ grid-column:2; } .testimonials-v-split #carouselTestimonials .carousel-item:nth-child(2) .testimonial-card > p{ grid-column:1; text-align:right; } .testimonials-v-split #carouselTestimonials .carousel-item:nth-child(3) .testimonial-card{ grid-template-columns:220px 1fr; } @media (max-width:991.98px){ .testimonials-v-split #carouselTestimonials .testimonial-card{ grid-template-columns:1fr; } .testimonials-v-split #carouselTestimonials .testimonial-card::before{ width:100%; height:34%; inset:auto 0 0 0; } .testimonials-v-split #carouselTestimonials .testimonial-card > .d-flex{ grid-column:1; grid-row:1; flex-direction:row; text-align:left; justify-content:flex-start; } .testimonials-v-split #carouselTestimonials .testimonial-card > p{ grid-column:1; grid-row:2; margin-top:.5rem; text-align:left; } } /* ----------------------- 8.C VARIAÇÃO: OVERLAY ----------------------- */ .testimonials-v-overlay{ background:var(--hero-img) center/cover no-repeat fixed; position:relative; color:#222; } .testimonials-v-overlay::before{ content:""; position:absolute; inset:0; background:rgba(15,23,42,.7); } .testimonials-v-overlay .container{ position:relative; z-index:1; } .testimonials-v-overlay h2{ color:#fff; } .testimonials-v-overlay .testimonial-card{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); color:#222; border-radius:var(--radius); } .testimonials-v-overlay .testimonial-card p{ color:#222; } .testimonials-v-overlay .text-muted{ color:#aaa!important; } .testimonials-v-overlay .testimonial-avatar{ border:2px solid #222; } .testimonials-v-overlay .carousel-control-prev-icon, .testimonials-v-overlay .carousel-control-next-icon{ filter:none; background-image:none; width:2rem; height:2rem; border:2px solid rgba(255,255,255,.85); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:"Font Awesome 7 Pro"; font-weight:900; font-size:1rem; } .testimonials-v-overlay .carousel-control-prev-icon::after{ content:"\f104"; } .testimonials-v-overlay .carousel-control-next-icon::after{ content:"\f105"; } .testimonials-v-overlay .carousel-indicators [data-bs-target]{ background-color:rgba(255,255,255,.55); } .testimonials-v-overlay .carousel-indicators .active{ background-color:#fff; } /* ========================= 9) GALERIA – BASE COMUM ========================= */ .gallery-section{ padding:var(--section-py) 0; background:var(--bg-gallery, #f7f9fc); border-top:1px solid var(--gallery-sep, #eef2f7); border-bottom:1px solid var(--gallery-sep, #eef2f7); } .gallery-card{ border:0; background:#fff; box-shadow:var(--shadow); overflow:hidden; border-radius:var(--radius); } .gallery-thumb{ width:100%; height:220px; object-fit:cover; } .gallery-header{ padding:1rem; display:flex; justify-content:space-between; align-items:start; gap:1rem; } .gallery-desc{ padding:0 1rem 1rem; color:var(--muted); font-size:.95rem; } /* ----------------------- 9.1 GALERIA: DEFAULT ----------------------- */ .gallery-v-default #galleryGrid{ display:flex; flex-wrap:wrap; } .gallery-v-default .gallery-item{ display:block; } /* ----------------------- 9.2 GALERIA: MASONRY ----------------------- */ .gallery-v-masonry #galleryGrid{ display:block!important; margin-left:0!important; margin-right:0!important; column-count:3; column-gap:var(--masonry-gap); } .gallery-v-masonry #galleryGrid > [class*="col-"]{ display:inline-block; width:100%!important; max-width:100%!important; padding:0!important; margin:0 0 var(--masonry-gap)!important; flex:none!important; break-inside:avoid; -webkit-column-break-inside:avoid; } .gallery-v-masonry .gallery-thumb{ width:100%; display:block; object-fit:cover; } .gallery-v-masonry #galleryGrid .gallery-item:nth-child(3n) .gallery-thumb{ height:320px; } .gallery-v-masonry #galleryGrid .gallery-item:nth-child(3n + 1) .gallery-thumb{ height:260px; } .gallery-v-masonry #galleryGrid .gallery-item:nth-child(3n + 2) .gallery-thumb{ height:200px; } .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(3)):not(:has(> [class*="col-"]:nth-child(4))){ column-count:initial; column-gap:0; display:flex!important; flex-wrap:nowrap; gap:var(--masonry-gap); } .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(3)):not(:has(> [class*="col-"]:nth-child(4))) > [class*="col-"]{ flex:0 0 calc((100% - (2 * var(--masonry-gap))) / 3)!important; max-width:calc((100% - (2 * var(--masonry-gap))) / 3)!important; margin:0!important; } .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(2)):not(:has(> [class*="col-"]:nth-child(3))){ column-count:initial; column-gap:0; display:flex!important; flex-wrap:nowrap; gap:var(--masonry-gap); } .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(2)):not(:has(> [class*="col-"]:nth-child(3))) > [class*="col-"]{ flex:0 0 calc(50% - (var(--masonry-gap) / 2))!important; max-width:calc(50% - (var(--masonry-gap) / 2))!important; margin:0!important; } .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(1)):not(:has(> [class*="col-"]:nth-child(2))){ column-count:initial; column-gap:0; display:flex!important; } .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(1)):not(:has(> [class*="col-"]:nth-child(2))) > [class*="col-"]{ flex:0 0 100%!important; max-width:100%!important; margin:0!important; } @media (max-width:991.98px){ .gallery-v-masonry #galleryGrid{ column-count:2; } } @media (max-width:575.98px){ .gallery-v-masonry #galleryGrid{ column-count:1; } } @media (max-width: 991.98px){ .gallery-v-masonry #galleryGrid, .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(3)):not(:has(> [class*="col-"]:nth-child(4))), .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(2)):not(:has(> [class*="col-"]:nth-child(3))), .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(1)):not(:has(> [class*="col-"]:nth-child(2))) { display: block !important; column-count: initial !important; column-gap: 0 !important; } .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(3)):not(:has(> [class*="col-"]:nth-child(4))) > [class*="col-"], .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(2)):not(:has(> [class*="col-"]:nth-child(3))) > [class*="col-"], .gallery-v-masonry #galleryGrid:has(> [class*="col-"]:nth-child(1)):not(:has(> [class*="col-"]:nth-child(2))) > [class*="col-"]{ flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin: 0 0 var(--masonry-gap) !important; } .gallery-v-masonry #galleryGrid > [class*="col-"]{ display: block; flex: initial !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 0 var(--masonry-gap) !important; } .gallery-v-masonry #galleryGrid > [class*="col-"].d-none, .gallery-v-masonry #galleryGrid > [class*="col-"][hidden], .gallery-v-masonry #galleryGrid > [class*="col-"].is-hidden, .gallery-v-masonry #galleryGrid > [class*="col-"].isotope-hidden { display: none !important; } .gallery-v-masonry #galleryGrid .gallery-thumb{ height: auto !important; } } /* ----------------------- 9.3 GALERIA: OVERLAY ----------------------- */ .gallery-v-overlay .gallery-card{ position:relative; color:#fff; border-radius:var(--radius); overflow:hidden; } .gallery-v-overlay .gallery-thumb{ height:260px; object-fit:cover; transition:transform .3s ease; display:block; } .gallery-v-overlay .gallery-card:hover .gallery-thumb{ transform:scale(1.05); } .gallery-v-overlay .gallery-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.70) 100%); z-index:1; pointer-events:none; } .gallery-v-overlay .gallery-header, .gallery-v-overlay .gallery-desc{ position:absolute; left:0; right:0; padding:1rem; z-index:2; text-shadow:0 1px 2px rgba(0,0,0,.6); } .gallery-v-overlay .gallery-header{ top:0; display:flex; justify-content:space-between; align-items:start; } .gallery-v-overlay .gallery-desc{ bottom:0; font-size:.95rem; color:#fff; } .gallery-v-overlay .badge-tag{ background:rgba(255,255,255,.2); color:#fff; border-color:transparent; } .gallery-v-overlay .btn-ghost{ border-color:#fff; color:#fff; } .gallery-v-overlay .btn-ghost:hover{ background:rgba(255,255,255,.2); } @media (max-width:575.98px){ .gallery-v-overlay .gallery-thumb{ height:220px; } } .howit{ display:grid; gap:2rem; align-items:center; } @media (min-width: 992px){ .howit{ grid-template-columns: minmax(280px, 520px) 1fr; } } .howit--left .howit-imgs{ order:1; } .howit--left .howit-content{ order:2; } .howit--right .howit-imgs{ order:2; } .howit--right .howit-content{ order:1; } .howit-imgs{ display:grid; gap:1rem; grid-auto-rows: 150px; } .howit-img{ position:relative; overflow:hidden; border-radius: var(--radius); box-shadow: var(--shadow); background:#f3f4f6; } .howit-img img{ width:100%; height:100%; object-fit:cover; display:block; } .howit-imgs:not(:has(:nth-child(3))){ grid-template-columns: 1fr; grid-auto-rows: 210px; } .howit-imgs:has(:nth-child(3)):not(:has(:nth-child(4))){ grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .howit-imgs:has(:nth-child(3)):not(:has(:nth-child(4))) .howit-img:nth-child(1){ grid-row: span 2; } .howit-imgs:has(:nth-child(4)){ grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .howit-imgs:has(:nth-child(4)) .howit-img:nth-child(1){ grid-row: span 2; } .howit-imgs:has(:nth-child(4)) .howit-img:nth-child(4){ grid-column: 1 / -1; } @media (min-width: 576px){ .howit-imgs{ grid-auto-rows: 170px; } } @media (min-width: 992px){ .howit-imgs{ grid-auto-rows: 190px; } } .howit-content .kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--brand); background: var(--accent); padding:.25rem .75rem; border-radius:999px; } .howit-steps{ list-style:none; padding:0; margin:0; border-top:1px solid rgba(2,6,23,.06); } .howit-steps li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(2,6,23,.06); } .howit-steps .n{ font-weight:800; letter-spacing:.02em; min-width:2.5rem; color:var(--brand); } .howit-steps h5{ margin:0; } .howit-polaroid{ --howit-pol-h: 520px; --pol-w: 58%; } .howit-polaroid--tall{ --howit-pol-h: 680px; } @media (max-width: 991.98px){ .howit-polaroid{ --howit-pol-h: 480px; --pol-w: 62%; } .howit-polaroid--tall{ --howit-pol-h: 600px; } } @media (max-width: 575.98px){ .howit-polaroid{ --howit-pol-h: 420px; --pol-w: 66%; } .howit-polaroid--tall{ --howit-pol-h: 520px; } } .howit-polaroid .howit-imgs{ position: relative; height: var(--howit-pol-h); padding-right: clamp(8px, 2vw, 24px); } .howit-polaroid .howit-img{ position: absolute; width: var(--pol-w); aspect-ratio: 4/3; background: #fff; border-radius: 12px; padding: .6rem .6rem 1.1rem; box-shadow: 0 12px 34px rgba(2,6,23,.14), 0 2px 0 rgba(2,6,23,.06) inset; transform-origin: center; transition: transform .25s ease, box-shadow .25s ease, z-index .1s; } .howit-polaroid .howit-img img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; } .howit-polaroid .howit-img:hover{ z-index: 10 !important; transform: translateY(-15px) scale(1.05) rotate(0deg) !important; box-shadow: 0 24px 60px rgba(2,6,23,.22), 0 2px 0 rgba(2,6,23,.06) inset; } .howit-polaroid .howit-imgs:has(:nth-child(1)):not(:has(:nth-child(2))) .howit-img:nth-child(1){ left: 22%; top: 35%; width: 56%; transform: rotate(-3deg); } .howit-polaroid .howit-imgs:has(:nth-child(2)):not(:has(:nth-child(3))) .howit-img:nth-child(1){ left: 8%; top: 18%; width: 58%; transform: rotate(-8deg); } .howit-polaroid .howit-imgs:has(:nth-child(2)):not(:has(:nth-child(3))) .howit-img:nth-child(2){ left: 34%; top: 42%; width: 58%; transform: rotate(5deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(3)):not(:has(:nth-child(4))) .howit-img:nth-child(1){ left: 6%; top: 14%; width: 52%; transform: rotate(-9deg); } .howit-polaroid .howit-imgs:has(:nth-child(3)):not(:has(:nth-child(4))) .howit-img:nth-child(2){ left: 24%; top: 48%; width: 54%; transform: rotate(-2deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(3)):not(:has(:nth-child(4))) .howit-img:nth-child(3){ left: 42%; top: 8%; width: 50%; transform: rotate(7deg); z-index:3; } .howit-polaroid .howit-imgs:has(:nth-child(4)):not(:has(:nth-child(5))) .howit-img:nth-child(1){ left: 4%; top: 12%; width: 48%; transform: rotate(-8deg); z-index:1; } .howit-polaroid .howit-imgs:has(:nth-child(4)):not(:has(:nth-child(5))) .howit-img:nth-child(2){ left: 22%; top: 52%; width: 50%; transform: rotate(-3deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(4)):not(:has(:nth-child(5))) .howit-img:nth-child(3){ left: 36%; top: 4%; width: 46%; transform: rotate(6deg); z-index:3; } .howit-polaroid .howit-imgs:has(:nth-child(4)):not(:has(:nth-child(5))) .howit-img:nth-child(4){ left: 48%; top: 32%; width: 44%; transform: rotate(-2deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(1){ left: 2%; top: 8%; width: 44%; transform: rotate(-7deg); z-index:1; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(2){ left: 16%; top: 46%; width: 46%; transform: rotate(-2deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(3){ left: 32%; top: 2%; width: 42%; transform: rotate(8deg); z-index:3; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(4){ left: 44%; top: 28%; width: 40%; transform: rotate(-4deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(5){ left: 54%; top: 56%; width: 42%; transform: rotate(3deg); z-index:3; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(1){ left: 0%; top: 6%; width: 40%; transform: rotate(-6deg); z-index:1; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(2){ left: 12%; top: 42%; width: 42%; transform: rotate(-1deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(3){ left: 26%; top: 0%; width: 38%; transform: rotate(7deg); z-index:3; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(4){ left: 38%; top: 24%; width: 36%; transform: rotate(-3deg); z-index:2; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(5){ left: 48%; top: 52%; width: 38%; transform: rotate(4deg); z-index:3; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(6){ left: 58%; top: 14%; width: 36%; transform: rotate(-2deg); z-index:1; } @media (max-width: 991.98px){ .howit-polaroid .howit-imgs:has(:nth-child(3)):not(:has(:nth-child(4))) .howit-img:nth-child(2){ left:20%; } .howit-polaroid .howit-imgs:has(:nth-child(3)):not(:has(:nth-child(4))) .howit-img:nth-child(3){ left:36%; } .howit-polaroid .howit-imgs:has(:nth-child(4)):not(:has(:nth-child(5))) .howit-img:nth-child(3){ left:32%; } .howit-polaroid .howit-imgs:has(:nth-child(4)):not(:has(:nth-child(5))) .howit-img:nth-child(4){ left:44%; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(3){ left:28%; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(4){ left:40%; } .howit-polaroid .howit-imgs:has(:nth-child(5)):not(:has(:nth-child(6))) .howit-img:nth-child(5){ left:50%; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(3){ left:22%; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(4){ left:34%; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(5){ left:44%; } .howit-polaroid .howit-imgs:has(:nth-child(6)) .howit-img:nth-child(6){ left:54%; } } @media (max-width: 575.98px){ .howit--polaroid .howit-photos{ position: static !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; } .howit--polaroid .howit-photos *{ transform: none !important; } .howit--polaroid .howit-photos > *, .howit--polaroid .howit-photos :where(.polaroid, figure, .photo, .stack-item){ position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: min(94vw, 360px) !important; margin: 0 auto 12px !important; } .howit--polaroid:not(.howit--tall) .howit-photos > * + *{ margin-top: -8px !important; } .howit--polaroid.howit--tall .howit-photos > * + *{ margin-top: -24px !important; } } /* --- Modal Fullscreen / Stage --- */ .modal-gallery .modal-content{ background: rgba(0,0,0,.96); } .modal-gallery .gallery-stage{ min-height: 0; } .modal-gallery .carousel-inner{ height: 100%; } .modal-gallery .carousel-item{ height: 100%; } .modal-gallery .carousel-item.active, .modal-gallery .carousel-item-next, .modal-gallery .carousel-item-prev{ display: flex; align-items: center; justify-content: center; } .modal-gallery .carousel-item img{ max-width: 100%; max-height: 100%; object-fit: contain; } .modal-gallery .carousel-indicators{ bottom: 12px; z-index: 30; } .modal-gallery .gallery-caption{ position: absolute; left: 0; right: 0; bottom: 56px; padding: 1rem 2.5rem; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); z-index: 40; } .modal-gallery .carousel-control-prev-icon, .modal-gallery .carousel-control-next-icon{ width: 3rem; height: 3rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .modal-gallery .gallery-counter{ font-weight: 700; letter-spacing: .5px; margin-bottom: .25rem; opacity: .9; } @media (max-width: 576px){ .modal-gallery .carousel-indicators{ display: none; } .modal-gallery .gallery-caption{ bottom: 12px; } }