@charset "UTF-8";
/***!  /templates/yootheme/css/custom.css?5.0.3  !***/

/* ==========================================================================
   Pixed — user.css (YOOtheme / UIkit)
   - Refactor base + Glow Toolkit a classi
   ========================================================================== */

/* === Vars & base ========================================================= */
:root{
  --c-primary:#003D6C;
  --c-secondary:#003045;
  --c-accent-a:#e8451e;
  --c-accent-b:#0072d5;
  --c-shadow:#222;

  /* Toolkit (riusati nelle utility) */
  --pxd-dark:#142035;
  --pxd-orange:#e8451e;
  --pxd-blue:#0072d5;
}

html { scroll-behavior: smooth; }

li > p { margin-bottom: 0; }

/* === Toolbar / Navbar ==================================================== */
.tm-toolbar-default {
  box-shadow: 0 4px 6px -6px var(--c-shadow);
}

.uk-navbar-container.uk-navbar-sticky {
  /* Fallback solido */
  background-color: rgba(20, 32, 53, 0.85);
  box-shadow: 0 3px 10px #aeaeae;
  transition: background-color .3s ease;
}

/* Blur solo dove supportato */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .uk-navbar-container.uk-navbar-sticky {
    background-color: rgba(20, 32, 53, 0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.uk-sticky.uk-active .uk-navbar-container.uk-navbar-sticky {
  background-color: rgba(20, 32, 53, 0.85);
}

/* Toggle navbar (unificato) */
.uk-navbar-toggle {
  animation: glow-toggle 5s ease-in-out infinite alternate;
  color: #fff;
  border-radius: 999px;
  padding: 0 20px;
  transition: background .2s ease-in-out, color .2s ease-in-out;
}
.uk-navbar-toggle span,
.uk-navbar-toggle .uk-navbar-toggle-icon rect { color:#fff; fill:#fff; }
.uk-navbar-toggle:hover,
.uk-navbar-toggle:focus { background:#142035; color:#fff; }

/* === Cookie / Iubenda ==================================================== */
#iubenda-cs-paragraph .iub-p em { color:#fff !important; }
.cc-revoke.cc-bottom { z-index:50; }

.tm-cookie-banner.uk-position-bottom {
  bottom: 10px; left: 10px; right: 10px;
  border: 3px solid #9c4505 !important;
}

/* === Progress bar (scroll-linked) ======================================= */
#module-359 {
  position: sticky;
  top: 80px;
  width: 100%;
  z-index: 2;
}
#progress {
  transform-origin: left;
  background-color: var(--c-primary);
  height: 7px;
}
/* Applica l’animazione solo se supportata */
@supports (animation-timeline: scroll()) {
  
  #progress { animation: grow-progress linear forwards; animation-timeline: scroll(); }
}

/* === Tiles / Backgrounds ================================================= */
.uk-tile-secondary {
  background-color: var(--c-secondary);
  background-image:
    radial-gradient(ellipse at 30% 30%, #00293f 0%, transparent 60%),
    radial-gradient(ellipse at 75% 65%, #001e33 0%, transparent 65%),
    radial-gradient(ellipse at 50% 80%, #000a24 0%, transparent 70%),
    linear-gradient(135deg, rgba(0,36,56,.9), rgba(0,30,50,.6), rgba(0,20,40,.3));
  background-blend-mode: screen, screen, screen, normal;
}

/* === Moduli mirati (se possibile sostituisci con classi dedicate) ======= */
#module-360 {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 20px;
  position: relative;
  animation: glow-card 4s infinite alternate;
  background-color:#142035;
}

/* === Icone / immagini ==================================================== */
.lang-inline img {
  inline-size: 30px;
  block-size: 30px;
  vertical-align: middle;
}
.uk-modal-close-full svg { color:#fff; inline-size:50px; }

/* === Navbar common ======================================================= */
.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle { min-height: 40px; }

/* === Keyframes comuni ==================================================== */



/* === Media queries ======================================================= */
@media (max-width: 1200px) {
  .uk-navbar-nav li a { font-size: 1.1rem; }
  #module-tm-3 { display:none; }
}
@media (max-width: 640px) {
  .tm-cookie-banner.uk-position-bottom,
  .tm-cookie-banner.uk-position-bottom button { font-size:10px; padding:2px !important; }

  #colonnabici .uk-tile { padding-block:80px; }

  #module-menu-mobile a { font-size:18px; color:#e3e3e3 !important; padding:4px 0 !important; }
  #module-menu-mobile li.uk-active a { color:#ffaa00 !important; }

  .portfoliopage #uno .uk-card.uk-card-default .el-image,
  .portfoliopage #due .uk-card.uk-card-default .el-image,
  .portfoliopage #tre .uk-card.uk-card-default .el-image,
  .portfoliopage #quattro .uk-card.uk-card-default .el-image { display:none; }

  .portfoliopage #uno .el-content,
  .portfoliopage #due .el-content,
  .portfoliopage #tre .el-content,
  .portfoliopage #quattro .el-content { font-size:12px !important; }

  .portfoliopage #uno .uk-position-cover,
  .portfoliopage #due .uk-position-cover,
  .portfoliopage #tre .uk-position-cover,
  .portfoliopage #quattro .uk-position-cover { background-color: rgba(0,0,0,.7) !important; }

  .hidedesktop { display:block; }
  .hidemobile  { display:none !important; }

  #userForm .uk-form-controls.formControls { margin-left:0 !important; }
  #contattiheader > [class*='uk-background-'] { min-height:20vh !important; }
}

/* === Accessibilità: riduzione motion ==================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Glow Toolkit — classi riutilizzabili (immagini, grid/slider, panel slider)
   ========================================================================== */

/* --- Keyframes Toolkit (con variabili) ---------------------------------- */




/* --- Utility per disattivare animazioni via classe (+ prefers) ---------- */
.pxd-anim { /* segnaposto; usata per scopo semantico */ }
@media (prefers-reduced-motion: reduce) {
  .pxd-anim, .pxd-anim * { animation: none !important; transition: none !important; }
}

/* =======================================================================
   1) Immagini con glow — classi messe sul CONTENITORE
   - Applica stile all’IMG interno (anche dentro <picture>)
   ======================================================================= */

/* il wrapper può restare qual è (es. ha uk-parallax); qui non tocchiamo transform */
.pxd-img-glow { position: relative; }

/* targetta l’immagine interna (img.el-image, img generico, o img dentro picture) */
.pxd-img-glow > img,
.pxd-img-glow > picture > img,
.pxd-img-glow :is(img.el-image) {
  display: block;
  width: 100%;
  height: auto;

  border: 1px solid var(--pxd-dark);
  border-radius: 20px;
  position: relative;
  animation: pxd-glow-image var(--pxd-img-dur, 3s) infinite alternate;
}

/* Varianti colore/durata (rimangono sul wrapper) */
.pxd-img--orange { --pxd-glow-from: var(--pxd-dark); --pxd-glow-to: var(--pxd-orange); }
.pxd-img--blue   { --pxd-glow-from: var(--pxd-dark); --pxd-glow-to: var(--pxd-blue); }
.pxd-img-3s      { --pxd-img-dur: 3s; }
.pxd-img-5s      { --pxd-img-dur: 5s; }

/* Solo angoli superiori: applica ai soli bordi dell’IMG */
.pxd-img-top-rounded > img,
.pxd-img-top-rounded > picture > img,
.pxd-img-top-rounded :is(img.el-image) {
  border-radius: 50px 50px 0 0 !important;
}

/* =======================================================================
   2) GRID / SLIDER con glow alternato su 6
   - Applica .pxd-grid-glow al wrapper che contiene .uk-grid o .uk-slider-items
   ======================================================================= */
.pxd-grid-glow :where(.uk-slider-items > * .el-item, .uk-grid > * .el-item) {
  border: 2px solid var(--pxd-accent, #eee);
  border-radius: 20px;
  transition: transform .25s ease;
  position: relative;
  margin-top: 20px;
  animation: pxd-glow-border 5s infinite alternate;
}

/* Hover lift */
.pxd-grid-glow :where(.uk-slider-items > * .el-item, .uk-grid > * .el-item):hover {
  transform: translateY(-3px);
}

/* Scacchiera (6) — set colori */
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+1) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+1) .el-item { --pxd-accent:#eee;              --pxd-accent-to: var(--pxd-blue); }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+2) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+2) .el-item { --pxd-accent:var(--pxd-orange);  --pxd-accent-to: var(--pxd-blue); }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+3) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+3) .el-item { --pxd-accent:var(--pxd-blue);    --pxd-accent-to: var(--pxd-blue); }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+4) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+4) .el-item { --pxd-accent:var(--pxd-orange);  --pxd-accent-to: var(--pxd-blue); }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+5) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+5) .el-item { --pxd-accent:var(--pxd-blue);    --pxd-accent-to: var(--pxd-blue); }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+6) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+6) .el-item { --pxd-accent:#eee;              --pxd-accent-to: var(--pxd-blue); }

/* Sfasamento animazioni */
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+1) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+1) .el-item { animation-delay: -0.0s; }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+2) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+2) .el-item { animation-delay: -0.6s; }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+3) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+3) .el-item { animation-delay: -1.2s; }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+4) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+4) .el-item { animation-delay: -1.8s; }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+5) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+5) .el-item { animation-delay: -2.4s; }
.pxd-grid-glow .uk-slider-items > *:nth-child(6n+6) .el-item,
.pxd-grid-glow .uk-grid        > *:nth-child(6n+6) .el-item { animation-delay: -3.0s; }

