/* ==========================================================================
   Dare Production — child theme YOOtheme Pro
   Caricato automaticamente da YOOtheme Pro quando il child theme è attivo.
   Contiene: loader di pagina + striscia orizzontale 4:3.
   Tutte le classi hanno prefisso .dare- per non collidere con UIkit.
   ========================================================================== */

:root{
  --dare-paper:#FBFAEF;
  --dare-ink:#0F0F0E;
  --dare-ink-55:rgba(15,15,14,.55);
  --dare-ink-25:rgba(15,15,14,.25);
  --dare-veil:rgba(228,227,217,.82);
  --dare-panel:#DCDBD1;
  --dare-tile-h:min(300px,27vh);
  --dare-grotesk:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --dare-mono:ui-monospace,Menlo,Consolas,monospace;
}

/* --------------------------------------------------------------- loader -- */

.dare-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--dare-paper);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility 0s .45s;
}
.dare-loader.is-on{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease;
}
.dare-loader__logo{
  width:88px;
  height:94px;
  background:url(../images/logo.png) center/contain no-repeat;
}
.dare-loader.is-on .dare-loader__logo{
  animation:dare-gait .9s cubic-bezier(.55,0,.2,1) infinite;
}
@keyframes dare-gait{
  0%   {transform:translateX(-6px) scale(.98); opacity:.35}
  45%  {transform:translateX(0)    scale(1);   opacity:1}
  100% {transform:translateX(6px)  scale(.98); opacity:.35}
}
.dare-loader__bar{
  position:absolute;
  left:50%;
  bottom:38px;
  width:120px;
  height:1px;
  background:var(--dare-ink-25);
  transform:translateX(-50%);
}
.dare-loader__bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--dare-ink);
}
.dare-loader.is-on .dare-loader__bar i{
  animation:dare-fill .95s cubic-bezier(.4,0,.1,1) forwards;
}
@keyframes dare-fill{ from{width:0} to{width:100%} }

/* -------------------------------------------------------------- striscia -- */

.dare-strip{
  position:relative;
  height:calc(var(--dare-tile-h) * 1.85);
  overflow:hidden;
  cursor:grab;
  /* la striscia esce a tutta larghezza anche dentro un contenitore YOOtheme */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}
.dare-strip.is-drag{ cursor:grabbing }

.dare-strip__track{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  display:flex;
  align-items:center;
  will-change:transform;
}

.dare-tile{
  position:relative;
  flex:0 0 auto;
  height:var(--dare-tile-h);
  aspect-ratio:4/3;
  margin:0;
  transform-origin:center center;
  transition:transform .5s cubic-bezier(.16,.84,.28,1);
}
.dare-tile img,
.dare-tile video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.dare-tile.is-open{
  transform:scale(1.72);
  z-index:6;
}

.dare-tile__card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:14px 16px;
  background:var(--dare-veil);
  color:var(--dare-ink);
  opacity:0;
  transition:opacity .3s ease;
}
.dare-tile.is-open .dare-tile__card{
  opacity:1;
  transition-delay:.12s;
}
.dare-tile__title{
  font-weight:700;
  font-size:11px;
  letter-spacing:-.01em;
  line-height:1.2;
}
.dare-tile__meta{
  margin-top:12px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1px 10px;
  font-size:6.5px;
  line-height:1.5;
}
.dare-tile__meta b{
  font-weight:400;
  color:var(--dare-ink-55);
}
.dare-tile__desc{
  margin-top:auto;
  max-width:34ch;
  font-size:6.5px;
  line-height:1.55;
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width:640px){
  :root{ --dare-tile-h:min(220px,32vh) }
  .dare-tile.is-open{ transform:scale(1.35) }
}

@media (prefers-reduced-motion:reduce){
  .dare-loader__logo,
  .dare-loader__bar i{ animation:none }
  .dare-tile{ transition:none }
}

/* ---------------------------------------------------------------- ghiera -- */

.dare-dial{
  position:relative;
  display:grid;
  grid-template-columns:40% 60%;
  overflow:hidden;
  /* a tutta larghezza anche dentro un contenitore YOOtheme */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}

.dare-dial__visual{
  position:relative;
  background:#0B0B0A;
  overflow:hidden;
}
.dare-dial__visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
}
.dare-dial__visual img.is-live{ opacity:1 }

.dare-dial__panel{
  position:relative;
  background:var(--dare-panel);
  overflow:hidden;
  touch-action:none;
}

