/* Resadasile Riparazione — site styles Palette, font, radius/shadow/button overrides per framework contract. @theme tokens live inline in each page's ; this file holds anything that can't be expressed as a Tailwind utility class. */ html { scroll-behavior: smooth; } body { background-color: var(--color-background); color: var(--color-text-primary); font-family: var(--font-body); } h1, h2, h3, h4, .font-display { font-family: var(--font-display); } /* ---------- Border-radius family: pill-everywhere ---------- */ .btn, button.btn, a.btn { border-radius: 9999px; } .card { border-radius: 24px; } input, select, textarea { border-radius: 12px; } img, .img-rounded { border-radius: 16px; } /* ---------- Shadow family: lifted-blurry ---------- */ .card { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } .btn { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } /* ---------- Button + form family: rounded-solid ---------- */ .btn-primary { background-color: var(--color-primary); color: #ffffff; border: none; border-radius: 8px; padding: 0.85rem 1.9rem; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s ease, transform 0.15s ease; } .btn-primary:hover { background-color: var(--color-primary-dark); } .btn-outline { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 8px; padding: 0.8rem 1.85rem; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, color 0.2s ease; } .btn-outline:hover { background-color: var(--color-primary); color: #ffffff; } input, select, textarea { border: 2px solid var(--color-surface); background-color: #ffffff; padding: 0.7rem 1rem; color: var(--color-text-primary); font-family: var(--font-body); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); } /* ---------- Distinctive border accent (creative constraint #2) ---------- */ .accent-border-left { border-left: 4px solid var(--color-accent); } .accent-divider { width: 64px; height: 4px; background-color: var(--color-accent); border-radius: 9999px; } .accent-ring { outline: 2px solid var(--color-accent); outline-offset: 6px; } /* ---------- Nav: sticky-shrink ---------- */ #site-nav { transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } #site-nav.nav-shrink { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } #site-nav .logo-mark { transition: height 0.25s ease, width 0.25s ease; } /* ---------- Cookie banner ---------- */ #cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; max-width: 640px; margin: 0 auto; } #cookie-banner.hidden-banner { display: none; } /* ---------- Hero entrance (initial state before anime.js runs) ---------- */ .hero h1, .hero p { opacity: 0; }