/* ============================================================= Regolamento Macchine 2027 — /regolamento-macchine-2027/ Namespace .rm- (2026-09-21). Pagina di contenuto che vende: fatti presi dal testo ufficiale, poi come lavoriamo noi. Sei parti: 0 · l'apertura: lo stesso componente di Progetti (.prj-hero) — titolo a sinistra a due toni, un bottone, a destra un numero grande e chiaro che sale. Qui sono i giorni al 20 gennaio 2027 1 · cosa cambia: quattro novita', ognuna col suo articolo accanto 2 · chi e' il costruttore: i tre casi, su fondo scuro 3 · l'archivio: le versioni del software le teniamo gia' 4 · domande: componente unico del sito, in /assets/css/faq.css 5 · il primo passo + la fonte ============================================================= */ .page-regolamento { --rm-ink: #0b1220; --rm-copy: #56627a; --rm-gray: #7b889c; --rm-muted: #64748b; --rm-accent: #2563eb; --rm-accent-ink: #1d4ed8; --rm-accent-deep: #1e3a8a; --rm-mist: #f5f5f7; --rm-night: #0a0f19; --rm-rule: rgba(15, 23, 42, 0.1); --rm-pad: clamp(96px, 11vw, 168px); --rm-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --rm-ease: cubic-bezier(0.16, 1, 0.3, 1); } .rm-wrap { width: min(100% - 40px, var(--max-width, 1200px)); margin-inline: auto; } .page-regolamento section[id] { scroll-margin-top: 56px; } .rm-eyebrow { margin: 0; color: var(--rm-accent-deep); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .rm-h2 { margin: 0.4em 0 0; color: var(--rm-ink); font-size: clamp(2.3rem, 4.6vw, 4.2rem); font-weight: 790; letter-spacing: -0.047em; line-height: 1.02; text-wrap: balance; } .rm-h2 span { display: block; color: var(--rm-gray); } .rm-link { display: inline-flex; align-items: center; gap: 5px; color: var(--rm-accent); font-size: var(--fs-caption); font-weight: 640; text-decoration: none; white-space: nowrap; } .rm-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; } .rm-link:hover { color: var(--rm-accent-ink); } .rm-link:hover svg { transform: translateX(2px); } /* comparse: solo se il JS e' vivo (html.rm-anim, rete di sicurezza nel ) */ .rm-anim .rm-in { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--rm-ease), transform 0.8s var(--rm-ease); } .rm-anim .rm-in.is-in { opacity: 1; transform: none; } /* ============================================================= 0 · APERTURA ============================================================= */ .rm-hero { display: flex; align-items: center; min-height: min(640px, calc(100svh - var(--nav-height, 58px))); padding-block: clamp(48px, 6vw, 80px); overflow: hidden; background: radial-gradient(circle at 84% 22%, rgba(37, 99, 235, 0.09), transparent 36%), linear-gradient(180deg, #edf2f9 0%, #f3f6fb 40%, #fbfcfe 78%, #ffffff 100%); } .rm-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); } .rm-hero__copy { flex: 0 1 auto; min-width: 0; } .rm-hero__title { max-width: 10.4em; margin: 0; color: var(--rm-ink); font-size: clamp(3rem, 6.2vw, 5.7rem); font-weight: 790; letter-spacing: -0.05em; line-height: 0.98; text-wrap: balance; } .rm-hero__title span { display: block; color: var(--rm-gray); } .rm-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.2vw, 44px); } /* il numero: grande e chiaro come quello di Progetti; tre cifre al massimo, cifre tabellari cosi' mentre sale non balla */ .rm-hero__metric { display: grid; flex: none; justify-items: end; margin: 0; color: rgba(30, 58, 138, 0.13); line-height: 0.76; pointer-events: none; user-select: none; } .rm-hero__metric strong { font-size: clamp(6rem, 14vw, 11.5rem); font-weight: 880; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } .rm-hero__metric em { margin: clamp(10px, 1.4vw, 20px) clamp(6px, 1vw, 14px) 0 0; color: rgba(71, 85, 105, 0.42); font-size: clamp(1.35rem, 3vw, 2.45rem); font-style: normal; font-weight: 780; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; } /* all'arrivo: il titolo sale, il numero affiora (solo se il JS e' vivo) */ .rm-anim .rm-hero__title { animation: rm-rise 1s var(--rm-ease) 0.05s both; } .rm-anim .rm-hero__actions { animation: rm-rise 1s var(--rm-ease) 0.2s both; } .rm-anim .rm-hero__metric { animation: rm-surface 1.4s var(--rm-ease) 0.15s both; } @keyframes rm-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes rm-surface { from { opacity: 0; transform: translateY(4%) scale(0.96); } to { opacity: 1; transform: none; } } /* ============================================================= 1 · COSA CAMBIA ============================================================= */ .rm-facts { padding-block: var(--rm-pad); background: #ffffff; } .rm-facts__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: start; } .rm-facts__head { position: sticky; top: calc(var(--nav-height, 58px) + 40px); } .rm-lede { margin: 24px 0 0; max-width: 38ch; color: var(--rm-copy); font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.55; } .rm-facts__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rm-rule); } .rm-fact { padding: clamp(28px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--rm-rule); } .rm-ref { margin: 0; color: var(--rm-muted); font: 500 0.74rem/1.3 var(--rm-mono); letter-spacing: 0.12em; text-transform: uppercase; } .rm-fact h3 { margin: 12px 0 0; text-wrap: balance; color: var(--rm-ink); font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.15; } .rm-fact p:not([class]) { margin: 12px 0 0; max-width: 54ch; color: var(--rm-copy); font-size: 1.06rem; line-height: 1.6; } /* ============================================================= 2 · CHI E' IL COSTRUTTORE — fondo scuro ============================================================= */ .rm-who { padding-block: var(--rm-pad); background: var(--rm-night); color: #ffffff; } .rm-who .rm-eyebrow { color: #8fb1ff; } .rm-who .rm-h2 { max-width: 16ch; color: #ffffff; } .rm-who .rm-h2 span { color: #7c8aa1; } .rm-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; list-style: none; } .rm-case { display: flex; flex-direction: column; align-items: flex-start; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .rm-case__n { margin: 0; color: #7c8aa1; font: 500 0.74rem/1.3 var(--rm-mono); letter-spacing: 0.14em; text-transform: uppercase; } .rm-case h3 { margin: 14px 0 0; text-wrap: balance; color: #ffffff; font-size: clamp(1.6rem, 2.4vw, 2.15rem); font-weight: 770; letter-spacing: -0.035em; line-height: 1.08; } .rm-case__rule { margin: 16px 0 0; color: #a6b1c2; font-size: 1.04rem; line-height: 1.6; } .rm-case__us { margin: 16px 0 0; color: #c9d2df; font-size: 1.04rem; line-height: 1.6; } .rm-case__us b { color: #ffffff; font-weight: 700; } .rm-case .rm-link { margin-top: auto; padding-top: 22px; color: #8fb1ff; } .rm-case .rm-link:hover { color: #b8ceff; } /* ============================================================= 3 · L'ARCHIVIO ============================================================= */ .rm-archive { padding-block: var(--rm-pad); background: #ffffff; } .rm-archive__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: end; } .rm-archive__title { margin: 0; color: var(--rm-ink); font-size: clamp(2.6rem, 5.6vw, 5rem); font-weight: 790; letter-spacing: -0.05em; line-height: 1; } .rm-archive__title span { display: block; color: var(--rm-gray); } .rm-archive__copy p { margin: 0; max-width: 44ch; color: var(--rm-copy); font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.6; } .rm-archive__copy .rm-link { margin-top: 20px; } /* ============================================================= 5 · IL PRIMO PASSO + FONTE ============================================================= */ .rm-cta { padding-block: var(--rm-pad) clamp(48px, 6vw, 72px); background: #ffffff; } .rm-cta__head { max-width: 960px; margin-inline: auto; text-align: center; } .rm-cta__title { margin: 0.42em 0 0; color: var(--rm-ink); font-size: clamp(2.4rem, 5.4vw, 4.7rem); font-weight: 790; letter-spacing: -0.048em; line-height: 1.02; text-wrap: balance; } .rm-cta__title span { display: block; color: var(--rm-gray); } .rm-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 44px); } .rm-cta__note { margin: 24px auto 0; max-width: 46ch; color: var(--rm-copy); line-height: 1.55; } .rm-source { margin: clamp(72px, 9vw, 120px) auto 0; padding-top: 20px; max-width: 72ch; border-top: 1px solid var(--rm-rule); color: var(--rm-muted); font-size: var(--fs-caption); line-height: 1.6; } .rm-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .rm-source a:hover { color: var(--rm-ink); } /* ============================================================= Tablet e telefono ============================================================= */ @media (max-width: 1000px) { .rm-facts__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .rm-facts__head { position: static; } .rm-cases { grid-template-columns: minmax(0, 1fr); gap: 40px; } .rm-case .rm-link { margin-top: 0; } .rm-archive__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; } } @media (max-width: 760px) { .rm-hero { align-items: flex-start; min-height: 0; padding-block: 44px 36px; } .rm-hero__inner { flex-direction: column; align-items: flex-start; gap: 16px; } .rm-hero__title { font-size: clamp(2.5rem, 11.4vw, 3.4rem); } .rm-hero__metric { justify-items: start; } .rm-hero__metric strong { font-size: clamp(5.4rem, 30vw, 8rem); } .rm-hero__metric em { margin: 8px 0 0 4px; font-size: clamp(1.05rem, 5vw, 1.4rem); } } @media (prefers-reduced-motion: reduce) { .rm-anim .rm-in { opacity: 1; transform: none; transition: none; } .rm-anim .rm-hero__title, .rm-anim .rm-hero__actions, .rm-anim .rm-hero__metric { animation: none; } .rm-link svg { transition: none; } }