/* la ruota: centro fuori schermo a destra, raggio 520px */
.dare-dial__stage{
  position:absolute;
  top:50%;
  right:-560px;
  width:1120px;
  height:1120px;
  transform:translateY(-50%);
  pointer-events:none;
}
.dare-dial__arc{
  position:absolute;
  top:50%;
  left:50%;
  width:1040px;
  height:1040px;
  margin:-520px 0 0 -520px;
  border:1px solid rgba(15,15,14,.10);
  border-radius:50%;
}
.dare-dial__ring{
  position:absolute;
  inset:0;
}
.dare-dial__item{
  position:absolute;
  top:50%;
  left:50%;
  width:520px;
  height:52px;
  margin:-26px 0 0 -520px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:22px;
  transform-origin:100% 50%;
  will-change:transform,opacity;
  pointer-events:auto;
  cursor:pointer;
}
.dare-dial__num{
  font-family:var(--dare-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--dare-ink-55);
}
.dare-dial__name{
  font-weight:700;
  font-size:26px;
  letter-spacing:-.02em;
  white-space:nowrap;
  transition:font-size .35s ease;
}
.dare-dial__item.is-active .dare-dial__name{ font-size:38px }
.dare-dial__item.is-active .dare-dial__num{ color:var(--dare-ink) }

.dare-dial__notch{
  position:absolute;
  top:50%;
  right:520px;
  width:26px;
  height:1px;
  background:var(--dare-ink);
  transform:translateY(-50%);
}