/* =======================================================================
   3) Panel Slider “pill” con media-top e hover glow
   - Applica .pxd-panel-slider al wrapper dello slider (.uk-slider)
   ======================================================================= */
.pxd-panel-slider .uk-slider-items > * .el-item {
  border: 3px solid var(--pxd-accent, #eee);
  border-radius: 50px;
  transition: box-shadow .3s ease, transform .25s ease;
  will-change: box-shadow, transform;
  position: relative;
  margin-top: 20px;
}

/* Alternanza 3-colori */
.pxd-panel-slider .uk-slider-items > *:nth-child(3n+1) .el-item { --pxd-accent:#eee; }
.pxd-panel-slider .uk-slider-items > *:nth-child(3n+2) .el-item { --pxd-accent:var(--pxd-orange); }
.pxd-panel-slider .uk-slider-items > *:nth-child(3n+3) .el-item { --pxd-accent:var(--pxd-blue); }

/* Fallback: se la slide è direttamente .el-item */
.pxd-panel-slider .uk-slider-items > *:nth-child(3n+1).el-item { --pxd-accent:#eee; }
.pxd-panel-slider .uk-slider-items > *:nth-child(3n+2).el-item { --pxd-accent:var(--pxd-orange); }
.pxd-panel-slider .uk-slider-items > *:nth-child(3n+3).el-item { --pxd-accent:var(--pxd-blue); }

/* Hover glow */
.pxd-panel-slider .uk-slider-items > * .el-item:hover,
.pxd-panel-slider .uk-slider-items > *:hover.el-item {
  box-shadow: 0 0 0 2px var(--pxd-accent), 0 0 18px var(--pxd-accent);
  transform: translateY(-2px);
  border-radius: 50px;
}

/* Bottoni/link interni “pill” */
.pxd-panel-slider .el-item a {
  border-radius: 50px;
  background-color: var(--pxd-dark);
}

/* Media-top arrotondato sopra */
.pxd-panel-slider .el-image,
.pxd-panel-slider .uk-card-media-top { border-radius: 50px 50px 0 0; }

/* Card structure: niente clip del glow, body che sale sull’immagine */
.pxd-panel-slider .el-item .uk-card {
  border-radius: 50px;
  position: relative;
  overflow: visible;
}
.pxd-panel-slider .el-item .uk-card-media-top {
  overflow: hidden;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  position: relative;
  z-index: 0;
}
.pxd-panel-slider .el-item .uk-card-media-top img {
  display: block; width: 100%; height: auto;
}
.pxd-panel-slider .el-item .uk-card-body {
  background: var(--uk-card-secondary-background, #142035);
  margin-top: -30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  position: relative;
  z-index: 1;
  padding-top: 1.25rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15);
}

/* ==========================================
   Fix per <a> full-cover dentro .el-item
   ========================================== */
.pxd-grid-glow :where(.el-item),
.pxd-panel-slider :where(.el-item) {
  overflow: hidden;
}

/* =========================================================
   Effetto "stelle" animato per sezioni
   Usa: aggiungi la classe pxd-stars alla tua sezione
   ========================================================= */
.pxd-stars {
  position: relative;           /* serve per il ::before */
  --stars-opacity: .8;          /* default, puoi sovrascriverlo inline */
}

.pxd-stars::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.9), transparent 2px),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.8), transparent 2px);
  background-repeat: repeat;
  background-size: 320px 320px, 260px 260px; /* più grande = meno stelle */
  opacity: var(--stars-opacity);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.3));

  animation: stars-twinkle 7s ease-in-out infinite;
  will-change: opacity, background-position;
  animation-play-state: running !important;
}

