/* Runatelu IT — shared styles Palette, fonts injected via @theme static in each page's . This file holds radius / shadow / button overrides that don't fit Tailwind utility classes, plus cookie-banner + nav-shrink + keyframes. */ html { scroll-behavior: smooth; } body { background-color: var(--color-background); color: var(--color-text-primary); font-family: var(--font-body); } /* ---------- Radius family: mixed-irregular ---------- */ .card-radius { border-radius: 16px; } .img-radius { border-radius: 24px; } .input-radius { border-radius: 4px; } .btn-radius { border-radius: 0; } /* ---------- Shadow family: hard-offset, brutalist ---------- */ .card-shadow { box-shadow: 4px 4px 0 var(--color-primary); } .card-shadow-accent { box-shadow: 4px 4px 0 var(--color-accent); } .card-shadow-secondary { box-shadow: 4px 4px 0 var(--color-secondary); } .btn-shadow { box-shadow: 3px 3px 0 var(--color-primary); } .btn-shadow:hover { box-shadow: none; } /* ---------- Button + form family: brutalist-thick-border ---------- */ .btn-brutalist { background-color: var(--color-surface); color: var(--color-primary); border: 3px solid var(--color-primary); border-radius: 0; box-shadow: 3px 3px 0 var(--color-primary); padding: 0.75rem 1.75rem; font-weight: 600; transition: box-shadow 0.15s ease, transform 0.15s ease; display: inline-block; } .btn-brutalist:hover { box-shadow: none; transform: translate(3px, 3px); } .input-brutalist { background-color: var(--color-background); color: var(--color-text-primary); border: 2px solid var(--color-primary); border-radius: 4px; padding: 0.6rem 0.9rem; } .input-brutalist:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* ---------- Nav sticky-shrink ---------- */ #site-nav { transition: padding 0.25s ease, box-shadow 0.25s ease; } #site-nav.nav-shrink { box-shadow: 0 2px 10px rgba(30, 24, 33, 0.12); } #site-nav .logo-mark { transition: height 0.25s ease, width 0.25s ease; } /* ---------- Cookie banner ---------- */ #cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background-color: var(--color-primary-dark); color: #fcfcfc; } #cookie-banner.hidden-banner { display: none; } @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up 0.6s ease-out both; }