/* ========================================================= MINISTÉRIO DA FAMÍLIA · AD QUIXADÁ — TEMPLO CENTRAL Folha de estilo compartilhada por todas as páginas. TEMAS: o define data-tema para trocar a cor de acento da página, mantendo a mesma base de ardósia. data-tema="portal" → dourado (identidade do departamento) data-tema="casais" → azul (Encontro de Casais) data-tema="simposio" → coral (Simpósio de Família) ========================================================= */ :root{ --ardosia:#16262F; --ardosia-topo:#24404E; --ardosia-painel:#101D25; --ardosia-borda:rgba(255,255,255,.20); --dourado:#E8B33C; --azul:#2C5A94; --coral:#F0554A; --branco:#FFFFFF; --preto:#101010; --tinta:rgba(255,255,255,.74); --tinta-fraca:rgba(255,255,255,.52); --display:"Anton", Impact, sans-serif; --corpo:"Barlow", system-ui, -apple-system, sans-serif; --util:"Barlow Semi Condensed", "Barlow", sans-serif; --manuscrito:"Yellowtail", cursive; --acento:var(--dourado); --acento-texto:#2A1E05; } body[data-tema="casais"] { --acento:var(--azul); --acento-texto:#FFFFFF; } body[data-tema="simposio"]{ --acento:var(--coral); --acento-texto:#2B0B08; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; color:var(--branco); font-family:var(--corpo); line-height:1.6; background-color:var(--ardosia); background-image: radial-gradient(120% 70% at 50% 0%, var(--ardosia-topo) 0%, transparent 62%), radial-gradient(110% 80% at 12% 100%, #0C161C 0%, transparent 58%); background-attachment:fixed; -webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.08; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 46c14-26 26-6 12 14s-4 22 12 6 30-30 26-10-6 26 10 12 22-26 34-10'/%3E%3Cpath d='M150 40c18-22 22 2 10 16s2 18 16 4 24-22 22-6-2 20 12 8'/%3E%3Cpath d='M262 52c16-24 30-4 14 14s0 20 16 4 26-24 24-8'/%3E%3Cpath d='M20 128c20-28 28-2 14 16s6 20 20 2 26-24 26-8-4 22 12 10'/%3E%3Cpath d='M172 122c14-20 26-4 12 14s2 18 18 2 22-20 22-4'/%3E%3Cpath d='M296 134c18-24 24 0 12 16s6 16 20 2 20-18 20-4'/%3E%3Cpath d='M40 208c16-24 26-4 14 14s4 18 18 2 24-22 24-6'/%3E%3Cpath d='M190 214c18-26 28-4 14 14s6 18 20 2 22-20 24-4'/%3E%3Cpath d='M312 206c14-20 26-4 12 14s4 16 18 2'/%3E%3C/g%3E%3C/svg%3E"); } .wrap{max-width:1040px;margin:0 auto;padding:0 24px;position:relative;z-index:1} /* ---------- CABEÇALHO ---------- */ .topo{ padding:26px 0 18px;border-bottom:1px solid var(--ardosia-borda); position:relative;z-index:2; } .topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{text-decoration:none;color:var(--branco);display:block} .logo strong{ display:block;font-family:var(--display);font-size:1.3rem; letter-spacing:.02em;text-transform:uppercase;line-height:1; } .logo span{ display:block;font-family:var(--util);font-weight:500; font-size:.7rem;letter-spacing:.34em;text-transform:uppercase; color:var(--tinta);margin-top:4px;padding-left:.34em; } .menu{display:flex;gap:26px;flex-wrap:wrap} .menu a{ font-family:var(--util);font-weight:600;font-size:.8rem; letter-spacing:.16em;text-transform:uppercase; color:var(--tinta);text-decoration:none;padding:4px 0; border-bottom:2px solid transparent; } .menu a:hover, .menu a[aria-current="page"]{color:var(--branco);border-bottom-color:var(--acento)} /* ---------- TIPOGRAFIA COMUM ---------- */ .eyebrow{ font-family:var(--util);font-weight:600; font-size:clamp(.76rem,2.2vw,.94rem);letter-spacing:.42em;text-transform:uppercase; color:var(--tinta);margin:0 0 16px;padding-left:.42em; } .eyebrow.acento{color:var(--acento)} h1{ font-family:var(--display);font-weight:400; font-size:clamp(2.9rem,11vw,6.4rem); line-height:.88;text-transform:uppercase;margin:0; } h2.secao{ font-family:var(--display);font-weight:400; font-size:clamp(1.7rem,5vw,2.5rem); line-height:1;text-transform:uppercase;margin:0 0 8px; } .lead{color:var(--tinta);font-weight:300;font-size:1.05rem;max-width:52ch} .btn{ display:inline-block;border:0;cursor:pointer;text-decoration:none; background:var(--acento);color:var(--acento-texto); font-family:var(--util);font-weight:700; font-size:.98rem;letter-spacing:.18em;text-transform:uppercase; padding:18px 40px; transition:transform .18s ease, box-shadow .18s ease; } .btn:hover{transform:translateY(-3px);box-shadow:0 12px 0 -6px rgba(0,0,0,.34)} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:3px solid var(--branco);outline-offset:4px} .btn.claro{background:var(--branco);color:var(--ardosia-painel)} .btn.vazado{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 2px var(--ardosia-borda)} .btn.vazado:hover{box-shadow:inset 0 0 0 2px var(--branco)} /* ---------- SEÇÕES ---------- */ section{position:relative;z-index:1} .secao-bloco{padding:66px 0} .secao-bloco.painel{background:var(--ardosia-painel)} .cabeca-secao{margin-bottom:34px} .cabeca-secao p{margin:0;color:var(--tinta);font-weight:300} /* ---------- CARTÕES DE EVENTO (home) ---------- */ .grade-eventos{display:grid;grid-template-columns:1fr 1fr;gap:22px} .cartao{ display:flex;flex-direction:column; background:rgba(255,255,255,.04); border:1px solid var(--ardosia-borda); border-top:5px solid var(--cor-evento, var(--dourado)); padding:30px 28px 28px; } .cartao .status{ display:inline-block;align-self:flex-start; font-family:var(--util);font-weight:700;font-size:.7rem; letter-spacing:.2em;text-transform:uppercase; background:var(--cor-evento, var(--dourado));color:#101010; padding:5px 12px;margin-bottom:16px; } .cartao .status.encerrado{background:transparent;color:var(--tinta-fraca);box-shadow:inset 0 0 0 1px var(--ardosia-borda)} .cartao .tipo{ font-family:var(--util);font-weight:600;font-size:.74rem; letter-spacing:.28em;text-transform:uppercase;color:var(--tinta); margin:0 0 8px;padding-left:.28em; } .cartao h3{ font-family:var(--display);font-weight:400; font-size:clamp(1.5rem,3.6vw,2rem);line-height:1; text-transform:uppercase;margin:0 0 14px; } .cartao .quando{ font-family:var(--util);font-weight:600;font-size:1rem; letter-spacing:.1em;text-transform:uppercase;color:var(--branco);margin:0 0 6px; } .cartao .onde{margin:0 0 16px;font-size:.94rem;color:var(--tinta);font-weight:300} .cartao .resumo{margin:0 0 22px;font-size:.98rem;color:var(--tinta);font-weight:300;flex:1} .cartao .rodape-cartao{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .cartao .valor{ font-family:var(--util);font-weight:700;font-size:.86rem; letter-spacing:.16em;text-transform:uppercase;color:var(--cor-evento, var(--dourado)); } .cartao .link{ font-family:var(--util);font-weight:700;font-size:.86rem; letter-spacing:.16em;text-transform:uppercase; color:var(--branco);text-decoration:none;border-bottom:2px solid var(--cor-evento, var(--dourado)); padding-bottom:3px; } .cartao .link:hover{border-bottom-color:var(--branco)} .cartao .contagem{ font-family:var(--util);font-weight:600;font-size:.76rem; letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-fraca);margin:14px 0 0; } .vazio{color:var(--tinta);font-weight:300} /* ---------- CULTOS ---------- */ .cultos{display:grid;grid-template-columns:1fr 1fr;gap:0} .cultos > div{ padding:30px 28px;border:1px solid var(--ardosia-borda); } .cultos > div + div{border-left:0} .cultos .ordinal{ font-family:var(--display);font-size:clamp(2.6rem,8vw,4rem); line-height:.9;color:var(--acento);margin:0 0 10px; } .cultos h3{ font-family:var(--display);font-weight:400;font-size:1.4rem; text-transform:uppercase;margin:0 0 8px;line-height:1.05; } .cultos p{margin:0;color:var(--tinta);font-weight:300;font-size:.98rem} /* ---------- LISTA SIMPLES (cursos / materiais) ---------- */ .lista{border-top:1px solid var(--ardosia-borda)} .lista > div{ padding:24px 0;border-bottom:1px solid var(--ardosia-borda); display:grid;grid-template-columns:170px 1fr;gap:8px 28px;align-items:start; } .lista dt{ font-family:var(--util);font-weight:600;font-size:.78rem; letter-spacing:.24em;text-transform:uppercase;color:var(--acento);padding-left:.24em; } .lista dd{margin:0;color:var(--tinta);font-weight:300} .lista dd strong{display:block;color:var(--branco);font-weight:600;margin-bottom:4px} /* ---------- FAIXA DE INFORMAÇÕES (páginas de evento) ---------- */ .infos{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ardosia-borda);border-bottom:1px solid var(--ardosia-borda); } .infos > div{padding:28px 20px} .infos > div + div{border-left:1px solid var(--ardosia-borda)} .infos dt{ font-family:var(--util);font-weight:600;font-size:.72rem; letter-spacing:.3em;text-transform:uppercase;color:var(--acento); margin-bottom:10px;padding-left:.3em; } .infos dd{margin:0;font-family:var(--display);font-size:1.2rem;line-height:1.18;text-transform:uppercase} .infos small{ display:block;font-family:var(--corpo);font-weight:300;font-size:.9rem; color:var(--tinta);margin-top:8px;line-height:1.5;text-transform:none; } .infos a{color:var(--branco);text-decoration:none;border-bottom:1px solid var(--ardosia-borda)} .infos a:hover{border-bottom-color:var(--branco)} /* ---------- PESSOAS ---------- */ .pessoas{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;text-align:center} .pessoas > div + div{border-left:1px solid var(--ardosia-borda)} .pessoas .nome{font-family:var(--display);font-size:clamp(1.3rem,3.6vw,1.8rem);line-height:1.05;text-transform:uppercase;margin:0} .pessoas .papel{ font-family:var(--util);font-weight:600;font-size:.8rem; letter-spacing:.26em;text-transform:uppercase;color:var(--tinta);margin:9px 0 0;padding-left:.26em; } .versiculo{max-width:56ch;margin:42px auto 0;text-align:center;font-weight:300;font-size:1.05rem;color:var(--tinta);line-height:1.7} .versiculo cite{ display:block;font-style:normal;font-family:var(--util);font-weight:600; font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--acento); margin-top:14px;padding-left:.26em; } /* ---------- PROGRAMAÇÃO ---------- */ .programa{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} .programa span{ font-family:var(--util);font-weight:600;font-size:.84rem; letter-spacing:.2em;text-transform:uppercase; border:1px solid var(--ardosia-borda);padding:11px 20px;color:var(--tinta); } /* ---------- FORMULÁRIO ---------- */ form{max-width:680px;margin:0 auto} .dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 22px} .campo{margin-bottom:26px} label{ display:block;font-family:var(--util);font-weight:600;font-size:.76rem; letter-spacing:.22em;text-transform:uppercase;color:var(--acento); margin-bottom:9px;padding-left:.22em; } input, select, textarea{ width:100%;background:transparent;color:var(--branco); font-family:var(--corpo);font-size:1.04rem; border:0;border-bottom:2px solid var(--ardosia-borda); padding:10px 0;border-radius:0;transition:border-color .18s ease; } textarea{resize:vertical;min-height:78px;line-height:1.55} select{appearance:none;cursor:pointer} select option{background:var(--ardosia-painel);color:var(--branco)} input:focus, select:focus, textarea:focus{outline:none;border-bottom-color:var(--acento)} input::placeholder, textarea::placeholder{color:rgba(255,255,255,.30)} .invalido{border-bottom-color:#FF9BB0 !important} .aviso{border:1px solid var(--ardosia-borda);padding:20px 22px;margin:6px 0 30px} .aviso strong{ display:block;font-family:var(--util);font-weight:700;font-size:.78rem; letter-spacing:.24em;text-transform:uppercase;color:var(--acento); margin-bottom:8px;padding-left:.24em; } .aviso p{margin:0;font-weight:300;font-size:.95rem;color:var(--tinta)} .erro{color:#FFD3DE;background:rgba(0,0,0,.28);font-size:.92rem;margin:20px 0 0;text-align:center} .erro:not(:empty){padding:12px 16px} .acoes{margin-top:36px;text-align:center} .nota{font-size:.9rem;color:var(--tinta);margin:18px auto 0;max-width:44ch;font-weight:300} .confirmado{display:none;text-align:center;max-width:620px;margin:0 auto} .confirmado .selo{ display:inline-block;background:var(--branco);color:var(--ardosia-painel); font-family:var(--util);font-weight:700;font-size:1rem; letter-spacing:.2em;text-transform:uppercase;padding:13px 26px; transform:rotate(-2deg);margin-bottom:24px; } .confirmado h3{font-family:var(--display);font-size:clamp(1.7rem,5vw,2.5rem);line-height:1;text-transform:uppercase;margin:0 0 14px} .confirmado p{color:var(--tinta);margin:0 auto 10px;max-width:46ch;font-weight:300} body.enviado form{display:none} body.enviado .confirmado{display:block} /* ---------- RODAPÉ ---------- */ footer{ border-top:1px solid var(--ardosia-borda); padding:36px 0 46px;text-align:center; font-family:var(--util);font-weight:500;font-size:.84rem; letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);line-height:2.1; position:relative;z-index:1; } footer a{color:var(--branco);text-decoration:none;border-bottom:1px solid var(--ardosia-borda)} footer a:hover{border-bottom-color:var(--branco)} /* ---------- MOVIMENTO ---------- */ .anima{opacity:0;animation:sobe .7s cubic-bezier(.2,.7,.3,1) forwards} .d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s} .d4{animation-delay:.4s}.d5{animation-delay:.52s} @keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} .anima{opacity:1} } /* ---------- RESPONSIVO ---------- */ @media (max-width:900px){ .infos{grid-template-columns:1fr 1fr} .infos > div:nth-child(3){border-left:0} .infos > div:nth-child(n+3){border-top:1px solid var(--ardosia-borda)} .grade-eventos{grid-template-columns:1fr} } @media (max-width:700px){ .topo .wrap{flex-direction:column;align-items:flex-start;gap:14px} .menu{gap:18px} .infos{grid-template-columns:1fr} .infos > div + div{border-left:0;border-top:1px solid var(--ardosia-borda)} .cultos{grid-template-columns:1fr} .cultos > div + div{border-top:0} .pessoas{grid-template-columns:1fr;gap:24px} .pessoas > div + div{border-left:0;border-top:1px solid var(--ardosia-borda);padding-top:24px} .lista > div{grid-template-columns:1fr;gap:6px} .dupla{grid-template-columns:1fr;gap:0} .secao-bloco{padding:48px 0} .btn{width:100%;padding:18px 20px;text-align:center} }