/* Theme Name: Lorenzo Caramia Description: Personal theme of Lorenzo Caramia: presentation, a portfolio of filterable projects and a blog with table of contents and technical sheet in the articles. Version: 1.2.0 Author: Lorenzo Caramia Text Domain: lorenzocaramia Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 7.4 Domain Path: /languages Tags: blog, portfolio, custom-colors, custom-logo, custom-menu, theme-options, translation-ready, block-editor-patterns, block-editor-styles, featured-images, footer-widgets, wide-blocks License: GNU General Public License v3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* ! Reset */ body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;} *,*:before,*:after{ box-sizing: border-box; } h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;} ol,ul{padding-left: 20px;} img{height: auto;max-width: 100%;} a{text-decoration: none;} hr{border:none; border-bottom: 1px solid var(--border-color)} strong {font-weight: 700} html, html body {overflow-x: clip;} /* clip, not hidden: keeps position sticky working; on html too, or full-width blocks (100vw) scroll the page sideways */ body.admin-bar .header { position: fixed; top: 32px; z-index: 1000;} @media (max-width: 782px) { body.admin-bar .header { top: 46px; } } /* ------------------------------------------------------------------------- * /* 1 Base */ /* ------------------------------------------------------------------------- */ :root { --site-bg: #FFFFFF; --site-text-color: #111827; --text-secondary: #4B5563; --text-muted: #6B7280; --border-color: #E5E7EB; --input-border: #8E949C; --surface: #F9FAFB; --surface-strong: #F3F4F6; --link-color: #2563EB; --link-color-hover: #1D4ED8; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius: 8px; --radius-lg: 12px; --container: 1200px; --measure: 640px; --header-height: 76px; --gutter: clamp(20px, 5vw, 48px); --ease-out: cubic-bezier(.16, 1, .3, 1); } html{ scroll-padding-top: calc(var(--header-height) + 24px); } /* Typography */ body{font-size: 17px; line-height: 1.65; background-color: var(--site-bg); color: var(--site-text-color); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;} body.custom-background.dark{background-color: var(--site-bg);} body.menu-open{overflow: hidden;} /*block scrolling when menu is open*/ /* ! Title System */ h1, h2, h3, h4, h5, h6, p, ol, ul{margin-bottom: 1rem;line-height: 1.65} h1, h2, h3, h4, h5, h6{line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--site-text-color); text-wrap: balance;} h1{font-size: clamp(2.5rem, 1.55rem + 3.6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800;} h2{font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); letter-spacing: -0.03em;} h3{font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);} h4{font-size: 1.25rem;} h5{font-size: 1.0625rem;} h6{font-size: 1rem;} p, ul,li {font-size: inherit;} p{text-wrap: pretty;} @media (max-width: 768px) { body{font-size: 16px;} } /* Typography helpers */ .text-0{font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1;} .text-1{font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.4rem);} .text-2{font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.2rem);} .text-3{font-size: 1.5rem;} .text-4{font-size: 1.25rem;} .light{font-weight: 400; color: var(--text-secondary);} .lead{font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.5; color: var(--text-secondary); max-width: 34em;} .evi a{color:#fff!important; background-color: var(--link-color); border-radius: var(--radius); padding: 8px 16px!important; margin-left: 8px; transition: background-color .2s var(--ease-out);} .evi a:hover{background-color: var(--link-color-hover);} /* Link color */ a { color: var(--link-color); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .2s var(--ease-out); } a:focus, a:hover { color: var(--link-color-hover); text-decoration: none; } /* Button Link */ .wp-block-button__link{display: inline-flex; align-items: center; gap: .5em; text-decoration: none!important; color:#fff; font-size: 1rem; font-weight: 600; line-height: 1.2; padding: 14px 24px; border-radius: var(--radius); transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);} .wp-block-button__link:hover, .wp-block-button__link:focus{text-decoration: none!important;color:#fff} .is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background){background: transparent; border: 1px solid var(--border-color); padding: 13px 23px;} .is-style-outline .wp-block-button__link:hover{background: transparent;} .wp-block-buttons{gap: 12px;} /* ------------------------------------------------------------------------- * /* 2 Layout */ /* ------------------------------------------------------------------------- */ .wrapper{width: 100%; padding: 0 var(--gutter); /* overflow: hidden; */ position: relative;} /* ------------------------------------------------------------------------- * /* 2.1 Menu */ /* ------------------------------------------------------------------------- */ .spacer{height: calc(var(--header-height) + 32px);} .header__topbar{ background-color: var(--site-text-color); width: 100%;padding: 10px 4px;color:#fff; text-align: center; font-size: 14px; margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);width: auto;} @media (max-width: 794px) { .header__topbar{font-size: 13px;} } .header{ background-color: var(--site-bg); position: fixed; top:0; left:0; z-index: 9999; width: 100%; padding: 0 var(--gutter); transition: box-shadow .3s var(--ease-out);} .scroll-down .header{ box-shadow: 0 1px 0 var(--border-color); } .header__content{width: 100%; max-width: var(--container); height: var(--header-height); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; border-bottom: 0; position: relative;} .header__logo, .header__quick{display: flex; align-items: center;color:var(--site-text-color);font-weight: 700;} .header__logo{font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap;} .header__logo:hover{color: var(--site-text-color);} .header__quick a{color:var(--site-text-color);} .header nav{margin-left: auto;} .header__logo-img, .header__logo_white-img{width: 160px;height: auto;} .header__quick ul{list-style-type: none; margin-bottom: 0; padding-left: 0; display: flex; align-items: center; gap: 4px;} .header__quick ul li{display: inline-block;} .header__quick ul li a{padding: 8px 6px; font-size: 15px; font-weight: 500;} .menu, .menu ul{margin: 0;position: relative;} .menu, .menu > ul{display: flex; align-items: center; gap: 4px; padding-left: 0; list-style: none; margin: 0;} .menu li{display: inline-block;position: relative} .menu li a{color: var(--text-secondary); display: block; padding: 10px 12px; font-size: 15px; font-weight: 500; border-radius: var(--radius); transition: color .2s var(--ease-out), background-color .2s var(--ease-out);} .menu li a:hover{color: var(--site-text-color); background-color: var(--surface-strong);} .menu li.current-menu-item > a:not([href*="#"]), .menu li.current_page_item > a:not([href*="#"]), .menu li.current-menu-ancestor > a:not([href*="#"]), .menu li.current_page_parent > a:not([href*="#"]){color: var(--site-text-color); font-weight: 700;} .icon-hamburger{display: none;} /* Quick search */ .quick-search{width: 160px; height: 38px; background: var(--surface-strong); border-radius: var(--radius); margin: 0 8px 0 0; transition: width .3s var(--ease-out);} .quick-search form{display: flex;justify-content: center;align-items: center;} .quick-search__icon{border:none; background: none; padding: 9px 4px 9px 10px; margin: 0; cursor: pointer;} input.quick-search__input[type=search]{padding: 8px 6px; font-size: 14px; margin:0; border:none; background: none; box-shadow: none;} @media (max-width: 1290px) { .quick-search {width: 40px; position: relative; background-color: transparent; margin-right: 8px;} .quick-search form{width:38px; height: 38px; position: absolute; right:0; top:0; background: var(--surface-strong); border-radius: var(--radius); overflow: hidden; transition: width .4s var(--ease-out);} .quick-search:hover form, .quick-search:focus-within form{width:180px;} } @media (max-width: 1190px) { .header__logo-img, .header__logo_white-img{width: 130px;height: auto;} /* the panel starts where the header ends: the script measures it (admin bar, top bar) */ .menu, .menu > ul{ position: fixed; top: var(--menu-top, var(--header-height)); left:0; right:0; bottom: 0; display: block; margin: 0; padding: 8px var(--gutter) 48px; background-color: var(--site-bg); overflow: auto; transition: transform .5s var(--ease-out), visibility .5s; transform: translateX(-100%); visibility: hidden; } .menu li{display: block; width: 100%; margin: 0; border-bottom: 1px solid var(--border-color);} .menu li a{padding: 18px 0; font-size: 1.375rem; font-weight: 600; color: var(--site-text-color); border-radius: 0;} .menu li a:hover{background: none; color: var(--link-color);} .menu-open .menu, .menu-open .menu > ul{transform: translateX(0%); visibility: visible;} .icon-hamburger{height: 44px; width: 44px; position:absolute; top: 50%; right: -10px; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; border:none; background: transparent; z-index: 9999; cursor: pointer; padding: 0; border-radius: var(--radius);} .icon-hamburger strong{position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0;} .icon-hamburger span{height: 2px; width: 22px; background: var(--site-text-color); position: relative; display: block; margin: 0; border-radius: 2px; transition: transform .3s var(--ease-out);} .menu-open .icon-hamburger span:nth-child(2){transform: translateY(4.5px) rotate(45deg);} .menu-open .icon-hamburger span:nth-child(3){transform: translateY(-4.5px) rotate(-45deg);} .header__content{padding-right: 48px;} .header__quick{display: flex; justify-content: flex-end;} .header__quick ul{padding-left: 0;} } @media (max-width: 400px) { .header__quick .menu-item-type-custom{display: none;} .header__quick button{pointer-events: none;} } /* Menu transparent */ @media (min-width: 1190px) { .page-template-menu-trasparent .spacer, .page-template-align-wide-fix-trasparent .spacer{display: none;} .page-template-menu-trasparent .header, .page-template-align-wide-fix-trasparent .header{background: transparent; box-shadow: none; transition: background-color .5s var(--ease-out);} .page-template-menu-trasparent .header__logo-img, .page-template-menu-trasparent .header [class^='icon-'], .page-template-align-wide-fix-trasparent .header__logo-img, .page-template-align-wide-fix-trasparent .header [class^='icon-']{filter: brightness(0) invert(1);} .page-template-menu-trasparent .header__logo, .page-template-align-wide-fix-trasparent .header__logo{color:#fff} .page-template-menu-trasparent .menu li a, .page-template-menu-trasparent .header__quick ul li a, .page-template-align-wide-fix-trasparent .menu li a, .page-template-align-wide-fix-trasparent .header__quick ul li a{color:#fff} .page-template-menu-trasparent .menu li a:hover, .page-template-align-wide-fix-trasparent .menu li a:hover{background-color: rgba(255,255,255,.12);} .page-template-menu-trasparent.scroll-down .header, .page-template-align-wide-fix-trasparent.scroll-down .header{background: var(--site-text-color);} } @media (max-width: 1190px) { .page-template-menu-trasparent .spacer, .page-template-align-wide-fix-trasparent .spacer{height: var(--header-height)} } /* Menu black, Blank e Contained Templates */ @media (min-width: 1190px) { .page-template-menu-black .spacer{display: none;} .page-template-menu-black .header{background: transparent; box-shadow: none; transition: background-color .5s var(--ease-out);} .page-template-menu-black.scroll-down .header{background-color: var(--site-bg)} } .page-template-align-wide-fix .spacer, .page-template-blank .spacer, .page-template-contained-no-title .spacer{height: var(--header-height)} @media (max-width: 1190px) { .page-template-align-wide-fix .spacer, .page-template-menu-black .spacer, .page-template-blank .spacer, .page-template-contained-no-title .spacer{height: var(--header-height)} } /* Menu Dropdown */ .menu > li > ul{ background: var(--site-bg); border: 1px solid var(--border-color); box-shadow: 0 12px 32px -8px rgba(17, 24, 39, .14); opacity: 0; display: none; min-width: 220px; position: absolute; transition: opacity .3s var(--ease-out); margin-top: 4px; left: 0; padding: 6px; border-radius: var(--radius-lg); list-style: none; z-index: 10; } .menu li ul > li > a, .page-template-menu-trasparent .menu li ul > li > a, .page-template-align-wide-fix-trasparent .menu li ul > li > a{color: var(--site-text-color); border-radius: 6px; font-weight: 500;} .menu li ul > li > a:hover {background: var(--surface-strong); color: var(--site-text-color)} /* Mega Menu */ .menu > li.mega-menu > .sub-menu a{padding: 12px;} .menu > li.mega-menu > .sub-menu .sub-menu {padding-left: 0;width: 180px;} .menu > li.mega-menu > .sub-menu .sub-menu li a{padding-top: 7px;padding-bottom: 8px;font-weight: normal;font-size: 14px;} /* Open Menus */ @media (min-width: 1190px) { .menu > li:hover > ul, .menu > li > ul:hover { visibility: visible; opacity: 1; display: block; } .menu > li.mega-menu:hover > ul, .menu > li.mega-menu > ul:hover, .menu > li.mega-menu:focus-within > ul { visibility: visible; opacity: 1; display: flex; flex-wrap: wrap;width: 600px;} .menu > li.mega-menu > ul > li{width: 193px;} } .menu li.open-dropdown > ul{visibility: visible; opacity: 1; display: block; } .menu li.mega-menu.open-dropdown > ul{visibility: visible; opacity: 1; display: block;} /* open dropdown with focus tab*/ .menu li:focus-within ul{visibility: visible; opacity: 1; display: block; } .menu li ul li { clear: both; width: 100%; } .menu > li.menu-item-has-children > a{position: relative;padding-right: 30px;} .menu > li.menu-item-has-children > a::after{ content:" ";width: 20px;height: 20px;position: absolute; top:50%; right: 6px; margin-top: -10px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; } @media (max-width: 1190px) { .menu li ul{position: relative;background: none;border: 0;box-shadow: none;padding: 0 0 12px 12px;} .menu li ul li{border:none; width: 95%; } .menu li ul li a{font-size: 1.125rem; padding: 10px 0;} .menu > li.mega-menu > .sub-menu {margin-left: 5vw;} .menu > li.mega-menu > .sub-menu li {margin:0;} .menu > li.mega-menu > .sub-menu > li {width: 40vw;margin-bottom: 20px;} } /* ------------------------------------------------------------------------- * /* 2.2 Home */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 2.3 Index */ /* ------------------------------------------------------------------------- */ .img-16-9{ aspect-ratio: 16 / 9; object-fit: cover; } /* Single, Post & Page */ @media (max-width: 768px) { h1 span{display: block;} } /* Page header (blog, archives, search, projects) */ .page-header{display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px; padding: clamp(16px, 3vw, 40px) 0 0; margin-bottom: clamp(32px, 4vw, 56px);} .page-header__title{grid-column: 1; margin: 0; max-width: 14em;} .page-header__title em{font-style: normal; color: var(--link-color);} .page-header__intro{grid-column: 1 / -1; margin: 0; max-width: 36em; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.5; color: var(--text-secondary);} .page-header__search{grid-column: 2; grid-row: 1; width: 320px;} @media (max-width: 768px) { .page-header{grid-template-columns: minmax(0, 1fr);} .page-header__search{grid-column: 1; grid-row: auto; width: 100%;} } .page__title{margin-bottom: 32px;} /* ------------------------------------------------------------------------- * /* 2.4 Sections */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 2.6 Footer */ /* ------------------------------------------------------------------------- */ .footer-content{ margin-top: clamp(80px, 10vw, 140px); padding: 0 var(--gutter); width: auto; max-width: none; margin-right: calc(-1 * var(--gutter)); /* full bleed from the wrapper padding: no 100vw scrollbar offset */ margin-left: calc(-1 * var(--gutter)); border-top: 1px solid var(--border-color); font-size: 15px; } .footer-container{max-width: var(--container); margin: 0 auto;} .footer-widgets{padding-top: 48px; max-width: none;} .footer-widgets h2, .footer-widgets h3{font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 12px;} .footer-widgets > [class*='col-']{padding-left: 0; padding-right: 32px;} .footer-widgets ul{list-style: none; padding-left: 0; margin: 0;} .footer-widgets li{margin-bottom: 6px;} .footer-widgets a{color: var(--text-secondary);} .footer-widgets a:hover{color: var(--site-text-color);} .footer-bottom{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 28px 0;} .footer-bottom p{margin: 0; font-size: inherit;} .footer-menu{display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0;} .footer-menu a, .footer-bottom__top a{color: inherit; font-weight: 500;} .footer-menu a:hover, .footer-bottom__top a:hover{color: var(--site-text-color);} .footer-bottom__top a{display: inline-flex; align-items: center; gap: 6px;} @media (max-width: 768px) { .footer-bottom{flex-direction: column; align-items: flex-start;} } /* ------------------------------------------------------------------------- * /* 3 Modules */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 4 WordPress Default Element */ /* ------------------------------------------------------------------------- */ /* Pagination */ .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 56px 0 0; padding: 0; width: 100%; } .pagination span, .pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--site-text-color); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .2s var(--ease-out); } .pagination a:hover { border-color: var(--site-text-color); color: var(--site-text-color); } .pagination .current { background: var(--site-text-color); border-color: var(--site-text-color); color: #fff; } .pagination .dots { border-color: transparent; } /* Image */ .alignleft { float: left; margin-right: 24px; margin-bottom: 12px; max-width: 97%; height: auto; } .alignright { float: right; margin-bottom: 12px; margin-left: 24px; max-width: 97%; height: auto; } .aligncenter { display: block; margin: 0 auto; max-width: 97%; height: auto; } .alignnone { max-width: 97%; height: auto; } .text-center{text-align: center;} @media (max-width: 768px) { .sma-text-center{float:none; text-align: center;} } /* body .alignfull { margin-left: -20px; margin-right: -20px; } */ body .alignfull { width: auto; max-width: 1000%; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } @media only screen and (min-width: 789px) { body .alignwide { width: auto; max-width: 1000%; margin-right: calc(25% - 25vw); margin-left: calc(25% - 25vw); } .alignwide img, .alignfull img { display: block; margin: 0 auto; } } /* Align Wide Fix Template System ----------------------- */ /* Normale center content */ body .is-align-system > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)){ max-width: var(--measure); margin-left: auto; margin-right: auto; } /* Nested elements */ body .is-align-system > .alignfull > :where(h1, h2, h3, h4, h5, h6, p, figure, .wp-block-group ):not(.alignfull):not(.alignwide) { max-width: var(--measure); } /* Alignwide center */ body .is-align-system .alignwide { max-width: var(--container); margin-left: auto; margin-right: auto; } /* Alignfull center */ body .is-align-system .alignfull { max-width: none; padding-right: var(--gutter); padding-left: var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); } /* Align left and right */ body .is-align-system > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; } body .is-align-system > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0em; } /* End Align Wide Fix Template System ----------------------- */ /* Image Caption */ .wp-caption { margin-bottom: 20px; padding: 0; max-width: 97%; border: 0; text-align: left; } .wp-caption img { margin: 0; padding: 0; width: 100%!important; height: auto; border: 0 none; border-radius: var(--radius-lg); } .wp-caption p.wp-caption-text, .wp-element-caption, figcaption { margin: 10px 0 0; padding: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: left; } .gallery-caption{font-size: 14px;} /* Stiky */ .sticky { } /* Blockquote */ blockquote, .wp-block-quote { margin: 2em 0; padding: 0 0 0 24px; border-left: 2px solid var(--site-text-color); font-style: normal; font-weight: 500; font-size: 1.25rem; line-height: 1.5; color: var(--site-text-color); position: relative; } blockquote cite, .wp-block-quote cite { display: block; margin-top: 12px; font-size: 15px; font-weight: 400; font-style: normal; color: var(--text-muted); } /* Search */ .form-search{width: 100%; position: relative; margin-bottom: 0; padding: 0;} .form-search input[type=search]{width: 100%; height: 48px; margin: 0; padding: 0 48px 0 16px; border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--site-bg)!important; font-size: 16px;} .form-search button[type=submit]{position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; width: auto; margin: 0; padding: 8px; border: none; border-radius: 6px; background: transparent; color: var(--text-secondary);} .form-search button[type=submit]:hover{background: var(--surface-strong); color: var(--site-text-color);} .form-search button[type=submit] svg{width: 20px; height: 20px; fill: currentColor;} /* Comments */ .comment-form-author, .comment-form-email, .comment-form-url { float: left; margin-top: 20px; margin-right: 3%; width: 30.3333333%; } .comment-form-author input, .comment-form-email input, .comment-form-url input { width: 100%; } @media (max-width: 768px) { .comment-form-author, .comment-form-email, .comment-form-url { float: none; margin-right: 0; width: 100%; } } #comments h3, .comment-reply-title { font-size: 1.5rem; margin: 48px 0 16px; } .comment-form label { font-size: 15px; font-weight: 600; } .comment-notes, .logged-in-as { font-size: 15px; color: var(--text-secondary); } ol.commentlist { margin: 0 0 1em; padding: 0; list-style: none; text-indent: 0; } ol.commentlist li.comment { padding: 1.25em 0; border-bottom: 1px solid var(--border-color); } ol.commentlist li.comment div.vcard cite.fn { font-style: normal; font-weight: 700; font-size: 15px; } ol.commentlist li.comment div.vcard img.avatar { float: left; margin: 4px 1em 1em 0; border-radius: 50px; } ol.commentlist li.comment div.comment-meta { font-size: 13px; } ol.commentlist li.comment div.comment-meta a { color: var(--text-muted); } ol.commentlist li.comment ul { margin: 0 0 1em 2em; } ol.commentlist li.comment div.reply { margin-left: 80px; font-size: 14px; } ol.commentlist li.comment div.reply a { font-weight: 700; } ol.commentlist li.comment ul.children { margin: 1em 0 0; list-style: none; text-indent: 0; } ol.commentlist li.comment ul.children li.depth-2 { margin: 0 0 .25em .25em; padding-left: 1em; border-left: 1px solid var(--border-color); } ol.commentlist li.comment ul.children li.depth-3 { margin: 0 0 .25em .25em; padding-left: 1em; border-left: 1px solid var(--border-color); } ol.commentlist li.comment ul.children li.depth-4 { margin: 0 0 .25em .25em; padding-left: 1em; border-left: 1px solid var(--border-color); } ol.commentlist li.bypostauthor .fn { font-weight: bold; } ol.commentlist li img{max-width: 97%;} input[type=text], input[type=search], input[type=number], input[type=tel], input[type=password], input[type=email], input[type=url]{ width: 100%; padding: 12px 14px; border: 1px solid var(--input-border); background: #fff; -webkit-appearance: none; border-radius: var(--radius); margin-top: 6px; font: inherit; font-size: 16px; color: var(--site-text-color); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);} textarea { padding: 12px 14px; width: 100%; border: 1px solid var(--input-border); background: #fff; -webkit-appearance: none; border-radius: var(--radius); margin-top: 6px; font: inherit; font-size: 16px; color: var(--site-text-color); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);} input:focus, textarea:focus { outline: none; border-color: var(--link-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); } ::placeholder { color: var(--text-muted); opacity: 1; } input[type=submit], button[type=submit] { margin-top: 10px; padding: 14px 24px; color: #fff; background: var(--site-text-color); border:none; display: inline-block; font-weight: 600; width: auto; font-size: 16px; border-radius: var(--radius); font-family: inherit; cursor: pointer; transition: background-color .2s var(--ease-out);} input[type=submit]:hover, button[type=submit]:hover { background: #374151; } #comments { width: 100%; } /* ------------------------------------------------------------------------- * /* 5 Helpers */ /* ------------------------------------------------------------------------- */ .mt-0{margin-top: 0 } .mt-1{margin-top: 10px} .mt-2{margin-top: 20px} .mt-3{margin-top: 40px} .mt-4{margin-top: 100px } .mb-0{margin-bottom: 0} .mb-1{margin-bottom: 10px} .mb-2{margin-bottom: 20px} .mb-3{margin-bottom: 40px} .mb-4{margin-bottom: 100px} .p-0{padding: 0} .p-1{padding: 10px} .p-2{padding: 20px} .p-3{padding: 40px} .p-4{padding: 100px} .pt-1{padding-top: 10px;} .pt-3{padding-top: 20px;} .pt-3{padding-top: 40px;} .pt-4{padding-top: 15vh;} .pb-1{padding-bottom: 10px;} .pb-2{padding-bottom: 20px;} .pb-3{padding-bottom: 40px;} .pb-4{padding-bottom: 15vh;} .img-res{width: 100%;} /* ! Grid System */ .grid { margin: 0 auto;display: flex; flex-flow: row; flex-wrap: wrap;width: 100%;max-width: 1400px;} .grid--center{justify-content: center;} .col{ flex: 1;} [class*='col-'] { position: relative;padding: 0 1%;} .grid .grid [class*='col-'] {padding: 0px;} .col-10{ width: 10%;} .col-20{ width: 20%; } .col-25{ width: 25%; } .col-30{ width: 30%; } .col-33{ width: 33.33%; } .col-40{ width: 40%; } .col-50{ width: 50%; } .col-60{ width: 60%; } .col-70{ width: 70%; } .col-80{ width: 80%; } .col-90{ width: 90%; } .col-100{ width: 100%; } @media (max-width: 991px) { .tab-20 { width: 20%; } .tab-25 { width: 25%; } .tab-33 { width: 33.33%; } .tab-50 { width: 50%; } .tab-80 { width: 80%; } .tab-90 { width: 90%; } .tab-100 { width: 100%; } } @media (max-width: 768px) { [class*='col-'] { width: 100%;} .sma-20 { width: 20%; } .sma-25 { width: 25%; } .sma-33 { width: 33.33%; } .sma-50 { width: 50%; } .sma-100 { width: 100%; } } /* Simple Utilities Class */ @media (min-width: 1190px) { .hide-desktop, .desk-hide{display: none!important;} } @media (max-width: 1190px) { .hide-mobile, .sma-hide{display: none!important;} } .hide-all, .all-hide{display: none!important;} @media (max-width: 781px) { .sma-column-reverse{ flex-direction: column-reverse;} } /* Accessibility */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /* underline for accesibility */ .text-content a, .comment-content a{text-decoration: underline;} /* focus elements */ /* :focus { outline: 2px solid #2ba801; outline-offset: 2px; } */ /* hide elements for accessibility */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ! Icon System - https://ionicframework.com/docs/v3/ionicons/ */ .icon-arrow{overflow: hidden; font-size:1px; text-indent:-9999px; display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EArrow Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");} .icon-fb{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Facebook%3C/title%3E%3Cpath d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd'/%3E%3C/svg%3E");} .icon-ig{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Instagram%3C/title%3E%3Cpath d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z'/%3E%3Cpath d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z'/%3E%3C/svg%3E");} .icon-tw{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Twitter%3C/title%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E"); } .icon-yt{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Youtube%3C/title%3E%3Cpath d='M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149 1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5 58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5 2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9zM207 353.89v-196.5l145 98.2z'/%3E%3C/svg%3E"); } .icon-in{ overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z'/%3E%3C/svg%3E");} .icon-tk{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Tiktok%3C/title%3E%3Cpath d='M412.19 118.66a109.27 109.27 0 01-9.45-5.5 132.87 132.87 0 01-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 01-35.22 55.56 68.8 68.8 0 01-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0121.41 3.39l.1-83.94a153.14 153.14 0 00-118 34.52 161.79 161.79 0 00-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 00115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0027.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61z'/%3E%3C/svg%3E"); } .icon-wa{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Whatsapp%3C/title%3E%3Cpath d='M414.73 97.1A222.14 222.14 0 00256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0029.78 111L32 480l118.25-30.87a223.63 223.63 0 00106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 00414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 01-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0171.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 01185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 00-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0031.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z' fill-rule='evenodd'/%3E%3C/svg%3E");} .icon-search{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 20px;height: 20px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ESearch%3C/title%3E%3Cpath d='M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z'/%3E%3C/svg%3E");} .icon-angle{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -3px 5px;width: 20px;height: 20px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");} .icon-nav{ overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -6px 3px;width: 26px;height: 26px;background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M11.762 3.25c.46.006.99.223 1.276.734l.174.312a82.518 82.518 0 0 1 6.474 14.753c.218.67-.14 1.237-.589 1.5a1.484 1.484 0 0 1-1.552-.037l-4.728-3.04c-.522-.336-1.231-.337-1.72-.028L6.464 20.37a1.483 1.483 0 0 1-1.553.01c-.427-.255-.809-.808-.61-1.482A77.671 77.671 0 0 1 10.307 4.29l.164-.308c.284-.531.832-.737 1.29-.73Zm-.007 1.513-.125.233A76.203 76.203 0 0 0 5.84 18.99l4.455-2.813c1-.63 2.337-.607 3.334.034l4.496 2.892a81.088 81.088 0 0 0-6.222-14.074l-.148-.265Z' clip-rule='evenodd'/%3E%3C/svg%3E");} .icon-mail{ overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -6px 3px;width: 26px;height: 26px;background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M2.804 8.353c-.28 2.603-.268 5.605.122 8.197a3.138 3.138 0 0 0 2.831 2.66l1.51.131c3.15.274 6.317.274 9.466 0l1.51-.13a3.138 3.138 0 0 0 2.831-2.66c.39-2.593.402-5.595.122-8.198a30.68 30.68 0 0 0-.122-.904 3.138 3.138 0 0 0-2.831-2.66l-1.51-.13a54.647 54.647 0 0 0-9.465 0l-1.51.13a3.138 3.138 0 0 0-2.832 2.66 31.1 31.1 0 0 0-.122.904Zm4.593-2.2a53.146 53.146 0 0 1 9.206 0l1.51.131a1.64 1.64 0 0 1 1.478 1.389l.034.233-5.561 3.09a4.25 4.25 0 0 1-4.128 0l-5.56-3.09c.01-.078.022-.156.033-.233a1.638 1.638 0 0 1 1.478-1.389l1.51-.131ZM19.81 9.52a29.099 29.099 0 0 1-.218 6.807 1.638 1.638 0 0 1-1.478 1.389l-1.51.131a53.152 53.152 0 0 1-9.206 0l-1.51-.131a1.638 1.638 0 0 1-1.478-1.389 29.101 29.101 0 0 1-.217-6.807l5.016 2.787a5.75 5.75 0 0 0 5.585 0l5.015-2.787Z' clip-rule='evenodd'/%3E%3C/svg%3E");} .icon-call{ overflow: hidden; font-size:1px; text-indent:-9999px; display:inline-block; margin: -6px 3px;width: 26px;height: 26px;background-size: 100%;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.84 9.856a17.216 17.216 0 0 0 8.922 8.663l.012.005.764.34a2.25 2.25 0 0 0 2.74-.737l1.274-1.763a.25.25 0 0 0-.046-.341l-2.224-1.795a.25.25 0 0 0-.358.046l-.866 1.168a.75.75 0 0 1-.912.237 13.387 13.387 0 0 1-6.67-6.67.75.75 0 0 1 .237-.912L9.88 7.23a.25.25 0 0 0 .046-.358L8.132 4.648a.25.25 0 0 0-.341-.046l-1.773 1.28a2.25 2.25 0 0 0-.732 2.756l.554 1.217v.001Zm8.33 10.041a18.716 18.716 0 0 1-9.694-9.416v-.002l-.555-1.22A3.75 3.75 0 0 1 5.14 4.666l1.773-1.28a1.75 1.75 0 0 1 2.386.32l1.795 2.225a1.75 1.75 0 0 1-.32 2.505l-.67.496a11.891 11.891 0 0 0 5.118 5.118l.497-.67a1.75 1.75 0 0 1 2.504-.32l2.225 1.795a1.75 1.75 0 0 1 .32 2.387l-1.275 1.764a3.75 3.75 0 0 1-4.565 1.229l-.758-.338Z' clip-rule='evenodd'/%3E%3C/svg%3E");} .icon-plus{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -6px 3px;width: 26px;height: 26px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12.75 7a.75.75 0 0 0-1.5 0v4.25H7a.75.75 0 0 0 0 1.5h4.25V17a.75.75 0 0 0 1.5 0v-4.25H17a.75.75 0 0 0 0-1.5h-4.25V7Z'/%3E%3C/svg%3E");} .icon-check{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -6px 3px;width: 26px;height: 26px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18.03 7.97a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06l3.47 3.47 6.47-6.47a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");} .icon-cart{overflow: hidden; font-size:1px; text-indent:-9999px;display:inline-block; margin: -6px 3px;width: 23px;height: 23px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='currentColor'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");} .icon-1{width: 40px;height: 40px;} .icon-2{width: 70px;padding: 8px;} .icon-3{width: 100px;padding: 8px;} .icon-invert{filter: invert(1);} /* Blocks */ /* Accordion */ .accordion h3{position: relative;padding-right: 30px;margin-bottom: 15px;cursor:pointer} .accordion h3:after{ width: 30px;height: 30px;position: absolute; top:0; right:0;content: ' '; background-image: url('data:image/svg+xml;utf8,'); transform: rotate(90deg); background-size:100%; } .accordion .wp-block-column .wp-block-group {padding: 0;max-height: 0;overflow:hidden;border-bottom: 2px solid #ddd; transition: all 0.2s ease-in-out;margin-bottom: 20px;} .accordion .wp-block-column .wp-block-group.open-accordion{max-height:500px;padding-bottom: 15px;overflow: auto;} /* Media Text */ @media (max-width: 768px) { .wp-block-media-text__media img{margin-bottom: 20px;margin-top: 40px;} } /* Animation on scroll */ .fade { opacity: 0; transform: translateY(40px); transition: 0.6s ease-in-out; will-change: transform, opacity;} .fadeIn { opacity: 1;transform: translateY(0px)} /* Animation System on scroll v2 --------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .8s cubic-bezier(.2,.7,.25,1), filter .8s cubic-bezier(.2,.7,.25,1); will-change: opacity, transform, filter; } /* Directional variants */ .reveal.reveal-up { transform: translateY(30px); } .reveal.reveal-down { transform: translateY(-30px); } .reveal.reveal-left { transform: translateX(30px); } .reveal.reveal-right { transform: translateX(-30px); } .reveal.reveal-zoom { transform: scale(.95); } .reveal.reveal-skew { transform: translateY(20px) skewY(5deg); } .reveal.reveal-blur { filter: blur(6px); } /* Active state on scroll */ .reveal.is-inview { opacity: 1; transform: none; filter: none; } /* Clip-path effect */ .reveal.reveal-clip{ clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); will-change: clip-path; } @keyframes revealClip { to { clip-path: inset(0 0 0 0); } } /* Clip-path active state */ .reveal.reveal-clip.is-inview {animation: revealClip 1s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;will-change: clip-path;} /* Accessibility: disable animations */ @media (prefers-reduced-motion: reduce) { .reveal { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } } /* Delay utilities */ .delay-01 { transition-delay: .1s!important; } .delay-02 { transition-delay: .2s!important; } .delay-03 { transition-delay: .3s!important; } .delay-04 { transition-delay: .4s!important; } .delay-05 { transition-delay: .5s!important; } .delay-06 { transition-delay: .6s!important; } .delay-07 { transition-delay: .7s!important; } .delay-08 { transition-delay: .8s!important; } .delay-09 { transition-delay: .9s!important; } .delay-10 { transition-delay: 1s!important; } .delay-11 { transition-delay: 1.1s!important; } .delay-12 { transition-delay: 1.2s!important; } .delay-13 { transition-delay: 1.3s!important; } .delay-14 { transition-delay: 1.4s!important; } .delay-15 { transition-delay: 1.5s!important; } /* Duration utilities */ .duration-01 { transition-duration: .1s !important; animation-duration: .1s !important; } .duration-02 { transition-duration: .2s !important; animation-duration: .2s !important; } .duration-03 { transition-duration: .3s !important; animation-duration: .3s !important; } .duration-04 { transition-duration: .4s !important; animation-duration: .4s !important; } .duration-05 { transition-duration: .5s !important; animation-duration: .5s !important; } .duration-06 { transition-duration: .6s !important; animation-duration: .6s !important; } .duration-07 { transition-duration: .7s !important; animation-duration: .7s !important; } .duration-08 { transition-duration: .8s !important; animation-duration: .8s !important; } .duration-09 { transition-duration: .9s !important; animation-duration: .9s !important; } .duration-10 { transition-duration: 1s !important; animation-duration: 1s !important; } .duration-11 { transition-duration: 1.1s !important; animation-duration: 1.1s !important; } .duration-12 { transition-duration: 1.2s !important; animation-duration: 1.2s !important; } .duration-13 { transition-duration: 1.3s !important; animation-duration: 1.3s !important; } .duration-14 { transition-duration: 1.4s !important; animation-duration: 1.4s !important; } .duration-15 { transition-duration: 1.5s !important; animation-duration: 1.5s !important; } .duration-16 { transition-duration: 1.6s !important; animation-duration: 1.6s !important; } .duration-17 { transition-duration: 1.7s !important; animation-duration: 1.7s !important; } .duration-18 { transition-duration: 1.8s !important; animation-duration: 1.8s !important; } .duration-19 { transition-duration: 1.9s !important; animation-duration: 1.9s !important; } .duration-20 { transition-duration: 2s !important; animation-duration: 2s !important; } .duration-25 { transition-duration: 2.5s !important; animation-duration: 2.5s !important; } .duration-30 { transition-duration: 3s !important; animation-duration: 3s !important; } /* Animation System Accessibility */ @media (prefers-reduced-motion: reduce) { [class*="parallax-"] { transform: none !important; } } /* Animation on load --------------------------------------------------------- */ @keyframes fade-load { from {opacity: 0; top:20px} to {opacity: 1; top:0;} } .load { opacity: 0; animation: fade-load cubic-bezier(0.385, 0.135, 0.15, 0.86) 0.5s forwards; } /* Whats App */ .logo-whats-app { display: block; width: 38px; height: 38px; position: fixed; bottom: 43px; right: 43px; z-index: 999; border-radius: 100%; background: #25D366; border: 0px solid #25D366; } .logo-whats-app .icon-wa{width: 44px;height: 44px;margin: -3px 0 0 -3px;padding: 0;filter: invert(1);} /* Woo Commerce ------------------------------------------------------------------------ */ .menu-item-type-woocommerce-cart{position: relative;width: 30px;height: 18px;} .menu-cart-total{position: relative;position: absolute;top:-10px; left:0;} .menu-cart-total svg{height: 24px;width: 24px;} .menu-cart-total span{position: absolute;bottom:10px; right:-2pxpx;font-size: 11px;} /* button */ .woocommerce .button{ background:#222!important; color:#fff!important; text-transform: uppercase;font-family: inherit!important; margin-top:0; margin-right:10px; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button {border-radius:3px;padding: 15px 25px} .woocommerce .woocommerce-message .button{padding: 10px 15px;} /* columns fix */ .checkout.woocommerce-content [class*='col-'], .checkout.woocommerce-checkout [class*='col-'] {padding: 0;} /* select */ .select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__arrow {height: 36px;} .woocommerce-input-wrapper input{border-radius: 4px} /* Cart */ .woocommerce-cart .variation{font-size: 12px;margin-top: 0;} .woocommerce-cart .variation p{font-size: 12px;padding: 4px 0 0 0;} .woocommerce-cart .variation dt, .woocommerce-cart .variation dd{height: 20px;} .woocommerce #coupon_code, .woocommerce .actions .button{height: 36px; border-radius: 3px;padding: 5px 15px; line-height: 17px!important;} .woocommerce #coupon_code{width: 120px!important} @media (max-width: 768px) { .woocommerce-page #content table.cart td.actions .coupon .button{width: calc(100vw - 210px);margin-right:0;} } /* table */ #add_payment_method .cart-collaterals .cart_totals tr td, #add_payment_method .cart-collaterals .cart_totals tr th, .woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th, .woocommerce-checkout .cart-collaterals .cart_totals tr td, .woocommerce-checkout .cart-collaterals .cart_totals tr th{border-top: 1px solid #ccc} /* quantity single products */ .woocommerce .quantity input{margin-top: 0;border-radius: 3px;height: 46px;} .woocommerce .quantity .qty {width: 60px;} /* price */ .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price{color:#000} /* variations */ .woocommerce div.product form.cart .variations{padding: 10px;border-bottom: 1px solid #222;} .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th{padding-bottom: 10px;} .woocommerce select { /* Reset */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #666; outline: 0; font: inherit; /* Personalize */ width: 20em; height: 40px; padding: 0 4em 0 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E") no-repeat right 0.8em center/1.4em; color: #222; border-radius: 0.25em; cursor: pointer; } .woocommerce select option { color: inherit; background-color: #320a28; } .woocommerce select:focus { outline: none; } .woocommerce select::-ms-expand { display: none; } .woocommerce .woocommerce-ordering select {border:none; width:200px} @media (max-width: 768px) { .woocommerce-result-count{font-size: 12px;} .woocommerce .woocommerce-ordering select {font-size: 12px;margin-top:-10px; width:140px} } /* tabs */ .woocommerce div.product .woocommerce-tabs h2{display: none;} .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 0; margin-bottom: 0px;} .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; color: var(--site-text-color); border-bottom: 2px solid var(--site-text-color)} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:#222} .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; } .woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th { background: none; } /* review */ .woocommerce #review_form #respond p{margin:10px 10px 10px 0px} .woocommerce #review_form #respond p.comment-form-cookies-consent, .woocommerce #review_form #respond p.form-submit{width: 100%;float:left;} /* messages */ .woocommerce-error, .woocommerce-info, .woocommerce-message { padding: 1em 2em 1em 3.5em; margin: 0 0 2em; border-radius: 4px; position: relative; background-color: #f7f6f7; color: #111; border-top: none; list-style: none outside; line-height: 32px; width: auto; word-wrap: break-word; } .woocommerce .woocommerce-message a.button, .woocommerce .woocommerce-error a.button, .woocommerce .woocommerce-info a.button{color:#fff!important} .woocommerce .woocommerce-message a.button{background: #4CAF50!important;} .woocommerce-message::before{color: #4CAF50;} .woocommerce .woocommerce-message {background: #e5fce5} .woocommerce .woocommerce-error a.button{background: #F44336!important;} .woocommerce-error::before{color: #F44336;} .woocommerce .woocommerce-error {background: #FEECEB; color:#D91811} .woocommerce .woocommerce-info a.button{background: #2296F2!important;} .woocommerce .woocommerce-info a{color:#1478C8} .woocommerce-info::before{color: #2296F2;} .woocommerce .woocommerce-info {background: #E9F5FE;} /* general fix */ .woocommerce a.added_to_cart{padding-left: 10px;} .woocommerce-page #content .text-content a{text-decoration: none;} .woocommerce span.onsale {background-color: #444;} .woocommerce div.product .product_meta {font-size: 14px;} .woocommerce .woocommerce-billing-fields{margin-bottom: 20px;} .woocommerce .woocommerce-variation-price{margin-bottom: 10px;} /* hide title and button in shop list */ .woocommerce ul.products li.product .button {display: none;} .woocommerce-shop h1{display: none;} /* Woo Pagination */ .woocommerce nav.woocommerce-pagination ul {text-align: left;width: 100%;border:none} .woocommerce nav.woocommerce-pagination ul li {border: 1px solid #222;margin-right: 10px;} .woocommerce nav.woocommerce-pagination ul li span, .woocommerce nav.woocommerce-pagination ul li a { float: left; padding: 14px 19px; display: inline-block;} /* Cart & Checkout */ .woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table, #order_review table.shop_table{background: #d4d4d4;border:none; padding: 10px;} .woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table td, .woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table th, #order_review table.shop_table td, #order_review table.shop_table th{border-color:#acacac!important;} @media screen and (min-width: 900px) { .woocommerce-page .woocommerce-cart-form{ width: 62%; float:left; } .woocommerce-page .cart-collaterals { width: 36%; float:right; } .woocommerce-page .cart-collaterals .cart_totals { width: 100%; float:right; margin-top:-55px;padding-bottom: 20vh; } } /* Checkout */ .checkout.woocommerce-checkout .select2-container--default .select2-selection--single{border: 2px solid #ddd; height: 40px;} .checkout.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 34px;} .checkout.woocommerce-checkout input[type=text], .checkout.woocommerce-checkout input[type=number], .checkout.woocommerce-checkout input[type=tel], .checkout.woocommerce-checkout input[type=password], .checkout.woocommerce-checkout input[type=email], .checkout.woocommerce-checkout input[type=url], .checkout.woocommerce-checkout .woocommerce-additional-fields textarea, .woocommerce form .form-row .input-text{border: 2px solid #ddd} .woocommerce .checkout-button, .woocommerce .place-order .button{font-size: 18px;font-weight: bold;} /* Checkout input */ .woocommerce form .form-row .input-text, .woocommerce form .form-row select{padding:10px} .checkout.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 20px; } .woocommerce-checkout #payment{ background:#ddd; } @media (min-width: 998px){ .woocommerce-checkout .checkout.woocommerce-checkout.col2-set, .woocommerce-checkout .col2-set{ width:50%;float:left } .woocommerce-checkout .checkout.woocommerce-checkout #order_review_heading, .woocommerce-checkout .checkout.woocommerce-checkout #order_review{width:45%; float:right } /* Sticky Cart */ /* .woocommerce-page .checkout.woocommerce-checkout #order_review_heading{position: sticky;top:160px} */ .woocommerce-page .checkout.woocommerce-checkout #order_review{position: sticky;top:150px} .woocommerce-page .checkout.woocommerce-checkout{float:left; width: 100%;position: relative;} .woocommerce-cart .woocommerce .col2-set .col-1, .woocommerce-cart .woocommerce-page .col2-set .col-1, .woocommerce-cart .woocommerce .col2-set .col-2, .woocommerce-cart .woocommerce-page .col2-set .col-2, .woocommerce-checkout .woocommerce .col2-set .col-1, .woocommerce-checkout .woocommerce-page .col2-set .col-1, .woocommerce-checkout .woocommerce .col2-set .col-2, .woocommerce-checkout .woocommerce-page .col2-set .col-2 {width:100%} .woocommerce #payment #place_order, .woocommerce-page #payment #place_order{width:100%; display:block; padding:20px} } /* End Woo Commerce ------------------------------------------------------------------------ */ /* Full Site Editing ------------------------------------------------------------------------ */ @media (max-width: 768px) { .wp-block-navigation__responsive-container{padding: 20px!important;} } /* End Full Site Editing ------------------------------------------------------------------------ */ /* clearfix for post float images */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* ------------------------------------------------------------------------- * /* 6 Lorenzo Caramia */ /* ------------------------------------------------------------------------- */ /* Grid: same width as the header */ .grid{max-width: var(--container);} .grid > .col-100{padding-left: 0; padding-right: 0;} /* Browser surfaces */ ::selection{background: #DBEAFE; color: var(--site-text-color);} html{caret-color: var(--link-color); scrollbar-color: #C9CDD3 transparent;} :focus-visible{outline: 2px solid var(--link-color); outline-offset: 3px; border-radius: 4px;} input:focus-visible, textarea:focus-visible{outline: none;} time{font-variant-numeric: tabular-nums;} .screen-reader-text:focus{background-color: var(--site-bg); color: var(--site-text-color); border-radius: var(--radius); box-shadow: 0 0 0 2px var(--link-color);} /* Icons */ .icon-svg{flex: none; vertical-align: middle;} /* Small mono label (box titles) */ .box-label{font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4; margin: 0;} /* Arrow link */ .link-freccia a{display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem;} .link-freccia a::after, .notizia__leggi::after{ content: ""; width: 18px; height: 18px; background-color: currentColor; transition: transform .3s var(--ease-out); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .link-freccia a:hover::after{transform: translateX(3px);} .empty-state{padding: 48px 0; font-size: 1.125rem; color: var(--text-secondary);} /* Home: hero ----------------------- */ .hero-personale{padding: clamp(8px, 3vw, 48px) 0 clamp(24px, 4vw, 48px);} .hero-personale__cols{align-items: center; gap: clamp(32px, 6vw, 96px) !important; margin-bottom: 0;} .hero-personale__title{font-size: clamp(2.75rem, 1.5rem + 5vw, 4.75rem); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 24px;} .hero-personale .lead{margin-bottom: 36px; max-width: 30em;} .ritratto{margin: 0;} .ritratto img{display: block; width: 100%; max-width: 380px; aspect-ratio: 1; object-fit: cover; margin-left: auto; border-radius: 50%; background: var(--surface-strong);} @media (max-width: 781px) { .hero-personale__cols{flex-direction: column-reverse; align-items: flex-start !important; gap: 24px !important;} .ritratto img{max-width: 112px; margin-left: 0;} } /* Home: sections ----------------------- */ .sezione{padding-top: clamp(64px, 9vw, 128px);} .sezione__head{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: clamp(28px, 3vw, 40px);} .sezione__head > *{margin: 0 !important;} .sezione--persona .wp-block-columns, .sezione--colonne .wp-block-columns{gap: clamp(32px, 6vw, 96px) !important; margin-bottom: 0;} .sezione--persona h2, .sezione--colonne h2{margin-bottom: 20px;} .sezione--persona p{color: var(--text-secondary);} .sezione--persona .link-freccia{margin-top: 24px;} .esperienze{border-top: 1px solid var(--border-color);} .esperienze > *{margin: 0 !important;} .esperienza{display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 24px; padding: 24px 0; border-bottom: 1px solid var(--border-color);} .esperienza > *, .esperienza__testo > *{margin: 0 !important;} .esperienza__anni{font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); padding-top: 4px; font-variant-numeric: tabular-nums;} .esperienza__ruolo{font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: 6px !important;} .esperienza__testo p{color: var(--text-secondary); font-size: 1rem; line-height: 1.6;} @media (max-width: 640px) { .esperienza{grid-template-columns: 1fr;} } /* Home: contacts, a typographic close */ .contatti{padding-top: clamp(80px, 11vw, 160px);} .contatti > *{margin-top: 0 !important;} .contatti h2{font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); letter-spacing: -0.035em; margin-bottom: 16px;} .contatti .lead{margin-bottom: 32px;} .contatti__email{margin-bottom: 12px;} .contatti__email a{font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--site-text-color); text-decoration: underline; text-decoration-color: var(--border-color); text-decoration-thickness: 2px; text-underline-offset: .18em; transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);} .contatti__email a:hover{color: var(--link-color); text-decoration-color: currentColor;} .contatti__email.link-freccia a::after{width: .8em; height: .8em;} .contatti__altri{margin: 0;} .contatti__altri a{font-weight: 600;} .contatti__azione{margin-bottom: 0;} /* Portrait placeholder caption */ .ritratto .wp-element-caption{max-width: 380px; margin: 12px 0 0 auto; text-align: center; font-size: 13px;} @media (max-width: 781px) { .ritratto .wp-element-caption{max-width: none; margin-left: 0; text-align: left;} } /* Project cards ----------------------- */ .progetti-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 2.5vw, 32px);} .progetti-grid__item.is-hidden{display: none;} .progetti-grid__item.is-entering{animation: lorenzocaramia-enter .5s var(--ease-out) both;} .progetto-card{position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%;} .progetto-card__media{position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-strong);} .progetto-card__img{display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out);} .progetto-card__placeholder{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; font-weight: 800; letter-spacing: -0.04em; color: #D1D5DB;} .progetto-card__body{display: flex; flex-direction: column; gap: 6px;} .progetto-card__title{font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; margin: 0;} .progetto-card__link, .progetto-card__link:focus{color: var(--site-text-color);} .progetto-card__link::after{content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg);} .progetto-card__link:focus-visible{outline: none;} .progetto-card__link:focus-visible::after{outline: 2px solid var(--link-color); outline-offset: 6px;} .progetto-card__excerpt{margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-secondary);} .progetto-card__tipi{margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--text-muted);} @media (hover: hover) { .progetto-card:hover .progetto-card__img{transform: scale(1.03);} .progetto-card:hover .progetto-card__link{color: var(--link-color);} } /* Projects filters ----------------------- */ .filtri{margin: 0 0 clamp(32px, 4vw, 48px);} .filtri__list{display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;} .filtri__btn{display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--border-color); border-radius: 999px; color: var(--site-text-color); font-size: 15px; font-weight: 600; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);} .filtri__btn:hover, .filtri__btn:focus{border-color: var(--site-text-color); color: var(--site-text-color);} .filtri__btn[aria-current="true"]{background: var(--site-text-color); border-color: var(--site-text-color); color: #fff;} .filtri__count{font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums;} .filtri__btn[aria-current="true"] .filtri__count{color: #D1D5DB;} /* Article cards ----------------------- */ .articoli-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(40px, 5vw, 56px) clamp(24px, 3vw, 40px);} .post-card{position: relative; display: flex; flex-direction: column; gap: 18px;} .post-card__media{overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-strong);} .post-card__media--empty{position: relative; aspect-ratio: 16 / 9; background: var(--surface-strong);} .post-card__placeholder{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; font-weight: 800; letter-spacing: -0.04em; color: #D1D5DB;} .post-card__img{display: block; width: 100%; transition: transform .6s var(--ease-out);} .post-card__body{display: flex; flex-direction: column; gap: 8px;} .post-card__title{font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0;} .post-card__link, .post-card__link:focus{color: var(--site-text-color);} .post-card__link::after{content: ""; position: absolute; inset: 0; z-index: 1;} .post-card__link:focus-visible{outline: none;} .post-card__link:focus-visible::after{outline: 2px solid var(--link-color); outline-offset: 6px; border-radius: var(--radius-lg);} .post-card__meta{display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums;} .post-card__excerpt{margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-secondary);} @media (hover: hover) { .post-card:hover .post-card__img{transform: scale(1.03);} .post-card:hover .post-card__link{color: var(--link-color);} } /* Article list (home) */ .articoli-list{border-top: 1px solid var(--border-color);} .articoli-list .post-card{display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 32px; padding: 28px 0; border-bottom: 1px solid var(--border-color);} .articoli-list .post-card__body{display: contents;} .articoli-list .post-card__meta{grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 4px;} .articoli-list .post-card__meta > [aria-hidden="true"]{display: none;} .articoli-list .post-card__title{grid-column: 2; font-size: 1.25rem;} .articoli-list .post-card__excerpt{grid-column: 2; max-width: 46em;} @media (max-width: 640px) { .articoli-list .post-card{grid-template-columns: 1fr;} .articoli-list .post-card__meta{grid-column: 1; grid-row: auto; order: 2; padding-top: 0;} .articoli-list .post-card__title{grid-column: 1; order: 1;} .articoli-list .post-card__excerpt{grid-column: 1; order: 3;} } /* Blog: the latest article opens the page, larger, then a hairline before the grid */ .blog-rilievo{margin-bottom: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--border-color);} .blog-rilievo:last-child{margin-bottom: 0; padding-bottom: 0; border-bottom: 0;} .post-card--rilievo{display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 24px clamp(32px, 5vw, 64px);} .post-card--rilievo .post-card__media{aspect-ratio: 16 / 10;} .post-card--rilievo .post-card__img{height: 100%; object-fit: cover;} .post-card--rilievo .post-card__body{gap: 12px;} .post-card--rilievo .post-card__title{font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.03em;} .post-card--rilievo .post-card__excerpt{font-size: 1.125rem; max-width: 34em;} @media (max-width: 781px) { .post-card--rilievo{grid-template-columns: minmax(0, 1fr); gap: 18px;} .post-card--rilievo .post-card__body{gap: 8px;} } /* Single article and project ----------------------- */ .article{max-width: 1080px; margin: 0 auto;} /* Breadcrumb: the way back, the current page is the title below */ .breadcrumb{margin-bottom: 28px; font-size: 14px;} .breadcrumb__list{display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0;} .breadcrumb__item{margin: 0; line-height: 1.5;} .breadcrumb__item + .breadcrumb__item::before{content: "/"; margin: 0 10px; color: #C9CDD3;} .breadcrumb a{color: var(--text-secondary); font-weight: 600;} .breadcrumb a:hover{color: var(--site-text-color);} .article__header{max-width: 860px; margin-bottom: clamp(32px, 4vw, 48px);} .article__title{font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.06; letter-spacing: -0.035em; margin-bottom: 20px;} .article__lead{max-width: 36em; margin-bottom: 20px; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.5; color: var(--text-secondary);} .article__meta{display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 15px; color: var(--text-muted); font-variant-numeric: tabular-nums;} .article__meta a{color: var(--text-secondary); font-weight: 600;} .article__meta a:hover{color: var(--link-color);} .article__sep{color: #C9CDD3;} .article__thumb{margin: 0 0 clamp(40px, 5vw, 64px);} .article__thumb img{display: block; width: 100%; border-radius: var(--radius-lg); background: var(--surface-strong);} .article__layout{display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px;} .article__body{max-width: var(--measure); min-width: 0;} .article__aside-inner{display: flex; flex-direction: column; gap: 32px;} @media (min-width: 992px) { .article__layout:has(> .article__aside){grid-template-columns: minmax(0, var(--measure)) 280px; justify-content: space-between; column-gap: 64px;} .article__aside{grid-column: 2; grid-row: 1;} .article__body{grid-column: 1; grid-row: 1;} .article__aside-inner{position: sticky; top: calc(var(--header-height) + 32px);} } .article__link{margin: 0;} .article__link .wp-block-button__link{width: 100%; justify-content: center;} .article__tags{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px;} .article__tags a{display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--surface-strong); color: var(--text-secondary); font-size: 14px; font-weight: 600; text-decoration: none !important;} .article__tags a:hover{background: var(--border-color); color: var(--site-text-color);} /* Article text */ .text-content{font-size: 1.125rem; line-height: 1.75; color: #1F2937;} .text-content > *{margin-bottom: 1.25em;} .text-content p, .text-content li{font-size: inherit; line-height: inherit;} .text-content h2{font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); margin: 2.2em 0 .7em; letter-spacing: -0.025em; scroll-margin-top: calc(var(--header-height) + 24px);} .text-content h3{font-size: 1.25rem; margin: 1.8em 0 .6em;} .text-content > h2:first-child, .text-content > h3:first-child{margin-top: 0;} .text-content ul, .text-content ol{padding-left: 1.25em;} .text-content li{margin-bottom: .4em;} .text-content li::marker{color: var(--text-muted);} .text-content a{text-decoration: underline; text-decoration-color: rgba(37, 99, 235, .35);} .text-content a:hover{text-decoration-color: currentColor;} .text-content a.wp-block-button__link{text-decoration: none;} .text-content img{border-radius: var(--radius-lg);} .text-content code{font-family: var(--font-mono); font-size: .875em; background: var(--surface-strong); padding: .15em .4em; border-radius: 6px;} .text-content pre{font-family: var(--font-mono); font-size: .875rem; line-height: 1.6; background: var(--site-text-color); color: #F9FAFB; padding: 20px 24px; border-radius: var(--radius-lg); overflow-x: auto;} .text-content pre code{background: none; padding: 0; color: inherit;} .text-content hr, .text-content .wp-block-separator{border: none; border-top: 1px solid var(--border-color); margin: 3em 0;} .text-content table{width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums;} .text-content th, .text-content td{padding: 12px; border-bottom: 1px solid var(--border-color); text-align: left;} /* Table of contents (box "In this article") */ .toc__head{display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;} .toc__toggle{display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -10px -10px -10px 0; padding: 0; border: none; border-radius: var(--radius); background: transparent; color: var(--text-secondary); cursor: pointer;} .toc__toggle[hidden]{display: none;} .toc__toggle:hover{background: var(--surface-strong); color: var(--site-text-color);} .toc__toggle .icon-svg{transition: transform .3s var(--ease-out);} .toc__toggle[aria-expanded="true"] .icon-svg{transform: rotate(180deg);} .toc__list{list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-color);} .toc__item{margin: 0;} .toc__link{display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: baseline; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--text-secondary); font-size: 15px; line-height: 1.4; transition: color .2s var(--ease-out), border-color .2s var(--ease-out);} .toc__link:hover, .toc__link:focus{color: var(--site-text-color);} .toc__link.is-active{color: var(--site-text-color); border-left-color: var(--link-color);} .toc__num{font-family: var(--font-mono); font-size: 12px; color: var(--link-color); font-variant-numeric: tabular-nums;} @media (max-width: 991px) { .toc{padding-bottom: 8px; border-bottom: 1px solid var(--border-color);} } /* Technical sheet */ .scheda{padding: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--site-bg);} .scheda__title{margin-bottom: 20px;} .scheda__list{margin: 0;} .scheda__row{padding: 14px 0; border-top: 1px solid var(--border-color);} .scheda__row:first-child{padding-top: 0; border-top: 0;} .scheda__row:last-child{padding-bottom: 0;} .scheda__label{margin: 0 0 2px; font-size: 14px; line-height: 1.4; color: var(--text-secondary);} .scheda__value{margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--site-text-color); font-variant-numeric: tabular-nums;} /* Previous / next project */ .post-nav{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(64px, 8vw, 96px);} .post-nav__link{display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: var(--site-text-color); transition: border-color .2s var(--ease-out);} .post-nav__link--next{grid-column: 2; align-items: flex-end; text-align: right;} .post-nav__link:hover, .post-nav__link:focus{border-color: var(--site-text-color); color: var(--site-text-color);} .post-nav__label{display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-muted);} .post-nav__title{font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em;} @media (max-width: 640px) { .post-nav{grid-template-columns: 1fr;} .post-nav__link--next{grid-column: 1;} } /* Related posts */ .related{margin-top: clamp(80px, 9vw, 128px); padding: clamp(56px, 7vw, 96px) var(--gutter); background: var(--surface);} .related__inner{max-width: var(--container); margin: 0 auto;} .related__title{font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin-bottom: 32px;} .related:not(:has(.related__inner)){display: none;} body:has(.related__inner) .footer-content{margin-top: 0;} /* Pages: Chi sono, Contatti ----------------------- */ .hero-personale--pagina h1{margin-bottom: 24px;} .hero-personale--pagina > .lead{margin-bottom: 32px;} /* Key facts: label and value on one row, like the technical sheet */ .fatti{list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-color);} .fatti li{position: relative; margin: 0; padding: 16px 0 16px 200px; border-bottom: 1px solid var(--border-color); font-size: 1.0625rem; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; color: var(--site-text-color);} .fatti strong{position: absolute; left: 0; top: 18px; width: 176px; font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--text-secondary);} @media (max-width: 640px) { .fatti li{padding-left: 0;} .fatti strong{position: static; display: block; width: auto; margin-bottom: 2px;} } /* Two skills, one profile */ .competenze{gap: clamp(24px, 4vw, 48px) !important; margin: 0 0 clamp(28px, 3vw, 40px);} .competenze .wp-block-column{padding-top: 20px; border-top: 1px solid var(--border-color);} .competenze .wp-block-column > *{margin-top: 0;} .competenze h3{margin-bottom: 8px;} .competenze p{margin: 0; color: var(--text-secondary);} /* Contacts: a way for recruiters, one for clients */ .strade{gap: 16px !important; margin-bottom: 0;} .strada{display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--border-color); border-radius: var(--radius-lg);} .strada > *{margin-top: 0 !important;} .strada h2{font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -0.02em; margin-bottom: 12px;} .strada p{color: var(--text-secondary);} .strada .link-freccia{margin: auto 0 0 !important; padding-top: 12px;} /* Frequently asked questions (Details blocks) */ .faq .wp-block-details{margin: 0 !important; border-bottom: 1px solid var(--border-color);} .faq .wp-block-details:first-child{border-top: 1px solid var(--border-color);} .faq summary{display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 1.125rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--site-text-color); transition: color .2s var(--ease-out);} .faq summary::-webkit-details-marker{display: none;} .faq summary::after{ content: ""; flex: none; width: 18px; height: 18px; background-color: var(--text-secondary); transition: transform .3s var(--ease-out); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } .faq summary:hover{color: var(--link-color);} .faq details[open] > summary::after{transform: rotate(180deg);} .faq .wp-block-details > :not(summary){max-width: 40em; margin: 0 0 20px; color: var(--text-secondary);} /* Blog and Portfolio: intro written in the page */ div.page-header__intro > *{margin: 0 0 .75em;} div.page-header__intro > :last-child{margin-bottom: 0;} /* 404 ----------------------- */ .errore{max-width: 760px; padding: clamp(16px, 3vw, 40px) 0 clamp(48px, 6vw, 96px);} .errore__title{margin-bottom: 12px;} .errore__code{margin-bottom: 24px; font-size: 15px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums;} .errore__text{margin-bottom: 32px;} .errore__search{max-width: 480px; margin-bottom: 40px;} .errore__links{display: flex; flex-wrap: wrap; gap: 12px 32px; list-style: none; margin: 0; padding: 0;} .errore__links li{margin: 0;} /* ------------------------------------------------------------------------- * /* 7 Versions of the pages and section patterns */ /* ------------------------------------------------------------------------- */ /* Showcase carousel (vetrina): desktop [previous][ACTIVE][next], phone [ACTIVE] over [next][next]. Sizes in container units (cqw = 1% of the carousel width); the slides move with transform. */ .vetrina{--gap: 16px; --dur: .6s; --vetrina-ease: cubic-bezier(.65, .05, .2, 1); position: relative; container-type: inline-size; touch-action: pan-y;} /* the slides waiting off stage stay hidden (and add no horizontal scroll); the margin keeps the focus ring */ .vetrina__track{position: relative; height: 30cqw; contain: layout; overflow: clip; overflow-clip-margin: 8px;} .vetrina__card{position: absolute; top: 0; left: 0; width: calc(25cqw - var(--gap)); height: 100%; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-strong); color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; opacity: 0; pointer-events: none; z-index: 1; transform: translate3d(calc(100cqw + 40px), 0, 0); transition: transform var(--dur) var(--vetrina-ease), width var(--dur) var(--vetrina-ease), height var(--dur) var(--vetrina-ease), opacity .45s ease;} .vetrina__card[data-rel="0"]{width: 50cqw; transform: translate3d(25cqw, 0, 0); opacity: 1; pointer-events: auto; z-index: 3; cursor: default;} .vetrina__card[data-rel="1"]{transform: translate3d(calc(75cqw + var(--gap)), 0, 0); opacity: 1; pointer-events: auto; z-index: 2;} .vetrina__card[data-rel="last"]{transform: translate3d(0, 0, 0); opacity: 1; pointer-events: auto; z-index: 2;} .vetrina__card[data-rel="prev2"]{transform: translate3d(0, 0, 0); z-index: 0;} .vetrina--una .vetrina__card{width: 100cqw; transform: none; cursor: default;} .vetrina--una .vetrina__track{height: 50cqw;} .vetrina__img{position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; transition: transform .8s var(--ease-out);} .vetrina__iniziale{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(4rem, 10cqw, 9rem); font-weight: 800; letter-spacing: -0.04em; color: #D1D5DB;} /* ink shade, only to read white text on the photos */ .vetrina__ombra{position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 24, 39, 0) 35%, rgba(17, 24, 39, .72) 100%);} .vetrina__card.is-attiva .vetrina__ombra{background: linear-gradient(75deg, rgba(17, 24, 39, .78) 0%, rgba(17, 24, 39, .4) 50%, rgba(17, 24, 39, .05) 100%);} .vetrina__card--vuota{color: var(--site-text-color);} .vetrina__card--vuota .vetrina__ombra{display: none;} .vetrina__mini{position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; transition: opacity .3s ease;} .vetrina__titolo-mini{margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: balance;} .vetrina__card.is-attiva .vetrina__mini{opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s;} .vetrina__testo{position: absolute; left: 0; bottom: 0; width: min(560px, 92%); padding: clamp(20px, 3cqw, 36px); opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;} .vetrina__card.is-attiva .vetrina__testo{opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .45s ease .3s, transform .55s var(--ease-out) .3s, visibility 0s;} .vetrina__etichetta{display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: var(--site-bg); color: var(--site-text-color); font-size: 13px; font-weight: 600; line-height: 1.4;} .vetrina__titolo{margin: 0 0 10px; color: inherit; font-size: clamp(1.5rem, 1rem + 1.6cqw, 2.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance;} .vetrina__estratto{margin: 0 0 20px; max-width: 34em; color: rgba(255, 255, 255, .88); font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} .vetrina__card--vuota .vetrina__estratto{color: var(--text-secondary);} .vetrina__cta .icon-svg{transition: transform .3s var(--ease-out);} .vetrina__cta:hover .icon-svg{transform: translateX(3px);} .vetrina__card a{-webkit-user-drag: none;} .vetrina__card :focus-visible{outline-color: #fff; box-shadow: 0 0 0 5px rgba(17, 24, 39, .6);} .vetrina__card--vuota :focus-visible{outline-color: var(--link-color); box-shadow: none;} @media (hover: hover) { .vetrina__card:hover .vetrina__img{transform: scale(1.03);} } /* controls: shown only when the script runs */ .vetrina__frecce, .vetrina__barra{display: none;} .vetrina--js .vetrina__frecce{position: absolute; left: 12px; right: 12px; top: 15cqw; z-index: 5; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none;} .vetrina--js .vetrina__barra{position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; margin-top: 20px;} .vetrina__freccia, .vetrina__play{display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-color); border-radius: 50%; background: var(--site-bg); color: var(--site-text-color); cursor: pointer; transition: border-color .2s var(--ease-out);} .vetrina__freccia{pointer-events: auto;} .vetrina__freccia:hover, .vetrina__play:hover{border-color: var(--site-text-color);} .vetrina__play{width: 40px; height: 40px;} .vetrina__icona-play, .vetrina.is-stopped .vetrina__icona-pausa{display: none;} .vetrina.is-stopped .vetrina__icona-play{display: block;} .vetrina__punti{display: flex; align-items: center; gap: 16px;} .vetrina__punto{position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #C9CDD3; cursor: pointer; transition: width .3s var(--ease-out), background-color .2s var(--ease-out);} .vetrina__punto::after{content: ""; position: absolute; inset: -18px -8px;} /* 24px wide target (WCAG 2.5.8) */ .vetrina__punto.is-attivo{width: 32px; background: var(--link-color);} /* the active dot fills up while the time of the slide runs */ .vetrina__punto::before{content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; background: var(--link-color); opacity: 0;} .vetrina.is-in-corsa .vetrina__punto.is-attivo{background: #C9CDD3;} .vetrina.is-in-corsa .vetrina__punto.is-attivo::before{opacity: 1; animation: vetrina-riempi var(--vetrina-intervallo, 6000ms) linear both;} .vetrina.is-ferma .vetrina__punto.is-attivo::before{animation-play-state: paused;} @keyframes vetrina-riempi { from {width: 0;} to {width: 100%;} } .vetrina__contatore{position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-50%); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: var(--text-muted); font-variant-numeric: tabular-nums;} .vetrina__contatore b{font-weight: 500; color: var(--site-text-color);} @media (min-width: 782px) { .vetrina--due .vetrina__card[data-rel="0"]{width: calc(75cqw - var(--gap)); transform: none;} .vetrina--due .vetrina__card[data-rel="1"]{width: 25cqw; transform: translate3d(75cqw, 0, 0);} .vetrina--due.vetrina--js .vetrina__frecce{left: auto; right: 12px; gap: 8px;} } @media (max-width: 781px) { .vetrina{--gap: 12px;} .vetrina__track{height: calc(106cqw + var(--gap));} .vetrina__card{width: calc(50cqw - var(--gap) / 2); height: 40cqw; transform: translate3d(calc(100cqw + 40px), calc(66cqw + var(--gap)), 0);} .vetrina__card[data-rel="0"]{width: 100cqw; height: 66cqw; transform: none;} .vetrina__card[data-rel="1"]{transform: translate3d(0, calc(66cqw + var(--gap)), 0);} .vetrina__card[data-rel="2"]{transform: translate3d(calc(50cqw + var(--gap) / 2), calc(66cqw + var(--gap)), 0); opacity: 1; pointer-events: auto; z-index: 2;} /* who leaves the large place goes out to the left, still large */ .vetrina__card[data-rel="last"]{width: 100cqw; height: 66cqw; transform: translate3d(calc(-100cqw - 40px), 0, 0); pointer-events: none; z-index: 4;} .vetrina--una .vetrina__track, .vetrina--una .vetrina__card{height: 66cqw;} .vetrina__card.is-attiva .vetrina__ombra{background: linear-gradient(180deg, rgba(17, 24, 39, .05) 0%, rgba(17, 24, 39, .35) 45%, rgba(17, 24, 39, .8) 100%);} .vetrina__testo{width: 100%; padding: 18px;} .vetrina__titolo{font-size: 1.25rem;} .vetrina__estratto{margin-bottom: 14px; font-size: .9375rem; -webkit-line-clamp: 3;} .vetrina__mini{padding: 12px;} .vetrina__titolo-mini{font-size: .875rem;} .vetrina--js .vetrina__frecce{left: auto; right: 0; top: auto; bottom: 0; gap: 8px; transform: none;} .vetrina--js .vetrina__barra{justify-content: flex-start; padding-right: 104px;} .vetrina__contatore{display: none;} } .portfolio__vetrina{margin: 0 0 clamp(48px, 6vw, 80px);} /* News cards (notizie) ----------------------- */ .sezione--notizie > .lead{margin-bottom: clamp(28px, 3vw, 40px);} .notizie__griglia{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 28px);} .notizia{position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--site-bg); transition: border-color .2s var(--ease-out);} .notizia__media{position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-strong);} .notizia__img{position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out);} .notizia__iniziale{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 800; letter-spacing: -0.04em; color: #D1D5DB;} .notizia__categoria{position: absolute; left: 14px; top: 14px; max-width: calc(100% - 28px); padding: 5px 12px; overflow: hidden; border-radius: 999px; background: var(--site-bg); color: var(--site-text-color); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis;} .notizia__corpo{display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 20px 22px 24px;} .notizia__data{font-size: 13px; font-weight: 600; color: var(--text-muted);} .notizia__titolo{margin: 0; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.015em;} .notizia__link, .notizia__link:focus{color: var(--site-text-color);} .notizia__link::after{content: ""; position: absolute; inset: 0; z-index: 1;} .notizia__link:focus-visible{outline: none;} .notizia:has(.notizia__link:focus-visible){outline: 2px solid var(--link-color); outline-offset: 3px;} .notizia__estratto{flex: 1 1 auto; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text-secondary);} .notizia__leggi{display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--link-color);} .notizie__azioni{margin: clamp(32px, 4vw, 40px) 0 0; text-align: center;} @media (hover: hover) { .notizia:hover{border-color: var(--site-text-color);} .notizia:hover .notizia__img{transform: scale(1.03);} .notizia:hover .notizia__link{color: var(--link-color);} .notizia:hover .notizia__leggi::after{transform: translateX(3px);} } @media (max-width: 991px) { .notizie__griglia{grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (max-width: 600px) { .notizie__griglia{grid-template-columns: minmax(0, 1fr);} } /* Projects: large (two columns) and list (an index, one row each) ----------------------- */ .progetti-grid--grande{grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);} .progetti-grid--grande .progetto-card__title{font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);} .progetti-grid--grande .progetto-card__excerpt{font-size: 1.0625rem;} .progetti-grid--elenco{display: block; border-top: 1px solid var(--border-color);} .progetto-card--elenco{display: grid; grid-template-columns: 128px minmax(0, 1fr) 64px; align-items: center; gap: 8px 28px; padding: 20px 0; border-bottom: 1px solid var(--border-color);} .progetto-card--elenco .progetto-card__media{border-radius: var(--radius);} .progetto-card--elenco .progetto-card__placeholder{font-size: 2rem;} .progetto-card--elenco .progetto-card__body{gap: 4px;} .progetto-card--elenco .progetto-card__excerpt{max-width: 46em; font-size: .9375rem;} .progetto-card--elenco .progetto-card__link::after{border-radius: 0;} .progetto-card__anno{justify-self: end; margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums;} @media (max-width: 640px) { .progetto-card--elenco{grid-template-columns: 88px minmax(0, 1fr); gap: 4px 16px;} .progetto-card--elenco .progetto-card__excerpt{display: none;} .progetto-card__anno{grid-column: 2; justify-self: start;} } /* Blog: magazine (one large article, two beside it); list without images ----------------------- */ .blog--rivista .blog-rilievo{display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 4vw, 48px);} .blog--rivista .post-card--rilievo{grid-template-columns: minmax(0, 1fr); align-items: start;} .blog-rilievo__accanto{display: flex; flex-direction: column; gap: 32px;} .blog-rilievo__accanto .post-card__title{font-size: 1.125rem;} .blog-rilievo__accanto .post-card__excerpt{display: none;} .blog--elenco .articoli-list .post-card__title{font-size: 1.375rem;} @media (max-width: 991px) { .blog--rivista .blog-rilievo{grid-template-columns: minmax(0, 1fr);} .blog-rilievo__accanto{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;} } @media (max-width: 600px) { .blog-rilievo__accanto{grid-template-columns: minmax(0, 1fr);} } /* Article versions: reading (one centred column, the box above), cover (the image first, wide) ----------------------- */ .article--lettura{max-width: var(--measure);} .article--lettura .article__header{max-width: none;} .article--lettura .article__aside-inner{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; gap: 24px;} .article--lettura .toc{padding: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-lg);} @media (min-width: 992px) { .article--lettura .article__layout:has(> .article__aside){grid-template-columns: minmax(0, 1fr);} .article--lettura .article__aside, .article--lettura .article__body{grid-column: 1; grid-row: auto;} .article--lettura .article__aside-inner{position: static;} } .article--copertina{max-width: var(--container);} .article--copertina > .article__thumb{margin: 0 0 clamp(32px, 4vw, 48px);} .article--copertina > .article__thumb img{aspect-ratio: 21 / 9; object-fit: cover;} .article--copertina .article__header{max-width: 900px;} .article--copertina .article__title{font-size: clamp(2.5rem, 1.55rem + 3.6vw, 4.75rem); line-height: 1.02;} @media (max-width: 640px) { .article--copertina > .article__thumb img{aspect-ratio: 4 / 3;} } /* Section patterns ----------------------- */ /* Manifesto: one principle per line, in big type */ .manifesto__riga{margin: 0 !important; color: var(--site-text-color); font-size: clamp(2rem, 1.1rem + 3.6vw, 4.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance;} .manifesto__nota{margin: 28px 0 0 !important; font-size: 15px; color: var(--text-muted);} /* Process: four numbered steps, each opened by a hairline */ .processo{gap: clamp(24px, 3vw, 40px) !important; margin: clamp(28px, 3vw, 40px) 0 0;} .processo .wp-block-column{padding-top: 20px; border-top: 1px solid var(--border-color);} .processo .wp-block-column > *{margin-top: 0;} .processo__numero{margin-bottom: 12px !important; font-family: var(--font-mono); font-size: 13px; color: var(--link-color); font-variant-numeric: tabular-nums;} .processo h3{margin-bottom: 8px; font-size: 1.25rem;} .processo p:not(.processo__numero){margin: 0; font-size: 1rem; color: var(--text-secondary);} /* Services: the same columns of the skills */ .servizi{margin-bottom: clamp(24px, 3vw, 32px);} /* Testimonial: the 2px line of the quotes */ .testimonianza{max-width: 900px; margin: 0; padding: 0 0 0 clamp(20px, 3vw, 32px); border-left: 2px solid var(--site-text-color);} .testimonianza p{margin: 0 0 16px; color: var(--site-text-color); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em;} .testimonianza cite{font-size: 15px; font-style: normal; color: var(--text-secondary);} /* Call to action and CV: boxes with a hairline, flat */ .invito, .riquadro-cv{padding: clamp(24px, 4vw, 56px); border: 1px solid var(--border-color); border-radius: var(--radius-lg);} .invito > *, .riquadro-cv > *{margin-top: 0 !important;} .invito h2{margin-bottom: 12px;} .invito .lead{margin-bottom: 28px;} .riquadro-cv{max-width: 560px; padding: clamp(24px, 3vw, 32px);} .riquadro-cv h3{margin-bottom: 8px;} .riquadro-cv p{color: var(--text-secondary);} .riquadro-cv__nota{margin: 16px 0 0 !important; font-size: 14px;} /* Now, skills as labels */ .ora__data{margin-top: 16px; font-size: 14px; color: var(--text-muted);} .tag-lista{display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;} .tag-lista li{margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--surface-strong); color: var(--text-secondary); font-size: 15px; font-weight: 600;} /* Openings: essential (name, sentence, links) and statement (one big sentence) */ .intro-essenziale, .hero-dichiarazione{padding: clamp(8px, 3vw, 48px) 0 clamp(8px, 2vw, 24px);} .intro-essenziale > *, .hero-dichiarazione > *{margin-top: 0 !important;} .intro-essenziale h1{margin-bottom: 20px;} .intro-essenziale .lead{margin-bottom: 24px;} .intro-essenziale__link{margin: 0; font-weight: 600; color: #C9CDD3;} .intro-essenziale__link a{color: var(--site-text-color);} .intro-essenziale__link a:hover{color: var(--link-color);} .hero-dichiarazione__titolo{max-width: 15em; margin-bottom: 28px; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.04em;} .hero-dichiarazione .lead{margin-bottom: 32px;} /* Two columns pages: the left one stays still while the right one scrolls */ .due-colonne{gap: clamp(40px, 6vw, 96px) !important; margin-bottom: 0; padding-top: clamp(8px, 3vw, 48px);} .due-colonne__fissa > *{margin-top: 0;} .due-colonne__fissa h1{margin-bottom: 16px; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);} .due-colonne__fissa .lead{margin-bottom: 28px; font-size: 1.125rem;} .due-colonne__fissa .ritratto{margin-bottom: 28px;} .due-colonne__fissa .ritratto img{max-width: 200px; margin-left: 0;} .due-colonne__fissa .ritratto .wp-element-caption{max-width: 200px; margin-left: 0; text-align: left;} .due-colonne__fissa .contatti__email a{font-size: 1.25rem;} .due-colonne__indice{margin: 0 0 32px; padding: 0; list-style: none; border-left: 1px solid var(--border-color);} .due-colonne__indice li{margin: 0;} .due-colonne__indice a{display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--text-secondary); font-size: 15px; font-weight: 600; transition: color .2s var(--ease-out), border-color .2s var(--ease-out);} .due-colonne__indice a:hover{color: var(--site-text-color); border-left-color: var(--site-text-color);} .due-colonne__blocco{padding-bottom: clamp(48px, 6vw, 80px); scroll-margin-top: calc(var(--header-height) + 24px);} .due-colonne__blocco > *{margin-top: 0;} .due-colonne__blocco > h2{margin-bottom: 20px;} .due-colonne__contenuto > .riquadro-cv{margin-top: 8px;} @media (min-width: 782px) { .due-colonne__fissa{position: sticky; top: calc(var(--header-height) + 32px); align-self: flex-start;} } /* Motion ----------------------- */ @keyframes lorenzocaramia-enter { from {opacity: 0; transform: translateY(8px);} to {opacity: 1; transform: none;} } .load{opacity: 1; animation: lorenzocaramia-enter .6s var(--ease-out) both;} @media (prefers-reduced-motion: reduce) { .load, .progetti-grid__item.is-entering{animation: none; opacity: 1;} .fade{opacity: 1; transform: none; transition: none;} .progetto-card__img, .post-card__img, .notizia__img, .vetrina__img, .faq summary::after, .menu, .menu > ul{transition: none;} .progetto-card:hover .progetto-card__img, .post-card:hover .post-card__img, .notizia:hover .notizia__img, .vetrina__card:hover .vetrina__img{transform: none;} .vetrina__card, .vetrina__mini, .vetrina__testo, .vetrina__card.is-attiva .vetrina__testo{transition-duration: .01ms; transition-delay: 0s;} .vetrina.is-in-corsa .vetrina__punto.is-attivo::before{animation: none;} }