/* ================================================================ changylive — main.css Design: Dark neon — mirroring changylive.net Colors driven by CSS variables (set via Customizer in ) ================================================================ */ /* ── CSS Variables (defaults — overridden by Customizer output) ─ */ :root { --neon-blue: #2d68c4; --neon-purple: #9932cc; --neon-yellow: #fff372; --neon-accent: #00ffb3; --bg: #000; --text: #fff; } /* ── Reset & Base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: #000; background-image: linear-gradient(to right, #0a0000, #0a0000), url('https://changylive.net/wp-content/uploads/2021/11/bg-slider-mobile-1.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; color: #fff; font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: #ffe500; text-decoration: none; transition: color .2s ease, box-shadow .2s ease; } a:hover, a:focus { color: #ffe229; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* ── Container ────────────────────────────────────────────────── */ .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; } /* ── Typography ───────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'Sarabun', sans-serif; color: #fff372; line-height: 1.2; font-weight: 600; } h1 { font-size: clamp(28px, 5vw, 40px); } h2 { font-size: clamp(22px, 3.5vw, 32px); } h3 { font-size: clamp(18px, 2.5vw, 25px); } p { margin-bottom: 1em; } /* ── Neon Utility Box ─────────────────────────────────────────── */ .neon-box { background-color: #000; border: 1px solid var(--neon-blue); box-shadow: 0 0 5px 3px var(--neon-blue) inset, 0 0 10px 2px rgba(45,104,196,.4); border-radius: 6px; transition: box-shadow .3s, border-color .3s; overflow: hidden; } .neon-box:hover { box-shadow: 0 0 8px 4px var(--neon-purple) inset, 0 0 18px 4px rgba(153,50,204,.5); border-color: var(--neon-purple); } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-block; padding: 10px 22px; border-radius: 30px; font-family: 'Sarabun', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1; text-align: center; cursor: pointer; transition: all .3s; border: 2px solid transparent; } .btn--lg { padding: 14px 32px; font-size: 1.1rem; } .btn--blue { background-color: var(--neon-blue); color: #fff; border-color: var(--neon-blue); box-shadow: 0 0 20px 5px rgba(45,104,196,.6); } .btn--blue:hover { filter: brightness(0.85); box-shadow: 0 0 30px 8px rgba(45,104,196,.8); color: #fff; } .btn--purple { background-color: var(--neon-purple); color: #fff; border-color: var(--neon-purple); box-shadow: 0 0 20px 5px rgba(153,50,204,.6); } .btn--purple:hover { filter: brightness(0.85); box-shadow: 0 0 30px 8px rgba(153,50,204,.8); color: #fff; } .btn--green { background-color: var(--neon-accent); color: #000; border-color: var(--neon-accent); } .btn--green:hover { background-color: #ffe229; border-color: #ffe229; color: #000; } /* ══════════════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 100; background-color: #000; box-shadow: 0 0 20px 10px var(--neon-blue); } .header-inner { display: flex; align-items: center; gap: 20px; padding-top: 10px; padding-bottom: 10px; } /* Logo */ .site-logo { flex-shrink: 0; } .site-logo img { max-height: 60px; width: auto; } .logo-text { font-size: 1.5rem; font-weight: 700; color: #fff372; } /* Nav Box — bordered container matching original site */ .nav-box { flex: 1; border: 2px solid var(--neon-blue); box-shadow: 0 0 8px 2px var(--neon-blue), inset 0 0 12px 2px rgba(153,50,204,.25); border-radius: 4px; background: rgba(0,0,10,.6); padding: 0 6px; } /* Nav */ .primary-nav { width: 100%; } .nav-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; align-items: center; } .nav-menu li { position: relative; } .nav-menu a { display: block; padding: 8px 12px; color: var(--neon-blue); font-family: Tahoma, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: -.1px; transition: color .3s; } .nav-menu a:hover, .nav-menu .current-menu-item > a { color: #fff; text-shadow: 0 0 6px #fff; } /* " | " dividers between items */ .nav-menu li:not(:last-child)::after { content: '|'; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); color: var(--neon-blue); font-size: .9rem; pointer-events: none; } /* Header CTA */ .header-cta { display: flex; gap: 10px; flex-shrink: 0; } /* Hamburger */ .menu-toggle { display: none; background: transparent; border: 2px solid #2d68c4; border-radius: 8px; color: #fff; font-size: 1.4rem; padding: 6px 10px; cursor: pointer; margin-left: auto; } /* ══════════════════════════════════════════════════════════════ MOBILE FOOTER NAV ══════════════════════════════════════════════════════════════ */ .mobile-footer-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: linear-gradient(to bottom, #05020f, #000); border-top: 3px solid var(--neon-blue); box-shadow: 0 -4px 16px rgba(45,104,196,.6), 0 -1px 0 var(--neon-purple) inset; } .mobile-footer-nav .mfn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px 6px; color: var(--neon-purple); font-size: .72rem; font-family: 'Sarabun', sans-serif; font-weight: 600; flex: 1; text-align: center; transition: color .2s; } .mobile-footer-nav .mfn-item:hover { color: #fff; } .mfn-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--neon-purple); border-radius: 6px; font-size: 1.1rem; line-height: 1; transition: border-color .2s, color .2s; } .mfn-item:hover .mfn-icon { border-color: var(--neon-blue); color: var(--neon-blue); } /* ══════════════════════════════════════════════════════════════ MAIN CONTENT ══════════════════════════════════════════════════════════════ */ .site-content { min-height: 60vh; padding-bottom: 80px; /* space for mobile footer nav */ } /* ══════════════════════════════════════════════════════════════ PAGE HERO ══════════════════════════════════════════════════════════════ */ .page-hero { padding: 40px 20px 20px; text-align: center; } .page-hero .page-title { margin-bottom: 8px; } .page-subtitle { color: #aaa; font-size: 1rem; } /* ══════════════════════════════════════════════════════════════ HERO SECTION (Front Page) ══════════════════════════════════════════════════════════════ */ .hero-section { padding: 60px 20px; text-align: center; } .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; } .hero-logo img { max-height: 100px; margin: 0 auto; } .hero-title { font-size: clamp(32px, 6vw, 52px); color: #fff372; } .hero-subtitle { font-size: 1.1rem; color: #ccc; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } /* ══════════════════════════════════════════════════════════════ FEATURES GRID ══════════════════════════════════════════════════════════════ */ .features-section { padding: 30px 0; } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .feature-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px; border: 1px solid #2d68c4; box-shadow: 0 0 5px 3px #2d68c4 inset; border-radius: 6px; color: #fff; transition: box-shadow .3s; } .feature-item:hover { box-shadow: 0 0 8px 4px #9932cc inset; border-color: #9932cc; } .feature-item__icon { font-size: 2rem; color: #9932cc; } .feature-item__label { font-size: .85rem; font-family: 'Sarabun', sans-serif; text-align: center; } /* ══════════════════════════════════════════════════════════════ SECTION TITLES ══════════════════════════════════════════════════════════════ */ .section-title { text-align: center; margin: 40px 0 24px; font-size: 2rem; color: #fff372; } /* ══════════════════════════════════════════════════════════════ POSTS GRID (Blog / Article) ══════════════════════════════════════════════════════════════ */ .articles-section { padding: 20px 0 40px; } .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .post-card { display: flex; flex-direction: column; } .post-card__img { width: 100%; height: 200px; object-fit: cover; } .post-card__body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .post-card__date { font-size: .8rem; color: #888; } .post-card__title a { color: #fff372; font-size: 1.05rem; } .post-card__title a:hover { color: #ffe229; } .post-card__excerpt { color: #ccc; font-size: .9rem; flex: 1; } .post-card__btn { align-self: flex-start; margin-top: auto; } /* ══════════════════════════════════════════════════════════════ PROMO GRID ══════════════════════════════════════════════════════════════ */ .promotion-section { padding: 20px 0 60px; } .promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .promo-card { display: flex; flex-direction: column; } .promo-card__img { width: 100%; height: auto; max-height: 320px; object-fit: cover; transition: transform .3s; } .promo-card:hover .promo-card__img { transform: scale(1.03); } .promo-card__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .promo-card__title a { color: #fff372; } .promo-card__title a:hover { color: #ffe229; } .promo-card__excerpt { color: #ccc; font-size: .9rem; } .promo-card__btn { align-self: flex-start; margin-top: auto; } /* ── CTA Section ─ */ .promo-cta-section { padding: 40px 0; text-align: center; } /* ══════════════════════════════════════════════════════════════ SLOT GRID ══════════════════════════════════════════════════════════════ */ .slot-section { padding: 20px 0 60px; } .slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .slot-card { display: flex; flex-direction: column; } .slot-card__thumb img { width: 100%; height: 180px; object-fit: cover; } .slot-card__body { padding: 12px; flex: 1; } .slot-card__title a { color: #fff372; font-size: 1rem; } .slot-card__title a:hover { color: #ffe229; } .slot-card__excerpt { color: #bbb; font-size: .85rem; margin-top: 6px; } /* ══════════════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════════════ */ .contact-section { padding: 30px 0 60px; } /* ── Contact Help Pill Banner ─ */ .contact-help-banner { text-align: center; padding: 30px 20px 10px; } .contact-help-btn { display: inline-block; width: 100%; max-width: 620px; padding: 16px 40px; background: linear-gradient(90deg, var(--neon-blue) 0%, var(--neon-purple) 100%); border-radius: 50px; color: #fff; font-family: 'Sarabun', sans-serif; font-size: 1.2rem; font-weight: 700; text-align: center; box-shadow: 0 0 20px 6px rgba(45,104,196,.5); transition: box-shadow .3s, filter .3s; } .contact-help-btn:hover { filter: brightness(1.15); box-shadow: 0 0 32px 10px rgba(153,50,204,.6); color: #fff; } /* ── Contact Grid ─ */ .contact-section { padding: 30px 0 60px; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; justify-items: center; max-width: 680px; margin: 0 auto; } .contact-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: #fff; transition: transform .3s; } .contact-card:hover { transform: translateY(-4px); color: #fff; } .contact-card__icon-wrap { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: #fff; border-radius: 50%; overflow: hidden; box-shadow: 0 0 16px rgba(255,255,255,.2); } .contact-card__label { font-family: 'Sarabun', sans-serif; font-size: 1rem; font-weight: 600; color: #fff; } /* ══════════════════════════════════════════════════════════════ GENERIC PAGE CONTENT ══════════════════════════════════════════════════════════════ */ .page-content { padding: 40px 20px; } .entry-content p { margin-bottom: 1.4em; color: #ddd; } .entry-content a { color: #ffe500; text-decoration: underline; } .entry-content h2, .entry-content h3 { color: #fff372; margin: 1.5em 0 .5em; } .no-items { color: #888; text-align: center; padding: 40px 0; } /* ══════════════════════════════════════════════════════════════ SITE FOOTER ══════════════════════════════════════════════════════════════ */ .site-footer { background-color: #000; border-top: 1px solid #2d68c4; padding: 20px 0; } .footer-inner { text-align: center; } .footer-copyright { color: #fff; font-size: .9rem; margin: 0; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — Tablet ≤ 1024px ══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .posts-grid, .promo-grid { grid-template-columns: repeat(2, 1fr); } .slot-grid { grid-template-columns: repeat(3, 1fr); } .features-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — Mobile ≤ 767px ══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Show mobile nav, hide desktop nav/cta */ .nav-box, .header-cta { display: none; } .menu-toggle { display: block; } .mobile-footer-nav { display: flex; align-items: stretch; } /* Show mobile nav when toggled */ .nav-box.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #000; border: none; border-top: 1px solid var(--neon-blue); box-shadow: 0 10px 20px rgba(45,104,196,.4); z-index: 99; border-radius: 0; } .nav-box.is-open .nav-menu { flex-direction: column; } .nav-box.is-open .nav-menu li::after { display: none; } .nav-box.is-open .nav-menu a { padding: 14px 20px; border-bottom: 1px solid #111; } /* Grids */ .posts-grid, .promo-grid { grid-template-columns: 1fr; } .slot-grid { grid-template-columns: repeat(2, 1fr); } .features-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: repeat(2, 1fr); } .site-content { padding-bottom: 70px; } h1 { font-size: 28px; } } /* ══════════════════════════════════════════════════════════════ BREADCRUMB ══════════════════════════════════════════════════════════════ */ .breadcrumb { font-size: .85rem; color: #888; margin-bottom: 16px; padding: 10px 0; } .breadcrumb a { color: var(--neon-blue); } .breadcrumb a:hover { color: var(--neon-yellow); } /* ══════════════════════════════════════════════════════════════ WP SEARCH FORM ══════════════════════════════════════════════════════════════ */ .search-form { display: flex; gap: 8px; max-width: 500px; margin: 20px auto; } .search-form .search-field { flex: 1; padding: 10px 16px; background: #111; border: 1px solid var(--neon-blue); border-radius: 30px 0 0 30px; color: #fff; font-size: 1rem; outline: none; } .search-form .search-field:focus { border-color: var(--neon-purple); box-shadow: 0 0 8px var(--neon-purple); } .search-form .search-submit { padding: 10px 22px; background: var(--neon-blue); border: none; border-radius: 0 30px 30px 0; color: #fff; font-size: 1rem; cursor: pointer; transition: background .3s; } .search-form .search-submit:hover { background: var(--neon-purple); } /* ══════════════════════════════════════════════════════════════ WP PAGINATION ══════════════════════════════════════════════════════════════ */ .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .nav-links a, .nav-links span { display: inline-block; padding: 8px 16px; border: 1px solid var(--neon-blue); border-radius: 4px; color: var(--neon-blue); font-size: .9rem; transition: all .2s; } .nav-links a:hover, .nav-links .current { background: var(--neon-blue); color: #fff; }