justin.deal/src/styles/global.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@variant dark (&:where(.dark, .dark *));

/* Prevent theme flash by hiding content until theme is applied */
html:not(.theme-loaded) body {
  display: none;
}

/* Enhanced transitions between themes */
html.theme-loaded body {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add transition to all themed elements */
.theme-transition-element {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              fill 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Font loading states */
html:not(.fonts-loaded) body {
  /* Fallback font metrics that match your custom font */
  font-family: monospace;
}

html.fonts-loaded body {
  /* Your custom font */
  font-family: var(--font-mono);
  /* Add a subtle transition for font changes */
  transition: font-family 0.1s ease-out;
}

/* Hide elements with x-cloak until Alpine.js is loaded */
[x-cloak] {
  display: none !important;
}

/* Add keyboard focus styling for keyboard navigation */
.keyboard-focus {
  outline: 2px solid var(--color-zag-accent-dark);
  outline-offset: 2px;
}

/* Font declarations with optimized loading strategies */
@font-face {
  font-family: "Literata Variable";
  font-style: normal;
  font-display: swap; /* Use swap for text fonts */
  font-weight: 200 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/literata:vf@latest/latin-opsz-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "press-start-2p";
  font-style: normal;
  font-display: optional; /* Use optional for decorative fonts */
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff)
      format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@theme {
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "press-start-2p", ui-monospace, monospace;
  --font-serif: "Literata Variable", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  
  /* Gruvbox color mappings */
  --color-zag-dark: #282828; /* bg0 */
  --color-zag-light: #ebdbb2; /* fg */
  --color-zag-dark-muted: #928374; /* grey */
  --color-zag-light-muted: #504945; /* bg4 */
  
  --color-zag-accent-light: #b8bb26; /* primary */
  --color-zag-accent-light-muted: #a89984; /* button2 */
  --color-zag-accent-dark: #fe8019; /* secondary */
  --color-zag-accent-dark-muted: #fabd2f; /* tertiary */
  
  /* Card hover effect variables */
  --color-zag-bg: rgba(235, 219, 178, 0.8); /* Light mode card background */
  --color-zag-bg-hover: rgba(235, 219, 178, 1); /* Light mode card hover background */
  --color-zag-accent: rgba(184, 187, 38, 0.5); /* Light mode accent border */

  /* Additional special colors */
  --color-zag-button-primary: #b8bb26;
  --color-zag-button-secondary: #a89984;
  --color-zag-button-red: #fb4934;
  --color-zag-key: #fb4934;
  --color-zag-operator: #fe8019;
  --color-zag-value: #d3869b;
  --color-zag-type: #fabd2f;
  --color-zag-function: #b8bb26;
  --color-zag-string: #8ec07c;
  --color-zag-special: #83a598;
}

@layer base {
  :root {
    --zag-stroke: 2px;
    --zag-offset: 6px;
    --zag-transition-duration: 0.15s;
    --zag-transition-timing-function: ease-in-out;
  }
  
  .dark {
    --color-zag-bg: rgba(40, 40, 40, 0.8); /* Dark mode card background */
    --color-zag-bg-hover: rgba(40, 40, 40, 1); /* Dark mode card hover background */
    --color-zag-accent: rgba(254, 128, 25, 0.5); /* Dark mode accent border */
  }
  
  /* Interactive element base transitions */
  .zag-interactive {
    position: relative;
    transition: all 0.2s ease;
    transform-origin: center;
  }
  
  /* Standard hover effect for buttons and interactive elements */
  .zag-interactive:hover {
    transform: translateY(-2px);
  }
  
  /* Active/pressed state */
  .zag-interactive:active {
    transform: translateY(0);
  }
  
  /* Focus state for keyboard navigation */
  .zag-interactive:focus-visible {
    outline: 2px solid var(--color-zag-accent-dark);
    outline-offset: 2px;
  }
  
  /* Button hover effects */
  .zag-button {
    position: relative;
    overflow: hidden;
  }
  
  .zag-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  .zag-button:hover::after {
    opacity: 0.1;
  }
  
  .zag-button:active::after {
    opacity: 0.2;
  }
  
  /* Link hover effects */
  .zag-link {
    position: relative;
  }
  
  .zag-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.2s ease;
  }
  
  .zag-link:hover::after {
    width: 100%;
  }

.zag-transition {
  @media (prefers-reduced-motion: no-preference) {
    transition:
      background-color var(--zag-transition-duration) var(--zag-transition-timing-function),
      color var(--zag-transition-duration) var(--zag-transition-timing-function),
      fill var(--zag-transition-duration) var(--zag-transition-timing-function),
      border-color var(--zag-transition-duration) var(--zag-transition-timing-function),
      transform var(--zag-transition-duration) var(--zag-transition-timing-function),
      opacity var(--zag-transition-duration) var(--zag-transition-timing-function),
      box-shadow var(--zag-transition-duration) var(--zag-transition-timing-function);
  }
}

/* Theme transition animations for specific elements */
@keyframes theme-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes theme-slide-up {
  from { 
    opacity: 0.5; 
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes theme-scale-in {
  from { 
    opacity: 0.8;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

.theme-animate-fade {
  animation: theme-fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.theme-animate-slide {
  animation: theme-slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.theme-animate-scale {
  animation: theme-scale-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

  /* Base backgrounds and text */
  .zag-bg {
    background-color: var(--color-zag-light);
    :where(.dark, .dark *) & {
      background-color: var(--color-zag-dark);
    }
  }

  .-zag-bg {
    background-color: var(--color-zag-dark);
    :where(.dark, .dark *) & {
      background-color: var(--color-zag-light);
    }
  }

  .zag-text {
    color: var(--color-zag-dark);
    :where(.dark, .dark *) & {
      color: var(--color-zag-light);
    }
  }

  .-zag-text {
    color: var(--color-zag-light);
    :where(.dark, .dark *) & {
      color: var(--color-zag-dark);
    }
  }

  .zag-muted {
    color: var(--color-zag-dark-muted);
    :where(.dark, .dark *) & {
      color: var(--color-zag-light-muted);
    }
  }

  .zag-fill {
    fill: var(--color-zag-dark);
    &:where(.dark, .dark *) {
      fill: var(--color-zag-light);
    }
  }

  .zag-text-muted {
    color: var(--color-zag-dark-muted);
    &:where(.dark, .dark *) {
      color: var(--color-zag-light-muted);
    }
  }

  .zag-border-b {
    border-bottom: var(--zag-stroke) solid;
    border-color: var(--color-zag-dark);
    &:where(.dark, .dark *) {
      border-color: var(--color-zag-light);
    }
  }

  .zag-offset {
    text-underline-offset: var(--zag-offset);
  }

  .opsz {
    font-variation-settings: "opsz" 72;
  }

  /* === New accent classes === */

  .zag-button-primary {
    background-color: var(--color-zag-button-primary);
    color: var(--color-zag-dark);
  }

  .zag-button-secondary {
    background-color: var(--color-zag-button-secondary);
    color: var(--color-zag-dark);
  }

  .zag-button-red {
    background-color: var(--color-zag-button-red);
    color: var(--color-zag-dark);
  }

  .zag-special-text {
    color: var(--color-zag-special);
  }

  .zag-key {
    color: var(--color-zag-key);
  }

  .zag-operator {
    color: var(--color-zag-operator);
  }

  .zag-value {
    color: var(--color-zag-value);
  }

  .zag-type {
    color: var(--color-zag-type);
  }

  .zag-function {
    color: var(--color-zag-function);
  }

  .zag-string {
    color: var(--color-zag-string);
  }

  .zag-special {
    color: var(--color-zag-special);
  }
}