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;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} /* --------------------------------
Primary style
-------------------------------- */
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: sans-serif;
color: #2e3233;
background-color: #ffffff;
}
@media only screen and (max-width: 1169px) {
body.overflow-hidden,
body.nav-on-left.overflow-hidden {
overflow: hidden;
}
}
a {
color: #69aa6f;
text-decoration: none;
}
img {
/* make images responsive */
max-width: 100%;
}
input {
font-family: sans-serif;
font-size: 1.6rem;
}
input[type="search"]::-ms-clear {
/* removes close icon - IE */
display: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
/* --------------------------------
Main components
-------------------------------- */
.cd-main-content,
.cd-main-header {
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
.cd-main-content,
.cd-main-header {
position: relative;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
@media only screen and (max-width: 1169px) {
.cd-main-content.nav-is-visible,
.cd-main-header.nav-is-visible {
-webkit-transform: translateX(-260px);
-moz-transform: translateX(-260px);
-ms-transform: translateX(-260px);
-o-transform: translateX(-260px);
transform: translateX(-260px);
}
.nav-on-left .cd-main-content.nav-is-visible,
.nav-on-left .cd-main-header.nav-is-visible {
-webkit-transform: translateX(260px);
-moz-transform: translateX(260px);
-ms-transform: translateX(260px);
-o-transform: translateX(260px);
transform: translateX(260px);
}
}
.cd-main-content {
background: #e2e3df;
min-height: 100vh;
z-index: 2;
}
.cd-main-header {
height: 50px;
background: #ffffff;
z-index: 3;
}
.nav-is-fixed .cd-main-header {
/* add .nav-is-fixed class to body if you want a fixed navigation on > 1170px */
position: fixed;
top: 0;
left: 0;
width: 100%;
}
@media only screen and (min-width: 1170px) {
.cd-main-header {
height: 80px;
}
.cd-main-header::after {
clear: both;
content: "";
display: table;
}
}
.cd-logo {
position: absolute;
top: 12px;
left: 5%;
}
.cd-logo img {
display: block;
}
@media only screen and (max-width: 1169px) {
.nav-on-left .cd-logo {
left: auto;
right: 5%;
}
}
@media only screen and (min-width: 1170px) {
.cd-logo {
top: 26px;
left: 4em;
}
}
.cd-header-buttons {
position: absolute;
display: inline-block;
top: 3px;
right: 5%;
}
.cd-header-buttons li {
display: inline-block;
}
@media only screen and (max-width: 1169px) {
.nav-on-left .cd-header-buttons {
right: auto;
left: 5%;
}
.nav-on-left .cd-header-buttons li {
float: right;
}
}
@media only screen and (min-width: 1170px) {
.cd-header-buttons {
top: 18px;
right: 0;
}
}
.cd-search-trigger,
.cd-nav-trigger {
position: relative;
display: block;
width: 44px;
height: 44px;
overflow: hidden;
white-space: nowrap;
/* hide text */
color: transparent;
z-index: 3;
}
.cd-search-trigger::before,
.cd-search-trigger::after {
/* search icon */
content: "";
position: absolute;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-search-trigger::before {
/* lens */
top: 11px;
left: 11px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid #2e3233;
}
.cd-search-trigger::after {
/* handle */
height: 3px;
width: 8px;
background: #2e3233;
bottom: 14px;
right: 11px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-search-trigger span {
/* container for the X icon */
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.cd-search-trigger span::before,
.cd-search-trigger span::after {
/* close icon */
content: "";
position: absolute;
display: inline-block;
height: 3px;
width: 22px;
top: 50%;
margin-top: -2px;
left: 50%;
margin-left: -11px;
background: #2e3233;
opacity: 0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition:
opacity 0.3s,
-webkit-transform 0.3s;
-moz-transition:
opacity 0.3s,
-moz-transform 0.3s;
transition:
opacity 0.3s,
transform 0.3s;
}
.cd-search-trigger span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-search-trigger span::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-search-trigger.search-is-visible::before,
.cd-search-trigger.search-is-visible::after {
/* hide search icon */
opacity: 0;
}
.cd-search-trigger.search-is-visible span::before,
.cd-search-trigger.search-is-visible span::after {
/* show close icon */
opacity: 1;
}
.cd-search-trigger.search-is-visible span::before {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-search-trigger.search-is-visible span::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-nav-trigger span,
.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
/* hamburger icon in CSS */
position: absolute;
display: inline-block;
height: 3px;
width: 24px;
background: #2e3233;
}
.cd-nav-trigger span {
/* line in the center */
position: absolute;
top: 50%;
right: 10px;
margin-top: -2px;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
/* other 2 lines */
content: "";
right: 0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform 0.3s 0.3s;
-moz-transition: -moz-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.cd-nav-trigger span::before {
/* menu icon top line */
top: -6px;
}
.cd-nav-trigger span::after {
/* menu icon bottom line */
top: 6px;
}
.cd-nav-trigger.nav-is-visible span {
/* hide line in the center */
background: rgba(46, 50, 51, 0);
}
.cd-nav-trigger.nav-is-visible span::before,
.cd-nav-trigger.nav-is-visible span::after {
/* keep visible other 2 lines */
background: #2e3233;
}
.cd-nav-trigger.nav-is-visible span::before {
-webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
-moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
-ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
-o-transform: translateX(4px) translateY(-3px) rotate(45deg);
transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.cd-nav-trigger.nav-is-visible span::after {
-webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
-moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
-ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
-o-transform: translateX(4px) translateY(2px) rotate(-45deg);
transform: translateX(4px) translateY(2px) rotate(-45deg);
}
@media only screen and (min-width: 1170px) {
.cd-nav-trigger {
display: none;
}
}
.cd-primary-nav,
.cd-primary-nav ul {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 260px;
background: #2e3233;
overflow: auto;
-webkit-overflow-scrolling: touch;
z-index: 1;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.cd-primary-nav a,
.cd-primary-nav ul a {
display: block;
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid #3a3f40;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
will-change: transform, opacity;
-webkit-transition:
-webkit-transform 0.3s,
opacity 0.3s;
-moz-transition:
-moz-transform 0.3s,
opacity 0.3s;
transition:
transform 0.3s,
opacity 0.3s;
}
.cd-primary-nav.is-hidden,
.cd-primary-nav ul.is-hidden {
/* secondary navigations hidden by default */
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-primary-nav.moves-out > li > a,
.cd-primary-nav ul.moves-out > li > a {
/* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
@media only screen and (max-width: 1169px) {
.nav-on-left .cd-primary-nav,
.nav-on-left .cd-primary-nav ul {
right: auto;
left: 0;
}
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item,
.cd-primary-nav .cd-nav-icons .cd-nav-item {
/* items with picture (or icon) and title */
height: 80px;
line-height: 80px;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3,
.cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
overflow: hidden;
text-overflow: ellipsis;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
display: flex !important;
align-items: center;
gap: 14px;
height: 80px !important;
line-height: 1.3 !important;
overflow: visible !important;
white-space: normal !important;
padding: 0 !important;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
display: block !important;
position: static !important;
height: 56px !important;
width: 80px !important;
min-width: 80px;
flex-shrink: 0;
object-fit: cover;
border-radius: 4px;
margin: 0 0 0 16px !important;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item {
padding-left: 75px;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
color: #2e3233;
font-size: 1.3rem;
/* hide description on small devices */
display: none;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
/* item icon */
content: "";
display: block;
position: absolute;
left: 20px;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: 40px 40px;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-1::before {
background-image: url("../img/line-icon-1.svg");
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-2::before {
background-image: url("../img/line-icon-2.svg");
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-3::before {
background-image: url("../img/line-icon-3.svg");
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-4::before {
background-image: url("../img/line-icon-4.svg");
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-5::before {
background-image: url("../img/line-icon-5.svg");
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-6::before {
background-image: url("../img/line-icon-6.svg");
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-7::before {
background-image: url("../img/line-icon-7.svg");
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-8::before {
background-image: url("../img/line-icon-8.svg");
}
@media only screen and (max-width: 1169px) {
.cd-primary-nav,
.cd-primary-nav ul {
overflow-x: clip;
overflow-y: auto;
}
.cd-primary-nav {
/* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */
visibility: hidden;
-webkit-transition: visibility 0s 0.3s;
-moz-transition: visibility 0s 0.3s;
transition: visibility 0s 0.3s;
}
.cd-primary-nav.nav-is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
}
@media only screen and (min-width: 1170px) {
.cd-primary-nav {
position: static;
padding: 0 150px 0 0;
height: auto;
width: auto;
float: right;
overflow: visible;
background: transparent;
}
.cd-primary-nav::after {
clear: both;
content: "";
display: table;
}
.cd-primary-nav.moves-out > li > a {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.cd-primary-nav ul {
position: static;
height: auto;
width: auto;
background: transparent;
overflow: visible;
z-index: 3;
}
.cd-primary-nav ul.is-hidden {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-primary-nav ul.moves-out > li > a {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.cd-primary-nav > li {
float: left;
margin-left: 3em;
}
.cd-primary-nav > li > a {
/* main navigation buttons style */
position: relative;
display: inline-block;
height: 80px;
line-height: 80px;
padding: 0 10px;
color: #2e3233;
overflow: visible;
border-bottom: none;
-webkit-transition:
color 0.3s,
box-shadow 0.3s;
-moz-transition:
color 0.3s,
box-shadow 0.3s;
transition:
color 0.3s,
box-shadow 0.3s;
}
.cd-primary-nav > li > a:hover {
color: #69aa6f;
}
.cd-primary-nav > li > a.selected {
color: #69aa6f;
box-shadow: inset 0 -2px 0 #69aa6f;
}
.cd-primary-nav .go-back {
display: none;
}
.cd-primary-nav .cd-secondary-nav,
.cd-primary-nav .cd-nav-gallery,
.cd-primary-nav .cd-nav-icons {
/* dropdown menu style */
position: absolute;
top: 80px;
width: 100vw;
background: #ffffff;
padding: 48px 64px;
box-shadow:
inset 0 1px 0 #e2e3df,
0 3px 6px rgba(0, 0, 0, 0.05);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition:
opacity 0.3s 0s,
visibility 0s 0s;
-moz-transition:
opacity 0.3s 0s,
visibility 0s 0s;
transition:
opacity 0.3s 0s,
visibility 0s 0s;
}
.cd-primary-nav .cd-secondary-nav::after,
.cd-primary-nav .cd-nav-gallery::after,
.cd-primary-nav .cd-nav-icons::after {
clear: both;
content: "";
display: table;
}
.cd-primary-nav .cd-secondary-nav.is-hidden,
.cd-primary-nav .cd-nav-gallery.is-hidden,
.cd-primary-nav .cd-nav-icons.is-hidden {
opacity: 0;
visibility: hidden;
-webkit-transition:
opacity 0.3s 0s,
visibility 0s 0.3s;
-moz-transition:
opacity 0.3s 0s,
visibility 0s 0.3s;
transition:
opacity 0.3s 0s,
visibility 0s 0.3s;
}
.cd-primary-nav .cd-secondary-nav > li {
/* change the height according to your needs - you can even set height: auto */
height: 340px;
/* here you set the number of columns - use width percentage */
width: 23%;
float: left;
margin-right: 2.66%;
border-right: 1px solid #e2e3df;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cd-primary-nav .cd-secondary-nav > li:nth-child(4n + 1) {
/* +1 because we have one list item with display:none */
margin-right: 0;
border-right: none;
}
.cd-primary-nav .cd-secondary-nav > li > a {
/* secondary nav title */
color: #69aa6f;
font-weight: bold;
font-size: 1.6rem;
margin-bottom: 0.6em;
}
.cd-primary-nav .cd-secondary-nav a {
height: 30px;
line-height: 30px;
padding: 0 18% 0 0;
color: #2e3233;
border-bottom: none;
font-size: 1.4rem;
}
.cd-primary-nav .cd-secondary-nav a:hover {
color: #69aa6f;
}
.cd-primary-nav .cd-secondary-nav ul {
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.cd-primary-nav .cd-secondary-nav ul ul {
/* tertiary navigation */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cd-primary-nav .cd-secondary-nav ul ul.is-hidden {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-primary-nav .cd-secondary-nav ul ul .go-back {
display: block;
}
.cd-primary-nav .cd-secondary-nav ul ul .go-back a {
color: transparent;
}
.cd-primary-nav .cd-secondary-nav .moves-out > li > a {
/* push the navigation items to the left - and lower down opacity - when tertiary nav slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.cd-primary-nav .cd-nav-gallery li {
/* set here number of columns - use width percentage */
width: 22%;
float: left;
margin: 0 4% 40px 0;
}
.cd-primary-nav .cd-nav-gallery li:nth-child(4n + 1) {
/* +1 because we have one additional list item with display:none */
margin-right: 0;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
border-bottom: none;
padding: 0;
height: auto;
line-height: 1.2;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
position: static;
margin-top: 0;
height: auto;
width: 100%;
margin-bottom: 0.6em;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3 {
color: #69aa6f;
font-weight: bold;
padding: 0 0.4em;
}
.cd-primary-nav .cd-nav-icons li {
/* set here number of columns - use width percentage */
width: 32%;
float: left;
margin: 0 2% 20px 0;
}
.cd-primary-nav .cd-nav-icons li:nth-child(3n + 1) {
/* +1 because we have one additional list item with display:none */
margin-right: 0;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item {
border-bottom: none;
height: 80px;
line-height: 1.2;
padding: 24px 0 0 85px;
position: relative;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item:hover {
background: #f6f6f5;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
color: #69aa6f;
font-weight: bold;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
display: block;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
left: 25px;
}
}
.has-children > a,
.go-back a {
position: relative;
}
.has-children > a::before,
.has-children > a::after,
.go-back a::before,
.go-back a::after {
/* arrow icon in CSS - for element with nested unordered lists */
content: "";
position: absolute;
top: 50%;
margin-top: -1px;
display: inline-block;
height: 2px;
width: 10px;
background: #464c4e;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.has-children > a::before,
.go-back a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.has-children > a::after,
.go-back a::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (min-width: 1170px) {
.has-children > a::before,
.has-children > a::after,
.go-back a::before,
.go-back a::after {
background: #c9cbc4;
}
.has-children > a:hover::before,
.has-children > a:hover::after,
.go-back a:hover::before,
.go-back a:hover::after {
background: #69aa6f;
}
}
.has-children > a {
padding-right: 40px;
}
.has-children > a::before,
.has-children > a::after {
/* arrow goes on the right side - children navigation */
right: 20px;
-webkit-transform-origin: 9px 50%;
-moz-transform-origin: 9px 50%;
-ms-transform-origin: 9px 50%;
-o-transform-origin: 9px 50%;
transform-origin: 9px 50%;
}
.cd-primary-nav .go-back a {
padding-left: 40px;
}
.cd-primary-nav .go-back a::before,
.cd-primary-nav .go-back a::after {
/* arrow goes on the left side - go back button */
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
@media only screen and (min-width: 1170px) {
.has-children > a::before,
.has-children > a::after {
right: 15%;
}
.cd-primary-nav > .has-children > a {
/* main navigation arrows on larger devices */
padding-right: 30px !important;
}
.cd-primary-nav > .has-children > a::before,
.cd-primary-nav > .has-children > a::after {
width: 9px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
background: #c9cbc4;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition:
width 0.3s,
-webkit-transform 0.3s;
-moz-transition:
width 0.3s,
-moz-transform 0.3s;
transition:
width 0.3s,
transform 0.3s;
}
.cd-primary-nav > .has-children > a::before {
right: 12px;
}
.cd-primary-nav > .has-children > a::after {
right: 7px;
}
.cd-primary-nav > .has-children > a.selected::before,
.cd-primary-nav > .has-children > a.selected::after {
width: 14px;
}
.cd-primary-nav > .has-children > a.selected::before {
-webkit-transform: translateX(5px) rotate(-45deg);
-moz-transform: translateX(5px) rotate(-45deg);
-ms-transform: translateX(5px) rotate(-45deg);
-o-transform: translateX(5px) rotate(-45deg);
transform: translateX(5px) rotate(-45deg);
}
.cd-primary-nav > .has-children > a.selected::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-secondary-nav > .has-children > a::before,
.cd-secondary-nav > .has-children > a::after {
/* remove arrows on secondary nav titles */
display: none;
}
.cd-primary-nav .go-back a {
padding-left: 20px;
}
.cd-primary-nav .go-back a::before,
.cd-primary-nav .go-back a::after {
left: 1px;
}
}
/* ============================================================
SIMPLE DROPDOWN — variant ".cd-simple" / ".cd-dropdown"
A classic, narrow dropdown menu (W3Schools-style) that sits
ALONGSIDE the mega menu. Items with sub-menus open their own
nested dropdown that flies out to the side.
Self-contained: uses its own ".cd-dropdown" class so it never
inherits the mega ".cd-secondary-nav" column layout.
Desktop only (>= 1170px); on smaller screens it falls back to
the standard slide-in drill-down, like every other menu.
Any WITHOUT .cd-simple keeps the mega-menu layout.
============================================================ */
@media only screen and (min-width: 1170px) {
/* anchor the dropdown panel to its top-level item */
.cd-primary-nav > .cd-simple {
position: relative;
}
/* dropdown panel + nested fly-out panels share the same look */
.cd-primary-nav .cd-simple .cd-dropdown,
.cd-primary-nav .cd-simple .cd-dropdown ul {
position: absolute;
width: 220px;
padding: 8px 0;
background: #ffffff;
box-shadow:
inset 0 1px 0 #e2e3df,
0 8px 16px rgba(0, 0, 0, 0.12);
border-radius: 4px;
z-index: 10;
opacity: 1;
visibility: visible;
-webkit-transition:
opacity 0.25s 0s,
visibility 0s 0s;
transition:
opacity 0.25s 0s,
visibility 0s 0s;
}
/* top-level panel sits just under the nav button */
.cd-primary-nav .cd-simple .cd-dropdown {
top: 80px;
left: 0;
border-radius: 0 0 4px 4px;
}
/* hidden state */
.cd-primary-nav .cd-simple .cd-dropdown.is-hidden,
.cd-primary-nav .cd-simple .cd-dropdown ul.is-hidden {
opacity: 0;
visibility: hidden;
-webkit-transition:
opacity 0.25s 0s,
visibility 0s 0.25s;
transition:
opacity 0.25s 0s,
visibility 0s 0.25s;
}
/* rows */
.cd-primary-nav .cd-simple .cd-dropdown li {
position: relative; /* anchor the nested fly-out */
width: 100%;
}
.cd-primary-nav .cd-simple .cd-dropdown a {
display: block;
height: 42px;
line-height: 42px;
padding: 0 18px;
color: #2e3233;
font-size: 1.4rem;
font-weight: normal;
border-bottom: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-primary-nav .cd-simple .cd-dropdown a:hover {
background: #f6f6f5;
color: #e31937;
}
/* nested dropdown (e.g. "Essenziali") flies out to the right */
.cd-primary-nav .cd-simple .cd-dropdown .has-children > a {
padding-right: 34px;
}
.cd-primary-nav .cd-simple .cd-dropdown ul {
top: -8px;
left: 100%;
}
/* hide the "go back" rows on desktop (only used in mobile drill-down) */
.cd-primary-nav .cd-simple .go-back {
display: none;
}
/* cancel the mega "push items left" animation inside the panel */
.cd-primary-nav .cd-simple .cd-dropdown .moves-out > li > a {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
/* right-pointing arrow on items that have a nested dropdown */
.cd-primary-nav .cd-simple .cd-dropdown .has-children > a::before,
.cd-primary-nav .cd-simple .cd-dropdown .has-children > a::after {
display: inline-block;
right: 16px;
background: #c9cbc4;
}
.cd-primary-nav .cd-simple .cd-dropdown .has-children > a:hover::before,
.cd-primary-nav .cd-simple .cd-dropdown .has-children > a:hover::after {
background: #e31937;
}
}
.cd-search {
position: absolute;
height: 50px;
width: 100%;
top: 50px;
left: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
-webkit-transition:
opacity 0.3s 0s,
visibility 0s 0.3s;
-moz-transition:
opacity 0.3s 0s,
visibility 0s 0.3s;
transition:
opacity 0.3s 0s,
visibility 0s 0.3s;
}
.cd-search form {
height: 100%;
width: 100%;
}
.cd-search input {
border-radius: 0;
border: none;
background: #ffffff;
height: 100%;
width: 100%;
padding: 0 5%;
box-shadow:
inset 0 1px 0 #e2e3df,
0 3px 6px rgba(0, 0, 0, 0.05);
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.cd-search input::-webkit-input-placeholder {
color: #c9cbc4;
}
.cd-search input::-moz-placeholder {
color: #c9cbc4;
}
.cd-search input:-moz-placeholder {
color: #c9cbc4;
}
.cd-search input:-ms-input-placeholder {
color: #c9cbc4;
}
.cd-search input:focus {
outline: none;
}
.cd-search.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition:
opacity 0.3s 0s,
visibility 0s 0s;
-moz-transition:
opacity 0.3s 0s,
visibility 0s 0s;
transition:
opacity 0.3s 0s,
visibility 0s 0s;
}
.nav-is-fixed .cd-search {
position: fixed;
}
@media only screen and (min-width: 1170px) {
.cd-search {
height: 120px;
top: 80px;
}
.cd-search input {
padding: 0 2em;
font-size: 3.2rem;
font-weight: 300;
}
}
.cd-overlay {
/* shadow layer visible when navigation is active */
position: fixed;
z-index: 2;
height: 100%;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
background-color: rgba(105, 170, 111, 0.8);
visibility: hidden;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition:
opacity 0.3s 0s,
visibility 0s 0.3s,
-webkit-transform 0.3s 0s;
-moz-transition:
opacity 0.3s 0s,
visibility 0s 0.3s,
-moz-transform 0.3s 0s;
transition:
opacity 0.3s 0s,
visibility 0s 0.3s,
transform 0.3s 0s;
}
.cd-overlay.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition:
opacity 0.3s 0s,
visibility 0s 0s,
-webkit-transform 0.3s 0s;
-moz-transition:
opacity 0.3s 0s,
visibility 0s 0s,
-moz-transform 0.3s 0s;
transition:
opacity 0.3s 0s,
visibility 0s 0s,
transform 0.3s 0s;
}
@media only screen and (max-width: 1169px) {
/* Copre tutta l'area visibile fino al pannello menu (260px), senza doppio translate */
.cd-overlay.is-visible {
left: 0;
right: 260px;
width: auto;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.nav-on-left .cd-overlay.is-visible {
left: 260px;
right: 0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.cd-overlay.is-visible.search-is-visible,
.nav-on-left .cd-overlay.is-visible.search-is-visible {
left: 0;
right: 0;
width: 100%;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
/* --------------------------------
support for no js
-------------------------------- */
.no-js .cd-primary-nav {
position: relative;
height: auto;
width: 100%;
overflow: visible;
visibility: visible;
z-index: 2;
}
.no-js .cd-search {
position: relative;
top: 0;
opacity: 1;
visibility: visible;
}
@media only screen and (min-width: 1170px) {
.no-js .cd-primary-nav {
position: absolute;
z-index: 3;
display: inline-block;
width: auto;
top: 0;
right: 150px;
padding: 0;
}
.no-js .nav-is-fixed .cd-primary-nav {
position: fixed;
}
}
/* =============================================================
LINEA EDITORIALE — Editorial Premium 2026
Overrides: mega-site-navigation-master/css/style.css
============================================================= */
/* ─── 1. Design tokens ─── */
:root {
--le-bg: #ffffff;
--le-canvas: #ffffff;
--le-surface: #ffffff;
--le-surface-s: #ffffff;
--le-surface-w: #f4f4f4;
--le-text: #0c0c0c;
--le-muted: #555555;
--le-line: rgba(0, 0, 0, 0.1);
--le-accent: #e31937;
--le-accent-bg: rgba(227, 25, 55, 0.07);
--le-dark: #0c0c0c;
--le-navy: #0c0c0c;
--le-warm-card: #f2f2f2;
--le-shadow-sm: none;
--le-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
--le-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.12);
--le-r: 0;
--le-r-sm: 0;
--le-r-xs: 0;
}
/* ─── 2. Base reset ─── */
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
overflow-x: clip;
scrollbar-gutter: stable;
}
body {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--le-text);
background: var(--le-canvas);
overflow-x: clip;
max-width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.le-scroll-locked {
overflow: hidden;
}
a {
color: var(--le-text);
text-decoration: none;
}
a:hover {
color: var(--le-accent);
}
img {
display: block;
max-width: 100%;
}
/* ─── 3. Mega nav: elimina il verde #69aa6f e l'overlay teal ─── */
/* Overlay che copre la pagina quando il menu è aperto */
.cd-overlay {
background-color: rgba(0, 0, 0, 0.65) !important;
}
/* Frecce chevron */
.has-children > a:hover::before,
.has-children > a:hover::after {
background: var(--le-accent) !important;
}
/* ── Mobile/tablet nav: dark sidebar ── */
@media only screen and (max-width: 1169px) {
.cd-primary-nav,
.cd-primary-nav ul {
background: var(--le-dark) !important;
}
.cd-primary-nav a,
.cd-primary-nav ul a {
border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}
/* Gallery items (es. Cultura): flex con foto a sinistra */
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
display: flex !important;
align-items: center !important;
height: 72px !important;
line-height: 1.3 !important;
overflow: visible !important;
white-space: normal !important;
padding: 0 !important;
gap: 12px;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
display: block !important;
position: static !important;
height: 52px !important;
width: 72px !important;
min-width: 72px;
flex-shrink: 0;
object-fit: cover;
border-radius: 4px;
margin: 0 0 0 16px !important;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3 {
display: block !important;
font-size: 1.4rem !important;
font-weight: 500 !important;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.3;
}
}
/* ── Desktop nav: link nel top bar ── */
@media only screen and (min-width: 1170px) {
/* Top-level items */
.cd-primary-nav > li > a {
color: var(--le-text) !important;
}
.cd-primary-nav > li > a:hover {
color: var(--le-accent) !important;
}
.cd-primary-nav > li > a.selected {
color: var(--le-accent) !important;
box-shadow: inset 0 -2px 0 var(--le-accent) !important;
}
/* Link nei pannelli dropdown: reset verde → testo scuro leggibile */
.cd-primary-nav .cd-secondary-nav a {
color: var(--le-text) !important;
}
.cd-primary-nav .cd-secondary-nav a:hover {
color: var(--le-accent) !important;
}
/* Titoli colonna nei pannelli */
.cd-primary-nav .cd-secondary-nav > li > a {
color: var(--le-accent) !important;
font-weight: 700 !important;
}
/* Titoli gallery */
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3 {
color: var(--le-accent) !important;
}
/* Titoli icone */
.cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
color: var(--le-accent) !important;
}
/* Descrizioni icone */
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
color: var(--le-muted) !important;
}
}
/* ─── 4. Header ─── */
.cd-main-header {
/* Sticky: la header resta visibile durante lo scroll su tutte le pagine.
Restando nel flusso, non serve compensare l'altezza sul contenuto. */
position: sticky;
top: 0;
background: var(--le-surface-s) !important;
border-bottom: 1px solid var(--le-line) !important;
box-shadow: none !important;
}
/* ─── Reading progress bar (sezione news) ───
Figlia di .cd-main-header (sticky): ancorata al suo bordo inferiore,
si riempie man mano che si scorre l'articolo. */
.le-reading-progress {
position: absolute;
left: 0;
bottom: -1px; /* sovrapposta al border-bottom della header */
width: 100%;
height: 3px;
z-index: 1;
pointer-events: none;
}
.le-reading-progress-bar {
display: block;
height: 100%;
width: 100%;
background: var(--le-accent); /* #e31937 — rosso editoriale */
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}
/* Header bar resta full-width, ma il suo contenuto (logo + voci menù + ricerca)
è racchiuso nel container centrale del sito — stesso "effetto footer".
Il mega menù e la barra di ricerca restano full-page (vedi override sotto). */
.cd-header-inner {
position: relative;
height: 100%;
width: min(1200px, calc(100% - 48px));
margin: 0 auto;
}
.le-brand {
font-family: "Playfair Display", serif !important;
font-weight: 800 !important;
font-style: italic !important;
letter-spacing: -0.05em !important;
line-height: 1 !important;
color: var(--le-text) !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* Logo e header — mobile / tablet */
@media only screen and (max-width: 1169px) {
.cd-main-header {
height: 58px !important;
}
.cd-header-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.nav-on-left .cd-header-inner {
flex-direction: row-reverse !important;
}
.cd-logo.le-brand {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
font-size: clamp(21px, 5.6vw, 25px) !important;
}
.cd-header-buttons {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
}
.nav-on-left .cd-header-buttons li {
float: none !important;
}
}
@media only screen and (min-width: 1170px) {
.le-brand {
font-size: 28px !important;
top: 50% !important;
transform: translateY(-50%) !important;
left: 0 !important;
}
}
/* Nav desktop — spaziatura e font */
@media only screen and (min-width: 1170px) {
.cd-main-content,
.cd-main-header {
/* Evita layer GPU e containing block inutili su desktop (causano jitter orizzontale). */
transform: none !important;
-webkit-transform: none !important;
will-change: auto !important;
}
.cd-primary-nav {
padding-right: 112px !important;
/* Su desktop la nav è statica (float): il translateX(0) ereditato dal mobile
è inutile e, creando un containing block, impedirebbe al mega panel di fare
full-bleed rispetto a .cd-header-inner. Lo annulliamo. */
transform: none !important;
}
.cd-primary-nav > li {
margin-left: 1.8em !important;
}
.cd-primary-nav > li > a {
font-family: "DM Sans", sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
}
}
/* ─── 5. Mega panel ─── */
@media only screen and (min-width: 1170px) {
.cd-primary-nav .cd-secondary-nav,
.cd-primary-nav .cd-nav-gallery,
.cd-primary-nav .cd-nav-icons {
background: var(--le-surface-s) !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12) !important;
border-top: 2px solid var(--le-accent) !important;
/* Il pannello ora è figlio di .cd-header-inner (container 1200px centrato):
full-bleed viewport; l'eccesso è tagliato da overflow-x: clip su html. */
left: 50% !important;
margin-left: -50vw !important;
width: 100vw !important;
}
.cd-primary-nav .cd-secondary-nav > li {
border-right-color: var(--le-line) !important;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item:hover {
background: var(--le-accent-bg) !important;
border-radius: var(--le-r-xs) !important;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
border-radius: var(--le-r-xs) !important;
}
}
/* ─── 6. Tech icon badges ─── */
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
background-image: none;
border-radius: var(--le-r-xs);
line-height: 40px;
text-align: center;
font-family: "DM Sans", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
color: #fff;
text-transform: uppercase;
}
.cd-primary-nav .cd-nav-icons .le-icon-ai::before {
content: "AI";
background-color: #1b2030;
}
.cd-primary-nav .cd-nav-icons .le-icon-st::before {
content: "ST";
background-color: var(--le-accent);
}
.cd-primary-nav .cd-nav-icons .le-icon-cy::before {
content: "CS";
background-color: #3b1040;
}
.cd-primary-nav .cd-nav-icons .le-icon-dl::before {
content: "DL";
background-color: #1a3a5c;
}
.cd-primary-nav .cd-nav-icons .le-icon-gd::before {
content: "GD";
background-color: #235020;
}
.cd-primary-nav .cd-nav-icons .le-icon-wb::before {
content: "WB";
background-color: #6b3a1f;
}
/* ─── 7. Search bar ─── */
.cd-search {
/* Segue la header sticky: fissata al viewport, sotto la barra (58px mobile).
In modalità no-js resta `position: relative` (vedi .no-js .cd-search). */
position: fixed;
top: 58px;
background: #ffffff !important;
border-bottom: 1px solid var(--le-line) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
.le-search-form {
display: flex !important;
align-items: center !important;
height: 100% !important;
padding: 0 5% !important;
gap: 16px !important;
background: transparent !important;
}
.le-search-lens {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--le-muted);
}
.le-search-lens svg {
width: 22px;
height: 22px;
display: block;
}
.cd-search input {
flex: 1 !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--le-text) !important;
font-family: "DM Sans", sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
}
.cd-search input::placeholder {
color: var(--le-muted) !important;
}
@media only screen and (min-width: 1170px) {
.cd-search {
/* Header desktop alta 80px: la ricerca si allinea sotto. */
top: 80px;
}
.le-search-form {
padding: 0 3% !important;
gap: 20px !important;
}
.le-search-lens svg {
width: 30px;
height: 30px;
}
.cd-search input {
font-size: 26px !important;
font-weight: 300 !important;
}
}
/* ─── 8. Main content ─── */
.cd-main-content {
background: transparent !important;
}
/* ─── 9. Common card ─── */
.le-card {
background: var(--le-surface);
border: 2px solid var(--le-dark);
border-radius: 0;
box-shadow: none;
cursor: pointer;
transition: background 0.18s ease;
}
.le-card:hover {
background: #f5f5f5;
}
/* ─── 10. Tags ─── */
.le-tag {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: 0;
background: var(--le-accent);
color: #ffffff;
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
line-height: 1;
}
.le-tag-sm {
font-size: 9px;
padding: 3px 8px;
}
.le-tag-inv {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
/* ─── 11. Typography scale ─── */
.le-hl-xl {
font-family: "Playfair Display", serif;
font-size: clamp(28px, 5.8vw, 76px);
font-weight: 800;
line-height: 0.92;
letter-spacing: -0.045em;
margin: 16px 0 14px;
}
.le-hl-l {
font-family: "Playfair Display", serif;
font-size: clamp(26px, 3.2vw, 40px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.03em;
margin: 14px 0 10px;
}
.le-hl-m {
font-family: "Playfair Display", serif;
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 12px 0 8px;
}
.le-hl-s {
font-family: "Playfair Display", serif;
font-size: clamp(15px, 1.8vw, 19px);
font-weight: 600;
line-height: 1.22;
letter-spacing: -0.015em;
margin: 8px 0 6px;
}
.le-hl-xs {
font-family: "Playfair Display", serif;
font-size: 15px;
font-weight: 600;
line-height: 1.28;
letter-spacing: -0.01em;
margin: 0 0 6px;
}
.le-lead {
color: var(--le-muted);
line-height: 1.65;
font-size: 16px;
margin: 0;
}
.le-card p,
.le-op-item p {
color: var(--le-muted);
line-height: 1.62;
font-size: 14px;
margin: 0;
}
.le-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 16px;
font-size: 12px;
color: var(--le-muted);
}
/* ─── 12. Section containers ─── */
.le-hero,
.le-highlights,
.le-body,
.le-agenda,
.le-newsletter,
.le-footer {
width: min(1200px, calc(100% - 48px));
margin-left: auto;
margin-right: auto;
}
/* ─── 13. Ticker ─── */
.le-ticker {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 18px;
padding: 11px 28px;
background: var(--le-dark);
overflow: hidden;
}
.le-ticker p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.le-ticker-label {
display: inline-flex;
padding: 4px 10px;
border-radius: 0;
background: var(--le-accent);
color: #fff;
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
/* ─── 14. Hero section ─── */
.le-hero {
display: grid;
grid-template-columns: 1.65fr 1fr;
gap: 20px;
margin-top: 28px;
}
.le-hero-main {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
border-radius: 0;
box-shadow: none;
background: var(--le-surface);
border: 2px solid var(--le-dark);
transition: background 0.18s ease;
}
.le-hero-main:hover {
background: #f5f5f5;
}
.le-hero-img {
min-height: 400px;
flex-shrink: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(10, 6, 4, 0.55)),
url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1400&q=85")
center / cover;
}
.le-hero-body {
padding: 28px 32px 32px;
}
.le-hero-side {
display: grid;
gap: 20px;
}
.le-hero-sub {
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 300px;
border-radius: var(--le-r) !important;
overflow: hidden;
}
.le-hero-sub-img {
flex: 3;
min-height: 180px;
background-size: cover;
background-position: center;
}
.le-img-magazine {
background-image:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.18)),
url("https://images.unsplash.com/photo-1512374382149-233c42b6a83b?auto=format&fit=crop&w=700&q=80");
}
.le-img-interview {
background-image:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.3)),
url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=700&q=80");
}
.le-hero-sub-body {
padding: 14px 20px 18px;
display: flex;
flex-direction: column;
flex: 0 0 auto;
}
.le-hero-sub-body p {
display: none;
}
.le-card-warm {
background: #f4f4f4 !important;
border-color: var(--le-dark) !important;
}
.le-card-dark {
background: #0c0c0c !important;
color: #ffffff;
border-color: transparent !important;
}
.le-card-dark p {
color: rgba(255, 255, 255, 0.55) !important;
}
.le-card-dark .le-hl-m {
color: #ffffff;
}
/* ─── 15. Highlights strip ─── */
.le-highlights {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 20px;
}
.le-hi-item {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
a.le-hi-item,
a.le-quartet-card {
text-decoration: none;
color: inherit;
}
a.le-hi-item:hover .le-hi-body h3,
a.le-quartet-card:hover .le-quartet-body h3 {
color: var(--le-accent);
}
.le-hi-img {
min-height: 180px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.le-hiimg-1 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1478737270239-2f02b77fc618?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-hiimg-2 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-hiimg-3 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1452587925148-ce544e77e70d?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-hiimg-4 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1512486130939-2c4f79935e4f?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-hi-body {
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.le-hi-body h3 {
margin: 0;
}
.le-hi-body p {
flex: 1;
}
/* ─── 15b. Quartet grid ─── */
.le-quartet-grid {
margin-top: 52px;
}
.le-quartet-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.le-quartet-card {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
.le-quartet-img {
min-height: 180px;
background-color: var(--le-surface);
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.le-qimg-1 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-qimg-2 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-qimg-3 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1461896836934-ffe607ba8211?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-qimg-4 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-qimg-5 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-qimg-6 {
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.12)),
url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=800&q=80")
center / cover;
}
.le-quartet-body {
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.le-quartet-body h3 {
margin: 0;
}
.le-quartet-body p {
flex: 1;
}
.le-quartet-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--le-accent);
text-decoration: none;
margin-top: auto;
padding-top: 4px;
}
a.le-hi-item:hover .le-quartet-link,
a.le-quartet-card:hover .le-quartet-link {
text-decoration: underline;
}
/* ─── 16. Body section ─── */
.le-body {
margin-top: 52px;
}
.le-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 1px solid var(--le-line);
position: relative;
}
.le-section-head::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 64px;
height: 3px;
background: var(--le-accent);
}
.le-section-head-sm {
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--le-line);
}
.le-section-head-sm::before {
display: none;
}
.le-section-head-link {
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--le-accent);
text-decoration: none;
white-space: nowrap;
transition: opacity 0.15s ease;
}
.le-section-head-link:hover {
opacity: 0.72;
}
button.le-section-head-link {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.le-grid {
display: grid;
grid-template-columns: 1.55fr 0.85fr;
gap: 20px;
align-items: start;
}
.le-col-main,
.le-col-side {
display: grid;
gap: 20px;
}
/* Featured article */
.le-art-featured {
overflow: hidden;
padding: 0;
}
.le-art-img {
min-height: 260px;
}
.le-img-city {
background:
linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.14)),
url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=80")
center / cover;
}
.le-art-body {
padding: 22px 24px 26px;
}
.le-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.le-art-compact {
padding: 22px;
min-height: 200px;
}
/* ─── 17. News layout (4 mini + 2 featured) ─── */
.le-news-layout {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 20px;
align-items: stretch;
}
/* Box 4 mini news */
.le-box-4news {
padding: 24px;
display: flex;
flex-direction: column;
}
.le-box-4news:hover {
background: var(--le-surface);
}
.le-box-4news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
flex: 1;
align-content: space-between;
}
.le-mini-card {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 10px 8px;
margin: 0 -8px;
border-bottom: 1px solid var(--le-line);
cursor: pointer;
transition: background 0.15s ease;
}
.le-mini-card:hover {
background: #f5f5f5;
}
.le-mini-card:first-child {
margin-top: 0;
}
.le-mini-card:last-child {
border-bottom: none;
}
.le-mini-thumb {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: var(--le-r-xs);
background-size: cover;
background-position: center;
}
.le-mthumb-1 {
background-image: url("https://images.unsplash.com/photo-1620712943543-bcc4688e7485?auto=format&fit=crop&w=200&q=80");
}
.le-mthumb-2 {
background-image: url("https://images.unsplash.com/photo-1574068468668-a05a11f871da?auto=format&fit=crop&w=200&q=80");
}
.le-mthumb-3 {
background-image: url("https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=200&q=80");
}
.le-mthumb-4 {
background-image: url("https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=200&q=80");
}
.le-mthumb-5 {
background-image: url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=200&q=80");
}
.le-mini-body {
flex: 1;
min-width: 0;
}
.le-mini-body .le-hl-xs {
font-size: 13px;
margin: 6px 0 4px;
}
.le-mini-body p {
font-size: 12px;
color: var(--le-muted);
line-height: 1.5;
margin: 0;
}
/* Box 2 & 3: singola colonna con foto verticale */
.le-feat-box {
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.le-feat-tag {
display: inline-flex;
margin-bottom: 8px;
}
.le-feat-img {
height: 380px;
flex-shrink: 0;
background-size: cover;
background-position: center;
}
.le-feat-img-1 {
background-color: #fff;
}
.le-feat-img-2 {
background-image:
linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.18)),
url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=600&q=80");
}
.le-feat-img-agora-logo {
background-color: #fff;
background-size: 58% auto;
background-repeat: no-repeat;
background-position: center;
}
.le-feat-body {
padding: 14px 18px 18px;
flex: 1;
}
.le-feat-body h3 {
font-size: clamp(12px, 1.3vw, 15px);
line-height: 1.2;
margin: 6px 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.le-feat-body-agora-suspended h3 {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.le-feat-body p {
font-size: 11px;
color: var(--le-muted);
line-height: 1.5;
margin: 4px 0 0;
white-space: pre-line;
}
/* Sidebar cards ─── */
.le-opinions,
.le-stats {
padding: 24px;
}
.le-op-item + .le-op-item {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--le-line);
}
.le-stats-list {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: grid;
gap: 0;
}
.le-stats-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--le-line);
}
.le-stats-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.le-stats-list strong {
font-family: "Playfair Display", serif;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
color: var(--le-accent);
}
.le-stats-list span {
color: var(--le-muted);
font-size: 12px;
text-align: right;
max-width: 14ch;
}
/* ─── 18. Newsletter ─── */
.le-newsletter {
margin-top: 52px;
display: grid;
grid-template-columns: 1.2fr 1fr;
align-items: center;
gap: 44px;
padding: 52px 56px;
border-radius: var(--le-r);
background: #0c0c0c;
color: #f5f5f5;
box-shadow: none;
border-top: 4px solid var(--le-accent);
}
.le-nl-copy .le-hl-l {
color: #ffffff;
max-width: 26ch;
}
.le-nl-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.le-nl-form input,
.le-nl-form button {
border: 0;
border-radius: 0;
padding: 14px 22px;
font: inherit;
font-size: 14px;
}
.le-nl-form input {
background: rgba(255, 255, 255, 0.9);
color: var(--le-text);
}
.le-nl-form input::placeholder {
color: #999;
}
.le-nl-form button {
background: var(--le-accent);
color: #fff;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
letter-spacing: 0.03em;
transition:
background 0.2s,
transform 0.15s;
}
.le-nl-form button:hover {
background: #b8142a;
transform: scale(1.02);
}
/* ─── 19. Footer full ─── */
.le-footer-full {
background: var(--le-dark);
color: #f5f5f5;
margin-top: 60px;
}
.le-footer-main {
width: min(1200px, calc(100% - 48px));
margin: 0 auto;
padding: 64px 0 52px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
gap: 64px;
align-items: start;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.le-footer-logo {
font-family: "Playfair Display", serif;
font-size: 26px;
font-weight: 800;
font-style: italic;
letter-spacing: -0.05em;
color: #fff;
margin: 0 0 16px;
}
.le-footer-tagline {
font-size: 14px;
line-height: 1.65;
color: rgba(240, 235, 228, 0.55);
margin: 0 0 28px;
}
.le-footer-social {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.le-footer-social a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: rgba(240, 235, 228, 0.65);
transition:
color 0.18s,
border-color 0.18s;
}
.le-footer-social svg {
width: 16px;
height: 16px;
fill: currentColor;
flex-shrink: 0;
}
.le-footer-social a:hover {
color: #fff !important;
border-color: rgba(255, 255, 255, 0.45);
}
.le-footer-nav-cols {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
}
.le-footer-col h4 {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(240, 235, 228, 0.4);
margin: 0 0 16px;
}
.le-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.le-footer-col ul li a {
font-size: 14px;
color: rgba(240, 235, 228, 0.7);
line-height: 1.4;
transition: color 0.18s;
}
.le-footer-col ul li a:hover {
color: #fff !important;
}
/* Newsletter nel footer */
.le-footer-nl-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.le-footer-nl-copy {
font-size: 14px;
color: rgba(240, 235, 228, 0.55);
}
.le-footer-nl-copy strong {
display: block;
font-size: 16px;
font-weight: 600;
color: rgba(240, 235, 228, 0.9);
margin-bottom: 4px;
}
.le-footer-nl-form {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.le-footer-nl-email-row {
display: flex;
gap: 0;
border: 1px solid rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.le-footer-nl-email-row input[type="email"],
.le-footer-nl-email-row button {
border: 0;
padding: 11px 18px;
font: inherit;
font-size: 14px;
background: transparent;
}
.le-footer-nl-email-row input[type="email"] {
color: #fff;
flex: 1;
min-width: 0;
}
.le-footer-nl-email-row input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.le-footer-nl-email-row button {
background: var(--le-accent);
color: #fff;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.18s;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.le-footer-nl-email-row button:hover {
background: #b8142a;
}
.le-footer-nl-privacy {
display: flex;
align-items: flex-start;
gap: 8px;
}
.le-footer-nl-privacy input[type="checkbox"] {
flex-shrink: 0;
margin-top: 2px;
width: 13px;
height: 13px;
accent-color: var(--le-accent);
cursor: pointer;
}
.le-footer-nl-privacy label {
font-size: 11px;
line-height: 1.55;
color: rgba(240, 235, 228, 0.45);
cursor: pointer;
}
.le-footer-nl-privacy a {
color: rgba(240, 235, 228, 0.7);
text-decoration: underline;
text-underline-offset: 2px;
}
.le-footer-nl-privacy a:hover {
color: rgba(240, 235, 228, 0.95) !important;
}
.le-footer-bottom {
width: min(1200px, calc(100% - 48px));
margin: 0 auto;
padding: 22px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.le-footer-bottom p {
font-size: 12px;
color: rgba(240, 235, 228, 0.35);
margin: 0;
}
.le-footer-legal {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.le-footer-legal a {
font-size: 12px;
color: rgba(240, 235, 228, 0.35);
transition: color 0.18s;
}
.le-footer-legal a:hover {
color: rgba(240, 235, 228, 0.75) !important;
}
/* ─── 20. Accessibility ─── */
.le-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ─── 21. Search autocomplete ─── */
.le-ac-box {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--le-surface-s);
border-top: 2px solid var(--le-accent);
box-shadow: 0 16px 48px rgba(20, 12, 8, 0.18);
z-index: 200;
max-height: 420px;
overflow-y: auto;
scroll-behavior: smooth;
}
.le-ac-box.le-ac-open {
display: block;
}
.le-ac-item {
padding: 13px 5%;
cursor: pointer;
border-bottom: 1px solid var(--le-line);
transition: background 0.12s;
}
.le-ac-item:last-child {
border-bottom: none;
}
.le-ac-item:hover,
.le-ac-item.le-ac-active {
background: var(--le-accent-bg);
}
.le-ac-title {
display: block;
font-size: 16px;
font-weight: 500;
color: var(--le-text);
line-height: 1.3;
}
.le-ac-title mark {
background: transparent;
color: var(--le-accent);
font-weight: 700;
}
.le-ac-desc {
display: block;
font-size: 12px;
color: var(--le-muted);
margin-top: 4px;
line-height: 1.5;
}
.le-search-label {
display: inline-flex;
align-items: center;
margin-bottom: 6px;
padding: 3px 8px;
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
color: #ffffff;
}
.le-search-label-category {
background: var(--le-accent);
}
.le-search-label-page {
background: #9ca3af;
}
.le-ac-item .le-search-label {
margin-bottom: 5px;
}
/* ─── 21b. Agenda eventi section ─── */
.le-agenda {
margin-top: 52px;
}
.le-section-more {
font-size: 13px;
font-weight: 600;
color: var(--le-accent);
text-decoration: none;
white-space: nowrap;
}
.le-section-more:hover {
text-decoration: underline;
}
.le-agenda-layout {
display: flex;
flex-direction: column;
gap: 20px;
}
.le-agenda-list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
/* Agenda: unico box con righe interne */
.le-agenda-box {
padding: 24px;
display: flex;
flex-direction: column;
background: var(--le-surface);
border: 2px solid var(--le-dark);
}
.le-agenda-row {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
align-items: center;
padding: 14px 8px;
margin: 0 -8px;
border-bottom: 1px solid var(--le-line);
color: var(--le-text);
text-decoration: none;
transition: background 0.15s ease;
}
.le-agenda-row:hover {
background: #f5f5f5;
color: var(--le-text);
}
.le-agenda-row:first-child {
margin-top: 0;
}
.le-agenda-row:last-child {
border-bottom: none;
}
/* Quick-links agenda */
.le-agenda-quicklinks {
display: flex;
flex-direction: column;
margin-top: 32px;
}
.le-quicklinks-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.le-quicklink {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
text-decoration: none;
color: var(--le-text);
transition:
background 0.15s,
color 0.15s;
}
.le-quicklink:hover {
background: #f5f5f5;
}
.le-quicklink-ico {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
}
.le-quicklink-label {
font-size: 14px;
font-weight: 600;
flex: 1;
line-height: 1.3;
min-width: 0;
}
.le-quicklink-arrow {
font-size: 16px;
color: var(--le-accent);
flex-shrink: 0;
}
/* Featured event */
.le-agenda-featured {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
position: relative;
}
.le-agenda-feat-date {
position: absolute;
top: 16px;
left: 16px;
background: var(--le-accent);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 12px;
line-height: 1;
z-index: 1;
}
.le-agenda-feat-img {
min-height: 240px;
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.15)),
url("https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=1200&q=80")
center / cover;
flex-shrink: 0;
}
.le-agenda-feat-body {
padding: 24px 26px 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.le-agenda-feat-body h3 {
margin: 0;
}
.le-agenda-feat-body p {
margin: 0;
color: var(--le-muted, #666);
}
.le-agenda-day {
font-size: 26px;
font-weight: 700;
font-family: var(--le-ff-head, serif);
line-height: 1;
}
.le-agenda-month {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 2px;
}
.le-agenda-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
color: var(--le-muted, #666);
}
.le-agenda-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
align-items: center;
padding: 18px 20px;
}
.le-agenda-item-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--le-accent-bg);
color: var(--le-accent);
padding: 8px 6px;
flex-shrink: 0;
line-height: 1;
}
.le-agenda-item-date .le-agenda-day {
font-size: 20px;
}
.le-agenda-item-date .le-agenda-month {
font-size: 10px;
}
.le-agenda-item-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.le-agenda-item-body h4 {
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
.le-agenda-item-body .le-agenda-meta {
font-size: 12px;
}
.le-agenda-item-body .le-tag {
align-self: flex-start;
}
/* ─── 22. Partners section ─── */
.le-partners {
width: min(1200px, calc(100% - 48px));
margin: 52px auto 0;
}
.le-partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.le-partner-card {
padding: 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.le-partner-card:hover {
background: var(--le-surface);
}
.le-partner-logo-area {
display: flex;
align-items: center;
justify-content: center;
height: 72px;
width: 100%;
margin-bottom: 4px;
}
.le-partner-logo-img {
height: 72px;
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
}
.le-partner-card .le-hl-xs {
margin: 0;
}
.le-partner-card p {
color: var(--le-muted);
font-size: 13px;
line-height: 1.6;
margin: 0;
flex: 1;
}
.le-partner-link {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--le-accent);
transition: gap 0.18s;
}
.le-partner-link:hover {
color: var(--le-accent) !important;
gap: 9px;
}
/* ─── 22b. Weather bar ─── */
.le-weather {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
padding: 9px 28px;
background: #111010;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.le-weather-badge {
display: inline-flex;
padding: 4px 10px;
border-radius: 0;
background: var(--le-accent);
color: #fff;
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.le-weather-days {
display: flex;
align-items: center;
}
.le-weather-day {
display: flex;
align-items: center;
gap: 7px;
padding: 0 20px 0 0;
}
.le-weather-sep {
display: inline-block;
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.1);
margin: 0 20px 0 0;
flex-shrink: 0;
}
.le-weather-lbl {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.38);
white-space: nowrap;
}
.le-weather-ico {
font-size: 15px;
line-height: 1;
}
.le-weather-tmp {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}
.le-weather-city {
display: none;
}
/* ─── 23. Responsive ─── */
@media (max-width: 1169px) {
.le-hero {
grid-template-columns: 1fr 1fr;
}
.le-hero-main {
grid-column: 1 / -1;
}
.le-hero-side {
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr;
}
.le-hero-sub {
min-height: 340px;
}
.le-hero-sub-img {
min-height: 220px;
}
.le-highlights {
grid-template-columns: repeat(2, 1fr);
}
.le-grid {
grid-template-columns: 1fr;
}
.le-news-layout {
grid-template-columns: 1fr 1fr;
}
.le-box-4news {
grid-column: 1 / -1;
}
.le-box-4news-grid {
grid-template-columns: 1fr;
}
.le-newsletter {
grid-template-columns: 1fr;
}
.le-quartet-grid {
grid-template-columns: repeat(2, 1fr);
}
.le-agenda-layout .le-agenda-list {
grid-template-columns: 1fr;
}
.le-quicklinks-row {
grid-template-columns: repeat(2, 1fr);
}
.le-footer-main {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 680px) {
.le-news-layout {
grid-template-columns: 1fr;
}
.le-box-4news {
grid-column: auto;
}
.le-hero {
grid-template-columns: 1fr;
}
.le-hero-side {
grid-template-columns: 1fr;
}
.le-hero-sub {
min-height: 300px;
}
.le-hero-sub-img {
min-height: 200px;
}
.le-ticker {
grid-template-columns: 1fr;
gap: 8px;
padding: 10px 18px;
}
.le-quartet-grid {
grid-template-columns: 1fr;
}
.le-quicklinks-row {
grid-template-columns: 1fr;
}
.le-highlights {
grid-template-columns: 1fr;
}
.le-partners-grid {
grid-template-columns: repeat(2, 1fr);
}
.le-partner-card {
padding: 20px;
}
.le-partners {
width: min(100%, calc(100% - 24px));
}
.le-weather {
gap: 12px;
padding: 8px 18px;
}
.le-weather-city {
display: none;
}
.le-weather-day {
gap: 5px;
padding-right: 12px;
}
.le-weather-sep {
margin-right: 12px;
}
.le-weather-lbl {
font-size: 9px;
letter-spacing: 0.06em;
}
.le-highlights {
grid-template-columns: 1fr;
}
.le-two-col {
grid-template-columns: 1fr;
}
.le-nl-form {
grid-template-columns: 1fr;
}
.le-newsletter {
padding: 30px 24px;
}
.le-footer-nl-form {
width: 100%;
}
.le-footer-nl-email-row {
flex-direction: column;
}
.le-footer-nl-email-row input[type="email"] {
min-width: 0;
width: 100%;
}
.le-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.le-hero,
.le-highlights,
.le-body,
.le-newsletter {
width: min(100%, calc(100% - 24px));
}
.le-footer-main,
.le-footer-bottom {
width: min(100%, calc(100% - 24px));
}
}
/* ─── Privacy modal ─── */
.le-privacy-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s ease,
visibility 0s 0.25s;
}
.le-privacy-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease;
}
.le-privacy-modal {
background: var(--le-surface);
color: var(--le-text);
max-width: 620px;
width: 100%;
max-height: 82vh;
overflow-y: auto;
padding: 44px 48px 48px;
position: relative;
border-top: 3px solid var(--le-accent);
box-shadow: var(--le-shadow-lg);
}
.le-privacy-modal-close {
position: absolute;
top: 14px;
right: 16px;
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: var(--le-muted);
cursor: pointer;
padding: 6px 10px;
transition: color 0.15s;
}
.le-privacy-modal-close:hover {
color: var(--le-text);
}
.le-privacy-modal h2 {
font-family: "Playfair Display", serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 12px;
padding-right: 32px;
color: var(--le-text);
}
.le-privacy-modal > p:first-of-type {
font-size: 12px;
color: var(--le-muted);
margin: 0;
}
.le-privacy-modal h3 {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--le-accent);
margin: 18px 0 5px;
}
.le-privacy-modal p {
font-size: 13px;
line-height: 1.72;
color: var(--le-muted);
margin: 0 0 6px;
}
.le-privacy-modal strong {
color: var(--le-text);
font-weight: 600;
}
.le-privacy-modal a {
color: var(--le-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.le-privacy-modal-divider {
height: 1px;
background: var(--le-line);
margin: 20px 0;
}
@media (max-width: 680px) {
.le-privacy-modal {
padding: 32px 24px 36px;
}
}
/* ─── News detail page ─── */
.le-article {
width: min(1200px, calc(100% - 48px));
margin: 28px auto 0;
}
/* Breadcrumb */
.le-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin-bottom: 28px;
padding-bottom: 14px;
border-bottom: 1px solid var(--le-line);
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.le-breadcrumb a {
color: var(--le-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.le-breadcrumb a:hover {
color: var(--le-accent);
}
.le-breadcrumb-sep {
color: var(--le-muted);
opacity: 0.45;
}
.le-breadcrumb-current {
color: var(--le-text);
max-width: 42ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Layout */
.le-article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 48px;
align-items: start;
}
/* Article main */
.le-article-main {
min-width: 0;
}
.le-article-header {
margin-bottom: 28px;
}
.le-content-header .le-article-title {
margin-top: 0;
}
.le-content-header .le-tag + .le-article-title {
margin-top: 14px;
}
.le-article-title {
font-size: clamp(28px, 4.4vw, 52px);
margin: 14px 0 0;
}
.le-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 18px;
font-size: 13px;
color: var(--le-muted);
}
.le-article-meta-sep {
opacity: 0.6;
}
/* Share button — sulla stessa riga della meta, allineato a destra */
.le-article-share {
margin-left: auto;
}
.le-share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
background: var(--le-surface);
border: 2px solid var(--le-dark);
color: var(--le-text);
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.le-share-btn:hover {
background: var(--le-dark);
color: #fff;
}
.le-share-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.le-share-btn.is-copied {
background: var(--le-accent);
border-color: var(--le-accent);
color: #fff;
}
/* Hero image */
.le-article-hero-img {
width: 100%;
height: clamp(220px, 42vw, 440px);
margin: 8px 0 32px;
border: 2px solid var(--le-dark);
background-size: cover;
background-position: center top;
}
.le-article-hero-logo {
height: clamp(180px, 26vw, 260px);
background-color: #fff;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.le-article-img-1 {
background-color: #fff;
}
/* Article content */
.le-article-content {
font-size: 17px;
line-height: 1.75;
color: var(--le-text);
}
.le-article-content p {
margin: 0 0 20px;
}
.le-article-content h2 {
font-family: "Playfair Display", serif;
font-size: clamp(20px, 2.6vw, 28px);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.02em;
margin: 38px 0 14px;
}
.le-article-content h3 {
font-family: "Playfair Display", serif;
font-size: clamp(18px, 2.2vw, 22px);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 30px 0 12px;
}
.le-article-content .le-content-gallery {
margin-top: 8px;
}
.le-article-content blockquote {
margin: 30px 0;
padding: 6px 0 6px 24px;
border-left: 3px solid var(--le-accent);
font-family: "Playfair Display", serif;
font-size: clamp(19px, 2.2vw, 23px);
font-style: italic;
line-height: 1.42;
color: var(--le-text);
}
.le-article-content ul,
.le-article-content ol {
margin: 0 0 20px;
padding-left: 22px;
}
.le-article-content li {
margin-bottom: 8px;
line-height: 1.7;
}
.le-article-content strong {
font-weight: 700;
}
.le-article-content a {
color: var(--le-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.le-article-content img {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
object-position: top;
}
.le-article-content .le-content-logo {
max-width: 280px;
height: auto;
margin: 0 0 8px;
object-fit: contain;
}
.le-content-figure {
margin: 0 0 24px;
}
.le-content-figure img,
.le-content-gallery-item img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 2px;
}
.le-content-figure figcaption,
.le-content-gallery-item figcaption {
margin-top: 8px;
font-size: 14px;
color: var(--le-muted, #667085);
}
.le-content-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0 0 28px;
}
.le-content-gallery-item {
margin: 0;
}
.le-content-sports {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 18px;
margin: 0 0 28px;
}
.le-content-sport {
margin: 0;
}
.le-content-sport h3 {
margin: 0 0 10px;
font-size: 1.05em;
}
.le-content-sport .le-content-figure {
margin-bottom: 10px;
}
.le-lightbox-trigger {
display: block;
cursor: zoom-in;
text-decoration: none;
}
.le-lightbox-trigger:focus-visible {
outline: 2px solid var(--le-accent);
outline-offset: 3px;
}
html.le-lightbox-open,
html.le-lightbox-open body {
overflow: hidden;
}
.le-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 48px 64px;
background: rgba(12, 14, 18, 0.92);
}
.le-lightbox.is-open {
display: flex;
}
.le-lightbox-figure {
margin: 0;
max-width: min(1100px, 100%);
max-height: 100%;
text-align: center;
}
.le-lightbox-image {
display: block;
max-width: 100%;
max-height: calc(100vh - 120px);
width: auto;
height: auto;
margin: 0 auto;
object-fit: contain;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.le-lightbox-caption {
margin-top: 14px;
color: #f4f4f5;
font-size: 15px;
}
.le-lightbox-close,
.le-lightbox-prev,
.le-lightbox-next {
position: absolute;
border: 0;
background: rgba(255, 255, 255, 0.08);
color: #fff;
cursor: pointer;
border-radius: 999px;
line-height: 1;
}
.le-lightbox-close {
top: 18px;
right: 18px;
width: 44px;
height: 44px;
font-size: 28px;
}
.le-lightbox-prev,
.le-lightbox-next {
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
font-size: 22px;
}
.le-lightbox-prev {
left: 16px;
}
.le-lightbox-next {
right: 16px;
}
.le-lightbox-close:hover,
.le-lightbox-prev:hover,
.le-lightbox-next:hover {
background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 720px) {
.le-content-gallery,
.le-content-sports {
grid-template-columns: 1fr;
}
.le-lightbox {
padding: 56px 16px 24px;
}
.le-lightbox-prev,
.le-lightbox-next {
top: auto;
bottom: 18px;
transform: none;
}
.le-lightbox-prev {
left: 18px;
}
.le-lightbox-next {
right: 18px;
}
}
/* Sidebar */
.le-article-sidebar {
display: flex;
flex-direction: column;
gap: 36px;
position: sticky;
top: 24px;
}
.le-sidebar-block {
display: block;
}
/* Related news */
.le-related-list {
display: flex;
flex-direction: column;
}
.le-related-item {
display: block;
padding: 12px 0;
border-bottom: 1px solid var(--le-line);
text-decoration: none;
color: var(--le-text);
transition: opacity 0.15s ease;
}
.le-related-item:first-child {
padding-top: 0;
}
.le-related-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.le-related-item:hover {
opacity: 0.72;
}
.le-related-item .le-hl-xs {
font-size: 13px;
margin: 0;
line-height: 1.35;
}
/* Sidebar quick-links (stacked) */
.le-sidebar-quicklinks {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Sidebar agenda widget */
.le-sidebar-agenda-box {
display: flex;
flex-direction: column;
background: var(--le-surface);
border: 2px solid var(--le-dark);
}
.le-sidebar-agenda-row {
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px;
align-items: start;
padding: 12px;
border-bottom: 1px solid var(--le-line);
color: var(--le-text);
text-decoration: none;
transition: background 0.15s ease;
}
.le-sidebar-agenda-row:last-child {
border-bottom: none;
}
.le-sidebar-agenda-row:hover {
background: #f5f5f5;
color: var(--le-text);
}
.le-sidebar-agenda-row .le-agenda-item-date {
padding: 6px 4px;
}
.le-sidebar-agenda-row .le-agenda-day {
font-size: 16px;
}
.le-sidebar-agenda-row .le-agenda-month {
font-size: 9px;
}
.le-sidebar-agenda-row .le-hl-xs {
font-size: 12px;
line-height: 1.35;
margin: 4px 0 0;
}
.le-sidebar-agenda-row .le-agenda-meta {
font-size: 11px;
margin-top: 4px;
}
.le-sidebar-agenda-empty {
margin: 0;
font-size: 13px;
color: var(--le-muted);
line-height: 1.5;
}
/* Agenda modal */
.le-agenda-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 9000;
display: flex;
align-items: stretch;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s ease,
visibility 0s 0.25s;
}
.le-agenda-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease;
}
.le-agenda-modal {
background: var(--le-surface);
color: var(--le-text);
width: min(720px, 100%);
height: 100%;
max-height: calc(100dvh - 40px);
display: flex;
flex-direction: column;
position: relative;
border: 2px solid var(--le-dark);
box-shadow: var(--le-shadow-lg);
overflow: hidden;
}
.le-agenda-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-shrink: 0;
padding: 20px 20px 16px 24px;
border-bottom: 1px solid var(--le-line);
}
.le-agenda-modal-close {
flex-shrink: 0;
background: none;
border: none;
font-size: 28px;
line-height: 1;
color: var(--le-muted);
cursor: pointer;
padding: 4px 8px;
margin: -4px -8px 0 0;
transition: color 0.15s;
}
.le-agenda-modal-close:hover {
color: var(--le-text);
}
.le-agenda-modal-title {
font-family: "Playfair Display", serif;
font-size: clamp(20px, 4vw, 26px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
padding-right: 8px;
}
.le-agenda-modal-list {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.le-agenda-modal-row {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
align-items: start;
padding: 16px 20px;
border-bottom: 1px solid var(--le-line);
text-decoration: none;
color: var(--le-text);
transition: background 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.le-agenda-modal-row:last-child {
border-bottom: none;
}
.le-agenda-modal-row:hover {
background: #f5f5f5;
color: var(--le-text);
}
.le-agenda-modal-row:active {
background: #ebebeb;
}
.le-agenda-modal-row .le-hl-xs {
margin: 6px 0 0;
}
@media (max-width: 680px) {
.le-agenda-overlay {
padding: 10px;
align-items: stretch;
}
.le-agenda-modal {
width: 100%;
max-height: calc(100dvh - 20px);
max-height: calc(100svh - 20px);
}
.le-agenda-modal-head {
padding: 16px 16px 14px 18px;
}
.le-agenda-modal-close {
font-size: 32px;
padding: 8px 10px;
margin: -8px -10px 0 0;
}
.le-agenda-modal-row {
grid-template-columns: 48px 1fr;
gap: 12px;
padding: 16px 18px;
min-height: 72px;
}
}
.le-agenda-archive-box {
max-width: 760px;
}
@media (max-width: 900px) {
.le-article-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.le-article-sidebar {
position: static;
}
}
@media (max-width: 680px) {
.le-article {
width: min(100%, calc(100% - 24px));
}
.le-article-content {
font-size: 16px;
}
}
/* ─── 25. Archive page ─── */
.le-archive {
width: min(1200px, calc(100% - 48px));
margin: 28px auto 64px;
}
.le-archive-head {
margin-bottom: 32px;
padding-bottom: 18px;
border-bottom: 1px solid var(--le-line);
}
.le-archive-title {
margin: 14px 0 0;
}
.le-archive-summary {
margin: 10px 0 0;
font-size: 14px;
color: var(--le-muted);
}
.le-archive-summary-sep {
margin: 0 6px;
}
.le-archive-empty {
color: var(--le-muted);
}
.le-archive-list {
display: flex;
flex-direction: column;
}
.le-archive-item {
padding: 22px 0;
border-bottom: 1px solid var(--le-line);
}
.le-archive-item:first-child {
padding-top: 0;
}
.le-archive-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.le-archive-item-title {
margin: 0 0 6px;
}
.le-archive-item-title a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.le-archive-item-title a:hover {
color: var(--le-accent);
}
.le-archive-item-date {
display: block;
margin-bottom: 8px;
font-size: 12px;
color: var(--le-muted);
}
.le-archive-item-abstract {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--le-muted);
}
/* Pagination */
.le-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 48px;
}
.le-page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border: 2px solid var(--le-dark);
background: var(--le-surface);
color: var(--le-text);
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.le-page-link:hover {
background: var(--le-dark);
color: #fff;
}
.le-page-link.is-current {
background: var(--le-accent);
border-color: var(--le-accent);
color: #fff;
cursor: default;
}
.le-page-link.is-disabled {
opacity: 0.35;
pointer-events: none;
}
.le-page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 40px;
color: var(--le-muted);
font-family: "Barlow Condensed", "DM Sans", sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
user-select: none;
}
@media (max-width: 680px) {
.le-archive {
width: min(100%, calc(100% - 24px));
}
.le-pagination {
gap: 6px;
}
.le-page-link {
min-width: 36px;
height: 36px;
font-size: 14px;
}
}