:root {
--accent: #e30613;
--color-text: #333;
--wrap: 1000px;
--gapXS: 10px;
--gapS: 20px;
--gapM: 30px;
--gapL: 40px;
--gapXL: 60px;
--gapXXL: 80px;
--gapXXXL: 120px;
} * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
display: block;
}
html {
font-size: clamp(16px, 1.5vw, 24px);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.3;
font-weight: 400;
color: var(--color-text);
background-color: #fff;
}
main {
padding: 5vw;
}
main:has(#masonry-container) {
padding: 0 calc(5vw - 10px);
} main {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.2;
font-weight: 500;
}
p,
li {
margin-top: 1em;
margin-bottom: 1em;
line-height: 1.2;
}
}
a,
a:visited {
color: var(--accent);
text-decoration: none;
text-underline-offset: 0.2em;
}
main a {
text-decoration: underline;
}
a:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 0.2em;
}
strong {
font-weight: 500;
}
ul,
ol {
padding-left: 1em;
}
li::marker {
color: var(--accent);
} header.site-header {
padding: 10px 5vw 60px 5vw;
display: flex;
justify-content: space-between;
align-items: center;
> .site-title a {
width: 140px;
background: url(//lapageoriginal.com/wp-content/themes/lapageoriginal/img/lapage_logo.svg) no-repeat center center;
background-size: contain;
display: block;
text-indent: -999em;
}
nav {
display: flex;
align-items: center;
> div[class*="menu-principal"] {
order: 3;
}
button.menu-toggle {
order: 2;
z-index: 100;
}
ul.menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 99;
font-size: clamp(20px, 8vw, 64px);
gap: 30px;
line-height: 1;
a,
a:visited {
color: var(--color-text);
text-decoration: none;
}
li a:hover,
li[class*="current"]:not(.wpml-ls-item) a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 1px;
}
.wpml-ls-item a:hover {
text-decoration: none;
}
li {
list-style-type: none;
position: relative;
}
li:not(.wpml-ls-item):has(ul) {
> a::after {
content: "\2193";
font-size: 0.8em;
margin-left: 0.5em;
display: inline-block;
vertical-align: middle;
}
ul {
display: none;
li {
margin: 0;
a:hover {
text-decoration: none;
}
}
}
&:focus-within > ul {
display: block;
}
a {
cursor: pointer;
}
}
}
}
} .wpcf7-form input[type="submit"],
.load-more-button {
font-size: inherit;
background: #000;
color: #fff;
border: none;
padding: 0.75em 1.5em;
cursor: pointer;
transition: background 0.3s ease;
line-height: 1;
border-radius: 2px;
}
.wpcf7-form input[type="submit"]:hover,
.load-more-button:hover {
opacity: 0.8;
}
.wpcf7-form input[type="submit"]:disabled,
.load-more-button:disabled {
background: #ccc;
cursor: not-allowed;
}
button.search-button {
background-color: #000;
} .masonry-item-info h2,
.projectes-relacionats h3 {
font-size: clamp(18px, 4vw, 24px);
}
.projectes-relacionats h2 {
font-size: clamp(24px, 4vw, 32px);
}
.masonry-item-info,
.projectes-relacionats {
padding: 0.5em 0;
h2,
h3 {
font-weight: 400;
line-height: 1;
margin: 0;
}
article {
margin-bottom: 40px;
break-inside: avoid;
img {
max-width: none;
width: 100%;
}
}
a {
text-decoration: none;
color: #000;
}
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: clamp(18px, 4vw, 24px) !important;
} #masonry-container {
width: 100%;
}
.masonry-item {
width: 50%;
padding: 0 10px;
margin-bottom: 40px;
break-inside: avoid;
.masonry-item-subtitol {
display: none;
}
img {
width: 100%;
height: auto;
display: block;
}
}
@media (min-width: 1100px) {
.masonry-item {
width: 33.333%;
padding: 0 15px;
}
.masonry-item-info,
.projectes-relacionats .yarpp-related {
h2,
h3 {
font-size: clamp(18px, 2vw, 32px);
}
}
}
@media (min-width: 1300px) {
.masonry-item {
width: 25%;
padding: 0 20px;
}
}
@media (min-width: 1600px) {
.masonry-item {
width: 20%;
}
}
@media (min-width: 2400px) {
.masonry-item {
width: 16.66%;
}
} .projecte-single {
header {
max-width: var(--wrap);
text-align: center;
margin-bottom: 4vw;
h1 {
font-weight: 600;
margin-top: 0;
margin-bottom: 0.4em;
line-height: 1;
text-wrap: balance;
}
h2 {
font-weight: 400;
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 0.5rem;
text-wrap: balance;
}
p {
margin-top: 0;
color: #666;
}
}
> * {
max-width: var(--wrap);
margin-left: auto;
margin-right: auto;
}
> figure,
p:has(img) {
max-width: none;
width: 100%;
text-align: center;
margin-bottom: 0;
}
> figure:has(figcaption) {
img {
margin-bottom: 0;
}
figcaption {
font-size: 1rem;
margin-top: 1em;
}
}
figure + p {
margin-top: 0;
}
figure + figure {
margin-top: 0;
}
figure,
.wp-block-gallery {
margin: 4vw auto;
}
img,
video {
margin: 4vw auto;
display: block;
max-height: 90vh;
width: auto;
object-fit: contain;
}
.wp-block-gallery img,
figure img {
margin: 0 auto;
}
}
.projecte-navigation {
padding: 0 10vw;
margin: 2em auto;
display: flex;
justify-content: space-between;
}
.projectes-relacionats {
margin-top: 8vw;
h2,
h3,
.yarpp-related a {
font-weight: 400;
}
> h2 {
padding-left: 5vw;
}
.masonry-item {
padding: 0;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 0;
left: auto;
margin-top: 7px;
height: auto;
color: #000;
}
.swiper-button-prev {
right: calc(5vw + 30px);
}
.swiper-button-next {
right: 5vw;
}
} .projecte-single {
figure.alignfull {
width: calc(100% + 5vw);
margin-left: calc(5vw * -1);
margin-right: calc(5vw * -1);
max-width: none;
img {
width: calc(100% + 5vw);
height: auto;
display: block;
max-width: none;
}
}
.wp-block-image > figure > a {
display: block;
}
figure.aligncenter,
figure.aligncenter img {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
> figure.aligncenter img {
width: 100%;
max-width: none;
}
.wp-block-image {
margin: 3em auto;
}
} footer {
background: #fff;
padding: 1rem 1rem 150px 1rem;
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: var(--gapS);
column-gap: 7vw;
.xxss-newsletter .wp-block-group__inner-container {
display: flex;
gap: 7vw;
align-items: center;
}
.footer-widget:empty {
display: none;
}
footer.visible {
bottom: 0;
}
.footer_logos .wp-block-group__inner-container {
display: flex;
align-items: center;
gap: 20px;
figure {
margin: 0;
}
img {
max-width: 90px !important;
max-height: 80px;
object-fit: contain;
&[src*="commons"] {
max-width: 150px !important;
}
}
}
#menu-xarxes-socials {
display: flex;
gap: 8px;
list-style-type: none;
padding: 0;
a {
width: 36px;
height: 36px;
display: block;
text-indent: -999em;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
a[href*="linkedin.com"] {
background-image: url(//lapageoriginal.com/wp-content/themes/lapageoriginal/img/ico_in.svg);
}
a[href*="instagram.com"] {
background-image: url(//lapageoriginal.com/wp-content/themes/lapageoriginal/img/ico_ig.svg);
}
a[href*="vimeo.com"] {
background-image: url(//lapageoriginal.com/wp-content/themes/lapageoriginal/img/ico_vm.svg);
}
}
a[href*="newsletter"] {
display: inline-block;
font-size: 1rem;
color: var(--color-text);
padding-top: 20px;
background: url(//lapageoriginal.com/wp-content/themes/lapageoriginal/img/footer_news.svg) no-repeat center top;
background-size: 100%;
}
} .page main,
.error404 main {
max-width: var(--wrap);
margin-left: auto;
margin-right: auto;
}
.wpcf7-form {
label {
display: block;
margin-bottom: 0.5em;
}
input,
textarea {
max-width: 400px;
padding: 0.25em 0.5em;
font-size: inherit;
margin-bottom: 0.25em;
font-family: inherit;
}
} @media (min-width: 768px) {
html {
font-size: 16px;
}
body {
font-size: 1.5rem;
font-weight: 300;
}
main {
padding: 0 40px;
}
main:has(#masonry-container) {
padding: 0 20px;
}
.projectes-relacionats > h2 {
padding-left: 40px;
}
header.site-header nav {
gap: 20px;
ul.menu a {
padding: 10px 0;
}
}
.close.eco-extra {
width: 16px;
height: 16px;
} footer {
column-gap: var(--gapL);
#menu-xarxes-socials a {
width: 50px;
height: 50px;
gap: 20px;
}
a[href*="newsletter"] {
font-size: 1.25rem;
}
.footer_logos .wp-block-group__inner-container img {
max-width: 120px !important;
max-height: 80px;
}
} .masonry-item-info,
.yarpp,
.projectes-relacionats .yarpp-related a {
font-weight: 300;
}
.masonry-item-info {
padding: 0.5em;
.masonry-item-subtitol {
display: block;
color: #666;
font-weight: 300;
font-size: clamp(18px, 1.5vw, 28px);
line-height: 1.2;
margin-top: 0.5em;
}
} header.site-header {
padding: 20px 40px;
display: flex;
justify-content: space-between;
margin-bottom: 100px;
> .site-title a {
width: 200px;
height: 34px;
}
.menu-principal-container {
order: 2;
}
button.search-toggle {
order: 3;
}
ul#primary-menu {
display: flex;
flex-direction: row;
gap: 2rem;
font-size: clamp(24px, 2vw, 32px);
position: relative;
a,
a:visited {
color: var(--color-text);
text-decoration: none;
}
li a:hover,
li[class*="current"]:not(.wpml-ls-item) a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 1px;
}
li {
list-style-type: none;
position: relative;
&.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
background: none;
padding: 0;
}
&.menu-item-has-children > a,
&.menu-item-has-children > a:visited {
padding: 0;
}
&:has(ul) > a::after {
content: "\2193";
font-size: 0.8em;
display: inline-block;
border: none;
transform: rotate(0deg);
text-decoration: none;
}
&:has(ul) > a:hover::after {
text-decoration: none;
}
ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 10;
li {
margin: 0;
}
}
&:hover > ul {
display: block;
}
}
}
} .projecte-single {
padding: 0 10vw;
}
.projectes-relacionats {
.swiper-button-prev {
right: calc(40px + 30px);
}
.swiper-button-next {
right: 40px;
}
} footer {
padding: 10px 40px;
} .projecte-single > figure.alignfull {
width: calc(100% + (10vw + 40px));
margin-left: calc((10vw + 40px) * -1);
margin-right: calc((10vw + 40px) * -1);
max-width: none;
}
.projecte-single > figure.alignfull img {
width: calc(100% + (10vw + 40px));
max-width: none;
}
}
@media (min-width: 1200px) {
footer {
margin-top: var(--gapL);
.footer-widget:first-child {
width: 100%;
}
}
} .search-toggle {
background: none;
border: none;
cursor: pointer;
padding: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text);
transition: opacity 0.3s ease;
flex-shrink: 0;
}
.search-toggle:hover {
opacity: 0.7;
}
.search-toggle svg {
width: 24px;
height: 24px;
}
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.98);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.search-overlay.active {
display: flex;
opacity: 1;
}
.search-overlay-content {
width: 90%;
max-width: 600px;
padding: 40px;
}
.search-close,
.close.eco-extra {
position: absolute;
top: 5vw;
right: 5vw;
background: none;
border: none;
background: url(//lapageoriginal.com/wp-content/themes/lapageoriginal/img/ico_close_black.svg) no-repeat center center;
background-size: contain;
width: 25px;
height: 25px;
text-indent: -999em;
cursor: pointer;
color: var(--color-text);
padding: 10px;
transition: opacity 0.3s ease;
}
.close.eco-extra {
background: url(//lapageoriginal.com/wp-content/themes/lapageoriginal/img/ico_close_white.svg) no-repeat center center;
top: 1em;
right: 1em;
width: 16px;
height: 16px;
}
.search-close:hover {
opacity: 0.7;
}
.search-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.search-field {
width: 100%;
padding: 15px 20px;
font-size: clamp(18px, 2vw, 24px);
border: 2px solid var(--color-text);
background: #fff;
color: var(--color-text);
font-family: inherit;
}
.search-field:focus {
outline: none;
border-color: var(--color-text);
}
.search-submit {
padding: 15px 30px;
font-size: 1.5rem;
background: var(--color-text);
color: #fff;
border: none;
cursor: pointer;
font-family: inherit;
transition: opacity 0.3s ease;
}
.search-submit:hover {
opacity: 0.8;
} .search-title {
padding: 0 5vw 40px;
font-size: clamp(24px, 3vw, 40px);
font-weight: normal;
color: var(--color-text);
}
@media (min-width: 768px) {
footer {
column-gap: var(--gapXL);
}
}
@media (min-width: 1600px) {
footer {
column-gap: 170px;
}
}