frutjam/dist/components/header.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.header-fixed{position:fixed;inset-inline:0}.header{--header-bg:var(--color-base);--header-border-color:var(--color-base-soft);--header-shadow:none;--header-blur:0px;--header-height:3.5rem;--header-padding-block:0.5rem;position:relative;inset-block-start:0;z-index:999;width:100%;height:var(--header-height);background-color:var(--header-bg);border-block-end:1px solid var(--header-border-color);box-shadow:var(--header-shadow);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease}.header-sticky{position:sticky}.header-center{grid-column:2;justify-content:center}.header-center,.header-end{display:flex;align-items:center;gap:.75rem}.header-end{grid-column:3;justify-content:flex-end}.header-start{grid-column:1;display:flex;align-items:center;gap:.75rem}.header-content{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;width:100%;height:100%;padding-inline:1rem;padding-block:var(--header-padding-block,.5rem);margin-inline:auto;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.header-solid{--header-bg:var(--color-base);--header-border-color:var(--color-base-soft);--header-shadow:0 1px 8px oklch(0% 0 0/8%)}.header-blur{--header-blur:12px;--header-bg:var(--color-base);@supports (color:color-mix(in lab,red,red)){--header-bg:color-mix(in oklch,var(--color-base) 80%,transparent)}}.header-lg{--header-height:4.5rem;--header-padding-block:0.75rem}.header-shadow{--header-shadow:0 1px 8px oklch(0% 0 0/8%);--header-border-color:transparent}.header-sm{--header-height:2.75rem;--header-padding-block:0.375rem}.header-transparent{--header-bg:transparent;--header-border-color:transparent}