/*
Theme Name: Thai Lotto Blog
Description: A modern WordPress theme for Thai lottery content using Tailwind CSS and custom styling
Author: Thai Lotto Team
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thailotto
Tags: lottery, gambling, blog, modern, responsive, tailwind, thai
*/
:root {
--primary-color: #fcc201;
--secondary-color: #cf2e2e;
--primary-light: #ffd54f;
--primary-dark: #f57f17;
--secondary-light: #ef5350;
--secondary-dark: #b71c1c;
--white: #ffffff;
--black: #000000;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--text-primary: var(--gray-900);
--text-secondary: var(--gray-600);
--text-muted: var(--gray-500);
--text-light: var(--gray-300);
--text-white: var(--white);
--bg-primary: var(--white);
--bg-secondary: var(--gray-50);
--bg-dark: var(--gray-900);
--bg-card: var(--white);
--border-color: var(--gray-200);
--border-dark: var(--gray-300);
--success-color: #10b981;
--warning-color: var(--primary-color);
--error-color: var(--secondary-color);
--info-color: #3b82f6;
--shadow-light: rgba(0, 0, 0, 0.05);
--shadow-medium: rgba(0, 0, 0, 0.1);
--shadow-dark: rgba(0, 0, 0, 0.25);
--gradient-primary: linear-gradient(
135deg,
var(--primary-color) 0%,
var(--secondary-color) 100%
);
--gradient-secondary: linear-gradient(
135deg,
var(--secondary-color) 0%,
var(--secondary-dark) 100%
);
--gradient-hero: linear-gradient(
135deg,
var(--gray-900) 0%,
var(--secondary-dark) 50%,
var(--primary-dark) 100%
);
}
* {
box-sizing: border-box;
}
body {
font-family: "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
margin: 0;
padding: 0;
color: var(--text-primary);
background-color: var(--bg-secondary);
}
.text-gradient {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bg-gradient-primary {
background: var(--gradient-primary);
}
.bg-gradient-secondary {
background: var(--gradient-secondary);
}
.bg-gradient-hero {
background: var(--gradient-hero);
}
.btn-primary {
background: var(--primary-color);
color: var(--black);
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-primary:hover {
background: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--shadow-medium);
}
.btn-secondary {
background: var(--secondary-color);
color: var(--white);
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-secondary:hover {
background: var(--secondary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--shadow-medium);
}
.btn-outline {
background: transparent;
color: var(--primary-color);
padding: 0.75rem 2rem;
border: 2px solid var(--primary-color);
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-outline:hover {
background: var(--primary-color);
color: var(--black);
transform: translateY(-2px);
}
.card {
background: var(--bg-card);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 6px var(--shadow-light);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 10px 25px var(--shadow-medium);
transform: translateY(-2px);
}
.card-header {
border-bottom: 1px solid var(--border-color);
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.card-title {
color: var(--text-primary);
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.animate-fade-in {
animation: fadeIn 0.6s ease-in-out;
}
.animate-slide-up {
animation: slideUp 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wp-block-image img {
border-radius: 0.5rem;
box-shadow: 0 4px 6px var(--shadow-light);
}
.wp-block-quote {
border-left: 4px solid var(--primary-color);
padding-left: 1rem;
margin: 1.5rem 0;
background: var(--bg-secondary);
padding: 1rem 1rem 1rem 2rem;
border-radius: 0 0.5rem 0.5rem 0;
box-shadow: 0 2px 4px var(--shadow-light);
}
.wp-block-button .wp-block-button__link {
background: var(--primary-color);
color: var(--black);
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.wp-block-button .wp-block-button__link:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--shadow-medium);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--primary-dark);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-primary);
font-weight: 700;
line-height: 1.3;
margin-bottom: 1rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}
h6 {
font-size: 1.125rem;
}
p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
input,
textarea,
select {
border: 1px solid var(--border-color);
border-radius: 0.375rem;
padding: 0.75rem;
font-family: inherit;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(252, 194, 1, 0.1);
}
@media (max-width: 640px) {
.text-5xl {
font-size: 2.5rem;
}
.text-6xl {
font-size: 3rem;
}
}
@media print {
.no-print {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.4;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.text-theme-primary {
color: var(--primary-color);
}
.text-theme-secondary {
color: var(--secondary-color);
}
.text-theme-success {
color: var(--success-color);
}
.text-theme-warning {
color: var(--warning-color);
}
.text-theme-error {
color: var(--error-color);
}
.text-theme-info {
color: var(--info-color);
}
.bg-theme-primary {
background-color: var(--primary-color);
}
.bg-theme-secondary {
background-color: var(--secondary-color);
}
.bg-theme-success {
background-color: var(--success-color);
}
.bg-theme-warning {
background-color: var(--warning-color);
}
.bg-theme-error {
background-color: var(--error-color);
}
.bg-theme-info {
background-color: var(--info-color);
}
.border-theme-primary {
border-color: var(--primary-color);
}
.border-theme-secondary {
border-color: var(--secondary-color);
}
.hover-theme-primary:hover {
color: var(--primary-color);
}
.hover-theme-secondary:hover {
color: var(--secondary-color);
}
.hover-bg-theme-primary:hover {
background-color: var(--primary-color);
}
.hover-bg-theme-secondary:hover {
background-color: var(--secondary-color);
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: var(--gray-100);
--text-secondary: var(--gray-300);
--text-muted: var(--gray-400);
--bg-primary: var(--gray-900);
--bg-secondary: var(--gray-800);
--bg-card: var(--gray-800);
--border-color: var(--gray-700);
--border-dark: var(--gray-600);
--shadow-light: rgba(0, 0, 0, 0.3);
--shadow-medium: rgba(0, 0, 0, 0.4);
}
.card {
border-color: var(--border-color);
}
}
.hidden {
display: none !important;
}
.block {
display: block !important;
}
.flex {
display: flex !important;
}
.inline-block {
display: inline-block !important;
}
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
.opacity-0 {
opacity: 0 !important;
}
.opacity-100 {
opacity: 1 !important;
}
@media (min-width: 1024px) {
.lg\:block {
display: block !important;
}
.lg\:hidden {
display: none !important;
}
.lg\:flex {
display: flex !important;
}
}
@media (max-width: 1023px) {
.lg\:block {
display: none !important;
}
.lg\:hidden {
display: block !important;
}
}
@media (max-width: 1023px) {
#mobile-menu {
transition: all 0.3s ease-in-out;
}
#mobile-menu.hidden {
display: none !important;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
}
#mobile-menu:not(.hidden) {
display: block !important;
opacity: 1;
visibility: visible;
max-height: 1000px;
}
}
@media (min-width: 1024px) {
#mobile-menu {
display: none !important;
}
.lg\\:block {
display: block !important;
}
.lg\\:hidden {
display: none !important;
}
}