/* === Clean, no-build CSS for shared PHP hosting === - Keeps your design tokens - Provides utility mappings for bg-*/text-*/border-* - Adds title fade animation (.title-fade) - No @import, @apply, or @theme */ /* Design tokens (light) */ :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } /* Dark mode token override (add class="dark" on or ) */ .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } /* Base */ * { box-sizing: border-box; } html, body { height: 100%; } body { background-color: var(--background); color: var(--foreground); margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; } /* Utility mappings so Tailwind-like color classes work without a build */ .bg-background { background-color: var(--background) !important; } .text-foreground { color: var(--foreground) !important; } .bg-card { background-color: var(--card) !important; } .text-card-foreground { color: var(--card-foreground) !important; } .bg-popover { background-color: var(--popover) !important; } .text-popover-foreground { color: var(--popover-foreground) !important; } .bg-primary { background-color: var(--primary) !important; } .text-primary-foreground { color: var(--primary-foreground) !important; } .bg-secondary { background-color: var(--secondary) !important; } .text-secondary-foreground { color: var(--secondary-foreground) !important; } .bg-muted { background-color: var(--muted) !important; } .text-muted-foreground { color: var(--muted-foreground) !important; } .bg-accent { background-color: var(--accent) !important; } .text-accent-foreground { color: var(--accent-foreground) !important; } .text-destructive-foreground { color: var(--destructive-foreground) !important; } .border-border { border-color: var(--border) !important; } .input-border { border-color: var(--input) !important; } /* Radius helpers (if you need them) */ .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-md { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-xl { border-radius: var(--radius-xl) !important; } /* Focus ring approximation */ .focus-ring:focus { outline: 2px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 2px; } /* Title fade-in/out animation */ @keyframes titleFadeCycle { 0% { opacity: 0; transform: translateY(6px); } 10% { opacity: 1; transform: translateY(0); } 45% { opacity: 1; transform: translateY(0); } 55% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-4px); } } /* Apply this class to your home page H1 */ .title-fade { animation: titleFadeCycle 6s ease-in-out infinite; will-change: opacity, transform; } /* Optional: subtle card/section styling to match tokens */ .card { background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* Optional: popover/sheet base */ .popover { background-color: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-md); } /* Sidebar token helpers if you use a sidebar */ .sidebar { background-color: var(--sidebar); color: var(--sidebar-foreground); } .sidebar .sidebar-primary { background-color: var(--sidebar-primary); color: var(--sidebar-primary-foreground); } .sidebar .sidebar-accent { background-color: var(--sidebar-accent); color: var(--sidebar-accent-foreground); } .sidebar { border-color: var(--sidebar-border); } /* Tailwind-like clamp helpers (for CDN builds) */ .line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2, .line-clamp-3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-2 { -webkit-line-clamp:2; } .line-clamp-3 { -webkit-line-clamp:3; } /* Keep card content heights consistent */ .card-col { display:flex; flex-direction:column; height:100%; } .card-grow { flex:1 1 auto; } /* Tailwind-like line clamp (for CDN builds) */ .line-clamp-2, .line-clamp-3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-2 { -webkit-line-clamp:2; } .line-clamp-3 { -webkit-line-clamp:3; } .line-clamp-4 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:4; } /* rotating word in hero */ .hero-word { display: inline-grid; /* stacks children on top of each other */ position: relative; } .hero-word > span { grid-area: 1 / 1; /* all children occupy the same cell */ opacity: 0; transition: opacity .6s ease; will-change: opacity; } .hero-word > span.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero-word > span { transition: none; } } .author-card { border-color: rgba(0,0,0,.8) !important; } /* --- Shop & Discover tabs (pill style) --- */ .tabbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; border-bottom: 1px solid var(--border); padding-bottom: .25rem; } .tabbtn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; font-size: 0.9375rem; /* ~text-sm+ */ line-height: 1; border-radius: 9999px; /* pill */ border: 1px solid transparent; background: transparent; color: rgb(75 85 99); /* gray-600-ish */ transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; cursor: pointer; } .tabbtn svg { width: 18px; height: 18px; opacity: .85; } .tabbtn:hover { background: rgba(0,0,0,.03); color: rgb(31 41 55); /* gray-800-ish */ } .tabbtn[aria-selected="true"] { background: #fff; color: var(--sidebar-primary, #14532d); /* fallbacks to a green-ish */ border-color: var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.04); } .tabbtn[aria-selected="true"] svg { opacity: 1; } .tabpanels { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .tabbar{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:9999px;padding:.25rem } .tabbtn{ appearance:none;border:0;background:transparent;border-radius:9999px; padding:.5rem .875rem;font-weight:600;color:#374151; display:flex;align-items:center;gap:.5rem;justify-content:center } /* ACTIVE state */ .tabbtn[aria-selected="true"]{background:#166534;color:#fff} /* Panel container edge */ .tabpanels{border:1px solid #e5e7eb;border-top:0;border-radius:0 0 1rem 1rem;background:#fff} .cond-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border: 1px solid #cbd5e1; /* slate-300 */ border-radius: 9999px; background: #fff; font-size: 12px; line-height: 1; color: #0f172a; /* slate-900 */ position: relative; cursor: help; } /* Tooltip bubble */ .cond-chip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); min-width: 220px; max-width: 320px; padding: .5rem .6rem; border-radius: .5rem; background: #0f172a; /* dark slate */ color: #fff; font-size: 12px; line-height: 1.35; box-shadow: 0 6px 16px rgba(2,6,23,.25); opacity: 0; pointer-events: none; transition: opacity .12s ease-out; z-index: 40; white-space: normal; } /* Tooltip arrow */ .cond-chip::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f172a; opacity: 0; transition: opacity .12s ease-out; z-index: 41; } /* Show on hover/focus or when opened by JS on mobile */ .cond-chip:hover::after, .cond-chip:hover::before, .cond-chip:focus-visible::after, .cond-chip:focus-visible::before, .cond-chip[data-open="1"]::after, .cond-chip[data-open="1"]::before { opacity: 1; } .cond-guide { display: grid; grid-template-columns: 160px 1fr; gap: .5rem 1rem; align-items: start; } .cond-guide dt { font-weight: 600; color: #0f172a; } .cond-guide dd { margin: 0; color: #334155; } @media (max-width: 640px) { .cond-guide { grid-template-columns: 1fr; } } html { scroll-behavior: smooth; } /* Prevent stretched card links from swallowing button clicks */ .pr-card { position: relative; } .pr-card a.pr-stretched { position: static; } .pr-card .pr-actions { position: relative; z-index: 10; }