/* Theme Name: LUCIA2026 */ /*-----------------------------------------------------------------------------------*/ /* 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, body:after { } 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 { } #primary p, h3, h6 { padding-left: 30px;padding-right: 30px; } #primary p img { } #primary { } /* ========================================================================== MENU 2026. backdrop-filter: blur(20px);background: #eeeeff33; ========================================================================== */ #navbar { 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 { #navbar { transform: translate3d(0, -100%, 0); } } .scroll-up { #navbar { filter: drop-shadow(0 -10px 20px rgb(170, 170, 170)); } } #navbar a { text-decoration: none;} /* ========================================================================== MENU 2026 ========================================================================== */ #myNav1, #myNav2, #myNav3, #myNav4, #myNav5 { position: fixed; top: 30px; width: 100%; height: 100vh; padding: 20px 0; text-align: left; background: #eee; z-index: 9999; transition: all 300ms ease-in-out; overflow-y: scroll; } .CLOSED { left: 100vw;} .OPENED { left: 20vw;} /* ========================================================================== fine menu cell ========================================================================== */