.dare-dial__sublist{
  position:absolute;
  top:50%;
  left:60px;
  transform:translateY(-50%);
  width:min(260px,28%);
  z-index:2;
}
.dare-dial__sublist ul{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.dare-dial__sublist li{
  list-style:none;
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:baseline;
  font-family:var(--dare-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size:11px;
  color:var(--dare-ink-55);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.dare-dial__sublist.is-live li{ opacity:1; transform:none }
.dare-dial__sublist.is-live li:nth-child(2){ transition-delay:.06s }
.dare-dial__sublist.is-live li:nth-child(3){ transition-delay:.12s }
.dare-dial__sublist.is-live li:nth-child(4){ transition-delay:.18s }
.dare-dial__sublist li span:nth-child(2){
  font-family:var(--dare-grotesk, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-weight:700;
  font-size:13px;
  letter-spacing:-.01em;
  color:var(--dare-ink);
}

/* il contenitore prima che il JS lo trasformi: niente lampi di contenuto */
.dare-dial-source:not(.dare-dial){ display:none }

@media (max-width:900px){
  .dare-dial{ grid-template-columns:1fr }
  .dare-dial__visual{ display:none }
  .dare-dial__stage{ right:-680px }
  .dare-dial__sublist{ left:30px; width:min(220px,45%) }
}

@media (prefers-reduced-motion:reduce){
  .dare-dial__visual img,
  .dare-dial__name,
  .dare-dial__sublist li{ transition:none }
}

/* griglia decorativa del tema: rimossa */
html::after{ display:none !important }

/* ------------------------------------------------------------- caratteri --
   03/11/2026: tutto il sito in Montserrat (prima titoli Sora, testo Archivo).
   File variabile 100–900 in ../fonts/. Spessori: testo 400, sottotitoli 500,
   menu e pulsanti 600, titoli 700, titoli grandi 800. */

@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{ --bs-font-sans-serif:"Montserrat",sans-serif; }

html,.uk-font-default,blockquote footer,.blockquote-footer,.uk-breadcrumb>*>*{
  font-family:"Montserrat",sans-serif; font-weight:400;
}
.uk-nav-primary .uk-nav-subtitle,.uk-nav-secondary .uk-nav-subtitle,.uk-navbar-subtitle{
  font-family:"Montserrat",sans-serif; font-weight:500;
}
.uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle,.uk-nav-primary,.uk-nav-secondary,
.uk-button,.btn,.uk-pagination>*>*,.uk-search-navbar .uk-search-input,.uk-logo{
  font-family:"Montserrat",sans-serif; font-weight:600;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,
.uk-heading-small,.uk-heading-medium,.display-3,.display-4,.display-5,.display-6,
.uk-card-title,.uk-article-title,.uk-modal-title,.tm-section-title,
.uk-accordion-default .uk-accordion-title,.uk-font-primary,blockquote{
  font-family:"Montserrat",sans-serif; font-weight:700;
}
.uk-heading-large,.uk-heading-xlarge,.uk-heading-2xlarge,.uk-heading-3xlarge,.display-1,.display-2{
  font-family:"Montserrat",sans-serif; font-weight:800; letter-spacing:-.01em;
}
/* Montserrat è più largo di Sora: sul telefono i titoli grandi si stringono con lo schermo */
@media (max-width:959px){ .uk-heading-large{ font-size:min(3.4rem,11vw); } }

/* ---------------------------------------------------------- testi settori --
   03/11/2026: pagine Moda, Automotive, Eventi, Videoclip, Cibo (IT ed EN).
   Etichette rosse da «titoli di coda», elenchi compatti con filo sottile,
   paragrafi tutti con lo stesso respiro, frase d'apertura grande. */

.el-item > h3.el-title.uk-h6{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#F62423; padding-bottom:10px; margin-bottom:6px !important;
  border-bottom:1px solid currentColor;
}
.el-item > h3.el-title.uk-h6 + .el-content > :empty{ display:none; }
.el-item > h3.el-title.uk-h6 + .el-content > p{
  margin:0 !important; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12);
  font-size:14px; line-height:1.4; letter-spacing:.03em; color:rgba(255,255,255,.88);
}
.el-item + .el-item > h3.el-title.uk-h6{ margin-top:36px !important; }

.uk-width-2-3\@s .uk-text-lead > p:only-child{
  font-size:clamp(24px,3.2vw,32px); line-height:1.15; font-weight:800;
  letter-spacing:-.01em; color:#fff; margin-bottom:8px;
}
.uk-width-2-3\@s .uk-text-lead > p:only-child strong{ font-weight:inherit; }
.uk-width-2-3\@s .uk-panel > p:not(:only-child),
.uk-width-2-3\@s .uk-panel:not(.uk-text-lead) > p{
  font-size:17px; line-height:1.75; color:rgba(255,255,255,.8);
  max-width:62ch; margin:0 0 1.1em;
}
.uk-width-2-3\@s .uk-panel > p strong,
.uk-width-2-3\@s .uk-panel > p b{ color:#fff; font-weight:600; }
.uk-width-2-3\@s .uk-panel > p:empty{ display:none; }
@media (max-width:639px){
  .uk-width-2-3\@s .uk-panel > p:not(:only-child),
  .uk-width-2-3\@s .uk-panel:not(.uk-text-lead) > p{ font-size:16px; line-height:1.7; }
}

/* grassetti che diventano rossi scorrendo (js/custom.js) */
.dare-accendibile{ transition:color .9s ease; }
.uk-width-2-3\@s .uk-panel > p .dare-acceso{ color:#F62423; }
@media (prefers-reduced-motion:reduce){ .dare-accendibile{ transition:none; } }

/* titolo grande delle pagine settore su computer: Montserrat è largo, il titolo
   si stringe con lo schermo per restare nella sua colonna (2/3) */
@media (min-width:960px){
  .uk-width-2-3\@m > h1.uk-heading-large{ font-size:min(96px,5.1vw); }
}

/* menu in alto che segue lo scorrimento: fondo scuro, così non si sovrappone ai testi */
.tm-header .uk-sticky-below .uk-navbar-container,
.tm-header-mobile .uk-sticky-below .uk-navbar-container{
  background:rgba(24,24,24,.94) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background-color .3s ease;
}

/* titolo grande delle pagine settore: centrato anche su computer, & in mezzo alle due righe */
.uk-width-2-3\@m > h1.uk-heading-large{ text-align:center !important; }
/* telefono, menu che segue lo scorrimento: icone e cavallino chiari sul fondo scuro */
.tm-header-mobile .uk-sticky-below .uk-navbar-toggle,
.tm-header-mobile .uk-sticky-below .uk-navbar-toggle:hover{ color:#fff !important; }
.tm-header-mobile .uk-sticky-below .uk-logo img:not(.uk-logo-inverse){ filter:invert(1); }
.tm-header-mobile .uk-sticky-below .mod-languages a{ color:rgba(255,255,255,.65) !important; }
.tm-header-mobile .uk-sticky-below .mod-languages .uk-active a{ color:#fff !important; }

/* cerchio «Contatti» a metà della pagina Automotive (solo schermi grandi): tolto,
   resta solo quello in fondo alla pagina */
.uk-width-2-3\@s > .uk-panel > .uk-position-absolute.uk-visible\@l{ display:none !important; }

/* pagine settore: titolo grande al centro del video (colonna a tutta larghezza) */
@media (min-width:960px){
  .uk-grid > .uk-width-2-3\@m:has(> h1.uk-heading-large){ width:100% !important; }
  .uk-grid > .uk-width-2-3\@m:has(> h1.uk-heading-large) + .uk-width-1-3\@m{ display:none; }
  .uk-width-2-3\@m > h1.uk-heading-large{ font-size:min(96px,6.5vw); }
}

/* sezione finale «Lavoriamo insieme»: tutto centrato */
.uk-section:has(.uk-container-expand .uk-card-primary) .uk-width-expand\@m,
.uk-section:has(.uk-container-expand .uk-card-primary) .uk-width-expand\@m *{ text-align:center !important; }
.uk-section:has(.uk-container-expand .uk-card-primary) .uk-width-expand\@m > *{ margin-left:auto !important; margin-right:auto !important; }

/* pagine settore: linea verticale decorativa accanto agli elenchi, tolta */
.uk-section-secondary .uk-divider-vertical.uk-position-absolute{ display:none; }


/* Home: marchio DARE PRODUCTION sul video (al posto della scritta piccola rossa) */
.dare-marchio{ display:inline-block; text-align:center; line-height:1; text-transform:uppercase;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  text-shadow:0 2px 24px rgba(0,0,0,.35); }
.dare-marchio-1,.dare-marchio-2{ display:inline; font-size:clamp(22px,3.2vw,46px); line-height:1; letter-spacing:.04em; }
.dare-marchio-1{ font-weight:700; color:#fff; }
.dare-marchio-2{ font-weight:300; color:#F62423; margin-left:.3em; }
.dare-marchio-2::after{ margin:0 0 .2em .4em; }
/* mentre il video della Home si carica il fondo è scuro, così DARE si legge subito */
.uk-section:has(.dare-marchio){ background-color:#1c1c1c; }

/* computer, menu che segue lo scorrimento: scritte e cavallino chiari sul fondo scuro
   (sopra le sezioni bianche il tema li metteva scuri) */
.tm-header .uk-sticky-below .uk-navbar-nav > li > a,
.tm-header .uk-sticky-below .uk-navbar-toggle,
.tm-header .uk-sticky-below .mod-languages a{ color:rgba(255,255,255,.82) !important; }
.tm-header .uk-sticky-below .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-sticky-below .uk-navbar-nav > li > a:hover{ color:#F62423 !important; }
.tm-header .uk-sticky-below .mod-languages .uk-active a{ color:#fff !important; }
.tm-header .uk-sticky-below .uk-logo img:not(.uk-logo-inverse){ filter:invert(1); }
.tm-header .uk-sticky-below .uk-logo:has(.uk-logo-inverse) img:not(.uk-logo-inverse){ display:none; }
.tm-header .uk-sticky-below .uk-logo .uk-logo-inverse{ display:inline-block !important; filter:none; }

/* piè di pagina (dati TAJ GROUP) al centro */
#module-90 .uk-text-right\@l, #module-90 .uk-text-right\@l *{ text-align:center !important; }

/* Home, testo «Telling stories…»: stessa impostazione dei testi delle pagine settore
   (fondo scuro, caratteri chiari 17 px, grassetti bianchi che diventano rossi scorrendo) */
.uk-section:has(h2.uk-h1.uk-text-left){ background-color:#1c1c1c !important; }
.uk-section:has(h2.uk-h1.uk-text-left) h2.uk-h1{ color:#fff; }
.uk-section:has(h2.uk-h1.uk-text-left) .uk-panel > p{
  font-size:17px; line-height:1.75; color:rgba(255,255,255,.8); max-width:62ch; margin:0 0 1.1em;
}
.uk-section:has(h2.uk-h1.uk-text-left) .uk-panel > p strong{ color:#fff; font-weight:600; }
.uk-section:has(h2.uk-h1.uk-text-left) .uk-panel > p .dare-acceso{ color:#F62423; }
.uk-section:has(h2.uk-h1.uk-text-left) .uk-panel > p:empty{ display:none; }
@media (max-width:639px){ .uk-section:has(h2.uk-h1.uk-text-left) .uk-panel > p{ font-size:16px; line-height:1.7; } }