*
*/
.dims-t {
--w: auto; /* Default value for width */
--h: auto; /* Default value for height */
width: var(--w);
height: var(--h);
}
/**
* Aspect Ratio Container
*/
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
/**
* Scroll Snap
* Utilities for scroll snapping behavior
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
*/
/* Container */
.ss-y {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100dvh;
}
.ss-x {
scroll-snap-type: x mandatory;
overflow-x: scroll;
width: 100vw;
}
/* Optional snap instead of mandatory */
.ss-y-proximity {
scroll-snap-type: y proximity;
overflow-y: scroll;
}
.ss-x-proximity {
scroll-snap-type: x proximity;
overflow-x: scroll;
}
/* Child elements */
.ss-start {
scroll-snap-align: start;
}
.ss-center {
scroll-snap-align: center;
}
.ss-end {
scroll-snap-align: end;
}
/* Stop points */
.ss-stop {
scroll-snap-stop: always;
}
/**
* Grid Utilities
* Common grid patterns
*/
.grid {
display: grid;
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.gap-1 {
gap: 1rem;
}
.gap-2 {
gap: 2rem;
}
.gap-3 {
gap: 3rem;
}
/**
* Container Queries
* Modern container query utilities
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
*/
.container {
container-type: inline-size;
}
@container (min-width: $bp-ns) {
.cols-2\@sm {
columns: 2;
}
}
/**
* Backdrop Filter
* Modern glass-like effects
*/
.glass {
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.5);
}
.glass-dark {
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.5);
}
/**
* Writing Modes
* For vertical text and other writing directions
*/
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
writing-mode: vertical-lr;
}
/**
* Scrollbar Customization
* Hide scrollbars while maintaining functionality
*/
.scrollbar-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/**
* Scroll Prevention
*/
.noscroll {
height: 100%;
overflow: hidden;
}
/**
* Smooth Scroll
* Enable smooth scrolling on containers
*/
.scroll-smooth {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/**
* Clamp Text
* Truncate text with ellipsis after n lines
*/
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/**
* Aspect Ratios
* Common aspect ratio utilities
*/
.aspect-square {
aspect-ratio: 1/1;
}
.aspect-video {
aspect-ratio: 16/9;
}
.aspect-portrait {
aspect-ratio: 3/4;
}
/**
* Focus Styles
* Better focus indicators for accessibility
*/
.focus-ring:focus-visible {
outline: 2px solid var(--hl);
outline-offset: 2px;
}
/**
* Visibility
*/
/**
* Print Styles
* Hide elements when printing
*/
@media print {
.no-print {
display: none !important;
}
}
/*****************************************************************************
* Effects & Animations
* 💨
*****************************************************************************/
/**
* Transitions
*/
.fade-in {
opacity: 1;
transition: opacity 1s ease-out;
}
.fade-in.htmx-settling {
opacity: 0;
}
/**
* Mix Blend Modes
*/
.mxb-m {
mix-blend-mode: multiply;
}
.mxb-d {
mix-blend-mode: difference;
}
.mxb-s {
mix-blend-mode: screen;
}
.mxb-hl {
mix-blend-mode: hard-light;
}
/**
* Shadows
*/
.shadow {
box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.1);
}
.shadow-6 {
box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.6);
}
.shadow-7 {
box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, 0.1);
}
/*****************************************************************************
* Object Fit
* 🖼️
*****************************************************************************/
/**
* Object Fit & Position
* Utilities for controlling how replaced elements are sized and positioned
*/
.obf-fill {
object-fit: fill;
}
@media screen and (min-width: 30em) {
.obf-fill-ns {
object-fit: fill;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-fill-m {
object-fit: fill;
}
}
@media screen and (min-width: 90em) {
.obf-fill-l {
object-fit: fill;
}
}
.obf-contain {
object-fit: contain;
}
@media screen and (min-width: 30em) {
.obf-contain-ns {
object-fit: contain;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-contain-m {
object-fit: contain;
}
}
@media screen and (min-width: 90em) {
.obf-contain-l {
object-fit: contain;
}
}
.obf-cover {
object-fit: cover;
}
@media screen and (min-width: 30em) {
.obf-cover-ns {
object-fit: cover;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-cover-m {
object-fit: cover;
}
}
@media screen and (min-width: 90em) {
.obf-cover-l {
object-fit: cover;
}
}
.obf-none {
object-fit: none;
}
@media screen and (min-width: 30em) {
.obf-none-ns {
object-fit: none;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-none-m {
object-fit: none;
}
}
@media screen and (min-width: 90em) {
.obf-none-l {
object-fit: none;
}
}
.obf-scale-down {
object-fit: scale-down;
}
@media screen and (min-width: 30em) {
.obf-scale-down-ns {
object-fit: scale-down;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-scale-down-m {
object-fit: scale-down;
}
}
@media screen and (min-width: 90em) {
.obf-scale-down-l {
object-fit: scale-down;
}
}
.obf-center {
object-position: center center;
}
@media screen and (min-width: 30em) {
.obf-center-ns {
object-position: center center;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-center-m {
object-position: center center;
}
}
@media screen and (min-width: 90em) {
.obf-center-l {
object-position: center center;
}
}
.obf-top {
object-position: top center;
}
@media screen and (min-width: 30em) {
.obf-top-ns {
object-position: top center;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-top-m {
object-position: top center;
}
}
@media screen and (min-width: 90em) {
.obf-top-l {
object-position: top center;
}
}
.obf-right {
object-position: center right;
}
@media screen and (min-width: 30em) {
.obf-right-ns {
object-position: center right;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-right-m {
object-position: center right;
}
}
@media screen and (min-width: 90em) {
.obf-right-l {
object-position: center right;
}
}
.obf-bottom {
object-position: bottom center;
}
@media screen and (min-width: 30em) {
.obf-bottom-ns {
object-position: bottom center;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-bottom-m {
object-position: bottom center;
}
}
@media screen and (min-width: 90em) {
.obf-bottom-l {
object-position: bottom center;
}
}
.obf-left {
object-position: center left;
}
@media screen and (min-width: 30em) {
.obf-left-ns {
object-position: center left;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-left-m {
object-position: center left;
}
}
@media screen and (min-width: 90em) {
.obf-left-l {
object-position: center left;
}
}
/*****************************************************************************
* States & Interactions
* 🔘
*****************************************************************************/
/**
* Cursor States
*/
.cursor-zi {
cursor: zoom-in;
}
.cursor-pointer {
cursor: pointer;
}
.no-pointer-events {
pointer-events: none;
}
/**
* Drag & Selection Prevention
* Prevents users from dragging elements or selecting text
* Useful for images and UI elements that shouldn't be interactive
*/
.no-select {
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
/**
* Disabled State
*/
.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/**
* Visibility
*/
.hide {
visibility: hidden;
}
@media screen and (max-width: 30em) {
.hide-sm {
visibility: hidden;
}
}
@media screen and (min-width: 30em) {
.hide-ns {
visibility: hidden;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.hide-m {
visibility: hidden;
}
}
@media screen and (min-width: 90em) {
.hide-l {
visibility: hidden;
}
}
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
white-space: nowrap !important;
}
/* Small Screen Utilities */
@media screen and (max-width: 30em) {
.dn-sm {
display: none;
}
}
p:first-of-type,
h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type,
h5:first-of-type,
h6:first-of-type,
ul:first-of-type,
ol:first-of-type {
margin-top: 0;
}