/** * Òptica Pardo — Estils base * Només allò transversal: reset lleuger, tipografia global, botons. * Tot allò específic d'un component viu al CSS del component SDC. */ /* Fonts: afegir al via html.html.twig o mòdul de fonts: https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } img { max-width: 100%; height: auto; display: block; } body { font-family: var(--op-font-body); font-size: var(--op-text-base); line-height: 1.6; color: var(--op-ink); background: var(--op-surface); } h1, h2, h3, h4 { font-family: var(--op-font-display); line-height: 1.2; } a { color: var(--op-brand-dark); } /* Contenidor */ .op-wrap { max-width: var(--op-maxw); margin-inline: auto; padding-inline: 24px; } /* Eyebrow (etiqueta petita sobre títols) */ .op-eyebrow { font-family: var(--op-font-display); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--op-brand-dark); } /* Botons */ .op-btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--op-font-display); font-weight: 600; font-size: .95rem; padding: .85em 1.9em; border-radius: 999px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .op-btn:focus-visible { outline: 3px solid var(--op-brand-dark); outline-offset: 3px; } .op-btn--primary { background: var(--op-brand); color: #fff; } .op-btn--primary:hover { background: var(--op-brand-dark); transform: translateY(-2px); box-shadow: var(--op-shadow-hover); } .op-btn--outline { border-color: var(--op-ink); color: var(--op-ink); } .op-btn--outline:hover { background: var(--op-ink); color: #fff; } .op-btn--whatsapp { background: var(--op-whatsapp); color: #fff; } .op-btn--whatsapp:hover { filter: brightness(.92); transform: translateY(-2px); } /* Targeta genèrica */ .op-card { background: var(--op-surface); border-radius: var(--op-radius); box-shadow: var(--op-shadow); transition: transform .18s ease, box-shadow .18s ease; } .op-card:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-hover); } @media (prefers-reduced-motion: reduce) { .op-btn, .op-card { transition: none; } .op-btn:hover, .op-card:hover { transform: none; } }