/* ========================================================================= new ways of marketing — styles Versione leggibile (non minificata). Regole e ordine invariati. ========================================================================= */ /* ---------- Variabili / tema ---------- */ :root { --bg: #0f241c; --cream: #f4ead6; --green: #01abaa; --lime: #fedc3d; --ink: #10251d; --glass: rgba(16, 36, 29, .42); --line: rgba(244, 234, 214, .28); } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: auto; background: var(--bg); color: var(--cream); } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; } /* In WordPress il tema/Elementor applica color+font sul `body` e, caricandosi dopo styles.css, vincerebbe su html{color}. Qui li riaffermiamo con specificità maggiore (body.nwom2026 > body) così il testo resta crema. In locale la classe non c'è sul , quindi questa regola non disturba. */ body.nwom2026 { color: var(--cream); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.ready .panel { opacity: 1; } /* ---------- Skip link (accessibilità) ---------- */ .skip { position: fixed; top: 10px; left: 10px; z-index: 50; transform: translateY(-150%); background: var(--cream); color: var(--ink); padding: 10px 12px; border-radius: 999px; } .skip:focus { transform: none; } /* ---------- Video di sfondo ---------- */ .video-stage { position: fixed; inset: 0; /* z-index 0 (non negativo): in WordPress uno sfondo opaco di un antenato coprirebbe gli z-index negativi e nasconderebbe video + fallback. I contenuti hanno z-index >= 1, quindi restano comunque sopra. */ z-index: 0; /* Fallback img: se il video non carica resta visibile questa immagine. Path relativo al file CSS → nwom2026/assets/images/01.jpg */ background: #07130f url("assets/images/01.jpg") center / cover no-repeat; overflow: hidden; } .scroll-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.05) contrast(1.02); transform: scale(1.01); } .video-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0) 0 35%, rgba(0, 0, 0, .42) 84%), linear-gradient(180deg, rgba(7, 19, 15, .35), rgba(7, 19, 15, .16) 40%, rgba(7, 19, 15, .72)); } .grain { position: absolute; inset: -40%; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); animation: grain 7s steps(9) infinite; } @keyframes grain { to { transform: translate3d(10%, 6%, 0); } } /* ---------- Topbar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 16px; color: var(--cream); mix-blend-mode: normal; } .brandmark { font-weight: 800; letter-spacing: 0px; /*-0.055em;*/ line-height: .86; text-transform: lowercase; font-size: 20px; } /* La CTA "Guarda l'agenda" e' la stessa pillola della .top-cta (con in piu' l'icona): condividono queste regole, cosi' restano allineate. La variante `body.nwom2026` serve a battere il kit Elementor sui