/* ============================================================= FRONT-PAGE — CSS exclusivo mdjr-theme/assets/css/pages/front-page.css ============================================================= */ /* ── HERO / CARROSSEL ───────────────────────────────────────── Imagens: 1440 × 580 px → proporção 1440/580 ≈ 2.483 Altura controlada por padding-top para preservar proporção sem cortar o conteúdo. margin-top = header + adminbar. FULL-BLEED: o hero precisa "escapar" de qualquer container pai com max-width. A técnica usa margin-left negativo + width baseados em 100vw. Para funcionar, nenhum ancestral pode ter overflow:hidden — se houver, adicione overflow:clip no ou overflow:visible no wrapper imediato do hero. ──────────────────────────────────────────────────────────── */ .mdjr-hero { position: relative; /* ── Full-bleed: escapa do container pai ── */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* ── Espaço do header fixo ── */ margin-top: var(--mdjr-offset); /* ── Proporção 580/1440 = 40.28% — preserva as imagens inteiras ── */ padding-top: clamp(300px, 40.28vw, 580px); height: 0; background: var(--mdjr-escura); /* overflow:hidden local está OK porque os filhos são position:absolute */ overflow: hidden; } /* Fade suave entre header e carrossel */ .mdjr-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 90px; background: linear-gradient( to bottom, rgba(22, 33, 62, 0.72) 0%, rgba(22, 33, 62, 0.00) 100% ); z-index: 3; pointer-events: none; } .mdjr-hero-slide { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity 1.2s ease-in-out; cursor: pointer; } .mdjr-hero-slide.active { opacity: 1; } .mdjr-hero-slide-bg { position: absolute; inset: 0; width: 100%; background-size: cover; background-position: top center; background-repeat: no-repeat; } .mdjr-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.04) 45%, rgba(0,0,0,.00) 100% ); pointer-events: none; z-index: 1; } .mdjr-hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 5; } .mdjr-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); border: none; cursor: pointer; padding: 0; transition: background .3s, transform .25s; } .mdjr-hero-dot.active { background: rgba(255,255,255,.85); transform: scale(1.2); } /* ── HERO CAPTION ─────────────────────────────────────────── */ .mdjr-hero-caption { background: var(--mdjr-escura); padding: 44px 0 52px; text-align: center; /* Full-bleed — mesma técnica do hero */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .mdjr-hero-caption h1 { font-size: clamp(1.5rem, 3.5vw, 2.6rem); color: var(--mdjr-branco); line-height: 1.18; margin-bottom: 14px; } .mdjr-hero-caption p { font-size: clamp(0.92rem, 1.8vw, 1.1rem); color: rgba(255,255,255,.78); font-family: 'Trebuchet MS', sans-serif; margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; } /* ── SERVIÇOS ─────────────────────────────────────────────── */ .mdjr-servicos { padding: 80px 0; background: var(--mdjr-clara); } .mdjr-servicos-header { text-align: center; max-width: 640px; margin: 0 auto 48px; } .mdjr-servicos-header h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--mdjr-escura); margin-bottom: 8px; } .mdjr-servicos-header h3 { font-size: 1rem; font-weight: 400; color: #777; font-family: 'Trebuchet MS', sans-serif; margin-bottom: 14px; } .mdjr-servicos-header p { font-size: 0.92rem; line-height: 1.8; color: #555; } .mdjr-servicos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 44px; } .mdjr-servico-card { background: var(--mdjr-branco); border-radius: 12px; padding: 32px 24px; box-shadow: var(--mdjr-sombra); transition: transform .2s, box-shadow .2s; } .mdjr-servico-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0,0,0,.14); } .mdjr-servico-icon { width: 50px; height: 50px; background: rgba(200,149,42,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.4rem; } .mdjr-servico-card h4 { font-size: 1rem; color: var(--mdjr-escura); margin-bottom: 8px; } .mdjr-servico-card p { font-size: 0.87rem; line-height: 1.7; color: #666; } .mdjr-servicos-cta { text-align: center; } /* ── QUEM SOMOS ───────────────────────────────────────────── */ .mdjr-sobre { padding: 90px 0; background: var(--mdjr-branco); } .mdjr-sobre .mdjr-container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .mdjr-sobre-imgs { position: relative; min-height: 340px; } .mdjr-sobre-img-main { width: 80%; border-radius: 12px; box-shadow: var(--mdjr-sombra); } .mdjr-sobre-img-float { position: absolute; bottom: -20px; right: 0; width: 52%; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); border: 4px solid var(--mdjr-branco); } .mdjr-sobre-text h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); color: var(--mdjr-escura); margin-bottom: 8px; line-height: 1.2; } .mdjr-sobre-text h3 { font-size: 1rem; font-weight: 400; font-family: 'Trebuchet MS', sans-serif; color: var(--mdjr-primaria); margin-bottom: 16px; } .mdjr-sobre-text p { font-size: 0.92rem; line-height: 1.8; color: #555; margin-bottom: 14px; } /* ── PLANEJAMENTO ─────────────────────────────────────────── */ .mdjr-planejamento { padding: 90px 0; background: var(--mdjr-escura); } .mdjr-planejamento .mdjr-container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .mdjr-planejamento-text { color: var(--mdjr-branco); } .mdjr-planejamento-text h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); color: var(--mdjr-branco); margin-bottom: 8px; } .mdjr-planejamento-text h3 { font-size: 1rem; font-weight: 400; font-family: 'Trebuchet MS', sans-serif; color: var(--mdjr-primaria); margin-bottom: 28px; } .mdjr-planejamento-img img { border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.4); } /* ── COMO FUNCIONA ────────────────────────────────────────── */ .mdjr-como { padding: 90px 0; background: var(--mdjr-branco); } .mdjr-como .mdjr-container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .mdjr-como-img img { border-radius: 12px; box-shadow: var(--mdjr-sombra); } .mdjr-como-text h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); color: var(--mdjr-escura); margin-bottom: 8px; } .mdjr-como-text h3 { font-size: 1rem; font-weight: 400; font-family: 'Trebuchet MS', sans-serif; color: var(--mdjr-primaria); margin-bottom: 28px; } .mdjr-step { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; } .mdjr-step-icon { width: 42px; height: 42px; flex-shrink: 0; background: var(--mdjr-escura); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--mdjr-primaria); } .mdjr-step-content h4 { font-size: 0.95rem; color: var(--mdjr-escura); margin-bottom: 4px; } .mdjr-step-content p { font-size: 0.87rem; line-height: 1.7; color: #666; } /* ── PLANOS ───────────────────────────────────────────────── */ .mdjr-planos { padding: 90px 0; background: var(--mdjr-escura); position: relative; overflow: hidden; } .mdjr-planos::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(200,149,42,.12) 0%, transparent 70%); } .mdjr-planos .mdjr-container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .mdjr-planos-img img { border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.45); } .mdjr-planos-text { color: var(--mdjr-branco); } .mdjr-planos-text h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); color: var(--mdjr-branco); margin-bottom: 8px; } .mdjr-planos-text h3 { font-size: 1rem; font-weight: 400; color: var(--mdjr-primaria); font-family: 'Trebuchet MS', sans-serif; margin-bottom: 14px; } .mdjr-planos-text p { font-size: 0.92rem; line-height: 1.8; opacity: .85; margin-bottom: 28px; } /* ── DEPOIMENTOS ──────────────────────────────────────────── */ .mdjr-depoimentos { padding: 90px 0; background: var(--mdjr-clara); } .mdjr-depoimentos-header { max-width: 560px; margin-bottom: 44px; } .mdjr-depoimentos-header h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); color: var(--mdjr-escura); margin-bottom: 8px; } .mdjr-depoimentos-header p { font-size: 0.92rem; line-height: 1.8; color: #555; } .mdjr-depoimentos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .mdjr-depoimento-card { background: var(--mdjr-branco); border-radius: 12px; padding: 30px 26px; box-shadow: var(--mdjr-sombra); } .mdjr-depoimento-quote { font-size: 2.6rem; color: var(--mdjr-primaria); line-height: .8; margin-bottom: 12px; font-family: Georgia, serif; } .mdjr-depoimento-text { font-size: 0.87rem; line-height: 1.8; color: #555; margin-bottom: 18px; font-style: italic; } .mdjr-depoimento-author { display: flex; align-items: center; gap: 12px; } .mdjr-depoimento-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--mdjr-primaria); } .mdjr-depoimento-info strong { display: block; font-size: 0.92rem; color: var(--mdjr-escura); } .mdjr-depoimento-info span { font-size: 0.76rem; color: #999; font-family: 'Trebuchet MS', sans-serif; } /* ── RESPONSIVO ───────────────────────────────────────────── */ @media (max-width: 900px) { .mdjr-sobre .mdjr-container, .mdjr-planejamento .mdjr-container, .mdjr-como .mdjr-container, .mdjr-planos .mdjr-container { grid-template-columns: 1fr; } /* Inverte a ordem visual na seção planejamento no mobile */ .mdjr-planejamento .mdjr-container { direction: rtl; } .mdjr-planejamento .mdjr-container > * { direction: ltr; } .mdjr-sobre-imgs { min-height: 220px; } .mdjr-sobre-img-float { position: relative; bottom: auto; right: auto; width: 78%; margin-top: 14px; } } @media (max-width: 600px) { .mdjr-hero { padding-top: clamp(180px, 40.28vw, 400px); } .mdjr-hero-slide-bg { background-size: cover; background-position: top center; } .mdjr-servicos-grid, .mdjr-depoimentos-grid { grid-template-columns: 1fr; } }