.cv-header {
background-color: white;
min-height: 240px;
}
.cv-header .cv-spacer {
display: block;
height: 20px;
background-color: var(–cv-clr-salmon);
}
.cv-header .cv-nav {
font-family: ‘Bakso Sapi’, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
display: grid;
grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5);
justify-content: center;
justify-items: center;
max-width: 1000px;
margin: auto;
}
.cv-header .cv-logo {
background-image: url(https://www.conteviu.com/wp-content/uploads/2022/03/512px-CONTEVIU_logo_rodo_clar_NOU_lletres.png);
background-size: contain;
background-repeat: no-repeat;
margin: 12px 0;
display: flex;
grid-column: span 1;
width: 150px;
height: 150px;
text-align: center;
align-items: center;
justify-content: center;
}
.cv-header .cv-logo img {
display: block;
border-radius: 100%;
opacity: 1;
width: 100%;
height: auto;
transition: transform ease-in-out 1s;
min-width: 45px;
transform: rotate(0deg);
}
.cv-header .cv-logo a {
width: 65%;
height: 65%;
border-radius: 100%;
}
.cv-header .cv-logo img:hover, .cv-header .cv-logo img:focus {
opacity: 1;
transform: rotate(720deg);
}
.cv-header a {
text-decoration: none;
/*color: var(–cv-clr-rhythm);*/
}
.cv-header .cv-nav-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-evenly;
align-items: flex-start;
padding-top: 50px;
color: var(–cv-clr-rhythm);
width: 100%;
grid-column: span 2;
}
.cv-header .cv-nav-list > li {
text-align: left;
}
.cv-header .cv-nav-list > li:hover, .cv-header .cv-nav-list > li:focus {
cursor: pointer;
}
.cv-header .nav-left-list {
}
.cv-header .nav-right-list {
}
#nav-carreto {
position: relative;
top: -10px;
width: 30px;
height: 30px;
}
#nav-carreto:hover, #nav-carreto:focus {
}
#nav-carreto img {
width: 30px;
filter: invert() grayscale(1);
transition: filter ease-in-out .1s;
border-radius: 0;
}
#nav-carreto:hover img, #nav-carreto:focus img {
filter: none;
}
#nav-carreto.active-link::after {
content: ”;
height: 2px;
width: 30px;
background-color: var(–cv-clr-salmon);
display: block;
position: relative;
top: -5px;
}
.cv-header .cv-nav-list li.active-link > a {
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-color: var(–cv-clr-salmon);
text-decoration-thickness: 2px;
}
.subnav {
transform: translateY(20px) translateX(-10px);
opacity: 0;
transition: opacity ease-in-out .2s, transform ease-in-out .2s;
pointer-events: none;
z-index: 1;
background-color: white;
padding: 0 10px;
border-radius: 0px 0px 4px 4px;
}
.subnav li {
margin: 16px 0;
}
.cv-header .cv-nav-list > li:hover .subnav, .cv-header .cv-nav-list > li:focus .subnav {
transform: translateY(0px) translateX(-10px);
opacity: 1;
pointer-events: all;
}
.cv-header .cv-nav-list > li > div {
display: inline;
}
#nav-que-fem::after {
content: ‘>’;
transform: rotate(90deg) scale(1.2) translateY(2px) translateX(0px);
display: inline-block;
width: 17px;
text-align: center;
transition: opacity ease-in-out .2s, transform ease-in-out .2s;
opacity: 1;
}
#nav-que-fem:hover::after, #nav-que-fem:focus::after {
transform: rotate(90deg) scale(1.2) translateY(2px) translateX(5px);
opacity: 0;
}
#subnav-que-fem {
position: absolute;
}
/*Menu*/
.cv-header .nav-menu {
display: none;
/*display: inline-block;*/
cursor: pointer;
transition: transform ease-in-out 1s;
align-self: center;
}
.cv-header .nav-menu-bar {
width: 30px;
height: 3px;
background-color: var(–cv-clr-rhythm);
margin: 5px 0;
transition: transform ease-in-out 1s, opacity ease-in 1s, background-color ease-in-out .1s;
border-radius: 4px;
}
.cv-header .nav-menu:hover .nav-menu-bar, .cv-header .nav-menu:focus .nav-menu-bar {
background-color: var(–cv-clr-salmon);
}
.cv-header .nav-menu.nav-change {
transform: rotate(720deg);
}
.cv-header .nav-menu.nav-change .nav-menu-bar {
transition: transform ease-in-out 1s, opacity ease-out .5s, background-color ease-in-out .1s;
}
.cv-header .nav-menu.nav-change .nav-menu-bar1 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-6px, 6px);
}
.cv-header .nav-menu.nav-change .nav-menu-bar2 {
opacity: 0;
}
.cv-header .nav-menu.nav-change .nav-menu-bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -5px);
transform: rotate(45deg) translate(-5px, -5px);
}
@media only screen and (max-width: 900px) {
.cv-header {
padding-bottom: 10px;
}
.cv-header .cv-nav {
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
max-width: 800px;
}
.cv-header .cv-logo {
grid-row: 1 / span 1;
grid-column: span 2;
}
.cv-header .cv-nav-list {
padding: 10px 0;
justify-content: space-around;
}
.cv-header .nav-left-list {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.cv-header .nav-right-list {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
}
@media only screen and (max-width: 680px) {
body {
overflow-x: hidden;
}
.cv-header {
min-height: unset;
}
.cv-header .cv-nav {
grid-template-columns: 40% 40%;
grid-template-rows: auto auto auto;
}
.cv-header .cv-logo {
grid-row: 1 / span 1;
grid-column: 1 / span 1;
justify-self: start;
width: 100px;
height: 100px;
}
.cv-header .cv-logo img {
transform: rotate(0deg);
}
.cv-header .cv-logo img:hover, .cv-header .cv-logo img:focus {
transform: rotate(720deg);
}
.cv-header .cv-nav-list {
padding: 0;
flex-direction: column;
align-items: center;
align-content: center;
display: none;
/*opacity: 1;
pointer-events: none;
transition: opacity ease-in-out .2s, position ease-in-out .2s, transform ease-in-out .2s;*/
}
.cv-header .cv-nav-list.nav-display {
display: flex;
/*pointer-events: all;
opacity: 1;*/
}
.cv-header .cv-nav-list > li {
padding: 10px 0;
}
.cv-header .nav-left-list {
grid-column: 1 / span 2;
grid-row: 2 / span 1;
}
.cv-header .nav-right-list {
grid-column: 1 / span 2;
grid-row: 3 / span 1;
}
#nav-carreto {
top: 0;
}
#nav-que-fem > a {
transition: opacity ease-in-out .2s, transform ease-in-out .2s;
opacity: 1;
transform: translateX(0%);
display: inline-block;
}
#nav-que-fem:hover > a, #nav-que-fem:focus > a {
transform: translateX(-50%);
opacity: 0;
}
#nav-que-fem::after {
transform: scale(1.2) translateX(0px);
}
#nav-que-fem:hover::after, #nav-que-fem:focus::after {
transform: scale(1.2) translateX(5px);
}
.subnav {
/*transform: translateX(20px) translateY(-100%);*/
transform: translateX(0px) translateY(-100%);
display: flex;
}
.subnav li {
display: inline-block;
padding: 0 10px;
margin: 0;
transition: transform ease-in-out .2s;
}
#subnav-contes {
/*transform: translateX(50px);*/
transform: translateX(70px);
}
#subnav-espectacles {
/*transform: translateX(-20px);*/
transform: translateX(0px);
}
.cv-header .cv-nav-list > li:hover .subnav, .cv-header .cv-nav-list > li:focus .subnav {
transform: translateX(-25%) translateY(-100%);
}
.cv-header .cv-nav-list > li:hover .subnav li, .cv-header .cv-nav-list > li:focus .subnav li {
}
.cv-header .cv-nav-list > li:hover #subnav-contes, .cv-header .cv-nav-list > li:focus #subnav-contes, .cv-header .cv-nav-list > li:hover #subnav-espectacles, .cv-header .cv-nav-list > li:focus #subnav-espectacles {
transform: translateX(0);
}
/*Menu*/
.cv-header .nav-menu {
display: inline-block;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
justify-self: end;
}
}
var navInici = document.getElementById(‘nav-inici’);
var navQuiSom = document.getElementById(‘nav-qui-som’);
var navQueFem = document.getElementById(‘nav-que-fem’);
var navNovetats = document.getElementById(‘nav-novetats’);
var navBotiga = document.getElementById(‘nav-botiga’);
var navParticipa = document.getElementById(‘nav-participa’);
var navContacte = document.getElementById(‘nav-contacte’);
var navCarreto = document.getElementById(‘nav-carreto’);
var subnavContes = document.getElementById(‘subnav-contes’);
var subnavEspectacles = document.getElementById(‘subnav-espectacles’);
var navList = document.getElementsByClassName(‘cv-nav-list’);
const urlLink = ‘https://www.conteviu.com/’; //Canvia el link per l’url de la pàgina principal, amb / al final
if(document.URL == urlLink) {
navInici.classList.add(‘active-link’);
}
else if(document.URL.search(urlLink + ‘qui-som/’) != -1) {
navQuiSom.classList.add(‘active-link’);
}
else if(document.URL.search(urlLink + ‘que-fem/’) != -1 || document.URL.search(urlLink + ‘contes/’) != -1 || document.URL.search(urlLink + ‘espectacles/’) != -1) {
navQueFem.classList.add(‘active-link’);
if(document.URL.search(urlLink + ‘contes/’) != -1) {
subnavContes.classList.add(‘active-link’);
}
else if(document.URL.search(urlLink + ‘espectacles/’) != -1) {
subnavEspectacles.classList.add(‘active-link’);
}
}
else if(document.URL.search(urlLink + ‘novetats/’) != -1) {
navNovetats.classList.add(‘active-link’);
}
else if(document.URL.search(urlLink + ‘botiga/’) != -1 || document.URL.search(urlLink + ‘producte/’) != -1 || document.URL.search(urlLink + ‘categoria-producte/’) != -1) {
navBotiga.classList.add(‘active-link’);
}
else if(document.URL.search(urlLink + ‘participa/’) != -1) {
navParticipa.classList.add(‘active-link’);
}
else if(document.URL.search(urlLink + ‘contacte/’) != -1) {
navContacte.classList.add(‘active-link’);
}
else if(document.URL.search(urlLink + ‘cistella/’) != -1 || document.URL.search(urlLink + ‘finalitza-la-compra/’) != -1) {
navCarreto.classList.add(‘active-link’);
}
function navMenuChange(x) {
x.classList.toggle(“nav-change”);
for(i = 0; i < navList.length; i++) {
navList[i].classList.toggle("nav-display");
}
}
.cv-footer {
min-height: 170px;
background-color: var(–cv-clr-rhythm);
font-family: ‘Montserrat’, sans-serif;
color: white;
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.05em;
padding: 20px;
}
.cv-footer > div {
max-width: 1600px;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: auto auto;
margin: auto;
}
.cv-footer a {
text-decoration: none;
}
.cv-footer p {
margin: 0;
font-size: 14px;
margin-bottom: 10px;
}
.cv-footer ul {
padding: 10px;
margin-left: auto;
margin-right: auto;
}
.cv-footer li {
margin: 8px 0;
}
.cv-footer li:first-child {
margin-top: 0;
}
.cv-footer li:last-child {
margin-bottom: 0;
}
.cv-footer .cv-footer-xarxes {
}
.cv-footer .cv-footer-xarxes p {
width: fit-content;
padding: 0 4px;
}
.cv-footer .cv-footer-xarxes li {
width: fit-content;
display: inline-block;
margin: 0;
padding: 4px;
}
.cv-footer img {
width: 30px;
height: auto;
border-radius: 0;
}
.cv-footer .cv-footer-contacte p {
padding: 0 4px;
}
.cv-footer .cv-footer-contacte li {
margin: 0;
padding: 4px;
}
.cv-footer .cv-footer-contacte li:nth-child(2) {
margin-top: 0;
}
.cv-footer .cv-footer-contacte li:last-child {
margin-bottom: 0;
}
.cv-footer .cv-footer-contacte a {
display: flex;
align-items: center;
}
.cv-footer .cv-footer-contacte img {
width: 24px;
}
.cv-footer .cv-footer-contacte span {
margin: 0;
padding: 0;
display: inline-block;
}
.cv-footer .cv-footer-legals {
grid-column: 1 / span 1;
grid-row: 1 / span 2;
}
.cv-footer .cv-footer-politica {
grid-column: 2 / span 1;
grid-row: 1 / span 2;
}
.cv-footer .cv-footer-utils {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
}
.cv-footer .cv-footer-xarxes {
grid-column: 4 / span 1;
grid-row: 1 / span 2;
}
.cv-footer .cv-footer-contacte {
grid-column: 5 / span 1;
grid-row: 1 / span 2;
}
@media only screen and (max-width: 900px) {
.cv-footer > div {
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
justify-content: space-evenly;
align-items: start;
justify-items: start;
align-content: space-between;
}
.cv-footer ul {
margin: 0;
}
.cv-footer .cv-footer-legals {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.cv-footer .cv-footer-politica {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.cv-footer .cv-footer-utils {
grid-column: 1 / span 1;
grid-row: 3 / span 1;
}
.cv-footer .cv-footer-xarxes {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.cv-footer .cv-footer-contacte {
grid-column: 2 / span 1;
grid-row: 2 / span 2;
}
.cv-footer .cv-footer-legals li, .cv-footer .cv-footer-politica li, .cv-footer .cv-footer-utils li {
padding: 0 4px;
}
}
@media only screen and (max-width: 500px) {
.cv-footer > div {
grid-template-columns: auto;
grid-template-rows: auto auto auto auto auto;
}
.cv-footer .cv-footer-legals {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.cv-footer .cv-footer-politica {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.cv-footer .cv-footer-utils {
grid-column: 1 / span 1;
grid-row: 3 / span 1;
}
.cv-footer .cv-footer-xarxes {
grid-column: 1 / span 1;
grid-row: 4 / span 1;
}
.cv-footer .cv-footer-contacte {
grid-column: 1 / span 1;
grid-row: 5 / span 1;
}
}