palina-theme/assets/css/tailwind.css

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

@custom-variant hover (&:hover);

@theme {
  /* Brand Palette: Palina Gold (#DDC288) */
  --color-brand-50: #faf8f0;
  --color-brand-100: #f4edd1;
  --color-brand-200: #e9dba4;
  --color-brand-300: #ddc277;
  --color-brand-400: #ddc288;
  --color-brand-500: #c9a765;
  --color-brand-600: #b58d46;
  --color-brand-700: #9c763a;
  --color-brand-800: #7d5e31;
  --color-brand-900: #624a29;
  --color-brand-950: #4c3a23;

  /* Font Families */
  --font-serif: "Fraunces", serif;
  --font-heading: "Fraunces", serif;
  --font-sans: "Montserrat", sans-serif;
}

/* 
   Theme Variable Definitions
   Using :root for default (Dark) and [data-theme='light'] for overrides.
*/
:root {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2a2a2a;
  --text-primary: #f2f2f2;
  --text-secondary: #a3a3a3;
  --text-tertiary: #737373;
  --brand-primary: #ddc288;
  --brand-secondary: #c9a765;
}

[data-theme='light'] {
  --bg-primary: #fdfcf9;
  --bg-secondary: #f4f1e8;
  --bg-tertiary: #e9e4d5;
  --text-primary: #2d2114;
  --text-secondary: #624a29;
  --text-tertiary: #7d5e31;
  --brand-primary: #9c763a;
  --brand-secondary: #7d5e31;
}

@layer base {
  [x-cloak] { display: none !important; }

  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--brand-primary);
    transition: color 0.3s ease;
  }
}

/* 
   Typography (Prose) Customization
   Using @utility prose to override internal Typography plugin variables
   as recommended for Tailwind CSS v4. Must be at the top level.
*/
@utility prose {
  --tw-prose-body: var(--text-primary);
  --tw-prose-headings: var(--brand-primary);
  --tw-prose-links: var(--brand-primary);
  --tw-prose-bold: var(--text-primary);
  --tw-prose-counters: var(--text-secondary);
  --tw-prose-bullets: var(--brand-primary);
  --tw-prose-hr: var(--bg-tertiary);
  --tw-prose-quotes: var(--text-primary);
  --tw-prose-quote-borders: var(--brand-primary);
  --tw-prose-captions: var(--text-secondary);
  --tw-prose-code: var(--text-primary);
  --tw-prose-pre-code: var(--text-primary);
  --tw-prose-pre-bg: var(--bg-secondary);
  --tw-prose-th-borders: var(--bg-tertiary);
  --tw-prose-td-borders: var(--bg-secondary);
  max-width: 100%;
}

@layer components {
  /* Main navigation styling */
  header nav ul.nav {
    @apply flex items-center space-x-6;
  }

  /* Mobile navigation styling */
  #mobile-menu nav ul.nav {
    @apply flex flex-col items-center space-y-10 text-4xl;
  }

  /* Footer navigation styling */
  footer nav ul.nav {
    @apply flex items-center space-x-4 text-sm tracking-wide;
  }

  footer nav ul.nav li {
    @apply flex items-center;
  }

  footer nav ul.nav li:not(:last-child)::after {
    content: "|";
    @apply ml-4 opacity-20 text-[var(--text-secondary)];
  }

  /* Navigation Links */
  .nav-link {
    @apply relative py-2 px-1 transition-all duration-300 opacity-80 hover:opacity-100 hover:text-[var(--brand-primary)];
  }

  .nav-link::after {
    content: "";
    @apply absolute bottom-0 left-0 w-full h-0.5 bg-[var(--brand-primary)] transform scale-x-0 transition-transform duration-300 ease-out origin-left;
  }

  .nav-link:hover::after,
  .nav-current .nav-link::after {
    @apply scale-x-100;
  }

  .nav-current .nav-link {
    @apply text-[var(--brand-primary)] opacity-100 font-semibold;
  }

  /* Button & Link Components */
  .btn-primary {
    @apply inline-flex items-center px-8 py-3 border border-transparent text-base font-semibold rounded-lg shadow-md 
           bg-[var(--brand-primary)] text-[var(--bg-primary)]
           hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0
           transition-all duration-300 cursor-pointer relative overflow-hidden;
  }

  .btn-primary::after {
    content: "";
    @apply absolute inset-0 bg-white opacity-0 transition-opacity duration-300;
  }

  .btn-primary:hover::after {
    @apply opacity-10;
  }

  .fancy-link {
    @apply font-medium transition-all duration-300 relative inline-block;
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    background-image: linear-gradient(var(--brand-primary), var(--brand-primary));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
  }

  .fancy-link:hover {
    @apply text-[var(--text-primary)];
    background-size: 100% 1px;
  }

  /* Specific prose element overrides for fonts and effects */
  .prose :where(h1, h2, h3, h4, h5, h6) {
    color: var(--brand-primary) !important;
    font-family: var(--font-heading);
    @apply font-bold tracking-tight transition-colors duration-300;
  }

  .prose a {
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    @apply font-medium transition-all duration-300;
    background-image: linear-gradient(var(--brand-primary), var(--brand-primary));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
  }

  .prose a:hover {
    background-size: 100% 1px;
  }

  /* Initial Letter (Drop Cap) Effect - Only on Posts */
  .post-template .post-content > p:first-of-type::first-letter {
    -webkit-initial-letter: 3 2;
    initial-letter: 3 2;
    color: var(--brand-primary);
    @apply font-serif font-bold mr-4 float-left transition-colors duration-300;
    /* Fallback for browsers that don't support initial-letter */
    @supports not (initial-letter: 3) {
      @apply text-7xl leading-[0.8] mt-2;
    }
  }

  /* Koenig Editor (Ghost) required classes */
  .kg-width-wide {
    position: relative;
    width: 85vw;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
  }

  .kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .kg-card {
    @apply mb-8;
  }

  .kg-card-caption {
    @apply text-center text-sm text-[var(--text-secondary)] mt-2;
  }
}

.site-logo {
  @apply transition-all duration-300;
  color: var(--brand-primary);
  fill: currentColor;
}

.post-grid-item {
  opacity: 0;
}

.post-grid-item.animated {
  opacity: 1;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out both;
}