/** * Sarará Ensina – Card Professor (Hover Motion Final) */ /* =============================== GRID ================================ */ .srr-prof-grid-frontend { display: grid; gap: 10px; } .srr-cols-1 { grid-template-columns: 1fr; } .srr-cols-2 { grid-template-columns: repeat(2, 1fr); } .srr-cols-3 { grid-template-columns: repeat(3, 1fr); } .srr-cols-4 { grid-template-columns: repeat(4, 1fr); } /* =============================== GRID — RESPONSIVO (Elementor) Classes injetadas no wrapper: - Desktop: srr-cols-{N} - Tablet : srr-cols-t-{N} - Mobile : srr-cols-m-{N} =============================== */ /* IMPORTANTE (PREVIEW DO ELEMENTOR): No editor, a visualização de tablet/mobile pode NÃO reduzir a largura real do iframe o suficiente para disparar media queries. Então, duplicamos as regras responsivas usando as classes que o Elementor aplica no durante o preview (elementor-device-tablet/mobile). Isso afeta apenas o editor; no front continua valendo via @media. */ body.elementor-editor-active.elementor-device-tablet .srr-prof-grid-frontend.srr-cols-t-1{grid-template-columns:repeat(1,1fr)} body.elementor-editor-active.elementor-device-tablet .srr-prof-grid-frontend.srr-cols-t-2{grid-template-columns:repeat(2,1fr)} body.elementor-editor-active.elementor-device-tablet .srr-prof-grid-frontend.srr-cols-t-3{grid-template-columns:repeat(3,1fr)} body.elementor-editor-active.elementor-device-tablet .srr-prof-grid-frontend.srr-cols-t-4{grid-template-columns:repeat(4,1fr)} body.elementor-editor-active.elementor-device-tablet .srr-prof-grid-frontend.srr-cols-t-5{grid-template-columns:repeat(5,1fr)} body.elementor-editor-active.elementor-device-mobile .srr-prof-grid-frontend.srr-cols-m-1{grid-template-columns:repeat(1,1fr)} body.elementor-editor-active.elementor-device-mobile .srr-prof-grid-frontend.srr-cols-m-2{grid-template-columns:repeat(2,1fr)} body.elementor-editor-active.elementor-device-mobile .srr-prof-grid-frontend.srr-cols-m-3{grid-template-columns:repeat(3,1fr)} body.elementor-editor-active.elementor-device-mobile .srr-prof-grid-frontend.srr-cols-m-4{grid-template-columns:repeat(4,1fr)} body.elementor-editor-active.elementor-device-mobile .srr-prof-grid-frontend.srr-cols-m-5{grid-template-columns:repeat(5,1fr)} @media (max-width: 1024px) { .srr-prof-grid-frontend.srr-cols-t-1 { grid-template-columns: 1fr; } .srr-prof-grid-frontend.srr-cols-t-2 { grid-template-columns: repeat(2, 1fr); } .srr-prof-grid-frontend.srr-cols-t-3 { grid-template-columns: repeat(3, 1fr); } .srr-prof-grid-frontend.srr-cols-t-4 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .srr-prof-grid-frontend.srr-cols-m-1 { grid-template-columns: 1fr; } .srr-prof-grid-frontend.srr-cols-m-2 { grid-template-columns: repeat(2, 1fr); } .srr-prof-grid-frontend.srr-cols-m-3 { grid-template-columns: repeat(3, 1fr); } .srr-prof-grid-frontend.srr-cols-m-4 { grid-template-columns: repeat(4, 1fr); } } /* =============================== CARD ================================ */ .srr-prof-hover-card { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; } .srr-prof-hover-card img { width: 100%; height: 100%; object-fit: cover; } /* =============================== OVERLAY ================================ */ .srr-prof-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,1), rgba(0,0,0,0.5), rgba(0,0,0,0.00), rgba(0,0,0,0.00), rgba(0,0,0,0.00)); display: flex; align-items: flex-end; padding: 22px; } /* =============================== CONTENT ================================ */ .srr-prof-overlay-content { width: 100%; } /* =============================== NOME ================================ */ .srr-prof-overlay h4 { margin: 0 0 10px; font-size: 18px; font-weight: 500; color: #fff; transform: translateY(100px); transition: transform .4s ease; } /* =============================== PROFISSÃO (OCULTA) ================================ */ .srr-prof-overlay span { display: block; font-size: 15px; color: rgba(255,255,255,.85); opacity: 0; transform: translateY(10px); transition: all .8s ease; } /* =============================== AÇÕES (OCULTAS) ================================ */ .srr-prof-actions { display: flex; gap: 10px; margin-top: 12px; opacity: 0; transform: translateY(10px); transition: all .8s ease; } /* =============================== HOVER ================================ */ .srr-prof-hover-card:hover h4, .srr-prof-hover-card:hover span, .srr-prof-hover-card:hover .srr-prof-actions { opacity: 1; transform: translateY(0); } /* =============================== BOTÕES .srr-prof-actions a:hover, .srr-prof-actions button:hover { background: #fff; color: #000; } ================================ */ .srr-mais { display: flex !important; padding: 10px; border: 1px solid rgba(255,255,255,.7); } .srr-mais:hover * { color: var(--e-global-color-secondary); } .srr-mais:hover { color: var(--e-global-color-secondary); background-color: #fff; } .srr-prof-actions a, .srr-prof-actions button { display: grid; place-items: center; gap: 6px; border-radius: 10px; background: transparent; color: #fff; font-size: 12px; cursor: pointer; transition: all .8s ease; } .srr-prof-actions a.srr-wha:hover span {color: rgb(140 218 100 / 85%); } .srr-prof-actions a.srr-insta:hover span {color: rgb(255 49 182 / 85%); } /* =============================== MODAL – OVERLAY ================================ */ .srr-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; z-index: 9999; } /* garante centralização mesmo com fadeIn() */ .srr-modal-overlay[style*="display: block"] { display: flex !important; } /* =============================== MODAL – CONTAINER ================================ */ .srr-modal-content { background: #fff; width: 80vw; max-width: 1200px; height: 80vh; border-radius: 20px; position: relative; overflow: hidden; display: block; /* REMOVE centralização indevida */ } /* FECHAR */ .srr-modal-close { position: absolute; top: 16px; right: 20px; font-size: 28px; background: none; border: none; cursor: pointer; z-index: 2; } /* =============================== MODAL – LAYOUT ================================ */ .srr-modal-layout { width: 100%; height: 100%; display: flex; align-items: stretch; /* 🔴 ESSENCIAL */ } .srr-modal-photo { width: 50%; height: 100%; overflow: hidden; } .srr-modal-photo img { display: block; width: 100%; height: 100% !important; object-fit: cover; } .srr-modal-info { width: 50%; padding: 48px; overflow-y: auto; } .srr-modal-info h2 { margin-top: 0; font-size: 26px; } .srr-modal-info span { display: block; font-size: 15px; color: #64748b; margin-bottom: 16px; } .srr-modal-info p { font-size: 16px; line-height: 1.7; } /* =============================== MOBILE ================================ */ @media (max-width: 768px) { .srr-modal-layout { flex-direction: column; } .srr-modal-content { width: 90vw; height: 90vh; } } /* DASHICONS */ .srr-prof-actions .dashicons { width: auto; height: auto; }