.u-f12-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Flex Utilities */
.u-f12-flex {
display: flex !important;
}
.u-f12-flex-wrap {
flex-wrap: wrap !important;
}
.u-f12-items-start {
align-items: flex-start !important;
}
.u-f12-items-center {
align-items: center !important;
}
.u-f12-justify-between {
justify-content: space-between !important;
}
.u-f12-self-end {
align-self: flex-end !important;
}
.u-f12-shrink-0 {
flex-shrink: 0 !important;
}
.u-f12-gap-2 {
gap: var(--f12-space-2) !important;
}
.u-f12-gap-4 {
gap: var(--f12-space-4) !important;
}
.u-f12-gap-6 {
gap: var(--f12-space-6) !important;
}
.u-f12-gap-8 {
gap: var(--f12-space-8) !important;
}
.u-f12-gap-10 {
gap: var(--f12-space-10) !important;
}
.u-f12-gap-12 {
gap: var(--f12-space-12) !important;
}
/* Spacing Utilities */
.u-f12-p-4 {
padding: var(--f12-space-4) !important;
}
.u-f12-p-6 {
padding: var(--f12-space-6) !important;
}
.u-f12-p-8 {
padding: var(--f12-space-8) !important;
}
.u-f12-pt-4 {
padding-top: var(--f12-space-4) !important;
}
.u-f12-pt-8 {
padding-top: var(--f12-space-8) !important;
}
.u-f12-pl-4 {
padding-left: var(--f12-space-4) !important;
}
.u-f12-mt-2 {
margin-top: var(--f12-space-2) !important;
}
.u-f12-mt-4 {
margin-top: var(--f12-space-4) !important;
}
.u-f12-mt-6 {
margin-top: var(--f12-space-6) !important;
}
.u-f12-mt-8 {
margin-top: var(--f12-space-8) !important;
}
.u-f12-mt-10 {
margin-top: var(--f12-space-10) !important;
}
.u-f12-mt-12 {
margin-top: var(--f12-space-12) !important;
}
.u-f12-badge-pop {
margin-left: 0 !important;
margin-right: calc(var(--f12-space-3) * -1) !important;
margin-top: calc(var(--f12-space-6) * -1) !important;
}
.u-f12-mb-2 {
margin-bottom: var(--f12-space-2) !important;
}
.u-f12-mb-4 {
margin-bottom: var(--f12-space-4) !important;
}
.u-f12-mb-6 {
margin-bottom: var(--f12-space-6) !important;
}
.u-f12-mb-8 {
margin-bottom: var(--f12-space-8) !important;
}
.u-f12-mb-10 {
margin-bottom: var(--f12-space-10) !important;
}
.u-f12-mb-12 {
margin-bottom: var(--f12-space-12) !important;
}
/* Typography */
.u-f12-text-sm {
font-size: var(--f12-font-size-sm) !important;
}
.u-f12-text-xl {
font-size: var(--f12-font-size-xl) !important;
}
.u-f12-tracking-caps {
letter-spacing: var(--f12-letter-spacing-caps) !important;
}
.u-f12-nowrap {
white-space: nowrap !important;
}
/* Max Width */
.u-f12-max-w-prose {
max-width: 65ch !important;
}
.u-f12-max-w-sm {
max-width: 700px !important;
}
.u-f12-max-w-md {
max-width: 800px !important;
}
.u-f12-max-w-lg {
max-width: 1028px !important;
}
/* Layout */
.u-f12-justify-center {
justify-content: center !important;
}
.u-f12-text-center {
text-align: center !important;
}
/* Margin Auto for Centering */
.u-f12-mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
/* Width */
.u-f12-w-full {
width: 100% !important;
}
/* ─── Entrance Animations ───────────────────────────────────────────────────
*
* Reusable fade-in entrance utilities for staggered page-load animations.
*
* CLASSES
* ──────────────────────────────────────────────────────────────────────────
* .f12-fade-in Opacity-only entrance. Clean, minimal.
* .f12-fade-up Opacity + 12px upward slide. Good for content blocks.
*
* CUSTOM PROPERTIES (set via inline style or parent CSS)
* ──────────────────────────────────────────────────────────────────────────
* --fade-delay Per-item delay for staggered entrance. Default: 0s
* --fade-duration Animation length. Default: 1.2s
* --fade-opacity Final resting opacity (e.g. 0.95). Default: 1
*
* USAGE — Simple (class-based)
* ──────────────────────────────────────────────────────────────────────────
* Add the class directly to elements. Control stagger via --fade-delay:
*
* Card 1
* Card 2
* Card 3
*
* Or with the slide-up variant:
*
* Title
* Body text
*
* USAGE — Combined with other animations (keyframe reference)
* ──────────────────────────────────────────────────────────────────────────
* When an element needs BOTH a fade-in AND a looping animation (e.g.
* floating, breathing), reference the @keyframes name directly in CSS
* rather than using the class. This avoids the class overriding your
* multi-animation shorthand.
*
* .my-element {
* animation: float 8s ease-in-out infinite,
* f12-fade-in 1.2s ease-out forwards;
* --fade-opacity: 0.95;
* opacity: 0;
* }
*
* The keyframes (f12-fade-in, f12-fade-up) are globally available since
* they're defined in this file.
*
* PROPERTY SEPARATION (avoiding animation conflicts)
* ──────────────────────────────────────────────────────────────────────────
* CSS animations OVERRIDE transitions on the same property. When
* combining entrance animations with hover transitions, keep each
* property in its own lane:
*
* opacity → owned by f12-fade-in (entrance)
* scale → owned by hover transition
* translate → owned by float/drift animation (if any)
* box-shadow → owned by hover transition
*
* NEVER animate the same property in both a @keyframes and a transition.
* If you do, hover effects will break intermittently.
*
* ACCESSIBILITY
* ──────────────────────────────────────────────────────────────────────────
* All animations are disabled for users with prefers-reduced-motion.
* Elements will render at their final opacity with no motion.
*
* ────────────────────────────────────────────────────────────────────────── */
.f12-fade-in,
.f12-fade-up {
opacity: 0;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-duration: var(--fade-duration, 1.2s);
animation-delay: var(--fade-delay, 0s);
}
.f12-fade-in {
animation-name: f12-fade-in;
}
.f12-fade-up {
animation-name: f12-fade-up;
}
@keyframes f12-fade-in {
from {
opacity: 0;
}
to {
opacity: var(--fade-opacity, 1);
}
}
@keyframes f12-fade-up {
from {
opacity: 0;
translate: 0 12px;
}
to {
opacity: var(--fade-opacity, 1);
translate: 0 0;
}
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
.f12-fade-in,
.f12-fade-up {
animation: none;
opacity: var(--fade-opacity, 1);
}
}