/* Keyframes: scintillio */


/* Pill toggle: bianca, bordo soft, ombra leggera */
.pxd-pill-toggle{
  --pxd-pill-bg:#fff;
  --pxd-pill-fg:#111827;
  --pxd-pill-border:rgba(0,0,0,.14);

  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .875rem;
  border-radius:9999px;
  background:var(--pxd-pill-bg);
  color:var(--pxd-pill-fg);
  border:1px solid var(--pxd-pill-border);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  line-height:1;
  font-size:.9rem;
  font-weight:600;
  transition:background-color .2s ease, border-color .2s ease, transform .06s ease;
}

.pxd-pill-toggle:hover{
  border-color:rgba(0,0,0,.22);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.pxd-pill-toggle:active{ transform:translateY(1px); }

.pxd-pill-toggle:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,110,255,.2), 0 2px 6px rgba(0,0,0,.06);
}

/* Icone */
.pxd-pill-toggle .pxd-icon svg{ display:block; width:18px; height:18px; }

/* Di base: mostra il Sole, nascondi la Luna */
.pxd-pill-toggle .pxd-icon-moon{ display:none; }
.pxd-pill-toggle[aria-pressed="true"] .pxd-icon-sun{ display:none; }
.pxd-pill-toggle[aria-pressed="true"] .pxd-icon-moon{ display:inline-flex; }

