CSS Essentials

.text-gradient {
  background: linear-gradient(135deg,
    var(--ce-color-primary),
    var(--ce-color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-balance {
  text-wrap: balance;
}
/* Prevents orphaned words on last line */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drop-cap::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  font-weight: 700;
  color: var(--ce-color-primary);
}

.underline-fancy {
  background-image: linear-gradient(
    var(--ce-color-accent),
    var(--ce-color-accent));
  background-size: 0% 2px;
  background-position: 0 100%;
}
.underline-fancy:hover {
  background-size: 100% 2px;
}

.font-smooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-shadow-soft {
  text-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.text-shadow-hard {
  text-shadow: 2px 2px 0 var(--ce-color-neutral-300);
}

.sr-only {
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0);
}
.prose-flow {
  max-width:65ch; line-height:1.75;
}

@keyframes ce-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fade-in {
  animation: ce-fade-in 0.5s var(--ce-ease-out) both;
}

@keyframes ce-slide-up {
  from { opacity:0; transform:translateY(1rem); }
  to   { opacity:1; transform:translateY(0); }
}
/* .animate-slide-down mirrors with -1rem */

<div class="animate-slide-left">
  Slides in from the right edge
</div>
<div class="animate-slide-right">
  Slides in from the left edge
</div>

.animate-scale {
  animation: ce-scale 0.4s
    var(--ce-ease-spring) both;
}
/* Uses spring easing for a natural bounce */

.animate-bounce {
  animation: ce-bounce 1s ease infinite;
}
.animate-pulse {
  animation: ce-pulse 2s ease-in-out infinite;
}

<i class="fa-solid fa-spinner animate-spin"></i>
/* Spins 360° continuously */

<button class="animate-shake">Error</button>
/* Quick horizontal shake */

.hover-lift {
  transition: transform 0.25s, box-shadow 0.25s;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.hover-glow:hover {
  box-shadow: 0 0 0 3px
    rgba(67, 97, 238, 0.35);
}
/* Pairs well with border-radius */

<button class="btn-base">Click Me</button>

.btn-base {
  padding: 0.6em 1.2em;
  background: var(--ce-color-primary);
  color: #fff; border-radius: 8px;
}

<span class="badge">New</span>
<span class="badge" style="background:#22c55e">
  Active
</span>

<div class="card-hover">
  <img src="..." />
  <h3>Title</h3>
  <p>Description</p>
</div>
/* Lifts -4px + shadow on hover */

<span class="tooltip"
      data-tooltip="Hello!">
  Hover me
</span>
/* No JS needed — uses ::after pseudo */

<div class="divider">OR</div>

/* Renders: ────── OR ────── */
/* Uses ::before and ::after flex lines */

<div class="skeleton"
     style="height:20px; width:60%">
</div>
/* Animates a shimmer effect across */

<img class="avatar" src="photo.jpg" />
<span class="avatar">AH</span>
/* 40px circle, object-fit cover for imgs */

<span class="pill">CSS</span>

<div style="position:relative">
  <span class="ribbon">New</span>
  Card content...
</div>

<div class="progress-bar">
  <div style="width:75%"></div>
</div>
/* Gradient fill with smooth transition */

.glass {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
}

.gradient-primary {
  background: linear-gradient(135deg,
    #4361ee, #7209b7);
}
.gradient-sunset { /* orange→pink→purple */ }
.gradient-ocean  { /* cyan→blue→indigo */ }

.shadow-soft  { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.shadow-hard  { box-shadow: 4px 4px 0 #0f172a; }
.shadow-inner { box-shadow: inset 0 2px 6px rgba(0,0,0,.1); }
.shadow-glow  { box-shadow: 0 0 20px rgba(67,97,238,.4); }

.blur-bg {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Pair with background color for glass effect */

<div class="noise-bg gradient-primary">
  Hero content here
</div>
/* ::after applies feTurbulence SVG noise */
/* Combine with any gradient background */

.border-gradient {
  border: 2px solid transparent;
  background-image:
    linear-gradient(#f1f5f9, #f1f5f9),
    linear-gradient(135deg, #4361ee, #f72585);
  background-clip: padding-box, border-box;
}

.clip-circle {
  clip-path: circle(50%);
}
.clip-polygon {
  clip-path: polygon(50% 0%, 100% 38%,
    82% 100%, 18% 100%, 0% 38%);
}

<img class="filter-grayscale" src="..." />
/* Grayscale by default, color on hover */

.filter-grayscale {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.filter-grayscale:hover { filter: grayscale(0%); }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

<div class="flex-between stack-mobile">
  <div>Left</div>
  <div>Right</div>
</div>
/* Row on desktop, column on mobile */

@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center !important;
  }
}

@container (max-width: 400px) {
  .cq-stack { flex-direction: column; }
  .cq-hide  { display: none; }
}
@container (min-width: 600px) {
  .cq-grid { display:grid; grid-template-columns:repeat(2,1fr); }
}

--ce-space-xs:  clamp(0.25rem, 0.5vw, 0.375rem);
--ce-space-sm:  clamp(0.5rem, 1vw, 0.75rem);
--ce-space-md:  clamp(0.75rem, 1.5vw, 1rem);
--ce-space-lg:  clamp(1rem, 2vw, 1.5rem);
--ce-space-xl:  clamp(1.5rem, 3vw, 2rem);
--ce-space-2xl: clamp(2rem, 4vw, 3rem);

--ce-color-primary:      #4361ee;
--ce-color-primary-light: #6b83f2;
--ce-color-primary-dark:  #2a46d1;
--ce-color-secondary:    #7209b7;
--ce-color-accent:       #f72585;
--ce-color-success:      #22c55e;
--ce-color-warning:      #eab308;
--ce-color-danger:       #ef4444;

--ce-color-neutral-100: #f1f5f9; /* bg */
--ce-color-neutral-300: #cbd5e1; /* border */
--ce-color-neutral-500: #64748b; /* muted text */
--ce-color-neutral-700: #334155; /* body text */
--ce-color-neutral-900: #0f172a; /* headings */

--ce-space-xs:  clamp(0.25rem, 0.5vw, 0.375rem);
--ce-space-sm:  clamp(0.5rem, 1vw, 0.75rem);
--ce-space-md:  clamp(0.75rem, 1.5vw, 1rem);
--ce-space-lg:  clamp(1rem, 2vw, 1.5rem);
--ce-space-xl:  clamp(1.5rem, 3vw, 2rem);
--ce-space-2xl: clamp(2rem, 4vw, 3rem);
--ce-space-3xl: clamp(3rem, 6vw, 4.5rem);

--ce-radius-sm:   4px;    /* subtle */
--ce-radius-md:   8px;    /* default */
--ce-radius-lg:   12px;   /* cards */
--ce-radius-full: 9999px; /* pill/circle */

--ce-font-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
--ce-font-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
--ce-font-md: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
--ce-font-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
--ce-font-xl: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);

--ce-z-base:     1;    /* default */
--ce-z-dropdown: 100;  /* menus */
--ce-z-sticky:   200;  /* fixed nav */
--ce-z-overlay:  300;  /* backdrops */
--ce-z-modal:    400;  /* dialogs */

--ce-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
--ce-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ce-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Usage: transition: all 0.3s var(--ce-ease-out); */

/* your-theme.css */
:root {
  --ce-color-primary: #059669;
  --ce-color-accent:  #d946ef;
  --ce-radius-md:     16px;
}
/* All components update automatically */