* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 400;
}
:root {
--primary-color: #1b1b1b;
--primary-color-50: #00000090;
--background-color: #fff;
--box-background: #ffffff8c;
--active: #b4b4b474;
--shadow: #b4b4b474;
--shadow-dark: #46464674;
--general-gap: 0.5rem;
--highlight: #ffffffcf;
font-size: clamp(14px, 1.1vw, 18px);
}
@font-face {
font-family: "sans-serif";
src: url(//andafala.org/wp-content/themes/anda-fala/assets/css/fonts/sans.woff2);
}
@font-face {
font-family: "serif";
src: url(//andafala.org/wp-content/themes/anda-fala/assets/css/fonts/sansitalic.woff2);
} body {
padding: 1.25rem;
font-family: "sans-serif";
font-optical-sizing: auto;
line-height: 1.3;
letter-spacing: 0.01em;
min-height: 100dvh;
color: var(--primary-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 800px) {
body {
padding: 1rem;
}
}
.desktop {
display: block !important;
}
.tablet {
display: block !important;
}
.mobile {
display: none !important;
}
@media (max-width: 1200px) {
.desktop {
display: block !important;
}
.tablet {
display: block !important;
}
.mobile {
display: none !important;
}
}
@media (max-width: 800px) {
.desktop {
display: none !important;
}
.tablet {
display: none !important;
}
.mobile {
display: block !important;
}
} body > .container {
display: grid;
grid-template-columns: 175px 1fr;
gap: 1.25rem;
align-content: start;
}
@media (max-width: 1200px) {
body > .container {
display: grid;
grid-template-columns: 150px 1fr;
gap: 1.25rem;
}
}
@media (max-width: 800px) {
body > .container {
margin-top: 4rem;
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
} main.container {
display: grid;
grid-template-columns: 3fr 1fr;
gap: var(--general-gap);
align-content: start;
}
@media (max-width: 800px) {
main.container {
display: grid;
grid-template-columns: 1fr;
gap: var(--general-gap);
}
}
main .container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--general-gap);
}
main .container.space-between {
height: 100%;
align-content: space-between;
}
main .container.end {
align-items: end;
}
main .container.box-mt-0 .box {
margin-top: 0 !important;
}
@media (max-width: 800px) {
main .container {
display: grid;
grid-template-columns: 1fr;
gap: var(--general-gap);
}
} .column-3 {
grid-column: span 3;
}
.column-2 {
grid-column: span 2;
}
@media (max-width: 800px) {
.column-2 {
grid-column: span 3;
}
.column-1 {
grid-column: span 3;
}
}
.gap-sm {
display: grid;
gap: 0.5rem;
}
.gap {
display: grid;
gap: 0.75rem;
}
.gap-md {
display: grid;
gap: 1.25rem;
}
.flex {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.flex-lg {
display: flex;
flex-wrap: wrap;
gap: 1rem;
} .sticky {
position: sticky;
top: 1.25rem;
}
.sticky-lg {
position: sticky;
top: 6.5rem;
}
@media (max-width: 800px) {
.sticky {
position: sticky;
top: 1rem;
}
}
.overflow {
position: sticky;
top: 0;
height: calc(100dvh);
overflow-y: auto;
border-radius: 0.5rem;
scrollbar-width: none;
-ms-overflow-style: none;
margin: -1.25rem -0.5rem;
padding: 1.25rem 0.5rem 1.25rem;
}
.overflow::-webkit-scrollbar {
display: none;
}
.overflow .sticky {
top: 0;
}
@media (max-width: 800px) {
.overflow {
position: static;
top: 0;
height: auto;
overflow-y: auto;
}
body:not(.home) .overflow {
display: none;
}
} .box {
border-radius: 0.5rem;
padding: 0.75rem;
align-self: start;
background-color: var(--box-background);
opacity: 1;
box-shadow: 0 0 0.5rem var(--shadow);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
}
.box ~ .box {
margin-top: var(--general-gap);
}
.box.no-margin {
margin-bottom: 0;
}
.box img {
filter: blur(10px);
}
.box.show {
opacity: 1;
filter: blur(0px);
}
.box.show img {
filter: blur(0);
}
.box.radius {
border-radius: 100px 50px 100px 50px; }
.box.page-title {
height: 4.75rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px 50px 100px 50px; }
.box.page-title img {
display: inline-block;
height: 2.7rem;
padding-top: 0.25rem;
}
.box.highlight {
box-shadow: 0.1rem 0.1rem 0.4rem #1b1b1b95;
background-color: var(--highlight);
} p {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 8 4 4;
text-wrap: pretty;
overflow-wrap: normal;
word-break: normal;
}
.no-hifen p {
-webkit-hyphens: none;
hyphens: none;
}
p + p {
margin-top: 0.9em;
}
a {
color: inherit;
text-decoration: none;
font-weight: inherit;
}
p a {
border-bottom: 1px solid var(--primary-color);
}
.lowercase {
text-transform: lowercase;
}
.center {
text-align: center;
}
.underline {
border-bottom: 1px solid var(--primary-color);
}
.invert {
background: var(--active);
color: var(--background-color);
}
.outline {
display: inline-block;
padding: 1rem 1.5rem;
background: var(--box-background);
box-shadow: 0 0 0.3rem var(--shadow);
paint-order: stroke fill;
background: var(--active);
} .text-xs {
font-size: 0.75rem;
}
.text-sm {
font-size: 0.85rem;
}
.text-sm em {
font-family: "serif";
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
p em {
font-family: "serif";
font-size: 1.05em;
font-style: normal;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.text-md {
font-size: 1.25rem;
line-height: 1.25;
}
.text-lg {
font-size: 1.75rem;
line-height: 1.25;
}
.title-xs {
font-size: 0.91rem;
font-family: "serif";
letter-spacing: 0.02em;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.title-sm {
font-size: 1.05rem;
font-family: "serif";
letter-spacing: 0.02em;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.title {
font-family: "serif";
font-size: 1.27rem;
line-height: 1.1;
letter-spacing: 0.02em;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.title-md {
font-family: "serif";
font-size: 1.5rem;
line-height: 1.1;
letter-spacing: 0.02em;
}
.title-lg {
font-family: "serif";
font-size: 2rem;
line-height: 1.1;
letter-spacing: 0.02em;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.title-lg-sans {
font-size: 2rem;
line-height: 1.1;
letter-spacing: 0.02em;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
h3 {
font-family: "serif";
font-size: 1.25rem;
margin-top: 1em;
margin-bottom: 0.5em;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
} .mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-5 {
margin-bottom: 1rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-7 {
margin-top: 1.75rem;
}
.mt-8 {
margin-top: 2rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-4 {
margin-right: 1rem;
} .z-10 {
z-index: 10;
} header {
font-size: 0.9rem;
text-transform: lowercase;
}
.page-mobile {
display: none;
}
.menu-burger {
display: none;
}
header > div > a {
border-radius: 1rem;
padding: 0.4rem 0.6rem;
display: inline-block;
background-color: var(--box-background);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
}
header ul {
list-style: none;
}
header ul ul {
margin-left: 1rem;
}
header .menu-home {
height: 3.5rem;
width: 3.5rem;
background-color: var(--box-background);
backdrop-filter: blur(10px);
border-radius: 3rem;
margin-bottom: -0.5rem;
transition: transform 0.3s ease;
box-shadow: 0 0 0.3rem var(--shadow);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
}
header .menu-home a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
header .menu-home img {
height: 1.15rem;
display: block;
}
@media (hover: hover) and (pointer: fine) {
header .menu-home:hover {
transform: scaleX(0.95);
}
}
header .menu li > ul {
display: none;
margin-left: 1rem;
}
header .menu li > a,
header .menu li > span {
cursor: pointer;
}
.menu .page_item a,
.menu .page_item_has_children > a,
.menu .has-submenu > span {
background-color: var(--box-background);
backdrop-filter: blur(10px);
padding: 0.5rem 0.6rem;
border-radius: 0.3rem;
display: inline-block;
margin-bottom: 0.25rem;
line-height: 1;
transition: transform 0.3s ease;
box-shadow: 0 0 0.3rem var(--shadow);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
}
@media (hover: hover) and (pointer: fine) {
.menu .page_item a:hover,
.menu .page_item_has_children > a:hover,
.menu .has-submenu > span:hover {
transform: scaleX(0.95);
}
}
.menu .current_page_ancestor > a {  background-color: var(--primary-color-50);
color: var(--background-color);
}
.menu li.has-submenu > span::after,
.menu li.page_item_has_children > a::after {
content: "▾";
margin-left: 3px;
display: inline-block;
transition: transform 0.25s ease;
}
.menu li.has-submenu.open > span::after,
.menu li.page_item_has_children.open > a::after {
transform: rotate(180deg);
}
.menu li.current_page_item a {   background-color: var(--primary-color-50);
color: var(--background-color);
}
.menu li.page-item-69 {
margin-top: 0.5rem;
}
header .lang {
box-shadow: 0 0 0.3rem var(--shadow);
background-color: var(--box-background);
border-radius: 2rem;
height: 1.7rem;
width: 1.7rem;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
}
header button {
box-shadow: 0 0 0.3rem var(--shadow);
background-color: var(--box-background);
border-radius: 2rem;
height: 1.7rem;
width: 1.7rem;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: none;
}
#toggleBackground {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: 50px;
height: 28px;
padding: 0;
margin: 0;
border: 0;
border-radius: 999px;
background: var(--box-background);
cursor: pointer;
position: relative;
box-sizing: border-box;
outline: none;
}
#toggleBackground .toggle-switch {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
margin: 0;
padding: 0;
border-radius: 50%;
background: var(--active);
transition: transform 0.25s ease;
box-shadow: 0 0 0.3rem var(--shadow);
}
#toggleBackground.active {
background-color: var(--box-background);
}
#toggleBackground.active .toggle-switch {
transform: translateX(22px);
background: var(--background-color);
}
#toggleBackground:focus {
outline: none;
}
#toggleBackground:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}
#search {
box-shadow: 0 0 0.3rem var(--shadow);
background-color: var(--box-background);
border-radius: 2rem;
height: 1.7rem;
width: 1.7rem;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
}
#search img {
height: 0.9rem;
}
@media (max-width: 800px) {
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
z-index: 1000;
background-color: var(--box-background);
backdrop-filter: blur(15px) saturate(180%);
padding: 0 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
font-size: 1rem;
}
header.active {
opacity: 1;
pointer-events: all;
}
.menu-burger {
position: fixed;
display: block;
top: 1rem;
right: 1rem;
background-color: var(--box-background);
backdrop-filter: blur(10px);
padding: 0.5rem 0.6rem;
border-radius: 0.3rem;
z-index: 2000;
color: var(--primary-color);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
box-shadow: 0 0 0.3rem var(--shadow);
}
.page-mobile {
position: fixed;
display: block;
top: 1rem;
left: 1rem;
height: 3.5rem;
width: 3.5rem;
background-color: var(--box-background);
backdrop-filter: blur(10px);
border-radius: 3rem;
margin-bottom: -0.5rem;
font-size: 1.25rem;
transition: transform 0.3s ease;
box-shadow: 0 0 0.3rem var(--shadow);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
header .menu-home img {
height: 1.2rem;
}
.page-mobile img {
height: 1.2rem;
display: block;
}
} .filter {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.filter input {
background-color: var(--box-background);
backdrop-filter: blur(5px);
border-radius: 2rem;
height: 1.9rem;
padding: 0 0.8rem;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
text-transform: lowercase;
box-shadow: 0 0 0.3rem var(--shadow);
border: none;
width: 15rem;
font-family: "sans-serif";
font-size: 0.9rem;
}
.filter button {
background: var(--box-background);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
border-radius: 2rem;
padding: 0.5rem 0.8rem;
line-height: 1;
text-transform: lowercase;
font-family: "sans-serif";
box-shadow: 0 0 0.3rem var(--shadow);
border: none;
cursor: pointer;
color: var(--primary-color);
transition: transform 0.3s ease;
font-size: 0.9rem;
}
.filter button.no-radius {
border-radius: 0.3rem;
}
.filter button.active { background: var(--primary-color-50);
color: var(--background-color);
}
@media (hover: hover) and (pointer: fine) {
.filter button:hover {
transform: scaleX(0.97);
}
}
.filter button.all {
width: 1.9rem;
height: 1.9rem;
padding-top: 0.9rem;
font-size: 1.5rem;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
}
.filter-box.is-hidden {
display: none;
}
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.filter div {
position: relative;
}
.filter .search {
position: relative;
display: inline-block;
}
.filter .search input {
padding-right: 35px;
}
.filter .search-clear {
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
border: 0;
background: transparent !important;
color: var(--primary-color);
cursor: pointer;
width: auto;
height: auto;
backdrop-filter: none;
box-shadow: none;
}
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.filter-content {
align-content: start;
min-height: calc(100dvh - 20rem);
} button {
cursor: pointer;
color: inherit;
font-family: inherit;
}
button.active {
background: var(--active);
}
.input {
line-height: 1;
border-radius: 0.15rem;
padding: 0.5rem 0.6rem;
border: 1px solid var(--primary-color-50);
transition: background-color 0.3s ease;
font-size: 0.85rem;
text-transform: lowercase;
background: transparent;
transition: transform 0.3s ease;
width: 100%;
font-family: inherit;
}
.input::placeholder {
color: var(--primary-color);
}
.button {
border-radius: 2rem;
padding: 0 0.8rem;
height: 2rem;
box-shadow: 0.1rem 0.1rem 0.15rem var(--shadow-dark);
font-size: 0.85rem;
text-transform: lowercase;
background: var(--box-background);
transition: transform 0.3s ease;
border: none;
width: 100%;
font-family: inherit;
cursor: pointer;
color: inherit;
line-height: 1;
display: flex;
align-items: center;
justify-content: center; }
.button.lg {
height: 3rem;
font-size: 1.25rem;
}
.button.width-auto {
width: auto;
}
.button.box {
line-height: 1;
border-radius: 2rem;
padding: 0.6rem 0.5rem;
box-shadow: 0 0 0.3rem var(--shadow);
text-transform: lowercase;
}
.button a {
display: block;
text-align: center;
}
@media (hover: hover) and (pointer: fine) {
.button:hover {
transform: scaleX(0.97);
}
} .thumb {
aspect-ratio: 4/2.7;
background: rgba(0, 119, 255, 0.1);
border-radius: 0.5rem;
overflow: hidden;
transition: background 0.5s ease;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: all 0.5s ease;
scale: 1.2;
mix-blend-mode: multiply;
}
.image-ratio img {
width: 100%;
height: auto;
display: block;
}
.image-fit {
aspect-ratio: unset;
width: 100%;
height: 100%;
}
.image-fit img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
article {
transition: transform 0.5s ease;
}
@media (hover: hover) and (pointer: fine) {
article:hover {
transform: scaleX(0.98);
}
}
article:hover .thumb {
background: rgba(255, 255, 255, 1);
}
article:hover .thumb img {
transform: translateX(-6px);
} .categoria {
padding: 0.3rem 0.7rem;
border-radius: 1rem;
font-size: 0.75rem;
display: inline-block;
margin: 0 0 0.3rem 0;
text-transform: lowercase;
background: var(--box-background);
box-shadow: 0 0 0.3rem var(--shadow);
}
.categoria.no-radius {
padding: 0.3rem 0.5rem;
border-radius: 0.15rem;
}
.categoria.highlight {
background-color: var(--primary-color-50);
color: var(--background-color);
} .tag {
padding: 0.3rem 0.7rem;
border-radius: 0.15rem;
font-size: 0.75rem;
text-transform: lowercase;
display: inline-block;
text-align: center;
background: var(--box-background);
box-shadow: 0 0 0.3rem var(--shadow);
}
.tag.highlight {
background-color: var(--primary-color-50);
color: var(--background-color);
} .gallery-slider {
position: relative;
overflow-x: hidden;
width: 100%;
}
.gallery-track {
display: flex;
width: 100%;
transition: transform 2s ease;
}
.gallery-slide {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
.gallery-slide-image {
aspect-ratio: 4/2.7;
}
.gallery-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-prev,
.gallery-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
border: none;
cursor: pointer;
background: var(--box-background);
box-shadow: 0.1rem 0.1rem 0.15rem var(--shadow-dark);
border-radius: 2rem;
height: 2rem;
width: 2rem;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
transition: transform 0.3s ease;
backdrop-filter: blur(15px) saturate(180%);
}
@media (hover: hover) and (pointer: fine) {
.gallery-prev:hover,
.gallery-next:hover {
transform: translateY(-50%) scaleX(0.95);
}
}
.gallery-prev {
left: 0.5rem;
bottom: 0.5rem;
}
.gallery-next {
right: 0.5rem;
bottom: 0.5rem;
} .gallery-expand {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
border: none;
cursor: pointer;
background: var(--box-background);
box-shadow: 0.1rem 0.1rem 0.15rem var(--shadow-dark);
border-radius: 2rem;
height: 2rem;
width: 2rem;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
font-size: 1rem;
transition: transform 0.3s ease;
backdrop-filter: blur(15px) saturate(180%);
}
@media (hover: hover) and (pointer: fine) {
.gallery-expand:hover {
transform: scaleX(0.95);
}
} .lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background: var(--box-background);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 10000;
}
.lightbox.active {
opacity: 1;
pointer-events: all;
}
.lightbox-image {
position: relative;
width: 90vw;
height: 90dvh;
overflow: hidden;
}
.lightbox-track {
display: flex;
height: 100%;
transition: transform 0.45s ease;
}
.lightbox-slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.lightbox-slide img,
.lightbox-image > img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.lightbox-image > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
border: none;
cursor: pointer;
background: var(--box-background);
box-shadow: 0.1rem 0.1rem 0.15rem var(--shadow-dark);
border-radius: 2rem;
height: 2.5rem;
width: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
font-size: 1.1rem;
z-index: 1;
transition: transform 0.3s ease;
backdrop-filter: blur(15px) saturate(180%);
}
@media (hover: hover) and (pointer: fine) {
.lightbox-prev:hover,
.lightbox-next:hover {
transform: translateY(-50%) scaleX(0.95);
}
.lightbox-close:hover {
transform: scaleX(0.95);
}
}
.lightbox-close {
top: 1.25rem;
right: 1.25rem;
}
.lightbox-prev {
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
}
.lightbox-next {
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
}
.lightbox-caption {
position: static;
max-width: 90vw;
color: var(--primary-color);
text-align: center;
}
.lightbox-caption:empty {
display: none;
}
@media (max-width: 800px) {
.lightbox-prev,
.lightbox-next {
height: 2rem;
width: 2rem;
font-size: 0.9rem;
}
} .navigation > div {
display: flex;
justify-content: space-between;
}
.navigation > div > div a {
background: var(--box-background);
box-shadow: 0 0 0.3rem var(--shadow);
border-radius: 2rem;
height: 2rem;
width: 2rem;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
.navigation > div > div a:hover {
background: var(--active);
}
} .parceiros {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.parceiros img {
height: 3rem;
width: auto;
display: block;
} div.background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
inset: 0;
}
div.background img {
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
object-fit: cover;
z-index: -1;
filter: blur(10px);
opacity: 0.9;
transition:
opacity 0.3s ease,
filter 0.1s linear;
}
.background img.hidden {
opacity: 0;
pointer-events: none;
} body .separator {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
div.separator {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background-color: white;
}
footer img {
height: 2rem;
margin-right: 0.75rem;
} .procurar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background: var(--box-background);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.procurar.active {
opacity: 1;
pointer-events: all;
z-index: 10000;
}
.procurar img {
height: 1rem;
}
.procurar form {
display: flex;
gap: 0.5rem;
}
.procurar button {
box-shadow: 0 0 0.3rem var(--shadow);
background-color: var(--box-background);
border-radius: 2rem;
height: 1.7rem;
width: 1.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: none;
}
.procurar input {
width: 300px;
display: inline-block;
height: 1.7rem;
}