/* (opzionale) colore pill in stato 'scuro' se preferisci distinguerla visivamente */
.pxd-pill-toggle[aria-pressed="true"]{
  /* tieni la pill bianca oppure sfumala leggermente */
  /* background:#f9fafb; */
}

/* Se la pill sta su sfondo scuro, garantisci contrasto */
.uk-section-secondary .pxd-pill-toggle{ --pxd-pill-border:rgba(255,255,255,.25); }

    
    /* ================= Articolo: tema scuro (default) ================= */
#corpoarticolo {
  /* palette di base (scuro attuale) */
  --art-bg: #142035;
  --art-text: #ffffff;
  --art-muted: #c8d1dc;
  --art-link: #7cc3ff;
  --art-link-hover: #9bd2ff;
  --art-border: rgba(255,255,255,0.12);
  --art-card: rgba(255,255,255,0.04);

  background: var(--art-bg);
  color: var(--art-text);
  position: relative; /* per sicurezza con overlay ecc. */
}

/* Tipografia & elementi comuni dentro l’articolo */
#corpoarticolo :is(p, li, dt, dd, figcaption) { color: var(--art-text); }
#corpoarticolo :is(h1,h2,h3,h4,h5,h6) { color: #ffffff; }
#corpoarticolo a { color: var(--art-link); text-decoration-thickness: .08em; }
#corpoarticolo a:hover { color: var(--art-link-hover); }

