/* ============================= File: /assets/styles.css Description: Global theme vars + button components ============================= */ /* ---- Default fallbacks (in case no theme class is present) ---- */ :root { --btn-bg: #eab308; /* yellow-500 */ --btn-bg-hover: #ca8a04; /* yellow-600 */ --btn-text: #0b0b0b; /* near-black for legibility on yellow */ --btn-ring: rgba(234,179,8,.45); --subtle-bg: rgba(255,255,255,.08); --subtle-bg-hover: rgba(255,255,255,.14); --soft-bg: rgba(234,179,8,.15); --soft-bg-hover: rgba(234,179,8,.25); --outline-text: #eab308; } /* ---- Theme palettes (switched by ) ---- */ .theme-yellow { --btn-bg: #eab308; --btn-bg-hover: #ca8a04; --btn-text: #0b0b0b; --btn-ring: rgba(234,179,8,.45); --subtle-bg: rgba(255,255,255,.08); --subtle-bg-hover: rgba(255,255,255,.14); --soft-bg: rgba(234,179,8,.15); --soft-bg-hover: rgba(234,179,8,.25); --outline-text: #eab308; } .theme-green { --btn-bg: #15803d; /* green-700 */ --btn-bg-hover: #166534; /* green-800 */ --btn-text: #ffffff; --btn-ring: rgba(34,197,94,.45); --subtle-bg: rgba(255,255,255,.08); --subtle-bg-hover: rgba(255,255,255,.14); --soft-bg: rgba(34,197,94,.18); --soft-bg-hover: rgba(34,197,94,.26); --outline-text: #22c55e; } .theme-blue { --btn-bg: #2563eb; /* blue-600 */ --btn-bg-hover: #1d4ed8; /* blue-700 */ --btn-text: #ffffff; --btn-ring: rgba(96,165,250,.45); --subtle-bg: rgba(255,255,255,.08); --subtle-bg-hover: rgba(255,255,255,.14); --soft-bg: rgba(59,130,246,.18); --soft-bg-hover: rgba(59,130,246,.26); --outline-text: #60a5fa; } /* ---- Button primitives (semantic, not tied to page context) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; border-radius: .75rem; border: 1px solid transparent; background: var(--btn-bg); color: var(--btn-text); font-weight: 600; line-height: 1.25; box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease; } .btn:hover { background: var(--btn-bg-hover); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-ring); } /* Variants */ .btn-subtle { background: var(--subtle-bg); color: #fff; border-color: transparent; } .btn-subtle:hover { background: var(--subtle-bg-hover); } .btn-soft { background: var(--soft-bg); color: #fff; } .btn-soft:hover { background: var(--soft-bg-hover); } .btn-outline { background: transparent; color: var(--outline-text); border-color: var(--outline-text); } .btn-outline:hover { background: color-mix(in oklab, var(--outline-text) 14%, transparent); } .btn-danger { background: #dc2626; /* red-600 */ color: #fff; } .btn-danger:hover { background: #b91c1c; } /* red-700 */ /* Ghost/link styles for low emphasis actions */ .btn-ghost { background: transparent; color: var(--outline-text); border-color: transparent; } .btn-ghost:hover { background: var(--subtle-bg); } .btn-link { background: transparent; color: var(--outline-text); border: 1px solid transparent !important; text-decoration: underline; text-underline-offset: 4px; padding: 0; box-shadow: none; } .btn-link:hover { opacity: .9; } /* Sizes + shapes */ .btn-sm { padding: .375rem .75rem; font-size: .875rem; } .btn-lg { padding: .75rem 1.25rem; font-size: 1rem; } .btn-pill { border-radius: 9999px; } /* Optional: icon sizing helper (SVGs) */ .btn > svg { width: 1.05em; height: 1.05em; } /* Utility: full-width button if needed */ .btn-block { display: inline-flex; width: 100%; } /* ---- Non-button helpers tied to theme vars (optional) ---- */ .badge-soft { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: 9999px; background: var(--soft-bg); color: #fff; font-weight: 600; font-size: .75rem; } /* Define basic resource card styling (no glow here) */ .resource-card { background-color: var(--btn-bg); /* Apply the primary background color */ border: 1px solid var(--outline-text); /* Use the outline color */ box-shadow: none; /* No glow by default */ } /* Hover effect for normal resource cards */ .resource-card:hover { box-shadow: 0 4px 6px rgba(var(--primary-color-rgb), 0.3), 0 0 10px rgba(var(--primary-color-rgb), 0.5); /* Slight glow on hover */ } /* Featured pill with primary color styling */ .resource-card-featured { border-color: var(--btn-ring); /* Use the ring color */ box-shadow: 0 0 10px var(--btn-ring); /* Apply additional glow or shadow for featured */ color: white; /* Set text color to white */ } .resource-card-featured:hover { background: darken(var(--primary-color), 10%); /* Darker on hover */ box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.3); color: white; /* Ensure text stays white on hover */ } /* Optional: Apply more pronounced glow effect when featured card is active */ .resource-card-featured:active { box-shadow: 0 0 25px rgba(var(--primary-color-rgb), 0.7); /* Stronger glow when active */ }