@charset "utf-8"; /* CSS Document */ /* ======================================================================================= FONTES === */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* FONTES PUC 'Rethink Sans' Opções de font-weight: 400 a 800 'Literata' Opções de font-weight: 200 a 900 */ /* ========================================================================== ESTILOS PUC > CORES === */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ESQUEMA DE CORES ESPECÍFICOS PARA CADA SITE ATENÇÃO: Elementos em cinza não se apresentam neste css por serem neutros a qualquer site, mas estes podem ser anulados por estilos que começam com o nome do id específico para o site em questão, que será colocado na tag das páginas. */ /* ================================================================= TOPO === */ /* ========================================================================== */ /* ----- TÍTULO DA PÁGINA ----- */ #branding header h1 { /* color:#666666; */ } /* ----- CAMINHO / BREADCRUMB ----- */ #branding header nav a:link, #branding header nav a:visited { /* color:#AAA; */ } #branding header nav a:hover { /* color:#555; */ } /* ================================================================= MENU === */ /* ========================================================================== */ /* ----- MENU VAZIO (LINHA) ----- */ #branding header #puc_menu_vazio { /* background:#E5E5E5; */ } /* ----- MENU COMUM A PARTIR DAQUI ----- */ /* ------------------------------------- */ /* ----- FAIXA QUE ATRAVESSA A PÁGINA ----- */ @media (min-width:1140px) { #branding header #puc_menu_faixa { /* background:#9b9583; */ border-top:1px solid #9b9583; border-bottom:1px solid #9b9583; } /* fecha @media (min-width:1140px) */ } /* ----- LINHAS ACIMA E ABAIXO DA FAIXA ----- */ #branding header #menu span { background:#9b958300; } /* ----- DESATIVAÇÃO DAS BORDAS GRANDES DOS LINKS NO MENU DESKTOP (ex: CCCI) ----- */ @media (min-width:1140px) { #branding header #menu { margin:1px 10px 0 10px; } #branding header #menu span { top:0; margin-top:-1px; } #branding header #menu a:link, #branding header #menu a:visited { border-top:0; border-bottom:0; } /* fecha @media (min-width:1140px) */ } /* ----- MENU DESKTOP - LINKS ----- */ @media (min-width:1140px) { /* mouse out */ #branding header #menu a:link, #branding header #menu a:visited, #branding header #menu .puc_menu_submenu_linkmestre { border-bottom:4px solid rgba(70,70,255,0); } /* mouse over */ #branding header #menu a:hover, #branding header #menu .puc_menu_submenu_linkmestre:hover, #branding header #menu .puc_menu_submenu_conjunto:hover .puc_menu_submenu_linkmestre { /* color:#FFF; */ border-bottom:4px solid rgba(70,70,255,1); } /* fecha @media (min-width:1140px) */ } /* ----- MENU MOBILE - LINKS ----- */ @media (max-width:1139px) { /* mouse out */ #branding header #menu a:link, #branding header #menu a:visited, #branding header #menu .puc_menu_submenu_linkmestre { color:#000000; background:#FFFFFF; border-color:#9b9583; } /* mouse over */ #branding header #menu a:hover, #branding header #menu .puc_menu_submenu_linkmestre:hover, #branding header #menu .puc_menu_submenu_conjunto:hover .puc_menu_submenu_linkmestre { color:#000000 !important; background:#FFFFFF !important; /* border-color:#00a800 !important; */ } /* fecha @media (max-width:1139px) */ } /* ----- MENU MOBILE - BOTÃO "MENU" ----- */ #branding header button { /*color:#FFF; background:#7CA2B5; background-image:url(https://www.puc-rio.br/imagens/puc_menu_abrefecha.png); background-repeat:no-repeat;*/ color:#000; background: #F5F5F0; background-image: url(https://www.puc-rio.br/imagens/puc_icone_sanduiche_preto.svg); background-repeat: no-repeat; background-size: 35px; background-position-x: 20px; background-position-y: center; border-bottom: 1px solid #9b9583; border-top: 1px solid #9b9583; } @media (max-width: 1139px) { body header button::before, .menu_button_mobile::before { margin-right: 50px !important;}} /* ----- SUBMENU DESKTOP ----- */ @media (min-width:1140px) { #branding header #menu .puc_menu_submenu_links a:link, #branding header #menu .puc_menu_submenu_links a:visited { background:#043458; color:#97D3FF; } #branding header #menu .puc_menu_submenu_links a:hover { color:#0092FF; background:#18496E; } /* fecha @media (min-width:1140px) */ } /* ----- SUBMENU MOBILE ----- */ @media (max-width:1139px) { #branding header #menu .puc_menu_submenu_links a:link, #branding header #menu .puc_menu_submenu_links a:visited { border-bottom:1px solid #9b9583; background:#F5F5F0; color:#000000; } #branding header #menu .puc_menu_submenu_links a:hover { background:#00a800; color:#000000; } /* fecha @media (max-width:1139px) */ } /* ================================================================= MEIO === */ /* ========================================================================== */ /* ----- BORDA AO FINAL DO CONTEÚDO ----- */ #branding section { /* border-bottom-color:#DDDDDD; */ } /* ============================================= MEIO >> COLUNA PRINCIPAL === */ /* ========================================================================== */ /* ----- TÍTULOS ----- */ #branding h1 { /* color:#666666; */ } #branding h2 { /* color:#083459; text-align: center; margin: 60px auto; */ } #branding h3 { /* color:#09AEFF; */ } #branding h4 { /* color:#0B5182; */ } #branding h5 { /* color:#68a9d7; */ } /* ----- TEXTO DESTAQUE EM QUADRO ----- */ #branding section .puc_texto_destaque_em_quadro_centro, #branding section .puc_texto_destaque_em_quadro_esquerda, #branding section .puc_texto_destaque_em_quadro_direita { /* background:#FFFFFF; color:#000000; */ } /* ----- LINKS (GERAL) ----- */ #branding a:link, #branding a:visited { /* color:#000000; */ } #branding a:hover { /* color:#000000; */ } /* ----- LINK VOLTAR ----- */ #branding section article button.puc_link_voltar_TAG-BUTTON { /* color:#043458; background:#D4DEE9; */ } #branding section article button.puc_link_voltar_TAG-BUTTON:hover { /* color:#FFF; background:#043458; */ } /* ----- LINK DESTAQUE ----- */ #branding a.puc_link_destaque_TAG-A:link, #branding a.puc_link_destaque_TAG-A:visited, #branding a.puc_link_destaque_centralizado_TAG-A:link, #branding a.puc_link_destaque_centralizado_TAG-A:visited { background:#000000; color:#f5f5f0; } #branding a.puc_link_destaque_TAG-A:hover, #branding a.puc_link_destaque_centralizado_TAG-A:hover { background:#FFFFFF; color:#000000; } /* ----- LINK DE PAGINAÇÃO ----- */ #branding section article .puc_link_paginacao_anterior_TAG-A:link, #branding section article .puc_link_paginacao_anterior_TAG-A:visited, #branding section article .puc_link_paginacao_proximo_TAG-A:link, #branding section article .puc_link_paginacao_proximo_TAG-A:visited { /* color:#1A73A0; */ } #branding section article .puc_link_paginacao_anterior_TAG-A:hover, #branding section article .puc_link_paginacao_proximo_TAG-A:hover { /* color:#09AEFF; */ } /* ----- GALERIA DE IMAGENS ----- */ /* thumbnails */ #branding section article .puc_imagem_galeria a:link, #branding section article .puc_imagem_galeria a:visited { background:rgba(0,0,0,0.08); } #branding section article .puc_imagem_galeria a:hover { background:rgba(0,0,0,0.04); } /* legenda dos thumbnails */ #branding section article .puc_imagem_galeria a:link .puc_texto_menor, #branding section article .puc_imagem_galeria a:visited .puc_texto_menor, #branding section article .puc_imagem_galeria a figure { color:#000000; } #branding section article .puc_imagem_galeria a:hover .puc_texto_menor, #branding section article .puc_imagem_galeria a:hover figure { color:#000000; } /* ----- TABELA ----- */ /* bordas da tabela */ #branding section article .puc_tabela_padrao_TAG-TABLE, #branding section article .puc_tabela_padrao_TAG-TABLE td { border-color:rgba(0,0,0,0.15); } /* linhas para tabela */ #branding section article .puc_tabela_linha_n1_TAG-TR { background:#000000; color:#FFFFFF; } #branding section article .puc_tabela_linha_n2_TAG-TR { background:rgba(0,0,0,0.4); color:#FFFFFF; } #branding section article .puc_tabela_linha_n3_TAG-TR { background:#FFFFFF; color:#000000; } #branding section article .puc_tabela_linha_clara_TAG-TR { background:rgba(0,0,0,0.04); } #branding section article .puc_tabela_linha_escura_TAG-TR { background:rgba(0,0,0,0.08); } #branding section article .puc_tabela_linha_alternada_TAG-TABLE tr:nth-child(odd) { background:rgba(0,0,0,0.08); } #branding section article .puc_tabela_linha_alternada_TAG-TABLE tr:nth-child(even) { background:rgba(0,0,0,0.02); } /* ----- LINHA HORIZONTAL ----- */ #branding hr { /* color:rgba(0,0,0,0.15); */ } /* ----- LISTAS ----- */ /* bullet */ #branding ul li::before { /* color:#09AEFF; */ } /* lista destaque */ #branding section .puc_lista_especial_TAG-UL li::before, #branding section .puc_lista_especial_item_unico_TAG-LI::before { /* color:#0B5182; */ } #branding section .puc_lista_especial_TAG-UL li, #branding section .puc_lista_especial_item_unico_TAG-LI { /* color:#0B5182; */ } /* ----- FORMULÁRIOS ----- */ /* área do formulário */ #branding article form { background:rgba(0,0,0,0.04); } /* campos de preenchimento */ #branding article form input[type=text], #branding article form input[type=password], #branding article form input[type=file], #branding article form textarea, #branding article form select { background:#FFF; border-color:rgba(0,0,0,0.15); } /* botão "enviar" */ #branding article form input[type=submit] { background:#000000; color:#FFFFFF; } #branding article form input[type=submit]:hover { background:rgba(0,0,0,0.8); color:#FFFFFF; } /* ----- PLAYER DE ÁUDIO ----- */ #branding section div.puc_player_audio_TAG-DIV { /* background:#B4CFE3; */ } #branding section div.puc_player_audio_TAG-DIV:hover { /* background:#81BFE7; */ } /* ----- LINKS REDES SOCIAIS ----- */ #branding div.puc_links_redes_sociais_TAG-DIV a img { width:40px; height:40px; } /* =============================================== MEIO >> COLUNA LATERAL === */ /* ========================================================================== */ /* ----- TÍTULO ----- */ #branding section aside .puc_texto_coluna-lateral_titulo { /* color:#09AEFF; */ } /* ----- BANNER DE TEXTO ----- */ #branding section aside p.puc_texto_coluna-lateral_banner_TAG-P { background:rgba(0,0,0,0.04); } /* ----- BANNER DE LINK ----- */ #branding section aside p.puc_texto_coluna-lateral_banner_TAG-P a:link, #branding section aside p.puc_texto_coluna-lateral_banner_TAG-P a:visited { color:#000000; background:rgba(0,0,0,0.04); } #branding section aside p.puc_texto_coluna-lateral_banner_TAG-P a:hover { background:#000000; color:#FFFFFF; } /* ========================================================================== ESTILOS ESPECÍFICOS === */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ================================================================================================== */ /* ----- AQUI ENTRA OS ESTILOS ESPECÍFICOS PARA O DEPTO/UNID ----- Para sobressair qualquer estilo já existente usar o ID do depto/unid (localizado no body) antes do nome da classe/id OU o termo "!important" */ /* ---------- ABAS PROGRAMAÇÃO ---------- */ @media (max-width:1139px) { #btttabs_outer, #btttabs_outerbolsas { max-width:100%; overflow:hidden; overflow-x:auto; } #btttabs { width:950px; } #btttabsbolsas{ width:1324px; } #btttabs_outer .puc_layout_coluna_5cols_nivelador, #btttabs_outerbolsas .puc_layout_coluna_5cols_nivelador { display:flex; align-items:stretch; justify-content:space-between; flex-wrap:wrap; margin-bottom:0; } #btttabs_outer .puc_layout_coluna_5cols_interno, #btttabs_outerbolsas .puc_layout_coluna_5cols_interno { width:calc(20% - 24px); margin-bottom:0; } } /* para melhor visualizar as abas no mobile */ @media (max-width: 800px) { #btttabs { width: 780px; } } /* == HEADER =================================================================== */ /* ============================================================================= */ #fotos { width:100%; max-width:100%; max-height:902px; margin:25px 0 0 0; } #fotos_inner { position:relative; overflow:hidden; display:flex; align-items:center; width:100%; padding-top:100%; } #fotos img { position:absolute; top:50%; width:100%; height:auto; margin-top:-50%; margin-left:0; left:0; z-index:4; } #foto1 { animation-name:slidefoto1; animation-duration:25s; animation-delay:1s; animation-iteration-count:infinite; } #foto2 { animation-name:slidefoto2; animation-duration:25s; animation-delay:1s; animation-iteration-count:infinite; } #foto3 { animation-name:slidefoto3; animation-duration:25s; animation-delay:1s; animation-iteration-count:infinite; } #foto4 { animation-name:slidefoto4; animation-duration:25s; animation-delay:1s; animation-iteration-count:infinite; } #foto5 { animation-name:slidefoto5; animation-duration:25s; animation-delay:1s; animation-iteration-count:infinite; } @keyframes slidefoto1 { 0% { opacity:1; } 20% { opacity:0; } 40% { opacity:0; } 60% { opacity:0; } 80% { opacity:0; } 100% { opacity:1; } } @keyframes slidefoto2 { 0% { opacity:0; } 20% { opacity:1; } 40% { opacity:0; } 60% { opacity:0; } 80% { opacity:0; } 100% { opacity:0; } } @keyframes slidefoto3 { 0% { opacity:0; } 20% { opacity:0; } 40% { opacity:1; } 60% { opacity:0; } 80% { opacity:0; } 100% { opacity:0; } } @keyframes slidefoto4 { 0% { opacity:0; } 20% { opacity:0; } 40% { opacity:0; } 60% { opacity:1; } 80% { opacity:0; } 100% { opacity:0; } } @keyframes slidefoto5 { 0% { opacity:0; } 20% { opacity:0; } 40% { opacity:0; } 60% { opacity:0; } 80% { opacity:1; } 100% { opacity:0; } } /* == PROGRAMACAO=============================================================== */ /* ============================================================================= */ #quadrosgrupo {} #quadrosgrupo h2 { margin-top:0; font-size:1.7em; } #quadrosgrupo p { margin:0 0 10px 10px; } .programacao_texto { border-left:2px solid; margin-bottom:40px; padding-bottom:1px; } .programacao_texto h3 { font-size:1.3em; margin:25px 0 10px 0; display:flex; align-items:flex-start; } .programacao_texto h3:first-child { margin:30px 0 10px 0; } #grupo1_conteudo .programacao_texto:last-child, #grupo2_conteudo .programacao_texto:last-child, #grupo3_conteudo .programacao_texto:last-child, #grupo4_conteudo .programacao_texto:last-child, #grupo5_conteudo .programacao_texto:last-child { margin-bottom:0; } #quadrosgrupo h3 span:first-child { word-wrap:normal; display:inline-block; padding:6px 10px 5px 10px; margin-right:9px; border-radius:0 3px 3px 0; } #grupo1_conteudo h3 span:first-child { background:#030053; color:#F5F5F0; } #grupo2_conteudo h3 span:first-child { background:#003900; color:#F5F5F0; } #grupo3_conteudo h3 span:first-child { background:#3a0062; color:#F5F5F0; } #grupo4_conteudo h3 span:first-child { background:#4646FF; color:#F5F5F0; } #grupo5_conteudo h3 span:first-child { background:#FFB52F; color:#000000; } #quadrosgrupo h3 span:nth-child(2) { display:inline-block; padding-top:6px; } #grupo1_conteudo .programacao_texto { border-color:#030053; } #grupo2_conteudo .programacao_texto { border-color:#003900; } #grupo3_conteudo .programacao_texto { border-color:#3a0062; } #grupo4_conteudo .programacao_texto { border-color:#4646FF; } #grupo5_conteudo .programacao_texto { border-color:#FFB52F; } /*@media (min-width: 1140px) {*/ #branding .puc_layout_coluna_5cols_interno {width: calc(33% - 24px) !important; margin-bottom: -15px !important;} /*}*/ /* ======================================================================================= */ /* ============================= SITE MODELO BANDING ===================================== */ /* ======================================================================================= */ #menu a:hover{color: #4646ff; border-bottom: 5px solid #4646ff; } #menu a, #menu a:link, #menu a:visited, #menu a:hover, header button, .menu_button_mobile {margin: 12px auto;} .ttl-inicial{text-align:center; margin: 50px auto;} .texto-inicial-2c, .texto-inicial-2c_peq { column-count: 2; column-gap: 40px; line-height: 30px; margin-bottom: 64px; font-weight: 400; line-height: 30px; } .texto-inicial-2c { font-size: 1.2em; } .texto-inicial-2c_peq { font-size: 1em; } .vest-texto-inicial-1c {font-family: "Literata", serif; font-size: 1.3em; font-weight: 400; line-height: 30px; margin-bottom: 64px; display: grid; grid-template-areas: "a a"; gap: 10px; grid-auto-columns: 50%;} .vest-texto-meio-1c{font-family: "Literata", serif; line-height: 30px; margin-bottom: 64px; display: grid; grid-template-areas: "a a"; gap: 10px; grid-auto-columns: 50%; font-weight: 400;} @media (max-width:680px) { .texto-inicial-2c, .texto-inicial-2c_peq { column-count:1; } } @media (max-width:800px) {.vest-texto-inicial-1c, .vest-texto-meio-1c{grid-template-areas: "a"; grid-auto-columns: 100%;}} /* ======= Silde show ======*/ .slide-geral { min-height:620px; } @media (max-width:680px) { .slide-geral { min-height:400px; } } .slideshow-container {border-radius:3px; } /* ======== voltar =========== */ .voltar-ao-topo{margin:90px 0;} .voltar-ao-topo .material-symbols-outlined{ transform:rotate(180deg); font-size: 1.2em; vertical-align: middle; font-weight: 500; } .voltar-ao-topo a:link, .voltar-ao-topo a:visited{ color: #4646FF !important; font-size: 24px; font-weight: 400; font-family: "Rethink Sans", sans-serif; } .conteudo_quadro_branco { background:#FFFFFF; /* font:1em "Literata", serif; */ padding:30px; border-radius:3px; } /* ============================Slide show========================*/ .slide-texto{ color: #f5f5f0; z-index:100; box-sizing: border-box; position: absolute; bottom: 45px; text-shadow: 2px 2px 2px rgba(17, 17, 17, 0.3); } .slide-texto-gradiente{ background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(34,193,195,0) 100%); position: absolute; bottom: 0; left: 0; height: 50%; width: 100%;} .slide-ttl{font-size: 3em; line-height: 1em !important; font-weight: 500; margin: 0 20px; text-align: center; font-family: "Rethink Sans", sans-serif; } .slide-stl{ line-height: 1em !important; font-weight: 400; margin: 0 20px; text-align: center; font-size: 18px; }