kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: light theme + audited color-conflict-safe tokens

Browse Source 
- global.css: rewrite all CSS variables for light-first theme
  - White bg, dark text, yellow accent (preserved)
  - New --color-bg, --color-bg-soft, --color-bg-alt tokens
  - All button variants audited: btn-primary (yellow/black, never matches
    any white/yellow/soft bg), btn-dark (black/white, safe on yellow/light),
    btn-outline-dark, btn-outline-light (only on dark), btn-outline-yellow
  - Form inputs: white bg, dark text, gray border, yellow focus ring
  - Nav: white bg, dark text, yellow hover underline
  - Footer: white bg, dark text, social icons on soft bg
  - Section variants: .section-soft, .section-yellow (utility classes)
  - Removed dark variants: .section-dark, .btn-dark-as-section-bg

- Base.astro: theme-color = #fed400 (yellow)
- Hero.astro: kinetic hero on WHITE bg with yellow badge + dark text
- PageHero.astro: light hero with yellow accent line at bottom
- Navigation.astro: white bg, dark links, yellow CTA, white logo banner
  with /images/logo-long-black.png (works on light/yellow)
- Footer.astro: white bg, dark text, social icons, yellow CTA
- Card components: white bg, gray border, yellow hover state
This commit is contained in:
Macky
2026-06-03 14:14:54 +07:00
parent 0faf75a9a2
commit 9fba7f2fd6
9 changed files with 685 additions and 1031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/Footer.astro
View File

@@ -1,7 +1,7 @@
---
/**
* MOREMINIMORE - FOOTER COMPONENT
* Minimal design with animated elements
* MOREMINIMORE - FOOTER COMPONENT (LIGHT THEME)
* White bg + dark text + black-text logo (matches new light theme)
*/
const currentYear = new Date().getFullYear();
@@ -23,31 +23,20 @@ const serviceLinks = [
---
<footer class="footer">
<!-- Background Pattern -->
<div class="footer-bg">
<div class="bg-dots"></div>
</div>
<!-- Geometric Elements -->
<div class="footer-geo">
<div class="geo-circle"></div>
<div class="geo-ring"></div>
</div>
<div class="container">
<div class="footer-grid">
<!-- Brand Column -->
<div class="footer-brand">
<a href="/" class="footer-logo">
<div class="logo-banner">
<img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
<img src="/images/logo-long-black.png" alt="MoreminiMore" class="logo-img" />
</div>
</a>
<p class="footer-tagline">
รับทำเว็บไซต์ SEO AI Chatbot<br/>
สำหรับธุรกิจไทย
</p>
<!-- Social Links -->
<div class="footer-social">
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener" class="social-btn" aria-label="Facebook">
@@ -107,7 +96,7 @@ const serviceLinks = [
<span class="contact-icon">📍</span>
<span>สมุทรสาคร, ประเทศไทย</span>
</div>
<a href="/contact" class="btn btn-primary footer-cta">
ปรึกษาฟรี
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -130,7 +119,7 @@ const serviceLinks = [
</div>
</footer>
<!-- Back to Top Button -->
<!-- Back to Top Button (yellow on light bg) -->
<button class="back-to-top" id="back-to-top" aria-label="กลับไปด้านบน">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<path d="M12 19V5M5 12l7-7 7 7"/>
@@ -139,68 +128,21 @@ const serviceLinks = [
<style>
/* ============================================
FOOTER BASE
FOOTER BASE — LIGHT THEME
============================================ */
.footer {
position: relative;
background: var(--color-dark);
color: var(--color-white);
background: var(--color-white);
color: var(--color-black);
padding: 100px 0 40px;
overflow: hidden;
}
/* ============================================
BACKGROUND
============================================ */
.footer-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.bg-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.06) 1px, transparent 0);
background-size: 50px 50px;
}
/* Geometric Elements */
.footer-geo {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.geo-circle {
position: absolute;
width: 400px;
height: 400px;
background: var(--color-primary);
border-radius: 50%;
bottom: -200px;
left: -150px;
opacity: 0.03;
}
.geo-ring {
position: absolute;
width: 250px;
height: 250px;
border: 2px solid var(--color-primary);
border-radius: 50%;
top: 20%;
right: -80px;
opacity: 0.08;
border-top: 1px solid var(--color-gray-200);
}
/* ============================================
GRID
============================================ */
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
@@ -211,9 +153,9 @@ const serviceLinks = [
}
/* ============================================
BRAND - LOGO BANNER
BRAND - LOGO BANNER (light)
============================================ */
.footer-logo {
display: inline-flex;
margin-bottom: 24px;
@@ -221,9 +163,10 @@ const serviceLinks = [
.logo-banner {
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0 16px 16px 0;
padding: 10px 20px 10px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.logo-img {
@@ -235,7 +178,7 @@ const serviceLinks = [
.footer-tagline {
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.6);
color: var(--color-gray-600);
margin-bottom: 32px;
}
@@ -251,7 +194,8 @@ const serviceLinks = [
justify-content: center;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
background: var(--color-bg-soft);
border: 1px solid var(--color-gray-200);
border-radius: 50%;
transition: all 0.3s var(--ease-out-expo);
}
@@ -264,26 +208,22 @@ const serviceLinks = [
.social-btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(254, 212, 0, 0.3);
}
.social-btn:hover img {
/* Keep original icon colors */
filter: none;
}
/* ============================================
COLUMNS
============================================ */
.footer-title {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--color-primary);
color: var(--color-black);
margin-bottom: 24px;
}
@@ -299,7 +239,7 @@ const serviceLinks = [
align-items: center;
gap: 8px;
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
color: var(--color-gray-600);
transition: all 0.3s ease;
}
@@ -307,10 +247,11 @@ const serviceLinks = [
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
color: var(--color-primary);
}
.footer-link:hover {
color: var(--color-primary);
color: var(--color-black);
transform: translateX(8px);
}
@@ -322,7 +263,7 @@ const serviceLinks = [
/* ============================================
CONTACT
============================================ */
.footer-contact {
display: flex;
flex-direction: column;
@@ -333,7 +274,7 @@ const serviceLinks = [
align-items: center;
gap: 12px;
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
color: var(--color-gray-600);
margin-bottom: 12px;
}
@@ -342,7 +283,7 @@ const serviceLinks = [
}
.contact-item a:hover {
color: var(--color-primary);
color: var(--color-primary-dark);
}
.footer-cta {
@@ -363,20 +304,20 @@ const serviceLinks = [
/* ============================================
BOTTOM
============================================ */
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--color-gray-200);
position: relative;
z-index: 1;
}
.footer-legal p {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
color: var(--color-gray-500);
}
.footer-links-bottom {
@@ -386,18 +327,18 @@ const serviceLinks = [
.footer-links-bottom a {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
color: var(--color-gray-500);
transition: color 0.3s ease;
}
.footer-links-bottom a:hover {
color: var(--color-primary);
color: var(--color-black);
}
/* ============================================
BACK TO TOP
============================================ */
.back-to-top {
position: fixed;
bottom: 32px;
@@ -439,7 +380,7 @@ const serviceLinks = [
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
@@ -483,7 +424,7 @@ const serviceLinks = [
<script>
// Back to top functionality
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 600) {
backToTop?.classList.add('visible');
@@ -495,4 +436,4 @@ const serviceLinks = [
backToTop?.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>
</script>