#corpoarticolo hr { border-color: var(--art-border); }
#corpoarticolo blockquote { border-left: 4px solid var(--art-border); color: var(--art-muted); }
#corpoarticolo code, #corpoarticolo pre {border-radius: 6px;}
#corpoarticolo .uk-card-default { background: var(--art-card); border: 1px solid var(--art-border); }
#corpoarticolo .uk-button-default { background: transparent; color: var(--art-text); border-color: var(--art-border); }

/* ================= Articolo: tema chiaro (attivato via classe) ================= */
#corpoarticolo.pxd-article-light {
  --art-bg: #f8fafc;          /* sfondo chiaro */
  --art-text: #111827;        /* testo scuro */
  --art-muted: #374151;
  --art-link: #0a5fff;        /* blu “coerente” con il tuo palette */
  --art-link-hover: #084bd1;
  --art-border: rgba(0,0,0,0.12);
  --art-card: #ffffff;
}

/* Override visivi in chiaro */
#corpoarticolo.pxd-article-light { background: var(--art-bg); color: var(--art-text); }
#corpoarticolo.pxd-article-light :is(h1,h2,h3,h4,h5,h6) { color: #0f172a; }
#corpoarticolo.pxd-article-light a { color: var(--art-link); }
#corpoarticolo.pxd-article-light a:hover { color: var(--art-link-hover); }
#corpoarticolo.pxd-article-light hr { border-color: var(--art-border); }
#corpoarticolo.pxd-article-light blockquote { border-left-color: var(--art-border); color: var(--art-muted); }
#corpoarticolo.pxd-article-light code, 
#corpoarticolo.pxd-article-light pre { background: #f1f5f9; }
#corpoarticolo.pxd-article-light .uk-card-default { background: var(--art-card); border: 1px solid var(--art-border); }
#corpoarticolo.pxd-article-light .uk-button-default { color: var(--art-text); border-color: var(--art-border); }

/* Pulsante toggle (piccolo fine-tuning) */
#pxd-article-theme-toggle .uk-icon { vertical-align: -2px; }

/* Modalità chiara articolo */
#corpoarticolo.pxd-article-light {
  --art-bg: #ffffff;
  --art-text: #111111;

  border-radius: 20px;
  padding: 20px;
}

#corpoarticolo.pxd-article-light em {
  color:#111111!important;
}

/* Pulsante pill mobile */
.pxd-article-theme-toggle.hidden-desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;                 /* spazio tra icona e testo */
  width: 100%;
  text-align: center;
  border-radius: 999px;
  padding: 10px 16px;
  background: #fff;
  color: #142035;
  font-weight: 500;
}

/* Icone: mostriamo solo quella attiva */
.pxd-article-theme-toggle .pxd-icon-moon { display: none; }
.pxd-article-light ~ .hidden-desktop .pxd-icon-sun { display: none; }
.pxd-article-light ~ .hidden-desktop .pxd-icon-moon { display: inline; }

.pxd-article-theme-toggle {
  cursor:pointer;
}

.hidden-mobile {
  display:block;
}

.hidden-desktop {
  display:none;
}

#tm-dialog .uk-modal-dialog {
   background-color: #00304599;
  backdrop-filter: blur(10px);
}

.uk-modal-close-full {
  box-shadow: rgb(0, 114, 213) 0px 0px 10px 0px, rgb(0, 114, 213) 0px 0px 20px 0px, rgb(0, 114, 213) 0px 0px 30px 0px;
    border-left-color: rgb(0, 114, 213);
    border-right-color: rgb(0, 114, 213);
    border-top-color: rgb(0, 114, 213);
    border-bottom-color: rgb(0, 114, 213);
  border-radius:0px 0px 0px 30px;
}

@media only screen and (max-width: 600px) {
  .hidden-mobile {
    display:none;
  }
  .hidden-desktop {
    display:block;
  }

  .uk-offcanvas-overlay.uk-open::before {
   background-color: #00304599;
  backdrop-filter: blur(10px);
    }
  .uk-offcanvas-flip .uk-open>.uk-offcanvas-bar {
border-radius:20px 0px 0px 20px;
    }
}