/* Theme Name: LUCIA2019febbraio22 */ /*-----------------------------------------------------------------------------------*/ /* 1/ GENERALI /*-----------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } figure { margin: 10% 0; } figcaption { text-align: center; } img { border: 0; -ms-interpolation-mode: bicubic;} input {-webkit-border-radius:0; border-radius:0;} ::-webkit-input-placeholder {color: #222222;} :-moz-placeholder {color: #222222;} ::-moz-placeholder {color: #222222;} :-ms-input-placeholder {color: #222222;} *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} ::selection {background: #d1eded; } ::-moz-selection {background: #d1eded;} .clearfix:after, .sharedaddy:after {clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; } .cf:before, .cf:after {content: " "; /* 1 */ display: table; /* 2 */} .cf:after {clear: both;} .cf {*zoom: 1;} .gallery:after {content:"";display:table;clear:both;} .gallery figure img {max-width:100%; height:auto; margin:0 auto; display:block;} .gallery figure {float:left; margin:0 2% 1em 0;} .gallery.gallery-columns-1 figure {width:100%; margin:0 0 1em 0; float:none;} .gallery.gallery-columns-3 figure {width:32%;} .gallery.gallery-columns-3 figure:nth-of-type(3n+3) {margin-right:0;} .gallery.gallery-columns-3 figure:nth-of-type(3n+4) {clear:left;} .gallery.gallery-columns-2 figure {width:49%;} .gallery.gallery-columns-2 figure:nth-of-type(even) {margin-right:0;} .gallery.gallery-columns-2 figure:nth-of-type(odd) {clear:left;} p {margin: 0;padding: 0 0 0 0;} body:before { top: 0; } body:after { bottom: 0; } .lt-ie9 body:before, .lt-ie9 body:after { display: none; } .lt-ie9 body { border:none; } /* ========================================================================== 2026 - HOMEPAGE ========================================================================== */ /* Reset CSS */ * { margin: 0; padding: 0; } img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; } /* Main CSS */ .grid-wrapper > a { display: flex; justify-content: center; align-items: center; border: 0px solid #000; } .grid-wrapper > a > img { width: 100%; height: 100%; object-fit: cover; border: 0px solid #000; } .grid-wrapper { display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); grid-auto-rows: auto; grid-auto-flow: dense; } @media (orientation: portrait) { .grid-wrapper { grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); } } .grid-wrapper .wide { grid-column: span 2; } .grid-wrapper .tall { grid-row: span 2; } .grid-wrapper .big { grid-column: span 2; grid-row: span 2; } .grid-wrapper a img:hover { transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; border: 0px solid #000; } /* ========================================================================== 2026 - MOUSE ========================================================================== */ .circle { width: 10px; height: 10px;position: absolute;top: -30px;left: -30px;transform: translateX(5px) translateY(5px); pointer-events: none;z-index: 999999999999999999999999999999999;-webkit-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out;border-radius: 50%;box-shadow: 0px 0px 30px 30px yellow;background: yellow;} .circle svg {width: 0%;position: fixed;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg); -webkit-transition: 600ms all cubic-bezier(.23,1,.32,1);transition: 600ms all cubic-bezier(.23,1,.32,1);} .circle svg path {width: 0px;height: 0px;fill: yellow;-webkit-transition: 600ms all cubic-bezier(.23,1,.32,1); transition: 600ms all cubic-bezier(.23,1,.32,1);} /* ========================================================================== REGOLE GENERALI ========================================================================== */ /* ========================================================================== FONT 2026 ========================================================================== */ @font-face {font-family: 'Apercu';font-style: normal;font-weight: 400; src: local('Apercu'),url('/fonts/Apercu-Bold.svg#apercu') format('svg'), url('/fonts/Apercu-Bold.woff') format('woff'), url('/fonts/Apercu-Bold.ttf') format('truetype'), url('/fonts/Apercu-Bold.eot') format('embedded-opentype'); } body { margin:0; padding: 0; font-family: 'B612 Mono', monospace; color: #000; font-size: 12px; background: #fff; -webkit-font-smoothing: antialiased; cursor: default; } h3 { font-family: 'Apercu', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;-webkit-font-smoothing: antialiased; text-transform: uppercase;letter-spacing: 0.09em; } h2 { font-family: 'B612 Mono', monospace;font-size: 16px;line-height: 16px; padding-bottom: 10px;font-weight: 400;} h4 { font-family: 'B612 Mono', monospace; font-size: 11px;line-height: 13px;padding-bottom: 1px;font-weight: 400;} h6 { font-family: 'B612 Mono', monospace;font-size: 9px;line-height: 12px;font-weight: 400; padding-top: 4px; padding-bottom: 4px;} a { color: #000;} a:hover { color: #000;font-weight: bold;} #primary { padding-bottom: 150px; } #primary h6 { padding-left: 10px;padding-right: 10px; } #primary p img { } #primary { } /* ========================================================================== MENU 2026. backdrop-filter: blur(20px);background: #eeeeff33; ========================================================================== */ #MENU_PC { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; text-align: center; background: #eee; z-index: 9999999999; transition: all 300ms ease-in-out; } .scroll-down { #MENU_PC {transform: translate3d(0, -100%, 0);} .entry-title {transform: translate3d(0, 100%, 0);} } .scroll-up { #MENU_PC { filter: drop-shadow(0 -10px 20px rgb(170, 170, 170)); } } .entry-title { position: fixed; bottom: 0; left: 0; width: 100%; padding: 20px 0; text-align: center; background: #eee; z-index: 999999999; transition: all 800ms ease-in-out; font-family: 'B612 Mono', monospace;font-size: 11px;line-height: 13px; font-weight: 400; } #MENU_PC a, #myNav1 a, #myNav2 a, #myNav3 a, #myNav4 a, #myNav5 a { text-decoration: none;} #MENU_PC a:hover, #myNav1 a:hover, #myNav2 a:hover, #myNav3 a:hover, #myNav4 a:hover, #myNav5 a:hover { font-weight: bold; cursor: pointer;} #myNavPOST { border-top: 2px solid #000;-webkit-overflow-scrolling: touch;font-family: 'B612 Mono', monospace;font-size: 12px;line-height: 18px;color: #000;background-color: #fff; } .myNavPOSTclosed { display: none; position: fixed;right: 0;top: 0;width: 100%;height: auto; min-height: 100vh;background: #fff; overflow-y: scroll;overflow-x: hidden; z-index: 999999999999999999999999999999999; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;transition: all 1.5s ease;} .myNavPOSTopened {display: block;position: fixed;right: 0;top:0;width: 100%;height: 100vh;background: #fff; overflow-y: scroll; overflow-x: hidden; z-index: 999999999999999999999999999999999;-webkit-transition: top 1.0s ease; -moz-transition: top 1.0s ease;-o-transition: top 1.0s ease;transition: top 1.0s ease; -webkit-animation: fadeInFromNone 2.0s ease-out;-moz-animation: fadeInFromNone 2.0s ease-out; -o-animation: fadeInFromNone 2.0s ease-out;animation: fadeInFromNone 2.0s ease-out;} @-webkit-keyframes fadeInFromNone { 0% {display: none;opacity: 0;} 1% {display: block;opacity: 0;} 100% {display: block;opacity: 1;}} @-moz-keyframes fadeInFromNone { 0% {display: none;opacity: 0;} 1% {display: block;opacity: 0;} 100% {display: block;opacity: 1;}} @-o-keyframes fadeInFromNone { 0% {display: none;opacity: 0;} 1% {display: block;opacity: 0; } 100% {display: block;opacity: 1; } } @keyframes fadeInFromNone { 0% {display: none;opacity: 0;} 1% {display: block;opacity: 0;} 100% {display: block;opacity: 1;} } /* ========================================================================== MENU PC ========================================================================== */ .Bio, .Works, .News, .Contact, .Texts {padding-top: 10px;padding-left: 10px;padding-right: 10px; } #myNav2, #myNav1, #myNav3, #myNav4, #myNav5 { -webkit-overflow-scrolling: touch;font-family: 'B612 Mono', monospace;font-size: 12px; line-height: 18px;color: #000;background-color: #eee; border: 0.5px solid #C8C8C8;} #myNav1 { -webkit-overflow-scrolling: touch; font-family: 'B612 Mono', monospace;font-size: 12px;text-transform: uppercase; line-height: 15px;background-color: #eee; border: 0.5px solid #C8C8C8; } .myNav1closed, .myNav2closed, .myNav3closed, .myNav4closed, .myNav5closed { position: fixed; right: -100%; width: 90%; height: 100vh; overflow-y: scroll; overflow-x: hidden; z-index: 999999999999999999999999999999999;-webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease;-o-transition: all 1.0s ease; transition: all 1.0s ease; } .myNav1opened, .myNav2opened, .myNav3opened, .myNav5opened{position: fixed;right: 0px;width: 50%;height: 100vh;background: #fff; overflow-y: scroll; overflow-x: hidden; z-index: 999999999999999999999999999999999;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;-o-transition: all 1.0s ease;transition: all 1.0s ease; -webkit-box-shadow: -8px 2px 22px -4px rgba(0,0,0,0.65); box-shadow: -8px 2px 22px -4px rgba(0,0,0,0.65); } .myNav4opened {position: fixed;right: 0px;width: 50%;height: 100vh;overflow-y: scroll;overflow-x: hidden; z-index: 999999999999999999999999999999999;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;-o-transition: all 1.0s ease;transition: all 1.0s ease; -webkit-box-shadow: -8px 2px 22px -4px rgba(0,0,0,0.65); box-shadow: -8px 2px 22px -4px rgba(0,0,0,0.65); } @media (orientation: portrait) { .myNav1opened, .myNav2opened, .myNav3opened, .myNav5opened{width: 80%;} .myNav4opened {width: 80%;} } .closeWorksClosed, .closeBioClosed, .closeNewsClosed, .closeContactClosed, .closeTextsClosed, .closePOSTClosed { position: fixed; top: 20px;right: -80%;font-size: 48px;font-family: 'Apercu', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400; -webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;-o-transition: all 1.0s ease;transition: all 1.0s ease;} .closeWorksOpened, .closeBioOpened, .closeNewsOpened, .closeContactOpened, .closeTextsOpened, .closePOSTOpened {position: fixed;top: 20px;right: 5px;font-size: 48px;line-height: 0px;font-family: 'Apercu', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;-o-transition: all 1.0s ease;transition: all 1.0s ease;} .closeContactOpened {position: fixed;top: 20px;right: 5px;font-size: 48px;line-height: 0px;font-family: 'Apercu', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;-o-transition: all 1.0s ease;transition: all 1.0s ease;} .closeWorks:hover, .closeBio:hover, .closeNews:hover, .closeContact:hover, .closeTexts:hover, .closeMenu:hover { text-decoration: none; cursor: pointer; } /* ========================================================================== WORKS - articoli ========================================================================== */ ul { list-style: none; /* Remove list bullets */ } blockquote { margin-top: 80px; padding-left: 50px; padding-right: 50px; float: left; width: 50%; /* O 48% per lasciare spazio di margine */ } /* clearfix per risolvere problemi di altezza */ blockquote::after { content: ""; clear: both; display: table; } .aligncenter { /* immagini articoli */ width: 100%; /* O 48% per lasciare spazio di margine */ } .alignright { /* immagini articoli */ width: 50vw; margin: auto; display: block;/* O 48% per lasciare spazio di margine */ } @media (orientation: portrait) { blockquote { float: none; width: 100%; /* O 48% per lasciare spazio di margine */ padding-left: 50px; padding-right: 50px; } .gallery-columns-1 figure .portrait img { width: 80%; /* O 48% per lasciare spazio di margine */ padding-left: 30px; padding-right: 30px; padding-bottom: 30px; padding-top:30px; } .alignright { /* immagini articoli */ width: 100vw; margin: auto; padding: 10px; display: block;/* O 48% per lasciare spazio di margine */ } }