/* ========================================================================== dilan-bk / base Reset, tipografia di default, layout primitives, motion. Richiede tokens.css. ========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); color: var(--dark); background: var(--white); line-height: var(--leading-normal); } h1, h2, h3 { font-family: var(--font-display); color: var(--black); line-height: var(--leading-tight); } p { font-family: var(--font-body); font-weight: 300; color: var(--mid); line-height: var(--leading-relaxed); font-size: var(--text-base); } /* Evidenziatore inline */ .hl { color: var(--black); font-weight: 500; } /* --- Layout primitives ---------------------------------------------------- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--padding-x); } section { padding: var(--section-y) 0; } /* Etichetta di sezione, maiuscoletto grigio */ .section-title { font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; color: var(--gray); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-10); } /* Titolo di blocco, più grande */ .section-heading { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--black); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-12); line-height: 1.2; } /* --- Motion --------------------------------------------------------------- */ /* I .reveal partono nascosti SOLO se ds.js è vivo: la classe .ds-js viene messa sull' dallo script. Se il JS non parte o è bloccato, il contenuto resta visibile invece di sparire per sempre. */ .ds-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease; } .ds-js .reveal.revealed { opacity: 1; transform: translateY(0); } /* Stagger: applica a un contenitore per scalare i figli .reveal */ .stagger > .reveal:nth-child(2) { transition-delay: 0.08s; } .stagger > .reveal:nth-child(3) { transition-delay: 0.16s; } .stagger > .reveal:nth-child(4) { transition-delay: 0.24s; } .stagger > .reveal:nth-child(5) { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .ds-js .reveal { opacity: 1; transform: none; transition: none; } }