Mis trabajos

/* No tabs to click, so every folder is open and names itself. The fan behind each panel would overlap the one below it, so it goes too — what is left is three labelled grids, which is a complete catalogue. The subcategory row goes with them. Its buttons would still render and still look clickable, and nothing would ever listen: the fallback already shows every project of every category, so the filter has nothing left to do. */ [role='tablist'], [data-sub-row], [role='tabpanel'] > [aria-hidden='true'] { display: none; } /* Reopening `base` is what makes this rule land, and it is worth the sentence: Tailwind's preflight writes `[hidden]:where(…) { display: none !important }` inside `@layer base`, and for IMPORTANT declarations the cascade reverses layer order — a layered `!important` beats an unlayered one however specific. Left outside a layer this rule loses and every closed folder stays closed. Inside the same layer the two are equals again and specificity decides, which this selector wins 0-2-0 to 0-1-0. Only this rule goes in: the others have to beat `sr-only`, a normal declaration in `utilities`, which unlayered CSS already does and layered CSS would not. The skeletons and the per-subcategory empty line need nothing here. They carry plain `hidden`, that same preflight rule keeps them hidden, and neither is a state that can occur without JavaScript. */ @layer base { [role='tabpanel'][hidden] { display: block !important; } } /* A card is a <button> whose only job is to open a dialog, and nothing listens. The pointer is the only thing still promising otherwise. */ [data-project] { cursor: default; } [role='tabpanel'] { margin: 0 0 calc(var(--spacing) * 8) 0; } [role='tabpanel'] > h2 { position: static; width: auto; height: auto; margin: 0 0 calc(var(--spacing) * 3) 0; overflow: visible; clip-path: none; white-space: normal; color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-2xl); }

Mis trabajos

Branding

UI UX

Redes Sociales