/* ==== WELLCOME ==== * Author:Massimo Mastromarino * Link:http://www.desmm.com/ui-ux-designer * */ /* ==== RESET CSS ==== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;/*vertical-align:baseline;*/} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;} body{line-height:1;-webkit-font-smoothing: antialiased;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} textarea{resize:none;} strong{font-weight:bold;} a:active, a:focus, input:focus[type=submit]{outline-color:invert;outline-style:none;outline-width:0;} textarea:focus, input:focus{outline:0;} /* ==== COLOR VAR ==== */ :root{ --white01:#FFFFFF; --white02:#e7ebed; --grey01:#666666; --black01:#000000; /* Brand color */ --brandLaghi:#00FFB4; --brandCittadarte:#FFB800; --brandIsole:#C2FF00; --brandMonti:#F2B19B; --brandCoste:#FFDD00; --brandBorghistorici:#F49B54; } /* ==== COMMON ==== */ body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;background:var(--white02); color:var(--black01);font-weight: 400;} header{width: 100%; z-index:100;position: relative;} main{padding-bottom: 10px;position: relative;} a{color: #000000; text-decoration-thickness: 2px;} ul, ol{margin-left: 18px;} .logo{text-decoration: none;font-family: serif;color:var(--brandActived)!important;font-size: 30px;font-weight: 400;line-height: 40px;margin-top: 25px;display: inline-block;position: relative;letter-spacing: -1.5px;text-align: center;} .logo span {color:var(--white01);} @media screen and (min-width: 520px) { .logo{font-size: 35px;} } html { scroll-padding-top: 4rem; } /* ==== STRUCTURE ==== */ .maxwidth{width: 100%; max-width: 667px;margin: 40px auto 40px;position: relative;background-color: #fafafb;box-shadow: 0 10px 40px 0 rgba(0,0,0,0.05);border-radius: 20px;} .guide05{padding: 0 5%;} .guide10{padding: 0 5.5%;} .entry-title{text-transform: uppercase;font-size: 12px;font-weight: 700;margin-bottom: 40px;display: block;letter-spacing: -.5px;} .notices{padding-top: 15px!important;color: #000000!important;} /* ==== TOP MENU NETWORK ==== */ #menu-network{border-radius: 20px 20px 0 0;height: 60px; border-bottom: 1px solid #FFFFFF30;background: var(--black01);position: relative;display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: space-evenly; font-size: 12px;letter-spacing: -.5px;} #menu-network a{width:55px;color:var(--grey01);text-decoration: none;height: 100%;text-align: center;display: flex;flex-direction: column; align-items: center;justify-content: center;} #menu-network a .icon{display: block;background-size: cover;height: 16px;width: 16px;} #menu-network a.item-cittadarte .icon{background-image: url(../images/symbol-cittadarteditalia.svg);} #menu-network a.item-laghi .icon{background-image: url(../images/symbol-laghiditalia.svg);} #menu-network a.item-coste .icon{background-image: url(../images/symbol-costeditalia.svg);} #menu-network a.item-monti .icon{background-image: url(../images/symbol-montiditalia.svg);} #menu-network a.item-isole .icon{background-image: url(../images/symbol-isoleditalia.svg);} #menu-network a.item-borghistorici .icon{background-image: url(../images/symbol-borghistoriciditalia.svg);} #menu-network a .name{margin-top:5px;} #menu-network a{filter:grayscale(1) brightness(0.5) contrast(0);color: var(--white01);} .citta-d-arte-d-italia #menu-network a.item-cittadarte{color: var(--brandCittadarte);filter: none;} .laghi-d-italia #menu-network a.item-laghi{color: var(--brandLaghi);filter: none;} .coste-d-italia #menu-network a.item-coste{color: var(--brandCoste);filter: none;} .monti-d-italia #menu-network a.item-monti{color: var(--brandMonti);filter: none;} .isole-d-italia #menu-network a.item-isole{color: var(--brandIsole);filter: none;} .borghi-storici-d-italia #menu-network a.item-borghistorici{color: var(--brandBorghistorici);filter: none;} /* ==== PAGE BREAD CRUMB ==== */ #page-header{height: 90px;position: relative;background:var(--black01) ;} #page-header .icon-menu-hamburger{position: absolute; width: 40px;height: 40px;right: 10%;background: var(--black01);border-radius: 10px;z-index: 1;top:25px;cursor: pointer;} #page-header .icon-menu-hamburger span{height: 2px;position: absolute;background-color: var(--brandActived);z-index: 2;left:12px;} #page-header .icon-menu-hamburger span.l1{top:13px;width: 12px;} #page-header .icon-menu-hamburger span.l2{top: 19px;width: 16px;} #page-header .icon-menu-hamburger span.l3{top: 25px;width: 10px;} .home #page-header{background: none;} .home #page-header::before{content:"";height: 1px;background: var(--white01);left: 10%;bottom: 0;width: 80%;position:absolute;opacity: .15;} /* ==== PAGE BREAD CRUMB ==== */ #page-breadcrumb{position: sticky; position: -webkit-sticky;top: 10px;z-index: 100;} #page-breadcrumb:before{content:"";position: absolute;height: 30px;width: 100%;background: #000000;z-index: 0;top:-10px;} #page-breadcrumb .sectionArea{position: relative; z-index:100; height: 40px;line-height: 40px;font-size: 22px;font-weight: 500;background: var(--brandActived);color: #232228;box-shadow: 0 0 0 2px rgba(0,0,0,0.05);border-radius: 20px;} #page-breadcrumb .sectionArea .back{ background-color:#0000001a;position: absolute;overflow: hidden;padding:0 15px 0 25px;left: 6px;top:6px;font-size: 14px;height: 28px;line-height: 28px;border-radius: 14px;text-decoration: none;} #page-breadcrumb .sectionArea .back::after{content: "";position: absolute;left:6px;top:6px;height: 16px;width: 16px;background-image: url(../images/icon-arrow-back.svg);background-repeat: no-repeat;background-position: center center; } #page-breadcrumb .sectionArea h1{text-align: right;float: right;position: relative;font-size: 16px;width: calc(100% - 90px);text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} /* ==== INTRO IMAGE ==== */ #intro-image {position: relative;margin-top: -20px;display: inline-flex;overflow: hidden;width:100%;color: var(--white01);background: var(--black01);padding-bottom: 60px;} #intro-image a{color: var(--white01);} #intro-image picture{position: absolute;top: 0px;} #intro-image picture img{width: 100%;min-height:560px;object-fit:cover;} #intro-image picture source{position: relative;width: 100%; height: auto;top: 0px;} #intro-image picture::after{content:"";position: absolute;top:0;left:0;background-image: linear-gradient(180deg, rgba(0,0,0,0.40) 47%, #000000 98%);width: 100%;height: 100%;} #intro-image section{position: relative;z-index: 15;} #intro-image section div{margin-top: 230px;} .home #intro-image section div{margin-top: 330px;} #intro-image section h2{font-size: 40px;letter-spacing: -1px;line-height: 50px;font-weight: bold;position: relative;} #intro-image section h2:after{content: "";position: absolute;width: 6%; height: 5px;background-size: contain;left: -12.5%;top: 25px;background-color: var(--brandActived);z-index: 1;border-radius: 0 5px 5px 0;max-height: 32px;} #intro-image section p{font-size: 17px;line-height: 25px;margin-top: 30px;} .home #intro-image section h2{font-size: 30px;line-height: 40px;} .home #intro-image {margin-top: -90px;} /*.home #intro-image section div{margin-top: 330px;}*/ @media screen and (min-width: 520px) { .home #intro-image section h2{font-size: 40px;line-height: 50px;} } /* ==== NAVIGATION VERTICAL CARD ==== */ #navigation-vcard{background-color: var(--black01);color: var(--white01);padding-bottom: 60px;} #navigation-vcard .list-card{ list-style-type: none; padding: 0;display:flex; flex-direction: row;flex-wrap: wrap;column-gap: 10px;row-gap: 10px;align-items: center;} #navigation-vcard .list-card img{object-fit:cover;width: 100%;height: 100%;} #navigation-vcard .list-card a{color: var(--white01);position: relative;overflow: hidden;border-radius: 5px;height: 220px;width: calc(50% - 5px);} #navigation-vcard .list-card a::after{position: absolute;z-index: 1;content: "";width: 100%;height: 100%;top: 0px;left: 0px;background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 60%, rgba(0,0,0,0.50) 100%);} #navigation-vcard .list-card h3{position: absolute;bottom: 20px;left: 20px;z-index: 2;font-weight: 700;font-size: 18px;padding-right: 20px;} @media screen and (min-width: 520px) { #navigation-vcard .list-card a{width: calc(33.333% - 7px);} } /* ==== NAVIGATION HORIZONTAL CARD ==== */ #navigation-hcard{background-color: var(--black01);color: var(--white01);padding-bottom: 60px;} #navigation-hcard .list-card{ padding: 0;display:flex; flex-direction: column;row-gap: 15px;margin: 0; } #navigation-hcard .list-card li{border: 1px solid #ffffff1c;box-sizing: border-box;list-style-type: none;counter-increment: list; position: relative;padding: 10px;text-decoration: none;color: var(--white01);position: relative;overflow: hidden;border-radius: 7px;width:100%;background: rgba(255, 255, 255, 0.15);display: flex; align-content: space-around;align-items: flex-start;flex-direction: row-reverse;column-gap: 20px;} #navigation-hcard .list-card .img-card{min-width: 110px;} #navigation-hcard .list-card img{width: 100%;height: 150px;border-radius: 3px;object-fit: cover;} #navigation-hcard .list-card a.title-card {font-weight: 700;font-size: 17px;position: relative;color: var(--white01);text-decoration: none;border-bottom:1px solid rgba(255, 255, 255, 0.15);padding: 10px 0;margin-bottom: 10px;display: block;} #navigation-hcard .list-card .text-card{max-width: 400px;display: block; line-height: 22.5px;font-size: 15px;padding: 0 10px 5px 0;position: relative;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5; -webkit-box-orient: vertical;} #navigation-hcard .list-card .text-card a{color: var(--white01);text-decoration-thickness: 1px;} #navigation-hcard .list-card .text-card h3:before {content: counter(list) ".";text-align: left;color: var(--brandActived);padding-right: 3px;} #navigation-hcard .list-card .leggi{position: absolute;overflow: hidden;text-indent: -100px;z-index: 1;width: 100%;height: 100%;top: 0px;} /* ==== PAGE INTRO IMAGE ==== */ #page-intro-image {position: relative;margin-top: -20px;margin-bottom: 20px;display: inline-block;} #page-intro-image picture, #page-intro-image picture img{width: 100%;position:relative;} #page-intro-image picture source{position: relative;width: 100%; height: auto;top: 0px;} #page-intro-image picture figcaption{position:absolute ;bottom: 3px; padding: 15px 5%;width: 90%;color: #ffffff;font-size: 12px;} .map-italy{width: 120px;float: right;margin: -15px -5% 0 15px;position: relative;} .map-italy img{width: 100%;height: auto;} .map-italy .pinPoint{height: 6px;width: 6px;background-color: var(--brandActived);border-radius: 6px;position: absolute;top:73px;left:59px;box-shadow:0 0 0 2px #000000;;} /* ==== PAGE INDEX ==== */ #page-index{z-index: 1; position: relative;padding-top: 40px;color:var(--white01);} #page-index li{margin: 12.5px 0 0 0;font-size: 18px;font-weight: 600;color: var(--brandActived);} #page-index a{text-decoration: underline;-webkit-text-decoration-color: var(--brandActived);text-decoration-color: var(--brandActived);color: var(--white02);text-decoration-thickness: 2px; } /* ==== ELEMENT: PREV NEXT ==== */ .prev-next{margin-top: 60px;display: block;position: relative;height: 30px;} .fa-angle-right, .fa-angle-left{border: solid var(--black01);width: 9px;height: 9px;display: inline-block;position: relative;border-width:2.5px 0 0 2.5px;position: absolute;top: 50%;margin-top: -5px;} .fa-angle-right{transform: rotate(135deg);right: 0px} .fa-angle-left{transform: rotate(315deg);left: 0px;} .prev-next .btn{position: absolute;} .prev-next .btn-left{width: 34.5%;padding-left: 20px;left: 0;} .prev-next .btn-right{width: 30%;padding-right: 20px;text-align: right;right: 0;} /* ==== CONTENT ARTICLE ==== */ .content-article{padding-bottom: 60px;} .content-article {line-height: 25px;font-size: 15px;font-size: 17px;} .content-article p{margin-bottom: 15px;} .content-article a{margin-bottom: 15px;font-weight: 500;} .content-article strong{font-weight: 700;} .content-article h2{font-size: 30px;font-weight: 800;margin-bottom: 20px;margin-top: 60px;padding-right: 45px;position: relative;line-height:35px;letter-spacing: -.5px;} .content-article h2:before{content:"";position: absolute;width:35px;height:35px;background-size: contain;right: 0px;top: 0px;z-index: 2;opacity: .1;} .content-article h2.content-type-cosavedere:before{background-image: url(../images/icon-type-cosavedere.svg)} .content-article h2.content-type-temperature:before{background-image: url(../images/icon-type-temperature.svg)} .content-article h2.content-type-trasporti:before{background-image: url(../images/icon-type-trasporti.svg)} .content-article h2.content-type-comearrivare:before{background-image: url(../images/icon-type-comearrivare.svg)} .content-article h2.content-type-inzona:before{background-image: url(../images/icon-type-inzona.svg)} .content-article h2:after{content: "";position: absolute;width: 6%; height: 5px;background-size: contain;left: -12.5%;top: 15px;background-color: var(--brandActived);z-index: 1;border-radius: 0 5px 5px 0;max-height: 32px;} .content-article li{margin-bottom: 5px;} /* ==== CONTENT LIST ==== */ .content-list{margin-top: 60px;} .content-list li{margin: 10px 0 0;font-size: 18px;font-weight: 700;} .content-list a{text-decoration: underline;-webkit-text-decoration-color: var(--brandActived);text-decoration-color: var(--brandActived); } /* ==== FOOTER ==== */ footer{text-align: center;padding: 40px 0;background: var(--black01);border-radius: 0 0 20px 20px;border-top: 1px solid #FFFFFF30;} footer .copyrights{font-size: 13px;color: #7F8D96;font-weight: 500;} /* ==== OVERLAY ==== */ body.overlay-opened{overflow: hidden;} .overlay-menu, .overlay-hotel {background-color: transparent;position: fixed; z-index: 100; left: 0;top: 0;width: 100%;height: 100%;overflow: auto;visibility: hidden;} .close-button {opacity:0;cursor: pointer;color:var(--brandActived);float: right;font-size: 28px;font-weight: bold;position: absolute; top: 25px;left: 25px;padding: 5px;cursor: pointer;height: 30px;width: 30px;border-radius:30px ;position: fixed;line-height: 30px;text-align: center;pointer-events: none;} .close-area{height: 100%;width: 100%;position: absolute;background-color:#000000cc;opacity: 0;transition: all .3s} body.overlay-opened .close-button, body.overlay-opened .close-area{opacity: 1;transition: all .3s } /* ==== OVERLAY MENU ==== */ .overlay-menu.open {visibility: visible;opacity: 1;} .overlay-menu .menu {transition: all .3s;width: 240px;right: -240px;position: absolute;background: var(--black01);overflow-y: scroll;height:100%;border-left:1px solid #66666640;} .overlay-menu.open .menu {right: 0px;transition: all .3s .4s;} .menu>.tree {text-align: left;} .treemenu.treemenu-root {margin: 1rem;} .treemenu li {line-height: 1.2rem;margin: 0 0 1px;padding: 5px 0;list-style: none;} .treemenu li a {font-size: 1rem;display: block;margin-left: 1.2rem;color:var(--white01); text-decoration: none;} .treemenu li a.active {text-decoration: none;color: var(--brandActived);background-color: var(--black01);} .treemenu ul {margin: 0 0 0 1rem;} .treemenu .toggler {float: left;padding-left: 5px;cursor: pointer;vertical-align: top;font-weight: 600;} .treemenu .toggler:before {display: inline-block;margin-right: 15px;color: var(--brandActived);} .treemenu li.tree-empty>.toggler {cursor: default;} .treemenu li.tree-empty>.toggler:before {content: '\2022'} .treemenu li.tree-closed>.toggler:before {content: '+'} .treemenu li.tree-opened>.toggler:before {content: '\2212'} /* ==== OVERLAY HOTEL ==== */ .overlay-hotel.open {opacity: 1;visibility: visible;} .modal-content-hotel {pointer-events:none;opacity: 0;background-color:#f2eae2;width: 80%;max-width: 600px;position: absolute;height: 100%;bottom: -50px;height: calc(100% - 50px);overflow: hidden;border-radius: 15px ;right: 25px;transition: all .3s; border-top: 10px solid #f2eae2;} .overlay-hotel.open .modal-content-hotel {bottom: 25px;transition: all .3s .4s;opacity: 1;pointer-events:auto;} #iframe-hotel{position: absolute;} @media screen and (max-width: 590px) { .overlay-hotel .modal-content-hotel {right: 0;height: calc(100% - 70px);width: 100%;border-radius: 15px 15px 0 0;-webkit-mask-image: -webkit-radial-gradient(white, black);} .overlay-hotel.open .modal-content-hotel {bottom: 0;} .overlay-hotel .close-button {top: 10px;left: auto;z-index: 101;right: 20px;width: 120px;text-align: right;} .overlay-hotel .close-button::before{content: "chiudi ";font-size: 15px;color: #ffffff;font-weight: normal;position: relative;top: -2px;} } /* ==== BUTTON HOTEL ==== */ .button-open-hotel{cursor: pointer;position: relative;background-color: #125CC5;padding: 10px;font-weight: bold;font-size: 16px;;line-height: 20px;border-radius: 90px;color: #ffffff;display: block;margin-top: 60px;box-sizing: border-box;border: 2px solid #296BCA;display: flex;align-items: center;min-height: 60px;} .button-open-hotel:before{background-image: url(../images/icon-hotel.svg);content:"";position: absolute;width:20px;height:20px;background-size: contain;left: 20px;top: 50%;margin-top: -10px;} .button-open-hotel span{padding:0 20px 0 50px ;display: block;} .button-open-hotel span:after{right: -5px;display:inline-block; top: 3px;content: "";position: relative;height: 16px;width: 16px;background-image: url(../images/icon-arrow-back.svg);transform: rotate(180deg); background-repeat: no-repeat;background-position: center center;filter: invert(1);} @media screen and (max-width: 667px) { .button-open-hotel br {display: none;} } .lavori-in-corso::before{content: "Attenzione, alcune sezioni potrebbero essere incomplete o non disponibili, stiamo lavorando per rendere questa guida più completa possibile. ";padding: 10px 15px;display: block;border: 1px solid #e2e2e2;border-radius: 5px;font-size: 15px;background: #f1f1f1;margin-top: 25px;} /* ==== MEDIAQUERY GENERAL ==== */ @media screen and (max-width: 667px) { .maxwidth{margin: 0px ;} #menu-network{border-radius: 0;} footer, header{border-radius: 0;} body{background: var(--black01);} }