/* ############# UPDATES 26/11 - Bioclinico ############### */ /* ### START GLOBAL ELEMENTS ### */ button, input { border-radius: 999px; } .ring-1, .focus\:ring-1:focus { --tw-ring-offset-shadow: unset; --tw-ring-shadow: unset; box-shadow: unset; } /* ### END GLOBAL ELEMENTS ### */ /* ### START HEADER ### */ header { > div { padding: 0; max-width: unset; .header-one { width: 100%; margin-right: auto; margin-left: auto; padding: 0 1.25rem; @media (min-width: 640px) { max-width: 640px; } @media (min-width: 768px) { max-width: 768px; } @media (min-width: 1024px) { max-width: 1024px; } @media (min-width: 1280px) { max-width: 1280px; padding-right: 2rem; padding-left: 2rem; } @media (min-width: 1536px) { max-width: 1536px; } > div { padding: 0; > a { img { @media (max-width: 767px) { height: auto; } } } .custom-header-links-container { gap: 24px; @media (min-width: 1280px) { gap: 56px; } @media (max-width: 1023px) { display: none; } .custom-items-desktop { border-radius: 24px 24px 0 0; &:hover { border-bottom: hsl(var(--terciary-alt)); border-left: hsl(var(--terciary-alt)); border-right: hsl(var(--terciary-alt)); } } } .lucide-menu { @media (max-width: 1023px) { order: 3; height: 40px; width: 40px; display: block; } } > div svg.lucide-search { @media (min-width: 768px) and (max-width: 1023px) { height: 40px; width: 40px; position: absolute; right: 80px; } } > div:not(.search-container) { > a { @media (min-width: 768px) { display: none; } } } .search-container { @media (max-width: 1023px) { order: 2; position: absolute; right: 80px; svg { height: 40px; width: 40px; } } } } } .sub-header { background-color: hsl(var(--secondary-alt)); > div > div { justify-content: space-between; .custom-sub-header-text { color: white; font-size: 0.875rem; } .custom-sub-header-buttons { flex-direction: row-reverse; > button { color: hsl(var(--secondary-alt)); font-weight: 600; font-size: 0.875rem; } .custom-sub-header-contacts { @media (max-width: 1023px) { border-radius: 100px; padding: 8px; box-shadow: 1px 1px 1px 0 rgba(0, 125, 179, 0.4) inset, -1px 1px 1px 0 rgba(0, 125, 179, 0.25) inset, 1px 1px 4px 0 rgba(0, 125, 179, 0.6) inset; } @media (min-width: 1024px) { a { display: flex; gap: 8px; color: white; border-bottom: 1px solid white; padding-bottom: 6px; } &:first-of-type { a { &:after { content: "27 2121-0022"; } } } &:nth-of-type(2) { a { &:after { content: "4004-6582"; } } } svg { width: 24px; height: 24px; } } } } } } } } .dd-menu-sub-items { border-radius: 0 0 24px 24px; border-right: hsl(var(--terciary-alt)); border-bottom: hsl(var(--terciary-alt)); border-left: hsl(var(--terciary-alt)); } .warning { background-color: hsl(var(--secondary-alt)); p, svg { color: hsl(var(--white-sub)); } } .menu-mobile { height: 100vh; overflow-y: auto; background-color: hsl(var(--primary)); > button { padding: 8px; width: fit-content; align-self: flex-end; background-color: hsl(var(--terciary-alt)); .lucide-x { color: hsl(var(--primary-sub)); } } nav { > div { &:nth-of-type(1) { display: block; } &:nth-of-type(2) { display: none; } &:nth-of-type(3) { display: block; /* display: none; */ } &:nth-of-type(4) { display: none; } } > a, h3 > button { font-family: "League Spartan"; font-size: 1.5rem; padding-top: 16px; padding-bottom: 16px; color: hsl(var(--primary-sub)); svg { color: hsl(var(--primary-sub)); } &:hover { color: hsl(var(--primary-sub)); } } .sub-item { span { font-size: 1.125rem; color: hsl(var(--primary-sub)); } } > *:not(:first-child) { border-top: 1px solid hsl(var(--neutral-1)); } } > div:last-of-type { display: none; } } /* ### END HEADER ### */ /* ### START FOOTER ### */ footer { .footer-contacts{ .footer-contact-item { &:first-of-type { p { display: none; } } p { font-size: 0.875rem; } } } .footer-bottom-content { a { font-size: 0.75rem; font-weight: 600; } } } /* ### END FOOTER ### */ /* ### START HOME ### */ .home { .hero-image { padding-top: 40px; padding-bottom: 40px; background-color: white; @media (max-width: 767px) { padding-top: 20px; padding-bottom: 20px; background-color: hsl(var(--primary-sub)); } > div img { border-radius: 24px; @media (max-width: 767px) { border-radius: 16px; } } .customSwiper { .custom-controls { position: absolute; bottom: 16px; right: 24px; z-index: 999; padding: 0; @media (max-width: 767px) { position: unset; padding-top: 16px; } .slide-arrows { color: hsl(var(--secondary-alt)); @media (max-width: 767px) { } .custom-prev { @media (max-width: 767px) { position: absolute; bottom: 0; left: 0; } } .custom-prev, .custom-next { background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(4px); box-shadow: 1px 1px 1px 0 rgba(255, 255, 255, 0.4) inset, -1px -1px 1px 0 rgba(255, 255, 255, 0.25) inset, -1px -1px 1px 0 rgba(161, 161, 161, 0.4) inset, 1px 1px 4px 0 rgba(255, 255, 255, 0.6) inset; height: 48px; width: 48px; } } .custom-pagination { display: flex; justify-content: center; align-items: center; padding-left: 48px; @media (min-width: 768px) { display: none; } .swiper-pagination-bullet { background-color: hsl(var(--neutral-2)); } .swiper-pagination-bullet-active { background-color: hsl(var(--secondary)); } } } } } .content-2col-rich { padding-top: 40px; padding-bottom: 40px; gap: 48px; justify-content: flex-start; > div { width: 100%; padding: 0; max-width: 472px; @media (min-width: 1536px) { max-width: 620px; } h3 { font-size: 2.25rem; margin-bottom: 12px; color: hsl(var(--secondary-alt)); @media (max-width: 767px) { font-size: 2rem; } } .content-rich-paragraph { color: hsl(var(--secondary-alt)); margin-bottom: 24px; } } .custom-content-2col-rich-image { width: 100%; max-width: 718px; border: 1px solid hsl(var(--terciary-alt)); border-radius: 24px; @media (min-width: 1536px) { max-width: 810px; } } } section:nth-of-type(3) { .grid-list { padding-top: 40px; padding-bottom: 40px; > div { position: relative; } h3 { color: hsl(var(--secondary-alt)); font-size: 2rem; } .grid-list-container { position: unset; > div { position: unset; } .card-two { box-shadow: none; > img { border-radius: 16px; border: 1px solid hsl(var(--terciary-alt)); } .custom-card-two-container { padding: 16px 0 0; .custom-card-two-description { margin: 4px 0 0; font-size: 1rem; color: hsl(var(--secondary-alt)); } .custom-card-two-btn-container { display: none; } } } } .custom-slider-shadow { @media(min-width:768px) and (max-width:1023px){ right: 1.125rem; } } .customSwiper { position: unset; .custom-controls { padding: 0; @media (max-width: 767px) { display: none; } .custom-pagination { display: none; } .slide-arrows { position: absolute; top: 0; right: 32px; z-index: 999; .custom-prev, .custom-next { box-shadow: 1px 1px 1px 0 rgba(255, 255, 255, 0.4) inset, -1px -1px 1px 0 rgba(255, 255, 255, 0.25) inset, -1px -1px 1px 0 rgba(161, 161, 161, 0.4) inset, 1px 1px 4px 0 rgba(255, 255, 255, 0.6) inset; background: hsl(var(--primary-alt) / 0.6); height: 48px; width: 48px; color: hsl(var(--secondary-alt)); } } } } } } section:nth-of-type(4) { .grid-list { padding-top: 40px; padding-bottom: 40px; .custom-grid-list-header-mobile { h3 { color: hsl(var(--secondary-alt)); font-size: 2rem; } .grid-list-btn-mobile { width: fit-content; font-weight: 600; text-decoration: underline; &::after { content: "Ver todos"; } span { display: none; } } } .custom-grid-list-header { display: flex; justify-content: space-between; gap: 24px; h3 { color: hsl(var(--secondary-alt)); } } .grid-list-container { .card-two { border-radius: 16px; border: 1px solid hsl(var(--primary-alt)); box-shadow: -1px -2px 3px 0 rgba(0, 125, 179, 0.2) inset, 1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset; > img { border-radius: 16px 16px 0 0; aspect-ratio: 3 / 2; } .custom-card-two-container { padding: 32px; border-radius: 0 0 16px 16px; @media (max-width: 767px) { padding: 24px; } .custom-card-categories { margin-bottom: 8px; span { font-size: 0.875rem; color: hsl(var(--secondary-alt)); padding: 0; background-color: transparent; opacity: 0.6; text-transform: capitalize; } } .custom-card-two-title { font-size: 1.375rem; } .custom-card-two-description { margin: 16px 0 0; color: hsl(var(--secondary-alt)); @media (max-width: 767px) { font-size: 1rem; } } .custom-card-two-btn-container { display: none; } } } } } } } /* ### END HOME ### */ /* ### START EXAMES E SERVICOS ### */ .exames-e-servicos { .title-one { background-color: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 40px; h1 { color: white; font-size: 2.25rem; font-weight: 500; @media (max-width: 767px) { font-size: 1.75rem; } } p { color: white; font-size: 1.125rem; } } } .list-exams { padding-top: 40px; padding-bottom: 40px; .custom-heading { gap: 40px; h3 { color: hsl(var(--neutral-5)); font-size: 1.75rem; font-weight: 500; @media (max-width: 767px) { font-size: 1.625rem; } } .input-box { gap: 0; .search-icon { path { fill: hsl(var(--neutral-5)); } } input { border-color: hsl(var(--terciary-alt)); &:focus { --tw-ring-color: hsl(var(--primary)); } } button { border: none; background-color: white; z-index: 999; padding: 12px; margin-left: -48px; margin-top: 4px; height: 40px; width: 40px; gap: 0; font-size: 0; box-shadow: 1.008px 1.008px 1.008px 0 rgba(0, 125, 179, 0.4) inset, -1.008px 1.008px 1.008px 0 rgba(0, 125, 179, 0.25) inset, 1.008px 1.008px 4.033px 0 rgba(0, 125, 179, 0.6) inset; span { color: hsl(var(--primary)); } } } } .letters-buttons { padding: 24px 0; > div { gap: 0; justify-content: space-between; .letter-button { font-size: 1.375rem; height: 40px; width: 40px; font-family: "League Spartan"; border-radius: 100px; &.not-available { color: hsl(var(--neutral-5)); } } } } ul { li { background-color: white; border-bottom: 1px solid hsl(var(--primary-sub)); &:hover { background-color: unset; } a { display: block; width: fit-content; font-size: 1.25rem; &:hover { text-decoration: underline; } } } } } } /* ### END EXAMES E SERVICOS ### */ /* ### START EXAMES E PREPAROS ### */ .exames-e-preparos { .title-one { background-color: hsl(var(--primary)); h1 { color: white; line-height: 110%; font-weight: 500; } p { color: white; } } .list-three { .letters-buttons button { border: none; } .input-box { gap: 0; button { background-color: white; border: 2px solid hsl(var(--primary-alt)); z-index: 999; padding: 12px; margin-left: -48px; gap: 0; font-size: 0; span { color: hsl(var(--primary)); } } } ul { li { background-color: white; border-bottom: 1px solid hsl(var(--primary-sub)); span { font-size: 1.25rem; } } } } } /* ### END EXAMES E PREPAROS ### */ /* ### START UNIDADES ### */ .unidades { .title-one { background-color: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 40px; .title-block{ display: flex; flex-direction: column-reverse; gap: 8px; h1 { color: white; font-size: 2.25rem; font-weight: 500; @media (max-width: 767px) { font-size: 1.75rem; } } p { color: white; margin: 0; font-size: 0.875rem; } } } } .unit { padding-top: 40px; padding-bottom: 40px; .custom-input-container { @media (max-width: 1023px) { flex-direction: row; justify-content: space-between; width: 100%; } .input-box { input { width: 275px; } button { border: none; box-shadow: 1.008px 1.008px 1.008px 0 rgba(0, 125, 179, 0.4) inset, -1.008px 1.008px 1.008px 0 rgba(0, 125, 179, 0.25) inset, 1.008px 1.008px 4.033px 0 rgba(0, 125, 179, 0.6) inset; background-color: white; margin-left: -51px; margin-top: 4px; gap: 0; font-size: 0; height: 40px; width: 40px; z-index: 999; span { color: hsl(var(--primary)); } } } .custom-filter-btn { @media (max-width: 1023px) { margin-top: 0; justify-content: flex-end; } button { @media (max-width: 767px) { border: none; font-size: 0; gap: 0; padding: 4px 12px; box-shadow: 1px 1px 1px 0 rgba(0, 125, 179, 0.4) inset, -1px 1px 1px 0 rgba(0, 125, 179, 0.25) inset, 1px 1px 4px 0 rgba(0, 125, 179, 0.6) inset; } &::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 11H17V13H7V11ZM4 7H20V9H4V7ZM10 15H14V17H10V15Z' fill='%23007DB3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } span { display: none; } } } } .custom-unit-filters { button { border-radius: 0; } } .unit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; @media (max-width: 767px) { margin-top: 48px; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 768px) and (max-width: 1023px) { margin-top: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) and (max-width: 1279px) { margin-top: 48px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .custom-unit-card { border-radius: 24px; transition: all 300ms ease-in; box-shadow: -1px -2px 3px 0 rgba(0, 125, 179, 0.2) inset, 1px 1px 1px 0 rgba(0, 0, 0, 0.25) inset; &:hover { @apply shadow-lg; } > img { max-height: 280px; border-radius: 24px 24px 0 0; @media(min-width:768px){ aspect-ratio: 3 / 2; } } .unit-grid-item { border-radius: 24px; padding: 24px; background-color: transparent; h5 { font-weight: 500; color: hsl(var(--primary)); } p { color: hsl(var(--secondary-alt)); font-size: 1rem; margin: 8px 0 24px; } .unit-content-card-btns{ align-items: center; .unit-btn-details { border: none; padding: 0; font-size: 0.875rem; &:hover { background-color: transparent; } } .unit-btn-address { background-color: hsl(var(--primary-alt)); position: relative; text-decoration: none; padding: 8px; span{ display: none; } &::before { content: ""; width: 16px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2720%27%20viewBox%3D%270%200%2016%2020%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M8.00006%2012C10.2061%2012%2012.0001%2010.206%2012.0001%208C12.0001%205.794%2010.2061%204%208.00006%204C5.79406%204%204.00006%205.794%204.00006%208C4.00006%2010.206%205.79406%2012%208.00006%2012ZM8.00006%206C9.10306%206%2010.0001%206.897%2010.0001%208C10.0001%209.103%209.10306%2010%208.00006%2010C6.89706%2010%206.00006%209.103%206.00006%208C6.00006%206.897%206.89706%206%208.00006%206Z%27%20fill%3D%27%2300364D%27/%3E%3Cpath%20d%3D%27M7.42009%2019.814C7.58934%2019.9349%207.79211%2019.9998%208.00009%2019.9998C8.20806%2019.9998%208.41084%2019.9349%208.58009%2019.814C8.88409%2019.599%2016.0291%2014.44%2016.0001%208C16.0001%203.589%2012.4111%200%208.00009%200C3.58909%200%208.80377e-05%203.589%208.80377e-05%207.995C-0.028912%2014.44%207.11609%2019.599%207.42009%2019.814ZM8.00009%202C11.3091%202%2014.0001%204.691%2014.0001%208.005C14.0211%2012.443%209.61209%2016.428%208.00009%2017.735C6.38909%2016.427%201.97909%2012.441%202.00009%208C2.00009%204.691%204.69109%202%208.00009%202Z%27%20fill%3D%27%2300364D%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } } } } } } } } /* ### END UNIDADES ### */ /* ### START UNIDADES INTERNA ### */ .unit-info { .title-one { background: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 24px; h1 { font-weight: 500; color: white; } p { color: white; } } .shape-container { height: 300%; } .custom-breadcrumb ol { color: white; @media (max-width: 767px) { font-size: 0.875rem; } } } .unit-two { padding-top: 0; @media (min-width: 768px) { background: linear-gradient( to bottom, hsl(var(--primary)) 60%, white 40% ); } > div { position: relative; z-index: 100; @media (max-width: 767px) { padding: 0; } img { border-radius: 24px; aspect-ratio: 3 / 1; border: 1px solid hsl(var(--terciary-alt)); @media (max-width: 767px) { border-radius: 0; border: none; aspect-ratio: unset; } } .custom-address-box { @media (max-width: 767px) { padding: 0 20px; } h3 { font-weight: 500; margin: 0; color: hsl(var(--secondary-alt)); } } } } .unit-cards { padding-top: 40px; padding-bottom: 40px; > div { @media (min-width: 768px) and (max-width: 1023px) { grid-template-columns: 1fr 1fr; } } .card-services, .card-facilities, .card-business-hours { border-radius: 24px; border: 1px solid hsl(var(--terciary-sub)); box-shadow: -1px -2px 3px 0 rgba(0, 125, 179, 0.2) inset, 1px 1px 1px 0 rgba(0, 0, 0, 0.25) inset; h4 { font-weight: 500; @media (max-width: 767px) { font-size: 1.75rem; } } h4, h5, span, div { color: hsl(var(--secondary-alt)); } } .card-business-hours { order: -1; @media (max-width: 767px) { padding: 40px; } .custom-bussiness-hours-container { margin-top: 24px; h5 { font-size: 1.375rem; font-weight: 500; } .custom-bussiness-hours-days { font-size: 0.875rem; } } .custom-contacts-container { margin-top: 24px; &:last-of-type { margin-top: 16px; } > div { a > div { font-size: 1.25rem; font-weight: 500; font-family: "League Spartan"; } span { font-weight: 600; } > div { &:first-child { background-color: hsl(var(--primary-alt)); } div { font-size: 1.25rem; font-family: "League Spartan"; font-weight: 500; } } } } } .card-services { > div { gap: 16px; .custom-card-services-item { background-color: hsl(var(--primary-sub)); border-radius: 8px; font-size: 1rem; } } } .card-facilities { @media (min-width: 768px) and (max-width: 1023px) { grid-column: span 2; } > div { gap: 16px; @media (min-width: 768px) and (max-width: 1023px) { flex-direction: row; } .custom-card-facilities-item { width: fit-content; padding: 8px 12px; font-size: 1rem; border-radius: 8px; background-color: hsl(var(--primary-sub)); } } } } .content-rich { width: 100%; margin-right: auto; margin-left: auto; padding: 0 1.25rem 40px; @media (min-width: 640px) { max-width: 640px; } @media (min-width: 768px) { max-width: 768px; } @media (min-width: 1024px) { max-width: 1024px; } @media (min-width: 1280px) { max-width: 1280px; padding-right: 2rem; padding-left: 2rem; } @media (min-width: 1536px) { max-width: 1536px; } > div { padding: 40px; border-radius: 24px; border: 1px solid hsl(var(--terciary-sub)); box-shadow: -1px -2px 3px 0 rgba(0, 125, 179, 0.2) inset, 1px 1px 1px 0 rgba(0, 0, 0, 0.25) inset; h4 { color: hsl(var(--secondary-alt)); font-size: 1.75rem; } p { color: hsl(var(--secondary-alt)); } } } } /* ### END UNIDADES INTERNA### */ /* ### START CONVENIOS ### */ .convenios { .title-one { background: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 40px; .title-block{ display:flex; flex-direction: column-reverse; gap: 8px; h1 { font-weight: 500; color: white; font-size: 2.25rem; @media (max-width: 767px) { font-size: 2rem; } } p { color: white; font-size: 1rem; } } } .shape-container { height: 100%; object-fit: cover; } } .logo-full-grid { padding-top: 64px; padding-bottom: 64px; @media (max-width: 767px) { padding-top: 40px; padding-bottom: 40px; } > div { align-items: flex-start; h4 { color: hsl(var(--secondary-alt)); font-weight: 400; font-size: 1.25rem; @media (max-width: 767px) { text-align: left; } } } ul { justify-content: flex-start; gap: 24px 58px; @media (max-width: 767px) { gap: 24px; } li { box-shadow: none; border: 1px solid hsl(var(--primary-alt)); border-radius: 0; @media (max-width: 767px) { height: 94px; width: 94px; } } } } } /* ### END CONVENIOS ### */ /* ### START COLETA DOMICILIAR ### */ .coleta-domiciliar { .title-image { background: linear-gradient( to bottom, hsl(var(--primary)) 65%, hsl(var(--white)) 40% ); padding-bottom: 0; padding-top: 40px; > div { .title-image-txt { display:flex; flex-direction: column-reverse; gap: 8px; max-width: 860px; text-align: left; } @media (max-width: 767px) { padding-left: 0; padding-right: 0; } h1 { font-size: 2.25rem; font-weight: 500; color: white; @media (max-width: 767px) { font-size: 2rem; } } p{ color: white; font-size: 1rem; } img { border-radius: 24px; border: 1px solid hsl(var(--terciary-alt)); aspect-ratio: 3 / 1; @media (max-width: 767px) { aspect-ratio: unset; min-height: 250px; border-radius: 0; border: none; } } } } .content-rich { > div { padding: 40px 0; max-width: 860px; @media (max-width: 767px) { padding: 24px 20px 40px; } @media (max-width: 1023px) { padding: 40px 20px; } .content-rich-paragraph, h5, li { color: hsl(var(--secondary-alt)); } ul { list-style-position: outside; } h5 { font-weight: 500; } } } section:nth-of-type(3) { .content-rich { > div { padding-top: 0; > div { padding: 40px; border-radius: 16px; border: 1px solid hsl(var(--primary)); @media (max-width: 767px) { padding: 24px; } } } } } .banner-row { padding: 0; > div { max-width: 860px; @media (min-width: 1024px) { padding: 0; } .custom-banner-row-content { border-radius: 16px; padding: 40px; h4 { font-weight: 500; font-size: 1.375rem; } p { margin: 16px 0 40px; } button { border-radius: 4px; font-size: 1rem; &::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("data:image/svg+xml, "); background-repeat: no-repeat; background-position: center; background-size: contain; } span { display: none; } } } } } } /* ### END COLETA DOMICILIAR ### */ /* ### START BLOG ### */ .blog { .title-one { background: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 40px; .title-block{ display:flex; flex-direction: column-reverse; gap: 8px; h1 { font-weight: 500; color: white; } p { font-size: 1rem; color: white; } } } .shape-container { height: 300%; } .custom-breadcrumb ol { color: white; @media (max-width: 767px) { font-size: 0.875rem; } } } .carousel-blog { padding-top: 0; padding-bottom: 40px; @media (min-width: 768px) { background: linear-gradient( to bottom, hsl(var(--primary)) 60%, white 40% ); } > div { position: relative; z-index: 999; @media (max-width: 767px) { padding: 0; } .carousel-blog-item { border-radius: 24px; overflow: hidden; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.06); > img { width: 50%; height: 410px; border-radius: 0; @media (max-width: 767px) { width: 100%; } } .carousel-blog-item-content { display: flex; flex-direction: column; @media (max-width: 767px) { border-radius: 0; background-color: hsl(var(--primary-sub)); } .carousel-blog-categories-container { display: flex; span { margin-bottom: 8px; background-color: transparent; font-size: 0.875rem; color: hsl(var(--secondary-alt)); opacity: 0.6; padding: 0; text-transform: capitalize; } } h2 { font-size: 1.75rem; font-weight: 500; @media (max-width: 767px) { font-size: 1.625rem; } } p { flex: 1; color: hsl(var(--secondary-alt)); margin-bottom: 24px; @media (max-width: 767px) { font-size: 1rem; } } .custom-reading-time { color: hsl(var(--secondary-alt)); } } } .customSwiper { @media (max-width: 767px) { background-color: hsl(var(--primary-sub)); } .swiper-slide-active { padding: 0 1px; } .custom-controls { padding: 24px 0 0; @media (max-width: 767px) { padding: 0 20px 16px; } .slide-arrows { color: hsl(var(--secondary-alt)); > button { border: none; background-color: hsl(var(--primary-alt) / 0.6); box-shadow: 1px 1px 1px 0 rgba(255, 255, 255, 0.4) inset, -1px -1px 1px 0 rgba(255, 255, 255, 0.25) inset, -1px -1px 1px 0 rgba(161, 161, 161, 0.4) inset, 1px 1px 4px 0 rgba(255, 255, 255, 0.6) inset; height: 48px; width: 48px; @media (max-width: 767px) { background-color: white; } } } .custom-pagination { .swiper-pagination-bullet { background-color: hsl(var(--primary-alt)); } .swiper-pagination-bullet-active { background-color: hsl(var(--secondary)); } } } } } } .blog-list { > div { padding-top: 40px; padding-bottom: 40px; .custom-filters { > div:nth-child(2) { order: 4; } > div:nth-child(3) { order: 2; } > div:nth-child(4) { order: 3; } > div { border-radius: 999px; background-color: transparent; border-color: hsl(var(--primary)); color: hsl(var(--primary)); &.active, &:hover { background-color: hsl(var(--secondary-alt)); border-color: hsl(var(--secondary-alt)); color: white; } } } .paged-list { padding: 40px 0 0; > div { padding: 0; .card-two { border: 1px solid hsl(var(--primary-alt)); box-shadow: -1px -2px 3px 0 rgba(0, 125, 179, 0.2) inset, 1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset; border-radius: 16px; overflow: hidden; transition: all 300ms ease-in-out; &:hover { @apply shadow-lg; } .custom-card-two-container { padding: 32px; @media (max-width: 767px) { padding: 24px 20px; } .custom-card-categories { margin-bottom: 8px; span { opacity: 0.6; padding: 0; font-size: 0.875rem; background-color: transparent; color: hsl(var(--secondary-alt)); } } .custom-card-two-title { font-size: 1.375rem; font-weight: 500; } .custom-card-two-description { margin: 16px 0 0; @media (max-width: 767px) { /* font-size: 1rem; */ } } .custom-card-two-btn-container { display: none; } } } .custom-pagination { > button { border: none; color: hsl(var(--secondary-alt)); background: hsl(var(--primary-alt) / 0.6); box-shadow: 1px 1px 1px 0 rgba(255, 255, 255, 0.4) inset, -1px -1px 1px 0 rgba(255, 255, 255, 0.25) inset, -1px -1px 1px 0 rgba(161, 161, 161, 0.4) inset, 1px 1px 4px 0 rgba(255, 255, 255, 0.6) inset; } } } } } } } /* ### END BLOG ### */ /* ### START BLOG INTERNA ### */ .blog-page { .title-blog-one { overflow: hidden; .shape-container { &:first-of-type { fill: hsl(var(--primary)); transform: scaleY(1.55); @media (min-width: 1440px) { transform: unset; } } } .title-blog-one-content { padding: 40px 0; @media (max-width: 767px) { position: relative; z-index: 999; background: hsl(var(--primary)); padding-bottom: 0; } > img { border-radius: 24px; aspect-ratio: 3 / 1; @media (max-width: 767px) { aspect-ratio: unset; border-radius: 0; } } > div { @media (max-width: 1023px) { padding-left: 20px; padding-right: 20px; } .custom-breadcrumb ol { color: white; @media (max-width: 767px) { font-size: 0.875rem; } } h1 { font-weight: 500; color: white; margin: 8px 0 32px; font-size: 2.25rem; @media (max-width: 767px) { font-size: 2rem; } } p, span { color: white; } .share-link-buttons { .btn-shred-link { background-color: hsl(var(--primary-sub)); color: hsl(var(--secondary-alt)); fill: hsl(var(--secondary-alt)); } } } } } .content-blog { * { color: hsl(var(--secondary-alt)); } @media (min-width: 768px) { padding-top: 0; padding-bottom: 0; } .custom-share-footer { .btn-shred-link { background-color: hsl(var(--primary-sub)); fill: hsl(var(--secondary-alt)); } .custom-categories { span { padding: 4px 16px; border-radius: 100px; background-color: hsl(var(--primary-sub)); } } } .separator { display: none; } } .custom-related-blogs { h3 { color: hsl(var(--secondary-alt)); font-size: 1.75rem; font-weight: 500; @media (max-width: 767px) { font-size: 1.625rem; } } .card-two { border: 1px solid hsl(var(--primary-alt)); box-shadow: -1px -2px 3px 0 rgba(0, 125, 179, 0.2) inset, 1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset; border-radius: 16px; overflow: hidden; transition: all 300ms ease-in-out; &:hover { @apply shadow-lg; } .custom-card-two-container { padding: 32px; @media (max-width: 767px) { padding: 24px 20px; } .custom-card-categories { margin-bottom: 8px; span { opacity: 0.6; padding: 0; font-size: 0.875rem; background-color: transparent; color: hsl(var(--secondary-alt)); } } .custom-card-two-title { font-size: 1.375rem; font-weight: 500; } .custom-card-two-description { margin: 16px 0 0; @media (max-width: 767px) { /* font-size: 1rem; */ } } .custom-card-two-btn-container { display: none; } } &.card-two-item-4 { display: none; } } } .paged-list { padding-top: 32px; .card-two { border-radius: 24px; border: 1px solid hsl(var(--primary-alt)); box-shadow: none; > img { border-radius: 24px 24px 0 0; } > div { border-radius: 24px; } } } } /* ### END BLOG INTERNA ### */ /* ### START INSTITUCIONAL ### */ .institucional { .title-image { color: white; padding-top: 40px; padding-bottom: 0; background: linear-gradient( to bottom, hsl(var(--primary)) 80%, #ffffff 20% ); > div { @media (max-width: 767px) { padding-left: 0; padding-right: 0; } .custom-title-image-content { gap: 24px; @media (max-width: 767px) { gap: 40px; } .title-image-txt { max-width: 860px; text-align: left; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 8px; h1 { font-size: 2.25rem; font-weight: 500; @media (max-width: 767px) { font-size: 2rem; } } p{ font-size: 1rem; } } img { border-radius: 24px; aspect-ratio: 3 / 1; border: 1px solid hsl(var(--terciary-alt)); @media (max-width: 767px) { width: 100%; height: 340px; border: none; border-radius: 0; } } } } } .content-2col-grid { padding-top: 40px; padding-bottom: 40px; > div { display: block; .custom-item-container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; @media (max-width: 767px) { grid-template-columns: 1fr; gap: 40px; } } .custom-item { width: 100%; .custom-icon-heading { flex-direction: column; align-items: flex-start; > span { background-color: hsl(var(--primary-sub)); } h5 { font-size: 1.375rem; font-weight: 500; color: hsl(var(--secondary-alt)); } } p { font-size: 1rem; color: hsl(var(--secondary-alt)); @media (max-width: 767px) { /* font-size: 1.25rem; */ } } } } } .content-rich { background: hsl(var(--primary-sub)); > div { max-width: 860px; padding-top: 40px; padding-bottom: 40px; @media (min-width: 768px) { padding-left: 0; padding-right: 0; } * { color: hsl(var(--secondary-alt)); } h3, h4, h5 { font-weight: 500; } h6 { font-weight: 400; } a { font-weight: 600; color: hsl(var(--primary)); text-decoration: underline; } } } .timeline { background: hsl(var(--primary-sub)); padding: 40px 0; h3 { font-weight: 500; } .timeline-dot { border-color: hsl(var(--primary-sub)); background-color: hsl(var(--secondary-alt)); } .custom-timeline-item-container { @media (min-width: 768px) { &:nth-child(odd) { .custom-timeline-content { h5 { text-align: right; } } } } .custom-timeline-content { h5 { max-width: 320px; color: hsl(var(--secondary-alt)); } h4 { font-size: 2.25rem; color: hsl(var(--terciary-alt)); font-weight: 500; } } } } .content-2col-rich { max-width: 860px; gap: 24px; @media (min-width: 768px) { gap: 40px; padding: 40px 0; } > img { @media (min-width: 768px) { max-width: 160px; } } > div { padding: 0; width: 100%; h3 { margin-bottom: 8px; font-weight: 500; color: hsl(var(--secondary-alt)); } h6 { font-weight: 500; color: hsl(var(--secondary-alt)); } p { color: hsl(var(--secondary-alt)); } } } } /* ### END INSTITUCIONAL ### */ /* ### START FALE CONOSCO ### */ .fale-conosco { color: hsl(var(--secondary-alt)); .title-one { background: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 40px; h1 { font-weight: 500; color: white; font-size: 2.25rem; @media (max-width: 767px) { font-size: 2rem; } } } .shape-container { height: 100%; object-fit: cover; } } .contact-one { padding: 40px 0; > div { @media (min-width: 1023px) { grid-template-columns: 1.7fr 1fr; } form { .inputGroup { input, button, textarea { border: 2px solid hsl(var(--primary-alt)); border-radius: 4px; box-shadow: none; } } } .contact-block { background-color: transparent; border: 2px solid hsl(var(--primary-alt)); box-shadow: none; border-radius: 24px; @media (max-width: 767px) { padding: 24px; } > div { color: hsl(var(--secondary-alt)); flex-direction: column; gap: 4px; @media (max-width: 767px) { border: none; } &:last-of-type{ p{ margin-top: 8px; } } &:first-of-type{ p{ display: none; } } .custom-contact-icon-heading { > div { display: none; } h5 { font-weight: 500; } } } } } } } /* ### END FALE CONOSCO ### */ /* ### START MISSAO VISÃO E VALORES ### */ .missao-visao-e-valores { .title-one { background: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 40px; h1 { font-weight: 500; color: white; font-size: 2.25rem; @media (max-width: 767px) { font-size: 2rem; } } p { color: white; } } .shape-container { height: 100%; object-fit: cover; } } .content-3col-rich { padding-top: 40px; padding-bottom: 40px; .custom-3col-heading { display: none; } .custom-list-container { gap: 32px; @media (max-width: 767px) { gap: 24px; } .custom-card-item { border-radius: 4px; box-shadow: -1px -2px 3px 0 rgba(0, 125, 179, 0.2) inset, 1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset; img { background-color: hsl(var(--terciary-sub)); border-radius: 4px; padding: 8px; width: 52px; } h5 { font-weight: 500; color: hsl(var(--secondary-alt)); @media (max-width: 767px) { font-size: 1.5rem; } } p { color: hsl(var(--secondary-alt)); } } } } } /* ### END MISSAO VISÃO E VALORES ### */ /* ### START CHECK-UP ### */ .check-ups { .title-image { color: white; padding-top: 40px; padding-bottom: 0; background: linear-gradient( to bottom, hsl(var(--primary)) 80%, #ffffff 20% ); > div { @media (max-width: 767px) { padding-left: 0; padding-right: 0; } .custom-title-image-content { gap: 24px; @media (max-width: 767px) { gap: 40px; } .title-image-txt { max-width: 860px; text-align: left; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 8px; h1 { font-size: 2.25rem; font-weight: 500; @media (max-width: 767px) { font-size: 2rem; } } } p{ font-size: 1rem; } img { border-radius: 24px; aspect-ratio: 3 / 1; border: 1px solid hsl(var(--terciary-alt)); @media (max-width: 767px) { width: 100%; height: 340px; border: none; border-radius: 0; } } } } } .content-rich { > div { padding: 40px 0; color: hsl(var(--secondary-alt)); @media (max-width: 767px) { padding: 40px 20px; } } } .faq { padding: 40px 0; > div { h2 { font-size: 1.75rem; color: hsl(var(--secondary-alt)); font-weight: 500; @media (max-width: 767px) { font-size: 1.625rem; } } .custom-accordion-trigger { padding: 24px 0; &:last-of-type { border: none; } button { padding: 0; &:hover { text-decoration-color: hsl(var(--primary)); } } h5 { font-size: 1.375rem; font-weight: 500; } p { padding-top: 16px; color: hsl(var(--secondary-alt)); font-size: 1rem; } } } } } /* ### END CHECK-UP ### */ /* ### START INFUSOES ### */ .infusoes { .title-image { background: linear-gradient( to bottom, hsl(var(--primary)) 65%, hsl(var(--white)) 40% ); padding-bottom: 0; padding-top: 40px; > div { .title-image-txt { max-width: 860px; text-align: left; } @media (max-width: 767px) { padding-left: 0; padding-right: 0; } h1 { font-size: 2.25rem; font-weight: 500; color: white; @media (max-width: 767px) { font-size: 2rem; } } img { border-radius: 24px; border: 1px solid hsl(var(--terciary-alt)); aspect-ratio: 3 / 1; @media (max-width: 767px) { aspect-ratio: unset; min-height: 250px; border-radius: 0; border: none; } } } } .content-rich { > div { padding: 40px 0; max-width: 860px; @media (max-width: 767px) { padding: 24px 20px 40px; } @media (max-width: 1023px) { padding: 40px 20px; } .content-rich-paragraph { color: hsl(var(--secondary-alt)); } } } .banner-row { padding: 0 0 40px; @media (max-width: 1023px) { padding: 0 20px 40px; } > div { max-width: 860px; border-radius: 24px; border: 1px solid hsl(var(--terciary-alt)); padding: 0; overflow: hidden; img { max-width: 405px; aspect-ratio: 1/1; border-radius: 0; @media (max-width: 767px) { max-width: 100%; max-height: 335px; aspect-ratio: unset; } } .custom-banner-row-content { background-color: white; color: hsl(var(--secondary-alt)); padding: 64px 40px; @media (max-width: 767px) { max-width: 100%; padding: 24px 20px; } h4 { font-size: 1.375rem; font-weight: 500; } p { font-size: 1rem; font-weight: 400; margin: 24px 0; } button { border-radius: 4px; box-shadow: 1px 1px 1px 0 rgba(255, 255, 255, 0.4) inset, -1px -1px 1px 0 rgba(255, 255, 255, 0.25) inset, -1px -1px 1px 0 rgba(161, 161, 161, 0.4) inset, 1px 1px 4px 0 rgba(255, 255, 255, 0.6) inset; span { display: none; } &::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("data:image/svg+xml, "); background-position: center; background-repeat: no-repeat; background-size: contain; } } } } } } /* ### END INFUSOES ### */ /* ### START EXAME TOXICOLOGICO ### */ .exame-toxicologico { .title-image { color: white; padding-top: 40px; padding-bottom: 0; background: linear-gradient( to bottom, hsl(var(--primary)) 80%, #ffffff 20% ); > div { @media (max-width: 767px) { padding-left: 0; padding-right: 0; } .custom-title-image-content { gap: 24px; @media (max-width: 767px) { gap: 40px; } .title-image-txt { max-width: 860px; text-align: left; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 8px; h1 { font-size: 2.25rem; font-weight: 500; @media (max-width: 767px) { font-size: 2rem; } } p{ font-size: 1rem; } } img { border-radius: 24px; aspect-ratio: 3 / 1; border: 1px solid hsl(var(--terciary-alt)); @media (max-width: 767px) { width: 100%; height: 340px; border: none; border-radius: 0; } } } } } .content-rich { > div { padding: 40px 0; color: hsl(var(--secondary-alt)); max-width: 860px; @media (max-width: 1023px) { padding: 40px 20px; } } } .banner-row { padding: 0 0 40px; @media (max-width: 1023px) { padding: 0 20px 40px; } > div { border-radius: 24px; border: 1px solid hsl(var(--primary)); overflow: hidden; max-width: 860px; padding: 0; > img { border-radius: 0; width: 50%; aspect-ratio: 1/1; @media (max-width: 767px) { width: 100%; } } .custom-banner-row-content { background-color: transparent; color: hsl(var(--secondary-alt)); padding: 64px 40px; @media (max-width: 767px) { padding: 24px; } h4 { font-size: 1.375rem; font-weight: 500; } p { margin: 24px 0; } button { border-radius: 4px; } } } } .faq { background-color: hsl(var(--primary-sub)); padding: 40px 0; > div { max-width: 860px; @media (min-width: 1023px) { padding: 0; } h2 { font-size: 1.75rem; color: hsl(var(--secondary-alt)); font-weight: 500; @media (max-width: 767px) { font-size: 1.625rem; } } .custom-accordion-trigger { padding: 24px 0; &:last-of-type { border: none; } button { padding: 0; &:hover { text-decoration-color: hsl(var(--primary)); } } h5 { font-size: 1.375rem; font-weight: 500; } p { padding-top: 16px; color: hsl(var(--secondary-alt)); font-size: 1rem; } } } } } /* ### END EXAME TOXICOLOGICO ### */ /* ### START PROVAS DE ESTIMULO ### */ .provas-de-estimulo { .title-image { color: white; padding-top: 40px; padding-bottom: 0; background: linear-gradient( to bottom, hsl(var(--primary)) 80%, #ffffff 20% ); > div { @media (max-width: 767px) { padding-left: 0; padding-right: 0; } .custom-title-image-content { gap: 24px; @media (max-width: 767px) { gap: 40px; } .title-image-txt { max-width: 860px; text-align: left; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 8px; h1 { font-size: 2.25rem; font-weight: 500; @media (max-width: 767px) { font-size: 2rem; } } p{ font-size: 1rem; } } img { border-radius: 24px; aspect-ratio: 3 / 1; border: 1px solid hsl(var(--terciary-alt)); @media (max-width: 767px) { width: 100%; height: 340px; border: none; border-radius: 0; } } } } } .content-rich { > div { padding: 40px 0; color: hsl(var(--secondary-alt)); max-width: 860px; @media (max-width: 1023px) { padding: 40px 20px; } } } .banner-row { padding: 0 0 40px; @media (max-width: 1023px) { padding: 0 20px 40px; } > div { border-radius: 24px; border: 1px solid hsl(var(--primary)); overflow: hidden; max-width: 860px; padding: 0; > img { border-radius: 0; width: 50%; aspect-ratio: 1/1; @media (max-width: 767px) { width: 100%; } } .custom-banner-row-content { background-color: transparent; color: hsl(var(--secondary-alt)); padding: 64px 40px; @media (max-width: 767px) { padding: 24px; } h4 { font-size: 1.375rem; font-weight: 500; } p { margin: 24px 0; } button { border-radius: 4px; } } } } .faq { padding: 40px 0; > div { max-width: 860px; @media (min-width: 1023px) { padding: 0; } h2 { font-size: 1.75rem; color: hsl(var(--secondary-alt)); font-weight: 500; @media (max-width: 767px) { font-size: 1.625rem; } } .custom-accordion-trigger { padding: 24px 0; &:last-of-type { border: none; } button { padding: 0; &:hover { text-decoration-color: hsl(var(--primary)); } } h5 { font-size: 1.375rem; font-weight: 500; } p { padding-top: 16px; color: hsl(var(--secondary-alt)); font-size: 1rem; } } } } section.block-blockscontent-rich:nth-of-type(5) { .content-rich { background-color: hsl(var(--secondary-alt)); h4 { font-weight: 500; color: white; @media (max-width: 767px) { font-size: 1.625rem; } } p { color: white; font-size: 1.125rem; } } } } /* ### END PROVAS DE ESTIMULO ### */ /* ### START EXAMES GENETICOS ### */ .exames-geneticos { .title-image { color: white; padding-top: 40px; padding-bottom: 0; background: linear-gradient( to bottom, hsl(var(--primary)) 80%, #ffffff 20% ); > div { @media (max-width: 767px) { padding-left: 0; padding-right: 0; } .custom-title-image-content { gap: 24px; @media (max-width: 767px) { gap: 40px; } .title-image-txt { max-width: 860px; text-align: left; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 8px; h1 { font-size: 2.25rem; font-weight: 500; @media (max-width: 767px) { font-size: 2rem; } } p{ font-size: 1rem; } } img { border-radius: 24px; aspect-ratio: 3 / 1; border: 1px solid hsl(var(--terciary-alt)); @media (max-width: 767px) { width: 100%; height: 340px; border: none; border-radius: 0; } } } } } .content-rich { > div { padding: 40px 0; color: hsl(var(--secondary-alt)); max-width: 860px; @media (max-width: 1023px) { padding: 40px 20px; } } } .content-2col-grid { padding-top: 0; padding-bottom: 40px; > div { max-width: 860px; h3 { margin: 0 0 24px; font-size: 1.75rem; font-weight: 500; color: hsl(var(--secondary-alt)); text-align: left; align-self: flex-start; } .custom-item-container { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; @media (max-width: 767px) { grid-template-columns: 1fr; } .custom-item { width: 100%; color: hsl(var(--secondary-alt)); .custom-icon-heading { flex-direction: column; align-items: flex-start; span { background-color: hsl(var(--primary-sub)); } h5 { font-size: 1.375rem; font-weight: 500; } } p { font-size: 1rem; } } } } } .banner-row { padding: 0 0 40px; @media (max-width: 1023px) { padding: 0 20px 40px; } > div { border-radius: 24px; border: 1px solid hsl(var(--primary)); overflow: hidden; max-width: 860px; padding: 0; > img { border-radius: 0; width: 50%; aspect-ratio: 1/1; @media (max-width: 767px) { width: 100%; } } .custom-banner-row-content { background-color: transparent; color: hsl(var(--secondary-alt)); padding: 64px 40px; @media (max-width: 767px) { padding: 24px; } h4 { font-size: 1.375rem; font-weight: 500; color: hsl(var(--secondary-alt)); } button { margin-top: 40px; border-radius: 4px; &::after { content: ""; width: 24px; height: 24px; background-image: url("data:image/svg+xml, "); background-position: center; background-repeat: no-repeat; background-size: contain; } span { display: none; } } } } } } /* ### END EXAMES GENETICOS ### */ /* ### START ASSESSORIA DE IMPRENSA ### */ .assessoria-de-imprensa { .title-one { background: hsl(var(--primary)); > div { padding-top: 40px; padding-bottom: 40px; .custom-title-one-content { .title-block { @media (min-width: 768px) { margin: 0 auto; max-width: 768px; padding: 0 32px; } h1 { font-weight: 500; color: white; font-size: 2.25rem; @media (max-width: 767px) { font-size: 2rem; } } p { color: white; } } } } .shape-container { height: 100%; object-fit: cover; } } .content-rich { > div { padding-top: 40px; padding-bottom: 40px; .content-rich-heading { font-weight: 500; color: hsl(var(--secondary-alt)); } h4 { @media (max-width: 767px) { font-size: 1.25rem; word-break: break-word; } } a:not([href^="tel:"]) { text-decoration: underline; color: hsl(var(--primary)); } } } } /* ### END ASSESSORIA DE IMPRENSA ### */

Sempre há um Bioclínico perto de você